Index: lams_central/web/css/_main_base.scss
===================================================================
diff -u -r5c7818cc3492c49fc3252b61f8981b4a969c4f1c -rda4e5570d9720a4cb67c6d2b8a81e1e1bf35e1e5
--- lams_central/web/css/_main_base.scss	(.../_main_base.scss)	(revision 5c7818cc3492c49fc3252b61f8981b4a969c4f1c)
+++ lams_central/web/css/_main_base.scss	(.../_main_base.scss)	(revision da4e5570d9720a4cb67c6d2b8a81e1e1bf35e1e5)
@@ -362,3 +362,217 @@
 .modal-dialog {
     max-width: initial !important;
 }
+
+@media (max-width: 810px) { 
+	.cards tbody {
+		text-align: center;
+	}
+}
+.cards tbody tr {
+   display: inline-block;
+   width: 23rem;
+   height: auto;
+   margin: 0.7rem;
+   border-radius: .3rem;
+   box-shadow: 0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.25);
+}
+
+.cards tbody td {
+   display: block;
+}
+
+.cards thead {
+   display: none;
+}
+
+.table.cards td, .table.cards th {
+    border-top: 0; /* Overwrite bootstrap rule */
+}
+
+.dataTables_filter {
+	margin-top: 10px;
+	float: left;
+	font-size: .875rem;
+	padding-left: .5rem;
+}
+div.dataTables_wrapper div.dataTables_paginate ul.pagination {
+	justify-content: center!important;
+}
+.page-item.active .page-link {
+	background-color: lightgrey !important;
+    border-color: #dee2e6;
+}
+
+.lesson-image {
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+}
+.cards .lesson-image {
+	min-height: 170px;
+	border-top-left-radius: .3rem;
+    border-top-right-radius: .3em;
+}
+table:not(.cards) .lesson-image {
+    background-image: none;
+}
+
+.lesson-image-1 {
+	background-image: url(/lams/css/images/trianglify_1.png);
+}
+.user-monitor .lesson-image-1{
+	background-image: linear-gradient( rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) ), url(/lams/css/images/trianglify_1.png);
+}
+.lesson-image-2 {
+	background-image: url(/lams/css/images/trianglify_2.png);
+}
+.user-monitor .lesson-image-2{
+	background-image: linear-gradient( rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) ), url(/lams/css/images/trianglify_2.png);
+}
+.lesson-image-3 {
+	background-image: url(/lams/css/images/trianglify_3.png);
+}
+.user-monitor .lesson-image-3{
+	background-image: linear-gradient( rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) ), url(/lams/css/images/trianglify_3.png);
+}
+.lesson-image-4 {
+	background-image: url(/lams/css/images/trianglify_4.png);
+}
+.user-monitor .lesson-image-4{
+	background-image: linear-gradient( rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) ), url(/lams/css/images/trianglify_4.png);
+}
+.lesson-image-5 {
+	background-image: url(/lams/css/images/trianglify_5.png);
+}
+.user-monitor .lesson-image-5{
+	background-image: linear-gradient( rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) ), url(/lams/css/images/trianglify_5.png);
+}
+.lesson-image-6 {
+	background-image: url(/lams/css/images/trianglify_6.png);
+}
+.user-monitor .lesson-image-6{
+	background-image: linear-gradient( rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) ), url(/lams/css/images/trianglify_6.png);
+}
+.lesson-image-7 {
+	background-image: url(/lams/css/images/trianglify_7.png);
+}
+.user-monitor .lesson-image-7{
+	background-image: linear-gradient( rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) ), url(/lams/css/images/trianglify_7.png);
+}
+.lesson-image-8 {
+	background-image: url(/lams/css/images/trianglify_8.png);
+}
+.user-monitor .lesson-image-8{
+	background-image: linear-gradient( rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) ), url(/lams/css/images/trianglify_8.png);
+}
+.lesson-image-9 {
+	background-image: url(/lams/css/images/trianglify_9.png);
+}
+.user-monitor .lesson-image-9{
+	background-image: linear-gradient( rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) ), url(/lams/css/images/trianglify_9.png);
+}
+.lesson-image-10 {
+	background-image: url(/lams/css/images/trianglify_10.png);
+}
+.user-monitor .lesson-image-10{
+	background-image: linear-gradient( rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) ), url(/lams/css/images/trianglify_10.png);
+}
+
+table:not(.cards).user-monitor tr {
+	height: 100px !important;
+}
+
+.auxiliary-links-menu {
+	float: right;
+	margin: -3px 0 10px 7px;
+}
+.auxiliary-links-menu button{
+	background-color: rgba(0,0,0,.03);
+}
+.card-view-label{
+	display: none;
+}
+
+.learners-count {
+	float: left;
+}
+.cards .learners-count {
+	display: block;
+}
+
+.lesson-name {
+	font-size: 1rem;
+	max-height: 170px;
+    overflow: hidden;
+}
+
+.cards .learners-count {
+    padding: .75rem;
+}
+
+.cards td.row-reorder, .cards .auxiliary-links {
+	display: none;
+}
+
+td.row-reorder {
+	width: 20px;
+	padding-left: .25rem
+}
+
+.buttons-td {
+    height: 20px;
+}
+.cards .buttons-td{
+    background-color: #fff!important;
+}
+table:not(.cards) .buttons-td{
+	width: 170px;
+	padding: 0;
+}
+
+td.chart-td {
+	padding: 0;
+}
+table:not(.cards) .chart-td {
+	width: 60px;
+}
+
+.chart-holder {
+	width: 150px;
+}
+
+.cards .chart-holder {
+	float: right;
+    margin-top: -90px;
+    margin-right: -20px;    
+}
+
+/* Learner's card*/
+.cards:not(.user-monitor) .lesson-name {
+	max-height: 150px;
+}
+.cards:not(.user-monitor) .lesson-image {
+	display: grid;
+}
+.learner-bottom-card {
+	align-self: flex-end;
+}
+table:not(.cards) .learner-bottom-card {
+	padding-top: 10px;
+}
+.progress-bar span {
+	color: #000;
+    position: absolute;
+    margin-left: 6px;
+}
+.progress {
+	height: 1.3rem;
+}
+table:not(.cards) .progress {
+	width: 50%;
+}
+time.timeago {
+    opacity: .7;
+    font-size: 80%;
+    font-weight: 400;
+}
Index: lams_central/web/css/defaultHTML_main.scss
===================================================================
diff -u -r6e03312f31e3651711bc99047d26d9e51bac4933 -rda4e5570d9720a4cb67c6d2b8a81e1e1bf35e1e5
--- lams_central/web/css/defaultHTML_main.scss	(.../defaultHTML_main.scss)	(revision 6e03312f31e3651711bc99047d26d9e51bac4933)
+++ lams_central/web/css/defaultHTML_main.scss	(.../defaultHTML_main.scss)	(revision da4e5570d9720a4cb67c6d2b8a81e1e1bf35e1e5)
@@ -1,4 +1,3 @@
 @import "_dialogs.scss";
 @import "_lams_variables.scss";
-@import "_main_base.scss";
-/*TOP HEADER*/
\ No newline at end of file
+@import "_main_base.scss";
\ No newline at end of file
Index: lams_central/web/main.jsp
===================================================================
diff -u -r5c7818cc3492c49fc3252b61f8981b4a969c4f1c -rda4e5570d9720a4cb67c6d2b8a81e1e1bf35e1e5
--- lams_central/web/main.jsp	(.../main.jsp)	(revision 5c7818cc3492c49fc3252b61f8981b4a969c4f1c)
+++ lams_central/web/main.jsp	(.../main.jsp)	(revision da4e5570d9720a4cb67c6d2b8a81e1e1bf35e1e5)
@@ -14,223 +14,7 @@
 	<link rel="stylesheet" href="/lams/css/jquery-ui-bootstrap-theme.css" type="text/css" media="screen">
 	<link rel="stylesheet" href="/lams/css/bootstrap-tourist.min.css" type="text/css" media="screen">
 	<link rel="stylesheet" href="/lams/css/datatables.css">
-	<style>
 
-@media (max-width: 810px) { 
-	.cards tbody {
-		text-align: center;
-	}
-}
-.cards tbody tr {
-   display: inline-block;
-   width: 23rem;
-   height: auto;
-   margin: 0.7rem;
-   border-radius: .3rem;
-   box-shadow: 0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.25);
-}
-
-.cards tbody td {
-   display: block;
-}
-
-.cards thead {
-   display: none;
-}
-
-.table.cards td, .table.cards th {
-    border-top: 0; /* Overwrite bootstrap rule */
-}
-
-.dataTables_filter {
-	margin-top: 10px;
-	float: left;
-	font-size: .875rem;
-	padding-left: .5rem;
-}
-div.dataTables_wrapper div.dataTables_paginate ul.pagination {
-	justify-content: center!important;
-}
-.page-item.active .page-link {
-	background-color: lightgrey !important;
-    border-color: #dee2e6;
-}
-
-.lesson-image {
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: center center;
-}
-.cards .lesson-image {
-	min-height: 170px;
-	border-top-left-radius: .3rem;
-    border-top-right-radius: .3em;
-}
-table:not(.cards) .lesson-image {
-    background-image: none;
-}
-
-.lesson-image-1 {
-	background-image: url(css/images/trianglify_1.png);
-}
-.user-monitor .lesson-image-1{
-	background-image: linear-gradient( rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) ), url(css/images/trianglify_1.png);
-}
-.lesson-image-2 {
-	background-image: url(css/images/trianglify_2.png);
-}
-.user-monitor .lesson-image-2{
-	background-image: linear-gradient( rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) ), url(css/images/trianglify_2.png);
-}
-.lesson-image-3 {
-	background-image: url(css/images/trianglify_3.png);
-}
-.user-monitor .lesson-image-3{
-	background-image: linear-gradient( rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) ), url(css/images/trianglify_3.png);
-}
-.lesson-image-4 {
-	background-image: url(css/images/trianglify_4.png);
-}
-.user-monitor .lesson-image-4{
-	background-image: linear-gradient( rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) ), url(css/images/trianglify_4.png);
-}
-.lesson-image-5 {
-	background-image: url(css/images/trianglify_5.png);
-}
-.user-monitor .lesson-image-5{
-	background-image: linear-gradient( rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) ), url(css/images/trianglify_5.png);
-}
-.lesson-image-6 {
-	background-image: url(css/images/trianglify_6.png);
-}
-.user-monitor .lesson-image-6{
-	background-image: linear-gradient( rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) ), url(css/images/trianglify_6.png);
-}
-.lesson-image-7 {
-	background-image: url(css/images/trianglify_7.png);
-}
-.user-monitor .lesson-image-7{
-	background-image: linear-gradient( rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) ), url(css/images/trianglify_7.png);
-}
-.lesson-image-8 {
-	background-image: url(css/images/trianglify_8.png);
-}
-.user-monitor .lesson-image-8{
-	background-image: linear-gradient( rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) ), url(css/images/trianglify_8.png);
-}
-.lesson-image-9 {
-	background-image: url(css/images/trianglify_9.png);
-}
-.user-monitor .lesson-image-9{
-	background-image: linear-gradient( rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) ), url(css/images/trianglify_9.png);
-}
-.lesson-image-10 {
-	background-image: url(css/images/trianglify_10.png);
-}
-.user-monitor .lesson-image-10{
-	background-image: linear-gradient( rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) ), url(css/images/trianglify_10.png);
-}
-
-table:not(.cards).user-monitor tr {
-	height: 100px !important;
-}
-
-.auxiliary-links-menu {
-	float: right;
-	margin: -3px 0 10px 7px;
-}
-.auxiliary-links-menu button{
-	background-color: rgba(0,0,0,.03);
-}
-.card-view-label{
-	display: none;
-}
-
-.learners-count {
-	float: left;
-}
-.cards .learners-count {
-	display: block;
-}
-
-.lesson-name {
-	font-size: .9rem;
-	max-height: 170px;
-    overflow: hidden;
-}
-
-.cards .learners-count {
-    padding: .75rem;
-}
-
-.cards td.row-reorder, .cards .auxiliary-links {
-	display: none;
-}
-
-td.row-reorder {
-	width: 20px;
-	padding-left: .25rem
-}
-
-.buttons-td {
-    height: 20px;
-}
-.cards .buttons-td{
-    background-color: #fff!important;
-}
-table:not(.cards) .buttons-td{
-	width: 170px;
-	padding: 0;
-}
-
-td.chart-td {
-	padding: 0;
-}
-table:not(.cards) .chart-td {
-	width: 60px;
-}
-
-.chart-holder {
-	width: 150px;
-}
-
-.cards .chart-holder {
-	float: right;
-    margin-top: -90px;
-    margin-right: -20px;    
-}
-
-/* Learner's card*/
-.cards:not(.user-monitor) .lesson-name {
-	max-height: 150px;
-}
-.cards:not(.user-monitor) .lesson-image {
-	display: grid;
-}
-.learner-bottom-card {
-	align-self: flex-end;
-}
-table:not(.cards) .learner-bottom-card {
-	padding-top: 10px;
-}
-.progress-bar span {
-	color: #000;
-    position: absolute;
-    margin-left: 6px;
-}
-.progress {
-	height: 1.3rem;
-}
-table:not(.cards) .progress {
-	width: 50%;
-}
-time.timeago {
-    opacity: .7;
-    font-size: 80%;
-    font-weight: 400;
-}
-	</style>
-
 	<script type="text/javascript" src="${lams}includes/javascript/getSysInfo.js"></script>
 	<script type="text/javascript" src="${lams}loadVars.jsp"></script>
 	<script type="text/javascript" src="${lams}includes/javascript/openUrls.js"></script>