diff --git a/src/common/components/ActionAlt.vue b/src/common/components/ActionAlt.vue
index 5964ac2..da044c2 100644
--- a/src/common/components/ActionAlt.vue
+++ b/src/common/components/ActionAlt.vue
@@ -151,98 +151,99 @@ export default {
 <style lang="scss" scoped>
 @import '../../res/css/colors.scss';
 
-.action {
-  cursor: pointer;
-  position: relative;
-  box-sizing: border-box;
-}
+.uw-ultrawidify-container-root {
+  .action {
+    cursor: pointer;
+    position: relative;
+    box-sizing: border-box;
+  }
 
-.action .command-details {
-  height: 0px;
-  max-height: 0px;
-  transition: max-height 0.5s ease;
-  overflow: hidden;
-  transition: height 0.5s ease;
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 50%;
-}
+  .action .command-details {
+    height: 0px;
+    max-height: 0px;
+    transition: max-height 0.5s ease;
+    overflow: hidden;
+    transition: height 0.5s ease;
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 50%;
+  }
 
-.action:hover .command-details {
-  height: auto;
-  max-height: 200px;
-  transition: max-height 0.5s ease;
-}
+  .action:hover .command-details {
+    height: auto;
+    max-height: 200px;
+    transition: max-height 0.5s ease;
+  }
 
-.command-details {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 50%;
-}
+  .command-details {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 50%;
+  }
 
-.action-name-cmd-container, .p1rem {
-  padding: 1rem;
-}
+  .action-name-cmd-container, .p1rem {
+    padding: 1rem;
+  }
 
-.cd-pad {
-  padding: 0.5em;
-}
+  .cd-pad {
+    padding: 0.5em;
+  }
 
-.action-name {
-  font-size: 1.5rem;
-  font-weight: 300;
-  color: $text-normal;
-  width: 50%;
-}
+  .action-name {
+    font-size: 1.5rem;
+    font-weight: 300;
+    color: $text-normal;
+    width: 50%;
+  }
 
-.action-name:hover, .action:hover .action-name {
-  color: lighten($primary-color, 20%);
-}
+  .action-name:hover, .action:hover .action-name {
+    color: lighten($primary-color, 20%);
+  }
 
-.red {
-  color: $primary-color !important;
-}
+  .red {
+    color: $primary-color !important;
+  }
 
-.cmd-container {
-  width: 13.37rem;
-}
+  .cmd-container {
+    width: 13.37rem;
+  }
 
-.cmdlist {
-  font-family: 'Overpass Mono';
-  font-size: 0.9rem;
-  color: $text-dim;
-}
+  .cmdlist {
+    font-family: 'Overpass Mono';
+    font-size: 0.9rem;
+    color: $text-dim;
+  }
 
-.bold {
-  font-weight: 600;
-}
+  .bold {
+    font-weight: 600;
+  }
 
-.scope-scope {
-  width: 5rem;
-  text-align: right !important;
-  color: $secondary-color;
-}
+  .scope-scope {
+    width: 5rem;
+    text-align: right !important;
+    color: $secondary-color;
+  }
 
-.scope-visible {
-  width: 7rem;
-}
+  .scope-visible {
+    width: 7rem;
+  }
 
-.scope-button-label {
-  width: 16rem;
-}
+  .scope-button-label {
+    width: 16rem;
+  }
 
-.scope-row-label {
-  color: $text-dark;
-}
+  .scope-row-label {
+    color: $text-dark;
+  }
 
-.scope-row-highlight {
-  color: $text-normal;
-}
+  .scope-row-highlight {
+    color: $text-normal;
+  }
 
-.transparent {
-  opacity: 0;
+  .transparent {
+    opacity: 0;
+  }
 }
-
 </style>
diff --git a/src/common/components/Icon.vue b/src/common/components/Icon.vue
index 2055033..fd8006f 100644
--- a/src/common/components/Icon.vue
+++ b/src/common/components/Icon.vue
@@ -25,9 +25,11 @@ export default {
 }
 </script>
 
-<style scoped>
-.icon {
-  margin-left: 0.25em;
-  margin-right: 0.25em;
+<style lang="scss" scoped>
+.uw-ultrawidify-container-root {
+  .icon {
+    margin-left: 0.25em;
+    margin-right: 0.25em;
+  }
 }
 </style>
diff --git a/src/common/components/JsonEditor/json.scss b/src/common/components/JsonEditor/json.scss
index 216e47b..60fa7b1 100644
--- a/src/common/components/JsonEditor/json.scss
+++ b/src/common/components/JsonEditor/json.scss
@@ -1,23 +1,25 @@
-.json-level-indent {
-  padding-left: 2em !important;
-  font-family: 'Overpass Mono', monospace;
-}
-.item-key {
-  color: rgb(255, 196, 148);
-}
-.item-key-boolean-false {
-  color: rgb(207, 149, 101)
-}
+.uw-ultrawidify-container-root {
+  .json-level-indent {
+    padding-left: 2em !important;
+    font-family: 'Overpass Mono', monospace;
+  }
+  .item-key {
+    color: rgb(255, 196, 148);
+  }
+  .item-key-boolean-false {
+    color: rgb(207, 149, 101)
+  }
 
-.json-value-boolean-true {
-  color: rgb(150, 240, 198);
-}
-.json-value-boolean-false {
-  color: rgb(241, 21, 21);
-}
-.json-value-number {
-  color: rgb(121, 121, 238);
-}
-.json-value-string {
-  color:  rgb(226, 175, 7);
+  .json-value-boolean-true {
+    color: rgb(150, 240, 198);
+  }
+  .json-value-boolean-false {
+    color: rgb(241, 21, 21);
+  }
+  .json-value-number {
+    color: rgb(121, 121, 238);
+  }
+  .json-value-string {
+    color:  rgb(226, 175, 7);
+  }
 }
diff --git a/src/common/components/QsElement.vue b/src/common/components/QsElement.vue
index c98ec27..8345d44 100644
--- a/src/common/components/QsElement.vue
+++ b/src/common/components/QsElement.vue
@@ -21,33 +21,35 @@ export default {
 }
 </script>
 
-<style>
-.mt2px {
-  margin-top: 7px;
-}
-.id {
-  border: 1px solid #d00;
-  background-color: rgba(216, 94, 24, 0.25)
-}
-.class {
-  border: 1px solid #33d;
-  background-color: rgba(69, 69, 255, 0.25)
-}
-.closeButton {
-  margin-top: 2px;
-  margin-left: 4px;
-  margin-right: 4px;
-  font-size: 1.5em;
-  color: #e00;
-}
-.closeButton:hover {
-  cursor: pointer;
-  color: #fa6;
-}
-.qsb {
-  cursor:default;
-  margin-left: 3px;
-  margin-right: 3px;
-  margin-bottom: 2px;
+<style lang="scss" scoped>
+.uw-ultrawidify-container-root {
+  .mt2px {
+    margin-top: 7px;
+  }
+  .id {
+    border: 1px solid #d00;
+    background-color: rgba(216, 94, 24, 0.25)
+  }
+  .class {
+    border: 1px solid #33d;
+    background-color: rgba(69, 69, 255, 0.25)
+  }
+  .closeButton {
+    margin-top: 2px;
+    margin-left: 4px;
+    margin-right: 4px;
+    font-size: 1.5em;
+    color: #e00;
+  }
+  .closeButton:hover {
+    cursor: pointer;
+    color: #fa6;
+  }
+  .qsb {
+    cursor:default;
+    margin-left: 3px;
+    margin-right: 3px;
+    margin-bottom: 2px;
+  }
 }
 </style>
diff --git a/src/common/components/ShortcutButton.vue b/src/common/components/ShortcutButton.vue
index 569e8f1..dc4f99d 100644
--- a/src/common/components/ShortcutButton.vue
+++ b/src/common/components/ShortcutButton.vue
@@ -20,11 +20,13 @@ export default {
 }
 </script>
 
-<style scoped>
-.center-text {
-  text-align: center;
-}
-.dark {
-  opacity: 50%;
+<style lang="scss" scoped>
+.uw-ultrawidify-container-root {
+  .center-text {
+    text-align: center;
+  }
+  .dark {
+    opacity: 50%;
+  }
 }
 </style>
diff --git a/src/csui/LoggerUi.vue b/src/csui/LoggerUi.vue
index d99a454..5c332de 100644
--- a/src/csui/LoggerUi.vue
+++ b/src/csui/LoggerUi.vue
@@ -306,134 +306,134 @@ export default {
 @import '../res/css/font/overpass-mono.css';
 @import '../res/css/common.scss';
 
+.uw-ultrawidify-container-root {
+  .root-window {
+    position: fixed !important;
+    top: 5vh !important;
+    left: 5vw !important;
+    width: 90vw !important;
+    height: 90vh !important;
+    z-index: 999999 !important;
+    background-color: rgba( $page-background, 0.9) !important;
+    color: #f1f1f1 !important;
+    font-size: 14px !important;
 
-.root-window {
-  position: fixed !important;
-  top: 5vh !important;
-  left: 5vw !important;
-  width: 90vw !important;
-  height: 90vh !important;
-  z-index: 999999 !important;
-  background-color: rgba( $page-background, 0.9) !important;
-  color: #f1f1f1 !important;
-  font-size: 14px !important;
+    box-sizing: border-box !important;
+  }
 
-  box-sizing: border-box !important;
-}
+  div {
+    font-family: 'Overpass';
+  }
 
-div {
-  font-family: 'Overpass';
-}
-
-h1, h2 {
-  font-family: 'Overpass Thin';
-}
-h1 {
-  font-size: 4em;
-}
-h2 {
-  font-size: 2em;
-}
-
-.header {
+  h1, h2 {
+    font-family: 'Overpass Thin';
+  }
   h1 {
-    margin-bottom: -0.20em;
-    margin-top: 0.0em;
+    font-size: 4em;
   }
-  .header-top, .header-bottom {
-    padding-left: 16px;
-    padding-right: 16px;
+  h2 {
+    font-size: 2em;
   }
-  .header-top {
-    background-color: $popup-header-background !important;
+
+  .header {
+    h1 {
+      margin-bottom: -0.20em;
+      margin-top: 0.0em;
+    }
+    .header-top, .header-bottom {
+      padding-left: 16px;
+      padding-right: 16px;
+    }
+    .header-top {
+      background-color: $popup-header-background !important;
+    }
+    .header-bottom {
+      font-size: 1.75em;
+    }
   }
-  .header-bottom {
-    font-size: 1.75em;
+  .content {
+    box-sizing: border-box;
+    padding: 8px 32px;
+    width: 100%;
+  }
+  .settings-panel {
+    box-sizing: border-box;
+    padding-right: 8px;
+    flex-grow: 2 !important;
+    min-width: 30% !important;
+    flex-shrink: 0 !important;
+    height: inherit !important;
+  }
+  .results-panel {
+    box-sizing: border-box;
+    padding-left: 8px;
+    max-width: 70% !important;
+    flex-grow: 5 !important;
+    flex-shrink: 0 !important;
+    height: inherit !important;
+  }
+
+  .scrollable {
+    overflow: auto;
+  }
+
+  .overflow-hidden {
+    overflow: hidden;
+  }
+
+  pre {
+    font-family: 'Overpass Mono';
+  }
+
+  .m-025em {
+    margin: 0.25em;
+  }
+
+  .p-t-025em {
+    padding-top: 0.25em;
+  }
+
+  .button {
+    display: inline-flex;
+    align-items: center;
+    justify-items: center;
+    padding-left: 2em;
+    padding-right: 2em;
+  }
+
+  .button-primary {
+    background-color: $primary;
+    color: #fff;
+  }
+
+  .button-big {
+    font-size: 1.5em;
+    padding: 1.75em 3.25em;
+  }
+
+  .button-bar {
+    font-size: 1.25em;
+    padding: 0.25em 1.25em;
+    margin-left: 0.25em;
+  }
+
+  .button-header {
+    font-size: 2em;
+    padding-top: 0.1em;
+    padding-left: 1em;
+    padding-right: 1em;
+  }
+
+  .jsonbg {
+    background-color: #131313;
+  }
+  .jsonbg-error {
+    background-color: #884420;
+  }
+
+  .log-config-margin {
+    margin-top: 3em;
+    margin-bottom: 3em;
   }
 }
-.content {
-  box-sizing: border-box;
-  padding: 8px 32px;
-  width: 100%;
-}
-.settings-panel {
-  box-sizing: border-box;
-  padding-right: 8px;
-  flex-grow: 2 !important;
-  min-width: 30% !important;
-  flex-shrink: 0 !important;
-  height: inherit !important;
-}
-.results-panel {
-  box-sizing: border-box;
-  padding-left: 8px;
-  max-width: 70% !important;
-  flex-grow: 5 !important;
-  flex-shrink: 0 !important;
-  height: inherit !important;
-}
-
-.scrollable {
-  overflow: auto;
-}
-
-.overflow-hidden {
-  overflow: hidden;
-}
-
-pre {
-  font-family: 'Overpass Mono';
-}
-
-.m-025em {
-  margin: 0.25em;
-}
-
-.p-t-025em {
-  padding-top: 0.25em;
-}
-
-.button {
-  display: inline-flex;
-  align-items: center;
-  justify-items: center;
-  padding-left: 2em;
-  padding-right: 2em;
-}
-
-.button-primary {
-  background-color: $primary;
-  color: #fff;
-}
-
-.button-big {
-  font-size: 1.5em;
-  padding: 1.75em 3.25em;
-}
-
-.button-bar {
-  font-size: 1.25em;
-  padding: 0.25em 1.25em;
-  margin-left: 0.25em;
-}
-
-.button-header {
-  font-size: 2em;
-  padding-top: 0.1em;
-  padding-left: 1em;
-  padding-right: 1em;
-}
-
-.jsonbg {
-  background-color: #131313;
-}
-.jsonbg-error {
-  background-color: #884420;
-}
-
-.log-config-margin {
-  margin-top: 3em;
-  margin-bottom: 3em;
-}
-
 </style>
diff --git a/src/csui/NotificationUi.vue b/src/csui/NotificationUi.vue
index d72b24e..5d5bfcc 100644
--- a/src/csui/NotificationUi.vue
+++ b/src/csui/NotificationUi.vue
@@ -145,7 +145,7 @@ export default {
 @import '../res/css/font/overpass-mono.css';
 @import '../res/css/common.scss';
 
-.uw-ultrawidify-container {
+.uw-ultrawidify-container-root {
   position: relative;
   width: 100%;
   height: 100%;
diff --git a/src/ext/lib/uwui/UI.js b/src/ext/lib/uwui/UI.js
index b75d0b7..53059d6 100644
--- a/src/ext/lib/uwui/UI.js
+++ b/src/ext/lib/uwui/UI.js
@@ -44,7 +44,7 @@ class UI {
 
     rootDiv.setAttribute('style', `position: ${this.uiConfig.style?.position ?? 'absolute'}; width: ${this.uiConfig.style?.width ?? '100%'}; height: ${this.uiConfig.style?.height ?? '100%'}; top: ${this.uiConfig.style?.height ?? '0'}; ${this.uiConfig.additionalStyle ?? ''}`);
     rootDiv.setAttribute('id', uwid);
-
+    rootDiv.classList.add('uw-ultrawidify-container-root');
 
     if (this.uiConfig?.parentElement) {
       this.uiConfig.parentElement.appendChild(rootDiv);
diff --git a/src/ext/uw-ui.js b/src/ext/uw-ui.js
index 2d420b4..6e98033 100644
--- a/src/ext/uw-ui.js
+++ b/src/ext/uw-ui.js
@@ -182,6 +182,7 @@ class UwUi {
     const rootDiv = document.createElement('div');
     rootDiv.setAttribute("style", "position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 999999;");
     rootDiv.setAttribute("id", uwid);
+    rootDiv.classList.add('uw-ultrawidify-container-root');
 
     document.body.appendChild(rootDiv);
    
diff --git a/src/options/options.html b/src/options/options.html
index 58247d6..3d27629 100644
--- a/src/options/options.html
+++ b/src/options/options.html
@@ -8,7 +8,7 @@
   <!-- Load some resources only in development environment -->
   <% } %>
 </head>
-<body>
+<body class="uw-ultrawidify-container-root">
   <div id="app"></div>
   <script src="options.js"></script>
 </body>
diff --git a/src/popup/popup.html b/src/popup/popup.html
index 1a38558..768c503 100644
--- a/src/popup/popup.html
+++ b/src/popup/popup.html
@@ -9,7 +9,7 @@
   <!-- Load some resources only in development environment -->
   <% } %>
 </head>
-<body style="width: 100%; height: 100%; overflow-x: hidden;">
+<body style="width: 100%; height: 100%; overflow-x: hidden;" class="uw-ultrawidify-container-root">
   <div id="app">
 
   </div>
diff --git a/src/res/css/common.scss b/src/res/css/common.scss
index 8eb55da..97da471 100644
--- a/src/res/css/common.scss
+++ b/src/res/css/common.scss
@@ -17,7 +17,7 @@ body {
 }
 
 /* STANDARD WIDTHS AND HEIGHTS */
-
+.uw-ultrawidify-container-root {
 .w100 {
   width: 100%;
 }
@@ -99,292 +99,293 @@ body {
 .description {
   color: $text-dim;
   font-size: 1rem;
-}
-
-.label {
-  padding-top: 1.5rem;
-  font-size: 1.5rem;
-  font-variant: small-caps;
-  font-weight: 600;
-}
-
-.label-secondary {
-  font-weight: 600;
-}
-
-.button-box {
-  padding-top: 0.69rem;
-  padding-bottom: 0.69rem;
-}
-
-.indent {
-  padding-left: 4.2rem;
-}
-
-.row-padding {
-  padding-top: 0.69rem;
-  padding-bottom: 0.69rem;
-}
-
-a, a:visited {
-  color: $primary-color;
-}
-a:hover {
-  color: lighten($primary-color, 10%);
-}
-
-/* INPUT FORMATTING */
-input[type="number"], input[type="text"], input {
-  outline: none;
-  background-color: $input-background;
-  color: $text-normal;
-  padding: 0.1rem;
-  padding-top: 0.2rem;
-  padding-bottom: 0.1rem;
-  margin-left: 1rem;
-  border: 1px solid $input-border;
-}
-
-input:disabled {
-  background: #444444;
-  color: darken($text-normal, 50%);
-}
-
-/* ELEMENT POSITIONING */
-
-.row {
-  display: block;
-  margin-top: 20px;
-  margin-bottom: 10px;
-}
-
-.button-row {
-  display: block;
-  margin-top: 5px;
-  margin-bottom: 10px;
-}
-
-.float-left {
-  float: left;
-}
-.float-right {
-  float: right;
-}
-
-.inline-block {
-  display: inline-block;
-}
-
-.block {
-  display: block;
-}
-
-.hidden {
-  display: none !important;
-}
-
-.hide {
-  display: none !important;
-}
-
-
-
-/* TEXT FORMATTING (no colors) */
-
-small {
-  font-size: 0.75em;
-  font-weight: 200;
-}
-
-.small {
-  font-size: 0.75em;
-  font-weight: 200;
-}
-
-.medium-small {
-  font-size: 0.85em;
-  font-weight: 200;
-}
-
-.smallcaps{
-  font-variant: small-caps;
-}
-
-.center{
-  text-align: center;
-  width: 100%;
-}
-.text-center {
-  text-align: center;
-}
-
-
-.invalid-input {
-  border: 1px solid #720 !important;
-  background-color: #410 !important;
-}
-
-.button {
-  /*display: inline-block;*/
-  // padding-top: 8px;
-  // padding-bottom: 3px;
-  //padding-left: 5px;
-  //padding-right: 5px;
-  border: 1px solid rgb(39, 39, 39);
-  margin-top: 3px;
-  margin-bottom: 3px;
-  color: $text-dim;
-  text-align: center;
-  cursor: pointer;
-  user-select: none;;
-}
-
-    
-.selected, .setting-selected {
-  color: $selected-color !important;
-  background-color: $background-selected !important;
-}
-
-.selected-tab {
-  color: $selected-color;
-}
-
-.setting-selected {
-  border: 1px solid shade($selected-color, 25%);
-}
-
-.button:hover {
-  color: lighten($selected-color, 10%);
-  background-color: lighten($background-selected, 10%);
-}
-
-.disabled {
-  pointer-events: none;
-  /* color: #666; */
-  filter: contrast(50%) brightness(40%) grayscale(100%);
-}
-
-.disabled-button {
-  color: #666 !important;
-  cursor: not-allowed !important;     
-}
-
-.disabled-button:hover {
-  color: #777 !important;
-  background-color: #222 !important;
-}
-
-/* BROWSER-SPECIFIC DISABLE */
-.disabled-edge {
-  pointer-events: none !important;
-  filter: contrast(50%) brightness(40%) grayscale(100%) !important;
-  content: "NOT SUPPORTED IN THIS BROWSER";
-}
-.disabled-edge::after {
-  background-color: #333272;
-  color: #d8d9e6;
-  display: inline-block;
-  font-size: .75em;
-  font-variant: small-caps;
-  padding-left: 5px;
-  padding-right: 5px;
-  margin-left: 10px;
-}
-
-
-
-
-/** misc **/
-
-.warning-color {
-  color: #d6ba4a;
-}
-
-.warning, .warning-lite {
-  color: #d6ba4a;
-  padding-left: 35px;
-  float: right;
-}
-
-.warning::before, .warning-lite::before {
-  content: "⚠ ";
-  display: inline-block;
-}
-.warning::before {
-  font-weight: bold;
-  font-size: 2.5em;
-  margin-left: -35px;
-  padding-right: 10px;
-}
-
-.info {
-  color: $info-color;
-  padding-left: 35px;
-  float: right;
-}
-
-.info::before {
-  content: "ⓘ";
-  display: inline-block;
-  font-weight: bold;
-  margin-left: -35px;
-  padding-right: 10px;
-}
-
-.new {
-  color: #fff;
-}
-
-.new::after {
-  content: "ⓘ";
-  color: $info-color !important;
-  display: inline-block;
-  font-weight: bold;
-  padding-right: 10px;
-}
-
-.experimental::after {
-  // content: "Experimental";
-  content: "Ⓔ";
-  color: #ffde12;
-  // background-color: #1f1f1f;
-  display: inline-block;
-  font-size: .75em;
-  font-variant: small-caps;
-  padding-left: 5px;
-  padding-right: 5px;
-  margin-left: 10px;
-  margin-top: -4px;
-}
-.experimental:hover::after {
-   content: "Ⓔ Experimental";
-  //  content: "";
-   color: #ffde12;
-  //  background-color: #1f1f1f;
-   display: inline-block;
-   font-size: .75em;
-   font-variant: small-caps;
-   padding-left: 5px;
-   padding-right: 5px;
-   margin-left: 10px;
-   margin-top: -4px;
-}
-
-.sticky-bottom {
-  width: 100%;
-  position: sticky;
-  // position: fixed;
-  bottom: 0px;
-  background-color: rgba($background-primary, 0.7);
-}
-
-.rtl {
-  direction: rtl;
-}
-
-.ltr {
-  direction: ltr;
-}
-.monospace {
-  font-family: 'Overpass Mono';
+  }
+
+  .label {
+    padding-top: 1.5rem;
+    font-size: 1.5rem;
+    font-variant: small-caps;
+    font-weight: 600;
+  }
+
+  .label-secondary {
+    font-weight: 600;
+  }
+
+  .button-box {
+    padding-top: 0.69rem;
+    padding-bottom: 0.69rem;
+  }
+
+  .indent {
+    padding-left: 4.2rem;
+  }
+
+  .row-padding {
+    padding-top: 0.69rem;
+    padding-bottom: 0.69rem;
+  }
+
+  a, a:visited {
+    color: $primary-color;
+  }
+  a:hover {
+    color: lighten($primary-color, 10%);
+  }
+
+  /* INPUT FORMATTING */
+  input[type="number"], input[type="text"], input {
+    outline: none;
+    background-color: $input-background;
+    color: $text-normal;
+    padding: 0.1rem;
+    padding-top: 0.2rem;
+    padding-bottom: 0.1rem;
+    margin-left: 1rem;
+    border: 1px solid $input-border;
+  }
+
+  input:disabled {
+    background: #444444;
+    color: darken($text-normal, 50%);
+  }
+
+  /* ELEMENT POSITIONING */
+
+  .row {
+    display: block;
+    margin-top: 20px;
+    margin-bottom: 10px;
+  }
+
+  .button-row {
+    display: block;
+    margin-top: 5px;
+    margin-bottom: 10px;
+  }
+
+  .float-left {
+    float: left;
+  }
+  .float-right {
+    float: right;
+  }
+
+  .inline-block {
+    display: inline-block;
+  }
+
+  .block {
+    display: block;
+  }
+
+  .hidden {
+    display: none !important;
+  }
+
+  .hide {
+    display: none !important;
+  }
+
+
+
+  /* TEXT FORMATTING (no colors) */
+
+  small {
+    font-size: 0.75em;
+    font-weight: 200;
+  }
+
+  .small {
+    font-size: 0.75em;
+    font-weight: 200;
+  }
+
+  .medium-small {
+    font-size: 0.85em;
+    font-weight: 200;
+  }
+
+  .smallcaps{
+    font-variant: small-caps;
+  }
+
+  .center{
+    text-align: center;
+    width: 100%;
+  }
+  .text-center {
+    text-align: center;
+  }
+
+
+  .invalid-input {
+    border: 1px solid #720 !important;
+    background-color: #410 !important;
+  }
+
+  .button {
+    /*display: inline-block;*/
+    // padding-top: 8px;
+    // padding-bottom: 3px;
+    //padding-left: 5px;
+    //padding-right: 5px;
+    border: 1px solid rgb(39, 39, 39);
+    margin-top: 3px;
+    margin-bottom: 3px;
+    color: $text-dim;
+    text-align: center;
+    cursor: pointer;
+    user-select: none;;
+  }
+
+      
+  .selected, .setting-selected {
+    color: $selected-color !important;
+    background-color: $background-selected !important;
+  }
+
+  .selected-tab {
+    color: $selected-color;
+  }
+
+  .setting-selected {
+    border: 1px solid shade($selected-color, 25%);
+  }
+
+  .button:hover {
+    color: lighten($selected-color, 10%);
+    background-color: lighten($background-selected, 10%);
+  }
+
+  .disabled {
+    pointer-events: none;
+    /* color: #666; */
+    filter: contrast(50%) brightness(40%) grayscale(100%);
+  }
+
+  .disabled-button {
+    color: #666 !important;
+    cursor: not-allowed !important;     
+  }
+
+  .disabled-button:hover {
+    color: #777 !important;
+    background-color: #222 !important;
+  }
+
+  /* BROWSER-SPECIFIC DISABLE */
+  .disabled-edge {
+    pointer-events: none !important;
+    filter: contrast(50%) brightness(40%) grayscale(100%) !important;
+    content: "NOT SUPPORTED IN THIS BROWSER";
+  }
+  .disabled-edge::after {
+    background-color: #333272;
+    color: #d8d9e6;
+    display: inline-block;
+    font-size: .75em;
+    font-variant: small-caps;
+    padding-left: 5px;
+    padding-right: 5px;
+    margin-left: 10px;
+  }
+
+
+
+
+  /** misc **/
+
+  .warning-color {
+    color: #d6ba4a;
+  }
+
+  .warning, .warning-lite {
+    color: #d6ba4a;
+    padding-left: 35px;
+    float: right;
+  }
+
+  .warning::before, .warning-lite::before {
+    content: "⚠ ";
+    display: inline-block;
+  }
+  .warning::before {
+    font-weight: bold;
+    font-size: 2.5em;
+    margin-left: -35px;
+    padding-right: 10px;
+  }
+
+  .info {
+    color: $info-color;
+    padding-left: 35px;
+    float: right;
+  }
+
+  .info::before {
+    content: "ⓘ";
+    display: inline-block;
+    font-weight: bold;
+    margin-left: -35px;
+    padding-right: 10px;
+  }
+
+  .new {
+    color: #fff;
+  }
+
+  .new::after {
+    content: "ⓘ";
+    color: $info-color !important;
+    display: inline-block;
+    font-weight: bold;
+    padding-right: 10px;
+  }
+
+  .experimental::after {
+    // content: "Experimental";
+    content: "Ⓔ";
+    color: #ffde12;
+    // background-color: #1f1f1f;
+    display: inline-block;
+    font-size: .75em;
+    font-variant: small-caps;
+    padding-left: 5px;
+    padding-right: 5px;
+    margin-left: 10px;
+    margin-top: -4px;
+  }
+  .experimental:hover::after {
+    content: "Ⓔ Experimental";
+    //  content: "";
+    color: #ffde12;
+    //  background-color: #1f1f1f;
+    display: inline-block;
+    font-size: .75em;
+    font-variant: small-caps;
+    padding-left: 5px;
+    padding-right: 5px;
+    margin-left: 10px;
+    margin-top: -4px;
+  }
+
+  .sticky-bottom {
+    width: 100%;
+    position: sticky;
+    // position: fixed;
+    bottom: 0px;
+    background-color: rgba($background-primary, 0.7);
+  }
+
+  .rtl {
+    direction: rtl;
+  }
+
+  .ltr {
+    direction: ltr;
+  }
+  .monospace {
+    font-family: 'Overpass Mono';
+  }
 }
diff --git a/src/res/css/flex.scss b/src/res/css/flex.scss
index 95c3f7a..701fa00 100644
--- a/src/res/css/flex.scss
+++ b/src/res/css/flex.scss
@@ -1,51 +1,53 @@
-.flex {
-  display: flex;
-}
+.uw-ultrawidify-container-root {
+  .flex {
+    display: flex;
+  }
 
-.flex-row {
-  flex-direction: row;
-}
+  .flex-row {
+    flex-direction: row;
+  }
 
-.flex-column {
-  flex-direction: column;
-}
+  .flex-column {
+    flex-direction: column;
+  }
 
-.flex-auto {
-  flex: 1 1 auto;
-}
+  .flex-auto {
+    flex: 1 1 auto;
+  }
 
-.flex-grow {
-  flex-grow: 1;
-}
-.flex-nogrow {
-  flex-grow: 0;
-}
-.flex-shrink {
-  flex-shrink: 1;
-}
-.flex-noshrink {
-  flex-shrink: 0;
-}
+  .flex-grow {
+    flex-grow: 1;
+  }
+  .flex-nogrow {
+    flex-grow: 0;
+  }
+  .flex-shrink {
+    flex-shrink: 1;
+  }
+  .flex-noshrink {
+    flex-shrink: 0;
+  }
 
 
-.flex-wrap {
-  flex-wrap: wrap;
-}
+  .flex-wrap {
+    flex-wrap: wrap;
+  }
 
-.flex-center {
-  align-content: center;
-  align-items: center;
-}
+  .flex-center {
+    align-content: center;
+    align-items: center;
+  }
 
-.flex-end {
-  justify-content: flex-end;
-}
+  .flex-end {
+    justify-content: flex-end;
+  }
 
-.flex-cross-center {
-  justify-content: center;
-  justify-items: center;
-}
+  .flex-cross-center {
+    justify-content: center;
+    justify-items: center;
+  }
 
-.flex-self-center {
-  align-self: center;
-}
\ No newline at end of file
+  .flex-self-center {
+    align-self: center;
+  }
+}
diff --git a/src/res/css/form.scss b/src/res/css/form.scss
index e69de29..268322c 100644
--- a/src/res/css/form.scss
+++ b/src/res/css/form.scss
@@ -0,0 +1,3 @@
+.uw-ultrawidify-container-root {
+  /* todo: any form CSS must be nested under this element */
+}