Index: lams_central/conf/scss/_lams_variables.scss
===================================================================
diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -r32670937f259e2c8a712e1dd2cd6bb5731f466c9
--- lams_central/conf/scss/_lams_variables.scss	(.../_lams_variables.scss)	(revision 7475d08afc280b5e2e5ddf04e8bf35e3166aaf80)
+++ lams_central/conf/scss/_lams_variables.scss	(.../_lams_variables.scss)	(revision 32670937f259e2c8a712e1dd2cd6bb5731f466c9)
@@ -1,32 +1,35 @@
 // Import this file into all LAMS scss files to get the consistent definitions
-@import "_bootstrap-variables.scss";
+//@import "_material-kit.scss";
+@import "material-kit/variables.scss";
 @import "_mixins.scss";
-
+ 
 // LAMS SASS Global Variables
+$gray-base: $black; // changed name in Bootstrap 4
 $gray-light-mid:  lighten($gray-base, 86.5%); // #dddddd
 $gray-lightest:  lighten($gray-base, 96%); // #f5f5f5 or whitesmoke
-
+// 
 // Primary colour shades
-$brand-primary-darkest: #072B57; // used for main page offcanvas course list
-$brand-primary-darker: #164276;  // used for main page offcanvas course list
+// $brand-primary-darkest: #072B57; // used for main page offcanvas course list
+// $brand-primary-darker: #164276;  // used for main page offcanvas course list
 $brand-primary-mid: lighten($brand-primary, 12%); // #5798d0
 $brand-primary-light: lighten($brand-primary, 45%); // #dbe9f5
-$brand-primary-bright: #0E9AEF;   // used when we need a primary standout, such as the right hand bar indicating the current org in the offcanvas course list.
-
+// $brand-primary-bright: #0E9AEF;   // used when we need a primary standout, such as the right hand bar indicating the current org in the offcanvas course list.
+// 
 // a links
-$a-link-default: $brand-primary;
-$a-link-default-hover: $brand-primary-bright;
-$a-link-default-focus: $brand-primary-bright;
-
+// $a-link-default: $brand-primary;
+// $a-link-default-hover: $brand-primary-bright;
+// $a-link-default-focus: $brand-primary-bright;
+// 
 // Success Green shades
-$brand-success-light: lighten($brand-success, 25%); // #b5dfb5
-
+$brand-success-light: lighten($green-500, 25%); // #b5dfb5
+// 
 // Warning Yellow shades:
-$contrast-fade-start: #FCF0AD; // Used in Forum, Comment for highlighting replies
-$contrast-light: #F6EEBF; 
-
+$contrast-fade-start: lighten($orange-500, 50%); // Used in Forum, Comment for highlighting replies
+$contrast-light: lighten($orange-500,  20%); 
+// 
 // Borders in various colours
 // Grey or black
+$legend-border-color: #e5e5e5;
 $border-thin-black: thin solid black;
 $border-thin-dotted: thin dotted #AAAAAA; // admin, central, monitoring
 $border-thin-dashed: thin dashed #AAAAAA; // only used in admin
@@ -40,10 +43,10 @@
 // Red
 $border-thin-danger: thin solid $brand-danger;
 $border-medium-danger: 3px solid $brand-danger;
-
+// 
 // learner page box shadow
-$panel-box-shadow: 0 1px 1px rgba(8, 8, 8, 0.88);
-
+// $panel-box-shadow: 0 1px 1px rgba(8, 8, 8, 0.88);
+// 
 // progress bar
 $optional-activity-background: lighten($brand-primary-mid, 35%);
 $optional-activity-background-heading: lighten($brand-primary-mid, 5%); 
@@ -53,41 +56,41 @@
 $gate-activity-fill: #FF0000;
 $complex-activity-fill: #999999;
 $not-started-activity-fill: #009900;
-
+// 
 // Used just for main.css - the main page
-$main_default_link: #5A738E;
-$main_blue_light_highlight: #A6E5FD;
-$main_fav_org_link: #A7B1C2;
-$main_offcanvas_link: #2B5B95;
-$main_offcanvas_link_color: $body-bg;
-$main_offcanvas_background: $brand-primary-darker;
-$main_offcanvas_color: $gray-lighter;
-$main_offcanvas_logo_background: $brand-primary-darkest;
-$main_offcanvas_search_background: $brand-primary-darkest;
-$main_dropdown_border: #D9DEE4;
-$main_navbar_link: #515356;
-$main_singlelesson_hover_border: #9be0f9;
-$main_singlelesson_hover_background: #F0F8FF;
-
+// $main_default_link: #5A738E;
+// $main_blue_light_highlight: #A6E5FD;
+// $main_fav_org_link: #A7B1C2;
+// $main_offcanvas_link: #2B5B95;
+// $main_offcanvas_link_color: $body-bg;
+// $main_offcanvas_background: $brand-primary-darker;
+// $main_offcanvas_color: $gray-lighter;
+// $main_offcanvas_logo_background: $brand-primary-darkest;
+// $main_offcanvas_search_background: $brand-primary-darkest;
+// $main_dropdown_border: #D9DEE4;
+// $main_navbar_link: #515356;
+// $main_singlelesson_hover_border: #9be0f9;
+// $main_singlelesson_hover_background: #F0F8FF;
+// 
 // navbar login bar
 // $navbar-brand-login-color: #ffffff;
 // $navbar-login-background: $brand-primary;
-
+// 
 // panel header color
 // $panel-default-heading-background: lighten($brand-primary-bright, 20%);
-
+// 
 // Text & typography
 // $headings-default-color: $brand-primary-darker;
+// 
+// $stripes_background: url('/lams/images/css/light-fabric.jpg');
+// $url_css_directory: "/lams/images/css/";
+// $login_logo: "/lams/images/svg/lams_logo_black.svg";
+// $login_logo_size: auto 20px;
+// $login-logo_div_width: 100px;
+// 
+// $offcanvas_logo: "/lams/images/svg/lams_logo_white.svg";
+// $offcanvas_height: 31px;
 
-$stripes_background: url('/lams/images/css/light-fabric.jpg');
-$url_css_directory: "/lams/images/css/";
-$login_logo: "/lams/images/svg/lams_logo_black.svg";
-$login_logo_size: auto 20px;
-$login-logo_div_width: 100px;
-
-$offcanvas_logo: "/lams/images/svg/lams_logo_white.svg";
-$offcanvas_height: 31px;
-
 // generic portrait colors
 $portrait-color-0:#001f3f;
 $portrait-color-1:#FF851B;