Bootstrap
Home
Docs
Examples
Icons
Themes
Blog
GitHub
GitHub
Twitter
Twitter
Open Collective
Open Collective
Download
Bootstrap
v5.0
v5 releases
Latest (5.2.x)
v5.1.x
v5.0.x
v4.6.x
v3.4.1
v2.3.2
All versions
Expand
Collapse
5
Notifications
Clear All
Curabitur id eros quis nunc suscipit blandit.
Duis malesuada justo eu sapien elementum, in semper diam posuere.
Donec at nisi sit amet tortor commodo porttitor pretium a erat.
In gravida mauris et nisi
Praesent eu lacus in libero dictum fermentum.
Nunc fringilla lorem
Nullam euismod dolor ut quam interdum, at scelerisque ipsum imperdiet.
View all
5
Messages
Clear All
Lorem Ipsum
15 mins
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam tempor
4 hours
Curabitur facilisis erat quis metus congue viverra.
Proin venenatis
Today
Vestibulum nec ligula nec quam sodales rutrum sed luctus.
Praesent suscipit
Yesterday
Curabitur quis risus aliquet, luctus arcu nec, venenatis neque.
Donec tempor
2 days
Praesent vitae tellus eget nibh lacinia pretium.
See all e-Mails
5
Hello,
Alia
Profile
My Wallet
Settings
Logout
Compose
Compose New Message
Normal text
Normal text
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Bold
Italic
Underline
Small
×
Insert link
Open link in new window
×
Insert image
<p>Your Message Here....</p> </div> <div class="form-group"> <div class="btn btn-info btn-file"> <i class="fa fa-paperclip"></i> Attachment <input type="file" name="attachment"> </div> <p class="help-block">Max. 32MB</p> </div> </div> <div class="modal-footer"> <div class="pull-right"> <button type="button" class="btn btn-default"><i class="fa fa-pencil"></i> Draft</button> <button type="submit" class="btn btn-success"><i class="fa fa-envelope-o"></i> Send</button> </div> <button type="reset" class="btn btn-danger"><i class="fa fa-times"></i> Discard</button> <button type="button" class="btn btn-danger text-start" data-bs-dismiss="modal">Close</button> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> <!-- /.modal --> <div class="box"> <div class="box-header with-border"> <h4 class="box-title">Folders</h4> <ul class="box-controls pull-right"> <li><a class="box-btn-slide" href="#"></a></li> </ul> </div> <div class="box-body no-padding mailbox-nav"> <ul class="nav nav-pills flex-column"> <li class="nav-item"><a class="nav-link active" href="javascript:void(0)"><i class="ion ion-ios-email-outline"></i> Inbox <span class="label label-success pull-right">12</span></a></li> <li class="nav-item"><a class="nav-link" href="javascript:void(0)"><i class="ion ion-paper-airplane"></i> Sent</a></li> <li class="nav-item"><a class="nav-link" href="javascript:void(0)"><i class="ion ion-email-unread"></i> Drafts</a></li> <li class="nav-item"><a class="nav-link" href="javascript:void(0)"><i class="ion ion-star"></i> Starred <span class="label label-warning pull-right">14</span></a> </li> <li class="nav-item"><a class="nav-link" href="javascript:void(0)"><i class="ion ion-trash-a"></i> Trash</a></li> </ul> </div> <!-- /.box-body --> </div> <!-- /. box --> <div class="box"> <div class="box-header with-border"> <h4 class="box-title">Labels</h4> <ul class="box-controls pull-right"> <li><a class="box-btn-slide" href="#"></a></li> </ul> </div> <div class="box-body no-padding mailbox-nav"> <ul class="nav nav-pills flex-column"> <li class="nav-item"><a class="nav-link" href="#"><i class="fa fa-circle-o text-danger"></i> Important</a></li> <li class="nav-item"><a class="nav-link" href="#"><i class="fa fa-circle-o text-warning"></i> Promotions</a></li> <li class="nav-item"><a class="nav-link" href="#"><i class="fa fa-circle-o text-info"></i> Social</a></li> </ul> </div> <!-- /.box-body --> </div> <!-- /.box --> <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 280px;"><div class="contact-bx" style="overflow: hidden; width: auto; height: 280px;"> <div class="media-list media-list-hover"> <div class="media py-10 px-0 align-items-center"> <a class="avatar avatar-lg status-success" href="#"> <img src="../images/avatar/1.jpg" alt="..."> </a> <div class="media-body"> <p class="fs-16"> <a href="#">Sarah Kortney</a> </p> </div> </div> <div class="media py-10 px-0 align-items-center"> <a class="avatar avatar-lg status-danger" href="#"> <img src="../images/avatar/2.jpg" alt="..."> </a> <div class="media-body"> <p class="fs-16"> <a href="#">Tommy Nash</a> </p> </div> </div> <div class="media py-10 px-0 align-items-center"> <a class="avatar avatar-lg status-warning" href="#"> <img src="../images/avatar/3.jpg" alt="..."> </a> <div class="media-body"> <p class="fs-16"> <a href="#">Kathryn Mengel</a> </p> </div> </div> <div class="media py-10 px-0 align-items-center"> <a class="avatar avatar-lg status-primary" href="#"> <img src="../images/avatar/4.jpg" alt="..."> </a> <div class="media-body"> <p class="fs-16"> <a href="#">Mayra Sibley</a> </p> </div> </div> <div class="media py-10 px-0 align-items-center"> <a class="avatar avatar-lg status-success" href="#"> <img src="../images/avatar/1.jpg" alt="..."> </a> <div class="media-body"> <p class="fs-16"> <a href="#">Tommy Nash</a> </p> </div> </div> <div class="media py-10 px-0 align-items-center"> <a class="avatar avatar-lg status-danger" href="#"> <img src="../images/avatar/2.jpg" alt="..."> </a> <div class="media-body"> <p class="fs-16"> <a href="#">Williemae Lagasse</a> </p> </div> </div> </div> </div><div class="slimScrollBar" style="background: rgb(0, 0, 0); width: 7px; position: absolute; top: 0px; opacity: 0.4; display: block; border-radius: 7px; z-index: 99; right: 1px; height: 192.157px;"></div><div class="slimScrollRail" style="width: 7px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; background: rgb(51, 51, 51); opacity: 0.2; z-index: 90; right: 1px;"></div></div> </div> <!-- /.col --> <div class="col-xl-6 col-lg-8 col-12"> <div class="box"> <div class="box-header with-border"> <h4 class="box-title">Inbox</h4> <div class="box-controls pull-right"> <div class="box-header-actions"> <div class="lookup lookup-sm lookup-right d-none d-lg-block"> <input type="text" name="s" placeholder="Search"> </div> </div> </div> </div> <!-- /.box-header --> <div class="box-body"> <div class="mailbox-controls"> <!-- Check all button --> <button type="button" class="btn btn-primary btn-sm checkbox-toggle"><i class="ion ion-android-checkbox-outline-blank"></i> </button> <div class="btn-group"> <button type="button" class="btn btn-primary btn-sm"><i class="ion ion-trash-a"></i></button> <button type="button" class="btn btn-primary btn-sm"><i class="ion ion-reply"></i></button> <button type="button" class="btn btn-primary btn-sm"><i class="ion ion-share"></i></button> </div> <!-- /.btn-group --> <div class="btn-group"> <div class="btn-group"> <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> <i class="ion ion-flag margin-r-5"></i> <span class="caret"></span> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </div> <div class="btn-group"> <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> <i class="ion ion-folder margin-r-5"></i> <span class="caret"></span> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </div> </div> <!-- /.btn-group --> <button type="button" class="btn btn-primary btn-sm"><i class="fa fa-refresh"></i></button> <div class="pull-right"> <div class="btn-group"> <button type="button" class="btn btn-primary btn-sm"><i class="fa fa-chevron-left"></i></button> <button type="button" class="btn btn-primary btn-sm"><i class="fa fa-chevron-right"></i></button> </div> <!-- /.btn-group --> </div> <!-- /.pull-right --> </div> <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 540px;"><div class="mailbox-messages inbox-bx" style="overflow: hidden; width: auto; height: 540px;"> <div class="table-responsive"> <table class="table table-hover table-striped"> <tbody> <tr> <td><div class="icheckbox_flat-blue" aria-checked="false" aria-disabled="false" style="position: relative;"><input type="checkbox" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div></td> <td class="mailbox-star"><a href="#"><i class="fa fa-star text-yellow"></i></a></td> <td> <p class="mailbox-name mb-0 fs-16 fw-600">Johen Doe</p> <a class="mailbox-subject" href="#"><b>Lorem Ipsum</b> - There are many variations of Ipsum available...</a> </td> <td class="mailbox-attachment"></td> <td class="mailbox-date">2:45 PM</td> </tr> <tr> <td><div class="icheckbox_flat-blue" aria-checked="false" aria-disabled="false" style="position: relative;"><input type="checkbox" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div></td> <td class="mailbox-star"><a href="#"><i class="fa fa-star-o text-yellow"></i></a></td> <td> <p class="mailbox-name mb-0 fs-16 fw-600">Johen Doe</p> <a class="mailbox-subject" href="#"><b>Lorem Ipsum</b> - There are many variations of Ipsum available...</a> </td> <td class="mailbox-attachment"><i class="fa fa-paperclip"></i></td> <td class="mailbox-date">2:45 PM</td> </tr> <tr> <td><div class="icheckbox_flat-blue" aria-checked="false" aria-disabled="false" style="position: relative;"><input type="checkbox" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div></td> <td class="mailbox-star"><a href="#"><i class="fa fa-star-o text-yellow"></i></a></td> <td> <p class="mailbox-name mb-0 fs-16 fw-600">Johen Doe</p> <a class="mailbox-subject" href="#"><b>Lorem Ipsum</b> - There are many variations of Ipsum available...</a> </td> <td class="mailbox-attachment"><i class="fa fa-paperclip"></i></td> <td class="mailbox-date">2:45 PM</td> </tr> <tr> <td><div class="icheckbox_flat-blue" aria-checked="false" aria-disabled="false" style="position: relative;"><input type="checkbox" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div></td> <td class="mailbox-star"><a href="#"><i class="fa fa-star text-yellow"></i></a></td> <td> <p class="mailbox-name mb-0 fs-16 fw-600">Johen Doe</p> <a class="mailbox-subject" href="#"><b>Lorem Ipsum</b> - There are many variations of Ipsum available...</a> </td> <td class="mailbox-attachment"></td> <td class="mailbox-date">2:45 PM</td> </tr> <tr> <td><div class="icheckbox_flat-blue" aria-checked="false" aria-disabled="false" style="position: relative;"><input type="checkbox" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div></td> <td class="mailbox-star"><a href="#"><i class="fa fa-star text-yellow"></i></a></td> <td> <p class="mailbox-name mb-0 fs-16 fw-600">Johen Doe</p> <a class="mailbox-subject" href="#"><b>Lorem Ipsum</b> - There are many variations of Ipsum available...</a> </td> <td class="mailbox-attachment"></td> <td class="mailbox-date">2:45 PM</td> </tr> <tr> <td><div class="icheckbox_flat-blue" aria-checked="false" aria-disabled="false" style="position: relative;"><input type="checkbox" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div></td> <td class="mailbox-star"><a href="#"><i class="fa fa-star-o text-yellow"></i></a></td> <td> <p class="mailbox-name mb-0 fs-16 fw-600">Johen Doe</p> <a class="mailbox-subject" href="#"><b>Lorem Ipsum</b> - There are many variations of Ipsum available...</a> </td> <td class="mailbox-attachment"><i class="fa fa-paperclip"></i></td> <td class="mailbox-date">2:45 PM</td> </tr> <tr> <td><div class="icheckbox_flat-blue" aria-checked="false" aria-disabled="false" style="position: relative;"><input type="checkbox" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div></td> <td class="mailbox-star"><a href="#"><i class="fa fa-star-o text-yellow"></i></a></td> <td> <p class="mailbox-name mb-0 fs-16 fw-600">Johen Doe</p> <a class="mailbox-subject" href="#"><b>Lorem Ipsum</b> - There are many variations of Ipsum available...</a> </td> <td class="mailbox-attachment"><i class="fa fa-paperclip"></i></td> <td class="mailbox-date">2:45 PM</td> </tr> <tr> <td><div class="icheckbox_flat-blue" aria-checked="false" aria-disabled="false" style="position: relative;"><input type="checkbox" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div></td> <td class="mailbox-star"><a href="#"><i class="fa fa-star text-yellow"></i></a></td> <td> <p class="mailbox-name mb-0 fs-16 fw-600">Johen Doe</p> <a class="mailbox-subject" href="#"><b>Lorem Ipsum</b> - There are many variations of Ipsum available...</a> </td> <td class="mailbox-attachment"></td> <td class="mailbox-date">2:45 PM</td> </tr> </tbody> </table> </div> <!-- /.table --> </div><div class="slimScrollBar" style="background: rgb(0, 0, 0); width: 7px; position: absolute; top: 0px; opacity: 0.4; display: block; border-radius: 7px; z-index: 99; right: 1px; height: 376.744px;"></div><div class="slimScrollRail" style="width: 7px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; background: rgb(51, 51, 51); opacity: 0.2; z-index: 90; right: 1px;"></div></div> <!-- /.mail-box-messages --> </div> <!-- /.box-body --> <div class="box-footer"> <div class="mailbox-controls"> <!-- Check all button --> <button type="button" class="btn btn-primary btn-sm checkbox-toggle"><i class="ion ion-android-checkbox-outline-blank"></i> </button> <div class="btn-group"> <button type="button" class="btn btn-primary btn-sm"><i class="ion ion-trash-a"></i></button> <button type="button" class="btn btn-primary btn-sm"><i class="ion ion-reply"></i></button> <button type="button" class="btn btn-primary btn-sm"><i class="ion ion-share"></i></button> </div> <!-- /.btn-group --> <div class="btn-group"> <div class="btn-group"> <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> <i class="ion ion-flag margin-r-5"></i> <span class="caret"></span> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </div> <div class="btn-group"> <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> <i class="ion ion-folder margin-r-5"></i> <span class="caret"></span> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </div> </div> <!-- /.btn-group --> <button type="button" class="btn btn-primary btn-sm"><i class="fa fa-refresh"></i></button> <div class="pull-right"> <div class="btn-group"> <button type="button" class="btn btn-primary btn-sm"><i class="fa fa-chevron-left"></i></button> <button type="button" class="btn btn-primary btn-sm"><i class="fa fa-chevron-right"></i></button> </div> <!-- /.btn-group --> </div> <!-- /.pull-right --> </div> </div> </div> <!-- /. box --> </div> <!-- /.col --> <div class="col-xl-4 col-12"> <div class="box"> <div class="box-body pt-10"> <div class="mailbox-read-info"> <h4>Your message title goes here</h4> </div> <div class="mailbox-read-info clearfix mb-20"> <div class="float-start me-10"><a href="#"><img src="../images/1.jpg" alt="user" width="40" class="rounded-circle"></a></div> <h5 class="no-margin"> Pavan kumar<br> <small>From: jonathan@domain.com</small> <span class="mailbox-read-time pull-right">22 JUL. 2019 08:03 PM</span></h5> </div> <!-- /.mailbox-read-info --> <div class="mailbox-controls with-border clearfix"> <div class="float-start"> <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="tooltip" title="" data-bs-original-title="Print"> <i class="fa fa-print"></i></button> </div> <div class="float-end"> <div class="btn-group"> <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="tooltip" data-container="body" title="" data-bs-original-title="Delete"> <i class="fa fa-trash-o"></i></button> <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="tooltip" data-container="body" title="" data-bs-original-title="Reply"> <i class="fa fa-reply"></i></button> <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="tooltip" data-container="body" title="" data-bs-original-title="Forward"> <i class="fa fa-share"></i></button> </div> </div> <!-- /.btn-group --> </div> <!-- /.mailbox-controls --> <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 350px;"><div class="mailbox-read-message read-mail-bx" style="overflow: hidden; width: auto; height: 350px;"> <p>Dear USer,</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p> <p>enean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar.</p> <p>Thanks,<br>Jane</p> </div><div class="slimScrollBar" style="background: rgb(0, 0, 0); width: 7px; position: absolute; top: 0px; opacity: 0.4; display: block; border-radius: 7px; z-index: 99; right: 1px; height: 227.695px;"></div><div class="slimScrollRail" style="width: 7px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; background: rgb(51, 51, 51); opacity: 0.2; z-index: 90; right: 1px;"></div></div> <!-- /.mailbox-read-message --> </div> <!-- /.box-body --> <div class="box-footer"> <h5><i class="fa fa-paperclip m-r-10 m-b-10"></i> Attachments <span>(3)</span></h5> <ul class="mailbox-attachments clearfix"> <li> <div class="mailbox-attachment-info"> <a href="#" class="mailbox-attachment-name"><i class="fa fa-paperclip"></i> Mag.pdf</a> <span class="mailbox-attachment-size"> 5,215 KB <a href="#" class="btn btn-primary btn-xs pull-right"><i class="fa fa-cloud-download"></i></a> </span> </div> </li> <li> <div class="mailbox-attachment-info"> <a href="#" class="mailbox-attachment-name"><i class="fa fa-paperclip"></i> Documents.docx</a> <span class="mailbox-attachment-size"> 2,145 KB <a href="#" class="btn btn-primary btn-xs pull-right"><i class="fa fa-cloud-download"></i></a> </span> </div> </li> </ul> </div> <!-- /.box-footer --> <div class="box-footer"> <div class="pull-right"> <button type="button" class="btn btn-success"><i class="fa fa-reply"></i> Reply</button> <button type="button" class="btn btn-info"><i class="fa fa-share"></i> Forward</button> </div> <button type="button" class="btn btn-danger"><i class="fa fa-trash-o"></i></button> <button type="button" class="btn btn-warning"><i class="fa fa-print"></i></button> </div> <!-- /.box-footer --> </div> <!-- /. box --> </div> <!-- /.col --> </div> </section> <!-- /.content --> </div> </div> <!-- /.content-wrapper --> <!-- Content Right Sidebar --> <div class="right-bar"> <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 100%;"><div id="sidebarRight" style="overflow: hidden; width: auto; height: 100%;"> <div class="right-bar-inner"> <div class="text-end position-relative"> <a href="#" class="d-inline-block d-xl-none btn right-bar-btn waves-effect waves-circle btn btn-circle btn-danger btn-sm"> <i class="mdi mdi-close"></i> </a> </div> <div class="right-bar-content"> <div class="box no-shadow box-bordered border-light"> <div class="box-body"> <div class="d-flex justify-content-between align-items-center"> <div> <h5>Total Sale</h5> <h2 class="mb-0">$254.90</h2> </div> <div class="p-10" style="position: relative;"> <div id="chart-spark1" style="min-height: 60px;"><div id="apexcharts3r6h2twn" class="apexcharts-canvas apexcharts3r6h2twn apexcharts-theme-light" style="width: 100px; height: 60px;"><svg id="SvgjsSvg1006" width="100" height="60" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" class="apexcharts-svg" xmlns:data="ApexChartsNS" transform="translate(0, 0)" style="background: transparent;"><g id="SvgjsG1008" class="apexcharts-inner apexcharts-graphical" transform="translate(0, 0)"><defs id="SvgjsDefs1007"><clipPath id="gridRectMask3r6h2twn"><rect id="SvgjsRect1013" width="108" height="64" x="-4" y="-2" rx="0" ry="0" opacity="1" stroke-width="0" stroke="none" stroke-dasharray="0" fill="#fff"></rect></clipPath><clipPath id="gridRectMarkerMask3r6h2twn"><rect id="SvgjsRect1014" width="104" height="64" x="-2" y="-2" rx="0" ry="0" opacity="1" stroke-width="0" stroke="none" stroke-dasharray="0" fill="#fff"></rect></clipPath><linearGradient id="SvgjsLinearGradient1020" x1="0" y1="0" x2="0" y2="1"><stop id="SvgjsStop1021" stop-opacity="0.65" stop-color="rgba(1,176,117,0.65)" offset="0"></stop><stop id="SvgjsStop1022" stop-opacity="0.5" stop-color="rgba(128,216,186,0.5)" offset="1"></stop><stop id="SvgjsStop1023" stop-opacity="0.5" stop-color="rgba(128,216,186,0.5)" offset="1"></stop></linearGradient></defs><line id="SvgjsLine1012" x1="0" y1="0" x2="0" y2="60" stroke="#b6b6b6" stroke-dasharray="3" class="apexcharts-xcrosshairs" x="0" y="0" width="1" height="60" fill="#b1b9c4" filter="none" fill-opacity="0.9" stroke-width="1"></line><g id="SvgjsG1026" class="apexcharts-xaxis" transform="translate(0, 0)"><g id="SvgjsG1027" class="apexcharts-xaxis-texts-g" transform="translate(0, -4)"></g></g><g id="SvgjsG1029" class="apexcharts-grid"><g id="SvgjsG1030" class="apexcharts-gridlines-horizontal" style="display: none;"><line id="SvgjsLine1032" x1="0" y1="0" x2="100" y2="0" stroke="#e0e0e0" stroke-dasharray="0" class="apexcharts-gridline"></line><line id="SvgjsLine1033" x1="0" y1="6" x2="100" y2="6" stroke="#e0e0e0" stroke-dasharray="0" class="apexcharts-gridline"></line><line id="SvgjsLine1034" x1="0" y1="12" x2="100" y2="12" stroke="#e0e0e0" stroke-dasharray="0" class="apexcharts-gridline"></line><line id="SvgjsLine1035" x1="0" y1="18" x2="100" y2="18" stroke="#e0e0e0" stroke-dasharray="0" class="apexcharts-gridline"></line><line id="SvgjsLine1036" x1="0" y1="24" x2="100" y2="24" stroke="#e0e0e0" stroke-dasharray="0" class="apexcharts-gridline"></line><line id="SvgjsLine1037" x1="0" y1="30" x2="100" y2="30" stroke="#e0e0e0" stroke-dasharray="0" class="apexcharts-gridline"></line><line id="SvgjsLine1038" x1="0" y1="36" x2="100" y2="36" stroke="#e0e0e0" stroke-dasharray="0" class="apexcharts-gridline"></line><line id="SvgjsLine1039" x1="0" y1="42" x2="100" y2="42" stroke="#e0e0e0" stroke-dasharray="0" class="apexcharts-gridline"></line><line id="SvgjsLine1040" x1="0" y1="48" x2="100" y2="48" stroke="#e0e0e0" stroke-dasharray="0" class="apexcharts-gridline"></line><line id="SvgjsLine1041" x1="0" y1="54" x2="100" y2="54" stroke="#e0e0e0" stroke-dasharray="0" class="apexcharts-gridline"></line><line id="SvgjsLine1042" x1="0" y1="60" x2="100" y2="60" stroke="#e0e0e0" stroke-dasharray="0" class="apexcharts-gridline"></line></g><g id="SvgjsG1031" class="apexcharts-gridlines-vertical" style="display: none;"></g><line id="SvgjsLine1044" x1="0" y1="60" x2="100" y2="60" stroke="transparent" stroke-dasharray="0"></line><line id="SvgjsLine1043" x1="0" y1="1" x2="0" y2="60" stroke="transparent" stroke-dasharray="0"></line></g><g id="SvgjsG1016" class="apexcharts-area-series apexcharts-plot-series"><g id="SvgjsG1017" class="apexcharts-series" seriesName="Sales" data:longestSeries="true" rel="1" data:realIndex="0"><path id="SvgjsPath1024" d="M-1 60L-1 60L20 60L40 60L60 60L80 60L100 60 " fill="url(#SvgjsLinearGradient1020)" fill-opacity="1" stroke-opacity="1" stroke-linecap="butt" stroke-width="0" stroke-dasharray="0" class="apexcharts-area" index="0" clip-path="url(#gridRectMask3r6h2twn)" pathTo="M 0 60L 0 37.5C 7 37.5 13 33.75 20 33.75C 27 33.75 33 43.125 40 43.125C 47 43.125 53 9.375 60 9.375C 67 9.375 73 0 80 0C 87 0 93 31.875 100 31.875C 100 31.875 100 31.875 100 60M 100 31.875z" pathFrom="M -1 60L -1 60L 20 60L 40 60L 60 60L 80 60L 100 60"></path><path id="SvgjsPath1025" d="M-1 60L-1 60L20 60L40 60L60 60L80 60L100 60 " fill="none" fill-opacity="1" stroke="#01b075" stroke-opacity="1" stroke-linecap="butt" stroke-width="4" stroke-dasharray="0" class="apexcharts-area" index="0" clip-path="url(#gridRectMask3r6h2twn)" pathTo="M 0 37.5C 7 37.5 13 33.75 20 33.75C 27 33.75 33 43.125 40 43.125C 47 43.125 53 9.375 60 9.375C 67 9.375 73 0 80 0C 87 0 93 31.875 100 31.875" pathFrom="M -1 60L -1 60L 20 60L 40 60L 60 60L 80 60L 100 60"></path><g id="SvgjsG1018" class="apexcharts-series-markers-wrap apexcharts-element-hidden" data:realIndex="0"><g class="apexcharts-series-markers"><circle id="SvgjsCircle1050" r="0" cx="0" cy="0" class="apexcharts-marker wtcffl892 no-pointer-events" stroke="#ffffff" fill="#01b075" fill-opacity="1" stroke-width="2" stroke-opacity="0.9" default-marker-size="0"></circle></g></g></g><g id="SvgjsG1019" class="apexcharts-datalabels" data:realIndex="0"></g></g><line id="SvgjsLine1045" x1="0" y1="0" x2="100" y2="0" stroke="#b6b6b6" stroke-dasharray="0" stroke-width="1" class="apexcharts-ycrosshairs"></line><line id="SvgjsLine1046" x1="0" y1="0" x2="100" y2="0" stroke-dasharray="0" stroke-width="0" class="apexcharts-ycrosshairs-hidden"></line><g id="SvgjsG1047" class="apexcharts-yaxis-annotations apexcharts-element-hidden"></g><g id="SvgjsG1048" class="apexcharts-xaxis-annotations apexcharts-element-hidden"></g><g id="SvgjsG1049" class="apexcharts-point-annotations apexcharts-element-hidden"></g></g><rect id="SvgjsRect1011" width="0" height="0" x="0" y="0" rx="0" ry="0" opacity="1" stroke-width="0" stroke="none" stroke-dasharray="0" fill="#fefefe"></rect><g id="SvgjsG1028" class="apexcharts-yaxis" rel="0" transform="translate(-18, 0)"></g><g id="SvgjsG1009" class="apexcharts-annotations"></g></svg><div class="apexcharts-legend"></div><div class="apexcharts-tooltip apexcharts-theme-light"><div class="apexcharts-tooltip-title" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;"></div><div class="apexcharts-tooltip-series-group"><span class="apexcharts-tooltip-marker" style="background-color: rgb(1, 176, 117);"></span><div class="apexcharts-tooltip-text" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;"><div class="apexcharts-tooltip-y-group"><span class="apexcharts-tooltip-text-label"></span><span class="apexcharts-tooltip-text-value"></span></div><div class="apexcharts-tooltip-z-group"><span class="apexcharts-tooltip-text-z-label"></span><span class="apexcharts-tooltip-text-z-value"></span></div></div></div></div><div class="apexcharts-yaxistooltip apexcharts-yaxistooltip-0 apexcharts-yaxistooltip-left apexcharts-theme-light"><div class="apexcharts-yaxistooltip-text"></div></div></div></div> <div class="resize-triggers"><div class="expand-trigger"><div style="width: 21px; height: 21px;"></div></div><div class="contract-trigger"></div></div></div> </div> </div> <div class="box-footer"> <div class="d-flex align-items-center justify-content-between"> <h5 class="my-0">6 total orders</h5> <a href="#" class="mb-0">View Report</a> </div> </div> </div> <div class="box no-shadow box-bordered border-light"> <div class="box-body"> <div class="d-flex justify-content-between align-items-center"> <div> <h5>Total Sessions</h5> <h2 class="mb-0">845</h2> </div> <div class="p-10" style="position: relative;"> <div id="chart-spark2" style="min-height: 60px;"><div id="apexcharts7peaeug2" class="apexcharts-canvas apexcharts7peaeug2 apexcharts-theme-light" style="width: 100px; height: 60px;"><svg id="SvgjsSvg1051" width="100" height="60" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" class="apexcharts-svg" xmlns:data="ApexChartsNS" transform="translate(0, 0)" style="background: transparent;"><g id="SvgjsG1053" class="apexcharts-inner apexcharts-graphical" transform="translate(0, 0)"><defs id="SvgjsDefs1052"><clipPath id="gridRectMask7peaeug2"><rect id="SvgjsRect1058" width="108" height="64" x="-4" y="-2" rx="0" ry="0" opacity="1" stroke-width="0" stroke="none" stroke-dasharray="0" fill="#fff"></rect></clipPath><clipPath id="gridRectMarkerMask7peaeug2"><rect id="SvgjsRect1059" width="104" height="64" x="-2" y="-2" rx="0" ry="0" opacity="1" stroke-width="0" stroke="none" stroke-dasharray="0" fill="#fff"></rect></clipPath><linearGradient id="SvgjsLinearGradient1065" x1="0" y1="0" x2="0" y2="1"><stop id="SvgjsStop1066" stop-opacity="0.65" stop-color="rgba(76,149,221,0.65)" offset="0"></stop><stop id="SvgjsStop1067" stop-opacity="0.5" stop-color="rgba(166,202,238,0.5)" offset="1"></stop><stop id="SvgjsStop1068" stop-opacity="0.5" stop-color="rgba(166,202,238,0.5)" offset="1"></stop></linearGradient></defs><line id="SvgjsLine1057" x1="0" y1="0" x2="0" y2="60" stroke="#b6b6b6" stroke-dasharray="3" class="apexcharts-xcrosshairs" x="0" y="0" width="1" height="60" fill="#b1b9c4" filter="none" fill-opacity="0.9" stroke-width="1"></line><g id="SvgjsG1071" class="apexcharts-xaxis" transform="translate(0, 0)"><g id="SvgjsG1072" class="apexcharts-xaxis-texts-g" transform="translate(0, -4)"></g></g><g id="SvgjsG1074" class="apexcharts-grid"><g id="SvgjsG1075" class="apexcharts-gridlines-horizontal" style="display: none;"><line id="SvgjsLine1077" x1="0" y1="0" x2="100" y2="0" stroke="#e0e0e0" stroke-dasharray="0" class="apexcharts-gridline"></line><line id="SvgjsLine1078" x1="0" y1="6" x2="100" y2="6" stroke="#e0e0e0" stroke-dasharray="0" class="apexcharts-gridline"></line><line id="SvgjsLine1079" x1="0" y1="12" x2="100" y2="12" stroke="#e0e0e0" stroke-dasharray="0" class="apexcharts-gridline"></line><line id="SvgjsLine1080" x1="0" y1="18" x2="100" y2="18" stroke="#e0e0e0" stroke-dasharray="0" class="apexcharts-gridline"></line><line id="SvgjsLine1081" x1="0" y1="24" x2="100" y2="24" stroke="#e0e0e0" stroke-dasharray="0" class="apexcharts-gridline"></line><line id="SvgjsLine1082" x1="0" y1="30" x2="100" y2="30" stroke="#e0e0e0" stroke-dasharray="0" class="apexcharts-gridline"></line><line id="SvgjsLine1083" x1="0" y1="36" x2="100" y2="36" stroke="#e0e0e0" stroke-dasharray="0" class="apexcharts-gridline"></line><line id="SvgjsLine1084" x1="0" y1="42" x2="100" y2="42" stroke="#e0e0e0" stroke-dasharray="0" class="apexcharts-gridline"></line><line id="SvgjsLine1085" x1="0" y1="48" x2="100" y2="48" stroke="#e0e0e0" stroke-dasharray="0" class="apexcharts-gridline"></line><line id="SvgjsLine1086" x1="0" y1="54" x2="100" y2="54" stroke="#e0e0e0" stroke-dasharray="0" class="apexcharts-gridline"></line><line id="SvgjsLine1087" x1="0" y1="60" x2="100" y2="60" stroke="#e0e0e0" stroke-dasharray="0" class="apexcharts-gridline"></line></g><g id="SvgjsG1076" class="apexcharts-gridlines-vertical" style="display: none;"></g><line id="SvgjsLine1089" x1="0" y1="60" x2="100" y2="60" stroke="transparent" stroke-dasharray="0"></line><line id="SvgjsLine1088" x1="0" y1="1" x2="0" y2="60" stroke="transparent" stroke-dasharray="0"></line></g><g id="SvgjsG1061" class="apexcharts-area-series apexcharts-plot-series"><g id="SvgjsG1062" class="apexcharts-series" seriesName="Sessions" data:longestSeries="true" rel="1" data:realIndex="0"><path id="SvgjsPath1069" d="M-1 60L-1 60L20 60L40 60L60 60L80 60L100 60 " fill="url(#SvgjsLinearGradient1065)" fill-opacity="1" stroke-opacity="1" stroke-linecap="butt" stroke-width="0" stroke-dasharray="0" class="apexcharts-area" index="0" clip-path="url(#gridRectMask7peaeug2)" pathTo="M 0 60L 0 37.5C 7 37.5 13 33.75 20 33.75C 27 33.75 33 43.125 40 43.125C 47 43.125 53 9.375 60 9.375C 67 9.375 73 0 80 0C 87 0 93 31.875 100 31.875C 100 31.875 100 31.875 100 60M 100 31.875z" pathFrom="M -1 60L -1 60L 20 60L 40 60L 60 60L 80 60L 100 60"></path><path id="SvgjsPath1070" d="M-1 60L-1 60L20 60L40 60L60 60L80 60L100 60 " fill="none" fill-opacity="1" stroke="#4c95dd" stroke-opacity="1" stroke-linecap="butt" stroke-width="4" stroke-dasharray="0" class="apexcharts-area" index="0" clip-path="url(#gridRectMask7peaeug2)" pathTo="M 0 37.5C 7 37.5 13 33.75 20 33.75C 27 33.75 33 43.125 40 43.125C 47 43.125 53 9.375 60 9.375C 67 9.375 73 0 80 0C 87 0 93 31.875 100 31.875" pathFrom="M -1 60L -1 60L 20 60L 40 60L 60 60L 80 60L 100 60"></path><g id="SvgjsG1063" class="apexcharts-series-markers-wrap apexcharts-element-hidden" data:realIndex="0"><g class="apexcharts-series-markers"><circle id="SvgjsCircle1095" r="0" cx="0" cy="0" class="apexcharts-marker w8ou4a1pk no-pointer-events" stroke="#ffffff" fill="#4c95dd" fill-opacity="1" stroke-width="2" stroke-opacity="0.9" default-marker-size="0"></circle></g></g></g><g id="SvgjsG1064" class="apexcharts-datalabels" data:realIndex="0"></g></g><line id="SvgjsLine1090" x1="0" y1="0" x2="100" y2="0" stroke="#b6b6b6" stroke-dasharray="0" stroke-width="1" class="apexcharts-ycrosshairs"></line><line id="SvgjsLine1091" x1="0" y1="0" x2="100" y2="0" stroke-dasharray="0" stroke-width="0" class="apexcharts-ycrosshairs-hidden"></line><g id="SvgjsG1092" class="apexcharts-yaxis-annotations apexcharts-element-hidden"></g><g id="SvgjsG1093" class="apexcharts-xaxis-annotations apexcharts-element-hidden"></g><g id="SvgjsG1094" class="apexcharts-point-annotations apexcharts-element-hidden"></g></g><rect id="SvgjsRect1056" width="0" height="0" x="0" y="0" rx="0" ry="0" opacity="1" stroke-width="0" stroke="none" stroke-dasharray="0" fill="#fefefe"></rect><g id="SvgjsG1073" class="apexcharts-yaxis" rel="0" transform="translate(-18, 0)"></g><g id="SvgjsG1054" class="apexcharts-annotations"></g></svg><div class="apexcharts-legend"></div><div class="apexcharts-tooltip apexcharts-theme-light"><div class="apexcharts-tooltip-title" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;"></div><div class="apexcharts-tooltip-series-group"><span class="apexcharts-tooltip-marker" style="background-color: rgb(76, 149, 221);"></span><div class="apexcharts-tooltip-text" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;"><div class="apexcharts-tooltip-y-group"><span class="apexcharts-tooltip-text-label"></span><span class="apexcharts-tooltip-text-value"></span></div><div class="apexcharts-tooltip-z-group"><span class="apexcharts-tooltip-text-z-label"></span><span class="apexcharts-tooltip-text-z-value"></span></div></div></div></div><div class="apexcharts-yaxistooltip apexcharts-yaxistooltip-0 apexcharts-yaxistooltip-left apexcharts-theme-light"><div class="apexcharts-yaxistooltip-text"></div></div></div></div> <div class="resize-triggers"><div class="expand-trigger"><div style="width: 21px; height: 21px;"></div></div><div class="contract-trigger"></div></div></div> </div> </div> <div class="box-footer"> <div class="d-flex align-items-center justify-content-between"> <a href="#" class="btn btn-primary-light btn-sm">Live</a> <a href="#" class="btn btn-info-light btn-sm">4 Visitors</a> <a href="#" class="btn btn-success-light btn-sm">See Live View</a> </div> </div> </div> <div class="box no-shadow box-bordered border-light"> <div class="box-body"> <div class="d-flex justify-content-between align-items-center"> <div> <h5>Customer rate</h5> <h2 class="mb-0">5.12%</h2> </div> <div class="p-10" style="position: relative;"> <div id="chart3" style="min-height: 135px;"><div id="apexchartsd4anzix5h" class="apexcharts-canvas apexchartsd4anzix5h apexcharts-theme-light" style="width: 150px; height: 120px;"><svg id="SvgjsSvg1096" width="150" height="120" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" class="apexcharts-svg" xmlns:data="ApexChartsNS" transform="translate(0, 0)" style="background: transparent;"><g id="SvgjsG1098" class="apexcharts-inner apexcharts-graphical" transform="translate(22, 30)"><defs id="SvgjsDefs1097"><clipPath id="gridRectMaskd4anzix5h"><rect id="SvgjsRect1104" width="122.5" height="68.5" x="-2.25" y="-0.25" rx="0" ry="0" opacity="1" stroke-width="0" stroke="none" stroke-dasharray="0" fill="#fff"></rect></clipPath><clipPath id="gridRectMarkerMaskd4anzix5h"><rect id="SvgjsRect1105" width="122" height="72" x="-2" y="-2" rx="0" ry="0" opacity="1" stroke-width="0" stroke="none" stroke-dasharray="0" fill="#fff"></rect></clipPath><linearGradient id="SvgjsLinearGradient1111" x1="0" y1="0" x2="0" y2="1"><stop id="SvgjsStop1112" stop-opacity="0.65" stop-color="rgba(230,100,48,0.65)" offset="0"></stop><stop id="SvgjsStop1113" stop-opacity="0.5" stop-color="rgba(243,178,152,0.5)" offset="1"></stop><stop id="SvgjsStop1114" stop-opacity="0.5" stop-color="rgba(243,178,152,0.5)" offset="1"></stop></linearGradient><linearGradient id="SvgjsLinearGradient1120" x1="0" y1="0" x2="0" y2="1"><stop id="SvgjsStop1121" stop-opacity="0.65" stop-color="rgba(76,149,221,0.65)" offset="0"></stop><stop id="SvgjsStop1122" stop-opacity="0.5" stop-color="rgba(166,202,238,0.5)" offset="1"></stop><stop id="SvgjsStop1123" stop-opacity="0.5" stop-color="rgba(166,202,238,0.5)" offset="1"></stop></linearGradient></defs><line id="SvgjsLine1103" x1="0" y1="0" x2="0" y2="68" stroke="#b6b6b6" stroke-dasharray="3" class="apexcharts-xcrosshairs" x="0" y="0" width="1" height="68" fill="#b1b9c4" filter="none" fill-opacity="0.9" stroke-width="1"></line><g id="SvgjsG1126" class="apexcharts-xaxis" transform="translate(0, 0)"><g id="SvgjsG1127" class="apexcharts-xaxis-texts-g" transform="translate(0, 2.75)"></g><line id="SvgjsLine1128" x1="0" y1="69" x2="118" y2="69" stroke="#e0e0e0" stroke-dasharray="0" stroke-width="1"></line></g><g id="SvgjsG1131" class="apexcharts-grid"><g id="SvgjsG1132" class="apexcharts-gridlines-horizontal" style="display: none;"><line id="SvgjsLine1134" x1="0" y1="0" x2="118" y2="0" stroke="#e0e0e0" stroke-dasharray="0" class="apexcharts-gridline"></line><line id="SvgjsLine1135" x1="0" y1="17" x2="118" y2="17" stroke="#e0e0e0" stroke-dasharray="0" class="apexcharts-gridline"></line><line id="SvgjsLine1136" x1="0" y1="34" x2="118" y2="34" stroke="#e0e0e0" stroke-dasharray="0" class="apexcharts-gridline"></line><line id="SvgjsLine1137" x1="0" y1="51" x2="118" y2="51" stroke="#e0e0e0" stroke-dasharray="0" class="apexcharts-gridline"></line><line id="SvgjsLine1138" x1="0" y1="68" x2="118" y2="68" stroke="#e0e0e0" stroke-dasharray="0" class="apexcharts-gridline"></line></g><g id="SvgjsG1133" class="apexcharts-gridlines-vertical" style="display: none;"></g><line id="SvgjsLine1140" x1="0" y1="68" x2="118" y2="68" stroke="transparent" stroke-dasharray="0"></line><line id="SvgjsLine1139" x1="0" y1="1" x2="0" y2="68" stroke="transparent" stroke-dasharray="0"></line></g><g id="SvgjsG1107" class="apexcharts-area-series apexcharts-plot-series"><g id="SvgjsG1117" class="apexcharts-series" seriesName="Returning" data:longestSeries="true" rel="2" data:realIndex="1"><path id="SvgjsPath1124" d="M-1 68L-1 68L19.666666666666664 68L39.33333333333333 68L58.99999999999999 68L78.66666666666666 68L98.33333333333333 68L117.99999999999999 68 " fill="url(#SvgjsLinearGradient1120)" fill-opacity="1" stroke-opacity="1" stroke-linecap="butt" stroke-width="0" stroke-dasharray="0" class="apexcharts-area" index="1" clip-path="url(#gridRectMaskd4anzix5h)" pathTo="M 0 68L 0 61.766666666666666C 6.883333333333332 61.766666666666666 12.783333333333331 49.86666666666667 19.666666666666664 49.86666666666667C 26.549999999999997 49.86666666666667 32.449999999999996 42.5 39.33333333333333 42.5C 46.21666666666666 42.5 52.11666666666666 49.86666666666667 58.99999999999999 49.86666666666667C 65.88333333333333 49.86666666666667 71.78333333333333 48.733333333333334 78.66666666666666 48.733333333333334C 85.55 48.733333333333334 91.44999999999999 38.53333333333333 98.33333333333333 38.53333333333333C 105.21666666666665 38.53333333333333 111.11666666666666 44.766666666666666 117.99999999999999 44.766666666666666C 117.99999999999999 44.766666666666666 117.99999999999999 44.766666666666666 117.99999999999999 68M 117.99999999999999 44.766666666666666z" pathFrom="M -1 68L -1 68L 19.666666666666664 68L 39.33333333333333 68L 58.99999999999999 68L 78.66666666666666 68L 98.33333333333333 68L 117.99999999999999 68"></path><path id="SvgjsPath1125" d="M-1 68L-1 68L19.666666666666664 68L39.33333333333333 68L58.99999999999999 68L78.66666666666666 68L98.33333333333333 68L117.99999999999999 68 " fill="none" fill-opacity="1" stroke="#4c95dd" stroke-opacity="1" stroke-linecap="butt" stroke-width="0.5" stroke-dasharray="0" class="apexcharts-area" index="1" clip-path="url(#gridRectMaskd4anzix5h)" pathTo="M 0 61.766666666666666C 6.883333333333332 61.766666666666666 12.783333333333331 49.86666666666667 19.666666666666664 49.86666666666667C 26.549999999999997 49.86666666666667 32.449999999999996 42.5 39.33333333333333 42.5C 46.21666666666666 42.5 52.11666666666666 49.86666666666667 58.99999999999999 49.86666666666667C 65.88333333333333 49.86666666666667 71.78333333333333 48.733333333333334 78.66666666666666 48.733333333333334C 85.55 48.733333333333334 91.44999999999999 38.53333333333333 98.33333333333333 38.53333333333333C 105.21666666666665 38.53333333333333 111.11666666666666 44.766666666666666 117.99999999999999 44.766666666666666" pathFrom="M -1 68L -1 68L 19.666666666666664 68L 39.33333333333333 68L 58.99999999999999 68L 78.66666666666666 68L 98.33333333333333 68L 117.99999999999999 68"></path><g id="SvgjsG1118" class="apexcharts-series-markers-wrap apexcharts-element-hidden" data:realIndex="1"><g class="apexcharts-series-markers"><circle id="SvgjsCircle1147" r="0" cx="0" cy="0" class="apexcharts-marker wubkx9e6b no-pointer-events" stroke="#ffffff" fill="#4c95dd" fill-opacity="1" stroke-width="2" stroke-opacity="0.9" default-marker-size="0"></circle></g></g></g><g id="SvgjsG1108" class="apexcharts-series" seriesName="FirstxTime" data:longestSeries="true" rel="1" data:realIndex="0"><path id="SvgjsPath1115" d="M-1 68L-1 68L19.666666666666664 68L39.33333333333333 68L58.99999999999999 68L78.66666666666666 68L98.33333333333333 68L117.99999999999999 68 " fill="url(#SvgjsLinearGradient1111)" fill-opacity="1" stroke-opacity="1" stroke-linecap="butt" stroke-width="0" stroke-dasharray="0" class="apexcharts-area" index="0" clip-path="url(#gridRectMaskd4anzix5h)" pathTo="M 0 68L 0 50.43333333333334C 6.883333333333332 50.43333333333334 12.783333333333331 45.33333333333333 19.666666666666664 45.33333333333333C 26.549999999999997 45.33333333333333 32.449999999999996 52.13333333333333 39.33333333333333 52.13333333333333C 46.21666666666666 52.13333333333333 52.11666666666666 39.099999999999994 58.99999999999999 39.099999999999994C 65.88333333333333 39.099999999999994 71.78333333333333 44.2 78.66666666666666 44.2C 85.55 44.2 91.44999999999999 6.233333333333334 98.33333333333333 6.233333333333334C 105.21666666666665 6.233333333333334 111.11666666666666 11.333333333333329 117.99999999999999 11.333333333333329C 117.99999999999999 11.333333333333329 117.99999999999999 11.333333333333329 117.99999999999999 68M 117.99999999999999 11.333333333333329z" pathFrom="M -1 68L -1 68L 19.666666666666664 68L 39.33333333333333 68L 58.99999999999999 68L 78.66666666666666 68L 98.33333333333333 68L 117.99999999999999 68"></path><path id="SvgjsPath1116" d="M-1 68L-1 68L19.666666666666664 68L39.33333333333333 68L58.99999999999999 68L78.66666666666666 68L98.33333333333333 68L117.99999999999999 68 " fill="none" fill-opacity="1" stroke="#e66430" stroke-opacity="1" stroke-linecap="butt" stroke-width="0.5" stroke-dasharray="0" class="apexcharts-area" index="0" clip-path="url(#gridRectMaskd4anzix5h)" pathTo="M 0 50.43333333333334C 6.883333333333332 50.43333333333334 12.783333333333331 45.33333333333333 19.666666666666664 45.33333333333333C 26.549999999999997 45.33333333333333 32.449999999999996 52.13333333333333 39.33333333333333 52.13333333333333C 46.21666666666666 52.13333333333333 52.11666666666666 39.099999999999994 58.99999999999999 39.099999999999994C 65.88333333333333 39.099999999999994 71.78333333333333 44.2 78.66666666666666 44.2C 85.55 44.2 91.44999999999999 6.233333333333334 98.33333333333333 6.233333333333334C 105.21666666666665 6.233333333333334 111.11666666666666 11.333333333333329 117.99999999999999 11.333333333333329" pathFrom="M -1 68L -1 68L 19.666666666666664 68L 39.33333333333333 68L 58.99999999999999 68L 78.66666666666666 68L 98.33333333333333 68L 117.99999999999999 68"></path><g id="SvgjsG1109" class="apexcharts-series-markers-wrap apexcharts-element-hidden" data:realIndex="0"><g class="apexcharts-series-markers"><circle id="SvgjsCircle1146" r="0" cx="0" cy="0" class="apexcharts-marker wzwgfv94d no-pointer-events" stroke="#ffffff" fill="#e66430" fill-opacity="1" stroke-width="2" stroke-opacity="0.9" default-marker-size="0"></circle></g></g><g id="SvgjsG1110" class="apexcharts-datalabels" data:realIndex="0"></g></g><g id="SvgjsG1119" class="apexcharts-datalabels" data:realIndex="1"></g></g><line id="SvgjsLine1141" x1="0" y1="0" x2="118" y2="0" stroke="#b6b6b6" stroke-dasharray="0" stroke-width="1" class="apexcharts-ycrosshairs"></line><line id="SvgjsLine1142" x1="0" y1="0" x2="118" y2="0" stroke-dasharray="0" stroke-width="0" class="apexcharts-ycrosshairs-hidden"></line><g id="SvgjsG1143" class="apexcharts-yaxis-annotations apexcharts-element-hidden"></g><g id="SvgjsG1144" class="apexcharts-xaxis-annotations apexcharts-element-hidden"></g><g id="SvgjsG1145" class="apexcharts-point-annotations apexcharts-element-hidden"></g></g><rect id="SvgjsRect1102" width="0" height="0" x="0" y="0" rx="0" ry="0" opacity="1" stroke-width="0" stroke="none" stroke-dasharray="0" fill="#fefefe"></rect><g id="SvgjsG1129" class="apexcharts-yaxis" rel="0" transform="translate(-8, 0)"><g id="SvgjsG1130" class="apexcharts-yaxis-texts-g"></g></g><g id="SvgjsG1099" class="apexcharts-annotations"></g></svg><div class="apexcharts-legend"></div><div class="apexcharts-tooltip apexcharts-theme-light"><div class="apexcharts-tooltip-title" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;"></div><div class="apexcharts-tooltip-series-group"><span class="apexcharts-tooltip-marker" style="background-color: rgb(230, 100, 48);"></span><div class="apexcharts-tooltip-text" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;"><div class="apexcharts-tooltip-y-group"><span class="apexcharts-tooltip-text-label"></span><span class="apexcharts-tooltip-text-value"></span></div><div class="apexcharts-tooltip-z-group"><span class="apexcharts-tooltip-text-z-label"></span><span class="apexcharts-tooltip-text-z-value"></span></div></div></div><div class="apexcharts-tooltip-series-group"><span class="apexcharts-tooltip-marker" style="background-color: rgb(76, 149, 221);"></span><div class="apexcharts-tooltip-text" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;"><div class="apexcharts-tooltip-y-group"><span class="apexcharts-tooltip-text-label"></span><span class="apexcharts-tooltip-text-value"></span></div><div class="apexcharts-tooltip-z-group"><span class="apexcharts-tooltip-text-z-label"></span><span class="apexcharts-tooltip-text-z-value"></span></div></div></div></div><div class="apexcharts-xaxistooltip apexcharts-xaxistooltip-bottom apexcharts-theme-light"><div class="apexcharts-xaxistooltip-text" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;"></div></div><div class="apexcharts-yaxistooltip apexcharts-yaxistooltip-0 apexcharts-yaxistooltip-left apexcharts-theme-light"><div class="apexcharts-yaxistooltip-text"></div></div><div class="apexcharts-toolbar" style="top: 0px; right: 3px;"><div class="apexcharts-menu-icon" title="Menu"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"></path><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path></svg></div><div class="apexcharts-menu"><div class="apexcharts-menu-item exportSVG" title="Download SVG">Download SVG</div><div class="apexcharts-menu-item exportPNG" title="Download PNG">Download PNG</div><div class="apexcharts-menu-item exportCSV" title="Download CSV">Download CSV</div></div></div></div></div> <div class="resize-triggers"><div class="expand-trigger"><div style="width: 21px; height: 21px;"></div></div><div class="contract-trigger"></div></div></div> </div> </div> <div class="box-footer"> <div class="d-flex align-items-center justify-content-between"> <h5 class="my-0"><span class="badge badge-xl badge-dot badge-primary me-10"></span>First Time</h5> <h5 class="my-0"><span class="badge badge-xl badge-dot badge-danger me-10"></span>Returning</h5> </div> </div> </div> <div class="box no-shadow box-bordered border-light"> <div class="box-header"> <h4 class="box-title">Resent Activity</h4> </div> <div class="box-body p-5"> <div class="media-list media-list-hover"> <a class="media media-single mb-10 p-0 rounded-0" href="#"> <h4 class="w-50 text-gray fw-500">10:10</h4> <div class="media-body ps-15 bs-5 rounded border-primary"> <p>Morbi quis ex eu arcu auctor sagittis.</p> <span class="text-fade">by Johne</span> </div> </a> <a class="media media-single mb-10 p-0 rounded-0" href="#"> <h4 class="w-50 text-gray fw-500">08:40</h4> <div class="media-body ps-15 bs-5 rounded border-success"> <p>Proin iaculis eros non odio ornare efficitur.</p> <span class="text-fade">by Amla</span> </div> </a> <a class="media media-single mb-10 p-0 rounded-0" href="#"> <h4 class="w-50 text-gray fw-500">07:10</h4> <div class="media-body ps-15 bs-5 rounded border-info"> <p>In mattis mi ut posuere consectetur.</p> <span class="text-fade">by Josef</span> </div> </a> <a class="media media-single mb-10 p-0 rounded-0" href="#"> <h4 class="w-50 text-gray fw-500">01:15</h4> <div class="media-body ps-15 bs-5 rounded border-danger"> <p>Morbi quis ex eu arcu auctor sagittis.</p> <span class="text-fade">by Rima</span> </div> </a> <a class="media media-single mb-10 p-0 rounded-0" href="#"> <h4 class="w-50 text-gray fw-500">23:12</h4> <div class="media-body ps-15 bs-5 rounded border-warning"> <p>Morbi quis ex eu arcu auctor sagittis.</p> <span class="text-fade">by Alaxa</span> </div> </a> </div> </div> <div class="box-footer"> <div class="text-center"> <a href="#" class="mb-0">Load More</a> </div> </div> </div> </div> </div> </div><div class="slimScrollBar" style="background: rgb(0, 0, 0); width: 7px; position: absolute; top: 0px; opacity: 0.4; display: block; border-radius: 7px; z-index: 99; right: 1px; height: 811.548px;"></div><div class="slimScrollRail" style="width: 7px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; background: rgb(51, 51, 51); opacity: 0.2; z-index: 90; right: 1px;"></div></div> </div> <!-- /.Content Right Sidebar --> <footer class="main-footer"> <div class="pull-right d-none d-sm-inline-block"> <ul class="nav nav-primary nav-dotted nav-dot-separated justify-content-center justify-content-md-end"> <li class="nav-item"> <a class="nav-link" href="javascript:void(0)">FAQ</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Purchase Now</a> </li> </ul> </div> © 2021 <a href="https://www.multipurposethemes.com/">Multipurpose Themes</a>. All Rights Reserved. </footer> <!-- Control Sidebar --> <aside class="control-sidebar"> <div class="rpanel-title"><span class="pull-right btn btn-circle btn-danger"><i class="ion ion-close text-white" data-toggle="control-sidebar"></i></span> </div> <!-- Create the tabs --> <ul class="nav nav-tabs control-sidebar-tabs"> <li class="nav-item"><a href="#control-sidebar-home-tab" data-bs-toggle="tab" class="active"><i class="mdi mdi-message-text"></i></a></li> <li class="nav-item"><a href="#control-sidebar-settings-tab" data-bs-toggle="tab"><i class="mdi mdi-playlist-check"></i></a></li> </ul> <!-- Tab panes --> <div class="tab-content"> <!-- Home tab content --> <div class="tab-pane active" id="control-sidebar-home-tab"> <div class="flexbox"> <a href="javascript:void(0)" class="text-grey"> <i class="ti-more"></i> </a> <p>Users</p> <a href="javascript:void(0)" class="text-end text-grey"><i class="ti-plus"></i></a> </div> <div class="lookup lookup-sm lookup-right d-none d-lg-block"> <input type="text" name="s" placeholder="Search" class="w-p100"> </div> <div class="media-list media-list-hover mt-20"> <div class="media py-10 px-0"> <a class="avatar avatar-lg status-success" href="#"> <img src="../images/avatar/1.jpg" alt="..."> </a> <div class="media-body"> <p class="fs-16"> <a class="hover-primary" href="#"><strong>Tyler</strong></a> </p> <p>Praesent tristique diam...</p> <span>Just now</span> </div> </div> <div class="media py-10 px-0"> <a class="avatar avatar-lg status-danger" href="#"> <img src="../images/avatar/2.jpg" alt="..."> </a> <div class="media-body"> <p class="fs-16"> <a class="hover-primary" href="#"><strong>Luke</strong></a> </p> <p>Cras tempor diam ...</p> <span>33 min ago</span> </div> </div> <div class="media py-10 px-0"> <a class="avatar avatar-lg status-warning" href="#"> <img src="../images/avatar/3.jpg" alt="..."> </a> <div class="media-body"> <p class="fs-16"> <a class="hover-primary" href="#"><strong>Evan</strong></a> </p> <p>In posuere tortor vel...</p> <span>42 min ago</span> </div> </div> <div class="media py-10 px-0"> <a class="avatar avatar-lg status-primary" href="#"> <img src="../images/avatar/4.jpg" alt="..."> </a> <div class="media-body"> <p class="fs-16"> <a class="hover-primary" href="#"><strong>Evan</strong></a> </p> <p>In posuere tortor vel...</p> <span>42 min ago</span> </div> </div> <div class="media py-10 px-0"> <a class="avatar avatar-lg status-success" href="#"> <img src="../images/avatar/1.jpg" alt="..."> </a> <div class="media-body"> <p class="fs-16"> <a class="hover-primary" href="#"><strong>Tyler</strong></a> </p> <p>Praesent tristique diam...</p> <span>Just now</span> </div> </div> <div class="media py-10 px-0"> <a class="avatar avatar-lg status-danger" href="#"> <img src="../images/avatar/2.jpg" alt="..."> </a> <div class="media-body"> <p class="fs-16"> <a class="hover-primary" href="#"><strong>Luke</strong></a> </p> <p>Cras tempor diam ...</p> <span>33 min ago</span> </div> </div> <div class="media py-10 px-0"> <a class="avatar avatar-lg status-warning" href="#"> <img src="../images/avatar/3.jpg" alt="..."> </a> <div class="media-body"> <p class="fs-16"> <a class="hover-primary" href="#"><strong>Evan</strong></a> </p> <p>In posuere tortor vel...</p> <span>42 min ago</span> </div> </div> <div class="media py-10 px-0"> <a class="avatar avatar-lg status-primary" href="#"> <img src="../images/avatar/4.jpg" alt="..."> </a> <div class="media-body"> <p class="fs-16"> <a class="hover-primary" href="#"><strong>Evan</strong></a> </p> <p>In posuere tortor vel...</p> <span>42 min ago</span> </div> </div> </div> </div> <!-- /.tab-pane --> <!-- Settings tab content --> <div class="tab-pane" id="control-sidebar-settings-tab"> <div class="flexbox"> <a href="javascript:void(0)" class="text-grey"> <i class="ti-more"></i> </a> <p>Todo List</p> <a href="javascript:void(0)" class="text-end text-grey"><i class="ti-plus"></i></a> </div> <ul class="todo-list mt-20"> <li class="py-15 px-5 by-1"> <!-- checkbox --> <input type="checkbox" id="basic_checkbox_1" class="filled-in"> <label for="basic_checkbox_1" class="mb-0 h-15"></label> <!-- todo text --> <span class="text-line">Nulla vitae purus</span> <!-- Emphasis label --> <small class="badge bg-danger"><i class="fa fa-clock-o"></i> 2 mins</small> <!-- General tools such as edit or delete--> <div class="tools"> <i class="fa fa-edit"></i> <i class="fa fa-trash-o"></i> </div> </li> <li class="py-15 px-5"> <!-- checkbox --> <input type="checkbox" id="basic_checkbox_2" class="filled-in"> <label for="basic_checkbox_2" class="mb-0 h-15"></label> <span class="text-line">Phasellus interdum</span> <small class="badge bg-info"><i class="fa fa-clock-o"></i> 4 hours</small> <div class="tools"> <i class="fa fa-edit"></i> <i class="fa fa-trash-o"></i> </div> </li> <li class="py-15 px-5 by-1"> <!-- checkbox --> <input type="checkbox" id="basic_checkbox_3" class="filled-in"> <label for="basic_checkbox_3" class="mb-0 h-15"></label> <span class="text-line">Quisque sodales</span> <small class="badge bg-warning"><i class="fa fa-clock-o"></i> 1 day</small> <div class="tools"> <i class="fa fa-edit"></i> <i class="fa fa-trash-o"></i> </div> </li> <li class="py-15 px-5"> <!-- checkbox --> <input type="checkbox" id="basic_checkbox_4" class="filled-in"> <label for="basic_checkbox_4" class="mb-0 h-15"></label> <span class="text-line">Proin nec mi porta</span> <small class="badge bg-success"><i class="fa fa-clock-o"></i> 3 days</small> <div class="tools"> <i class="fa fa-edit"></i> <i class="fa fa-trash-o"></i> </div> </li> <li class="py-15 px-5 by-1"> <!-- checkbox --> <input type="checkbox" id="basic_checkbox_5" class="filled-in"> <label for="basic_checkbox_5" class="mb-0 h-15"></label> <span class="text-line">Maecenas scelerisque</span> <small class="badge bg-primary"><i class="fa fa-clock-o"></i> 1 week</small> <div class="tools"> <i class="fa fa-edit"></i> <i class="fa fa-trash-o"></i> </div> </li> <li class="py-15 px-5"> <!-- checkbox --> <input type="checkbox" id="basic_checkbox_6" class="filled-in"> <label for="basic_checkbox_6" class="mb-0 h-15"></label> <span class="text-line">Vivamus nec orci</span> <small class="badge bg-info"><i class="fa fa-clock-o"></i> 1 month</small> <div class="tools"> <i class="fa fa-edit"></i> <i class="fa fa-trash-o"></i> </div> </li> <li class="py-15 px-5 by-1"> <!-- checkbox --> <input type="checkbox" id="basic_checkbox_7" class="filled-in"> <label for="basic_checkbox_7" class="mb-0 h-15"></label> <!-- todo text --> <span class="text-line">Nulla vitae purus</span> <!-- Emphasis label --> <small class="badge bg-danger"><i class="fa fa-clock-o"></i> 2 mins</small> <!-- General tools such as edit or delete--> <div class="tools"> <i class="fa fa-edit"></i> <i class="fa fa-trash-o"></i> </div> </li> <li class="py-15 px-5"> <!-- checkbox --> <input type="checkbox" id="basic_checkbox_8" class="filled-in"> <label for="basic_checkbox_8" class="mb-0 h-15"></label> <span class="text-line">Phasellus interdum</span> <small class="badge bg-info"><i class="fa fa-clock-o"></i> 4 hours</small> <div class="tools"> <i class="fa fa-edit"></i> <i class="fa fa-trash-o"></i> </div> </li> <li class="py-15 px-5 by-1"> <!-- checkbox --> <input type="checkbox" id="basic_checkbox_9" class="filled-in"> <label for="basic_checkbox_9" class="mb-0 h-15"></label> <span class="text-line">Quisque sodales</span> <small class="badge bg-warning"><i class="fa fa-clock-o"></i> 1 day</small> <div class="tools"> <i class="fa fa-edit"></i> <i class="fa fa-trash-o"></i> </div> </li> <li class="py-15 px-5"> <!-- checkbox --> <input type="checkbox" id="basic_checkbox_10" class="filled-in"> <label for="basic_checkbox_10" class="mb-0 h-15"></label> <span class="text-line">Proin nec mi porta</span> <small class="badge bg-success"><i class="fa fa-clock-o"></i> 3 days</small> <div class="tools"> <i class="fa fa-edit"></i> <i class="fa fa-trash-o"></i> </div> </li> </ul> </div> <!-- /.tab-pane --> </div> </aside> <!-- /.control-sidebar --> <!-- Add the sidebar's background. This div must be placed immediately after the control sidebar --> <div class="control-sidebar-bg"></div> </div> <!-- ./wrapper --> <!-- ./side demo panel --> <div class="sticky-toolbar"> <a href="https://themeforest.net/item/riday-restaurant-bootstrap-admin-template-webapp/31603200" data-bs-toggle="tooltip" data-bs-placement="left" title="" class="waves-effect waves-light btn btn-success btn-flat mb-5 btn-sm" target="_blank" data-bs-original-title="Buy Now"> <span class="icon-Money"><span class="path1"></span><span class="path2"></span></span> </a> <a href="https://themeforest.net/user/multipurposethemes/portfolio" data-bs-toggle="tooltip" data-bs-placement="left" title="" class="waves-effect waves-light btn btn-danger btn-flat mb-5 btn-sm" target="_blank" data-bs-original-title="Portfolio"> <span class="icon-Image"></span> </a> <a id="chat-popup" href="#" data-bs-toggle="tooltip" data-bs-placement="left" title="" class="waves-effect waves-light btn btn-warning btn-flat btn-sm" data-bs-original-title="Live Chat"> <span class="icon-Group-chat"><span class="path1"></span><span class="path2"></span></span> </a> </div> <!-- Sidebar --> <div id="chat-box-body"> <div id="chat-circle" class="waves-effect waves-circle btn btn-circle btn-sm btn-warning l-h-45"> <div id="chat-overlay"></div> <span class="icon-Group-chat fs-18"><span class="path1"></span><span class="path2"></span></span> </div> <div class="chat-box"> <div class="chat-box-header p-15 d-flex justify-content-between align-items-center"> <div class="btn-group"> <button class="waves-effect waves-circle btn btn-circle btn-primary-light h-40 w-40 rounded-circle l-h-45" type="button" data-bs-toggle="dropdown"> <span class="icon-Add-user fs-22"><span class="path1"></span><span class="path2"></span></span> </button> <div class="dropdown-menu min-w-200"> <a class="dropdown-item fs-16" href="#"> <span class="icon-Color me-15"></span> New Group</a> <a class="dropdown-item fs-16" href="#"> <span class="icon-Clipboard me-15"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></span> Contacts</a> <a class="dropdown-item fs-16" href="#"> <span class="icon-Group me-15"><span class="path1"></span><span class="path2"></span></span> Groups</a> <a class="dropdown-item fs-16" href="#"> <span class="icon-Active-call me-15"><span class="path1"></span><span class="path2"></span></span> Calls</a> <a class="dropdown-item fs-16" href="#"> <span class="icon-Settings1 me-15"><span class="path1"></span><span class="path2"></span></span> Settings</a> <div class="dropdown-divider"></div> <a class="dropdown-item fs-16" href="#"> <span class="icon-Question-circle me-15"><span class="path1"></span><span class="path2"></span></span> Help</a> <a class="dropdown-item fs-16" href="#"> <span class="icon-Notifications me-15"><span class="path1"></span><span class="path2"></span></span> Privacy</a> </div> </div> <div class="text-center flex-grow-1"> <div class="text-dark fs-18">Mayra Sibley</div> <div> <span class="badge badge-sm badge-dot badge-primary"></span> <span class="text-muted fs-12">Active</span> </div> </div> <div class="chat-box-toggle"> <button id="chat-box-toggle" class="waves-effect waves-circle btn btn-circle btn-danger-light h-40 w-40 rounded-circle l-h-45" type="button"> <span class="icon-Close fs-22"><span class="path1"></span><span class="path2"></span></span> </button> </div> </div> <div class="chat-box-body"> <div class="chat-box-overlay"> </div> <div class="chat-logs"> <div class="chat-msg user"> <div class="d-flex align-items-center"> <span class="msg-avatar"> <img src="../images/avatar/2.jpg" class="avatar avatar-lg"> </span> <div class="mx-10"> <a href="#" class="text-dark hover-primary fw-bold">Mayra Sibley</a> <p class="text-muted fs-12 mb-0">2 Hours</p> </div> </div> <div class="cm-msg-text"> Hi there, I'm Jesse and you? </div> </div> <div class="chat-msg self"> <div class="d-flex align-items-center justify-content-end"> <div class="mx-10"> <a href="#" class="text-dark hover-primary fw-bold">You</a> <p class="text-muted fs-12 mb-0">3 minutes</p> </div> <span class="msg-avatar"> <img src="../images/avatar/3.jpg" class="avatar avatar-lg"> </span> </div> <div class="cm-msg-text"> My name is Anne Clarc. </div> </div> <div class="chat-msg user"> <div class="d-flex align-items-center"> <span class="msg-avatar"> <img src="../images/avatar/2.jpg" class="avatar avatar-lg"> </span> <div class="mx-10"> <a href="#" class="text-dark hover-primary fw-bold">Mayra Sibley</a> <p class="text-muted fs-12 mb-0">40 seconds</p> </div> </div> <div class="cm-msg-text"> Nice to meet you Anne.<br>How can i help you? </div> </div> </div><!--chat-log --> </div> <div class="chat-input"> <form> <input type="text" id="chat-input" placeholder="Send a message..."> <button type="submit" class="chat-submit" id="chat-submit"> <span class="icon-Send fs-22"></span> </button> </form> </div> </div> </div> <!-- Page Content overlay --> <!-- Vendor JS --> <!-- Riday Admin App --> <svg id="SvgjsSvg1001" width="2" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" style="overflow: hidden; top: -100%; left: -100%; position: absolute; opacity: 0;"><defs id="SvgjsDefs1002"></defs><polyline id="SvgjsPolyline1003" points="0,0"></polyline><path id="SvgjsPath1004" d="M0 0 "></path></svg> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> </body> </html>
