<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Email Application - Mazer Admin Dashboard</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/css/bootstrap.css">
<link rel="stylesheet" href="assets/css/pages/email.css">
<link rel="stylesheet" href="assets/vendors/perfect-scrollbar/perfect-scrollbar.css">
<link rel="stylesheet" href="assets/vendors/bootstrap-icons/bootstrap-icons.css">
<link rel="stylesheet" href="assets/css/app.css">
<link rel="shortcut icon" href="assets/images/favicon.svg" type="image/x-icon">
</head>
<body>
<div id="app">
<div id="sidebar" class="active">
<div class="sidebar-wrapper active">
<div class="sidebar-header">
<div class="d-flex justify-content-between">
<div class="logo">
<a href="index.html"><img src="assets/images/logo/logo.png" alt="Logo" srcset=""></a>
</div>
<div class="toggler">
<a href="#" class="sidebar-hide d-xl-none d-block"><i class="bi bi-x bi-middle"></i></a>
</div>
</div>
</div>
<div class="sidebar-menu">
<ul class="menu">
<li class="sidebar-title">Menu</li>
<li
class="sidebar-item ">
<a href="index.html" class='sidebar-link'>
<i class="bi bi-grid-fill"></i>
<span>Dashboard</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-stack"></i>
<span>Components</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="component-alert.html">Alert</a>
</li>
<li class="submenu-item ">
<a href="component-badge.html">Badge</a>
</li>
<li class="submenu-item ">
<a href="component-breadcrumb.html">Breadcrumb</a>
</li>
<li class="submenu-item ">
<a href="component-button.html">Button</a>
</li>
<li class="submenu-item ">
<a href="component-card.html">Card</a>
</li>
<li class="submenu-item ">
<a href="component-carousel.html">Carousel</a>
</li>
<li class="submenu-item ">
<a href="component-dropdown.html">Dropdown</a>
</li>
<li class="submenu-item ">
<a href="component-list-group.html">List Group</a>
</li>
<li class="submenu-item ">
<a href="component-modal.html">Modal</a>
</li>
<li class="submenu-item ">
<a href="component-navs.html">Navs</a>
</li>
<li class="submenu-item ">
<a href="component-pagination.html">Pagination</a>
</li>
<li class="submenu-item ">
<a href="component-progress.html">Progress</a>
</li>
<li class="submenu-item ">
<a href="component-spinner.html">Spinner</a>
</li>
<li class="submenu-item ">
<a href="component-tooltip.html">Tooltip</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-collection-fill"></i>
<span>Extra Components</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="extra-component-avatar.html">Avatar</a>
</li>
<li class="submenu-item ">
<a href="extra-component-sweetalert.html">Sweet Alert</a>
</li>
<li class="submenu-item ">
<a href="extra-component-toastify.html">Toastify</a>
</li>
<li class="submenu-item ">
<a href="extra-component-rating.html">Rating</a>
</li>
<li class="submenu-item ">
<a href="extra-component-divider.html">Divider</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Layouts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="layout-default.html">Default Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-1-column.html">1 Column</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-navbar.html">Vertical Navbar</a>
</li>
<li class="submenu-item ">
<a href="layout-rtl.html">RTL Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-horizontal.html">Horizontal Menu</a>
</li>
</ul>
</li>
<li class="sidebar-title">Forms & Tables</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-hexagon-fill"></i>
<span>Form Elements</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-element-input.html">Input</a>
</li>
<li class="submenu-item ">
<a href="form-element-input-group.html">Input Group</a>
</li>
<li class="submenu-item ">
<a href="form-element-select.html">Select</a>
</li>
<li class="submenu-item ">
<a href="form-element-radio.html">Radio</a>
</li>
<li class="submenu-item ">
<a href="form-element-checkbox.html">Checkbox</a>
</li>
<li class="submenu-item ">
<a href="form-element-textarea.html">Textarea</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="form-layout.html" class='sidebar-link'>
<i class="bi bi-file-earmark-medical-fill"></i>
<span>Form Layout</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pen-fill"></i>
<span>Form Editor</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-editor-quill.html">Quill</a>
</li>
<li class="submenu-item ">
<a href="form-editor-ckeditor.html">CKEditor</a>
</li>
<li class="submenu-item ">
<a href="form-editor-summernote.html">Summernote</a>
</li>
<li class="submenu-item ">
<a href="form-editor-tinymce.html">TinyMCE</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="table.html" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Table</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-file-earmark-spreadsheet-fill"></i>
<span>Datatables</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="table-datatable.html">Datatable</a>
</li>
<li class="submenu-item ">
<a href="table-datatable-jquery.html">Datatable (jQuery)</a>
</li>
</ul>
</li>
<li class="sidebar-title">Extra UI</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pentagon-fill"></i>
<span>Widgets</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-widgets-chatbox.html">Chatbox</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-pricing.html">Pricing</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-todolist.html">To-do List</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-egg-fill"></i>
<span>Icons</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-icons-bootstrap-icons.html">Bootstrap Icons </a>
</li>
<li class="submenu-item ">
<a href="ui-icons-fontawesome.html">Fontawesome</a>
</li>
<li class="submenu-item ">
<a href="ui-icons-dripicons.html">Dripicons</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-bar-chart-fill"></i>
<span>Charts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-chart-chartjs.html">ChartJS</a>
</li>
<li class="submenu-item ">
<a href="ui-chart-apexcharts.html">Apexcharts</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="ui-file-uploader.html" class='sidebar-link'>
<i class="bi bi-cloud-arrow-up-fill"></i>
<span>File Uploader</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-map-fill"></i>
<span>Maps</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-map-google-map.html">Google Map</a>
</li>
<li class="submenu-item ">
<a href="ui-map-jsvectormap.html">JS Vector Map</a>
</li>
</ul>
</li>
<li class="sidebar-title">Pages</li>
<li
class="sidebar-item active ">
<a href="application-email.html" class='sidebar-link'>
<i class="bi bi-envelope-fill"></i>
<span>Email Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-chat.html" class='sidebar-link'>
<i class="bi bi-chat-dots-fill"></i>
<span>Chat Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-gallery.html" class='sidebar-link'>
<i class="bi bi-image-fill"></i>
<span>Photo Gallery</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-checkout.html" class='sidebar-link'>
<i class="bi bi-basket-fill"></i>
<span>Checkout Page</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-person-badge-fill"></i>
<span>Authentication</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="auth-login.html">Login</a>
</li>
<li class="submenu-item ">
<a href="auth-register.html">Register</a>
</li>
<li class="submenu-item ">
<a href="auth-forgot-password.html">Forgot Password</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-x-octagon-fill"></i>
<span>Errors</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="error-403.html">403</a>
</li>
<li class="submenu-item ">
<a href="error-404.html">404</a>
</li>
<li class="submenu-item ">
<a href="error-500.html">500</a>
</li>
</ul>
</li>
<li class="sidebar-title">Raise Support</li>
<li
class="sidebar-item ">
<a href="https://zuramai.github.io/mazer/docs" class='sidebar-link'>
<i class="bi bi-life-preserver"></i>
<span>Documentation</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer/blob/main/CONTRIBUTING.md" class='sidebar-link'>
<i class="bi bi-puzzle"></i>
<span>Contribute</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer#donate" class='sidebar-link'>
<i class="bi bi-cash"></i>
<span>Donate</span>
</a>
</li>
</ul>
</div>
<button class="sidebar-toggler btn x"><i data-feather="x"></i></button>
</div>
</div>
<div id="main">
<header class="mb-3">
<a href="#" class="burger-btn d-block d-xl-none">
<i class="bi bi-justify fs-3"></i>
</a>
</header>
<div class="page-heading email-application">
<div class="page-title">
<div class="row">
<div class="col-12 col-md-6 order-md-1 order-last">
<h3>Email Application</h3>
<p class="text-subtitle text-muted">An application for user to check email inbox</p>
</div>
<div class="col-12 col-md-6 order-md-2 order-first">
<nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
<li class="breadcrumb-item active" aria-current="page">Email Application</li>
</ol>
</nav>
</div>
</div>
</div>
<section class="section content-area-wrapper">
<div class="sidebar-left">
<div class="sidebar">
<div class="sidebar-content email-app-sidebar d-flex">
<!-- sidebar close icon -->
<span class="sidebar-close-icon">
<i class="bx bx-x"></i>
</span>
<!-- sidebar close icon -->
<div class="email-app-menu">
<div class="form-group form-group-compose">
<!-- compose button -->
<button type="button" class="btn btn-primary btn-block my-4 compose-btn">
<i class="bx bx-plus"></i>
Compose
</button>
</div>
<div class="sidebar-menu-list ps">
<!-- sidebar menu -->
<div class="list-group list-group-messages">
<a href="#" class="list-group-item pt-0 active" id="inbox-menu">
<div class="fonticon-wrap d-inline me-3">
<svg class="bi" width="1.5em" height="1.5em" fill="currentColor">
<use
xlink:href="assets/vendors/bootstrap-icons/bootstrap-icons.svg#envelope" />
</svg>
</i>
</div>
Inbox
<span
class="badge badge-light-primary badge-pill badge-round float-right mt-50">5</span>
</a>
<a href="#" class="list-group-item">
<div class="fonticon-wrap d-inline me-3">
<svg class="bi" width="1.5em" height="1.5em" fill="currentColor">
<use
xlink:href="assets/vendors/bootstrap-icons/bootstrap-icons.svg#archive" />
</svg>
</div>
Sent
</a>
<a href="#" class="list-group-item">
<div class="fonticon-wrap d-inline me-3">
<svg class="bi" width="1.5em" height="1.5em" fill="currentColor">
<use
xlink:href="assets/vendors/bootstrap-icons/bootstrap-icons.svg#pencil" />
</svg>
</div> Draft
</a>
<a href="#" class="list-group-item">
<div class="fonticon-wrap d-inline me-3">
<svg class="bi" width="1.5em" height="1.5em" fill="currentColor">
<use xlink:href="assets/vendors/bootstrap-icons/bootstrap-icons.svg#star" />
</svg>
</div>
Starred
</a>
<a href="#" class="list-group-item">
<div class="fonticon-wrap d-inline me-3">
<svg class="bi" width="1.5em" height="1.5em" fill="currentColor">
<use
xlink:href="assets/vendors/bootstrap-icons/bootstrap-icons.svg#info-circle" />
</svg>
</div>
Spam
<span
class="badge badge-light-danger badge-pill badge-round float-right mt-50">3</span>
</a>
<a href="#" class="list-group-item">
<div class="fonticon-wrap d-inline me-3">
<svg class="bi" width="1.5em" height="1.5em" fill="currentColor">
<use
xlink:href="assets/vendors/bootstrap-icons/bootstrap-icons.svg#trash" />
</svg>
</div>
Trash
</a>
</div>
<!-- sidebar menu end-->
<!-- sidebar label start -->
<label class="sidebar-label">Labels</label>
<div class="list-group list-group-labels">
<a href="#" class="list-group-item d-flex justify-content-between align-items-center">
Product
<span class="bullet bullet-success bullet-sm"></span>
</a>
<a href="#" class="list-group-item d-flex justify-content-between align-items-center">
Work
<span class="bullet bullet-primary bullet-sm"></span>
</a>
<a href="#" class="list-group-item d-flex justify-content-between align-items-center">
Misc
<span class="bullet bullet-warning bullet-sm"></span>
</a>
<a href="#" class="list-group-item d-flex justify-content-between align-items-center">
Family
<span class="bullet bullet-danger bullet-sm"></span>
</a>
<a href="#" class="list-group-item d-flex justify-content-between align-items-center">
Design
<span class="bullet bullet-info bullet-sm"></span>
</a>
</div>
<!-- sidebar label end -->
<div class="ps__rail-x" style="left: 0px; bottom: 0px;">
<div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;"></div>
</div>
<div class="ps__rail-y" style="top: 0px; right: 0px;">
<div class="ps__thumb-y" tabindex="0" style="top: 0px; height: 0px;"></div>
</div>
</div>
</div>
</div>
<!-- User new mail right area -->
<div class="compose-new-mail-sidebar ps">
<div class="card shadow-none quill-wrapper p-0">
<div class="card-header">
<h3 class="card-title" id="emailCompose">New Message</h3>
<button type="button" class="close close-icon">
<i class="bx bx-x"></i>
</button>
</div>
<!-- form start -->
<form action="#" id="compose-form">
<div class="card-content">
<div class="card-body pt-0">
<div class="form-group pb-50">
<label for="emailfrom">from</label>
<input type="text" id="emailfrom" class="form-control"
placeholder="user@example.com" disabled="">
</div>
<div class="form-label-group">
<input type="email" id="emailTo" class="form-control" placeholder="To"
required="">
<label for="emailTo">To</label>
</div>
<div class="form-label-group">
<input type="text" id="emailSubject" class="form-control" placeholder="Subject">
<label for="emailSubject">Subject</label>
</div>
<div class="form-label-group">
<input type="text" id="emailCC" class="form-control" placeholder="CC">
<label for="emailCC">CC</label>
</div>
<div class="form-label-group">
<input type="text" id="emailBCC" class="form-control" placeholder="BCC">
<label for="emailBCC">BCC</label>
</div>
<!-- Compose mail Quill editor -->
<div class="snow-container border rounded p-50">
<div class="compose-editor mx-75 ql-container ql-snow">
<div class="ql-editor ql-blank" data-gramm="false"
data-placeholder="Type something....." contenteditable="true">
<p><br></p>
</div>
<div class="ql-clipboard" tabindex="-1" contenteditable="true"></div>
<div class="ql-tooltip ql-hidden"><a class="ql-preview" target="_blank"
href="about:blank"></a><input type="text" data-formula="e=mc^2"
data-link="https://quilljs.com" data-video="Embed URL"><a
class="ql-action"></a><a class="ql-remove"></a></div>
</div>
<div class="d-flex justify-content-end">
<div class="compose-quill-toolbar pb-0 ql-toolbar ql-snow">
<span class="ql-formats mr-0">
<button class="ql-bold" type="button"><svg viewBox="0 0 18 18">
<path class="ql-stroke"
d="M5,4H9.5A2.5,2.5,0,0,1,12,6.5v0A2.5,2.5,0,0,1,9.5,9H5A0,0,0,0,1,5,9V4A0,0,0,0,1,5,4Z">
</path>
<path class="ql-stroke"
d="M5,9h5.5A2.5,2.5,0,0,1,13,11.5v0A2.5,2.5,0,0,1,10.5,14H5a0,0,0,0,1,0,0V9A0,0,0,0,1,5,9Z">
</path>
</svg></button>
<button class="ql-italic" type="button"><svg viewBox="0 0 18 18">
<line class="ql-stroke" x1="7" x2="13" y1="4" y2="4"></line>
<line class="ql-stroke" x1="5" x2="11" y1="14" y2="14">
</line>
<line class="ql-stroke" x1="8" x2="10" y1="14" y2="4">
</line>
</svg></button>
<button class="ql-underline" type="button"><svg viewBox="0 0 18 18">
<path class="ql-stroke"
d="M5,3V9a4.012,4.012,0,0,0,4,4H9a4.012,4.012,0,0,0,4-4V3">
</path>
<rect class="ql-fill" height="1" rx="0.5" ry="0.5"
width="12" x="3" y="15"></rect>
</svg></button>
<button class="ql-link" type="button"><svg viewBox="0 0 18 18">
<line class="ql-stroke" x1="7" x2="11" y1="7" y2="11">
</line>
<path class="ql-even ql-stroke"
d="M8.9,4.577a3.476,3.476,0,0,1,.36,4.679A3.476,3.476,0,0,1,4.577,8.9C3.185,7.5,2.035,6.4,4.217,4.217S7.5,3.185,8.9,4.577Z">
</path>
<path class="ql-even ql-stroke"
d="M13.423,9.1a3.476,3.476,0,0,0-4.679-.36,3.476,3.476,0,0,0,.36,4.679c1.392,1.392,2.5,2.542,4.679.36S14.815,10.5,13.423,9.1Z">
</path>
</svg></button>
<button class="ql-image" type="button"><svg viewBox="0 0 18 18">
<rect class="ql-stroke" height="10" width="12" x="3" y="4">
</rect>
<circle class="ql-fill" cx="6" cy="7" r="1"></circle>
<polyline class="ql-even ql-fill"
points="5 12 5 11 7 9 8 10 11 7 13 9 13 12 5 12">
</polyline>
</svg></button>
</span>
</div>
</div>
</div>
<div class="form-group mt-2">
<div class="custom-file">
<input type="file" class="custom-file-input" id="emailAttach">
<label class="custom-file-label" for="emailAttach">Attach File</label>
</div>
</div>
</div>
</div>
<div class="card-footer d-flex justify-content-end pt-0">
<button type="reset" class="btn btn-light-secondary cancel-btn mr-1">
<i class="bx bx-x me-3"></i>
<span class="d-sm-inline d-none">Cancel</span>
</button>
<button type="submit" class="btn-send btn btn-primary">
<i class="bx bx-send me-3"></i> <span class="d-sm-inline d-none">Send</span>
</button>
</div>
</form>
<!-- form start end-->
</div>
<div class="ps__rail-x" style="left: 0px; bottom: 0px;">
<div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;"></div>
</div>
<div class="ps__rail-y" style="top: 0px; right: 0px;">
<div class="ps__thumb-y" tabindex="0" style="top: 0px; height: 0px;"></div>
</div>
</div>
<!--/ User Chat profile right area -->
</div>
</div>
<div class="content-right">
<div class="content-overlay"></div>
<div class="content-wrapper">
<div class="content-header row">
</div>
<div class="content-body">
<!-- email app overlay -->
<div class="app-content-overlay"></div>
<div class="email-app-area">
<!-- Email list Area -->
<div class="email-app-list-wrapper">
<div class="email-app-list">
<div class="email-action">
<!-- action left start here -->
<div class="action-left d-flex align-items-center">
<!-- select All checkbox -->
<div class="checkbox checkbox-shadow checkbox-sm selectAll me-3">
<input type="checkbox" id="checkboxsmall" class='form-check-input'>
<label for="checkboxsmall"></label>
</div>
<!-- delete unread dropdown -->
<ul class="list-inline m-0 d-flex">
<li class="list-inline-item mail-delete">
<button type="button" class="btn btn-icon action-icon"
data-toggle="tooltip">
<span class="fonticon-wrap">
<svg class="bi" width="1.5em" height="1.5em"
fill="currentColor">
<use
xlink:href="assets/vendors/bootstrap-icons/bootstrap-icons.svg#trash" />
</svg>
</span>
</button>
</li>
<li class="list-inline-item mail-unread">
<button type="button" class="btn btn-icon action-icon">
<span class="fonticon-wrap d-inline">
<svg class="bi" width="1.5em" height="1.5em"
fill="currentColor">
<use
xlink:href="assets/vendors/bootstrap-icons/bootstrap-icons.svg#envelope" />
</svg>
</span>
</button>
</li>
<li class="list-inline-item">
<div class="dropdown">
<button type="button"
class="dropdown-toggle btn btn-icon action-icon" id="folder"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<span class="fonticon-wrap">
<svg class="bi" width="1.5em" height="1.5em"
fill="currentColor">
<use
xlink:href="assets/vendors/bootstrap-icons/bootstrap-icons.svg#folder" />
</svg>
</span>
</button>
<div class="dropdown-menu dropdown-menu-right"
aria-labelledby="folder">
<a class="dropdown-item" href="#"><i class="bx bx-edit"></i>
Draft</a>
<a class="dropdown-item" href="#"><i
class="bx bx-info-circle"></i>Spam</a>
<a class="dropdown-item" href="#"><i
class="bx bx-trash"></i>Trash</a>
</div>
</div>
</li>
<li class="list-inline-item">
<div class="dropdown">
<button type="button"
class="btn btn-icon dropdown-toggle action-icon" id="tag"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<span class="fonticon-wrap">
<svg class="bi" width="1.5em" height="1.5em"
fill="currentColor">
<use
xlink:href="assets/vendors/bootstrap-icons/bootstrap-icons.svg#tag" />
</svg>
</span>
</button>
<div class="dropdown-menu dropdown-menu-right"
aria-labelledby="tag">
<a href="#" class="dropdown-item align-items-center">
<span class="bullet bullet-success bullet-sm"></span>
<span>Product</span>
</a>
<a href="#" class="dropdown-item align-items-center">
<span class="bullet bullet-primary bullet-sm"></span>
<span>Work</span>
</a>
<a href="#" class="dropdown-item align-items-center">
<span class="bullet bullet-warning bullet-sm"></span>
<span>Misc</span>
</a>
<a href="#" class="dropdown-item align-items-center">
<span class="bullet bullet-danger bullet-sm"></span>
<span>Family</span>
</a>
<a href="#" class="dropdown-item align-items-center">
<span class="bullet bullet-info bullet-sm"></span>
<span> Design</span>
</a>
</div>
</div>
</li>
</ul>
</div>
<!-- action left end here -->
<!-- action right start here -->
<div
class="action-right d-flex flex-grow-1 align-items-center justify-content-around">
<!-- search bar -->
<div class="email-fixed-search flex-grow-1">
<div class="sidebar-toggle d-block d-lg-none">
<i class="bx bx-menu"></i>
</div>
<div class="form-group position-relative mb-0 has-icon-left">
<input type="text" class="form-control" placeholder="Search email..">
<div class="form-control-icon">
<svg class="bi" width="1.5em" height="1.5em" fill="currentColor">
<use
xlink:href="assets/vendors/bootstrap-icons/bootstrap-icons.svg#search" />
</svg>
</div>
</div>
</div>
<!-- pagination and page count -->
<span class="d-none d-sm-block">1-10 of 653</span>
<button class="btn btn-icon email-pagination-prev d-none d-sm-block">
<svg class="bi" width="1.5em" height="1.5em" fill="currentColor">
<use
xlink:href="assets/vendors/bootstrap-icons/bootstrap-icons.svg#chevron-left" />
</svg>
</button>
<button class="btn btn-icon email-pagination-next d-none d-sm-block">
<svg class="bi" width="1.5em" height="1.5em" fill="currentColor">
<use
xlink:href="assets/vendors/bootstrap-icons/bootstrap-icons.svg#chevron-right" />
</svg>
</button>
</div>
</div>
<!-- / action right -->
<!-- email user list start -->
<div class="email-user-list list-group ps ps--active-y">
<ul class="users-list-wrapper media-list">
<li class="media mail-read">
<div class="user-action">
<div class="checkbox-con me-3">
<div class="checkbox checkbox-shadow checkbox-sm">
<input type="checkbox" id="checkboxsmall1"
class='form-check-input'>
<label for="checkboxsmall1"></label>
</div>
</div>
<span class="favorite text-warning">
<svg class="bi" width="1.5em" height="1.5em" fill="currentColor">
<use
xlink:href="assets/vendors/bootstrap-icons/bootstrap-icons.svg#star-fill" />
</svg>
</span>
</div>
<div class="pr-50">
<div class="avatar">
<img src="assets/images/faces/1.jpg" alt="avtar img holder">
</div>
</div>
<div class="media-body">
<div class="user-details">
<div class="mail-items">
<span class="list-group-item-text text-truncate">Open source
project public release ๐</span>
</div>
<div class="mail-meta-item">
<span class="float-right">
<span class="mail-date">4:14 AM</span>
</span>
</div>
</div>
<div class="mail-message">
<p class="list-group-item-text truncate mb-0">
Hey John, bah kivu decrete epanorthotic unnotched
Argyroneta nonius veratrine preimaginary
</p>
<div class="mail-meta-item">
<span class="float-right">
<span class="bullet bullet-success bullet-sm"></span>
</span>
</div>
</div>
</div>
</li>
<li class="media mail-read">
<div class="user-action">
<div class="checkbox-con me-3">
<div class="checkbox checkbox-shadow checkbox-sm">
<input type="checkbox" id="checkboxsmall2"
class='form-check-input'>
<label for="checkboxsmall2"></label>
</div>
</div>
<span class="favorite">
<svg class="bi" width="1.5em" height="1.5em" fill="currentColor">
<use
xlink:href="assets/vendors/bootstrap-icons/bootstrap-icons.svg#star" />
</svg>
</span>
</div>
<div class="pr-50">
<div class="avatar">
<img class="rounded-circle" src="assets/images/faces/3.jpg"
alt="Generic placeholder image">
</div>
</div>
<div class="media-body">
<div class="user-details">
<div class="mail-items">
<span class="list-group-item-text text-truncate">Ecommerce
website Paypal integration ๐</span>
</div>
<div class="mail-meta-item">
<span class="float-right">
<span class="mail-date">2:15 AM</span>
</span>
</div>
</div>
<div class="mail-message">
<p class="list-group-item-text mb-0 truncate">
We will start the new application development soon once
this will be completed.
</p>
<div class="mail-meta-item">
<span class="float-right">
<span class="bullet bullet-danger bullet-sm"></span>
</span>
</div>
</div>
</div>
</li>
<li class="media">
<div class="user-action">
<div class="checkbox-con me-3">
<div class="checkbox checkbox-shadow checkbox-sm">
<input type="checkbox" id="checkboxsmall3"
class='form-check-input'>
<label for="checkboxsmall3"></label>
</div>
</div>
<span class="favorite">
<svg class="bi" width="1.5em" height="1.5em" fill="currentColor">
<use
xlink:href="assets/vendors/bootstrap-icons/bootstrap-icons.svg#star" />
</svg>
</span>
</div>
<div class="pr-50">
<div class="avatar">
<img class="rounded-circle" src="assets/images/faces/7.jpg"
alt="Generic placeholder image">
</div>
</div>
<div class="media-body">
<div class="user-details">
<div class="mail-items">
<span class="list-group-item-text text-truncate">How To Set
Intentions That Energize You</span>
</div>
<div class="mail-meta-item">
<span class="float-right">
<span class="mail-date">2:15 AM</span>
</span>
</div>
</div>
<div class="mail-message">
<p class="list-group-item-text mb-0 truncate">
I will provide you more details after this Saturday. Hope
that will be fine for you..
</p>
<div class="mail-meta-item">
<span class="float-right d-flex align-items-center">
<i class="bx bx-paperclip me-3"></i>
<span class="bullet bullet-success bullet-sm"></span>
</span>
</div>
</div>
</div>
</li>
<li class="media">
<div class="user-action">
<div class="checkbox-con me-3">
<div class="checkbox checkbox-shadow checkbox-sm">
<input type="checkbox" id="checkboxsmall4"
class='form-check-input'>
<label for="checkboxsmall4"></label>
</div>
</div>
<span class="favorite">
<svg class="bi" width="1.5em" height="1.5em" fill="currentColor">
<use
xlink:href="assets/vendors/bootstrap-icons/bootstrap-icons.svg#star" />
</svg>
</span>
</div>
<div class="pr-50">
<div class="avatar">
<img class="rounded-circle" src="assets/images/faces/5.jpg"
alt="Generic placeholder image">
</div>
</div>
<div class="media-body">
<div class="user-details">
<div class="mail-items">
<span class="list-group-item-text text-truncate">Harness The
Power Of Words In Your Life</span>
</div>
<div class="mail-meta-item">
<span class="float-right">
<span class="mail-date">Yesterday</span>
</span>
</div>
</div>
<div class="mail-message">
<p class="list-group-item-text text-truncate mb-0">
When the equation, first to ability the forwards, the a but
travelling, outlines sentinels
bad expand to goodness....
</p>
<div class="mail-meta-item">
<span class="float-right d-flex align-items-center">
<i class="bx bx-paperclip me-3"></i>
<span class="bullet bullet-warning bullet-sm"></span>
</span>
</div>
</div>
</div>
</li>
<li class="media mail-read">
<div class="user-action">
<div class="checkbox-con me-3">
<div class="checkbox checkbox-shadow checkbox-sm">
<input type="checkbox" id="checkboxsmall5"
class='form-check-input'>
<label for="checkboxsmall5"></label>
</div>
</div>
<span class="favorite">
<svg class="bi" width="1.5em" height="1.5em" fill="currentColor">
<use
xlink:href="assets/vendors/bootstrap-icons/bootstrap-icons.svg#star" />
</svg>
</span>
</div>
<div class="pr-50">
<div class="avatar">
<img class="rounded-circle" src="assets/images/faces/3.jpg"
alt="Generic placeholder image">
</div>
</div>
<div class="media-body">
<div class="user-details">
<div class="mail-items">
<span class="list-group-item-text text-truncate mb-0">Helen
Keller A Teller And A Seller</span>
</div>
<div class="mail-meta-item">
<span class="float-right">
<span class="mail-date">15 July</span>
</span>
</div>
</div>
<div class="mail-message">
<p class="list-group-item-text mb-0 truncate">
Thanks for your feedback ! Here's a new layout for a new Modern
Admin theme.
</p>
<div class="mail-meta-item">
<span class="float-right d-flex align-items-center">
<i class="bx bx-paperclip me-3"></i>
<span class="bullet bullet-warning bullet-sm"></span>
</span>
</div>
</div>
</div>
</li>
<li class="media mail-read">
<div class="user-action">
<div class="checkbox-con me-3">
<div class="checkbox checkbox-shadow checkbox-sm">
<input type="checkbox" id="checkboxsmall6"
class='form-check-input'>
<label for="checkboxsmall6"></label>
</div>
</div>
<span class="favorite text-warning">
<svg class="bi" width="1.5em" height="1.5em" fill="currentColor">
<use
xlink:href="assets/vendors/bootstrap-icons/bootstrap-icons.svg#star-fill" />
</svg>
</span>
</div>
<div class="pr-50">
<div class="avatar">
<img class="rounded-circle" src="assets/images/faces/8.jpg"
alt="Generic placeholder image">
</div>
</div>
<div class="media-body">
<div class="user-details">
<div class="mail-items">
<span class="list-group-item-text text-truncate mb-0">
Use Your Reset Button To Change Your Vibration ๐
</span>
</div>
<div class="mail-meta-item">
<span class="float-right">
<span class="mail-date">12-07-2019</span>
</span>
</div>
</div>
<div class="mail-message">
<p class="list-group-item-text mb-0 truncate">
Hey John, bah kivu decrete epanorthotic unnotched
Argyroneta nonius veratrine preimaginary.</p>
<div class="mail-meta-item">
<span class="float-right">
<span class="bullet bullet-info bullet-sm"></span>
</span>
</div>
</div>
</div>
</li>
<li class="media">
<div class="user-action">
<div class="checkbox-con me-3">
<div class="checkbox checkbox-shadow checkbox-sm">
<input type="checkbox" id="checkboxsmall7"
class='form-check-input'>
<label for="checkboxsmall7"></label>
</div>
</div>
<span class="favorite text-warning">
<svg class="bi" width="1.5em" height="1.5em" fill="currentColor">
<use
xlink:href="assets/vendors/bootstrap-icons/bootstrap-icons.svg#star-fill" />
</svg>
</span>
</div>
<div class="pr-50">
<div class="avatar">
<img class="rounded-circle" src="assets/images/faces/5.jpg"
alt="Generic placeholder image">
</div>
</div>
<div class="media-body">
<div class="user-details">
<div class="mail-items">
<span class="list-group-item-text text-truncate mb-0">Harness
The Power Of Words In Your Life</span>
</div>
<div class="mail-meta-item">
<span class="float-right">
<span class="mail-date">03-29-2019</span>
</span>
</div>
</div>
<div class="mail-message">
<p class="list-group-item-text mb-0 truncate">
Hope your like it, or feel free to comment, feedback or rebound
!
</p>
<div class="mail-meta-item">
<span class="float-right">
<span class="bullet bullet-success bullet-sm"></span>
</span>
</div>
</div>
</div>
</li>
<li class="media mail-read">
<div class="user-action">
<div class="checkbox-con me-3">
<div class="checkbox checkbox-shadow checkbox-sm">
<input type="checkbox" id="checkboxsmall8"
class='form-check-input'>
<label for="checkboxsmall8"></label>
</div>
</div>
<span class="favorite">
<svg class="bi" width="1.5em" height="1.5em" fill="currentColor">
<use
xlink:href="assets/vendors/bootstrap-icons/bootstrap-icons.svg#star" />
</svg>
</span>
</div>
<div class="pr-50">
<div class="avatar">
<img class="rounded-circle" src="assets/images/faces/8.jpg"
alt="Generic placeholder image">
</div>
</div>
<div class="media-body">
<div class="user-details">
<div class="mail-items">
<span class="list-group-item-text text-truncate mb-0">Hypnosis
12 Steps To Acquire Mind Power</span>
</div>
<div class="mail-meta-item">
<span class="float-right">
<span class="mail-date">19 Jun</span>
</span>
</div>
</div>
<div class="mail-message">
<p class="list-group-item-text mb-0 truncate">
Monstrous with geared from far and these, morals, phase rome;
Class. Called get amidst of geared from
next...
</p>
<div class="mail-meta-item">
<span class="float-right">
<span class="bullet bullet-danger bullet-sm"></span>
</span>
</div>
</div>
</div>
</li>
<li class="media mail-read">
<div class="user-action">
<div class="checkbox-con me-3">
<div class="checkbox checkbox-shadow checkbox-sm">
<input type="checkbox" id="checkboxsmall9"
class='form-check-input'>
<label for="checkboxsmall9"></label>
</div>
</div>
<span class="favorite">
<svg class="bi" width="1.5em" height="1.5em" fill="currentColor">
<use
xlink:href="assets/vendors/bootstrap-icons/bootstrap-icons.svg#star" />
</svg>
</span>
</div>
<div class="pr-50">
<div class="avatar">
<img class="rounded-circle" src="assets/images/faces/6.jpg"
alt="Generic placeholder image">
</div>
</div>
<div class="media-body">
<div class="user-details">
<div class="mail-items">
<span class="list-group-item-text text-truncate mb-0">How To
Stop Living Your Life On Autopilot</span>
</div>
<div class="mail-meta-item">
<span class="float-right">
<span class="mail-date">2 Jun</span>
</span>
</div>
</div>
<div class="mail-message">
<p class="list-group-item-text mb-0 truncate">
Thanks for your feedback ! Here's a new layout for a new
Modern Admin theme.
</p>
<div class="mail-meta-item">
<span class="float-right">
<span class="bullet bullet-info bullet-sm"></span>
</span>
</div>
</div>
</div>
</li>
<li class="media">
<div class="user-action">
<div class="checkbox-con me-3">
<div class="checkbox checkbox-shadow checkbox-sm">
<input type="checkbox" id="checkboxsmall10"
class='form-check-input'>
<label for="checkboxsmall10"></label>
</div>
</div>
<span class="favorite">
<svg class="bi" width="1.5em" height="1.5em" fill="currentColor">
<use
xlink:href="assets/vendors/bootstrap-icons/bootstrap-icons.svg#star" />
</svg>
</span>
</div>
<div class="pr-50">
<div class="avatar">
<img class="rounded-circle" src="assets/images/faces/5.jpg"
alt="Generic placeholder image">
</div>
</div>
<div class="media-body">
<div class="user-details">
<div class="mail-items">
<span class="list-group-item-text text-truncate mb-0">
Invest a few hours contributing to the software
you use and love. ๐
</span>
</div>
<div class="mail-meta-item">
<span class="float-right">
<span class="mail-date">29 May</span>
</span>
</div>
</div>
<div class="mail-message">
<p class="list-group-item-text mb-0 truncate">
Hope your like it, or feel free to comment, feedback or rebound
!
</p>
<div class="mail-meta-item">
<span class="float-right">
<span class="bullet bullet-info bullet-sm"></span>
</span>
</div>
</div>
</div>
</li>
<li class="media">
<div class="user-action">
<div class="checkbox-con me-3">
<div class="checkbox checkbox-shadow checkbox-sm">
<input type="checkbox" id="checkboxsmall11"
class='form-check-input'>
<label for="checkboxsmall11"></label>
</div>
</div>
<span class="favorite">
<svg class="bi" width="1.5em" height="1.5em" fill="currentColor">
<use
xlink:href="assets/vendors/bootstrap-icons/bootstrap-icons.svg#star" />
</svg>
</span>
</div>
<div class="pr-50">
<div class="avatar">
<img class="rounded-circle" src="assets/images/faces/1.jpg"
alt="Generic placeholder image">
</div>
</div>
<div class="media-body">
<div class="user-details">
<div class="mail-items">
<span class="list-group-item-text text-truncate mb-0">Harness
The Power Of Words In Your Life</span>
</div>
<div class="mail-meta-item">
<span class="float-right">
<span class="mail-date">17 May</span>
</span>
</div>
</div>
<div class="mail-message">
<p class="list-group-item-text mb-0 truncate">
Hope your like it, or feel free to comment, feedback or rebound
!.
</p>
<div class="mail-meta-item">
<span class="float-right">
<span class="bullet bullet-warning bullet-sm"></span>
</span>
</div>
</div>
</div>
</li>
<li class="media mail-read">
<div class="user-action">
<div class="checkbox-con me-3">
<div class="checkbox checkbox-shadow checkbox-sm">
<input type="checkbox" id="checkboxsmall12"
class='form-check-input'>
<label for="checkboxsmall12"></label>
</div>
</div>
<span class="favorite">
<svg class="bi" width="1.5em" height="1.5em" fill="currentColor">
<use
xlink:href="assets/vendors/bootstrap-icons/bootstrap-icons.svg#star" />
</svg>
</span>
</div>
<div class="pr-50">
<div class="avatar">
<img class="rounded-circle" src="assets/images/faces/3.jpg"
alt="Generic placeholder image">
</div>
</div>
<div class="media-body">
<div class="user-details">
<div class="mail-items">
<span class="list-group-item-text text-truncate mb-0"> Know
Yourself Your Inner Power </span>
</div>
<div class="mail-meta-item">
<span class="float-right">
<span class="mail-date">21 Mar</span>
</span>
</div>
</div>
<div class="mail-message">
<p class="list-group-item-text mb-0 truncate">
Hope your like it, or feel free to comment, feedback or rebound
!
</p>
<div class="mail-meta-item">
<span class="float-right">
<span class="bullet bullet-warning bullet-sm"></span>
</span>
</div>
</div>
</div>
</li>
</ul>
<!-- email user list end -->
<!-- no result when nothing to show on list -->
<div class="no-results">
<i class="bx bx-error-circle font-large-2"></i>
<h5>No Items Found</h5>
</div>
<div class="ps__rail-x" style="left: 0px; bottom: 0px;">
<div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;"></div>
</div>
<div class="ps__rail-y" style="top: 0px; height: 733px; right: 0px;">
<div class="ps__thumb-y" tabindex="0" style="top: 0px; height: 567px;"></div>
</div>
</div>
</div>
</div>
<!--/ Email list Area -->
<!-- Detailed Email View -->
<div class="email-app-details">
<!-- email detail view header -->
<div class="email-detail-header">
<div class="email-header-left d-flex align-items-center mb-1">
<span class="go-back me-3">
<span class="fonticon-wrap d-inline">
<i class="fas fa-chevron-left"></i>
</span>
</span>
<h5 class="email-detail-title font-weight-normal mb-0">
Advertising Internet Online
<span class="badge badge-light-danger badge-pill ms-1">PRODUCT</span>
</h5>
</div>
<div class="email-header-right mb-1 ml-2 pl-1">
<ul class="list-inline m-0">
<li class="list-inline-item">
<button class="btn btn-icon action-icon">
<span class="fonticon-wrap">
<i class="fas fa-trash"></i>
</span>
</button>
</li>
<li class="list-inline-item">
<button class="btn btn-icon action-icon">
<span class="fonticon-wrap">
<svg class="bi" width="1.5em" height="1.5em" fill="currentColor">
<use
xlink:href="assets/vendors/bootstrap-icons/bootstrap-icons.svg#envelope" />
</svg>
</span>
</button>
</li>
<li class="list-inline-item">
<div class="dropdown">
<button class="btn btn-icon dropdown-toggle action-icon"
id="open-mail-menu" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<span class="fonticon-wrap">
<i class="fas fa-folder"></i>
</span>
</button>
<div class="dropdown-menu dropdown-menu-right"
aria-labelledby="open-mail-menu">
<a class="dropdown-item" href="#"><i class="bx bx-edit"></i>
Draft</a>
<a class="dropdown-item" href="#"><i class="bx bx-info-circle"></i>
Spam</a>
<a class="dropdown-item" href="#"><i class="bx bx-trash"></i>
Trash</a>
</div>
</div>
</li>
<li class="list-inline-item">
<div class="dropdown">
<button class="btn btn-icon dropdown-toggle action-icon"
id="open-mail-tag" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<span class="fonticon-wrap">
<i class="fas fa-tag"></i>
</span>
</button>
<div class="dropdown-menu dropdown-menu-right"
aria-labelledby="open-mail-tag">
<a href="#" class="dropdown-item align-items-center">
<span class="bullet bullet-success bullet-sm"></span>
Product
</a>
<a href="#" class="dropdown-item align-items-center">
<span class="bullet bullet-primary bullet-sm"></span>
Work
</a>
<a href="#" class="dropdown-item align-items-center">
<span class="bullet bullet-warning bullet-sm"></span>
Misc
</a>
<a href="#" class="dropdown-item align-items-center">
<span class="bullet bullet-danger bullet-sm"></span>
Family
</a>
<a href="#" class="dropdown-item align-items-center">
<span class="bullet bullet-info bullet-sm"></span>
Design
</a>
</div>
</div>
</li>
<li class="list-inline-item">
<span class="no-of-list d-none d-sm-block ms-1">1-10 of 653</span>
</li>
<li class="list-inline-item">
<button class="btn btn-icon email-pagination-prev action-icon">
<i class="bx bx-chevron-left"></i>
</button>
</li>
<li class="list-inline-item">
<button class="btn btn-icon email-pagination-next action-icon">
<i class="bx bx-chevron-right"></i>
</button>
</li>
</ul>
</div>
</div>
<!-- email detail view header end-->
<div class="email-scroll-area ps ps--active-y">
<!-- email details -->
<div class="row">
<div class="col-12">
<div class="collapsible email-detail-head">
<div class="card collapse-header" role="tablist">
<div id="headingCollapse5"
class="card-header d-flex justify-content-between align-items-center"
data-toggle="collapse" role="tab" data-target="#collapse5"
aria-expanded="false" aria-controls="collapse5">
<div class="collapse-title media">
<div class="pr-1">
<div class="avatar mr-75">
<img src="assets/images/faces/18.jpg"
alt="avtar img holder" width="30" height="30">
</div>
</div>
<div class="media-body mt-25">
<span class="text-primary">Elnora Reese</span>
<span class="d-sm-inline d-none">
<elnora@gmail.com></span>
<small class="text-muted d-block">to Lois Jimenez</small>
</div>
</div>
<div class="information d-sm-flex d-none align-items-center">
<small class="text-muted me-3">15 Jul 2019, 10:30</small>
<span class="favorite">
<i class="bx bx-star me-3"></i>
</span>
<div class="dropdown">
<a href="#" class="dropdown-toggle" id="fisrt-open-submenu"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<i class="bx bx-dots-vertical-rounded mr-0"></i>
</a>
<div class="dropdown-menu dropdown-menu-right"
aria-labelledby="fisrt-open-submenu">
<a href="#" class="dropdown-item mail-reply">
<i class="bx bx-share"></i>
Reply
</a>
<a href="#" class="dropdown-item">
<i class="bx bx-redo"></i>
Forward
</a>
<a href="#" class="dropdown-item">
<i class="bx bx-info-circle"></i>
Report Spam
</a>
</div>
</div>
</div>
</div>
<div id="collapse5" role="tabpanel" aria-labelledby="headingCollapse5"
class="collapse">
<div class="card-content">
<div class="card-body py-1">
<p class="text-bold-500">Greetings!</p>
<p>
Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been
the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of
type and scrambled it to make a type specimen book.
</p>
<p>
It has survived not only five centuries, but also the
leap into electronic typesetting, remaining
essentially unchanged.
</p>
<p class="mb-0">Sincerely yours,</p>
<p class="text-bold-500">Envato Design Team</p>
</div>
<div class="card-footer pt-0 border-top">
<label class="sidebar-label">Attached Files</label>
<ul class="list-unstyled mb-0">
<li class="cursor-pointer pb-25">
<img src="../../../app-assets/images/icon/psd.png"
alt="psd.png" height="30">
<small
class="text-muted ms-1 attchement-text">uikit-design.psd</small>
</li>
<li class="cursor-pointer">
<img src="../../../app-assets/images/icon/sketch.png"
alt="sketch.png" height="30">
<small
class="text-muted ms-1 attchement-text">uikit-design.sketch</small>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="card collapse-header" role="tablist">
<div id="headingCollapse6"
class="card-header d-flex justify-content-between align-items-center"
data-toggle="collapse" role="tab" data-target="#collapse6"
aria-expanded="false" aria-controls="collapse6">
<div class="collapse-title media">
<div class="pr-1">
<div class="avatar mr-75">
<img src="assets/images/faces/19.jpg"
alt="avtar img holder" width="30" height="30">
</div>
</div>
<div class="media-body mt-25">
<span class="text-primary">Lois Jimenez </span>
<span class="d-sm-inline d-none">
<lois_jim@gmail.com></span>
<small class="text-muted d-block">to Elnora Reese</small>
</div>
</div>
<div class="information d-sm-flex d-none align-items-center">
<i class="bx bx-paperclip me-3"></i>
<small class="text-muted me-3">10 Jul 2019, 10:30</small>
<span class="favorite">
<i class="bx bx-star me-3"></i>
</span>
<div class="dropdown">
<a href="#" class="dropdown-toggle" id="second-open-submenu"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<i class="bx bx-dots-vertical-rounded mr-0"></i>
</a>
<div class="dropdown-menu dropdown-menu-right"
aria-labelledby="second-open-submenu">
<a href="#" class="dropdown-item mail-reply">
<i class="bx bx-share"></i>
Reply
</a>
<a href="#" class="dropdown-item">
<i class="bx bx-redo"></i>
Forward
</a>
<a href="#" class="dropdown-item">
<i class="bx bx-info-circle"></i>
Report Spam
</a>
</div>
</div>
</div>
</div>
<div id="collapse6" role="tabpanel" aria-labelledby="headingCollapse7"
class="collapse">
<div class="card-content">
<div class="card-body py-1">
<p class="text-bold-500">Greetings!</p>
<p>
Successful businesses have many things in common, today
weโll look at the big โRโof recognition
and how a digital advertising network may help.
Recognition can be illustrated by two individuals
entering a crowded room at a party. Both walk to the far
side of the room, one of them slips
through the crowd easily and unnoticed as they reach the
far side.
</p>
<p>
Gummies sweet tart marzipan lemon drops donut pie.
Chocolate cake gingerbread jujubes gingerbread
chocolate cake tart bear claw apple pie jelly-o.
Gummies biscuit brownie marshmallow oat cake tootsie
roll bear claw topping. Oat cake sesame snaps
icing cupcake wafer tiramisu jelly-o sugar plum carrot
cake
</p>
<p class="mb-0">Sincerely yours,</p>
<p class="text-bold-500">Envato Design Team</p>
</div>
<div class="card-footer pt-0 border-top">
<label class="sidebar-label">Attached Files</label>
<ul class="list-unstyled mb-0">
<li class="cursor-pointer pb-25">
<img src="../../../app-assets/images/icon/psd.png"
alt="psd.png" height="30">
<small
class="text-muted ms-1 attchement-text">uikit-design.psd</small>
</li>
<li class="cursor-pointer">
<img src="../../../app-assets/images/icon/sketch.png"
alt="sketch.png" height="30">
<small
class="text-muted ms-1 attchement-text">uikit-design.sketch</small>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="card collapse-header open" role="tablist">
<div id="headingCollapse7"
class="card-header d-flex justify-content-between align-items-center"
data-toggle="collapse" role="tab" data-target="#collapse7"
aria-expanded="false" aria-controls="collapse7">
<div class="collapse-title media">
<div class="pr-1">
<div class="avatar mr-75">
<img src="assets/images/faces/18.jpg"
alt="avtar img holder" width="30" height="30">
</div>
</div>
<div class="media-body mt-25">
<span class="text-primary">Elnora Reese</span>
<span
class="d-sm-inline d-none"><elnora@gmail.com></span>
<small class="text-muted d-block">to Lois Jimenez</small>
</div>
</div>
<div class="information d-sm-flex d-none align-items-center">
<small class="text-muted me-3">05 Jul 2019, 10:30</small>
<span class="favorite text-warning">
<svg class="bi" width="1.5em" height="1.5em"
fill="currentColor">
<use
xlink:href="assets/vendors/bootstrap-icons/bootstrap-icons.svg#star-fill" />
</svg>
</span>
<div class="dropdown">
<a href="#" class="dropdown-toggle" id="third-open-menu"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<i class="bx bx-dots-vertical-rounded mr-0"></i>
</a>
<div class="dropdown-menu dropdown-menu-right"
aria-labelledby="second-open-submenu">
<a href="#" class="dropdown-item mail-reply">
<i class="bx bx-share"></i>
Reply
</a>
<a href="#" class="dropdown-item">
<i class="bx bx-redo"></i>
Forward
</a>
<a href="#" class="dropdown-item">
<i class="bx bx-info-circle"></i>
Report Spam
</a>
</div>
</div>
</div>
</div>
<div id="collapse7" role="tabpanel" aria-labelledby="headingCollapse7"
class="collapse show">
<div class="card-content">
<div class="card-body py-1">
<p class="text-bold-500">Greetings!</p>
<p>
It is a long established fact that a reader will be
distracted by the readable content of a page
when looking at its layout.The point of using Lorem
Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using 'Content
here, content here',making it look like
readable English.
</p>
<p>
There are many variations of passages of Lorem Ipsum
available, but the majority have suffered
alteration in some form, by injected humour, or
randomised words which don't look even slightly
believable.
</p>
<p class="mb-0">Sincerely yours,</p>
<p class="text-bold-500">Envato Design Team</p>
</div>
<div class="card-footer pt-0 border-top">
<label class="sidebar-label">Attached Files</label>
<ul class="list-unstyled mb-0">
<li class="cursor-pointer pb-25">
<img src="../../../app-assets/images/icon/psd.png"
alt="psd.png" height="30">
<small
class="text-muted ms-1 attchement-text">uikit-design.psd</small>
</li>
<li class="cursor-pointer">
<img src="../../../app-assets/images/icon/sketch.png"
alt="sketch.png" height="30">
<small
class="text-muted ms-1 attchement-text">uikit-design.sketch</small>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- email details end-->
<div class="row px-2 mb-4">
<!-- quill editor for reply message -->
<div class="col-12 px-0">
<div class="card shadow-none border rounded">
<div class="card-body quill-wrapper">
<span>Reply to Lois Jimenez</span>
<div class="snow-container" id="detail-view-quill">
<div class="detail-view-editor ql-container ql-snow">
<div class="ql-editor ql-blank" data-gramm="false"
data-placeholder="Type something....."
contenteditable="true">
<p><br></p>
</div>
<div class="ql-clipboard" tabindex="-1" contenteditable="true">
</div>
<div class="ql-tooltip ql-hidden"><a class="ql-preview"
target="_blank" href="about:blank"></a><input
type="text" data-formula="e=mc^2"
data-link="https://quilljs.com"
data-video="Embed URL"><a class="ql-action"></a><a
class="ql-remove"></a></div>
</div>
<div class="d-flex justify-content-end">
<div class="detail-quill-toolbar ql-toolbar ql-snow">
<span class="ql-formats me-3">
<button class="ql-bold" type="button"><svg
viewBox="0 0 18 18">
<path class="ql-stroke"
d="M5,4H9.5A2.5,2.5,0,0,1,12,6.5v0A2.5,2.5,0,0,1,9.5,9H5A0,0,0,0,1,5,9V4A0,0,0,0,1,5,4Z">
</path>
<path class="ql-stroke"
d="M5,9h5.5A2.5,2.5,0,0,1,13,11.5v0A2.5,2.5,0,0,1,10.5,14H5a0,0,0,0,1,0,0V9A0,0,0,0,1,5,9Z">
</path>
</svg></button>
<button class="ql-italic" type="button"><svg
viewBox="0 0 18 18">
<line class="ql-stroke" x1="7" x2="13" y1="4"
y2="4"></line>
<line class="ql-stroke" x1="5" x2="11" y1="14"
y2="14"></line>
<line class="ql-stroke" x1="8" x2="10" y1="14"
y2="4"></line>
</svg></button>
<button class="ql-underline" type="button"><svg
viewBox="0 0 18 18">
<path class="ql-stroke"
d="M5,3V9a4.012,4.012,0,0,0,4,4H9a4.012,4.012,0,0,0,4-4V3">
</path>
<rect class="ql-fill" height="1" rx="0.5"
ry="0.5" width="12" x="3" y="15"></rect>
</svg></button>
<button class="ql-link" type="button"><svg
viewBox="0 0 18 18">
<line class="ql-stroke" x1="7" x2="11" y1="7"
y2="11"></line>
<path class="ql-even ql-stroke"
d="M8.9,4.577a3.476,3.476,0,0,1,.36,4.679A3.476,3.476,0,0,1,4.577,8.9C3.185,7.5,2.035,6.4,4.217,4.217S7.5,3.185,8.9,4.577Z">
</path>
<path class="ql-even ql-stroke"
d="M13.423,9.1a3.476,3.476,0,0,0-4.679-.36,3.476,3.476,0,0,0,.36,4.679c1.392,1.392,2.5,2.542,4.679.36S14.815,10.5,13.423,9.1Z">
</path>
</svg></button>
<button class="ql-image" type="button"><svg
viewBox="0 0 18 18">
<rect class="ql-stroke" height="10" width="12"
x="3" y="4"></rect>
<circle class="ql-fill" cx="6" cy="7" r="1">
</circle>
<polyline class="ql-even ql-fill"
points="5 12 5 11 7 9 8 10 11 7 13 9 13 12 5 12">
</polyline>
</svg></button>
</span>
</div>
<button class="btn btn-primary send-btn">
<i class="bx bx-send me-3"></i>
<span class="d-none d-sm-inline"> Send</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ps__rail-x" style="left: 0px; bottom: 0px;">
<div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;"></div>
</div>
<div class="ps__rail-y" style="top: 0px; height: 736px; right: 0px;">
<div class="ps__thumb-y" tabindex="0" style="top: 0px; height: 626px;"></div>
</div>
</div>
</div>
<!--/ Detailed Email View -->
</div>
</div>
</div>
</div>
</section>
</div>
<footer>
<div class="footer clearfix mb-0 text-muted">
<div class="float-start">
<p>2021 © Mazer</p>
</div>
<div class="float-end">
<p>Crafted with <span class="text-danger"><i class="bi bi-heart"></i></span> by <a
href="http://ahmadsaugi.com">A. Saugi</a></p>
</div>
</div>
</footer>
</div>
</div>
<script src="assets/vendors/perfect-scrollbar/perfect-scrollbar.min.js"></script>
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/mazer.js"></script>
</body>
</html>