@charset "UTF-8"; /** The MIT License (MIT) Copyright (c) 2015 strarsis https://github.com/strarsis/sass-math-pow Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ /** The MIT License (MIT) Copyright (c) 2015 strarsis https://github.com/strarsis/sass-math-pow Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ /** * Text truncation * * Prevent text from wrapping onto multiple lines, and truncate with an ellipsis. * * 1. Ensure that the node has a maximum width after which truncation can occur. */ /** * Text weight shifting * * When changing the font-weight based the state of the component * this mixin will ensure that the sizing is dependent on the boldest * weight so it doesn't shifter sibling content. */ /** * 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) */ /** * For quickly applying a full-height element whether using flex or not */ /* * Creates the Amsterdam style of button with a transparent background */ /* * Creates the Amsterdam style of fill button */ /* The CSS in JS version of this file lives in: - src/components/form/range/range.styles.ts The following files still use the Sass version: - src/themes/amsterdam/overrides/_color_stops.scss - src/themes/amsterdam/overrides/_hue.scss */ @-webkit-keyframes euiAnimFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes euiAnimFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes euiGrow { 0% { opacity: 0; } 1% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes euiGrow { 0% { opacity: 0; } 1% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes focusRingAnimate { 0% { box-shadow: 0 0 0 2px rgba(0, 119, 204, 0); } 100% { box-shadow: 0 0 0 2px #0071c2; } } @keyframes focusRingAnimate { 0% { box-shadow: 0 0 0 2px rgba(0, 119, 204, 0); } 100% { box-shadow: 0 0 0 2px #0071c2; } } @-webkit-keyframes focusRingAnimateLarge { 0% { box-shadow: 0 0 0 10px rgba(0, 119, 204, 0); } 100% { box-shadow: 0 0 0 4px #0071c2; } } @keyframes focusRingAnimateLarge { 0% { box-shadow: 0 0 0 10px rgba(0, 119, 204, 0); } 100% { box-shadow: 0 0 0 4px #0071c2; } } @-webkit-keyframes euiButtonActive { 50% { -webkit-transform: translateY(1px); transform: translateY(1px); } } @keyframes euiButtonActive { 50% { -webkit-transform: translateY(1px); transform: translateY(1px); } } /** * LEGEND * __day-name : Week headers like Su, Mo, etc * __day : Number on the calendar * --highlighted * --disabled : _this.isDisabled(), * --selected : _this.isSameDay(_this.props.selected), * --range-start : _this.isRangeStart(), * --range-end : _this.isRangeEnd(), * --keyboard-selected : _this.isKeyboardSelected(), * --in-range : _this.isInRange(), * --in-selecting-range : _this.isInSelectingRange(), * --selecting-range-start : _this.isSelectingRangeStart(), * --selecting-range-end : _this.isSelectingRangeEnd(), * --today : _this.isSameDay(now(_this.props.utcOffset)), * --weekend : _this.isWeekend(), * --outside-month : _this.isOutsideMonth() */ .react-datepicker__day-names, .react-datepicker__week { white-space: nowrap; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-flex-grow: 1; flex-grow: 1; } .react-datepicker__day-name, .react-datepicker__day { font-weight: 500; text-align: center; color: #1a1c21; display: inline-block; width: 32px; line-height: 32px; border-radius: 4px; margin: 2px; } .react-datepicker__day-name { color: #69707D; } .react-datepicker__day { cursor: pointer; transition: -webkit-transform 90ms ease-in-out; transition: transform 90ms ease-in-out; transition: transform 90ms ease-in-out, -webkit-transform 90ms ease-in-out; } .react-datepicker__day:hover { color: #0061a6; background-color: rgba(0, 119, 204, 0.2); text-decoration: underline; } @media screen and (prefers-reduced-motion: no-preference) { .react-datepicker__day:hover { -webkit-transform: scale(1.1); transform: scale(1.1); } } .react-datepicker__day--today { color: #07C; font-weight: 700; } .react-datepicker__day--outside-month { color: #69707D; } .react-datepicker__day--highlighted, .react-datepicker__day--highlighted:hover { color: #00726b; background-color: rgba(0, 191, 179, 0.2); } .react-datepicker__day--in-range, .react-datepicker__day--in-range:hover { color: #0061a6; background-color: rgba(0, 119, 204, 0.2); } .react-datepicker__day--in-range:not(.react-datepicker__day--selected):not(:hover), .react-datepicker__day--in-range.react-datepicker__day--disabled:not(.react-datepicker__day--selected), .react-datepicker__day--in-range.react-datepicker__day--disabled:not(.react-datepicker__day--selected):hover { box-shadow: -2px 0 rgba(0, 119, 204, 0.2), 2px 0 rgba(0, 119, 204, 0.2); border-radius: 0; } .react-datepicker__day--in-range:not(.react-datepicker__day--selected):not(:hover):first-of-type, .react-datepicker__day--in-range.react-datepicker__day--disabled:not(.react-datepicker__day--selected):first-of-type, .react-datepicker__day--in-range.react-datepicker__day--disabled:not(.react-datepicker__day--selected):hover:first-of-type { box-shadow: 2px 0 rgba(0, 119, 204, 0.2); } .react-datepicker__day--in-range:not(.react-datepicker__day--selected):not(:hover):last-of-type, .react-datepicker__day--in-range.react-datepicker__day--disabled:not(.react-datepicker__day--selected):last-of-type, .react-datepicker__day--in-range.react-datepicker__day--disabled:not(.react-datepicker__day--selected):hover:last-of-type { box-shadow: -2px 0 rgba(0, 119, 204, 0.2); } .react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--selected:hover, .react-datepicker__day--in-selecting-range:hover { background-color: #07C; color: #FFF; } .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range) { background-color: rgba(189, 39, 30, 0.5); } .react-datepicker__day--disabled, .react-datepicker__day--disabled:hover { background-color: rgba(171, 180, 196, 0.1); color: #a2abba; cursor: not-allowed; text-decoration: none; -webkit-transform: none; transform: none; } .react-datepicker__day--disabled.react-datepicker__day--in-range:not(.react-datepicker__day--selected), .react-datepicker__day--disabled.react-datepicker__day--in-range:not(.react-datepicker__day--selected):hover, .react-datepicker__day--disabled:hover.react-datepicker__day--in-range:not(.react-datepicker__day--selected), .react-datepicker__day--disabled:hover.react-datepicker__day--in-range:not(.react-datepicker__day--selected):hover { color: #8c9daa; background-color: rgba(0, 119, 204, 0.2); } .react-datepicker__day--disabled.react-datepicker__day--selected, .react-datepicker__day--disabled.react-datepicker__day--selected:hover { color: #BD271E; background-color: rgba(189, 39, 30, 0.2); } /** * LEGEND * __time-list-item : * --preselected : closest current time but not selected (also applied when using arrow keys to indicate focus) * --selected * --disabled * --injected */ .react-datepicker__header--time { display: none; } .react-datepicker__time-container { border-left: #D3DAE6; width: auto; display: -webkit-flex; display: flex; margin-top: 40px; margin-left: 8px; -webkit-flex-grow: 1; flex-grow: 1; background-color: #fafbfd; border-radius: 6px; } .react-datepicker__time-container--focus .react-datepicker__time-list-item--preselected { text-decoration: underline; } @media only screen and (max-width: 574px) { .react-datepicker__time-container { margin-top: 0; } } .react-datepicker__time, .react-datepicker__time-box { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-flex-grow: 1; flex-grow: 1; } .react-datepicker__time-list { scrollbar-color: rgba(105, 112, 125, 0.5) transparent; scrollbar-width: thin; height: 100%; overflow-y: auto; overflow-x: hidden; padding: 4px 12px; height: 100px !important; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-flex-grow: 1; flex-grow: 1; -webkit-align-items: center; align-items: center; gap: 4px; } .react-datepicker__time-list::-webkit-scrollbar { width: 16px; height: 16px; } .react-datepicker__time-list::-webkit-scrollbar-thumb { background-color: rgba(105, 112, 125, 0.5); background-clip: content-box; border-radius: 16px; border: 6px solid transparent; } .react-datepicker__time-list::-webkit-scrollbar-corner, .react-datepicker__time-list::-webkit-scrollbar-track { background-color: transparent; } .react-datepicker__time-list:focus { outline: none; /* 1 */ } .react-datepicker__time-list[tabindex="0"]:focus:focus-visible { outline-style: auto; /* 2 */ } .react-datepicker__time-list-item { display: inline-block; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; height: 40px; line-height: 40px; text-align: center; white-space: nowrap; max-width: 100%; vertical-align: middle; 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; letter-spacing: normal; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-kerning: normal; font-kerning: normal; font-size: 14px; font-size: 1rem; line-height: 1.7142857143rem; font-weight: 500; text-decoration: none; outline-offset: -1px; -webkit-transform: none !important; transform: none !important; /* 1 */ -webkit-animation: none !important; animation: none !important; /* 1 */ transition-timing-function: ease-in; /* 2 */ transition-duration: 150ms; /* 2 */ padding: 0 8px; height: 24px; line-height: 24px; border-radius: 4px; font-size: 12px; } @media screen and (prefers-reduced-motion: no-preference) { .react-datepicker__time-list-item { transition: background-color 250ms ease-in-out, -webkit-transform 250ms ease-in-out; transition: transform 250ms ease-in-out, background-color 250ms ease-in-out; transition: transform 250ms ease-in-out, background-color 250ms ease-in-out, -webkit-transform 250ms ease-in-out; } .react-datepicker__time-list-item:hover:not(:disabled) { -webkit-transform: translateY(-1px); transform: translateY(-1px); } .react-datepicker__time-list-item:focus { -webkit-animation: euiButtonActive 250ms cubic-bezier(0.34, 1.61, 0.7, 1); animation: euiButtonActive 250ms cubic-bezier(0.34, 1.61, 0.7, 1); } .react-datepicker__time-list-item:active:not(:disabled) { -webkit-transform: translateY(1px); transform: translateY(1px); } } .react-datepicker__time-list-item:hover:not(:disabled), .react-datepicker__time-list-item:focus { text-decoration: underline; } .react-datepicker__time-list-item--disabled, .react-datepicker__time-list-item--disabled:hover { text-decoration: none !important; cursor: not-allowed; color: #ABB4C4; background-color: transparent; } .react-datepicker__time-list-item--injected, .react-datepicker__time-list-item--injected:hover { color: #00726b; background-color: rgba(0, 191, 179, 0.2); } .react-datepicker__time-list-item--preselected, .react-datepicker__time-list-item--preselected:hover { background: rgba(0, 119, 204, 0.1); } .react-datepicker__time-list-item--selected, .react-datepicker__time-list-item--selected:hover { background-color: #07C; color: #FFF; } .react-datepicker--time-only { padding: 0 !important; } .react-datepicker--time-only .react-datepicker__time-container { background-color: transparent; margin: 0; } .react-datepicker--time-only .react-datepicker__time-list { height: 204px !important; } .react-datepicker--time-only .react-datepicker__time-list-item { font-size: 14px; min-width: 112px; text-align: left; } /** * LEGEND * __header__dropdown : Contains the month and year, but affords for the navigational arrows * __month-dropdown-container: Contains both static/selected control and the dropdown * __month-read-view: The static control * __month-dropdown: The absolutely positioned list * __month-option: Each option in the list * --selected_month * --selected * --preselected * __year-dropdown-container: Contains both static/selected control and the dropdown * __year-read-view: The static control * __year-dropdown: The absolutely positioned list * __year-option: Each option in the list * --selected_year * --selected * --preselected */ .react-datepicker__header__dropdown { padding: 8px; display: -webkit-flex; display: flex; gap: 4px; position: absolute; top: 0; left: 36px; right: 36px; -webkit-justify-content: center; justify-content: center; } /** * Make the top selectors look like select inputs */ .react-datepicker__year-read-view, .react-datepicker__month-read-view, .react-datepicker__month-year-read-view { max-width: 400px; width: 100%; height: 40px; background-color: #fbfcfd; background-repeat: no-repeat; background-size: 0% 100%; box-shadow: 0 0 transparent, inset 0 0 0 1px rgba(17, 42, 134, 0.1); transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in; 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; letter-spacing: normal; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-kerning: normal; font-kerning: normal; font-size: 14px; color: #343741; border: none; border-radius: 6px; padding: 12px; background-color: #fbfcfd; background-repeat: no-repeat; background-size: 0% 100%; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in; padding: 8px; border-radius: 4px; height: 32px; font-weight: 500; display: -webkit-flex; display: flex; -webkit-flex-direction: row-reverse; flex-direction: row-reverse; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center; } @supports (-moz-appearance: none) { .react-datepicker__year-read-view, .react-datepicker__month-read-view, .react-datepicker__month-year-read-view { transition-property: box-shadow, background-image, background-size; } } .react-datepicker__year-read-view::-webkit-input-placeholder, .react-datepicker__month-read-view::-webkit-input-placeholder, .react-datepicker__month-year-read-view::-webkit-input-placeholder { color: #69707D; opacity: 1; } .react-datepicker__year-read-view::-moz-placeholder, .react-datepicker__month-read-view::-moz-placeholder, .react-datepicker__month-year-read-view::-moz-placeholder { color: #69707D; opacity: 1; } .react-datepicker__year-read-view::-webkit-input-placeholder, .react-datepicker__month-read-view::-webkit-input-placeholder, .react-datepicker__month-year-read-view::-webkit-input-placeholder { color: #69707D; opacity: 1; } .react-datepicker__year-read-view::-moz-placeholder, .react-datepicker__month-read-view::-moz-placeholder, .react-datepicker__month-year-read-view::-moz-placeholder { color: #69707D; opacity: 1; } .react-datepicker__year-read-view::placeholder, .react-datepicker__month-read-view::placeholder, .react-datepicker__month-year-read-view::placeholder { color: #69707D; opacity: 1; } @supports (-moz-appearance: none) { .react-datepicker__year-read-view, .react-datepicker__month-read-view, .react-datepicker__month-year-read-view { transition-property: box-shadow, background-image, background-size; } } .react-datepicker__year-read-view:hover, .react-datepicker__month-read-view:hover, .react-datepicker__month-year-read-view:hover { cursor: pointer; text-decoration: underline; } .react-datepicker__year-read-view--down-arrow, .react-datepicker__month-read-view--down-arrow, .react-datepicker__month-year-read-view--down-arrow { background-position: center; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+ICA8ZGVmcz4gICAgPHBhdGggaWQ9ImFycm93X2Rvd24tYSIgZD0iTTEzLjA2ODg1MDgsNS4xNTcyNTAzOCBMOC4zODQyMzk3NSw5Ljc2ODI3NDI4IEM4LjE3MDU0NDE1LDkuOTc4NjEzMDggNy44Mjk5OTIxNCw5Ljk3OTE0MDk1IDcuNjE1NzYwMjUsOS43NjgyNzQyOCBMMi45MzExNDkxNSw1LjE1NzI1MDM4IEMyLjcxODEzNTksNC45NDc1ODMyMSAyLjM3Mjc3MzE5LDQuOTQ3NTgzMjEgMi4xNTk3NTk5NCw1LjE1NzI1MDM4IEMxLjk0Njc0NjY5LDUuMzY2OTE3NTYgMS45NDY3NDY2OSw1LjcwNjg1NTIyIDIuMTU5NzU5OTQsNS45MTY1MjI0IEw2Ljg0NDM3MTA0LDEwLjUyNzU0NjMgQzcuNDg1MTc0MjQsMTEuMTU4MjgzNiA4LjUxNjQ0OTc5LDExLjE1NjY4NTEgOS4xNTU2Mjg5NiwxMC41Mjc1NDYzIEwxMy44NDAyNDAxLDUuOTE2NTIyNCBDMTQuMDUzMjUzMyw1LjcwNjg1NTIyIDE0LjA1MzI1MzMsNS4zNjY5MTc1NiAxMy44NDAyNDAxLDUuMTU3MjUwMzggQzEzLjYyNzIyNjgsNC45NDc1ODMyMSAxMy4yODE4NjQxLDQuOTQ3NTgzMjEgMTMuMDY4ODUwOCw1LjE1NzI1MDM4IFoiLz4gIDwvZGVmcz4gIDxnIGZpbGwtcnVsZT0iZXZlbm9kZCI+ICAgIDx1c2UgZmlsbC1ydWxlPSJub256ZXJvIiB4bGluazpocmVmPSIjYXJyb3dfZG93bi1hIi8+ICA8L2c+PC9zdmc+); right: 8px; height: 12px; width: 12px; display: inline-block; background-size: cover; } .react-datepicker__year-read-view--selected-month, .react-datepicker__year-read-view--selected-year, .react-datepicker__month-read-view--selected-month, .react-datepicker__month-read-view--selected-year, .react-datepicker__month-year-read-view--selected-month, .react-datepicker__month-year-read-view--selected-year { max-width: 100%; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .react-datepicker__year-dropdown-container, .react-datepicker__month-dropdown-container { position: relative; display: inline-block; -webkit-flex-grow: 1; flex-grow: 1; max-width: 400px; } .react-datepicker__year-dropdown-container > div:not([class*=read-view]), .react-datepicker__month-dropdown { scrollbar-color: rgba(105, 112, 125, 0.5) transparent; scrollbar-width: thin; height: 100%; overflow-y: auto; overflow-x: hidden; box-shadow: 0 0.7px 1.4px rgba(0, 0, 0, 0.07), 0 1.9px 4px rgba(0, 0, 0, 0.05), 0 4.5px 10px rgba(0, 0, 0, 0.05); height: auto; max-height: 250px; background-color: #FFF; position: absolute; z-index: 1; border-radius: 6px; min-width: 100px; width: 100%; } .react-datepicker__year-dropdown-container > div:not([class*=read-view])::-webkit-scrollbar, .react-datepicker__month-dropdown::-webkit-scrollbar { width: 16px; height: 16px; } .react-datepicker__year-dropdown-container > div:not([class*=read-view])::-webkit-scrollbar-thumb, .react-datepicker__month-dropdown::-webkit-scrollbar-thumb { background-color: rgba(105, 112, 125, 0.5); background-clip: content-box; border-radius: 16px; border: 6px solid transparent; } .react-datepicker__year-dropdown-container > div:not([class*=read-view])::-webkit-scrollbar-corner, .react-datepicker__year-dropdown-container > div:not([class*=read-view])::-webkit-scrollbar-track, .react-datepicker__month-dropdown::-webkit-scrollbar-corner, .react-datepicker__month-dropdown::-webkit-scrollbar-track { background-color: transparent; } .react-datepicker__year-dropdown-container > div:not([class*=read-view]):focus, .react-datepicker__month-dropdown:focus { outline: none; /* 1 */ } .react-datepicker__year-dropdown-container > div:not([class*=read-view])[tabindex="0"]:focus:focus-visible, .react-datepicker__month-dropdown[tabindex="0"]:focus:focus-visible { outline-style: auto; /* 2 */ } .react-datepicker__year-dropdown-container > div:not([class*=read-view]) .react-datepicker__year-dropdown { padding: 4px; display: -webkit-flex; display: flex; -webkit-flex-direction: column-reverse; flex-direction: column-reverse; -webkit-justify-content: flex-end; justify-content: flex-end; } .react-datepicker__month-dropdown-container { -webkit-flex-grow: 2; flex-grow: 2; } .react-datepicker__month-dropdown-container .react-datepicker__month-dropdown { padding: 4px; min-width: 140px; } .react-datepicker__year-option, .react-datepicker__month-option, .react-datepicker__month-year-option { padding: 0 8px; height: 24px; line-height: 24px; border-radius: 4px; font-size: 14px; margin: 4px 0; cursor: pointer; } .react-datepicker__year-option:hover, .react-datepicker__year-option:focus, .react-datepicker__month-option:hover, .react-datepicker__month-option:focus, .react-datepicker__month-year-option:hover, .react-datepicker__month-year-option:focus { text-decoration: underline; } .react-datepicker__year-option--selected, .react-datepicker__month-option--selected, .react-datepicker__month-year-option--selected { display: none; } .react-datepicker__year-option--preselected, .react-datepicker__year-option--preselected:hover, .react-datepicker__month-option--preselected, .react-datepicker__month-option--preselected:hover { background: rgba(0, 119, 204, 0.1); } .react-datepicker__year-option--selected_year, .react-datepicker__year-option--selected_year:hover, .react-datepicker__month-option--selected_month, .react-datepicker__month-option--selected_month:hover { background-color: #07C; color: #FFF; } .react-datepicker__navigation--next, .react-datepicker__navigation--previous { background-position: center; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZmlsbD0iIzM0Mzc0MSIgZD0iTTExLjY5MiA3SDMuNTU2QzMuMjQ5IDcgMyA3LjIyNCAzIDcuNXMuMjQ5LjUuNTU2LjVoOC4xMzZsLTQuMDk2IDQuMDk2YS41LjUgMCAwMC43MDcuNzA3bDQuMjQzLTQuMjQyYy4yNTgtLjI1OS40MDMtLjU4Ny40MzMtLjkyNWEuNDU0LjQ1NCAwIDAwMC0uMjcyIDEuNDk0IDEuNDk0IDAgMDAtLjQzMy0uOTI1TDguMzAzIDIuMTk3YS41LjUgMCAxMC0uNzA3LjcwN0wxMS42OTIgN3oiLz48L3N2Zz4=); cursor: pointer; position: absolute; top: 8px; height: 32px; width: 32px; z-index: 1; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; border-radius: 4px; background-position: center; } .react-datepicker__navigation--next:hover, .react-datepicker__navigation--next:focus, .react-datepicker__navigation--previous:hover, .react-datepicker__navigation--previous:focus { background-color: rgba(0, 119, 204, 0.1); } .react-datepicker__navigation--previous { left: 8px; -webkit-transform: rotate(180deg); transform: rotate(180deg); -webkit-transform-origin: center; transform-origin: center; } .react-datepicker__navigation--next { right: 8px; } /* This file is a heavy retheme of react-datepicker's Sass as of v1.4.0 ** https://github.com/Hacker0x01/react-datepicker */ .euiDatePicker { display: block; /** * Inline datepickers */ } .euiDatePicker .euiFormControlLayout { height: auto; } .euiDatePicker--inline .euiFormControlLayout { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; background-color: transparent; box-shadow: none; padding: 0; } .euiDatePicker--inline .euiFormControlLayoutDelimited .euiFormControlLayout__childrenWrapper { background-color: transparent; -webkit-flex-direction: column; flex-direction: column; } .euiDatePicker--inline .euiFormControlLayoutIcons { -webkit-justify-content: center; justify-content: center; -webkit-padding-after: 8px; padding-block-end: 8px; } .euiDatePicker--shadow .euiFormControlLayout { box-shadow: 0 0.9px 4px -1px rgba(0, 0, 0, 0.08), 0 2.6px 8px -1px rgba(0, 0, 0, 0.06), 0 5.7px 12px -1px rgba(0, 0, 0, 0.05), 0 15px 15px -1px rgba(0, 0, 0, 0.04); } .euiDatePicker--shadow .euiFormControlLayoutDelimited .euiFormControlLayout__childrenWrapper { background-color: #FFF; } .react-datepicker { font-size: 12px; color: #343741; display: -webkit-flex; display: flex; border-radius: 6px; padding: 8px; -webkit-justify-content: center; justify-content: center; } .react-datepicker--non-interactive { pointer-events: none; } .react-datepicker__current-month, .react-datepicker-time__header { display: none; } .react-datepicker__screenReaderOnly { position: absolute; top: auto; left: -10000px; width: 1px; height: 1px; clip: rect(0 0 0 0); -webkit-clip-path: inset(50%); clip-path: inset(50%); overflow: hidden; margin: -1px; } .react-datepicker__focusTrap { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; } .react-datepicker__month-container { -webkit-flex-grow: 1; flex-grow: 1; margin-top: 36px; } .react-datepicker__header { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; } .react-datepicker-time__header { max-width: 100%; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .react-datepicker__month { text-align: center; border-radius: 6px; } @media only screen and (max-width: 574px) { .react-datepicker__focusTrap, .react-datepicker { -webkit-flex-direction: column; flex-direction: column; } .react-datepicker__time-box { margin-top: 0; } } .euiAccordionForm__extraAction { opacity: 0; transition: opacity 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } .euiAccordionForm__extraAction:focus { opacity: 1; } .euiAccordionForm__title { display: inline-block; } .euiAccordionForm__button { padding: 16px 16px 16px 0; } .euiAccordionForm__button:hover { text-decoration: none; } .euiAccordionForm__button:hover .euiAccordionForm__title { text-decoration: underline; } .euiAccordionForm { border-top: 1px solid #D3DAE6; border-bottom: 1px solid #D3DAE6; } .euiAccordionForm + .euiAccordionForm { border-top: none; } .euiAccordionForm:hover .euiAccordionForm__extraAction { opacity: 1; visibility: visible; } .euiColorPicker { position: relative; width: 152px; } .euiColorPicker__popoverAnchor .euiColorPicker__input { padding-right: 40px; } .euiColorPicker__popoverAnchor .euiColorPicker__input[class*="--compressed"] { padding-right: 32px; } .euiColorPicker__popoverAnchor .euiColorPicker__input + .euiFormControlLayoutIcons { color: inherit; } .euiColorPicker__swatches { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: -4px; } .euiColorPicker__swatch-item { margin: 4px; } .euiSwatchInput__stroke { fill: none; stroke: rgba(0, 0, 0, 0.2); } .euiColorPicker__popoverPanel--pickerOnly { padding-bottom: 0 !important; } .euiColorPicker__input--inGroup { height: 38px !important; box-shadow: none !important; border-radius: 0; } .euiColorPicker__input--inGroup.euiFieldText--compressed { height: 30px !important; border-radius: 0; } .euiColorPicker__alphaRange .euiRangeInput { min-width: 0; } .euiColorPickerSwatch { display: inline-block; height: 24px; width: 24px; border-radius: 3px; cursor: pointer; border: solid 1px rgba(0, 0, 0, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } .euiColorPickerSwatch:disabled { cursor: default; } .euiColorPickerSwatch:focus { outline: 2px solid currentColor; } .euiColorPickerSwatch:focus:focus-visible { outline-style: auto; } .euiColorPickerSwatch:focus:not(:focus-visible) { outline: none; } .euiHue { background: linear-gradient(to right, #FF3232 0%, #FFF130 20%, #45FF30 35%, #28FFF0 52%, #282CFF 71%, #FF28FB 88%, #FF0094 100%); height: 24px; margin: 4px 0; position: relative; } .euiHue::before, .euiHue::after { content: ""; left: 0; position: absolute; height: 8px; background: #FFF; width: 100%; } .euiHue::after { bottom: 0; } .euiHue__range { position: relative; height: 24px; width: calc(100% + 2px); margin: 0 -1px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; z-index: 2; } .euiHue__range::-webkit-slider-thumb { padding: 7px; border: 1px solid #939496; background: #FFF no-repeat center; border-radius: 14px; -webkit-transition: background-color 150ms ease-in, border-color 150ms ease-in; transition: background-color 150ms ease-in, border-color 150ms ease-in; box-shadow: 0 0 0 1px #FFF, 0 2px 2px -1px rgba(0, 0, 0, 0.2), 0 1px 5px -2px rgba(0, 0, 0, 0.2); border: 2px solid #FFF; cursor: pointer; background-color: #69707D; padding: 0; height: 16px; width: 16px; box-sizing: border-box; } .euiHue__range::-moz-range-thumb { padding: 7px; border: 1px solid #939496; background: #FFF no-repeat center; border-radius: 14px; -moz-transition: background-color 150ms ease-in, border-color 150ms ease-in; transition: background-color 150ms ease-in, border-color 150ms ease-in; box-shadow: 0 0 0 1px #FFF, 0 2px 2px -1px rgba(0, 0, 0, 0.2), 0 1px 5px -2px rgba(0, 0, 0, 0.2); border: 2px solid #FFF; cursor: pointer; background-color: #69707D; padding: 0; height: 16px; width: 16px; box-sizing: border-box; } .euiHue__range::-ms-thumb { padding: 7px; border: 1px solid #939496; background: #FFF no-repeat center; border-radius: 14px; -ms-transition: background-color 150ms ease-in, border-color 150ms ease-in; transition: background-color 150ms ease-in, border-color 150ms ease-in; box-shadow: 0 0 0 1px #FFF, 0 2px 2px -1px rgba(0, 0, 0, 0.2), 0 1px 5px -2px rgba(0, 0, 0, 0.2); border: 2px solid #FFF; cursor: pointer; background-color: #69707D; padding: 0; height: 16px; width: 16px; box-sizing: border-box; } .euiHue__range::-webkit-slider-thumb { -webkit-appearance: none; margin-top: 0; } .euiHue__range::-ms-thumb { margin-top: 0; } .euiHue__range::-ms-track { height: 24px; background: transparent; border-color: transparent; color: transparent; } .euiHue__range::-moz-focus-outer { border: none; } .euiHue__range::-ms-fill-lower, .euiHue__range::-ms-fill-upper { background: transparent; } .euiHue__range:focus { outline: none; } .euiHue__range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 2px #0071c2; border-color: #07C; } .euiHue__range:focus::-moz-range-thumb { box-shadow: 0 0 0 2px #0071c2; border-color: #07C; } .euiHue__range:focus::-ms-thumb { box-shadow: 0 0 0 2px #0071c2; border-color: #07C; } .euiSaturation { position: relative; width: 100%; padding-bottom: 100%; border-radius: 3px; touch-action: none; z-index: 3; } .euiSaturation .euiSaturation__lightness, .euiSaturation .euiSaturation__saturation { position: absolute; top: -1px; bottom: 0; left: 0; right: 0; border-radius: 3px; } .euiSaturation .euiSaturation__lightness { background: linear-gradient(to right, rgb(255, 255, 255), rgba(255, 255, 255, 0)); } .euiSaturation .euiSaturation__saturation { background: linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 0, 0)); } .euiSaturation .euiSaturation__indicator { position: absolute; height: 12px; width: 12px; border-radius: 100%; margin-top: -6px; margin-left: -6px; border: 1px solid #343741; } .euiSaturation .euiSaturation__indicator::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 100%; border: 1px solid #F5F7FA; } .euiSaturation:focus { outline: none; } .euiSaturation:focus .euiSaturation__indicator { box-shadow: 0 0 0 2px #0071c2; border-color: #07C; } .euiColorPalettePicker__itemTitle { font-size: 12px; font-size: 0.8571428571rem; line-height: 1.1428571429rem; } .euiColorPalettePicker__itemTitle + .euiColorPaletteDisplay { margin-top: 4px; } .euiColorPaletteDisplay { display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; overflow: hidden; height: 8px; } .euiColorPaletteDisplay--sizeExtraSmall { position: relative; height: 4px; border-radius: 4px; } .euiColorPaletteDisplay--sizeExtraSmall::after { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 4px; content: ""; pointer-events: none; border: 1px solid rgba(52, 55, 65, 0.2); } .euiColorPaletteDisplay--sizeExtraSmall .euiColorPaletteDisplayFixed__bleedArea { height: 4px; } .euiColorPaletteDisplay--sizeSmall { position: relative; height: 8px; border-radius: 8px; } .euiColorPaletteDisplay--sizeSmall::after { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 8px; content: ""; pointer-events: none; border: 1px solid rgba(52, 55, 65, 0.2); } .euiColorPaletteDisplay--sizeSmall .euiColorPaletteDisplayFixed__bleedArea { height: 8px; } .euiColorPaletteDisplay--sizeMedium { position: relative; height: 16px; border-radius: 16px; } .euiColorPaletteDisplay--sizeMedium::after { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 16px; content: ""; pointer-events: none; border: 1px solid rgba(52, 55, 65, 0.2); } .euiColorPaletteDisplay--sizeMedium .euiColorPaletteDisplayFixed__bleedArea { height: 16px; } .euiColorPaletteDisplayFixed__bleedArea { position: absolute; top: 0; left: 0; display: -webkit-flex; display: flex; height: 8px; width: calc(100% + 1px); } .euiComboBox { max-width: 400px; width: 100%; height: auto; position: relative; /** * 1. Allow pills to truncate their text with an ellipsis. * 2. Don't allow pills/placeholder to overlap with the caret, loading icon or clear button. * 3. The height on combo can be larger than normal text inputs except for single-selection comboboxes. */ /** * 1. Force field height to match other field heights. * 2. Force input height to expand to fill this element. * 3. Reset appearance on Safari. * 4. Fix react-input-autosize appearance. * 5. Prevent a lot of input from causing the react-input-autosize to overflow the container. */ } .euiComboBox--fullWidth { max-width: 100%; } .euiComboBox--compressed { height: 32px; } .euiComboBox--inGroup { height: 100%; } .euiComboBox--compressed:not(.euiComboBox--appended, .euiComboBox--prepended) { height: auto; /* 3 */ } .euiComboBox:not(.euiComboBox--appended, .euiComboBox--prepended) .euiFormControlLayout { height: auto; /* 3 */ } .euiComboBox .euiComboBox__inputWrap { max-width: 400px; width: 100%; height: 40px; background-color: #fbfcfd; background-repeat: no-repeat; background-size: 0% 100%; box-shadow: 0 0 transparent, inset 0 0 0 1px rgba(17, 42, 134, 0.1); transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in; 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; letter-spacing: normal; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-kerning: normal; font-kerning: normal; font-size: 14px; color: #343741; border: none; border-radius: 6px; padding: 12px; max-width: 400px; width: 100%; height: auto; padding: 4px 8px; padding-right: var(--eui-form-control-layout-icons-padding, 8px); /* 2 */ display: -webkit-flex; display: flex; /* 1 */ outline: none; } .euiComboBox .euiComboBox__inputWrap--fullWidth { max-width: 100%; } .euiComboBox .euiComboBox__inputWrap--compressed { height: 32px; } .euiComboBox .euiComboBox__inputWrap--inGroup { height: 100%; } @supports (-moz-appearance: none) { .euiComboBox .euiComboBox__inputWrap { transition-property: box-shadow, background-image, background-size; } } .euiComboBox .euiComboBox__inputWrap::-webkit-input-placeholder { color: #69707D; opacity: 1; } .euiComboBox .euiComboBox__inputWrap::-moz-placeholder { color: #69707D; opacity: 1; } .euiComboBox .euiComboBox__inputWrap::placeholder { color: #69707D; opacity: 1; } .euiComboBox .euiComboBox__inputWrap--compressed { background-color: #fbfcfd; background-repeat: no-repeat; background-size: 0% 100%; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in; padding: 8px; border-radius: 4px; } @supports (-moz-appearance: none) { .euiComboBox .euiComboBox__inputWrap--compressed { transition-property: box-shadow, background-image, background-size; } } .euiComboBox .euiComboBox__inputWrap--inGroup { box-shadow: none !important; border-radius: 0; } .euiComboBox .euiComboBox__inputWrap--fullWidth { max-width: 100%; } .euiComboBox .euiComboBox__inputWrap--compressed { height: 32px; } .euiComboBox .euiComboBox__inputWrap--inGroup { height: 100%; } .euiComboBox .euiComboBox__inputWrap .euiComboBoxPill { max-width: calc(100% - 2px - 16px); } .euiComboBox .euiComboBox__inputWrap:not(.euiComboBox__inputWrap--noWrap) { padding-top: 4px; padding-bottom: 4px; padding-left: 4px; height: auto; /* 3 */ -webkit-flex-wrap: wrap; flex-wrap: wrap; /* 1 */ -webkit-align-content: flex-start; align-content: flex-start; } .euiComboBox .euiComboBox__inputWrap:not(.euiComboBox__inputWrap--noWrap):hover { cursor: text; } .euiComboBox .euiComboBox__input { display: -webkit-inline-flex !important; display: inline-flex !important; /* 1 */ height: 32px; /* 2 */ overflow: hidden; /* 5 */ } .euiComboBox .euiComboBox__input > input { 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; letter-spacing: normal; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-kerning: normal; font-kerning: normal; -webkit-appearance: none; -moz-appearance: none; appearance: none; /* 3 */ padding: 0; border: none; background: transparent; font-size: 14px; color: #343741; margin: 4px; line-height: 1.5; /* 4 */ } .euiComboBox.euiComboBox-isOpen .euiComboBox__inputWrap { background-color: white; background-image: linear-gradient(to top, #07C, #07C 2px, transparent 2px, transparent 100%); background-size: 100% 100%; outline: none; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); } .euiComboBox.euiComboBox-isOpen .euiComboBox__inputWrap--compressed { background-color: white; background-image: linear-gradient(to top, #07C, #07C 2px, transparent 2px, transparent 100%); background-size: 100% 100%; outline: none; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); } .euiComboBox.euiComboBox-isInvalid .euiComboBox__inputWrap { background-image: linear-gradient(to top, #BD271E, #BD271E 2px, transparent 2px, transparent 100%); background-size: 100%; } .euiComboBox.euiComboBox-isDisabled .euiComboBox__inputWrap { color: #98A2B3; -webkit-text-fill-color: #98A2B3; cursor: not-allowed; background: #eef2f7; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); -webkit-text-fill-color: unset; } .euiComboBox.euiComboBox-isDisabled .euiComboBox__inputWrap::-webkit-input-placeholder { color: #98A2B3; opacity: 1; } .euiComboBox.euiComboBox-isDisabled .euiComboBox__inputWrap::-moz-placeholder { color: #98A2B3; opacity: 1; } .euiComboBox.euiComboBox-isDisabled .euiComboBox__inputWrap::placeholder { color: #98A2B3; opacity: 1; } .euiComboBox.euiComboBox-isDisabled .euiComboBoxPlaceholder, .euiComboBox.euiComboBox-isDisabled .euiComboBoxPill--plainText { color: #98A2B3; -webkit-text-fill-color: #98A2B3; } .euiComboBox.euiComboBox-isDisabled .euiComboBox__inputWrap:not(.euiComboBox__inputWrap--noWrap):hover { cursor: not-allowed; } .euiComboBox.euiComboBox--compressed .euiComboBox__inputWrap { line-height: 32px; /* 2 */ padding-top: 0; padding-bottom: 0; } .euiComboBox__input { max-width: 100%; } .euiComboBox__input input { border: none !important; box-shadow: none !important; outline: none !important; } /* * 1. Overwrites the base styling of EuiBadge, to give it a larger size and margins * that make sense in the input wrap. */ .euiComboBoxPill { height: 22px; line-height: 20px; vertical-align: baseline; /* Fix append/prepend vertical alignment */ } .euiComboBoxPill, .euiComboBoxPill + .euiComboBoxPill { margin: 4px; } .euiComboBox--compressed .euiComboBoxPill, .euiComboBox--compressed .euiComboBoxPill + .euiComboBoxPill { margin: 5px 4px 0 0; } .euiComboBox--compressed .euiComboBoxPill--plainText { margin-top: 4px; } .euiComboBoxPill--plainText { 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; letter-spacing: normal; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-kerning: normal; font-kerning: normal; max-width: 100%; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; line-height: 24px; font-size: 14px; padding: 0; color: #343741; vertical-align: middle; display: -webkit-inline-flex; display: inline-flex; -webkit-align-items: center; align-items: center; } .euiComboBoxPill__prepend { margin-right: 4px; } .euiComboBoxPill__append { margin-left: 4px; } .euiComboBoxPill--plainText, .euiComboBoxPill .euiBadge__text { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; } .euiComboBoxPill--plainText .euiIcon, .euiComboBoxPill .euiBadge__text .euiIcon { display: block; } .euiComboBoxPlaceholder { max-width: 100%; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; padding-right: 40px; position: absolute; pointer-events: none; padding-left: 4px; line-height: 32px; color: #69707D; margin-bottom: 0 !important; } /** * 1. Using specificity to override panel shadow * 2. Prevent really long input from overflowing the container. */ .euiComboBoxOptionsList { -webkit-transform: none !important; transform: none !important; top: 0; } .euiComboBoxOptionsList .euiFilterSelectItem__content { margin-block: 0 !important; } .euiComboBoxOptionsList__empty { overflow-wrap: break-word !important; word-break: break-word; /* 2 */ padding: 8px; text-align: center; word-wrap: break-word; } .euiComboBoxOptionsList__rowWrap { padding: 0; max-height: 200px; overflow: hidden; } .euiComboBoxOptionsList__rowWrap > div { scrollbar-color: rgba(105, 112, 125, 0.5) transparent; scrollbar-width: thin; } .euiComboBoxOptionsList__rowWrap > div::-webkit-scrollbar { width: 16px; height: 16px; } .euiComboBoxOptionsList__rowWrap > div::-webkit-scrollbar-thumb { background-color: rgba(105, 112, 125, 0.5); background-clip: content-box; border-radius: 16px; border: 6px solid transparent; } .euiComboBoxOptionsList__rowWrap > div::-webkit-scrollbar-corner, .euiComboBoxOptionsList__rowWrap > div::-webkit-scrollbar-track { background-color: transparent; } .euiComboBoxOption { font-size: 14px; padding: 4px 8px 4px 16px; width: 100%; text-align: left; border: 1px solid #D3DAE6; border-color: transparent; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; /* Fix vertical alignment of EuiIcons in prepend/append nodes */ } .euiComboBoxOption:hover { text-decoration: underline; } .euiComboBoxOption.euiComboBoxOption-isFocused { cursor: pointer; color: #0071c2; background-color: rgba(0, 119, 204, 0.1); } .euiComboBoxOption.euiComboBoxOption-isDisabled { color: #98A2B3; cursor: not-allowed; } .euiComboBoxOption.euiComboBoxOption-isDisabled:hover { text-decoration: none; } .euiComboBoxOption__contentWrapper { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; } .euiComboBoxOption__content { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; -webkit-flex: 1; flex: 1; text-align: left; } .euiComboBoxOption__emptyStateText { -webkit-flex: 1; flex: 1; text-align: left; /* Extra specificity required to override EuiText's
styling */ } .euiComboBoxOptionsList__empty .euiComboBoxOption__emptyStateText { margin-bottom: 0; } .euiComboBoxOption__enterBadge { margin-left: 4px; } .euiComboBoxOption__prepend { margin-right: 8px; } .euiComboBoxOption__append { margin-left: 8px; } .euiComboBoxOption__prepend .euiIcon, .euiComboBoxOption__append .euiIcon { display: block; } /** * 1. Force each title to be the same height as an option, so that the virtualized scroll logic * works. */ .euiComboBoxTitle { font-size: 12px; padding: 11px 8px 4px; /* 1 */ width: 100%; font-weight: 700; color: #000; } .euiContextMenu { width: 256px; max-width: 100%; position: relative; overflow: hidden; transition: height 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); border-radius: 6px; } .euiContextMenu .euiContextMenu__content { padding: 8px; } /** * 1. When there are multiple ContextMenuPanels, the ContextMenu will absolutely * position them. ContextMenuPanel will break the layout of a Popover if it's * absolutely positioned by default. */ .euiContextMenu__panel { position: absolute; /* 1 */ } .euiContextMenu__icon { margin-right: 8px; } .euiContextMenuPanel { width: 100%; visibility: visible; outline-offset: -2px; } .euiContextMenuPanel:focus { outline: none; } .euiContextMenuPanel.euiContextMenuPanel-txInLeft { pointer-events: none; -webkit-animation: euiContextMenuPanelTxInLeft 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); animation: euiContextMenuPanelTxInLeft 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } .euiContextMenuPanel.euiContextMenuPanel-txOutLeft { pointer-events: none; -webkit-animation: euiContextMenuPanelTxOutLeft 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); animation: euiContextMenuPanelTxOutLeft 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } .euiContextMenuPanel.euiContextMenuPanel-txInRight { pointer-events: none; -webkit-animation: euiContextMenuPanelTxInRight 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); animation: euiContextMenuPanelTxInRight 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } .euiContextMenuPanel.euiContextMenuPanel-txOutRight { pointer-events: none; -webkit-animation: euiContextMenuPanelTxOutRight 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); animation: euiContextMenuPanelTxOutRight 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } .euiContextMenuPanel--next { -webkit-transform: translateX(256px); transform: translateX(256px); visibility: hidden; } .euiContextMenuPanel--previous { -webkit-transform: translateX(-256px); transform: translateX(-256px); visibility: hidden; } .euiContextMenuPanelTitle { overflow-wrap: break-word !important; word-break: break-word; color: #1a1c21; font-size: 14px; font-size: 1rem; line-height: 1.7142857143rem; font-weight: 700; padding: 12px; width: 100%; text-align: left; outline-offset: -2px; border-bottom: 1px solid #D3DAE6; } .euiContextMenuPanelTitle:enabled:hover, .euiContextMenuPanelTitle:enabled:focus { text-decoration: underline; } .euiContextMenuPanelTitle--small { padding: 6px 8px; } @-webkit-keyframes euiContextMenuPanelTxInLeft { 0% { -webkit-transform: translateX(256px); transform: translateX(256px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes euiContextMenuPanelTxInLeft { 0% { -webkit-transform: translateX(256px); transform: translateX(256px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes euiContextMenuPanelTxOutLeft { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translateX(-256px); transform: translateX(-256px); } } @keyframes euiContextMenuPanelTxOutLeft { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translateX(-256px); transform: translateX(-256px); } } @-webkit-keyframes euiContextMenuPanelTxInRight { 0% { -webkit-transform: translateX(-256px); transform: translateX(-256px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes euiContextMenuPanelTxInRight { 0% { -webkit-transform: translateX(-256px); transform: translateX(-256px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes euiContextMenuPanelTxOutRight { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translateX(256px); transform: translateX(256px); } } @keyframes euiContextMenuPanelTxOutRight { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translateX(256px); transform: translateX(256px); } } .euiContextMenuItem { display: block; padding: 12px; width: 100%; text-align: left; color: #343741; outline-offset: -2px; } .euiContextMenuItem:hover, .euiContextMenuItem:focus { text-decoration: underline; } .euiContextMenuItem:focus { background-color: rgba(0, 119, 204, 0.1); } .euiContextMenuItem.euiContextMenuItem-isDisabled { color: #ABB4C4; cursor: default; } .euiContextMenuItem.euiContextMenuItem-isDisabled:hover, .euiContextMenuItem.euiContextMenuItem-isDisabled:focus { text-decoration: none; } .euiContextMenuItem--small { padding: 6px 8px; } .euiContextMenuItem--small .euiContextMenuItem__text { font-size: 14px; font-size: 1rem; line-height: 1.7142857143rem; } .euiContextMenuItem__inner { display: -webkit-flex; display: flex; } .euiContextMenuItem__text { -webkit-flex-grow: 1; flex-grow: 1; overflow: hidden; } .euiContextMenuItem__arrow { -webkit-align-self: flex-end; align-self: flex-end; } .euiContextMenu__itemLayout { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; } .euiContextMenu__itemLayout.euiContextMenu__itemLayout--bottom { -webkit-align-items: flex-end; align-items: flex-end; } .euiContextMenu__itemLayout.euiContextMenu__itemLayout--top { -webkit-align-items: flex-start; align-items: flex-start; } .euiContextMenu__itemLayout .euiContextMenu__icon { -webkit-flex-shrink: 0; flex-shrink: 0; } .euiControlBar { background: #343741; color: white; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; box-shadow: inset 0 40px 0 #343741, inset 0 600rem 0 #fafbfd; bottom: 0; -webkit-transform: translateY(0); transform: translateY(0); height: 40px; max-height: calc(100vh - 80px); } .euiControlBar--fixed { position: fixed; z-index: 6000; } .euiControlBar--absolute { position: absolute; z-index: 1000; } .euiControlBar--relative { position: relative; } .euiControlBar-isOpen { -webkit-animation-duration: 250ms; animation-duration: 250ms; -webkit-animation-timing-function: cubic-bezier(0.694, 0.0482, 0.335, 1); animation-timing-function: cubic-bezier(0.694, 0.0482, 0.335, 1); -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .euiControlBar-isOpen.euiControlBar--large { -webkit-animation-name: euiControlBarOpenPanelLarge; animation-name: euiControlBarOpenPanelLarge; height: calc(100vh - 80px); bottom: -100vh; } .euiControlBar-isOpen.euiControlBar--medium { -webkit-animation-name: euiControlBarOpenPanelMedium; animation-name: euiControlBarOpenPanelMedium; height: 480px; bottom: -480px; } .euiControlBar-isOpen.euiControlBar--small { -webkit-animation-name: euiControlBarOpenPanelSmall; animation-name: euiControlBarOpenPanelSmall; height: 240px; bottom: -240px; } .euiControlBar__controls { height: 40px; width: 100%; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; overflow-y: hidden; overflow-x: auto; padding: 0 12px; } .euiControlBar__content { scrollbar-color: rgba(105, 112, 125, 0.5) transparent; scrollbar-width: thin; overflow-y: auto; width: 100%; height: calc(100% - 40px); background-color: #fafbfd; -webkit-animation-name: euiControlBarShowContent; animation-name: euiControlBarShowContent; -webkit-animation-duration: 350ms; animation-duration: 350ms; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-timing-function: cubic-bezier(0.694, 0.0482, 0.335, 1); animation-timing-function: cubic-bezier(0.694, 0.0482, 0.335, 1); color: #343741; } .euiControlBar__content::-webkit-scrollbar { width: 16px; height: 16px; } .euiControlBar__content::-webkit-scrollbar-thumb { background-color: rgba(105, 112, 125, 0.5); background-clip: content-box; border-radius: 16px; border: 6px solid transparent; } .euiControlBar__content::-webkit-scrollbar-corner, .euiControlBar__content::-webkit-scrollbar-track { background-color: transparent; } .euiControlBar__icon { -webkit-flex-shrink: 0; flex-shrink: 0; margin-left: 8px; margin-right: 8px; } .euiControlBar__buttonIcon { -webkit-flex-shrink: 0; flex-shrink: 0; min-width: 40px; min-height: 40px; } .euiControlBar__button { -webkit-flex-shrink: 0; flex-shrink: 0; border-radius: 3px; margin-left: 4px; font-size: 14px; } .euiControlBar__button:enabled:hover { -webkit-transform: none; transform: none; box-shadow: none; } .euiControlBar__button:last-child { margin-right: 4px; } .euiControlBar__breadcrumbs .euiBreadcrumb:not(:last-of-type) .euiBreadcrumb__content { color: #9ca0aa; } .euiControlBar__breadcrumbs .euiBreadcrumb::after { background: rgba(255, 255, 255, 0.2); } .euiControlBar__spacer { -webkit-flex-grow: 1; flex-grow: 1; height: 100%; } .euiControlBar__divider { -webkit-flex-shrink: 0; flex-shrink: 0; height: 100%; width: 1px; background-color: rgba(255, 255, 255, 0.2); } .euiControlBar__text { max-width: 100%; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font-size: 14px; font-size: 1rem; line-height: 1.7142857143rem; padding: 0 8px; color: white; } .euiControlBar__text:last-child { padding-right: 0; } .euiControlBar__tab { max-width: 100%; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font-size: 14px; font-size: 1rem; line-height: 1.7142857143rem; color: white; padding: 0 16px; text-align: center; height: 100%; } .euiControlBar__tab:hover, .euiControlBar__tab:focus { text-decoration: underline; cursor: pointer; } .euiControlBar__tab.euiControlBar__tab--active { background-color: #fafbfd; box-shadow: inset 0 4px 0 #0071c2; color: #0071c2; } .euiControlBar__controls .euiLink.euiLink--primary { color: #5eaadf; } .euiControlBar__controls .euiLink.euiLink--primary:hover { color: #4da0db; } .euiControlBar__controls .euiLink.euiLink--text { color: #FFF; } .euiControlBar__controls .euiControlBar__button.euiButton[class*=primary]:enabled:not(.euiButton--fill) { color: #5eaadf; border-color: #5eaadf; } .euiControlBar__controls .euiButtonIcon[class*=primary] { color: #5eaadf; } .euiControlBar__controls .euiLink.euiLink--accent { color: #f576af; } .euiControlBar__controls .euiLink.euiLink--accent:hover { color: #f583b7; } .euiControlBar__controls .euiLink.euiLink--text { color: #FFF; } .euiControlBar__controls .euiControlBar__button.euiButton[class*=accent]:enabled:not(.euiButton--fill) { color: #f576af; border-color: #f576af; } .euiControlBar__controls .euiButtonIcon[class*=accent] { color: #f576af; } .euiControlBar__controls .euiLink.euiLink--success { color: #00BFB3; } .euiControlBar__controls .euiLink.euiLink--success:hover { color: #4dd2ca; } .euiControlBar__controls .euiLink.euiLink--text { color: #FFF; } .euiControlBar__controls .euiControlBar__button.euiButton[class*=success]:enabled:not(.euiButton--fill) { color: #00BFB3; border-color: #00BFB3; } .euiControlBar__controls .euiButtonIcon[class*=success] { color: #00BFB3; } .euiControlBar__controls .euiLink.euiLink--warning { color: #FEC514; } .euiControlBar__controls .euiLink.euiLink--warning:hover { color: #fed65b; } .euiControlBar__controls .euiLink.euiLink--text { color: #FFF; } .euiControlBar__controls .euiControlBar__button.euiButton[class*=warning]:enabled:not(.euiButton--fill) { color: #FEC514; border-color: #FEC514; } .euiControlBar__controls .euiButtonIcon[class*=warning] { color: #FEC514; } .euiControlBar__controls .euiLink.euiLink--danger { color: #db8a85; } .euiControlBar__controls .euiLink.euiLink--danger:hover { color: #d16862; } .euiControlBar__controls .euiLink.euiLink--text { color: #FFF; } .euiControlBar__controls .euiControlBar__button.euiButton[class*=danger]:enabled:not(.euiButton--fill) { color: #db8a85; border-color: #db8a85; } .euiControlBar__controls .euiButtonIcon[class*=danger] { color: #db8a85; } .euiControlBar__controls .euiLink.euiLink--ghost { color: #FFF; } .euiControlBar__controls .euiLink.euiLink--ghost:hover { color: white; } .euiControlBar__controls .euiLink.euiLink--text { color: #FFF; } .euiControlBar__controls .euiControlBar__button.euiButton[class*=ghost]:enabled:not(.euiButton--fill) { color: #FFF; border-color: #FFF; } .euiControlBar__controls .euiButtonIcon[class*=ghost] { color: #FFF; } .euiControlBar__controls .euiLink.euiLink--text { color: #9ca0aa; } .euiControlBar__controls .euiLink.euiLink--text:hover { color: #969ba4; } .euiControlBar__controls .euiLink.euiLink--text { color: #FFF; } .euiControlBar__controls .euiControlBar__button.euiButton[class*=text]:enabled:not(.euiButton--fill) { color: #9ca0aa; border-color: #9ca0aa; } .euiControlBar__controls .euiButtonIcon[class*=text] { color: #9ca0aa; } @media only screen and (max-width: 574px) { .euiControlBar:not(.euiControlBar--showOnMobile) { display: none; } } @media only screen and (min-width: 575px) and (max-width: 767px) { .euiControlBar:not(.euiControlBar--showOnMobile) { display: none; } } @-webkit-keyframes euiControlBarOpenPanelLarge { 0% { -webkit-transform: translateY(calc((40px * 3) * -1)); transform: translateY(calc((40px * 3) * -1)); } 100% { -webkit-transform: translateY(-100vh); transform: translateY(-100vh); } } @keyframes euiControlBarOpenPanelLarge { 0% { -webkit-transform: translateY(calc((40px * 3) * -1)); transform: translateY(calc((40px * 3) * -1)); } 100% { -webkit-transform: translateY(-100vh); transform: translateY(-100vh); } } @-webkit-keyframes euiControlBarOpenPanelMedium { 0% { -webkit-transform: translateY(-40px); transform: translateY(-40px); } 100% { -webkit-transform: translateY(-480px); transform: translateY(-480px); } } @keyframes euiControlBarOpenPanelMedium { 0% { -webkit-transform: translateY(-40px); transform: translateY(-40px); } 100% { -webkit-transform: translateY(-480px); transform: translateY(-480px); } } @-webkit-keyframes euiControlBarOpenPanelSmall { 0% { -webkit-transform: translateY(-40px); transform: translateY(-40px); } 100% { -webkit-transform: translateY(-240px); transform: translateY(-240px); } } @keyframes euiControlBarOpenPanelSmall { 0% { -webkit-transform: translateY(-40px); transform: translateY(-40px); } 100% { -webkit-transform: translateY(-240px); transform: translateY(-240px); } } @-webkit-keyframes euiControlBarShowContent { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes euiControlBarShowContent { 0% { opacity: 0; } 100% { opacity: 1; } } .euiSuperDatePicker__absoluteDateFormRow { padding: 0 8px 8px; } .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; letter-spacing: normal; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-kerning: normal; font-kerning: normal; font-size: 14px; color: #343741; display: block; width: 100%; padding: 0 8px; line-height: 38px; height: 38px; word-break: break-all; transition: background 150ms ease-in; background-size: 100%; } .euiDatePopoverButton::-webkit-input-placeholder { color: #69707D; opacity: 1; } .euiDatePopoverButton::-moz-placeholder { color: #69707D; opacity: 1; } .euiDatePopoverButton::placeholder { color: #69707D; opacity: 1; } .euiDatePopoverButton--compressed { line-height: 30px; height: 30px; } .euiDatePopoverButton:focus, .euiDatePopoverButton-isSelected { background-image: linear-gradient(to top, #07C, #07C 2px, transparent 2px, transparent 100%); } .euiDatePopoverButton-needsUpdating { background-color: #e6f9f7; color: #007e77; } .euiDatePopoverButton-needsUpdating:focus, .euiDatePopoverButton-needsUpdating.euiDatePopoverButton-isSelected { background-image: linear-gradient(to top, #00BFB3, #00BFB3 2px, transparent 2px, transparent 100%); } .euiDatePopoverButton-isInvalid { background-image: linear-gradient(to top, #BD271E, #BD271E 2px, transparent 2px, transparent 100%); background-size: 100%; background-color: transparent; color: #BD271E; } .euiDatePopoverButton-isInvalid:focus, .euiDatePopoverButton-isInvalid.euiDatePopoverButton-isSelected { background-image: linear-gradient(to top, #BD271E, #BD271E 2px, transparent 2px, transparent 100%); } .euiDatePopoverButton:disabled { background-color: #eef2f7; background-image: none; color: #69707D; cursor: default; } .euiDatePopoverButton--start { text-align: center; } .euiDatePopoverButton--end { text-align: center; } .euiDatePopoverContent { width: 400px; max-width: 100%; } .euiDatePopoverContent__padded { padding: 8px; } .euiDatePopoverContent__padded--large { padding: 16px; } @media only screen and (max-width: 574px) { .euiDatePopoverContent { width: 284px; } } .euiQuickSelectPopover__content { width: 400px; max-width: 100%; } .euiQuickSelectPopover__content .euiQuickSelectPopover__panel:not(:first-child) { border-top: 1px solid #D3DAE6; padding-top: 12px; margin-top: 12px; } .euiQuickSelectPopover__content .euiQuickSelectPopover__panel .euiQuickSelectPopover__panelTitle { float: left; margin-bottom: 12px; } .euiQuickSelectPopover__section { scrollbar-color: rgba(105, 112, 125, 0.5) transparent; scrollbar-width: thin; max-height: 132px; overflow: hidden; overflow-y: auto; margin: 8px 0 0; clear: both; } .euiQuickSelectPopover__section::-webkit-scrollbar { width: 16px; height: 16px; } .euiQuickSelectPopover__section::-webkit-scrollbar-thumb { background-color: rgba(105, 112, 125, 0.5); background-clip: content-box; border-radius: 16px; border: 6px solid transparent; } .euiQuickSelectPopover__section::-webkit-scrollbar-corner, .euiQuickSelectPopover__section::-webkit-scrollbar-track { background-color: transparent; } .euiQuickSelectPopover__buttonText { margin-right: 4px !important; } .euiQuickSelectPopover__anchor { height: 100%; } .euiQuickSelectPopover__sectionItem { font-size: 14px; line-height: 14px; } .euiQuickSelectPopover__sectionItem--recentlyUsed:not(:last-of-type) { margin-bottom: 8px; } .euiQuickSelect__applyButton { min-width: 0; } .euiRefreshInterval__startButton { min-width: 90px; } .euiSuperDatePicker { display: -webkit-flex; display: flex; gap: 8px; max-width: 100%; min-width: min(326px, 100%); width: 606px; } @media only screen and (max-width: 574px) { .euiSuperDatePicker { width: 100%; } } @media only screen and (min-width: 575px) and (max-width: 767px) { .euiSuperDatePicker { width: 100%; } } .euiSuperDatePicker--isAutoRefreshOnly { min-width: min(200px, 100%); width: 400px; } .euiSuperDatePicker--noUpdateButton { min-width: min(200px, 100%); width: 480px; } .euiSuperDatePicker--fullWidth { width: 100%; } .euiSuperDatePicker--isQuickSelectOnly { min-width: 0; } .euiSuperDatePicker--autoWidth { display: -webkit-inline-flex; display: inline-flex; width: auto; } .euiSuperDatePicker .euiDatePickerRange { -webkit-flex-grow: 1; flex-grow: 1; } .euiSuperDatePicker .euiFormControlLayout { max-width: 100%; } .euiSuperDatePicker .euiFormControlLayout__childrenWrapper { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; overflow: hidden; background-color: #fbfcfd; } .euiSuperDatePicker .euiFormControlLayout__childrenWrapper:last-child { border-radius: 0 6px 6px 0; } .euiSuperDatePicker .euiFormControlLayout__childrenWrapper > .euiFormControlLayoutDelimited__input { -webkit-flex-grow: 1; flex-grow: 1; } .euiSuperDatePicker__prettyFormat { 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; letter-spacing: normal; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-kerning: normal; font-kerning: normal; font-size: 14px; color: #343741; display: block; width: 100%; padding: 0 8px; line-height: 38px; height: 38px; word-break: break-all; transition: background 150ms ease-in; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; text-align: left; } .euiSuperDatePicker__prettyFormat::-webkit-input-placeholder { color: #69707D; opacity: 1; } .euiSuperDatePicker__prettyFormat::-moz-placeholder { color: #69707D; opacity: 1; } .euiSuperDatePicker__prettyFormat::placeholder { color: #69707D; opacity: 1; } .euiSuperDatePicker__prettyFormat:not(:disabled):hover, .euiSuperDatePicker__prettyFormat:focus { text-decoration: none; } .euiSuperDatePicker__prettyFormat:disabled { background-color: #eef2f7; color: #69707D; cursor: not-allowed; } /** * Make the arrow delimiter match the colors of `.euiDatePopoverButton-needsUpdating` */ .euiSuperDatePicker--needsUpdating .euiFormControlLayoutDelimited .euiFormControlLayout__childrenWrapper { background-color: #e6f9f7; } .euiSuperDatePicker--needsUpdating .euiFormControlLayoutDelimited .euiFormControlLayoutDelimited__delimiter { color: #007e77; } .euiSuperDatePicker--needsUpdating .euiFormControlLayout__childrenWrapper { transition: background 150ms ease-in; } .euiDataGrid { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: stretch; align-items: stretch; overflow: hidden; height: 100%; } .euiDataGrid--fullScreen { height: 100%; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999; background: #FFF; } .euiDataGrid--fullScreen .euiDataGrid__pagination { padding-bottom: 4px; background: #F5F7FA; box-shadow: 1px 0 0 1px #D3DAE6; } .euiDataGrid__content { -webkit-flex-grow: 1; flex-grow: 1; height: 100%; max-width: 100%; width: 100%; overflow: hidden; z-index: 1; position: relative; background: #fafbfd; font-feature-settings: "tnum" 1; } .euiDataGrid__customRenderBody { scrollbar-color: rgba(105, 112, 125, 0.5) #FFF; scrollbar-width: thin; height: 100%; width: 100%; overflow: auto; } .euiDataGrid__customRenderBody::-webkit-scrollbar { width: 16px; height: 16px; } .euiDataGrid__customRenderBody::-webkit-scrollbar-thumb { background-color: rgba(105, 112, 125, 0.5); background-clip: content-box; border-radius: 16px; border: 6px solid #FFF; } .euiDataGrid__customRenderBody::-webkit-scrollbar-corner, .euiDataGrid__customRenderBody::-webkit-scrollbar-track { background-color: #FFF; } .euiDataGrid__pagination { z-index: 2; padding-top: 4px; -webkit-flex-grow: 0; flex-grow: 0; } .euiDataGrid__restrictBody { height: 100vh; overflow: hidden; } .euiDataGrid__restrictBody .euiHeader { z-index: 998; } .euiDataGrid__focusWrap { height: 100%; } .euiDataGrid__virtualized { scrollbar-color: rgba(105, 112, 125, 0.5) #FFF; scrollbar-width: thin; scroll-padding: 0; } .euiDataGrid__virtualized::-webkit-scrollbar { width: 16px; height: 16px; } .euiDataGrid__virtualized::-webkit-scrollbar-thumb { background-color: rgba(105, 112, 125, 0.5); background-clip: content-box; border-radius: 16px; border: 6px solid #FFF; } .euiDataGrid__virtualized::-webkit-scrollbar-corner, .euiDataGrid__virtualized::-webkit-scrollbar-track { background-color: #FFF; } .euiDataGrid__scrollOverlay { position: absolute; top: -1px; right: 0; bottom: 0; left: 0; pointer-events: none; box-shadow: inset 0 0 0 1px #D3DAE6; } .euiDataGrid--bordersHorizontal .euiDataGrid__scrollOverlay { box-shadow: inset 0 -2px 0 -1px #D3DAE6; } .euiDataGrid__scrollOverlay .euiDataGrid__scrollBarOverlayBottom { position: absolute; width: 100%; height: 1px; background-color: #D3DAE6; } .euiDataGrid__scrollOverlay .euiDataGrid__scrollBarOverlayRight { position: absolute; height: 100%; width: 1px; background-color: #D3DAE6; } .euiDataGridHeader { display: -webkit-flex; display: flex; z-index: 3; background: #FFF; position: -webkit-sticky; position: sticky; top: 0; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .euiDataGridHeaderCell { font-size: 14px; font-size: 1rem; line-height: 1.7142857143rem; font-weight: 700; padding: 6px; -webkit-flex: 0 0 auto; flex: 0 0 auto; position: relative; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: flex; } .euiDataGridHeaderCell.euiDataGridHeaderCell--numeric { text-align: right; } .euiDataGridHeaderCell.euiDataGridHeaderCell--currency { text-align: right; } .euiDataGridHeaderCell:focus { outline: none; border-top: none; } .euiDataGridHeaderCell:focus::after { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border: 2px solid #0071c2; border-radius: 4px; z-index: 2; pointer-events: none; } .euiDataGridHeaderCell:not(.euiDataGridHeaderCell--controlColumn):focus-within { outline: none; border-top: none; } .euiDataGridHeaderCell:not(.euiDataGridHeaderCell--controlColumn):focus-within::after { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border: 2px solid #0071c2; border-radius: 4px; z-index: 2; pointer-events: none; } .euiDataGridHeaderCell:not(.euiDataGridHeaderCell--controlColumn) .euiDataGridHeaderCell__sortingArrow { margin-right: 4px; } .euiDataGridHeaderCell:not(.euiDataGridHeaderCell--controlColumn) .euiDataGridHeaderCell__button { -webkit-flex: 0 0 auto; flex: 0 0 auto; position: relative; -webkit-align-items: center; align-items: center; display: -webkit-flex; display: flex; width: 100%; font-weight: 700; outline: none; } .euiDataGridHeaderCell:not(.euiDataGridHeaderCell--controlColumn) .euiDataGridHeaderCell__button .euiDataGridHeaderCell__sortingArrow { -webkit-flex-grow: 0; flex-grow: 0; } .euiDataGridHeaderCell:not(.euiDataGridHeaderCell--controlColumn) .euiDataGridHeaderCell__content { max-width: 100%; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; overflow: hidden; white-space: nowrap; text-align: left; -webkit-flex-grow: 1; flex-grow: 1; -webkit-align-self: baseline; align-self: baseline; } .euiDataGridHeaderCell:not(.euiDataGridHeaderCell--controlColumn) .euiDataGridHeaderCell__icon { -webkit-flex-grow: 0; flex-grow: 0; -webkit-flex-basis: auto; flex-basis: auto; width: auto; padding-left: 4px; } .euiDataGridHeader__action--selected { font-weight: 700 !important; } .euiDataGrid--bordersNone.euiDataGrid--bordersHorizontal .euiDataGridHeader { background: #FFF; } .euiDataGrid--headerUnderline .euiDataGridHeaderCell { border-top: none; border-left: none; border-right: none; border-bottom: 2px solid #D3DAE6; border-bottom-color: #343741; } .euiDataGrid--bordersNone.euiDataGrid--headerUnderline .euiDataGridHeaderCell { border-bottom: 2px solid #D3DAE6; border-color: #343741; } .euiDataGrid--headerShade .euiDataGridHeaderCell { background: #f5f7fa; } .euiDataGrid--headerShade.euiDataGrid--bordersAll .euiDataGridHeaderCell { border-right: 1px solid #D3DAE6; border-bottom: 1px solid #D3DAE6; border-left: none; } .euiDataGrid--headerShade.euiDataGrid--bordersAll .euiDataGridHeaderCell:first-of-type { border-left: 1px solid #D3DAE6; } .euiDataGrid--headerShade.euiDataGrid--bordersHorizontal .euiDataGridHeaderCell { border-top: none; border-bottom: 1px solid #D3DAE6; } .euiDataGrid--bordersNone .euiDataGridHeaderCell { border: none; } .euiDataGrid--borderhorizontal .euiDataGridHeaderCell { border-top: none; border-right: none; border-left: none; } .euiDataGrid--fontSizeSmall .euiDataGridHeaderCell { font-size: 12px; font-size: 0.8571428571rem; line-height: 1.1428571429rem; } .euiDataGrid--fontSizeLarge .euiDataGridHeaderCell { font-size: 14px; font-size: 1rem; line-height: 1.7142857143rem; } .euiDataGrid--paddingSmall .euiDataGridHeaderCell { padding: 4px; } .euiDataGrid--paddingLarge .euiDataGridHeaderCell { padding: 8px; } .euiDataGrid--noControls.euiDataGrid--bordersAll .euiDataGridHeaderCell { border-top: 1px solid #D3DAE6; } .euiDataGrid--noControls.euiDataGrid--bordersHorizontal .euiDataGridHeaderCell { border-top: 1px solid #D3DAE6; } .euiDataGridFooter { display: -webkit-flex; display: flex; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .euiDataGridRowCell.euiDataGridFooterCell { -webkit-flex: 0 0 auto; flex: 0 0 auto; position: relative; font-weight: 700; } .euiDataGrid--stickyFooter .euiDataGridFooter { position: -webkit-sticky; position: sticky; bottom: 0; } .euiDataGrid--footerOverline .euiDataGridRowCell.euiDataGridFooterCell { border-top: 2px solid #D3DAE6; border-top-color: #343741 !important; background: #FFF !important; } .euiDataGrid--bordersNone .euiDataGridRowCell.euiDataGridFooterCell { border-left: none; border-right: none; } .euiDataGrid--bordersHorizontal .euiDataGridRowCell.euiDataGridFooterCell { border-left: none; border-right: none; } .euiDataGrid--footerShade .euiDataGridRowCell.euiDataGridFooterCell { background: #f5f7fa; } .euiDataGridColumnResizer { position: absolute; top: 0; right: -8px; height: 100%; width: 16px; cursor: ew-resize; opacity: 0; z-index: 2; } .euiDataGridColumnResizer::after { content: ""; position: absolute; left: 7px; top: 0; bottom: 0; width: 3px; background-color: #07C; } .euiDataGridColumnResizer:hover, .euiDataGridColumnResizer:active { opacity: 1; } .euiDataGridColumnResizer:hover ~ .euiDataGridHeaderCell__content, .euiDataGridColumnResizer:active ~ .euiDataGridHeaderCell__content { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .euiDataGridHeaderCell:last-child .euiDataGridColumnResizer { right: 0; width: 8px; } .euiDataGridHeaderCell:last-child .euiDataGridColumnResizer::after { left: auto; right: 0; } .euiDataGridRow { background-color: #FFF; } .euiDataGridRowCell { font-size: 14px; font-size: 1rem; line-height: 1.7142857143rem; padding: 6px; border-right: solid 1px #edf0f5; border-bottom: 1px solid #D3DAE6; overflow: hidden; } .euiDataGridRowCell > * { height: 100%; } .euiDataGridRowCell.euiDataGridRowCell--firstColumn { border-left: 1px solid #D3DAE6; } .euiDataGridRowCell.euiDataGridRowCell--lastColumn { border-right-color: #D3DAE6; } .euiDataGridRowCell:focus { position: relative; outline: none; } .euiDataGridRowCell:focus::after { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border: 2px solid #0071c2; border-radius: 4px; z-index: 2; pointer-events: none; } .euiDataGridRowCell:hover { /* * For some incredibly bizarre reason, Safari doesn't correctly update the flex * width of the content (when rows are an undefined height/single flex row), * which causes the action icons to overlap & makes the content less readable. * This workaround "animation" forces a rerender of the flex content width * * TODO: Remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=258539 is resolved */ } .euiDataGridRowCell:hover .euiDataGridRowCell__actionButtonIcon { -webkit-animation-duration: 90ms; animation-duration: 90ms; -webkit-animation-name: euiDataGridCellActionsSlideIn; animation-name: euiDataGridCellActionsSlideIn; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-delay: 250ms; animation-delay: 250ms; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .euiDataGridRowCell:hover .euiDataGridRowCell__expandContent { -webkit-animation-name: euiDataGridCellActionsSafariWorkaround; animation-name: euiDataGridCellActionsSafariWorkaround; -webkit-animation-duration: 1000ms; animation-duration: 1000ms; -webkit-animation-delay: 340ms; animation-delay: 340ms; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: linear; animation-timing-function: linear; } .euiDataGridRowCell:focus .euiDataGridRowCell__actionButtonIcon, .euiDataGridRowCell:focus-within .euiDataGridRowCell__actionButtonIcon, .euiDataGridRowCell.euiDataGridRowCell--open .euiDataGridRowCell__actionButtonIcon { -webkit-animation: none; animation: none; margin-left: 6px; width: 12px; } .euiDataGridRowCell:not(:hover):not(:focus):not(.euiDataGridRowCell--open) .euiDataGridRowCell__actionButtonIcon { display: none; } .euiDataGridRowCell.euiDataGridRowCell--numeric { text-align: right; } .euiDataGridRowCell.euiDataGridRowCell--currency { text-align: right; } .euiDataGridRowCell.euiDataGridRowCell--uppercase { text-transform: uppercase; } .euiDataGridRowCell.euiDataGridRowCell--lowercase { text-transform: lowercase; } .euiDataGridRowCell.euiDataGridRowCell--capitalize { text-transform: capitalize; } .euiDataGridRowCell .euiDataGridRowCell__definedHeight { overflow-wrap: break-word !important; word-break: break-word; -webkit-flex-grow: 1; flex-grow: 1; } .euiDataGridRowCell:not(.euiDataGridRowCell--controlColumn) .euiDataGridRowCell__content, .euiDataGridRowCell:not(.euiDataGridRowCell--controlColumn) .euiDataGridRowCell__truncate, .euiDataGridRowCell:not(.euiDataGridRowCell--controlColumn).euiDataGridRowCell__truncate, .euiDataGridRowCell:not(.euiDataGridRowCell--controlColumn) .euiDataGridRowCell__expandContent { max-width: 100%; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; overflow: hidden; white-space: nowrap; } .euiDataGridRowCell__popover { scrollbar-color: rgba(105, 112, 125, 0.5) transparent; scrollbar-width: thin; overflow: auto; max-width: 400px !important; max-height: 400px !important; z-index: 1000 !important; -webkit-filter: none; filter: none; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1), 0 3.6px 13px rgba(0, 0, 0, 0.07), 0 8.4px 23px rgba(0, 0, 0, 0.06), 0 23px 35px rgba(0, 0, 0, 0.05); } .euiDataGridRowCell__popover::-webkit-scrollbar { width: 16px; height: 16px; } .euiDataGridRowCell__popover::-webkit-scrollbar-thumb { background-color: rgba(105, 112, 125, 0.5); background-clip: content-box; border-radius: 16px; border: 6px solid transparent; } .euiDataGridRowCell__popover::-webkit-scrollbar-corner, .euiDataGridRowCell__popover::-webkit-scrollbar-track { background-color: transparent; } .euiDataGridRowCell__expandFlex { position: relative; display: -webkit-flex; display: flex; -webkit-align-items: baseline; align-items: baseline; height: 100%; } .euiDataGridRowCell--controlColumn .euiDataGridRowCell__expandFlex { -webkit-align-items: center; align-items: center; } .euiDataGridRowCell__expandContent { -webkit-flex-grow: 1; flex-grow: 1; } .euiDataGridRowCell__contentByHeight { -webkit-flex-grow: 1; flex-grow: 1; height: 100%; } .euiDataGridRowCell__expandActions { display: -webkit-flex; display: flex; } .euiDataGridRowCell__expandContent + .euiDataGridRowCell__expandActions { -webkit-flex-grow: 0; flex-grow: 0; } .euiDataGridRowCell__contentByHeight + .euiDataGridRowCell__expandActions { background-color: #FFF; position: absolute; right: 0; top: 0; padding: 6px 0; } .euiDataGridRowCell__actionButtonIcon { height: 12px; border-radius: 3px; width: 0; overflow: hidden; transition: none; box-shadow: none !important; border: none; } .euiDataGrid--stripes .euiDataGridRow--striped { background-color: #F5F7FA; } .euiDataGrid--stripes .euiDataGridRow--striped .euiDataGridRowCell__contentByHeight + .euiDataGridRowCell__expandActions { background-color: #F5F7FA; } .euiDataGrid--rowHoverHighlight .euiDataGridRow:hover { background-color: #fff9e8; } .euiDataGrid--rowHoverHighlight .euiDataGridRow:hover .euiDataGridRowCell__contentByHeight + .euiDataGridRowCell__expandActions { background-color: #fff9e8; } .euiDataGrid--bordersNone .euiDataGridRowCell { border-color: transparent !important; } .euiDataGrid--bordersHorizontal .euiDataGridRowCell { border-right-color: transparent; border-left-color: transparent; } .euiDataGrid--fontSizeSmall .euiDataGridRowCell { font-size: 12px; font-size: 0.8571428571rem; line-height: 1.1428571429rem; } .euiDataGrid--fontSizeLarge .euiDataGridRowCell { font-size: 14px; font-size: 1rem; line-height: 1.7142857143rem; } .euiDataGrid--paddingSmall .euiDataGridRowCell { padding: 4px; } .euiDataGrid--paddingLarge .euiDataGridRowCell { padding: 8px; } .euiDataGrid--fontSizeSmall.euiDataGrid--paddingSmall .euiDataGridRowCell__contentByHeight + .euiDataGridRowCell__expandActions { padding: 2px 0; } .euiDataGrid--fontSizeSmall.euiDataGrid--paddingSmall .euiDataGridRowCell__expandContent + .euiDataGridRowCell__expandActions { -webkit-transform: translateY(1px); transform: translateY(1px); } @-webkit-keyframes euiDataGridCellActionsSlideIn { from { margin-left: 0; width: 0; } to { margin-left: 6px; width: 12px; } } @keyframes euiDataGridCellActionsSlideIn { from { margin-left: 0; width: 0; } to { margin-left: 6px; width: 12px; } } @-webkit-keyframes euiDataGridCellActionsSafariWorkaround { from { width: 100%; -webkit-flex-basis: 100%; flex-basis: 100%; } to { width: auto; -webkit-flex-basis: auto; flex-basis: auto; } } @keyframes euiDataGridCellActionsSafariWorkaround { from { width: 100%; -webkit-flex-basis: 100%; flex-basis: 100%; } to { width: auto; -webkit-flex-basis: auto; flex-basis: auto; } } .euiDataGrid__controls { background: #fafbfd; position: relative; z-index: 2; border: 1px solid #D3DAE6; padding: 4px 4px 4px 0; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center; } .euiDataGrid__rightControls { white-space: nowrap; } .euiDataGrid__rightControls:only-child { margin-left: auto; } .euiDataGrid__rightControls > * + * { margin-left: 8px; } .euiDataGrid__leftControls > * + * { margin-left: 2px; } .euiDataGrid__controlBtn--active, .euiDataGrid__controlBtn--active:focus { font-weight: 600; } .euiDataGrid--bordersNone .euiDataGrid__controls { border: none; background: #FFF; } .euiDataGrid--bordersHorizontal .euiDataGrid__controls { border-right: none; border-left: none; border-top: none; background: #FFF; } .euiDataGrid__controlScroll { scrollbar-color: rgba(105, 112, 125, 0.5) transparent; scrollbar-width: thin; height: 100%; overflow-y: auto; overflow-x: hidden; -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%); max-height: 400px; padding: 8px; margin: -8px; } .euiDataGrid__controlScroll::-webkit-scrollbar { width: 16px; height: 16px; } .euiDataGrid__controlScroll::-webkit-scrollbar-thumb { background-color: rgba(105, 112, 125, 0.5); background-clip: content-box; border-radius: 16px; border: 6px solid transparent; } .euiDataGrid__controlScroll::-webkit-scrollbar-corner, .euiDataGrid__controlScroll::-webkit-scrollbar-track { background-color: transparent; } .euiDataGrid__controlScroll:focus { outline: none; /* 1 */ } .euiDataGrid__controlScroll[tabindex="0"]:focus:focus-visible { outline-style: auto; /* 2 */ } .euiDataGridColumnSelector__item { padding: 4px; } .euiDataGridColumnSelector__item-isDragging { box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1), 0 3.6px 13px rgba(0, 0, 0, 0.07), 0 8.4px 23px rgba(0, 0, 0, 0.06), 0 23px 35px rgba(0, 0, 0, 0.05); background: #FFF; } .euiDataGridColumnSelector__columnList { scrollbar-color: rgba(105, 112, 125, 0.5) transparent; scrollbar-width: thin; height: 100%; overflow-y: auto; overflow-x: hidden; -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%); max-height: 400px; margin: 0 -8px; } .euiDataGridColumnSelector__columnList::-webkit-scrollbar { width: 16px; height: 16px; } .euiDataGridColumnSelector__columnList::-webkit-scrollbar-thumb { background-color: rgba(105, 112, 125, 0.5); background-clip: content-box; border-radius: 16px; border: 6px solid transparent; } .euiDataGridColumnSelector__columnList::-webkit-scrollbar-corner, .euiDataGridColumnSelector__columnList::-webkit-scrollbar-track { background-color: transparent; } .euiDataGridColumnSelector__columnList:focus { outline: none; /* 1 */ } .euiDataGridColumnSelector__columnList[tabindex="0"]:focus:focus-visible { outline-style: auto; /* 2 */ } .euiDataGridColumnSelector__itemLabel { font-size: 12px; font-size: 0.8571428571rem; line-height: 1.1428571429rem; } .euiDataGridColumnSorting__item-isDragging { box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1), 0 3.6px 13px rgba(0, 0, 0, 0.07), 0 8.4px 23px rgba(0, 0, 0, 0.06), 0 23px 35px rgba(0, 0, 0, 0.05); background: #FFF; } .euiDataGridColumnSorting__fieldList { scrollbar-color: rgba(105, 112, 125, 0.5) transparent; scrollbar-width: thin; height: 100%; overflow-y: auto; overflow-x: hidden; -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%); padding-top: 4px; padding-bottom: 4px; max-height: 300px; } .euiDataGridColumnSorting__fieldList::-webkit-scrollbar { width: 16px; height: 16px; } .euiDataGridColumnSorting__fieldList::-webkit-scrollbar-thumb { background-color: rgba(105, 112, 125, 0.5); background-clip: content-box; border-radius: 16px; border: 6px solid transparent; } .euiDataGridColumnSorting__fieldList::-webkit-scrollbar-corner, .euiDataGridColumnSorting__fieldList::-webkit-scrollbar-track { background-color: transparent; } .euiDataGridColumnSorting__fieldList:focus { outline: none; /* 1 */ } .euiDataGridColumnSorting__fieldList[tabindex="0"]:focus:focus-visible { outline-style: auto; /* 2 */ } .euiDataGridColumnSorting__field { display: block; padding: 4px 8px; width: 100%; outline-offset: -2px; } .euiDataGridColumnSorting__field:hover { cursor: pointer; text-decoration: underline; } .euiDataGridColumnSorting__field:focus { cursor: pointer; text-decoration: underline; background-color: rgba(0, 119, 204, 0.1); } .euiDataGridColumnSorting__field:disabled { cursor: not-allowed; text-decoration: none; color: #ABB4C4; } .euiDataGridColumnSorting__name { padding-right: 24px; } @media only screen and (max-width: 574px) { .euiDataGridColumnSorting__name { padding-right: 4px; } } @media only screen and (min-width: 575px) and (max-width: 767px) { .euiDataGridColumnSorting__name { padding-right: 4px; } } .euiDataGridColumnSorting__order { min-width: 200px; } @media only screen and (max-width: 574px) { .euiDataGridColumnSorting__order { min-width: unset; } } @media only screen and (min-width: 575px) and (max-width: 767px) { .euiDataGridColumnSorting__order { min-width: unset; } } .euiDataGridColumnSorting__order .euiButtonGroup__buttons { border: none; } .euiDataGridColumnSorting__order .euiButtonGroupButton { font-size: 12px; } .euiDataGrid__displayPopoverPanel { width: 416px; } .euiDataGrid__keyboardShortcuts { display: block; max-inline-size: 400px; max-block-size: 80vh; overflow-y: auto; overflow-block: auto; } .euiDataGrid__keyboardShortcuts .euiDescriptionList .euiDescriptionList__title { width: 25%; } .euiDataGrid__keyboardShortcuts .euiDescriptionList .euiDescriptionList__description { width: 75%; } .euiDraggable.euiDraggable--isDragging { z-index: 9000 !important; } .euiDraggable.euiDraggable--hasClone:not(.euiDraggable--isDragging) { -webkit-transform: none !important; transform: none !important; } .euiDraggable.euiDraggable--withoutDropAnimation { transition-duration: 0.001s !important; } .euiDraggable:focus > .euiDraggable__item, .euiDraggable.euiDraggable--hasCustomDragHandle > .euiDraggable__item [data-react-beautiful-dnd-drag-handle]:focus { outline: 2px solid currentColor; } .euiDraggable:focus > .euiDraggable__item:focus-visible, .euiDraggable.euiDraggable--hasCustomDragHandle > .euiDraggable__item [data-react-beautiful-dnd-drag-handle]:focus:focus-visible { outline-style: auto; } .euiDraggable:focus > .euiDraggable__item:not(:focus-visible), .euiDraggable.euiDraggable--hasCustomDragHandle > .euiDraggable__item [data-react-beautiful-dnd-drag-handle]:focus:not(:focus-visible) { outline: none; } .euiDraggable .euiDraggable__item.euiDraggable__item--isDisabled { cursor: not-allowed; } .euiDraggable--s { padding: 2px; } .euiDraggable--m { padding: 4px; } .euiDraggable--l { padding: 8px; } .euiDroppable { transition: background-color 500ms ease; } .euiDroppable.euiDroppable--isDraggingType:not(.euiDroppable--isDisabled) { background-color: rgba(0, 191, 179, 0.1); } .euiDroppable.euiDroppable--isDraggingType:not(.euiDroppable--isDisabled).euiDroppable--isDraggingOver { background-color: rgba(0, 191, 179, 0.25); } .euiDroppable .euiDroppable__placeholder.euiDroppable__placeholder--isHidden { display: none !important; } .euiDroppable--withPanel { -webkit-flex-grow: 1; flex-grow: 1; } .euiDroppable--withPanel.euiDroppable--withPanel--flexGrowZero { -webkit-flex-grow: 0; flex-grow: 0; } .euiDroppable--withPanel.euiDroppable--withPanel--hasShadow { box-shadow: 0 0.9px 4px -1px rgba(0, 0, 0, 0.08), 0 2.6px 8px -1px rgba(0, 0, 0, 0.06), 0 5.7px 12px -1px rgba(0, 0, 0, 0.05), 0 15px 15px -1px rgba(0, 0, 0, 0.04); } .euiDroppable--withPanel.euiDroppable--withPanel--hasBorder { border: 1px solid #D3DAE6; box-shadow: none; } .euiDroppable--withPanel.euiDroppable--withPanel--isClickable { transition: all 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); } .euiDroppable--withPanel.euiDroppable--withPanel--isClickable:enabled { display: block; width: 100%; text-align: left; } .euiDroppable--withPanel.euiDroppable--withPanel--isClickable:hover, .euiDroppable--withPanel.euiDroppable--withPanel--isClickable:focus { box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1), 0 3.6px 13px rgba(0, 0, 0, 0.07), 0 8.4px 23px rgba(0, 0, 0, 0.06), 0 23px 35px rgba(0, 0, 0, 0.05); -webkit-transform: translateY(-2px); transform: translateY(-2px); cursor: pointer; } .euiDroppable--withPanel.euiDroppable--withPanel--borderRadiusNone { border-radius: 0; } .euiDroppable--withPanel.euiDroppable--withPanel--borderRadiusMedium { border-radius: 6px; } .euiDroppable--withPanel.euiDroppable--withPanel--transparent { background-color: transparent; } .euiDroppable--withPanel.euiDroppable--withPanel--plain { background-color: #FFF; } .euiDroppable--withPanel.euiDroppable--withPanel--subdued { background-color: #fafbfd; } .euiDroppable--withPanel.euiDroppable--withPanel--accent { background-color: #feedf5; } .euiDroppable--withPanel.euiDroppable--withPanel--primary { background-color: #e6f1fa; } .euiDroppable--withPanel.euiDroppable--withPanel--success { background-color: #e6f9f7; } .euiDroppable--withPanel.euiDroppable--withPanel--warning { background-color: #fff9e8; } .euiDroppable--withPanel.euiDroppable--withPanel--danger { background-color: #f8e9e9; } .euiDroppable--withPanel { box-shadow: 0 0.9px 4px -1px rgba(0, 0, 0, 0.08), 0 2.6px 8px -1px rgba(0, 0, 0, 0.06), 0 5.7px 12px -1px rgba(0, 0, 0, 0.05), 0 15px 15px -1px rgba(0, 0, 0, 0.04); border-radius: 6px; } .euiDroppable--noGrow { -webkit-flex-grow: 0; flex-grow: 0; } .euiDroppable--grow { -webkit-flex-grow: 1; flex-grow: 1; } .euiDroppable--s { padding: 2px; } .euiDroppable--m { padding: 4px; } .euiDroppable--l { padding: 8px; } .euiEmptyPrompt { text-align: center; margin: auto; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .euiEmptyPrompt { max-width: -webkit-max-content; max-width: -moz-max-content; max-width: max-content; } } @media only screen and (min-width: 1200px) { .euiEmptyPrompt { max-width: -webkit-max-content; max-width: -moz-max-content; max-width: max-content; } } .euiEmptyPrompt .euiEmptyPrompt__icon > * { -webkit-flex-shrink: 1; flex-shrink: 1; max-width: 25.7142857143rem; } .euiEmptyPrompt.euiPanel--transparent .euiEmptyPrompt__footer { background-color: #fafbfd; } .euiEmptyPrompt.euiPanel--transparent:not(.euiPanel--hasBorder) .euiEmptyPrompt__footer { border-radius: 6px; } .euiEmptyPrompt.euiPanel--transparent.euiPanel--hasBorder .euiEmptyPrompt__footer { border-radius: 0 0 6px 6px; } .euiEmptyPrompt.euiPanel--plain .euiEmptyPrompt__footer { background-color: #fafbfd; border-radius: 0 0 6px 6px; } .euiEmptyPrompt.euiPanel--subdued .euiEmptyPrompt__footer { border-top: 1px solid #D3DAE6; border-radius: 0 0 6px 6px; } .euiEmptyPrompt.euiPanel--accent .euiEmptyPrompt__footer { border-top: 1px solid #fbbdda; border-radius: 0 0 6px 6px; } .euiEmptyPrompt.euiPanel--primary .euiEmptyPrompt__footer { border-top: 1px solid #bcd9f2; border-radius: 0 0 6px 6px; } .euiEmptyPrompt.euiPanel--success .euiEmptyPrompt__footer { border-top: 1px solid #bdefea; border-radius: 0 0 6px 6px; } .euiEmptyPrompt.euiPanel--warning .euiEmptyPrompt__footer { border-top: 1px solid #ffecb5; border-radius: 0 0 6px 6px; } .euiEmptyPrompt.euiPanel--danger .euiEmptyPrompt__footer { border-top: 1px solid #ecc2c2; border-radius: 0 0 6px 6px; } .euiEmptyPrompt--vertical .euiEmptyPrompt__main { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: center; justify-content: center; } .euiEmptyPrompt--vertical .euiEmptyPrompt__contentInner { max-width: 36em; margin: auto; } .euiEmptyPrompt--vertical .euiEmptyPrompt__icon { margin-bottom: 16px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .euiEmptyPrompt--horizontal { -webkit-justify-content: flex-start; justify-content: flex-start; text-align: left; } } @media only screen and (min-width: 1200px) { .euiEmptyPrompt--horizontal { -webkit-justify-content: flex-start; justify-content: flex-start; text-align: left; } } .euiEmptyPrompt--horizontal .euiEmptyPrompt__main { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .euiEmptyPrompt--horizontal .euiEmptyPrompt__main { -webkit-flex-direction: row-reverse; flex-direction: row-reverse; } } @media only screen and (min-width: 1200px) { .euiEmptyPrompt--horizontal .euiEmptyPrompt__main { -webkit-flex-direction: row-reverse; flex-direction: row-reverse; } } .euiEmptyPrompt--horizontal .euiEmptyPrompt__icon { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .euiEmptyPrompt--horizontal .euiEmptyPrompt__icon { min-width: 40%; max-width: 50%; } } @media only screen and (min-width: 1200px) { .euiEmptyPrompt--horizontal .euiEmptyPrompt__icon { min-width: 40%; max-width: 50%; } } .euiEmptyPrompt--horizontal .euiEmptyPrompt__content { max-width: 36em; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .euiEmptyPrompt--horizontal .euiEmptyPrompt__content { padding: 24px 0; } } @media only screen and (min-width: 1200px) { .euiEmptyPrompt--horizontal .euiEmptyPrompt__content { padding: 24px 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .euiEmptyPrompt--horizontal .euiEmptyPrompt__actions { -webkit-justify-content: flex-start; justify-content: flex-start; } } @media only screen and (min-width: 1200px) { .euiEmptyPrompt--horizontal .euiEmptyPrompt__actions { -webkit-justify-content: flex-start; justify-content: flex-start; } } .euiEmptyPrompt--paddingSmall .euiEmptyPrompt__main, .euiEmptyPrompt--paddingSmall .euiEmptyPrompt__footer { padding: 8px; } .euiEmptyPrompt--paddingSmall.euiEmptyPrompt--horizontal .euiEmptyPrompt__main { gap: 8px; } .euiEmptyPrompt--paddingMedium .euiEmptyPrompt__main, .euiEmptyPrompt--paddingMedium .euiEmptyPrompt__footer { padding: 16px; } .euiEmptyPrompt--paddingMedium.euiEmptyPrompt--horizontal .euiEmptyPrompt__main { gap: 16px; } .euiEmptyPrompt--paddingLarge .euiEmptyPrompt__main, .euiEmptyPrompt--paddingLarge .euiEmptyPrompt__footer { padding: 24px; } .euiEmptyPrompt--paddingLarge.euiEmptyPrompt--horizontal .euiEmptyPrompt__main { gap: 24px; } /** * 1. Float above the visual radio and match its dimension, so that when users try to click it * they actually click this input. */ .euiCheckbox { position: relative; } .euiCheckbox .euiCheckbox__input { width: 16px; height: 16px; top: 3px; cursor: pointer; position: absolute; /* 1 */ opacity: 0; /* 1 */ z-index: 1; /* 1 */ } .euiCheckbox .euiCheckbox__input ~ .euiCheckbox__label { display: inline-block; padding-left: 24px; line-height: 24px; font-size: 14px; position: relative; z-index: 2; cursor: pointer; } .euiCheckbox .euiCheckbox__input + .euiCheckbox__square { padding: 7px; border: 1px solid #939496; background: #FFF no-repeat center; border-radius: 4px; transition: background-color 150ms ease-in, border-color 150ms ease-in; display: inline-block; position: absolute; left: 0; top: 3px; } .euiCheckbox .euiCheckbox__input:checked + .euiCheckbox__square { border-color: #07C; background-color: #07C; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M.375 2.625L3.375 5.625M3.375 5.625L8.625.375' fill='none' fill-rule='evenodd' stroke='rgb%28255, 255, 255%29' stroke-linecap='round' stroke-width='1.5' transform='translate(.5 1)'/%3E%3C/svg%3E"); } .euiCheckbox .euiCheckbox__input:indeterminate + .euiCheckbox__square { border-color: #07C; background-color: #07C; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6'%3E%3Crect width='6' height='6' fill='rgb%28255, 255, 255%29' fill-rule='evenodd'/%3E%3C/svg%3E"); } .euiCheckbox .euiCheckbox__input[disabled] { cursor: not-allowed !important; } .euiCheckbox .euiCheckbox__input[disabled] ~ .euiCheckbox__label { color: #98A2B3; cursor: not-allowed !important; } .euiCheckbox .euiCheckbox__input[disabled] + .euiCheckbox__square { border-color: #D3DAE6; background-color: #D3DAE6; box-shadow: none; } .euiCheckbox .euiCheckbox__input:checked[disabled] + .euiCheckbox__square { border-color: #D3DAE6; background-color: #D3DAE6; box-shadow: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M.375 2.625L3.375 5.625M3.375 5.625L8.625.375' fill='none' fill-rule='evenodd' stroke='rgb%2894, 100, 111%29' stroke-linecap='round' stroke-width='1.5' transform='translate(.5 1)'/%3E%3C/svg%3E"); } .euiCheckbox .euiCheckbox__input:indeterminate[disabled] + .euiCheckbox__square { border-color: #D3DAE6; background-color: #D3DAE6; box-shadow: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6'%3E%3Crect width='6' height='6' fill='rgb%2894, 100, 111%29' fill-rule='evenodd'/%3E%3C/svg%3E"); } .euiCheckbox .euiCheckbox__input:focus + .euiCheckbox__square { outline: 2px solid currentColor; outline-offset: 2px; border-color: #07C; } .euiCheckbox .euiCheckbox__input:focus + .euiCheckbox__square:focus-visible { outline-style: auto; } .euiCheckbox .euiCheckbox__input:focus + .euiCheckbox__square:not(:focus-visible) { outline: none; } .euiCheckbox.euiCheckbox--inList, .euiCheckbox.euiCheckbox--noLabel { min-height: 16px; min-width: 16px; } .euiCheckbox.euiCheckbox--inList .euiCheckbox__input, .euiCheckbox.euiCheckbox--inList .euiCheckbox__square, .euiCheckbox.euiCheckbox--noLabel .euiCheckbox__input, .euiCheckbox.euiCheckbox--noLabel .euiCheckbox__square { top: 0; } .euiCheckbox.euiCheckbox--inList .euiCheckbox__input, .euiCheckbox.euiCheckbox--noLabel .euiCheckbox__input { margin: 0; } .euiCheckboxGroup__item + .euiCheckboxGroup__item { margin-top: 4px; } .euiCheckboxGroup__item + .euiCheckboxGroup__item.euiCheckbox--compressed { margin-top: 0; } .euiDescribedFormGroup { max-width: 800px; } .euiDescribedFormGroup + * { margin-top: 24px; } .euiDescribedFormGroup.euiDescribedFormGroup--fullWidth { max-width: 100%; } .euiDescribedFormGroup .euiDescribedFormGroup__description { padding-top: 8px; } .euiDescribedFormGroup .euiDescribedFormGroup__fields { min-width: 0; } .euiDescribedFormGroup .euiDescribedFormGroup__fields > .euiFormRow--hasEmptyLabelSpace:first-child, .euiDescribedFormGroup .euiDescribedFormGroup__fields > .euiFormRow:first-child:not(.euiFormRow--hasLabel) { margin-top: 0; } .euiDescribedFormGroup .euiDescribedFormGroup__fields > .euiFormRow--hasEmptyLabelSpace:first-child::before, .euiDescribedFormGroup .euiDescribedFormGroup__fields > .euiFormRow:first-child:not(.euiFormRow--hasLabel)::before { content: ""; } .euiDescribedFormGroup__descriptionColumn { min-width: min(20rem, 50%); } .euiFieldNumber { max-width: 400px; width: 100%; height: 40px; background-color: #fbfcfd; background-repeat: no-repeat; background-size: 0% 100%; box-shadow: 0 0 transparent, inset 0 0 0 1px rgba(17, 42, 134, 0.1); transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in; 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; letter-spacing: normal; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-kerning: normal; font-kerning: normal; font-size: 14px; color: #343741; border: none; border-radius: 6px; padding: 12px; } .euiFieldNumber--fullWidth { max-width: 100%; } .euiFieldNumber--compressed { height: 32px; } .euiFieldNumber--inGroup { height: 100%; } @supports (-moz-appearance: none) { .euiFieldNumber { transition-property: box-shadow, background-image, background-size; } } .euiFieldNumber::-webkit-input-placeholder { color: #69707D; opacity: 1; } .euiFieldNumber::-moz-placeholder { color: #69707D; opacity: 1; } .euiFieldNumber::placeholder { color: #69707D; opacity: 1; } .euiFieldNumber:invalid { background-image: linear-gradient(to top, #BD271E, #BD271E 2px, transparent 2px, transparent 100%); background-size: 100%; } .euiFieldNumber:focus { background-color: white; background-image: linear-gradient(to top, #07C, #07C 2px, transparent 2px, transparent 100%); background-size: 100% 100%; outline: none; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); } .euiFieldNumber:disabled { color: #98A2B3; -webkit-text-fill-color: #98A2B3; cursor: not-allowed; background: #eef2f7; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); } .euiFieldNumber:disabled::-webkit-input-placeholder { color: #98A2B3; opacity: 1; } .euiFieldNumber:disabled::-moz-placeholder { color: #98A2B3; opacity: 1; } .euiFieldNumber:disabled::placeholder { color: #98A2B3; opacity: 1; } .euiFieldNumber[readOnly] { cursor: default; color: #343741; -webkit-text-fill-color: #343741; background: #FFF; border-color: transparent; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); } .euiFieldNumber:-webkit-autofill { -webkit-text-fill-color: #343741; } .euiFieldNumber:-webkit-autofill ~ .euiFormControlLayoutIcons { color: #343741; } .euiFieldNumber--compressed { background-color: #fbfcfd; background-repeat: no-repeat; background-size: 0% 100%; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in; padding: 8px; border-radius: 4px; } @supports (-moz-appearance: none) { .euiFieldNumber--compressed { transition-property: box-shadow, background-image, background-size; } } .euiFieldNumber--compressed:invalid { background-image: linear-gradient(to top, #BD271E, #BD271E 2px, transparent 2px, transparent 100%); background-size: 100%; } .euiFieldNumber--compressed:focus { background-color: white; background-image: linear-gradient(to top, #07C, #07C 2px, transparent 2px, transparent 100%); background-size: 100% 100%; outline: none; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); } .euiFieldNumber--compressed:disabled { color: #98A2B3; -webkit-text-fill-color: #98A2B3; cursor: not-allowed; background: #eef2f7; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); } .euiFieldNumber--compressed:disabled::-webkit-input-placeholder { color: #98A2B3; opacity: 1; } .euiFieldNumber--compressed:disabled::-moz-placeholder { color: #98A2B3; opacity: 1; } .euiFieldNumber--compressed:disabled::placeholder { color: #98A2B3; opacity: 1; } .euiFieldNumber--compressed[readOnly] { cursor: default; color: #343741; -webkit-text-fill-color: #343741; background: #FFF; border-color: transparent; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); } .euiFieldNumber--inGroup { box-shadow: none !important; border-radius: 0; } .euiFieldNumber--withIcon { padding-left: 40px; } .euiFieldNumber--withIcon.euiFieldNumber--compressed { padding-left: 32px; } .euiFieldPassword { max-width: 400px; width: 100%; height: 40px; background-color: #fbfcfd; background-repeat: no-repeat; background-size: 0% 100%; box-shadow: 0 0 transparent, inset 0 0 0 1px rgba(17, 42, 134, 0.1); transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in; 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; letter-spacing: normal; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-kerning: normal; font-kerning: normal; font-size: 14px; color: #343741; border: none; border-radius: 6px; padding: 12px; padding-left: 40px; } .euiFieldPassword--fullWidth { max-width: 100%; } .euiFieldPassword--compressed { height: 32px; } .euiFieldPassword--inGroup { height: 100%; } @supports (-moz-appearance: none) { .euiFieldPassword { transition-property: box-shadow, background-image, background-size; } } .euiFieldPassword::-webkit-input-placeholder { color: #69707D; opacity: 1; } .euiFieldPassword::-moz-placeholder { color: #69707D; opacity: 1; } .euiFieldPassword::placeholder { color: #69707D; opacity: 1; } .euiFieldPassword:invalid { background-image: linear-gradient(to top, #BD271E, #BD271E 2px, transparent 2px, transparent 100%); background-size: 100%; } .euiFieldPassword:focus { background-color: white; background-image: linear-gradient(to top, #07C, #07C 2px, transparent 2px, transparent 100%); background-size: 100% 100%; outline: none; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); } .euiFieldPassword:disabled { color: #98A2B3; -webkit-text-fill-color: #98A2B3; cursor: not-allowed; background: #eef2f7; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); } .euiFieldPassword:disabled::-webkit-input-placeholder { color: #98A2B3; opacity: 1; } .euiFieldPassword:disabled::-moz-placeholder { color: #98A2B3; opacity: 1; } .euiFieldPassword:disabled::placeholder { color: #98A2B3; opacity: 1; } .euiFieldPassword[readOnly] { cursor: default; color: #343741; -webkit-text-fill-color: #343741; background: #FFF; border-color: transparent; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); } .euiFieldPassword:-webkit-autofill { -webkit-text-fill-color: #343741; } .euiFieldPassword:-webkit-autofill ~ .euiFormControlLayoutIcons { color: #343741; } .euiFieldPassword--compressed { background-color: #fbfcfd; background-repeat: no-repeat; background-size: 0% 100%; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in; padding: 8px; border-radius: 4px; } @supports (-moz-appearance: none) { .euiFieldPassword--compressed { transition-property: box-shadow, background-image, background-size; } } .euiFieldPassword--compressed:invalid { background-image: linear-gradient(to top, #BD271E, #BD271E 2px, transparent 2px, transparent 100%); background-size: 100%; } .euiFieldPassword--compressed:focus { background-color: white; background-image: linear-gradient(to top, #07C, #07C 2px, transparent 2px, transparent 100%); background-size: 100% 100%; outline: none; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); } .euiFieldPassword--compressed:disabled { color: #98A2B3; -webkit-text-fill-color: #98A2B3; cursor: not-allowed; background: #eef2f7; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); } .euiFieldPassword--compressed:disabled::-webkit-input-placeholder { color: #98A2B3; opacity: 1; } .euiFieldPassword--compressed:disabled::-moz-placeholder { color: #98A2B3; opacity: 1; } .euiFieldPassword--compressed:disabled::placeholder { color: #98A2B3; opacity: 1; } .euiFieldPassword--compressed[readOnly] { cursor: default; color: #343741; -webkit-text-fill-color: #343741; background: #FFF; border-color: transparent; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); } .euiFieldPassword--inGroup { box-shadow: none !important; border-radius: 0; } .euiFieldPassword.euiFieldPassword--compressed { padding-left: 32px; } .euiFieldPassword--withToggle::-ms-reveal { display: none; } /* * 1. Fix for Safari to ensure that it renders like a normal text input * and doesn't add extra spacing around text */ .euiFieldSearch { max-width: 400px; width: 100%; height: 40px; background-color: #fbfcfd; background-repeat: no-repeat; background-size: 0% 100%; box-shadow: 0 0 transparent, inset 0 0 0 1px rgba(17, 42, 134, 0.1); transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in; 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; letter-spacing: normal; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-kerning: normal; font-kerning: normal; font-size: 14px; color: #343741; border: none; border-radius: 6px; padding: 12px; padding-left: 40px; -webkit-appearance: textfield; /* 1 */ } .euiFieldSearch--fullWidth { max-width: 100%; } .euiFieldSearch--compressed { height: 32px; } .euiFieldSearch--inGroup { height: 100%; } @supports (-moz-appearance: none) { .euiFieldSearch { transition-property: box-shadow, background-image, background-size; } } .euiFieldSearch::-webkit-input-placeholder { color: #69707D; opacity: 1; } .euiFieldSearch::-moz-placeholder { color: #69707D; opacity: 1; } .euiFieldSearch::placeholder { color: #69707D; opacity: 1; } .euiFieldSearch:invalid { background-image: linear-gradient(to top, #BD271E, #BD271E 2px, transparent 2px, transparent 100%); background-size: 100%; } .euiFieldSearch:focus { background-color: white; background-image: linear-gradient(to top, #07C, #07C 2px, transparent 2px, transparent 100%); background-size: 100% 100%; outline: none; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); } .euiFieldSearch:disabled { color: #98A2B3; -webkit-text-fill-color: #98A2B3; cursor: not-allowed; background: #eef2f7; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); } .euiFieldSearch:disabled::-webkit-input-placeholder { color: #98A2B3; opacity: 1; } .euiFieldSearch:disabled::-moz-placeholder { color: #98A2B3; opacity: 1; } .euiFieldSearch:disabled::placeholder { color: #98A2B3; opacity: 1; } .euiFieldSearch[readOnly] { cursor: default; color: #343741; -webkit-text-fill-color: #343741; background: #FFF; border-color: transparent; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); } .euiFieldSearch:-webkit-autofill { -webkit-text-fill-color: #343741; } .euiFieldSearch:-webkit-autofill ~ .euiFormControlLayoutIcons { color: #343741; } .euiFieldSearch--compressed { background-color: #fbfcfd; background-repeat: no-repeat; background-size: 0% 100%; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in; padding: 8px; border-radius: 4px; } @supports (-moz-appearance: none) { .euiFieldSearch--compressed { transition-property: box-shadow, background-image, background-size; } } .euiFieldSearch--compressed:invalid { background-image: linear-gradient(to top, #BD271E, #BD271E 2px, transparent 2px, transparent 100%); background-size: 100%; } .euiFieldSearch--compressed:focus { background-color: white; background-image: linear-gradient(to top, #07C, #07C 2px, transparent 2px, transparent 100%); background-size: 100% 100%; outline: none; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); } .euiFieldSearch--compressed:disabled { color: #98A2B3; -webkit-text-fill-color: #98A2B3; cursor: not-allowed; background: #eef2f7; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); } .euiFieldSearch--compressed:disabled::-webkit-input-placeholder { color: #98A2B3; opacity: 1; } .euiFieldSearch--compressed:disabled::-moz-placeholder { color: #98A2B3; opacity: 1; } .euiFieldSearch--compressed:disabled::placeholder { color: #98A2B3; opacity: 1; } .euiFieldSearch--compressed[readOnly] { cursor: default; color: #343741; -webkit-text-fill-color: #343741; background: #FFF; border-color: transparent; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); } .euiFieldSearch--inGroup { box-shadow: none !important; border-radius: 0; } .euiFieldSearch-isLoading { padding-right: 40px; } .euiFieldSearch-isLoading.euiFieldSearch--compressed { padding-right: 32px; } .euiFieldSearch::-webkit-search-decoration, .euiFieldSearch::-webkit-search-cancel-button { -webkit-appearance: none; /* 1, 2 */ } .euiFieldSearch--compressed { padding-left: 32px; } .euiFieldText { max-width: 400px; width: 100%; height: 40px; background-color: #fbfcfd; background-repeat: no-repeat; background-size: 0% 100%; box-shadow: 0 0 transparent, inset 0 0 0 1px rgba(17, 42, 134, 0.1); transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in; 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; letter-spacing: normal; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-kerning: normal; font-kerning: normal; font-size: 14px; color: #343741; border: none; border-radius: 6px; padding: 12px; } .euiFieldText--fullWidth { max-width: 100%; } .euiFieldText--compressed { height: 32px; } .euiFieldText--inGroup { height: 100%; } @supports (-moz-appearance: none) { .euiFieldText { transition-property: box-shadow, background-image, background-size; } } .euiFieldText::-webkit-input-placeholder { color: #69707D; opacity: 1; } .euiFieldText::-moz-placeholder { color: #69707D; opacity: 1; } .euiFieldText::placeholder { color: #69707D; opacity: 1; } .euiFieldText:invalid { background-image: linear-gradient(to top, #BD271E, #BD271E 2px, transparent 2px, transparent 100%); background-size: 100%; } .euiFieldText:focus { background-color: white; background-image: linear-gradient(to top, #07C, #07C 2px, transparent 2px, transparent 100%); background-size: 100% 100%; outline: none; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); } .euiFieldText:disabled { color: #98A2B3; -webkit-text-fill-color: #98A2B3; cursor: not-allowed; background: #eef2f7; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); } .euiFieldText:disabled::-webkit-input-placeholder { color: #98A2B3; opacity: 1; } .euiFieldText:disabled::-moz-placeholder { color: #98A2B3; opacity: 1; } .euiFieldText:disabled::placeholder { color: #98A2B3; opacity: 1; } .euiFieldText[readOnly] { cursor: default; color: #343741; -webkit-text-fill-color: #343741; background: #FFF; border-color: transparent; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); } .euiFieldText:-webkit-autofill { -webkit-text-fill-color: #343741; } .euiFieldText:-webkit-autofill ~ .euiFormControlLayoutIcons { color: #343741; } .euiFieldText--compressed { background-color: #fbfcfd; background-repeat: no-repeat; background-size: 0% 100%; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in; padding: 8px; border-radius: 4px; } @supports (-moz-appearance: none) { .euiFieldText--compressed { transition-property: box-shadow, background-image, background-size; } } .euiFieldText--compressed:invalid { background-image: linear-gradient(to top, #BD271E, #BD271E 2px, transparent 2px, transparent 100%); background-size: 100%; } .euiFieldText--compressed:focus { background-color: white; background-image: linear-gradient(to top, #07C, #07C 2px, transparent 2px, transparent 100%); background-size: 100% 100%; outline: none; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); } .euiFieldText--compressed:disabled { color: #98A2B3; -webkit-text-fill-color: #98A2B3; cursor: not-allowed; background: #eef2f7; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); } .euiFieldText--compressed:disabled::-webkit-input-placeholder { color: #98A2B3; opacity: 1; } .euiFieldText--compressed:disabled::-moz-placeholder { color: #98A2B3; opacity: 1; } .euiFieldText--compressed:disabled::placeholder { color: #98A2B3; opacity: 1; } .euiFieldText--compressed[readOnly] { cursor: default; color: #343741; -webkit-text-fill-color: #343741; background: #FFF; border-color: transparent; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); } .euiFieldText--inGroup { box-shadow: none !important; border-radius: 0; } .euiFieldText--withIcon { padding-left: 40px; } .euiFieldText--withIcon.euiFieldText--compressed { padding-left: 32px; } /** * REMEMBER: --large modifiers must come last to override --compressed */ .euiFilePicker { max-width: 400px; width: 100%; height: 40px; position: relative; } .euiFilePicker--fullWidth { max-width: 100%; } .euiFilePicker--compressed { height: 32px; } .euiFilePicker--inGroup { height: 100%; } .euiFilePicker.euiFilePicker--large { border-radius: 6px; overflow: hidden; height: auto; } .euiFilePicker.euiFilePicker--large.euiFilePicker--compressed { border-radius: 4px; } .euiFilePicker__input { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; overflow: hidden; } .euiFilePicker__input:hover { cursor: pointer; } .euiFilePicker__input:hover:disabled { cursor: not-allowed; } .euiFilePicker__input:disabled { opacity: 0; } .euiFilePicker__input:disabled ~ .euiFilePicker__prompt { color: #98A2B3; } .euiFilePicker__icon { position: absolute; left: 12px; top: 12px; transition: -webkit-transform 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); transition: transform 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); transition: transform 150ms cubic-bezier(0.694, 0.0482, 0.335, 1), -webkit-transform 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); } .euiFilePicker--compressed .euiFilePicker__icon { top: 8px; left: 8px; } .euiFilePicker--large .euiFilePicker__icon { position: static; margin-bottom: 16px; } /** * 1. Don't block the user from dropping files onto the filepicker. * 2. Ensure space for import icon, loading spinner, and clear button (only if it has files) * 4. Static height so that it doesn't shift its surrounding contents around */ .euiFilePicker__prompt { padding-left: 40px; /* 2 */ height: 40px; padding-top: 12px; padding-right: 12px; padding-bottom: 12px; pointer-events: none; /* 1 */ border: 2px dashed #D3DAE6; border-radius: 6px; transition: border-color 150ms ease-in, background-color 150ms ease-in; } .euiFilePicker--compressed .euiFilePicker__prompt { background-color: #fbfcfd; background-repeat: no-repeat; background-size: 0% 100%; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in; padding: 8px; border-radius: 4px; padding-left: 32px; /* 2 */ height: 32px; border-radius: 4px; box-shadow: none; } @supports (-moz-appearance: none) { .euiFilePicker--compressed .euiFilePicker__prompt { transition-property: box-shadow, background-image, background-size; } } .euiFilePicker--large .euiFilePicker__prompt { height: 128px; /* 4 */ padding: 0 24px; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; } .euiFilePicker--large.euiFilePicker--compressed .euiFilePicker__prompt { height: 104px; /* 4 */ } .euiFilePicker-isInvalid:not(.euiFilePicker__showDrop) .euiFilePicker__input:not(:disabled):not(:focus) + .euiFilePicker__prompt { border-color: #BD271E; } .euiFilePicker__promptText { font-size: 14px; font-size: 1rem; line-height: 1.7142857143rem; max-width: 100%; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; line-height: 16px; } .euiFilePicker:not(.euiFilePicker--large):not(.euiFilePicker-hasFiles) .euiFilePicker__promptText { color: #0071c2; } .euiFilePicker:not(.euiFilePicker--large) .euiFilePicker__promptText { margin-top: -2px; } .euiFilePicker__clearButton, .euiFilePicker__loadingSpinner { position: absolute; right: 12px; top: 12px; } .euiFilePicker--compressed .euiFilePicker__clearButton, .euiFilePicker--compressed .euiFilePicker__loadingSpinner { top: 8px; } /** * 1. Undo the pointer-events: none applied to the enclosing prompt. */ .euiFilePicker__clearButton { pointer-events: auto; /* 1 */ } .euiFilePicker:not(.euiFilePicker--large) .euiFilePicker__clearButton { width: 16px; height: 16px; pointer-events: all; background-color: #98A2B3; border-radius: 16px; line-height: 0; } .euiFilePicker:not(.euiFilePicker--large) .euiFilePicker__clearButton:focus { outline: 2px solid currentColor; } .euiFilePicker:not(.euiFilePicker--large) .euiFilePicker__clearButton:focus:focus-visible { outline-style: auto; } .euiFilePicker:not(.euiFilePicker--large) .euiFilePicker__clearButton:focus:not(:focus-visible) { outline: none; } .euiFilePicker:not(.euiFilePicker--large) .euiFilePicker__clearButton .euiFilePicker__clearIcon { width: 8px; height: 8px; fill: #FFF; stroke: #FFF; stroke-width: 2px; } .euiFilePicker--large .euiFilePicker__clearButton { position: relative; top: 0; right: 0; } .euiFilePicker__showDrop .euiFilePicker__prompt, .euiFilePicker__input:focus + .euiFilePicker__prompt { border-color: #07C; } .euiFilePicker__input:disabled + .euiFilePicker__prompt { color: #98A2B3; -webkit-text-fill-color: #98A2B3; cursor: not-allowed; background: #eef2f7; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); box-shadow: none; } .euiFilePicker__input:disabled + .euiFilePicker__prompt::-webkit-input-placeholder { color: #98A2B3; opacity: 1; } .euiFilePicker__input:disabled + .euiFilePicker__prompt::-moz-placeholder { color: #98A2B3; opacity: 1; } .euiFilePicker__input:disabled + .euiFilePicker__prompt::placeholder { color: #98A2B3; opacity: 1; } .euiFilePicker:not(.euiFilePicker--large).euiFilePicker-isLoading .euiFilePicker__prompt, .euiFilePicker:not(.euiFilePicker--large).euiFilePicker-hasFiles .euiFilePicker__prompt { padding-right: 40px; /* 2 */ } .euiFilePicker-hasFiles .euiFilePicker__promptText { color: #343741; } .euiFilePicker--large .euiFilePicker__input:hover:not(:disabled) + .euiFilePicker__prompt .euiFilePicker__promptText, .euiFilePicker--large .euiFilePicker__input:focus + .euiFilePicker__prompt .euiFilePicker__promptText { text-decoration: underline; } .euiFilePicker--large .euiFilePicker__input:hover:not(:disabled) + .euiFilePicker__prompt .euiFilePicker__icon, .euiFilePicker--large .euiFilePicker__input:focus + .euiFilePicker__prompt .euiFilePicker__icon { -webkit-transform: scale(1.1); transform: scale(1.1); } .euiFilePicker--large.euiFilePicker__showDrop .euiFilePicker__prompt .euiFilePicker__promptText { text-decoration: underline; } .euiFilePicker--large.euiFilePicker__showDrop .euiFilePicker__prompt .euiFilePicker__icon { -webkit-transform: scale(1.1); transform: scale(1.1); } .euiFilePicker--large.euiFilePicker-hasFiles .euiFilePicker__promptText { font-weight: 700; } .euiForm__error { font-size: 14px; font-size: 1rem; line-height: 1.7142857143rem; list-style: disc; } .euiForm__errors { margin-bottom: 16px; } /** * 1. Ensure the descenders don't get cut off */ .euiSelect { max-width: 400px; width: 100%; height: 40px; background-color: #fbfcfd; background-repeat: no-repeat; background-size: 0% 100%; box-shadow: 0 0 transparent, inset 0 0 0 1px rgba(17, 42, 134, 0.1); transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in; 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; letter-spacing: normal; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-kerning: normal; font-kerning: normal; font-size: 14px; color: #343741; border: none; border-radius: 6px; padding: 12px; -webkit-appearance: none; -moz-appearance: none; appearance: none; line-height: 40px; /* 1 */ padding-top: 0; /* 1 */ padding-bottom: 0; /* 1 */ } .euiSelect--fullWidth { max-width: 100%; } .euiSelect--compressed { height: 32px; } .euiSelect--inGroup { height: 100%; } @supports (-moz-appearance: none) { .euiSelect { transition-property: box-shadow, background-image, background-size; } } .euiSelect::-webkit-input-placeholder { color: #69707D; opacity: 1; } .euiSelect::-moz-placeholder { color: #69707D; opacity: 1; } .euiSelect::placeholder { color: #69707D; opacity: 1; } .euiSelect:invalid { background-image: linear-gradient(to top, #BD271E, #BD271E 2px, transparent 2px, transparent 100%); background-size: 100%; } .euiSelect:focus { background-color: white; background-image: linear-gradient(to top, #07C, #07C 2px, transparent 2px, transparent 100%); background-size: 100% 100%; outline: none; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); } .euiSelect:disabled { color: #98A2B3; -webkit-text-fill-color: #98A2B3; cursor: not-allowed; background: #eef2f7; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); } .euiSelect:disabled::-webkit-input-placeholder { color: #98A2B3; opacity: 1; } .euiSelect:disabled::-moz-placeholder { color: #98A2B3; opacity: 1; } .euiSelect:disabled::placeholder { color: #98A2B3; opacity: 1; } .euiSelect[readOnly] { cursor: default; color: #343741; -webkit-text-fill-color: #343741; background: #FFF; border-color: transparent; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); } .euiSelect:-webkit-autofill { -webkit-text-fill-color: #343741; } .euiSelect:-webkit-autofill ~ .euiFormControlLayoutIcons { color: #343741; } .euiSelect--compressed { background-color: #fbfcfd; background-repeat: no-repeat; background-size: 0% 100%; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in; padding: 8px; border-radius: 4px; } @supports (-moz-appearance: none) { .euiSelect--compressed { transition-property: box-shadow, background-image, background-size; } } .euiSelect--compressed:invalid { background-image: linear-gradient(to top, #BD271E, #BD271E 2px, transparent 2px, transparent 100%); background-size: 100%; } .euiSelect--compressed:focus { background-color: white; background-image: linear-gradient(to top, #07C, #07C 2px, transparent 2px, transparent 100%); background-size: 100% 100%; outline: none; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); } .euiSelect--compressed:disabled { color: #98A2B3; -webkit-text-fill-color: #98A2B3; cursor: not-allowed; background: #eef2f7; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); } .euiSelect--compressed:disabled::-webkit-input-placeholder { color: #98A2B3; opacity: 1; } .euiSelect--compressed:disabled::-moz-placeholder { color: #98A2B3; opacity: 1; } .euiSelect--compressed:disabled::placeholder { color: #98A2B3; opacity: 1; } .euiSelect--compressed[readOnly] { cursor: default; color: #343741; -webkit-text-fill-color: #343741; background: #FFF; border-color: transparent; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); } .euiSelect--inGroup { box-shadow: none !important; border-radius: 0; } .euiSelect--compressed { line-height: 32px; /* 1 */ padding-top: 0; /* 1 */ padding-bottom: 0; /* 1 */ } .euiSelect--inGroup { line-height: 38px; /* 1 */ } .euiSelect--inGroup.euiSelect--compressed { line-height: 30px; /* 1 */ } .euiSelect::-ms-expand { display: none; } .euiSelect:focus::-ms-value { color: #343741; background: transparent; } .euiSelect:-moz-focusring { color: transparent; text-shadow: 0 0 0 #343741; } .euiSuperSelect__listbox { scrollbar-color: rgba(105, 112, 125, 0.5) transparent; scrollbar-width: thin; max-height: 300px; overflow: hidden; overflow-y: auto; } .euiSuperSelect__listbox::-webkit-scrollbar { width: 16px; height: 16px; } .euiSuperSelect__listbox::-webkit-scrollbar-thumb { background-color: rgba(105, 112, 125, 0.5); background-clip: content-box; border-radius: 16px; border: 6px solid transparent; } .euiSuperSelect__listbox::-webkit-scrollbar-corner, .euiSuperSelect__listbox::-webkit-scrollbar-track { background-color: transparent; } .euiSuperSelect__item { font-size: 14px; font-size: 1rem; line-height: 1.7142857143rem; padding: 8px; } .euiSuperSelect__item:hover { cursor: pointer; text-decoration: underline; } .euiSuperSelect__item:focus { cursor: pointer; text-decoration: underline; background-color: rgba(0, 119, 204, 0.1); } .euiSuperSelect__item:disabled { cursor: not-allowed; text-decoration: none; color: #ABB4C4; } .euiSuperSelect__item--hasDividers:not(:last-of-type) { border-bottom: 1px solid #D3DAE6; } /** * 1. Ensure the descenders don't get cut off * 2. Makes sure the height is correct when there's no selection */ .euiSuperSelectControl { max-width: 400px; width: 100%; height: 40px; background-color: #fbfcfd; background-repeat: no-repeat; background-size: 0% 100%; box-shadow: 0 0 transparent, inset 0 0 0 1px rgba(17, 42, 134, 0.1); transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in; 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; letter-spacing: normal; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-kerning: normal; font-kerning: normal; font-size: 14px; color: #343741; border: none; border-radius: 6px; padding: 12px; display: block; /* 2 */ text-align: left; line-height: 40px; /* 1 */ padding-top: 0; /* 1 */ padding-bottom: 0; /* 1 */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .euiSuperSelectControl--fullWidth { max-width: 100%; } .euiSuperSelectControl--compressed { height: 32px; } .euiSuperSelectControl--inGroup { height: 100%; } @supports (-moz-appearance: none) { .euiSuperSelectControl { transition-property: box-shadow, background-image, background-size; } } .euiSuperSelectControl::-webkit-input-placeholder { color: #69707D; opacity: 1; } .euiSuperSelectControl::-moz-placeholder { color: #69707D; opacity: 1; } .euiSuperSelectControl::placeholder { color: #69707D; opacity: 1; } .euiSuperSelectControl:invalid { background-image: linear-gradient(to top, #BD271E, #BD271E 2px, transparent 2px, transparent 100%); background-size: 100%; } .euiSuperSelectControl:focus { background-color: white; background-image: linear-gradient(to top, #07C, #07C 2px, transparent 2px, transparent 100%); background-size: 100% 100%; outline: none; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); } .euiSuperSelectControl:disabled { color: #98A2B3; -webkit-text-fill-color: #98A2B3; cursor: not-allowed; background: #eef2f7; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); } .euiSuperSelectControl:disabled::-webkit-input-placeholder { color: #98A2B3; opacity: 1; } .euiSuperSelectControl:disabled::-moz-placeholder { color: #98A2B3; opacity: 1; } .euiSuperSelectControl:disabled::placeholder { color: #98A2B3; opacity: 1; } .euiSuperSelectControl[readOnly] { cursor: default; color: #343741; -webkit-text-fill-color: #343741; background: #FFF; border-color: transparent; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); } .euiSuperSelectControl:-webkit-autofill { -webkit-text-fill-color: #343741; } .euiSuperSelectControl:-webkit-autofill ~ .euiFormControlLayoutIcons { color: #343741; } .euiSuperSelectControl--compressed { background-color: #fbfcfd; background-repeat: no-repeat; background-size: 0% 100%; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in; padding: 8px; border-radius: 4px; } @supports (-moz-appearance: none) { .euiSuperSelectControl--compressed { transition-property: box-shadow, background-image, background-size; } } .euiSuperSelectControl--compressed:invalid { background-image: linear-gradient(to top, #BD271E, #BD271E 2px, transparent 2px, transparent 100%); background-size: 100%; } .euiSuperSelectControl--compressed:focus { background-color: white; background-image: linear-gradient(to top, #07C, #07C 2px, transparent 2px, transparent 100%); background-size: 100% 100%; outline: none; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); } .euiSuperSelectControl--compressed:disabled { color: #98A2B3; -webkit-text-fill-color: #98A2B3; cursor: not-allowed; background: #eef2f7; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); } .euiSuperSelectControl--compressed:disabled::-webkit-input-placeholder { color: #98A2B3; opacity: 1; } .euiSuperSelectControl--compressed:disabled::-moz-placeholder { color: #98A2B3; opacity: 1; } .euiSuperSelectControl--compressed:disabled::placeholder { color: #98A2B3; opacity: 1; } .euiSuperSelectControl--compressed[readOnly] { cursor: default; color: #343741; -webkit-text-fill-color: #343741; background: #FFF; border-color: transparent; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); } .euiSuperSelectControl--inGroup { box-shadow: none !important; border-radius: 0; } .euiSuperSelectControl-isInvalid { background-image: linear-gradient(to top, #BD271E, #BD271E 2px, transparent 2px, transparent 100%); background-size: 100%; } .euiSuperSelectControl--compressed { line-height: 32px; /* 1 */ padding-top: 0; /* 1 */ padding-bottom: 0; /* 1 */ } .euiSuperSelectControl__placeholder { color: #98A2B3; -webkit-text-fill-color: #98A2B3; } .euiSuperSelectControl.euiSuperSelect--isOpen__button { background-color: white; background-image: linear-gradient(to top, #07C, #07C 2px, transparent 2px, transparent 100%); background-size: 100% 100%; outline: none; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); } .euiFormControlLayout { max-width: 400px; width: 100%; height: 40px; } .euiFormControlLayout--fullWidth { max-width: 100%; } .euiFormControlLayout--compressed { height: 32px; } .euiFormControlLayout--inGroup { height: 100%; } .euiFormControlLayout--1icons { --eui-form-control-layout-icons-padding: 34px; padding-right: 34px; } .euiFormControlLayout--1icons[class*=compressed] { --eui-form-control-layout-icons-padding: 26px; padding-right: 26px; } .euiFormControlLayout--2icons { --eui-form-control-layout-icons-padding: 56px; padding-right: 56px; } .euiFormControlLayout--2icons[class*=compressed] { --eui-form-control-layout-icons-padding: 44px; padding-right: 44px; } .euiFormControlLayout--3icons { --eui-form-control-layout-icons-padding: 78px; padding-right: 78px; } .euiFormControlLayout--3icons[class*=compressed] { --eui-form-control-layout-icons-padding: 62px; padding-right: 62px; } .euiFormControlLayout--4icons { --eui-form-control-layout-icons-padding: 100px; padding-right: 100px; } .euiFormControlLayout--4icons[class*=compressed] { --eui-form-control-layout-icons-padding: 80px; padding-right: 80px; } .euiFormControlLayout--5icons { --eui-form-control-layout-icons-padding: 122px; padding-right: 122px; } .euiFormControlLayout--5icons[class*=compressed] { --eui-form-control-layout-icons-padding: 98px; padding-right: 98px; } .euiFormControlLayout__childrenWrapper { position: relative; } /** * 1. Account for inner box-shadow style border * 2. Ensure truncation works in children elements */ .euiFormControlLayout--group { background-color: #fbfcfd; background-repeat: no-repeat; background-size: 0% 100%; box-shadow: 0 0 transparent, inset 0 0 0 1px rgba(17, 42, 134, 0.1); transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in; display: -webkit-flex; display: flex; -webkit-align-items: stretch; align-items: stretch; padding: 1px; /* 1 */ } @supports (-moz-appearance: none) { .euiFormControlLayout--group { transition-property: box-shadow, background-image, background-size; } } .euiFormControlLayout--group > *, .euiFormControlLayout--group .euiPopover__anchor, .euiFormControlLayout--group .euiButtonEmpty, .euiFormControlLayout--group .euiText, .euiFormControlLayout--group .euiFormLabel, .euiFormControlLayout--group .euiButtonIcon { height: 100%; } .euiFormControlLayout--group .euiFormControlLayout__childrenWrapper { -webkit-flex-grow: 1; flex-grow: 1; overflow: hidden; /* 2 */ } .euiFormControlLayout--group .euiFormControlLayout__prepend, .euiFormControlLayout--group .euiFormControlLayout__append { max-width: 100%; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; -webkit-flex-shrink: 0; flex-shrink: 0; height: 100%; border-radius: 0; } .euiFormControlLayout--group .euiFormControlLayout__prepend.euiIcon, .euiFormControlLayout--group .euiFormControlLayout__prepend .euiIcon, .euiFormControlLayout--group .euiFormControlLayout__append.euiIcon, .euiFormControlLayout--group .euiFormControlLayout__append .euiIcon { padding: 0 8px; width: 32px; border-radius: 0; background-color: #e9edf3; } .euiFormControlLayout--group .euiFormControlLayout__prepend.euiButtonIcon, .euiFormControlLayout--group .euiFormControlLayout__prepend.euiButtonEmpty, .euiFormControlLayout--group .euiFormControlLayout__prepend .euiButtonIcon, .euiFormControlLayout--group .euiFormControlLayout__prepend .euiButtonEmpty, .euiFormControlLayout--group .euiFormControlLayout__append.euiButtonIcon, .euiFormControlLayout--group .euiFormControlLayout__append.euiButtonEmpty, .euiFormControlLayout--group .euiFormControlLayout__append .euiButtonIcon, .euiFormControlLayout--group .euiFormControlLayout__append .euiButtonEmpty { -webkit-transform: none !important; transform: none !important; } .euiFormControlLayout--group .euiFormControlLayout__prepend.euiButtonIcon .euiIcon, .euiFormControlLayout--group .euiFormControlLayout__prepend.euiButtonEmpty .euiIcon, .euiFormControlLayout--group .euiFormControlLayout__prepend .euiButtonIcon .euiIcon, .euiFormControlLayout--group .euiFormControlLayout__prepend .euiButtonEmpty .euiIcon, .euiFormControlLayout--group .euiFormControlLayout__append.euiButtonIcon .euiIcon, .euiFormControlLayout--group .euiFormControlLayout__append.euiButtonEmpty .euiIcon, .euiFormControlLayout--group .euiFormControlLayout__append .euiButtonIcon .euiIcon, .euiFormControlLayout--group .euiFormControlLayout__append .euiButtonEmpty .euiIcon { background: none !important; padding: 0; width: 16px; } .euiFormControlLayout--group .euiButtonIcon { padding: 0 8px; width: 32px; border-radius: 0; } .euiFormControlLayout--group .euiButtonIcon:not(:focus) { background-color: #e9edf3; } .euiFormControlLayout--group .euiButtonIcon:focus-visible { outline: 2px solid #0071c2; outline-offset: -2px; } .euiFormControlLayout--group .euiToolTipAnchor > .euiIcon { height: 100%; background-color: #e9edf3; padding: 0 8px; width: 32px; border-radius: 0; } .euiFormControlLayout--group > .euiFormControlLayout__prepend, .euiFormControlLayout--group > .euiFormControlLayout__append { max-width: 50%; } .euiFormControlLayout--group .euiFormLabel, .euiFormControlLayout--group .euiText:not(.euiFormControlLayoutDelimited__delimiter) { background-color: #e9edf3; padding: 12px; line-height: 16px !important; cursor: default !important; } .euiFormControlLayout--group .euiFormLabel + *:not(.euiFormControlLayout__childrenWrapper):not(input), .euiFormControlLayout--group .euiText:not(.euiFormControlLayoutDelimited__delimiter) + *:not(.euiFormControlLayout__childrenWrapper):not(input) { margin-left: -12px; } .euiFormControlLayout--group > *:not(.euiFormControlLayout__childrenWrapper) + .euiFormLabel, .euiFormControlLayout--group > *:not(.euiFormControlLayout__childrenWrapper) + .euiText { margin-left: -12px; } .euiFormControlLayout--group .euiButtonEmpty { border-right: none; } .euiFormControlLayout--group .euiFormControlLayout__childrenWrapper ~ .euiButtonEmpty, .euiFormControlLayout--group .euiFormControlLayout__childrenWrapper ~ * .euiButtonEmpty { border-right: none; border-left: none; } .euiFormControlLayout--group.euiFormControlLayout--compressed { background-color: #fbfcfd; background-repeat: no-repeat; background-size: 0% 100%; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in; border-radius: 3px; overflow: hidden; } @supports (-moz-appearance: none) { .euiFormControlLayout--group.euiFormControlLayout--compressed { transition-property: box-shadow, background-image, background-size; } } .euiFormControlLayout--group.euiFormControlLayout--compressed .euiFormLabel, .euiFormControlLayout--group.euiFormControlLayout--compressed .euiText:not(.euiFormControlLayoutDelimited__delimiter) { padding: 8px; } .euiFormControlLayout--group.euiFormControlLayout--compressed .euiFormLabel + *:not(.euiFormControlLayout__childrenWrapper), .euiFormControlLayout--group.euiFormControlLayout--compressed .euiText:not(.euiFormControlLayoutDelimited__delimiter) + *:not(.euiFormControlLayout__childrenWrapper) { margin-left: -8px; } .euiFormControlLayout--group.euiFormControlLayout--compressed > *:not(.euiFormControlLayout__childrenWrapper) + .euiFormLabel, .euiFormControlLayout--group.euiFormControlLayout--compressed > *:not(.euiFormControlLayout__childrenWrapper) + .euiText { margin-left: -8px; } .euiFormControlLayout--group.euiFormControlLayout--readOnly { cursor: default; background: #e9edf3; border-color: transparent; box-shadow: inset 0 0 0 1px #e9edf3; } .euiFormControlLayout--group.euiFormControlLayout--readOnly input { background-color: #FFF; } .euiFormControlLayoutDelimited { background-color: #fbfcfd; background-repeat: no-repeat; background-size: 0% 100%; box-shadow: 0 0 transparent, inset 0 0 0 1px rgba(17, 42, 134, 0.1); transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in; display: -webkit-flex; display: flex; -webkit-align-items: stretch; align-items: stretch; padding: 1px; /* 1 */ } @supports (-moz-appearance: none) { .euiFormControlLayoutDelimited { transition-property: box-shadow, background-image, background-size; } } .euiFormControlLayoutDelimited > .euiFormControlLayout__childrenWrapper { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; width: 100%; background-color: #fbfcfd; } .euiFormControlLayoutDelimited[class*="--compressed"] { background-color: #fbfcfd; background-repeat: no-repeat; background-size: 0% 100%; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in; border-radius: 3px; } @supports (-moz-appearance: none) { .euiFormControlLayoutDelimited[class*="--compressed"] { transition-property: box-shadow, background-image, background-size; } } .euiFormControlLayoutDelimited[class*="--fullWidth"] .euiFormControlLayout__childrenWrapper, .euiFormControlLayoutDelimited[class*="--fullWidth"] .euiFormControlLayout__childrenWrapper > *:not(.euiFormControlLayoutDelimited__delimiter):not(.euiFormControlLayoutIcons) { width: 100%; max-width: none; } .euiFormControlLayoutDelimited[class*=-isDisabled] { color: #98A2B3; -webkit-text-fill-color: #98A2B3; cursor: not-allowed; background: #eef2f7; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); } .euiFormControlLayoutDelimited[class*=-isDisabled]::-webkit-input-placeholder { color: #98A2B3; opacity: 1; } .euiFormControlLayoutDelimited[class*=-isDisabled]::-moz-placeholder { color: #98A2B3; opacity: 1; } .euiFormControlLayoutDelimited[class*=-isDisabled]::placeholder { color: #98A2B3; opacity: 1; } .euiFormControlLayoutDelimited[class*=-isDisabled] .euiFormControlLayout__childrenWrapper { background-color: #eef2f7; } .euiFormControlLayoutDelimited[class*="--readOnly"] { cursor: default; color: #343741; -webkit-text-fill-color: #343741; background: #FFF; border-color: transparent; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); } .euiFormControlLayoutDelimited[class*="--readOnly"] .euiFormControlLayout__childrenWrapper { background-color: #FFF; } .euiFormControlLayoutDelimited--isInvalid .euiFormControlLayout__childrenWrapper { background-image: linear-gradient(to top, #BD271E, #BD271E 2px, transparent 2px, transparent 100%); background-size: 100%; } .euiFormControlLayoutDelimited__input { box-shadow: none !important; border-radius: 0 !important; text-align: center; height: 100%; min-width: 0; } .euiFormControlLayoutDelimited__delimiter { -webkit-align-self: stretch; align-self: stretch; -webkit-flex-grow: 0; flex-grow: 0; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; line-height: 1; } .euiFormControlLayoutIcons { pointer-events: none; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; } .euiFormControlLayoutIcons > * + * { margin-left: 6px; } .euiFormControlLayoutIcons--absolute { position: absolute; top: 0; bottom: 0; left: 12px; } .euiFormControlLayout--compressed .euiFormControlLayoutIcons--absolute { left: 8px; } .euiFormControlLayoutIcons--static { position: static; height: 100%; -webkit-align-self: stretch; align-self: stretch; -webkit-flex-grow: 0; flex-grow: 0; padding-inline: 12px; } .euiFormControlLayout--compressed .euiFormControlLayoutIcons--static { padding-inline: 8px; } .euiFormControlLayoutIcons--left { z-index: 1; } .euiFormControlLayoutIcons--right { left: auto; right: 12px; } .euiFormControlLayout--compressed .euiFormControlLayoutIcons--right { left: auto; right: 8px; } *:disabled + .euiFormControlLayoutIcons { cursor: not-allowed; color: #98A2B3; } .euiFormControlLayoutClearButton { width: 16px; height: 16px; pointer-events: all; background-color: #98A2B3; border-radius: 16px; line-height: 0; } .euiFormControlLayoutClearButton:focus { outline: 2px solid currentColor; } .euiFormControlLayoutClearButton:focus:focus-visible { outline-style: auto; } .euiFormControlLayoutClearButton:focus:not(:focus-visible) { outline: none; } .euiFormControlLayoutClearButton .euiFormControlLayoutClearButton__icon { width: 8px; height: 8px; fill: #FFF; stroke: #FFF; stroke-width: 2px; } .euiFormControlLayoutClearButton--small { width: 12px; height: 12px; pointer-events: all; background-color: #98A2B3; border-radius: 12px; line-height: 0; } .euiFormControlLayoutClearButton--small:focus { outline: 2px solid currentColor; } .euiFormControlLayoutClearButton--small:focus:focus-visible { outline-style: auto; } .euiFormControlLayoutClearButton--small:focus:not(:focus-visible) { outline: none; } .euiFormControlLayoutClearButton--small .euiFormControlLayoutClearButton__icon { width: 6px; height: 6px; fill: #FFF; stroke: #FFF; stroke-width: 4px; } .euiFormControlLayoutCustomIcon { pointer-events: none; font-size: 0; } .euiFormControlLayoutCustomIcon--clickable { width: 16px; height: 16px; pointer-events: all; } .euiFormControlLayoutCustomIcon--clickable .euiFormControlLayoutCustomIcon__icon { vertical-align: baseline; -webkit-transform: none; transform: none; } .euiFormControlLayoutCustomIcon--clickable:focus { outline: 2px solid currentColor; } .euiFormControlLayoutCustomIcon--clickable:focus:focus-visible { outline-style: auto; } .euiFormControlLayoutCustomIcon--clickable:focus:not(:focus-visible) { outline: none; } .euiFormControlLayoutCustomIcon--clickable:disabled { cursor: not-allowed; color: #98A2B3; } .euiFormErrorText { font-size: 12px; font-size: 0.8571428571rem; line-height: 1.1428571429rem; padding-top: 4px; color: #BD271E; } .euiFormLegend { font-size: 12px; font-size: 0.8571428571rem; line-height: 1.1428571429rem; overflow-wrap: break-word !important; word-break: break-word; color: #1a1c21; font-weight: 600; } .euiFormLegend:not(.euiFormLegend-isHidden) { margin-bottom: 8px; } .euiFormLegend:not(.euiFormLegend-isHidden).euiFormLegend--compressed { margin-bottom: 4px; } .euiFormHelpText { font-size: 12px; font-size: 0.8571428571rem; line-height: 1.1428571429rem; padding-top: 4px; color: #69707D; } /** * 1. Focused state overrides invalid state. * 2. Disabled state overrides pointer. */ .euiFormLabel { font-size: 12px; font-size: 0.8571428571rem; line-height: 1.1428571429rem; overflow-wrap: break-word !important; word-break: break-word; color: #1a1c21; font-weight: 600; display: inline-block; transition: all 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); } .euiFormLabel.euiFormLabel-isInvalid { color: #BD271E; /* 1 */ } .euiFormLabel.euiFormLabel-isFocused { color: #07C; /* 1 */ } .euiFormLabel[for] { cursor: pointer; /* 2 */ } .euiFormLabel[for].euiFormLabel-isDisabled { cursor: default; /* 2 */ } /** * 1. Coerce inline form elements to behave as block-level elements. * 2. For inline forms, we need to add margin if the label doesn't exist. */ .euiFormRow { display: -webkit-flex; display: flex; /* 1 */ -webkit-flex-direction: column; flex-direction: column; /* 1 */ max-width: 400px; } .euiFormRow + .euiFormRow, .euiFormRow + .euiButton { margin-top: 16px; } .euiFormRow--fullWidth { max-width: 100%; } .euiFormRow--hasEmptyLabelSpace { margin-top: 18px; /* 2 */ min-height: 40px; padding-bottom: 0; -webkit-justify-content: center; justify-content: center; } .euiFormRow__labelWrapper { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; margin-bottom: 4px; } .euiFormRow--horizontal { -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: stretch; align-items: stretch; } .euiFormRow--horizontal .euiFormRow__label { -webkit-hyphens: auto; hyphens: auto; } .euiFormRow--horizontal .euiFormRow__labelWrapper { display: block; line-height: 31px; width: calc(33% - 8px); margin-right: 8px; margin-bottom: 0; } .euiFormRow--horizontal .euiFormRow__fieldWrapper { width: 67%; } .euiFormRow--horizontal + .euiFormRow--horizontal { margin-top: 8px; } .euiFormRow--horizontal + .euiFormRow--horizontal.euiFormRow--hasSwitch { margin-top: 12px; } .euiFormRow--horizontal.euiFormRow--hasSwitch .euiFormRow__labelWrapper { line-height: 19px; width: auto; min-width: calc(33% - 8px); } .euiFormRow--horizontal.euiFormRow--hasSwitch .euiFormRow__fieldWrapper { width: auto; } .euiFormRow--horizontal.euiFormRow--hasSwitch .euiFormRow__fieldWrapper .euiSwitch--compressed { margin-top: 2px; } .euiFormRow--horizontal.euiFormRow--hasSwitch + .euiFormRow--horizontal { margin-top: 12px; } .euiFormRow__fieldWrapperDisplayOnly { min-height: 40px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; } .euiFormRow--compressed.euiFormRow--hasEmptyLabelSpace { min-height: 32px; } .euiFormRow--compressed .euiFormRow__fieldWrapperDisplayOnly { min-height: 32px; } /** * 1. Float above the visual radio and match its dimension, so that when users try to click it * they actually click this input. */ .euiRadio { position: relative; } .euiRadio .euiRadio__input { width: 16px; height: 16px; top: 3px; cursor: pointer; position: absolute; /* 1 */ opacity: 0; /* 1 */ z-index: 1; /* 1 */ } .euiRadio .euiRadio__input ~ .euiRadio__label { display: inline-block; padding-left: 24px; line-height: 24px; font-size: 14px; position: relative; z-index: 2; cursor: pointer; } .euiRadio .euiRadio__input + .euiRadio__circle { padding: 7px; border: 1px solid #939496; background: #FFF no-repeat center; border-radius: 14px; transition: background-color 150ms ease-in, border-color 150ms ease-in; display: inline-block; position: absolute; left: 0; top: 3px; } .euiRadio .euiRadio__input:checked + .euiRadio__circle { border-color: #07C; background-color: #07C; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6'%3E%3Ccircle cx='8' cy='11' r='3' fill='rgb%28255, 255, 255%29' fill-rule='evenodd' transform='translate(-5 -8)'/%3E%3C/svg%3E"); } .euiRadio .euiRadio__input[disabled] { cursor: not-allowed !important; } .euiRadio .euiRadio__input[disabled] ~ .euiRadio__label { color: #98A2B3; cursor: not-allowed !important; } .euiRadio .euiRadio__input[disabled] + .euiRadio__circle { border-color: #D3DAE6; background-color: #D3DAE6; box-shadow: none; } .euiRadio .euiRadio__input:checked[disabled] + .euiRadio__circle { border-color: #D3DAE6; background-color: #D3DAE6; box-shadow: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6'%3E%3Ccircle cx='8' cy='11' r='3' fill='rgb%2894, 100, 111%29' fill-rule='evenodd' transform='translate(-5 -8)'/%3E%3C/svg%3E"); } .euiRadio .euiRadio__input:focus + .euiRadio__circle { outline: 2px solid currentColor; outline-offset: 2px; border-color: #07C; } .euiRadio .euiRadio__input:focus + .euiRadio__circle:focus-visible { outline-style: auto; } .euiRadio .euiRadio__input:focus + .euiRadio__circle:not(:focus-visible) { outline: none; } .euiRadio.euiRadio--inList, .euiRadio.euiRadio--noLabel { min-height: 16px; min-width: 16px; } .euiRadio.euiRadio--inList .euiRadio__input, .euiRadio.euiRadio--inList .euiRadio__circle, .euiRadio.euiRadio--noLabel .euiRadio__input, .euiRadio.euiRadio--noLabel .euiRadio__circle { top: 0; } .euiRadio.euiRadio--inList .euiRadio__input, .euiRadio.euiRadio--noLabel .euiRadio__input { margin: 0; } .euiRadioGroup__item + .euiRadioGroup__item { margin-top: 4px; } .euiRadioGroup__item + .euiRadioGroup__item.euiRadio--compressed { margin-top: 0; } .euiSwitch { position: relative; display: -webkit-inline-flex; display: inline-flex; -webkit-align-items: flex-start; align-items: flex-start; min-height: 20px; } .euiSwitch .euiSwitch__label { cursor: pointer; padding-left: 8px; line-height: 20px; font-size: 14px; vertical-align: middle; display: inline-block; } .euiSwitch .euiSwitch__button { -webkit-flex-shrink: 0; flex-shrink: 0; line-height: 0; } .euiSwitch .euiSwitch__button:focus .euiSwitch__track { outline: 2px solid currentColor; outline-offset: 2px; border-color: #07C; } .euiSwitch .euiSwitch__button:focus .euiSwitch__track:focus-visible { outline-style: auto; } .euiSwitch .euiSwitch__button:focus .euiSwitch__track:not(:focus-visible) { outline: none; } .euiSwitch .euiSwitch__button[aria-checked=false] .euiSwitch__body { background-color: rgba(105, 112, 125, 0.75); } .euiSwitch .euiSwitch__button[aria-checked=false] .euiSwitch__thumb { left: 0; } .euiSwitch .euiSwitch__button[aria-checked=false] .euiSwitch__icon { right: -8px; } .euiSwitch .euiSwitch__button[aria-checked=false] .euiSwitch__icon.euiSwitch__icon--checked { right: auto; left: -34px; } .euiSwitch .euiSwitch__button:disabled:hover, .euiSwitch .euiSwitch__button:disabled ~ .euiSwitch__label:hover { cursor: not-allowed; } .euiSwitch .euiSwitch__button:disabled .euiSwitch__body { background-color: rgba(211, 218, 230, 0.5); } .euiSwitch .euiSwitch__button:disabled .euiSwitch__thumb { background-color: rgba(0, 0, 0, 0); border-color: rgba(105, 112, 125, 0.5); box-shadow: none; } .euiSwitch .euiSwitch__button:disabled .euiSwitch__icon { fill: #69707D; } .euiSwitch .euiSwitch__button:disabled + .euiSwitch__label { color: #98A2B3; } .euiSwitch .euiSwitch__body { pointer-events: none; width: 44px; height: 20px; background-color: #07C; display: inline-block; position: relative; border-radius: 20px; vertical-align: middle; } .euiSwitch .euiSwitch__thumb { padding: 9px; border: 1px solid #939496; background: #FFF no-repeat center; border-radius: 18px; transition: background-color 150ms ease-in, border-color 150ms ease-in; position: absolute; display: inline-block; left: 24px; transition: border-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), background-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), left 250ms cubic-bezier(0.34, 1.61, 0.7, 1), -webkit-transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1); transition: border-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), background-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), left 250ms cubic-bezier(0.34, 1.61, 0.7, 1), transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1); transition: border-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), background-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), left 250ms cubic-bezier(0.34, 1.61, 0.7, 1), transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1), -webkit-transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1); } .euiSwitch .euiSwitch__track { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; border-radius: 20px; } .euiSwitch .euiSwitch__icon { position: absolute; right: -34px; top: 2px; bottom: 0; width: 42px; height: 16px; transition: left 250ms cubic-bezier(0.34, 1.61, 0.7, 1), right 250ms cubic-bezier(0.34, 1.61, 0.7, 1); fill: #FFF; } .euiSwitch .euiSwitch__icon--checked { right: auto; left: -8px; fill: #FFF; } .euiSwitch:hover .euiSwitch__button:not(:disabled) .euiSwitch__thumb { -webkit-transform: scale(1.05); transform: scale(1.05); } .euiSwitch:hover .euiSwitch__button:active .euiSwitch__thumb { -webkit-transform: scale(0.95); transform: scale(0.95); } .euiSwitch.euiSwitch--compressed { min-height: 16px; } .euiSwitch.euiSwitch--compressed .euiSwitch__label { line-height: 16px; } .euiSwitch.euiSwitch--compressed .euiSwitch__body { width: 28px; height: 16px; border-radius: 16px; } .euiSwitch.euiSwitch--compressed .euiSwitch__thumb { padding: 6px; border: 1px solid #939496; background: #FFF no-repeat center; border-radius: 12px; transition: background-color 150ms ease-in, border-color 150ms ease-in; left: 13px; top: 1px; transition: border-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), background-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), left 250ms cubic-bezier(0.34, 1.61, 0.7, 1), -webkit-transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1); transition: border-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), background-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), left 250ms cubic-bezier(0.34, 1.61, 0.7, 1), transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1); transition: border-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), background-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), left 250ms cubic-bezier(0.34, 1.61, 0.7, 1), transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1), -webkit-transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1); } .euiSwitch.euiSwitch--compressed .euiSwitch__track { border-radius: 16px; } .euiSwitch.euiSwitch--mini { min-height: 10px; } .euiSwitch.euiSwitch--mini .euiSwitch__label { line-height: 10px; font-size: 12px; } .euiSwitch.euiSwitch--mini .euiSwitch__body { width: 22px; height: 10px; border-radius: 10px; } .euiSwitch.euiSwitch--mini .euiSwitch__thumb { padding: 3px; border: 1px solid #939496; background: #FFF no-repeat center; border-radius: 6px; transition: background-color 150ms ease-in, border-color 150ms ease-in; left: 13px; top: 1px; transition: border-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), background-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), left 250ms cubic-bezier(0.34, 1.61, 0.7, 1), -webkit-transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1); transition: border-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), background-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), left 250ms cubic-bezier(0.34, 1.61, 0.7, 1), transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1); transition: border-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), background-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), left 250ms cubic-bezier(0.34, 1.61, 0.7, 1), transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1), -webkit-transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1); } .euiSwitch.euiSwitch--mini .euiSwitch__track { border-radius: 10px; } .euiSwitch.euiSwitch--compressed .euiSwitch__button[aria-checked=false] .euiSwitch__thumb, .euiSwitch.euiSwitch--mini .euiSwitch__button[aria-checked=false] .euiSwitch__thumb { left: 1px; } .euiSwitch.euiSwitch--compressed .euiSwitch__button[aria-checked=false] .euiSwitch__thumb, .euiSwitch.euiSwitch--compressed .euiSwitch__button[aria-checked=true]:disabled .euiSwitch__thumb, .euiSwitch.euiSwitch--mini .euiSwitch__button[aria-checked=false] .euiSwitch__thumb, .euiSwitch.euiSwitch--mini .euiSwitch__button[aria-checked=true]:disabled .euiSwitch__thumb { border-color: rgba(105, 112, 125, 0.5); } .euiSwitch.euiSwitch--compressed .euiSwitch__button[aria-checked=true] .euiSwitch__thumb, .euiSwitch.euiSwitch--mini .euiSwitch__button[aria-checked=true] .euiSwitch__thumb { border-color: #07C; } .euiTextArea { max-width: 400px; width: 100%; height: 40px; background-color: #fbfcfd; background-repeat: no-repeat; background-size: 0% 100%; box-shadow: 0 0 transparent, inset 0 0 0 1px rgba(17, 42, 134, 0.1); transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in; 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; letter-spacing: normal; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-kerning: normal; font-kerning: normal; font-size: 14px; color: #343741; border: none; border-radius: 6px; padding: 12px; line-height: 1.5; } .euiTextArea--fullWidth { max-width: 100%; } .euiTextArea--compressed { height: 32px; } .euiTextArea--inGroup { height: 100%; } @supports (-moz-appearance: none) { .euiTextArea { transition-property: box-shadow, background-image, background-size; } } .euiTextArea::-webkit-input-placeholder { color: #69707D; opacity: 1; } .euiTextArea::-moz-placeholder { color: #69707D; opacity: 1; } .euiTextArea::placeholder { color: #69707D; opacity: 1; } .euiTextArea:invalid { background-image: linear-gradient(to top, #BD271E, #BD271E 2px, transparent 2px, transparent 100%); background-size: 100%; } .euiTextArea:focus { background-color: white; background-image: linear-gradient(to top, #07C, #07C 2px, transparent 2px, transparent 100%); background-size: 100% 100%; outline: none; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); } .euiTextArea:disabled { color: #98A2B3; -webkit-text-fill-color: #98A2B3; cursor: not-allowed; background: #eef2f7; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); } .euiTextArea:disabled::-webkit-input-placeholder { color: #98A2B3; opacity: 1; } .euiTextArea:disabled::-moz-placeholder { color: #98A2B3; opacity: 1; } .euiTextArea:disabled::placeholder { color: #98A2B3; opacity: 1; } .euiTextArea[readOnly] { cursor: default; color: #343741; -webkit-text-fill-color: #343741; background: #FFF; border-color: transparent; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); } .euiTextArea:-webkit-autofill { -webkit-text-fill-color: #343741; } .euiTextArea:-webkit-autofill ~ .euiFormControlLayoutIcons { color: #343741; } .euiTextArea--compressed { background-color: #fbfcfd; background-repeat: no-repeat; background-size: 0% 100%; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in; padding: 8px; border-radius: 4px; } @supports (-moz-appearance: none) { .euiTextArea--compressed { transition-property: box-shadow, background-image, background-size; } } .euiTextArea--compressed:invalid { background-image: linear-gradient(to top, #BD271E, #BD271E 2px, transparent 2px, transparent 100%); background-size: 100%; } .euiTextArea--compressed:focus { background-color: white; background-image: linear-gradient(to top, #07C, #07C 2px, transparent 2px, transparent 100%); background-size: 100% 100%; outline: none; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); } .euiTextArea--compressed:disabled { color: #98A2B3; -webkit-text-fill-color: #98A2B3; cursor: not-allowed; background: #eef2f7; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); } .euiTextArea--compressed:disabled::-webkit-input-placeholder { color: #98A2B3; opacity: 1; } .euiTextArea--compressed:disabled::-moz-placeholder { color: #98A2B3; opacity: 1; } .euiTextArea--compressed:disabled::placeholder { color: #98A2B3; opacity: 1; } .euiTextArea--compressed[readOnly] { cursor: default; color: #343741; -webkit-text-fill-color: #343741; background: #FFF; border-color: transparent; box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1); } .euiTextArea--inGroup { box-shadow: none !important; border-radius: 0; } .euiTextArea, .euiTextArea--compressed { height: auto; } .euiFormControlLayout--euiTextArea { height: auto; } .euiFormControlLayout--euiTextArea .euiFormControlLayoutIcons { top: auto; bottom: 12px; } .euiTextArea--resizeVertical { resize: vertical; } .euiTextArea--resizeHorizontal { resize: horizontal; } .euiTextArea--resizeBoth { resize: both; } .euiTextArea--resizeNone { resize: none; } .euiHeaderLinks { display: -webkit-flex; display: flex; } .euiHeaderLinks__list { white-space: nowrap; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; } .euiHeaderLinks__list--gutterXS > * { margin: 0 4px; } .euiHeaderLinks__list--gutterS > * { margin: 0 8px; } .euiHeaderLinks__list--gutterM > * { margin: 0 12px; } .euiHeaderLinks__list--gutterL > * { margin: 0 24px; } .euiHeaderLinks__mobileList .euiHeaderLink { display: block; width: 100%; padding: 8px; } .euiHeaderLinks__mobileList .euiHeaderLink > span { -webkit-justify-content: flex-start; justify-content: flex-start; } .euiHeaderAlert { min-width: 300px; position: relative; margin-bottom: 24px; padding: 0 8px 24px; border-bottom: 1px solid #D3DAE6; border-top: none; } .euiHeaderAlert .euiHeaderAlert__dismiss { opacity: 0; position: absolute; right: 12px; top: 12px; transition: opacity 250ms ease-in; } .euiHeaderAlert:hover .euiHeaderAlert__dismiss, .euiHeaderAlert .euiHeaderAlert__dismiss:focus { opacity: 1; } .euiHeaderAlert .euiHeaderAlert__title { overflow-wrap: break-word !important; word-break: break-word; color: #1a1c21; font-size: 16px; font-size: 1.1428571429rem; line-height: 1.7142857143rem; font-weight: 700; margin-bottom: 8px; } .euiHeaderAlert .euiHeaderAlert__text { font-size: 14px; font-size: 1rem; line-height: 1.7142857143rem; margin-bottom: 16px; } .euiHeaderAlert .euiHeaderAlert__action { font-size: 14px; font-size: 1rem; line-height: 1.7142857143rem; } .euiHeaderAlert .euiHeaderAlert__date { font-size: 12px; font-size: 0.8571428571rem; line-height: 1.1428571429rem; color: #69707D; } .euiHeaderSection { display: -webkit-flex; display: flex; -webkit-flex-grow: 0; flex-grow: 0; -webkit-flex-shrink: 0; flex-shrink: 0; } .euiHeaderSection--grow, .euiHeaderSection--left { -webkit-flex-grow: 1; flex-grow: 1; } .euiHeaderSection--dontGrow { -webkit-flex-grow: 0; flex-grow: 0; } .euiHeaderSectionItem { position: relative; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; } .euiHeaderSectionItem::after { position: absolute; content: ""; top: 16px; bottom: 0; background: #D3DAE6; left: 0; } .euiHeaderSectionItem--borderLeft::after { left: 0; width: 1px; } .euiHeaderSectionItem--borderRight::after { width: 1px; left: auto; right: 0; } @media only screen and (max-width: 574px) { .euiHeaderSectionItem { min-width: 30px; } .euiHeaderSectionItem--borderLeft::after, .euiHeaderSectionItem--borderRight::after { display: none; } } .euiHeaderSectionItemButton { position: relative; height: 40px; min-width: 40px; text-align: center; font-size: 0; } .euiHeaderSectionItemButton__notification { position: absolute; } .euiHeaderSectionItemButton__notification--dot { top: 0; right: 0; stroke: #FFF; } .euiHeaderSectionItemButton__notification--badge { top: 9%; right: 9%; box-shadow: 0 0 0 1px #FFF; } .euiHeaderSectionItemButton__content { display: inline-block; } @media only screen and (max-width: 574px) { .euiHeaderSectionItemButton { min-width: 30px; } .euiHeaderSectionItemButton__notification.euiHeaderSectionItemButton__notification--dot { width: 16px; height: 16px; top: 9%; } } /** * 1. If this class is applied to a button, we need to override the Chrome default font. * 2. If it has a BetaBadge, make sure only the first letter shows */ .euiKeyPadMenuItem { 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; letter-spacing: normal; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-kerning: normal; font-kerning: normal; /* 1 */ display: block; padding: 4px; height: 96px; width: 96px; border: 1px solid #D3DAE6; border-color: transparent; border-radius: 6px; color: #343741; } @media screen and (prefers-reduced-motion: no-preference) { .euiKeyPadMenuItem { transition: background-color 150ms ease-in, border-color 150ms ease-in, box-shadow 150ms ease-in; } } .euiKeyPadMenuItem:not(.euiKeyPadMenuItem-isDisabled):hover, .euiKeyPadMenuItem:not(.euiKeyPadMenuItem-isDisabled):focus, .euiKeyPadMenuItem:not(.euiKeyPadMenuItem-isDisabled):focus-within { cursor: pointer; text-decoration: underline; box-shadow: 0 0.8px 0.8px rgba(0, 0, 0, 0.04), 0 2.3px 2px rgba(0, 0, 0, 0.03); border-color: #D3DAE6; } @media screen and (prefers-reduced-motion: no-preference) { .euiKeyPadMenuItem:not(.euiKeyPadMenuItem-isDisabled):hover .euiKeyPadMenuItem__icon, .euiKeyPadMenuItem:not(.euiKeyPadMenuItem-isDisabled):focus .euiKeyPadMenuItem__icon, .euiKeyPadMenuItem:not(.euiKeyPadMenuItem-isDisabled):focus-within .euiKeyPadMenuItem__icon { -webkit-transform: translateY(0); transform: translateY(0); } } .euiKeyPadMenuItem:not(.euiKeyPadMenuItem-isDisabled):focus { cursor: pointer; text-decoration: underline; background-color: rgba(0, 119, 204, 0.1); } .euiKeyPadMenuItem.euiKeyPadMenuItem-isDisabled { cursor: not-allowed; text-decoration: none; color: #ABB4C4; } .euiKeyPadMenuItem.euiKeyPadMenuItem-isDisabled .euiKeyPadMenuItem__icon { -webkit-filter: grayscale(100%); filter: grayscale(100%); } .euiKeyPadMenuItem.euiKeyPadMenuItem-isDisabled .euiKeyPadMenuItem__icon svg * { fill: #ABB4C4; } .euiKeyPadMenuItem.euiKeyPadMenuItem-isSelected:not(.euiKeyPadMenuItem-isDisabled) { box-shadow: 0 0.8px 0.8px rgba(0, 0, 0, 0.04), 0 2.3px 2px rgba(0, 0, 0, 0.03); color: #1a1c21; } .euiKeyPadMenuItem.euiKeyPadMenuItem-isSelected { border-color: #D3DAE6; } .euiKeyPadMenuItem:not(:hover):not(:focus):not(:focus-within):not(.euiKeyPadMenuItem-isSelected) .euiKeyPadMenuItem__checkableInput, .euiKeyPadMenuItem.euiKeyPadMenuItem-isDisabled:not(.euiKeyPadMenuItem-isSelected) .euiKeyPadMenuItem__checkableInput { position: absolute; top: auto; left: -10000px; width: 1px; height: 1px; clip: rect(0 0 0 0); -webkit-clip-path: inset(50%); clip-path: inset(50%); overflow: hidden; margin: -1px; } .euiKeyPadMenuItem__inner { width: 100%; height: 100%; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; position: relative; } .euiKeyPadMenuItem__inner .euiKeyPadMenuItem__checkableInput { -webkit-transform: scale(0.75); transform: scale(0.75); -webkit-transform-origin: top right; transform-origin: top right; } .euiKeyPadMenuItem__inner .euiKeyPadMenuItem__checkableInput, .euiKeyPadMenuItem__inner .euiKeyPadMenuItem__betaBadge { position: absolute; top: 4px; right: 4px; z-index: 3; } .euiKeyPadMenuItem__icon { transition: -webkit-transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1); transition: transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1); transition: transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1), -webkit-transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1); margin-bottom: 12px; -webkit-transform: translateY(2px); transform: translateY(2px); } .euiKeyPadMenuItem__label { font-size: 12px; font-weight: 500; line-height: 16px; text-align: center; } .euiKeyPadMenuItem--checkable.euiKeyPadMenuItem-isSelected:not(.euiKeyPadMenuItem-isDisabled), .euiKeyPadMenuItem--checkable.euiKeyPadMenuItem-isSelected:not(.euiKeyPadMenuItem-isDisabled):hover, .euiKeyPadMenuItem--checkable.euiKeyPadMenuItem-isSelected:not(.euiKeyPadMenuItem-isDisabled):focus, .euiKeyPadMenuItem--checkable.euiKeyPadMenuItem-isSelected:not(.euiKeyPadMenuItem-isDisabled):focus-within { background-color: rgba(0, 119, 204, 0.1); color: #0071c2; border-color: #0071c2; } .euiMarkdownEditor { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; } .euiMarkdownEditor--isPreviewing .euiMarkdownEditor__toggleContainer { display: none; } .euiMarkdownEditor--fullHeight { height: 100%; } .euiMarkdownEditor--fullHeight .euiMarkdownEditorTextArea { resize: none; } .euiMarkdownEditor--fullHeight .euiMarkdownEditorDropZone { height: 100%; } .euiMarkdownEditorDropZone { display: -webkit-flex; display: flex; position: relative; -webkit-flex-direction: column; flex-direction: column; min-height: "150px"; } .euiMarkdownEditorDropZone__input { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; overflow: hidden; } .euiMarkdownEditorDropZone__input:hover { cursor: pointer; } .euiMarkdownEditorDropZone__input:hover:disabled { cursor: not-allowed; } .euiMarkdownEditorDropZone--isDragging .euiMarkdownEditorFooter, .euiMarkdownEditorDropZone--isDragging .euiMarkdownEditorTextArea, .euiMarkdownEditorDropZone--isDragging .euiMarkdownEditorTextArea:focus, .euiMarkdownEditorDropZone--isDragging .euiMarkdownEditor:focus-within .euiMarkdownEditorTextArea { background-color: rgba(0, 119, 204, 0.1) !important; } .euiMarkdownEditorDropZone--isDragging .euiMarkdownEditorTextArea, .euiMarkdownEditorDropZone--isDragging .euiMarkdownEditorTextArea:focus { background-image: linear-gradient(to top, #07C, #07C 2px, transparent 2px, transparent 100%) !important; } .euiMarkdownEditorDropZone--isDraggingError .euiMarkdownEditorFooter, .euiMarkdownEditorDropZone--isDraggingError .euiMarkdownEditorTextArea, .euiMarkdownEditorDropZone--isDraggingError .euiMarkdownEditorTextArea:focus, .euiMarkdownEditorDropZone--isDraggingError .euiMarkdownEditor:focus-within .euiMarkdownEditorTextArea { background-color: rgba(189, 39, 30, 0.1) !important; } .euiMarkdownEditorDropZone--hasError .euiMarkdownEditorTextArea, .euiMarkdownEditorDropZone--hasError .euiMarkdownEditorTextArea:focus { background-image: linear-gradient(to top, #BD271E, #BD271E 2px, transparent 2px, transparent 100%) !important; } .euiMarkdownFormat[class*=euiTextColor-default] .euiMarkdownFormat__blockquote { border-left-color: rgba(0, 0, 0, 0.15); } .euiMarkdownFormat[class*=euiTextColor-default] .euiHorizontalRule { background-color: rgba(0, 0, 0, 0.15); color: rgba(0, 0, 0, 0.15); } .euiMarkdownFormat[class*=euiTextColor-default] .euiMarkdownFormat__table { border-left: 1px solid rgba(0, 0, 0, 0.15); } .euiMarkdownFormat[class*=euiTextColor-default] .euiMarkdownFormat__table th, .euiMarkdownFormat[class*=euiTextColor-default] .euiMarkdownFormat__table td { border-top: 1px solid rgba(0, 0, 0, 0.15); border-bottom: 1px solid rgba(0, 0, 0, 0.15); } .euiMarkdownFormat[class*=euiTextColor-default] .euiMarkdownFormat__table th:last-child, .euiMarkdownFormat[class*=euiTextColor-default] .euiMarkdownFormat__table td:last-child { border-right: 1px solid rgba(0, 0, 0, 0.15); } .euiMarkdownFormat[class*=euiTextColor-default] .euiMarkdownFormat__table tr { border-top: 1px solid rgba(0, 0, 0, 0.15); } .euiMarkdownFormat[class*=euiTextColor-subdued] .euiMarkdownFormat__blockquote { border-left-color: #69707D; } .euiMarkdownFormat[class*=euiTextColor-subdued] .euiHorizontalRule { background-color: #69707D; color: #69707D; } .euiMarkdownFormat[class*=euiTextColor-subdued] .euiMarkdownFormat__table { border-left: 1px solid #69707D; } .euiMarkdownFormat[class*=euiTextColor-subdued] .euiMarkdownFormat__table th, .euiMarkdownFormat[class*=euiTextColor-subdued] .euiMarkdownFormat__table td { border-top: 1px solid #69707D; border-bottom: 1px solid #69707D; } .euiMarkdownFormat[class*=euiTextColor-subdued] .euiMarkdownFormat__table th:last-child, .euiMarkdownFormat[class*=euiTextColor-subdued] .euiMarkdownFormat__table td:last-child { border-right: 1px solid #69707D; } .euiMarkdownFormat[class*=euiTextColor-subdued] .euiMarkdownFormat__table tr { border-top: 1px solid #69707D; } .euiMarkdownFormat[class*=euiTextColor-success] .euiMarkdownFormat__blockquote { border-left-color: #00BFB3; } .euiMarkdownFormat[class*=euiTextColor-success] .euiHorizontalRule { background-color: #00BFB3; color: #00BFB3; } .euiMarkdownFormat[class*=euiTextColor-success] .euiMarkdownFormat__table { border-left: 1px solid #00BFB3; } .euiMarkdownFormat[class*=euiTextColor-success] .euiMarkdownFormat__table th, .euiMarkdownFormat[class*=euiTextColor-success] .euiMarkdownFormat__table td { border-top: 1px solid #00BFB3; border-bottom: 1px solid #00BFB3; } .euiMarkdownFormat[class*=euiTextColor-success] .euiMarkdownFormat__table th:last-child, .euiMarkdownFormat[class*=euiTextColor-success] .euiMarkdownFormat__table td:last-child { border-right: 1px solid #00BFB3; } .euiMarkdownFormat[class*=euiTextColor-success] .euiMarkdownFormat__table tr { border-top: 1px solid #00BFB3; } .euiMarkdownFormat[class*=euiTextColor-accent] .euiMarkdownFormat__blockquote { border-left-color: #F04E98; } .euiMarkdownFormat[class*=euiTextColor-accent] .euiHorizontalRule { background-color: #F04E98; color: #F04E98; } .euiMarkdownFormat[class*=euiTextColor-accent] .euiMarkdownFormat__table { border-left: 1px solid #F04E98; } .euiMarkdownFormat[class*=euiTextColor-accent] .euiMarkdownFormat__table th, .euiMarkdownFormat[class*=euiTextColor-accent] .euiMarkdownFormat__table td { border-top: 1px solid #F04E98; border-bottom: 1px solid #F04E98; } .euiMarkdownFormat[class*=euiTextColor-accent] .euiMarkdownFormat__table th:last-child, .euiMarkdownFormat[class*=euiTextColor-accent] .euiMarkdownFormat__table td:last-child { border-right: 1px solid #F04E98; } .euiMarkdownFormat[class*=euiTextColor-accent] .euiMarkdownFormat__table tr { border-top: 1px solid #F04E98; } .euiMarkdownFormat[class*=euiTextColor-warning] .euiMarkdownFormat__blockquote { border-left-color: #FEC514; } .euiMarkdownFormat[class*=euiTextColor-warning] .euiHorizontalRule { background-color: #FEC514; color: #FEC514; } .euiMarkdownFormat[class*=euiTextColor-warning] .euiMarkdownFormat__table { border-left: 1px solid #FEC514; } .euiMarkdownFormat[class*=euiTextColor-warning] .euiMarkdownFormat__table th, .euiMarkdownFormat[class*=euiTextColor-warning] .euiMarkdownFormat__table td { border-top: 1px solid #FEC514; border-bottom: 1px solid #FEC514; } .euiMarkdownFormat[class*=euiTextColor-warning] .euiMarkdownFormat__table th:last-child, .euiMarkdownFormat[class*=euiTextColor-warning] .euiMarkdownFormat__table td:last-child { border-right: 1px solid #FEC514; } .euiMarkdownFormat[class*=euiTextColor-warning] .euiMarkdownFormat__table tr { border-top: 1px solid #FEC514; } .euiMarkdownFormat[class*=euiTextColor-danger] .euiMarkdownFormat__blockquote { border-left-color: #BD271E; } .euiMarkdownFormat[class*=euiTextColor-danger] .euiHorizontalRule { background-color: #BD271E; color: #BD271E; } .euiMarkdownFormat[class*=euiTextColor-danger] .euiMarkdownFormat__table { border-left: 1px solid #BD271E; } .euiMarkdownFormat[class*=euiTextColor-danger] .euiMarkdownFormat__table th, .euiMarkdownFormat[class*=euiTextColor-danger] .euiMarkdownFormat__table td { border-top: 1px solid #BD271E; border-bottom: 1px solid #BD271E; } .euiMarkdownFormat[class*=euiTextColor-danger] .euiMarkdownFormat__table th:last-child, .euiMarkdownFormat[class*=euiTextColor-danger] .euiMarkdownFormat__table td:last-child { border-right: 1px solid #BD271E; } .euiMarkdownFormat[class*=euiTextColor-danger] .euiMarkdownFormat__table tr { border-top: 1px solid #BD271E; } .euiMarkdownFormat[class*=euiTextColor-ghost] .euiMarkdownFormat__blockquote { border-left-color: #FFF; } .euiMarkdownFormat[class*=euiTextColor-ghost] .euiHorizontalRule { background-color: #FFF; color: #FFF; } .euiMarkdownFormat[class*=euiTextColor-ghost] .euiMarkdownFormat__table { border-left: 1px solid #FFF; } .euiMarkdownFormat[class*=euiTextColor-ghost] .euiMarkdownFormat__table th, .euiMarkdownFormat[class*=euiTextColor-ghost] .euiMarkdownFormat__table td { border-top: 1px solid #FFF; border-bottom: 1px solid #FFF; } .euiMarkdownFormat[class*=euiTextColor-ghost] .euiMarkdownFormat__table th:last-child, .euiMarkdownFormat[class*=euiTextColor-ghost] .euiMarkdownFormat__table td:last-child { border-right: 1px solid #FFF; } .euiMarkdownFormat[class*=euiTextColor-ghost] .euiMarkdownFormat__table tr { border-top: 1px solid #FFF; } .euiMarkdownFormat[class*=euiTextColor-inherit] .euiMarkdownFormat__blockquote { border-left-color: currentColor; } .euiMarkdownFormat[class*=euiTextColor-inherit] .euiHorizontalRule { background-color: currentColor; color: currentColor; } .euiMarkdownFormat[class*=euiTextColor-inherit] .euiMarkdownFormat__table { border-left: 1px solid currentColor; } .euiMarkdownFormat[class*=euiTextColor-inherit] .euiMarkdownFormat__table th, .euiMarkdownFormat[class*=euiTextColor-inherit] .euiMarkdownFormat__table td { border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; } .euiMarkdownFormat[class*=euiTextColor-inherit] .euiMarkdownFormat__table th:last-child, .euiMarkdownFormat[class*=euiTextColor-inherit] .euiMarkdownFormat__table td:last-child { border-right: 1px solid currentColor; } .euiMarkdownFormat[class*=euiTextColor-inherit] .euiMarkdownFormat__table tr { border-top: 1px solid currentColor; } .euiMarkdownFormat[class*=euiTextColor-custom] .euiMarkdownFormat__blockquote { border-left-color: currentColor; } .euiMarkdownFormat[class*=euiTextColor-custom] .euiHorizontalRule { background-color: currentColor; color: currentColor; } .euiMarkdownFormat[class*=euiTextColor-custom] .euiMarkdownFormat__table { border-left: 1px solid currentColor; } .euiMarkdownFormat[class*=euiTextColor-custom] .euiMarkdownFormat__table th, .euiMarkdownFormat[class*=euiTextColor-custom] .euiMarkdownFormat__table td { border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; } .euiMarkdownFormat[class*=euiTextColor-custom] .euiMarkdownFormat__table th:last-child, .euiMarkdownFormat[class*=euiTextColor-custom] .euiMarkdownFormat__table td:last-child { border-right: 1px solid currentColor; } .euiMarkdownFormat[class*=euiTextColor-custom] .euiMarkdownFormat__table tr { border-top: 1px solid currentColor; } .euiMarkdownFormat .euiCheckbox { margin-bottom: 0 !important; } .euiMarkdownFormat .euiCheckbox .euiCheckbox__input + .euiCheckbox__square { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .euiMarkdownFormat .euiMarkdownFormat__table { display: block; width: 100%; overflow: auto; border-spacing: 0; border-collapse: collapse; } .euiMarkdownEditorFooter { display: -webkit-inline-flex; display: inline-flex; padding: 4px; border: 1px solid #D3DAE6; -webkit-align-items: center; align-items: center; background: #fafbfd; } .euiMarkdownEditorFooter__popover { width: 300px; } .euiMarkdownEditorFooter__actions { -webkit-flex: 1; flex: 1; display: -webkit-inline-flex; display: inline-flex; } .euiMarkdownEditorFooter__actions > button, .euiMarkdownEditorFooter__actions > span { margin-right: 4px; -webkit-align-self: center; align-self: center; } .euiMarkdownEditorFooter__actions .euiMarkdownEditorFooter__uploadError { position: relative; left: -1px; line-height: 1; border-radius: 6px; } .euiMarkdownEditorFooter__actions .euiMarkdownEditorFooter__uploadError > span { padding: 0 4px; } .euiMarkdownEditorFooter__helpButton > svg { width: 26px; } .euiMarkdownEditorPreview { scrollbar-color: rgba(105, 112, 125, 0.5) transparent; scrollbar-width: thin; background: #FFF; min-height: "150px"; overflow-y: auto; border: 1px solid #D3DAE6; padding: 12px; } .euiMarkdownEditorPreview::-webkit-scrollbar { width: 16px; height: 16px; } .euiMarkdownEditorPreview::-webkit-scrollbar-thumb { background-color: rgba(105, 112, 125, 0.5); background-clip: content-box; border-radius: 16px; border: 6px solid transparent; } .euiMarkdownEditorPreview::-webkit-scrollbar-corner, .euiMarkdownEditorPreview::-webkit-scrollbar-track { background-color: transparent; } .euiMarkdownEditorPreview-isReadOnly .euiCheckbox__input ~ .euiCheckbox__label { cursor: default; } .euiMarkdownEditorPreview-isReadOnly .euiCheckbox__input:focus:not(:checked) + .euiCheckbox__square { border-color: #939496; } .euiMarkdownEditorTextArea { 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; letter-spacing: normal; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-kerning: normal; font-kerning: normal; font-size: 14px; color: #343741; scrollbar-color: rgba(105, 112, 125, 0.5) transparent; scrollbar-width: thin; width: 100%; height: 100%; min-height: "150px"; padding: 12px; border: 1px solid #D3DAE6; border-bottom: none; line-height: 1.5; resize: vertical; background-color: #fbfcfd; background-repeat: no-repeat; background-size: 0% 100%; margin: 0; transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in; } .euiMarkdownEditorTextArea::-webkit-input-placeholder { color: #69707D; opacity: 1; } .euiMarkdownEditorTextArea::-moz-placeholder { color: #69707D; opacity: 1; } .euiMarkdownEditorTextArea::placeholder { color: #69707D; opacity: 1; } .euiMarkdownEditorTextArea::-webkit-scrollbar { width: 16px; height: 16px; } .euiMarkdownEditorTextArea::-webkit-scrollbar-thumb { background-color: rgba(105, 112, 125, 0.5); background-clip: content-box; border-radius: 16px; border: 6px solid transparent; } .euiMarkdownEditorTextArea::-webkit-scrollbar-corner, .euiMarkdownEditorTextArea::-webkit-scrollbar-track { background-color: transparent; } .euiMarkdownEditorTextArea:focus, .euiMarkdownEditor:focus-within .euiMarkdownEditorTextArea { background-color: white; background-image: linear-gradient(to top, #07C, #07C 2px, transparent 2px, transparent 100%); background-size: 100% 100%; } .euiMarkdownEditorTextArea-isReadOnly { background: #FFF; cursor: unset; } .euiMarkdownEditorTextArea-isReadOnly:focus, .euiMarkdownEditor:focus-within .euiMarkdownEditorTextArea-isReadOnly { background: none; } .euiMarkdownEditorToolbar { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; background: #F5F7FA; border: 1px solid #D3DAE6; border-color: #D3DAE6; border-bottom: none; padding: 4px; } .euiMarkdownEditorToolbar__buttons { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex: 1; flex: 1; -webkit-align-items: center; align-items: center; } .euiMarkdownEditorToolbar__buttons > * { margin-right: 4px; } .euiMarkdownEditorToolbar__divider { content: ""; height: 24px; display: block; margin-left: 4px; padding-right: 4px; border-left: 1px solid #D3DAE6; } .euiMarkdownTooltip__icon { -webkit-transform: translateY(-1px); transform: translateY(-1px); } .euiNotificationEvent { display: -webkit-flex; display: flex; padding: 12px 0 12px 12px; border-bottom: 1px solid #D3DAE6; } .euiNotificationEvent:last-child { border-bottom: none; } .euiNotificationEvent--withReadState { padding: 12px 0 12px 8px; } .euiNotificationEvent__title { overflow-wrap: break-word !important; word-break: break-word; color: #1a1c21; font-size: 16px; font-size: 1.1428571429rem; line-height: 1.7142857143rem; font-weight: 700; display: -webkit-flex; display: flex; } .euiNotificationEvent__title.euiLink { color: #0071c2; } .euiNotificationEvent__title--isRead { color: #69707D !important; } .euiNotificationEvent__readButton { margin-right: 8px; } .euiNotificationEvent__content { -webkit-flex: 1; flex: 1; } .euiNotificationEvent__content > * + * { margin-top: 8px; margin-right: 12px; } .euiNotificationEventMeta { position: relative; display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin-right: 4px; min-height: 24px; } .euiNotificationEventMeta--hasContextMenu { padding-right: 24px; } .euiNotificationEventMeta__contextMenuWrapper { position: absolute; top: 0; right: 0; } .euiNotificationEventMeta__section { margin-right: 8px; } .euiNotificationEventMeta__section:first-child { display: -webkit-flex; display: flex; -webkit-flex: 1; flex: 1; -webkit-align-items: center; align-items: center; } .euiNotificationEventMeta__icon { margin-right: 8px; } .euiNotificationEventMeta__badge { max-width: 100%; display: inline-grid; } .euiNotificationEventMeta__time { font-size: 12px; color: #69707D; } .euiNotificationEventMessages { font-size: 14px; } .euiNotificationEventMessages__accordion { color: #69707D; } .euiNotificationEventMessages__accordionButton { color: #0071c2; } .euiNotificationEventMessages__accordionContent > * { padding-top: 8px; } .euiNotificationEventReadButton--isRead svg { fill: transparent; stroke-width: 1px; stroke: #D3DAE6; } .euiNotificationEventReadIcon { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; height: 24px; margin: 0 4px; } .euiNotificationEventReadIcon--isRead svg { fill: transparent; stroke-width: 1px; stroke: #D3DAE6; } .euiSplitPanel { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; min-width: 0; overflow: hidden; } .euiSplitPanel .euiSplitPanel__inner { -webkit-flex-basis: 0%; flex-basis: 0%; -webkit-transform: none !important; transform: none !important; box-shadow: none !important; } .euiSplitPanel--row { -webkit-flex-direction: row; flex-direction: row; } .euiSplitPanel--row.euiSplitPanel-isResponsive { -webkit-flex-direction: column; flex-direction: column; } .euiPageContent { width: 100%; min-width: 0; } .euiPageContent.euiPageContent--borderRadiusNone { border-left-width: 0; border-right-width: 0; border-bottom-width: 0; } .euiPageContent.euiPageContent--verticalCenter { -webkit-align-self: center; align-self: center; margin-top: auto; margin-bottom: auto; -webkit-flex-grow: 0; flex-grow: 0; } .euiPageContent.euiPageContent--horizontalCenter { width: auto; margin-left: auto; margin-right: auto; -webkit-flex-grow: 0; flex-grow: 0; } .euiPageContentBody--restrictWidth-default, .euiPageContentBody--restrictWidth-custom { margin-left: auto; margin-right: auto; width: 100%; } .euiPageContentBody--restrictWidth-default { max-width: 1200px; } .euiPageContentBody--paddingSmall { padding: 8px; } .euiPageContentBody--paddingMedium { padding: 16px; } .euiPageContentBody--paddingLarge { padding: 24px; } .euiPageContentHeader { display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center; } .euiPageContent[class*=paddingSmall] .euiPageContentHeader { margin-bottom: 8px; } .euiPageContent[class*=paddingMedium] .euiPageContentHeader { margin-bottom: 16px; } .euiPageContent[class*=paddingLarge] .euiPageContentHeader { margin-bottom: 24px; } @media only screen and (max-width: 574px) { .euiPageContentHeader--responsive { -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: flex-start; align-items: flex-start; } } @media only screen and (min-width: 575px) and (max-width: 767px) { .euiPageContentHeader--responsive { -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: flex-start; align-items: flex-start; } } .euiPageContentHeaderSection + .euiPageContentHeaderSection { margin-left: 32px; } @media only screen and (max-width: 574px) { .euiPageContent[class*=paddingSmall] .euiPageContentHeader--responsive .euiPageContentHeaderSection + .euiPageContentHeaderSection { margin-left: 0; margin-top: 4px; } .euiPageContent[class*=paddingMedium] .euiPageContentHeader--responsive .euiPageContentHeaderSection + .euiPageContentHeaderSection { margin-left: 0; margin-top: 8px; } .euiPageContent[class*=paddingLarge] .euiPageContentHeader--responsive .euiPageContentHeaderSection + .euiPageContentHeaderSection { margin-left: 0; margin-top: 12px; } } @media only screen and (min-width: 575px) and (max-width: 767px) { .euiPageContent[class*=paddingSmall] .euiPageContentHeader--responsive .euiPageContentHeaderSection + .euiPageContentHeaderSection { margin-left: 0; margin-top: 4px; } .euiPageContent[class*=paddingMedium] .euiPageContentHeader--responsive .euiPageContentHeaderSection + .euiPageContentHeaderSection { margin-left: 0; margin-top: 8px; } .euiPageContent[class*=paddingLarge] .euiPageContentHeader--responsive .euiPageContentHeaderSection + .euiPageContentHeaderSection { margin-left: 0; margin-top: 12px; } } /** * Note: Margin is added in _page.scss when EuiPage has `paddingSize` * 1. Prevent side bar width from changing when content width changes. */ .euiPageSideBar { min-width: 240px; -webkit-flex: 0 1 0%; flex: 0 1 0%; /* 1 */ } .euiPageSideBar--paddingSmall { padding: 8px; } .euiPageSideBar--paddingMedium { padding: 16px; } .euiPageSideBar--paddingLarge { padding: 24px; } @media only screen and (max-width: 574px) { .euiPageSideBar { width: 100%; } } @media only screen and (min-width: 575px) and (max-width: 767px) { .euiPageSideBar { width: 100%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .euiPageSideBar--sticky { scrollbar-color: rgba(105, 112, 125, 0.5) transparent; scrollbar-width: thin; overflow-y: auto; -webkit-flex-grow: 1; flex-grow: 1; position: -webkit-sticky; position: sticky; max-height: 100vh; top: 0; } .euiPageSideBar--sticky::-webkit-scrollbar { width: 16px; height: 16px; } .euiPageSideBar--sticky::-webkit-scrollbar-thumb { background-color: rgba(105, 112, 125, 0.5); background-clip: content-box; border-radius: 16px; border: 6px solid transparent; } .euiPageSideBar--sticky::-webkit-scrollbar-corner, .euiPageSideBar--sticky::-webkit-scrollbar-track { background-color: transparent; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .euiPageSideBar--sticky { scrollbar-color: rgba(105, 112, 125, 0.5) transparent; scrollbar-width: thin; overflow-y: auto; -webkit-flex-grow: 1; flex-grow: 1; position: -webkit-sticky; position: sticky; max-height: 100vh; top: 0; } .euiPageSideBar--sticky::-webkit-scrollbar { width: 16px; height: 16px; } .euiPageSideBar--sticky::-webkit-scrollbar-thumb { background-color: rgba(105, 112, 125, 0.5); background-clip: content-box; border-radius: 16px; border: 6px solid transparent; } .euiPageSideBar--sticky::-webkit-scrollbar-corner, .euiPageSideBar--sticky::-webkit-scrollbar-track { background-color: transparent; } } @media only screen and (min-width: 1200px) { .euiPageSideBar--sticky { scrollbar-color: rgba(105, 112, 125, 0.5) transparent; scrollbar-width: thin; overflow-y: auto; -webkit-flex-grow: 1; flex-grow: 1; position: -webkit-sticky; position: sticky; max-height: 100vh; top: 0; } .euiPageSideBar--sticky::-webkit-scrollbar { width: 16px; height: 16px; } .euiPageSideBar--sticky::-webkit-scrollbar-thumb { background-color: rgba(105, 112, 125, 0.5); background-clip: content-box; border-radius: 16px; border: 6px solid transparent; } .euiPageSideBar--sticky::-webkit-scrollbar-corner, .euiPageSideBar--sticky::-webkit-scrollbar-track { background-color: transparent; } } .euiTreeView__wrapper .euiTreeView { margin: 0; list-style-type: none; } .euiTreeView .euiTreeView { padding-left: 24px; } .euiTreeView__node { max-height: 32px; line-height: 32px; } .euiTreeView__node--expanded { max-height: 100vh; } .euiTreeView__nodeInner { max-width: 100%; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; padding-left: 8px; display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: center; align-items: center; height: 32px; border-radius: 6px; width: 100%; -moz-text-align-last: left; text-align-last: left; } .euiTreeView__nodeInner:focus { outline: 2px solid currentColor; outline-offset: -2px; } .euiTreeView__nodeInner:focus:focus-visible { outline-style: auto; } .euiTreeView__nodeInner:focus:not(:focus-visible) { outline: none; } .euiTreeView__nodeInner:hover, .euiTreeView__nodeInner:active, .euiTreeView__nodeInner:focus { background-color: rgba(52, 55, 65, 0.1); } .euiTreeView__nodeInner .euiTreeView__iconPlaceholder { width: 32px; } .euiTreeView__nodeLabel { max-width: 100%; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .euiTreeView__iconWrapper { margin-top: -2px; margin-right: 8px; } .euiTreeView__iconWrapper .euiToken { margin-top: 2px; } .euiTreeView--compressed .euiTreeView__node { max-height: 24px; line-height: 24px; } .euiTreeView--compressed .euiTreeView__node .euiTreeView__nodeInner { height: 24px; } .euiTreeView--compressed .euiTreeView__node .euiTreeView__iconWrapper { margin: 0 6px 0 0; } .euiTreeView--compressed .euiTreeView__node .euiTreeView__nodeLabel { margin-top: -1px; } .euiTreeView--compressed .euiTreeView__node .euiTreeView__iconPlaceholder { width: 24px; } .euiTreeView--compressed .euiTreeView__node--expanded { max-height: 100vh; } .euiTreeView--withArrows .euiTreeView__expansionArrow { margin-right: 4px; } .euiTreeView--withArrows.euiTreeView .euiTreeView__nodeInner--withArrows .euiTreeView__iconWrapper { margin-left: 0; } .euiTreeView--withArrows.euiTreeView .euiTreeView__iconWrapper { margin-left: 20px; } .euiTreeView--withArrows.euiTreeView--compressed .euiTreeView__nodeInner--withArrows .euiTreeView__iconWrapper { margin-left: 0; } .euiTreeView--withArrows.euiTreeView--compressed .euiTreeView__iconWrapper { margin-left: 16px; } .euiResizableButton { position: relative; -webkit-flex-shrink: 0; flex-shrink: 0; z-index: 1; } .euiResizableButton::before, .euiResizableButton::after { content: ""; display: block; position: absolute; top: 50%; left: 50%; background-color: #343741; transition: width 150ms ease, height 150ms ease, background-color 150ms ease, -webkit-transform 150ms ease; transition: width 150ms ease, height 150ms ease, transform 150ms ease, background-color 150ms ease; transition: width 150ms ease, height 150ms ease, transform 150ms ease, background-color 150ms ease, -webkit-transform 150ms ease; } .euiResizableButton.euiResizableButton--horizontal { cursor: col-resize; width: 16px; margin-left: -8px; margin-right: -8px; } .euiResizableButton.euiResizableButton--horizontal::before, .euiResizableButton.euiResizableButton--horizontal::after { width: 1px; height: 12px; } .euiResizableButton.euiResizableButton--horizontal::before { -webkit-transform: translate(-2px, -50%); transform: translate(-2px, -50%); } .euiResizableButton.euiResizableButton--horizontal::after { -webkit-transform: translate(1px, -50%); transform: translate(1px, -50%); } .euiResizableButton.euiResizableButton--vertical { cursor: row-resize; height: 16px; margin-top: -8px; margin-bottom: -8px; } .euiResizableButton.euiResizableButton--vertical::before, .euiResizableButton.euiResizableButton--vertical::after { width: 12px; height: 1px; } .euiResizableButton.euiResizableButton--vertical::before { -webkit-transform: translate(-50%, -2px); transform: translate(-50%, -2px); } .euiResizableButton.euiResizableButton--vertical::after { -webkit-transform: translate(-50%, 1px); transform: translate(-50%, 1px); } .euiResizableButton:hover:not(:disabled)::before, .euiResizableButton:hover:not(:disabled)::after { background-color: #98A2B3; transition-delay: 150ms; } .euiResizableButton:focus:not(:disabled) { background-color: rgba(0, 119, 204, 0.1); } .euiResizableButton:focus:not(:disabled)::before, .euiResizableButton:focus:not(:disabled)::after { background-color: #07C; transition: width 150ms ease, height 150ms ease, -webkit-transform 150ms ease; transition: width 150ms ease, height 150ms ease, transform 150ms ease; transition: width 150ms ease, height 150ms ease, transform 150ms ease, -webkit-transform 150ms ease; transition-delay: 75ms; } .euiResizableButton:hover:not(:disabled).euiResizableButton--horizontal::before, .euiResizableButton:hover:not(:disabled).euiResizableButton--horizontal::after, .euiResizableButton:focus:not(:disabled).euiResizableButton--horizontal::before, .euiResizableButton:focus:not(:disabled).euiResizableButton--horizontal::after { height: 100%; } .euiResizableButton:hover:not(:disabled).euiResizableButton--horizontal::before, .euiResizableButton:focus:not(:disabled).euiResizableButton--horizontal::before { -webkit-transform: translate(-1px, -50%); transform: translate(-1px, -50%); } .euiResizableButton:hover:not(:disabled).euiResizableButton--horizontal::after, .euiResizableButton:focus:not(:disabled).euiResizableButton--horizontal::after { -webkit-transform: translate(0, -50%); transform: translate(0, -50%); } .euiResizableButton:hover:not(:disabled).euiResizableButton--vertical::before, .euiResizableButton:hover:not(:disabled).euiResizableButton--vertical::after, .euiResizableButton:focus:not(:disabled).euiResizableButton--vertical::before, .euiResizableButton:focus:not(:disabled).euiResizableButton--vertical::after { width: 100%; } .euiResizableButton:hover:not(:disabled).euiResizableButton--vertical::before, .euiResizableButton:focus:not(:disabled).euiResizableButton--vertical::before { -webkit-transform: translate(-50%, -1px); transform: translate(-50%, -1px); } .euiResizableButton:hover:not(:disabled).euiResizableButton--vertical::after, .euiResizableButton:focus:not(:disabled).euiResizableButton--vertical::after { -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } .euiResizableButton:disabled { display: none !important; } /** * 1. The default position of the button should always be `middle`, so * those position styles aren't restricted to a class * 2. When collpsed, the button itself is the full collapsed area and we use * flex to align the icon within */ .euiResizableToggleButton { box-shadow: 0 0.8px 0.8px rgba(0, 0, 0, 0.04), 0 2.3px 2px rgba(0, 0, 0, 0.03); position: absolute; z-index: 2; -webkit-animation: none !important; animation: none !important; transition-property: background, box-shadow; background: #FFF; } .euiResizableToggleButton:focus { box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1), 0 3.6px 13px rgba(0, 0, 0, 0.07), 0 8.4px 23px rgba(0, 0, 0, 0.06), 0 23px 35px rgba(0, 0, 0, 0.05); } .euiResizableToggleButton-isCollapsed { box-shadow: none; background: transparent; border-radius: 0; } .euiResizableToggleButton:not(:focus):not(:active):not(.euiResizableToggleButton-isVisible):not(.euiResizableToggleButton-isCollapsed) { position: absolute; top: auto; left: -10000px; width: 1px; height: 1px; clip: rect(0 0 0 0); -webkit-clip-path: inset(50%); clip-path: inset(50%); overflow: hidden; margin: -1px; } .euiResizableToggleButton--horizontal.euiResizableToggleButton.euiResizableToggleButton--after { right: 0; top: 50%; /* 1 */ -webkit-transform: translate(50%, -50%); transform: translate(50%, -50%); /* 1 */ } .euiResizableToggleButton--horizontal.euiResizableToggleButton.euiResizableToggleButton--after.euiResizableToggleButton--top { top: 0; -webkit-transform: translate(50%, 16px); transform: translate(50%, 16px); } .euiResizableToggleButton--horizontal.euiResizableToggleButton.euiResizableToggleButton--after.euiResizableToggleButton--bottom { top: auto; bottom: 0; -webkit-transform: translate(50%, -16px); transform: translate(50%, -16px); } .euiResizableToggleButton--horizontal.euiResizableToggleButton.euiResizableToggleButton--before { left: 0; top: 50%; /* 1 */ -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); /* 1 */ } .euiResizableToggleButton--horizontal.euiResizableToggleButton.euiResizableToggleButton--before.euiResizableToggleButton--top { top: 0; -webkit-transform: translate(-50%, 16px); transform: translate(-50%, 16px); } .euiResizableToggleButton--horizontal.euiResizableToggleButton.euiResizableToggleButton--before.euiResizableToggleButton--bottom { top: auto; bottom: 0; -webkit-transform: translate(-50%, -16px); transform: translate(-50%, -16px); } .euiResizableToggleButton--horizontal.euiResizableToggleButton.euiResizableToggleButton-isCollapsed { top: 0 !important; bottom: 0 !important; -webkit-transform: none !important; transform: none !important; height: 100%; } .euiResizableToggleButton--horizontal.euiResizableToggleButton.euiResizableToggleButton-isCollapsed.euiResizableToggleButton--top { padding-top: 16px; -webkit-align-items: flex-start; align-items: flex-start; /* 2 */ } .euiResizableToggleButton--horizontal.euiResizableToggleButton.euiResizableToggleButton-isCollapsed.euiResizableToggleButton--bottom { padding-bottom: 16px; -webkit-align-items: flex-end; align-items: flex-end; /* 2 */ } .euiResizableToggleButton--vertical.euiResizableToggleButton.euiResizableToggleButton--after { top: 100%; left: 50%; /* 1 */ -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); /* 1 */ } .euiResizableToggleButton--vertical.euiResizableToggleButton.euiResizableToggleButton--after.euiResizableToggleButton--left { left: 0; -webkit-transform: translate(16px, -50%); transform: translate(16px, -50%); } .euiResizableToggleButton--vertical.euiResizableToggleButton.euiResizableToggleButton--after.euiResizableToggleButton--right { left: auto; right: 0; -webkit-transform: translate(-16px, -50%); transform: translate(-16px, -50%); } .euiResizableToggleButton--vertical.euiResizableToggleButton.euiResizableToggleButton--before { bottom: 100%; left: 50%; /* 1 */ -webkit-transform: translate(-50%, 50%); transform: translate(-50%, 50%); /* 1 */ } .euiResizableToggleButton--vertical.euiResizableToggleButton.euiResizableToggleButton--before.euiResizableToggleButton--left { left: 0; -webkit-transform: translate(16px, 50%); transform: translate(16px, 50%); } .euiResizableToggleButton--vertical.euiResizableToggleButton.euiResizableToggleButton--before.euiResizableToggleButton--right { left: auto; right: 0; -webkit-transform: translate(-16px, 50%); transform: translate(-16px, 50%); } .euiResizableToggleButton--vertical.euiResizableToggleButton.euiResizableToggleButton-isCollapsed { top: 0 !important; bottom: 0 !important; left: 0 !important; -webkit-transform: none !important; transform: none !important; width: 100%; } .euiResizableToggleButton--vertical.euiResizableToggleButton.euiResizableToggleButton-isCollapsed.euiResizableToggleButton--left { padding-left: 16px; -webkit-justify-content: flex-start; justify-content: flex-start; /* 2 */ } .euiResizableToggleButton--vertical.euiResizableToggleButton.euiResizableToggleButton-isCollapsed.euiResizableToggleButton--right { padding-right: 16px; -webkit-justify-content: flex-end; justify-content: flex-end; /* 2 */ } .euiSideNav__mobileToggle { height: auto; border-bottom: 1px solid #D3DAE6; width: 100%; text-align: left; border-radius: 0 !important; font-size: 16px; padding: 0 16px; } .euiSideNav__mobileToggle .euiSideNav__mobileToggleText { padding: 16px 0; } .euiSideNav__mobileToggle .euiSideNav__mobileToggleContent { -webkit-justify-content: space-between; justify-content: space-between; } .euiSideNav__heading { margin-bottom: 24px; } @media only screen and (max-width: 574px) { .euiSideNav__contentMobile-xs { overflow: hidden; visibility: hidden; opacity: 0; max-height: 0; padding: 0 24px; } .euiSideNav-isOpenMobile .euiSideNav__contentMobile-xs { visibility: visible; opacity: 1; padding: 24px; max-height: 5000px; /* 1 */ } } @media only screen and (max-width: 574px) and (prefers-reduced-motion: no-preference) { .euiSideNav-isOpenMobile .euiSideNav__contentMobile-xs { transition: all 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } } @media only screen and (min-width: 575px) and (max-width: 767px) { .euiSideNav__contentMobile-s { overflow: hidden; visibility: hidden; opacity: 0; max-height: 0; padding: 0 24px; } .euiSideNav-isOpenMobile .euiSideNav__contentMobile-s { visibility: visible; opacity: 1; padding: 24px; max-height: 5000px; /* 1 */ } } @media only screen and (min-width: 575px) and (max-width: 767px) and (prefers-reduced-motion: no-preference) { .euiSideNav-isOpenMobile .euiSideNav__contentMobile-s { transition: all 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } } @media only screen and (min-width: 768px) and (max-width: 991px) { .euiSideNav__contentMobile-m { overflow: hidden; visibility: hidden; opacity: 0; max-height: 0; padding: 0 24px; } .euiSideNav-isOpenMobile .euiSideNav__contentMobile-m { visibility: visible; opacity: 1; padding: 24px; max-height: 5000px; /* 1 */ } } @media only screen and (min-width: 768px) and (max-width: 991px) and (prefers-reduced-motion: no-preference) { .euiSideNav-isOpenMobile .euiSideNav__contentMobile-m { transition: all 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .euiSideNav__contentMobile-l { overflow: hidden; visibility: hidden; opacity: 0; max-height: 0; padding: 0 24px; } .euiSideNav-isOpenMobile .euiSideNav__contentMobile-l { visibility: visible; opacity: 1; padding: 24px; max-height: 5000px; /* 1 */ } } @media only screen and (min-width: 992px) and (max-width: 1199px) and (prefers-reduced-motion: no-preference) { .euiSideNav-isOpenMobile .euiSideNav__contentMobile-l { transition: all 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } } @media only screen and (min-width: 1200px) { .euiSideNav__contentMobile-xl { overflow: hidden; visibility: hidden; opacity: 0; max-height: 0; padding: 0 24px; } .euiSideNav-isOpenMobile .euiSideNav__contentMobile-xl { visibility: visible; opacity: 1; padding: 24px; max-height: 5000px; /* 1 */ } } @media only screen and (min-width: 1200px) and (prefers-reduced-motion: no-preference) { .euiSideNav-isOpenMobile .euiSideNav__contentMobile-xl { transition: all 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } } /** * 1. Text-align defaults to center, so we have to override that. * 2. Color the text at the item level and then have the button inherit so overrides are easier * 3. Enable ellipsis overflow to work (https://css-tricks.com/flexbox-truncated-text/) * 4. Restrict the underline to the button __label so it doesn't affect other components that might live within */ .euiSideNavItemButton { font-size: 14px; font-size: 1rem; line-height: 1.7142857143rem; text-align: left; /* 1 */ display: block; width: 100%; padding: 2px 0; color: inherit; /* 2 */ } .euiSideNavItemButton.euiSideNavItemButton--isClickable:not(:disabled):hover { cursor: pointer; } .euiSideNavItemButton.euiSideNavItemButton--isClickable:not(:disabled):hover .euiSideNavItemButton__label, .euiSideNavItemButton.euiSideNavItemButton--isClickable:not(:disabled):focus .euiSideNavItemButton__label { text-decoration: underline; /* 4 */ } .euiSideNavItemButton.euiSideNavItemButton-isSelected { color: #006bb8; font-weight: 700; } .euiSideNavItemButton.euiSideNavItemButton-isSelected .euiSideNavItemButton__label { text-decoration: underline; /* 4 */ } .euiSideNavItemButton:disabled { cursor: not-allowed; text-decoration: none; color: #a2abba; } .euiSideNavItemButton__content { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; } .euiSideNavItemButton__icon { margin-right: 8px; } .euiSideNavItemButton__labelContainer { min-width: 0; /* 3 */ } .euiSideNavItemButton__label { -webkit-flex-grow: 1; flex-grow: 1; } .euiSideNavItemButton__label--truncated { max-width: 100%; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .euiSideNavItem--root { /** * 1. Create padding around focus area without indenting the item itself. */ } .euiSideNavItem--root.euiSideNavItem--rootIcon > .euiSideNavItem__items { margin-left: 24px; } .euiSideNavItem--root > .euiSideNavItemButton { margin-bottom: 8px; padding: 0; padding-left: 8px; /* 1 */ padding-right: 8px; /* 1 */ margin-left: -8px; /* 1 */ width: calc(100% + 16px); /* 1 */ } .euiSideNavItem--root > .euiSideNavItemButton .euiSideNavItemButton__label { overflow-wrap: break-word !important; word-break: break-word; color: #1a1c21; font-size: 16px; font-size: 1.1428571429rem; line-height: 1.7142857143rem; font-weight: 700; color: inherit; } .euiSideNavItem--root > .euiSideNavItem__items { position: static; margin-left: 0; } .euiSideNavItem--root > .euiSideNavItem__items::after { display: none; } .euiSideNavItem--root + .euiSideNavItem--root { margin-top: 32px; } .euiSideNavItem--trunk { color: #1a1c21; /* 2 */ /** * 1. Create padding around focus area without indenting the item itself. */ } .euiSideNavItem--trunk > .euiSideNavItemButton { padding-left: 8px; /* 1 */ padding-right: 8px; /* 1 */ margin-left: -8px; /* 1 */ width: calc(100% + 16px); /* 1 */ } .euiSideNavItem--trunk > .euiSideNavItem__items { margin-left: 8px; width: 100%; } .euiSideNavItem--branch { /** * 1. Draw the vertical line to group an expanded item's child items together. */ position: relative; color: #646a77; /* 2 */ /** * 2. Absolutely position the horizontal tick connecting the item to the vertical line. */ } .euiSideNavItem--branch::after { /* 1 */ position: absolute; content: ""; top: 0; bottom: 0; width: 1px; background: #D3DAE6; left: 0; } .euiSideNavItem--branch:last-of-type::after { height: 12px; } .euiSideNavItem--branch > .euiSideNavItemButton { position: relative; /* 2 */ padding-left: 8px; padding-right: 8px; /* 2 */ } .euiSideNavItem--branch > .euiSideNavItemButton::after { position: absolute; /* 2 */ content: ""; top: 12px; left: 0; width: 4px; height: 1px; background: #D3DAE6; } .euiSideNavItem--branch > .euiSideNavItem__items { margin-left: 16px; } .euiSideNavItem--emphasized { background: rgba(211, 218, 230, 0.3); color: #1a1c21; box-shadow: 100px 0 0 0 rgba(211, 218, 230, 0.3), -100px 0 0 0 rgba(211, 218, 230, 0.3); } .euiSideNavItem--emphasized > .euiSideNavItemButton { font-weight: 700; } .euiSideNavItem--emphasized .euiSideNavItem--emphasized { background: transparent; box-shadow: none; } .euiSearchBar__searchHolder { min-width: 200px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .euiSearchBar__filtersHolder { max-width: calc(100% - 16px); } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .euiSearchBar__filtersHolder { max-width: calc(100% - 16px); } } @media only screen and (min-width: 1200px) { .euiSearchBar__filtersHolder { max-width: calc(100% - 16px); } } .euiSelectable { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; } .euiSelectable-fullHeight { height: 100%; } .euiSelectableList:has(:focus-visible) { outline: 2px solid currentColor; outline-style: auto; outline-offset: 1px; } .euiSelectableList-fullHeight { -webkit-flex-grow: 1; flex-grow: 1; } .euiSelectableList-bordered { overflow: hidden; border: 1px solid #D3DAE6; border-radius: 6px; } .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-color: rgba(105, 112, 125, 0.5) transparent; scrollbar-width: thin; } .euiSelectableList__list::-webkit-scrollbar { width: 16px; height: 16px; } .euiSelectableList__list::-webkit-scrollbar-thumb { background-color: rgba(105, 112, 125, 0.5); background-clip: content-box; border-radius: 16px; border: 6px solid transparent; } .euiSelectableList__list::-webkit-scrollbar-corner, .euiSelectableList__list::-webkit-scrollbar-track { background-color: transparent; } .euiSelectableList__list:focus, .euiSelectableList__list > ul:focus { outline: none; } .euiSelectableList__groupLabel { overflow-wrap: break-word !important; word-break: break-word; color: #1a1c21; font-size: 12px; font-size: 0.8571428571rem; line-height: 1.1428571429rem; font-weight: 700; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; border-bottom: 1px solid #eef2f7; padding: 4px 12px; } .euiSelectableListItem { font-size: 14px; font-size: 1rem; line-height: 1.7142857143rem; display: -webkit-inline-flex; display: inline-flex; width: 100%; text-align: left; cursor: pointer; overflow: hidden; } .euiSelectableListItem:not(:last-of-type) { border-bottom: 1px solid #eef2f7; } .euiSelectableListItem-isFocused:not([aria-disabled=true]), .euiSelectableListItem:hover:not([aria-disabled=true]) { color: #0071c2; background-color: rgba(0, 119, 204, 0.1); } .euiSelectableListItem-isFocused:not([aria-disabled=true]) .euiSelectableListItem__text, .euiSelectableListItem:hover:not([aria-disabled=true]) .euiSelectableListItem__text { text-decoration: underline; } .euiSelectableListItem[aria-disabled=true] { color: #98A2B3; cursor: not-allowed; } .euiSelectableListItem--paddingSmall .euiSelectableListItem__content { padding: 4px 12px; } .euiSelectableListItem__content { width: 100%; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; } .euiSelectableListItem__icon, .euiSelectableListItem__prepend { margin-right: 12px; -webkit-flex-shrink: 0; flex-shrink: 0; } .euiSelectableListItem__append { margin-left: 12px; -webkit-flex-shrink: 0; flex-shrink: 0; } .euiSelectableListItem__text { -webkit-flex-grow: 1; flex-grow: 1; } .euiSelectableListItem__text--truncate { max-width: 100%; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } /** * 1. Prevent really long input from overflowing the container. */ .euiSelectableMessage { padding: 8px; text-align: center; word-wrap: break-word; /* 1 */ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; } .euiSelectableMessage--bordered { overflow: hidden; border: 1px solid #D3DAE6; border-radius: 6px; } .euiSelectableTemplateSitewide__listItem .euiSelectableListItem__text { text-decoration: none !important; } .euiSelectableTemplateSitewide__listItem[class*=-isFocused]:not([aria-disabled=true]) .euiSelectableTemplateSitewide__listItemTitle, .euiSelectableTemplateSitewide__listItem:hover:not([aria-disabled=true]) .euiSelectableTemplateSitewide__listItemTitle { text-decoration: underline; } .euiSelectableTemplateSitewide__optionMetasList { display: block; margin-top: 4px; font-size: 12px; color: #69707D; } .euiSelectableTemplateSitewide__optionMeta:not(:last-of-type)::after { content: "•"; margin: 0 4px; color: #69707D; } .euiSelectableTemplateSitewide__optionMeta--application { color: #4a7194; font-weight: 500; } .euiSelectableTemplateSitewide__optionMeta--deployment { color: #387765; font-weight: 500; } .euiSelectableTemplateSitewide__optionMeta--article { color: #7c609e; font-weight: 500; } .euiSelectableTemplateSitewide__optionMeta--case { color: #aa4b38; font-weight: 500; } .euiSelectableTemplateSitewide__optionMeta--platform { color: #7a6c31; font-weight: 500; } .euiSuggestItem { display: -webkit-flex; display: flex; -webkit-align-items: flex-start; align-items: flex-start; font-size: 12px; line-height: 16px; color: #343741; -webkit-flex: 1 1 100%; flex: 1 1 100%; max-width: 100%; } .euiSuggestItem--truncate .euiSuggestItem__label, .euiSuggestItem--truncate .euiSuggestItem__description { max-width: 100%; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } button.euiSuggestItem { width: 100%; text-align: left; } button.euiSuggestItem:hover, button.euiSuggestItem:focus { cursor: pointer; background-color: rgba(0, 119, 204, 0.1); } button.euiSuggestItem:hover .euiSuggestItem__label, button.euiSuggestItem:focus .euiSuggestItem__label { text-decoration: underline; } .euiSuggestItem__type--tint0 { background-color: #e0f1ed; color: #357160; } .euiSuggestItem__type--tint1 { background-color: #e2ebf4; color: #466b8d; } .euiSuggestItem__type--tint2 { background-color: #f7e2e9; color: #a34a68; } .euiSuggestItem__type--tint3 { background-color: #ebe5f2; color: #765b96; } .euiSuggestItem__type--tint4 { background-color: #f5ebf0; color: #865f74; } .euiSuggestItem__type--tint5 { background-color: #f8f3e1; color: #7a6c31; } .euiSuggestItem__type--tint6 { background-color: #f2efea; color: #756a56; } .euiSuggestItem__type--tint7 { background-color: #f8eade; color: #915c2e; } .euiSuggestItem__type--tint8 { background-color: #f0e3e1; color: #92564a; } .euiSuggestItem__type--tint9 { background-color: #fbe3df; color: #aa4b38; } .euiSuggestItem__type--tint10 { background-color: #e4e5e8; color: #5f6571; } .euiSuggestItem__type { display: -webkit-flex; display: flex; -webkit-flex: 0 0 auto; flex: 0 0 auto; -webkit-justify-content: center; justify-content: center; -webkit-align-items: flex-start; align-items: flex-start; padding-top: 8px; width: 32px; min-height: 32px; -webkit-align-self: stretch; align-self: stretch; } .euiSuggestItem__label, .euiSuggestItem__description { overflow-wrap: break-word !important; word-break: break-word; display: inline-block; padding: 8px; -webkit-flex-grow: 1; flex-grow: 1; } .euiSuggestItem__label { font-family: "Roboto Mono", Consolas, Menlo, Courier, monospace; } .euiSuggestItem__label.euiSuggestItem__label--width20 { -webkit-flex-basis: calc(20% - 16px); flex-basis: calc(20% - 16px); min-width: calc(20% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width21 { -webkit-flex-basis: calc(21% - 16px); flex-basis: calc(21% - 16px); min-width: calc(21% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width22 { -webkit-flex-basis: calc(22% - 16px); flex-basis: calc(22% - 16px); min-width: calc(22% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width23 { -webkit-flex-basis: calc(23% - 16px); flex-basis: calc(23% - 16px); min-width: calc(23% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width24 { -webkit-flex-basis: calc(24% - 16px); flex-basis: calc(24% - 16px); min-width: calc(24% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width25 { -webkit-flex-basis: calc(25% - 16px); flex-basis: calc(25% - 16px); min-width: calc(25% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width26 { -webkit-flex-basis: calc(26% - 16px); flex-basis: calc(26% - 16px); min-width: calc(26% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width27 { -webkit-flex-basis: calc(27% - 16px); flex-basis: calc(27% - 16px); min-width: calc(27% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width28 { -webkit-flex-basis: calc(28% - 16px); flex-basis: calc(28% - 16px); min-width: calc(28% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width29 { -webkit-flex-basis: calc(29% - 16px); flex-basis: calc(29% - 16px); min-width: calc(29% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width30 { -webkit-flex-basis: calc(30% - 16px); flex-basis: calc(30% - 16px); min-width: calc(30% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width31 { -webkit-flex-basis: calc(31% - 16px); flex-basis: calc(31% - 16px); min-width: calc(31% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width32 { -webkit-flex-basis: calc(32% - 16px); flex-basis: calc(32% - 16px); min-width: calc(32% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width33 { -webkit-flex-basis: calc(33% - 16px); flex-basis: calc(33% - 16px); min-width: calc(33% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width34 { -webkit-flex-basis: calc(34% - 16px); flex-basis: calc(34% - 16px); min-width: calc(34% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width35 { -webkit-flex-basis: calc(35% - 16px); flex-basis: calc(35% - 16px); min-width: calc(35% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width36 { -webkit-flex-basis: calc(36% - 16px); flex-basis: calc(36% - 16px); min-width: calc(36% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width37 { -webkit-flex-basis: calc(37% - 16px); flex-basis: calc(37% - 16px); min-width: calc(37% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width38 { -webkit-flex-basis: calc(38% - 16px); flex-basis: calc(38% - 16px); min-width: calc(38% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width39 { -webkit-flex-basis: calc(39% - 16px); flex-basis: calc(39% - 16px); min-width: calc(39% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width40 { -webkit-flex-basis: calc(40% - 16px); flex-basis: calc(40% - 16px); min-width: calc(40% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width41 { -webkit-flex-basis: calc(41% - 16px); flex-basis: calc(41% - 16px); min-width: calc(41% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width42 { -webkit-flex-basis: calc(42% - 16px); flex-basis: calc(42% - 16px); min-width: calc(42% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width43 { -webkit-flex-basis: calc(43% - 16px); flex-basis: calc(43% - 16px); min-width: calc(43% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width44 { -webkit-flex-basis: calc(44% - 16px); flex-basis: calc(44% - 16px); min-width: calc(44% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width45 { -webkit-flex-basis: calc(45% - 16px); flex-basis: calc(45% - 16px); min-width: calc(45% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width46 { -webkit-flex-basis: calc(46% - 16px); flex-basis: calc(46% - 16px); min-width: calc(46% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width47 { -webkit-flex-basis: calc(47% - 16px); flex-basis: calc(47% - 16px); min-width: calc(47% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width48 { -webkit-flex-basis: calc(48% - 16px); flex-basis: calc(48% - 16px); min-width: calc(48% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width49 { -webkit-flex-basis: calc(49% - 16px); flex-basis: calc(49% - 16px); min-width: calc(49% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width50 { -webkit-flex-basis: calc(50% - 16px); flex-basis: calc(50% - 16px); min-width: calc(50% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width51 { -webkit-flex-basis: calc(51% - 16px); flex-basis: calc(51% - 16px); min-width: calc(51% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width52 { -webkit-flex-basis: calc(52% - 16px); flex-basis: calc(52% - 16px); min-width: calc(52% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width53 { -webkit-flex-basis: calc(53% - 16px); flex-basis: calc(53% - 16px); min-width: calc(53% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width54 { -webkit-flex-basis: calc(54% - 16px); flex-basis: calc(54% - 16px); min-width: calc(54% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width55 { -webkit-flex-basis: calc(55% - 16px); flex-basis: calc(55% - 16px); min-width: calc(55% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width56 { -webkit-flex-basis: calc(56% - 16px); flex-basis: calc(56% - 16px); min-width: calc(56% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width57 { -webkit-flex-basis: calc(57% - 16px); flex-basis: calc(57% - 16px); min-width: calc(57% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width58 { -webkit-flex-basis: calc(58% - 16px); flex-basis: calc(58% - 16px); min-width: calc(58% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width59 { -webkit-flex-basis: calc(59% - 16px); flex-basis: calc(59% - 16px); min-width: calc(59% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width60 { -webkit-flex-basis: calc(60% - 16px); flex-basis: calc(60% - 16px); min-width: calc(60% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width61 { -webkit-flex-basis: calc(61% - 16px); flex-basis: calc(61% - 16px); min-width: calc(61% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width62 { -webkit-flex-basis: calc(62% - 16px); flex-basis: calc(62% - 16px); min-width: calc(62% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width63 { -webkit-flex-basis: calc(63% - 16px); flex-basis: calc(63% - 16px); min-width: calc(63% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width64 { -webkit-flex-basis: calc(64% - 16px); flex-basis: calc(64% - 16px); min-width: calc(64% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width65 { -webkit-flex-basis: calc(65% - 16px); flex-basis: calc(65% - 16px); min-width: calc(65% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width66 { -webkit-flex-basis: calc(66% - 16px); flex-basis: calc(66% - 16px); min-width: calc(66% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width67 { -webkit-flex-basis: calc(67% - 16px); flex-basis: calc(67% - 16px); min-width: calc(67% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width68 { -webkit-flex-basis: calc(68% - 16px); flex-basis: calc(68% - 16px); min-width: calc(68% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width69 { -webkit-flex-basis: calc(69% - 16px); flex-basis: calc(69% - 16px); min-width: calc(69% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width70 { -webkit-flex-basis: calc(70% - 16px); flex-basis: calc(70% - 16px); min-width: calc(70% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width71 { -webkit-flex-basis: calc(71% - 16px); flex-basis: calc(71% - 16px); min-width: calc(71% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width72 { -webkit-flex-basis: calc(72% - 16px); flex-basis: calc(72% - 16px); min-width: calc(72% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width73 { -webkit-flex-basis: calc(73% - 16px); flex-basis: calc(73% - 16px); min-width: calc(73% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width74 { -webkit-flex-basis: calc(74% - 16px); flex-basis: calc(74% - 16px); min-width: calc(74% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width75 { -webkit-flex-basis: calc(75% - 16px); flex-basis: calc(75% - 16px); min-width: calc(75% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width76 { -webkit-flex-basis: calc(76% - 16px); flex-basis: calc(76% - 16px); min-width: calc(76% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width77 { -webkit-flex-basis: calc(77% - 16px); flex-basis: calc(77% - 16px); min-width: calc(77% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width78 { -webkit-flex-basis: calc(78% - 16px); flex-basis: calc(78% - 16px); min-width: calc(78% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width79 { -webkit-flex-basis: calc(79% - 16px); flex-basis: calc(79% - 16px); min-width: calc(79% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width80 { -webkit-flex-basis: calc(80% - 16px); flex-basis: calc(80% - 16px); min-width: calc(80% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width81 { -webkit-flex-basis: calc(81% - 16px); flex-basis: calc(81% - 16px); min-width: calc(81% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width82 { -webkit-flex-basis: calc(82% - 16px); flex-basis: calc(82% - 16px); min-width: calc(82% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width83 { -webkit-flex-basis: calc(83% - 16px); flex-basis: calc(83% - 16px); min-width: calc(83% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width84 { -webkit-flex-basis: calc(84% - 16px); flex-basis: calc(84% - 16px); min-width: calc(84% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width85 { -webkit-flex-basis: calc(85% - 16px); flex-basis: calc(85% - 16px); min-width: calc(85% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width86 { -webkit-flex-basis: calc(86% - 16px); flex-basis: calc(86% - 16px); min-width: calc(86% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width87 { -webkit-flex-basis: calc(87% - 16px); flex-basis: calc(87% - 16px); min-width: calc(87% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width88 { -webkit-flex-basis: calc(88% - 16px); flex-basis: calc(88% - 16px); min-width: calc(88% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width89 { -webkit-flex-basis: calc(89% - 16px); flex-basis: calc(89% - 16px); min-width: calc(89% - 16px); } .euiSuggestItem__label.euiSuggestItem__label--width90 { -webkit-flex-basis: calc(90% - 16px); flex-basis: calc(90% - 16px); min-width: calc(90% - 16px); } .euiSuggestItem__label--expand { -webkit-flex-basis: auto; flex-basis: auto; } .euiSuggestItem__description { color: #69707D; padding-top: 9px; -webkit-flex-basis: auto; flex-basis: auto; -webkit-align-self: baseline; align-self: baseline; } .euiSuggestItem__description.euiSuggestItem__description--wrap { overflow-wrap: break-word !important; word-break: break-word; white-space: normal !important; } .euiSuggestItemOption[class*=isFocused] .euiSuggestItem__label, .euiSuggestItemOption:hover:not([aria-disabled=true]) .euiSuggestItem__label, .euiSuggestItemOption:focus .euiSuggestItem__label { text-decoration: underline; } .euiSuggestInput__statusIcon { background-color: transparent !important; } .euiTable { font-size: 14px; font-size: 1rem; line-height: 1.7142857143rem; font-feature-settings: "calt" 1, "kern" 1, "liga" 1, "tnum" 1; width: 100%; table-layout: fixed; border: none; border-collapse: collapse; background-color: #FFF; } .euiTable.euiTable--auto { table-layout: auto; } .euiTableCaption { position: relative; } @media only screen and (min-width: 768px) and (max-width: 991px) { .euiTable--compressed .euiTableCellContent { font-size: 12px; font-size: 0.8571428571rem; line-height: 1.1428571429rem; padding: 4px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .euiTable--compressed .euiTableCellContent { font-size: 12px; font-size: 0.8571428571rem; line-height: 1.1428571429rem; padding: 4px; } } @media only screen and (min-width: 1200px) { .euiTable--compressed .euiTableCellContent { font-size: 12px; font-size: 0.8571428571rem; line-height: 1.1428571429rem; padding: 4px; } } .euiTableFooterCell, .euiTableHeaderCell { vertical-align: middle; border-top: 1px solid #D3DAE6; border-bottom: 1px solid #D3DAE6; font-weight: inherit; text-align: left; overflow-wrap: break-word !important; word-break: break-word; color: #1a1c21; font-size: 14px; font-size: 1rem; line-height: 1.7142857143rem; font-weight: 700; font-weight: 500; border: none; } .euiTableFooterCell .euiTableHeaderButton, .euiTableHeaderCell .euiTableHeaderButton { text-align: left; font-weight: 500; } .euiTableFooterCell .euiTableCellContent__text, .euiTableHeaderCell .euiTableCellContent__text { font-size: 12px; font-size: 0.8571428571rem; line-height: 1.1428571429rem; font-weight: 600; } .euiTableHeaderButton { font-size: 14px; font-size: 1rem; line-height: 1.7142857143rem; color: inherit; width: 100%; } .euiTableHeaderButton:hover .euiTableCellContent__text, .euiTableHeaderButton:focus .euiTableCellContent__text { text-decoration: underline; color: #07C; } .euiTableHeaderButton:hover .euiTableSortIcon, .euiTableHeaderButton:focus .euiTableSortIcon { fill: #07C; } .euiTableSortIcon { margin-left: 4px; -webkit-flex-shrink: 0; flex-shrink: 0; } .euiTableHeaderButton-isSorted .euiTableSortIcon { fill: #1a1c21; } .euiTableHeaderCellCheckbox { vertical-align: middle; border-top: 1px solid #D3DAE6; border-bottom: 1px solid #D3DAE6; font-weight: inherit; text-align: left; width: 32px; vertical-align: middle; border: none; } .euiTableRow:hover { background-color: #fafbfd; } .euiTableRow.euiTableRow-isClickable:hover { background-color: rgba(0, 119, 204, 0.05); cursor: pointer; } .euiTableRow.euiTableRow-isClickable:focus { background-color: rgba(0, 119, 204, 0.1); } .euiTableRow.euiTableRow-isExpandedRow { background-color: #fafbfd; } .euiTableRow.euiTableRow-isExpandedRow.euiTableRow-isSelectable .euiTableCellContent { padding-left: 40px; } .euiTableRow.euiTableRow-isSelected { background-color: rgba(227, 240, 249, 0.37); } .euiTableRow.euiTableRow-isSelected + .euiTableRow.euiTableRow-isExpandedRow .euiTableRowCell { background-color: rgba(227, 240, 249, 0.37); } .euiTableRow.euiTableRow-isSelected:hover, .euiTableRow.euiTableRow-isSelected:hover + .euiTableRow.euiTableRow-isExpandedRow .euiTableRowCell { background-color: rgba(0, 119, 204, 0.1); } .euiTableRowCell { vertical-align: middle; border-top: 1px solid #D3DAE6; border-bottom: 1px solid #D3DAE6; font-weight: inherit; text-align: left; color: #343741; } .euiTableRowCell--top { vertical-align: top; } .euiTableRowCell--bottom { vertical-align: bottom; } .euiTableRowCell--baseline { vertical-align: baseline; } .euiTableRowCell.euiTableRowCell--isMobileHeader { display: none; } .euiTableRowCellCheckbox { vertical-align: middle; border-top: 1px solid #D3DAE6; border-bottom: 1px solid #D3DAE6; font-weight: inherit; text-align: left; width: 32px; vertical-align: middle; } .euiTableFooterCell { background-color: #F5F7FA; } /** * 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. * 4. Prevent very long single words (e.g. the name of a field in a document) from overflowing * the cell. */ .euiTableCellContent { overflow: hidden; /* 4 */ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; /* 1 */ padding: 8px; /* 2 */ } .euiTableCellContent__text { overflow-wrap: break-word !important; word-break: break-word; /* 4 */ min-width: 0; text-overflow: ellipsis; } .euiTableCellContent--alignRight { -webkit-justify-content: flex-end; justify-content: flex-end; text-align: right; } .euiTableCellContent--alignCenter { -webkit-justify-content: center; justify-content: center; text-align: center; } .euiTableHeaderCell, .euiTableFooterCell, .euiTableCellContent--truncateText { max-width: 100%; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .euiTableHeaderCell .euiTableCellContent__text, .euiTableFooterCell .euiTableCellContent__text, .euiTableCellContent--truncateText .euiTableCellContent__text { overflow: hidden; } .euiTableCellContent--overflowingContent { overflow: visible; white-space: normal; word-break: break-word; } .euiTableCellContent--showOnHover > *:not(:first-child) { margin-left: 8px; } .euiTableRow-hasActions .euiTableCellContent--showOnHover .euiTableCellContent__hoverItem { -webkit-flex-shrink: 0; flex-shrink: 0; opacity: 0.7; -webkit-filter: grayscale(100%); filter: grayscale(100%); transition: opacity 250ms cubic-bezier(0.694, 0.0482, 0.335, 1), -webkit-filter 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); transition: opacity 250ms cubic-bezier(0.694, 0.0482, 0.335, 1), filter 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); transition: opacity 250ms cubic-bezier(0.694, 0.0482, 0.335, 1), filter 250ms cubic-bezier(0.694, 0.0482, 0.335, 1), -webkit-filter 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } .euiTableRow-hasActions .euiTableCellContent--showOnHover .expandedItemActions__completelyHide, .euiTableRow-hasActions .euiTableCellContent--showOnHover .expandedItemActions__completelyHide:disabled, .euiTableRow-hasActions .euiTableCellContent--showOnHover .expandedItemActions__completelyHide:disabled:hover, .euiTableRow-hasActions .euiTableCellContent--showOnHover .expandedItemActions__completelyHide:disabled:focus, .euiTableRow:hover .euiTableRow-hasActions .euiTableCellContent--showOnHover .expandedItemActions__completelyHide:disabled { -webkit-filter: grayscale(0%); filter: grayscale(0%); opacity: 0; } .euiTableRow-hasActions:hover .euiTableCellContent--showOnHover .euiTableCellContent__hoverItem:not(:disabled), .euiTableRow-hasActions:hover .euiTableCellContent--showOnHover .euiTableCellContent__hoverItem:not(:disabled):hover, .euiTableRow-hasActions:hover .euiTableCellContent--showOnHover .euiTableCellContent__hoverItem:not(:disabled):focus { opacity: 1; -webkit-filter: grayscale(0%); filter: grayscale(0%); } .euiTableRow-isExpandedRow .euiTableCellContent { -webkit-animation: 150ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal none growExpandedRow; animation: 150ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal none growExpandedRow; } @-webkit-keyframes growExpandedRow { 0% { opacity: 0; -webkit-transform: translateY(-12px); transform: translateY(-12px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes growExpandedRow { 0% { opacity: 0; -webkit-transform: translateY(-12px); transform: translateY(-12px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } .euiTableRowCell__mobileHeader { display: none; } @media only screen and (max-width: 574px) { .euiTableRowCell--hideForMobile { display: none !important; } } @media only screen and (min-width: 575px) and (max-width: 767px) { .euiTableRowCell--hideForMobile { display: none !important; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .euiTableRowCell--hideForDesktop { display: none !important; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .euiTableRowCell--hideForDesktop { display: none !important; } } @media only screen and (min-width: 1200px) { .euiTableRowCell--hideForDesktop { display: none !important; } } @media only screen and (max-width: 574px) { .euiTable.euiTable--responsive thead { display: none; } .euiTable.euiTable--responsive tfoot { display: none; } .euiTable.euiTable--responsive .euiTableRowCell__mobileHeader { max-width: 100%; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font-size: 9.625px; font-size: 0.6875rem; display: block; color: #69707D; padding: 8px; padding-bottom: 0; margin-bottom: -8px; min-height: 24px; } .euiTableRowCell:only-child .euiTable.euiTable--responsive .euiTableRowCell__mobileHeader { min-height: 0; } .euiTable.euiTable--responsive .euiTableRowCell--enlargeForMobile { font-size: 16px; font-size: 1.1428571429rem; line-height: 1.7142857143rem; } .euiTable.euiTable--responsive .euiTableRow { -webkit-flex-grow: 1; flex-grow: 1; } .euiTable.euiTable--responsive .euiTableRow.euiTableRow--flexGrowZero { -webkit-flex-grow: 0; flex-grow: 0; } .euiTable.euiTable--responsive .euiTableRow.euiTableRow--hasShadow { box-shadow: 0 0.9px 4px -1px rgba(0, 0, 0, 0.08), 0 2.6px 8px -1px rgba(0, 0, 0, 0.06), 0 5.7px 12px -1px rgba(0, 0, 0, 0.05), 0 15px 15px -1px rgba(0, 0, 0, 0.04); } .euiTable.euiTable--responsive .euiTableRow.euiTableRow--hasBorder { border: 1px solid #D3DAE6; box-shadow: none; } .euiTable.euiTable--responsive .euiTableRow.euiTableRow--isClickable { transition: all 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); } .euiTable.euiTable--responsive .euiTableRow.euiTableRow--isClickable:enabled { display: block; width: 100%; text-align: left; } .euiTable.euiTable--responsive .euiTableRow.euiTableRow--isClickable:hover, .euiTable.euiTable--responsive .euiTableRow.euiTableRow--isClickable:focus { box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1), 0 3.6px 13px rgba(0, 0, 0, 0.07), 0 8.4px 23px rgba(0, 0, 0, 0.06), 0 23px 35px rgba(0, 0, 0, 0.05); -webkit-transform: translateY(-2px); transform: translateY(-2px); cursor: pointer; } .euiTable.euiTable--responsive .euiTableRow.euiTableRow--borderRadiusNone { border-radius: 0; } .euiTable.euiTable--responsive .euiTableRow.euiTableRow--borderRadiusMedium { border-radius: 6px; } .euiTable.euiTable--responsive .euiTableRow.euiTableRow--transparent { background-color: transparent; } .euiTable.euiTable--responsive .euiTableRow.euiTableRow--plain { background-color: #FFF; } .euiTable.euiTable--responsive .euiTableRow.euiTableRow--subdued { background-color: #fafbfd; } .euiTable.euiTable--responsive .euiTableRow.euiTableRow--accent { background-color: #feedf5; } .euiTable.euiTable--responsive .euiTableRow.euiTableRow--primary { background-color: #e6f1fa; } .euiTable.euiTable--responsive .euiTableRow.euiTableRow--success { background-color: #e6f9f7; } .euiTable.euiTable--responsive .euiTableRow.euiTableRow--warning { background-color: #fff9e8; } .euiTable.euiTable--responsive .euiTableRow.euiTableRow--danger { background-color: #f8e9e9; } .euiTable.euiTable--responsive .euiTableRow { box-shadow: 0 0.7px 1.4px rgba(0, 0, 0, 0.07), 0 1.9px 4px rgba(0, 0, 0, 0.05), 0 4.5px 10px rgba(0, 0, 0, 0.05); background-color: #FFF; border-radius: 6px; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; padding: 8px; margin-bottom: 8px; } .euiTable.euiTable--responsive .euiTableRow:hover { background-color: #FFF; } .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isExpandable, .euiTable.euiTable--responsive .euiTableRow.euiTableRow-hasActions { background-image: linear-gradient(to right, rgba(152, 162, 179, 0.1) 0, rgba(152, 162, 179, 0.1) 1px, transparent 1px, transparent 100%); background-size: 40px 100%; background-position-x: right; background-repeat: no-repeat; padding-right: 40px; position: relative; } .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isExpandable .euiTableRowCell--isExpander, .euiTable.euiTable--responsive .euiTableRow.euiTableRow-hasActions .euiTableRowCell--hasActions { min-width: 0; width: 24px; position: absolute; top: 16px; right: 8px; } .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isExpandable .euiTableRowCell--isExpander::before, .euiTable.euiTable--responsive .euiTableRow.euiTableRow-hasActions .euiTableRowCell--hasActions::before { display: none; } .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isExpandable .euiTableRowCell--isExpander .euiTableCellContent, .euiTable.euiTable--responsive .euiTableRow.euiTableRow-hasActions .euiTableRowCell--hasActions .euiTableCellContent { -webkit-flex-direction: column; flex-direction: column; padding: 0; } .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isExpandable .euiTableRowCell--isExpander .euiTableCellContent .euiLink, .euiTable.euiTable--responsive .euiTableRow.euiTableRow-hasActions .euiTableRowCell--hasActions .euiTableCellContent .euiLink { padding: 4px; } .euiTable.euiTable--responsive .euiTableRow.euiTableRow-hasActions.euiTableRow-isExpandable .euiTableRowCell--isExpander { top: auto; bottom: 16px; right: 0; } .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isSelectable { padding-left: 36px; position: relative; } .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isSelectable .euiTableRowCellCheckbox { position: absolute; left: 4px; top: 8px; } .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isSelected, .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isSelected:hover, .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isSelected + .euiTableRow.euiTableRow-isExpandedRow, .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isSelected:hover + .euiTableRow.euiTableRow-isExpandedRow .euiTableRowCell { background-color: rgba(227, 240, 249, 0.37); } .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isExpandedRow { background-image: linear-gradient(to right, rgba(152, 162, 179, 0.1) 0, rgba(152, 162, 179, 0.1) 1px, transparent 1px, transparent 100%); background-size: 40px 100%; background-position-x: right; background-repeat: no-repeat; box-shadow: 0 0.7px 1.4px rgba(0, 0, 0, 0.07), 0 1.9px 4px rgba(0, 0, 0, 0.05), 0 4.5px 10px rgba(0, 0, 0, 0.05); margin-top: -16px; position: relative; z-index: 2; border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; padding-left: 8px; } .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isExpandedRow:hover { background-color: #FFF; } .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isExpandedRow .euiTableRowCell { width: calc(100% - 40px); } .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isExpandedRow .euiTableRowCell::before { display: none; } .euiTable.euiTable--responsive .euiTableRowCell { min-width: 50%; border: none; } .euiTable.euiTable--responsive .euiTableRowCellCheckbox { border: none; } .euiTable.euiTable--responsive .euiTableRow-hasActions .euiTableCellContent--showOnHover > * { margin-left: 0; } .euiTable.euiTable--responsive .euiTableRow-hasActions .euiTableCellContent--showOnHover .expandedItemActions__completelyHide { display: none; } .euiTable.euiTable--responsive .euiTableRow-hasActions .euiTableCellContent--showOnHover .euiTableCellContent__hoverItem { opacity: 1; -webkit-filter: none; filter: none; margin-left: 0; margin-bottom: 8px; } .euiTable.euiTable--responsive .euiTableCellContent--alignRight { -webkit-justify-content: flex-start; justify-content: flex-start; } .euiTable.euiTable--responsive .euiTableCellContent--alignCenter { -webkit-justify-content: flex-start; justify-content: flex-start; } } @media only screen and (min-width: 575px) and (max-width: 767px) { .euiTable.euiTable--responsive thead { display: none; } .euiTable.euiTable--responsive tfoot { display: none; } .euiTable.euiTable--responsive .euiTableRowCell__mobileHeader { max-width: 100%; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font-size: 9.625px; font-size: 0.6875rem; display: block; color: #69707D; padding: 8px; padding-bottom: 0; margin-bottom: -8px; min-height: 24px; } .euiTableRowCell:only-child .euiTable.euiTable--responsive .euiTableRowCell__mobileHeader { min-height: 0; } .euiTable.euiTable--responsive .euiTableRowCell--enlargeForMobile { font-size: 16px; font-size: 1.1428571429rem; line-height: 1.7142857143rem; } .euiTable.euiTable--responsive .euiTableRow { -webkit-flex-grow: 1; flex-grow: 1; } .euiTable.euiTable--responsive .euiTableRow.euiTableRow--flexGrowZero { -webkit-flex-grow: 0; flex-grow: 0; } .euiTable.euiTable--responsive .euiTableRow.euiTableRow--hasShadow { box-shadow: 0 0.9px 4px -1px rgba(0, 0, 0, 0.08), 0 2.6px 8px -1px rgba(0, 0, 0, 0.06), 0 5.7px 12px -1px rgba(0, 0, 0, 0.05), 0 15px 15px -1px rgba(0, 0, 0, 0.04); } .euiTable.euiTable--responsive .euiTableRow.euiTableRow--hasBorder { border: 1px solid #D3DAE6; box-shadow: none; } .euiTable.euiTable--responsive .euiTableRow.euiTableRow--isClickable { transition: all 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); } .euiTable.euiTable--responsive .euiTableRow.euiTableRow--isClickable:enabled { display: block; width: 100%; text-align: left; } .euiTable.euiTable--responsive .euiTableRow.euiTableRow--isClickable:hover, .euiTable.euiTable--responsive .euiTableRow.euiTableRow--isClickable:focus { box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1), 0 3.6px 13px rgba(0, 0, 0, 0.07), 0 8.4px 23px rgba(0, 0, 0, 0.06), 0 23px 35px rgba(0, 0, 0, 0.05); -webkit-transform: translateY(-2px); transform: translateY(-2px); cursor: pointer; } .euiTable.euiTable--responsive .euiTableRow.euiTableRow--borderRadiusNone { border-radius: 0; } .euiTable.euiTable--responsive .euiTableRow.euiTableRow--borderRadiusMedium { border-radius: 6px; } .euiTable.euiTable--responsive .euiTableRow.euiTableRow--transparent { background-color: transparent; } .euiTable.euiTable--responsive .euiTableRow.euiTableRow--plain { background-color: #FFF; } .euiTable.euiTable--responsive .euiTableRow.euiTableRow--subdued { background-color: #fafbfd; } .euiTable.euiTable--responsive .euiTableRow.euiTableRow--accent { background-color: #feedf5; } .euiTable.euiTable--responsive .euiTableRow.euiTableRow--primary { background-color: #e6f1fa; } .euiTable.euiTable--responsive .euiTableRow.euiTableRow--success { background-color: #e6f9f7; } .euiTable.euiTable--responsive .euiTableRow.euiTableRow--warning { background-color: #fff9e8; } .euiTable.euiTable--responsive .euiTableRow.euiTableRow--danger { background-color: #f8e9e9; } .euiTable.euiTable--responsive .euiTableRow { box-shadow: 0 0.7px 1.4px rgba(0, 0, 0, 0.07), 0 1.9px 4px rgba(0, 0, 0, 0.05), 0 4.5px 10px rgba(0, 0, 0, 0.05); background-color: #FFF; border-radius: 6px; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; padding: 8px; margin-bottom: 8px; } .euiTable.euiTable--responsive .euiTableRow:hover { background-color: #FFF; } .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isExpandable, .euiTable.euiTable--responsive .euiTableRow.euiTableRow-hasActions { background-image: linear-gradient(to right, rgba(152, 162, 179, 0.1) 0, rgba(152, 162, 179, 0.1) 1px, transparent 1px, transparent 100%); background-size: 40px 100%; background-position-x: right; background-repeat: no-repeat; padding-right: 40px; position: relative; } .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isExpandable .euiTableRowCell--isExpander, .euiTable.euiTable--responsive .euiTableRow.euiTableRow-hasActions .euiTableRowCell--hasActions { min-width: 0; width: 24px; position: absolute; top: 16px; right: 8px; } .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isExpandable .euiTableRowCell--isExpander::before, .euiTable.euiTable--responsive .euiTableRow.euiTableRow-hasActions .euiTableRowCell--hasActions::before { display: none; } .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isExpandable .euiTableRowCell--isExpander .euiTableCellContent, .euiTable.euiTable--responsive .euiTableRow.euiTableRow-hasActions .euiTableRowCell--hasActions .euiTableCellContent { -webkit-flex-direction: column; flex-direction: column; padding: 0; } .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isExpandable .euiTableRowCell--isExpander .euiTableCellContent .euiLink, .euiTable.euiTable--responsive .euiTableRow.euiTableRow-hasActions .euiTableRowCell--hasActions .euiTableCellContent .euiLink { padding: 4px; } .euiTable.euiTable--responsive .euiTableRow.euiTableRow-hasActions.euiTableRow-isExpandable .euiTableRowCell--isExpander { top: auto; bottom: 16px; right: 0; } .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isSelectable { padding-left: 36px; position: relative; } .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isSelectable .euiTableRowCellCheckbox { position: absolute; left: 4px; top: 8px; } .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isSelected, .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isSelected:hover, .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isSelected + .euiTableRow.euiTableRow-isExpandedRow, .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isSelected:hover + .euiTableRow.euiTableRow-isExpandedRow .euiTableRowCell { background-color: rgba(227, 240, 249, 0.37); } .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isExpandedRow { background-image: linear-gradient(to right, rgba(152, 162, 179, 0.1) 0, rgba(152, 162, 179, 0.1) 1px, transparent 1px, transparent 100%); background-size: 40px 100%; background-position-x: right; background-repeat: no-repeat; box-shadow: 0 0.7px 1.4px rgba(0, 0, 0, 0.07), 0 1.9px 4px rgba(0, 0, 0, 0.05), 0 4.5px 10px rgba(0, 0, 0, 0.05); margin-top: -16px; position: relative; z-index: 2; border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; padding-left: 8px; } .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isExpandedRow:hover { background-color: #FFF; } .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isExpandedRow .euiTableRowCell { width: calc(100% - 40px); } .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isExpandedRow .euiTableRowCell::before { display: none; } .euiTable.euiTable--responsive .euiTableRowCell { min-width: 50%; border: none; } .euiTable.euiTable--responsive .euiTableRowCellCheckbox { border: none; } .euiTable.euiTable--responsive .euiTableRow-hasActions .euiTableCellContent--showOnHover > * { margin-left: 0; } .euiTable.euiTable--responsive .euiTableRow-hasActions .euiTableCellContent--showOnHover .expandedItemActions__completelyHide { display: none; } .euiTable.euiTable--responsive .euiTableRow-hasActions .euiTableCellContent--showOnHover .euiTableCellContent__hoverItem { opacity: 1; -webkit-filter: none; filter: none; margin-left: 0; margin-bottom: 8px; } .euiTable.euiTable--responsive .euiTableCellContent--alignRight { -webkit-justify-content: flex-start; justify-content: flex-start; } .euiTable.euiTable--responsive .euiTableCellContent--alignCenter { -webkit-justify-content: flex-start; justify-content: flex-start; } } .euiTableHeaderMobile, .euiTableHeaderCell--hideForDesktop { display: none; } @media only screen and (max-width: 574px) { .euiTableHeaderMobile { display: -webkit-flex; display: flex; -webkit-justify-content: flex-end; justify-content: flex-end; padding: 8px 0; } .euiTableSortMobile { display: block; } } @media only screen and (min-width: 575px) and (max-width: 767px) { .euiTableHeaderMobile { display: -webkit-flex; display: flex; -webkit-justify-content: flex-end; justify-content: flex-end; padding: 8px 0; } .euiTableSortMobile { display: block; } } .euiComboBox--appended .euiFormControlLayout__childrenWrapper { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } .euiComboBox--appended .euiFormControlLayout--compressed .euiFormControlLayout__childrenWrapper { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .euiComboBox--appended.euiComboBox--prepended .euiFormControlLayout__childrenWrapper { border-radius: 0; } .euiComboBox--appended.euiComboBox--prepended .euiFormControlLayout--compressed .euiFormControlLayout__childrenWrapper { border-radius: 0; } .euiComboBox--prepended .euiFormControlLayout__childrenWrapper { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } .euiComboBox--prepended .euiFormControlLayout--compressed .euiFormControlLayout__childrenWrapper { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .euiDataGrid--fontSizeLarge .euiDataGridRowCell { font-size: 16px; font-size: 1.1428571429rem; line-height: 1.7142857143rem; } .euiDescriptionList.euiDescriptionList--inline.euiDescriptionList--compressed .euiDescriptionList__title { line-height: 1.5; } .euiFormControlLayout--group { border-radius: 6px; background-color: #e9edf3; } .euiFormControlLayout--group .euiFormControlLayout__prepend:first-child { border-radius: 5px 0 0 5px; } .euiFormControlLayout--group .euiFormControlLayout__prepend:first-child [class*=euiButton] { border-radius: 5px 0 0 5px; } .euiFormControlLayout--group .euiFormControlLayout__append:last-child { border-radius: 0 5px 5px 0; } .euiFormControlLayout--group .euiFormControlLayout__append:last-child [class*=euiButton] { border-radius: 0 5px 5px 0; } .euiFormControlLayout--group [class*=euiButton]:focus { outline: 2px solid currentColor; outline-offset: -2px; } .euiFormControlLayout--group [class*=euiButton]:focus:focus-visible { outline-style: auto; } .euiFormControlLayout--group [class*=euiButton]:focus:not(:focus-visible) { outline: none; } .euiFormControlLayout--group .euiToolTipAnchor > .euiIcon { border-radius: 0 5px 5px 0; } .euiFormControlLayout--group .euiToolTipAnchor:first-child [class*=euiButton] { border-radius: 5px 0 0 5px; } .euiFormControlLayout--group .euiToolTipAnchor:last-child [class*=euiButton], .euiFormControlLayout--group .euiToolTipAnchor:last-child .euiText { border-radius: 0 5px 5px 0; } .euiFormControlLayout--group .euiFormControlLayout__childrenWrapper:nth-child(2) [class*=euiField], .euiFormControlLayout--group .euiFormControlLayout__childrenWrapper:nth-child(3) [class*=euiField] { border-radius: 0; } .euiFormControlLayout--group .euiFormControlLayout__childrenWrapper:first-child .euiSelect, .euiFormControlLayout--group .euiFormControlLayout__childrenWrapper:first-child .euiSuperSelectControl, .euiFormControlLayout--group .euiFormControlLayout__childrenWrapper:first-child [class*=euiField] { border-radius: 6px 0 0 6px; } .euiFormControlLayout--group .euiFormControlLayout__childrenWrapper:last-child .euiSelect, .euiFormControlLayout--group .euiFormControlLayout__childrenWrapper:last-child .euiSuperSelectControl, .euiFormControlLayout--group .euiFormControlLayout__childrenWrapper:last-child [class*=euiField] { border-radius: 0 6px 6px 0; } .euiFormControlLayout--group.euiFormControlLayout--compressed { border-radius: 4px; background-color: #e9edf3; } .euiFormControlLayout--group.euiFormControlLayout--compressed.euiFormControlLayout--readOnly input { background-color: #FFF; } .euiFormControlLayout--group.euiFormControlLayout--compressed .euiFormControlLayout__prepend:first-child { border-radius: 3px 0 0 3px; } .euiFormControlLayout--group.euiFormControlLayout--compressed .euiFormControlLayout__prepend:first-child [class*=euiButton] { border-radius: 4px 0 0 4px; } .euiFormControlLayout--group.euiFormControlLayout--compressed .euiFormControlLayout__append:last-child { border-radius: 0 3px 3px 0; } .euiFormControlLayout--group.euiFormControlLayout--compressed .euiFormControlLayout__append:last-child [class*=euiButton] { border-radius: 0 3px 3px 0; } .euiFormControlLayout--group.euiFormControlLayout--compressed .euiToolTipAnchor > .euiIcon { border-radius: 0 3px 3px 0; } .euiFormControlLayout--group.euiFormControlLayout--compressed .euiToolTipAnchor:first-child [class*=euiButton] { border-radius: 3px 0 0 3px; } .euiFormControlLayout--group.euiFormControlLayout--compressed .euiToolTipAnchor:last-child [class*=euiButton], .euiFormControlLayout--group.euiFormControlLayout--compressed .euiToolTipAnchor:last-child .euiText { border-radius: 0 3px 3px 0; } .euiFormControlLayout--group.euiFormControlLayout--compressed .euiFormControlLayout__childrenWrapper:nth-child(2) [class*=euiField], .euiFormControlLayout--group.euiFormControlLayout--compressed .euiFormControlLayout__childrenWrapper:nth-child(3) [class*=euiField] { border-radius: 0; } .euiFormControlLayout--group.euiFormControlLayout--compressed .euiFormControlLayout__childrenWrapper:first-child .euiSelect, .euiFormControlLayout--group.euiFormControlLayout--compressed .euiFormControlLayout__childrenWrapper:first-child [class*=euiField] { border-radius: 3px 0 0 3px; } .euiFormControlLayout--group.euiFormControlLayout--compressed .euiFormControlLayout__childrenWrapper:last-child .euiSelect, .euiFormControlLayout--group.euiFormControlLayout--compressed .euiFormControlLayout__childrenWrapper:last-child [class*=euiField] { border-radius: 0 3px 3px 0; } .euiFormControlLayoutDelimited { border-radius: 6px; } .euiFormControlLayoutDelimited.euiFormControlLayout--group .euiFormControlLayout__childrenWrapper:first-child { border-radius: 6px 0 0 6px; } .euiFormControlLayoutDelimited .euiFormControlLayout__childrenWrapper:only-child { border-radius: 6px; overflow: hidden; } .euiFormControlLayoutDelimited .euiFormControlLayout__prepend + .euiFormControlLayout__childrenWrapper:last-child { border-radius: 0 6px 6px 0; } .euiFormControlLayoutDelimited.euiFormControlLayout--compressed.euiFormControlLayout--group .euiFormControlLayout__childrenWrapper:first-child { border-radius: 4px 0 0 4px; } .euiFormControlLayoutDelimited.euiFormControlLayout--compressed .euiFormControlLayout__childrenWrapper:only-child { border-radius: 4px; overflow: hidden; } .euiFormControlLayoutDelimited.euiFormControlLayout--compressed .euiFormControlLayout__prepend + .euiFormControlLayout__childrenWrapper:last-child { border-radius: 0 4px 4px 0; } .euiRadio .euiRadio__input:focus + .euiRadio__circle { outline: 2px solid #0071c2; outline-offset: 2px; } .euiRadio .euiRadio__input:focus:focus-visible + .euiRadio__circle { outline: 2px solid #0071c2; outline-offset: 2px; } .euiRadio .euiRadio__input:focus:not(:focus-visible) + .euiRadio__circle { outline: none; } .euiCheckbox .euiCheckbox__input:focus + .euiCheckbox__square { outline: 2px solid #0071c2; outline-offset: 2px; } .euiCheckbox .euiCheckbox__input:focus:focus-visible + .euiCheckbox__square { outline: 2px solid #0071c2; outline-offset: 2px; } .euiCheckbox .euiCheckbox__input:focus:not(:focus-visible) + .euiCheckbox__square { outline: none; } .euiSwitch .euiSwitch__button:focus { outline: 2px solid currentColor; outline-offset: 2px; } .euiSwitch .euiSwitch__button:focus:focus-visible { outline-style: auto; } .euiSwitch .euiSwitch__button:focus:not(:focus-visible) { outline: none; } .euiSwitch .euiSwitch__button:focus .euiSwitch__track { outline: none; } .euiHeaderSectionItem::after { display: none !important; } .euiHue { position: relative; height: 12px; border-radius: 12px; margin: 8px 0; } .euiHue::before, .euiHue::after { display: none; } .euiHue__range { top: -6px; } .euiHue__range::-webkit-slider-thumb { border: 3px solid #FFF; box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.2), 0 1px 5px -2px rgba(0, 0, 0, 0.2); background-color: inherit; } .euiHue__range::-moz-range-thumb { border: 3px solid #FFF; box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.2), 0 1px 5px -2px rgba(0, 0, 0, 0.2); background-color: inherit; } .euiHue__range::-ms-thumb { border: 3px solid #FFF; box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.2), 0 1px 5px -2px rgba(0, 0, 0, 0.2); background-color: inherit; } .euiHue__range:focus { outline: none; } .euiHue__range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 2px #0071c2; border: 3px solid #FFF; } .euiHue__range:focus::-moz-range-thumb { box-shadow: 0 0 0 2px #0071c2; border: 3px solid #FFF; } .euiHue__range:focus::-ms-thumb { box-shadow: 0 0 0 2px #0071c2; border: 3px solid #FFF; } .euiHue__range:focus:not(:focus-visible)::-webkit-slider-thumb { box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.2), 0 1px 5px -2px rgba(0, 0, 0, 0.2); } .euiHue__range:focus:not(:focus-visible)::-moz-range-thumb { box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.2), 0 1px 5px -2px rgba(0, 0, 0, 0.2); } .euiHue__range:focus:not(:focus-visible)::-ms-thumb { box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.2), 0 1px 5px -2px rgba(0, 0, 0, 0.2); } .euiHue__range:focus:focus-visible { outline: none; } .euiKeyPadMenuItem { border: none !important; box-shadow: none; } .euiKeyPadMenuItem:not(.euiKeyPadMenuItem-isDisabled):hover, .euiKeyPadMenuItem:not(.euiKeyPadMenuItem-isDisabled):focus:hover, .euiKeyPadMenuItem:not(.euiKeyPadMenuItem-isDisabled):focus-within { box-shadow: 0 0.7px 1.4px rgba(0, 0, 0, 0.07), 0 1.9px 4px rgba(0, 0, 0, 0.05), 0 4.5px 10px rgba(0, 0, 0, 0.05); } .euiKeyPadMenuItem:not(.euiKeyPadMenuItem-isDisabled):focus { box-shadow: none; } .euiKeyPadMenuItem.euiKeyPadMenuItem-isSelected:not(.euiKeyPadMenuItem-isDisabled) { box-shadow: none; } .euiKeyPadMenuItem.euiKeyPadMenuItem-isSelected:not(.euiKeyPadMenuItem-isDisabled):hover { box-shadow: 0 0.7px 1.4px rgba(0, 0, 0, 0.07), 0 1.9px 4px rgba(0, 0, 0, 0.05), 0 4.5px 10px rgba(0, 0, 0, 0.05); } .euiKeyPadMenuItem.euiKeyPadMenuItem-isSelected:not(.euiKeyPadMenuItem-isDisabled), .euiKeyPadMenuItem.euiKeyPadMenuItem-isSelected:not(.euiKeyPadMenuItem-isDisabled):hover, .euiKeyPadMenuItem.euiKeyPadMenuItem-isSelected:not(.euiKeyPadMenuItem-isDisabled):focus, .euiKeyPadMenuItem.euiKeyPadMenuItem-isSelected:not(.euiKeyPadMenuItem-isDisabled):focus-within { background-color: rgba(0, 119, 204, 0.1); color: #006bb8; } .euiKeyPadMenuItem.euiKeyPadMenuItem-isSelected.euiKeyPadMenuItem-isDisabled { background-color: rgba(171, 180, 196, 0.1); color: #a2abba; } .euiKeyPadMenuItem__label { font-weight: 600; } .euiMarkdownEditorToolbar { border-radius: 6px 6px 0 0; } .euiMarkdownEditorTextArea:focus { outline: none; } .euiMarkdownEditorTextArea:focus:focus-visible { outline-style: none; } .euiMarkdownEditorPreview, .euiMarkdownEditorFooter { border-radius: 0 0 6px 6px; } .euiSideNavItem--root { padding-bottom: 8px; } .euiSideNavItem--root + .euiSideNavItem--root { padding-top: 8px; margin-top: 8px; } .euiSideNavItem--root > .euiSideNavItemButton { margin-bottom: 4px; } .euiSideNavItem--root > .euiSideNavItemButton .euiSideNavItemButton__label { overflow-wrap: break-word !important; word-break: break-word; color: #1a1c21; font-size: 14px; font-size: 1rem; line-height: 1.7142857143rem; font-weight: 700; color: inherit; }