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
Editors
Forms
Editors
CK Editor
Advanced and full of features
This is my textarea to be replaced with CKEditor. </form> </div> </div> <!-- /.box --> <div class="box"> <div class="box-header"> <h4 class="box-title">Bootstrap WYSIHTML5<br> <small>Bootstrap html5 editor</small> </h4> </div> <!-- /.box-header --> <div class="box-body"> <form> <ul class="wysihtml5-toolbar" style=""><li class="dropdown"> <a class="btn btn-default dropdown-toggle " data-toggle="dropdown"> <span class="glyphicon glyphicon-font"></span> <span class="current-font">Normal text</span> <b class="caret"></b> </a> <ul class="dropdown-menu"> <li class="dropdown-item"><a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="p" tabindex="-1" href="javascript:;" unselectable="on">Normal text</a></li> <li class="dropdown-item"><a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h1" tabindex="-1" href="javascript:;" unselectable="on">Heading 1</a></li> <li class="dropdown-item"><a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h2" tabindex="-1" href="javascript:;" unselectable="on">Heading 2</a></li> <li class="dropdown-item"><a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h3" tabindex="-1" href="javascript:;" unselectable="on">Heading 3</a></li> <li class="dropdown-item"><a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h4" tabindex="-1" href="javascript:;" unselectable="on">Heading 4</a></li> <li class="dropdown-item"><a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h5" tabindex="-1" href="javascript:;" unselectable="on">Heading 5</a></li> <li class="dropdown-item"><a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h6" tabindex="-1" href="javascript:;" unselectable="on">Heading 6</a></li> </ul> </li> <li> <div class="btn-group"> <a class="btn btn-default" data-wysihtml5-command="bold" title="CTRL+B" tabindex="-1" href="javascript:;" unselectable="on">Bold</a> <a class="btn btn-default" data-wysihtml5-command="italic" title="CTRL+I" tabindex="-1" href="javascript:;" unselectable="on">Italic</a> <a class="btn btn-default" data-wysihtml5-command="underline" title="CTRL+U" tabindex="-1" href="javascript:;" unselectable="on">Underline</a> <a class="btn btn-default" data-wysihtml5-command="small" title="CTRL+S" tabindex="-1" href="javascript:;" unselectable="on">Small</a> </div> </li> <li> <a class="btn btn-default" data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="blockquote" data-wysihtml5-display-format-name="false" tabindex="-1" href="javascript:;" unselectable="on"> <span class="glyphicon glyphicon-quote"></span> </a> </li> <li> <div class="btn-group"> <a class="btn btn-default" data-wysihtml5-command="insertUnorderedList" title="Unordered list" tabindex="-1" href="javascript:;" unselectable="on"> <span class="glyphicon glyphicon-list"></span> </a> <a class="btn btn-default" data-wysihtml5-command="insertOrderedList" title="Ordered list" tabindex="-1" href="javascript:;" unselectable="on"> <span class="glyphicon glyphicon-th-list"></span> </a> <a class="btn btn-default" data-wysihtml5-command="Outdent" title="Outdent" tabindex="-1" href="javascript:;" unselectable="on"> <span class="glyphicon glyphicon-indent-right"></span> </a> <a class="btn btn-default" data-wysihtml5-command="Indent" title="Indent" tabindex="-1" href="javascript:;" unselectable="on"> <span class="glyphicon glyphicon-indent-left"></span> </a> </div> </li> <li> <div class="bootstrap-wysihtml5-insert-link-modal modal fade" data-wysihtml5-dialog="createLink"> <div class="modal-dialog "> <div class="modal-content"> <div class="modal-header"> <a class="close" data-dismiss="modal">×</a> <h3>Insert link</h3> </div> <div class="modal-body"> <div class="form-group"> <input value="http://" class="bootstrap-wysihtml5-insert-link-url form-control" data-wysihtml5-dialog-field="href"> </div> <div class="checkbox"> <label> <input type="checkbox" class="bootstrap-wysihtml5-insert-link-target" checked="">Open link in new window </label> </div> </div> <div class="modal-footer"> <a class="btn btn-default" data-dismiss="modal" data-wysihtml5-dialog-action="cancel" href="#">Cancel</a> <a href="#" class="btn btn-primary" data-dismiss="modal" data-wysihtml5-dialog-action="save">Insert link</a> </div> </div> </div> </div> <a class="btn btn-default" data-wysihtml5-command="createLink" title="Insert link" tabindex="-1" href="javascript:;" unselectable="on"> <span class="glyphicon glyphicon-link"></span> </a> </li> <li> <div class="bootstrap-wysihtml5-insert-image-modal modal fade" data-wysihtml5-dialog="insertImage"> <div class="modal-dialog "> <div class="modal-content"> <div class="modal-header"> <a class="close" data-dismiss="modal">×</a> <h3>Insert image</h3> </div> <div class="modal-body"> <div class="form-group"> <input value="http://" class="bootstrap-wysihtml5-insert-image-url form-control" data-wysihtml5-dialog-field="src"> </div> </div> <div class="modal-footer"> <a class="btn btn-default" data-dismiss="modal" data-wysihtml5-dialog-action="cancel" href="#">Cancel</a> <a class="btn btn-primary" data-dismiss="modal" data-wysihtml5-dialog-action="save" href="#">Insert image</a> </div> </div> </div> </div> <a class="btn btn-default" data-wysihtml5-command="insertImage" title="Insert image" tabindex="-1" href="javascript:;" unselectable="on"> <span class="glyphicon glyphicon-picture"></span> </a> </li> </form> </div> </div> <!-- /.box --> </div> <!-- /.col--> </div> <!-- ./row --> </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="apexchartsvecb3wc6" class="apexcharts-canvas apexchartsvecb3wc6 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="gridRectMaskvecb3wc6"><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="gridRectMarkerMaskvecb3wc6"><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(#gridRectMaskvecb3wc6)" 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(#gridRectMaskvecb3wc6)" 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 ws4nc638d 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="apexchartsynorzveeg" class="apexcharts-canvas apexchartsynorzveeg 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="gridRectMaskynorzveeg"><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="gridRectMarkerMaskynorzveeg"><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 60C-1 60 20 60 20 60C20 60 40 60 40 60C40 60 60 60 60 60C60 60 80 60 80 60C80 60 100 60 100 60C100 60 100 60 100 60M-1 60C-1 60 -1 60 -1 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(#gridRectMaskynorzveeg)" 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(#gridRectMaskynorzveeg)" 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 w0nczxcet 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="apexchartsxbx47jsu" class="apexcharts-canvas apexchartsxbx47jsu 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="gridRectMaskxbx47jsu"><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="gridRectMarkerMaskxbx47jsu"><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(#gridRectMaskxbx47jsu)" 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(#gridRectMaskxbx47jsu)" 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 w15rxl6cv 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(#gridRectMaskxbx47jsu)" 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(#gridRectMaskxbx47jsu)" 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 wexltk8y9 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="M-1 60L-1 60C-1 60 20 60 20 60C20 60 40 60 40 60C40 60 60 60 60 60C60 60 80 60 80 60C80 60 100 60 100 60C100 60 100 60 100 60 "></path></svg><div class="cke_screen_reader_only cke_copyformatting_notification"><div aria-live="polite"></div></div> <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>
