diff --git a/client/app/scripts/components/global-style.js b/client/app/scripts/components/global-style.js
index f2465cf3f..6fcc0768a 100644
--- a/client/app/scripts/components/global-style.js
+++ b/client/app/scripts/components/global-style.js
@@ -122,58 +122,24 @@ const GlobalStyle = createGlobalStyle`
   }
   /* stylelint-enable sh-waqar/declaration-use-variable */
 
-  /* Extendable classes */
-  .hideable { ${hideable}; }
-  .palable { ${palable}; }
-  .blinkable { ${blinkable}; }
-  .colorable { ${colorable}; }
-  .truncate { ${truncate}; }
-  .shadow-2 { ${shadow2}; }
-  .btn-opacity { ${btnOpacity}; }
-  .fully-pannable { ${fullyPannable}; }
-  .overlay-wrapper { ${overlayWrapper}; }
-
-  a {
-    text-decoration: none;
-  }
-
-  .browsehappy {
-    margin: 0.2em 0;
-    background: ${color('gray200')};
-    color: ${color('black')};
-    padding: 0.2em 0;
-  }
-
-  .hang-around {
-    transition-delay: .5s;
-  }
-
-  .overlay {
-    ${hideable};
-
-    background-color: ${color('white')};
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    opacity: 0;
-    pointer-events: none;
-    z-index: ${props => props.theme.layers.modal};
-
-    &.faded {
-      /* NOTE: Not sure if we should block the pointer events here.. */
-      pointer-events: all;
-      cursor: wait;
-      opacity: 0.5;
-    }
-  }
-
-  .hide {
-    opacity: 0;
-  }
-
+  /*
+  * Contain all the styles in the root div instead of having them truly
+  * global, so that they don't interfere with the app they're injected into.
+  */
   .scope-app, .terminal-app {
+
+    /* Extendable classes */
+    .hideable { ${hideable}; }
+    .palable { ${palable}; }
+    .blinkable { ${blinkable}; }
+    .colorable { ${colorable}; }
+    .truncate { ${truncate}; }
+    .shadow-2 { ${shadow2}; }
+    .btn-opacity { ${btnOpacity}; }
+    .fully-pannable { ${fullyPannable}; }
+    .overlay-wrapper { ${overlayWrapper}; }
+
+    /* General styles */
     -webkit-font-smoothing: antialiased;
     background: ${scopeTheme('bodyBackgroundColor')};
     bottom: 0;
@@ -189,6 +155,10 @@ const GlobalStyle = createGlobalStyle`
     right: 0;
     top: 0;
     width: 100%;
+  
+    a {
+      text-decoration: none;
+    }
 
     * {
       box-sizing: border-box;
@@ -216,1605 +186,1641 @@ const GlobalStyle = createGlobalStyle`
       font-weight: 400;
     }
 
+    .browsehappy {
+      margin: 0.2em 0;
+      background: ${color('gray200')};
+      color: ${color('black')};
+      padding: 0.2em 0;
+    }
+
+    .hang-around {
+      transition-delay: .5s;
+    }
+
+    .overlay {
+      ${hideable};
+
+      background-color: ${color('white')};
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      opacity: 0;
+      pointer-events: none;
+      z-index: ${props => props.theme.layers.modal};
+
+      &.faded {
+        /* NOTE: Not sure if we should block the pointer events here.. */
+        pointer-events: all;
+        cursor: wait;
+        opacity: 0.5;
+      }
+    }
+
+    .hide {
+      opacity: 0;
+    }
+
     &.time-travel-open {
       .details-wrapper {
         margin-top: ${scopeTheme('timelineHeight')} + 50px;
       }
     }
-  }
 
-  .header {
-    background-color: transparentize(${color('purple25')}, 0.2);
-    z-index: ${props => props.theme.layers.front};
-    padding: 15px 10px 0;
-    position: relative;
-    width: 100%;
-
-    .selectors {
-      display: flex;
+    .header {
+      background-color: transparentize(${color('purple25')}, 0.2);
+      z-index: ${props => props.theme.layers.front};
+      padding: 15px 10px 0;
       position: relative;
+      width: 100%;
 
-      > * {
-        flex: 1 1;
-      }
+      .selectors {
+        display: flex;
+        position: relative;
 
-      .logo {
-        margin: -16px 0 0 8px;
-        height: 64px;
-        max-width: 250px;
-        min-width: 0;
-      }
-    }
-  }
-
-
-  .rc-slider {
-    .rc-slider-step { cursor: pointer; }
-    .rc-slider-track { background-color: ${scopeTheme('textTertiaryColor')}; }
-    .rc-slider-rail { background-color: ${scopeTheme('borderLightColor')}; }
-    .rc-slider-handle { border-color: ${scopeTheme('textTertiaryColor')}; }
-  }
-
-  .footer {
-    ${overlayWrapper};
-    right: 43px;
-
-    &-status {
-      margin-right: 1em;
-    }
-
-    &-label, .pause-text {
-      margin: 0 0.25em;
-    }
-
-    &-versionupdate {
-      margin-right: 0.5em;
-    }
-
-    &-tools {
-      display: flex;
-    }
-
-    &-icon {
-      margin-left: 0.5em;
-    }
-
-    .tooltip-wrapper {
-      position: relative;
-
-      .tooltip {
-        display: none;
-        background-color: ${color('black')};
-        position: absolute;
-        color: ${color('white')};
-        text-align: center;
-        line-height: 22px;
-        border-radius: ${borderRadius('soft')};
-        font-size: ${fontSize('tiny')};
-        margin-bottom: 25px;
-        margin-left: -4px;
-        opacity: 0.75;
-        padding: 10px 20px;
-        bottom: 0;
-        left: 10px;
-        transform: translateX(-50%);
-        white-space: nowrap;
-        z-index: ${props => props.theme.layers.tooltip};
-
-        /* Adjusted from http://www.cssarrowplease.com/ */
-        &:after {
-          border: 6px solid transparent;
-          content: ' ';
-          top: 100%;
-          left: 50%;
-          height: 0;
-          width: 0;
-          position: absolute;
-          border-color: transparent;
-          border-top-color: ${color('black')};
-          margin-left: -6px;
+        > * {
+          flex: 1 1;
         }
-      }
 
-      &:hover .tooltip {
-        display: block;
-      }
-    }
-  }
-
-  .zoomable-canvas svg {
-    ${fullyPannable};
-  }
-
-  .topologies-selector {
-    margin: 0 4px;
-    display: flex;
-
-    .topologies-item {
-      margin: 0px 8px;
-
-      &-label {
-        font-size: ${fontSize('normal')};
-      }
-
-    }
-
-    .topologies-sub {
-      &-item {
-        &-label {
-          font-size: ${fontSize('small')};
+        .logo {
+          margin: -16px 0 0 8px;
+          height: 64px;
+          max-width: 250px;
+          min-width: 0;
         }
       }
     }
 
-    .topologies-item-main,
-    .topologies-sub-item {
-      pointer-events: all;
-      color: ${scopeTheme('textSecondaryColor')};
-      ${btnOpacity};
-      cursor: pointer;
-      padding: 4px 8px;
-      border-radius: ${borderRadius('soft')};
-      opacity: 0.9;
-      margin-bottom: 3px;
-      border: 1px solid transparent;
-      white-space: nowrap;
-
-      &-active, &:hover {
-        color: ${scopeTheme('textColor')};
-        background-color: ${scopeTheme('backgroundDarkerColor')};
-      }
-
-      &-active {
-        opacity: 0.85;
-      }
-
-      &-matched {
-        border-color: ${color('blue400')};
-      }
 
+    .rc-slider {
+      .rc-slider-step { cursor: pointer; }
+      .rc-slider-track { background-color: ${scopeTheme('textTertiaryColor')}; }
+      .rc-slider-rail { background-color: ${scopeTheme('borderLightColor')}; }
+      .rc-slider-handle { border-color: ${scopeTheme('textTertiaryColor')}; }
     }
 
-    .topologies-sub-item {
-      padding: 2px 8px;
-    }
+    .footer {
+      ${overlayWrapper};
+      right: 43px;
 
-  }
+      &-status {
+        margin-right: 1em;
+      }
 
-  .nodes-chart-overlay {
-    pointer-events: none;
-    opacity: ${scopeTheme('nodeElementsInBackgroundOpacity')};
+      &-label, .pause-text {
+        margin: 0 0.25em;
+      }
 
-    &:not(.active) {
-      display: none;
-    }
-  }
+      &-versionupdate {
+        margin-right: 0.5em;
+      }
 
-  .nodes-chart, .nodes-resources {
-
-    &-error, &-loading {
-      ${hideable};
-      pointer-events: none;
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      margin-left: -16.5%;
-      margin-top: -275px;
-      color: ${scopeTheme('textSecondaryColor')};
-      width: 33%;
-      height: 550px;
-
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-
-      .heading {
-        font-size: ${fontSize('normal')};
+      &-tools {
+        display: flex;
       }
 
       &-icon {
-        text-align: center;
-        opacity: 0.25;
-        font-size: ${props => props.theme.overlayIconSize};
+        margin-left: 0.5em;
       }
 
-      li { padding-top: 5px; }
-    }
-
-    /* Make watermarks blink only if actually shown (otherwise the FF performance decreses weirdly). */
-    &-loading:not(.hide) &-error-icon-container {
-      ${blinkable};
-    }
-
-    &-loading {
-      text-align: center;
-    }
-
-    svg {
-      ${hideable};
-      position: absolute;
-      top: 0px;
-    }
-
-    .logo {
-      display: none;
-    }
-
-    svg.exported {
-      .logo {
-        display: inline;
-      }
-    }
-
-    text {
-      font-family: ${props => props.theme.fontFamilies.regular};
-      fill: ${scopeTheme('textSecondaryColor')};
-    }
-
-    .nodes-chart-elements .matched-results {
-      background-color: ${scopeTheme('labelBackgroundColor')};
-    }
-
-    .edge {
-      .link-none {
-        fill: none;
-        display: none;
-      }
-      .link-storage {
-        fill: none;
-        stroke: ${scopeTheme('edgeColor')};
-        stroke-dasharray: 1, 30;
-        stroke-linecap: round;
-      }
-      .link {
-        fill: none;
-        stroke: ${scopeTheme('edgeColor')};
-      }
-      .shadow {
-        fill: none;
-        stroke: ${color('blue400')};
-        stroke-opacity: 0;
-      }
-      &.highlighted {
-        .shadow {
-          stroke-opacity: ${scopeTheme('edgeHighlightOpacity')};
-        }
-      }
-    }
-
-    .edge-marker {
-      color: ${scopeTheme('edgeColor')};
-      fill: ${scopeTheme('edgeColor')};
-    }
-  }
-
-  .matched-results {
-    text-align: center;
-
-    &-match {
-      font-size: ${fontSize('small')};
-
-      &-wrapper {
-        display: inline-block;
-        margin: 1px;
-        padding: 2px 4px;
-        background-color: transparentize(${color('blue400')}, 0.9);
-      }
-
-      &-label {
-        color: ${scopeTheme('textSecondaryColor')};
-        margin-right: 0.5em;
-      }
-    }
-
-    &-more {
-      font-size: ${fontSize('tiny')};
-      color: ${color('blue700')};
-      margin-top: -2px;
-    }
-  }
-
-  .details {
-    &-wrapper {
-      position: fixed;
-      display: flex;
-      z-index: ${props => props.theme.layers.toolbar};
-      right: ${scopeTheme('detailsWindowPaddingLeft')};
-      top: 100px;
-      bottom: 48px;
-      transition: transform 0.33333s cubic-bezier(0,0,0.21,1), margin-top .15s ${scopeTheme('baseEase')};
-    }
-  }
-
-  .node-details {
-    height: 100%;
-    width: ${scopeTheme('detailsWindowWidth')};
-    display: flex;
-    flex-flow: column;
-    margin-bottom: 12px;
-    padding-bottom: 2px;
-    border-radius: ${borderRadius('soft')};
-    background-color: ${color('white')};
-    ${shadow2};
-    /* keep node-details above the terminal. */
-    z-index: ${props => props.theme.layers.front};
-    overflow: hidden;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-
-    &-tools-wrapper {
-      position: relative;
-    }
-
-
-    &-tools {
-      position: absolute;
-      top: 6px;
-      right: 8px;
-
-      .close-details {
+      .tooltip-wrapper {
         position: relative;
-        z-index: ${props => props.theme.layers.front};
-      }
 
-      > i {
-        ${btnOpacity};
-        padding: 4px 5px;
-        margin-left: 2px;
-        font-size: ${fontSize('normal')};
-        color: ${color('white')};
-        cursor: pointer;
-        border: 1px solid transparent;
-        border-radius: ${borderRadius('soft')};
+        .tooltip {
+          display: none;
+          background-color: ${color('black')};
+          position: absolute;
+          color: ${color('white')};
+          text-align: center;
+          line-height: 22px;
+          border-radius: ${borderRadius('soft')};
+          font-size: ${fontSize('tiny')};
+          margin-bottom: 25px;
+          margin-left: -4px;
+          opacity: 0.75;
+          padding: 10px 20px;
+          bottom: 0;
+          left: 10px;
+          transform: translateX(-50%);
+          white-space: nowrap;
+          z-index: ${props => props.theme.layers.tooltip};
 
-        span {
-          font-family: ${props => props.theme.fontFamilies.regular};
-          font-size: ${fontSize('small')};
-          margin-left: 4px;
-
-          span {
-            text-transform: capitalize;
-            font-size: ${fontSize('normal')};
-            margin-left: 0;
+          /* Adjusted from http://www.cssarrowplease.com/ */
+          &:after {
+            border: 6px solid transparent;
+            content: ' ';
+            top: 100%;
+            left: 50%;
+            height: 0;
+            width: 0;
+            position: absolute;
+            border-color: transparent;
+            border-top-color: ${color('black')};
+            margin-left: -6px;
           }
         }
 
-        &:hover {
-          border-color: ${props => transparentize(0.4, props.theme.colors.white)};
+        &:hover .tooltip {
+          display: block;
         }
       }
     }
 
-    .match {
-      background-color: ${props => transparentize(0.7, props.theme.colors.blue400)};
-      border: 1px solid ${color('blue400')};
+    .zoomable-canvas svg {
+      ${fullyPannable};
     }
 
-    &-header {
-      ${colorable};
+    .topologies-selector {
+      margin: 0 4px;
+      display: flex;
+
+      .topologies-item {
+        margin: 0px 8px;
+
+        &-label {
+          font-size: ${fontSize('normal')};
+        }
 
-      &-wrapper {
-        padding: 36px 36px 8px 36px;
       }
 
-      &-label {
-        color: ${color('white')};
-        margin: 0;
-        width: 348px;
-        padding-top: 0;
+      .topologies-sub {
+        &-item {
+          &-label {
+            font-size: ${fontSize('small')};
+          }
+        }
       }
 
-      .details-tools {
-        position: absolute;
-        top: 16px;
-        right: 24px;
-      }
-
-      &-notavailable {
-        background-color: ${scopeTheme('backgroundDarkColor')};
-      }
-
-    }
-
-    &-relatives {
-      margin-top: 4px;
-      font-size: ${fontSize('normal')};
-      color: ${color('white')};
-
-      &-link {
-        ${truncate};
+      .topologies-item-main,
+      .topologies-sub-item {
+        pointer-events: all;
+        color: ${scopeTheme('textSecondaryColor')};
         ${btnOpacity};
-        display: inline-block;
-        margin-right: 0.5em;
         cursor: pointer;
-        text-decoration: underline;
-        opacity: ${scopeTheme('linkOpacityDefault')};
-        max-width: 12em;
+        padding: 4px 8px;
+        border-radius: ${borderRadius('soft')};
+        opacity: 0.9;
+        margin-bottom: 3px;
+        border: 1px solid transparent;
+        white-space: nowrap;
+
+        &-active, &:hover {
+          color: ${scopeTheme('textColor')};
+          background-color: ${scopeTheme('backgroundDarkerColor')};
+        }
+
+        &-active {
+          opacity: 0.85;
+        }
+
+        &-matched {
+          border-color: ${color('blue400')};
+        }
+
+      }
+
+      .topologies-sub-item {
+        padding: 2px 8px;
+      }
+
+    }
+
+    .nodes-chart-overlay {
+      pointer-events: none;
+      opacity: ${scopeTheme('nodeElementsInBackgroundOpacity')};
+
+      &:not(.active) {
+        display: none;
+      }
+    }
+
+    .nodes-chart, .nodes-resources {
+
+      &-error, &-loading {
+        ${hideable};
+        pointer-events: none;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        margin-left: -16.5%;
+        margin-top: -275px;
+        color: ${scopeTheme('textSecondaryColor')};
+        width: 33%;
+        height: 550px;
+
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+
+        .heading {
+          font-size: ${fontSize('normal')};
+        }
+
+        &-icon {
+          text-align: center;
+          opacity: 0.25;
+          font-size: ${props => props.theme.overlayIconSize};
+        }
+
+        li { padding-top: 5px; }
+      }
+
+      /* Make watermarks blink only if actually shown (otherwise the FF performance decreses weirdly). */
+      &-loading:not(.hide) &-error-icon-container {
+        ${blinkable};
+      }
+
+      &-loading {
+        text-align: center;
+      }
+
+      svg {
+        ${hideable};
+        position: absolute;
+        top: 0px;
+      }
+
+      .logo {
+        display: none;
+      }
+
+      svg.exported {
+        .logo {
+          display: inline;
+        }
+      }
+
+      text {
+        font-family: ${props => props.theme.fontFamilies.regular};
+        fill: ${scopeTheme('textSecondaryColor')};
+      }
+
+      .nodes-chart-elements .matched-results {
+        background-color: ${scopeTheme('labelBackgroundColor')};
+      }
+
+      .edge {
+        .link-none {
+          fill: none;
+          display: none;
+        }
+        .link-storage {
+          fill: none;
+          stroke: ${scopeTheme('edgeColor')};
+          stroke-dasharray: 1, 30;
+          stroke-linecap: round;
+        }
+        .link {
+          fill: none;
+          stroke: ${scopeTheme('edgeColor')};
+        }
+        .shadow {
+          fill: none;
+          stroke: ${color('blue400')};
+          stroke-opacity: 0;
+        }
+        &.highlighted {
+          .shadow {
+            stroke-opacity: ${scopeTheme('edgeHighlightOpacity')};
+          }
+        }
+      }
+
+      .edge-marker {
+        color: ${scopeTheme('edgeColor')};
+        fill: ${scopeTheme('edgeColor')};
+      }
+    }
+
+    .matched-results {
+      text-align: center;
+
+      &-match {
+        font-size: ${fontSize('small')};
+
+        &-wrapper {
+          display: inline-block;
+          margin: 1px;
+          padding: 2px 4px;
+          background-color: transparentize(${color('blue400')}, 0.9);
+        }
+
+        &-label {
+          color: ${scopeTheme('textSecondaryColor')};
+          margin-right: 0.5em;
+        }
       }
 
       &-more {
-        ${btnOpacity};
-        padding: 0 2px;
-        cursor: pointer;
         font-size: ${fontSize('tiny')};
-        font-weight: bold;
-        display: inline-block;
-        position: relative;
-        top: -5px;
+        color: ${color('blue700')};
+        margin-top: -2px;
       }
     }
 
-    &-controls {
-      white-space: nowrap;
-      padding: 8px 0;
-      font-size: ${fontSize('small')};
-
+    .details {
       &-wrapper {
-        padding: 0 36px 0 32px;
-      }
-
-      .node-control-button {
-        color: ${color('white')};
-      }
-
-      &-spinner {
-        ${hideable};
-        color: ${color('white')};
-        margin-left: 8px;
-      }
-
-      &-error {
-        ${truncate};
-        float: right;
-        width: 55%;
-        padding-top: 6px;
-        text-align: left;
-        color: ${color('white')};
-
-        &-icon {
-          ${blinkable};
-          margin-right: 0.5em;
-        }
+        position: fixed;
+        display: flex;
+        z-index: ${props => props.theme.layers.toolbar};
+        right: ${scopeTheme('detailsWindowPaddingLeft')};
+        top: 100px;
+        bottom: 48px;
+        transition: transform 0.33333s cubic-bezier(0,0,0.21,1), margin-top .15s ${scopeTheme('baseEase')};
       }
     }
 
-    &-content {
-      flex: 1;
-      padding: 0 36px 0 36px;
-      overflow-y: auto;
+    .node-details {
+      height: 100%;
+      width: ${scopeTheme('detailsWindowWidth')};
+      display: flex;
+      flex-flow: column;
+      margin-bottom: 12px;
+      padding-bottom: 2px;
+      border-radius: ${borderRadius('soft')};
+      background-color: ${color('white')};
+      ${shadow2};
+      /* keep node-details above the terminal. */
+      z-index: ${props => props.theme.layers.front};
+      overflow: hidden;
 
-      &-loading {
-        margin-top: 48px;
-        text-align: center;
-        font-size: ${fontSize('huge')};
-        color: ${scopeTheme('textTertiaryColor')};
+      &:last-child {
+        margin-bottom: 0;
       }
 
-      &-section {
-        margin: 16px 0;
+      &-tools-wrapper {
+        position: relative;
+      }
 
-        &-header {
+
+      &-tools {
+        position: absolute;
+        top: 6px;
+        right: 8px;
+
+        .close-details {
+          position: relative;
+          z-index: ${props => props.theme.layers.front};
+        }
+
+        > i {
+          ${btnOpacity};
+          padding: 4px 5px;
+          margin-left: 2px;
           font-size: ${fontSize('normal')};
-          color: ${scopeTheme('textTertiaryColor')};
-          margin-bottom: 10px;
-        }
-      }
-    }
+          color: ${color('white')};
+          cursor: pointer;
+          border: 1px solid transparent;
+          border-radius: ${borderRadius('soft')};
 
-    &-health {
+          span {
+            font-family: ${props => props.theme.fontFamilies.regular};
+            font-size: ${fontSize('small')};
+            margin-left: 4px;
 
-      &-wrapper {
-        display: flex;
-        justify-content: space-around;
-        align-content: center;
-        text-align: center;
-        flex-wrap: wrap;
-      }
-
-      &-overflow {
-        ${btnOpacity};
-        flex-basis: 33%;
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        align-items: center;
-        opacity: 0.85;
-        cursor: pointer;
-        position: relative;
-        padding-bottom: 16px;
-
-        &-item {
-          padding: 4px 8px;
-          line-height: 1.2;
-          flex-basis: 48%;
-
-          &-value {
-            color: ${scopeTheme('textSecondaryColor')};
-            font-size: ${fontSize('normal')};
+            span {
+              text-transform: capitalize;
+              font-size: ${fontSize('normal')};
+              margin-left: 0;
+            }
           }
 
-          &-label {
-            color: ${scopeTheme('textSecondaryColor')};
-            font-size: ${fontSize('tiny')};
+          &:hover {
+            border-color: ${props => transparentize(0.4, props.theme.colors.white)};
           }
         }
       }
 
-      &-item {
-        padding: 8px 16px;
-        width: 33%;
-        display: flex;
-        flex-direction: column;
-        flex-grow: 1;
-
-        &-label {
-          color: ${scopeTheme('textSecondaryColor')};
-          font-size: ${fontSize('small')};
-        }
-
-        &-sparkline {
-          margin-top: auto;
-        }
-
-        &-placeholder {
-          font-size: ${fontSize('large')};
-          opacity: 0.2;
-          margin-bottom: 0.2em;
-        }
-      }
-
-      &-link-item {
-        ${btnOpacity};
-        cursor: pointer;
-        opacity: ${scopeTheme('linkOpacityDefault')};
-        width: 33%;
-        display: flex;
-        color: inherit;
-
-        .node-details-health-item {
-          width: auto;
-        }
-      }
-    }
-
-    &-info {
-
-      &-field {
-        display: flex;
-        align-items: baseline;
-
-        &-label {
-          text-align: right;
-          width: 30%;
-          color: ${scopeTheme('textSecondaryColor')};
-          padding: 0 0.5em 0 0;
-          white-space: nowrap;
-          font-size: ${fontSize('small')};
-
-          &::after {
-            content: ':';
-          }
-        }
-
-        &-value {
-          font-size: ${fontSize('small')};
-          flex: 1;
-          /* Now required (from chrome 48) to get overflow + flexbox behaving: */
-          min-width: 0;
-          color: ${scopeTheme('textColor')};
-        }
-      }
-    }
-
-    &-property-list {
-      &-controls {
-        margin-left: -4px;
-      }
-
-      &-field {
-        display: flex;
-        align-items: baseline;
-
-        &-label {
-          text-align: right;
-          width: 50%;
-          color: ${scopeTheme('textSecondaryColor')};
-          padding: 0 0.5em 0 0;
-          white-space: nowrap;
-          font-size: ${fontSize('small')};
-
-          &::after {
-            content: ':';
-          }
-        }
-
-        &-value {
-          font-size: ${fontSize('small')};
-          flex: 1;
-          /* Now required (from chrome 48) to get overflow + flexbox behaving: */
-          min-width: 0;
-          color: ${scopeTheme('textColor')};
-        }
-      }
-    }
-
-    &-generic-table {
-      width: 100%;
-
-      tr {
-        display: flex;
-        th, td {
-          padding: 0 5px;
-        }
-      }
-    }
-
-    &-table {
-      width: 100%;
-      border-spacing: 0;
-      /* need fixed for truncating, but that does not extend wide columns dynamically */
-      table-layout: fixed;
-
-      &-wrapper {
-        margin: 24px -4px;
+      .match {
+        background-color: ${props => transparentize(0.7, props.theme.colors.blue400)};
+        border: 1px solid ${color('blue400')};
       }
 
       &-header {
-        color: ${scopeTheme('textTertiaryColor')};
-        font-size: ${fontSize('small')};
-        text-align: right;
-        padding: 0;
+        ${colorable};
 
-        .node-details-table-header-sortable {
-          padding: 3px 4px;
-          cursor: pointer;
+        &-wrapper {
+          padding: 36px 36px 8px 36px;
         }
 
-        &-sorted {
-          color: ${scopeTheme('textSecondaryColor')};
+        &-label {
+          color: ${color('white')};
+          margin: 0;
+          width: 348px;
+          padding-top: 0;
         }
 
-        &-sorter {
-          margin: 0 0.35em;
-        }
-
-        &:first-child {
-          margin-right: 0;
-          text-align: left;
-        }
-      }
-
-      tbody {
-        position: relative;
-
-        .min-height-constraint {
+        .details-tools {
           position: absolute;
-          width: 0 !important;
-          opacity: 0;
-          top: 0;
+          top: 16px;
+          right: 24px;
+        }
+
+        &-notavailable {
+          background-color: ${scopeTheme('backgroundDarkColor')};
+        }
+
+      }
+
+      &-relatives {
+        margin-top: 4px;
+        font-size: ${fontSize('normal')};
+        color: ${color('white')};
+
+        &-link {
+          ${truncate};
+          ${btnOpacity};
+          display: inline-block;
+          margin-right: 0.5em;
+          cursor: pointer;
+          text-decoration: underline;
+          opacity: ${scopeTheme('linkOpacityDefault')};
+          max-width: 12em;
+        }
+
+        &-more {
+          ${btnOpacity};
+          padding: 0 2px;
+          cursor: pointer;
+          font-size: ${fontSize('tiny')};
+          font-weight: bold;
+          display: inline-block;
+          position: relative;
+          top: -5px;
         }
       }
 
-      &-node {
+      &-controls {
+        white-space: nowrap;
+        padding: 8px 0;
         font-size: ${fontSize('small')};
-        line-height: 1.5;
 
+        &-wrapper {
+          padding: 0 36px 0 32px;
+        }
+
+        .node-control-button {
+          color: ${color('white')};
+        }
+
+        &-spinner {
+          ${hideable};
+          color: ${color('white')};
+          margin-left: 8px;
+        }
+
+        &-error {
+          ${truncate};
+          float: right;
+          width: 55%;
+          padding-top: 6px;
+          text-align: left;
+          color: ${color('white')};
+
+          &-icon {
+            ${blinkable};
+            margin-right: 0.5em;
+          }
+        }
+      }
+
+      &-content {
+        flex: 1;
+        padding: 0 36px 0 36px;
+        overflow-y: auto;
+
+        &-loading {
+          margin-top: 48px;
+          text-align: center;
+          font-size: ${fontSize('huge')};
+          color: ${scopeTheme('textTertiaryColor')};
+        }
+
+        &-section {
+          margin: 16px 0;
+
+          &-header {
+            font-size: ${fontSize('normal')};
+            color: ${scopeTheme('textTertiaryColor')};
+            margin-bottom: 10px;
+          }
+        }
+      }
+
+      &-health {
+
+        &-wrapper {
+          display: flex;
+          justify-content: space-around;
+          align-content: center;
+          text-align: center;
+          flex-wrap: wrap;
+        }
+
+        &-overflow {
+          ${btnOpacity};
+          flex-basis: 33%;
+          display: flex;
+          flex-direction: row;
+          flex-wrap: wrap;
+          align-items: center;
+          opacity: 0.85;
+          cursor: pointer;
+          position: relative;
+          padding-bottom: 16px;
+
+          &-item {
+            padding: 4px 8px;
+            line-height: 1.2;
+            flex-basis: 48%;
+
+            &-value {
+              color: ${scopeTheme('textSecondaryColor')};
+              font-size: ${fontSize('normal')};
+            }
+
+            &-label {
+              color: ${scopeTheme('textSecondaryColor')};
+              font-size: ${fontSize('tiny')};
+            }
+          }
+        }
+
+        &-item {
+          padding: 8px 16px;
+          width: 33%;
+          display: flex;
+          flex-direction: column;
+          flex-grow: 1;
+
+          &-label {
+            color: ${scopeTheme('textSecondaryColor')};
+            font-size: ${fontSize('small')};
+          }
+
+          &-sparkline {
+            margin-top: auto;
+          }
+
+          &-placeholder {
+            font-size: ${fontSize('large')};
+            opacity: 0.2;
+            margin-bottom: 0.2em;
+          }
+        }
+
+        &-link-item {
+          ${btnOpacity};
+          cursor: pointer;
+          opacity: ${scopeTheme('linkOpacityDefault')};
+          width: 33%;
+          display: flex;
+          color: inherit;
+
+          .node-details-health-item {
+            width: auto;
+          }
+        }
+      }
+
+      &-info {
+
+        &-field {
+          display: flex;
+          align-items: baseline;
+
+          &-label {
+            text-align: right;
+            width: 30%;
+            color: ${scopeTheme('textSecondaryColor')};
+            padding: 0 0.5em 0 0;
+            white-space: nowrap;
+            font-size: ${fontSize('small')};
+
+            &::after {
+              content: ':';
+            }
+          }
+
+          &-value {
+            font-size: ${fontSize('small')};
+            flex: 1;
+            /* Now required (from chrome 48) to get overflow + flexbox behaving: */
+            min-width: 0;
+            color: ${scopeTheme('textColor')};
+          }
+        }
+      }
+
+      &-property-list {
+        &-controls {
+          margin-left: -4px;
+        }
+
+        &-field {
+          display: flex;
+          align-items: baseline;
+
+          &-label {
+            text-align: right;
+            width: 50%;
+            color: ${scopeTheme('textSecondaryColor')};
+            padding: 0 0.5em 0 0;
+            white-space: nowrap;
+            font-size: ${fontSize('small')};
+
+            &::after {
+              content: ':';
+            }
+          }
+
+          &-value {
+            font-size: ${fontSize('small')};
+            flex: 1;
+            /* Now required (from chrome 48) to get overflow + flexbox behaving: */
+            min-width: 0;
+            color: ${scopeTheme('textColor')};
+          }
+        }
+      }
+
+      &-generic-table {
+        width: 100%;
+
+        tr {
+          display: flex;
+          th, td {
+            padding: 0 5px;
+          }
+        }
+      }
+
+      &-table {
+        width: 100%;
+        border-spacing: 0;
+        /* need fixed for truncating, but that does not extend wide columns dynamically */
+        table-layout: fixed;
+
+        &-wrapper {
+          margin: 24px -4px;
+        }
+
+        &-header {
+          color: ${scopeTheme('textTertiaryColor')};
+          font-size: ${fontSize('small')};
+          text-align: right;
+          padding: 0;
+
+          .node-details-table-header-sortable {
+            padding: 3px 4px;
+            cursor: pointer;
+          }
+
+          &-sorted {
+            color: ${scopeTheme('textSecondaryColor')};
+          }
+
+          &-sorter {
+            margin: 0 0.35em;
+          }
+
+          &:first-child {
+            margin-right: 0;
+            text-align: left;
+          }
+        }
+
+        tbody {
+          position: relative;
+
+          .min-height-constraint {
+            position: absolute;
+            width: 0 !important;
+            opacity: 0;
+            top: 0;
+          }
+        }
+
+        &-node {
+          font-size: ${fontSize('small')};
+          line-height: 1.5;
+
+          &:hover, &.selected {
+            background-color: ${color('white')};
+          }
+
+          > * {
+            padding: 0 4px;
+          }
+
+          &-link {
+            ${btnOpacity};
+            text-decoration: underline;
+            cursor: pointer;
+            opacity: ${scopeTheme('linkOpacityDefault')};
+            color: ${scopeTheme('textColor')};
+          }
+
+          &-value, &-metric {
+            flex: 1;
+            margin-left: 0.5em;
+            text-align: right;
+          }
+
+          &-metric-link {
+            ${btnOpacity};
+            text-decoration: underline;
+            cursor: pointer;
+            opacity: ${scopeTheme('linkOpacityDefault')};
+            color: ${scopeTheme('textColor')};
+          }
+
+          &-value-scalar {
+            /* width: 2em; */
+            text-align: right;
+            margin-right: 0.5em;
+          }
+
+          &-value-minor,
+          &-value-unit {
+            font-size: ${fontSize('small')};
+            color: ${scopeTheme('textSecondaryColor')};
+          }
+        }
+      }
+    }
+
+
+
+    .node-resources {
+      &-metric-box {
+        ${palable};
+        cursor: pointer;
+        fill: ${props => transparentize(0.6, props.theme.colors.gray600)};
+
+        &-info {
+          background-color: ${props => transparentize(0.4, props.theme.colors.white)};
+          border-radius: ${borderRadius('soft')};
+          cursor: inherit;
+          padding: 5px;
+
+          .wrapper {
+            display: block;
+
+            &.label { font-size: ${fontSize('small')}; }
+            &.consumption { font-size: ${fontSize('tiny')}; }
+          }
+        }
+      }
+
+      &-layer-topology {
+        background-color: ${props => transparentize(0.05, props.theme.colors.gray50)};
+        border-radius: ${borderRadius('soft')};
+        border: 1px solid ${color('gray200')};
+        color: ${scopeTheme('textTertiaryColor')};
+        font-size: ${fontSize('normal')};
+        font-weight: bold;
+        padding-right: 20px;
+        text-align: right;
+        text-transform: capitalize;
+      }
+    }
+
+    /* This part sets the styles only for the 'real' node details table, not applying
+    them to the nodes grid, because there we control hovering from the JS.
+    NOTE: Maybe it would be nice to separate the class names between the two places
+    where node tables are used - i.e. it doesn't make sense that node-details-table
+    can also refer to the tables in the nodes grid. */
+    .details-wrapper .node-details-table {
+      &-node {
         &:hover, &.selected {
           background-color: ${color('white')};
         }
+      }
+    }
 
-        > * {
-          padding: 0 4px;
+    .node-control-button {
+      ${btnOpacity};
+      padding: 6px;
+      margin-left: 2px;
+      font-size: ${fontSize('small')};
+      color: ${scopeTheme('textSecondaryColor')};
+      cursor: pointer;
+      border: 1px solid transparent;
+      border-radius: ${borderRadius('soft')};
+      &:hover {
+        border-color: ${props => transparentize(0.4, props.theme.colors.white)};
+      }
+      &-pending, &-pending:hover {
+        opacity: 0.2;
+        border-color: transparent;
+        cursor: not-allowed;
+      }
+    }
+
+    .terminal {
+
+      &-app {
+        display: flex;
+        flex-flow: column;
+      }
+
+      &-embedded {
+        position: relative;
+        /* shadow of animation-wrapper is 10px, let it fit in here without being
+        overflow hiddened. */
+        flex: 1;
+        overflow-x: hidden;
+      }
+
+      &-animation-wrapper {
+        position: absolute;
+        /* some room for the drop shadow. */
+        top: 10px;
+        left: 10px;
+        bottom: 10px;
+        right: 0;
+        transition: transform 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000);
+        ${shadow2};
+      }
+
+      &-wrapper {
+        width: 100%;
+        height: 100%;
+        border: 0px solid ${color('black')};
+        color: ${color('gray50')};
+      }
+
+      &-header {
+        ${truncate};
+        color: ${color('white')};
+        height: ${scopeTheme('terminalHeaderHeight')};
+        padding: 8px 24px;
+        background-color: ${scopeTheme('textColor')};
+        position: relative;
+        font-size: ${fontSize('small')};
+        line-height: 28px;
+        border-top-left-radius: ${borderRadius('soft')};
+
+        &-title {
+          cursor: default;
         }
 
-        &-link {
-          ${btnOpacity};
-          text-decoration: underline;
+        &-tools {
+          position: absolute;
+          right: 8px;
+          top: 6px;
+
+          &-item, &-item-icon {
+            ${palable};
+            padding: 4px 5px;
+            color: ${color('white')};
+            cursor: pointer;
+            opacity: 0.7;
+            border: 1px solid transparent;
+            border-radius: ${borderRadius('soft')};
+
+            font-size: ${fontSize('tiny')};
+            font-weight: bold;
+
+            &:hover {
+              opacity: 1;
+              border-color: ${props => transparentize(0.4, props.theme.colors.white)};
+            }
+          }
+
+          &-item-icon {
+            font-size: ${fontSize('normal')};
+          }
+        }
+      }
+
+      &-embedded &-inner { top: ${scopeTheme('terminalHeaderHeight')}; }
+      &-app &-inner { top: 0; }
+      &-inner {
+        cursor: text;
+        font-family: ${props => props.theme.fontFamilies.monospace};
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background-color: ${color('black')};
+        padding: 8px;
+        box-sizing: content-box;
+        border-bottom-left-radius: ${borderRadius('soft')};
+
+        .terminal {
+          background-color: transparent !important;
+        }
+      }
+
+      &-status-bar {
+        font-family: ${props => props.theme.fontFamilies.regular};
+        position: absolute;
+        bottom: 16px;
+        right: 16px;
+        width: 50%;
+        padding: 16px 16px;
+        opacity: 0.8;
+        border-radius: ${borderRadius('soft')};
+
+        h3 {
+          margin: 4px 0;
+        }
+
+        &-message {
+          margin: 4px 0;
+          color: ${color('white')};
+        }
+
+        .link {
+          font-weight: bold;
           cursor: pointer;
-          opacity: ${scopeTheme('linkOpacityDefault')};
-          color: ${scopeTheme('textColor')};
+          float: right;
+        }
+      }
+
+      &-cursor {
+        color: ${color('black')};
+        background: ${color('gray50')};
+      }
+    }
+
+    .terminal-inactive .terminal-cursor {
+      visibility: hidden;
+    }
+
+    .metric {
+      &-unit {
+        padding-left: 0.25em;
+      }
+    }
+
+    .show-more {
+      ${btnOpacity};
+      border-top: 1px dotted ${scopeTheme('borderLightColor')};
+      padding: 0px 0;
+      margin-top: 4px;
+      text-align: right;
+      cursor: pointer;
+      color: ${scopeTheme('textSecondaryColor')};
+      font-size: ${fontSize('small')};
+
+      &-icon {
+        color: ${scopeTheme('textTertiaryColor')};
+        font-size: ${fontSize('normal')};
+        position: relative;
+        top: 1px;
+      }
+    }
+
+    .plugins {
+      margin-right: 0.5em;
+
+      &-label {
+        margin-right: 0.25em;
+      }
+
+      &-plugin {
+        cursor: default;
+      }
+
+      &-plugin + &-plugin:before {
+        content: ', ';
+      }
+
+      &-plugin-icon {
+        top: 1px;
+        position: relative;
+        font-size: ${fontSize('large')};
+        margin-right: 2px;
+      }
+
+      .error {
+        animation: blinking 2.0s 60 ${scopeTheme('baseEase')}; /* blink for 2 minutes */
+        color: ${scopeTheme('textSecondaryColor')};
+      }
+
+      &-empty {
+        opacity: ${scopeTheme('textSecondaryColor')};
+      }
+    }
+
+    .status {
+      padding: 2px 12px;
+      background-color: ${scopeTheme('bodyBackgroundColor')};
+      border-radius: ${borderRadius('soft')};
+      color: ${scopeTheme('textSecondaryColor')};
+      display: inline-block;
+      opacity: 0.9;
+
+      &-icon {
+        font-size: ${fontSize('normal')};
+        position: relative;
+        top: 0.125rem;
+        margin-right: 0.25rem;
+      }
+
+      &.status-loading {
+        animation: blinking 2.0s 150 ${scopeTheme('baseEase')}; /* keep blinking for 5 minutes */
+        text-transform: none;
+        color: ${scopeTheme('textColor')};
+      }
+    }
+
+    .topology-option, .metric-selector, .network-selector, .view-mode-selector, .time-control {
+      font-size: ${fontSize('normal')};
+      color: ${scopeTheme('textSecondaryColor')};
+      margin-bottom: 6px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      i {
+        font-size: ${fontSize('tiny')};
+        margin-left: 4px;
+        color: ${color('orange500')};
+      }
+
+      &-wrapper {
+        pointer-events: all;
+        border-radius: ${borderRadius('soft')};
+        border: 1px solid ${scopeTheme('backgroundDarkerColor')};
+        display: inline-block;
+        white-space: nowrap;
+      }
+
+      &-action {
+        ${btnOpacity};
+        padding: 3px 12px;
+        cursor: pointer;
+        display: inline-block;
+        background-color: ${scopeTheme('backgroundColor')};
+
+        &-selected, &:not([disabled]):hover {
+          color: ${scopeTheme('textDarkerColor')};
+          background-color: ${scopeTheme('backgroundDarkerColor')};
         }
 
-        &-value, &-metric {
-          flex: 1;
-          margin-left: 0.5em;
-          text-align: right;
+        &:first-child {
+          border-left: none;
+          border-top-left-radius: ${borderRadius('soft')};
+          border-bottom-left-radius: ${borderRadius('soft')};
         }
 
-        &-metric-link {
-          ${btnOpacity};
-          text-decoration: underline;
-          cursor: pointer;
-          opacity: ${scopeTheme('linkOpacityDefault')};
-          color: ${scopeTheme('textColor')};
-        }
-
-        &-value-scalar {
-          /* width: 2em; */
-          text-align: right;
-          margin-right: 0.5em;
-        }
-
-        &-value-minor,
-        &-value-unit {
-          font-size: ${fontSize('small')};
-          color: ${scopeTheme('textSecondaryColor')};
+        &:last-child {
+          border-top-right-radius: ${borderRadius('soft')};
+          border-bottom-right-radius: ${borderRadius('soft')};
         }
       }
     }
-  }
 
+    .metric-selector {
+      font-size: ${fontSize('small')};
+      margin-top: 6px;
+    }
 
+    .view-mode-selector, .time-control {
+      margin-left: 20px;
 
-  .node-resources {
-    &-metric-box {
-      ${palable};
-      cursor: pointer;
-      fill: ${props => transparentize(0.6, props.theme.colors.gray600)};
+      &-wrapper {
+        pointer-events: all;
+        border-color: ${scopeTheme('backgroundDarkerSecondaryColor')};
+        overflow: hidden;
+      }
+
+      &:first-child,
+      &:last-child {
+        .view-mode-selector-action {
+          border-radius: ${borderRadius('none')};
+        }
+      }
+
+      &-action {
+        background-color: transparent;
+
+        &-selected, &:not([disabled]):hover {
+          background-color: ${scopeTheme('backgroundDarkerColor')};
+        }
+
+        &:not(:last-child) {
+          border-right: 1px solid ${scopeTheme('backgroundDarkerSecondaryColor')};
+        }
+      }
+    }
+
+    .time-control {
+      margin-right: 20px;
+
+      &-controls {
+        align-items: center;
+        justify-content: flex-end;
+        display: flex;
+      }
+
+      &-spinner {
+        display: inline-block;
+        margin-right: 15px;
+        margin-top: 3px;
+
+        i {
+          color: ${scopeTheme('textSecondaryColor')};
+          font-size: ${fontSize('normal')};
+        }
+      }
 
       &-info {
-        background-color: ${props => transparentize(0.4, props.theme.colors.white)};
-        border-radius: ${borderRadius('soft')};
-        cursor: inherit;
-        padding: 5px;
+        ${blinkable};
+        display: block;
+        margin-top: 5px;
+        text-align: right;
+        pointer-events: all;
+        font-size: ${fontSize('small')};
+      }
+    }
 
-        .wrapper {
-          display: block;
+    .topology-option {
+      &-wrapper {
+        display: inline-flex;
+        flex-wrap: wrap;
+        overflow: hidden;
+        max-height: 27px;
+        transition: max-height 0.5s 0s ${scopeTheme('baseEase')};
 
-          &.label { font-size: ${fontSize('small')}; }
-          &.consumption { font-size: ${fontSize('tiny')}; }
+        .topology-option-action {
+          flex: 1 1 auto;
+          text-align: center;
+        }
+      }
+      
+        &:last-child :hover {
+        height: auto;
+        max-height: calc((13px * 1.5 + 3px + 3px) * 8); /* expand to display 8 rows */
+        overflow: auto;
+        transition: max-height 0.5s 0s ${scopeTheme('baseEase')};
+      } 
+
+      font-size: ${fontSize('small')};
+
+      &-action {
+        &-selected {
+          cursor: default;
         }
       }
     }
 
-    &-layer-topology {
-      background-color: ${props => transparentize(0.05, props.theme.colors.gray50)};
-      border-radius: ${borderRadius('soft')};
-      border: 1px solid ${color('gray200')};
-      color: ${scopeTheme('textTertiaryColor')};
-      font-size: ${fontSize('normal')};
-      font-weight: bold;
-      padding-right: 20px;
-      text-align: right;
-      text-transform: capitalize;
-    }
-  }
-
-  /* This part sets the styles only for the 'real' node details table, not applying
-  them to the nodes grid, because there we control hovering from the JS.
-  NOTE: Maybe it would be nice to separate the class names between the two places
-  where node tables are used - i.e. it doesn't make sense that node-details-table
-  can also refer to the tables in the nodes grid. */
-  .details-wrapper .node-details-table {
-    &-node {
-      &:hover, &.selected {
-        background-color: ${color('white')};
+    .view-mode-selector-wrapper, .time-control-wrapper {
+      .label { margin-left: 4px; }
+      i {
+        margin-left: 0;
+        color: ${scopeTheme('textSecondaryColor')};
       }
     }
-  }
 
-  .node-control-button {
-    ${btnOpacity};
-    padding: 6px;
-    margin-left: 2px;
-    font-size: ${fontSize('small')};
-    color: ${scopeTheme('textSecondaryColor')};
-    cursor: pointer;
-    border: 1px solid transparent;
-    border-radius: ${borderRadius('soft')};
-    &:hover {
-      border-color: ${props => transparentize(0.4, props.theme.colors.white)};
-    }
-    &-pending, &-pending:hover {
-      opacity: 0.2;
-      border-color: transparent;
-      cursor: not-allowed;
-    }
-  }
-
-  .terminal {
-
-    &-app {
-      display: flex;
-      flex-flow: column;
+    .network-selector-action {
+      border-top: 3px solid transparent;
+      border-bottom: 3px solid ${scopeTheme('backgroundDarkColor')};
     }
 
-    &-embedded {
-      position: relative;
-      /* shadow of animation-wrapper is 10px, let it fit in here without being
-      overflow hiddened. */
-      flex: 1;
-      overflow-x: hidden;
+    .warning {
+      display: inline-block;
+      cursor: pointer;
+      border: 1px dashed transparent;
+      text-transform: none;
+      border-radius: ${borderRadius('soft')};
+      margin-left: 4px;
+
+      &-wrapper {
+        display: flex;
+      }
+
+      &-text {
+        display: inline-block;
+        color: ${scopeTheme('textSecondaryColor')};
+        padding-left: 0.5em;
+      }
+
+      &-icon {
+        ${btnOpacity};
+      }
+
+      &-expanded {
+        margin-left: 0;
+        padding: 2px 4px;
+        border-color: ${scopeTheme('textTertiaryColor')};
+      }
+
+      &-expanded &-icon {
+        position: relative;
+        top: 4px;
+        left: 2px;
+      }
+
     }
 
-    &-animation-wrapper {
-      position: absolute;
-      /* some room for the drop shadow. */
-      top: 10px;
-      left: 10px;
-      bottom: 10px;
-      right: 0;
-      transition: transform 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000);
-      ${shadow2};
-    }
-
-    &-wrapper {
-      width: 100%;
-      height: 100%;
-      border: 0px solid ${color('black')};
-      color: ${color('gray50')};
-    }
-
-    &-header {
-      ${truncate};
-      color: ${color('white')};
-      height: ${scopeTheme('terminalHeaderHeight')};
-      padding: 8px 24px;
-      background-color: ${scopeTheme('textColor')};
-      position: relative;
+    .sidebar {
+      position: fixed;
+      bottom: 11px;
+      left: 11px;
+      padding: 5px;
       font-size: ${fontSize('small')};
-      line-height: 28px;
-      border-top-left-radius: ${borderRadius('soft')};
+      border-radius: ${borderRadius('soft')};
+      border: 1px solid transparent;
+      pointer-events: none;
+      max-width: 50%;
+    }
 
-      &-title {
-        cursor: default;
+    .sidebar-gridmode {
+      background-color: ${color('purple50')};
+      border-color: ${scopeTheme('backgroundDarkerColor')};
+      opacity: 0.9;
+    }
+
+    .search {
+      &-wrapper {
+        margin: 0 8px;
+        min-width: 160px;
+        text-align: right;
+      }
+    }
+
+    @keyframes blinking {
+      0%, 50%, 100% {
+        opacity: 1.0;
+      } 25% {
+        opacity: 0.5;
+      }
+    }
+
+    /*   
+    Help panel!
+    */
+
+    .help-panel {
+      z-index: ${props => props.theme.layers.modal};
+      background-color: ${color('white')};
+      ${shadow2};
+      display: flex;
+      position: relative;
+
+      &-wrapper {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+
+        display: flex;
+        justify-content: center;
+        align-items: flex-start;
+      }
+
+      &-header {
+        background-color: ${color('blue400')};
+        padding: 12px 24px;
+        color: ${color('white')};
+
+        h2 {
+          margin: 0;
+          font-size: ${fontSize('large')};
+        }
       }
 
       &-tools {
         position: absolute;
-        right: 8px;
         top: 6px;
+        right: 8px;
 
-        &-item, &-item-icon {
-          ${palable};
+        i {
+          ${btnOpacity};
           padding: 4px 5px;
-          color: ${color('white')};
+          margin-left: 2px;
+          font-size: ${fontSize('normal')};
+          color: ${color('purple400')};
           cursor: pointer;
-          opacity: 0.7;
           border: 1px solid transparent;
           border-radius: ${borderRadius('soft')};
 
-          font-size: ${fontSize('tiny')};
-          font-weight: bold;
-
           &:hover {
-            opacity: 1;
-            border-color: ${props => transparentize(0.4, props.theme.colors.white)};
+            border-color: ${props => transparentize(0.4, props.theme.colors.purple400)};
           }
         }
 
-        &-item-icon {
-          font-size: ${fontSize('normal')};
-        }
-      }
-    }
-
-    &-embedded &-inner { top: ${scopeTheme('terminalHeaderHeight')}; }
-    &-app &-inner { top: 0; }
-    &-inner {
-      cursor: text;
-      font-family: ${props => props.theme.fontFamilies.monospace};
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      background-color: ${color('black')};
-      padding: 8px;
-      box-sizing: content-box;
-      border-bottom-left-radius: ${borderRadius('soft')};
-
-      .terminal {
-        background-color: transparent !important;
-      }
-    }
-
-    &-status-bar {
-      font-family: ${props => props.theme.fontFamilies.regular};
-      position: absolute;
-      bottom: 16px;
-      right: 16px;
-      width: 50%;
-      padding: 16px 16px;
-      opacity: 0.8;
-      border-radius: ${borderRadius('soft')};
-
-      h3 {
-        margin: 4px 0;
       }
 
-      &-message {
-        margin: 4px 0;
-        color: ${color('white')};
-      }
-
-      .link {
-        font-weight: bold;
-        cursor: pointer;
-        float: right;
-      }
-    }
-
-    &-cursor {
-      color: ${color('black')};
-      background: ${color('gray50')};
-    }
-  }
-
-  .terminal-inactive .terminal-cursor {
-    visibility: hidden;
-  }
-
-  .metric {
-    &-unit {
-      padding-left: 0.25em;
-    }
-  }
-
-  .show-more {
-    ${btnOpacity};
-    border-top: 1px dotted ${scopeTheme('borderLightColor')};
-    padding: 0px 0;
-    margin-top: 4px;
-    text-align: right;
-    cursor: pointer;
-    color: ${scopeTheme('textSecondaryColor')};
-    font-size: ${fontSize('small')};
-
-    &-icon {
-      color: ${scopeTheme('textTertiaryColor')};
-      font-size: ${fontSize('normal')};
-      position: relative;
-      top: 1px;
-    }
-  }
-
-  .plugins {
-    margin-right: 0.5em;
-
-    &-label {
-      margin-right: 0.25em;
-    }
-
-    &-plugin {
-      cursor: default;
-    }
-
-    &-plugin + &-plugin:before {
-      content: ', ';
-    }
-
-    &-plugin-icon {
-      top: 1px;
-      position: relative;
-      font-size: ${fontSize('large')};
-      margin-right: 2px;
-    }
-
-    .error {
-      animation: blinking 2.0s 60 ${scopeTheme('baseEase')}; /* blink for 2 minutes */
-      color: ${scopeTheme('textSecondaryColor')};
-    }
-
-    &-empty {
-      opacity: ${scopeTheme('textSecondaryColor')};
-    }
-  }
-
-  .status {
-    padding: 2px 12px;
-    background-color: ${scopeTheme('bodyBackgroundColor')};
-    border-radius: ${borderRadius('soft')};
-    color: ${scopeTheme('textSecondaryColor')};
-    display: inline-block;
-    opacity: 0.9;
-
-    &-icon {
-      font-size: ${fontSize('normal')};
-      position: relative;
-      top: 0.125rem;
-      margin-right: 0.25rem;
-    }
-
-    &.status-loading {
-      animation: blinking 2.0s 150 ${scopeTheme('baseEase')}; /* keep blinking for 5 minutes */
-      text-transform: none;
-      color: ${scopeTheme('textColor')};
-    }
-  }
-
-  .topology-option, .metric-selector, .network-selector, .view-mode-selector, .time-control {
-    font-size: ${fontSize('normal')};
-    color: ${scopeTheme('textSecondaryColor')};
-    margin-bottom: 6px;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-
-    i {
-      font-size: ${fontSize('tiny')};
-      margin-left: 4px;
-      color: ${color('orange500')};
-    }
-
-    &-wrapper {
-      pointer-events: all;
-      border-radius: ${borderRadius('soft')};
-      border: 1px solid ${scopeTheme('backgroundDarkerColor')};
-      display: inline-block;
-      white-space: nowrap;
-    }
-
-    &-action {
-      ${btnOpacity};
-      padding: 3px 12px;
-      cursor: pointer;
-      display: inline-block;
-      background-color: ${scopeTheme('backgroundColor')};
-
-      &-selected, &:not([disabled]):hover {
-        color: ${scopeTheme('textDarkerColor')};
-        background-color: ${scopeTheme('backgroundDarkerColor')};
-      }
-
-      &:first-child {
-        border-left: none;
-        border-top-left-radius: ${borderRadius('soft')};
-        border-bottom-left-radius: ${borderRadius('soft')};
-      }
-
-      &:last-child {
-        border-top-right-radius: ${borderRadius('soft')};
-        border-bottom-right-radius: ${borderRadius('soft')};
-      }
-    }
-  }
-
-  .metric-selector {
-    font-size: ${fontSize('small')};
-    margin-top: 6px;
-  }
-
-  .view-mode-selector, .time-control {
-    margin-left: 20px;
-
-    &-wrapper {
-      pointer-events: all;
-      border-color: ${scopeTheme('backgroundDarkerSecondaryColor')};
-      overflow: hidden;
-    }
-
-    &:first-child,
-    &:last-child {
-      .view-mode-selector-action {
-        border-radius: ${borderRadius('none')};
-      }
-    }
-
-    &-action {
-      background-color: transparent;
-
-      &-selected, &:not([disabled]):hover {
-        background-color: ${scopeTheme('backgroundDarkerColor')};
-      }
-
-      &:not(:last-child) {
-        border-right: 1px solid ${scopeTheme('backgroundDarkerSecondaryColor')};
-      }
-    }
-  }
-
-  .time-control {
-    margin-right: 20px;
-
-    &-controls {
-      align-items: center;
-      justify-content: flex-end;
-      display: flex;
-    }
-
-    &-spinner {
-      display: inline-block;
-      margin-right: 15px;
-      margin-top: 3px;
-
-      i {
-        color: ${scopeTheme('textSecondaryColor')};
-        font-size: ${fontSize('normal')};
-      }
-    }
-
-    &-info {
-      ${blinkable};
-      display: block;
-      margin-top: 5px;
-      text-align: right;
-      pointer-events: all;
-      font-size: ${fontSize('small')};
-    }
-  }
-
-  .topology-option {
-    &-wrapper {
-      display: inline-flex;
-      flex-wrap: wrap;
-      overflow: hidden;
-      max-height: 27px;
-      transition: max-height 0.5s 0s ${scopeTheme('baseEase')};
-
-      .topology-option-action {
-        flex: 1 1 auto;
-        text-align: center;
-      }
-    }
-    
-      &:last-child :hover {
-      height: auto;
-      max-height: calc((13px * 1.5 + 3px + 3px) * 8); /* expand to display 8 rows */
-      overflow: auto;
-      transition: max-height 0.5s 0s ${scopeTheme('baseEase')};
-    } 
-
-    font-size: ${fontSize('small')};
-
-    &-action {
-      &-selected {
-        cursor: default;
-      }
-    }
-  }
-
-  .view-mode-selector-wrapper, .time-control-wrapper {
-    .label { margin-left: 4px; }
-    i {
-      margin-left: 0;
-      color: ${scopeTheme('textSecondaryColor')};
-    }
-  }
-
-  .network-selector-action {
-    border-top: 3px solid transparent;
-    border-bottom: 3px solid ${scopeTheme('backgroundDarkColor')};
-  }
-
-  .warning {
-    display: inline-block;
-    cursor: pointer;
-    border: 1px dashed transparent;
-    text-transform: none;
-    border-radius: ${borderRadius('soft')};
-    margin-left: 4px;
-
-    &-wrapper {
-      display: flex;
-    }
-
-    &-text {
-      display: inline-block;
-      color: ${scopeTheme('textSecondaryColor')};
-      padding-left: 0.5em;
-    }
-
-    &-icon {
-      ${btnOpacity};
-    }
-
-    &-expanded {
-      margin-left: 0;
-      padding: 2px 4px;
-      border-color: ${scopeTheme('textTertiaryColor')};
-    }
-
-    &-expanded &-icon {
-      position: relative;
-      top: 4px;
-      left: 2px;
-    }
-
-  }
-
-  .sidebar {
-    position: fixed;
-    bottom: 11px;
-    left: 11px;
-    padding: 5px;
-    font-size: ${fontSize('small')};
-    border-radius: ${borderRadius('soft')};
-    border: 1px solid transparent;
-    pointer-events: none;
-    max-width: 50%;
-  }
-
-  .sidebar-gridmode {
-    background-color: ${color('purple50')};
-    border-color: ${scopeTheme('backgroundDarkerColor')};
-    opacity: 0.9;
-  }
-
-  .search {
-    &-wrapper {
-      margin: 0 8px;
-      min-width: 160px;
-      text-align: right;
-    }
-  }
-
-  @keyframes blinking {
-    0%, 50%, 100% {
-      opacity: 1.0;
-    } 25% {
-      opacity: 0.5;
-    }
-  }
-
-  /*   
-  Help panel!
-   */
-
-  .help-panel {
-    z-index: ${props => props.theme.layers.modal};
-    background-color: ${color('white')};
-    ${shadow2};
-    display: flex;
-    position: relative;
-
-    &-wrapper {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-
-      display: flex;
-      justify-content: center;
-      align-items: flex-start;
-    }
-
-    &-header {
-      background-color: ${color('blue400')};
-      padding: 12px 24px;
-      color: ${color('white')};
-
-      h2 {
-        margin: 0;
-        font-size: ${fontSize('large')};
-      }
-    }
-
-    &-tools {
-      position: absolute;
-      top: 6px;
-      right: 8px;
-
-      i {
-        ${btnOpacity};
-        padding: 4px 5px;
-        margin-left: 2px;
-        font-size: ${fontSize('normal')};
-        color: ${color('purple400')};
-        cursor: pointer;
-        border: 1px solid transparent;
-        border-radius: ${borderRadius('soft')};
-
-        &:hover {
-          border-color: ${props => transparentize(0.4, props.theme.colors.purple400)};
-        }
-      }
-
-    }
-
-    &-main {
-      display: flex;
-      padding: 12px 36px 36px 36px;
-      flex-direction: row;
-      align-items: stretch;
-
-      h2 {
-        line-height: 150%;
-        font-size: ${fontSize('large')};
-        color: ${color('purple400')};
-        padding: 4px 0;
-        border-bottom: 1px solid ${props => transparentize(0.9, props.theme.colors.purple400)};
-      }
-
-      h3 {
-        font-size: ${fontSize('normal')};
-        color: ${color('purple400')};
-        padding: 4px 0;
-      }
-
-      p {
-        margin: 0;
-      }
-    }
-
-    &-shortcuts {
-      margin-right: 36px;
-
-      &-shortcut {
-        kbd {
-          display: inline-block;
-          padding: 3px 5px;
-          font-size: ${fontSize('tiny')};
-          line-height: 10px;
-          color: ${color('gray600')};
-          vertical-align: middle;
-          background-color: ${color('white')};
-          border: solid 1px ${color('gray200')};
-          border-bottom-color: ${color('gray600')};
-          border-radius: ${borderRadius('soft')};
-          box-shadow: inset 0 -1px 0 ${color('gray600')};
-        }
-        div.key {
-          width: 60px;
-          display: inline-block;
-        }
-        div.label {
-          display: inline-block;
-        }
-      }
-    }
-
-    &-search {
-      margin-right: 36px;
-
-      &-row {
+      &-main {
         display: flex;
+        padding: 12px 36px 36px 36px;
         flex-direction: row;
+        align-items: stretch;
 
-        &-term {
-          flex: 1;
-          color: ${scopeTheme('textSecondaryColor')};
-          i {
-            margin-right: 5px;
-          }
+        h2 {
+          line-height: 150%;
+          font-size: ${fontSize('large')};
+          color: ${color('purple400')};
+          padding: 4px 0;
+          border-bottom: 1px solid ${props => transparentize(0.9, props.theme.colors.purple400)};
         }
 
-        &-term-label {
-          flex: 1;
-          b {
-            color: ${scopeTheme('textSecondaryColor')};
+        h3 {
+          font-size: ${fontSize('normal')};
+          color: ${color('purple400')};
+          padding: 4px 0;
+        }
+
+        p {
+          margin: 0;
+        }
+      }
+
+      &-shortcuts {
+        margin-right: 36px;
+
+        &-shortcut {
+          kbd {
+            display: inline-block;
+            padding: 3px 5px;
+            font-size: ${fontSize('tiny')};
+            line-height: 10px;
+            color: ${color('gray600')};
+            vertical-align: middle;
+            background-color: ${color('white')};
+            border: solid 1px ${color('gray200')};
+            border-bottom-color: ${color('gray600')};
+            border-radius: ${borderRadius('soft')};
+            box-shadow: inset 0 -1px 0 ${color('gray600')};
+          }
+          div.key {
+            width: 60px;
+            display: inline-block;
+          }
+          div.label {
+            display: inline-block;
           }
         }
       }
-    }
 
-    &-fields {
-      display: flex;
-      flex-direction: column;
+      &-search {
+        margin-right: 36px;
 
-      &-current-topology {
-        color: ${color('purple400')};
+        &-row {
+          display: flex;
+          flex-direction: row;
+
+          &-term {
+            flex: 1;
+            color: ${scopeTheme('textSecondaryColor')};
+            i {
+              margin-right: 5px;
+            }
+          }
+
+          &-term-label {
+            flex: 1;
+            b {
+              color: ${scopeTheme('textSecondaryColor')};
+            }
+          }
+        }
       }
 
       &-fields {
         display: flex;
-        align-items: stretch;
+        flex-direction: column;
 
-        &-column {
+        &-current-topology {
+          color: ${color('purple400')};
+        }
+
+        &-fields {
           display: flex;
-          flex-direction: column;
-          flex: 1;
-          margin-right: 12px;
+          align-items: stretch;
 
-          &-content {
-            overflow: auto;
-            /* 160px for top and bottom margins and the rest of the help window
-            is about 160px too.
-            Notes: Firefox gets a bit messy if you try and bubble
-            heights + overflow up (min-height issue + still doesn't work v.well),
-            so this is a bit of a hack. */
-            max-height: calc(100vh - 160px - 160px - 160px);
+          &-column {
+            display: flex;
+            flex-direction: column;
+            flex: 1;
+            margin-right: 12px;
+
+            &-content {
+              overflow: auto;
+              /* 160px for top and bottom margins and the rest of the help window
+              is about 160px too.
+              Notes: Firefox gets a bit messy if you try and bubble
+              heights + overflow up (min-height issue + still doesn't work v.well),
+              so this is a bit of a hack. */
+              max-height: calc(100vh - 160px - 160px - 160px);
+            }
           }
         }
       }
     }
-  }
 
-  /*   
-  Zoom control
-   */
+    /*   
+    Zoom control
+    */
 
-  .zoom-control {
-    ${overlayWrapper};
-    flex-direction: column;
-    padding: 5px 7px 0;
-    bottom: 50px;
-    right: 40px;
+    .zoom-control {
+      ${overlayWrapper};
+      flex-direction: column;
+      padding: 5px 7px 0;
+      bottom: 50px;
+      right: 40px;
 
-    a:hover { border-color: transparent; }
+      a:hover { border-color: transparent; }
 
-    .rc-slider {
-      margin: 5px 0;
-      height: 60px;
-    }
-  }
-
-  /*   
-  Debug panel!
-   */
-
-  .debug-panel {
-    ${shadow2};
-    background-color: ${color('white')};
-    top: 80px;
-    position: absolute;
-    padding: 10px;
-    left: 10px;
-    z-index: ${props => props.theme.layers.modal};
-
-    opacity: 0.3;
-
-    &:hover {
-      opacity: 1;
-    }
-
-    table {
-      display: inline-block;
-      border-collapse: collapse;
-      margin: 4px 2px;
-
-      td {
-        width: 10px;
-        height: 10px;
-      }
-    }
-  }
-
-  /*   
-  Nodes grid.
-   */
-
-  .nodes-grid {
-    tr {
-      border-radius: ${borderRadius('soft')};
-    }
-
-    &-label-minor {
-      opacity: 0.7;
-    }
-
-    &-id-column {
-      margin: -3px -4px;
-      padding: 2px 4px;
-      display: flex;
-      div {
-        flex: 1;
+      .rc-slider {
+        margin: 5px 0;
+        height: 60px;
       }
     }
 
-    .node-details-table-wrapper-wrapper {
+    /*   
+    Debug panel!
+    */
 
-      flex: 1;
-      display: flex;
-      flex-direction: row;
-      width: 100%;
-
-      .node-details-table-wrapper {
-        margin: 0;
-        flex: 1;
-      }
-
-      .nodes-grid-graph {
-        position: relative;
-        margin-top: 24px;
-      }
-
-      .node-details-table-node > * {
-        padding: 3px 4px;
-      }
-
-      /* Keeping the row height fixed is important for locking the rows on hover. */
-      .node-details-table-node, thead tr {
-        height: 28px;
-      }
-
-      tr:nth-child(even) {
-        background: ${color('gray100')};
-      }
-
-      tbody tr {
-        border: 1px solid transparent;
-        border-radius: ${borderRadius('soft')};
-        cursor: pointer;
-      }
-
-      /* We fully control hovering of the grid rows from JS,
-      because we want consistent behaviour between the
-      visual and row locking logic that happens on hover. */
-      tbody tr.selected, tbody tr.focused {
-        background-color: ${props => transparentize(0.85, props.theme.colors.blue400)};
-        border: 1px solid ${color('blue400')};
-      }
-    }
-
-    .scroll-body {
-
-      table {
-        border-bottom: 1px solid ${color('gray200')};
-      }
-
-      thead, tbody tr {
-        display: table;
-        width: 100%;
-        table-layout: fixed;
-      }
-
-      tbody:after {
-        content: '';
-        display: block;
-        /* height of the controls so you can scroll the last row up above them
-        and have a good look. */
-        height: 140px;
-      }
-
-      thead {
-        box-shadow: 0 4px 2px -2px ${props => transparentize(0.84, props.theme.colors.black)};
-        border-bottom: 1px solid ${color('gray600')};
-      }
-
-      tbody {
-        display: block;
-        overflow-y: scroll;
-      }
-    }
-  }
-
-  .troubleshooting-menu {
-    display: flex;
-    position: relative;
-
-    &-wrapper {
-      height: 100%;
-      width: 100%;
-      align-items: center;
-      display: flex;
-      justify-content: center;
-      position: absolute;
-    }
-
-    &-content {
-      position: relative;
-      background-color: ${color('white')};
-      padding: 20px;
+    .debug-panel {
       ${shadow2};
+      background-color: ${color('white')};
+      top: 80px;
+      position: absolute;
+      padding: 10px;
+      left: 10px;
       z-index: ${props => props.theme.layers.modal};
-    }
 
-    &-item {
-      height: 40px;
-      .soft { opacity: 0.6; }
-    }
-
-    button {
-      border: 0;
-      background-color: transparent;
-      cursor: pointer;
-      padding: 0;
-      outline: 0;
-    }
-
-    button, a {
-      color: ${color('purple900')};
+      opacity: 0.3;
 
       &:hover {
-        color: ${scopeTheme('textColor')};
+        opacity: 1;
+      }
+
+      table {
+        display: inline-block;
+        border-collapse: collapse;
+        margin: 4px 2px;
+
+        td {
+          width: 10px;
+          height: 10px;
+        }
       }
     }
 
-    i {
-      width: 20px;
-      text-align: center;
-      margin-right: 10px;
+    /*   
+    Nodes grid.
+    */
+
+    .nodes-grid {
+      tr {
+        border-radius: ${borderRadius('soft')};
+      }
+
+      &-label-minor {
+        opacity: 0.7;
+      }
+
+      &-id-column {
+        margin: -3px -4px;
+        padding: 2px 4px;
+        display: flex;
+        div {
+          flex: 1;
+        }
+      }
+
+      .node-details-table-wrapper-wrapper {
+
+        flex: 1;
+        display: flex;
+        flex-direction: row;
+        width: 100%;
+
+        .node-details-table-wrapper {
+          margin: 0;
+          flex: 1;
+        }
+
+        .nodes-grid-graph {
+          position: relative;
+          margin-top: 24px;
+        }
+
+        .node-details-table-node > * {
+          padding: 3px 4px;
+        }
+
+        /* Keeping the row height fixed is important for locking the rows on hover. */
+        .node-details-table-node, thead tr {
+          height: 28px;
+        }
+
+        tr:nth-child(even) {
+          background: ${color('gray100')};
+        }
+
+        tbody tr {
+          border: 1px solid transparent;
+          border-radius: ${borderRadius('soft')};
+          cursor: pointer;
+        }
+
+        /* We fully control hovering of the grid rows from JS,
+        because we want consistent behaviour between the
+        visual and row locking logic that happens on hover. */
+        tbody tr.selected, tbody tr.focused {
+          background-color: ${props => transparentize(0.85, props.theme.colors.blue400)};
+          border: 1px solid ${color('blue400')};
+        }
+      }
+
+      .scroll-body {
+
+        table {
+          border-bottom: 1px solid ${color('gray200')};
+        }
+
+        thead, tbody tr {
+          display: table;
+          width: 100%;
+          table-layout: fixed;
+        }
+
+        tbody:after {
+          content: '';
+          display: block;
+          /* height of the controls so you can scroll the last row up above them
+          and have a good look. */
+          height: 140px;
+        }
+
+        thead {
+          box-shadow: 0 4px 2px -2px ${props => transparentize(0.84, props.theme.colors.black)};
+          border-bottom: 1px solid ${color('gray600')};
+        }
+
+        tbody {
+          display: block;
+          overflow-y: scroll;
+        }
+      }
     }
 
-    .fa.fa-times {
-      width: 25px;
-    }
-  }
+    .troubleshooting-menu {
+      display: flex;
+      position: relative;
 
-  @media (max-width: 1330px) {
-    .view-mode-selector .label { display: none; }
+      &-wrapper {
+        height: 100%;
+        width: 100%;
+        align-items: center;
+        display: flex;
+        justify-content: center;
+        position: absolute;
+      }
+
+      &-content {
+        position: relative;
+        background-color: ${color('white')};
+        padding: 20px;
+        ${shadow2};
+        z-index: ${props => props.theme.layers.modal};
+      }
+
+      &-item {
+        height: 40px;
+        .soft { opacity: 0.6; }
+      }
+
+      button {
+        border: 0;
+        background-color: transparent;
+        cursor: pointer;
+        padding: 0;
+        outline: 0;
+      }
+
+      button, a {
+        color: ${color('purple900')};
+
+        &:hover {
+          color: ${scopeTheme('textColor')};
+        }
+      }
+
+      i {
+        width: 20px;
+        text-align: center;
+        margin-right: 10px;
+      }
+
+      .fa.fa-times {
+        width: 25px;
+      }
+    }
+
+    @media (max-width: 1330px) {
+      .view-mode-selector .label { display: none; }
+    }
   }
 
 
diff --git a/client/app/scripts/themes/contrast.js b/client/app/scripts/themes/contrast.js
index 8c433de62..4d0b5d977 100644
--- a/client/app/scripts/themes/contrast.js
+++ b/client/app/scripts/themes/contrast.js
@@ -1,28 +1,27 @@
-import { color } from 'weaveworks-ui-components/lib/theme/selectors';
-
+import theme from 'weaveworks-ui-components/lib/theme';
 import defaultTheme from './default';
 
 const contrastTheme = {
   ...defaultTheme,
 
   /* contrast overrides */
-  backgroundColor: color('white'),
-  backgroundDarkerColor: color('purple200'),
-  backgroundDarkerSecondaryColor: color('purple200'),
-  bodyBackgroundColor: color('white'),
-  borderLightColor: color('gray600'),
+  backgroundColor: theme.colors.white,
+  backgroundDarkerColor: theme.colors.purple200,
+  backgroundDarkerSecondaryColor: theme.colors.purple200,
+  bodyBackgroundColor: theme.colors.white,
+  borderLightColor: theme.colors.gray600,
   btnOpacityDefault: 1,
   btnOpacityDisabled: 0.4,
   btnOpacitySelected: 1,
-  edgeColor: color('black'),
+  edgeColor: theme.colors.black,
   edgeHighlightOpacity: 0.3,
-  labelBackgroundColor: color('white'),
+  labelBackgroundColor: theme.colors.white,
   linkOpacityDefault: 1,
   nodeElementsInBackgroundOpacity: 0.4,
-  textColor: color('black'),
-  textDarkerColor: color('black'),
-  textSecondaryColor: color('black'),
-  textTertiaryColor: color('black'),
+  textColor: theme.colors.black,
+  textDarkerColor: theme.colors.black,
+  textSecondaryColor: theme.colors.black,
+  textTertiaryColor: theme.colors.black,
 };
 
 export default contrastTheme;
diff --git a/client/app/scripts/themes/default.js b/client/app/scripts/themes/default.js
index 05194838c..0e6e8b475 100644
--- a/client/app/scripts/themes/default.js
+++ b/client/app/scripts/themes/default.js
@@ -1,30 +1,30 @@
-import { color } from 'weaveworks-ui-components/lib/theme/selectors';
+import theme from 'weaveworks-ui-components/lib/theme';
 import { transparentize } from 'polished';
 
 const defaultTheme = {
-  backgroundColor: color('gray50'),
-  backgroundDarkColor: color('purple900'),
-  backgroundDarkerColor: color('purple100'),
-  backgroundDarkerSecondaryColor: color('gray50'),
+  backgroundColor: theme.colors.gray50,
+  backgroundDarkColor: theme.colors.purple900,
+  backgroundDarkerColor: theme.colors.purple100,
+  backgroundDarkerSecondaryColor: theme.colors.gray50,
   baseEase: 'ease-in-out',
-  bodyBackgroundColor: color('purple25'),
-  borderLightColor: color('purple100'),
+  bodyBackgroundColor: theme.colors.purple25,
+  borderLightColor: theme.colors.purple100,
   btnOpacityDefault: 0.9,
   btnOpacityDisabled: 0.25,
   btnOpacityHover: 1,
   btnOpacitySelected: 0.9,
   detailsWindowPaddingLeft: '30px',
   detailsWindowWidth: '420px',
-  edgeColor: color('purple500'),
+  edgeColor: theme.colors.purple500,
   edgeHighlightOpacity: 0.1,
-  labelBackgroundColor: props => transparentize(0.3, props.theme.colors.purple25),
+  labelBackgroundColor: transparentize(0.3, theme.colors.purple25),
   linkOpacityDefault: 0.8,
   nodeElementsInBackgroundOpacity: 0.7,
   terminalHeaderHeight: '44px',
-  textColor: color('purple800'),
-  textDarkerColor: color('purple900'),
-  textSecondaryColor: color('purple600'),
-  textTertiaryColor: color('purple400'),
+  textColor: theme.colors.purple800,
+  textDarkerColor: theme.colors.purple900,
+  textSecondaryColor: theme.colors.purple600,
+  textTertiaryColor: theme.colors.purple400,
   timelineHeight: '55px',
 };