
            <div class="offcanvas offcanvas-end" tabindex="-1" id="apps-header-offcanvas">
                <div class="offcanvas-header border-bottom">
                    <h6 class="offcanvas-title" id="offcanvasExampleLabel">Shortcuts</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                </div>
                <div class="offcanvas-body">
                    <div class="panel tabs-style2">
                        <div class="panel-head">
                            <ul class="nav d-flex  app-header-nav-tabs">
                                <li class="nav-item mb-2 flex-grow-1 text-center"><a class="nav-link active" data-bs-toggle="tab" href="#side1"><i
                                        class="bi bi-chat me-2 d-inline-block"></i> Chat</a></li>
                                <li class="nav-item  flex-grow-1 text-center mb-sm-0 mb-2"><a class="nav-link" data-bs-toggle="tab"
                                href="#side2"><i class="bi bi-person-gear me-2 d-inline-block"></i> Settings</a></li>
                            </ul>
                        </div>
                        <div class="panel-body">
                            <div class="tab-content">
                                <div class="tab-pane p-0 show active" id="side1">
                                    <div class="text-end m-3">
                                        <a href="mail-settings.php" class="text-primary">Mail Settings</a>
                                    </div>
                                    <div class="px-3 pt-0 pb-3 border-bottom border-block-end-dashed">
                                        <div class="d-flex align-items-center justify-content-between gap-1 mb-3">
                                            <p class="mb-0 font-weight-semibold">Messages</p>
                                            <a href="mail.php" class="btn btn-sm btn-primary-light btn-icon btn-icon"><i class="ri-chat-1-line"></i></a>
                                        </div>
                                        <ul class="list-unstyled mb-0 mt-2">
                                            <li class="mb-3">
                                                <div class="d-flex pos-relative">
                                                    <a href="javascript:void(0)" class="link-overlap"></a>
                                                    <div class="main-img-user avatar d-none d-sm-block">
                                                        <img alt="avatar" class="shadow" src="<?php echo $baseUrl; ?>/assets/images/faces/5.jpg">
                                                    </div>
                                                    <div class="flex-grow-1 ms-2 fs-13">
                                                        <div class="d-flex align-items-center justify-content-between gap-1 mb-1">
                                                            <h6 class="mb-0">Elizabeth Ava<span
                                                                class="badge bg-primary-transparent fs-11 ms-2 font-weight-normal">2</span><span
                                                                class="ms-2"><i class="ti-pin-alt fs-11 text-muted"></i></span></h6>
                                                            <span class="fs-11 text-muted ms-auto my-auto">3:55 PM</span>
                                                        </div>
                                                        <p class="mb-0 fs-12 text-muted d-flex align-items-center">Elizabeth is
                                                        online</p>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="mb-3">
                                                <div class="d-flex pos-relative">
                                                    <a href="javascript:void(0)" class="link-overlap"></a>
                                                    <div class="main-img-user avatar d-none d-sm-block">
                                                        <img alt="avatar" class="shadow" src="<?php echo $baseUrl; ?>/assets/images/faces/9.jpg">
                                                    </div>
                                                    <div class="flex-grow-1 ms-2 fs-13">
                                                        <div class="d-flex align-items-center justify-content-between gap-1 mb-1">
                                                            <h6 class="mb-0">George Rhys<span
                                                                class="badge bg-primary-transparent fs-11 ms-2 font-weight-normal">1</span>
                                                            </h6>
                                                            <span class="fs-11 text-muted ms-auto my-auto">12:04 PM</span>
                                                        </div>
                                                        <p class="mb-0 fs-12 text-muted d-flex align-items-center">I must explain...</p>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="mb-3">
                                                <div class="d-flex pos-relative">
                                                    <a href="javascript:void(0)" class="link-overlap"></a>
                                                    <div class="main-img-user avatar d-none d-sm-block">
                                                        <img alt="avatar" class="shadow" src="<?php echo $baseUrl; ?>/assets/images/faces/8.jpg">
                                                    </div>
                                                    <div class="flex-grow-1 ms-2 fs-13">
                                                        <div class="d-flex align-items-center justify-content-between gap-1 mb-1">
                                                            <h6 class="mb-0">Bethany Isla<span
                                                                class="badge bg-primary-transparent fs-11 ms-2 font-weight-normal">2</span>
                                                            </h6>
                                                            <span class="fs-11 text-muted ms-auto my-auto">Yesterday</span>
                                                        </div>
                                                        <p class="mb-0 fs-12">We denounce with righteous..</p>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="mb-3">
                                                <div class="d-flex pos-relative">
                                                    <a href="javascript:void(0)" class="link-overlap"></a>
                                                    <div class="main-img-user avatar d-none d-sm-block">
                                                        <img alt="avatar" class="shadow" src="<?php echo $baseUrl; ?>/assets/images/faces/3.jpg">
                                                    </div>
                                                    <div class="flex-grow-1 ms-2 fs-13">
                                                        <div class="d-flex align-items-center justify-content-between gap-1 mb-1">
                                                            <h6 class="mb-0">Margaret Emma<span
                                                                class="badge bg-primary-transparent fs-11 ms-2 font-weight-normal">1</span>
                                                            </h6>
                                                            <span class="fs-11 text-muted ms-auto my-auto">01 Mar</span>
                                                        </div>
                                                        <p class="mb-0 fs-12 text-muted d-flex align-items-center"><i
                                                            class="fe fe-link-2 me-1 fs-12 text-primary"></i><a
                                                            href="javascript:void(0);">http://Diam-duoet.xd</a></p>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="mb-0">
                                                <div class="d-flex pos-relative">
                                                    <a href="javascript:void(0)" class="link-overlap"></a>
                                                    <div class="main-img-user avatar d-none d-sm-block">
                                                        <img alt="avatar" class="shadow" src="<?php echo $baseUrl; ?>/assets/images/faces/10.jpg">
                                                    </div>
                                                    <div class="flex-grow-1 ms-2 fs-13">
                                                        <div class="d-flex align-items-center justify-content-between gap-1 mb-1">
                                                            <h6 class="mb-0">Michael Souris<span
                                                                class="badge bg-primary-transparent fs-11 ms-2 font-weight-normal">1</span>
                                                            </h6>
                                                            <span class="fs-11 text-muted ms-auto my-auto">22 Feb</span>
                                                        </div>
                                                        <p class="mb-0 fs-12 text-muted d-flex align-items-center"><i
                                                            class="fe fe-image me-1 fs-12 text-primary"></i>+13 photos</p>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                        <div class="text-end mt-2">
                                            <a href="chat.php" class="text-primary">View All</a>
                                        </div>
                                    </div>
                                    <div class="p-3 border-bottom border-block-end-dashed">
                                        <div class="d-flex align-items-center justify-content-between gap-1 my-3">
                                            <p class="mb-0 font-weight-semibold">Workspace</p>
                                            <a href="mail.php" class="btn btn-sm btn-primary-light btn-icon btn-icon"><i class="ri-add-circle-line"></i></a>
                                        </div>
                                        <ul class="list-unstyled mb-0 mt-1">
                                            <li class="mb-3">
                                                <div class="d-flex">
                                                    <div class="avatar avatar  shadow bg-primary-transparent">
                                                        <i class="ri-user-line"></i>
                                                    </div>
                                                    <div class="flex-grow-1 ms-2 fs-13">
                                                        <div class="d-flex align-items-center justify-content-between gap-1 mb-1">
                                                            <h6 class="mb-0">Olivia Lily<span
                                                                class="badge bg-primary-transparent fs-11 ms-2 font-weight-normal">1</span>
                                                            </h6>
                                                            <span class="fs-11 text-muted ms-auto my-auto">2:00 PM</span>
                                                        </div>
                                                        <p class="mb-0 fs-12">Aliquyam ipsum sit.</p>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="mb-3">
                                                <div class="d-flex">
                                                    <div class="avatar avatar  shadow bg-secondary-transparent">
                                                        <i class="ri-arrow-right-circle-line"></i>
                                                    </div>
                                                    <div class="flex-grow-1 ms-2 fs-13">
                                                        <div class="d-flex align-items-center justify-content-between gap-1 mb-1">
                                                            <h6 class="mb-0">Smith Brown<span
                                                                class="badge bg-primary-transparent fs-11 ms-2 font-weight-normal">2</span>
                                                            </h6>
                                                            <span class="fs-11 text-muted ms-auto my-auto">12:00 PM</span>
                                                        </div>
                                                        <p class="mb-0 fs-12">At eos no sit...</p>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="mb-3">
                                                <div class="d-flex">
                                                    <div class="avatar avatar  shadow bg-warning-transparent">
                                                        <i class="ri-drag-move-line"></i>
                                                    </div>
                                                    <div class="flex-grow-1 ms-2 fs-13">
                                                        <div class="d-flex align-items-center justify-content-between gap-1 mb-1">
                                                            <h6 class="mb-0">Wilson Li<span
                                                                class="badge bg-primary-transparent fs-11 ms-2 font-weight-normal">24</span>
                                                            </h6>
                                                            <span class="fs-11 text-muted ms-auto my-auto">16 Feb</span>
                                                        </div>
                                                        <p class="mb-0 fs-12">Sit est dolor dolor.</p>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="mb-3">
                                                <div class="d-flex">
                                                    <div class="avatar avatar  shadow bg-success-transparent">
                                                        <i class="ri-home-8-line"></i>
                                                    </div>
                                                    <div class="flex-grow-1 ms-2 fs-13">
                                                        <div class="d-flex align-items-center justify-content-between gap-1 mb-1">
                                                            <h6 class="mb-0">Jones Morton<span
                                                                class="badge bg-primary-transparent fs-11 ms-2 font-weight-normal">3</span>
                                                            </h6>
                                                            <span class="fs-11 text-muted ms-auto my-auto">12 Jan </span>
                                                        </div>
                                                        <p class="mb-0 fs-12">Erat diam ipsum... Sed dolor...</p>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="mb-0">
                                                <div class="d-flex">
                                                    <div class="avatar avatar  shadow bg-danger-transparent">
                                                        <i class="ri-global-line"></i>
                                                    </div>
                                                    <div class="flex-grow-1 ms-2 fs-13">
                                                        <div class="d-flex align-items-center justify-content-between gap-1 mb-1">
                                                            <h6 class="mb-0">White Lee<span
                                                                class="badge bg-primary-transparent fs-11 ms-2 font-weight-normal">1</span>
                                                            </h6>
                                                            <span class="fs-11 text-muted ms-auto my-auto">01 Feb</span>
                                                        </div>
                                                        <p class="mb-0 fs-12">Justo accusam stet eirmod et....</p>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                        <div class="text-end mt-2">
                                            <a href="chat.php" class="text-primary">View All</a>
                                        </div>
                                    </div>
                                    <div class="p-3 border-bottom border-block-end-dashed">
                                        <div class="d-flex align-items-center justify-content-between gap-1 mb-3">
                                            <p class="mb-0 font-weight-semibold">Calls</p>
                                            <a href="contacts.php" class="btn btn-sm btn-primary-light btn-icon btn-icon"><i class="ri-phone-line"></i></a>
                                        </div>
                                        <ul class="list-unstyled mb-0 mt-2">
                                            <li class="mb-3">
                                                <div class="d-flex pos-relative">
                                                    <a href="javascript:void(0)" class="link-overlap"></a>
                                                    <div class="main-img-user avatar d-none d-sm-block">
                                                        <img alt="avatar" class="shadow" src="<?php echo $baseUrl; ?>/assets/images/faces/14.jpg">
                                                    </div>
                                                    <div class="flex-grow-1 ms-2 fs-13">
                                                        <div class="d-flex align-items-center justify-content-between gap-1 mb-1">
                                                            <h6 class="mb-0">Wilfrid Price<span
                                                                class="badge bg-danger-transparent text-danger fs-11 ms-2 font-weight-normal">3</span>
                                                            </h6>
                                                            <span class="fs-11 text-muted ms-auto my-auto">11:15 AM</span>
                                                        </div>
                                                        <div class="d-flex align-items-center justify-content-between gap-1">
                                                            <p class="mb-0 fs-12 text-muted d-flex align-items-center"><i
                                                                class="fe fe-x me-1 fs-13 text-danger"></i>Missed call</p>
                                                            <span class="text-primary"><i class="fe fe-phone"></i></span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="mb-3">
                                                <div class="d-flex pos-relative">
                                                    <a href="javascript:void(0)" class="link-overlap" data-bs-toggle="modal"
                                                    data-bs-target="#videoModal"></a>
                                                    <div class="main-img-user avatar d-none d-sm-block">
                                                        <img alt="avatar" class="shadow" src="<?php echo $baseUrl; ?>/assets/images/faces/7.jpg">
                                                    </div>
                                                    <div class="flex-grow-1 ms-2 fs-13">
                                                        <div class="d-flex align-items-center justify-content-between gap-1 mb-1">
                                                            <h6 class="mb-0">Jasmin O'Kon</h6>
                                                            <span class="fs-11 text-muted ms-auto my-auto">Yesterday</span>
                                                        </div>
                                                        <div class="d-flex align-items-center justify-content-between gap-1">
                                                            <p class="mb-0 fs-12 text-muted d-flex align-items-center"><i
                                                                class="fe fe-arrow-down-left me-1 fs-13 text-primary"></i>Duration:
                                                            15:30</p>
                                                            <span class="text-primary"><i class="fe fe-video"></i></span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="mb-3">
                                                <div class="d-flex pos-relative">
                                                    <a href="javascript:void(0)" class="link-overlap" data-bs-toggle="modal"
                                                    data-bs-target="#videoModal"></a>
                                                    <div class="main-img-user avatar d-none d-sm-block">
                                                        <img alt="avatar" class="shadow" src="<?php echo $baseUrl; ?>/assets/images/faces/4.jpg">
                                                    </div>
                                                    <div class="flex-grow-1 ms-2 fs-13">
                                                        <div class="d-flex align-items-center justify-content-between gap-1 mb-1">
                                                            <h6 class="mb-0">River Gleichner</h6>
                                                            <span class="fs-11 text-muted ms-auto my-auto">01 Mar</span>
                                                        </div>
                                                        <div class="d-flex align-items-center justify-content-between gap-1">
                                                            <p class="mb-0 fs-12 text-muted d-flex align-items-center"><i
                                                                class="fe fe-arrow-up-right me-1 fs-13 text-primary"></i>Declined
                                                            </p>
                                                            <span class="text-primary"><i class="fe fe-video"></i></span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="mb-3">
                                                <div class="d-flex pos-relative">
                                                    <a href="javascript:void(0)" class="link-overlap"></a>
                                                    <div class="main-img-user avatar d-none d-sm-block">
                                                        <img alt="avatar" class="shadow" src="<?php echo $baseUrl; ?>/assets/images/faces/12.jpg">
                                                    </div>
                                                    <div class="flex-grow-1 ms-2 fs-13">
                                                        <div class="d-flex align-items-center justify-content-between gap-1 mb-1">
                                                            <h6 class="mb-0">Saul Goodmate<span
                                                                class="badge bg-danger-transparent text-danger fs-11 ms-2 font-weight-normal">1</span>
                                                            </h6>
                                                            <span class="fs-11 text-muted ms-auto my-auto">20 Feb</span>
                                                        </div>
                                                        <div class="d-flex align-items-center justify-content-between gap-1">
                                                            <p class="mb-0 fs-12 text-muted d-flex align-items-center"><i
                                                                class="fe fe-x me-1 fs-13 text-danger"></i>Missed call</p>
                                                            <span class="text-primary"><i class="fe fe-phone"></i></span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="mb-0">
                                                <div class="d-flex pos-relative">
                                                    <a href="javascript:void(0)" class="link-overlap"></a>
                                                    <div class="main-img-user avatar d-none d-sm-block">
                                                        <img alt="avatar" class="shadow" src="<?php echo $baseUrl; ?>/assets/images/faces/13.jpg">
                                                    </div>
                                                    <div class="flex-grow-1 ms-2 fs-13">
                                                        <div class="d-flex align-items-center justify-content-between gap-1 mb-1">
                                                            <h6 class="mb-0">Edgardo Huel</h6>
                                                            <span class="fs-11 text-muted ms-auto my-auto">15 Feb</span>
                                                        </div>
                                                        <div class="d-flex align-items-center justify-content-between gap-1">
                                                            <p class="mb-0 fs-12 text-muted d-flex align-items-center"><i
                                                                class="fe fe-arrow-down-left me-1 fs-13 text-success"></i>Duration:
                                                            01:20:10</p>
                                                            <span class="text-primary"><i class="fe fe-phone"></i></span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                        <div class="text-end mt-3">
                                            <a href="chat.php" class="text-primary">View All</a>
                                        </div>
                                    </div>
                                    <div class="p-3 text-center">
                                        <div class="svg-card overflow-hidden">
                                            <img src="<?php echo $baseUrl; ?>/assets/images/media/media-67.jpg" alt="">
                                        </div>
                                        <h6 class="mt-3">Find out more !</h6>
                                        <a href="mail-settings.php" class="btn btn-outline-primary btn-block">Mail Settings</a>
                                    </div>
                                </div>
                                <div class="tab-pane p-0" id="side2">
                                    <div class="p-3 border-bottom">
                                        <h6>Notifications :</h6>
                                        <div class="panel mt-2 tabs-style5">
                                            <div class="panel-head">
                                                <ul class="nav app-header-nav-tabs tab-style-2 mb-3">
                                                    <li class="nav-item flex-grow-1 text-center"><a class="nav-link active" data-bs-toggle="tab"
                                                        href="#tab_chat">Home</a></li>
                                                    <li class="nav-item flex-grow-1 text-center"><a class="nav-link" data-bs-toggle="tab" href="#tab_tasks">Tasks</a>
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="panel-body p-0">
                                                <div class="tab-content">
                                                    <div class="tab-pane rounded-0 border border-dashed active" id="tab_chat">
                                                        <div class="mt-0">
                                                            <div class="d-flex align-items-center justify-content-between gap-1">
                                                                <label class="text-muted d-flex align-items-center">Someone
                                                                    mentioned</label>
                                                                <div class="custom-toggle-switch ms-auto"> 
                                                                    <input id="some" name="toggleswitchsize" type="checkbox"> 
                                                                    <label for="some" class="label-primary mb-1"></label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="mt-3">
                                                            <div class="d-flex align-items-center justify-content-between gap-1">
                                                                <label class="text-muted d-flex align-items-center">Someone
                                                                Replies</label>
                                                                <div class="custom-toggle-switch ms-auto"> 
                                                                    <input id="reply" name="toggleswitchsize" type="checkbox"> 
                                                                    <label for="reply" class="label-primary mb-1"></label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="mt-3">
                                                            <div class="d-flex align-items-center justify-content-between gap-1">
                                                                <label class="text-muted d-flex align-items-center">Allow All
                                                                Notifications</label>
                                                                <div class="custom-toggle-switch ms-auto"> 
                                                                    <input id="notify-allow" name="toggleswitchsize" type="checkbox" checked> 
                                                                    <label for="notify-allow" class="label-primary mb-1"></label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="d-flex align-items-center justify-content-between gap-1 mt-3 flex-wrap">
                                                            <label class="text-muted mb-0">Notifications On</label>
                                                            <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
                                                                <input type="radio" class="btn-check" name="radioChat" id="radio1">
                                                                <label class="btn btn-sm btn-outline-primary mb-0" for="radio1">In App</label>

                                                                <input type="radio" class="btn-check" name="radioChat" id="radio2" checked>
                                                                <label class="btn btn-sm btn-outline-primary mb-0" for="radio2">Email</label>

                                                                <input type="radio" class="btn-check" name="radioChat" id="radio3">
                                                                <label class="btn btn-sm btn-outline-primary mb-0" for="radio3">Both</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="tab-pane rounded-0 border border-dashed" id="tab_tasks">
                                                        <div class="mt-0">
                                                            <div class="d-flex align-items-center justify-content-between gap-1">
                                                                <label class="text-muted d-flex align-items-center">Assigned a
                                                                Task</label>
                                                                <div class="custom-toggle-switch ms-auto"> 
                                                                    <input id="task" name="toggleswitchsize" type="checkbox"> 
                                                                    <label for="task" class="label-primary mb-1"></label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="mt-3">
                                                            <div class="d-flex align-items-center justify-content-between gap-1">
                                                                <label class="text-muted d-flex align-items-center">If I Have More
                                                                Than 24 Tasks</label>
                                                                <div class="custom-toggle-switch ms-auto"> 
                                                                    <input id="listed" name="toggleswitchsize" type="checkbox"> 
                                                                    <label for="listed" class="label-primary mb-1"></label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="mt-3">
                                                            <div class="d-flex align-items-center justify-content-between gap-1">
                                                                <label class="text-muted d-flex align-items-center">Allow All
                                                                Notifications</label>
                                                                <div class="custom-toggle-switch ms-auto"> 
                                                                    <input id="all-notify" name="toggleswitchsize" type="checkbox" checked> 
                                                                    <label for="all-notify" class="label-primary mb-1"></label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="d-flex align-items-center justify-content-between gap-1 mt-3 flex-wrap">
                                                            <label class="text-muted mb-0">Notifications On</label>
                                                            <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
                                                                <input type="radio" class="btn-check" name="radioTasks" id="radio4" checked>
                                                                <label class="btn btn-sm btn-outline-primary mb-0" for="radio4">In App</label>

                                                                <input type="radio" class="btn-check" name="radioTasks" id="radio5">
                                                                <label class="btn btn-sm btn-outline-primary mb-0" for="radio5">Email</label>

                                                                <input type="radio" class="btn-check" name="radioTasks" id="radio6">
                                                                <label class="btn btn-sm btn-outline-primary mb-0" for="radio6">Both</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="p-3 border-bottom">
                                        <h6>App :</h6>
                                        <div class="panel mt-2 tabs-style5">
                                            <div class="panel-head">
                                                <ul class="nav app-header-nav-tabs tab-style-2 mb-3">
                                                    <li class="nav-item flex-grow-1 text-center"><a class="nav-link active" data-bs-toggle="tab"
                                                        href="#tab_apps">Files</a></li>
                                                    <li class="nav-item flex-grow-1 text-center"><a class="nav-link" data-bs-toggle="tab" href="#tab_profile">Profile</a>
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="panel-body p-0">
                                                <div class="tab-content">
                                                    <div class="tab-pane rounded-0 border border-dashed active" id="tab_apps">
                                                        <div class="mt-3">
                                                            <p class="mb-0">Files : </p>
                                                            <div class="mt-3">
                                                                <div class="mb-0 d-flex align-items-center justify-content-between gap-1">
                                                                    <span class="text-muted">
                                                                    <i class="ri-folder-image-fill me-1 d-inline-block fs-18 text-primary"></i>
                                                                    Images
                                                                    </span>
                                                                    
                                                                    <div class=" ms-auto="> 
                                                                        1,458
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="mt-3">
                                                                <div class="mb-0 d-flex align-items-center justify-content-between gap-1">
                                                                    <span class="text-muted">
                                                                    <i class="ri-live-line me-1 d-inline-block fs-18 text-secondary"></i>
                                                                    Videos
                                                                    </span>
                                                                    
                                                                    <div class=" ms-auto="> 
                                                                        213
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="mt-3">
                                                                <div class="mb-0 d-flex align-items-center justify-content-between gap-1">
                                                                    <span class="text-muted">
                                                                    <i class="ri-database-2-line me-1 d-inline-block fs-18 text-success"></i>
                                                                    Storage
                                                                    </span>
                                                                    
                                                                    <div class=" ms-auto text-success"> 
                                                                        8.50MB free space
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="mt-4">
                                                            <p class="mb-0">Files Privacy Settings :</p>
                                                            <div class="mt-3">
                                                                <div class="form-group mb-0">
                                                                    <p class="mb-2 d-flex align-items-center justify-content-between gap-1">
                                                                    <label for="inputPassword" class="mb-0 text-muted">Password</label>
                                                                    <a href="javascript:void(0)" class="fs-11 text-primary" id="changePassword">change</a>
                                                                    </p>
                                                                    <input type="password" class="form-control form-contron-sm radius-4" id="inputPassword"
                                                                    placeholder="Enter New Password" value="passwordzem">
                                                                    <div class="mt-2 d-none" id="reEnterPassword">
                                                                        <input type="password" class="form-control form-contron-sm radius-4" id="inputPasswordTwo"
                                                                        placeholder="Re-Enter Password">
                                                                        <div class="btn-list mt-2 text-end">
                                                                            <a href="javascript:void(0)" class="text-danger" id="closePassword">Discard</a>
                                                                            <a href="javascript:void(0)" class="btn btn-sm btn-primary ms-3">Save
                                                                            Changes</a>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="mt-3">
                                                                <div class="mb-0 d-flex align-items-center justify-content-between gap-1">
                                                                    <span class="text-muted d-flex align-items-center">Two Factor
                                                                    Authentication</span>
                                                                    <div class="custom-toggle-switch ms-auto"> 
                                                                        <input id="authentication" name="toggleswitchsize" type="checkbox" checked> 
                                                                        <label for="authentication" class="label-primary mb-1"></label>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="mt-3">
                                                                <div class="form-group mb-0">
                                                                    <p class="mb-0 d-flex align-items-center justify-content-between gap-1">
                                                                    <label for="inputPassword" class="mb-0 text-muted">Recent Deleted Files</label>
                                                                        <a href="javascript:void(0)" class="btn btn-sm btn-outline-danger mt-2">Delete All</a>
                                                                    </p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="tab-pane border border-dashed rounded-0" id="tab_profile">
                                                        <div class="mt-3">
                                                            <div class="form-group mb-3">
                                                                <label class="text-muted" for="inputName">Full Name</label>
                                                                <input type="text" class="form-control radius-4" id="inputName" placeholder="Enter Full Name"
                                                                    value="Json Taylor">
                                                            </div>
                                                            <div class="form-group mb-3">
                                                                <label class="text-muted" for="inputMail">Email</label>
                                                                <input type="email" class="form-control radius-4" id="inputMail" placeholder="Enter Your Mail"
                                                                    value="nicktaylor@spruko.me">
                                                            </div>
                                                            <div class="form-group mb-3">
                                                                <label for="inputNumber" class="text-muted d-flex align-items-center justify-content-between gap-1">
                                                                    Mobile Number
                                                                    <a href="javascript:void(0)" class="fs-11 text-primary">change number</a>
                                                                </label>
                                                                <div class="input-group">
                                                                    <span class="input-group-text br-ts-20 br-bs-20">+91</span>
                                                                    <input type="number" class="form-control br-te-4 br-be-4" id="inputNumber"
                                                                    placeholder="Enter Your Number" value="1212313231">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="p-3 border-bottom">
                                        <h6>Remaiders :</h6>
                                        <div class="mt-3">
                                            <div class="d-flex align-items-center justify-content-between gap-1">
                                                <label class="text-muted">Get alert for remaiders</label>
                                                <div class="custom-toggle-switch ms-auto"> 
                                                    <input id="mails-images" name="toggleswitchsize" type="checkbox" checked> 
                                                    <label for="mails-images" class="label-primary mb-1"></label>
                                                </div>
                                                <span class="custom-switch-indicator"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="p-3">
                                        <div class="text-center">
                                            <img src="<?php echo $baseUrl; ?>/assets/images/media/media-66.png" alt="">
                                            <h6 class="mt-4">This Is Not You're Looking For?</h6>
                                            <a href="profile-settings.php" class="btn btn-block btn-outline-primary">Go To Profile Settings</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>