Filter Forms
Explore Filter Forms to provide users with structured fields for refining search results or data views effectively.
<!-- Card -->
<div class="zxv30 k9mkq yxawv ntfdl mzy38 dark:bg-neutral-800 dark:border-neutral-700">
<!-- Header -->
<div class="iifk8 rht0b flex saet7 items-center xu4xz yxawv dark:border-neutral-700">
<h3 class="hw6xt ejo46 dark:text-neutral-200">
Filters
</h3>
</div>
<!-- End Header -->
<div class="y3kub n1www">
<!-- Item -->
<div class="scfuk b21y4 uixns">
<label class="block ltzuf hw6xt ejo46 dark:text-neutral-200">Price range</label>
<div class="relative">
<div id="hs-pro-pytfrrch-bg"></div>
<div class="absolute zxmp1 a98ho kquz2 overflow-hidden">
<div id="hs-pro-pytfrrch-fg"></div>
</div>
</div>
<!-- Chart -->
<div id="hs-pro-pytfrrch" class="tdglf --prevent-on-load-init" data-hs-range-slider='{
"start": [0, 1000],
"range": {
"min": 0,
"max": 1000
},
"connect": true,
"formatter": "integer",
"cssClasses": {
"target": "relative whhnp mr9qs gxtht dark:bg-neutral-700",
"base": "kquz2 relative dw07v",
"origin": "absolute zxmp1 aoum9 kquz2 yd8n1 mr9qs",
"handle": "absolute uwi6w aoum9 qlagz x7ecd zxv30 k9mkq yxawv mr9qs w9ar3 cursor-pointer e3rhy -translate-y-2/4 dark:bg-neutral-800 dark:border-neutral-700",
"connects": "relative ge6i6 kquz2 mr9qs overflow-hidden",
"connect": "absolute zxmp1 aoum9 dw07v kquz2 hs5iv yd8n1",
"touchArea": "absolute -top-1 -bottom-1 -start-1 -end-1"
}
}'>
</div>
<!-- End Chart -->
<!-- Input Group -->
<div class="mrrep flex saet7 juk57">
<!-- Input -->
<div class="cgjzl">
<label for="hs-pro-pytfrrch-vtit-min" class="block dmv3j tuuss z0e83 dark:text-neutral-500">
Min
</label>
<input id="hs-pro-pytfrrch-vtit-min" type="sdvaz" class="hxfjh xwdnb l1xlu block mga1y cgjzl yxawv mzy38 tm0mx r73sp nqo0w pnzom x4le7 omqqq tml0h r0pj4 jvwhc disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:hover:ring-neutral-600 dark:focus:ring-neutral-600" value="250" style="-moz-appearance: textfield;">
</div>
<!-- End Input -->
<!-- Input -->
<div class="cgjzl">
<label for="hs-pro-pytfrrch-vtit-max" class="block dmv3j tuuss z0e83 dark:text-neutral-500">
Max
</label>
<input id="hs-pro-pytfrrch-vtit-max" type="sdvaz" class="hxfjh xwdnb l1xlu block mga1y cgjzl yxawv mzy38 tm0mx r73sp nqo0w pnzom x4le7 omqqq tml0h r0pj4 jvwhc disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:hover:ring-neutral-600 dark:focus:ring-neutral-600" value="750" style="-moz-appearance: textfield;">
</div>
<!-- End Input -->
</div>
<!-- End Input Group -->
</div>
<!-- End Item -->
<!-- Item -->
<div class="scfuk b21y4 uixns">
<label class="block madsw hw6xt ejo46 dark:text-neutral-200">
Date
</label>
<!-- Input Group -->
<div class="khfgm theuu juk57">
<!-- Calendar Dropdown -->
<div class="hs-dropdown [--auto-close:inside] xp67g inline-flex">
<button id="hs-pro-pytfmsd" type="button" class="u3poc l1xlu xp67g inline-flex items-center mzy38 tuuss k9mkq yxawv zxv30 ejo46 r73sp nqo0w pnzom x4le7 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden omqqq tml0h dark:bg-transparent dark:border-neutral-700 dark:text-neutral-200 dark:hover:ring-neutral-600 dark:focus:ring-neutral-600" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
<svg class="n2l26 a3b8t bnmi1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="4" rx="2" ry="2"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/><path d="M8 14h.01"/><path d="M12 14h.01"/><path d="M16 14h.01"/><path d="M8 18h.01"/><path d="M12 18h.01"/><path d="M16 18h.01"/></svg>
Start date
<svg class="n2l26 ms-auto szmrd" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
</button>
<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 qxudl transition-[opacity,margin] duration opacity-0 hidden ih37d zxv30 mzy38 x32l5 dark:bg-neutral-900" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-pytfmsd">
<!-- Calendar -->
<div class="fop0g space-y-0.5">
<!-- Months -->
<div class="khfgm vckwj items-center rdqxy xvgxz i1v87">
<!-- Prev Button -->
<div class="b8438">
<button type="button" class="x8hlq flex enhxb items-center ejo46 lk55v mr9qs disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rjc3l dark:text-neutral-400 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" aria-label="Previous">
<svg class="n2l26 szmrd" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
</button>
</div>
<!-- End Prev Button -->
<!-- Month / Year -->
<div class="mchqp flex enhxb items-center r2jif">
<div class="relative">
<select data-hs-select='{
"placeholder": "Select month",
"toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
"toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative flex xggui xp67g cursor-pointer m8hmi hw6xt ejo46 mc4eg focus:outline-hidden vquje before:absolute before:inset-0 before:z-1 dark:text-neutral-200 dark:hover:text-purple-500 dark:focus:text-purple-500",
"dropdownClasses": "nqo4p ih37d ahgde rrqls smvag space-y-0.5 zxv30 k9mkq yxawv wavyl w9ar3 overflow-hidden overflow-y-auto hm2m0 uqiuh b3ail ykfhs dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900 dark:border-neutral-700",
"optionClasses": "ur00w xp67g tuuss ejo46 cursor-pointer lk55v wavyl focus:outline-hidden rjc3l dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:text-neutral-200 dark:focus:bg-neutral-800",
"optionTemplate": "<div class=\"flex saet7 items-center xp67g \"><span data-title></span><span class=\"hidden hs-selected:block \"><svg class=\"n2l26 bnmi1 ejo46 dark:text-neutral-200 \" 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>"
}' class="hidden">
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5">June</option>
<option value="6" selected>July</option>
<option value="7">August</option>
<option value="8">September</option>
<option value="9">October</option>
<option value="10">November</option>
<option value="11">December</option>
</select>
</div>
<span class="ejo46 dark:text-neutral-200">/</span>
<div class="relative">
<select data-hs-select='{
"placeholder": "Select year",
"toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
"toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative flex xggui xp67g cursor-pointer m8hmi hw6xt ejo46 mc4eg focus:outline-hidden vquje before:absolute before:inset-0 before:z-1 dark:text-neutral-200 dark:hover:text-purple-500 dark:focus:text-purple-500",
"dropdownClasses": "nqo4p ih37d q9zci rrqls smvag space-y-0.5 zxv30 k9mkq yxawv wavyl w9ar3 overflow-hidden overflow-y-auto hm2m0 uqiuh b3ail ykfhs dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900 dark:border-neutral-700",
"optionClasses": "ur00w xp67g tuuss ejo46 cursor-pointer lk55v wavyl focus:outline-hidden rjc3l dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:text-neutral-200 dark:focus:bg-neutral-800",
"optionTemplate": "<div class=\"flex saet7 items-center xp67g \"><span data-title></span><span class=\"hidden hs-selected:block \"><svg class=\"n2l26 bnmi1 ejo46 dark:text-neutral-200 \" 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>"
}' class="hidden">
<option selected>2023</option>
<option>2024</option>
<option>2025</option>
<option>2026</option>
<option>2027</option>
</select>
</div>
</div>
<!-- End Month / Year -->
<!-- Next Button -->
<div class="b8438 flex lokyk">
<button type="button" class=" x8hlq flex enhxb items-center ejo46 lk55v mr9qs disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rjc3l dark:text-neutral-400 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" aria-label="Next">
<svg class="n2l26 szmrd" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
</button>
</div>
<!-- End Next Button -->
</div>
<!-- Months -->
<!-- Weeks -->
<div class="flex q4t00">
<span class="e2vfg ijx7r block cgjzl tuuss z0e83 dark:text-neutral-500">
Mo
</span>
<span class="e2vfg ijx7r block cgjzl tuuss z0e83 dark:text-neutral-500">
Tu
</span>
<span class="e2vfg ijx7r block cgjzl tuuss z0e83 dark:text-neutral-500">
We
</span>
<span class="e2vfg ijx7r block cgjzl tuuss z0e83 dark:text-neutral-500">
Th
</span>
<span class="e2vfg ijx7r block cgjzl tuuss z0e83 dark:text-neutral-500">
Fr
</span>
<span class="e2vfg ijx7r block cgjzl tuuss z0e83 dark:text-neutral-500">
Sa
</span>
<span class="e2vfg ijx7r block cgjzl tuuss z0e83 dark:text-neutral-500">
Su
</span>
</div>
<!-- Weeks -->
<!-- Days -->
<div class="flex">
<div>
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200" disabled>
26
</button>
</div>
<div>
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200" disabled>
27
</button>
</div>
<div>
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200" disabled>
28
</button>
</div>
<div>
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200" disabled>
29
</button>
</div>
<div>
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200" disabled>
30
</button>
</div>
<div>
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200">
1
</button>
</div>
<div>
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200">
2
</button>
</div>
</div>
<!-- Days -->
<!-- Days -->
<div class="flex">
<div>
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200">
3
</button>
</div>
<div>
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200">
4
</button>
</div>
<div >
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200">
5
</button>
</div>
<div >
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200">
6
</button>
</div>
<div >
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200">
7
</button>
</div>
<div >
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200">
8
</button>
</div>
<div >
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200">
9
</button>
</div>
</div>
<!-- Days -->
<!-- Days -->
<div class="flex">
<div >
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200">
10
</button>
</div>
<div >
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200">
11
</button>
</div>
<div >
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200">
12
</button>
</div>
<div>
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200">
13
</button>
</div>
<div>
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200">
14
</button>
</div>
<div>
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200">
15
</button>
</div>
<div>
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200">
16
</button>
</div>
</div>
<!-- Days -->
<!-- Days -->
<div class="flex">
<div>
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200">
17
</button>
</div>
<div>
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200">
18
</button>
</div>
<div>
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200">
19
</button>
</div>
<div>
<button type="button" class="e2vfg ubcvn flex enhxb items-center j3v2g k9mkq je4jy tuuss hw6xt w3h0o d41ik mr9qs dark:bg-purple-500 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rjc3l dark:hover:border-neutral-700">
20
</button>
</div>
<div>
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200">
21
</button>
</div>
<div>
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200">
22
</button>
</div>
<div>
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200">
23
</button>
</div>
</div>
<!-- Days -->
<!-- Days -->
<div class="flex">
<div>
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200">
24
</button>
</div>
<div >
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200">
25
</button>
</div>
<div >
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200">
26
</button>
</div>
<div >
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200">
27
</button>
</div>
<div >
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200">
28
</button>
</div>
<div >
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200">
29
</button>
</div>
<div >
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200">
30
</button>
</div>
</div>
<!-- Days -->
<!-- Days -->
<div class="flex">
<div >
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200">
31
</button>
</div>
<div >
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 d41ik mc4eg mr9qs disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rjc3l dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled>
1
</button>
</div>
<div>
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 d41ik mc4eg mr9qs disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rjc3l dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled>
2
</button>
</div>
<div>
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 d41ik mc4eg mr9qs disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rjc3l dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled>
3
</button>
</div>
<div>
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 d41ik mc4eg mr9qs disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rjc3l dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled>
4
</button>
</div>
<div>
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 d41ik mc4eg mr9qs disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rjc3l dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled>
5
</button>
</div>
<div>
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 d41ik mc4eg mr9qs disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rjc3l dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled>
6
</button>
</div>
</div>
<!-- Days -->
</div>
</div>
</div>
<!-- End Calendar Dropdown -->
<!-- Calendar Dropdown -->
<div class="hs-dropdown [--auto-close:inside] xp67g inline-flex">
<button id="hs-pro-pytfmed" type="button" class="u3poc l1xlu xp67g inline-flex items-center mzy38 tuuss k9mkq yxawv zxv30 ejo46 r73sp nqo0w pnzom x4le7 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden omqqq tml0h dark:bg-transparent dark:border-neutral-700 dark:text-neutral-200 dark:hover:ring-neutral-600 dark:focus:ring-neutral-600" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
<svg class="n2l26 a3b8t bnmi1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="4" rx="2" ry="2"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/><path d="M8 14h.01"/><path d="M12 14h.01"/><path d="M16 14h.01"/><path d="M8 18h.01"/><path d="M12 18h.01"/><path d="M16 18h.01"/></svg>
End date
<svg class="n2l26 ms-auto szmrd" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
</button>
<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 qxudl transition-[opacity,margin] duration opacity-0 hidden ih37d zxv30 mzy38 x32l5 dark:bg-neutral-900" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-pytfmed">
<!-- Calendar -->
<div class="fop0g space-y-0.5">
<!-- Months -->
<div class="khfgm vckwj items-center rdqxy xvgxz i1v87">
<!-- Prev Button -->
<div class="b8438">
<button type="button" class="x8hlq flex enhxb items-center ejo46 lk55v mr9qs disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rjc3l dark:text-neutral-400 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" aria-label="Previous">
<svg class="n2l26 szmrd" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
</button>
</div>
<!-- End Prev Button -->
<!-- Month / Year -->
<div class="mchqp flex enhxb items-center r2jif">
<div class="relative">
<select data-hs-select='{
"placeholder": "Select month",
"toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
"toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative flex xggui xp67g cursor-pointer m8hmi hw6xt ejo46 mc4eg focus:outline-hidden vquje before:absolute before:inset-0 before:z-1 dark:text-neutral-200 dark:hover:text-purple-500 dark:focus:text-purple-500",
"dropdownClasses": "nqo4p ih37d ahgde rrqls smvag space-y-0.5 zxv30 k9mkq yxawv wavyl w9ar3 overflow-hidden overflow-y-auto hm2m0 uqiuh b3ail ykfhs dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900 dark:border-neutral-700",
"optionClasses": "ur00w xp67g tuuss ejo46 cursor-pointer lk55v wavyl focus:outline-hidden rjc3l dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:text-neutral-200 dark:focus:bg-neutral-800",
"optionTemplate": "<div class=\"flex saet7 items-center xp67g \"><span data-title></span><span class=\"hidden hs-selected:block \"><svg class=\"n2l26 bnmi1 ejo46 dark:text-neutral-200 \" 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>"
}' class="hidden">
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5">June</option>
<option value="6" selected>July</option>
<option value="7">August</option>
<option value="8">September</option>
<option value="9">October</option>
<option value="10">November</option>
<option value="11">December</option>
</select>
</div>
<span class="ejo46 dark:text-neutral-200">/</span>
<div class="relative">
<select data-hs-select='{
"placeholder": "Select year",
"toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
"toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative flex xggui xp67g cursor-pointer m8hmi hw6xt ejo46 mc4eg focus:outline-hidden vquje before:absolute before:inset-0 before:z-1 dark:text-neutral-200 dark:hover:text-purple-500 dark:focus:text-purple-500",
"dropdownClasses": "nqo4p ih37d q9zci rrqls smvag space-y-0.5 zxv30 k9mkq yxawv wavyl w9ar3 overflow-hidden overflow-y-auto hm2m0 uqiuh b3ail ykfhs dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900 dark:border-neutral-700",
"optionClasses": "ur00w xp67g tuuss ejo46 cursor-pointer lk55v wavyl focus:outline-hidden rjc3l dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:text-neutral-200 dark:focus:bg-neutral-800",
"optionTemplate": "<div class=\"flex saet7 items-center xp67g \"><span data-title></span><span class=\"hidden hs-selected:block \"><svg class=\"n2l26 bnmi1 ejo46 dark:text-neutral-200 \" 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>"
}' class="hidden">
<option selected>2023</option>
<option>2024</option>
<option>2025</option>
<option>2026</option>
<option>2027</option>
</select>
</div>
</div>
<!-- End Month / Year -->
<!-- Next Button -->
<div class="b8438 flex lokyk">
<button type="button" class=" x8hlq flex enhxb items-center ejo46 lk55v mr9qs disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rjc3l dark:text-neutral-400 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" aria-label="Next">
<svg class="n2l26 szmrd" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
</button>
</div>
<!-- End Next Button -->
</div>
<!-- Months -->
<!-- Weeks -->
<div class="flex q4t00">
<span class="e2vfg ijx7r block cgjzl tuuss z0e83 dark:text-neutral-500">
Mo
</span>
<span class="e2vfg ijx7r block cgjzl tuuss z0e83 dark:text-neutral-500">
Tu
</span>
<span class="e2vfg ijx7r block cgjzl tuuss z0e83 dark:text-neutral-500">
We
</span>
<span class="e2vfg ijx7r block cgjzl tuuss z0e83 dark:text-neutral-500">
Th
</span>
<span class="e2vfg ijx7r block cgjzl tuuss z0e83 dark:text-neutral-500">
Fr
</span>
<span class="e2vfg ijx7r block cgjzl tuuss z0e83 dark:text-neutral-500">
Sa
</span>
<span class="e2vfg ijx7r block cgjzl tuuss z0e83 dark:text-neutral-500">
Su
</span>
</div>
<!-- Weeks -->
<!-- Days -->
<div class="flex">
<div>
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200" disabled>
26
</button>
</div>
<div>
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200" disabled>
27
</button>
</div>
<div>
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200" disabled>
28
</button>
</div>
<div>
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200" disabled>
29
</button>
</div>
<div>
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200" disabled>
30
</button>
</div>
<div>
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200">
1
</button>
</div>
<div>
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200">
2
</button>
</div>
</div>
<!-- Days -->
<!-- Days -->
<div class="flex">
<div>
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200">
3
</button>
</div>
<div>
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200">
4
</button>
</div>
<div >
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200">
5
</button>
</div>
<div >
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200">
6
</button>
</div>
<div >
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200">
7
</button>
</div>
<div >
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200">
8
</button>
</div>
<div >
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200">
9
</button>
</div>
</div>
<!-- Days -->
<!-- Days -->
<div class="flex">
<div >
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200">
10
</button>
</div>
<div >
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200">
11
</button>
</div>
<div >
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200">
12
</button>
</div>
<div>
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200">
13
</button>
</div>
<div>
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200">
14
</button>
</div>
<div>
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200">
15
</button>
</div>
<div>
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200">
16
</button>
</div>
</div>
<!-- Days -->
<!-- Days -->
<div class="flex">
<div>
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200">
17
</button>
</div>
<div>
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200">
18
</button>
</div>
<div>
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200">
19
</button>
</div>
<div>
<button type="button" class="e2vfg ubcvn flex enhxb items-center j3v2g k9mkq je4jy tuuss hw6xt w3h0o d41ik mr9qs dark:bg-purple-500 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rjc3l dark:hover:border-neutral-700">
20
</button>
</div>
<div>
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200">
21
</button>
</div>
<div>
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200">
22
</button>
</div>
<div>
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200">
23
</button>
</div>
</div>
<!-- Days -->
<!-- Days -->
<div class="flex">
<div>
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200">
24
</button>
</div>
<div >
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200">
25
</button>
</div>
<div >
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200">
26
</button>
</div>
<div >
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200">
27
</button>
</div>
<div >
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200">
28
</button>
</div>
<div >
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200">
29
</button>
</div>
<div >
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200">
30
</button>
</div>
</div>
<!-- Days -->
<!-- Days -->
<div class="flex">
<div >
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 mr9qs d41ik mc4eg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rllcy vquje dark:text-neutral-200">
31
</button>
</div>
<div >
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 d41ik mc4eg mr9qs disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rjc3l dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled>
1
</button>
</div>
<div>
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 d41ik mc4eg mr9qs disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rjc3l dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled>
2
</button>
</div>
<div>
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 d41ik mc4eg mr9qs disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rjc3l dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled>
3
</button>
</div>
<div>
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 d41ik mc4eg mr9qs disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rjc3l dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled>
4
</button>
</div>
<div>
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 d41ik mc4eg mr9qs disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rjc3l dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled>
5
</button>
</div>
<div>
<button type="button" class="e2vfg ubcvn flex enhxb items-center k9mkq je4jy tuuss ejo46 d41ik mc4eg mr9qs disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rjc3l dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled>
6
</button>
</div>
</div>
<!-- Days -->
</div>
</div>
</div>
<!-- End Calendar Dropdown -->
</div>
<!-- End Input Group -->
<!-- Button Group -->
<div class="eg6px flex flex-wrap v6f2r">
<!-- Checkbox -->
<label for="hs-pro-pytfmdp-lm" class="hxfjh psrjx relative flex enhxb items-center cgjzl d5esf zxv30 k9mkq yxawv r73sp nqo0w ejo46 cursor-pointer mzy38 d41ik dco8i dark:bg-neutral-800 dark:text-neutral-200 dark:border-neutral-700 dark:hover:ring-neutral-600 dark:hover:ring-neutral-600
us66v txoy5 k7vji ffwo9
dark:has-checked:bg-purple-800/30 dark:has-checked:border-purple-800/50 dark:has-checked:ring-purple-800/50 dark:has-checked:text-purple-500
has-disabled:pointer-events-none
has-disabled:text-gray-200 dark:has-disabled:text-neutral-700">
<input type="radio" id="hs-pro-pytfmdp-lm" class="hidden peer" name="hs-pro-pytfmdp" >
<span class="flex n2l26 enhxb items-center kma6c hs5iv rvrir mr9qs nf9l7 rvew4 peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-white">
<svg class="n2l26 z859i" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
</span>
<span class="block">
Past 30 days
</span>
</label>
<!-- End Checkbox -->
<!-- Checkbox -->
<label for="hs-pro-pytfmdp-lq" class="hxfjh psrjx relative flex enhxb items-center cgjzl d5esf zxv30 k9mkq yxawv r73sp nqo0w ejo46 cursor-pointer mzy38 d41ik dco8i dark:bg-neutral-800 dark:text-neutral-200 dark:border-neutral-700 dark:hover:ring-neutral-600 dark:hover:ring-neutral-600
us66v txoy5 k7vji ffwo9
dark:has-checked:bg-purple-800/30 dark:has-checked:border-purple-800/50 dark:has-checked:ring-purple-800/50 dark:has-checked:text-purple-500
has-disabled:pointer-events-none
has-disabled:text-gray-200 dark:has-disabled:text-neutral-700">
<input type="radio" id="hs-pro-pytfmdp-lq" class="hidden peer" name="hs-pro-pytfmdp" >
<span class="flex n2l26 enhxb items-center kma6c hs5iv rvrir mr9qs nf9l7 rvew4 peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-white">
<svg class="n2l26 z859i" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
</span>
<span class="block">
Past 3 months
</span>
</label>
<!-- End Checkbox -->
<!-- Checkbox -->
<label for="hs-pro-pytfmdp-ly" class="hxfjh psrjx relative flex enhxb items-center cgjzl d5esf zxv30 k9mkq yxawv r73sp nqo0w ejo46 cursor-pointer mzy38 d41ik dco8i dark:bg-neutral-800 dark:text-neutral-200 dark:border-neutral-700 dark:hover:ring-neutral-600 dark:hover:ring-neutral-600
us66v txoy5 k7vji ffwo9
dark:has-checked:bg-purple-800/30 dark:has-checked:border-purple-800/50 dark:has-checked:ring-purple-800/50 dark:has-checked:text-purple-500
has-disabled:pointer-events-none
has-disabled:text-gray-200 dark:has-disabled:text-neutral-700">
<input type="radio" id="hs-pro-pytfmdp-ly" class="hidden peer" name="hs-pro-pytfmdp" >
<span class="flex n2l26 enhxb items-center kma6c hs5iv rvrir mr9qs nf9l7 rvew4 peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-white">
<svg class="n2l26 z859i" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
</span>
<span class="block">
2024
</span>
</label>
<!-- End Checkbox -->
</div>
<!-- End Button Group -->
</div>
<!-- End Item -->
<!-- Item -->
<div class="scfuk b21y4 uixns">
<label class="block madsw hw6xt ejo46 dark:text-neutral-200">
Balances
</label>
<!-- Button Group -->
<div class="khfgm boxle j4iam gs0kh v6f2r vivzk">
<!-- Checkbox -->
<label for="hs-pro-pytfmusd" class="fop0g flex items-center rdqxy tuuss zxv30 k9mkq yxawv ejo46 r73sp nqo0w cursor-pointer mzy38 d41ik dco8i dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200 dark:hover:ring-neutral-600 dark:hover:ring-neutral-600">
<img class="n2l26 nbsdr x8hlq mr9qs" src="../../assets/vendor/svg-country-flags/png250px/us.png" alt="Avatar">
<span class="dgznh">
<span class="block">
USD
</span>
</span>
<input type="checkbox" id="hs-pro-pytfmusd" class="n2l26 s1u6m yxawv mr9qs jr5ck checked:border-purple-600 xeklp disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-purple-500 dark:checked:border-purple-500 dark:focus:ring-offset-neutral-800" name="hs-pro-pytfmcr" >
</label>
<!-- End Checkbox -->
<!-- Checkbox -->
<label for="hs-pro-pytfmgb" class="fop0g flex items-center rdqxy tuuss zxv30 k9mkq yxawv ejo46 r73sp nqo0w cursor-pointer mzy38 d41ik dco8i dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200 dark:hover:ring-neutral-600 dark:hover:ring-neutral-600">
<img class="n2l26 nbsdr x8hlq mr9qs" src="../../assets/vendor/svg-country-flags/png250px/gb.png" alt="Avatar">
<span class="dgznh">
<span class="block">
GBP
</span>
</span>
<input type="checkbox" id="hs-pro-pytfmgb" class="n2l26 s1u6m yxawv mr9qs jr5ck checked:border-purple-600 xeklp disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-purple-500 dark:checked:border-purple-500 dark:focus:ring-offset-neutral-800" name="hs-pro-pytfmcr" >
</label>
<!-- End Checkbox -->
<!-- Checkbox -->
<label for="hs-pro-pytfmeuro" class="fop0g flex items-center rdqxy tuuss zxv30 k9mkq yxawv ejo46 r73sp nqo0w cursor-pointer mzy38 d41ik dco8i dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200 dark:hover:ring-neutral-600 dark:hover:ring-neutral-600">
<img class="n2l26 nbsdr x8hlq mr9qs" src="../../assets/vendor/svg-country-flags/png250px/eu.png" alt="Avatar">
<span class="dgznh">
<span class="block">
EURO
</span>
</span>
<input type="checkbox" id="hs-pro-pytfmeuro" class="n2l26 s1u6m yxawv mr9qs jr5ck checked:border-purple-600 xeklp disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-purple-500 dark:checked:border-purple-500 dark:focus:ring-offset-neutral-800" name="hs-pro-pytfmcr" >
</label>
<!-- End Checkbox -->
</div>
<!-- End Button Group -->
</div>
<!-- End Item -->
<!-- Item -->
<div class="scfuk b21y4 uixns">
<label class="block madsw hw6xt ejo46 dark:text-neutral-200">
Type
</label>
<!-- Button Group -->
<div class="flex flex-wrap v6f2r">
<!-- Checkbox -->
<label for="hs-pro-pytfmty-1" class="hxfjh psrjx relative flex enhxb items-center cgjzl d5esf zxv30 k9mkq yxawv r73sp nqo0w ejo46 cursor-pointer mzy38 d41ik dco8i dark:bg-neutral-800 dark:text-neutral-200 dark:border-neutral-700 dark:hover:ring-neutral-600 dark:hover:ring-neutral-600
us66v txoy5 k7vji ffwo9
dark:has-checked:bg-purple-800/30 dark:has-checked:border-purple-800/50 dark:has-checked:ring-purple-800/50 dark:has-checked:text-purple-500
has-disabled:pointer-events-none
has-disabled:text-gray-200 dark:has-disabled:text-neutral-700">
<input type="checkbox" id="hs-pro-pytfmty-1" class="hidden peer" name="hs-pro-pytfmty" >
<span class="flex n2l26 enhxb items-center kma6c hs5iv rvrir mr9qs nf9l7 rvew4 peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-white">
<svg class="n2l26 z859i" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
</span>
<span class="block">
Transfers
</span>
</label>
<!-- End Checkbox -->
<!-- Checkbox -->
<label for="hs-pro-pytfmty-2" class="hxfjh psrjx relative flex enhxb items-center cgjzl d5esf zxv30 k9mkq yxawv r73sp nqo0w ejo46 cursor-pointer mzy38 d41ik dco8i dark:bg-neutral-800 dark:text-neutral-200 dark:border-neutral-700 dark:hover:ring-neutral-600 dark:hover:ring-neutral-600
us66v txoy5 k7vji ffwo9
dark:has-checked:bg-purple-800/30 dark:has-checked:border-purple-800/50 dark:has-checked:ring-purple-800/50 dark:has-checked:text-purple-500
has-disabled:pointer-events-none
has-disabled:text-gray-200 dark:has-disabled:text-neutral-700">
<input type="checkbox" id="hs-pro-pytfmty-2" class="hidden peer" name="hs-pro-pytfmty" >
<span class="flex n2l26 enhxb items-center kma6c hs5iv rvrir mr9qs nf9l7 rvew4 peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-white">
<svg class="n2l26 z859i" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
</span>
<span class="block">
Cash withdrawal
</span>
</label>
<!-- End Checkbox -->
<!-- Checkbox -->
<label for="hs-pro-pytfmty-3" class="hxfjh psrjx relative flex enhxb items-center cgjzl d5esf zxv30 k9mkq yxawv r73sp nqo0w ejo46 cursor-pointer mzy38 d41ik dco8i dark:bg-neutral-800 dark:text-neutral-200 dark:border-neutral-700 dark:hover:ring-neutral-600 dark:hover:ring-neutral-600
us66v txoy5 k7vji ffwo9
dark:has-checked:bg-purple-800/30 dark:has-checked:border-purple-800/50 dark:has-checked:ring-purple-800/50 dark:has-checked:text-purple-500
has-disabled:pointer-events-none
has-disabled:text-gray-200 dark:has-disabled:text-neutral-700">
<input type="checkbox" id="hs-pro-pytfmty-3" class="hidden peer" name="hs-pro-pytfmty" >
<span class="flex n2l26 enhxb items-center kma6c hs5iv rvrir mr9qs nf9l7 rvew4 peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-white">
<svg class="n2l26 z859i" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
</span>
<span class="block">
Card transactions
</span>
</label>
<!-- End Checkbox -->
<!-- Checkbox -->
<label for="hs-pro-pytfmty-4" class="hxfjh psrjx relative flex enhxb items-center cgjzl d5esf zxv30 k9mkq yxawv r73sp nqo0w ejo46 cursor-pointer mzy38 d41ik dco8i dark:bg-neutral-800 dark:text-neutral-200 dark:border-neutral-700 dark:hover:ring-neutral-600 dark:hover:ring-neutral-600
us66v txoy5 k7vji ffwo9
dark:has-checked:bg-purple-800/30 dark:has-checked:border-purple-800/50 dark:has-checked:ring-purple-800/50 dark:has-checked:text-purple-500
has-disabled:pointer-events-none
has-disabled:text-gray-200 dark:has-disabled:text-neutral-700">
<input type="checkbox" id="hs-pro-pytfmty-4" class="hidden peer" name="hs-pro-pytfmty" >
<span class="flex n2l26 enhxb items-center kma6c hs5iv rvrir mr9qs nf9l7 rvew4 peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-white">
<svg class="n2l26 z859i" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
</span>
<span class="block">
Direct debits
</span>
</label>
<!-- End Checkbox -->
<!-- Checkbox -->
<label for="hs-pro-pytfmty-5" class="hxfjh psrjx relative flex enhxb items-center cgjzl d5esf zxv30 k9mkq yxawv r73sp nqo0w ejo46 cursor-pointer mzy38 d41ik dco8i dark:bg-neutral-800 dark:text-neutral-200 dark:border-neutral-700 dark:hover:ring-neutral-600 dark:hover:ring-neutral-600
us66v txoy5 k7vji ffwo9
dark:has-checked:bg-purple-800/30 dark:has-checked:border-purple-800/50 dark:has-checked:ring-purple-800/50 dark:has-checked:text-purple-500
has-disabled:pointer-events-none
has-disabled:text-gray-200 dark:has-disabled:text-neutral-700">
<input type="checkbox" id="hs-pro-pytfmty-5" class="hidden peer" name="hs-pro-pytfmty" >
<span class="flex n2l26 enhxb items-center kma6c hs5iv rvrir mr9qs nf9l7 rvew4 peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-white">
<svg class="n2l26 z859i" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
</span>
<span class="block">
Batch transfers
</span>
</label>
<!-- End Checkbox -->
<!-- Checkbox -->
<label for="hs-pro-pytfmty-6" class="hxfjh psrjx relative flex enhxb items-center cgjzl d5esf zxv30 k9mkq yxawv r73sp nqo0w ejo46 cursor-pointer mzy38 d41ik dco8i dark:bg-neutral-800 dark:text-neutral-200 dark:border-neutral-700 dark:hover:ring-neutral-600 dark:hover:ring-neutral-600
us66v txoy5 k7vji ffwo9
dark:has-checked:bg-purple-800/30 dark:has-checked:border-purple-800/50 dark:has-checked:ring-purple-800/50 dark:has-checked:text-purple-500
has-disabled:pointer-events-none
has-disabled:text-gray-200 dark:has-disabled:text-neutral-700">
<input type="checkbox" id="hs-pro-pytfmty-6" class="hidden peer" name="hs-pro-pytfmty" >
<span class="flex n2l26 enhxb items-center kma6c hs5iv rvrir mr9qs nf9l7 rvew4 peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-white">
<svg class="n2l26 z859i" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
</span>
<span class="block">
Money added
</span>
</label>
<!-- End Checkbox -->
<!-- Checkbox -->
<label for="hs-pro-pytfmty-7" class="hxfjh psrjx relative flex enhxb items-center cgjzl d5esf zxv30 k9mkq yxawv r73sp nqo0w ejo46 cursor-pointer mzy38 d41ik dco8i dark:bg-neutral-800 dark:text-neutral-200 dark:border-neutral-700 dark:hover:ring-neutral-600 dark:hover:ring-neutral-600
us66v txoy5 k7vji ffwo9
dark:has-checked:bg-purple-800/30 dark:has-checked:border-purple-800/50 dark:has-checked:ring-purple-800/50 dark:has-checked:text-purple-500
has-disabled:pointer-events-none
has-disabled:text-gray-200 dark:has-disabled:text-neutral-700">
<input type="checkbox" id="hs-pro-pytfmty-7" class="hidden peer" name="hs-pro-pytfmty" >
<span class="flex n2l26 enhxb items-center kma6c hs5iv rvrir mr9qs nf9l7 rvew4 peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-white">
<svg class="n2l26 z859i" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
</span>
<span class="block">
Prefunding transfers
</span>
</label>
<!-- End Checkbox -->
<!-- Checkbox -->
<label for="hs-pro-pytfmty-8" class="hxfjh psrjx relative flex enhxb items-center cgjzl d5esf zxv30 k9mkq yxawv r73sp nqo0w ejo46 cursor-pointer mzy38 d41ik dco8i dark:bg-neutral-800 dark:text-neutral-200 dark:border-neutral-700 dark:hover:ring-neutral-600 dark:hover:ring-neutral-600
us66v txoy5 k7vji ffwo9
dark:has-checked:bg-purple-800/30 dark:has-checked:border-purple-800/50 dark:has-checked:ring-purple-800/50 dark:has-checked:text-purple-500
has-disabled:pointer-events-none
has-disabled:text-gray-200 dark:has-disabled:text-neutral-700">
<input type="checkbox" id="hs-pro-pytfmty-8" class="hidden peer" name="hs-pro-pytfmty" >
<span class="flex n2l26 enhxb items-center kma6c hs5iv rvrir mr9qs nf9l7 rvew4 peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-white">
<svg class="n2l26 z859i" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
</span>
<span class="block">
Auto conversions
</span>
</label>
<!-- End Checkbox -->
<!-- Checkbox -->
<label for="hs-pro-pytfmty-9" class="hxfjh psrjx relative flex enhxb items-center cgjzl d5esf zxv30 k9mkq yxawv r73sp nqo0w ejo46 cursor-pointer mzy38 d41ik dco8i dark:bg-neutral-800 dark:text-neutral-200 dark:border-neutral-700 dark:hover:ring-neutral-600 dark:hover:ring-neutral-600
us66v txoy5 k7vji ffwo9
dark:has-checked:bg-purple-800/30 dark:has-checked:border-purple-800/50 dark:has-checked:ring-purple-800/50 dark:has-checked:text-purple-500
has-disabled:pointer-events-none
has-disabled:text-gray-200 dark:has-disabled:text-neutral-700">
<input type="checkbox" id="hs-pro-pytfmty-9" class="hidden peer" name="hs-pro-pytfmty" >
<span class="flex n2l26 enhxb items-center kma6c hs5iv rvrir mr9qs nf9l7 rvew4 peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-white">
<svg class="n2l26 z859i" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
</span>
<span class="block">
Conversions
</span>
</label>
<!-- End Checkbox -->
<!-- Checkbox -->
<label for="hs-pro-pytfmty-10" class="hxfjh psrjx relative flex enhxb items-center cgjzl d5esf zxv30 k9mkq yxawv r73sp nqo0w ejo46 cursor-pointer mzy38 d41ik dco8i dark:bg-neutral-800 dark:text-neutral-200 dark:border-neutral-700 dark:hover:ring-neutral-600 dark:hover:ring-neutral-600
us66v txoy5 k7vji ffwo9
dark:has-checked:bg-purple-800/30 dark:has-checked:border-purple-800/50 dark:has-checked:ring-purple-800/50 dark:has-checked:text-purple-500
has-disabled:pointer-events-none
has-disabled:text-gray-200 dark:has-disabled:text-neutral-700">
<input type="checkbox" id="hs-pro-pytfmty-10" class="hidden peer" name="hs-pro-pytfmty" >
<span class="flex n2l26 enhxb items-center kma6c hs5iv rvrir mr9qs nf9l7 rvew4 peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-white">
<svg class="n2l26 z859i" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
</span>
<span class="block">
Asset fees
</span>
</label>
<!-- End Checkbox -->
</div>
<!-- End Button Group -->
</div>
<!-- End Item -->
<!-- Item -->
<div class="scfuk b21y4 uixns">
<label class="block madsw hw6xt ejo46 dark:text-neutral-200">
Status
</label>
<!-- Button Group -->
<div class="flex flex-wrap v6f2r">
<!-- Checkbox -->
<label for="hs-pro-pytfmst-completed" class="hxfjh psrjx relative flex enhxb items-center cgjzl d5esf zxv30 k9mkq yxawv r73sp nqo0w ejo46 cursor-pointer mzy38 d41ik dco8i dark:bg-neutral-800 dark:text-neutral-200 dark:border-neutral-700 dark:hover:ring-neutral-600 dark:hover:ring-neutral-600
us66v txoy5 k7vji ffwo9
dark:has-checked:bg-purple-800/30 dark:has-checked:border-purple-800/50 dark:has-checked:ring-purple-800/50 dark:has-checked:text-purple-500
has-disabled:pointer-events-none
has-disabled:text-gray-200 dark:has-disabled:text-neutral-700">
<input type="checkbox" id="hs-pro-pytfmst-completed" class="hidden peer" name="hs-pro-pytfmst" >
<span class="flex n2l26 enhxb items-center kma6c hs5iv rvrir mr9qs nf9l7 rvew4 peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-white">
<svg class="n2l26 z859i" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
</span>
<span class="block">
Completed
</span>
</label>
<!-- End Checkbox -->
<!-- Checkbox -->
<label for="hs-pro-pytfmst-cancelled" class="hxfjh psrjx relative flex enhxb items-center cgjzl d5esf zxv30 k9mkq yxawv r73sp nqo0w ejo46 cursor-pointer mzy38 d41ik dco8i dark:bg-neutral-800 dark:text-neutral-200 dark:border-neutral-700 dark:hover:ring-neutral-600 dark:hover:ring-neutral-600
us66v txoy5 k7vji ffwo9
dark:has-checked:bg-purple-800/30 dark:has-checked:border-purple-800/50 dark:has-checked:ring-purple-800/50 dark:has-checked:text-purple-500
has-disabled:pointer-events-none
has-disabled:text-gray-200 dark:has-disabled:text-neutral-700">
<input type="checkbox" id="hs-pro-pytfmst-cancelled" class="hidden peer" name="hs-pro-pytfmst" >
<span class="flex n2l26 enhxb items-center kma6c hs5iv rvrir mr9qs nf9l7 rvew4 peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-white">
<svg class="n2l26 z859i" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
</span>
<span class="block">
Cancelled
</span>
</label>
<!-- End Checkbox -->
</div>
<!-- End Button Group -->
</div>
<!-- End Item -->
<!-- Item -->
<div class="scfuk b21y4 uixns">
<label class="block madsw hw6xt ejo46 dark:text-neutral-200">
Direction
</label>
<!-- Button Group -->
<div class="khfgm boxle j4iam gs0kh v6f2r vivzk">
<!-- Checkbox -->
<label for="hs-pro-pytfmall" class="fop0g flex items-center rdqxy tuuss zxv30 k9mkq yxawv ejo46 r73sp nqo0w cursor-pointer mzy38 d41ik dco8i dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200 dark:hover:ring-neutral-600 dark:hover:ring-neutral-600">
<span class="flex n2l26 enhxb items-center x8hlq gxtht ejo46 mr9qs dark:bg-neutral-700 dark:text-neutral-200">
<svg class="n2l26 szmrd" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3 4 7l4 4"/><path d="M4 7h16"/><path d="m16 21 4-4-4-4"/><path d="M20 17H4"/></svg>
</span>
<span class="dgznh">
<span class="block">
All
</span>
</span>
<input type="radio" id="hs-pro-pytfmall" class="n2l26 s1u6m yxawv mr9qs jr5ck checked:border-purple-600 xeklp disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-purple-500 dark:checked:border-purple-500 dark:focus:ring-offset-neutral-800" name="hs-pro-pytfmmiao" >
</label>
<!-- End Checkbox -->
<!-- Checkbox -->
<label for="hs-pro-pytfmmi" class="fop0g flex items-center rdqxy tuuss zxv30 k9mkq yxawv ejo46 r73sp nqo0w cursor-pointer mzy38 d41ik dco8i dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200 dark:hover:ring-neutral-600 dark:hover:ring-neutral-600">
<span class="flex n2l26 enhxb items-center x8hlq gxtht ejo46 mr9qs dark:bg-neutral-700 dark:text-neutral-200">
<svg class="n2l26 szmrd" 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="M17 7 7 17"/><path d="M17 17H7V7"/></svg>
</span>
<span class="dgznh">
<span class="block">
Money in
</span>
</span>
<input type="radio" id="hs-pro-pytfmmi" class="n2l26 s1u6m yxawv mr9qs jr5ck checked:border-purple-600 xeklp disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-purple-500 dark:checked:border-purple-500 dark:focus:ring-offset-neutral-800" name="hs-pro-pytfmmiao" >
</label>
<!-- End Checkbox -->
<!-- Checkbox -->
<label for="hs-pro-pytfmmo" class="fop0g flex items-center rdqxy tuuss zxv30 k9mkq yxawv ejo46 r73sp nqo0w cursor-pointer mzy38 d41ik dco8i dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200 dark:hover:ring-neutral-600 dark:hover:ring-neutral-600">
<span class="flex n2l26 enhxb items-center x8hlq gxtht ejo46 mr9qs dark:bg-neutral-700 dark:text-neutral-200">
<svg class="n2l26 szmrd" 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 7h10v10"/><path d="M7 17 17 7"/></svg>
</span>
<span class="dgznh">
<span class="block">
Money out
</span>
</span>
<input type="radio" id="hs-pro-pytfmmo" class="n2l26 s1u6m yxawv mr9qs jr5ck checked:border-purple-600 xeklp disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-purple-500 dark:checked:border-purple-500 dark:focus:ring-offset-neutral-800" name="hs-pro-pytfmmiao" >
</label>
<!-- End Checkbox -->
</div>
<!-- End Button Group -->
</div>
<!-- End Item -->
<!-- Item -->
<div class="scfuk b21y4 uixns">
<label class="block madsw hw6xt ejo46 dark:text-neutral-200">
Currencies
</label>
<!-- Input Group -->
<div class="khfgm boxle j4iam juk57">
<div>
<label class="r8a99">
From
</label>
<!-- Select -->
<div class="relative inline-block xp67g">
<select data-hs-select='{
"placeholder": "From any currency",
"hasSearch": true,
"searchPlaceholder": "Type a currency",
"searchClasses": "block f9d5d oyxl9 l1xlu xp67g tm0mx yxawv wavyl omqqq tml0h dark:bg-neutral-950 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder:text-neutral-400",
"searchWrapperClasses": "zxv30 ur00w -mx-1 gomb9 zxmp1 dark:bg-neutral-950",
"toggleTag": "<button type=\"button\" aria-expanded=\"false\"><span class=\"flex \" data-icon></span><span class=\"ejo46 dark:text-neutral-200 \" data-title></span></button>",
"toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative u3poc yjt4b t64z2 flex items-center u3ov7 xggui xp67g cursor-pointer zxv30 k9mkq yxawv mzy38 m8hmi tuuss r73sp nqo0w pnzom x4le7 focus:outline-hidden tml0h dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400 dark:focus:outline-hidden dark:hover:ring-neutral-600 dark:focus:ring-neutral-600",
"dropdownClasses": "c61v5 rrqls smvag e3iwi space-y-0.5 ih37d xp67g overflow-hidden overflow-y-auto zxv30 mzy38 x32l5 hm2m0 uqiuh b3ail ykfhs dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-950",
"optionClasses": "hs-selected:bg-gray-100 dark:hs-selected:bg-neutral-800 hxfjh gjk1t xp67g tuuss ejo46 cursor-pointer lk55v wavyl focus:outline-hidden rjc3l dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800",
"optionTemplate": "<div><div class=\"flex items-center \"><div class=\"n2l26 a3b8t \" data-icon></div><div class=\"dgznh \"><div class=\"flex saet7 items-center rdqxy \"><div class=\"ejo46 dark:text-neutral-200 \" data-title></div><div class=\"z0e83 dark:text-neutral-500 \" data-description></div></div></div></div></div>",
"extraMarkup": "<div class=\"absolute uwi6w f65mc cursor-pointer -translate-y-1/2 \"><svg class=\"n2l26 szmrd ejo46 dark:text-neutral-200 \" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"/></svg></div>"
}' class="hidden">
<option value="">Choose</option>
<option value="USD" data-hs-select-option='{
"description": "United States Dollar",
"icon": "<img class=\"inline-block n2l26 szmrd mr9qs \" src=\"../../assets/vendor/svg-country-flags/png100px/us.png\" alt=\"United States Dollar\" />"}'>
USD
</option>
<option value="GBP" data-hs-select-option='{
"description": "British Pound",
"icon": "<img class=\"inline-block n2l26 szmrd mr9qs \" src=\"../../assets/vendor/svg-country-flags/png100px/gb.png\" alt=\"British Pound\" />"}'>
GBP
</option>
<option value="EURO" data-hs-select-option='{
"description": "EUR",
"icon": "<img class=\"inline-block n2l26 szmrd mr9qs \" src=\"../../assets/vendor/svg-country-flags/png100px/eu.png\" alt=\"EUR\" />"}'>
EURO
</option>
</select>
</div>
<!-- End Select -->
</div>
<div>
<label class="r8a99">
To
</label>
<!-- Select -->
<div class="relative inline-block xp67g">
<select data-hs-select='{
"placeholder": "To any currency",
"hasSearch": true,
"searchPlaceholder": "Type a currency",
"searchClasses": "block f9d5d oyxl9 l1xlu xp67g tm0mx yxawv wavyl omqqq tml0h dark:bg-neutral-950 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder:text-neutral-400",
"searchWrapperClasses": "zxv30 ur00w -mx-1 gomb9 zxmp1 dark:bg-neutral-950",
"toggleTag": "<button type=\"button\" aria-expanded=\"false\"><span class=\"flex \" data-icon></span><span class=\"ejo46 dark:text-neutral-200 \" data-title></span></button>",
"toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative u3poc yjt4b t64z2 flex items-center u3ov7 xggui xp67g cursor-pointer zxv30 k9mkq yxawv mzy38 m8hmi tuuss r73sp nqo0w pnzom x4le7 focus:outline-hidden tml0h dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400 dark:focus:outline-hidden dark:hover:ring-neutral-600 dark:focus:ring-neutral-600",
"dropdownClasses": "c61v5 rrqls smvag e3iwi space-y-0.5 ih37d xp67g overflow-hidden overflow-y-auto zxv30 mzy38 x32l5 hm2m0 uqiuh b3ail ykfhs dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-950",
"optionClasses": "hs-selected:bg-gray-100 dark:hs-selected:bg-neutral-800 hxfjh gjk1t xp67g tuuss ejo46 cursor-pointer lk55v wavyl focus:outline-hidden rjc3l dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800",
"optionTemplate": "<div><div class=\"flex items-center \"><div class=\"n2l26 a3b8t \" data-icon></div><div class=\"dgznh \"><div class=\"flex saet7 items-center rdqxy \"><div class=\"ejo46 dark:text-neutral-200 \" data-title></div><div class=\"z0e83 dark:text-neutral-500 \" data-description></div></div></div></div></div>",
"extraMarkup": "<div class=\"absolute uwi6w f65mc cursor-pointer -translate-y-1/2 \"><svg class=\"n2l26 szmrd ejo46 dark:text-neutral-200 \" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"/></svg></div>"
}' class="hidden">
<option value="">Choose</option>
<option value="USD" data-hs-select-option='{
"description": "United States Dollar",
"icon": "<img class=\"inline-block n2l26 szmrd mr9qs \" src=\"../../assets/vendor/svg-country-flags/png100px/us.png\" alt=\"United States Dollar\" />"}'>
USD
</option>
<option value="GBP" data-hs-select-option='{
"description": "British Pound",
"icon": "<img class=\"inline-block n2l26 szmrd mr9qs \" src=\"../../assets/vendor/svg-country-flags/png100px/gb.png\" alt=\"British Pound\" />"}'>
GBP
</option>
<option value="EURO" data-hs-select-option='{
"description": "EUR",
"icon": "<img class=\"inline-block n2l26 szmrd mr9qs \" src=\"../../assets/vendor/svg-country-flags/png100px/eu.png\" alt=\"EUR\" />"}'>
EURO
</option>
</select>
</div>
<!-- End Select -->
</div>
</div>
<!-- End Input Group -->
</div>
<!-- End Item -->
</div>
<!-- Footer -->
<div class="mi46d rht0b flex saet7 items-center rdqxy jhbd9 yxawv dark:border-neutral-700">
<button type="button" class="u3poc l1xlu inline-flex enhxb items-center lwq0m tuuss hw6xt mzy38 k9mkq yxawv zxv30 ejo46 ntfdl wsl5v disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden u7q2f dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" data-hs-overlay="#hs-pro-pytfm">
Clear all
</button>
<button type="button" class="u3poc l1xlu inline-flex enhxb items-center lwq0m tuuss hw6xt mzy38 k9mkq je4jy hs5iv w3h0o bsfgs disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden pcmsi" data-hs-overlay="#hs-pro-pytfm">
Apply
</button>
</div>
<!-- End Footer -->
</div>
<!-- End Card -->
<script src="../../assets/vendor/lodash/lodash.min.js"></script>
<script src="../../assets/vendor/apexcharts/dist/apexcharts.min.js"></script>
<script>
function buildTooltip(props, options) {
const {
title,
mode,
valuePrefix = '$',
isValueDivided = true,
valuePostfix = '',
hasTextLabel = false,
invertGroup = false,
labelDivider = '',
wrapperClasses = 'r8vr5 madsw zxv30 k9mkq yxawv ejo46 wavyl qdmo7 dark:bg-neutral-800 dark:border-neutral-700',
wrapperExtClasses = '',
seriesClasses = 'on128',
seriesExtClasses = '',
titleClasses = 'hysdx txx5h lb789 mdim3 ejo46 jnjrn dark:bg-neutral-800! dark:border-neutral-700! dark:text-neutral-200',
titleExtClasses = '',
markerClasses = 'odtso fg08f zmydb',
markerExtClasses = 'hgwpu',
valueClasses = 'tnvde z0e83 ms-auto! dark:text-neutral-400',
valueExtClasses = '',
labelClasses = 'z0e83 dark:text-neutral-400',
labelExtClasses = ''
} = options;
const { dataPointIndex } = props;
const { colors } = props.ctx.opts;
const series = props.ctx.opts.series;
let seriesGroups = '';
series.forEach((single, i) => {
const val = props.series[i][dataPointIndex] || (typeof series[i].data[dataPointIndex] !== 'object' ? series[i].data[dataPointIndex] : props.series[i][dataPointIndex]);
const label = series[i].name;
const groupData = invertGroup ? {
left: `${hasTextLabel ? label : ''}${labelDivider}`,
right: `${valuePrefix}${val >= 1000 && isValueDivided ? `${val / 1000}k` : val}${valuePostfix}`
} : {
left: `${valuePrefix}${val >= 1000 && isValueDivided ? `${val / 1000}k` : val}${valuePostfix}`,
right: `${hasTextLabel ? label : ''}${labelDivider}`
}
const labelMarkup = `<span class="apexcharts-tooltip-text-y-label ${labelClasses} ${labelExtClasses}'>${groupData.left}</span>`;
seriesGroups += `<div class="apexcharts-tooltip-series-group flex! ${hasTextLabel ? 'o8wyu' : ''} order-${i + 1} ${seriesClasses} ${seriesExtClasses}'>
<span class="flex items-center">
<span class="apexcharts-tooltip-marker ${markerClasses} ${markerExtClasses}' style="background: ${colors[i]}'></span>
<div class="apexcharts-tooltip-text">
<div class="apexcharts-tooltip-y-group d5s98">
<span class="apexcharts-tooltip-text-y-value ${valueClasses} ${valueExtClasses}'>${groupData.right}</span>
</div>
</div>
</span>
${labelMarkup}
</div>`
});
return `<div class="${mode === 'dark' ? 'dark ' : ''}${wrapperClasses} ${wrapperExtClasses}'>
<div class="apexcharts-tooltip-title ${titleClasses} ${titleExtClasses}'>${title}</div>
${seriesGroups}
</div>`;
}
function buildTooltipCompareTwo(props, options) {
const { dataPointIndex } = props;
const { categories } = props.ctx.opts.xaxis;
const { colors } = props.ctx.opts;
const series = props.ctx.opts.series;
const {
title,
mode,
valuePrefix = '$',
isValueDivided = true,
valuePostfix = '',
hasCategory = true,
hasTextLabel = false,
labelDivider = '',
wrapperClasses = 'r8vr5 madsw zxv30 k9mkq yxawv ejo46 wavyl qdmo7 dark:bg-neutral-800 dark:border-neutral-700',
wrapperExtClasses = '',
seriesClasses = 'o8wyu xp67g on128',
seriesExtClasses = '',
titleClasses = 'flex saet7 hysdx txx5h lb789 mdim3 ejo46 jnjrn dark:bg-neutral-800! dark:border-neutral-700! dark:text-neutral-200',
titleExtClasses = '',
markerClasses = 'odtso fg08f zmydb',
markerExtClasses = 'hgwpu',
valueClasses = 'tnvde z0e83 ms-auto! dark:text-neutral-400',
valueExtClasses = '',
labelClasses = 'z0e83 dark:text-neutral-400 fxthc',
labelExtClasses = ''
} = options;
let seriesGroups = '';
const s0 = series[0].data[dataPointIndex];
const s1 = series[1].data[dataPointIndex];
const category = categories[dataPointIndex].split(' ');
const newCategory = hasCategory ? `${category[0]}${category[1] ? ' ' : ''}${category[1] ? category[1].slice(0, 3) : ''}` : '';
const isGrowing = s0 > s1;
const isDifferenceIsNull = s0 / s1 === 1;
const difference = isDifferenceIsNull ? 0 : (s0 / s1) * 100;
const icon = isGrowing
? `<svg class="inline-block szmrd nf6rv" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></svg>`
: `<svg class="inline-block szmrd nf6rv" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 17 13.5 8.5 8.5 13.5 2 7" /><polyline points="16 17 22 17 22 11" /></svg>`;
series.forEach((_, i) => {
const val = props.series[i][dataPointIndex] || (typeof series[i].data[dataPointIndex] !== 'object' ? series[i].data[dataPointIndex] : props.series[i][dataPointIndex]);
const label = series[i].name;
const altValue = series[i].altValue || null;
const labelMarkup = `<span class="apexcharts-tooltip-text-y-label ${labelClasses} ${labelExtClasses}'>${newCategory} ${label || ''}</span>`;
const valueMarkup = altValue || `<span class="apexcharts-tooltip-text-y-value ${valueClasses} ${valueExtClasses}'>${valuePrefix}${val >= 1000 && isValueDivided ? `${val / 1000}k` : val}${valuePostfix}${labelDivider}</span>`;
seriesGroups += `<div class="apexcharts-tooltip-series-group ${seriesClasses} flex! order-${i + 1} ${seriesExtClasses}'>
<span class="flex items-center">
<span class="apexcharts-tooltip-marker ${markerClasses} ${markerExtClasses}' style="background: ${colors[i]}'></span>
<div class="apexcharts-tooltip-text">
<div class="apexcharts-tooltip-y-group d5s98">
${valueMarkup}
</div>
</div>
</span>
${hasTextLabel ? labelMarkup : ''}
</div>`
});
return `<div class="${mode === 'dark' ? 'dark ' : ''}${wrapperClasses} ${wrapperExtClasses}'>
<div class="apexcharts-tooltip-title ${titleClasses} ${titleExtClasses}'>
<span>${title}</span>
<span class="flex items-center r2jif ${!isDifferenceIsNull ? (isGrowing ? 'zwetb' : 'h101d') : ''} fxthc">
${!isDifferenceIsNull ? icon : ''}
<span class="inline-block tuuss">
${difference.toFixed(1)}%
</span>
</span>
</div>
${seriesGroups}
</div>`;
}
function buildTooltipCompareTwoAlt(props, options) {
const { dataPointIndex } = props;
const { categories } = props.ctx.opts.xaxis;
const { colors } = props.ctx.opts;
const series = props.ctx.opts.series;
const {
title,
mode,
valuePrefix = '$',
isValueDivided = true,
valuePostfix = '',
hasCategory = true,
hasTextLabel = false,
labelDivider = '',
wrapperClasses = 'r8vr5 madsw zxv30 k9mkq yxawv ejo46 wavyl qdmo7 dark:bg-neutral-800 dark:border-neutral-700',
wrapperExtClasses = '',
seriesClasses = 'o8wyu xp67g on128',
seriesExtClasses = '',
titleClasses = 'flex saet7 hysdx txx5h lb789 mdim3 ejo46 jnjrn dark:bg-neutral-800! dark:border-neutral-700! dark:text-neutral-200',
titleExtClasses = '',
markerClasses = 'odtso fg08f zmydb',
markerExtClasses = 'hgwpu',
valueClasses = 'tnvde z0e83 ms-auto! dark:text-neutral-400',
valueExtClasses = '',
labelClasses = 'z0e83 dark:text-neutral-400 fxthc',
labelExtClasses = ''
} = options;
let seriesGroups = '';
const s0 = series[0].data[dataPointIndex];
const s1 = series[1].data[dataPointIndex];
const category = categories[dataPointIndex].split(' ');
const newCategory = hasCategory ? `${category[0]}${category[1] ? ' ' : ''}${category[1] ? category[1].slice(0, 3) : ''}` : '';
const isGrowing = s0 > s1;
const isDifferenceIsNull = s0 / s1 === 1;
const difference = isDifferenceIsNull ? 0 : (s0 / s1) * 100;
const icon = isGrowing
? `<svg class="inline-block szmrd nf6rv" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></svg>`
: `<svg class="inline-block szmrd nf6rv" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 17 13.5 8.5 8.5 13.5 2 7" /><polyline points="16 17 22 17 22 11" /></svg>`;
series.forEach((single, i) => {
const val = props.series[i][dataPointIndex] || (typeof series[i].data[dataPointIndex] !== 'object' ? series[i].data[dataPointIndex] : props.series[i][dataPointIndex]);
const label = series[i].name;
const labelMarkup = `<span class="apexcharts-tooltip-text-y-label ${labelClasses} ${labelExtClasses}'>${valuePrefix}${val >= 1000 && isValueDivided ? `${val / 1000}k` : val}${valuePostfix}</span>`;
seriesGroups += `<div class="apexcharts-tooltip-series-group flex! ${seriesClasses} order-${i + 1} ${seriesExtClasses}'>
<span class="flex items-center">
<span class="apexcharts-tooltip-marker ${markerClasses} ${markerExtClasses}' style="background: ${colors[i]}'></span>
<div class="apexcharts-tooltip-text on128">
<div class="apexcharts-tooltip-y-group d5s98">
<span class="apexcharts-tooltip-text-y-value ${valueClasses} ${valueExtClasses}'>${newCategory} ${label || ''}${labelDivider}</span>
</div>
</div>
</span>
${hasTextLabel ? labelMarkup : ''}
</div>`
});
return `<div class="${mode === 'dark' ? 'dark ' : ''}${wrapperClasses} ${wrapperExtClasses}'>
<div class="apexcharts-tooltip-title ${titleClasses} ${titleExtClasses}'>
<span>${title}</span>
<span class="flex items-center r2jif ${!isDifferenceIsNull ? (isGrowing ? 'zwetb' : 'h101d') : ''} fxthc">
${!isDifferenceIsNull ? icon : ''}
<span class="inline-block tuuss">
${difference.toFixed(1)}%
</span>
</span>
</div>
${seriesGroups}
</div>`;
}
function buildTooltipForDonut({ series, seriesIndex, w }, textColor) {
const { globals } = w;
const { colors } = globals;
return `<div class="apexcharts-tooltip-series-group" style="background-color: ${colors[seriesIndex]}; display: block;">
<div class="apexcharts-tooltip-text" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;">
<div class="apexcharts-tooltip-y-group" style="color: ${textColor[seriesIndex]}'>
<span class="apexcharts-tooltip-text-y-label">${globals.labels[seriesIndex]}: </span>
<span class="apexcharts-tooltip-text-y-value">${series[seriesIndex]}</span>
</div>
</div>
</div>`;
}
function buildChart(id, shared, light, dark) {
const $chart = document.querySelector(id);
let chart = null;
if (!$chart) return false;
const tabpanel = $chart.closest('[role="tabpanel"]');
let modeFromBodyClass = null;
Array.from(document.querySelector('html').classList).forEach((cl) => {
if (['dark', 'light', 'default'].includes(cl)) modeFromBodyClass = cl;
});
const optionsFn = (mode = modeFromBodyClass || localStorage.getItem('hs_theme')) => _.merge(shared(mode), mode === 'dark' ? dark : light);
if ($chart) {
chart = new ApexCharts($chart, optionsFn());
chart.render();
window.addEventListener('on-hs-appearance-change', (evt) => chart.updateOptions(optionsFn(evt.detail)));
if (tabpanel) tabpanel.addEventListener('on-hs-appearance-change', (evt) => chart.updateOptions(optionsFn(evt.detail)));
}
return chart;
}
</script>
<script>
window.addEventListener('load', () => {
(function () {
const updateForegroundChart = (foregroundParent, foreground, values) => {
const from = (100 * values[0]) / 1000;
const to = (100 * values[1]) / 1000;
const width = (100 - (from + (100 - to)));
foregroundParent.style.left = `${from}%`;
foregroundParent.style.width = `${width}%`;
foreground.style.width = `${foregroundParent.parentElement.clientWidth}px`;
foreground.style.marginLeft = `${-((foregroundParent.parentElement.clientWidth / 100) * from)}px`;
};
const range = document.querySelector('#hs-pro-pytfrrch');
const rangeInstance = new HSRangeSlider(range);
const min = document.querySelector('#hs-pro-pytfrrch-vtit-min');
const max = document.querySelector('#hs-pro-pytfrrch-vtit-max');
const background = document.querySelector('#hs-pro-pytfrrch-bg');
const foreground = document.querySelector('#hs-pro-pytfrrch-fg');
const foregroundParent = foreground.parentElement;
buildChart('#hs-pro-pytfrrch-bg', (mode) => ({
series: [{
name: 'Transactions',
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 18, 20, 35, 25, 25, 48, 40, 30, 30, 35, 45, 48, 48, 30, 40, 35, 25, 48, 48, 30, 40, 35, 25, 25, 8, 10, 15, 10]
}],
chart: {
height: 50,
type: 'bar',
sparkline: {
enabled: true
}
},
xaxis: {
type: 'category',
crosshairs: {
show: false
}
},
states: {
hover: {
filter: {
type: 'none'
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'none'
}
}
},
tooltip: {
enabled: false
},
}), {
colors: ['#f3f4f6'],
plotOptions: {
bar: {
colors: {
ranges: [{
from: -45,
to: 0,
color: '#e5e7eb'
}]
}
}
},
grid: {
borderColor: '#e5e7eb'
}
}, {
colors: ['#ffffff'],
plotOptions: {
bar: {
colors: {
ranges: [{
from: -45,
to: 0,
color: '#ffffff'
}]
}
}
},
grid: {
borderColor: '#404040'
}
});
buildChart('#hs-pro-pytfrrch-fg', (mode) => ({
series: [{
name: 'Transactions',
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 18, 20, 35, 25, 25, 48, 40, 30, 30, 35, 45, 48, 48, 30, 40, 35, 25, 48, 48, 30, 40, 35, 25, 25, 8, 10, 15, 10]
}],
chart: {
height: 50,
type: 'bar',
sparkline: {
enabled: true
}
},
xaxis: {
type: 'category',
crosshairs: {
show: false
}
},
states: {
hover: {
filter: {
type: 'none'
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'none'
}
}
},
tooltip: {
enabled: false
},
}), {
colors: ['#9333ea'],
plotOptions: {
bar: {
colors: {
ranges: [{
from: -45,
to: 0,
color: '#e5e7eb'
}]
}
}
},
grid: {
borderColor: '#e5e7eb'
}
}, {
colors: ['#a855f7'],
plotOptions: {
bar: {
colors: {
ranges: [{
from: -45,
to: 0,
color: '#ffffff'
}]
}
}
},
grid: {
borderColor: '#404040'
}
});
range.noUiSlider.on('update', (values) => {
min.value = rangeInstance.formattedValue[0];
max.value = rangeInstance.formattedValue[1];
updateForegroundChart(foregroundParent, foreground, values);
});
min.addEventListener('input', _.debounce((evt) => rangeInstance.el.noUiSlider.set([evt.target.value, max.value]), 200));
max.addEventListener('input', _.debounce((evt) => rangeInstance.el.noUiSlider.set([min.value, evt.target.value]), 200));
window.addEventListener("vxlyd", () => updateForegroundChart(foregroundParent, foreground, range.noUiSlider.get()));
// Please add it for the popup to work correctly.
const popup = HSOverlay.getInstance('#hs-pro-pytfm', true);
if (popup) popup.element.on('open', () => updateForegroundChart(foregroundParent, foreground, range.noUiSlider.get()));
})();
});
</script>