diff --git a/src/ui/public/styles/variables/colors.less b/src/ui/public/styles/variables/colors.less
index 84269c3a6e4e5..617c49fede7af 100644
--- a/src/ui/public/styles/variables/colors.less
+++ b/src/ui/public/styles/variables/colors.less
@@ -17,6 +17,8 @@
 @globalColorTeal: #00A69B;
 @globalColorOrange: #E5830E;
 @globalColorPurple: #7800A6;
+@globalColorSlightHue: #909AA1;
+@globalColorFocus: #e6f2f6;
 
 //## Gray and brand colors for use across Bootstrap.
 
diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/collapsible_statement.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/collapsible_statement.js
index 97daa4fa6b515..106e7de43d40b 100644
--- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/collapsible_statement.js
+++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/collapsible_statement.js
@@ -25,9 +25,9 @@ function renderStatementName(name, onVertexSelected) {
         color="text"
         size="xs"
         onClick={onVertexSelected}
-        className="cv-ifElseStatement__title"
+        flush="left"
       >
-        <span className="cv-ifElseStatement__name">{name}</span>
+        <span className="configViewer__conditional">{name}</span>
       </EuiButtonEmpty>
     </EuiFlexItem>
   );
@@ -45,7 +45,6 @@ function renderIfStatement({ condition }, onVertexSelected) {
           fontSize="s"
           paddingSize="none"
           transparentBackground={true}
-          className="cv-ifStatement__condition"
         >
           {condition}
         </EuiCodeBlock>
@@ -88,14 +87,18 @@ export function CollapsibleStatement(props) {
   };
 
   return (
-    <EuiFlexGroup responsive={false} gutterSize="xs">
+    <EuiFlexGroup
+      responsive={false}
+      gutterSize="none"
+      alignItems="center"
+      className="configViewer__statement"
+    >
       <EuiFlexItem
         key={id}
         grow={false}
       >
         <EuiButtonIcon
           aria-label
-          className="cv-ifElseStatement__toggle"
           color="text"
           iconType={getToggleIconType(isCollapsed)}
           onClick={toggleClicked}
diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/config_viewer.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/config_viewer.js
index 392a135b338ec..417f76da5f084 100644
--- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/config_viewer.js
+++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/config_viewer.js
@@ -9,6 +9,11 @@ import PropTypes from 'prop-types';
 import { DetailDrawer } from '../detail_drawer';
 import { Queue } from './queue';
 import { StatementSection } from './statement_section';
+import {
+  EuiSpacer,
+  EuiPage,
+  EuiPageContent,
+} from '@elastic/eui';
 
 export class ConfigViewer extends React.Component {
   constructor() {
@@ -64,31 +69,36 @@ export class ConfigViewer extends React.Component {
     } = this.props.pipeline;
 
     return (
-      <div>
-        <StatementSection
-          iconType="logstashInput"
-          headingText="Inputs"
-          elements={inputs}
-          onShowVertexDetails={this.onShowVertexDetails}
-          detailVertex={this.state.detailDrawer.vertex}
-        />
-        <Queue queue={queue} />
-        <StatementSection
-          iconType="logstashFilter"
-          headingText="Filters"
-          elements={filters}
-          onShowVertexDetails={this.onShowVertexDetails}
-          detailVertex={this.state.detailDrawer.vertex}
-        />
-        <StatementSection
-          iconType="logstashOutput"
-          headingText="Outputs"
-          elements={outputs}
-          onShowVertexDetails={this.onShowVertexDetails}
-          detailVertex={this.state.detailDrawer.vertex}
-        />
-        { this.renderDetailDrawer() }
-      </div>
+      <EuiPage>
+        <EuiPageContent verticalPosition="center" horizontalPosition="center" className="configViewer">
+          <StatementSection
+            iconType="logstashInput"
+            headingText="Inputs"
+            elements={inputs}
+            onShowVertexDetails={this.onShowVertexDetails}
+            detailVertex={this.state.detailDrawer.vertex}
+          />
+          <EuiSpacer />
+          <Queue queue={queue} />
+          <EuiSpacer />
+          <StatementSection
+            iconType="logstashFilter"
+            headingText="Filters"
+            elements={filters}
+            onShowVertexDetails={this.onShowVertexDetails}
+            detailVertex={this.state.detailDrawer.vertex}
+          />
+          <EuiSpacer />
+          <StatementSection
+            iconType="logstashOutput"
+            headingText="Outputs"
+            elements={outputs}
+            onShowVertexDetails={this.onShowVertexDetails}
+            detailVertex={this.state.detailDrawer.vertex}
+          />
+          { this.renderDetailDrawer() }
+        </EuiPageContent>
+      </EuiPage>
     );
   }
 }
diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/metric.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/metric.js
index d48c0f60c85c0..feb74298458fc 100644
--- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/metric.js
+++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/metric.js
@@ -6,17 +6,42 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { EuiFlexItem } from '@elastic/eui';
+import {
+  EuiFlexItem,
+  EuiBadge,
+  EuiText,
+} from '@elastic/eui';
+import classNames from 'classnames';
 
-export function Metric({ className, value }) {
+export function Metric({ className, value, warning }) {
+
+  const classes = classNames(
+    'configViewer__metric',
+    className,
+  );
+
+  let stylizedValue;
+  if (warning) {
+    stylizedValue = (
+      <EuiBadge color="warning" classname={className}>
+        {value}
+      </EuiBadge>
+    );
+  } else {
+    stylizedValue = (
+      <EuiText size="s" color="subdued" className={classes}>
+        <span>
+          {value}
+        </span>
+      </EuiText>
+    );
+  }
   return (
     <EuiFlexItem
+      className="configViewer__metricFlexItem"
       grow={false}
-      className={"cv-pluginStatement__metricContainer"}
     >
-      <div className={className}>
-        {value}
-      </div>
+      {stylizedValue}
     </EuiFlexItem>
   );
 }
diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/plugin_statement.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/plugin_statement.js
index 9ebe4d09367d8..1c89e2c17f612 100644
--- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/plugin_statement.js
+++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/plugin_statement.js
@@ -10,7 +10,7 @@ import {
   EuiButtonEmpty,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiIcon,
+  EuiBadge,
 } from '@elastic/eui';
 import { formatMetric } from '../../../../../lib/format_number';
 import { Metric } from './metric';
@@ -19,7 +19,7 @@ function getInputStatementMetrics({ latestEventsPerSecond }) {
   return [(
     <Metric
       key="eventsEmitted"
-      className="cv-inputMetric__eventsEmitted"
+      className="configViewer__metric--eventsEmitted"
       value={formatMetric(latestEventsPerSecond, '0.[00]a', 'e/s emitted')}
     />
   )];
@@ -32,28 +32,27 @@ function getProcessorStatementMetrics(processorVertex) {
     percentOfTotalProcessorTime,
   } = processorVertex;
 
-  const cpuHighlight = processorVertex.isTimeConsuming() ? 'cv-processorMetric__cpuTimeHighlight' : '';
-  const eventMillisHighlight = processorVertex.isSlow() ? 'cv-processorMetric__eventMillis' : '';
-
   return [
     (
       <Metric
         key="cpuMetric"
-        className={`cv-processorMetric__cpuTime ${cpuHighlight}`}
+        className="configViewer__metric--cpuTime"
+        warning={processorVertex.isTimeConsuming()}
         value={formatMetric(Math.round(percentOfTotalProcessorTime || 0), '0', '%', { prependSpace: false })}
       />
     ),
     (
       <Metric
         key="eventMillis"
-        className={`cv-processorMetric__eventMillis ${eventMillisHighlight}`}
+        className="configViewer__metric--eventMillis"
+        warning={processorVertex.isSlow()}
         value={formatMetric(latestMillisPerEvent, '0.[00]a', 'ms/e')}
       />
     ),
     (
       <Metric
         key="eventsReceived"
-        className="cv-processorMetric__events"
+        className="configViewer__metric--events"
         value={formatMetric(latestEventsPerSecond, '0.[00]a', 'e/s received')}
       />
     )
@@ -80,58 +79,54 @@ export function PluginStatement({
   const onNameButtonClick = () => { onShowVertexDetails(vertex); };
 
   return (
-    <div className="cv-statement">
-      <EuiFlexGroup
-        gutterSize="none"
-        justifyContent="spaceBetween"
-      >
-        <EuiFlexItem grow={false}>
-          <EuiFlexGroup
-            gutterSize="s"
-            responsive={false}
-          >
-            <EuiFlexItem
-              grow={false}
-              className="cv-pluginStatement__icon"
+    <EuiFlexGroup
+      gutterSize="none"
+      justifyContent="spaceBetween"
+      alignItems="center"
+      className="configViewer__statement"
+    >
+      <EuiFlexItem grow={false}>
+        <EuiFlexGroup
+          gutterSize="xs"
+          responsive={false}
+          alignItems="center"
+        >
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty
+              size="xs"
+              color="primary"
+              iconType="dot"
+              flush="left"
+              className="configViewer__plugin"
+              onClick={onNameButtonClick}
             >
-              <EuiIcon
-                type="dot"
-                className="cv-statement__icon"
-              />
-            </EuiFlexItem>
+              <span>{name}</span>
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+          {
+            hasExplicitId &&
             <EuiFlexItem grow={false}>
-              <EuiButtonEmpty
-                flush="left"
-                size="xs"
-                className="cv-statement__name"
+              <EuiBadge
                 onClick={onNameButtonClick}
+                onClickAriaLabel="View details"
               >
-                <span>{name}</span>
-              </EuiButtonEmpty>
+                {id}
+              </EuiBadge>
             </EuiFlexItem>
-            {
-              hasExplicitId &&
-              <EuiFlexItem grow={false}>
-                <div className="cv-statement__id">
-                  {id}
-                </div>
-              </EuiFlexItem>
-            }
+          }
+        </EuiFlexGroup>
+      </EuiFlexItem>
+      {
+        statementMetrics &&
+        <EuiFlexItem grow={false}>
+          <EuiFlexGroup
+            gutterSize="s"
+          >
+            {statementMetrics}
           </EuiFlexGroup>
         </EuiFlexItem>
-        {
-          statementMetrics &&
-          <EuiFlexItem grow={false}>
-            <EuiFlexGroup
-              gutterSize="none"
-              style={{ marginRight: '0px' }}
-            >
-              {statementMetrics}
-            </EuiFlexGroup>
-          </EuiFlexItem>
-        }
-      </EuiFlexGroup>
-    </div>
+      }
+    </EuiFlexGroup>
   );
 }
 
diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/queue.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/queue.js
index 93284003337c0..8dc5971857c60 100644
--- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/queue.js
+++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/queue.js
@@ -6,17 +6,19 @@
 
 import React from 'react';
 import { StatementListHeading } from './statement_list_heading';
+import { EuiSpacer, EuiText } from '@elastic/eui';
 
 export function Queue() {
   return (
-    <div className="cv-statementList">
+    <div className="configStatementList">
       <StatementListHeading
         iconType="logstashQueue"
         title="Queue"
       />
-      <div className="cv-queue__messageText">
+      <EuiSpacer size="s" />
+      <EuiText className="configViewer__queueMessage">
         Queue metrics not available
-      </div>
+      </EuiText>
     </div>
   );
 }
diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement.js
index eb25609905dbc..545c7934db8e0 100644
--- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement.js
+++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement.js
@@ -6,7 +6,6 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { EuiFlexGroup } from '@elastic/eui';
 import { PluginStatement as PluginStatementModel } from '../../models/pipeline/plugin_statement';
 import { CollapsibleStatement } from './collapsible_statement';
 import { IfElement } from '../../models/list/if_element';
@@ -15,7 +14,7 @@ import { PluginStatement } from './plugin_statement';
 function renderNestingSpacers(depth) {
   const spacers = [];
   for (let i = 0; i < depth; i += 1) {
-    spacers.push(<div key={`spacer_${i}`} className="cv-spacer" />);
+    spacers.push(<div key={`spacer_${i}`} className="configViewer__spacer" />);
   }
   return spacers;
 }
@@ -53,28 +52,15 @@ function renderStatement({
   );
 }
 
-function getTopLevelStatementPadding(depth) {
-  return depth === 0
-    ? { paddingLeft: '0px' }
-    : null;
-}
-
 export function Statement(props) {
   const { depth } = props.element;
 
   return (
-    <li className="cv-list">
-      <div className="cv-spaceContainer">
+    <li className={`configViewer__listItem`}>
+      <div className="configViewer__spaceContainer">
         {renderNestingSpacers(depth)}
       </div>
-      <EuiFlexGroup gutterSize="none">
-        <div
-          className="cv-statement__content"
-          style={getTopLevelStatementPadding(depth)}
-        >
-          {renderStatement(props)}
-        </div>
-      </EuiFlexGroup>
+      {renderStatement(props)}
     </li>
   );
 }
diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list_heading.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list_heading.js
index 66686871ef088..18ae8c3277a47 100644
--- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list_heading.js
+++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list_heading.js
@@ -21,16 +21,15 @@ export function StatementListHeading({
     <EuiFlexGroup
       gutterSize="s"
       responsive={false}
+      alignItems="baseline"
     >
       <EuiFlexItem grow={false}>
         <EuiIcon
-          size="s"
           type={iconType}
-          className="cv-statementList__icon"
         />
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
-        <EuiTitle size="xs">
+        <EuiTitle size="s">
           <h4>{title}</h4>
         </EuiTitle>
       </EuiFlexItem>
diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_section.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_section.js
index dc22ab1ca2514..d402b63a89f58 100644
--- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_section.js
+++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_section.js
@@ -8,6 +8,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { StatementListHeading } from './statement_list_heading';
 import { Statement } from './statement';
+import { EuiSpacer } from '@elastic/eui';
 
 export function StatementSection({
   iconType,
@@ -18,11 +19,12 @@ export function StatementSection({
   if (!elements.length) { return null; }
 
   return (
-    <div className="cv-statementList">
+    <div className="configStatementList">
       <StatementListHeading
         iconType={iconType}
         title={headingText}
       />
+      <EuiSpacer size="s" />
       <StatementList
         elements={elements}
         onShowVertexDetails={onShowVertexDetails}
@@ -96,7 +98,7 @@ class StatementList extends React.PureComponent {
     const { elements } = this.props;
 
     return (
-      <ul className="cv-listParent">
+      <ul className="configViewer__list">
         {
           elements.map(this.renderStatement)
         }
diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/detail_drawer.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/detail_drawer.js
index c384802c4f45c..b1b5d70827f2b 100644
--- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/detail_drawer.js
+++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/detail_drawer.js
@@ -20,7 +20,8 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiButtonIcon,
-  EuiSpacer
+  EuiSpacer,
+  EuiBadge,
 } from '@elastic/eui';
 import { Sparkline } from '../../../sparkline';
 import { formatMetric } from '../../../../lib/format_number';
@@ -189,7 +190,7 @@ function renderBasicStats(vertex, timeseriesTooltipXValueFormatter) {
 function renderPluginBasicInfo(vertex) {
   if (vertex.hasExplicitId) {
     return (
-      <p>This {vertex.typeString}&#39;s ID is <strong>{ vertex.id }</strong>.</p>
+      <p>This {vertex.typeString}&#39;s ID is <EuiBadge>{ vertex.id }</EuiBadge>.</p>
     );
   }
 
@@ -268,17 +269,22 @@ export function DetailDrawer({ vertex, onHide, timeseriesTooltipXValueFormatter
     >
       <EuiFlyoutHeader>
         <EuiFlexGroup
-          alignItems="center"
+          alignItems="baseline"
+          gutterSize="s"
         >
+          <EuiFlexItem grow={false}>
+            { renderIcon(vertex) }
+          </EuiFlexItem>
           <EuiFlexItem>
             <EuiTitle>
-              <h2>{ renderIcon(vertex) }{ renderTitle(vertex) }</h2>
+              <h2>{ renderTitle(vertex) }</h2>
             </EuiTitle>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <EuiButtonIcon
               onClick={onHide}
               iconType="cross"
+              color="text"
               aria-label="Close"
             />
           </EuiFlexItem>
diff --git a/x-pack/plugins/monitoring/public/less/components/logstash/config_viewer.less b/x-pack/plugins/monitoring/public/less/components/logstash/config_viewer.less
index 2296d77c28522..b811711871d9c 100644
--- a/x-pack/plugins/monitoring/public/less/components/logstash/config_viewer.less
+++ b/x-pack/plugins/monitoring/public/less/components/logstash/config_viewer.less
@@ -1,133 +1,100 @@
-.cv-statementList
-{
-  margin: 16px;
-}
-
-.cv-statementList__icon
-{
-  margin-top: 5px;
-}
-
-.cv-spacer {
-  height: 94%;
-  width: 10px;
-  display: inline-block;
-  margin-left: 11px;
-  border-left: 1px #b2b2b2 dashed;
-}
-
-@media (max-width: 768px) {
-  .cv-spacer {
-    border: 0px;
-  }
-}
+@import (reference) '~ui/styles/variables/colors';
 
-.cv-spacer:last-child {
-  width: 0px;
+monitoring-main[page="pipeline"] {
+  background: @globalColorLightestGray;
 }
 
-.cv-inputMetric__eventsEmitted {
-  width: 150px;
+.configViewer {
+  max-width: 1000px;
 }
 
-.cv-statement__content {
-  display: inline-block;
-  min-height: 28px;
-  padding-left: 9px;
-  width: 100%;
+.configViewer__statement {
+  padding-left: 12px;
 }
 
-.cv-statement {
-  display: inline-block;
-  margin-top: 5px;
-  margin-left: 3px;
-  width: 100%;
+.configViewer__plugin {
+  margin-left: 4px;
 }
 
-.cv-statement__id {
-  background: #d9d9d9;
-  padding: 4px 6px 4px 6px;
-  font-size: 12px;
-  font-weight: bold;
-  border-radius: 2px;
-  margin-top: 1px;
-}
 
-.cv-statement__icon {
-  color: #50b0a4;
-}
-
-.cv-statement__name {
-  color: #50b0a4;
-  font-weight: bold;
-  font-size: small;
-  margin-top: -2px;
+.configViewer__spaceContainer {
+  background-color: white;
+  align-self: stretch;
+  display: flex;
+  // Separates the left border spaces properly
+  border-bottom: solid 2px white;
 }
 
-.cv-ifStatement__condition {
-  margin-top: 7px;
-}
+.configViewer__spacer {
+  width: 12px;
+  align-self: stretch;
+  margin-left: 12px;
+  border-left: 1px @globalColorMediumGray dashed;
 
-.cv-pluginStatement__icon {
-  padding-top: 4px;
-}
+  // This allows the border to be flush
+  &:last-child {
+    width: 0px;
+  }
 
-.cv-pluginStatement__metricContainer {
-  padding: 4px 8px 4px 8px;
-  border-radius: 2px;
+  &:first-child {
+    // Odd number is because of the single pixel border.
+    margin-left: 23px;
+  }
 }
 
-.cv-processorMetric__cpuTime {
-  width: 35px;
-  padding: 2px 4px 2px 8px;
-  border-radius: 2px;
-  margin-top: -2px;
-}
 
-.cv-processorMetric__cpuTimeHighlight {
-  background: #d6b283;
-}
+.configViewer__metric {
+  text-align: right;
 
-.cv-processorMetric__events {
-  width: 150px;
-  border-radius: 2px;
-  padding: 2px 4px 2px 4px;
-  margin-top: -2px;
-}
-
-.cv-processorMetric__eventMillis {
-  width: 80px;
-  padding: 2px 4px 2px 4px;
-  margin-top: -2px;
-}
+  &--cputTime {
+    width: 40px;
+  }
 
-.cv-spaceContainer {
-  background-color: white;
-}
+  &--events, &--eventsEmitted {
+    width: 160px;
+  }
 
-.cv-queue__messageText {
-  margin-left: 25px;
-  color: #838383;
+  &--eventMillis {
+    width: 80px;
+  }
 }
 
-.cv-list {
-  display: flex;
-  min-height: 32px;
+.configViewer__queueMessage {
+  margin-left: 24px;
+  color: @globalColorDarkGray;
 }
 
-.cv-listParent li:nth-child(2n+1) {
-  background: #f7f7f7;
-}
+.configViewer__list {
+  .configViewer__listItem {
+    display: flex;
+    min-height: 32px;
+    align-items: center;
+    padding-right: 12px;
 
-.cv-ifElseStatement__title {
-  margin-top: 2px;
+    &:nth-child(2n+1) {
+      background: #fafafa;
+    }
+  }
 }
 
-.cv-ifElseStatement__name {
+.configViewer__conditional {
   font-weight: bold;
+  text-transform: uppercase;
 }
 
-.cv-ifElseStatement__toggle {
-  margin-top: 3px;
-  color: #898989;
+@media (max-width: 768px) {
+  .configViewer {
+    .configViewer__spacer {
+      border: none;
+    }
+
+    .configViewer__metricFlexItem {
+      margin-bottom: 4px !important;
+    }
+
+    .configViewer__metric {
+      text-align: left;
+      padding-left: 32px;
+    }
+  }
 }