<div class="modal fade js-modal-messenger modal-backdrop-transparent" tabindex="-1" role="dialog" aria-hidden="true">
   <div class="modal-dialog modal-dialog-right">
	  <div class="modal-content h-100">
		 <div class="dropdown-header bg-trans-gradient d-flex align-items-center w-100">
			
			<div class="d-flex flex-row align-items-center mt-1 mb-1 color-white">
				<span class="mr-2">
					<span class="rounded-circle profile-image d-block" style="background-image:url('img/demo/avatars/avatar-d.png'); background-size: cover;"></span>
				</span>
				<div class="info-card-text">
					<a href="javascript:void(0);" class="fs-lg text-truncate text-truncate-lg text-white" data-toggle="dropdown" aria-expanded="false">
						Tracey Chang 
						<i class="fal fa-angle-down d-inline-block ml-1 text-white fs-md"></i>
					</a>
					<div class="dropdown-menu">
						<a class="dropdown-item" href="#">Send Email</a>
						<a class="dropdown-item" href="#">Create Appointment</a>
						<a class="dropdown-item" href="#">Block User</a>
					</div>
					<span class="text-truncate text-truncate-md opacity-80">IT Director</span>
				</div>
			</div>

			<button type="button" class="close text-white position-absolute pos-top pos-right p-2 m-1 mr-2" data-dismiss="modal" aria-label="Close">
				<span aria-hidden="true"><i class="fal fa-times"></i></span>
			</button>
		 </div>
		 <div class="modal-body p-0 h-100 d-flex">
			{{> include/_tab-msgr }}
		 </div>
	  </div>
   </div>
</div>