Filter Forms
Explore Filter Forms to provide users with structured fields for refining search results or data views effectively.
<!-- Card -->
<div class="oo8ro wfm4e d77gl hx4gm lile3 dark:bg-neutral-800 dark:border-neutral-700">
<!-- Header -->
<div class="gxlt6 blhyt flex uip67 items-center ic6aj d77gl dark:border-neutral-700">
<h3 class="vo20k bp13m dark:text-neutral-200">
Filters
</h3>
</div>
<!-- End Header -->
<div class="xlz15 gt1z6">
<!-- Item -->
<div class="v3e4j jzuu1 w4ry8">
<label class="block iqt6z vo20k bp13m dark:text-neutral-200">Price range</label>
<div class="relative">
<div id="hs-pro-pytfrrch-bg"></div>
<div class="absolute ofq05 uv2uj i65bn qpmwn overflow-hidden">
<div id="hs-pro-pytfrrch-fg"></div>
</div>
</div>
<!-- Chart -->
<div id="hs-pro-pytfrrch" class="qc7lo --prevent-on-load-init" data-hs-range-slider='{
"start": [0, 1000],
"range": {
"min": 0,
"max": 1000
},
"connect": true,
"formatter": "integer",
"cssClasses": {
"target": "relative s0pmm oq0dt agawe dark:bg-neutral-700",
"base": "i65bn qpmwn relative nh4wd",
"origin": "absolute ofq05 fug6q i65bn qpmwn gyhnt oq0dt",
"handle": "absolute wgue8 fug6q cd3tu ezw10 oo8ro wfm4e d77gl oq0dt rkof5 cursor-pointer eqyip -translate-y-2/4 dark:bg-neutral-800 dark:border-neutral-700",
"connects": "relative nxi5b i65bn qpmwn oq0dt overflow-hidden",
"connect": "absolute ofq05 fug6q nh4wd i65bn qpmwn fs9eh gyhnt",
"touchArea": "absolute -top-1 -bottom-1 -start-1 -end-1"
}
}'>
</div>
<!-- End Chart -->
<!-- Input Group -->
<div class="lmi6b flex uip67 aygsi">
<!-- Input -->
<div class="lj7mp">
<label for="hs-pro-pytfrrch-vtit-min" class="block hypkf t5ziw t6rrs dark:text-neutral-500">
Min
</label>
<input id="hs-pro-pytfrrch-vtit-min" type="at7fl" class="i7oig i4c53 apc69 block zz68c lj7mp d77gl lile3 psfwb uh9ou pr49v wyzq2 lhoun c5ddu m61eo jlv63 n6rrn 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="lj7mp">
<label for="hs-pro-pytfrrch-vtit-max" class="block hypkf t5ziw t6rrs dark:text-neutral-500">
Max
</label>
<input id="hs-pro-pytfrrch-vtit-max" type="at7fl" class="i7oig i4c53 apc69 block zz68c lj7mp d77gl lile3 psfwb uh9ou pr49v wyzq2 lhoun c5ddu m61eo jlv63 n6rrn 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="v3e4j jzuu1 w4ry8">
<label class="block ej64t vo20k bp13m dark:text-neutral-200">
Date
</label>
<!-- Input Group -->
<div class="dmfqa hdv6z aygsi">
<!-- Calendar Dropdown -->
<div class="hs-dropdown [--auto-close:inside] i65bn inline-flex">
<button id="hs-pro-pytfmsd" type="button" class="o1ncb apc69 i65bn inline-flex items-center lile3 t5ziw wfm4e d77gl oo8ro bp13m uh9ou pr49v wyzq2 lhoun disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden c5ddu m61eo 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="hq6gx epucs stqz8" 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="hq6gx ms-auto ibvs1" 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 v4b5n transition-[opacity,margin] duration opacity-0 hidden ucmtr oo8ro lile3 rrmkk dark:bg-neutral-900" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-pytfmsd">
<!-- Calendar -->
<div class="yyez4 space-y-0.5">
<!-- Months -->
<div class="dmfqa mqtol items-center vmt4s mzxha nfrzv">
<!-- Prev Button -->
<div class="i63zv">
<button type="button" class="aukwz flex r00n9 items-center bp13m ksr3h oq0dt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden kf4z7 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" aria-label="Previous">
<svg class="hq6gx ibvs1" 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="nvgw2 flex r00n9 items-center pgjbi">
<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 dslo6 i65bn cursor-pointer qgy40 vo20k bp13m anu64 focus:outline-hidden mke34 before:absolute before:inset-0 before:z-1 dark:text-neutral-200 dark:hover:text-purple-500 dark:focus:text-purple-500",
"dropdownClasses": "ls9te ucmtr qzvcy yj8ha ju7it space-y-0.5 oo8ro wfm4e d77gl ps5iq rkof5 overflow-hidden overflow-y-auto n4ec4 xlk9f rzoxf xcbgk dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900 dark:border-neutral-700",
"optionClasses": "n33uu i65bn t5ziw bp13m cursor-pointer ksr3h ps5iq focus:outline-hidden kf4z7 dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:text-neutral-200 dark:focus:bg-neutral-800",
"optionTemplate": "<div class=\"flex uip67 items-center i65bn \"><span data-title></span><span class=\"hidden hs-selected:block \"><svg class=\"hq6gx stqz8 bp13m 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="bp13m 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 dslo6 i65bn cursor-pointer qgy40 vo20k bp13m anu64 focus:outline-hidden mke34 before:absolute before:inset-0 before:z-1 dark:text-neutral-200 dark:hover:text-purple-500 dark:focus:text-purple-500",
"dropdownClasses": "ls9te ucmtr vl7eg yj8ha ju7it space-y-0.5 oo8ro wfm4e d77gl ps5iq rkof5 overflow-hidden overflow-y-auto n4ec4 xlk9f rzoxf xcbgk dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900 dark:border-neutral-700",
"optionClasses": "n33uu i65bn t5ziw bp13m cursor-pointer ksr3h ps5iq focus:outline-hidden kf4z7 dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:text-neutral-200 dark:focus:bg-neutral-800",
"optionTemplate": "<div class=\"flex uip67 items-center i65bn \"><span data-title></span><span class=\"hidden hs-selected:block \"><svg class=\"hq6gx stqz8 bp13m 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="i63zv flex c9j8j">
<button type="button" class=" aukwz flex r00n9 items-center bp13m ksr3h oq0dt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden kf4z7 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" aria-label="Next">
<svg class="hq6gx ibvs1" 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 yh9al">
<span class="p6abj p8o62 block lj7mp t5ziw t6rrs dark:text-neutral-500">
Mo
</span>
<span class="p6abj p8o62 block lj7mp t5ziw t6rrs dark:text-neutral-500">
Tu
</span>
<span class="p6abj p8o62 block lj7mp t5ziw t6rrs dark:text-neutral-500">
We
</span>
<span class="p6abj p8o62 block lj7mp t5ziw t6rrs dark:text-neutral-500">
Th
</span>
<span class="p6abj p8o62 block lj7mp t5ziw t6rrs dark:text-neutral-500">
Fr
</span>
<span class="p6abj p8o62 block lj7mp t5ziw t6rrs dark:text-neutral-500">
Sa
</span>
<span class="p6abj p8o62 block lj7mp t5ziw t6rrs dark:text-neutral-500">
Su
</span>
</div>
<!-- Weeks -->
<!-- Days -->
<div class="flex">
<div>
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200" disabled>
26
</button>
</div>
<div>
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200" disabled>
27
</button>
</div>
<div>
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200" disabled>
28
</button>
</div>
<div>
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200" disabled>
29
</button>
</div>
<div>
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200" disabled>
30
</button>
</div>
<div>
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200">
1
</button>
</div>
<div>
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200">
2
</button>
</div>
</div>
<!-- Days -->
<!-- Days -->
<div class="flex">
<div>
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200">
3
</button>
</div>
<div>
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200">
4
</button>
</div>
<div >
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200">
5
</button>
</div>
<div >
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200">
6
</button>
</div>
<div >
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200">
7
</button>
</div>
<div >
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200">
8
</button>
</div>
<div >
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200">
9
</button>
</div>
</div>
<!-- Days -->
<!-- Days -->
<div class="flex">
<div >
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200">
10
</button>
</div>
<div >
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200">
11
</button>
</div>
<div >
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200">
12
</button>
</div>
<div>
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200">
13
</button>
</div>
<div>
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200">
14
</button>
</div>
<div>
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200">
15
</button>
</div>
<div>
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200">
16
</button>
</div>
</div>
<!-- Days -->
<!-- Days -->
<div class="flex">
<div>
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200">
17
</button>
</div>
<div>
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200">
18
</button>
</div>
<div>
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200">
19
</button>
</div>
<div>
<button type="button" class="p6abj qil8e flex r00n9 items-center eh7vh wfm4e qb17b t5ziw vo20k zr4l6 obc2t oq0dt dark:bg-purple-500 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden kf4z7 dark:hover:border-neutral-700">
20
</button>
</div>
<div>
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200">
21
</button>
</div>
<div>
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200">
22
</button>
</div>
<div>
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200">
23
</button>
</div>
</div>
<!-- Days -->
<!-- Days -->
<div class="flex">
<div>
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200">
24
</button>
</div>
<div >
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200">
25
</button>
</div>
<div >
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200">
26
</button>
</div>
<div >
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200">
27
</button>
</div>
<div >
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200">
28
</button>
</div>
<div >
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200">
29
</button>
</div>
<div >
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200">
30
</button>
</div>
</div>
<!-- Days -->
<!-- Days -->
<div class="flex">
<div >
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200">
31
</button>
</div>
<div >
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m obc2t anu64 oq0dt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden kf4z7 dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled>
1
</button>
</div>
<div>
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m obc2t anu64 oq0dt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden kf4z7 dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled>
2
</button>
</div>
<div>
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m obc2t anu64 oq0dt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden kf4z7 dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled>
3
</button>
</div>
<div>
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m obc2t anu64 oq0dt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden kf4z7 dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled>
4
</button>
</div>
<div>
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m obc2t anu64 oq0dt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden kf4z7 dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled>
5
</button>
</div>
<div>
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m obc2t anu64 oq0dt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden kf4z7 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] i65bn inline-flex">
<button id="hs-pro-pytfmed" type="button" class="o1ncb apc69 i65bn inline-flex items-center lile3 t5ziw wfm4e d77gl oo8ro bp13m uh9ou pr49v wyzq2 lhoun disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden c5ddu m61eo 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="hq6gx epucs stqz8" 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="hq6gx ms-auto ibvs1" 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 v4b5n transition-[opacity,margin] duration opacity-0 hidden ucmtr oo8ro lile3 rrmkk dark:bg-neutral-900" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-pytfmed">
<!-- Calendar -->
<div class="yyez4 space-y-0.5">
<!-- Months -->
<div class="dmfqa mqtol items-center vmt4s mzxha nfrzv">
<!-- Prev Button -->
<div class="i63zv">
<button type="button" class="aukwz flex r00n9 items-center bp13m ksr3h oq0dt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden kf4z7 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" aria-label="Previous">
<svg class="hq6gx ibvs1" 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="nvgw2 flex r00n9 items-center pgjbi">
<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 dslo6 i65bn cursor-pointer qgy40 vo20k bp13m anu64 focus:outline-hidden mke34 before:absolute before:inset-0 before:z-1 dark:text-neutral-200 dark:hover:text-purple-500 dark:focus:text-purple-500",
"dropdownClasses": "ls9te ucmtr qzvcy yj8ha ju7it space-y-0.5 oo8ro wfm4e d77gl ps5iq rkof5 overflow-hidden overflow-y-auto n4ec4 xlk9f rzoxf xcbgk dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900 dark:border-neutral-700",
"optionClasses": "n33uu i65bn t5ziw bp13m cursor-pointer ksr3h ps5iq focus:outline-hidden kf4z7 dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:text-neutral-200 dark:focus:bg-neutral-800",
"optionTemplate": "<div class=\"flex uip67 items-center i65bn \"><span data-title></span><span class=\"hidden hs-selected:block \"><svg class=\"hq6gx stqz8 bp13m 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="bp13m 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 dslo6 i65bn cursor-pointer qgy40 vo20k bp13m anu64 focus:outline-hidden mke34 before:absolute before:inset-0 before:z-1 dark:text-neutral-200 dark:hover:text-purple-500 dark:focus:text-purple-500",
"dropdownClasses": "ls9te ucmtr vl7eg yj8ha ju7it space-y-0.5 oo8ro wfm4e d77gl ps5iq rkof5 overflow-hidden overflow-y-auto n4ec4 xlk9f rzoxf xcbgk dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900 dark:border-neutral-700",
"optionClasses": "n33uu i65bn t5ziw bp13m cursor-pointer ksr3h ps5iq focus:outline-hidden kf4z7 dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:text-neutral-200 dark:focus:bg-neutral-800",
"optionTemplate": "<div class=\"flex uip67 items-center i65bn \"><span data-title></span><span class=\"hidden hs-selected:block \"><svg class=\"hq6gx stqz8 bp13m 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="i63zv flex c9j8j">
<button type="button" class=" aukwz flex r00n9 items-center bp13m ksr3h oq0dt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden kf4z7 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" aria-label="Next">
<svg class="hq6gx ibvs1" 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 yh9al">
<span class="p6abj p8o62 block lj7mp t5ziw t6rrs dark:text-neutral-500">
Mo
</span>
<span class="p6abj p8o62 block lj7mp t5ziw t6rrs dark:text-neutral-500">
Tu
</span>
<span class="p6abj p8o62 block lj7mp t5ziw t6rrs dark:text-neutral-500">
We
</span>
<span class="p6abj p8o62 block lj7mp t5ziw t6rrs dark:text-neutral-500">
Th
</span>
<span class="p6abj p8o62 block lj7mp t5ziw t6rrs dark:text-neutral-500">
Fr
</span>
<span class="p6abj p8o62 block lj7mp t5ziw t6rrs dark:text-neutral-500">
Sa
</span>
<span class="p6abj p8o62 block lj7mp t5ziw t6rrs dark:text-neutral-500">
Su
</span>
</div>
<!-- Weeks -->
<!-- Days -->
<div class="flex">
<div>
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200" disabled>
26
</button>
</div>
<div>
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200" disabled>
27
</button>
</div>
<div>
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200" disabled>
28
</button>
</div>
<div>
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200" disabled>
29
</button>
</div>
<div>
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200" disabled>
30
</button>
</div>
<div>
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200">
1
</button>
</div>
<div>
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200">
2
</button>
</div>
</div>
<!-- Days -->
<!-- Days -->
<div class="flex">
<div>
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200">
3
</button>
</div>
<div>
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200">
4
</button>
</div>
<div >
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200">
5
</button>
</div>
<div >
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200">
6
</button>
</div>
<div >
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200">
7
</button>
</div>
<div >
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200">
8
</button>
</div>
<div >
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200">
9
</button>
</div>
</div>
<!-- Days -->
<!-- Days -->
<div class="flex">
<div >
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200">
10
</button>
</div>
<div >
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200">
11
</button>
</div>
<div >
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200">
12
</button>
</div>
<div>
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200">
13
</button>
</div>
<div>
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200">
14
</button>
</div>
<div>
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200">
15
</button>
</div>
<div>
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200">
16
</button>
</div>
</div>
<!-- Days -->
<!-- Days -->
<div class="flex">
<div>
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200">
17
</button>
</div>
<div>
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200">
18
</button>
</div>
<div>
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200">
19
</button>
</div>
<div>
<button type="button" class="p6abj qil8e flex r00n9 items-center eh7vh wfm4e qb17b t5ziw vo20k zr4l6 obc2t oq0dt dark:bg-purple-500 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden kf4z7 dark:hover:border-neutral-700">
20
</button>
</div>
<div>
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200">
21
</button>
</div>
<div>
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200">
22
</button>
</div>
<div>
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200">
23
</button>
</div>
</div>
<!-- Days -->
<!-- Days -->
<div class="flex">
<div>
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200">
24
</button>
</div>
<div >
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200">
25
</button>
</div>
<div >
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200">
26
</button>
</div>
<div >
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200">
27
</button>
</div>
<div >
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200">
28
</button>
</div>
<div >
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200">
29
</button>
</div>
<div >
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200">
30
</button>
</div>
</div>
<!-- Days -->
<!-- Days -->
<div class="flex">
<div >
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m oq0dt obc2t anu64 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fnumz mke34 dark:text-neutral-200">
31
</button>
</div>
<div >
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m obc2t anu64 oq0dt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden kf4z7 dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled>
1
</button>
</div>
<div>
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m obc2t anu64 oq0dt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden kf4z7 dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled>
2
</button>
</div>
<div>
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m obc2t anu64 oq0dt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden kf4z7 dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled>
3
</button>
</div>
<div>
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m obc2t anu64 oq0dt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden kf4z7 dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled>
4
</button>
</div>
<div>
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m obc2t anu64 oq0dt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden kf4z7 dark:text-neutral-200 dark:hover:border-neutral-500 dark:focus:bg-neutral-700" disabled>
5
</button>
</div>
<div>
<button type="button" class="p6abj qil8e flex r00n9 items-center wfm4e qb17b t5ziw bp13m obc2t anu64 oq0dt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden kf4z7 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="ymk3i flex flex-wrap h1dxu">
<!-- Checkbox -->
<label for="hs-pro-pytfmdp-lm" class="i7oig rfnst relative flex r00n9 items-center lj7mp e9qjd oo8ro wfm4e d77gl uh9ou pr49v bp13m cursor-pointer lile3 obc2t kzyfl dark:bg-neutral-800 dark:text-neutral-200 dark:border-neutral-700 dark:hover:ring-neutral-600 dark:hover:ring-neutral-600
lxzgy ppidl q0wsx mgin6
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 hq6gx r00n9 items-center fx67t fs9eh pnlhs oq0dt g0ipl vtbde peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-white">
<svg class="hq6gx ui2kz" 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="i7oig rfnst relative flex r00n9 items-center lj7mp e9qjd oo8ro wfm4e d77gl uh9ou pr49v bp13m cursor-pointer lile3 obc2t kzyfl dark:bg-neutral-800 dark:text-neutral-200 dark:border-neutral-700 dark:hover:ring-neutral-600 dark:hover:ring-neutral-600
lxzgy ppidl q0wsx mgin6
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 hq6gx r00n9 items-center fx67t fs9eh pnlhs oq0dt g0ipl vtbde peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-white">
<svg class="hq6gx ui2kz" 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="i7oig rfnst relative flex r00n9 items-center lj7mp e9qjd oo8ro wfm4e d77gl uh9ou pr49v bp13m cursor-pointer lile3 obc2t kzyfl dark:bg-neutral-800 dark:text-neutral-200 dark:border-neutral-700 dark:hover:ring-neutral-600 dark:hover:ring-neutral-600
lxzgy ppidl q0wsx mgin6
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 hq6gx r00n9 items-center fx67t fs9eh pnlhs oq0dt g0ipl vtbde peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-white">
<svg class="hq6gx ui2kz" 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="v3e4j jzuu1 w4ry8">
<label class="block ej64t vo20k bp13m dark:text-neutral-200">
Balances
</label>
<!-- Button Group -->
<div class="dmfqa mmjp9 n5y6f d40ox h1dxu jmqtp">
<!-- Checkbox -->
<label for="hs-pro-pytfmusd" class="yyez4 flex items-center vmt4s t5ziw oo8ro wfm4e d77gl bp13m uh9ou pr49v cursor-pointer lile3 obc2t kzyfl dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200 dark:hover:ring-neutral-600 dark:hover:ring-neutral-600">
<img class="hq6gx exlm9 aukwz oq0dt" src="../../assets/vendor/svg-country-flags/png250px/us.png" alt="Avatar">
<span class="e3fpz">
<span class="block">
USD
</span>
</span>
<input type="checkbox" id="hs-pro-pytfmusd" class="hq6gx ca09w d77gl oq0dt rkwi0 checked:border-purple-600 rdxom 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="yyez4 flex items-center vmt4s t5ziw oo8ro wfm4e d77gl bp13m uh9ou pr49v cursor-pointer lile3 obc2t kzyfl dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200 dark:hover:ring-neutral-600 dark:hover:ring-neutral-600">
<img class="hq6gx exlm9 aukwz oq0dt" src="../../assets/vendor/svg-country-flags/png250px/gb.png" alt="Avatar">
<span class="e3fpz">
<span class="block">
GBP
</span>
</span>
<input type="checkbox" id="hs-pro-pytfmgb" class="hq6gx ca09w d77gl oq0dt rkwi0 checked:border-purple-600 rdxom 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="yyez4 flex items-center vmt4s t5ziw oo8ro wfm4e d77gl bp13m uh9ou pr49v cursor-pointer lile3 obc2t kzyfl dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200 dark:hover:ring-neutral-600 dark:hover:ring-neutral-600">
<img class="hq6gx exlm9 aukwz oq0dt" src="../../assets/vendor/svg-country-flags/png250px/eu.png" alt="Avatar">
<span class="e3fpz">
<span class="block">
EURO
</span>
</span>
<input type="checkbox" id="hs-pro-pytfmeuro" class="hq6gx ca09w d77gl oq0dt rkwi0 checked:border-purple-600 rdxom 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="v3e4j jzuu1 w4ry8">
<label class="block ej64t vo20k bp13m dark:text-neutral-200">
Type
</label>
<!-- Button Group -->
<div class="flex flex-wrap h1dxu">
<!-- Checkbox -->
<label for="hs-pro-pytfmty-1" class="i7oig rfnst relative flex r00n9 items-center lj7mp e9qjd oo8ro wfm4e d77gl uh9ou pr49v bp13m cursor-pointer lile3 obc2t kzyfl dark:bg-neutral-800 dark:text-neutral-200 dark:border-neutral-700 dark:hover:ring-neutral-600 dark:hover:ring-neutral-600
lxzgy ppidl q0wsx mgin6
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 hq6gx r00n9 items-center fx67t fs9eh pnlhs oq0dt g0ipl vtbde peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-white">
<svg class="hq6gx ui2kz" 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="i7oig rfnst relative flex r00n9 items-center lj7mp e9qjd oo8ro wfm4e d77gl uh9ou pr49v bp13m cursor-pointer lile3 obc2t kzyfl dark:bg-neutral-800 dark:text-neutral-200 dark:border-neutral-700 dark:hover:ring-neutral-600 dark:hover:ring-neutral-600
lxzgy ppidl q0wsx mgin6
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 hq6gx r00n9 items-center fx67t fs9eh pnlhs oq0dt g0ipl vtbde peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-white">
<svg class="hq6gx ui2kz" 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="i7oig rfnst relative flex r00n9 items-center lj7mp e9qjd oo8ro wfm4e d77gl uh9ou pr49v bp13m cursor-pointer lile3 obc2t kzyfl dark:bg-neutral-800 dark:text-neutral-200 dark:border-neutral-700 dark:hover:ring-neutral-600 dark:hover:ring-neutral-600
lxzgy ppidl q0wsx mgin6
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 hq6gx r00n9 items-center fx67t fs9eh pnlhs oq0dt g0ipl vtbde peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-white">
<svg class="hq6gx ui2kz" 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="i7oig rfnst relative flex r00n9 items-center lj7mp e9qjd oo8ro wfm4e d77gl uh9ou pr49v bp13m cursor-pointer lile3 obc2t kzyfl dark:bg-neutral-800 dark:text-neutral-200 dark:border-neutral-700 dark:hover:ring-neutral-600 dark:hover:ring-neutral-600
lxzgy ppidl q0wsx mgin6
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 hq6gx r00n9 items-center fx67t fs9eh pnlhs oq0dt g0ipl vtbde peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-white">
<svg class="hq6gx ui2kz" 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="i7oig rfnst relative flex r00n9 items-center lj7mp e9qjd oo8ro wfm4e d77gl uh9ou pr49v bp13m cursor-pointer lile3 obc2t kzyfl dark:bg-neutral-800 dark:text-neutral-200 dark:border-neutral-700 dark:hover:ring-neutral-600 dark:hover:ring-neutral-600
lxzgy ppidl q0wsx mgin6
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 hq6gx r00n9 items-center fx67t fs9eh pnlhs oq0dt g0ipl vtbde peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-white">
<svg class="hq6gx ui2kz" 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="i7oig rfnst relative flex r00n9 items-center lj7mp e9qjd oo8ro wfm4e d77gl uh9ou pr49v bp13m cursor-pointer lile3 obc2t kzyfl dark:bg-neutral-800 dark:text-neutral-200 dark:border-neutral-700 dark:hover:ring-neutral-600 dark:hover:ring-neutral-600
lxzgy ppidl q0wsx mgin6
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 hq6gx r00n9 items-center fx67t fs9eh pnlhs oq0dt g0ipl vtbde peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-white">
<svg class="hq6gx ui2kz" 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="i7oig rfnst relative flex r00n9 items-center lj7mp e9qjd oo8ro wfm4e d77gl uh9ou pr49v bp13m cursor-pointer lile3 obc2t kzyfl dark:bg-neutral-800 dark:text-neutral-200 dark:border-neutral-700 dark:hover:ring-neutral-600 dark:hover:ring-neutral-600
lxzgy ppidl q0wsx mgin6
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 hq6gx r00n9 items-center fx67t fs9eh pnlhs oq0dt g0ipl vtbde peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-white">
<svg class="hq6gx ui2kz" 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="i7oig rfnst relative flex r00n9 items-center lj7mp e9qjd oo8ro wfm4e d77gl uh9ou pr49v bp13m cursor-pointer lile3 obc2t kzyfl dark:bg-neutral-800 dark:text-neutral-200 dark:border-neutral-700 dark:hover:ring-neutral-600 dark:hover:ring-neutral-600
lxzgy ppidl q0wsx mgin6
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 hq6gx r00n9 items-center fx67t fs9eh pnlhs oq0dt g0ipl vtbde peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-white">
<svg class="hq6gx ui2kz" 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="i7oig rfnst relative flex r00n9 items-center lj7mp e9qjd oo8ro wfm4e d77gl uh9ou pr49v bp13m cursor-pointer lile3 obc2t kzyfl dark:bg-neutral-800 dark:text-neutral-200 dark:border-neutral-700 dark:hover:ring-neutral-600 dark:hover:ring-neutral-600
lxzgy ppidl q0wsx mgin6
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 hq6gx r00n9 items-center fx67t fs9eh pnlhs oq0dt g0ipl vtbde peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-white">
<svg class="hq6gx ui2kz" 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="i7oig rfnst relative flex r00n9 items-center lj7mp e9qjd oo8ro wfm4e d77gl uh9ou pr49v bp13m cursor-pointer lile3 obc2t kzyfl dark:bg-neutral-800 dark:text-neutral-200 dark:border-neutral-700 dark:hover:ring-neutral-600 dark:hover:ring-neutral-600
lxzgy ppidl q0wsx mgin6
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 hq6gx r00n9 items-center fx67t fs9eh pnlhs oq0dt g0ipl vtbde peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-white">
<svg class="hq6gx ui2kz" 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="v3e4j jzuu1 w4ry8">
<label class="block ej64t vo20k bp13m dark:text-neutral-200">
Status
</label>
<!-- Button Group -->
<div class="flex flex-wrap h1dxu">
<!-- Checkbox -->
<label for="hs-pro-pytfmst-completed" class="i7oig rfnst relative flex r00n9 items-center lj7mp e9qjd oo8ro wfm4e d77gl uh9ou pr49v bp13m cursor-pointer lile3 obc2t kzyfl dark:bg-neutral-800 dark:text-neutral-200 dark:border-neutral-700 dark:hover:ring-neutral-600 dark:hover:ring-neutral-600
lxzgy ppidl q0wsx mgin6
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 hq6gx r00n9 items-center fx67t fs9eh pnlhs oq0dt g0ipl vtbde peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-white">
<svg class="hq6gx ui2kz" 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="i7oig rfnst relative flex r00n9 items-center lj7mp e9qjd oo8ro wfm4e d77gl uh9ou pr49v bp13m cursor-pointer lile3 obc2t kzyfl dark:bg-neutral-800 dark:text-neutral-200 dark:border-neutral-700 dark:hover:ring-neutral-600 dark:hover:ring-neutral-600
lxzgy ppidl q0wsx mgin6
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 hq6gx r00n9 items-center fx67t fs9eh pnlhs oq0dt g0ipl vtbde peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-white">
<svg class="hq6gx ui2kz" 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="v3e4j jzuu1 w4ry8">
<label class="block ej64t vo20k bp13m dark:text-neutral-200">
Direction
</label>
<!-- Button Group -->
<div class="dmfqa mmjp9 n5y6f d40ox h1dxu jmqtp">
<!-- Checkbox -->
<label for="hs-pro-pytfmall" class="yyez4 flex items-center vmt4s t5ziw oo8ro wfm4e d77gl bp13m uh9ou pr49v cursor-pointer lile3 obc2t kzyfl 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 hq6gx r00n9 items-center aukwz agawe bp13m oq0dt dark:bg-neutral-700 dark:text-neutral-200">
<svg class="hq6gx ibvs1" 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="e3fpz">
<span class="block">
All
</span>
</span>
<input type="radio" id="hs-pro-pytfmall" class="hq6gx ca09w d77gl oq0dt rkwi0 checked:border-purple-600 rdxom 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="yyez4 flex items-center vmt4s t5ziw oo8ro wfm4e d77gl bp13m uh9ou pr49v cursor-pointer lile3 obc2t kzyfl 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 hq6gx r00n9 items-center aukwz agawe bp13m oq0dt dark:bg-neutral-700 dark:text-neutral-200">
<svg class="hq6gx ibvs1" 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="e3fpz">
<span class="block">
Money in
</span>
</span>
<input type="radio" id="hs-pro-pytfmmi" class="hq6gx ca09w d77gl oq0dt rkwi0 checked:border-purple-600 rdxom 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="yyez4 flex items-center vmt4s t5ziw oo8ro wfm4e d77gl bp13m uh9ou pr49v cursor-pointer lile3 obc2t kzyfl 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 hq6gx r00n9 items-center aukwz agawe bp13m oq0dt dark:bg-neutral-700 dark:text-neutral-200">
<svg class="hq6gx ibvs1" 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="e3fpz">
<span class="block">
Money out
</span>
</span>
<input type="radio" id="hs-pro-pytfmmo" class="hq6gx ca09w d77gl oq0dt rkwi0 checked:border-purple-600 rdxom 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="v3e4j jzuu1 w4ry8">
<label class="block ej64t vo20k bp13m dark:text-neutral-200">
Currencies
</label>
<!-- Input Group -->
<div class="dmfqa mmjp9 n5y6f aygsi">
<div>
<label class="ecbnn">
From
</label>
<!-- Select -->
<div class="relative inline-block i65bn">
<select data-hs-select='{
"placeholder": "From any currency",
"hasSearch": true,
"searchPlaceholder": "Type a currency",
"searchClasses": "block jlmh5 sofkk apc69 i65bn psfwb d77gl ps5iq c5ddu m61eo dark:bg-neutral-950 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder:text-neutral-400",
"searchWrapperClasses": "oo8ro n33uu -mx-1 qp3gf ofq05 dark:bg-neutral-950",
"toggleTag": "<button type=\"button\" aria-expanded=\"false\"><span class=\"flex \" data-icon></span><span class=\"bp13m dark:text-neutral-200 \" data-title></span></button>",
"toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative o1ncb dhy94 k77cj flex items-center lialp dslo6 i65bn cursor-pointer oo8ro wfm4e d77gl lile3 qgy40 t5ziw uh9ou pr49v wyzq2 lhoun focus:outline-hidden m61eo 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": "kdmqb yj8ha ju7it ami92 space-y-0.5 ucmtr i65bn overflow-hidden overflow-y-auto oo8ro lile3 rrmkk n4ec4 xlk9f rzoxf xcbgk 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 i7oig dkhxo i65bn t5ziw bp13m cursor-pointer ksr3h ps5iq focus:outline-hidden kf4z7 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800",
"optionTemplate": "<div><div class=\"flex items-center \"><div class=\"hq6gx epucs \" data-icon></div><div class=\"e3fpz \"><div class=\"flex uip67 items-center vmt4s \"><div class=\"bp13m dark:text-neutral-200 \" data-title></div><div class=\"t6rrs dark:text-neutral-500 \" data-description></div></div></div></div></div>",
"extraMarkup": "<div class=\"absolute wgue8 pjxsz cursor-pointer -translate-y-1/2 \"><svg class=\"hq6gx ibvs1 bp13m 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 hq6gx ibvs1 oq0dt \" 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 hq6gx ibvs1 oq0dt \" 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 hq6gx ibvs1 oq0dt \" src=\"../../assets/vendor/svg-country-flags/png100px/eu.png\" alt=\"EUR\" />"}'>
EURO
</option>
</select>
</div>
<!-- End Select -->
</div>
<div>
<label class="ecbnn">
To
</label>
<!-- Select -->
<div class="relative inline-block i65bn">
<select data-hs-select='{
"placeholder": "To any currency",
"hasSearch": true,
"searchPlaceholder": "Type a currency",
"searchClasses": "block jlmh5 sofkk apc69 i65bn psfwb d77gl ps5iq c5ddu m61eo dark:bg-neutral-950 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder:text-neutral-400",
"searchWrapperClasses": "oo8ro n33uu -mx-1 qp3gf ofq05 dark:bg-neutral-950",
"toggleTag": "<button type=\"button\" aria-expanded=\"false\"><span class=\"flex \" data-icon></span><span class=\"bp13m dark:text-neutral-200 \" data-title></span></button>",
"toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative o1ncb dhy94 k77cj flex items-center lialp dslo6 i65bn cursor-pointer oo8ro wfm4e d77gl lile3 qgy40 t5ziw uh9ou pr49v wyzq2 lhoun focus:outline-hidden m61eo 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": "kdmqb yj8ha ju7it ami92 space-y-0.5 ucmtr i65bn overflow-hidden overflow-y-auto oo8ro lile3 rrmkk n4ec4 xlk9f rzoxf xcbgk 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 i7oig dkhxo i65bn t5ziw bp13m cursor-pointer ksr3h ps5iq focus:outline-hidden kf4z7 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800",
"optionTemplate": "<div><div class=\"flex items-center \"><div class=\"hq6gx epucs \" data-icon></div><div class=\"e3fpz \"><div class=\"flex uip67 items-center vmt4s \"><div class=\"bp13m dark:text-neutral-200 \" data-title></div><div class=\"t6rrs dark:text-neutral-500 \" data-description></div></div></div></div></div>",
"extraMarkup": "<div class=\"absolute wgue8 pjxsz cursor-pointer -translate-y-1/2 \"><svg class=\"hq6gx ibvs1 bp13m 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 hq6gx ibvs1 oq0dt \" 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 hq6gx ibvs1 oq0dt \" 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 hq6gx ibvs1 oq0dt \" 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="mctd2 blhyt flex uip67 items-center vmt4s pyimf d77gl dark:border-neutral-700">
<button type="button" class="o1ncb apc69 inline-flex r00n9 items-center vrcxw t5ziw vo20k lile3 wfm4e d77gl oo8ro bp13m hx4gm tdhmi disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden tme8y 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="o1ncb apc69 inline-flex r00n9 items-center vrcxw t5ziw vo20k lile3 wfm4e qb17b fs9eh zr4l6 bicpw disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden zv3g4" 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 = 'u7zz8 ej64t oo8ro wfm4e d77gl bp13m ps5iq ttai3 dark:bg-neutral-800 dark:border-neutral-700',
wrapperExtClasses = '',
seriesClasses = 'cm336',
seriesExtClasses = '',
titleClasses = 'y2wul d2ov9 hft9r n4eug bp13m l96n9 dark:bg-neutral-800! dark:border-neutral-700! dark:text-neutral-200',
titleExtClasses = '',
markerClasses = 'e86k1 o03ob dwlzo',
markerExtClasses = 'bw8uh',
valueClasses = 'oo3sc t6rrs ms-auto! dark:text-neutral-400',
valueExtClasses = '',
labelClasses = 't6rrs 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 ? 'fdh2j' : ''} 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 t067g">
<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 = 'u7zz8 ej64t oo8ro wfm4e d77gl bp13m ps5iq ttai3 dark:bg-neutral-800 dark:border-neutral-700',
wrapperExtClasses = '',
seriesClasses = 'fdh2j i65bn cm336',
seriesExtClasses = '',
titleClasses = 'flex uip67 y2wul d2ov9 hft9r n4eug bp13m l96n9 dark:bg-neutral-800! dark:border-neutral-700! dark:text-neutral-200',
titleExtClasses = '',
markerClasses = 'e86k1 o03ob dwlzo',
markerExtClasses = 'bw8uh',
valueClasses = 'oo3sc t6rrs ms-auto! dark:text-neutral-400',
valueExtClasses = '',
labelClasses = 't6rrs dark:text-neutral-400 zocwd',
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 ibvs1 s1drr" 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 ibvs1 s1drr" 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 t067g">
${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 pgjbi ${!isDifferenceIsNull ? (isGrowing ? 'f411b' : 'vrq52') : ''} zocwd">
${!isDifferenceIsNull ? icon : ''}
<span class="inline-block t5ziw">
${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 = 'u7zz8 ej64t oo8ro wfm4e d77gl bp13m ps5iq ttai3 dark:bg-neutral-800 dark:border-neutral-700',
wrapperExtClasses = '',
seriesClasses = 'fdh2j i65bn cm336',
seriesExtClasses = '',
titleClasses = 'flex uip67 y2wul d2ov9 hft9r n4eug bp13m l96n9 dark:bg-neutral-800! dark:border-neutral-700! dark:text-neutral-200',
titleExtClasses = '',
markerClasses = 'e86k1 o03ob dwlzo',
markerExtClasses = 'bw8uh',
valueClasses = 'oo3sc t6rrs ms-auto! dark:text-neutral-400',
valueExtClasses = '',
labelClasses = 't6rrs dark:text-neutral-400 zocwd',
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 ibvs1 s1drr" 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 ibvs1 s1drr" 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 cm336">
<div class="apexcharts-tooltip-y-group t067g">
<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 pgjbi ${!isDifferenceIsNull ? (isGrowing ? 'f411b' : 'vrq52') : ''} zocwd">
${!isDifferenceIsNull ? icon : ''}
<span class="inline-block t5ziw">
${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("bk7zm", () => 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>