diff --git a/frontend/src/assets/scss/core/_mixins.scss b/frontend/src/assets/scss/core/_mixins.scss
index 63761efd6..60a966f6b 100644
--- a/frontend/src/assets/scss/core/_mixins.scss
+++ b/frontend/src/assets/scss/core/_mixins.scss
@@ -1,16 +1,16 @@
-@import "mixins/utilities";
-@import "mixins/breakpoints";
-@import "mixins/animations";
+// @import "mixins/utilities";
+// @import "mixins/breakpoints";
+// @import "mixins/animations";
 @import "mixins/type";
-@import "mixins/layout";
-@import "mixins/drawer";
-@import "mixins/forms";
-@import "mixins/buttons";
-@import "mixins/hover";
-@import "mixins/navs";
-@import "mixins/colored-shadows";
-@import "mixins/navbar-colors";
-@import "mixins/alert";
-@import "mixins/sidebar-color";
-@import "mixins/variables";
-@import "mixins/vendor-prefixes";
+// @import "mixins/layout";
+// @import "mixins/drawer";
+// @import "mixins/forms";
+// @import "mixins/buttons";
+// @import "mixins/hover";
+// @import "mixins/navs";
+// @import "mixins/colored-shadows";
+// @import "mixins/navbar-colors";
+// @import "mixins/alert";
+// @import "mixins/sidebar-color";
+// @import "mixins/variables";
+// @import "mixins/vendor-prefixes";
diff --git a/frontend/src/assets/scss/core/_variables.scss b/frontend/src/assets/scss/core/_variables.scss
index 433cf9b3c..644d0c32a 100644
--- a/frontend/src/assets/scss/core/_variables.scss
+++ b/frontend/src/assets/scss/core/_variables.scss
@@ -1,34 +1,34 @@
-@import "variables/colors"; //mchouliara todo check if we can remove
-@import "variables/shadow";
+// @import "variables/colors"; //mchouliara todo check if we can remove
+// @import "variables/shadow";
 
 @import "variables/bootstrap-material-design-base";
 
 // Customized BS variables
-@import "variables/custom-forms";
-@import "variables/spacing";
-@import "variables/body";
-@import "variables/brand";
-@import "variables/buttons";
-@import "variables/card";
-@import "variables/code";
-@import "variables/dropdown";
-@import "variables/forms";
-@import "variables/list-group";
-@import "variables/nav";
-@import "variables/pagination";
-@import "variables/state";
-@import "variables/tables";
-@import "variables/tooltip";
+// @import "variables/custom-forms";
+// @import "variables/spacing";
+// @import "variables/body";
+// @import "variables/brand";
+// @import "variables/buttons";
+// @import "variables/card";
+// @import "variables/code";
+// @import "variables/dropdown";
+// @import "variables/forms";
+// @import "variables/list-group";
+// @import "variables/nav";
+// @import "variables/pagination";
+// @import "variables/state";
+// @import "variables/tables";
+// @import "variables/tooltip";
 @import "variables/type";
-@import "variables/modals";
+// @import "variables/modals";
 
 // import their vars after customization for use below
 $enable-flex: true; // fully adopt flexbox layouts
 $enable-shadows: true; // enable shadows, set to false to turn off shadows
 
 
-@import "variables/menu";
-@import "variables/drawer";
-@import "variables/snackbar";
+// @import "variables/menu";
+// @import "variables/drawer";
+// @import "variables/snackbar";
 
 @import "variables/bootstrap-material-design";
diff --git a/frontend/src/assets/scss/core/variables/_bootstrap-material-design-base.scss b/frontend/src/assets/scss/core/variables/_bootstrap-material-design-base.scss
index d6d8bdc00..0ac871f9f 100644
--- a/frontend/src/assets/scss/core/variables/_bootstrap-material-design-base.scss
+++ b/frontend/src/assets/scss/core/variables/_bootstrap-material-design-base.scss
@@ -1,17 +1,17 @@
-$gray-lighter: rgba($black, 0.12) !default;
+// $gray-lighter: rgba($black, 0.12) !default;
 $gray-light: #999 !default;
 $gray-alpha: .54 !default;
 $gray: #555 !default; // spec color
-$gray-dark: rgba($black, 0.87) !default; // used for text color - others use grey-600 which is considerably lighter
+// $gray-dark: rgba($black, 0.87) !default; // used for text color - others use grey-600 which is considerably lighter
 
 $bmd-font-weight-base: 400;
 
 // wondering if any of these could still be refactored out, but are definitely in use.
-$bmd-inverse: rgba($white, 1) !default;
-$bmd-inverse-light: rgba($white, 0.84) !default;
-$bmd-inverse-lighter: rgba($white, 0.54) !default;
+// $bmd-inverse: rgba($white, 1) !default;
+// $bmd-inverse-light: rgba($white, 0.84) !default;
+// $bmd-inverse-lighter: rgba($white, 0.54) !default;
 
-$bmd-label-color: $gray-color !default;
+// $bmd-label-color: $gray-color !default;
 $bmd-label-color-inner-focus: $gray !default; // e.g. radio label or text-muted not a control-label which is primary
 
 $border-radius-base: 3px !default;
@@ -23,11 +23,11 @@ $border-radius-extreme: 30px !default;
 
 // Typography elements
 $mdb-font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif !default;
-$mdb-text-color-light:  $white !default;
-$mdb-text-color-light-hex: $white !default; // for contrast function in inverse
-$mdb-text-color-primary: unquote("rgba(#{$rgb-black}, 0.87)") !default;
-$mdb-text-color-primary-hex: $black !default; // for contrast function in inverse
+// $mdb-text-color-light:  $white !default;
+// $mdb-text-color-light-hex: $white !default; // for contrast function in inverse
+// $mdb-text-color-primary: unquote("rgba(#{$rgb-black}, 0.87)") !default;
+// $mdb-text-color-primary-hex: $black !default; // for contrast function in inverse
 $icon-color: rgba(0,0,0,0.5) !default;
 
-$mdb-label-color: unquote("rgba(#{$rgb-black}, 0.26)") !default;
-$mdb-label-color-toggle-focus: unquote("rgba(#{$rgb-black}, .54)") !default;
+// $mdb-label-color: unquote("rgba(#{$rgb-black}, 0.26)") !default;
+// $mdb-label-color-toggle-focus: unquote("rgba(#{$rgb-black}, .54)") !default;
diff --git a/frontend/src/assets/scss/core/variables/_bootstrap-material-design.scss b/frontend/src/assets/scss/core/variables/_bootstrap-material-design.scss
index a4c2462ba..fccfacc4b 100644
--- a/frontend/src/assets/scss/core/variables/_bootstrap-material-design.scss
+++ b/frontend/src/assets/scss/core/variables/_bootstrap-material-design.scss
@@ -1,15 +1,15 @@
-$bmd-label-color-focus: $brand-primary !default;
-$bmd-invalid-underline: $brand-danger !default;
-$bmd-readonly-underline: $input-border-color !default;
+// $bmd-label-color-focus: $brand-primary !default;
+// $bmd-invalid-underline: $brand-danger !default;
+// $bmd-readonly-underline: $input-border-color !default;
 
 //---
 // verified in use with refactoring to v4
 
 //---
 //-- unverified below here
-$bmd-brand-inverse: $indigo !default;
+// $bmd-brand-inverse: $indigo !default;
 // Typography elements FIXME: review to see if we actually need these
-$icon-color: rgba($black, 0.5) !default;
+// $icon-color: rgba($black, 0.5) !default;
 
 // --------------------
 // inputs
@@ -48,18 +48,18 @@ $margin-base:               1.071rem !default;
 
 
 // Checkboxes
-$bmd-checkbox-size: 1.25rem !default;
-$bmd-checkbox-animation-ripple: 500ms !default;
-$bmd-checkbox-animation-check: 0.3s !default;
-$bmd-checkbox-checked-color: $white !default;
-$bmd-checkbox-label-padding: .3125rem !default; // 5px
+// $bmd-checkbox-size: 1.25rem !default;
+// $bmd-checkbox-animation-ripple: 500ms !default;
+// $bmd-checkbox-animation-check: 0.3s !default;
+// $bmd-checkbox-checked-color: $white !default;
+// $bmd-checkbox-label-padding: .3125rem !default; // 5px
 
-$bmd-checkbox-border-size: .0625rem !default;
-$bmd-checkbox-border-color: $bmd-label-color-inner-focus !default;
-$bmd-checkbox-border-color-disabled: $gray-lighter !default; //#bdbdbd !default;
+// $bmd-checkbox-border-size: .0625rem !default;
+// $bmd-checkbox-border-color: $bmd-label-color-inner-focus !default;
+// $bmd-checkbox-border-color-disabled: $gray-lighter !default; //#bdbdbd !default;
 
 // Toggle
-$mdb-toggle-label-color: $mdb-label-color !default;
+// $mdb-toggle-label-color: $mdb-label-color !default;
 
 // Variables for datetimepicker //
 $padding-default-vertical:     10px !default;
@@ -94,15 +94,15 @@ $bmd-switch-width: 2.125rem !default; // 34px
 $bmd-switch-height: .875rem !default; // 14px
 $bmd-switch-handle-size: 1.25rem !default; // 20px (was 18px)
 
-$bmd-switch-handle-checked-bg: $brand-primary !default;
-$bmd-switch-handle-unchecked-bg: #f1f1f1 !default;
-$bmd-switch-handle-disabled-bg: #bdbdbd !default;
-$bmd-switch-unchecked-bg: $gray-lighter !default;
-$bmd-switch-checked-bg: desaturate(
-  lighten($bmd-switch-handle-checked-bg, 28%),
-  32%
-); // kind of magic recipe
-$bmd-switch-disabled-bg: $gray-lighter !default;
+// $bmd-switch-handle-checked-bg: $brand-primary !default;
+// $bmd-switch-handle-unchecked-bg: #f1f1f1 !default;
+// $bmd-switch-handle-disabled-bg: #bdbdbd !default;
+// $bmd-switch-unchecked-bg: $gray-lighter !default;
+// $bmd-switch-checked-bg: desaturate(
+//   lighten($bmd-switch-handle-checked-bg, 28%),
+//   32%
+// ); // kind of magic recipe
+// $bmd-switch-disabled-bg: $gray-lighter !default;
 
 // Popovers and Popups
 $bmd-popover-background: rgba(101, 101, 101, 0.9) !default;
@@ -114,36 +114,36 @@ $bmd-radio-size: 1rem !default;
 $bmd-radio-ripple-offset: 1em !default;
 $bmd-radio-label-padding: .3125rem !default; // 5px
 
-$bmd-radio-color-off: $bmd-label-color-inner-focus !default;
-$bmd-radio-color-on: $brand-primary !default;
-$bmd-radio-color-disabled: $gray-lighter; //
-$bmd-radio-color-disabled-inverse: rgba(
-  $white,
-  0.30
-); // dark theme spec: Disabled: #FFFFFF, Opacity  30%
+// $bmd-radio-color-off: $bmd-label-color-inner-focus !default;
+// $bmd-radio-color-on: $brand-primary !default;
+// $bmd-radio-color-disabled: $gray-lighter; //
+// $bmd-radio-color-disabled-inverse: rgba(
+//   $white,
+//   0.30
+// ); // dark theme spec: Disabled: #FFFFFF, Opacity  30%
 
-$white-color: #fff !default;
-$navbar-color: #555 !default;
-$pills-color: $navbar-color !default;
-$black-color: #3C4858 !default;
-$link-color: $brand-primary;
-$white-transparent: rgba($white-color, .8);
-$transparent: transparent;
+// $white-color: #fff !default;
+// $navbar-color: #555 !default;
+// $pills-color: $navbar-color !default;
+// $black-color: #3C4858 !default;
+// $link-color: $brand-primary;
+// $white-transparent: rgba($white-color, .8);
+// $transparent: transparent;
 
 //Popovers
-$popover-color: $navbar-color !default;
+// $popover-color: $navbar-color !default;
 
 //Tooltips
 $tooltip-font-size: 0.75rem !default;
 
 // Background colors
-$bg-primary: $brand-primary;
-$bg-danger: $brand-danger;
-$bg-warning: $brand-warning;
-$bg-info: $brand-info;
-$bg-rose: $brand-rose;
-$bg-success: $brand-success;
-$bg-dark: $grey-900;
+// $bg-primary: $brand-primary;
+// $bg-danger: $brand-danger;
+// $bg-warning: $brand-warning;
+// $bg-info: $brand-info;
+// $bg-rose: $brand-rose;
+// $bg-success: $brand-success;
+// $bg-dark: $grey-900;
 
 //Paddings
 $padding-general-y: 0.625rem !default;
@@ -217,18 +217,18 @@ $social-behance: 			#1769ff;
 
 // Variables for checkboxes
 
-$mdb-label-color: unquote("rgba(#{$rgb-black}, 0.26)") !default;
-$mdb-label-color-toggle-focus: unquote("rgba(#{$rgb-black}, .54)") !default;
+// $mdb-label-color: unquote("rgba(#{$rgb-black}, 0.26)") !default;
+// $mdb-label-color-toggle-focus: unquote("rgba(#{$rgb-black}, .54)") !default;
 
 $mdb-checkbox-size: 20px !default;
 $mdb-checkbox-animation-ripple: 500ms !default;
 $mdb-checkbox-animation-check: 0.3s !default;
-$mdb-checkbox-checked-color: $brand-primary !default;
+// $mdb-checkbox-checked-color: $brand-primary !default;
 
-$mdb-checkbox-label-color: $mdb-label-color !default;
-$mdb-checkbox-border-color: $mdb-label-color-toggle-focus !default;
+// $mdb-checkbox-label-color: $mdb-label-color !default;
+// $mdb-checkbox-border-color: $mdb-label-color-toggle-focus !default;
 
-// Radio:
-$mdb-radio-label-color: $mdb-label-color !default;
-$mdb-radio-color-off: $mdb-label-color-toggle-focus !default;
-$mdb-radio-color-on: $brand-primary !default;
+// // Radio:
+// $mdb-radio-label-color: $mdb-label-color !default;
+// $mdb-radio-color-off: $mdb-label-color-toggle-focus !default;
+// $mdb-radio-color-on: $brand-primary !default;