@extends('front.layout.app')

@section('page_title',trans('word.notifications'))
@section('content')
    <section class="profile-desktop">
        <div class="container py-5">

            <div class="row">
                @include('front.layout.profile-side')

                <div class="col-lg-7 full-heigth left-side-profile">
                    <section  class="bg-gray-white" id="notification-section">
                        <div class="container py-5 full-height ">

                            <div class="row full-height">
                                <div class="col-md-12 full-height">

                                    <div class="card full-height shadow" id="chat3" style="border-radius: 15px;">
                                        <div class="card-body full-height">

                                            <div class="row">
                                                <div class="col-12 mb-4 mb-md-0">

                                                    <div class="p-3 ">
                                                        <div  class="overflow-y notification-container" data-mdb-perfect-scrollbar="true">
                                                            <ul class="list-unstyled mb-0">
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava1-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Marie Horwitz</p>
                                                                                <p class="small text-muted">Hello, Are you there?</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Just now</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">3</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava2-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Alexa Chung</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">5 mins ago</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">2</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava3-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Danny McChain</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava4-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-danger badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Ashley Olsen</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava5-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Kate Moss</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava1-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Marie Horwitz</p>
                                                                                <p class="small text-muted">Hello, Are you there?</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Just now</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">3</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava2-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Alexa Chung</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">5 mins ago</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">2</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava3-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Danny McChain</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava4-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-danger badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Ashley Olsen</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava5-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Kate Moss</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava1-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Marie Horwitz</p>
                                                                                <p class="small text-muted">Hello, Are you there?</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Just now</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">3</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava2-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Alexa Chung</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">5 mins ago</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">2</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava3-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Danny McChain</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava4-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-danger badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Ashley Olsen</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava5-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Kate Moss</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava1-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Marie Horwitz</p>
                                                                                <p class="small text-muted">Hello, Are you there?</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Just now</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">3</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava2-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Alexa Chung</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">5 mins ago</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">2</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava3-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Danny McChain</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava4-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-danger badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Ashley Olsen</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava5-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Kate Moss</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava1-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Marie Horwitz</p>
                                                                                <p class="small text-muted">Hello, Are you there?</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Just now</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">3</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava2-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Alexa Chung</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">5 mins ago</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">2</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava3-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Danny McChain</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava4-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-danger badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Ashley Olsen</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava5-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Kate Moss</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava1-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Marie Horwitz</p>
                                                                                <p class="small text-muted">Hello, Are you there?</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Just now</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">3</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava2-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Alexa Chung</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">5 mins ago</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">2</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava3-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Danny McChain</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava4-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-danger badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Ashley Olsen</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava5-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Kate Moss</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava1-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Marie Horwitz</p>
                                                                                <p class="small text-muted">Hello, Are you there?</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Just now</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">3</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava2-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Alexa Chung</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">5 mins ago</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">2</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava3-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Danny McChain</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava4-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-danger badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Ashley Olsen</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava5-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Kate Moss</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava1-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Marie Horwitz</p>
                                                                                <p class="small text-muted">Hello, Are you there?</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Just now</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">3</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava2-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Alexa Chung</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">5 mins ago</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">2</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava3-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Danny McChain</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava4-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-danger badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Ashley Olsen</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava5-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Kate Moss</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava1-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Marie Horwitz</p>
                                                                                <p class="small text-muted">Hello, Are you there?</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Just now</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">3</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava2-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Alexa Chung</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">5 mins ago</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">2</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava3-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Danny McChain</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava4-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-danger badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Ashley Olsen</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava5-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Kate Moss</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava1-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Marie Horwitz</p>
                                                                                <p class="small text-muted">Hello, Are you there?</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Just now</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">3</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava2-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Alexa Chung</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">5 mins ago</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">2</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava3-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Danny McChain</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava4-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-danger badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Ashley Olsen</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava5-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Kate Moss</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava1-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Marie Horwitz</p>
                                                                                <p class="small text-muted">Hello, Are you there?</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Just now</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">3</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava2-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Alexa Chung</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">5 mins ago</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">2</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava3-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Danny McChain</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava4-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-danger badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Ashley Olsen</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava5-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Kate Moss</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava1-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Marie Horwitz</p>
                                                                                <p class="small text-muted">Hello, Are you there?</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Just now</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">3</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava2-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Alexa Chung</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">5 mins ago</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">2</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava3-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Danny McChain</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava4-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-danger badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Ashley Olsen</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava5-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Kate Moss</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava1-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Marie Horwitz</p>
                                                                                <p class="small text-muted">Hello, Are you there?</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Just now</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">3</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava2-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Alexa Chung</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">5 mins ago</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">2</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava3-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Danny McChain</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava4-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-danger badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Ashley Olsen</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava5-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Kate Moss</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava1-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Marie Horwitz</p>
                                                                                <p class="small text-muted">Hello, Are you there?</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Just now</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">3</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava2-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Alexa Chung</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">5 mins ago</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">2</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava3-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Danny McChain</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava4-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-danger badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Ashley Olsen</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava5-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Kate Moss</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava1-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Marie Horwitz</p>
                                                                                <p class="small text-muted">Hello, Are you there?</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Just now</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">3</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava2-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Alexa Chung</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">5 mins ago</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">2</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava3-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Danny McChain</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava4-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-danger badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Ashley Olsen</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava5-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Kate Moss</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava1-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Marie Horwitz</p>
                                                                                <p class="small text-muted">Hello, Are you there?</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Just now</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">3</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava2-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Alexa Chung</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">5 mins ago</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">2</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava3-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Danny McChain</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava4-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-danger badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Ashley Olsen</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava5-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Kate Moss</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava6-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Ben Smith</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                            </ul>
                                                            >
                                                        </div>

                                                    </div>

                                                </div>
                                            </div>

                                        </div>
                                    </div>

                                </div>
                            </div>

                        </div>
                    </section>
                </div>
            </div>
        </div>
    </section>

    <section class="profile-mobile" style="margin-bottom: 12rem !important;">
        <div class="container py-5">
           <div class="row">
                @include('front.layout.profile-side-mobile')

                <div class="col-12 full-heigth">
                    <section  class="bg-gray-white" id="notification-section">

                            <div class="row full-height mt-2 mb-2">
                                <div class="col-md-12 full-height">

                                    <div class="card full-height shadow" id="chat3" style="border-radius: 15px;">
                                        <div class="card-body full-height">

                                            <div class="row">
                                                <div class="col-12 mb-4 mb-md-0">

                                                    <div class="p-3 ">
                                                        <div  class="overflow-y notification-container" data-mdb-perfect-scrollbar="true">
                                                            <ul class="list-unstyled mb-0">
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava1-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Marie Horwitz</p>
                                                                                <p class="small text-muted">Hello, Are you there?</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Just now</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">3</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava2-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Alexa Chung</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">5 mins ago</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">2</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava3-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Danny McChain</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava4-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-danger badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Ashley Olsen</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava5-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Kate Moss</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava1-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Marie Horwitz</p>
                                                                                <p class="small text-muted">Hello, Are you there?</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Just now</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">3</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava2-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Alexa Chung</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">5 mins ago</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">2</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava3-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Danny McChain</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava4-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-danger badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Ashley Olsen</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava5-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Kate Moss</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava1-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Marie Horwitz</p>
                                                                                <p class="small text-muted">Hello, Are you there?</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Just now</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">3</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava2-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Alexa Chung</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">5 mins ago</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">2</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava3-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Danny McChain</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava4-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-danger badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Ashley Olsen</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava5-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Kate Moss</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava1-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Marie Horwitz</p>
                                                                                <p class="small text-muted">Hello, Are you there?</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Just now</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">3</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava2-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Alexa Chung</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">5 mins ago</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">2</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava3-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Danny McChain</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava4-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-danger badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Ashley Olsen</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava5-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Kate Moss</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava1-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Marie Horwitz</p>
                                                                                <p class="small text-muted">Hello, Are you there?</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Just now</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">3</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava2-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Alexa Chung</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">5 mins ago</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">2</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava3-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Danny McChain</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava4-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-danger badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Ashley Olsen</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava5-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Kate Moss</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava1-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Marie Horwitz</p>
                                                                                <p class="small text-muted">Hello, Are you there?</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Just now</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">3</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava2-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Alexa Chung</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">5 mins ago</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">2</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava3-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Danny McChain</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava4-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-danger badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Ashley Olsen</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava5-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Kate Moss</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava1-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Marie Horwitz</p>
                                                                                <p class="small text-muted">Hello, Are you there?</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Just now</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">3</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava2-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Alexa Chung</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">5 mins ago</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">2</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava3-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Danny McChain</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava4-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-danger badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Ashley Olsen</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava5-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Kate Moss</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava1-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Marie Horwitz</p>
                                                                                <p class="small text-muted">Hello, Are you there?</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Just now</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">3</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava2-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Alexa Chung</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">5 mins ago</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">2</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava3-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Danny McChain</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava4-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-danger badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Ashley Olsen</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava5-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Kate Moss</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava1-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Marie Horwitz</p>
                                                                                <p class="small text-muted">Hello, Are you there?</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Just now</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">3</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava2-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Alexa Chung</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">5 mins ago</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">2</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava3-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Danny McChain</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava4-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-danger badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Ashley Olsen</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava5-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Kate Moss</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava1-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Marie Horwitz</p>
                                                                                <p class="small text-muted">Hello, Are you there?</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Just now</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">3</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava2-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Alexa Chung</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">5 mins ago</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">2</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava3-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Danny McChain</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava4-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-danger badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Ashley Olsen</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava5-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Kate Moss</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava1-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Marie Horwitz</p>
                                                                                <p class="small text-muted">Hello, Are you there?</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Just now</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">3</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava2-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Alexa Chung</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">5 mins ago</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">2</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava3-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Danny McChain</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava4-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-danger badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Ashley Olsen</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava5-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Kate Moss</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava1-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Marie Horwitz</p>
                                                                                <p class="small text-muted">Hello, Are you there?</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Just now</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">3</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava2-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Alexa Chung</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">5 mins ago</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">2</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava3-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Danny McChain</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava4-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-danger badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Ashley Olsen</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava5-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Kate Moss</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava1-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Marie Horwitz</p>
                                                                                <p class="small text-muted">Hello, Are you there?</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Just now</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">3</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava2-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Alexa Chung</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">5 mins ago</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">2</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava3-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Danny McChain</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava4-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-danger badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Ashley Olsen</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava5-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Kate Moss</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava1-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Marie Horwitz</p>
                                                                                <p class="small text-muted">Hello, Are you there?</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Just now</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">3</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava2-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Alexa Chung</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">5 mins ago</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">2</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava3-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Danny McChain</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava4-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-danger badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Ashley Olsen</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava5-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Kate Moss</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava1-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Marie Horwitz</p>
                                                                                <p class="small text-muted">Hello, Are you there?</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Just now</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">3</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava2-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Alexa Chung</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">5 mins ago</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">2</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava3-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Danny McChain</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava4-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-danger badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Ashley Olsen</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava5-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Kate Moss</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava1-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Marie Horwitz</p>
                                                                                <p class="small text-muted">Hello, Are you there?</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Just now</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">3</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava2-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Alexa Chung</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">5 mins ago</p>
                                                                            <span class="badge bg-danger rounded-pill float-end">2</span>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava3-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Danny McChain</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava4-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-danger badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Ashley Olsen</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2 border-bottom">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava5-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-warning badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Kate Moss</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li class="p-2">
                                                                    <a href="#!" class="d-flex justify-content-between">
                                                                        <div class="d-flex flex-row">
                                                                            <div>
                                                                                <img
                                                                                    src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava6-bg.webp"
                                                                                    alt="avatar" class="d-flex align-self-center me-3" width="60">
                                                                                <span class="badge bg-success badge-dot"></span>
                                                                            </div>
                                                                            <div class="pt-1">
                                                                                <p class="fw-bold mb-0">Ben Smith</p>
                                                                                <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="pt-1">
                                                                            <p class="small text-muted mb-1">Yesterday</p>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                            </ul>
                                                        </div>

                                                    </div>

                                                </div>
                                            </div>

                                        </div>
                                    </div>

                                </div>
                            </div>
                    </section>
                </div>
           </div>
        </div>
    </section>


@endsection

@section('scripts')
@endsection