refactor: styling changes
diff --git a/erpnext/www/lms/content.html b/erpnext/www/lms/content.html
index 92cfec2..bdbacc1 100644
--- a/erpnext/www/lms/content.html
+++ b/erpnext/www/lms/content.html
@@ -3,58 +3,67 @@
 
 {% block head_include %}
 	<style>
-		div.card-hero-img {
-			height: 220px;
-			background-size: cover;
-			background-repeat: no-repeat;
-			background-position: center;
-			background-color: rgb(250, 251, 252);
+		section {
+			padding: 5rem 0 5rem 0;
+		}
+		.plyr--video .plyr__control.plyr__tab-focus,
+		.plyr--video .plyr__control:hover,
+		.plyr--video .plyr__control[aria-expanded='true'] {
+			 background: #5e64ff !important;
 		}
 
-		.card-image-wrapper {
-			display: flex;
-			overflow: hidden;
-			height: 220px;
-			background-color: rgb(250, 251, 252);
-			justify-content: center;
+		.plyr__control--overlaid:focus,
+		.plyr__control--overlaid:hover {
+		  background: #5e64ff !important;
 		}
 
-		.image-body {
-			align-self: center;
-			color: #d1d8dd;
-			font-size: 24px;
-			font-weight: 600;
-			line-height: 1;
-			padding: 20px;
+		.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]::before {
+    		background: #5e64ff !important;
+		}
+
+		.plyr__menu__container
+		.plyr__control[role='menuitemradio'][aria-checked='true']::before {
+		  background: #5e64ff;
+		}
+		.plyr--full-ui input[type='range'] {
+		  color: #5e64ff !important;
+		}
+
+		.plyr__control--overlaid {
+			background: rgba(94, 100, 255, 0.8) !important;
 		}
 	</style>
 	<link rel="stylesheet" href="https://cdn.plyr.io/3.5.3/plyr.css" />
 {% endblock %}
 
-{% macro navigation() %}
-<div class="row">
-		<div class="col-md-7">
-			<h1>{{ content.name }} <span class="small text-muted">({{ position + 1 }}/{{length}})</span></h1>
-		</div>
-		<div id="nav-buttons" class="col-md-5 text-right" {{ 'hidden' if content_type=='Quiz' }}>
-			{% if previous %}
-				<a href="/lms/content?program={{ program }}&course={{ course }}&topic={{ topic }}&type={{ previous.content_type }}&content={{ previous.content }}" class='btn text-muted' style="box-shadow: none;">Previous</a>
-			{% else %}
-				<a href="/lms/course?name={{ course }}&program={{ program }}" class='btn text-muted' style="box-shadow: none;">Back to Course</a>
-			{% endif %}
-
-			{% if next %}
-				<button id="nextButton" onclick="handle('/lms/content?program={{ program }}&course={{ course }}&topic={{ topic }}&type={{ next.content_type }}&content={{ next.content }}')" class='btn btn-primary' disabled="true">Next</button>
-			{% else %}
-				<button id="nextButton" onclick="handle('/lms/course?name={{ course }}&program={{ program }}')" class='btn btn-primary' disabled="true">Finish Topic</button>
-			{% endif %}
-		</div>
+{% macro title() %}
+	<div class="mb-3">
+		<a href="#" class="text-muted">
+				Back to Course
+		</a>
 	</div>
+	<div>
+		<h1>{{ content.name }} <span class="small text-muted">({{ position + 1 }}/{{length}})</span></h1>
+	</div>
+{% endmacro %}
+
+{% macro navigation() %}
+		{% if previous %}
+			<a href="/lms/content?program={{ program }}&course={{ course }}&topic={{ topic }}&type={{ previous.content_type }}&content={{ previous.content }}" class='btn text-muted' style="box-shadow: none;">Previous</a>
+		{% else %}
+			<a href="/lms/course?name={{ course }}&program={{ program }}" class='btn text-muted' style="box-shadow: none;">Back to Course</a>
+		{% endif %}
+
+		{% if next %}
+			<button id="nextButton" onclick="handle('/lms/content?program={{ program }}&course={{ course }}&topic={{ topic }}&type={{ next.content_type }}&content={{ next.content }}')" class='btn btn-primary' disabled="true">Next</button>
+		{% else %}
+			<button id="nextButton" onclick="handle('/lms/course?name={{ course }}&program={{ program }}')" class='btn btn-primary' disabled="true">Finish Topic</button>
+		{% endif %}
 {% endmacro %}
 
 {% macro video() %}
 <div class="mb-5">
-	{{ navigation() }}
+	{{ title() }}
 	<div class="text-muted">
 		{% if content.duration %}
 			{{ content.duration }} Mins
@@ -77,7 +86,7 @@
 
 {% macro article() %}
 <div class="mb-5">
-	{{ navigation() }}
+	{{ title() }}
 	<div class="text-muted">
 		{% if content.author or content.publish_date %}
 			Published
@@ -97,11 +106,7 @@
 
 {% macro quiz() %}
 <div class="mb-5">
-	<div class="row">
-		<div class="col-md-7">
-			<h1>{{ content.name }} <span class="small text-muted">({{ position + 1 }}/{{length}})</span></h1>
-		</div>
-	</div>
+	{{ title() }}
 </div>
 <div id="quiz-wrapper">
 </div>
@@ -118,6 +123,9 @@
 			{% elif content_type=='Quiz' %}
 				{{ quiz() }}
 			{% endif %}
+			<div class="pull-right" {{ 'hidden' if content_type=='Quiz'}}>
+				{{ navigation() }}
+			</div>
 		</div>
 	</div>
 </section>