<div class="row">
    
    <form class="form-horizontal">
        <div class="form-group" style="width:50%;float:left;padding-left:24px;margin-bottom:0px;">
            <!-- begin page-header -->
            <h1 class="page-header">
                Insides
            </h1> 
            <!-- end page-header -->
        </div>

        <div class="form-group" style="width:35%;float:right;padding-right:10px;margin-bottom:0px;">
                <label class="col-md-3 control-label"><span style="font-size: 14px;">Period</span></label>
                <div class="col-md-9">
                    <div id="advance-daterange" class="btn btn-white advance-daterange-class" >
                        <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"> 
    <div class="panel panel-warning ">
        <div class="panel-heading">
            <h4 class="panel-title p-heading" >Engagement</h4>
        </div>
        <div class="panel-body" style="padding:0px;">
            <div class="widget widget-stats " id="installHover" data-placement="top" data-trigger="hover" data-popover="true" data-html="true" data-toggle="tooltip" data-trigger="hover" data-container="body" data-title="" style="height:150px;border-top-left-radius:0px;border-top-right-radius:0px;margin-bottom:0px;color:#000">
                <table style="width:100%;">
                    <tbody>
                        <tr>
                            <td style="font-weight:600;">
                                <span><small class="big-font">30% of users not not engaged</small></span>
                            </td>
                        </tr>
                    </tbody>
                </table> 
                <table style="width:100%; margin-top:50px;">   
                    <tbody>                    
                        <tr>
                            <td style="font-size: 12px;text-align:center;">
                                <button type="button" class="btn btn-primary m-r-5 m-b-5" id="btnLaunch">Re-engage</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    </div>
    <div class="col-md-3 col-sm-6"> 
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h4 class="panel-title p-heading">Crashes</h4>
            </div>
            <div class="panel-body" style="padding:0px;">
                <div class="widget widget-stats " style="height:150px;border-top-left-radius:0px;border-top-right-radius:0px;margin-bottom:0px;color:#000">
                    <table style="width:100%;">
                        <tbody><tr>
                            <td style="width:60%;font-weight:600;">
                                <span ><small class="big-font">30</small></span>
                            </td>
                            <td style="font-size: 12px;width:40%;text-align:right;" id="previousUsers">
                                NA
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <table class="table table-striped" style="margin-top:4px;">                          
                        <tbody> 
                            <tr>
                                <td style="width:50%;padding:3px">Android</td>
                                <td style="width:50% ;text-align:right;padding:3px">20</td>
                            </tr>
                            <tr>
                                <td style="width:50%;padding:3px">iOs</td>
                                <td style="width:50%;text-align:right;padding:3px">10</td>
                            </tr>                            
                        </tbody>
                    </table>
                    <table style="width:100%;" style="margin-top: 24px;">
                        <tbody>
                        <tr>
                            <td style="font-weight:600; text-align:center;">
                                <button type="button" class="btn btn-primary m-r-5 m-b-5" id="btnLaunch">Upgrade Campaign</button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-sm-6"> 
        <div class="panel panel-danger">
            <div class="panel-heading">
                <h4 class="panel-title p-heading">Top Events</h4>
            </div>
            <div class="panel-body" style="padding:0px;">
                <div class="widget widget-stats " style="height:150px;border-top-left-radius:0px;border-top-right-radius:0px;margin-bottom:0px;color:#000;">
                    <table style="width:100%;">
                        <tbody><tr>
                            <td>
                                <span><small class="big-font" style="font-size:15px; font-weight:600;">Top 3 Gainers</small></span>
                            </td>
                            <td style="text-align:right;">
                                <span><small class="big-font" style="font-size:15px; font-weight:600;">Top 3 Loosers</small></span>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <table class="table table-striped">                          
                        <tbody> 
                            <tr>
                                <td style="width:50%;padding:3px">Category view</td>
                                <td style="width:50% ;text-align:right;padding:3px">Payment</td>
                            </tr>
                            <tr>
                                <td style="width:50%;padding:3px">Product view</td>
                                <td style="width:50%;text-align:right;padding:3px">Added to cart</td>
                            </tr>
                            <tr>
                                <td style="width:50%;padding:3px">Added to cart</td>
                                <td style="width:50%;text-align:right;padding:3px">Added to wishlist</td>
                            </tr>
                        </tbody>
                    </table>                    
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-sm-6"> 
        <div class="panel panel-info">
            <div class="panel-heading">
                <h4 class="panel-title p-heading">Competitive Inteligence</h4>
            </div>
            <div class="panel-body" style="padding:0px;">
                <div class="widget widget-stats " id="uninstallHover" data-placement="top" data-trigger="hover" data-popover="true" data-html="true" data-toggle="tooltip" data-trigger="hover" data-container="body" data-title="" style="height:150px;border-top-left-radius:0px;border-top-right-radius:0px;margin-bottom:0px;color:#000">
                    <table style="width:100%;">
                        <tbody><tr>
                            <td style="font-weight:600;">
                                <span><small class="big-font" style="font-size:15px; font-weight:600;">Top 3 Competing</small></span>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <table class="table table-striped" style="margin-bottom: 1px;">                          
                        <tbody> 
                            <tr>
                                <td style="padding:3px">Myntra</td>
                                <!-- <td style="width:50% ;text-align:right;padding:3px">
                                    <button type="button" style="border-radius:5px;" class="btn-primary m-r-2 m-b-2">Run Campaign</button>
                                </td> -->
                            </tr>
                            <tr>
                                <td style="padding:3px">Flipkart</td>
                                <!-- <td style="width:50% ;text-align:right;padding:3px">
                                    <button type="button" style="border-radius:5px;" class="btn-primary m-r-2 m-b-2">Run Campaign</button>
                                </td> -->
                            </tr>
                            <tr>
                                <td style="padding:3px">Snapdeal</td>
                                <!-- <td style="width:50% ;text-align:right;padding:3px">
                                    <button type="button" style="border-radius:5px;" class="btn-primary m-r-2 m-b-2">Run Campaign</button>
                                </td> -->
                            </tr>
                            
                        </tbody>
                    </table>
                    <table style="width:100%;">
                        <tbody>
                            <tr>
                                <td style="font-weight:600; text-align:center;">
                                    <button type="button" class="btn btn-primary m-r-5 m-b-5" id="btnLaunch">Run Campaign</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    
    <div class="col-md-12 ui-sortable">
        <div class="panel panel-info" data-sortable-id="chart-js-2">
            <div class="panel-heading">
                <div class="btn-group pull-right">   
                </div> 
                <h4 class="panel-title p-heading" >Custom Query</h4>
            </div>
            <div class="panel-body">    
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <!-- <label class="col-md-3 control-label">Query</label> -->
                            <div class="col-md-9">
                                <textarea class="form-control" placeholder="Query" rows="5"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <!-- <label class="col-md-3 control-label">Query</label> -->
                            <div class="col-md-9">
                                Collections
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group" style="text-align:left; margin:10px 15px;">
                            <button type="button" class="btn btn-primary m-r-5 m-b-5" id="btnLaunch">Run</button>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <!-- <label class="col-md-3 control-label">Query</label> -->
                           <!--  <div class="col-md-9">
                                Collections
                            </div> -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    
    <div class="col-md-12 ui-sortable">
        <div class="panel panel-info" data-sortable-id="chart-js-2">
            <div class="panel-heading">
                <div class="btn-group pull-right">   
                </div> 
                <h4 class="panel-title p-heading" >Result</h4>
            </div>
            <div class="panel-body">    
                <div class="row">
                </div>
            </div>
        </div>
    </div>
</div>