diff --git a/src/components/side-menu/side-menu.component.html b/src/components/side-menu/side-menu.component.html
index 5c84db58..81af8014 100644
--- a/src/components/side-menu/side-menu.component.html
+++ b/src/components/side-menu/side-menu.component.html
@@ -65,13 +65,6 @@
             <i class="fa fa-exclamation-triangle "></i> Legacy
             <i class="fa fa-chevron-up pull-right"></i>
         </div>
-        <ul>
-            <li class="sidebar__level-2--item " data-name="Macro legacy" data-abbrev="DVR">
-                <div class="sidebar__level-2">
-                    <a [routerLink]="['/legacy', 'macro']">Macro</a>
-                </div>
-            </li>
-        </ul>
     </li>
 </ul>
 <ul class="menu--bottom">
diff --git a/src/macro.html b/src/macro.html
deleted file mode 100644
index 38a90b4a..00000000
--- a/src/macro.html
+++ /dev/null
@@ -1,104 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
-  <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
-  <link href="node_modules/select2/dist/css/select2.min.css" rel="stylesheet">
-  <link href="css/macro.css" rel="stylesheet">
-  <meta charset="utf-8">
-  <title>Ultimate Hacking Keyboard - Agent mockups</title>
-</head>
-<body style="padding: 50px;">
-
-<!-- Google Tag Manager -->
-<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-PQLCXB"
-height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
-<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
-new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
-j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
-'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-})(window,document,'script','dataLayer','GTM-PQLCXB');</script>
-<!-- End Google Tag Manager -->
-
-<h1>Ultimate Hacking Keyboard &mdash; Agent mockups</h1>
-<ul class="nav nav-pills">
-  <li role="presentation"><a href="popup.html">Key action editor</a></li>
-  <li role="presentation" class="active"><a href="macro.html">Macro editor</a></li>
-</ul>
-
-<div class="main-wrapper" style="margin: 50px;">
-  <div class="container-fluid">
-    <div class="row">
-      <div id="listWithHandle" class="list-group col-xs-10 col-xs-offset-1">
-        <div class="list-group-item action--item">
-          <span class="glyphicon glyphicon-option-vertical move-handle" aria-hidden="true"></span>
-          <i class="fa fa-mouse-pointer"></i> Move pointer by 100px leftward
-          <i class="glyphicon glyphicon-pencil action--edit"></i>
-          <i class="glyphicon glyphicon-trash action--trash"></i>
-        </div>
-        <div class="list-group-item macro-settings" style="display: none;">
-          <div class="helper"></div>
-          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
-          <div class="row">
-            <div class="col-sm-12 flex-button-wrapper">
-              <button class="btn btn-primary btn-sm pull-right flex-button settings-save">Save</button>
-              <button class="btn btn-default btn-sm pull-right flex-button settings-cancel" style="margin-right: .5em;">Cancel</button>
-            </div>
-          </div>
-        </div>
-        <div class="list-group-item action--item">
-          <span class="glyphicon glyphicon-option-vertical move-handle" aria-hidden="true"></span>
-          <i class="fa fa-square"></i> Press letter A
-          <i class="glyphicon glyphicon-pencil action--edit"></i>
-          <i class="glyphicon glyphicon-trash action--trash"></i>
-        </div>
-        <div class="list-group-item action--item">
-          <span class="glyphicon glyphicon-option-vertical move-handle" aria-hidden="true"></span>
-          <i class="fa fa-square"></i> Press Alt+Tab
-          <i class="glyphicon glyphicon-pencil action--edit"></i>
-          <i class="glyphicon glyphicon-trash action--trash"></i>
-        </div>
-        <div class="list-group-item action--item">
-          <span class="glyphicon glyphicon-option-vertical move-handle" aria-hidden="true"></span>
-          <i class="fa fa-clock-o"></i> Delay of 235ms
-          <i class="glyphicon glyphicon-pencil action--edit"></i>
-          <i class="glyphicon glyphicon-trash action--trash"></i>
-        </div>
-        <div class="list-group-item action--item">
-          <span class="glyphicon glyphicon-option-vertical move-handle" aria-hidden="true"></span>
-          <i class="fa fa-mouse-pointer"></i> Press button 1
-          <i class="glyphicon glyphicon-pencil action--edit"></i>
-          <i class="glyphicon glyphicon-trash action--trash"></i>
-        </div>
-        <div class="list-group-item action--item">
-          <span class="glyphicon glyphicon-option-vertical move-handle" aria-hidden="true"></span>
-          <i class="fa fa-mouse-pointer"></i> Scroll by 150px downward
-          <i class="glyphicon glyphicon-pencil action--edit"></i>
-          <i class="glyphicon glyphicon-trash action--trash"></i>
-        </div>
-        <div class="list-group-item action--item add-new__action-item no-reorder">
-          <a href="#" class="add-new__action-item--link"><i class="fa fa-plus"></i> Add new action item</a>
-        </div>
-        <div class="list-group-item new-macro-settings">
-          <div class="helper"></div>
-          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
-          <div class="row">
-            <div class="col-sm-12 flex-button-wrapper">
-              <button class="btn btn-primary btn-sm pull-right flex-button settings-save">Save</button>
-              <button class="btn btn-default btn-sm pull-right flex-button settings-cancel" style="margin-right: .5em;">Cancel</button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-
-<script src="node_modules/jquery/dist/jquery.min.js"></script>
-<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
-<script src="node_modules/sortablejs/Sortable.js"></script>
-<script src="macro.js"></script>
-
-</body>
-</html>
diff --git a/src/macro.js b/src/macro.js
deleted file mode 100644
index 75caae00..00000000
--- a/src/macro.js
+++ /dev/null
@@ -1,70 +0,0 @@
-$(function() {
-  var macroSettingsHtml = $('.macro-settings');
-  var toggleSpeed = 'fast';
-  var notActiveOpacity = '0.75';
-
-  var newMacroHtml = $('.new-macro-settings');
-
-  // List with handle
-  Sortable.create(document.getElementById('listWithHandle'), {
-    handle: '.move-handle',
-    filter: '.no-reorder',
-    draggable: '.list-group-item',
-    animation: 150
-  });
-
-
-  $('.action--edit').on('click', function(e) {
-    var $this = $(this);
-    var action = $this.parent('.list-group-item');
-    $('.action--item.active').removeClass('callout');
-    macroSettingsHtml.removeClass('callout');
-    if (macroSettingsHtml.is(':visible') && !action.hasClass('active')) {
-      macroSettingsHtml.slideToggle(toggleSpeed, function() {
-        $('.action--item:not(.active)').css('opacity', '1');
-        $('.action--item.active').removeClass('active');
-        action.toggleClass('active');
-        $('.action--item:not(.active)').css('opacity', notActiveOpacity);
-
-        $(this).detach().insertAfter(action).slideToggle(toggleSpeed, function () {
-          action.addClass('callout');
-          macroSettingsHtml.addClass('callout');
-        });
-      });
-    }
-    else {
-      if (!macroSettingsHtml.is(':visible')) {
-        action.addClass('active');
-      }
-      macroSettingsHtml.detach().insertAfter(action).slideToggle(toggleSpeed, function() {
-        if (macroSettingsHtml.is(':visible')) {
-          $('.action--item:not(.active)').css('opacity', notActiveOpacity);
-            action.addClass('callout');
-            macroSettingsHtml.addClass('callout');
-        }
-        else {
-          $('.action--item:not(.active)').css('opacity', '1');
-          action.removeClass('active');
-        }
-      });
-    }
-  });
-
-  $('.flex-button', '.macro-settings').on('click', function() {
-    $('.action--item.active .action--edit').click();
-  });
-
-  $('.flex-button', '.new-macro-settings').on('click', function() {
-    newMacroHtml.slideToggle(toggleSpeed, function() {
-      newMacroHtml.hide().detach();
-    });
-  });
-
-  $('.add-new__action-item').on('click', function() {
-    newMacroHtml.insertAfter($(this));
-    newMacroHtml.slideToggle(toggleSpeed);
-  });
-
-  // Detach and remove this item only after all event listhere has been registered on it.
-  newMacroHtml.hide().detach();
-});
diff --git a/src/macroLegacy.html b/src/macroLegacy.html
deleted file mode 100644
index ed66a537..00000000
--- a/src/macroLegacy.html
+++ /dev/null
@@ -1,97 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-    <head>
-        <meta charset="UTF-8">
-        <title>Ultimate Hacking Keyboard Configurator</title>
-        <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet">
-        <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
-        <link href="css/app.css" rel="stylesheet">
-        <link href="css/macro.css" rel="stylesheet">
-        <link href="css/style.css" rel="stylesheet">
-        <script src="vendor/jquery/jquery.min.js"></script>
-    </head>
-    <body>
-        <div class="macro--edit main-content__inner">
-            <div class="row">
-                <h1 class="col-xs-12 pane-title">
-                    <i class="fa fa-play"></i>
-                    <span class="macro__name pane-title__name" contenteditable="true">Macro1</span> <i class="fa"></i>
-                </h1>
-            </div>
-            <div class="row">
-                <div id="listWithHandle" class="list-group col-xs-10 col-xs-offset-1">
-                    <div class="list-group-item action--item">
-                        <span class="glyphicon glyphicon-option-vertical move-handle" aria-hidden="true"></span>
-                        <i class="fa fa-mouse-pointer"></i> Move pointer by 100px leftward
-                        <i class="glyphicon glyphicon-pencil action--edit"></i>
-                        <i class="glyphicon glyphicon-trash action--trash"></i>
-                    </div>
-                    <div class="list-group-item macro-settings" style="display: none;">
-                        <div class="helper"></div>
-                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
-                            labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
-                            dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
-                            sit amet.</p>
-                        <div class="row">
-                            <div class="col-sm-12 flex-button-wrapper">
-                                <button class="btn btn-primary btn-sm pull-right flex-button settings-save">Save</button>
-                                <button class="btn btn-default btn-sm pull-right flex-button settings-cancel" style="margin-right: .5em;">Cancel</button>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="list-group-item action--item">
-                        <span class="glyphicon glyphicon-option-vertical move-handle" aria-hidden="true"></span>
-                        <i class="fa fa-square"></i> Press letter A
-                        <i class="glyphicon glyphicon-pencil action--edit"></i>
-                        <i class="glyphicon glyphicon-trash action--trash"></i>
-                    </div>
-                    <div class="list-group-item action--item">
-                        <span class="glyphicon glyphicon-option-vertical move-handle" aria-hidden="true"></span>
-                        <i class="fa fa-square"></i> Press Alt+Tab
-                        <i class="glyphicon glyphicon-pencil action--edit"></i>
-                        <i class="glyphicon glyphicon-trash action--trash"></i>
-                    </div>
-                    <div class="list-group-item action--item">
-                        <span class="glyphicon glyphicon-option-vertical move-handle" aria-hidden="true"></span>
-                        <i class="fa fa-clock-o"></i> Delay of 235ms
-                        <i class="glyphicon glyphicon-pencil action--edit"></i>
-                        <i class="glyphicon glyphicon-trash action--trash"></i>
-                    </div>
-                    <div class="list-group-item action--item">
-                        <span class="glyphicon glyphicon-option-vertical move-handle" aria-hidden="true"></span>
-                        <i class="fa fa-mouse-pointer"></i> Press button 1
-                        <i class="glyphicon glyphicon-pencil action--edit"></i>
-                        <i class="glyphicon glyphicon-trash action--trash"></i>
-                    </div>
-                    <div class="list-group-item action--item">
-                        <span class="glyphicon glyphicon-option-vertical move-handle" aria-hidden="true"></span>
-                        <i class="fa fa-mouse-pointer"></i> Scroll by 150px downward
-                        <i class="glyphicon glyphicon-pencil action--edit"></i>
-                        <i class="glyphicon glyphicon-trash action--trash"></i>
-                    </div>
-                    <div class="list-group-item action--item add-new__action-item no-reorder">
-                        <a href="#" class="add-new__action-item--link"><i class="fa fa-plus"></i> Add new action item</a>
-                    </div>
-                    <div class="list-group-item new-macro-settings">
-                        <div class="helper"></div>
-                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
-                            labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
-                            dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
-                            sit amet.</p>
-                        <div class="row">
-                            <div class="col-sm-12 flex-button-wrapper">
-                                <button class="btn btn-primary btn-sm pull-right flex-button settings-save">Save</button>
-                                <button class="btn btn-default btn-sm pull-right flex-button settings-cancel" style="margin-right: .5em;">Cancel</button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <script src="vendor/bootstrap/js/bootstrap.min.js"></script>
-        <script src="vendor/sortablejs/Sortable.min.js"></script>
-        <script src="vendor/select2/js/select2.min.js"></script>
-        <script src="macro.js"></script>
-    </body>
-</html>
\ No newline at end of file
diff --git a/src/sass/app.scss b/src/sass/app.scss
deleted file mode 100644
index 6207b432..00000000
--- a/src/sass/app.scss
+++ /dev/null
@@ -1,296 +0,0 @@
-.main-content {
-    margin-left: 250px;
-}
-
-.sidebar-menu {
-    background-color: #f5f5f5;
-    border-right: 1px solid #ccc;
-    position: fixed;
-    overflow-y: auto;
-    width: 250px;
-    height: 100%;
-}
-
-// General list styles for the sidebar-menu.
-ul {
-    padding: 0;
-    margin: 0;
-
-    li {
-        list-style: none;
-        padding: 0;
-    }
-}
-
-.sidebar {
-    &__level-1 {
-        padding: 0.5rem 1rem;
-        font-size: 2rem;
-        line-height: 3rem;
-
-        &--item {
-            margin-top: 0;
-
-            &:nth-child(1) {
-                margin: 0;
-            }
-        }
-
-        .fa-chevron-up,
-        .fa-chevron-down {
-            margin-right: 1rem;
-            font-size: 1.5rem;
-            position: relative;
-            top: 0.5rem;
-            display: none;
-        }
-
-        &:hover {
-            .fa-chevron-up,
-            .fa-chevron-down {
-                display: inline-block;
-            }
-        }
-    }
-
-    // General spacing of level-1 and level-2 elements.
-    &__level-1,
-    &__level-2 {
-        padding-left: 15px;
-    }
-
-    &__level-2 {
-        margin-left: 15px;
-
-        &--item {
-            padding: 0 20px 0 0;
-
-            &.active {
-                background-color: #555;
-                color: #fff;
-
-                .fa-star {
-                    color: #fff;
-                }
-
-                &:hover {
-                    background-color: #555;
-                }
-            }
-
-            // General "right side" icon theming.
-            .fa.pull-right {
-                position: relative;
-                top: 2px;
-            }
-
-            .fa-star {
-                color: #666;
-            }
-        }
-    }
-
-    // General hover over menu items.
-    &__level-1,
-    &__level-2--item {
-        &:hover {
-            cursor: pointer;
-            background-color: rgba(0, 0, 0, 0.05);
-        }
-    }
-}
-
-.menu--bottom {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-
-    .sidebar {
-        &__level-1 {
-            background-color: transparent;
-            padding: 1rem;
-        }
-    }
-}
-
-.pane-title {
-    margin-bottom: 1em;
-
-    &__name,
-    &__abbrev {
-        &[contenteditable=true] {
-            border: none;
-            border-bottom: 2px dotted #999;
-            padding: 0 0.5rem;
-            margin: 0 0.25rem;
-
-            &.active {
-                box-shadow: 0 0 0 1px #ccc, 0 0 5px 0 #ccc;
-                border-color: transparent;
-            }
-        }
-    }
-}
-
-.keymap {
-    &__is-default {
-        &.fa-star {
-            color: #333;
-        }
-
-        &.fa-star-o {
-            color: #333;
-        }
-
-        &:hover {
-            color: #555;
-            cursor: pointer;
-        }
-    }
-
-    &__remove {
-        font-size: 0.75em;
-        top: 0.3em;
-
-        &:hover {
-            cursor: pointer;
-            color: #900;
-        }
-    }
-}
-
-.notification {
-    padding: 1rem 1.5rem;
-    box-shadow: 0 0 0 1px #000;
-    border-radius: 0.5rem;
-    position: absolute;
-    top: 2rem;
-    right: 2rem;
-    z-index: 2000;
-    background-color: #333;
-    color: #eee;
-
-    &__action {
-        margin-left: 1rem;
-        margin-right: 1rem;
-        color: #5bc0de;
-        text-transform: uppercase;
-        font-weight: bold;
-
-        &:focus,
-        &:active,
-        &:hover {
-            text-decoration: none;
-            color: #5bc0de;
-        }
-    }
-
-    &__dismiss {
-        position: relative;
-        bottom: 1px;
-        color: #ccc;
-
-        &:hover {
-            cursor: pointer;
-            color: #fff;
-        }
-    }
-}
-
-.uhk {
-    &__layer-switcher {
-        &--wrapper {
-            position: relative;
-
-            &:before {
-                content: attr(data-title);
-                display: inline-block;
-                position: absolute;
-                bottom: -0.3em;
-                right: 100%;
-                font-size: 2.4rem;
-                padding-right: 0.25em;
-                margin: 0;
-            }
-        }
-    }
-}
-
-.keyboard-slider {
-    position: relative;
-    overflow: hidden;
-    width: 100%;
-    height: auto;
-
-    .uhk__layer-wrapper {
-        width: 100%;
-        height: auto;
-        text-align: center;
-        position: absolute;
-        left: 100%;
-
-        &.current {
-            left: 0;
-        }
-
-        .uhk {
-            max-width: 100%;
-            width: 98%;
-        }
-    }
-}
-
-.key-editor__popup {
-    border: none;
-    width: 0;
-    height: 0;
-
-    // Static setting for quick portotyping.
-    position: absolute;
-    top: 215px;
-    left: 50%;
-    margin-left: -310px;
-}
-
-svg.uhk {
-    rect {
-        &.active {
-            //TODO: use a color variable instead of the declaration below.
-            fill: #337ab7;
-        }
-    }
-}
-
-/* GitHub ribbon */
-.github-fork-ribbon {
-    background-color: #a00;
-    overflow: hidden;
-    white-space: nowrap;
-    position: fixed;
-    right: -50px;
-    bottom: 40px;
-    z-index: 2000;
-    /* stylelint-disable indentation */
-     -webkit-transform: rotate(-45deg);
-        -moz-transform: rotate(-45deg);
-         -ms-transform: rotate(-45deg);
-          -o-transform: rotate(-45deg);
-             transform: rotate(-45deg);
-    -webkit-box-shadow: 0 0 10px #888;
-       -moz-box-shadow: 0 0 10px #888;
-            box-shadow: 0 0 10px #888;
-    /* stylelint-enable indentation */
-
-    a {
-        border: 1px solid #faa;
-        color: #fff;
-        display: block;
-        font: bold 81.25% 'Helvetica Neue', Helvetica, Arial, sans-serif;
-        margin: 1px 0;
-        padding: 10px 50px;
-        text-align: center;
-        text-decoration: none;
-        text-shadow: 0 0 5px #444;
-    }
-}
diff --git a/src/sass/macro.scss b/src/sass/macro.scss
deleted file mode 100644
index 8386d145..00000000
--- a/src/sass/macro.scss
+++ /dev/null
@@ -1,93 +0,0 @@
-.main-wrapper {
-    width: 500px;
-}
-
-h1 {
-    margin-bottom: 3rem;
-}
-
-.action--item {
-    padding-left: 8px;
-}
-
-.action--item.active,
-.action--item.active:hover {
-    background-color: white;
-    font-weight: bold;
-    color: black;
-    border-color: black;
-    z-index: 10;
-}
-
-.macro-settings {
-    border: 1px solid black;
-    border-top-color: #999;
-    z-index: 100;
-}
-
-.macro-settings .helper {
-    position: absolute;
-    display: block;
-    height: 13px;
-    background: #fff;
-    width: 100%;
-    left: 0;
-    top: -14px;
-}
-
-.action--item.active.callout,
-.macro-settings.callout {
-    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
-}
-
-.list-group-item .move-handle:hover {
-    cursor: move;
-}
-
-.action--edit {
-    float: right;
-}
-
-.action--edit:hover {
-    color: #337ab7;
-    cursor: pointer;
-}
-
-.action--trash {
-    float: right;
-    margin-right: 1rem;
-}
-
-.action--trash:hover {
-    color: #d9534f;
-    cursor: pointer;
-}
-
-.action--edit__form {
-    background-color: whtie;
-    margin-left: -0.5rem;
-    margin-right: -15px;
-    margin-top: 15px;
-    padding-top: 15px;
-    border-top: 1px solid #ddd;
-}
-
-.flex-button-wrapper {
-    display: flex;
-    flex-direction: row-reverse;
-}
-
-.flex-button {
-    align-self: flex-end;
-}
-
-.add-new__action-item:hover {
-    cursor: pointer;
-}
-
-.add-new__action-item--link,
-.add-new__action-item--link:active,
-.add-new__action-item--link:hover {
-    text-decoration: none;
-    color: #337ab7;
-}
diff --git a/src/sass/style.scss b/src/sass/style.scss
deleted file mode 100644
index dc698408..00000000
--- a/src/sass/style.scss
+++ /dev/null
@@ -1,201 +0,0 @@
-.popover {
-    padding: 0;
-
-    &.bottom {
-        > .arrow {
-            border-bottom-color: #000;
-
-            &:after {
-                border-bottom-color: #f7f7f7;
-            }
-        }
-    }
-}
-
-.popover-content {
-    padding: 10px 24px;
-}
-
-.popover-title {
-    &.menu-tabs {
-        padding: 0.5rem 0.5rem 0;
-        display: block;
-
-        .nav-tabs {
-            position: relative;
-            top: 1px;
-        }
-    }
-
-    &.menu-button-group {
-        display: none;
-    }
-}
-
-.popover-actions {
-    padding: 8px 14px;
-    margin: 0;
-    font-size: 14px;
-    background-color: #f7f7f7;
-    border-top: 1px solid #ebebeb;
-    border-radius: 0 0 5px 5px;
-    text-align: right;
-}
-
-.select2-container {
-    z-index: 100;
-}
-
-.nav-tabs > li > a {
-    cursor: pointer;
-}
-
-.scancode--searchterm {
-    color: lightgray;
-    float: right;
-}
-
-.layout-abbreviation {
-    font-weight: bold;
-    color: #fff;
-    background: #333;
-    padding: 4px 8px;
-    font-family: monospace;
-    margin-right: 0.5em;
-}
-
-.layout-preview img {
-    max-width: 100%;
-    margin-top: 10px;
-}
-
-.key-editor--none__description {
-    p {
-        padding: 2rem 0;
-        margin: 0;
-        text-align: center;
-    }
-}
-
-.select2-item {
-    position: relative;
-    font-size: 1.5rem;
-
-    &.keymap-name--wrapper {
-        padding-left: 50px;
-    }
-
-    .layout-segment-code {
-        height: 2rem;
-        position: absolute;
-        left: 0;
-        top: 50%;
-        margin-top: -1rem;
-    }
-}
-
-.preview-wrapper {
-    img {
-        max-width: 100%;
-    }
-}
-
-.global-key-setup {
-    &.disabled {
-        opacity: 0;
-
-        .setting-label {
-            color: #999;
-        }
-    }
-}
-
-.setting-label {
-    &.disabled {
-        color: #999;
-    }
-}
-
-.global-key-setup--wrapper {
-    position: relative;
-
-    .disabled-state--text {
-        position: absolute;
-        top: 50%;
-        margin-top: -4rem;
-    }
-}
-
-.mouse {
-    &.popover-content {
-        padding: 10px;
-        display: flex;
-        align-items: center;
-    }
-
-    &__action {
-        &--type {
-            .nav {
-                border-right: 1px solid #ccc;
-
-                li {
-                    a {
-                        border-top-right-radius: 0;
-                        border-bottom-right-radius: 0;
-
-                        &.selected {
-                            font-style: italic;
-                        }
-                    }
-
-                    &.active {
-                        a {
-                            &.selected {
-                                font-style: normal;
-                            }
-
-                            &:after {
-                                content: '';
-                                display: block;
-                                position: absolute;
-                                width: 0;
-                                height: 0;
-                                top: 0;
-                                right: -4rem;
-                                border-color: transparent transparent transparent #337ab7;
-                                border-style: solid;
-                                border-width: 2rem;
-                            }
-                        }
-                    }
-                }
-            }
-        }
-
-        &--config {
-            .btn-placeholder {
-                visibility: hidden;
-            }
-        }
-    }
-}
-
-.help-text {
-    &--mouse-speed {
-        margin-bottom: 2rem;
-        font-size: 0.9em;
-        color: #666;
-
-        p {
-            margin: 0;
-        }
-    }
-}
-
-.select2-results {
-    text-align: center;
-}
-
-.select2-container--default .select2-selection--single .select2-selection__rendered {
-    line-height: 26px;
-}
