{{-- <div class="chat-panel right-chat-panel right-positioned animations-enabled ng-star-inserted folded open locked-open" lockedopen="gt-md" name="chatPanel" position="right" >
	<div class="header mat-elevation-z4 primary"   >
		
		
		<div class="title ml-16 ng-star-inserted" >
			<i class="fa fa-user"></i>
			<h3 class="ml-12">Team Chat</h3>
		</div>
		
		<button class="toggle-sidebar-folded mr-8 mat-icon-button">
		<span class="mat-button-wrapper">
			<mat-icon class="secondary-text s-20 mat-icon notranslate material-icons mat-icon-no-color" role="img" aria-hidden="true">close</mat-icon>
		</span>
		<div class="mat-button-ripple mat-ripple mat-button-ripple-round" >
		</div>
		<div class="mat-button-focus-overlay">
		</div>
		</button>
		<button class="toggle-sidebar-open mr-8 mat-icon-button">
		<span class="mat-button-wrapper">
			<mat-icon class="secondary-text mat-icon notranslate material-icons mat-icon-no-color" role="img" aria-hidden="true">close</mat-icon>
		</span>
		<div class="mat-button-ripple mat-ripple mat-button-ripple-round" >
		</div>
		<div class="mat-button-focus-overlay">
		</div>
		</button>
	</div>
	<div class="content" style="flex-direction: row; box-sizing: border-box; display: flex;">
		<div fuseperfectscrollbar="" id="contacts-list" class="ps ps--active-y">
			
			<div class="contacts-list-item ng-star-inserted online">
				<img class="avatar" mattooltipposition="left" aria-describedby="cdk-describedby-message-5" src="http://angular-material.fusetheme.com/assets/images/avatars/alice.jpg" style="touch-action: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
				
				<div class="unread-count ng-star-inserted">2</div>
				<div class="status-icon online">
				</div>
			</div>
			<div class="contacts-list-item ng-star-inserted do-not-disturb">
				<img class="avatar" mattooltipposition="left" aria-describedby="cdk-describedby-message-6" src="http://angular-material.fusetheme.com/assets/images/avatars/Arnold.jpg" style="touch-action: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
				
				<div class="status-icon do-not-disturb">
				</div>
			</div>
			<div class="contacts-list-item ng-star-inserted do-not-disturb">
				<img class="avatar" mattooltipposition="left" aria-describedby="cdk-describedby-message-7" src="http://angular-material.fusetheme.com/assets/images/avatars/Barrera.jpg" style="touch-action: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
				
				<div class="status-icon do-not-disturb">
				</div>
			</div>
			<div class="contacts-list-item ng-star-inserted offline">
				<img class="avatar" mattooltipposition="left" aria-describedby="cdk-describedby-message-8" src="http://angular-material.fusetheme.com/assets/images/avatars/Blair.jpg" style="touch-action: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
				
				<div class="unread-count ng-star-inserted">3</div>
				<div class="status-icon offline">
				</div>
			</div>
			<div class="contacts-list-item ng-star-inserted offline">
				<img class="avatar" mattooltipposition="left" aria-describedby="cdk-describedby-message-9" src="http://angular-material.fusetheme.com/assets/images/avatars/Boyle.jpg" style="touch-action: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
				
				<div class="unread-count ng-star-inserted">1</div>
				<div class="status-icon offline">
				</div>
			</div>
			<div class="contacts-list-item ng-star-inserted offline">
				<img class="avatar" mattooltipposition="left" aria-describedby="cdk-describedby-message-10" src="http://angular-material.fusetheme.com/assets/images/avatars/Christy.jpg" style="touch-action: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
				
				<div class="status-icon offline">
				</div>
			</div>
			<div class="contacts-list-item ng-star-inserted online">
				<img class="avatar" mattooltipposition="left" aria-describedby="cdk-describedby-message-11" src="http://angular-material.fusetheme.com/assets/images/avatars/Copeland.jpg" style="touch-action: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
				
				<div class="status-icon online">
				</div>
			</div>
			<div class="contacts-list-item ng-star-inserted away">
				<img class="avatar" mattooltipposition="left" aria-describedby="cdk-describedby-message-12" src="http://angular-material.fusetheme.com/assets/images/avatars/Estes.jpg" style="touch-action: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
				
				<div class="status-icon away">
				</div>
			</div>
			<div class="contacts-list-item ng-star-inserted offline">
				<img class="avatar" mattooltipposition="left" aria-describedby="cdk-describedby-message-13" src="http://angular-material.fusetheme.com/assets/images/avatars/Harper.jpg" style="touch-action: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
				
				<div class="status-icon offline">
				</div>
			</div>
			<div class="contacts-list-item ng-star-inserted away">
				<img class="avatar" mattooltipposition="left" aria-describedby="cdk-describedby-message-14" src="http://angular-material.fusetheme.com/assets/images/avatars/Helen.jpg" style="touch-action: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
				
				<div class="status-icon away">
				</div>
			</div>
			<div class="contacts-list-item ng-star-inserted offline">
				<img class="avatar" mattooltipposition="left" aria-describedby="cdk-describedby-message-15" src="http://angular-material.fusetheme.com/assets/images/avatars/Henderson.jpg" style="touch-action: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
				
				<div class="status-icon offline">
				</div>
			</div>
			<div class="contacts-list-item ng-star-inserted online">
				<img class="avatar" mattooltipposition="left" aria-describedby="cdk-describedby-message-16" src="http://angular-material.fusetheme.com/assets/images/avatars/Josefina.jpg" style="touch-action: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
				
				<div class="status-icon online">
				</div>
			</div>
			<div class="contacts-list-item ng-star-inserted away">
				<img class="avatar" mattooltipposition="left" aria-describedby="cdk-describedby-message-17" src="http://angular-material.fusetheme.com/assets/images/avatars/Katina.jpg" style="touch-action: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
				
				<div class="status-icon away">
				</div>
			</div>
			<div class="contacts-list-item ng-star-inserted do-not-disturb">
				<img class="avatar" mattooltipposition="left" aria-describedby="cdk-describedby-message-18" src="http://angular-material.fusetheme.com/assets/images/avatars/Lily.jpg" style="touch-action: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
				
				<div class="unread-count ng-star-inserted">10</div>
				<div class="status-icon do-not-disturb">
				</div>
			</div>
			<div class="contacts-list-item ng-star-inserted away">
				<img class="avatar" mattooltipposition="left" aria-describedby="cdk-describedby-message-19" src="http://angular-material.fusetheme.com/assets/images/avatars/Mai.jpg" style="touch-action: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
				
				<div class="status-icon away">
				</div>
			</div>
			<div class="contacts-list-item ng-star-inserted do-not-disturb">
				<img class="avatar" mattooltipposition="left" aria-describedby="cdk-describedby-message-20" src="http://angular-material.fusetheme.com/assets/images/avatars/Nancy.jpg" style="touch-action: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
				
				<div class="status-icon do-not-disturb">
				</div>
			</div>
			<div class="contacts-list-item ng-star-inserted do-not-disturb">
				<img class="avatar" mattooltipposition="left" aria-describedby="cdk-describedby-message-21" src="http://angular-material.fusetheme.com/assets/images/avatars/Nora.jpg" style="touch-action: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
				
				<div class="unread-count ng-star-inserted">7</div>
				<div class="status-icon do-not-disturb">
				</div>
			</div>
			<div class="contacts-list-item ng-star-inserted away">
				<img class="avatar" mattooltipposition="left" aria-describedby="cdk-describedby-message-22" src="http://angular-material.fusetheme.com/assets/images/avatars/Odessa.jpg" style="touch-action: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
				
				<div class="unread-count ng-star-inserted">1</div>
				<div class="status-icon away">
				</div>
			</div>
			<div class="contacts-list-item ng-star-inserted offline">
				<img class="avatar" mattooltipposition="left" aria-describedby="cdk-describedby-message-23" src="http://angular-material.fusetheme.com/assets/images/avatars/Reyna.jpg" style="touch-action: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
				
				<div class="status-icon offline">
				</div>
			</div>
			<div class="contacts-list-item ng-star-inserted online">
				<img class="avatar" mattooltipposition="left" aria-describedby="cdk-describedby-message-24" src="http://angular-material.fusetheme.com/assets/images/avatars/Shauna.jpg" style="touch-action: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
				
				<div class="status-icon online">
				</div>
			</div>
			<div class="contacts-list-item ng-star-inserted online">
				<img class="avatar" mattooltipposition="left" aria-describedby="cdk-describedby-message-25" src="http://angular-material.fusetheme.com/assets/images/avatars/Shepard.jpg" style="touch-action: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
				
				<div class="status-icon online">
				</div>
			</div>
			<div class="contacts-list-item ng-star-inserted do-not-disturb">
				<img class="avatar" mattooltipposition="left" aria-describedby="cdk-describedby-message-26" src="http://angular-material.fusetheme.com/assets/images/avatars/Tillman.jpg" style="touch-action: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
				
				<div class="unread-count ng-star-inserted">99+</div>
				<div class="status-icon do-not-disturb">
				</div>
			</div>
			<div class="contacts-list-item ng-star-inserted away">
				<img class="avatar" mattooltipposition="left" aria-describedby="cdk-describedby-message-27" src="http://angular-material.fusetheme.com/assets/images/avatars/Trevino.jpg" style="touch-action: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
				
				<div class="status-icon away">
				</div>
			</div>
			<div class="contacts-list-item ng-star-inserted do-not-disturb">
				<img class="avatar" mattooltipposition="left" aria-describedby="cdk-describedby-message-28" src="http://angular-material.fusetheme.com/assets/images/avatars/Tyson.jpg" style="touch-action: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
				
				<div class="status-icon do-not-disturb">
				</div>
			</div>
			<div class="contacts-list-item ng-star-inserted online">
				<img class="avatar" mattooltipposition="left" aria-describedby="cdk-describedby-message-29" src="http://angular-material.fusetheme.com/assets/images/avatars/Velazquez.jpg" style="touch-action: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
				
				<div class="status-icon online">
				</div>
			</div>
			<div class="ps__rail-x" style="left: 0px; bottom: 0px;">
				<div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;">
				</div>
			</div>
			<div class="ps__rail-y" style="top: 0px; height: 525px; right: 0px;">
				<div class="ps__thumb-y" tabindex="0" style="top: 0px; height: 192px;">
				</div>
			</div>
		</div>
		<div fxflex="1 1 auto" fxlayout="column" id="chat" style="flex-direction: column; box-sizing: border-box; display: flex; flex: 1 1 auto;">
			<div class="messages ps" fuseperfectscrollbar="" fxflex="1 1 auto" id="messages" style="flex: 1 1 auto; box-sizing: border-box;">
				
				
				
				
				<div class="no-contact-selected ng-star-inserted">
					<div class="no-contact-icon">
						<mat-icon class="s-128 fade-text mat-icon notranslate material-icons mat-icon-no-color" role="img" aria-hidden="true">chat</mat-icon>
					</div>
					<div class="no-contact secondary-text"> Select a contact to start a conversation. </div>
				</div>
				<div class="ps__rail-x" style="left: 0px; bottom: 0px;">
					<div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;">
					</div>
				</div>
				<div class="ps__rail-y" style="top: 0px; right: 0px;">
					<div class="ps__thumb-y" tabindex="0" style="top: 0px; height: 0px;">
					</div>
				</div>
			</div>
			
		</div>
	</div>

</div> --}}