Empty States

Pie Chart Placeholder Preview

Theme:

<!DOCTYPE html>
              <html lang="en" dir="" class="relative pdjr6 jfdv6">
                <head>
                  <meta charset="utf-8">
                  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                  <title>Preline UI</title>
                  <link rel="shortcut icon" href="../../favicon.ico">
                  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                  <link rel="stylesheet" href="../../assets/css/obfuscated.min.css">
                </head>
                <body>
                <div class="w-full p0xp8 mx-auto">
              <div class="jfdv6 flex flex-col nkbv4 cdmcr bs23w xbcbd v0ms9">
                
                <div class="egwpe a5fxe flex tv8hq items-center">
                  <h2 class="orw9o inline-block xqsmy janna t0mvh">
                    Browsers
                  </h2>
                </div>

<div class="flex flex-col tv8hq jfdv6 eosbc g0lfo">
                  <div>
                    <h4 class="ukx95 nluqq jywe6 ke5c9">
                      <span class="an26g ebm23 h9pik qy42y vp2w9">
                        0 
                      </span>
                    </h4>

<p class="tkq75 sfddw">
                      Visitors are viewing website from the desktop device. 
                    </p>
                  </div>

<div class="tkq75">
                    
                    <div class="eebet ygjhm u716i">
                      
                      <div class="yfrh0 cdmcr x8gdd bs23w  v0ms9">
                        <img class="u5o7s dguee zr0sc" src="../../assets/svg/brands/chrome.svg" alt="Chrome Logo">
                        <p class="o6f5t t0mvh">
                          Chrome
                        </p>
                        <p class="janna xqsmy t0mvh">
                          0 
                        </p>
                      </div>

<div class="yfrh0 cdmcr x8gdd bs23w  v0ms9">
                        <img class="u5o7s dguee zr0sc" src="../../assets/svg/brands/firefox.svg" alt="Firefox Logo">
                        <p class="o6f5t t0mvh">
                          Firefox
                        </p>
                        <p class="janna xqsmy t0mvh">
                          0 
                        </p>
                      </div>

<div class="yfrh0 cdmcr x8gdd bs23w  v0ms9">
                        <img class="u5o7s dguee zr0sc" src="../../assets/svg/brands/safari.svg" alt="Safari Logo">
                        <p class="o6f5t t0mvh">
                          Safari
                        </p>
                        <p class="janna xqsmy t0mvh">
                          0 
                        </p>
                      </div>
                      
                    </div>
                    
                  </div>

<div class="tkq75">
                    
                    <div class="cyaqi cdmcr nuipg v0ms9 qubpl skbhe wgmrx" role="alert" tabindex="-1" aria-labelledby="hs-pro-dpna-label">
                      <div class="flex items-center bm2sb">
                        <svg class="u5o7s o931b t0mvh" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>
                        <div class="r0vjv">
                          <h3 id="hs-pro-dpna-label" class="o6f5t t0mvh janna">
                            Push notifications
                          </h3>
                          <p class="o6f5t hn7rz">
                            Automatically send me notifications
                          </p>
                        </div>

<div class="jfdv6 flex flex-col nkbv4 cdmcr bs23w xbcbd v0ms9">
                
                <div class="egwpe a5fxe flex tv8hq items-center">
                  <h2 class="orw9o inline-block xqsmy janna t0mvh">
                    Browsers
                  </h2>
                </div>

<div class="flex flex-col tv8hq jfdv6 eosbc g0lfo">
                  <div>
                    <h4 class="ukx95 nluqq jywe6 ke5c9">
                      <span class="an26g ebm23 h9pik qy42y vp2w9">
                        0 
                      </span>
                    </h4>

<p class="tkq75 sfddw">
                      Visitors are viewing website from the desktop device. 
                    </p>
                  </div>

<div class="tkq75">
                    
                    <div class="eebet ygjhm u716i">
                      
                      <div class="yfrh0 cdmcr x8gdd bs23w  v0ms9">
                        <img class="u5o7s dguee zr0sc" src="../../assets/svg/brands/chrome.svg" alt="Chrome Logo">
                        <p class="o6f5t t0mvh">
                          Chrome
                        </p>
                        <p class="janna xqsmy t0mvh">
                          0 
                        </p>
                      </div>

<div class="yfrh0 cdmcr x8gdd bs23w  v0ms9">
                        <img class="u5o7s dguee zr0sc" src="../../assets/svg/brands/firefox.svg" alt="Firefox Logo">
                        <p class="o6f5t t0mvh">
                          Firefox
                        </p>
                        <p class="janna xqsmy t0mvh">
                          0 
                        </p>
                      </div>

<div class="yfrh0 cdmcr x8gdd bs23w  v0ms9">
                        <img class="u5o7s dguee zr0sc" src="../../assets/svg/brands/safari.svg" alt="Safari Logo">
                        <p class="o6f5t t0mvh">
                          Safari
                        </p>
                        <p class="janna xqsmy t0mvh">
                          0 
                        </p>
                      </div>
                      
                    </div>
                    
                  </div>

<div class="tkq75">
                    
                    <div class="cyaqi cdmcr nuipg v0ms9 qubpl skbhe wgmrx" role="alert" tabindex="-1" aria-labelledby="hs-pro-dpna-label">
                      <div class="flex items-center bm2sb">
                        <svg class="u5o7s o931b t0mvh" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>
                        <div class="r0vjv">
                          <h3 id="hs-pro-dpna-label" class="o6f5t t0mvh janna">
                            Push notifications
                          </h3>
                          <p class="o6f5t hn7rz">
                            Automatically send me notifications
                          </p>
                        </div>

Title Bar and Button Group Preview

Theme:

<!DOCTYPE html>
              <html lang="en" dir="" class="relative pdjr6 jfdv6">
                <head>
                  <meta charset="utf-8">
                  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                  <title>Preline UI</title>
                  <link rel="shortcut icon" href="../../favicon.ico">
                  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                  <link rel="stylesheet" href="../../assets/css/obfuscated.min.css">
                  
                  <link rel="stylesheet" href="../../assets/vendor/apexcharts/dist/apexcharts.css">
                  <style type="text/css">
                    .apexcharts-tooltip.apexcharts-theme-light {
                      background-color: transparent !important;
                      border: none !important;
                      box-shadow: none !important;
                    }

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

.apexcharts-xaxistooltip:after,
                    .apexcharts-xaxistooltip:before {
                      border-bottom-color: var(--color-primary-600) !important;
                    }
                  </style>
                </head>
                <body>
                <div class="flex flex-col nkbv4 cdmcr bs23w qubpl v0ms9">
              <div class="uwecq ah5oa">
                
                <div class="apz7p g0lfo flex flex-wrap tv8hq items-center tvmuq n9osc">
                  <h2 class="jywe6 t0mvh">
                    Overview
                  </h2>

<div class="flex a7e03 items-center gs0q7">
                    
                    <div class="hs-dropdown [--auto-close:inside] [--placement:top-right] inline-flex">
                      <button id="hs-pro-dnic" type="button" class="z7pqh inline-flex items-center pwhcc jywe6 g4xl4 cyaqi cdmcr nuipg va8bq xbcbd ssnal disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden tw8rh" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                        <svg class="u5o7s c1nfx gsbpv" xmlns="http://www.w3.org/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>
                        Today
                        <svg class="u5o7s ll8gm gsbpv" xmlns="http://www.w3.org/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 lrisk transition-[opacity,margin] duration opacity-0 hidden de9a1 ryj6t cdmcr r7fc7 v0ms9 d4iuw" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-dnic">
                        
                            
                            <div class="yfrh0 space-y-0.5">
                              
                              <div class="eebet ug9y5 items-center bm2sb qf56e a5fxe">
                                
                                <div class="we1dj">
                                  <button type="button" class="yrj6t flex n8cvq items-center t0mvh pawa6 zf1zr disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden jg8fm" aria-label="Previous">
                                    <svg class="u5o7s y2ebh" xmlns="http://www.w3.org/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>
                                
          
                                
                                <div class="hihr5 flex n8cvq items-center uc1pt">
                                  <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 bc9zo w-full cursor-pointer r16fm jywe6 t0mvh qcjyt focus:outline-hidden pg80x before:absolute before:inset-0 before:z-1",
                                        "dropdownClasses": "l6659 de9a1 f0r5i prll9 u3mhe space-y-0.5 overflow-hidden overflow-y-auto y48gc cdmcr nuipg v0ms9 d4iuw [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                                        "optionClasses": "z7pqh w-full o6f5t b8oy8 cursor-pointer vjyrx xse6c focus:outline-hidden ztbk8",
                                        "optionTemplate": "<div class=\"flex tv8hq items-center w-full \"><span data-title></span><span class=\"hidden hs-selected:block \"><svg class=\"u5o7s gsbpv t0mvh \" 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>

<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 bc9zo w-full cursor-pointer r16fm jywe6 t0mvh qcjyt focus:outline-hidden pg80x before:absolute before:inset-0 before:z-1",
                                        "dropdownClasses": "l6659 de9a1 csl2v prll9 u3mhe space-y-0.5 overflow-hidden overflow-y-auto y48gc cdmcr nuipg v0ms9 d4iuw [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                                        "optionClasses": "z7pqh w-full o6f5t b8oy8 cursor-pointer vjyrx xse6c focus:outline-hidden ztbk8",
                                        "optionTemplate": "<div class=\"flex tv8hq items-center w-full \"><span data-title></span><span class=\"hidden hs-selected:block \"><svg class=\"u5o7s gsbpv t0mvh \" 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>

<div class="we1dj flex a7e03">
                                  <button type="button" class=" yrj6t flex n8cvq items-center t0mvh pawa6 zf1zr disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden jg8fm" aria-label="Next">
                                    <svg class="u5o7s y2ebh" 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>
                                
                              </div>

<div class="flex vfdgz">
                                <span class="ry33c xekpw block qy7me o6f5t sfddw">
                                  Mo
                                </span>
                                <span class="ry33c xekpw block qy7me o6f5t sfddw">
                                  Tu
                                </span>
                                <span class="ry33c xekpw block qy7me o6f5t sfddw">
                                  We
                                </span>
                                <span class="ry33c xekpw block qy7me o6f5t sfddw">
                                  Th
                                </span>
                                <span class="ry33c xekpw block qy7me o6f5t sfddw">
                                  Fr
                                </span>
                                <span class="ry33c xekpw block qy7me o6f5t sfddw">
                                  Sa
                                </span>
                                <span class="ry33c xekpw block qy7me o6f5t sfddw">
                                  Su
                                </span>
                              </div>

<div class="flex">
                                <div>
                                  <button type="button" class="ry33c fkr83 flex n8cvq items-center border-[1.5px] n9r3a o6f5t t0mvh zf1zr uvhmb qcjyt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden if6x4 pg80x" disabled>
                                    26
                                  </button>
                                </div>
                                <div>
                                  <button type="button" class="ry33c fkr83 flex n8cvq items-center border-[1.5px] n9r3a o6f5t t0mvh zf1zr uvhmb qcjyt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden if6x4 pg80x" disabled>
                                    27
                                  </button>
                                </div>
                                <div>
                                  <button type="button" class="ry33c fkr83 flex n8cvq items-center border-[1.5px] n9r3a o6f5t t0mvh zf1zr uvhmb qcjyt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden if6x4 pg80x" disabled>
                                    28
                                  </button>
                                </div>
                                <div>
                                  <button type="button" class="ry33c fkr83 flex n8cvq items-center border-[1.5px] n9r3a o6f5t t0mvh zf1zr uvhmb qcjyt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden if6x4 pg80x" disabled>
                                    29
                                  </button>
                                </div>
                                <div>
                                  <button type="button" class="ry33c fkr83 flex n8cvq items-center border-[1.5px] n9r3a o6f5t t0mvh zf1zr uvhmb qcjyt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden if6x4 pg80x" disabled>
                                    30
                                  </button>
                                </div>
                                <div>
                                  <button type="button" class="ry33c fkr83 flex n8cvq items-center border-[1.5px] n9r3a o6f5t t0mvh zf1zr uvhmb qcjyt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden if6x4 pg80x">
                                    1
                                  </button>
                                </div>
                                <div>
                                  <button type="button" class="ry33c fkr83 flex n8cvq items-center border-[1.5px] n9r3a o6f5t t0mvh zf1zr uvhmb qcjyt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden if6x4 pg80x">
                                    2
                                  </button>
                                </div>
                              </div>

<div class="flex">
                                <div>
                                  <button type="button" class="ry33c fkr83 flex n8cvq items-center border-[1.5px] n9r3a o6f5t t0mvh zf1zr uvhmb qcjyt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden if6x4 pg80x">
                                    3
                                  </button>
                                </div>
                                <div>
                                  <button type="button" class="ry33c fkr83 flex n8cvq items-center border-[1.5px] n9r3a o6f5t t0mvh zf1zr uvhmb qcjyt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden if6x4 pg80x">
                                    4
                                  </button>
                                </div>
                                <div >
                                  <button type="button" class="ry33c fkr83 flex n8cvq items-center border-[1.5px] n9r3a o6f5t t0mvh zf1zr uvhmb qcjyt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden if6x4 pg80x">
                                    5
                                  </button>
                                </div>
                                <div >
                                  <button type="button" class="ry33c fkr83 flex n8cvq items-center border-[1.5px] n9r3a o6f5t t0mvh zf1zr uvhmb qcjyt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden if6x4 pg80x">
                                    6
                                  </button>
                                </div>
                                <div >
                                  <button type="button" class="ry33c fkr83 flex n8cvq items-center border-[1.5px] n9r3a o6f5t t0mvh zf1zr uvhmb qcjyt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden if6x4 pg80x">
                                    7
                                  </button>
                                </div>
                                <div >
                                  <button type="button" class="ry33c fkr83 flex n8cvq items-center border-[1.5px] n9r3a o6f5t t0mvh zf1zr uvhmb qcjyt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden if6x4 pg80x">
                                    8
                                  </button>
                                </div>
                                <div >
                                  <button type="button" class="ry33c fkr83 flex n8cvq items-center border-[1.5px] n9r3a o6f5t t0mvh zf1zr uvhmb qcjyt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden if6x4 pg80x">
                                    9
                                  </button>
                                </div>
                              </div>

<div class="flex">
                                <div >
                                  <button type="button" class="ry33c fkr83 flex n8cvq items-center border-[1.5px] n9r3a o6f5t t0mvh zf1zr uvhmb qcjyt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden if6x4 pg80x">
                                    10
                                  </button>
                                </div>
                                <div >
                                  <button type="button" class="ry33c fkr83 flex n8cvq items-center border-[1.5px] n9r3a o6f5t t0mvh zf1zr uvhmb qcjyt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden if6x4 pg80x">
                                    11
                                  </button>
                                </div>
                                <div >
                                  <button type="button" class="ry33c fkr83 flex n8cvq items-center border-[1.5px] n9r3a o6f5t t0mvh zf1zr uvhmb qcjyt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden if6x4 pg80x">
                                    12
                                  </button>
                                </div>
                                <div>
                                  <button type="button" class="ry33c fkr83 flex n8cvq items-center border-[1.5px] n9r3a o6f5t t0mvh zf1zr uvhmb qcjyt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden if6x4 pg80x">
                                    13
                                  </button>
                                </div>
                                <div>
                                  <button type="button" class="ry33c fkr83 flex n8cvq items-center border-[1.5px] n9r3a o6f5t t0mvh zf1zr uvhmb qcjyt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden if6x4 pg80x">
                                    14
                                  </button>
                                </div>
                                <div>
                                  <button type="button" class="ry33c fkr83 flex n8cvq items-center border-[1.5px] n9r3a o6f5t t0mvh zf1zr uvhmb qcjyt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden if6x4 pg80x">
                                    15
                                  </button>
                                </div>
                                <div>
                                  <button type="button" class="ry33c fkr83 flex n8cvq items-center border-[1.5px] n9r3a o6f5t t0mvh zf1zr uvhmb qcjyt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden if6x4 pg80x">
                                    16
                                  </button>
                                </div>
                              </div>
                              
      
                              
                              <div class="flex">
                                <div>
                                  <button type="button" class="ry33c fkr83 flex n8cvq items-center border-[1.5px] n9r3a o6f5t t0mvh zf1zr uvhmb qcjyt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden if6x4 pg80x">
                                    17
                                  </button>
                                </div>
                                <div>
                                  <button type="button" class="ry33c fkr83 flex n8cvq items-center border-[1.5px] n9r3a o6f5t t0mvh zf1zr uvhmb qcjyt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden if6x4 pg80x">
                                    18
                                  </button>
                                </div>
                                <div>
                                  <button type="button" class="ry33c fkr83 flex n8cvq items-center border-[1.5px] n9r3a o6f5t t0mvh zf1zr uvhmb qcjyt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden if6x4 pg80x">
                                    19
                                  </button>
                                </div>
                                <div>
                                  <button type="button" class="ry33c fkr83 flex n8cvq items-center d6j2m border-[1.5px] n9r3a o6f5t jywe6 vbfe4 uvhmb zf1zr disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden nln9l">
                                    20
                                  </button>
                                </div>
                                <div>
                                  <button type="button" class="ry33c fkr83 flex n8cvq items-center border-[1.5px] n9r3a o6f5t t0mvh zf1zr uvhmb qcjyt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden if6x4 pg80x">
                                    21
                                  </button>
                                </div>
                                <div>
                                  <button type="button" class="ry33c fkr83 flex n8cvq items-center border-[1.5px] n9r3a o6f5t t0mvh zf1zr uvhmb qcjyt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden if6x4 pg80x">
                                    22
                                  </button>
                                </div>
                                <div>
                                  <button type="button" class="ry33c fkr83 flex n8cvq items-center border-[1.5px] n9r3a o6f5t t0mvh zf1zr uvhmb qcjyt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden if6x4 pg80x">
                                    23
                                  </button>
                                </div>
                              </div>
                              
      
                              
                              <div class="flex">
                                <div>
                                  <button type="button" class="ry33c fkr83 flex n8cvq items-center border-[1.5px] n9r3a o6f5t t0mvh zf1zr uvhmb qcjyt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden if6x4 pg80x">
                                    24
                                  </button>
                                </div>
                                <div >
                                    <button type="button" class="ry33c fkr83 flex n8cvq items-center border-[1.5px] n9r3a o6f5t t0mvh zf1zr uvhmb qcjyt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden if6x4 pg80x">
                                    25
                                  </button>
                                </div>
                                <div >
                                  <button type="button" class="ry33c fkr83 flex n8cvq items-center border-[1.5px] n9r3a o6f5t t0mvh zf1zr uvhmb qcjyt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden if6x4 pg80x">
                                    26
                                  </button>
                                </div>
                                <div >
                                  <button type="button" class="ry33c fkr83 flex n8cvq items-center border-[1.5px] n9r3a o6f5t t0mvh zf1zr uvhmb qcjyt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden if6x4 pg80x">
                                    27
                                  </button>
                                </div>
                                <div >
                                  <button type="button" class="ry33c fkr83 flex n8cvq items-center border-[1.5px] n9r3a o6f5t t0mvh zf1zr uvhmb qcjyt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden if6x4 pg80x">
                                    28
                                  </button>
                                </div>
                                <div >
                                  <button type="button" class="ry33c fkr83 flex n8cvq items-center border-[1.5px] n9r3a o6f5t t0mvh zf1zr uvhmb qcjyt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden if6x4 pg80x">
                                    29
                                  </button>
                                </div>
                                <div >
                                  <button type="button" class="ry33c fkr83 flex n8cvq items-center border-[1.5px] n9r3a o6f5t t0mvh zf1zr uvhmb qcjyt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden if6x4 pg80x">
                                    30
                                  </button>
                                </div>
                              </div>
                              
      
                              
                              <div class="flex">
                                <div >
                                  <button type="button" class="ry33c fkr83 flex n8cvq items-center border-[1.5px] n9r3a o6f5t t0mvh zf1zr uvhmb qcjyt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden if6x4 pg80x">
                                    31
                                  </button>
                                </div>
                                <div >
                                  <button type="button" class="ry33c fkr83 flex n8cvq items-center border-[1.5px] n9r3a o6f5t t0mvh uvhmb qcjyt zf1zr disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden nln9l" disabled>
                                    1
                                  </button>
                                </div>
                                <div>
                                  <button type="button" class="ry33c fkr83 flex n8cvq items-center border-[1.5px] n9r3a o6f5t t0mvh uvhmb qcjyt zf1zr disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden nln9l" disabled>
                                    2
                                  </button>
                                </div>
                                <div>
                                  <button type="button" class="ry33c fkr83 flex n8cvq items-center border-[1.5px] n9r3a o6f5t t0mvh uvhmb qcjyt zf1zr disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden nln9l" disabled>
                                    3
                                  </button>
                                </div>
                                <div>
                                  <button type="button" class="ry33c fkr83 flex n8cvq items-center border-[1.5px] n9r3a o6f5t t0mvh uvhmb qcjyt zf1zr disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden nln9l" disabled>
                                    4
                                  </button>
                                </div>
                                <div>
                                  <button type="button" class="ry33c fkr83 flex n8cvq items-center border-[1.5px] n9r3a o6f5t t0mvh uvhmb qcjyt zf1zr disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden nln9l" disabled>
                                    5
                                  </button>
                                </div>
                                <div>
                                  <button type="button" class="ry33c fkr83 flex n8cvq items-center border-[1.5px] n9r3a o6f5t t0mvh uvhmb qcjyt zf1zr disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden nln9l" disabled>
                                    6
                                  </button>
                                </div>
                              </div>
                              
                            </div>
                        
                      </div>
                    </div>

<button type="button" class="skbhe avi8i inline-flex items-center gs0q7 pwhcc jywe6 g4xl4 cdmcr n9r3a d6j2m cdmcr oqmtq vbfe4 b7fjb disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden n1pxm">
                      <svg class="hidden sm:block u5o7s gsbpv" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
                      Add project
                    </button>
                  </div>
                </div>
                
              </div>

<div class="ia9xq g0lfo space-y-4"> 
                
                <div class="egwpe h3mvx  flex flex-col n8cvq items-center qy7me">
                  <svg class="lrlwc mx-auto" width="87" height="65" viewBox="0 0 87 65" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect y="35" width="6" height="30" fill="currentColor" class="wgvnf"/>
                    <rect x="9" y="20" width="6" height="45" fill="currentColor" class="wgvnf"/>
                    <rect x="18" y="25" width="6" height="40" fill="currentColor" class="wgvnf"/>
                    <rect x="27" width="6" height="65" fill="currentColor" class="wgvnf"/>
                    <rect x="36" y="5" width="6" height="60" fill="currentColor" class="wgvnf"/>
                    <rect x="45" y="40" width="6" height="25" fill="currentColor" class="wgvnf"/>
                    <rect x="54" y="25" width="6" height="40" fill="currentColor" class="wgvnf"/>
                    <rect x="63" y="12" width="6" height="53" fill="currentColor" class="wgvnf"/>
                    <rect x="72" width="6" height="65" fill="currentColor" class="wgvnf"/>
                    <rect x="81" y="44" width="6" height="21" fill="currentColor" class="wgvnf"/>
                  </svg>

<div class="p0ett mx-auto">
                    <p class="l6659 jywe6 t0mvh">
                      No data
                    </p>
                    <p class="bydva o6f5t sfddw">
                      No data here yet. We will notify you when there's an update.
                    </p>
                  </div>
                  <button type="button" class="skbhe wgmrx inline-flex items-center gs0q7 pwhcc jywe6 g4xl4 d6j2m cdmcr oqmtq vbfe4 b7fjb disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden if6x4 y2s7f owtts" data-hs-overlay="#hs-pro-pabchesb">
                    <svg class="hidden sm:block u5o7s gsbpv" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>Link data
                  </button>
                </div>
                
              </div>
              </div>
                  <script src="../../assets/vendor/preline/dist/index.js?v=4.0.0"></script>
                  <script src="../../assets/vendor/lodash/lodash.min.js"></script>
                  <script src="../../assets/vendor/apexcharts/dist/apexcharts.min.js"></script>
                  
                  <script src="https://cdn.jsdelivr.net/npm/culori@4.0.2/bundled/culori.umd.min.js"></script>

<!--<script>
                    function varToColor(
                      name,
                      forceHex = false,
                      scope = document.documentElement,
                    ) {
                      if (name.startsWith("#") || name.startsWith("rgba")) return name;

const raw = getComputedStyle(scope).getPropertyValue(name).trim();

if (!raw) return null;

if (raw.startsWith("oklch") || forceHex) return raw;

const probe = document.createElement("div");
                      probe.style.position = "fixed";
                      probe.style.left = "-9999px";
                      probe.style.backgroundColor = raw.replace(/\s*!important\s*$/i, "");

document.body.appendChild(probe);

const computed = getComputedStyle(probe).backgroundColor;
                      probe.remove();

if (!computed) return null;
                      if (computed.startsWith("rgba(")) return computed;
                      if (computed.startsWith("rgb(")) return `rgba(${computed.slice(4, -1)}, 1)`;

window.addEventListener("on-hs-color-theme-change", () => {
                        return varToColor(name, forceHex, scope);
                      });

window.addEventListener("on-hs-brand-change", () => {
                        return varToColor(name, forceHex, scope);
                      });

return null;
                    }
                  </script>-->
                  <script>
                    function buildTooltip(props, options) {
                    	const {
                    		title,
                    		mode,
                    		valuePrefix = '$',
                    		isValueDivided = true,
                    		valuePostfix = '',
                    		hasTextLabel = false,
                    		invertGroup = false,
                    		labelDivider = '',
                    		wrapperClasses = 'u8m41 w3bzn cyl3m cdmcr f8qmb zj8ey g4xl4 u14vs dark:bg-neutral-800 dark:border-neutral-700',
                    		wrapperExtClasses = '',
                    		seriesClasses = 'pwhcc',
                    		seriesExtClasses = '',
                    		titleClasses = 'janna o44hn o0ur4 g57z6 zj8ey kl3yf dark:!bg-neutral-800 dark:!border-neutral-700 dark:text-neutral-200',
                    		titleExtClasses = '',
                    		markerClasses = 'm093d hlox4 ll1si',
                    		markerExtClasses = 'dwan0',
                    		valueClasses = 'feq1s yoxfu !ms-auto dark:text-neutral-400',
                    		valueExtClasses = '',
                    		labelClasses = 'yoxfu dark:text-neutral-400',
                    		labelExtClasses = '',
                    		thousandsShortName = 'k',
                    	} = options;
                    	const { dataPointIndex } = props;
                    	// const { colors } = props.ctx.opts;
                    	const { colors } = props.w.globals;
                    	const series = props.ctx.opts.series;
                    	let seriesGroups = '';
  
                    	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 groupData = invertGroup
                    			? {
                    					left: `${hasTextLabel ? label : ''}${labelDivider}`,
  
                    					right: `${valuePrefix}${
                    						val >= 1000 && isValueDivided
                    							? `${val / 1000}${thousandsShortName}`
                    							: val
                    					}${valuePostfix}`,
                    				}
                    			: {
                    					left: `${valuePrefix}${
                    						val >= 1000 && isValueDivided
                    							? `${val / 1000}${thousandsShortName}`
                    							: 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 ? 'f6ix8' : ''
                    		} 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 g7v9s">
                                <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 buildHeatmapTooltip(
                    	props,
                    	options,
                    ) {
                    	const {
                    		mode,
                    		valuePrefix = '$',
                    		valuePostfix = '',
                    		divider = '',
                    		wrapperClasses = 'u8m41 w3bzn cyl3m cdmcr f8qmb zj8ey g4xl4 u14vs dark:bg-neutral-800 dark:border-neutral-700',
                    		wrapperExtClasses = '',
                    		markerClasses = 'm093d hlox4 ll1si',
                    		markerStyles = '',
                    		markerExtClasses = 'dwan0',
                    		valueClasses = 'feq1s yoxfu !ms-auto dark:text-neutral-400',
                    		valueExtClasses = '',
                    	} = options;
                    	const { dataPointIndex, seriesIndex, series } = props;
                    	const { name } = props.ctx.opts.series[seriesIndex];
                    	const val = `${valuePrefix}${
                    		series[seriesIndex][dataPointIndex]
                    	}${valuePostfix}`;
  
                    	return `<div class="${
                    		mode === 'dark' ? 'dark ' : ''
                    	}${wrapperClasses} ${wrapperExtClasses}">
                        <div class="apexcharts-tooltip-series-group !flex">
                    			<span class="apexcharts-tooltip-marker ${markerClasses} ${markerExtClasses}" style="${markerStyles}"></span>
                          <span class="flex items-center">
                            <div class="apexcharts-tooltip-text">
                              <div class="apexcharts-tooltip-y-group g7v9s">
                                <span class="apexcharts-tooltip-text-y-value ${valueClasses} ${valueExtClasses}">${name}${divider}</span>
                              </div>
                            </div>
                          </span>
                    			<span class="apexcharts-tooltip-text-y-value ${valueClasses} ${valueExtClasses}">${val}</span>
                        </div>
                      </div>`;
                    }
  
                    function buildTooltipCompareTwo(
                    	props,
                    	options,
                    ) {
                    	const {
                    		title,
                    		mode,
                    		valuePrefix = '$',
                    		isValueDivided = true,
                    		valuePostfix = '',
                    		hasCategory = true,
                    		hasTextLabel = false,
                    		labelDivider = '',
                    		wrapperClasses = 'u8m41 w3bzn cyl3m cdmcr f8qmb zj8ey g4xl4 u14vs dark:bg-neutral-800 dark:border-neutral-700',
                    		wrapperExtClasses = '',
                    		seriesClasses = 'f6ix8 w-full pwhcc',
                    		seriesExtClasses = '',
                    		titleClasses = 'flex tv8hq janna o44hn o0ur4 g57z6 zj8ey kl3yf dark:!bg-neutral-800 dark:!border-neutral-700 dark:text-neutral-200',
                    		titleExtClasses = '',
                    		markerClasses = 'm093d hlox4 ll1si',
                    		markerExtClasses = 'dwan0',
                    		valueClasses = 'feq1s yoxfu !ms-auto dark:text-neutral-400',
                    		valueExtClasses = '',
                    		labelClasses = 'yoxfu dark:text-neutral-400 lssxk',
                    		labelExtClasses = '',
                    		thousandsShortName = 'k',
                    	} = options;
                    	const { dataPointIndex } = props;
                    	const { categories } = props.ctx.opts.xaxis;
                    	// const { colors } = props.ctx.opts;
                    	const { colors } = props.w.globals;
                    	const series = props.ctx.opts.series;
  
                    	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;
                    	// TODO: test this before deleting the code above
                    	const isPrevZero = s1 === 0;
                    	const difference = isPrevZero ? 0 : ((s0 - s1) / Math.abs(s1)) * 100;
                    	const isDifferenceIsNull = difference === 0;
                    	const isGrowing = difference > 0;
                    	const icon = isGrowing
                    		? `<svg class="inline-block y2ebh eygij" xmlns="http://www.w3.org/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 y2ebh eygij" xmlns="http://www.w3.org/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}${thousandsShortName}`
                    					: 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 g7v9s">
                                ${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 uc1pt ${
                    				!isDifferenceIsNull
                    					? isGrowing
                    						? 'uslet'
                    						: 'btqdk'
                    					: ''
                    			} lssxk">
                            ${!isDifferenceIsNull ? icon : ''}
                            <span class="inline-block o6f5t">
                              ${difference.toFixed(1)}%
                            </span>
                          </span>
                        </div>
                        ${seriesGroups}
                      </div>`;
                    }
  
                    function buildTooltipCompareTwoAlt(
                    	props,
                    	options,
                    ) {
                    	const {
                    		title,
                    		mode,
                    		valuePrefix = '$',
                    		isValueDivided = true,
                    		valuePostfix = '',
                    		hasCategory = true,
                    		hasTextLabel = false,
                    		labelDivider = '',
                    		wrapperClasses = 'u8m41 w3bzn cyl3m cdmcr f8qmb zj8ey g4xl4 u14vs dark:bg-neutral-800 dark:border-neutral-700',
                    		wrapperExtClasses = '',
                    		seriesClasses = 'f6ix8 w-full pwhcc',
                    		seriesExtClasses = '',
                    		titleClasses = 'flex tv8hq janna o44hn o0ur4 g57z6 zj8ey kl3yf dark:!bg-neutral-800 dark:!border-neutral-700 dark:text-neutral-200',
                    		titleExtClasses = '',
                    		markerClasses = 'm093d hlox4 ll1si',
                    		markerExtClasses = 'dwan0',
                    		valueClasses = 'feq1s yoxfu !ms-auto dark:text-neutral-400',
                    		valueExtClasses = '',
                    		labelClasses = 'yoxfu dark:text-neutral-400 lssxk',
                    		labelExtClasses = '',
                    		thousandsShortName = 'k',
                    	} = options;
                    	const { dataPointIndex } = props;
                    	const { categories } = props.ctx.opts.xaxis;
                    	// const { colors } = props.ctx.opts;
                    	const { colors } = props.w.globals;
                    	const series = props.ctx.opts.series;
  
                    	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;
                    	// TODO: test this before deleting the code above
                    	const isPrevZero = s1 === 0;
                    	const difference = isPrevZero ? 0 : ((s0 - s1) / Math.abs(s1)) * 100;
                    	const isDifferenceIsNull = difference === 0;
                    	const isGrowing = difference > 0;
                    	const icon = isGrowing
                    		? `<svg class="inline-block y2ebh eygij" xmlns="http://www.w3.org/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 y2ebh eygij" xmlns="http://www.w3.org/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 labelMarkup = `<span class="apexcharts-tooltip-text-y-label ${labelClasses} ${labelExtClasses}">${valuePrefix}${
                    			val >= 1000 && isValueDivided ? `${val / 1000}${thousandsShortName}` : 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 pwhcc">
                              <div class="apexcharts-tooltip-y-group g7v9s">
                                <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 uc1pt ${
                    				!isDifferenceIsNull
                    					? isGrowing
                    						? 'uslet'
                    						: 'btqdk'
                    					: ''
                    			} lssxk">
                            ${!isDifferenceIsNull ? icon : ''}
                            <span class="inline-block o6f5t">
                              ${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 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'),
                    	) => {
                    		if (
                    			mode === 'dark' ||
                    			(mode === 'auto' &&
                    				window.matchMedia('(prefers-color-scheme: dark)').matches)
                    		) {
                    			return window._.merge(
                    				shared('dark'),
                    				typeof dark === 'function' ? dark() : dark,
                    			);
                    		} else {
                    			return window._.merge(
                    				shared('light'),
                    				typeof light === 'function' ? light() : light,
                    			);
                    		}
                    	};
  
                    	if ($chart) {
                    		let isInitialLoad = true;
                    		chart = new ApexCharts($chart, optionsFn());
                    		chart.render();
  
                    		setTimeout(() => {
                    			isInitialLoad = false;
                    		}, 100);
  
                    		let hasInitProgressApplied = false;
  
                    		const handleThemeChange = (evt) => {
                    			if (isInitialLoad) return;
  
                    			chart.updateOptions(optionsFn(evt.detail));
                    		};
                    		const applyOptionsChange = (detail) => {
                    			let modeFromBodyClass;
                    			const target = detail?.target ?? document.querySelector('html');
  
                    			Array.from(target.classList).forEach((cl) => {
                    				if (['dark', 'light', 'default'].includes(cl)) modeFromBodyClass = cl;
                    			});
  
                    			handleThemeChange({
                    				detail: modeFromBodyClass || localStorage.getItem('hs_theme'),
                    			});
                    		};
                    		const handleOptionsChange = (evt) => {
                    			const detail = evt.detail;
                    			if (detail && detail.isClipboardInit) return;
                    			applyOptionsChange(detail);
                    		};
                    		const handleClipboardInitProgress = (evt) => {
                    			if (hasInitProgressApplied) return;
  
                    			const detail = evt.detail;
                    			const target = detail?.target;
  
                    			if (!target || !$chart || !target.contains($chart)) return;
  
                    			hasInitProgressApplied = true;
  
                    			if (isInitialLoad) {
                    				setTimeout(() => applyOptionsChange(detail), 120);
                    			} else {
                    				applyOptionsChange(detail);
                    			}
                    		};
  
                    		window.addEventListener('on-hs-appearance-change', handleThemeChange);
                    		window.addEventListener(
                    			'on-hs-color-theme-change',
                    			(evt) => {
                    				setTimeout(() => handleOptionsChange(evt), 50);
                    			},
                    		);
                    		window.addEventListener('on-hs-font-change', (evt) => {
                    			setTimeout(() => handleOptionsChange(evt), 50);
                    		});
                    		window.addEventListener('on-hs-brand-change', (evt) => {
                    			setTimeout(() => handleOptionsChange(evt), 50);
                    		});
                    		window.addEventListener(
                    			'on-hs-clipboard-init-progress',
                    			handleClipboardInitProgress,
                    		);
  
                    		if (tabpanel) {
                    			tabpanel.addEventListener('on-hs-appearance-change', handleThemeChange);
                    		}
                    	}
  
                    	return chart;
                    }
  
                    function fullBarHoverEffect(
                    	chartCtx,
                    	{ shadowClasses = 'w9xr1' } = {},
                    ) {
                    	const eebet = chartCtx.el.querySelector<HTMLElement>('.apexcharts-grid');
                    	const svg = chartCtx.el.querySelector('svg');
                    	if (!grid || !svg) return;
  
                    	const categories = chartCtx.w.config.xaxis?.categories || [];
                    	if (categories.length === 0) return;
  
                    	let shadowRect = null;
                    	let isVisible = false;
                    	let isRemoving = false;
  
                    	function cleanup() {
                    		shadowRect?.remove();
                    		shadowRect = null;
                    		isVisible = false;
                    		isRemoving = false;
                    	}
  
                    	function showForIndex(index) {
                    		const seriesGroup = chartCtx.el.querySelector('.apexcharts-bar-series');
                    		if (!seriesGroup) return;
  
                    		const bars = seriesGroup.querySelectorAll<SVGPathElement>('path');
                    		const bar = bars[index];
                    		if (!bar) return;
  
                    		const bbox = bar.getBBox();
                    		const x = bbox.x;
                    		const y = bbox.y;
                    		const width = bbox.width;
                    		if (y <= 0) return;
  
                    		if (!shadowRect) {
                    			shadowRect = document.createElementNS(
                    				'http://www.w3.org/2000/svg',
                    				'rect',
                    			);
                    			shadowRect.setAttribute('y', '0');
                    			shadowRect.setAttribute('class', shadowClasses);
                    			bar.parentNode?.insertBefore(shadowRect, bar);
                    		}
  
                    		shadowRect.setAttribute('x', x.toString());
                    		shadowRect.setAttribute('width', width.toString());
                    		shadowRect.setAttribute('height', y.toString());
  
                    		requestAnimationFrame(() => {
                    			shadowRect?.classList.add('guz8n');
                    		});
  
                    		isVisible = true;
                    		isRemoving = false;
                    	}
  
                    	function hide() {
                    		if (!shadowRect || !isVisible || isRemoving) return;
                    		isRemoving = true;
                    		shadowRect.classList.remove('guz8n');
                    		cleanup();
                    	}
  
                    	svg.addEventListener('mousemove', (e) => {
                    		const gridRect = grid.getBoundingClientRect();
                    		if (
                    			e.clientX < gridRect.left ||
                    			e.clientX > gridRect.right ||
                    			e.clientY < gridRect.top ||
                    			e.clientY > gridRect.bottom
                    		) {
                    			hide();
                    			return;
                    		}
  
                    		const relativeX = e.clientX - gridRect.left;
                    		const ratio = relativeX / gridRect.width;
                    		const index = Math.floor(ratio * categories.length);
  
                    		if (index < 0 || index >= categories.length) {
                    			hide();
                    			return;
                    		}
  
                    		showForIndex(index);
                    	});
  
                    	svg.addEventListener('mouseleave', hide);
                    }
  
                    function cssVarToValue(name, context = document.documentElement) {
                      const value = getComputedStyle(context).getPropertyValue(name);
  	
                      if (!value) return null;
  	
                    	return value.trim();
                    }
                  </script>

if (!data.type) return false;
                    if (data.type === "hs:color-theme-change") {
                      window.dispatchEvent(new CustomEvent("on-hs-color-theme-change", {
                        detail: {
                          target: document.documentElement,
                          value: data.value
                        }
                      }));
                    }
                  });
                  </script>
                  <script>
                    window.addEventListener('load', () => {
                      // Apex Bar Chart
                      (function () {
                        buildChart('#hs-bar-chart', (mode) => ({
                          chart: {
                            type: 'bar',
                            height: 350,
                            toolbar: {
                              show: false
                            },
                            zoom: {
                              enabled: false
                            }
                          },
                          series: [
                            {
                              name: 'Budget',
                              data: [17000, 76000, 85000, 101000, 98000, 87000, 105000, 91000, 114000, 94000, 67000, 66000]
                            }, {
                              name: 'Budget left',
                              data: [23000, 44000, 55000, 57000, 56000, 61000, 58000, 63000, 60000, 66000, 34000, 78000]
                            }, {
                              name: 'Projected',
                              data: [7300, 14400, 15500, 25700, 35600, 16100, 5800, 16300, 26000, 36600, 33400, 17800]
                            }
                          ],
                          fill: {
                            type: ['solid', 'pattern', 'solid'],
                            pattern: {
                              style: ['none', 'slantedLines', 'none'],
                              width: 6,
                              height: 6,
                              strokeWidth: 2
                            }
                          },
                          grid: {
                            strokeDashArray: 3,
                          },
                          plotOptions: {
                            bar: {
                              horizontal: false,
                              columnWidth: '50%',
                              borderRadius: 0,
                            }
                          },
                          legend: {
                            show: false
                          },
                          dataLabels: {
                            enabled: false
                          },
                          stroke: {
                            show: true,
                            width: 3,
                            colors: ['transparent']
                          },
                          xaxis: {
                            categories: [
                              'January',
                              'February',
                              'March',
                              'April',
                              'May',
                              'June',
                              'July',
                              'August',
                              'September',
                              'October',
                              'November',
                              'December'
                            ],
                            axisBorder: {
                              show: false
                            },
                            axisTicks: {
                              show: false
                            },
                            crosshairs: {
                              show: false
                            },
                            labels: {
                              style: {
                                colors: varToColor('--chart-colors-xaxis-labels'),
                                fontSize: '13px',
                                fontFamily: cssVarToValue('--font-sans'),
                                fontWeight: 400
                              },
                              offsetX: -2,
                              formatter: (title) => title.slice(0, 3)
                            }
                          },
                          yaxis: {
                            labels: {
                              align: 'left',
                              minWidth: 0,
                              maxWidth: 140,
                              style: {
                                colors: varToColor('--chart-colors-yaxis-labels'),
                                fontSize: '13px',
                                fontFamily: cssVarToValue('--font-sans'),
                                fontWeight: 400
                              },
                              formatter: (value) => value >= 1000 ? `${value / 1000}k` : value
                            }
                          },
                          tooltip: {
                            custom: function (props) {
                              const { categories } = props.ctx.opts.xaxis;
                              const { dataPointIndex } = props;

return buildTooltip(props, {
                                title: categories[dataPointIndex],
                                mode,
                                hasCategory: false,
                                hasTextLabel: true,
                                wrapperExtClasses: 'fevob',
                                labelDivider: ':',
                                labelExtClasses: 'lssxk'
                              });
                            }
                          },
                          states: {
                            hover: {
                              filter: {
                                type: 'darken',
                                value: 0.9
                              }
                            }
                          },
                          responsive: [{
                            breakpoint: 568,
                            options: {
                              chart: {
                                height: 300
                              },
                              plotOptions: {
                                bar: {
                                  columnWidth: '14px'
                                }
                              },
                              stroke: {
                                width: 8
                              },
                              responsive: [{
                                breakpoint: 568,
                                options: {
                                  chart: {
                                    height: 300
                                  },
                                  plotOptions: {
                                    bar: {
                                      columnWidth: '14px'
                                    }
                                  },
                                  stroke: {
                                    width: 8
                                  },
                                  labels: {
                                    style: {
                                      colors: varToColor('--chart-colors-labels'),
                                      fontSize: '11px',
                                      fontFamily: cssVarToValue('--font-sans'),
                                      fontWeight: 400
                                    },
                                    offsetX: -2,
                                    formatter: (title) => title.slice(0, 3)
                                  },
                                  yaxis: {
                                    labels: {
                                      align: 'left',
                                      minWidth: 0,
                                      maxWidth: 140,
                                      style: {
                                        colors: varToColor('--chart-colors-yaxis-labels'),
                                        fontSize: '11px',
                                        fontFamily: cssVarToValue('--font-sans'),
                                        fontWeight: 400
                                      },
                                      formatter: (value) => value >= 1000 ? `${value / 1000}k` : value
                                    }
                                  },
                                },
                              }]
                            },
                          }]
                        }), () => ({
                          colors: [varToColor('--chart-colors-primary'), varToColor('--chart-colors-chart-3'), varToColor('--chart-colors-chart-10')],
                          grid: {
                            borderColor: varToColor('--chart-colors-grid-border')
                          },
                          xaxis: {
                            labels: {
                              style: {
                                colors: varToColor('--chart-colors-xaxis-labels')
                              }
                            }
                          },
                          yaxis: {
                            labels: {
                              style: {
                                colors: varToColor('--chart-colors-yaxis-labels')
                              }
                            }
                          }
                        }), () => ({
                          colors: [varToColor('--chart-colors-primary-inverse'), varToColor('--chart-colors-chart-3-inverse'), varToColor('--chart-colors-chart-10-inverse')],
                          grid: {
                            borderColor: varToColor('--chart-colors-grid-border-inverse')
                          },
                          xaxis: {
                            labels: {
                              style: {
                                colors: varToColor('--chart-colors-xaxis-labels-inverse'),
                              }
                            }
                          },
                          yaxis: {
                            labels: {
                              style: {
                                colors: varToColor('--chart-colors-yaxis-labels-inverse'),
                              }
                            }
                          }
                        }));
                      })();
                    });
                  </script>
                </body>
              </html>

<div class="uwecq ah5oa">
                
                <div class="apz7p g0lfo flex flex-wrap tv8hq items-center tvmuq n9osc">
                  <h2 class="jywe6 t0mvh">
                    Overview
                  </h2>