<!DOCTYPE html>
<html lang="zxx">


<!-- Mirrored from wphtml.com/html/tf/duralux-demo/apps-email.html by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 12 Nov 2024 11:21:54 GMT -->
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="keyword" content="">
    <meta name="author" content="WRAPCODERS">
    <!--! The above 6 meta tags *must* come first in the head; any other head content must come *after* these tags !-->
    <!--! BEGIN: Apps Title-->
    <title>Duralux || Email</title>
    <!--! END:  Apps Title-->
    <!--! BEGIN: Favicon-->
    <link rel="shortcut icon" type="image/x-icon" href="assets/images/favicon.ico">
    <!--! END: Favicon-->
    <!--! BEGIN: Bootstrap CSS-->
    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
    <!--! END: Bootstrap CSS-->
    <!--! BEGIN: Vendors CSS-->
    <link rel="stylesheet" type="text/css" href="assets/vendors/css/vendors.min.css">
    <link rel="stylesheet" type="text/css" href="assets/vendors/css/select2.min.css">
    <link rel="stylesheet" type="text/css" href="assets/vendors/css/select2-theme.min.css">
    <link rel="stylesheet" type="text/css" href="assets/vendors/css/tagify.min.css">
    <link rel="stylesheet" type="text/css" href="assets/vendors/css/tagify-data.min.css">
    <link rel="stylesheet" type="text/css" href="assets/vendors/css/quill.min.css">
    <!--! END: Vendors CSS-->
    <!--! BEGIN: Custom CSS-->
    <link rel="stylesheet" type="text/css" href="assets/css/theme.min.css">
    <!--! END: Custom CSS-->
    <!--! HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries !-->
    <!--! WARNING: Respond.js doesn"t work if you view the page via file: !-->
    <!--[if lt IE 9]>
			<script src="https:oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
			<script src="https:oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
		<![endif]-->
</head>

<body>
    <!--! ================================================================ !-->
    <!--! [Start] Navigation Manu !-->
    <!--! ================================================================ !-->
    @include('layouts.sidebar')

    <!--! ================================================================ !-->
    <!--! [End]  Navigation Manu !-->
    <!--! ================================================================ !-->
    <!--! ================================================================ !-->
    <!--! [Start] Header !-->
    <!--! ================================================================ !-->
    @include('layouts.header')

    <!--! ================================================================ !-->
    <!--! [End] Header !-->
    <!--! ================================================================ !-->
    <!--! ================================================================ !-->
    <!--! [Start] Main Content !-->
    <!--! ================================================================ !-->
    <main class="nxl-container apps-container apps-email">
        <div class="nxl-content without-header nxl-full-content">
            <!-- [ Main Content ] start -->
            <div class="main-content d-flex">
                <!-- [ Content Sidebar ] start -->
                <div class="content-sidebar content-sidebar-md" data-scrollbar-target="#psScrollbarInit">
                    <div class="content-sidebar-header bg-white sticky-top hstack justify-content-between">
                        <h4 class="fw-bolder mb-0">Email</h4>
                        <a href="javascript:void(0);" class="app-sidebar-close-trigger d-flex">
                            <i class="feather-x"></i>
                        </a>
                    </div>
                    <div class="content-sidebar-header">
                        <a href="javascript:void(0);" class="btn btn-primary w-100" data-bs-toggle="modal" data-bs-target="#composeMail">
                            <i class="feather-plus me-2"></i>
                            <span>Compose</span>
                        </a>
                    </div>
                    <div class="content-sidebar-body">
                        <ul class="nav flex-column nxl-content-sidebar-item">
                            <li class="nav-item">
                                <a class="nav-link d-flex align-items-center justify-content-between" href="javascript:void(0);">
                                    <span class="d-flex align-items-center">
                                        <i class="feather-inbox me-3"></i>
                                        <span>Inbox</span>
                                    </span>
                                    <span class="badge bg-soft-primary text-primary">5</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="javascript:void(0);">
                                    <i class="feather-send"></i>
                                    <span>Send</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="javascript:void(0);">
                                    <i class="feather-edit"></i>
                                    <span>Draft</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link d-flex align-items-center justify-content-between" href="javascript:void(0);">
                                    <span class="d-flex align-items-center">
                                        <i class="feather-inbox me-3"></i>
                                        <span>Spam</span>
                                    </span>
                                    <span class="badge bg-soft-danger text-danger">7</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="javascript:void(0);">
                                    <i class="feather-trash-2"></i>
                                    <span>Delete</span>
                                </a>
                            </li>
                        </ul>
                        <ul class="nav flex-column nxl-content-sidebar-item">
                            <li class="px-4 my-2 fs-10 fw-bold text-uppercase text-muted text-spacing-1 d-flex align-items-center justify-content-between">
                                <span>Label</span>
                                <a href="javascript:void(0);">
                                    <span class="avatar-text avatar-sm" data-bs-toggle="tooltip" data-bs-trigger="hover" title="Add New"> <i class="feather-plus"></i> </span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="javascript:void(0);">
                                    <span class="wd-7 ht-7 bg-primary rounded-circle"></span>
                                    <span>Work</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="javascript:void(0);">
                                    <span class="wd-7 ht-7 bg-warning rounded-circle"></span>
                                    <span>Partnership</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="javascript:void(0);">
                                    <span class="wd-7 ht-7 bg-teal rounded-circle"></span>
                                    <span>In Progress</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="javascript:void(0);">
                                    <span class="wd-7 ht-7 bg-danger rounded-circle"></span>
                                    <span>Personal</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="javascript:void(0);">
                                    <span class="wd-7 ht-7 bg-success rounded-circle"></span>
                                    <span>Payments</span>
                                </a>
                            </li>
                        </ul>
                        <ul class="nav flex-column nxl-content-sidebar-item">
                            <li class="px-4 my-2 fs-10 fw-bold text-uppercase text-muted text-spacing-1 d-flex align-items-center justify-content-between">
                                <span>Filter</span>
                                <a href="javascript:void(0);">
                                    <span class="avatar-text avatar-sm" data-bs-toggle="tooltip" data-bs-trigger="hover" title="Add New"> <i class="feather-plus"></i> </span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="javascript:void(0);">
                                    <i class="feather-star"></i>
                                    <span>Favorite</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="javascript:void(0);">
                                    <i class="feather-bell"></i>
                                    <span>Snoozed</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link d-flex align-items-center justify-content-between" href="javascript:void(0);">
                                    <span class="d-flex align-items-center">
                                        <i class="feather-info me-3"></i>
                                        <span>Important</span>
                                    </span>
                                    <span class="badge bg-soft-success text-success">3</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- [ Content Sidebar  ] end -->
                <!-- [ Main Area  ] start -->
                <div class="content-area" data-scrollbar-target="#psScrollbarInit">
                    <div class="content-area-header bg-white sticky-top">
                        <div class="page-header-left d-flex align-items-center gap-2">
                            <a href="javascript:void(0);" class="app-sidebar-open-trigger me-2">
                                <i class="feather-align-left fs-20"></i>
                            </a>
                            <div class="custom-control custom-checkbox ms-1 me-2">
                                <input type="checkbox" class="custom-control-input" id="checkAll" data-checked-action="show-options">
                                <label class="custom-control-label" for="checkAll"></label>
                            </div>
                            <div class="action-list-items">
                                <div class="dropdown">
                                    <a href="javascript:void(0)" class="avatar-text avatar-md" data-bs-toggle="dropdown" data-bs-offset="0,22">
                                        <i class="feather-chevron-down"></i>
                                    </a>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <a class="dropdown-item" href="javascript:void(0)">
                                                <i class="feather-eye me-3"></i>
                                                <span>Read</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:void(0)">
                                                <i class="feather-eye-off me-3"></i>
                                                <span>Unread</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:void(0)">
                                                <i class="feather-star me-3"></i>
                                                <span>Starred</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:void(0)">
                                                <i class="feather-shield-off me-3"></i>
                                                <span>Unstarred</span>
                                            </a>
                                        </li>
                                        <li class="dropdown-divider"></li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:void(0)">
                                                <i class="feather-clock me-3"></i>
                                                <span>Snooze</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:void(0)">
                                                <i class="feather-check-circle me-3"></i>
                                                <span>Add Tasks</span>
                                            </a>
                                        </li>
                                        <li class="dropdown-divider"></li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:void(0)">
                                                <i class="feather-archive me-3"></i>
                                                <span>Archive</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:void(0)">
                                                <i class="feather-alert-octagon me-3"></i>
                                                <span>Report Spam</span>
                                            </a>
                                        </li>
                                        <li class="dropdown-divider"></li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:void(0)">
                                                <i class="feather-trash-2 me-3"></i>
                                                <span>Delete</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="dropdown">
                                    <a href="javascript:void(0)" class="d-flex" data-bs-toggle="dropdown" data-bs-offset="0,22" data-bs-auto-close="outside" aria-expanded="false">
                                        <div class="avatar-text avatar-md" data-bs-toggle="tooltip" data-bs-trigger="hover" title="Tags">
                                            <i class="feather-tag"></i>
                                        </div>
                                    </a>
                                    <div class="dropdown-menu">
                                        <div class="dropdown-item">
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input" id="Office" checked="checked">
                                                <label class="custom-control-label c-pointer" for="Office">Office</label>
                                            </div>
                                        </div>
                                        <div class="dropdown-item">
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input" id="Family">
                                                <label class="custom-control-label c-pointer" for="Family">Family</label>
                                            </div>
                                        </div>
                                        <div class="dropdown-item">
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input" id="Friend" checked="checked">
                                                <label class="custom-control-label c-pointer" for="Friend">Friend</label>
                                            </div>
                                        </div>
                                        <div class="dropdown-item">
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input" id="Marketplace">
                                                <label class="custom-control-label c-pointer" for="Marketplace"> Marketplace </label>
                                            </div>
                                        </div>
                                        <div class="dropdown-item">
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input" id="Development">
                                                <label class="custom-control-label c-pointer" for="Development"> Development </label>
                                            </div>
                                        </div>
                                        <div class="dropdown-divider"></div>
                                        <a href="javascript:void(0);" class="dropdown-item">
                                            <i class="feather-plus me-3"></i>
                                            <span>Create Tag</span>
                                        </a>
                                        <a href="javascript:void(0);" class="dropdown-item">
                                            <i class="feather-tag me-3"></i>
                                            <span>Manages Tag</span>
                                        </a>
                                    </div>
                                </div>
                                <div class="dropdown">
                                    <a href="javascript:void(0)" class="d-flex" data-bs-toggle="dropdown" data-bs-offset="0,22" data-bs-auto-close="outside" aria-expanded="false">
                                        <div class="avatar-text avatar-md" data-bs-toggle="tooltip" data-bs-trigger="hover" title="Labels">
                                            <i class="feather-folder-plus"></i>
                                        </div>
                                    </a>
                                    <div class="dropdown-menu">
                                        <div class="dropdown-item">
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input" id="Updates">
                                                <label class="custom-control-label c-pointer" for="Updates">Updates</label>
                                            </div>
                                        </div>
                                        <div class="dropdown-item">
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input" id="Socials">
                                                <label class="custom-control-label c-pointer" for="Socials">Socials</label>
                                            </div>
                                        </div>
                                        <div class="dropdown-item">
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input" id="Primary" checked="checked">
                                                <label class="custom-control-label c-pointer" for="Primary">Primary</label>
                                            </div>
                                        </div>
                                        <div class="dropdown-item">
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input" id="Forums">
                                                <label class="custom-control-label c-pointer" for="Forums">Forums</label>
                                            </div>
                                        </div>
                                        <div class="dropdown-item">
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input" id="Promotions" checked="checked">
                                                <label class="custom-control-label c-pointer" for="Promotions"> Promotions </label>
                                            </div>
                                        </div>
                                        <div class="dropdown-divider"></div>
                                        <a href="javascript:void(0);" class="dropdown-item">
                                            <i class="feather-plus me-3"></i>
                                            <span>Create Label</span>
                                        </a>
                                        <a href="javascript:void(0);" class="dropdown-item">
                                            <i class="feather-folder-plus me-3"></i>
                                            <span>Manages Label</span>
                                        </a>
                                    </div>
                                </div>
                                <div class="dropdown">
                                    <a href="javascript:void(0)" class="d-flex" data-bs-toggle="dropdown" data-bs-offset="0,22" data-bs-auto-close="outside" aria-expanded="false">
                                        <div class="avatar-text avatar-md" data-bs-toggle="tooltip" data-bs-trigger="hover" title="More Options">
                                            <i class="feather-more-vertical"></i>
                                        </div>
                                    </a>
                                    <div class="dropdown-menu">
                                        <a href="javascript:void(0)" class="dropdown-item">
                                            <i class="feather-plus me-3"></i>
                                            <span>Add to Group</span>
                                        </a>
                                        <a href="javascript:void(0)" class="dropdown-item">
                                            <i class="feather-user-plus me-3"></i>
                                            <span>Add to Contact</span>
                                        </a>
                                        <a href="javascript:void(0)" class="dropdown-item">
                                            <i class="feather-eye-off me-3"></i>
                                            <span>Make as Unread</span>
                                        </a>
                                        <a href="javascript:void(0)" class="dropdown-item">
                                            <i class="feather-sliders me-3"></i>
                                            <span>Filter Messages</span>
                                        </a>
                                        <a href="javascript:void(0)" class="dropdown-item">
                                            <i class="feather-archive me-3"></i>
                                            <span>Make as Archive</span>
                                        </a>
                                        <div class="dropdown-divider"></div>
                                        <a href="javascript:void(0)" class="dropdown-item">
                                            <i class="feather-slash me-3"></i>
                                            <span>Report Spam</span>
                                        </a>
                                        <a href="javascript:void(0)" class="dropdown-item">
                                            <i class="feather-sliders me-3"></i>
                                            <span>Report phishing</span>
                                        </a>
                                        <a href="javascript:void(0)" class="dropdown-item">
                                            <i class="feather-download me-3"></i>
                                            <span>Download Messages</span>
                                        </a>
                                        <div class="dropdown-divider"></div>
                                        <a href="javascript:void(0)" class="dropdown-item">
                                            <i class="feather-bell-off me-3"></i>
                                            <span>Mute Conversion</span>
                                        </a>
                                        <a href="javascript:void(0)" class="dropdown-item">
                                            <i class="feather-slash me-3"></i>
                                            <span>Block Conversion</span>
                                        </a>
                                        <a href="javascript:void(0)" class="dropdown-item">
                                            <i class="feather-trash-2 me-3"></i>
                                            <span>Delete Conversion</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <a href="javascript:void(0)" class="d-none d-sm-flex">
                                <div class="avatar-text avatar-md" data-bs-toggle="tooltip" data-bs-trigger="hover" title="Refresh">
                                    <i class="feather-refresh-cw"></i>
                                </div>
                            </a>
                            <a href="javascript:void(0)" class="d-none d-sm-flex">
                                <div class="avatar-text avatar-md" data-bs-toggle="tooltip" data-bs-trigger="hover" title="Snooze">
                                    <i class="feather-bell"></i>
                                </div>
                            </a>
                        </div>
                        <div class="page-header-right ms-auto">
                            <div class="hstack gap-2">
                                <div class="hstack">
                                    <a href="javascript:void(0)" class="search-form-open-toggle">
                                        <div class="avatar-text avatar-md" data-bs-toggle="tooltip" data-bs-trigger="hover" title="Search">
                                            <i class="feather-search"></i>
                                        </div>
                                    </a>
                                    <form class="search-form" style="display: none">
                                        <div class="search-form-inner">
                                            <a href="javascript:void(0)" class="search-form-close-toggle">
                                                <div class="avatar-text avatar-md" data-bs-toggle="tooltip" data-bs-trigger="hover" title="Back">
                                                    <i class="feather-arrow-left"></i>
                                                </div>
                                            </a>
                                            <input type="search" class="py-3 px-0 border-0 w-100" id="emailSearch" placeholder="Search..." autocomplete="off">
                                        </div>
                                    </form>
                                </div>
                                <div class="dropdown d-none d-sm-flex">
                                    <a href="javascript:void(0)" class="btn btn-light-brand btn-sm rounded-pill dropdown-toggle" data-bs-toggle="dropdown" data-bs-offset="0,23" aria-expanded="false">1-15 of 762 </a>
                                    <ul class="dropdown-menu">
                                        <li><a class="dropdown-item" href="javascript:void(0)">Oldest</a></li>
                                        <li><a class="dropdown-item" href="javascript:void(0)">Newest</a></li>
                                        <li><a class="dropdown-item" href="javascript:void(0)">Replied</a></li>
                                        <li class="dropdown-divider"></li>
                                        <li><a class="dropdown-item" href="javascript:void(0)">Ascending</a></li>
                                        <li><a class="dropdown-item" href="javascript:void(0)">Descending</a></li>
                                    </ul>
                                </div>
                                <div class="hstack d-none d-sm-flex">
                                    <a href="javascript:void(0)" class="d-flex me-1">
                                        <div class="avatar-text avatar-md" data-bs-toggle="tooltip" data-bs-trigger="hover" title="Previous">
                                            <i class="feather-chevron-left"></i>
                                        </div>
                                    </a>
                                    <a href="javascript:void(0)" class="d-flex me-1">
                                        <div class="avatar-text avatar-md" data-bs-toggle="tooltip" data-bs-trigger="hover" title="Next">
                                            <i class="feather-chevron-right"></i>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="content-area-body p-0">
                        <div class="single-items">
                            <!--! [item-meta] !-->
                            <div class="d-flex wd-80 gap-4 ms-1 item-meta">
                                <div class="item-checkbox">
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input checkbox" id="checkBox_1" data-checked-action="show-options">
                                        <label class="custom-control-label" for="checkBox_1"></label>
                                    </div>
                                </div>
                                <div class="item-favorite">
                                    <a href="javascript:void(0)">
                                        <i class="feather-star fs-12"></i>
                                    </a>
                                </div>
                            </div>
                            <!--! [item-info] !-->
                            <div class="d-flex align-items-center gap-4 w-100 item-info" data-view-toggle="details">
                                <a href="javascript:void(0)" class="hstack gap-3 wd-200 item-user">
                                    <div class="avatar-image avatar-md">
                                        <img src="assets/images/avatar/1.png" alt="" class="img-fluid">
                                    </div>
                                    <div class="text-truncate-1-line mb-0">Alexandra Della</div>
                                </a>
                                <a href="javascript:void(0)" class="d-none d-md-block">
                                    <div class="w-100 text-truncate-1-line item-desc">
                                        <span class="badge bg-gray-200 text-dark me-2">Friends</span>
                                        <i class="feather-link-2 fs-12"></i>
                                        <span class="ms-3">Ruhul Hasan, log into Facebook with one click</span>
                                    </div>
                                </a>
                            </div>
                            <!--! [item-date] !-->
                            <div class="d-flex align-items-center justify-content-end wd-150 gap-3 item-data">
                                <div class="fs-11 fw-medium text-muted text-uppercase d-none d-sm-block item-time">26 May, 2023</div>
                                <div class="item-action">
                                    <div class="dropdown">
                                        <a href="javascript:void(0)" data-bs-toggle="dropdown" data-bs-offset="0, 28">
                                            <div class="avatar-text avatar-sm" data-bs-toggle="tooltip" data-bs-trigger="hover" title="More Options">
                                                <i class="feather-more-vertical"></i>
                                            </div>
                                        </a>
                                        <div class="dropdown-menu dropdown-menu-end">
                                            <a href="javascript:void(0);" class="dropdown-item" data-view-toggle="details">
                                                <i class="feather-eye me-3"></i>
                                                <span>View</span>
                                            </a>
                                            <a href="javascript:void(0);" class="dropdown-item">
                                                <i class="feather-corner-up-right me-3"></i>
                                                <span>Reply</span>
                                            </a>
                                            <a href="javascript:void(0);" class="dropdown-item">
                                                <i class="feather-fast-forward me-3"></i>
                                                <span>Forward</span>
                                            </a>
                                            <a href="javascript:void(0);" class="dropdown-item">
                                                <i class="feather-repeat me-3"></i>
                                                <span>Reply All</span>
                                            </a>
                                            <div class="dropdown-divider"></div>
                                            <a href="javascript:void(0)" class="dropdown-item" data-action-target="#mailDeleteMessage">
                                                <i class="feather-x me-3"></i>
                                                <span>Delete</span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="single-items">
                            <!--! [item-meta] !-->
                            <div class="d-flex wd-80 gap-4 ms-1 item-meta">
                                <div class="item-checkbox">
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input checkbox" id="checkBox_2" data-checked-action="show-options">
                                        <label class="custom-control-label" for="checkBox_2"></label>
                                    </div>
                                </div>
                                <div class="item-favorite">
                                    <a href="javascript:void(0)">
                                        <i class="feather-star fs-12"></i>
                                    </a>
                                </div>
                            </div>
                            <!--! [item-info] !-->
                            <div class="d-flex align-items-center gap-4 w-100 item-info" data-view-toggle="details">
                                <a href="javascript:void(0)" class="hstack gap-3 wd-200 item-user">
                                    <div class="avatar-image avatar-md">
                                        <img src="assets/images/avatar/2.png" alt="" class="img-fluid">
                                    </div>
                                    <div class="text-truncate-1-line mb-0">Green Cute</div>
                                </a>
                                <a href="javascript:void(0)" class="d-none d-md-block">
                                    <div class="w-100 text-truncate-1-line item-desc">
                                        <span class="badge bg-gray-200 text-dark me-2">Update</span>
                                        <i class="feather-link-2 fs-12"></i>
                                        <span class="ms-3">Latest news updates on your subscribed channel</span>
                                    </div>
                                </a>
                            </div>
                            <!--! [item-date] !-->
                            <div class="d-flex align-items-center justify-content-end wd-150 gap-3 item-data">
                                <div class="fs-11 fw-medium text-muted text-uppercase d-none d-sm-block item-time">26 May, 2023</div>
                                <div class="item-action">
                                    <div class="dropdown">
                                        <a href="javascript:void(0)" data-bs-toggle="dropdown" data-bs-offset="0, 28">
                                            <div class="avatar-text avatar-sm" data-bs-toggle="tooltip" data-bs-trigger="hover" title="More Options">
                                                <i class="feather-more-vertical"></i>
                                            </div>
                                        </a>
                                        <div class="dropdown-menu dropdown-menu-end">
                                            <a href="javascript:void(0);" class="dropdown-item" data-view-toggle="details">
                                                <i class="feather-eye me-3"></i>
                                                <span>View</span>
                                            </a>
                                            <a href="javascript:void(0);" class="dropdown-item">
                                                <i class="feather-corner-up-right me-3"></i>
                                                <span>Reply</span>
                                            </a>
                                            <a href="javascript:void(0);" class="dropdown-item">
                                                <i class="feather-fast-forward me-3"></i>
                                                <span>Forward</span>
                                            </a>
                                            <a href="javascript:void(0);" class="dropdown-item">
                                                <i class="feather-repeat me-3"></i>
                                                <span>Reply All</span>
                                            </a>
                                            <div class="dropdown-divider"></div>
                                            <a href="javascript:void(0)" class="dropdown-item" data-action-target="#mailDeleteMessage">
                                                <i class="feather-x me-3"></i>
                                                <span>Delete</span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="single-items">
                            <!--! [item-meta] !-->
                            <div class="d-flex wd-80 gap-4 ms-1 item-meta">
                                <div class="item-checkbox">
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input checkbox" id="checkBox_3" data-checked-action="show-options">
                                        <label class="custom-control-label" for="checkBox_3"></label>
                                    </div>
                                </div>
                                <div class="item-favorite">
                                    <a href="javascript:void(0)">
                                        <i class="feather-star fs-12"></i>
                                    </a>
                                </div>
                            </div>
                            <!--! [item-info] !-->
                            <div class="d-flex align-items-center gap-4 w-100 item-info" data-view-toggle="details">
                                <a href="javascript:void(0)" class="hstack gap-3 wd-200 item-user">
                                    <div class="avatar-image avatar-md">
                                        <img src="assets/images/avatar/3.png" alt="" class="img-fluid">
                                    </div>
                                    <div class="text-truncate-1-line mb-0">Marianne Audrey</div>
                                </a>
                                <a href="javascript:void(0)" class="d-none d-md-block">
                                    <div class="w-100 text-truncate-1-line item-desc">
                                        <span class="badge bg-gray-200 text-dark me-2">Primary</span>
                                        <i class="feather-link-2 fs-12"></i>
                                        <span class="ms-3">Flatlogic Contact Form: I am requesting to submit a template</span>
                                    </div>
                                </a>
                            </div>
                            <!--! [item-date] !-->
                            <div class="d-flex align-items-center justify-content-end wd-150 gap-3 item-data">
                                <div class="fs-11 fw-medium text-muted text-uppercase d-none d-sm-block item-time">26 May, 2023</div>
                                <div class="item-action">
                                    <div class="dropdown">
                                        <a href="javascript:void(0)" data-bs-toggle="dropdown" data-bs-offset="0, 28">
                                            <div class="avatar-text avatar-sm" data-bs-toggle="tooltip" data-bs-trigger="hover" title="More Options">
                                                <i class="feather-more-vertical"></i>
                                            </div>
                                        </a>
                                        <div class="dropdown-menu dropdown-menu-end">
                                            <a href="javascript:void(0);" class="dropdown-item" data-view-toggle="details">
                                                <i class="feather-eye me-3"></i>
                                                <span>View</span>
                                            </a>
                                            <a href="javascript:void(0);" class="dropdown-item">
                                                <i class="feather-corner-up-right me-3"></i>
                                                <span>Reply</span>
                                            </a>
                                            <a href="javascript:void(0);" class="dropdown-item">
                                                <i class="feather-fast-forward me-3"></i>
                                                <span>Forward</span>
                                            </a>
                                            <a href="javascript:void(0);" class="dropdown-item">
                                                <i class="feather-repeat me-3"></i>
                                                <span>Reply All</span>
                                            </a>
                                            <div class="dropdown-divider"></div>
                                            <a href="javascript:void(0)" class="dropdown-item" data-action-target="#mailDeleteMessage">
                                                <i class="feather-x me-3"></i>
                                                <span>Delete</span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="single-items">
                            <!--! [item-meta] !-->
                            <div class="d-flex wd-80 gap-4 ms-1 item-meta">
                                <div class="item-checkbox">
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input checkbox" id="checkBox_4" data-checked-action="show-options">
                                        <label class="custom-control-label" for="checkBox_4"></label>
                                    </div>
                                </div>
                                <div class="item-favorite">
                                    <a href="javascript:void(0)">
                                        <i class="feather-star fs-12"></i>
                                    </a>
                                </div>
                            </div>
                            <!--! [item-info] !-->
                            <div class="d-flex align-items-center gap-4 w-100 item-info" data-view-toggle="details">
                                <a href="javascript:void(0)" class="hstack gap-3 wd-200 item-user">
                                    <div class="avatar-image avatar-md">
                                        <img src="assets/images/avatar/1.png" alt="" class="img-fluid">
                                    </div>
                                    <div class="text-truncate-1-line mb-0">Alexandra Della</div>
                                </a>
                                <a href="javascript:void(0)" class="d-none d-md-block">
                                    <div class="w-100 text-truncate-1-line item-desc">
                                        <span class="badge bg-gray-200 text-dark me-2">Friends</span>
                                        <i class="feather-link-2 fs-12"></i>
                                        <span class="ms-3">Ruhul Hasan, log into Facebook with one click</span>
                                    </div>
                                </a>
                            </div>
                            <!--! [item-date] !-->
                            <div class="d-flex align-items-center justify-content-end wd-150 gap-3 item-data">
                                <div class="fs-11 fw-medium text-muted text-uppercase d-none d-sm-block item-time">26 May, 2023</div>
                                <div class="item-action">
                                    <div class="dropdown">
                                        <a href="javascript:void(0)" data-bs-toggle="dropdown" data-bs-offset="0, 28">
                                            <div class="avatar-text avatar-sm" data-bs-toggle="tooltip" data-bs-trigger="hover" title="More Options">
                                                <i class="feather-more-vertical"></i>
                                            </div>
                                        </a>
                                        <div class="dropdown-menu dropdown-menu-end">
                                            <a href="javascript:void(0);" class="dropdown-item" data-view-toggle="details">
                                                <i class="feather-eye me-3"></i>
                                                <span>View</span>
                                            </a>
                                            <a href="javascript:void(0);" class="dropdown-item">
                                                <i class="feather-corner-up-right me-3"></i>
                                                <span>Reply</span>
                                            </a>
                                            <a href="javascript:void(0);" class="dropdown-item">
                                                <i class="feather-fast-forward me-3"></i>
                                                <span>Forward</span>
                                            </a>
                                            <a href="javascript:void(0);" class="dropdown-item">
                                                <i class="feather-repeat me-3"></i>
                                                <span>Reply All</span>
                                            </a>
                                            <div class="dropdown-divider"></div>
                                            <a href="javascript:void(0)" class="dropdown-item" data-action-target="#mailDeleteMessage">
                                                <i class="feather-x me-3"></i>
                                                <span>Delete</span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="single-items">
                            <!--! [item-meta] !-->
                            <div class="d-flex wd-80 gap-4 ms-1 item-meta">
                                <div class="item-checkbox">
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input checkbox" id="checkBox_5" data-checked-action="show-options">
                                        <label class="custom-control-label" for="checkBox_5"></label>
                                    </div>
                                </div>
                                <div class="item-favorite">
                                    <a href="javascript:void(0)">
                                        <i class="feather-star fs-12"></i>
                                    </a>
                                </div>
                            </div>
                            <!--! [item-info] !-->
                            <div class="d-flex align-items-center gap-4 w-100 item-info" data-view-toggle="details">
                                <a href="javascript:void(0)" class="hstack gap-3 wd-200 item-user">
                                    <div class="avatar-image avatar-md">
                                        <img src="assets/images/avatar/2.png" alt="" class="img-fluid">
                                    </div>
                                    <div class="text-truncate-1-line mb-0">Green Cute</div>
                                </a>
                                <a href="javascript:void(0)" class="d-none d-md-block">
                                    <div class="w-100 text-truncate-1-line item-desc">
                                        <span class="badge bg-gray-200 text-dark me-2">Update</span>
                                        <i class="feather-link-2 fs-12"></i>
                                        <span class="ms-3">Latest news updates on your subscribed channel</span>
                                    </div>
                                </a>
                            </div>
                            <!--! [item-date] !-->
                            <div class="d-flex align-items-center justify-content-end wd-150 gap-3 item-data">
                                <div class="fs-11 fw-medium text-muted text-uppercase d-none d-sm-block item-time">26 May, 2023</div>
                                <div class="item-action">
                                    <div class="dropdown">
                                        <a href="javascript:void(0)" data-bs-toggle="dropdown" data-bs-offset="0, 28">
                                            <div class="avatar-text avatar-sm" data-bs-toggle="tooltip" data-bs-trigger="hover" title="More Options">
                                                <i class="feather-more-vertical"></i>
                                            </div>
                                        </a>
                                        <div class="dropdown-menu dropdown-menu-end">
                                            <a href="javascript:void(0);" class="dropdown-item" data-view-toggle="details">
                                                <i class="feather-eye me-3"></i>
                                                <span>View</span>
                                            </a>
                                            <a href="javascript:void(0);" class="dropdown-item">
                                                <i class="feather-corner-up-right me-3"></i>
                                                <span>Reply</span>
                                            </a>
                                            <a href="javascript:void(0);" class="dropdown-item">
                                                <i class="feather-fast-forward me-3"></i>
                                                <span>Forward</span>
                                            </a>
                                            <a href="javascript:void(0);" class="dropdown-item">
                                                <i class="feather-repeat me-3"></i>
                                                <span>Reply All</span>
                                            </a>
                                            <div class="dropdown-divider"></div>
                                            <a href="javascript:void(0)" class="dropdown-item" data-action-target="#mailDeleteMessage">
                                                <i class="feather-x me-3"></i>
                                                <span>Delete</span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="single-items">
                            <!--! [item-meta] !-->
                            <div class="d-flex wd-80 gap-4 ms-1 item-meta">
                                <div class="item-checkbox">
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input checkbox" id="checkBox_6" data-checked-action="show-options">
                                        <label class="custom-control-label" for="checkBox_6"></label>
                                    </div>
                                </div>
                                <div class="item-favorite">
                                    <a href="javascript:void(0)">
                                        <i class="feather-star fs-12"></i>
                                    </a>
                                </div>
                            </div>
                            <!--! [item-info] !-->
                            <div class="d-flex align-items-center gap-4 w-100 item-info" data-view-toggle="details">
                                <a href="javascript:void(0)" class="hstack gap-3 wd-200 item-user">
                                    <div class="avatar-image avatar-md">
                                        <img src="assets/images/avatar/3.png" alt="" class="img-fluid">
                                    </div>
                                    <div class="text-truncate-1-line mb-0">Marianne Audrey</div>
                                </a>
                                <a href="javascript:void(0)" class="d-none d-md-block">
                                    <div class="w-100 text-truncate-1-line item-desc">
                                        <span class="badge bg-gray-200 text-dark me-2">Primary</span>
                                        <i class="feather-link-2 fs-12"></i>
                                        <span class="ms-3">Flatlogic Contact Form: I am requesting to submit a template</span>
                                    </div>
                                </a>
                            </div>
                            <!--! [item-date] !-->
                            <div class="d-flex align-items-center justify-content-end wd-150 gap-3 item-data">
                                <div class="fs-11 fw-medium text-muted text-uppercase d-none d-sm-block item-time">26 May, 2023</div>
                                <div class="item-action">
                                    <div class="dropdown">
                                        <a href="javascript:void(0)" data-bs-toggle="dropdown" data-bs-offset="0, 28">
                                            <div class="avatar-text avatar-sm" data-bs-toggle="tooltip" data-bs-trigger="hover" title="More Options">
                                                <i class="feather-more-vertical"></i>
                                            </div>
                                        </a>
                                        <div class="dropdown-menu dropdown-menu-end">
                                            <a href="javascript:void(0);" class="dropdown-item" data-view-toggle="details">
                                                <i class="feather-eye me-3"></i>
                                                <span>View</span>
                                            </a>
                                            <a href="javascript:void(0);" class="dropdown-item">
                                                <i class="feather-corner-up-right me-3"></i>
                                                <span>Reply</span>
                                            </a>
                                            <a href="javascript:void(0);" class="dropdown-item">
                                                <i class="feather-fast-forward me-3"></i>
                                                <span>Forward</span>
                                            </a>
                                            <a href="javascript:void(0);" class="dropdown-item">
                                                <i class="feather-repeat me-3"></i>
                                                <span>Reply All</span>
                                            </a>
                                            <div class="dropdown-divider"></div>
                                            <a href="javascript:void(0)" class="dropdown-item" data-action-target="#mailDeleteMessage">
                                                <i class="feather-x me-3"></i>
                                                <span>Delete</span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="single-items">
                            <!--! [item-meta] !-->
                            <div class="d-flex wd-80 gap-4 ms-1 item-meta">
                                <div class="item-checkbox">
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input checkbox" id="checkBox_7" data-checked-action="show-options">
                                        <label class="custom-control-label" for="checkBox_7"></label>
                                    </div>
                                </div>
                                <div class="item-favorite">
                                    <a href="javascript:void(0)">
                                        <i class="feather-star fs-12"></i>
                                    </a>
                                </div>
                            </div>
                            <!--! [item-info] !-->
                            <div class="d-flex align-items-center gap-4 w-100 item-info" data-view-toggle="details">
                                <a href="javascript:void(0)" class="hstack gap-3 wd-200 item-user">
                                    <div class="avatar-image avatar-md">
                                        <img src="assets/images/avatar/1.png" alt="" class="img-fluid">
                                    </div>
                                    <div class="text-truncate-1-line mb-0">Alexandra Della</div>
                                </a>
                                <a href="javascript:void(0)" class="d-none d-md-block">
                                    <div class="w-100 text-truncate-1-line item-desc">
                                        <span class="badge bg-gray-200 text-dark me-2">Friends</span>
                                        <i class="feather-link-2 fs-12"></i>
                                        <span class="ms-3">Ruhul Hasan, log into Facebook with one click</span>
                                    </div>
                                </a>
                            </div>
                            <!--! [item-date] !-->
                            <div class="d-flex align-items-center justify-content-end wd-150 gap-3 item-data">
                                <div class="fs-11 fw-medium text-muted text-uppercase d-none d-sm-block item-time">26 May, 2023</div>
                                <div class="item-action">
                                    <div class="dropdown">
                                        <a href="javascript:void(0)" data-bs-toggle="dropdown" data-bs-offset="0, 28">
                                            <div class="avatar-text avatar-sm" data-bs-toggle="tooltip" data-bs-trigger="hover" title="More Options">
                                                <i class="feather-more-vertical"></i>
                                            </div>
                                        </a>
                                        <div class="dropdown-menu dropdown-menu-end">
                                            <a href="javascript:void(0);" class="dropdown-item" data-view-toggle="details">
                                                <i class="feather-eye me-3"></i>
                                                <span>View</span>
                                            </a>
                                            <a href="javascript:void(0);" class="dropdown-item">
                                                <i class="feather-corner-up-right me-3"></i>
                                                <span>Reply</span>
                                            </a>
                                            <a href="javascript:void(0);" class="dropdown-item">
                                                <i class="feather-fast-forward me-3"></i>
                                                <span>Forward</span>
                                            </a>
                                            <a href="javascript:void(0);" class="dropdown-item">
                                                <i class="feather-repeat me-3"></i>
                                                <span>Reply All</span>
                                            </a>
                                            <div class="dropdown-divider"></div>
                                            <a href="javascript:void(0)" class="dropdown-item" data-action-target="#mailDeleteMessage">
                                                <i class="feather-x me-3"></i>
                                                <span>Delete</span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="single-items">
                            <!--! [item-meta] !-->
                            <div class="d-flex wd-80 gap-4 ms-1 item-meta">
                                <div class="item-checkbox">
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input checkbox" id="checkBox_8" data-checked-action="show-options">
                                        <label class="custom-control-label" for="checkBox_8"></label>
                                    </div>
                                </div>
                                <div class="item-favorite">
                                    <a href="javascript:void(0)">
                                        <i class="feather-star fs-12"></i>
                                    </a>
                                </div>
                            </div>
                            <!--! [item-info] !-->
                            <div class="d-flex align-items-center gap-4 w-100 item-info" data-view-toggle="details">
                                <a href="javascript:void(0)" class="hstack gap-3 wd-200 item-user">
                                    <div class="avatar-image avatar-md">
                                        <img src="assets/images/avatar/2.png" alt="" class="img-fluid">
                                    </div>
                                    <div class="text-truncate-1-line mb-0">Green Cute</div>
                                </a>
                                <a href="javascript:void(0)" class="d-none d-md-block">
                                    <div class="w-100 text-truncate-1-line item-desc">
                                        <span class="badge bg-gray-200 text-dark me-2">Update</span>
                                        <i class="feather-link-2 fs-12"></i>
                                        <span class="ms-3">Latest news updates on your subscribed channel</span>
                                    </div>
                                </a>
                            </div>
                            <!--! [item-date] !-->
                            <div class="d-flex align-items-center justify-content-end wd-150 gap-3 item-data">
                                <div class="fs-11 fw-medium text-muted text-uppercase d-none d-sm-block item-time">26 May, 2023</div>
                                <div class="item-action">
                                    <div class="dropdown">
                                        <a href="javascript:void(0)" data-bs-toggle="dropdown" data-bs-offset="0, 28">
                                            <div class="avatar-text avatar-sm" data-bs-toggle="tooltip" data-bs-trigger="hover" title="More Options">
                                                <i class="feather-more-vertical"></i>
                                            </div>
                                        </a>
                                        <div class="dropdown-menu dropdown-menu-end">
                                            <a href="javascript:void(0);" class="dropdown-item" data-view-toggle="details">
                                                <i class="feather-eye me-3"></i>
                                                <span>View</span>
                                            </a>
                                            <a href="javascript:void(0);" class="dropdown-item">
                                                <i class="feather-corner-up-right me-3"></i>
                                                <span>Reply</span>
                                            </a>
                                            <a href="javascript:void(0);" class="dropdown-item">
                                                <i class="feather-fast-forward me-3"></i>
                                                <span>Forward</span>
                                            </a>
                                            <a href="javascript:void(0);" class="dropdown-item">
                                                <i class="feather-repeat me-3"></i>
                                                <span>Reply All</span>
                                            </a>
                                            <div class="dropdown-divider"></div>
                                            <a href="javascript:void(0)" class="dropdown-item" data-action-target="#mailDeleteMessage">
                                                <i class="feather-x me-3"></i>
                                                <span>Delete</span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="single-items">
                            <!--! [item-meta] !-->
                            <div class="d-flex wd-80 gap-4 ms-1 item-meta">
                                <div class="item-checkbox">
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input checkbox" id="checkBox_9" data-checked-action="show-options">
                                        <label class="custom-control-label" for="checkBox_9"></label>
                                    </div>
                                </div>
                                <div class="item-favorite">
                                    <a href="javascript:void(0)">
                                        <i class="feather-star fs-12"></i>
                                    </a>
                                </div>
                            </div>
                            <!--! [item-info] !-->
                            <div class="d-flex align-items-center gap-4 w-100 item-info" data-view-toggle="details">
                                <a href="javascript:void(0)" class="hstack gap-3 wd-200 item-user">
                                    <div class="avatar-image avatar-md">
                                        <img src="assets/images/avatar/3.png" alt="" class="img-fluid">
                                    </div>
                                    <div class="text-truncate-1-line mb-0">Marianne Audrey</div>
                                </a>
                                <a href="javascript:void(0)" class="d-none d-md-block">
                                    <div class="w-100 text-truncate-1-line item-desc">
                                        <span class="badge bg-gray-200 text-dark me-2">Primary</span>
                                        <i class="feather-link-2 fs-12"></i>
                                        <span class="ms-3">Flatlogic Contact Form: I am requesting to submit a template</span>
                                    </div>
                                </a>
                            </div>
                            <!--! [item-date] !-->
                            <div class="d-flex align-items-center justify-content-end wd-150 gap-3 item-data">
                                <div class="fs-11 fw-medium text-muted text-uppercase d-none d-sm-block item-time">26 May, 2023</div>
                                <div class="item-action">
                                    <div class="dropdown">
                                        <a href="javascript:void(0)" data-bs-toggle="dropdown" data-bs-offset="0, 28">
                                            <div class="avatar-text avatar-sm" data-bs-toggle="tooltip" data-bs-trigger="hover" title="More Options">
                                                <i class="feather-more-vertical"></i>
                                            </div>
                                        </a>
                                        <div class="dropdown-menu dropdown-menu-end">
                                            <a href="javascript:void(0);" class="dropdown-item" data-view-toggle="details">
                                                <i class="feather-eye me-3"></i>
                                                <span>View</span>
                                            </a>
                                            <a href="javascript:void(0);" class="dropdown-item">
                                                <i class="feather-corner-up-right me-3"></i>
                                                <span>Reply</span>
                                            </a>
                                            <a href="javascript:void(0);" class="dropdown-item">
                                                <i class="feather-fast-forward me-3"></i>
                                                <span>Forward</span>
                                            </a>
                                            <a href="javascript:void(0);" class="dropdown-item">
                                                <i class="feather-repeat me-3"></i>
                                                <span>Reply All</span>
                                            </a>
                                            <div class="dropdown-divider"></div>
                                            <a href="javascript:void(0)" class="dropdown-item" data-action-target="#mailDeleteMessage">
                                                <i class="feather-x me-3"></i>
                                                <span>Delete</span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="single-items">
                            <!--! [item-meta] !-->
                            <div class="d-flex wd-80 gap-4 ms-1 item-meta">
                                <div class="item-checkbox">
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input checkbox" id="checkBox_10" data-checked-action="show-options">
                                        <label class="custom-control-label" for="checkBox_10"></label>
                                    </div>
                                </div>
                                <div class="item-favorite">
                                    <a href="javascript:void(0)">
                                        <i class="feather-star fs-12"></i>
                                    </a>
                                </div>
                            </div>
                            <!--! [item-info] !-->
                            <div class="d-flex align-items-center gap-4 w-100 item-info" data-view-toggle="details">
                                <a href="javascript:void(0)" class="hstack gap-3 wd-200 item-user">
                                    <div class="avatar-image avatar-md">
                                        <img src="assets/images/avatar/1.png" alt="" class="img-fluid">
                                    </div>
                                    <div class="text-truncate-1-line mb-0">Alexandra Della</div>
                                </a>
                                <a href="javascript:void(0)" class="d-none d-md-block">
                                    <div class="w-100 text-truncate-1-line item-desc">
                                        <span class="badge bg-gray-200 text-dark me-2">Friends</span>
                                        <i class="feather-link-2 fs-12"></i>
                                        <span class="ms-3">Ruhul Hasan, log into Facebook with one click</span>
                                    </div>
                                </a>
                            </div>
                            <!--! [item-date] !-->
                            <div class="d-flex align-items-center justify-content-end wd-150 gap-3 item-data">
                                <div class="fs-11 fw-medium text-muted text-uppercase d-none d-sm-block item-time">26 May, 2023</div>
                                <div class="item-action">
                                    <div class="dropdown">
                                        <a href="javascript:void(0)" data-bs-toggle="dropdown" data-bs-offset="0, 28">
                                            <div class="avatar-text avatar-sm" data-bs-toggle="tooltip" data-bs-trigger="hover" title="More Options">
                                                <i class="feather-more-vertical"></i>
                                            </div>
                                        </a>
                                        <div class="dropdown-menu dropdown-menu-end">
                                            <a href="javascript:void(0);" class="dropdown-item" data-view-toggle="details">
                                                <i class="feather-eye me-3"></i>
                                                <span>View</span>
                                            </a>
                                            <a href="javascript:void(0);" class="dropdown-item">
                                                <i class="feather-corner-up-right me-3"></i>
                                                <span>Reply</span>
                                            </a>
                                            <a href="javascript:void(0);" class="dropdown-item">
                                                <i class="feather-fast-forward me-3"></i>
                                                <span>Forward</span>
                                            </a>
                                            <a href="javascript:void(0);" class="dropdown-item">
                                                <i class="feather-repeat me-3"></i>
                                                <span>Reply All</span>
                                            </a>
                                            <div class="dropdown-divider"></div>
                                            <a href="javascript:void(0)" class="dropdown-item" data-action-target="#mailDeleteMessage">
                                                <i class="feather-x me-3"></i>
                                                <span>Delete</span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="p-4 bg-white d-flex align-items-center justify-content-center justify-content-md-between">
                            <div class="content-sidebar-footer wd-300 d-none d-md-block">
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <h2 class="fs-11 tx-spacing-1 mb-0">Storage</h2>
                                    <div class="fs-11 text-muted">43.5GB used of <span class="fw-bold text-dark">100GB</span></div>
                                </div>
                                <div class="progress ht-3">
                                    <div class="progress-bar bg-primary" role="progressbar" aria-valuenow="43" aria-valuemin="0" aria-valuemax="100" style="width: 43%"></div>
                                </div>
                            </div>
                            <div class="hstack gap-2 fs-11">
                                <a href="javascript:void(0);">Terms</a>
                                <span class="wd-3 ht-3 bg-gray-500 rounded-circle"></span>
                                <a href="javascript:void(0);">Privacy</a>
                                <span class="wd-3 ht-3 bg-gray-500 rounded-circle"></span>
                                <a href="javascript:void(0);">Policies</a>
                            </div>
                        </div>
                    </div>
                    <div class="items-details" data-scrollbar-target="#psScrollbarInit">
                        <div class="items-details-header bg-white sticky-top">
                            <div class="d-flex align-items-center">
                                <div class="avatar-text avatar-md item-info-close" data-bs-toggle="tooltip" data-bs-trigger="hover" title="Back">
                                    <i class="feather-arrow-left"></i>
                                </div>
                                <span class="vr mx-4"></span>
                                <div class="d-flex align-items-center">
                                    <h4 class="fw-bold mb-0 text-dark text-truncate-1-line">[Update] Latest news updates on your subscribed channel</h4>
                                    <span class="vr mx-2 d-none d-sm-block"></span>
                                    <span class="d-none d-sm-inline-flex gap-2">
                                        <span class="badge bg-soft-primary text-primary">Product</span>
                                        <span class="badge bg-soft-success text-success">Design</span>
                                        <span class="badge bg-soft-danger text-danger">Office</span>
                                    </span>
                                </div>
                            </div>
                            <div class="ms-4 d-none d-md-flex gap-1">
                                <a href="javascript:void(0)" class="d-flex me-1 successAlertMessage">
                                    <div class="avatar-text avatar-md" data-bs-toggle="tooltip" data-bs-trigger="hover" title="Print">
                                        <i class="feather-printer"></i>
                                    </div>
                                </a>
                                <a href="javascript:void(0)" class="d-flex me-1 successAlertMessage">
                                    <div class="avatar-text avatar-md" data-bs-toggle="tooltip" data-bs-trigger="hover" title="Snooze">
                                        <i class="feather-bell"></i>
                                    </div>
                                </a>
                                <a href="javascript:void(0)" class="d-flex me-1 successAlertMessage">
                                    <div class="avatar-text avatar-md" data-bs-toggle="tooltip" data-bs-trigger="hover" title="Favorite">
                                        <i class="feather-star"></i>
                                    </div>
                                </a>
                                <a href="javascript:void(0)" class="d-flex me-1 successAlertMessage">
                                    <div class="avatar-text avatar-md" data-bs-toggle="tooltip" data-bs-trigger="hover" title="Flag">
                                        <i class="feather-flag"></i>
                                    </div>
                                </a>
                                <a href="javascript:void(0)" class="d-flex me-1" data-action-target="#mailDeleteMessage">
                                    <div class="avatar-text avatar-md" data-bs-toggle="tooltip" data-bs-trigger="hover" title="Delete">
                                        <i class="feather-trash-2"></i>
                                    </div>
                                </a>
                            </div>
                        </div>
                        <div class="items-details-body">
                            <div class="accordion">
                                <!--! BEGIN: [accordion-item] !-->
                                <div class="accordion-item">
                                    <div class="accordion-header" id="headingOne">
                                        <div class="accordion-button collapsed" role="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                                            <div class="d-flex align-items-center">
                                                <div class="avatar-image avatar-md">
                                                    <img src="assets/images/avatar/1.png" alt="" class="img-fluid">
                                                </div>
                                                <div class="ms-3">
                                                    <h2 class="fs-13 mb-1 text-truncate-1-line">Alexandra Della</h2>
                                                    <div class="fs-12 fw-normal text-muted text-truncate-1-line" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-html="true" data-bs-content='<ul class="list-unstyled mb-0">
																<li class="mb-1">
																	<span class="d-inline-block wd-50 text-muted text-end fs-12 me-3"> from: </span>
																	<span class="fs-12 d-inline-block text-dark"> no-reply@google.com </span>
																</li>
																<li class="mb-1">
																	<span class="d-inline-block wd-50 text-muted text-end fs-12 me-3"> to: </span>
																	<span class="fs-12 d-inline-block text-dark">wrapcode.info@gmail.com</span>
																</li>
																<li class="mb-1">
																	<span class="d-inline-block wd-50 text-muted text-end fs-12 me-3"> bcc: </span>
																	<span class="fs-12 d-inline-block text-dark">wrapcode.info@gmail.com</span>
																</li>
																<li class="mb-1">
																	<span class="d-inline-block wd-50 text-muted text-end fs-12 me-3"> date: </span>
																	<span class="fs-12 d-inline-block text-dark">Oct 18, 2022, 12:01 PM</span>
																</li>
																<li class="mb-1">
																	<span class="d-inline-block wd-50 text-muted text-end fs-12 me-3"> subject: </span>
																	<span class="fs-12 d-inline-block text-dark"> Security alert for Account </span>
																</li>
																<li class="mb-1">
																	<span class="d-inline-block wd-50 text-muted text-end fs-12 me-3"> mailed: </span>
																	<span class="fs-12 d-inline-block text-dark">gaia.bounces.google.com</span>
																</li>
																<li class="mb-1">
																	<span class="d-inline-block wd-50 text-muted text-end fs-12 me-3"> singed: </span>
																	<span class="fs-12 d-inline-block text-dark">accounts.google.com</span>
																</li>
																<li class="mb-1">
																	<span class="d-inline-block wd-50 text-muted text-end fs-12 me-3"> security: </span>
																	<span class="fs-12 d-inline-block text-dark"> Standard encryption (TLS) </span>
																</li>
															</ul>'>
                                                        <span>to: mar.audrey@gmail.com</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="d-none d-sm-flex align-items-center gap-3 position-absolute" style="top: 25px; right: 50px">
                                                <div class="fs-10 fw-medium text-muted text-uppercase item-time d-none d-sm-block">27 May, 2023</div>
                                                <div class="c-pointer" data-bs-toggle="collapse" data-bs-target="#collapseMessageEditor">
                                                    <i class="feather-repeat fs-12"></i>
                                                </div>
                                                <div class="text-warning c-pointer">
                                                    <i class="feather-star fs-12"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne">
                                        <div class="accordion-body">
                                            <p>Hey, Audrey!</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.</p>
                                            <p>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>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for "lorem ipsum" will uncover many web sites still in their infancy.</p>
                                            <p>Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
                                            <br>
                                            <p class="mb-0">Looking forward to hearing from you!</p>
                                            <div class="fs-12">Thanks by, <a href="javascript:void(0);">Alex</a></div>
                                        </div>
                                    </div>
                                </div>
                                <!--! END: [accordion-item] !-->
                                <!--! BEGIN: [accordion-item] !-->
                                <div class="accordion-item">
                                    <div class="accordion-header" id="headingTwo">
                                        <div class="accordion-button collapsed" role="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                            <div class="d-flex align-items-center">
                                                <div class="avatar-image avatar-md">
                                                    <img src="assets/images/avatar/3.png" alt="" class="img-fluid">
                                                </div>
                                                <div class="ms-3">
                                                    <h2 class="fs-13 mb-1 text-truncate-1-line">Marianne Audrey</h2>
                                                    <div class="fs-12 fw-normal text-muted text-truncate-1-line" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-html="true" data-bs-content='<ul class="list-unstyled mb-0">
																<li class="mb-1">
																	<span class="d-inline-block wd-50 text-muted text-end fs-12 me-3"> from: </span>
																	<span class="fs-12 d-inline-block text-dark"> no-reply@google.com </span>
																</li>
																<li class="mb-1">
																	<span class="d-inline-block wd-50 text-muted text-end fs-12 me-3"> to: </span>
																	<span class="fs-12 d-inline-block text-dark">wrapcode.info@gmail.com</span>
																</li>
																<li class="mb-1">
																	<span class="d-inline-block wd-50 text-muted text-end fs-12 me-3"> bcc: </span>
																	<span class="fs-12 d-inline-block text-dark">wrapcode.info@gmail.com</span>
																</li>
																<li class="mb-1">
																	<span class="d-inline-block wd-50 text-muted text-end fs-12 me-3"> date: </span>
																	<span class="fs-12 d-inline-block text-dark">Oct 18, 2022, 12:01 PM</span>
																</li>
																<li class="mb-1">
																	<span class="d-inline-block wd-50 text-muted text-end fs-12 me-3"> subject: </span>
																	<span class="fs-12 d-inline-block text-dark"> Security alert for Account </span>
																</li>
																<li class="mb-1">
																	<span class="d-inline-block wd-50 text-muted text-end fs-12 me-3"> mailed: </span>
																	<span class="fs-12 d-inline-block text-dark">gaia.bounces.google.com</span>
																</li>
																<li class="mb-1">
																	<span class="d-inline-block wd-50 text-muted text-end fs-12 me-3"> singed: </span>
																	<span class="fs-12 d-inline-block text-dark">accounts.google.com</span>
																</li>
																<li class="mb-1">
																	<span class="d-inline-block wd-50 text-muted text-end fs-12 me-3"> security: </span>
																	<span class="fs-12 d-inline-block text-dark"> Standard encryption (TLS) </span>
																</li>
															</ul>'>
                                                        <span>to: alex.della@outlook.com</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="d-none d-sm-flex align-items-center gap-3 position-absolute" style="top: 25px; right: 50px">
                                                <div class="fs-10 fw-medium text-muted text-uppercase item-time d-none d-sm-block">25 May, 2023</div>
                                                <div class="c-pointer" data-bs-toggle="collapse" data-bs-target="#collapseMessageEditor">
                                                    <i class="feather-repeat fs-12"></i>
                                                </div>
                                                <div class="text-warning c-pointer">
                                                    <i class="feather-star fs-12"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo">
                                        <div class="accordion-body">
                                            <p>Hey, Alex!</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.</p>
                                            <p>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>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for "lorem ipsum" will uncover many web sites still in their infancy.</p>
                                            <p>Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
                                            <br>
                                            <p class="mb-0">Looking forward to hearing from you!</p>
                                            <div class="fs-12">Thanks by, <a href="javascript:void(0);">Marianne Audrey</a></div>
                                        </div>
                                    </div>
                                </div>
                                <!--! END: [accordion-item] !-->
                                <!--! BEGIN: [accordion-item] !-->
                                <div class="accordion-item">
                                    <div class="accordion-header" id="headingThree">
                                        <div class="accordion-button collapsed" role="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
                                            <div class="d-flex align-items-center">
                                                <div class="avatar-image avatar-md">
                                                    <img src="assets/images/avatar/1.png" alt="" class="img-fluid">
                                                </div>
                                                <div class="ms-3">
                                                    <h2 class="fs-13 mb-1 text-truncate-1-line">Alexandra Della</h2>
                                                    <div class="fs-12 fw-normal text-muted text-truncate-1-line" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-html="true" data-bs-content='<ul class="list-unstyled mb-0">
																<li class="mb-1">
																	<span class="d-inline-block wd-50 text-muted text-end fs-12 me-3"> from: </span>
																	<span class="fs-12 d-inline-block text-dark"> no-reply@google.com </span>
																</li>
																<li class="mb-1">
																	<span class="d-inline-block wd-50 text-muted text-end fs-12 me-3"> to: </span>
																	<span class="fs-12 d-inline-block text-dark">wrapcode.info@gmail.com</span>
																</li>
																<li class="mb-1">
																	<span class="d-inline-block wd-50 text-muted text-end fs-12 me-3"> bcc: </span>
																	<span class="fs-12 d-inline-block text-dark">wrapcode.info@gmail.com</span>
																</li>
																<li class="mb-1">
																	<span class="d-inline-block wd-50 text-muted text-end fs-12 me-3"> date: </span>
																	<span class="fs-12 d-inline-block text-dark">Oct 18, 2022, 12:01 PM</span>
																</li>
																<li class="mb-1">
																	<span class="d-inline-block wd-50 text-muted text-end fs-12 me-3"> subject: </span>
																	<span class="fs-12 d-inline-block text-dark"> Security alert for Account </span>
																</li>
																<li class="mb-1">
																	<span class="d-inline-block wd-50 text-muted text-end fs-12 me-3"> mailed: </span>
																	<span class="fs-12 d-inline-block text-dark">gaia.bounces.google.com</span>
																</li>
																<li class="mb-1">
																	<span class="d-inline-block wd-50 text-muted text-end fs-12 me-3"> singed: </span>
																	<span class="fs-12 d-inline-block text-dark">accounts.google.com</span>
																</li>
																<li class="mb-1">
																	<span class="d-inline-block wd-50 text-muted text-end fs-12 me-3"> security: </span>
																	<span class="fs-12 d-inline-block text-dark"> Standard encryption (TLS) </span>
																</li>
															</ul>'>
                                                        <span>to: mar.audrey@gmail.com</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="d-none d-sm-flex align-items-center gap-3 position-absolute" style="top: 25px; right: 50px">
                                                <div class="fs-10 fw-medium text-muted text-uppercase item-time d-none d-sm-block">26 May, 2023</div>
                                                <div class="c-pointer" data-bs-toggle="collapse" data-bs-target="#collapseMessageEditor">
                                                    <i class="feather-repeat fs-12"></i>
                                                </div>
                                                <div class="text-warning c-pointer">
                                                    <i class="feather-star fs-12"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree">
                                        <div class="accordion-body">
                                            <p>Hello, Marianne!</p>
                                            <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. dolore magnam aliquam quaerat voluptatem. Quis autem vel eum iure reprehenderit qui pariatur?</p>
                                            <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Quis autem vel eum iure reprehenderit qui pariatur? adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Quis autem vel eum iure reprehenderit qui pariatur?</p>
                                            <p>
                                                Neque porro quisquam est,
                                                <strong>
                                                    <em>qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</em>
                                                </strong>
                                                , sed quia non numquam eius modi tempora incidunt ut consectetur, adipisci velit sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.Quis autem vel eum iure reprehenderit qui pariatur?
                                            </p>
                                            <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt utconsectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Quis autem vel eum iurereprehenderit qui pariatur?</p>
                                            <br>
                                            <p class="mb-0">Looking forward to hearing from you!</p>
                                            <div class="fs-12">Thanks by, <a href="javascript:void(0);">Alexandra Della</a></div>
                                            <hr class="border-dashed">
                                            <!--! BEGIN: [attachment-section] !-->
                                            <div class="attachment-section">
                                                <p class="text-muted mb-4"><i class="bi bi-paperclip fs-12"></i><span>Attachments</span> <span>(5+) -</span> <a href="javascript:void(0)" class="font-bld file-download">Download all</a> | <a href="javascript:void(0);" class="font-bld">View all</a></p>
                                                <div class="row">
                                                    <!--! BEGIN: [single-attachment-item] !-->
                                                    <div class="col-xxl-6 col-xl-12 col-md-6">
                                                        <div class="mb-4 text-dark d-flex align-items-center justify-content-between border rounded-3">
                                                            <div class="d-flex align-items-center">
                                                                <a href="javascript:void(0);" class="p-3 d-flex align-items-center border-end wd-70 ht-70">
                                                                    <img src="assets/images/file-icons/zip.png" class="img-fluid" alt="image">
                                                                </a>
                                                                <div class="d-block ms-3">
                                                                    <a href="javascript:void(0)" class="fs-13 font-bld text-truncate-1-line">Projects.zip</a>
                                                                    <small class="fw-normal text-muted">40.65/MB</small>
                                                                </div>
                                                            </div>
                                                            <div class="d-flex align-items-center p-3 border-start">
                                                                <a href="javascript:void(0)" class="avatar-text file-download">
                                                                    <i class="feather-download"></i>
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!--! BEGIN: [single-attachment-item] !-->
                                                    <div class="col-xxl-6 col-xl-12 col-md-6">
                                                        <div class="mb-4 text-dark d-flex align-items-center justify-content-between border rounded-3">
                                                            <div class="d-flex align-items-center">
                                                                <a href="javascript:void(0);" class="p-3 d-flex align-items-center border-end wd-70 ht-70">
                                                                    <img src="assets/images/file-icons/png.png" class="img-fluid" alt="image">
                                                                </a>
                                                                <div class="d-block ms-3">
                                                                    <a href="javascript:void(0)" class="fs-13 font-bld text-truncate-1-line">Document.png</a>
                                                                    <small class="fw-normal text-muted">480/KB</small>
                                                                </div>
                                                            </div>
                                                            <div class="d-flex align-items-center p-3 border-start">
                                                                <a href="javascript:void(0)" class="avatar-text file-download">
                                                                    <i class="feather-download"></i>
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!--! BEGIN: [single-attachment-item] !-->
                                                    <div class="col-xxl-6 col-xl-12 col-md-6">
                                                        <div class="mb-4 mb-xxl-0 mb-xl-4 mb-md-0 text-dark d-flex align-items-center justify-content-between border rounded-3">
                                                            <div class="d-flex align-items-center">
                                                                <a href="javascript:void(0);" class="p-3 d-flex align-items-center border-end wd-70 ht-70">
                                                                    <img src="assets/images/file-icons/psd.png" class="img-fluid" alt="image">
                                                                </a>
                                                                <div class="d-block ms-3">
                                                                    <a href="javascript:void(0)" class="fs-13 font-bld text-truncate-1-line">Document.psd</a>
                                                                    <small class="fw-normal text-muted">36.58/MB</small>
                                                                </div>
                                                            </div>
                                                            <div class="d-flex align-items-center p-3 border-start">
                                                                <a href="javascript:void(0)" class="avatar-text file-download">
                                                                    <i class="feather-download"></i>
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!--! BEGIN: [single-attachment-item] !-->
                                                    <div class="col-xxl-6 col-xl-12 col-md-6">
                                                        <div class="text-dark d-flex align-items-center justify-content-between border rounded-3">
                                                            <div class="d-flex align-items-center">
                                                                <a href="javascript:void(0);" class="p-3 d-flex align-items-center border-end wd-70 ht-70">
                                                                    <img src="assets/images/file-icons/pdf.png" class="img-fluid" alt="image">
                                                                </a>
                                                                <div class="d-block ms-3">
                                                                    <a href="javascript:void(0)" class="fs-13 font-bld text-truncate-1-line">Photos.pdf</a>
                                                                    <small class="fw-normal text-muted">03.24/KB</small>
                                                                </div>
                                                            </div>
                                                            <div class="d-flex align-items-center p-3 border-start">
                                                                <a href="javascript:void(0)" class="avatar-text file-download">
                                                                    <i class="feather-download"></i>
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--! END: [accordion-item] !-->
                            </div>
                        </div>
                        <div class="items-details-footer mail-action-editor m-4 border border-top-0 rounded-3">
                            <div class="p-0 ht-400 border-top position-relative editor-section" data-scrollbar-target="#psScrollbarInit">
                                <div class="position-relative border-bottom">
                                    <div class="px-2 d-flex align-items-center">
                                        <div class="p-0 w-100">
                                            <input class="form-control border-0 text-dark" name="tomailcontent" placeholder="TO">
                                        </div>
                                    </div>
                                    <a href="javascript:void(0)" class="position-absolute top-50 end-0 translate-middle badge bg-gray-200 border fw-semibold text-uppercase text-dark rounded-pill c-pointer z-index-100" id="ccbccToggleContent"><span data-bs-toggle="tooltip" data-bs-trigger="hover" title="CC / BCC" style="font-size: 9px !important">CC / BCC</span></a>
                                </div>
                                <div class="border-bottom" id="ccbccToggleContentFileds" style="display: none">
                                    <div class="px-2 w-100 d-flex align-items-center border-bottom">
                                        <input class="form-control border-0 text-dark" name="ccmailcontent" placeholder="CC">
                                    </div>
                                    <div class="px-2 w-100 d-flex align-items-center">
                                        <input class="form-control border-0 text-dark" name="bccmailcontent" placeholder="BCC">
                                    </div>
                                </div>
                                <div class="px-3 w-100 d-flex align-items-center">
                                    <input class="form-control border-0 my-1 w-100 shadow-none" type="email" placeholder="Subject">
                                </div>
                                <div class="ht-150 border-0" id="mailEditor"></div>
                            </div>
                            <div class="px-4 py-3 d-flex align-items-center justify-content-between border-top">
                                <!--! BEGIN: [mail-editor-action-left] !-->
                                <div class="d-flex align-items-center gap-2">
                                    <div class="dropdown">
                                        <a href="javascript:void(0)" data-bs-toggle="dropdown" data-bs-offset="0, 0">
                                            <span class="btn btn-primary dropdown-toggle" data-bs-toggle="tooltip" data-bs-trigger="hover" title="Send Message"> Send </span>
                                        </a>
                                        <div class="dropdown-menu">
                                            <a href="javascript:void(0)" class="dropdown-item" data-action-target="#mailActionMessage">
                                                <i class="feather-send me-3"></i>
                                                <span>Instant Send</span>
                                            </a>
                                            <a href="javascript:void(0);" class="dropdown-item successAlertMessage">
                                                <i class="feather-clock me-3"></i>
                                                <span>Schedule Send</span>
                                            </a>
                                            <div class="dropdown-divider"></div>
                                            <a href="javascript:void(0)" class="dropdown-item successAlertMessage">
                                                <i class="feather-x me-3"></i>
                                                <span>Discard Now</span>
                                            </a>
                                            <a href="javascript:void(0)" class="dropdown-item successAlertMessage">
                                                <i class="feather-edit-3 me-3"></i>
                                                <span>Save as Draft</span>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="dropdown d-none d-sm-block">
                                        <a href="javascript:void(0)" data-bs-toggle="dropdown" data-bs-offset="0, 0">
                                            <span class="btn btn-icon" data-bs-toggle="tooltip" data-bs-trigger="hover" title="Pick Template">
                                                <i class="feather-hash"></i>
                                            </span>
                                        </a>
                                        <div class="dropdown-menu wd-300">
                                            <a href="javascript:void(0)" class="dropdown-item">
                                                <i class="feather-file-text me-3"></i>
                                                <span>Welcome you message</span>
                                            </a>
                                            <a href="javascript:void(0)" class="dropdown-item">
                                                <i class="feather-file-text me-3"></i>
                                                <span>Your issues solved</span>
                                            </a>
                                            <a href="javascript:void(0)" class="dropdown-item">
                                                <i class="feather-file-text me-3"></i>
                                                <span>Thank you message</span>
                                            </a>
                                            <a href="javascript:void(0)" class="dropdown-item">
                                                <i class="feather-file-text me-3"></i>
                                                <span>Make a offer message</span>
                                            </a>
                                            <a href="javascript:void(0)" class="dropdown-item">
                                                <i class="feather-file-text me-3"></i>
                                                <span>Add the Unsubscribe option</span>
                                            </a>
                                            <a href="javascript:void(0)" class="dropdown-item">
                                                <i class="feather-file-text me-3"></i>
                                                <span class="text-truncate-1-line">Thank your customer for joining</span>
                                            </a>
                                            <div class="dropdown-divider"></div>
                                            <a href="javascript:void(0)" class="dropdown-item">
                                                <i class="feather-save me-3"></i>
                                                <span class="text-truncate-1-line">Save as Template</span>
                                            </a>
                                            <a href="javascript:void(0)" class="dropdown-item">
                                                <i class="feather-sun me-3"></i>
                                                <span>Manage Template</span>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="dropdown">
                                        <a href="javascript:void(0)" data-bs-toggle="dropdown" data-bs-offset="0, 0">
                                            <span class="btn btn-icon" data-bs-toggle="tooltip" data-bs-trigger="hover" title="Upload Attachments">
                                                <i class="feather-upload"></i>
                                            </span>
                                        </a>
                                        <div class="dropdown-menu">
                                            <a href="javascript:void(0)" class="dropdown-item">
                                                <i class="feather-image me-3"></i>
                                                <span>Upload Images</span>
                                            </a>
                                            <a href="javascript:void(0)" class="dropdown-item">
                                                <i class="feather-video me-3"></i>
                                                <span>Upload Videos</span>
                                            </a>
                                            <a href="javascript:void(0)" class="dropdown-item">
                                                <i class="feather-mic me-3"></i>
                                                <span>Upload Musics</span>
                                            </a>
                                            <a href="javascript:void(0)" class="dropdown-item">
                                                <i class="feather-file-text me-3"></i>
                                                <span>Upload Documents</span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <!--! BEGIN: [mail-editor-action-right] !-->
                                <div class="d-flex align-items-center">
                                    <div class="dropdown me-2">
                                        <a href="javascript:void(0)" data-bs-toggle="dropdown" data-bs-offset="0, -1">
                                            <span class="btn btn-icon" data-bs-toggle="tooltip" data-bs-trigger="hover" title="Editing Actions">
                                                <i class="feather-more-horizontal"></i>
                                            </span>
                                        </a>
                                        <div class="dropdown-menu">
                                            <a href="javascript:void(0)" class="dropdown-item">
                                                <i class="feather-type me-3"></i>
                                                <span>Plain Text Mode</span>
                                            </a>
                                            <a href="javascript:void(0)" class="dropdown-item">
                                                <i class="feather-check me-3"></i>
                                                <span>Check Spelling</span>
                                            </a>
                                            <a href="javascript:void(0)" class="dropdown-item">
                                                <i class="feather-compass me-3"></i>
                                                <span>Smart Compose</span>
                                            </a>
                                            <a href="javascript:void(0)" class="dropdown-item">
                                                <i class="feather-feather me-3"></i>
                                                <span>Manage Signature</span>
                                            </a>
                                        </div>
                                    </div>
                                    <a href="javascript:void(0);" class="btn btn-icon" data-bs-toggle="tooltip" data-bs-trigger="hover" title="Discard Message">
                                        <i class="feather-x"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- [ Content Area ] end -->
            </div>
            <!-- [ Main Content ] end -->
        </div>
    </main>
    <!--! ================================================================ !-->
    <!--! [End] Main Content !-->
    <!--! ================================================================ !-->
    <!--! ================================================================ !-->
    <!--! BEGIN: Compose Mail Modal !-->
    <!--! ================================================================ !-->
    <div class="modal fade-scale" id="composeMail" tabindex="-1" aria-labelledby="composeMail" aria-hidden="true" data-bs-dismiss="ou">
        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
            <div class="modal-content">
                <!--! BEGIN: [modal-header] !-->
                <div class="modal-header">
                    <h2 class="d-flex flex-column mb-0">
                        <span class="fs-18 fw-bold mb-1">Compose Mail</span>
                        <small class="d-block fs-11 fw-normal text-muted">Compose Your Message</small>
                    </h2>
                    <a href="javascript:void(0)" class="avatar-text avatar-md bg-soft-danger close-icon" data-bs-dismiss="modal">
                        <i class="feather-x text-danger"></i>
                    </a>
                </div>
                <!--! BEGIN: [modal-body] !-->
                <div class="modal-body p-0">
                    <div class="position-relative border-bottom">
                        <div class="px-2 d-flex align-items-center">
                            <div class="p-0 w-100">
                                <input class="form-control border-0 text-dark" name="tomailmodal" placeholder="TO">
                            </div>
                        </div>
                        <a href="javascript:void(0)" class="position-absolute top-50 end-0 translate-middle badge bg-gray-100 border border-gray-3 fs-10 fw-semibold text-uppercase text-dark rounded-pill c-pointer z-index-100" id="ccbccToggleModal"><span data-bs-toggle="tooltip" data-bs-trigger="hover" title="CC / BCC" style="font-size: 9px !important">CC / BCC</span></a>
                    </div>
                    <div class="border-bottom mail-cc-bcc-fields" id="ccbccToggleModalFileds" style="display: none">
                        <div class="px-2 w-100 d-flex align-items-center border-bottom">
                            <input class="form-control border-0 text-dark" name="ccmailmodal" placeholder="CC">
                        </div>
                        <div class="px-2 w-100 d-flex align-items-center">
                            <input class="form-control border-0 text-dark" name="bccmailmodal" placeholder="BCC">
                        </div>
                    </div>
                    <div class="px-3 w-100 d-flex align-items-center">
                        <input class="form-control border-0 my-1 w-100 shadow-none" type="email" placeholder="Subject">
                    </div>
                    <div class="editor w-100 m-0">
                        <div class="ht-300 border-bottom-0" id="mailEditorModal"></div>
                    </div>
                </div>
                <!--! BEGIN: [modal-footer] !-->
                <div class="modal-footer d-flex align-items-center justify-content-between">
                    <!--! BEGIN: [mail-editor-action-left] !-->
                    <div class="d-flex align-items-center">
                        <div class="dropdown me-2">
                            <a href="javascript:void(0)" data-bs-toggle="dropdown" data-bs-offset="0, 0">
                                <span class="btn btn-primary dropdown-toggle" data-bs-toggle="tooltip" data-bs-trigger="hover" title="Send Message"> Send </span>
                            </a>
                            <div class="dropdown-menu">
                                <a href="javascript:void(0)" class="dropdown-item" data-action-target="#mailActionMessage">
                                    <i class="feather-send me-3"></i>
                                    <span>Instant Send</span>
                                </a>
                                <a href="javascript:void(0);" class="dropdown-item successAlertMessage">
                                    <i class="feather-clock me-3"></i>
                                    <span>Schedule Send</span>
                                </a>
                                <div class="dropdown-divider"></div>
                                <a href="javascript:void(0)" class="dropdown-item successAlertMessage">
                                    <i class="feather-x me-3"></i>
                                    <span>Discard Now</span>
                                </a>
                                <a href="javascript:void(0)" class="dropdown-item successAlertMessage">
                                    <i class="feather-edit-3 me-3"></i>
                                    <span>Save as Draft</span>
                                </a>
                            </div>
                        </div>
                        <div class="dropdown me-2 d-none d-sm-block">
                            <a href="javascript:void(0)" data-bs-toggle="dropdown" data-bs-offset="0, 0">
                                <span class="btn btn-icon" data-bs-toggle="tooltip" data-bs-trigger="hover" title="Pick Template">
                                    <i class="feather-hash"></i>
                                </span>
                            </a>
                            <div class="dropdown-menu wd-300">
                                <a href="javascript:void(0)" class="dropdown-item">
                                    <i class="feather-file-text me-3"></i>
                                    <span>Welcome you message</span>
                                </a>
                                <a href="javascript:void(0)" class="dropdown-item">
                                    <i class="feather-file-text me-3"></i>
                                    <span>Your issues solved</span>
                                </a>
                                <a href="javascript:void(0)" class="dropdown-item">
                                    <i class="feather-file-text me-3"></i>
                                    <span>Thank you message</span>
                                </a>
                                <a href="javascript:void(0)" class="dropdown-item">
                                    <i class="feather-file-text me-3"></i>
                                    <span>Make a offer message</span>
                                </a>
                                <a href="javascript:void(0)" class="dropdown-item">
                                    <i class="feather-file-text me-3"></i>
                                    <span>Add the Unsubscribe option</span>
                                </a>
                                <a href="javascript:void(0)" class="dropdown-item">
                                    <i class="feather-file-text me-3"></i>
                                    <span>Thank your customer for joining</span>
                                </a>
                                <div class="dropdown-divider"></div>
                                <a href="javascript:void(0)" class="dropdown-item">
                                    <i class="feather-save me-3"></i>
                                    <span>Save as Template</span>
                                </a>
                                <a href="javascript:void(0)" class="dropdown-item">
                                    <i class="feather-sun me-3"></i>
                                    <span>Manage Template</span>
                                </a>
                            </div>
                        </div>
                        <div class="dropdown">
                            <a href="javascript:void(0)" data-bs-toggle="dropdown" data-bs-offset="0, 0">
                                <span class="btn btn-icon" data-bs-toggle="tooltip" data-bs-trigger="hover" title="Upload Attachments">
                                    <i class="feather-upload"></i>
                                </span>
                            </a>
                            <div class="dropdown-menu">
                                <a href="javascript:void(0)" class="dropdown-item">
                                    <i class="feather-image me-3"></i>
                                    <span>Upload Images</span>
                                </a>
                                <a href="javascript:void(0)" class="dropdown-item">
                                    <i class="feather-video me-3"></i>
                                    <span>Upload Videos</span>
                                </a>
                                <a href="javascript:void(0)" class="dropdown-item">
                                    <i class="feather-mic me-3"></i>
                                    <span>Upload Musics</span>
                                </a>
                                <a href="javascript:void(0)" class="dropdown-item">
                                    <i class="feather-file-text me-3"></i>
                                    <span>Upload Documents</span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <!--! BEGIN: [mail-editor-action-right] !-->
                    <div class="d-flex align-items-center">
                        <div class="dropdown me-2">
                            <a href="javascript:void(0)" data-bs-toggle="dropdown" data-bs-offset="0, 0">
                                <span class="btn btn-icon" data-bs-toggle="tooltip" data-bs-trigger="hover" title="Editing Actions">
                                    <i class="feather-more-horizontal"></i>
                                </span>
                            </a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="javascript:void(0)" class="dropdown-item">
                                        <i class="feather-type me-3"></i>
                                        <span>Plain Text Mode</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)" class="dropdown-item">
                                        <i class="feather-check me-3"></i>
                                        <span>Check Spelling</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)" class="dropdown-item">
                                        <i class="feather-compass me-3"></i>
                                        <span>Smart Compose</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)" class="dropdown-item">
                                        <i class="feather-feather me-3"></i>
                                        <span>Manage Signature</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <a href="javascript:void(0);" data-bs-dismiss="modal">
                            <span class="btn btn-icon" data-bs-toggle="tooltip" data-bs-trigger="hover" title="Delete Message">
                                <i class="feather-x"></i>
                            </span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--! ================================================================ !-->
    <!--! END: Compose Mail Modal !-->
    <!--! ================================================================ !-->
    <!--! ================================================================ !-->
    <!--! [Start] Search Modal !-->
    <!--! ================================================================ !-->
    <div class="modal fade-scale" id="searchModal" aria-hidden="true" tabindex="-1">
        <div class="modal-dialog modal-lg modal-dialog-top modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header search-form py-0">
                    <div class="input-group">
                        <span class="input-group-text">
                            <i class="feather-search fs-4 text-muted"></i>
                        </span>
                        <input type="text" class="form-control search-input-field" placeholder="Search...">
                        <span class="input-group-text">
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </span>
                    </div>
                </div>
                <div class="modal-body">
                    <div class="searching-for mb-5">
                        <h4 class="fs-13 fw-normal text-gray-600 mb-3">I'm searching for...</h4>
                        <div class="row g-1">
                            <div class="col-md-4 col-xl-2">
                                <a href="javascript:void(0);" class="d-flex align-items-center gap-2 px-3 lh-lg border rounded-pill">
                                    <i class="feather-compass"></i>
                                    <span>Recent</span>
                                </a>
                            </div>
                            <div class="col-md-4 col-xl-2">
                                <a href="javascript:void(0);" class="d-flex align-items-center gap-2 px-3 lh-lg border rounded-pill">
                                    <i class="feather-command"></i>
                                    <span>Command</span>
                                </a>
                            </div>
                            <div class="col-md-4 col-xl-2">
                                <a href="javascript:void(0);" class="d-flex align-items-center gap-2 px-3 lh-lg border rounded-pill">
                                    <i class="feather-users"></i>
                                    <span>Peoples</span>
                                </a>
                            </div>
                            <div class="col-md-4 col-xl-2">
                                <a href="javascript:void(0);" class="d-flex align-items-center gap-2 px-3 lh-lg border rounded-pill">
                                    <i class="feather-file"></i>
                                    <span>Files</span>
                                </a>
                            </div>
                            <div class="col-md-4 col-xl-2">
                                <a href="javascript:void(0);" class="d-flex align-items-center gap-2 px-3 lh-lg border rounded-pill">
                                    <i class="feather-video"></i>
                                    <span>Medias</span>
                                </a>
                            </div>
                            <div class="col-md-4 col-xl-2">
                                <a href="javascript:void(0);" class="d-flex align-items-center gap-2 px-3 lh-lg border rounded-pill">
                                    <span>More</span>
                                    <i class="feather-chevron-down"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="recent-result mb-5">
                        <h4 class="fs-13 fw-normal text-gray-600 mb-3">Recnet <span class="badge small bg-gray-200 rounded ms-1 text-dark">3</span></h4>
                        <div class="d-flex align-items-center justify-content-between mb-4">
                            <a href="javascript:void(0);" class="d-flex align-items-start gap-3">
                                <i class="feather-airplay fs-5"></i>
                                <div class="fs-13 fw-semibold">CRM dashboard redesign</div>
                            </a>
                            <a href="javascript:void(0);" class="badge border rounded text-dark">/<i class="feather-command ms-1 fs-12"></i></a>
                        </div>
                        <div class="d-flex align-items-center justify-content-between mb-4">
                            <a href="javascript:void(0);" class="d-flex align-items-start gap-3">
                                <i class="feather-file-plus fs-5"></i>
                                <div class="fs-13 fw-semibold">Create new eocument</div>
                            </a>
                            <a href="javascript:void(0);" class="badge border rounded text-dark">N /<i class="feather-command ms-1 fs-12"></i></a>
                        </div>
                        <div class="d-flex align-items-center justify-content-between">
                            <a href="javascript:void(0);" class="d-flex align-items-start gap-3">
                                <i class="feather-user-plus fs-5"></i>
                                <div class="fs-13 fw-semibold">Invite project colleagues</div>
                            </a>
                            <a href="javascript:void(0);" class="badge border rounded text-dark">P /<i class="feather-command ms-1 fs-12"></i></a>
                        </div>
                    </div>
                    <div class="command-result mb-5">
                        <h4 class="fs-13 fw-normal text-gray-600 mb-3">Command <span class="badge small bg-gray-200 rounded ms-1 text-dark">5</span></h4>
                        <div class="d-flex align-items-center justify-content-between mb-4">
                            <a href="javascript:void(0);" class="d-flex align-items-start gap-3">
                                <i class="feather-user fs-5"></i>
                                <div class="fs-13 fw-semibold">My profile</div>
                            </a>
                            <a href="javascript:void(0);" class="badge border rounded text-dark">P /<i class="feather-command ms-1 fs-12"></i></a>
                        </div>
                        <div class="d-flex align-items-center justify-content-between mb-4">
                            <a href="javascript:void(0);" class="d-flex align-items-start gap-3">
                                <i class="feather-users fs-5"></i>
                                <div class="fs-13 fw-semibold">Team profile</div>
                            </a>
                            <a href="javascript:void(0);" class="badge border rounded text-dark">T /<i class="feather-command ms-1 fs-12"></i></a>
                        </div>
                        <div class="d-flex align-items-center justify-content-between mb-4">
                            <a href="javascript:void(0);" class="d-flex align-items-start gap-3">
                                <i class="feather-user-plus fs-5"></i>
                                <div class="fs-13 fw-semibold">Invite colleagues</div>
                            </a>
                            <a href="javascript:void(0);" class="badge border rounded text-dark">I /<i class="feather-command ms-1 fs-12"></i></a>
                        </div>
                        <div class="d-flex align-items-center justify-content-between mb-4">
                            <a href="javascript:void(0);" class="d-flex align-items-start gap-3">
                                <i class="feather-briefcase fs-5"></i>
                                <div class="fs-13 fw-semibold">Create new project</div>
                            </a>
                            <a href="javascript:void(0);" class="badge border rounded text-dark">CP /<i class="feather-command ms-1 fs-12"></i></a>
                        </div>
                        <div class="d-flex align-items-center justify-content-between">
                            <a href="javascript:void(0);" class="d-flex align-items-start gap-3">
                                <i class="feather-life-buoy fs-5"></i>
                                <div class="fs-13 fw-semibold">Support center</div>
                            </a>
                            <a href="javascript:void(0);" class="badge border rounded text-dark">SC /<i class="feather-command ms-1 fs-12"></i></a>
                        </div>
                    </div>
                    <div class="file-result mb-4">
                        <h4 class="fs-13 fw-normal text-gray-600 mb-3">Files <span class="badge small bg-gray-200 rounded ms-1 text-dark">3</span></h4>
                        <div class="d-flex align-items-center justify-content-between mb-4">
                            <a href="javascript:void(0);" class="d-flex align-items-start gap-3">
                                <i class="feather-folder-plus fs-5"></i>
                                <div class="fs-13 fw-semibold">CRM Desing Project <span class="fs-12 fw-normal text-muted">(56.74 MB)</span></div>
                            </a>
                            <a href="javascript:void(0);" class="file-download"><i class="feather-download"></i></a>
                        </div>
                        <div class="d-flex align-items-center justify-content-between mb-4">
                            <a href="javascript:void(0);" class="d-flex align-items-start gap-3">
                                <i class="feather-folder-plus fs-5"></i>
                                <div class="fs-13 fw-semibold">Admin Dashboard Project <span class="fs-12 fw-normal text-muted">(46.83 MB)</span></div>
                            </a>
                            <a href="javascript:void(0);" class="file-download"><i class="feather-download"></i></a>
                        </div>
                        <div class="d-flex align-items-center justify-content-between">
                            <a href="javascript:void(0);" class="d-flex align-items-start gap-3">
                                <i class="feather-folder-plus fs-5"></i>
                                <div class="fs-13 fw-semibold">CRM Dashboard Project <span class="fs-12 fw-normal text-muted">(68.59 MB)</span></div>
                            </a>
                            <a href="javascript:void(0);" class="file-download"><i class="feather-download"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--! ================================================================ !-->
    <!--! [End] Search Modal !-->
    <!--! ================================================================ !-->
    <!--! ================================================================ !-->
    <!--! [Start] Language Select !-->
    <!--! ================================================================ !-->
    <div class="modal fade-scale" id="languageSelectModal" aria-hidden="true" aria-labelledby="languageSelectModalLabel" tabindex="-1">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="languageSelectModalLabel">Select Language</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="assets/vendors/img/flags/1x1/sa.svg" alt="" class="img-fluid"></div>
                                <span>Arabic </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="assets/vendors/img/flags/1x1/bd.svg" alt="" class="img-fluid"></div>
                                <span>Bengali </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="assets/vendors/img/flags/1x1/ch.svg" alt="" class="img-fluid"></div>
                                <span>Chinese </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="assets/vendors/img/flags/1x1/hr.svg" alt="" class="img-fluid"></div>
                                <span>Croatian </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="assets/vendors/img/flags/1x1/dk.svg" alt="" class="img-fluid"></div>
                                <span>Danish </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="assets/vendors/img/flags/1x1/nl.svg" alt="" class="img-fluid"></div>
                                <span>Dutch </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select active">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="assets/vendors/img/flags/1x1/us.svg" alt="" class="img-fluid"></div>
                                <span>English </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="assets/vendors/img/flags/1x1/fi.svg" alt="" class="img-fluid"></div>
                                <span>Filipino </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="assets/vendors/img/flags/1x1/fr.svg" alt="" class="img-fluid"></div>
                                <span>French </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="assets/vendors/img/flags/1x1/de.svg" alt="" class="img-fluid"></div>
                                <span>German </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="assets/vendors/img/flags/1x1/il.svg" alt="" class="img-fluid"></div>
                                <span>Hebrew </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="assets/vendors/img/flags/1x1/in.svg" alt="" class="img-fluid"></div>
                                <span>Hindi </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="assets/vendors/img/flags/1x1/id.svg" alt="" class="img-fluid"></div>
                                <span>Indonesian </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="assets/vendors/img/flags/1x1/it.svg" alt="" class="img-fluid"></div>
                                <span>Italian </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="assets/vendors/img/flags/1x1/jp.svg" alt="" class="img-fluid"></div>
                                <span>Japanese </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="assets/vendors/img/flags/1x1/kr.svg" alt="" class="img-fluid"></div>
                                <span>Korean </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="assets/vendors/img/flags/1x1/ir.svg" alt="" class="img-fluid"></div>
                                <span>Persian </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="assets/vendors/img/flags/1x1/pt.svg" alt="" class="img-fluid"></div>
                                <span>Portuguese </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="assets/vendors/img/flags/1x1/ru.svg" alt="" class="img-fluid"></div>
                                <span>Russian </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="assets/vendors/img/flags/1x1/es.svg" alt="" class="img-fluid"></div>
                                <span>Spanish </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="assets/vendors/img/flags/1x1/sv.svg" alt="" class="img-fluid"></div>
                                <span>Swedish </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="assets/vendors/img/flags/1x1/tr.svg" alt="" class="img-fluid"></div>
                                <span>Turkish </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="assets/vendors/img/flags/1x1/pk.svg" alt="" class="img-fluid"></div>
                                <span>Urdo</span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="assets/vendors/img/flags/1x1/vi.svg" alt="" class="img-fluid"></div>
                                <span>Vietnamese</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--! ================================================================ !-->
    <!--! [End] Language Select !-->
    <!--! ================================================================ !-->
    <!--! ================================================================ !-->
    <!--! BEGIN: Downloading Toast !-->
    <!--! ================================================================ !-->
    <div class="position-fixed" style="right: 5px; bottom: 5px; z-index: 999999">
        <div id="toast" class="toast bg-black hide" data-bs-delay="3000" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header px-3 bg-transparent d-flex align-items-center justify-content-between border-bottom border-light border-opacity-10">
                <div class="text-white mb-0 mr-auto">Downloading...</div>
                <a href="javascript:void(0)" class="ms-2 mb-1 close fw-normal" data-bs-dismiss="toast" aria-label="Close">
                    <span class="text-white">&times;</span>
                </a>
            </div>
            <div class="toast-body p-3 text-white">
                <h6 class="fs-13 text-white">Project.zip</h6>
                <span class="text-light fs-11">4.2mb of 5.5mb</span>
            </div>
            <div class="toast-footer p-3 pt-0 border-top border-light border-opacity-10">
                <div class="progress mt-3" style="height: 5px">
                    <div class="progress-bar progress-bar-striped progress-bar-animated w-75 bg-dark" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
            </div>
        </div>
    </div>
    <!--! ================================================================ !-->
    <!--! END: Downloading Toast !-->
    <!--! ================================================================ !-->
    <!--! ================================================================ !-->
    <!--! BEGIN: Theme Customizer !-->
    <!--! ================================================================ !-->
    <div class="theme-customizer">
        <div class="customizer-handle">
            {{-- <a href="javascript:void(0);" class="cutomizer-open-trigger bg-primary">
                <i class="feather-settings"></i>
            </a> --}}
        </div>
        <div class="customizer-sidebar-wrapper">
            <div class="customizer-sidebar-header px-4 ht-80 border-bottom d-flex align-items-center justify-content-between">
                <h5 class="mb-0">Theme Settings</h5>
                <a href="javascript:void(0);" class="cutomizer-close-trigger d-flex">
                    <i class="feather-x"></i>
                </a>
            </div>
            <div class="customizer-sidebar-body position-relative p-4" data-scrollbar-target="#psScrollbarInit">
                <!--! BEGIN: [Navigation] !-->
                <div class="position-relative px-3 pb-3 pt-4 mt-3 mb-5 border border-gray-2 theme-options-set">
                    <label class="py-1 px-2 fs-8 fw-bold text-uppercase text-muted text-spacing-2 bg-white border border-gray-2 position-absolute rounded-2 options-label" style="top: -12px">Navigation</label>
                    <div class="row g-2 theme-options-items app-navigation" id="appNavigationList">
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-navigation-light" name="app-navigation" value="1" data-app-navigation="app-navigation-light" checked>
                            <label class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label" for="app-navigation-light">Light</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-navigation-dark" name="app-navigation" value="2" data-app-navigation="app-navigation-dark">
                            <label class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label" for="app-navigation-dark">Dark</label>
                        </div>
                    </div>
                </div>
                <!--! END: [Navigation] !-->
                <!--! BEGIN: [Header] !-->
                <div class="position-relative px-3 pb-3 pt-4 mt-3 mb-5 border border-gray-2 theme-options-set mt-5">
                    <label class="py-1 px-2 fs-8 fw-bold text-uppercase text-muted text-spacing-2 bg-white border border-gray-2 position-absolute rounded-2 options-label" style="top: -12px">Header</label>
                    <div class="row g-2 theme-options-items app-header" id="appHeaderList">
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-header-light" name="app-header" value="1" data-app-header="app-header-light" checked>
                            <label class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label" for="app-header-light">Light</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-header-dark" name="app-header" value="2" data-app-header="app-header-dark">
                            <label class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label" for="app-header-dark">Dark</label>
                        </div>
                    </div>
                </div>
                <!--! END: [Header] !-->
                <!--! BEGIN: [Skins] !-->
                <div class="position-relative px-3 pb-3 pt-4 mt-3 mb-5 border border-gray-2 theme-options-set">
                    <label class="py-1 px-2 fs-8 fw-bold text-uppercase text-muted text-spacing-2 bg-white border border-gray-2 position-absolute rounded-2 options-label" style="top: -12px">Skins</label>
                    <div class="row g-2 theme-options-items app-skin" id="appSkinList">
                        <div class="col-6 text-center position-relative single-option light-button active">
                            <input type="radio" class="btn-check" id="app-skin-light" name="app-skin" value="1" data-app-skin="app-skin-light">
                            <label class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label" for="app-skin-light">Light</label>
                        </div>
                        <div class="col-6 text-center position-relative single-option dark-button">
                            <input type="radio" class="btn-check" id="app-skin-dark" name="app-skin" value="2" data-app-skin="app-skin-dark">
                            <label class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label" for="app-skin-dark">Dark</label>
                        </div>
                    </div>
                </div>
                <!--! END: [Skins] !-->
                <!--! BEGIN: [Typography] !-->
                <div class="position-relative px-3 pb-3 pt-4 mt-3 mb-0 border border-gray-2 theme-options-set">
                    <label class="py-1 px-2 fs-8 fw-bold text-uppercase text-muted text-spacing-2 bg-white border border-gray-2 position-absolute rounded-2 options-label" style="top: -12px">Typography</label>
                    <div class="row g-2 theme-options-items font-family" id="fontFamilyList">
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-lato" name="font-family" value="1" data-font-family="app-font-family-lato">
                            <label class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label" for="app-font-family-lato">Lato</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-rubik" name="font-family" value="2" data-font-family="app-font-family-rubik">
                            <label class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label" for="app-font-family-rubik">Rubik</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-inter" name="font-family" value="3" data-font-family="app-font-family-inter" checked>
                            <label class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label" for="app-font-family-inter">Inter</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-cinzel" name="font-family" value="4" data-font-family="app-font-family-cinzel">
                            <label class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label" for="app-font-family-cinzel">Cinzel</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-nunito" name="font-family" value="6" data-font-family="app-font-family-nunito">
                            <label class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label" for="app-font-family-nunito">Nunito</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-roboto" name="font-family" value="7" data-font-family="app-font-family-roboto">
                            <label class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label" for="app-font-family-roboto">Roboto</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-ubuntu" name="font-family" value="8" data-font-family="app-font-family-ubuntu">
                            <label class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label" for="app-font-family-ubuntu">Ubuntu</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-poppins" name="font-family" value="9" data-font-family="app-font-family-poppins">
                            <label class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label" for="app-font-family-poppins">Poppins</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-raleway" name="font-family" value="10" data-font-family="app-font-family-raleway">
                            <label class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label" for="app-font-family-raleway">Raleway</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-system-ui" name="font-family" value="11" data-font-family="app-font-family-system-ui">
                            <label class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label" for="app-font-family-system-ui">System UI</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-noto-sans" name="font-family" value="12" data-font-family="app-font-family-noto-sans">
                            <label class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label" for="app-font-family-noto-sans">Noto Sans</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-fira-sans" name="font-family" value="13" data-font-family="app-font-family-fira-sans">
                            <label class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label" for="app-font-family-fira-sans">Fira Sans</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-work-sans" name="font-family" value="14" data-font-family="app-font-family-work-sans">
                            <label class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label" for="app-font-family-work-sans">Work Sans</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-open-sans" name="font-family" value="15" data-font-family="app-font-family-open-sans">
                            <label class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label" for="app-font-family-open-sans">Open Sans</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-maven-pro" name="font-family" value="16" data-font-family="app-font-family-maven-pro">
                            <label class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label" for="app-font-family-maven-pro">Maven Pro</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-quicksand" name="font-family" value="17" data-font-family="app-font-family-quicksand">
                            <label class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label" for="app-font-family-quicksand">Quicksand</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-montserrat" name="font-family" value="18" data-font-family="app-font-family-montserrat">
                            <label class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label" for="app-font-family-montserrat">Montserrat</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-josefin-sans" name="font-family" value="19" data-font-family="app-font-family-josefin-sans">
                            <label class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label" for="app-font-family-josefin-sans">Josefin Sans</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-ibm-plex-sans" name="font-family" value="20" data-font-family="app-font-family-ibm-plex-sans">
                            <label class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label" for="app-font-family-ibm-plex-sans">IBM Plex Sans</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-source-sans-pro" name="font-family" value="5" data-font-family="app-font-family-source-sans-pro">
                            <label class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label" for="app-font-family-source-sans-pro">Source Sans Pro</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-montserrat-alt" name="font-family" value="21" data-font-family="app-font-family-montserrat-alt">
                            <label class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label" for="app-font-family-montserrat-alt">Montserrat Alt</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-roboto-slab" name="font-family" value="22" data-font-family="app-font-family-roboto-slab">
                            <label class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label" for="app-font-family-roboto-slab">Roboto Slab</label>
                        </div>
                    </div>
                </div>
                <!--! END: [Typography] !-->
            </div>
            <div class="customizer-sidebar-footer px-4 ht-60 border-top d-flex align-items-center gap-2">
                <div class="flex-fill w-50">
                    <a href="javascript:void(0);" class="btn btn-danger" data-style="reset-all-common-style">Reset</a>
                </div>
                <div class="flex-fill w-50">
                    <a href="javascript:void(0);" class="btn btn-primary">Download</a>
                </div>
            </div>
        </div>
    </div>

    <!--! ================================================================ !-->
    <!--! [End] Theme Customizer !-->
    <!--! ================================================================ !-->
    <!--! ================================================================ !-->
    <!--! Footer Script !-->
    <!--! ================================================================ !-->
    <!--! BEGIN: Vendors JS !-->
    <script src="assets/vendors/js/vendors.min.js"></script>
    <!-- vendors.min.js {always must need to be top} -->
    <script src="assets/vendors/js/select2.min.js"></script>
    <script src="assets/vendors/js/select2-active.min.js"></script>
    <script src="assets/vendors/js/tagify.min.js"></script>
    <script src="assets/vendors/js/tagify-data.min.js"></script>
    <script src="assets/vendors/js/quill.min.js"></script>
    <!--! END: Vendors JS !-->
    <!--! BEGIN: Apps Init  !-->
    <script src="assets/js/common-init.min.js"></script>
    <script src="assets/js/apps-email-init.min.js"></script>
    <!--! END: Apps Init !-->
    <!--! BEGIN: Theme Customizer  !-->
    <script src="assets/js/theme-customizer-init.min.js"></script>
    <!--! END: Theme Customizer !-->
</body>


<!-- Mirrored from wphtml.com/html/tf/duralux-demo/apps-email.html by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 12 Nov 2024 11:22:04 GMT -->
</html>
