From 5ddd1dfe7bfc1e2b059a17dce550cdace5851fcb Mon Sep 17 00:00:00 2001
From: Josh Romero <rmerqg@amazon.com>
Date: Mon, 31 Jul 2023 20:01:24 +0000
Subject: [PATCH 1/2] Feat (Discover): Update styles to be compatible with next
 theme

1. Change doc table source highlight to use standard color functions instead of transparency
2. Build KUI CSS for next themes in OUI, and conditionally load to ensure surrounding doc view styled correctly
3. Update histogram styles to follow design guidance and avoid theme-specific imports

Signed-off-by: Josh Romero <rmerqg@amazon.com>
---
 packages/osd-ui-framework/Gruntfile.js        |    2 +
 packages/osd-ui-framework/dist/kui_dark.css   | 1165 ++++----
 packages/osd-ui-framework/dist/kui_light.css  | 1131 ++++----
 .../osd-ui-framework/dist/kui_next_dark.css   | 2581 +++++++++++++++++
 .../osd-ui-framework/dist/kui_next_light.css  | 2547 ++++++++++++++++
 .../osd-ui-framework/src/kui_next_dark.scss   |   15 +
 .../osd-ui-framework/src/kui_next_light.scss  |   15 +
 src/legacy/ui/ui_render/ui_render_mixin.js    |    8 +-
 .../angular/directives/_histogram.scss        |    7 +
 .../angular/directives/histogram.tsx          |    9 +-
 .../angular/doc_table/_doc_table.scss         |    2 +-
 11 files changed, 6420 insertions(+), 1062 deletions(-)
 create mode 100644 packages/osd-ui-framework/dist/kui_next_dark.css
 create mode 100644 packages/osd-ui-framework/dist/kui_next_light.css
 create mode 100644 packages/osd-ui-framework/src/kui_next_dark.scss
 create mode 100644 packages/osd-ui-framework/src/kui_next_light.scss

diff --git a/packages/osd-ui-framework/Gruntfile.js b/packages/osd-ui-framework/Gruntfile.js
index 9ad26b578e08..e0565b103736 100644
--- a/packages/osd-ui-framework/Gruntfile.js
+++ b/packages/osd-ui-framework/Gruntfile.js
@@ -74,6 +74,8 @@ module.exports = function (grunt) {
     Promise.all([
       uiFrameworkCompile('src/kui_light.scss', 'dist/kui_light.css'),
       uiFrameworkCompile('src/kui_dark.scss', 'dist/kui_dark.css'),
+      uiFrameworkCompile('src/kui_next_light.scss', 'dist/kui_next_light.css'),
+      uiFrameworkCompile('src/kui_next_dark.scss', 'dist/kui_next_dark.css'),
     ]).then(done);
   });
 
diff --git a/packages/osd-ui-framework/dist/kui_dark.css b/packages/osd-ui-framework/dist/kui_dark.css
index aa16bcdb34d3..e6d6f76e4f9a 100644
--- a/packages/osd-ui-framework/dist/kui_dark.css
+++ b/packages/osd-ui-framework/dist/kui_dark.css
@@ -1,24 +1,519 @@
-/* 1 */
-/* 1 */
-/**
- * 1. Extend beta badges to at least 40% of the container's width
- * 2. Fix for IE to ensure badges are visible outside of a <button> tag
- */
-/**
- * 1. Apply margin to all but last item in the flex.
- * 2. Margin gets flipped because of the row-reverse.
- */
-/**
- * 3. Must supply both values to background-size or some browsers apply the single value to both directions
- */
-/**
- * 4. Override invalid state with focus state.
- */
-/**
- *  Mixin for use in:
- *  - EuiCard
- *  - EuiPageContent
-*/
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/**
+ * 1. Focus rings shouldn't be visible on scrollable regions, but a11y requires them to be focusable.
+ *    Browser's supporting `:focus-visible` will still show outline on keyboard focus only.
+ *    Others like Safari, won't show anything at all.
+ * 2. Force the `:focus-visible` when the `tabindex=0` (is tabbable)
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
 /**
  * 1. Enforce pointer when there's no href.
  * 2. Allow these styles to be applied to a button element.
@@ -49,7 +544,8 @@
  * coupled with Angular.
  */
 /**
- * 1. Embedded SVG of fa-caret-down (https://github.com/encharm/Font-Awesome-SVG-PNG/blob/master/black/svg/caret-down.svg).
+ * 1. Embedded SVG of fa-caret-down
+ *    (https://github.com/encharm/Font-Awesome-SVG-PNG/blob/master/black/svg/caret-down.svg).
  * 2. Make room on right side for the caret.
  * 3. Prevent Firefox from showing dotted line around text on focus.
  */
@@ -78,55 +574,28 @@ main {
   /* 1 */ }
 
 .kuiBar {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
+  align-items: center;
+  justify-content: space-between;
   min-height: 30px;
   /* 1 */ }
 
 .kuiBarSection {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-flex: 1;
-  -webkit-flex: 1 1 auto;
-      -ms-flex: 1 1 auto;
-          flex: 1 1 auto;
+  align-items: center;
+  flex: 1 1 auto;
   margin-left: 25px;
   margin-right: 25px; }
   .kuiBarSection:not(:first-child):not(:last-child):not(:only-child) {
-    -webkit-box-pack: center;
-    -webkit-justify-content: center;
-        -ms-flex-pack: center;
-            justify-content: center;
+    justify-content: center;
     /* 3 */ }
   .kuiBarSection:first-child {
     margin-left: 0; }
   .kuiBarSection:last-child {
     margin-right: 0;
-    -webkit-box-flex: 0;
-    -webkit-flex: 0 1 auto;
-        -ms-flex: 0 1 auto;
-            flex: 0 1 auto;
+    flex: 0 1 auto;
     /* 4 */
-    -webkit-box-pack: end;
-    -webkit-justify-content: flex-end;
-        -ms-flex-pack: end;
-            justify-content: flex-end;
+    justify-content: flex-end;
     /* 5 */ }
   .kuiBarSection:only-child {
     margin-left: auto;
@@ -145,7 +614,6 @@ main {
   display: inline-block;
   /* 1 */
   -webkit-appearance: none;
-     -moz-appearance: none;
           appearance: none;
   cursor: pointer;
   padding: 4px 12px 5px;
@@ -158,10 +626,10 @@ main {
   border-radius: 4px; }
   .kuiButton:disabled {
     cursor: not-allowed;
-    opacity: .5; }
+    opacity: 0.5; }
   a.kuiButton.kuiButton-isDisabled {
     cursor: not-allowed;
-    opacity: .5; }
+    opacity: 0.5; }
   .kuiButton:enabled:active {
     -webkit-transform: translateY(1px);
             transform: translateY(1px); }
@@ -174,15 +642,9 @@ main {
    * 1. Solves whitespace problems introduced by inline elements.
    */
 .kuiButton__inner {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
   /* 1 */
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   /* 1 */ }
 
 .kuiButton--small {
@@ -303,8 +765,7 @@ main {
     /* 1 */
     outline: none !important;
     /* 2 */
-    -webkit-box-shadow: 0 0 0 1px #1D1E24, 0 0 0 2px #F66;
-            box-shadow: 0 0 0 1px #1D1E24, 0 0 0 2px #F66;
+    box-shadow: 0 0 0 1px #1D1E24, 0 0 0 2px #F66;
     /* 3 */
     color: #F66; }
   a.kuiButton--danger:not(.kuiButton-isDisabled):focus {
@@ -313,8 +774,7 @@ main {
     /* 1 */
     outline: none !important;
     /* 2 */
-    -webkit-box-shadow: 0 0 0 1px #1D1E24, 0 0 0 2px #F66;
-            box-shadow: 0 0 0 1px #1D1E24, 0 0 0 2px #F66;
+    box-shadow: 0 0 0 1px #1D1E24, 0 0 0 2px #F66;
     /* 3 */
     color: #F66; }
   .kuiButton--danger:enabled:hover {
@@ -347,8 +807,7 @@ main {
     /* 1 */
     outline: none !important;
     /* 2 */
-    -webkit-box-shadow: 0 0 0 1px #1D1E24, 0 0 0 2px #FFCE7A;
-            box-shadow: 0 0 0 1px #1D1E24, 0 0 0 2px #FFCE7A;
+    box-shadow: 0 0 0 1px #1D1E24, 0 0 0 2px #FFCE7A;
     /* 3 */
     color: #FFF; }
   a.kuiButton--warning:not(.kuiButton-isDisabled):focus {
@@ -357,8 +816,7 @@ main {
     /* 1 */
     outline: none !important;
     /* 2 */
-    -webkit-box-shadow: 0 0 0 1px #1D1E24, 0 0 0 2px #FFCE7A;
-            box-shadow: 0 0 0 1px #1D1E24, 0 0 0 2px #FFCE7A;
+    box-shadow: 0 0 0 1px #1D1E24, 0 0 0 2px #FFCE7A;
     /* 3 */
     color: #FFF; }
   .kuiButton--warning:enabled:hover {
@@ -386,7 +844,7 @@ main {
 
 /**
  * 1. Override Bootstrap.
- * 2. Override either Bootstrap or Timelion styles.
+ * 2. Override either Bootstrap or Timeline styles.
  */
 .kuiButton--hollow {
   color: #1BA9F5 !important;
@@ -443,14 +901,8 @@ main {
     text-decoration: underline; }
 
 .kuiButtonGroup {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center; }
+  align-items: center; }
   .kuiButtonGroup .kuiButton + .kuiButton {
     margin-left: 4px; }
 
@@ -466,24 +918,15 @@ main {
   border-bottom-left-radius: 0; }
 
 .kuiButtonGroup--united > .kuiButton:only-child {
-  border-top-right-radius: 4px;
-  border-bottom-right-radius: 4px;
-  border-top-left-radius: 4px;
-  border-bottom-left-radius: 4px; }
+  border-radius: 4px 4px 4px 4px; }
 
 .kuiButtonGroup--united .kuiButton + .kuiButton {
   margin-left: 0; }
 
 .kuiButtonGroup--fullWidth {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex; }
   .kuiButtonGroup--fullWidth > .kuiButton {
-    -webkit-box-flex: 1;
-    -webkit-flex: 1 1 auto;
-        -ms-flex: 1 1 auto;
-            flex: 1 1 auto;
+    flex: 1 1 auto;
     text-align: center; }
 
 .eui-textCenter > .kuiButtonGroup,
@@ -492,7 +935,6 @@ main {
 
 .kuiCollapseButton {
   -webkit-appearance: none;
-     -moz-appearance: none;
           appearance: none;
   background-color: transparent;
   padding: 4px;
@@ -534,46 +976,44 @@ main {
  */
 .kuiCheckBox {
   -webkit-appearance: none;
+          appearance: none;
   /* 1 */
   background-color: #16171c;
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 4px;
   width: 16px;
   height: 16px;
+  font: "var(--font-text)" !important;
+  /* 2 */
   line-height: 1.5 !important;
   /* 2 */
   margin: 0 !important;
   /* 2 */
-  font: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
-  /* 2 */
-  font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
+  font-family: "var(--font-text)" !important;
   /* 2 */
   font-size: 10px !important;
   /* 2 */
-  -webkit-transition: background-color 0.1s linear;
   transition: background-color 0.1s linear; }
-  .kuiCheckBox:before {
+  .kuiCheckBox::before {
     position: relative;
     left: 0.25em;
-    font-family: FontAwesome;
+    font-family: FontAwesome, sans-serif;
     content: "\F00C";
     font-size: 1em;
     opacity: 0;
     color: #FFF;
-    -webkit-transition: opacity 0.1s linear;
     transition: opacity 0.1s linear; }
   .kuiCheckBox:checked {
     border-color: #1BA9F5;
     background-color: #1BA9F5; }
-    .kuiCheckBox:checked:before {
+    .kuiCheckBox:checked::before {
       opacity: 1; }
   .kuiCheckBox:focus {
     z-index: 1;
     /* 1 */
     outline: none !important;
     /* 2 */
-    -webkit-box-shadow: 0 0 0 1px #1D1E24, 0 0 0 2px #1BA9F5;
-            box-shadow: 0 0 0 1px #1D1E24, 0 0 0 2px #1BA9F5;
+    box-shadow: 0 0 0 1px #1D1E24, 0 0 0 2px #1BA9F5;
     /* 3 */ }
   .kuiCheckBox:disabled {
     background-color: #202128 !important;
@@ -581,14 +1021,8 @@ main {
     cursor: not-allowed !important; }
 
 .kuiCheckBoxLabel {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   font-weight: normal !important;
   line-height: 1.5; }
 
@@ -628,9 +1062,8 @@ main {
    */
 .kuiSearchInput__input {
   -webkit-appearance: none;
-     -moz-appearance: none;
           appearance: none;
-  font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: "var(--font-text)";
   padding: 4px 12px 4px;
   font-size: 16px;
   font-weight: 400;
@@ -639,7 +1072,6 @@ main {
   background-color: #16171c;
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 4px;
-  -webkit-transition: border-color 0.1s linear;
   transition: border-color 0.1s linear;
   min-height: 32px;
   /* 1 */
@@ -667,9 +1099,8 @@ main {
  */
 .kuiSelect {
   -webkit-appearance: none;
-     -moz-appearance: none;
           appearance: none;
-  font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: "var(--font-text)";
   padding: 4px 12px 4px;
   font-size: 16px;
   font-weight: 400;
@@ -678,7 +1109,6 @@ main {
   background-color: #16171c;
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 4px;
-  -webkit-transition: border-color 0.1s linear;
   transition: border-color 0.1s linear;
   min-height: 32px;
   /* 1 */
@@ -704,8 +1134,7 @@ main {
   .kuiSelect.kuiSelect-isInvalid {
     border-color: #F66; }
   .kuiSelect:focus {
-    -webkit-box-shadow: none;
-            box-shadow: none;
+    box-shadow: none;
     outline: none;
     border-color: #1BA9F5; }
 
@@ -724,9 +1153,8 @@ main {
 .kuiStaticInput {
   width: 180px;
   -webkit-appearance: none;
-     -moz-appearance: none;
           appearance: none;
-  font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: "var(--font-text)";
   padding: 4px 12px 4px;
   font-size: 16px;
   font-weight: 400;
@@ -739,9 +1167,8 @@ main {
 .kuiTextArea {
   width: 180px;
   -webkit-appearance: none;
-     -moz-appearance: none;
           appearance: none;
-  font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: "var(--font-text)";
   padding: 4px 12px 4px;
   font-size: 16px;
   font-weight: 400;
@@ -750,7 +1177,6 @@ main {
   background-color: #16171c;
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 4px;
-  -webkit-transition: border-color 0.1s linear;
   transition: border-color 0.1s linear;
   min-height: 32px;
   /* 1 */ }
@@ -763,8 +1189,7 @@ main {
     opacity: 0.4;
     cursor: not-allowed; }
   .kuiTextArea:focus {
-    -webkit-box-shadow: none;
-            box-shadow: none;
+    box-shadow: none;
     outline: none;
     border-color: #1BA9F5; }
   .kuiTextArea.kuiTextArea-isInvalid {
@@ -782,9 +1207,8 @@ main {
 .kuiTextInput {
   width: 180px;
   -webkit-appearance: none;
-     -moz-appearance: none;
           appearance: none;
-  font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: "var(--font-text)";
   padding: 4px 12px 4px;
   font-size: 16px;
   font-weight: 400;
@@ -793,7 +1217,6 @@ main {
   background-color: #16171c;
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 4px;
-  -webkit-transition: border-color 0.1s linear;
   transition: border-color 0.1s linear;
   min-height: 32px;
   /* 1 */ }
@@ -818,21 +1241,12 @@ main {
  * 1. We may want to put elements in here which have different heights.
  */
 .kuiFieldGroup {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   /* 1 */ }
 
 .kuiFieldGroup--alignTop {
-  -webkit-box-align: start;
-  -webkit-align-items: flex-start;
-      -ms-flex-align: start;
-          align-items: flex-start; }
+  align-items: flex-start; }
 
 .kuiFieldGroupSection {
   line-height: 1.5; }
@@ -840,10 +1254,7 @@ main {
     margin-left: 10px; }
 
 .kuiFieldGroupSection--wide {
-  -webkit-box-flex: 1;
-  -webkit-flex: 1 1 auto;
-      -ms-flex: 1 1 auto;
-          flex: 1 1 auto; }
+  flex: 1 1 auto; }
   .kuiFieldGroupSection--wide > * {
     width: 100%; }
 
@@ -854,7 +1265,7 @@ main {
 .kuiIcon {
   display: inline-block;
   /* 1 */
-  font: normal normal normal 14px/1 FontAwesome;
+  font: normal normal normal 14px/1 FontAwesome, sans-serif;
   /* 1 */
   font-size: inherit;
   /* 1 */
@@ -920,14 +1331,8 @@ main {
  * 1. Align with first line of title text if it wraps.
  */
 .kuiInfoPanelHeader {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: baseline;
-  -webkit-align-items: baseline;
-      -ms-flex-align: baseline;
-          align-items: baseline;
+  align-items: baseline;
   /* 1 */ }
 
 .kuiInfoPanelHeader__icon {
@@ -955,7 +1360,6 @@ main {
   cursor: pointer;
   /* 1 */
   -webkit-appearance: none;
-     -moz-appearance: none;
           appearance: none;
   /* 2 */
   background-color: transparent;
@@ -977,24 +1381,13 @@ main {
  *    a bit.
  */
 .kuiLocalBreadcrumbs {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   padding: 12px 8px;
   /* 1 */
   border-bottom: 1px solid #343741;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-  -webkit-flex-basis: 100%;
-      -ms-flex-preferred-size: 100%;
-          flex-basis: 100%;
+  flex-grow: 1;
+  flex-basis: 100%;
   background-color: #1D1E24; }
 
 .kuiLocalBreadcrumb {
@@ -1003,11 +1396,9 @@ main {
   font-weight: normal; }
   .kuiLocalBreadcrumb + .kuiLocalBreadcrumb {
     margin-left: 6px; }
-    .kuiLocalBreadcrumb + .kuiLocalBreadcrumb:before {
-      content: '/';
+    .kuiLocalBreadcrumb + .kuiLocalBreadcrumb::before {
+      content: "/";
       -webkit-user-select: none;
-         -moz-user-select: none;
-          -ms-user-select: none;
               user-select: none;
       margin-right: 4px;
       color: #343741; }
@@ -1021,7 +1412,6 @@ main {
   cursor: pointer;
   /* 1 */
   -webkit-appearance: none;
-     -moz-appearance: none;
           appearance: none;
   /* 2 */
   background-color: transparent;
@@ -1054,18 +1444,9 @@ main {
   padding: 0; }
 
 .kuiDatePickerNavigation {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
+  align-items: center;
+  justify-content: space-between;
   margin-bottom: 4px; }
 
 /**
@@ -1073,7 +1454,6 @@ main {
  */
 .kuiDatePickerNavigationButton {
   -webkit-appearance: none;
-     -moz-appearance: none;
           appearance: none;
   background-color: transparent;
   border: none;
@@ -1090,8 +1470,7 @@ main {
     /* 1 */
     outline: none !important;
     /* 2 */
-    -webkit-box-shadow: 0 0 0 1px transparent, 0 0 0 2px #1BA9F5;
-            box-shadow: 0 0 0 1px transparent, 0 0 0 2px #1BA9F5;
+    box-shadow: 0 0 0 1px transparent, 0 0 0 2px #1BA9F5;
     /* 3 */
     color: #DFE5EF;
     /* 1 */ }
@@ -1122,7 +1501,6 @@ main {
  */
 .kuiDatePickerRowCellContent {
   -webkit-appearance: none;
-     -moz-appearance: none;
           appearance: none;
   background-color: transparent;
   width: 100%;
@@ -1137,8 +1515,7 @@ main {
     /* 1 */
     outline: none !important;
     /* 2 */
-    -webkit-box-shadow: 0 0 0 1px transparent, 0 0 0 2px #1BA9F5;
-            box-shadow: 0 0 0 1px transparent, 0 0 0 2px #1BA9F5;
+    box-shadow: 0 0 0 1px transparent, 0 0 0 2px #1BA9F5;
     /* 3 */
     color: #DFE5EF;
     /* 1 */ }
@@ -1167,7 +1544,6 @@ main {
 
 .kuiLocalDropdownCloseButton {
   -webkit-appearance: none;
-     -moz-appearance: none;
           appearance: none;
   background-color: transparent;
   padding: 4px;
@@ -1185,16 +1561,10 @@ main {
     opacity: 1; }
 
 .kuiLocalDropdownPanels {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex; }
 
 .kuiLocalDropdownPanel {
-  -webkit-box-flex: 1;
-  -webkit-flex: 1 1 0%;
-      -ms-flex: 1 1 0%;
-          flex: 1 1 0%; }
+  flex: 1 1 0%; }
 
 .kuiLocalDropdownPanel--left {
   margin-right: 30px; }
@@ -1218,18 +1588,9 @@ main {
     margin-bottom: 0; }
 
 .kuiLocalDropdownHeader {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
+  align-items: center;
+  justify-content: space-between;
   margin-bottom: 6px; }
 
 /**
@@ -1243,9 +1604,6 @@ main {
   color: #DFE5EF; }
 
 .kuiLocalDropdownHeader__actions {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex; }
 
 .kuiLocalDropdownHeader__action {
@@ -1289,26 +1647,14 @@ main {
   color: #98A2B3; }
 
 .kuiLocalMenu {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: stretch;
-  -webkit-align-items: stretch;
-      -ms-flex-align: stretch;
-          align-items: stretch;
+  align-items: stretch;
   padding-top: 8px;
   padding-bottom: 8px; }
 
 .kuiLocalMenuItem {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   padding: 2px 8px;
   font-size: 16px;
   background-color: transparent;
@@ -1342,19 +1688,9 @@ main {
  *    dropdown.
  */
 .kuiLocalNav {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-  -webkit-flex-direction: column;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
+  flex-direction: column;
+  justify-content: space-between;
   min-height: 69px;
   /* 1 */
   color: #DFE5EF;
@@ -1366,28 +1702,13 @@ main {
  * 1. Allow row to expand if the content is so long that it wraps.
  */
 .kuiLocalNavRow {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: stretch;
-  -webkit-align-items: stretch;
-      -ms-flex-align: stretch;
-          align-items: stretch;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-      -ms-flex-pack: justify;
-          justify-content: space-between; }
+  align-items: stretch;
+  justify-content: space-between; }
 
 .kuiLocalNavRow__section {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: stretch;
-  -webkit-align-items: stretch;
-      -ms-flex-align: stretch;
-          align-items: stretch; }
+  align-items: stretch; }
 
 /**
  * 1. We make this row flex-start because it usually contains a search input, which may expand
@@ -1399,25 +1720,18 @@ main {
 .kuiLocalNavRow--secondary {
   padding: 0 8px;
   /* 1 */
-  -webkit-box-align: start;
-  -webkit-align-items: flex-start;
-      -ms-flex-align: start;
-          align-items: flex-start;
+  align-items: flex-start;
   /* 1 */ }
 
 .kuiLocalSearch {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
   width: 100%;
   margin-bottom: 8px; }
 
 .kuiLocalSearchInput {
   -webkit-appearance: none;
-     -moz-appearance: none;
           appearance: none;
-  font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: "var(--font-text)";
   padding: 4px 12px 4px;
   font-size: 16px;
   font-weight: 400;
@@ -1426,14 +1740,10 @@ main {
   background-color: #16171c;
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 4px;
-  -webkit-transition: border-color 0.1s linear;
   transition: border-color 0.1s linear;
   min-height: 32px;
   /* 1 */
-  -webkit-box-flex: 1;
-  -webkit-flex: 1 1 100%;
-      -ms-flex: 1 1 100%;
-          flex: 1 1 100%;
+  flex: 1 1 100%;
   border-color: #FFF;
   border-color: #343741;
   border-radius: 4px 0 0 4px; }
@@ -1446,31 +1756,16 @@ main {
     opacity: 0.4;
     cursor: not-allowed; }
   .kuiLocalSearchInput:focus {
-    -webkit-box-shadow: none;
-            box-shadow: none; }
+    box-shadow: none; }
   .kuiLocalSearchInput.kuiLocalSearchInput-isInvalid {
     border-color: #F66; }
 
 .kuiLocalSearchInput--secondary {
   height: 32px;
-  -webkit-box-flex: 0;
-  -webkit-flex: 0 0 auto;
-      -ms-flex: 0 0 auto;
-          flex: 0 0 auto;
+  flex: 0 0 auto;
   border-radius: 0;
   border-left-width: 0; }
 
-.kuiLocalSearchAssistedInput {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-flex: 1;
-  -webkit-flex: 1 1 100%;
-      -ms-flex: 1 1 100%;
-          flex: 1 1 100%;
-  position: relative; }
-
 /**
  * 1. em used for right padding so documentation link and query string
  *    won't overlap if the user increases their default browser font size
@@ -1482,8 +1777,8 @@ main {
   /* 1 */ }
 
 /**
-   * 1. Vertically center the assistance, regardless of its height.
-   */
+ * 1. Vertically center the assistance, regardless of its height.
+ */
 .kuiLocalSearchAssistedInput__assistance {
   position: absolute;
   right: 6px;
@@ -1496,9 +1791,8 @@ main {
 
 .kuiLocalSearchSelect {
   -webkit-appearance: none;
-     -moz-appearance: none;
           appearance: none;
-  font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: "var(--font-text)";
   padding: 4px 12px 4px;
   font-size: 16px;
   font-weight: 400;
@@ -1507,7 +1801,6 @@ main {
   background-color: #16171c;
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 4px;
-  -webkit-transition: border-color 0.1s linear;
   transition: border-color 0.1s linear;
   min-height: 32px;
   /* 1 */
@@ -1551,29 +1844,22 @@ main {
     /* 1 */
     outline: none !important;
     /* 2 */
-    -webkit-box-shadow: 0 0 0 1px #343741, 0 0 0 2px #1BA9F5;
-            box-shadow: 0 0 0 1px #343741, 0 0 0 2px #1BA9F5;
+    box-shadow: 0 0 0 1px #343741, 0 0 0 2px #1BA9F5;
     /* 3 */ }
 
 /**
  * 1. We want the bottom border on selected tabs to be flush with the bottom of the container.
  */
 .kuiLocalTabs {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: end;
-  -webkit-align-items: flex-end;
-      -ms-flex-align: end;
-          align-items: flex-end;
+  align-items: flex-end;
   height: 100%; }
 
 /**
    * 1. Override inherited typographic styles.
    */
 .kuiLocalTab {
-  padding: 5px 0 6px 0;
+  padding: 5px 0 6px;
   font-size: 18px;
   color: #D4DAE5;
   border-bottom: 2px solid transparent;
@@ -1601,25 +1887,14 @@ main {
     margin-left: 15px; }
 
 .kuiLocalTitle {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   padding: 12px 8px;
   font-size: 16px;
   font-weight: bold;
   border-bottom: 1px solid #343741;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-  -webkit-flex-basis: 100%;
-      -ms-flex-preferred-size: 100%;
-          flex-basis: 100%;
+  flex-grow: 1;
+  flex-basis: 100%;
   background-color: #1D1E24; }
   .kuiLocalTitle:empty {
     padding: 0;
@@ -1629,14 +1904,8 @@ main {
  * 1. Put 10px of space between each child.
  */
 .kuiPager {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center; }
+  align-items: center; }
   .kuiPager > * + * {
     margin-left: 10px;
     /* 1 */ }
@@ -1649,31 +1918,17 @@ main {
   /* 1 */ }
 
 .kuiPanel {
-  -webkit-box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3), 0 1px 5px -2px rgba(0, 0, 0, 0.3);
-          box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3), 0 1px 5px -2px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3), 0 1px 5px -2px rgba(0, 0, 0, 0.3);
   background-color: #1D1E24;
   border: 1px solid #343741;
   border-radius: 4px; }
 
 .kuiPanel--prompt {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-  -webkit-flex-direction: column;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
+  flex-direction: column;
+  align-items: center;
   text-align: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  justify-content: center;
   min-height: 300px; }
   .kuiPanel--prompt .kuiPanelBody {
     padding: 30px;
@@ -1687,32 +1942,14 @@ main {
   border-radius: 0; }
 
 .kuiPanel--centered {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center; }
+  justify-content: center;
+  align-items: center; }
 
 .kuiPanelHeader {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
+  align-items: center;
+  justify-content: space-between;
   min-height: 30px;
   /* 1 */
   padding: 10px;
@@ -1723,8 +1960,7 @@ main {
     /* 1 */
     outline: none !important;
     /* 2 */
-    -webkit-box-shadow: 0 0 0 1px #343741, 0 0 0 2px #1BA9F5;
-            box-shadow: 0 0 0 1px #343741, 0 0 0 2px #1BA9F5;
+    box-shadow: 0 0 0 1px #343741, 0 0 0 2px #1BA9F5;
     /* 3 */ }
   a.kuiPanelHeader .kuiButton:not(.kuiButton-isDisabled):focus {
     /* 1 */
@@ -1732,16 +1968,14 @@ main {
     /* 1 */
     outline: none !important;
     /* 2 */
-    -webkit-box-shadow: 0 0 0 1px #343741, 0 0 0 2px #1BA9F5;
-            box-shadow: 0 0 0 1px #343741, 0 0 0 2px #1BA9F5;
+    box-shadow: 0 0 0 1px #343741, 0 0 0 2px #1BA9F5;
     /* 3 */ }
   .kuiPanelHeader .kuiButton--danger:not(a):enabled:focus {
     z-index: 1;
     /* 1 */
     outline: none !important;
     /* 2 */
-    -webkit-box-shadow: 0 0 0 1px #343741, 0 0 0 2px #F66;
-            box-shadow: 0 0 0 1px #343741, 0 0 0 2px #F66;
+    box-shadow: 0 0 0 1px #343741, 0 0 0 2px #F66;
     /* 3 */ }
   a.kuiPanelHeader .kuiButton--danger:not(.kuiButton-isDisabled):focus {
     /* 1 */
@@ -1749,8 +1983,7 @@ main {
     /* 1 */
     outline: none !important;
     /* 2 */
-    -webkit-box-shadow: 0 0 0 1px #343741, 0 0 0 2px #F66;
-            box-shadow: 0 0 0 1px #343741, 0 0 0 2px #F66;
+    box-shadow: 0 0 0 1px #343741, 0 0 0 2px #F66;
     /* 3 */ }
   .kuiPanelHeader .kuiSelect {
     border-color: #16171c; }
@@ -1775,39 +2008,21 @@ main {
  * 1. Undo what barSection mixin does.
  */
 .kuiPanelHeaderSection {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-flex: 1;
-  -webkit-flex: 1 1 auto;
-      -ms-flex: 1 1 auto;
-          flex: 1 1 auto;
+  align-items: center;
+  flex: 1 1 auto;
   margin-left: 25px;
   margin-right: 25px; }
   .kuiPanelHeaderSection:not(:first-child):not(:last-child):not(:only-child) {
-    -webkit-box-pack: center;
-    -webkit-justify-content: center;
-        -ms-flex-pack: center;
-            justify-content: center;
+    justify-content: center;
     /* 3 */ }
   .kuiPanelHeaderSection:first-child {
     margin-left: 0; }
   .kuiPanelHeaderSection:last-child {
     margin-right: 0;
-    -webkit-box-flex: 0;
-    -webkit-flex: 0 1 auto;
-        -ms-flex: 0 1 auto;
-            flex: 0 1 auto;
+    flex: 0 1 auto;
     /* 4 */
-    -webkit-box-pack: end;
-    -webkit-justify-content: flex-end;
-        -ms-flex-pack: end;
-            justify-content: flex-end;
+    justify-content: flex-end;
     /* 5 */ }
   .kuiPanelHeaderSection:only-child {
     margin-left: auto;
@@ -1825,19 +2040,9 @@ main {
   padding: 10px; }
 
 .kuiEmptyTablePrompt {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-  -webkit-flex-direction: column;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
+  flex-direction: column;
+  align-items: center;
   padding: 30px; }
 
 .kuiEmptyTablePrompt__message {
@@ -1849,14 +2054,8 @@ main {
   margin-top: 10px; }
 
 .kuiStatusText {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
   display: inline-flex;
-  -webkit-box-align: baseline;
-  -webkit-align-items: baseline;
-      -ms-flex-align: baseline;
-          align-items: baseline; }
+  align-items: baseline; }
 
 .kuiStatusText--info {
   color: #1BA9F5; }
@@ -1941,14 +2140,11 @@ main {
  */
 .kuiTableHeaderCellButton {
   -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
           user-select: none;
   /* 1 */
   cursor: pointer;
   width: 100%;
   -webkit-appearance: none;
-     -moz-appearance: none;
           appearance: none;
   /* 2 */
   background-color: transparent;
@@ -1969,14 +2165,8 @@ main {
     display: block;
     opacity: 1; }
   .kuiTableHeaderCellButton .kuiTableHeaderCell__liner {
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -ms-flexbox;
     display: flex;
-    -webkit-box-align: center;
-    -webkit-align-items: center;
-        -ms-flex-align: center;
-            align-items: center; }
+    align-items: center; }
 
 .kuiTableHeaderCell--alignRight {
   text-align: right; }
@@ -2074,9 +2264,6 @@ main {
   line-height: 1.5; }
 
 .kuiTabs {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
   border-bottom: 1px solid #343741; }
 
@@ -2089,7 +2276,6 @@ main {
  */
 .kuiTab {
   -webkit-appearance: none;
-     -moz-appearance: none;
           appearance: none;
   /* 1 */
   cursor: pointer;
@@ -2111,8 +2297,7 @@ main {
   .kuiTab:active {
     outline: none !important;
     /* 1 */
-    -webkit-box-shadow: none;
-            box-shadow: none;
+    box-shadow: none;
     /* 1 */ }
   .kuiTab:focus {
     outline: none;
@@ -2131,18 +2316,9 @@ main {
     border-bottom-color: transparent; }
 
 .kuiToolBar {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
+  align-items: center;
+  justify-content: space-between;
   min-height: 30px;
   /* 1 */
   padding: 10px;
@@ -2154,8 +2330,7 @@ main {
     /* 1 */
     outline: none !important;
     /* 2 */
-    -webkit-box-shadow: 0 0 0 1px #343741, 0 0 0 2px #1BA9F5;
-            box-shadow: 0 0 0 1px #343741, 0 0 0 2px #1BA9F5;
+    box-shadow: 0 0 0 1px #343741, 0 0 0 2px #1BA9F5;
     /* 3 */ }
   a.kuiToolBar .kuiButton:not(.kuiButton-isDisabled):focus {
     /* 1 */
@@ -2163,16 +2338,14 @@ main {
     /* 1 */
     outline: none !important;
     /* 2 */
-    -webkit-box-shadow: 0 0 0 1px #343741, 0 0 0 2px #1BA9F5;
-            box-shadow: 0 0 0 1px #343741, 0 0 0 2px #1BA9F5;
+    box-shadow: 0 0 0 1px #343741, 0 0 0 2px #1BA9F5;
     /* 3 */ }
   .kuiToolBar .kuiButton--danger:not(a):enabled:focus {
     z-index: 1;
     /* 1 */
     outline: none !important;
     /* 2 */
-    -webkit-box-shadow: 0 0 0 1px #343741, 0 0 0 2px #F66;
-            box-shadow: 0 0 0 1px #343741, 0 0 0 2px #F66;
+    box-shadow: 0 0 0 1px #343741, 0 0 0 2px #F66;
     /* 3 */ }
   a.kuiToolBar .kuiButton--danger:not(.kuiButton-isDisabled):focus {
     /* 1 */
@@ -2180,8 +2353,7 @@ main {
     /* 1 */
     outline: none !important;
     /* 2 */
-    -webkit-box-shadow: 0 0 0 1px #343741, 0 0 0 2px #F66;
-            box-shadow: 0 0 0 1px #343741, 0 0 0 2px #F66;
+    box-shadow: 0 0 0 1px #343741, 0 0 0 2px #F66;
     /* 3 */ }
   .kuiToolBar .kuiSelect {
     border-color: #16171c; }
@@ -2194,39 +2366,21 @@ main {
       border-color: #1BA9F5; }
 
 .kuiToolBarSection {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-flex: 1;
-  -webkit-flex: 1 1 auto;
-      -ms-flex: 1 1 auto;
-          flex: 1 1 auto;
+  align-items: center;
+  flex: 1 1 auto;
   margin-left: 25px;
   margin-right: 25px; }
   .kuiToolBarSection:not(:first-child):not(:last-child):not(:only-child) {
-    -webkit-box-pack: center;
-    -webkit-justify-content: center;
-        -ms-flex-pack: center;
-            justify-content: center;
+    justify-content: center;
     /* 3 */ }
   .kuiToolBarSection:first-child {
     margin-left: 0; }
   .kuiToolBarSection:last-child {
     margin-right: 0;
-    -webkit-box-flex: 0;
-    -webkit-flex: 0 1 auto;
-        -ms-flex: 0 1 auto;
-            flex: 0 1 auto;
+    flex: 0 1 auto;
     /* 4 */
-    -webkit-box-pack: end;
-    -webkit-justify-content: flex-end;
-        -ms-flex-pack: end;
-            justify-content: flex-end;
+    justify-content: flex-end;
     /* 5 */ }
   .kuiToolBarSection:only-child {
     margin-left: auto;
@@ -2243,18 +2397,9 @@ main {
   /* 1 */ }
 
 .kuiToolBarFooter {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
+  align-items: center;
+  justify-content: space-between;
   min-height: 30px;
   /* 1 */
   padding: 10px;
@@ -2262,39 +2407,21 @@ main {
   background-color: #1D1E24; }
 
 .kuiToolBarFooterSection {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-flex: 1;
-  -webkit-flex: 1 1 auto;
-      -ms-flex: 1 1 auto;
-          flex: 1 1 auto;
+  align-items: center;
+  flex: 1 1 auto;
   margin-left: 25px;
   margin-right: 25px; }
   .kuiToolBarFooterSection:not(:first-child):not(:last-child):not(:only-child) {
-    -webkit-box-pack: center;
-    -webkit-justify-content: center;
-        -ms-flex-pack: center;
-            justify-content: center;
+    justify-content: center;
     /* 3 */ }
   .kuiToolBarFooterSection:first-child {
     margin-left: 0; }
   .kuiToolBarFooterSection:last-child {
     margin-right: 0;
-    -webkit-box-flex: 0;
-    -webkit-flex: 0 1 auto;
-        -ms-flex: 0 1 auto;
-            flex: 0 1 auto;
+    flex: 0 1 auto;
     /* 4 */
-    -webkit-box-pack: end;
-    -webkit-justify-content: flex-end;
-        -ms-flex-pack: end;
-            justify-content: flex-end;
+    justify-content: flex-end;
     /* 5 */ }
   .kuiToolBarFooterSection:only-child {
     margin-left: auto;
@@ -2309,20 +2436,11 @@ main {
  *    kuiToolBarSection sibling.
  */
 .kuiToolBarSearch {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   margin-left: 25px;
   margin-right: 25px;
-  -webkit-box-flex: 1;
-  -webkit-flex: 1 1 auto;
-      -ms-flex: 1 1 auto;
-          flex: 1 1 auto;
+  flex: 1 1 auto;
   max-width: 100%;
   /* 2 */
   line-height: 1.5; }
@@ -2335,10 +2453,7 @@ main {
     /* 1 */ }
 
 .kuiToolBarSearchBox {
-  -webkit-box-flex: 1;
-  -webkit-flex: 1 1 auto;
-      -ms-flex: 1 1 auto;
-          flex: 1 1 auto;
+  flex: 1 1 auto;
   position: relative;
   font-size: 16px;
   max-width: 800px; }
@@ -2348,7 +2463,7 @@ main {
   top: 0.5em;
   left: 0.7em;
   font-size: 1em;
-  color: #ACACAC; }
+  color: #acacac; }
 
 /**
    * 1. Fix inherited styles (possibly from Bootstrap).
@@ -2357,7 +2472,7 @@ main {
   width: 100%;
   min-width: 200px;
   padding: 4px 12px 5px 28px;
-  font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: "var(--font-text)";
   /* 1 */
   background-color: #1D1E24;
   color: #DFE5EF;
@@ -2366,7 +2481,6 @@ main {
   border: 1px solid #343741;
   line-height: normal;
   /* 1 */
-  -webkit-transition: border-color 0.1s linear;
   transition: border-color 0.1s linear; }
   .kuiToolBarSearchBox__input:focus {
     outline: none;
@@ -2448,11 +2562,8 @@ main {
   margin-top: 32px; }
 
 .kuiView {
-  background-color: #FFF;
-  -webkit-box-flex: 1;
-  -webkit-flex: 1 1 auto;
-      -ms-flex: 1 1 auto;
-          flex: 1 1 auto; }
+  background-color: #fff;
+  flex: 1 1 auto; }
 
 .kuiViewContent {
   padding-top: 20px;
diff --git a/packages/osd-ui-framework/dist/kui_light.css b/packages/osd-ui-framework/dist/kui_light.css
index 9b42bbb517f4..80b31588660e 100644
--- a/packages/osd-ui-framework/dist/kui_light.css
+++ b/packages/osd-ui-framework/dist/kui_light.css
@@ -1,24 +1,485 @@
-/* 1 */
-/* 1 */
-/**
- * 1. Extend beta badges to at least 40% of the container's width
- * 2. Fix for IE to ensure badges are visible outside of a <button> tag
- */
-/**
- * 1. Apply margin to all but last item in the flex.
- * 2. Margin gets flipped because of the row-reverse.
- */
-/**
- * 3. Must supply both values to background-size or some browsers apply the single value to both directions
- */
-/**
- * 4. Override invalid state with focus state.
- */
-/**
- *  Mixin for use in:
- *  - EuiCard
- *  - EuiPageContent
-*/
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/**
+ * 1. Focus rings shouldn't be visible on scrollable regions, but a11y requires them to be focusable.
+ *    Browser's supporting `:focus-visible` will still show outline on keyboard focus only.
+ *    Others like Safari, won't show anything at all.
+ * 2. Force the `:focus-visible` when the `tabindex=0` (is tabbable)
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
 /**
  * 1. Enforce pointer when there's no href.
  * 2. Allow these styles to be applied to a button element.
@@ -49,7 +510,8 @@
  * coupled with Angular.
  */
 /**
- * 1. Embedded SVG of fa-caret-down (https://github.com/encharm/Font-Awesome-SVG-PNG/blob/master/black/svg/caret-down.svg).
+ * 1. Embedded SVG of fa-caret-down
+ *    (https://github.com/encharm/Font-Awesome-SVG-PNG/blob/master/black/svg/caret-down.svg).
  * 2. Make room on right side for the caret.
  * 3. Prevent Firefox from showing dotted line around text on focus.
  */
@@ -78,55 +540,28 @@ main {
   /* 1 */ }
 
 .kuiBar {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
+  align-items: center;
+  justify-content: space-between;
   min-height: 30px;
   /* 1 */ }
 
 .kuiBarSection {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-flex: 1;
-  -webkit-flex: 1 1 auto;
-      -ms-flex: 1 1 auto;
-          flex: 1 1 auto;
+  align-items: center;
+  flex: 1 1 auto;
   margin-left: 25px;
   margin-right: 25px; }
   .kuiBarSection:not(:first-child):not(:last-child):not(:only-child) {
-    -webkit-box-pack: center;
-    -webkit-justify-content: center;
-        -ms-flex-pack: center;
-            justify-content: center;
+    justify-content: center;
     /* 3 */ }
   .kuiBarSection:first-child {
     margin-left: 0; }
   .kuiBarSection:last-child {
     margin-right: 0;
-    -webkit-box-flex: 0;
-    -webkit-flex: 0 1 auto;
-        -ms-flex: 0 1 auto;
-            flex: 0 1 auto;
+    flex: 0 1 auto;
     /* 4 */
-    -webkit-box-pack: end;
-    -webkit-justify-content: flex-end;
-        -ms-flex-pack: end;
-            justify-content: flex-end;
+    justify-content: flex-end;
     /* 5 */ }
   .kuiBarSection:only-child {
     margin-left: auto;
@@ -145,7 +580,6 @@ main {
   display: inline-block;
   /* 1 */
   -webkit-appearance: none;
-     -moz-appearance: none;
           appearance: none;
   cursor: pointer;
   padding: 4px 12px 5px;
@@ -158,10 +592,10 @@ main {
   border-radius: 4px; }
   .kuiButton:disabled {
     cursor: not-allowed;
-    opacity: .5; }
+    opacity: 0.5; }
   a.kuiButton.kuiButton-isDisabled {
     cursor: not-allowed;
-    opacity: .5; }
+    opacity: 0.5; }
   .kuiButton:enabled:active {
     -webkit-transform: translateY(1px);
             transform: translateY(1px); }
@@ -174,15 +608,9 @@ main {
    * 1. Solves whitespace problems introduced by inline elements.
    */
 .kuiButton__inner {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
   /* 1 */
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   /* 1 */ }
 
 .kuiButton--small {
@@ -303,8 +731,7 @@ main {
     /* 1 */
     outline: none !important;
     /* 2 */
-    -webkit-box-shadow: 0 0 0 1px #FFF, 0 0 0 2px #BD271E;
-            box-shadow: 0 0 0 1px #FFF, 0 0 0 2px #BD271E;
+    box-shadow: 0 0 0 1px #FFF, 0 0 0 2px #BD271E;
     /* 3 */
     color: #BD271E; }
   a.kuiButton--danger:not(.kuiButton-isDisabled):focus {
@@ -313,8 +740,7 @@ main {
     /* 1 */
     outline: none !important;
     /* 2 */
-    -webkit-box-shadow: 0 0 0 1px #FFF, 0 0 0 2px #BD271E;
-            box-shadow: 0 0 0 1px #FFF, 0 0 0 2px #BD271E;
+    box-shadow: 0 0 0 1px #FFF, 0 0 0 2px #BD271E;
     /* 3 */
     color: #BD271E; }
   .kuiButton--danger:enabled:hover {
@@ -347,8 +773,7 @@ main {
     /* 1 */
     outline: none !important;
     /* 2 */
-    -webkit-box-shadow: 0 0 0 1px #FFF, 0 0 0 2px #F5A700;
-            box-shadow: 0 0 0 1px #FFF, 0 0 0 2px #F5A700;
+    box-shadow: 0 0 0 1px #FFF, 0 0 0 2px #F5A700;
     /* 3 */
     color: #FFF; }
   a.kuiButton--warning:not(.kuiButton-isDisabled):focus {
@@ -357,8 +782,7 @@ main {
     /* 1 */
     outline: none !important;
     /* 2 */
-    -webkit-box-shadow: 0 0 0 1px #FFF, 0 0 0 2px #F5A700;
-            box-shadow: 0 0 0 1px #FFF, 0 0 0 2px #F5A700;
+    box-shadow: 0 0 0 1px #FFF, 0 0 0 2px #F5A700;
     /* 3 */
     color: #FFF; }
   .kuiButton--warning:enabled:hover {
@@ -386,7 +810,7 @@ main {
 
 /**
  * 1. Override Bootstrap.
- * 2. Override either Bootstrap or Timelion styles.
+ * 2. Override either Bootstrap or Timeline styles.
  */
 .kuiButton--hollow {
   color: #006BB4 !important;
@@ -443,14 +867,8 @@ main {
     text-decoration: underline; }
 
 .kuiButtonGroup {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center; }
+  align-items: center; }
   .kuiButtonGroup .kuiButton + .kuiButton {
     margin-left: 4px; }
 
@@ -466,24 +884,15 @@ main {
   border-bottom-left-radius: 0; }
 
 .kuiButtonGroup--united > .kuiButton:only-child {
-  border-top-right-radius: 4px;
-  border-bottom-right-radius: 4px;
-  border-top-left-radius: 4px;
-  border-bottom-left-radius: 4px; }
+  border-radius: 4px 4px 4px 4px; }
 
 .kuiButtonGroup--united .kuiButton + .kuiButton {
   margin-left: 0; }
 
 .kuiButtonGroup--fullWidth {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex; }
   .kuiButtonGroup--fullWidth > .kuiButton {
-    -webkit-box-flex: 1;
-    -webkit-flex: 1 1 auto;
-        -ms-flex: 1 1 auto;
-            flex: 1 1 auto;
+    flex: 1 1 auto;
     text-align: center; }
 
 .eui-textCenter > .kuiButtonGroup,
@@ -492,7 +901,6 @@ main {
 
 .kuiCollapseButton {
   -webkit-appearance: none;
-     -moz-appearance: none;
           appearance: none;
   background-color: transparent;
   padding: 4px;
@@ -534,46 +942,44 @@ main {
  */
 .kuiCheckBox {
   -webkit-appearance: none;
+          appearance: none;
   /* 1 */
   background-color: #fbfcfd;
   border: 1px solid rgba(15, 39, 118, 0.1);
   border-radius: 4px;
   width: 16px;
   height: 16px;
+  font: "var(--font-text)" !important;
+  /* 2 */
   line-height: 1.5 !important;
   /* 2 */
   margin: 0 !important;
   /* 2 */
-  font: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
-  /* 2 */
-  font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
+  font-family: "var(--font-text)" !important;
   /* 2 */
   font-size: 10px !important;
   /* 2 */
-  -webkit-transition: background-color 0.1s linear;
   transition: background-color 0.1s linear; }
-  .kuiCheckBox:before {
+  .kuiCheckBox::before {
     position: relative;
     left: 0.25em;
-    font-family: FontAwesome;
+    font-family: FontAwesome, sans-serif;
     content: "\F00C";
     font-size: 1em;
     opacity: 0;
     color: #FFF;
-    -webkit-transition: opacity 0.1s linear;
     transition: opacity 0.1s linear; }
   .kuiCheckBox:checked {
     border-color: #006BB4;
     background-color: #006BB4; }
-    .kuiCheckBox:checked:before {
+    .kuiCheckBox:checked::before {
       opacity: 1; }
   .kuiCheckBox:focus {
     z-index: 1;
     /* 1 */
     outline: none !important;
     /* 2 */
-    -webkit-box-shadow: 0 0 0 1px #FFF, 0 0 0 2px #006BB4;
-            box-shadow: 0 0 0 1px #FFF, 0 0 0 2px #006BB4;
+    box-shadow: 0 0 0 1px #FFF, 0 0 0 2px #006BB4;
     /* 3 */ }
   .kuiCheckBox:disabled {
     background-color: #eef2f7 !important;
@@ -581,14 +987,8 @@ main {
     cursor: not-allowed !important; }
 
 .kuiCheckBoxLabel {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   font-weight: normal !important;
   line-height: 1.5; }
 
@@ -628,9 +1028,8 @@ main {
    */
 .kuiSearchInput__input {
   -webkit-appearance: none;
-     -moz-appearance: none;
           appearance: none;
-  font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: "var(--font-text)";
   padding: 4px 12px 4px;
   font-size: 16px;
   font-weight: 400;
@@ -639,7 +1038,6 @@ main {
   background-color: #fbfcfd;
   border: 1px solid rgba(15, 39, 118, 0.1);
   border-radius: 4px;
-  -webkit-transition: border-color 0.1s linear;
   transition: border-color 0.1s linear;
   min-height: 32px;
   /* 1 */
@@ -667,9 +1065,8 @@ main {
  */
 .kuiSelect {
   -webkit-appearance: none;
-     -moz-appearance: none;
           appearance: none;
-  font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: "var(--font-text)";
   padding: 4px 12px 4px;
   font-size: 16px;
   font-weight: 400;
@@ -678,7 +1075,6 @@ main {
   background-color: #fbfcfd;
   border: 1px solid rgba(15, 39, 118, 0.1);
   border-radius: 4px;
-  -webkit-transition: border-color 0.1s linear;
   transition: border-color 0.1s linear;
   min-height: 32px;
   /* 1 */
@@ -704,8 +1100,7 @@ main {
   .kuiSelect.kuiSelect-isInvalid {
     border-color: #BD271E; }
   .kuiSelect:focus {
-    -webkit-box-shadow: none;
-            box-shadow: none;
+    box-shadow: none;
     outline: none;
     border-color: #006BB4; }
 
@@ -724,9 +1119,8 @@ main {
 .kuiStaticInput {
   width: 180px;
   -webkit-appearance: none;
-     -moz-appearance: none;
           appearance: none;
-  font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: "var(--font-text)";
   padding: 4px 12px 4px;
   font-size: 16px;
   font-weight: 400;
@@ -739,9 +1133,8 @@ main {
 .kuiTextArea {
   width: 180px;
   -webkit-appearance: none;
-     -moz-appearance: none;
           appearance: none;
-  font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: "var(--font-text)";
   padding: 4px 12px 4px;
   font-size: 16px;
   font-weight: 400;
@@ -750,7 +1143,6 @@ main {
   background-color: #fbfcfd;
   border: 1px solid rgba(15, 39, 118, 0.1);
   border-radius: 4px;
-  -webkit-transition: border-color 0.1s linear;
   transition: border-color 0.1s linear;
   min-height: 32px;
   /* 1 */ }
@@ -763,8 +1155,7 @@ main {
     opacity: 0.4;
     cursor: not-allowed; }
   .kuiTextArea:focus {
-    -webkit-box-shadow: none;
-            box-shadow: none;
+    box-shadow: none;
     outline: none;
     border-color: #006BB4; }
   .kuiTextArea.kuiTextArea-isInvalid {
@@ -782,9 +1173,8 @@ main {
 .kuiTextInput {
   width: 180px;
   -webkit-appearance: none;
-     -moz-appearance: none;
           appearance: none;
-  font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: "var(--font-text)";
   padding: 4px 12px 4px;
   font-size: 16px;
   font-weight: 400;
@@ -793,7 +1183,6 @@ main {
   background-color: #fbfcfd;
   border: 1px solid rgba(15, 39, 118, 0.1);
   border-radius: 4px;
-  -webkit-transition: border-color 0.1s linear;
   transition: border-color 0.1s linear;
   min-height: 32px;
   /* 1 */ }
@@ -818,21 +1207,12 @@ main {
  * 1. We may want to put elements in here which have different heights.
  */
 .kuiFieldGroup {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   /* 1 */ }
 
 .kuiFieldGroup--alignTop {
-  -webkit-box-align: start;
-  -webkit-align-items: flex-start;
-      -ms-flex-align: start;
-          align-items: flex-start; }
+  align-items: flex-start; }
 
 .kuiFieldGroupSection {
   line-height: 1.5; }
@@ -840,10 +1220,7 @@ main {
     margin-left: 10px; }
 
 .kuiFieldGroupSection--wide {
-  -webkit-box-flex: 1;
-  -webkit-flex: 1 1 auto;
-      -ms-flex: 1 1 auto;
-          flex: 1 1 auto; }
+  flex: 1 1 auto; }
   .kuiFieldGroupSection--wide > * {
     width: 100%; }
 
@@ -854,7 +1231,7 @@ main {
 .kuiIcon {
   display: inline-block;
   /* 1 */
-  font: normal normal normal 14px/1 FontAwesome;
+  font: normal normal normal 14px/1 FontAwesome, sans-serif;
   /* 1 */
   font-size: inherit;
   /* 1 */
@@ -920,14 +1297,8 @@ main {
  * 1. Align with first line of title text if it wraps.
  */
 .kuiInfoPanelHeader {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: baseline;
-  -webkit-align-items: baseline;
-      -ms-flex-align: baseline;
-          align-items: baseline;
+  align-items: baseline;
   /* 1 */ }
 
 .kuiInfoPanelHeader__icon {
@@ -955,7 +1326,6 @@ main {
   cursor: pointer;
   /* 1 */
   -webkit-appearance: none;
-     -moz-appearance: none;
           appearance: none;
   /* 2 */
   background-color: transparent;
@@ -977,24 +1347,13 @@ main {
  *    a bit.
  */
 .kuiLocalBreadcrumbs {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   padding: 12px 8px;
   /* 1 */
   border-bottom: 1px solid #D3DAE6;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-  -webkit-flex-basis: 100%;
-      -ms-flex-preferred-size: 100%;
-          flex-basis: 100%;
+  flex-grow: 1;
+  flex-basis: 100%;
   background-color: #FFF; }
 
 .kuiLocalBreadcrumb {
@@ -1003,11 +1362,9 @@ main {
   font-weight: normal; }
   .kuiLocalBreadcrumb + .kuiLocalBreadcrumb {
     margin-left: 6px; }
-    .kuiLocalBreadcrumb + .kuiLocalBreadcrumb:before {
-      content: '/';
+    .kuiLocalBreadcrumb + .kuiLocalBreadcrumb::before {
+      content: "/";
       -webkit-user-select: none;
-         -moz-user-select: none;
-          -ms-user-select: none;
               user-select: none;
       margin-right: 4px;
       color: #D3DAE6; }
@@ -1021,7 +1378,6 @@ main {
   cursor: pointer;
   /* 1 */
   -webkit-appearance: none;
-     -moz-appearance: none;
           appearance: none;
   /* 2 */
   background-color: transparent;
@@ -1054,18 +1410,9 @@ main {
   padding: 0; }
 
 .kuiDatePickerNavigation {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
+  align-items: center;
+  justify-content: space-between;
   margin-bottom: 4px; }
 
 /**
@@ -1073,7 +1420,6 @@ main {
  */
 .kuiDatePickerNavigationButton {
   -webkit-appearance: none;
-     -moz-appearance: none;
           appearance: none;
   background-color: transparent;
   border: none;
@@ -1090,8 +1436,7 @@ main {
     /* 1 */
     outline: none !important;
     /* 2 */
-    -webkit-box-shadow: 0 0 0 1px transparent, 0 0 0 2px #006BB4;
-            box-shadow: 0 0 0 1px transparent, 0 0 0 2px #006BB4;
+    box-shadow: 0 0 0 1px transparent, 0 0 0 2px #006BB4;
     /* 3 */
     color: #343741;
     /* 1 */ }
@@ -1122,7 +1467,6 @@ main {
  */
 .kuiDatePickerRowCellContent {
   -webkit-appearance: none;
-     -moz-appearance: none;
           appearance: none;
   background-color: transparent;
   width: 100%;
@@ -1137,8 +1481,7 @@ main {
     /* 1 */
     outline: none !important;
     /* 2 */
-    -webkit-box-shadow: 0 0 0 1px transparent, 0 0 0 2px #006BB4;
-            box-shadow: 0 0 0 1px transparent, 0 0 0 2px #006BB4;
+    box-shadow: 0 0 0 1px transparent, 0 0 0 2px #006BB4;
     /* 3 */
     color: #343741;
     /* 1 */ }
@@ -1167,7 +1510,6 @@ main {
 
 .kuiLocalDropdownCloseButton {
   -webkit-appearance: none;
-     -moz-appearance: none;
           appearance: none;
   background-color: transparent;
   padding: 4px;
@@ -1185,16 +1527,10 @@ main {
     opacity: 1; }
 
 .kuiLocalDropdownPanels {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex; }
 
 .kuiLocalDropdownPanel {
-  -webkit-box-flex: 1;
-  -webkit-flex: 1 1 0%;
-      -ms-flex: 1 1 0%;
-          flex: 1 1 0%; }
+  flex: 1 1 0%; }
 
 .kuiLocalDropdownPanel--left {
   margin-right: 30px; }
@@ -1218,18 +1554,9 @@ main {
     margin-bottom: 0; }
 
 .kuiLocalDropdownHeader {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
+  align-items: center;
+  justify-content: space-between;
   margin-bottom: 6px; }
 
 /**
@@ -1243,9 +1570,6 @@ main {
   color: #343741; }
 
 .kuiLocalDropdownHeader__actions {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex; }
 
 .kuiLocalDropdownHeader__action {
@@ -1289,26 +1613,14 @@ main {
   color: #69707D; }
 
 .kuiLocalMenu {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: stretch;
-  -webkit-align-items: stretch;
-      -ms-flex-align: stretch;
-          align-items: stretch;
+  align-items: stretch;
   padding-top: 8px;
   padding-bottom: 8px; }
 
 .kuiLocalMenuItem {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   padding: 2px 8px;
   font-size: 16px;
   background-color: transparent;
@@ -1342,19 +1654,9 @@ main {
  *    dropdown.
  */
 .kuiLocalNav {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-  -webkit-flex-direction: column;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
+  flex-direction: column;
+  justify-content: space-between;
   min-height: 69px;
   /* 1 */
   color: #343741;
@@ -1366,28 +1668,13 @@ main {
  * 1. Allow row to expand if the content is so long that it wraps.
  */
 .kuiLocalNavRow {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: stretch;
-  -webkit-align-items: stretch;
-      -ms-flex-align: stretch;
-          align-items: stretch;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-      -ms-flex-pack: justify;
-          justify-content: space-between; }
+  align-items: stretch;
+  justify-content: space-between; }
 
 .kuiLocalNavRow__section {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: stretch;
-  -webkit-align-items: stretch;
-      -ms-flex-align: stretch;
-          align-items: stretch; }
+  align-items: stretch; }
 
 /**
  * 1. We make this row flex-start because it usually contains a search input, which may expand
@@ -1399,25 +1686,18 @@ main {
 .kuiLocalNavRow--secondary {
   padding: 0 8px;
   /* 1 */
-  -webkit-box-align: start;
-  -webkit-align-items: flex-start;
-      -ms-flex-align: start;
-          align-items: flex-start;
+  align-items: flex-start;
   /* 1 */ }
 
 .kuiLocalSearch {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
   width: 100%;
   margin-bottom: 8px; }
 
 .kuiLocalSearchInput {
   -webkit-appearance: none;
-     -moz-appearance: none;
           appearance: none;
-  font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: "var(--font-text)";
   padding: 4px 12px 4px;
   font-size: 16px;
   font-weight: 400;
@@ -1426,14 +1706,10 @@ main {
   background-color: #fbfcfd;
   border: 1px solid rgba(15, 39, 118, 0.1);
   border-radius: 4px;
-  -webkit-transition: border-color 0.1s linear;
   transition: border-color 0.1s linear;
   min-height: 32px;
   /* 1 */
-  -webkit-box-flex: 1;
-  -webkit-flex: 1 1 100%;
-      -ms-flex: 1 1 100%;
-          flex: 1 1 100%;
+  flex: 1 1 100%;
   border-color: #FFF;
   border-color: #D3DAE6;
   border-radius: 4px 0 0 4px; }
@@ -1446,31 +1722,16 @@ main {
     opacity: 0.4;
     cursor: not-allowed; }
   .kuiLocalSearchInput:focus {
-    -webkit-box-shadow: none;
-            box-shadow: none; }
+    box-shadow: none; }
   .kuiLocalSearchInput.kuiLocalSearchInput-isInvalid {
     border-color: #BD271E; }
 
 .kuiLocalSearchInput--secondary {
   height: 32px;
-  -webkit-box-flex: 0;
-  -webkit-flex: 0 0 auto;
-      -ms-flex: 0 0 auto;
-          flex: 0 0 auto;
+  flex: 0 0 auto;
   border-radius: 0;
   border-left-width: 0; }
 
-.kuiLocalSearchAssistedInput {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-flex: 1;
-  -webkit-flex: 1 1 100%;
-      -ms-flex: 1 1 100%;
-          flex: 1 1 100%;
-  position: relative; }
-
 /**
  * 1. em used for right padding so documentation link and query string
  *    won't overlap if the user increases their default browser font size
@@ -1482,8 +1743,8 @@ main {
   /* 1 */ }
 
 /**
-   * 1. Vertically center the assistance, regardless of its height.
-   */
+ * 1. Vertically center the assistance, regardless of its height.
+ */
 .kuiLocalSearchAssistedInput__assistance {
   position: absolute;
   right: 6px;
@@ -1496,9 +1757,8 @@ main {
 
 .kuiLocalSearchSelect {
   -webkit-appearance: none;
-     -moz-appearance: none;
           appearance: none;
-  font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: "var(--font-text)";
   padding: 4px 12px 4px;
   font-size: 16px;
   font-weight: 400;
@@ -1507,7 +1767,6 @@ main {
   background-color: #fbfcfd;
   border: 1px solid rgba(15, 39, 118, 0.1);
   border-radius: 4px;
-  -webkit-transition: border-color 0.1s linear;
   transition: border-color 0.1s linear;
   min-height: 32px;
   /* 1 */
@@ -1551,29 +1810,22 @@ main {
     /* 1 */
     outline: none !important;
     /* 2 */
-    -webkit-box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #006BB4;
-            box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #006BB4;
+    box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #006BB4;
     /* 3 */ }
 
 /**
  * 1. We want the bottom border on selected tabs to be flush with the bottom of the container.
  */
 .kuiLocalTabs {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: end;
-  -webkit-align-items: flex-end;
-      -ms-flex-align: end;
-          align-items: flex-end;
+  align-items: flex-end;
   height: 100%; }
 
 /**
    * 1. Override inherited typographic styles.
    */
 .kuiLocalTab {
-  padding: 5px 0 6px 0;
+  padding: 5px 0 6px;
   font-size: 18px;
   color: #343741;
   border-bottom: 2px solid transparent;
@@ -1601,25 +1853,14 @@ main {
     margin-left: 15px; }
 
 .kuiLocalTitle {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   padding: 12px 8px;
   font-size: 16px;
   font-weight: bold;
   border-bottom: 1px solid #D3DAE6;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-  -webkit-flex-basis: 100%;
-      -ms-flex-preferred-size: 100%;
-          flex-basis: 100%;
+  flex-grow: 1;
+  flex-basis: 100%;
   background-color: #FFF; }
   .kuiLocalTitle:empty {
     padding: 0;
@@ -1629,14 +1870,8 @@ main {
  * 1. Put 10px of space between each child.
  */
 .kuiPager {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center; }
+  align-items: center; }
   .kuiPager > * + * {
     margin-left: 10px;
     /* 1 */ }
@@ -1649,31 +1884,17 @@ main {
   /* 1 */ }
 
 .kuiPanel {
-  -webkit-box-shadow: 0 2px 2px -1px rgba(152, 162, 179, 0.3), 0 1px 5px -2px rgba(152, 162, 179, 0.3);
-          box-shadow: 0 2px 2px -1px rgba(152, 162, 179, 0.3), 0 1px 5px -2px rgba(152, 162, 179, 0.3);
+  box-shadow: 0 2px 2px -1px rgba(152, 162, 179, 0.3), 0 1px 5px -2px rgba(152, 162, 179, 0.3);
   background-color: #FFF;
   border: 1px solid #D3DAE6;
   border-radius: 4px; }
 
 .kuiPanel--prompt {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-  -webkit-flex-direction: column;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
+  flex-direction: column;
+  align-items: center;
   text-align: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  justify-content: center;
   min-height: 300px; }
   .kuiPanel--prompt .kuiPanelBody {
     padding: 30px;
@@ -1687,32 +1908,14 @@ main {
   border-radius: 0; }
 
 .kuiPanel--centered {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center; }
+  justify-content: center;
+  align-items: center; }
 
 .kuiPanelHeader {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
+  align-items: center;
+  justify-content: space-between;
   min-height: 30px;
   /* 1 */
   padding: 10px;
@@ -1723,8 +1926,7 @@ main {
     /* 1 */
     outline: none !important;
     /* 2 */
-    -webkit-box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #006BB4;
-            box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #006BB4;
+    box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #006BB4;
     /* 3 */ }
   a.kuiPanelHeader .kuiButton:not(.kuiButton-isDisabled):focus {
     /* 1 */
@@ -1732,16 +1934,14 @@ main {
     /* 1 */
     outline: none !important;
     /* 2 */
-    -webkit-box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #006BB4;
-            box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #006BB4;
+    box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #006BB4;
     /* 3 */ }
   .kuiPanelHeader .kuiButton--danger:not(a):enabled:focus {
     z-index: 1;
     /* 1 */
     outline: none !important;
     /* 2 */
-    -webkit-box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #BD271E;
-            box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #BD271E;
+    box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #BD271E;
     /* 3 */ }
   a.kuiPanelHeader .kuiButton--danger:not(.kuiButton-isDisabled):focus {
     /* 1 */
@@ -1749,8 +1949,7 @@ main {
     /* 1 */
     outline: none !important;
     /* 2 */
-    -webkit-box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #BD271E;
-            box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #BD271E;
+    box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #BD271E;
     /* 3 */ }
   .kuiPanelHeader .kuiSelect {
     border-color: #fbfcfd; }
@@ -1775,39 +1974,21 @@ main {
  * 1. Undo what barSection mixin does.
  */
 .kuiPanelHeaderSection {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-flex: 1;
-  -webkit-flex: 1 1 auto;
-      -ms-flex: 1 1 auto;
-          flex: 1 1 auto;
+  align-items: center;
+  flex: 1 1 auto;
   margin-left: 25px;
   margin-right: 25px; }
   .kuiPanelHeaderSection:not(:first-child):not(:last-child):not(:only-child) {
-    -webkit-box-pack: center;
-    -webkit-justify-content: center;
-        -ms-flex-pack: center;
-            justify-content: center;
+    justify-content: center;
     /* 3 */ }
   .kuiPanelHeaderSection:first-child {
     margin-left: 0; }
   .kuiPanelHeaderSection:last-child {
     margin-right: 0;
-    -webkit-box-flex: 0;
-    -webkit-flex: 0 1 auto;
-        -ms-flex: 0 1 auto;
-            flex: 0 1 auto;
+    flex: 0 1 auto;
     /* 4 */
-    -webkit-box-pack: end;
-    -webkit-justify-content: flex-end;
-        -ms-flex-pack: end;
-            justify-content: flex-end;
+    justify-content: flex-end;
     /* 5 */ }
   .kuiPanelHeaderSection:only-child {
     margin-left: auto;
@@ -1825,19 +2006,9 @@ main {
   padding: 10px; }
 
 .kuiEmptyTablePrompt {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-  -webkit-flex-direction: column;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
+  flex-direction: column;
+  align-items: center;
   padding: 30px; }
 
 .kuiEmptyTablePrompt__message {
@@ -1849,14 +2020,8 @@ main {
   margin-top: 10px; }
 
 .kuiStatusText {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
   display: inline-flex;
-  -webkit-box-align: baseline;
-  -webkit-align-items: baseline;
-      -ms-flex-align: baseline;
-          align-items: baseline; }
+  align-items: baseline; }
 
 .kuiStatusText--info {
   color: #006BB4; }
@@ -1941,14 +2106,11 @@ main {
  */
 .kuiTableHeaderCellButton {
   -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
           user-select: none;
   /* 1 */
   cursor: pointer;
   width: 100%;
   -webkit-appearance: none;
-     -moz-appearance: none;
           appearance: none;
   /* 2 */
   background-color: transparent;
@@ -1969,14 +2131,8 @@ main {
     display: block;
     opacity: 1; }
   .kuiTableHeaderCellButton .kuiTableHeaderCell__liner {
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -ms-flexbox;
     display: flex;
-    -webkit-box-align: center;
-    -webkit-align-items: center;
-        -ms-flex-align: center;
-            align-items: center; }
+    align-items: center; }
 
 .kuiTableHeaderCell--alignRight {
   text-align: right; }
@@ -2074,9 +2230,6 @@ main {
   line-height: 1.5; }
 
 .kuiTabs {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
   border-bottom: 1px solid #D3DAE6; }
 
@@ -2089,7 +2242,6 @@ main {
  */
 .kuiTab {
   -webkit-appearance: none;
-     -moz-appearance: none;
           appearance: none;
   /* 1 */
   cursor: pointer;
@@ -2111,8 +2263,7 @@ main {
   .kuiTab:active {
     outline: none !important;
     /* 1 */
-    -webkit-box-shadow: none;
-            box-shadow: none;
+    box-shadow: none;
     /* 1 */ }
   .kuiTab:focus {
     outline: none;
@@ -2131,18 +2282,9 @@ main {
     border-bottom-color: transparent; }
 
 .kuiToolBar {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
+  align-items: center;
+  justify-content: space-between;
   min-height: 30px;
   /* 1 */
   padding: 10px;
@@ -2154,8 +2296,7 @@ main {
     /* 1 */
     outline: none !important;
     /* 2 */
-    -webkit-box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #006BB4;
-            box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #006BB4;
+    box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #006BB4;
     /* 3 */ }
   a.kuiToolBar .kuiButton:not(.kuiButton-isDisabled):focus {
     /* 1 */
@@ -2163,16 +2304,14 @@ main {
     /* 1 */
     outline: none !important;
     /* 2 */
-    -webkit-box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #006BB4;
-            box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #006BB4;
+    box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #006BB4;
     /* 3 */ }
   .kuiToolBar .kuiButton--danger:not(a):enabled:focus {
     z-index: 1;
     /* 1 */
     outline: none !important;
     /* 2 */
-    -webkit-box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #BD271E;
-            box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #BD271E;
+    box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #BD271E;
     /* 3 */ }
   a.kuiToolBar .kuiButton--danger:not(.kuiButton-isDisabled):focus {
     /* 1 */
@@ -2180,8 +2319,7 @@ main {
     /* 1 */
     outline: none !important;
     /* 2 */
-    -webkit-box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #BD271E;
-            box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #BD271E;
+    box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #BD271E;
     /* 3 */ }
   .kuiToolBar .kuiSelect {
     border-color: #fbfcfd; }
@@ -2194,39 +2332,21 @@ main {
       border-color: #006BB4; }
 
 .kuiToolBarSection {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-flex: 1;
-  -webkit-flex: 1 1 auto;
-      -ms-flex: 1 1 auto;
-          flex: 1 1 auto;
+  align-items: center;
+  flex: 1 1 auto;
   margin-left: 25px;
   margin-right: 25px; }
   .kuiToolBarSection:not(:first-child):not(:last-child):not(:only-child) {
-    -webkit-box-pack: center;
-    -webkit-justify-content: center;
-        -ms-flex-pack: center;
-            justify-content: center;
+    justify-content: center;
     /* 3 */ }
   .kuiToolBarSection:first-child {
     margin-left: 0; }
   .kuiToolBarSection:last-child {
     margin-right: 0;
-    -webkit-box-flex: 0;
-    -webkit-flex: 0 1 auto;
-        -ms-flex: 0 1 auto;
-            flex: 0 1 auto;
+    flex: 0 1 auto;
     /* 4 */
-    -webkit-box-pack: end;
-    -webkit-justify-content: flex-end;
-        -ms-flex-pack: end;
-            justify-content: flex-end;
+    justify-content: flex-end;
     /* 5 */ }
   .kuiToolBarSection:only-child {
     margin-left: auto;
@@ -2243,18 +2363,9 @@ main {
   /* 1 */ }
 
 .kuiToolBarFooter {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
+  align-items: center;
+  justify-content: space-between;
   min-height: 30px;
   /* 1 */
   padding: 10px;
@@ -2262,39 +2373,21 @@ main {
   background-color: #FFF; }
 
 .kuiToolBarFooterSection {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-flex: 1;
-  -webkit-flex: 1 1 auto;
-      -ms-flex: 1 1 auto;
-          flex: 1 1 auto;
+  align-items: center;
+  flex: 1 1 auto;
   margin-left: 25px;
   margin-right: 25px; }
   .kuiToolBarFooterSection:not(:first-child):not(:last-child):not(:only-child) {
-    -webkit-box-pack: center;
-    -webkit-justify-content: center;
-        -ms-flex-pack: center;
-            justify-content: center;
+    justify-content: center;
     /* 3 */ }
   .kuiToolBarFooterSection:first-child {
     margin-left: 0; }
   .kuiToolBarFooterSection:last-child {
     margin-right: 0;
-    -webkit-box-flex: 0;
-    -webkit-flex: 0 1 auto;
-        -ms-flex: 0 1 auto;
-            flex: 0 1 auto;
+    flex: 0 1 auto;
     /* 4 */
-    -webkit-box-pack: end;
-    -webkit-justify-content: flex-end;
-        -ms-flex-pack: end;
-            justify-content: flex-end;
+    justify-content: flex-end;
     /* 5 */ }
   .kuiToolBarFooterSection:only-child {
     margin-left: auto;
@@ -2309,20 +2402,11 @@ main {
  *    kuiToolBarSection sibling.
  */
 .kuiToolBarSearch {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   margin-left: 25px;
   margin-right: 25px;
-  -webkit-box-flex: 1;
-  -webkit-flex: 1 1 auto;
-      -ms-flex: 1 1 auto;
-          flex: 1 1 auto;
+  flex: 1 1 auto;
   max-width: 100%;
   /* 2 */
   line-height: 1.5; }
@@ -2335,10 +2419,7 @@ main {
     /* 1 */ }
 
 .kuiToolBarSearchBox {
-  -webkit-box-flex: 1;
-  -webkit-flex: 1 1 auto;
-      -ms-flex: 1 1 auto;
-          flex: 1 1 auto;
+  flex: 1 1 auto;
   position: relative;
   font-size: 16px;
   max-width: 800px; }
@@ -2348,7 +2429,7 @@ main {
   top: 0.5em;
   left: 0.7em;
   font-size: 1em;
-  color: #ACACAC; }
+  color: #acacac; }
 
 /**
    * 1. Fix inherited styles (possibly from Bootstrap).
@@ -2357,7 +2438,7 @@ main {
   width: 100%;
   min-width: 200px;
   padding: 4px 12px 5px 28px;
-  font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: "var(--font-text)";
   /* 1 */
   background-color: #FFF;
   color: #343741;
@@ -2366,7 +2447,6 @@ main {
   border: 1px solid #D3DAE6;
   line-height: normal;
   /* 1 */
-  -webkit-transition: border-color 0.1s linear;
   transition: border-color 0.1s linear; }
   .kuiToolBarSearchBox__input:focus {
     outline: none;
@@ -2448,11 +2528,8 @@ main {
   margin-top: 32px; }
 
 .kuiView {
-  background-color: #FFF;
-  -webkit-box-flex: 1;
-  -webkit-flex: 1 1 auto;
-      -ms-flex: 1 1 auto;
-          flex: 1 1 auto; }
+  background-color: #fff;
+  flex: 1 1 auto; }
 
 .kuiViewContent {
   padding-top: 20px;
diff --git a/packages/osd-ui-framework/dist/kui_next_dark.css b/packages/osd-ui-framework/dist/kui_next_dark.css
new file mode 100644
index 000000000000..f547a9bd3e82
--- /dev/null
+++ b/packages/osd-ui-framework/dist/kui_next_dark.css
@@ -0,0 +1,2581 @@
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/**
+ * 1. Focus rings shouldn't be visible on scrollable regions, but a11y requires them to be focusable.
+ *    Browser's supporting `:focus-visible` will still show outline on keyboard focus only.
+ *    Others like Safari, won't show anything at all.
+ * 2. Force the `:focus-visible` when the `tabindex=0` (is tabbable)
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/**
+ * 1. Enforce pointer when there's no href.
+ * 2. Allow these styles to be applied to a button element.
+ */
+/**
+ * 1. Override Bootstrap styles.
+ */
+/**
+ * 1. Links can't have a disabled attribute, so they can't support :disabled.
+ */
+/**
+ * 1. Links can't have a disabled attribute, so they can't support :enabled.
+ */
+/**
+ * 1. Links can't have a disabled attribute, so they can't support :enabled.
+ */
+/**
+ * 1. Links can't have a disabled attribute, so they can't support :enabled.
+ */
+/**
+ * Nothing fancy, just the basics so we can use this for both regular and static controls.
+ */
+/**
+ * 1. Prevent Firefox users from being able to resize textareas to smaller than the min-height.
+ */
+/**
+ * We specifically don't include Angular's ng-${state} classes here because we don't want to be tightly
+ * coupled with Angular.
+ */
+/**
+ * 1. Embedded SVG of fa-caret-down
+ *    (https://github.com/encharm/Font-Awesome-SVG-PNG/blob/master/black/svg/caret-down.svg).
+ * 2. Make room on right side for the caret.
+ * 3. Prevent Firefox from showing dotted line around text on focus.
+ */
+/**
+ * 1. Setting to inline-block guarantees the same height when applied to both
+ *    button elements and anchor tags.
+ * 2. Fit MicroButton inside of Table rows without pushing them taller.
+ */
+/**
+ * 1. Give Bar a consistent height for when it contains shorter children, and therefore can't
+ *    depend on them to give it the desired height.
+ */
+/**
+ * 1. Put 10px of space between each child.
+ * 2. If there is only one section, align it to the right. If you wanted it aligned right, you
+ *    wouldn't use the Bar in the first place.
+ * 3. Children in the middle should center their content.
+ * 4. Fix an IE bug which causes the last child to overflow the container.
+ * 5. Fixing this bug means we now need to align the children to the right.
+ */
+/**
+ * 1. Required for IE11.
+ */
+main {
+  display: block;
+  /* 1 */ }
+
+.kuiBar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 30px;
+  /* 1 */ }
+
+.kuiBarSection {
+  display: flex;
+  align-items: center;
+  flex: 1 1 auto;
+  margin-left: 25px;
+  margin-right: 25px; }
+  .kuiBarSection:not(:first-child):not(:last-child):not(:only-child) {
+    justify-content: center;
+    /* 3 */ }
+  .kuiBarSection:first-child {
+    margin-left: 0; }
+  .kuiBarSection:last-child {
+    margin-right: 0;
+    flex: 0 1 auto;
+    /* 4 */
+    justify-content: flex-end;
+    /* 5 */ }
+  .kuiBarSection:only-child {
+    margin-left: auto;
+    /* 2 */ }
+  .kuiBarSection > * + * {
+    margin-left: 10px;
+    /* 1 */ }
+
+/**
+ * 1. Setting to inline-block guarantees the same height when applied to both
+ *    button elements and anchor tags.
+ * 2. Links can be focused when they're "disabled" (since we're just faking this with a class), but
+ *    at least make them look like they're not focused.
+ */
+.kuiButton {
+  display: inline-block;
+  /* 1 */
+  -webkit-appearance: none;
+          appearance: none;
+  cursor: pointer;
+  padding: 4px 12px 5px;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+  height: 30px;
+  text-decoration: none;
+  border: none;
+  border-radius: 4px; }
+  .kuiButton:disabled {
+    cursor: not-allowed;
+    opacity: 0.5; }
+  a.kuiButton.kuiButton-isDisabled {
+    cursor: not-allowed;
+    opacity: 0.5; }
+  .kuiButton:enabled:active {
+    -webkit-transform: translateY(1px);
+            transform: translateY(1px); }
+  a.kuiButton:not(.kuiButton-isDisabled):active {
+    /* 1 */
+    -webkit-transform: translateY(1px);
+            transform: translateY(1px); }
+
+/**
+   * 1. Solves whitespace problems introduced by inline elements.
+   */
+.kuiButton__inner {
+  display: flex;
+  /* 1 */
+  align-items: center;
+  /* 1 */ }
+
+.kuiButton--small {
+  font-size: 12px;
+  padding: 2px 8px 3px;
+  height: 22px; }
+
+.kuiButton--fullWidth {
+  width: 100%;
+  text-align: center; }
+
+.kuiButton--iconText .kuiButton__icon:first-child:not(:only-child) {
+  margin-right: 8px; }
+
+.kuiButton--iconText .kuiButton__icon:last-child:not(:only-child) {
+  margin-left: 8px; }
+
+.kuiButton--iconText.kuiButton--small .kuiButton__icon:first-child:not(:only-child) {
+  margin-right: 4px; }
+
+.kuiButton--iconText.kuiButton--small .kuiButton__icon:last-child:not(:only-child) {
+  margin-left: 4px; }
+
+/**
+ * 1. Override Bootstrap.
+ */
+.kuiButton--basic {
+  color: #DFE5EF;
+  background-color: #101B25; }
+  .kuiButton--basic:not(a):enabled:focus {
+    color: #DFE5EF; }
+  a.kuiButton--basic:not(.kuiButton-isDisabled):focus {
+    /* 1 */
+    color: #DFE5EF; }
+  .kuiButton--basic:enabled:hover {
+    background-color: #010101 !important;
+    /* 1 */ }
+  a.kuiButton--basic:not(.kuiButton-isDisabled):hover {
+    /* 1 */
+    background-color: #010101 !important;
+    /* 1 */ }
+  .kuiButton--basic:enabled:active {
+    background-color: #010101 !important;
+    /* 1 */ }
+  a.kuiButton--basic:not(.kuiButton-isDisabled):active {
+    /* 1 */
+    background-color: #010101 !important;
+    /* 1 */ }
+
+/**
+ * 1. Override Bootstrap.
+ */
+.kuiButton--primary {
+  color: #FCFEFF;
+  background-color: #159D8D; }
+  .kuiButton--primary:not(a):enabled:focus {
+    color: #FCFEFF; }
+  a.kuiButton--primary:not(.kuiButton-isDisabled):focus {
+    /* 1 */
+    color: #FCFEFF; }
+  .kuiButton--primary:enabled:hover {
+    color: #FCFEFF !important;
+    /* 1 */
+    background-color: #0f7065; }
+  a.kuiButton--primary:not(.kuiButton-isDisabled):hover {
+    /* 1 */
+    color: #FCFEFF !important;
+    /* 1 */
+    background-color: #0f7065; }
+  .kuiButton--primary:enabled:active {
+    color: #FCFEFF !important;
+    /* 1 */
+    background-color: #0f7065; }
+  a.kuiButton--primary:not(.kuiButton-isDisabled):active {
+    /* 1 */
+    color: #FCFEFF !important;
+    /* 1 */
+    background-color: #0f7065; }
+
+/**
+ * 1. Override Bootstrap.
+ */
+.kuiButton--success {
+  color: #FCFEFF;
+  background-color: #7DE2D1; }
+  .kuiButton--success:not(a):enabled:focus {
+    color: #FCFEFF; }
+  a.kuiButton--success:not(.kuiButton-isDisabled):focus {
+    /* 1 */
+    color: #FCFEFF; }
+  .kuiButton--success:enabled:hover {
+    color: #FCFEFF !important;
+    /* 1 */
+    background-color: #53d9c2; }
+  a.kuiButton--success:not(.kuiButton-isDisabled):hover {
+    /* 1 */
+    color: #FCFEFF !important;
+    /* 1 */
+    background-color: #53d9c2; }
+  .kuiButton--success:enabled:active {
+    color: #FCFEFF !important;
+    /* 1 */
+    background-color: #53d9c2; }
+  a.kuiButton--success:not(.kuiButton-isDisabled):active {
+    /* 1 */
+    color: #FCFEFF !important;
+    /* 1 */
+    background-color: #53d9c2; }
+
+/**
+ * 1. Override Bootstrap.
+ */
+.kuiButton--danger {
+  color: #F66;
+  border: solid 1px #F66; }
+  .kuiButton--danger:not(a):enabled:focus {
+    z-index: 1;
+    /* 1 */
+    outline: none !important;
+    /* 2 */
+    box-shadow: 0 0 0 1px #0A121A, 0 0 0 2px #F66;
+    /* 3 */
+    color: #F66; }
+  a.kuiButton--danger:not(.kuiButton-isDisabled):focus {
+    /* 1 */
+    z-index: 1;
+    /* 1 */
+    outline: none !important;
+    /* 2 */
+    box-shadow: 0 0 0 1px #0A121A, 0 0 0 2px #F66;
+    /* 3 */
+    color: #F66; }
+  .kuiButton--danger:enabled:hover {
+    color: #ff3333 !important;
+    border: solid 1px #ff3333;
+    background-color: rgba(255, 102, 102, 0.1); }
+  a.kuiButton--danger:not(.kuiButton-isDisabled):hover {
+    /* 1 */
+    color: #ff3333 !important;
+    border: solid 1px #ff3333;
+    background-color: rgba(255, 102, 102, 0.1); }
+  .kuiButton--danger:enabled:active {
+    color: #ff3333 !important;
+    border: solid 1px #ff3333;
+    background-color: rgba(255, 102, 102, 0.1); }
+  a.kuiButton--danger:not(.kuiButton-isDisabled):active {
+    /* 1 */
+    color: #ff3333 !important;
+    border: solid 1px #ff3333;
+    background-color: rgba(255, 102, 102, 0.1); }
+
+/**
+ * 1. Override Bootstrap.
+ */
+.kuiButton--warning {
+  color: #FCFEFF;
+  background-color: #FFCE7A; }
+  .kuiButton--warning:not(a):enabled:focus {
+    z-index: 1;
+    /* 1 */
+    outline: none !important;
+    /* 2 */
+    box-shadow: 0 0 0 1px #0A121A, 0 0 0 2px #FFCE7A;
+    /* 3 */
+    color: #FCFEFF; }
+  a.kuiButton--warning:not(.kuiButton-isDisabled):focus {
+    /* 1 */
+    z-index: 1;
+    /* 1 */
+    outline: none !important;
+    /* 2 */
+    box-shadow: 0 0 0 1px #0A121A, 0 0 0 2px #FFCE7A;
+    /* 3 */
+    color: #FCFEFF; }
+  .kuiButton--warning:enabled:hover {
+    color: #FCFEFF !important;
+    /* 1 */
+    background-color: #ffbb47; }
+  a.kuiButton--warning:not(.kuiButton-isDisabled):hover {
+    /* 1 */
+    color: #FCFEFF !important;
+    /* 1 */
+    background-color: #ffbb47; }
+  .kuiButton--warning:enabled:active {
+    color: #FCFEFF !important;
+    /* 1 */
+    background-color: #ffbb47; }
+  a.kuiButton--warning:not(.kuiButton-isDisabled):active {
+    /* 1 */
+    color: #FCFEFF !important;
+    /* 1 */
+    background-color: #ffbb47; }
+  .kuiButton--warning:disabled {
+    background-color: #ffe1ad; }
+  a.kuiButton--warning.kuiButton-isDisabled {
+    background-color: #ffe1ad; }
+
+/**
+ * 1. Override Bootstrap.
+ * 2. Override either Bootstrap or Timeline styles.
+ */
+.kuiButton--hollow {
+  color: #159D8D !important;
+  /* 2 */
+  background-color: transparent; }
+  .kuiButton--hollow:enabled:hover {
+    color: #0f7065 !important;
+    /* 1 */
+    text-decoration: underline; }
+  a.kuiButton--hollow:not(.kuiButton-isDisabled):hover {
+    /* 1 */
+    color: #0f7065 !important;
+    /* 1 */
+    text-decoration: underline; }
+  .kuiButton--hollow:enabled:active {
+    color: #0f7065 !important;
+    /* 1 */
+    text-decoration: underline; }
+  a.kuiButton--hollow:not(.kuiButton-isDisabled):active {
+    /* 1 */
+    color: #0f7065 !important;
+    /* 1 */
+    text-decoration: underline; }
+
+.kuiButton--secondary {
+  color: #159D8D !important;
+  /* 2 */
+  border: solid 1px #159D8D; }
+  .kuiButton--secondary:enabled:hover {
+    color: #0f7065 !important;
+    /* 1 */
+    border: solid 1px #0f7065;
+    background-color: rgba(21, 157, 141, 0.1);
+    text-decoration: underline; }
+  a.kuiButton--secondary:not(.kuiButton-isDisabled):hover {
+    /* 1 */
+    color: #0f7065 !important;
+    /* 1 */
+    border: solid 1px #0f7065;
+    background-color: rgba(21, 157, 141, 0.1);
+    text-decoration: underline; }
+  .kuiButton--secondary:enabled:active {
+    color: #0f7065 !important;
+    /* 1 */
+    border: solid 1px #0f7065;
+    background-color: rgba(21, 157, 141, 0.1);
+    text-decoration: underline; }
+  a.kuiButton--secondary:not(.kuiButton-isDisabled):active {
+    /* 1 */
+    color: #0f7065 !important;
+    /* 1 */
+    border: solid 1px #0f7065;
+    background-color: rgba(21, 157, 141, 0.1);
+    text-decoration: underline; }
+
+.kuiButtonGroup {
+  display: flex;
+  align-items: center; }
+  .kuiButtonGroup .kuiButton + .kuiButton {
+    margin-left: 4px; }
+
+.kuiButtonGroup--united > .kuiButton:not(:first-child):not(:last-child) {
+  border-radius: 0; }
+
+.kuiButtonGroup--united > .kuiButton:first-child {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0; }
+
+.kuiButtonGroup--united > .kuiButton:last-child {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0; }
+
+.kuiButtonGroup--united > .kuiButton:only-child {
+  border-radius: 4px 4px 4px 4px; }
+
+.kuiButtonGroup--united .kuiButton + .kuiButton {
+  margin-left: 0; }
+
+.kuiButtonGroup--fullWidth {
+  display: flex; }
+  .kuiButtonGroup--fullWidth > .kuiButton {
+    flex: 1 1 auto;
+    text-align: center; }
+
+.eui-textCenter > .kuiButtonGroup,
+.text-center > .kuiButtonGroup {
+  display: inline-block; }
+
+.kuiCollapseButton {
+  -webkit-appearance: none;
+          appearance: none;
+  background-color: transparent;
+  padding: 4px;
+  border: none;
+  line-height: 1;
+  font-size: 16px;
+  color: #DFE5EF !important;
+  /* 1 */
+  cursor: pointer;
+  opacity: 0.35; }
+  .kuiCollapseButton:hover {
+    opacity: 1; }
+
+/**
+ * 1. Set inline-block so this wrapper shrinks to fit the input.
+ */
+.kuiAssistedInput {
+  display: inline-block;
+  /* 1 */
+  position: relative; }
+
+/**
+   * 1. Vertically center the assistance, regardless of its height.
+   */
+.kuiAssistedInput__assistance {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  /* 1 */
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+  /* 1 */ }
+
+/**
+ * 1. Deliberately disable only webkit appearance. If we disable it in Firefox, we get a really
+ *    ugly default appearance which we can't customize, so our best option is to give Firefox
+ *    control over the checkbox's appearance.
+ * 2. Override default styles (possibly from Bootstrap).
+ */
+.kuiCheckBox {
+  -webkit-appearance: none;
+          appearance: none;
+  /* 1 */
+  background-color: #0e1721;
+  border: 1px solid rgba(252, 254, 255, 0.1);
+  border-radius: 4px;
+  width: 16px;
+  height: 16px;
+  font: "var(--font-text)" !important;
+  /* 2 */
+  line-height: 1.5 !important;
+  /* 2 */
+  margin: 0 !important;
+  /* 2 */
+  font-family: "var(--font-text)" !important;
+  /* 2 */
+  font-size: 10px !important;
+  /* 2 */
+  transition: background-color 0.1s linear; }
+  .kuiCheckBox::before {
+    position: relative;
+    left: 0.25em;
+    font-family: FontAwesome, sans-serif;
+    content: "\F00C";
+    font-size: 1em;
+    opacity: 0;
+    color: #FCFEFF;
+    transition: opacity 0.1s linear; }
+  .kuiCheckBox:checked {
+    border-color: #159D8D;
+    background-color: #159D8D; }
+    .kuiCheckBox:checked::before {
+      opacity: 1; }
+  .kuiCheckBox:focus {
+    z-index: 1;
+    /* 1 */
+    outline: none !important;
+    /* 2 */
+    box-shadow: 0 0 0 1px #0A121A, 0 0 0 2px #159D8D;
+    /* 3 */ }
+  .kuiCheckBox:disabled {
+    background-color: #0d161e !important;
+    border-color: #0d161e !important;
+    cursor: not-allowed !important; }
+
+.kuiCheckBoxLabel {
+  display: flex;
+  align-items: center;
+  font-weight: normal !important;
+  line-height: 1.5; }
+
+.kuiCheckBoxLabel__text {
+  font-size: 16px;
+  margin-left: 8px; }
+
+/**
+ * 1. Override Bootstrap.
+ */
+.kuiLabel {
+  font-size: 16px;
+  line-height: 1.5;
+  font-weight: bold;
+  margin-bottom: 0;
+  /* 1 */ }
+
+.kuiSearchInput {
+  width: 180px;
+  display: inline-block;
+  position: relative;
+  font-size: 16px;
+  line-height: 1.5; }
+  .kuiSearchInput.kuiSearchInput-isInvalid .kuiSearchInput__input {
+    border-color: #F66; }
+
+.kuiSearchInput__icon {
+  position: absolute;
+  top: 0.5em;
+  left: 0.7em;
+  font-size: 1em;
+  color: #5B6875; }
+
+/**
+   * 1. Make space for search icon.
+   * 2. Expand to fill container.
+   */
+.kuiSearchInput__input {
+  -webkit-appearance: none;
+          appearance: none;
+  font-family: "var(--font-text)";
+  padding: 4px 12px 4px;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #DFE5EF;
+  background-color: #0e1721;
+  border: 1px solid rgba(252, 254, 255, 0.1);
+  border-radius: 4px;
+  transition: border-color 0.1s linear;
+  min-height: 32px;
+  /* 1 */
+  padding-left: 28px;
+  /* 1 */
+  width: 100%;
+  /* 2 */ }
+  .kuiSearchInput__input:invalid {
+    border-color: #F66; }
+  .kuiSearchInput__input:focus {
+    outline: none;
+    border-color: #159D8D; }
+  .kuiSearchInput__input:disabled {
+    opacity: 0.4;
+    cursor: not-allowed; }
+
+.kuiSearchInput--small {
+  width: 60px; }
+
+.kuiSearchInput--large {
+  width: 400px; }
+
+/**
+ * Avoid setting a width here, so that the width of the options can dynamically set the width.
+ */
+.kuiSelect {
+  -webkit-appearance: none;
+          appearance: none;
+  font-family: "var(--font-text)";
+  padding: 4px 12px 4px;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #DFE5EF;
+  background-color: #0e1721;
+  border: 1px solid rgba(252, 254, 255, 0.1);
+  border-radius: 4px;
+  transition: border-color 0.1s linear;
+  min-height: 32px;
+  /* 1 */
+  padding-right: 30px;
+  /* 2 */
+  background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z"/></svg>');
+  /* 1 */
+  background-size: 14px;
+  background-repeat: no-repeat;
+  background-position: calc(100% - 8px);
+  /* 2 */ }
+  .kuiSelect:invalid {
+    border-color: #F66; }
+  .kuiSelect:focus {
+    outline: none;
+    border-color: #159D8D; }
+  .kuiSelect:disabled {
+    opacity: 0.4;
+    cursor: not-allowed; }
+  .kuiSelect:-moz-focusring {
+    text-shadow: 0 0 0;
+    /* 3 */ }
+  .kuiSelect.kuiSelect-isInvalid {
+    border-color: #F66; }
+  .kuiSelect:focus {
+    box-shadow: none;
+    outline: none;
+    border-color: #159D8D; }
+
+.kuiSelect--small {
+  width: 60px; }
+
+.kuiSelect--medium {
+  width: 180px; }
+
+.kuiSelect--large {
+  width: 400px; }
+
+/**
+ * 1. Have the same spatial footprint as the regular input.
+ */
+.kuiStaticInput {
+  width: 180px;
+  -webkit-appearance: none;
+          appearance: none;
+  font-family: "var(--font-text)";
+  padding: 4px 12px 4px;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #DFE5EF;
+  border: 1px solid transparent;
+  /* 1 */
+  background-color: transparent; }
+
+.kuiTextArea {
+  width: 180px;
+  -webkit-appearance: none;
+          appearance: none;
+  font-family: "var(--font-text)";
+  padding: 4px 12px 4px;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #DFE5EF;
+  background-color: #0e1721;
+  border: 1px solid rgba(252, 254, 255, 0.1);
+  border-radius: 4px;
+  transition: border-color 0.1s linear;
+  min-height: 32px;
+  /* 1 */ }
+  .kuiTextArea:invalid {
+    border-color: #F66; }
+  .kuiTextArea:focus {
+    outline: none;
+    border-color: #159D8D; }
+  .kuiTextArea:disabled {
+    opacity: 0.4;
+    cursor: not-allowed; }
+  .kuiTextArea:focus {
+    box-shadow: none;
+    outline: none;
+    border-color: #159D8D; }
+  .kuiTextArea.kuiTextArea-isInvalid {
+    border-color: #F66; }
+
+.kuiTextArea--nonResizable {
+  resize: none; }
+
+.kuiTextArea--small {
+  width: 60px; }
+
+.kuiTextArea--large {
+  width: 400px; }
+
+.kuiTextInput {
+  width: 180px;
+  -webkit-appearance: none;
+          appearance: none;
+  font-family: "var(--font-text)";
+  padding: 4px 12px 4px;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #DFE5EF;
+  background-color: #0e1721;
+  border: 1px solid rgba(252, 254, 255, 0.1);
+  border-radius: 4px;
+  transition: border-color 0.1s linear;
+  min-height: 32px;
+  /* 1 */ }
+  .kuiTextInput:invalid {
+    border-color: #F66; }
+  .kuiTextInput:focus {
+    outline: none;
+    border-color: #159D8D; }
+  .kuiTextInput:disabled {
+    opacity: 0.4;
+    cursor: not-allowed; }
+  .kuiTextInput.kuiTextInput-isInvalid {
+    border-color: #F66; }
+
+.kuiTextInput--small {
+  width: 60px; }
+
+.kuiTextInput--large {
+  width: 400px; }
+
+/**
+ * 1. We may want to put elements in here which have different heights.
+ */
+.kuiFieldGroup {
+  display: flex;
+  align-items: center;
+  /* 1 */ }
+
+.kuiFieldGroup--alignTop {
+  align-items: flex-start; }
+
+.kuiFieldGroupSection {
+  line-height: 1.5; }
+  .kuiFieldGroupSection + .kuiFieldGroupSection {
+    margin-left: 10px; }
+
+.kuiFieldGroupSection--wide {
+  flex: 1 1 auto; }
+  .kuiFieldGroupSection--wide > * {
+    width: 100%; }
+
+/**
+ * 1. Copied from FontAwesome's .fa class. We use a custom class to make it easier to migrate away
+ *    from FontAwesome someday. When we do migrate away, we can just update this definition.
+ */
+.kuiIcon {
+  display: inline-block;
+  /* 1 */
+  font: normal normal normal 14px/1 FontAwesome, sans-serif;
+  /* 1 */
+  font-size: inherit;
+  /* 1 */
+  text-rendering: auto;
+  /* 1 */
+  -webkit-font-smoothing: antialiased;
+  /* 1 */
+  -moz-osx-font-smoothing: grayscale;
+  /* 1 */ }
+
+.kuiIcon--info {
+  color: #159D8D; }
+
+.kuiIcon--success {
+  color: #7DE2D1; }
+
+.kuiIcon--warning {
+  color: #FFCE7A; }
+
+.kuiIcon--error {
+  color: #F66; }
+
+.kuiIcon--inactive {
+  color: #293847; }
+
+.kuiIcon--basic {
+  color: #8D98A3; }
+
+.kuiInfoPanel {
+  padding: 14px 20px 18px;
+  line-height: 1.5;
+  border: 2px solid; }
+
+/**
+ * 1. TODO: Pick a hex value instead of making these colors translucent.
+ */
+.kuiInfoPanel--info {
+  border-color: rgba(21, 157, 141, 0.25);
+  /* 1 */ }
+
+/**
+ * 1. TODO: Pick a hex value instead of making these colors translucent.
+ */
+.kuiInfoPanel--success {
+  border-color: rgba(125, 226, 209, 0.25);
+  /* 1 */ }
+
+/**
+ * 1. TODO: Pick a hex value instead of making these colors translucent.
+ */
+.kuiInfoPanel--warning {
+  border-color: rgba(255, 206, 122, 0.25);
+  /* 1 */ }
+
+/**
+ * 1. TODO: Pick a hex value instead of making these colors translucent.
+ */
+.kuiInfoPanel--error {
+  border-color: rgba(255, 102, 102, 0.25);
+  /* 1 */ }
+
+/**
+ * 1. Align with first line of title text if it wraps.
+ */
+.kuiInfoPanelHeader {
+  display: flex;
+  align-items: baseline;
+  /* 1 */ }
+
+.kuiInfoPanelHeader__icon {
+  margin-right: 10px;
+  font-size: 16px;
+  line-height: 1.5; }
+
+.kuiInfoPanelHeader__title {
+  font-size: 16px;
+  line-height: 1.5;
+  font-weight: 700; }
+
+.kuiInfoPanelBody {
+  margin-top: 8px; }
+  .kuiInfoPanelBody > * + * {
+    margin-top: 8px; }
+
+.kuiInfoPanelBody__message {
+  font-size: 16px;
+  line-height: 1.5; }
+
+.kuiLink {
+  color: #159D8D;
+  text-decoration: none;
+  cursor: pointer;
+  /* 1 */
+  -webkit-appearance: none;
+          appearance: none;
+  /* 2 */
+  background-color: transparent;
+  /* 2 */
+  border: none;
+  /* 2 */
+  font-size: inherit;
+  /* 2 */
+  line-height: inherit;
+  /* 2 */ }
+  .kuiLink:visited, .kuiLink:active {
+    color: #159D8D; }
+  .kuiLink:hover {
+    color: #0f7065;
+    text-decoration: underline; }
+
+/**
+ * 1. Breadcrumbs are placed in the top-left corner and need to be bumped over
+ *    a bit.
+ */
+.kuiLocalBreadcrumbs {
+  display: flex;
+  align-items: center;
+  padding: 12px 8px;
+  /* 1 */
+  border-bottom: 1px solid #293847;
+  flex-grow: 1;
+  flex-basis: 100%;
+  background-color: #0A121A; }
+
+.kuiLocalBreadcrumb {
+  font-size: 14px;
+  margin: 0;
+  font-weight: normal; }
+  .kuiLocalBreadcrumb + .kuiLocalBreadcrumb {
+    margin-left: 6px; }
+    .kuiLocalBreadcrumb + .kuiLocalBreadcrumb::before {
+      content: "/";
+      -webkit-user-select: none;
+              user-select: none;
+      margin-right: 4px;
+      color: #293847; }
+
+/**
+ * 1. Make it a bit darker to contrast with the gray background.
+ */
+.kuiLocalBreadcrumb__link {
+  color: #159D8D;
+  text-decoration: none;
+  cursor: pointer;
+  /* 1 */
+  -webkit-appearance: none;
+          appearance: none;
+  /* 2 */
+  background-color: transparent;
+  /* 2 */
+  border: none;
+  /* 2 */
+  font-size: inherit;
+  /* 2 */
+  line-height: inherit;
+  /* 2 */
+  color: #159D8D;
+  /* 1 */
+  font-size: 16px; }
+  .kuiLocalBreadcrumb__link:visited, .kuiLocalBreadcrumb__link:active {
+    color: #159D8D; }
+  .kuiLocalBreadcrumb__link:hover {
+    color: #0f7065;
+    text-decoration: underline; }
+
+.kuiLocalBreadcrumb__emphasis {
+  font-weight: 700; }
+
+.kuiDatePicker {
+  background-color: transparent;
+  border-collapse: collapse;
+  border-spacing: 0;
+  line-height: 1.5; }
+
+.kuiDatePickerNavigationCell {
+  padding: 0; }
+
+.kuiDatePickerNavigation {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 4px; }
+
+/**
+ * 1. Override inherited styles.
+ */
+.kuiDatePickerNavigationButton {
+  -webkit-appearance: none;
+          appearance: none;
+  background-color: transparent;
+  border: none;
+  font-size: 14px;
+  color: #DFE5EF;
+  padding: 3px 6px;
+  border-radius: 4px; }
+  .kuiDatePickerNavigationButton:hover, .kuiDatePickerNavigationButton:active {
+    cursor: pointer;
+    color: #101B25;
+    background-color: #159D8D; }
+  .kuiDatePickerNavigationButton:focus {
+    z-index: 1;
+    /* 1 */
+    outline: none !important;
+    /* 2 */
+    box-shadow: 0 0 0 1px transparent, 0 0 0 2px #159D8D;
+    /* 3 */
+    color: #DFE5EF;
+    /* 1 */ }
+
+.kuiDatePickerHeaderCell {
+  padding: 9px 0;
+  color: #DFE5EF;
+  font-size: 14px;
+  font-weight: bold;
+  text-align: center;
+  line-height: 1.2; }
+
+.kuiDatePickerRowCell {
+  padding: 0;
+  text-align: center;
+  /**
+   * This state class exists to support weird angular-bootstrap datepicker functionality,
+   * in which you can't select a day on the "From" calendar if it falls after the selected day in
+   * the "To" calendar (and vice versa, you can't select a "To" day if it is before the "From" day).
+   */ }
+  .kuiDatePickerRowCell.kuiDatePickerRowCell-isBlocked {
+    cursor: not-allowed; }
+    .kuiDatePickerRowCell.kuiDatePickerRowCell-isBlocked .kuiDatePickerRowCellContent {
+      pointer-events: none; }
+
+/**
+ * 1. Override inherited styles.
+ */
+.kuiDatePickerRowCellContent {
+  -webkit-appearance: none;
+          appearance: none;
+  background-color: transparent;
+  width: 100%;
+  border: 1px solid transparent;
+  color: #DFE5EF;
+  font-size: 14px;
+  padding: 8px;
+  border-radius: 4px;
+  line-height: 1.2; }
+  .kuiDatePickerRowCellContent:focus {
+    z-index: 1;
+    /* 1 */
+    outline: none !important;
+    /* 2 */
+    box-shadow: 0 0 0 1px transparent, 0 0 0 2px #159D8D;
+    /* 3 */
+    color: #DFE5EF;
+    /* 1 */ }
+  .kuiDatePickerRowCellContent:disabled {
+    pointer-events: none;
+    opacity: 0.5; }
+  .kuiDatePickerRowCellContent.kuiDatePickerRowCellContent-isOtherMonth {
+    visibility: hidden;
+    pointer-events: none; }
+  .kuiDatePickerRowCellContent.kuiDatePickerRowCellContent-isCurrent {
+    color: #159D8D; }
+  .kuiDatePickerRowCellContent.kuiDatePickerRowCellContent-isSelected {
+    background-color: #8D98A3;
+    color: #DFE5EF; }
+  .kuiDatePickerRowCellContent:hover, .kuiDatePickerRowCellContent:active {
+    cursor: pointer;
+    color: #101B25;
+    background-color: #159D8D; }
+
+.kuiLocalDropdown {
+  position: relative;
+  padding: 10px 8px 14px;
+  background-color: transparent;
+  margin-bottom: 10px;
+  line-height: 20px; }
+
+.kuiLocalDropdownCloseButton {
+  -webkit-appearance: none;
+          appearance: none;
+  background-color: transparent;
+  padding: 4px;
+  border: none;
+  line-height: 1;
+  font-size: 16px;
+  color: #DFE5EF !important;
+  /* 1 */
+  cursor: pointer;
+  opacity: 0.35;
+  position: absolute;
+  top: 1px;
+  right: 5px; }
+  .kuiLocalDropdownCloseButton:hover {
+    opacity: 1; }
+
+.kuiLocalDropdownPanels {
+  display: flex; }
+
+.kuiLocalDropdownPanel {
+  flex: 1 1 0%; }
+
+.kuiLocalDropdownPanel--left {
+  margin-right: 30px; }
+
+.kuiLocalDropdownPanel--right {
+  margin-left: 30px; }
+
+/**
+ * 1. Override inherited styles.
+ */
+.kuiLocalDropdownTitle {
+  margin-top: 0;
+  /* 1 */
+  margin-bottom: 12px;
+  font-size: 18px;
+  color: #DFE5EF; }
+
+.kuiLocalDropdownSection {
+  margin-bottom: 16px; }
+  .kuiLocalDropdownSection:last-child {
+    margin-bottom: 0; }
+
+.kuiLocalDropdownHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 6px; }
+
+/**
+   * 1. Override inherited styles.
+   */
+.kuiLocalDropdownHeader__label {
+  font-size: 14px;
+  font-weight: 700;
+  margin-bottom: 0;
+  /* 1 */
+  color: #DFE5EF; }
+
+.kuiLocalDropdownHeader__actions {
+  display: flex; }
+
+.kuiLocalDropdownHeader__action {
+  color: #159D8D;
+  font-size: 12px;
+  text-decoration: none;
+  cursor: pointer; }
+  .kuiLocalDropdownHeader__action + .kuiLocalDropdownHeader__action {
+    margin-left: 10px; }
+  .kuiLocalDropdownHeader__action:hover, .kuiLocalDropdownHeader__action:active {
+    color: #0f7065; }
+
+.kuiLocalDropdownInput {
+  display: block;
+  width: 100%;
+  margin-bottom: 12px;
+  padding: 5px 15px;
+  font-size: 14px;
+  color: #DFE5EF;
+  background-color: #0e1721;
+  border: 1px solid rgba(252, 254, 255, 0.1);
+  border-radius: 4px; }
+  .kuiLocalDropdownInput:focus {
+    border-color: #159D8D; }
+
+.kuiLocalDropdownFormNote {
+  font-size: 14px;
+  color: #8D98A3; }
+
+.kuiLocalDropdownWarning {
+  margin-bottom: 16px;
+  padding: 6px 10px;
+  font-size: 14px;
+  color: #DFE5EF;
+  background-color: #0A121A;
+  border-left: solid 2px #F66; }
+
+.kuiLocalDropdownHelpText {
+  margin-bottom: 16px;
+  font-size: 14px;
+  color: #8D98A3; }
+
+.kuiLocalMenu {
+  display: flex;
+  align-items: stretch;
+  padding-top: 8px;
+  padding-bottom: 8px; }
+
+.kuiLocalMenuItem {
+  display: flex;
+  align-items: center;
+  padding: 2px 8px;
+  font-size: 16px;
+  background-color: transparent;
+  color: #DFE5EF;
+  border: 0;
+  cursor: pointer;
+  border-bottom: solid 2px transparent; }
+  .kuiLocalMenuItem:hover, .kuiLocalMenuItem:focus {
+    background-color: rgba(21, 157, 141, 0.15);
+    text-decoration: underline; }
+  .kuiLocalMenuItem.kuiLocalMenuItem-isSelected {
+    color: #159D8D;
+    background-color: transparent;
+    border-color: #159D8D;
+    z-index: 2; }
+    .kuiLocalMenuItem.kuiLocalMenuItem-isSelected:hover, .kuiLocalMenuItem.kuiLocalMenuItem-isSelected:focus {
+      text-decoration: none; }
+  .kuiLocalMenuItem.kuiLocalMenuItem-isDisabled {
+    opacity: 0.5;
+    cursor: not-allowed; }
+    .kuiLocalMenuItem.kuiLocalMenuItem-isDisabled:hover {
+      background-color: transparent;
+      text-decoration: none; }
+
+.kuiLocalMenuItem__icon {
+  margin-right: 5px;
+  margin-bottom: -1px; }
+
+/**
+ * 1. Match height of logo in side bar, but allow it to expand to accommodate
+ *    dropdown.
+ */
+.kuiLocalNav {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-height: 69px;
+  /* 1 */
+  color: #DFE5EF;
+  background-color: #0A121A;
+  line-height: 1.5;
+  border-bottom: solid 1px #293847; }
+
+/**
+ * 1. Allow row to expand if the content is so long that it wraps.
+ */
+.kuiLocalNavRow {
+  display: flex;
+  align-items: stretch;
+  justify-content: space-between; }
+
+.kuiLocalNavRow__section {
+  display: flex;
+  align-items: stretch; }
+
+/**
+ * 1. We make this row flex-start because it usually contains a search input, which may expand
+ *    beyond the height of this container. We can't use `align-items: center`, because this would
+ *    cause the search input to overflow both on the top and bottom; `align-items: flex-start`
+ *    makes it only overflow on the bottom. But this means we need to manually center the content
+ *    of this container using padding.
+ */
+.kuiLocalNavRow--secondary {
+  padding: 0 8px;
+  /* 1 */
+  align-items: flex-start;
+  /* 1 */ }
+
+.kuiLocalSearch {
+  display: flex;
+  width: 100%;
+  margin-bottom: 8px; }
+
+.kuiLocalSearchInput {
+  -webkit-appearance: none;
+          appearance: none;
+  font-family: "var(--font-text)";
+  padding: 4px 12px 4px;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #DFE5EF;
+  background-color: #0e1721;
+  border: 1px solid rgba(252, 254, 255, 0.1);
+  border-radius: 4px;
+  transition: border-color 0.1s linear;
+  min-height: 32px;
+  /* 1 */
+  flex: 1 1 100%;
+  border-color: #FCFEFF;
+  border-color: #293847;
+  border-radius: 4px 0 0 4px; }
+  .kuiLocalSearchInput:invalid {
+    border-color: #F66; }
+  .kuiLocalSearchInput:focus {
+    outline: none;
+    border-color: #159D8D; }
+  .kuiLocalSearchInput:disabled {
+    opacity: 0.4;
+    cursor: not-allowed; }
+  .kuiLocalSearchInput:focus {
+    box-shadow: none; }
+  .kuiLocalSearchInput.kuiLocalSearchInput-isInvalid {
+    border-color: #F66; }
+
+.kuiLocalSearchInput--secondary {
+  height: 32px;
+  flex: 0 0 auto;
+  border-radius: 0;
+  border-left-width: 0; }
+
+/**
+ * 1. em used for right padding so documentation link and query string
+ *    won't overlap if the user increases their default browser font size
+ *    This is sized for the 'Options' link
+ */
+.kuiLocalSearchInput,
+.kuiLocalSearchAssistedInput__input {
+  padding-right: 6em;
+  /* 1 */ }
+
+/**
+ * 1. Vertically center the assistance, regardless of its height.
+ */
+.kuiLocalSearchAssistedInput__assistance {
+  position: absolute;
+  right: 6px;
+  top: 50%;
+  /* 1 */
+  z-index: 2;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+  /* 1 */ }
+
+.kuiLocalSearchSelect {
+  -webkit-appearance: none;
+          appearance: none;
+  font-family: "var(--font-text)";
+  padding: 4px 12px 4px;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #DFE5EF;
+  background-color: #0e1721;
+  border: 1px solid rgba(252, 254, 255, 0.1);
+  border-radius: 4px;
+  transition: border-color 0.1s linear;
+  min-height: 32px;
+  /* 1 */
+  padding-right: 30px;
+  /* 2 */
+  background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z"/></svg>');
+  /* 1 */
+  background-size: 14px;
+  background-repeat: no-repeat;
+  background-position: calc(100% - 8px);
+  /* 2 */
+  border-left-width: 0;
+  border-radius: 0; }
+  .kuiLocalSearchSelect:invalid {
+    border-color: #F66; }
+  .kuiLocalSearchSelect:focus {
+    outline: none;
+    border-color: #159D8D; }
+  .kuiLocalSearchSelect:disabled {
+    opacity: 0.4;
+    cursor: not-allowed; }
+  .kuiLocalSearchSelect:-moz-focusring {
+    text-shadow: 0 0 0;
+    /* 3 */ }
+
+/**
+ * 1. Override inherited styles.
+ */
+.kuiLocalSearchButton {
+  width: 43px;
+  height: 32px;
+  font-size: 16px;
+  line-height: 0;
+  /* 1 */
+  color: #FCFEFF;
+  background-color: #159D8D;
+  border: 0;
+  border-radius: 0 4px 4px 0; }
+  .kuiLocalSearchButton:focus {
+    z-index: 1;
+    /* 1 */
+    outline: none !important;
+    /* 2 */
+    box-shadow: 0 0 0 1px #293847, 0 0 0 2px #159D8D;
+    /* 3 */ }
+
+/**
+ * 1. We want the bottom border on selected tabs to be flush with the bottom of the container.
+ */
+.kuiLocalTabs {
+  display: flex;
+  align-items: flex-end;
+  height: 100%; }
+
+/**
+   * 1. Override inherited typographic styles.
+   */
+.kuiLocalTab {
+  padding: 5px 0 6px;
+  font-size: 18px;
+  color: #DFE3E8;
+  border-bottom: 2px solid transparent;
+  text-decoration: none;
+  cursor: pointer;
+  margin-top: 0 !important;
+  /* 1 */
+  margin-bottom: 0 !important;
+  /* 1 */
+  /**
+     * 1. We may want to show a tooltip to explain why the tab is disabled, so we will just show
+     *    a regular cursor instead of setting pointer-events: none.
+     */ }
+  .kuiLocalTab:hover:not(.kuiLocalTab-isDisabled), .kuiLocalTab:active:not(.kuiLocalTab-isDisabled) {
+    color: #159D8D; }
+  .kuiLocalTab.kuiLocalTab-isSelected {
+    color: #159D8D;
+    border-bottom-color: #159D8D;
+    cursor: default; }
+  .kuiLocalTab.kuiLocalTab-isDisabled {
+    opacity: 0.5;
+    cursor: default;
+    /* 1 */ }
+  .kuiLocalTab + .kuiLocalTab {
+    margin-left: 15px; }
+
+.kuiLocalTitle {
+  display: flex;
+  align-items: center;
+  padding: 12px 8px;
+  font-size: 16px;
+  font-weight: bold;
+  border-bottom: 1px solid #293847;
+  flex-grow: 1;
+  flex-basis: 100%;
+  background-color: #0A121A; }
+  .kuiLocalTitle:empty {
+    padding: 0;
+    display: none; }
+
+/**
+ * 1. Put 10px of space between each child.
+ */
+.kuiPager {
+  display: flex;
+  align-items: center; }
+  .kuiPager > * + * {
+    margin-left: 10px;
+    /* 1 */ }
+
+.kuiPagerText {
+  font-size: 16px;
+  line-height: 1.5;
+  color: #8D98A3;
+  white-space: nowrap;
+  /* 1 */ }
+
+.kuiPanel {
+  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3), 0 1px 5px -2px rgba(0, 0, 0, 0.3);
+  background-color: #0A121A;
+  border: 1px solid #293847;
+  border-radius: 4px; }
+
+.kuiPanel--prompt {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  justify-content: center;
+  min-height: 300px; }
+  .kuiPanel--prompt .kuiPanelBody {
+    padding: 30px;
+    max-width: 500px; }
+
+.kuiPanel--noBorder {
+  border: none; }
+
+.kuiPanel--withToolBar {
+  border-top: none;
+  border-radius: 0; }
+
+.kuiPanel--centered {
+  display: flex;
+  justify-content: center;
+  align-items: center; }
+
+.kuiPanelHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 30px;
+  /* 1 */
+  padding: 10px;
+  height: 50px;
+  border-bottom: 1px solid #293847; }
+  .kuiPanelHeader .kuiButton:not(a):enabled:focus {
+    z-index: 1;
+    /* 1 */
+    outline: none !important;
+    /* 2 */
+    box-shadow: 0 0 0 1px #293847, 0 0 0 2px #159D8D;
+    /* 3 */ }
+  a.kuiPanelHeader .kuiButton:not(.kuiButton-isDisabled):focus {
+    /* 1 */
+    z-index: 1;
+    /* 1 */
+    outline: none !important;
+    /* 2 */
+    box-shadow: 0 0 0 1px #293847, 0 0 0 2px #159D8D;
+    /* 3 */ }
+  .kuiPanelHeader .kuiButton--danger:not(a):enabled:focus {
+    z-index: 1;
+    /* 1 */
+    outline: none !important;
+    /* 2 */
+    box-shadow: 0 0 0 1px #293847, 0 0 0 2px #F66;
+    /* 3 */ }
+  a.kuiPanelHeader .kuiButton--danger:not(.kuiButton-isDisabled):focus {
+    /* 1 */
+    z-index: 1;
+    /* 1 */
+    outline: none !important;
+    /* 2 */
+    box-shadow: 0 0 0 1px #293847, 0 0 0 2px #F66;
+    /* 3 */ }
+  .kuiPanelHeader .kuiSelect {
+    border-color: #0e1721; }
+    .kuiPanelHeader .kuiSelect:not(a):enabled:focus {
+      outline: none;
+      border-color: #159D8D; }
+    a.kuiPanelHeader .kuiSelect:not(.kuiButton-isDisabled):focus {
+      /* 1 */
+      outline: none;
+      border-color: #159D8D; }
+
+/**
+   * 1. This way we can use h1, h2, etc.
+   */
+.kuiPanelHeader__title {
+  font-size: 20px;
+  line-height: 1.5;
+  margin: 0;
+  /* 1 */ }
+
+/**
+ * 1. Undo what barSection mixin does.
+ */
+.kuiPanelHeaderSection {
+  display: flex;
+  align-items: center;
+  flex: 1 1 auto;
+  margin-left: 25px;
+  margin-right: 25px; }
+  .kuiPanelHeaderSection:not(:first-child):not(:last-child):not(:only-child) {
+    justify-content: center;
+    /* 3 */ }
+  .kuiPanelHeaderSection:first-child {
+    margin-left: 0; }
+  .kuiPanelHeaderSection:last-child {
+    margin-right: 0;
+    flex: 0 1 auto;
+    /* 4 */
+    justify-content: flex-end;
+    /* 5 */ }
+  .kuiPanelHeaderSection:only-child {
+    margin-left: auto;
+    /* 2 */ }
+  .kuiPanelHeaderSection > * + * {
+    margin-left: 10px;
+    /* 1 */ }
+  .kuiPanelHeaderSection:only-child {
+    margin-left: 0;
+    /* 1 */
+    margin-right: auto;
+    /* 1 */ }
+
+.kuiPanelBody {
+  padding: 10px; }
+
+.kuiEmptyTablePrompt {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 30px; }
+
+.kuiEmptyTablePrompt__message {
+  font-size: 20px;
+  color: #8D98A3;
+  line-height: 1.5; }
+
+.kuiEmptyTablePrompt__actions {
+  margin-top: 10px; }
+
+.kuiStatusText {
+  display: inline-flex;
+  align-items: baseline; }
+
+.kuiStatusText--info {
+  color: #159D8D; }
+
+.kuiStatusText--success {
+  color: #7DE2D1; }
+
+.kuiStatusText--warning {
+  color: #FFCE7A; }
+
+.kuiStatusText--error {
+  color: #F66; }
+
+/**
+ * 1. Set the image to be the same size as a font icon at 14px.
+ * 2. We need to cap the height too, in case the icon was designed thin and tall.
+ */
+.kuiStatusText__icon {
+  margin-right: 6px;
+  width: 1.15em;
+  /* 1 */
+  max-height: 1.15em;
+  /* 2 */ }
+
+/**
+ * 1. Make seamless transition from ToolBar to Table header and contained Menu.
+ * 1. Make seamless transition from Table to ToolBarFooter header.
+ */
+.kuiControlledTable {
+  background: #0A121A; }
+  .kuiControlledTable .kuiTable {
+    border-top: none;
+    /* 1 */ }
+  .kuiControlledTable .kuiToolBarFooter {
+    border-top: none;
+    /* 2 */ }
+  .kuiControlledTable .kuiMenu--contained {
+    border-top: none;
+    /* 1 */ }
+
+/**
+ * 1. Prevent cells from expanding based on content size. This substitutes for table-layout: fixed.
+ */
+/**
+ * NOTE: table-layout: fixed causes a bug in IE11 and Edge (see #9929). It also prevents us from
+ * specifying a column width, e.g. the checkbox column.
+ */
+.kuiTable {
+  width: 100%;
+  border: 1px solid #293847;
+  border-collapse: collapse;
+  background-color: #0A121A; }
+
+/**
+ * 1. Allow contents of cells to determine table's width.
+ */
+.kuiTable--fluid {
+  width: auto;
+  /* 1 */ }
+  .kuiTable--fluid .kuiTableHeaderCell,
+  .kuiTable--fluid .kuiTableRowCell {
+    max-width: none;
+    /* 1 */ }
+
+.kuiTableHeaderCell {
+  font-size: 16px;
+  font-weight: 400;
+  text-align: left;
+  max-width: 20px;
+  /* 1 */
+  line-height: 1.5;
+  color: #8D98A3; }
+
+.kuiTableHeaderCell__liner {
+  display: inline-block;
+  padding: 7px 8px 8px; }
+
+/**
+ * 1. Prevent rapid clicking from selecting text.
+ * 2. Remove native button element styles.
+ * 3. Make buttons look and behave like table header cells.
+ */
+.kuiTableHeaderCellButton {
+  -webkit-user-select: none;
+          user-select: none;
+  /* 1 */
+  cursor: pointer;
+  width: 100%;
+  -webkit-appearance: none;
+          appearance: none;
+  /* 2 */
+  background-color: transparent;
+  /* 2 */
+  border: 0;
+  /* 2 */
+  padding: 0;
+  /* 2 */
+  color: inherit;
+  /* 3 */
+  line-height: inherit;
+  /* 3 */
+  font-size: inherit;
+  /* 3 */
+  text-align: inherit;
+  /* 3 */ }
+  .kuiTableHeaderCellButton:hover .kuiTableSortIcon {
+    display: block;
+    opacity: 1; }
+  .kuiTableHeaderCellButton .kuiTableHeaderCell__liner {
+    display: flex;
+    align-items: center; }
+
+.kuiTableHeaderCell--alignRight {
+  text-align: right; }
+
+.kuiTableSortIcon {
+  display: none;
+  pointer-events: none;
+  margin-left: 4px; }
+  .kuiTableHeaderCellButton-isSorted .kuiTableSortIcon {
+    display: block;
+    opacity: 0.4; }
+
+.kuiTableRow:hover .kuiTableRowHoverReveal {
+  display: inline-block; }
+
+.kuiTableRowHoverReveal {
+  display: none; }
+
+.kuiTableRowCell {
+  font-size: 16px;
+  font-weight: 400;
+  text-align: left;
+  max-width: 20px;
+  /* 1 */
+  color: #DFE5EF;
+  border-top: 1px solid #293847;
+  vertical-align: middle; }
+
+/**
+   * 1. Vertically align all children.
+   * 2. The padding on this div allows the ellipsis to show if the content is truncated. If
+   *    the padding was on the cell, the ellipsis would be cropped.
+   * 3. Truncate content with an ellipsis.
+   */
+.kuiTableRowCell__liner {
+  padding: 7px 8px 8px;
+  /* 2 */
+  line-height: 1.5;
+  /* 1 */
+  overflow: hidden;
+  /* 3 */
+  text-overflow: ellipsis;
+  /* 3 */
+  white-space: nowrap;
+  /* 3 */ }
+  .kuiTableRowCell__liner > * {
+    vertical-align: middle;
+    /* 1 */ }
+
+.kuiTableRowCell--wrap .kuiTableRowCell__liner {
+  white-space: normal; }
+
+.kuiTableRowCell--overflowingContent .kuiTableRowCell__liner {
+  overflow: visible;
+  white-space: normal; }
+
+/**
+ * 1. We don't want to create too strong a disconnect between the original row and the row
+ *    that contains its expanded details.
+ */
+.kuiTableRowCell--expanded {
+  border-top-color: #0A121A;
+  /* 1 */ }
+
+.kuiTableRowCell--alignRight {
+  text-align: right; }
+  .kuiTableRowCell--alignRight .kuiTableRowCell__liner {
+    text-align: right; }
+
+/**
+ * 1. Rendered width of cell with checkbox inside of it.
+ * 2. Align checkbox with text in other cells.
+ * 3. Show the checkbox in Edge; otherwise it gets cropped.
+ */
+.kuiTableHeaderCell--checkBox,
+.kuiTableRowCell--checkBox {
+  width: 28px;
+  /* 1 */
+  line-height: 1;
+  /* 2 */ }
+  .kuiTableHeaderCell--checkBox .kuiTableRowCell__liner,
+  .kuiTableRowCell--checkBox .kuiTableRowCell__liner {
+    overflow: visible;
+    /* 3 */ }
+  .kuiTableHeaderCell--checkBox .kuiTableHeaderCell__liner,
+  .kuiTableHeaderCell--checkBox .kuiTableRowCell__liner,
+  .kuiTableRowCell--checkBox .kuiTableHeaderCell__liner,
+  .kuiTableRowCell--checkBox .kuiTableRowCell__liner {
+    padding-right: 0; }
+
+.kuiTableInfo {
+  padding: 30px;
+  font-size: 20px;
+  color: #8D98A3;
+  line-height: 1.5; }
+
+.kuiTabs {
+  display: flex;
+  border-bottom: 1px solid #293847; }
+
+/**
+ * 1. Override button styles (some of which are from Bootstrap).
+ * 2. Adding a border shifts tabs right by 1px, so we need to shift them back.
+ * 3. Move the tab down so that its bottom border covers the container's bottom border.
+ * 4. When the tab is focused, its bottom border changes to be 1px, so we need to add 1px more
+ *    of padding to make sure the text doesn't shift down.
+ */
+.kuiTab {
+  -webkit-appearance: none;
+          appearance: none;
+  /* 1 */
+  cursor: pointer;
+  padding: 10px 30px;
+  font-size: 16px;
+  color: #8D98A3;
+  background-color: transparent;
+  /* 1 */
+  border: 1px solid #293847;
+  border-radius: 0;
+  /* 1 */
+  margin-bottom: -1px;
+  /* 3 */ }
+  .kuiTab + .kuiTab {
+    border-left: none; }
+    .kuiTab + .kuiTab:focus:not(.kuiTab-isSelected):not(:active) {
+      margin-left: -1px;
+      /* 2 */ }
+  .kuiTab:active {
+    outline: none !important;
+    /* 1 */
+    box-shadow: none;
+    /* 1 */ }
+  .kuiTab:focus {
+    outline: none;
+    /* 1 */ }
+  .kuiTab:focus:not(.kuiTab-isSelected):not(:active) {
+    z-index: 1;
+    color: #159D8D;
+    border: 1px solid #159D8D !important; }
+  .kuiTab:hover:not(.kuiTab-isSelected) {
+    color: #0f7065;
+    background-color: #101B25; }
+  .kuiTab.kuiTab-isSelected {
+    cursor: default;
+    color: #DFE5EF;
+    background-color: transparent;
+    border-bottom-color: transparent; }
+
+.kuiToolBar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 30px;
+  /* 1 */
+  padding: 10px;
+  height: 50px;
+  background-color: transparent;
+  border: solid 1px #293847; }
+  .kuiToolBar .kuiButton:not(a):enabled:focus {
+    z-index: 1;
+    /* 1 */
+    outline: none !important;
+    /* 2 */
+    box-shadow: 0 0 0 1px #293847, 0 0 0 2px #159D8D;
+    /* 3 */ }
+  a.kuiToolBar .kuiButton:not(.kuiButton-isDisabled):focus {
+    /* 1 */
+    z-index: 1;
+    /* 1 */
+    outline: none !important;
+    /* 2 */
+    box-shadow: 0 0 0 1px #293847, 0 0 0 2px #159D8D;
+    /* 3 */ }
+  .kuiToolBar .kuiButton--danger:not(a):enabled:focus {
+    z-index: 1;
+    /* 1 */
+    outline: none !important;
+    /* 2 */
+    box-shadow: 0 0 0 1px #293847, 0 0 0 2px #F66;
+    /* 3 */ }
+  a.kuiToolBar .kuiButton--danger:not(.kuiButton-isDisabled):focus {
+    /* 1 */
+    z-index: 1;
+    /* 1 */
+    outline: none !important;
+    /* 2 */
+    box-shadow: 0 0 0 1px #293847, 0 0 0 2px #F66;
+    /* 3 */ }
+  .kuiToolBar .kuiSelect {
+    border-color: #0e1721; }
+    .kuiToolBar .kuiSelect:not(a):enabled:focus {
+      outline: none;
+      border-color: #159D8D; }
+    a.kuiToolBar .kuiSelect:not(.kuiButton-isDisabled):focus {
+      /* 1 */
+      outline: none;
+      border-color: #159D8D; }
+
+.kuiToolBarSection {
+  display: flex;
+  align-items: center;
+  flex: 1 1 auto;
+  margin-left: 25px;
+  margin-right: 25px; }
+  .kuiToolBarSection:not(:first-child):not(:last-child):not(:only-child) {
+    justify-content: center;
+    /* 3 */ }
+  .kuiToolBarSection:first-child {
+    margin-left: 0; }
+  .kuiToolBarSection:last-child {
+    margin-right: 0;
+    flex: 0 1 auto;
+    /* 4 */
+    justify-content: flex-end;
+    /* 5 */ }
+  .kuiToolBarSection:only-child {
+    margin-left: auto;
+    /* 2 */ }
+  .kuiToolBarSection > * + * {
+    margin-left: 10px;
+    /* 1 */ }
+
+/**
+ * 1. Override Bar styles and put Search on the left side.
+ */
+.kuiToolBar--searchOnly .kuiToolBarSearch {
+  margin-left: 0 !important;
+  /* 1 */ }
+
+.kuiToolBarFooter {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 30px;
+  /* 1 */
+  padding: 10px;
+  height: 40px;
+  background-color: #0A121A; }
+
+.kuiToolBarFooterSection {
+  display: flex;
+  align-items: center;
+  flex: 1 1 auto;
+  margin-left: 25px;
+  margin-right: 25px; }
+  .kuiToolBarFooterSection:not(:first-child):not(:last-child):not(:only-child) {
+    justify-content: center;
+    /* 3 */ }
+  .kuiToolBarFooterSection:first-child {
+    margin-left: 0; }
+  .kuiToolBarFooterSection:last-child {
+    margin-right: 0;
+    flex: 0 1 auto;
+    /* 4 */
+    justify-content: flex-end;
+    /* 5 */ }
+  .kuiToolBarFooterSection:only-child {
+    margin-left: auto;
+    /* 2 */ }
+  .kuiToolBarFooterSection > * + * {
+    margin-left: 10px;
+    /* 1 */ }
+
+/**
+ * 1. Put 10px of space between each child.
+ * 2. Fix IE11 bug which causes this item to grow too wide when there is only a single
+ *    kuiToolBarSection sibling.
+ */
+.kuiToolBarSearch {
+  display: flex;
+  align-items: center;
+  margin-left: 25px;
+  margin-right: 25px;
+  flex: 1 1 auto;
+  max-width: 100%;
+  /* 2 */
+  line-height: 1.5; }
+  .kuiToolBarSearch:first-child {
+    margin-left: 0; }
+  .kuiToolBarSearch:last-child {
+    margin-right: 0; }
+  .kuiToolBarSearch > * + * {
+    margin-left: 10px;
+    /* 1 */ }
+
+.kuiToolBarSearchBox {
+  flex: 1 1 auto;
+  position: relative;
+  font-size: 16px;
+  max-width: 800px; }
+
+.kuiToolBarSearchBox__icon {
+  position: absolute;
+  top: 0.5em;
+  left: 0.7em;
+  font-size: 1em;
+  color: #acacac; }
+
+/**
+   * 1. Fix inherited styles (possibly from Bootstrap).
+   */
+.kuiToolBarSearchBox__input {
+  width: 100%;
+  min-width: 200px;
+  padding: 4px 12px 5px 28px;
+  font-family: "var(--font-text)";
+  /* 1 */
+  background-color: #0A121A;
+  color: #DFE5EF;
+  border-radius: 4px;
+  font-size: 1em;
+  border: 1px solid #293847;
+  line-height: normal;
+  /* 1 */
+  transition: border-color 0.1s linear; }
+  .kuiToolBarSearchBox__input:focus {
+    outline: none;
+    border-color: #159D8D; }
+
+/*
+ * 1. We don't want the text to take up two lines and overflow the ToolBar.
+ */
+.kuiToolBarText {
+  font-size: 16px;
+  line-height: 1.5;
+  color: #8D98A3;
+  white-space: nowrap;
+  /* 1 */ }
+
+/**
+ * 1. Override h1.
+ */
+.kuiTitle {
+  margin: 0;
+  /* 1 */
+  font-weight: 400;
+  /* 1 */
+  font-size: 24px; }
+
+/**
+ * 1. Override h2, h3, etc.
+ */
+.kuiSubTitle {
+  margin: 0;
+  /* 1 */
+  font-weight: 400;
+  /* 1 */
+  font-size: 20px; }
+
+/**
+ * 1. Override p.
+ */
+.kuiTextTitle {
+  margin: 0;
+  /* 1 */
+  font-weight: 700;
+  /* 1 */
+  line-height: 1.5;
+  font-size: 16px; }
+
+/**
+ * 1. Override p.
+ */
+.kuiText {
+  margin: 0;
+  /* 1 */
+  font-weight: 400;
+  /* 1 */
+  line-height: 1.5;
+  font-size: 16px; }
+
+.kuiSubText {
+  margin: 0;
+  /* 1 */
+  font-weight: 400;
+  /* 1 */
+  line-height: 1.5;
+  font-size: 14px; }
+
+.kuiSubduedText {
+  color: #8D98A3 !important; }
+
+.kuiVerticalRhythm + .kuiVerticalRhythm {
+  margin-top: 16px; }
+
+.kuiVerticalRhythmSmall + .kuiVerticalRhythmSmall {
+  margin-top: 8px; }
+
+.kuiVerticalRhythmLarge + .kuiVerticalRhythmLarge {
+  margin-top: 24px; }
+
+.kuiVerticalRhythmXLarge + .kuiVerticalRhythmXLarge {
+  margin-top: 32px; }
+
+.kuiView {
+  background-color: #fff;
+  flex: 1 1 auto; }
+
+.kuiViewContent {
+  padding-top: 20px;
+  padding-bottom: 20px;
+  width: 100%; }
+
+.kuiViewContent--constrainedWidth {
+  width: 100%;
+  max-width: 1100px;
+  margin-left: auto;
+  margin-right: auto; }
+
+.kuiViewContentItem {
+  padding-left: 20px;
+  padding-right: 20px; }
diff --git a/packages/osd-ui-framework/dist/kui_next_light.css b/packages/osd-ui-framework/dist/kui_next_light.css
new file mode 100644
index 000000000000..80b31588660e
--- /dev/null
+++ b/packages/osd-ui-framework/dist/kui_next_light.css
@@ -0,0 +1,2547 @@
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/**
+ * 1. Focus rings shouldn't be visible on scrollable regions, but a11y requires them to be focusable.
+ *    Browser's supporting `:focus-visible` will still show outline on keyboard focus only.
+ *    Others like Safari, won't show anything at all.
+ * 2. Force the `:focus-visible` when the `tabindex=0` (is tabbable)
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+/* OUI -> EUI Aliases */
+/* End of Aliases */
+/**
+ * 1. Enforce pointer when there's no href.
+ * 2. Allow these styles to be applied to a button element.
+ */
+/**
+ * 1. Override Bootstrap styles.
+ */
+/**
+ * 1. Links can't have a disabled attribute, so they can't support :disabled.
+ */
+/**
+ * 1. Links can't have a disabled attribute, so they can't support :enabled.
+ */
+/**
+ * 1. Links can't have a disabled attribute, so they can't support :enabled.
+ */
+/**
+ * 1. Links can't have a disabled attribute, so they can't support :enabled.
+ */
+/**
+ * Nothing fancy, just the basics so we can use this for both regular and static controls.
+ */
+/**
+ * 1. Prevent Firefox users from being able to resize textareas to smaller than the min-height.
+ */
+/**
+ * We specifically don't include Angular's ng-${state} classes here because we don't want to be tightly
+ * coupled with Angular.
+ */
+/**
+ * 1. Embedded SVG of fa-caret-down
+ *    (https://github.com/encharm/Font-Awesome-SVG-PNG/blob/master/black/svg/caret-down.svg).
+ * 2. Make room on right side for the caret.
+ * 3. Prevent Firefox from showing dotted line around text on focus.
+ */
+/**
+ * 1. Setting to inline-block guarantees the same height when applied to both
+ *    button elements and anchor tags.
+ * 2. Fit MicroButton inside of Table rows without pushing them taller.
+ */
+/**
+ * 1. Give Bar a consistent height for when it contains shorter children, and therefore can't
+ *    depend on them to give it the desired height.
+ */
+/**
+ * 1. Put 10px of space between each child.
+ * 2. If there is only one section, align it to the right. If you wanted it aligned right, you
+ *    wouldn't use the Bar in the first place.
+ * 3. Children in the middle should center their content.
+ * 4. Fix an IE bug which causes the last child to overflow the container.
+ * 5. Fixing this bug means we now need to align the children to the right.
+ */
+/**
+ * 1. Required for IE11.
+ */
+main {
+  display: block;
+  /* 1 */ }
+
+.kuiBar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 30px;
+  /* 1 */ }
+
+.kuiBarSection {
+  display: flex;
+  align-items: center;
+  flex: 1 1 auto;
+  margin-left: 25px;
+  margin-right: 25px; }
+  .kuiBarSection:not(:first-child):not(:last-child):not(:only-child) {
+    justify-content: center;
+    /* 3 */ }
+  .kuiBarSection:first-child {
+    margin-left: 0; }
+  .kuiBarSection:last-child {
+    margin-right: 0;
+    flex: 0 1 auto;
+    /* 4 */
+    justify-content: flex-end;
+    /* 5 */ }
+  .kuiBarSection:only-child {
+    margin-left: auto;
+    /* 2 */ }
+  .kuiBarSection > * + * {
+    margin-left: 10px;
+    /* 1 */ }
+
+/**
+ * 1. Setting to inline-block guarantees the same height when applied to both
+ *    button elements and anchor tags.
+ * 2. Links can be focused when they're "disabled" (since we're just faking this with a class), but
+ *    at least make them look like they're not focused.
+ */
+.kuiButton {
+  display: inline-block;
+  /* 1 */
+  -webkit-appearance: none;
+          appearance: none;
+  cursor: pointer;
+  padding: 4px 12px 5px;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+  height: 30px;
+  text-decoration: none;
+  border: none;
+  border-radius: 4px; }
+  .kuiButton:disabled {
+    cursor: not-allowed;
+    opacity: 0.5; }
+  a.kuiButton.kuiButton-isDisabled {
+    cursor: not-allowed;
+    opacity: 0.5; }
+  .kuiButton:enabled:active {
+    -webkit-transform: translateY(1px);
+            transform: translateY(1px); }
+  a.kuiButton:not(.kuiButton-isDisabled):active {
+    /* 1 */
+    -webkit-transform: translateY(1px);
+            transform: translateY(1px); }
+
+/**
+   * 1. Solves whitespace problems introduced by inline elements.
+   */
+.kuiButton__inner {
+  display: flex;
+  /* 1 */
+  align-items: center;
+  /* 1 */ }
+
+.kuiButton--small {
+  font-size: 12px;
+  padding: 2px 8px 3px;
+  height: 22px; }
+
+.kuiButton--fullWidth {
+  width: 100%;
+  text-align: center; }
+
+.kuiButton--iconText .kuiButton__icon:first-child:not(:only-child) {
+  margin-right: 8px; }
+
+.kuiButton--iconText .kuiButton__icon:last-child:not(:only-child) {
+  margin-left: 8px; }
+
+.kuiButton--iconText.kuiButton--small .kuiButton__icon:first-child:not(:only-child) {
+  margin-right: 4px; }
+
+.kuiButton--iconText.kuiButton--small .kuiButton__icon:last-child:not(:only-child) {
+  margin-left: 4px; }
+
+/**
+ * 1. Override Bootstrap.
+ */
+.kuiButton--basic {
+  color: #343741;
+  background-color: #F5F7FA; }
+  .kuiButton--basic:not(a):enabled:focus {
+    color: #343741; }
+  a.kuiButton--basic:not(.kuiButton-isDisabled):focus {
+    /* 1 */
+    color: #343741; }
+  .kuiButton--basic:enabled:hover {
+    background-color: #d3dce9 !important;
+    /* 1 */ }
+  a.kuiButton--basic:not(.kuiButton-isDisabled):hover {
+    /* 1 */
+    background-color: #d3dce9 !important;
+    /* 1 */ }
+  .kuiButton--basic:enabled:active {
+    background-color: #d3dce9 !important;
+    /* 1 */ }
+  a.kuiButton--basic:not(.kuiButton-isDisabled):active {
+    /* 1 */
+    background-color: #d3dce9 !important;
+    /* 1 */ }
+
+/**
+ * 1. Override Bootstrap.
+ */
+.kuiButton--primary {
+  color: #FFF;
+  background-color: #006BB4; }
+  .kuiButton--primary:not(a):enabled:focus {
+    color: #FFF; }
+  a.kuiButton--primary:not(.kuiButton-isDisabled):focus {
+    /* 1 */
+    color: #FFF; }
+  .kuiButton--primary:enabled:hover {
+    color: #FFF !important;
+    /* 1 */
+    background-color: #004d81; }
+  a.kuiButton--primary:not(.kuiButton-isDisabled):hover {
+    /* 1 */
+    color: #FFF !important;
+    /* 1 */
+    background-color: #004d81; }
+  .kuiButton--primary:enabled:active {
+    color: #FFF !important;
+    /* 1 */
+    background-color: #004d81; }
+  a.kuiButton--primary:not(.kuiButton-isDisabled):active {
+    /* 1 */
+    color: #FFF !important;
+    /* 1 */
+    background-color: #004d81; }
+
+/**
+ * 1. Override Bootstrap.
+ */
+.kuiButton--success {
+  color: #FFF;
+  background-color: #017D73; }
+  .kuiButton--success:not(a):enabled:focus {
+    color: #FFF; }
+  a.kuiButton--success:not(.kuiButton-isDisabled):focus {
+    /* 1 */
+    color: #FFF; }
+  .kuiButton--success:enabled:hover {
+    color: #FFF !important;
+    /* 1 */
+    background-color: #014a44; }
+  a.kuiButton--success:not(.kuiButton-isDisabled):hover {
+    /* 1 */
+    color: #FFF !important;
+    /* 1 */
+    background-color: #014a44; }
+  .kuiButton--success:enabled:active {
+    color: #FFF !important;
+    /* 1 */
+    background-color: #014a44; }
+  a.kuiButton--success:not(.kuiButton-isDisabled):active {
+    /* 1 */
+    color: #FFF !important;
+    /* 1 */
+    background-color: #014a44; }
+
+/**
+ * 1. Override Bootstrap.
+ */
+.kuiButton--danger {
+  color: #BD271E;
+  border: solid 1px #BD271E; }
+  .kuiButton--danger:not(a):enabled:focus {
+    z-index: 1;
+    /* 1 */
+    outline: none !important;
+    /* 2 */
+    box-shadow: 0 0 0 1px #FFF, 0 0 0 2px #BD271E;
+    /* 3 */
+    color: #BD271E; }
+  a.kuiButton--danger:not(.kuiButton-isDisabled):focus {
+    /* 1 */
+    z-index: 1;
+    /* 1 */
+    outline: none !important;
+    /* 2 */
+    box-shadow: 0 0 0 1px #FFF, 0 0 0 2px #BD271E;
+    /* 3 */
+    color: #BD271E; }
+  .kuiButton--danger:enabled:hover {
+    color: #911e17 !important;
+    border: solid 1px #911e17;
+    background-color: rgba(189, 39, 30, 0.1); }
+  a.kuiButton--danger:not(.kuiButton-isDisabled):hover {
+    /* 1 */
+    color: #911e17 !important;
+    border: solid 1px #911e17;
+    background-color: rgba(189, 39, 30, 0.1); }
+  .kuiButton--danger:enabled:active {
+    color: #911e17 !important;
+    border: solid 1px #911e17;
+    background-color: rgba(189, 39, 30, 0.1); }
+  a.kuiButton--danger:not(.kuiButton-isDisabled):active {
+    /* 1 */
+    color: #911e17 !important;
+    border: solid 1px #911e17;
+    background-color: rgba(189, 39, 30, 0.1); }
+
+/**
+ * 1. Override Bootstrap.
+ */
+.kuiButton--warning {
+  color: #FFF;
+  background-color: #F5A700; }
+  .kuiButton--warning:not(a):enabled:focus {
+    z-index: 1;
+    /* 1 */
+    outline: none !important;
+    /* 2 */
+    box-shadow: 0 0 0 1px #FFF, 0 0 0 2px #F5A700;
+    /* 3 */
+    color: #FFF; }
+  a.kuiButton--warning:not(.kuiButton-isDisabled):focus {
+    /* 1 */
+    z-index: 1;
+    /* 1 */
+    outline: none !important;
+    /* 2 */
+    box-shadow: 0 0 0 1px #FFF, 0 0 0 2px #F5A700;
+    /* 3 */
+    color: #FFF; }
+  .kuiButton--warning:enabled:hover {
+    color: #FFF !important;
+    /* 1 */
+    background-color: #c28400; }
+  a.kuiButton--warning:not(.kuiButton-isDisabled):hover {
+    /* 1 */
+    color: #FFF !important;
+    /* 1 */
+    background-color: #c28400; }
+  .kuiButton--warning:enabled:active {
+    color: #FFF !important;
+    /* 1 */
+    background-color: #c28400; }
+  a.kuiButton--warning:not(.kuiButton-isDisabled):active {
+    /* 1 */
+    color: #FFF !important;
+    /* 1 */
+    background-color: #c28400; }
+  .kuiButton--warning:disabled {
+    background-color: #ffbb29; }
+  a.kuiButton--warning.kuiButton-isDisabled {
+    background-color: #ffbb29; }
+
+/**
+ * 1. Override Bootstrap.
+ * 2. Override either Bootstrap or Timeline styles.
+ */
+.kuiButton--hollow {
+  color: #006BB4 !important;
+  /* 2 */
+  background-color: transparent; }
+  .kuiButton--hollow:enabled:hover {
+    color: #004d81 !important;
+    /* 1 */
+    text-decoration: underline; }
+  a.kuiButton--hollow:not(.kuiButton-isDisabled):hover {
+    /* 1 */
+    color: #004d81 !important;
+    /* 1 */
+    text-decoration: underline; }
+  .kuiButton--hollow:enabled:active {
+    color: #004d81 !important;
+    /* 1 */
+    text-decoration: underline; }
+  a.kuiButton--hollow:not(.kuiButton-isDisabled):active {
+    /* 1 */
+    color: #004d81 !important;
+    /* 1 */
+    text-decoration: underline; }
+
+.kuiButton--secondary {
+  color: #006BB4 !important;
+  /* 2 */
+  border: solid 1px #006BB4; }
+  .kuiButton--secondary:enabled:hover {
+    color: #004d81 !important;
+    /* 1 */
+    border: solid 1px #004d81;
+    background-color: rgba(0, 107, 180, 0.1);
+    text-decoration: underline; }
+  a.kuiButton--secondary:not(.kuiButton-isDisabled):hover {
+    /* 1 */
+    color: #004d81 !important;
+    /* 1 */
+    border: solid 1px #004d81;
+    background-color: rgba(0, 107, 180, 0.1);
+    text-decoration: underline; }
+  .kuiButton--secondary:enabled:active {
+    color: #004d81 !important;
+    /* 1 */
+    border: solid 1px #004d81;
+    background-color: rgba(0, 107, 180, 0.1);
+    text-decoration: underline; }
+  a.kuiButton--secondary:not(.kuiButton-isDisabled):active {
+    /* 1 */
+    color: #004d81 !important;
+    /* 1 */
+    border: solid 1px #004d81;
+    background-color: rgba(0, 107, 180, 0.1);
+    text-decoration: underline; }
+
+.kuiButtonGroup {
+  display: flex;
+  align-items: center; }
+  .kuiButtonGroup .kuiButton + .kuiButton {
+    margin-left: 4px; }
+
+.kuiButtonGroup--united > .kuiButton:not(:first-child):not(:last-child) {
+  border-radius: 0; }
+
+.kuiButtonGroup--united > .kuiButton:first-child {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0; }
+
+.kuiButtonGroup--united > .kuiButton:last-child {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0; }
+
+.kuiButtonGroup--united > .kuiButton:only-child {
+  border-radius: 4px 4px 4px 4px; }
+
+.kuiButtonGroup--united .kuiButton + .kuiButton {
+  margin-left: 0; }
+
+.kuiButtonGroup--fullWidth {
+  display: flex; }
+  .kuiButtonGroup--fullWidth > .kuiButton {
+    flex: 1 1 auto;
+    text-align: center; }
+
+.eui-textCenter > .kuiButtonGroup,
+.text-center > .kuiButtonGroup {
+  display: inline-block; }
+
+.kuiCollapseButton {
+  -webkit-appearance: none;
+          appearance: none;
+  background-color: transparent;
+  padding: 4px;
+  border: none;
+  line-height: 1;
+  font-size: 16px;
+  color: #343741 !important;
+  /* 1 */
+  cursor: pointer;
+  opacity: 0.35; }
+  .kuiCollapseButton:hover {
+    opacity: 1; }
+
+/**
+ * 1. Set inline-block so this wrapper shrinks to fit the input.
+ */
+.kuiAssistedInput {
+  display: inline-block;
+  /* 1 */
+  position: relative; }
+
+/**
+   * 1. Vertically center the assistance, regardless of its height.
+   */
+.kuiAssistedInput__assistance {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  /* 1 */
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+  /* 1 */ }
+
+/**
+ * 1. Deliberately disable only webkit appearance. If we disable it in Firefox, we get a really
+ *    ugly default appearance which we can't customize, so our best option is to give Firefox
+ *    control over the checkbox's appearance.
+ * 2. Override default styles (possibly from Bootstrap).
+ */
+.kuiCheckBox {
+  -webkit-appearance: none;
+          appearance: none;
+  /* 1 */
+  background-color: #fbfcfd;
+  border: 1px solid rgba(15, 39, 118, 0.1);
+  border-radius: 4px;
+  width: 16px;
+  height: 16px;
+  font: "var(--font-text)" !important;
+  /* 2 */
+  line-height: 1.5 !important;
+  /* 2 */
+  margin: 0 !important;
+  /* 2 */
+  font-family: "var(--font-text)" !important;
+  /* 2 */
+  font-size: 10px !important;
+  /* 2 */
+  transition: background-color 0.1s linear; }
+  .kuiCheckBox::before {
+    position: relative;
+    left: 0.25em;
+    font-family: FontAwesome, sans-serif;
+    content: "\F00C";
+    font-size: 1em;
+    opacity: 0;
+    color: #FFF;
+    transition: opacity 0.1s linear; }
+  .kuiCheckBox:checked {
+    border-color: #006BB4;
+    background-color: #006BB4; }
+    .kuiCheckBox:checked::before {
+      opacity: 1; }
+  .kuiCheckBox:focus {
+    z-index: 1;
+    /* 1 */
+    outline: none !important;
+    /* 2 */
+    box-shadow: 0 0 0 1px #FFF, 0 0 0 2px #006BB4;
+    /* 3 */ }
+  .kuiCheckBox:disabled {
+    background-color: #eef2f7 !important;
+    border-color: #eef2f7 !important;
+    cursor: not-allowed !important; }
+
+.kuiCheckBoxLabel {
+  display: flex;
+  align-items: center;
+  font-weight: normal !important;
+  line-height: 1.5; }
+
+.kuiCheckBoxLabel__text {
+  font-size: 16px;
+  margin-left: 8px; }
+
+/**
+ * 1. Override Bootstrap.
+ */
+.kuiLabel {
+  font-size: 16px;
+  line-height: 1.5;
+  font-weight: bold;
+  margin-bottom: 0;
+  /* 1 */ }
+
+.kuiSearchInput {
+  width: 180px;
+  display: inline-block;
+  position: relative;
+  font-size: 16px;
+  line-height: 1.5; }
+  .kuiSearchInput.kuiSearchInput-isInvalid .kuiSearchInput__input {
+    border-color: #BD271E; }
+
+.kuiSearchInput__icon {
+  position: absolute;
+  top: 0.5em;
+  left: 0.7em;
+  font-size: 1em;
+  color: #98A2B3; }
+
+/**
+   * 1. Make space for search icon.
+   * 2. Expand to fill container.
+   */
+.kuiSearchInput__input {
+  -webkit-appearance: none;
+          appearance: none;
+  font-family: "var(--font-text)";
+  padding: 4px 12px 4px;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #343741;
+  background-color: #fbfcfd;
+  border: 1px solid rgba(15, 39, 118, 0.1);
+  border-radius: 4px;
+  transition: border-color 0.1s linear;
+  min-height: 32px;
+  /* 1 */
+  padding-left: 28px;
+  /* 1 */
+  width: 100%;
+  /* 2 */ }
+  .kuiSearchInput__input:invalid {
+    border-color: #BD271E; }
+  .kuiSearchInput__input:focus {
+    outline: none;
+    border-color: #006BB4; }
+  .kuiSearchInput__input:disabled {
+    opacity: 0.4;
+    cursor: not-allowed; }
+
+.kuiSearchInput--small {
+  width: 60px; }
+
+.kuiSearchInput--large {
+  width: 400px; }
+
+/**
+ * Avoid setting a width here, so that the width of the options can dynamically set the width.
+ */
+.kuiSelect {
+  -webkit-appearance: none;
+          appearance: none;
+  font-family: "var(--font-text)";
+  padding: 4px 12px 4px;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #343741;
+  background-color: #fbfcfd;
+  border: 1px solid rgba(15, 39, 118, 0.1);
+  border-radius: 4px;
+  transition: border-color 0.1s linear;
+  min-height: 32px;
+  /* 1 */
+  padding-right: 30px;
+  /* 2 */
+  background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z"/></svg>');
+  /* 1 */
+  background-size: 14px;
+  background-repeat: no-repeat;
+  background-position: calc(100% - 8px);
+  /* 2 */ }
+  .kuiSelect:invalid {
+    border-color: #BD271E; }
+  .kuiSelect:focus {
+    outline: none;
+    border-color: #006BB4; }
+  .kuiSelect:disabled {
+    opacity: 0.4;
+    cursor: not-allowed; }
+  .kuiSelect:-moz-focusring {
+    text-shadow: 0 0 0;
+    /* 3 */ }
+  .kuiSelect.kuiSelect-isInvalid {
+    border-color: #BD271E; }
+  .kuiSelect:focus {
+    box-shadow: none;
+    outline: none;
+    border-color: #006BB4; }
+
+.kuiSelect--small {
+  width: 60px; }
+
+.kuiSelect--medium {
+  width: 180px; }
+
+.kuiSelect--large {
+  width: 400px; }
+
+/**
+ * 1. Have the same spatial footprint as the regular input.
+ */
+.kuiStaticInput {
+  width: 180px;
+  -webkit-appearance: none;
+          appearance: none;
+  font-family: "var(--font-text)";
+  padding: 4px 12px 4px;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #343741;
+  border: 1px solid transparent;
+  /* 1 */
+  background-color: transparent; }
+
+.kuiTextArea {
+  width: 180px;
+  -webkit-appearance: none;
+          appearance: none;
+  font-family: "var(--font-text)";
+  padding: 4px 12px 4px;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #343741;
+  background-color: #fbfcfd;
+  border: 1px solid rgba(15, 39, 118, 0.1);
+  border-radius: 4px;
+  transition: border-color 0.1s linear;
+  min-height: 32px;
+  /* 1 */ }
+  .kuiTextArea:invalid {
+    border-color: #BD271E; }
+  .kuiTextArea:focus {
+    outline: none;
+    border-color: #006BB4; }
+  .kuiTextArea:disabled {
+    opacity: 0.4;
+    cursor: not-allowed; }
+  .kuiTextArea:focus {
+    box-shadow: none;
+    outline: none;
+    border-color: #006BB4; }
+  .kuiTextArea.kuiTextArea-isInvalid {
+    border-color: #BD271E; }
+
+.kuiTextArea--nonResizable {
+  resize: none; }
+
+.kuiTextArea--small {
+  width: 60px; }
+
+.kuiTextArea--large {
+  width: 400px; }
+
+.kuiTextInput {
+  width: 180px;
+  -webkit-appearance: none;
+          appearance: none;
+  font-family: "var(--font-text)";
+  padding: 4px 12px 4px;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #343741;
+  background-color: #fbfcfd;
+  border: 1px solid rgba(15, 39, 118, 0.1);
+  border-radius: 4px;
+  transition: border-color 0.1s linear;
+  min-height: 32px;
+  /* 1 */ }
+  .kuiTextInput:invalid {
+    border-color: #BD271E; }
+  .kuiTextInput:focus {
+    outline: none;
+    border-color: #006BB4; }
+  .kuiTextInput:disabled {
+    opacity: 0.4;
+    cursor: not-allowed; }
+  .kuiTextInput.kuiTextInput-isInvalid {
+    border-color: #BD271E; }
+
+.kuiTextInput--small {
+  width: 60px; }
+
+.kuiTextInput--large {
+  width: 400px; }
+
+/**
+ * 1. We may want to put elements in here which have different heights.
+ */
+.kuiFieldGroup {
+  display: flex;
+  align-items: center;
+  /* 1 */ }
+
+.kuiFieldGroup--alignTop {
+  align-items: flex-start; }
+
+.kuiFieldGroupSection {
+  line-height: 1.5; }
+  .kuiFieldGroupSection + .kuiFieldGroupSection {
+    margin-left: 10px; }
+
+.kuiFieldGroupSection--wide {
+  flex: 1 1 auto; }
+  .kuiFieldGroupSection--wide > * {
+    width: 100%; }
+
+/**
+ * 1. Copied from FontAwesome's .fa class. We use a custom class to make it easier to migrate away
+ *    from FontAwesome someday. When we do migrate away, we can just update this definition.
+ */
+.kuiIcon {
+  display: inline-block;
+  /* 1 */
+  font: normal normal normal 14px/1 FontAwesome, sans-serif;
+  /* 1 */
+  font-size: inherit;
+  /* 1 */
+  text-rendering: auto;
+  /* 1 */
+  -webkit-font-smoothing: antialiased;
+  /* 1 */
+  -moz-osx-font-smoothing: grayscale;
+  /* 1 */ }
+
+.kuiIcon--info {
+  color: #006BB4; }
+
+.kuiIcon--success {
+  color: #017D73; }
+
+.kuiIcon--warning {
+  color: #F5A700; }
+
+.kuiIcon--error {
+  color: #BD271E; }
+
+.kuiIcon--inactive {
+  color: #D3DAE6; }
+
+.kuiIcon--basic {
+  color: #69707D; }
+
+.kuiInfoPanel {
+  padding: 14px 20px 18px;
+  line-height: 1.5;
+  border: 2px solid; }
+
+/**
+ * 1. TODO: Pick a hex value instead of making these colors translucent.
+ */
+.kuiInfoPanel--info {
+  border-color: rgba(0, 107, 180, 0.25);
+  /* 1 */ }
+
+/**
+ * 1. TODO: Pick a hex value instead of making these colors translucent.
+ */
+.kuiInfoPanel--success {
+  border-color: rgba(1, 125, 115, 0.25);
+  /* 1 */ }
+
+/**
+ * 1. TODO: Pick a hex value instead of making these colors translucent.
+ */
+.kuiInfoPanel--warning {
+  border-color: rgba(245, 167, 0, 0.25);
+  /* 1 */ }
+
+/**
+ * 1. TODO: Pick a hex value instead of making these colors translucent.
+ */
+.kuiInfoPanel--error {
+  border-color: rgba(189, 39, 30, 0.25);
+  /* 1 */ }
+
+/**
+ * 1. Align with first line of title text if it wraps.
+ */
+.kuiInfoPanelHeader {
+  display: flex;
+  align-items: baseline;
+  /* 1 */ }
+
+.kuiInfoPanelHeader__icon {
+  margin-right: 10px;
+  font-size: 16px;
+  line-height: 1.5; }
+
+.kuiInfoPanelHeader__title {
+  font-size: 16px;
+  line-height: 1.5;
+  font-weight: 700; }
+
+.kuiInfoPanelBody {
+  margin-top: 8px; }
+  .kuiInfoPanelBody > * + * {
+    margin-top: 8px; }
+
+.kuiInfoPanelBody__message {
+  font-size: 16px;
+  line-height: 1.5; }
+
+.kuiLink {
+  color: #006BB4;
+  text-decoration: none;
+  cursor: pointer;
+  /* 1 */
+  -webkit-appearance: none;
+          appearance: none;
+  /* 2 */
+  background-color: transparent;
+  /* 2 */
+  border: none;
+  /* 2 */
+  font-size: inherit;
+  /* 2 */
+  line-height: inherit;
+  /* 2 */ }
+  .kuiLink:visited, .kuiLink:active {
+    color: #006BB4; }
+  .kuiLink:hover {
+    color: #004d81;
+    text-decoration: underline; }
+
+/**
+ * 1. Breadcrumbs are placed in the top-left corner and need to be bumped over
+ *    a bit.
+ */
+.kuiLocalBreadcrumbs {
+  display: flex;
+  align-items: center;
+  padding: 12px 8px;
+  /* 1 */
+  border-bottom: 1px solid #D3DAE6;
+  flex-grow: 1;
+  flex-basis: 100%;
+  background-color: #FFF; }
+
+.kuiLocalBreadcrumb {
+  font-size: 14px;
+  margin: 0;
+  font-weight: normal; }
+  .kuiLocalBreadcrumb + .kuiLocalBreadcrumb {
+    margin-left: 6px; }
+    .kuiLocalBreadcrumb + .kuiLocalBreadcrumb::before {
+      content: "/";
+      -webkit-user-select: none;
+              user-select: none;
+      margin-right: 4px;
+      color: #D3DAE6; }
+
+/**
+ * 1. Make it a bit darker to contrast with the gray background.
+ */
+.kuiLocalBreadcrumb__link {
+  color: #006BB4;
+  text-decoration: none;
+  cursor: pointer;
+  /* 1 */
+  -webkit-appearance: none;
+          appearance: none;
+  /* 2 */
+  background-color: transparent;
+  /* 2 */
+  border: none;
+  /* 2 */
+  font-size: inherit;
+  /* 2 */
+  line-height: inherit;
+  /* 2 */
+  color: #006BB4;
+  /* 1 */
+  font-size: 16px; }
+  .kuiLocalBreadcrumb__link:visited, .kuiLocalBreadcrumb__link:active {
+    color: #006BB4; }
+  .kuiLocalBreadcrumb__link:hover {
+    color: #004d81;
+    text-decoration: underline; }
+
+.kuiLocalBreadcrumb__emphasis {
+  font-weight: 700; }
+
+.kuiDatePicker {
+  background-color: transparent;
+  border-collapse: collapse;
+  border-spacing: 0;
+  line-height: 1.5; }
+
+.kuiDatePickerNavigationCell {
+  padding: 0; }
+
+.kuiDatePickerNavigation {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 4px; }
+
+/**
+ * 1. Override inherited styles.
+ */
+.kuiDatePickerNavigationButton {
+  -webkit-appearance: none;
+          appearance: none;
+  background-color: transparent;
+  border: none;
+  font-size: 14px;
+  color: #343741;
+  padding: 3px 6px;
+  border-radius: 4px; }
+  .kuiDatePickerNavigationButton:hover, .kuiDatePickerNavigationButton:active {
+    cursor: pointer;
+    color: #F5F7FA;
+    background-color: #006BB4; }
+  .kuiDatePickerNavigationButton:focus {
+    z-index: 1;
+    /* 1 */
+    outline: none !important;
+    /* 2 */
+    box-shadow: 0 0 0 1px transparent, 0 0 0 2px #006BB4;
+    /* 3 */
+    color: #343741;
+    /* 1 */ }
+
+.kuiDatePickerHeaderCell {
+  padding: 9px 0;
+  color: #343741;
+  font-size: 14px;
+  font-weight: bold;
+  text-align: center;
+  line-height: 1.2; }
+
+.kuiDatePickerRowCell {
+  padding: 0;
+  text-align: center;
+  /**
+   * This state class exists to support weird angular-bootstrap datepicker functionality,
+   * in which you can't select a day on the "From" calendar if it falls after the selected day in
+   * the "To" calendar (and vice versa, you can't select a "To" day if it is before the "From" day).
+   */ }
+  .kuiDatePickerRowCell.kuiDatePickerRowCell-isBlocked {
+    cursor: not-allowed; }
+    .kuiDatePickerRowCell.kuiDatePickerRowCell-isBlocked .kuiDatePickerRowCellContent {
+      pointer-events: none; }
+
+/**
+ * 1. Override inherited styles.
+ */
+.kuiDatePickerRowCellContent {
+  -webkit-appearance: none;
+          appearance: none;
+  background-color: transparent;
+  width: 100%;
+  border: 1px solid transparent;
+  color: #343741;
+  font-size: 14px;
+  padding: 8px;
+  border-radius: 4px;
+  line-height: 1.2; }
+  .kuiDatePickerRowCellContent:focus {
+    z-index: 1;
+    /* 1 */
+    outline: none !important;
+    /* 2 */
+    box-shadow: 0 0 0 1px transparent, 0 0 0 2px #006BB4;
+    /* 3 */
+    color: #343741;
+    /* 1 */ }
+  .kuiDatePickerRowCellContent:disabled {
+    pointer-events: none;
+    opacity: 0.5; }
+  .kuiDatePickerRowCellContent.kuiDatePickerRowCellContent-isOtherMonth {
+    visibility: hidden;
+    pointer-events: none; }
+  .kuiDatePickerRowCellContent.kuiDatePickerRowCellContent-isCurrent {
+    color: #006BB4; }
+  .kuiDatePickerRowCellContent.kuiDatePickerRowCellContent-isSelected {
+    background-color: #69707D;
+    color: #343741; }
+  .kuiDatePickerRowCellContent:hover, .kuiDatePickerRowCellContent:active {
+    cursor: pointer;
+    color: #F5F7FA;
+    background-color: #006BB4; }
+
+.kuiLocalDropdown {
+  position: relative;
+  padding: 10px 8px 14px;
+  background-color: transparent;
+  margin-bottom: 10px;
+  line-height: 20px; }
+
+.kuiLocalDropdownCloseButton {
+  -webkit-appearance: none;
+          appearance: none;
+  background-color: transparent;
+  padding: 4px;
+  border: none;
+  line-height: 1;
+  font-size: 16px;
+  color: #343741 !important;
+  /* 1 */
+  cursor: pointer;
+  opacity: 0.35;
+  position: absolute;
+  top: 1px;
+  right: 5px; }
+  .kuiLocalDropdownCloseButton:hover {
+    opacity: 1; }
+
+.kuiLocalDropdownPanels {
+  display: flex; }
+
+.kuiLocalDropdownPanel {
+  flex: 1 1 0%; }
+
+.kuiLocalDropdownPanel--left {
+  margin-right: 30px; }
+
+.kuiLocalDropdownPanel--right {
+  margin-left: 30px; }
+
+/**
+ * 1. Override inherited styles.
+ */
+.kuiLocalDropdownTitle {
+  margin-top: 0;
+  /* 1 */
+  margin-bottom: 12px;
+  font-size: 18px;
+  color: #343741; }
+
+.kuiLocalDropdownSection {
+  margin-bottom: 16px; }
+  .kuiLocalDropdownSection:last-child {
+    margin-bottom: 0; }
+
+.kuiLocalDropdownHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 6px; }
+
+/**
+   * 1. Override inherited styles.
+   */
+.kuiLocalDropdownHeader__label {
+  font-size: 14px;
+  font-weight: 700;
+  margin-bottom: 0;
+  /* 1 */
+  color: #343741; }
+
+.kuiLocalDropdownHeader__actions {
+  display: flex; }
+
+.kuiLocalDropdownHeader__action {
+  color: #006BB4;
+  font-size: 12px;
+  text-decoration: none;
+  cursor: pointer; }
+  .kuiLocalDropdownHeader__action + .kuiLocalDropdownHeader__action {
+    margin-left: 10px; }
+  .kuiLocalDropdownHeader__action:hover, .kuiLocalDropdownHeader__action:active {
+    color: #004d81; }
+
+.kuiLocalDropdownInput {
+  display: block;
+  width: 100%;
+  margin-bottom: 12px;
+  padding: 5px 15px;
+  font-size: 14px;
+  color: #343741;
+  background-color: #fbfcfd;
+  border: 1px solid rgba(15, 39, 118, 0.1);
+  border-radius: 4px; }
+  .kuiLocalDropdownInput:focus {
+    border-color: #006BB4; }
+
+.kuiLocalDropdownFormNote {
+  font-size: 14px;
+  color: #69707D; }
+
+.kuiLocalDropdownWarning {
+  margin-bottom: 16px;
+  padding: 6px 10px;
+  font-size: 14px;
+  color: #343741;
+  background-color: #FFF;
+  border-left: solid 2px #BD271E; }
+
+.kuiLocalDropdownHelpText {
+  margin-bottom: 16px;
+  font-size: 14px;
+  color: #69707D; }
+
+.kuiLocalMenu {
+  display: flex;
+  align-items: stretch;
+  padding-top: 8px;
+  padding-bottom: 8px; }
+
+.kuiLocalMenuItem {
+  display: flex;
+  align-items: center;
+  padding: 2px 8px;
+  font-size: 16px;
+  background-color: transparent;
+  color: #343741;
+  border: 0;
+  cursor: pointer;
+  border-bottom: solid 2px transparent; }
+  .kuiLocalMenuItem:hover, .kuiLocalMenuItem:focus {
+    background-color: rgba(0, 107, 180, 0.15);
+    text-decoration: underline; }
+  .kuiLocalMenuItem.kuiLocalMenuItem-isSelected {
+    color: #006BB4;
+    background-color: transparent;
+    border-color: #006BB4;
+    z-index: 2; }
+    .kuiLocalMenuItem.kuiLocalMenuItem-isSelected:hover, .kuiLocalMenuItem.kuiLocalMenuItem-isSelected:focus {
+      text-decoration: none; }
+  .kuiLocalMenuItem.kuiLocalMenuItem-isDisabled {
+    opacity: 0.5;
+    cursor: not-allowed; }
+    .kuiLocalMenuItem.kuiLocalMenuItem-isDisabled:hover {
+      background-color: transparent;
+      text-decoration: none; }
+
+.kuiLocalMenuItem__icon {
+  margin-right: 5px;
+  margin-bottom: -1px; }
+
+/**
+ * 1. Match height of logo in side bar, but allow it to expand to accommodate
+ *    dropdown.
+ */
+.kuiLocalNav {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-height: 69px;
+  /* 1 */
+  color: #343741;
+  background-color: #FFF;
+  line-height: 1.5;
+  border-bottom: solid 1px #D3DAE6; }
+
+/**
+ * 1. Allow row to expand if the content is so long that it wraps.
+ */
+.kuiLocalNavRow {
+  display: flex;
+  align-items: stretch;
+  justify-content: space-between; }
+
+.kuiLocalNavRow__section {
+  display: flex;
+  align-items: stretch; }
+
+/**
+ * 1. We make this row flex-start because it usually contains a search input, which may expand
+ *    beyond the height of this container. We can't use `align-items: center`, because this would
+ *    cause the search input to overflow both on the top and bottom; `align-items: flex-start`
+ *    makes it only overflow on the bottom. But this means we need to manually center the content
+ *    of this container using padding.
+ */
+.kuiLocalNavRow--secondary {
+  padding: 0 8px;
+  /* 1 */
+  align-items: flex-start;
+  /* 1 */ }
+
+.kuiLocalSearch {
+  display: flex;
+  width: 100%;
+  margin-bottom: 8px; }
+
+.kuiLocalSearchInput {
+  -webkit-appearance: none;
+          appearance: none;
+  font-family: "var(--font-text)";
+  padding: 4px 12px 4px;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #343741;
+  background-color: #fbfcfd;
+  border: 1px solid rgba(15, 39, 118, 0.1);
+  border-radius: 4px;
+  transition: border-color 0.1s linear;
+  min-height: 32px;
+  /* 1 */
+  flex: 1 1 100%;
+  border-color: #FFF;
+  border-color: #D3DAE6;
+  border-radius: 4px 0 0 4px; }
+  .kuiLocalSearchInput:invalid {
+    border-color: #BD271E; }
+  .kuiLocalSearchInput:focus {
+    outline: none;
+    border-color: #006BB4; }
+  .kuiLocalSearchInput:disabled {
+    opacity: 0.4;
+    cursor: not-allowed; }
+  .kuiLocalSearchInput:focus {
+    box-shadow: none; }
+  .kuiLocalSearchInput.kuiLocalSearchInput-isInvalid {
+    border-color: #BD271E; }
+
+.kuiLocalSearchInput--secondary {
+  height: 32px;
+  flex: 0 0 auto;
+  border-radius: 0;
+  border-left-width: 0; }
+
+/**
+ * 1. em used for right padding so documentation link and query string
+ *    won't overlap if the user increases their default browser font size
+ *    This is sized for the 'Options' link
+ */
+.kuiLocalSearchInput,
+.kuiLocalSearchAssistedInput__input {
+  padding-right: 6em;
+  /* 1 */ }
+
+/**
+ * 1. Vertically center the assistance, regardless of its height.
+ */
+.kuiLocalSearchAssistedInput__assistance {
+  position: absolute;
+  right: 6px;
+  top: 50%;
+  /* 1 */
+  z-index: 2;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+  /* 1 */ }
+
+.kuiLocalSearchSelect {
+  -webkit-appearance: none;
+          appearance: none;
+  font-family: "var(--font-text)";
+  padding: 4px 12px 4px;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #343741;
+  background-color: #fbfcfd;
+  border: 1px solid rgba(15, 39, 118, 0.1);
+  border-radius: 4px;
+  transition: border-color 0.1s linear;
+  min-height: 32px;
+  /* 1 */
+  padding-right: 30px;
+  /* 2 */
+  background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z"/></svg>');
+  /* 1 */
+  background-size: 14px;
+  background-repeat: no-repeat;
+  background-position: calc(100% - 8px);
+  /* 2 */
+  border-left-width: 0;
+  border-radius: 0; }
+  .kuiLocalSearchSelect:invalid {
+    border-color: #BD271E; }
+  .kuiLocalSearchSelect:focus {
+    outline: none;
+    border-color: #006BB4; }
+  .kuiLocalSearchSelect:disabled {
+    opacity: 0.4;
+    cursor: not-allowed; }
+  .kuiLocalSearchSelect:-moz-focusring {
+    text-shadow: 0 0 0;
+    /* 3 */ }
+
+/**
+ * 1. Override inherited styles.
+ */
+.kuiLocalSearchButton {
+  width: 43px;
+  height: 32px;
+  font-size: 16px;
+  line-height: 0;
+  /* 1 */
+  color: #FFF;
+  background-color: #006BB4;
+  border: 0;
+  border-radius: 0 4px 4px 0; }
+  .kuiLocalSearchButton:focus {
+    z-index: 1;
+    /* 1 */
+    outline: none !important;
+    /* 2 */
+    box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #006BB4;
+    /* 3 */ }
+
+/**
+ * 1. We want the bottom border on selected tabs to be flush with the bottom of the container.
+ */
+.kuiLocalTabs {
+  display: flex;
+  align-items: flex-end;
+  height: 100%; }
+
+/**
+   * 1. Override inherited typographic styles.
+   */
+.kuiLocalTab {
+  padding: 5px 0 6px;
+  font-size: 18px;
+  color: #343741;
+  border-bottom: 2px solid transparent;
+  text-decoration: none;
+  cursor: pointer;
+  margin-top: 0 !important;
+  /* 1 */
+  margin-bottom: 0 !important;
+  /* 1 */
+  /**
+     * 1. We may want to show a tooltip to explain why the tab is disabled, so we will just show
+     *    a regular cursor instead of setting pointer-events: none.
+     */ }
+  .kuiLocalTab:hover:not(.kuiLocalTab-isDisabled), .kuiLocalTab:active:not(.kuiLocalTab-isDisabled) {
+    color: #006BB4; }
+  .kuiLocalTab.kuiLocalTab-isSelected {
+    color: #006BB4;
+    border-bottom-color: #006BB4;
+    cursor: default; }
+  .kuiLocalTab.kuiLocalTab-isDisabled {
+    opacity: 0.5;
+    cursor: default;
+    /* 1 */ }
+  .kuiLocalTab + .kuiLocalTab {
+    margin-left: 15px; }
+
+.kuiLocalTitle {
+  display: flex;
+  align-items: center;
+  padding: 12px 8px;
+  font-size: 16px;
+  font-weight: bold;
+  border-bottom: 1px solid #D3DAE6;
+  flex-grow: 1;
+  flex-basis: 100%;
+  background-color: #FFF; }
+  .kuiLocalTitle:empty {
+    padding: 0;
+    display: none; }
+
+/**
+ * 1. Put 10px of space between each child.
+ */
+.kuiPager {
+  display: flex;
+  align-items: center; }
+  .kuiPager > * + * {
+    margin-left: 10px;
+    /* 1 */ }
+
+.kuiPagerText {
+  font-size: 16px;
+  line-height: 1.5;
+  color: #69707D;
+  white-space: nowrap;
+  /* 1 */ }
+
+.kuiPanel {
+  box-shadow: 0 2px 2px -1px rgba(152, 162, 179, 0.3), 0 1px 5px -2px rgba(152, 162, 179, 0.3);
+  background-color: #FFF;
+  border: 1px solid #D3DAE6;
+  border-radius: 4px; }
+
+.kuiPanel--prompt {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  justify-content: center;
+  min-height: 300px; }
+  .kuiPanel--prompt .kuiPanelBody {
+    padding: 30px;
+    max-width: 500px; }
+
+.kuiPanel--noBorder {
+  border: none; }
+
+.kuiPanel--withToolBar {
+  border-top: none;
+  border-radius: 0; }
+
+.kuiPanel--centered {
+  display: flex;
+  justify-content: center;
+  align-items: center; }
+
+.kuiPanelHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 30px;
+  /* 1 */
+  padding: 10px;
+  height: 50px;
+  border-bottom: 1px solid #D3DAE6; }
+  .kuiPanelHeader .kuiButton:not(a):enabled:focus {
+    z-index: 1;
+    /* 1 */
+    outline: none !important;
+    /* 2 */
+    box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #006BB4;
+    /* 3 */ }
+  a.kuiPanelHeader .kuiButton:not(.kuiButton-isDisabled):focus {
+    /* 1 */
+    z-index: 1;
+    /* 1 */
+    outline: none !important;
+    /* 2 */
+    box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #006BB4;
+    /* 3 */ }
+  .kuiPanelHeader .kuiButton--danger:not(a):enabled:focus {
+    z-index: 1;
+    /* 1 */
+    outline: none !important;
+    /* 2 */
+    box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #BD271E;
+    /* 3 */ }
+  a.kuiPanelHeader .kuiButton--danger:not(.kuiButton-isDisabled):focus {
+    /* 1 */
+    z-index: 1;
+    /* 1 */
+    outline: none !important;
+    /* 2 */
+    box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #BD271E;
+    /* 3 */ }
+  .kuiPanelHeader .kuiSelect {
+    border-color: #fbfcfd; }
+    .kuiPanelHeader .kuiSelect:not(a):enabled:focus {
+      outline: none;
+      border-color: #006BB4; }
+    a.kuiPanelHeader .kuiSelect:not(.kuiButton-isDisabled):focus {
+      /* 1 */
+      outline: none;
+      border-color: #006BB4; }
+
+/**
+   * 1. This way we can use h1, h2, etc.
+   */
+.kuiPanelHeader__title {
+  font-size: 20px;
+  line-height: 1.5;
+  margin: 0;
+  /* 1 */ }
+
+/**
+ * 1. Undo what barSection mixin does.
+ */
+.kuiPanelHeaderSection {
+  display: flex;
+  align-items: center;
+  flex: 1 1 auto;
+  margin-left: 25px;
+  margin-right: 25px; }
+  .kuiPanelHeaderSection:not(:first-child):not(:last-child):not(:only-child) {
+    justify-content: center;
+    /* 3 */ }
+  .kuiPanelHeaderSection:first-child {
+    margin-left: 0; }
+  .kuiPanelHeaderSection:last-child {
+    margin-right: 0;
+    flex: 0 1 auto;
+    /* 4 */
+    justify-content: flex-end;
+    /* 5 */ }
+  .kuiPanelHeaderSection:only-child {
+    margin-left: auto;
+    /* 2 */ }
+  .kuiPanelHeaderSection > * + * {
+    margin-left: 10px;
+    /* 1 */ }
+  .kuiPanelHeaderSection:only-child {
+    margin-left: 0;
+    /* 1 */
+    margin-right: auto;
+    /* 1 */ }
+
+.kuiPanelBody {
+  padding: 10px; }
+
+.kuiEmptyTablePrompt {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 30px; }
+
+.kuiEmptyTablePrompt__message {
+  font-size: 20px;
+  color: #69707D;
+  line-height: 1.5; }
+
+.kuiEmptyTablePrompt__actions {
+  margin-top: 10px; }
+
+.kuiStatusText {
+  display: inline-flex;
+  align-items: baseline; }
+
+.kuiStatusText--info {
+  color: #006BB4; }
+
+.kuiStatusText--success {
+  color: #017D73; }
+
+.kuiStatusText--warning {
+  color: #F5A700; }
+
+.kuiStatusText--error {
+  color: #BD271E; }
+
+/**
+ * 1. Set the image to be the same size as a font icon at 14px.
+ * 2. We need to cap the height too, in case the icon was designed thin and tall.
+ */
+.kuiStatusText__icon {
+  margin-right: 6px;
+  width: 1.15em;
+  /* 1 */
+  max-height: 1.15em;
+  /* 2 */ }
+
+/**
+ * 1. Make seamless transition from ToolBar to Table header and contained Menu.
+ * 1. Make seamless transition from Table to ToolBarFooter header.
+ */
+.kuiControlledTable {
+  background: #FFF; }
+  .kuiControlledTable .kuiTable {
+    border-top: none;
+    /* 1 */ }
+  .kuiControlledTable .kuiToolBarFooter {
+    border-top: none;
+    /* 2 */ }
+  .kuiControlledTable .kuiMenu--contained {
+    border-top: none;
+    /* 1 */ }
+
+/**
+ * 1. Prevent cells from expanding based on content size. This substitutes for table-layout: fixed.
+ */
+/**
+ * NOTE: table-layout: fixed causes a bug in IE11 and Edge (see #9929). It also prevents us from
+ * specifying a column width, e.g. the checkbox column.
+ */
+.kuiTable {
+  width: 100%;
+  border: 1px solid #D3DAE6;
+  border-collapse: collapse;
+  background-color: #FFF; }
+
+/**
+ * 1. Allow contents of cells to determine table's width.
+ */
+.kuiTable--fluid {
+  width: auto;
+  /* 1 */ }
+  .kuiTable--fluid .kuiTableHeaderCell,
+  .kuiTable--fluid .kuiTableRowCell {
+    max-width: none;
+    /* 1 */ }
+
+.kuiTableHeaderCell {
+  font-size: 16px;
+  font-weight: 400;
+  text-align: left;
+  max-width: 20px;
+  /* 1 */
+  line-height: 1.5;
+  color: #69707D; }
+
+.kuiTableHeaderCell__liner {
+  display: inline-block;
+  padding: 7px 8px 8px; }
+
+/**
+ * 1. Prevent rapid clicking from selecting text.
+ * 2. Remove native button element styles.
+ * 3. Make buttons look and behave like table header cells.
+ */
+.kuiTableHeaderCellButton {
+  -webkit-user-select: none;
+          user-select: none;
+  /* 1 */
+  cursor: pointer;
+  width: 100%;
+  -webkit-appearance: none;
+          appearance: none;
+  /* 2 */
+  background-color: transparent;
+  /* 2 */
+  border: 0;
+  /* 2 */
+  padding: 0;
+  /* 2 */
+  color: inherit;
+  /* 3 */
+  line-height: inherit;
+  /* 3 */
+  font-size: inherit;
+  /* 3 */
+  text-align: inherit;
+  /* 3 */ }
+  .kuiTableHeaderCellButton:hover .kuiTableSortIcon {
+    display: block;
+    opacity: 1; }
+  .kuiTableHeaderCellButton .kuiTableHeaderCell__liner {
+    display: flex;
+    align-items: center; }
+
+.kuiTableHeaderCell--alignRight {
+  text-align: right; }
+
+.kuiTableSortIcon {
+  display: none;
+  pointer-events: none;
+  margin-left: 4px; }
+  .kuiTableHeaderCellButton-isSorted .kuiTableSortIcon {
+    display: block;
+    opacity: 0.4; }
+
+.kuiTableRow:hover .kuiTableRowHoverReveal {
+  display: inline-block; }
+
+.kuiTableRowHoverReveal {
+  display: none; }
+
+.kuiTableRowCell {
+  font-size: 16px;
+  font-weight: 400;
+  text-align: left;
+  max-width: 20px;
+  /* 1 */
+  color: #343741;
+  border-top: 1px solid #D3DAE6;
+  vertical-align: middle; }
+
+/**
+   * 1. Vertically align all children.
+   * 2. The padding on this div allows the ellipsis to show if the content is truncated. If
+   *    the padding was on the cell, the ellipsis would be cropped.
+   * 3. Truncate content with an ellipsis.
+   */
+.kuiTableRowCell__liner {
+  padding: 7px 8px 8px;
+  /* 2 */
+  line-height: 1.5;
+  /* 1 */
+  overflow: hidden;
+  /* 3 */
+  text-overflow: ellipsis;
+  /* 3 */
+  white-space: nowrap;
+  /* 3 */ }
+  .kuiTableRowCell__liner > * {
+    vertical-align: middle;
+    /* 1 */ }
+
+.kuiTableRowCell--wrap .kuiTableRowCell__liner {
+  white-space: normal; }
+
+.kuiTableRowCell--overflowingContent .kuiTableRowCell__liner {
+  overflow: visible;
+  white-space: normal; }
+
+/**
+ * 1. We don't want to create too strong a disconnect between the original row and the row
+ *    that contains its expanded details.
+ */
+.kuiTableRowCell--expanded {
+  border-top-color: #FFF;
+  /* 1 */ }
+
+.kuiTableRowCell--alignRight {
+  text-align: right; }
+  .kuiTableRowCell--alignRight .kuiTableRowCell__liner {
+    text-align: right; }
+
+/**
+ * 1. Rendered width of cell with checkbox inside of it.
+ * 2. Align checkbox with text in other cells.
+ * 3. Show the checkbox in Edge; otherwise it gets cropped.
+ */
+.kuiTableHeaderCell--checkBox,
+.kuiTableRowCell--checkBox {
+  width: 28px;
+  /* 1 */
+  line-height: 1;
+  /* 2 */ }
+  .kuiTableHeaderCell--checkBox .kuiTableRowCell__liner,
+  .kuiTableRowCell--checkBox .kuiTableRowCell__liner {
+    overflow: visible;
+    /* 3 */ }
+  .kuiTableHeaderCell--checkBox .kuiTableHeaderCell__liner,
+  .kuiTableHeaderCell--checkBox .kuiTableRowCell__liner,
+  .kuiTableRowCell--checkBox .kuiTableHeaderCell__liner,
+  .kuiTableRowCell--checkBox .kuiTableRowCell__liner {
+    padding-right: 0; }
+
+.kuiTableInfo {
+  padding: 30px;
+  font-size: 20px;
+  color: #69707D;
+  line-height: 1.5; }
+
+.kuiTabs {
+  display: flex;
+  border-bottom: 1px solid #D3DAE6; }
+
+/**
+ * 1. Override button styles (some of which are from Bootstrap).
+ * 2. Adding a border shifts tabs right by 1px, so we need to shift them back.
+ * 3. Move the tab down so that its bottom border covers the container's bottom border.
+ * 4. When the tab is focused, its bottom border changes to be 1px, so we need to add 1px more
+ *    of padding to make sure the text doesn't shift down.
+ */
+.kuiTab {
+  -webkit-appearance: none;
+          appearance: none;
+  /* 1 */
+  cursor: pointer;
+  padding: 10px 30px;
+  font-size: 16px;
+  color: #69707D;
+  background-color: transparent;
+  /* 1 */
+  border: 1px solid #D3DAE6;
+  border-radius: 0;
+  /* 1 */
+  margin-bottom: -1px;
+  /* 3 */ }
+  .kuiTab + .kuiTab {
+    border-left: none; }
+    .kuiTab + .kuiTab:focus:not(.kuiTab-isSelected):not(:active) {
+      margin-left: -1px;
+      /* 2 */ }
+  .kuiTab:active {
+    outline: none !important;
+    /* 1 */
+    box-shadow: none;
+    /* 1 */ }
+  .kuiTab:focus {
+    outline: none;
+    /* 1 */ }
+  .kuiTab:focus:not(.kuiTab-isSelected):not(:active) {
+    z-index: 1;
+    color: #006BB4;
+    border: 1px solid #006BB4 !important; }
+  .kuiTab:hover:not(.kuiTab-isSelected) {
+    color: #004d81;
+    background-color: #F5F7FA; }
+  .kuiTab.kuiTab-isSelected {
+    cursor: default;
+    color: #343741;
+    background-color: transparent;
+    border-bottom-color: transparent; }
+
+.kuiToolBar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 30px;
+  /* 1 */
+  padding: 10px;
+  height: 50px;
+  background-color: transparent;
+  border: solid 1px #D3DAE6; }
+  .kuiToolBar .kuiButton:not(a):enabled:focus {
+    z-index: 1;
+    /* 1 */
+    outline: none !important;
+    /* 2 */
+    box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #006BB4;
+    /* 3 */ }
+  a.kuiToolBar .kuiButton:not(.kuiButton-isDisabled):focus {
+    /* 1 */
+    z-index: 1;
+    /* 1 */
+    outline: none !important;
+    /* 2 */
+    box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #006BB4;
+    /* 3 */ }
+  .kuiToolBar .kuiButton--danger:not(a):enabled:focus {
+    z-index: 1;
+    /* 1 */
+    outline: none !important;
+    /* 2 */
+    box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #BD271E;
+    /* 3 */ }
+  a.kuiToolBar .kuiButton--danger:not(.kuiButton-isDisabled):focus {
+    /* 1 */
+    z-index: 1;
+    /* 1 */
+    outline: none !important;
+    /* 2 */
+    box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #BD271E;
+    /* 3 */ }
+  .kuiToolBar .kuiSelect {
+    border-color: #fbfcfd; }
+    .kuiToolBar .kuiSelect:not(a):enabled:focus {
+      outline: none;
+      border-color: #006BB4; }
+    a.kuiToolBar .kuiSelect:not(.kuiButton-isDisabled):focus {
+      /* 1 */
+      outline: none;
+      border-color: #006BB4; }
+
+.kuiToolBarSection {
+  display: flex;
+  align-items: center;
+  flex: 1 1 auto;
+  margin-left: 25px;
+  margin-right: 25px; }
+  .kuiToolBarSection:not(:first-child):not(:last-child):not(:only-child) {
+    justify-content: center;
+    /* 3 */ }
+  .kuiToolBarSection:first-child {
+    margin-left: 0; }
+  .kuiToolBarSection:last-child {
+    margin-right: 0;
+    flex: 0 1 auto;
+    /* 4 */
+    justify-content: flex-end;
+    /* 5 */ }
+  .kuiToolBarSection:only-child {
+    margin-left: auto;
+    /* 2 */ }
+  .kuiToolBarSection > * + * {
+    margin-left: 10px;
+    /* 1 */ }
+
+/**
+ * 1. Override Bar styles and put Search on the left side.
+ */
+.kuiToolBar--searchOnly .kuiToolBarSearch {
+  margin-left: 0 !important;
+  /* 1 */ }
+
+.kuiToolBarFooter {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 30px;
+  /* 1 */
+  padding: 10px;
+  height: 40px;
+  background-color: #FFF; }
+
+.kuiToolBarFooterSection {
+  display: flex;
+  align-items: center;
+  flex: 1 1 auto;
+  margin-left: 25px;
+  margin-right: 25px; }
+  .kuiToolBarFooterSection:not(:first-child):not(:last-child):not(:only-child) {
+    justify-content: center;
+    /* 3 */ }
+  .kuiToolBarFooterSection:first-child {
+    margin-left: 0; }
+  .kuiToolBarFooterSection:last-child {
+    margin-right: 0;
+    flex: 0 1 auto;
+    /* 4 */
+    justify-content: flex-end;
+    /* 5 */ }
+  .kuiToolBarFooterSection:only-child {
+    margin-left: auto;
+    /* 2 */ }
+  .kuiToolBarFooterSection > * + * {
+    margin-left: 10px;
+    /* 1 */ }
+
+/**
+ * 1. Put 10px of space between each child.
+ * 2. Fix IE11 bug which causes this item to grow too wide when there is only a single
+ *    kuiToolBarSection sibling.
+ */
+.kuiToolBarSearch {
+  display: flex;
+  align-items: center;
+  margin-left: 25px;
+  margin-right: 25px;
+  flex: 1 1 auto;
+  max-width: 100%;
+  /* 2 */
+  line-height: 1.5; }
+  .kuiToolBarSearch:first-child {
+    margin-left: 0; }
+  .kuiToolBarSearch:last-child {
+    margin-right: 0; }
+  .kuiToolBarSearch > * + * {
+    margin-left: 10px;
+    /* 1 */ }
+
+.kuiToolBarSearchBox {
+  flex: 1 1 auto;
+  position: relative;
+  font-size: 16px;
+  max-width: 800px; }
+
+.kuiToolBarSearchBox__icon {
+  position: absolute;
+  top: 0.5em;
+  left: 0.7em;
+  font-size: 1em;
+  color: #acacac; }
+
+/**
+   * 1. Fix inherited styles (possibly from Bootstrap).
+   */
+.kuiToolBarSearchBox__input {
+  width: 100%;
+  min-width: 200px;
+  padding: 4px 12px 5px 28px;
+  font-family: "var(--font-text)";
+  /* 1 */
+  background-color: #FFF;
+  color: #343741;
+  border-radius: 4px;
+  font-size: 1em;
+  border: 1px solid #D3DAE6;
+  line-height: normal;
+  /* 1 */
+  transition: border-color 0.1s linear; }
+  .kuiToolBarSearchBox__input:focus {
+    outline: none;
+    border-color: #006BB4; }
+
+/*
+ * 1. We don't want the text to take up two lines and overflow the ToolBar.
+ */
+.kuiToolBarText {
+  font-size: 16px;
+  line-height: 1.5;
+  color: #69707D;
+  white-space: nowrap;
+  /* 1 */ }
+
+/**
+ * 1. Override h1.
+ */
+.kuiTitle {
+  margin: 0;
+  /* 1 */
+  font-weight: 400;
+  /* 1 */
+  font-size: 24px; }
+
+/**
+ * 1. Override h2, h3, etc.
+ */
+.kuiSubTitle {
+  margin: 0;
+  /* 1 */
+  font-weight: 400;
+  /* 1 */
+  font-size: 20px; }
+
+/**
+ * 1. Override p.
+ */
+.kuiTextTitle {
+  margin: 0;
+  /* 1 */
+  font-weight: 700;
+  /* 1 */
+  line-height: 1.5;
+  font-size: 16px; }
+
+/**
+ * 1. Override p.
+ */
+.kuiText {
+  margin: 0;
+  /* 1 */
+  font-weight: 400;
+  /* 1 */
+  line-height: 1.5;
+  font-size: 16px; }
+
+.kuiSubText {
+  margin: 0;
+  /* 1 */
+  font-weight: 400;
+  /* 1 */
+  line-height: 1.5;
+  font-size: 14px; }
+
+.kuiSubduedText {
+  color: #69707D !important; }
+
+.kuiVerticalRhythm + .kuiVerticalRhythm {
+  margin-top: 16px; }
+
+.kuiVerticalRhythmSmall + .kuiVerticalRhythmSmall {
+  margin-top: 8px; }
+
+.kuiVerticalRhythmLarge + .kuiVerticalRhythmLarge {
+  margin-top: 24px; }
+
+.kuiVerticalRhythmXLarge + .kuiVerticalRhythmXLarge {
+  margin-top: 32px; }
+
+.kuiView {
+  background-color: #fff;
+  flex: 1 1 auto; }
+
+.kuiViewContent {
+  padding-top: 20px;
+  padding-bottom: 20px;
+  width: 100%; }
+
+.kuiViewContent--constrainedWidth {
+  width: 100%;
+  max-width: 1100px;
+  margin-left: auto;
+  margin-right: auto; }
+
+.kuiViewContentItem {
+  padding-left: 20px;
+  padding-right: 20px; }
diff --git a/packages/osd-ui-framework/src/kui_next_dark.scss b/packages/osd-ui-framework/src/kui_next_dark.scss
new file mode 100644
index 000000000000..22f84027acb4
--- /dev/null
+++ b/packages/osd-ui-framework/src/kui_next_dark.scss
@@ -0,0 +1,15 @@
+// EUI global scope is used for KUI variables till fully deprecated
+@import "../../../node_modules/@elastic/eui/src/themes/eui-next/eui_next_colors_dark";
+@import "../../../node_modules/@elastic/eui/src/global_styling/functions/index";
+@import "../../../node_modules/@elastic/eui/src/global_styling/variables/index";
+@import "../../../node_modules/@elastic/eui/src/global_styling/mixins/index";
+
+// Configuration
+@import "global_styling/variables/index";
+
+// Coreß
+@import "global_styling/mixins/index";
+@import "global_styling/reset/index";
+
+// Components
+@import "components/index";
diff --git a/packages/osd-ui-framework/src/kui_next_light.scss b/packages/osd-ui-framework/src/kui_next_light.scss
new file mode 100644
index 000000000000..60250d41d9ba
--- /dev/null
+++ b/packages/osd-ui-framework/src/kui_next_light.scss
@@ -0,0 +1,15 @@
+// EUI global scope is used for KUI variables till fully deprecated
+@import "../../../node_modules/@elastic/eui/src/themes/eui-next/eui_next_colors_light";
+@import "../../../node_modules/@elastic/eui/src/global_styling/functions/index";
+@import "../../../node_modules/@elastic/eui/src/global_styling/variables/index";
+@import "../../../node_modules/@elastic/eui/src/global_styling/mixins/index";
+
+// Configuration
+@import "global_styling/variables/index";
+
+// Core
+@import "global_styling/mixins/index";
+@import "global_styling/reset/index";
+
+// Components
+@import "components/index";
diff --git a/src/legacy/ui/ui_render/ui_render_mixin.js b/src/legacy/ui/ui_render/ui_render_mixin.js
index 400408c39c8f..476c465edb52 100644
--- a/src/legacy/ui/ui_render/ui_render_mixin.js
+++ b/src/legacy/ui/ui_render/ui_render_mixin.js
@@ -117,14 +117,18 @@ export function uiRenderMixin(osdServer, server, config) {
               themeVersion === 'v7'
                 ? `${regularBundlePath}/osd-ui-shared-deps/${UiSharedDeps.darkCssDistFilename}`
                 : `${regularBundlePath}/osd-ui-shared-deps/${UiSharedDeps.darkV8CssDistFilename}`,
-              `${basePath}/node_modules/@osd/ui-framework/dist/kui_dark.css`,
+              themeVersion === 'v7'
+                ? `${basePath}/node_modules/@osd/ui-framework/dist/kui_dark.css`
+                : `${basePath}/node_modules/@osd/ui-framework/dist/kui_next_dark.css`,
               `${basePath}/ui/legacy_dark_theme.css`,
             ]
           : [
               themeVersion === 'v7'
                 ? `${regularBundlePath}/osd-ui-shared-deps/${UiSharedDeps.lightCssDistFilename}`
                 : `${regularBundlePath}/osd-ui-shared-deps/${UiSharedDeps.lightV8CssDistFilename}`,
-              `${basePath}/node_modules/@osd/ui-framework/dist/kui_light.css`,
+              themeVersion === 'v7'
+                ? `${basePath}/node_modules/@osd/ui-framework/dist/kui_light.css`
+                : `${basePath}/node_modules/@osd/ui-framework/dist/kui_next_light.css`,
               `${basePath}/ui/legacy_light_theme.css`,
             ]),
       ];
diff --git a/src/plugins/discover/public/application/angular/directives/_histogram.scss b/src/plugins/discover/public/application/angular/directives/_histogram.scss
index 948f438eea54..1e625fa064e2 100644
--- a/src/plugins/discover/public/application/angular/directives/_histogram.scss
+++ b/src/plugins/discover/public/application/angular/directives/_histogram.scss
@@ -2,3 +2,10 @@
   font-weight: $euiFontWeightRegular;
   min-width: $euiSize * 12;
 }
+
+// Temporary override to inlined styles provided by ElasticCharts theming
+// Will be unnecessary when we migrate the histogram to a different rendering library:
+// https: //github.com/opensearch-project/OpenSearch-Dashboards/issues/4643
+.dscHistogram .echChartBackground {
+  background-color: inherit !important;
+}
diff --git a/src/plugins/discover/public/application/angular/directives/histogram.tsx b/src/plugins/discover/public/application/angular/directives/histogram.tsx
index 5cf9ba88e878..4c1263192322 100644
--- a/src/plugins/discover/public/application/angular/directives/histogram.tsx
+++ b/src/plugins/discover/public/application/angular/directives/histogram.tsx
@@ -33,8 +33,7 @@ import moment from 'moment-timezone';
 import { unitOfTime } from 'moment';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import lightEuiTheme from '@elastic/eui/dist/eui_theme_light.json';
-import darkEuiTheme from '@elastic/eui/dist/eui_theme_dark.json';
+import { euiThemeVars } from '@osd/ui-shared-deps/theme';
 
 import {
   AnnotationDomainType,
@@ -276,7 +275,7 @@ export class DiscoverHistogram extends Component<DiscoverHistogramProps, Discove
     const lineAnnotationStyle = {
       line: {
         strokeWidth: 2,
-        stroke: isDarkMode ? darkEuiTheme.euiColorDanger : lightEuiTheme.euiColorDanger,
+        stroke: euiThemeVars.euiColorDanger,
         opacity: 0.7,
       },
     };
@@ -298,10 +297,10 @@ export class DiscoverHistogram extends Component<DiscoverHistogramProps, Discove
     }
 
     const rectAnnotationStyle = {
-      stroke: isDarkMode ? darkEuiTheme.euiColorLightShade : lightEuiTheme.euiColorDarkShade,
+      stroke: isDarkMode ? euiThemeVars.euiColorLightShade : euiThemeVars.euiColorDarkShade,
       strokeWidth: 0,
       opacity: isDarkMode ? 0.6 : 0.2,
-      fill: isDarkMode ? darkEuiTheme.euiColorLightShade : lightEuiTheme.euiColorDarkShade,
+      fill: isDarkMode ? euiThemeVars.euiColorLightShade : euiThemeVars.euiColorDarkShade,
     };
 
     const tooltipProps = {
diff --git a/src/plugins/discover/public/application/angular/doc_table/_doc_table.scss b/src/plugins/discover/public/application/angular/doc_table/_doc_table.scss
index 2bd50ba768d7..bc75d4171004 100644
--- a/src/plugins/discover/public/application/angular/doc_table/_doc_table.scss
+++ b/src/plugins/discover/public/application/angular/doc_table/_doc_table.scss
@@ -59,7 +59,7 @@ doc-table {
     }
 
     dt {
-      background-color: transparentize(shade($euiColorPrimary, 20%), 0.9);
+      background-color: tintOrShade($euiColorPrimary, 90%, 70%);
       color: $euiTextColor;
       padding: ($euiSizeXS / 2) $euiSizeXS;
       margin-right: $euiSizeXS;

From 0a69329da8faa2259105b53db4a63114e72698b3 Mon Sep 17 00:00:00 2001
From: Josh Romero <rmerqg@amazon.com>
Date: Mon, 31 Jul 2023 20:18:13 +0000
Subject: [PATCH 2/2] add changelog

Signed-off-by: Josh Romero <rmerqg@amazon.com>
---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fd3fe173af6e..c65c379da1eb 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -20,6 +20,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - Enable theme-switching via Advanced Settings to preview the Next theme ([#4475](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4475))
 - Optimize `augment-vis` saved obj searching by adding arg to saved obj client ([#4595](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4595))
 - Add resource ID filtering in fetch `augment-vis` obj queries ([#4608](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4608))
+- [Discover] Update styles to compatible with OUI `next` theme ([#4644](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4644))
 
 ### 🐛 Bug Fixes