Home Explore Help
Sign In
SMusatov
/
tabler
mirror of https://github.com/tabler/tabler.git
1
0
Fork 0
Files
Branch: dev-chat
Branches Tags
tabler
/
demo
/
widgets.html

widgets.html 80 KB
Permalink History Raw

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496 
  1. <!doctype html>
    2. 

  2. <!--
    3. 

  3. * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
    4. 

  4. * @version 1.0.0-beta4
    5. 

  5. * @link https://tabler.io
    6. 

  6. * Copyright 2018-2021 The Tabler Authors
    7. 

  7. * Copyright 2018-2021 codecalm.net Paweł Kuna
    8. 

  8. * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
    9. 

  9. -->
    10. 

  10. <html lang="en">
    11. 

  11.   <head>
    12. 

  12.     <meta charset="utf-8"/>
    13. 

  13.     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
    14. 

  14.     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    15. 

  15.     <title>Widgets - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
    16. 

  16.     <!-- CSS files -->
    17. 

  17.     <link href="./dist/css/tabler.min.css" rel="stylesheet"/>
    18. 

  18.     <link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
    19. 

  19.     <link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
    20. 

  20.     <link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
    21. 

  21.     <link href="./dist/css/demo.min.css" rel="stylesheet"/>
    22. 

  22.   </head>
    23. 

  23.   <body class="antialiased">
    24. 

  24.     <div class="wrapper">
    25. 

  25.       <header class="navbar navbar-expand-md navbar-light d-print-none">
    26. 

  26.         <div class="container-xl">
    27. 

  27.           <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
    28. 

  28.             <span class="navbar-toggler-icon"></span>
    29. 

  29.           </button>
    30. 

  30.           <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
    31. 

  31.             <a href=".">
    32. 

  32.               <img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
    33. 

  33.             </a>
    34. 

  34.           </h1>
    35. 

  35.           <div class="navbar-nav flex-row order-md-last">
    36. 

  36.             <div class="nav-item d-none d-md-flex me-3">
    37. 

  37.               <div class="btn-list">
    38. 

  38.                 <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
    39. 

  39.                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
    40. 

  40.                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
    41. 

  41.                   Source code
    42. 

  42.                 </a>
    43. 

  43.                 <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
    44. 

  44.                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
    45. 

  45.                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
    46. 

  46.                   Sponsor
    47. 

  47.                 </a>
    48. 

  48.               </div>
    49. 

  49.             </div>
    50. 

  50.             <div class="nav-item dropdown d-none d-md-flex me-3">
    51. 

  51.               <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
    52. 

  52.                 <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
    53. 

  53.                 <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
    54. 

  54.                 <span class="badge bg-red"></span>
    55. 

  55.               </a>
    56. 

  56.               <div class="dropdown-menu dropdown-menu-end dropdown-menu-card">
    57. 

  57.                 <div class="card">
    58. 

  58.                   <div class="card-body">
    59. 

  59.                     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
    60. 

  60.                   </div>
    61. 

  61.                 </div>
    62. 

  62.               </div>
    63. 

  63.             </div>
    64. 

  64.             <div class="nav-item dropdown">
    65. 

  65.               <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
    66. 

  66.                 <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
    67. 

  67.                 <div class="d-none d-xl-block ps-2">
    68. 

  68.                   <div>Paweł Kuna</div>
    69. 

  69.                   <div class="mt-1 small text-muted">UI Designer</div>
    70. 

  70.                 </div>
    71. 

  71.               </a>
    72. 

  72.               <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
    73. 

  73.                 <a href="#" class="dropdown-item">Set status</a>
    74. 

  74.                 <a href="#" class="dropdown-item">Profile & account</a>
    75. 

  75.                 <a href="#" class="dropdown-item">Feedback</a>
    76. 

  76.                 <div class="dropdown-divider"></div>
    77. 

  77.                 <a href="#" class="dropdown-item">Settings</a>
    78. 

  78.                 <a href="#" class="dropdown-item">Logout</a>
    79. 

  79.               </div>
    80. 

  80.             </div>
    81. 

  81.           </div>
    82. 

  82.         </div>
    83. 

  83.       </header>
    84. 

  84.       <div class="navbar-expand-md">
    85. 

  85.         <div class="collapse navbar-collapse" id="navbar-menu">
    86. 

  86.           <div class="navbar navbar-light">
    87. 

  87.             <div class="container-xl">
    88. 

  88.               <ul class="navbar-nav">
    89. 

  89.                 <li class="nav-item">
    90. 

  90.                   <a class="nav-link" href="./index.html" >
    91. 

  91.                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
    92. 

  92.                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
    93. 

  93.                     </span>
    94. 

  94.                     <span class="nav-link-title">
    95. 

  95.                       Home
    96. 

  96.                     </span>
    97. 

  97.                   </a>
    98. 

  98.                 </li>
    99. 

  99.                 <li class="nav-item dropdown">
    100. 

  100.                   <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
    101. 

  101.                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/package -->
    102. 

  102.                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
    103. 

  103.                     </span>
    104. 

  104.                     <span class="nav-link-title">
    105. 

  105.                       Interface
    106. 

  106.                     </span>
    107. 

  107.                   </a>
    108. 

  108.                   <div class="dropdown-menu">
    109. 

  109.                     <div class="dropdown-menu-columns">
    110. 

  110.                       <div class="dropdown-menu-column">
    111. 

  111.                         <a class="dropdown-item" href="./empty.html" >
    112. 

  112.                           Empty page
    113. 

  113.                         </a>
    114. 

  114.                         <a class="dropdown-item" href="./accordion.html" >
    115. 

  115.                           Accordion
    116. 

  116.                         </a>
    117. 

  117.                         <a class="dropdown-item" href="./blank.html" >
    118. 

  118.                           Blank page
    119. 

  119.                         </a>
    120. 

  120.                         <a class="dropdown-item" href="./buttons.html" >
    121. 

  121.                           Buttons
    122. 

  122.                         </a>
    123. 

  123.                         <a class="dropdown-item" href="./cards.html" >
    124. 

  124.                           Cards
    125. 

  125.                         </a>
    126. 

  126.                         <a class="dropdown-item" href="./cards-masonry.html" >
    127. 

  127.                           Cards Masonry
    128. 

  128.                         </a>
    129. 

  129.                         <a class="dropdown-item" href="./colors.html" >
    130. 

  130.                           Colors
    131. 

  131.                         </a>
    132. 

  132.                         <a class="dropdown-item" href="./dropdowns.html" >
    133. 

  133.                           Dropdowns
    134. 

  134.                         </a>
    135. 

  135.                         <a class="dropdown-item" href="./icons.html" >
    136. 

  136.                           Icons
    137. 

  137.                         </a>
    138. 

  138.                         <a class="dropdown-item" href="./modals.html" >
    139. 

  139.                           Modals
    140. 

  140.                         </a>
    141. 

  141.                         <a class="dropdown-item" href="./maps.html" >
    142. 

  142.                           Maps
    143. 

  143.                         </a>
    144. 

  144.                         <a class="dropdown-item" href="./map-fullsize.html" >
    145. 

  145.                           Map fullsize
    146. 

  146.                         </a>
    147. 

  147.                         <a class="dropdown-item" href="./maps-vector.html" >
    148. 

  148.                           Vector maps
    149. 

  149.                         </a>
    150. 

  150.                       </div>
    151. 

  151.                       <div class="dropdown-menu-column">
    152. 

  152.                         <a class="dropdown-item" href="./navigation.html" >
    153. 

  153.                           Navigation
    154. 

  154.                         </a>
    155. 

  155.                         <a class="dropdown-item" href="./charts.html" >
    156. 

  156.                           Charts
    157. 

  157.                         </a>
    158. 

  158.                         <a class="dropdown-item" href="./pagination.html" >
    159. 

  159.                           Pagination
    160. 

  160.                         </a>
    161. 

  161.                         <a class="dropdown-item" href="./skeleton.html" >
    162. 

  162.                           Skeleton
    163. 

  163.                         </a>
    164. 

  164.                         <a class="dropdown-item" href="./tabs.html" >
    165. 

  165.                           Tabs
    166. 

  166.                         </a>
    167. 

  167.                         <a class="dropdown-item" href="./tables.html" >
    168. 

  168.                           Tables
    169. 

  169.                         </a>
    170. 

  170.                         <a class="dropdown-item" href="./carousel.html" >
    171. 

  171.                           Carousel
    172. 

  172.                         </a>
    173. 

  173.                         <a class="dropdown-item" href="./lists.html" >
    174. 

  174.                           Lists
    175. 

  175.                         </a>
    176. 

  176.                         <a class="dropdown-item" href="./typography.html" >
    177. 

  177.                           Typography
    178. 

  178.                         </a>
    179. 

  179.                         <a class="dropdown-item" href="./offcanvas.html" >
    180. 

  180.                           Offcanvas
    181. 

  181.                         </a>
    182. 

  182.                         <a class="dropdown-item" href="./markdown.html" >
    183. 

  183.                           Markdown
    184. 

  184.                         </a>
    185. 

  185.                         <div class="dropend">
    186. 

  186.                           <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
    187. 

  187.                             Authentication
    188. 

  188.                           </a>
    189. 

  189.                           <div class="dropdown-menu">
    190. 

  190.                             <a href="./sign-in.html" class="dropdown-item">Sign in</a>
    191. 

  191.                             <a href="./sign-up.html" class="dropdown-item">Sign up</a>
    192. 

  192.                             <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
    193. 

  193.                             <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
    194. 

  194.                             <a href="./auth-lock.html" class="dropdown-item">Lock screen</a>
    195. 

  195.                           </div>
    196. 

  196.                         </div>
    197. 

  197.                         <div class="dropend">
    198. 

  198.                           <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
    199. 

  199.                             Error pages
    200. 

  200.                           </a>
    201. 

  201.                           <div class="dropdown-menu">
    202. 

  202.                             <a href="./error-404.html" class="dropdown-item">404 page</a>
    203. 

  203.                             <a href="./error-500.html" class="dropdown-item">500 page</a>
    204. 

  204.                             <a href="./error-maintenance.html" class="dropdown-item">Maintenance page</a>
    205. 

  205.                           </div>
    206. 

  206.                         </div>
    207. 

  207.                       </div>
    208. 

  208.                     </div>
    209. 

  209.                   </div>
    210. 

  210.                 </li>
    211. 

  211.                 <li class="nav-item">
    212. 

  212.                   <a class="nav-link" href="./form-elements.html" >
    213. 

  213.                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/checkbox -->
    214. 

  214.                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
    215. 

  215.                     </span>
    216. 

  216.                     <span class="nav-link-title">
    217. 

  217.                       Form elements
    218. 

  218.                     </span>
    219. 

  219.                   </a>
    220. 

  220.                 </li>
    221. 

  221.                 <li class="nav-item active dropdown">
    222. 

  222.                   <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
    223. 

  223.                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/star -->
    224. 

  224.                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
    225. 

  225.                     </span>
    226. 

  226.                     <span class="nav-link-title">
    227. 

  227.                       Extra
    228. 

  228.                     </span>
    229. 

  229.                   </a>
    230. 

  230.                   <div class="dropdown-menu">
    231. 

  231.                     <a class="dropdown-item" href="./activity.html" >
    232. 

  232.                       Activity
    233. 

  233.                     </a>
    234. 

  234.                     <a class="dropdown-item" href="./gallery.html" >
    235. 

  235.                       Gallery
    236. 

  236.                     </a>
    237. 

  237.                     <a class="dropdown-item" href="./invoice.html" >
    238. 

  238.                       Invoice
    239. 

  239.                     </a>
    240. 

  240.                     <a class="dropdown-item" href="./search-results.html" >
    241. 

  241.                       Search results
    242. 

  242.                     </a>
    243. 

  243.                     <a class="dropdown-item" href="./pricing.html" >
    244. 

  244.                       Pricing cards
    245. 

  245.                     </a>
    246. 

  246.                     <a class="dropdown-item" href="./users.html" >
    247. 

  247.                       Users
    248. 

  248.                     </a>
    249. 

  249.                     <a class="dropdown-item" href="./license.html" >
    250. 

  250.                       License
    251. 

  251.                     </a>
    252. 

  252.                     <a class="dropdown-item" href="./music.html" >
    253. 

  253.                       Music
    254. 

  254.                     </a>
    255. 

  255.                     <a class="dropdown-item active" href="./widgets.html" >
    256. 

  256.                       Widgets
    257. 

  257.                     </a>
    258. 

  258.                     <a class="dropdown-item" href="./wizard.html" >
    259. 

  259.                       Wizard
    260. 

  260.                     </a>
    261. 

  261.                   </div>
    262. 

  262.                 </li>
    263. 

  263.                 <li class="nav-item dropdown">
    264. 

  264.                   <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
    265. 

  265.                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/layout-2 -->
    266. 

  266.                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
    267. 

  267.                     </span>
    268. 

  268.                     <span class="nav-link-title">
    269. 

  269.                       Layout
    270. 

  270.                     </span>
    271. 

  271.                   </a>
    272. 

  272.                   <div class="dropdown-menu">
    273. 

  273.                     <div class="dropdown-menu-columns">
    274. 

  274.                       <div class="dropdown-menu-column">
    275. 

  275.                         <a class="dropdown-item" href="./layout-horizontal.html" >
    276. 

  276.                           Horizontal
    277. 

  277.                         </a>
    278. 

  278.                         <a class="dropdown-item" href="./layout-vertical.html" >
    279. 

  279.                           Vertical
    280. 

  280.                         </a>
    281. 

  281.                         <a class="dropdown-item" href="./layout-vertical-transparent.html" >
    282. 

  282.                           Vertical transparent
    283. 

  283.                         </a>
    284. 

  284.                         <a class="dropdown-item" href="./layout-vertical-right.html" >
    285. 

  285.                           Right vertical
    286. 

  286.                         </a>
    287. 

  287.                         <a class="dropdown-item" href="./layout-condensed.html" >
    288. 

  288.                           Condensed
    289. 

  289.                         </a>
    290. 

  290.                         <a class="dropdown-item" href="./layout-condensed-dark.html" >
    291. 

  291.                           Condensed dark
    292. 

  292.                         </a>
    293. 

  293.                         <a class="dropdown-item" href="./layout-combo.html" >
    294. 

  294.                           Combined
    295. 

  295.                         </a>
    296. 

  296.                       </div>
    297. 

  297.                       <div class="dropdown-menu-column">
    298. 

  298.                         <a class="dropdown-item" href="./layout-navbar-dark.html" >
    299. 

  299.                           Navbar dark
    300. 

  300.                         </a>
    301. 

  301.                         <a class="dropdown-item" href="./layout-navbar-sticky.html" >
    302. 

  302.                           Navbar sticky
    303. 

  303.                         </a>
    304. 

  304.                         <a class="dropdown-item" href="./layout-navbar-overlap.html" >
    305. 

  305.                           Navbar overlap
    306. 

  306.                         </a>
    307. 

  307.                         <a class="dropdown-item" href="./layout-dark.html" >
    308. 

  308.                           Dark mode
    309. 

  309.                         </a>
    310. 

  310.                         <a class="dropdown-item" href="./layout-rtl.html" >
    311. 

  311.                           RTL mode
    312. 

  312.                         </a>
    313. 

  313.                         <a class="dropdown-item" href="./layout-fluid.html" >
    314. 

  314.                           Fluid
    315. 

  315.                         </a>
    316. 

  316.                         <a class="dropdown-item" href="./layout-fluid-vertical.html" >
    317. 

  317.                           Fluid vertical
    318. 

  318.                         </a>
    319. 

  319.                       </div>
    320. 

  320.                     </div>
    321. 

  321.                   </div>
    322. 

  322.                 </li>
    323. 

  323.                 <li class="nav-item">
    324. 

  324.                   <a class="nav-link" href="./docs/index.html" >
    325. 

  325.                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/file-text -->
    326. 

  326.                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
    327. 

  327.                     </span>
    328. 

  328.                     <span class="nav-link-title">
    329. 

  329.                       Documentation
    330. 

  330.                     </span>
    331. 

  331.                   </a>
    332. 

  332.                 </li>
    333. 

  333.               </ul>
    334. 

  334.               <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
    335. 

  335.                 <form action="." method="get">
    336. 

  336.                   <div class="input-icon">
    337. 

  337.                     <span class="input-icon-addon">
    338. 

  338.                       <!-- Download SVG icon from http://tabler-icons.io/i/search -->
    339. 

  339.                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
    340. 

  340.                     </span>
    341. 

  341.                     <input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
    342. 

  342.                   </div>
    343. 

  343.                 </form>
    344. 

  344.               </div>
    345. 

  345.             </div>
    346. 

  346.           </div>
    347. 

  347.         </div>
    348. 

  348.       </div>
    349. 

  349.       <div class="page-wrapper">
    350. 

  350.         <div class="container-xl">
    351. 

  351.           <!-- Page title -->
    352. 

  352.           <div class="page-header d-print-none">
    353. 

  353.             <div class="row align-items-center">
    354. 

  354.               <div class="col">
    355. 

  355.                 <h2 class="page-title">
    356. 

  356.                   Widgets
    357. 

  357.                 </h2>
    358. 

  358.               </div>
    359. 

  359.             </div>
    360. 

  360.           </div>
    361. 

  361.         </div>
    362. 

  362.         <div class="page-body">
    363. 

  363.           <div class="container-xl">
    364. 

  364.             <div class="row row-cards">
    365. 

  365.               <div class="col-lg-6">
    366. 

  366.                 <div class="card">
    367. 

  367.                   <div class="card-body">
    368. 

  368.                     <div class="row align-items-center">
    369. 

  369.                       <div class="col-3">
    370. 

  370.                         <img src="https://cdn.dribbble.com/users/844826/screenshots/14553706/media/2be9a4847b939e02702648d058cf2df8.png" alt="Food Deliver UI dashboards" class="rounded">
    371. 

  371.                       </div>
    372. 

  372.                       <div class="col">
    373. 

  373.                         <h3 class="card-title mb-1">
    374. 

  374.                           <a href="project-overview.html" class="text-reset">Food Deliver UI dashboards</a>
    375. 

  375.                         </h3>
    376. 

  376.                         <div class="text-muted">
    377. 

  377.                           Updated 2 hours ago
    378. 

  378.                         </div>
    379. 

  379.                         <div class="mt-3">
    380. 

  380.                           <div class="row g-2 align-items-center">
    381. 

  381.                             <div class="col-auto">
    382. 

  382.                               25%
    383. 

  383.                             </div>
    384. 

  384.                             <div class="col">
    385. 

  385.                               <div class="progress progress-sm">
    386. 

  386.                                 <div class="progress-bar" style="width: 25%" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
    387. 

  387.                                   <span class="visually-hidden">25% Complete</span>
    388. 

  388.                                 </div>
    389. 

  389.                               </div>
    390. 

  390.                             </div>
    391. 

  391.                           </div>
    392. 

  392.                         </div>
    393. 

  393.                       </div>
    394. 

  394.                       <div class="col-auto">
    395. 

  395.                         <div class="dropdown">
    396. 

  396.                           <a href="#" class="card-dropdown" data-bs-toggle="dropdown" aria-expanded="false">
    397. 

  397.                             <!-- Download SVG icon from http://tabler-icons.io/i/dots-vertical -->
    398. 

  398.                             <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="1" /><circle cx="12" cy="19" r="1" /><circle cx="12" cy="5" r="1" /></svg>
    399. 

  399.                           </a>
    400. 

  400.                           <div class="dropdown-menu dropdown-menu-end">
    401. 

  401.                             <a href="#" class="dropdown-item">Import</a>
    402. 

  402.                             <a href="#" class="dropdown-item">Export</a>
    403. 

  403.                             <a href="#" class="dropdown-item">Download</a>
    404. 

  404.                             <a href="#" class="dropdown-item">Another action</a>
    405. 

  405.                           </div>
    406. 

  406.                         </div>
    407. 

  407.                       </div>
    408. 

  408.                     </div>
    409. 

  409.                   </div>
    410. 

  410.                 </div>
    411. 

  411.               </div>
    412. 

  412.               <div class="col-lg-6">
    413. 

  413.                 <div class="card">
    414. 

  414.                   <div class="card-body">
    415. 

  415.                     <div class="row align-items-center">
    416. 

  416.                       <div class="col-3">
    417. 

  417.                         <img src="https://cdn.dribbble.com/users/844826/screenshots/14547977/media/e7749bd1b09d9415b8dc265a7dbe81f6.png" alt="Projects Dashboards" class="rounded">
    418. 

  418.                       </div>
    419. 

  419.                       <div class="col">
    420. 

  420.                         <h3 class="card-title mb-1">
    421. 

  421.                           <a href="project-overview.html" class="text-reset">Projects Dashboards</a>
    422. 

  422.                         </h3>
    423. 

  423.                         <div class="text-muted">
    424. 

  424.                           Updated 2 hours ago
    425. 

  425.                         </div>
    426. 

  426.                         <div class="mt-3">
    427. 

  427.                           <div class="row g-2 align-items-center">
    428. 

  428.                             <div class="col-auto">
    429. 

  429.                               76%
    430. 

  430.                             </div>
    431. 

  431.                             <div class="col">
    432. 

  432.                               <div class="progress progress-sm">
    433. 

  433.                                 <div class="progress-bar" style="width: 76%" role="progressbar" aria-valuenow="76" aria-valuemin="0" aria-valuemax="100">
    434. 

  434.                                   <span class="visually-hidden">76% Complete</span>
    435. 

  435.                                 </div>
    436. 

  436.                               </div>
    437. 

  437.                             </div>
    438. 

  438.                           </div>
    439. 

  439.                         </div>
    440. 

  440.                       </div>
    441. 

  441.                       <div class="col-auto">
    442. 

  442.                         <div class="dropdown">
    443. 

  443.                           <a href="#" class="card-dropdown" data-bs-toggle="dropdown" aria-expanded="false">
    444. 

  444.                             <!-- Download SVG icon from http://tabler-icons.io/i/dots-vertical -->
    445. 

  445.                             <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="1" /><circle cx="12" cy="19" r="1" /><circle cx="12" cy="5" r="1" /></svg>
    446. 

  446.                           </a>
    447. 

  447.                           <div class="dropdown-menu dropdown-menu-end">
    448. 

  448.                             <a href="#" class="dropdown-item">Import</a>
    449. 

  449.                             <a href="#" class="dropdown-item">Export</a>
    450. 

  450.                             <a href="#" class="dropdown-item">Download</a>
    451. 

  451.                             <a href="#" class="dropdown-item">Another action</a>
    452. 

  452.                           </div>
    453. 

  453.                         </div>
    454. 

  454.                       </div>
    455. 

  455.                     </div>
    456. 

  456.                   </div>
    457. 

  457.                 </div>
    458. 

  458.               </div>
    459. 

  459.               <div class="col-md-6 col-xl-3">
    460. 

  460.                 <a class="card card-link" href="#">
    461. 

  461.                   <div class="card-body">
    462. 

  462.                     <div class="row">
    463. 

  463.                       <div class="col-auto">
    464. 

  464.                         <span class="avatar rounded" style="background-image: url(./static/avatars/001f.jpg)"></span>
    465. 

  465.                       </div>
    466. 

  466.                       <div class="col">
    467. 

  467.                         <div class="font-weight-medium">Maryjo Lebarree</div>
    468. 

  468.                         <div class="text-muted">Civil Engineer</div>
    469. 

  469.                       </div>
    470. 

  470.                     </div>
    471. 

  471.                   </div>
    472. 

  472.                 </a>
    473. 

  473.               </div>
    474. 

  474.               <div class="col-md-6 col-xl-3">
    475. 

  475.                 <a class="card card-link" href="#">
    476. 

  476.                   <div class="card-body">
    477. 

  477.                     <div class="row">
    478. 

  478.                       <div class="col-auto">
    479. 

  479.                         <span class="avatar rounded">EP</span>
    480. 

  480.                       </div>
    481. 

  481.                       <div class="col">
    482. 

  482.                         <div class="font-weight-medium">Egan Poetz</div>
    483. 

  483.                         <div class="text-muted">Research Nurse</div>
    484. 

  484.                       </div>
    485. 

  485.                     </div>
    486. 

  486.                   </div>
    487. 

  487.                 </a>
    488. 

  488.               </div>
    489. 

  489.               <div class="col-md-6 col-xl-3">
    490. 

  490.                 <a class="card card-link" href="#">
    491. 

  491.                   <div class="card-body">
    492. 

  492.                     <div class="row">
    493. 

  493.                       <div class="col">
    494. 

  494.                         <div class="font-weight-medium">Kellie Skingley</div>
    495. 

  495.                         <div class="text-muted">Teacher</div>
    496. 

  496.                       </div>
    497. 

  497.                       <div class="col-auto">
    498. 

  498.                         <span class="avatar rounded" style="background-image: url(./static/avatars/002f.jpg)"></span>
    499. 

  499.                       </div>
    500. 

  500.                     </div>
    501. 

  501.                   </div>
    502. 

  502.                 </a>
    503. 

  503.               </div>
    504. 

  504.               <div class="col-md-6 col-xl-3">
    505. 

  505.                 <a class="card card-link" href="#">
    506. 

  506.                   <div class="card-body">
    507. 

  507.                     <div class="row">
    508. 

  508.                       <div class="col">
    509. 

  509.                         <div class="font-weight-medium">Christabel Charlwood</div>
    510. 

  510.                         <div class="text-muted">Tax Accountant</div>
    511. 

  511.                       </div>
    512. 

  512.                       <div class="col-auto">
    513. 

  513.                         <span class="avatar rounded" style="background-image: url(./static/avatars/003f.jpg)"></span>
    514. 

  514.                       </div>
    515. 

  515.                     </div>
    516. 

  516.                   </div>
    517. 

  517.                 </a>
    518. 

  518.               </div>
    519. 

  519.               <div class="col-md-6 col-xl-3">
    520. 

  520.                 <div class="card">
    521. 

  521.                   <div class="card-body text-center">
    522. 

  522.                     <div class="mb-3">
    523. 

  523.                       <span class="avatar avatar-xl avatar-rounded" style="background-image: url(./static/avatars/010m.jpg)"></span>
    524. 

  524.                     </div>
    525. 

  525.                     <div class="card-title mb-1">Thatcher Keel</div>
    526. 

  526.                     <div class="text-muted">VP Sales</div>
    527. 

  527.                   </div>
    528. 

  528.                   <a href="#" class="card-btn">View full profile</a>
    529. 

  529.                 </div>
    530. 

  530.               </div>
    531. 

  531.               <div class="col-md-6 col-xl-3">
    532. 

  532.                 <div class="card">
    533. 

  533.                   <div class="card-body text-center">
    534. 

  534.                     <div class="mb-3">
    535. 

  535.                       <span class="avatar avatar-xl avatar-rounded" style="background-image: url(./static/avatars/005f.jpg)"></span>
    536. 

  536.                     </div>
    537. 

  537.                     <div class="card-title mb-1">Dyann Escala</div>
    538. 

  538.                     <div class="text-muted">Mechanical Systems Engineer</div>
    539. 

  539.                   </div>
    540. 

  540.                   <a href="#" class="card-btn">View full profile</a>
    541. 

  541.                 </div>
    542. 

  542.               </div>
    543. 

  543.               <div class="col-md-6 col-xl-3">
    544. 

  544.                 <div class="card">
    545. 

  545.                   <div class="card-body text-center">
    546. 

  546.                     <div class="mb-3">
    547. 

  547.                       <span class="avatar avatar-xl avatar-rounded" style="background-image: url(./static/avatars/006f.jpg)"></span>
    548. 

  548.                     </div>
    549. 

  549.                     <div class="card-title mb-1">Avivah Mugleston</div>
    550. 

  550.                     <div class="text-muted">Actuary</div>
    551. 

  551.                   </div>
    552. 

  552.                   <a href="#" class="card-btn">View full profile</a>
    553. 

  553.                 </div>
    554. 

  554.               </div>
    555. 

  555.               <div class="col-md-6 col-xl-3">
    556. 

  556.                 <div class="card">
    557. 

  557.                   <div class="card-body text-center">
    558. 

  558.                     <div class="mb-3">
    559. 

  559.                       <span class="avatar avatar-xl avatar-rounded">AA</span>
    560. 

  560.                     </div>
    561. 

  561.                     <div class="card-title mb-1">Arlie Armstead</div>
    562. 

  562.                     <div class="text-muted">VP Quality Control</div>
    563. 

  563.                   </div>
    564. 

  564.                   <a href="#" class="card-btn">View full profile</a>
    565. 

  565.                 </div>
    566. 

  566.               </div>
    567. 

  567.               <div class="col-md-6 col-xl-3">
    568. 

  568.                 <a class="card card-link" href="#">
    569. 

  569.                   <div class="card-cover card-cover-blurred text-center" style="background-image: url(./static/photos/2854fd67ddbd6217.jpg
    570. 

  570. )">
    571. 

  571.                     <span class="avatar avatar-xl avatar-thumb avatar-rounded" style="background-image: url(./static/avatars/012f.jpg)"></span>
    572. 

  572.                   </div>
    573. 

  573.                   <div class="card-body text-center">
    574. 

  574.                     <div class="card-title mb-1">Marsha Labat</div>
    575. 

  575.                     <div class="text-muted">Research Associate</div>
    576. 

  576.                   </div>
    577. 

  577.                 </a>
    578. 

  578.               </div>
    579. 

  579.               <div class="col-md-6 col-xl-3">
    580. 

  580.                 <a class="card card-link" href="#">
    581. 

  581.                   <div class="card-cover card-cover-blurred text-center" style="background-image: url(./static/photos/5358d787242861c4.jpg
    582. 

  582. )">
    583. 

  583.                     <span class="avatar avatar-xl avatar-thumb avatar-rounded" style="background-image: url(./static/avatars/013m.jpg)"></span>
    584. 

  584.                   </div>
    585. 

  585.                   <div class="card-body text-center">
    586. 

  586.                     <div class="card-title mb-1">Elston Muffett</div>
    587. 

  587.                     <div class="text-muted">Account Coordinator</div>
    588. 

  588.                   </div>
    589. 

  589.                 </a>
    590. 

  590.               </div>
    591. 

  591.               <div class="col-md-6 col-xl-3">
    592. 

  592.                 <a class="card card-link" href="#">
    593. 

  593.                   <div class="card-cover card-cover-blurred text-center card-cover-blurred" style="background-image: url(./static/photos/5614ec7eb9034d04.jpg
    594. 

  594. )">
    595. 

  595.                     <span class="avatar avatar-xl avatar-thumb avatar-rounded" style="background-image: url(./static/avatars/013f.jpg)"></span>
    596. 

  596.                   </div>
    597. 

  597.                   <div class="card-body text-center">
    598. 

  598.                     <div class="card-title mb-1">Leigha Gorce</div>
    599. 

  599.                     <div class="text-muted">Geologist II</div>
    600. 

  600.                   </div>
    601. 

  601.                 </a>
    602. 

  602.               </div>
    603. 

  603.               <div class="col-md-6 col-xl-3">
    604. 

  604.                 <a class="card card-link" href="#">
    605. 

  605.                   <div class="card-cover card-cover-blurred text-center card-cover-blurred" style="background-image: url(./static/photos/5749e5c54a61a45e.jpg
    606. 

  606. )">
    607. 

  607.                     <span class="avatar avatar-xl avatar-thumb avatar-rounded">TB</span>
    608. 

  608.                   </div>
    609. 

  609.                   <div class="card-body text-center">
    610. 

  610.                     <div class="card-title mb-1">Tallie Bettis</div>
    611. 

  611.                     <div class="text-muted">Director of Sales</div>
    612. 

  612.                   </div>
    613. 

  613.                 </a>
    614. 

  614.               </div>
    615. 

  615.               <div class="col-md-6">
    616. 

  616.                 <div class="card">
    617. 

  617.                   <div class="card-body">
    618. 

  618.                     <div class="row g-2 align-items-center">
    619. 

  619.                       <div class="col-auto">
    620. 

  620.                         <span class="avatar avatar-lg" style="background-image: url(./static/avatars/000m.jpg)"></span>
    621. 

  621.                       </div>
    622. 

  622.                       <div class="col">
    623. 

  623.                         <h4 class="card-title m-0">
    624. 

  624.                           <a href="#">Paweł Kuna</a>
    625. 

  625.                         </h4>
    626. 

  626.                         <div class="text-muted">
    627. 

  627.                           Working in Tabler
    628. 

  628.                         </div>
    629. 

  629.                         <div class="small mt-1">
    630. 

  630.                           <span class="badge bg-green"></span> Online
    631. 

  631.                         </div>
    632. 

  632.                       </div>
    633. 

  633.                       <div class="col-auto">
    634. 

  634.                         <a href="#" class="btn">
    635. 

  635.                           Subscribe
    636. 

  636.                         </a>
    637. 

  637.                       </div>
    638. 

  638.                       <div class="col-auto">
    639. 

  639.                         <div class="dropdown">
    640. 

  640.                           <a href="#" class="card-dropdown" data-bs-toggle="dropdown" aria-expanded="false">
    641. 

  641.                             <!-- Download SVG icon from http://tabler-icons.io/i/dots-vertical -->
    642. 

  642.                             <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="1" /><circle cx="12" cy="19" r="1" /><circle cx="12" cy="5" r="1" /></svg>
    643. 

  643.                           </a>
    644. 

  644.                           <div class="dropdown-menu dropdown-menu-end">
    645. 

  645.                             <a href="#" class="dropdown-item">Import</a>
    646. 

  646.                             <a href="#" class="dropdown-item">Export</a>
    647. 

  647.                             <a href="#" class="dropdown-item">Download</a>
    648. 

  648.                             <a href="#" class="dropdown-item">Another action</a>
    649. 

  649.                           </div>
    650. 

  650.                         </div>
    651. 

  651.                       </div>
    652. 

  652.                     </div>
    653. 

  653.                   </div>
    654. 

  654.                 </div>
    655. 

  655.               </div>
    656. 

  656.               <div class="col-md-6">
    657. 

  657.                 <div class="card">
    658. 

  658.                   <div class="card-body">
    659. 

  659.                     <div class="row g-2 align-items-center">
    660. 

  660.                       <div class="col-auto">
    661. 

  661.                         <span class="avatar avatar-lg" style="background-image: url(./static/avatars/002m.jpg)"></span>
    662. 

  662.                       </div>
    663. 

  663.                       <div class="col">
    664. 

  664.                         <h4 class="card-title m-0">
    665. 

  665.                           <a href="#">Mallory Hulme</a>
    666. 

  666.                         </h4>
    667. 

  667.                         <div class="text-muted">
    668. 

  668.                           Working in Kare
    669. 

  669.                         </div>
    670. 

  670.                         <div class="small mt-1">
    671. 

  671.                           <span class="badge bg-green"></span> Online
    672. 

  672.                         </div>
    673. 

  673.                       </div>
    674. 

  674.                       <div class="col-auto">
    675. 

  675.                         <a href="#" class="btn">
    676. 

  676.                           Subscribe
    677. 

  677.                         </a>
    678. 

  678.                       </div>
    679. 

  679.                       <div class="col-auto">
    680. 

  680.                         <div class="dropdown">
    681. 

  681.                           <a href="#" class="card-dropdown" data-bs-toggle="dropdown" aria-expanded="false">
    682. 

  682.                             <!-- Download SVG icon from http://tabler-icons.io/i/dots-vertical -->
    683. 

  683.                             <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="1" /><circle cx="12" cy="19" r="1" /><circle cx="12" cy="5" r="1" /></svg>
    684. 

  684.                           </a>
    685. 

  685.                           <div class="dropdown-menu dropdown-menu-end">
    686. 

  686.                             <a href="#" class="dropdown-item">Import</a>
    687. 

  687.                             <a href="#" class="dropdown-item">Export</a>
    688. 

  688.                             <a href="#" class="dropdown-item">Download</a>
    689. 

  689.                             <a href="#" class="dropdown-item">Another action</a>
    690. 

  690.                           </div>
    691. 

  691.                         </div>
    692. 

  692.                       </div>
    693. 

  693.                     </div>
    694. 

  694.                   </div>
    695. 

  695.                 </div>
    696. 

  696.               </div>
    697. 

  697.               <div class="col-md-6 col-xl-3">
    698. 

  698.                 <div class="card card-sm">
    699. 

  699.                   <div class="card-body">
    700. 

  700.                     <div class="row align-items-center">
    701. 

  701.                       <div class="col-auto">
    702. 

  702.                         <span class="bg-blue text-white avatar"><!-- Download SVG icon from http://tabler-icons.io/i/currency-dollar -->
    703. 

  703.                           <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M16.7 8a3 3 0 0 0 -2.7 -2h-4a3 3 0 0 0 0 6h4a3 3 0 0 1 0 6h-4a3 3 0 0 1 -2.7 -2" /><path d="M12 3v3m0 12v3" /></svg>
    704. 

  704.                         </span>
    705. 

  705.                       </div>
    706. 

  706.                       <div class="col">
    707. 

  707.                         <div class="font-weight-medium">
    708. 

  708.                           132 Sales
    709. 

  709.                         </div>
    710. 

  710.                         <div class="text-muted">
    711. 

  711.                           12 waiting payments
    712. 

  712.                         </div>
    713. 

  713.                       </div>
    714. 

  714.                     </div>
    715. 

  715.                   </div>
    716. 

  716.                 </div>
    717. 

  717.               </div>
    718. 

  718.               <div class="col-md-6 col-xl-3">
    719. 

  719.                 <div class="card card-sm">
    720. 

  720.                   <div class="card-body">
    721. 

  721.                     <div class="row align-items-center">
    722. 

  722.                       <div class="col-auto">
    723. 

  723.                         <span class="bg-green text-white avatar"><!-- Download SVG icon from http://tabler-icons.io/i/shopping-cart -->
    724. 

  724.                           <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="6" cy="19" r="2" /><circle cx="17" cy="19" r="2" /><path d="M17 17h-11v-14h-2" /><path d="M6 5l14 1l-1 7h-13" /></svg>
    725. 

  725.                         </span>
    726. 

  726.                       </div>
    727. 

  727.                       <div class="col">
    728. 

  728.                         <div class="font-weight-medium">
    729. 

  729.                           78 Orders
    730. 

  730.                         </div>
    731. 

  731.                         <div class="text-muted">
    732. 

  732.                           32 shipped
    733. 

  733.                         </div>
    734. 

  734.                       </div>
    735. 

  735.                     </div>
    736. 

  736.                   </div>
    737. 

  737.                 </div>
    738. 

  738.               </div>
    739. 

  739.               <div class="col-md-6 col-xl-3">
    740. 

  740.                 <div class="card card-sm">
    741. 

  741.                   <div class="card-body">
    742. 

  742.                     <div class="row align-items-center">
    743. 

  743.                       <div class="col-auto">
    744. 

  744.                         <span class="bg-red text-white avatar"><!-- Download SVG icon from http://tabler-icons.io/i/user -->
    745. 

  745.                           <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="7" r="4" /><path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" /></svg>
    746. 

  746.                         </span>
    747. 

  747.                       </div>
    748. 

  748.                       <div class="col">
    749. 

  749.                         <div class="font-weight-medium">
    750. 

  750.                           1352 Members
    751. 

  751.                         </div>
    752. 

  752.                         <div class="text-muted">
    753. 

  753.                           163 registered today
    754. 

  754.                         </div>
    755. 

  755.                       </div>
    756. 

  756.                     </div>
    757. 

  757.                   </div>
    758. 

  758.                 </div>
    759. 

  759.               </div>
    760. 

  760.               <div class="col-md-6 col-xl-3">
    761. 

  761.                 <div class="card card-sm">
    762. 

  762.                   <div class="card-body">
    763. 

  763.                     <div class="row align-items-center">
    764. 

  764.                       <div class="col-auto">
    765. 

  765.                         <span class="bg-yellow text-white avatar"><!-- Download SVG icon from http://tabler-icons.io/i/message -->
    766. 

  766.                           <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 21v-13a3 3 0 0 1 3 -3h10a3 3 0 0 1 3 3v6a3 3 0 0 1 -3 3h-9l-4 4" /><line x1="8" y1="9" x2="16" y2="9" /><line x1="8" y1="13" x2="14" y2="13" /></svg>
    767. 

  767.                         </span>
    768. 

  768.                       </div>
    769. 

  769.                       <div class="col">
    770. 

  770.                         <div class="font-weight-medium">
    771. 

  771.                           132 Comments
    772. 

  772.                         </div>
    773. 

  773.                         <div class="text-muted">
    774. 

  774.                           16 waitings
    775. 

  775.                         </div>
    776. 

  776.                       </div>
    777. 

  777.                     </div>
    778. 

  778.                   </div>
    779. 

  779.                 </div>
    780. 

  780.               </div>
    781. 

  781.               <div class="col-md-6 col-xl-3">
    782. 

  782.                 <div class="card card-sm">
    783. 

  783.                   <div class="card-body">
    784. 

  784.                     <div class="row align-items-center">
    785. 

  785.                       <div class="col-auto">
    786. 

  786.                         <div class="chart-sparkline chart-sparkline-square" id="sparkline-sales"></div>
    787. 

  787.                       </div>
    788. 

  788.                       <div class="col">
    789. 

  789.                         <div class="font-weight-medium">
    790. 

  790.                           132 Sales
    791. 

  791.                         </div>
    792. 

  792.                         <div class="text-muted">
    793. 

  793.                           12 waiting payments
    794. 

  794.                         </div>
    795. 

  795.                       </div>
    796. 

  796.                     </div>
    797. 

  797.                   </div>
    798. 

  798.                 </div>
    799. 

  799.               </div>
    800. 

  800.               <div class="col-md-6 col-xl-3">
    801. 

  801.                 <div class="card card-sm">
    802. 

  802.                   <div class="card-body">
    803. 

  803.                     <div class="row align-items-center">
    804. 

  804.                       <div class="col-auto">
    805. 

  805.                         <div class="chart-sparkline chart-sparkline-square" id="sparkline-orders"></div>
    806. 

  806.                       </div>
    807. 

  807.                       <div class="col">
    808. 

  808.                         <div class="font-weight-medium">
    809. 

  809.                           78 Orders
    810. 

  810.                         </div>
    811. 

  811.                         <div class="text-muted">
    812. 

  812.                           32 shipped
    813. 

  813.                         </div>
    814. 

  814.                       </div>
    815. 

  815.                     </div>
    816. 

  816.                   </div>
    817. 

  817.                 </div>
    818. 

  818.               </div>
    819. 

  819.               <div class="col-md-6 col-xl-3">
    820. 

  820.                 <div class="card card-sm">
    821. 

  821.                   <div class="card-body">
    822. 

  822.                     <div class="row align-items-center">
    823. 

  823.                       <div class="col-auto">
    824. 

  824.                         <div class="chart-sparkline chart-sparkline-square" id="sparkline-members"></div>
    825. 

  825.                       </div>
    826. 

  826.                       <div class="col">
    827. 

  827.                         <div class="font-weight-medium">
    828. 

  828.                           1352 Members
    829. 

  829.                         </div>
    830. 

  830.                         <div class="text-muted">
    831. 

  831.                           163 registered today
    832. 

  832.                         </div>
    833. 

  833.                       </div>
    834. 

  834.                     </div>
    835. 

  835.                   </div>
    836. 

  836.                 </div>
    837. 

  837.               </div>
    838. 

  838.               <div class="col-md-6 col-xl-3">
    839. 

  839.                 <div class="card card-sm">
    840. 

  840.                   <div class="card-body">
    841. 

  841.                     <div class="row align-items-center">
    842. 

  842.                       <div class="col-auto">
    843. 

  843.                         <div class="chart-sparkline chart-sparkline-square" id="sparkline-comments"></div>
    844. 

  844.                       </div>
    845. 

  845.                       <div class="col">
    846. 

  846.                         <div class="font-weight-medium">
    847. 

  847.                           132 Comments
    848. 

  848.                         </div>
    849. 

  849.                         <div class="text-muted">
    850. 

  850.                           16 waitings
    851. 

  851.                         </div>
    852. 

  852.                       </div>
    853. 

  853.                     </div>
    854. 

  854.                   </div>
    855. 

  855.                 </div>
    856. 

  856.               </div>
    857. 

  857.               <div class="col-md-6 col-xl-3">
    858. 

  858.                 <div class="card card-sm">
    859. 

  859.                   <div class="card-body">
    860. 

  860.                     <div class="row align-items-center">
    861. 

  861.                       <div class="col-auto">
    862. 

  862.                         <span class="bg-green-lt avatar"><!-- Download SVG icon from http://tabler-icons.io/i/arrow-up -->
    863. 

  863.                           <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="18" y1="11" x2="12" y2="5" /><line x1="6" y1="11" x2="12" y2="5" /></svg>
    864. 

  864.                         </span>
    865. 

  865.                       </div>
    866. 

  866.                       <div class="col">
    867. 

  867.                         <div class="font-weight-medium">
    868. 

  868.                           $5,256.99
    869. 

  869.                           <span class="float-right font-weight-medium text-green">+4%</span>
    870. 

  870.                         </div>
    871. 

  871.                         <div class="text-muted">
    872. 

  872.                           Revenue last 30 days
    873. 

  873.                         </div>
    874. 

  874.                       </div>
    875. 

  875.                     </div>
    876. 

  876.                   </div>
    877. 

  877.                 </div>
    878. 

  878.               </div>
    879. 

  879.               <div class="col-md-6 col-xl-3">
    880. 

  880.                 <div class="card card-sm">
    881. 

  881.                   <div class="card-body">
    882. 

  882.                     <div class="row align-items-center">
    883. 

  883.                       <div class="col-auto">
    884. 

  884.                         <span class="bg-red-lt avatar"><!-- Download SVG icon from http://tabler-icons.io/i/arrow-down -->
    885. 

  885.                           <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="18" y1="13" x2="12" y2="19" /><line x1="6" y1="13" x2="12" y2="19" /></svg>
    886. 

  886.                         </span>
    887. 

  887.                       </div>
    888. 

  888.                       <div class="col">
    889. 

  889.                         <div class="font-weight-medium">
    890. 

  890.                           342
    891. 

  891.                           <span class="float-right font-weight-medium text-red">-4.3%</span>
    892. 

  892.                         </div>
    893. 

  893.                         <div class="text-muted">
    894. 

  894.                           Sales last 30 days
    895. 

  895.                         </div>
    896. 

  896.                       </div>
    897. 

  897.                     </div>
    898. 

  898.                   </div>
    899. 

  899.                 </div>
    900. 

  900.               </div>
    901. 

  901.               <div class="col-md-6 col-xl-3">
    902. 

  902.                 <div class="card card-sm">
    903. 

  903.                   <div class="card-body">
    904. 

  904.                     <div class="row align-items-center">
    905. 

  905.                       <div class="col-auto">
    906. 

  906.                         <span class="bg-green-lt avatar"><!-- Download SVG icon from http://tabler-icons.io/i/arrow-up -->
    907. 

  907.                           <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="18" y1="11" x2="12" y2="5" /><line x1="6" y1="11" x2="12" y2="5" /></svg>
    908. 

  908.                         </span>
    909. 

  909.                       </div>
    910. 

  910.                       <div class="col">
    911. 

  911.                         <div class="font-weight-medium">
    912. 

  912.                           132
    913. 

  913.                           <span class="float-right font-weight-medium text-green">+6.8%</span>
    914. 

  914.                         </div>
    915. 

  915.                         <div class="text-muted">
    916. 

  916.                           Customers last 30 days
    917. 

  917.                         </div>
    918. 

  918.                       </div>
    919. 

  919.                     </div>
    920. 

  920.                   </div>
    921. 

  921.                 </div>
    922. 

  922.               </div>
    923. 

  923.               <div class="col-md-6 col-xl-3">
    924. 

  924.                 <div class="card card-sm">
    925. 

  925.                   <div class="card-body">
    926. 

  926.                     <div class="row align-items-center">
    927. 

  927.                       <div class="col-auto">
    928. 

  928.                         <span class="bg-red-lt avatar"><!-- Download SVG icon from http://tabler-icons.io/i/arrow-down -->
    929. 

  929.                           <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="18" y1="13" x2="12" y2="19" /><line x1="6" y1="13" x2="12" y2="19" /></svg>
    930. 

  930.                         </span>
    931. 

  931.                       </div>
    932. 

  932.                       <div class="col">
    933. 

  933.                         <div class="font-weight-medium">
    934. 

  934.                           78
    935. 

  935.                           <span class="float-right font-weight-medium text-red">-2%</span>
    936. 

  936.                         </div>
    937. 

  937.                         <div class="text-muted">
    938. 

  938.                           Members registered today
    939. 

  939.                         </div>
    940. 

  940.                       </div>
    941. 

  941.                     </div>
    942. 

  942.                   </div>
    943. 

  943.                 </div>
    944. 

  944.               </div>
    945. 

  945.               <div class="col-md-6 col-lg-4">
    946. 

  946.                 <div class="row row-cards">
    947. 

  947.                   <div class="col-12">
    948. 

  948.                     <div class="card card-sm">
    949. 

  949.                       <div class="card-body">
    950. 

  950.                         <div class="row align-items-center">
    951. 

  951.                           <div class="col">
    952. 

  952.                             <div class="font-weight-medium">
    953. 

  953.                               1700
    954. 

  954.                             </div>
    955. 

  955.                             <div class="text-muted">
    956. 

  956.                               Users
    957. 

  957.                             </div>
    958. 

  958.                           </div>
    959. 

  959.                           <div class="col-auto">
    960. 

  960.                           </div>
    961. 

  961.                         </div>
    962. 

  962.                       </div>
    963. 

  963.                     </div>
    964. 

  964.                   </div>
    965. 

  965.                   <div class="col-12">
    966. 

  966.                     <div class="card card-sm">
    967. 

  967.                       <div class="card-body">
    968. 

  968.                         <div class="row align-items-center">
    969. 

  969.                           <div class="col-auto">
    970. 

  970.                             <span class="bg-red text-white avatar"><!-- Download SVG icon from http://tabler-icons.io/i/heart -->
    971. 

  971.                               <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
    972. 

  972.                             </span>
    973. 

  973.                           </div>
    974. 

  974.                           <div class="col">
    975. 

  975.                             <div class="font-weight-medium">
    976. 

  976.                               1700
    977. 

  977.                             </div>
    978. 

  978.                             <div class="text-muted">
    979. 

  979.                               Users
    980. 

  980.                             </div>
    981. 

  981.                           </div>
    982. 

  982.                           <div class="col-auto">
    983. 

  983.                           </div>
    984. 

  984.                         </div>
    985. 

  985.                       </div>
    986. 

  986.                     </div>
    987. 

  987.                   </div>
    988. 

  988.                   <div class="col-12">
    989. 

  989.                     <div class="card card-sm">
    990. 

  990.                       <div class="card-body">
    991. 

  991.                         <div class="row align-items-center">
    992. 

  992.                           <div class="col-auto">
    993. 

  993.                             <span class="bg-green text-white avatar"><!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
    994. 

  994.                               <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
    995. 

  995.                             </span>
    996. 

  996.                           </div>
    997. 

  997.                           <div class="col">
    998. 

  998.                             <div class="font-weight-medium">
    999. 

  999.                               1700
    1000. 

  1000.                             </div>
    1001. 

  1001.                             <div class="text-muted">
    1002. 

  1002.                               Users
    1003. 

  1003.                             </div>
    1004. 

  1004.                           </div>
    1005. 

  1005.                           <div class="col-auto">
    1006. 

  1006.                           </div>
    1007. 

  1007.                         </div>
    1008. 

  1008.                       </div>
    1009. 

  1009.                     </div>
    1010. 

  1010.                   </div>
    1011. 

  1011.                   <div class="col-12">
    1012. 

  1012.                     <div class="card card-sm">
    1013. 

  1013.                       <div class="card-body">
    1014. 

  1014.                         <div class="row align-items-center">
    1015. 

  1015.                           <div class="col-auto">
    1016. 

  1016.                             <span class="avatar">HS</span>
    1017. 

  1017.                           </div>
    1018. 

  1018.                           <div class="col">
    1019. 

  1019.                             <div class="font-weight-medium">
    1020. 

  1020.                               1700
    1021. 

  1021.                             </div>
    1022. 

  1022.                             <div class="text-muted">
    1023. 

  1023.                               Users
    1024. 

  1024.                             </div>
    1025. 

  1025.                           </div>
    1026. 

  1026.                           <div class="col-auto">
    1027. 

  1027.                           </div>
    1028. 

  1028.                         </div>
    1029. 

  1029.                       </div>
    1030. 

  1030.                     </div>
    1031. 

  1031.                   </div>
    1032. 

  1032.                   <div class="col-12">
    1033. 

  1033.                     <div class="card card-sm">
    1034. 

  1034.                       <div class="card-body">
    1035. 

  1035.                         <div class="row align-items-center">
    1036. 

  1036.                           <div class="col-auto">
    1037. 

  1037.                             <span class="avatar" style="background-image: url(./static/avatars/006m.jpg)"></span>
    1038. 

  1038.                           </div>
    1039. 

  1039.                           <div class="col">
    1040. 

  1040.                             <div class="font-weight-medium">
    1041. 

  1041.                               1700
    1042. 

  1042.                             </div>
    1043. 

  1043.                             <div class="text-muted">
    1044. 

  1044.                               Users
    1045. 

  1045.                             </div>
    1046. 

  1046.                           </div>
    1047. 

  1047.                           <div class="col-auto">
    1048. 

  1048.                           </div>
    1049. 

  1049.                         </div>
    1050. 

  1050.                       </div>
    1051. 

  1051.                     </div>
    1052. 

  1052.                   </div>
    1053. 

  1053.                   <div class="col-12">
    1054. 

  1054.                     <div class="card card-sm">
    1055. 

  1055.                       <div class="card-body">
    1056. 

  1056.                         <div class="row align-items-center">
    1057. 

  1057.                           <div class="col-auto">
    1058. 

  1058.                             <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
    1059. 

  1059.                           </div>
    1060. 

  1060.                           <div class="col">
    1061. 

  1061.                             <div class="font-weight-medium">
    1062. 

  1062.                               1700
    1063. 

  1063.                             </div>
    1064. 

  1064.                             <div class="text-muted">
    1065. 

  1065.                               Users
    1066. 

  1066.                             </div>
    1067. 

  1067.                           </div>
    1068. 

  1068.                           <div class="col-auto">
    1069. 

  1069.                           </div>
    1070. 

  1070.                         </div>
    1071. 

  1071.                       </div>
    1072. 

  1072.                     </div>
    1073. 

  1073.                   </div>
    1074. 

  1074.                   <div class="col-12">
    1075. 

  1075.                     <div class="card card-sm">
    1076. 

  1076.                       <div class="card-body">
    1077. 

  1077.                         <div class="row align-items-center">
    1078. 

  1078.                           <div class="col-auto">
    1079. 

  1079.                             <span class="avatar" style="background-image: url(./static/avatars/003m.jpg)"></span>
    1080. 

  1080.                           </div>
    1081. 

  1081.                           <div class="col">
    1082. 

  1082.                             <div class="font-weight-medium">
    1083. 

  1083.                               1700
    1084. 

  1084.                             </div>
    1085. 

  1085.                             <div class="text-muted">
    1086. 

  1086.                               Users
    1087. 

  1087.                             </div>
    1088. 

  1088.                           </div>
    1089. 

  1089.                         </div>
    1090. 

  1090.                       </div>
    1091. 

  1091.                     </div>
    1092. 

  1092.                   </div>
    1093. 

  1093.                   <div class="col-12">
    1094. 

  1094.                     <div class="card card-sm">
    1095. 

  1095.                       <div class="card-body">
    1096. 

  1096.                         <div class="row align-items-center">
    1097. 

  1097.                           <div class="col-auto">
    1098. 

  1098.                             <span class="avatar" style="background-image: url(./static/avatars/002m.jpg)"></span>
    1099. 

  1099.                           </div>
    1100. 

  1100.                           <div class="col">
    1101. 

  1101.                             <div class="font-weight-medium">
    1102. 

  1102.                               1700
    1103. 

  1103.                               <!-- Download SVG icon from http://tabler-icons.io/i/trending-down -->
    1104. 

  1104.                               <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-sm ms-1 text-red" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="3 7 9 13 13 9 21 17" /><polyline points="21 10 21 17 14 17" /></svg>
    1105. 

  1105.                             </div>
    1106. 

  1106.                             <div class="text-muted">
    1107. 

  1107.                               Users
    1108. 

  1108.                             </div>
    1109. 

  1109.                           </div>
    1110. 

  1110.                         </div>
    1111. 

  1111.                       </div>
    1112. 

  1112.                     </div>
    1113. 

  1113.                   </div>
    1114. 

  1114.                   <div class="col-12">
    1115. 

  1115.                     <div class="card">
    1116. 

  1116.                       <div class="card-header">
    1117. 

  1117.                         <h3 class="card-title">Card with code</h3>
    1118. 

  1118.                       </div>
    1119. 

  1119.                       <div class="card-code">
    1120. 

  1120.                         <figure class="highlight">
    1121. 

  1121.                           <pre><code class="language-scss" data-lang="scss"><span class="nc">.card-footer</span> <span class="p">{</span>
    1122. 

  1122. 	<span class="nl">background</span><span class="p">:</span> <span class="nb">transparent</span><span class="p">;</span>
    1123. 

  1123. 

  1124. 	<span class="k">&amp;</span><span class="nd">:last-child</span> <span class="p">{</span>
    1125. 

  1125. 		<span class="nl">border-radius</span><span class="p">:</span> <span class="m">0</span> <span class="m">0</span> <span class="m">1</span> <span class="m">2</span><span class="p">;</span>
    1126. 

  1126. 	<span class="p">}</span>
    1127. 

  1127. <span class="p">}</span></code></pre>
    1128. 

  1128.                         </figure>
    1129. 

  1129.                       </div>
    1130. 

  1130.                     </div>
    1131. 

  1131.                   </div>
    1132. 

  1132.                 </div>
    1133. 

  1133.               </div>
    1134. 

  1134.               <div class="col-md-6 col-lg-4">
    1135. 

  1135.                 <div class="row row-cards">
    1136. 

  1136.                   <div class="col-12">
    1137. 

  1137.                     <div class="card">
    1138. 

  1138.                       <div class="card-body p-4 py-5 text-center">
    1139. 

  1139.                         <span class="avatar avatar-xl mb-4 avatar-rounded">W</span>
    1140. 

  1140.                         <h3 class="mb-0">New website</h3>
    1141. 

  1141.                         <p class="text-muted">Due to: 28 Aug 2019</p>
    1142. 

  1142.                         <p class="mb-3">
    1143. 

  1143.                           <span class="badge bg-red-lt">Waiting</span>
    1144. 

  1144.                         </p>
    1145. 

  1145.                         <div>
    1146. 

  1146.                           <div class="avatar-list avatar-list-stacked">
    1147. 

  1147.                             <span class="avatar avatar-sm avatar-rounded" style="background-image: url(./static/avatars/000m.jpg)"></span>
    1148. 

  1148.                             <span class="avatar avatar-sm avatar-rounded">JL</span>
    1149. 

  1149.                             <span class="avatar avatar-sm avatar-rounded" style="background-image: url(./static/avatars/002m.jpg)"></span>
    1150. 

  1150.                             <span class="avatar avatar-sm avatar-rounded" style="background-image: url(./static/avatars/003m.jpg)"></span>
    1151. 

  1151.                             <span class="avatar avatar-sm avatar-rounded" style="background-image: url(./static/avatars/000f.jpg)"></span>
    1152. 

  1152.                           </div>
    1153. 

  1153.                         </div>
    1154. 

  1154.                       </div>
    1155. 

  1155.                       <div class="progress card-progress">
    1156. 

  1156.                         <div class="progress-bar" style="width: 38%" role="progressbar" aria-valuenow="38" aria-valuemin="0" aria-valuemax="100">
    1157. 

  1157.                           <span class="visually-hidden">38% Complete</span>
    1158. 

  1158.                         </div>
    1159. 

  1159.                       </div>
    1160. 

  1160.                     </div>
    1161. 

  1161.                   </div>
    1162. 

  1162.                 </div>
    1163. 

  1163.               </div>
    1164. 

  1164.               <div class="col-md-6 col-lg-4">
    1165. 

  1165.                 <div class="row row-cards">
    1166. 

  1166.                   <div class="col-12">
    1167. 

  1167.                     <div class="card">
    1168. 

  1168.                       <div class="progress card-progress">
    1169. 

  1169.                         <div class="progress-bar bg-red" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
    1170. 

  1170.                           <span class="visually-hidden">20% Complete</span>
    1171. 

  1171.                         </div>
    1172. 

  1172.                       </div>
    1173. 

  1173.                       <div class="card-body">
    1174. 

  1174.                         <h3 class="card-title">
    1175. 

  1175.                           <a href="#">Tabler UI</a>
    1176. 

  1176.                           <span class="badge ms-2">v1.0</span>
    1177. 

  1177.                         </h3>
    1178. 

  1178.                         <div class="avatar-list avatar-list-stacked mb-3">
    1179. 

  1179.                           <span class="avatar avatar-sm avatar-rounded" style="background-image: url(./static/avatars/000m.jpg)"></span>
    1180. 

  1180.                           <span class="avatar avatar-sm avatar-rounded">JL</span>
    1181. 

  1181.                           <span class="avatar avatar-sm avatar-rounded" style="background-image: url(./static/avatars/002m.jpg)"></span>
    1182. 

  1182.                           <span class="avatar avatar-sm avatar-rounded" style="background-image: url(./static/avatars/003m.jpg)"></span>
    1183. 

  1183.                         </div>
    1184. 

  1184.                         <div class="card-meta d-flex justify-content-between">
    1185. 

  1185.                           <div class="d-flex align-items-center">
    1186. 

  1186.                             <!-- Download SVG icon from http://tabler-icons.io/i/check -->
    1187. 

  1187.                             <svg xmlns="http://www.w3.org/2000/svg" class="icon me-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l5 5l10 -10" /></svg>
    1188. 

  1188.                             <span>5/10</span>
    1189. 

  1189.                           </div>
    1190. 

  1190.                           <span>Due 72 days</span>
    1191. 

  1191.                         </div>
    1192. 

  1192.                       </div>
    1193. 

  1193.                     </div>
    1194. 

  1194.                   </div>
    1195. 

  1195.                   <div class="col-12">
    1196. 

  1196.                     <div class="card">
    1197. 

  1197.                       <div class="progress card-progress">
    1198. 

  1198.                         <div class="progress-bar bg-green" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
    1199. 

  1199.                           <span class="visually-hidden">20% Complete</span>
    1200. 

  1200.                         </div>
    1201. 

  1201.                       </div>
    1202. 

  1202.                       <div class="card-body">
    1203. 

  1203.                         <h3 class="card-title">
    1204. 

  1204.                           <a href="#">Tabler React</a>
    1205. 

  1205.                         </h3>
    1206. 

  1206.                         <div class="avatar-list avatar-list-stacked mb-3">
    1207. 

  1207.                           <span class="avatar avatar-sm avatar-rounded" style="background-image: url(./static/avatars/009f.jpg)"></span>
    1208. 

  1208.                           <span class="avatar avatar-sm avatar-rounded" style="background-image: url(./static/avatars/010f.jpg)"></span>
    1209. 

  1209.                           <span class="avatar avatar-sm avatar-rounded" style="background-image: url(./static/avatars/011m.jpg)"></span>
    1210. 

  1210.                           <span class="avatar avatar-sm avatar-rounded" style="background-image: url(./static/avatars/012m.jpg)"></span>
    1211. 

  1211.                           <span class="avatar avatar-sm avatar-rounded" style="background-image: url(./static/avatars/011f.jpg)"></span>
    1212. 

  1212.                           <span class="avatar avatar-sm avatar-rounded" style="background-image: url(./static/avatars/012f.jpg)"></span>
    1213. 

  1213.                           <span class="avatar avatar-sm avatar-rounded" style="background-image: url(./static/avatars/013m.jpg)"></span>
    1214. 

  1214.                         </div>
    1215. 

  1215.                         <div class="card-meta d-flex justify-content-between">
    1216. 

  1216.                           <div class="d-flex align-items-center">
    1217. 

  1217.                             <!-- Download SVG icon from http://tabler-icons.io/i/check -->
    1218. 

  1218.                             <svg xmlns="http://www.w3.org/2000/svg" class="icon me-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l5 5l10 -10" /></svg>
    1219. 

  1219.                             <span>5/10</span>
    1220. 

  1220.                           </div>
    1221. 

  1221.                           <span>Due 2 days</span>
    1222. 

  1222.                         </div>
    1223. 

  1223.                       </div>
    1224. 

  1224.                     </div>
    1225. 

  1225.                   </div>
    1226. 

  1226.                   <div class="col-12">
    1227. 

  1227.                     <div class="card">
    1228. 

  1228.                       <div class="card-body">
    1229. 

  1229.                         <div class="card-title">Basic info</div>
    1230. 

  1230.                         <div class="mb-2">
    1231. 

  1231.                           <!-- Download SVG icon from http://tabler-icons.io/i/book -->
    1232. 

  1232.                           <svg xmlns="http://www.w3.org/2000/svg" class="icon me-2 text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0" /><path d="M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0" /><line x1="3" y1="6" x2="3" y2="19" /><line x1="12" y1="6" x2="12" y2="19" /><line x1="21" y1="6" x2="21" y2="19" /></svg>
    1233. 

  1233.                           Went to: <strong>University of Ljubljana</strong>
    1234. 

  1234.                         </div>
    1235. 

  1235.                         <div class="mb-2">
    1236. 

  1236.                           <!-- Download SVG icon from http://tabler-icons.io/i/briefcase -->
    1237. 

  1237.                           <svg xmlns="http://www.w3.org/2000/svg" class="icon me-2 text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="3" y="7" width="18" height="13" rx="2" /><path d="M8 7v-2a2 2 0 0 1 2 -2h4a2 2 0 0 1 2 2v2" /><line x1="12" y1="12" x2="12" y2="12.01" /><path d="M3 13a20 20 0 0 0 18 0" /></svg>
    1238. 

  1238.                           Worked at: <strong>Devpulse</strong>
    1239. 

  1239.                         </div>
    1240. 

  1240.                         <div class="mb-2">
    1241. 

  1241.                           <!-- Download SVG icon from http://tabler-icons.io/i/home -->
    1242. 

  1242.                           <svg xmlns="http://www.w3.org/2000/svg" class="icon me-2 text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
    1243. 

  1243.                           Lives in: <strong>Šentilj v Slov. Goricah, Slovenia</strong>
    1244. 

  1244.                         </div>
    1245. 

  1245.                         <div class="mb-2">
    1246. 

  1246.                           <!-- Download SVG icon from http://tabler-icons.io/i/map-pin -->
    1247. 

  1247.                           <svg xmlns="http://www.w3.org/2000/svg" class="icon me-2 text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="11" r="3" /><path d="M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0z" /></svg>
    1248. 

  1248.                           From: <strong><span class="flag flag-country-si"></span>
    1249. 

  1249.                             Slovenia</strong>
    1250. 

  1250.                         </div>
    1251. 

  1251.                         <div class="mb-2">
    1252. 

  1252.                           <!-- Download SVG icon from http://tabler-icons.io/i/calendar -->
    1253. 

  1253.                           <svg xmlns="http://www.w3.org/2000/svg" class="icon me-2 text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="5" width="16" height="16" rx="2" /><line x1="16" y1="3" x2="16" y2="7" /><line x1="8" y1="3" x2="8" y2="7" /><line x1="4" y1="11" x2="20" y2="11" /><line x1="11" y1="15" x2="12" y2="15" /><line x1="12" y1="15" x2="12" y2="18" /></svg>
    1254. 

  1254.                           Birth date: <strong>13/01/1985</strong>
    1255. 

  1255.                         </div>
    1256. 

  1256.                         <div>
    1257. 

  1257.                           <!-- Download SVG icon from http://tabler-icons.io/i/clock -->
    1258. 

  1258.                           <svg xmlns="http://www.w3.org/2000/svg" class="icon me-2 text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="9" /><polyline points="12 7 12 12 15 15" /></svg>
    1259. 

  1259.                           Time zone: <strong>Europe/Ljubljana</strong>
    1260. 

  1260.                         </div>
    1261. 

  1261.                       </div>
    1262. 

  1262.                     </div>
    1263. 

  1263.                   </div>
    1264. 

  1264.                   <div class="col-12">
    1265. 

  1265.                     <div class="card">
    1266. 

  1266.                       <div class="card-header">
    1267. 

  1267.                         <h3 class="card-title">
    1268. 

  1268.                           Configuration
    1269. 

  1269.                         </h3>
    1270. 

  1270.                         <div class="card-actions">
    1271. 

  1271.                           <a href="#">
    1272. 

  1272.                             Edit configuration<!-- Download SVG icon from http://tabler-icons.io/i/edit -->
    1273. 

  1273.                             <svg xmlns="http://www.w3.org/2000/svg" class="icon ms-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 7h-3a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-3" /><path d="M9 15h3l8.5 -8.5a1.5 1.5 0 0 0 -3 -3l-8.5 8.5v3" /><line x1="16" y1="5" x2="19" y2="8" /></svg>
    1274. 

  1274.                           </a>
    1275. 

  1275.                         </div>
    1276. 

  1276.                       </div>
    1277. 

  1277.                       <div class="card-body">
    1278. 

  1278.                         <dl class="row">
    1279. 

  1279.                           <dt class="col-5">Date:</dt>
    1280. 

  1280.                           <dd class="col-7">2020-01-05 16:42:29 UTC</dd>
    1281. 

  1281.                           <dt class="col-5">Account:</dt>
    1282. 

  1282.                           <dd class="col-7">tabler</dd>
    1283. 

  1283.                           <dt class="col-5">Location:</dt>
    1284. 

  1284.                           <dd class="col-7"><span class="flag flag-country-pl"></span>
    1285. 

  1285.                             Poland</dd>
    1286. 

  1286.                           <dt class="col-5">IP Address:</dt>
    1287. 

  1287.                           <dd class="col-7">46.113.11.3</dd>
    1288. 

  1288.                           <dt class="col-5">Operating system:</dt>
    1289. 

  1289.                           <dd class="col-7">OS X 10.15.2 64-bit</dd>
    1290. 

  1290.                           <dt class="col-5">Browser:</dt>
    1291. 

  1291.                           <dd class="col-7">Chrome</dd>
    1292. 

  1292.                         </dl>
    1293. 

  1293.                       </div>
    1294. 

  1294.                     </div>
    1295. 

  1295.                   </div>
    1296. 

  1296.                 </div>
    1297. 

  1297.               </div>
    1298. 

  1298.             </div>
    1299. 

  1299.           </div>
    1300. 

  1300.         </div>
    1301. 

  1301.         <footer class="footer footer-transparent d-print-none">
    1302. 

  1302.           <div class="container">
    1303. 

  1303.             <div class="row text-center align-items-center flex-row-reverse">
    1304. 

  1304.               <div class="col-lg-auto ms-lg-auto">
    1305. 

  1305.                 <ul class="list-inline list-inline-dots mb-0">
    1306. 

  1306.                   <li class="list-inline-item"><a href="./docs/index.html" class="link-secondary">Documentation</a></li>
    1307. 

  1307.                   <li class="list-inline-item"><a href="./license.html" class="link-secondary">License</a></li>
    1308. 

  1308.                   <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
    1309. 

  1309.                   <li class="list-inline-item">
    1310. 

  1310.                     <a href="https://github.com/sponsors/codecalm" target="_blank" class="link-secondary" rel="noopener">
    1311. 

  1311.                       <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
    1312. 

  1312.                       <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink icon-filled icon-inline" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
    1313. 

  1313.                       Sponsor
    1314. 

  1314.                     </a>
    1315. 

  1315.                   </li>
    1316. 

  1316.                 </ul>
    1317. 

  1317.               </div>
    1318. 

  1318.               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
    1319. 

  1319.                 <ul class="list-inline list-inline-dots mb-0">
    1320. 

  1320.                   <li class="list-inline-item">
    1321. 

  1321.                     Copyright &copy; 2021
    1322. 

  1322.                     <a href="." class="link-secondary">Tabler</a>.
    1323. 

  1323.                     All rights reserved.
    1324. 

  1324.                   </li>
    1325. 

  1325.                   <li class="list-inline-item">
    1326. 

  1326.                     <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
    1327. 

  1327.                   </li>
    1328. 

  1328.                 </ul>
    1329. 

  1329.               </div>
    1330. 

  1330.             </div>
    1331. 

  1331.           </div>
    1332. 

  1332.         </footer>
    1333. 

  1333.       </div>
    1334. 

  1334.     </div>
    1335. 

  1335.     <!-- Libs JS -->
    1336. 

  1336.     <script src="./dist/libs/apexcharts/dist/apexcharts.min.js"></script>
    1337. 

  1337.     <!-- Tabler Core -->
    1338. 

  1338.     <script src="./dist/js/tabler.min.js"></script>
    1339. 

  1339.     <script>
    1340. 

  1340.       // @formatter:off
    1341. 

  1341.       document.addEventListener("DOMContentLoaded", function () {
    1342. 

  1342.       	window.ApexCharts && (new ApexCharts(document.getElementById('sparkline-sales'), {
    1343. 

  1343.       		chart: {
    1344. 

  1344.       			type: "radialBar",
    1345. 

  1345.       			fontFamily: 'inherit',
    1346. 

  1346.       			height: 40,
    1347. 

  1347.       			width: 40,
    1348. 

  1348.       			animations: {
    1349. 

  1349.       				enabled: false
    1350. 

  1350.       			},
    1351. 

  1351.       			sparkline: {
    1352. 

  1352.       				enabled: true
    1353. 

  1353.       			},
    1354. 

  1354.       		},
    1355. 

  1355.       		tooltip: {
    1356. 

  1356.       			enabled: false,
    1357. 

  1357.       		},
    1358. 

  1358.       		plotOptions: {
    1359. 

  1359.       			radialBar: {
    1360. 

  1360.       				hollow: {
    1361. 

  1361.       					margin: 0,
    1362. 

  1362.       					size: '75%'
    1363. 

  1363.       				},
    1364. 

  1364.       				track: {
    1365. 

  1365.       					margin: 0
    1366. 

  1366.       				},
    1367. 

  1367.       				dataLabels: {
    1368. 

  1368.       					show: false
    1369. 

  1369.       				}
    1370. 

  1370.       			}
    1371. 

  1371.       		},
    1372. 

  1372.       		colors: ["#206bc4"],
    1373. 

  1373.       		series: [56],
    1374. 

  1374.       	})).render();
    1375. 

  1375.       });
    1376. 

  1376.       // @formatter:on
    1377. 

  1377.     </script>
    1378. 

  1378.     <script>
    1379. 

  1379.       // @formatter:off
    1380. 

  1380.       document.addEventListener("DOMContentLoaded", function () {
    1381. 

  1381.       	window.ApexCharts && (new ApexCharts(document.getElementById('sparkline-orders'), {
    1382. 

  1382.       		chart: {
    1383. 

  1383.       			type: "radialBar",
    1384. 

  1384.       			fontFamily: 'inherit',
    1385. 

  1385.       			height: 40,
    1386. 

  1386.       			width: 40,
    1387. 

  1387.       			animations: {
    1388. 

  1388.       				enabled: false
    1389. 

  1389.       			},
    1390. 

  1390.       			sparkline: {
    1391. 

  1391.       				enabled: true
    1392. 

  1392.       			},
    1393. 

  1393.       		},
    1394. 

  1394.       		tooltip: {
    1395. 

  1395.       			enabled: false,
    1396. 

  1396.       		},
    1397. 

  1397.       		plotOptions: {
    1398. 

  1398.       			radialBar: {
    1399. 

  1399.       				hollow: {
    1400. 

  1400.       					margin: 0,
    1401. 

  1401.       					size: '75%'
    1402. 

  1402.       				},
    1403. 

  1403.       				track: {
    1404. 

  1404.       					margin: 0
    1405. 

  1405.       				},
    1406. 

  1406.       				dataLabels: {
    1407. 

  1407.       					show: false
    1408. 

  1408.       				}
    1409. 

  1409.       			}
    1410. 

  1410.       		},
    1411. 

  1411.       		colors: ["#5eba00"],
    1412. 

  1412.       		series: [56],
    1413. 

  1413.       	})).render();
    1414. 

  1414.       });
    1415. 

  1415.       // @formatter:on
    1416. 

  1416.     </script>
    1417. 

  1417.     <script>
    1418. 

  1418.       // @formatter:off
    1419. 

  1419.       document.addEventListener("DOMContentLoaded", function () {
    1420. 

  1420.       	window.ApexCharts && (new ApexCharts(document.getElementById('sparkline-members'), {
    1421. 

  1421.       		chart: {
    1422. 

  1422.       			type: "radialBar",
    1423. 

  1423.       			fontFamily: 'inherit',
    1424. 

  1424.       			height: 40,
    1425. 

  1425.       			width: 40,
    1426. 

  1426.       			animations: {
    1427. 

  1427.       				enabled: false
    1428. 

  1428.       			},
    1429. 

  1429.       			sparkline: {
    1430. 

  1430.       				enabled: true
    1431. 

  1431.       			},
    1432. 

  1432.       		},
    1433. 

  1433.       		tooltip: {
    1434. 

  1434.       			enabled: false,
    1435. 

  1435.       		},
    1436. 

  1436.       		plotOptions: {
    1437. 

  1437.       			radialBar: {
    1438. 

  1438.       				hollow: {
    1439. 

  1439.       					margin: 0,
    1440. 

  1440.       					size: '75%'
    1441. 

  1441.       				},
    1442. 

  1442.       				track: {
    1443. 

  1443.       					margin: 0
    1444. 

  1444.       				},
    1445. 

  1445.       				dataLabels: {
    1446. 

  1446.       					show: false
    1447. 

  1447.       				}
    1448. 

  1448.       			}
    1449. 

  1449.       		},
    1450. 

  1450.       		colors: ["#cd201f"],
    1451. 

  1451.       		series: [56],
    1452. 

  1452.       	})).render();
    1453. 

  1453.       });
    1454. 

  1454.       // @formatter:on
    1455. 

  1455.     </script>
    1456. 

  1456.     <script>
    1457. 

  1457.       // @formatter:off
    1458. 

  1458.       document.addEventListener("DOMContentLoaded", function () {
    1459. 

  1459.       	window.ApexCharts && (new ApexCharts(document.getElementById('sparkline-comments'), {
    1460. 

  1460.       		chart: {
    1461. 

  1461.       			type: "radialBar",
    1462. 

  1462.       			fontFamily: 'inherit',
    1463. 

  1463.       			height: 40,
    1464. 

  1464.       			width: 40,
    1465. 

  1465.       			animations: {
    1466. 

  1466.       				enabled: false
    1467. 

  1467.       			},
    1468. 

  1468.       			sparkline: {
    1469. 

  1469.       				enabled: true
    1470. 

  1470.       			},
    1471. 

  1471.       		},
    1472. 

  1472.       		tooltip: {
    1473. 

  1473.       			enabled: false,
    1474. 

  1474.       		},
    1475. 

  1475.       		plotOptions: {
    1476. 

  1476.       			radialBar: {
    1477. 

  1477.       				hollow: {
    1478. 

  1478.       					margin: 0,
    1479. 

  1479.       					size: '75%'
    1480. 

  1480.       				},
    1481. 

  1481.       				track: {
    1482. 

  1482.       					margin: 0
    1483. 

  1483.       				},
    1484. 

  1484.       				dataLabels: {
    1485. 

  1485.       					show: false
    1486. 

  1486.       				}
    1487. 

  1487.       			}
    1488. 

  1488.       		},
    1489. 

  1489.       		colors: ["#fab005"],
    1490. 

  1490.       		series: [56],
    1491. 

  1491.       	})).render();
    1492. 

  1492.       });
    1493. 

  1493.       // @formatter:on
    1494. 

  1494.     </script>
    1495. 

  1495.   </body>
    1496. 

  1496. </html>
    1497.