<div class="np-card">
	<div class="np-card-container">
	  <div class="np-card-content np-card-content-vertical np-card-padding">
	    <h3 class="np-card-content-title">
	      Enrolled Courses
	    </h3>
	    <div class="np-card-content-footer">
	      <div class="np-card-content-progress np-button-color">
		{{ courses.enrolled.size }}
   		</div>
	</div>
    </div>
   </div>
<!-- <div class="np-card">	
	  <div class="np-card-container">
	  <div class="np-card-content np-card-content-vertical np-card-padding">
		<h3 class="np-card-content-title">
		  Groups
		</h3>
		<div class="np-card-content-footer">
		  <div class="np-card-content-progress np-button-color">
		    {{ current_person.groups.size }}
		</div>
	</div>
     </div>
   </div>
<div class="np-card">		
	<div class="np-card-container">
	   <div class="np-card-content np-card-content-vertical np-card-padding">
		<h3 class="np-card-content-title">
		  Learning Paths Enrolled in
		</h3>
		<div class="np-card-content-footer">
		  <div class="np-card-content-progress np-button-color">
		    {{ learning_paths.enrolled.size }}
		  </div>
		</div>
	     </div>
	   </div>
<div class="np-card">	
	<div class="np-card-container">
	    <div class="np-card-content np-card-content-vertical np-card-padding">
		<h3 class="np-card-content-title">
		  Learning Paths Available
		</h3>
		<div class="np-card-content-footer">
		  <div class="np-card-content-progress np-button-color">
		    {{ learning_paths.available.size }}
		</div>
	</div>
     </div>
   </div>
</div>
</div> -->
</div>
</div>
<style>

 .np-card-content-title {
	 text-align: center !important;
 }

 .np-card-content-footer {
	 justify-content: center !important;
 }

 .np-card-content-progress {
	 text-decoration: teal;
	 font-size: 15pt;
	 font-weight: 300; 
 }

</style>