Tailwind CSS Calendar Drawers Blocks

Calendar Drawers

Calendar drawers for daily event lists and slide-in event setup panels used in scheduling workspaces.

Month Calendar View with Daily Events Drawer Pro

Month calendar workspace pairs the date grid with a slide-in daily agenda drawer for stacked event details.

Create a responsive UI block named "Month Calendar View with Daily Events Drawer" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/productivity/calendar-drawers/#month-calendar-view-with-daily-events-drawer. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Build only this source block. Do not add unrelated page chrome, marketing sections, dashboard widgets, extra cards, extra modals, placeholder states, or footer content unless they are present in the source block.

Source metadata:
- Catalog family: productivity/calendar-drawers
- Block ID: month-calendar-view-with-daily-events-drawer
- Source description: Month calendar workspace pairs the date grid with a slide-in daily agenda drawer for stacked event details.
- Preview iframe: https://preline.co/blocks/productivity/calendar-drawers/iframes/pro/month-calendar-view-with-daily-events-drawer.html (repo path: blocks/productivity/calendar-drawers/iframes/pro/month-calendar-view-with-daily-events-drawer.html)
- Source markup reference:
  - partials/pro/calendar-app/pages/offcanvas-daily-events.html
  - partials/pro/calendar-app/modals/calendar-create-event.html
  - partials/pro/calendar-app/modals/calendar-edit-event.html
  - partials/pro/calendar-app/modals/custom-recurrence-event.html
  - partials/pro/calendar-app/sidebars/main.html
  - partials/pro/calendar-app/navbars/main.html

Use the source HTML tab and referenced partials as the source of truth. Preserve exact visible copy, content order, hierarchy, component density, spacing relationships, borders, radii, icons, status markers, dropdown/menu rows, form states, responsive order, and interaction content. If the source imports shared partials or assets, reuse those local components/assets when the destination can import them; otherwise recreate their visible structure faithfully from the source.

Token and Tailwind rules:
- Treat source token classes as semantic roles, not fixed class names to blindly copy.
- Map every source `primary` role to the destination project's current primary token/config/CSS variable. Active links, checked states, progress lines, focus rings, primary gradients, logo primary fills/strokes, and primary buttons must share that destination primary color.
- Do not hardcode Preline blue or emit `text-blue-*`, `bg-blue-*`, `border-blue-*`, `fill-blue-*`, `stroke-blue-*`, `from-blue-*`, `via-blue-*`, `to-blue-*`, or fixed blue hex/rgb values for primary roles unless the destination primary is explicitly blue.
- Before using source-only token classes such as `text-foreground-inverse`, `bg-layer`, `border-layer-line`, `bg-navbar`, `border-line-2`, `bg-dropdown`, or similar Preline tokens, inspect the destination Tailwind config, global CSS/theme variables, and existing components for an equivalent utility/token.
- Prefer existing destination utilities such as `text-white`, `text-primary-foreground`, `text-foreground`, `text-muted-foreground`, `bg-background`, `bg-card`, `bg-popover`, `border-border`, `bg-muted`, `bg-accent`, `ring-ring`, or app-specific tokens when they match the source role.
- If no equivalent exists, add the smallest project-appropriate token or utility before using it. Do not leave undefined source classes in the generated markup.

Asset and icon rules:
- Use exact source images, avatars, product media, branded SVGs, payment marks, channel logos, and app icons when the source provides them.
- Do not replace source assets with initials, emojis, generic icons, generated placeholders, or different stock media.
- Ordinary interface icons should match the destination icon system. If the project uses Lucide-style outline icons, keep the 24 viewBox, `fill="none"`, `stroke="currentColor"`, rounded caps/joins, and source stroke widths.
- Brand/source SVG shape is fixed content. Only map semantic colors such as primary fill/stroke to the destination token.

Behavior and accessibility:
- Preserve source interactions: links, buttons, dropdowns, tooltips, tabs, menus, drawers, modals, toggles, search, filters, form controls, validation states, loading/empty states, and open/closed defaults.
- For source behavior powered by Preline JS or a third-party package, inspect installed dependencies and existing primitives first. Reuse a destination primitive only when it can preserve the source geometry, states, accessibility, and behavior.
- Treat new dependencies as allowed by default unless the user, repository instructions, or package policy explicitly prohibit them. When no faithful equivalent exists, install/use the Preline UI runtime/plugin or the exact source third-party package; do not silently substitute ad hoc JavaScript or custom React state.
- Only under an explicit dependency prohibition may you implement a scoped framework-native equivalent. It must preserve keyboard and focus management, placement and layering, responsive behavior, and accessibility; static or simplified approximations are not acceptable.
- Use semantic HTML and accessible names. Keep `aria-current`, `aria-expanded`, `aria-haspopup`, `role`, labels, focus states, and keyboard behavior when the source exposes them or the destination primitive requires them.
- Desktop and mobile states must not overlap text, clip controls, or shift layout unexpectedly. Controls with icons, counters, badges, and labels should keep stable dimensions across hover/focus/active states.

Final QA:
- Compare the result against the source preview and HTML tab.
- Verify primary color follows the destination project, not Preline's default blue.
- Verify all emitted classes exist in the destination or are added deliberately.
- Verify responsive layout, focus states, dropdown/popover layering, long-text truncation, and source asset paths.
- Keep the final implementation scoped to this block and avoid unrelated refactors.

<body class="hs-overlay-body-open bg-background overflow-hidden">
                      
                      <aside id="hs-pro-sidebar" class="hs-overlay [--body-scroll:true] lg:[--overlay-backdrop:false] [--is-layout-affect:true] [--opened:lg] [--auto-close:lg]
                        hs-overlay-open:translate-x-0 lg:hs-overlay-layout-open:translate-x-0
                        -translate-x-full transition-all duration-300 transform
                        w-56
                        hidden
                        fixed inset-y-0 z-60 inset-s-0
                        bg-sidebar-2 border-e border-line-1
                        lg:block lg:-translate-x-full lg:inset-e-auto lg:bottom-0" tabindex="-1" aria-label="Main Sidebar">
                        <div class="flex flex-col h-full max-h-full py-2">
                          
                          <div class="px-2 pb-2 mb-3 grid gap-y-0.5">
                            <div class="w-52 ">
                              
                              <div class="flex justify-between items-center gap-1 mb-1">
                                <span class="ps-1.5 block text-xs font-medium text-muted-foreground-1">January 2026</span>

<div class="flex mb-1.5">
                                <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
                                  Mo
                                </span>
                                <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
                                  Tu
                                </span>
                                <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
                                  We
                                </span>
                                <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
                                  Th
                                </span>
                                <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
                                  Fr
                                </span>
                                <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
                                  Sa
                                </span>
                                <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
                                  Su
                                </span>
                              </div>

<div class="flex">
                                <div>
                                  <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    1
                                  </button>
                                </div>
                                <div>
                                  <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    2
                                  </button>
                                </div>
                                <div>
                                  <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    3
                                    <span class="absolute bottom-0.5 inset-s-1/2 size-1 bg-primary rounded-full -translate-x-1/2"></span>
                                  </button>
                                </div>
                                <div>
                                  <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    4
                                  </button>
                                </div>
                                <div>
                                  <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    5
                                  </button>
                                </div>
                                <div>
                                  <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    6
                                  </button>
                                </div>
                                <div>
                                  <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    7
                                  </button>
                                </div>
                              </div>

<div class="flex">
                                <div>
                                  <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    8
                                  </button>
                                </div>
                                <div>
                                  <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    9
                                  </button>
                                </div>
                                <div>
                                  <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    10
                                  </button>
                                </div>
                                <div>
                                  <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    11
                                  </button>
                                </div>
                                <div>
                                  <button type="button" class="m-px relative size-7 flex justify-center items-center border border-primary-line bg-primary text-xs font-medium text-primary-foreground hover:border-primary rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus">
                                    12
                                  </button>
                                </div>
                                <div>
                                  <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    13
                                  </button>
                                </div>
                                <div>
                                  <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    14
                                  </button>
                                </div>
                              </div>

<div class="flex">
                                <div>
                                  <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    15
                                  </button>
                                </div>
                                <div>
                                  <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    16
                                  </button>
                                </div>
                                <div>
                                  <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    17
                                  </button>
                                </div>
                                <div>
                                  <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    18
                                  </button>
                                </div>
                                <div>
                                  <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    19
                                  </button>
                                </div>
                                <div>
                                  <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    20
                                  </button>
                                </div>
                                <div>
                                  <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    21
                                  </button>
                                </div>
                              </div>

<div class="flex">
                                <div>
                                  <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    22
                                  </button>
                                </div>
                                <div>
                                  <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    23
                                  </button>
                                </div>
                                <div>
                                  <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    24
                                  </button>
                                </div>
                                <div>
                                  <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    25
                                  </button>
                                </div>
                                <div>
                                  <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    26
                                  </button>
                                </div>
                                <div>
                                  <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    27
                                  </button>
                                </div>
                                <div>
                                  <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    28
                                  </button>
                                </div>
                              </div>

<div class="flex">
                                <div>
                                  <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    29
                                  </button>
                                </div>
                                <div>
                                  <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    30
                                  </button>
                                </div>
                                <div>
                                  <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    31
                                  </button>
                                </div>
                                <div>
                                  <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    1
                                  </button>
                                </div>
                                <div>
                                  <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    2
                                  </button>
                                </div>
                                <div>
                                  <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    3
                                  </button>
                                </div>
                                <div>
                                  <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    4
                                  </button>
                                </div>
                              </div>

<div class="flex">
                                <div>
                                  <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    5
                                  </button>
                                </div>
                                <div>
                                  <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    6
                                  </button>
                                </div>
                                <div>
                                  <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    7
                                  </button>
                                </div>
                                <div>
                                  <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    8
                                  </button>
                                </div>
                                <div>
                                  <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    9
                                  </button>
                                </div>
                                <div>
                                  <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    10
                                  </button>
                                </div>
                                <div>
                                  <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    11
                                  </button>
                                </div>
                              </div>
                              
                            </div>

</div>

<div class="overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                            <div class="py-4 px-2">
                              <div class="space-y-5">
                                
                                <div class="hs-accordion-group" data-hs-accordion-always-open>
                                  <div class="hs-accordion active" id="account-one-accordion">
                                    <button type="button" class="hs-accordion-toggle w-full text-start flex gap-x-1.5 p-1.5 ps-2 text-xs text-muted-foreground-1 rounded-md hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" aria-expanded="true" aria-controls="account-one-accordion-sub">
                                      james@preline.co

<div id="account-one-accordion-sub" class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300" role="region" aria-labelledby="account-one-accordion">
                                      <div class="hs-accordion-group mt-0.5 space-y-0.5" data-hs-accordion-always-open>
                                        
                                        <label for="hs-pro-cach1" class="p-1.5 flex items-center gap-x-2 rounded-md cursor-pointer text-xs text-foreground hover:bg-surface-hover">
                                          <input type="checkbox" class="shrink-0 size-3.5 bg-layer border-line-3 rounded-sm shadow-2xs text-teal-600 focus:ring-0 focus:ring-offset-0 checked:bg-teal-600 checked:border-teal-600 disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-cach1" checked>
                                          James Collins
                                        </label>

<label for="hs-pro-cach2" class="p-1.5 flex items-center gap-x-2 rounded-md cursor-pointer text-xs text-foreground hover:bg-surface-hover">
                                          <input type="checkbox" class="shrink-0 size-3.5 bg-layer border-line-3 rounded-sm shadow-2xs text-sky-600 focus:ring-0 focus:ring-offset-0 checked:bg-sky-600 checked:border-sky-600 disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-cach2" checked>
                                          Preline tasks
                                        </label>

<label for="hs-pro-cach3" class="p-1.5 flex items-center gap-x-2 rounded-md cursor-pointer text-xs text-foreground hover:bg-surface-hover">
                                          <input type="checkbox" class="shrink-0 size-3.5 bg-layer border-line-3 rounded-sm shadow-2xs text-purple-600 focus:ring-0 focus:ring-offset-0 checked:bg-purple-600 checked:border-purple-600 disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-cach3" checked>
                                          Performance Tasks
                                        </label>
                                        
                                      </div>
                                    </div>
                                  </div>
                                </div>

<div class="hs-accordion-group" data-hs-accordion-always-open>
                                  <div class="hs-accordion active" id="account-two-accordion">
                                    <button type="button" class="hs-accordion-toggle w-full text-start flex gap-x-1.5 p-1.5 ps-2 text-xs text-muted-foreground-1 rounded-md hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" aria-expanded="true" aria-controls="account-two-accordion-sub">
                                      collinsjames@gmail.com

<div id="account-two-accordion-sub" class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300" role="region" aria-labelledby="account-two-accordion">
                                      <div class="hs-accordion-group mt-0.5 space-y-0.5" data-hs-accordion-always-open>
                                        
                                        <label for="hs-pro-cach4" class="p-1.5 flex items-center gap-x-2 rounded-md cursor-pointer text-xs text-foreground hover:bg-surface-hover">
                                          <input type="checkbox" class="shrink-0 size-3.5 bg-layer border-line-3 rounded-sm shadow-2xs text-pink-600 focus:ring-0 focus:ring-offset-0 checked:bg-pink-600 checked:border-pink-600 disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-cach4">
                                          Holidays
                                        </label>
                                        
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                
                              </div>

<div class="mt-5">
                                <button type="button" class="w-full text-start flex items-center gap-x-2.5 p-1.5 text-xs text-muted-foreground-1 rounded-md hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                  <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
                                  Add account
                                </button>
                              </div>
                            </div>
                          </div>
                          
    
                          <div class="py-4 px-2 border-t border-sidebar-2-divider">
                            <button type="button" class="p-2 inline-flex justify-center items-center gap-x-1 w-full text-xs rounded-md bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" data-hs-overlay="#hs-pro-dasadpm">
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="8" width="18" height="4" rx="1"/><path d="M12 8v13"/><path d="M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7"/><path d="M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5"/></svg>
                              Invite people
                            </button>
                          </div>

<footer class="mt-auto py-2 px-3">
                            <div class="flex items-center">
                              
                              <a class="flex-none rounded-md text-xl inline-block font-semibold focus:outline-hidden focus:opacity-80" href="#" aria-label="Preline">
                                <svg class="w-20 h-auto" width="116" height="32" viewBox="0 0 116 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                  <path d="M33.5696 30.8182V11.3182H37.4474V13.7003H37.6229C37.7952 13.3187 38.0445 12.9309 38.3707 12.5369C38.7031 12.1368 39.134 11.8045 39.6634 11.5398C40.1989 11.2689 40.8636 11.1335 41.6577 11.1335C42.6918 11.1335 43.6458 11.4044 44.5199 11.946C45.3939 12.4815 46.0926 13.291 46.6158 14.3743C47.139 15.4515 47.4006 16.8026 47.4006 18.4276C47.4006 20.0095 47.1451 21.3452 46.6342 22.4347C46.1295 23.518 45.4401 24.3397 44.5661 24.8999C43.6982 25.4538 42.7256 25.7308 41.6484 25.7308C40.8852 25.7308 40.2358 25.6046 39.7003 25.3523C39.1709 25.0999 38.737 24.7829 38.3984 24.4013C38.0599 24.0135 37.8014 23.6226 37.6229 23.2287H37.5028V30.8182H33.5696ZM37.4197 18.4091C37.4197 19.2524 37.5367 19.9879 37.7706 20.6158C38.0045 21.2436 38.343 21.733 38.7862 22.0838C39.2294 22.4285 39.768 22.6009 40.402 22.6009C41.0421 22.6009 41.5838 22.4254 42.027 22.0746C42.4702 21.7176 42.8056 21.2251 43.0334 20.5973C43.2673 19.9633 43.3842 19.2339 43.3842 18.4091C43.3842 17.5904 43.2704 16.8703 43.0426 16.2486C42.8149 15.6269 42.4794 15.1406 42.0362 14.7898C41.593 14.4389 41.0483 14.2635 40.402 14.2635C39.7618 14.2635 39.2202 14.4328 38.777 14.7713C38.34 15.1098 38.0045 15.59 37.7706 16.2116C37.5367 16.8333 37.4197 17.5658 37.4197 18.4091ZM49.2427 25.5V11.3182H53.0559V13.7926H53.2037C53.4622 12.9124 53.8961 12.2476 54.5055 11.7983C55.1149 11.3428 55.8166 11.1151 56.6106 11.1151C56.8076 11.1151 57.02 11.1274 57.2477 11.152C57.4754 11.1766 57.6755 11.2105 57.8478 11.2536V14.7436C57.6632 14.6882 57.4077 14.639 57.0815 14.5959C56.7553 14.5528 56.4567 14.5312 56.1859 14.5312C55.6073 14.5312 55.0903 14.6574 54.6348 14.9098C54.1854 15.156 53.8284 15.5007 53.5638 15.9439C53.3052 16.3871 53.176 16.898 53.176 17.4766V25.5H49.2427ZM64.9043 25.777C63.4455 25.777 62.1898 25.4815 61.1373 24.8906C60.0909 24.2936 59.2845 23.4503 58.7182 22.3608C58.1519 21.2652 57.8688 19.9695 57.8688 18.4737C57.8688 17.0149 58.1519 15.7346 58.7182 14.6328C59.2845 13.531 60.0816 12.6723 61.1096 12.0568C62.1437 11.4413 63.3563 11.1335 64.7474 11.1335C65.683 11.1335 66.5539 11.2843 67.3603 11.5859C68.1728 11.8814 68.8806 12.3277 69.4839 12.9247C70.0932 13.5218 70.5672 14.2727 70.9057 15.1776C71.2443 16.0762 71.4135 17.1288 71.4135 18.3352V19.4155H59.4384V16.978H67.7111C67.7111 16.4117 67.588 15.91 67.3418 15.473C67.0956 15.036 66.754 14.6944 66.317 14.4482C65.8861 14.1958 65.3844 14.0696 64.812 14.0696C64.2149 14.0696 63.6856 14.2081 63.2239 14.4851C62.7684 14.7559 62.4114 15.1222 62.1529 15.5838C61.8944 16.0393 61.762 16.5471 61.7559 17.1072V19.4247C61.7559 20.1264 61.8851 20.7327 62.1437 21.2436C62.4083 21.7545 62.7807 22.1484 63.2608 22.4254C63.741 22.7024 64.3103 22.8409 64.9689 22.8409C65.406 22.8409 65.8061 22.7794 66.1692 22.6562C66.5324 22.5331 66.8432 22.3485 67.1018 22.1023C67.3603 21.8561 67.5572 21.5545 67.6927 21.1974L71.3304 21.4375C71.1458 22.3116 70.7672 23.0748 70.1948 23.7273C69.6285 24.3736 68.896 24.8783 67.9974 25.2415C67.1048 25.5985 66.0738 25.777 64.9043 25.777ZM77.1335 6.59091V25.5H73.2003V6.59091H77.1335ZM79.5043 25.5V11.3182H83.4375V25.5H79.5043ZM81.4801 9.49006C80.8954 9.49006 80.3937 9.29616 79.9752 8.90838C79.5628 8.51444 79.3566 8.04356 79.3566 7.49574C79.3566 6.95407 79.5628 6.48935 79.9752 6.10156C80.3937 5.70762 80.8954 5.51065 81.4801 5.51065C82.0649 5.51065 82.5635 5.70762 82.9759 6.10156C83.3944 6.48935 83.6037 6.95407 83.6037 7.49574C83.6037 8.04356 83.3944 8.51444 82.9759 8.90838C82.5635 9.29616 82.0649 9.49006 81.4801 9.49006ZM89.7415 17.3011V25.5H85.8083V11.3182H89.5569V13.8203H89.723C90.037 12.9955 90.5632 12.343 91.3019 11.8629C92.0405 11.3767 92.9361 11.1335 93.9887 11.1335C94.9735 11.1335 95.8322 11.349 96.5647 11.7798C97.2971 12.2107 97.8665 12.8262 98.2728 13.6264C98.679 14.4205 98.8821 15.3684 98.8821 16.4702V25.5H94.9489V17.1719C94.9551 16.304 94.7335 15.6269 94.2841 15.1406C93.8348 14.6482 93.2162 14.402 92.4283 14.402C91.8989 14.402 91.4311 14.5159 91.0249 14.7436C90.6248 14.9714 90.3109 15.3037 90.0831 15.7408C89.8615 16.1716 89.7477 16.6918 89.7415 17.3011ZM107.665 25.777C106.206 25.777 104.951 25.4815 103.898 24.8906C102.852 24.2936 102.045 23.4503 101.479 22.3608C100.913 21.2652 100.63 19.9695 100.63 18.4737C100.63 17.0149 100.913 15.7346 101.479 14.6328C102.045 13.531 102.842 12.6723 103.87 12.0568C104.905 11.4413 106.117 11.1335 107.508 11.1335C108.444 11.1335 109.315 11.2843 110.121 11.5859C110.934 11.8814 111.641 12.3277 112.245 12.9247C112.854 13.5218 113.328 14.2727 113.667 15.1776C114.005 16.0762 114.174 17.1288 114.174 18.3352V19.4155H102.199V16.978H110.472C110.472 16.4117 110.349 15.91 110.103 15.473C109.856 15.036 109.515 14.6944 109.078 14.4482C108.647 14.1958 108.145 14.0696 107.573 14.0696C106.976 14.0696 106.446 14.2081 105.985 14.4851C105.529 14.7559 105.172 15.1222 104.914 15.5838C104.655 16.0393 104.523 16.5471 104.517 17.1072V19.4247C104.517 20.1264 104.646 20.7327 104.905 21.2436C105.169 21.7545 105.542 22.1484 106.022 22.4254C106.502 22.7024 107.071 22.8409 107.73 22.8409C108.167 22.8409 108.567 22.7794 108.93 22.6562C109.293 22.5331 109.604 22.3485 109.863 22.1023C110.121 21.8561 110.318 21.5545 110.454 21.1974L114.091 21.4375C113.907 22.3116 113.528 23.0748 112.956 23.7273C112.389 24.3736 111.657 24.8783 110.758 25.2415C109.866 25.5985 108.835 25.777 107.665 25.777Z" class="fill-primary" fill="currentColor"/>
                                  <path d="M1 29.5V16.5C1 9.87258 6.37258 4.5 13 4.5C19.6274 4.5 25 9.87258 25 16.5C25 23.1274 19.6274 28.5 13 28.5H12" class="stroke-primary" stroke="currentColor" stroke-width="2"/>
                                  <path d="M5 29.5V16.66C5 12.1534 8.58172 8.5 13 8.5C17.4183 8.5 21 12.1534 21 16.66C21 21.1666 17.4183 24.82 13 24.82H12" class="stroke-primary" stroke="currentColor" stroke-width="2"/>
                                  <circle cx="13" cy="16.5214" r="5" class="fill-primary" fill="currentColor"/>
                                </svg>
                              </a>
                              
                            </div>
                          </footer>
                          
                        </div>
                      </aside>

<main id="content" class="lg:hs-overlay-layout-open:ps-56 lg:pe-75 transition-all duration-300">
                        
                        <div class="p-2 sm:px-6 lg:px-4 bg-navbar">
                          <div class="mb-3 -ms-2 lg:ms-0 grid grid-cols-3 gap-2">
                            <div class="flex items-center gap-x-1">
                              
                              <button type="button" class="p-1.5 size-7.5 inline-flex items-center gap-x-1 text-xs rounded-md border border-transparent text-muted-foreground-1 hover:text-foreground disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:text-foreground" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-pro-sidebar" data-hs-overlay="#hs-pro-sidebar">
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M15 3v18"/><path d="m10 15-3-3 3-3"/></svg>
                                <span class="sr-only">Sidebar Toggle</span>
                              </button>
                              
                              
                              <div class="xl:hidden">
                                <button type="button" class="p-1.5 size-7.5 inline-flex items-center gap-x-1 text-xs rounded-md border border-transparent text-muted-foreground-1 hover:text-foreground disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:text-foreground" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-pro-secondary-sidebar" aria-label="Toggle navigation" data-hs-overlay="#hs-pro-secondary-sidebar">
                                  <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
                                  <span class="sr-only">Secondary Sidebar Toggle</span>
                                </button>
                              </div>
                              
                              
                              <div class="xl:hidden">
                                <button type="button" class="p-1.5 size-7.5 inline-flex items-center gap-x-1 text-xs rounded-md border border-transparent text-muted-foreground-1 hover:text-foreground disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:text-foreground" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-pro-secondary-sidebar" aria-label="Toggle navigation" data-hs-overlay="#hs-pro-secondary-sidebar">
                                  <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
                                  <span class="sr-only">Secondary Sidebar Toggle</span>
                                </button>
                              </div>
                              
                            </div>

<div class="relative flex first:before:hidden before:absolute before:top-1/2 before:-inset-s-1 before:h-3 before:border-s before:border-line-2 before:-translate-y-1/2">
                                  <a class="py-1 px-2 inline-flex items-center gap-x-1 text-xs rounded-sm text-navbar-nav-foreground disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden bg-surface" href="month.html">
                                    Month
                                  </a>
                                </div>

<div class="text-end">
                              <button type="button" class="p-1.5 min-w-7.5 min-h-7.5 inline-flex justify-center items-center gap-x-2 text-xs rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden" data-hs-overlay="#hs-pro-clce">
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
                                <span class="sr-only">Add event</span>
                              </button>
                            </div>
                          </div>
  
                          <div class="flex flex-wrap justify-between items-center gap-2">
                            <div class="lg:ps-1.5">
                              <h1 class="text-lg sm:text-2xl text-foreground">
                                <span class="font-semibold">January </span> 2024
                              </h1>
                            </div>
    
                            
                            <div class="flex -space-x-px">
                              <button type="button" class="size-7.5 inline-flex justify-center items-center gap-x-1 text-xs first:rounded-s-md last:rounded-e-md bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                              </button>

<button type="button" class="py-1.5 px-2 inline-flex items-center gap-x-1 text-xs first:rounded-s-md last:rounded-e-md bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                                Today
                              </button>

<div class="bg-layer size-full overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                          <div class="grid">
                            
                            <div class="sticky top-0 inset-x-0 z-9 bg-layer border-b border-line-2">
                              <div class="grid grid-cols-7">
                                <span class="py-2 px-3 block text-end text-xs bg-layer text-layer-foreground">
                                  Mon
                                </span>
                                <span class="py-2 px-3 block text-end text-xs bg-layer text-layer-foreground">
                                  Tue
                                </span>
                                <span class="py-2 px-3 block text-end text-xs bg-layer text-layer-foreground">
                                  Wed
                                </span>
                                <span class="py-2 px-3 block text-end text-xs bg-layer text-layer-foreground">
                                  Thu
                                </span>
                                <span class="py-2 px-3 block text-end text-xs bg-layer text-layer-foreground">
                                  Fri
                                </span>
                                <span class="py-2 px-3 block text-end text-xs bg-layer text-layer-foreground">
                                  Sat
                                </span>
                                <span class="py-2 px-3 block text-end text-xs bg-layer text-layer-foreground">
                                  Sun
                                </span>
                              </div>
                            </div>

<div class="relative h-[125px] overflow-hidden flex">
                              
                              <div class="size-full grid grid-cols-7">
                                <div class="relative flex flex-1 border-s border-b border-line-2 first:border-s-0">
                                  <button type="button" class="absolute top-1.5 inset-e-1.5 z-1 min-w-6 min-h-6 px-1 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    <span class="hidden sm:block font-semibold me-1">January</span> 1
                                  </button>
                                </div>
                                <div class="relative flex flex-1 border-s border-b border-line-2 first:border-s-0">
                                  <button type="button" class="absolute top-1.5 inset-e-1.5 z-1 min-w-6 min-h-6 px-1 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    2
                                  </button>
                                  <div class="mt-8 p-1 w-full space-y-1">
                                    <button type="button" class="py-0.5 px-1 relative size-full flex text-start border-s-4 border-pink-600 bg-pink-100 text-pink-800 text-xs rounded-sm focus:bg-pink-200 focus:shadow-2xs dark:bg-pink-500/10 dark:before:absolute dark:before:inset-0 dark:before:bg-pink-800/20 dark:before:rounded-e dark:focus:before:bg-pink-800/30 dark:text-pink-500" data-hs-overlay="#hs-pro-clee">
                                      <span class="block truncate">
                                        <span class="block font-semibold truncate">Searchbox</span>
                                        <span class="block truncate">9AM - 10PM</span>
                                      </span>
                                    </button>
                                  </div>
                                </div>
                                <div class="relative flex flex-1 border-s border-b border-line-2 first:border-s-0">
                                  <button type="button" class="absolute top-1.5 inset-e-1.5 z-1 min-w-6 min-h-6 px-1 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    3
                                  </button>
                                </div>
                                <div class="relative flex flex-1 border-s border-b border-line-2 first:border-s-0">
                                  <button type="button" class="absolute top-1.5 inset-e-1.5 z-1 min-w-6 min-h-6 px-1 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    4
                                  </button>
                                </div>
                                <div class="relative flex flex-1 border-s border-b border-line-2 first:border-s-0">
                                  <button type="button" class="absolute top-1.5 inset-e-1.5 z-1 min-w-6 min-h-6 px-1 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    5
                                  </button>
                                </div>
                                <div class="relative z-8 flex flex-1 border-s border-b border-line-2 first:border-s-0 after:absolute after:inset-0 after:-z-1 after:bg-surface/30">
                                  <button type="button" class="absolute top-1.5 inset-e-1.5 z-1 min-w-6 min-h-6 px-1 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    6
                                  </button>
                                </div>
                                <div class="relative z-8 flex flex-1 border-s border-b border-line-2 first:border-s-0 after:absolute after:inset-0 after:-z-1 after:bg-surface/30">
                                  <button type="button" class="absolute top-1.5 inset-e-1.5 z-1 min-w-6 min-h-6 px-1 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    7
                                  </button>
                                  <div class="mt-8 p-1 w-full space-y-1">
                                    <button type="button" class="py-0.5 px-1 relative w-full flex text-start border-s-4 border-sky-600 bg-sky-100 text-sky-800 text-xs rounded-sm focus:bg-sky-200 focus:shadow-2xs dark:bg-sky-500/10 dark:before:absolute dark:before:inset-0 dark:before:bg-sky-800/20 dark:before:rounded-e dark:focus:before:bg-sky-800/30 dark:text-sky-500" data-hs-overlay="#hs-pro-clee">
                                      <span class="block font-semibold truncate">
                                        <s>Binge-Watch</s>
                                      </span>
                                    </button>
                                  </div>
                                </div>
                              </div>
                              
                            </div>

<div class="relative h-[125px] overflow-hidden flex">
                              
                              <div class="size-full grid grid-cols-7">
                                <div class="relative flex flex-1 border-s border-b border-line-2 first:border-s-0">
                                  <button type="button" class="absolute top-1.5 inset-e-1.5 z-1 min-w-6 min-h-6 px-1 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    8
                                  </button>
                                </div>
                                <div class="relative flex flex-1 border-s border-b border-line-2 first:border-s-0">
                                  <button type="button" class="absolute top-1.5 inset-e-1.5 z-1 min-w-6 min-h-6 px-1 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    9
                                  </button>
                                </div>
                                <div class="relative flex flex-1 border-s border-b border-line-2 first:border-s-0">
                                  <button type="button" class="absolute top-1.5 inset-e-1.5 z-1 min-w-6 min-h-6 px-1 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    10
                                  </button>
                                </div>
                                <div class="relative flex flex-1 border-s border-b border-line-2 first:border-s-0">
                                  <button type="button" class="absolute top-1.5 inset-e-1.5 z-1 min-w-6 min-h-6 px-1 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    11
                                  </button>
                                  <div class="mt-8 p-1 w-full space-y-1">
                                    <button type="button" class="py-0.5 px-1 relative w-full flex text-start border-s-4 border-green-600 bg-green-100 text-green-800 text-xs rounded-sm focus:bg-green-200 focus:shadow-2xs dark:bg-green-500/10 dark:before:absolute dark:before:inset-0 dark:before:bg-green-800/20 dark:before:rounded-e dark:focus:before:bg-green-800/30 dark:text-green-500" data-hs-overlay="#hs-pro-clee">
                                      <span class="block truncate">
                                        <span class="block font-semibold truncate">Preline Q1 tasks review</span>
                                        <span class="block truncate">10 - 11AM</span>
                                      </span>
                                    </button>
                                  </div>
                                </div>
                                <div class="relative flex flex-1 border-s border-b border-line-2 first:border-s-0">
                                  <button type="button" class="absolute top-1.5 inset-e-1.5 z-1 min-w-6 min-h-6 px-1 flex justify-center items-center bg-primary border border-primary-line text-xs text-primary-foreground rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden">
                                    12
                                  </button>
                                </div>
                                <div class="relative z-8 flex flex-1 border-s border-b border-line-2 first:border-s-0 after:absolute after:inset-0 after:-z-1 after:bg-surface/30">
                                  <button type="button" class="absolute top-1.5 inset-e-1.5 z-1 min-w-6 min-h-6 px-1 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    13
                                  </button>
                                </div>
                                <div class="relative z-8 flex flex-1 border-s border-b border-line-2 first:border-s-0 after:absolute after:inset-0 after:-z-1 after:bg-surface/30">
                                  <button type="button" class="absolute top-1.5 inset-e-1.5 z-1 min-w-6 min-h-6 px-1 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    14
                                  </button>
                                </div>
                              </div>
                              
                            </div>

<div class="relative h-[125px] overflow-hidden flex">
                              
                              <div class="size-full grid grid-cols-7">
                                <div class="relative flex flex-1 border-s border-b border-line-2 first:border-s-0">
                                  <button type="button" class="absolute top-1.5 inset-e-1.5 z-1 min-w-6 min-h-6 px-1 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    22
                                  </button>
                                </div>
                                <div class="relative flex flex-1 border-s border-b border-line-2 first:border-s-0">
                                  <button type="button" class="absolute top-1.5 inset-e-1.5 z-1 min-w-6 min-h-6 px-1 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    23
                                  </button>
                                </div>
                                <div class="relative flex flex-1 border-s border-b border-line-2 first:border-s-0">
                                  <button type="button" class="absolute top-1.5 inset-e-1.5 z-1 min-w-6 min-h-6 px-1 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    24
                                  </button>
                                  <div class="mt-8 p-1 w-full space-y-1">
                                    <button type="button" class="py-0.5 px-1 relative size-full flex text-start border-s-4 border-orange-600 bg-orange-100 text-orange-800 text-xs rounded-sm focus:bg-orange-200 focus:shadow-2xs dark:bg-orange-500/10 dark:before:absolute dark:before:inset-0 dark:before:bg-orange-800/20 dark:before:rounded-e dark:focus:before:bg-orange-800/30 dark:text-orange-500" data-hs-overlay="#hs-pro-clee">
                                      <span class="block truncate">
                                        <span class="block font-semibold truncate">Marketing Discussion</span>
                                        <span class="block truncate">Zoom Meeting</span>
                                      </span>
                                    </button>
                                  </div>
                                </div>
                                <div class="relative flex flex-1 border-s border-b border-line-2 first:border-s-0">
                                  <button type="button" class="absolute top-1.5 inset-e-1.5 z-1 min-w-6 min-h-6 px-1 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    25
                                  </button>
                                </div>
                                <div class="relative flex flex-1 border-s border-b border-line-2 first:border-s-0">
                                  <button type="button" class="absolute top-1.5 inset-e-1.5 z-1 min-w-6 min-h-6 px-1 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    26
                                  </button>
                                </div>
                                <div class="relative z-8 flex flex-1 border-s border-b border-line-2 first:border-s-0 after:absolute after:inset-0 after:-z-1 after:bg-surface/30">
                                  <button type="button" class="absolute top-1.5 inset-e-1.5 z-1 min-w-6 min-h-6 px-1 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    27
                                  </button>
                                  <div class="mt-8 p-1 w-full space-y-1">
                                    <button type="button" class="py-0.5 px-1 relative w-full flex text-start border-s-4 border-yellow-600 bg-yellow-100 text-yellow-800 text-xs rounded-sm focus:bg-yellow-200 focus:shadow-2xs dark:bg-yellow-500/10 dark:before:absolute dark:before:inset-0 dark:before:bg-yellow-800/20 dark:before:rounded-e dark:focus:before:bg-yellow-800/30 dark:text-yellow-500" data-hs-overlay="#hs-pro-clee">
                                      <span class="block truncate">
                                        <span class="block font-semibold truncate">Review Preline Figma</span>
                                        <span class="block truncate">3 - 6PM</span>
                                      </span>
                                    </button>
                                    <button type="button" class="py-0.5 px-1 relative w-full flex text-start border-s-4 border-sky-600 bg-sky-100 text-sky-800 text-xs rounded-sm focus:bg-sky-200 focus:shadow-2xs dark:bg-sky-500/10 dark:before:absolute dark:before:inset-0 dark:before:bg-sky-800/20 dark:before:rounded-e dark:focus:before:bg-sky-800/30 dark:text-sky-500" data-hs-overlay="#hs-pro-clee">
                                      <span class="block truncate">
                                        <span class="block font-semibold truncate">Figma Optimization w/ Jacob</span>
                                        <span class="block truncate">5PM</span>
                                      </span>
                                    </button>
                                  </div>
                                </div>
                                <div class="relative z-8 flex flex-1 border-s border-b border-line-2 first:border-s-0 after:absolute after:inset-0 after:-z-1 after:bg-surface/30">
                                  <button type="button" class="absolute top-1.5 inset-e-1.5 z-1 min-w-6 min-h-6 px-1 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    28
                                  </button>
                                </div>
                              </div>
                              
                            </div>

<div class="relative h-[125px] overflow-hidden flex">
                              
                              <div class="size-full grid grid-cols-7">
                                <div class="relative flex flex-1 border-s border-b border-line-2 first:border-s-0">
                                  <button type="button" class="absolute top-1.5 inset-e-1.5 z-1 min-w-6 min-h-6 px-1 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    29
                                  </button>
                                  <div class="mt-8 p-1 w-full space-y-1">
                                    <button type="button" class="py-0.5 px-1 relative w-full flex text-start border-s-4 border-line-6 bg-surface text-surface-foreground text-xs rounded-sm focus:bg-surface-focus focus:shadow-2xs" data-hs-overlay="#hs-pro-clee">
                                      <span class="block truncate">
                                        <span class="block font-semibold truncate">Let's workout</span>
                                      </span>
                                    </button>
                                    <button type="button" class="py-0.5 px-1 relative w-full flex text-start border-s-4 border-yellow-600 bg-yellow-100 text-yellow-800 text-xs rounded-sm focus:bg-yellow-200 focus:shadow-2xs dark:bg-yellow-500/10 dark:before:absolute dark:before:inset-0 dark:before:bg-yellow-800/20 dark:before:rounded-e dark:focus:before:bg-yellow-800/30 dark:text-yellow-500" data-hs-overlay="#hs-pro-clee">
                                      <span class="block truncate">
                                        <span class="block font-semibold truncate">Catch up a meeting w/ Jacob</span>
                                      </span>
                                    </button>
                                    <div class="mt-2">
                                      <button type="button" class="py-0.5 px-1 w-full text-start font-medium text-foreground text-xs rounded-sm focus:text-muted-foreground-2">
                                        2 more
                                      </button>
                                    </div>
                                  </div>
                                </div>
                                <div class="relative flex flex-1 border-s border-b border-line-2 first:border-s-0">
                                  <button type="button" class="absolute top-1.5 inset-e-1.5 z-1 min-w-6 min-h-6 px-1 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    30
                                  </button>
                                </div>
                                <div class="relative flex flex-1 border-s border-b border-line-2 first:border-s-0">
                                  <button type="button" class="absolute top-1.5 inset-e-1.5 z-1 min-w-6 min-h-6 px-1 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    31
                                  </button>
                                </div>
                                <div class="relative flex flex-1 border-s border-b border-line-2 first:border-s-0">
                                  <button type="button" class="absolute top-1.5 inset-e-1.5 z-1 min-w-6 min-h-6 px-1 flex justify-center items-center border border-transparent text-xs text-muted-foreground/50 rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    1
                                  </button>
                                </div>
                                <div class="relative flex flex-1 border-s border-b border-line-2 first:border-s-0">
                                  <button type="button" class="absolute top-1.5 inset-e-1.5 z-1 min-w-6 min-h-6 px-1 flex justify-center items-center border border-transparent text-xs text-muted-foreground/50 rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    2
                                  </button>
                                </div>
                                <div class="relative z-8 flex flex-1 border-s border-b border-line-2 first:border-s-0 after:absolute after:inset-0 after:-z-1 after:bg-surface/30">
                                  <button type="button" class="absolute top-1.5 inset-e-1.5 z-1 min-w-6 min-h-6 px-1 flex justify-center items-center border border-transparent text-xs text-muted-foreground/50 rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    3
                                  </button>
                                </div>
                                <div class="relative z-8 flex flex-1 border-s border-b border-line-2 first:border-s-0 after:absolute after:inset-0 after:-z-1 after:bg-surface/30">
                                  <button type="button" class="absolute top-1.5 inset-e-1.5 z-1 min-w-6 min-h-6 px-1 flex justify-center items-center border border-transparent text-xs text-muted-foreground/50 rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    4
                                  </button>
                                </div>
                              </div>
                              
                            </div>

<aside id="hs-pro-secondary-sidebar" class="hs-overlay [--auto-close:xl] [--auto-close:lg]
                        hs-overlay-open:translate-x-0
                        translate-x-full transition-all duration-300 transform
                        hidden
                        fixed bottom-0 inset-e-0 top-0 z-60 w-75
                        bg-sidebar border-s border-sidebar-line
                        xl:block xl:translate-x-0 xl:bottom-0 lg:block lg:translate-x-0 lg:bottom-0" tabindex="-1" aria-label="Secondary Sidebar">
                        <div class="h-full flex">
                          <div class="py-2 w-62.5 border-e border-sidebar-line">
                            
                            <div class="p-2">
                              <div class="flex flex-wrap justify-between items-center gap-2">
                                <h1 class="text-lg text-foreground">
                                  <span class="font-semibold">Jan 29,</span> 2024
                                </h1>
    
                                
                                <div class="flex -space-x-px">
                                  <button type="button" class="size-7.5 inline-flex justify-center items-center gap-x-1 text-xs first:rounded-s-md last:rounded-e-md bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                                  </button>

<div class="h-full overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                              <div class="sticky top-0 inset-x-0 z-50 bg-layer border-b border-e-line-3 border-b-line-1">
                                <div class="flex flex-auto">
                                  <div class="h-full flex flex-col border-e border-line-1">
                                    <div class="w-16 h-10 flex justify-end items-center text-end"><span class="pe-4 text-[11px] text-muted-foreground">All-day</span></div>
                                  </div>
      
                                  
                                  <div class="w-full grid grid-cols-7">
                                    <div class="h-10 relative flex flex-1 border-b-line-1">
                                      <div class="w-full"></div>
                                    </div>
                                    <div class="h-10 relative flex flex-1 border-b-line-1">
                                      <div class="w-full"></div>
                                    </div>
                                    <div class="h-10 relative flex flex-1 border-b-line-1">
                                      <div class="w-full"></div>
                                    </div>
                                    <div class="h-10 relative flex flex-1 border-b-line-1">
                                      <div class="w-full"></div>
                                    </div>
                                    <div class="h-10 relative flex flex-1 border-b-line-1">
                                      <div class="w-full"></div>
                                    </div>
                                    <div class="h-10 relative flex flex-1 border-b-line-1">
                                      <div class="w-full"></div>
                                    </div>
                                    <div class="h-10 relative flex flex-1 border-b-line-1">
                                      <div class="w-full"></div>
                                    </div>
                                  </div>
                                  
                                </div>
                              </div>

<div class="relative h-14 pb-0.5 pe-2 after:absolute after:top-0 after:inset-x-0 after:block after:border-t after:border-line-1 after:pointer-events-none">
                                      <div class="size-full space-y-1">
                                      </div>
                                    </div>
                                    <div class="relative h-14 pb-0.5 pe-2 after:absolute after:top-0 after:inset-x-0 after:block after:border-t after:border-line-1 after:pointer-events-none">
                                      <div class="size-full space-y-1">
                                      </div>
                                    </div>
                                    <div class="relative h-14 pb-0.5 pe-2 after:absolute after:top-0 after:inset-x-0 after:block after:border-t after:border-line-1 after:pointer-events-none">
                                      <div class="size-full space-y-1">
                                        <button type="button" class="py-0.5 px-1 relative z-10 w-full flex text-start border-s-4 border-sky-600 bg-sky-100 text-sky-800 text-xs rounded-sm focus:bg-sky-200 focus:shadow-2xs dark:bg-sky-500/10 dark:before:absolute dark:before:inset-0 dark:before:bg-sky-800/20 dark:before:rounded-e dark:focus:before:bg-sky-800/30 dark:text-sky-500" data-hs-overlay="#hs-pro-clee">
                                          <span class="block font-semibold truncate">
                                            <s>Binge-Watch</s>
                                          </span>
                                        </button>
                                      </div>
                                    </div>
                                    <div class="relative h-14 pb-0.5 pe-2 after:absolute after:top-0 after:inset-x-0 after:block after:border-t after:border-line-1 after:pointer-events-none">
                                      <div class="size-full space-y-1">
                                      </div>
                                    </div>
                                    <div class="relative h-14 pb-0.5 pe-2 after:absolute after:top-0 after:inset-x-0 after:block after:border-t after:border-line-1 after:pointer-events-none">
                                      <div class="size-full space-y-1">
                                        <button type="button" class="py-0.5 px-1 relative z-10 size-full flex text-start border-s-4 border-green-600 bg-green-100 text-green-800 text-xs rounded-sm focus:bg-green-200 focus:shadow-2xs dark:bg-green-500/10 dark:before:absolute dark:before:inset-0 dark:before:bg-green-800/20 dark:before:rounded-e dark:focus:before:bg-green-800/30 dark:text-green-500" data-hs-overlay="#hs-pro-clee">
                                          <span class="block truncate">
                                            <span class="block font-semibold truncate">Preline Q1 tasks review</span>
                                            <span class="block truncate">5 - 6AM</span>
                                          </span>
                                        </button>
                                      </div>
                                    </div>
                                    <div class="relative h-14 pb-0.5 pe-2 after:absolute after:top-0 after:inset-x-0 after:block after:border-t after:border-line-1 after:pointer-events-none">
                                      <div class="size-full space-y-1">
                                      </div>
                                    </div>
                                    <div class="relative h-14 pb-0.5 pe-2 after:absolute after:top-0 after:inset-x-0 after:block after:border-t after:border-line-1 after:pointer-events-none">
                                      <div class="size-full space-y-1">
                                      </div>
                                    </div>
                                    <div class="relative h-14 pb-0.5 pe-2 after:absolute after:top-0 after:inset-x-0 after:block after:border-t after:border-line-1 after:pointer-events-none">
                                      <div class="size-full space-y-1">
                                      </div>
                                    </div>
                                    <div class="relative h-14 pb-0.5 pe-2 after:absolute after:top-0 after:inset-x-0 after:block after:border-t after:border-line-1 after:pointer-events-none">
                                      <div class="size-full space-y-1">
                                      </div>
                                    </div>
                                    <div class="relative h-14 pb-0.5 pe-2 after:absolute after:top-0 after:inset-x-0 after:block after:border-t after:border-line-1 after:pointer-events-none">
                                      <div class="size-full space-y-1">
                                        <button type="button" class="py-0.5 px-1 relative z-10 size-full flex text-start border-s-4 border-pink-600 bg-pink-100 text-pink-800 text-xs rounded-sm focus:bg-pink-200 focus:shadow-2xs dark:bg-pink-500/10 dark:before:absolute dark:before:inset-0 dark:before:bg-pink-800/20 dark:before:rounded-e dark:focus:before:bg-pink-800/30 dark:text-pink-500" data-hs-overlay="#hs-pro-clee">
                                          <span class="block truncate">
                                            <span class="block font-semibold truncate">Searchbox</span>
                                            <span class="block truncate">9 - 10AM</span>
                                          </span>
                                        </button>
                                      </div>
                                    </div>
                                    <div class="relative h-14 pb-0.5 pe-2 after:absolute after:top-0 after:inset-x-0 after:block after:border-t after:border-line-1 after:pointer-events-none">
                                      <div class="size-full space-y-1">
                                      </div>
                                    </div>
                                    <div class="relative h-14 pb-0.5 pe-2 after:absolute after:top-0 after:inset-x-0 after:block after:border-t after:border-line-1 after:pointer-events-none">
                                      <div class="size-full space-y-1">
                                      </div>
                                    </div>
                                    <div class="relative h-14 pb-0.5 pe-2 after:absolute after:top-0 after:inset-x-0 after:block after:border-t after:border-line-1 after:pointer-events-none">
                                      <div class="size-full space-y-1">
                                      </div>
                                    </div>
                                    <div class="relative h-14 pb-0.5 pe-2 after:absolute after:top-0 after:inset-x-0 after:block after:border-t after:border-line-1 after:pointer-events-none">
                                      <div class="size-full space-y-1">
                                        <button type="button" class="py-0.5 px-1 relative z-10 size-full flex text-start border-s-4 border-orange-600 bg-orange-100 text-orange-800 text-xs rounded-sm focus:bg-orange-200 focus:shadow-2xs dark:bg-orange-500/10 dark:before:absolute dark:before:inset-0 dark:before:bg-orange-800/20 dark:before:rounded-e dark:focus:before:bg-orange-800/30 dark:text-orange-500" data-hs-overlay="#hs-pro-clee">
                                          <span class="block truncate">
                                            <span class="block font-semibold truncate">Marketing Discussion</span>
                                            <span class="block truncate">Zoom Meeting</span>
                                          </span>
                                        </button>
                                      </div>
                                    </div>
                                    <div class="relative h-14 pb-0.5 pe-2 after:absolute after:top-0 after:inset-x-0 after:block after:border-t after:border-line-1 after:pointer-events-none">
                                      <div class="size-full space-y-1">
                                      </div>
                                    </div>
                                    <div class="relative h-14 pb-0.5 pe-2 after:absolute after:top-0 after:inset-x-0 after:block after:border-t after:border-line-1 after:pointer-events-none">
                                      <div class="size-full space-y-1">
                                      </div>
                                    </div>
                                    <div class="relative h-14 pb-0.5 pe-2 after:absolute after:top-0 after:inset-x-0 after:block after:border-t after:border-line-1 after:pointer-events-none">
                                      <div class="size-full space-y-1">
                                      </div>
                                    </div>
                                    <div class="relative h-14 pb-0.5 pe-2 after:absolute after:top-0 after:inset-x-0 after:block after:border-t after:border-line-1 after:pointer-events-none">
                                      <div class="size-full space-y-1">
                                        <button type="button" class="py-0.5 px-1 relative z-10 w-full flex text-start border-s-4 border-yellow-600 bg-yellow-100 text-yellow-800 text-xs rounded-sm focus:bg-yellow-200 focus:shadow-2xs dark:bg-yellow-500/10 dark:before:absolute dark:before:inset-0 dark:before:bg-yellow-800/20 dark:before:rounded-e dark:focus:before:bg-yellow-800/30 dark:text-yellow-500" data-hs-overlay="#hs-pro-clee">
                                          <span class="block truncate">
                                            <span class="block font-semibold truncate">Review Preline Figma</span>
                                            <span class="block truncate">6 - 6:30PM</span>
                                          </span>
                                        </button>
                                        <button type="button" class="py-0.5 px-1 relative z-10 w-full flex text-start border-s-4 border-sky-600 bg-sky-100 text-sky-800 text-xs rounded-sm focus:bg-sky-200 focus:shadow-2xs dark:bg-sky-500/10 dark:before:absolute dark:before:inset-0 dark:before:bg-sky-800/20 dark:before:rounded-e dark:focus:before:bg-sky-800/30 dark:text-sky-500" data-hs-overlay="#hs-pro-clee">
                                          <span class="block truncate">
                                            <span class="block font-semibold truncate">Figma Optimization w/ Jacob</span>
                                            <span class="block truncate">6:45 - 7:15PM</span>
                                          </span>
                                        </button>
                                      </div>
                                    </div>
                                    <div class="relative h-14 pb-0.5 pe-2 after:absolute after:top-0 after:inset-x-0 after:block after:border-t after:border-line-1 after:pointer-events-none">
                                      <div class="size-full space-y-1">
                                      </div>
                                    </div>
                                    <div class="relative h-14 pb-0.5 pe-2 after:absolute after:top-0 after:inset-x-0 after:block after:border-t after:border-line-1 after:pointer-events-none">
                                      <div class="size-full space-y-1">
                                      </div>
                                    </div>
                                    <div class="relative h-14 pb-0.5 pe-2 after:absolute after:top-0 after:inset-x-0 after:block after:border-t after:border-line-1 after:pointer-events-none">
                                      <div class="size-full space-y-1">
                                      </div>
                                    </div>
                                    <div class="relative h-14 pb-0.5 pe-2 after:absolute after:top-0 after:inset-x-0 after:block after:border-t after:border-line-1 after:pointer-events-none">
                                      <div class="size-full space-y-1">
                                      </div>
                                    </div>
                                    <div class="relative h-14 pb-0.5 pe-2 after:absolute after:top-0 after:inset-x-0 after:block after:border-t after:border-line-1 after:pointer-events-none">
                                      <div class="size-full space-y-1">
                                      </div>
                                    </div>
                                    <div class="relative h-14 pb-0.5 pe-2 after:absolute after:top-0 after:inset-x-0 after:block after:border-t after:border-line-1 after:pointer-events-none">
                                      <div class="size-full space-y-1">
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            
                          </div>

<div class="w-12.5 flex flex-col items-center gap-y-4 h-full max-h-full py-2">
                            <div class="h-full overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                              <div class="flex flex-col items-center gap-y-4">
                                
                                <button type="button" class="inline-flex justify-center items-center gap-x-1.5 rounded-full text-muted-foreground-1 hover:text-foreground disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:text-foreground">
                                  <img class="shrink-0 mx-auto size-7.5 rounded-full" src="https://images.unsplash.com/photo-1659482633369-9fe69af50bfb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Avatar">
                                </button>

<div class="hs-tooltip [--placement:auto] inline-block">
                                  <button type="button" class="hs-tooltip-toggle size-9.5 inline-flex justify-center items-center gap-x-2 rounded-full border border-transparent text-muted-foreground-1 hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
                                      <path d="M11.7438 0.940745C6.84695 1.30308 2.6841 1.63631 2.48837 1.67533C1.9396 1.77319 1.44038 2.14544 1.20563 2.63537L1 3.06646L1.01982 13.3407L1.04893 23.615L1.36234 24.2517C1.53886 24.6042 2.73365 26.2499 4.0362 27.9439C6.61221 31.2836 6.79802 31.47 7.77726 31.5679C8.06156 31.597 10.1966 31.4991 12.5081 31.3622C14.8295 31.2154 18.5508 30.99 20.7842 30.863C30.3233 30.2839 29.8334 30.3328 30.3815 29.8627C31.0672 29.2947 31.0183 30.2251 31.0474 17.7377C31.0672 7.15003 31.0573 6.45509 30.9006 6.13177C30.7148 5.76943 30.3815 5.51487 26.0329 2.45885C23.1243 0.421704 22.9186 0.313932 21.6155 0.294111C21.0772 0.274911 16.6307 0.568497 11.7438 0.940745ZM22.752 2.28232C23.1633 2.46814 26.1704 4.56412 26.6108 4.9661C26.7284 5.08378 26.7675 5.18164 26.7086 5.24048C26.5717 5.35817 7.96245 6.465 7.42421 6.38634C7.17956 6.34732 6.81722 6.20052 6.61159 6.06302C5.75932 5.48514 3.64413 3.75149 3.64413 3.62452C3.64413 3.29129 3.57538 3.29129 11.8714 2.69421C13.4582 2.58644 16.0633 2.39071 17.6502 2.26312C21.0871 1.98874 22.1159 1.99865 22.752 2.28232ZM28.6677 7.63996C28.8046 7.77685 28.9223 8.04132 28.9613 8.29589C28.9904 8.53125 29.0102 12.9189 28.9904 18.0313C28.9613 26.8067 28.9514 27.3555 28.7848 27.61C28.6869 27.7667 28.4912 27.9333 28.3438 27.9823C27.9331 28.1489 8.43318 29.2557 8.03183 29.138C7.84601 29.0891 7.59083 28.9324 7.45394 28.7955L7.21858 28.541L7.18947 19.0799C7.16965 12.4395 7.18947 9.5012 7.26813 9.23672C7.32697 9.041 7.47376 8.80564 7.60136 8.72759C7.77788 8.60991 8.93364 8.51205 12.9101 8.2773C15.7016 8.1206 20.0206 7.85613 22.4987 7.70933C28.3933 7.34638 28.3741 7.34638 28.6677 7.63996Z" class="fill-foreground" fill="currentColor"/>
                                      <path d="M23.4277 10.8818C22.3698 10.9506 21.4296 11.0484 21.3218 11.1073C20.9985 11.2739 20.8028 11.5483 20.7638 11.8617C20.7347 12.185 20.8325 12.224 21.8898 12.3516L22.35 12.4104V16.5925C22.35 19.0799 22.311 20.7256 22.2621 20.6767C22.2131 20.6178 20.8226 18.5027 19.167 15.9756C17.512 13.4392 16.1407 11.3525 16.1209 11.3333C16.1011 11.3135 15.024 11.3724 13.7313 11.4609C12.1445 11.5687 11.273 11.6666 11.0965 11.7644C10.8122 11.9112 10.4988 12.4303 10.4988 12.7734C10.4988 12.979 10.871 13.0868 11.6545 13.0868H12.0658V25.1139L11.4 25.3196C10.8809 25.4763 10.7044 25.5741 10.6165 25.7698C10.4598 26.1031 10.4697 26.4066 10.6264 26.4066C10.6852 26.4066 11.792 26.3378 13.0649 26.2598C15.582 26.113 15.8657 26.0442 16.1302 25.5252C16.2088 25.3685 16.277 25.2019 16.277 25.1529C16.277 25.1139 15.9345 24.9962 15.5226 24.8984C15.1014 24.8005 14.6802 24.7027 14.5923 24.6828C14.4257 24.6339 14.4157 24.3304 14.4157 20.1186V15.6033L17.3931 20.2753C20.5173 25.1721 20.9093 25.7308 21.3893 25.9755C21.987 26.2889 23.5051 26.0733 24.2688 25.5741L24.5042 25.4273L24.524 18.7479L24.5531 12.0586L25.0722 11.9608C25.6891 11.8431 25.9734 11.5594 25.9734 11.0695C25.9734 10.7561 25.9536 10.7362 25.66 10.7462C25.4847 10.7542 24.4757 10.813 23.4277 10.8818Z" class="fill-foreground" fill="currentColor"/>
                                    </svg>
                                  </button>
                                  <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-50 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-nowrap text-tooltip-foreground rounded-lg" role="tooltip">
                                    Notion
                                  </span>
                                </div>

<div class="hs-tooltip [--placement:auto] inline-block">
                                  <a class="hs-tooltip-toggle size-9.5 inline-flex justify-center items-center gap-x-2 rounded-full border border-transparent text-muted-foreground-1 hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" href="#">
                                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/></svg>
                                  </a>
                                  <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-50 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-nowrap text-tooltip-foreground rounded-lg" role="tooltip">
                                    Calendar
                                  </span>
                                </div>

<button type="button" class="hs-dark-mode-active:hidden block hs-dark-mode rounded-full focus:outline-hidden focus:bg-surface-focus" data-hs-theme-click-value="dark">
                                  <span class="group inline-flex shrink-0 justify-center items-center size-9.5 font-medium rounded-full text-muted-foreground-1 hover:bg-surface-hover">
                                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>
                                  </span>
                                </button>

<div id="hs-pro-clce" class="hs-overlay hidden size-full fixed top-0 inset-s-0 z-80 overflow-hidden [--close-when-click-inside:true] pointer-events-none" role="dialog" tabindex="-1" aria-labelledby="hs-pro-clce-label">
                      <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-md sm:w-full m-3 sm:mx-auto h-[calc(100%-56px)] min-h-[calc(100%-56px)] flex items-center">
                        <div class="w-full max-h-full flex flex-col bg-overlay border border-overlay-line rounded-xl pointer-events-auto shadow-xl">
                          
                          <div class="py-2.5 px-4 flex justify-between items-center border-b border-overlay-divider">
                            <h2 id="hs-pro-clce-label" class="font-medium text-foreground">
                              Create event
                            </h2>
                            <button type="button" class="size-8 shrink-0 flex justify-center items-center gap-x-2 rounded-full border border-transparent bg-surface text-foreground hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" aria-label="Close" data-hs-overlay="#hs-pro-clce">
                              <span class="sr-only">Close</span>
                              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                            </button>
                          </div>

<div id="hs-modal-create-event" class="overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                            <div class="p-4 space-y-3 overflow-hidden">
                              
                              <div class="grid grid-cols-12 gap-2">
                                
                                <div class="col-span-1">
                                  <label for="hs-create-event-title-autoheight-textarea" class="mt-[11px] flex justify-center items-center gap-x-1 text-[13px] text-muted-foreground">
                                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 7 4 4 20 4 20 7"/><line x1="9" x2="15" y1="20" y2="20"/><line x1="12" x2="12" y1="4" y2="20"/></svg>
                                    <span class="sr-only">Title</span>
                                  </label>
                                </div>
                                <div class="col-span-11">
                                  <textarea id="hs-create-event-title-autoheight-textarea" class="py-1 sm:py-1.5 px-2 block w-full bg-layer border-transparent rounded-md sm:text-[13px] hover:border-layer-line text-foreground placeholder:text-muted-foreground resize-none disabled:opacity-50 disabled:pointer-events-none focus:bg-muted-focus focus:border-transparent focus:ring-transparent" rows="1" placeholder="Add title" data-hs-textarea-auto-height ></textarea>
                                </div>

<div class="col-span-1">
                                  <label class="mt-[9px] flex justify-center items-center gap-x-1 text-[13px] text-muted-foreground">
                                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                                    <span class="sr-only">Date & Time:</span>
                                  </label>
                                </div>
                                <div class="col-span-11">
                                  <div class="space-y-1">
                                    
                                    <div class="flex sm:grid sm:grid-cols-7 items-center gap-1 sm:gap-2">
                                      <div class="w-full sm:col-span-3">
                                        
                                        <div class="relative group">
                                          <select data-hs-select='{
                                              "placeholder": "Start time",
                                              "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                                              "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-1 sm:py-1.5 ps-2 pe-7 w-full flex gap-x-2 text-nowrap text-foreground cursor-pointer bg-layer border border-transparent rounded-md text-start sm:text-[13px] hover:border-layer-line hover:focus:border-transparent focus:outline-hidden focus:bg-muted-focus",
                                              "dropdownClasses": "mt-2 z-50 w-full max-h-40 p-1 space-y-0.5 overflow-hidden overflow-y-auto bg-select border border-select-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                                              "optionClasses": "hs-selected:bg-select-item-active py-1 px-3 w-full text-[13px] text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-md focus:outline-hidden focus:bg-select-item-focus",
                                              "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>",
                                              "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2.5 -translate-y-1/2 opacity-0 group-hover:opacity-100 group-focus:opacity-100\"><svg class=\"shrink-0 size-3.5 text-muted-foreground\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"/></svg></div>"
                                            }' class="hidden">
                                            <option value="">Choose</option>
                                            <option>12:00AM</option>
                                            <option>12:15AM</option>
                                            <option>12:30AM</option>
                                            <option>12:45AM</option>
                                            <option>1:00AM</option>
                                            <option>1:15AM</option>
                                            <option>1:30AM</option>
                                            <option>1:45AM</option>
                                            <option>2:00AM</option>
                                            <option>2:15AM</option>
                                            <option>2:30AM</option>
                                            <option>2:45AM</option>
                                            <option>3:00AM</option>
                                            <option>3:15AM</option>
                                            <option>3:30AM</option>
                                            <option>3:45AM</option>
                                            <option>4:00AM</option>
                                            <option>4:15AM</option>
                                            <option>4:30AM</option>
                                            <option>4:45AM</option>
                                            <option>5:00AM</option>
                                            <option>5:15AM</option>
                                            <option>5:30AM</option>
                                            <option>5:45AM</option>
                                            <option>6:00AM</option>
                                            <option>6:15AM</option>
                                            <option>6:30AM</option>
                                            <option>6:45AM</option>
                                            <option>7:00AM</option>
                                            <option>7:15AM</option>
                                            <option>7:30AM</option>
                                            <option>7:45AM</option>
                                            <option>8:00AM</option>
                                            <option>8:15AM</option>
                                            <option>8:30AM</option>
                                            <option>8:45AM</option>
                                            <option>9:00AM</option>
                                            <option>9:15AM</option>
                                            <option>9:30AM</option>
                                            <option>9:45AM</option>
                                            <option selected>10:00AM</option>
                                            <option>10:15AM</option>
                                            <option>10:30AM</option>
                                            <option>10:45AM</option>
                                            <option>11:00AM</option>
                                            <option>11:15AM</option>
                                            <option>11:30AM</option>
                                            <option>11:45AM</option>
                                            <option>12:00PM</option>
                                            <option>12:15PM</option>
                                            <option>12:30PM</option>
                                            <option>12:45PM</option>
                                            <option>1:00PM</option>
                                            <option>1:15PM</option>
                                            <option>1:30PM</option>
                                            <option>1:45PM</option>
                                            <option>2:00PM</option>
                                            <option>2:15PM</option>
                                            <option>2:30PM</option>
                                            <option>2:45PM</option>
                                            <option>3:00PM</option>
                                            <option>3:15PM</option>
                                            <option>3:30PM</option>
                                            <option>3:45PM</option>
                                            <option>4:00PM</option>
                                            <option>4:15PM</option>
                                            <option>4:30PM</option>
                                            <option>4:45PM</option>
                                            <option>5:00PM</option>
                                            <option>5:15PM</option>
                                            <option>5:30PM</option>
                                            <option>5:45PM</option>
                                            <option>6:00PM</option>
                                            <option>6:15PM</option>
                                            <option>6:30PM</option>
                                            <option>6:45PM</option>
                                            <option>7:00PM</option>
                                            <option>7:15PM</option>
                                            <option>7:30PM</option>
                                            <option>7:45PM</option>
                                            <option>8:00PM</option>
                                            <option>8:15PM</option>
                                            <option>8:30PM</option>
                                            <option>8:45PM</option>
                                            <option>9:00PM</option>
                                            <option>9:15PM</option>
                                            <option>9:30PM</option>
                                            <option>9:45PM</option>
                                            <option>10:00PM</option>
                                            <option>10:15PM</option>
                                            <option>10:30PM</option>
                                            <option>10:45PM</option>
                                            <option>11:00PM</option>
                                            <option>11:15PM</option>
                                            <option>11:30PM</option>
                                            <option>11:45PM</option>
                                          </select>
                                        </div>
                                        
                                      </div>

<div class="w-full sm:col-span-3">
                                        
                                        <div class="relative group">
                                          <select data-hs-select='{
                                              "placeholder": "Start time",
                                              "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                                              "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-1 sm:py-1.5 ps-2 pe-7 w-full flex gap-x-2 text-nowrap text-foreground cursor-pointer bg-layer border border-transparent rounded-md text-start sm:text-[13px] hover:border-layer-line hover:focus:border-transparent focus:outline-hidden focus:bg-muted-focus",
                                              "dropdownClasses": "mt-2 z-50 w-full max-h-40 p-1 space-y-0.5 overflow-hidden overflow-y-auto bg-select border border-select-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                                              "optionClasses": "hs-selected:bg-select-item-active py-1 px-3 w-full text-[13px] text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-md focus:outline-hidden focus:bg-select-item-focus",
                                              "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>",
                                              "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2.5 -translate-y-1/2 opacity-0 group-hover:opacity-100 group-focus:opacity-100\"><svg class=\"shrink-0 size-3.5 text-muted-foreground\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"/></svg></div>"
                                            }' class="hidden">
                                            <option value="">Choose</option>
                                            <option>12:00AM</option>
                                            <option>12:15AM</option>
                                            <option>12:30AM</option>
                                            <option>12:45AM</option>
                                            <option>1:00AM</option>
                                            <option>1:15AM</option>
                                            <option>1:30AM</option>
                                            <option>1:45AM</option>
                                            <option>2:00AM</option>
                                            <option>2:15AM</option>
                                            <option>2:30AM</option>
                                            <option>2:45AM</option>
                                            <option>3:00AM</option>
                                            <option>3:15AM</option>
                                            <option>3:30AM</option>
                                            <option>3:45AM</option>
                                            <option>4:00AM</option>
                                            <option>4:15AM</option>
                                            <option>4:30AM</option>
                                            <option>4:45AM</option>
                                            <option>5:00AM</option>
                                            <option>5:15AM</option>
                                            <option>5:30AM</option>
                                            <option>5:45AM</option>
                                            <option>6:00AM</option>
                                            <option>6:15AM</option>
                                            <option>6:30AM</option>
                                            <option>6:45AM</option>
                                            <option>7:00AM</option>
                                            <option>7:15AM</option>
                                            <option>7:30AM</option>
                                            <option>7:45AM</option>
                                            <option>8:00AM</option>
                                            <option>8:15AM</option>
                                            <option>8:30AM</option>
                                            <option>8:45AM</option>
                                            <option>9:00AM</option>
                                            <option>9:15AM</option>
                                            <option>9:30AM</option>
                                            <option>9:45AM</option>
                                            <option selected>10:00AM</option>
                                            <option>10:15AM</option>
                                            <option>10:30AM</option>
                                            <option>10:45AM</option>
                                            <option>11:00AM</option>
                                            <option>11:15AM</option>
                                            <option>11:30AM</option>
                                            <option>11:45AM</option>
                                            <option>12:00PM</option>
                                            <option>12:15PM</option>
                                            <option>12:30PM</option>
                                            <option>12:45PM</option>
                                            <option>1:00PM</option>
                                            <option>1:15PM</option>
                                            <option>1:30PM</option>
                                            <option>1:45PM</option>
                                            <option>2:00PM</option>
                                            <option>2:15PM</option>
                                            <option>2:30PM</option>
                                            <option>2:45PM</option>
                                            <option>3:00PM</option>
                                            <option>3:15PM</option>
                                            <option>3:30PM</option>
                                            <option>3:45PM</option>
                                            <option>4:00PM</option>
                                            <option>4:15PM</option>
                                            <option>4:30PM</option>
                                            <option>4:45PM</option>
                                            <option>5:00PM</option>
                                            <option>5:15PM</option>
                                            <option>5:30PM</option>
                                            <option>5:45PM</option>
                                            <option>6:00PM</option>
                                            <option>6:15PM</option>
                                            <option>6:30PM</option>
                                            <option>6:45PM</option>
                                            <option>7:00PM</option>
                                            <option>7:15PM</option>
                                            <option>7:30PM</option>
                                            <option>7:45PM</option>
                                            <option>8:00PM</option>
                                            <option>8:15PM</option>
                                            <option>8:30PM</option>
                                            <option>8:45PM</option>
                                            <option>9:00PM</option>
                                            <option>9:15PM</option>
                                            <option>9:30PM</option>
                                            <option>9:45PM</option>
                                            <option>10:00PM</option>
                                            <option>10:15PM</option>
                                            <option>10:30PM</option>
                                            <option>10:45PM</option>
                                            <option>11:00PM</option>
                                            <option>11:15PM</option>
                                            <option>11:30PM</option>
                                            <option>11:45PM</option>
                                          </select>
                                        </div>
                                        
                                      </div>
                                    </div>

<div class="flex sm:grid sm:grid-cols-7 items-center gap-1 sm:gap-2">
                                      <div class="w-full sm:col-span-3">
                                        
                                        <div class="hs-dropdown [--strategy:absolute] [--auto-close:inside] relative inline-flex w-full">
                                          <button id="hs-pro-clcremd1" type="button" class="py-1 sm:py-1.5 px-2 group inline-flex items-center gap-x-1 w-full text-start sm:text-[13px] rounded-md bg-layer border border-transparent text-layer-foreground hover:border-layer-line disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus hover:focus:border-transparent" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                            Thu, Jan 2024
                                            <svg class="shrink-0 size-3.5 ms-auto text-muted-foreground opacity-0 group-hover:opacity-100 group-focus:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
                                          </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-56 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-clcremd1">
                                            
                                            <div class="p-2 grid gap-y-0.5">
                                              <div class="w-52 ">
                                                
                                                <div class="flex justify-between items-center gap-1 mb-1">
                                                  <span class="ps-1.5 block text-xs font-medium text-muted-foreground-1">January 2026</span>

<div class="flex mb-1.5">
                                                  <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
                                                    Mo
                                                  </span>
                                                  <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
                                                    Tu
                                                  </span>
                                                  <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
                                                    We
                                                  </span>
                                                  <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
                                                    Th
                                                  </span>
                                                  <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
                                                    Fr
                                                  </span>
                                                  <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
                                                    Sa
                                                  </span>
                                                  <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
                                                    Su
                                                  </span>
                                                </div>

<div class="flex">
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      1
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      2
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      3
                                                      <span class="absolute bottom-0.5 inset-s-1/2 size-1 bg-primary rounded-full -translate-x-1/2"></span>
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      4
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      5
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      6
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      7
                                                    </button>
                                                  </div>
                                                </div>

<div class="flex">
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      8
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      9
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      10
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      11
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-primary-line bg-primary text-xs font-medium text-primary-foreground hover:border-primary rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus">
                                                      12
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      13
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      14
                                                    </button>
                                                  </div>
                                                </div>

<div class="flex">
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      15
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      16
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      17
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      18
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      19
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      20
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      21
                                                    </button>
                                                  </div>
                                                </div>

<div class="flex">
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      22
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      23
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      24
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      25
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      26
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      27
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      28
                                                    </button>
                                                  </div>
                                                </div>

<div class="flex">
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      29
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      30
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      31
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      1
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      2
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      3
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      4
                                                    </button>
                                                  </div>
                                                </div>

<div class="flex">
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      5
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      6
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      7
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      8
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      9
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      10
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      11
                                                    </button>
                                                  </div>
                                                </div>
                                                
                                              </div>

</div>
                                            
                                          </div>
                                          
                                        </div>
                                        
                                      </div>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-56 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-clcremd2">
                                            
                                            <div class="p-2 grid gap-y-0.5">
                                              <div class="w-52 ">
                                                
                                                <div class="flex justify-between items-center gap-1 mb-1">
                                                  <span class="ps-1.5 block text-xs font-medium text-muted-foreground-1">January 2026</span>

<div class="flex mb-1.5">
                                                  <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
                                                    Mo
                                                  </span>
                                                  <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
                                                    Tu
                                                  </span>
                                                  <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
                                                    We
                                                  </span>
                                                  <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
                                                    Th
                                                  </span>
                                                  <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
                                                    Fr
                                                  </span>
                                                  <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
                                                    Sa
                                                  </span>
                                                  <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
                                                    Su
                                                  </span>
                                                </div>

<div class="flex">
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      1
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      2
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      3
                                                      <span class="absolute bottom-0.5 inset-s-1/2 size-1 bg-primary rounded-full -translate-x-1/2"></span>
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      4
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      5
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      6
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      7
                                                    </button>
                                                  </div>
                                                </div>

<div class="flex">
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      8
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      9
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      10
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      11
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-primary-line bg-primary text-xs font-medium text-primary-foreground hover:border-primary rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus">
                                                      12
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      13
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      14
                                                    </button>
                                                  </div>
                                                </div>

<div class="flex">
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      15
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      16
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      17
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      18
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      19
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      20
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      21
                                                    </button>
                                                  </div>
                                                </div>

<div class="flex">
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      22
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      23
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      24
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      25
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      26
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      27
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      28
                                                    </button>
                                                  </div>
                                                </div>

<div class="flex">
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      29
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      30
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      31
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      1
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      2
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      3
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      4
                                                    </button>
                                                  </div>
                                                </div>

<div class="flex">
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      5
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      6
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      7
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      8
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      9
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      10
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      11
                                                    </button>
                                                  </div>
                                                </div>
                                                
                                              </div>

</div>
                                            
                                          </div>
                                          
                                        </div>
                                        
                                      </div>
                                    </div>
                                    
        
                                    
                                    <div class="flex sm:grid sm:grid-cols-7 items-center gap-1 sm:gap-2">
                                      <div class="w-full sm:col-span-3">
                                        
                                        <div class="flex items-center gap-x-2 ms-2.5">
                                          <label for="hs-pro-crcemad" class="flex items-center gap-x-1 sm:text-[13px] text-nowrap text-foreground">All-Day:</label>
                                          <label for="hs-pro-crcemad" class="relative inline-block w-9 h-5 cursor-pointer">
                                            <input type="checkbox" id="hs-pro-crcemad" class="peer sr-only">
                                            <span class="absolute inset-0 bg-surface-1 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                                            <span class="absolute top-1/2 inset-s-0.5 -translate-y-1/2 size-4 bg-switch rounded-full shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                                          </label>
                                        </div>
                                        
                                      </div>

<div class="w-full sm:col-span-3">
                                        
                                        <div class="hs-dropdown [--strategy:absolute] relative inline-flex w-full">
                                          <button id="hs-pro-crcemdid" type="button" class="py-1 sm:py-1.5 px-2 group inline-flex items-center gap-x-1 w-full text-start sm:text-[13px] rounded-md bg-layer border border-transparent text-layer-foreground hover:border-layer-line hover:focus:border-transparent disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                            Do not repeat
                                            <svg class="shrink-0 size-3.5 ms-auto text-muted-foreground opacity-0 group-hover:opacity-100 group-focus:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
                                          </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-full transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-crcemdid">
                                            <div class="p-1 space-y-0.5">
                                              
                                              <label for="hs-pro-crcemd1" class="py-1 px-2 group flex gap-x-1.5 rounded-md cursor-pointer text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover">
                                                <input type="radio" class="hidden" id="hs-pro-crcemd1" name="hs-pro-crcemd" checked>
                                                Do not repeat
                                                <svg class="shrink-0 size-3.5 mt-[3px] ms-auto opacity-0 group-has-checked:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                              </label>

<label for="hs-pro-crcemd2" class="py-1 px-2 group flex gap-x-1.5 rounded-md cursor-pointer text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover">
                                                <input type="radio" class="hidden" id="hs-pro-crcemd2" name="hs-pro-crcemd">
                                                Every Day
                                                <svg class="shrink-0 size-3.5 mt-[3px] ms-auto opacity-0 group-has-checked:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                              </label>

<label for="hs-pro-crcemd3" class="py-1 px-2 group flex gap-x-1.5 rounded-md cursor-pointer text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover">
                                                <input type="radio" class="hidden" id="hs-pro-crcemd3" name="hs-pro-crcemd">
                                                Every Week
                                                <svg class="shrink-0 size-3.5 mt-[3px] ms-auto opacity-0 group-has-checked:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                              </label>

<label for="hs-pro-crcemd4" class="py-1 px-2 group flex gap-x-1.5 rounded-md cursor-pointer text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover">
                                                <input type="radio" class="hidden" id="hs-pro-crcemd4" name="hs-pro-crcemd">
                                                Every Year
                                                <svg class="shrink-0 size-3.5 mt-[3px] ms-auto opacity-0 group-has-checked:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                              </label>
                                              
                                            </div>

<div class="p-1 border-t border-dropdown-footer">
                                              <button type="button" class="flex items-center gap-x-1.5 w-full py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" data-hs-overlay="#hs-pro-clcre" data-hs-overlay-options='{
                                                "isClosePrev": false
                                              }'>
                                                Custom
                                              </button>
                                            </div>
                                          </div>
                                          
                                        </div>
                                        
                                      </div>
                                    </div>
                                    
                                  </div>
                                </div>

<div class="col-span-1">
                                  <label for="hs-pro-crcemtz" class="mt-[17px] flex justify-center items-center gap-x-1 text-[13px] text-muted-foreground">
                                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></svg>
                                    <span class="sr-only">Time Zone:</span>
                                  </label>
                                </div>
                                <div class="col-span-11 relative pt-2 before:ms-2 before:absolute before:top-0 before:inset-x-0 before:w-[calc(100%-8px)] before:border-t before:border-line-1">
                                  <input id="hs-pro-crcemtz" type="text" class="py-1 sm:py-1.5 px-2 block w-full bg-layer border-transparent rounded-md sm:text-[13px] text-layer-foreground leading-5 hover:border-layer-line text-foreground placeholder:text-muted-foreground disabled:opacity-50 disabled:pointer-events-none focus:bg-muted-focus focus:border-transparent focus:ring-transparent" placeholder="Time Zone" value="London (GMT+0)">
                                </div>

<div class="col-span-1">
                                  <label for="hs-pro-crcemg" class="mt-[17px] flex justify-center items-center gap-x-1 text-[13px] text-muted-foreground">
                                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
                                    <span class="sr-only">Participants:</span>
                                  </label>
                                </div>
                                <div class="col-span-11 relative pt-2 before:ms-2 before:absolute before:top-0 before:inset-x-0 before:w-[calc(100%-8px)] before:border-t before:border-line-1">
                                  <input id="hs-pro-crcemg" type="text" class="py-1 sm:py-1.5 px-2 block w-full bg-layer border-transparent rounded-md sm:text-[13px] text-layer-foreground leading-5 hover:border-layer-line text-foreground placeholder:text-muted-foreground disabled:opacity-50 disabled:pointer-events-none focus:bg-muted-focus focus:border-transparent focus:ring-transparent" placeholder="Add Participants">
                                </div>

<div class="col-span-1">
                                  <label class="mt-[17px] flex justify-center items-center gap-x-1 text-[13px] text-muted-foreground">
                                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m22 8-6 4 6 4V8Z"/><rect width="14" height="12" x="2" y="6" rx="2" ry="2"/></svg>
                                    <span class="sr-only">Video Conferencing:</span>
                                  </label>
                                </div>
                                <div class="col-span-11 relative pt-2 before:ms-2 before:absolute before:top-0 before:inset-x-0 before:w-[calc(100%-8px)] before:border-t before:border-line-1">
                                  <button type="button" class="group flex flex-wrap items-center gap-x-2 w-full p-1 ps-2  pe-1 min-h-8.5 rounded-lg sm:text-[13px] text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="192" height="192" viewBox="0 0 192 192"><path fill="none" d="M0 0h192v192H0z"/><path fill="#00832D" d="M108 96l17.06 19.5L148 130.16l4-34.03-4-33.28-23.38 12.88z"/><path fill="#0066DA" d="M9 127v29c0 6.63 5.37 12 12 12h29l6-21.92L50 127l-19.9-6L9 127z"/><path fill="#E94235" d="M50 24L9 65l21.1 6L50 65l5.9-18.83z"/><path fill="#2684FC" d="M9 65h41v62H9z"/><path fill="#00AC47" d="M174.19 41.36L148 62.85v67.31l26.3 21.57c3.94 3.08 9.7.27 9.7-4.73V46c0-5.07-5.89-7.85-9.81-4.64zM108 96v31H50v41h86c6.63 0 12-5.37 12-12v-25.84L108 96z"/><path fill="#FFBA00" d="M136 24H50v41h58v31l40-33.15V36c0-6.63-5.37-12-12-12z"/></svg>
                                    Google Meet
                                  </button>
                                  <button type="button" class="flex flex-wrap items-center gap-x-2 w-full p-1 ps-2  pe-1 min-h-8.5 rounded-lg sm:text-[13px] text-muted-foreground-2 hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                    <svg class="shrink-0 size-4" width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
                                      <path d="M435.2 0H76.8C34.3845 0 0 34.3845 0 76.8V435.2C0 477.615 34.3845 512 76.8 512H435.2C477.615 512 512 477.615 512 435.2V76.8C512 34.3845 477.615 0 435.2 0Z" fill="#2D8CFF"/>
                                      <path d="M428 357C436 359 443 355 447 349C449 346 449 341 449 330V179C449 168 449 164 447 160C444 152 436 149 428 152C407 166 361 207 360 224C359.2 227 359.2 232 359.2 239V277C359.2 285 359.2 288 360 292C361 300 364 307 368 311C380 320 420 356 429 356L428 357ZM64 187C64 172 64 164 67 160C69 156 75 152 78 149C82 146 89 146 105 146H234C272 146 291 146 306 154C317 162 329 169 336 184C344 199 344 218 344 256V324C344 339 344 347 341 351C339 355 333 359 330 362C326 365 319 365 303 365H174C136 365 117 365 102 357C91 349 79 342 72 327C64 312 64 293 64 255V187Z" fill="white"/>
                                    </svg>
                                    Zoom
                                    <span class="ms-auto py-1 px-1.5 text-xs rounded-md bg-layer border border-layer-line text-layer-foreground shadow-2xs">
                                      Connect
                                    </span>
                                  </button>
                                </div>

<div class="col-span-1">
                                  <label for="hs-create-event-location-autoheight-textarea" class="mt-[17px] flex justify-center items-center gap-x-1 text-[13px] text-muted-foreground">
                                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg>
                                    <span class="sr-only">Location:</span>
                                  </label>
                                </div>
                                <div class="col-span-11 relative pt-2 before:ms-2 before:absolute before:top-0 before:inset-x-0 before:w-[calc(100%-8px)] before:border-t before:border-line-1">
                                  <textarea id="hs-create-event-location-autoheight-textarea" class="py-1 sm:py-1.5 px-2 block w-full bg-layer border-transparent rounded-md sm:text-[13px] text-layer-foreground leading-5 hover:border-layer-line text-foreground placeholder:text-muted-foreground disabled:opacity-50 disabled:pointer-events-none focus:bg-muted-focus focus:border-transparent focus:ring-transparent" rows="1" placeholder="Add Location" data-hs-textarea-auto-height></textarea>
                                </div>

<button type="button" class="hs-collapse-toggle hs-collapse-open:hidden group col-span-full w-full text-start focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-crcem-add-description-url-attachments-collapse" aria-expanded="false" aria-controls="hs-pro-crcem-add-description-url-attachments" data-hs-collapse="#hs-pro-crcem-add-description-url-attachments">
                                  <span class="grid grid-cols-12 gap-2">
                                    <span class="col-span-1">
                                      <span class="mt-[17px] flex justify-center items-center gap-x-1 text-[13px] text-muted-foreground">
                                        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="21" x2="3" y1="6" y2="6"/><line x1="15" x2="3" y1="12" y2="12"/><line x1="17" x2="3" y1="18" y2="18"/></svg>
                                      </span>
                                    </span>
                                    <span class="col-span-11 relative pt-2 before:ms-2 before:absolute before:top-0 before:inset-x-0 before:w-[calc(100%-8px)] before:border-t before:border-line-1">
                                      <span class="py-1 sm:py-1.5 px-2 block w-full rounded-lg sm:text-[13px] text-foreground border border-transparent group-hover:bg-muted-hover group-focus:bg-muted-focus">
                                        Add description, URL, or Attachments
                                      </span>
                                    </span>
                                  </span>
                                </button>

<div id="hs-pro-crcem-add-description-url-attachments" class="hs-collapse hidden col-span-full w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-pro-crcem-add-description-url-attachments-collapse" role="region">
                                  <div class="grid grid-cols-12 gap-2">
                                    
                                    <div class="col-span-1">
                                      <label for="hs-create-event-description-autoheight-textarea" class="mt-[17px] flex justify-center items-center gap-x-1 text-[13px] text-muted-foreground">
                                        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="21" x2="3" y1="6" y2="6"/><line x1="15" x2="3" y1="12" y2="12"/><line x1="17" x2="3" y1="18" y2="18"/></svg>
                                        <span class="sr-only">Description:</span>
                                      </label>
                                    </div>
                                    <div class="col-span-11 relative pt-2 before:ms-2 before:absolute before:top-0 before:inset-x-0 before:w-[calc(100%-8px)] before:border-t before:border-line-1">
                                      <textarea id="hs-create-event-description-autoheight-textarea" class="py-1 sm:py-1.5 px-2 block w-full bg-layer border-transparent rounded-md sm:text-[13px] hover:border-layer-line text-foreground placeholder:text-muted-foreground resize-none disabled:opacity-50 disabled:pointer-events-none focus:bg-muted-focus focus:border-transparent focus:ring-transparent" rows="1" placeholder="Add Description" data-hs-textarea-auto-height></textarea>
                                    </div>

<div class="col-span-1">
                                      <label for="hs-pro-crcemurl" class="mt-[17px] flex justify-center items-center gap-x-1 text-[13px] text-muted-foreground">
                                        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
                                        <span class="sr-only">URL:</span>
                                      </label>
                                    </div>
                                    <div class="col-span-11 relative pt-2 before:ms-2 before:absolute before:top-0 before:inset-x-0 before:w-[calc(100%-8px)] before:border-t before:border-line-1">
                                      <input id="hs-pro-crcemurl" type="text" class="py-1 sm:py-1.5 px-2 block w-full bg-layer border-transparent rounded-md sm:text-[13px] text-layer-foreground leading-5 hover:border-layer-line text-foreground placeholder:text-muted-foreground disabled:opacity-50 disabled:pointer-events-none focus:bg-muted-focus focus:border-transparent focus:ring-transparent" placeholder="Add URL" >
                                    </div>

<label for="hs-pro-crcema1" class="py-1 px-2 group flex items-center gap-x-2 rounded-md cursor-pointer text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover">
                                                <input type="radio" class="shrink-0 size-3.5 bg-transparent border-line-3 rounded-full shadow-2xs text-teal-600 focus:ring-0 focus:ring-offset-0 checked:bg-teal-600 checked:border-teal-600 disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-crcema1" name="hs-pro-crcema" checked>
                                                James Collins
                                                <svg class="shrink-0 size-3.5 mt-[3px] ms-auto opacity-0 group-has-checked:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                              </label>

<label for="hs-pro-crcema2" class="py-1 px-2 group flex items-center gap-x-2 rounded-md cursor-pointer text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover">
                                                <input type="radio" class="shrink-0 size-3.5 bg-transparent border-line-3 rounded-full shadow-2xs text-sky-500 focus:ring-0 focus:ring-offset-0 checked:bg-sky-500 checked:border-sky-500 disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-crcema2" name="hs-pro-crcema">
                                                Preline tasks
                                                <svg class="shrink-0 size-3.5 mt-[3px] ms-auto opacity-0 group-has-checked:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                              </label>

<label for="hs-pro-crcema3" class="py-1 px-2 group flex items-center gap-x-2 rounded-md cursor-pointer text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover">
                                                <input type="radio" class="shrink-0 size-3.5 bg-transparent border-line-3 rounded-full shadow-2xs text-purple-500 focus:ring-0 focus:ring-offset-0 checked:bg-purple-500 checked:border-purple-500 disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-crcema3" name="hs-pro-crcema">
                                                Performance Tasks
                                                <svg class="shrink-0 size-3.5 mt-[3px] ms-auto opacity-0 group-has-checked:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                              </label>
                                              
                                            </div>

<div class="p-1 space-y-0.5">
                                              <span class="ms-2 text-xs text-muted-foreground-1">
                                                collinsjames@gmail.com
                                              </span>

<label for="hs-pro-crcema4" class="py-1 px-2 group flex items-center gap-x-2 rounded-md cursor-pointer text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover">
                                                <input type="radio" class="shrink-0 size-3.5 bg-transparent border-line-3 rounded-full shadow-2xs text-pink-500 focus:ring-0 focus:ring-offset-0 checked:bg-pink-500 checked:border-pink-500 disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-crcema4" name="hs-pro-erema">
                                                Holidays
                                                <svg class="shrink-0 size-3.5 mt-[3px] ms-auto opacity-0 group-has-checked:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                              </label>
                                              
                                            </div>
                                          </div>
                                          
                                        </div>
                                        
                                      </div>

<div class="hs-dropdown [--strategy:absolute] [--placement:top-right] relative inline-flex">
                                        <button id="hs-pro-crcemaecid" type="button" class="py-1 sm:py-1.5 px-2 group inline-flex items-center gap-x-1 min-h-8.5 text-start sm:text-[13px] rounded-md bg-layer border border-transparent text-layer-foreground hover:border-layer-line hover:focus:border-transparent disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                          <span class="shrink-0 size-3 bg-green-600 rounded-full dark:bg-green-500"></span>
                                          <svg class="shrink-0 size-3.5 ms-auto text-muted-foreground opacity-0 group-hover:opacity-100 group-focus:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
                                        </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-32 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-crcemaecid">
                                          <div class="p-1 space-y-0.5">
                                            <span class="ms-2 text-xs text-muted-foreground-1">
                                              Event color
                                            </span>

<label for="hs-pro-crcemaec1" class="py-1 px-2 group flex gap-x-2 rounded-md cursor-pointer text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover">
                                              <input type="radio" class="shrink-0 border-line-2 size-3.5 mt-[3px] rounded-sm border-transparent bg-red-600 cursor-pointer focus:ring-0 focus:ring-offset-0 focus:text-red-600 focus:bg-red-600 checked:bg-red-600 checked:bg-none checked:hover:bg-red-600 dark:bg-red-500 dark:focus:text-red-500 dark:checked:hover:bg-red-500" id="hs-pro-crcemaec1" name="hs-pro-crcemaec">
                                              Red
                                              <svg class="shrink-0 size-3.5 mt-[3px] ms-auto opacity-0 group-has-checked:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                            </label>

<label for="hs-pro-crcemaec2" class="py-1 px-2 group flex gap-x-2 rounded-md cursor-pointer text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover">
                                              <input type="radio" class="shrink-0 border-line-2 size-3.5 mt-[3px] rounded-sm border-transparent bg-orange-600 cursor-pointer focus:ring-0 focus:ring-offset-0 focus:text-orange-600 focus:bg-orange-600 checked:bg-orange-600 checked:bg-none checked:hover:bg-orange-600 dark:bg-orange-500 dark:focus:text-orange-500 dark:checked:hover:bg-orange-500" id="hs-pro-crcemaec2" name="hs-pro-crcemaec">
                                              Orange
                                              <svg class="shrink-0 size-3.5 mt-[3px] ms-auto opacity-0 group-has-checked:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                            </label>

<label for="hs-pro-crcemaec3" class="py-1 px-2 group flex gap-x-2 rounded-md cursor-pointer text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover">
                                              <input type="radio" class="shrink-0 border-line-2 size-3.5 mt-[3px] rounded-sm border-transparent bg-yellow-400 cursor-pointer focus:ring-0 focus:ring-offset-0 focus:text-yellow-400 focus:bg-yellow-400 checked:bg-yellow-400 checked:bg-none checked:hover:bg-yellow-400 dark:bg-yellow-500 dark:focus:text-yellow-500 dark:checked:hover:bg-yellow-500" id="hs-pro-crcemaec3" name="hs-pro-crcemaec">
                                              Yellow
                                              <svg class="shrink-0 size-3.5 mt-[3px] ms-auto opacity-0 group-has-checked:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                            </label>

<label for="hs-pro-crcemaec4" class="py-1 px-2 group flex gap-x-2 rounded-md cursor-pointer text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover">
                                              <input type="radio" class="shrink-0 border-line-2 size-3.5 mt-[3px] rounded-sm border-transparent bg-green-600 cursor-pointer focus:ring-0 focus:ring-offset-0 focus:text-green-600 focus:bg-green-600 checked:bg-green-600 checked:bg-none checked:hover:bg-green-600 dark:bg-green-500 dark:focus:text-green-500 dark:checked:hover:bg-green-500" id="hs-pro-crcemaec4" name="hs-pro-crcemaec" checked>
                                              Green
                                              <svg class="shrink-0 size-3.5 mt-[3px] ms-auto opacity-0 group-has-checked:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                            </label>

<label for="hs-pro-crcemaec5" class="py-1 px-2 group flex gap-x-2 rounded-md cursor-pointer text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover">
                                              <input type="radio" class="shrink-0 border-line-2 size-3.5 mt-[3px] rounded-sm border-transparent bg-sky-600 cursor-pointer focus:ring-0 focus:ring-offset-0 focus:text-sky-600 focus:bg-sky-600 checked:bg-sky-600 checked:bg-none checked:hover:bg-sky-600 dark:bg-sky-500 dark:focus:text-sky-500 dark:checked:hover:bg-sky-500" id="hs-pro-crcemaec5" name="hs-pro-crcemaec">
                                              Blue
                                              <svg class="shrink-0 size-3.5 mt-[3px] ms-auto opacity-0 group-has-checked:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                            </label>

<label for="hs-pro-crcemaec6" class="py-1 px-2 group flex gap-x-2 rounded-md cursor-pointer text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover">
                                              <input type="radio" class="shrink-0 border-line-2 size-3.5 mt-[3px] rounded-sm border-transparent bg-pink-600 cursor-pointer focus:ring-0 focus:ring-offset-0 focus:text-pink-600 focus:bg-pink-600 checked:bg-pink-600 checked:bg-none checked:hover:bg-pink-600 dark:bg-pink-500 dark:focus:text-pink-500 dark:checked:hover:bg-pink-500" id="hs-pro-crcemaec6" name="hs-pro-crcemaec">
                                              Pink
                                              <svg class="shrink-0 size-3.5 mt-[3px] ms-auto opacity-0 group-has-checked:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                            </label>

<label for="hs-pro-crcemaec7" class="py-1 px-2 group flex gap-x-2 rounded-md cursor-pointer text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover">
                                              <input type="radio" class="shrink-0 border-line-2 size-3.5 mt-[3px] rounded-sm border-transparent bg-surface-2 cursor-pointer focus:ring-0 focus:ring-offset-0 ocus:bg-surface-2 checked:bg-surface-2 checked:bg-none checked:hover:bg-surface-2" id="hs-pro-crcemaec7" name="hs-pro-crcemaec">
                                              Gray
                                              <svg class="shrink-0 size-3.5 mt-[3px] ms-auto opacity-0 group-has-checked:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                            </label>
                                            
                                          </div>
                                        </div>
                                        
                                      </div>
                                      
                                    </div>

<div class="grid grid-cols-2 items-center gap-x-2">
                                      
                                      <div class="relative group">
                                        <select data-hs-select='{
                                            "placeholder": "Availability",
                                            "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                                            "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-1 sm:py-1.5 ps-2 pe-7 w-full flex gap-x-2 text-nowrap text-foreground cursor-pointer bg-layer border border-transparent rounded-md text-start sm:text-[13px] hover:border-layer-line hover:focus:border-transparent focus:outline-hidden focus:bg-muted-focus",
                                            "dropdownClasses": "mt-2 z-50 w-full max-h-60 p-1 space-y-0.5 overflow-hidden overflow-y-auto bg-select border border-select-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                                            "optionClasses": "hs-selected:bg-select-item-active py-1 px-3 w-full text-[13px] text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-md focus:outline-hidden focus:bg-select-item-focus",
                                            "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>",
                                            "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2.5 -translate-y-1/2 opacity-0 group-hover:opacity-100 group-focus:opacity-100\"><svg class=\"shrink-0 size-3.5 text-muted-foreground\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"/></svg></div>",
                                            "viewport": "#hs-modal-create-event"
                                          }' class="hidden">
                                          <option value="">Choose</option>
                                          <option selected>Busy</option>
                                          <option>Free</option>
                                        </select>
                                      </div>

<div class="relative group">
                                        <select data-hs-select='{
                                            "placeholder": "Visibility",
                                            "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                                            "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-1 sm:py-1.5 ps-2 pe-7 w-full flex gap-x-2 text-nowrap text-foreground cursor-pointer bg-layer border border-transparent rounded-md text-start sm:text-[13px] hover:border-layer-line hover:focus:border-transparent focus:outline-hidden focus:bg-muted-focus",
                                            "dropdownClasses": "mt-2 z-50 w-full max-h-60 p-1 space-y-0.5 overflow-hidden overflow-y-auto bg-select border border-select-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                                            "optionClasses": "hs-selected:bg-select-item-active py-1 px-3 w-full text-[13px] text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-md focus:outline-hidden focus:bg-select-item-focus",
                                            "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>",
                                            "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2.5 -translate-y-1/2 opacity-0 group-hover:opacity-100 group-focus:opacity-100\"><svg class=\"shrink-0 size-3.5 text-muted-foreground\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"/></svg></div>",
                                            "viewport": "#hs-modal-create-event"
                                          }' class="hidden">
                                          <option value="">Choose</option>
                                          <option selected>Default visibility</option>
                                          <option>Private</option>
                                          <option>Public</option>
                                        </select>
                                      </div>
                                      
                                    </div>
                                    
                                  </div>
                                </div>

<div class="col-span-1">
                                  <label class="mt-[17px] flex justify-center items-center gap-x-1 text-[13px] text-muted-foreground">
                                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>
                                    <span class="sr-only">Reminders:</span>
                                  </label>
                                </div>
                                <div class="col-span-11 relative pt-2 before:ms-2 before:absolute before:top-0 before:inset-x-0 before:w-[calc(100%-8px)] before:border-t before:border-line-1">
                                  
                                  <div class="relative group">
                                    <select data-hs-select='{
                                        "placeholder": "Reminders",
                                        "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                                        "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-1 sm:py-1.5 ps-2 pe-7 w-full flex gap-x-2 text-nowrap text-foreground cursor-pointer bg-layer border border-transparent rounded-md text-start sm:text-[13px] hover:border-layer-line hover:focus:border-transparent focus:outline-hidden focus:bg-muted-focus",
                                        "dropdownClasses": "mt-2 z-50 w-full max-h-60 p-1 space-y-0.5 overflow-hidden overflow-y-auto bg-select border border-select-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                                        "optionClasses": "hs-selected:bg-select-item-active py-1 px-3 w-full text-[13px] text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-md focus:outline-hidden focus:bg-select-item-focus",
                                        "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>",
                                        "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2.5 -translate-y-1/2 opacity-0 group-hover:opacity-100 group-focus:opacity-100\"><svg class=\"shrink-0 size-3.5 text-muted-foreground\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"/></svg></div>",
                                        "viewport": "#hs-modal-create-event"
                                      }' class="hidden">
                                      <option value="">Choose</option>
                                      <option>At the start of event</option>
                                      <option>5 min before</option>
                                      <option>10 min before</option>
                                      <option selected>30 min before</option>
                                      <option>1 hour before</option>
                                    </select>
                                  </div>
                                  
                                </div>
                                
                              </div>
                              
                            </div>
                          </div>

<div class="py-2 px-4 border-t border-overlay-footer">
                            <div class="flex-1 flex justify-end items-center gap-2">
                              <button type="button" class="py-2 px-3 text-nowrap inline-flex justify-center items-center text-start whitespace-nowrap bg-layer border border-layer-line text-layer-foreground text-sm font-medium rounded-lg shadow-2xs align-middle hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none" data-hs-overlay="#hs-pro-clce">
                                Cancel
                              </button>

<button type="button" class="py-2 px-3 text-nowrap inline-flex justify-center items-center gap-x-2 text-start whitespace-nowrap bg-primary border border-primary-line text-primary-foreground text-sm font-medium rounded-lg shadow-2xs align-middle hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus" data-hs-overlay="#hs-pro-clce">
                                Create event
                              </button>
                            </div>
                          </div>
                          
                        </div>
                      </div>
                    </div>

<div id="hs-pro-clee" class="hs-overlay hidden size-full fixed top-0 inset-s-0 z-80 overflow-hidden [--close-when-click-inside:true] pointer-events-none" role="dialog" tabindex="-1" aria-labelledby="hs-pro-clee-label">
                      <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-md sm:w-full m-3 sm:mx-auto h-[calc(100%-56px)] min-h-[calc(100%-56px)] flex items-center">
                        <div class="w-full max-h-full flex flex-col bg-overlay border border-overlay-line rounded-xl pointer-events-auto shadow-xl">
                          
                          <div class="py-2.5 px-4 flex justify-between items-center border-b border-overlay-divider">
                            <h2 id="hs-pro-clee-label" class="font-medium text-foreground">
                              Edit event
                            </h2>
                            <button type="button" class="size-8 shrink-0 flex justify-center items-center gap-x-2 rounded-full border border-transparent bg-surface text-foreground hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" aria-label="Close" data-hs-overlay="#hs-pro-clee">
                              <span class="sr-only">Close</span>
                              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                            </button>
                          </div>

<div id="hs-modal-edit-event" class="overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                            <div class="p-4 space-y-3 overflow-hidden">
                              
                              <div class="grid grid-cols-12 gap-2">
                                
                                <div class="col-span-1">
                                  <label for="hs-edit-event-title-autoheight-textarea" class="mt-[11px] flex justify-center items-center gap-x-1 text-[13px] text-muted-foreground">
                                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 7 4 4 20 4 20 7"/><line x1="9" x2="15" y1="20" y2="20"/><line x1="12" x2="12" y1="4" y2="20"/></svg>
                                    <span class="sr-only">Title</span>
                                  </label>
                                </div>
                                <div class="col-span-11">
                                  <textarea id="hs-edit-event-title-autoheight-textarea" class="py-1 sm:py-1.5 px-2 block w-full bg-layer border-transparent rounded-md sm:text-[13px] hover:border-layer-line text-foreground placeholder:text-muted-foreground resize-none disabled:opacity-50 disabled:pointer-events-none focus:bg-muted-focus focus:border-transparent focus:ring-transparent" rows="1" placeholder="Add title" data-hs-textarea-auto-height >Preline Q1 tasks review</textarea>
                                </div>

<div class="flex sm:grid sm:grid-cols-7 items-center gap-1 sm:gap-2">
                                      <div class="w-full sm:col-span-3">
                                        
                                        <div class="hs-dropdown [--strategy:absolute] [--auto-close:inside] relative inline-flex w-full">
                                          <button id="hs-pro-credemd1" type="button" class="py-1 sm:py-1.5 px-2 group inline-flex items-center gap-x-1 w-full text-start sm:text-[13px] rounded-md bg-layer border border-transparent text-layer-foreground hover:border-layer-line disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus hover:focus:border-transparent" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                            Thu, Jan 2024
                                            <svg class="shrink-0 size-3.5 ms-auto text-muted-foreground opacity-0 group-hover:opacity-100 group-focus:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
                                          </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-56 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-credemd1">
                                            
                                            <div class="p-2 grid gap-y-0.5">
                                              <div class="w-52 ">
                                                
                                                <div class="flex justify-between items-center gap-1 mb-1">
                                                  <span class="ps-1.5 block text-xs font-medium text-muted-foreground-1">January 2026</span>

<div class="flex mb-1.5">
                                                  <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
                                                    Mo
                                                  </span>
                                                  <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
                                                    Tu
                                                  </span>
                                                  <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
                                                    We
                                                  </span>
                                                  <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
                                                    Th
                                                  </span>
                                                  <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
                                                    Fr
                                                  </span>
                                                  <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
                                                    Sa
                                                  </span>
                                                  <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
                                                    Su
                                                  </span>
                                                </div>

<div class="flex">
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      1
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      2
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      3
                                                      <span class="absolute bottom-0.5 inset-s-1/2 size-1 bg-primary rounded-full -translate-x-1/2"></span>
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      4
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      5
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      6
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      7
                                                    </button>
                                                  </div>
                                                </div>

<div class="flex">
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      8
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      9
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      10
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      11
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-primary-line bg-primary text-xs font-medium text-primary-foreground hover:border-primary rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus">
                                                      12
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      13
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      14
                                                    </button>
                                                  </div>
                                                </div>

<div class="flex">
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      15
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      16
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      17
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      18
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      19
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      20
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      21
                                                    </button>
                                                  </div>
                                                </div>

<div class="flex">
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      22
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      23
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      24
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      25
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      26
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      27
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      28
                                                    </button>
                                                  </div>
                                                </div>

<div class="flex">
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      29
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      30
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      31
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      1
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      2
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      3
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      4
                                                    </button>
                                                  </div>
                                                </div>

<div class="flex">
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      5
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      6
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      7
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      8
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      9
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      10
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      11
                                                    </button>
                                                  </div>
                                                </div>
                                                
                                              </div>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-56 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-credemd2">
                                            
                                            <div class="p-2 grid gap-y-0.5">
                                              <div class="w-52 ">
                                                
                                                <div class="flex justify-between items-center gap-1 mb-1">
                                                  <span class="ps-1.5 block text-xs font-medium text-muted-foreground-1">January 2026</span>

<div class="flex mb-1.5">
                                                  <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
                                                    Mo
                                                  </span>
                                                  <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
                                                    Tu
                                                  </span>
                                                  <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
                                                    We
                                                  </span>
                                                  <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
                                                    Th
                                                  </span>
                                                  <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
                                                    Fr
                                                  </span>
                                                  <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
                                                    Sa
                                                  </span>
                                                  <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
                                                    Su
                                                  </span>
                                                </div>

<div class="flex">
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      1
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      2
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      3
                                                      <span class="absolute bottom-0.5 inset-s-1/2 size-1 bg-primary rounded-full -translate-x-1/2"></span>
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      4
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      5
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      6
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      7
                                                    </button>
                                                  </div>
                                                </div>

<div class="flex">
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      8
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      9
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      10
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      11
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-primary-line bg-primary text-xs font-medium text-primary-foreground hover:border-primary rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus">
                                                      12
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      13
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      14
                                                    </button>
                                                  </div>
                                                </div>

<div class="flex">
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      15
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      16
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      17
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      18
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      19
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      20
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      21
                                                    </button>
                                                  </div>
                                                </div>

<div class="flex">
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      22
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      23
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      24
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      25
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      26
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      27
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      28
                                                    </button>
                                                  </div>
                                                </div>

<div class="flex">
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      29
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      30
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      31
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      1
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      2
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      3
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      4
                                                    </button>
                                                  </div>
                                                </div>

<div class="flex">
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      5
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      6
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      7
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      8
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      9
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      10
                                                    </button>
                                                  </div>
                                                  <div>
                                                    <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                      11
                                                    </button>
                                                  </div>
                                                </div>
                                                
                                              </div>

</div>
                                            
                                          </div>
                                          
                                        </div>
                                        
                                      </div>
                                    </div>
                                    
        
                                    
                                    <div class="flex sm:grid sm:grid-cols-7 items-center gap-1 sm:gap-2">
                                      <div class="w-full sm:col-span-3">
                                        
                                        <div class="flex items-center gap-x-2 ms-2.5">
                                          <label for="hs-pro-cremad" class="flex items-center gap-x-1 sm:text-[13px] text-nowrap text-foreground">All-Day:</label>
                                          <label for="hs-pro-cremad" class="relative inline-block w-9 h-5 cursor-pointer">
                                            <input type="checkbox" id="hs-pro-cremad" class="peer sr-only">
                                            <span class="absolute inset-0 bg-surface-1 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                                            <span class="absolute top-1/2 inset-s-0.5 -translate-y-1/2 size-4 bg-switch rounded-full shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                                          </label>
                                        </div>
                                        
                                      </div>

<div class="w-full sm:col-span-3">
                                        
                                        <div class="hs-dropdown [--strategy:absolute] relative inline-flex w-full">
                                          <button id="hs-pro-cremdid" type="button" class="py-1 sm:py-1.5 px-2 group inline-flex items-center gap-x-1 w-full text-start sm:text-[13px] rounded-md bg-layer border border-transparent text-layer-foreground hover:border-layer-line hover:focus:border-transparent disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                            Do not repeat
                                            <svg class="shrink-0 size-3.5 ms-auto text-muted-foreground opacity-0 group-hover:opacity-100 group-focus:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
                                          </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-full transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-cremdid">
                                            <div class="p-1 space-y-0.5">
                                              
                                              <label for="hs-pro-cremd1" class="py-1 px-2 group flex gap-x-1.5 rounded-md cursor-pointer text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover">
                                                <input type="radio" class="hidden" id="hs-pro-cremd1" name="hs-pro-cremd" checked>
                                                Do not repeat
                                                <svg class="shrink-0 size-3.5 mt-[3px] ms-auto opacity-0 group-has-checked:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                              </label>

<label for="hs-pro-cremd2" class="py-1 px-2 group flex gap-x-1.5 rounded-md cursor-pointer text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover">
                                                <input type="radio" class="hidden" id="hs-pro-cremd2" name="hs-pro-cremd">
                                                Every Day
                                                <svg class="shrink-0 size-3.5 mt-[3px] ms-auto opacity-0 group-has-checked:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                              </label>

<label for="hs-pro-cremd3" class="py-1 px-2 group flex gap-x-1.5 rounded-md cursor-pointer text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover">
                                                <input type="radio" class="hidden" id="hs-pro-cremd3" name="hs-pro-cremd">
                                                Every Week
                                                <svg class="shrink-0 size-3.5 mt-[3px] ms-auto opacity-0 group-has-checked:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                              </label>

<label for="hs-pro-cremd4" class="py-1 px-2 group flex gap-x-1.5 rounded-md cursor-pointer text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover">
                                                <input type="radio" class="hidden" id="hs-pro-cremd4" name="hs-pro-cremd">
                                                Every Year
                                                <svg class="shrink-0 size-3.5 mt-[3px] ms-auto opacity-0 group-has-checked:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                              </label>
                                              
                                            </div>

<div class="col-span-1">
                                  <label for="hs-pro-cremtz" class="mt-[17px] flex justify-center items-center gap-x-1 text-[13px] text-muted-foreground">
                                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></svg>
                                    <span class="sr-only">Time Zone:</span>
                                  </label>
                                </div>
                                <div class="col-span-11 relative pt-2 before:ms-2 before:absolute before:top-0 before:inset-x-0 before:w-[calc(100%-8px)] before:border-t before:border-line-1">
                                  <input id="hs-pro-cremtz" type="text" class="py-1 sm:py-1.5 px-2 block w-full bg-layer border-transparent rounded-md sm:text-[13px] text-layer-foreground leading-5 hover:border-layer-line text-foreground placeholder:text-muted-foreground disabled:opacity-50 disabled:pointer-events-none focus:bg-muted-focus focus:border-transparent focus:ring-transparent" placeholder="Time Zone" value="London (GMT+0)">
                                </div>

<div class="col-span-1">
                                  <label for="hs-pro-cremg" class="mt-[17px] flex justify-center items-center gap-x-1 text-[13px] text-muted-foreground">
                                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
                                    <span class="sr-only">Participants:</span>
                                  </label>
                                </div>
                                <div class="col-span-11 relative pt-2 before:ms-2 before:absolute before:top-0 before:inset-x-0 before:w-[calc(100%-8px)] before:border-t before:border-line-1">
                                  <input id="hs-pro-cremg" type="text" class="py-1 sm:py-1.5 px-2 block w-full bg-layer border-transparent rounded-md sm:text-[13px] text-layer-foreground leading-5 hover:border-layer-line text-foreground placeholder:text-muted-foreground disabled:opacity-50 disabled:pointer-events-none focus:bg-muted-focus focus:border-transparent focus:ring-transparent" placeholder="Add Participants">
                                  <div class="mt-1.5 ms-2.5 space-y-1">
                                    
                                    <div class="pb-1 flex flex-wrap justify-between items-center gap-1">
                                      
                                      <div class="grow">
                                        <span class="block text-sm sm:text-[13px] text-foreground">
                                          3 participants
                                        </span>
                                        <small class="block text-[13px] sm:text-[11px] text-muted-foreground-1">
                                          1 yes, 2 awaiting
                                        </small>
                                      </div>

<div class="flex items-center gap-x-1">
                                        <div class="hs-tooltip [--placement:auto] inline-block">
                                          <button type="button" class="size-7 shrink-0 inline-flex justify-center items-center gap-x-2 rounded-full border border-transparent text-muted-foreground hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                            <span class="sr-only">Email participants</span>
                                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
                                          </button>
                                          <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-center text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                                            Email participants
                                          </span>
                                        </div>

<div class="space-y-1">
                                      
                                      <div id="hs-pro-cremudb1" class="relative p-1 ps-2 group flex flex-wrap justify-between items-center gap-1 rounded-lg hover:bg-surface">
                                        
                                        <div class="grow w-full">
                                          <div class="flex gap-x-2">
                                            <div class="shrink-0">
                                              <div class="relative shrink-0">
                                                <img class="shrink-0 mx-auto size-5 rounded-full" src="https://images.unsplash.com/photo-1659482633369-9fe69af50bfb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Avatar"><span class="absolute -bottom-0.5 -inset-e-0.5 flex justify-center items-center size-3 bg-green-600 border border-layer text-foreground-inverse rounded-full">
                                                  <svg class="shrink-0 size-2" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                                </span>
                                              </div>
                                            </div>

<div class="grow truncate pe-28">
                                              <span class="block text-[13px] truncate text-foreground">
                                                James Collison
                                              </span>
                                              <small class="block text-[11px] truncate text-muted-foreground-1">
                                                organizer
                                              </small>
                                            </div>
                                          </div>
                                        </div>

<div class="absolute top-1/2 inset-e-2 -translate-y-1/2 flex items-center gap-x-1 lg:opacity-0 lg:group-hover:opacity-100">
                                          <div class="hs-tooltip [--placement:auto] inline-block">
                                            <button type="button" class="size-7 shrink-0 inline-flex justify-center items-center gap-x-2 rounded-full border border-transparent text-muted-foreground hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                              <span class="sr-only">Show/Hide</span>
                                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>
                                              <svg class="hidden shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><line x1="2" x2="22" y1="2" y2="22"/></svg>
                                            </button>
                                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-center text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                                              Hide
                                            </span>
                                          </div>

<div id="hs-pro-cremudb2" class="relative p-1 ps-2 group flex flex-wrap justify-between items-center gap-1 rounded-lg hover:bg-surface">
                                        
                                        <div class="grow w-full">
                                          <div class="flex gap-x-2">
                                            <div class="shrink-0">
                                              <div class="relative shrink-0">
                                                <img class="shrink-0 mx-auto size-5 rounded-full" src="https://images.unsplash.com/photo-1601935111741-ae98b2b230b0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Avatar">
                                              </div>
                                            </div>

<div class="grow truncate pe-28">
                                              <span class="block text-[13px] truncate text-foreground">
                                                Daniel Hobbs
                                              </span>
                                              <small class="block text-[11px] truncate text-muted-foreground-1">
                                                dhobbs@site.com
                                              </small>
                                            </div>
                                          </div>
                                        </div>

<div class="hs-tooltip [--placement:auto] inline-block">
                                            <button type="button" class="size-7 shrink-0 inline-flex justify-center items-center gap-x-2 rounded-full border border-transparent text-muted-foreground hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" data-hs-remove-element="#hs-pro-cremudb2">
                                              <span class="sr-only">Remove</span>
                                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                                            </button>
                                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-center text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                                              Remove
                                            </span>
                                          </div>
                                        </div>
                                        
                                      </div>
                                      
  
                                      
                                      <div id="hs-pro-cremudb3" class="relative p-1 ps-2 group flex flex-wrap justify-between items-center gap-1 rounded-lg hover:bg-surface">
                                        
                                        <div class="grow w-full">
                                          <div class="flex gap-x-2">
                                            <div class="shrink-0">
                                              <div class="relative shrink-0">
                                                <span class="flex shrink-0 justify-center items-center size-5 bg-surface-1 text-muted-foreground-1 text-[11px] font-semibold rounded-full">L</span>
                                              </div>
                                            </div>

<div class="grow truncate pe-28">
                                              <span class="block text-[13px] truncate text-foreground">
                                                Liza Harrison
                                              </span>
                                              <small class="block text-[11px] truncate text-muted-foreground-1">
                                                liza@site.com
                                              </small>
                                            </div>
                                          </div>
                                        </div>

<button type="button" class="hs-collapse-toggle group w-full text-start focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" id="participantsPermissionsID" aria-expanded="false" aria-controls="participantsPermissionsLabelID" data-hs-collapse="#participantsPermissionsLabelID">
                                      <span class="py-1.5 px-2 block w-full rounded-lg text-sm sm:text-[13px] text-foreground border border-transparent group-hover:bg-muted-hover">
                                        <span class="flex justify-between items-center">
                                          <span class="grow truncate">
                                            <span class="block">Participant permissions</span>
                                            <span class="block text-[13px] sm:text-[11px] text-muted-foreground-1">Invite others • See participant list</span>
                                          </span>
                                          <svg class="hs-collapse-open:rotate-180 shrink-0 size-3.5 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
                                        </span>
                                      </span>
                                    </button>

<div id="participantsPermissionsLabelID" class="hs-collapse hidden col-span-full w-full overflow-hidden transition-[height] duration-300" aria-labelledby="participantsPermissionsID" role="region">
                                      <div class="p-2 bg-surface rounded-md">
                                        <span class="block mb-1.5 text-xs text-muted-foreground">
                                          Participant permissions
                                        </span>

<div class="ms-1">
                                          
                                          <div>
                                            <label for="hs-pro-creagsio" class="inline-flex items-center gap-x-2.5 rounded-md cursor-pointer text-xs text-foreground">
                                              <input type="checkbox" class="shrink-0 size-3 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-creagsio" checked>
                                              Invite others
                                            </label>
                                          </div>

<div>
                                            <label for="hs-pro-creagssgl" class="inline-flex items-center gap-x-2.5 rounded-md cursor-pointer text-xs text-foreground">
                                              <input type="checkbox" class="shrink-0 size-3 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-creagssgl" checked>
                                              See participant list
                                            </label>
                                          </div>
                                          
                                        </div>
                                      </div>
                                    </div>
                                    
                                  </div>

<div class="mt-2 flex justify-end items-center -space-x-px">
                                    <button type="button" class="py-1.5 px-2 inline-flex items-center gap-x-2 text-xs rounded-s-md border bg-primary border-primary-line text-primary-foreground hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus">
                                      Send invite
                                    </button>

<div class="hs-dropdown [--strategy:absolute] relative inline-flex border-s border-line-7/50">
                                      <button id="hs-discard-invite" type="button" class="size-7.5 inline-flex justify-center items-center gap-x-2 text-xs rounded-e-md border bg-primary border-primary-line text-primary-foreground hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                        <span class="sr-only">More</span>
                                        <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
                                      </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-48 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-discard-invite">
                                        <div class="p-1 space-y-0.5">
                                          <a class="flex items-center gap-x-1.5 py-1.5 px-2 rounded-lg text-[13px] text-destructive hover:bg-destructive-50 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-destructive-50" href="#">
                                            Discard invite
                                          </a>
                                          <a class="flex items-center gap-x-1.5 py-1.5 px-2 rounded-lg text-[13px] text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-hover" href="#">
                                            Send invite without email
                                          </a>
                                        </div>
                                      </div>
                                      
                                    </div>
                                    
                                  </div>
                                  
                                </div>

<div class="flex items-center gap-x-1">
                                      <div class="hs-tooltip [--placement:auto] inline-block">
                                        <button type="button" class="size-7 shrink-0 inline-flex justify-center items-center gap-x-2 rounded-full border border-transparent text-muted-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                          <span class="sr-only">Video call options</span>
                                          <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
                                        </button>
                                        <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-center text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                                          Video call options
                                        </span>
                                      </div>

<button type="button" class="js-clipboard [--is-toggle-tooltip:false] hs-tooltip size-7 shrink-0 inline-flex justify-center items-center gap-x-2 rounded-full border border-transparent text-muted-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus"
                                        data-clipboard-target="#hs-dshct"
                                        data-clipboard-action="copy"
                                        data-clipboard-success-text="Copied to clipboard">
                                        <svg class="js-clipboard-default shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
                                        <svg class="js-clipboard-success hidden size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
                                        <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg shadow-2xs" role="tooltip">
                                          <span class="js-clipboard-success-text">Copy conference link</span>
                                        </span>
                                      </button>

<div class="col-span-1">
                                  <label for="hs-edit-event-location-autoheight-textarea" class="mt-[17px] flex justify-center items-center gap-x-1 text-[13px] text-muted-foreground">
                                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg>
                                    <span class="sr-only">Location:</span>
                                  </label>
                                </div>
                                <div class="col-span-11 relative pt-2 before:ms-2 before:absolute before:top-0 before:inset-x-0 before:w-[calc(100%-8px)] before:border-t before:border-line-1">
                                  <textarea id="hs-edit-event-location-autoheight-textarea" class="py-1 sm:py-1.5 px-2 block w-full bg-layer border-transparent rounded-md sm:text-[13px] text-layer-foreground leading-5 hover:border-layer-line text-foreground placeholder:text-muted-foreground disabled:opacity-50 disabled:pointer-events-none focus:bg-muted-focus focus:border-transparent focus:ring-transparent" rows="1" placeholder="Add Location" data-hs-textarea-auto-height>Virtual Location</textarea>
                                </div>

<button type="button" class="hs-collapse-toggle hs-collapse-open:hidden group col-span-full w-full text-start focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-crem-add-description-url-attachments-collapse" aria-expanded="false" aria-controls="hs-pro-crem-add-description-url-attachments" data-hs-collapse="#hs-pro-crem-add-description-url-attachments">
                                  <span class="grid grid-cols-12 gap-2">
                                    <span class="col-span-1">
                                      <span class="mt-[17px] flex justify-center items-center gap-x-1 text-[13px] text-muted-foreground">
                                        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="21" x2="3" y1="6" y2="6"/><line x1="15" x2="3" y1="12" y2="12"/><line x1="17" x2="3" y1="18" y2="18"/></svg>
                                      </span>
                                    </span>
                                    <span class="col-span-11 relative pt-2 before:ms-2 before:absolute before:top-0 before:inset-x-0 before:w-[calc(100%-8px)] before:border-t before:border-line-1">
                                      <span class="py-1 sm:py-1.5 px-2 block w-full rounded-lg sm:text-[13px] text-foreground border border-transparent group-hover:bg-muted-hover group-focus:bg-muted-focus">
                                        Add description, URL, or Attachments
                                      </span>
                                    </span>
                                  </span>
                                </button>

<div id="hs-pro-crem-add-description-url-attachments" class="hs-collapse hidden col-span-full w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-pro-crem-add-description-url-attachments-collapse" role="region">
                                  <div class="grid grid-cols-12 gap-2">
                                    
                                    <div class="col-span-1">
                                      <label for="hs-edit-event-description-autoheight-textarea" class="mt-[17px] flex justify-center items-center gap-x-1 text-[13px] text-muted-foreground">
                                        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="21" x2="3" y1="6" y2="6"/><line x1="15" x2="3" y1="12" y2="12"/><line x1="17" x2="3" y1="18" y2="18"/></svg>
                                        <span class="sr-only">Description:</span>
                                      </label>
                                    </div>
                                    <div class="col-span-11 relative pt-2 before:ms-2 before:absolute before:top-0 before:inset-x-0 before:w-[calc(100%-8px)] before:border-t before:border-line-1">
                                      <textarea id="hs-edit-event-description-autoheight-textarea" class="py-1 sm:py-1.5 px-2 block w-full bg-layer border-transparent rounded-md sm:text-[13px] hover:border-layer-line text-foreground placeholder:text-muted-foreground resize-none disabled:opacity-50 disabled:pointer-events-none focus:bg-muted-focus focus:border-transparent focus:ring-transparent" rows="1" placeholder="Add Description" data-hs-textarea-auto-height>This session is designed to help us collectively reflect on our accomplishments, identify areas for improvement, and refine our approach to using Preline in the upcoming quarter.</textarea>
                                    </div>

<div class="col-span-1">
                                      <label for="hs-pro-cremurl" class="mt-[17px] flex justify-center items-center gap-x-1 text-[13px] text-muted-foreground">
                                        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
                                        <span class="sr-only">URL:</span>
                                      </label>
                                    </div>
                                    <div class="col-span-11 relative pt-2 before:ms-2 before:absolute before:top-0 before:inset-x-0 before:w-[calc(100%-8px)] before:border-t before:border-line-1">
                                      <input id="hs-pro-cremurl" type="text" class="py-1 sm:py-1.5 px-2 block w-full bg-layer border-transparent rounded-md sm:text-[13px] text-layer-foreground leading-5 hover:border-layer-line text-foreground placeholder:text-muted-foreground disabled:opacity-50 disabled:pointer-events-none focus:bg-muted-focus focus:border-transparent focus:ring-transparent" placeholder="Add URL" value="https://www.preline.co/">
                                    </div>

<label for="hs-pro-crema1" class="py-1 px-2 group flex items-center gap-x-2 rounded-md cursor-pointer text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover">
                                                <input type="radio" class="shrink-0 size-3.5 bg-transparent border-line-3 rounded-full shadow-2xs text-teal-600 focus:ring-0 focus:ring-offset-0 checked:bg-teal-600 checked:border-teal-600 disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-crema1" name="hs-pro-crema" checked>
                                                James Collins
                                                <svg class="shrink-0 size-3.5 mt-[3px] ms-auto opacity-0 group-has-checked:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                              </label>

<label for="hs-pro-crema2" class="py-1 px-2 group flex items-center gap-x-2 rounded-md cursor-pointer text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover">
                                                <input type="radio" class="shrink-0 size-3.5 bg-transparent border-line-3 rounded-full shadow-2xs text-sky-500 focus:ring-0 focus:ring-offset-0 checked:bg-sky-500 checked:border-sky-500 disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-crema2" name="hs-pro-crema">
                                                Preline tasks
                                                <svg class="shrink-0 size-3.5 mt-[3px] ms-auto opacity-0 group-has-checked:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                              </label>

<label for="hs-pro-crema3" class="py-1 px-2 group flex items-center gap-x-2 rounded-md cursor-pointer text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover">
                                                <input type="radio" class="shrink-0 size-3.5 bg-transparent border-line-3 rounded-full shadow-2xs text-purple-500 focus:ring-0 focus:ring-offset-0 checked:bg-purple-500 checked:border-purple-500 disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-crema3" name="hs-pro-crema">
                                                Performance Tasks
                                                <svg class="shrink-0 size-3.5 mt-[3px] ms-auto opacity-0 group-has-checked:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                              </label>
                                              
                                            </div>

<label for="hs-pro-crema4" class="py-1 px-2 group flex items-center gap-x-2 rounded-md cursor-pointer text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover">
                                                <input type="radio" class="shrink-0 size-3.5 bg-transparent border-line-3 rounded-full shadow-2xs text-pink-500 focus:ring-0 focus:ring-offset-0 checked:bg-pink-500 checked:border-pink-500 disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-crema4" name="hs-pro-erema">
                                                Holidays
                                                <svg class="shrink-0 size-3.5 mt-[3px] ms-auto opacity-0 group-has-checked:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                              </label>
                                              
                                            </div>
                                          </div>
                                          
                                        </div>
                                        
                                      </div>

<div class="hs-dropdown [--strategy:absolute] [--placement:top-right] relative inline-flex">
                                        <button id="hs-pro-cremaecid" type="button" class="py-1 sm:py-1.5 px-2 group inline-flex items-center gap-x-1 min-h-8.5 text-start sm:text-[13px] rounded-md bg-layer border border-transparent text-layer-foreground hover:border-layer-line hover:focus:border-transparent disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                          <span class="shrink-0 size-3 bg-green-600 rounded-full dark:bg-green-500"></span>
                                          <svg class="shrink-0 size-3.5 ms-auto text-muted-foreground opacity-0 group-hover:opacity-100 group-focus:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
                                        </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-32 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-cremaecid">
                                          <div class="p-1 space-y-0.5">
                                            <span class="ms-2 text-xs text-muted-foreground-1">
                                              Event color
                                            </span>

<label for="hs-pro-cremaec1" class="py-1 px-2 group flex gap-x-2 rounded-md cursor-pointer text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover">
                                              <input type="radio" class="shrink-0 border-line-2 size-3.5 mt-[3px] rounded-sm border-transparent bg-red-600 cursor-pointer focus:ring-0 focus:ring-offset-0 focus:text-red-600 focus:bg-red-600 checked:bg-red-600 checked:bg-none checked:hover:bg-red-600 dark:bg-red-500 dark:focus:text-red-500 dark:checked:hover:bg-red-500" id="hs-pro-cremaec1" name="hs-pro-cremaec">
                                              Red
                                              <svg class="shrink-0 size-3.5 mt-[3px] ms-auto opacity-0 group-has-checked:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                            </label>

<label for="hs-pro-cremaec2" class="py-1 px-2 group flex gap-x-2 rounded-md cursor-pointer text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover">
                                              <input type="radio" class="shrink-0 border-line-2 size-3.5 mt-[3px] rounded-sm border-transparent bg-orange-600 cursor-pointer focus:ring-0 focus:ring-offset-0 focus:text-orange-600 focus:bg-orange-600 checked:bg-orange-600 checked:bg-none checked:hover:bg-orange-600 dark:bg-orange-500 dark:focus:text-orange-500 dark:checked:hover:bg-orange-500" id="hs-pro-cremaec2" name="hs-pro-cremaec">
                                              Orange
                                              <svg class="shrink-0 size-3.5 mt-[3px] ms-auto opacity-0 group-has-checked:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                            </label>

<label for="hs-pro-cremaec3" class="py-1 px-2 group flex gap-x-2 rounded-md cursor-pointer text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover">
                                              <input type="radio" class="shrink-0 border-line-2 size-3.5 mt-[3px] rounded-sm border-transparent bg-yellow-400 cursor-pointer focus:ring-0 focus:ring-offset-0 focus:text-yellow-400 focus:bg-yellow-400 checked:bg-yellow-400 checked:bg-none checked:hover:bg-yellow-400 dark:bg-yellow-500 dark:focus:text-yellow-500 dark:checked:hover:bg-yellow-500" id="hs-pro-cremaec3" name="hs-pro-cremaec">
                                              Yellow
                                              <svg class="shrink-0 size-3.5 mt-[3px] ms-auto opacity-0 group-has-checked:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                            </label>

<label for="hs-pro-cremaec4" class="py-1 px-2 group flex gap-x-2 rounded-md cursor-pointer text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover">
                                              <input type="radio" class="shrink-0 border-line-2 size-3.5 mt-[3px] rounded-sm border-transparent bg-green-600 cursor-pointer focus:ring-0 focus:ring-offset-0 focus:text-green-600 focus:bg-green-600 checked:bg-green-600 checked:bg-none checked:hover:bg-green-600 dark:bg-green-500 dark:focus:text-green-500 dark:checked:hover:bg-green-500" id="hs-pro-cremaec4" name="hs-pro-cremaec" checked>
                                              Green
                                              <svg class="shrink-0 size-3.5 mt-[3px] ms-auto opacity-0 group-has-checked:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                            </label>

<label for="hs-pro-cremaec5" class="py-1 px-2 group flex gap-x-2 rounded-md cursor-pointer text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover">
                                              <input type="radio" class="shrink-0 border-line-2 size-3.5 mt-[3px] rounded-sm border-transparent bg-sky-600 cursor-pointer focus:ring-0 focus:ring-offset-0 focus:text-sky-600 focus:bg-sky-600 checked:bg-sky-600 checked:bg-none checked:hover:bg-sky-600 dark:bg-sky-500 dark:focus:text-sky-500 dark:checked:hover:bg-sky-500" id="hs-pro-cremaec5" name="hs-pro-cremaec">
                                              Blue
                                              <svg class="shrink-0 size-3.5 mt-[3px] ms-auto opacity-0 group-has-checked:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                            </label>

<label for="hs-pro-cremaec6" class="py-1 px-2 group flex gap-x-2 rounded-md cursor-pointer text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover">
                                              <input type="radio" class="shrink-0 border-line-2 size-3.5 mt-[3px] rounded-sm border-transparent bg-pink-600 cursor-pointer focus:ring-0 focus:ring-offset-0 focus:text-pink-600 focus:bg-pink-600 checked:bg-pink-600 checked:bg-none checked:hover:bg-pink-600 dark:bg-pink-500 dark:focus:text-pink-500 dark:checked:hover:bg-pink-500" id="hs-pro-cremaec6" name="hs-pro-cremaec">
                                              Pink
                                              <svg class="shrink-0 size-3.5 mt-[3px] ms-auto opacity-0 group-has-checked:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                            </label>

<label for="hs-pro-cremaec7" class="py-1 px-2 group flex gap-x-2 rounded-md cursor-pointer text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover">
                                              <input type="radio" class="shrink-0 border-line-2 size-3.5 mt-[3px] rounded-sm border-transparent bg-surface-2 cursor-pointer focus:ring-0 focus:ring-offset-0 ocus:bg-surface-2 checked:bg-surface-2 checked:bg-none checked:hover:bg-surface-2" id="hs-pro-cremaec7" name="hs-pro-cremaec">
                                              Gray
                                              <svg class="shrink-0 size-3.5 mt-[3px] ms-auto opacity-0 group-has-checked:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                            </label>
                                            
                                          </div>
                                        </div>
                                        
                                      </div>
                                      
                                    </div>

<div class="grid grid-cols-2 items-center gap-x-2">
                                      
                                      <div class="relative group">
                                        <select data-hs-select='{
                                            "placeholder": "Availability",
                                            "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                                            "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-1 sm:py-1.5 ps-2 pe-7 w-full flex gap-x-2 text-nowrap text-foreground cursor-pointer bg-layer border border-transparent rounded-md text-start sm:text-[13px] hover:border-layer-line hover:focus:border-transparent focus:outline-hidden focus:bg-muted-focus",
                                            "dropdownClasses": "mt-2 z-50 w-full max-h-60 p-1 space-y-0.5 overflow-hidden overflow-y-auto bg-select border border-select-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                                            "optionClasses": "hs-selected:bg-select-item-active py-1 px-3 w-full text-[13px] text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-md focus:outline-hidden focus:bg-select-item-focus",
                                            "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>",
                                            "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2.5 -translate-y-1/2 opacity-0 group-hover:opacity-100 group-focus:opacity-100\"><svg class=\"shrink-0 size-3.5 text-muted-foreground\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"/></svg></div>",
                                            "viewport": "#hs-modal-edit-event"
                                          }' class="hidden">
                                          <option value="">Choose</option>
                                          <option selected>Busy</option>
                                          <option>Free</option>
                                        </select>
                                      </div>

<div class="relative group">
                                        <select data-hs-select='{
                                            "placeholder": "Visibility",
                                            "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                                            "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-1 sm:py-1.5 ps-2 pe-7 w-full flex gap-x-2 text-nowrap text-foreground cursor-pointer bg-layer border border-transparent rounded-md text-start sm:text-[13px] hover:border-layer-line hover:focus:border-transparent focus:outline-hidden focus:bg-muted-focus",
                                            "dropdownClasses": "mt-2 z-50 w-full max-h-60 p-1 space-y-0.5 overflow-hidden overflow-y-auto bg-select border border-select-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                                            "optionClasses": "hs-selected:bg-select-item-active py-1 px-3 w-full text-[13px] text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-md focus:outline-hidden focus:bg-select-item-focus",
                                            "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>",
                                            "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2.5 -translate-y-1/2 opacity-0 group-hover:opacity-100 group-focus:opacity-100\"><svg class=\"shrink-0 size-3.5 text-muted-foreground\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"/></svg></div>",
                                            "viewport": "#hs-modal-edit-event"
                                          }' class="hidden">
                                          <option value="">Choose</option>
                                          <option selected>Default visibility</option>
                                          <option>Private</option>
                                          <option>Public</option>
                                        </select>
                                      </div>
                                      
                                    </div>
                                    
                                  </div>
                                </div>

<div class="col-span-1">
                                  <label class="mt-[17px] flex justify-center items-center gap-x-1 text-[13px] text-muted-foreground">
                                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>
                                    <span class="sr-only">Reminders:</span>
                                  </label>
                                </div>
                                <div class="col-span-11 relative pt-2 before:ms-2 before:absolute before:top-0 before:inset-x-0 before:w-[calc(100%-8px)] before:border-t before:border-line-1">
                                  
                                  <div class="relative group">
                                    <select data-hs-select='{
                                        "placeholder": "Reminders",
                                        "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                                        "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-1 sm:py-1.5 ps-2 pe-7 w-full flex gap-x-2 text-nowrap text-foreground cursor-pointer bg-layer border border-transparent rounded-md text-start sm:text-[13px] hover:border-layer-line hover:focus:border-transparent focus:outline-hidden focus:bg-muted-focus",
                                        "dropdownClasses": "mt-2 z-50 w-full max-h-60 p-1 space-y-0.5 overflow-hidden overflow-y-auto bg-select border border-select-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                                        "optionClasses": "hs-selected:bg-select-item-active py-1 px-3 w-full text-[13px] text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-md focus:outline-hidden focus:bg-select-item-focus",
                                        "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>",
                                        "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2.5 -translate-y-1/2 opacity-0 group-hover:opacity-100 group-focus:opacity-100\"><svg class=\"shrink-0 size-3.5 text-muted-foreground\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"/></svg></div>",
                                        "viewport": "#hs-modal-edit-event"
                                      }' class="hidden">
                                      <option value="">Choose</option>
                                      <option>At the start of event</option>
                                      <option>5 min before</option>
                                      <option>10 min before</option>
                                      <option selected>30 min before</option>
                                      <option>1 hour before</option>
                                    </select>
                                  </div>
                                  
                                </div>
                                
                              </div>
                              
                            </div>
                          </div>

<div class="py-2 px-4 border-t border-overlay-footer">
                            <div class="flex-1 flex justify-end items-center gap-2">
                              <button type="button" class="py-2 px-3 text-nowrap inline-flex justify-center items-center text-start whitespace-nowrap bg-layer border border-layer-line text-layer-foreground text-sm font-medium rounded-lg shadow-2xs align-middle hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none" data-hs-overlay="#hs-pro-clee">
                                Cancel
                              </button>

<button type="button" class="py-2 px-3 text-nowrap inline-flex justify-center items-center gap-x-2 text-start whitespace-nowrap bg-primary border border-primary-line text-primary-foreground text-sm font-medium rounded-lg shadow-2xs align-middle hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus" data-hs-overlay="#hs-pro-clee">
                                Save changes
                              </button>
                            </div>
                          </div>
                          
                        </div>
                      </div>
                    </div>

<div id="hs-pro-clcre" class="hs-overlay hidden size-full fixed top-0 inset-s-0 z-81 overflow-x-hidden overflow-y-auto [--close-when-click-inside:true] pointer-events-none" role="dialog" tabindex="-1" aria-labelledby="hs-pro-clcre-label">
                      <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-xs sm:w-full m-3 sm:mx-auto h-[calc(100%-56px)] min-h-[calc(100%-56px)] flex items-center">
                        <div class="w-full max-h-full flex flex-col bg-overlay border border-overlay-line rounded-xl pointer-events-auto shadow-xl">
                          
                          <div class="py-2.5 px-4 flex justify-between items-center border-b border-overlay-divider">
                            <h2 id="hs-pro-clcre-label" class="font-medium text-foreground">
                              Custom recurrence
                            </h2>
                            <button type="button" class="size-8 shrink-0 flex justify-center items-center gap-x-2 rounded-full border border-transparent bg-surface text-foreground hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" aria-label="Close" data-hs-overlay="#hs-pro-clcre">
                              <span class="sr-only">Close</span>
                              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                            </button>
                          </div>

<div id="hs-modal-custom-recurrence-event" class="overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                            <div class="p-4 space-y-3">
                              <div class="grid gap-y-5">
                                
                                <div>
                                  <label for="hs-pro-ccremre" class="mb-1.5 block text-[13px] text-muted-foreground">
                                    Repeat every:
                                  </label>

<div class="relative w-full">
                                      <select data-hs-select='{
                                          "placeholder": "Start time",
                                          "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                                          "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-1.5 ps-2 pe-7 w-full flex gap-x-2 text-nowrap text-foreground cursor-pointer bg-surface border border-transparent rounded-md text-start sm:text-[13px] hover:bg-surface-hover hover:focus:border-transparent focus:outline-hidden focus:bg-surface-focus",
                                          "dropdownClasses": "mt-2 z-50 w-full max-h-60 p-1 space-y-0.5 overflow-hidden overflow-y-auto bg-select border border-select-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                                          "optionClasses": "hs-selected:bg-select-item-active py-1 px-3 w-full text-[13px] text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-md focus:outline-hidden focus:bg-select-item-focus",
                                          "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>",
                                          "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"/></svg></div>",
                                          "viewport": "#hs-modal-custom-recurrence-event"
                                        }' class="hidden">
                                        <option value="">Choose</option>
                                        <option>Daily</option>
                                        <option selected>Weekly</option>
                                        <option>Monthly</option>
                                        <option>Yearly</option>
                                      </select>
                                    </div>
                                    
                                  </div>
                                </div>

<div>
                                  <label class="mb-1.5 block text-[13px] text-muted-foreground">
                                    Repeats on:
                                  </label>

<label for="hs-pro-clcrerotu" class="group size-8.5 flex justify-center items-center rounded-md cursor-pointer text-[13px] text-foreground bg-surface hover:bg-surface-hover focus:bg-surface-focus has-checked:bg-primary-checked has-checked:text-primary-foreground">
                                      <input type="radio" class="hidden" id="hs-pro-clcrerotu" name="hs-pro-cremd">
                                      Tu
                                    </label>

<label for="hs-pro-clcrerowe" class="group size-8.5 flex justify-center items-center rounded-md cursor-pointer text-[13px] text-foreground bg-surface hover:bg-surface-hover focus:bg-surface-focus has-checked:bg-primary-checked has-checked:text-primary-foreground">
                                      <input type="radio" class="hidden" id="hs-pro-clcrerowe" name="hs-pro-cremd">
                                      We
                                    </label>

<label for="hs-pro-clcreroth" class="group size-8.5 flex justify-center items-center rounded-md cursor-pointer text-[13px] text-foreground bg-surface hover:bg-surface-hover focus:bg-surface-focus has-checked:bg-primary-checked has-checked:text-primary-foreground">
                                      <input type="radio" class="hidden" id="hs-pro-clcreroth" name="hs-pro-cremd">
                                      Th
                                    </label>

<label for="hs-pro-clcrerofr" class="group size-8.5 flex justify-center items-center rounded-md cursor-pointer text-[13px] text-foreground bg-surface hover:bg-surface-hover focus:bg-surface-focus has-checked:bg-primary-checked has-checked:text-primary-foreground">
                                      <input type="radio" class="hidden" id="hs-pro-clcrerofr" name="hs-pro-cremd">
                                      Fr
                                    </label>

<label for="hs-pro-clcrerosa" class="group size-8.5 flex justify-center items-center rounded-md cursor-pointer text-[13px] text-foreground bg-surface hover:bg-surface-hover focus:bg-surface-focus has-checked:bg-primary-checked has-checked:text-primary-foreground">
                                      <input type="radio" class="hidden" id="hs-pro-clcrerosa" name="hs-pro-cremd">
                                      Sa
                                    </label>

<label for="hs-pro-clcrerosu" class="group size-8.5 flex justify-center items-center rounded-md cursor-pointer text-[13px] text-foreground bg-surface hover:bg-surface-hover focus:bg-surface-focus has-checked:bg-primary-checked has-checked:text-primary-foreground">
                                      <input type="radio" class="hidden" id="hs-pro-clcrerosu" name="hs-pro-cremd">
                                      Su
                                    </label>
                                    
                                  </div>
                                </div>

<div>
                                  <label class="mb-1.5 block text-[13px] text-muted-foreground">
                                    Ends:
                                  </label>

<div class="flex">
                                    <input type="radio" name="hs-pro-clcree" class="shrink-0 size-4 bg-transparent border-line-3 rounded-full shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-clcreen" checked>
                                    <label for="hs-pro-clcreen" class="ms-2 text-xs text-muted-foreground-1">Never</label>
                                  </div>

<div class="mt-3 flex items-center gap-x-2">
                                    
                                    <div class="w-20 flex">
                                      <input type="radio" name="hs-pro-clcree" class="shrink-0 size-4 bg-transparent border-line-3 rounded-full shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-clcreea">
                                      <label for="hs-pro-clcreea" class="ms-2 text-xs text-muted-foreground-1">After</label>
                                    </div>

<div class="w-full flex items-center gap-x-2">
                                      
                                      <input type="text" class="py-1 px-2 block w-12 bg-surface border-transparent rounded-md leading-5 sm:text-[13px] text-foreground placeholder:text-muted-foreground hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:bg-surface-focus focus:border-transparent focus:ring-transparent" value="7">
                                      
                                      <span class="text-xs text-muted-foreground">Times</span>
                                    </div>
                                  </div>
                                </div>
                                
                              </div>
                            </div>
                          </div>

<div class="py-2 px-4 border-t border-overlay-footer">
                            <div class="flex-1 flex justify-end items-center gap-2">
                              <button type="button" class="py-2 px-3 text-nowrap inline-flex justify-center items-center text-start whitespace-nowrap bg-layer border border-layer-line text-layer-foreground text-xs font-medium rounded-lg shadow-2xs align-middle hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none" data-hs-overlay="#hs-pro-clcre">
                                Cancel
                              </button>

Create Event Drawer with Schedule Form Pro

Event creation drawer stacks title, date, time, recurrence, participants, and attachment sections inside a slide-in panel.

Create a responsive UI block named "Create Event Drawer with Schedule Form" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/productivity/calendar-drawers/#create-event-drawer-with-schedule-form. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: productivity/calendar-drawers
- Block ID: create-event-drawer-with-schedule-form
- Source description: Event creation drawer stacks title, date, time, recurrence, participants, and attachment sections inside a slide-in panel.
- Preview iframe: https://preline.co/blocks/productivity/calendar-drawers/iframes/pro/create-event-drawer-with-schedule-form.html (repo path: blocks/productivity/calendar-drawers/iframes/pro/create-event-drawer-with-schedule-form.html)
- Source markup reference:
  - partials/pro/calendar-app/offcanvas/calendar-create-event.html
  - partials/pro/sources/overlay-header.html
  - partials/pro/calendar-app/sources/event.html
  - partials/pro/sources/overlay-footer.html

Block-specific fidelity rules:
- Preserve trigger geometry, open panel placement, grouping, row order, scroll container, overlay/backdrop behavior, z-index, active/current states, and keyboard/focus semantics.
- Do not simplify grouped or nested menus, drawers, popovers, and modals into flat generic lists or default forms unless the source does.
- Source content inventory (from the source markup):
  - The panel is `<div id="hs-pro-cceo" class="hs-overlay hs-overlay-open:translate-x-0 translate-x-full transition-all duration-300 transform size-full sm:w-100 hidden fixed top-0 inset-e-0 z-80 flex flex-col bg-overlay border-s border-overlay-line" role="dialog">` - hidden by default and sliding in from the inline-end edge. In the standalone preview an `Open` button and an auto-open script force it visible; both are demo chrome, not part of the block.
  - Header `py-2.5 px-4 flex justify-between items-center border-b border-overlay-divider` with the title `Create event` and a close button. Footer `mt-auto py-2 px-4 border-t border-overlay-footer` with exactly two buttons, `Cancel` (layer/outline) then `Create event` (primary), both closing the drawer.
  - The scrollable body is a `p-4 space-y-3` wrapper around one `grid grid-cols-12 gap-2`; every row is a `col-span-1` icon-only label (its text is `sr-only`, e.g. `Title`, `Date & Time:`, `Time Zone:`, `Participants:`, `Video Conferencing:`, `Location:`, `Assignee:`, `Reminders:`) plus a `col-span-11` control. Rows after the first draw a hairline top rule with a `before:` pseudo-element, not a `border-t` on the row.
  - Row order and empty-state copy: title textarea placeholder `Add title`; the date/time block; time-zone input with placeholder `Time Zone` and the pre-filled value `London (GMT+0)`; participants input placeholder `Add Participants` (no participant chips on first load); video conferencing; location textarea placeholder `Add Location`; then a collapsed toggle reading `Add description, URL, or Attachments`; then assignee, availability/visibility, and reminders.
  - The date/time block is three `sm:grid-cols-7` rows of 3 / 1 / 3 with an arrow icon in the middle column: two time selects (placeholder `Start time`, both defaulting to `10:00AM`), two date dropdown buttons both reading `Thu, Jan 2024` that open a single-month calendar, and finally an `All-Day:` label with an unchecked toggle switch next to a `Do not repeat` dropdown whose options are `Do not repeat` (checked), `Every Day`, `Every Week`, `Every Year`, plus a divided `Custom` button.
  - Video conferencing offers two rows: `Google Meet`, and a muted `Zoom` row with a `Connect` pill on the trailing edge. The `Add description, URL, or Attachments` region is `hs-collapse hidden` on first load and reveals a `Add Description` textarea, an `Add URL` input, and a file input.
  - Assignee row: a text button reading `james@preline.co` opening a two-group dropdown - group `james@preline.co` with radios `James Collins` (checked, teal), `Preline tasks` (sky), `Performance Tasks` (purple), and group `collinsjames@gmail.com` with `Holidays` (pink) - beside a colour dropdown of seven swatch radios (red, orange, yellow, green, sky, pink, neutral) with green checked. Availability defaults to `Busy` (other option `Free`), visibility to `Default visibility` (`Private`, `Public`), reminders to `30 min before` (`At the start of event`, `5 min before`, `10 min before`, `1 hour before`).
  - Behavior: Preline HSOverlay for the drawer, HSSelect for the time/availability/visibility/reminder selects (each pinned with `"viewport": "#hs-modal-create-event"` so menus stay inside the scroll container), HSDropdown for the date, repeat, assignee and colour menus, HSCollapse for the description region, and `data-hs-textarea-auto-height` on the title, location and description textareas. No chart, carousel or slider libraries are involved.

<div id="hs-pro-cceo" class="hs-overlay hs-overlay-open:translate-x-0
                    translate-x-full transition-all duration-300 transform
                    size-full sm:w-100
                    hidden
                    fixed top-0 inset-e-0 z-80
                    flex flex-col
                    bg-overlay border-s border-overlay-line" role="dialog" tabindex="-1" aria-labelledby="hs-pro-cceo-label">
                      
                      <div class="py-2.5 px-4 flex justify-between items-center border-b border-overlay-divider">
                        <h2 id="hs-pro-cceo-label" class="font-medium text-foreground">
                          Create event
                        </h2>
                        <button type="button" class="size-8 shrink-0 flex justify-center items-center gap-x-2 rounded-full border border-transparent bg-surface text-foreground hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" aria-label="Close" data-hs-overlay="#hs-pro-cceo">
                          <span class="sr-only">Close</span>
                          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                        </button>
                      </div>

<div id="hs-modal-create-event" class="overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                        <div class="p-4 space-y-3 overflow-hidden">
                          
                          <div class="grid grid-cols-12 gap-2">
                            
                            <div class="col-span-1">
                              <label for="hs-create-event-title-autoheight-textarea" class="mt-[11px] flex justify-center items-center gap-x-1 text-[13px] text-muted-foreground">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 7 4 4 20 4 20 7"/><line x1="9" x2="15" y1="20" y2="20"/><line x1="12" x2="12" y1="4" y2="20"/></svg>
                                <span class="sr-only">Title</span>
                              </label>
                            </div>
                            <div class="col-span-11">
                              <textarea id="hs-create-event-title-autoheight-textarea" class="py-1 sm:py-1.5 px-2 block w-full bg-layer border-transparent rounded-md sm:text-[13px] hover:border-layer-line text-foreground placeholder:text-muted-foreground resize-none disabled:opacity-50 disabled:pointer-events-none focus:bg-muted-focus focus:border-transparent focus:ring-transparent" rows="1" placeholder="Add title" data-hs-textarea-auto-height ></textarea>
                            </div>

<div class="col-span-1">
                              <label class="mt-[9px] flex justify-center items-center gap-x-1 text-[13px] text-muted-foreground">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                                <span class="sr-only">Date & Time:</span>
                              </label>
                            </div>
                            <div class="col-span-11">
                              <div class="space-y-1">
                                
                                <div class="flex sm:grid sm:grid-cols-7 items-center gap-1 sm:gap-2">
                                  <div class="w-full sm:col-span-3">
                                    
                                    <div class="relative group">
                                      <select data-hs-select='{
                                          "placeholder": "Start time",
                                          "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                                          "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-1 sm:py-1.5 ps-2 pe-7 w-full flex gap-x-2 text-nowrap text-foreground cursor-pointer bg-layer border border-transparent rounded-md text-start sm:text-[13px] hover:border-layer-line hover:focus:border-transparent focus:outline-hidden focus:bg-muted-focus",
                                          "dropdownClasses": "mt-2 z-50 w-full max-h-40 p-1 space-y-0.5 overflow-hidden overflow-y-auto bg-select border border-select-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                                          "optionClasses": "hs-selected:bg-select-item-active py-1 px-3 w-full text-[13px] text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-md focus:outline-hidden focus:bg-select-item-focus",
                                          "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>",
                                          "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2.5 -translate-y-1/2 opacity-0 group-hover:opacity-100 group-focus:opacity-100\"><svg class=\"shrink-0 size-3.5 text-muted-foreground\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"/></svg></div>"
                                        }' class="hidden">
                                        <option value="">Choose</option>
                                        <option>12:00AM</option>
                                        <option>12:15AM</option>
                                        <option>12:30AM</option>
                                        <option>12:45AM</option>
                                        <option>1:00AM</option>
                                        <option>1:15AM</option>
                                        <option>1:30AM</option>
                                        <option>1:45AM</option>
                                        <option>2:00AM</option>
                                        <option>2:15AM</option>
                                        <option>2:30AM</option>
                                        <option>2:45AM</option>
                                        <option>3:00AM</option>
                                        <option>3:15AM</option>
                                        <option>3:30AM</option>
                                        <option>3:45AM</option>
                                        <option>4:00AM</option>
                                        <option>4:15AM</option>
                                        <option>4:30AM</option>
                                        <option>4:45AM</option>
                                        <option>5:00AM</option>
                                        <option>5:15AM</option>
                                        <option>5:30AM</option>
                                        <option>5:45AM</option>
                                        <option>6:00AM</option>
                                        <option>6:15AM</option>
                                        <option>6:30AM</option>
                                        <option>6:45AM</option>
                                        <option>7:00AM</option>
                                        <option>7:15AM</option>
                                        <option>7:30AM</option>
                                        <option>7:45AM</option>
                                        <option>8:00AM</option>
                                        <option>8:15AM</option>
                                        <option>8:30AM</option>
                                        <option>8:45AM</option>
                                        <option>9:00AM</option>
                                        <option>9:15AM</option>
                                        <option>9:30AM</option>
                                        <option>9:45AM</option>
                                        <option selected>10:00AM</option>
                                        <option>10:15AM</option>
                                        <option>10:30AM</option>
                                        <option>10:45AM</option>
                                        <option>11:00AM</option>
                                        <option>11:15AM</option>
                                        <option>11:30AM</option>
                                        <option>11:45AM</option>
                                        <option>12:00PM</option>
                                        <option>12:15PM</option>
                                        <option>12:30PM</option>
                                        <option>12:45PM</option>
                                        <option>1:00PM</option>
                                        <option>1:15PM</option>
                                        <option>1:30PM</option>
                                        <option>1:45PM</option>
                                        <option>2:00PM</option>
                                        <option>2:15PM</option>
                                        <option>2:30PM</option>
                                        <option>2:45PM</option>
                                        <option>3:00PM</option>
                                        <option>3:15PM</option>
                                        <option>3:30PM</option>
                                        <option>3:45PM</option>
                                        <option>4:00PM</option>
                                        <option>4:15PM</option>
                                        <option>4:30PM</option>
                                        <option>4:45PM</option>
                                        <option>5:00PM</option>
                                        <option>5:15PM</option>
                                        <option>5:30PM</option>
                                        <option>5:45PM</option>
                                        <option>6:00PM</option>
                                        <option>6:15PM</option>
                                        <option>6:30PM</option>
                                        <option>6:45PM</option>
                                        <option>7:00PM</option>
                                        <option>7:15PM</option>
                                        <option>7:30PM</option>
                                        <option>7:45PM</option>
                                        <option>8:00PM</option>
                                        <option>8:15PM</option>
                                        <option>8:30PM</option>
                                        <option>8:45PM</option>
                                        <option>9:00PM</option>
                                        <option>9:15PM</option>
                                        <option>9:30PM</option>
                                        <option>9:45PM</option>
                                        <option>10:00PM</option>
                                        <option>10:15PM</option>
                                        <option>10:30PM</option>
                                        <option>10:45PM</option>
                                        <option>11:00PM</option>
                                        <option>11:15PM</option>
                                        <option>11:30PM</option>
                                        <option>11:45PM</option>
                                      </select>
                                    </div>
                                    
                                  </div>

<div class="w-full sm:col-span-3">
                                    
                                    <div class="relative group">
                                      <select data-hs-select='{
                                          "placeholder": "Start time",
                                          "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                                          "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-1 sm:py-1.5 ps-2 pe-7 w-full flex gap-x-2 text-nowrap text-foreground cursor-pointer bg-layer border border-transparent rounded-md text-start sm:text-[13px] hover:border-layer-line hover:focus:border-transparent focus:outline-hidden focus:bg-muted-focus",
                                          "dropdownClasses": "mt-2 z-50 w-full max-h-40 p-1 space-y-0.5 overflow-hidden overflow-y-auto bg-select border border-select-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                                          "optionClasses": "hs-selected:bg-select-item-active py-1 px-3 w-full text-[13px] text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-md focus:outline-hidden focus:bg-select-item-focus",
                                          "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>",
                                          "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2.5 -translate-y-1/2 opacity-0 group-hover:opacity-100 group-focus:opacity-100\"><svg class=\"shrink-0 size-3.5 text-muted-foreground\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"/></svg></div>"
                                        }' class="hidden">
                                        <option value="">Choose</option>
                                        <option>12:00AM</option>
                                        <option>12:15AM</option>
                                        <option>12:30AM</option>
                                        <option>12:45AM</option>
                                        <option>1:00AM</option>
                                        <option>1:15AM</option>
                                        <option>1:30AM</option>
                                        <option>1:45AM</option>
                                        <option>2:00AM</option>
                                        <option>2:15AM</option>
                                        <option>2:30AM</option>
                                        <option>2:45AM</option>
                                        <option>3:00AM</option>
                                        <option>3:15AM</option>
                                        <option>3:30AM</option>
                                        <option>3:45AM</option>
                                        <option>4:00AM</option>
                                        <option>4:15AM</option>
                                        <option>4:30AM</option>
                                        <option>4:45AM</option>
                                        <option>5:00AM</option>
                                        <option>5:15AM</option>
                                        <option>5:30AM</option>
                                        <option>5:45AM</option>
                                        <option>6:00AM</option>
                                        <option>6:15AM</option>
                                        <option>6:30AM</option>
                                        <option>6:45AM</option>
                                        <option>7:00AM</option>
                                        <option>7:15AM</option>
                                        <option>7:30AM</option>
                                        <option>7:45AM</option>
                                        <option>8:00AM</option>
                                        <option>8:15AM</option>
                                        <option>8:30AM</option>
                                        <option>8:45AM</option>
                                        <option>9:00AM</option>
                                        <option>9:15AM</option>
                                        <option>9:30AM</option>
                                        <option>9:45AM</option>
                                        <option selected>10:00AM</option>
                                        <option>10:15AM</option>
                                        <option>10:30AM</option>
                                        <option>10:45AM</option>
                                        <option>11:00AM</option>
                                        <option>11:15AM</option>
                                        <option>11:30AM</option>
                                        <option>11:45AM</option>
                                        <option>12:00PM</option>
                                        <option>12:15PM</option>
                                        <option>12:30PM</option>
                                        <option>12:45PM</option>
                                        <option>1:00PM</option>
                                        <option>1:15PM</option>
                                        <option>1:30PM</option>
                                        <option>1:45PM</option>
                                        <option>2:00PM</option>
                                        <option>2:15PM</option>
                                        <option>2:30PM</option>
                                        <option>2:45PM</option>
                                        <option>3:00PM</option>
                                        <option>3:15PM</option>
                                        <option>3:30PM</option>
                                        <option>3:45PM</option>
                                        <option>4:00PM</option>
                                        <option>4:15PM</option>
                                        <option>4:30PM</option>
                                        <option>4:45PM</option>
                                        <option>5:00PM</option>
                                        <option>5:15PM</option>
                                        <option>5:30PM</option>
                                        <option>5:45PM</option>
                                        <option>6:00PM</option>
                                        <option>6:15PM</option>
                                        <option>6:30PM</option>
                                        <option>6:45PM</option>
                                        <option>7:00PM</option>
                                        <option>7:15PM</option>
                                        <option>7:30PM</option>
                                        <option>7:45PM</option>
                                        <option>8:00PM</option>
                                        <option>8:15PM</option>
                                        <option>8:30PM</option>
                                        <option>8:45PM</option>
                                        <option>9:00PM</option>
                                        <option>9:15PM</option>
                                        <option>9:30PM</option>
                                        <option>9:45PM</option>
                                        <option>10:00PM</option>
                                        <option>10:15PM</option>
                                        <option>10:30PM</option>
                                        <option>10:45PM</option>
                                        <option>11:00PM</option>
                                        <option>11:15PM</option>
                                        <option>11:30PM</option>
                                        <option>11:45PM</option>
                                      </select>
                                    </div>
                                    
                                  </div>
                                </div>

<div class="flex sm:grid sm:grid-cols-7 items-center gap-1 sm:gap-2">
                                  <div class="w-full sm:col-span-3">
                                    
                                    <div class="hs-dropdown [--strategy:absolute] [--auto-close:inside] relative inline-flex w-full">
                                      <button id="hs-pro-cremd1" type="button" class="py-1 sm:py-1.5 px-2 group inline-flex items-center gap-x-1 w-full text-start sm:text-[13px] rounded-md bg-layer border border-transparent text-layer-foreground hover:border-layer-line disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus hover:focus:border-transparent" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                        Thu, Jan 2024
                                        <svg class="shrink-0 size-3.5 ms-auto text-muted-foreground opacity-0 group-hover:opacity-100 group-focus:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
                                      </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-56 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-cremd1">
                                        
                                        <div class="p-2 grid gap-y-0.5">
                                          <div class="w-52 ">
                                            
                                            <div class="flex justify-between items-center gap-1 mb-1">
                                              <span class="ps-1.5 block text-xs font-medium text-muted-foreground-1">January 2026</span>

<div class="flex mb-1.5">
                                              <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
                                                Mo
                                              </span>
                                              <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
                                                Tu
                                              </span>
                                              <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
                                                We
                                              </span>
                                              <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
                                                Th
                                              </span>
                                              <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
                                                Fr
                                              </span>
                                              <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
                                                Sa
                                              </span>
                                              <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
                                                Su
                                              </span>
                                            </div>

<div class="flex">
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  1
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  2
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  3
                                                  <span class="absolute bottom-0.5 inset-s-1/2 size-1 bg-primary rounded-full -translate-x-1/2"></span>
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  4
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  5
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  6
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  7
                                                </button>
                                              </div>
                                            </div>

<div class="flex">
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  8
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  9
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  10
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  11
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-primary-line bg-primary text-xs font-medium text-primary-foreground hover:border-primary rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus">
                                                  12
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  13
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  14
                                                </button>
                                              </div>
                                            </div>

<div class="flex">
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  15
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  16
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  17
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  18
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  19
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  20
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  21
                                                </button>
                                              </div>
                                            </div>

<div class="flex">
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  22
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  23
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  24
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  25
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  26
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  27
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  28
                                                </button>
                                              </div>
                                            </div>

<div class="flex">
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  29
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  30
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  31
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  1
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  2
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  3
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  4
                                                </button>
                                              </div>
                                            </div>

<div class="flex">
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  5
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  6
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  7
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  8
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  9
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  10
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  11
                                                </button>
                                              </div>
                                            </div>
                                            
                                          </div>

</div>
                                        
                                      </div>
                                      
                                    </div>
                                    
                                  </div>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-56 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-cremd2">
                                        
                                        <div class="p-2 grid gap-y-0.5">
                                          <div class="w-52 ">
                                            
                                            <div class="flex justify-between items-center gap-1 mb-1">
                                              <span class="ps-1.5 block text-xs font-medium text-muted-foreground-1">January 2026</span>

<div class="flex mb-1.5">
                                              <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
                                                Mo
                                              </span>
                                              <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
                                                Tu
                                              </span>
                                              <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
                                                We
                                              </span>
                                              <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
                                                Th
                                              </span>
                                              <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
                                                Fr
                                              </span>
                                              <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
                                                Sa
                                              </span>
                                              <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
                                                Su
                                              </span>
                                            </div>

<div class="flex">
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  1
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  2
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  3
                                                  <span class="absolute bottom-0.5 inset-s-1/2 size-1 bg-primary rounded-full -translate-x-1/2"></span>
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  4
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  5
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  6
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  7
                                                </button>
                                              </div>
                                            </div>

<div class="flex">
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  8
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  9
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  10
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  11
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-primary-line bg-primary text-xs font-medium text-primary-foreground hover:border-primary rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus">
                                                  12
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  13
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  14
                                                </button>
                                              </div>
                                            </div>

<div class="flex">
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  15
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  16
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  17
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  18
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  19
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  20
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  21
                                                </button>
                                              </div>
                                            </div>

<div class="flex">
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  22
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  23
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  24
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  25
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  26
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  27
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  28
                                                </button>
                                              </div>
                                            </div>

<div class="flex">
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  29
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  30
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  31
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  1
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  2
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  3
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  4
                                                </button>
                                              </div>
                                            </div>

<div class="flex">
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  5
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  6
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  7
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  8
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  9
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  10
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  11
                                                </button>
                                              </div>
                                            </div>
                                            
                                          </div>

</div>
                                        
                                      </div>
                                      
                                    </div>
                                    
                                  </div>
                                </div>
                                
        
                                
                                <div class="flex sm:grid sm:grid-cols-7 items-center gap-1 sm:gap-2">
                                  <div class="w-full sm:col-span-3">
                                    
                                    <div class="flex items-center gap-x-2 ms-2.5">
                                      <label for="hs-pro-crcemad" class="flex items-center gap-x-1 sm:text-[13px] text-nowrap text-foreground">All-Day:</label>
                                      <label for="hs-pro-crcemad" class="relative inline-block w-9 h-5 cursor-pointer">
                                        <input type="checkbox" id="hs-pro-crcemad" class="peer sr-only">
                                        <span class="absolute inset-0 bg-surface-1 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                                        <span class="absolute top-1/2 inset-s-0.5 -translate-y-1/2 size-4 bg-switch rounded-full shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                                      </label>
                                    </div>
                                    
                                  </div>

<div class="w-full sm:col-span-3">
                                    
                                    <div class="hs-dropdown [--strategy:absolute] relative inline-flex w-full">
                                      <button id="hs-pro-crcemdid" type="button" class="py-1 sm:py-1.5 px-2 group inline-flex items-center gap-x-1 w-full text-start sm:text-[13px] rounded-md bg-layer border border-transparent text-layer-foreground hover:border-layer-line hover:focus:border-transparent disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                        Do not repeat
                                        <svg class="shrink-0 size-3.5 ms-auto text-muted-foreground opacity-0 group-hover:opacity-100 group-focus:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
                                      </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-full transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-crcemdid">
                                        <div class="p-1 space-y-0.5">
                                          
                                          <label for="hs-pro-crcemd1" class="py-1 px-2 group flex gap-x-1.5 rounded-md cursor-pointer text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover">
                                            <input type="radio" class="hidden" id="hs-pro-crcemd1" name="hs-pro-crcemd" checked>
                                            Do not repeat
                                            <svg class="shrink-0 size-3.5 mt-[3px] ms-auto opacity-0 group-has-checked:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                          </label>

<label for="hs-pro-crcemd2" class="py-1 px-2 group flex gap-x-1.5 rounded-md cursor-pointer text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover">
                                            <input type="radio" class="hidden" id="hs-pro-crcemd2" name="hs-pro-crcemd">
                                            Every Day
                                            <svg class="shrink-0 size-3.5 mt-[3px] ms-auto opacity-0 group-has-checked:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                          </label>

<label for="hs-pro-crcemd3" class="py-1 px-2 group flex gap-x-1.5 rounded-md cursor-pointer text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover">
                                            <input type="radio" class="hidden" id="hs-pro-crcemd3" name="hs-pro-crcemd">
                                            Every Week
                                            <svg class="shrink-0 size-3.5 mt-[3px] ms-auto opacity-0 group-has-checked:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                          </label>

<label for="hs-pro-crcemd4" class="py-1 px-2 group flex gap-x-1.5 rounded-md cursor-pointer text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover">
                                            <input type="radio" class="hidden" id="hs-pro-crcemd4" name="hs-pro-crcemd">
                                            Every Year
                                            <svg class="shrink-0 size-3.5 mt-[3px] ms-auto opacity-0 group-has-checked:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                          </label>
                                          
                                        </div>

<div class="p-1 border-t border-dropdown-footer">
                                          <button type="button" class="flex items-center gap-x-1.5 w-full py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" data-hs-overlay="#hs-pro-clcre" data-hs-overlay-options='{
                                            "isClosePrev": false
                                          }'>
                                            Custom
                                          </button>
                                        </div>
                                      </div>
                                      
                                    </div>
                                    
                                  </div>
                                </div>
                                
                              </div>
                            </div>

<div class="col-span-1">
                              <label for="hs-pro-crcemtz" class="mt-[17px] flex justify-center items-center gap-x-1 text-[13px] text-muted-foreground">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></svg>
                                <span class="sr-only">Time Zone:</span>
                              </label>
                            </div>
                            <div class="col-span-11 relative pt-2 before:ms-2 before:absolute before:top-0 before:inset-x-0 before:w-[calc(100%-8px)] before:border-t before:border-line-1">
                              <input id="hs-pro-crcemtz" type="text" class="py-1 sm:py-1.5 px-2 block w-full bg-layer border-transparent rounded-md sm:text-[13px] text-layer-foreground leading-5 hover:border-layer-line text-foreground placeholder:text-muted-foreground disabled:opacity-50 disabled:pointer-events-none focus:bg-muted-focus focus:border-transparent focus:ring-transparent" placeholder="Time Zone" value="London (GMT+0)">
                            </div>

<div class="col-span-1">
                              <label for="hs-pro-crcemg" class="mt-[17px] flex justify-center items-center gap-x-1 text-[13px] text-muted-foreground">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
                                <span class="sr-only">Participants:</span>
                              </label>
                            </div>
                            <div class="col-span-11 relative pt-2 before:ms-2 before:absolute before:top-0 before:inset-x-0 before:w-[calc(100%-8px)] before:border-t before:border-line-1">
                              <input id="hs-pro-crcemg" type="text" class="py-1 sm:py-1.5 px-2 block w-full bg-layer border-transparent rounded-md sm:text-[13px] text-layer-foreground leading-5 hover:border-layer-line text-foreground placeholder:text-muted-foreground disabled:opacity-50 disabled:pointer-events-none focus:bg-muted-focus focus:border-transparent focus:ring-transparent" placeholder="Add Participants">
                            </div>

<div class="col-span-1">
                              <label class="mt-[17px] flex justify-center items-center gap-x-1 text-[13px] text-muted-foreground">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m22 8-6 4 6 4V8Z"/><rect width="14" height="12" x="2" y="6" rx="2" ry="2"/></svg>
                                <span class="sr-only">Video Conferencing:</span>
                              </label>
                            </div>
                            <div class="col-span-11 relative pt-2 before:ms-2 before:absolute before:top-0 before:inset-x-0 before:w-[calc(100%-8px)] before:border-t before:border-line-1">
                              <button type="button" class="group flex flex-wrap items-center gap-x-2 w-full p-1 ps-2  pe-1 min-h-8.5 rounded-lg sm:text-[13px] text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="192" height="192" viewBox="0 0 192 192"><path fill="none" d="M0 0h192v192H0z"/><path fill="#00832D" d="M108 96l17.06 19.5L148 130.16l4-34.03-4-33.28-23.38 12.88z"/><path fill="#0066DA" d="M9 127v29c0 6.63 5.37 12 12 12h29l6-21.92L50 127l-19.9-6L9 127z"/><path fill="#E94235" d="M50 24L9 65l21.1 6L50 65l5.9-18.83z"/><path fill="#2684FC" d="M9 65h41v62H9z"/><path fill="#00AC47" d="M174.19 41.36L148 62.85v67.31l26.3 21.57c3.94 3.08 9.7.27 9.7-4.73V46c0-5.07-5.89-7.85-9.81-4.64zM108 96v31H50v41h86c6.63 0 12-5.37 12-12v-25.84L108 96z"/><path fill="#FFBA00" d="M136 24H50v41h58v31l40-33.15V36c0-6.63-5.37-12-12-12z"/></svg>
                                Google Meet
                              </button>
                              <button type="button" class="flex flex-wrap items-center gap-x-2 w-full p-1 ps-2  pe-1 min-h-8.5 rounded-lg sm:text-[13px] text-muted-foreground-2 hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                <svg class="shrink-0 size-4" width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
                                  <path d="M435.2 0H76.8C34.3845 0 0 34.3845 0 76.8V435.2C0 477.615 34.3845 512 76.8 512H435.2C477.615 512 512 477.615 512 435.2V76.8C512 34.3845 477.615 0 435.2 0Z" fill="#2D8CFF"/>
                                  <path d="M428 357C436 359 443 355 447 349C449 346 449 341 449 330V179C449 168 449 164 447 160C444 152 436 149 428 152C407 166 361 207 360 224C359.2 227 359.2 232 359.2 239V277C359.2 285 359.2 288 360 292C361 300 364 307 368 311C380 320 420 356 429 356L428 357ZM64 187C64 172 64 164 67 160C69 156 75 152 78 149C82 146 89 146 105 146H234C272 146 291 146 306 154C317 162 329 169 336 184C344 199 344 218 344 256V324C344 339 344 347 341 351C339 355 333 359 330 362C326 365 319 365 303 365H174C136 365 117 365 102 357C91 349 79 342 72 327C64 312 64 293 64 255V187Z" fill="white"/>
                                </svg>
                                Zoom
                                <span class="ms-auto py-1 px-1.5 text-xs rounded-md bg-layer border border-layer-line text-layer-foreground shadow-2xs">
                                  Connect
                                </span>
                              </button>
                            </div>

<div class="col-span-1">
                              <label for="hs-create-event-location-autoheight-textarea" class="mt-[17px] flex justify-center items-center gap-x-1 text-[13px] text-muted-foreground">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg>
                                <span class="sr-only">Location:</span>
                              </label>
                            </div>
                            <div class="col-span-11 relative pt-2 before:ms-2 before:absolute before:top-0 before:inset-x-0 before:w-[calc(100%-8px)] before:border-t before:border-line-1">
                              <textarea id="hs-create-event-location-autoheight-textarea" class="py-1 sm:py-1.5 px-2 block w-full bg-layer border-transparent rounded-md sm:text-[13px] text-layer-foreground leading-5 hover:border-layer-line text-foreground placeholder:text-muted-foreground disabled:opacity-50 disabled:pointer-events-none focus:bg-muted-focus focus:border-transparent focus:ring-transparent" rows="1" placeholder="Add Location" data-hs-textarea-auto-height></textarea>
                            </div>

<button type="button" class="hs-collapse-toggle hs-collapse-open:hidden group col-span-full w-full text-start focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-crcem-add-description-url-attachments-collapse" aria-expanded="false" aria-controls="hs-pro-crcem-add-description-url-attachments" data-hs-collapse="#hs-pro-crcem-add-description-url-attachments">
                              <span class="grid grid-cols-12 gap-2">
                                <span class="col-span-1">
                                  <span class="mt-[17px] flex justify-center items-center gap-x-1 text-[13px] text-muted-foreground">
                                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="21" x2="3" y1="6" y2="6"/><line x1="15" x2="3" y1="12" y2="12"/><line x1="17" x2="3" y1="18" y2="18"/></svg>
                                  </span>
                                </span>
                                <span class="col-span-11 relative pt-2 before:ms-2 before:absolute before:top-0 before:inset-x-0 before:w-[calc(100%-8px)] before:border-t before:border-line-1">
                                  <span class="py-1 sm:py-1.5 px-2 block w-full rounded-lg sm:text-[13px] text-foreground border border-transparent group-hover:bg-muted-hover group-focus:bg-muted-focus">
                                    Add description, URL, or Attachments
                                  </span>
                                </span>
                              </span>
                            </button>

<div id="hs-pro-crcem-add-description-url-attachments" class="hs-collapse hidden col-span-full w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-pro-crcem-add-description-url-attachments-collapse" role="region">
                              <div class="grid grid-cols-12 gap-2">
                                
                                <div class="col-span-1">
                                  <label for="hs-create-event-description-autoheight-textarea" class="mt-[17px] flex justify-center items-center gap-x-1 text-[13px] text-muted-foreground">
                                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="21" x2="3" y1="6" y2="6"/><line x1="15" x2="3" y1="12" y2="12"/><line x1="17" x2="3" y1="18" y2="18"/></svg>
                                    <span class="sr-only">Description:</span>
                                  </label>
                                </div>
                                <div class="col-span-11 relative pt-2 before:ms-2 before:absolute before:top-0 before:inset-x-0 before:w-[calc(100%-8px)] before:border-t before:border-line-1">
                                  <textarea id="hs-create-event-description-autoheight-textarea" class="py-1 sm:py-1.5 px-2 block w-full bg-layer border-transparent rounded-md sm:text-[13px] hover:border-layer-line text-foreground placeholder:text-muted-foreground resize-none disabled:opacity-50 disabled:pointer-events-none focus:bg-muted-focus focus:border-transparent focus:ring-transparent" rows="1" placeholder="Add Description" data-hs-textarea-auto-height></textarea>
                                </div>

<div class="col-span-1">
                                  <label for="hs-pro-crcemurl" class="mt-[17px] flex justify-center items-center gap-x-1 text-[13px] text-muted-foreground">
                                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
                                    <span class="sr-only">URL:</span>
                                  </label>
                                </div>
                                <div class="col-span-11 relative pt-2 before:ms-2 before:absolute before:top-0 before:inset-x-0 before:w-[calc(100%-8px)] before:border-t before:border-line-1">
                                  <input id="hs-pro-crcemurl" type="text" class="py-1 sm:py-1.5 px-2 block w-full bg-layer border-transparent rounded-md sm:text-[13px] text-layer-foreground leading-5 hover:border-layer-line text-foreground placeholder:text-muted-foreground disabled:opacity-50 disabled:pointer-events-none focus:bg-muted-focus focus:border-transparent focus:ring-transparent" placeholder="Add URL" >
                                </div>

<label for="hs-pro-crcema1" class="py-1 px-2 group flex items-center gap-x-2 rounded-md cursor-pointer text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover">
                                            <input type="radio" class="shrink-0 size-3.5 bg-transparent border-line-3 rounded-full shadow-2xs text-teal-600 focus:ring-0 focus:ring-offset-0 checked:bg-teal-600 checked:border-teal-600 disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-crcema1" name="hs-pro-crcema" checked>
                                            James Collins
                                            <svg class="shrink-0 size-3.5 mt-[3px] ms-auto opacity-0 group-has-checked:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                          </label>

<label for="hs-pro-crcema2" class="py-1 px-2 group flex items-center gap-x-2 rounded-md cursor-pointer text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover">
                                            <input type="radio" class="shrink-0 size-3.5 bg-transparent border-line-3 rounded-full shadow-2xs text-sky-500 focus:ring-0 focus:ring-offset-0 checked:bg-sky-500 checked:border-sky-500 disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-crcema2" name="hs-pro-crcema">
                                            Preline tasks
                                            <svg class="shrink-0 size-3.5 mt-[3px] ms-auto opacity-0 group-has-checked:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                          </label>

<label for="hs-pro-crcema3" class="py-1 px-2 group flex items-center gap-x-2 rounded-md cursor-pointer text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover">
                                            <input type="radio" class="shrink-0 size-3.5 bg-transparent border-line-3 rounded-full shadow-2xs text-purple-500 focus:ring-0 focus:ring-offset-0 checked:bg-purple-500 checked:border-purple-500 disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-crcema3" name="hs-pro-crcema">
                                            Performance Tasks
                                            <svg class="shrink-0 size-3.5 mt-[3px] ms-auto opacity-0 group-has-checked:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                          </label>
                                          
                                        </div>

<div class="p-1 space-y-0.5">
                                          <span class="ms-2 text-xs text-muted-foreground-1">
                                            collinsjames@gmail.com
                                          </span>

<label for="hs-pro-crcema4" class="py-1 px-2 group flex items-center gap-x-2 rounded-md cursor-pointer text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover">
                                            <input type="radio" class="shrink-0 size-3.5 bg-transparent border-line-3 rounded-full shadow-2xs text-pink-500 focus:ring-0 focus:ring-offset-0 checked:bg-pink-500 checked:border-pink-500 disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-crcema4" name="hs-pro-erema">
                                            Holidays
                                            <svg class="shrink-0 size-3.5 mt-[3px] ms-auto opacity-0 group-has-checked:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                          </label>
                                          
                                        </div>
                                      </div>
                                      
                                    </div>
                                    
                                  </div>

<div class="hs-dropdown [--strategy:absolute] [--placement:top-right] relative inline-flex">
                                    <button id="@@dropdownEventColorID" type="button" class="py-1 sm:py-1.5 px-2 group inline-flex items-center gap-x-1 min-h-8.5 text-start sm:text-[13px] rounded-md bg-layer border border-transparent text-layer-foreground hover:border-layer-line hover:focus:border-transparent disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                      <span class="shrink-0 size-3 bg-green-600 rounded-full dark:bg-green-500"></span>
                                      <svg class="shrink-0 size-3.5 ms-auto text-muted-foreground opacity-0 group-hover:opacity-100 group-focus:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
                                    </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-32 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="@@dropdownEventColorID">
                                      <div class="p-1 space-y-0.5">
                                        <span class="ms-2 text-xs text-muted-foreground-1">
                                          Event color
                                        </span>

<label for="hs-pro-crcemaec1" class="py-1 px-2 group flex gap-x-2 rounded-md cursor-pointer text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover">
                                          <input type="radio" class="shrink-0 border-line-2 size-3.5 mt-[3px] rounded-sm border-transparent bg-red-600 cursor-pointer focus:ring-0 focus:ring-offset-0 focus:text-red-600 focus:bg-red-600 checked:bg-red-600 checked:bg-none checked:hover:bg-red-600 dark:bg-red-500 dark:focus:text-red-500 dark:checked:hover:bg-red-500" id="hs-pro-crcemaec1" name="hs-pro-crcemaec">
                                          Red
                                          <svg class="shrink-0 size-3.5 mt-[3px] ms-auto opacity-0 group-has-checked:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                        </label>

<label for="hs-pro-crcemaec2" class="py-1 px-2 group flex gap-x-2 rounded-md cursor-pointer text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover">
                                          <input type="radio" class="shrink-0 border-line-2 size-3.5 mt-[3px] rounded-sm border-transparent bg-orange-600 cursor-pointer focus:ring-0 focus:ring-offset-0 focus:text-orange-600 focus:bg-orange-600 checked:bg-orange-600 checked:bg-none checked:hover:bg-orange-600 dark:bg-orange-500 dark:focus:text-orange-500 dark:checked:hover:bg-orange-500" id="hs-pro-crcemaec2" name="hs-pro-crcemaec">
                                          Orange
                                          <svg class="shrink-0 size-3.5 mt-[3px] ms-auto opacity-0 group-has-checked:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                        </label>

<label for="hs-pro-crcemaec3" class="py-1 px-2 group flex gap-x-2 rounded-md cursor-pointer text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover">
                                          <input type="radio" class="shrink-0 border-line-2 size-3.5 mt-[3px] rounded-sm border-transparent bg-yellow-400 cursor-pointer focus:ring-0 focus:ring-offset-0 focus:text-yellow-400 focus:bg-yellow-400 checked:bg-yellow-400 checked:bg-none checked:hover:bg-yellow-400 dark:bg-yellow-500 dark:focus:text-yellow-500 dark:checked:hover:bg-yellow-500" id="hs-pro-crcemaec3" name="hs-pro-crcemaec">
                                          Yellow
                                          <svg class="shrink-0 size-3.5 mt-[3px] ms-auto opacity-0 group-has-checked:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                        </label>

<label for="hs-pro-crcemaec4" class="py-1 px-2 group flex gap-x-2 rounded-md cursor-pointer text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover">
                                          <input type="radio" class="shrink-0 border-line-2 size-3.5 mt-[3px] rounded-sm border-transparent bg-green-600 cursor-pointer focus:ring-0 focus:ring-offset-0 focus:text-green-600 focus:bg-green-600 checked:bg-green-600 checked:bg-none checked:hover:bg-green-600 dark:bg-green-500 dark:focus:text-green-500 dark:checked:hover:bg-green-500" id="hs-pro-crcemaec4" name="hs-pro-crcemaec" checked>
                                          Green
                                          <svg class="shrink-0 size-3.5 mt-[3px] ms-auto opacity-0 group-has-checked:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                        </label>

<label for="hs-pro-crcemaec5" class="py-1 px-2 group flex gap-x-2 rounded-md cursor-pointer text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover">
                                          <input type="radio" class="shrink-0 border-line-2 size-3.5 mt-[3px] rounded-sm border-transparent bg-sky-600 cursor-pointer focus:ring-0 focus:ring-offset-0 focus:text-sky-600 focus:bg-sky-600 checked:bg-sky-600 checked:bg-none checked:hover:bg-sky-600 dark:bg-sky-500 dark:focus:text-sky-500 dark:checked:hover:bg-sky-500" id="hs-pro-crcemaec5" name="hs-pro-crcemaec">
                                          Blue
                                          <svg class="shrink-0 size-3.5 mt-[3px] ms-auto opacity-0 group-has-checked:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                        </label>

<label for="hs-pro-crcemaec6" class="py-1 px-2 group flex gap-x-2 rounded-md cursor-pointer text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover">
                                          <input type="radio" class="shrink-0 border-line-2 size-3.5 mt-[3px] rounded-sm border-transparent bg-pink-600 cursor-pointer focus:ring-0 focus:ring-offset-0 focus:text-pink-600 focus:bg-pink-600 checked:bg-pink-600 checked:bg-none checked:hover:bg-pink-600 dark:bg-pink-500 dark:focus:text-pink-500 dark:checked:hover:bg-pink-500" id="hs-pro-crcemaec6" name="hs-pro-crcemaec">
                                          Pink
                                          <svg class="shrink-0 size-3.5 mt-[3px] ms-auto opacity-0 group-has-checked:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                        </label>

<label for="hs-pro-crcemaec7" class="py-1 px-2 group flex gap-x-2 rounded-md cursor-pointer text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover">
                                          <input type="radio" class="shrink-0 border-line-2 size-3.5 mt-[3px] rounded-sm border-transparent bg-surface-2 cursor-pointer focus:ring-0 focus:ring-offset-0 ocus:bg-surface-2 checked:bg-surface-2 checked:bg-none checked:hover:bg-surface-2" id="hs-pro-crcemaec7" name="hs-pro-crcemaec">
                                          Gray
                                          <svg class="shrink-0 size-3.5 mt-[3px] ms-auto opacity-0 group-has-checked:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                        </label>
                                        
                                      </div>
                                    </div>
                                    
                                  </div>
                                  
                                </div>

<div class="grid grid-cols-2 items-center gap-x-2">
                                  
                                  <div class="relative group">
                                    <select data-hs-select='{
                                        "placeholder": "Availability",
                                        "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                                        "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-1 sm:py-1.5 ps-2 pe-7 w-full flex gap-x-2 text-nowrap text-foreground cursor-pointer bg-layer border border-transparent rounded-md text-start sm:text-[13px] hover:border-layer-line hover:focus:border-transparent focus:outline-hidden focus:bg-muted-focus",
                                        "dropdownClasses": "mt-2 z-50 w-full max-h-60 p-1 space-y-0.5 overflow-hidden overflow-y-auto bg-select border border-select-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                                        "optionClasses": "hs-selected:bg-select-item-active py-1 px-3 w-full text-[13px] text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-md focus:outline-hidden focus:bg-select-item-focus",
                                        "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>",
                                        "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2.5 -translate-y-1/2 opacity-0 group-hover:opacity-100 group-focus:opacity-100\"><svg class=\"shrink-0 size-3.5 text-muted-foreground\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"/></svg></div>",
                                        "viewport": "#hs-modal-create-event"
                                      }' class="hidden">
                                      <option value="">Choose</option>
                                      <option selected>Busy</option>
                                      <option>Free</option>
                                    </select>
                                  </div>

<div class="relative group">
                                    <select data-hs-select='{
                                        "placeholder": "Visibility",
                                        "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                                        "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-1 sm:py-1.5 ps-2 pe-7 w-full flex gap-x-2 text-nowrap text-foreground cursor-pointer bg-layer border border-transparent rounded-md text-start sm:text-[13px] hover:border-layer-line hover:focus:border-transparent focus:outline-hidden focus:bg-muted-focus",
                                        "dropdownClasses": "mt-2 z-50 w-full max-h-60 p-1 space-y-0.5 overflow-hidden overflow-y-auto bg-select border border-select-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                                        "optionClasses": "hs-selected:bg-select-item-active py-1 px-3 w-full text-[13px] text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-md focus:outline-hidden focus:bg-select-item-focus",
                                        "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>",
                                        "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2.5 -translate-y-1/2 opacity-0 group-hover:opacity-100 group-focus:opacity-100\"><svg class=\"shrink-0 size-3.5 text-muted-foreground\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"/></svg></div>",
                                        "viewport": "#hs-modal-create-event"
                                      }' class="hidden">
                                      <option value="">Choose</option>
                                      <option selected>Default visibility</option>
                                      <option>Private</option>
                                      <option>Public</option>
                                    </select>
                                  </div>
                                  
                                </div>
                                
                              </div>
                            </div>

<div class="col-span-1">
                              <label class="mt-[17px] flex justify-center items-center gap-x-1 text-[13px] text-muted-foreground">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>
                                <span class="sr-only">Reminders:</span>
                              </label>
                            </div>
                            <div class="col-span-11 relative pt-2 before:ms-2 before:absolute before:top-0 before:inset-x-0 before:w-[calc(100%-8px)] before:border-t before:border-line-1">
                              
                              <div class="relative group">
                                <select data-hs-select='{
                                    "placeholder": "Reminders",
                                    "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                                    "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-1 sm:py-1.5 ps-2 pe-7 w-full flex gap-x-2 text-nowrap text-foreground cursor-pointer bg-layer border border-transparent rounded-md text-start sm:text-[13px] hover:border-layer-line hover:focus:border-transparent focus:outline-hidden focus:bg-muted-focus",
                                    "dropdownClasses": "mt-2 z-50 w-full max-h-60 p-1 space-y-0.5 overflow-hidden overflow-y-auto bg-select border border-select-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                                    "optionClasses": "hs-selected:bg-select-item-active py-1 px-3 w-full text-[13px] text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-md focus:outline-hidden focus:bg-select-item-focus",
                                    "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>",
                                    "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2.5 -translate-y-1/2 opacity-0 group-hover:opacity-100 group-focus:opacity-100\"><svg class=\"shrink-0 size-3.5 text-muted-foreground\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"/></svg></div>",
                                    "viewport": "#hs-modal-create-event"
                                  }' class="hidden">
                                  <option value="">Choose</option>
                                  <option>At the start of event</option>
                                  <option>5 min before</option>
                                  <option>10 min before</option>
                                  <option selected>30 min before</option>
                                  <option>1 hour before</option>
                                </select>
                              </div>
                              
                            </div>
                            
                          </div>
                          
                        </div>
                      </div>

<div class="mt-auto py-2 px-4 border-t border-overlay-footer">
                        <div class="flex-1 flex justify-end items-center gap-2">
                          <button type="button" class="py-2 px-3 text-nowrap inline-flex justify-center items-center text-start whitespace-nowrap bg-layer border border-layer-line text-layer-foreground text-sm font-medium rounded-lg shadow-2xs align-middle hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none" data-hs-overlay="#hs-pro-cceo">
                            Cancel
                          </button>

<button type="button" class="py-2 px-3 text-nowrap inline-flex justify-center items-center gap-x-2 text-start whitespace-nowrap bg-primary border border-primary-line text-primary-foreground text-sm font-medium rounded-lg shadow-2xs align-middle hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus" data-hs-overlay="#hs-pro-cceo">
                            Create event
                          </button>
                        </div>
                      </div>
                      
                    </div>

Edit Event Drawer with Schedule Form Pro

Event editing drawer reuses the same slide-in form with populated scheduling, participants, and event color controls.

Create a responsive UI block named "Edit Event Drawer with Schedule Form" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/productivity/calendar-drawers/#edit-event-drawer-with-schedule-form. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: productivity/calendar-drawers
- Block ID: edit-event-drawer-with-schedule-form
- Source description: Event editing drawer reuses the same slide-in form with populated scheduling, participants, and event color controls.
- Preview iframe: https://preline.co/blocks/productivity/calendar-drawers/iframes/pro/edit-event-drawer-with-schedule-form.html (repo path: blocks/productivity/calendar-drawers/iframes/pro/edit-event-drawer-with-schedule-form.html)
- Source markup reference:
  - partials/pro/calendar-app/offcanvas/calendar-edit-event.html
  - partials/pro/sources/overlay-header.html
  - partials/pro/calendar-app/sources/event.html
  - partials/pro/sources/overlay-footer.html

<div id="hs-pro-cceo" class="hs-overlay hs-overlay-open:translate-x-0
                    translate-x-full transition-all duration-300 transform
                    size-full sm:w-100
                    hidden
                    fixed top-0 inset-e-0 z-80
                    flex flex-col
                    bg-overlay border-s border-overlay-line" role="dialog" tabindex="-1" aria-labelledby="hs-pro-cceo-label">
                      
                      <div class="py-2.5 px-4 flex justify-between items-center border-b border-overlay-divider">
                        <h2 id="hs-pro-cceo-label" class="font-medium text-foreground">
                          Edit event
                        </h2>
                        <button type="button" class="size-8 shrink-0 flex justify-center items-center gap-x-2 rounded-full border border-transparent bg-surface text-foreground hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" aria-label="Close" data-hs-overlay="#hs-pro-cceo">
                          <span class="sr-only">Close</span>
                          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                        </button>
                      </div>

<div id="hs-modal-edit-event" class="overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                        <div class="p-4 space-y-3 overflow-hidden">
                          
                          <div class="grid grid-cols-12 gap-2">
                            
                            <div class="col-span-1">
                              <label for="hs-edit-event-title-autoheight-textarea" class="mt-[11px] flex justify-center items-center gap-x-1 text-[13px] text-muted-foreground">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 7 4 4 20 4 20 7"/><line x1="9" x2="15" y1="20" y2="20"/><line x1="12" x2="12" y1="4" y2="20"/></svg>
                                <span class="sr-only">Title</span>
                              </label>
                            </div>
                            <div class="col-span-11">
                              <textarea id="hs-edit-event-title-autoheight-textarea" class="py-1 sm:py-1.5 px-2 block w-full bg-layer border-transparent rounded-md sm:text-[13px] hover:border-layer-line text-foreground placeholder:text-muted-foreground resize-none disabled:opacity-50 disabled:pointer-events-none focus:bg-muted-focus focus:border-transparent focus:ring-transparent" rows="1" placeholder="Add title" data-hs-textarea-auto-height >Preline Q1 tasks review</textarea>
                            </div>

<div class="col-span-1">
                              <label class="mt-[9px] flex justify-center items-center gap-x-1 text-[13px] text-muted-foreground">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                                <span class="sr-only">Date & Time:</span>
                              </label>
                            </div>
                            <div class="col-span-11">
                              <div class="space-y-1">
                                
                                <div class="flex sm:grid sm:grid-cols-7 items-center gap-1 sm:gap-2">
                                  <div class="w-full sm:col-span-3">
                                    
                                    <div class="relative group">
                                      <select data-hs-select='{
                                          "placeholder": "Start time",
                                          "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                                          "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-1 sm:py-1.5 ps-2 pe-7 w-full flex gap-x-2 text-nowrap text-foreground cursor-pointer bg-layer border border-transparent rounded-md text-start sm:text-[13px] hover:border-layer-line hover:focus:border-transparent focus:outline-hidden focus:bg-muted-focus",
                                          "dropdownClasses": "mt-2 z-50 w-full max-h-40 p-1 space-y-0.5 overflow-hidden overflow-y-auto bg-select border border-select-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                                          "optionClasses": "hs-selected:bg-select-item-active py-1 px-3 w-full text-[13px] text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-md focus:outline-hidden focus:bg-select-item-focus",
                                          "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>",
                                          "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2.5 -translate-y-1/2 opacity-0 group-hover:opacity-100 group-focus:opacity-100\"><svg class=\"shrink-0 size-3.5 text-muted-foreground\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"/></svg></div>"
                                        }' class="hidden">
                                        <option value="">Choose</option>
                                        <option>12:00AM</option>
                                        <option>12:15AM</option>
                                        <option>12:30AM</option>
                                        <option>12:45AM</option>
                                        <option>1:00AM</option>
                                        <option>1:15AM</option>
                                        <option>1:30AM</option>
                                        <option>1:45AM</option>
                                        <option>2:00AM</option>
                                        <option>2:15AM</option>
                                        <option>2:30AM</option>
                                        <option>2:45AM</option>
                                        <option>3:00AM</option>
                                        <option>3:15AM</option>
                                        <option>3:30AM</option>
                                        <option>3:45AM</option>
                                        <option>4:00AM</option>
                                        <option>4:15AM</option>
                                        <option>4:30AM</option>
                                        <option>4:45AM</option>
                                        <option>5:00AM</option>
                                        <option>5:15AM</option>
                                        <option>5:30AM</option>
                                        <option>5:45AM</option>
                                        <option>6:00AM</option>
                                        <option>6:15AM</option>
                                        <option>6:30AM</option>
                                        <option>6:45AM</option>
                                        <option>7:00AM</option>
                                        <option>7:15AM</option>
                                        <option>7:30AM</option>
                                        <option>7:45AM</option>
                                        <option>8:00AM</option>
                                        <option>8:15AM</option>
                                        <option>8:30AM</option>
                                        <option>8:45AM</option>
                                        <option>9:00AM</option>
                                        <option>9:15AM</option>
                                        <option>9:30AM</option>
                                        <option>9:45AM</option>
                                        <option selected>10:00AM</option>
                                        <option>10:15AM</option>
                                        <option>10:30AM</option>
                                        <option>10:45AM</option>
                                        <option>11:00AM</option>
                                        <option>11:15AM</option>
                                        <option>11:30AM</option>
                                        <option>11:45AM</option>
                                        <option>12:00PM</option>
                                        <option>12:15PM</option>
                                        <option>12:30PM</option>
                                        <option>12:45PM</option>
                                        <option>1:00PM</option>
                                        <option>1:15PM</option>
                                        <option>1:30PM</option>
                                        <option>1:45PM</option>
                                        <option>2:00PM</option>
                                        <option>2:15PM</option>
                                        <option>2:30PM</option>
                                        <option>2:45PM</option>
                                        <option>3:00PM</option>
                                        <option>3:15PM</option>
                                        <option>3:30PM</option>
                                        <option>3:45PM</option>
                                        <option>4:00PM</option>
                                        <option>4:15PM</option>
                                        <option>4:30PM</option>
                                        <option>4:45PM</option>
                                        <option>5:00PM</option>
                                        <option>5:15PM</option>
                                        <option>5:30PM</option>
                                        <option>5:45PM</option>
                                        <option>6:00PM</option>
                                        <option>6:15PM</option>
                                        <option>6:30PM</option>
                                        <option>6:45PM</option>
                                        <option>7:00PM</option>
                                        <option>7:15PM</option>
                                        <option>7:30PM</option>
                                        <option>7:45PM</option>
                                        <option>8:00PM</option>
                                        <option>8:15PM</option>
                                        <option>8:30PM</option>
                                        <option>8:45PM</option>
                                        <option>9:00PM</option>
                                        <option>9:15PM</option>
                                        <option>9:30PM</option>
                                        <option>9:45PM</option>
                                        <option>10:00PM</option>
                                        <option>10:15PM</option>
                                        <option>10:30PM</option>
                                        <option>10:45PM</option>
                                        <option>11:00PM</option>
                                        <option>11:15PM</option>
                                        <option>11:30PM</option>
                                        <option>11:45PM</option>
                                      </select>
                                    </div>
                                    
                                  </div>

<div class="w-full sm:col-span-3">
                                    
                                    <div class="relative group">
                                      <select data-hs-select='{
                                          "placeholder": "Start time",
                                          "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                                          "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-1 sm:py-1.5 ps-2 pe-7 w-full flex gap-x-2 text-nowrap text-foreground cursor-pointer bg-layer border border-transparent rounded-md text-start sm:text-[13px] hover:border-layer-line hover:focus:border-transparent focus:outline-hidden focus:bg-muted-focus",
                                          "dropdownClasses": "mt-2 z-50 w-full max-h-40 p-1 space-y-0.5 overflow-hidden overflow-y-auto bg-select border border-select-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                                          "optionClasses": "hs-selected:bg-select-item-active py-1 px-3 w-full text-[13px] text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-md focus:outline-hidden focus:bg-select-item-focus",
                                          "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>",
                                          "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2.5 -translate-y-1/2 opacity-0 group-hover:opacity-100 group-focus:opacity-100\"><svg class=\"shrink-0 size-3.5 text-muted-foreground\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"/></svg></div>"
                                        }' class="hidden">
                                        <option value="">Choose</option>
                                        <option>12:00AM</option>
                                        <option>12:15AM</option>
                                        <option>12:30AM</option>
                                        <option>12:45AM</option>
                                        <option>1:00AM</option>
                                        <option>1:15AM</option>
                                        <option>1:30AM</option>
                                        <option>1:45AM</option>
                                        <option>2:00AM</option>
                                        <option>2:15AM</option>
                                        <option>2:30AM</option>
                                        <option>2:45AM</option>
                                        <option>3:00AM</option>
                                        <option>3:15AM</option>
                                        <option>3:30AM</option>
                                        <option>3:45AM</option>
                                        <option>4:00AM</option>
                                        <option>4:15AM</option>
                                        <option>4:30AM</option>
                                        <option>4:45AM</option>
                                        <option>5:00AM</option>
                                        <option>5:15AM</option>
                                        <option>5:30AM</option>
                                        <option>5:45AM</option>
                                        <option>6:00AM</option>
                                        <option>6:15AM</option>
                                        <option>6:30AM</option>
                                        <option>6:45AM</option>
                                        <option>7:00AM</option>
                                        <option>7:15AM</option>
                                        <option>7:30AM</option>
                                        <option>7:45AM</option>
                                        <option>8:00AM</option>
                                        <option>8:15AM</option>
                                        <option>8:30AM</option>
                                        <option>8:45AM</option>
                                        <option>9:00AM</option>
                                        <option>9:15AM</option>
                                        <option>9:30AM</option>
                                        <option>9:45AM</option>
                                        <option selected>10:00AM</option>
                                        <option>10:15AM</option>
                                        <option>10:30AM</option>
                                        <option>10:45AM</option>
                                        <option>11:00AM</option>
                                        <option>11:15AM</option>
                                        <option>11:30AM</option>
                                        <option>11:45AM</option>
                                        <option>12:00PM</option>
                                        <option>12:15PM</option>
                                        <option>12:30PM</option>
                                        <option>12:45PM</option>
                                        <option>1:00PM</option>
                                        <option>1:15PM</option>
                                        <option>1:30PM</option>
                                        <option>1:45PM</option>
                                        <option>2:00PM</option>
                                        <option>2:15PM</option>
                                        <option>2:30PM</option>
                                        <option>2:45PM</option>
                                        <option>3:00PM</option>
                                        <option>3:15PM</option>
                                        <option>3:30PM</option>
                                        <option>3:45PM</option>
                                        <option>4:00PM</option>
                                        <option>4:15PM</option>
                                        <option>4:30PM</option>
                                        <option>4:45PM</option>
                                        <option>5:00PM</option>
                                        <option>5:15PM</option>
                                        <option>5:30PM</option>
                                        <option>5:45PM</option>
                                        <option>6:00PM</option>
                                        <option>6:15PM</option>
                                        <option>6:30PM</option>
                                        <option>6:45PM</option>
                                        <option>7:00PM</option>
                                        <option>7:15PM</option>
                                        <option>7:30PM</option>
                                        <option>7:45PM</option>
                                        <option>8:00PM</option>
                                        <option>8:15PM</option>
                                        <option>8:30PM</option>
                                        <option>8:45PM</option>
                                        <option>9:00PM</option>
                                        <option>9:15PM</option>
                                        <option>9:30PM</option>
                                        <option>9:45PM</option>
                                        <option>10:00PM</option>
                                        <option>10:15PM</option>
                                        <option>10:30PM</option>
                                        <option>10:45PM</option>
                                        <option>11:00PM</option>
                                        <option>11:15PM</option>
                                        <option>11:30PM</option>
                                        <option>11:45PM</option>
                                      </select>
                                    </div>
                                    
                                  </div>
                                </div>

<div class="flex sm:grid sm:grid-cols-7 items-center gap-1 sm:gap-2">
                                  <div class="w-full sm:col-span-3">
                                    
                                    <div class="hs-dropdown [--strategy:absolute] [--auto-close:inside] relative inline-flex w-full">
                                      <button id="hs-pro-credemd1" type="button" class="py-1 sm:py-1.5 px-2 group inline-flex items-center gap-x-1 w-full text-start sm:text-[13px] rounded-md bg-layer border border-transparent text-layer-foreground hover:border-layer-line disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus hover:focus:border-transparent" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                        Thu, Jan 2024
                                        <svg class="shrink-0 size-3.5 ms-auto text-muted-foreground opacity-0 group-hover:opacity-100 group-focus:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
                                      </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-56 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-credemd1">
                                        
                                        <div class="p-2 grid gap-y-0.5">
                                          <div class="w-52 ">
                                            
                                            <div class="flex justify-between items-center gap-1 mb-1">
                                              <span class="ps-1.5 block text-xs font-medium text-muted-foreground-1">January 2026</span>