
<div class="content-wrapper" style="min-height: 946px;">

    <section class="content">
      <div class="box box-primary">  
      	<div class="row">
	        <div class="col-md-4">
	          <div class="chatleftside">
	          	<div class="custom-search-input">
               <div class="input-group col-md-11">
                  <input type="text" class="search-query form-control" placeholder="Search" />
                  <button class="btn btn-default" type="button"><i class="fa fa-search"></i></button>
                   <button type="button" class="chataddbtn"><i class="fa fa-plus"></i></button>
               </div>
            </div>
	          	<div class="chatfrientlist">
		          	<ul>
		          		<li class="active">
		          			<img src="http://192.168.1.81/repos/smartschool/uploads/student_images/no_image.png" alt="">
	                        <div class="chat-body">
	                        	<h4>Ankit Jain</h4>
	                        	<p>You just got LITT up, Mike. You just got LITT up, Mike. You just got LITT up, Mike.</p>
	                        </div>
		          		</li>
		          		<li>
		          			<img src="http://192.168.1.81/repos/smartschool/uploads/student_images/no_image.png" alt="">
	                        <div class="chat-body">
	                        	<h4>Ankit Jain</h4>
	                        	<p>You just got LITT up, Mike. You just got LITT up, Mike. You just got LITT up, Mike.</p>
	                        </div>
		          		</li>
		          		<li>
		          			<img src="http://192.168.1.81/repos/smartschool/uploads/student_images/no_image.png" alt="">
	                        <div class="chat-body">
	                        	<h4>Ankit Jain</h4>
	                        	<p>You just got LITT up, Mike. You just got LITT up, Mike. You just got LITT up, Mike.</p>
	                        </div>
		          		</li>
		          		<li>
		          			<img src="http://192.168.1.81/repos/smartschool/uploads/student_images/no_image.png" alt="">
	                        <div class="chat-body">
	                        	<h4>Ankit Jain</h4>
	                        	<p>You just got LITT up, Mike. You just got LITT up, Mike. You just got LITT up, Mike.</p>
	                        </div>
		          		</li>
		          		<li>
		          			<img src="http://192.168.1.81/repos/smartschool/uploads/student_images/no_image.png" alt="">
	                        <div class="chat-body">
	                        	<h4>Ankit Jain</h4>
	                        	<p>You just got LITT up, Mike. You just got LITT up, Mike. You just got LITT up, Mike.</p>
	                        </div>
		          		</li>
		          		<li>
		          			<img src="http://192.168.1.81/repos/smartschool/uploads/student_images/no_image.png" alt="">
	                        <div class="chat-body">
	                        	<h4>Ankit Jain</h4>
	                        	<p>You just got LITT up, Mike. You just got LITT up, Mike. You just got LITT up, Mike.</p>
	                        </div>
		          		</li>
		          		<li>
		          			<img src="http://192.168.1.81/repos/smartschool/uploads/student_images/no_image.png" alt="">
	                        <div class="chat-body">
	                        	<h4>Ankit Jain</h4>
	                        	<p>You just got LITT up, Mike. You just got LITT up, Mike. You just got LITT up, Mike.</p>
	                        </div>
		          		</li>
		          		<li>
		          			<img src="http://192.168.1.81/repos/smartschool/uploads/student_images/no_image.png" alt="">
	                        <div class="chat-body">
	                        	<h4>Ankit Jain</h4>
	                        	<p>You just got LITT up, Mike. You just got LITT up, Mike. You just got LITT up, Mike.</p>
	                        </div>
		          		</li>
		          	</ul>
		        </div><!--./chatfrientlist-->  	
	          </div><!--./chatleftside-->      
	        </div><!--./col-md-4--> 
	        <div class="col-md-8">
	        	<div class="chatrightside">
	               <div class="chat-header">
					  <img src="http://emilcarlsson.se/assets/harveyspecter.png" alt="">
					  <div class="chat-headerbody">
					     <h4>Harvey Specter</h4>
					     <p>You just got LITT up, Mike.</p>
					   </div>   
					 <div class="social-media">
						<i class="fa fa-search fa-lg"></i>
						<i class="fa fa-paperclip fa-lg" ></i>
						<i class="fa fa-bars fa-lg"></i>
					</div>
				   </div><!--./chat-header-->
				   <div class="mobile" id="parentDiv">
      <div class="chat-w">
      
<ul class="chatmsg">

  <li>
    <div class="bubble2">I am looking for product manager roles in Bangalore.</div>
  </li>
  <li>
    <div class="bubble">Sure. Any industry you prefer?</div>
  </li>
  <li>
    <div class="bubble2">The role at Amazon looks interesting.</div>
  </li><li>
    <div class="bubble">Yes, that surely is a good match.</div>
  </li>
  <li>
    <div class="bubble2">I had a couple of questions though.</div>
  </li><li>
    <div class="bubble">Do you want to have a quick call?</div>
  </li>
  <li>
    <div class="bubble2">How about 8pm tonight?</div>
  </li>
  <li>
    <div class="bubble2">How about 8pm tonight?</div>
  </li>
  <li>
    <div class="bubble">Perfect. Micro Calendar Invite.</div>
  </li>
</ul>

      </div>
      
    </div>
    <div class="row reply">
        <div class="col-sm-1 col-xs-1 reply-emojis">
          <i class="fa fa-smile-o"></i>
        </div>
        <div class="col-sm-10 col-xs-9 reply-main">
          <textarea class="form-control" rows="1" id="comment"></textarea>
        </div>

        <div class="col-sm-1 col-xs-1 reply-send">
          <i class="fa fa-send fa-2x" aria-hidden="true"></i>
        </div>
      </div>
				</div><!--./chatrightside-->   
	        </div><!--./col-md-8--> 
	    </div><!--./row-->    
      </div><!--./box box-primary-->  
    </section>
</div>    

<script type="text/javascript">
	var objDiv = document.getElementById("parentDiv");
objDiv.scrollTop = objDiv.scrollHeight;
</script>
 