@elastic/eui 12.2.0 → 12.4.0

package/dist/eui_theme_dark.css

@@ -198,6 +198,25 @@
   -ms-flex-preferred-size: 0%;
       flex-basis: 0%; }
 
+/**
+  * Overflow scrolling
+  */
+.euiYScrollWithShadows {
+  -webkit-mask-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.1) 0%, red 7.5px, red calc(100% - 7.5px), rgba(255, 0, 0, 0.1) 100%);
+          mask-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.1) 0%, red 7.5px, red calc(100% - 7.5px), rgba(255, 0, 0, 0.1) 100%);
+  scrollbar-width: thin;
+  height: 100%;
+  overflow-y: auto; }
+  .euiYScrollWithShadows::-webkit-scrollbar {
+    width: 16px;
+    height: 16px; }
+  .euiYScrollWithShadows::-webkit-scrollbar-thumb {
+    background-color: rgba(152, 162, 179, 0.5);
+    border: 6px solid transparent;
+    background-clip: content-box; }
+  .euiYScrollWithShadows::-webkit-scrollbar-corner, .euiYScrollWithShadows::-webkit-scrollbar-track {
+    background-color: transparent; }
+
 /**
  * Adapted from Eric Meyer's reset (http://meyerweb.com/eric/tools/css/reset/, v2.0 | 20110126).
  *
@@ -1987,12 +2006,6 @@ html {
 .euiColorPicker__popoverPanel--pickerOnly {
   padding-bottom: 0 !important; }
 
-.euiColorPicker__popoverContainer:not(.euiColorPicker__popoverContainer--customButton) {
-  display: block !important; }
-
-.euiColorPicker__popoverAnchor:not(.euiColorPicker__popoverAnchor--customButton) {
-  display: block !important; }
-
 .euiColorPicker__popoverPanel[class*='bottom']:not(.euiColorPicker__popoverPanel--customButton) {
   border-top-color: rgba(52, 55, 65, 0.8);
   border-top-right-radius: 0;
@@ -2249,6 +2262,10 @@ html {
       color: #98A2B3; }
     .euiComboBox .euiComboBox__inputWrap::-moz-placeholder {
       color: #98A2B3; }
+    .euiComboBox .euiComboBox__inputWrap:-ms-input-placeholder {
+      color: #98A2B3; }
+    .euiComboBox .euiComboBox__inputWrap:-moz-placeholder {
+      color: #98A2B3; }
     .euiComboBox .euiComboBox__inputWrap::-ms-input-placeholder {
       color: #98A2B3; }
     .euiComboBox .euiComboBox__inputWrap::placeholder {
@@ -2334,6 +2351,10 @@ html {
       color: #535966; }
     .euiComboBox.euiComboBox-isDisabled .euiComboBox__inputWrap::-moz-placeholder {
       color: #535966; }
+    .euiComboBox.euiComboBox-isDisabled .euiComboBox__inputWrap:-ms-input-placeholder {
+      color: #535966; }
+    .euiComboBox.euiComboBox-isDisabled .euiComboBox__inputWrap:-moz-placeholder {
+      color: #535966; }
     .euiComboBox.euiComboBox-isDisabled .euiComboBox__inputWrap::-ms-input-placeholder {
       color: #535966; }
     .euiComboBox.euiComboBox-isDisabled .euiComboBox__inputWrap::placeholder {
@@ -2824,7 +2845,7 @@ html {
   .react-datepicker__navigation--next {
     background-position: center;
     background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+ICA8ZGVmcz4gICAgPHBhdGggaWQ9ImRvd25hcnJvd3doaXRlLWEiIGQ9Ik0xMy4wNjg4NTA4LDUuMTU3MjUwMzggTDguMzg0MjM5NzUsOS43NjgyNzQyOCBDOC4xNzA1NDQxNSw5Ljk3ODYxMzA4IDcuODI5OTkyMTQsOS45NzkxNDA5NSA3LjYxNTc2MDI1LDkuNzY4Mjc0MjggTDIuOTMxMTQ5MTUsNS4xNTcyNTAzOCBDMi43MTgxMzU5LDQuOTQ3NTgzMjEgMi4zNzI3NzMxOSw0Ljk0NzU4MzIxIDIuMTU5NzU5OTQsNS4xNTcyNTAzOCBDMS45NDY3NDY2OSw1LjM2NjkxNzU2IDEuOTQ2NzQ2NjksNS43MDY4NTUyMiAyLjE1OTc1OTk0LDUuOTE2NTIyNCBMNi44NDQzNzEwNCwxMC41Mjc1NDYzIEM3LjQ4NTE3NDI0LDExLjE1ODI4MzYgOC41MTY0NDk3OSwxMS4xNTY2ODUxIDkuMTU1NjI4OTYsMTAuNTI3NTQ2MyBMMTMuODQwMjQwMSw1LjkxNjUyMjQgQzE0LjA1MzI1MzMsNS43MDY4NTUyMiAxNC4wNTMyNTMzLDUuMzY2OTE3NTYgMTMuODQwMjQwMSw1LjE1NzI1MDM4IEMxMy42MjcyMjY4LDQuOTQ3NTgzMjEgMTMuMjgxODY0MSw0Ljk0NzU4MzIxIDEzLjA2ODg1MDgsNS4xNTcyNTAzOCBaIi8+ICA8L2RlZnM+ICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgICA8dXNlIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIgeGxpbms6aHJlZj0iI2Rvd25hcnJvd3doaXRlLWEiLz4gIDwvZz48L3N2Zz4=);
-    right: 10px;
+    right: 20px;
     height: 16px;
     width: 16px;
     -webkit-transform: rotate(-90deg);
@@ -3190,7 +3211,7 @@ html {
 
 .react-datepicker__month--accessible:focus {
   background: #232635; }
-  .react-datepicker__month--accessible:focus .react-datepicker__day--in-range {
+  .react-datepicker__month--accessible:focus .react-datepicker__day--in-range:not(.react-datepicker__day--selected) {
     border-top-color: #232635;
     border-bottom-color: #232635; }
 
@@ -3210,10 +3231,16 @@ html {
   display: flex; }
 
 @media only screen and (max-width: 574px) {
+  .euiDatePicker--inline {
+    max-width: 284px;
+    display: block; }
   .react-datepicker__time-container {
     display: none; } }
 
 @media only screen and (min-width: 575px) and (max-width: 767px) {
+  .euiDatePicker--inline {
+    max-width: 284px;
+    display: block; }
   .react-datepicker__time-container {
     display: none; } }
 
@@ -3304,9 +3331,6 @@ html {
 .euiDatePickerRange--readOnly {
   background: #202128; }
 
-.euiDatePopoverButton__popover .euiDatePopoverButton__popoverAnchor {
-  display: block; }
-
 .euiDatePopoverButton {
   font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-weight: 400;
@@ -3331,6 +3355,10 @@ html {
     color: #98A2B3; }
   .euiDatePopoverButton::-moz-placeholder {
     color: #98A2B3; }
+  .euiDatePopoverButton:-ms-input-placeholder {
+    color: #98A2B3; }
+  .euiDatePopoverButton:-moz-placeholder {
+    color: #98A2B3; }
   .euiDatePopoverButton::-ms-input-placeholder {
     color: #98A2B3; }
   .euiDatePopoverButton::placeholder {
@@ -3364,6 +3392,14 @@ html {
 .euiDatePopoverContent__padded--large {
   padding: 16px; }
 
+@media only screen and (max-width: 574px) {
+  .euiDatePopoverContent {
+    width: 284px; } }
+
+@media only screen and (min-width: 575px) and (max-width: 767px) {
+  .euiDatePopoverContent {
+    width: 284px; } }
+
 .euiQuickSelectPopover__content {
   width: 400px;
   max-width: 100%; }
@@ -3443,6 +3479,10 @@ html {
     color: #98A2B3; }
   .euiSuperDatePicker__prettyFormat::-moz-placeholder {
     color: #98A2B3; }
+  .euiSuperDatePicker__prettyFormat:-ms-input-placeholder {
+    color: #98A2B3; }
+  .euiSuperDatePicker__prettyFormat:-moz-placeholder {
+    color: #98A2B3; }
   .euiSuperDatePicker__prettyFormat::-ms-input-placeholder {
     color: #98A2B3; }
   .euiSuperDatePicker__prettyFormat::placeholder {
@@ -4361,6 +4401,20 @@ html {
       -ms-flex-preferred-size: auto !important;
           flex-basis: auto !important; }
 
+/**
+  * 1. For vertical layouts we use columns instead of flex
+  */
+.euiFlexGrid--directionColumn {
+  display: block;
+  /* 1 */
+  -webkit-column-gap: 0;
+     -moz-column-gap: 0;
+          column-gap: 0; }
+  .euiFlexGrid--directionColumn > .euiFlexItem {
+    display: inline-block;
+    /* 1 */
+    line-height: initial; }
+
 /**
    * Uncouple the gutter margin from the column widths to support cases where we use a FlexGrid
    * without columns.
@@ -4377,18 +4431,50 @@ html {
   -ms-flex-preferred-size: calc(25% - 0px);
       flex-basis: calc(25% - 0px); }
 
+.euiFlexGrid--gutterNone.euiFlexGrid--fourths.euiFlexGrid--directionColumn {
+  /* 1 */
+  -webkit-column-count: 4;
+     -moz-column-count: 4;
+          column-count: 4; }
+  .euiFlexGrid--gutterNone.euiFlexGrid--fourths.euiFlexGrid--directionColumn > .euiFlexItem {
+    width: calc(100% - 0px); }
+
 .euiFlexGrid--gutterNone.euiFlexGrid--thirds > .euiFlexItem {
   -ms-flex-preferred-size: calc(33.3% - 0px);
       flex-basis: calc(33.3% - 0px); }
 
+.euiFlexGrid--gutterNone.euiFlexGrid--thirds.euiFlexGrid--directionColumn {
+  /* 1 */
+  -webkit-column-count: 3;
+     -moz-column-count: 3;
+          column-count: 3; }
+  .euiFlexGrid--gutterNone.euiFlexGrid--thirds.euiFlexGrid--directionColumn > .euiFlexItem {
+    width: calc(100% - 0px); }
+
 .euiFlexGrid--gutterNone.euiFlexGrid--halves > .euiFlexItem {
   -ms-flex-preferred-size: calc(50% - 0px);
       flex-basis: calc(50% - 0px); }
 
+.euiFlexGrid--gutterNone.euiFlexGrid--halves.euiFlexGrid--directionColumn {
+  /* 1 */
+  -webkit-column-count: 2;
+     -moz-column-count: 2;
+          column-count: 2; }
+  .euiFlexGrid--gutterNone.euiFlexGrid--halves.euiFlexGrid--directionColumn > .euiFlexItem {
+    width: calc(100% - 0px); }
+
 .euiFlexGrid--gutterNone.euiFlexGrid--single > .euiFlexItem {
   -ms-flex-preferred-size: calc(100% - 0px);
       flex-basis: calc(100% - 0px); }
 
+.euiFlexGrid--gutterNone.euiFlexGrid--single.euiFlexGrid--directionColumn {
+  /* 1 */
+  -webkit-column-count: 1;
+     -moz-column-count: 1;
+          column-count: 1; }
+  .euiFlexGrid--gutterNone.euiFlexGrid--single.euiFlexGrid--directionColumn > .euiFlexItem {
+    width: calc(100% - 0px); }
+
 /**
    * Uncouple the gutter margin from the column widths to support cases where we use a FlexGrid
    * without columns.
@@ -4405,18 +4491,50 @@ html {
   -ms-flex-preferred-size: calc(25% - 8px);
       flex-basis: calc(25% - 8px); }
 
+.euiFlexGrid--gutterSmall.euiFlexGrid--fourths.euiFlexGrid--directionColumn {
+  /* 1 */
+  -webkit-column-count: 4;
+     -moz-column-count: 4;
+          column-count: 4; }
+  .euiFlexGrid--gutterSmall.euiFlexGrid--fourths.euiFlexGrid--directionColumn > .euiFlexItem {
+    width: calc(100% - 8px); }
+
 .euiFlexGrid--gutterSmall.euiFlexGrid--thirds > .euiFlexItem {
   -ms-flex-preferred-size: calc(33.3% - 8px);
       flex-basis: calc(33.3% - 8px); }
 
+.euiFlexGrid--gutterSmall.euiFlexGrid--thirds.euiFlexGrid--directionColumn {
+  /* 1 */
+  -webkit-column-count: 3;
+     -moz-column-count: 3;
+          column-count: 3; }
+  .euiFlexGrid--gutterSmall.euiFlexGrid--thirds.euiFlexGrid--directionColumn > .euiFlexItem {
+    width: calc(100% - 8px); }
+
 .euiFlexGrid--gutterSmall.euiFlexGrid--halves > .euiFlexItem {
   -ms-flex-preferred-size: calc(50% - 8px);
       flex-basis: calc(50% - 8px); }
 
+.euiFlexGrid--gutterSmall.euiFlexGrid--halves.euiFlexGrid--directionColumn {
+  /* 1 */
+  -webkit-column-count: 2;
+     -moz-column-count: 2;
+          column-count: 2; }
+  .euiFlexGrid--gutterSmall.euiFlexGrid--halves.euiFlexGrid--directionColumn > .euiFlexItem {
+    width: calc(100% - 8px); }
+
 .euiFlexGrid--gutterSmall.euiFlexGrid--single > .euiFlexItem {
   -ms-flex-preferred-size: calc(100% - 8px);
       flex-basis: calc(100% - 8px); }
 
+.euiFlexGrid--gutterSmall.euiFlexGrid--single.euiFlexGrid--directionColumn {
+  /* 1 */
+  -webkit-column-count: 1;
+     -moz-column-count: 1;
+          column-count: 1; }
+  .euiFlexGrid--gutterSmall.euiFlexGrid--single.euiFlexGrid--directionColumn > .euiFlexItem {
+    width: calc(100% - 8px); }
+
 /**
    * Uncouple the gutter margin from the column widths to support cases where we use a FlexGrid
    * without columns.
@@ -4433,18 +4551,50 @@ html {
   -ms-flex-preferred-size: calc(25% - 16px);
       flex-basis: calc(25% - 16px); }
 
+.euiFlexGrid--gutterMedium.euiFlexGrid--fourths.euiFlexGrid--directionColumn {
+  /* 1 */
+  -webkit-column-count: 4;
+     -moz-column-count: 4;
+          column-count: 4; }
+  .euiFlexGrid--gutterMedium.euiFlexGrid--fourths.euiFlexGrid--directionColumn > .euiFlexItem {
+    width: calc(100% - 16px); }
+
 .euiFlexGrid--gutterMedium.euiFlexGrid--thirds > .euiFlexItem {
   -ms-flex-preferred-size: calc(33.3% - 16px);
       flex-basis: calc(33.3% - 16px); }
 
+.euiFlexGrid--gutterMedium.euiFlexGrid--thirds.euiFlexGrid--directionColumn {
+  /* 1 */
+  -webkit-column-count: 3;
+     -moz-column-count: 3;
+          column-count: 3; }
+  .euiFlexGrid--gutterMedium.euiFlexGrid--thirds.euiFlexGrid--directionColumn > .euiFlexItem {
+    width: calc(100% - 16px); }
+
 .euiFlexGrid--gutterMedium.euiFlexGrid--halves > .euiFlexItem {
   -ms-flex-preferred-size: calc(50% - 16px);
       flex-basis: calc(50% - 16px); }
 
+.euiFlexGrid--gutterMedium.euiFlexGrid--halves.euiFlexGrid--directionColumn {
+  /* 1 */
+  -webkit-column-count: 2;
+     -moz-column-count: 2;
+          column-count: 2; }
+  .euiFlexGrid--gutterMedium.euiFlexGrid--halves.euiFlexGrid--directionColumn > .euiFlexItem {
+    width: calc(100% - 16px); }
+
 .euiFlexGrid--gutterMedium.euiFlexGrid--single > .euiFlexItem {
   -ms-flex-preferred-size: calc(100% - 16px);
       flex-basis: calc(100% - 16px); }
 
+.euiFlexGrid--gutterMedium.euiFlexGrid--single.euiFlexGrid--directionColumn {
+  /* 1 */
+  -webkit-column-count: 1;
+     -moz-column-count: 1;
+          column-count: 1; }
+  .euiFlexGrid--gutterMedium.euiFlexGrid--single.euiFlexGrid--directionColumn > .euiFlexItem {
+    width: calc(100% - 16px); }
+
 /**
    * Uncouple the gutter margin from the column widths to support cases where we use a FlexGrid
    * without columns.
@@ -4461,18 +4611,50 @@ html {
   -ms-flex-preferred-size: calc(25% - 24px);
       flex-basis: calc(25% - 24px); }
 
+.euiFlexGrid--gutterLarge.euiFlexGrid--fourths.euiFlexGrid--directionColumn {
+  /* 1 */
+  -webkit-column-count: 4;
+     -moz-column-count: 4;
+          column-count: 4; }
+  .euiFlexGrid--gutterLarge.euiFlexGrid--fourths.euiFlexGrid--directionColumn > .euiFlexItem {
+    width: calc(100% - 24px); }
+
 .euiFlexGrid--gutterLarge.euiFlexGrid--thirds > .euiFlexItem {
   -ms-flex-preferred-size: calc(33.3% - 24px);
       flex-basis: calc(33.3% - 24px); }
 
+.euiFlexGrid--gutterLarge.euiFlexGrid--thirds.euiFlexGrid--directionColumn {
+  /* 1 */
+  -webkit-column-count: 3;
+     -moz-column-count: 3;
+          column-count: 3; }
+  .euiFlexGrid--gutterLarge.euiFlexGrid--thirds.euiFlexGrid--directionColumn > .euiFlexItem {
+    width: calc(100% - 24px); }
+
 .euiFlexGrid--gutterLarge.euiFlexGrid--halves > .euiFlexItem {
   -ms-flex-preferred-size: calc(50% - 24px);
       flex-basis: calc(50% - 24px); }
 
+.euiFlexGrid--gutterLarge.euiFlexGrid--halves.euiFlexGrid--directionColumn {
+  /* 1 */
+  -webkit-column-count: 2;
+     -moz-column-count: 2;
+          column-count: 2; }
+  .euiFlexGrid--gutterLarge.euiFlexGrid--halves.euiFlexGrid--directionColumn > .euiFlexItem {
+    width: calc(100% - 24px); }
+
 .euiFlexGrid--gutterLarge.euiFlexGrid--single > .euiFlexItem {
   -ms-flex-preferred-size: calc(100% - 24px);
       flex-basis: calc(100% - 24px); }
 
+.euiFlexGrid--gutterLarge.euiFlexGrid--single.euiFlexGrid--directionColumn {
+  /* 1 */
+  -webkit-column-count: 1;
+     -moz-column-count: 1;
+          column-count: 1; }
+  .euiFlexGrid--gutterLarge.euiFlexGrid--single.euiFlexGrid--directionColumn > .euiFlexItem {
+    width: calc(100% - 24px); }
+
 /**
    * Uncouple the gutter margin from the column widths to support cases where we use a FlexGrid
    * without columns.
@@ -4489,27 +4671,65 @@ html {
   -ms-flex-preferred-size: calc(25% - 32px);
       flex-basis: calc(25% - 32px); }
 
+.euiFlexGrid--gutterXLarge.euiFlexGrid--fourths.euiFlexGrid--directionColumn {
+  /* 1 */
+  -webkit-column-count: 4;
+     -moz-column-count: 4;
+          column-count: 4; }
+  .euiFlexGrid--gutterXLarge.euiFlexGrid--fourths.euiFlexGrid--directionColumn > .euiFlexItem {
+    width: calc(100% - 32px); }
+
 .euiFlexGrid--gutterXLarge.euiFlexGrid--thirds > .euiFlexItem {
   -ms-flex-preferred-size: calc(33.3% - 32px);
       flex-basis: calc(33.3% - 32px); }
 
+.euiFlexGrid--gutterXLarge.euiFlexGrid--thirds.euiFlexGrid--directionColumn {
+  /* 1 */
+  -webkit-column-count: 3;
+     -moz-column-count: 3;
+          column-count: 3; }
+  .euiFlexGrid--gutterXLarge.euiFlexGrid--thirds.euiFlexGrid--directionColumn > .euiFlexItem {
+    width: calc(100% - 32px); }
+
 .euiFlexGrid--gutterXLarge.euiFlexGrid--halves > .euiFlexItem {
   -ms-flex-preferred-size: calc(50% - 32px);
       flex-basis: calc(50% - 32px); }
 
+.euiFlexGrid--gutterXLarge.euiFlexGrid--halves.euiFlexGrid--directionColumn {
+  /* 1 */
+  -webkit-column-count: 2;
+     -moz-column-count: 2;
+          column-count: 2; }
+  .euiFlexGrid--gutterXLarge.euiFlexGrid--halves.euiFlexGrid--directionColumn > .euiFlexItem {
+    width: calc(100% - 32px); }
+
 .euiFlexGrid--gutterXLarge.euiFlexGrid--single > .euiFlexItem {
   -ms-flex-preferred-size: calc(100% - 32px);
       flex-basis: calc(100% - 32px); }
 
+.euiFlexGrid--gutterXLarge.euiFlexGrid--single.euiFlexGrid--directionColumn {
+  /* 1 */
+  -webkit-column-count: 1;
+     -moz-column-count: 1;
+          column-count: 1; }
+  .euiFlexGrid--gutterXLarge.euiFlexGrid--single.euiFlexGrid--directionColumn > .euiFlexItem {
+    width: calc(100% - 32px); }
+
 @media only screen and (max-width: 574px) {
-  .euiFlexGrid {
+  .euiFlexGrid.euiFlexGrid--responsive {
     margin-left: 0 !important;
-    margin-right: 0 !important; } }
+    margin-right: 0 !important;
+    -webkit-column-count: 1 !important;
+       -moz-column-count: 1 !important;
+            column-count: 1 !important; } }
 
 @media only screen and (min-width: 575px) and (max-width: 767px) {
-  .euiFlexGrid {
+  .euiFlexGrid.euiFlexGrid--responsive {
     margin-left: 0 !important;
-    margin-right: 0 !important; } }
+    margin-right: 0 !important;
+    -webkit-column-count: 1 !important;
+       -moz-column-count: 1 !important;
+            column-count: 1 !important; } }
 
 /**
  * 1. Allow EuiPanels to expand to fill the item.
@@ -4718,19 +4938,9 @@ html {
           flex-grow: 1;
   overflow-y: hidden;
   height: 100%; }
-  @supports (pointer-events: none) {
-    .euiFlyoutBody {
-      position: relative; }
-      .euiFlyoutBody::after {
-        content: '';
-        position: absolute;
-        left: 0;
-        right: 0;
-        top: 0;
-        bottom: 0;
-        background: linear-gradient(to bottom, rgba(29, 30, 36, 0.9) 0%, rgba(29, 30, 36, 0) 6px, rgba(29, 30, 36, 0) calc(100% - 6px), rgba(29, 30, 36, 0.9) 100%);
-        pointer-events: none; } }
   .euiFlyoutBody .euiFlyoutBody__overflow {
+    -webkit-mask-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.1) 0%, red 7.5px, red calc(100% - 7.5px), rgba(255, 0, 0, 0.1) 100%);
+            mask-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.1) 0%, red 7.5px, red calc(100% - 7.5px), rgba(255, 0, 0, 0.1) 100%);
     scrollbar-width: thin;
     height: 100%;
     overflow-y: auto;
@@ -4950,6 +5160,10 @@ html {
     color: #98A2B3; }
   .euiFieldNumber::-moz-placeholder {
     color: #98A2B3; }
+  .euiFieldNumber:-ms-input-placeholder {
+    color: #98A2B3; }
+  .euiFieldNumber:-moz-placeholder {
+    color: #98A2B3; }
   .euiFieldNumber::-ms-input-placeholder {
     color: #98A2B3; }
   .euiFieldNumber::placeholder {
@@ -4982,6 +5196,10 @@ html {
       color: #535966; }
     .euiFieldNumber:disabled::-moz-placeholder {
       color: #535966; }
+    .euiFieldNumber:disabled:-ms-input-placeholder {
+      color: #535966; }
+    .euiFieldNumber:disabled:-moz-placeholder {
+      color: #535966; }
     .euiFieldNumber:disabled::-ms-input-placeholder {
       color: #535966; }
     .euiFieldNumber:disabled::placeholder {
@@ -5051,6 +5269,10 @@ html {
     color: #98A2B3; }
   .euiFieldPassword::-moz-placeholder {
     color: #98A2B3; }
+  .euiFieldPassword:-ms-input-placeholder {
+    color: #98A2B3; }
+  .euiFieldPassword:-moz-placeholder {
+    color: #98A2B3; }
   .euiFieldPassword::-ms-input-placeholder {
     color: #98A2B3; }
   .euiFieldPassword::placeholder {
@@ -5083,6 +5305,10 @@ html {
       color: #535966; }
     .euiFieldPassword:disabled::-moz-placeholder {
       color: #535966; }
+    .euiFieldPassword:disabled:-ms-input-placeholder {
+      color: #535966; }
+    .euiFieldPassword:disabled:-moz-placeholder {
+      color: #535966; }
     .euiFieldPassword:disabled::-ms-input-placeholder {
       color: #535966; }
     .euiFieldPassword:disabled::placeholder {
@@ -5156,6 +5382,10 @@ html {
     color: #98A2B3; }
   .euiFieldSearch::-moz-placeholder {
     color: #98A2B3; }
+  .euiFieldSearch:-ms-input-placeholder {
+    color: #98A2B3; }
+  .euiFieldSearch:-moz-placeholder {
+    color: #98A2B3; }
   .euiFieldSearch::-ms-input-placeholder {
     color: #98A2B3; }
   .euiFieldSearch::placeholder {
@@ -5188,6 +5418,10 @@ html {
       color: #535966; }
     .euiFieldSearch:disabled::-moz-placeholder {
       color: #535966; }
+    .euiFieldSearch:disabled:-ms-input-placeholder {
+      color: #535966; }
+    .euiFieldSearch:disabled:-moz-placeholder {
+      color: #535966; }
     .euiFieldSearch:disabled::-ms-input-placeholder {
       color: #535966; }
     .euiFieldSearch:disabled::placeholder {
@@ -5260,6 +5494,10 @@ html {
     color: #98A2B3; }
   .euiFieldText::-moz-placeholder {
     color: #98A2B3; }
+  .euiFieldText:-ms-input-placeholder {
+    color: #98A2B3; }
+  .euiFieldText:-moz-placeholder {
+    color: #98A2B3; }
   .euiFieldText::-ms-input-placeholder {
     color: #98A2B3; }
   .euiFieldText::placeholder {
@@ -5292,6 +5530,10 @@ html {
       color: #535966; }
     .euiFieldText:disabled::-moz-placeholder {
       color: #535966; }
+    .euiFieldText:disabled:-ms-input-placeholder {
+      color: #535966; }
+    .euiFieldText:disabled:-moz-placeholder {
+      color: #535966; }
     .euiFieldText:disabled::-ms-input-placeholder {
       color: #535966; }
     .euiFieldText:disabled::placeholder {
@@ -5449,6 +5691,10 @@ html {
       color: #535966; }
     .euiFilePicker .euiFilePicker__input:disabled + .euiFilePicker__prompt::-moz-placeholder {
       color: #535966; }
+    .euiFilePicker .euiFilePicker__input:disabled + .euiFilePicker__prompt:-ms-input-placeholder {
+      color: #535966; }
+    .euiFilePicker .euiFilePicker__input:disabled + .euiFilePicker__prompt:-moz-placeholder {
+      color: #535966; }
     .euiFilePicker .euiFilePicker__input:disabled + .euiFilePicker__prompt::-ms-input-placeholder {
       color: #535966; }
     .euiFilePicker .euiFilePicker__input:disabled + .euiFilePicker__prompt::placeholder {
@@ -6301,6 +6547,10 @@ html {
     color: #98A2B3; }
   .euiSelect::-moz-placeholder {
     color: #98A2B3; }
+  .euiSelect:-ms-input-placeholder {
+    color: #98A2B3; }
+  .euiSelect:-moz-placeholder {
+    color: #98A2B3; }
   .euiSelect::-ms-input-placeholder {
     color: #98A2B3; }
   .euiSelect::placeholder {
@@ -6333,6 +6583,10 @@ html {
       color: #535966; }
     .euiSelect:disabled::-moz-placeholder {
       color: #535966; }
+    .euiSelect:disabled:-ms-input-placeholder {
+      color: #535966; }
+    .euiSelect:disabled:-moz-placeholder {
+      color: #535966; }
     .euiSelect:disabled::-ms-input-placeholder {
       color: #535966; }
     .euiSelect:disabled::placeholder {
@@ -6369,13 +6623,9 @@ html {
  * 2. Style popover similar to combobox
  * 3. Use attribute selector to match popover position without needing the full popover class name
  */
-.euiSuperSelect {
-  width: 100%; }
-  .euiSuperSelect:not(.euiSuperSelect--fullWidth) {
-    /* 1 */
-    max-width: 400px !important; }
-  .euiSuperSelect .euiSuperSelect__popoverAnchor {
-    display: block; }
+.euiSuperSelect:not(.euiSuperSelect--fullWidth) {
+  /* 1 */
+  max-width: 400px !important; }
 
 .euiSuperSelect__popoverPanel[class*='bottom'] {
   /* 3 */
@@ -6475,6 +6725,10 @@ html {
     color: #98A2B3; }
   .euiSuperSelectControl::-moz-placeholder {
     color: #98A2B3; }
+  .euiSuperSelectControl:-ms-input-placeholder {
+    color: #98A2B3; }
+  .euiSuperSelectControl:-moz-placeholder {
+    color: #98A2B3; }
   .euiSuperSelectControl::-ms-input-placeholder {
     color: #98A2B3; }
   .euiSuperSelectControl::placeholder {
@@ -6507,6 +6761,10 @@ html {
       color: #535966; }
     .euiSuperSelectControl:disabled::-moz-placeholder {
       color: #535966; }
+    .euiSuperSelectControl:disabled:-ms-input-placeholder {
+      color: #535966; }
+    .euiSuperSelectControl:disabled:-moz-placeholder {
+      color: #535966; }
     .euiSuperSelectControl:disabled::-ms-input-placeholder {
       color: #535966; }
     .euiSuperSelectControl:disabled::placeholder {
@@ -6703,6 +6961,10 @@ html {
     color: #98A2B3; }
   .euiTextArea::-moz-placeholder {
     color: #98A2B3; }
+  .euiTextArea:-ms-input-placeholder {
+    color: #98A2B3; }
+  .euiTextArea:-moz-placeholder {
+    color: #98A2B3; }
   .euiTextArea::-ms-input-placeholder {
     color: #98A2B3; }
   .euiTextArea::placeholder {
@@ -6735,6 +6997,10 @@ html {
       color: #535966; }
     .euiTextArea:disabled::-moz-placeholder {
       color: #535966; }
+    .euiTextArea:disabled:-ms-input-placeholder {
+      color: #535966; }
+    .euiTextArea:disabled:-moz-placeholder {
+      color: #535966; }
     .euiTextArea:disabled::-ms-input-placeholder {
       color: #535966; }
     .euiTextArea:disabled::placeholder {
@@ -7867,7 +8133,7 @@ html {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  padding: 24px 40px 12px 24px;
+  padding: 24px 40px 16px 24px;
   -webkit-box-flex: 0;
       -ms-flex-positive: 0;
           flex-grow: 0;
@@ -7896,23 +8162,13 @@ html {
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column; }
-  @supports (pointer-events: none) {
-    .euiModalBody {
-      position: relative; }
-      .euiModalBody::after {
-        content: '';
-        position: absolute;
-        left: 0;
-        right: 0;
-        top: 0;
-        bottom: 0;
-        background: linear-gradient(to bottom, rgba(29, 30, 36, 0.9) 0%, rgba(29, 30, 36, 0) 6px, rgba(29, 30, 36, 0) calc(100% - 6px), rgba(29, 30, 36, 0.9) 100%);
-        pointer-events: none; } }
   .euiModalBody .euiModalBody__overflow {
+    -webkit-mask-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.1) 0%, red 7.5px, red calc(100% - 7.5px), rgba(255, 0, 0, 0.1) 100%);
+            mask-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.1) 0%, red 7.5px, red calc(100% - 7.5px), rgba(255, 0, 0, 0.1) 100%);
     scrollbar-width: thin;
     height: 100%;
     overflow-y: auto;
-    padding: 24px; }
+    padding: 8px 24px; }
     .euiModalBody .euiModalBody__overflow::-webkit-scrollbar {
       width: 16px;
       height: 16px; }
@@ -7930,7 +8186,7 @@ html {
   -webkit-box-pack: end;
       -ms-flex-pack: end;
           justify-content: flex-end;
-  padding: 24px;
+  padding: 16px 24px 24px;
   -webkit-box-flex: 0;
       -ms-flex-positive: 0;
           flex-grow: 0;
@@ -7939,8 +8195,11 @@ html {
   .euiModalFooter > * + * {
     margin-left: 16px; }
 
-.euiModalHeader + .euiModalBody .euiModalBody__overflow {
-  padding-top: 12px; }
+.euiModalHeader + .euiModalFooter {
+  padding-top: 8px; }
+
+.euiModalBody:last-of-type .euiModalBody__overflow {
+  padding-bottom: 24px; }
 
 .euiModal__closeIcon {
   background-color: rgba(29, 30, 36, 0.9);
@@ -7992,7 +8251,7 @@ html {
     width: 100vw; }
   .euiModalFooter {
     background: #25262E;
-    padding: 12px 24px;
+    padding: 12px 24px !important;
     width: 100vw;
     -webkit-box-pack: stretch;
         -ms-flex-pack: stretch;
@@ -8004,7 +8263,9 @@ html {
       .euiModalFooter > * + * {
         margin-left: 0; }
   .euiModalBody {
-    width: 100vw; } }
+    width: 100vw; }
+    .euiModalBody .euiModalBody__overflow {
+      padding-bottom: 24px; } }
 
 @media only screen and (min-width: 575px) and (max-width: 767px) {
   .euiModal {
@@ -8029,7 +8290,7 @@ html {
     width: 100vw; }
   .euiModalFooter {
     background: #25262E;
-    padding: 12px 24px;
+    padding: 12px 24px !important;
     width: 100vw;
     -webkit-box-pack: stretch;
         -ms-flex-pack: stretch;
@@ -8041,7 +8302,9 @@ html {
       .euiModalFooter > * + * {
         margin-left: 0; }
   .euiModalBody {
-    width: 100vw; } }
+    width: 100vw; }
+    .euiModalBody .euiModalBody__overflow {
+      padding-bottom: 24px; } }
 
 .euiNavDrawer {
   width: 48px;
@@ -8598,6 +8861,11 @@ html {
 .euiPopover__anchor {
   display: inline-block; }
 
+.euiPopover--displayBlock {
+  display: block; }
+  .euiPopover--displayBlock .euiPopover__anchor {
+    display: block; }
+
 /**
  * 1. Can expand further, but it looks weird if it's smaller than the originating button.
  * 2. Animation happens on the panel.
@@ -9185,18 +9453,6 @@ html {
 .euiSelectable-fullHeight {
   height: 100%; }
 
-.euiSelectableList .ReactVirtualized__List {
-  scrollbar-width: thin; }
-  .euiSelectableList .ReactVirtualized__List::-webkit-scrollbar {
-    width: 16px;
-    height: 16px; }
-  .euiSelectableList .ReactVirtualized__List::-webkit-scrollbar-thumb {
-    background-color: rgba(152, 162, 179, 0.5);
-    border: 6px solid transparent;
-    background-clip: content-box; }
-  .euiSelectableList .ReactVirtualized__List::-webkit-scrollbar-corner, .euiSelectableList .ReactVirtualized__List::-webkit-scrollbar-track {
-    background-color: transparent; }
-
 .euiSelectableList-fullHeight {
   -webkit-box-flex: 1;
       -ms-flex-positive: 1;
@@ -9207,18 +9463,19 @@ html {
   border: 1px solid #343741;
   border-radius: 4px; }
 
-@supports (pointer-events: none) {
-  .euiSelectableList-overflowing {
-    position: relative; }
-    .euiSelectableList-overflowing::after {
-      content: '';
-      position: absolute;
-      left: 0;
-      right: 0;
-      top: 0;
-      bottom: 0;
-      background: linear-gradient(to bottom, rgba(29, 30, 36, 0.9) 0%, rgba(29, 30, 36, 0) 6px, rgba(29, 30, 36, 0) calc(100% - 6px), rgba(29, 30, 36, 0.9) 100%);
-      pointer-events: none; } }
+.euiSelectableList__list {
+  -webkit-mask-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.1) 0%, red 7.5px, red calc(100% - 7.5px), rgba(255, 0, 0, 0.1) 100%);
+          mask-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.1) 0%, red 7.5px, red calc(100% - 7.5px), rgba(255, 0, 0, 0.1) 100%);
+  scrollbar-width: thin; }
+  .euiSelectableList__list::-webkit-scrollbar {
+    width: 16px;
+    height: 16px; }
+  .euiSelectableList__list::-webkit-scrollbar-thumb {
+    background-color: rgba(152, 162, 179, 0.5);
+    border: 6px solid transparent;
+    background-clip: content-box; }
+  .euiSelectableList__list::-webkit-scrollbar-corner, .euiSelectableList__list::-webkit-scrollbar-track {
+    background-color: transparent; }
 
 .euiSelectableList__groupLabel {
   color: #dfe5ef;