@materializecss/materialize 2.0.3 → 2.1.0

package/dist/css/materialize.css

@@ -1,6 +1,6 @@
 /*!
- * Materialize v2.0.3 (https://materializecss.github.io/materialize)
- * Copyright 2014-2023 Materialize
+ * Materialize v2.1.0 (https://materializeweb.com)
+ * Copyright 2014-2024 Materialize
  * MIT License (https://raw.githubusercontent.com/materializecss/materialize/master/LICENSE)
  */
 @charset "UTF-8";
@@ -277,6 +277,145 @@
   --md-sys-typescale-title-small-letter-spacing: 0.10px;
 }
 
+/* System Defaults */
+:root, :host {
+  color-scheme: light;
+  --md-sys-color-primary: var(--md-sys-color-primary-light);
+  --md-sys-color-on-primary: var(--md-sys-color-on-primary-light);
+  --md-sys-color-primary-container: var(--md-sys-color-primary-container-light);
+  --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light);
+  --md-sys-color-secondary: var(--md-sys-color-secondary-light);
+  --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-light);
+  --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-light);
+  --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-light);
+  --md-sys-color-tertiary: var(--md-sys-color-tertiary-light);
+  --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-light);
+  --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-light);
+  --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-light);
+  --md-sys-color-error: var(--md-sys-color-error-light);
+  --md-sys-color-on-error: var(--md-sys-color-on-error-light);
+  --md-sys-color-error-container: var(--md-sys-color-error-container-light);
+  --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-light);
+  --md-sys-color-outline: var(--md-sys-color-outline-light);
+  --md-sys-color-background: var(--md-sys-color-background-light);
+  --md-sys-color-on-background: var(--md-sys-color-on-background-light);
+  --md-sys-color-surface: var(--md-sys-color-surface-light);
+  --md-sys-color-on-surface: var(--md-sys-color-on-surface-light);
+  --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-light);
+  --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-light);
+  --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-light);
+  --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-light);
+  --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-light);
+  --md-sys-color-shadow: var(--md-sys-color-shadow-light);
+  --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-light);
+  --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-light);
+  --md-sys-color-scrim: var(--md-sys-color-scrim-light);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root, :host {
+    color-scheme: dark;
+    --md-sys-color-primary: var(--md-sys-color-primary-dark);
+    --md-sys-color-on-primary: var(--md-sys-color-on-primary-dark);
+    --md-sys-color-primary-container: var(--md-sys-color-primary-container-dark);
+    --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-dark);
+    --md-sys-color-secondary: var(--md-sys-color-secondary-dark);
+    --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-dark);
+    --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-dark);
+    --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-dark);
+    --md-sys-color-tertiary: var(--md-sys-color-tertiary-dark);
+    --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-dark);
+    --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-dark);
+    --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-dark);
+    --md-sys-color-error: var(--md-sys-color-error-dark);
+    --md-sys-color-on-error: var(--md-sys-color-on-error-dark);
+    --md-sys-color-error-container: var(--md-sys-color-error-container-dark);
+    --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-dark);
+    --md-sys-color-outline: var(--md-sys-color-outline-dark);
+    --md-sys-color-background: var(--md-sys-color-background-dark);
+    --md-sys-color-on-background: var(--md-sys-color-on-background-dark);
+    --md-sys-color-surface: var(--md-sys-color-surface-dark);
+    --md-sys-color-on-surface: var(--md-sys-color-on-surface-dark);
+    --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-dark);
+    --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-dark);
+    --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-dark);
+    --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-dark);
+    --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-dark);
+    --md-sys-color-shadow: var(--md-sys-color-shadow-dark);
+    --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-dark);
+    --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-dark);
+    --md-sys-color-scrim: var(--md-sys-color-scrim-dark);
+  }
+}
+/* ===================================================================== Themes */
+:root[theme=light] {
+  color-scheme: light;
+  --md-sys-color-primary: var(--md-sys-color-primary-light);
+  --md-sys-color-on-primary: var(--md-sys-color-on-primary-light);
+  --md-sys-color-primary-container: var(--md-sys-color-primary-container-light);
+  --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light);
+  --md-sys-color-secondary: var(--md-sys-color-secondary-light);
+  --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-light);
+  --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-light);
+  --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-light);
+  --md-sys-color-tertiary: var(--md-sys-color-tertiary-light);
+  --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-light);
+  --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-light);
+  --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-light);
+  --md-sys-color-error: var(--md-sys-color-error-light);
+  --md-sys-color-on-error: var(--md-sys-color-on-error-light);
+  --md-sys-color-error-container: var(--md-sys-color-error-container-light);
+  --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-light);
+  --md-sys-color-outline: var(--md-sys-color-outline-light);
+  --md-sys-color-background: var(--md-sys-color-background-light);
+  --md-sys-color-on-background: var(--md-sys-color-on-background-light);
+  --md-sys-color-surface: var(--md-sys-color-surface-light);
+  --md-sys-color-on-surface: var(--md-sys-color-on-surface-light);
+  --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-light);
+  --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-light);
+  --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-light);
+  --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-light);
+  --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-light);
+  --md-sys-color-shadow: var(--md-sys-color-shadow-light);
+  --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-light);
+  --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-light);
+  --md-sys-color-scrim: var(--md-sys-color-scrim-light);
+}
+
+:root[theme=dark] {
+  color-scheme: dark;
+  --md-sys-color-primary: var(--md-sys-color-primary-dark);
+  --md-sys-color-on-primary: var(--md-sys-color-on-primary-dark);
+  --md-sys-color-primary-container: var(--md-sys-color-primary-container-dark);
+  --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-dark);
+  --md-sys-color-secondary: var(--md-sys-color-secondary-dark);
+  --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-dark);
+  --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-dark);
+  --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-dark);
+  --md-sys-color-tertiary: var(--md-sys-color-tertiary-dark);
+  --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-dark);
+  --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-dark);
+  --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-dark);
+  --md-sys-color-error: var(--md-sys-color-error-dark);
+  --md-sys-color-on-error: var(--md-sys-color-on-error-dark);
+  --md-sys-color-error-container: var(--md-sys-color-error-container-dark);
+  --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-dark);
+  --md-sys-color-outline: var(--md-sys-color-outline-dark);
+  --md-sys-color-background: var(--md-sys-color-background-dark);
+  --md-sys-color-on-background: var(--md-sys-color-on-background-dark);
+  --md-sys-color-surface: var(--md-sys-color-surface-dark);
+  --md-sys-color-on-surface: var(--md-sys-color-on-surface-dark);
+  --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-dark);
+  --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-dark);
+  --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-dark);
+  --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-dark);
+  --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-dark);
+  --md-sys-color-shadow: var(--md-sys-color-shadow-dark);
+  --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-dark);
+  --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-dark);
+  --md-sys-color-scrim: var(--md-sys-color-scrim-dark);
+}
+
 .primary {
   background-color: var(--md-sys-color-primary);
 }
@@ -437,7 +576,7 @@
   color: var(--md-sys-color-on-surface);
 }
 
-.surface-variant, .progress, input[type=range]::-moz-range-track, input[type=range]::-webkit-slider-runnable-track, .switch label .lever {
+.surface-variant, .progress, input[type=range]::-moz-range-track, input[type=range]::-webkit-slider-runnable-track {
   background-color: var(--md-sys-color-surface-variant);
 }
 
@@ -712,130 +851,6 @@
           text-decoration: var(--md-sys-typescale-title-small-text-decoration);
 }
 
-:root {
-  --md-sys-color-primary: var(--md-sys-color-primary-light);
-  --md-sys-color-on-primary: var(--md-sys-color-on-primary-light);
-  --md-sys-color-primary-container: var(--md-sys-color-primary-container-light);
-  --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light);
-  --md-sys-color-secondary: var(--md-sys-color-secondary-light);
-  --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-light);
-  --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-light);
-  --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-light);
-  --md-sys-color-tertiary: var(--md-sys-color-tertiary-light);
-  --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-light);
-  --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-light);
-  --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-light);
-  --md-sys-color-error: var(--md-sys-color-error-light);
-  --md-sys-color-on-error: var(--md-sys-color-on-error-light);
-  --md-sys-color-error-container: var(--md-sys-color-error-container-light);
-  --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-light);
-  --md-sys-color-outline: var(--md-sys-color-outline-light);
-  --md-sys-color-background: var(--md-sys-color-background-light);
-  --md-sys-color-on-background: var(--md-sys-color-on-background-light);
-  --md-sys-color-surface: var(--md-sys-color-surface-light);
-  --md-sys-color-on-surface: var(--md-sys-color-on-surface-light);
-  --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-light);
-  --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-light);
-  --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-light);
-  --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-light);
-  --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-light);
-  --md-sys-color-shadow: var(--md-sys-color-shadow-light);
-  --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-light);
-  --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-light);
-  --md-sys-color-scrim: var(--md-sys-color-scrim-light);
-}
-
-:root[theme=dark] {
-  --md-sys-color-primary: var(--md-sys-color-primary-dark);
-  --md-sys-color-on-primary: var(--md-sys-color-on-primary-dark);
-  --md-sys-color-primary-container: var(--md-sys-color-primary-container-dark);
-  --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-dark);
-  --md-sys-color-secondary: var(--md-sys-color-secondary-dark);
-  --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-dark);
-  --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-dark);
-  --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-dark);
-  --md-sys-color-tertiary: var(--md-sys-color-tertiary-dark);
-  --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-dark);
-  --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-dark);
-  --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-dark);
-  --md-sys-color-error: var(--md-sys-color-error-dark);
-  --md-sys-color-on-error: var(--md-sys-color-on-error-dark);
-  --md-sys-color-error-container: var(--md-sys-color-error-container-dark);
-  --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-dark);
-  --md-sys-color-outline: var(--md-sys-color-outline-dark);
-  --md-sys-color-background: var(--md-sys-color-background-dark);
-  --md-sys-color-on-background: var(--md-sys-color-on-background-dark);
-  --md-sys-color-surface: var(--md-sys-color-surface-dark);
-  --md-sys-color-on-surface: var(--md-sys-color-on-surface-dark);
-  --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-dark);
-  --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-dark);
-  --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-dark);
-  --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-dark);
-  --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-dark);
-  --md-sys-color-shadow: var(--md-sys-color-shadow-dark);
-  --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-dark);
-  --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-dark);
-  --md-sys-color-scrim: var(--md-sys-color-scrim-dark);
-}
-
-:root, :host {
-  --surface-color: var(--md-sys-color-surface);
-  --background-color: var(--md-sys-color-background);
-  --font-color-main: var(--md-sys-color-on-background);
-  --font-color-medium: var(--md-sys-color-on-surface-variant);
-  --font-color-disabled: var(--md-sys-color-on-surface);
-  --font-on-primary-color-main: var(--md-sys-color-on-primary);
-  --font-on-primary-color-dark-main: var(--md-sys-color-on-primary-dark);
-  --font-on-primary-color-dark-medium: var(--md-sys-color-on-surface-variant-dark);
-  --font-on-primary-color-medium: var(--md-sys-color-on-surface-variant);
-  --font-on-primary-color-disabled: rgba(255, 255, 255, 0.38);
-  --font-on-secondary-color-main: var(--md-sys-color-on-secondary);
-  --hover-color: rgba(0, 0, 0, 0.04);
-  --focus-color: rgba(0, 0, 0, 0.12);
-  --focus-color-solid: #E0E0E0;
-  --background-color-disabled: rgba(0, 0, 0, 0.12);
-  --background-color-level-4dp: rgba(0, 0, 0, 0.09);
-  --background-color-level-16dp-solid: var(--surface-color);
-  --background-color-slight-emphasis: rgba(0, 0, 0, 0.08);
-  --background-color-card: var(--surface-color);
-  --tooltip-background-color: #313033;
-  --tooltip-font-color: rgba(255, 255, 255, 0.77);
-  --separator-color: #DDDDDD; /* borders between components */
-  --error-color: #F44336;
-  --slider-track-color: var(--md-sys-color-shadow-light);
-  --switch-thumb-off-color: var(--md-ref-palette-primary100);
-  --carousel-indicator-color: rgba(255, 255, 255, 0.45);
-  --carousel-indicator-active-color: var(--md-ref-palette-primary100);
-  --primary-color: var(--md-sys-color-primary);
-  --primary-color-dark: var(--md-sys-color-primary-dark);
-  --primary-color-raised-hover-solid: var(--md-ref-palette-primary70);
-  --primary-color-raised-focus-solid: var(--md-ref-palette-primary80);
-  --primary-color-font-medium-color: rgba(var(--primary-color-numeric), 0.7);
-  --primary-color-font-disabled-color: rgba(var(--primary-color-numeric), 0.4);
-  --primary-color-hover-opaque: rgba(var(--primary-color-numeric), 0.06);
-  --primary-color-focus-opaque: rgba(var(--primary-color-numeric), 0.18);
-  --secondary-color: var(--md-sys-color-secondary);
-  --secondary-color-hover-solid: var(--md-ref-palette-secondary70);
-  --secondary-color-focus-solid: var(--md-ref-palette-secondary80);
-  --secondary-container-color: var(--md-sys-color-secondary-container);
-  --font-on-secondary-container-color: var(--md-sys-color-on-secondary-container);
-  --md_sys_color_on-surface: 28, 27, 31;
-}
-
-:root[theme=dark] {
-  --font-on-primary-color-disabled: rgba(0, 0, 0, 0.38);
-  --hover-color: rgba(255, 255, 255, 0.04);
-  --focus-color: rgba(255, 255, 255, 0.12);
-  --focus-color-solid: #424242;
-  --background-color-disabled: rgba(255, 255, 255, 0.12);
-  --background-color-level-4dp: rgba(255, 255, 255, 0.09);
-  --background-color-slight-emphasis: rgba(255, 255, 255, 0.05);
-  --separator-color: #424242; /* borders between components */
-  --error-color: #CF6679;
-  --switch-thumb-off-color: #bababa;
-  --md_sys_color_on-surface: 230, 225, 229;
-}
-
 .materialize-red {
   background-color: #e51c23 !important;
 }
@@ -3296,6 +3311,11 @@ html {
           box-sizing: inherit;
 }
 
+body {
+  background-color: var(--md-sys-color-background);
+  color: var(--md-sys-color-on-background);
+}
+
 button,
 input,
 optgroup,
@@ -3325,30 +3345,32 @@ a {
   clear: both;
 }
 
-.z-depth-0 {
+.z-depth-0, .btn:focus.tonal, .btn-small:focus.tonal, .btn-large:focus.tonal, .btn:focus.filled, .btn-small:focus.filled, .btn-large:focus.filled, .btn.disabled, .btn-floating.disabled, .btn-large.disabled, .btn-small.disabled, .btn-flat.disabled,
+.btn:disabled, .btn-floating:disabled, .btn-large:disabled, .btn-small:disabled, .btn-flat:disabled,
+.btn[disabled], .btn-floating[disabled], .btn-large[disabled], .btn-small[disabled], .btn-flat[disabled], .btn.text, .text.btn-small, .text.btn-large, .btn-flat {
   -webkit-box-shadow: none !important;
           box-shadow: none !important;
 }
 
 /* 2dp elevation modified*/
-.z-depth-1, .sidenav, .collapsible, .dropdown-content, .btn-floating, .btn.elevated, .elevated.btn-small, .elevated.btn-large, .toast, .card, .card-panel, nav {
+.z-depth-1, .sidenav, .collapsible, .dropdown-content, .btn-floating, .btn:focus.elevated, .btn-small:focus.elevated, .btn-large:focus.elevated, .btn.tonal:hover, .tonal.btn-small:hover, .tonal.btn-large:hover, .btn.filled:hover, .filled.btn-small:hover, .filled.btn-large:hover, .btn.elevated, .elevated.btn-small, .elevated.btn-large, .card, .card-panel, nav {
   -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
           box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
 }
 
-.z-depth-1-half, .btn-floating:focus, .btn-floating:hover, .btn:focus, .btn-small:focus, .btn-large:focus, .btn:hover, .btn-small:hover, .btn-large:hover {
+.z-depth-1-half, .btn-floating:focus, .btn-floating:hover {
   -webkit-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
           box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
 }
 
 /* 6dp elevation modified*/
-.z-depth-2 {
+.z-depth-2, .btn.elevated:hover, .elevated.btn-small:hover, .elevated.btn-large:hover {
   -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
           box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
 }
 
 /* 12dp elevation modified*/
-.z-depth-3 {
+.z-depth-3, .toast {
   -webkit-box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
           box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
 }
@@ -3379,13 +3401,13 @@ a {
 .divider {
   height: 1px;
   overflow: hidden;
-  background-color: var(--separator-color);
+  background-color: var(--md-sys-color-outline-variant);
 }
 
 blockquote {
   margin: 20px 0;
   padding-left: 1.5rem;
-  border-left: 5px solid var(--primary-color);
+  border-left: 5px solid var(--md-sys-color-primary);
 }
 
 i {
@@ -3411,6 +3433,12 @@ i.large {
   font-size: 6rem;
 }
 
+html.noscroll {
+  position: fixed;
+  overflow-y: scroll;
+  width: 100%;
+}
+
 img.responsive-img,
 video.responsive-video {
   max-width: 100%;
@@ -3425,24 +3453,24 @@ video.responsive-video {
   height: 30px;
 }
 .pagination li a {
-  color: var(--font-color-medium);
+  color: var(--md-sys-color-on-surface-variant);
   display: inline-block;
   font-size: 1.2rem;
   padding: 0 10px;
   line-height: 30px;
 }
 .pagination li:hover:not(.disabled) {
-  background-color: var(--primary-color-hover-opaque);
+  background-color: rgba(var(--md-sys-color-primary-numeric), 0.06);
 }
 .pagination li.active a {
-  color: var(--font-on-primary-color-main);
+  color: var(--md-sys-color-on-primary);
 }
 .pagination li.active, .pagination li.active:hover {
-  background-color: var(--primary-color);
+  background-color: var(--md-sys-color-primary);
 }
 .pagination li.disabled a {
   cursor: default;
-  color: var(--font-color-disabled);
+  color: var(--md-sys-color-on-surface);
 }
 .pagination li i {
   font-size: 2rem;
@@ -3457,7 +3485,7 @@ video.responsive-video {
     width: 100%;
   }
   .pagination li.prev,
-.pagination li.next {
+  .pagination li.next {
     width: 10%;
   }
   .pagination li.pages {
@@ -3496,7 +3524,7 @@ video.responsive-video {
   display: none;
 }
 .breadcrumb:last-child {
-  color: var(--font-on-primary-color-main);
+  color: var(--md-sys-color-on-primary);
 }
 
 .parallax-container {
@@ -3628,12 +3656,15 @@ ul.staggered-list li {
 }
 
 .page-footer {
-  padding-top: 20px;
-  color: var(--font-on-primary-color-main);
-  background-color: var(--primary-color);
+  margin-top: 5rem;
+  padding-top: 3rem;
+  border-top: 1px dashed var(--md-sys-color-outline-variant);
+}
+.page-footer p {
+  color: var(--md-sys-color-outline-light);
 }
 .page-footer a {
-  color: var(--font-on-primary-color-main);
+  color: var(--md-sys-color-primary);
 }
 .page-footer .footer-copyright,
 .page-footer .footer-copyright a {
@@ -3652,8 +3683,6 @@ ul.staggered-list li {
       -ms-flex-pack: justify;
           justify-content: space-between;
   padding: 10px 0px;
-  color: var(--font-on-primary-color-dark-medium);
-  background-color: var(--primary-color-dark);
 }
 
 .page-footer ul {
@@ -3675,24 +3704,24 @@ table.striped tr {
   border-bottom: none;
 }
 table.striped tbody > tr:nth-child(odd) {
-  background-color: var(--background-color-slight-emphasis);
+  background-color: rgba(0, 0, 0, 0.08);
 }
 table.highlight > tbody > tr {
   -webkit-transition: background-color 0.25s ease;
   transition: background-color 0.25s ease;
 }
 table.highlight > tbody > tr:hover {
-  background-color: var(--hover-color);
+  background-color: rgba(0, 0, 0, 0.04);
 }
 table thead {
-  color: var(--font-color-medium);
+  color: var(--md-sys-color-on-surface-variant);
 }
 table.centered thead tr th, table.centered tbody tr td {
   text-align: center;
 }
 
 tr {
-  border-bottom: 1px solid var(--separator-color);
+  border-bottom: 1px solid var(--md-sys-color-outline-variant);
 }
 
 td, th {
@@ -3716,7 +3745,7 @@ td, th {
     content: " ";
   }
   table.responsive-table th,
-table.responsive-table td {
+  table.responsive-table td {
     margin: 0;
     vertical-align: top;
   }
@@ -3760,7 +3789,7 @@ table.responsive-table td {
   }
   table.responsive-table thead {
     border: 0;
-    border-right: 1px solid var(--separator-color);
+    border-right: 1px solid var(--md-sys-color-outline-variant);
   }
 }
 .video-container {
@@ -4320,7 +4349,7 @@ input[type=range] + .thumb {
   padding-left: 0;
   list-style-type: none;
   margin: 0.5rem 0 1rem 0;
-  border: 1px solid var(--separator-color);
+  border: 1px solid var(--md-sys-color-outline-variant);
   border-radius: 2px;
   overflow: hidden;
   position: relative;
@@ -4330,7 +4359,7 @@ input[type=range] + .thumb {
   line-height: 1.5rem;
   padding: 10px 20px;
   margin: 0;
-  border-bottom: 1px solid var(--separator-color);
+  border-bottom: 1px solid var(--md-sys-color-outline-variant);
 }
 .collection .collection-item.avatar {
   min-height: 84px;
@@ -4351,7 +4380,7 @@ input[type=range] + .thumb {
   font-size: 18px;
   line-height: 42px;
   color: #fff;
-  background-color: var(--slider-track-color);
+  background-color: var(--md-sys-color-shadow-light);
   text-align: center;
 }
 .collection .collection-item.avatar .title {
@@ -4369,24 +4398,24 @@ input[type=range] + .thumb {
   border-bottom: none;
 }
 .collection .collection-item.active {
-  background-color: var(--primary-color);
-  color: var(--font-on-primary-color-main);
+  background-color: var(--md-sys-color-primary);
+  color: var(--md-sys-color-on-primary);
 }
 .collection .collection-item.active .secondary-content {
-  color: var(--font-on-primary-color-main);
+  color: var(--md-sys-color-on-primary);
 }
 .collection a.collection-item {
   display: block;
   -webkit-transition: 0.25s;
   transition: 0.25s;
-  color: var(--primary-color);
+  color: var(--md-sys-color-primary);
 }
 .collection a.collection-item:not(.active):hover {
-  background-color: var(--hover-color);
+  background-color: rgba(0, 0, 0, 0.04);
 }
 .collection.with-header .collection-header {
   background-color: transparent;
-  border-bottom: 1px solid var(--separator-color);
+  border-bottom: 1px solid var(--md-sys-color-outline-variant);
   padding: 10px 20px;
 }
 .collection.with-header .collection-item {
@@ -4398,7 +4427,7 @@ input[type=range] + .thumb {
 
 .secondary-content {
   float: right;
-  color: var(--primary-color);
+  color: var(--md-sys-color-primary);
 }
 
 .collapsible .collection {
@@ -4406,15 +4435,19 @@ input[type=range] + .thumb {
   border: none;
 }
 
+:root {
+  --bagde-height: 22px;
+}
+
 span.badge {
   min-width: 3rem;
   padding: 0 6px;
   margin-left: 14px;
   text-align: center;
   font-size: 1rem;
-  line-height: 22px;
-  height: 22px;
-  color: var(--font-color-medium);
+  line-height: var(--bagde-height);
+  height: var(--bagde-height);
+  color: var(--md-sys-color-on-surface-variant);
   float: right;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
@@ -4422,8 +4455,8 @@ span.badge {
 span.badge.new {
   font-weight: 300;
   font-size: 0.8rem;
-  color: var(--font-on-primary-color-main);
-  background-color: var(--primary-color);
+  color: var(--md-sys-color-on-primary);
+  background-color: var(--md-sys-color-primary);
   border-radius: 2px;
 }
 span.badge.new:after {
@@ -4434,20 +4467,20 @@ span.badge[data-badge-caption]::after {
 }
 
 .active span.badge {
-  color: var(--font-on-primary-color-main);
+  color: var(--md-sys-color-on-primary);
 }
 
 nav ul a span.badge {
   display: inline-block;
   float: none;
   margin-left: 4px;
-  line-height: 22px;
-  height: 22px;
+  line-height: var(--bagde-height);
+  height: var(--bagde-height);
   -webkit-font-smoothing: auto;
 }
 
 .collection-item span.badge {
-  margin-top: calc(0.75rem - 11px);
+  margin-top: calc(0.75rem - var(--bagde-height) * 0.5);
 }
 
 .collapsible span.badge {
@@ -4455,11 +4488,11 @@ nav ul a span.badge {
 }
 
 .collapsible .active span.badge:not(.new) {
-  color: var(--font-color-medium);
+  color: var(--md-sys-color-on-surface-variant);
 }
 
 .sidenav span.badge {
-  margin-top: calc(24px - 11px);
+  margin-top: calc(var(--sidenav-line-height) * 0.5 - 11px);
 }
 
 table span.badge {
@@ -4498,8 +4531,28 @@ table span.badge {
 }
 
 .row {
+  --gap-size: 1.5rem;
   display: grid;
   grid-template-columns: repeat(12, 1fr);
+  gap: var(--gap-size);
+}
+.row .g-0 {
+  gap: 0;
+}
+.row .g-1 {
+  gap: calc(0.25 * var(--gap-size));
+}
+.row .g-2 {
+  gap: calc(0.5 * var(--gap-size));
+}
+.row .g-3 {
+  gap: calc(1 * var(--gap-size));
+}
+.row .g-4 {
+  gap: calc(1.5 * var(--gap-size));
+}
+.row .g-5 {
+  gap: calc(3 * var(--gap-size));
 }
 .row .s1 {
   grid-column: auto/span 1;
@@ -4784,18 +4837,23 @@ table span.badge {
   }
 }
 
+:root {
+  --navbar-height: 64px;
+  --navbar-height-mobile: 56px;
+}
+
 nav {
-  color: var(--font-on-primary-color-main);
-  background-color: var(--secondary-container-color);
+  color: var(--md-sys-color-on-primary);
+  background-color: var(--md-sys-color-secondary-container);
   width: 100%;
-  height: 56px;
-  line-height: 56px;
+  height: var(--navbar-height-mobile);
+  line-height: var(--navbar-height-mobile);
 }
 nav.nav-extended {
   height: auto;
 }
 nav.nav-extended .nav-wrapper {
-  min-height: 56px;
+  min-height: var(--navbar-height-mobile);
   height: auto;
 }
 nav.nav-extended .nav-content {
@@ -4803,7 +4861,7 @@ nav.nav-extended .nav-content {
   line-height: normal;
 }
 nav a {
-  color: var(--font-on-primary-color-main);
+  color: var(--md-sys-color-on-primary);
 }
 nav i,
 nav [class^=mdi-], nav [class*=mdi-],
@@ -4811,8 +4869,8 @@ nav i.material-icons, nav i.material-symbols-outlined,
 nav i.material-symbols-rounded, nav i.material-symbols-sharp {
   display: block;
   font-size: 24px;
-  height: 56px;
-  line-height: 56px;
+  height: var(--navbar-height-mobile);
+  line-height: var(--navbar-height-mobile);
 }
 nav .nav-wrapper {
   position: relative;
@@ -4827,16 +4885,16 @@ nav .sidenav-trigger {
   float: left;
   position: relative;
   z-index: 1;
-  height: 56px;
+  height: var(--navbar-height-mobile);
   margin: 0 18px;
 }
 nav .sidenav-trigger i {
-  height: 56px;
-  line-height: 56px;
+  height: var(--navbar-height-mobile);
+  line-height: var(--navbar-height-mobile);
 }
 nav .brand-logo {
   position: absolute;
-  color: var(--font-on-primary-color-main);
+  color: var(--md-sys-color-on-primary);
   display: inline-block;
   font-size: 2.1rem;
   padding: 0;
@@ -4895,16 +4953,16 @@ nav ul:not(.dropdown-content) > li > a {
   -webkit-transition: background-color 0.3s;
   transition: background-color 0.3s;
   font-size: 1rem;
-  color: var(--font-on-primary-color-main);
+  color: var(--md-sys-color-on-primary);
   display: block;
   padding: 0 15px;
   cursor: pointer;
 }
 nav ul:not(.dropdown-content) > li > a.active {
-  background-color: var(--primary-color-raised-focus-solid);
+  background-color: var(--md-ref-palette-primary80);
 }
 nav ul:not(.dropdown-content) > li > a:hover:not(.active) {
-  background-color: var(--primary-color-raised-hover-solid);
+  background-color: var(--md-ref-palette-primary70);
 }
 nav ul:not(.dropdown-content) > li > a.btn, nav ul:not(.dropdown-content) > li > a.btn-small, nav ul:not(.dropdown-content) > li > a.btn-large, nav ul:not(.dropdown-content) > li > a.btn-flat, nav ul:not(.dropdown-content) > li > a.btn-floating {
   margin-top: -2px;
@@ -4931,7 +4989,7 @@ nav .input-field input[type=search] {
   font-size: 1.2rem;
   border: none;
   padding-left: 2rem;
-  color: #888;
+  color: var(--md-sys-color-on-primary);
 }
 nav .input-field input[type=search]:focus, nav .input-field input[type=search][type=text]:valid, nav .input-field input[type=search][type=password]:valid, nav .input-field input[type=search][type=email]:valid, nav .input-field input[type=search][type=url]:valid, nav .input-field input[type=search][type=date]:valid {
   border: none;
@@ -4948,12 +5006,12 @@ nav .input-field label i {
   transition: color 0.3s;
 }
 nav .input-field label.active i {
-  color: var(--font-on-primary-color-main);
+  color: var(--md-sys-color-on-primary);
 }
 
 .navbar-fixed {
   position: relative;
-  height: 56px;
+  height: var(--navbar-height-mobile);
   z-index: 997;
 }
 .navbar-fixed nav {
@@ -4963,14 +5021,14 @@ nav .input-field label.active i {
 
 @media only screen and (min-width : 601px) {
   nav.nav-extended .nav-wrapper {
-    min-height: 64px;
+    min-height: var(--navbar-height-mobile);
   }
   nav, nav .nav-wrapper i, nav a.sidenav-trigger, nav a.sidenav-trigger i {
-    height: 64px;
-    line-height: 64px;
+    height: var(--navbar-height);
+    line-height: var(--navbar-height);
   }
   .navbar-fixed {
-    height: 64px;
+    height: var(--navbar-height);
   }
 }
 a {
@@ -4980,7 +5038,7 @@ a {
 html {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   font-weight: normal;
-  color: var(--font-color-main);
+  color: var(--md-sys-color-on-background);
 }
 @media only screen and (min-width: 0) {
   html {
@@ -5201,13 +5259,13 @@ small {
   padding: 24px;
   margin: 0.5rem 0 1rem 0;
   border-radius: 12px;
-  background-color: var(--background-color-card);
+  background-color: var(--md-sys-color-surface);
 }
 
 .card {
   overflow: hidden;
   position: relative;
-  background-color: var(--background-color-card);
+  background-color: var(--md-sys-color-surface);
   -webkit-transition: -webkit-box-shadow 0.25s;
   transition: -webkit-box-shadow 0.25s;
   transition: box-shadow 0.25s;
@@ -5315,7 +5373,7 @@ small {
   width: 100%;
 }
 .card .card-image .card-title {
-  color: var(--background-color-card);
+  color: var(--md-sys-color-surface);
   position: absolute;
   bottom: 0;
   left: 0;
@@ -5338,7 +5396,7 @@ small {
   line-height: 32px;
 }
 .card .card-action {
-  border-top: 1px solid var(--separator-color);
+  border-top: 1px solid var(--md-sys-color-outline-variant);
   position: relative;
   background-color: inherit;
 }
@@ -5350,17 +5408,17 @@ small {
   display: inline-block;
 }
 .card .card-action a:not(.btn):not(.btn-small):not(.btn-large):not(.btn-large):not(.btn-floating) {
-  color: var(--primary-color);
+  color: var(--md-sys-color-primary);
   -webkit-transition: color 0.3s ease;
   transition: color 0.3s ease;
 }
 .card .card-action a:not(.btn):not(.btn-small):not(.btn-large):not(.btn-large):not(.btn-floating):hover {
-  background-color: var(--primary-color-hover-opaque);
+  background-color: rgba(var(--md-sys-color-primary-numeric), 0.06);
 }
 .card .card-reveal {
   padding: 24px;
   position: absolute;
-  background-color: var(--background-color-card);
+  background-color: var(--md-sys-color-surface);
   width: 100%;
   overflow-y: auto;
   left: 0;
@@ -5401,7 +5459,7 @@ small {
 }
 
 .toast {
-  border-radius: 2px;
+  border-radius: 4px;
   top: 35px;
   width: auto;
   margin-top: 10px;
@@ -5409,12 +5467,13 @@ small {
   max-width: 100%;
   height: auto;
   min-height: 48px;
-  line-height: 1.5em;
-  background-color: var(--tooltip-background-color);
-  padding: 10px 25px;
-  font-size: 1rem;
-  font-weight: 400;
-  color: var(--tooltip-font-color);
+  padding-left: 16px;
+  padding-right: 12px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  color: var(--md-sys-color-inverse-on-surface);
+  background-color: var(--md-sys-color-inverse-surface);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5430,7 +5489,7 @@ small {
   cursor: default;
 }
 .toast .toast-action {
-  color: #eeff41;
+  color: var(--md-sys-color-inverse-primary);
   font-weight: 500;
   margin-right: -25px;
   margin-left: 3rem;
@@ -5453,7 +5512,7 @@ small {
   overflow-y: hidden;
   height: 48px;
   width: 100%;
-  background-color: var(--surface-color);
+  background-color: var(--md-sys-color-surface);
   margin: 0 auto;
   white-space: nowrap;
 }
@@ -5466,10 +5525,10 @@ small {
 .tabs.tabs-transparent .tab.disabled a,
 .tabs.tabs-transparent .tab.disabled a:hover,
 .tabs.tabs-transparent .tab.disabled a:focus {
-  color: var(--font-on-primary-color-disabled);
+  color: rgba(255, 255, 255, 0.38);
 }
 .tabs.tabs-transparent .tab a:hover {
-  background-color: var(--hover-color);
+  background-color: rgba(0, 0, 0, 0.04);
 }
 .tabs.tabs-transparent .tab a.active,
 .tabs.tabs-transparent .tab a:focus {
@@ -5478,10 +5537,10 @@ small {
 .tabs.tabs-transparent .tab a:hover,
 .tabs.tabs-transparent .tab a.active,
 .tabs.tabs-transparent .tab a:focus {
-  color: var(--font-on-primary-color-main);
+  color: var(--md-sys-color-on-primary);
 }
 .tabs.tabs-transparent .indicator {
-  background-color: var(--font-on-primary-color-main);
+  background-color: var(--md-sys-color-on-primary);
 }
 .tabs.tabs-fixed-width {
   display: -webkit-box;
@@ -5506,7 +5565,7 @@ small {
   margin: 0;
 }
 .tabs .tab a {
-  color: var(--font-color-medium);
+  color: var(--md-sys-color-on-surface-variant);
   display: block;
   width: 100%;
   height: 100%;
@@ -5521,17 +5580,17 @@ small {
   background-color: transparent;
 }
 .tabs .tab a.active, .tabs .tab a:focus, .tabs .tab a:hover {
-  color: var(--primary-color);
+  color: var(--md-sys-color-primary);
 }
 .tabs .tab a:hover {
-  background-color: var(--primary-color-hover-opaque);
+  background-color: rgba(var(--md-sys-color-primary-numeric), 0.06);
 }
 .tabs .tab a:focus, .tabs .tab a.active {
-  background-color: var(--primary-color-focus-opaque);
+  background-color: rgba(var(--md-sys-color-primary-numeric), 0.18);
   outline: none;
 }
 .tabs .tab.disabled a, .tabs .tab.disabled a:hover {
-  color: var(--font-color-disabled);
+  color: var(--md-sys-color-on-surface);
   cursor: default;
   background-color: transparent;
 }
@@ -5541,11 +5600,13 @@ small {
 .tabs .indicator {
   position: absolute;
   bottom: 0;
-  height: 2px;
-  background-color: var(--primary-color);
+  height: 3px;
+  background-color: var(--md-sys-color-primary);
   will-change: left, right;
+  border-radius: 3px 3px 0 0;
 }
 
+/* Fixed Sidenav hide on smaller */
 @media only screen and (max-width : 992.99px) {
   .tabs {
     display: -webkit-box;
@@ -5566,17 +5627,22 @@ small {
 .material-tooltip {
   padding: 0 8px;
   border-radius: 4px;
-  background-color: var(--md-sys-color-inverse-surface);
   color: var(--md-sys-color-inverse-on-surface);
+  background-color: var(--md-sys-color-inverse-surface);
   font-family: var(--md-sys-typescale-body-small-font-family-name);
   font-size: var(--md-sys-typescale-body-small-font-size);
   line-height: var(--md-sys-typescale-body-small-line-height);
   font-weight: var(--md-sys-typescale-body-small-font-weight);
   min-height: 24px;
   opacity: 0;
-  text-align: center;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 400;
+  letter-spacing: 0.4px;
   position: absolute;
-  max-width: calc(100% - 4px);
+  max-width: 300px;
   overflow: hidden;
   left: 0;
   top: 0;
@@ -5607,17 +5673,19 @@ small {
 }
 
 .btn, .btn-small, .btn-large, .btn-floating, .btn-flat {
-  --font-size-icon: 16px;
-  --padding: 24px;
-  --padding-icon: 16px;
-  --gap-icon: 8px;
-  height: 40px;
+  --btn-height: 40px;
+  --btn-font-size-icon: 16px;
+  --btn-padding: 24px;
+  --btn-padding-icon: 16px;
+  --btn-gap-icon: 8px;
+  --btn-border-radius: 4px;
+  --btn-font-size: 14px;
+  height: var(--btn-height);
   border: none;
-  border-radius: 4px;
-  padding-left: var(--padding);
-  padding-right: var(--padding);
-  color: var(--font-on-primary-color-main);
-  font-size: 14px;
+  border-radius: var(--btn-border-radius);
+  padding-left: var(--btn-padding);
+  padding-right: var(--btn-padding);
+  font-size: ver(--btn-font-size);
   font-weight: 500;
   text-decoration: none;
   display: -webkit-inline-box;
@@ -5645,117 +5713,124 @@ small {
 }
 
 .btn.icon-left, .icon-left.btn-small, .icon-left.btn-large {
-  padding-left: calc(var(--padding-icon) + var(--font-size-icon) + var(--gap-icon));
+  padding-left: calc(var(--btn-padding-icon) + var(--btn-font-size-icon) + var(--btn-gap-icon));
 }
 
 .btn.icon-right, .icon-right.btn-small, .icon-right.btn-large {
-  padding-right: calc(var(--padding-icon) + var(--font-size-icon) + var(--gap-icon));
+  padding-right: calc(var(--btn-padding-icon) + var(--btn-font-size-icon) + var(--btn-gap-icon));
 }
 
 .btn.icon-left i, .icon-left.btn-small i, .icon-left.btn-large i, .btn.icon-right i, .icon-right.btn-small i, .icon-right.btn-large i {
   position: absolute;
-  font-size: var(--font-size-icon);
+  font-size: var(--btn-font-size-icon);
 }
 
 .btn.icon-left i, .icon-left.btn-small i, .icon-left.btn-large i {
-  left: var(--padding-icon);
+  left: var(--btn-padding-icon);
 }
 
 .btn.icon-right i, .icon-right.btn-small i, .icon-right.btn-large i {
-  right: var(--padding-icon);
-}
-
-.btn.disabled,
-.btn-floating.disabled,
-.btn-large.disabled,
-.btn-small.disabled,
-.btn-flat.disabled,
-.btn:disabled,
-.btn-floating:disabled,
-.btn-large:disabled,
-.btn-small:disabled,
-.btn-flat:disabled,
-.btn[disabled],
-.btn-floating[disabled],
-.btn-large[disabled],
-.btn-small[disabled],
-.btn-flat[disabled] {
-  pointer-events: none;
-  background-color: var(--background-color-disabled) !important;
-  -webkit-box-shadow: none;
-          box-shadow: none;
-  color: var(--font-color-disabled) !important;
-  cursor: default;
+  right: var(--btn-padding-icon);
 }
-.btn.disabled:hover,
-.btn-floating.disabled:hover,
-.btn-large.disabled:hover,
-.btn-small.disabled:hover,
-.btn-flat.disabled:hover,
-.btn:disabled:hover,
-.btn-floating:disabled:hover,
-.btn-large:disabled:hover,
-.btn-small:disabled:hover,
-.btn-flat:disabled:hover,
-.btn[disabled]:hover,
-.btn-floating[disabled]:hover,
-.btn-large[disabled]:hover,
-.btn-small[disabled]:hover,
-.btn-flat[disabled]:hover {
-  background-color: var(--background-color-disabled) !important;
-  color: var(--font-color-disabled) !important;
-}
-
-.btn.filled, .btn, .btn-small, .btn-large {
+
+.btn.filled, .filled.btn-small, .filled.btn-large {
+  color: var(--md-sys-color-on-primary);
   background-color: var(--md-sys-color-primary);
 }
 
-.btn.tonal, .tonal.btn-small, .tonal.btn-large, .btn.elevated, .elevated.btn-small, .elevated.btn-large {
+.btn.tonal, .tonal.btn-small, .tonal.btn-large {
+  color: var(--md-sys-color-on-secondary-container);
   background-color: var(--md-sys-color-secondary-container);
+}
+
+.btn.elevated, .elevated.btn-small, .elevated.btn-large {
   color: var(--md-sys-color-on-secondary-container);
+  background-color: var(--md-sys-color-secondary-container);
 }
 
-.btn.text, .text.btn-small, .text.btn-large, .btn-flat {
-  -webkit-box-shadow: none;
-          box-shadow: none;
+.btn.outlined, .outlined.btn-small, .outlined.btn-large {
   background-color: transparent;
   color: var(--md-sys-color-primary);
-  cursor: pointer;
-  -webkit-transition: background-color 0.2s;
-  transition: background-color 0.2s;
+  border: 1px solid var(--md-sys-color-outline);
 }
-.btn.text:focus, .text.btn-small:focus, .text.btn-large:focus, .btn.text:hover, .text.btn-small:hover, .text.btn-large:hover, .btn-flat:focus, .btn-flat:hover {
+
+.btn.text, .text.btn-small, .text.btn-large, .btn-flat {
+  color: var(--md-sys-color-primary);
+  background-color: transparent;
+}
+
+.btn.disabled, .btn-floating.disabled, .btn-large.disabled, .btn-small.disabled, .btn-flat.disabled,
+.btn:disabled, .btn-floating:disabled, .btn-large:disabled, .btn-small:disabled, .btn-flat:disabled,
+.btn[disabled], .btn-floating[disabled], .btn-large[disabled], .btn-small[disabled], .btn-flat[disabled] {
+  color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 76%);
+  background-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 24%);
+  pointer-events: none;
   -webkit-box-shadow: none;
           box-shadow: none;
-  background-color: var(--hover-color);
+  cursor: default;
 }
-.btn.text:focus, .text.btn-small:focus, .text.btn-large:focus, .btn-flat:focus {
-  background-color: var(--focus-color);
+
+.btn.elevated:hover, .elevated.btn-small:hover, .elevated.btn-large:hover {
+  color: var(--md-sys-color-primary);
+  background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 16%);
 }
-.btn.text.disabled, .text.disabled.btn-small, .text.disabled.btn-large, .btn.text.btn.text[disabled], .text.text[disabled].btn-small, .text.text[disabled].btn-large, .btn.text.btn-flat[disabled], .btn-flat.disabled, .btn-flat.btn.text[disabled], .btn-flat.btn-flat[disabled] {
-  background-color: transparent !important;
-  color: var(--font-color-disabled) !important;
-  cursor: default;
+
+.btn.filled:hover, .filled.btn-small:hover, .filled.btn-large:hover {
+  color: var(--md-sys-color-on-primary);
+  background-color: color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 16%);
 }
 
-.btn.outlined, .outlined.btn-small, .outlined.btn-large {
-  background-color: transparent;
-  color: var(--primary-color);
-  border: 1px solid var(--primary-color);
+.btn.tonal:hover, .tonal.btn-small:hover, .tonal.btn-large:hover {
+  color: var(--md-sys-color-on-secondary-container);
+  background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 16%);
 }
 
-.btn:hover, .btn-small:hover, .btn-large:hover {
-  background-color: var(--primary-color-raised-hover-solid);
+.btn.outlined:hover, .outlined.btn-small:hover, .outlined.btn-large:hover {
+  color: var(--md-sys-color-primary);
+  background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 16%);
 }
-.btn:focus, .btn-small:focus, .btn-large:focus {
-  background-color: var(--primary-color-raised-focus-solid);
+
+.btn.text:hover, .text.btn-small:hover, .text.btn-large:hover {
+  color: var(--md-sys-color-primary);
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 16%, transparent);
+}
+
+.btn:focus.elevated, .btn-small:focus.elevated, .btn-large:focus.elevated {
+  color: var(--md-sys-color-primary);
+  background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-primary) 20%);
+}
+
+.btn:focus.filled, .btn-small:focus.filled, .btn-large:focus.filled {
+  color: var(--md-sys-color-on-primary);
+  background-color: color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 20%);
+}
+
+.btn:focus.tonal, .btn-small:focus.tonal, .btn-large:focus.tonal {
+  color: var(--md-sys-color-on-secondary-container);
+  background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 20%);
+}
+
+.btn:focus.outlined, .btn-small:focus.outlined, .btn-large:focus.outlined {
+  color: var(--md-sys-color-primary);
+  background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 20%);
+  border: 1px solid var(--md-sys-color-primary);
+}
+
+.btn:focus.text, .btn-small:focus.text, .btn-large:focus.text {
+  color: var(--md-sys-color-primary);
+  background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 20%);
+}
+
+.btn:focus-visible.filled, .btn-small:focus-visible.filled, .btn-large:focus-visible.filled, .btn:focus-visible.elevated, .btn-small:focus-visible.elevated, .btn-large:focus-visible.elevated, .btn:focus-visible.tonal, .btn-small:focus-visible.tonal, .btn-large:focus-visible.tonal, .btn:focus-visible.outlined, .btn-small:focus-visible.outlined, .btn-large:focus-visible.outlined, .btn:focus-visible.text, .btn-small:focus-visible.text, .btn-large:focus-visible.text {
+  outline: 3px solid var(--md-sys-color-secondary);
+  outline-offset: 2px;
 }
 
 .btn-floating {
-  color: var(--font-on-secondary-color-main);
   width: 40px;
   height: 40px;
-  background-color: var(--secondary-color);
+  color: var(--md-sys-color-on-primary-container);
+  background-color: var(--md-sys-color-primary-container);
   border-radius: 16px;
   padding: 0;
   display: grid;
@@ -5773,10 +5848,10 @@ small {
   vertical-align: middle;
 }
 .btn-floating:hover {
-  background-color: var(--secondary-color-hover-solid);
+  background-color: color-mix(in srgb, var(--md-sys-color-primary-container), var(--md-sys-color-on-primary-container) 16%);
 }
 .btn-floating:focus {
-  background-color: var(--secondary-color-focus-solid);
+  background-color: var(--md-ref-palette-secondary80);
 }
 .btn-floating:before {
   border-radius: 0;
@@ -5790,11 +5865,12 @@ small {
   bottom: -28px;
 }
 .btn-floating.btn-small {
-  width: 30px;
-  height: 30px;
+  --btn-small-height: calc(0.75 * var(--btn-height));
+  width: var(--btn-small-height) e;
+  height: var(--btn-small-height);
 }
 .btn-floating.btn-small.halfway-fab {
-  bottom: -15px;
+  bottom: calc(var(--btn-small-height) * -0.5);
 }
 .btn-floating.halfway-fab {
   position: absolute;
@@ -5806,7 +5882,7 @@ small {
   left: 24px;
 }
 .btn-floating i {
-  color: var(--font-on-secondary-color-main);
+  color: var(--md-sys-color-on-secondary);
   font-size: 1.6rem;
   width: inherit;
   display: inline-block;
@@ -5915,7 +5991,7 @@ button.btn-floating {
   background-color: transparent;
   -webkit-box-shadow: none;
           box-shadow: none;
-  color: var(--font-on-secondary-color-main);
+  color: var(--md-sys-color-on-secondary);
   line-height: 56px;
   z-index: 1;
 }
@@ -5944,14 +6020,14 @@ button.btn-floating {
   z-index: -1;
   width: 40px;
   height: 40px;
-  background-color: var(--secondary-color);
+  background-color: var(--md-sys-color-secondary);
   border-radius: 16px;
   -webkit-transform: scale(0);
           transform: scale(0);
 }
 
 .btn-large {
-  height: 60px;
+  height: calc(1.5 * var(--btn-height));
   font-size: 18px;
   padding: 0 28px;
 }
@@ -5960,8 +6036,7 @@ button.btn-floating {
 }
 
 .btn-small {
-  height: 30px;
-  line-height: 30px;
+  height: calc(0.75 * var(--btn-height));
   font-size: 13px;
 }
 .btn-small i {
@@ -5979,7 +6054,7 @@ button.btn-floating {
 .dropdown-content {
   padding-left: 0;
   list-style-type: none;
-  background-color: var(--surface-color);
+  background-color: var(--md-sys-color-surface);
   margin: 0;
   display: none;
   min-width: 100px;
@@ -5992,12 +6067,9 @@ button.btn-floating {
   -webkit-transform-origin: 0 0;
           transform-origin: 0 0;
 }
-.dropdown-content:focus {
-  outline: 0;
-}
 .dropdown-content li {
   clear: both;
-  color: var(--font-color-main);
+  color: var(--md-sys-color-on-background);
   cursor: pointer;
   min-height: 50px;
   line-height: 1.5rem;
@@ -6005,10 +6077,7 @@ button.btn-floating {
   text-align: left;
 }
 .dropdown-content li:hover, .dropdown-content li.active {
-  background-color: var(--hover-color);
-}
-.dropdown-content li:focus {
-  outline: none;
+  background-color: color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-on-surface) 8%);
 }
 .dropdown-content li.divider {
   min-height: 0;
@@ -6016,7 +6085,7 @@ button.btn-floating {
 }
 .dropdown-content li > a, .dropdown-content li > span {
   font-size: 16px;
-  color: var(--primary-color);
+  color: var(--md-sys-color-primary);
   display: block;
   line-height: 22px;
   padding: 14px 16px;
@@ -6035,7 +6104,7 @@ button.btn-floating {
 }
 
 body.keyboard-focused .dropdown-content li:focus {
-  background-color: var(--focus-color);
+  background-color: rgba(0, 0, 0, 0.12);
 }
 
 .input-field.col .dropdown-content [type=checkbox] + label {
@@ -6051,17 +6120,21 @@ body.keyboard-focused .dropdown-content li:focus {
 }
 
 .modal {
+  --modal-footer-height: 56px;
+  --modal-footer-divider-height: 1px;
+  --modal-border-radius: 28px;
+  --modal-padding: 24px;
   display: none;
   position: fixed;
   left: 0;
   right: 0;
-  background-color: var(--background-color-level-16dp-solid);
+  background-color: var(--md-sys-color-surface);
   padding: 0;
   max-height: 70%;
   width: 55%;
   margin: auto;
   overflow-y: auto;
-  border-radius: 2px;
+  border-radius: var(--modal-border-radius);
   will-change: top, opacity;
 }
 .modal:focus {
@@ -6076,17 +6149,17 @@ body.keyboard-focused .dropdown-content li:focus {
   margin-top: 0;
 }
 .modal .modal-content {
-  padding: 24px;
+  padding: var(--modal-padding);
   overflow-y: hidden;
 }
 .modal .modal-close {
   cursor: pointer;
 }
 .modal .modal-footer {
-  border-radius: 0 0 2px 2px;
-  background-color: var(--background-color-level-16dp-solid);
+  border-radius: 0 0 var(--modal-border-radius) var(--modal-border-radius);
+  background-color: var(--md-sys-color-surface);
   padding: 4px 6px;
-  height: 56px;
+  height: var(--modal-footer-height);
   width: 100%;
   text-align: right;
 }
@@ -6114,15 +6187,15 @@ body.keyboard-focused .dropdown-content li:focus {
 }
 .modal.modal-fixed-footer .modal-content {
   position: absolute;
-  height: calc(100% - 56px);
+  height: calc(100% - var(--modal-footer-height));
   max-height: 100%;
   width: 100%;
   overflow-y: auto;
 }
 .modal.modal-fixed-footer .modal-footer {
-  border-top: 1px solid var(--separator-color);
+  border-top: var(--modal-footer-divider-height) solid var(--md-sys-color-outline-variant);
   position: absolute;
-  bottom: 0;
+  bottom: var(--modal-footer-divider-height);
 }
 
 .modal.bottom-sheet {
@@ -6138,9 +6211,9 @@ body.keyboard-focused .dropdown-content li:focus {
 .collapsible {
   padding-left: 0;
   list-style-type: none;
-  border-top: 1px solid var(--separator-color);
-  border-right: 1px solid var(--separator-color);
-  border-left: 1px solid var(--separator-color);
+  border-top: 1px solid var(--md-sys-color-outline-variant);
+  border-right: 1px solid var(--md-sys-color-outline-variant);
+  border-left: 1px solid var(--md-sys-color-outline-variant);
   margin: 0.5rem 0 1rem 0;
 }
 
@@ -6153,8 +6226,7 @@ body.keyboard-focused .dropdown-content li:focus {
   -webkit-tap-highlight-color: transparent;
   line-height: 1.5;
   padding: 1rem;
-  border-bottom: 1px solid var(--separator-color);
-  background-color: var(--surface-color);
+  border-bottom: 1px solid var(--md-sys-color-outline-variant);
 }
 .collapsible-header:focus {
   outline: 0;
@@ -6179,17 +6251,16 @@ body.keyboard-focused .dropdown-content li:focus {
 }
 
 .keyboard-focused .collapsible-header:focus {
-  background-color: var(--focus-color);
+  background-color: rgba(0, 0, 0, 0.12);
 }
 
 .collapsible-body {
   max-height: 0;
-  border-bottom: 1px solid var(--separator-color);
+  border-bottom: 1px solid var(--md-sys-color-outline-variant);
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   padding: 0 2rem;
   overflow: hidden;
-  background-color: var(--surface-color);
 }
 
 .collapsible.popout {
@@ -6214,7 +6285,8 @@ body.keyboard-focused .dropdown-content li:focus {
   --font-size: 14px;
   --font-size-icon: 18px;
   --padding: 8px;
-  background-color: var(--background-color-level-4dp);
+  color: var(--md-sys-color-on-surface-variant);
+  background-color: rgba(0, 0, 0, 0.09);
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -6227,7 +6299,6 @@ body.keyboard-focused .dropdown-content li:focus {
   padding-right: var(--padding);
   font-size: var(--font-size);
   font-weight: 500;
-  color: var(--font-color-medium);
   border-radius: 8px;
   -webkit-box-align: center;
   -webkit-align-items: center;
@@ -6241,8 +6312,8 @@ body.keyboard-focused .dropdown-content li:focus {
 }
 .chip:focus {
   outline: none;
-  background-color: var(--primary-color);
-  color: var(--font-on-primary-color-main);
+  background-color: var(--md-sys-color-primary);
+  color: var(--md-sys-color-on-primary);
 }
 
 .chip.outlined {
@@ -6295,7 +6366,7 @@ body.keyboard-focused .dropdown-content li:focus {
       -ms-flex-wrap: wrap;
           flex-wrap: wrap;
   border: none;
-  border-bottom: 1px solid var(--font-color-medium);
+  border-bottom: 1px solid var(--md-sys-color-on-surface-variant);
   -webkit-box-shadow: none;
           box-shadow: none;
   margin: 0 0 8px 0;
@@ -6305,9 +6376,9 @@ body.keyboard-focused .dropdown-content li:focus {
   transition: all 0.3s;
 }
 .chips.focus {
-  border-bottom: 1px solid var(--primary-color);
-  -webkit-box-shadow: 0 1px 0 0 var(--primary-color);
-          box-shadow: 0 1px 0 0 var(--primary-color);
+  border-bottom: 1px solid var(--md-sys-color-primary);
+  -webkit-box-shadow: 0 1px 0 0 var(--md-sys-color-primary);
+          box-shadow: 0 1px 0 0 var(--md-sys-color-primary);
 }
 .chips:hover {
   cursor: text;
@@ -6315,7 +6386,7 @@ body.keyboard-focused .dropdown-content li:focus {
 .chips input:not([type]):not(.browser-default).input {
   background: none;
   border: 0;
-  color: var(--font-color-main);
+  color: var(--md-sys-color-on-background);
   display: inline-block;
   font-size: 16px;
   height: 32px;
@@ -6383,7 +6454,7 @@ body.keyboard-focused .dropdown-content li:focus {
 .materialbox-caption {
   position: fixed;
   display: none;
-  color: var(--font-color-main);
+  color: var(--md-sys-color-on-background);
   line-height: 50px;
   bottom: 0;
   left: 0;
@@ -6396,33 +6467,35 @@ body.keyboard-focused .dropdown-content li:focus {
 }
 
 select:focus {
-  outline: 1px solid var(--primary-color-raised-focus-solid);
+  outline: 1px solid var(--md-ref-palette-primary80);
 }
 
+/*
 button:focus {
   outline: none;
-  background-color: var(--primary-color-raised-focus-solid);
+  background-color: $button-background-focus;
 }
-
+*/
 label {
   font-size: 0.8rem;
-  color: var(--font-color-medium);
+  color: var(--md-sys-color-on-surface-variant);
 }
 
-/* Text Inputs + Textarea
-   ========================================================================== */
 /* Style Placeholders */
 ::-webkit-input-placeholder {
-  color: var(--font-color-medium);
+  color: var(--md-sys-color-on-surface-variant);
 }
 ::-moz-placeholder {
-  color: var(--font-color-medium);
+  color: var(--md-sys-color-on-surface-variant);
+}
+:-ms-input-placeholder {
+  color: var(--md-sys-color-on-surface-variant);
 }
 ::-ms-input-placeholder {
-  color: var(--font-color-medium);
+  color: var(--md-sys-color-on-surface-variant);
 }
 ::placeholder {
-  color: var(--font-color-medium);
+  color: var(--md-sys-color-on-surface-variant);
 }
 
 /* Text inputs */
@@ -6441,7 +6514,7 @@ input[type=number]:not(.browser-default),
 input[type=search]:not(.browser-default),
 textarea.materialize-textarea {
   outline: none;
-  color: var(--font-color-main);
+  color: var(--md-sys-color-on-background);
   width: 100%;
   font-size: 16px;
   height: 56px;
@@ -6451,14 +6524,15 @@ textarea.materialize-textarea {
 /*
 %custom-success-message {
   content: attr(data-success);
-  color: $input-success-color;
+  color: $success-color;
 }
 %custom-error-message {
   content: attr(data-error);
-  color: $input-error-color;
+  color: var(--md-sys-color-error);
 }
 */
 .input-field {
+  --input-color: var(--md-sys-color-primary);
   position: relative;
   clear: both;
 }
@@ -6467,15 +6541,15 @@ textarea.materialize-textarea {
           box-sizing: border-box; /* https://stackoverflow.com/questions/1377719/padding-within-inputs-breaks-width-100*/
   padding: 0 16px;
   padding-top: 20px;
-  background-color: var(--surface-color);
+  background-color: var(--md-sys-color-surface);
   border: none;
   border-radius: 4px;
-  border-bottom: 1px solid var(--font-color-medium);
+  border-bottom: 1px solid var(--md-sys-color-on-surface-variant);
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
 .input-field input:focus:not([readonly]), .input-field textarea:focus:not([readonly]) {
-  border-bottom: 2px solid var(--primary-color);
+  border-bottom: 2px solid var(--input-color);
   padding-top: 21px;
 }
 .input-field input:disabled, .input-field input[readonly=readonly], .input-field textarea:disabled, .input-field textarea[readonly=readonly] {
@@ -6484,7 +6558,15 @@ textarea.materialize-textarea {
   background-color: rgba(var(--md_sys_color_on-surface), 0.04);
 }
 .input-field input:focus:not([readonly]) + label, .input-field textarea:focus:not([readonly]) + label {
-  color: var(--primary-color);
+  color: var(--input-color);
+}
+.input-field input:not(:-moz-placeholder-shown) + label, .input-field textarea:not(:-moz-placeholder-shown) + label {
+  transform: scale(0.75);
+  top: 8px;
+}
+.input-field input:not(:-ms-input-placeholder) + label, .input-field textarea:not(:-ms-input-placeholder) + label {
+  transform: scale(0.75);
+  top: 8px;
 }
 .input-field input:focus:not([readonly]) + label, .input-field input:not([placeholder=" "]) + label, .input-field input:not(:placeholder-shown) + label, .input-field textarea:focus:not([readonly]) + label, .input-field textarea:not([placeholder=" "]) + label, .input-field textarea:not(:placeholder-shown) + label {
   -webkit-transform: scale(0.75);
@@ -6502,6 +6584,10 @@ textarea.materialize-textarea {
   -moz-user-select: none;
        user-select: none;
 }
+.input-field input:-ms-input-placeholder {
+  -ms-user-select: none;
+      user-select: none;
+}
 .input-field input::-ms-input-placeholder {
   -ms-user-select: none;
       user-select: none;
@@ -6513,7 +6599,7 @@ textarea.materialize-textarea {
           user-select: none;
 }
 .input-field > label {
-  color: var(--font-color-medium);
+  color: var(--md-sys-color-on-surface-variant);
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
@@ -6531,13 +6617,13 @@ textarea.materialize-textarea {
   transition: left 0.2s ease-out, top 0.2s ease-out, transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
 }
 .input-field .supporting-text {
-  color: var(--font-color-medium);
+  color: var(--md-sys-color-on-surface-variant);
   font-size: 12px;
   padding: 0 16px;
   margin-top: 4px;
 }
 .input-field .character-counter {
-  color: var(--font-color-medium);
+  color: var(--md-sys-color-on-surface-variant);
   font-size: 12px;
   float: right;
   padding: 0 16px;
@@ -6579,46 +6665,60 @@ textarea.materialize-textarea {
 }
 .input-field.outlined input, .input-field.outlined textarea {
   padding-top: 0;
-  background-color: var(--background-color);
-  border: 1px solid var(--font-color-medium);
+  background-color: var(--md-sys-color-background);
+  border: 1px solid var(--md-sys-color-on-surface-variant);
   border-radius: 4px;
 }
 .input-field.outlined input:focus:not([readonly]), .input-field.outlined textarea:focus:not([readonly]) {
-  border: 2px solid var(--primary-color);
+  border: 2px solid var(--input-color);
   padding-top: 0;
   margin-left: -1px;
 }
 .input-field.outlined input:focus:not([readonly]) + label, .input-field.outlined textarea:focus:not([readonly]) + label {
-  color: var(--primary-color);
+  color: var(--input-color);
+}
+.input-field.outlined input:not(:-moz-placeholder-shown) + label, .input-field.outlined textarea:not(:-moz-placeholder-shown) + label {
+  top: -8px;
+  left: 16px;
+  margin-left: -4px;
+  padding: 0 4px;
+  background-color: var(--md-sys-color-background);
+}
+.input-field.outlined input:not(:-ms-input-placeholder) + label, .input-field.outlined textarea:not(:-ms-input-placeholder) + label {
+  top: -8px;
+  left: 16px;
+  margin-left: -4px;
+  padding: 0 4px;
+  background-color: var(--md-sys-color-background);
 }
 .input-field.outlined input:focus:not([readonly]) + label, .input-field.outlined input:not([placeholder=" "]) + label, .input-field.outlined input:not(:placeholder-shown) + label, .input-field.outlined textarea:focus:not([readonly]) + label, .input-field.outlined textarea:not([placeholder=" "]) + label, .input-field.outlined textarea:not(:placeholder-shown) + label {
   top: -8px;
   left: 16px;
   margin-left: -4px;
   padding: 0 4px;
-  background-color: var(--background-color);
+  background-color: var(--md-sys-color-background);
 }
 .input-field.outlined input:disabled, .input-field.outlined input[readonly=readonly], .input-field.outlined textarea:disabled, .input-field.outlined textarea[readonly=readonly] {
   color: rgba(var(--md_sys_color_on-surface), 0.38);
   border-color: rgba(var(--md_sys_color_on-surface), 0.12);
 }
 .input-field.error input, .input-field.error textarea {
-  border-color: var(--error-color);
+  border-color: var(--md-sys-color-error);
 }
 .input-field.error input:focus:not([readonly]), .input-field.error textarea:focus:not([readonly]) {
-  border-color: var(--error-color);
+  border-color: var(--md-sys-color-error);
 }
 .input-field.error input:focus:not([readonly]) + label, .input-field.error textarea:focus:not([readonly]) + label {
-  color: var(--error-color);
+  color: var(--md-sys-color-error);
 }
 .input-field.error label {
-  color: var(--error-color);
+  color: var(--md-sys-color-error);
 }
 .input-field.error .supporting-text {
-  color: var(--error-color);
+  color: var(--md-sys-color-error);
 }
 .input-field.error .suffix {
-  color: var(--error-color);
+  color: var(--md-sys-color-error);
 }
 
 /* Search Field */
@@ -6705,7 +6805,7 @@ textarea.materialize-textarea {
 
 /* Autocomplete Items */
 .autocomplete-content li .highlight {
-  color: var(--font-color-main);
+  color: var(--md-sys-color-on-background);
 }
 .autocomplete-content li img {
   height: 40px;
@@ -6713,8 +6813,6 @@ textarea.materialize-textarea {
   margin: 5px 15px;
 }
 
-/* Radio Buttons
-   ========================================================================== */
 [type=radio]:not(:checked),
 [type=radio]:checked {
   position: absolute;
@@ -6765,7 +6863,7 @@ textarea.materialize-textarea {
 
 [type=radio]:not(:checked) + span:before,
 [type=radio]:not(:checked) + span:after {
-  border: 2px solid var(--font-color-medium);
+  border: 2px solid var(--md-sys-color-on-surface-variant);
 }
 
 [type=radio]:not(:checked) + span:after {
@@ -6781,12 +6879,12 @@ textarea.materialize-textarea {
 [type=radio]:checked + span:after,
 [type=radio].with-gap:checked + span:before,
 [type=radio].with-gap:checked + span:after {
-  border: 2px solid var(--primary-color);
+  border: 2px solid var(--md-sys-color-primary);
 }
 
 [type=radio]:checked + span:after,
 [type=radio].with-gap:checked + span:after {
-  background-color: var(--primary-color);
+  background-color: var(--md-sys-color-primary);
 }
 
 [type=radio]:checked + span:after {
@@ -6802,38 +6900,38 @@ textarea.materialize-textarea {
 
 /* Focused styles */
 [type=radio].tabbed:focus + span:before {
-  -webkit-box-shadow: 0 0 0 10px var(--primary-color-focus-opaque);
-          box-shadow: 0 0 0 10px var(--primary-color-focus-opaque);
+  -webkit-box-shadow: 0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18);
+          box-shadow: 0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18);
 }
 
 /* Disabled Radio With gap */
 [type=radio].with-gap:disabled:checked + span:before {
-  border: 2px solid var(--font-color-disabled);
+  border: 2px solid var(--md-sys-color-on-surface);
 }
 
 [type=radio].with-gap:disabled:checked + span:after {
   border: none;
-  background-color: var(--font-color-disabled);
+  background-color: var(--md-sys-color-on-surface);
 }
 
 /* Disabled style */
 [type=radio]:disabled:not(:checked) + span:before,
 [type=radio]:disabled:checked + span:before {
   background-color: transparent;
-  border-color: var(--font-color-disabled);
+  border-color: var(--md-sys-color-on-surface);
 }
 
 [type=radio]:disabled + span {
-  color: var(--font-color-disabled);
+  color: var(--md-sys-color-on-surface);
 }
 
 [type=radio]:disabled:not(:checked) + span:before {
-  border-color: var(--font-color-disabled);
+  border-color: var(--md-sys-color-on-surface);
 }
 
 [type=radio]:disabled:checked + span:after {
-  background-color: var(--font-color-disabled);
-  border-color: var(--font-color-disabled);
+  background-color: var(--md-sys-color-on-surface);
+  border-color: var(--md-sys-color-on-surface);
 }
 
 /* Checkboxes
@@ -6870,7 +6968,7 @@ textarea.materialize-textarea {
   width: 18px;
   height: 18px;
   z-index: 0;
-  border: 2px solid var(--font-color-medium);
+  border: 2px solid var(--md-sys-color-on-surface-variant);
   border-radius: 1px;
   margin-top: 3px;
   -webkit-transition: 0.2s;
@@ -6883,16 +6981,16 @@ textarea.materialize-textarea {
 }
 [type=checkbox]:not(:checked):disabled + span:not(.lever):before {
   border: none;
-  background-color: var(--font-color-disabled);
+  background-color: var(--md-sys-color-on-surface);
 }
 [type=checkbox].tabbed:focus + span:not(.lever):after {
   -webkit-transform: scale(1);
           transform: scale(1);
   border: 0;
   border-radius: 50%;
-  -webkit-box-shadow: 0 0 0 10px var(--focus-color);
-          box-shadow: 0 0 0 10px var(--focus-color);
-  background-color: var(--focus-color);
+  -webkit-box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.12);
+          box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.12);
+  background-color: rgba(0, 0, 0, 0.12);
 }
 
 [type=checkbox]:checked + span:not(.lever):before {
@@ -6902,8 +7000,8 @@ textarea.materialize-textarea {
   height: 22px;
   border-top: 2px solid transparent;
   border-left: 2px solid transparent;
-  border-right: 2px solid var(--primary-color);
-  border-bottom: 2px solid var(--primary-color);
+  border-right: 2px solid var(--md-sys-color-primary);
+  border-bottom: 2px solid var(--md-sys-color-primary);
   -webkit-transform: rotate(40deg);
           transform: rotate(40deg);
   -webkit-backface-visibility: hidden;
@@ -6912,8 +7010,8 @@ textarea.materialize-textarea {
           transform-origin: 100% 100%;
 }
 [type=checkbox]:checked:disabled + span:before {
-  border-right: 2px solid var(--font-color-disabled);
-  border-bottom: 2px solid var(--font-color-disabled);
+  border-right: 2px solid var(--md-sys-color-on-surface);
+  border-bottom: 2px solid var(--md-sys-color-on-surface);
 }
 
 /* Indeterminate checkbox */
@@ -6924,7 +7022,7 @@ textarea.materialize-textarea {
   height: 22px;
   border-top: none;
   border-left: none;
-  border-right: 2px solid var(--primary-color);
+  border-right: 2px solid var(--md-sys-color-primary);
   border-bottom: none;
   -webkit-transform: rotate(90deg);
           transform: rotate(90deg);
@@ -6934,7 +7032,7 @@ textarea.materialize-textarea {
           transform-origin: 100% 100%;
 }
 [type=checkbox]:indeterminate:disabled + span:not(.lever):before {
-  border-right: 2px solid var(--font-color-disabled);
+  border-right: 2px solid var(--md-sys-color-on-surface);
   background-color: transparent;
 }
 
@@ -6966,7 +7064,7 @@ textarea.materialize-textarea {
   height: 20px;
   width: 20px;
   background-color: transparent;
-  border: 2px solid var(--font-color-medium);
+  border: 2px solid var(--md-sys-color-on-surface-variant);
   top: 0px;
   z-index: 0;
 }
@@ -6977,8 +7075,8 @@ textarea.materialize-textarea {
   height: 13px;
   border-top: 2px solid transparent;
   border-left: 2px solid transparent;
-  border-right: 2px solid var(--font-on-primary-color-main);
-  border-bottom: 2px solid var(--font-on-primary-color-main);
+  border-right: 2px solid var(--md-sys-color-on-primary);
+  border-bottom: 2px solid var(--md-sys-color-on-primary);
   -webkit-transform: rotateZ(37deg);
           transform: rotateZ(37deg);
   -webkit-transform-origin: 100% 100%;
@@ -6988,19 +7086,19 @@ textarea.materialize-textarea {
   top: 0;
   width: 20px;
   height: 20px;
-  border: 2px solid var(--primary-color);
-  background-color: var(--primary-color);
+  border: 2px solid var(--md-sys-color-primary);
+  background-color: var(--md-sys-color-primary);
   z-index: 0;
 }
 [type=checkbox].filled-in.tabbed:focus + span:not(.lever):after {
   border-radius: 2px;
-  border-color: var(--font-color-medium);
-  background-color: var(--focus-color);
+  border-color: var(--md-sys-color-on-surface-variant) r;
+  background-color: rgba(0, 0, 0, 0.12);
 }
 [type=checkbox].filled-in.tabbed:checked:focus + span:not(.lever):after {
   border-radius: 2px;
-  background-color: var(--primary-color);
-  border-color: var(--primary-color);
+  background-color: var(--md-sys-color-primary);
+  border-color: var(--md-sys-color-primary);
 }
 [type=checkbox].filled-in:disabled:not(:checked) + span:not(.lever):before {
   background-color: transparent;
@@ -7008,18 +7106,16 @@ textarea.materialize-textarea {
 }
 [type=checkbox].filled-in:disabled:not(:checked) + span:not(.lever):after {
   border-color: transparent;
-  background-color: var(--font-color-disabled);
+  background-color: var(--md-sys-color-on-surface);
 }
 [type=checkbox].filled-in:disabled:checked + span:not(.lever):before {
   background-color: transparent;
 }
 [type=checkbox].filled-in:disabled:checked + span:not(.lever):after {
-  background-color: var(--font-color-disabled);
-  border-color: var(--font-color-disabled);
+  background-color: var(--md-sys-color-on-surface);
+  border-color: var(--md-sys-color-on-surface);
 }
 
-/* Switch
-   ========================================================================== */
 .switch {
   --track-height: 32px;
   --track-width: 52px;
@@ -7050,8 +7146,8 @@ textarea.materialize-textarea {
   height: 0;
 }
 .switch label input[type=checkbox]:checked + .lever {
-  background-color: var(--primary-color);
-  border-color: var(--primary-color);
+  background-color: var(--md-sys-color-primary);
+  border-color: var(--md-sys-color-primary);
 }
 .switch label input[type=checkbox]:checked + .lever:before, .switch label input[type=checkbox]:checked + .lever:after {
   top: var(--gap-on);
@@ -7068,6 +7164,7 @@ textarea.materialize-textarea {
   border-style: solid;
   border-width: 2px;
   border-color: var(--md-sys-color-outline);
+  background-color: var(--md-sys-color-surface-variant);
   border-radius: 15px;
   margin-right: 10px;
   -webkit-transition: background 0.3s ease;
@@ -7102,21 +7199,21 @@ input[type=checkbox]:not(:disabled) ~ .lever:hover::before {
 }
 
 input[type=checkbox]:checked:not(:disabled) ~ .lever:hover::before {
-  background-color: var(--primary-color-hover-opaque);
+  background-color: rgba(var(--md-sys-color-primary-numeric), 0.06);
 }
 
 input[type=checkbox]:checked:not(:disabled) ~ .lever:active::before,
 input[type=checkbox]:checked:not(:disabled).tabbed:focus ~ .lever::before {
-  background-color: var(--primary-color-focus-opaque);
+  background-color: rgba(var(--md-sys-color-primary-numeric), 0.18);
 }
 
 input[type=checkbox]:not(:disabled) ~ .lever:hover::before {
-  background-color: var(--hover-color);
+  background-color: rgba(0, 0, 0, 0.04);
 }
 
 input[type=checkbox]:not(:disabled) ~ .lever:active:before,
 input[type=checkbox]:not(:disabled).tabbed:focus ~ .lever::before {
-  background-color: var(--focus-color);
+  background-color: rgba(0, 0, 0, 0.12);
 }
 
 .switch input[type=checkbox][disabled] + .lever {
@@ -7128,15 +7225,15 @@ input[type=checkbox]:not(:disabled).tabbed:focus ~ .lever::before {
    ========================================================================== */
 select.browser-default {
   opacity: 1;
-  color: var(--font-color-main);
+  color: var(--md-sys-color-on-background);
 }
 
 select {
   opacity: 0;
-  background-color: var(--surface-color);
+  background-color: var(--md-sys-color-surface);
   width: 100%;
   padding: 5px;
-  border: 1px solid var(--separator-color);
+  border: 1px solid var(--md-sys-color-outline-variant);
   border-radius: 2px;
   height: 3rem;
 }
@@ -7180,31 +7277,31 @@ select {
   /*
   input.select-dropdown {    
     &:focus {
-      border-bottom: 1px solid $input-focus-color;
+      border-bottom: 1px solid var(--md-sys-color-primary);
     }
     position: relative;
     cursor: pointer;
     background-color: transparent;
     border: none;
-    border-bottom: $input-border;
+    border-bottom: 2px solid var(--md-sys-color-on-surface-variant);
     outline: none;
-    height: $input-height;
-    line-height: $input-height;
+    height: 3rem;
+    line-height: 3rem;
     width: 100%;
-    font-size: $input-font-size;
-    margin: $input-margin;
+    font-size: 16px;
+    margin: 0 0 8px 0;
     padding: 0;
     display: block;
     user-select:none;
     z-index: 1;
-    color: $select-input-color;
+    color: var(--md-sys-color-on-background);
   }
   */
   /*
   & + label {
     position: absolute;
     top: -26px;
-    font-size: $label-font-size;
+    font-size: .8rem;
   }
   */
 }
@@ -7215,7 +7312,7 @@ select {
   bottom: 0;
   margin: auto 0;
   z-index: 0;
-  fill: var(--font-color-main);
+  fill: var(--md-sys-color-on-background);
 }
 .select-wrapper .hide-select {
   width: 0;
@@ -7227,18 +7324,18 @@ select {
 }
 
 select:disabled {
-  color: var(--font-color-disabled);
+  color: var(--md-sys-color-on-surface);
 }
 
 .select-wrapper.disabled + label {
-  color: var(--font-color-disabled);
+  color: var(--md-sys-color-on-surface);
 }
 .select-wrapper.disabled .caret {
-  fill: var(--font-color-disabled);
+  fill: var(--md-sys-color-on-surface);
 }
 
 .select-wrapper input.select-dropdown:disabled {
-  color: var(--font-color-disabled);
+  color: var(--md-sys-color-on-surface);
   cursor: default;
   -webkit-user-select: none;
      -moz-user-select: none;
@@ -7247,27 +7344,34 @@ select:disabled {
 }
 
 .select-wrapper i {
-  color: var(--font-color-disabled);
+  color: var(--md-sys-color-on-surface);
 }
 
 .select-dropdown li.disabled,
 .select-dropdown li.disabled > span,
 .select-dropdown li.optgroup {
-  color: var(--font-color-disabled);
-  background-color: transparent;
+  color: var(--md-sys-color-on-surface);
 }
 
-body.keyboard-focused .select-dropdown.dropdown-content li:focus {
-  background-color: var(--focus-color);
+/*
+body.keyboard-focused {
+  .select-dropdown.dropdown-content li:focus {
+    //background-color: $select-option-focus;
+  }
 }
 
-.select-dropdown.dropdown-content li:hover:not(.disabled) {
-  background-color: var(--hover-color);
-}
-.select-dropdown.dropdown-content li.selected:not(.disabled) {
-  background-color: var(--focus-color);
-}
+.select-dropdown.dropdown-content {
+  li {
+    &:hover:not(.disabled) {
+      //background-color: $select-option-hover;
+    }
 
+    &.selected:not(.disabled) {
+      //background-color: $select-option-selected;
+    }
+  }
+}
+*/
 /*
 // Prefix Icons
 .prefix ~ .select-wrapper {
@@ -7292,20 +7396,22 @@ body.keyboard-focused .select-dropdown.dropdown-content li:focus {
 }
 
 .select-dropdown li.optgroup {
-  border-top: 1px solid var(--hover-color);
+  border-top: 1px solid rgba(0, 0, 0, 0.04);
 }
 .select-dropdown li.optgroup.selected > span {
-  color: var(--font-color-main);
+  color: var(--md-sys-color-on-background);
 }
 .select-dropdown li.optgroup > span {
-  color: var(--font-color-medium);
+  color: var(--md-sys-color-on-surface-variant);
 }
 .select-dropdown li.optgroup ~ li.optgroup-option {
   padding-left: 1rem;
 }
 
-/* File Input
-   ========================================================================== */
+.select-dropdown .selected {
+  color: red;
+}
+
 .file-field {
   display: grid;
   grid-template-columns: -webkit-min-content auto;
@@ -7343,8 +7449,6 @@ body.keyboard-focused .select-dropdown.dropdown-content li:focus {
   display: none;
 }
 
-/* Range
-   ========================================================================== */
 .range-field {
   position: relative;
 }
@@ -7375,7 +7479,7 @@ input[type=range] + .thumb {
   height: 0;
   width: 0;
   border-radius: 50%;
-  background-color: var(--primary-color);
+  background-color: var(--md-sys-color-primary);
   margin-left: 7px;
   -webkit-transform-origin: 50% 50%;
           transform-origin: 50% 50%;
@@ -7386,7 +7490,7 @@ input[type=range] + .thumb .value {
   display: block;
   width: 30px;
   text-align: center;
-  color: var(--primary-color);
+  color: var(--md-sys-color-primary);
   font-size: 0;
   -webkit-transform: rotate(45deg);
           transform: rotate(45deg);
@@ -7395,7 +7499,7 @@ input[type=range] + .thumb.active {
   border-radius: 50% 50% 50% 0;
 }
 input[type=range] + .thumb.active .value {
-  color: var(--font-on-primary-color-main);
+  color: var(--md-sys-color-on-primary);
   margin-left: -1px;
   margin-top: 8px;
   font-size: 10px;
@@ -7415,21 +7519,21 @@ input[type=range]::-webkit-slider-thumb {
   height: 14px;
   width: 14px;
   border-radius: 50%;
-  background: var(--primary-color);
+  background: var(--md-sys-color-primary);
   -webkit-transition: -webkit-box-shadow 0.3s;
   transition: -webkit-box-shadow 0.3s;
   transition: box-shadow 0.3s;
   transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
   -webkit-appearance: none;
-  background-color: var(--primary-color);
+  background-color: var(--md-sys-color-primary);
   -webkit-transform-origin: 50% 50%;
           transform-origin: 50% 50%;
   margin: -5px 0 0 0;
 }
 
 .keyboard-focused input[type=range]:focus:not(.active)::-webkit-slider-thumb {
-  -webkit-box-shadow: 0 0 0 10px var(--primary-color-focus-opaque);
-          box-shadow: 0 0 0 10px var(--primary-color-focus-opaque);
+  -webkit-box-shadow: 0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18);
+          box-shadow: 0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18);
 }
 
 input[type=range] {
@@ -7450,11 +7554,9 @@ input[type=range]::-moz-range-thumb {
   height: 14px;
   width: 14px;
   border-radius: 50%;
-  background: var(--primary-color);
-  -webkit-transition: -webkit-box-shadow 0.3s;
-  transition: -webkit-box-shadow 0.3s;
+  background: var(--md-sys-color-primary);
+  -moz-transition: box-shadow 0.3s;
   transition: box-shadow 0.3s;
-  transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
   margin-top: -5px;
 }
 
@@ -7464,7 +7566,7 @@ input[type=range]:-moz-focusring {
 }
 
 .keyboard-focused input[type=range]:focus:not(.active)::-moz-range-thumb {
-  box-shadow: 0 0 0 10px var(--primary-color-focus-opaque);
+  box-shadow: 0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18);
 }
 
 input[type=range]::-ms-track {
@@ -7478,12 +7580,12 @@ input[type=range]::-ms-track {
 
 input[type=range]::-ms-fill-lower,
 input[type=range]::-moz-range-progress {
-  background: var(--primary-color);
+  background: var(--md-sys-color-primary);
 }
 
 input[type=range]::-ms-fill-upper,
 input[type=range]::-moz-range-track {
-  background: var(--slider-track-color);
+  background: var(--md-sys-color-shadow-light);
 }
 
 input[type=range]::-ms-thumb {
@@ -7491,20 +7593,18 @@ input[type=range]::-ms-thumb {
   height: 14px;
   width: 14px;
   border-radius: 50%;
-  background: var(--primary-color);
-  -webkit-transition: -webkit-box-shadow 0.3s;
-  transition: -webkit-box-shadow 0.3s;
+  background: var(--md-sys-color-primary);
+  -ms-transition: box-shadow 0.3s;
   transition: box-shadow 0.3s;
-  transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
 }
 
 .keyboard-focused input[type=range]:focus:not(.active)::-ms-thumb {
-  box-shadow: 0 0 0 10px var(--primary-color-focus-opaque);
+  box-shadow: 0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18);
 }
 
-/***************
-    Nav List
-***************/
+.table-of-contents {
+  list-style: none;
+}
 .table-of-contents.fixed {
   position: fixed;
 }
@@ -7514,27 +7614,32 @@ input[type=range]::-ms-thumb {
 .table-of-contents a {
   display: inline-block;
   font-weight: 400;
-  color: var(--font-color-medium);
+  color: var(--md-sys-color-secondary);
   padding-left: 16px;
   height: 2rem;
   line-height: 2rem;
-  border-left: 1px solid var(--separator-color);
+  border-left: 1px solid var(--md-sys-color-outline-variant);
 }
 .table-of-contents a:hover {
-  color: var(--font-color-main);
+  color: var(--md-sys-color-on-background);
   padding-left: 15px;
 }
 .table-of-contents a.active {
-  color: var(--primary-color);
+  color: var(--md-sys-color-primary);
   font-weight: 500;
   padding-left: 14px;
-  border-left: 2px solid var(--primary-color);
+  border-left: 2px solid var(--md-sys-color-primary);
 }
 
 /* This should be an UL-Element*/
 .sidenav {
+  --sidenav-width: 300px;
+  --sidenav-font-size: 14px;
+  --sidenav-padding: 16px;
+  --sidenav-item-height: 48px;
+  --sidenav-line-height: var(--sidenav-item-height);
   position: fixed;
-  width: 300px;
+  width: var(--sidenav-width);
   left: 0;
   top: 0;
   margin: 0;
@@ -7542,7 +7647,6 @@ input[type=range]::-ms-thumb {
           transform: translateX(-100%);
   height: 100vh;
   padding: 0;
-  background-color: var(--background-color-level-16dp-solid);
   z-index: 999;
   overflow-y: auto;
   will-change: transform;
@@ -7554,7 +7658,14 @@ input[type=range]::-ms-thumb {
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
+  color: var(--md-sys-color-on-secondary-container);
+  background-color: var(--md-sys-color-surface);
   /* Hover only on top row */
+  /*a:hover {
+    //color: red;
+    //background-color: var(--md-sys-color-on-secondary-container);
+    //md.sys.color.on-secondary-container
+  }*/
 }
 .sidenav.right-aligned {
   right: 0;
@@ -7567,15 +7678,11 @@ input[type=range]::-ms-thumb {
 .sidenav .collapsible {
   margin: 0;
 }
-.sidenav a:hover {
-  background-color: var(--hover-color);
-}
 .sidenav a:focus {
-  background-color: var(--focus-color);
+  background-color: rgba(0, 0, 0, 0.12);
 }
 .sidenav li.active > a:not(.collapsible-header):not(.btn):not(.btn-large):not(.btn-small):not(.btn-large):not(.btn-small):not(.btn-flat):not(.btn-large):not(.btn-floating) {
-  color: var(--font-on-secondary-container-color);
-  background-color: var(--secondary-container-color);
+  background-color: color-mix(in srgb, var(--md-sys-color-secondary) 10%, transparent);
 }
 .sidenav .collapsible-body > ul {
   padding-left: 10px;
@@ -7590,7 +7697,7 @@ input[type=range]::-ms-thumb {
 .sidenav li > a {
   /* https://stackoverflow.com/questions/5848090/full-width-hover-background-for-nested-lists */
   margin: 0 12px;
-  padding: 0 16px;
+  padding: 0 var(--sidenav-padding);
   /*
   min-width: 0;
   white-space: nowrap;
@@ -7601,8 +7708,8 @@ input[type=range]::-ms-thumb {
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  height: 48px;
-  font-size: 14px;
+  height: var(--sidenav-item-height);
+  font-size: var(--sidenav-font-size);
   font-weight: 500;
   -webkit-box-align: center;
   -webkit-align-items: center;
@@ -7613,7 +7720,10 @@ input[type=range]::-ms-thumb {
   /* TODO: Use special class in future like "mw-icon" */
 }
 .sidenav li > a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-flat):not(.btn-large):not(.btn-floating) {
-  color: var(--font-color-main);
+  color: var(--md-sys-color-on-secondary-container);
+}
+.sidenav li > a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-flat):not(.btn-large):not(.btn-floating):hover {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
 }
 .sidenav li > a.btn, .sidenav li > a.btn-small, .sidenav li > a.btn-large, .sidenav li > a.btn-flat, .sidenav li > a.btn-floating {
   margin: 10px 15px;
@@ -7624,24 +7734,23 @@ input[type=range]::-ms-thumb {
   display: -ms-inline-flexbox;
   display: inline-flex;
   vertical-align: middle;
-  color: var(--font-color-medium);
   margin-right: 12px;
 }
 .sidenav .divider {
-  margin: 8px 0 0 0;
+  margin: calc(var(--sidenav-padding) * 0.5) 0 0 0;
 }
 .sidenav .subheader {
   cursor: initial;
   pointer-events: none;
-  color: var(--font-color-medium);
-  font-size: 14px;
+  color: red;
+  font-size: var(--sidenav-font-size);
   font-weight: 500;
-  line-height: 48px;
+  line-height: var(--sidenav-line-height);
 }
 .sidenav .user-view {
   position: relative;
-  padding: 32px 32px 0;
-  margin-bottom: 8px;
+  padding: calc(var(--sidenav-padding) * 2) calc(var(--sidenav-padding) * 2) 0;
+  margin-bottom: calc(var(--sidenav-padding) * 0.5);
 }
 .sidenav .user-view > a {
   height: auto;
@@ -7668,8 +7777,8 @@ input[type=range]::-ms-thumb {
 }
 .sidenav .user-view .name,
 .sidenav .user-view .email {
-  font-size: 14px;
-  line-height: 24px;
+  font-size: var(--sidenav-font-size);
+  line-height: calc(var(--sidenav-line-height) * 0.5);
 }
 .sidenav .user-view .name {
   margin-top: 16px;
@@ -7712,10 +7821,10 @@ input[type=range]::-ms-thumb {
             transform: translateX(105%);
   }
   .sidenav > a {
-    padding: 0 16px;
+    padding: 0 var(--sidenav-padding);
   }
   .sidenav .user-view {
-    padding: 16px 16px 0;
+    padding: var(--sidenav-padding) var(--sidenav-padding) 0;
   }
 }
 .sidenav .collapsible-body {
@@ -7754,21 +7863,22 @@ input[type=range]::-ms-thumb {
   height: 4px;
   display: block;
   width: 100%;
-  border-radius: 2px;
+  border-radius: 4px;
   margin: 0.5rem 0 1rem 0;
   overflow: hidden;
+  background-color: var(--md-sys-color-secondary-container);
 }
 .progress .determinate {
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
-  background-color: var(--primary-color);
+  background-color: var(--md-sys-color-primary);
   -webkit-transition: width 0.3s linear;
   transition: width 0.3s linear;
 }
 .progress .indeterminate {
-  background-color: var(--primary-color);
+  background-color: var(--md-sys-color-primary);
 }
 .progress .indeterminate:before {
   content: "";
@@ -7913,7 +8023,7 @@ input[type=range]::-ms-thumb {
   width: 100%;
   height: 100%;
   opacity: 0;
-  border-color: var(--primary-color);
+  border-color: var(--md-sys-color-primary);
 }
 
 .spinner-blue,
@@ -8351,13 +8461,13 @@ input[type=range]::-ms-thumb {
   bottom: 30px;
 }
 .slider.fullscreen ul.indicators .indicator-item {
-  background-color: var(--carousel-indicator-color);
+  background-color: rgba(255, 255, 255, 0.45);
 }
 .slider.fullscreen ul.indicators .indicator-item.active {
-  background-color: var(--carousel-indicator-active-color);
+  background-color: var(--md-ref-palette-primary100);
 }
 .slider .slides {
-  background-color: var(--surface-color);
+  background-color: var(--md-sys-color-surface);
   margin: 0;
   height: 400px;
   padding-left: 0;
@@ -8417,7 +8527,7 @@ input[type=range]::-ms-thumb {
   top: 0;
   left: 0;
   cursor: pointer;
-  background-color: var(--slider-track-color);
+  background-color: var(--md-sys-color-shadow-light);
   -webkit-transition: background-color 0.3s;
   transition: background-color 0.3s;
   border-radius: 50%;
@@ -8426,14 +8536,15 @@ input[type=range]::-ms-thumb {
   height: 100%;
 }
 .slider .indicators .indicator-item-btn.active {
-  background-color: var(--primary-color);
+  background-color: var(--md-sys-color-primary);
 }
 
 .carousel {
+  --carousel-height: 400px;
   overflow: hidden;
   position: relative;
   width: 100%;
-  height: 400px;
+  height: var(--carousel-height);
   -webkit-perspective: 500px;
           perspective: 500px;
   -webkit-transform-style: preserve-3d;
@@ -8458,7 +8569,7 @@ input[type=range]::-ms-thumb {
 .carousel.carousel-slider .carousel-item {
   width: 100%;
   height: 100%;
-  min-height: 400px;
+  min-height: var(--carousel-height);
   position: absolute;
   top: 0;
   left: 0;
@@ -8473,8 +8584,8 @@ input[type=range]::-ms-thumb {
 }
 .carousel .carousel-item {
   visibility: hidden;
-  width: 200px;
-  height: 200px;
+  width: calc(var(--carousel-height) * 0.5);
+  height: calc(var(--carousel-height) * 0.5);
   position: absolute;
   top: 0;
   left: 0;
@@ -8499,13 +8610,13 @@ input[type=range]::-ms-thumb {
   height: 8px;
   width: 8px;
   margin: 24px 4px;
-  background-color: var(--carousel-indicator-color);
+  background-color: rgba(255, 255, 255, 0.45);
   -webkit-transition: background-color 0.3s;
   transition: background-color 0.3s;
   border-radius: 50%;
 }
 .carousel .indicators .indicator-item.active {
-  background-color: var(--carousel-indicator-active-color);
+  background-color: var(--md-ref-palette-primary100);
 }
 .carousel.scrolling .carousel-item .materialboxed,
 .carousel .carousel-item:not(.active) .materialboxed {
@@ -8554,8 +8665,8 @@ input[type=range]::-ms-thumb {
   position: absolute;
   font-size: 1rem;
   border-radius: 50%;
-  background-color: var(--secondary-color);
-  color: var(--font-on-secondary-color-main);
+  background-color: var(--md-sys-color-surface);
+  color: var(--md-sys-color-on-secondary);
   -webkit-box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.14), 0 10px 50px 0 rgba(0, 0, 0, 0.12), 0 30px 10px -20px rgba(0, 0, 0, 0.2);
           box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.14), 0 10px 50px 0 rgba(0, 0, 0, 0.12), 0 30px 10px -20px rgba(0, 0, 0, 0.2);
   width: 100%;
@@ -8586,7 +8697,7 @@ input[type=range]::-ms-thumb {
   width: 100%;
   height: 100%;
   border-radius: 50%;
-  background-color: var(--surface-color);
+  background-color: var(--md-sys-color-surface);
 }
 .tap-target-wave::before {
   -webkit-transform: scale(0);
@@ -8700,7 +8811,7 @@ input[type=range]::-ms-thumb {
       -ms-flex-direction: column;
           flex-direction: column;
   padding: 0;
-  background-color: var(--surface-color);
+  background-color: var(--md-sys-color-surface);
 }
 
 .datepicker-controls {
@@ -8751,7 +8862,7 @@ input[type=range]::-ms-thumb {
 }
 .datepicker-controls .month-prev > svg,
 .datepicker-controls .month-next > svg {
-  fill: var(--font-color-medium);
+  fill: var(--md-sys-color-on-surface-variant);
 }
 
 .month-prev, .month-next {
@@ -8767,8 +8878,8 @@ input[type=range]::-ms-thumb {
   -webkit-flex: 1 auto;
       -ms-flex: 1 auto;
           flex: 1 auto;
-  background-color: var(--primary-color);
-  color: var(--font-on-primary-color-main);
+  background-color: var(--md-sys-color-primary);
+  color: var(--md-sys-color-on-primary);
   padding: 20px 22px;
   font-weight: 500;
 }
@@ -8776,7 +8887,7 @@ input[type=range]::-ms-thumb {
   display: block;
   font-size: 1.5rem;
   line-height: 25px;
-  color: var(--font-on-primary-color-main);
+  color: var(--md-sys-color-on-primary);
 }
 .datepicker-date-display .date-text {
   display: block;
@@ -8810,22 +8921,22 @@ input[type=range]::-ms-thumb {
 }
 .datepicker-table abbr {
   text-decoration: none;
-  color: var(--font-color-medium);
+  color: var(--md-sys-color-on-surface-variant);
 }
 .datepicker-table td {
-  color: var(--font-color-main);
+  color: var(--md-sys-color-on-background);
   border-radius: 50%;
   padding: 0;
 }
 .datepicker-table td.is-today {
-  color: var(--primary-color);
+  color: var(--md-sys-color-primary);
 }
 .datepicker-table td.is-selected {
-  background-color: var(--primary-color);
-  color: var(--font-on-primary-color-main);
+  background-color: var(--md-sys-color-primary);
+  color: var(--md-sys-color-on-primary);
 }
 .datepicker-table td.is-outside-current-month, .datepicker-table td.is-disabled {
-  color: var(--font-color-disabled);
+  color: var(--md-sys-color-on-surface);
   pointer-events: none;
 }
 
@@ -8841,10 +8952,10 @@ input[type=range]::-ms-thumb {
   color: inherit;
 }
 .datepicker-day-button:hover {
-  background-color: var(--primary-color-hover-opaque);
+  background-color: rgba(var(--md-sys-color-primary-numeric), 0.06);
 }
 .datepicker-day-button:focus {
-  background-color: var(--primary-color-focus-opaque);
+  background-color: rgba(var(--md-sys-color-primary-numeric), 0.18);
 }
 
 /* Footer */
@@ -8866,12 +8977,12 @@ input[type=range]::-ms-thumb {
 .datepicker-clear,
 .datepicker-today,
 .datepicker-done {
-  color: var(--primary-color);
+  color: var(--md-sys-color-primary);
   padding: 0 1rem;
 }
 
 .datepicker-clear {
-  color: var(--error-color);
+  color: var(--md-sys-color-error);
 }
 
 /* Media Queries */
@@ -8893,8 +9004,8 @@ input[type=range]::-ms-thumb {
             flex: 0 1 270px;
   }
   .datepicker-controls,
-.datepicker-table,
-.datepicker-footer {
+  .datepicker-table,
+  .datepicker-footer {
     width: 320px;
   }
   .datepicker-day-button {
@@ -8921,7 +9032,7 @@ input[type=range]::-ms-thumb {
 }
 
 .text-primary {
-  color: var(--font-on-primary-color-main);
+  color: var(--md-sys-color-on-primary);
 }
 
 /* Clock Digital Display */
@@ -8931,7 +9042,7 @@ input[type=range]::-ms-thumb {
   -webkit-flex: 1 auto;
       -ms-flex: 1 auto;
           flex: 1 auto;
-  background-color: var(--primary-color);
+  background-color: var(--md-sys-color-primary);
   padding: 10px;
   font-weight: 300;
 }
@@ -8991,11 +9102,11 @@ input[type=text].text-primary {
   -webkit-flex: 2.5 auto;
       -ms-flex: 2.5 auto;
           flex: 2.5 auto;
-  background-color: var(--surface-color);
+  background-color: var(--md-sys-color-surface);
 }
 
 .timepicker-plate {
-  background-color: var(--background-color-level-4dp);
+  background-color: rgba(0, 0, 0, 0.09);
   border-radius: 50%;
   width: 270px;
   height: 270px;
@@ -9025,7 +9136,7 @@ input[type=text].text-primary {
 
 .timepicker-tick {
   border-radius: 50%;
-  color: var(--font-color-main);
+  color: var(--md-sys-color-on-background);
   line-height: 40px;
   text-align: center;
   width: 40px;
@@ -9037,7 +9148,7 @@ input[type=text].text-primary {
 
 .timepicker-tick.active,
 .timepicker-tick:hover {
-  background-color: var(--primary-color-hover-opaque);
+  background-color: rgba(var(--md-sys-color-primary-numeric), 0.06);
 }
 
 .timepicker-dial {
@@ -9064,7 +9175,7 @@ input[type=text].text-primary {
   transition: opacity 175ms;
 }
 .timepicker-canvas line {
-  stroke: var(--primary-color);
+  stroke: var(--md-sys-color-primary);
   stroke-width: 4;
   stroke-linecap: round;
 }
@@ -9075,12 +9186,12 @@ input[type=text].text-primary {
 
 .timepicker-canvas-bearing {
   stroke: none;
-  fill: var(--primary-color);
+  fill: var(--md-sys-color-primary);
 }
 
 .timepicker-canvas-bg {
   stroke: none;
-  fill: var(--primary-color);
+  fill: var(--md-sys-color-primary);
 }
 
 /* Footer */
@@ -9098,11 +9209,11 @@ input[type=text].text-primary {
 }
 
 .timepicker-clear {
-  color: var(--error-color);
+  color: var(--md-sys-color-error);
 }
 
 .timepicker-close {
-  color: var(--primary-color);
+  color: var(--md-sys-color-primary);
 }
 
 .timepicker-clear,