Tailwind CSS Settings Modals Blocks

Settings Modals

Settings modals for call preferences, regional shopping options, location confirmation, and notification controls without leaving the current page.

Call settings modal combines sidebar navigation, layered settings forms, select menus, and device controls across multiple tabs.

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

<div id="hs-modal-settings-body" class="flex flex-col lg:flex-row">
            <div class="shrink-0">
              <div class="size-full lg:w-60 flex flex-col">
                
                <div class="py-4 px-2 lg:p-0">
                  <select id="hs-pro-vcnadpn-select" class="hidden" data-hs-select='{
                    "placeholder": "Select option...",
                    "toggleTag": "<button type=\"button\" aria-expanded=\"false\"><span class=\"me-2\" data-icon></span><span class=\"text-foreground\" data-title></span></button>",
                    "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2 px-2 pe-8 flex items-center text-nowrap w-full cursor-pointer bg-surface text-surface-foreground rounded-lg text-start text-sm",
                    "wrapperClasses": "lg:hidden",
                    "dropdownClasses": "mt-2 z-50 w-full max-h-72 p-1 space-y-0.5 bg-select border border-select-line rounded-lg shadow-xl 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",
                    "optionClasses": "hs-selected:bg-select-item-active py-2 px-3 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-lg focus:outline-hidden focus:bg-select-item-focus",
                    "optionTemplate": "<div class=\"flex items-center\"><div class=\"me-3\" data-icon></div><div class=\"text-foreground\" data-title></div></div>",
                    "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2 -translate-y-1/2\"><svg class=\"shrink-0 size-3.5 text-muted-foreground-1\" 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></div>"
                  }'>
                    <option value="#hs-pro-tabs-sg-general" data-hs-select-option='{
                      "icon": "<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>"
                    }' selected>General</option>
                    <option value="#hs-pro-tabs-sg-navigation" data-hs-select-option='{
                      "icon": "<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=\"7\" height=\"7\" x=\"3\" y=\"3\" rx=\"1\"/><rect width=\"7\" height=\"7\" x=\"3\" y=\"14\" rx=\"1\"/><path d=\"M14 4h7\"/><path d=\"M14 9h7\"/><path d=\"M14 15h7\"/><path d=\"M14 20h7\"/></svg>"
                    }'>Navigation</option>
                    <option value="#hs-pro-tabs-sg-video-and-audio" data-hs-select-option='{
                      "icon": "<svg class=\"shrink-0 size-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5\"/><rect x=\"2\" y=\"6\" width=\"14\" height=\"12\" rx=\"2\"/></svg>"
                    }'>Video & Audio</option>
                    <option value="#hs-pro-tabs-sg-notifications" data-hs-select-option='{
                      "icon": "<svg class=\"shrink-0 size-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M10.268 21a2 2 0 0 0 3.464 0\"/><path d=\"M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326\"/></svg>"
                    }'>Notifications</option>
                  </select>
                </div>

<nav id="hs-pro-vcnadpn-tabs" class="p-4 hidden lg:flex flex-col gap-1" aria-label="Tabs" role="tablist" aria-orientation="horizontal">
                  <button type="button" class="hs-tab-active:bg-muted-active hs-tab-active:text-foreground w-full flex items-center gap-x-2 p-2 text-start text-sm rounded-lg text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden active" id="hs-pro-tabs-sg-item-general" aria-selected="true" data-hs-tab="#hs-pro-tabs-sg-general" aria-controls="hs-pro-tabs-sg-general" role="tab" >
                    <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>General
                  </button>
                  <button type="button" class="hs-tab-active:bg-muted-active hs-tab-active:text-foreground w-full flex items-center gap-x-2 p-2 text-start text-sm rounded-lg text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden " id="hs-pro-tabs-sg-item-navigation" aria-selected="false" data-hs-tab="#hs-pro-tabs-sg-navigation" aria-controls="hs-pro-tabs-sg-navigation" role="tab" >
                    <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="7" height="7" x="3" y="3" rx="1"/><rect width="7" height="7" x="3" y="14" rx="1"/><path d="M14 4h7"/><path d="M14 9h7"/><path d="M14 15h7"/><path d="M14 20h7"/></svg>Navigation
                  </button>
                  <button type="button" class="hs-tab-active:bg-muted-active hs-tab-active:text-foreground w-full flex items-center gap-x-2 p-2 text-start text-sm rounded-lg text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden " id="hs-pro-tabs-sg-item-video-and-audio" aria-selected="false" data-hs-tab="#hs-pro-tabs-sg-video-and-audio" aria-controls="hs-pro-tabs-sg-video-and-audio" role="tab" >
                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5"/><rect x="2" y="6" width="14" height="12" rx="2"/></svg>Video & Audio
                  </button>
                  <button type="button" class="hs-tab-active:bg-muted-active hs-tab-active:text-foreground w-full flex items-center gap-x-2 p-2 text-start text-sm rounded-lg text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden " id="hs-pro-tabs-sg-item-notifications" aria-selected="false" data-hs-tab="#hs-pro-tabs-sg-notifications" aria-controls="hs-pro-tabs-sg-notifications" role="tab" >
                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></svg>Notifications
                  </button>
                </nav>

<div class="mt-auto p-4 hidden lg:flex flex-col gap-1">
                  <a class="relative flex items-center gap-x-2 p-2 rounded-lg text-sm text-muted-foreground-2 hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" href="#">
                    <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="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/></svg>
                    Help
                  </a>
              
                  <a class="relative flex items-center gap-x-2 p-2 rounded-lg text-sm text-muted-foreground-2 hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" href="#">
                    <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="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20"/></svg>
                    Documentation
                  </a>
                </div>
              </div>
            </div>

<div class="grow">
              
              <div id="hs-pro-tabs-sg-general" class="h-full" role="tabpanel" aria-labelledby="hs-pro-tabs-sg-item-general">
                <div class="my-1 me-1 pt-1 sm:pt-2.5 p-4 h-[calc(55dvh)] lg:h-[calc(65dvh)] overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                  
                  <form>
                    <div class="flex flex-col gap-y-6">
                      
                      <div class="flex flex-col">
                        <label class="block mb-1 font-medium text-sm text-foreground">
                          Language
                        </label>

<p class="mb-3 text-sm text-muted-foreground-1">
                          Choose your preferred language.
                        </p>

<div class="w-full max-w-60">
                          
                          <div class="relative inline-block w-full">
                            <select id="hs-pro-select-language" data-hs-select='{
                              "placeholder": "Select language",
                              "toggleTag": "<button type=\"button\" aria-expanded=\"false\"><div data-icon></div></button>",
                              "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2 ps-3 pe-9 flex gap-x-2 text-nowrap w-full cursor-pointer bg-layer border border-layer-line rounded-lg text-start text-sm text-layer-foreground hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus",
                              "dropdownClasses": "inset-e-0 w-full min-w-45 max-h-60 p-1 space-y-0.5 z-80 w-full 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-2 px-4 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-lg focus:outline-hidden focus:bg-select-item-focus",
                              "optionTemplate": "<div><div class=\"flex items-center gap-x-2\"><div data-icon></div><div class=\"text-foreground\" data-title></div><span class=\"hidden hs-selected:block ms-auto\"><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></div>",
                              "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-4 text-muted-foreground-1\" 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>",
                              "dropdownScope": "window",
                              "viewport": "#hs-modal-settings-body"
                            }' class="hidden">
                              <option value="">Choose</option>
                              <option value="English-us" selected data-hs-select-option='{
                                "icon": "<svg class=\"shrink-0 size-4 rounded-full\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><g fill-rule=\"evenodd\"><g stroke-width=\"1pt\"><path fill=\"#bd3d44\" d=\"M0 0h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0z\" transform=\"scale(3.9385)\"/><path fill=\"#fff\" d=\"M0 10h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0z\" transform=\"scale(3.9385)\"/></g><path fill=\"#192f5d\" d=\"M0 0h98.8v70H0z\" transform=\"scale(3.9385)\"/><path fill=\"#fff\" d=\"M8.2 3l1 2.8H12L9.7 7.5l.9 2.7-2.4-1.7L6 10.2l.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7L74 8.5l-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 7.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 24.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 21.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 38.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 35.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 52.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 49.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 66.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 63.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9z\" transform=\"scale(3.9385)\"/></g></svg>"}'>
                                English (US)
                              </option>
                              <option value="English-uk" data-hs-select-option='{
                                "icon": "<svg class=\"shrink-0 size-4 rounded-full\" xmlns=\"http://www.w3.org/2000/svg\" id=\"flag-icon-css-gb\" viewBox=\"0 0 512 512\"><path fill=\"#012169\" d=\"M0 0h512v512H0z\"/><path fill=\"#FFF\" d=\"M512 0v64L322 256l190 187v69h-67L254 324 68 512H0v-68l186-187L0 74V0h62l192 188L440 0z\"/><path fill=\"#C8102E\" d=\"M184 324l11 34L42 512H0v-3l184-185zm124-12l54 8 150 147v45L308 312zM512 0L320 196l-4-44L466 0h46zM0 1l193 189-59-8L0 49V1z\"/><path fill=\"#FFF\" d=\"M176 0v512h160V0H176zM0 176v160h512V176H0z\"/><path fill=\"#C8102E\" d=\"M0 208v96h512v-96H0zM208 0v512h96V0h-96z\"/></svg>"}'>
                                English (UK)
                              </option>
                              <option value="Deutsch" data-hs-select-option='{
                                "icon": "<svg class=\"shrink-0 size-4 rounded-full\" xmlns=\"http://www.w3.org/2000/svg\" id=\"flag-icon-css-de\" viewBox=\"0 0 512 512\"><path fill=\"#ffce00\" d=\"M0 341.3h512V512H0z\"/><path d=\"M0 0h512v170.7H0z\"/><path fill=\"#d00\" d=\"M0 170.7h512v170.6H0z\"/></svg>"}'>
                                Deutsch
                              </option>
                              <option value="Dansk" data-hs-select-option='{
                                "icon": "<svg class=\"shrink-0 size-4 rounded-full\" xmlns=\"http://www.w3.org/2000/svg\" id=\"flag-icon-css-dk\" viewBox=\"0 0 512 512\"><path fill=\"#c8102e\" d=\"M0 0h512.1v512H0z\"/><path fill=\"#fff\" d=\"M144 0h73.1v512H144z\"/><path fill=\"#fff\" d=\"M0 219.4h512.1v73.2H0z\"/></svg>"}'>
                                Dansk
                              </option>
                              <option value="Italiano" data-hs-select-option='{
                                "icon": "<svg class=\"shrink-0 size-4 rounded-full\" xmlns=\"http://www.w3.org/2000/svg\" id=\"flag-icon-css-it\" viewBox=\"0 0 512 512\"><g fill-rule=\"evenodd\" stroke-width=\"1pt\"><path fill=\"#fff\" d=\"M0 0h512v512H0z\"/><path fill=\"#009246\" d=\"M0 0h170.7v512H0z\"/><path fill=\"#ce2b37\" d=\"M341.3 0H512v512H341.3z\"/></g></svg>"}'>
                                Italiano
                              </option>
                              <option value="中文-繁體" data-hs-select-option='{
                                "icon": "<svg class=\"shrink-0 size-4 rounded-full\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" id=\"flag-icon-css-cn\" viewBox=\"0 0 512 512\"><defs><path id=\"a\" fill=\"#ffde00\" d=\"M1-.3L-.7.8 0-1 .6.8-1-.3z\"/></defs><path fill=\"#de2910\" d=\"M0 0h512v512H0z\"/><use width=\"30\" height=\"20\" transform=\"matrix(76.8 0 0 76.8 128 128)\" xlink:href=\"#a\"/><use width=\"30\" height=\"20\" transform=\"rotate(-121 142.6 -47) scale(25.5827)\" xlink:href=\"#a\"/><use width=\"30\" height=\"20\" transform=\"rotate(-98.1 198 -82) scale(25.6)\" xlink:href=\"#a\"/><use width=\"30\" height=\"20\" transform=\"rotate(-74 272.4 -114) scale(25.6137)\" xlink:href=\"#a\"/><use width=\"30\" height=\"20\" transform=\"matrix(16 -19.968 19.968 16 256 230.4)\" xlink:href=\"#a\"/></svg>"}'>
                                中文 (繁體)
                              </option>
                            </select>
                          </div>
                          
                        </div>
                      </div>

<div class="flex flex-col">
                        <label class="block mb-1 font-medium text-sm text-foreground">
                          Time zone
                        </label>

<div class="flex flex-col gap-y-3">
                          
                          <div class="flex items-center gap-x-2">
                            <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-vcstmst">
                            <label for="hs-pro-vcstmst" class="text-sm text-muted-foreground-1">
                              Set time zone automatically
                            </label>
                          </div>
                          
                       
                          <div class="w-full max-w-60">
                            
                            <div class="relative inline-block w-full">
                              <select id="hs-pro-select-timezone" data-hs-select='{
                                "placeholder": "Select time zone",
                                "toggleTag": "<button type=\"button\" aria-expanded=\"false\"><div data-icon></div></button>",
                                "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2 ps-3 pe-9 flex gap-x-2 text-nowrap w-full cursor-pointer bg-layer border border-layer-line rounded-lg text-start text-sm text-layer-foreground hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus",
                                "dropdownClasses": "inset-e-0 w-full min-w-45 max-h-60 p-1 space-y-0.5 z-80 w-full 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-2 px-4 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-lg focus:outline-hidden focus:bg-select-item-focus",
                                "optionTemplate": "<div><div class=\"flex items-center gap-x-2\"><div data-icon></div><div class=\"text-foreground\" data-title></div><span class=\"hidden hs-selected:block ms-auto\"><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></div>",
                                "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-4 text-muted-foreground-1\" 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>",
                                "dropdownScope": "window",
                                "viewport": "#hs-modal-settings-body"
                              }' class="hidden">
                                <option value="">Choose</option>
                                <option selected>New York (GMT-4)</option>
                                <option>Berlin (GMT+2)</option>
                                <option>Tokyo (GMT+9)</option>
                                <option>Sydney (GMT+10)</option>
                                <option>Dubai (GMT+4)</option>
                                <option>Paris (GMT+2)</option>
                                <option>Sao Paulo (GMT-3)</option>
                              </select>
                            </div>
                            
                          </div>
                        </div>
                      </div>

<div class="flex flex-col">
                        <label class="block mb-1 font-medium text-sm text-foreground">
                          Presence status
                        </label>

<div class="w-full max-w-60">
                            
                            <div class="relative inline-block w-full">
                              <select id="hs-pro-select-presence-status" data-hs-select='{
                                "placeholder": "Select time",
                                "toggleTag": "<button type=\"button\" aria-expanded=\"false\"><div data-icon></div></button>",
                                "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2 ps-3 pe-9 flex gap-x-2 text-nowrap w-full cursor-pointer bg-layer border border-layer-line rounded-lg text-start text-sm text-layer-foreground hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus",
                                "dropdownClasses": "inset-e-0 w-full min-w-45 max-h-60 p-1 space-y-0.5 z-80 w-full 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-2 px-4 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-lg focus:outline-hidden focus:bg-select-item-focus",
                                "optionTemplate": "<div><div class=\"flex items-center gap-x-2\"><div data-icon></div><div class=\"text-foreground\" data-title></div><span class=\"hidden hs-selected:block ms-auto\"><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></div>",
                                "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-4 text-muted-foreground-1\" 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>",
                                "dropdownScope": "window",
                                "viewport": "#hs-modal-settings-body"
                              }' class="hidden">
                                <option value="">Choose</option>
                                <option selected>10 minutes</option>
                                <option>30 minutes</option>
                                <option>1 hour</option>
                                <option>2 hours</option>
                                <option>3 hours</option>
                                <option>4 hours</option>
                                <option>5 hours</option>
                                <option>6 hours</option>
                                <option>7 hours</option>
                                <option>8 hours</option>
                                <option>9 hours</option>
                                <option>10 hours</option>
                              </select>
                            </div>
                            
                          </div>
                        </div>
                      </div>
                      
                    </div>

<div class="mt-6 pt-6 border-t border-line-1">
                      
                      <div class="flex flex-col">
                        <label class="block mb-1 font-medium text-sm text-foreground">
                          Emoji
                        </label>

<p class="mb-3 text-sm text-muted-foreground-1">
                          Choose your preferred emoji for reactions.
                        </p>

<div class="flex flex-wrap gap-3">
                          
                          <label for="hs-pro-vcsemr1" class="size-12 flex flex-col justify-center items-center text-center bg-layer border border-layer-line text-layer-foreground text-2xl hover:bg-surface-hover has-checked:border-primary-checked has-checked:ring-1 has-checked:ring-primary-checked cursor-pointer rounded-lg">
                            <input type="radio" id="hs-pro-vcsemr1" class="hidden peer" value="Default (Yellow)" name="hs-pro-vcsemr" checked>
                            👋
                          </label>

<label for="hs-pro-vcsemr2" class="size-12 flex flex-col justify-center items-center text-center bg-layer border border-layer-line text-layer-foreground text-2xl hover:bg-surface-hover has-checked:border-primary-checked has-checked:ring-1 has-checked:ring-primary-checked cursor-pointer rounded-lg">
                            <input type="radio" id="hs-pro-vcsemr2" class="hidden peer" value="Light Skin Tone" name="hs-pro-vcsemr" >
                            👋🏻
                          </label>

<label for="hs-pro-vcsemr3" class="size-12 flex flex-col justify-center items-center text-center bg-layer border border-layer-line text-layer-foreground text-2xl hover:bg-surface-hover has-checked:border-primary-checked has-checked:ring-1 has-checked:ring-primary-checked cursor-pointer rounded-lg">
                            <input type="radio" id="hs-pro-vcsemr3" class="hidden peer" value="Medium-Light Skin Tone" name="hs-pro-vcsemr" >
                            👋🏼
                          </label>

<label for="hs-pro-vcsemr4" class="size-12 flex flex-col justify-center items-center text-center bg-layer border border-layer-line text-layer-foreground text-2xl hover:bg-surface-hover has-checked:border-primary-checked has-checked:ring-1 has-checked:ring-primary-checked cursor-pointer rounded-lg">
                            <input type="radio" id="hs-pro-vcsemr4" class="hidden peer" value="Medium Skin Tone" name="hs-pro-vcsemr" >
                            👋🏽
                          </label>

<label for="hs-pro-vcsemr5" class="size-12 flex flex-col justify-center items-center text-center bg-layer border border-layer-line text-layer-foreground text-2xl hover:bg-surface-hover has-checked:border-primary-checked has-checked:ring-1 has-checked:ring-primary-checked cursor-pointer rounded-lg">
                            <input type="radio" id="hs-pro-vcsemr5" class="hidden peer" value="Medium-Dark Skin Tone" name="hs-pro-vcsemr" >
                            👋🏾
                          </label>

<label for="hs-pro-vcsemr6" class="size-12 flex flex-col justify-center items-center text-center bg-layer border border-layer-line text-layer-foreground text-2xl hover:bg-surface-hover has-checked:border-primary-checked has-checked:ring-1 has-checked:ring-primary-checked cursor-pointer rounded-lg">
                            <input type="radio" id="hs-pro-vcsemr6" class="hidden peer" value="Dark Skin Tone" name="hs-pro-vcsemr" >
                            👋🏿
                          </label>
                          
                        </div>
                        
                      </div>
                      
                    </div>

<div class="mt-6 pt-6 border-t border-line-1">
                      
                      <div class="flex flex-col">
                        <label class="block mb-1 font-medium text-sm text-foreground">
                          Appearance
                        </label>

<p class="mb-3 text-sm text-muted-foreground-1">
                          Choose if Preline should use a light or dark appearance, or automatically match your system preference.
                        </p>
  
                        
                        <div class="-mx-2 flex flex-wrap gap-x-2">
                          
                          <label for="hs-pro-vcsapLight" class="p-2 w-32 flex flex-col text-center cursor-pointer rounded-lg hover:bg-surface-hover">
                            <input type="radio" id="hs-pro-vcsapLight" name="hs-pro-hs-pro-vcsap" class="hidden peer" checked>
                            <span class="p-2 w-full h-18 bg-layer border border-layer-line rounded-lg ring-2 ring-transparent peer-checked:ring-primary-checked">
                              <span class="h-full flex items-center gap-x-2">
                                <span class="w-5 h-full block bg-surface-1 rounded-sm"></span>
                                <span class="grow h-full relative">
                                  <span class="block size-full bg-surface-1 rounded-sm"></span>
                                </span>
                              </span>
                            </span>
                            <span class="p-2 text-xs text-foreground">
                              Light
                            </span>
                          </label>

<label for="hs-pro-vcsapDark" class="p-2 w-32 flex flex-col text-center cursor-pointer rounded-lg hover:bg-surface-hover">
                            <input type="radio" id="hs-pro-vcsapDark" name="hs-pro-hs-pro-vcsap" class="hidden peer">
                            <span class="p-2 w-full h-18 bg-secondary rounded-lg ring-2 ring-transparent peer-checked:ring-primary-checked">
                              <span class="h-full flex items-center gap-x-2">
                                <span class="w-5 h-full block bg-surface-5 rounded-sm"></span>
                                <span class="grow h-full">
                                  <span class="block size-full bg-surface-5 rounded-sm"></span>
                                </span>
                              </span>
                            </span>
                            <span class="p-2 text-xs text-foreground">
                              Dark
                            </span>
                          </label>

<label for="hs-pro-vcsapSystem" class="p-2 w-32 flex flex-col text-center cursor-pointer rounded-lg hover:bg-surface-hover">
                            <input type="radio" id="hs-pro-vcsapSystem" name="hs-pro-hs-pro-vcsap" class="hidden peer">
                            <span class="flex items-center rounded-lg ring-2 ring-transparent peer-checked:ring-primary-checked">
                              <span class="p-2 pe-0 w-full h-18 bg-layer border border-layer-line rounded-s-lg">
                                <span class="h-full flex items-center gap-x-2">
                                  <span class="w-5 h-full block bg-surface-1 rounded-sm"></span>
                                  <span class="grow h-full">
                                    <span class="block size-full bg-surface-1 rounded-s-sm"></span>
                                  </span>
                                </span>
                              </span>
                              <span class="p-2 ps-0 w-full h-18 bg-secondary rounded-e-lg">
                                <span class="block size-full bg-surface-5 rounded-e-sm"></span>
                              </span> 
                            </span>
                            <span class="p-2 text-xs text-foreground">
                              System settings
                            </span>
                          </label>
                          
                        </div>
                        
                      </div>
                      
                    </div>
                  </form>
                  
                </div>
              </div>
              
      
              
              <div id="hs-pro-tabs-sg-navigation" class="hidden h-full" role="tabpanel" aria-labelledby="hs-pro-tabs-sg-item-navigation">
                <div class="my-1 me-1 pt-1 sm:pt-2.5 p-4 h-[calc(55dvh)] lg:h-[calc(65dvh)] overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                  <form>
                    
                    <div class="flex flex-col">
                      <label class="block mb-1 font-medium text-sm text-foreground">
                        Choose which tabs appear in your navigation bar:
                      </label>

<p class="mb-3 text-sm text-muted-foreground-1">
                        Some tabs may be hidden on smaller screens.
                      </p>

<div class="grid grid-cols-3 sm:grid-cols-4 gap-2">
                        <div class="flex justify-center items-center">
                          
                          <label for="hs-pro-vcsnbaich1" class="size-28 flex flex-col justify-center items-center gap-y-1 text-xs text-foreground cursor-pointer rounded-lg hover:bg-surface-hover">
                            <input type="checkbox" id="hs-pro-vcsnbaich1" class="hidden peer" value="Home" name="hs-pro-vcsnbaich" checked disabled>
                            <span class="flex justify-center items-center gap-x-3 size-9 bg-surface rounded-md peer-checked:bg-primary-checked peer-checked:text-primary-foreground peer-disabled:opacity-50 peer-disabled:pointer-events-none">
                              <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="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
                            </span>
                            <span class="block">
                              Home
                            </span>
                          </label>
                          
                        </div>

<div class="flex justify-center items-center">
                          
                          <label for="hs-pro-vcsnbaich2" class="size-28 flex flex-col justify-center items-center gap-y-1 text-xs text-foreground cursor-pointer rounded-lg hover:bg-surface-hover">
                            <input type="checkbox" id="hs-pro-vcsnbaich2" class="hidden peer" value="Meetings" name="hs-pro-vcsnbaich" checked disabled>
                            <span class="flex justify-center items-center gap-x-3 size-9 bg-surface rounded-md peer-checked:bg-primary-checked peer-checked:text-primary-foreground peer-disabled:opacity-50 peer-disabled:pointer-events-none">
                              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5"/><rect x="2" y="6" width="14" height="12" rx="2"/></svg>
                            </span>
                            <span class="block">
                              Meetings
                            </span>
                          </label>
                          
                        </div>

<div class="flex justify-center items-center">
                          
                          <label for="hs-pro-vcsnbaich3" class="size-28 flex flex-col justify-center items-center gap-y-1 text-xs text-foreground cursor-pointer rounded-lg hover:bg-surface-hover">
                            <input type="checkbox" id="hs-pro-vcsnbaich3" class="hidden peer" value="Schedule" name="hs-pro-vcsnbaich" checked >
                            <span class="flex justify-center items-center gap-x-3 size-9 bg-surface rounded-md peer-checked:bg-primary-checked peer-checked:text-primary-foreground peer-disabled:opacity-50 peer-disabled:pointer-events-none">
                              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 14v2.2l1.6 1"/><path d="M16 2v4"/><path d="M21 7.5V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3.5"/><path d="M3 10h5"/><path d="M8 2v4"/><circle cx="16" cy="16" r="6"/></svg>
                            </span>
                            <span class="block">
                              Schedule
                            </span>
                          </label>
                          
                        </div>

<div class="flex justify-center items-center">
                          
                          <label for="hs-pro-vcsnbaich4" class="size-28 flex flex-col justify-center items-center gap-y-1 text-xs text-foreground cursor-pointer rounded-lg hover:bg-surface-hover">
                            <input type="checkbox" id="hs-pro-vcsnbaich4" class="hidden peer" value="Settings" name="hs-pro-vcsnbaich" checked >
                            <span class="flex justify-center items-center gap-x-3 size-9 bg-surface rounded-md peer-checked:bg-primary-checked peer-checked:text-primary-foreground peer-disabled:opacity-50 peer-disabled:pointer-events-none">
                              <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>
                            </span>
                            <span class="block">
                              Settings
                            </span>
                          </label>
                          
                        </div>

<div class="flex justify-center items-center">
                          
                          <label for="hs-pro-vcsnbaich5" class="size-28 flex flex-col justify-center items-center gap-y-1 text-xs text-foreground cursor-pointer rounded-lg hover:bg-surface-hover">
                            <input type="checkbox" id="hs-pro-vcsnbaich5" class="hidden peer" value="Livestreaming" name="hs-pro-vcsnbaich"  >
                            <span class="flex justify-center items-center gap-x-3 size-9 bg-surface rounded-md peer-checked:bg-primary-checked peer-checked:text-primary-foreground peer-disabled:opacity-50 peer-disabled:pointer-events-none">
                              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16.247 7.761a6 6 0 0 1 0 8.478"/><path d="M19.075 4.933a10 10 0 0 1 0 14.134"/><path d="M4.925 19.067a10 10 0 0 1 0-14.134"/><path d="M7.753 16.239a6 6 0 0 1 0-8.478"/><circle cx="12" cy="12" r="2"/></svg>
                            </span>
                            <span class="block">
                              Livestreaming
                            </span>
                          </label>
                          
                        </div>

<div class="flex justify-center items-center">
                          
                          <label for="hs-pro-vcsnbaich6" class="size-28 flex flex-col justify-center items-center gap-y-1 text-xs text-foreground cursor-pointer rounded-lg hover:bg-surface-hover">
                            <input type="checkbox" id="hs-pro-vcsnbaich6" class="hidden peer" value="Recordings" name="hs-pro-vcsnbaich"  >
                            <span class="flex justify-center items-center gap-x-3 size-9 bg-surface rounded-md peer-checked:bg-primary-checked peer-checked:text-primary-foreground peer-disabled:opacity-50 peer-disabled:pointer-events-none">
                              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5"/><rect x="2" y="6" width="14" height="12" rx="2"/></svg>
                            </span>
                            <span class="block">
                              Recordings
                            </span>
                          </label>
                          
                        </div>

<div class="flex justify-center items-center">
                          
                          <label for="hs-pro-vcsnbaich7" class="size-28 flex flex-col justify-center items-center gap-y-1 text-xs text-foreground cursor-pointer rounded-lg hover:bg-surface-hover">
                            <input type="checkbox" id="hs-pro-vcsnbaich7" class="hidden peer" value="Whiteboard" name="hs-pro-vcsnbaich"  >
                            <span class="flex justify-center items-center gap-x-3 size-9 bg-surface rounded-md peer-checked:bg-primary-checked peer-checked:text-primary-foreground peer-disabled:opacity-50 peer-disabled:pointer-events-none">
                              <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="M2 3h20"/><path d="M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3"/><path d="m7 21 5-5 5 5"/></svg>
                            </span>
                            <span class="block">
                              Whiteboard
                            </span>
                          </label>
                          
                        </div>

<div class="flex justify-center items-center">
                          
                          <label for="hs-pro-vcsnbaich8" class="size-28 flex flex-col justify-center items-center gap-y-1 text-xs text-foreground cursor-pointer rounded-lg hover:bg-surface-hover">
                            <input type="checkbox" id="hs-pro-vcsnbaich8" class="hidden peer" value="Integrations" name="hs-pro-vcsnbaich"  >
                            <span class="flex justify-center items-center gap-x-3 size-9 bg-surface rounded-md peer-checked:bg-primary-checked peer-checked:text-primary-foreground peer-disabled:opacity-50 peer-disabled:pointer-events-none">
                              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16.466 7.5C15.643 4.237 13.952 2 12 2 9.239 2 7 6.477 7 12s2.239 10 5 10c.342 0 .677-.069 1-.2"/><path d="m15.194 13.707 3.814 1.86-1.86 3.814"/><path d="M19 15.57c-1.804.885-4.274 1.43-7 1.43-5.523 0-10-2.239-10-5s4.477-5 10-5c4.838 0 8.873 1.718 9.8 4"/></svg>
                            </span>
                            <span class="block">
                              Integrations
                            </span>
                          </label>
                          
                        </div>
                      </div>
                      
                    </div>

<div class="mt-10 flex flex-col">
                      <label class="block mb-1 font-medium text-sm text-foreground">
                        Navigation bar appearance
                      </label>

<div class="ms-px mt-2 flex flex-col">
                        <label for="hs-pro-vcsnbaiat" class="-mx-3 py-2 px-3 flex gap-x-3 cursor-pointer hover:bg-surface-hover rounded-lg">
                          <input type="radio" name="hs-pro-vcsnba" class="shrink-0 size-4 bg-layer border-line-3 rounded-full shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none0" id="hs-pro-vcsnbaiat" checked>
                          <span class="block -mt-0.5">
                            <span class="block text-sm text-foreground">Icons only</span>
                            <span class="block text-sm text-muted-foreground-1">Shows both icons and text in the navigation bar</span>
                          </span>
                        </label>
  
                        <label for="hs-pro-vcsnbaio" class="-mx-3 py-2 px-3 flex gap-x-3 cursor-pointer hover:bg-surface-hover rounded-lg">
                          <input type="radio" name="hs-pro-vcsnba" class="shrink-0 size-4 bg-layer border-line-3 rounded-full shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none0" id="hs-pro-vcsnbaio">
                          <span class="block -mt-0.5">
                            <span class="block text-sm text-foreground">Icons only</span>
                            <span class="block text-sm text-muted-foreground-1">Shows only icons in the navigation bar</span>
                          </span>
                        </label>
  
                        <label for="hs-pro-vcsnbato" class="-mx-3 py-2 px-3 flex gap-x-3 cursor-pointer hover:bg-surface-hover rounded-lg">
                          <input type="radio" name="hs-pro-vcsnba" class="shrink-0 size-4 bg-layer border-line-3 rounded-full shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none0" id="hs-pro-vcsnbato">
                          <span class="block -mt-0.5">
                            <span class="block text-sm text-foreground">Text only</span>
                            <span class="block text-sm text-muted-foreground-1">Shows only text in the navigation bar</span>
                          </span>
                        </label>
                      </div>
                      
                    </div>
                    
                  </form>
                </div>
              </div>
              
      
              
              <div id="hs-pro-tabs-sg-video-and-audio" class="hidden h-full" role="tabpanel" aria-labelledby="hs-pro-tabs-sg-item-video-and-audio">
                <div class="my-1 me-1 pt-1 sm:pt-2.5 p-4 h-[calc(55dvh)] lg:h-[calc(65dvh)] overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                  <form>
                    <div class="flex flex-col gap-y-10">
                      
                      <div class="relative w-full h-60 bg-[url('https://images.unsplash.com/photo-1682393855864-1b5f97a28620?q=80&w=1920&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')] bg-cover bg-center bg-no-repeat rounded-lg">
                      </div>

<div class="flex flex-col gap-y-10">
                        
                        <div>
                          <label class="block mb-1 font-medium text-sm text-foreground">
                            Camera
                          </label>

<div class="relative inline-block w-full">
                            <select id="hs-pro-select-camera" data-hs-select='{
                              "placeholder": "Select camera",
                              "toggleTag": "<button type=\"button\" aria-expanded=\"false\"><div data-icon></div></button>",
                              "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2 px-9 flex gap-x-2 text-nowrap w-full cursor-pointer bg-layer border border-layer-line rounded-lg text-start text-sm text-layer-foreground hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus",
                              "dropdownClasses": "inset-e-0 w-full min-w-45 max-h-60 p-1 space-y-0.5 z-80 w-full 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-2 px-4 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-lg focus:outline-hidden focus:bg-select-item-focus",
                              "optionTemplate": "<div><div class=\"flex items-center gap-x-2\"><div data-icon></div><div class=\"text-foreground\" data-title></div><span class=\"hidden hs-selected:block ms-auto\"><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></div>",
                              "extraMarkup": "<div><div class=\"absolute top-1/2 inset-s-3 z-1 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-4.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=\"m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5\"/><rect x=\"2\" y=\"6\" width=\"14\" height=\"12\" rx=\"2\"/></svg></div><div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-4 text-muted-foreground-1\" 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></div>",
                              "dropdownScope": "window",
                              "viewport": "#hs-modal-settings-body"
                            }' class="hidden">
                              <option value="">Choose</option>
                              <option selected>FaceTime HD Camera (3A71:F4B5)</option>
                              <option>Logitech C920 (1B2C:2C99)</option>
                              <option>Integrated Webcam (0A5C:5800)</option>
                              <option>OBS Virtual Camera</option>
                            </select>
                          </div>
                          
                        </div>

<div>
                          <label class="block mb-1 font-medium text-sm text-foreground">
                            Speaker
                          </label>

<div class="relative inline-block w-full">
                            <select id="hs-pro-select-speaker" data-hs-select='{
                              "placeholder": "Select speaker",
                              "toggleTag": "<button type=\"button\" aria-expanded=\"false\"><div data-icon></div></button>",
                              "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2 px-9 flex gap-x-2 text-nowrap w-full cursor-pointer bg-layer border border-layer-line rounded-lg text-start text-sm text-layer-foreground hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus",
                              "dropdownClasses": "inset-e-0 w-full min-w-45 max-h-60 p-1 space-y-0.5 z-80 w-full 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-2 px-4 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-lg focus:outline-hidden focus:bg-select-item-focus",
                              "optionTemplate": "<div><div class=\"flex items-center gap-x-2\"><div data-icon></div><div class=\"text-foreground\" data-title></div><span class=\"hidden hs-selected:block ms-auto\"><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></div>",
                              "extraMarkup": "<div><div class=\"absolute top-1/2 inset-s-3 z-1 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-4.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=\"M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z\"/><path d=\"M16 9a5 5 0 0 1 0 6\"/><path d=\"M19.364 18.364a9 9 0 0 0 0-12.728\"/></svg></div><div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-4 text-muted-foreground-1\" 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></div>",
                              "dropdownScope": "window",
                              "viewport": "#hs-modal-settings-body"
                            }' class="hidden">
                              <option value="">Choose</option>
                              <option selected>Default - MacBook Pro Microphone (Built-in)</option>
                              <option>MacBook Pro Microphone (Built-in) Default</option>
                            </select>
                          </div>

<div class="mt-3 flex flex-wrap justify-between items-center gap-2">
                            <button type="button" class="py-2 px-3 text-nowrap inline-flex justify-center items-center gap-x-2 text-start whitespace-nowrap bg-surface text-surface-foreground text-sm rounded-lg hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus disabled:opacity-50 disabled:pointer-events-none">
                              <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 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"/></svg>
                              Test speaker
                            </button>

<div>
                          <label class="block mb-1 font-medium text-sm text-foreground">
                            Microphone
                          </label>

<div class="relative inline-block w-full">
                            <select id="hs-pro-select-microphone" data-hs-select='{
                              "placeholder": "Select microphone",
                              "toggleTag": "<button type=\"button\" aria-expanded=\"false\"><div data-icon></div></button>",
                              "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2 px-9 flex gap-x-2 text-nowrap w-full cursor-pointer bg-layer border border-layer-line rounded-lg text-start text-sm text-layer-foreground hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus",
                              "dropdownClasses": "inset-e-0 w-full min-w-45 max-h-60 p-1 space-y-0.5 z-80 w-full 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-2 px-4 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-lg focus:outline-hidden focus:bg-select-item-focus",
                              "optionTemplate": "<div><div class=\"flex items-center gap-x-2\"><div data-icon></div><div class=\"text-foreground\" data-title></div><span class=\"hidden hs-selected:block ms-auto\"><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></div>",
                              "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-4 text-muted-foreground-1\" 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>",
                              "dropdownScope": "window",
                              "viewport": "#hs-modal-settings-body",
                              "extraMarkup": "<div><div class=\"absolute top-1/2 inset-s-3 z-1 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-4.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=\"M12 19v3\"/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/><rect x=\"9\" y=\"2\" width=\"6\" height=\"13\" rx=\"3\"/></svg></div><div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-4 text-muted-foreground-1\" 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></div>"
                            }' class="hidden">
                              <option value="">Choose</option>
                              <option selected>MacBook Pro Microphone (Built-in) Default</option>
                              <option>Default - MacBook Pro Microphone (Built-in)</option>
                            </select>
                          </div>

<div class="mt-3 flex flex-wrap justify-between items-center gap-2">
                            <button type="button" class="py-2 px-3 text-nowrap inline-flex justify-center items-center gap-x-2 text-start whitespace-nowrap bg-surface text-surface-foreground text-sm rounded-lg hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus disabled:opacity-50 disabled:pointer-events-none">
                              <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"/><circle cx="12" cy="12" r="4"/><path d="M12 12h.01"/></svg>
                              Test microphone
                            </button>

<div class="flex gap-x-1 h-3.5">
                              <div class="w-2.5 h-5 rounded-sm bg-surface-2" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
                              <div class="w-2.5 h-5 rounded-sm bg-surface-2" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
                              <div class="w-2.5 h-5 rounded-sm bg-surface-2" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
                              <div class="w-2.5 h-5 rounded-sm bg-surface-2" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
                              <div class="w-2.5 h-5 rounded-sm bg-surface-2" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
                              <div class="w-2.5 h-5 rounded-sm bg-surface-2" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
                              <div class="w-2.5 h-5 rounded-sm bg-surface-2" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
                              <div class="w-2.5 h-5 rounded-sm bg-surface-2" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
                              <div class="w-2.5 h-5 rounded-sm bg-surface-2" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
                              <div class="w-2.5 h-5 rounded-sm bg-surface-2" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                          </div>
                        </div>
                        
                      </div>
                  
                      
                      <div class="flex flex-col gap-y-3">
                        
                        <label for="hs-pro-vcsnrs" class="-mx-3 py-2 px-3 flex justify-between items-center gap-x-3 cursor-pointer hover:bg-surface-hover rounded-lg">
                          <span class="block -mt-0.5">
                            <span class="block font-medium text-sm text-foreground">Background noise filter</span>
                            <span class="block text-sm text-muted-foreground-1">Automatically filter out unwanted sounds during calls</span>
                          </span>
                          <span class="relative shrink-0 inline-block w-9 h-5 cursor-pointer">
                            <input type="checkbox" id="hs-pro-vcsnrs" class="hidden peer">
                            <span class="absolute inset-0 bg-surface-2 rounded-md transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                            <span class="absolute top-1/2 inset-s-0.5 -translate-y-1/2 size-4 bg-switch rounded-sm shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                          </span>
                        </label>

<label for="hs-pro-vcshdvs" class="-mx-3 py-2 px-3 flex justify-between items-center gap-x-3 cursor-pointer hover:bg-surface-hover rounded-lg">
                          <span class="block -mt-0.5">
                            <span class="block font-medium text-sm text-foreground">HD video</span>
                            <span class="block text-sm text-muted-foreground-1">Enable high-definition video for better quality</span>
                          </span>
                          <span class="relative shrink-0 inline-block w-9 h-5 cursor-pointer">
                            <input type="checkbox" id="hs-pro-vcshdvs" class="hidden peer" checked>
                            <span class="absolute inset-0 bg-surface-2 rounded-md transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                            <span class="absolute top-1/2 inset-s-0.5 -translate-y-1/2 size-4 bg-switch rounded-sm shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                          </span>
                        </label>
                        
                      </div>
                      
                    </div>
                  </form>
                </div>
              </div>
              
      
              
              <div id="hs-pro-tabs-sg-notifications" class="hidden h-full" role="tabpanel" aria-labelledby="hs-pro-tabs-sg-item-notifications">
                <div class="my-1 me-1 pt-1 sm:pt-2.5 p-4 h-[calc(55dvh)] lg:h-[calc(65dvh)] overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                  <form>
                    
                    <div class="-mx-2 flex flex-col gap-y-3">
                      
                      <label for="hs-pro-vcsn1" class="p-2 lg:px-3 flex justify-between items-center gap-x-3 cursor-pointer hover:bg-surface-hover rounded-lg">
                        <span class="block -mt-0.5">
                          <span class="block font-medium text-sm text-foreground">Notification sounds</span>
                          <span class="block text-sm text-muted-foreground-1">Play a sound for new chat messages and notifications</span>
                        </span>
                        <span class="relative shrink-0 inline-block w-9 h-5 cursor-pointer">
                          <input type="checkbox" id="hs-pro-vcsn1" class="hidden peer" checked>
                          <span class="absolute inset-0 bg-surface-2 rounded-md transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                          <span class="absolute top-1/2 inset-s-0.5 -translate-y-1/2 size-4 bg-switch rounded-sm shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                        </span>
                      </label>

<label for="hs-pro-vcsn2" class="p-2 lg:px-3 flex justify-between items-center gap-x-3 cursor-pointer hover:bg-surface-hover rounded-lg">
                        <span class="block -mt-0.5">
                          <span class="block font-medium text-sm text-foreground">Do not disturb</span>
                          <span class="block text-sm text-muted-foreground-1">Mute notifications during your chosen hours</span>
                        </span>
                        <span class="relative shrink-0 inline-block w-9 h-5 cursor-pointer">
                          <input type="checkbox" id="hs-pro-vcsn2" class="hidden peer" checked>
                          <span class="absolute inset-0 bg-surface-2 rounded-md transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                          <span class="absolute top-1/2 inset-s-0.5 -translate-y-1/2 size-4 bg-switch rounded-sm shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                        </span>
                      </label>
                      
                    </div>

<div class="mt-6 pt-6 border-t border-line-1">
                      
                      <div class="-mx-2 flex flex-col gap-y-3">
                        
                        <label for="hs-pro-vcsn3" class="p-2 lg:px-3 flex justify-between items-center gap-x-3 cursor-pointer hover:bg-surface-hover rounded-lg">
                          <span class="block -mt-0.5">
                            <span class="block font-medium text-sm text-foreground">Incoming calls</span>
                            <span class="block text-sm text-muted-foreground-1">Mute incoming calls and notifications during meetings</span>
                          </span>
                          <span class="relative shrink-0 inline-block w-9 h-5 cursor-pointer">
                            <input type="checkbox" id="hs-pro-vcsn3" class="hidden peer">
                            <span class="absolute inset-0 bg-surface-2 rounded-md transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                            <span class="absolute top-1/2 inset-s-0.5 -translate-y-1/2 size-4 bg-switch rounded-sm shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                          </span>
                        </label>

<label for="hs-pro-vcsn4" class="p-2 lg:px-3 flex justify-between items-center gap-x-3 cursor-pointer hover:bg-surface-hover rounded-lg">
                          <span class="block -mt-0.5">
                            <span class="block font-medium text-sm text-foreground">Chat notifications</span>
                            <span class="block text-sm text-muted-foreground-1">Manage chat notifications during meetings and calls</span>
                          </span>
                          <span class="relative shrink-0 inline-block w-9 h-5 cursor-pointer">
                            <input type="checkbox" id="hs-pro-vcsn4" class="hidden peer" checked>
                            <span class="absolute inset-0 bg-surface-2 rounded-md transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                            <span class="absolute top-1/2 inset-s-0.5 -translate-y-1/2 size-4 bg-switch rounded-sm shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                          </span>
                        </label>
                        
                      </div>
                      
                    </div>

<div class="mt-6 pt-6 border-t border-line-1">
                      
                      <div class="-mx-2 flex flex-col gap-y-3">
                        
                        <label for="hs-pro-vcsn5" class="p-2 lg:px-3 flex justify-between items-center gap-x-3 cursor-pointer hover:bg-surface-hover rounded-lg">
                          <span class="block -mt-0.5">
                            <span class="block font-medium text-sm text-foreground">Chat pop-up</span>
                            <span class="block text-sm text-muted-foreground-1">Automatically open a chat pop-up when you click a notification</span>
                          </span>
                          <span class="relative shrink-0 inline-block w-9 h-5 cursor-pointer">
                            <input type="checkbox" id="hs-pro-vcsn5" class="hidden peer">
                            <span class="absolute inset-0 bg-surface-2 rounded-md transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                            <span class="absolute top-1/2 inset-s-0.5 -translate-y-1/2 size-4 bg-switch rounded-sm shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                          </span>
                        </label>

<label for="hs-pro-vcsn6" class="p-2 lg:px-3 flex justify-between items-center gap-x-3 cursor-pointer hover:bg-surface-hover rounded-lg">
                          <span class="block -mt-0.5">
                            <span class="block font-medium text-sm text-foreground">Message previews</span>
                            <span class="block text-sm text-muted-foreground-1">Display previews of messages in chat notifications</span>
                          </span>
                          <span class="relative shrink-0 inline-block w-9 h-5 cursor-pointer">
                            <input type="checkbox" id="hs-pro-vcsn6" class="hidden peer" checked>
                            <span class="absolute inset-0 bg-surface-2 rounded-md transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                            <span class="absolute top-1/2 inset-s-0.5 -translate-y-1/2 size-4 bg-switch rounded-sm shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                          </span>
                        </label>
                        
                      </div>
                      
                    </div>
                  </form>
                </div>
              </div>
              
            </div>
          </div>

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

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

Open related video call template

Regional shopping preferences modal combines language, country, and currency selects with acceptance and cancel actions.

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

<div id="hs-pro-shnlm-body" class="overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
            <div class="p-6 md:p-8 space-y-5">
              
              <div>
                <label class="block mb-2 text-sm font-medium text-foreground">
                  Language
                </label>

<div class="relative">
                  <select id="hs-pro-select-language" data-hs-select='{
                    "placeholder": "Select country",
                    "toggleTag": "<button type=\"button\" aria-expanded=\"false\"><div data-icon></div></button>",
                    "dropdownClasses": "z-80 w-full min-w-45 max-h-72 p-1 space-y-0.5 z-50 w-full 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",
                    "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-3 ps-4 pe-9 flex items-center gap-x-2 text-nowrap w-full cursor-pointer bg-layer border border-layer-line text-layer-foreground rounded-lg text-start text-sm focus:outline-hidden focus:border-primary-focus focus:ring-1 focus:ring-primary",
                    "optionClasses": "hs-selected:bg-select-item-active py-2 px-4 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-lg focus:outline-hidden focus:bg-select-item-focus",
                    "optionTemplate": "<div><div class=\"flex items-center gap-x-2\"><div data-icon></div><div class=\"text-foreground\" data-title></div><span class=\"hidden hs-selected:block ms-auto\"><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></div>",
                    "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-4 text-muted-foreground-1\" 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></div>",
                    "dropdownScope": "window",
                    "viewport": "#hs-pro-shnlm-body"
                  }' class="hidden">
                    <option value="">Choose</option>
                    <option value="English-us" data-hs-select-option='{
                      "icon": "<svg class=\"shrink-0 size-4 rounded-full\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><g fill-rule=\"evenodd\"><g stroke-width=\"1pt\"><path fill=\"#bd3d44\" d=\"M0 0h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0z\" transform=\"scale(3.9385)\"/><path fill=\"#fff\" d=\"M0 10h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0z\" transform=\"scale(3.9385)\"/></g><path fill=\"#192f5d\" d=\"M0 0h98.8v70H0z\" transform=\"scale(3.9385)\"/><path fill=\"#fff\" d=\"M8.2 3l1 2.8H12L9.7 7.5l.9 2.7-2.4-1.7L6 10.2l.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7L74 8.5l-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 7.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 24.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 21.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 38.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 35.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 52.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 49.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 66.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 63.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9z\" transform=\"scale(3.9385)\"/></g></svg>"}'>
                      English (United States)
                    </option>
                    <option selected value="English-uk" data-hs-select-option='{
                      "icon": "<svg class=\"shrink-0 size-4 rounded-full\" xmlns=\"http://www.w3.org/2000/svg\" id=\"flag-icon-css-gb\" viewBox=\"0 0 512 512\"><path fill=\"#012169\" d=\"M0 0h512v512H0z\"/><path fill=\"#FFF\" d=\"M512 0v64L322 256l190 187v69h-67L254 324 68 512H0v-68l186-187L0 74V0h62l192 188L440 0z\"/><path fill=\"#C8102E\" d=\"M184 324l11 34L42 512H0v-3l184-185zm124-12l54 8 150 147v45L308 312zM512 0L320 196l-4-44L466 0h46zM0 1l193 189-59-8L0 49V1z\"/><path fill=\"#FFF\" d=\"M176 0v512h160V0H176zM0 176v160h512V176H0z\"/><path fill=\"#C8102E\" d=\"M0 208v96h512v-96H0zM208 0v512h96V0h-96z\"/></svg>"}'>
                      English (United Kingdom)
                    </option>
                    <option value="Deutsch" data-hs-select-option='{
                      "icon": "<svg class=\"shrink-0 size-4 rounded-full\" xmlns=\"http://www.w3.org/2000/svg\" id=\"flag-icon-css-de\" viewBox=\"0 0 512 512\"><path fill=\"#ffce00\" d=\"M0 341.3h512V512H0z\"/><path d=\"M0 0h512v170.7H0z\"/><path fill=\"#d00\" d=\"M0 170.7h512v170.6H0z\"/></svg>"}'>
                      Deutsch
                    </option>
                    <option value="Dansk" data-hs-select-option='{
                      "icon": "<svg class=\"shrink-0 size-4 rounded-full\" xmlns=\"http://www.w3.org/2000/svg\" id=\"flag-icon-css-dk\" viewBox=\"0 0 512 512\"><path fill=\"#c8102e\" d=\"M0 0h512.1v512H0z\"/><path fill=\"#fff\" d=\"M144 0h73.1v512H144z\"/><path fill=\"#fff\" d=\"M0 219.4h512.1v73.2H0z\"/></svg>"}'>
                      Dansk
                    </option>
                    <option value="Italiano" data-hs-select-option='{
                      "icon": "<svg class=\"shrink-0 size-4 rounded-full\" xmlns=\"http://www.w3.org/2000/svg\" id=\"flag-icon-css-it\" viewBox=\"0 0 512 512\"><g fill-rule=\"evenodd\" stroke-width=\"1pt\"><path fill=\"#fff\" d=\"M0 0h512v512H0z\"/><path fill=\"#009246\" d=\"M0 0h170.7v512H0z\"/><path fill=\"#ce2b37\" d=\"M341.3 0H512v512H341.3z\"/></g></svg>"}'>
                      Italiano
                    </option>
                    <option value="中文-繁體" data-hs-select-option='{
                      "icon": "<svg class=\"shrink-0 size-4 rounded-full\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" id=\"flag-icon-css-cn\" viewBox=\"0 0 512 512\"><defs><path id=\"a\" fill=\"#ffde00\" d=\"M1-.3L-.7.8 0-1 .6.8-1-.3z\"/></defs><path fill=\"#de2910\" d=\"M0 0h512v512H0z\"/><use width=\"30\" height=\"20\" transform=\"matrix(76.8 0 0 76.8 128 128)\" xlink:href=\"#a\"/><use width=\"30\" height=\"20\" transform=\"rotate(-121 142.6 -47) scale(25.5827)\" xlink:href=\"#a\"/><use width=\"30\" height=\"20\" transform=\"rotate(-98.1 198 -82) scale(25.6)\" xlink:href=\"#a\"/><use width=\"30\" height=\"20\" transform=\"rotate(-74 272.4 -114) scale(25.6137)\" xlink:href=\"#a\"/><use width=\"30\" height=\"20\" transform=\"matrix(16 -19.968 19.968 16 256 230.4)\" xlink:href=\"#a\"/></svg>"}'>
                      中文 (繁體)
                    </option>
                  </select>
                  
                </div>
                
              </div>

<div>
                <label class="block mb-2 text-sm font-medium text-foreground">
                  Country
                </label>

<div class="relative">
                  <select data-hs-select='{
                      "placeholder": "",
                      "hasSearch": true,
                      "searchPlaceholder": "Country",
                      "searchClasses": "py-1.5 sm:py-2 px-3 block w-full sm:text-sm bg-transparent border-line-2 rounded-lg text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus",
                      "searchWrapperClasses": "bg-select p-2 -mx-1 sticky top-0",
                      "toggleTag": "<button type=\"button\" aria-expanded=\"false\"><span class=\"flex\" data-icon></span><span class=\"text-foreground\" data-title></span></button>",
                      "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-3 ps-4 pe-9 flex gap-x-2 text-nowrap w-full cursor-pointer bg-layer border border-layer-line text-layer-foreground rounded-lg text-start text-sm focus:outline-hidden focus:border-primary-focus focus:ring-1 focus:ring-primary",
                      "dropdownClasses": "z-80 max-h-72 p-1 pt-0 space-y-0.5 z-50 w-full 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-2 px-4 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-lg focus:outline-hidden focus:bg-select-item-focus",
                      "optionTemplate": "<div><div class=\"flex items-center\"><div class=\"me-2\" data-icon></div><div class=\"text-foreground\" data-title></div></div></div>",
                      "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-4 text-muted-foreground-1\" 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></div>",
                      "dropdownScope": "window",
                      "viewport": "#hs-pro-shnlm-body"
                    }' class="hidden">
                    <option value="">Choose</option>
                    <option value="AF" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/af.png\" alt=\"Afghanistan\" />"}'>
                      Afghanistan
                    </option>
                    <option value="AX" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ax.png\" alt=\"Aland Islands\" />"}'>
                      Aland Islands
                    </option>
                    <option value="AL" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/al.png\" alt=\"Albania\" />"}'>
                      Albania
                    </option>
                    <option value="DZ" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/dz.png\" alt=\"Algeria\" />"}'>
                      Algeria
                    </option>
                    <option value="AS" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/as.png\" alt=\"American Samoa\" />"}'>
                      American Samoa
                    </option>
                    <option value="AD" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ad.png\" alt=\"Andorra\" />"}'>
                      Andorra
                    </option>
                    <option value="AO" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ao.png\" alt=\"Angola\" />"}'>
                      Angola
                    </option>
                    <option value="AI" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ai.png\" alt=\"Anguilla\" />"}'>
                      Anguilla
                    </option>
                    <option value="AG" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ag.png\" alt=\"Antigua and Barbuda\" />"}'>
                      Antigua and Barbuda
                    </option>
                    <option value="AR" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ar.png\" alt=\"Argentina\" />"}'>
                      Argentina
                    </option>
                    <option value="AM" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/am.png\" alt=\"Armenia\" />"}'>
                      Armenia
                    </option>
                    <option value="AW" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/aw.png\" alt=\"Aruba\" />"}'>
                      Aruba
                    </option>
                    <option value="AU" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/au.png\" alt=\"Australia\" />"}'>
                      Australia
                    </option>
                    <option value="AT" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/at.png\" alt=\"Austria\" />"}'>
                      Austria
                    </option>
                    <option value="AZ" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/az.png\" alt=\"Azerbaijan\" />"}'>
                      Azerbaijan
                    </option>
                    <option value="BS" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bs.png\" alt=\"Bahamas\" />"}'>
                      Bahamas
                    </option>
                    <option value="BH" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bh.png\" alt=\"Bahrain\" />"}'>
                      Bahrain
                    </option>
                    <option value="BD" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bd.png\" alt=\"Bangladesh\" />"}'>
                      Bangladesh
                    </option>
                    <option value="BB" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bb.png\" alt=\"Barbados\" />"}'>
                      Barbados
                    </option>
                    <option value="BY" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/by.png\" alt=\"Belarus\" />"}'>
                      Belarus
                    </option>
                    <option value="BE" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/be.png\" alt=\"Belgium\" />"}'>
                      Belgium
                    </option>
                    <option value="BZ" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bz.png\" alt=\"Belize\" />"}'>
                      Belize
                    </option>
                    <option value="BJ" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bj.png\" alt=\"Benin\" />"}'>
                      Benin
                    </option>
                    <option value="BM" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bm.png\" alt=\"Bermuda\" />"}'>
                      Bermuda
                    </option>
                    <option value="BT" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bt.png\" alt=\"Bhutan\" />"}'>
                      Bhutan
                    </option>
                    <option value="BO" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bo.png\" alt=\"Bolivia (Plurinational State of)\" />"}'>
                      Bolivia (Plurinational State of)
                    </option>
                    <option value="BQ" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bq.png\" alt=\"Bonaire, Sint Eustatius and Saba\" />"}'>
                      Bonaire, Sint Eustatius and Saba
                    </option>
                    <option value="BA" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ba.png\" alt=\"Bosnia and Herzegovina\" />"}'>
                      Bosnia and Herzegovina
                    </option>
                    <option value="BW" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bw.png\" alt=\"Botswana\" />"}'>
                      Botswana
                    </option>
                    <option value="BR" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/br.png\" alt=\"Brazil\" />"}'>
                      Brazil
                    </option>
                    <option value="IO" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/io.png\" alt=\"British Indian Ocean Territory\" />"}'>
                      British Indian Ocean Territory
                    </option>
                    <option value="BN" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bn.png\" alt=\"Brunei Darussalam\" />"}'>
                      Brunei Darussalam
                    </option>
                    <option value="BG" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bg.png\" alt=\"Bulgaria\" />"}'>
                      Bulgaria
                    </option>
                    <option value="BF" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bf.png\" alt=\"Burkina Faso\" />"}'>
                      Burkina Faso
                    </option>
                    <option value="BI" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bi.png\" alt=\"Burundi\" />"}'>
                      Burundi
                    </option>
                    <option value="CV" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cv.png\" alt=\"Cabo Verde\" />"}'>
                      Cabo Verde
                    </option>
                    <option value="KH" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/kh.png\" alt=\"Cambodia\" />"}'>
                      Cambodia
                    </option>
                    <option value="CM" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cm.png\" alt=\"Cameroon\" />"}'>
                      Cameroon
                    </option>
                    <option value="CA" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ca.png\" alt=\"Canada\" />"}'>
                      Canada
                    </option>
                    <option value="KY" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ky.png\" alt=\"Cayman Islands\" />"}'>
                      Cayman Islands
                    </option>
                    <option value="CF" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cf.png\" alt=\"Central African Republic\" />"}'>
                      Central African Republic
                    </option>
                    <option value="TD" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/td.png\" alt=\"Chad\" />"}'>
                      Chad
                    </option>
                    <option value="CL" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cl.png\" alt=\"Chile\" />"}'>
                      Chile
                    </option>
                    <option value="CN" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cn.png\" alt=\"China\" />"}'>
                      China
                    </option>
                    <option value="CX" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cx.png\" alt=\"Christmas Island\" />"}'>
                      Christmas Island
                    </option>
                    <option value="CC" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cc.png\" alt=\"Cocos (Keeling) Islands\" />"}'>
                      Cocos (Keeling) Islands
                    </option>
                    <option value="CO" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/co.png\" alt=\"Colombia\" />"}'>
                      Colombia
                    </option>
                    <option value="KM" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/km.png\" alt=\"Comoros\" />"}'>
                      Comoros
                    </option>
                    <option value="CK" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ck.png\" alt=\"Cook Islands\" />"}'>
                      Cook Islands
                    </option>
                    <option value="CR" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cr.png\" alt=\"Costa Rica\" />"}'>
                      Costa Rica
                    </option>
                    <option value="HR" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/hr.png\" alt=\"Croatia\" />"}'>
                      Croatia
                    </option>
                    <option value="CU" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cu.png\" alt=\"Cuba\" />"}'>
                      Cuba
                    </option>
                    <option value="CW" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cw.png\" alt=\"Curaçao\" />"}'>
                      Curaçao
                    </option>
                    <option value="CY" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cy.png\" alt=\"Cyprus\" />"}'>
                      Cyprus
                    </option>
                    <option value="CZ" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cz.png\" alt=\"Czech Republic\" />"}'>
                      Czech Republic
                    </option>
                    <option value="CI" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ci.png\" alt=Côte dIvoire\" />"}'>
                      Côte dIvoire
                    </option>
                    <option value="CD" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cd.png\" alt=\"Democratic Republic of the Congo\" />"}'>
                      Democratic Republic of the Congo
                    </option>
                    <option value="DK" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/dk.png\" alt=\"Denmark\" />"}'>
                      Denmark
                    </option>
                    <option value="DJ" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/dj.png\" alt=\"Djibouti\" />"}'>
                      Djibouti
                    </option>
                    <option value="DM" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/dm.png\" alt=\"Dominica\" />"}'>
                      Dominica
                    </option>
                    <option value="DO" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/do.png\" alt=\"Dominican Republic\" />"}'>
                      Dominican Republic
                    </option>
                    <option value="EC" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ec.png\" alt=\"Ecuador\" />"}'>
                      Ecuador
                    </option>
                    <option value="EG" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/eg.png\" alt=\"Egypt\" />"}'>
                      Egypt
                    </option>
                    <option value="SV" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sv.png\" alt=\"El Salvador\" />"}'>
                      El Salvador
                    </option>
                    <option value="GB-ENG" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gb.png\" alt=\"England\" />"}'>
                      England
                    </option>
                    <option value="GQ" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gq.png\" alt=\"Equatorial Guinea\" />"}'>
                      Equatorial Guinea
                    </option>
                    <option value="ER" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/er.png\" alt=\"Eritrea\" />"}'>
                      Eritrea
                    </option>
                    <option value="EE" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ee.png\" alt=\"Estonia\" />"}'>
                      Estonia
                    </option>
                    <option value="ET" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/et.png\" alt=\"Ethiopia\" />"}'>
                      Ethiopia
                    </option>
                    <option value="FK" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/fk.png\" alt=\"Falkland Islands\" />"}'>
                      Falkland Islands
                    </option>
                    <option value="FO" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/fo.png\" alt=\"Faroe Islands\" />"}'>
                      Faroe Islands
                    </option>
                    <option value="FM" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/fm.png\" alt=\"Federated States of Micronesia\" />"}'>
                      Federated States of Micronesia
                    </option>
                    <option value="FJ" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/fj.png\" alt=\"Fiji\" />"}'>
                      Fiji
                    </option>
                    <option value="FI" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/fi.png\" alt=\"Finland\" />"}'>
                      Finland
                    </option>
                    <option value="FR" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/fr.png\" alt=\"France\" />"}'>
                      France
                    </option>
                    <option value="GF" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gf.png\" alt=\"French Guiana\" />"}'>
                      French Guiana
                    </option>
                    <option value="PF" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pf.png\" alt=\"French Polynesia\" />"}'>
                      French Polynesia
                    </option>
                    <option value="TF" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tf.png\" alt=\"French Southern Territories\" />"}'>
                      French Southern Territories
                    </option>
                    <option value="GA" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ga.png\" alt=\"Gabon\" />"}'>
                      Gabon
                    </option>
                    <option value="GM" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gm.png\" alt=\"Gambia\" />"}'>
                      Gambia
                    </option>
                    <option value="GE" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ge.png\" alt=\"Georgia\" />"}'>
                      Georgia
                    </option>
                    <option value="DE" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/de.png\" alt=\"Germany\" />"}'>
                      Germany
                    </option>
                    <option value="GH" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gh.png\" alt=\"Ghana\" />"}'>
                      Ghana
                    </option>
                    <option value="GI" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gi.png\" alt=\"Gibraltar\" />"}'>
                      Gibraltar
                    </option>
                    <option value="GR" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gr.png\" alt=\"Greece\" />"}'>
                      Greece
                    </option>
                    <option value="GL" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gl.png\" alt=\"Greenland\" />"}'>
                      Greenland
                    </option>
                    <option value="GD" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gd.png\" alt=\"Grenada\" />"}'>
                      Grenada
                    </option>
                    <option value="GP" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gp.png\" alt=\"Guadeloupe\" />"}'>
                      Guadeloupe
                    </option>
                    <option value="GU" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gu.png\" alt=\"Guam\" />"}'>
                      Guam
                    </option>
                    <option value="GT" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gt.png\" alt=\"Guatemala\" />"}'>
                      Guatemala
                    </option>
                    <option value="GG" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gg.png\" alt=\"Guernsey\" />"}'>
                      Guernsey
                    </option>
                    <option value="GN" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gn.png\" alt=\"Guinea\" />"}'>
                      Guinea
                    </option>
                    <option value="GW" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gw.png\" alt=\"Guinea-Bissau\" />"}'>
                      Guinea-Bissau
                    </option>
                    <option value="GY" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gy.png\" alt=\"Guyana\" />"}'>
                      Guyana
                    </option>
                    <option value="HT" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ht.png\" alt=\"Haiti\" />"}'>
                      Haiti
                    </option>
                    <option value="VA" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/va.png\" alt=\"Holy See\" />"}'>
                      Holy See
                    </option>
                    <option value="HN" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/hn.png\" alt=\"Honduras\" />"}'>
                      Honduras
                    </option>
                    <option value="HK" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/hk.png\" alt=\"Hong Kong\" />"}'>
                      Hong Kong
                    </option>
                    <option value="HU" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/hu.png\" alt=\"Hungary\" />"}'>
                      Hungary
                    </option>
                    <option value="IS" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/is.png\" alt=\"Iceland\" />"}'>
                      Iceland
                    </option>
                    <option value="IN" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/in.png\" alt=\"India\" />"}'>
                      India
                    </option>
                    <option value="ID" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/id.png\" alt=\"Indonesia\" />"}'>
                      Indonesia
                    </option>
                    <option value="IR" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ir.png\" alt=\"Iran (Islamic Republic of)\" />"}'>
                      Iran (Islamic Republic of)
                    </option>
                    <option value="IQ" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/iq.png\" alt=\"Iraq\" />"}'>
                      Iraq
                    </option>
                    <option value="IE" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ie.png\" alt=\"Ireland\" />"}'>
                      Ireland
                    </option>
                    <option value="IM" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/im.png\" alt=\"Isle of Man\" />"}'>
                      Isle of Man
                    </option>
                    <option value="IL" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/il.png\" alt=\"Israel\" />"}'>
                      Israel
                    </option>
                    <option value="IT" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/it.png\" alt=\"Italy\" />"}'>
                      Italy
                    </option>
                    <option value="JM" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/jm.png\" alt=\"Jamaica\" />"}'>
                      Jamaica
                    </option>
                    <option value="JP" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/jp.png\" alt=\"Japan\" />"}'>
                      Japan
                    </option>
                    <option value="JE" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/je.png\" alt=\"Jersey\" />"}'>
                      Jersey
                    </option>
                    <option value="JO" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/jo.png\" alt=\"Jordan\" />"}'>
                      Jordan
                    </option>
                    <option value="KZ" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/kz.png\" alt=\"Kazakhstan\" />"}'>
                      Kazakhstan
                    </option>
                    <option value="KE" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ke.png\" alt=\"Kenya\" />"}'>
                      Kenya
                    </option>
                    <option value="KI" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ki.png\" alt=\"Kiribati\" />"}'>
                      Kiribati
                    </option>
                    <option value="KW" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/kw.png\" alt=\"Kuwait\" />"}'>
                      Kuwait
                    </option>
                    <option value="KG" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/kg.png\" alt=\"Kyrgyzstan\" />"}'>
                      Kyrgyzstan
                    </option>
                    <option value="LA" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/la.png\" alt=\"Laos\" />"}'>
                      Laos
                    </option>
                    <option value="LV" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/lv.png\" alt=\"Latvia\" />"}'>
                      Latvia
                    </option>
                    <option value="LB" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/lb.png\" alt=\"Lebanon\" />"}'>
                      Lebanon
                    </option>
                    <option value="LS" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ls.png\" alt=\"Lesotho\" />"}'>
                      Lesotho
                    </option>
                    <option value="LR" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/lr.png\" alt=\"Liberia\" />"}'>
                      Liberia
                    </option>
                    <option value="LY" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ly.png\" alt=\"Libya\" />"}'>
                      Libya
                    </option>
                    <option value="LI" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/li.png\" alt=\"Liechtenstein\" />"}'>
                      Liechtenstein
                    </option>
                    <option value="LT" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/lt.png\" alt=\"Lithuania\" />"}'>
                      Lithuania
                    </option>
                    <option value="LU" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/lu.png\" alt=\"Luxembourg\" />"}'>
                      Luxembourg
                    </option>
                    <option value="MO" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mo.png\" alt=\"Macau\" />"}'>
                      Macau
                    </option>
                    <option value="MG" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mg.png\" alt=\"Madagascar\" />"}'>
                      Madagascar
                    </option>
                    <option value="MW" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mw.png\" alt=\"Malawi\" />"}'>
                      Malawi
                    </option>
                    <option value="MY" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/my.png\" alt=\"Malaysia\" />"}'>
                      Malaysia
                    </option>
                    <option value="MV" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mv.png\" alt=\"Maldives\" />"}'>
                      Maldives
                    </option>
                    <option value="ML" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ml.png\" alt=\"Mali\" />"}'>
                      Mali
                    </option>
                    <option value="MT" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mt.png\" alt=\"Malta\" />"}'>
                      Malta
                    </option>
                    <option value="MH" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mh.png\" alt=\"Marshall Islands\" />"}'>
                      Marshall Islands
                    </option>
                    <option value="MQ" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mq.png\" alt=\"Martinique\" />"}'>
                      Martinique
                    </option>
                    <option value="MR" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mr.png\" alt=\"Mauritania\" />"}'>
                      Mauritania
                    </option>
                    <option value="MU" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mu.png\" alt=\"Mauritius\" />"}'>
                      Mauritius
                    </option>
                    <option value="YT" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/yt.png\" alt=\"Mayotte\" />"}'>
                      Mayotte
                    </option>
                    <option value="MX" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mx.png\" alt=\"Mexico\" />"}'>
                      Mexico
                    </option>
                    <option value="MD" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/md.png\" alt=\"Moldova\" />"}'>
                      Moldova
                    </option>
                    <option value="MC" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mc.png\" alt=\"Monaco\" />"}'>
                      Monaco
                    </option>
                    <option value="MN" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mn.png\" alt=\"Mongolia\" />"}'>
                      Mongolia
                    </option>
                    <option value="ME" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/me.png\" alt=\"Montenegro\" />"}'>
                      Montenegro
                    </option>
                    <option value="MS" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ms.png\" alt=\"Montserrat\" />"}'>
                      Montserrat
                    </option>
                    <option value="MA" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ma.png\" alt=\"Morocco\" />"}'>
                      Morocco
                    </option>
                    <option value="MZ" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mz.png\" alt=\"Mozambique\" />"}'>
                      Mozambique
                    </option>
                    <option value="MM" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mm.png\" alt=\"Myanmar\" />"}'>
                      Myanmar
                    </option>
                    <option value="NA" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/na.png\" alt=\"Namibia\" />"}'>
                      Namibia
                    </option>
                    <option value="NR" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/nr.png\" alt=\"Nauru\" />"}'>
                      Nauru
                    </option>
                    <option value="NP" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/np.png\" alt=\"Nepal\" />"}'>
                      Nepal
                    </option>
                    <option value="NL" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/nl.png\" alt=\"Netherlands\" />"}'>
                      Netherlands
                    </option>
                    <option value="NC" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/nc.png\" alt=\"New Caledonia\" />"}'>
                      New Caledonia
                    </option>
                    <option value="NZ" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/nz.png\" alt=\"New Zealand\" />"}'>
                      New Zealand
                    </option>
                    <option value="NI" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ni.png\" alt=\"Nicaragua\" />"}'>
                      Nicaragua
                    </option>
                    <option value="NE" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ne.png\" alt=\"Niger\" />"}'>
                      Niger
                    </option>
                    <option value="NG" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ng.png\" alt=\"Nigeria\" />"}'>
                      Nigeria
                    </option>
                    <option value="NU" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/nu.png\" alt=\"Niue\" />"}'>
                      Niue
                    </option>
                    <option value="NF" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/nf.png\" alt=\"Norfolk Island\" />"}'>
                      Norfolk Island
                    </option>
                    <option value="KP" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/kp.png\" alt=\"North Korea\" />"}'>
                      North Korea
                    </option>
                    <option value="MK" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mk.png\" alt=\"North Macedonia\" />"}'>
                      North Macedonia
                    </option>
                    <option value="GB-NIR" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gb.png\" alt=\"Northern Ireland\" />"}'>
                      Northern Ireland
                    </option>
                    <option value="MP" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mp.png\" alt=\"Northern Mariana Islands\" />"}'>
                      Northern Mariana Islands
                    </option>
                    <option value="NO" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/no.png\" alt=\"Norway\" />"}'>
                      Norway
                    </option>
                    <option value="OM" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/om.png\" alt=\"Oman\" />"}'>
                      Oman
                    </option>
                    <option value="PK" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pk.png\" alt=\"Pakistan\" />"}'>
                      Pakistan
                    </option>
                    <option value="PW" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pw.png\" alt=\"Palau\" />"}'>
                      Palau
                    </option>
                    <option value="PA" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pa.png\" alt=\"Panama\" />"}'>
                      Panama
                    </option>
                    <option value="PG" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pg.png\" alt=\"Papua New Guinea\" />"}'>
                      Papua New Guinea
                    </option>
                    <option value="PY" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/py.png\" alt=\"Paraguay\" />"}'>
                      Paraguay
                    </option>
                    <option value="PE" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pe.png\" alt=\"Peru\" />"}'>
                      Peru
                    </option>
                    <option value="PH" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ph.png\" alt=\"Philippines\" />"}'>
                      Philippines
                    </option>
                    <option value="PN" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pn.png\" alt=\"Pitcairn\" />"}'>
                      Pitcairn
                    </option>
                    <option value="PL" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pl.png\" alt=\"Poland\" />"}'>
                      Poland
                    </option>
                    <option value="PT" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pt.png\" alt=\"Portugal\" />"}'>
                      Portugal
                    </option>
                    <option value="PR" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pr.png\" alt=\"Puerto Rico\" />"}'>
                      Puerto Rico
                    </option>
                    <option value="QA" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/qa.png\" alt=\"Qatar\" />"}'>
                      Qatar
                    </option>
                    <option value="CG" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cg.png\" alt=\"Republic of the Congo\" />"}'>
                      Republic of the Congo
                    </option>
                    <option value="RO" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ro.png\" alt=\"Romania\" />"}'>
                      Romania
                    </option>
                    <option value="RU" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ru.png\" alt=\"Russia\" />"}'>
                      Russia
                    </option>
                    <option value="RW" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/rw.png\" alt=\"Rwanda\" />"}'>
                      Rwanda
                    </option>
                    <option value="RE" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/re.png\" alt=\"Réunion\" />"}'>
                      Réunion
                    </option>
                    <option value="BL" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bl.png\" alt=\"Saint Barthélemy\" />"}'>
                      Saint Barthélemy
                    </option>
                    <option value="SH" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sh.png\" alt=\"Saint Helena, Ascension and Tristan da Cunha\" />"}'>
                      Saint Helena, Ascension and Tristan da Cunha
                    </option>
                    <option value="KN" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/kn.png\" alt=\"Saint Kitts and Nevis\" />"}'>
                      Saint Kitts and Nevis
                    </option>
                    <option value="LC" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/lc.png\" alt=\"Saint Lucia\" />"}'>
                      Saint Lucia
                    </option>
                    <option value="MF" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mf.png\" alt=\"Saint Martin\" />"}'>
                      Saint Martin
                    </option>
                    <option value="PM" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pm.png\" alt=\"Saint Pierre and Miquelon\" />"}'>
                      Saint Pierre and Miquelon
                    </option>
                    <option value="VC" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/vc.png\" alt=\"Saint Vincent and the Grenadines\" />"}'>
                      Saint Vincent and the Grenadines
                    </option>
                    <option value="WS" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ws.png\" alt=\"Samoa\" />"}'>
                      Samoa
                    </option>
                    <option value="SM" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sm.png\" alt=\"San Marino\" />"}'>
                      San Marino
                    </option>
                    <option value="ST" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/st.png\" alt=\"Sao Tome and Principe\" />"}'>
                      Sao Tome and Principe
                    </option>
                    <option value="SA" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sa.png\" alt=\"Saudi Arabia\" />"}'>
                      Saudi Arabia
                    </option>
                    <option value="GB-SCT" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gb.png\" alt=\"Scotland\" />"}'>
                      Scotland
                    </option>
                    <option value="SN" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sn.png\" alt=\"Senegal\" />"}'>
                      Senegal
                    </option>
                    <option value="RS" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/rs.png\" alt=\"Serbia\" />"}'>
                      Serbia
                    </option>
                    <option value="SC" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sc.png\" alt=\"Seychelles\" />"}'>
                      Seychelles
                    </option>
                    <option value="SL" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sl.png\" alt=\"Sierra Leone\" />"}'>
                      Sierra Leone
                    </option>
                    <option value="SG" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sg.png\" alt=\"Singapore\" />"}'>
                      Singapore
                    </option>
                    <option value="SX" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sx.png\" alt=\"Sint Maarten\" />"}'>
                      Sint Maarten
                    </option>
                    <option value="SK" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sk.png\" alt=\"Slovakia\" />"}'>
                      Slovakia
                    </option>
                    <option value="SI" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/si.png\" alt=\"Slovenia\" />"}'>
                      Slovenia
                    </option>
                    <option value="SB" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sb.png\" alt=\"Solomon Islands\" />"}'>
                      Solomon Islands
                    </option>
                    <option value="SO" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/so.png\" alt=\"Somalia\" />"}'>
                      Somalia
                    </option>
                    <option value="ZA" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/za.png\" alt=\"South Africa\" />"}'>
                      South Africa
                    </option>
                    <option value="GS" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gs.png\" alt=\"South Georgia and the South Sandwich Islands\" />"}'>
                      South Georgia and the South Sandwich Islands
                    </option>
                    <option value="KR" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/kr.png\" alt=\"South Korea\" />"}'>
                      South Korea
                    </option>
                    <option value="SS" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ss.png\" alt=\"South Sudan\" />"}'>
                      South Sudan
                    </option>
                    <option value="ES" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/es.png\" alt=\"Spain\" />"}'>
                      Spain
                    </option>
                    <option value="LK" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/lk.png\" alt=\"Sri Lanka\" />"}'>
                      Sri Lanka
                    </option>
                    <option value="PS" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ps.png\" alt=\"State of Palestine\" />"}'>
                      State of Palestine
                    </option>
                    <option value="SD" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sd.png\" alt=\"Sudan\" />"}'>
                      Sudan
                    </option>
                    <option value="SR" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sr.png\" alt=\"Suriname\" />"}'>
                      Suriname
                    </option>
                    <option value="SJ" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sj.png\" alt=\"Svalbard and Jan Mayen\" />"}'>
                      Svalbard and Jan Mayen
                    </option>
                    <option value="SZ" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sz.png\" alt=\"Swaziland\" />"}'>
                      Swaziland
                    </option>
                    <option value="SE" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/se.png\" alt=\"Sweden\" />"}'>
                      Sweden
                    </option>
                    <option value="CH" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ch.png\" alt=\"Switzerland\" />"}'>
                      Switzerland
                    </option>
                    <option value="SY" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sy.png\" alt=\"Syrian Arab Republic\" />"}'>
                      Syrian Arab Republic
                    </option>
                    <option value="TW" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tw.png\" alt=\"Taiwan\" />"}'>
                      Taiwan
                    </option>
                    <option value="TJ" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tj.png\" alt=\"Tajikistan\" />"}'>
                      Tajikistan
                    </option>
                    <option value="TZ" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tz.png\" alt=\"Tanzania\" />"}'>
                      Tanzania
                    </option>
                    <option value="TH" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/th.png\" alt=\"Thailand\" />"}'>
                      Thailand
                    </option>
                    <option value="TL" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tl.png\" alt=\"Timor-Leste\" />"}'>
                      Timor-Leste
                    </option>
                    <option value="TG" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tg.png\" alt=\"Togo\" />"}'>
                      Togo
                    </option>
                    <option value="TK" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tk.png\" alt=\"Tokelau\" />"}'>
                      Tokelau
                    </option>
                    <option value="TO" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/to.png\" alt=\"Tonga\" />"}'>
                      Tonga
                    </option>
                    <option value="TT" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tt.png\" alt=\"Trinidad and Tobago\" />"}'>
                      Trinidad and Tobago
                    </option>
                    <option value="TN" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tn.png\" alt=\"Tunisia\" />"}'>
                      Tunisia
                    </option>
                    <option value="TR" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tr.png\" alt=\"Turkey\" />"}'>
                      Turkey
                    </option>
                    <option value="TM" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tm.png\" alt=\"Turkmenistan\" />"}'>
                      Turkmenistan
                    </option>
                    <option value="TC" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tc.png\" alt=\"Turks and Caicos Islands\" />"}'>
                      Turks and Caicos Islands
                    </option>
                    <option value="TV" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tv.png\" alt=\"Tuvalu\" />"}'>
                      Tuvalu
                    </option>
                    <option value="UG" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ug.png\" alt=\"Uganda\" />"}'>
                      Uganda
                    </option>
                    <option value="UA" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ua.png\" alt=\"Ukraine\" />"}'>
                      Ukraine
                    </option>
                    <option value="AE" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ae.png\" alt=\"United Arab Emirates\" />"}'>
                      United Arab Emirates
                    </option>
                    <option value="GB" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gb.png\" alt=\"United Kingdom\" />"}'>
                      United Kingdom
                    </option>
                    <option value="UM" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/um.png\" alt=\"United States Minor Outlying Islands\" />"}'>
                      United States Minor Outlying Islands
                    </option>
                    <option selected value="US" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/us.png\" alt=\"United States of America\" />"}'>
                      United States of America
                    </option>
                    <option value="UY" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/uy.png\" alt=\"Uruguay\" />"}'>
                      Uruguay
                    </option>
                    <option value="UZ" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/uz.png\" alt=\"Uzbekistan\" />"}'>
                      Uzbekistan
                    </option>
                    <option value="VU" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/vu.png\" alt=\"Vanuatu\" />"}'>
                      Vanuatu
                    </option>
                    <option value="VE" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ve.png\" alt=\"Venezuela (Bolivarian Republic of)\" />"}'>
                      Venezuela (Bolivarian Republic of)
                    </option>
                    <option value="VN" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/vn.png\" alt=\"Vietnam\" />"}'>
                      Vietnam
                    </option>
                    <option value="VG" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/vg.png\" alt=\"Virgin Islands (British)\" />"}'>
                      Virgin Islands (British)
                    </option>
                    <option value="VI" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/vi.png\" alt=\"Virgin Islands (U.S.)\" />"}'>
                      Virgin Islands (U.S.)
                    </option>
                    <option value="GB-WLS" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gb.png\" alt=\"Wales\" />"}'>
                      Wales
                    </option>
                    <option value="WF" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/wf.png\" alt=\"Wallis and Futuna\" />"}'>
                      Wallis and Futuna
                    </option>
                    <option value="EH" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/eh.png\" alt=\"Western Sahara\" />"}'>
                      Western Sahara
                    </option>
                    <option value="YE" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ye.png\" alt=\"Yemen\" />"}'>
                      Yemen
                    </option>
                    <option value="ZM" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/zm.png\" alt=\"Zambia\" />"}'>
                      Zambia
                    </option>
                    <option value="ZW" data-hs-select-option='{
                      "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/zw.png\" alt=\"Zimbabwe\" />"}'>
                      Zimbabwe
                    </option>
                  </select>
                </div>
                
              </div>

<div>
                <label class="block mb-2 text-sm font-medium text-foreground">
                  Currency
                </label>

<div class="relative">
                  <select data-hs-select='{
                      "placeholder": "Select currency",
                      "hasSearch": true,
                      "searchPlaceholder": "Select currency",
                      "searchClasses": "py-1.5 sm:py-2 px-3 block w-full sm:text-sm bg-transparent border-line-2 rounded-lg text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus",
                      "searchWrapperClasses": "bg-select p-2 -mx-1 sticky top-0",
                      "toggleTag": "<button type=\"button\" aria-expanded=\"false\"><span class=\"flex\" data-icon></span><span class=\"text-foreground\" data-title></span></button>",
                      "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-3 ps-4 pe-9 flex gap-x-2 text-nowrap w-full cursor-pointer bg-layer border border-layer-line text-layer-foreground rounded-lg text-start text-sm focus:outline-hidden focus:border-primary-focus focus:ring-1 focus:ring-primary",
                      "dropdownClasses": "z-80 max-h-72 p-1 pt-0 space-y-0.5 z-50 w-full 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-2 px-4 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-lg focus:outline-hidden focus:bg-select-item-focus",
                      "optionTemplate": "<div><div class=\"flex items-center\"><div class=\"me-2\" data-icon></div><div class=\"text-foreground\" data-title></div></div></div>",
                      "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-4 text-muted-foreground-1\" 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></div>",
                      "dropdownScope": "window",
                      "viewport": "#hs-pro-shnlm-body"
                    }' class="hidden">
                    <option value="">Choose</option>
                    <option value="USD" selected>USD</option>
                    <option value="AED">AED</option>
                    <option value="AFN">AFN</option>
                    <option value="ALL">ALL</option>
                    <option value="AMD">AMD</option>
                    <option value="ANG">ANG</option>
                    <option value="AOA">AOA</option>
                    <option value="ARS">ARS</option>
                    <option value="AUD">AUD</option>
                    <option value="AWG">AWG</option>
                    <option value="AZN">AZN</option>
                    <option value="BAM">BAM</option>
                    <option value="BBD">BBD</option>
                    <option value="BDT">BDT</option>
                    <option value="BGN">BGN</option>
                    <option value="BIF">BIF</option>
                    <option value="BMD">BMD</option>
                    <option value="BND">BND</option>
                    <option value="BOB">BOB</option>
                    <option value="BRL">BRL</option>
                    <option value="BSD">BSD</option>
                    <option value="BWP">BWP</option>
                    <option value="BZD">BZD</option>
                    <option value="CAD">CAD</option>
                    <option value="CDF">CDF</option>
                    <option value="CHF">CHF</option>
                    <option value="CLP">CLP</option>
                    <option value="CNY">CNY</option>
                    <option value="COP">COP</option>
                    <option value="CRC">CRC</option>
                    <option value="CVE">CVE</option>
                    <option value="CZK">CZK</option>
                    <option value="DJF">DJF</option>
                    <option value="DKK">DKK</option>
                    <option value="DOP">DOP</option>
                    <option value="DZD">DZD</option>
                    <option value="EGP">EGP</option>
                    <option value="ETB">ETB</option>
                    <option value="EUR">EUR</option>
                    <option value="FJD">FJD</option>
                    <option value="FKP">FKP</option>
                    <option value="GBP">GBP</option>
                    <option value="GEL">GEL</option>
                    <option value="GIP">GIP</option>
                    <option value="GMD">GMD</option>
                    <option value="GNF">GNF</option>
                    <option value="GTQ">GTQ</option>
                    <option value="GYD">GYD</option>
                    <option value="HKD">HKD</option>
                    <option value="HNL">HNL</option>
                    <option value="HRK">HRK</option>
                    <option value="HTG">HTG</option>
                    <option value="HUF">HUF</option>
                    <option value="IDR">IDR</option>
                    <option value="ILS">ILS</option>
                    <option value="INR">INR</option>
                    <option value="ISK">ISK</option>
                    <option value="JMD">JMD</option>
                    <option value="JPY">JPY</option>
                    <option value="KES">KES</option>
                    <option value="KGS">KGS</option>
                    <option value="KHR">KHR</option>
                    <option value="KMF">KMF</option>
                    <option value="KRW">KRW</option>
                    <option value="KYD">KYD</option>
                    <option value="KZT">KZT</option>
                    <option value="LAK">LAK</option>
                    <option value="LBP">LBP</option>
                    <option value="LKR">LKR</option>
                    <option value="LRD">LRD</option>
                    <option value="LSL">LSL</option>
                    <option value="MAD">MAD</option>
                    <option value="MDL">MDL</option>
                    <option value="MGA">MGA</option>
                    <option value="MKD">MKD</option>
                    <option value="MMK">MMK</option>
                    <option value="MNT">MNT</option>
                    <option value="MOP">MOP</option>
                    <option value="MRO">MRO</option>
                    <option value="MUR">MUR</option>
                    <option value="MVR">MVR</option>
                    <option value="MWK">MWK</option>
                    <option value="MXN">MXN</option>
                    <option value="MYR">MYR</option>
                    <option value="MZN">MZN</option>
                    <option value="NAD">NAD</option>
                    <option value="NGN">NGN</option>
                    <option value="NIO">NIO</option>
                    <option value="NOK">NOK</option>
                    <option value="NPR">NPR</option>
                    <option value="NZD">NZD</option>
                    <option value="PAB">PAB</option>
                    <option value="PEN">PEN</option>
                    <option value="PGK">PGK</option>
                    <option value="PHP">PHP</option>
                    <option value="PKR">PKR</option>
                    <option value="PLN">PLN</option>
                    <option value="PYG">PYG</option>
                    <option value="QAR">QAR</option>
                    <option value="RON">RON</option>
                    <option value="RSD">RSD</option>
                    <option value="RUB">RUB</option>
                    <option value="RWF">RWF</option>
                    <option value="SAR">SAR</option>
                    <option value="SBD">SBD</option>
                    <option value="SCR">SCR</option>
                    <option value="SEK">SEK</option>
                    <option value="SGD">SGD</option>
                    <option value="SHP">SHP</option>
                    <option value="SLL">SLL</option>
                    <option value="SOS">SOS</option>
                    <option value="SRD">SRD</option>
                    <option value="STD">STD</option>
                    <option value="SZL">SZL</option>
                    <option value="THB">THB</option>
                    <option value="TJS">TJS</option>
                    <option value="TOP">TOP</option>
                    <option value="TRY">TRY</option>
                    <option value="TTD">TTD</option>
                    <option value="TWD">TWD</option>
                    <option value="TZS">TZS</option>
                    <option value="UAH">UAH</option>
                    <option value="UGX">UGX</option>
                    <option value="UYU">UYU</option>
                    <option value="UZS">UZS</option>
                    <option value="VND">VND</option>
                    <option value="VUV">VUV</option>
                    <option value="WST">WST</option>
                    <option value="XAF">XAF</option>
                    <option value="XCD">XCD</option>
                    <option value="XOF">XOF</option>
                    <option value="XPF">XPF</option>
                    <option value="YER">YER</option>
                    <option value="ZAR">ZAR</option>
                    <option value="ZMW">ZMW</option>
                  </select>
                </div>
                
              </div>

<p class="text-[13px] text-muted-foreground-1">
                By continuing, you accept the <a class="text-muted-foreground-1 underline-offset-4 underline hover:text-foreground focus:outline-hidden focus:text-foreground" href="#">Terms and Conditions</a> of your chosen country or region.
              </p>
            </div>
          </div>

<div class="p-6 pt-2 md:p-8 md:pt-2 flex flex-col gap-2">
            <button type="button" class="py-3 px-4 w-full inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-hover" data-hs-overlay="#hs-pro-shnrsm">
              Accept
            </button>

<div class="text-center">
              <button type="button" class="py-3 px-4 w-full inline-flex justify-center items-center gap-x-1.5 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" data-hs-overlay="#hs-pro-shnrsm">
                Cancel
              </button>
            </div>
          </div>
          
        </div>
      </div>
    </div>

Open related storefront homepage

Location confirmation modal presents the current shopping region, localized summary details, and a follow-up link to change country.

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

<div class="overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
            <div class="p-6 md:p-8">
              <div class="mb-5">
                <svg class="shrink-0 w-20 mx-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 30"><clipPath id="a"><path d="M0 0v30h60V0z"/></clipPath><clipPath id="b"><path d="M30 15h30v15zv15H0zH0V0zV0h30z"/></clipPath><g clip-path="url(#a)"><path d="M0 0v30h60V0z" fill="#012169"/><path d="M0 0l60 30m0-30L0 30" stroke="#fff" stroke-width="6"/><path d="M0 0l60 30m0-30L0 30" clip-path="url(#b)" stroke="#C8102E" stroke-width="4"/><path d="M30 0v30M0 15h60" stroke="#fff" stroke-width="10"/><path d="M30 0v30M0 15h60" stroke="#C8102E" stroke-width="6"/></g></svg>
              </div>

<h2 id="hs-pro-shnlm-label" class="text-foreground">
                Your location set to <span class="font-semibold">United Kingdom</span>
              </h2>

<ul class="list-disc list-inside ps-3 mt-3 space-y-1">
                <li class="text-sm text-muted-foreground-1">
                  Shop in GBP £
                </li>
                <li class="text-sm text-muted-foreground-1">
                  Get shipping options for United Kingdom
                </li>
              </ul>

<div class="mt-5 space-y-3">  
                <button type="button" class="py-3 px-4 w-full inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-hover" data-hs-overlay="#hs-pro-shnlm">
                  Continue
                </button>

<div class="text-center">
                  <button type="button" class="inline-flex justify-center items-center font-medium text-sm text-foreground underline underline-offset-4 decoration-1 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" data-hs-overlay="#hs-pro-shnrsm">
                    Change Country
                  </button>
                </div>
              </div>
              
            </div>
          </div>
          
        </div>
      </div>
    </div>

Open related storefront homepage

Notification settings modal stacks card-style toggle rows for activity, meetup, and product communication preferences.

<div class="text-center">
        <button type="button" class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-notifications" data-hs-overlay="#hs-notifications">
          Open modal
        </button>
      </div>

<div id="hs-notifications" class="hs-overlay hidden size-full fixed top-0 inset-s-0 z-80 overflow-x-hidden overflow-y-auto" role="dialog" tabindex="-1" aria-labelledby="hs-notifications-label">
        <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-lg sm:w-full m-3 sm:mx-auto">
          <div class="relative w-full max-h-full flex flex-col bg-overlay border border-overlay-line rounded-xl pointer-events-auto shadow-xl">
            <div class="absolute top-2 inset-e-2">
              <button type="button" class="size-8 inline-flex justify-center items-center gap-x-2 rounded-full border border-transparent bg-surface text-surface-foreground hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Close" data-hs-overlay="#hs-notifications">
                <span class="sr-only">Close</span>
                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
              </button>
            </div>

<div class="p-4 sm:p-10 overflow-y-auto">
              <div class="mb-6 text-center">
                <h3 id="hs-notifications-label" class="mb-2 text-xl font-bold text-foreground">
                  Notifications
                </h3>
                <p class="text-muted-foreground-1">
                  Get notified of activity at Preline
                </p>
              </div>

<span class="grow">
                        <span class="block font-medium text-foreground">Account Activity</span>
                        <span class="block text-sm text-muted-foreground-1">Get important notifications about you or activity you've missed</span>
                      </span>
                    </span>

<div class="flex flex-col bg-layer border border-layer-line shadow-2xs rounded-xl">
                  <div class="flex gap-x-5 p-4 md:p-5">
                    <span class="flex gap-x-5">
                      <svg class="shrink-0 mt-1 size-5 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>

<span class="grow">
                        <span class="block font-medium text-foreground">Meetups Near You</span>
                        <span class="block text-sm text-muted-foreground-1">Get an email when a Preline Meetup is posted close to my location</span>
                      </span>
                    </span>

<div class="flex flex-col bg-layer border border-layer-line shadow-2xs rounded-xl">
                  <div class="flex gap-x-5 p-4 md:p-5">
                    <span class="flex gap-x-5">
                      <svg class="shrink-0 mt-1 size-5 text-muted-foreground-1" 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="M14 9a2 2 0 0 1-2 2H6l-4 4V4c0-1.1.9-2 2-2h8a2 2 0 0 1 2 2v5Z"/><path d="M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1"/></svg>

<span class="grow">
                        <span class="block font-medium text-foreground">Preline Communication</span>
                        <span class="block text-sm text-muted-foreground-1">Get Preline news, announcements, and product updates</span>
                      </span>
                    </span>

<div class="flex justify-end items-center gap-x-2 py-3 px-4 bg-muted border-t border-overlay-footer rounded-b-xl">
              <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" data-hs-overlay="#hs-notifications">
                Cancel
              </button>
              <a class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
                Update notifications
              </a>
            </div>
          </div>
        </div>
      </div>

Settings Modals

Call Settings Modal with Sidebar Navigation and Device Controls Pro

Regional Shopping Preferences Modal with Language Country and Currency Selects Pro

Location Confirmation Modal with Country Summary and Change Link Pro

Notification Settings Modal with Card-Style Toggle Rows Free