<!DOCTYPE html>
<html lang="en" class="relative min-h-full">
<head>
  <!-- Required Meta Tags Always Come First -->
  <meta charset="utf-8">
  <meta name="robots" content="max-snippet:-1, max-image-preview:large, max-video-preview:-1">
  <link rel="canonical" href="https://preline.co/">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="A modern CMS dashboard for managing posts, members, and site content with ease.">

  <meta name="twitter:site" content="@preline">
  <meta name="twitter:creator" content="@preline">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="CMS | Preline Pro | Preline UI, crafted with Tailwind CSS">
  <meta name="twitter:description" content="A modern CMS dashboard for managing posts, members, and site content with ease.">
  <meta name="twitter:image" content="https://preline.co/assets/img/og-image.png">

  <meta property="og:url" content="https://preline.co/">
  <meta property="og:locale" content="en_US">
  <meta property="og:type" content="website">
  <meta property="og:site_name" content="Preline">
  <meta property="og:title" content="CMS | Preline Pro | Preline UI, crafted with Tailwind CSS">
  <meta property="og:description" content="A modern CMS dashboard for managing posts, members, and site content with ease.">
  <meta property="og:image" content="https://preline.co/assets/img/og-image.png">

  <!-- Title -->
  <title>CMS | Preline Pro | Preline UI, crafted with Tailwind CSS</title>

  <!-- Favicon -->
  <link rel="shortcut icon" href="../../favicon.ico">

  <!-- Font -->
  <link href="https://fonts.googleapis.com/css2?family=Domine:wght@400..700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Kode+Mono:wght@400..700&display=swap" rel="stylesheet">

  <!-- Theme Check and Update -->
  <script>
    (function () {
      const html = document.querySelector('html');
      const isLightOrAuto = localStorage.getItem('hs_theme') === 'light' || (localStorage.getItem('hs_theme') === 'auto' && !window.matchMedia('(prefers-color-scheme: dark)').matches);
      const isDarkOrAuto = localStorage.getItem('hs_theme') === 'dark' || (localStorage.getItem('hs_theme') === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches);

      if (isLightOrAuto && html.classList.contains('dark')) html.classList.remove('dark');
      else if (isDarkOrAuto && html.classList.contains('light')) html.classList.remove('light');
      else if (isDarkOrAuto && !html.classList.contains('dark')) html.classList.add('dark');
      else if (isLightOrAuto && !html.classList.contains('light')) html.classList.add('light');
    })();
  </script>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/apexcharts/dist/apexcharts.css">
  <style type="text/css">
    .apexcharts-tooltip.apexcharts-theme-light
    {
      background-color: transparent !important;
      border: none !important;
      box-shadow: none !important;
    }

    .apexcharts-xaxistooltip
    {
      background: var(--color-primary-600) !important;
      border-color: var(--color-primary-600) !important;
    }

    .apexcharts-xaxistooltip:after,
    .apexcharts-xaxistooltip:before
    {
      border-bottom-color: var(--color-primary-600) !important;
    }
  </style>
  <style>
    @keyframes typing
    {
      0%
      {
        opacity: 1;
        scale: 1;
      }

      50%
      {
        opacity: 0.75;
        scale: 0.75;
      }

      100%
      {
        opacity: 1;
        scale: 1;
      }
    }
  </style>

  <!-- CSS Preline -->
  <link rel="stylesheet" href="https://preline.co/assets/css/main.css?v=3.0.1">
</head>

<body class="hs-overlay-body-open overflow-hidden bg-background">
  <!-- ========== HEADER ========== -->
  <header class="fixed top-0 inset-x-0 flex flex-wrap md:justify-start md:flex-nowrap z-48 lg:z-61 w-full bg-navbar-2 text-sm py-2.5">
    <nav class="px-4 sm:px-5.5 flex basis-full items-center w-full mx-auto">
      <div class="w-full flex items-center gap-x-1.5">
        <ul class="flex items-center gap-1.5">
          <li class="inline-flex items-center relative pe-1.5 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:inset-e-0 after:inline-block after:w-px after:h-3.5 after:bg-navbar-2-divider after:rounded-full after:-translate-y-1/2 after:rotate-12">
            <a class="shrink-0 inline-flex justify-center items-center bg-primary size-8 rounded-md text-xl inline-block font-semibold focus:outline-hidden focus:opacity-80" href="index.html" aria-label="Preline">
              <svg class="shrink-0 size-5" width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M18.0835 3.23358C9.88316 3.23358 3.23548 9.8771 3.23548 18.0723V35.5832H0.583496V18.0723C0.583496 8.41337 8.41851 0.583252 18.0835 0.583252C27.7485 0.583252 35.5835 8.41337 35.5835 18.0723C35.5835 27.7312 27.7485 35.5614 18.0835 35.5614H16.7357V32.911H18.0835C26.2838 32.911 32.9315 26.2675 32.9315 18.0723C32.9315 9.8771 26.2838 3.23358 18.0835 3.23358Z" class="fill-primary-foreground" fill="currentColor" />
                <path fill-rule="evenodd" clip-rule="evenodd" d="M18.0833 8.62162C12.8852 8.62162 8.62666 12.9245 8.62666 18.2879V35.5833H5.97468V18.2879C5.97468 11.5105 11.3713 5.97129 18.0833 5.97129C24.7954 5.97129 30.192 11.5105 30.192 18.2879C30.192 25.0653 24.7954 30.6045 18.0833 30.6045H16.7355V27.9542H18.0833C23.2815 27.9542 27.54 23.6513 27.54 18.2879C27.54 12.9245 23.2815 8.62162 18.0833 8.62162Z" class="fill-primary-foreground" fill="currentColor" />
                <path d="M24.8225 18.1012C24.8225 21.8208 21.8053 24.8361 18.0833 24.8361C14.3614 24.8361 11.3442 21.8208 11.3442 18.1012C11.3442 14.3815 14.3614 11.3662 18.0833 11.3662C21.8053 11.3662 24.8225 14.3815 24.8225 18.1012Z" class="fill-primary-foreground" fill="currentColor" />
              </svg>
            </a>

            <div class="hidden sm:block ms-1">
              <!-- Templates Dropdown -->
              <div class="hs-dropdown  relative  [--scope:window] [--auto-close:inside] inline-flex">
                <button id="hs-dropdown-preview-navbar" type="button" class="hs-dropdown-toggle  group relative flex justify-center items-center size-8 text-xs rounded-lg text-foreground hover:bg-surface-hover focus:bg-surface-focus disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                  <span class="">
                    <svg class=" size-4 shrink-0" 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 class="absolute -top-0.5 -inset-e-0.5">
                    <span class="relative flex">
                      <span class="animate-ping absolute inline-flex size-full rounded-[999px] bg-red-400 dark:bg-red-600 opacity-75"></span>
                      <span class="relative inline-flex size-2 bg-red-500 rounded-[999px]"></span>
                      <span class="sr-only">Notification</span>
                    </span>
                  </span>
                </button>

                <!-- Dropdown -->
                <div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-full min-w-90 md:w-125 transition-[opacity,margin] duration opacity-0 hidden z-61 overflow-hidden border border-gray-200 bg-white rounded-[12px] shadow-xl dark:bg-neutral-800 dark:border-neutral-700" role="menu" aria-orientation="vertical" aria-labelledby="hs-dropdown-preview-navbar">
                  <!-- Tab -->
                  <div class="p-3 pb-0 flex flex-wrap justify-between items-center gap-3 border-b border-gray-200 dark:border-neutral-700">
                    <!-- Nav Tab -->
                    <nav class="flex gap-1" aria-label="Tabs" role="tablist" aria-orientation="horizontal">
                      <button type="button" class="hs-tab-active:after:bg-gray-800 hs-tab-active:text-gray-800 px-2 py-1.5 mb-2 relative inline-flex justify-center items-center gap-x-2 hover:bg-gray-100 text-gray-500 hover:text-gray-800 text-sm rounded-[8px] disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-gray-100 after:absolute after:-bottom-2 after:inset-x-2 after:z-10 after:h-0.5 after:pointer-events-none dark:hs-tab-active:text-neutral-200 dark:hs-tab-active:after:bg-neutral-400 dark:text-neutral-500 dark:hover:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden " id="hs-pmn-item-pro" aria-selected="false" data-hs-tab="#hs-pmn-pro" aria-controls="hs-pmn-pro" role="tab">
                        Pro
                      </button>
                      <button type="button" class="hs-tab-active:after:bg-gray-800 hs-tab-active:text-gray-800 px-2 py-1.5 mb-2 relative inline-flex justify-center items-center gap-x-2 hover:bg-gray-100 text-gray-500 hover:text-gray-800 text-sm rounded-[8px] disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-gray-100 after:absolute after:-bottom-2 after:inset-x-2 after:z-10 after:h-0.5 after:pointer-events-none dark:hs-tab-active:text-neutral-200 dark:hs-tab-active:after:bg-neutral-400 dark:text-neutral-500 dark:hover:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden active" id="hs-pmn-item-free" aria-selected="true" data-hs-tab="#hs-pmn-free" aria-controls="hs-pmn-free" role="tab">
                        Free
                      </button>
                      <button type="button" class="hs-tab-active:after:bg-gray-800 hs-tab-active:text-gray-800 px-2 py-1.5 mb-2 relative inline-flex justify-center items-center gap-x-2 hover:bg-gray-100 text-gray-500 hover:text-gray-800 text-sm rounded-[8px] disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-gray-100 after:absolute after:-bottom-2 after:inset-x-2 after:z-10 after:h-0.5 after:pointer-events-none dark:hs-tab-active:text-neutral-200 dark:hs-tab-active:after:bg-neutral-400 dark:text-neutral-500 dark:hover:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden " id="hs-pmn-item-theme" aria-selected="false" data-hs-tab="#hs-pmn-theme" aria-controls="hs-pmn-theme" role="tab">
                        Themes
                        <span class="py-0.5 px-2 inline-flex items-center gap-x-1.5 text-xs font-medium bg-emerald-100 text-emerald-800 rounded-[999px] dark:bg-emerald-900 dark:text-emerald-500">New</span>
                      </button>
                    </nav>
                    <!-- End Nav Tab -->

                    <!-- Switch/Toggle -->
                    <div class="mb-2 flex items-center gap-x-0.5">
                      <button type="button" class="hs-dark-mode hs-dark-mode-active:hidden flex shrink-0 justify-center items-center gap-x-1 text-xs text-gray-500 hover:text-gray-800 focus:outline-hidden focus:text-gray-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" data-hs-theme-click-value="dark">
                        <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 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path>
                        </svg>
                        Switch to Dark
                      </button>
                      <button type="button" class="hs-dark-mode hs-dark-mode-active:flex hidden shrink-0 justify-center items-center gap-x-1 text-xs text-gray-500 hover:text-gray-800 focus:outline-hidden focus:text-gray-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" data-hs-theme-click-value="light">
                        <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="12" cy="12" r="4"></circle>
                          <path d="M12 2v2"></path>
                          <path d="M12 20v2"></path>
                          <path d="m4.93 4.93 1.41 1.41"></path>
                          <path d="m17.66 17.66 1.41 1.41"></path>
                          <path d="M2 12h2"></path>
                          <path d="M20 12h2"></path>
                          <path d="m6.34 17.66-1.41 1.41"></path>
                          <path d="m19.07 4.93-1.41 1.41"></path>
                        </svg>
                        Switch to Light
                      </button>
                    </div>
                    <!-- End Switch/Toggle -->
                  </div>
                  <!-- End Tab -->

                  <!-- Tab Content -->
                  <div id="hs-pmn-pro" class="hidden" role="tabpanel" aria-labelledby="hs-pmn-item-pro">
                    <!-- Header -->
                    <div class="p-3 flex flex-wrap justify-between items-center gap-3">
                      <span class="block font-semibold text-sm text-gray-800 dark:text-neutral-200">Templates (21)</span>
                    </div>
                    <!-- End Header -->

                    <!-- Body -->
                    <div class="px-3 h-64 sm:h-102 overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500">
                      <!-- Grid -->
                      <div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
                        <!-- Link -->
                        <a class="p-3 relative flex flex-col justify-center items-center gap-y-3 rounded-[12px] hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700  transition" href="https://preline.co/pro/dashboard/index.html">
                          <img class="dark:hidden w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews/img1.webp" alt="Main Page">
                          <img class="hidden dark:block w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews-dark/img1.webp" alt="Main Page">

                          <p class="text-sm text-center text-gray-800 dark:text-neutral-400">
                            Dashboard
                          </p>
                        </a>
                        <!-- End Link -->

                        <!-- Link -->
                        <a class="p-3 relative flex flex-col justify-center items-center gap-y-3 rounded-[12px] hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700  transition" href="https://preline.co/pro/cms/index.html">
                          <img class="dark:hidden w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews/img55.webp" alt="Main Page">
                          <img class="hidden dark:block w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews-dark/img55.webp" alt="Main Page">

                          <p class="text-sm text-center text-gray-800 dark:text-neutral-400">
                            CMS
                          </p>
                        </a>
                        <!-- End Link -->

                        <!-- Link -->
                        <a class="p-3 relative flex flex-col justify-center items-center gap-y-3 rounded-[12px] hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700  transition" href="https://preline.co/pro/ai-chat/index.html">
                          <img class="dark:hidden w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews/img58.webp" alt="Main Page">
                          <img class="hidden dark:block w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews-dark/img58.webp" alt="Main Page">

                          <p class="text-sm text-center text-gray-800 dark:text-neutral-400">
                            AI Chat
                          </p>
                        </a>
                        <!-- End Link -->

                        <!-- Link -->
                        <a class="p-3 relative flex flex-col justify-center items-center gap-y-3 rounded-[12px] hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700  transition" href="https://preline.co/pro/video-call/index.html">
                          <img class="dark:hidden w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews/img61.webp" alt="Main Page">
                          <img class="hidden dark:block w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews-dark/img61.webp" alt="Main Page">

                          <p class="text-sm text-center text-gray-800 dark:text-neutral-400">
                            Video Call
                          </p>
                        </a>
                        <!-- End Link -->

                        <!-- Link -->
                        <a class="p-3 relative flex flex-col justify-center items-center gap-y-3 rounded-[12px] hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700  transition" href="https://preline.co/pro/startup/index.html">
                          <img class="dark:hidden w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews/img32.webp" alt="Main Page">
                          <img class="hidden dark:block w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews-dark/img32.webp" alt="Main Page">

                          <p class="text-sm text-center text-gray-800 dark:text-neutral-400">
                            Startup
                          </p>
                        </a>
                        <!-- End Link -->

                        <!-- Link -->
                        <a class="p-3 relative flex flex-col justify-center items-center gap-y-3 rounded-[12px] hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700  transition" href="https://preline.co/pro/payment/index.html">
                          <img class="dark:hidden w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews/img8.webp" alt="Main Page">
                          <img class="hidden dark:block w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews-dark/img8.webp" alt="Main Page">

                          <p class="text-sm text-center text-gray-800 dark:text-neutral-400">
                            Payment
                          </p>
                        </a>
                        <!-- End Link -->

                        <!-- Link -->
                        <a class="p-3 relative flex flex-col justify-center items-center gap-y-3 rounded-[12px] hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700  transition" href="https://preline.co/pro/chat/index.html">
                          <img class="dark:hidden w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews/img16.webp" alt="Main Page">
                          <img class="hidden dark:block w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews-dark/img16.webp" alt="Main Page">

                          <p class="text-sm text-center text-gray-800 dark:text-neutral-400">
                            Chat
                          </p>
                        </a>
                        <!-- End Link -->

                        <!-- Link -->
                        <a class="p-3 relative flex flex-col justify-center items-center gap-y-3 rounded-[12px] hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700  transition" href="https://preline.co/pro/shop/index.html">
                          <img class="dark:hidden w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews/img21.webp" alt="Main Page">
                          <img class="hidden dark:block w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews-dark/img21.webp" alt="Main Page">

                          <p class="text-sm text-center text-gray-800 dark:text-neutral-400">
                            Shop
                          </p>
                        </a>
                        <!-- End Link -->

                        <!-- Link -->
                        <a class="p-3 relative flex flex-col justify-center items-center gap-y-3 rounded-[12px] hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700  transition" href="https://preline.co/pro/ecommerce/index.html">
                          <img class="dark:hidden w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews/img4.webp" alt="Main Page">
                          <img class="hidden dark:block w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews-dark/img4.webp" alt="Main Page">

                          <p class="text-sm text-center text-gray-800 dark:text-neutral-400">
                            E-Commerce
                          </p>
                        </a>
                        <!-- End Link -->

                        <!-- Link -->
                        <a class="p-3 relative flex flex-col justify-center items-center gap-y-3 rounded-[12px] hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700  transition" href="https://preline.co/pro/agency/index.html">
                          <img class="dark:hidden w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews/img46.webp" alt="Main Page">
                          <img class="hidden dark:block w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews-dark/img46.webp" alt="Main Page">

                          <p class="text-sm text-center text-gray-800 dark:text-neutral-400">
                            Agency
                          </p>
                        </a>
                        <!-- End Link -->

                        <!-- Link -->
                        <a class="p-3 relative flex flex-col justify-center items-center gap-y-3 rounded-[12px] hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700  transition" href="https://preline.co/pro/crm/index.html">
                          <img class="dark:hidden w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews/img11.webp" alt="Main Page">
                          <img class="hidden dark:block w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews-dark/img11.webp" alt="Main Page">

                          <p class="text-sm text-center text-gray-800 dark:text-neutral-400">
                            CRM
                          </p>
                        </a>
                        <!-- End Link -->

                        <!-- Link -->
                        <a class="p-3 relative flex flex-col justify-center items-center gap-y-3 rounded-[12px] hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700  transition" href="https://preline.co/pro/workspace/index.html">
                          <img class="dark:hidden w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews/img18.webp" alt="Main Page">
                          <img class="hidden dark:block w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews-dark/img18.webp" alt="Main Page">

                          <p class="text-sm text-center text-gray-800 dark:text-neutral-400">
                            Workspace
                          </p>
                        </a>
                        <!-- End Link -->

                        <!-- Link -->
                        <a class="p-3 relative flex flex-col justify-center items-center gap-y-3 rounded-[12px] hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700  transition" href="https://preline.co/pro/analytics/index.html">
                          <img class="dark:hidden w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews/img9.webp" alt="Main Page">
                          <img class="hidden dark:block w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews-dark/img9.webp" alt="Main Page">

                          <p class="text-sm text-center text-gray-800 dark:text-neutral-400">
                            Analytics
                          </p>
                        </a>
                        <!-- End Link -->

                        <!-- Link -->
                        <a class="p-3 relative flex flex-col justify-center items-center gap-y-3 rounded-[12px] hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700  transition" href="https://preline.co/pro/calendars/day.html">
                          <img class="dark:hidden w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews/img14.webp" alt="Main Page">
                          <img class="hidden dark:block w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews-dark/img14.webp" alt="Main Page">

                          <p class="text-sm text-center text-gray-800 dark:text-neutral-400">
                            Calendars
                          </p>
                        </a>
                        <!-- End Link -->

                        <!-- Link -->
                        <a class="p-3 relative flex flex-col justify-center items-center gap-y-3 rounded-[12px] hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700  transition" href="https://preline.co/pro/smart-home/index.html">
                          <img class="dark:hidden w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews/img35.webp" alt="Main Page">
                          <img class="hidden dark:block w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews-dark/img35.webp" alt="Main Page">

                          <p class="text-sm text-center text-gray-800 dark:text-neutral-400">
                            Smart Home
                          </p>
                        </a>
                        <!-- End Link -->

                        <!-- Link -->
                        <a class="p-3 relative flex flex-col justify-center items-center gap-y-3 rounded-[12px] hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700  transition" href="https://preline.co/pro/coffee-shop/index.html">
                          <img class="dark:hidden w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews/img52.webp" alt="Main Page">
                          <img class="hidden dark:block w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews-dark/img52.webp" alt="Main Page">

                          <p class="text-sm text-center text-gray-800 dark:text-neutral-400">
                            Coffee Shop
                          </p>
                        </a>
                        <!-- End Link -->

                        <!-- Link -->
                        <a class="p-3 relative flex flex-col justify-center items-center gap-y-3 rounded-[12px] hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700  transition" href="https://preline.co/pro/inbox/index.html">
                          <img class="dark:hidden w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews/img26.webp" alt="Main Page">
                          <img class="hidden dark:block w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews-dark/img26.webp" alt="Main Page">

                          <p class="text-sm text-center text-gray-800 dark:text-neutral-400">
                            Inbox
                          </p>
                        </a>
                        <!-- End Link -->

                        <!-- Link -->
                        <a class="p-3 relative flex flex-col justify-center items-center gap-y-3 rounded-[12px] hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700  transition" href="https://preline.co/pro/project/index.html">
                          <img class="dark:hidden w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews/img10.webp" alt="Main Page">
                          <img class="hidden dark:block w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews-dark/img10.webp" alt="Main Page">

                          <p class="text-sm text-center text-gray-800 dark:text-neutral-400">
                            Project
                          </p>
                        </a>
                        <!-- End Link -->

                        <!-- Link -->
                        <a class="p-3 relative flex flex-col justify-center items-center gap-y-3 rounded-[12px] hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700  transition" href="https://preline.co/pro/shop-marketplace/index.html">
                          <img class="dark:hidden w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews/img29.webp" alt="Main Page">
                          <img class="hidden dark:block w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews-dark/img29.webp" alt="Main Page">

                          <p class="text-sm text-center text-gray-800 dark:text-neutral-400">
                            Shop Marketplace
                          </p>
                        </a>
                        <!-- End Link -->

                        <!-- Link -->
                        <a class="p-3 relative flex flex-col justify-center items-center gap-y-3 rounded-[12px] hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700  transition" href="https://preline.co/pro/personal/index.html">
                          <img class="dark:hidden w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews/img49.webp" alt="Main Page">
                          <img class="hidden dark:block w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews-dark/img49.webp" alt="Main Page">

                          <p class="text-sm text-center text-gray-800 dark:text-neutral-400">
                            Personal
                          </p>
                        </a>
                        <!-- End Link -->

                        <!-- Link -->
                        <a class="p-3 relative flex flex-col justify-center items-center gap-y-3 rounded-[12px] hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700  transition" href="https://preline.co/pro/files/index.html">
                          <img class="dark:hidden w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews/img12.webp" alt="Main Page">
                          <img class="hidden dark:block w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews-dark/img12.webp" alt="Main Page">

                          <p class="text-sm text-center text-gray-800 dark:text-neutral-400">
                            Files
                          </p>
                        </a>
                        <!-- End Link -->
                      </div>
                      <!-- End Grid -->
                    </div>
                    <!-- Body -->

                    <!-- Footer -->
                    <div class="p-3">
                      <a class="group p-2 rounded-[6px] flex justify-center items-center gap-x-1 text-[13px] bg-gray-800 text-white hover:bg-gray-900 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-gray-900 dark:bg-white dark:hover:bg-neutral-200 dark:focus:bg-neutral-200 dark:text-neutral-800" href="https://preline.co/pro/pricing.html">
                        Purchase Preline Pro
                        <svg class="hidden md:inline-block shrink-0 size-3.5 group-hover:translate-x-0.5 transition" 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 class="lg:opacity-0 lg:-translate-x-1 lg:group-hover:opacity-100 lg:group-hover:translate-x-0 lg:group-focus:opacity-100 lg:group-focus:translate-x-0 lg:transition" d="M5 12h14" />
                          <path class="lg:-translate-x-1.5 lg:group-hover:translate-x-0 lg:group-focus:translate-x-0 lg:transition" d="m12 5 7 7-7 7" />
                        </svg>
                      </a>
                    </div>
                    <!-- End Footer -->
                  </div>
                  <!-- End Tab Content -->

                  <!-- Tab Content -->
                  <div id="hs-pmn-free" class="" role="tabpanel" aria-labelledby="hs-pmn-item-free">
                    <!-- Header -->
                    <div class="p-3 flex flex-wrap justify-between items-center gap-3">
                      <span class="block font-semibold text-sm text-gray-800 dark:text-neutral-200">Templates (5)</span>
                    </div>
                    <!-- End Header -->

                    <!-- Body -->
                    <div class="px-3 h-64 sm:h-102 overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500">
                      <!-- Grid -->
                      <div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
                        <!-- Link -->
                        <a class="p-3 relative flex flex-col justify-center items-center gap-y-3 rounded-[12px] hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700  transition" href="https://preline.co/templates/agency/index.html">
                          <img class="dark:hidden w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/template-previews/img1.webp" alt="Main Page">
                          <img class="hidden dark:block w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/template-previews-dark/img1.webp" alt="Main Page">

                          <p class="text-sm text-center text-gray-800 dark:text-neutral-400">
                            Agency
                          </p>
                        </a>
                        <!-- End Link -->

                        <!-- Link -->
                        <a class="p-3 relative flex flex-col justify-center items-center gap-y-3 rounded-[12px] hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700  transition" href="https://preline.co/templates/ai-chat/index.html">
                          <img class="dark:hidden w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/template-previews/img4.webp" alt="Main Page">
                          <img class="hidden dark:block w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/template-previews-dark/img4.webp" alt="Main Page">

                          <p class="text-sm text-center text-gray-800 dark:text-neutral-400">
                            AI Chat
                          </p>
                        </a>
                        <!-- End Link -->

                        <!-- Link -->
                        <a class="p-3 relative flex flex-col justify-center items-center gap-y-3 rounded-[12px] hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 bg-gray-100 dark:bg-neutral-700 transition" href="https://preline.co/templates/cms/index.html">
                          <img class="dark:hidden w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/template-previews/img5.webp" alt="Main Page">
                          <img class="hidden dark:block w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/template-previews-dark/img5.webp" alt="Main Page">

                          <p class="text-sm text-center text-gray-800 dark:text-neutral-400">
                            CMS
                          </p>
                        </a>
                        <!-- End Link -->

                        <!-- Link -->
                        <a class="p-3 relative flex flex-col justify-center items-center gap-y-3 rounded-[12px] hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700  transition" href="https://preline.co/templates/coffee-shop/index.html">
                          <img class="dark:hidden w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/template-previews/img2.webp" alt="Main Page">
                          <img class="hidden dark:block w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/template-previews-dark/img2.webp" alt="Main Page">

                          <p class="text-sm text-center text-gray-800 dark:text-neutral-400">
                            Coffee Shop
                          </p>
                        </a>
                        <!-- End Link -->

                        <!-- Link -->
                        <a class="p-3 relative flex flex-col justify-center items-center gap-y-3 rounded-[12px] hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700  transition" href="https://preline.co/templates/personal/index.html">
                          <img class="dark:hidden w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/template-previews/img3.webp" alt="Main Page">
                          <img class="hidden dark:block w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/template-previews-dark/img3.webp" alt="Main Page">

                          <p class="text-sm text-center text-gray-800 dark:text-neutral-400">
                            Personal
                          </p>
                        </a>
                        <!-- End Link -->
                      </div>
                      <!-- End Grid -->
                    </div>
                    <!-- Body -->

                    <!-- Footer -->
                    <div class="p-3">
                      <a class="group p-2 rounded-[6px] flex justify-center items-center gap-x-1 text-[13px] bg-gray-800 text-white hover:bg-gray-900 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-gray-900 dark:bg-white dark:hover:bg-neutral-200 dark:focus:bg-neutral-200 dark:text-neutral-800" href="https://preline.co/templates.html">
                        Free download
                        <svg class="hidden md:inline-block shrink-0 size-3.5 group-hover:translate-x-0.5 transition" 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 class="lg:opacity-0 lg:-translate-x-1 lg:group-hover:opacity-100 lg:group-hover:translate-x-0 lg:group-focus:opacity-100 lg:group-focus:translate-x-0 lg:transition" d="M5 12h14" />
                          <path class="lg:-translate-x-1.5 lg:group-hover:translate-x-0 lg:group-focus:translate-x-0 lg:transition" d="m12 5 7 7-7 7" />
                        </svg>
                      </a>
                    </div>
                    <!-- End Footer -->
                  </div>
                  <!-- End Tab Content -->

                  <!-- Tab Content -->
                  <div id="hs-pmn-theme" class="hidden" role="tabpanel" aria-labelledby="hs-pmn-item-theme">
                    <!-- Header -->
                    <div class="p-3 flex flex-wrap justify-between items-center gap-3">
                      <span class="block font-semibold text-sm text-gray-800 dark:text-neutral-200">Themes</span>
                    </div>
                    <!-- End Header -->

                    <!-- Body -->
                    <div class="px-3 h-64 sm:h-102 overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500">
                      <!-- Grid -->
                      <div class="py-px grid grid-cols-2 md:grid-cols-3 gap-1" data-hs-global-color-theme>

                        <!-- Checkbox -->
                        <label for="hs-pro-tps-default-@@previewMode.themes.id" class="group relative p-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[8px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                          <input type="radio" id="hs-pro-tps-default-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tps-@@previewMode.themes.id" value="default" checked>
                          <span class="absolute top-1/2 inset-s-2.5 -translate-y-1/2 size-4 flex shrink-0 justify-center items-center text-white rounded-[999px] opacity-0 scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100">
                            <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="3" stroke-linecap="round" stroke-linejoin="round">
                              <path d="M20 6 9 17l-5-5" />
                            </svg>
                          </span>
                          <span class="flex shrink-0 justify-center items-center size-5 rounded-[6px] bg-blue-600 dark:bg-blue-500"></span>
                          <span class="grow truncate">
                            <span class="block truncate" title="Default">
                              Default
                            </span>
                          </span>
                        </label>
                        <!-- End Checkbox --><!-- Checkbox -->
                        <label for="hs-pro-tps-harvest-@@previewMode.themes.id" class="group relative p-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[8px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                          <input type="radio" id="hs-pro-tps-harvest-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tps-@@previewMode.themes.id" value="harvest">
                          <span class="absolute top-1/2 inset-s-2.5 -translate-y-1/2 size-4 flex shrink-0 justify-center items-center text-white dark:text-amber-900 rounded-[999px] opacity-0 scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100">
                            <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="3" stroke-linecap="round" stroke-linejoin="round">
                              <path d="M20 6 9 17l-5-5" />
                            </svg>
                          </span>
                          <span class="flex shrink-0 justify-center items-center size-5 rounded-[6px] bg-amber-700 dark:bg-amber-300"></span>
                          <span class="grow truncate">
                            <span class="block truncate" title="Harvest">
                              Harvest
                            </span>
                          </span>
                        </label>
                        <!-- End Checkbox --><!-- Checkbox -->
                        <label for="hs-pro-tps-retro-@@previewMode.themes.id" class="group relative p-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[8px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                          <input type="radio" id="hs-pro-tps-retro-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tps-@@previewMode.themes.id" value="retro">
                          <span class="absolute top-1/2 inset-s-2.5 -translate-y-1/2 size-4 flex shrink-0 justify-center items-center text-white rounded-[999px] opacity-0 scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100">
                            <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="3" stroke-linecap="round" stroke-linejoin="round">
                              <path d="M20 6 9 17l-5-5" />
                            </svg>
                          </span>
                          <span class="flex shrink-0 justify-center items-center size-5 rounded-[6px] bg-fuchsia-500"></span>
                          <span class="grow truncate">
                            <span class="block truncate" title="Retro">
                              Retro
                            </span>
                          </span>
                        </label>
                        <!-- End Checkbox --><!-- Checkbox -->
                        <label for="hs-pro-tps-ocean-@@previewMode.themes.id" class="group relative p-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[8px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                          <input type="radio" id="hs-pro-tps-ocean-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tps-@@previewMode.themes.id" value="ocean">
                          <span class="absolute top-1/2 inset-s-2.5 -translate-y-1/2 size-4 flex shrink-0 justify-center items-center text-white rounded-[999px] opacity-0 scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100">
                            <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="3" stroke-linecap="round" stroke-linejoin="round">
                              <path d="M20 6 9 17l-5-5" />
                            </svg>
                          </span>
                          <span class="flex shrink-0 justify-center items-center size-5 rounded-[6px] bg-cyan-600 dark:bg-cyan-500"></span>
                          <span class="grow truncate">
                            <span class="block truncate" title="Ocean">
                              Ocean
                            </span>
                          </span>
                        </label>
                        <!-- End Checkbox --><!-- Checkbox -->
                        <label for="hs-pro-tps-autumn-@@previewMode.themes.id" class="group relative p-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[8px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                          <input type="radio" id="hs-pro-tps-autumn-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tps-@@previewMode.themes.id" value="autumn">
                          <span class="absolute top-1/2 inset-s-2.5 -translate-y-1/2 size-4 flex shrink-0 justify-center items-center text-white dark:text-amber-800 rounded-[999px] opacity-0 scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100">
                            <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="3" stroke-linecap="round" stroke-linejoin="round">
                              <path d="M20 6 9 17l-5-5" />
                            </svg>
                          </span>
                          <span class="flex shrink-0 justify-center items-center size-5 rounded-[6px] bg-amber-500 dark:bg-amber-200"></span>
                          <span class="grow truncate">
                            <span class="block truncate" title="Autumn">
                              Autumn
                            </span>
                          </span>
                        </label>
                        <!-- End Checkbox --><!-- Checkbox -->
                        <label for="hs-pro-tps-moon-@@previewMode.themes.id" class="group relative p-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[8px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                          <input type="radio" id="hs-pro-tps-moon-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tps-@@previewMode.themes.id" value="moon">
                          <span class="absolute top-1/2 inset-s-2.5 -translate-y-1/2 size-4 flex shrink-0 justify-center items-center text-white rounded-[999px] opacity-0 scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100">
                            <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="3" stroke-linecap="round" stroke-linejoin="round">
                              <path d="M20 6 9 17l-5-5" />
                            </svg>
                          </span>
                          <span class="flex shrink-0 justify-center items-center size-5 rounded-[6px] bg-gray-800 dark:bg-neutral-900"></span>
                          <span class="grow truncate">
                            <span class="block truncate" title="Moon">
                              Moon
                            </span>
                          </span>
                        </label>
                        <!-- End Checkbox --><!-- Checkbox -->
                        <label for="hs-pro-tps-bubblegum-@@previewMode.themes.id" class="group relative p-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[8px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                          <input type="radio" id="hs-pro-tps-bubblegum-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tps-@@previewMode.themes.id" value="bubblegum">
                          <span class="absolute top-1/2 inset-s-2.5 -translate-y-1/2 size-4 flex shrink-0 justify-center items-center text-white rounded-[999px] opacity-0 scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100">
                            <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="3" stroke-linecap="round" stroke-linejoin="round">
                              <path d="M20 6 9 17l-5-5" />
                            </svg>
                          </span>
                          <span class="flex shrink-0 justify-center items-center size-5 rounded-[6px] bg-pink-600 dark:bg-pink-500"></span>
                          <span class="grow truncate">
                            <span class="block truncate" title="Bubblegum">
                              Bubblegum
                            </span>
                          </span>
                        </label>
                        <!-- End Checkbox --><!-- Checkbox -->
                        <label for="hs-pro-tps-cashmere-@@previewMode.themes.id" class="group relative p-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[8px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                          <input type="radio" id="hs-pro-tps-cashmere-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tps-@@previewMode.themes.id" value="cashmere">
                          <span class="absolute top-1/2 inset-s-2.5 -translate-y-1/2 size-4 flex shrink-0 justify-center items-center text-white rounded-[999px] opacity-0 scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100">
                            <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="3" stroke-linecap="round" stroke-linejoin="round">
                              <path d="M20 6 9 17l-5-5" />
                            </svg>
                          </span>
                          <span class="flex shrink-0 justify-center items-center size-5 rounded-[6px] bg-mauve-500"></span>
                          <span class="grow truncate">
                            <span class="block truncate" title="Cashmere">
                              Cashmere
                            </span>
                          </span>
                        </label>
                        <!-- End Checkbox --><!-- Checkbox -->
                        <label for="hs-pro-tps-olive-@@previewMode.themes.id" class="group relative p-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[8px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                          <input type="radio" id="hs-pro-tps-olive-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tps-@@previewMode.themes.id" value="olive">
                          <span class="absolute top-1/2 inset-s-2.5 -translate-y-1/2 size-4 flex shrink-0 justify-center items-center text-white rounded-[999px] opacity-0 scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100">
                            <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="3" stroke-linecap="round" stroke-linejoin="round">
                              <path d="M20 6 9 17l-5-5" />
                            </svg>
                          </span>
                          <span class="flex shrink-0 justify-center items-center size-5 rounded-[6px] bg-avocado-500"></span>
                          <span class="grow truncate">
                            <span class="block truncate" title="Olive">
                              Olive
                            </span>
                          </span>
                        </label>
                        <!-- End Checkbox -->

                      </div>
                      <!-- End Grid -->

                      <div class="pt-4 mt-4 border-t border-gray-200 dark:border-neutral-700">
                        <!-- Header -->
                        <div class="py-3 flex items-center gap-2">
                          <span class="block font-semibold text-sm text-gray-800 dark:text-neutral-200">Branding Colors</span>

                          <div class="hs-tooltip [--placement:top] inline-block">
                            <svg class="hs-tooltip-toggle shrink-0 size-4 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">
                              <circle cx="12" cy="12" r="10" />
                              <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
                              <path d="M12 17h.01" />
                            </svg>
                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-70 max-w-70 text-center py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                              Branding colors are shown for demonstration purposes and sometimes may not match the predefined Theme colors exactly.
                            </span>
                          </div>
                        </div>
                        <!-- End Header -->

                        <!-- Grid -->
                        <div class="py-px flex flex-wrap gap-1" data-hs-global-brand>

                          <!-- Checkbox -->
                          <div class="hs-tooltip [--placement:top] inline-block">
                            <label for="hs-pro-tps-red-@@previewMode.themes.id" class="hs-tooltip-toggle group relative p-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[999px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                              <input type="radio" id="hs-pro-tps-red-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tps-@@previewMode.themes.id-branding" value="red">
                              <span class="absolute top-1/2 inset-s-2.5 -translate-y-1/2 size-4 flex shrink-0 justify-center items-center text-white rounded-[999px] opacity-0 scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100">
                                <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="3" stroke-linecap="round" stroke-linejoin="round">
                                  <path d="M20 6 9 17l-5-5" />
                                </svg>
                              </span>
                              <span class="flex shrink-0 justify-center items-center size-5 rounded-[999px] bg-red-600 dark:bg-red-500"></span>
                              <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-70 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                                Red
                              </span>
                            </label>
                          </div>
                          <!-- End Checkbox --><!-- Checkbox -->
                          <div class="hs-tooltip [--placement:top] inline-block">
                            <label for="hs-pro-tps-orange-@@previewMode.themes.id" class="hs-tooltip-toggle group relative p-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[999px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                              <input type="radio" id="hs-pro-tps-orange-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tps-@@previewMode.themes.id-branding" value="orange">
                              <span class="absolute top-1/2 inset-s-2.5 -translate-y-1/2 size-4 flex shrink-0 justify-center items-center text-white rounded-[999px] opacity-0 scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100">
                                <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="3" stroke-linecap="round" stroke-linejoin="round">
                                  <path d="M20 6 9 17l-5-5" />
                                </svg>
                              </span>
                              <span class="flex shrink-0 justify-center items-center size-5 rounded-[999px] bg-orange-600 dark:bg-orange-500"></span>
                              <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-70 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                                Orange
                              </span>
                            </label>
                          </div>
                          <!-- End Checkbox --><!-- Checkbox -->
                          <div class="hs-tooltip [--placement:top] inline-block">
                            <label for="hs-pro-tps-amber-@@previewMode.themes.id" class="hs-tooltip-toggle group relative p-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[999px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                              <input type="radio" id="hs-pro-tps-amber-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tps-@@previewMode.themes.id-branding" value="amber">
                              <span class="absolute top-1/2 inset-s-2.5 -translate-y-1/2 size-4 flex shrink-0 justify-center items-center text-white dark:text-black rounded-[999px] opacity-0 scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100">
                                <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="3" stroke-linecap="round" stroke-linejoin="round">
                                  <path d="M20 6 9 17l-5-5" />
                                </svg>
                              </span>
                              <span class="flex shrink-0 justify-center items-center size-5 rounded-[999px] bg-amber-700 dark:bg-amber-300"></span>
                              <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-70 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                                Amber
                              </span>
                            </label>
                          </div>
                          <!-- End Checkbox --><!-- Checkbox -->
                          <div class="hs-tooltip [--placement:top] inline-block">
                            <label for="hs-pro-tps-yellow-@@previewMode.themes.id" class="hs-tooltip-toggle group relative p-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[999px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                              <input type="radio" id="hs-pro-tps-yellow-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tps-@@previewMode.themes.id-branding" value="yellow">
                              <span class="absolute top-1/2 inset-s-2.5 -translate-y-1/2 size-4 flex shrink-0 justify-center items-center text-white rounded-[999px] opacity-0 scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100">
                                <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="3" stroke-linecap="round" stroke-linejoin="round">
                                  <path d="M20 6 9 17l-5-5" />
                                </svg>
                              </span>
                              <span class="flex shrink-0 justify-center items-center size-5 rounded-[999px] bg-yellow-600 dark:bg-yellow-500"></span>
                              <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-70 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                                Yellow
                              </span>
                            </label>
                          </div>
                          <!-- End Checkbox --><!-- Checkbox -->
                          <div class="hs-tooltip [--placement:top] inline-block">
                            <label for="hs-pro-tps-lime-@@previewMode.themes.id" class="hs-tooltip-toggle group relative p-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[999px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                              <input type="radio" id="hs-pro-tps-lime-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tps-@@previewMode.themes.id-branding" value="lime">
                              <span class="absolute top-1/2 inset-s-2.5 -translate-y-1/2 size-4 flex shrink-0 justify-center items-center text-white rounded-[999px] opacity-0 scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100">
                                <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="3" stroke-linecap="round" stroke-linejoin="round">
                                  <path d="M20 6 9 17l-5-5" />
                                </svg>
                              </span>
                              <span class="flex shrink-0 justify-center items-center size-5 rounded-[999px] bg-lime-600 dark:bg-lime-500"></span>
                              <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-70 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                                Lime
                              </span>
                            </label>
                          </div>
                          <!-- End Checkbox --><!-- Checkbox -->
                          <div class="hs-tooltip [--placement:top] inline-block">
                            <label for="hs-pro-tps-green-@@previewMode.themes.id" class="hs-tooltip-toggle group relative p-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[999px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                              <input type="radio" id="hs-pro-tps-green-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tps-@@previewMode.themes.id-branding" value="green">
                              <span class="absolute top-1/2 inset-s-2.5 -translate-y-1/2 size-4 flex shrink-0 justify-center items-center text-white rounded-[999px] opacity-0 scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100">
                                <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="3" stroke-linecap="round" stroke-linejoin="round">
                                  <path d="M20 6 9 17l-5-5" />
                                </svg>
                              </span>
                              <span class="flex shrink-0 justify-center items-center size-5 rounded-[999px] bg-green-600 dark:bg-green-500"></span>
                              <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-70 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                                Green
                              </span>
                            </label>
                          </div>
                          <!-- End Checkbox --><!-- Checkbox -->
                          <div class="hs-tooltip [--placement:top] inline-block">
                            <label for="hs-pro-tps-emerald-@@previewMode.themes.id" class="hs-tooltip-toggle group relative p-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[999px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                              <input type="radio" id="hs-pro-tps-emerald-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tps-@@previewMode.themes.id-branding" value="emerald">
                              <span class="absolute top-1/2 inset-s-2.5 -translate-y-1/2 size-4 flex shrink-0 justify-center items-center text-white rounded-[999px] opacity-0 scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100">
                                <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="3" stroke-linecap="round" stroke-linejoin="round">
                                  <path d="M20 6 9 17l-5-5" />
                                </svg>
                              </span>
                              <span class="flex shrink-0 justify-center items-center size-5 rounded-[999px] bg-emerald-600 dark:bg-emerald-500"></span>
                              <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-70 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                                Emerald
                              </span>
                            </label>
                          </div>
                          <!-- End Checkbox --><!-- Checkbox -->
                          <div class="hs-tooltip [--placement:top] inline-block">
                            <label for="hs-pro-tps-teal-@@previewMode.themes.id" class="hs-tooltip-toggle group relative p-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[999px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                              <input type="radio" id="hs-pro-tps-teal-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tps-@@previewMode.themes.id-branding" value="teal">
                              <span class="absolute top-1/2 inset-s-2.5 -translate-y-1/2 size-4 flex shrink-0 justify-center items-center text-white rounded-[999px] opacity-0 scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100">
                                <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="3" stroke-linecap="round" stroke-linejoin="round">
                                  <path d="M20 6 9 17l-5-5" />
                                </svg>
                              </span>
                              <span class="flex shrink-0 justify-center items-center size-5 rounded-[999px] bg-teal-600 dark:bg-teal-500"></span>
                              <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-70 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                                Teal
                              </span>
                            </label>
                          </div>
                          <!-- End Checkbox --><!-- Checkbox -->
                          <div class="hs-tooltip [--placement:top] inline-block">
                            <label for="hs-pro-tps-cyan-@@previewMode.themes.id" class="hs-tooltip-toggle group relative p-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[999px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                              <input type="radio" id="hs-pro-tps-cyan-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tps-@@previewMode.themes.id-branding" value="cyan">
                              <span class="absolute top-1/2 inset-s-2.5 -translate-y-1/2 size-4 flex shrink-0 justify-center items-center text-white rounded-[999px] opacity-0 scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100">
                                <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="3" stroke-linecap="round" stroke-linejoin="round">
                                  <path d="M20 6 9 17l-5-5" />
                                </svg>
                              </span>
                              <span class="flex shrink-0 justify-center items-center size-5 rounded-[999px] bg-cyan-600 dark:bg-cyan-500"></span>
                              <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-70 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                                Cyan
                              </span>
                            </label>
                          </div>
                          <!-- End Checkbox --><!-- Checkbox -->
                          <div class="hs-tooltip [--placement:top] inline-block">
                            <label for="hs-pro-tps-sky-@@previewMode.themes.id" class="hs-tooltip-toggle group relative p-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[999px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                              <input type="radio" id="hs-pro-tps-sky-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tps-@@previewMode.themes.id-branding" value="sky">
                              <span class="absolute top-1/2 inset-s-2.5 -translate-y-1/2 size-4 flex shrink-0 justify-center items-center text-white rounded-[999px] opacity-0 scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100">
                                <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="3" stroke-linecap="round" stroke-linejoin="round">
                                  <path d="M20 6 9 17l-5-5" />
                                </svg>
                              </span>
                              <span class="flex shrink-0 justify-center items-center size-5 rounded-[999px] bg-sky-600 dark:bg-sky-500"></span>
                              <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-70 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                                Sky
                              </span>
                            </label>
                          </div>
                          <!-- End Checkbox --><!-- Checkbox -->
                          <div class="hs-tooltip [--placement:top] inline-block">
                            <label for="hs-pro-tps-blue-@@previewMode.themes.id" class="hs-tooltip-toggle group relative p-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[999px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                              <input type="radio" id="hs-pro-tps-blue-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tps-@@previewMode.themes.id-branding" value="blue">
                              <span class="absolute top-1/2 inset-s-2.5 -translate-y-1/2 size-4 flex shrink-0 justify-center items-center text-white rounded-[999px] opacity-0 scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100">
                                <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="3" stroke-linecap="round" stroke-linejoin="round">
                                  <path d="M20 6 9 17l-5-5" />
                                </svg>
                              </span>
                              <span class="flex shrink-0 justify-center items-center size-5 rounded-[999px] bg-blue-600 dark:bg-blue-500"></span>
                              <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-70 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                                Blue
                              </span>
                            </label>
                          </div>
                          <!-- End Checkbox --><!-- Checkbox -->
                          <div class="hs-tooltip [--placement:top] inline-block">
                            <label for="hs-pro-tps-indigo-@@previewMode.themes.id" class="hs-tooltip-toggle group relative p-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[999px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                              <input type="radio" id="hs-pro-tps-indigo-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tps-@@previewMode.themes.id-branding" value="indigo">
                              <span class="absolute top-1/2 inset-s-2.5 -translate-y-1/2 size-4 flex shrink-0 justify-center items-center text-white rounded-[999px] opacity-0 scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100">
                                <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="3" stroke-linecap="round" stroke-linejoin="round">
                                  <path d="M20 6 9 17l-5-5" />
                                </svg>
                              </span>
                              <span class="flex shrink-0 justify-center items-center size-5 rounded-[999px] bg-indigo-600 dark:bg-indigo-500"></span>
                              <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-70 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                                Indigo
                              </span>
                            </label>
                          </div>
                          <!-- End Checkbox --><!-- Checkbox -->
                          <div class="hs-tooltip [--placement:top] inline-block">
                            <label for="hs-pro-tps-violet-@@previewMode.themes.id" class="hs-tooltip-toggle group relative p-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[999px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                              <input type="radio" id="hs-pro-tps-violet-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tps-@@previewMode.themes.id-branding" value="violet">
                              <span class="absolute top-1/2 inset-s-2.5 -translate-y-1/2 size-4 flex shrink-0 justify-center items-center text-white rounded-[999px] opacity-0 scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100">
                                <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="3" stroke-linecap="round" stroke-linejoin="round">
                                  <path d="M20 6 9 17l-5-5" />
                                </svg>
                              </span>
                              <span class="flex shrink-0 justify-center items-center size-5 rounded-[999px] bg-violet-600 dark:bg-violet-500"></span>
                              <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-70 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                                Violet
                              </span>
                            </label>
                          </div>
                          <!-- End Checkbox --><!-- Checkbox -->
                          <div class="hs-tooltip [--placement:top] inline-block">
                            <label for="hs-pro-tps-purple-@@previewMode.themes.id" class="hs-tooltip-toggle group relative p-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[999px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                              <input type="radio" id="hs-pro-tps-purple-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tps-@@previewMode.themes.id-branding" value="purple">
                              <span class="absolute top-1/2 inset-s-2.5 -translate-y-1/2 size-4 flex shrink-0 justify-center items-center text-white rounded-[999px] opacity-0 scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100">
                                <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="3" stroke-linecap="round" stroke-linejoin="round">
                                  <path d="M20 6 9 17l-5-5" />
                                </svg>
                              </span>
                              <span class="flex shrink-0 justify-center items-center size-5 rounded-[999px] bg-purple-600 dark:bg-purple-500"></span>
                              <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-70 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                                Purple
                              </span>
                            </label>
                          </div>
                          <!-- End Checkbox --><!-- Checkbox -->
                          <div class="hs-tooltip [--placement:top] inline-block">
                            <label for="hs-pro-tps-fuchsia-@@previewMode.themes.id" class="hs-tooltip-toggle group relative p-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[999px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                              <input type="radio" id="hs-pro-tps-fuchsia-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tps-@@previewMode.themes.id-branding" value="fuchsia">
                              <span class="absolute top-1/2 inset-s-2.5 -translate-y-1/2 size-4 flex shrink-0 justify-center items-center text-white rounded-[999px] opacity-0 scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100">
                                <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="3" stroke-linecap="round" stroke-linejoin="round">
                                  <path d="M20 6 9 17l-5-5" />
                                </svg>
                              </span>
                              <span class="flex shrink-0 justify-center items-center size-5 rounded-[999px] bg-fuchsia-600 dark:bg-fuchsia-500"></span>
                              <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-70 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                                Fuchsia
                              </span>
                            </label>
                          </div>
                          <!-- End Checkbox --><!-- Checkbox -->
                          <div class="hs-tooltip [--placement:top] inline-block">
                            <label for="hs-pro-tps-pink-@@previewMode.themes.id" class="hs-tooltip-toggle group relative p-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[999px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                              <input type="radio" id="hs-pro-tps-pink-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tps-@@previewMode.themes.id-branding" value="pink">
                              <span class="absolute top-1/2 inset-s-2.5 -translate-y-1/2 size-4 flex shrink-0 justify-center items-center text-white rounded-[999px] opacity-0 scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100">
                                <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="3" stroke-linecap="round" stroke-linejoin="round">
                                  <path d="M20 6 9 17l-5-5" />
                                </svg>
                              </span>
                              <span class="flex shrink-0 justify-center items-center size-5 rounded-[999px] bg-pink-600 dark:bg-pink-500"></span>
                              <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-70 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                                Pink
                              </span>
                            </label>
                          </div>
                          <!-- End Checkbox --><!-- Checkbox -->
                          <div class="hs-tooltip [--placement:top] inline-block">
                            <label for="hs-pro-tps-rose-@@previewMode.themes.id" class="hs-tooltip-toggle group relative p-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[999px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                              <input type="radio" id="hs-pro-tps-rose-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tps-@@previewMode.themes.id-branding" value="rose">
                              <span class="absolute top-1/2 inset-s-2.5 -translate-y-1/2 size-4 flex shrink-0 justify-center items-center text-white rounded-[999px] opacity-0 scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100">
                                <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="3" stroke-linecap="round" stroke-linejoin="round">
                                  <path d="M20 6 9 17l-5-5" />
                                </svg>
                              </span>
                              <span class="flex shrink-0 justify-center items-center size-5 rounded-[999px] bg-rose-600 dark:bg-rose-500"></span>
                              <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-70 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                                Rose
                              </span>
                            </label>
                          </div>
                          <!-- End Checkbox --><!-- Checkbox -->
                          <div class="hs-tooltip [--placement:top] inline-block">
                            <label for="hs-pro-tps-khaki-@@previewMode.themes.id" class="hs-tooltip-toggle group relative p-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[999px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                              <input type="radio" id="hs-pro-tps-khaki-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tps-@@previewMode.themes.id-branding" value="khaki">
                              <span class="absolute top-1/2 inset-s-2.5 -translate-y-1/2 size-4 flex shrink-0 justify-center items-center text-white rounded-[999px] opacity-0 scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100">
                                <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="3" stroke-linecap="round" stroke-linejoin="round">
                                  <path d="M20 6 9 17l-5-5" />
                                </svg>
                              </span>
                              <span class="flex shrink-0 justify-center items-center size-5 rounded-[999px] bg-khaki-600 dark:bg-khaki-500"></span>
                              <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-70 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                                Khaki
                              </span>
                            </label>
                          </div>
                          <!-- End Checkbox --><!-- Checkbox -->
                          <div class="hs-tooltip [--placement:top] inline-block">
                            <label for="hs-pro-tps-mauve-@@previewMode.themes.id" class="hs-tooltip-toggle group relative p-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[999px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                              <input type="radio" id="hs-pro-tps-mauve-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tps-@@previewMode.themes.id-branding" value="mauve">
                              <span class="absolute top-1/2 inset-s-2.5 -translate-y-1/2 size-4 flex shrink-0 justify-center items-center text-white rounded-[999px] opacity-0 scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100">
                                <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="3" stroke-linecap="round" stroke-linejoin="round">
                                  <path d="M20 6 9 17l-5-5" />
                                </svg>
                              </span>
                              <span class="flex shrink-0 justify-center items-center size-5 rounded-[999px] bg-mauve-600 dark:bg-mauve-500"></span>
                              <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-70 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                                Mauve
                              </span>
                            </label>
                          </div>
                          <!-- End Checkbox --><!-- Checkbox -->
                          <div class="hs-tooltip [--placement:top] inline-block">
                            <label for="hs-pro-tps-gray-@@previewMode.themes.id" class="hs-tooltip-toggle group relative p-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[999px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                              <input type="radio" id="hs-pro-tps-gray-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tps-@@previewMode.themes.id-branding" value="gray">
                              <span class="absolute top-1/2 inset-s-2.5 -translate-y-1/2 size-4 flex shrink-0 justify-center items-center text-white rounded-[999px] opacity-0 scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100">
                                <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="3" stroke-linecap="round" stroke-linejoin="round">
                                  <path d="M20 6 9 17l-5-5" />
                                </svg>
                              </span>
                              <span class="flex shrink-0 justify-center items-center size-5 rounded-[999px] bg-gray-800 dark:bg-neutral-900"></span>
                              <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-70 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                                <span class="dark:hidden">Gray</span><span class="dark:block hidden">Neutral</span>
                              </span>
                            </label>
                          </div>
                          <!-- End Checkbox --><!-- Checkbox -->
                          <div class="hs-tooltip [--placement:top] inline-block">
                            <label for="hs-pro-tps-avocado-@@previewMode.themes.id" class="hs-tooltip-toggle group relative p-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[999px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                              <input type="radio" id="hs-pro-tps-avocado-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tps-@@previewMode.themes.id-branding" value="avocado">
                              <span class="absolute top-1/2 inset-s-2.5 -translate-y-1/2 size-4 flex shrink-0 justify-center items-center text-white rounded-[999px] opacity-0 scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100">
                                <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="3" stroke-linecap="round" stroke-linejoin="round">
                                  <path d="M20 6 9 17l-5-5" />
                                </svg>
                              </span>
                              <span class="flex shrink-0 justify-center items-center size-5 rounded-[999px] bg-avocado-600 dark:bg-avocado-500"></span>
                              <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-70 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                                Avocado
                              </span>
                            </label>
                          </div>
                          <!-- End Checkbox -->

                        </div>
                        <!-- End Grid -->
                      </div>

                      <div class="pt-4 mt-4 border-t border-gray-200 dark:border-neutral-700">
                        <!-- Header -->
                        <div class="py-3 flex items-center gap-2">
                          <span class="block font-semibold text-sm text-gray-800 dark:text-neutral-200">Fonts</span>
                        </div>
                        <!-- End Header -->

                        <!-- Grid -->
                        <div class="py-px flex flex-wrap gap-2" data-hs-global-font>

                          <!-- Checkbox -->
                          <label for="hs-pro-tps-sans-@@previewMode.themes.id" class="group relative py-1.5 px-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[8px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                            <input type="radio" id="hs-pro-tps-sans-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tfps-@@previewMode.themes.id" value="sans">
                            <span class="size-8 flex shrink-0 justify-center items-center text-black bg-gray-200 rounded-[6px] border-b border-gray-300 dark:bg-neutral-700 dark:text-white dark:border-neutral-600">
                              <svg class="shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 12.069999694824219 56.88999938964844 37.01000213623047" data-asc="0.96875" width="56.88999938964844" height="37.01000213623047">
                                <defs />
                                <g fill="currentColor">
                                  <g transform="translate(0, 0)">
                                    <path d="M4.62 48.44L0 48.44L13.35 12.07L17.90 12.07L31.25 48.44L26.63 48.44L15.77 17.83L15.48 17.83L4.62 48.44M6.32 34.23L24.93 34.23L24.93 38.14L6.32 38.14L6.32 34.23ZM44.39 49.08Q41.80 49.08 39.68 48.09Q37.57 47.11 36.33 45.23Q35.09 43.36 35.09 40.70Q35.09 38.35 36.01 36.89Q36.93 35.42 38.48 34.59Q40.02 33.75 41.89 33.34Q43.77 32.92 45.67 32.67Q48.15 32.35 49.71 32.18Q51.26 32.01 51.98 31.61Q52.70 31.20 52.70 30.18L52.70 30.04Q52.70 27.41 51.27 25.96Q49.84 24.50 46.95 24.50Q43.95 24.50 42.24 25.82Q40.54 27.13 39.84 28.62L35.87 27.20Q36.93 24.72 38.72 23.32Q40.50 21.93 42.62 21.37Q44.74 20.81 46.80 20.81Q48.12 20.81 49.83 21.12Q51.54 21.43 53.15 22.39Q54.76 23.35 55.82 25.28Q56.89 27.22 56.89 30.47L56.89 48.44L52.70 48.44L52.70 44.74L52.49 44.74Q52.06 45.63 51.07 46.64Q50.07 47.66 48.42 48.37Q46.77 49.08 44.39 49.08M45.03 45.31Q47.51 45.31 49.23 44.34Q50.94 43.36 51.82 41.81Q52.70 40.27 52.70 38.57L52.70 34.73Q52.43 35.05 51.54 35.31Q50.64 35.56 49.48 35.75Q48.31 35.94 47.22 36.07Q46.13 36.20 45.45 36.29Q43.82 36.51 42.41 36.98Q41.00 37.45 40.14 38.38Q39.28 39.31 39.28 40.91Q39.28 43.09 40.90 44.20Q42.52 45.31 45.03 45.31Z" />
                                  </g>
                                </g>
                              </svg>
                            </span>
                            <span class="grow truncate">
                              <span class="block truncate">
                                <svg class="w-auto h-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 11.579999923706055 110.16000366210938 37.5" data-asc="0.96875" width="110.16000366210938" height="37.5">
                                  <defs />
                                  <g fill="currentColor">
                                    <g transform="translate(0, 0)">
                                      <path d="M21.45 21.16Q21.13 18.47 18.86 16.97Q16.58 15.48 13.28 15.48Q10.87 15.48 9.06 16.26Q7.26 17.05 6.26 18.41Q5.26 19.78 5.26 21.52Q5.26 22.98 5.96 24.01Q6.66 25.05 7.76 25.74Q8.86 26.42 10.07 26.86Q11.27 27.29 12.29 27.56L15.98 28.55Q17.40 28.92 19.15 29.58Q20.90 30.24 22.51 31.37Q24.11 32.49 25.16 34.25Q26.21 36.01 26.21 38.57Q26.21 41.51 24.67 43.89Q23.14 46.27 20.20 47.67Q17.26 49.08 13.07 49.08Q9.16 49.08 6.31 47.82Q3.46 46.56 1.84 44.30Q0.21 42.05 0 39.06L4.55 39.06Q4.72 41.12 5.94 42.46Q7.16 43.80 9.03 44.45Q10.90 45.10 13.07 45.10Q15.59 45.10 17.60 44.27Q19.60 43.45 20.77 41.97Q21.95 40.48 21.95 38.49Q21.95 36.68 20.93 35.55Q19.92 34.41 18.27 33.70Q16.62 32.99 14.70 32.46L10.23 31.18Q5.97 29.95 3.48 27.68Q0.99 25.41 0.99 21.73Q0.99 18.68 2.65 16.40Q4.31 14.12 7.13 12.85Q9.94 11.58 13.42 11.58Q16.94 11.58 19.67 12.83Q22.41 14.08 24.01 16.25Q25.62 18.41 25.71 21.16L21.45 21.16ZM40.91 49.08Q38.32 49.08 36.20 48.09Q34.09 47.11 32.85 45.23Q31.61 43.36 31.61 40.70Q31.61 38.35 32.53 36.89Q33.45 35.42 35.00 34.59Q36.54 33.75 38.41 33.34Q40.29 32.92 42.19 32.67Q44.67 32.35 46.23 32.18Q47.78 32.01 48.50 31.61Q49.22 31.20 49.22 30.18L49.22 30.04Q49.22 27.41 47.79 25.96Q46.36 24.50 43.47 24.50Q40.47 24.50 38.76 25.82Q37.06 27.13 36.36 28.62L32.39 27.20Q33.45 24.72 35.24 23.32Q37.02 21.93 39.14 21.37Q41.26 20.81 43.32 20.81Q44.64 20.81 46.35 21.12Q48.06 21.43 49.67 22.39Q51.28 23.35 52.34 25.28Q53.41 27.22 53.41 30.47L53.41 48.44L49.22 48.44L49.22 44.74L49.01 44.74Q48.58 45.63 47.59 46.64Q46.59 47.66 44.94 48.37Q43.29 49.08 40.91 49.08M41.55 45.31Q44.03 45.31 45.75 44.34Q47.46 43.36 48.34 41.81Q49.22 40.27 49.22 38.57L49.22 34.73Q48.95 35.05 48.06 35.31Q47.16 35.56 46.00 35.75Q44.83 35.94 43.74 36.07Q42.65 36.20 41.97 36.29Q40.34 36.51 38.93 36.98Q37.52 37.45 36.66 38.38Q35.80 39.31 35.80 40.91Q35.80 43.09 37.42 44.20Q39.04 45.31 41.55 45.31ZM65.27 32.03L65.27 48.44L61.08 48.44L61.08 21.16L65.13 21.16L65.13 25.43L65.48 25.43Q66.44 23.35 68.39 22.08Q70.35 20.81 73.44 20.81Q76.21 20.81 78.28 21.94Q80.36 23.06 81.52 25.35Q82.67 27.63 82.67 31.11L82.67 48.44L78.48 48.44L78.48 31.39Q78.48 28.18 76.81 26.38Q75.14 24.57 72.23 24.57Q70.22 24.57 68.65 25.44Q67.08 26.31 66.18 27.98Q65.27 29.65 65.27 32.03ZM109.66 27.27L105.89 28.34Q105.54 27.40 104.86 26.50Q104.17 25.60 103.00 25.02Q101.83 24.43 100.00 24.43Q97.50 24.43 95.84 25.58Q94.18 26.72 94.18 28.48Q94.18 30.04 95.31 30.95Q96.45 31.85 98.86 32.46L102.91 33.45Q106.57 34.34 108.36 36.16Q110.16 37.98 110.16 40.84Q110.16 43.18 108.82 45.03Q107.48 46.88 105.08 47.94Q102.68 49.01 99.50 49.01Q95.33 49.01 92.60 47.19Q89.86 45.38 89.13 41.90L93.11 40.91Q93.68 43.11 95.27 44.21Q96.86 45.31 99.43 45.31Q102.36 45.31 104.09 44.06Q105.82 42.81 105.82 41.05Q105.82 39.63 104.83 38.66Q103.84 37.70 101.78 37.22L97.23 36.15Q93.48 35.26 91.73 33.39Q89.99 31.52 89.99 28.69Q89.99 26.38 91.29 24.61Q92.60 22.83 94.86 21.82Q97.12 20.81 100.00 20.81Q104.05 20.81 106.37 22.59Q108.68 24.36 109.66 27.27Z" />
                                    </g>
                                  </g>
                                </svg>
                              </span>
                            </span>
                          </label>
                          <!-- End Checkbox --><!-- Checkbox -->
                          <label for="hs-pro-tps-serif-@@previewMode.themes.id" class="group relative py-1.5 px-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[8px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                            <input type="radio" id="hs-pro-tps-serif-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tfps-@@previewMode.themes.id" value="serif">
                            <span class="size-8 flex shrink-0 justify-center items-center text-black bg-gray-200 rounded-[6px] border-b border-gray-300 dark:bg-neutral-700 dark:text-white dark:border-neutral-600">
                              <svg class="shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 8.5 63.04999923706055 37" data-asc="0.9" width="63.04999923706055" height="37">
                                <defs />
                                <g fill="currentColor">
                                  <g transform="translate(0, 0)">
                                    <path d="M26.95 41.80L24.00 32.90L10.60 32.90L7.55 41.80L11.70 42.85L11.70 45L0 45L0 42.85L4.10 41.80L16.10 8.50L20.75 8.50L32.60 41.80L36.60 42.85L36.60 45L22.85 45L22.85 42.85L26.95 41.80M17.45 12.95L11.60 30L23.05 30L17.65 12.95L17.45 12.95ZM38.30 39.15Q38.30 35.25 41.95 33Q45.60 30.75 54.05 29.50Q53.85 26.55 53.50 24.90Q53.15 23.25 52.60 22.25Q51.90 20.95 50.65 20.32Q49.40 19.70 47.95 19.70Q46.55 19.70 45.43 20.20Q44.30 20.70 43.90 21.55Q44.60 22.05 44.93 22.85Q45.25 23.65 45.25 24.35Q45.25 25.60 44.43 26.32Q43.60 27.05 42.40 27.05Q41.20 27.05 40.43 26.25Q39.65 25.45 39.65 24Q39.65 21.90 41.10 20.45Q42.55 19 44.78 18.25Q47.00 17.50 49.25 17.50Q51.30 17.50 53.03 18.13Q54.75 18.75 55.95 19.95Q59.05 23.05 59.05 30.95L59.05 38.20Q59.05 40.65 59.38 41.60Q59.70 42.55 60.80 42.55L63.05 42.55L63.05 44.05Q59.45 45.50 57.45 45.50Q55.90 45.50 55.38 44.38Q54.85 43.25 54.85 40.05L54.65 40.05Q53.10 42.60 50.55 44.05Q48.00 45.50 45.05 45.50Q41.90 45.50 40.10 43.80Q38.30 42.10 38.30 39.15M47.15 42.60Q48.55 42.60 50.08 41.88Q51.60 41.15 52.65 39.85Q53.45 38.85 53.83 37.48Q54.20 36.10 54.20 34.25Q54.20 33.40 54.15 32.58Q54.10 31.75 54.00 31Q49.95 31.80 47.65 32.73Q45.35 33.65 44.40 34.92Q43.45 36.20 43.45 38.10Q43.45 40.25 44.43 41.42Q45.40 42.60 47.15 42.60Z" />
                                  </g>
                                </g>
                              </svg>
                            </span>
                            <span class="grow truncate">
                              <span class="block truncate">
                                <svg class="w-auto h-[13px]" xmlns="http://www.w3.org/2000/svg" viewBox="0 5.5 113.8499984741211 40.04999923706055" data-asc="0.9" width="113.8499984741211" height="40.04999923706055">
                                  <defs />
                                  <g fill="currentColor">
                                    <g transform="translate(0, 0)">
                                      <path d="M12.75 45.55Q9.80 45.55 7.38 44.65Q4.95 43.75 3.35 42.10L2.80 45L0 45L0 33.65L3.05 33.65Q3.35 38.40 5.45 40.60Q7.55 42.80 11.80 42.80Q15.35 42.80 17.15 41.42Q18.95 40.05 18.95 37.35Q18.95 35.20 17.88 33.75Q16.80 32.30 14.77 31.15Q12.75 30 9.95 28.90Q6.80 27.60 4.60 26.32Q2.40 25.05 1.27 23.22Q0.15 21.40 0.15 18.50Q0.15 13.75 3.13 11.10Q6.10 8.45 11.10 8.45Q16.05 8.45 19.15 11.25L19.55 9L22.35 9L22.35 20.35L19.50 20.35Q19.50 15.55 17.70 13.35Q15.90 11.15 12.05 11.15Q5.20 11.15 5.20 17.40Q5.20 19.05 5.80 20.13Q6.40 21.20 7.97 22.10Q9.55 23 12.45 24.25Q16.60 26 19.15 27.65Q21.70 29.30 22.85 31.23Q24 33.15 24 35.80Q24 38.85 22.57 41.05Q21.15 43.25 18.63 44.40Q16.10 45.55 12.75 45.55ZM51.50 31.80L34.05 31.80Q34.05 35.45 35.05 37.85Q36.05 40.15 37.90 41.15Q39.75 42.15 41.90 42.15Q44.25 42.15 46.20 41.17Q48.15 40.20 49.70 38.50L51.30 39.70Q49.55 42.10 47.05 43.80Q44.55 45.50 40.60 45.50Q37.15 45.50 34.50 44.02Q31.85 42.55 30.45 39.70Q29.70 38.15 29.35 36.25Q29.00 34.35 29.00 32.20Q29.00 25.20 32.23 21.35Q35.45 17.50 41 17.50Q46.10 17.50 48.88 20.67Q51.65 23.85 51.65 29.45Q51.65 29.95 51.63 30.38Q51.60 30.80 51.50 31.80M40.70 20.20Q34.70 20.20 34.10 29.35L46.60 29.35L46.60 27.70Q46.60 24.10 45.08 22.15Q43.55 20.20 40.70 20.20ZM70.70 20.90Q70.50 20.75 70.23 20.67Q69.95 20.60 69.70 20.60Q69.10 20.60 68.40 21.15Q67.70 21.70 67.05 22.63Q66.40 23.55 65.85 24.75Q65.15 26.45 64.75 28.47Q64.35 30.50 64.35 32.65L64.35 42L69.75 42.95L69.75 45L55.65 45L55.65 42.95L59.50 42L59.50 21L55.65 20.05L55.65 18L62.85 18L63.95 24.60L64.15 24.60Q65.30 21.20 67.25 19.35Q69.20 17.50 71.55 17.50Q73.50 17.50 74.80 18.72Q76.10 19.95 76.10 22Q76.10 23.50 75.33 24.38Q74.55 25.25 73.25 25.25Q71.95 25.25 71.20 24.42Q70.45 23.60 70.45 22.25Q70.45 21.95 70.50 21.67Q70.55 21.40 70.70 20.90ZM82.40 21L78.55 20.05L78.55 18L87.25 18L87.25 42L91.10 42.95L91.10 45L78.55 45L78.55 42.95L82.40 42L82.40 21M81.70 9.95Q81.70 8.50 82.55 7.65Q83.40 6.80 84.80 6.80Q86.25 6.80 87.10 7.65Q87.95 8.50 87.95 9.95Q87.95 11.35 87.10 12.20Q86.25 13.05 84.80 13.05Q83.35 13.05 82.53 12.23Q81.70 11.40 81.70 9.95ZM93.25 20.50L93.25 18.70L98.10 18L98.10 17.50Q98.10 11.75 100.60 8.63Q103.10 5.50 107.35 5.50Q110.30 5.50 112.08 6.92Q113.85 8.35 113.85 10.55Q113.85 11.95 113.15 12.67Q112.45 13.40 111.25 13.40Q110.10 13.40 109.40 12.75Q108.70 12.10 108.70 10.90Q108.70 9.60 109.50 8.30Q108.65 7.40 107.20 7.40Q106.05 7.40 105.20 7.90Q104.10 8.55 103.63 9.75Q103.15 10.95 103.05 12.42Q102.95 13.90 102.95 15.50L102.95 18L109.35 18L109.35 20.50L102.95 20.50L102.95 42L108.35 42.95L108.35 45L94.25 45L94.25 42.95L98.10 42L98.10 20.50L93.25 20.50Z" />
                                    </g>
                                  </g>
                                </svg>
                              </span>
                            </span>
                          </label>
                          <!-- End Checkbox --><!-- Checkbox -->
                          <label for="hs-pro-tps-mono-@@previewMode.themes.id" class="group relative py-1.5 px-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[8px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                            <input type="radio" id="hs-pro-tps-mono-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tfps-@@previewMode.themes.id" value="mono">
                            <span class="size-8 flex shrink-0 justify-center items-center text-black bg-gray-200 rounded-[6px] border-b border-gray-300 dark:bg-neutral-700 dark:text-white dark:border-neutral-600">
                              <svg class="shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 14 52.5 35" data-asc="0.98" width="52.5" height="35">
                                <defs />
                                <g fill="currentColor">
                                  <g transform="translate(0, 0)">
                                    <path d="M8.10 14L0 22.35L0 49L4 49L4 33L18 33L18 49L22 49L22 14L8.10 14M4 23.30L9.55 17.60L18 17.60L18 29.40L4 29.40L4 23.30ZM33.65 21.35L33.65 25.05L48.30 25.05L48.30 32.65L37.25 32.65L29.45 40.75L29.45 42.75L33.65 49L44.10 49L48.30 46.45L48.30 49L52.50 49L52.50 26L49.35 21.35L33.65 21.35M33.65 42.25L33.65 41.85L38.90 36.45L48.30 36.45L48.30 45.20L35.60 45.20L33.65 42.25Z" />
                                  </g>
                                </g>
                              </svg>
                            </span>
                            <span class="grow truncate">
                              <span class="block truncate">
                                <svg class="w-auto h-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 14 112.19999694824219 35" data-asc="0.98" width="112.19999694824219" height="35">
                                  <defs />
                                  <g fill="currentColor">
                                    <g transform="translate(0, 0)">
                                      <path d="M0 14L0 49L4 49L4 21.80L8.80 28.90L8.80 29L13.15 29L13.15 24.45L18.10 19.25L18.10 49L22.15 49L22.15 14L18.10 14L9.25 23.15L4 15.40L4 14L0 14ZM34.05 22.45L48.20 22.45L52.20 28.45L52.20 44.85L48.20 49L34.10 49L30.05 43L30.05 26.60L34.05 22.45M34 42.50L36 45.40L46.60 45.40L48.10 43.80L48.10 28.90L46.20 26.05L35.55 26.05L34 27.70L34 42.50ZM60 22.45L60 49L64 49L64 27.65L65.55 26.05L76.20 26.05L78.10 28.85L78.10 49L82.15 49L82.15 28.35L78.10 22.45L68.05 22.45L64 24.85L64 22.45L60 22.45ZM94.05 22.45L108.20 22.45L112.20 28.45L112.20 44.85L108.20 49L94.10 49L90.05 43L90.05 26.60L94.05 22.45M94 42.50L96 45.40L106.60 45.40L108.10 43.80L108.10 28.90L106.20 26.05L95.55 26.05L94 27.70L94 42.50Z" />
                                    </g>
                                  </g>
                                </svg>
                              </span>
                            </span>
                          </label>
                          <!-- End Checkbox -->

                        </div>
                        <!-- End Grid -->
                      </div>
                    </div>
                    <!-- Body -->

                    <!-- Footer -->
                    <div class="p-3">
                      <a class="group p-2 rounded-[6px] flex justify-center items-center gap-x-1 text-[13px] bg-gray-800 text-white hover:bg-gray-900 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-gray-900 dark:bg-white dark:hover:bg-neutral-200 dark:focus:bg-neutral-200 dark:text-neutral-800" href="https://preline.co/pro/pricing.html">
                        Purchase Preline Pro
                        <svg class="hidden md:inline-block shrink-0 size-3.5 group-hover:translate-x-0.5 transition" 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 class="lg:opacity-0 lg:-translate-x-1 lg:group-hover:opacity-100 lg:group-hover:translate-x-0 lg:group-focus:opacity-100 lg:group-focus:translate-x-0 lg:transition" d="M5 12h14" />
                          <path class="lg:-translate-x-1.5 lg:group-hover:translate-x-0 lg:group-focus:translate-x-0 lg:transition" d="m12 5 7 7-7 7" />
                        </svg>
                      </a>
                    </div>
                    <!-- End Footer -->
                  </div>
                  <!-- End Tab Content -->
                </div>
                <!-- End Dropdown -->
              </div>
              <!-- End Templates Dropdown -->
            </div>

            <!-- Sidebar Toggle -->
            <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-foreground hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" 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>
            <!-- End Sidebar Toggle -->
          </li>

          <li class="inline-flex items-center relative pe-1.5 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:inset-e-0 after:inline-block after:w-px after:h-3.5 after:bg-navbar-2-divider after:rounded-full after:-translate-y-1/2 after:rotate-12">
            <!-- Project Dropdown -->
            <div class="inline-flex justify-center w-full">
              <div class="hs-dropdown relative [--strategy:absolute] [--placement:bottom-left] inline-flex">
                <!-- Project Button -->
                <button id="hs-pro-anpjdi" type="button" class="py-1 px-2 min-h-8 flex items-center gap-x-1 font-medium text-sm text-foreground rounded-lg hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                  <img class="shrink-0 size-6 rounded-full object-cover me-1" src="https://preline.co/assets/img/logo/hs.png" alt="Logo">
                  Htmlstream
                  <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="m7 15 5 5 5-5" />
                    <path d="m7 9 5-5 5 5" />
                  </svg>
                </button>
                <!-- End Project Button -->

                <!-- Dropdown -->
                <div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-65 transition-[opacity,margin] duration opacity-0 hidden z-20 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-anpjdi">
                  <div class="p-1">
                    <span class="block pt-2 pb-2 ps-2.5 text-sm text-muted-foreground-1">
                      Projects (2)
                    </span>

                    <div class="flex flex-col gap-y-1">
                      <!-- Item -->
                      <label for="hs-pro-anpjdi1" class="py-2 px-2.5 group flex justify-start items-center gap-x-3 rounded-lg cursor-pointer text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus">
                        <input type="radio" class="hidden" id="hs-pro-anpjdi1" name="hs-pro-anpjdi" checked>
                        <svg class="shrink-0 size-4 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>
                        <span class="grow">
                          <span class="block text-sm font-medium text-foreground">
                            Htmlstream
                          </span>
                        </span>
                        <img class="shrink-0 size-5 rounded-full object-cover" src="https://preline.co/assets/img/logo/hs.png" alt="Logo">
                      </label>
                      <!-- End Item -->

                      <!-- Item -->
                      <label for="hs-pro-anpjdi2" class="py-2 px-2.5 group flex justify-start items-center gap-x-3 rounded-lg cursor-pointer text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus">
                        <input type="radio" class="hidden" id="hs-pro-anpjdi2" name="hs-pro-anpjdi">
                        <svg class="shrink-0 size-4 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>
                        <span class="grow">
                          <span class="block text-sm font-medium text-foreground">
                            Bloomark
                          </span>
                        </span>
                        <img class="shrink-0 size-5 rounded-full object-cover" src="https://preline.co/assets/img/logo/logo-short.png" alt="Logo">
                      </label>
                      <!-- End Item -->
                    </div>
                  </div>

                  <div class="p-1 border-t border-dropdown-divider">
                    <button type="button" class="group w-full flex items-center gap-x-3 py-2 px-2.5 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      <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="M8 12h8" />
                        <path d="M12 8v8" />
                      </svg>
                      Add project
                    </button>

                    <button type="button" class="w-full flex items-center gap-x-3 py-2 px-2.5 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      <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.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>
                      Manage projects
                    </button>
                  </div>
                </div>
                <!-- End Dropdown -->
              </div>
            </div>
            <!-- End Project Dropdown -->
          </li>

          <li class="inline-flex items-center relative pe-1.5 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:inset-e-0 after:inline-block after:w-px after:h-3.5 after:bg-navbar-2-divider after:rounded-full after:-translate-y-1/2 after:rotate-12">
            <!-- Teams Dropdown -->
            <div class="inline-flex justify-center w-full">
              <div class="hs-dropdown relative [--strategy:absolute] [--placement:bottom-left] inline-flex w-full">
                <!-- Teams Button -->
                <button id="hs-pro-antmd" type="button" class="py-1 px-2 min-h-8 flex items-center gap-x-1 font-medium text-sm text-foreground rounded-lg hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                  Marketing
                  <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="m7 15 5 5 5-5" />
                    <path d="m7 9 5-5 5 5" />
                  </svg>
                </button>
                <!-- End Teams Button -->

                <!-- Dropdown -->
                <div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-65 transition-[opacity,margin] duration opacity-0 hidden z-20 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-antmd">
                  <div class="p-1">
                    <span class="block pt-2 pb-2 ps-2.5 text-sm text-muted-foreground-1">
                      Teams (1)
                    </span>

                    <div class="flex flex-col gap-y-1">
                      <!-- Item -->
                      <label for="hs-pro-antmdi1" class="py-2 px-2.5 group flex justify-start items-center gap-x-3 rounded-lg cursor-pointer text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus">
                        <input type="radio" class="hidden" id="hs-pro-antmdi1" name="hs-pro-antmdi" checked>
                        <svg class="shrink-0 size-4 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>
                        <span class="grow">
                          <span class="block text-sm font-medium text-foreground">
                            Marketing
                          </span>
                        </span>
                      </label>
                      <!-- End Item -->
                    </div>
                  </div>

                  <div class="p-1 border-t border-dropdown-divider">
                    <button type="button" class="w-full flex items-center gap-x-3 py-2 px-2.5 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                      <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="M8 12h8" />
                        <path d="M12 8v8" />
                      </svg>
                      Add team
                    </button>
                  </div>
                </div>
                <!-- End Dropdown -->
              </div>
            </div>
            <!-- End Teams Dropdown -->
          </li>
        </ul>

        <ul class="flex flex-row items-center gap-x-3 ms-auto">
          <li class="hidden lg:inline-flex items-center gap-1.5 relative pe-3 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:inset-e-0 after:inline-block after:w-px after:h-3.5 after:bg-navbar-2-divider after:rounded-full after:-translate-y-1/2 after:rotate-12">
            <button type="button" class="flex items-center gap-x-1.5 py-2 px-2.5 font-medium text-xs bg-navbar-2-nav-active text-surface-foreground rounded-lg hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">
              <svg class="shrink-0 size-4 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                <path d="M7.657 6.247c.11-.33.576-.33.686 0l.645 1.937a2.89 2.89 0 0 0 1.829 1.828l1.936.645c.33.11.33.576 0 .686l-1.937.645a2.89 2.89 0 0 0-1.828 1.829l-.645 1.936a.361.361 0 0 1-.686 0l-.645-1.937a2.89 2.89 0 0 0-1.828-1.828l-1.937-.645a.361.361 0 0 1 0-.686l1.937-.645a2.89 2.89 0 0 0 1.828-1.828zM3.794 1.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387A1.73 1.73 0 0 0 4.593 5.69l-.387 1.162a.217.217 0 0 1-.412 0L3.407 5.69A1.73 1.73 0 0 0 2.31 4.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387A1.73 1.73 0 0 0 3.407 2.31zM10.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.16 1.16 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.16 1.16 0 0 0-.732-.732L9.1 2.137a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732z" />
              </svg>
              Ask AI
            </button>

            <a class="flex items-center gap-x-1.5 py-1.5 px-2 text-sm text-navbar-2-nav-foreground rounded-lg hover:bg-navbar-2-nav-hover focus:outline-hidden focus:bg-navbar-2-nav-focus" href="#">
              Docs
            </a>

            <a class="flex items-center gap-x-1.5 py-1.5 px-2 text-sm text-navbar-2-nav-foreground rounded-lg hover:bg-navbar-2-nav-hover focus:outline-hidden focus:bg-navbar-2-nav-focus" href="#">
              API
            </a>
          </li>

          <li class="inline-flex items-center gap-1.5 relative pe-3 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:inset-e-0 after:inline-block after:w-px after:h-3.5 after:bg-navbar-2-divider after:rounded-full after:-translate-y-1/2 after:rotate-12">
            <button type="button" class="relative hidden lg:flex justify-center items-center gap-x-1.5 size-8 text-sm text-navbar-2-nav-foreground rounded-full hover:bg-navbar-2-nav-hover focus:outline-hidden focus:bg-navbar-2-nav-focus">
              <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 7v14" />
                <path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z" />
              </svg>
              <span class="sr-only">Knowledge Base</span>
            </button>

            <div class="h-8">
              <!-- Account Dropdown -->
              <div class="hs-dropdown inline-flex [--strategy:absolute] [--auto-close:inside] [--placement:bottom-right] relative text-start">
                <button id="hs-dnad" type="button" class="p-0.5 inline-flex shrink-0 items-center gap-x-3 text-start text-navbar-nav-foreground rounded-full hover:bg-navbar-nav-hover focus:outline-hidden focus:bg-navbar-nav-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                  <img class="shrink-0 size-7 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>

                <!-- Account Dropdown -->
                <div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-60 transition-[opacity,margin] duration opacity-0 hidden z-20 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-dnad">
                  <div class="py-2 px-3.5">
                    <span class="font-medium text-foreground">
                      James Collison
                    </span>
                    <p class="text-sm text-muted-foreground-1">
                      jamescollison@site.com
                    </p>
                    <div class="mt-1.5">
                      <a class="flex justify-center items-center gap-x-1.5 py-2 px-2.5 font-medium text-[13px] bg-secondary text-secondary-foreground rounded-lg hover:bg-secondary-hover focus:outline-hidden focus:bg-secondary-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
                        Upgrade to Pro
                      </a>
                    </div>
                  </div>
                  <div class="px-4 py-2 border-t border-dropdown-divider">
                    <!-- Switch/Toggle -->
                    <div class="flex flex-wrap justify-between items-center gap-2">
                      <span class="flex-1 cursor-pointer text-sm text-foreground">Theme</span>
                      <div class="p-0.5 inline-flex cursor-pointer bg-surface rounded-full">
                        <button type="button" class="size-7 flex justify-center items-center bg-layer shadow-sm text-layer-foreground rounded-full hs-auto-mode-active:bg-transparent hs-auto-mode-active:shadow-none hs-dark-mode-active:bg-transparent hs-dark-mode-active:shadow-none" data-hs-theme-click-value="default">
                          <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="4" />
                            <path d="M12 3v1" />
                            <path d="M12 20v1" />
                            <path d="M3 12h1" />
                            <path d="M20 12h1" />
                            <path d="m18.364 5.636-.707.707" />
                            <path d="m6.343 17.657-.707.707" />
                            <path d="m5.636 5.636.707.707" />
                            <path d="m17.657 17.657.707.707" />
                          </svg>
                          <span class="sr-only">Default (Light)</span>
                        </button>
                        <button type="button" class="size-7 flex justify-center items-center text-layer-foreground rounded-full hs-dark-mode-active:bg-secondary-active hs-dark-mode-active:text-secondary-foreground hs-dark-mode-active:shadow-sm" data-hs-theme-click-value="dark">
                          <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 class="sr-only">Dark</span>
                        </button>
                        <button type="button" class="size-7 flex justify-center items-center text-layer-foreground rounded-full hs-auto-light-mode-active:bg-layer hs-auto-mode-active:shadow-sm" data-hs-theme-click-value="auto">
                          <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">
                            <rect width="20" height="14" x="2" y="3" rx="2" />
                            <line x1="8" x2="16" y1="21" y2="21" />
                            <line x1="12" x2="12" y1="17" y2="21" />
                          </svg>
                          <span class="sr-only">Auto (System)</span>
                        </button>
                      </div>
                    </div>
                    <!-- End Switch/Toggle -->
                  </div>
                  <div class="p-1 border-t border-dropdown-divider">
                    <a class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                      <svg class="shrink-0 mt-0.5 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="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
                        <circle cx="12" cy="7" r="4" />
                      </svg>
                      Profile
                    </a>
                    <a class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-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="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>
                      Settings
                    </a>
                    <a class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                      <svg class="shrink-0 mt-0.5 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 17 5-5-5-5" />
                        <path d="M21 12H9" />
                        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
                      </svg>
                      Log out
                    </a>
                  </div>
                </div>
                <!-- End Account Dropdown -->
              </div>
              <!-- End Account Dropdown -->
            </div>
          </li>
        </ul>
      </div>
    </nav>
  </header>
  <!-- ========== END HEADER ========== -->

  <!-- ========== MAIN CONTENT ========== -->
  <main class="lg:hs-overlay-layout-open:ps-60 transition-all duration-300 lg:fixed lg:inset-0 pt-13.5 px-3 pb-3">
    <!-- Sidebar -->
    <div 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-60
    hidden
    fixed inset-y-0 z-60 inset-s-0
    bg-sidebar-2
    lg:block lg:-translate-x-full lg:end-auto lg:bottom-0" role="dialog" tabindex="-1" aria-label="Sidebar">
      <div class="lg:pt-13 relative flex flex-col h-full max-h-full">
        <!-- Body -->
        <nav class="p-3 size-full flex flex-col 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="lg:hidden mb-2 flex items-center justify-between">
            <button type="button" class="flex items-center gap-x-1.5 py-2 px-2.5 font-medium text-xs bg-secondary text-secondary-foreground rounded-lg focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none">
              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                <path d="M7.657 6.247c.11-.33.576-.33.686 0l.645 1.937a2.89 2.89 0 0 0 1.829 1.828l1.936.645c.33.11.33.576 0 .686l-1.937.645a2.89 2.89 0 0 0-1.828 1.829l-.645 1.936a.361.361 0 0 1-.686 0l-.645-1.937a2.89 2.89 0 0 0-1.828-1.828l-1.937-.645a.361.361 0 0 1 0-.686l1.937-.645a2.89 2.89 0 0 0 1.828-1.828zM3.794 1.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387A1.73 1.73 0 0 0 4.593 5.69l-.387 1.162a.217.217 0 0 1-.412 0L3.407 5.69A1.73 1.73 0 0 0 2.31 4.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387A1.73 1.73 0 0 0 3.407 2.31zM10.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.16 1.16 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.16 1.16 0 0 0-.732-.732L9.1 2.137a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732z" />
              </svg>
              Ask AI
            </button>

            <!-- Sidebar Toggle -->
            <button type="button" class="p-1.5 size-7.5 inline-flex items-center gap-x-1 text-xs rounded-md text-muted-foreground-1 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden" 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">
                <path d="M18 6 6 18" />
                <path d="m6 6 12 12" />
              </svg>
              <span class="sr-only">Sidebar Toggle</span>
            </button>
            <!-- End Sidebar Toggle -->
          </div>

          <button type="button" class="p-1.5 ps-2.5 w-full inline-flex items-center gap-x-2 text-sm rounded-lg bg-layer border border-layer-line text-muted-foreground-2 shadow-xs focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-pro-cmsssm" data-hs-overlay="#hs-pro-cmsssm">
            Search
            <span class="ms-auto flex items-center gap-x-1 py-px px-1.5 border border-line-2 rounded-md">
              <svg class="shrink-0 size-2.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 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"></path>
              </svg>
              <span class="text-[11px] uppercase">k</span>
            </span>
          </button>

          <div class="pt-3 mt-3 flex flex-col border-t border-sidebar-2-divider first:border-t-0 first:pt-0 first:mt-0">
            <span class="block ps-2.5 mb-2 font-medium text-xs uppercase text-muted-foreground-1">
              Home
            </span>

            <!-- List -->
            <ul class="flex flex-col gap-y-1">
              <li>
                <a class="w-full flex items-center gap-x-2 py-2 px-2.5 text-sm text-sidebar-2-nav-foreground rounded-lg hover:bg-sidebar-2-nav-hover focus:outline-hidden focus:bg-sidebar-2-nav-focus bg-sidebar-2-nav-active font-medium" href="#">
                  Dashboard
                </a>
              </li>
            </ul>
            <!-- End List -->
          </div>

          <div class="pt-3 mt-3 flex flex-col border-t border-sidebar-2-divider first:border-t-0 first:pt-0 first:mt-0">
            <span class="block ps-2.5 mb-2 font-medium text-xs uppercase text-muted-foreground-1">
              Pages
            </span>

            <!-- List -->
            <ul class="flex flex-col gap-y-1">
              <li>
                <a class="w-full flex items-center gap-x-2 py-2 px-2.5 text-sm text-sidebar-2-nav-foreground rounded-lg hover:bg-sidebar-2-nav-hover focus:outline-hidden focus:bg-sidebar-2-nav-focus " href="#">
                  Posts
                </a>
              </li>
              <li>
                <a class="w-full flex items-center gap-x-2 py-2 px-2.5 text-sm text-sidebar-2-nav-foreground rounded-lg hover:bg-sidebar-2-nav-hover focus:outline-hidden focus:bg-sidebar-2-nav-focus " href="#">
                  Members
                </a>
              </li>
            </ul>
            <!-- End List -->
          </div>

          <div class="pt-3 mt-3 flex flex-col border-t border-sidebar-2-divider first:border-t-0 first:pt-0 first:mt-0">
            <span class="block ps-2.5 mb-2 font-medium text-xs uppercase text-muted-foreground-1">
              Posts
            </span>

            <!-- List -->
            <ul class="flex flex-col gap-y-1">
              <li>
                <a class="w-full flex items-center gap-x-2 py-2 px-2.5 text-sm text-sidebar-2-nav-foreground rounded-lg hover:bg-sidebar-2-nav-hover focus:outline-hidden focus:bg-sidebar-2-nav-focus " href="#">
                  Create Post
                </a>
              </li>
              <li>
                <a class="w-full flex items-center gap-x-2 py-2 px-2.5 text-sm text-sidebar-2-nav-foreground rounded-lg hover:bg-sidebar-2-nav-hover focus:outline-hidden focus:bg-sidebar-2-nav-focus " href="#">
                  Draft
                </a>
              </li>
              <li>
                <a class="w-full flex items-center gap-x-2 py-2 px-2.5 text-sm text-sidebar-2-nav-foreground rounded-lg hover:bg-sidebar-2-nav-hover focus:outline-hidden focus:bg-sidebar-2-nav-focus " href="#">
                  Published
                </a>
              </li>
            </ul>
            <!-- End List -->
          </div>

          <div class="pt-3 mt-3 lg:hidden flex flex-col border-t border-sidebar-2-divider first:border-t-0 first:pt-0 first:mt-0">
            <span class="block ps-2.5 mb-2 font-medium text-xs uppercase text-muted-foreground-1">
              Others
            </span>

            <!-- List -->
            <ul class="flex flex-col gap-y-1">
              <li>
                <a class="w-full flex items-center gap-x-2 py-2 px-2.5 text-sm text-sidebar-2-nav-foreground rounded-lg hover:bg-sidebar-2-nav-hover focus:outline-hidden focus:bg-sidebar-2-nav-focus" href="#">
                  Docs
                </a>
              </li>
              <li>
                <a class="w-full flex items-center gap-x-2 py-2 px-2.5 text-sm text-sidebar-2-nav-foreground rounded-lg hover:bg-sidebar-2-nav-hover focus:outline-hidden focus:bg-sidebar-2-nav-focus" href="#">
                  API
                </a>
              </li>
            </ul>
            <!-- End List -->
          </div>
        </nav>
        <!-- End Body -->

        <!-- Footer -->
        <footer class="mt-auto p-3 flex flex-col">
          <!-- List -->
          <ul class="flex flex-col gap-y-1">
            <li>
              <a class="w-full flex items-center gap-x-2 py-2 px-2.5 text-sm text-sidebar-2-nav-foreground rounded-lg hover:bg-sidebar-2-nav-hover focus:outline-hidden focus:bg-sidebar-2-nav-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.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z" />
                </svg>
                What's new?
              </a>
            </li>
            <li>
              <a class="w-full flex items-center gap-x-2 py-2 px-2.5 text-sm text-sidebar-2-nav-foreground rounded-lg hover:bg-sidebar-2-nav-hover focus:outline-hidden focus:bg-sidebar-2-nav-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="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" />
                </svg>
                Help &amp; support
              </a>
            </li>
            <li class="lg:hidden">
              <a class="w-full flex items-center gap-x-2 py-2 px-2.5 text-sm text-sidebar-2-nav-foreground rounded-lg hover:bg-sidebar-2-nav-hover focus:outline-hidden focus:bg-sidebar-2-nav-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="M12 7v14" />
                  <path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z" />
                </svg>
                Knowledge Base
              </a>
            </li>
          </ul>
          <!-- End List -->
        </footer>
        <!-- End Footer -->
      </div>
    </div>
    <!-- End Sidebar -->

    <!-- Content -->
    <div class="h-[calc(100dvh-62px)] lg:h-full overflow-hidden flex flex-col bg-layer border border-layer-line shadow-xs rounded-lg">
      <!-- Header -->
      <div class="py-3 px-4 flex flex-wrap justify-between items-center gap-2 border-b border-card-line">
        <div>
          <h1 class="font-medium text-lg text-foreground">
            Dashboard
          </h1>
        </div>

        <!-- Button Group -->
        <div class="flex items-center gap-x-5">
          <span class="text-sm text-muted-foreground-1">
            Sign up for Pro
          </span>
          <a class="py-1.5 px-2 flex items-center justify-center gap-x-1 bg-primary-500/10 border border-primary-200 text-primary-700 text-xs rounded-full py-1 hover:bg-primary-500/20 focus:outline-hidden focus:bg-primary-500/20 dark:text-primary-400 dark:border-primary-500/20" href="#">
            Get 7 days free
            <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="m9 18 6-6-6-6"></path>
            </svg>
          </a>
        </div>
        <!-- End Button Group -->
      </div>
      <!-- End Header -->

      <!-- Body -->
      <div class="flex-1 flex flex-col overflow-hidden 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-1 flex flex-col lg:flex-row">
          <div class="flex-1 min-w-0 flex flex-col border-e border-layer-line">
            <!-- Negative Value Chart in Card -->
            <div class="p-4 flex flex-col border-b border-line-2">
              <!-- Select -->
              <div>
                <div class="relative inline-block">
                  <select id="hs-pro-select-revenue" data-hs-select='{
                      "placeholder": "Select option...",
                      "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                      "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative -ms-2.5 py-1.5 ps-2.5 pe-6 inline-flex shrink-0 justify-center items-center gap-x-1.5 text-sm text-foreground rounded-lg hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus before:absolute before:inset-0 before:z-1",
                      "dropdownClasses": "mt-2 z-50 w-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.5 px-2 w-full text-[13px] text-select-item-foreground rounded-lg cursor-pointer hover:bg-select-item-hover rounded-lg 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>"
                    }' class="hidden">
                    <option value="">Choose</option>
                    <option selected>Members</option>
                    <option>Posts</option>
                    <option>Views</option>
                  </select>
                </div>
              </div>
              <!-- End Select -->

              <!-- Grid -->
              <div class="mt-2 grid grid-cols-2 gap-2">
                <div class="flex flex-col">
                  <div class="flex items-center gap-2">
                    <span class="block font-medium text-xl text-foreground">
                      22,900
                    </span>
                    <span class="flex justify-center items-center gap-x-1 text-sm text-green-600 dark:text-green-500">
                      <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="m5 12 7-7 7 7"></path>
                        <path d="M12 19V5"></path>
                      </svg>
                      0.2%
                    </span>
                  </div>
                  <div class="flex items-center gap-1.5">
                    <span class="shrink-0 w-3 h-1.5 inline-block bg-chart-primary rounded-xs"></span>
                    <div class="grow">
                      <span class="block text-sm text-muted-foreground-1">
                        Free
                      </span>
                    </div>
                  </div>
                </div>
                <!-- End Col -->

                <div class="flex flex-col items-end">
                  <div class="flex items-center gap-2">
                    <span class="flex justify-center items-center gap-x-1 text-sm text-green-600 dark:text-green-500">
                      <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="m5 12 7-7 7 7"></path>
                        <path d="M12 19V5"></path>
                      </svg>
                      14.5%
                    </span>
                    <span class="block font-medium text-xl text-foreground">
                      24,300
                    </span>
                  </div>
                  <div class="flex items-center gap-1.5">
                    <span class="shrink-0 w-3 h-1.5 inline-block bg-[linear-gradient(135deg,var(--color-chart-3)_25%,transparent_25%,transparent_50%,var(--color-chart-3)_50%,var(--color-chart-3)_75%,transparent_75%,transparent)] bg-size-[4px_4px] rounded-xs"></span>
                    <div class="grow">
                      <span class="block text-sm text-muted-foreground-1">
                        Paid
                      </span>
                    </div>
                  </div>
                </div>
                <!-- End Col -->
              </div>
              <!-- End Grid -->

              <!-- Apex Line Chart -->
              <div id="hs-pro-anvpch" class="min-h-[323px] "></div>
            </div>
            <!-- End Negative Value Chart in Card -->

            <!-- Featured News Blog -->
            <div class="p-4 flex flex-col">
              <!-- Header -->
              <div class="pb-2 flex flex-wrap justify-between items-center gap-2 border-b border-dashed border-line-2">
                <h2 class="font-medium text-foreground">
                  Top posts
                </h2>

                <button type="button" class="py-1.5 px-2.5 flex items-center justify-center gap-x-1.5 border border-layer-line text-layer-foreground text-[13px] rounded-lg py-1 hover:bg-primary-50 hover:border-primary-100 hover:text-primary-700 focus:outline-none focus:bg-primary-50 focus:border-primary-100 focus:text-primary-700 dark:hover:bg-primary-500/20 dark:hover:border-primary-500/20 dark:hover:text-primary-400 dark:focus:bg-primary-500/20 dark:focus:border-primary-500/20 dark:focus:text-primary-400">
                  <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="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"></path>
                    <path d="M21 3v5h-5"></path>
                  </svg>
                  Refresh
                </button>
              </div>
              <!-- End Header -->

              <!-- Featured News Blog -->
              <div class="flex flex-col pb-4 last:pb-0 last:border-b-0">
                <div class="pt-4 flex flex-col md:flex-row gap-5">
                  <div class="relative aspect-4/2 md:aspect-4/3 w-full md:max-w-80 bg-secondary rounded-lg">
                    <img class="absolute inset-0 size-full object-cover object-center rounded-lg" src="https://images.unsplash.com/photo-1737625773603-3f0acdb5bb3f?q=80&w=480&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Post Image">
                  </div>

                  <div class="grow">
                    <div class="h-full flex flex-col">
                      <p class="text-sm text-muted-foreground-1">
                        Post title:
                      </p>
                      <h3 class="font-medium text-foreground">
                        Top posts
                      </h3>

                      <div class="mt-4 grid grid-cols-2 xl:grid-cols-3 gap-y-4 gap-x-2">
                        <!-- Item -->
                        <div class="flex flex-col gap-y-1">
                          <span class="text-[13px] text-muted-foreground-1">
                            Position:
                          </span>

                          <div class="flex items-center gap-x-1.5">
                            <svg class="shrink-0 size-4 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="M10 14.66v1.626a2 2 0 0 1-.976 1.696A5 5 0 0 0 7 21.978" />
                              <path d="M14 14.66v1.626a2 2 0 0 0 .976 1.696A5 5 0 0 1 17 21.978" />
                              <path d="M18 9h1.5a1 1 0 0 0 0-5H18" />
                              <path d="M4 22h16" />
                              <path d="M6 9a6 6 0 0 0 12 0V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1z" />
                              <path d="M6 9H4.5a1 1 0 0 1 0-5H6" />
                            </svg>

                            <div class="flex items-center gap-2">
                              <span class="font-medium text-sm text-foreground">
                                #1
                              </span>
                              <span class="flex justify-center items-center gap-x-1 text-sm text-green-600 dark:text-green-500">
                                <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="m5 12 7-7 7 7"></path>
                                  <path d="M12 19V5"></path>
                                </svg>
                                11
                              </span>
                            </div>
                          </div>
                        </div>
                        <!-- End Item -->

                        <!-- Item -->
                        <div class="flex flex-col gap-y-1">
                          <span class="text-[13px] text-muted-foreground-1">
                            Published date:
                          </span>

                          <div class="flex items-center gap-x-1.5">
                            <svg class="shrink-0 size-4 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="M8 2v4" />
                              <path d="M16 2v4" />
                              <path d="M21 17V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h11Z" />
                              <path d="M3 10h18" />
                              <path d="M15 22v-4a2 2 0 0 1 2-2h4" />
                            </svg>

                            <span class="font-medium text-sm text-foreground">
                              June 19, 2025
                            </span>
                          </div>
                        </div>
                        <!-- End Item -->

                        <!-- Item -->
                        <div class="flex flex-col gap-y-1">
                          <span class="text-[13px] text-muted-foreground-1">
                            Author:
                          </span>

                          <div class="flex items-center gap-x-1.5">
                            <svg class="shrink-0 size-4 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="M11.5 15H7a4 4 0 0 0-4 4v2" />
                              <path d="M21.378 16.626a1 1 0 0 0-3.004-3.004l-4.01 4.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z" />
                              <circle cx="10" cy="7" r="4" />
                            </svg>

                            <span class="font-medium text-sm text-foreground">
                              John Doe
                            </span>
                          </div>
                        </div>
                        <!-- End Item -->

                        <!-- Item -->
                        <div class="flex flex-col gap-y-1">
                          <span class="text-[13px] text-muted-foreground-1">
                            Category:
                          </span>

                          <div class="flex items-center gap-x-1.5">
                            <svg class="shrink-0 size-4 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">
                              <rect width="7" height="7" x="3" y="3" rx="1" />
                              <rect width="7" height="7" x="14" y="3" rx="1" />
                              <rect width="7" height="7" x="14" y="14" rx="1" />
                              <rect width="7" height="7" x="3" y="14" rx="1" />
                            </svg>

                            <span class="font-medium text-sm text-foreground">
                              Travel
                            </span>
                          </div>
                        </div>
                        <!-- End Item -->

                        <!-- Item -->
                        <div class="flex flex-col gap-y-1">
                          <span class="text-[13px] text-muted-foreground-1">
                            Tags:
                          </span>

                          <div class="flex items-center gap-x-1.5">
                            <svg class="shrink-0 size-4 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="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z" />
                              <circle cx="7.5" cy="7.5" r=".5" fill="currentColor" />
                            </svg>

                            <span class="font-medium text-sm text-foreground">
                              Adventure, Nature
                            </span>
                          </div>
                        </div>
                        <!-- End Item -->

                        <!-- Item -->
                        <div class="flex flex-col gap-y-1">
                          <span class="text-[13px] text-muted-foreground-1">
                            Views:
                          </span>

                          <div class="flex items-center gap-x-1.5">
                            <svg class="shrink-0 size-4 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="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" />
                              <circle cx="12" cy="12" r="3" />
                            </svg>

                            <div class="flex items-center gap-2">
                              <span class="font-medium text-sm text-foreground">
                                2,120
                              </span>
                              <span class="flex justify-center items-center gap-x-1 text-sm text-green-600 dark:text-green-500">
                                <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="m5 12 7-7 7 7"></path>
                                  <path d="M12 19V5"></path>
                                </svg>
                                1,399
                              </span>
                            </div>
                          </div>
                        </div>
                        <!-- End Item -->
                      </div>

                      <!-- Footer -->
                      <div class="mt-4 xl:mt-auto pt-4 border-t border-line-2">
                        <div class="flex flex-wrap justify-between items-center gap-1.5">
                          <div>
                            <a class="inline-flex items-center gap-x-0.5 text-[13px] text-primary underline underline-offset-2 hover:decoration-2 focus:outline-hidden focus:decoration-2 disabled:opacity-50 disabled:pointer-events-none" href="#">
                              View post
                              <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="m9 18 6-6-6-6"></path>
                              </svg>
                            </a>
                          </div>
                          <!-- End Col -->

                          <a class="py-1.5 px-2.5 flex items-center justify-center gap-x-1.5 border border-transparent text-muted-foreground-1 text-[13px] rounded-lg hover:bg-muted-hover hover:text-foreground focus:outline-none focus:bg-muted-focus focus:text-foreground" 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="M12 16v5" />
                              <path d="M16 14v7" />
                              <path d="M20 10v11" />
                              <path d="m22 3-8.646 8.646a.5.5 0 0 1-.708 0L9.354 8.354a.5.5 0 0 0-.707 0L2 15" />
                              <path d="M4 18v3" />
                              <path d="M8 14v7" />
                            </svg>
                            Metrics
                          </a>
                          <!-- End Col -->
                        </div>
                      </div>
                      <!-- End Footer -->
                    </div>
                  </div>
                </div>
              </div>
              <!-- End Featured News Blog -->

              <!-- Featured News Blog -->
              <div class="flex flex-col pb-4 last:pb-0 last:border-b-0">
                <div class="pt-4 flex flex-col md:flex-row gap-5">
                  <div class="relative aspect-4/2 md:aspect-4/3 w-full md:max-w-80 bg-secondary rounded-lg">
                    <img class="absolute inset-0 size-full object-cover object-center rounded-lg" src="https://images.unsplash.com/photo-1673767296837-8106e1b94d34?q=80&w=480&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Post Image">
                  </div>

                  <div class="grow">
                    <div class="h-full flex flex-col">
                      <p class="text-sm text-muted-foreground-1">
                        Post title:
                      </p>
                      <h3 class="font-medium text-foreground">
                        Video marketing best practices
                      </h3>

                      <div class="mt-4 grid grid-cols-2 xl:grid-cols-3 gap-y-4 gap-x-2">
                        <!-- Item -->
                        <div class="flex flex-col gap-y-1">
                          <span class="text-[13px] text-muted-foreground-1">
                            Position:
                          </span>

                          <div class="flex items-center gap-x-1.5">
                            <svg class="shrink-0 size-4 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="M10 14.66v1.626a2 2 0 0 1-.976 1.696A5 5 0 0 0 7 21.978" />
                              <path d="M14 14.66v1.626a2 2 0 0 0 .976 1.696A5 5 0 0 1 17 21.978" />
                              <path d="M18 9h1.5a1 1 0 0 0 0-5H18" />
                              <path d="M4 22h16" />
                              <path d="M6 9a6 6 0 0 0 12 0V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1z" />
                              <path d="M6 9H4.5a1 1 0 0 1 0-5H6" />
                            </svg>

                            <div class="flex items-center gap-2">
                              <span class="font-medium text-sm text-foreground">
                                #2
                              </span>
                              <span class="flex justify-center items-center gap-x-1 text-sm text-red-600 dark:text-red-500">
                                <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 5v14"></path>
                                  <path d="m19 12-7 7-7-7"></path>
                                </svg>
                                1
                              </span>
                            </div>
                          </div>
                        </div>
                        <!-- End Item -->

                        <!-- Item -->
                        <div class="flex flex-col gap-y-1">
                          <span class="text-[13px] text-muted-foreground-1">
                            Published date:
                          </span>

                          <div class="flex items-center gap-x-1.5">
                            <svg class="shrink-0 size-4 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="M8 2v4" />
                              <path d="M16 2v4" />
                              <path d="M21 17V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h11Z" />
                              <path d="M3 10h18" />
                              <path d="M15 22v-4a2 2 0 0 1 2-2h4" />
                            </svg>

                            <span class="font-medium text-sm text-foreground">
                              March 11, 2025
                            </span>
                          </div>
                        </div>
                        <!-- End Item -->

                        <!-- Item -->
                        <div class="flex flex-col gap-y-1">
                          <span class="text-[13px] text-muted-foreground-1">
                            Author:
                          </span>

                          <div class="flex items-center gap-x-1.5">
                            <svg class="shrink-0 size-4 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="M11.5 15H7a4 4 0 0 0-4 4v2" />
                              <path d="M21.378 16.626a1 1 0 0 0-3.004-3.004l-4.01 4.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z" />
                              <circle cx="10" cy="7" r="4" />
                            </svg>

                            <span class="font-medium text-sm text-foreground">
                              Lisa Anderson
                            </span>
                          </div>
                        </div>
                        <!-- End Item -->

                        <!-- Item -->
                        <div class="flex flex-col gap-y-1">
                          <span class="text-[13px] text-muted-foreground-1">
                            Category:
                          </span>

                          <div class="flex items-center gap-x-1.5">
                            <svg class="shrink-0 size-4 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">
                              <rect width="7" height="7" x="3" y="3" rx="1" />
                              <rect width="7" height="7" x="14" y="3" rx="1" />
                              <rect width="7" height="7" x="14" y="14" rx="1" />
                              <rect width="7" height="7" x="3" y="14" rx="1" />
                            </svg>

                            <span class="font-medium text-sm text-foreground">
                              Marketing
                            </span>
                          </div>
                        </div>
                        <!-- End Item -->

                        <!-- Item -->
                        <div class="flex flex-col gap-y-1">
                          <span class="text-[13px] text-muted-foreground-1">
                            Tags:
                          </span>

                          <div class="flex items-center gap-x-1.5">
                            <svg class="shrink-0 size-4 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="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z" />
                              <circle cx="7.5" cy="7.5" r=".5" fill="currentColor" />
                            </svg>

                            <span class="font-medium text-sm text-foreground">
                              Video, Marketing
                            </span>
                          </div>
                        </div>
                        <!-- End Item -->

                        <!-- Item -->
                        <div class="flex flex-col gap-y-1">
                          <span class="text-[13px] text-muted-foreground-1">
                            Views:
                          </span>

                          <div class="flex items-center gap-x-1.5">
                            <svg class="shrink-0 size-4 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="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" />
                              <circle cx="12" cy="12" r="3" />
                            </svg>

                            <div class="flex items-center gap-2">
                              <span class="font-medium text-sm text-foreground">
                                2,001
                              </span>
                              <span class="flex justify-center items-center gap-x-1 text-sm text-green-600 dark:text-green-500">
                                <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="m5 12 7-7 7 7"></path>
                                  <path d="M12 19V5"></path>
                                </svg>
                                1
                              </span>
                            </div>
                          </div>
                        </div>
                        <!-- End Item -->
                      </div>

                      <!-- Footer -->
                      <div class="mt-4 xl:mt-auto pt-4 border-t border-line-2">
                        <div class="flex flex-wrap justify-between items-center gap-1.5">
                          <div>
                            <a class="inline-flex items-center gap-x-0.5 text-[13px] text-primary underline underline-offset-2 hover:decoration-2 focus:outline-hidden focus:decoration-2 disabled:opacity-50 disabled:pointer-events-none" href="#">
                              View post
                              <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="m9 18 6-6-6-6"></path>
                              </svg>
                            </a>
                          </div>
                          <!-- End Col -->

                          <a class="py-1.5 px-2.5 flex items-center justify-center gap-x-1.5 border border-transparent text-muted-foreground-1 text-[13px] rounded-lg hover:bg-muted-hover hover:text-foreground focus:outline-none focus:bg-muted-focus focus:text-foreground" 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="M12 16v5" />
                              <path d="M16 14v7" />
                              <path d="M20 10v11" />
                              <path d="m22 3-8.646 8.646a.5.5 0 0 1-.708 0L9.354 8.354a.5.5 0 0 0-.707 0L2 15" />
                              <path d="M4 18v3" />
                              <path d="M8 14v7" />
                            </svg>
                            Metrics
                          </a>
                          <!-- End Col -->
                        </div>
                      </div>
                      <!-- End Footer -->
                    </div>
                  </div>
                </div>
              </div>
              <!-- End Featured News Blog -->
            </div>
            <!-- End Featured News Blog -->

            <!-- Loading Indicator -->
            <div class="h-16 flex flex-col justify-center items-center text-center">
              <span class="inline-flex gap-x-1">
                <span class="size-1.5 bg-surface-3 animate-[typing_1s_ease-in-out_infinite] rounded-full"></span>
                <span class="size-1.5 bg-surface-3 animate-[typing_1s_ease-in-out_infinite_0.2s] rounded-full"></span>
                <span class="size-1.5 bg-surface-3 animate-[typing_1s_ease-in-out_infinite_0.4s] rounded-full"></span>
              </span>
            </div>
            <!-- End Loading Indicator -->
          </div>
          <!-- End Col -->

          <div class="shrink-0">
            <div class="lg:w-80">
              <!-- Card Group -->
              <div class="relative z-1 ">
                <!-- Heading -->
                <div class="p-4 pb-0">
                  <div class="pb-2 flex flex-wrap justify-between items-center gap-2 border-b border-dashed border-line-2">
                    <h2 class="font-medium text-sm text-foreground">
                      Top authors
                    </h2>

                    <!-- Avatar Media -->
                    <button type="button" class="group inline-flex items-center text-[13px] text-start text-muted-foreground-1">
                      <span class="block me-1">
                        Next:
                      </span>
                      <span class="block text-primary underline-offset-2 decoration-2 group-hover:underline group-hover:text-primary-hover group-focus:underline group-focus:text-primary-focus">
                        Niki Kray
                      </span>
                      <svg class="shrink-0 size-4 ms-0.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 18 6-6-6-6"></path>
                      </svg>
                    </button>
                    <!-- End Avatar Media -->
                  </div>
                </div>
                <!-- End Heading -->

                <!-- Body -->
                <div class="p-4">
                  <!-- Profile -->
                  <div class="flex items-center gap-x-3">
                    <span class="relative size-14 shrink-0 bg-secondary rounded-full">
                      <img class="absolute inset-0 size-full object-cover rounded-full" src="https://images.unsplash.com/photo-1719937206140-c4b208c78aa7?q=80&w=160&h=160&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Post Image">
                    </span>
                    <div class="grow">
                      <h3 class="font-medium text-lg text-foreground">
                        Brian Williams
                      </h3>
                    </div>
                  </div>
                  <!-- End Profile -->

                  <!-- Grid List -->
                  <div class="mt-5 grid grid-cols-1 sm:grid-cols-2 gap-y-4 gap-x-2">
                    <!-- Item -->
                    <div class="flex flex-col gap-y-1">
                      <span class="text-[13px] text-muted-foreground-1">
                        Published posts:
                      </span>

                      <div class="flex items-center gap-x-1.5">
                        <svg class="shrink-0 size-4 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="M13.4 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7.4" />
                          <path d="M2 6h4" />
                          <path d="M2 10h4" />
                          <path d="M2 14h4" />
                          <path d="M2 18h4" />
                          <path d="M21.378 5.626a1 1 0 1 0-3.004-3.004l-5.01 5.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z" />
                        </svg>

                        <span class="font-medium text-sm text-foreground">
                          48
                        </span>
                      </div>
                    </div>
                    <!-- End Item -->

                    <!-- Item -->
                    <div class="flex flex-col gap-y-1">
                      <span class="text-[13px] text-muted-foreground-1">
                        Avg. post views:
                      </span>

                      <div class="flex items-center gap-x-1.5">
                        <svg class="shrink-0 size-4 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="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" />
                          <circle cx="12" cy="12" r="3" />
                        </svg>

                        <span class="font-medium text-sm text-foreground">
                          285
                        </span>
                      </div>
                    </div>
                    <!-- End Item -->

                    <!-- Item -->
                    <div class="flex flex-col gap-y-1">
                      <span class="text-[13px] text-muted-foreground-1">
                        Total comments:
                      </span>

                      <div class="flex items-center gap-x-1.5">
                        <svg class="shrink-0 size-4 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="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" />
                        </svg>

                        <span class="font-medium text-sm text-foreground">
                          18
                        </span>
                      </div>
                    </div>
                    <!-- End Item -->

                    <!-- Item -->
                    <div class="flex flex-col gap-y-1">
                      <span class="text-[13px] text-muted-foreground-1">
                        Posts referred:
                      </span>

                      <div class="flex items-center gap-x-1.5">
                        <svg class="shrink-0 size-4 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="M21 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6" />
                          <path d="m21 3-9 9" />
                          <path d="M15 3h6v6" />
                        </svg>

                        <span class="font-medium text-sm text-foreground">
                          62
                        </span>
                      </div>
                    </div>
                    <!-- End Item -->
                  </div>
                  <!-- End Grid List -->

                  <!-- Card -->
                  <div class="pt-5 mt-5 border-t border-line-2">
                    <!-- Header -->
                    <div class="grid grid-cols-2 gap-2">
                      <div class="flex flex-col">
                        <!-- Avatar Group -->
                        <div class="my-3 flex -space-x-3">
                          <img class="shrink-0 size-6 relative z-2 ring-2 ring-layer rounded-full" src="https://images.unsplash.com/photo-1708443683276-8a3eb30faef2?q=80&w=160&h=160&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Avatar">
                          <img class="shrink-0 size-6 relative z-1 -mt-3 ring-2 ring-layer 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">
                          <img class="shrink-0 size-6 relative ring-2 ring-layer rounded-full" src="https://images.unsplash.com/photo-1541101767792-f9b2b1c4f127?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Avatar">
                        </div>
                        <!-- End Avatar Group -->

                        <h3 class="text-sm text-muted-foreground-1">
                          Total views
                        </h3>

                        <p class="text-xl text-foreground">
                          1,420
                        </p>
                      </div>
                      <!-- End Col -->

                      <!-- Apex Chart -->
                      <div id="hs-pro-atatpvch" class="min-h-22.5"></div>
                    </div>
                    <!-- End Header -->

                    <div class="mt-3">
                      <a class="inline-flex items-center gap-x-0.5 text-[13px] text-primary underline underline-offset-2 hover:decoration-2 focus:outline-hidden focus:decoration-2 disabled:opacity-50 disabled:pointer-events-none" href="#">
                        View all
                        <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="m9 18 6-6-6-6"></path>
                        </svg>
                      </a>
                    </div>
                  </div>
                  <!-- End Card -->

                  <!-- Card -->
                  <div class="pt-5 mt-5 border-t border-line-2">
                    <!-- Progress Content -->
                    <div class="relative flex items-center gap-1">
                      <!-- Circular Progress -->
                      <svg class="shrink-0 size-12" width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
                        <g transform="translate(32,32)">
                          <g>
                            <rect x="-3" y="-28" width="6" height="14" rx="3" fill="currentColor" transform="rotate(0)" class="text-primary"></rect>
                            <rect x="-3" y="-28" width="6" height="14" rx="3" fill="currentColor" transform="rotate(30)" class="text-primary"></rect>
                            <rect x="-3" y="-28" width="6" height="14" rx="3" fill="currentColor" transform="rotate(60)" class="text-primary"></rect>
                            <rect x="-3" y="-28" width="6" height="14" rx="3" fill="currentColor" transform="rotate(90)" class="text-primary"></rect>
                            <rect x="-3" y="-28" width="6" height="14" rx="3" fill="currentColor" transform="rotate(120)" class="text-primary"></rect>
                            <rect x="-3" y="-28" width="6" height="14" rx="3" fill="currentColor" transform="rotate(150)" class="text-primary"></rect>
                            <rect x="-3" y="-28" width="6" height="14" rx="3" fill="currentColor" transform="rotate(180)" class="text-primary"></rect>
                            <rect x="-3" y="-28" width="6" height="14" rx="3" fill="currentColor" transform="rotate(210)" class="text-primary"></rect>
                            <rect x="-3" y="-28" width="6" height="14" rx="3" fill="currentColor" transform="rotate(240)" class="text-primary"></rect>
                            <rect x="-3" y="-28" width="6" height="14" rx="3" fill="currentColor" transform="rotate(270)" class="text-primary"></rect>
                            <rect x="-3" y="-28" width="6" height="14" rx="3" fill="currentColor" transform="rotate(300)" class="text-layer"></rect>
                            <rect x="-3" y="-28" width="6" height="14" rx="3" fill="currentColor" transform="rotate(330)" class="text-layer"></rect>
                          </g>
                        </g>
                      </svg>
                      <!-- End Circular Progress -->

                      <div class="grow pe-20">
                        <div class="flex flex-col">
                          <span class="block text-[13px] text-muted-foreground-1">
                            Content quality score
                          </span>
                          <div class="flex items-center gap-2">
                            <span class="block font-medium text-sm text-foreground">
                              76%
                            </span>
                            <span class="flex justify-center items-center gap-x-1 text-sm text-green-600 dark:text-green-500">
                              <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="m5 12 7-7 7 7"></path>
                                <path d="M12 19V5"></path>
                              </svg>
                              3.4%
                            </span>
                          </div>
                        </div>
                      </div>

                      <!-- Button -->
                      <div class="absolute top-1/2 inset-e-0 -translate-y-1/2">
                        <button type="button" class="group size-7 lg:size-auto lg:py-1.5 lg:px-2 flex items-center justify-center border border-layer-line text-layer-foreground text-xs rounded-full py-1 hover:bg-primary-50 hover:border-primary-100 hover:text-primary-700 focus:outline-none focus:bg-primary-50 focus:border-primary-100 focus:text-primary-700 dark:hover:bg-primary-500/20 dark:hover:border-primary-500/20 dark:hover:text-primary-400 dark:focus:bg-primary-500/20 dark:focus:border-primary-500/20 dark:focus:text-primary-400">
                          <span class="lg:block hidden max-w-0 overflow-hidden whitespace-nowrap opacity-0 transition-all duration-300 group-hover:me-1 group-hover:max-w-25 group-hover:opacity-100 group-focus:me-1 group-focus:max-w-25 group-focus:opacity-100">
                            View all
                          </span>
                          <svg class="shrink-0 size-3" 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 3h6v6" />
                            <path d="m21 3-7 7" />
                            <path d="m3 21 7-7" />
                            <path d="M9 21H3v-6" />
                          </svg>
                        </button>
                      </div>
                      <!-- End Button -->
                    </div>
                    <!-- End Progress Content -->

                    <!-- List Group -->
                    <ul class="mt-5 flex flex-col gap-y-3">
                      <!-- List Item -->
                      <li class="flex justify-between items-center gap-x-2">
                        <div class="flex flex-col gap-y-1">
                          <span class="block text-[13px] text-muted-foreground-1">
                            Title/subject length
                          </span>
                          <span class="block font-medium text-sm text-foreground">
                            50-60
                          </span>
                        </div>
                        <!-- End Col -->

                        <div class="flex flex-col justify-end items-end gap-1">
                          <div class="flex justify-end items-center gap-1">
                            <span class="shrink-0 w-1 h-3.5 inline-block bg-primary rounded-full"></span>
                            <span class="shrink-0 w-1 h-3.5 inline-block bg-primary rounded-full"></span>
                            <span class="shrink-0 w-1 h-3.5 inline-block bg-primary rounded-full"></span>
                          </div>

                          <p class="text-[13px] text-primary">
                            Good
                          </p>
                        </div>
                        <!-- End Col -->
                      </li>
                      <!-- End List Item -->

                      <!-- List Item -->
                      <li class="flex justify-between items-center gap-x-2">
                        <div class="flex flex-col gap-y-1">
                          <span class="block text-[13px] text-muted-foreground-1">
                            Body word count
                          </span>
                          <span class="block font-medium text-sm text-foreground">
                            300–800
                          </span>
                        </div>
                        <!-- End Col -->

                        <div class="flex flex-col justify-end items-end gap-1">
                          <div class="flex justify-end items-center gap-1">
                            <span class="shrink-0 w-1 h-3.5 inline-block bg-primary rounded-full"></span>
                            <span class="shrink-0 w-1 h-3.5 inline-block bg-primary rounded-full"></span>
                            <span class="shrink-0 w-1 h-3.5 inline-block bg-primary rounded-full"></span>
                          </div>

                          <p class="text-[13px] text-primary">
                            Good
                          </p>
                        </div>
                        <!-- End Col -->
                      </li>
                      <!-- End List Item -->

                      <!-- List Item -->
                      <li class="flex justify-between items-center gap-x-2">
                        <div class="flex flex-col gap-y-1">
                          <span class="block text-[13px] text-muted-foreground-1">
                            Tags/keywords
                          </span>
                          <span class="block font-medium text-sm text-foreground">
                            3-8
                          </span>
                        </div>
                        <!-- End Col -->

                        <div class="flex flex-col justify-end items-end gap-1">
                          <div class="flex justify-end items-center gap-1">
                            <span class="shrink-0 w-1 h-3.5 inline-block bg-primary rounded-full"></span>
                            <span class="shrink-0 w-1 h-3.5 inline-block bg-primary rounded-full"></span>
                            <span class="shrink-0 w-1 h-3.5 inline-block bg-primary rounded-full"></span>
                          </div>

                          <p class="text-[13px] text-primary">
                            Good
                          </p>
                        </div>
                        <!-- End Col -->
                      </li>
                      <!-- End List Item -->

                      <!-- List Item -->
                      <li class="flex justify-between items-center gap-x-2">
                        <div class="flex flex-col gap-y-1">
                          <span class="block text-[13px] text-muted-foreground-1">
                            Broken links
                          </span>
                          <span class="block font-medium text-sm text-foreground">
                            2
                          </span>
                        </div>
                        <!-- End Col -->

                        <div class="flex flex-col justify-end items-end gap-1">
                          <div class="flex justify-end items-center gap-1">
                            <span class="shrink-0 w-1 h-3.5 inline-block bg-orange-500 rounded-full dark:bg-orange-400"></span>
                            <span class="shrink-0 w-1 h-3.5 inline-block bg-orange-500 rounded-full dark:bg-orange-400"></span>
                            <span class="shrink-0 w-1 h-3.5 inline-block bg-surface-2 rounded-full"></span>
                          </div>

                          <p class="text-sm text-orange-500 dark:text-orange-400">
                            Poor
                          </p>
                        </div>
                        <!-- End Col -->
                      </li>
                      <!-- End List Item -->

                      <!-- List Item -->
                      <li class="flex justify-between items-center gap-x-2">
                        <div class="flex flex-col gap-y-1">
                          <span class="block text-[13px] text-muted-foreground-1">
                            Spelling &amp; grammar
                          </span>
                          <span class="block font-medium text-sm text-foreground">
                            100%
                          </span>
                        </div>
                        <!-- End Col -->

                        <div class="flex flex-col justify-end items-end gap-1">
                          <div class="flex justify-end items-center gap-1">
                            <span class="shrink-0 w-1 h-3.5 inline-block bg-primary rounded-full"></span>
                            <span class="shrink-0 w-1 h-3.5 inline-block bg-primary rounded-full"></span>
                            <span class="shrink-0 w-1 h-3.5 inline-block bg-primary rounded-full"></span>
                          </div>

                          <p class="text-[13px] text-primary">
                            Good
                          </p>
                        </div>
                        <!-- End Col -->
                      </li>
                      <!-- End List Item -->
                    </ul>
                    <!-- End List Group -->
                  </div>
                  <!-- End Card -->
                </div>
                <!-- End Body -->
              </div>
              <!-- End Card Group -->

              <div class="hidden lg:block border-t border-line-2">
                <div class="p-4">
                  <!-- Card -->
                  <div class="p-4 flex flex-col bg-surface rounded-lg">
                    <h3 class="font-semibold text-sm text-surface-foreground">
                      Connect to your mailboxes
                    </h3>

                    <div class="mt-3">
                      <p class="text-sm text-muted-foreground-1">
                        Connect to your favorite mailbox and recive updates to your inbox.
                      </p>
                    </div>

                    <div class="mt-3 flex flex-wrap justify-between items-center gap-2">
                      <a class="inline-flex items-center gap-x-0.5 text-[13px] text-primary underline underline-offset-2 hover:decoration-2 focus:outline-hidden focus:decoration-2 disabled:opacity-50 disabled:pointer-events-none" href="#">
                        Discover more
                      </a>

                      <!-- Avatar Group -->
                      <div class="flex gap-x-2">
                        <div class="size-7 flex justify-center items-center bg-layer shadow-xs rounded-md">
                          <svg class="shrink-0 size-4" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M7.34318 0.00012207H24.6569C28.725 0.00012207 32 3.27516 32 7.34327V24.657C32 28.7251 28.725 32.0001 24.6569 32.0001H7.34318C3.27507 32.0001 2.52724e-05 28.7251 2.52724e-05 24.657V7.34327C2.52724e-05 3.27516 3.27507 0.00012207 7.34318 0.00012207Z" fill="url(#paint0_linear_5465_1620)"></path>
                            <path d="M7.01113 9.1001C6.84252 9.1001 6.68368 9.12919 6.53335 9.18899L9.54446 12.289L12.5889 15.4446L12.6445 15.5112L12.8222 15.689L13 15.8779L15.6111 18.5557C15.6546 18.5827 15.7806 18.6994 15.879 18.7486C16.0058 18.812 16.1432 18.8704 16.2849 18.8754C16.4377 18.8809 16.594 18.8371 16.7315 18.7702C16.8345 18.7201 16.8803 18.6483 17 18.5557L20.0222 15.4334L26.0222 9.25566C25.8332 9.15324 25.6239 9.1001 25.4 9.1001H7.01113ZM6.08891 9.47788C5.7678 9.78214 5.56668 10.2395 5.56668 10.7557V20.9334C5.56668 21.3513 5.7009 21.731 5.92224 22.0223L6.34446 21.6223L9.48891 18.5668L12.2778 15.8668L12.2222 15.8001L9.16668 12.6557L6.11113 9.5001L6.08891 9.47788ZM26.4222 9.57788L20.4 15.8001L20.3445 15.8557L23.2445 18.6668L26.3889 21.7223L26.5778 21.9001C26.7471 21.6285 26.8445 21.2938 26.8445 20.9334V10.7557C26.8445 10.2955 26.685 9.87817 26.4222 9.57788ZM12.6333 16.2334L9.85557 18.9334L6.70002 21.989L6.30002 22.3779C6.5109 22.5137 6.75088 22.6001 7.01113 22.6001H25.4C25.7129 22.6001 25.9967 22.4797 26.2334 22.289L26.0334 22.089L22.8778 19.0334L19.9778 16.2334L17.3667 18.9223C17.2254 19.016 17.1309 19.1199 16.9929 19.1837C16.7709 19.2864 16.5275 19.3733 16.2828 19.3696C16.0375 19.3658 15.797 19.2698 15.5768 19.1615C15.4663 19.1072 15.4074 19.0531 15.2778 18.9446L12.6333 16.2334Z" fill="white"></path>
                            <defs>
                              <linearGradient id="paint0_linear_5465_1620" x1="16.2241" y1="31.8717" x2="16.2552" y2="0.386437" gradientUnits="userSpaceOnUse">
                                <stop stop-color="#70EFFF"></stop>
                                <stop offset="1" stop-color="#5770FF"></stop>
                              </linearGradient>
                            </defs>
                          </svg>
                        </div>
                        <div class="size-7 flex justify-center items-center bg-layer shadow-xs rounded-md">
                          <svg class="shrink-0 size-4" width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <g clip-path="url(#clip0_41)">
                              <path d="M32.2566 16.36C32.2566 15.04 32.1567 14.08 31.9171 13.08H16.9166V19.02H25.7251C25.5454 20.5 24.5866 22.72 22.4494 24.22L22.4294 24.42L27.1633 28.1L27.4828 28.14C30.5189 25.34 32.2566 21.22 32.2566 16.36Z" fill="#4285F4"></path>
                              <path d="M16.9166 32C21.231 32 24.8463 30.58 27.5028 28.12L22.4694 24.2C21.1111 25.14 19.3135 25.8 16.9366 25.8C12.7021 25.8 9.12677 23 7.84844 19.16L7.66867 19.18L2.71513 23L2.65521 23.18C5.2718 28.4 10.6648 32 16.9166 32Z" fill="#34A853"></path>
                              <path d="M7.82845 19.16C7.48889 18.16 7.28915 17.1 7.28915 16C7.28915 14.9 7.48889 13.84 7.80848 12.84V12.62L2.81499 8.73999L2.6552 8.81999C1.55663 10.98 0.937439 13.42 0.937439 16C0.937439 18.58 1.55663 21.02 2.63522 23.18L7.82845 19.16Z" fill="#FBBC05"></path>
                              <path d="M16.9166 6.18C19.9127 6.18 21.9501 7.48 23.0886 8.56L27.6027 4.16C24.8263 1.58 21.231 0 16.9166 0C10.6648 0 5.27181 3.6 2.63525 8.82L7.80851 12.84C9.10681 8.98 12.6821 6.18 16.9166 6.18Z" fill="#EB4335"></path>
                            </g>
                            <defs>
                              <clipPath id="clip0_41">
                                <rect width="32" height="32" fill="white" transform="translate(0.937439)"></rect>
                              </clipPath>
                            </defs>
                          </svg>
                        </div>
                        <div class="size-7 flex justify-center items-center bg-layer shadow-xs rounded-md">
                          <svg class="shrink-0 size-4" width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M0.04 8C0.04 3.5816 3.6208 0 8.04 0C12.4576 0 16.04 3.5816 16.04 8C16.04 12.4184 12.4576 16 8.04 16C3.6208 16 0.04 12.4184 0.04 8Z" fill="#FC3F1D"></path>
                            <path d="M9.064 4.5328H8.3248C6.9696 4.5328 6.2568 5.2192 6.2568 6.2312C6.2568 7.3752 6.7496 7.9112 7.7616 8.5984L8.5976 9.1616L6.1952 12.7512H4.4L6.556 9.54C5.316 8.6512 4.62 7.788 4.62 6.328C4.62 4.4976 5.896 3.248 8.316 3.248H10.7184V12.7424H9.064V4.5328Z" fill="white"></path>
                          </svg>
                        </div>
                      </div>
                      <!-- End Avatar Group -->
                    </div>
                  </div>
                  <!-- End Card -->
                </div>
              </div>
            </div>
          </div>
          <!-- End Col -->
        </div>
      </div>
      <!-- End Body -->
    </div>
    <!-- End Content -->
  </main>
  <!-- ========== END MAIN CONTENT ========== -->

  <!-- JS Implementing Plugins -->

  <!-- JS PLUGINS -->
  <!-- Required plugins -->
  <script src="https://cdn.jsdelivr.net/npm/preline/dist/index.js"></script>
  <!-- Clipboard -->
  <script src="https://cdn.jsdelivr.net/npm/clipboard/dist/clipboard.min.js"></script>
  <script src="https://preline.co/assets/js/hs-copy-clipboard-helper.js"></script>

  <!-- Apexcharts -->
  <script src="https://cdn.jsdelivr.net/npm/lodash/lodash.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/apexcharts/dist/apexcharts.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/preline/dist/helper-shared.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/preline/dist/helper-apexcharts.js"></script>

  <!-- JS INITIALIZATIONS -->
  <script>
    window.addEventListener('load', () => {
      (function () {
        buildChart('#hs-pro-anvpch', (mode) => ({
          chart: {
            height: 300,
            type: 'bar',
            stacked: true,
            toolbar: {
              show: false
            },
            zoom: {
              enabled: false
            },
          },
          series: [
            {
              name: 'Paid members',
              data: [16600, 20000, 15800, 14200, 17200, 22800, 21800, 29400, 22600, 22900]
            },
            {
              name: 'Free members',
              data: [-10900, -15800, -23700, -13500, -6750, -17900, -18700, -17300, -17100, -24300]
            }
          ],
          fill: {
            type: ['pattern', 'solid'],
            pattern: {
              style: ['slantedLines', 'none'],
              width: 6,
              height: 6,
              strokeWidth: 2
            }
          },
          plotOptions: {
            bar: {
              horizontal: false,
              columnWidth: '70%',
            }
          },
          legend: {
            show: false,
          },
          dataLabels: {
            enabled: false
          },
          xaxis: {
            type: 'category',
            categories: [
              '1 Jun 2025',
              '2 Jun 2025',
              '3 Jun 2025',
              '4 Jun 2025',
              '5 Jun 2025',
              '6 Jun 2025',
              '7 Jun 2025',
              '8 Jun 2025',
              '9 Jun 2025',
              '10 Jun 2025',
            ],
            labels: {
              rotate: -45,
              style: {
                colors: varToColor('--chart-colors-xaxis-labels'),
                fontSize: '13px',
                fontFamily: cssVarToValue('--font-sans'),
                fontWeight: 400
              }
            },
            axisTicks: {
              show: false
            },
            axisBorder: {
              show: false
            }
          },
          yaxis: {
            labels: {
              align: 'right',
              minWidth: 0,
              maxWidth: 140,
              style: {
                colors: varToColor('--chart-colors-yaxis-labels'),
                fontSize: '12px',
                fontFamily: cssVarToValue('--font-sans'),
                fontWeight: 400
              },
              formatter: (value) => `${Math.abs(value) >= 1000 ? `${Math.abs(value / 1000)}k` : Math.abs(value)}`
            }
          },
          tooltip: {
            x: {
              format: 'MMMM yyyy'
            },
            y: {
              formatter: (value) => {
                const abs = Math.abs(value);
                return `$${abs >= 1000 ? `${abs / 1000}k` : abs}`;
              }
            },
            custom: function (props) {
              return buildTooltipCompareTwo(props, {
                title: 'Members',
                mode,
                hasCategory: false,
                hasTextLabel: true,
                wrapperExtClasses: 'min-w-36',
                isValueDivided: false,
                valuePrefix: '',
                labelDivider: ':',
                labelExtClasses: 'ms-2'
              });
            }
          },
          grid: {
            strokeDashArray: 2,
            borderColor: mode === 'dark' ? varToColor('--chart-colors-grid-border-inverse') : varToColor('--chart-colors-grid-border')
          },
          responsive: [{
            breakpoint: 568,
            options: {
              chart: {
                height: 280
              },
              xaxis: {
                labels: {
                  show: false,
                },
                axisBorder: {
                  show: false,
                }
              },
              yaxis: {
                labels: {
                  style: {
                    colors: varToColor('--chart-colors-yaxis-labels'),
                    fontSize: '11px',
                    fontFamily: cssVarToValue('--font-sans'),
                    fontWeight: 400
                  },
                  formatter: (value) => `${Math.abs(value) >= 1000 ? `${Math.abs(value / 1000)}k` : Math.abs(value)}`
                }
              },
              tooltip: {
                custom: function (props) {
                  const { w, dataPointIndex } = props;
                  const { categories } = w.config.xaxis;

                  return buildTooltipCompareTwo(props, {
                    title: `Members <br> <span class="text-xs">${categories[dataPointIndex]}</span>`,
                    mode,
                    hasCategory: false,
                    hasTextLabel: true,
                    wrapperExtClasses: 'min-w-36',
                    isValueDivided: false,
                    valuePrefix: '',
                    labelDivider: ':',
                    labelExtClasses: 'ms-2'
                  });
                }
              },
            }
          }]
        }), () => ({
          colors: [varToColor('--chart-colors-chart-3'), varToColor('--chart-colors-primary')],
          xaxis: {
            labels: {
              style: {
                colors: varToColor('--chart-colors-xaxis-labels'),
              }
            }
          },
          yaxis: {
            labels: {
              style: {
                colors: varToColor('--chart-colors-yaxis-labels'),
              }
            }
          },
        }), () => ({
          colors: [varToColor('--chart-colors-chart-3-inverse'), varToColor('--chart-colors-primary-inverse')],
          xaxis: {
            labels: {
              style: {
                colors: varToColor('--chart-colors-xaxis-labels-inverse'),
              }
            }
          },
          yaxis: {
            labels: {
              style: {
                colors: varToColor('--chart-colors-yaxis-labels-inverse')
              }
            }
          },
        }));
      })();
    });
  </script>
  <script>
  	window.addEventListener('load', () => {
  	  // Apex Area Chart
  	  (function () {
  	    buildChart('#hs-pro-atatpvch', (mode) => ({
  	      chart: {
  	        height: 90,
  	        type: 'area',
  	        toolbar: {
  	          show: false
  	        },
  	        sparkline: {
  	          enabled: true
  	        },
  	        zoom: {
  	          enabled: false
  	        }
  	      },
  	      series: [
            {
  						name: 'Total views',
  						data: [780, 770, 760, 790, 775, 765, 755, 870, 880, 890, 875, 870, 860, 975, 990, 965, 960, 970, 975, 1085, 1070, 1060, 1080, 1075, 1065, 1070, 1060, 1080, 1075, 1065, 1071],
  						valuePostfix: ''
            },
            {
  						name: 'Total posts',
  						data: [25, 26, 27, 22, 25, 26, 37, 36, 35, 33, 35, 36, 37, 35, 44, 46, 47, 46, 45, 44, 46, 47, 45, 45, 46, 46, 47, 45, 45, 46, 48],
              valuePostfix: ''
            }
          ],
  	      legend: {
  	        show: false
  	      },
  	      dataLabels: {
  	        enabled: false
  	      },
  	      stroke: {
  	        curve: 'straight',
  	        width: 2
  	      },
  	      fill: {
  	        type: 'gradient',
  	        gradient: {
  	          type: 'vertical',
  	          shadeIntensity: 1,
  	          opacityFrom: 0.2,
  	          opacityTo: 0.8
  	        }
  	      },
  	      xaxis: {
            type: 'category',
            categories: [
              '1 Jun 2025',
              '2 Jun 2025',
              '3 Jun 2025',
              '4 Jun 2025',
              '5 Jun 2025',
              '6 Jun 2025',
              '7 Jun 2025',
              '8 Jun 2025',
              '9 Jun 2025',
              '10 Jun 2025',
              '11 Jun 2025',
              '12 Jun 2025',
              '13 Jun 2025',
              '14 Jun 2025',
              '15 Jun 2025',
              '16 Jun 2025',
              '17 Jun 2025',
              '18 Jun 2025',
              '19 Jun 2025',
              '20 Jun 2025',
              '21 Jun 2025',
              '22 Jun 2025',
              '23 Jun 2025',
              '24 Jun 2025',
              '25 Jun 2025',
              '26 Jun 2025',
              '27 Jun 2025',
              '28 Jun 2025',
              '29 Jun 2025',
              '30 Jun 2025',
              '31 Jun 2025',
            ],
            crosshairs: {
              show: false
            }
          },
  	      tooltip: {
  	        x: {
  	          format: 'MMMM yyyy'
  	        },
  	        y: {
  	          formatter: (value) => `$${value >= 1000 ? `${value / 1000}k` : value}`
  	        },
  	        custom: function (props) {
  	          return buildTooltipCompareTwoAlt(props, {
  	            title: 'Members',
  	            mode,
                hasCategory: false,
                hasTextLabel: true,
                wrapperExtClasses: 'min-w-36',
                isValueDivided: false,
                valuePrefix: '',
                labelDivider: ':',
                labelExtClasses: 'ms-2'
  	          });
  	        }
  	      },
  	      responsive: [{
  	        breakpoint: 568,
  	        options: {
  	          labels: {
  	            style: {
  	              colors: varToColor('--chart-colors-labels'),
  	              fontSize: '11px',
  	              fontFamily: cssVarToValue('--font-sans'),
  	              fontWeight: 400
  	            },
  	            offsetX: -2,
  	            formatter: (title) => title.slice(0, 3)
  	          },
  	          yaxis: {
  	            labels: {
  	              align: 'left',
  	              minWidth: 0,
  	              maxWidth: 140,
  	              style: {
  	                colors: varToColor('--chart-colors-yaxis-labels'),
  	                fontSize: '11px',
  	                fontFamily: cssVarToValue('--font-sans'),
  	                fontWeight: 400
  	              },
  	              formatter: (value) => value >= 1000 ? `${value / 1000}k` : value
  	            }
  	          },
  	        },
  	      }]
  	    }), () => ({
  	      colors: [varToColor('--chart-colors-primary-hex'), varToColor('--chart-colors-chart-5-hex')],
  	      fill: {
  	        gradient: {
  	          stops: [0, 90, 100]
  	        }
  	      },
  	      grid: {
  	        strokeDashArray: 2,
  	        borderColor: varToColor('--chart-colors-grid-border')
  	      }
  	    }), () => ({
  	      colors: [varToColor('--chart-colors-primary-hex-inverse'), varToColor('--chart-colors-chart-5-hex-inverse')],
  	      fill: {
  	        gradient: {
  	          stops: [100, 90, 0]
  	        }
  	      },
  	      grid: {
  	        strokeDashArray: 2,
  	        borderColor: varToColor('--chart-colors-grid-border-inverse')
  	      }
  	    }));
  	  })();
  	});
  </script>

  <!-- JS THIRD PARTY PLUGINS -->
  <!-- Google Analytics. Global site tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-B73TDMXKF5"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
  
    function gtag() {
      dataLayer.push(arguments);
    }
  
    gtag('js', new Date());
    gtag('config', 'G-B73TDMXKF5');
  </script>
</body>
</html>