<style>
.chats li {
  margin-top: 0px;
  margin-bottom: 10px;
  padding-top: 0px;
  padding-bottom: 0px;
  font-size: 13px;
}

li.date {
  margin-top: 15px !important;
}

li.unread {
  margin-top: 15px !important;
}
</style>
<div class="row">
	<div class="col-md-12">
		<div class="row">
			<div class="col-md-3 col-sm-12" style="margin-bottom:10px">
				<div class="row">
					<div class="col-md-12">
						<div class="portlet light portlet-fit full-height-content full-height-content-scrollable bordered">
							<div class="portlet-title">
								<div class="caption">
									<span class="caption-subject bold font-purple-plum uppercase"> Order List </span>
								</div>
								<div class="inputs">
									<div class="row">
										<div class="col-md-12">
											<div class="col-md-9">
												<div class="portlet-input input-inline input-small" style="margin-bottom:10px">
													<div class="input-icon right">
														<i class="icon-magnifier"></i>
														<input type="text" class="form-control input-circle" placeholder="search...">
													</div>
												</div>
											</div>
											<div class="col-md-3">
												<div class="btn-group" style="width:100%">
													<a href="" class="btn btn-circle btn-icon-only btn-default" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
													<span class="fa fa-filter"></span>
													</a>
													<ul class="dropdown-menu pull-right">
														<li>
															<a href="javascript:;">
															<span class="label label-sm label-success"> Active </span>
															</a>
														</li>
														<li>
															<a href="javascript:;">
															<span class="label label-sm label-success"> Closed </span>
															</a>
														</li>
														<li class="active">
															<a href="javascript:;">
															<span class="label label-sm label-success"> Pending </span>
															</a>
														</li>
														<li class="active">
															<a href="javascript:;">
															<span class="label label-sm label-success"> Cancel </span>
															</a>
														</li>
													</ul>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="portlet-body">
								<div class="full-height-content-body">
									<div id="tree_1" class="tree-demo">
										<ul>
											<li>
												<a href="/messenger/general">General <?php //echo (getGeneralUnread()>0?'<span class="badge badge-danger unread">'.getGeneralUnread().'</span>':""); ?></a>
											</li>
											<li data-jstree='{"opened": true }'>
												Order List <span class='badge badge-danger'><?php echo getOrderUnread(); ?></span>
												<ul>
													<?php echo getRoomLists(); ?>
												</ul>
											</li>
											<li data-jstree='{ "selected" : true }'>
												<a href="/messenger/help">Help <?php //echo (getHelpUnread()>0?'<span class="badge badge-danger unread">'.getHelpUnread().'</span>':""); ?></a>
											</li>
										</ul>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-9 col-sm-12">
				<div class="portlet light portlet-fit full-height-content full-height-content-scrollable bordered">
					<div class="portlet-title">
						<div class="caption">
							<i class=" icon-layers font-dark"></i>
							<span class="caption-subject font-dark bold uppercase">Help</span>
						</div>
					</div>
					<div class="portlet-body" id="chats" data-id="<?php echo $_SESSION['user_id']; ?>" data-picture="<?php echo showImage($_SESSION["user_id"]); ?>" data-first_name="<?php echo ($_SESSION['role'] == 0 ? $_SESSION['username'] : getProfileData($_SESSION["user_id"], "first_name")); ?>">
						<div class="full-height-content-body scroller" style="position: relative">
							<ul class="chats" id="general_content" style="margin-bottom:50px"></ul>
						</div>
						<div style="position: absolute; bottom: 0; width:calc(100% - 70px)" class="chat-form">
							<div class="input-cont">
								<input class="form-control" type="text" placeholder="Type a message here..." /> 
							</div>
							<div class="btn-cont">
								<span class="arrow"> </span>
								<a id="submit" class="btn blue icn-only submit">
								<i class="fa fa-check icon-white"></i>
								</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>