diff --git a/node_modules/mdl-ext/src/_variables.scss b/node_modules/mdl-ext/src/_variables.scss
new file mode 100644
index 0000000..908b337
--- /dev/null
+++ b/node_modules/mdl-ext/src/_variables.scss
@@ -0,0 +1,581 @@
+/**
+ * Copyright 2016 Leif Olsen. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import "functions";
+
+// ----------------------------------------------------------------
+// Sample colors
+// ----------------------------------------------------------------
+$mdlext-palette-amber-50:                         #FFF8E1;
+$mdlext-palette-amber-100:                        #FFECB3;
+$mdlext-palette-amber-500:                        #FFC107;
+$mdlext-palette-amber-700:                        #FFA000;
+$mdlext-palette-blue-grey-500:                    #607D8B;
+$mdlext-palette-deep-orange-500:                  #FF5722;
+$mdlext-palette-deep-purple-100:                  #D1C4E9;
+$mdlext-palette-deep-purple-500:                  #512DA8;
+$mdlext-palette-deep-purple-700:                  #673AB7;
+$mdlext-palette-green-50:                         #E8F5E9;
+$mdlext-palette-green-100:                        #C8E6C9;
+$mdlext-palette-green-500:                        #4CAF50;
+$mdlext-palette-green-700:                        #388E3C;
+$mdlext-palette-grey-50:                          #FAFAFA;
+$mdlext-palette-grey-100:                         #F5F5F5;
+$mdlext-palette-grey-200:                         #EEEEEE;
+$mdlext-palette-grey-300:                         #E0E0E0;
+$mdlext-palette-grey-400:                         #BDBDBD;
+$mdlext-palette-grey-500:                         #9E9E9E;
+$mdlext-palette-grey-600:                         #757575;
+$mdlext-palette-grey-700:                         #616161;
+$mdlext-palette-grey-800:                         #424242;
+$mdlext-palette-grey-900:                         #212121;
+$mdlext-palette-indigo-A200:                      #536DFE;
+$mdlext-palette-light-blue-500:                   #03A9F4;
+$mdlext-palette-light-green-500:                  #8BC34A;
+$mdlext-palette-pink-500:                         #E91E63;
+$mdlext-palette-pink-700:                         #C2185B;
+$mdlext-palette-pink-A400:                        #F50057;
+$mdlext-palette-purple-A200:                      #E040FB;
+$mdlext-palette-red-700:                          #D32F2F;
+$mdlext-palette-red-A200:                         #FF5252;
+$mdlext-palette-red-A400:                         #FF1744;
+$mdlext-palette-yellow-500:                       #FFEB3B;
+$mdlext-color-black:                              #000000;
+$mdlext-color-white:                              #FFFFFF;
+
+
+/* ==========   Sticky Header   ========== */
+$mdlext-sticky-header-background-color           : transparent !default;
+$mdlext-sticky-header-background-color-scroll    : transparent !default;
+$mdlext-sticky-header-gradient-color             : rgb-string-to-hex($color-primary) !default;
+$mdlext-sticky-header-gradient-color-start       : $mdlext-sticky-header-gradient-color !default;
+$mdlext-sticky-header-gradient-color-end         : $mdlext-sticky-header-gradient-color-start !default;
+$mdlext-sticky-header-gradient-color-scroll-start: rgba($mdlext-sticky-header-gradient-color, 0.98) !default;
+$mdlext-sticky-header-gradient-color-scroll-end  : rgba($mdlext-sticky-header-gradient-color, 0.95) !default;
+
+// Background shorthand
+/* stylelint-disable */
+$mdlext-sticky-header-background                 : $mdlext-sticky-header-background-color
+                                                   linear-gradient(to bottom,
+                                                      $mdlext-sticky-header-gradient-color-start 0,
+                                                      $mdlext-sticky-header-gradient-color-end 100%) !default;
+
+// Background shorthand when content is scrolling
+$mdlext-sticky-header-background-scroll          : $mdlext-sticky-header-background-color-scroll
+                                                   linear-gradient(to bottom,
+                                                      $mdlext-sticky-header-gradient-color-scroll-start 100%,
+                                                      $mdlext-sticky-header-gradient-color-scroll-end 100%) !default;
+/* stylelint-enable */
+
+/* ==========     Accordion     ========== */
+$mdlext-accordion-header-background-color-base   : $mdlext-palette-grey-500 !default;
+$mdlext-accordion-header-background-color        : rgba($mdlext-accordion-header-background-color-base, 0.20) !default;
+$mdlext-accordion-header-background-open-color   : rgba($mdlext-accordion-header-background-color-base, 0.30) !default;
+$mdlext-accordion-header-background-active-color : rgba($mdlext-accordion-header-background-color-base, 0.40) !default;
+$mdlext-accordion-header-border-color            : rgba($mdlext-accordion-header-background-color-base, 0.50) !default;
+$mdlext-accordion-header-background-hover-color  : rgba($mdlext-accordion-header-background-color-base, 0.40) !default;
+$mdlext-accordion-header-focus-outline-color     : invert !default;
+$mdlext-accordion-header-disabled-color          : rgba($mdlext-accordion-header-background-color-base, 0.12) !default;
+$mdlext-accordion-header-secondary-color         : $mdlext-color-black !default;
+$mdlext-accordion-header-secondary-color-disabled: rgba($mdlext-color-black, 0.26) !default;
+$mdlext-accordion-header-highlight-color         : darken($mdlext-accordion-header-border-color, 3%) !default;
+$mdlext-accordion-ripple-color                   : rgba(rgb-string-to-hex($color-accent-contrast), 0.5) !default;
+$mdlext-accordion-header-padding                 : 8px !default;
+$mdlext-accordion-header-height                  : 56px !default;
+$mdlext-accordion-content-padding                : $mdlext-accordion-header-padding !default;
+$mdlext-accordion-content-color                  : inherit !default;
+$mdlext-accordion-content-background-color       : transparent !default;
+
+
+/* ==========     Dialog     ========== */
+$mdlext-dialog-padding           : 0;
+$mdlext-dialog-background-color  : transparent !default;
+$mdlext-dialog-backdrop-color    : rgba(0, 0, 0, 0.86) !default;
+$mdlext-dialog-open-animation    : 0.5s 0.2s forwards !default;
+$mdlext-dialog-backdrop-animation: 0.2s forwards !default;
+
+
+/* ==========     Lightbox     ========== */
+$mdlext-lightbox-background-color           : $card-background-color !default;
+$mdlext-lightbox-border                     : 0 !default;
+$mdlext-lightbox-border-radius              : 0 !default;
+$mdlext-lightbox-figure-margin              : 0 !default;
+$mdlext-lightbox-figure-padding             : 0 !default;
+$mdlext-lightbox-figcaption-background-color: rgba(255, 255, 255, 0.76) !default;
+$mdlext-lightbox-footer-background-color    : rgba(255, 255, 255, 0.86) !default;
+
+
+/* ==========  Lightboard  ========== */
+$mdlext-lightboard-medium-small-breakpoint     : $grid-tablet-breakpoint !default;          // 480
+$mdlext-lightboard-medium-breakpoint           : $grid-tablet-breakpoint + 180px !default;  // 480 + 180
+$mdlext-lightboard-medium-large-breakpoint     : $grid-desktop-breakpoint !default;         // 840
+$mdlext-lightboard-large-breakpoint            : $grid-desktop-breakpoint + 360px !default; // 840+360
+
+$mdlext-lightboard-small-gutter                : 2px !default;
+$mdlext-lightboard-small-margin                : 0 !default;
+$mdlext-lightboard-small-columns               : 2 !default;
+$mdlext-lightboard-small-frame-width           : 8px !default;
+
+$mdlext-lightboard-medium-small-gutter         : 4px !default;
+$mdlext-lightboard-medium-small-margin         : 0 !default;
+$mdlext-lightboard-medium-small-columns        : 4 !default;
+$mdlext-lightboard-medium-small-frame-width    : 8px !default;
+
+$mdlext-lightboard-medium-gutter               : 4px !default;
+$mdlext-lightboard-medium-margin               : 0 !default;
+$mdlext-lightboard-medium-columns              : 5 !default;
+$mdlext-lightboard-medium-frame-width          : 8px !default;
+
+$mdlext-lightboard-medium-large-gutter         : 8px !default;
+$mdlext-lightboard-medium-large-margin         : 0 !default;
+$mdlext-lightboard-medium-large-columns        : 6 !default;
+$mdlext-lightboard-medium-large-frame-width    : 12px !default;
+
+$mdlext-lightboard-large-gutter                : 8px !default;
+$mdlext-lightboard-large-margin                : 0 !default;
+$mdlext-lightboard-large-columns               : 7 !default;
+$mdlext-lightboard-large-frame-width           : 12px !default;
+
+$mdlext-lightboard-slide-max-size              : 250px !default;
+$mdlext-lightboard-slide-border-color          : #D8D8D8 !default;
+$mdlext-lightboard-slide-background-color      : #F8F8F8 !default;
+$mdlext-lightboard-slide-border-radius         : 5px !default;
+$mdlext-lightboard-slide-inner-border-radius   : 3px !default;
+$mdlext-lightboard-slide-box-shadow            : 2px 2px 6px -1px rgba(219, 215, 219, 0.5) !default;
+$mdlext-lightboard-slide-border-color-hover    : #B8B8B8 !default;
+$mdlext-lightboard-slide-background-color-hover: #E8E8E8 !default;
+$mdlext-lightboard-slide-active-bacground-color: #E8E8E8 !default;
+$mdlext-lightboard-slide-box-shadow-hover      : 2px 2px 12px -1px rgba(219, 215, 219, 1) !default;
+$mdlext-lightboard-ripple-color                : $tab-highlight-color !default;
+$mdlext-lightboard-focus-outline-color         : inherit !default;
+$mdlext-lightboard-figcaption-text-color       : rgb-string-to-hex($palette-grey-400) !default;
+
+
+/* ==========  Carousel  ========== */
+$mdlext-carousel-slide-border-top-width        : 2px !default;
+$mdlext-carousel-slide-border-top-color        : rgb-string-to-hex($color-accent) !default;
+$mdlext-carousel-slide-margin-horizontal       : 0;
+$mdlext-carousel-slide-figcaption-color        : $mdlext-lightboard-figcaption-text-color !default;
+$mdlext-carousel-slide-ripple-color            : $mdlext-lightboard-ripple-color !default;
+
+
+/* ==========  Bordered fields  ========== */
+$mdlext-bordered-field-vertical-spacing-top           : 0 !default;
+$mdlext-bordered-field-vertical-spacing-bottom        : $input-text-vertical-spacing !default;
+
+$mdlext-bordered-field-input-text-font-size           : $input-text-font-size !default;
+$mdlext-bordered-field-font-weight                    : normal !default;
+$mdlext-bordered-field-border-width                   : 1px !default;
+$mdlext-bordered-field-border-radius                  : 3px !default;
+$mdlext-bordered-field-padding                        : $input-text-padding + 4px !default;
+$mdlext-bordered-field-padding-top                    : $input-text-vertical-spacing !default;
+$mdlext-bordered-field-padding-bottom                 : $input-text-padding !default;
+
+$mdlext-bordered-field-input-text-color               : inherit !default;
+$mdlext-bordered-field-border-color                   : rgba($mdlext-color-black, 0.26) !default;
+$mdlext-bordered-field-background-color               : rgba(#FFFFFF, 0.2) !default;
+$mdlext-bordered-field-focus-border-color             : rgb-string-to-hex($color-primary) !default;
+$mdlext-bordered-field-focus-background-color         : rgba(#EEEEEE, 0.2) !default;
+
+$mdlext-bordered-field-input-text-disabled-text-color : rgba($mdlext-color-black, 0.12) !default;
+$mdlext-bordered-field-disabled-border-color          : rgba($mdlext-color-black, 0.12) !default;
+$mdlext-bordered-field-disabled-background-color      : $mdlext-bordered-field-background-color !default;
+
+$mdlext-bordered-field-input-text-error-color         : $mdlext-bordered-field-input-text-color !default;
+$mdlext-bordered-field-error-border-color             : rgb-string-to-hex($input-text-error-color) !default;
+$mdlext-bordered-field-error-background-color         : rgba(lighten($mdlext-bordered-field-error-border-color, 50%), 0.5) !default;
+$mdlext-bordered-field-error-focus-border-color       : darken($mdlext-bordered-field-error-border-color, 10%) !default;
+$mdlext-bordered-field-error-focus-background-color   : $mdlext-bordered-field-error-background-color !default;
+
+$mdlext-bordered-field-input-text-label-color         : rgba($mdlext-color-black, 0.26) !default;
+$mdlext-bordered-field-input-text-label-focus-color   : $mdlext-bordered-field-focus-border-color !default;
+$mdlext-bordered-field-input-text-label-error-color   : $mdlext-bordered-field-error-border-color !default;
+$mdlext-bordered-field-input-text-label-disabled-color: rgba($mdlext-color-black, 0.12) !default;
+
+$mdlext-bordered-field-label-font-size                : $mdlext-bordered-field-input-text-font-size !default;
+$mdlext-bordered-field-floating-label-font-size       : $input-text-floating-label-fontsize !default;
+$mdlext-bordered-field-floating-label-font-weight     : normal !default;
+
+$mdlext-bordered-field-height                         : $mdlext-bordered-field-padding-top + $mdlext-bordered-field-padding-bottom + $mdlext-bordered-field-input-text-font-size + 6px !default;
+$mdlext-bordered-field-floating-label-focus-bottom    : $mdlext-bordered-field-height - $mdlext-bordered-field-floating-label-font-size - $mdlext-bordered-field-padding-top/2 !default;
+
+
+// MDL can not handle required attribute properly. Planned for MDL-v2
+//$mdlext-bordered-field-required-border-color          : rgba(rgb-string-to-hex($color-accent), 0.8) !default;
+//$mdlext-bordered-field-required-background-color      : $mdlext-bordered-field-background-color !default;
+//$mdlext-bordered-field-required-focus-border-color    : rgba(rgb-string-to-hex($color-accent), 0.8) !default;
+//$mdlext-bordered-field-required-focus-background-color: $mdlext-bordered-field-background-color !default;
+//$mdlext-bordered-field-label-required-color           : $mdlext-bordered-field-required-border-color !default;
+
+
+
+/* ==========  Color Themes  ========== */
+
+// ----------------------------------------------------------------
+// Light Color Theme.
+// ----------------------------------------------------------------
+$mdlext-light-color-primary:                      #4CAF50 !default;
+$mdlext-light-color-primary-dark:                 #388E3C !default;
+$mdlext-light-color-primary-light:                #4CAF50 !default;  // Fallback color. Set to color-primary if fallback is not needed
+$mdlext-light-color-primary-contrast:             #C8E6C9 !default;  // text color on primary/primary dark background
+$mdlext-light-color-accent:                       #E040FB !default;
+$mdlext-light-color-accent-light:                 #E040FB !default;  // Fallback color. Set to color-accent if fallback is not needed
+$mdlext-light-color-accent-contrast:              #FAFAFA !default;
+
+$mdlext-light-content-background-color:           #FAFAFA !default;                         // background color on content (paper/card) background
+$mdlext-light-text-color-primary:                 rgba($mdlext-color-black, 0.87) !default; // text color on content (paper/card) background
+$mdlext-light-text-color-secondary:               rgba($mdlext-color-black, 0.54) !default; // text color on content (paper/card) background
+$mdlext-light-text-color-disabled:                rgba($mdlext-color-black, 0.38) !default; // disabled text, hint text, and icons
+$mdlext-light-divider-color:                      rgba($mdlext-color-black, 0.12) !default; // -> $card-border-color
+$mdlext-light-error-color:                        #D32F2F !default;
+
+// Anchor
+$mdlext-light-text-link-color:                    $mdlext-light-color-accent !default;
+
+// Card
+$mdlext-light-card-background-color:              $mdlext-light-content-background-color !default;
+$mdlext-light-card-text-color:                    $mdlext-light-text-color-primary !default;
+$mdlext-light-card-image-placeholder-color:       $mdlext-light-color-accent !default;
+$mdlext-light-card-supporting-text-text-color:    rgba($mdlext-color-black, 0.54) !default;
+$mdlext-light-card-border-color:                  rgba(0, 0, 0, 0.1) !default;
+$mdlext-light-card-subtitle-color:                rgba($mdlext-color-black, 0.54) !default;
+
+//  Item
+
+// Default Item Colors
+$mdlext-light-default-item-text-color:            rgba($mdlext-color-black, 0.87) !default;
+$mdlext-light-default-item-outline-color:         $mdlext-palette-grey-400 !default;
+$mdlext-light-default-item-hover-bg-color:        $mdlext-palette-grey-200 !default;
+$mdlext-light-default-item-focus-bg-color:        $mdlext-palette-grey-200 !default;
+$mdlext-light-default-item-active-bg-color:       $mdlext-palette-grey-300 !default;
+$mdlext-light-default-item-divider-color:         rgba($mdlext-color-black, 0.12) !default;
+
+// Disabled Button Colors
+$mdlext-light-disabled-item-text-color:           $mdlext-palette-grey-400 !default;
+
+// Dropdown menu / menu-button
+$mdlext-light-default-dropdown-bg-color:          $mdlext-color-white !default;
+
+// Badge
+$mdlext-light-badge-color:                        $mdlext-light-color-accent-contrast !default;
+$mdlext-light-badge-color-inverse:                $mdlext-light-color-accent !default;
+$mdlext-light-badge-background:                   $mdlext-light-color-accent !default;
+$mdlext-light-badge-background-inverse:           $mdlext-light-color-accent-contrast !default;
+
+// Default button colors.
+$mdlext-light-button-primary-color:               rgba($mdlext-palette-grey-500, 0.20) !default;
+$mdlext-light-button-secondary-color:             $mdlext-color-black !default;
+$mdlext-light-button-hover-color:                 $mdlext-light-button-primary-color !default;
+$mdlext-light-button-active-color:                rgba($mdlext-palette-grey-500, 0.40) !default;
+$mdlext-light-button-focus-color:                 rgba($mdlext-color-black, 0.12) !default;
+
+// Colored button colors.
+$mdlext-light-button-primary-color-alt:           $mdlext-light-color-primary-light !default;
+$mdlext-light-button-secondary-color-alt:         $mdlext-light-color-primary-contrast !default;
+$mdlext-light-button-hover-color-alt:             darken($mdlext-light-color-primary-light, 10%) !default;
+$mdlext-light-button-active-color-alt:            darken($mdlext-light-color-primary-light, 10%) !default;
+$mdlext-light-button-focus-color-alt:             $mdlext-light-button-focus-color !default;
+
+// Ripple color for colored raised buttons.
+$mdlext-light-button-ripple-color-alt:            $mdlext-light-color-primary-contrast !default;
+
+// Disabled button colors.
+$mdlext-light-button-primary-color-disabled:      rgba($mdlext-color-black, 0.12) !default;
+$mdlext-light-button-secondary-color-disabled:    rgba($mdlext-color-black, 0.26) !default;
+
+// FAB colors and sizes.
+$mdlext-light-button-fab-color-alt:               $mdlext-light-color-accent !default;
+$mdlext-light-button-fab-hover-color-alt:         $mdlext-light-color-accent !default;
+$mdlext-light-button-fab-active-color-alt:        $mdlext-light-color-accent !default;
+$mdlext-light-button-fab-text-color-alt:          $mdlext-light-color-accent-contrast !default;
+$mdlext-light-button-fab-ripple-color-alt:        $mdlext-light-color-accent-contrast !default;
+
+// Slider
+$mdlext-light-range-bg-color:                     rgba($mdlext-color-black, 0.26) !default;
+$mdlext-light-range-color:                        $mdlext-light-color-accent-light !default;
+$mdlext-light-range-faded-color:                  rgba($mdlext-light-color-accent-light, 0.26) !default;
+$mdlext-light-range-bg-focus-color:               rgba($mdlext-color-black, 0.12) !default;
+
+// Textfields
+$mdlext-light-input-text-background-color:        transparent !default;
+$mdlext-light-input-text-label-color:             rgba($mdlext-color-black, 0.54) !default;
+$mdlext-light-input-text-bottom-border-color:     rgba($mdlext-color-black, 0.26) !default;
+$mdlext-light-input-text-highlight-color:         $mdlext-light-color-accent-light !default;
+$mdlext-light-input-text-disabled-color:          rgba($mdlext-color-black, 0.12) !default;
+$mdlext-light-input-text-disabled-text-color:     rgba($mdlext-color-black, 0.26) !default;
+$mdlext-light-input-text-error-color:             $mdlext-light-error-color !default;
+
+// Checkboxes
+$mdlext-light-checkbox-color:                     $mdlext-light-color-accent-light !default;
+$mdlext-light-checkbox-off-color:                 rgba($mdlext-color-black, 0.54) !default;
+$mdlext-light-checkbox-disabled-color:            rgba($mdlext-color-black, 0.26) !default;
+$mdlext-light-checkbox-focus-color:               rgba($mdlext-light-color-accent-light, 0.26) !default;
+
+// Icon Toggles
+$mdlext-light-icon-toggle-color:                  $mdlext-palette-grey-700 !default;
+$mdlext-light-icon-toggle-focus-color:            $mdlext-light-button-focus-color !default;
+$mdlext-light-icon-toggle-checked-color:          $mdlext-light-color-accent-light !default;
+$mdlext-light-icon-toggle-checked-focus-color:    rgba($mdlext-light-color-accent-light, 0.26) !default;
+$mdlext-light-icon-toggle-disabled-color:         rgba($mdlext-color-black, 0.26) !default;
+
+// Radio Buttons
+$mdlext-light-radio-color:                        $mdlext-light-color-accent-light !default;
+$mdlext-light-radio-off-color:                    rgba($mdlext-color-black, 0.54) !default;
+$mdlext-light-radio-disabled-color:               rgba($mdlext-color-black, 0.26) !default;
+
+// Switches
+$mdlext-light-switch-color:                       $mdlext-light-color-accent-light !default;
+$mdlext-light-switch-faded-color:                 rgba($mdlext-light-color-accent-light, 0.26) !default;
+$mdlext-light-switch-thumb-color:                 $mdlext-light-switch-color !default;
+$mdlext-light-switch-track-color:                 rgba($mdlext-light-color-accent-light, 0.54) !default;
+$mdlext-light-switch-off-thumb-color:             $mdlext-palette-grey-50 !default;
+$mdlext-light-switch-off-track-color:             rgba($mdlext-color-black, 0.26) !default;
+$mdlext-light-switch-disabled-thumb-color:        $mdlext-palette-grey-400 !default;
+$mdlext-light-switch-disabled-track-color:        rgba($mdlext-color-black, 0.12) !default;
+
+// Data table
+$mdlext-light-data-table-background-color:               $mdlext-light-content-background-color !default;
+$mdlext-light-data-table-header-color:                   rgba($mdlext-color-black, 0.54) !default;
+$mdlext-light-data-table-header-sorted-color:            rgba($mdlext-color-black, 0.87) !default;
+$mdlext-light-data-table-header-sorted-icon-hover-color: rgba($mdlext-color-black, 0.26) !default;
+$mdlext-light-data-table-hover-color:                    $mdlext-palette-grey-200 !default;
+$mdlext-light-data-table-selection-color:                $mdlext-palette-grey-200 !default;
+$mdlext-light-data-table-divider-color:                  rgba($mdlext-color-black, 0.12) !default;
+$mdlext-light-data-table-dividers:                       1px solid $mdlext-light-data-table-divider-color !default;
+
+
+// Selectfield
+// Uses variables from textfield
+$mdlext-selectfield-arrow-width: 0.7em;
+$mdlext-selectfield-arrow-length: 0.5em;
+
+
+// Accordion
+$mdlext-light-accordion-header-background-color-base   : $mdlext-palette-grey-600 !default;
+$mdlext-light-accordion-header-background-color        : rgba($mdlext-light-accordion-header-background-color-base, 0.20) !default;
+$mdlext-light-accordion-header-background-open-color   : rgba($mdlext-light-accordion-header-background-color-base, 0.30) !default;
+$mdlext-light-accordion-header-background-active-color : rgba($mdlext-light-accordion-header-background-color-base, 0.40) !default;
+$mdlext-light-accordion-header-border-color            : rgba($mdlext-light-accordion-header-background-color-base, 0.50) !default;
+$mdlext-light-accordion-header-background-hover-color  : rgba($mdlext-light-accordion-header-background-color-base, 0.40) !default;
+$mdlext-light-accordion-header-focus-outline-color     : darken($mdlext-light-accordion-header-border-color, 3%) !default;
+$mdlext-light-accordion-header-disabled-color          : rgba($mdlext-light-accordion-header-background-color-base, 0.12) !default;
+$mdlext-light-accordion-header-secondary-color         : $mdlext-color-black !default;
+$mdlext-light-accordion-header-secondary-color-disabled: rgba($mdlext-color-black, 0.26) !default;
+$mdlext-light-accordion-header-highlight-color         : darken($mdlext-light-accordion-header-border-color, 6%) !default;
+$mdlext-light-accordion-ripple-color                   : rgba($mdlext-light-accordion-header-background-color-base, 0.4) !default;
+$mdlext-light-accordion-content-color                  : inherit !default;
+$mdlext-light-accordion-content-background-color       : transparent !default;
+
+
+// Bordered fields
+$mdlext-light-bordered-field-input-text-color               : inherit !default;
+$mdlext-light-bordered-field-border-color                   : $mdlext-light-input-text-bottom-border-color !default;
+$mdlext-light-bordered-field-background-color               : rgba($mdlext-light-content-background-color, 0.1) !default;
+$mdlext-light-bordered-field-focus-border-color             : $mdlext-light-color-accent-light !default;
+$mdlext-light-bordered-field-focus-background-color         : rgba(darken($mdlext-light-bordered-field-background-color, 10%), 0.1) !default;
+
+$mdlext-light-bordered-field-input-text-disabled-text-color : $mdlext-light-input-text-disabled-text-color;
+$mdlext-light-bordered-field-disabled-border-color          : $mdlext-light-input-text-disabled-color !default;
+$mdlext-light-bordered-field-disabled-background-color      : $mdlext-light-bordered-field-background-color !default;
+
+$mdlext-light-bordered-field-input-text-error-color         : $mdlext-light-bordered-field-input-text-color !default;
+$mdlext-light-bordered-field-error-border-color             : $mdlext-light-input-text-error-color !default;
+$mdlext-light-bordered-field-error-background-color         : rgba(lighten($mdlext-light-bordered-field-error-border-color, 50%), 0.5) !default;
+$mdlext-light-bordered-field-error-focus-border-color       : darken($mdlext-light-bordered-field-error-border-color, 10%) !default;
+$mdlext-light-bordered-field-error-focus-background-color   : $mdlext-light-bordered-field-error-background-color !default;
+
+$mdlext-light-bordered-field-input-text-label-color         : $mdlext-light-input-text-label-color !default;
+$mdlext-light-bordered-field-input-text-label-focus-color   : $mdlext-light-bordered-field-focus-border-color !default;
+$mdlext-light-bordered-field-input-text-label-error-color   : $mdlext-light-bordered-field-error-border-color !default;
+$mdlext-light-bordered-field-input-text-label-disabled-color: $mdlext-light-input-text-disabled-text-color !default;
+
+
+
+// ----------------------------------------------------------------
+// Dark Color Theme.
+// ----------------------------------------------------------------
+$mdlext-dark-color-primary:                       #FFC107 !default;
+$mdlext-dark-color-primary-dark:                  #FFA000 !default;
+$mdlext-dark-color-primary-light:                 #FFC107 !default;             // Fallback color. Set to color-primary if fallback is not needed
+$mdlext-dark-color-primary-contrast:              #FFF8E1 !default;             // text color on primary/primary dark background
+$mdlext-dark-color-accent:                        #536DFE !default;
+$mdlext-dark-color-accent-light:                  #536DFE !default;             // Fallback color. Set to color-accent if fallback is not needed
+$mdlext-dark-color-accent-contrast:               #FFFFFF !default;
+
+$mdlext-dark-content-background-color:            #303030 !default;             // #424242 or #303030, background color on content (paper/card) background
+$mdlext-dark-text-color-primary:                  rgba(#FFFFFF, 1.00) !default; // text color on content (paper/card) background
+$mdlext-dark-text-color-secondary:                rgba(#FFFFFF, 0.70) !default; // text color on content (paper/card) background
+$mdlext-dark-text-color-disabled:                 rgba(#FFFFFF, 0.50) !default; // disabled text, hint text, and icons
+$mdlext-dark-divider-color:                       rgba(#FFFFFF, 0.12) !default; // -> $card-border-color
+$mdlext-dark-error-color:                         #FF1744 !default;
+
+// Anchor
+$mdlext-dark-text-link-color:                     $mdlext-dark-color-accent !default;
+
+// Card
+$mdlext-dark-card-background-color:               $mdlext-dark-content-background-color !default;
+$mdlext-dark-card-text-color:                     $mdlext-dark-text-color-primary !default;
+$mdlext-dark-card-image-placeholder-color:        $mdlext-dark-color-accent !default;
+$mdlext-dark-card-supporting-text-text-color:     rgba($mdlext-color-white, 0.70) !default;
+$mdlext-dark-card-border-color:                   rgba(0, 0, 0, 0.1) !default;
+$mdlext-dark-card-subtitle-color:                 rgba($mdlext-color-black, 0.70) !default;
+
+//  Item
+
+// Default Item Colors
+$mdlext-dark-default-item-text-color:             rgba($mdlext-color-white, 0.87) !default;
+$mdlext-dark-default-item-outline-color:          $mdlext-palette-grey-700 !default;
+$mdlext-dark-default-item-hover-bg-color:         $mdlext-palette-grey-900 !default;
+$mdlext-dark-default-item-focus-bg-color:         $mdlext-palette-grey-900 !default;
+$mdlext-dark-default-item-active-bg-color:        $mdlext-palette-grey-800 !default;
+$mdlext-dark-default-item-divider-color:          rgba($mdlext-color-white, 0.20) !default;
+
+// Disabled Button Colors
+$mdlext-dark-disabled-item-text-color:            $mdlext-palette-grey-500 !default;
+
+// Dropdown menu / menu-button
+$mdlext-dark-default-dropdown-bg-color:           $mdlext-color-black !default;
+
+// Badge
+$mdlext-dark-badge-color:                         $mdlext-dark-color-accent-contrast !default;
+$mdlext-dark-badge-color-inverse:                 $mdlext-dark-color-accent !default;
+$mdlext-dark-badge-background:                    $mdlext-dark-color-accent !default;
+$mdlext-dark-badge-background-inverse:            $mdlext-dark-color-accent-contrast !default;
+
+// Default button colors.
+$mdlext-dark-button-primary-color:                rgba($mdlext-palette-grey-500, 0.20) !default;
+$mdlext-dark-button-secondary-color:              $mdlext-color-white !default;
+$mdlext-dark-button-hover-color:                  $mdlext-dark-button-primary-color !default;
+$mdlext-dark-button-active-color:                 rgba($mdlext-palette-grey-500, 0.40) !default;
+$mdlext-dark-button-focus-color:                  rgba($mdlext-color-black, 0.12) !default;
+
+// Colored button colors.
+$mdlext-dark-button-primary-color-alt:            $mdlext-dark-color-primary-light !default;
+$mdlext-dark-button-secondary-color-alt:          $mdlext-dark-color-primary-contrast !default;
+$mdlext-dark-button-hover-color-alt:              darken($mdlext-dark-color-primary-light, 10%) !default;
+$mdlext-dark-button-active-color-alt:             darken($mdlext-dark-color-primary-light, 10%) !default;
+$mdlext-dark-button-focus-color-alt:              $mdlext-dark-button-focus-color !default;
+
+// Ripple color for colored raised buttons.
+$mdlext-dark-button-ripple-color-alt:             $mdlext-dark-color-primary-contrast !default;
+
+// Disabled button colors.
+$mdlext-dark-button-primary-color-disabled:       rgba($mdlext-color-white, 0.12) !default;
+$mdlext-dark-button-secondary-color-disabled:     rgba($mdlext-color-white, 0.26) !default;
+
+// FAB colors and sizes.
+$mdlext-dark-button-fab-color-alt:                $mdlext-dark-color-accent !default;
+$mdlext-dark-button-fab-hover-color-alt:          $mdlext-dark-color-accent !default;
+$mdlext-dark-button-fab-active-color-alt:         $mdlext-dark-color-accent !default;
+$mdlext-dark-button-fab-text-color-alt:           $mdlext-dark-color-accent-contrast !default;
+$mdlext-dark-button-fab-ripple-color-alt:         $mdlext-dark-color-accent-contrast !default;
+
+// Slider
+$mdlext-dark-range-bg-color:                      rgba($mdlext-color-white, 0.87) !default;
+$mdlext-dark-range-color:                         $mdlext-dark-color-accent-light !default;
+$mdlext-dark-range-faded-color:                   rgba($mdlext-dark-color-accent-light, 0.50) !default;
+$mdlext-dark-range-bg-focus-color:                rgba($mdlext-color-white, 0.50) !default;
+
+// Textfields
+$mdlext-dark-input-text-background-color:         transparent !default;
+$mdlext-dark-input-text-label-color:              rgba($mdlext-color-white, 0.50) !default;
+$mdlext-dark-input-text-bottom-border-color:      rgba($mdlext-color-white, 0.26) !default;
+$mdlext-dark-input-text-highlight-color:          $mdlext-dark-color-accent-light !default;
+$mdlext-dark-input-text-disabled-color:           rgba($mdlext-color-white, 0.12) !default;
+$mdlext-dark-input-text-disabled-text-color:      rgba($mdlext-color-white, 0.26) !default;
+$mdlext-dark-input-text-error-color:              $mdlext-dark-error-color !default;
+
+// Checkboxes
+$mdlext-dark-checkbox-color:                      $mdlext-dark-color-accent-light !default;
+$mdlext-dark-checkbox-off-color:                  rgba($mdlext-color-white, 0.50) !default;
+$mdlext-dark-checkbox-disabled-color:             rgba($mdlext-color-white, 0.26) !default;
+$mdlext-dark-checkbox-focus-color:                rgba($mdlext-dark-color-accent-light, 0.26) !default;
+
+// Icon Toggles
+$mdlext-dark-icon-toggle-color:                   $mdlext-palette-grey-700 !default;
+$mdlext-dark-icon-toggle-focus-color:             $mdlext-dark-button-focus-color !default;
+$mdlext-dark-icon-toggle-checked-color:           $mdlext-dark-color-accent-light !default;
+$mdlext-dark-icon-toggle-checked-focus-color:     rgba($mdlext-dark-color-accent-light, 0.26) !default;
+$mdlext-dark-icon-toggle-disabled-color:          rgba($mdlext-color-white, 0.50) !default;
+
+// Radio Buttons
+$mdlext-dark-radio-color:                         $mdlext-dark-color-accent-light !default;
+$mdlext-dark-radio-off-color:                     rgba($mdlext-color-white, 0.50) !default;
+$mdlext-dark-radio-disabled-color:                rgba($mdlext-color-white, 0.26) !default;
+
+// Switches
+$mdlext-dark-switch-color:                        $mdlext-dark-color-accent-light !default;
+$mdlext-dark-switch-faded-color:                  rgba($mdlext-dark-color-accent-light, 0.26) !default;
+$mdlext-dark-switch-thumb-color:                  $mdlext-dark-switch-color !default;
+$mdlext-dark-switch-track-color:                  rgba($mdlext-dark-color-accent-light, 0.5) !default;
+$mdlext-dark-switch-off-thumb-color:              $mdlext-palette-grey-50 !default;
+$mdlext-dark-switch-off-track-color:              rgba($mdlext-color-white, 0.26) !default;
+$mdlext-dark-switch-disabled-thumb-color:         $mdlext-palette-grey-50 !default;
+$mdlext-dark-switch-disabled-track-color:         rgba($mdlext-color-white, 0.12) !default;
+
+// Data table
+$mdlext-dark-data-table-background-color:               $mdlext-dark-content-background-color !default;
+$mdlext-dark-data-table-header-color:                   rgba($mdlext-color-white, 0.87) !default;
+$mdlext-dark-data-table-header-sorted-color:            rgba($mdlext-color-white, 0.87) !default;
+$mdlext-dark-data-table-header-sorted-icon-hover-color: rgba($mdlext-color-white, 0.26) !default;
+$mdlext-dark-data-table-hover-color:                    $mdlext-dark-default-item-hover-bg-color !default;
+$mdlext-dark-data-table-selection-color:                $mdlext-dark-default-item-active-bg-color !default;
+$mdlext-dark-data-table-divider-color:                  rgba($mdlext-color-white, 0.12) !default;
+$mdlext-dark-data-table-dividers:                       1px solid $mdlext-dark-data-table-divider-color !default;
+
+
+// Selectfield
+// Uses variables from textfield
+
+
+// Accordion
+$mdlext-dark-accordion-header-background-color-base   : $mdlext-color-black !default;
+$mdlext-dark-accordion-header-background-color        : rgba($mdlext-dark-accordion-header-background-color-base, 1.0) !default;
+$mdlext-dark-accordion-header-background-open-color   : rgba($mdlext-dark-accordion-header-background-color-base, 0.9) !default;
+$mdlext-dark-accordion-header-border-color            : $mdlext-palette-grey-800 !default;
+$mdlext-dark-accordion-header-background-hover-color  : rgba($mdlext-dark-accordion-header-background-color-base, 0.5) !default;
+$mdlext-dark-accordion-header-background-active-color : rgba($mdlext-dark-accordion-header-background-color-base, 0.6) !default;
+$mdlext-dark-accordion-header-focus-outline-color     : lighten($mdlext-dark-accordion-header-border-color, 40%) !default;
+$mdlext-dark-accordion-header-disabled-color          : rgba($mdlext-dark-accordion-header-background-color-base, 0.4) !default;
+$mdlext-dark-accordion-header-secondary-color         : $mdlext-dark-text-color-primary !default;
+$mdlext-dark-accordion-header-secondary-color-disabled: $mdlext-dark-text-color-disabled !default;
+$mdlext-dark-accordion-header-highlight-color         : lighten($mdlext-dark-accordion-header-border-color, 40%) !default;
+$mdlext-dark-accordion-ripple-color                   : rgba($mdlext-dark-accordion-header-background-color-base, 0.3) !default;
+$mdlext-dark-accordion-content-color                  : inherit !default;
+$mdlext-dark-accordion-content-background-color       : transparent !default;
+
+
+// Bordered fields
+$mdlext-dark-bordered-field-input-text-color               : inherit !default;
+$mdlext-dark-bordered-field-border-color                   : $mdlext-dark-input-text-bottom-border-color !default;
+$mdlext-dark-bordered-field-background-color               : rgba($mdlext-dark-content-background-color, 0.1) !default;
+$mdlext-dark-bordered-field-focus-border-color             : $mdlext-dark-color-accent-light !default;
+$mdlext-dark-bordered-field-focus-background-color         : rgba(darken($mdlext-dark-bordered-field-background-color, 10%), 0.1) !default;
+
+$mdlext-dark-bordered-field-input-text-disabled-text-color : $mdlext-dark-input-text-disabled-text-color;
+$mdlext-dark-bordered-field-disabled-border-color          : $mdlext-dark-input-text-disabled-color !default;
+$mdlext-dark-bordered-field-disabled-background-color      : $mdlext-dark-bordered-field-background-color !default;
+
+$mdlext-dark-bordered-field-input-text-error-color         : $mdlext-dark-bordered-field-input-text-color !default;
+$mdlext-dark-bordered-field-error-border-color             : $mdlext-dark-input-text-error-color !default;
+$mdlext-dark-bordered-field-error-background-color         : rgba($mdlext-dark-bordered-field-error-border-color, 0.1) !default;
+$mdlext-dark-bordered-field-error-focus-border-color       : darken($mdlext-dark-bordered-field-error-border-color, 10%) !default;
+$mdlext-dark-bordered-field-error-focus-background-color   : $mdlext-dark-bordered-field-error-background-color !default;
+
+$mdlext-dark-bordered-field-input-text-label-color         : $mdlext-dark-input-text-label-color !default;
+$mdlext-dark-bordered-field-input-text-label-focus-color   : $mdlext-dark-bordered-field-focus-border-color !default;
+$mdlext-dark-bordered-field-input-text-label-error-color   : $mdlext-dark-bordered-field-error-border-color !default;
+$mdlext-dark-bordered-field-input-text-label-disabled-color: $mdlext-dark-input-text-disabled-text-color !default;