diff --git a/UI/WebServerResources/scss/components/_utils.scss b/UI/WebServerResources/scss/components/_utils.scss
deleted file mode 100755
index 0f45a436a2..0000000000
--- a/UI/WebServerResources/scss/components/_utils.scss
+++ /dev/null
@@ -1,413 +0,0 @@
-/// _utils.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
-
-/*==========  VARIABLES  ==========*/
-
-  // Defining breakpoints
-  $medium: 620px !default;
-  $wide: 800px !default;
-  $huge: 1600px !default;
-  $mediumContainer: 688px !default;
-  $wideContainer: 864px !default;
-
-  // Defining grid sizes
-  $mediumColCount: 3 !default;
-  $mediumColWidth: 30.3% !default;
-  $mediumGutterWidth: 4.5% !default;
-  $wideColCount: 4 !default;
-  $wideColWidth: 22.2% !default;
-  $wideGutterWidth: 3.7% !default;
-
-  // Defining colors
-  $colorBlue: #3372df !default;
-  $colorBlueSecondary: lighten($colorBlue, 30%) !default;
-  $colorGreen: #0f9d58 !default;
-  $colorGreenSecondary: lighten($colorGreen, 30%) !default;
-  $colorRed: #cb4437 !default;
-  $colorRedSecondary: lighten($colorRed, 30%) !default;
-  $colorYellow: #f4b400 !default;
-  $colorYellowSecondary: lighten($colorYellow, 20%) !default;
-
-  $colorRemember: #09829a !default;
-  $colorLearning: #da2e75 !default;
-
-  $colorGrayBackground: #f0f0f0 !default;
-  $colorGrayKeyline: #e0e0e0 !default;
-  $colorGray: #737373 !default;
-  $colorGrayLight: #eeeeee !default;
-  $colorGrayDark: #404040 !default;
-
-  $colorText: $colorGrayDark !default;
-  $colorHighlight: $colorBlue !default;
-  $colorWarning: $colorYellowSecondary !default;
-  $colorMuted: $colorGray !default;
-  $colorDanger: $colorRed !default;
-
-  $colorLayouts: #297ea9 !default;
-  $colorLayoutsSecondary: lighten($colorLayouts, 30%) !default;
-  $colorUser: #2c8566 !default;
-  $colorUserSecondary: lighten($colorUser, 30%) !default;
-  $colorMedia: #cf423a !default;
-  $colorMediaSecondary: lighten($colorMedia, 30%) !default;
-  $colorPerformance: #7b5294 !default;
-  $colorPerformanceSecondary: lighten($colorPerformance, 30%) !default;
-
-  // Defining font family
-  $fontDefault: 'Ubuntu', Helvetica, Arial, sans-serif !default;
-  $fontHighlight: 'Ubuntu', Helvetica, sans-serif !default;
-  $fontIcon: 'icons' !default;
-
-  // Defining font sizes
-  $fontSmall: 13px !default;
-  $fontBase: 16px  !default;
-  $fontMedium: 20px !default;
-  $fontLarge: 26px !default;
-  $fontXLarge: 42px !default;
-  $fontXXLarge: 68px !default;
-  $fontHuge: 110px !default;
-
-  // Defining baseline line height
-  $lineHeight: 26px !default;
-
-  // Defining animation easings
-  $animationEasing: cubic-bezier(0.455, 0.030, 0.515, 0.955) !default;
-
-  // Defining sidebar stuff
-  $sidebarWidth: 280px !default;
-
-
-/*==========  FUNCTIONS  ==========*/
-
-  @function leading($size, $context: $lineHeight) {
-    @return  $context / $size + em;
-  }
-
-
-/*==========  MIXINS  ==========*/
-
-  @mixin media-query($media-query) {
-    @if $media-query == small {
-      @media only screen and (max-width: $medium - 1) { @content; }
-    }
-
-    @if $media-query == medium {
-      @media only screen and (min-width: $medium) { @content; }
-    }
-
-    @if $media-query == medium-only {
-      @media only screen and (min-width: $medium) and (max-width: $wide - 1) { @content; }
-    }
-
-    @if $media-query == wide {
-      @media only screen and (min-width: $wide) { @content; }
-    }
-
-    @if $media-query == huge {
-      @media only screen and (min-width: $huge) { @content; }
-    }
-  }
-
-  // Just some helpers...
-  @mixin small-only { @include media-query(small) { @content }; }
-  @mixin medium { @include media-query(medium) { @content }; }
-  @mixin medium-only { @include media-query(medium-only) { @content }; }
-  @mixin wide { @include media-query(wide) { @content }; }
-  @mixin huge { @include media-query(huge) { @content }; }
-
-  // Mixin to constrain elements
-  @mixin container($isRelative: false) {
-    box-sizing: content-box;
-
-    @if $isRelative {
-      position: relative;
-    }
-
-    padding-left: 5%;
-    padding-right: 5%;
-    margin-left: auto;
-    margin-right: auto;
-
-
-    @include medium {
-      padding-left: 4.8%;
-      padding-right: 4.8%;
-      max-width: $mediumContainer;
-    }
-
-    @include wide {
-      padding-left: 4.4%;
-      padding-right: 4.4%;
-      max-width: $wideContainer;
-    }
-  }
-
-
-
-  // Mixin to show a baseline grid
-  // only visible when body has 'debug' class
-  @mixin baseline-grid() {
-    position: relative;
-
-    &::after {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      right: 0;
-      width: 100%;
-      z-index: 9;
-
-      display: none;
-      background-image: linear-gradient(to bottom, rgba(0,0,0,0.15) 95%,rgba(0,0,0,0.15) 100%);
-
-      background-size: 100% 26px;
-    }
-
-    &.debug::after {
-      display: block;
-      pointer-events: none;
-    }
-  }
-
-  // Mixins simply to store CSS rules
-  @mixin rule--small {
-    font-size: $fontSmall;
-    line-height: 2.0000em; /* 26px */
-    padding-top: 2.0000em;
-    padding-bottom: 0;
-  }
-
-  @mixin rule--base {
-    font-size: $fontBase;
-    line-height: 1.6250em; /* 26px */
-    padding-top: 1.6250em;
-    padding-bottom: 0;
-  }
-
-  @mixin rule--medium {
-    font-size: $fontMedium;
-    font-weight: 300;
-    line-height: 1.3000em; /* 26px */
-    padding-top: 1.3000em;
-    padding-bottom: 0;
-  }
-
-  @mixin rule--large {
-    font-family: $fontHighlight;
-    font-size: $fontLarge;
-    font-weight: 300;
-    line-height: 1.0000em; /* 26px */
-    padding-top: 1.0000em;
-    padding-bottom: 0;
-  }
-
-  @mixin rule--xlarge {
-    font-family: $fontHighlight;
-    font-size: $fontXLarge;
-    font-weight: 300;
-    line-height: 1.2381em; /* 52px */
-    padding-top: 0.6190em;
-    padding-bottom: 0;
-  }
-
-  @mixin rule--xxlarge {
-    font-family: $fontHighlight;
-    font-size: $fontXXLarge;
-    font-weight: 300;
-    line-height: 1.1471em; /* 78px */
-    padding-top: 0.3824em;
-    padding-bottom: 0;
-  }
-
-  @mixin rule--huge {
-    font-family: $fontHighlight;
-    font-size: $fontHuge;
-    font-weight: 300;
-    line-height: 1.19em; /* 130px */
-    padding-top: 0.2364em;
-    padding-bottom: 0;
-  }
-
-
-
-  // Mixins to determine which rule to use at which breakpoint
-  @mixin type--small($isFromMixin: false) {
-    @include rule--small;
-  }
-
-  @mixin type--base($isFromMixin: false) {
-    @include rule--base;
-  }
-
-  @mixin type--medium($isFromMixin: false) {
-    @if $isFromMixin == false {
-      @include type--base(true);
-      @include wide {
-        @include rule--medium;
-      }
-    }
-    @else {
-      @include rule--medium;
-    }
-  }
-
-  @mixin type--large($isFromMixin: false) {
-    @if $isFromMixin == false {
-      @include type--medium(true);
-      @include wide {
-        @include rule--large;
-      }
-    }
-    @else {
-      @include rule--large;
-    }
-  }
-
-  @mixin type--xlarge($isFromMixin: false) {
-    @if $isFromMixin == false {
-      @include type--large(true);
-      @include wide {
-        @include rule--xlarge;
-      }
-    }
-    @else {
-      @include rule--xlarge;
-    }
-  }
-
-  @mixin type--xxlarge($isFromMixin: false) {
-    @if $isFromMixin == false {
-      @include type--xlarge(true);
-      @include wide {
-        @include rule--xxlarge;
-      }
-    }
-    @else {
-      @include rule--xxlarge;
-    }
-  }
-
-  @mixin type--huge($isFromMixin: false) {
-    @if $isFromMixin == false {
-      @include type--xxlarge(true);
-      @include wide {
-        @include rule--huge;
-      }
-    }
-    @else {
-      @include rule--huge;
-    }
-  }
-
-
-  // LISTS
-  @mixin bullet-type($bullet, $icon: false) {
-    &::before {
-      @if $icon {
-        font-family: $fontIcon;
-        @extend .#{$icon}::before;
-        font-size: $fontSmall;
-      }
-      @else {
-        content: $bullet;
-        font-family: $fontHighlight;
-      }
-
-      display: block;
-      font-weight: 400;
-      position: absolute;
-      top: 0;
-      left: 0;
-      line-height: $lineHeight;
-
-    }
-  }
-
-  @mixin numbered-list() {
-    &::before {
-      counter-increment: list;
-      content: '0' counter(list);
-      color: inherit;
-      font-weight: 400;
-      display: inline-block;
-      position: absolute;
-      left: 0;
-    }
-  }
-
-  // Mixin to create links
-  @mixin style-cta($textColor, $linkIcon: false) {
-    font-family: $fontHighlight;
-    color: $textColor;
-    font-weight: 400;
-    display: inline-block;
-    line-height: 1;
-
-    &:hover {
-      color: $colorGrayDark;
-    }
-
-    @if $linkIcon {
-      text-decoration: none;
-      &::before {
-        display: inline-block;
-        padding-right: 10px;
-        font-family: $fontIcon;
-        line-height: ($lineHeight) - 1; // remove 1px from line-height to fix baseline alignment
-        font-size: $fontSmall;
-        content: $linkIcon;
-      }
-    }
-  }
-
-  // Mixin to create highlight modules
-  @mixin highlight-symbol($verticalOffset: 0, $horizontalOffset: 45px, $fontSize: 130px) {
-    position: relative;
-
-    &::before {
-      display: none;
-
-      @include medium {
-        display: block;
-        position: absolute;
-        top: 106px;
-        right: $horizontalOffset;
-
-        font-family: $fontIcon;
-        font-size: $fontSize;
-        line-height: 1px;
-        text-align: center;
-        height: 100%;
-        width: $mediumColWidth;
-        color: #ffffff;
-      }
-
-      .highlight-module--left & {
-        right: auto;
-        left: $horizontalOffset;
-      }
-
-      @include wide {
-        top: 134px;
-        width: $wideColWidth;
-        font-size: $fontSize + 50;
-
-        .highlight-module--large & {
-          font-size: $fontSize + 300;
-        }
-      }
-    }
-  }
-
-  // Grid CSS rules
-  @mixin rule--col($mediaQuery) {
-    @if $mediaQuery == medium {
-      float: left;
-      margin-right: $mediumGutterWidth;
-    }
-
-    @if $mediaQuery == wide {
-      float: left;
-      margin-right: $wideGutterWidth;
-    }
-  }