diff --git a/frontend/.sass-lint.yml b/frontend/.sass-lint.yml
index e753c8c91..a91922a0b 100644
--- a/frontend/.sass-lint.yml
+++ b/frontend/.sass-lint.yml
@@ -8,7 +8,7 @@ rules:
   clean-import-paths:
     - 0
   property-sort-order:
-    - 0
+    - 1
   indentation:
     - 2
     -
@@ -23,4 +23,5 @@ leading-underscore: false
 
 files:
   ignore:
-    - 'app/theme/_mixins.scss'
\ No newline at end of file
+    - 'app/theme/_mixins.scss'
+    - 'node_modules/**/*.*'
\ No newline at end of file
diff --git a/frontend/app-config/webpack.config.js b/frontend/app-config/webpack.config.js
index f569ea05a..e022f7ede 100644
--- a/frontend/app-config/webpack.config.js
+++ b/frontend/app-config/webpack.config.js
@@ -25,7 +25,9 @@ const plugins = {
     // https://github.com/NMFR/optimize-css-assets-webpack-plugin
     OptimizeCSSAssetsPlugin: require("optimize-css-assets-webpack-plugin"),
     // https://github.com/jrparish/tslint-webpack-plugin
-    TsLintPlugin: require('tslint-webpack-plugin')
+    TsLintPlugin: require('tslint-webpack-plugin'),
+    // https://www.npmjs.com/package/sass-lint-webpack
+    SassLintPlugin: require('sass-lint-webpack')
 };
 
 module.exports = function (env) {
@@ -131,13 +133,18 @@ module.exports = function (env) {
                     plugins.MiniCssExtractPlugin.loader,
                     {
                         loader: 'css-loader'
+                    }, {
+                        loader: 'postcss-loader'
                     }]
             }, {
                 test: /\.scss$/,
                 use: [{
                     loader: 'raw-loader'
                 }, {
-                    loader: 'sass-loader', options: {
+                    loader: 'postcss-loader'
+                }, {
+                    loader: 'sass-loader', 
+                    options: {
                         sassOptions: {
                             includePaths: [root('app', 'theme')]
                         }
@@ -172,6 +179,8 @@ module.exports = function (env) {
                 }
             }),
 
+            new plugins.SassLintPlugin(),
+
             /**
              * Detect circular dependencies in app.
              * 
@@ -347,6 +356,8 @@ module.exports = function (env) {
                 plugins.MiniCssExtractPlugin.loader,
                 {
                     loader: 'css-loader'
+                }, {
+                    loader: 'postcss-loader'
                 }, {
                     loader: 'sass-loader'
                 }],
@@ -362,6 +373,8 @@ module.exports = function (env) {
                 loader: 'style-loader'
             }, {
                 loader: 'css-loader'
+            }, {
+                loader: 'postcss-loader'
             }, {
                 loader: 'sass-loader?sourceMap'
             }],
diff --git a/frontend/app/features/administration/pages/cluster/cluster-page.component.scss b/frontend/app/features/administration/pages/cluster/cluster-page.component.scss
index 240132dcf..e4e8902fd 100644
--- a/frontend/app/features/administration/pages/cluster/cluster-page.component.scss
+++ b/frontend/app/features/administration/pages/cluster/cluster-page.component.scss
@@ -3,7 +3,6 @@
 
 iframe {
     @include absolute(0, 0, 0, 0);
-    min-width: 100%;
-    min-height: 100%;
+    @include force-width(100%);
     border: 0;
 }
\ No newline at end of file
diff --git a/frontend/app/features/administration/pages/event-consumers/event-consumers-page.component.html b/frontend/app/features/administration/pages/event-consumers/event-consumers-page.component.html
index 2b7033039..a0b66ebcc 100644
--- a/frontend/app/features/administration/pages/event-consumers/event-consumers-page.component.html
+++ b/frontend/app/features/administration/pages/event-consumers/event-consumers-page.component.html
@@ -51,7 +51,7 @@
         </ng-container>
     
         <ng-container content>
-            <textarea readonly class="form-control error-message">{{eventConsumerError}}</textarea>
+            <textarea readonly class="form-control error-message small">{{eventConsumerError}}</textarea>
         </ng-container>
     </sqx-modal-dialog>
 </ng-container>
\ No newline at end of file
diff --git a/frontend/app/features/administration/pages/event-consumers/event-consumers-page.component.scss b/frontend/app/features/administration/pages/event-consumers/event-consumers-page.component.scss
index 446243a46..954eadba8 100644
--- a/frontend/app/features/administration/pages/event-consumers/event-consumers-page.component.scss
+++ b/frontend/app/features/administration/pages/event-consumers/event-consumers-page.component.scss
@@ -13,6 +13,8 @@
 
 .error-message {
     height: 18rem;
-    font-size: .8rem;
-    font-weight: normal;
+}
+
+.small {
+    font-size: 90%;
 }
\ No newline at end of file
diff --git a/frontend/app/features/administration/pages/restore/restore-page.component.scss b/frontend/app/features/administration/pages/restore/restore-page.component.scss
index f4cc3a431..7a16e83c5 100644
--- a/frontend/app/features/administration/pages/restore/restore-page.component.scss
+++ b/frontend/app/features/administration/pages/restore/restore-page.component.scss
@@ -27,8 +27,8 @@ h3 {
     }
 
     &-body {
-        font-family: monospace;
         background: $color-border;
+        font-family: monospace;
         max-height: 400px;
         min-height: 300px;
         overflow-y: scroll;
@@ -39,12 +39,12 @@ h3 {
     &-status {
         & {
             @include circle($circle-size);
-            line-height: $circle-size + .1rem;
-            text-align: center;
-            font-size: .6 * $circle-size;
-            font-weight: normal;
             background: $color-border;
             color: $color-dark-foreground;
+            font-size: .6 * $circle-size;
+            font-weight: normal;
+            line-height: $circle-size + .1rem;
+            text-align: center;
             vertical-align: middle;
         }
 
diff --git a/frontend/app/features/administration/pages/users/user-page.component.html b/frontend/app/features/administration/pages/users/user-page.component.html
index a3f1c557d..5e314fcf6 100644
--- a/frontend/app/features/administration/pages/users/user-page.component.html
+++ b/frontend/app/features/administration/pages/users/user-page.component.html
@@ -55,7 +55,7 @@
                 <input type="text" class="form-control" id="displayName" maxlength="100" formControlName="displayName" autocomplete="false" spellcheck="false" />
             </div>
 
-            <div class="form-group form-group-password">
+            <div class="form-group form-group-section">
                 <div class="form-group">
                     <label for="password">Password</label>
 
@@ -73,7 +73,7 @@
                 </div>
             </div>
 
-            <div class="form-group form-group-permissions">
+            <div class="form-group form-group-section">
                 <label for="permissions">Permissions</label>
 
                 <sqx-control-errors for="permissions" [submitted]="userForm.submitted | async"></sqx-control-errors>
diff --git a/frontend/app/features/administration/pages/users/user-page.component.scss b/frontend/app/features/administration/pages/users/user-page.component.scss
index 5742bc927..8f81aae0d 100644
--- a/frontend/app/features/administration/pages/users/user-page.component.scss
+++ b/frontend/app/features/administration/pages/users/user-page.component.scss
@@ -1,16 +1,10 @@
 @import '_vars';
 @import '_mixins';
 
-.form-group-password {
-    margin-top: 2rem;
-}
-
-.form-group-permissions {
+.form-group-section {
     margin-top: 2rem;
 }
 
 textarea {
     height: 200px;
-    font-size: .9rem;
-    font-weight: normal;
 }
\ No newline at end of file
diff --git a/frontend/app/features/api/api-area.component.scss b/frontend/app/features/api/api-area.component.scss
index 3bda24ee9..6df2bffe7 100644
--- a/frontend/app/features/api/api-area.component.scss
+++ b/frontend/app/features/api/api-area.component.scss
@@ -2,11 +2,11 @@
 @import '_mixins';
 
 .nav-link {
-    position: relative;
-    padding-top: .6rem;
     padding-bottom: .6rem;
+    padding-top: .6rem;
+    position: relative;
 }
 
 .icon-angle-right {
-    @include absolute(14px, 2rem, auto, auto);
+    @include absolute(14px, 2rem);
 }
\ No newline at end of file
diff --git a/frontend/app/features/apps/pages/apps-page.component.html b/frontend/app/features/apps/pages/apps-page.component.html
index 2a267d86e..e7f69e19a 100644
--- a/frontend/app/features/apps/pages/apps-page.component.html
+++ b/frontend/app/features/apps/pages/apps-page.component.html
@@ -14,14 +14,14 @@
             <h3 class="empty-headline">You are not collaborating to any app yet</h3>
         </div>
 
-        <div class="card card-href card-app float-left" *ngFor="let app of apps; trackBy: trackByApp" [routerLink]="['/app', app.name]">
+        <div class="card card-href card-app" *ngFor="let app of apps; trackBy: trackByApp" [routerLink]="['/app', app.name]">
             <div class="card-body">
                 <div class="row no-gutters">
                     <div class="col-auto card-left">
                         <sqx-avatar [image]="app.image" [identifier]="app.name"></sqx-avatar>
                     </div>
                     <div class="col">
-                        <h4 class="card-title">{{app.displayName}}</h4>
+                        <h3 class="card-title">{{app.displayName}}</h3>
 
                         <div class="card-text card-links">
                             <a [routerLink]="['/app', app.name]" sqxStopClick>Edit</a>
@@ -51,7 +51,7 @@
                 <img src="./images/add-app.svg" />
             </div>
 
-            <h4 class="card-title">New App</h4>
+            <h3 class="card-title">New App</h3>
 
             <div class="card-text">
                 Create a new blank app without content and schemas.
@@ -65,7 +65,7 @@
                 <img src="./images/add-blog.svg" />
             </div>
 
-            <h4 class="card-title">New Blog Sample</h4>
+            <h3 class="card-title">New Blog Sample</h3>
 
             <div class="card-text">
                 <div>Start with our ready to use blog.</div>
@@ -82,7 +82,7 @@
                 <img src="./images/add-profile.svg" />
             </div>
 
-            <h4 class="card-title">New Profile Sample</h4>
+            <h3 class="card-title">New Profile Sample</h3>
 
             <div class="card-text">
                 <div>Create your profile page.</div>
@@ -99,7 +99,7 @@
                 <img src="./images/add-identity.svg" />
             </div>
 
-            <h4 class="card-title">New Identity App</h4>
+            <h3 class="card-title">New Identity App</h3>
 
             <div class="card-text">
                 <div>Create app for Squidex Identity.</div>
@@ -111,7 +111,9 @@
     </div>
 </div>
 
-<div *ngIf="info" class="info">{{info}}</div>
+<div *ngIf="info" class="apps-section">
+    <small class="info">{{info}}</small>
+</div>
 
 <ng-container *sqxModal="addAppDialog">
     <sqx-app-form [template]="addAppTemplate"
diff --git a/frontend/app/features/apps/pages/apps-page.component.scss b/frontend/app/features/apps/pages/apps-page.component.scss
index 02998e6a5..22d8039a1 100644
--- a/frontend/app/features/apps/pages/apps-page.component.scss
+++ b/frontend/app/features/apps/pages/apps-page.component.scss
@@ -8,20 +8,17 @@
 
     &-section {
         @include clearfix;
-        padding-top: 2rem;
-        padding-right: 1.25rem;
-        padding-bottom: 0;
-        padding-left: $size-sidebar-width + .25rem;
-        display: block;
+        padding: 2rem 1.25rem 0 $size-sidebar-width + .25rem;
     }
 }
 
 .card {
     & {
-        margin-right: 1rem;
+        @include hover-visible('.deeplinks', inline-block);
+        display: inline-block;
         margin-bottom: 1rem;
+        margin-right: 1rem;
         width: 20rem;
-        float: left;
     }
 
     &-lg {
@@ -42,25 +39,16 @@
 
     &-text {
         color: $color-text-decent;
-        font-weight: normal;
         font-size: .9rem;
-        margin-top: .5rem;
-    }
-
-    &-more {
-        color: $color-text-decent;
         font-weight: normal;
-        font-size: .8rem;
-        margin-top: .4rem;
+        margin-top: .5rem;
     }
 
     &-title {
         @include truncate;
         color: $color-title;
-        font-weight: light;
-        font-size: 1.2rem;
-        margin-top: 0;
         margin-bottom: 0;
+        margin-top: 0;
     }
 
     &-template {
@@ -69,8 +57,8 @@
         }
 
         .card-title {
-            margin-top: 1rem;
             margin-bottom: .75rem;
+            margin-top: 1rem;
         }
     }
 
@@ -93,16 +81,6 @@
             text-decoration: none;
         }
     }
-
-    &:hover {
-        .deeplinks {
-            display: inline-block;
-        }
-    }
-
-    .deeplinks {
-        display: none;
-    }
 }
 
 .card-image {
@@ -113,7 +91,4 @@
 
 .info {
     color: $color-border-dark;
-    padding: 2rem;
-    padding-left: $size-sidebar-width + .25rem;
-    font-size: .8rem;
 }
\ No newline at end of file
diff --git a/frontend/app/features/apps/pages/news-dialog.component.scss b/frontend/app/features/apps/pages/news-dialog.component.scss
index beb51611a..274b04219 100644
--- a/frontend/app/features/apps/pages/news-dialog.component.scss
+++ b/frontend/app/features/apps/pages/news-dialog.component.scss
@@ -4,11 +4,9 @@
 :host ::ng-deep {
     img {
         @include box-shadow(0, 4px, 20px, .2);
-        width: 80%;
-        margin: 0 auto;
-        margin-top: 10px;
-        margin-bottom: 10px;
         display: block;
+        margin: 10px auto;
+        max-width: 80%;
     }
 
     p {
diff --git a/frontend/app/features/apps/pages/onboarding-dialog.component.scss b/frontend/app/features/apps/pages/onboarding-dialog.component.scss
index 3ae3573cb..6a55f8584 100644
--- a/frontend/app/features/apps/pages/onboarding-dialog.component.scss
+++ b/frontend/app/features/apps/pages/onboarding-dialog.component.scss
@@ -15,24 +15,21 @@ p {
 }
 
 .col-image {
-    min-width: 489px;
-    max-width: 489px;
+    @include force-width(489px);
 }
 
 :host ::ng-deep {
     .modal {
         &-content,
         &-dialog {
-            min-height: $size-height;
-            max-height: $size-height;
-            min-width: $size-width;
-            max-width: $size-width;
+            @include force-width($size-width);
+            @include force-height($size-height);
         }
 
         &-content {
-            color: $color-dark-foreground;
             background-color: $color-dark-onboarding;
             background-image: url('./images/onboarding-background.png');
+            color: $color-dark-foreground;
             position: relative;
         }
 
@@ -42,9 +39,9 @@ p {
         }
 
         &-close {
-            text-decoration: underline !important;
-            cursor: pointer;
             color: $color-dark-foreground;
+            cursor: pointer;
+            text-decoration: underline !important;
         }
     }
 }
@@ -54,24 +51,23 @@ p {
 }
 
 .header-left {
-    @include absolute(-70px, auto, auto, 2rem);
+    @include absolute($t: -70px, $l: 2rem);
 }
 
 .header-right {
-    @include absolute(2rem, 2rem, auto, auto);
+    @include absolute($t: 2rem, $r: 2rem);
 }
 
 .footer {
-    @include absolute(auto, auto, 5rem, 2rem);
+    @include absolute($b: 5rem, $l: 2rem);
 }
 
 .onboarding {
     &-enter-leave {
         & {
-            text-align: center;
+            @include force-width(28rem);
             margin: 4rem auto 0;
-            max-width: 28rem;
-            min-width: 28rem;
+            text-align: center;
         }
 
         p {
diff --git a/frontend/app/features/assets/pages/assets-filters-page.component.scss b/frontend/app/features/assets/pages/assets-filters-page.component.scss
index bc0b6a3e7..fbb752506 100644
--- a/frontend/app/features/assets/pages/assets-filters-page.component.scss
+++ b/frontend/app/features/assets/pages/assets-filters-page.component.scss
@@ -1,6 +1,2 @@
 @import '_vars';
-@import '_mixins';
-
-.text-muted {
-    text-decoration: none;
-}
\ No newline at end of file
+@import '_mixins';
\ No newline at end of file
diff --git a/frontend/app/features/assets/pages/assets-page.component.scss b/frontend/app/features/assets/pages/assets-page.component.scss
index 98574b085..5976607b7 100644
--- a/frontend/app/features/assets/pages/assets-page.component.scss
+++ b/frontend/app/features/assets/pages/assets-page.component.scss
@@ -1,25 +1,18 @@
 @import '_vars';
 @import '_mixins';
 
-.section {
-    border-top: 1px solid $color-border;
-    padding: 1rem;
-}
-
-:host ::ng-deep {
-    .search {
-        .form-control {
-            @include border-radius-right;
-        }
+.search ::ng-deep {
+    .form-control {
+        @include border-radius-right;
+    }
 
-        .tags {
-            @include border-radius-left;
-            border-right: 0;
+    .tags {
+        @include border-radius-left;
+        border-right: 0;
 
-            &:focus,
-            &.focus {
-                z-index: 1000;
-            }
+        &:focus,
+        &.focus {
+            z-index: 1000;
         }
     }
 }
\ No newline at end of file
diff --git a/frontend/app/features/content/pages/content/content-field.component.scss b/frontend/app/features/content/pages/content/content-field.component.scss
index 41d69ce77..28167804c 100644
--- a/frontend/app/features/content/pages/content/content-field.component.scss
+++ b/frontend/app/features/content/pages/content/content-field.component.scss
@@ -2,13 +2,12 @@
 @import '_mixins';
 
 .table-items-row {
-    position: relative;
-    border-width: 1px;
     border-left-width: 4px;
+    position: relative;
 }
 
 .languages-buttons {
-    @include absolute(.25rem, 1.25rem, auto, auto);
+    @include absolute(.25rem, 1.25rem);
 }
 
 .row {
@@ -44,18 +43,27 @@
 
     &-disabled {
         color: $color-border-dark;
-        font-size: .8rem;
-        font-weight: normal;
     }
 
     &-copy {
-        @include absolute(1rem, auto, auto, -1rem);
+        @include absolute($t: 1rem, $l: -1rem);
         z-index: 1000;
     }
 }
 
 .compare {
-    padding: .5rem 0;
     border: 0;
     border-bottom: 1px solid $color-border;
+    padding-bottom: .25rem;
+    padding-top: .5rem;
+}
+
+:host {
+    &:last-child {
+        margin-bottom: 0;
+
+        .compare {
+            border: 0;
+        }
+    }
 }
\ No newline at end of file
diff --git a/frontend/app/features/content/pages/content/content-history-page.component.scss b/frontend/app/features/content/pages/content/content-history-page.component.scss
index b1d0b2caa..4ad344afa 100644
--- a/frontend/app/features/content/pages/content/content-history-page.component.scss
+++ b/frontend/app/features/content/pages/content/content-history-page.component.scss
@@ -23,8 +23,8 @@
     }
 
     &-created {
-        font-weight: normal;
         font-size: .75rem;
+        font-weight: normal;
         margin: .25rem 0;
     }
 }
\ No newline at end of file
diff --git a/frontend/app/features/content/pages/content/content-page.component.html b/frontend/app/features/content/pages/content/content-page.component.html
index 54fd90060..548997d3c 100644
--- a/frontend/app/features/content/pages/content/content-page.component.html
+++ b/frontend/app/features/content/pages/content/content-page.component.html
@@ -1,7 +1,7 @@
 <sqx-title [message]="schema.displayName"></sqx-title>
 
 <form [formGroup]="contentForm.form" (ngSubmit)="saveAndPublish()">
-    <sqx-panel desiredWidth="*" minWidth="60rem" [showSidebar]="hasContent">
+    <sqx-panel desiredWidth="*" minWidth="60rem" [showSidebar]="hasContent" grid="true">
         <ng-container title>
             <a class="btn btn-text" (click)="back()" *ngIf="!schema.isSingleton">
                 <i class="icon-angle-left"></i>
@@ -98,26 +98,31 @@
         </ng-container>
 
         <ng-container content>
-            <div class="panel-alert panel-alert-danger" *ngIf="contentVersion; let version">
-                <div class="float-right">
-                    <a class="force" (click)="showLatest()">View latest</a>
-                </div>
+            <sqx-list-view>
+                <ng-container topHeader>
+                    <div class="panel-alert panel-alert-danger" *ngIf="contentVersion; let version">
+                        <div class="float-right">
+                            <a class="force" (click)="showLatest()">View latest</a>
+                        </div>
+        
+                        Viewing <strong>version {{version.value}}</strong>.
+                    </div>
+                </ng-container>
 
-                Viewing <strong>version {{version.value}}</strong>.
-            </div>
+                <div content>
+                    <sqx-content-field *ngFor="let field of schema.fields; trackBy: trackByFieldFn"
+                        [form]="contentForm"
+                        [formContext]="formContext"
+                        [field]="field"
+                        [fieldForm]="contentForm.form.get(field.name)"
+                        [fieldFormCompare]="contentFormCompare?.form.get(field.name)"
+                        [schema]="schema"
+                        [languages]="languages"
+                        [(language)]="language">
+                    </sqx-content-field>
+                </div>
+            </sqx-list-view>
 
-            <ng-container *ngFor="let field of schema.fields; trackBy: trackByFieldFn">
-                <sqx-content-field 
-                    [form]="contentForm"
-                    [formContext]="formContext"
-                    [field]="field"
-                    [fieldForm]="contentForm.form.get(field.name)"
-                    [fieldFormCompare]="contentFormCompare?.form.get(field.name)"
-                    [schema]="schema"
-                    [languages]="languages"
-                    [(language)]="language">
-                </sqx-content-field>
-            </ng-container>
         </ng-container>
 
         <ng-container sidebar>
diff --git a/frontend/app/features/content/pages/contents/contents-filters-page.component.scss b/frontend/app/features/content/pages/contents/contents-filters-page.component.scss
index fed91c194..d2ed5db4c 100644
--- a/frontend/app/features/content/pages/contents/contents-filters-page.component.scss
+++ b/frontend/app/features/content/pages/contents/contents-filters-page.component.scss
@@ -1,10 +1,6 @@
 @import '_vars';
 @import '_mixins';
 
-.text-muted {
-    pointer-events: none;
-}
-
 .status {
     @include truncate;
 }
\ No newline at end of file
diff --git a/frontend/app/features/content/pages/contents/contents-page.component.scss b/frontend/app/features/content/pages/contents/contents-page.component.scss
index 2f1b55277..4687816d8 100644
--- a/frontend/app/features/content/pages/contents/contents-page.component.scss
+++ b/frontend/app/features/content/pages/contents/contents-page.component.scss
@@ -1,21 +1,15 @@
 @import '_vars';
 @import '_mixins';
 
-:host ::ng-deep {
-    .search-form {
-        display: block;
-    }
-}
-
 .content {
     cursor: pointer;
 }
 
 .table-container {
     display: inline-block;
+    min-width: 100%;
     padding: 0;
     padding-right: 1.5rem;
-    min-width: 100%;
 }
 
 .icon-plus {
@@ -28,6 +22,6 @@
 
 .selection {
     background: $color-theme-secondary;
-    border-bottom: 2px solid $color-border;
+    border-bottom: 1px solid $color-border;
     padding: .25 * $panel-padding $panel-padding;
 }
\ No newline at end of file
diff --git a/frontend/app/features/content/pages/schemas/schemas-page.component.scss b/frontend/app/features/content/pages/schemas/schemas-page.component.scss
index a6d275dc0..fbb752506 100644
--- a/frontend/app/features/content/pages/schemas/schemas-page.component.scss
+++ b/frontend/app/features/content/pages/schemas/schemas-page.component.scss
@@ -1,17 +1,2 @@
 @import '_vars';
-@import '_mixins';
-
-.panel-header {
-    min-height: 8rem;
-    max-height: 8rem;
-}
-
-.nav-link {
-    position: relative;
-    padding-top: .6rem;
-    padding-bottom: .6rem;
-}
-
-.icon-angle-right {
-    @include absolute(14px, 2rem, auto, auto);
-}
\ No newline at end of file
+@import '_mixins';
\ No newline at end of file
diff --git a/frontend/app/features/content/shared/array-editor.component.scss b/frontend/app/features/content/shared/array-editor.component.scss
index 35dbb6684..b08fbfc17 100644
--- a/frontend/app/features/content/shared/array-editor.component.scss
+++ b/frontend/app/features/content/shared/array-editor.component.scss
@@ -3,10 +3,10 @@
 
 .array-container {
     background: $color-border;
+    margin-bottom: 1rem;
     padding: 1rem;
     padding-bottom: 1px;
     position: relative;
-    margin-bottom: 1rem;
 }
 
 .item {
diff --git a/frontend/app/features/content/shared/array-item.component.scss b/frontend/app/features/content/shared/array-item.component.scss
index 1ed7a51ec..f07387916 100644
--- a/frontend/app/features/content/shared/array-item.component.scss
+++ b/frontend/app/features/content/shared/array-item.component.scss
@@ -20,9 +20,8 @@
     }
 
     .header-index {
+        @include force-width(3rem);
         display: inline-block;
-        min-width: 3rem;
-        max-width: 3rem;
     }
 }
 
diff --git a/frontend/app/features/content/shared/assets-editor.component.scss b/frontend/app/features/content/shared/assets-editor.component.scss
index 1ba9e507b..6734b4757 100644
--- a/frontend/app/features/content/shared/assets-editor.component.scss
+++ b/frontend/app/features/content/shared/assets-editor.component.scss
@@ -9,11 +9,11 @@
     &-container {
         & {
             background: $color-background;
+            height: $asset-height + 2rem;
             overflow-x: hidden;
             overflow-y: scroll;
             padding: 1rem;
             padding-bottom: 0;
-            height: $asset-height + 2rem;
         }
     }
 }
@@ -34,16 +34,16 @@
 
 .drop-area {
     & {
-        @include transition(border-color .4s ease);
         @include border-radius;
         @include truncate-nowidth;
         border: 2px dashed darken($color-border, 10%);
-        padding: 5px .5rem;
-        font-weight: normal;
-        font-size: 1rem;
-        text-align: center;
         color: darken($color-border, 30%);
         cursor: pointer;
+        font-size: 1rem;
+        font-weight: normal;
+        padding: 5px .5rem;
+        text-align: center;
+        transition: border-color .4s ease;
     }
 
     &:hover {
@@ -56,8 +56,8 @@
 
     &.drag {
         border-color: darken($color-border, 15%);
-        cursor: copy;
         color: darken($color-border, 40%);
+        cursor: copy;
         text-decoration: none;
     }
 }
diff --git a/frontend/app/features/content/shared/content-status.component.html b/frontend/app/features/content/shared/content-status.component.html
index 539c10987..4c6afcc37 100644
--- a/frontend/app/features/content/shared/content-status.component.html
+++ b/frontend/app/features/content/shared/content-status.component.html
@@ -1,5 +1,5 @@
 <ng-container *ngIf="scheduledTo; else noSchedule">
-    <span class="content-status pending mr-1"title="{{tooltipText}}">
+    <span class="content-status pending mr-1" title="{{tooltipText}}">
         <i class="icon-clock" [class.icon-sm]="small"></i>
     </span>
 </ng-container>
diff --git a/frontend/app/features/content/shared/content-status.component.scss b/frontend/app/features/content/shared/content-status.component.scss
index ca2b22755..1d78232ef 100644
--- a/frontend/app/features/content/shared/content-status.component.scss
+++ b/frontend/app/features/content/shared/content-status.component.scss
@@ -13,14 +13,4 @@
     &-label {
         color: $color-text;
     }
-
-    &-tooltip {
-        @include border-radius;
-        background: $color-tooltip;
-        border: 0;
-        font-size: .9rem;
-        font-weight: normal;
-        color: $color-dark-foreground;
-        padding: .75rem;
-    }
 }
\ No newline at end of file
diff --git a/frontend/app/features/content/shared/content.component.scss b/frontend/app/features/content/shared/content.component.scss
index 820f3c721..8f71e59ca 100644
--- a/frontend/app/features/content/shared/content.component.scss
+++ b/frontend/app/features/content/shared/content.component.scss
@@ -8,12 +8,10 @@
 
     .edit-menu {
         @include absolute(.75rem, auto, auto, .25rem);
+        background: $color-table-background;
         border-right: 1px solid $color-border;
-        min-height: 2.4rem;
-        max-height: 2.4rem;
         padding-right: 1rem;
         white-space: nowrap;
-        background: $color-table-background;
         z-index: 100;
     }
 }
\ No newline at end of file
diff --git a/frontend/app/features/content/shared/contents-selector.component.scss b/frontend/app/features/content/shared/contents-selector.component.scss
index e63fb2c3a..45537634d 100644
--- a/frontend/app/features/content/shared/contents-selector.component.scss
+++ b/frontend/app/features/content/shared/contents-selector.component.scss
@@ -16,15 +16,14 @@
 
     .form-control {
         @include absolute(-.4rem, auto, auto, 0);
-        max-width: 300px;
-        min-width: 300px;
+        @include force-width(300px);
         color: $color-dark-foreground;
     }
 }
 
 .table-container {
     display: inline-block;
+    min-width: 100%;
     padding: 0;
     padding-right: 1.5rem;
-    min-width: 100%;
 }
\ No newline at end of file
diff --git a/frontend/app/features/content/shared/field-editor.component.html b/frontend/app/features/content/shared/field-editor.component.html
index 071e2566c..0970a8773 100644
--- a/frontend/app/features/content/shared/field-editor.component.html
+++ b/frontend/app/features/content/shared/field-editor.component.html
@@ -4,7 +4,7 @@
             {{field.displayName}} {{displaySuffix}} <span class="field-required" [class.hidden]="!field.properties.isRequired">*</span>
         </label> 
     
-        <span class="field-disabled pl-1" *ngIf="field.isDisabled">Disabled</span>
+        <small class="field-disabled pl-1" *ngIf="field.isDisabled">Disabled</small>
     
         <sqx-control-errors *ngIf="form" [for]="editorControl" [fieldName]="field.displayName" [submitted]="form.submitted | async"></sqx-control-errors>
     </ng-container>
diff --git a/frontend/app/features/content/shared/field-editor.component.scss b/frontend/app/features/content/shared/field-editor.component.scss
index 206e9cf54..f363be204 100644
--- a/frontend/app/features/content/shared/field-editor.component.scss
+++ b/frontend/app/features/content/shared/field-editor.component.scss
@@ -19,12 +19,12 @@
     }
 
     &-separator {
-        color: lighten($color-text, 20%);
         border-bottom: 1px solid darken($color-border, 5%);
+        color: lighten($color-text, 20%);
         font-size: 1.3rem;
         font-weight: normal;
-        padding: .25rem 0;
-        margin-top: 1.5rem;
         margin-bottom: 0;
+        margin-top: 1.5rem;
+        padding: .25rem 0;
     }
 }
\ No newline at end of file
diff --git a/frontend/app/features/content/shared/reference-item.component.scss b/frontend/app/features/content/shared/reference-item.component.scss
index 868a1423c..c61e3cdfa 100644
--- a/frontend/app/features/content/shared/reference-item.component.scss
+++ b/frontend/app/features/content/shared/reference-item.component.scss
@@ -3,24 +3,16 @@
 
 .reference-edit {
     & {
+        @include hover-visible('.reference-menu');
         position: relative;
     }
 
-    &:hover {
-        .reference-menu {
-            display: block;
-        }
-    }
-
     .reference-menu {
         @include absolute(0, -.25rem, auto, auto);
+        background: $color-table-background;
         border-left: 1px solid $color-border;
-        display: none;
-        min-height: 2.4rem;
-        max-height: 2.4rem;
         padding-left: 1rem;
         white-space: nowrap;
-        background: $color-table-background;
     }
 }
 
diff --git a/frontend/app/features/content/shared/references-editor.component.scss b/frontend/app/features/content/shared/references-editor.component.scss
index c7ed7fd10..91fbf4c99 100644
--- a/frontend/app/features/content/shared/references-editor.component.scss
+++ b/frontend/app/features/content/shared/references-editor.component.scss
@@ -6,33 +6,33 @@
 }
 
 .invalid {
-    padding: 2rem;
+    color: darken($color-border, 30%);
     font-size: 1.2rem;
     font-weight: normal;
+    padding: 2rem;
     text-align: center;
-    color: darken($color-border, 30%);
 }
 
 .references-container {
     background: $color-background;
+    max-height: 20rem;
+    min-height: 6rem;
     overflow-x: hidden;
     overflow-y: auto;
     padding: 1rem;
-    min-height: 6rem;
-    max-height: 20rem;
 }
 
 .drop-area {
     & {
-        @include transition(border-color .4s ease);
         @include border-radius;
         border: 2px dashed darken($color-border, 10%);
+        color: darken($color-border, 30%);
+        cursor: pointer;
         font-size: 1.2rem;
         font-weight: normal;
-        text-align: center;
         padding: 1rem;
-        cursor: pointer;
-        color: darken($color-border, 30%);
+        text-align: center;
+        transition: border-color .4s ease;
     }
 
     &:hover {
diff --git a/frontend/app/features/dashboard/pages/dashboard-page.component.scss b/frontend/app/features/dashboard/pages/dashboard-page.component.scss
index 1b5d18fe4..487878184 100644
--- a/frontend/app/features/dashboard/pages/dashboard-page.component.scss
+++ b/frontend/app/features/dashboard/pages/dashboard-page.component.scss
@@ -12,9 +12,9 @@
     }
 
     &-inner {
+        max-width: 75rem;
         padding: 2rem;
         padding-right: 1rem;
-        max-width: 75rem;
     }
 }
 
@@ -25,8 +25,8 @@
 :host ::ng-deep {
     canvas {
         height: 12rem !important;
-        margin-top: -1rem;
         margin-bottom: 0;
+        margin-top: -1rem;
     }
 }
 
@@ -38,12 +38,11 @@
 
 .card {
     & {
-        margin-right: 1rem;
+        @include force-height(16rem);
+        float: left;
         margin-bottom: 1rem;
+        margin-right: 1rem;
         width: 16rem;
-        min-height: 16rem;
-        max-height: 16rem;
-        float: left;
     }
 
     &-lg {
@@ -60,14 +59,14 @@
 
     &-text {
         color: $color-text-decent;
-        font-weight: normal;
         font-size: .9rem;
+        font-weight: normal;
     }
 
     &-title {
         color: $color-title;
-        font-weight: light;
         font-size: 1.2rem;
+        font-weight: light;
         margin-top: 1rem;
     }
 
@@ -103,7 +102,7 @@
 
     &-value {
         font-size: 3rem;
-        margin-top: 1rem;
         margin-bottom: .5rem;
+        margin-top: 1rem;
     }
 }
\ No newline at end of file
diff --git a/frontend/app/features/rules/pages/events/rule-events-page.component.scss b/frontend/app/features/rules/pages/events/rule-events-page.component.scss
index 5b1f0ba5c..9714b2f2b 100644
--- a/frontend/app/features/rules/pages/events/rule-events-page.component.scss
+++ b/frontend/app/features/rules/pages/events/rule-events-page.component.scss
@@ -11,21 +11,21 @@ h3 {
     }
 
     &-dump {
-        margin-top: 1rem;
         font-family: monospace;
         font-size: .8rem;
         font-weight: normal;
         height: 20rem;
+        margin-top: 1rem;
     }
 
     &-header {
         & {
-            padding: .75rem 1.25rem;
-            position: relative;
             background: $color-border;
             border: 0;
             margin: -.75rem -1.25rem;
             margin-bottom: 1rem;
+            padding: .75rem 1.25rem;
+            position: relative;
         }
 
         &::before {
diff --git a/frontend/app/features/rules/pages/rules/rule-element.component.scss b/frontend/app/features/rules/pages/rules/rule-element.component.scss
index 2bb9bc0c1..3f6119d72 100644
--- a/frontend/app/features/rules/pages/rules/rule-element.component.scss
+++ b/frontend/app/features/rules/pages/rules/rule-element.component.scss
@@ -3,9 +3,9 @@
 
 .small {
     & {
-        @include transition(background-color .4s ease);
         height: 3rem;
         position: relative;
+        transition: background-color .4s ease;
     }
 
     &.editable {
@@ -16,26 +16,25 @@
         @include absolute(0, 0, 0, 3rem);
         @include truncate;
         color: $color-dark-foreground;
-        line-height: 3rem;
         font-size: 1rem;
         font-weight: normal;
+        line-height: 3rem;
         padding: 0 .8rem;
     }
 
     &-icon {
         @include absolute(0, auto, 0, 0);
         color: $color-dark-foreground;
-        line-height: 3.2rem;
         font-size: 1.2rem;
         font-weight: normal;
+        line-height: 3.2rem;
         padding: 0 .8rem;
     }
 }
 
 .large {
     & {
-        min-height: 100px;
-        max-height: 100px;
+        @include force-height(100px);
     }
 
     &.editable {
@@ -47,23 +46,23 @@
     }
 
     &-title {
-        font-weight: bold;
         font-size: 1rem;
+        font-weight: bold;
         line-height: 1;
     }
 
     &-text {
         font-size: .8rem;
-        margin-top: .25rem;
         margin-bottom: .25rem;
+        margin-top: .25rem;
     }
 
     &-icon {
         color: $color-dark-foreground;
         display: inline-block;
+        line-height: 1px;
         margin-right: .5rem;
-        position: relative;
         padding: 1rem;
-        line-height: 1px;
+        position: relative;
     }
 }
\ No newline at end of file
diff --git a/frontend/app/features/rules/pages/rules/rule.component.scss b/frontend/app/features/rules/pages/rules/rule.component.scss
index 669137560..65ee99bc7 100644
--- a/frontend/app/features/rules/pages/rules/rule.component.scss
+++ b/frontend/app/features/rules/pages/rules/rule.component.scss
@@ -3,8 +3,8 @@
 
 .card {
     & {
-        @include border-radius(0);
         border-bottom-width: 2px;
+        border-radius: 0;
         border-top-width: 0;
         margin-bottom: .25rem;
     }
@@ -16,12 +16,11 @@
 
     &-footer {
         background: $color-theme-secondary;
-        font-weight: normal;
         font-size: 90%;
+        font-weight: normal;
     }
 }
 
 .col-last {
-    min-width: 80px;
-    max-width: 80px;
+    @include force-width(80px);
 }
\ No newline at end of file
diff --git a/frontend/app/features/rules/pages/rules/triggers/content-changed-trigger.component.scss b/frontend/app/features/rules/pages/rules/triggers/content-changed-trigger.component.scss
index 0f21fbc94..858cd09ff 100644
--- a/frontend/app/features/rules/pages/rules/triggers/content-changed-trigger.component.scss
+++ b/frontend/app/features/rules/pages/rules/triggers/content-changed-trigger.component.scss
@@ -3,8 +3,8 @@
 
 .section {
     border-top: 1px solid $color-border;
-    padding-top: 1rem;
     padding-bottom: 1rem;
+    padding-top: 1rem;
 }
 
 .form-check {
diff --git a/frontend/app/features/schemas/pages/schema/field.component.scss b/frontend/app/features/schemas/pages/schema/field.component.scss
index 894871e4d..0dad76061 100644
--- a/frontend/app/features/schemas/pages/schema/field.component.scss
+++ b/frontend/app/features/schemas/pages/schema/field.component.scss
@@ -17,9 +17,9 @@ $padding: 1rem;
 }
 
 .table-items-row-summary {
-    position: relative;
-    padding-right: 1.25rem;
     padding-left: 3rem;
+    padding-right: 1.25rem;
+    position: relative;
 }
 
 .drag-container {
@@ -39,12 +39,12 @@ $padding: 1rem;
 }
 
 .nested-fields {
+    background: $color-theme-secondary;
+    border: 1px solid $color-border;
+    border-top-width: 0;
     padding: $padding;
     padding-left: 2 * $padding;
     position: relative;
-    border: 1px solid $color-border;
-    border-top-width: 0;
-    background: $color-theme-secondary;
 }
 
 .nested-field {
@@ -54,8 +54,8 @@ $padding: 1rem;
 
     &-add {
         border: 2px dashed $field-line;
-        position: relative;
         padding: 1rem;
+        position: relative;
     }
 
     &-line-v {
@@ -79,10 +79,10 @@ $padding: 1rem;
     }
 
     &-icon {
-        margin-right: 1rem;
         color: $color-border-dark;
         font-size: 1.2rem;
         font-weight: normal;
+        margin-right: 1rem;
         vertical-align: middle;
     }
 
@@ -96,13 +96,13 @@ $padding: 1rem;
 
     &-partitioning {
         color: $color-text-decent;
-        font-weight: normal;
         font-size: .85rem;
+        font-weight: normal;
     }
 
     .tag {
-        @include opacity(.9);
-        min-width: 4rem;
         max-width: 6rem;
+        min-width: 4rem;
+        opacity: .9;
     }
 }
\ No newline at end of file
diff --git a/frontend/app/features/schemas/pages/schema/schema-export-form.component.scss b/frontend/app/features/schemas/pages/schema/schema-export-form.component.scss
index 220b21514..9f8d22053 100644
--- a/frontend/app/features/schemas/pages/schema/schema-export-form.component.scss
+++ b/frontend/app/features/schemas/pages/schema/schema-export-form.component.scss
@@ -4,9 +4,9 @@
 :host,
 .inner-form,
 .inner-main {
-    @include flex-box;
-    @include flex-grow(1);
-    @include flex-direction(column);
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
 }
 
 .inner-header,
diff --git a/frontend/app/features/schemas/pages/schema/schema-fields.component.scss b/frontend/app/features/schemas/pages/schema/schema-fields.component.scss
index b07a07549..7b7990804 100644
--- a/frontend/app/features/schemas/pages/schema/schema-fields.component.scss
+++ b/frontend/app/features/schemas/pages/schema/schema-fields.component.scss
@@ -2,10 +2,10 @@
 @import '_mixins';
 
 :host {
+    overflow-x: hidden;
+    overflow-y: auto;
     padding: $panel-padding;
     padding-bottom: 8rem;
-    overflow-y: auto;
-    overflow-x: hidden;
 }
 
 .field-button {
diff --git a/frontend/app/features/schemas/pages/schema/schema-page.component.scss b/frontend/app/features/schemas/pages/schema/schema-page.component.scss
index afcd1649a..8d0a3c7eb 100644
--- a/frontend/app/features/schemas/pages/schema/schema-page.component.scss
+++ b/frontend/app/features/schemas/pages/schema/schema-page.component.scss
@@ -4,13 +4,13 @@
 .btn-publishing {
     &.disabled,
     &:disabled {
-        @include opacity(1);
+        opacity: 1;
     }
 }
 
 .cards {
-    padding: $panel-padding;
     overflow-y: auto;
+    padding: $panel-padding;
 }
 
 .nav-tabs2 {
diff --git a/frontend/app/features/schemas/pages/schema/schema-preview-urls-form.component.scss b/frontend/app/features/schemas/pages/schema/schema-preview-urls-form.component.scss
index d52d903a6..3724160b0 100644
--- a/frontend/app/features/schemas/pages/schema/schema-preview-urls-form.component.scss
+++ b/frontend/app/features/schemas/pages/schema/schema-preview-urls-form.component.scss
@@ -11,10 +11,9 @@
 }
 
 .col-options {
-    min-width: 6rem;
+    @include force-width(6rem);
 }
 
 .col-name {
-    min-width: 14rem;
-    max-width: 14rem;
+    @include force-width(14rem);
 }
\ No newline at end of file
diff --git a/frontend/app/features/schemas/pages/schema/schema-scripts-form.component.scss b/frontend/app/features/schemas/pages/schema/schema-scripts-form.component.scss
index 220b21514..9f8d22053 100644
--- a/frontend/app/features/schemas/pages/schema/schema-scripts-form.component.scss
+++ b/frontend/app/features/schemas/pages/schema/schema-scripts-form.component.scss
@@ -4,9 +4,9 @@
 :host,
 .inner-form,
 .inner-main {
-    @include flex-box;
-    @include flex-grow(1);
-    @include flex-direction(column);
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
 }
 
 .inner-header,
diff --git a/frontend/app/features/schemas/pages/schema/schema-ui-form.component.scss b/frontend/app/features/schemas/pages/schema/schema-ui-form.component.scss
index d28bf56d4..4ffde1f88 100644
--- a/frontend/app/features/schemas/pages/schema/schema-ui-form.component.scss
+++ b/frontend/app/features/schemas/pages/schema/schema-ui-form.component.scss
@@ -4,9 +4,9 @@
 :host,
 .inner-form,
 .inner-main {
-    @include flex-box;
-    @include flex-grow(1);
-    @include flex-direction(column);
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
 }
 
 .inner-header,
diff --git a/frontend/app/features/schemas/pages/schema/types/string-validation.component.scss b/frontend/app/features/schemas/pages/schema/types/string-validation.component.scss
index 4ce16a3c9..4d9a2db97 100644
--- a/frontend/app/features/schemas/pages/schema/types/string-validation.component.scss
+++ b/frontend/app/features/schemas/pages/schema/types/string-validation.component.scss
@@ -14,8 +14,8 @@
 .control-dropdown {
     & {
         max-width: 285px;
-        min-width: 200px;
         min-height: 220px;
+        min-width: 200px;
     }
 
     h4 {
diff --git a/frontend/app/features/schemas/pages/schemas/schema-form.component.scss b/frontend/app/features/schemas/pages/schemas/schema-form.component.scss
index 89be2f494..6e51df9be 100644
--- a/frontend/app/features/schemas/pages/schemas/schema-form.component.scss
+++ b/frontend/app/features/schemas/pages/schemas/schema-form.component.scss
@@ -4,8 +4,8 @@
 $icon-size: 4.5rem;
 
 .btn-text {
-    margin-top: -1rem;
     margin-left: -.5rem;
+    margin-top: -1rem;
 }
 
 .form-group {
@@ -32,16 +32,17 @@ $icon-size: 4.5rem;
     &-icon {
         & {
             @include border-radius;
-            height: $icon-size;
+            background: transparent;
+            border: 1px solid $color-border;
             color: $color-theme-blue;
             cursor: pointer;
-            border: 1px solid $color-border;
-            background: transparent;
-            margin-right: .5rem;
-            line-height: $icon-size;
             font-size: 1.75rem;
             font-weight: normal;
+            height: $icon-size;
+            line-height: $icon-size;
+            margin-right: .5rem;
             text-align: center;
+            text-decoration: none;
             width: $icon-size;
         }
 
diff --git a/frontend/app/features/schemas/pages/schemas/schemas-page.component.scss b/frontend/app/features/schemas/pages/schemas/schemas-page.component.scss
index 5a29b59c7..f2917dfb1 100644
--- a/frontend/app/features/schemas/pages/schemas/schemas-page.component.scss
+++ b/frontend/app/features/schemas/pages/schemas/schemas-page.component.scss
@@ -4,27 +4,24 @@
 $button-size: calc(2.5rem - 2px);
 
 .subheader-button {
+    @include force-width($button-size);
+    font-size: 1rem;
     height: $button-size;
+    line-height: 2.5rem;
     margin-right: .4rem;
-    min-width: $button-size;
-    max-width: $button-size;
     padding: 0;
-    padding-left: 0;
-    padding-right: 0;
-    font-size: 1rem;
-    line-height: 2.5rem;
 }
 
 .new-category-input {
     & {
-        margin-top: 1rem;
         background: 0;
-        border-width: 0;
         border-bottom-width: 1px;
+        border-width: 0;
+        margin-top: 1rem;
         padding-left: 0;
     }
 
     &:focus {
-        @include box-shadow-none;
+        box-shadow: none;
     }
 }
\ No newline at end of file
diff --git a/frontend/app/features/settings/pages/clients/client-connect-form.component.scss b/frontend/app/features/settings/pages/clients/client-connect-form.component.scss
index aa6cb75f6..a93f684b8 100644
--- a/frontend/app/features/settings/pages/clients/client-connect-form.component.scss
+++ b/frontend/app/features/settings/pages/clients/client-connect-form.component.scss
@@ -3,8 +3,8 @@
 
 .badge {
     @include circle(1.3rem);
-    margin-right: .25rem;
     font-size: 80%;
+    margin-right: .25rem;
     padding-left: 0;
     padding-right: 0;
     vertical-align: top;
@@ -20,12 +20,12 @@
 
 .option {
     @include border-radius;
-    cursor: pointer;
     background: none;
     border: 1px solid $color-border;
+    cursor: pointer;
+    margin-top: .5rem;
     padding: 1rem;
     position: relative;
-    margin-top: .5rem;
 
     &:hover {
         border-color: darken($color-border, 10%);
@@ -33,16 +33,16 @@
 
     i {
         @include absolute(1.6rem, 1rem, auto, auto);
+        color: $color-border;
         font-size: 1.8rem;
         font-weight: 300;
-        color: $color-border;
     }
 }
 
 .access-token {
-    height: 10rem;
+    font-family: monospace;
     font-size: 1rem;
     font-weight: normal;
-    font-family: monospace;
+    height: 10rem;
     resize: none;
 }
\ No newline at end of file
diff --git a/frontend/app/features/settings/pages/contributors/contributor-add-form.component.html b/frontend/app/features/settings/pages/contributors/contributor-add-form.component.html
index 761b717a8..5fc33f1b7 100644
--- a/frontend/app/features/settings/pages/contributors/contributor-add-form.component.html
+++ b/frontend/app/features/settings/pages/contributors/contributor-add-form.component.html
@@ -1,4 +1,4 @@
-<div class="table-items-header" style="margin: 0">
+<div class="table-items-header">
     <form [formGroup]="assignContributorForm.form" (ngSubmit)="assignContributor()">
         <div class="row no-gutters">
             <div class="col">
diff --git a/frontend/app/features/settings/pages/contributors/contributor-add-form.component.scss b/frontend/app/features/settings/pages/contributors/contributor-add-form.component.scss
index dfcfab111..55a7f9849 100644
--- a/frontend/app/features/settings/pages/contributors/contributor-add-form.component.scss
+++ b/frontend/app/features/settings/pages/contributors/contributor-add-form.component.scss
@@ -12,7 +12,7 @@
 }
 
 .table-items-header {
-    border-width: 0;
-    border-bottom-width: 2px;
+    border: 0;
+    border-bottom: 2px solid $color-border;
     margin: 0;
 }
\ No newline at end of file
diff --git a/frontend/app/features/settings/pages/languages/language.component.scss b/frontend/app/features/settings/pages/languages/language.component.scss
index 674c37356..3c5f53ab9 100644
--- a/frontend/app/features/settings/pages/languages/language.component.scss
+++ b/frontend/app/features/settings/pages/languages/language.component.scss
@@ -17,19 +17,19 @@ $field-header: #e7ebef;
     &-languages {
         @include border-radius;
         background: $color-border;
-        border-top: .5rem solid $color-border;
         border-bottom: 1px solid $color-border;
+        border-top: .5rem solid $color-border;
         padding: 0 .5rem;
     }
 
     &-language {
         @include border-radius(2px);
-        padding: .5rem;
         background: $color-dark-foreground;
         border: 0;
+        line-height: 2rem;
         margin: 0;
         margin-bottom: .5rem;
-        line-height: 2rem;
+        padding: .5rem;
     }
 
     &-label {
diff --git a/frontend/app/features/settings/pages/more/more-page.component.scss b/frontend/app/features/settings/pages/more/more-page.component.scss
index d35443598..eaacb7164 100644
--- a/frontend/app/features/settings/pages/more/more-page.component.scss
+++ b/frontend/app/features/settings/pages/more/more-page.component.scss
@@ -3,9 +3,9 @@
 
 .app {
     &-image {
-        position: relative;
-        min-width: 150px;
         min-height: 150px;
+        min-width: 150px;
+        position: relative;
     }
 
     &-image-remove {
@@ -24,17 +24,17 @@
 
 @mixin overlay {
     & {
-        @include transition(opacity .4s ease);
         @include absolute(0, 0, 0, 0);
-        @include opacity(0);
-        @include flex-box;
         color: $color-dark-foreground;
+        display: flex;
+        opacity: 0;
+        transition: opacity .4s ease;
     }
 
     &-background {
         @include absolute(0, 0, 0, 0);
-        @include opacity(.7);
         background: $color-dark-black;
+        opacity: .7;
     }
 }
 
@@ -55,15 +55,15 @@
     }
 
     &-text {
-        position: absolute;
         font-size: 1.25rem;
         font-weight: lighter;
+        position: absolute;
     }
 }
 
 .drag {
     .drop-overlay {
-        @include opacity(1);
+        opacity: 1;
     }
 
     .app-image-remove {
diff --git a/frontend/app/features/settings/pages/patterns/pattern.component.scss b/frontend/app/features/settings/pages/patterns/pattern.component.scss
index d0064ba3d..d86c13db6 100644
--- a/frontend/app/features/settings/pages/patterns/pattern.component.scss
+++ b/frontend/app/features/settings/pages/patterns/pattern.component.scss
@@ -2,11 +2,10 @@
 @import '_mixins';
 
 .col-options {
-    min-width: 6rem;
+    @include force-width(6rem);
 }
 
 .col-name,
 .col-message {
-    min-width: 10rem;
-    max-width: 10rem;
+    @include force-width(10rem);
 }
\ No newline at end of file
diff --git a/frontend/app/features/settings/pages/plans/plan.component.scss b/frontend/app/features/settings/pages/plans/plan.component.scss
index 09ed842c3..7242ddf06 100644
--- a/frontend/app/features/settings/pages/plans/plan.component.scss
+++ b/frontend/app/features/settings/pages/plans/plan.component.scss
@@ -3,15 +3,15 @@
 
 .plan {
     & {
-        min-width: 13rem;
-        max-width: 20rem;
         margin: .5rem;
+        max-width: 20rem;
+        min-width: 13rem;
     }
 
     &-price {
         color: $color-theme-blue;
-        margin-top: 0;
         margin-bottom: 0;
+        margin-top: 0;
     }
 
     &-selected {
diff --git a/frontend/app/features/settings/pages/plans/plans-page.component.scss b/frontend/app/features/settings/pages/plans/plans-page.component.scss
index 6079c4b72..cefe5d808 100644
--- a/frontend/app/features/settings/pages/plans/plans-page.component.scss
+++ b/frontend/app/features/settings/pages/plans/plans-page.component.scss
@@ -3,15 +3,15 @@
 
 .plan {
     & {
-        min-width: 13rem;
-        max-width: 20rem;
         margin: .5rem;
+        max-width: 20rem;
+        min-width: 13rem;
     }
 
     &-price {
         color: $color-theme-blue;
-        margin-top: 0;
         margin-bottom: 0;
+        margin-top: 0;
     }
 
     &-selected {
diff --git a/frontend/app/features/settings/pages/roles/role.component.scss b/frontend/app/features/settings/pages/roles/role.component.scss
index cd34bfd31..fc0c0ecff 100644
--- a/frontend/app/features/settings/pages/roles/role.component.scss
+++ b/frontend/app/features/settings/pages/roles/role.component.scss
@@ -14,9 +14,9 @@
 .prefix {
     border: 0;
     border-bottom: 1px solid $color-input;
+    color: $color-text-decent;
     padding-left: 0;
     padding-right: 0;
-    color: $color-text-decent;
 }
 
 .rule-name {
diff --git a/frontend/app/features/settings/pages/workflows/workflow-step.component.scss b/frontend/app/features/settings/pages/workflows/workflow-step.component.scss
index 426813d3f..48e11ccd5 100644
--- a/frontend/app/features/settings/pages/workflows/workflow-step.component.scss
+++ b/frontend/app/features/settings/pages/workflows/workflow-step.component.scss
@@ -17,44 +17,40 @@
     }
 
     .col-arrow {
-        min-width: 2rem;
-        max-width: 2rem;
+        @include force-width(2rem);
     }
 
     .col-button {
-        min-width: 3rem;
-        max-width: 3rem;
+        @include force-width(3rem);
     }
 
     .col-step {
-        min-width: 10rem;
-        max-width: 10rem;
+        @include force-width(10rem);
     }
 
     .col-roles {
-        min-width: 18rem;
-        max-width: 18rem;
+        @include force-width(18rem);
     }
 
     .transition {
         & {
-            margin-top: .25rem;
-            margin-bottom: .5rem;
             line-height: 2.2rem;
+            margin-bottom: .5rem;
+            margin-top: .25rem;
         }
 
         &-to {
+            line-height: 1.2rem;
             padding: .5rem .75rem;
             padding-right: 0;
-            line-height: 1.2rem;
         }
     }
 }
 
 .step {
     & {
-        margin-bottom: 1.5rem;
         border-bottom: 1px solid $color-border;
+        margin-bottom: 1.5rem;
     }
 
     &-inner {
@@ -72,16 +68,16 @@
 
 .btn-initial {
     & {
-        visibility: hidden;
         line-height: 1.6rem;
         padding-left: 0;
         padding-right: 0;
-        width: 2rem;
         text-align: center;
+        visibility: hidden;
+        width: 2rem;
     }
 
     &:disabled {
-        @include opacity(1);
+        opacity: 1;
     }
 
     &.active {
@@ -91,15 +87,15 @@
 
 .transition-prevent-updates {
     & {
-        margin-top: .25rem;
-        margin-bottom: 1rem;
         line-height: 2.5rem;
+        margin-bottom: 1rem;
+        margin-top: .25rem;
     }
 
     &-to {
+        line-height: 1.2rem;
         padding: .5rem .75rem;
         padding-right: 0;
-        line-height: 1.2rem;
     }
 }
 
diff --git a/frontend/app/features/settings/pages/workflows/workflow-transition.component.scss b/frontend/app/features/settings/pages/workflows/workflow-transition.component.scss
index df6f1397f..c7f0dcea7 100644
--- a/frontend/app/features/settings/pages/workflows/workflow-transition.component.scss
+++ b/frontend/app/features/settings/pages/workflows/workflow-transition.component.scss
@@ -3,11 +3,11 @@
 
 .select-placeholder {
     @include absolute(0, 0, 0, 0);
+    border: 1px solid transparent;
     color: $color-theme-secondary;
+    line-height: 1.2rem;
     padding: .5rem .75rem;
     pointer-events: none;
-    line-height: 1.2rem;
-    border: 1px solid transparent;
 }
 
 .form-control {
diff --git a/frontend/app/features/settings/pages/workflows/workflow.component.scss b/frontend/app/features/settings/pages/workflows/workflow.component.scss
index b39e484f1..bccddffa8 100644
--- a/frontend/app/features/settings/pages/workflows/workflow.component.scss
+++ b/frontend/app/features/settings/pages/workflows/workflow.component.scss
@@ -14,13 +14,11 @@
 }
 
 .col-form-label {
-    min-width: 4rem;
-    max-width: 4rem;
+    @include force-width(4rem);
 }
 
 .col-tags {
-    padding: .6rem 1rem;
-    padding-bottom: 0;
+    padding: .6rem 1rem 0;
 }
 
 .form-group {
diff --git a/frontend/app/features/settings/settings-area.component.scss b/frontend/app/features/settings/settings-area.component.scss
index b559c6580..84549cd07 100644
--- a/frontend/app/features/settings/settings-area.component.scss
+++ b/frontend/app/features/settings/settings-area.component.scss
@@ -2,9 +2,9 @@
 @import '_mixins';
 
 .nav-link {
-    position: relative;
-    padding-top: .6rem;
     padding-bottom: .6rem;
+    padding-top: .6rem;
+    position: relative;
 }
 
 .header-link {
diff --git a/frontend/app/framework/angular/code.component.scss b/frontend/app/framework/angular/code.component.scss
index 2046ad9a3..84af62494 100644
--- a/frontend/app/framework/angular/code.component.scss
+++ b/frontend/app/framework/angular/code.component.scss
@@ -3,17 +3,17 @@
 
 .code {
     background: $color-code-background;
+    margin: .25rem 0;
     padding-left: .5rem;
     padding-right: 3rem;
-    margin: .25rem 0;
 }
 
 .code,
 .code-copy {
     font-size: .8rem;
-    padding-top: .25rem;
-    padding-bottom: .25rem;
     min-height: 27px;
+    padding-bottom: .25rem;
+    padding-top: .25rem;
 }
 
 .copy-container {
@@ -23,11 +23,11 @@
 .code-copy {
     & {
         @include absolute(0, 0, auto, auto);
-        border: 0;
         background: darken($color-border-dark, 30%);
+        border: 0;
+        color: $color-dark-foreground;
         padding-left: .375rem;
         padding-right: .375rem;
-        color: $color-dark-foreground;
     }
 
     &:focus {
diff --git a/frontend/app/framework/angular/external-link.directive.ts b/frontend/app/framework/angular/external-link.directive.ts
index 2f758a5b1..5c9533789 100644
--- a/frontend/app/framework/angular/external-link.directive.ts
+++ b/frontend/app/framework/angular/external-link.directive.ts
@@ -21,16 +21,18 @@ export class ExternalLinkDirective implements AfterViewInit {
     }
 
     public ngAfterViewInit() {
-        this.renderer.setProperty(this.element.nativeElement, 'target', '_blank');
-        this.renderer.setProperty(this.element.nativeElement, 'rel', 'noopener');
+        const element = this.element.nativeElement;
+
+        this.renderer.setProperty(element, 'target', '_blank');
+        this.renderer.setProperty(element, 'rel', 'noopener');
 
         if (this.type !== 'noicon') {
             const icon = this.renderer.createElement('i');
 
             this.renderer.addClass(icon, 'icon-external-link');
-            this.renderer.addClass(icon, 'ml-1');
 
-            this.renderer.appendChild(this.element.nativeElement, icon);
+            this.renderer.appendChild(element, this.renderer.createText(' '));
+            this.renderer.appendChild(element, icon);
         }
     }
 }
\ No newline at end of file
diff --git a/frontend/app/framework/angular/forms/checkbox-group.component.scss b/frontend/app/framework/angular/forms/checkbox-group.component.scss
index 773582ba7..ae6844c67 100644
--- a/frontend/app/framework/angular/forms/checkbox-group.component.scss
+++ b/frontend/app/framework/angular/forms/checkbox-group.component.scss
@@ -3,8 +3,8 @@
 
 .form-check {
     display: block;
-    margin-left: 0;
     margin-bottom: .5rem;
+    margin-left: 0;
 }
 
 .form-check-input {
diff --git a/frontend/app/framework/angular/forms/control-errors.component.scss b/frontend/app/framework/angular/forms/control-errors.component.scss
index 7308d860c..cb1f07fcd 100644
--- a/frontend/app/framework/angular/forms/control-errors.component.scss
+++ b/frontend/app/framework/angular/forms/control-errors.component.scss
@@ -2,7 +2,6 @@
 @import '_vars';
 
 :host {
+    @include force-width(100%);
     align-self: flex-start;
-    min-width: 100%;
-    max-width: 100%;
 }
\ No newline at end of file
diff --git a/frontend/app/framework/angular/forms/date-time-editor.component.scss b/frontend/app/framework/angular/forms/date-time-editor.component.scss
index 1a009a5e9..363464f90 100644
--- a/frontend/app/framework/angular/forms/date-time-editor.component.scss
+++ b/frontend/app/framework/angular/forms/date-time-editor.component.scss
@@ -23,8 +23,8 @@
 .input-group {
     .form-control {
         &:last-child {
-            position: relative;
             padding-right: 2rem;
+            position: relative;
         }
     }
 
@@ -47,6 +47,6 @@
     }
 
     &:focus {
-        @include box-shadow-none;
+        box-shadow: none;
     }
 }
\ No newline at end of file
diff --git a/frontend/app/framework/angular/forms/dropdown.component.scss b/frontend/app/framework/angular/forms/dropdown.component.scss
index 33057fafb..0a5e383da 100644
--- a/frontend/app/framework/angular/forms/dropdown.component.scss
+++ b/frontend/app/framework/angular/forms/dropdown.component.scss
@@ -22,28 +22,28 @@ $color-input-disabled: #eef1f4;
 }
 
 .control-dropdown {
-    max-width: 40rem;
     max-height: none;
+    max-width: 40rem;
     overflow-y: hidden;
 }
 
 .control-dropdown-items {
-    overflow-y: auto;
     max-height: 15rem;
+    overflow-y: auto;
 }
 
 .selection {
     & {
-        position: relative;
         overflow: hidden;
+        position: relative;
     }
 
     .control-dropdown-item {
         @include absolute(0, 1rem, 0, 0);
+        line-height: 1.2rem;
         padding-bottom: 0;
         pointer-events: none;
         position: absolute;
-        line-height: 1.2rem;
     }
 
     .icon-caret-down {
diff --git a/frontend/app/framework/angular/forms/editable-title.component.scss b/frontend/app/framework/angular/forms/editable-title.component.scss
index 8546568ef..b59469469 100644
--- a/frontend/app/framework/angular/forms/editable-title.component.scss
+++ b/frontend/app/framework/angular/forms/editable-title.component.scss
@@ -3,41 +3,28 @@
 
 .title {
     & {
+        @include hover-visible('.title-edit', inline);
         position: relative;
     }
 
     &-edit {
         color: $color-border-dark;
-        display: none;
-        font-size: .9rem;
-        font-weight: normal;
+        cursor: pointer;
         padding: .6rem .25rem;
-        border: 0;
-        background: transparent;
-        vertical-align: baseline;
     }
 
     &-name {
-        font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+        display: inline;
         font-size: 1.2rem;
         font-weight: normal;
-        display: inline;
-        margin: 0;
     }
 
     &-view {
         @include truncate;
+        border-bottom: 1px solid transparent;
+        border-top: 0;
         padding: .375rem 0;
         position: absolute;
-        border-top: 0;
-        border-bottom: 1px solid transparent;
-        line-height: 1.5rem;
-    }
-
-    &:hover {
-        .title-edit {
-            display: inline;
-        }
     }
 }
 
diff --git a/frontend/app/framework/angular/forms/iframe-editor.component.scss b/frontend/app/framework/angular/forms/iframe-editor.component.scss
index a095b5177..e3678801d 100644
--- a/frontend/app/framework/angular/forms/iframe-editor.component.scss
+++ b/frontend/app/framework/angular/forms/iframe-editor.component.scss
@@ -2,7 +2,7 @@
 @import '_vars';
 
 iframe {
-    border: 0;
     background: 0;
+    border: 0;
     overflow: hidden;
 }
\ No newline at end of file
diff --git a/frontend/app/framework/angular/forms/json-editor.component.scss b/frontend/app/framework/angular/forms/json-editor.component.scss
index b2bd14707..f0c225b44 100644
--- a/frontend/app/framework/angular/forms/json-editor.component.scss
+++ b/frontend/app/framework/angular/forms/json-editor.component.scss
@@ -7,7 +7,6 @@ $editor-height: 30rem;
 
 :host ::ng-deep {
     .ace_editor {
-        background: $color-dark-foreground;
         border: 1px solid $color-input;
 
         &.no-border {
diff --git a/frontend/app/framework/angular/forms/stars.component.scss b/frontend/app/framework/angular/forms/stars.component.scss
index 324a3ee10..557ae22af 100644
--- a/frontend/app/framework/angular/forms/stars.component.scss
+++ b/frontend/app/framework/angular/forms/stars.component.scss
@@ -9,9 +9,6 @@ $color-gold: #ffd700;
 
 .stars {
     & {
-        display: inline-block;
-        border: 0;
-        height: 2.4rem;
         line-height: 2.4rem;
     }
 
@@ -26,17 +23,16 @@ $color-gold: #ffd700;
 
 .star {
     & {
-        background: transparent;
-        border: 0;
         line-height: 1px;
         vertical-align: middle;
     }
 
     &::before {
-        display: inline-block;
         color: $color-gold;
         content: '☆';
+        display: inline-block;
         font-size: 1.8rem;
+        font-weight: normal;
         line-height: 1px;
     }
 
diff --git a/frontend/app/framework/angular/forms/tag-editor.component.scss b/frontend/app/framework/angular/forms/tag-editor.component.scss
index 62a67411e..57c96273b 100644
--- a/frontend/app/framework/angular/forms/tag-editor.component.scss
+++ b/frontend/app/framework/angular/forms/tag-editor.component.scss
@@ -2,6 +2,7 @@
 @import '_vars';
 
 $focus-color: #b3d3ff;
+$focus-shadow: rgba(51, 137, 255, .25);
 
 :host {
     text-align: left;
@@ -22,8 +23,8 @@ $focus-color: #b3d3ff;
     }
 
     &.focus {
-        @include box-shadow-raw(0 0 0 .2rem rgba(51, 137, 255, .25));
         border-color: $focus-color;
+        box-shadow: 0 0 0 .2rem $focus-shadow;
     }
 
     &.single-line {
@@ -40,26 +41,26 @@ $focus-color: #b3d3ff;
 div {
     &.form-control {
         height: auto;
+        position: relative;
         text-align: left;
         text-decoration: none;
-        position: relative;
     }
 }
 
 .blank {
     & {
         @include placeholder-color($color-input-placeholder);
-        padding: 0;
-        border: 0;
         background: transparent;
-        min-width: 50px;
-        max-width: 100%;
+        border: 0;
         height: auto !important;
+        max-width: 100%;
+        min-width: 50px;
+        padding: 0;
     }
 
     &:focus,
     &.focus {
-        @include box-shadow-none;
+        box-shadow: none;
         outline: none;
     }
 
@@ -88,15 +89,15 @@ div {
 .item {
     & {
         @include border-radius(10px);
-        color: $color-dark-foreground;
-        cursor: default;
-        padding: 1px .6rem;
         background: $color-theme-blue;
         border: 0;
-        height: 1.25rem;
+        color: $color-dark-foreground;
+        cursor: default;
         font-size: .8rem;
         font-weight: normal;
+        height: 1.25rem;
         margin-right: 2px;
+        padding: 1px .6rem;
         white-space: nowrap;
     }
 
diff --git a/frontend/app/framework/angular/forms/toggle.component.scss b/frontend/app/framework/angular/forms/toggle.component.scss
index 66bb0f905..1af4cb40a 100644
--- a/frontend/app/framework/angular/forms/toggle.component.scss
+++ b/frontend/app/framework/angular/forms/toggle.component.scss
@@ -10,23 +10,23 @@ $toggle-button-size: $toggle-height - .25rem;
         @include circle($toggle-button-size);
         @include box-shadow(0, 2px, 2px, .2);
         @include absolute($toggle-height * .5, auto, auto, $toggle-width * .5);
-        @include transition(left .3s ease);
         background: $color-dark-foreground;
         border: 0;
         margin-left: -$toggle-button-size * .5;
         margin-top: -$toggle-button-size * .5;
+        transition: left .3s ease;
     }
 
     &-container {
         & {
             @include border-radius($toggle-height * .5);
             @include box-shadow-inner;
-            @include transition(background-color .3s ease);
-            display: inline-block;
-            position: relative;
             background: lighten($color-border, 6%);
             border: 0;
+            display: inline-block;
             height: $toggle-height;
+            position: relative;
+            transition: background-color .3s ease;
             width: $toggle-width;
         }
 
diff --git a/frontend/app/framework/angular/list-view.component.scss b/frontend/app/framework/angular/list-view.component.scss
index 0358e3f70..2766c5663 100644
--- a/frontend/app/framework/angular/list-view.component.scss
+++ b/frontend/app/framework/angular/list-view.component.scss
@@ -2,9 +2,9 @@
 @import '_vars';
 
 :host {
-    @include flex-box;
-    @include flex-direction(column);
-    @include flex-grow(1);
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
     overflow: hidden;
     padding: 0;
     position: relative;
@@ -18,17 +18,17 @@
     &-content,
     &-header,
     &-footer {
-        @include transition(opacity .2 ease);
         padding: 0 $panel-padding;
+        transition: opacity .2 ease;
     }
 
     &-content {
-        @include flex-grow(1);
+        flex-grow: 1;
         padding: $panel-padding;
 
         &.tabled {
-            padding-top: .5rem;
             padding-bottom: .5rem;
+            padding-top: .5rem;
         }
 
         &.normal {
@@ -36,17 +36,17 @@
         }
 
         &.synced {
-            overflow-y: auto;
             overflow-x: auto;
+            overflow-y: auto;
             padding-right: 0;
         }
     }
 
     &-header {
         & {
-            @include flex-shrink(0);
             border: 0;
             border-bottom: 1px solid $color-border;
+            flex-shrink: 0;
             overflow-x: hidden;
             overflow-y: hidden;
         }
@@ -70,9 +70,9 @@
 
     &-footer {
         & {
-            @include flex-shrink(1);
             border: 0;
             border-top: 1px solid $color-border;
+            flex-shrink: 0;
         }
 
         /deep/ .pagination {
@@ -87,7 +87,7 @@
 }
 
 .loading-indicator {
-    @include opacity(.5);
+    opacity: .5;
 }
 
 .loader {
diff --git a/frontend/app/framework/angular/modals/dialog-renderer.component.scss b/frontend/app/framework/angular/modals/dialog-renderer.component.scss
index 7b093f020..34d984da6 100644
--- a/frontend/app/framework/angular/modals/dialog-renderer.component.scss
+++ b/frontend/app/framework/angular/modals/dialog-renderer.component.scss
@@ -5,10 +5,9 @@
 
 .notification-container {
     & {
+        @include force-width(30rem);
+        @include fixed;
         margin: .625rem;
-        max-width: 30rem;
-        min-width: 30rem;
-        position: fixed;
         z-index: 100000;
     }
 
@@ -45,13 +44,12 @@ $caret-size: 6px;
 
 .tooltip2 {
     & {
-        color: $color-dark-foreground;
         background: $color-tooltip;
-        border: 0;
+        color: $color-dark-foreground;
         font-size: .9rem;
         font-weight: normal;
-        white-space: nowrap;
         padding: .5rem;
+        white-space: nowrap;
     }
 
     &-left {
diff --git a/frontend/app/framework/angular/modals/modal-dialog.component.html b/frontend/app/framework/angular/modals/modal-dialog.component.html
index 4d49c1370..0e24d5628 100644
--- a/frontend/app/framework/angular/modals/modal-dialog.component.html
+++ b/frontend/app/framework/angular/modals/modal-dialog.component.html
@@ -19,8 +19,8 @@
                 <ng-content select="[content]"></ng-content>
             </div>
 
-            <div class="modal-footer" *ngIf="showFooter">
-                <div class="clearfix" #footerElement>
+            <div class="modal-footer" #footerElement *ngIf="showFooter">
+                <div class="clearfix">
                     <ng-content select="[footer]"></ng-content>
                 </div>
             </div>
diff --git a/frontend/app/framework/angular/modals/modal-dialog.component.scss b/frontend/app/framework/angular/modals/modal-dialog.component.scss
index d40eed85d..b0c4a1e0f 100644
--- a/frontend/app/framework/angular/modals/modal-dialog.component.scss
+++ b/frontend/app/framework/angular/modals/modal-dialog.component.scss
@@ -6,8 +6,8 @@
 }
 
 .flexed {
-    @include flex-box;
-    @include flex-grow(1);
-    @include flex-direction(column);
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
     padding: 0;
 }
\ No newline at end of file
diff --git a/frontend/app/framework/angular/modals/modal-dialog.component.ts b/frontend/app/framework/angular/modals/modal-dialog.component.ts
index 0b6fd7366..eaa3411fb 100644
--- a/frontend/app/framework/angular/modals/modal-dialog.component.ts
+++ b/frontend/app/framework/angular/modals/modal-dialog.component.ts
@@ -46,7 +46,7 @@ export class ModalDialogComponent implements AfterViewInit {
     @ViewChild('tabsElement', { static: false })
     public tabsElement: ElementRef<ParentNode>;
 
-    @ViewChild('tabsElement', { static: false })
+    @ViewChild('footerElement', { static: false })
     public footerElement: ElementRef<ParentNode>;
 
     constructor(
@@ -56,7 +56,7 @@ export class ModalDialogComponent implements AfterViewInit {
 
     public ngAfterViewInit() {
         this.hideWhenEmpty(this.tabsElement);
-        this.hideWhenEmpty(this.footerElement);
+        this.hideParentWhenEmpty(this.footerElement);
     }
 
     private hideWhenEmpty(element: ElementRef) {
@@ -69,6 +69,16 @@ export class ModalDialogComponent implements AfterViewInit {
         }
     }
 
+    private hideParentWhenEmpty(element: ElementRef) {
+        if (element && element.nativeElement) {
+            const isEmpty = element.nativeElement.children.length === 0;
+
+            if (isEmpty) {
+                this.renderer.setStyle(element.nativeElement.parentNode, 'display', 'none');
+            }
+        }
+    }
+
     public emitClose() {
         this.close.emit();
     }
diff --git a/frontend/app/framework/angular/modals/onboarding-tooltip.component.html b/frontend/app/framework/angular/modals/onboarding-tooltip.component.html
index df9a86098..1be37bf2f 100644
--- a/frontend/app/framework/angular/modals/onboarding-tooltip.component.html
+++ b/frontend/app/framework/angular/modals/onboarding-tooltip.component.html
@@ -1,9 +1,9 @@
 <ng-container *sqxModal="tooltipModal">
     <div class="onboarding-rect" [sqxAnchoredTo]="for" [offset]="4" [position]="'full'"></div>
     <div class="onboarding-help" [sqxAnchoredTo]="for" [offset]="4" [position]="position" @fade>
-        <div class="onboarding-text">
+        <small class="onboarding-text">
             <ng-content></ng-content>
-        </div>
+        </small>
 
         <div class="onboarding-buttons clearfix">
             <button (click)="hideAll()" class="btn btn-text-primary btn-sm float-left">
diff --git a/frontend/app/framework/angular/modals/onboarding-tooltip.component.scss b/frontend/app/framework/angular/modals/onboarding-tooltip.component.scss
index 2b991d2d7..f29416548 100644
--- a/frontend/app/framework/angular/modals/onboarding-tooltip.component.scss
+++ b/frontend/app/framework/angular/modals/onboarding-tooltip.component.scss
@@ -1,18 +1,18 @@
 @import '_mixins';
 @import '_vars';
 
+$hide-shadow: rgba(0, 0, 0, .5);
+
 .onboarding {
     &-help {
         @include border-radius;
         background: $color-tooltip;
-        border: 0;
         max-width: 20rem;
-        padding: .75rem;
+        min-width: 10rem;
+        padding: .75rem 1rem;
     }
 
     &-text {
-        font-size: .9rem;
-        font-weight: normal;
         color: $color-dark-foreground;
     }
 
@@ -21,6 +21,6 @@
     }
 
     &-rect {
-        @include box-shadow-raw(0 0 0 9999px rgba(0, 0, 0, .5));
+        box-shadow: 0 0 0 9999px $hide-shadow;
     }
 }
\ No newline at end of file
diff --git a/frontend/app/framework/angular/status-icon.component.scss b/frontend/app/framework/angular/status-icon.component.scss
index f3cbd164a..25c837688 100644
--- a/frontend/app/framework/angular/status-icon.component.scss
+++ b/frontend/app/framework/angular/status-icon.component.scss
@@ -7,26 +7,26 @@ $circle-size-lg: 2.8rem;
 
 .status {
     & {
-        text-align: center;
-        display: inline-block;
         background: $color-border;
         border: 0;
         color: $color-dark-foreground;
+        display: inline-block;
+        text-align: center;
         vertical-align: middle;
     }
 
     &.sm {
         @include circle($circle-size-sm);
-        line-height: $circle-size-sm + .1rem;
         font-size: .5 * $circle-size-sm;
         font-weight: normal;
+        line-height: $circle-size-sm + .1rem;
     }
 
     &.lg {
         @include circle($circle-size-lg);
-        line-height: $circle-size-lg + .1rem;
         font-size: .5 * $circle-size-lg;
         font-weight: normal;
+        line-height: $circle-size-lg + .1rem;
     }
 
     &-pending {
diff --git a/frontend/app/shared/components/asset-dialog.component.scss b/frontend/app/shared/components/asset-dialog.component.scss
index 7e649ca02..845a0b88f 100644
--- a/frontend/app/shared/components/asset-dialog.component.scss
+++ b/frontend/app/shared/components/asset-dialog.component.scss
@@ -15,6 +15,6 @@
     }
 
     &:focus {
-        @include box-shadow-none;
+        box-shadow: none;
     }
 }
\ No newline at end of file
diff --git a/frontend/app/shared/components/asset-folder.component.scss b/frontend/app/shared/components/asset-folder.component.scss
index c0a1cbb47..3de377410 100644
--- a/frontend/app/shared/components/asset-folder.component.scss
+++ b/frontend/app/shared/components/asset-folder.component.scss
@@ -9,23 +9,23 @@
 
 img {
     height: 1.5rem;
-    margin-right: 1rem;
     margin-bottom: .25rem;
+    margin-right: 1rem;
 }
 
 .card {
     & {
-        border-width: 1px;
         border-bottom-width: 1px;
+        border-width: 1px;
         width: $asset-width;
     }
 
     &-body {
         font-size: 1.1rem;
-        padding-top: .75rem;
+        line-height: 2.2rem;
         padding-bottom: .75rem;
         padding-right: .5rem;
-        line-height: 2.2rem;
+        padding-top: .75rem;
     }
 }
 
diff --git a/frontend/app/shared/components/asset-uploader.component.scss b/frontend/app/shared/components/asset-uploader.component.scss
index 4142a837f..172aee064 100644
--- a/frontend/app/shared/components/asset-uploader.component.scss
+++ b/frontend/app/shared/components/asset-uploader.component.scss
@@ -13,35 +13,35 @@
 
         .nav-link {
             color: $color-dark-foreground;
-            padding-top: 0;
             padding-bottom: 0;
+            padding-top: 0;
         }
     }
 }
 
 .icon-upload-3 {
-    vertical-align: middle;
     font-size: 1.4rem;
     font-weight: lighter;
     padding-right: .5rem;
+    vertical-align: middle;
 }
 
 .dropdown-menu {
     @include absolute(2.6rem, 0, auto, auto);
     display: block;
-    min-width: 30rem;
     max-width: 60%;
     min-height: 4rem;
+    min-width: 30rem;
     padding: 1rem;
 }
 
 .uploads {
     & {
-        border: 2px solid transparent;
         background: none;
+        border: 2px solid transparent;
         min-height: 2rem;
     }
-    
+
     &-empty {
         line-height: 1.8rem;
     }
@@ -49,9 +49,8 @@
 
 .upload {
     & {
+        @include force-height(2rem);
         line-height: 2rem;
-        min-height: 2rem;
-        max-height: 2rem;
         margin-bottom: .5rem;
     }
 
@@ -61,8 +60,8 @@
 
     &-name {
         @include truncate;
-        padding-right: .5rem;
         padding-left: .5rem;
+        padding-right: .5rem;
     }
 }
 
@@ -71,14 +70,13 @@ $circle-size: 1.6rem;
 .upload-status {
     & {
         @include circle($circle-size);
-        display: inline-block;
-        line-height: $circle-size + .1rem;
-        text-align: center;
-        font-size: .4 * $circle-size;
-        font-weight: normal;
         background: $color-border;
         color: $color-dark-foreground;
         cursor: none;
+        font-size: .4 * $circle-size;
+        font-weight: normal;
+        line-height: $circle-size + .1rem;
+        text-align: center;
     }
 
     &-running {
diff --git a/frontend/app/shared/components/asset.component.scss b/frontend/app/shared/components/asset.component.scss
index 92665980e..3c8972d14 100644
--- a/frontend/app/shared/components/asset.component.scss
+++ b/frontend/app/shared/components/asset.component.scss
@@ -6,34 +6,34 @@
 $list-height: 2.25rem;
 
 @mixin overlay-container {
-    position: relative;
-    padding: 0;
     overflow: hidden;
+    padding: 0;
+    position: relative;
 }
 
 @mixin overlay {
     & {
-        @include transition(opacity .4s ease);
         @include absolute(0, 0, 0, 0);
-        @include opacity(0);
-        @include flex-box;
         color: $color-dark-foreground;
+        display: flex;
+        opacity: 0;
+        transition: opacity .4s ease;
     }
 
     &-background {
         @include absolute(0, 0, 0, 0);
-        @include opacity(.7);
         background: $color-dark-black;
+        opacity: .7;
     }
 }
 
 @mixin asset-type {
-    padding: .1rem .25rem;
-    text-transform: uppercase;
+    color: $color-dark-foreground;
+    cursor: none;
     font-size: .7rem;
     font-weight: normal;
-    cursor: none;
-    color: $color-dark-foreground;
+    padding: .1rem .25rem;
+    text-transform: uppercase;
 }
 
 :host(.isListView) {
@@ -42,6 +42,7 @@ $list-height: 2.25rem;
 
 :host ::ng-deep {
     .form-control {
+
         &.disabled,
         &:disabled {
             background: transparent;
@@ -52,26 +53,25 @@ $list-height: 2.25rem;
 .card {
     & {
         @include overlay-container;
-        width: $asset-width;
         border-top-width: 1px;
         border-width: 1px;
         margin-bottom: 1rem;
         margin-right: .5rem;
+        width: $asset-width;
     }
 
     &-body {
-        position: relative;
+        @include force-height($asset-header);
         padding: 1rem;
-        min-height: $asset-header;
-        max-height: $asset-header;
+        position: relative;
     }
 
     &-footer {
-        position: relative;
+        max-height: auto;
+        min-height: $asset-footer;
         padding: 1rem;
         padding-top: .5rem;
-        min-height: $asset-footer;
-        max-height: auto;
+        position: relative;
     }
 }
 
@@ -87,24 +87,25 @@ $list-height: 2.25rem;
 
         &:hover {
             .overlay {
-                @include opacity(1);
+                opacity: 1;
             }
 
             .file-type {
-                @include opacity(0);
+                opacity: 0;
             }
         }
     }
 
     &-type {
-        @include transition(opacity .4s ease);
         @include absolute(1rem, auto, auto, 1rem);
         @include asset-type;
         @include border-radius(3px);
         background: $color-dark-black;
+        transition: opacity .4s ease;
     }
 
-    &-name, &-info {
+    &-name,
+    &-info {
         @include truncate;
     }
 
@@ -125,10 +126,10 @@ $list-height: 2.25rem;
     }
 
     &-icon {
-        padding: 2rem;
         background: $color-asset-bg;
         border: 0;
         height: $asset-image;
+        padding: 2rem;
         text-align: center;
     }
 }
@@ -147,10 +148,10 @@ $list-height: 2.25rem;
 
         a {
             & {
+                color: darken($color-dark-foreground, 10%);
+                cursor: pointer;
                 font-size: 1.1rem;
                 font-weight: normal;
-                cursor: pointer;
-                color: darken($color-dark-foreground, 10%);
             }
 
             &:hover {
@@ -175,24 +176,24 @@ $list-height: 2.25rem;
 }
 
 .editable {
-    height: 2rem;
-    border-top: 0;
     border-bottom: 1px solid transparent;
+    border-top: 0;
+    height: 2rem;
 }
 
 .table-items-row {
     & {
-        position: relative;
-        padding-left: $list-height + 3rem;
         height: $list-height + 2rem;
+        padding-left: $list-height + 3rem;
+        position: relative;
     }
 
     .left-border {
         & {
             @include absolute(0, auto, auto, 0);
-            height: $list-height + 2rem;
-            border: 0;
             background: $color-border;
+            border: 0;
+            height: $list-height + 2rem;
             width: 4px;
         }
 
@@ -203,8 +204,8 @@ $list-height: 2.25rem;
 
     .image {
         @include absolute(0, auto, 0, 4px);
-        border: 0;
         background: $color-asset-bg;
+        border: 0;
         width: $list-height + 2rem;
     }
 
@@ -261,19 +262,19 @@ $list-height: 2.25rem;
     }
 
     &-text {
-        position: absolute;
         font-size: 1.25rem;
         font-weight: lighter;
+        position: absolute;
     }
 }
 
 .drag {
     .drop-overlay {
-        @include opacity(1);
+        opacity: 1;
     }
 
     .file-type {
-        @include opacity(0);
+        opacity: 0;
     }
 }
 
diff --git a/frontend/app/shared/components/assets-list.component.scss b/frontend/app/shared/components/assets-list.component.scss
index d77265223..90ab88f68 100644
--- a/frontend/app/shared/components/assets-list.component.scss
+++ b/frontend/app/shared/components/assets-list.component.scss
@@ -7,8 +7,8 @@
 
 h5 {
     font-size: .9rem;
-    margin-top: 0;
     margin-bottom: .5rem;
+    margin-top: 0;
 }
 
 .folders {
@@ -19,23 +19,23 @@ h5 {
 
 .folder-container {
     & {
-        width: $asset-width;
-        position: relative;
+        height: $asset-folder-height;
         margin-bottom: 1rem;
         margin-right: .5rem;
-        height: $asset-folder-height;
+        position: relative;
+        width: $asset-width;
     }
 
     &-over {
         @include absolute(-6px, -6px, -6px, -6px);
-        @include opacity(0);
         border: 2px solid $color-theme-blue;
+        opacity: 0;
     }
 
     &.cdk-drop-list-dragging {
         &:hover {
             .folder-container-over {
-                @include opacity(1);
+                opacity: 1;
             }
         }
     }
@@ -43,13 +43,13 @@ h5 {
 
 .file-drop {
     & {
-        @include transition(border-color .4s ease);
-        border: 2px dashed $color-border;
         background: transparent;
-        padding: 1rem;
+        border: 2px dashed $color-border;
         margin-bottom: 1rem;
         margin-right: 0;
+        padding: 1rem;
         text-align: center;
+        transition: border-color .4s ease;
     }
 
     &.drag {
diff --git a/frontend/app/shared/components/comments.component.scss b/frontend/app/shared/components/comments.component.scss
index f897869fc..8d929e03f 100644
--- a/frontend/app/shared/components/comments.component.scss
+++ b/frontend/app/shared/components/comments.component.scss
@@ -3,16 +3,16 @@
 
 .comments {
     &-list {
-        @include flex-grow(1);
-        overflow-y: auto;
+        flex-grow: 1;
         overflow-x: hidden;
+        overflow-y: auto;
         padding: 1rem;
         padding-left: 1.5rem;
     }
 
     &-footer {
-        @include flex-shrink(0);
         border-top: 1px solid $color-border;
+        flex-shrink: 0;
     }
 }
 
@@ -21,6 +21,6 @@
     border: 0;
 
     &:focus {
-        @include box-shadow-none;
+        box-shadow: none;
     }
 }
\ No newline at end of file
diff --git a/frontend/app/shared/components/language-selector.component.scss b/frontend/app/shared/components/language-selector.component.scss
index 9568206f2..2281e1a3e 100644
--- a/frontend/app/shared/components/language-selector.component.scss
+++ b/frontend/app/shared/components/language-selector.component.scss
@@ -11,6 +11,6 @@
 
 .iso-code-dropdown {
     display: inline-block;
-    min-width: 40px;
     max-width: 60px;
+    min-width: 40px;
 }
\ No newline at end of file
diff --git a/frontend/app/shared/components/markdown-editor.component.scss b/frontend/app/shared/components/markdown-editor.component.scss
index ac0a9b9db..35e0c2ca9 100644
--- a/frontend/app/shared/components/markdown-editor.component.scss
+++ b/frontend/app/shared/components/markdown-editor.component.scss
@@ -9,7 +9,7 @@ $background: #fff;
 
 .fullscreen {
     @include fixed(0, 0, 0, 0);
-    border: 0;
     background: $background;
+    border: 0;
     z-index: 1040;
 }
\ No newline at end of file
diff --git a/frontend/app/shared/components/queries/filter-logical.component.scss b/frontend/app/shared/components/queries/filter-logical.component.scss
index 1d571af1b..fa3b05e02 100644
--- a/frontend/app/shared/components/queries/filter-logical.component.scss
+++ b/frontend/app/shared/components/queries/filter-logical.component.scss
@@ -4,8 +4,8 @@
 $field-line: #e1e8ef;
 
 .filters {
-    position: relative;
     padding-left: 3rem;
+    position: relative;
 }
 
 .filter {
diff --git a/frontend/app/shared/components/schema-category.component.scss b/frontend/app/shared/components/schema-category.component.scss
index 2e37fe9ce..e666b83f0 100644
--- a/frontend/app/shared/components/schema-category.component.scss
+++ b/frontend/app/shared/components/schema-category.component.scss
@@ -38,9 +38,9 @@ $drag-margin: -8px;
 
     .drop-indicator {
         @include absolute($drag-margin, $drag-margin, $drag-margin, $drag-margin);
-        display: none;
-        border: 2px dashed $color-dark-black;
         background: none;
+        border: 2px dashed $color-dark-black;
+        display: none;
         pointer-events: none;
     }
 }
@@ -50,9 +50,9 @@ $drag-margin: -8px;
 }
 
 .nav-link {
-    padding-top: .75rem;
-    padding-bottom: .75rem;
     border: 0;
+    padding-bottom: .75rem;
+    padding-top: .75rem;
 }
 
 .nav-item {
@@ -92,7 +92,7 @@ $drag-margin: -8px;
 }
 
 .cdk-drag-animating {
-    @include transition(none);
+    transition: none;
 }
 
 .schema {
@@ -105,23 +105,23 @@ $drag-margin: -8px;
     }
 
     &-modified {
+        padding-left: 0;
         text-align: right;
-        width: auto;
         white-space: nowrap;
-        padding-left: 0;
+        width: auto;
     }
 
     &-user {
         @include border-radius(1px);
         @include truncate;
-        display: inline-block;
         background: $color-dark2-control;
-        padding: .1rem .25rem;
+        display: inline-block;
         font-size: .8rem;
         font-weight: normal;
-        margin-left: 10px;
         margin-bottom: 2px;
+        margin-left: 10px;
         max-width: 100%;
+        padding: .1rem .25rem;
         vertical-align: middle;
     }
 }
\ No newline at end of file
diff --git a/frontend/app/shared/components/search-form.component.scss b/frontend/app/shared/components/search-form.component.scss
index ed0f53114..a0c532932 100644
--- a/frontend/app/shared/components/search-form.component.scss
+++ b/frontend/app/shared/components/search-form.component.scss
@@ -23,17 +23,17 @@
 
 .save-search {
     color: $color-border-dark !important;
+    cursor: pointer !important;
     font-size: .9rem;
     font-weight: normal;
-    cursor: pointer !important;
 }
 
 .expand-search {
     & {
         color: $color-border-dark !important;
+        cursor: pointer !important;
         font-size: .9rem;
         font-weight: normal;
-        cursor: pointer !important;
         padding: 0 .5rem;
     }
 
@@ -43,9 +43,9 @@
 }
 
 .link {
-    margin-top: 1.5rem;
     font-size: .8rem;
     font-weight: normal;
+    margin-top: 1.5rem;
 }
 
 .col-form-label {
diff --git a/frontend/app/shell/pages/home/home-page.component.scss b/frontend/app/shell/pages/home/home-page.component.scss
index 11fbf3996..ff429bbd1 100644
--- a/frontend/app/shell/pages/home/home-page.component.scss
+++ b/frontend/app/shell/pages/home/home-page.component.scss
@@ -13,17 +13,17 @@
 
 .login {
     &-area {
-        max-width: 28rem;
         margin: 1rem auto 0;
+        max-width: 28rem;
         padding: 0 1rem;
     }
 
     &-arms {
         @include absolute(auto, auto, -40px, -110px);
+        background: url('data:image/png;base64,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');
+        border: 0;
         height: 200px;
         width: 200px;
-        border: 0;
-        background: url('data:image/png;base64,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');
     }
 
     &-icon {
@@ -41,9 +41,9 @@
 
 .proudly-made {
     color: $color-text-decent;
-    line-height: 1.5rem;
-    text-align: center;
     font-size: .9rem;
     font-style: normal;
+    line-height: 1.5rem;
     margin: 2rem 6rem;
+    text-align: center;
 }
\ No newline at end of file
diff --git a/frontend/app/shell/pages/internal/apps-menu.component.scss b/frontend/app/shell/pages/internal/apps-menu.component.scss
index bcb4244fa..f26f0ba08 100644
--- a/frontend/app/shell/pages/internal/apps-menu.component.scss
+++ b/frontend/app/shell/pages/internal/apps-menu.component.scss
@@ -3,31 +3,33 @@
 
 $color-apps-border: #65a6ff;
 
+$color-nav-shadow: rgba(26, 93, 184, .26);
+
 .nav {
     & {
-        @include flex-direction(row);
+        flex-direction: row;
     }
 
     .nav-item {
         .nav-link {
             & {
-                @include box-shadow-colored(0, 2px, 4px, rgba(26, 93, 184, .26));
-                @include transition(opacity .4 ease);
-                @include opacity(.95);
-                @include no-selection;
                 @include border-radius;
-                cursor: pointer;
-                color: $color-dark-foreground;
-                border: 1px solid $color-theme-blue-lighter;
                 background: $color-theme-blue;
+                border: 1px solid $color-theme-blue-lighter;
+                box-shadow: 0, 2px, 4px $color-nav-shadow;
+                color: $color-dark-foreground;
+                cursor: pointer;
                 line-height: 1.25rem;
+                min-width: 150px;
+                opacity: .95;
                 padding-left: 1rem;
                 padding-right: 2rem;
-                min-width: 150px;
+                transition: opacity .4 ease;
+                user-select: none;
             }
 
             &:hover {
-                @include opacity(1);
+                opacity: 1;
             }
 
             &::after {
@@ -48,7 +50,7 @@ $color-apps-border: #65a6ff;
     }
 
     &-item {
-        @include border-radius(0);
+        border-radius: 0;
     }
 }
 
@@ -61,8 +63,8 @@ $color-apps-border: #65a6ff;
 }
 
 .apps-list {
-    max-height: 600px;
     margin: -.5rem 0;
+    max-height: 600px;
     overflow-y: auto;
 }
 
diff --git a/frontend/app/shell/pages/internal/internal-area.component.scss b/frontend/app/shell/pages/internal/internal-area.component.scss
index b126e8dd4..c7c30c672 100644
--- a/frontend/app/shell/pages/internal/internal-area.component.scss
+++ b/frontend/app/shell/pages/internal/internal-area.component.scss
@@ -7,18 +7,18 @@
 }
 
 .navbar-brand {
-    width: $size-sidebar-width;
     background: $color-theme-blue-dark;
-    padding-top: 0;
-    padding-bottom: 0;
     cursor: pointer;
-    margin-top: -.5rem;
-    margin-left: -1rem;
-    margin-right: 2rem;
+    float: left;
     font-size: 1.8rem;
     height: $size-navbar-height;
-    text-decoration: none;
-    text-align: center;
     line-height: $size-navbar-height;
-    float: left;
+    margin-left: -1rem;
+    margin-right: 2rem;
+    margin-top: -.5rem;
+    padding-bottom: 0;
+    padding-top: 0;
+    text-align: center;
+    text-decoration: none;
+    width: $size-sidebar-width;
 }
\ No newline at end of file
diff --git a/frontend/app/shell/pages/internal/profile-menu.component.scss b/frontend/app/shell/pages/internal/profile-menu.component.scss
index 075552af5..68cf8041f 100644
--- a/frontend/app/shell/pages/internal/profile-menu.component.scss
+++ b/frontend/app/shell/pages/internal/profile-menu.component.scss
@@ -9,16 +9,16 @@
 
         .nav-link {
             color: $color-dark-foreground;
-            padding-top: 0;
             padding-bottom: 0;
+            padding-top: 0;
         }
     }
 
     &-item-help {
-        padding-top: 2px;
-        padding-right: 1rem;
         font-size: 1.4rem;
         font-weight: lighter;
+        padding-right: 1rem;
+        padding-top: 2px;
         vertical-align: middle;
     }
 }
@@ -38,8 +38,8 @@
     }
 
     &-info {
-        line-height: 1.4rem;
         font-size: .9rem;
         font-weight: normal;
+        line-height: 1.4rem;
     }
 }
\ No newline at end of file
diff --git a/frontend/app/theme/_bootstrap.scss b/frontend/app/theme/_bootstrap.scss
index fc8e7fadb..63459c48c 100644
--- a/frontend/app/theme/_bootstrap.scss
+++ b/frontend/app/theme/_bootstrap.scss
@@ -14,33 +14,33 @@
     }
 
     &-primary {
-        color: $color-badge-primary-foreground;
         background: $color-badge-primary-background;
+        color: $color-badge-primary-foreground;
     }
 
     &-secondary {
-        color: $color-badge-secondary-foreground;
         background: $color-badge-secondary-background;
+        color: $color-badge-secondary-foreground;
     }
 
     &-success {
-        color: $color-badge-success-foreground;
         background: $color-badge-success-background;
+        color: $color-badge-success-foreground;
     }
 
     &-info {
-        color: $color-badge-info-foreground;
         background: $color-badge-info-background;
+        color: $color-badge-info-foreground;
     }
 
     &-warning {
-        color: $color-badge-warning-foreground;
         background: $color-badge-warning-background;
+        color: $color-badge-warning-foreground;
     }
 
     &-danger {
-        color: $color-badge-danger-foreground;
         background: $color-badge-danger-background;
+        color: $color-badge-danger-foreground;
     }
 }
 
@@ -64,8 +64,8 @@
 
     .close {
         & {
-            font-weight: 400;
             font-size: 1.6rem;
+            font-weight: 400;
             padding-top: .25rem;
         }
 
@@ -82,12 +82,12 @@
 }
 
 .alert-hint {
-    @include border-radius(0);
     background: lighten($color-theme-blue, 35%);
     border: 1px solid $color-border;
+    border-radius: 0;
+    color: $color-text;
     font-size: 90%;
     font-weight: normal;
-    color: $color-text;
 
     .alert-link {
         color: $color-text !important;
@@ -104,7 +104,7 @@
 a {
     &:disabled,
     &.disabled {
-        @include opacity(.8);
+        opacity: .8;
         pointer-events: none;
     }
 
@@ -124,9 +124,9 @@ a {
         }
 
         &:hover {
-            text-decoration: underline !important;
-            cursor: pointer;
             color: inherit;
+            cursor: pointer;
+            text-decoration: underline !important;
         }
     }
 }
@@ -163,8 +163,8 @@ a {
     // White dropdown menu without border and shadow.
     & {
         @include box-shadow(0, 3px, 16px, .2);
-        border: 0;
         background: $panel-light-background;
+        border: 0;
         z-index: 1200;
     }
 
@@ -203,9 +203,9 @@ a {
 //
 .breadcrumb {
     & {
-        margin-bottom: 2rem;
         background: none;
         border: 1px solid $color-border;
+        margin-bottom: 2rem;
     }
 
     &.steps {
@@ -215,12 +215,12 @@ a {
 
         .breadcrumb-item {
             & {
-                padding: .75rem 2rem .75rem 1rem;
                 background: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" width="7" height="20"%3e%3cpath d="M0 0l7 10-7 10" fill="none" stroke="%23e4e7e9" stroke-width=".5"/%3e%3c/svg%3e');
                 background-position-x: right;
                 background-repeat: no-repeat;
                 background-size: contain;
                 color: $color-text-decent;
+                padding: .75rem 2rem .75rem 1rem;
 
                 a {
                     color: $color-text-decent !important;
@@ -343,11 +343,11 @@ a {
 
     & .nav-link {
         & {
+            border-bottom: .25rem solid transparent;
             color: $color-text;
             cursor: pointer;
-            padding: 1rem 0;
-            border-bottom: .25rem solid transparent;
             margin: 0 1rem;
+            padding: 1rem 0;
             text-align: center;
         }
 
@@ -444,13 +444,13 @@ a {
     &-radio {
         & {
             @include border-radius;
+            background: transparent;
+            border: 1px solid $color-border;
             color: $color-text-decent;
             cursor: pointer;
-            border: 1px solid $color-border;
-            background: transparent;
-            margin-right: .5rem;
             font-size: 1.5rem;
             font-weight: normal;
+            margin-right: .5rem;
             text-align: center;
             width: 4.5rem;
         }
@@ -463,9 +463,9 @@ a {
             display: block;
             font-size: .7rem;
             font-weight: bold;
+            line-height: 1.5rem;
             margin-left: -.5rem;
             margin-right: -.5rem;
-            line-height: 1.5rem;
         }
 
         .radio-input {
@@ -505,8 +505,8 @@ a {
     &-group {
         .btn-toggle {
             & {
-                border: 1px solid $color-theme-secondary;
                 background: $color-dark-foreground;
+                border: 1px solid $color-theme-secondary;
             }
 
             &.btn-primary {
@@ -580,8 +580,8 @@ $icon-size: 4.5rem;
 
     &-title {
         font-weight: bold;
-        margin-top: -.25rem;
         margin-bottom: 0;
+        margin-top: -.25rem;
     }
 
     &-text {
@@ -590,10 +590,10 @@ $icon-size: 4.5rem;
 
     .btn-radio {
         & {
-            line-height: $icon-size;
             font-size: 1.75rem;
             font-weight: normal;
             height: $icon-size;
+            line-height: $icon-size;
         }
 
         i {
@@ -616,7 +616,7 @@ $icon-size: 4.5rem;
 .modal {
     &-header,
     &-footer {
-        @include flex-shrink(0);
+        flex-shrink: 0;
     }
 
     &-body {
@@ -649,9 +649,9 @@ $icon-size: 4.5rem;
 
     &-content {
         @include box-shadow(0, 6px, 16px, .4);
-        @include border-radiusn(.4rem, .35rem, .35rem, .4rem);
-        max-height: 100%;
         border: 0;
+        border-radius: .4rem, .35rem, .35rem, .4rem;
+        max-height: 100%;
     }
 
     &-fh {
@@ -675,8 +675,8 @@ $icon-size: 4.5rem;
 
     &-tabs {
         background: $color-theme-secondary;
-        position: relative;
         padding: .75rem 1.25rem;
+        position: relative;
     }
 
     &-footer {
diff --git a/frontend/app/theme/_common.scss b/frontend/app/theme/_common.scss
index 00546abb0..b7e42acf0 100644
--- a/frontend/app/theme/_common.scss
+++ b/frontend/app/theme/_common.scss
@@ -21,8 +21,8 @@ body {
 
 // Common style for user email.
 .user-email {
-    font-style: italic;
     font-size: .8rem;
+    font-style: italic;
 }
 
 .text-decent {
@@ -30,8 +30,8 @@ body {
 }
 
 .drag-handle {
-    cursor: move;
     color: $color-text-decent;
+    cursor: move;
 }
 
 //
@@ -48,7 +48,7 @@ body {
 }
 
 .cdk-drag-preview {
-    @include opacity(.7);
+    opacity: .7;
 
     &.table-drag {
         background: $color-dark-foreground;
@@ -62,20 +62,20 @@ body {
 }
 
 .cdk-drag-placeholder {
-    @include opacity(0);
+    opacity: 0;
 }
 
 .cdk-drag-animating {
-    @include transition(transform 250ms cubic-bezier(0, 0, .2, 1));
+    transition: transform 250ms cubic-bezier(0, 0, .2, 1);
 }
 
 .cdk-drop-list-dragging {
     * {
-        @include transition(transform 250ms cubic-bezier(0, 0, .2, 1));
+        transition: transform 250ms cubic-bezier(0, 0, .2, 1);
     }
 
     .cdk-drag-placeholder {
-        @include transition(none);
+        transition: none;
     }
 }
 
@@ -107,7 +107,7 @@ body {
     }
 
     &:not([src]) {
-        @include opacity(0);
+        opacity: 0;
     }
 }
 
@@ -121,9 +121,8 @@ body {
 .item-published {
     & {
         @include circle(.5rem);
-        display: inline-block;
-        border: 0;
         background: $color-theme-green;
+        border: 0;
         margin-left: .4rem;
     }
 
@@ -191,25 +190,25 @@ body {
         & {
             @include absolute(30px, 30px, 30px, 30px);
             @include border-radius;
-            z-index: 10;
             align-content: center;
             align-items: center;
-            display: none;
             border: 2px dashed $color-border;
+            color: darken($color-border, 30%);
+            display: none;
             font-size: 1.2rem;
             font-weight: normal;
             justify-content: center;
-            color: darken($color-border, 30%);
+            z-index: 10;
         }
 
         &.dragging {
-            @include flex-box;
+            display: flex;
         }
 
         &.drag {
             border-color: darken($color-border, 10%);
-            cursor: copy;
             color: darken($color-border, 40%);
+            cursor: copy;
             text-decoration: none;
         }
     }
@@ -222,7 +221,7 @@ body {
 .sorting {
     &,
     & > * {
-        @include opacity(.5);
+        opacity: .5;
     }
 }
 
@@ -230,41 +229,41 @@ body {
 // Animations
 //
 .spin {
-    @include animation(spin 3s infinite linear);
+    animation: spin 3s infinite linear;
 }
 
 .spin2 {
-    @include animation(spin2 5s infinite linear);
+    animation: spin2 5s infinite linear;
 }
 
-@include keyframes (spin2) {
+@keyframes spin2 {
     50% {
-        @include rotate(180deg);
+        transform: rotate(180deg);
     }
 
     100% {
-        @include rotate(360deg);
+        transform: rotate(360deg);
     }
 }
 
-@include keyframes (spin) {
+@keyframes spin {
     20% {
-        @include rotate(0deg);
+        transform: rotate(0deg);
     }
 
     30% {
-        @include rotate(180deg);
+        transform: rotate(180deg);
     }
 
     70% {
-        @include rotate(180deg);
+        transform: rotate(180deg);
     }
 
     80% {
-        @include rotate(360deg);
+        transform: rotate(360deg);
     }
 
     100% {
-        @include rotate(360deg);
+        transform: rotate(360deg);
     }
 }
\ No newline at end of file
diff --git a/frontend/app/theme/_forms.scss b/frontend/app/theme/_forms.scss
index dde25fb46..1b73667fc 100644
--- a/frontend/app/theme/_forms.scss
+++ b/frontend/app/theme/_forms.scss
@@ -14,8 +14,8 @@
 
             &:hover,
             &:focus {
-                @include box-shadow-colored(0, 0, .2rem, $color-theme-error);
                 border-color: $color-theme-error-dark;
+                box-shadow: 0 0 .2rem, $color-theme-error;
             }
         }
     }
@@ -33,11 +33,11 @@
     // Small triangle under the error tooltip with the border trick.
     &::after {
         @include absolute(auto, auto, -.75rem, .625rem);
-        content: '';
-        height: 0;
+        border-color: $color-theme-error transparent transparent;
         border-style: solid;
         border-width: .4rem;
-        border-color: $color-theme-error transparent transparent;
+        content: '';
+        height: 0;
         width: 0;
     }
 
@@ -45,6 +45,7 @@
     & {
         @include absolute(auto, auto, .4rem, 0);
         @include border-radius(2px);
+        background: $color-theme-error;
         color: $color-dark-foreground;
         cursor: none;
         display: inline-block;
@@ -53,7 +54,6 @@
         line-height: 1.1rem;
         padding: .25rem .4rem;
         padding-bottom: .5rem;
-        background: $color-theme-error;
     }
 }
 
@@ -72,18 +72,18 @@
     & {
         @include border-radius(4px);
         color: $color-dark-foreground;
-        margin-top: .25rem;
-        margin-bottom: .8rem;
         font-size: .9rem;
         font-weight: normal;
+        margin-bottom: .8rem;
+        margin-top: .25rem;
         padding: .5rem;
         padding-right: 1.5rem;
     }
 
     &-close {
         @include absolute(0, 0, auto, auto);
-        padding: .5rem;
         display: none;
+        padding: .5rem;
     }
 
     &-error {
@@ -120,21 +120,21 @@
 
     .form-alert {
         @include absolute(.25rem, 0, auto, auto);
-        padding: 1rem;
-        min-width: 200px;
-        max-width: 600px;
         font-size: 1rem;
         font-weight: normal;
+        max-width: 600px;
+        min-width: 200px;
+        padding: 1rem;
         text-align: left;
         z-index: 2000;
 
         &::after {
             @include absolute(-.75rem, .625rem, auto, auto);
-            content: '';
-            height: 0;
+            border-color: transparent transparent $color-theme-error;
             border-style: solid;
             border-width: .4rem;
-            border-color: transparent transparent $color-theme-error;
+            content: '';
+            height: 0;
             width: 0;
         }
     }
@@ -148,11 +148,11 @@
         @include absolute(2px, auto, auto, 0);
         @include border-radius(.25em);
         @include box-shadow;
-        max-height: 15rem;
-        border: 1px solid $color-input;
         background: $color-dark-foreground;
-        padding: .25rem 0;
+        border: 1px solid $color-input;
+        max-height: 15rem;
         overflow-y: auto;
+        padding: .25rem 0;
     }
 
     &-item {
@@ -166,9 +166,9 @@
 
         &.active,
         &:hover {
-            color: $color-dark-foreground;
-            border: 0;
             background: $color-theme-blue;
+            border: 0;
+            color: $color-dark-foreground;
         }
     }
 }
@@ -218,7 +218,7 @@ label {
 //
 .search-form {
     & {
-        @include flex-grow(1);
+        flex-grow: 1;
         position: relative;
     }
 
@@ -239,11 +239,11 @@ label {
 // Dark form control for the dark panel.
 .form-control-dark {
     & {
-        @include transition(background-color .3s ease);
         @include placeholder-color($color-dark2-placeholder);
         background: $color-dark2-control;
         border: 1px solid $color-dark2-control;
         color: darken($color-dark-foreground, 20%);
+        transition: background-color .3s ease;
     }
 
     &:focus {
@@ -256,17 +256,16 @@ label {
 input {
     &.form-underlined {
         & {
-            @include border-radius(0);
             border: 0;
             border-bottom: 1px solid $color-input;
+            border-radius: 0;
         }
 
         &:focus,
         &.focus {
-            @include box-shadow-none;
             background: transparent;
-            border-color: transparent;
             border-bottom-color: $color-theme-blue;
+            box-shadow: none;
             outline: none;
         }
 
@@ -282,18 +281,18 @@ input {
             &.ng-touched,
             &.ng-dirty {
                 & {
-                    @include box-shadow-none;
                     background: transparent;
-                    border-color: transparent;
                     border-bottom-color: $color-theme-error;
+                    border-color: transparent;
+                    box-shadow: none;
                     outline: none;
                 }
 
                 &:hover,
                 &:focus {
-                    @include box-shadow-none;
-                    border-color: transparent;
                     border-bottom-color: $color-theme-error-dark;
+                    border-color: transparent;
+                    box-shadow: none;
                 }
             }
         }
diff --git a/frontend/app/theme/_lists.scss b/frontend/app/theme/_lists.scss
index 75705ce62..123c2383a 100644
--- a/frontend/app/theme/_lists.scss
+++ b/frontend/app/theme/_lists.scss
@@ -34,10 +34,10 @@
     thead {
         // Small font size for the table header, content is more important!
         th {
+            border: 0;
             color: $color-table-header;
             font-size: .8rem;
             font-weight: normal;
-            border: 0;
             padding-top: 0;
             vertical-align: middle;
 
@@ -61,7 +61,6 @@
         tr {
             // Each row is white and a has a border.
             & {
-                @include transition(all .2s ease);
                 background: $color-table-background;
                 border: 1px solid $color-table-border;
                 border-bottom: 2px solid $color-table-border;
@@ -96,19 +95,19 @@
     //
     &-row {
         & {
-            padding: .75rem 1.25rem;
             background: $color-table-background;
             border: 1px solid $color-border;
-            border-top: 0;
             border-bottom-width: 2px;
+            border-top: 0;
             margin-bottom: .25rem;
+            padding: .75rem 1.25rem;
         }
 
         // Summary row for expandable rows.
         &-summary {
+            line-height: 2.5rem;
             padding: .75rem 1.25rem;
             position: relative;
-            line-height: 2.5rem;
         }
 
         &-expandable {
@@ -137,9 +136,9 @@
 
             &-tabs {
                 background: $color-table-footer;
-                position: relative;
-                padding: 1rem 1.25rem;
                 height: 70px;
+                padding: 1rem 1.25rem;
+                position: relative;
             }
         }
     }
@@ -147,10 +146,10 @@
     // Footer that typically contains an add-item-form.
     &-header,
     &-footer {
-        padding: .75rem 1.25rem;
         background: $color-table-footer;
         border: 1px solid $color-input;
         border-bottom-width: 2px;
+        padding: .75rem 1.25rem;
     }
 
     &-header {
diff --git a/frontend/app/theme/_mixins.scss b/frontend/app/theme/_mixins.scss
index 29b1737d8..d9b482cca 100644
--- a/frontend/app/theme/_mixins.scss
+++ b/frontend/app/theme/_mixins.scss
@@ -1,7 +1,7 @@
 @mixin build-icon($color) {
     & {
-        @include transition(color .3s ease);
         color: $color;
+        transition: color .3s ease;
     }
 
     &:hover,
@@ -12,9 +12,9 @@
 
 @mixin build-toggle-button($color, $background) {
     & {
-        color: $color;
-        border-color: $color;
         background: $background;
+        border-color: $color;
+        color: $color;
         z-index: 1000;
     }
 }
@@ -26,12 +26,12 @@
 
     &:disabled
     &.disabled {
-        @include opacity(.4);
+        opacity: .4;
     }  
-    
+
     &:focus,
     &.focus {
-        @include box-shadow-raw(0 0 0 $btn-focus-width rgba($color, .5));
+        box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
     }
     
     &:active,
@@ -42,8 +42,8 @@
 
 @mixin scrollbars($size, $foreground-color, $background-color: mix($foreground-color, white, 50%)) {
     &::-webkit-scrollbar {
-        width:  $size;
         height: $size;
+        width:  $size;
     }
 
     &::-webkit-scrollbar-thumb {
@@ -56,112 +56,40 @@
     }
 
     & {
+        scrollbar-color: $foreground-color $background-color;
         scrollbar-face-color: $foreground-color;
         scrollbar-track-color: $background-color;
-        scrollbar-color: $foreground-color $background-color;
         scrollbar-width: thin;
     }
 }
 
-
-@mixin clearfix() {
+@mixin clearfix {
     &::after {
-        content: '';
         clear: both;
+        content: '';
         display: table;
     }
 }
 
 @mixin hidden() {
-    width: 0;
     opacity: 0;
     overflow: hidden;
     position: absolute;
+    width: 0;
 }
 
 @mixin force-width($width) {
-    min-width: $width;
-    max-width: $width;
     width:  $width;
+    // Ensure that we use the minimum width in flex scenarios.
+    max-width: $width;
+    min-width: $width;
 }
 
-@mixin flex-box {
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -moz-flex;
-    display: -ms-flexbox;
-    display: flex;
-}
-
-@mixin flex-inline {
-    display: -webkit-inline-box;
-    display: -webkit-inline-flex;
-    display: -moz-inline-flex;
-    display: -ms-inline-flexbox;
-    display: inline-flex;
-}
-
-@mixin flex-direction($direction) {
-    -webkit-flex-direction: $direction;
-       -moz-flex-direction: $direction;
-        -ms-flex-direction: $direction;
-            flex-direction: $direction;
-}
-
-@mixin flex-flow($values: (row nowrap)) {
-    -webkit-flex-flow: $values;
-       -moz-flex-flow: $values;
-        -ms-flex-flow: $values;
-            flex-flow: $values;
-}
-
-@mixin flex-grow($int: 0) {
-     -webkit-box-flex: $int;
-    -webkit-flex-grow: $int;
-       -moz-flex-grow: $int;
-    -ms-flex-positive: $int;
-            flex-grow: $int;
-}
-
-@mixin flex-shrink($int: 0) {
-    -webkit-flex-shrink: $int;
-       -moz-flex-shrink: $int;
-            flex-shrink: $int;
-}
-
-@mixin inner-border($color: #999) {
-    -webkit-box-shadow: inset 1px 1px 1px $color;
-       -moz-box-shadow: inset 1px 1px 1px $color;
-            box-shadow: inset 1px 1px 1px $color;
-}
-
-@mixin no-selection() {
-  -webkit-touch-callout: none;
-    -webkit-user-select: none;
-     -khtml-user-select: none;
-       -moz-user-select: none;
-        -ms-user-select: none;
-            user-select: none;
-}
-
-@mixin ellipsis() {
-    -o-text-overflow: ellipsis;
-   -ms-text-overflow: ellipsis;
-       text-overflow: ellipsis;
-}
-
-@mixin box-sizing($sizing: border-box) {
-    -webkit-box-sizing: $sizing;
-	    -ms-box-sizing: $sizing;
-       -moz-box-sizing: $sizing;
-            box-sizing: $sizing;
-}
-
-@mixin border-box() {
-    -webkit-box-sizing: border-box;
-        -ms-box-sizing: border-box;
-       -moz-box-sizing: border-box;
-            box-sizing: border-box;
+@mixin force-height($height) {
+    height:  $height;
+    // Ensure that we use the minimum width in flex scenarios.
+    max-height: $height;
+    min-height: $height;
 }
 
 @mixin caret-top($color, $size: .6rem) {
@@ -188,28 +116,18 @@
     border-top-color: $color;
 }
 
-@mixin caret() {
-    display: inline-block;
-    min-width: 0;
-    max-width: 0;
-    min-height: 0;
-    max-height: 0;
+@mixin caret {
+    @include force-height(0);
+    @include force-width(0);
     content: '';
+    display: inline-block;
 }
  
 @mixin circle($size) {
     @include border-radius($size * .5);
-    min-height: $size;
-    max-height: $size;
-    min-width: $size;
-    max-width: $size;
-}
-
-@mixin wrap() {
-	-ms-word-break: normal;
-	    word-break: normal;
-	 -ms-word-wrap: break-word;
-	     word-wrap: break-word;
+    @include force-height($size);
+    @include force-width($size);
+    display: inline-block;
 }
 
 @mixin placeholder-color($color) {
@@ -223,12 +141,12 @@
 
     &:-moz-placeholder {
         color: $color;
-        @include opacity(1.0);
+        opacity: 1;
     }
 
     &::-moz-placeholder {
         color: $color;
-        @include opacity(1.0);
+        opacity: 1;
     }
 
     &:-ms-input-placeholder {
@@ -236,220 +154,71 @@
     }
 }
 
-@mixin text-shadow($x-axis: 1px, $y-axis: 1px, $blur: 1px, $color: #000) {
-    -webkit-text-shadow: $x-axis $y-axis $blur $color;
-            text-shadow: $x-axis $y-axis $blur $color;
-}
-
-@mixin text-shadow-none() {
-    -webkit-text-shadow: none;
-            text-shadow: none;
-}
-
-@mixin box-shadow-none() {
-    -webkit-box-shadow: none;
-       -moz-box-shadow: none;
-            box-shadow: none;
-}
-
-@mixin box-shadow($x-axis: 0, $y-axis: 1px, $blur: 2px, $alpha: 0.1) {
-  -webkit-box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
-     -moz-box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
-          box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
-}
-
-@mixin box-shadow-colored($x-axis: 0, $y-axis: 1px, $blur: 2px, $color: #000) {
-  -webkit-box-shadow: $x-axis $y-axis $blur $color;
-     -moz-box-shadow: $x-axis $y-axis $blur $color;
-          box-shadow: $x-axis $y-axis $blur $color;
-}
+@mixin hover-visible($selector, $display: 'block') {
+    #{$selector} {
+        display: none;
+    }
 
-@mixin box-shadow-inner($x-axis: 0, $y-axis: 1px, $blur: 2px, $alpha: 0.1) {
-  -webkit-box-shadow: inset $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
-     -moz-box-shadow: inset $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
-          box-shadow: inset $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
+    &:hover {
+        #{$selector} {
+            display: $display;
+        }
+    }
 }
 
-@mixin box-shadow-raw($shadows...) {
-  -webkit-box-shadow: $shadows;
-     -moz-box-shadow: $shadows;
-          box-shadow: $shadows;
+@mixin box-shadow($x-axis: 0, $y-axis: 1px, $blur: 2px, $alpha: .1) {
+    box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
 }
 
-@mixin border-radius-clip() {
-    -webkit-background-clip: padding-box; 
-       -moz-background-clip: padding; 
-            background-clip: padding-box;
-	
+@mixin box-shadow-inner($x-axis: 0, $y-axis: 1px, $blur: 2px, $alpha: .1) {
+    box-shadow: inset $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
 }
 
 @mixin border-radius ($radius: 4px) {
-    -webkit-border-radius: $radius;
-       -moz-border-radius: $radius;
-            border-radius: $radius;
-    @include border-radius-clip;
-}
-
-@mixin border-radiusn($topright, $bottomright, $bottomleft, $topleft) {
-    -webkit-border-radius: $topright $bottomright $bottomleft $topleft;
-       -moz-border-radius: $topright $bottomright $bottomleft $topleft;
-            border-radius: $topright $bottomright $bottomleft $topleft;
-    @include border-radius-clip;
+    border-radius: $radius;
 }
 
 @mixin border-radius-left ($radius: 4px) {
-    -webkit-border-radius: $radius 0 0 $radius;
-       -moz-border-radius: $radius 0 0 $radius;
-            border-radius: $radius 0 0 $radius;
+    border-radius: $radius 0 0 $radius;
 }
 
 @mixin border-radius-right ($radius: 4px) {
-    -webkit-border-radius: 0 $radius $radius 0;
-       -moz-border-radius: 0 $radius $radius 0;
-  	        border-radius: 0 $radius $radius 0;
+    border-radius: 0 $radius $radius 0;
 }
 
 @mixin border-radius-bottom ($radius: 4px) {
-    -webkit-border-radius: 0 0 $radius $radius;
-       -moz-border-radius: 0 0 $radius $radius;
-	        border-radius: 0 0 $radius $radius;
+    border-radius: 0 0 $radius $radius;
 }
 
 @mixin border-radius-top ($radius: 4px) {
-    -webkit-border-radius: $radius $radius 0 0;
-       -moz-border-radius: $radius $radius 0 0;
-	        border-radius: $radius $radius 0 0;
-}
-
-@mixin keyframes($name) {
-    @-webkit-keyframes #{$name} {
-        @content; 
-    }
-    @-moz-keyframes #{$name} {
-        @content;
-    }
-    @keyframes #{$name} {
-        @content;
-    }
-    @-ms-keyframes #{$name} {
-        @content;
-    }
-}
-
-@mixin animation($animation...) {
-    -webkit-animation: $animation;
-       -moz-animation: $animation;
-         -o-animation: $animation;
-            animation: $animation;
-}
-
-@mixin transition($transition...) {
-    -webkit-transition: $transition;
-       -moz-transition: $transition;
-         -o-transition: $transition;
-            transition: $transition;
-}
-
-@mixin transition-delay($transition-delay...) {
-    -webkit-transition-delay: $transition-delay;
-       -moz-transition-delay: $transition-delay;
-         -o-transition-delay: $transition-delay;
-            transition-delay: $transition-delay;
-}
-
-@mixin transition-duration($transition-duration...) {
-    -webkit-transition-duration: $transition-duration;
-       -moz-transition-duration: $transition-duration;
-         -o-transition-duration: $transition-duration;
-            transition-duration: $transition-duration;
-}
-
-@mixin rotate($degrees) {
-    -webkit-transform: rotate($degrees);
-       -moz-transform: rotate($degrees);
-        -ms-transform: rotate($degrees);
-         -o-transform: rotate($degrees);
-            transform: rotate($degrees);
-}
-
-@mixin scale($ratio) {
-    -webkit-transform: scale($ratio);
-       -moz-transform: scale($ratio);
-        -ms-transform: scale($ratio);
-         -o-transform: scale($ratio);
-            transform: scale($ratio);
+    border-radius: $radius $radius 0 0;
 }
 
-@mixin translate($x, $y) {
-    -webkit-transform: translate($x, $y);
-       -moz-transform: translate($x, $y);
-        -ms-transform: translate($x, $y);
-         -o-transform: translate($x, $y);
-            transform: translate($x, $y);
+@mixin position($t: null, $r: null, $b: null, $l: null) {
+    bottom: $b; left: $l; right: $r; top: $t;
 }
 
-@mixin skew($x, $y) {
-    -webkit-transform: skew($x, $y);
-       -moz-transform: skew($x, $y);
-        -ms-transform: skewX($x) skewY($y);
-         -o-transform: skew($x, $y);
-            transform: skew($x, $y);
-    -webkit-backface-visibility: hidden;
-       -moz-backface-visibility: hidden;
-            backface-visibility: hidden;
-}
-
-@mixin translate3d($x, $y, $z) {
-    -webkit-transform: translate3d($x, $y, $z);
-       -moz-transform: translate3d($x, $y, $z);
-        -ms-transform: translate3d($x, $y, $z);
-         -o-transform: translate3d($x, $y, $z);
-            transform: translate3d($x, $y, $z);
-}
-
-@mixin absolute($top, $right, $bottom, $left) {
-         top: $top;  
-        left: $left;  
-       right: $right; 
-      bottom: $bottom; 
+@mixin absolute($t: null, $r: null, $b: null, $l: null) {
+    @include position($t, $r, $b, $l);
     position: absolute;
 }
 
-@mixin fixed($top, $right, $bottom, $left) {
-         top: $top;  
-        left: $left;  
-       right: $right; 
-      bottom: $bottom; 
+@mixin fixed($t: null, $r: null, $b: null, $l: null) {
+    @include position($t, $r, $b, $l);
     position: fixed;
 }
- 
-@mixin opacity($value) {
-    $opacityPercentage: $value * 100;
-        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$opacityPercentage)";
-      -moz-opacity: $value;
-    -khtml-opacity: $value;
-           opacity: $value;
-            filter: alpha(opacity=$opacityPercentage);
-}
 
-@mixin truncate-nowidth() {
-    @include ellipsis;
-        display: block;
+@mixin truncate-nowidth {
+    display: block;
+    overflow-x: hidden;
+    overflow-y: hidden;
+    text-overflow: ellipsis;
     white-space: nowrap;
-       overflow: hidden;
 }
 
-@mixin truncate() {
+@mixin truncate {
     @include truncate-nowidth;
-        width: auto;
-    min-width: 0;
     max-width: 100%;
-}
-
-@mixin gradient($stop: #EEE, $start: #FFF) {
-    background: $start;
-    background:     -webkit-gradient(linear, left bottom, left top, color-stop(0, $start), color-stop(1, $stop));
-    background:  -ms-linear-gradient(bottom, $start, $stop);
-    background: -moz-linear-gradient(center bottom, $start 0%, $stop 100%);
-    background:   -o-linear-gradient($stop, $start);
-}
+    min-width: 0;
+    width: auto;
+}
\ No newline at end of file
diff --git a/frontend/app/theme/_panels.scss b/frontend/app/theme/_panels.scss
index 0ad96f3b0..5bbbad9a0 100644
--- a/frontend/app/theme/_panels.scss
+++ b/frontend/app/theme/_panels.scss
@@ -3,18 +3,18 @@
 
 @mixin panel-icon {
     color: $color-border-dark;
+    cursor: pointer;
     font-size: 1.2rem;
     font-weight: 400;
-    text-decoration: none;
-    text-align: center;
     padding: .6rem;
-    cursor: pointer;
+    text-align: center;
+    text-decoration: none;
 
     &:hover,
     &:focus {
-        text-decoration: none;
-        cursor: pointer;
         color: darken($color-border-dark, 10%);
+        cursor: pointer;
+        text-decoration: none;
     }
 
     &.active {
@@ -37,35 +37,33 @@
 //
 .panel {
     & {
-        @include flex-box;
-        @include flex-flow(column);
-        height: 100%;
         background: $color-background;
         border-right: 1px solid $color-border;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
         position: relative;
     }
 
     // First row of the panel with the header. Fixed height.
     &-header {
         & {
+            @include force-height($panel-header);
             background: $panel-light-background;
-            min-height: $panel-header;
-            max-height: $panel-header;
             padding: $panel-padding;
             position: relative;
         }
 
         &-row {
-            @include flex-box;
-            @include flex-flow(row);
-            margin-top: 1.2rem;
+            display: flex;
+            flex-direction: row;
             margin-bottom: 0;
+            margin-top: 1.2rem;
             position: relative;
         }
 
         &.large {
-            min-height: 8rem;
-            max-height: 8rem;
+            @include force-height(8rem);
         }
 
         .form-inline {
@@ -75,9 +73,9 @@
 
     // Second row of the panel with the content.
     &-main {
-        @include flex-box;
-        @include flex-flow(row);
-        @include flex-grow(1);
+        display: flex;
+        flex-direction: row;
+        flex-grow: 1;
         overflow: hidden;
     }
 
@@ -85,14 +83,14 @@
     &-content {
         // Content area is gray by default to contain scrollable content, e.g. lists.
         & {
-            @include flex-grow(1);
-            @include flex-box;
-            @include flex-direction(column);
-            border-top: 1px solid $color-border;
             background: $color-background;
-            padding: $panel-padding;
+            border-top: 1px solid $color-border;
+            display: flex;
+            flex-direction: column;
+            flex-grow: 1;
             overflow-x: hidden;
             overflow-y: auto;
+            padding: $panel-padding;
         }
 
         // White content area, e.g. for history panel.
@@ -115,7 +113,7 @@
         }
 
         &.grid {
-            @include flex-box;
+            display: flex;
             padding: 0;
         }
 
@@ -135,10 +133,10 @@
     // Error or alert on top of the panel content.
     &-alert {
         & {
-            padding: .5 * $panel-padding $panel-padding;
+            color: $color-dark-foreground;
             font-size: .9rem;
             font-weight: normal;
-            color: $color-dark-foreground;
+            padding: .5 * $panel-padding $panel-padding;
         }
 
         a {
@@ -164,33 +162,30 @@
     // Second column of the main row (second row) with additional links.
     &-sidebar {
         & {
+            @include force-width($panel-sidebar);
             background: $panel-light-background;
             border-left: 1px solid $color-border;
-            min-width: $panel-sidebar;
-            max-width: $panel-sidebar;
         }
 
         &.wide {
-            min-width: 16rem;
-            max-width: 16rem;
+            @include force-width(16rem);
         }
 
         & .panel-nav {
-            min-width: $panel-sidebar;
-            max-width: $panel-sidebar;
+            @include force-width($panel-sidebar);
             position: absolute;
         }
 
         & .panel-link {
             & {
-                @include transition(background-color .3s ease);
                 @include panel-icon;
+                border-bottom: 1px solid transparent;
+                border-top: 1px solid transparent;
                 display: block;
-                padding-top: .6rem;
                 padding-bottom: .6rem;
+                padding-top: .6rem;
                 position: relative;
-                border-top: 1px solid transparent;
-                border-bottom: 1px solid transparent;
+                transition: background-color .3s ease;
             }
 
             &:hover {
@@ -204,10 +199,10 @@
 
                 &::before {
                     @include absolute(0, -1px, 0, auto);
-                    width: 2px;
+                    background: $panel-light-background;
                     color: transparent;
                     content: '';
-                    background: $panel-light-background;
+                    width: 2px;
                 }
             }
 
@@ -224,9 +219,9 @@
     // Panel title.
     &-title {
         @include truncate;
-        line-height: 2rem;
         font-size: 1.5rem;
         font-weight: 400;
+        line-height: 2rem;
         padding-right: 2rem;
     }
 
@@ -250,8 +245,8 @@
 .panel-dark {
     & {
         @include box-shadow(2px, 0, 1px, .3);
-        border-right: 1px solid darken($color-dark2-foreground, 15%);
         background: $color-dark2-background;
+        border-right: 1px solid darken($color-dark2-foreground, 15%);
         color: $color-dark2-foreground;
     }
 
@@ -276,7 +271,7 @@
     }
 
     .nav-link {
-        @include transition(color .4s ease);
+        transition: color .4s ease;
     }
 }
 
@@ -287,10 +282,9 @@
     & {
         @include fixed($size-navbar-height, auto, 0, 0);
         @include box-shadow(2px, 0, 1px, .1);
-        min-width: $size-sidebar-width;
-        max-width: $size-sidebar-width;
-        border-right: 1px solid $color-dark1-border1;
+        @include force-width($size-sidebar-width);
         background: $color-dark1-background;
+        border-right: 1px solid $color-dark1-border1;
         z-index: 100;
     }
 
@@ -305,12 +299,12 @@
 
         &-link {
             & {
-                @include transition(color .3s ease);
-                padding: 1.25rem;
+                color: $color-dark1-foreground;
                 display: block;
+                padding: 1.25rem;
                 text-align: center;
                 text-decoration: none;
-                color: $color-dark1-foreground;
+                transition: color .3s ease;
             }
 
             &:hover,
@@ -331,11 +325,11 @@
     &-item {
         & {
             @include border-radius;
-            padding: .25rem 1rem;
             display: block;
             font-size: .9rem;
             font-weight: normal;
             margin-bottom: .25rem;
+            padding: .25rem 1rem;
         }
 
         &-remove {
diff --git a/frontend/app/theme/_static.scss b/frontend/app/theme/_static.scss
index 776df0970..31238cec0 100644
--- a/frontend/app/theme/_static.scss
+++ b/frontend/app/theme/_static.scss
@@ -5,8 +5,8 @@
 // Noscript element with warning, when javascript is disabled.
 //
 noscript {
-    display: block;
     color: $color-theme-error;
+    display: block;
     font-size: 30px;
     font-weight: lighter;
     margin-bottom: 20px;
@@ -17,8 +17,8 @@ noscript {
 //
 .profile {
     & {
-        max-width: 20rem;
         margin: 0 auto;
+        max-width: 20rem;
         padding: 1rem 2rem;
     }
 
@@ -76,20 +76,20 @@ noscript {
     //
     &-separator {
         & {
-            text-align: center;
+            border-bottom: 1px solid $color-border;
             margin-bottom: 2.5rem;
             margin-top: 1.5rem;
-            border-bottom: 1px solid $color-border;
+            text-align: center;
         }
 
         &-text {
-            color: darken($color-border, 15%);
-            display: inline-block;
             background: $color-dark-foreground;
             border: 0;
             bottom: -.75rem;
-            position: relative;
+            color: darken($color-border, 15%);
+            display: inline-block;
             padding: 0 1rem;
+            position: relative;
         }
     }
 
@@ -106,23 +106,23 @@ noscript {
     // External button and icon.
     .external {
         &-button {
+            line-height: 1.8rem;
             text-align: left;
             text-transform: none;
-            line-height: 1.8rem;
         }
 
         &-button-small {
-            text-align: center;
             padding-left: 0;
             padding-right: 0;
+            text-align: center;
             width: 40px;
         }
 
         &-icon {
             display: inline-block;
-            height: 20px;
             font-size: 1.1rem;
             font-weight: normal;
+            height: 20px;
             vertical-align: middle;
             width: 1.6rem;
         }
@@ -154,8 +154,8 @@ noscript {
     }
 
     &-image {
-        max-width: 100%;
         margin-bottom: 2rem;
+        max-width: 100%;
     }
 }
 
@@ -164,9 +164,9 @@ noscript {
 //
 .loading {
     & {
-        text-align: center;
-        margin-top: 200px;
         margin-bottom: 20px;
+        margin-top: 200px;
+        text-align: center;
     }
 
     div {
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index d95e3c37f..13da6294d 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1347,6 +1347,12 @@
         }
       }
     },
+    "@csstools/convert-colors": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@csstools/convert-colors/-/convert-colors-1.4.0.tgz",
+      "integrity": "sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw==",
+      "dev": true
+    },
     "@ngtools/webpack": {
       "version": "8.3.8",
       "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-8.3.8.tgz",
@@ -2040,6 +2046,94 @@
       "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
       "dev": true
     },
+    "autoprefixer": {
+      "version": "9.7.2",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.7.2.tgz",
+      "integrity": "sha512-LCAfcdej1182uVvPOZnytbq61AhnOZ/4JelDaJGDeNwewyU1AMaNthcHsyz1NRjTmd2FkurMckLWfkHg3Z//KA==",
+      "dev": true,
+      "requires": {
+        "browserslist": "^4.7.3",
+        "caniuse-lite": "^1.0.30001010",
+        "chalk": "^2.4.2",
+        "normalize-range": "^0.1.2",
+        "num2fraction": "^1.2.2",
+        "postcss": "^7.0.23",
+        "postcss-value-parser": "^4.0.2"
+      },
+      "dependencies": {
+        "browserslist": {
+          "version": "4.7.3",
+          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.7.3.tgz",
+          "integrity": "sha512-jWvmhqYpx+9EZm/FxcZSbUZyDEvDTLDi3nSAKbzEkyWvtI0mNSmUosey+5awDW1RUlrgXbQb5A6qY1xQH9U6MQ==",
+          "dev": true,
+          "requires": {
+            "caniuse-lite": "^1.0.30001010",
+            "electron-to-chromium": "^1.3.306",
+            "node-releases": "^1.1.40"
+          }
+        },
+        "caniuse-lite": {
+          "version": "1.0.30001012",
+          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001012.tgz",
+          "integrity": "sha512-7RR4Uh04t9K1uYRWzOJmzplgEOAXbfK72oVNokCdMzA67trrhPzy93ahKk1AWHiA0c58tD2P+NHqxrA8FZ+Trg==",
+          "dev": true
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        },
+        "electron-to-chromium": {
+          "version": "1.3.314",
+          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.314.tgz",
+          "integrity": "sha512-IKDR/xCxKFhPts7h+VaSXS02Z1mznP3fli1BbXWXeN89i2gCzKraU8qLpEid8YzKcmZdZD3Mly3cn5/lY9xsBQ==",
+          "dev": true
+        },
+        "node-releases": {
+          "version": "1.1.41",
+          "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.41.tgz",
+          "integrity": "sha512-+IctMa7wIs8Cfsa8iYzeaLTFwv5Y4r5jZud+4AnfymzeEXKBCavFX0KBgzVaPVqf0ywa6PrO8/b+bPqdwjGBSg==",
+          "dev": true,
+          "requires": {
+            "semver": "^6.3.0"
+          }
+        },
+        "postcss": {
+          "version": "7.0.23",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.23.tgz",
+          "integrity": "sha512-hOlMf3ouRIFXD+j2VJecwssTwbvsPGJVMzupptg+85WA+i7MwyrydmQAgY3R+m0Bc0exunhbJmijy8u8+vufuQ==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "6.1.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+              "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+              "dev": true,
+              "requires": {
+                "has-flag": "^3.0.0"
+              }
+            }
+          }
+        },
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+          "dev": true
+        }
+      }
+    },
     "aws-sign2": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
@@ -3455,6 +3549,15 @@
       "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-3.1.9-1.tgz",
       "integrity": "sha1-/aGedh/Ad+Af+/3G6f38WeiAbNg="
     },
+    "css-blank-pseudo": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/css-blank-pseudo/-/css-blank-pseudo-0.1.4.tgz",
+      "integrity": "sha512-LHz35Hr83dnFeipc7oqFDmsjHdljj3TQtxGGiNWSOsTLIAubSm4TEz8qCaKFpk7idaQ1GfWscF4E6mgpBysA1w==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.5"
+      }
+    },
     "css-color-names": {
       "version": "0.0.4",
       "resolved": "http://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
@@ -3471,6 +3574,35 @@
         "timsort": "^0.3.0"
       }
     },
+    "css-has-pseudo": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/css-has-pseudo/-/css-has-pseudo-0.10.0.tgz",
+      "integrity": "sha512-Z8hnfsZu4o/kt+AuFzeGpLVhFOGO9mluyHBaA2bA8aCGTwah5sT3WV/fTHH8UNZUytOIImuGPrl/prlb4oX4qQ==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.6",
+        "postcss-selector-parser": "^5.0.0-rc.4"
+      },
+      "dependencies": {
+        "cssesc": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-2.0.0.tgz",
+          "integrity": "sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg==",
+          "dev": true
+        },
+        "postcss-selector-parser": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-5.0.0.tgz",
+          "integrity": "sha512-w+zLE5Jhg6Liz8+rQOWEAwtwkyqpfnmsinXjXg6cY7YIONZZtgvE0v2O0uhQBs0peNomOJwWRKt6JBfTdTd3OQ==",
+          "dev": true,
+          "requires": {
+            "cssesc": "^2.0.0",
+            "indexes-of": "^1.0.1",
+            "uniq": "^1.0.1"
+          }
+        }
+      }
+    },
     "css-loader": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-3.2.0.tgz",
@@ -3541,6 +3673,15 @@
         }
       }
     },
+    "css-prefers-color-scheme": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-3.1.1.tgz",
+      "integrity": "sha512-MTu6+tMs9S3EUqzmqLXEcgNRbNkkD/TGFvowpeoWJn5Vfq7FMgsmRQs9X5NXAURiOBmOxm/lLjsDNXDE6k9bhg==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.5"
+      }
+    },
     "css-select": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz",
@@ -3571,21 +3712,13 @@
       }
     },
     "css-tree": {
-      "version": "1.0.0-alpha.33",
-      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.33.tgz",
-      "integrity": "sha512-SPt57bh5nQnpsTBsx/IXbO14sRc9xXu5MtMAVuo0BaQQmyf0NupNPPSoMaqiAF5tDFafYsTkfeH4Q/HCKXkg4w==",
+      "version": "1.0.0-alpha.37",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
+      "integrity": "sha512-DMxWJg0rnz7UgxKT0Q1HU/L9BeJI0M6ksor0OgqOnF+aRCDWg/N2641HmVyU9KVIu0OVVWOb2IpC9A+BJRnejg==",
       "dev": true,
       "requires": {
         "mdn-data": "2.0.4",
-        "source-map": "^0.5.3"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.5.7",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-          "dev": true
-        }
+        "source-map": "^0.6.1"
       }
     },
     "css-unit-converter": {
@@ -3609,6 +3742,12 @@
         "through": "X.X.X"
       }
     },
+    "cssdb": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-4.4.0.tgz",
+      "integrity": "sha512-LsTAR1JPEM9TpGhl/0p3nQecC2LJ0kD8X5YARu1hk/9I1gril5vDtMZyNxcEpxxDj34YNck/ucjuoUd66K03oQ==",
+      "dev": true
+    },
     "cssesc": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-0.1.0.tgz",
@@ -3693,36 +3832,12 @@
       "dev": true
     },
     "csso": {
-      "version": "3.5.1",
-      "resolved": "https://registry.npmjs.org/csso/-/csso-3.5.1.tgz",
-      "integrity": "sha512-vrqULLffYU1Q2tLdJvaCYbONStnfkfimRxXNaGjxMldI0C7JPBC4rB1RyjhfdZ4m1frm8pM9uRPKH3d2knZ8gg==",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-4.0.2.tgz",
+      "integrity": "sha512-kS7/oeNVXkHWxby5tHVxlhjizRCSv8QdU7hB2FpdAibDU8FjTAolhNjKNTiLzXtUrKT6HwClE81yXwEk1309wg==",
       "dev": true,
       "requires": {
-        "css-tree": "1.0.0-alpha.29"
-      },
-      "dependencies": {
-        "css-tree": {
-          "version": "1.0.0-alpha.29",
-          "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.29.tgz",
-          "integrity": "sha512-sRNb1XydwkW9IOci6iB2xmy8IGCj6r/fr+JWitvJ2JxQRPzN3T4AGGVWCMlVmVwM1gtgALJRmGIlWv5ppnGGkg==",
-          "dev": true,
-          "requires": {
-            "mdn-data": "~1.1.0",
-            "source-map": "^0.5.3"
-          }
-        },
-        "mdn-data": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-1.1.4.tgz",
-          "integrity": "sha512-FSYbp3lyKjyj3E7fMl6rYvUdX0FBXaluGqlFoYESWQlyUTq8R+wp0rkFxoYFqZlHCvsUXGjyJmLQSnXToYhOSA==",
-          "dev": true
-        },
-        "source-map": {
-          "version": "0.5.7",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-          "dev": true
-        }
+        "css-tree": "1.0.0-alpha.37"
       }
     },
     "csstype": {
@@ -3753,12 +3868,13 @@
       "dev": true
     },
     "d": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/d/-/d-1.0.0.tgz",
-      "integrity": "sha1-dUu1v+VUUdpppYuU1F9MWwRi1Y8=",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz",
+      "integrity": "sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==",
       "dev": true,
       "requires": {
-        "es5-ext": "^0.10.9"
+        "es5-ext": "^0.10.50",
+        "type": "^1.0.1"
       }
     },
     "damerau-levenshtein": {
@@ -4402,14 +4518,14 @@
       }
     },
     "es5-ext": {
-      "version": "0.10.46",
-      "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.46.tgz",
-      "integrity": "sha512-24XxRvJXNFwEMpJb3nOkiRJKRoupmjYmOPVlI65Qy2SrtxwOTB+g6ODjBKOtwEHbYrhWRty9xxOWLNdClT2djw==",
+      "version": "0.10.53",
+      "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.53.tgz",
+      "integrity": "sha512-Xs2Stw6NiNHWypzRTY1MtaG/uJlwCk8kH81920ma8mvN8Xq1gsfhZvpkImLQArw8AHnv8MT2I45J3c0R8slE+Q==",
       "dev": true,
       "requires": {
         "es6-iterator": "~2.0.3",
-        "es6-symbol": "~3.1.1",
-        "next-tick": "1"
+        "es6-symbol": "~3.1.3",
+        "next-tick": "~1.0.0"
       }
     },
     "es6-iterator": {
@@ -4448,16 +4564,28 @@
         "es6-iterator": "~2.0.1",
         "es6-symbol": "3.1.1",
         "event-emitter": "~0.3.5"
+      },
+      "dependencies": {
+        "es6-symbol": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.1.tgz",
+          "integrity": "sha1-vwDvT9q2uhtG7Le2KbTH7VcVzHc=",
+          "dev": true,
+          "requires": {
+            "d": "1",
+            "es5-ext": "~0.10.14"
+          }
+        }
       }
     },
     "es6-symbol": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.1.tgz",
-      "integrity": "sha1-vwDvT9q2uhtG7Le2KbTH7VcVzHc=",
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.3.tgz",
+      "integrity": "sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==",
       "dev": true,
       "requires": {
-        "d": "1",
-        "es5-ext": "~0.10.14"
+        "d": "^1.0.1",
+        "ext": "^1.1.2"
       }
     },
     "es6-templates": {
@@ -4471,14 +4599,14 @@
       }
     },
     "es6-weak-map": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/es6-weak-map/-/es6-weak-map-2.0.2.tgz",
-      "integrity": "sha1-XjqzIlH/0VOKH45f+hNXdy+S2W8=",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/es6-weak-map/-/es6-weak-map-2.0.3.tgz",
+      "integrity": "sha512-p5um32HOTO1kP+w7PRnB+5lQ43Z6muuMuIMffvDN8ZB4GcnjLBV6zGStpbASIMk4DCAvEaamhe2zhyCb/QXXsA==",
       "dev": true,
       "requires": {
         "d": "1",
-        "es5-ext": "^0.10.14",
-        "es6-iterator": "^2.0.1",
+        "es5-ext": "^0.10.46",
+        "es6-iterator": "^2.0.3",
         "es6-symbol": "^3.1.1"
       }
     },
@@ -4566,12 +4694,6 @@
             "supports-color": "^2.0.0"
           }
         },
-        "shelljs": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/shelljs/-/shelljs-0.6.1.tgz",
-          "integrity": "sha1-7GIRvtGSBEIIj+D3Cyg3Iy7SyKg=",
-          "dev": true
-        },
         "supports-color": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
@@ -4755,6 +4877,23 @@
         }
       }
     },
+    "ext": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/ext/-/ext-1.3.0.tgz",
+      "integrity": "sha512-LErT9cIGZZjSvFkyocVXXeYlj7z8xiA+4oQlM9cX4X/Kfc18cefv3Dd9mNKwFuzUJ7neMMAQz1u1r3gBa/6wGg==",
+      "dev": true,
+      "requires": {
+        "type": "^2.0.0"
+      },
+      "dependencies": {
+        "type": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/type/-/type-2.0.0.tgz",
+          "integrity": "sha512-KBt58xCHry4Cejnc2ISQAF7QY+ORngsWfxezO68+12hKV6lQY8P/psIkcbjeHWn7MqcgciWJyCCevFMJdIXpow==",
+          "dev": true
+        }
+      }
+    },
     "extend": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
@@ -5273,9 +5412,9 @@
       },
       "dependencies": {
         "glob": {
-          "version": "7.1.4",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.4.tgz",
-          "integrity": "sha512-hkLPepehmnKk41pUGm3sYxoFs/umurYfYJCerbXEyFIWcAzvpipAgVkBqqT9RBKMGjnq6kMuyYwha6csxbiM1A==",
+          "version": "7.1.6",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
+          "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
           "dev": true,
           "requires": {
             "fs.realpath": "^1.0.0",
@@ -5303,6 +5442,12 @@
       "integrity": "sha512-a1hQMktqW9Nmqr5aktAux3JMNqaucxGcjtjWnZLHX7yyPCmlSV3M54nGYbqT8K+0GhF3NBgmJCc3ma+WOgX8Jg==",
       "dev": true
     },
+    "flatten": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/flatten/-/flatten-1.0.3.tgz",
+      "integrity": "sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg==",
+      "dev": true
+    },
     "flush-write-stream": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.1.1.tgz",
@@ -6607,6 +6752,15 @@
       "integrity": "sha1-2B8kA3bQuk8Nd4lyw60lh0EXpGM=",
       "dev": true
     },
+    "import-cwd": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
+      "integrity": "sha1-qmzzbnInYShcs3HsZRn1PiQ1sKk=",
+      "dev": true,
+      "requires": {
+        "import-from": "^2.1.0"
+      }
+    },
     "import-fresh": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-2.0.0.tgz",
@@ -6634,6 +6788,23 @@
         }
       }
     },
+    "import-from": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/import-from/-/import-from-2.1.0.tgz",
+      "integrity": "sha1-M1238qev/VOqpHHUuAId7ja387E=",
+      "dev": true,
+      "requires": {
+        "resolve-from": "^3.0.0"
+      },
+      "dependencies": {
+        "resolve-from": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
+          "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=",
+          "dev": true
+        }
+      }
+    },
     "import-local": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/import-local/-/import-local-2.0.0.tgz",
@@ -6957,9 +7128,9 @@
       "dev": true
     },
     "is-my-json-valid": {
-      "version": "2.19.0",
-      "resolved": "https://registry.npmjs.org/is-my-json-valid/-/is-my-json-valid-2.19.0.tgz",
-      "integrity": "sha512-mG0f/unGX1HZ5ep4uhRaPOS8EkAY8/j6mDRMJrutq4CqhoJWYp7qAlonIPy3TV7p3ju4TK9fo/PbnoksWmsp5Q==",
+      "version": "2.20.0",
+      "resolved": "https://registry.npmjs.org/is-my-json-valid/-/is-my-json-valid-2.20.0.tgz",
+      "integrity": "sha512-XTHBZSIIxNsIsZXg7XB5l8z/OBFosl1Wao4tXLpeC7eKU4Vm/kdop2azkPqULwnfGQjmeDIyey9g7afMMtdWAA==",
       "dev": true,
       "requires": {
         "generate-function": "^2.0.0",
@@ -7899,6 +8070,12 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.10.tgz",
       "integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg=="
     },
+    "lodash._reinterpolate": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
+      "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=",
+      "dev": true
+    },
     "lodash.capitalize": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/lodash.capitalize/-/lodash.capitalize-4.2.1.tgz",
@@ -7917,6 +8094,25 @@
       "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=",
       "dev": true
     },
+    "lodash.template": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.5.0.tgz",
+      "integrity": "sha512-84vYFxIkmidUiFxidA/KjjH9pAycqW+h980j7Fuz5qxRtO9pgB7MDFTdys1N7A5mcucRiDyEq4fusljItR1T/A==",
+      "dev": true,
+      "requires": {
+        "lodash._reinterpolate": "^3.0.0",
+        "lodash.templatesettings": "^4.0.0"
+      }
+    },
+    "lodash.templatesettings": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-4.2.0.tgz",
+      "integrity": "sha512-stgLz+i3Aa9mZgnjr/O+v9ruKZsPsndy7qPZOchbqk2cnTU1ZaldKK+v7m54WoKIyxiuMZTKT2H81F8BeAc3ZQ==",
+      "dev": true,
+      "requires": {
+        "lodash._reinterpolate": "^3.0.0"
+      }
+    },
     "lodash.uniq": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
@@ -8823,6 +9019,12 @@
         }
       }
     },
+    "normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
+      "dev": true
+    },
     "normalize-url": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-1.9.1.tgz",
@@ -8865,6 +9067,12 @@
         "boolbase": "~1.0.0"
       }
     },
+    "num2fraction": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
+      "integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=",
+      "dev": true
+    },
     "number-is-nan": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
@@ -9070,25 +9278,17 @@
       }
     },
     "optionator": {
-      "version": "0.8.2",
-      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.2.tgz",
-      "integrity": "sha1-NkxeQJ0/TWMB1sC0wFu6UBgK62Q=",
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz",
+      "integrity": "sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==",
       "dev": true,
       "requires": {
         "deep-is": "~0.1.3",
-        "fast-levenshtein": "~2.0.4",
+        "fast-levenshtein": "~2.0.6",
         "levn": "~0.3.0",
         "prelude-ls": "~1.1.2",
         "type-check": "~0.3.2",
-        "wordwrap": "~1.0.0"
-      },
-      "dependencies": {
-        "wordwrap": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
-          "integrity": "sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=",
-          "dev": true
-        }
+        "word-wrap": "~1.2.3"
       }
     },
     "original": {
@@ -9526,6 +9726,35 @@
         }
       }
     },
+    "postcss-attribute-case-insensitive": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-4.0.1.tgz",
+      "integrity": "sha512-L2YKB3vF4PetdTIthQVeT+7YiSzMoNMLLYxPXXppOOP7NoazEAy45sh2LvJ8leCQjfBcfkYQs8TtCcQjeZTp8A==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2",
+        "postcss-selector-parser": "^5.0.0"
+      },
+      "dependencies": {
+        "cssesc": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-2.0.0.tgz",
+          "integrity": "sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg==",
+          "dev": true
+        },
+        "postcss-selector-parser": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-5.0.0.tgz",
+          "integrity": "sha512-w+zLE5Jhg6Liz8+rQOWEAwtwkyqpfnmsinXjXg6cY7YIONZZtgvE0v2O0uhQBs0peNomOJwWRKt6JBfTdTd3OQ==",
+          "dev": true,
+          "requires": {
+            "cssesc": "^2.0.0",
+            "indexes-of": "^1.0.1",
+            "uniq": "^1.0.1"
+          }
+        }
+      }
+    },
     "postcss-calc": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-7.0.1.tgz",
@@ -9563,6 +9792,58 @@
         }
       }
     },
+    "postcss-color-functional-notation": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-color-functional-notation/-/postcss-color-functional-notation-2.0.1.tgz",
+      "integrity": "sha512-ZBARCypjEDofW4P6IdPVTLhDNXPRn8T2s1zHbZidW6rPaaZvcnCS2soYFIQJrMZSxiePJ2XIYTlcb2ztr/eT2g==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2",
+        "postcss-values-parser": "^2.0.0"
+      }
+    },
+    "postcss-color-gray": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-color-gray/-/postcss-color-gray-5.0.0.tgz",
+      "integrity": "sha512-q6BuRnAGKM/ZRpfDascZlIZPjvwsRye7UDNalqVz3s7GDxMtqPY6+Q871liNxsonUw8oC61OG+PSaysYpl1bnw==",
+      "dev": true,
+      "requires": {
+        "@csstools/convert-colors": "^1.4.0",
+        "postcss": "^7.0.5",
+        "postcss-values-parser": "^2.0.0"
+      }
+    },
+    "postcss-color-hex-alpha": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-color-hex-alpha/-/postcss-color-hex-alpha-5.0.3.tgz",
+      "integrity": "sha512-PF4GDel8q3kkreVXKLAGNpHKilXsZ6xuu+mOQMHWHLPNyjiUBOr75sp5ZKJfmv1MCus5/DWUGcK9hm6qHEnXYw==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.14",
+        "postcss-values-parser": "^2.0.1"
+      }
+    },
+    "postcss-color-mod-function": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-color-mod-function/-/postcss-color-mod-function-3.0.3.tgz",
+      "integrity": "sha512-YP4VG+xufxaVtzV6ZmhEtc+/aTXH3d0JLpnYfxqTvwZPbJhWqp8bSY3nfNzNRFLgB4XSaBA82OE4VjOOKpCdVQ==",
+      "dev": true,
+      "requires": {
+        "@csstools/convert-colors": "^1.4.0",
+        "postcss": "^7.0.2",
+        "postcss-values-parser": "^2.0.0"
+      }
+    },
+    "postcss-color-rebeccapurple": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-color-rebeccapurple/-/postcss-color-rebeccapurple-4.0.1.tgz",
+      "integrity": "sha512-aAe3OhkS6qJXBbqzvZth2Au4V3KieR5sRQ4ptb2b2O8wgvB3SJBsdG+jsn2BZbbwekDG8nTfcCNKcSfe/lEy8g==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2",
+        "postcss-values-parser": "^2.0.0"
+      }
+    },
     "postcss-colormin": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-4.0.3.tgz",
@@ -9602,6 +9883,83 @@
         }
       }
     },
+    "postcss-custom-media": {
+      "version": "7.0.8",
+      "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-7.0.8.tgz",
+      "integrity": "sha512-c9s5iX0Ge15o00HKbuRuTqNndsJUbaXdiNsksnVH8H4gdc+zbLzr/UasOwNG6CTDpLFekVY4672eWdiiWu2GUg==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.14"
+      }
+    },
+    "postcss-custom-properties": {
+      "version": "8.0.11",
+      "resolved": "https://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-8.0.11.tgz",
+      "integrity": "sha512-nm+o0eLdYqdnJ5abAJeXp4CEU1c1k+eB2yMCvhgzsds/e0umabFrN6HoTy/8Q4K5ilxERdl/JD1LO5ANoYBeMA==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.17",
+        "postcss-values-parser": "^2.0.1"
+      }
+    },
+    "postcss-custom-selectors": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-custom-selectors/-/postcss-custom-selectors-5.1.2.tgz",
+      "integrity": "sha512-DSGDhqinCqXqlS4R7KGxL1OSycd1lydugJ1ky4iRXPHdBRiozyMHrdu0H3o7qNOCiZwySZTUI5MV0T8QhCLu+w==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2",
+        "postcss-selector-parser": "^5.0.0-rc.3"
+      },
+      "dependencies": {
+        "cssesc": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-2.0.0.tgz",
+          "integrity": "sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg==",
+          "dev": true
+        },
+        "postcss-selector-parser": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-5.0.0.tgz",
+          "integrity": "sha512-w+zLE5Jhg6Liz8+rQOWEAwtwkyqpfnmsinXjXg6cY7YIONZZtgvE0v2O0uhQBs0peNomOJwWRKt6JBfTdTd3OQ==",
+          "dev": true,
+          "requires": {
+            "cssesc": "^2.0.0",
+            "indexes-of": "^1.0.1",
+            "uniq": "^1.0.1"
+          }
+        }
+      }
+    },
+    "postcss-dir-pseudo-class": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-5.0.0.tgz",
+      "integrity": "sha512-3pm4oq8HYWMZePJY+5ANriPs3P07q+LW6FAdTlkFH2XqDdP4HeeJYMOzn0HYLhRSjBO3fhiqSwwU9xEULSrPgw==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2",
+        "postcss-selector-parser": "^5.0.0-rc.3"
+      },
+      "dependencies": {
+        "cssesc": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-2.0.0.tgz",
+          "integrity": "sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg==",
+          "dev": true
+        },
+        "postcss-selector-parser": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-5.0.0.tgz",
+          "integrity": "sha512-w+zLE5Jhg6Liz8+rQOWEAwtwkyqpfnmsinXjXg6cY7YIONZZtgvE0v2O0uhQBs0peNomOJwWRKt6JBfTdTd3OQ==",
+          "dev": true,
+          "requires": {
+            "cssesc": "^2.0.0",
+            "indexes-of": "^1.0.1",
+            "uniq": "^1.0.1"
+          }
+        }
+      }
+    },
     "postcss-discard-comments": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-4.0.2.tgz",
@@ -9638,6 +9996,153 @@
         "postcss": "^7.0.0"
       }
     },
+    "postcss-double-position-gradients": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-double-position-gradients/-/postcss-double-position-gradients-1.0.0.tgz",
+      "integrity": "sha512-G+nV8EnQq25fOI8CH/B6krEohGWnF5+3A6H/+JEpOncu5dCnkS1QQ6+ct3Jkaepw1NGVqqOZH6lqrm244mCftA==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.5",
+        "postcss-values-parser": "^2.0.0"
+      }
+    },
+    "postcss-env-function": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-env-function/-/postcss-env-function-2.0.2.tgz",
+      "integrity": "sha512-rwac4BuZlITeUbiBq60h/xbLzXY43qOsIErngWa4l7Mt+RaSkT7QBjXVGTcBHupykkblHMDrBFh30zchYPaOUw==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2",
+        "postcss-values-parser": "^2.0.0"
+      }
+    },
+    "postcss-focus-visible": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-focus-visible/-/postcss-focus-visible-4.0.0.tgz",
+      "integrity": "sha512-Z5CkWBw0+idJHSV6+Bgf2peDOFf/x4o+vX/pwcNYrWpXFrSfTkQ3JQ1ojrq9yS+upnAlNRHeg8uEwFTgorjI8g==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2"
+      }
+    },
+    "postcss-focus-within": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-focus-within/-/postcss-focus-within-3.0.0.tgz",
+      "integrity": "sha512-W0APui8jQeBKbCGZudW37EeMCjDeVxKgiYfIIEo8Bdh5SpB9sxds/Iq8SEuzS0Q4YFOlG7EPFulbbxujpkrV2w==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2"
+      }
+    },
+    "postcss-font-variant": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-font-variant/-/postcss-font-variant-4.0.0.tgz",
+      "integrity": "sha512-M8BFYKOvCrI2aITzDad7kWuXXTm0YhGdP9Q8HanmN4EF1Hmcgs1KK5rSHylt/lUJe8yLxiSwWAHdScoEiIxztg==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2"
+      }
+    },
+    "postcss-gap-properties": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-gap-properties/-/postcss-gap-properties-2.0.0.tgz",
+      "integrity": "sha512-QZSqDaMgXCHuHTEzMsS2KfVDOq7ZFiknSpkrPJY6jmxbugUPTuSzs/vuE5I3zv0WAS+3vhrlqhijiprnuQfzmg==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2"
+      }
+    },
+    "postcss-image-set-function": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-image-set-function/-/postcss-image-set-function-3.0.1.tgz",
+      "integrity": "sha512-oPTcFFip5LZy8Y/whto91L9xdRHCWEMs3e1MdJxhgt4jy2WYXfhkng59fH5qLXSCPN8k4n94p1Czrfe5IOkKUw==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2",
+        "postcss-values-parser": "^2.0.0"
+      }
+    },
+    "postcss-import": {
+      "version": "12.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-12.0.1.tgz",
+      "integrity": "sha512-3Gti33dmCjyKBgimqGxL3vcV8w9+bsHwO5UrBawp796+jdardbcFl4RP5w/76BwNL7aGzpKstIfF9I+kdE8pTw==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.1",
+        "postcss-value-parser": "^3.2.3",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "dependencies": {
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+          "dev": true
+        }
+      }
+    },
+    "postcss-initial": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-initial/-/postcss-initial-3.0.2.tgz",
+      "integrity": "sha512-ugA2wKonC0xeNHgirR4D3VWHs2JcU08WAi1KFLVcnb7IN89phID6Qtg2RIctWbnvp1TM2BOmDtX8GGLCKdR8YA==",
+      "dev": true,
+      "requires": {
+        "lodash.template": "^4.5.0",
+        "postcss": "^7.0.2"
+      }
+    },
+    "postcss-lab-function": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-lab-function/-/postcss-lab-function-2.0.1.tgz",
+      "integrity": "sha512-whLy1IeZKY+3fYdqQFuDBf8Auw+qFuVnChWjmxm/UhHWqNHZx+B99EwxTvGYmUBqe3Fjxs4L1BoZTJmPu6usVg==",
+      "dev": true,
+      "requires": {
+        "@csstools/convert-colors": "^1.4.0",
+        "postcss": "^7.0.2",
+        "postcss-values-parser": "^2.0.0"
+      }
+    },
+    "postcss-load-config": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-2.1.0.tgz",
+      "integrity": "sha512-4pV3JJVPLd5+RueiVVB+gFOAa7GWc25XQcMp86Zexzke69mKf6Nx9LRcQywdz7yZI9n1udOxmLuAwTBypypF8Q==",
+      "dev": true,
+      "requires": {
+        "cosmiconfig": "^5.0.0",
+        "import-cwd": "^2.0.0"
+      }
+    },
+    "postcss-loader": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-3.0.0.tgz",
+      "integrity": "sha512-cLWoDEY5OwHcAjDnkyRQzAXfs2jrKjXpO/HQFcc5b5u/r7aa471wdmChmwfnv7x2u840iat/wi0lQ5nbRgSkUA==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^1.1.0",
+        "postcss": "^7.0.0",
+        "postcss-load-config": "^2.0.0",
+        "schema-utils": "^1.0.0"
+      }
+    },
+    "postcss-logical": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-3.0.0.tgz",
+      "integrity": "sha512-1SUKdJc2vuMOmeItqGuNaC+N8MzBWFWEkAnRnLpFYj1tGGa7NqyVBujfRtgNa2gXR+6RkGUiB2O5Vmh7E2RmiA==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2"
+      }
+    },
+    "postcss-media-minmax": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-media-minmax/-/postcss-media-minmax-4.0.0.tgz",
+      "integrity": "sha512-fo9moya6qyxsjbFAYl97qKO9gyre3qvbMnkOZeZwlsW6XYFsvs2DMGDlchVLfAd8LHPZDxivu/+qW2SMQeTHBw==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2"
+      }
+    },
     "postcss-merge-longhand": {
       "version": "4.0.11",
       "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-4.0.11.tgz",
@@ -9811,6 +10316,15 @@
         "postcss": "^7.0.6"
       }
     },
+    "postcss-nesting": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-7.0.1.tgz",
+      "integrity": "sha512-FrorPb0H3nuVq0Sff7W2rnc3SmIcruVC6YwpcS+k687VxyxO33iE1amna7wHuRVzM8vfiYofXSBHNAZ3QhLvYg==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2"
+      }
+    },
     "postcss-normalize-charset": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-4.0.1.tgz",
@@ -9999,6 +10513,108 @@
         }
       }
     },
+    "postcss-overflow-shorthand": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-overflow-shorthand/-/postcss-overflow-shorthand-2.0.0.tgz",
+      "integrity": "sha512-aK0fHc9CBNx8jbzMYhshZcEv8LtYnBIRYQD5i7w/K/wS9c2+0NSR6B3OVMu5y0hBHYLcMGjfU+dmWYNKH0I85g==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2"
+      }
+    },
+    "postcss-page-break": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-page-break/-/postcss-page-break-2.0.0.tgz",
+      "integrity": "sha512-tkpTSrLpfLfD9HvgOlJuigLuk39wVTbbd8RKcy8/ugV2bNBUW3xU+AIqyxhDrQr1VUj1RmyJrBn1YWrqUm9zAQ==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2"
+      }
+    },
+    "postcss-place": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-place/-/postcss-place-4.0.1.tgz",
+      "integrity": "sha512-Zb6byCSLkgRKLODj/5mQugyuj9bvAAw9LqJJjgwz5cYryGeXfFZfSXoP1UfveccFmeq0b/2xxwcTEVScnqGxBg==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2",
+        "postcss-values-parser": "^2.0.0"
+      }
+    },
+    "postcss-preset-env": {
+      "version": "6.7.0",
+      "resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-6.7.0.tgz",
+      "integrity": "sha512-eU4/K5xzSFwUFJ8hTdTQzo2RBLbDVt83QZrAvI07TULOkmyQlnYlpwep+2yIK+K+0KlZO4BvFcleOCCcUtwchg==",
+      "dev": true,
+      "requires": {
+        "autoprefixer": "^9.6.1",
+        "browserslist": "^4.6.4",
+        "caniuse-lite": "^1.0.30000981",
+        "css-blank-pseudo": "^0.1.4",
+        "css-has-pseudo": "^0.10.0",
+        "css-prefers-color-scheme": "^3.1.1",
+        "cssdb": "^4.4.0",
+        "postcss": "^7.0.17",
+        "postcss-attribute-case-insensitive": "^4.0.1",
+        "postcss-color-functional-notation": "^2.0.1",
+        "postcss-color-gray": "^5.0.0",
+        "postcss-color-hex-alpha": "^5.0.3",
+        "postcss-color-mod-function": "^3.0.3",
+        "postcss-color-rebeccapurple": "^4.0.1",
+        "postcss-custom-media": "^7.0.8",
+        "postcss-custom-properties": "^8.0.11",
+        "postcss-custom-selectors": "^5.1.2",
+        "postcss-dir-pseudo-class": "^5.0.0",
+        "postcss-double-position-gradients": "^1.0.0",
+        "postcss-env-function": "^2.0.2",
+        "postcss-focus-visible": "^4.0.0",
+        "postcss-focus-within": "^3.0.0",
+        "postcss-font-variant": "^4.0.0",
+        "postcss-gap-properties": "^2.0.0",
+        "postcss-image-set-function": "^3.0.1",
+        "postcss-initial": "^3.0.0",
+        "postcss-lab-function": "^2.0.1",
+        "postcss-logical": "^3.0.0",
+        "postcss-media-minmax": "^4.0.0",
+        "postcss-nesting": "^7.0.0",
+        "postcss-overflow-shorthand": "^2.0.0",
+        "postcss-page-break": "^2.0.0",
+        "postcss-place": "^4.0.1",
+        "postcss-pseudo-class-any-link": "^6.0.0",
+        "postcss-replace-overflow-wrap": "^3.0.0",
+        "postcss-selector-matches": "^4.0.0",
+        "postcss-selector-not": "^4.0.0"
+      }
+    },
+    "postcss-pseudo-class-any-link": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-6.0.0.tgz",
+      "integrity": "sha512-lgXW9sYJdLqtmw23otOzrtbDXofUdfYzNm4PIpNE322/swES3VU9XlXHeJS46zT2onFO7V1QFdD4Q9LiZj8mew==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2",
+        "postcss-selector-parser": "^5.0.0-rc.3"
+      },
+      "dependencies": {
+        "cssesc": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-2.0.0.tgz",
+          "integrity": "sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg==",
+          "dev": true
+        },
+        "postcss-selector-parser": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-5.0.0.tgz",
+          "integrity": "sha512-w+zLE5Jhg6Liz8+rQOWEAwtwkyqpfnmsinXjXg6cY7YIONZZtgvE0v2O0uhQBs0peNomOJwWRKt6JBfTdTd3OQ==",
+          "dev": true,
+          "requires": {
+            "cssesc": "^2.0.0",
+            "indexes-of": "^1.0.1",
+            "uniq": "^1.0.1"
+          }
+        }
+      }
+    },
     "postcss-reduce-initial": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-4.0.3.tgz",
@@ -10031,6 +10647,35 @@
         }
       }
     },
+    "postcss-replace-overflow-wrap": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-3.0.0.tgz",
+      "integrity": "sha512-2T5hcEHArDT6X9+9dVSPQdo7QHzG4XKclFT8rU5TzJPDN7RIRTbO9c4drUISOVemLj03aezStHCR2AIcr8XLpw==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2"
+      }
+    },
+    "postcss-selector-matches": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-selector-matches/-/postcss-selector-matches-4.0.0.tgz",
+      "integrity": "sha512-LgsHwQR/EsRYSqlwdGzeaPKVT0Ml7LAT6E75T8W8xLJY62CE4S/l03BWIt3jT8Taq22kXP08s2SfTSzaraoPww==",
+      "dev": true,
+      "requires": {
+        "balanced-match": "^1.0.0",
+        "postcss": "^7.0.2"
+      }
+    },
+    "postcss-selector-not": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-selector-not/-/postcss-selector-not-4.0.0.tgz",
+      "integrity": "sha512-W+bkBZRhqJaYN8XAnbbZPLWMvZD1wKTu0UxtFKdhtGjWYmxhkUneoeOhRJKdAE5V7ZTlnbHfCR+6bNwK9e1dTQ==",
+      "dev": true,
+      "requires": {
+        "balanced-match": "^1.0.0",
+        "postcss": "^7.0.2"
+      }
+    },
     "postcss-selector-parser": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz",
@@ -10087,6 +10732,17 @@
       "integrity": "sha512-LmeoohTpp/K4UiyQCwuGWlONxXamGzCMtFxLq4W1nZVGIQLYvMCJx3yAF9qyyuFpflABI9yVdtJAqbihOsCsJQ==",
       "dev": true
     },
+    "postcss-values-parser": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-values-parser/-/postcss-values-parser-2.0.1.tgz",
+      "integrity": "sha512-2tLuBsA6P4rYTNKCXYG/71C7j1pU6pK503suYOmn4xYrQIzW+opD+7FAFNuGSdZC/3Qfy334QbeMu7MEb8gOxg==",
+      "dev": true,
+      "requires": {
+        "flatten": "^1.0.2",
+        "indexes-of": "^1.0.1",
+        "uniq": "^1.0.1"
+      }
+    },
     "postinstall-build": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/postinstall-build/-/postinstall-build-5.0.1.tgz",
@@ -10414,6 +11070,15 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.10.2.tgz",
       "integrity": "sha512-INBT1QEgtcCCgvccr5/86CfD71fw9EPmDxgiJX4I2Ddr6ZsV6iFXsuby+qWJPtmNuMY0zByTsG4468P7nHuNWA=="
     },
+    "read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha1-5mTvMRYRZsl1HNvo28+GtftY93Q=",
+      "dev": true,
+      "requires": {
+        "pify": "^2.3.0"
+      }
+    },
     "readable-stream": {
       "version": "2.3.6",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
@@ -11051,6 +11716,28 @@
         }
       }
     },
+    "sass-lint-webpack": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/sass-lint-webpack/-/sass-lint-webpack-1.0.2.tgz",
+      "integrity": "sha512-Kx/H9x7PCEiSTbYVH9zhAS3/xY/MH3E8VmQw/QEbTn8d3ot6fp1NDq+uL6dYZAAFbehqUM3jRoMIsPNIykhGrA==",
+      "dev": true,
+      "requires": {
+        "chalk": "^2.4.2"
+      },
+      "dependencies": {
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        }
+      }
+    },
     "sass-loader": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-8.0.0.tgz",
@@ -11395,6 +12082,12 @@
       "integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=",
       "dev": true
     },
+    "shelljs": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/shelljs/-/shelljs-0.6.1.tgz",
+      "integrity": "sha1-7GIRvtGSBEIIj+D3Cyg3Iy7SyKg=",
+      "dev": true
+    },
     "shifty": {
       "version": "1.5.4",
       "resolved": "https://registry.npmjs.org/shifty/-/shifty-1.5.4.tgz",
@@ -12176,6 +12869,15 @@
         }
       }
     },
+    "sugarss": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/sugarss/-/sugarss-2.0.0.tgz",
+      "integrity": "sha512-WfxjozUk0UVA4jm+U1d736AUpzSrNsQcIbyOkoE364GrtWmIrFdk5lksEupgWMD4VaT/0kVx1dobpiDumSgmJQ==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2"
+      }
+    },
     "supports-color": {
       "version": "5.4.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.4.0.tgz",
@@ -12186,17 +12888,17 @@
       }
     },
     "svgo": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.0.tgz",
-      "integrity": "sha512-MLfUA6O+qauLDbym+mMZgtXCGRfIxyQoeH6IKVcFslyODEe/ElJNwr0FohQ3xG4C6HK6bk3KYPPXwHVJk3V5NQ==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
+      "integrity": "sha512-yhy/sQYxR5BkC98CY7o31VGsg014AKLEPxdfhora76l36hD9Rdy5NZA/Ocn6yayNPgSamYdtX2rFJdcv07AYVw==",
       "dev": true,
       "requires": {
         "chalk": "^2.4.1",
         "coa": "^2.0.2",
         "css-select": "^2.0.0",
         "css-select-base-adapter": "^0.1.1",
-        "css-tree": "1.0.0-alpha.33",
-        "csso": "^3.5.1",
+        "css-tree": "1.0.0-alpha.37",
+        "csso": "^4.0.2",
         "js-yaml": "^3.13.1",
         "mkdirp": "~0.5.1",
         "object.values": "^1.1.0",
@@ -12207,21 +12909,21 @@
       },
       "dependencies": {
         "css-select": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/css-select/-/css-select-2.0.2.tgz",
-          "integrity": "sha512-dSpYaDVoWaELjvZ3mS6IKZM/y2PMPa/XYoEfYNZePL4U/XgyxZNroHEHReDx/d+VgXh9VbCTtFqLkFbmeqeaRQ==",
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/css-select/-/css-select-2.1.0.tgz",
+          "integrity": "sha512-Dqk7LQKpwLoH3VovzZnkzegqNSuAziQyNZUcrdDM401iY+R5NkGBXGmtO05/yaXQziALuPogeG0b7UAgjnTJTQ==",
           "dev": true,
           "requires": {
             "boolbase": "^1.0.0",
-            "css-what": "^2.1.2",
+            "css-what": "^3.2.1",
             "domutils": "^1.7.0",
             "nth-check": "^1.0.2"
           }
         },
         "css-what": {
-          "version": "2.1.3",
-          "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.3.tgz",
-          "integrity": "sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg==",
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.2.1.tgz",
+          "integrity": "sha512-WwOrosiQTvyms+Ti5ZC5vGEK0Vod3FTt1ca+payZqvKuGJF+dq7bG63DstxtN0dpm6FxY27a/zS3Wten+gEtGw==",
           "dev": true
         },
         "domutils": {
@@ -12807,6 +13509,12 @@
       "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=",
       "dev": true
     },
+    "type": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/type/-/type-1.2.0.tgz",
+      "integrity": "sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg==",
+      "dev": true
+    },
     "type-check": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz",
@@ -15991,6 +16699,12 @@
         "string-width": "^1.0.2 || 2"
       }
     },
+    "word-wrap": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
+      "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
+      "dev": true
+    },
     "wordwrap": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 1a2e58c16..e4b29c62e 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -63,6 +63,7 @@
     "circular-dependency-plugin": "5.2.0",
     "codelyzer": "5.1.2",
     "css-loader": "3.2.0",
+    "cssnano": "^4.1.10",
     "file-loader": "4.2.0",
     "html-loader": "0.5.5",
     "html-webpack-plugin": "3.2.0",
@@ -82,12 +83,17 @@
     "mini-css-extract-plugin": "0.8.0",
     "node-sass": "4.12.0",
     "optimize-css-assets-webpack-plugin": "5.0.3",
+    "postcss-import": "^12.0.1",
+    "postcss-loader": "^3.0.0",
+    "postcss-preset-env": "^6.7.0",
     "raw-loader": "3.1.0",
     "rimraf": "3.0.0",
     "rxjs-tslint": "0.1.7",
-    "sass-lint": "1.13.1",
+    "sass-lint": "^1.13.1",
+    "sass-lint-webpack": "^1.0.2",
     "sass-loader": "8.0.0",
     "style-loader": "1.0.0",
+    "sugarss": "^2.0.0",
     "terser-webpack-plugin": "2.2.1",
     "ts-loader": "6.2.0",
     "tsconfig-paths-webpack-plugin": "3.2.0",
diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js
new file mode 100644
index 000000000..ed05af540
--- /dev/null
+++ b/frontend/postcss.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+    plugins: {
+        'postcss-preset-env': {}
+    }
+}
\ No newline at end of file