diff --git a/bigbluebutton-html5/imports/api/users-settings/server/methods/addUserSettings.js b/bigbluebutton-html5/imports/api/users-settings/server/methods/addUserSettings.js
index debe0a6d59a2e80aa316a4ffce88e99832408a90..a662ee6bd4ae489ec36b6a806750b5777798842f 100644
--- a/bigbluebutton-html5/imports/api/users-settings/server/methods/addUserSettings.js
+++ b/bigbluebutton-html5/imports/api/users-settings/server/methods/addUserSettings.js
@@ -25,12 +25,16 @@ export default function addUserSettings(credentials, meetingId, userId, settings
       'enableScreensharing',
       'enableVideo',
       'enableVideoStats',
+      'autoShareWebcam',
       // WHITEBOARD
       'multiUserPenOnly',
       'presenterTools',
       'multiUserTools',
+      // SKINNING/THEMMING
+      'customStyle',
+      'customStyleUrl',
+      // LAYOUT
       'autoSwapLayout',
-      'autoShareWebcam',
       'hidePresentation',
     ];
     if (!handledHTML5Parameters.includes(key)) {
diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/styles.scss b/bigbluebutton-html5/imports/ui/components/actions-bar/styles.scss
index 4aa485dd4231b76a85cab34a97918feac94412f2..feaefe627cf7449eef9f16c906398b2be9dba544 100644
--- a/bigbluebutton-html5/imports/ui/components/actions-bar/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/actions-bar/styles.scss
@@ -13,10 +13,10 @@
   justify-content: center;
 
   > * {
-    margin: 0 $sm-padding-x;
+    margin: 0 var(--sm-padding-x);
 
     @include mq($small-only) {
-      margin: 0 $sm-padding-y;
+      margin: 0 var(--sm-padding-y);
     }
   }
 }
@@ -24,8 +24,8 @@
 .left {
   position: absolute;
   @include mq($small-only) {
-    bottom: $sm-padding-x;
-    left: $sm-padding-x;
+    bottom: var(--sm-padding-x);
+    left: var(--sm-padding-x);
   }
 }
 
diff --git a/bigbluebutton-html5/imports/ui/components/app/component.jsx b/bigbluebutton-html5/imports/ui/components/app/component.jsx
index 73629dc401076cc8ecd49c15cb782656775d4349..aa914222c17c329a70659d5192f0a28e011bda0b 100755
--- a/bigbluebutton-html5/imports/ui/components/app/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/app/component.jsx
@@ -313,7 +313,11 @@ class App extends Component {
   }
 
   render() {
-    const { userListIsOpen } = this.props;
+
+    const {
+      params, userListIsOpen, customStyle, customStyleUrl,
+    } = this.props;
+
     const { enableResize } = this.state;
 
     return (
@@ -335,7 +339,9 @@ class App extends Component {
         <ModalContainer />
         <AudioContainer />
         <ToastContainer />
-        <ChatAlertContainer />
+        <ChatAlertContainer currentChatID={params.chatID} />
+        { customStyleUrl ? <link rel="stylesheet" type="text/css" href={customStyleUrl} /> : null }
+        { customStyle ? <link rel="stylesheet" type="text/css" href={`data:text/css;charset=UTF-8,${encodeURIComponent(customStyle)}`} /> : null }
       </main>
     );
   }
diff --git a/bigbluebutton-html5/imports/ui/components/app/container.jsx b/bigbluebutton-html5/imports/ui/components/app/container.jsx
index b0c8589e16aad9aa109a712cf1aac7c2be7fcfde..63de9a39074c4fd43605b194b6840162d69e85c4 100755
--- a/bigbluebutton-html5/imports/ui/components/app/container.jsx
+++ b/bigbluebutton-html5/imports/ui/components/app/container.jsx
@@ -9,6 +9,7 @@ import Meetings from '/imports/api/meetings';
 import logger from '/imports/startup/client/logger';
 
 import ClosedCaptionsContainer from '/imports/ui/components/closed-captions/container';
+import getFromUserSettings from '/imports/ui/services/users-settings';
 
 import {
   getFontSize,
@@ -111,6 +112,8 @@ export default injectIntl(withModalMounter(withTracker(({ intl, baseControls })
     userListIsOpen: Boolean(Session.get('isUserListOpen')),
     chatIsOpen: Boolean(Session.get('isChatOpen') && Session.get('isUserListOpen')),
     pollIsOpen: Boolean(Session.get('isPollOpen') && Session.get('isUserListOpen')),
+    customStyle: getFromUserSettings('customStyle', false),
+    customStyleUrl: getFromUserSettings('customStyleUrl', false),
   };
 })(AppContainer)));
 
diff --git a/bigbluebutton-html5/imports/ui/components/app/styles.scss b/bigbluebutton-html5/imports/ui/components/app/styles.scss
index 04c88b8427b5b57ef88da6adc2bb91325272c947..89a4c20da5c9e1a3e84ef92abb89ef8af5b7bb9f 100755
--- a/bigbluebutton-html5/imports/ui/components/app/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/app/styles.scss
@@ -1,11 +1,14 @@
 @import "/imports/ui/stylesheets/variables/_all";
 
-$navbar-height: 63px; // TODO: Change to NavBar real height
-$actionsbar-height: 75px; // TODO: Change to ActionsBar real height
-$bars-padding: $lg-padding-x - .45rem; // -.45 so user-list and chat title is aligned with the presentation title
-$userlist-handle-width: 5px; // 5px so user-list and chat resize handle render as the same size
 $poll-pane-min-width: 20em;
 
+:root {
+  --navbar-height: 63px; // TODO: Change to NavBar real height
+  --actionsbar-height: 75px; // TODO: Change to ActionsBar real height
+  --bars-padding: calc(var(--lg-padding-x) - .45rem); // -.45 so user-list and chat title is aligned with the presentation title
+  --userlist-handle-width: 5px; // 5px so user-list and chat resize handle render as the same size
+}
+
 .main {
   position: fixed;
   height: 100%;
@@ -19,7 +22,7 @@ $poll-pane-min-width: 20em;
   text-align: center;
 
   font-size: 1.5rem;
-  padding: $bars-padding;
+  padding: var(--bars-padding);
 }
 
 .wrapper {
@@ -103,7 +106,7 @@ $poll-pane-min-width: 20em;
   order: 1;
 
   @include mq($small-only) {
-    top: $navbar-height;
+    top: var(--navbar-height);
   }
 
   @include mq($medium-up) {
@@ -117,8 +120,8 @@ $poll-pane-min-width: 20em;
 }
 
 .userlistPad {
-  background-color: $color-off-white;
-  width: $userlist-handle-width;
+  background-color: var(--color-off-white);
+  width: var(--userlist-handle-width);
 }
 
 .compact {
@@ -134,7 +137,7 @@ $poll-pane-min-width: 20em;
   @include mq($small-only) {
     z-index: 3;
     height: auto;
-    top: $navbar-height;
+    top: var(--navbar-height);
     overflow: visible;
   }
 
@@ -149,7 +152,7 @@ $poll-pane-min-width: 20em;
 }
 
 .poll {
-  background-color: $color-white;
+  background-color: var(--color-white);
   min-width: $poll-pane-min-width;
   padding: 1rem;
 }
@@ -194,7 +197,7 @@ $poll-pane-min-width: 20em;
 
 .actionsbar {
   flex: 1;
-  padding: $bars-padding;
+  padding: var(--bars-padding);
   position: relative;
   order: 3;
 }
diff --git a/bigbluebutton-html5/imports/ui/components/audio/audio-controls/styles.scss b/bigbluebutton-html5/imports/ui/components/audio/audio-controls/styles.scss
index 87144e5109618e3e59322b39afa182ed83278de9..58f47fdddcd95011c414c35f974446c8ae538b35 100755
--- a/bigbluebutton-html5/imports/ui/components/audio/audio-controls/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/audio/audio-controls/styles.scss
@@ -5,10 +5,10 @@
   flex-flow: row;
 
   > * {
-    margin: 0 $sm-padding-x;
+    margin: 0 var(--sm-padding-x);
 
     @include mq($small-only) {
-      margin: 0 $sm-padding-y;
+      margin: 0 var(--sm-padding-y);
     }
 
     span:first-child {
diff --git a/bigbluebutton-html5/imports/ui/components/audio/audio-modal/styles.scss b/bigbluebutton-html5/imports/ui/components/audio/audio-modal/styles.scss
index 7c76c02db3939da9c0539310cbf5e61412550504..a5befabadac8058464856104c6857e08f831a1dc 100755
--- a/bigbluebutton-html5/imports/ui/components/audio/audio-modal/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/audio/audio-modal/styles.scss
@@ -1,158 +1,158 @@
-@import "/imports/ui/stylesheets/variables/_all";
-@import "/imports/ui/components/modal/simple/styles";
-
-.header {
-  margin: 0;
-  padding: 0;
-  border: none;
-  line-height: 2rem;
-}
-
-.content {
-  flex-grow: 1;
-  display: flex;
-  justify-content: center;
-  padding: 0;
-  margin-top: auto;
-  margin-bottom: auto;
-  padding: 0.5rem 0;
-
-  .audioBtn:first-child {
-    margin-right: 3rem;
-
-    @include mq($small-only) {
-      margin-right: 1rem;
-    }
-  }
-  .audioBtn:only-child {
-    margin-right: 0;
-  }
-}
-
-.audioOptions {
-  margin-top: auto;
-  margin-bottom: auto;
-  display: flex;
-}
-
-.overlay {
-  @extend .overlay;
-}
-
-.modal {
-  @extend .modal;
-  padding: 1.5rem;
-  min-height: 20rem;
-}
-
-.closeBtn {
-  position: relative;
-  background-color: $color-white;
-
-  i {
-    color: $color-gray-light;
-  }
-
-  &:focus,
-  &:hover{
-    background-color: $color-gray-lighter;
-    i{
-      color: $color-gray;
-    }
-  }
-}
-.warning{
-  text-align: center;
-  font-weight: $headings-font-weight;
-  font-size: 5rem;
-  white-space: normal;
-}
-.text{
-  margin: $line-height-computed;
-  text-align: center;
-}
-
-.main{
-  margin: $line-height-computed;
-  text-align: center;
-  font-size: $font-size-large;
-}
-.audioBtn {
-  &:focus {
-    outline: none !important;
-  }
-
-  i{
-    color: #3c5764;
-  }
-}
-
-// Modifies the audio button icon colour
-.audioBtn span:first-child {
-  color: #1b3c4b;
-  background-color: #f1f8ff;
-  box-shadow: none;
-  border: 5px solid  #f1f8ff;
-  font-size: 3.5rem;
-
-  @include mq($small-only) {
-    font-size: 2.5rem;
-  }
-}
-
-// When hovering over a button of class audioBtn, change the border colour of first span-child
-.audioBtn:hover span:first-child,
-.audioBtn:focus span:first-child {
-  border: 5px solid $color-primary;
-  background-color: #f1f8ff;
-}
-
-// Modifies the button label text
-.audioBtn span:last-child {
-  color: black;
-  font-size: 1rem;
-  font-weight: 600;
-}
-
-.title {
-  text-align: center;
-  font-weight: 400;
-  font-size: 1.3rem;
-  white-space: normal;
-
-  @include mq($small-only) {
-    font-size: 1rem;
-    padding: 0 1rem;
-  }
-}
-
-.connecting {
-  margin-top: auto;
-  margin-bottom: auto;
-  font-size: 2rem;
-}
-
-.connectingAnimation{
-  &:after {
-    overflow: hidden;
-    display: inline-block;
-    vertical-align: bottom;
-    animation: ellipsis steps(4,end) 900ms infinite;
-    content: "\2026"; /* ascii code for the ellipsis character */
-    width: 0;
-    margin-right: 1.25em;
-  }
-}
-
-@keyframes ellipsis {
-  to {
-    width: 1.25em;
-    margin-right: 0;
-  }
-}
-
-.audioNote {
-  color: $color-text;
-  display: inline-block;
-  font-size: 0.9rem;
-}
+@import "/imports/ui/stylesheets/variables/_all";
+@import "/imports/ui/components/modal/simple/styles";
+
+.header {
+  margin: 0;
+  padding: 0;
+  border: none;
+  line-height: 2rem;
+}
+
+.content {
+  flex-grow: 1;
+  display: flex;
+  justify-content: center;
+  padding: 0;
+  margin-top: auto;
+  margin-bottom: auto;
+  padding: 0.5rem 0;
+
+  .audioBtn:first-child {
+    margin-right: 3rem;
+
+    @include mq($small-only) {
+      margin-right: 1rem;
+    }
+  }
+  .audioBtn:only-child {
+    margin-right: 0;
+  }
+}
+
+.audioOptions {
+  margin-top: auto;
+  margin-bottom: auto;
+  display: flex;
+}
+
+.overlay {
+  @extend .overlay;
+}
+
+.modal {
+  @extend .modal;
+  padding: 1.5rem;
+  min-height: 20rem;
+}
+
+.closeBtn {
+  position: relative;
+  background-color: var(--color-white);
+
+  i {
+    color: var(--color-gray-light);
+  }
+
+  &:focus,
+  &:hover {
+    background-color: var(--color-gray-lighter);
+    i {
+      color: var(--color-gray);
+    }
+  }
+}
+.warning {
+  text-align: center;
+  font-weight: var(--headings-font-weight);
+  font-size: 5rem;
+  white-space: normal;
+}
+.text {
+  margin: var(--line-height-computed);
+  text-align: center;
+}
+
+.main {
+  margin: var(--line-height-computed);
+  text-align: center;
+  font-size: var(--font-size-large);
+}
+.audioBtn {
+  &:focus {
+    outline: none !important;
+  }
+
+  i {
+    color: #3c5764;
+  }
+}
+
+// Modifies the audio button icon colour
+.audioBtn span:first-child {
+  color: #1b3c4b;
+  background-color: #f1f8ff;
+  box-shadow: none;
+  border: 5px solid  #f1f8ff;
+  font-size: 3.5rem;
+
+  @include mq($small-only) {
+    font-size: 2.5rem;
+  }
+}
+
+// When hovering over a button of class audioBtn, change the border colour of first span-child
+.audioBtn:hover span:first-child,
+.audioBtn:focus span:first-child {
+  border: 5px solid var(--color-primary);
+  background-color: #f1f8ff;
+}
+
+// Modifies the button label text
+.audioBtn span:last-child {
+  color: black;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.title {
+  text-align: center;
+  font-weight: 400;
+  font-size: 1.3rem;
+  white-space: normal;
+
+  @include mq($small-only) {
+    font-size: 1rem;
+    padding: 0 1rem;
+  }
+}
+
+.connecting {
+  margin-top: auto;
+  margin-bottom: auto;
+  font-size: 2rem;
+}
+
+.connectingAnimation {
+  &:after {
+    overflow: hidden;
+    display: inline-block;
+    vertical-align: bottom;
+    animation: ellipsis steps(4,end) 900ms infinite;
+    content: "\2026"; /* ascii code for the ellipsis character */
+    width: 0;
+    margin-right: 1.25em;
+  }
+}
+
+@keyframes ellipsis {
+  to {
+    width: 1.25em;
+    margin-right: 0;
+  }
+}
+
+.audioNote {
+  color: var(--color-text);
+  display: inline-block;
+  font-size: 0.9rem;
+}
diff --git a/bigbluebutton-html5/imports/ui/components/audio/audio-settings/styles.scss b/bigbluebutton-html5/imports/ui/components/audio/audio-settings/styles.scss
index 0ee59b2e4a8bc4df9f2fde592fecd7548bd061c4..947f0f7e2fa31990e079ba361094c2c76d3950eb 100644
--- a/bigbluebutton-html5/imports/ui/components/audio/audio-settings/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/audio/audio-settings/styles.scss
@@ -32,7 +32,7 @@
   }
 
   &.spacedLeft {
-    // @extend .spaced;
+	// @extend .spaced;
 
     label {
       flex-grow: 1;
@@ -78,11 +78,11 @@
 .select {
   -webkit-appearance: none;
   -webkit-border-radius: 0px;
-  background: $color-white url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'><path fill='#667189' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>") no-repeat right .35rem center/.4rem .5rem;
+  background: var(--color-white) url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'><path fill='#667189' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>") no-repeat right .35rem center/.4rem .5rem;
   background-repeat: no-repeat;
-  border: 0.07rem solid $color-gray-light;
+  border: 0.07rem solid var(--color-gray-light);
   border-radius: .125rem;
-  color: $color-text;
+  color: var(--color-text);
   width: 100%;
   // appearance: none;
   padding: .4rem;
@@ -120,7 +120,7 @@
 }
 
 .chooseAudio {
-  position:absolute;
-  left:50%;
+  position: absolute;
+  left: 50%;
   transform: translate(-50%, 0);
 }
diff --git a/bigbluebutton-html5/imports/ui/components/audio/audio-test/styles.scss b/bigbluebutton-html5/imports/ui/components/audio/audio-test/styles.scss
index 2df5f1a13de80fd66cc40fd2df34eb7c5d3257f9..249e7919a90e3d70259ccdca0787542c620ff7dd 100644
--- a/bigbluebutton-html5/imports/ui/components/audio/audio-test/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/audio/audio-test/styles.scss
@@ -1,21 +1,25 @@
 @import "/imports/ui/stylesheets/variables/_all";
 
 .testAudioBtn {
+  --hover-color: #0c5cb2;
+
   background-color: transparent;
-  color: $color-primary;
+  color: var(--color-primary);
   font-weight: normal;
   border: none;
 
   i {
-    color: $color-primary;
+    color: var(--color-primary);
     transition: all .2s ease-in-out;
   }
 
-  &:hover, &:focus, &:active {
+  &:hover,
+  &:focus,
+  &:active {
     background-color: transparent !important;
-    color: darken($color-primary, 17%) !important;
+    color: var(--hover-color) !important;
     i {
-      color: darken($color-primary, 17%);
+      color: var(--hover-color);
     }
   }
 }
diff --git a/bigbluebutton-html5/imports/ui/components/audio/echo-test/styles.scss b/bigbluebutton-html5/imports/ui/components/audio/echo-test/styles.scss
index 114fd69c354a5b8a43f3b43131a12b766f30cea7..a4762035ba616b4a267b9749e4028e8ee3bf26fe 100644
--- a/bigbluebutton-html5/imports/ui/components/audio/echo-test/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/audio/echo-test/styles.scss
@@ -1,26 +1,26 @@
-@import "/imports/ui/stylesheets/variables/_all";
-
-.echoTest {
-  margin-top: auto;
-  margin-bottom: auto;
-}
-
-.button {
-  &:focus {
-    outline: none !important;
-  }
-
-  &:first-child {
-    margin-right: 3rem;
-
-    @include mq($small-only) {
-      margin-right: 1rem;
-    }
-  }
-
-  span:last-child {
-    color: black;
-    font-size: 1rem;
-    font-weight: 600;
-  }
-}
+@import "/imports/ui/stylesheets/variables/_all";
+
+.echoTest {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+.button {
+  &:focus {
+    outline: none !important;
+  }
+
+  &:first-child {
+    margin-right: 3rem;
+
+    @include mq($small-only) {
+      margin-right: 1rem;
+    }
+  }
+
+  span:last-child {
+    color: black;
+    font-size: 1rem;
+    font-weight: 600;
+  }
+}
diff --git a/bigbluebutton-html5/imports/ui/components/audio/permissions-overlay/styles.scss b/bigbluebutton-html5/imports/ui/components/audio/permissions-overlay/styles.scss
index 239e706b0897eb4aa1cee567f90ed9323860b203..954447e88888284e517601f50db0a61f08c448b7 100644
--- a/bigbluebutton-html5/imports/ui/components/audio/permissions-overlay/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/audio/permissions-overlay/styles.scss
@@ -72,57 +72,73 @@
 }
 
 @-webkit-keyframes bounce {
-	0%, 20%, 50%, 80%, 100% {
+  0%,
+  20%,
+  50%,
+  80%,
+  100% {
     -webkit-transform: translateY(0);
     transform: translateY(0);
   }
-	40% {
+  40% {
     -webkit-transform: translateY(10px);
     transform: translateY(10px);
   }
-	60% {
+  60% {
     -webkit-transform: translateY(5px);
     transform: translateY(5px);
   }
 }
 
 @-moz-keyframes bounce {
-	0%, 20%, 50%, 80%, 100% {
+  0%,
+  20%,
+  50%,
+  80%,
+  100% {
     transform: translateY(0);
   }
-	40% {
+  40% {
     transform: translateY(10px);
   }
-	60% {
+  60% {
     transform: translateY(5px);
   }
 }
 
 @keyframes bounce {
-	0%, 20%, 50%, 80%, 100% {
+  0%,
+  20%,
+  50%,
+  80%,
+  100% {
     -ms-transform: translateY(0);
     transform: translateY(0);
   }
-	40% {
+  40% {
     -ms-transform: translateY(10px);
     transform: translateY(10px);
   }
-	60% {
+  60% {
     -ms-transform: translateY(5px);
     transform: translateY(5px);
   }
 }
 
 @keyframes bounceRotate {
-  0%, 20%, 50%, 80%, 100% {
+  0%,
+  20%,
+  50%,
+  80%,
+  100% {
     -ms-transform: translateY(0) rotate(180deg);
     transform: translateY(0) rotate(180deg);
   }
-	40% {
+  40% {
     -ms-transform: translateY(10px) rotate(180deg);
     transform: translateY(10px) rotate(180deg);
   }
-	60% {
+  60% {
     -ms-transform: translateY(5px) rotate(180deg);
     transform: translateY(5px) rotate(180deg);
   }
@@ -132,7 +148,7 @@
   0% {
     opacity: 0;
   }
-	100% {
+  100% {
     opacity: 1;
   }
 }
diff --git a/bigbluebutton-html5/imports/ui/components/breakout-join-confirmation/styles.scss b/bigbluebutton-html5/imports/ui/components/breakout-join-confirmation/styles.scss
index 5225e420350ff006a888f625fd0c417fb187adab..162bcb5b415c9e9ff8279dcb0e4e59488b8e0544 100755
--- a/bigbluebutton-html5/imports/ui/components/breakout-join-confirmation/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/breakout-join-confirmation/styles.scss
@@ -1,14 +1,14 @@
 @import "../../stylesheets/variables/_all";
 
 .selectParent {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 .select {
-    background-color: $color-white;
-    width: 50%;
-    margin: 1rem;
-    border-color: $color-gray-lighter;
-}
\ No newline at end of file
+  background-color: var(--color-white);
+  width: 50%;
+  margin: 1rem;
+  border-color: var(--color-gray-lighter);
+}
diff --git a/bigbluebutton-html5/imports/ui/components/button/styles.scss b/bigbluebutton-html5/imports/ui/components/button/styles.scss
index 46c91e3abf5644983b14b6149ca7ec75fd6e0d79..a048ad3466e68b4d4f1c9b428fbf1855620bb9fb 100644
--- a/bigbluebutton-html5/imports/ui/components/button/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/button/styles.scss
@@ -1,48 +1,51 @@
 @import "/imports/ui/stylesheets/variables/_all";
 
-$btn-default-color: $color-gray;
-$btn-default-bg: $color-white;
-$btn-default-border: $color-white;
+/* Base
+ * ==========
+ */
 
-$btn-primary-color: $color-white;
-$btn-primary-bg: $color-primary;
-$btn-primary-border: $color-primary;
+:root {
+  --btn-default-color: var(--color-gray);
+  --btn-default-bg: var(--color-white);
+  --btn-default-border: var(--color-white);
 
-$btn-success-color: $color-white;
-$btn-success-bg: $color-success;
-$btn-success-border: $color-success;
+  --btn-primary-color: var(--color-white);
+  --btn-primary-bg: var(--color-primary);
+  --btn-primary-border: var(--color-primary);
 
-$btn-danger-color: $color-white;
-$btn-danger-bg: $color-danger;
-$btn-danger-border: $color-danger;
+  --btn-success-color: var(--color-white);
+  --btn-success-bg: var(--color-success);
+  --btn-success-border: var(--color-success);
 
-$btn-border-size: $border-size;
-$btn-border-radius: $border-radius;
-$btn-font-weight: 600;
-$btn-spacing: .35rem;
+  --btn-danger-color: var(--color-white);
+  --btn-danger-bg: var(--color-danger);
+  --btn-danger-border: var(--color-danger);
 
-$btn-sm-font-size: $font-size-small * .85;
-$btn-sm-padding: $sm-padding-y $sm-padding-x;
+  --btn-border-size: var(--border-size);
+  --btn-border-radius: var(--border-radius);
+  --btn-font-weight: 600;
+  --btn-spacing: .35rem;
 
-$btn-md-font-size: $font-size-base * .85;
-$btn-md-padding: $md-padding-y $md-padding-x;
+  --btn-sm-font-size: calc(var(--font-size-small) * .85);
+  --btn-sm-padding: var(--sm-padding-y) var(--sm-padding-x);
 
-$btn-lg-font-size: $font-size-large * .85;
-$btn-lg-padding: $lg-padding-y $lg-padding-x;
+  --btn-md-font-size: calc(var(--font-size-base) * .85);
+  --btn-md-padding: var(--md-padding-y) var(--md-padding-x);
 
-$btn-jumbo-font-size: 3rem;
-$btn-jumbo-padding: $jumbo-padding-y $jumbo-padding-x;
+  --btn-lg-font-size: calc(var(--font-size-large) * .85);
+  --btn-lg-padding: var(--lg-padding-y) var(--lg-padding-x);
+
+  --btn-jumbo-font-size: 3rem;
+  --btn-jumbo-padding: var(--jumbo-padding-y) var(--jumbo-padding-x);
+}
 
-/* Base
- * ==========
- */
 .button {
   border: none;
   outline: none;
   overflow: visible;
   display: inline-block;
-  border-radius: $border-size;
-  font-weight: $btn-font-weight;
+  border-radius: var(--border-size);
+  font-weight: var(--btn-font-weight);
   line-height: 1;
   text-align: center;
   white-space: nowrap;
@@ -71,7 +74,7 @@ $btn-jumbo-padding: $jumbo-padding-y $jumbo-padding-x;
   &:active {
     &:focus {
       span:first-of-type::before {
-        border-radius: $border-size;
+        border-radius: var(--border-size);
       }
     }
   }
@@ -110,7 +113,7 @@ $btn-jumbo-padding: $jumbo-padding-y $jumbo-padding-x;
   .buttonWrapper & {
     opacity: .85;
     display: block;
-    margin-top: $btn-spacing;
+    margin-top: var(--btn-spacing);
     color: #fff;
     font-weight: normal;
     line-height: 1.5;
@@ -121,12 +124,12 @@ $btn-jumbo-padding: $jumbo-padding-y $jumbo-padding-x;
   .buttonWrapper.sm & {
     display: inline-block;
     margin-top: 0;
-    margin-left: $btn-spacing;
+    margin-left: var(--btn-spacing);
   }
 
   & + .icon,
-  & + .button  {
-    margin-left: $btn-spacing;
+  & + .button {
+    margin-left: var(--btn-spacing);
   }
   &:hover {
     opacity: .5;
@@ -153,7 +156,7 @@ $btn-jumbo-padding: $jumbo-padding-y $jumbo-padding-x;
   }
 
   & + .label {
-    margin-left: $btn-spacing;
+    margin-left: var(--btn-spacing);
   }
   .buttonWrapper:hover & {
     opacity: .75;
@@ -164,12 +167,9 @@ $btn-jumbo-padding: $jumbo-padding-y $jumbo-padding-x;
  * ==========
  */
 @mixin button-variant($color, $background, $border) {
-  $active-background: darken($background, 10%);
-  $active-border: darken($border, 12%);
-
   color: $color;
   background-color: $background;
-  border: $border-size-large solid transparent;
+  border: var(--border-size-large) solid transparent;
 
   &:focus,
   .buttonWrapper:focus:not([aria-disabled="true"]) & {
@@ -177,16 +177,16 @@ $btn-jumbo-padding: $jumbo-padding-y $jumbo-padding-x;
     color: $color;
     background-color: $background;
     background-clip: padding-box;
-    border: $border-size-large solid transparent;
-    box-shadow: 0 0 0 $border-size $border;
+    border: var(--border-size-large) solid transparent;
+    box-shadow: 0 0 0 var(--border-size) $border;
   }
 
   &:hover,
   .buttonWrapper:hover & {
     color: $color;
-    background-color: $active-background;
-    border-color: $active-border;
-    border: $border-size-large solid transparent;
+    // background-color: $active-background; TODO;
+    // border-color: $active-border; TODO;
+    border: var(--border-size-large) solid transparent;
   }
 }
 
@@ -194,7 +194,7 @@ $btn-jumbo-padding: $jumbo-padding-y $jumbo-padding-x;
   color: $color;
   background-image: none;
   background-color: transparent;
-  border: $border-size-large solid transparent;
+  border: var(--border-size-large) solid transparent;
 
   &:focus,
   .buttonWrapper:focus & {
@@ -202,8 +202,8 @@ $btn-jumbo-padding: $jumbo-padding-y $jumbo-padding-x;
     outline: none !important;
     background-color: $variant;
     background-clip: padding-box;
-    border: $border-size-large solid transparent;
-    box-shadow: 0 0 0 $border-size $color;
+    border: var(--border-size-large) solid transparent;
+    box-shadow: 0 0 0 var(--border-size-large) $color;
   }
 
   &:hover,
@@ -211,24 +211,24 @@ $btn-jumbo-padding: $jumbo-padding-y $jumbo-padding-x;
     color: $color;
     background-color: $variant;
     border-color: $variant;
-    border: $border-size-large solid transparent;
+    border: var(--border-size-large) solid transparent;
   }
 }
 
 .default {
-  @include button-variant($btn-default-color, $btn-default-bg, $btn-primary-border);
+  @include button-variant(var(--btn-default-color), var(--btn-default-bg), var(--btn-primary-border));
 }
 
 .primary {
-  @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
+  @include button-variant(var(--btn-primary-color), var(--btn-primary-bg), var(--btn-primary-border));
 }
 
 .success {
-  @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
+  @include button-variant(var(--btn-success-color), var(--btn-success-bg), var(--btn-success-border));
 }
 
 .danger {
-  @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
+  @include button-variant(var(--btn-danger-color), var(--btn-danger-bg), var(--btn-danger-border));
 }
 
 /* Styles
@@ -242,48 +242,48 @@ $btn-jumbo-padding: $jumbo-padding-y $jumbo-padding-x;
 
 .ghost {
   &.default {
-    @include button-ghost-variant($btn-default-bg, $btn-default-color);
+    @include button-ghost-variant(var(--btn-default-bg), var(--btn-default-color));
   }
 
   &.primary {
-    @include button-ghost-variant($btn-primary-bg, $btn-primary-color);
+    @include button-ghost-variant(var(--btn-primary-bg), var(--btn-primary-color));
   }
 
   &.success {
-    @include button-ghost-variant($btn-success-bg, $btn-success-color);
+    @include button-ghost-variant(var(--btn-success-bg), var(--btn-success-color));
   }
 
   &.danger {
-    @include button-ghost-variant($btn-danger-bg, $btn-danger-color);
+    @include button-ghost-variant(var(--btn-danger-bg), var(--btn-danger-color));
   }
 }
 
 .circle {
-  $btn-sm-padding-x: nth($btn-sm-padding, 2) / 2.75;
-  $btn-md-padding-x: nth($btn-md-padding, 2) / 2.75;
-  $btn-lg-padding-x: nth($btn-lg-padding, 2) / 2.75;
-  $btn-jumbo-padding-x: nth($btn-jumbo-padding, 2) / 2.75;
+  --btn-sm-padding-x: calc(var(--lg-padding-x) / 2.75);
+  --btn-md-padding-x: calc(var(--md-padding-x) / 2.75);
+  --btn-lg-padding-x: calc(var(--lg-padding-x) / 2.75);
+  --btn-jumbo-padding-x: calc(var(--jumbo-padding-x) / 2.75);
 
   border-radius: 50%;
 
   &.sm {
-    padding-right: $btn-sm-padding-x;
-    padding-left: $btn-sm-padding-x;
+    padding-right: var(--btn-sm-padding-x);
+    padding-left: var(--btn-sm-padding-x);
   }
 
   &.md {
-    padding-right: $btn-md-padding-x;
-    padding-left: $btn-md-padding-x;
+    padding-right: var(--btn-md-padding-x);
+    padding-left: var(--btn-md-padding-x);
   }
 
   &.lg {
-    padding-right: $btn-lg-padding-x;
-    padding-left: $btn-lg-padding-x;
+    padding-right: var(--btn-lg-padding-x);
+    padding-left: var(--btn-lg-padding-x);
   }
 
   &.jumbo {
-    padding-right: $btn-jumbo-padding-x;
-    padding-left: $btn-jumbo-padding-x;
+    padding-right: var(--btn-jumbo-padding-x);
+    padding-left: var(--btn-jumbo-padding-x);
   }
 }
 
@@ -292,21 +292,21 @@ $btn-jumbo-padding: $jumbo-padding-y $jumbo-padding-x;
  */
 
 .sm {
-  font-size: $btn-sm-font-size;
-  padding: $btn-sm-padding;
+  font-size: var(--btn-sm-font-size);
+  padding: var(--btn-sm-padding);
 }
 
 .md {
-  font-size: $btn-md-font-size;
-  padding: $btn-md-padding;
+  font-size: var(--btn-md-font-size);
+  padding: var(--btn-md-padding);
 }
 
 .lg {
-  font-size: $btn-lg-font-size;
-  padding: $btn-lg-padding;
+  font-size: var(--btn-lg-font-size);
+  padding: var(--btn-lg-padding);
 }
 
 .jumbo {
-  font-size: $btn-jumbo-font-size;
-  padding: $btn-jumbo-padding;
+  font-size: var(--btn-jumbo-font-size);
+  padding: var(--btn-jumbo-padding);
 }
diff --git a/bigbluebutton-html5/imports/ui/components/chat/chat-dropdown/styles.scss b/bigbluebutton-html5/imports/ui/components/chat/chat-dropdown/styles.scss
index a2cf678fe342b76f42676786c2057b651beb0c34..87d63edb9a850cebed08b6fa0a1e96d0a89b6ecf 100644
--- a/bigbluebutton-html5/imports/ui/components/chat/chat-dropdown/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/chat/chat-dropdown/styles.scss
@@ -1,24 +1,24 @@
 @import "/imports/ui/stylesheets/variables/_all";
 
-$icon-offset: -.4em;
-$square-side-length: 1.56rem;
-
 .btn {
+  --icon-offset: -.4em;
+  --square-side-length: 1.56rem;
+
   flex: 0 0;
   margin-top: auto;
 
   cursor: pointer;
 
   span:first-child {
-    width: $square-side-length;
-    height: $square-side-length;
+    width: var(--square-side-length);
+    height: var(--square-side-length);
   }
 
 
   i {
-    color: $color-gray-dark !important;
-    top: $icon-offset;
-    left: $icon-offset;
+    color: var(--color-gray-dark) !important;
+    top: var(--icon-offset);
+    left: var(--icon-offset);
   }
 
   &:hover,
@@ -27,5 +27,4 @@ $square-side-length: 1.56rem;
       background-color: transparent !important;
     }
   }
-
 }
diff --git a/bigbluebutton-html5/imports/ui/components/chat/message-form/styles.scss b/bigbluebutton-html5/imports/ui/components/chat/message-form/styles.scss
index f02d35fb1d66c68a63d59babaf9b49823119f3a4..a904ecd92fb017d5c62f3e93b267c01d3c4a5e5e 100755
--- a/bigbluebutton-html5/imports/ui/components/chat/message-form/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/chat/message-form/styles.scss
@@ -7,7 +7,7 @@
   align-self: flex-end;
   width: 100%;
   position: relative;
-  margin-bottom: -$sm-padding-x;
+  margin-bottom: calc(-1 * var(--sm-padding-x));
 }
 
 .wrapper {
@@ -21,57 +21,59 @@
   justify-content: center;
   flex-grow: 0;
   flex-shrink: 0;
-  border: $border-size solid $color-gray-lighter;
+  border: var(--border-size) solid var(--color-gray-lighter);
   background: #fff;
-  border-radius: $border-radius 0 0 $border-radius;
-  color: $color-gray-light;
-  padding: $sm-padding-y $sm-padding-x;
+  border-radius: var(--border-radius) 0 0 var(--border-radius);
+  color: var(--color-gray-light);
+  padding: var(--sm-padding-y) var(--sm-padding-x);
   transition: background .3s;
   cursor: pointer;
 
+  --bg-faded: rgba(167,179,189,0.25);
+
   &:hover,
   &:focus {
-    background-color: fade-out($color-gray-lighter, .75);
+    background-color: var(--bg-faded);
   }
 
   &:disabled,
   &[disabled] {
     cursor: not-allowed;
     opacity: .75;
-    background-color: fade-out($color-gray-lighter, .75);
+    background-color: var(--bg-faded);
   }
 }
 
 .input {
-  @include inputFocus($color-blue-light);
+  @include inputFocus(var(--color-blue-light));
 
   flex: 1;
   background: #fff;
   background-clip: padding-box;
   margin: 0;
-  color: $color-text;
+  color: var(--color-text);
   -webkit-appearance: none;
   outline: 0;
-  padding: $sm-padding-y * 2.5 $sm-padding-x * 1.25;
+  padding: calc(var(--sm-padding-y) * 2.5) calc(var(--sm-padding-x) * 1.25);
   resize: none;
   transition: none;
-  border-radius: $border-radius;
-  font-size: $font-size-base;
+  border-radius: var(--border-radius);
+  font-size: var(--font-size-base);
   min-height: 2.5rem;
   max-height: 10rem;
-  border: 1px solid $color-gray-lighter;
-  box-shadow: 0 0 0 2px $color-gray-lighter;
+  border: 1px solid var(--color-gray-lighter);
+  box-shadow: 0 0 0 2px var(--color-gray-lighter);
 
   &:disabled,
   &[disabled] {
     cursor: not-allowed;
     opacity: .75;
-    background-color: fade-out($color-gray-lighter, .75);
+    background-color: rgba(167,179,189,0.25);
   }
 }
 
 .sendButton {
-  margin-left: $sm-padding-x;
+  margin-left: var(--sm-padding-x);
   align-self: center;
   font-size: 0.9rem;
   i {
@@ -80,10 +82,10 @@
 }
 
 .info {
-  font-size: $font-size-base * .75;
-  color: $color-gray-light;
+  font-size: calc(var(--font-size-base) * .75);
+  color: var(--color-gray-light);
   text-align: right;
-  padding: $border-size 0;
+  padding: var(--border-size) 0;
 
   &:before {
     content: "\00a0"; // non-breaking space
diff --git a/bigbluebutton-html5/imports/ui/components/chat/message-list/message-list-item/styles.scss b/bigbluebutton-html5/imports/ui/components/chat/message-list/message-list-item/styles.scss
index 072bd864eea14317242babd63e1490d62f7c4f3d..6cae52b42fce33aa9cb8980406ebc74302447415 100755
--- a/bigbluebutton-html5/imports/ui/components/chat/message-list/message-list-item/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/chat/message-list/message-list-item/styles.scss
@@ -1,8 +1,8 @@
 @import "/imports/ui/stylesheets/variables/_all";
 
 .item {
-  font-size: $font-size-base;
-  margin-bottom: $line-height-computed;
+  font-size: var(--font-size-base);
+  margin-bottom: var(--line-height-computed);
 
   &:last-child {
     margin-bottom: 0 !important;
@@ -16,16 +16,16 @@
 }
 
 .systemMessage {
-  padding: $line-height-computed 0;
+  padding: var(--line-height-computed) 0;
   padding-top: 0px;
-  border-bottom: 1px solid $color-gray-lighter;
+  border-bottom: 1px solid var(--color-gray-lighter);
 
   .item:not(&) + & {
-    border-top: 1px solid $color-gray-lighter;
+    border-top: 1px solid var(--color-gray-lighter);
   }
 
   & + & {
-    margin-top: -$line-height-computed;
+    margin-top: calc(var(--line-height-computed) * -1);
   }
 
   &:last-child {
@@ -33,7 +33,7 @@
   }
 
   .message {
-    color: $color-gray;
+    color: var(--color-gray);
   }
 }
 
@@ -41,7 +41,7 @@
   flex-basis: 1.65rem;
   flex-shrink: 0;
   flex-grow: 0;
-  margin-right: $line-height-computed / 2;
+  margin-right: calc(var(--line-height-computed) / 2);
 }
 
 .avatar {
@@ -67,7 +67,8 @@
   }
 }
 
-.name, .logout {
+.name,
+.logout {
   display: flex;
   min-width: 0;
   font-weight: 600;
@@ -82,7 +83,7 @@
 }
 
 .name {
-  color: $color-heading;
+  color: var(--color-heading);
 }
 
 .logout {
@@ -95,7 +96,7 @@
 }
 
 .offline {
-  color: $color-gray-light;
+  color: var(--color-gray-light);
   font-weight: 100;
   text-transform: lowercase;
   font-style: italic;
@@ -108,10 +109,10 @@
   flex-shrink: 0;
   flex-grow: 0;
   flex-basis: 3.5rem;
-  color: $color-gray-light;
+  color: var(--color-gray-light);
   text-transform: uppercase;
   font-size: 75%;
-  margin-left: $line-height-computed / 2;
+  margin-left: calc(var(--line-height-computed) / 2);
 
   > span {
     vertical-align: sub;
@@ -120,14 +121,14 @@
 
 .messages {
   > .message:first-child {
-    margin-top: $line-height-computed / 4;
+    margin-top: calc(var(--line-height-computed) / 4);
   }
 }
 
 .message {
   flex: 1;
-  margin-top: $line-height-computed / 3;
+  margin-top: calc(var(--line-height-computed) / 3);
   margin-bottom: 0;
-  color: $color-text;
+  color: var(--color-text);
   word-wrap: break-word;
 }
diff --git a/bigbluebutton-html5/imports/ui/components/chat/message-list/styles.scss b/bigbluebutton-html5/imports/ui/components/chat/message-list/styles.scss
index 83180f3d32ee43f0a69abb8c38f02c1ffce0e8f2..f03f66821be1f4be4231dc438fc869e23889a09a 100644
--- a/bigbluebutton-html5/imports/ui/components/chat/message-list/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/chat/message-list/styles.scss
@@ -1,8 +1,6 @@
 @import "/imports/ui/stylesheets/variables/_all";
 @import "/imports/ui/stylesheets/mixins/_scrollable";
 
-$padding: $md-padding-x;
-
 .messageListWrapper {
   display: flex;
   flex-flow: column;
@@ -11,12 +9,12 @@ $padding: $md-padding-x;
   position: relative;
   overflow-x: hidden;
   overflow-y: auto;
-  padding-left: $padding;
-  margin-left: -$padding;
-  padding-right: $padding;
-  margin-right: -$padding;
-  padding-bottom: $padding;
-  margin-bottom: -$padding;
+  padding-left: var(--md-padding-x);
+  margin-left: calc(-1 * var(--md-padding-x));
+  padding-right: var(--md-padding-x);
+  margin-right: calc(-1 * var(--md-padding-x));
+  padding-bottom: var(--md-padding-x);
+  margin-bottom: calc(-1 * var(--md-padding-x));
 }
 
 .messageList {
@@ -24,13 +22,13 @@ $padding: $md-padding-x;
   flex-flow: column;
   flex-grow: 1;
   flex-shrink: 1;
-  margin-right: -$sm-padding-x;
-  padding-right: $padding;
+  margin-right: calc(-1 * var(--md-padding-x));
+  padding-right: var(--md-padding-x);
   padding-top: 0;
   &:after {
     content: "";
     display: block;
-    height: $padding;
+    height: var(--md-padding-x);
   }
 }
 
@@ -40,6 +38,6 @@ $padding: $md-padding-x;
   text-transform: uppercase;
   // margin-top: .25rem;
   margin-bottom: .25rem;
-  background-color: darken($color-white, 5%);
+  background-color: #808080;
   @extend %text-elipsis;
 }
diff --git a/bigbluebutton-html5/imports/ui/components/chat/styles.scss b/bigbluebutton-html5/imports/ui/components/chat/styles.scss
index c64191485a6307989afb2bf47340df9606a74ca7..c8754fe53080045e030e1847873a170856a9e5d3 100755
--- a/bigbluebutton-html5/imports/ui/components/chat/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/chat/styles.scss
@@ -1,10 +1,9 @@
 @import "/imports/ui/stylesheets/mixins/focus";
 @import "/imports/ui/stylesheets/variables/_all";
 
-$icon-offset: -.4em;
-$background-active: darken($color-white, 5%);
 
-@mixin lineClamp($lineHeight: 1em, $lineCount: 1, $bgColor: $color-white) {
+
+@mixin lineClamp($lineHeight: 1em, $lineCount: 1, $bgColor: inherit) {
   display: block;
   box-orient: vertical;
   position: relative;
@@ -12,17 +11,17 @@ $background-active: darken($color-white, 5%);
 
   overflow: hidden;
   line-height: $lineHeight;
-  max-height: $lineHeight * $lineCount;
+  max-height: calc(#{"$lineHeight * $lineCount"});
 
   &:before {
-      content: '...';
-      width: 10%;
-      height: $lineHeight;
-      text-align: right;
-      position: absolute;
-      right: 0;
-      bottom: 0;
-      background: linear-gradient(to right, rgba(255, 255, 255, 0), $bgColor 75%);
+    content: '...';
+    width: 10%;
+    height: lineHeight;
+    text-align: right;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(to right, rgba(255, 255, 255, 0), $bgColor 75%);
   }
 
   &:after {
@@ -38,7 +37,7 @@ $background-active: darken($color-white, 5%);
 
 .chat {
   background-color: #fff;
-  padding: $md-padding-x;
+  padding: var(--md-padding-x);
   display: flex;
   flex-grow: 1;
   flex-direction: column;
@@ -55,9 +54,9 @@ $background-active: darken($color-white, 5%);
   flex-shrink: 0;
 
   a {
-    @include elementFocus($color-primary);
-    padding-bottom: $sm-padding-y;
-    padding-left: $sm-padding-y;
+    @include elementFocus(var(--color-primary));
+    padding-bottom: var(--sm-padding-y);
+    padding-left: var(--sm-padding-y);
     text-decoration: none;
     display: block;
   }
@@ -74,21 +73,21 @@ $background-active: darken($color-white, 5%);
 }
 
 .closeBtn {
-  background-color: $color-white;
+  background-color: var(--color-white);
   flex: 0 0;
   padding: 0 0.25rem !important;
 
   i {
     font-size: 0.85em;
-    color: $color-gray-dark !important;
-    top: $icon-offset;
+    color: var(--color-gray-dark) !important;
+    top: -.4em;
   }
 
   &:focus,
-  &:hover{
-    background-color: $color-white !important;
-    i{
-      color: $color-gray;
+  &:hover {
+    background-color: var(--color-white) !important;
+    i {
+      color: var(--color-gray);
     }
   }
 }
@@ -126,15 +125,15 @@ $background-active: darken($color-white, 5%);
 .userNameMessage {
   margin: 0;
   font-size: 80%;
-  color: $color-gray-dark;
+  color: var(--color-gray-dark);
   font-weight: bold;
   background-color: inherit;
-  @include lineClamp($lineHeight: 1em, $lineCount: 1, $bgColor: inherit);
+  @include lineClamp(1em, 1);
 }
 
 .contentMessage {
   margin-top: .2rem;
   font-size: 80%;
   background-color: inherit;
-  @include lineClamp($lineHeight: $font-size-small, $lineCount: 10, $bgColor: inherit);
+  @include lineClamp(var(--font-size-small), 10);
 }
diff --git a/bigbluebutton-html5/imports/ui/components/checkbox/styles.scss b/bigbluebutton-html5/imports/ui/components/checkbox/styles.scss
index 3ff3b79333b320c77d36f60bc4f1541f1e3fc44e..8abc46e2ffd0108ec8553fa3e7be275b07396ea2 100644
--- a/bigbluebutton-html5/imports/ui/components/checkbox/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/checkbox/styles.scss
@@ -19,9 +19,9 @@
 .icon {
   cursor: pointer;
   font-size: 1.35rem;
-  color: $color-gray-light;
+  color: var(--color-gray-light);
 }
 
 .checked {
-  color: $color-success;
+  color: var(--color-success);
 }
diff --git a/bigbluebutton-html5/imports/ui/components/closed-captions/styles.scss b/bigbluebutton-html5/imports/ui/components/closed-captions/styles.scss
index 0389830e35db3078a09eb3a66c36fda934f17ab8..2ce5b6a4fb2393c8e3a0ff4cc67bea88b8b4ba29 100644
--- a/bigbluebutton-html5/imports/ui/components/closed-captions/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/closed-captions/styles.scss
@@ -4,10 +4,10 @@
   border: 0;
   padding: none;
   width: 100%;
-  height:100%;
+  height: 100%;
   overflow-y: auto;
   overflow-x: hidden;
-  position:absolute;
+  position: absolute;
 }
 
 .frame {
diff --git a/bigbluebutton-html5/imports/ui/components/dropdown/list/styles.scss b/bigbluebutton-html5/imports/ui/components/dropdown/list/styles.scss
index 06f65f09c8bbb9d8525a60b2f68aeb60cc6b75fd..c6ddf09d9dc231b7bb39dbccafeacdb02f94d3be 100755
--- a/bigbluebutton-html5/imports/ui/components/dropdown/list/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/dropdown/list/styles.scss
@@ -1,22 +1,19 @@
 @import "/imports/ui/stylesheets/variables/_all";
 
-$more-icon-font-size: 12px;
-$more-icon-line-height: 16px;
-
 %list {
   list-style: none;
-  font-size: $font-size-base;
+  font-size: var(--font-size-base);
   margin: 0;
   padding: 0;
   text-align: left;
-  color: $color-gray-dark;
+  color: var(--color-gray-dark);
   display: flex;
   overflow-wrap: break-word;
   white-space: pre-line;
 
   @include mq($small-only) {
-    font-size: $font-size-large * 1.1;
-    padding: $line-height-computed;
+    font-size: calc(var(--font-size-large) * 1.1);
+    padding: var(--line-height-computed);
   }
 }
 
@@ -31,12 +28,12 @@ $more-icon-line-height: 16px;
   flex-direction: row;
   @include mq($small-only) {
     flex-direction: column;
-    padding: $line-height-computed;
+    padding: var(--line-height-computed);
   }
 }
 
 .title {
-  color: $color-gray;
+  color: var(--color-gray);
   font-weight: 600;
   width: 100%;
 }
@@ -46,10 +43,10 @@ $more-icon-line-height: 16px;
   flex: 1 1 100%;
   height: 1px;
   min-height: 1px;
-  background-color: $color-gray-lighter;
+  background-color: var(--color-gray-lighter);
   padding: 0;
-  margin-top: $line-height-computed * .5;
-  margin-bottom: $line-height-computed * .5;
+  margin-top: calc(var(--line-height-computed) * .5);
+  margin-bottom: calc(var(--line-height-computed) * .5);
 }
 
 .item {
@@ -61,18 +58,18 @@ $more-icon-line-height: 16px;
   }
 
   .verticalList & {
-    padding: ($line-height-computed / 3) 0;
+    padding: calc(var(--line-height-computed) / 3) 0;
 
     @include mq($small-only) {
-      padding: ($line-height-computed / 1.5) 0;
+      padding: calc(var(--line-height-computed) / 1.5) 0;
     }
   }
 
   .horizontalList & {
-    padding: 0 ($line-height-computed / 3);
+    padding: 0 calc(var(--line-height-computed) / 3);
 
     @include mq($small-only) {
-      padding: ($line-height-computed / 1.5) 0;
+      padding: calc(var(--line-height-computed) / 1.5) 0;
     }
   }
 
@@ -80,29 +77,29 @@ $more-icon-line-height: 16px;
   &:focus {
     cursor: pointer;
     outline: none;
-    background-color: $color-primary;
-    color: $color-white;
+    background-color: var(--color-primary);
+    color: var(--color-white);
 
     .verticalList & {
-      margin-left: -($line-height-computed / 2);
-      margin-right: -($line-height-computed / 2);
-      padding-left: ($line-height-computed / 2);
-      padding-right: ($line-height-computed / 2);
+      margin-left: calc((var(--line-height-computed) / 2) * -1);
+      margin-right: calc((var(--line-height-computed) / 2) * -1);
+      padding-left: calc(var(--line-height-computed) / 2);
+      padding-right: calc(var(--line-height-computed) / 2);
     }
 
     .horizontalList & {
-      margin-top: -($line-height-computed / 2);
-      margin-bottom: -($line-height-computed / 2);
-      padding-top: ($line-height-computed / 2);
-      padding-bottom: ($line-height-computed / 2);
+      margin-top: calc((var(--line-height-computed) / 2) * -1);
+      margin-bottom: calc((var(--line-height-computed) / 2) * -1);
+      padding-top: calc(var(--line-height-computed) / 2);
+      padding-bottom: calc(var(--line-height-computed) / 2);
 
       @include mq($small-only) {
         margin: 0;
-        padding: ($line-height-computed / 1.5) 0;
-        margin-left: -($line-height-computed / 2);
-        margin-right: -($line-height-computed / 2);
-        padding-left: ($line-height-computed / 2);
-        padding-right: ($line-height-computed / 2);
+        padding: calc(var(--line-height-computed) / 1.5) 0;
+        margin-left: calc((var(--line-height-computed) / 2) * -1);
+        margin-right: calc((var(--line-height-computed) / 2) * -1);
+        padding-left: calc(var(--line-height-computed) / 2);
+        padding-right: calc(var(--line-height-computed) / 2);
       }
     }
 
@@ -118,26 +115,26 @@ $more-icon-line-height: 16px;
   }
 
   &:focus {
-    box-shadow: 0 0 0 2px $color-white, 0 0 2px 4px rgba($color-primary, .4);
+    box-shadow: 0 0 0 2px var(--color-white), 0 0 2px 4px rgba(var(--color-primary), .4);
   }
 }
 
 .iconRight,
 .itemIcon {
-  margin-right: ($line-height-computed / 2);
-  color: $color-text;
+  margin-right: calc(var(--line-height-computed) / 2);
+  color: var(--color-text);
   flex: 0 0;
 }
 
 .iconRight {
-  margin-right: -$indicator-padding-left;
-  margin-left: $sm-padding-x;
-  font-size: $more-icon-font-size;
-  line-height: $more-icon-line-height;
+  margin-right: calc(var(--indicator-padding-left) * -1);
+  margin-left: var(--sm-padding-x);
+  font-size: 12px;
+  line-height: 16px;
 }
 
 .itemLabel {
-  color: $color-gray-dark;
+  color: var(--color-gray-dark);
   font-size: 90%;
   flex: 1;
 }
diff --git a/bigbluebutton-html5/imports/ui/components/dropdown/styles.scss b/bigbluebutton-html5/imports/ui/components/dropdown/styles.scss
index c3b02e84bda68f65a927097fff97d13568671289..952aba87eab005b01fbc1d790902ab70d06aff32 100755
--- a/bigbluebutton-html5/imports/ui/components/dropdown/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/dropdown/styles.scss
@@ -1,12 +1,14 @@
 @import "/imports/ui/stylesheets/variables/_all";
 @import "/imports/ui/stylesheets/mixins/_scrollable";
 
-$dropdown-bg: $color-white;
-$dropdown-color: $color-text;
-$caret-shadow-color: $color-gray;
+:root {
+  --dropdown-bg: var(--color-white);
+  --dropdown-color: var(--color-text);
+  --caret-shadow-color: var(--color-gray);
 
-$dropdown-caret-width: 12px;
-$dropdown-caret-height: 8px;
+  --dropdown-caret-width: 12px;
+  --dropdown-caret-height: 8px;
+}
 
 .dropdown {
   position: relative;
@@ -18,14 +20,15 @@ $dropdown-caret-height: 8px;
 
 .content {
   position: absolute;
-  background: $dropdown-bg;
-  border-radius: $border-radius;
+  background: var(--dropdown-bg);
+  border-radius: var(--border-radius);
   box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
   border: 1px solid rgba(0, 0, 0, .15);
-  padding: $line-height-computed / 2;
+  padding: calc(var(--line-height-computed) / 2);
   z-index: 1000;
 
-  &:after, &:before {
+  &:after,
+  &:before {
     content: '';
     position: absolute;
     width: 0;
@@ -52,10 +55,11 @@ $dropdown-caret-height: 8px;
     bottom: 0 !important;
     border: 0 !important;
     padding: 0 !important;
-    margin: 0 0 $line-height-computed * 5.25 0 !important;
+    margin: 0 0 calc(var(--line-height-computed) * 5.25) 0 !important;
     transform: translateX(0) translateY(0) !important;
 
-    &:after, &:before {
+    &:after,
+    &:before {
       display: none !important;
     }
   }
@@ -72,7 +76,8 @@ $dropdown-caret-height: 8px;
   }
 }
 
-.trigger {}
+.trigger {
+}
 
 .close {
   display: none;
@@ -80,11 +85,11 @@ $dropdown-caret-height: 8px;
   bottom: 0.8rem;
   border-radius: 0;
   z-index: 1011;
-  font-size: $font-size-large * 1.1;
-  width: calc(100% - #{($line-height-computed * 2)});
-  left: $line-height-computed;
-  box-shadow: 0 0 0 2rem $color-white !important;
-  border: $color-white !important;
+  font-size: calc(var(--font-size-large) * 1.1);
+  width: calc(100% - (var(--line-height-computed) * 2));
+  left: var(--line-height-computed);
+  box-shadow: 0 0 0 2rem var(--color-white) !important;
+  border: var(--color-white) !important;
 
   @include mq($small-only) {
     display: block;
@@ -99,18 +104,19 @@ $dropdown-caret-height: 8px;
   bottom: 100%;
   left: 50%;
   transform: translateX(-50%);
-  margin-bottom: $dropdown-caret-height * 1.25;
+  margin-bottom: calc(var(--dropdown-caret-height) * 1.25);
 
-  &:before, &:after {
-    border-left: $dropdown-caret-width solid transparent;
-    border-right: $dropdown-caret-width solid transparent;
-    border-top: $dropdown-caret-height solid $dropdown-bg;
+  &:before,
+  &:after {
+    border-left: var(--dropdown-caret-width) solid transparent;
+    border-right: var(--dropdown-caret-width) solid transparent;
+    border-top: var(--dropdown-caret-height) solid var(--dropdown-bg);
     bottom: 0;
-    margin-bottom: -($dropdown-caret-height);
+    margin-bottom: calc(var(--dropdown-caret-height) * -1);
   }
 
   &:before {
-    border-top: $dropdown-caret-height solid $caret-shadow-color;
+    border-top: var(--dropdown-caret-height) solid var(--caret-shadow-color);
   }
 }
 
@@ -118,63 +124,67 @@ $dropdown-caret-height: 8px;
   top: 100%;
   left: 50%;
   transform: translateX(-50%);
-  margin-top: $dropdown-caret-height * 1.25;
-
-  &:before, &:after {
-    border-left: $dropdown-caret-width solid transparent;
-    border-right: $dropdown-caret-width solid transparent;
-    border-bottom: $dropdown-caret-height solid $dropdown-bg;
-    margin-top: -($dropdown-caret-height);
+  margin-top: calc(var(--dropdown-caret-height) * 1.25);
+
+  &:before,
+  &:after {
+    border-left: var(--dropdown-caret-width) solid transparent;
+    border-right: var(--dropdown-caret-width) solid transparent;
+    border-bottom: var(--dropdown-caret-height) solid var(--dropdown-bg);
+    margin-top: calc(var(--dropdown-caret-height) * -1);
     top: 0;
   }
 
   &:before {
-    border-bottom: $dropdown-caret-height solid $caret-shadow-color;
+    border-bottom: var(--dropdown-caret-height) solid var(--caret-shadow-color);
   }
 }
 
 %right-caret {
   top: 50%;
   transform: translateX(-100%) translateY(-50%);
-  left: -($dropdown-caret-height * 1.25);
-
-  &:before, &:after{
-    border-top: $dropdown-caret-width solid transparent;
-    border-bottom: $dropdown-caret-width solid transparent;
-    border-left: $dropdown-caret-height solid $dropdown-bg;
-    margin-right: -($dropdown-caret-height);
+  left: calc(var(--dropdown-caret-height) * -1.25);
+
+  &:before,
+  &:after {
+    border-top: var(--dropdown-caret-width) solid transparent;
+    border-bottom: var(--dropdown-caret-width) solid transparent;
+    border-left: var(--dropdown-caret-height) solid var(--dropdown-bg);
+    margin-right: calc(var(--dropdown-caret-height) * -1);
     top: 50%;
     right: 0;
   }
 
   &:before {
-    border-left: $dropdown-caret-height solid $caret-shadow-color;
+    border-left: var(--dropdown-caret-height) solid var(--caret-shadow-color);
   }
 }
 
 %left-caret {
   top: 50%;
   transform: translateX(100%) translateY(-50%);
-  right: -($dropdown-caret-height * 1.25);
-
-  &:before, &:after {
-    border-top: $dropdown-caret-width solid transparent;
-    border-bottom: $dropdown-caret-width solid transparent;
-    border-right: $dropdown-caret-height solid $dropdown-bg;
-    margin-left: -($dropdown-caret-height);
+  right: calc(var(--dropdown-caret-height) * -1.25);
+
+  &:before,
+  &:after {
+    border-top: var(--dropdown-caret-width) solid transparent;
+    border-bottom: var(--dropdown-caret-width) solid transparent;
+    border-right: var(--dropdown-caret-height) solid var(--dropdown-bg);
+    margin-left: calc(var(--dropdown-caret-height) * -1);
     top: 50%;
     left: 0;
   }
 
   &:before {
-    border-right: $dropdown-caret-height solid $caret-shadow-color;
+    border-right: var(--dropdown-caret-height) solid var(--caret-shadow-color);
   }
 }
 
 %horz-center-caret {
-  &:after, &:before {
+  &:after,
+  &:before {
     left: 50%;
-    margin-left: -($dropdown-caret-width);
+    margin-left: calc(var(--dropdown-caret-width) * -1);
   }
 }
 
@@ -182,8 +192,9 @@ $dropdown-caret-height: 8px;
   transform: translateX(-100%);
   left: 100%;
 
-  &:after, &:before {
-    right: $dropdown-caret-width / 2;
+  &:after,
+  &:before {
+    right: calc(var(--dropdown-caret-width) / 2);
   }
 }
 
@@ -192,23 +203,26 @@ $dropdown-caret-height: 8px;
   right: 100%;
   left: auto;
 
-  &:after, &:before {
-    left: $dropdown-caret-width / 2;
+  &:after,
+  &:before {
+    left: calc(var(--dropdown-caret-width) / 2);
   }
 }
 
 %vert-center-caret {
-  &:after, &:before {
-    margin-top: -($dropdown-caret-width);
+  &:after,
+  &:before {
+    margin-top: calc(var(--dropdown-caret-width) * -1);
   }
 }
 
 %vert-top-caret {
   top: 0;
 
-  &:after, &:before {
+  &:after,
+  &:before {
     top: 0;
-    margin-top: $dropdown-caret-width / 2;
+    margin-top: calc(var(--dropdown-caret-width) / 2);
   }
 }
 
@@ -216,9 +230,10 @@ $dropdown-caret-height: 8px;
   top: auto;
   bottom: 0;
 
-  &:after, &:before {
+  &:after,
+  &:before {
     top: auto;
-    bottom: $dropdown-caret-width / 2;
+    bottom: calc(var(--dropdown-caret-width) / 2);
   }
 }
 
diff --git a/bigbluebutton-html5/imports/ui/components/error-screen/styles.scss b/bigbluebutton-html5/imports/ui/components/error-screen/styles.scss
index 4be4198c41fa5e6a8907323994f8924235bba2a4..336d81c51916612a56288674e126321776c6bae1 100644
--- a/bigbluebutton-html5/imports/ui/components/error-screen/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/error-screen/styles.scss
@@ -1,8 +1,5 @@
 @import "/imports/ui/stylesheets/variables/palette";
 
-$bg: $color-gray-dark;
-$color: $color-white;
-
 .background {
   position: fixed;
   display: flex;
@@ -10,8 +7,8 @@ $color: $color-white;
   justify-content: center;
   width: 100%;
   height: 100%;
-  background-color: $bg;
-  color: $color;
+  background-color: var(--color-gray-dark);
+  color: var(--color-white);
   text-align: center;
 }
 
diff --git a/bigbluebutton-html5/imports/ui/components/loading-screen/styles.scss b/bigbluebutton-html5/imports/ui/components/loading-screen/styles.scss
index 2398a89d8444f87a35f5cd9d2f0092e1a53b2134..e9d4cc34528397f4fa3d828b678bebbb1b75c2ee 100644
--- a/bigbluebutton-html5/imports/ui/components/loading-screen/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/loading-screen/styles.scss
@@ -3,9 +3,12 @@
 /* Variables
  * ==========
  */
-$loader-bg: $color-gray-dark;
-$loader-bullet: $color-white;
-$loader-message-color: $color-white;
+
+:root {
+  --loader-bg: var(--color-gray-dark);
+  --loader-bullet: var(--color-white);
+  --loader-message-color: var(--color-white);
+}
 
 .background {
   position: fixed;
@@ -14,12 +17,12 @@ $loader-message-color: $color-white;
   justify-content: center;
   width: 100%;
   height: 100%;
-  background-color: $loader-bg;
+  background-color: var(--loader-bg);
 }
 
 .message {
-  font-size: $font-size-large;
-  color: $color-white;
+  font-size: var(--font-size-large);
+  color: var(--color-white);
   text-align: center;
 }
 
@@ -27,14 +30,14 @@ $loader-message-color: $color-white;
   width: 100%;
   text-align: center;
   height: 22px;
-  margin-bottom: $md-padding-x;
+  margin-bottom: var(--md-padding-x);
 }
 
 .spinner > div {
   width: 18px;
   height: 18px;
   margin: 0 5px;
-  background-color: $loader-bullet;
+  background-color: var(--loader-bullet);
 
   border-radius: 100%;
   display: inline-block;
@@ -53,15 +56,22 @@ $loader-message-color: $color-white;
 }
 
 @-webkit-keyframes sk-bouncedelay {
-  0%, 80%, 100% { -webkit-transform: scale(0) }
-  40% { -webkit-transform: scale(1.0) }
+  0%,
+  80%,
+  100% {
+    -webkit-transform: scale(0);
+  }
+  40% { -webkit-transform: scale(1.0); }
 }
 
 @keyframes sk-bouncedelay {
-  0%, 80%, 100% {
+  0%,
+  80%,
+  100% {
     -webkit-transform: scale(0);
     transform: scale(0);
-  } 40% {
+  }
+  40% {
     -webkit-transform: scale(1.0);
     transform: scale(1.0);
   }
diff --git a/bigbluebutton-html5/imports/ui/components/media/styles.scss b/bigbluebutton-html5/imports/ui/components/media/styles.scss
index 20efa5d86cad7f1aad306daf5805470120da11fc..ebe9e92bf8e64a5f1a10aad975376ffaa035aea4 100644
--- a/bigbluebutton-html5/imports/ui/components/media/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/media/styles.scss
@@ -38,23 +38,23 @@
   display: none;
 }
 
-$overlay-width: 20vw;
-$overlay-min-width: 235px;
-$overlay-max-width: 20vw;
-$overlay-ratio: 16 / 9;
-
 .floatingOverlay {
+  --overlay-width: 20vw;
+  --overlay-min-width: 235px;
+  --overlay-max-width: 20vw;
+  --overlay-ratio: calc(16 / 9);
+
   @include mq($medium-up) {
     z-index: 1;
     position: fixed;
     margin: 0;
     bottom: .8rem;
     right: .8rem;
-    width: $overlay-width;
-    min-width: $overlay-min-width;
-    max-width: $overlay-max-width;
-    height: calc(#{$overlay-width} / #{$overlay-ratio});
-    min-height: calc(#{$overlay-min-width} / #{$overlay-ratio});
-    max-height: calc(#{$overlay-max-width} / #{$overlay-ratio});
+    width: var(--overlay-width);
+    min-width: var(--overlay-min-width);
+    max-width: var(--overlay-max-width);
+    height: calc(var(--overlay-width) / var(--overlay-ratio));
+    min-height: calc(var(--overlay-min-width) / var(--overlay-ratio));
+    max-height: calc(var(--overlay-max-width) / var(--overlay-ratio));
   }
 }
diff --git a/bigbluebutton-html5/imports/ui/components/meeting-ended/rating/styles.scss b/bigbluebutton-html5/imports/ui/components/meeting-ended/rating/styles.scss
index d8157eba97684b8655e94b24e6e4b5e85392d245..add48e0a1a2e7754cc40c02163079eddc1e550e8 100755
--- a/bigbluebutton-html5/imports/ui/components/meeting-ended/rating/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/meeting-ended/rating/styles.scss
@@ -27,7 +27,7 @@
 
         @include mq($small-only) {
           font-size: 2rem;
-        };
+        }
 
         &:before {
           content: '\e951';
@@ -35,8 +35,8 @@
 
         &:hover,
         &:hover ~ label {
-          color: $color-primary;
-          text-shadow: 0 0 3px $color-primary;
+          color: var(--color-primary);
+          text-shadow: 0 0 3px var(--color-primary);
           &:before {
             content: '\e951';
           }
@@ -48,7 +48,7 @@
       & ~ label {
         &:before {
           content: '\e952';
-          color: $color-primary;
+          color: var(--color-primary);
         }
       }
     }
diff --git a/bigbluebutton-html5/imports/ui/components/meeting-ended/styles.scss b/bigbluebutton-html5/imports/ui/components/meeting-ended/styles.scss
index 494af7ebba618d700608ac25a1c114805965638c..c61656bc28c41e483de6ef25a005893efb669ee8 100755
--- a/bigbluebutton-html5/imports/ui/components/meeting-ended/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/meeting-ended/styles.scss
@@ -10,22 +10,21 @@
 
 .modal {
   display: flex;
-  padding: $lg-padding-x;
-  background-color: $color-white;
+  padding: var(--lg-padding-x);
+  background-color: var(--color-white);
   flex-direction: column;
-  border-radius: $border-radius;
+  border-radius: var(--border-radius);
   max-width: 95vw;
   width: 600px;
-
 }
 
 .text {
-  color: $color-text;
+  color: var(--color-text);
   font-weight: normal;
-  padding: $line-height-computed 0;
+  padding: var(--line-height-computed) 0;
   @include mq($small-only) {
-    font-size: $font-size-small;
-  };
+    font-size: var(--font-size-small);
+  }
 }
 
 .content {
@@ -34,13 +33,13 @@
 
 .title {
   margin: 0;
-  font-size: $font-size-large;
-  font-weight: $headings-font-weight;
+  font-size: var(--font-size-large);
+  font-weight: var(--headings-font-weight);
 }
 
 .button {
   @include mq($small-only) {
-    font-size: $font-size-base;
+    font-size: var(--font-size-base);
   }
 }
 
diff --git a/bigbluebutton-html5/imports/ui/components/modal/base/styles.scss b/bigbluebutton-html5/imports/ui/components/modal/base/styles.scss
index 7ce9aa63ec3ac2d369c842435c8d9ecec61159c6..e18fa14b39b7b941714df66dca5c047ee70e5b7f 100644
--- a/bigbluebutton-html5/imports/ui/components/modal/base/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/modal/base/styles.scss
@@ -6,7 +6,7 @@
 
   max-width: 60vw;
   max-height: 100%;
-  border-radius: $border-radius;
+  border-radius: var(--border-radius);
   background: #fff;
   overflow: auto;
   outline: none;
diff --git a/bigbluebutton-html5/imports/ui/components/modal/fullscreen/styles.scss b/bigbluebutton-html5/imports/ui/components/modal/fullscreen/styles.scss
index 972b67ef170d355c227bee3b098d24d1b87c1eb8..f30735e9e4f9c2b8f408d63152a1d9b3898c9897 100644
--- a/bigbluebutton-html5/imports/ui/components/modal/fullscreen/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/modal/fullscreen/styles.scss
@@ -4,23 +4,23 @@
   display: flex;
   flex-direction: column;
   align-self: flex-start;
-  padding: ($line-height-computed / 2) $line-height-computed;
+  padding: calc(var(--line-height-computed) / 2) var(--line-height-computed);
   outline: none;
   @include mq($small-only) {
-    width: 100%
+    width: 100%;
   }
 }
 
 .content {
-  color: $color-text;
+  color: var(--color-text);
   font-weight: normal;
-  padding: $line-height-computed 0;
+  padding: var(--line-height-computed) 0;
 }
 
 .header {
   display: flex;
-  padding: $line-height-computed 0;
-  border-bottom: $border-size solid $color-gray-lighter;
+  padding: var(--line-height-computed) 0;
+  border-bottom: var(--border-size) solid var(--color-gray-lighter);
 }
 
 .actions {
@@ -50,6 +50,6 @@
 }
 
 .confirm {
-  color: $color-white !important;
-  background-color: $color-link !important;
+  color: var(--color-white) !important;
+  background-color: var(--color-link) !important;
 }
diff --git a/bigbluebutton-html5/imports/ui/components/modal/simple/styles.scss b/bigbluebutton-html5/imports/ui/components/modal/simple/styles.scss
index d23f43b9fc049acc604da9149bc7e474e8f68cec..082858dac0c7af25a33560a68ef26ae9b1f17776 100644
--- a/bigbluebutton-html5/imports/ui/components/modal/simple/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/modal/simple/styles.scss
@@ -4,21 +4,21 @@
 .modal {
   display: flex;
   flex-direction: column;
-  padding: ($line-height-computed / 2) $line-height-computed;
-  box-shadow : 0px 0px 15px rgba(0, 0, 0, 0.5);
+  padding: calc(var(--line-height-computed) / 2) var(--line-height-computed);
+  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
 }
 
 .content {
   overflow: auto;
-  color: $color-text;
+  color: var(--color-text);
   font-weight: normal;
-  padding: $line-height-computed 0;
+  padding: var(--line-height-computed) 0;
 }
 
 .header {
   display: flex;
-  padding: ($line-height-computed / 2) 0;
-  border-bottom: $border-size solid $color-gray-lighter;
+  padding: calc(var(--line-height-computed) / 2) 0;
+  border-bottom: var(--border-size) solid var(--color-gray-lighter);
   flex-shrink: 0;
 }
 
@@ -35,7 +35,7 @@
     border-color: transparent;
     background-color: transparent;
 
-    > i { color: $color-text; }
+    > i { color: var(--color-text); }
   }
 }
 
diff --git a/bigbluebutton-html5/imports/ui/components/nav-bar/recording-indicator/styles.scss b/bigbluebutton-html5/imports/ui/components/nav-bar/recording-indicator/styles.scss
index 1be766e2959a60b4efd4f25707cb060ef251f6ea..4063294d5fe5eea0f5bb716b9905dfabc23175df 100755
--- a/bigbluebutton-html5/imports/ui/components/nav-bar/recording-indicator/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/nav-bar/recording-indicator/styles.scss
@@ -3,35 +3,34 @@
 %baseIndicator {
   position: relative;
   display: inline-block;
-  width: $font-size-base;
-  height: $font-size-base;
+  width: var(--font-size-base);
+  height: var(--font-size-base);
   border-radius: 50%;
-  border: 1px solid $color-white;
+  border: 1px solid var(--color-white);
 
   &:after {
     content: '';
-    width: $font-size-base / 2;
-    height: $font-size-base / 2;
+    width: var(--font-size-base) / 2;
+    height: var(--font-size-base) / 2;
     position: absolute;
     top: 50%;
     left: 50%;
-    margin-top: -($font-size-base / 4);
-    margin-left: -($font-size-base / 4);
+    margin-top: -(var(--font-size-base) / 4);
+    margin-left: -(var(--font-size-base) / 4);
     border-radius: 50%;
-    background-color: $color-danger;
+    background-color: var(--color-danger);
   }
 }
 
 %baseIndicatorLabel {
   font-weight: 200;
-  font-size: $font-size-base;
+  font-size: var(--font-size-base);
   margin: 0 0 0 0.5rem;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   vertical-align: middle;
   max-width: 20vw;
- 
 }
 
 .recordIndicator {
@@ -40,24 +39,23 @@
 
 .notRecording {
   @extend %baseIndicator;
-  border: 1px solid $color-gray;
+  border: 1px solid var(--color-gray);
 
   &:after {
-    background-color: $color-gray;
+    background-color: var(--color-gray);
   }
-
 }
 
 .recordingLabel {
   @extend %baseIndicatorLabel;
-  color: $color-white;
+  color: var(--color-white);
 }
 
 .notRecordingLabel {
   @extend %baseIndicatorLabel;
-  color: $color-gray;
+  color: var(--color-gray);
 }
 
 .recordState {
   display: flex;
-}
\ No newline at end of file
+}
diff --git a/bigbluebutton-html5/imports/ui/components/nav-bar/styles.scss b/bigbluebutton-html5/imports/ui/components/nav-bar/styles.scss
index 473924509538585cf89c471cb247a757f0f7eeaa..09bc9548f073be56d8204d03e768c6852a82df72 100755
--- a/bigbluebutton-html5/imports/ui/components/nav-bar/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/nav-bar/styles.scss
@@ -20,29 +20,29 @@
 }
 
 .center {
-  width:70%;
+  width: 70%;
   flex: 1;
 }
 
 .presentationTitle {
   font-weight: 200;
-  color: $color-white;
-  font-size: $font-size-base;
+  color: var(--color-white);
+  font-size: var(--font-size-base);
   margin: 0;
   padding: 0;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 30vw;
-  
+
   > [class^="icon-bbb-"] {
     font-size: 75%;
   }
 }
 
 .presentationTitleSeparator {
-  color: $color-gray;
-  font-size: $font-size-base;
+  color: var(--color-gray);
+  font-size: var(--font-size-base);
   margin: 0 1rem;
 }
 
@@ -55,10 +55,10 @@
     border-radius: 50%;
     width: 12px;
     height: 12px;
-    bottom: $border-size;
+    bottom: var(--border-size);
     right: 3px;
-    background-color: $color-danger;
-    border: $border-size solid $color-gray-dark;
+    background-color: var(--color-danger);
+    border: var(--border-size) solid var(--color-gray-dark);
   }
 }
 
@@ -74,7 +74,7 @@
   &:focus {
     span {
       background-color: transparent !important;
-      color: $color-white !important;
+      color: var(--color-white) !important;
       opacity: .75;
     }
   }
diff --git a/bigbluebutton-html5/imports/ui/components/notifications-bar/styles.scss b/bigbluebutton-html5/imports/ui/components/notifications-bar/styles.scss
index 70d7f7071ac0dde82e11524ebc7ca6e47766993a..48cbe42b9d0947cbe821017ab1f72ef330cde3ee 100644
--- a/bigbluebutton-html5/imports/ui/components/notifications-bar/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/notifications-bar/styles.scss
@@ -1,23 +1,25 @@
 @import "../../stylesheets/variables/_all";
 
-$nb-default-color: $color-gray;
-$nb-default-bg: $color-white;
-$nb-default-border: $color-white;
-
-$nb-primary-color: $color-white;
-$nb-primary-bg: $color-primary;
-$nb-primary-border: $color-primary;
-
-$nb-success-color: $color-white;
-$nb-success-bg: $color-success;
-$nb-success-border: $color-success;
-
-$nb-danger-color: $color-white;
-$nb-danger-bg: $color-danger;
-$nb-danger-border: $color-danger;
+:root {
+  --nb-default-color: var(--color-gray);
+  --nb-default-bg: var(--color-white);
+  --nb-default-border: var(--color-white);
+
+  --nb-primary-color: var(--color-white);
+  --nb-primary-bg: var(--color-primary);
+  --nb-primary-border: var(--color-primary);
+
+  --nb-success-color: var(--color-white);
+  --nb-success-bg: var(--color-success);
+  --nb-success-border: var(--color-success);
+
+  --nb-danger-color: var(--color-white);
+  --nb-danger-bg: var(--color-danger);
+  --nb-danger-border: var(--color-danger);
+}
 
 .notificationsBar {
-  padding: $line-height-computed / 2;
+  padding: calc(var(--line-height-computed) / 2);
   display: flex;
   flex-direction: row;
   justify-content: center;
@@ -32,17 +34,17 @@ $nb-danger-border: $color-danger;
 }
 
 .default {
-  @include nb-variant($nb-default-color, $nb-default-bg, $nb-default-border);
+  @include nb-variant(var(--nb-default-color), var(--nb-default-bg), var(--nb-default-border));
 }
 
 .primary {
-  @include nb-variant($nb-primary-color, $nb-primary-bg, $nb-primary-border);
+  @include nb-variant(var(--nb-primary-color), var(--nb-primary-bg), var(--nb-primary-border));
 }
 
 .success {
-  @include nb-variant($nb-success-color, $nb-success-bg, $nb-success-border);
+  @include nb-variant(var(--nb-success-color), var(--nb-success-bg), var(--nb-success-border));
 }
 
 .danger {
-  @include nb-variant($nb-danger-color, $nb-danger-bg, $nb-danger-border);
+  @include nb-variant(var(--nb-danger-color), var(--nb-danger-bg), var(--nb-danger-border));
 }
diff --git a/bigbluebutton-html5/imports/ui/components/polling/styles.scss b/bigbluebutton-html5/imports/ui/components/polling/styles.scss
index 6578c308278ef815ba205b951e0106fc8d07fad9..4d6dfa519429c70a9e02a28da962a7e0d675d01b 100644
--- a/bigbluebutton-html5/imports/ui/components/polling/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/polling/styles.scss
@@ -27,17 +27,17 @@ $col-amount: 2;
   width: $poll-width;
   position: absolute;
   z-index: 1016;
-  border: 1px solid $color-off-white;
-  border-radius: $border-radius;
+  border: 1px solid var(--color-off-white);
+  border-radius: var(--border-radius);
   ////
   box-shadow: 0 0 10px -2px rgba(0, 0, 0, 0.25);
   align-items: center;
   text-align: center;
   font-weight: 600;
-  padding: $md-padding-y;
-  background-color: $color-white;
-  bottom: $sm-padding-x;
-  right: $sm-padding-x;
+  padding: var(--md-padding-y);
+  background-color: var(--color-white);
+  bottom: var(--sm-padding-x);
+  right: var(--sm-padding-x);
 
   @media screen and (max-width: 479px) {
     /* start of phone styles */
@@ -61,10 +61,10 @@ $col-amount: 2;
 }
 
 .pollingTitle {
-  color: $color-text;
+  color: var(--color-white);
   white-space: nowrap;
-  padding-bottom: $md-padding-y;
-  padding-top: $md-padding-y;
+  padding-bottom: var(--md-padding-y);
+  padding-top: var(--md-padding-y);
 }
 
 .pollingAnswers {
@@ -97,7 +97,7 @@ $col-amount: 2;
 
 .pollButtonWrapper {
   text-align: center;
-  padding: $sm-padding-y;
+  padding: var(--sm-padding-y);
   width: 100%;
 }
 
diff --git a/bigbluebutton-html5/imports/ui/components/presentation/default-content/styles.scss b/bigbluebutton-html5/imports/ui/components/presentation/default-content/styles.scss
index ae44a5bcfdcaabd46b1667fb6792e02a02aa8e4b..a918094f4d18aa134e1a50e26f50e0d9584db0e9 100644
--- a/bigbluebutton-html5/imports/ui/components/presentation/default-content/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/presentation/default-content/styles.scss
@@ -11,7 +11,7 @@
 .contentWrapper {
   flex-basis: 90%;
 
-  @include mq($large-up) {
+  @include mq(var(--large-up)) {
     flex-basis: 90%;
   }
 }
@@ -28,7 +28,7 @@
   bottom: 0;
   left: 0;
 
-  padding: $line-height-computed;
+  padding: var(--line-height-computed);
   border: 0.25rem dashed;
   border-radius: 1.5rem;
   color: rgba(255, 255, 255, .5);
diff --git a/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/styles.scss b/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/styles.scss
index b5ba291587c5c9be3bc9c37b6863bc870271521e..1cbf8c6493301ca23a7dc4f0387e0ed79d22cb8d 100644
--- a/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/styles.scss
@@ -1,10 +1,5 @@
-@import "/imports/ui/components/button/styles.scss";
 @import "/imports/ui/stylesheets/variables/_all";
 
-$controls-color: $color-gray !default;
-$controls-background: $color-white !default;
-$toolbar-button-border-radius: 5px;
-
 .presentationToolbarWrapper,
 .presentationControls,
 .zoomWrapper {
@@ -14,7 +9,7 @@ $toolbar-button-border-radius: 5px;
   align-items: center;
   margin-left: .5rem;
   margin-right: .5rem;
-  border-radius: $toolbar-button-border-radius;
+  border-radius: var(--toolbar-button-border-radius);
 }
 
 .presentationControls,
@@ -38,20 +33,19 @@ $toolbar-button-border-radius: 5px;
   button,
   select,
   > div {
-    background-color: $controls-background;
-    color: $controls-color;
+    color: var(--toolbar-button-color);
+    background-color: var(--toolbar-button-bg);
     border-top: 0;
     border-bottom: 0;
     border-left: 0;
     border-radius: 0;
     height: 2.25rem;
     box-shadow: none !important;
-    border: 0;
+    border: 0;    
   }
 
   i {
-    font-weight: bolder;
-    color: $color-gray;
+    color: var(--toolbar-button-color);
   }
 
 
@@ -73,7 +67,7 @@ $toolbar-button-border-radius: 5px;
   // flex-direction: column;
   width: 11.5%;
   min-width: 175px;
-  background-color: $color-white;
+  background-color: var(--toolbar-button-bg);
 }
 
 .zoomWrapperNoBorder {
@@ -83,18 +77,21 @@ $toolbar-button-border-radius: 5px;
 .skipSlide,
 .prevSlide {
   border: none !important;
-  width: 2.8rem;
 
   &[aria-disabled="true"] {
     opacity: 1;
-    background-color: $color-gray-lighter;
+    background-color: var(--toolbar-list-bg);
   }
 }
 
 .skipSlideSelect {
-  padding: 0 0.8%;
-  border-left: $border-size solid $color-gray-lighter !important;
-  border-right: $border-size solid $color-gray-lighter !important;
+  padding: 0 var(--sm-padding-y);
+}
+
+.skipSlideSelect,
+.zoomPercentageDisplay {
+  border-left: var(--toolbar-button-border) solid var(--toolbar-button-border-color) !important;
+  border-right: var(--toolbar-button-border) solid var(--toolbar-button-border-color) !important;
 }
 
 .zoomSlider {
@@ -104,14 +101,13 @@ $toolbar-button-border-radius: 5px;
 .zoomMinMax {
   font-weight: normal;
 }
+
 .zoomPercentageDisplay {
   width: 100%;
   height: 2.25rem;
   text-align: center;
   color: black;
-  border-left: $border-size solid $color-gray-lighter !important;
-  border-right: $border-size solid $color-gray-lighter !important;
   display: flex;
   align-items: center;
   justify-content: center;
-}
\ No newline at end of file
+}
diff --git a/bigbluebutton-html5/imports/ui/components/presentation/presentation-uploader/styles.scss b/bigbluebutton-html5/imports/ui/components/presentation/presentation-uploader/styles.scss
index 275aa3218cd33f5a170dc8acf17e5cf64b082a66..c1c015f99f2a4b9861c73b2dc9619b632f5efbdc 100644
--- a/bigbluebutton-html5/imports/ui/components/presentation/presentation-uploader/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/presentation/presentation-uploader/styles.scss
@@ -1,10 +1,8 @@
 @import "../../../stylesheets/variables/_all";
 @import "../../../stylesheets/mixins/_scrollable";
 
-$item-height: 1rem;
-
 @keyframes bar-stripes {
-  from { background-position: $item-height 0; }
+  from { background-position: 1rem 0; }
   to { background-position: 0 0; }
 }
 
@@ -19,14 +17,13 @@ $item-height: 1rem;
   border-collapse: collapse;
 
   > thead {
-
   }
 
   > tbody {
     text-align: left;
 
     > tr {
-      border-bottom: 1px solid transparentize($color-gray-light, .85);
+      border-bottom: 1px solid var(--color-gray-light);
 
       &:last-child {
         border-bottom: 0;
@@ -34,22 +31,21 @@ $item-height: 1rem;
 
       &:hover,
       &:focus {
-        background-color: transparentize($color-gray-light, .85);
+        background-color: var(--color-gray-light);
       }
 
       th,
       td {
-        padding: ($sm-padding-y * 2) ($sm-padding-x / 2);
+        padding: calc(var(--sm-padding-y) * 2) calc(var(--sm-padding-x) / 2);
         white-space: nowrap;
       }
 
       th {
         font-weight: bold;
-        color: $color-gray-dark;
+        color: var(--color-gray-dark);
       }
 
       td {
-
       }
     }
   }
@@ -72,7 +68,7 @@ $item-height: 1rem;
 }
 
 .tableItemName {
-  height: $item-height;
+  height: 1rem;
   width: auto;
   position: relative;
 
@@ -98,32 +94,32 @@ $item-height: 1rem;
 }
 
 .tableItemNew {
-  background-color: transparentize($color-primary, .95);
+  background-color: rgba(0, 128, 129, 0.05);
 }
 
 .tableItemUploading {
-  background-color: transparentize($color-primary, .75);
+  background-color: rgba(0, 128, 129, 0.25);
 }
 
 .tableItemConverting {
-  background-color: transparentize($color-success, .75);
+  background-color: rgba(0, 128, 129, 0.25);
 }
 
 .tableItemError {
-  background-color: transparentize($color-danger, .75);
+  background-color: rgba(223, 39, 33, 0.25);
 }
 
 .tableItemAnimated {
   background-image: linear-gradient(45deg,
-    rgba(255, 255, 255, .15) 25%,
-    transparent 25%,
-    transparent 50%,
-    rgba(255, 255, 255, .15) 50%,
-    rgba(255, 255, 255, .15) 75%,
-    transparent 75%,
-    transparent
+	rgba(255, 255, 255, .15) 25%,
+	transparent 25%,
+	transparent 50%,
+	rgba(255, 255, 255, .15) 50%,
+	rgba(255, 255, 255, .15) 75%,
+	transparent 75%,
+	transparent
   );
-  background-size: $item-height $item-height;
+  background-size: 1rem 1rem;
   animation: bar-stripes 1s linear infinite;
 }
 
@@ -133,14 +129,15 @@ $item-height: 1rem;
   background: transparent;
   cursor: pointer;
   font-size: 1.35rem;
-  color: $color-gray-light;
+  color: var(--color-gray-light);
   padding: 0;
   transition: all .25s;
 }
 
 .itemActionRemove {
-  &:focus, &:hover {
-    color: $color-danger;
+  &:focus,
+  &:hover {
+    color: var(--color-danger);
   }
 
   &[aria-disabled="true"] {
@@ -156,34 +153,34 @@ $item-height: 1rem;
   width: 100%;
   display: block;
   border: 2px dashed;
-  border-radius: $border-radius;
-  padding: ($lg-padding-y * 2.5) ($lg-padding-x * 2.5);
-  margin-top: $lg-padding-y * 5;
+  border-radius: var(--border-radius);
+  padding: calc(var(--lg-padding-y) * 2.5) calc(var(--lg-padding-x) * 2.5);
+  margin-top: calc(var(--lg-padding-y) * 5);
   text-align: center;
-  font-size: $font-size-large;
+  font-size: var(--font-size-large);
   cursor: pointer;
 }
 
 .dropzoneActive {
-  background-color: transparentize($color-gray-light, .85);
+  background-color: var(--color-gray-light);
 }
 
 .dropzoneReject {
-  color: $color-danger;
-  background-color: transparentize($color-danger, .80);
+  color: var(--color-danger);
+  background-color: var(--color-danger);
   cursor: no-drop;
 }
 
 .dropzoneIcon {
-  font-size: $font-size-large * 3;
+  font-size: calc(var(--font-size-large) * 3);
 }
 
 .dropzoneMessage {
-  margin: $md-padding-y 0;
+  margin: var(--md-padding-y) 0;
 }
 
 .dropzoneLink {
-  color: $color-link;
+  color: var(--color-link);
   text-decoration: underline;
   font-size: 80%;
   display: block;
@@ -195,8 +192,8 @@ $item-height: 1rem;
   font-size: 75%;
   font-weight: 700;
   line-height: 1;
-  color: $color-white;
-  background: $color-primary;
+  color: var(--color-white);
+  background: var(--color-primary);
   text-align: center;
   white-space: nowrap;
   vertical-align: baseline;
diff --git a/bigbluebutton-html5/imports/ui/components/presentation/styles.scss b/bigbluebutton-html5/imports/ui/components/presentation/styles.scss
index ba922730dde82628ac441bfac06a697dfa9b5ecf..3630dc43e495a36234c3c3d6168af04e714e0b85 100644
--- a/bigbluebutton-html5/imports/ui/components/presentation/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/presentation/styles.scss
@@ -26,7 +26,7 @@
   align-items: center;
   justify-content: center;
   height: 100%;
-  width:100%;
+  width: 100%;
   overflow: hidden;
   position: relative;
 }
diff --git a/bigbluebutton-html5/imports/ui/components/screenshare/styles.scss b/bigbluebutton-html5/imports/ui/components/screenshare/styles.scss
index 4f87ae84821db95f9f7e5a8cdd0401351c086913..2f9a8ded0b465c0890edbdb8741dfa9dd28a759c 100755
--- a/bigbluebutton-html5/imports/ui/components/screenshare/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/screenshare/styles.scss
@@ -5,6 +5,6 @@
   @extend .connecting;
   z-index: -1;
   background-color: transparent;
-  color: $color-white;
+  color: var(--color-white);
   font-size: 2.5rem * 5;
 }
diff --git a/bigbluebutton-html5/imports/ui/components/settings/styles.scss b/bigbluebutton-html5/imports/ui/components/settings/styles.scss
index ba31c422dc33f516120ac7b9e3dca9f1891b97be..49722b765171260ae7e967ef98fb452e64ce196f 100644
--- a/bigbluebutton-html5/imports/ui/components/settings/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/settings/styles.scss
@@ -28,7 +28,7 @@
 
 .icon {
   margin-right: .5rem;
-  font-size: $font-size-large;
+  font-size: var(--font-size-large);
 }
 
 .tabSelector {
@@ -38,11 +38,11 @@
   flex: 0 0 auto;
   justify-content: flex-start;
   border: none !important;
-  padding: $md-padding-y $md-padding-x;
-  color: $color-gray-dark;
+  padding: var(--md-padding-y) var(--md-padding-x);
+  color: var(--color-gray-dark);
   border-radius: .2rem;
   cursor: pointer;
-  margin-bottom: $sm-padding-y;
+  margin-bottom: var(--sm-padding-y);
   align-items: center;
   flex-grow: 0;
   min-width: 0;
@@ -52,7 +52,7 @@
 
   @include mq($small-only) {
     max-width: 100%;
-    margin-right: $sm-padding-x;
+    margin-right: var(--sm-padding-x);
     & > .icon {
       display: none;
     }
@@ -60,12 +60,12 @@
 }
 
 .selected {
-  color: $color-white;
-  background-color: $color-primary;
+  color: var(--color-white);
+  background-color: var(--color-primary);
   font-weight: bold;
 
   & > .icon {
-    color: $color-white;
+    color: var(--color-white);
   }
 }
 
diff --git a/bigbluebutton-html5/imports/ui/components/settings/submenus/styles.scss b/bigbluebutton-html5/imports/ui/components/settings/submenus/styles.scss
index d64b7e38f0b18ab999e5c2df3ebeaa26ab47319b..fdfff569108a4f1c4cea9365e9f6070566a859ee 100644
--- a/bigbluebutton-html5/imports/ui/components/settings/submenus/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/settings/submenus/styles.scss
@@ -2,7 +2,7 @@
 @import '/imports/ui/stylesheets/variables/_all';
 
 .title {
-  color: $color-gray-dark;
+  color: var(--color-gray-dark);
   font-weight: 400;
   font-size: 1.3rem;
   margin: 0;
@@ -39,13 +39,13 @@
 }
 
 .label {
-  color: $color-gray-label;
+  color: var(--color-gray-label);
   font-size: 0.9rem;
   margin-bottom: 0.5rem;
 }
 
 .labelSmall {
-  color: $color-link;
+  color: var(--color-link);
   font-size: 0.7rem;
   margin-bottom: 0.3rem;
 }
@@ -58,13 +58,13 @@
 }
 
 .select {
-  @include elementFocus($color-primary);
+  @include elementFocus(var(--color-primary));
 
-  background-color: $color-white;
-  border: $border-size solid $color-white;
-  border-radius: $border-size;
-  border-bottom: 0.1rem solid $color-gray-lighter;
-  color: $color-gray-label;
+  background-color: var(--color-white);
+  border: var(--border-size) solid var(--color-white);
+  border-radius: var(--border-size);
+  border-bottom: 0.1rem solid var(--color-gray-lighter);
+  color: var(--color-gray-label);
   width: 100%;
   height: 1.75rem;
   padding: 1px;
@@ -84,7 +84,7 @@
 
 .separator {
   margin: 2.5rem 0;
-  border: 1px solid $color-gray-lighter;
+  border: 1px solid var(--color-gray-lighter);
   opacity: 0.25;
 }
 
@@ -97,13 +97,13 @@
 }
 
 .swatch {
-  @include elementFocus($color-primary);
+  @include elementFocus(var(--color-primary));
 
   position: absolute;
   float: right;
-  background: $color-white;
-  border-radius: $border-size;
-  border: $border-size solid $color-gray-light;
+  background: var(--color-white);
+  border-radius: var(--border-size);
+  border: var(--border-size) solid var(--color-gray-light);
   display: inline-block;
   cursor: pointer;
 }
@@ -111,7 +111,7 @@
 .swatchInner {
   width: 3rem;
   height: 1.1rem;
-  border-radius: $border-size;
+  border-radius: var(--border-size);
 }
 
 .colorPickerOverlay {
diff --git a/bigbluebutton-html5/imports/ui/components/shortcut-help/styles.scss b/bigbluebutton-html5/imports/ui/components/shortcut-help/styles.scss
index 40777c10f5490bc0ca5894e0f72ded85e53aa9ab..53ad63c01c1f102f5e7bf1d7ffd02ed708f92854 100644
--- a/bigbluebutton-html5/imports/ui/components/shortcut-help/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/shortcut-help/styles.scss
@@ -1,27 +1,31 @@
-@import "/imports/ui/stylesheets/variables/_all";
-
-.shortcutTable, .keyCell, .descCell, .tableTitle {
-  border: $border-size solid $color-gray-lighter;
-}
-
-.keyCell {
-  text-align: center;
-}
-
-.descCell {
-  padding-right: $jumbo-padding-x !important;
-}
-
-.keyCell, .descCell {
-  padding: $sm-padding-x;
-  margin: auto;
-}
-
-.shortcutTable {
-  border-collapse: collapse;
-  margin: auto;
-}
-
-.tableTitle {
-  padding: $sm-padding-x;
-}
+@import "/imports/ui/stylesheets/variables/_all";
+
+.shortcutTable,
+.keyCell,
+.descCell,
+.tableTitle {
+  border: var(--border-size) solid var(--color-gray-lighter);
+}
+
+.keyCell {
+  text-align: center;
+}
+
+.descCell {
+  padding-right: var(--jumbo-padding-x) !important;
+}
+
+.keyCell,
+.descCell {
+  padding: var(--sm-padding-x);
+  margin: auto;
+}
+
+.shortcutTable {
+  border-collapse: collapse;
+  margin: auto;
+}
+
+.tableTitle {
+  padding: var(--sm-padding-x);
+}
diff --git a/bigbluebutton-html5/imports/ui/components/toast/styles.scss b/bigbluebutton-html5/imports/ui/components/toast/styles.scss
index 48446e31286206bfb272a4d8b786c1baff833947..1ffa0beb8cff7220260c7dda87b8dbc788bb3700 100755
--- a/bigbluebutton-html5/imports/ui/components/toast/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/toast/styles.scss
@@ -1,22 +1,24 @@
 @import "../../stylesheets/variables/_all";
 
-$toast-default-color: $color-white;
-$toast-default-bg: $color-gray;
+:root {
+  --toast-default-color: var(--color-white);
+  --toast-default-bg: var(--color-gray);
 
-$toast-info-color: $color-white;
-$toast-info-bg: $color-primary;
+  --toast-info-color: var(--color-white);
+  --toast-info-bg: var(--color-primary);
 
-$toast-success-color: $color-white;
-$toast-success-bg: $color-success;
+  --toast-success-color: var(--color-white);
+  --toast-success-bg: var(--color-success);
 
-$toast-error-color: $color-white;
-$toast-error-bg: $color-danger;
+  --toast-error-color: var(--color-white);
+  --toast-error-bg: var(--color-danger);
 
-$toast-warning-color: $color-white;
-$toast-warning-bg: $color-warning;
+  --toast-warning-color: var(--color-white);
+  --toast-warning-bg: var(--color-warning);
 
-$background: $color-white;
-$background-active: darken($color-white, 5%);
+  --background: var(--color-white);
+  --background-active: #eee;
+}
 
 @mixin notification-variant($icon-color, $icon-bg) {
   display: flex;
@@ -33,14 +35,14 @@ $background-active: darken($color-white, 5%);
 }
 
 .smallToastContainer {
-  background-color: inherit;  
+  background-color: inherit;
   margin: -.35rem;
 }
 
 .icon {
   align-self: flex-start;
   margin-bottom: auto;
-  margin-right: $sm-padding-x;
+  margin-right: var(--sm-padding-x);
   width: 2rem;
   border-radius: 50%;
   position: relative;
@@ -64,14 +66,14 @@ $background-active: darken($color-white, 5%);
   }
 }
 
-.separator { 
+.separator {
   height: 1px;
   width: 99%;
   position: absolute;
   margin-left: -.5em;
-  background-color: $color-gray-lighter;
-  margin-top: $line-height-computed * .5;
-  margin-bottom: $line-height-computed * .5;
+  background-color: var(--color-gray-lighter);
+  margin-top: calc(var(--line-height-computed) * .5);
+  margin-bottom: calc(var(--line-height-computed) * .5);
   @include mq($small-only) {
     position: relative;
     margin-left: auto;
@@ -81,7 +83,7 @@ $background-active: darken($color-white, 5%);
 .message {
   margin-top: auto;
   margin-bottom: auto;
-  font-size: $font-size-small;
+  font-size: var(--font-size-small);
   max-height: 15vh;
   overflow: auto;
 }
@@ -91,60 +93,60 @@ $background-active: darken($color-white, 5%);
 }
 
 .default {
-  @include notification-variant($toast-default-color, $toast-default-bg);
+  @include notification-variant(var(--toast-default-color), var(--toast-default-bg));
 }
 
 .info {
-  @include notification-variant($toast-info-color, $toast-info-bg);
+  @include notification-variant(var(--toast-info-color), var(--toast-info-bg));
 }
 
 .success {
-  @include notification-variant($toast-success-color, $toast-success-bg);
+  @include notification-variant(var(--toast-success-color), var(--toast-success-bg));
 }
 
 .error {
-  @include notification-variant($toast-error-color, $toast-error-bg);
+  @include notification-variant(var(--toast-error-color), var(--toast-error-bg));
 }
 
 .warning {
-  @include notification-variant($toast-warning-color, $toast-warning-bg);
+  @include notification-variant(var(--toast-warning-color), var(--toast-warning-bg));
 }
 
 .container {
   z-index: 9999;
   position: fixed;
-  padding: $sm-padding-y;
+  padding: var(--sm-padding-y);
   width: 15vw;
   min-width: 320px;
   box-sizing: border-box;
-  top: $md-padding-y;
-  right: $md-padding-y;
+  top: var(--md-padding-y);
+  right: var(--md-padding-y);
   max-height: 75vh;
   overflow: hidden;
 
   @include mq($small-only) {
-    left: $sm-padding-y;
+    left: var(--sm-padding-y);
     width: auto;
   }
 }
 
 .toast {
   position: relative;
-  margin-bottom: $sm-padding-x;
-  padding: $md-padding-x;
-  border-radius: $border-radius;
+  margin-bottom: var(--sm-padding-x);
+  padding: var(--md-padding-x);
+  border-radius: var(--border-radius);
   box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 15px 0 rgba(0, 0, 0, 0.05);
   display: flex;
   justify-content: space-between;
   cursor: pointer;
-  color: $color-text;
-  background-color: $background;
+  color: var(--color-text);
+  background-color: var(--background);
   animation-duration: 0.75s;
   animation-fill-mode: both;
 
   &:hover,
   &:focus {
-    background-color: $background-active;
+    background-color: var(--background-active);
   }
 }
 
@@ -162,14 +164,14 @@ $background-active: darken($color-white, 5%);
   opacity: .5;
   transition: .3s ease;
   font-size: .35rem;
-  color: $color-gray-dark;
+  color: var(--color-gray-dark);
   padding: .4rem;
   line-height: 0;
   position: absolute;
-  top: $md-padding-y;
-  right: $md-padding-y;
+  top: var(--md-padding-y);
+  right: var(--md-padding-y);
   font-size: 70%;
-  top: $lg-padding-y;
+  top: var(--lg-padding-y);
   &:before {
     margin-left: -.2rem;
   }
@@ -186,7 +188,7 @@ $background-active: darken($color-white, 5%);
     align-self: flex-start;
     margin-top: auto;
     margin-bottom: auto;
-    margin-left: $sm-padding-x;
+    margin-left: var(--sm-padding-x);
     font-size: 1rem;
     line-height: 1;
     border: none;
@@ -201,7 +203,7 @@ $background-active: darken($color-white, 5%);
     width: 0;
   }
 }
-.backgroundColorInherit  {
+.backgroundColorInherit {
   background-color: inherit;
 }
 
@@ -213,6 +215,6 @@ $background-active: darken($color-white, 5%);
   height: 5px;
   z-index: 9999;
   animation: track-progress linear 1;
-  background-color: $color-gray-lighter;
-  border-radius: $border-radius;
+  background-color: var(--color-gray-lighter);
+  border-radius: var(--border-radius);
 }
diff --git a/bigbluebutton-html5/imports/ui/components/user-avatar/styles.scss b/bigbluebutton-html5/imports/ui/components/user-avatar/styles.scss
index 77f652bd10f9468a070c5a6fbcc90aa84ddde85b..a36615df762396b07c6a69e169523bd4a1f361df 100755
--- a/bigbluebutton-html5/imports/ui/components/user-avatar/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/user-avatar/styles.scss
@@ -5,12 +5,14 @@
 /* Variables
  * ==========
  */
-$user-avatar-border: $color-gray-light;
-$user-avatar-text: $color-white;
-$user-indicator-voice-bg: $color-success;
-$user-indicator-muted-bg: $color-danger;
-$user-list-bg: $color-off-white;
-$user-color: currentColor; //picks the current color reference in the class
+:root {
+  --user-avatar-border: var(--color-gray-light);
+  --user-avatar-text: var(--color-white);
+  --user-indicator-voice-bg: var(--color-success);
+  --user-indicator-muted-bg: var(--color-danger);
+  --user-list-bg: var(--color-off-white);
+  --user-color: currentColor; //picks the current color reference in the class
+}
 
 .avatar {
   position: relative;
@@ -23,7 +25,8 @@ $user-color: currentColor; //picks the current color reference in the class
   transition: .3s ease-in-out;
   font-size: .85rem;
 
-  &:after, &:before {
+  &:after,
+  &:before {
     content: "";
     position: absolute;
     width: 0;
@@ -32,12 +35,12 @@ $user-color: currentColor; //picks the current color reference in the class
     color: inherit;
     top: auto;
     left: auto;
-    bottom: $user-indicators-offset;
-    right: $user-indicators-offset;
-    border: 1.5px solid $user-list-bg;
+    bottom: var(--user-indicators-offset);
+    right: var(--user-indicators-offset);
+    border: 1.5px solid var(--user-list-bg);
     border-radius: 50%;
-    background-color: $user-indicator-voice-bg;
-    color: $user-avatar-text;
+    background-color: var(--user-indicator-voice-bg);
+    color: var(--user-avatar-text);
     opacity: 0;
     transition: .3s ease-in-out;
     font-family: 'bbb-icons';
@@ -56,7 +59,7 @@ $user-color: currentColor; //picks the current color reference in the class
   right: 0;
   bottom: 0;
   left: 0;
-  background-color: $user-color;
+  background-color: var(--user-color);
   border-radius: inherit;
   animation: pulse 1s infinite ease-in;
 }
@@ -87,7 +90,7 @@ $user-color: currentColor; //picks the current color reference in the class
 .voice {
   &:after {
     content: "\00a0\e931\00a0";
-    background-color: $user-indicator-voice-bg;
+    background-color: var(--user-indicator-voice-bg);
     top: 1.375rem;
     left: 1.375rem;
   }
@@ -96,7 +99,7 @@ $user-color: currentColor; //picks the current color reference in the class
 .muted {
   &:after {
     content: "\00a0\e932\00a0";
-    background-color: $user-indicator-muted-bg;
+    background-color: var(--user-indicator-muted-bg);
   }
 }
 
@@ -107,12 +110,14 @@ $user-color: currentColor; //picks the current color reference in the class
   }
 }
 
-.listenOnly, .muted, .voice {
+.listenOnly,
+.muted,
+.voice {
   @include indicatorStyles();
 }
 
 .content {
-  color: $user-avatar-text;
+  color: var(--user-avatar-text);
   top: 50%;
   position: absolute;
   text-align: center;
@@ -121,7 +126,8 @@ $user-color: currentColor; //picks the current color reference in the class
   font-size: 110%;
   text-transform: capitalize;
 
-  &, & > * {
+  &,
+  & > * {
     line-height: 0; // to keep centralized vertically
   }
 }
diff --git a/bigbluebutton-html5/imports/ui/components/user-list/chat-list-item/chat-icon/styles.scss b/bigbluebutton-html5/imports/ui/components/user-list/chat-list-item/chat-icon/styles.scss
index 9ccadade2c4231c0a053638c8cdeffef91efcb26..f0ed4b3c19fa50d87e80e67c93eda25da21626f4 100644
--- a/bigbluebutton-html5/imports/ui/components/user-list/chat-list-item/chat-icon/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/user-list/chat-list-item/chat-icon/styles.scss
@@ -2,7 +2,7 @@
 
 .chatThumbnail {
   @extend %flex-column;
-  color: $color-gray-light;
+  color: var(--color-gray-light);
   justify-content: center;
   font-size: 175%;
 }
diff --git a/bigbluebutton-html5/imports/ui/components/user-list/chat-list-item/chat-unread-messages/styles.scss b/bigbluebutton-html5/imports/ui/components/user-list/chat-list-item/chat-unread-messages/styles.scss
index 86c0f72bd20c5604484d74cc9e19c2901e3f1441..5f4c6341db98ce55d9409ad3018efb7c3fcce36d 100644
--- a/bigbluebutton-html5/imports/ui/components/user-list/chat-list-item/chat-unread-messages/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/user-list/chat-list-item/chat-unread-messages/styles.scss
@@ -9,11 +9,11 @@
   @extend %flex-column;
   @extend %no-margin;
   justify-content: center;
-  color: $color-white;
+  color: var(--color-white);
   line-height: calc(1rem + 1px);
   padding: 0 0.5rem;
   text-align: center;
   border-radius: 0.5rem/50%;
   font-size: 0.8rem;
-  background-color: $unread-messages-bg;
+  background-color: var(--unread-messages-bg);
 }
diff --git a/bigbluebutton-html5/imports/ui/components/user-list/chat-list-item/styles.scss b/bigbluebutton-html5/imports/ui/components/user-list/chat-list-item/styles.scss
index 9293b9fff7f3c6c89ccd5ecebb96d5cdae10d1aa..84e607db44144cfdb830ba654f779cf1a655d136 100755
--- a/bigbluebutton-html5/imports/ui/components/user-list/chat-list-item/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/user-list/chat-list-item/styles.scss
@@ -6,23 +6,23 @@
   cursor: pointer;
   padding: 0;
   text-decoration: none;
-  color: $color-gray-dark;
-  background-color: $color-off-white;
+  color: var(--color-gray-dark);
+  background-color: var(--color-off-white);
 }
 
 .chatListItemLink {
   display: flex;
   flex-grow: 1;
   text-decoration: none;
-  padding-left: $sm-padding-x / 2;
-  padding-right: $sm-padding-x;
-  padding-top: $sm-padding-y;
-  padding-bottom: $sm-padding-y;
+  padding-left: calc(var(--sm-padding-x) / 2);
+  padding-right: var(--sm-padding-x);
+  padding-top: var(--sm-padding-y);
+  padding-bottom: var(--sm-padding-y);
   width: 100%;
 
   .chatListItem:first-child > & {
-    padding-top: $sm-padding-y * 1.85;
-    padding-bottom: $sm-padding-y * 1.85;
+    padding-top: calc(var(--sm-padding-y) * 1.85);
+    padding-bottom: calc(var(--sm-padding-y) * 1.85);
   }
 }
 
@@ -42,16 +42,16 @@
   @extend %text-elipsis;
   font-size: 0.9rem;
   font-weight: 400;
-  margin-left: $sm-padding-x;
-  margin-right: $sm-padding-x;
+  margin-left: var(--sm-padding-x);
+  margin-right: var(--sm-padding-x);
   position: relative;
-  top: $md-padding-y;
+  top: var(--md-padding-y);
   padding: .5rem 0;
   margin-top: -.5rem;
 }
 
 .active {
-  background-color: $list-item-bg-hover;
-  box-shadow: inset 0 0 0 $border-size $item-focus-border, inset 1px 0 0 1px $item-focus-border;
+  background-color: var(--list-item-bg-hover);
+  box-shadow: inset 0 0 0 var(--border-size) var(--item-focus-border), inset 1px 0 0 1px var(--item-focus-border);
   outline: none;
 }
diff --git a/bigbluebutton-html5/imports/ui/components/user-list/custom-logo/styles.scss b/bigbluebutton-html5/imports/ui/components/user-list/custom-logo/styles.scss
index 4036b88f2d947a72bfbb4eed60425542b4b7317f..13f042648f722b27c48c9da9c4e328ba382a65e5 100755
--- a/bigbluebutton-html5/imports/ui/components/user-list/custom-logo/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/user-list/custom-logo/styles.scss
@@ -2,13 +2,13 @@
 
 .separator {
   height: 1px;
-  background-color: $color-gray-lighter;
-  margin-top: $line-height-computed * .5;
-  margin-bottom: $line-height-computed * .5;
+  background-color: var(--color-gray-lighter);
+  margin-top: calc(var(--line-height-computed) * .5);
+  margin-bottom: calc(var(--line-height-computed) * .5);
 }
 
 .branding {
-  padding: 0 $sm-padding-x;
+  padding: 0 var(--sm-padding-x);
   width: 100%;
   & > img {
     max-height: 2rem;
diff --git a/bigbluebutton-html5/imports/ui/components/user-list/styles.scss b/bigbluebutton-html5/imports/ui/components/user-list/styles.scss
index f077a9536642064c7134623e0b4aa25d0b3b47e3..d8de801266d015d2bfbf6c4b70f90fdc9399518c 100755
--- a/bigbluebutton-html5/imports/ui/components/user-list/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/user-list/styles.scss
@@ -5,26 +5,29 @@
  * ==========
  */
 
-$unread-messages-bg: $color-danger;
-$user-list-text: $color-gray;
-$user-list-bg: $color-off-white;
+// TODO: would be better to have those variables scoped and not global
+:root {
+  --unread-messages-bg: var(--color-danger);
+  --user-list-text: var(--color-gray);
+  --user-list-bg: var(--color-off-white);
 
-$user-thumbnail-border: $color-gray-light;
-$user-thumbnail-text: $user-thumbnail-border;
+  --user-thumbnail-border: var(--color-gray-light);
+  --user-thumbnail-text: var(--user-thumbnail-border);
 
-$voice-user-bg: $color-success;
-$voice-user-text: $color-white;
+  --voice-user-bg: var(--color-success);
+  --voice-user-text: var(--color-white);
 
-$moderator-text: $color-white;
-$moderator-bg: $color-primary;
+  --moderator-text: var(--color-white);
+  --moderator-bg: var(--color-primary);
 
-$sub-name-color: $color-gray-light;
+  --sub-name-color: var(--color-gray-light);
 
-$user-icons-color: $color-gray-light;
-$user-icons-color-hover: $color-gray;
+  --user-icons-color: var(--color-gray-light);
+  --user-icons-color-hover: var(--color-gray);
 
-$list-item-bg-hover: darken($color-off-white, 7%);
-$item-focus-border: $color-blue-lighter;
+  --list-item-bg-hover: #dce4ed;
+  --item-focus-border: var(--color-blue-lighter);
+}
 
 /* classes for extending
  * ==========
@@ -51,15 +54,14 @@ $item-focus-border: $color-blue-lighter;
   }
 
   &:focus {
-    background-color: $list-item-bg-hover;
-    box-shadow: inset 0 0 0 $border-size $item-focus-border, inset 1px 0 0 1px $item-focus-border;
+    background-color: var(--list-item-bg-hover);
+    box-shadow: inset 0 0 0 var(--border-size) var(--item-focus-border), inset 1px 0 0 1px var(--item-focus-border);
     outline: none;
   }
 
   &:hover {
-    background-color: $list-item-bg-hover;
+    background-color: var(--list-item-bg-hover);
   }
-
 }
 
 /* Styling
@@ -69,10 +71,10 @@ $item-focus-border: $color-blue-lighter;
 .userList {
   @extend %flex-column;
   justify-content: flex-start;
-  background-color: $user-list-bg;
-  color: $user-list-text;
+  background-color: var(--user-list-bg);
+  color: var(--user-list-text);
   height: 100vh;
-  padding-top: $md-padding-x;
+  padding-top: var(--md-padding-x);
 }
 
 .lists {
@@ -89,7 +91,8 @@ $item-focus-border: $color-blue-lighter;
   flex-shrink: 1;
 }
 
-.participants, .messages {
+.participants,
+.messages {
   flex-grow: 0;
   display: flex;
   flex-flow: column;
@@ -106,23 +109,25 @@ $item-focus-border: $color-blue-lighter;
   flex-shrink: 1;
   overflow-x: hidden;
   overflow-y: auto;
-  margin-top: ($lg-padding-x / 2);
+  margin-top: (var(--lg-padding-x) / 2);
 }
 
 .smallTitle {
   font-size: 0.85rem;
   font-weight: 600;
   text-transform: uppercase;
-  padding: 0 $sm-padding-x;
-  margin: 0 0 ($lg-padding-x / 2) 0;
-  color: $color-gray-light;
+  padding: 0 var(--sm-padding-x);
+  margin: 0 0 (var(--lg-padding-x) / 2) 0;
+  color: var(--color-gray-light);
 }
 
-.enter, .appear {
+.enter,
+.appear {
   opacity: 0.01;
 }
 
-.enterActive, .appearActive {
+.enterActive,
+.appearActive {
   opacity: 1;
   transition: all 600ms;
 }
diff --git a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/styles.scss b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/styles.scss
index 3d136da16cfd1ce7eca0e212d2ca188fbbcede54..6ab7b7e20fe87ce91b77de1c08f0f4b40b084027 100755
--- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/styles.scss
@@ -16,8 +16,8 @@
 }
 
 .scrollableList {
-  @include elementFocus($list-item-bg-hover);
-  @include scrollbox-vertical($user-list-bg);
+  @include elementFocus(var(--list-item-bg-hover));
+  @include scrollbox-vertical(var(--user-list-bg));
 
   &:active {
     box-shadow: none;
@@ -26,7 +26,7 @@
 }
 
 .list {
-  margin-left: $md-padding-y;
+  margin-left: var(--md-padding-y);
   margin-bottom: 1px;
 }
 
@@ -40,7 +40,7 @@
   margin: 1rem auto;
   width: 2.2rem;
   border: 0;
-  border-top: 1px solid $color-gray-lighter;
+  border-top: 1px solid var(--color-gray-lighter);
 }
 
 .chatsList {
@@ -49,8 +49,8 @@
   flex-shrink: 1;
 }
 
-.footer{
+.footer {
   @include mq($small-only) {
-		margin: 4rem;
+    margin: 4rem;
   }
 }
diff --git a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-dropdown/styles.scss b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-dropdown/styles.scss
index e6e8b750e51a95e4d044ad7f847b3f4069ed25d7..1d9515b856bee3e0fc8aa1efbfac77bb7f036792 100644
--- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-dropdown/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-dropdown/styles.scss
@@ -6,12 +6,14 @@
  */
 
 // Actions
-.enter, .appear {
+.enter,
+.appear {
   opacity: 0;
   max-height: 0;
 }
 
-.enterActive, .appearActive {
+.enterActive,
+.appearActive {
   opacity: 1;
   transition: all 300ms;
   max-height: 10rem;
@@ -29,12 +31,14 @@
 }
 
 // Text under username
-.subUserNameEnter, .subUserNameAppear {
+.subUserNameEnter,
+.subUserNameAppear {
   opacity: 0.01;
   transform: translateY(-100%);
 }
 
-.subUserNameEnterActive, .subUserNameAppearActive {
+.subUserNameEnterActive,
+.subUserNameAppearActive {
   transform: translateY(0%);
   opacity: 1;
   transition: all 500ms;
@@ -53,22 +57,22 @@
 }
 
 .actionsHeader {
-  color: $color-gray;
+  color: var(--color-gray);
 
   &:hover {
-    color: $color-gray !important;
+    color: var(--color-gray) !important;
     cursor: default;
   }
 }
 
 .active {
-  background-color: $list-item-bg-hover;
-  box-shadow: inset 0 0 0 $border-size $item-focus-border, inset 1px 0 0 1px $item-focus-border;
+  background-color: var(--list-item-bg-hover);
+  box-shadow: inset 0 0 0 var(--border-size) var(--item-focus-border), inset 1px 0 0 1px var(--item-focus-border);
   outline: none;
 }
 
 .usertListItemWithMenu {
-  background-color: $list-item-bg-hover;
+  background-color: var(--list-item-bg-hover);
 }
 
 .userListItem {
@@ -87,9 +91,9 @@
   display: flex;
   flex-flow: row;
 
-  padding-top: $lg-padding-y;
-  padding-bottom: $lg-padding-y;
-  padding-left: $lg-padding-y;
+  padding-top: var(--lg-padding-y);
+  padding-bottom: var(--lg-padding-y);
+  padding-left: var(--lg-padding-y);
 }
 
 .dropdown {
@@ -105,7 +109,8 @@
 }
 
 .emojiSelected {
-  span, i {
-    color: $color-primary;
+  span,
+  i {
+    color: var(--color-primary);
   }
 }
diff --git a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-icons/styles.scss b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-icons/styles.scss
index 2fe05a0e48a9e7c40bf935ed274814e1336acf15..bce6bcd489d7664b4b1ec14cb947af38e1a3d8ab 100644
--- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-icons/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-icons/styles.scss
@@ -6,16 +6,16 @@
   flex-basis: 1rem;
   justify-content: center;
   transition: 0.3s all;
-  margin-left: $sm-padding-x / 2;
+  margin-left: var(--sm-padding-x) / 2;
 }
 
 .userIcons {
   display: flex;
   flex-flow: row;
   justify-content: space-between;
-  margin-left: $sm-padding-x / 2;
+  margin-left: var(--sm-padding-x) / 2;
   text-align: right;
   font-size: 1rem;
   flex-shrink: 1;
-  color: $user-icons-color;
+  color: var(--user-icons-color);
 }
diff --git a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-name/styles.scss b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-name/styles.scss
index 93929363954213f7c351259b05b2a42bcf3b732e..a16f679221894f2d0fc8488b8e40a1f6d410a220 100755
--- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-name/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-name/styles.scss
@@ -4,7 +4,7 @@
   @extend %flex-column;
   min-width: 0;
   flex-grow: 1;
-  margin-left: $sm-padding-x;
+  margin-left: var(--sm-padding-x);
   justify-content: center;
   font-size: 0.95rem;
 }
@@ -17,14 +17,14 @@
   white-space: nowrap;
   transition: all 0.3s;
   font-weight: 400;
-  color: $color-gray-dark;
+  color: var(--color-gray-dark);
 }
 
 .userNameSub {
   @extend %no-margin;
   font-size: 0.75rem;
   font-weight: 200;
-  color: $color-gray;
+  color: var(--color-gray);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
diff --git a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/styles.scss b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/styles.scss
index a7bdeaa4de88fd8eed76900f9f06121294491ad0..0b2e0230ef2eb8ffd18020e00768a742e429b223 100755
--- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/styles.scss
@@ -1,32 +1,27 @@
 @import "/imports/ui/stylesheets/variables/_all";
-$icon-offset-left: -.44em;
-$icon-offset-top: -.38em;
-$square-side-length: 1.56rem;
-$dropdown-offset-top: 4.8rem;
-$dropdown-offset-right: -0.2rem;
 
 .dropdown {
   position: static;
 }
 
 .dropdownContent {
-  top: $dropdown-offset-top;
-  margin-right: $dropdown-offset-right;
+  top: 4.8rem;
+  margin-right: -0.2rem;
 }
 
 .optionsButton{
   display: block;
-  margin-right: $sm-padding-y;
+  margin-right: var(--sm-padding-y);
 
   span:first-child {
-    width: $square-side-length;
-    height: $square-side-length;
+    width: 1.56rem;
+    height: 1.56rem;
   }
 
   i {
-    top: $icon-offset-top;
-    left: $icon-offset-left;
-    color: $color-gray-dark !important;
+    top: -.38em;
+    left: -.44em;
+    color: var(--color-gray-dark) !important;
     background-color: transparent !important;
   }
 
diff --git a/bigbluebutton-html5/imports/ui/components/video-provider/styles.scss b/bigbluebutton-html5/imports/ui/components/video-provider/styles.scss
index 35d9e44d577e0a1a7149ba2874245ec33b4db366..0138f13af046e09641f9e976bc322917f3ca3964 100644
--- a/bigbluebutton-html5/imports/ui/components/video-provider/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/video-provider/styles.scss
@@ -2,17 +2,17 @@
 //   position: relative;
 //
 //   &:before {
-//     display: block;
-//     content: "";
-//     width: 100%;
-//     padding-top: ($height / $width) * 100%;
+//	 display: block;
+//	 content: "";
+//	 width: 100%;
+//	 padding-top: (var(--height) / var(--width)) * 100%;
 //   }
 //
 //   > .content {
-//     position: absolute;
-//     top: 0;
-//     left: 0;
-//     right: 0;
-//     bottom: 0;
+//	 position: absolute;
+//	 top: 0;
+//	 left: 0;
+//	 right: 0;
+//	 bottom: 0;
 //   }
 // }
diff --git a/bigbluebutton-html5/imports/ui/components/video-provider/video-list/styles.scss b/bigbluebutton-html5/imports/ui/components/video-provider/video-list/styles.scss
index e5a9a27f7b650f3d9a85facd2385c1821cf80788..41c5de7ab1b1d80cc4e18acbad3b0ad3aa79021b 100755
--- a/bigbluebutton-html5/imports/ui/components/video-provider/video-list/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/video-provider/video-list/styles.scss
@@ -1,10 +1,9 @@
 @import "/imports/ui/stylesheets/variables/_all";
 
-$cam-dropdown-width: 70%;
-$audio-indicator-width: 1.12rem;
-$audio-indicator-fs: 75%;
-
 .videoCanvas {
+  --cam-dropdown-width: 70%;
+  --audio-indicator-width: 1.12rem;
+  --audio-indicator-fs: 75%;
   position: absolute;
   top: 0;
   left: 0;
@@ -52,12 +51,11 @@ $audio-indicator-fs: 75%;
     right: 0;
     bottom: 0;
     left: 0;
-    border: 5px solid rgba($color-white, .25);
+    border: 5px solid rgba(var(--color-white), .25);
     border-radius: 5px;
     opacity: 0;
     transition: opacity .1s;
     pointer-events: none;
-
   }
 
   &.talking::after {
@@ -81,8 +79,8 @@ $audio-indicator-fs: 75%;
 .connecting {
   @extend %media-area;
   position: absolute;
-  background-color: $color-gray;
-  color: rgba($color-white, .25);
+  background-color: var(--color-gray);
+  color: rgba(var(--color-white), .25);
   font-size: 2.5rem;
   text-align: center;
   white-space: nowrap;
@@ -123,7 +121,7 @@ $audio-indicator-fs: 75%;
   flex: 1;
   display: flex;
   outline: none !important;
-  width: $cam-dropdown-width;
+  width: var(--cam-dropdown-width);
 
   @include mq($medium-up) {
     > [aria-expanded] {
@@ -135,8 +133,8 @@ $audio-indicator-fs: 75%;
 .dropdownTrigger {
   @extend %text-elipsis;
   position: relative;
-  background-color: rgba($color-gray, .5);
-  color: $color-white;
+  background-color: rgba(var(--color-gray), .5);
+  color: var(--color-white);
   font-size: 80%;
   border-radius: 15px;
   padding: 0 1rem 0 .5rem !important;
@@ -167,17 +165,18 @@ $audio-indicator-fs: 75%;
   }
 }
 
-.muted, .voice {
+.muted,
+.voice {
   display: inline-block;
-  width: $audio-indicator-width;
-  height: $audio-indicator-width;
-  min-width: $audio-indicator-width;
-  min-height: $audio-indicator-width;
-  color: $color-white;
+  width: var(--audio-indicator-width);
+  height: var(--audio-indicator-width);
+  min-width: var(--audio-indicator-width);
+  min-height: var(--audio-indicator-width);
+  color: var(--color-white);
   border-radius: 50%;
 
   &::before {
-    font-size: $audio-indicator-fs;
+    font-size: var(--audio-indicator-fs);
   }
 }
 
@@ -185,8 +184,8 @@ $audio-indicator-fs: 75%;
   background: rgba(0,0,0,0.85);
   padding: 15px;
   height: 100%;
-  color: $color-white;
-  font-size: $font-size-small;
+  color: var(--color-white);
+  font-size: var(--font-size-small);
   border-radius: 5px;
   position: absolute;
   z-index: 1;
@@ -202,9 +201,9 @@ $audio-indicator-fs: 75%;
 }
 
 .muted {
-  background-color: $color-danger;
+  background-color: var(--color-danger);
 }
 
 .voice {
-  background-color: $color-success;
+  background-color: var(--color-success);
 }
diff --git a/bigbluebutton-html5/imports/ui/components/video-provider/video-menu/styles.scss b/bigbluebutton-html5/imports/ui/components/video-provider/video-menu/styles.scss
index 4902f32e50a27632fb2109c34830c33ad4939dff..f8051d532d6b67debf1442d338b8cbf997b8771c 100755
--- a/bigbluebutton-html5/imports/ui/components/video-provider/video-menu/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/video-provider/video-menu/styles.scss
@@ -14,11 +14,11 @@
   height: 4rem;
   @include mq($small-only) {
     margin: auto 1rem;
-  };
+  }
 }
 
 .label {
-  font-size: $font-size-small;
+  font-size: var(--font-size-small);
   white-space: nowrap;
   margin-top: .5rem;
   color: inherit;
@@ -26,7 +26,7 @@
   @include mq($small-only) {
     margin-top: 0;
     font-size: 90%;
-  };
+  }
 }
 
 .item {
@@ -37,5 +37,5 @@
 
   @include mq($small-only) {
     flex-direction: row;
-  };
+  }
 }
diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/styles.scss b/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/styles.scss
index 60d9d7fbd1c6167322a98595736f153a27b0cc8b..7ed037e83b1ae7a5f93076aa908fc25a87a65816 100644
--- a/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/styles.scss
@@ -1,20 +1,26 @@
 @import "../../../stylesheets/variables/_all";
 
-$toolbar-margin: .8rem;
-$toolbar-box-shadow: 0 0 10px -2px rgba(0, 0, 0, .25);
-$toolbar-button-width: 3rem;
-$toolbar-button-height: 3rem;
-$toolbar-button-font-size: 1.75rem;
-$toolbar-button-border: 1px;
-$toolbar-button-border-radius: 5px;
-$toolbar-list-bg: darken($color-white, 10%);
-$toolbar-list-color: $color-gray;
+:root {
+  --toolbar-margin: .8rem;
+  --toolbar-box-shadow: 0 0 10px -2px rgba(0, 0, 0, .25);
+  --toolbar-button-color: var(--btn-default-color);
+  --toolbar-button-bg: var(--btn-default-bg);  
+  --toolbar-button-width: 3rem;
+  --toolbar-button-height: 3rem;
+  --toolbar-button-font-size: 1.75rem;
+  --toolbar-button-border: 1px;
+  --toolbar-button-border-radius: 5px;
+  --toolbar-button-border-color: var(--color-gray-lighter);
+  --toolbar-list-bg: #ddd;
+  --toolbar-list-bg-focus: #c6c6c6;
+  --toolbar-list-color: var(--color-gray);
+}
 
 .toolbarContainer {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  margin-right: $toolbar-margin;
+  margin-right: var(--toolbar-margin);
   position: absolute;
   top: 0;
   right: 0;
@@ -33,17 +39,17 @@ $toolbar-list-color: $color-gray;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  box-shadow: $toolbar-box-shadow;
-  border-radius: $toolbar-button-border-radius;
+  box-shadow: var(--toolbar-box-shadow);
+  border-radius: var(--toolbar-button-border-radius);
   pointer-events: all;
 
   .buttonWrapper > .toolbarButton {
-    border-bottom: 1px solid $color-gray-lighter;
+    border-bottom: var(--toolbar-button-border) solid var(--toolbar-button-border-color);
   }
 
   .buttonWrapper:first-child > .toolbarButton {
-    border-top-left-radius: $toolbar-button-border-radius;
-    border-top-right-radius: $toolbar-button-border-radius;
+    border-top-left-radius: var(--toolbar-button-border-radius);
+    border-top-right-radius: var(--toolbar-button-border-radius);
 
     &.toolbarActive {
       border-top-left-radius: 0;
@@ -52,8 +58,8 @@ $toolbar-list-color: $color-gray;
 
   .buttonWrapper:last-child > .toolbarButton {
     border-bottom: 0;
-    border-bottom-left-radius: $toolbar-button-border-radius;
-    border-bottom-right-radius: $toolbar-button-border-radius;
+    border-bottom-left-radius: var(--toolbar-button-border-radius);
+    border-bottom-right-radius: var(--toolbar-button-border-radius);
 
     &.toolbarActive {
       border-bottom-left-radius: 0;
@@ -62,10 +68,10 @@ $toolbar-list-color: $color-gray;
 }
 
 .buttonWrapper {
-  width: $toolbar-button-width;
-  min-width: $toolbar-button-width;
-  height: $toolbar-button-height;
-  min-height: $toolbar-button-height;
+  width: var(--toolbar-button-width);
+  min-width: var(--toolbar-button-width);
+  height: var(--toolbar-button-height);
+  min-height: var(--toolbar-button-height);
   position: relative;
 }
 
@@ -77,26 +83,30 @@ $toolbar-list-color: $color-gray;
   display: flex;
   flex-direction: row;
   align-items: center !important;
-  justify-content: center !important;
-  font-size: $toolbar-button-font-size;
+  justify-content: center !important;  
   position: relative;
   border-radius: 0;
   box-shadow: none !important;
   z-index: 1;
+  font-size: var(--toolbar-button-font-size);
+  color: var(--toolbar-button-color);
+  background-color: var(--toolbar-button-bg);
+  border-color: var(--toolbar-button-border-color);
 
-  &:focus, &:hover {
+  &:focus,
+  &:hover {
     border: 0;
   }
 
   i {
-    color: $color-gray;
+    color: var(--toolbar-button-color);
   }
 
   &.toolbarActive {
-    background-color: $toolbar-list-bg;
+    background-color: var(--toolbar-list-bg);
 
     i {
-      color: $toolbar-list-color;
+      color: var(--toolbar-list-color);
     }
   }
 }
@@ -106,66 +116,68 @@ $toolbar-list-color: $color-gray;
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  height: $toolbar-button-height;
+  height: var(--toolbar-button-height);
   position: absolute;
-  right: $toolbar-button-height;
+  right: var(--toolbar-button-height);
   top: 0;
-  box-shadow: $toolbar-box-shadow;
+  box-shadow: var(--toolbar-box-shadow);
 
   .buttonWrapper:first-child > .toolbarListButton {
-    border-top-left-radius: $toolbar-button-border-radius;
-    border-bottom-left-radius: $toolbar-button-border-radius;
+    border-top-left-radius: var(--toolbar-button-border-radius);
+    border-bottom-left-radius: var(--toolbar-button-border-radius);
   }
 }
 
 .toolbarListButton {
-  width: $toolbar-button-width;
-  height: $toolbar-button-height;
+  width: var(--toolbar-button-width);
+  height: var(--toolbar-button-height);
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: $toolbar-button-font-size;
-  background-color: $toolbar-list-bg;
+  font-size: var(--toolbar-button-font-size);
+  background-color: var(--toolbar-list-bg);
   border: 0 !important;
   box-shadow: none;
   border-radius: 0;
   padding: initial;
 
-  &:hover, &:focus {
-    background-color: darken($toolbar-list-bg, 10%);
+  &:hover,
+  &:focus {
+    background-color: #bbb;
   }
 
   i {
-    color: $toolbar-list-color;
+    color: var(--toolbar-list-color);
   }
 
   svg {
-    fill: $toolbar-list-color;
+    fill: var(--toolbar-list-color);
   }
 }
 
 .selectedListButton {
-  background-color: $toolbar-list-color !important;
+  background-color: var(--toolbar-list-color) !important;
 
   i {
-    color: darken($toolbar-list-bg, 10%) !important;
+    color: var(--toolbar-list-bg-focus) !important;
   }
 
   svg {
-    fill: darken($toolbar-list-bg, 10%);
+    fill: var(--toolbar-list-bg-focus);
   }
 }
 
 .customSvgIcon {
   position: absolute;
-  width: $toolbar-button-width;
-  height: $toolbar-button-height;
+  width: var(--toolbar-button-width);
+  height: var(--toolbar-button-height);
 }
 
 .textThickness {
   font-family: Arial, sans-serif;
   font-weight: normal;
-  text-shadow: -1px 0 darken($toolbar-list-bg, 10%), 0 1px darken($toolbar-list-bg, 10%), 1px 0 darken($toolbar-list-bg, 10%), 0 -1px darken($toolbar-list-bg, 10%);
+  text-shadow: -1px 0 var(--toolbar-list-bg-focus), 0 1px var(--toolbar-list-bg-focus), 1px 0 var(--toolbar-list-bg-focus), 0 -1px var(--toolbar-list-bg-focus);
   margin: auto;
-  color: $toolbar-list-color;
+  color: var(--toolbar-list-color);
 }
+
diff --git a/bigbluebutton-html5/imports/ui/stylesheets/mixins/_indicators.scss b/bigbluebutton-html5/imports/ui/stylesheets/mixins/_indicators.scss
index 7df9a324ccd9b43233828e73d3c3ff97ffaae45f..fd3f23520a9d18fbdcb163bbc5f6b4ed99b8903e 100644
--- a/bigbluebutton-html5/imports/ui/stylesheets/mixins/_indicators.scss
+++ b/bigbluebutton-html5/imports/ui/stylesheets/mixins/_indicators.scss
@@ -2,40 +2,40 @@
 @import "/imports/ui/stylesheets/variables/general";
 
 @mixin presenterIndicator() {
-    &:before {
-      opacity: 1;
-      top: $user-indicators-offset;
-      left: $user-indicators-offset;
-      bottom: auto;
-      right: auto;
-      border-radius: 5px;
-      background-color: $color-primary;
-    }
-  
-    :global(.browser-chrome) &:before,
-    :global(.browser-firefox) &:before {
-      padding: .45rem;
-    }
-  
-    :global(.browser-edge) &:before {
-      padding-top: $indicator-padding-top;
-      padding-left: $indicator-padding-left;
-      padding-right: $indicator-padding-right;
-      padding-bottom: $indicator-padding-bottom;
-    }
+  &:before {
+    opacity: 1;
+    top: var(--user-indicators-offset);
+    left: var(--user-indicators-offset);
+    bottom: auto;
+    right: auto;
+    border-radius: 5px;
+    background-color: var(--color-primary);
   }
-  
-  @mixin indicatorStyles() {
-    &:after {
-      opacity: 1;
-      width: 1.2rem;
-      height: 1.2rem;
-    }
-  
-    :global(.browser-edge) &:after {
-      padding-top: $indicator-padding-top;
-      padding-left: $indicator-padding-left;
-      padding-right: $indicator-padding-right;
-      padding-bottom: $indicator-padding-bottom;
-    }
+
+  :global(.browser-chrome) &:before,
+  :global(.browser-firefox) &:before {
+    padding: .45rem;
+  }
+
+  :global(.browser-edge) &:before {
+    padding-top: var(--indicator-padding-top);
+    padding-left: var(--indicator-padding-left);
+    padding-right: var(--indicator-padding-right);
+    padding-bottom: var(--indicator-padding-bottom);
+  }
+}
+
+@mixin indicatorStyles() {
+  &:after {
+    opacity: 1;
+    width: 1.2rem;
+    height: 1.2rem;
+  }
+
+  :global(.browser-edge) &:after {
+    padding-top: var(--indicator-padding-top);
+    padding-left: var(--indicator-padding-left);
+    padding-right: var(--indicator-padding-right);
+    padding-bottom: var(--indicator-padding-bottom);
   }
+}
diff --git a/bigbluebutton-html5/imports/ui/stylesheets/mixins/_scrollable.scss b/bigbluebutton-html5/imports/ui/stylesheets/mixins/_scrollable.scss
index 2f17278dec8f23b8cfa518bc7b5703b8daa452a0..3f737a97bed574a215e6c4f5a3c9c5a6237314e7 100644
--- a/bigbluebutton-html5/imports/ui/stylesheets/mixins/_scrollable.scss
+++ b/bigbluebutton-html5/imports/ui/stylesheets/mixins/_scrollable.scss
@@ -1,27 +1,39 @@
 @mixin scrollbox-vertical($bg-color: white) {
-	overflow-y: auto;
-	background:
-		/* Shadow covers */
-		linear-gradient($bg-color 30%, rgba(255,255,255,0)),
+  overflow-y: auto;
+  background: linear-gradient($bg-color 30%, rgba(255,255,255,0)),
 		linear-gradient(rgba(255,255,255,0), $bg-color 70%) 0 100%,
 
 		/* Shadows */
 		radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)),
 		radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
 
-	background-repeat: no-repeat;
-	background-color: transparent;
-	background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
-	background-attachment: local, local, scroll, scroll;
+  background-repeat: no-repeat;
+  background-color: transparent;
+  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
+  background-attachment: local, local, scroll, scroll;
 
 	// Fancy scroll
-	&::-webkit-scrollbar{width:5px;height:5px}
-  &::-webkit-scrollbar-button{width:0;height:0}
-  &::-webkit-scrollbar-thumb{background:rgba(0,0,0,.25);border:none;border-radius:50px}
-  &::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.5)}
-  &::-webkit-scrollbar-thumb:active{background:rgba(0,0,0,.25)}
-  &::-webkit-scrollbar-track{background:rgba(0,0,0,.25);border:none;border-radius:50px}
-  &::-webkit-scrollbar-track:hover{background:rgba(0,0,0,.25)}
-  &::-webkit-scrollbar-track:active{background:rgba(0,0,0,.25)}
-  &::-webkit-scrollbar-corner{background:0 0}
+  &::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+  }
+  &::-webkit-scrollbar-button {
+    width: 0;
+    height: 0;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: rgba(0,0,0,.25);
+    border: none;
+    border-radius: 50px;
+  }
+  &::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.5); }
+  &::-webkit-scrollbar-thumb:active { background: rgba(0,0,0,.25); }
+  &::-webkit-scrollbar-track {
+    background: rgba(0,0,0,.25);
+    border: none;
+    border-radius: 50px;
+  }
+  &::-webkit-scrollbar-track:hover { background: rgba(0,0,0,.25); }
+  &::-webkit-scrollbar-track:active { background: rgba(0,0,0,.25); }
+  &::-webkit-scrollbar-corner { background: 0 0; }
 }
diff --git a/bigbluebutton-html5/imports/ui/stylesheets/mixins/focus.scss b/bigbluebutton-html5/imports/ui/stylesheets/mixins/focus.scss
index 6c591be1a2e9e159cd3b3cd23892bf8830335387..1d70100fb152964302f66025f42c74cb1a9c69b7 100644
--- a/bigbluebutton-html5/imports/ui/stylesheets/mixins/focus.scss
+++ b/bigbluebutton-html5/imports/ui/stylesheets/mixins/focus.scss
@@ -1,18 +1,18 @@
-@import "/imports/ui/stylesheets/variables/palette";
-@import "/imports/ui/stylesheets/variables/general";
-
-@mixin elementFocus($color: $color-primary){
-  &:focus {
-    outline: none;
-    box-shadow: inset 0 0 0 $border-size-large $color;
-    border-radius: $border-size;
-  }
-}
-
-@mixin inputFocus($shadow, $color: $color-primary) {
-  &:focus {
-    outline: none;
-    border-radius: $border-size;
-    box-shadow: 0 0 0 $border-size $shadow, inset 0 0 0 1px $color;
-  }
-} 
+@import "/imports/ui/stylesheets/variables/palette";
+@import "/imports/ui/stylesheets/variables/general";
+
+@mixin elementFocus($color: var(--color-primary)) {
+  &:focus {
+    outline: none;
+    box-shadow: inset 0 0 0 var(--border-size-large) $color;
+    border-radius: var(--border-size);
+  }
+}
+
+@mixin inputFocus($shadow, $color: var(--color-primary)) {
+  &:focus {
+    outline: none;
+    border-radius: var(--border-size);
+    box-shadow: 0 0 0 var(--border-size) $shadow, inset 0 0 0 1px $color;
+  }
+} 
diff --git a/bigbluebutton-html5/imports/ui/stylesheets/variables/breakpoints.scss b/bigbluebutton-html5/imports/ui/stylesheets/variables/breakpoints.scss
index 3ae1f452baf3d88f4b85843c5f89ef8cc5e7a2d8..da3dfcac592257a8c15a48ad772e725428c92ba4 100644
--- a/bigbluebutton-html5/imports/ui/stylesheets/variables/breakpoints.scss
+++ b/bigbluebutton-html5/imports/ui/stylesheets/variables/breakpoints.scss
@@ -1,5 +1,5 @@
 // We use these functions to get the ranges for the media queries variables.
-@function lower-bound($range){
+@function lower-bound($range) {
   @if length($range) <= 0 {
     @return 0;
   }
@@ -30,7 +30,7 @@ $screen: "only screen";
 $landscape: "#{$screen} and (orientation: landscape)";
 $portrait: "#{$screen} and (orientation: portrait)";
 $xsmall-only: "#{$screen} and (min-width:#{lower-bound($xsmall-range)}) and (max-width:#{upper-bound($xsmall-range)})";
-$small-up: "#{$screen} and (min-width:#{lower-bound($small-range)})";;
+$small-up: "#{$screen} and (min-width:#{lower-bound($small-range)})";
 $small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})";
 $medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})";
 $medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})";
@@ -68,13 +68,13 @@ $breakpoints: (
   @if map-has-key($breakpoints, $media) {
     // Prints a media query based on the value
     @media #{map-get($breakpoints, $media)} {
-       @content;
+      @content;
     }
   }
   // If the key doesn't exist in the map we create a media with the argument
   @else {
     @media #{$media} {
-       @content;
+      @content;
     }
   }
 }
diff --git a/bigbluebutton-html5/imports/ui/stylesheets/variables/general.scss b/bigbluebutton-html5/imports/ui/stylesheets/variables/general.scss
index e8dc14865846cf3a7fcfe9bf3fee9fa154cf531f..8f598831a27a9df2ca3fcafffa0778efa96f383c 100644
--- a/bigbluebutton-html5/imports/ui/stylesheets/variables/general.scss
+++ b/bigbluebutton-html5/imports/ui/stylesheets/variables/general.scss
@@ -1,27 +1,28 @@
+:root {
+  --border-size: 2px;
+  --border-size-large: 3px;
+  --border-radius: .2rem;
 
-$border-size: 2px;
-$border-size-large: 3px;
-$border-radius: .2rem;
+  --sm-padding-x: .75rem;
+  --sm-padding-y: .3rem;
 
-$sm-padding-x: .75rem;
-$sm-padding-y: .3rem;
+  --md-padding-x: 1rem;
+  --md-padding-y: .45rem;
 
-$md-padding-x: 1rem;
-$md-padding-y: .45rem;
+  --lg-padding-x: 1.25rem;
+  --lg-padding-y: 0.6rem;
 
-$lg-padding-x: 1.25rem;
-$lg-padding-y: 0.6rem;
+  --jumbo-padding-x: 3.025rem;
+  --jumbo-padding-y: 1.5rem;
 
-$jumbo-padding-x: 3.025rem;
-$jumbo-padding-y: 1.5rem;
+  //used to center presenter indicator icon in Chrome / Firefox
+  --indicator-padding: .425rem;
 
-//used to center presenter indicator icon in Chrome / Firefox
-$indicator-padding: .425rem;
+  //used to center indicator icons in Edge
+  --indicator-padding-right: 1.2em;
+  --indicator-padding-left: 0.175em;
+  --indicator-padding-top: 0.7em;
+  --indicator-padding-bottom: 0.7em;
 
-//used to center indicator icons in Edge
-$indicator-padding-right: 1.2em;
-$indicator-padding-left: 0.175em;
-$indicator-padding-top: 0.7em;
-$indicator-padding-bottom: 0.7em;
-
-$user-indicators-offset: -5px;
+  --user-indicators-offset: -5px;
+}
\ No newline at end of file
diff --git a/bigbluebutton-html5/imports/ui/stylesheets/variables/palette.scss b/bigbluebutton-html5/imports/ui/stylesheets/variables/palette.scss
index f7ac7ebc4bf22dcc42df77497d9aa9c25a00f22f..ae82f78bd612ddef64ea63d240facd5056c180e7 100644
--- a/bigbluebutton-html5/imports/ui/stylesheets/variables/palette.scss
+++ b/bigbluebutton-html5/imports/ui/stylesheets/variables/palette.scss
@@ -1,26 +1,28 @@
-$color-white: #FFF !default;
-$color-off-white: #F3F6F9;
+:root {
+  --color-white: #FFF;
+  --color-off-white: #F3F6F9;
 
-$color-gray: #4E5A66 !default;
-$color-gray-dark: #06172A !default;
-$color-gray-light: #8B9AA8 !default;
-$color-gray-lighter: lighten($color-gray-light, 25%) !default;
+  --color-gray: #4E5A66;
+  --color-gray-dark: #06172A;
+  --color-gray-light: #8B9AA8;
+  --color-gray-lighter: #a7b3bd;
 
-$color-primary: #0F70D7 !default;
-$color-success: #008081 !default;
-$color-danger: #DF2721 !default;
-$color-warning: purple !default;
+  --color-blue-light: #54a1f3;
+  --color-blue-lighter: #92BCEA;
+  --color-blue-lightest: #E4ECF2;
 
-$color-background: $color-gray-dark !default;
+  --color-primary: #0F70D7;
+  --color-success: #008081;
+  --color-danger: #DF2721;
+  --color-warning: purple;
 
-$color-text: $color-gray !default;
-$color-heading: $color-gray-dark !default;
+  --color-background: var(--color-gray-dark);
 
-$color-link: $color-primary !default;
-$color-link-hover: darken($color-link, 15%) !default;
+  --color-text: var(--color-gray);
+  --color-heading: var(--color-gray-dark);
 
-$color-gray-label: $color-gray !default;
+  --color-link: var(--color-primary);
+  --color-link-hover: #2687ef;
 
-$color-blue-light: lighten($color-primary, 35%);
-$color-blue-lighter: #92BCEA;
-$color-blue-lightest: #E4ECF2;
+  --color-gray-label: var(--color-gray);
+}
\ No newline at end of file
diff --git a/bigbluebutton-html5/imports/ui/stylesheets/variables/typography.scss b/bigbluebutton-html5/imports/ui/stylesheets/variables/typography.scss
index 4cfc353281a56a4cc77a323579839637324d4ed9..0d55a6a3d83016c25ee8b76aa9c98ff3ff4df889 100644
--- a/bigbluebutton-html5/imports/ui/stylesheets/variables/typography.scss
+++ b/bigbluebutton-html5/imports/ui/stylesheets/variables/typography.scss
@@ -1,20 +1,22 @@
-$font-family-sans-serif:  'Source Sans Pro', Helvetica, Arial, sans-serif !default;
-$font-family-serif:       Georgia, "Times New Roman", Times, serif !default;
-$font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace !default;
+:root {
+  --font-family-sans-serif: "Source Sans Pro", Helvetica, Arial, sans-serif;
+  --font-family-serif: Georgia, "Times New Roman", Times, serif;
+  --font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
 
-$font-family-base:        $font-family-sans-serif !default;
+  --font-family-base: var(--font-family-sans-serif);
 
-$font-size-base:          1rem !default;
-$font-size-large:         1.25rem !default;
-$font-size-small:         .875rem !default;
+  --font-size-base: 1rem;
+  --font-size-large: 1.25rem;
+  --font-size-small: 0.875rem;
 
-$line-height-base:        1.25 !default; // 20/16
-$line-height-computed:    floor(($font-size-base * $line-height-base)) !default;
+  --line-height-base: 1.25; // 20/16
+  --line-height-computed: 1rem;
 
-$headings-font-family:    inherit !default;
-$headings-font-weight:    500 !default;
-$headings-line-height:    1.1 !default;
-$headings-color:          inherit !default;
+  --headings-font-family: inherit;
+  --headings-font-weight: 500;
+  --headings-line-height: 1.1;
+  --headings-color: inherit;
+}
 
 /*
  * Placeholders
diff --git a/bigbluebutton-html5/package-lock.json b/bigbluebutton-html5/package-lock.json
index dca7a8eca1f1fb386b1b6e374fd9fe80d5813565..24f444492dc48ee884b79e9fa7b1095b2ac4880b 100755
--- a/bigbluebutton-html5/package-lock.json
+++ b/bigbluebutton-html5/package-lock.json
@@ -510,7 +510,7 @@
     },
     "chalk": {
       "version": "1.1.3",
-      "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
       "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
       "requires": {
         "ansi-styles": "2.2.1",
@@ -2013,7 +2013,8 @@
     "ini": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
-      "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw=="
+      "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
+      "dev": true
     },
     "inquirer": {
       "version": "3.3.0",
@@ -3744,7 +3745,7 @@
     },
     "mkdirp": {
       "version": "0.5.1",
-      "resolved": "http://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
       "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
       "requires": {
         "minimist": "0.0.8"
@@ -4079,7 +4080,7 @@
     },
     "os-locale": {
       "version": "1.4.0",
-      "resolved": "http://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
+      "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
       "integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=",
       "requires": {
         "lcid": "1.0.0"
@@ -5886,7 +5887,7 @@
     },
     "wrap-ansi": {
       "version": "2.1.0",
-      "resolved": "http://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
       "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=",
       "requires": {
         "string-width": "1.0.2",
diff --git a/bigbluebutton-html5/package.json b/bigbluebutton-html5/package.json
index aaafa88fb3cb26da1fb7901bca24aea1bc32d11d..353e348034c1916ef0b7f4c35f4c47e33c342169 100755
--- a/bigbluebutton-html5/package.json
+++ b/bigbluebutton-html5/package.json
@@ -91,6 +91,9 @@
     "webdriverio": "~4.13.1"
   },
   "cssModules": {
+    "cssClassNamingConvention": {
+      "template": "${name}--${shorthash.unique(scopedName)}"
+    },
     "extensions": [
       "scss"
     ],