 <div class="col-md-12">
  
  <div class="d-flex right_btn_style" style="justify-content: flex-end;">
  <div class="flex-div m-5 cust_btn" style="float: right;">
            <div class="custom-probtn-project custom-probtn">
                        <a href="#">
            
                        <span class="view-procolor view-procolor-pro" style="box-shadow: 0 4px 8px 0 #3c1d89; ">Setup Gradebook</span>
                        </a> 
                        <span class="font-size-16"><i class="fa fa-gear" aria-hidden="true" style="color:#00b85b; padding: 4px 10px;" ></i></span>
                    </div>
        </div>


          <div class="flex-div m-5 cust_btn" style="float: right;">
            <div class="custom-probtn-project custom-probtn">
                        <a href="#">
            
                        <span class="view-procolor view-procolor-pro" style="box-shadow: 0 4px 8px 0 #3c1d89; ">Enroll Participant</span>
                        </a> 
                        <span class="font-size-16"><i class="fa fa-plus" aria-hidden="true" style="color:#00b85b; padding: 4px 10px" ></i></span>
                    </div>
        </div>
        </div>
        <button class="btn btn-outline-primary back_btn"> back </button>
  <a class="mt-1" href="#"><span class="arw-btn"><i class="fa fa-arrow-left" size="28" aria-hidden="true"></i></span></a>
        <div class="row">
       
        
            <div class="col-md-8 pl-0 pr-0">
                <div class="col-sm-12 analytics-card mob-analytics-card">
                    <div class="card-title">
                        <div class="d-flex justify-content-between">
                            <div class="pl-5 m-5">
                               
                                <span class="header-text" style="color:gray;"> Lab Name </span>
                            </div>
                             <div class="text-center mt-20 mb-20">
                                <span class="view-details-btn"><a href="#" style="font-size:14px;">View
                                       Lab Details</a></span>
                            </div>
                         
                        </div>
                       
                    <p class="sub-text px-10" style="color: #000; font-size: 20px;">Laboratory Number_Programming.</p>
                        <div class="d-flex px-5 m-5" style="justify-content:space-between; ">
                             <span class="header-text" style="color:gray; "> Competency </span>
                             <span class="header-text" style="color:gray; padding-right: 50px;">Is this a Test lab </span>
                        </div>
                         <div class="d-flex px-5 m-5" style="justify-content:space-between;">
                        <p class="sub-text px-5" style=" color: #000; font-size: 20px;">Beginner/Intermediate/Advanced</p>
                        <p class="sub-text"  style="padding-right: 80px; font-size: 20px; color: #000;">Yes/No</p>
                        </div>

                          <div class="d-flex pl-5 m-5" style="flex-direction:column; ">
                             <span class="header-text" style="color:gray; "> Summary </span>
                             <p class="sub-text px-5" style="color:black; font-size: 16px;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, </p>
                        </div>
                    </div>
                
                    <div class="bg-white p-20 ">
                        {{! <div style="height:344px; text-align:center; margin-top:50px;">No Data Found</div> }}
                    </div>
                    <div id="line-chart"></div>
                 
                </div>
                <div class="analytics-card mob-analytics-card mt-20 p-0" style="padding:0px !important; height: 452px;">
                    <div class="card-title">
                        <div class="d-flex justify-content-between mob-d-block" style="padding:10px;">
                            <div style="margin-top:14px;">
                                <i class="fa fa-bar-chart icon-color" aria-hidden="true"></i>
                                <span class="header-text"> Grade Report </span>
                            </div>
                            <div class="text-center mt-20 mb-20">
                                <div class="flex-div m-5" style="float: right;">
                                    <div class="custom-probtn-project custom-probtn">
                                                <a href="#">
                                    
                                                <span class="view-procolor view-procolor-pro" style="box-shadow: 0 4px 8px 0 #3c1d89; padding: 6px 10px 5px 10px;">Grade History</span>
                                                </a> 
                                                <span class="font-size-16"><i class="fa fa-arrow-right" aria-hidden="true" style="color:gray; padding: 4px 10px" ></i></span>
                                            </div>
                                </div>
                            </div>
                        </div>
                     <div class="d-flex cust_sort" >
                                <p style="font-weight: bold;">First Name</p>
                            <select class="form-control form-control-sm col-md-1 col-sm-1">
                            <option>All</option>
                            <option>test</option>
                            <option>text</option>
                            </select>
                                <p style="font-weight: bold;">Surname</p>
                                 <select class="form-control form-control-sm col-md-1 col-sm-1">
                                    <option>All</option>
                                    <option>test</option>
                                    <option>text</option>
                                    </select>
                       </div>
                        <div class="text-right" >
                            <p class="mb-0 mr-20">Total participants: 65</p>
                        </div>
                        <!-- Tab panes -->
                        <div class="tab-content">
                            <div id="home" class="container tab-pane active "><br>
                                <div class="mob-overflow-scroll" style="width:100%;overflow-y: scroll;height: 260px;">
                                <table class="table">
      <thead>
        <tr class="table-header" style="padding: 20px 14px 5px 14px;">
          <th style=" background-color: #00b85b !important;padding: 15px 15px !important; ">Sl. No.</th>
          <th style=" background-color: #00b85b !important;padding: 15px 15px !important;">First Name / Surname</th>
          <th style=" background-color: #00b85b !important;padding: 15px 15px !important;">Email Address</th>
          <th style=" background-color: #00b85b !important;padding: 15px 15px !important;">Lab Total(Letter)</th>
          <th style=" background-color: #00b85b !important;padding: 15px 15px !important;">Action</th>

        </tr>
      </thead>
      <tbody>
        <tr class="custom-tr">
         
          <td>
          1
          </td>
          <td>Course Name</td>
          <td>Lab Type</td>
          <td>no. of enrolled users</td>
          <td><a href="" class="mt-10 cust_drop" id="dropdownMenuReference" data-toggle="dropdown" aria-hidden="true"><span class="down-btn" ><i class="fa fa-angle-double-down" > </i></span></a>
        
    <div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left" aria-labelledby="dropdownMenuReference">
      <a class="dropdown-item" href="#">Enter/Edit Grade </a>
      <a class="dropdown-item" href="#">User Report</a>
    
    </div>
		  
          </td>
          
        </tr>
        <tr class="custom-tr">
          <td>2</td>
          <td>
          Course Name
          </td>
          <td>Lab Type</td>
          <td>no. of enrolled users</td>
         
          <td><a href="" class="mt-10 arrow_dir" id="dropdownMenuReference" data-toggle="dropdown" aria-hidden="true"><span class="down-btn" ><i class="fa fa-angle-double-down"  > </i></span></a>
        
            <div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left" aria-labelledby="dropdownMenuReference">
                <a class="dropdown-item" href="#">Enter/Edit Grade </a>
                 <a class="dropdown-item" href="#">User Report</a>
            </div></td>
        </tr>
        <tr class="custom-tr">
          <td>3</td>
          <td>
          Course Name
          </td>
          <td>Lab Type</td>
          <td>no. of enrolled users</td>
          
          <td>
         <a href="" class="mt-10" id="dropdownMenuReference" data-toggle="dropdown" aria-hidden="true"><span class="down-btn" ><i class="fa fa-angle-double-down" > </i></span></a>
        
            <div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left" aria-labelledby="dropdownMenuReference">
               <a class="dropdown-item" href="#">Enter/Edit Grade </a>
                     <a class="dropdown-item" href="#">User Report</a>
            </div>
          </td>
        </tr>
        <tr class="custom-tr">
          <td>4</td>
          <td>
          Course Name
          </td>
          <td>Lab Type</td>
          <td>no. of enrolled users</td>
        
          <td><a href="" class="mt-10" id="dropdownMenuReference" data-toggle="dropdown" aria-hidden="true"><span class="down-btn" ><i class="fa fa-angle-double-down" > </i></span></a>
        
            <div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left" aria-labelledby="dropdownMenuReference">
               <a class="dropdown-item" href="#">Enter/Edit Grade </a>
                 <a class="dropdown-item" href="#">User Report</a>
            </div>
          </td>
        </tr>
        <tr class="custom-tr">
          <td>5</td>
          <td>
           Course Name
          </td>
          <td>Lab Type</td>
          <td>no. of enrolled users</td>
       
          <td><a href="" class="mt-10" id="dropdownMenuReference" data-toggle="dropdown" aria-hidden="true"><span class="down-btn" ><i class="fa fa-angle-double-down" > </i></span></a>
        
               <div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left" aria-labelledby="dropdownMenuReference">
                   <a class="dropdown-item" href="#">Enter/Edit Grade </a>
                    <a class="dropdown-item" href="#">User Report</a>
               </div></td>
        </tr>
      </tbody>
    </table>
                                </div>
                            </div>
                            
                        </div>
                    </div>
                </div>
               
            </div>
            <div class="col-md-4 mob-mt-20 pr-0 mob-pl-0">
              
                <div class="col-sm-12 myproject-card assignedteam-card announcement-card my-20 ">
                    <div class="card-title trending-tabs " style="margin-bottom: 4px;">
                     <i class="fa fa-edit" style="font-size:30px;color: #00b85b; float:right; padding-right: 15px; cursor:pointer;"></i>
                      <h3 class="px-5"> Lab scaling</h3>
                     
                       <div class="d-flex" style="justify-content: space-around;">
                                <p style="color:gray;">Mark Weightage</p>
                                <p style="color:gray;">Max Grade</p>
                       </div>
                        <div class="d-flex" style="justify-content: space-around;">
                                <p>100.00</p>
                                <p>100.00</p>
                       </div>
                         <div class="d-flex m-5" style="justify-content: space-around;">
                                <p style="color:gray;">Highest Grade Letter</p>
                                <p style="color:gray;">Lowest Grade Lettere</p>
                       </div>
                        <div class="d-flex" style="justify-content: space-around;">
                                <p>A</p>
                                <p>B</p>
                       </div>
                       <span class="view-details-btn" ><a href="#" style="float:right; margin-bottom: 30px; padding: 0px 20px;font-size: 16px">View
                                        All</a></span>
                    </div>
                </div>
                 <div class="col-sm-12 myproject-card assignedteam-card announcement-card mb-20">
                    <div class="card-title trending-tabs " style="margin-bottom: 4px;">
                    <i class="fa fa-plus" style="font-size:20px;color: #00b85b; float:right; padding-right:10px;cursor:pointer;"></i>
                       <h3 class="px-5"> Lab grading</h3>

                         <div class="d-flex p-30" style="flex-direction: column;">
                                <p style="color:gray; font-size: 16px;">Standard Scale</p>
                                <p style="font-size: 20px;">Separate and Connected ways of Knowing, Mostly Separate knowing, Separate and Connected, Mostly Connected knowing</p>
                       </div>
                        <div class="d-flex" style="flex-direction: column; padding: 10px 30px;" >
                                <p style="color:gray; font-size: 16px;">Custom Scale</p>
                                <p style="font-size: 20px;">Default Competence Scale, Not yet Competent, Competent</p>
                       </div>
                        <span class="view-details-btn " ><a href="" style="float:right; margin-bottom: 30px; padding: 0px 20px; font-size: 16px;">View
                                        All</a></span>
                    </div>
                   
                </div>
               
              
               
            </div>
        </div>
    </div>

<style>
thead {
  position: sticky;
  top: 0;
}
.dropdown-item {
   color: #00b85b;
}


.rotate {
  -webkit-animation: spin1 .5s linear;
  -moz-animation: spin1 .5s linear;
  -o-animation: spin1 .5s linear;
  -ms-animation: spin1 .5s linear;
  animation: spin1 .5s linear;

  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}


@-webkit-keyframes spin1 {
  0% {
    -webkit-transform: rotate(0deg); 
    }
  100% {
    -webkit-transform: rotate(180deg); 
    }
}

@-moz-keyframes spin1 {
  0% {
    -moz-transform: rotate(0deg); 
    }
  100% {
    -moz-transform: rotate(180deg); 
    }
}

@-ms-keyframes spin1 {
  0% {
    -ms-transform: rotate(0deg); 
    }
  100% {
    -ms-transform: rotate(180deg); 
    }
}

@-o-keyframes spin1 {
  0% {
    -o-transform: rotate(0deg); 
    }
  100% {
    -o-transform: rotate(180deg); 
    }
}

@-keyframes spin1 {
  0% {
    transform: rotate(0deg); 
    }
  100% {
    transform: rotate(180deg); 
    }
}

</style>


<script>

    $(".fa-angle-double-down").click(function() {
      
      $(this).toggleClass("fa-angle-double-up");
    })
      $(".fa-angle-double-down").click(function() {
      
      $(this).toggleClass("rotate");
    })
</script>

       
      