<!--height:420px-->
     

<div class="row">   
    <h2 style="margin-left:10px;margin-top:-5px;margin-bottom:10px;">Usage</h2>
    <div class="col-md-6 col-sm-6 ui-sortable">
        <div class="panel panel-warning ">
            <div class="panel-heading" style="display: flex; justify-content: space-between; align-items: center;" >
                <h4 class="panel-title p-heading">Users</h4>
                <a  ng-click="toggleUsersChart()" type="button" style="text-decoration: none; height: 22px;
                text-align: center;
                padding-top: 0px;
                margin-top: -8px; color: #fff; font-size: 20px; cursor: pointer; margin-right: 10px;"><i ng-if="userChart" class="fa fa-2x fa-table"></i><i class="fa fa-2x fa-pie-chart" ng-if="!userChart" style=""></i></a>
            </div>
            <div class="panel-body" style="padding:0px;">
                <!--height:250px-->
                <div class="widget widget-stats" style="border-top-left-radius:0px;border-top-right-radius:0px;margin-bottom:0px;color:#000; height: 300px;">
                    <table width="100%">
                        <tbody>
                            <tr>
                                <td style="width:45%;font-size:25px;">
                                    <span id="lblActiveUsers"></span>
                                </td>
                                <td style="font-size:18px;font-weight:400;width:55%;padding-left:5px;text-align:right">
                                    <div id="tdSign" style="display:inline-block;">
                                    </div>
                                    <div id="lblChangeActiveUsers" style="display:inline-block;"></div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <p style="font-size:15px;">
                    </p>
                    <div id="users_table"  style="height: 180px; display: none;">
                    <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>
                   </div>
                   <div id="users_chart" style="height: 180px;"></div>
                    <p></p>
                </div>

            </div>
        </div>
    </div>
    <div class="col-md-6 col-sm-6 ui-sortable">
        <div class="panel panel-danger ">
            <div class="panel-heading" style="display: flex; justify-content: space-between; align-items: center;">
                <h4 class="panel-title p-heading">Avg. Session Length</h4>
                <a ng-click="toggleAvgSession()" type="button" style="text-decoration: none; height: 22px;
                text-align: center;
                padding-top: 0px;
                margin-top: -8px; color: #fff; font-size: 20px; cursor: pointer; margin-right: 10px;"><i ng-if="avgSessionChart" class="fa fa-2x fa-table"></i><i class="fa fa-2x fa-pie-chart" ng-if="!avgSessionChart" style=""></i></a>
            </div>
            <div class="panel-body" style="padding:0px;">
                <div class="widget widget-stats" style="border-top-left-radius:0px;border-top-right-radius:0px;margin-bottom:0px;color:#000;height: 300px; ">
                    <table width="100%">
                        <tbody>
                            <tr>
                                <td style="width:50%;">
                                    <span id="lblAvgSessionLength" style="font-size:25px;"></span>
                                    <span>mins,</span>
                                    <span id="lblAvgSessionLengthSec" style="font-size:25px;"></span>
                                    <span>secs</span>
                                </td>
                                <td style="font-size:18px;font-weight:400;width:50%;padding-left:5px;text-align:right">
                                    <div id="tdSignSessionLength" style="display:inline-block;">
                                    </div>
                                    <div id="lblChangeSessionLength" style="display:inline-block;"></div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <p style="font-size:15px;">
                    </p>
                    <div id="averageSessionTable" style="display: none; height: 180px;">
                    <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>
                </div>
                <div id="averageSessionChart" style="height: 180px;">

                </div>
                    <p></p>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-12 col-sm-12 ui-sortable">
        <div class="panel panel-primary ">
            <div class="panel-heading" style="display: flex; justify-content: space-between; align-items: center;">
                <h4 class="panel-title p-heading">Sessions</h4>
                <a  ng-click="toggleSessionChart()" type="button" style="text-decoration: none; height: 22px;
                text-align: center;
                padding-top: 0px;
                margin-top: -8px; color: #fff; font-size: 20px; cursor: pointer; margin-right: 10px;"><i ng-if="sessionChart" class="fa fa-2x fa-table"></i><i class="fa fa-2x fa-pie-chart" ng-if="!sessionChart" style=""></i></a>
            </div>
            <div class="panel-body" style="padding:0px;">
                <div class="widget widget-stats" style="border-top-left-radius:0px;border-top-right-radius:0px;margin-bottom:0px;color:#000;">
                    <table width="100%">
                        <tbody>
                            <tr>
                                <td style="width:45%;">
                                    <span id="lblSessions" style="font-size:25px;"></span>
                                </td>
                                <td style="font-size:18px;font-weight:400;width:55%;padding-left:5px;text-align:right">
                                    <div id="tdSignSessions" style="display:inline-block;">
                                    </div>
                                    <div id="lblChangeSessions" style="display:inline-block;"></div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <p style="font-size:15px;">
                    </p>
                    <div id="sessionTable" style="display:none; height: 180px; ">
                    <table class="table table-striped" id="tblSessions">
                        <thead>
                            <th style="text-align:left;padding:5px;">Time</th>
                            <th style="text-align:right;padding:5px;">Home</th>
                            <th style="text-align:right;padding:5px;">Office</th>
                            <th style="text-align:right;padding:5px;">Other</th>
                            <th style="text-align:right;padding:5px;">Total</th>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                    </div> 
                    <div id="sessionChart" style="height: 200px;"></div>
                    <p></p>
                </div>
            </div>
        </div>
    </div>
   
</div>