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>