<div class="row">
	<form class="form-horizontal">
		<div class="form-group" style="width:30%;float:left;padding-left:15px;margin-bottom:0px;">
			<h1 class="page-header">
				What do users do?
			</h1>
        </div>
        
		<div class="form-group" style="width:55%;float:right;margin-bottom:0px;padding-right:3px;">
			
            <label class="col-md-6 control-label">
            	<select id="ddlPlatform">
							<option value="all" selected>All</option>
							<option value="android" >Android</option>
							<option value="ios" >iOS</option>
							
						</select>
            	Period</label>
            <div class="col-md-6">
                <div id="advance-daterange" class="btn btn-white" >
                    <span></span>
                    <i class="fa fa-angle-down fa-fw"></i>
                </div>
            </div>
        </div>
    </form>
</div>
<div class="row">
	<div class="col-md-3 col-sm-6 ui-sortable">	
		<div class="panel panel-warning ">
	        <div class="panel-heading">
	            <h4 class="panel-title p-heading">Active Users</h4>
	        </div>
	        <div class="panel-body" style="padding:0px;">
	            <div class="widget widget-stats" style="height:250px;border-top-left-radius:0px;border-top-right-radius:0px;margin-bottom:0px;color:#000">
	            	<table width="100%">
	            		<tbody>
	            			<tr>
		            			<td style="width:50%;font-size:25px;font-weight:600;"><span id="lblActiveUsers">0</span></td>
		            			<td style="font-size: 12px;width:15%;text-align:right;" id="tdSign">
									
								</td>
		            			<td id="lblChangeActiveUsers" style="font-size:18px;font-weight:400;width:35%;padding-left:5px;text-align:right"></td>
		            		</tr>
	            		</tbody>
	            	</table>
					<p style="font-size:15px;">
					</p>
					<table class="table table-striped" id="tblActiveUsers"> 
						<thead>
							<th style="text-align:left;padding:5px;"># of Sessions</th>
							<th style="text-align:right;padding:5px;">Users</th>
						</thead>
				       <tbody>                                                     
                            
                        </tbody>
                    </table>
	                <p></p>
				</div>
	        </div>
	    </div>
	</div>
	<div class="col-md-3 col-sm-6 ui-sortable">	
		<div class="panel panel-primary ">
	        <div class="panel-heading">
	            <h4 class="panel-title p-heading">Sessions</h4>
	        </div>
	        <div class="panel-body" style="padding:0px;">
	            <div class="widget widget-stats" style="height:250px;border-top-left-radius:0px;border-top-right-radius:0px;margin-bottom:0px;color:#000">
	            	<table width="100%">
	            		<tbody>
	            			<tr>
		            			<td style="width:50%;"><span id="lblSessions" style="font-size:25px;font-weight:600;">0</span></td>
		            			<td style="font-size: 12px;width:15%;text-align:right;" id="tdSignSessions">
									
								</td>
		            			<td id="lblChangeSessions" style="font-size:18px;font-weight:400;width:35%;padding-left:5px;text-align:right"></td>
		            		</tr>
	            		</tbody>
	            	</table>
					<p style="font-size:15px;">
					</p>
					<table class="table table-striped" id="tblSessions"> 
						<thead>
							<th style="text-align:left;padding:5px;">Time</th>
							<th style="text-align:right;padding:5px;"># of Sessions</th>
						</thead>
				       <tbody>                                                     
                            
                        </tbody>
                    </table>
	                <p></p>
				</div>
	        </div>
	    </div>
	</div>
	<div class="col-md-3 col-sm-6 ui-sortable">	
		<div class="panel panel-danger ">
	        <div class="panel-heading">
	            <h4 class="panel-title p-heading">Avg. Session Length</h4>
	        </div>
	        <div class="panel-body" style="padding:0px;">
	            <div class="widget widget-stats" style="height:250px;border-top-left-radius:0px;border-top-right-radius:0px;margin-bottom:0px;color:#000">
	            	<table width="100%">
	            		<tbody>
	            			<tr>
		            			<td style="width:50%;"><span id="lblAvgSessionLength" style="font-size:25px;font-weight:600;">0</span><span>mins</span></td>
		            			<td style="font-size: 12px;width:15%;text-align:right;" id="tdSignSessionLength">
									
								</td>
		            			<td id="lblChangeSessionLength" style="font-size:18px;font-weight:400;width:35%;padding-left:5px;text-align:right"></td>
		            		</tr>
	            		</tbody>
	            	</table>
					<p style="font-size:15px;">
					</p>
					<table class="table table-striped" id="tblAvgLength"> 
						<thead>
							<th style="text-align:left;padding:5px;">Sessions Length</th>
							<th style="text-align:right;padding:5px;">Users</th>
						</thead>
				       <tbody>                                                     
                            
                        </tbody>
                    </table>
	                <p></p>
				</div>
	        </div>
	    </div>
	</div>	
</div>

<div class="row">
	<div class="panel panel-info ">
        <div class="panel-heading">
            <h4 class="panel-title p-heading">Top Events</h4>
        </div>
        <div class="panel-body" style="padding:0px;">
        	<form class="form-horizontal">
				<div class="form-group" style="width:30%;float:right;margin-bottom:0px;padding-right:3px;padding-top:10px;">
			        <label class="col-md-3 control-label">Events</label>
			        <div class="col-md-9">
			            <select id="ddlEventList" multiple="multiple" style="width:200px;height:35px;" >
			                
			            </select>
			        </div>
			    </div>
			</form>
	
            	<canvas id="topEventsChart" height="250" width="400" ></canvas>
		
			
        </div>
    </div>
</div>

