<style>

 #container{
  min-width: 65em !important;
}

</style>
  <!-- Modal -->
  <div class="modal fade" id="funnelModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Save Funnel</h5>
        </div>
        <div class="modal-body">
         <div class="form-group">
             <label for="">Funnel Name</label>
             <input type="text" ng-blur="validateFunnel()" id="funnelname" class="form-control">
             <label for="">Funnel Description</label>
             <textarea name=""  id="funneldesc" cols="7" rows="3" class="form-control"></textarea>
         </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-sm btn-primary" ng-click="cancelFunnel()" data-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-sm btn-primary" ng-click="createFunnel()">Save</button>
        </div>
      </div>
    </div>
  </div>
<!----Modal ends -->
<div class="panel panel-info remove-padding" data-sortable-id="chart-js-6">
    <div class="panel-heading">
                    <h4 class="panel-title p-heading" >View Journeys</h4>
                    <a style=" margin-top: -20px;float:right; font-weight: 700;" href="{{PANEL_URL}}/dashboard?action=insideapp#/journey/table" class="panel-title p-heading" > X </a>
    </div>
    
    <div style="margin-left: 8px;" class="JourneyName">{{jn.journeyName}}</div>
    <br/><br/>     
     <div class="row" >
        <div class="col-md-8"  style="position: relative; margin-top: 10px;">
            <div ng-if="isAvailable=='1'"><p>There is no available Journey for given start and end event</p>
            </div>
                <div ng-show="isAvailable=='2'"  id="container" style="min-width: 65em; margin-top:4px" ng-style="{'height':jouneyHeight}"></div>
        </div>
        <div class="col-md-4" ngIf="pointArray.length"  style="position: sticky;top: 50px;">
            <table class="table table-striped" id="journey_table" style="display: none;">
                <thead>
                  <tr>
                    <th>Name</th>
                    <th>Value</th>
                    <th>Percentage</th>
                  </tr>
                </thead>
                <tbody> 
                </tbody>
              </table>
        </div>
    </div>
    

</div>
<style type="text/css">


#container {
    min-width: 80em;
    height: 70em;
    margin: 0;
    padding: 0;
    margin-top: -50px;
}
.remove-padding{
    margin-top:-15px;
    margin-left: -15px;
    margin-right: -15px;
} 
.label{
    padding-top: 0.8rem;
}
.JourneyName{
    font-size: 2rem;
}
</style>
    