diff --git a/Makefile b/Makefile index 6d3cdc8..3105cdd 100644 --- a/Makefile +++ b/Makefile @@ -1,5 +1,6 @@ mac: - cd tray ; make clean ; make + cd tray ; make clean + cd tray ; make zt_lib cd ui ; yarn build cargo build --release cp -f ui/dist/index.html mac-app-template/ZeroTier.app/Contents/Resources/ui.html diff --git a/mac-app-template/ZeroTier.app/Contents/Resources/dark.css b/mac-app-template/ZeroTier.app/Contents/Resources/dark.css new file mode 100644 index 0000000..f8448bb --- /dev/null +++ b/mac-app-template/ZeroTier.app/Contents/Resources/dark.css @@ -0,0 +1,16586 @@ +@charset "UTF-8"; +/** + * 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) + */ +@-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(54, 162, 239, 0); } + 100% { + box-shadow: 0 0 0 2px #36A2EF; } } + +@keyframes focusRingAnimate { + 0% { + box-shadow: 0 0 0 2px rgba(54, 162, 239, 0); } + 100% { + box-shadow: 0 0 0 2px #36A2EF; } } + +@-webkit-keyframes focusRingAnimateLarge { + 0% { + box-shadow: 0 0 0 10px rgba(54, 162, 239, 0); } + 100% { + box-shadow: 0 0 0 4px #36A2EF; } } + +@keyframes focusRingAnimateLarge { + 0% { + box-shadow: 0 0 0 10px rgba(54, 162, 239, 0); } + 100% { + box-shadow: 0 0 0 4px #36A2EF; } } + +@-webkit-keyframes euiButtonActive { + 50% { + -webkit-transform: translateY(1px); + transform: translateY(1px); } } + +@keyframes euiButtonActive { + 50% { + -webkit-transform: translateY(1px); + transform: translateY(1px); } } + +.eui-alignBaseline { + vertical-align: baseline !important; } + +.eui-alignBottom { + vertical-align: bottom !important; } + +.eui-alignMiddle { + vertical-align: middle !important; } + +.eui-alignTop { + vertical-align: top !important; } + +.eui-displayBlock { + display: block !important; } + +.eui-displayInline { + display: inline !important; } + +.eui-displayInlineBlock { + display: inline-block !important; } + +.eui-fullWidth { + display: block !important; + width: 100% !important; } + +.eui-textCenter { + text-align: center !important; } + +.eui-textLeft { + text-align: left !important; } + +.eui-textRight { + text-align: right !important; } + +.eui-textNoWrap { + white-space: nowrap !important; } + +.eui-textInheritColor { + color: inherit !important; } + +.eui-textBreakWord { + overflow-wrap: break-word !important; + word-wrap: break-word !important; + word-break: break-word; } + +.eui-textBreakAll { + overflow-wrap: break-word !important; + word-break: break-all !important; } + +.eui-textBreakNormal { + overflow-wrap: normal !important; + word-wrap: normal !important; + word-break: normal !important; } + +.eui-textOverflowWrap { + overflow-wrap: break-word !important; } + @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { + .eui-textOverflowWrap { + word-break: break-all !important; } } + +.eui-textTruncate { + max-width: 100%; + overflow: hidden !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; + word-wrap: normal !important; } + +/** + * Responsive + * + * 1. Be sure to hide the element initially + */ +[class*='eui-showFor'] { + display: none !important; + /* 1 */ } + +@media only screen and (max-width: 574px) { + .eui-hideFor--xs { + display: none !important; } } + +@media only screen and (max-width: 574px) { + .eui-showFor--xs { + display: inline !important; } } + +@media only screen and (max-width: 574px) { + .eui-showFor--xs--block { + display: block !important; } } + +@media only screen and (max-width: 574px) { + .eui-showFor--xs--inlineBlock { + display: inline-block !important; } } + +@media only screen and (max-width: 574px) { + .eui-showFor--xs--flex { + display: -webkit-flex !important; + display: flex !important; } } + +@media only screen and (min-width: 575px) and (max-width: 767px) { + .eui-hideFor--s { + display: none !important; } } + +@media only screen and (min-width: 575px) and (max-width: 767px) { + .eui-showFor--s { + display: inline !important; } } + +@media only screen and (min-width: 575px) and (max-width: 767px) { + .eui-showFor--s--block { + display: block !important; } } + +@media only screen and (min-width: 575px) and (max-width: 767px) { + .eui-showFor--s--inlineBlock { + display: inline-block !important; } } + +@media only screen and (min-width: 575px) and (max-width: 767px) { + .eui-showFor--s--flex { + display: -webkit-flex !important; + display: flex !important; } } + +@media only screen and (min-width: 768px) and (max-width: 991px) { + .eui-hideFor--m { + display: none !important; } } + +@media only screen and (min-width: 768px) and (max-width: 991px) { + .eui-showFor--m { + display: inline !important; } } + +@media only screen and (min-width: 768px) and (max-width: 991px) { + .eui-showFor--m--block { + display: block !important; } } + +@media only screen and (min-width: 768px) and (max-width: 991px) { + .eui-showFor--m--inlineBlock { + display: inline-block !important; } } + +@media only screen and (min-width: 768px) and (max-width: 991px) { + .eui-showFor--m--flex { + display: -webkit-flex !important; + display: flex !important; } } + +@media only screen and (min-width: 992px) and (max-width: 1199px) { + .eui-hideFor--l { + display: none !important; } } + +@media only screen and (min-width: 992px) and (max-width: 1199px) { + .eui-showFor--l { + display: inline !important; } } + +@media only screen and (min-width: 992px) and (max-width: 1199px) { + .eui-showFor--l--block { + display: block !important; } } + +@media only screen and (min-width: 992px) and (max-width: 1199px) { + .eui-showFor--l--inlineBlock { + display: inline-block !important; } } + +@media only screen and (min-width: 992px) and (max-width: 1199px) { + .eui-showFor--l--flex { + display: -webkit-flex !important; + display: flex !important; } } + +@media only screen and (min-width: 1200px) { + .eui-hideFor--xl { + display: none !important; } } + +@media only screen and (min-width: 1200px) { + .eui-showFor--xl { + display: inline !important; } } + +@media only screen and (min-width: 1200px) { + .eui-showFor--xl--block { + display: block !important; } } + +@media only screen and (min-width: 1200px) { + .eui-showFor--xl--inlineBlock { + display: inline-block !important; } } + +@media only screen and (min-width: 1200px) { + .eui-showFor--xl--flex { + display: -webkit-flex !important; + display: flex !important; } } + +/** + * IE doesn't properly wrap groups if it is within a flex-item of a flex-group. + * Adding the following styles to the flex-item that contains the wrapping group, will fix IE. + * https://github.com/philipwalton/flexbugs/issues/104 + */ +@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { + .euiIEFlexWrapFix { + -webkit-flex-grow: 1; + flex-grow: 1; + -webkit-flex-shrink: 1; + flex-shrink: 1; + -webkit-flex-basis: 0%; + flex-basis: 0%; } } + +/** + * Overflow scrolling + */ +.eui-yScroll { + scrollbar-width: thin; + height: 100%; + overflow-y: auto; + overflow-x: hidden; } + .eui-yScroll::-webkit-scrollbar { + width: 16px; + height: 16px; } + .eui-yScroll::-webkit-scrollbar-thumb { + background-color: rgba(152, 162, 179, 0.5); + border: 6px solid transparent; + background-clip: content-box; } + .eui-yScroll::-webkit-scrollbar-corner, .eui-yScroll::-webkit-scrollbar-track { + background-color: transparent; } + .eui-yScroll:focus { + outline: none; + /* 1 */ } + .eui-yScroll[tabindex='0']:focus:focus-visible { + outline-style: auto; + /* 2 */ } + +.eui-xScroll { + scrollbar-width: thin; + overflow-x: auto; } + .eui-xScroll::-webkit-scrollbar { + width: 16px; + height: 16px; } + .eui-xScroll::-webkit-scrollbar-thumb { + background-color: rgba(152, 162, 179, 0.5); + border: 6px solid transparent; + background-clip: content-box; } + .eui-xScroll::-webkit-scrollbar-corner, .eui-xScroll::-webkit-scrollbar-track { + background-color: transparent; } + .eui-xScroll:focus { + outline: none; + /* 1 */ } + .eui-xScroll[tabindex='0']:focus:focus-visible { + outline-style: auto; + /* 2 */ } + +/** + * Overflow scrolling with shadows + */ +.eui-yScrollWithShadows { + 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%); } + .eui-yScrollWithShadows::-webkit-scrollbar { + width: 16px; + height: 16px; } + .eui-yScrollWithShadows::-webkit-scrollbar-thumb { + background-color: rgba(152, 162, 179, 0.5); + border: 6px solid transparent; + background-clip: content-box; } + .eui-yScrollWithShadows::-webkit-scrollbar-corner, .eui-yScrollWithShadows::-webkit-scrollbar-track { + background-color: transparent; } + .eui-yScrollWithShadows:focus { + outline: none; + /* 1 */ } + .eui-yScrollWithShadows[tabindex='0']:focus:focus-visible { + outline-style: auto; + /* 2 */ } + +.eui-xScrollWithShadows { + scrollbar-width: thin; + overflow-x: auto; + -webkit-mask-image: linear-gradient(to right, 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 right, rgba(255, 0, 0, 0.1) 0%, red 7.5px, red calc(100% - 7.5px), rgba(255, 0, 0, 0.1) 100%); } + .eui-xScrollWithShadows::-webkit-scrollbar { + width: 16px; + height: 16px; } + .eui-xScrollWithShadows::-webkit-scrollbar-thumb { + background-color: rgba(152, 162, 179, 0.5); + border: 6px solid transparent; + background-clip: content-box; } + .eui-xScrollWithShadows::-webkit-scrollbar-corner, .eui-xScrollWithShadows::-webkit-scrollbar-track { + background-color: transparent; } + .eui-xScrollWithShadows:focus { + outline: none; + /* 1 */ } + .eui-xScrollWithShadows[tabindex='0']:focus:focus-visible { + outline-style: auto; + /* 2 */ } + +.euiYScrollWithShadows { + 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%); } + .euiYScrollWithShadows::-webkit-scrollbar { + width: 16px; + height: 16px; } + .euiYScrollWithShadows::-webkit-scrollbar-thumb { + background-color: rgba(152, 162, 179, 0.5); + border: 6px solid transparent; + background-clip: content-box; } + .euiYScrollWithShadows::-webkit-scrollbar-corner, .euiYScrollWithShadows::-webkit-scrollbar-track { + background-color: transparent; } + .euiYScrollWithShadows:focus { + outline: none; + /* 1 */ } + .euiYScrollWithShadows[tabindex='0']:focus:focus-visible { + outline-style: auto; + /* 2 */ } + +/** + * Forcing focus ring on non-EUI elements + */ +.eui-isFocusable:focus { + outline: 2px solid currentColor; } + .eui-isFocusable:focus:focus-visible { + outline-style: auto; } + .eui-isFocusable:focus:not(:focus-visible) { + outline: none; } + +/** + * For quickly applying a full-height element whether using flex or not + */ +.eui-fullHeight { + height: 100%; + -webkit-flex: 1 1 auto; + flex: 1 1 auto; + overflow: hidden; } + +/** + * Adapted from Eric Meyer's reset (http://meyerweb.com/eric/tools/css/reset/, v2.0 | 20110126). + * + */ +*, *:before, *:after { + box-sizing: border-box; } + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: none; + vertical-align: baseline; } + +code, pre, kbd, samp { + font-family: "Roboto Mono", Consolas, Menlo, Courier, monospace; } + +h1, h2, h3, h4, h5, h6, p { + font-family: inherit; + font-weight: inherit; + font-size: inherit; } + +input, textarea, select, button { + font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } + +em { + font-style: italic; } + +strong { + font-weight: 700; } + +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; } + +html { + font-family: "Inter", -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: #DFE5EF; + height: 100%; + background-color: #141519; } + +body { + line-height: 1.14286; } + +*:focus { + outline: 2px solid currentColor; + outline-offset: -1px; } + *:focus:focus-visible { + outline-style: auto; } + *:focus:not(:focus-visible) { + outline: none; } + +::-moz-selection { + background: rgba(54, 162, 239, 0.3); } + +::selection { + background: rgba(54, 162, 239, 0.3); } + +a { + text-decoration: none; + color: #36A2EF; } + a:hover, a:focus { + text-decoration: none; } + +a:hover, button, [role='button'] { + cursor: pointer; } + +input { + margin: 0; + padding: 0; } + input:disabled { + opacity: 1; + /* required on iOS */ } + +button { + background: none; + border: none; + padding: 0; + margin: 0; + font-size: inherit; + color: inherit; + border-radius: 0; } + button:hover { + cursor: pointer; } + +ol, ul { + list-style: none; } + +blockquote, q { + quotes: none; } + +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; } + +table { + border-collapse: collapse; + border-spacing: 0; } + +hr { + margin: 0; } + +fieldset { + min-inline-size: auto; } + +svg text { + letter-spacing: normal !important; } + +html { + scrollbar-width: thin; + scrollbar-color: rgba(152, 162, 179, 0.5) transparent; } + +.euiScreenReaderOnly, +.euiScreenReaderOnly--showOnFocus:not(:focus):not(:active) { + position: absolute; + left: -10000px; + top: auto; + width: 1px; + height: 1px; + overflow: hidden; } + +.euiSkipLink { + transition: none !important; } + .euiSkipLink:focus { + -webkit-animation: none !important; + animation: none !important; } + .euiSkipLink.euiSkipLink--absolute:focus { + position: absolute; } + .euiSkipLink.euiSkipLink--fixed:focus { + position: fixed; + top: 4px; + left: 4px; + z-index: 1001; } + +.euiAccordion__triggerWrapper { + display: -webkit-flex; + display: flex; + -webkit-align-items: center; + align-items: center; } + +.euiAccordion__button { + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + text-align: left; + width: 100%; + -webkit-flex-grow: 1; + flex-grow: 1; + display: -webkit-flex; + display: flex; + -webkit-align-items: center; + align-items: center; } + .euiAccordion__button:hover, .euiAccordion__button:focus { + text-decoration: underline; + cursor: pointer; } + .euiAccordion__button:focus .euiAccordion__iconWrapper { + outline: 2px solid currentColor; + color: #36A2EF; } + .euiAccordion__button:focus .euiAccordion__iconWrapper:focus-visible { + outline-style: auto; } + .euiAccordion__button:focus .euiAccordion__iconWrapper:not(:focus-visible) { + outline: none; } + +.euiAccordion__buttonReverse { + -webkit-flex-direction: row-reverse; + flex-direction: row-reverse; + -webkit-justify-content: space-between; + justify-content: space-between; } + .euiAccordion__buttonReverse .euiAccordion__iconWrapper { + margin-left: 8px; + margin-right: 4px; } + +.euiAccordion__iconWrapper { + width: 16px; + height: 16px; + margin-left: 4px; + margin-right: 8px; + border-radius: 6px; + -webkit-flex-shrink: 0; + flex-shrink: 0; } + .euiAccordion__iconWrapper .euiAccordion__icon { + vertical-align: top; + transition: -webkit-transform 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); + transition: transform 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); + transition: transform 250ms cubic-bezier(0.694, 0.0482, 0.335, 1), -webkit-transform 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } + .euiAccordion__iconWrapper .euiAccordion__icon-isOpen { + -webkit-transform: rotate(90deg); + transform: rotate(90deg); } + +.euiAccordion__iconButton { + margin-left: 8px; + margin-right: 4px; } + .euiAccordion__iconButton:focus { + outline: 2px solid currentColor; + color: #36A2EF; } + .euiAccordion__iconButton:focus:focus-visible { + outline-style: auto; } + .euiAccordion__iconButton:focus:not(:focus-visible) { + outline: none; } + +.euiAccordion__optionalAction { + -webkit-flex-shrink: 0; + flex-shrink: 0; } + +.euiAccordion__childWrapper { + visibility: hidden; + height: 0; + opacity: 0; + overflow: hidden; + -webkit-transform: translatez(0); + transform: translatez(0); + transition: height 250ms cubic-bezier(0.694, 0.0482, 0.335, 1), opacity 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } + +.euiAccordion__padding--xs { + padding: 4px; } + +.euiAccordion__padding--s { + padding: 8px; } + +.euiAccordion__padding--m { + padding: 16px; } + +.euiAccordion__padding--l { + padding: 24px; } + +.euiAccordion__padding--xl { + padding: 32px; } + +.euiAccordion.euiAccordion-isOpen .euiAccordion__childWrapper { + visibility: visible; + opacity: 1; + height: auto; } + +.euiAccordion__children-isLoading { + line-height: 1.5; + display: -webkit-flex; + display: flex; + -webkit-align-items: center; + align-items: center; } + .euiAccordion__children-isLoading .euiAccordion__spinner { + margin-right: 4px; } + +.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 #343741; + border-bottom: 1px solid #343741; } + .euiAccordionForm + .euiAccordionForm { + border-top: none; } + .euiAccordionForm:hover .euiAccordionForm__extraAction { + opacity: 1; + visibility: visible; } + +.euiAspectRatio { + position: relative; } + .euiAspectRatio > * { + position: absolute !important; + top: 0 !important; + left: 0 !important; + width: 100% !important; + height: 100% !important; } + +.euiAvatar { + -webkit-flex-shrink: 0; + flex-shrink: 0; + display: -webkit-inline-flex; + display: inline-flex; + -webkit-justify-content: center; + justify-content: center; + -webkit-align-items: center; + align-items: center; + background-size: cover; + text-align: center; + vertical-align: middle; + overflow-x: hidden; + font-weight: 500; } + +.euiAvatar--user { + position: relative; + border-radius: 50%; } + .euiAvatar--user:after { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + border-radius: 50%; + content: ''; + pointer-events: none; + border: 1px solid rgba(212, 218, 229, 0.05); } + +.euiAvatar--space { + position: relative; + border-radius: 6px; } + .euiAvatar--space:after { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + border-radius: 6px; + content: ''; + pointer-events: none; + border: 1px solid rgba(212, 218, 229, 0.05); } + +.euiAvatar-isDisabled { + cursor: not-allowed; + -webkit-filter: grayscale(100%); + filter: grayscale(100%); } + +.euiAvatar--plain { + background-color: #1D1E24; } + +.euiAvatar--s { + width: 24px; + height: 24px; + line-height: 24px; + font-size: 12px; } + +.euiAvatar--m { + width: 32px; + height: 32px; + line-height: 32px; + font-size: 14.4px; } + +.euiAvatar--l { + width: 40px; + height: 40px; + line-height: 40px; + font-size: 19.2px; } + +.euiAvatar--xl { + width: 64px; + height: 64px; + line-height: 64px; + font-size: 25.6px; } + +/** + * 1. Accounts for the border + */ +.euiBadge { + font-size: 12px; + font-weight: 500; + line-height: 18px; + /* 1 */ + padding: 0 8px; + display: inline-block; + text-decoration: none; + border-radius: 3px; + border: solid 1px transparent; + background-color: transparent; + white-space: nowrap; + vertical-align: middle; + cursor: default; + max-width: 100%; + text-align: left; } + .euiBadge.euiBadge-isDisabled { + color: #858a91 !important; + background-color: #515761 !important; } + .euiBadge:focus-within { + outline: 2px solid currentColor; } + .euiBadge:focus-within:focus-visible { + outline-style: auto; } + .euiBadge:focus-within:not(:focus-visible) { + outline: none; } + .euiBadge + .euiBadge { + margin-left: 4px; } + .euiBadge .euiBadge__content { + min-height: 18px; + display: -webkit-flex; + display: flex; + -webkit-align-items: center; + align-items: center; + overflow: hidden; } + .euiBadge .euiBadge__childButton { + max-width: 100%; + overflow: hidden !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; + word-wrap: normal !important; + -webkit-flex: 1 1 auto; + flex: 1 1 auto; + text-align: inherit; + font-weight: inherit; + line-height: inherit; + color: inherit; } + .euiBadge .euiBadge__childButton:disabled { + cursor: not-allowed; } + .euiBadge .euiBadge__childButton:not(:disabled):hover, .euiBadge .euiBadge__childButton:not(:disabled):focus { + text-decoration: underline; } + .euiBadge .euiBadge__iconButton { + -webkit-flex: 0 0 auto; + flex: 0 0 auto; + font-size: 0; + margin-left: 4px; } + .euiBadge .euiBadge__iconButton:focus { + background-color: rgba(255, 255, 255, 0.8); + color: #000; + border-radius: 2px; } + .euiBadge .euiBadge__iconButton:disabled { + cursor: not-allowed; } + .euiBadge .euiBadge__iconButton .euiBadge__icon { + margin: 0 !important; } + .euiBadge .euiBadge__text { + max-width: 100%; + overflow: hidden !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; + word-wrap: normal !important; + -webkit-flex: 1 1 auto; + flex: 1 1 auto; + cursor: default; } + .euiBadge .euiBadge__icon { + -webkit-flex: 0 0 auto; + flex: 0 0 auto; } + .euiBadge .euiBadge__icon:not(:only-child) { + margin-left: 4px; } + .euiBadge.euiBadge--iconLeft .euiBadge__content { + -webkit-flex-direction: row-reverse; + flex-direction: row-reverse; } + .euiBadge.euiBadge--iconLeft .euiBadge__iconButton, + .euiBadge.euiBadge--iconLeft .euiBadge__icon:not(:only-child) { + margin-right: 4px; + margin-left: 0; } + +.euiBadge-isClickable:not(:disabled):hover, .euiBadge-isClickable:not(:disabled):focus { + text-decoration: underline; } + +.euiBadge-isClickable.euiBadge-isDisabled { + cursor: not-allowed; } + +.euiBadge-isClickable:focus { + outline: 2px solid currentColor; } + .euiBadge-isClickable:focus:focus-visible { + outline-style: auto; } + .euiBadge-isClickable:focus:not(:focus-visible) { + outline: none; } + +.euiBadge-isClickable .euiBadge__text { + cursor: inherit; } + +.euiBadge--hollow { + background-color: #1D1E24; + border-color: #52555e; + color: #DFE5EF; } + +.euiBadgeGroup__item { + display: inline-block; + max-width: 100%; } + +.euiBadgeGroup--gutterExtraSmall { + margin: -2px; } + .euiBadgeGroup--gutterExtraSmall > .euiBadgeGroup__item { + margin: 2px; + max-width: calc(100% - 4px); } + +.euiBadgeGroup--gutterSmall { + margin: -4px; } + .euiBadgeGroup--gutterSmall > .euiBadgeGroup__item { + margin: 4px; + max-width: calc(100% - 8px); } + +.euiBetaBadge { + display: inline-block; + padding: 0 16px; + border-radius: 24px; + box-shadow: inset 0 0 0 1px #343741; + vertical-align: super; + font-size: 12px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: .05em; + line-height: 24px; + text-align: center; + white-space: nowrap; + cursor: default; } + .euiBetaBadge:focus { + outline: 2px solid currentColor; } + .euiBetaBadge:focus:focus-visible { + outline-style: auto; } + .euiBetaBadge:focus:not(:focus-visible) { + outline: none; } + +.euiBetaBadge--iconOnly { + padding: 0; + width: 24px; } + .euiBetaBadge--iconOnly .euiBetaBadge__icon { + position: relative; + margin-top: -1px; } + +.euiNotificationBadge { + -webkit-flex-shrink: 0; + flex-shrink: 0; + display: inline-block; + border-radius: 6px; + font-size: 12px; + font-weight: 500; + line-height: 16px; + height: 16px; + min-width: 16px; + padding-left: 4px; + padding-right: 4px; + vertical-align: middle; + text-align: center; + transition: all 150ms ease-in; + cursor: default; + background: #F68FBE; + color: #000; } + +.euiNotificationBadge--medium { + line-height: 20px; + height: 20px; + min-width: 24px; } + +.euiNotificationBadge--subdued { + background: #71737a; + color: #FFF; } + +.euiBasicTable-loading { + position: relative; } + .euiBasicTable-loading tbody { + overflow: hidden; } + .euiBasicTable-loading tbody:before { + position: absolute; + content: ''; + width: 100%; + height: 2px; + background-color: #36A2EF; + -webkit-animation: euiBasicTableLoading 1000ms linear; + animation: euiBasicTableLoading 1000ms linear; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; } + +@-webkit-keyframes euiBasicTableLoading { + from { + left: 0; + width: 0; } + 20% { + left: 0; + width: 40%; } + 80% { + left: 60%; + width: 40%; } + 100% { + left: 100%; + width: 0; } } + +@keyframes euiBasicTableLoading { + from { + left: 0; + width: 0; } + 20% { + left: 0; + width: 40%; } + 80% { + left: 60%; + width: 40%; } + 100% { + left: 100%; + width: 0; } } + +.euiBeacon { + position: relative; + background-color: #54B399; + border-radius: 50%; } + .euiBeacon:before, .euiBeacon:after { + position: absolute; + content: ''; + height: 100%; + width: 100%; + left: 0; + top: 0; + background-color: transparent; + border-radius: 50%; + box-shadow: 0 0 1px 1px #54B399; } + .euiBeacon:before { + -webkit-animation: euiBeaconPulseLarge 2.5s infinite ease-out; + animation: euiBeaconPulseLarge 2.5s infinite ease-out; } + .euiBeacon:after { + -webkit-animation: euiBeaconPulseSmall 2.5s infinite ease-out .25s; + animation: euiBeaconPulseSmall 2.5s infinite ease-out .25s; } + +@-webkit-keyframes euiBeaconPulseLarge { + 0% { + -webkit-transform: scale(0.1); + transform: scale(0.1); + opacity: 1; } + 70% { + -webkit-transform: scale(3); + transform: scale(3); + opacity: 0; } + 100% { + opacity: 0; } } + +@keyframes euiBeaconPulseLarge { + 0% { + -webkit-transform: scale(0.1); + transform: scale(0.1); + opacity: 1; } + 70% { + -webkit-transform: scale(3); + transform: scale(3); + opacity: 0; } + 100% { + opacity: 0; } } + +@-webkit-keyframes euiBeaconPulseSmall { + 0% { + -webkit-transform: scale(0.1); + transform: scale(0.1); + opacity: 1; } + 70% { + -webkit-transform: scale(2); + transform: scale(2); + opacity: 0; } + 100% { + opacity: 0; } } + +@keyframes euiBeaconPulseSmall { + 0% { + -webkit-transform: scale(0.1); + transform: scale(0.1); + opacity: 1; } + 70% { + -webkit-transform: scale(2); + transform: scale(2); + opacity: 0; } + 100% { + opacity: 0; } } + +.euiBottomBar { + box-shadow: 0 0 0.8px rgba(0, 0, 0, 0.15), 0 0 2px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 0 17px rgba(0, 0, 0, 0.075); + background: #131317; + color: #FFF; } + @media screen and (prefers-reduced-motion: no-preference) { + .euiBottomBar { + -webkit-animation: euiBottomBarAppear 350ms cubic-bezier(0.694, 0.0482, 0.335, 1); + animation: euiBottomBarAppear 350ms cubic-bezier(0.694, 0.0482, 0.335, 1); } } + +.euiBottomBar--fixed { + position: fixed; + z-index: 998; } + +.euiBottomBar--sticky { + position: -webkit-sticky; + position: sticky; + z-index: 998; } + +.euiBottomBar--paddingSmall { + padding: 8px; } + +.euiBottomBar--paddingMedium { + padding: 16px; } + +.euiBottomBar--paddingLarge { + padding: 24px; } + +@-webkit-keyframes euiBottomBarAppear { + 0% { + -webkit-transform: translateY(100%); + transform: translateY(100%); + opacity: 0; } + 100% { + -webkit-transform: translateY(0%); + transform: translateY(0%); + opacity: 1; } } + +@keyframes euiBottomBarAppear { + 0% { + -webkit-transform: translateY(100%); + transform: translateY(100%); + opacity: 0; } + 100% { + -webkit-transform: translateY(0%); + transform: translateY(0%); + opacity: 1; } } + +.euiButton { + 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", -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.71429rem; + font-weight: 500; + text-decoration: none; + transition: background-color 250ms ease-in-out, border-color 250ms ease-in-out; + outline-offset: -1px; + box-shadow: 0 0.8px 0.8px rgba(0, 0, 0, 0.1), 0 2.3px 2px rgba(0, 0, 0, 0.075); + border-radius: 6px; + min-width: 112px; } + @media screen and (prefers-reduced-motion: no-preference) { + .euiButton { + transition: background 250ms ease-in-out, -webkit-transform 250ms ease-in-out; + transition: transform 250ms ease-in-out, background 250ms ease-in-out; + transition: transform 250ms ease-in-out, background 250ms ease-in-out, -webkit-transform 250ms ease-in-out; } + .euiButton:hover:not([class*='isDisabled']) { + -webkit-transform: translateY(-1px); + transform: translateY(-1px); } + .euiButton: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); } + .euiButton:active:not([class*='isDisabled']) { + -webkit-transform: translateY(1px); + transform: translateY(1px); } } + .euiButton:hover:not([class*='isDisabled']), .euiButton:focus { + text-decoration: underline; } + .euiButton .euiButton__content { + padding: 0 12px; } + .euiButton .euiButton__text { + text-overflow: ellipsis; + overflow: hidden; } + .euiButton.euiButton--small { + height: 32px; + line-height: 32px; } + .euiButton:hover, .euiButton:active { + box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25), 0 3.6px 13px rgba(0, 0, 0, 0.175), 0 8.4px 23px rgba(0, 0, 0, 0.15), 0 23px 35px rgba(0, 0, 0, 0.125); } + .euiButton:not([class*='isDisabled']):hover, .euiButton:not([class*='isDisabled']):focus, .euiButton:not([class*='isDisabled']):focus-within { + background-color: rgba(54, 162, 239, 0.1); } + .euiButton.euiButton-isDisabled { + pointer-events: auto; + cursor: not-allowed; + color: #515761; + border-color: #515761; } + .euiButton.euiButton-isDisabled .euiButtonContent__icon { + fill: currentColor; } + .euiButton.euiButton-isDisabled .euiButtonContent__spinner { + border-color: #36A2EF currentColor currentColor currentColor; } + .euiButton.euiButton-isDisabled.euiButton--fill { + color: #858a91; + background-color: #515761; + border-color: #515761; } + .euiButton.euiButton-isDisabled.euiButton--fill:hover, .euiButton.euiButton-isDisabled.euiButton--fill:focus, .euiButton.euiButton-isDisabled.euiButton--fill:focus-within { + background-color: #515761; + border-color: #515761; } + .euiButton.euiButton-isDisabled:hover, .euiButton.euiButton-isDisabled:focus, .euiButton.euiButton-isDisabled:focus-within { + box-shadow: 0 0.8px 0.8px rgba(0, 0, 0, 0.1), 0 2.3px 2px rgba(0, 0, 0, 0.075); + text-decoration: none; } + +.euiButton--primary { + color: #36A2EF; + border-color: #36A2EF; } + .euiButton--primary.euiButton--fill { + background-color: #36A2EF; + border-color: #36A2EF; + color: #000; } + .euiButton--primary.euiButton--fill:not([class*='isDisabled']):hover, .euiButton--primary.euiButton--fill:not([class*='isDisabled']):focus, .euiButton--primary.euiButton--fill:not([class*='isDisabled']):focus-within { + background-color: #1e97ed; + border-color: #1e97ed; } + .euiButton--primary:not([class*='isDisabled']) { + box-shadow: 0 0.8px 0.8px rgba(0, 0, 0, 0.1), 0 2.3px 2px rgba(0, 0, 0, 0.075); } + .euiButton--primary:not([class*='isDisabled']):hover, .euiButton--primary:not([class*='isDisabled']):focus, .euiButton--primary:not([class*='isDisabled']):focus-within { + box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25), 0 3.6px 13px rgba(0, 0, 0, 0.175), 0 8.4px 23px rgba(0, 0, 0, 0.15), 0 23px 35px rgba(0, 0, 0, 0.125); + background-color: rgba(54, 162, 239, 0.1); } + +.euiButton--secondary { + color: #7DDED8; + border-color: #7DDED8; } + .euiButton--secondary.euiButton--fill { + background-color: #7DDED8; + border-color: #7DDED8; + color: #000; } + .euiButton--secondary.euiButton--fill:not([class*='isDisabled']):hover, .euiButton--secondary.euiButton--fill:not([class*='isDisabled']):focus, .euiButton--secondary.euiButton--fill:not([class*='isDisabled']):focus-within { + background-color: #69d9d2; + border-color: #69d9d2; } + .euiButton--secondary:not([class*='isDisabled']) { + box-shadow: 0 0.8px 0.8px rgba(0, 0, 0, 0.1), 0 2.3px 2px rgba(0, 0, 0, 0.075); } + .euiButton--secondary:not([class*='isDisabled']):hover, .euiButton--secondary:not([class*='isDisabled']):focus, .euiButton--secondary:not([class*='isDisabled']):focus-within { + box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25), 0 3.6px 13px rgba(0, 0, 0, 0.175), 0 8.4px 23px rgba(0, 0, 0, 0.15), 0 23px 35px rgba(0, 0, 0, 0.125); + background-color: rgba(125, 222, 216, 0.1); } + +.euiButton--warning { + color: #F3D371; + border-color: #F3D371; } + .euiButton--warning.euiButton--fill { + background-color: #F3D371; + border-color: #F3D371; + color: #000; } + .euiButton--warning.euiButton--fill:not([class*='isDisabled']):hover, .euiButton--warning.euiButton--fill:not([class*='isDisabled']):focus, .euiButton--warning.euiButton--fill:not([class*='isDisabled']):focus-within { + background-color: #f1cc59; + border-color: #f1cc59; } + .euiButton--warning:not([class*='isDisabled']) { + box-shadow: 0 0.8px 0.8px rgba(0, 0, 0, 0.1), 0 2.3px 2px rgba(0, 0, 0, 0.075); } + .euiButton--warning:not([class*='isDisabled']):hover, .euiButton--warning:not([class*='isDisabled']):focus, .euiButton--warning:not([class*='isDisabled']):focus-within { + box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25), 0 3.6px 13px rgba(0, 0, 0, 0.175), 0 8.4px 23px rgba(0, 0, 0, 0.15), 0 23px 35px rgba(0, 0, 0, 0.125); + background-color: rgba(243, 211, 113, 0.1); } + +.euiButton--danger { + color: #F86B63; + border-color: #F86B63; } + .euiButton--danger.euiButton--fill { + background-color: #F86B63; + border-color: #F86B63; + color: #000; } + .euiButton--danger.euiButton--fill:not([class*='isDisabled']):hover, .euiButton--danger.euiButton--fill:not([class*='isDisabled']):focus, .euiButton--danger.euiButton--fill:not([class*='isDisabled']):focus-within { + background-color: #f7544b; + border-color: #f7544b; } + .euiButton--danger:not([class*='isDisabled']) { + box-shadow: 0 0.8px 0.8px rgba(0, 0, 0, 0.1), 0 2.3px 2px rgba(0, 0, 0, 0.075); } + .euiButton--danger:not([class*='isDisabled']):hover, .euiButton--danger:not([class*='isDisabled']):focus, .euiButton--danger:not([class*='isDisabled']):focus-within { + box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25), 0 3.6px 13px rgba(0, 0, 0, 0.175), 0 8.4px 23px rgba(0, 0, 0, 0.15), 0 23px 35px rgba(0, 0, 0, 0.125); + background-color: rgba(248, 107, 99, 0.1); } + +.euiButton--ghost { + color: #FFF; + border-color: #FFF; } + .euiButton--ghost.euiButton--fill { + background-color: #FFF; + border-color: #FFF; + color: #000; } + .euiButton--ghost.euiButton--fill:not([class*='isDisabled']):hover, .euiButton--ghost.euiButton--fill:not([class*='isDisabled']):focus, .euiButton--ghost.euiButton--fill:not([class*='isDisabled']):focus-within { + background-color: #f2f2f2; + border-color: #f2f2f2; } + .euiButton--ghost:not([class*='isDisabled']) { + box-shadow: 0 0.8px 0.8px rgba(0, 0, 0, 0.1), 0 2.3px 2px rgba(0, 0, 0, 0.075); } + .euiButton--ghost:not([class*='isDisabled']):hover, .euiButton--ghost:not([class*='isDisabled']):focus, .euiButton--ghost:not([class*='isDisabled']):focus-within { + box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25), 0 3.6px 13px rgba(0, 0, 0, 0.175), 0 8.4px 23px rgba(0, 0, 0, 0.15), 0 23px 35px rgba(0, 0, 0, 0.125); + background-color: rgba(255, 255, 255, 0.1); } + +.euiButton--text { + color: #DFE5EF; + border-color: #98A2B3; } + .euiButton--text.euiButton--fill { + background-color: #98A2B3; + border-color: #98A2B3; + color: #000; } + .euiButton--text.euiButton--fill:not([class*='isDisabled']):hover, .euiButton--text.euiButton--fill:not([class*='isDisabled']):focus, .euiButton--text.euiButton--fill:not([class*='isDisabled']):focus-within { + background-color: #8995a8; + border-color: #8995a8; } + .euiButton--text:not([class*='isDisabled']) { + box-shadow: 0 0.8px 0.8px rgba(0, 0, 0, 0.1), 0 2.3px 2px rgba(0, 0, 0, 0.075); } + .euiButton--text:not([class*='isDisabled']):hover, .euiButton--text:not([class*='isDisabled']):focus, .euiButton--text:not([class*='isDisabled']):focus-within { + box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25), 0 3.6px 13px rgba(0, 0, 0, 0.175), 0 8.4px 23px rgba(0, 0, 0, 0.15), 0 23px 35px rgba(0, 0, 0, 0.125); + background-color: rgba(152, 162, 179, 0.1); } + +.euiButton.euiButton-isDisabled.euiButton--ghost, .euiButton.euiButton-isDisabled.euiButton--ghost:hover, .euiButton.euiButton-isDisabled.euiButton--ghost:focus, .euiButton.euiButton-isDisabled.euiButton--ghost:focus-within { + box-shadow: 0 0.8px 0.8px rgba(0, 0, 0, 0.1), 0 2.3px 2px rgba(0, 0, 0, 0.075); + color: #343741; + border-color: #343741; } + +.euiButton.euiButton-isDisabled.euiButton--ghost.euiButton--fill { + background-color: #343741; + color: #62656d; } + +.euiButton--fullWidth { + display: block; + width: 100%; } + +.euiButtonContent { + height: 100%; + width: 100%; + vertical-align: middle; + display: -webkit-flex; + display: flex; + -webkit-justify-content: center; + justify-content: center; + -webkit-align-items: center; + align-items: center; } + .euiButtonContent .euiButtonContent__icon, + .euiButtonContent .euiButtonContent__spinner { + -webkit-flex-shrink: 0; + flex-shrink: 0; } + .euiButtonContent > * + * { + -webkit-margin-start: 8px; + margin-inline-start: 8px; } + +.euiButtonContent--iconRight { + height: 100%; + width: 100%; + vertical-align: middle; + -webkit-flex-direction: row-reverse; + flex-direction: row-reverse; } + .euiButtonContent--iconRight .euiButtonContent__icon, + .euiButtonContent--iconRight .euiButtonContent__spinner { + -webkit-flex-shrink: 0; + flex-shrink: 0; } + .euiButtonContent--iconRight > * + * { + -webkit-margin-start: 0; + margin-inline-start: 0; + -webkit-margin-end: 8px; + margin-inline-end: 8px; } + +/** + * 1. We don't want any of the animations that come inherited from the mixin. + * These should act like normal links instead. + * 2. Change the easing, quickness to not bounce so lighter backgrounds don't flash + */ +.euiButtonEmpty { + 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", -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.71429rem; + font-weight: 500; + text-decoration: none; + transition: background-color 250ms ease-in-out, border-color 250ms ease-in-out; + outline-offset: -1px; + border-color: transparent; + background-color: transparent; + box-shadow: none; + -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 */ } + @media screen and (prefers-reduced-motion: no-preference) { + .euiButtonEmpty { + transition: background 250ms ease-in-out, -webkit-transform 250ms ease-in-out; + transition: transform 250ms ease-in-out, background 250ms ease-in-out; + transition: transform 250ms ease-in-out, background 250ms ease-in-out, -webkit-transform 250ms ease-in-out; } + .euiButtonEmpty:hover:not([class*='isDisabled']) { + -webkit-transform: translateY(-1px); + transform: translateY(-1px); } + .euiButtonEmpty: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); } + .euiButtonEmpty:active:not([class*='isDisabled']) { + -webkit-transform: translateY(1px); + transform: translateY(1px); } } + .euiButtonEmpty:hover:not([class*='isDisabled']), .euiButtonEmpty:focus { + text-decoration: underline; } + .euiButtonEmpty .euiButtonEmpty__content { + padding: 0 8px; } + .euiButtonEmpty .euiButtonEmpty__text { + text-overflow: ellipsis; + overflow: hidden; } + .euiButtonEmpty.euiButtonEmpty--small { + height: 32px; } + .euiButtonEmpty.euiButtonEmpty--xSmall { + height: 24px; + font-size: 14px; } + .euiButtonEmpty:disabled { + pointer-events: auto; + cursor: not-allowed; + color: #515761; } + .euiButtonEmpty:disabled .euiButtonContent__icon { + fill: currentColor; } + .euiButtonEmpty:disabled .euiButtonContent__spinner { + border-color: #36A2EF currentColor currentColor currentColor; } + .euiButtonEmpty:disabled:focus { + background-color: transparent; } + .euiButtonEmpty:disabled:hover, .euiButtonEmpty:disabled:focus { + text-decoration: none; } + +.euiButtonEmpty--flushLeft .euiButtonEmpty__content, +.euiButtonEmpty--flushRight .euiButtonEmpty__content, +.euiButtonEmpty--flushBoth .euiButtonEmpty__content { + padding-left: 0; + padding-right: 0; } + +.euiButtonEmpty--flushLeft { + margin-right: 8px; } + +.euiButtonEmpty--flushRight { + margin-left: 8px; } + +.euiButtonEmpty--primary { + color: #36A2EF; } + .euiButtonEmpty--primary:focus { + background-color: rgba(54, 162, 239, 0.1); } + +.euiButtonEmpty--danger { + color: #F86B63; } + .euiButtonEmpty--danger:focus { + background-color: rgba(248, 107, 99, 0.1); } + +.euiButtonEmpty--disabled { + color: #858a91; } + .euiButtonEmpty--disabled:focus { + background-color: rgba(81, 87, 97, 0.1); } + .euiButtonEmpty--disabled:hover { + cursor: not-allowed; } + +.euiButtonEmpty--ghost { + color: #FFF; } + .euiButtonEmpty--ghost:focus { + background-color: rgba(255, 255, 255, 0.1); } + +.euiButtonEmpty--text { + color: #DFE5EF; } + .euiButtonEmpty--text:focus { + background-color: rgba(223, 229, 239, 0.1); } + +.euiButtonEmpty--success { + color: #7DDED8; } + .euiButtonEmpty--success:focus { + background-color: rgba(125, 222, 216, 0.1); } + +.euiButtonEmpty--warning { + color: #F3D371; } + .euiButtonEmpty--warning:focus { + background-color: rgba(243, 211, 113, 0.1); } + +.euiButtonIcon { + 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", -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.71429rem; + font-weight: 500; + text-decoration: none; + transition: background-color 250ms ease-in-out, border-color 250ms ease-in-out; + outline-offset: -1px; + box-shadow: 0 0.8px 0.8px rgba(0, 0, 0, 0.1), 0 2.3px 2px rgba(0, 0, 0, 0.075); + border-radius: 6px; + width: 40px; + display: -webkit-inline-flex; + display: inline-flex; + -webkit-align-items: center; + align-items: center; + -webkit-justify-content: space-around; + justify-content: space-around; } + @media screen and (prefers-reduced-motion: no-preference) { + .euiButtonIcon { + transition: background 250ms ease-in-out, -webkit-transform 250ms ease-in-out; + transition: transform 250ms ease-in-out, background 250ms ease-in-out; + transition: transform 250ms ease-in-out, background 250ms ease-in-out, -webkit-transform 250ms ease-in-out; } + .euiButtonIcon:hover:not([class*='isDisabled']) { + -webkit-transform: translateY(-1px); + transform: translateY(-1px); } + .euiButtonIcon: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); } + .euiButtonIcon:active:not([class*='isDisabled']) { + -webkit-transform: translateY(1px); + transform: translateY(1px); } } + .euiButtonIcon:hover:not([class*='isDisabled']), .euiButtonIcon:focus { + text-decoration: underline; } + .euiButtonIcon > svg { + pointer-events: none; } + .euiButtonIcon.euiButtonIcon--empty { + box-shadow: none !important; + border: none; } + .euiButtonIcon.euiButtonIcon-isDisabled { + pointer-events: auto; + cursor: not-allowed; + color: #515761; + border-color: #515761; } + .euiButtonIcon.euiButtonIcon-isDisabled .euiButtonContent__icon { + fill: currentColor; } + .euiButtonIcon.euiButtonIcon-isDisabled .euiButtonContent__spinner { + border-color: #36A2EF currentColor currentColor currentColor; } + .euiButtonIcon.euiButtonIcon-isDisabled.euiButtonIcon--fill { + color: #858a91; + background-color: #515761; + border-color: #515761; } + .euiButtonIcon.euiButtonIcon-isDisabled.euiButtonIcon--fill:hover, .euiButtonIcon.euiButtonIcon-isDisabled.euiButtonIcon--fill:focus, .euiButtonIcon.euiButtonIcon-isDisabled.euiButtonIcon--fill:focus-within { + background-color: #515761; + border-color: #515761; } + .euiButtonIcon.euiButtonIcon-isDisabled:hover, .euiButtonIcon.euiButtonIcon-isDisabled:focus, .euiButtonIcon.euiButtonIcon-isDisabled:focus-within { + box-shadow: 0 0.8px 0.8px rgba(0, 0, 0, 0.1), 0 2.3px 2px rgba(0, 0, 0, 0.075); + text-decoration: none; } + +.euiButtonIcon--xSmall { + height: 24px; + width: 24px; } + +.euiButtonIcon--small { + height: 32px; + width: 32px; } + +.euiButtonIcon--accent { + color: #F68FBE; + border-color: #F68FBE; } + .euiButtonIcon--accent.euiButtonIcon--fill { + background-color: #F68FBE; + border-color: #F68FBE; + color: #000; } + .euiButtonIcon--accent.euiButtonIcon--fill:not([class*='isDisabled']):hover, .euiButtonIcon--accent.euiButtonIcon--fill:not([class*='isDisabled']):focus, .euiButtonIcon--accent.euiButtonIcon--fill:not([class*='isDisabled']):focus-within { + background-color: #f477b0; + border-color: #f477b0; } + .euiButtonIcon--accent:not([class*='isDisabled']) { + box-shadow: 0 0.8px 0.8px rgba(0, 0, 0, 0.1), 0 2.3px 2px rgba(0, 0, 0, 0.075); } + .euiButtonIcon--accent:not([class*='isDisabled']):hover, .euiButtonIcon--accent:not([class*='isDisabled']):focus, .euiButtonIcon--accent:not([class*='isDisabled']):focus-within { + box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25), 0 3.6px 13px rgba(0, 0, 0, 0.175), 0 8.4px 23px rgba(0, 0, 0, 0.15), 0 23px 35px rgba(0, 0, 0, 0.125); + background-color: rgba(246, 143, 190, 0.1); } + +.euiButtonIcon--danger { + color: #F86B63; + border-color: #F86B63; } + .euiButtonIcon--danger.euiButtonIcon--fill { + background-color: #F86B63; + border-color: #F86B63; + color: #000; } + .euiButtonIcon--danger.euiButtonIcon--fill:not([class*='isDisabled']):hover, .euiButtonIcon--danger.euiButtonIcon--fill:not([class*='isDisabled']):focus, .euiButtonIcon--danger.euiButtonIcon--fill:not([class*='isDisabled']):focus-within { + background-color: #f7544b; + border-color: #f7544b; } + .euiButtonIcon--danger:not([class*='isDisabled']) { + box-shadow: 0 0.8px 0.8px rgba(0, 0, 0, 0.1), 0 2.3px 2px rgba(0, 0, 0, 0.075); } + .euiButtonIcon--danger:not([class*='isDisabled']):hover, .euiButtonIcon--danger:not([class*='isDisabled']):focus, .euiButtonIcon--danger:not([class*='isDisabled']):focus-within { + box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25), 0 3.6px 13px rgba(0, 0, 0, 0.175), 0 8.4px 23px rgba(0, 0, 0, 0.15), 0 23px 35px rgba(0, 0, 0, 0.125); + background-color: rgba(248, 107, 99, 0.1); } + +.euiButtonIcon--ghost { + color: #FFF; + border-color: #FFF; } + .euiButtonIcon--ghost.euiButtonIcon--fill { + background-color: #FFF; + border-color: #FFF; + color: #000; } + .euiButtonIcon--ghost.euiButtonIcon--fill:not([class*='isDisabled']):hover, .euiButtonIcon--ghost.euiButtonIcon--fill:not([class*='isDisabled']):focus, .euiButtonIcon--ghost.euiButtonIcon--fill:not([class*='isDisabled']):focus-within { + background-color: #f2f2f2; + border-color: #f2f2f2; } + .euiButtonIcon--ghost:not([class*='isDisabled']) { + box-shadow: 0 0.8px 0.8px rgba(0, 0, 0, 0.1), 0 2.3px 2px rgba(0, 0, 0, 0.075); } + .euiButtonIcon--ghost:not([class*='isDisabled']):hover, .euiButtonIcon--ghost:not([class*='isDisabled']):focus, .euiButtonIcon--ghost:not([class*='isDisabled']):focus-within { + box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25), 0 3.6px 13px rgba(0, 0, 0, 0.175), 0 8.4px 23px rgba(0, 0, 0, 0.15), 0 23px 35px rgba(0, 0, 0, 0.125); + background-color: rgba(255, 255, 255, 0.1); } + +.euiButtonIcon--primary { + color: #36A2EF; + border-color: #36A2EF; } + .euiButtonIcon--primary.euiButtonIcon--fill { + background-color: #36A2EF; + border-color: #36A2EF; + color: #000; } + .euiButtonIcon--primary.euiButtonIcon--fill:not([class*='isDisabled']):hover, .euiButtonIcon--primary.euiButtonIcon--fill:not([class*='isDisabled']):focus, .euiButtonIcon--primary.euiButtonIcon--fill:not([class*='isDisabled']):focus-within { + background-color: #1e97ed; + border-color: #1e97ed; } + .euiButtonIcon--primary:not([class*='isDisabled']) { + box-shadow: 0 0.8px 0.8px rgba(0, 0, 0, 0.1), 0 2.3px 2px rgba(0, 0, 0, 0.075); } + .euiButtonIcon--primary:not([class*='isDisabled']):hover, .euiButtonIcon--primary:not([class*='isDisabled']):focus, .euiButtonIcon--primary:not([class*='isDisabled']):focus-within { + box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25), 0 3.6px 13px rgba(0, 0, 0, 0.175), 0 8.4px 23px rgba(0, 0, 0, 0.15), 0 23px 35px rgba(0, 0, 0, 0.125); + background-color: rgba(54, 162, 239, 0.1); } + +.euiButtonIcon--subdued { + color: #7a7f89; + border-color: #7a7f89; } + .euiButtonIcon--subdued.euiButtonIcon--fill { + background-color: #7a7f89; + border-color: #7a7f89; + color: #000; } + .euiButtonIcon--subdued.euiButtonIcon--fill:not([class*='isDisabled']):hover, .euiButtonIcon--subdued.euiButtonIcon--fill:not([class*='isDisabled']):focus, .euiButtonIcon--subdued.euiButtonIcon--fill:not([class*='isDisabled']):focus-within { + background-color: #6e727c; + border-color: #6e727c; } + .euiButtonIcon--subdued:not([class*='isDisabled']) { + box-shadow: 0 0.8px 0.8px rgba(0, 0, 0, 0.1), 0 2.3px 2px rgba(0, 0, 0, 0.075); } + .euiButtonIcon--subdued:not([class*='isDisabled']):hover, .euiButtonIcon--subdued:not([class*='isDisabled']):focus, .euiButtonIcon--subdued:not([class*='isDisabled']):focus-within { + box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25), 0 3.6px 13px rgba(0, 0, 0, 0.175), 0 8.4px 23px rgba(0, 0, 0, 0.15), 0 23px 35px rgba(0, 0, 0, 0.125); + background-color: rgba(122, 127, 137, 0.1); } + +.euiButtonIcon--success { + color: #7DDED8; + border-color: #7DDED8; } + .euiButtonIcon--success.euiButtonIcon--fill { + background-color: #7DDED8; + border-color: #7DDED8; + color: #000; } + .euiButtonIcon--success.euiButtonIcon--fill:not([class*='isDisabled']):hover, .euiButtonIcon--success.euiButtonIcon--fill:not([class*='isDisabled']):focus, .euiButtonIcon--success.euiButtonIcon--fill:not([class*='isDisabled']):focus-within { + background-color: #69d9d2; + border-color: #69d9d2; } + .euiButtonIcon--success:not([class*='isDisabled']) { + box-shadow: 0 0.8px 0.8px rgba(0, 0, 0, 0.1), 0 2.3px 2px rgba(0, 0, 0, 0.075); } + .euiButtonIcon--success:not([class*='isDisabled']):hover, .euiButtonIcon--success:not([class*='isDisabled']):focus, .euiButtonIcon--success:not([class*='isDisabled']):focus-within { + box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25), 0 3.6px 13px rgba(0, 0, 0, 0.175), 0 8.4px 23px rgba(0, 0, 0, 0.15), 0 23px 35px rgba(0, 0, 0, 0.125); + background-color: rgba(125, 222, 216, 0.1); } + +.euiButtonIcon--text { + color: #DFE5EF; + border-color: #98A2B3; } + .euiButtonIcon--text.euiButtonIcon--fill { + background-color: #98A2B3; + border-color: #98A2B3; + color: #000; } + .euiButtonIcon--text.euiButtonIcon--fill:not([class*='isDisabled']):hover, .euiButtonIcon--text.euiButtonIcon--fill:not([class*='isDisabled']):focus, .euiButtonIcon--text.euiButtonIcon--fill:not([class*='isDisabled']):focus-within { + background-color: #8995a8; + border-color: #8995a8; } + .euiButtonIcon--text:not([class*='isDisabled']) { + box-shadow: 0 0.8px 0.8px rgba(0, 0, 0, 0.1), 0 2.3px 2px rgba(0, 0, 0, 0.075); } + .euiButtonIcon--text:not([class*='isDisabled']):hover, .euiButtonIcon--text:not([class*='isDisabled']):focus, .euiButtonIcon--text:not([class*='isDisabled']):focus-within { + box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25), 0 3.6px 13px rgba(0, 0, 0, 0.175), 0 8.4px 23px rgba(0, 0, 0, 0.15), 0 23px 35px rgba(0, 0, 0, 0.125); + background-color: rgba(152, 162, 179, 0.1); } + +.euiButtonIcon--warning { + color: #F3D371; + border-color: #F3D371; } + .euiButtonIcon--warning.euiButtonIcon--fill { + background-color: #F3D371; + border-color: #F3D371; + color: #000; } + .euiButtonIcon--warning.euiButtonIcon--fill:not([class*='isDisabled']):hover, .euiButtonIcon--warning.euiButtonIcon--fill:not([class*='isDisabled']):focus, .euiButtonIcon--warning.euiButtonIcon--fill:not([class*='isDisabled']):focus-within { + background-color: #f1cc59; + border-color: #f1cc59; } + .euiButtonIcon--warning:not([class*='isDisabled']) { + box-shadow: 0 0.8px 0.8px rgba(0, 0, 0, 0.1), 0 2.3px 2px rgba(0, 0, 0, 0.075); } + .euiButtonIcon--warning:not([class*='isDisabled']):hover, .euiButtonIcon--warning:not([class*='isDisabled']):focus, .euiButtonIcon--warning:not([class*='isDisabled']):focus-within { + box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25), 0 3.6px 13px rgba(0, 0, 0, 0.175), 0 8.4px 23px rgba(0, 0, 0, 0.15), 0 23px 35px rgba(0, 0, 0, 0.125); + background-color: rgba(243, 211, 113, 0.1); } + +.euiButtonIcon.euiButtonIcon-isDisabled.euiButtonIcon--ghost, .euiButtonIcon.euiButtonIcon-isDisabled.euiButtonIcon--ghost:hover, .euiButtonIcon.euiButtonIcon-isDisabled.euiButtonIcon--ghost:focus, .euiButtonIcon.euiButtonIcon-isDisabled.euiButtonIcon--ghost:focus-within { + box-shadow: 0 0.8px 0.8px rgba(0, 0, 0, 0.1), 0 2.3px 2px rgba(0, 0, 0, 0.075); + color: #343741; + border-color: #343741; } + +.euiButtonIcon.euiButtonIcon-isDisabled.euiButtonIcon--ghost.euiButton--fill { + background-color: #343741; + color: #62656d; } + +.euiButtonGroup { + display: inline-block; + max-width: 100%; + position: relative; } + +.euiButtonGroup--fullWidth { + display: block; } + .euiButtonGroup--fullWidth .euiButtonGroup__buttons { + width: 100%; } + .euiButtonGroup--fullWidth .euiButtonGroup__buttons .euiButtonGroupButton { + -webkit-flex: 1; + flex: 1; } + +.euiButtonGroup__buttons { + box-shadow: 0 0.8px 0.8px rgba(0, 0, 0, 0.1), 0 2.3px 2px rgba(0, 0, 0, 0.075); + border-radius: 7px; + max-width: 100%; + display: -webkit-flex; + display: flex; + overflow: hidden; } + +.euiButtonGroup--isDisabled .euiButtonGroup__buttons { + box-shadow: none; } + +.euiButtonGroup--compressed .euiButtonGroup__buttons { + box-shadow: none !important; + border-radius: 4px; + background-color: #16171c; + height: 32px; + border: 1px solid rgba(255, 255, 255, 0.1); + overflow: visible; } + +.euiButtonGroupButton { + 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", -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.71429rem; + transition: background-color 250ms ease-in-out, border-color 250ms ease-in-out, color 250ms ease-in-out; + min-width: 0; + -webkit-flex-shrink: 1; + flex-shrink: 1; + -webkit-flex-grow: 0; + flex-grow: 0; } + .euiButtonGroupButton .euiButton__content { + padding: 0 12px; } + .euiButtonGroupButton-isIconOnly .euiButton__content { + padding: 0 8px; } + .euiButtonGroupButton .euiButton__text { + text-overflow: ellipsis; + overflow: hidden; } + .euiButtonGroupButton.euiButtonGroupButton--small { + height: 32px; + line-height: 32px; } + .euiButtonGroupButton:not([class*='isDisabled']):hover, .euiButtonGroupButton:not([class*='isDisabled']):focus, .euiButtonGroupButton:not([class*='isDisabled']):focus-within { + background-color: rgba(54, 162, 239, 0.1); + text-decoration: underline; } + .euiButtonGroupButton.euiButtonGroupButton-isDisabled { + pointer-events: auto; + cursor: not-allowed; + color: #515761; } + .euiButtonGroupButton.euiButtonGroupButton-isDisabled .euiButtonContent__icon { + fill: currentColor; } + .euiButtonGroupButton.euiButtonGroupButton-isDisabled .euiButtonContent__spinner { + border-color: #36A2EF currentColor currentColor currentColor; } + .euiButtonGroupButton.euiButtonGroupButton-isDisabled.euiButtonGroupButton-isSelected { + color: #858a91; + background-color: #515761; + border-color: #515761; } + .euiButtonGroupButton.euiButtonGroupButton-isDisabled.euiButtonGroupButton-isSelected:hover, .euiButtonGroupButton.euiButtonGroupButton-isDisabled.euiButtonGroupButton-isSelected:focus, .euiButtonGroupButton.euiButtonGroupButton-isDisabled.euiButtonGroupButton-isSelected:focus-within { + background-color: #515761; + border-color: #515761; } + .euiButtonGroupButton.euiButtonGroupButton--primary:not([class*='isDisabled']) { + color: #36A2EF; } + .euiButtonGroupButton.euiButtonGroupButton--primary:not([class*='isDisabled']).euiButtonGroupButton-isSelected { + background-color: #36A2EF; + border-color: #36A2EF; + color: #000; } + .euiButtonGroupButton.euiButtonGroupButton--primary:not([class*='isDisabled']).euiButtonGroupButton-isSelected:hover, .euiButtonGroupButton.euiButtonGroupButton--primary:not([class*='isDisabled']).euiButtonGroupButton-isSelected:focus, .euiButtonGroupButton.euiButtonGroupButton--primary:not([class*='isDisabled']).euiButtonGroupButton-isSelected:focus-within { + background-color: #1e97ed; + border-color: #1e97ed; } + .euiButtonGroupButton.euiButtonGroupButton--primary:not([class*='isDisabled']):hover, .euiButtonGroupButton.euiButtonGroupButton--primary:not([class*='isDisabled']):focus, .euiButtonGroupButton.euiButtonGroupButton--primary:not([class*='isDisabled']):focus-within { + background-color: rgba(54, 162, 239, 0.1); } + .euiButtonGroupButton.euiButtonGroupButton--secondary:not([class*='isDisabled']) { + color: #7DDED8; } + .euiButtonGroupButton.euiButtonGroupButton--secondary:not([class*='isDisabled']).euiButtonGroupButton-isSelected { + background-color: #7DDED8; + border-color: #7DDED8; + color: #000; } + .euiButtonGroupButton.euiButtonGroupButton--secondary:not([class*='isDisabled']).euiButtonGroupButton-isSelected:hover, .euiButtonGroupButton.euiButtonGroupButton--secondary:not([class*='isDisabled']).euiButtonGroupButton-isSelected:focus, .euiButtonGroupButton.euiButtonGroupButton--secondary:not([class*='isDisabled']).euiButtonGroupButton-isSelected:focus-within { + background-color: #69d9d2; + border-color: #69d9d2; } + .euiButtonGroupButton.euiButtonGroupButton--secondary:not([class*='isDisabled']):hover, .euiButtonGroupButton.euiButtonGroupButton--secondary:not([class*='isDisabled']):focus, .euiButtonGroupButton.euiButtonGroupButton--secondary:not([class*='isDisabled']):focus-within { + background-color: rgba(125, 222, 216, 0.1); } + .euiButtonGroupButton.euiButtonGroupButton--warning:not([class*='isDisabled']) { + color: #F3D371; } + .euiButtonGroupButton.euiButtonGroupButton--warning:not([class*='isDisabled']).euiButtonGroupButton-isSelected { + background-color: #F3D371; + border-color: #F3D371; + color: #000; } + .euiButtonGroupButton.euiButtonGroupButton--warning:not([class*='isDisabled']).euiButtonGroupButton-isSelected:hover, .euiButtonGroupButton.euiButtonGroupButton--warning:not([class*='isDisabled']).euiButtonGroupButton-isSelected:focus, .euiButtonGroupButton.euiButtonGroupButton--warning:not([class*='isDisabled']).euiButtonGroupButton-isSelected:focus-within { + background-color: #f1cc59; + border-color: #f1cc59; } + .euiButtonGroupButton.euiButtonGroupButton--warning:not([class*='isDisabled']):hover, .euiButtonGroupButton.euiButtonGroupButton--warning:not([class*='isDisabled']):focus, .euiButtonGroupButton.euiButtonGroupButton--warning:not([class*='isDisabled']):focus-within { + background-color: rgba(243, 211, 113, 0.1); } + .euiButtonGroupButton.euiButtonGroupButton--danger:not([class*='isDisabled']) { + color: #F86B63; } + .euiButtonGroupButton.euiButtonGroupButton--danger:not([class*='isDisabled']).euiButtonGroupButton-isSelected { + background-color: #F86B63; + border-color: #F86B63; + color: #000; } + .euiButtonGroupButton.euiButtonGroupButton--danger:not([class*='isDisabled']).euiButtonGroupButton-isSelected:hover, .euiButtonGroupButton.euiButtonGroupButton--danger:not([class*='isDisabled']).euiButtonGroupButton-isSelected:focus, .euiButtonGroupButton.euiButtonGroupButton--danger:not([class*='isDisabled']).euiButtonGroupButton-isSelected:focus-within { + background-color: #f7544b; + border-color: #f7544b; } + .euiButtonGroupButton.euiButtonGroupButton--danger:not([class*='isDisabled']):hover, .euiButtonGroupButton.euiButtonGroupButton--danger:not([class*='isDisabled']):focus, .euiButtonGroupButton.euiButtonGroupButton--danger:not([class*='isDisabled']):focus-within { + background-color: rgba(248, 107, 99, 0.1); } + .euiButtonGroupButton.euiButtonGroupButton--ghost:not([class*='isDisabled']) { + color: #FFF; } + .euiButtonGroupButton.euiButtonGroupButton--ghost:not([class*='isDisabled']).euiButtonGroupButton-isSelected { + background-color: #FFF; + border-color: #FFF; + color: #000; } + .euiButtonGroupButton.euiButtonGroupButton--ghost:not([class*='isDisabled']).euiButtonGroupButton-isSelected:hover, .euiButtonGroupButton.euiButtonGroupButton--ghost:not([class*='isDisabled']).euiButtonGroupButton-isSelected:focus, .euiButtonGroupButton.euiButtonGroupButton--ghost:not([class*='isDisabled']).euiButtonGroupButton-isSelected:focus-within { + background-color: #f2f2f2; + border-color: #f2f2f2; } + .euiButtonGroupButton.euiButtonGroupButton--ghost:not([class*='isDisabled']):hover, .euiButtonGroupButton.euiButtonGroupButton--ghost:not([class*='isDisabled']):focus, .euiButtonGroupButton.euiButtonGroupButton--ghost:not([class*='isDisabled']):focus-within { + background-color: rgba(255, 255, 255, 0.1); } + .euiButtonGroupButton.euiButtonGroupButton--text:not([class*='isDisabled']) { + color: #DFE5EF; } + .euiButtonGroupButton.euiButtonGroupButton--text:not([class*='isDisabled']).euiButtonGroupButton-isSelected { + background-color: #98A2B3; + border-color: #98A2B3; + color: #000; } + .euiButtonGroupButton.euiButtonGroupButton--text:not([class*='isDisabled']).euiButtonGroupButton-isSelected:hover, .euiButtonGroupButton.euiButtonGroupButton--text:not([class*='isDisabled']).euiButtonGroupButton-isSelected:focus, .euiButtonGroupButton.euiButtonGroupButton--text:not([class*='isDisabled']).euiButtonGroupButton-isSelected:focus-within { + background-color: #8995a8; + border-color: #8995a8; } + .euiButtonGroupButton.euiButtonGroupButton--text:not([class*='isDisabled']):hover, .euiButtonGroupButton.euiButtonGroupButton--text:not([class*='isDisabled']):focus, .euiButtonGroupButton.euiButtonGroupButton--text:not([class*='isDisabled']):focus-within { + background-color: rgba(152, 162, 179, 0.1); } + +.euiButtonGroupButton__textShift::after { + display: block; + content: attr(data-text); + font-weight: 700; + height: 0; + overflow: hidden; + visibility: hidden; } + +/** + * Medium and Small sizing (regular button style) + */ +.euiButtonGroup--medium .euiButtonGroupButton, +.euiButtonGroup--small .euiButtonGroupButton { + border: 1px solid #343741; } + .euiButtonGroup--medium .euiButtonGroupButton:not(:first-child), + .euiButtonGroup--small .euiButtonGroupButton:not(:first-child) { + margin-left: -1px; } + .euiButtonGroup--medium .euiButtonGroupButton:first-child, + .euiButtonGroup--small .euiButtonGroupButton:first-child { + border-radius: 6px 0 0 6px; } + .euiButtonGroup--medium .euiButtonGroupButton:last-child, + .euiButtonGroup--small .euiButtonGroupButton:last-child { + border-radius: 0 6px 6px 0; } + +.euiButtonGroup--medium .euiButtonGroupButton.euiButtonGroupButton-isDisabled.euiButtonGroupButton--ghost, .euiButtonGroup--medium .euiButtonGroupButton.euiButtonGroupButton-isDisabled.euiButtonGroupButton--ghost:hover, .euiButtonGroup--medium .euiButtonGroupButton.euiButtonGroupButton-isDisabled.euiButtonGroupButton--ghost:focus, .euiButtonGroup--medium .euiButtonGroupButton.euiButtonGroupButton-isDisabled.euiButtonGroupButton--ghost:focus-within, +.euiButtonGroup--small .euiButtonGroupButton.euiButtonGroupButton-isDisabled.euiButtonGroupButton--ghost, +.euiButtonGroup--small .euiButtonGroupButton.euiButtonGroupButton-isDisabled.euiButtonGroupButton--ghost:hover, +.euiButtonGroup--small .euiButtonGroupButton.euiButtonGroupButton-isDisabled.euiButtonGroupButton--ghost:focus, +.euiButtonGroup--small .euiButtonGroupButton.euiButtonGroupButton-isDisabled.euiButtonGroupButton--ghost:focus-within { + color: #343741; } + +.euiButtonGroup--isDisabled .euiButtonGroup--medium .euiButtonGroupButton.euiButtonGroupButton-isDisabled.euiButtonGroupButton--ghost, .euiButtonGroup--isDisabled +.euiButtonGroup--small .euiButtonGroupButton.euiButtonGroupButton-isDisabled.euiButtonGroupButton--ghost { + border-color: #343741; } + +.euiButtonGroup--medium .euiButtonGroupButton.euiButtonGroupButton-isDisabled.euiButtonGroupButton--ghost.euiButtonGroupButton-isSelected, +.euiButtonGroup--small .euiButtonGroupButton.euiButtonGroupButton-isDisabled.euiButtonGroupButton--ghost.euiButtonGroupButton-isSelected { + background-color: #343741; + color: #62656d; } + +.euiButtonGroup--medium .euiButtonGroupButton-isSelected, +.euiButtonGroup--small .euiButtonGroupButton-isSelected { + z-index: 0; } + +.euiButtonGroup--medium .euiButtonGroupButton-isSelected + .euiButtonGroupButton-isSelected, +.euiButtonGroup--small .euiButtonGroupButton-isSelected + .euiButtonGroupButton-isSelected { + box-shadow: -1px 0 0 rgba(29, 30, 36, 0.1); } + +/** + * Compressed (form style) + */ +.euiButtonGroup--compressed .euiButtonGroupButton { + height: 30px; + line-height: 30px; + font-size: 14px; + border-radius: 6px; + padding: 2px; + background-clip: content-box; } + .euiButtonGroup--compressed .euiButtonGroupButton .euiButton__content { + padding-left: 8px; + padding-right: 8px; } + .euiButtonGroup--compressed .euiButtonGroupButton.euiButtonGroupButton-isSelected { + font-weight: 600; } + .euiButtonGroup--compressed .euiButtonGroupButton:not([class*='isDisabled']):focus, .euiButtonGroup--compressed .euiButtonGroupButton:not([class*='isDisabled']):focus-within { + outline: 2px solid #36A2EF; } + +/** + * 1. Add vertical space between breadcrumbs, + * but make sure the whole breadcrumb set doesn't add space below itself + */ +.euiBreadcrumbs { + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + margin-bottom: -4px; + /* 1 */ + display: -webkit-flex; + display: flex; + -webkit-align-items: center; + align-items: center; + -webkit-flex-wrap: wrap; + flex-wrap: wrap; + min-width: 0; } + +.euiBreadcrumb { + display: inline-block; + margin-bottom: 4px; + /* 1 */ } + .euiBreadcrumb:not(.euiBreadcrumb--last) { + margin-right: 8px; + color: #7a7f89; } + +.euiBreadcrumb--last { + font-weight: 500; } + +.euiBreadcrumb--collapsed { + -webkit-flex-shrink: 0; + flex-shrink: 0; } + +.euiBreadcrumbSeparator { + -webkit-flex-shrink: 0; + flex-shrink: 0; + display: inline-block; + margin-right: 8px; + width: 1px; + height: 16px; + -webkit-transform: translateY(-1px) rotate(15deg); + transform: translateY(-1px) rotate(15deg); + background: #343741; } + +.euiBreadcrumbs__inPopover .euiBreadcrumb--last { + font-weight: 400; + color: #98A2B3 !important; } + +.euiBreadcrumbs--truncate { + white-space: nowrap; + -webkit-flex-wrap: nowrap; + flex-wrap: nowrap; } + .euiBreadcrumbs--truncate .euiBreadcrumb:not(.euiBreadcrumb--collapsed) { + max-width: 160px; + overflow: hidden; + text-overflow: ellipsis; } + .euiBreadcrumbs--truncate .euiBreadcrumb:not(.euiBreadcrumb--collapsed).euiBreadcrumb--last { + max-width: none; } + +.euiBreadcrumb--truncate { + max-width: 100%; + overflow: hidden !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; + word-wrap: normal !important; + max-width: 160px; + text-align: center; + vertical-align: top; } + +.euiCallOut { + padding: 16px; + border-left: 2px solid transparent; } + .euiCallOut.euiCallOut--small { + padding: 8px; } + .euiCallOut .euiCallOutHeader__icon { + -webkit-flex: 0 0 auto; + flex: 0 0 auto; + -webkit-transform: translateY(2px); + transform: translateY(2px); } + .euiCallOut .euiCallOutHeader__title { + color: #DFE5EF; + font-size: 16px; + font-size: 1.14286rem; + line-height: 1.71429rem; + font-weight: 700; + font-weight: 400; + margin-bottom: 0; } + +.euiCallOut--small .euiCallOutHeader__title { + color: #DFE5EF; + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + font-weight: 700; + font-weight: 400; } + +.euiCallOut--primary { + border-color: #36A2EF; + background-color: #103148; } + .euiCallOut--primary .euiCallOutHeader__icon { + fill: #5eb5f2; } + .euiCallOut--primary .euiCallOutHeader__title { + color: #5eb5f2; } + +.euiCallOut--success { + border-color: #7DDED8; + background-color: #264341; } + .euiCallOut--success .euiCallOutHeader__icon { + fill: #97e5e0; } + .euiCallOut--success .euiCallOutHeader__title { + color: #97e5e0; } + +.euiCallOut--warning { + border-color: #F3D371; + background-color: #493f22; } + .euiCallOut--warning .euiCallOutHeader__icon { + fill: #f5dc8d; } + .euiCallOut--warning .euiCallOutHeader__title { + color: #f5dc8d; } + +.euiCallOut--danger { + border-color: #F86B63; + background-color: #4a201e; } + .euiCallOut--danger .euiCallOutHeader__icon { + fill: #f98982; } + .euiCallOut--danger .euiCallOutHeader__title { + color: #f98982; } + +/** + * 1. Align icon with first line of title text if it wraps. + * 2. If content exists under the header, space it appropriately. + * 3. Apply margin to all but last item in the flex. + */ +.euiCallOutHeader { + display: -webkit-flex; + display: flex; + -webkit-align-items: baseline; + align-items: baseline; + /* 1 */ } + .euiCallOutHeader + * { + margin-top: 8px; + /* 1 */ } + .euiCallOutHeader > * + * { + margin-left: 8px; + /* 3 */ } + +/** + * 1. Footer is always at the bottom. + * 2. Fix for IE where the image correctly resizes in width but doesn't collapse its height + (https://github.com/philipwalton/flexbugs/issues/75#issuecomment-134702421) + * 3. Horizontal layouts should always top left align no matter the textAlign prop + */ +.euiCard { + display: -webkit-flex; + display: flex; + -webkit-flex-direction: column; + flex-direction: column; + min-height: 1px; + /* 2 */ } + .euiCard.euiCard-isDisabled { + cursor: not-allowed !important; + -webkit-transform: none !important; + transform: none !important; + box-shadow: none !important; + text-decoration: none !important; + color: #515761; } + .euiCard.euiCard-isDisabled .euiCard__top { + -webkit-filter: grayscale(100%); + filter: grayscale(100%); } + .euiCard.euiCard-isDisabled .euiCard__titleAnchor, + .euiCard.euiCard-isDisabled .euiCard__titleButton { + color: #515761; + cursor: inherit; } + .euiCard.euiCard--isClickable { + display: -webkit-flex; + display: flex; + width: 100%; } + .euiCard.euiCard--isClickable:not(.euiCard-isDisabled):focus-within { + box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25), 0 3.6px 13px rgba(0, 0, 0, 0.175), 0 8.4px 23px rgba(0, 0, 0, 0.15), 0 23px 35px rgba(0, 0, 0, 0.125); + outline: 2px solid currentColor; } + .euiCard.euiCard--isClickable:not(.euiCard-isDisabled):focus-within:focus-visible { + outline-style: auto; } + .euiCard.euiCard--isClickable:not(.euiCard-isDisabled):focus-within:not(:focus-visible) { + outline: none; } + .euiCard.euiCard--isClickable:not(.euiCard-isDisabled):focus .euiCard__title, + .euiCard.euiCard--isClickable:not(.euiCard-isDisabled):focus .euiCard__titleAnchor, + .euiCard.euiCard--isClickable:not(.euiCard-isDisabled):focus .euiCard__titleButton, .euiCard.euiCard--isClickable:not(.euiCard-isDisabled):hover .euiCard__title, + .euiCard.euiCard--isClickable:not(.euiCard-isDisabled):hover .euiCard__titleAnchor, + .euiCard.euiCard--isClickable:not(.euiCard-isDisabled):hover .euiCard__titleButton { + text-decoration: underline; } + .euiCard .euiCard__top, + .euiCard .euiCard__content, + .euiCard .euiCard__footer { + width: 100%; } + .euiCard.euiCard--leftAligned { + text-align: left; + -webkit-align-items: flex-start; + align-items: flex-start; } + .euiCard.euiCard--leftAligned .euiCard__titleButton { + text-align: left; } + .euiCard.euiCard--centerAligned { + text-align: center; + -webkit-align-items: center; + align-items: center; } + .euiCard.euiCard--rightAligned { + text-align: right; + -webkit-align-items: flex-end; + align-items: flex-end; } + .euiCard.euiCard--rightAligned .euiCard__titleButton { + text-align: right; } + .euiCard.euiCard-isSelected { + transition: all 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); } + +.euiCard--hasBetaBadge { + position: relative; + overflow: visible; } + .euiCard--hasBetaBadge .euiCard__betaBadgeWrapper { + position: absolute; + top: -12px; + left: 50%; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); + z-index: 3; + min-width: 30%; + max-width: calc(100% - 32px); } + .euiCard--hasBetaBadge .euiCard__betaBadgeWrapper .euiToolTipAnchor, + .euiCard--hasBetaBadge .euiCard__betaBadgeWrapper .euiCard__betaBadge { + width: 100%; } + .euiCard--hasBetaBadge .euiCard__betaBadgeWrapper .euiCard__betaBadge { + overflow: hidden; + text-overflow: ellipsis; + background-color: #1D1E24; } + +.euiCard--isSelectable { + position: relative; } + +.euiCard[class*='paddingSmall'] { + padding: 8px; } + .euiCard[class*='paddingSmall'].euiCard--isSelectable { + padding-bottom: 48px; } + .euiCard[class*='paddingSmall'] .euiCard__top .euiCard__image { + width: calc(100% + (8px * 2)); + left: -8px; + top: -8px; + margin-bottom: -8px; } + .euiCard[class*='paddingSmall'] .euiCard__top .euiCard__image + .euiCard__icon { + -webkit-transform: translate(-50%, -75%); + transform: translate(-50%, -75%); + -webkit-transform: translate(-50%, calc(-50% + -8px)); + transform: translate(-50%, calc(-50% + -8px)); } + +.euiCard[class*='paddingMedium'] { + padding: 16px; } + .euiCard[class*='paddingMedium'].euiCard--isSelectable { + padding-bottom: 56px; } + .euiCard[class*='paddingMedium'] .euiCard__top .euiCard__image { + width: calc(100% + (16px * 2)); + left: -16px; + top: -16px; + margin-bottom: -16px; } + .euiCard[class*='paddingMedium'] .euiCard__top .euiCard__image + .euiCard__icon { + -webkit-transform: translate(-50%, -75%); + transform: translate(-50%, -75%); + -webkit-transform: translate(-50%, calc(-50% + -16px)); + transform: translate(-50%, calc(-50% + -16px)); } + +.euiCard[class*='paddingLarge'] { + padding: 24px; } + .euiCard[class*='paddingLarge'].euiCard--isSelectable { + padding-bottom: 64px; } + .euiCard[class*='paddingLarge'] .euiCard__top .euiCard__image { + width: calc(100% + (24px * 2)); + left: -24px; + top: -24px; + margin-bottom: -24px; } + .euiCard[class*='paddingLarge'] .euiCard__top .euiCard__image + .euiCard__icon { + -webkit-transform: translate(-50%, -75%); + transform: translate(-50%, -75%); + -webkit-transform: translate(-50%, calc(-50% + -24px)); + transform: translate(-50%, calc(-50% + -24px)); } + +.euiCard__top { + -webkit-flex-grow: 0; + flex-grow: 0; + /* 1 */ + position: relative; + min-height: 1px; + /* 2 */ + font-size: 0; } + .euiCard__top .euiCard__image { + position: relative; + border-top-left-radius: 5px; + border-top-right-radius: 5px; + overflow: hidden; } + .euiCard__top .euiCard__image img { + width: 100%; } + .euiCard__top .euiCard__image + .euiCard__icon { + position: absolute; + top: 50%; + left: 50%; } + .euiCard__top .euiCard__icon { + margin-top: 8px; } + +.euiCard__footer:not(:empty) { + -webkit-flex-grow: 0; + flex-grow: 0; + /* 1 */ + margin-top: 16px; } + +.euiCard[class*='transparent'] .euiCard__image { + border-radius: 6px; } + +.euiCard--isSelectable--text.euiCard-isSelected:not(.euiCard-isDisabled) { + border-color: #7DDED8 !important; } + +.euiCard--isSelectable--primary.euiCard-isSelected:not(.euiCard-isDisabled) { + border-color: #36A2EF !important; } + +.euiCard--isSelectable--success.euiCard-isSelected:not(.euiCard-isDisabled) { + border-color: #7DDED8 !important; } + +.euiCard--isSelectable--danger.euiCard-isSelected:not(.euiCard-isDisabled) { + border-color: #F86B63 !important; } + +.euiCard--isSelectable--ghost.euiCard-isSelected:not(.euiCard-isDisabled) { + border-color: #98A2B3 !important; } + +.euiCard__top + .euiCard__content { + margin-top: 16px; } + +.euiCard__content { + -webkit-flex-grow: 1; + flex-grow: 1; + /* 1 */ } + .euiCard__content .euiCard__description, + .euiCard__content .euiCard__children { + margin-top: 8px; } + .euiCard__content .euiCard__titleAnchor, + .euiCard__content .euiCard__titleButton { + font: inherit; + color: inherit; + letter-spacing: inherit; } + .euiCard__content .euiCard__titleAnchor:focus, + .euiCard__content .euiCard__titleButton:focus { + text-decoration: underline; } + +.euiCard.euiCard--horizontal .euiCard__content, +.euiCard.euiCard--horizontal .euiCard__titleButton { + text-align: left; + /* 3 */ } + +.euiCard.euiCard--horizontal.euiCard--hasIcon { + -webkit-flex-direction: row; + flex-direction: row; + -webkit-align-items: flex-start !important; + align-items: flex-start !important; + /* 3 */ } + .euiCard.euiCard--horizontal.euiCard--hasIcon .euiCard__top, + .euiCard.euiCard--horizontal.euiCard--hasIcon .euiCard__content { + width: auto; + margin-top: 0; } + .euiCard.euiCard--horizontal.euiCard--hasIcon .euiCard__top .euiCard__icon { + margin-top: 0; + margin-right: 16px; } + +.euiCardSelect { + position: absolute; + bottom: 0; + left: 0; + height: 40px !important; + width: 100%; + overflow: hidden; + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; + font-weight: 700; } + .euiCardSelect--text:enabled { + background-color: #25262E; } + .euiCardSelect--primary:enabled { + background-color: #103148; } + .euiCardSelect--success:enabled { + background-color: #264341; + color: #7DDED8; } + .euiCardSelect--danger:enabled { + background-color: #4a201e; } + .euiCardSelect--ghost:enabled { + background-color: #98A2B3; } + .euiCardSelect:disabled { + background-color: #141519; } + +.euiCheckableCard { + transition: border-color 250ms ease-in; } + .euiCheckableCard:not(.euiCheckableCard-isDisabled).euiCheckableCard-isChecked { + border-color: #36A2EF; } + +.euiCheckableCard__label { + cursor: pointer; + display: block; + width: calc(100% + 32px); + padding: 16px; + margin: -16px; } + +.euiCheckableCard__label-isDisabled { + color: #535966; + cursor: not-allowed; } + +.euiCheckableCard__children { + margin-top: 16px; } + +.euiCodeBlock { + max-width: 100%; + display: block; + position: relative; + background: #25262E; + color: #DFE5EF; + /* + * 1. Size the code against the text its embedded within. + */ } + .euiCodeBlock .euiCodeBlock__pre { + scrollbar-width: thin; + height: 100%; + overflow: auto; + display: block; } + .euiCodeBlock .euiCodeBlock__pre::-webkit-scrollbar { + width: 16px; + height: 16px; } + .euiCodeBlock .euiCodeBlock__pre::-webkit-scrollbar-thumb { + background-color: rgba(152, 162, 179, 0.5); + border: 6px solid transparent; + background-clip: content-box; } + .euiCodeBlock .euiCodeBlock__pre::-webkit-scrollbar-corner, .euiCodeBlock .euiCodeBlock__pre::-webkit-scrollbar-track { + background-color: transparent; } + .euiCodeBlock .euiCodeBlock__pre--whiteSpacePre { + white-space: pre; } + .euiCodeBlock .euiCodeBlock__pre--whiteSpacePreWrap { + white-space: pre-wrap; } + .euiCodeBlock .euiCodeBlock__code { + font-family: "Roboto Mono", Consolas, Menlo, Courier, monospace; + letter-spacing: normal; + display: block; + line-height: 1.5; + font-weight: 400; + font-size: inherit; } + .euiCodeBlock .euiCodeBlock__controls { + position: absolute; + top: 0; + right: 0; } + .euiCodeBlock .euiCodeBlock__fullScreenButton + .euiCodeBlock__copyButton { + margin-top: 4px; } + .euiCodeBlock .euiCodeBlock__line { + display: block; } + .euiCodeBlock.euiCodeBlock-isFullScreen { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; } + .euiCodeBlock.euiCodeBlock-isFullScreen .euiCodeBlock__pre { + padding: 32px !important; } + .euiCodeBlock.euiCodeBlock-isFullScreen .euiCodeBlock__controls { + top: 4px; + right: 4px; } + .euiCodeBlock.euiCodeBlock--fontSmall { + font-size: 12px; } + .euiCodeBlock.euiCodeBlock--fontMedium { + font-size: 14px; } + .euiCodeBlock.euiCodeBlock--fontLarge { + font-size: 14px; } + .euiCodeBlock.euiCodeBlock--hasControls .euiCodeBlock__pre--whiteSpacePreWrap { + padding-right: 28px; } + .euiCodeBlock.euiCodeBlock--hasControls .euiCodeBlock__pre--whiteSpacePre { + margin-right: 28px; } + .euiCodeBlock.euiCodeBlock--paddingSmall .euiCodeBlock__pre { + padding: 8px; } + .euiCodeBlock.euiCodeBlock--paddingSmall .euiCodeBlock__controls { + top: 8px; + right: 8px; } + .euiCodeBlock.euiCodeBlock--paddingSmall.euiCodeBlock--hasControls .euiCodeBlock__pre--whiteSpacePreWrap { + padding-right: 36px; } + .euiCodeBlock.euiCodeBlock--paddingSmall.euiCodeBlock--hasControls .euiCodeBlock__pre--whiteSpacePre { + margin-right: 36px; } + .euiCodeBlock.euiCodeBlock--paddingMedium .euiCodeBlock__pre { + padding: 16px; } + .euiCodeBlock.euiCodeBlock--paddingMedium .euiCodeBlock__controls { + top: 16px; + right: 16px; } + .euiCodeBlock.euiCodeBlock--paddingMedium.euiCodeBlock--hasControls .euiCodeBlock__pre--whiteSpacePreWrap { + padding-right: 44px; } + .euiCodeBlock.euiCodeBlock--paddingMedium.euiCodeBlock--hasControls .euiCodeBlock__pre--whiteSpacePre { + margin-right: 44px; } + .euiCodeBlock.euiCodeBlock--paddingLarge .euiCodeBlock__pre { + padding: 24px; } + .euiCodeBlock.euiCodeBlock--paddingLarge .euiCodeBlock__controls { + top: 24px; + right: 24px; } + .euiCodeBlock.euiCodeBlock--paddingLarge.euiCodeBlock--hasControls .euiCodeBlock__pre--whiteSpacePreWrap { + padding-right: 52px; } + .euiCodeBlock.euiCodeBlock--paddingLarge.euiCodeBlock--hasControls .euiCodeBlock__pre--whiteSpacePre { + margin-right: 52px; } + .euiCodeBlock.euiCodeBlock--inline { + display: inline-block; + white-space: pre; + color: #DFE5EF; + font-size: 90%; + /* 1 */ + padding: 0 8px; + background: #25262E; } + .euiCodeBlock.euiCodeBlock--inline .euiCodeBlock__pre { + padding: 0 4px; } + .euiCodeBlock.euiCodeBlock--inline .euiCodeBlock__code { + display: inline; + white-space: normal; } + .euiCodeBlock.euiCodeBlock--transparentBackground { + background: transparent; } + .euiCodeBlock .token.punctuation:not(.interpolation-punctuation):not([class*='attr-']) { + opacity: .7; } + .euiCodeBlock .token.comment, + .euiCodeBlock .token.prolog, + .euiCodeBlock .token.doctype, + .euiCodeBlock .token.cdata, + .euiCodeBlock .token.coord, + .euiCodeBlock .token.blockquote { + color: #8d919a; + font-style: italic; } + .euiCodeBlock .token.selector { + color: inherit; } + .euiCodeBlock .token.string, + .euiCodeBlock .token.interpolation, + .euiCodeBlock .token.interpolation-punctuation, + .euiCodeBlock .token.doc-comment .token.keyword, + .euiCodeBlock .token.attr-value, + .euiCodeBlock .token.url .token.content { + color: #d77092; } + .euiCodeBlock .token.number, + .euiCodeBlock .token.boolean, + .euiCodeBlock .token.keyword.nil, + .euiCodeBlock .token.regex, + .euiCodeBlock .token.variable, + .euiCodeBlock .token.unit, + .euiCodeBlock .token.hexcode, + .euiCodeBlock .token.attr-name, + .euiCodeBlock .token.attr-equals { + color: #54B399; } + .euiCodeBlock .token.atrule .token.rule, + .euiCodeBlock .token.keyword { + color: #a184c2; } + .euiCodeBlock .token.function { + color: inherit; } + .euiCodeBlock .token.tag { + color: #6092C0; } + .euiCodeBlock .token.class-name { + color: #6092C0; } + .euiCodeBlock .token.property { + color: inherit; } + .euiCodeBlock .token.console, + .euiCodeBlock .token.list-punctuation, + .euiCodeBlock .token.url-reference, + .euiCodeBlock .token.url .token.url { + color: #E7664C; } + .euiCodeBlock .token.paramater { + color: inherit; } + .euiCodeBlock .token.meta, + .euiCodeBlock .token.important { + color: #8d919a; } + .euiCodeBlock .token.title { + color: #DA8B45; } + .euiCodeBlock .token.section { + color: #E7664C; } + .euiCodeBlock .token.prefix.inserted, + .euiCodeBlock .token.prefix.deleted { + padding-left: 4px; + margin-left: -4px; } + .euiCodeBlock .token.prefix.inserted { + box-shadow: -4px 0 #54B399; + color: #54B399; } + .euiCodeBlock .token.prefix.deleted { + box-shadow: -4px 0 #F86B63; + color: #F86B63; } + .euiCodeBlock .token.selector .token.class { + color: inherit; } + .euiCodeBlock .token.selector .token.id { + color: inherit; } + .euiCodeBlock .token.italic { + font-style: italic; } + .euiCodeBlock .token.important, + .euiCodeBlock .token.bold { + font-weight: 700; } + .euiCodeBlock .token.url-reference, + .euiCodeBlock .token.url .token.url { + text-decoration: underline; } + .euiCodeBlock .token.entity { + cursor: help; } + +.euiCodeEditorWrapper { + position: relative; } + .euiCodeEditorWrapper .ace_hidden-cursors { + opacity: 0; } + .euiCodeEditorWrapper.euiCodeEditorWrapper-isEditing .ace_hidden-cursors { + opacity: 1; } + +.euiCodeEditorKeyboardHint { + position: absolute; + top: 0; + left: 0; + background: rgba(255, 255, 255, 0.7); + 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; + opacity: 0; + cursor: pointer; + height: 100%; + width: 100%; } + .euiCodeEditorKeyboardHint:focus { + opacity: 1; + border: 2px solid #36A2EF; + z-index: 1000; } + .euiCodeEditorKeyboardHint.euiCodeEditorKeyboardHint-isInactive { + display: none; } + +.euiCollapsibleNav:not([class*='push']) { + z-index: 6000 !important; } + +.euiCollapsibleNavGroup:not(:first-child) { + border-top: 1px solid #343741; } + +.euiCollapsibleNavGroup .euiAccordion__triggerWrapper { + padding: 16px; } + +.euiCollapsibleNavGroup--light { + background-color: #141519; } + +.euiCollapsibleNavGroup--dark { + background-color: #131317; + color: #FFF; } + .euiCollapsibleNavGroup--dark .euiCollapsibleNavGroup__heading:focus .euiAccordion__iconWrapper { + color: #36A2EF; + -webkit-animation-name: euiCollapsibleNavGroupDarkFocusRingAnimate !important; + animation-name: euiCollapsibleNavGroupDarkFocusRingAnimate !important; } + .euiCollapsibleNavGroup--dark .euiCollapsibleNavGroup__title { + color: inherit; + line-height: inherit; } + +.euiCollapsibleNavGroup__heading { + font-weight: 600; } + .euiCollapsibleNavGroup__heading:not(.euiAccordion__button) { + padding: 16px; } + +.euiCollapsibleNavGroup__children { + padding: 8px; } + +.euiCollapsibleNavGroup--withHeading .euiCollapsibleNavGroup__children { + padding-top: 0; } + +@-webkit-keyframes euiCollapsibleNavGroupDarkFocusRingAnimate { + 0% { + box-shadow: 0 0 0 2px rgba(54, 162, 239, 0); } + 100% { + box-shadow: 0 0 0 2px #36A2EF; } } + +@keyframes euiCollapsibleNavGroupDarkFocusRingAnimate { + 0% { + box-shadow: 0 0 0 2px rgba(54, 162, 239, 0); } + 100% { + box-shadow: 0 0 0 2px #36A2EF; } } + +.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; } + +.euiSwatchInput__stroke { + fill: none; + stroke: rgba(255, 255, 255, 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(255, 255, 255, 0.1); + box-shadow: inset 0 0 0 1px rgba(29, 30, 36, 0.05); } + .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: #1D1E24; + 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 #66676d; + background: #1D1E24 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; + cursor: pointer; + border-color: #98A2B3; + padding: 0; + height: 16px; + width: 16px; } + .euiHue__range::-moz-range-thumb { + padding: 7px; + border: 1px solid #66676d; + background: #1D1E24 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; + cursor: pointer; + border-color: #98A2B3; + padding: 0; + height: 16px; + width: 16px; } + .euiHue__range::-ms-thumb { + padding: 7px; + border: 1px solid #66676d; + background: #1D1E24 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; + cursor: pointer; + border-color: #98A2B3; + padding: 0; + height: 16px; + width: 16px; } + .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::-webkit-slider-thumb { + box-shadow: 0 0 0 2px #36A2EF; + border-color: #36A2EF; } + .euiHue__range:focus::-moz-range-thumb { + box-shadow: 0 0 0 2px #36A2EF; + border-color: #36A2EF; } + .euiHue__range:focus::-ms-thumb { + box-shadow: 0 0 0 2px #36A2EF; + border-color: #36A2EF; } + +.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, white, rgba(255, 255, 255, 0)); } + .euiSaturation .euiSaturation__saturation { + background: linear-gradient(to top, black, 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 #D4DAE5; } + .euiSaturation .euiSaturation__indicator:before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + border-radius: 100%; + border: 1px solid #25262E; } + .euiSaturation:focus .euiSaturation__indicator { + outline: 2px solid currentColor; } + .euiSaturation:focus .euiSaturation__indicator:focus-visible { + outline-style: auto; } + .euiSaturation:focus .euiSaturation__indicator:not(:focus-visible) { + outline: none; } + +.euiColorStops:not(.euiColorStops-isDisabled):focus { + outline: 2px solid #36A2EF; } + +.euiColorStops__addContainer { + display: block; + position: absolute; + left: 0; + right: 0; + top: 50%; + height: 16px; + margin-top: -8px; } + .euiColorStops__addContainer:hover:not(.euiColorStops__addContainer-isDisabled) { + cursor: pointer; } + .euiColorStops__addContainer:hover:not(.euiColorStops__addContainer-isDisabled) .euiColorStops__addTarget { + opacity: .7; } + +.euiColorStops__addTarget { + padding: 7px; + border: 1px solid #66676d; + background: #1D1E24 no-repeat center; + border-radius: 14px; + transition: background-color 150ms ease-in, border-color 150ms ease-in; + cursor: pointer; + border-color: #98A2B3; + padding: 0; + height: 16px; + width: 16px; + position: absolute; + top: 0; + height: 16px; + width: 16px; + background-color: #25262E; + pointer-events: none; + opacity: 0; + transition: opacity 150ms; } + +.euiColorStop { + width: 152px; } + +.euiColorStopPopover.euiPopover { + position: absolute; + top: 50%; + width: 16px; + height: 16px; + margin-top: -8px; } + +.euiColorStopPopover-hasFocus { + z-index: 1; } + +.euiColorStopPopover__anchor { + position: absolute; + width: 100%; + height: 100%; } + .euiColorStopPopover__anchor:before { + content: ''; + display: block; + position: absolute; + left: 0; + top: 0; + height: 16px; + width: 16px; + border-radius: 16px; + background: #1D1E24; } + +.euiColorStopThumb.euiRangeThumb:not(:disabled) { + top: 0; + margin-top: 0; + pointer-events: auto; + cursor: -webkit-grab; + cursor: grab; + border: solid 3px #1D1E24; + box-shadow: 0 0 0 1px #535966, 0 2px 2px -1px rgba(0, 0, 0, 0.2), 0 1px 5px -2px rgba(0, 0, 0, 0.2); } + .euiColorStopThumb.euiRangeThumb:not(:disabled):active { + cursor: -webkit-grabbing; + cursor: grabbing; } + +.euiColorStopPopover-isLoadingPanel { + visibility: hidden !important; } + +.euiColorStops.euiColorStops-isDragging:not(.euiColorStops-isDisabled):not(.euiColorStops-isReadOnly) { + cursor: -webkit-grabbing; + cursor: grabbing; } + +.euiColorStops__highlight { + color: #98A2B3; } + +.euiColorPalettePicker__itemTitle { + font-size: 12px; + font-size: 0.85714rem; + line-height: 1.14286rem; } + +.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(212, 218, 229, 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(212, 218, 229, 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(212, 218, 229, 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. + */ + /** + * 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, + .euiComboBox .euiFormControlLayout { + height: auto; } + .euiComboBox .euiComboBox__inputWrap { + max-width: 400px; + width: 100%; + height: 40px; + background-color: #16171c; + background-repeat: no-repeat; + background-size: 0% 100%; + box-shadow: 0 0 transparent, inset 0 0 0 1px rgba(255, 255, 255, 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", -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: #DFE5EF; + border: none; + border-radius: 6px; + padding: 12px; + max-width: 400px; + width: 100%; + height: auto; + padding: 4px 8px; + display: -webkit-flex; + display: flex; + /* 1 */ + outline: none; + padding-right: 40px; + /* 2 */ } + .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; } } + @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { + .euiComboBox .euiComboBox__inputWrap { + line-height: 1em; } } + .euiComboBox .euiComboBox__inputWrap::-webkit-input-placeholder { + color: #81858f; + opacity: 1; } + .euiComboBox .euiComboBox__inputWrap::-moz-placeholder { + color: #81858f; + opacity: 1; } + .euiComboBox .euiComboBox__inputWrap::placeholder { + color: #81858f; + opacity: 1; } + .euiComboBox .euiComboBox__inputWrap--compressed { + background-color: #16171c; + background-repeat: no-repeat; + background-size: 0% 100%; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 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--withIcon { + padding-left: 40px; } + .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__inputWrap.euiComboBox__inputWrap-isClearable { + padding-right: 62px; + /* 2 */ } + .euiComboBox .euiComboBox__inputWrap.euiComboBox__inputWrap-isLoading { + padding-right: 62px; + /* 2 */ } + .euiComboBox .euiComboBox__inputWrap.euiComboBox__inputWrap-isLoading .euiComboBoxPlaceholder { + padding-right: 62px; + /* 2 */ } + .euiComboBox .euiComboBox__inputWrap.euiComboBox__inputWrap-isLoading.euiComboBox__inputWrap-isClearable { + padding-right: 84px; + /* 2 */ } + .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", -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: #DFE5EF; + margin: 4px; + line-height: 1.5; + /* 4 */ } + .euiComboBox.euiComboBox-isOpen .euiComboBox__inputWrap { + background-color: #111216; + background-image: linear-gradient(to top, #36A2EF, #36A2EF 2px, transparent 2px, transparent 100%); + background-size: 100% 100%; + outline: none; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } + .euiComboBox.euiComboBox-isOpen .euiComboBox__inputWrap--compressed { + background-color: #111216; + background-image: linear-gradient(to top, #36A2EF, #36A2EF 2px, transparent 2px, transparent 100%); + background-size: 100% 100%; + outline: none; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } + .euiComboBox.euiComboBox-isInvalid .euiComboBox__inputWrap { + background-image: linear-gradient(to top, #F86B63, #F86B63 2px, transparent 2px, transparent 100%); + background-size: 100%; } + .euiComboBox.euiComboBox-isDisabled .euiComboBox__inputWrap { + cursor: not-allowed; + color: #535966; + -webkit-text-fill-color: #535966; + background: #202128; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } + .euiComboBox.euiComboBox-isDisabled .euiComboBox__inputWrap::-webkit-input-placeholder { + color: #535966; + opacity: 1; } + .euiComboBox.euiComboBox-isDisabled .euiComboBox__inputWrap::-moz-placeholder { + color: #535966; + opacity: 1; } + .euiComboBox.euiComboBox-isDisabled .euiComboBox__inputWrap::placeholder { + color: #535966; + opacity: 1; } + .euiComboBox.euiComboBox--compressed .euiComboBox__inputWrap { + line-height: 32px; + /* 2 */ + padding-top: 0; + padding-bottom: 0; + padding-right: 32px; + /* 2 */ } + .euiComboBox.euiComboBox--compressed .euiComboBox__inputWrap.euiComboBox__inputWrap-isClearable { + padding-right: 54px; + /* 2 */ } + .euiComboBox.euiComboBox--compressed .euiComboBox__inputWrap.euiComboBox__inputWrap-isLoading { + padding-right: 54px; + /* 2 */ } + .euiComboBox.euiComboBox--compressed .euiComboBox__inputWrap.euiComboBox__inputWrap-isLoading .euiComboBoxPlaceholder { + padding-right: 54px; + /* 2 */ } + .euiComboBox.euiComboBox--compressed .euiComboBox__inputWrap.euiComboBox__inputWrap-isLoading.euiComboBox__inputWrap-isClearable { + padding-right: 76px; + /* 2 */ } + .euiComboBox .euiFormControlLayout__prepend, + .euiComboBox .euiFormControlLayout__append { + height: auto !important; } + +.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: 22px; + vertical-align: baseline; } + .euiComboBoxPill, + .euiComboBoxPill + .euiComboBoxPill { + margin: 4px; } + .euiComboBox--compressed .euiComboBoxPill, + .euiComboBox--compressed .euiComboBoxPill + .euiComboBoxPill { + margin: 5px 4px 0 0; } + .euiComboBoxPill--plainText { + font-family: "Inter", -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; + word-wrap: normal !important; + line-height: 24px; + font-size: 14px; + padding: 0; + color: #DFE5EF; + vertical-align: middle; + display: inline-block; } + +.euiComboBoxPlaceholder { + max-width: 100%; + overflow: hidden !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; + word-wrap: normal !important; + padding-right: 40px; + position: absolute; + pointer-events: none; + padding-left: 4px; + line-height: 32px; + color: #81858f; + 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.euiPopover__panel-isAttached.euiComboBoxOptionsList--top { + /* 1 */ + box-shadow: 0 0 0.8px rgba(0, 0, 0, 0.15), 0 0 2px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 0 17px rgba(0, 0, 0, 0.075); } + +.euiComboBoxOptionsList__empty { + overflow-wrap: break-word !important; + word-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-width: thin; } + .euiComboBoxOptionsList__rowWrap > div::-webkit-scrollbar { + width: 16px; + height: 16px; } + .euiComboBoxOptionsList__rowWrap > div::-webkit-scrollbar-thumb { + background-color: rgba(152, 162, 179, 0.5); + border: 6px solid transparent; + background-clip: content-box; } + .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 #343741; + border-color: transparent; + display: -webkit-flex; + display: flex; + -webkit-align-items: center; + align-items: center; } + .euiComboBoxOption:hover { + text-decoration: underline; } + .euiComboBoxOption.euiComboBoxOption-isFocused { + cursor: pointer; + color: #36A2EF; + background-color: rgba(54, 162, 239, 0.3); } + .euiComboBoxOption.euiComboBoxOption-isDisabled { + color: #535966; + cursor: not-allowed; } + .euiComboBoxOption.euiComboBoxOption-isDisabled:hover { + text-decoration: none; } + +.euiComboBoxOption__contentWrapper { + display: -webkit-flex; + display: flex; } + .euiComboBoxOption__contentWrapper .euiComboBoxOption__emptyStateText { + -webkit-flex: 1; + flex: 1; + text-align: left; + margin-bottom: 0; } + .euiComboBoxOption__contentWrapper .euiComboBoxOption__enterBadge { + -webkit-align-self: flex-start; + align-self: flex-start; + margin-left: 4px; } + +.euiComboBoxOption__content { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + -webkit-flex: 1; + flex: 1; + text-align: left; } + +/** + * 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: #FFF; } + +.euiComment { + font-size: 14px; + display: -webkit-flex; + display: flex; + padding-bottom: 16px; + min-height: 56px; } + .euiComment .euiCommentEvent { + -webkit-flex-grow: 1; + flex-grow: 1; } + .euiComment .euiCommentTimeline { + position: relative; + -webkit-flex-grow: 0; + flex-grow: 0; + margin-right: 16px; } + .euiComment .euiCommentTimeline::before { + content: ''; + position: absolute; + left: 20px; + top: 24px; + width: 2px; + background-color: #343741; + height: calc(100% + 24px); } + +.euiComment:last-of-type .euiCommentTimeline::before { + display: none; } + +.euiComment--update:not(.euiComment--hasBody) { + -webkit-align-items: center; + align-items: center; } + +.euiCommentEvent--regular { + -webkit-flex-grow: 1; + flex-grow: 1; } + .euiCommentEvent--regular.euiCommentEvent--regular--flexGrowZero { + -webkit-flex-grow: 0; + flex-grow: 0; } + .euiCommentEvent--regular.euiCommentEvent--regular--hasShadow { + box-shadow: 0 0.9px 4px -1px rgba(0, 0, 0, 0.2), 0 2.6px 8px -1px rgba(0, 0, 0, 0.15), 0 5.7px 12px -1px rgba(0, 0, 0, 0.125), 0 15px 15px -1px rgba(0, 0, 0, 0.1); } + .euiCommentEvent--regular.euiCommentEvent--regular--hasBorder { + border: 1px solid #343741; + box-shadow: none; } + .euiCommentEvent--regular.euiCommentEvent--regular--isClickable { + transition: all 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); } + .euiCommentEvent--regular.euiCommentEvent--regular--isClickable:enabled { + display: block; + width: 100%; + text-align: left; } + .euiCommentEvent--regular.euiCommentEvent--regular--isClickable:hover, .euiCommentEvent--regular.euiCommentEvent--regular--isClickable:focus { + box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25), 0 3.6px 13px rgba(0, 0, 0, 0.175), 0 8.4px 23px rgba(0, 0, 0, 0.15), 0 23px 35px rgba(0, 0, 0, 0.125); + -webkit-transform: translateY(-2px); + transform: translateY(-2px); + cursor: pointer; } + .euiCommentEvent--regular.euiCommentEvent--regular--borderRadiusNone { + border-radius: 0; } + .euiCommentEvent--regular.euiCommentEvent--regular--borderRadiusMedium { + border-radius: 4px; } + .euiCommentEvent--regular.euiCommentEvent--regular--transparent { + background-color: transparent; } + .euiCommentEvent--regular.euiCommentEvent--regular--plain { + background-color: #1D1E24; } + .euiCommentEvent--regular.euiCommentEvent--regular--subdued { + background-color: #141519; } + .euiCommentEvent--regular.euiCommentEvent--regular--accent { + background-color: #4a2b39; } + .euiCommentEvent--regular.euiCommentEvent--regular--primary { + background-color: #103148; } + .euiCommentEvent--regular.euiCommentEvent--regular--success { + background-color: #264341; } + .euiCommentEvent--regular.euiCommentEvent--regular--warning { + background-color: #493f22; } + .euiCommentEvent--regular.euiCommentEvent--regular--danger { + background-color: #4a201e; } + +.euiCommentEvent { + overflow: hidden; } + +.euiCommentEvent__header { + line-height: 1.5; + display: -webkit-flex; + display: flex; + -webkit-align-items: center; + align-items: center; } + +.euiCommentEvent__headerData { + -webkit-align-items: center; + align-items: center; + display: -webkit-flex; + display: flex; + -webkit-flex-wrap: wrap; + flex-wrap: wrap; } + .euiCommentEvent__headerData > div { + padding-right: 4px; } + +.euiCommentEvent__headerUsername { + font-weight: 600; } + +.euiCommentEvent--regular { + box-shadow: 0 0.8px 0.8px rgba(0, 0, 0, 0.1), 0 2.3px 2px rgba(0, 0, 0, 0.075); + border-radius: 6px; + border: 1px solid #343741; } + .euiCommentEvent--regular .euiCommentEvent__header { + min-height: 40px; + background-color: #25262E; + border-bottom: 1px solid #343741; + padding: 4px 8px; + /** + * Fix for IE when using align-items:center in an item that has min-height + (https://github.com/philipwalton/flexbugs/issues/231#issuecomment-362790042) + */ } + @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { + .euiCommentEvent--regular .euiCommentEvent__header::after { + content: ''; + min-height: 32px; + font-size: 0; + display: block; } } + .euiCommentEvent--regular .euiCommentEvent__headerData { + -webkit-flex-grow: 1; + flex-grow: 1; } + .euiCommentEvent--regular .euiCommentEvent__body { + padding: 8px; } + +.euiCommentEvent--update .euiCommentEvent__header { + -webkit-justify-content: flex-start; + justify-content: flex-start; + padding: 4px 0; } + +.euiCommentEvent--update .euiCommentEvent__headerData { + padding-right: 8px; } + +.euiCommentEvent--update .euiCommentEvent__body { + padding-top: 4px; } + +.euiCommentTimeline__content { + min-width: 40px; + display: -webkit-flex; + display: flex; + -webkit-justify-content: center; + justify-content: center; + -webkit-align-items: center; + align-items: center; + position: relative; } + +.euiCommentTimeline__icon--default { + -webkit-flex-shrink: 0; + flex-shrink: 0; + display: -webkit-flex; + display: flex; + -webkit-justify-content: center; + justify-content: center; + -webkit-align-items: center; + align-items: center; + overflow-x: hidden; + border-radius: 50%; + background-color: #25262E; } + .euiCommentTimeline__icon--default.euiCommentTimeline__icon--regular { + width: 40px; + height: 40px; } + .euiCommentTimeline__icon--default.euiCommentTimeline__icon--update { + width: 24px; + height: 24px; } + +.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.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 { + color: #DFE5EF; + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + font-weight: 700; + padding: 12px; + border-bottom: 1px solid #343741; + padding: 12px; + width: 100%; + text-align: left; + outline-offset: -2px; } + .euiContextMenuPanelTitle:enabled:hover, .euiContextMenuPanelTitle:enabled:focus { + text-decoration: underline; } + .euiContextMenuPanelTitle--small { + color: #DFE5EF; + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + font-weight: 700; + padding: 12px; + border-bottom: 1px solid #343741; + 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: #DFE5EF; + outline-offset: -2px; } + .euiContextMenuItem:hover, .euiContextMenuItem:focus { + text-decoration: underline; } + .euiContextMenuItem:focus { + background-color: rgba(54, 162, 239, 0.3); } + .euiContextMenuItem.euiContextMenuItem-isDisabled { + color: #515761; + 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.71429rem; } + +.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: #000; + color: #a9aaad; + display: -webkit-flex; + display: flex; + -webkit-flex-direction: column; + flex-direction: column; + box-shadow: inset 0 40px 0 #000, inset 0 600rem 0 #141519; + 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-width: thin; + overflow-y: auto; + width: 100%; + height: calc(100% - 40px); + background-color: #141519; + -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: #D4DAE5; } + .euiControlBar__content::-webkit-scrollbar { + width: 16px; + height: 16px; } + .euiControlBar__content::-webkit-scrollbar-thumb { + background-color: rgba(152, 162, 179, 0.5); + border: 6px solid transparent; + background-clip: content-box; } + .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(.euiBreadcrumb--last) { + color: #7a7f89; } + +.euiControlBar__breadcrumbs .euiBreadcrumbSeparator { + 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; + word-wrap: normal !important; + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + padding: 0 8px; + color: #a9aaad; } + .euiControlBar__text:last-child { + padding-right: 0; } + +.euiControlBar__tab { + max-width: 100%; + overflow: hidden !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; + word-wrap: normal !important; + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + color: #a9aaad; + 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: #141519; + box-shadow: inset 0 4px 0 #36A2EF; + color: #36A2EF; } + +.euiControlBar__controls .euiLink.euiLink--primary { + color: #36A2EF; } + .euiControlBar__controls .euiLink.euiLink--primary:hover { + color: #2671a7; } + +.euiControlBar__controls .euiLink.euiLink--text { + color: #FFF; } + +.euiControlBar__controls .euiControlBar__button.euiButton--primary:enabled { + box-shadow: none; } + +.euiControlBar__controls .euiControlBar__button.euiButton--primary:enabled:not(.euiButton--fill) { + color: #36A2EF; + border-color: #36A2EF; } + +.euiControlBar__controls .euiButtonIcon--primary { + color: #36A2EF; } + +.euiControlBar__controls .euiLink.euiLink--secondary { + color: #7DDED8; } + .euiControlBar__controls .euiLink.euiLink--secondary:hover { + color: #589b97; } + +.euiControlBar__controls .euiLink.euiLink--text { + color: #FFF; } + +.euiControlBar__controls .euiControlBar__button.euiButton--secondary:enabled { + box-shadow: none; } + +.euiControlBar__controls .euiControlBar__button.euiButton--secondary:enabled:not(.euiButton--fill) { + color: #7DDED8; + border-color: #7DDED8; } + +.euiControlBar__controls .euiButtonIcon--secondary { + color: #7DDED8; } + +.euiControlBar__controls .euiLink.euiLink--warning { + color: #F3D371; } + .euiControlBar__controls .euiLink.euiLink--warning:hover { + color: #aa944f; } + +.euiControlBar__controls .euiLink.euiLink--text { + color: #FFF; } + +.euiControlBar__controls .euiControlBar__button.euiButton--warning:enabled { + box-shadow: none; } + +.euiControlBar__controls .euiControlBar__button.euiButton--warning:enabled:not(.euiButton--fill) { + color: #F3D371; + border-color: #F3D371; } + +.euiControlBar__controls .euiButtonIcon--warning { + color: #F3D371; } + +.euiControlBar__controls .euiLink.euiLink--danger { + color: #F86B63; } + .euiControlBar__controls .euiLink.euiLink--danger:hover { + color: #ae4b45; } + +.euiControlBar__controls .euiLink.euiLink--text { + color: #FFF; } + +.euiControlBar__controls .euiControlBar__button.euiButton--danger:enabled { + box-shadow: none; } + +.euiControlBar__controls .euiControlBar__button.euiButton--danger:enabled:not(.euiButton--fill) { + color: #F86B63; + border-color: #F86B63; } + +.euiControlBar__controls .euiButtonIcon--danger { + color: #F86B63; } + +.euiControlBar__controls .euiLink.euiLink--ghost { + color: #FFF; } + .euiControlBar__controls .euiLink.euiLink--ghost:hover { + color: #b3b3b3; } + +.euiControlBar__controls .euiLink.euiLink--text { + color: #FFF; } + +.euiControlBar__controls .euiControlBar__button.euiButton--ghost:enabled { + box-shadow: none; } + +.euiControlBar__controls .euiControlBar__button.euiButton--ghost:enabled:not(.euiButton--fill) { + color: #FFF; + border-color: #FFF; } + +.euiControlBar__controls .euiButtonIcon--ghost { + color: #FFF; } + +.euiControlBar__controls .euiLink.euiLink--text { + color: #98A2B3; } + .euiControlBar__controls .euiLink.euiLink--text:hover { + color: #6a717d; } + +.euiControlBar__controls .euiLink.euiLink--text { + color: #FFF; } + +.euiControlBar__controls .euiControlBar__button.euiButton--text:enabled { + box-shadow: none; } + +.euiControlBar__controls .euiControlBar__button.euiButton--text:enabled:not(.euiButton--fill) { + color: #98A2B3; + border-color: #98A2B3; } + +.euiControlBar__controls .euiButtonIcon--text { + color: #98A2B3; } + +@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; } } + +/* This file is a heavy retheme of react-datepicker's Sass as of v1.4.0 +** https://github.com/Hacker0x01/react-datepicker +** +** In places where features were disabled, I've commented out the original Sass +** selectors rather than removing it so we can better understand what's changed. +** Commented out selectors that don't have properties indicate that we are not +** using those dom elements for styling of any kind. For example, react-datepicker +** has lots of pointer arrows attached to its popovers, but we choose not to render +** then in any way. +** +** Similarly, you will also find several times where we use display: none to +** completely remove extraneous UI (they had some overly obvious legends for example). +*/ +.euiDatePicker .euiFormControlLayout { + height: auto; } + +.euiDatePicker.euiDatePicker--shadow .react-datepicker-popper { + box-shadow: 0 0.9px 4px -1px rgba(0, 0, 0, 0.2), 0 2.6px 8px -1px rgba(0, 0, 0, 0.15), 0 5.7px 12px -1px rgba(0, 0, 0, 0.125), 0 15px 15px -1px rgba(0, 0, 0, 0.1); + border: 1px solid #343741; + background-color: #1D1E24; + border-radius: 0 0 6px 6px; } + +.euiDatePicker.euiDatePicker--shadow.euiDatePicker--inline .react-datepicker { + box-shadow: 0 0.9px 4px -1px rgba(0, 0, 0, 0.2), 0 2.6px 8px -1px rgba(0, 0, 0, 0.15), 0 5.7px 12px -1px rgba(0, 0, 0, 0.125), 0 15px 15px -1px rgba(0, 0, 0, 0.1); + border: 1px solid #343741; + background-color: #1D1E24; + border-radius: 6px; } + +.react-datepicker { + font-family: "Inter", -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: 12px; + color: #FFF; + display: -webkit-flex; + display: flex; + position: relative; + border-radius: 6px; } + +.react-datepicker--time-only .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box { + width: 100%; } + .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box .react-datepicker__time-list li.react-datepicker__time-list-item { + font-size: 14px; + text-align: left; + padding-left: 36px; + padding-right: 36px; + color: #DFE5EF; } + .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box .react-datepicker__time-list li.react-datepicker__time-list-item.react-datepicker__time-list-item--selected { + color: #FFF; } + .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box .react-datepicker__time-list li.react-datepicker__time-list-item.react-datepicker__time-list-item--disabled { + color: #515761; } + +.react-datepicker--time-only .react-datepicker__time-container { + border-left: 0; } + +.euiDatePicker.euiDatePicker--shadow .react-datepicker-popper { + z-index: 2000; + -webkit-animation: euiAnimFadeIn 150ms ease-in; + animation: euiAnimFadeIn 150ms ease-in; } + .euiDatePicker.euiDatePicker--shadow .react-datepicker-popper[data-placement^="top"] { + box-shadow: 0 0 0.8px rgba(0, 0, 0, 0.15), 0 0 2px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 0 17px rgba(0, 0, 0, 0.075); + border-radius: 6px 6px 0 0; } + .euiDatePicker.euiDatePicker--shadow .react-datepicker-popper[data-placement^="right"] { + margin-left: 0; } + .euiDatePicker.euiDatePicker--shadow .react-datepicker-popper[data-placement^="left"] { + margin-right: 0; } + +.react-datepicker__header { + text-align: center; + border-top-left-radius: 6px; + border-top-right-radius: 6px; } + .react-datepicker__header--time { + display: none; } + +.react-datepicker__header__dropdown { + padding: 16px 0 8px 0; } + +.react-datepicker__year-dropdown-container--select, +.react-datepicker__month-dropdown-container--select, +.react-datepicker__month-year-dropdown-container--select, +.react-datepicker__year-dropdown-container--scroll, +.react-datepicker__month-dropdown-container--scroll, +.react-datepicker__month-year-dropdown-container--scroll { + display: inline-block; + margin: 0 4px; } + +.react-datepicker__current-month, +.react-datepicker-time__header { + display: none; } + +.react-datepicker-time__header { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; } + +.react-datepicker__navigation { + cursor: pointer; + position: absolute; + top: 18px; + width: 0; + padding: 0; + z-index: 1; + text-indent: -999em; + overflow: hidden; } + .react-datepicker__navigation--previous { + background-position: center; + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+ICA8ZGVmcz4gICAgPHBhdGggaWQ9ImRvd25hcnJvd3doaXRlLWEiIGQ9Ik0xMy4wNjg4NTA4LDUuMTU3MjUwMzggTDguMzg0MjM5NzUsOS43NjgyNzQyOCBDOC4xNzA1NDQxNSw5Ljk3ODYxMzA4IDcuODI5OTkyMTQsOS45NzkxNDA5NSA3LjYxNTc2MDI1LDkuNzY4Mjc0MjggTDIuOTMxMTQ5MTUsNS4xNTcyNTAzOCBDMi43MTgxMzU5LDQuOTQ3NTgzMjEgMi4zNzI3NzMxOSw0Ljk0NzU4MzIxIDIuMTU5NzU5OTQsNS4xNTcyNTAzOCBDMS45NDY3NDY2OSw1LjM2NjkxNzU2IDEuOTQ2NzQ2NjksNS43MDY4NTUyMiAyLjE1OTc1OTk0LDUuOTE2NTIyNCBMNi44NDQzNzEwNCwxMC41Mjc1NDYzIEM3LjQ4NTE3NDI0LDExLjE1ODI4MzYgOC41MTY0NDk3OSwxMS4xNTY2ODUxIDkuMTU1NjI4OTYsMTAuNTI3NTQ2MyBMMTMuODQwMjQwMSw1LjkxNjUyMjQgQzE0LjA1MzI1MzMsNS43MDY4NTUyMiAxNC4wNTMyNTMzLDUuMzY2OTE3NTYgMTMuODQwMjQwMSw1LjE1NzI1MDM4IEMxMy42MjcyMjY4LDQuOTQ3NTgzMjEgMTMuMjgxODY0MSw0Ljk0NzU4MzIxIDEzLjA2ODg1MDgsNS4xNTcyNTAzOCBaIi8+ICA8L2RlZnM+ICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgICA8dXNlIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIgeGxpbms6aHJlZj0iI2Rvd25hcnJvd3doaXRlLWEiLz4gIDwvZz48L3N2Zz4=); + left: 20px; + height: 16px; + width: 16px; + -webkit-transform: rotate(90deg); + transform: rotate(90deg); + 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__navigation--previous:hover, .react-datepicker__navigation--previous:focus { + border-radius: 6px; + -webkit-transform: scale(1.2) rotate(90deg); + transform: scale(1.2) rotate(90deg); } + .react-datepicker__navigation--previous:hover { + background-color: #25262E; + box-shadow: 0 0 0 2px #25262E; } + .react-datepicker__navigation--previous:focus { + background-color: rgba(54, 162, 239, 0.3); + box-shadow: 0 0 0 2px rgba(54, 162, 239, 0.3); } + .react-datepicker__navigation--previous--disabled, .react-datepicker__navigation--previous--disabled:hover { + cursor: not-allowed; + opacity: .2; } + .react-datepicker__navigation--next { + background-position: center; + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+ICA8ZGVmcz4gICAgPHBhdGggaWQ9ImRvd25hcnJvd3doaXRlLWEiIGQ9Ik0xMy4wNjg4NTA4LDUuMTU3MjUwMzggTDguMzg0MjM5NzUsOS43NjgyNzQyOCBDOC4xNzA1NDQxNSw5Ljk3ODYxMzA4IDcuODI5OTkyMTQsOS45NzkxNDA5NSA3LjYxNTc2MDI1LDkuNzY4Mjc0MjggTDIuOTMxMTQ5MTUsNS4xNTcyNTAzOCBDMi43MTgxMzU5LDQuOTQ3NTgzMjEgMi4zNzI3NzMxOSw0Ljk0NzU4MzIxIDIuMTU5NzU5OTQsNS4xNTcyNTAzOCBDMS45NDY3NDY2OSw1LjM2NjkxNzU2IDEuOTQ2NzQ2NjksNS43MDY4NTUyMiAyLjE1OTc1OTk0LDUuOTE2NTIyNCBMNi44NDQzNzEwNCwxMC41Mjc1NDYzIEM3LjQ4NTE3NDI0LDExLjE1ODI4MzYgOC41MTY0NDk3OSwxMS4xNTY2ODUxIDkuMTU1NjI4OTYsMTAuNTI3NTQ2MyBMMTMuODQwMjQwMSw1LjkxNjUyMjQgQzE0LjA1MzI1MzMsNS43MDY4NTUyMiAxNC4wNTMyNTMzLDUuMzY2OTE3NTYgMTMuODQwMjQwMSw1LjE1NzI1MDM4IEMxMy42MjcyMjY4LDQuOTQ3NTgzMjEgMTMuMjgxODY0MSw0Ljk0NzU4MzIxIDEzLjA2ODg1MDgsNS4xNTcyNTAzOCBaIi8+ICA8L2RlZnM+ICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgICA8dXNlIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIgeGxpbms6aHJlZj0iI2Rvd25hcnJvd3doaXRlLWEiLz4gIDwvZz48L3N2Zz4=); + right: 20px; + height: 16px; + width: 16px; + -webkit-transform: rotate(-90deg); + transform: rotate(-90deg); } + .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) { + left: 248px; } + .react-datepicker__navigation--next:hover, .react-datepicker__navigation--next:focus { + border-radius: 6px; + -webkit-transform: scale(1.2) rotate(-90deg); + transform: scale(1.2) rotate(-90deg); } + .react-datepicker__navigation--next:hover { + background-color: #25262E; + box-shadow: 0 0 0 2px #25262E; } + .react-datepicker__navigation--next:focus { + background-color: rgba(54, 162, 239, 0.3); + box-shadow: 0 0 0 2px rgba(54, 162, 239, 0.3); } + .react-datepicker__navigation--next--disabled, .react-datepicker__navigation--next--disabled:hover { + cursor: not-allowed; + opacity: .2; } + .react-datepicker__navigation--years { + position: relative; + top: 0; + display: block; + margin-left: auto; + margin-right: auto; } + .react-datepicker__navigation--years-previous { + top: 4px; + border-top-color: #25262E; } + .react-datepicker__navigation--years-previous:hover { + border-top-color: #0e0f12; } + .react-datepicker__navigation--years-upcoming { + top: -4px; + border-bottom-color: #25262E; } + .react-datepicker__navigation--years-upcoming:hover { + border-bottom-color: #0e0f12; } + +.react-datepicker__month { + margin: 0 16px 16px 16px; + text-align: center; + border-radius: 6px; } + +.react-datepicker__time-container { + border-left: #343741; + width: auto; + display: -webkit-flex; + display: flex; + padding: 16px 0; + border-radius: 0 6px 6px 0; + -webkit-flex-grow: 1; + flex-grow: 1; } + .react-datepicker__time-container .react-datepicker__time { + position: relative; + -webkit-flex-grow: 1; + flex-grow: 1; + display: -webkit-flex; + display: flex; + padding-left: 4px; + -webkit-flex-direction: column; + flex-direction: column; } + .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box { + width: auto; + display: -webkit-flex; + display: flex; + -webkit-flex-direction: column; + flex-direction: column; + -webkit-flex-grow: 1; + flex-grow: 1; } + .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list { + scrollbar-width: thin; + height: 204px !important; + display: -webkit-flex; + display: flex; + -webkit-flex-direction: column; + flex-direction: column; + -webkit-flex-grow: 1; + flex-grow: 1; + overflow-y: auto; + -webkit-align-items: center; + align-items: center; } + .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list::-webkit-scrollbar { + width: 16px; + height: 16px; } + .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list::-webkit-scrollbar-thumb { + background-color: rgba(152, 162, 179, 0.5); + border: 6px solid transparent; + background-clip: content-box; } + .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list::-webkit-scrollbar-corner, .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list::-webkit-scrollbar-track { + background-color: transparent; } + .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item { + padding: 4px 8px; + margin-bottom: 4px; + text-align: right; + color: #98A2B3; + white-space: nowrap; + line-height: 12px; } + .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover, .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:focus { + cursor: pointer; + text-decoration: underline; } + .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected { + background-color: #36A2EF; + color: white; + border-radius: 3px; } + .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover { + background-color: #36A2EF; } + .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled { + color: #343741; } + .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover { + cursor: not-allowed; + text-decoration: none; + background-color: transparent; } + +.react-datepicker__week-number { + color: #25262E; + display: inline-block; + width: 32px; + line-height: 28px; + text-align: center; + margin: 0 4px; } + .react-datepicker__week-number.react-datepicker__week-number--clickable { + cursor: pointer; } + .react-datepicker__week-number.react-datepicker__week-number--clickable:hover { + border-radius: 6px; + background-color: #1D1E24; } + +.react-datepicker__day-names, +.react-datepicker__week { + white-space: nowrap; } + +.react-datepicker__day-name, +.react-datepicker__day, +.react-datepicker__time-name { + color: #FFF; + display: inline-block; + width: 32px; + line-height: 28px; + text-align: center; + margin: 0 2px; } + +.react-datepicker__day-name { + color: #98A2B3; + text-transform: uppercase; } + +.react-datepicker__day { + cursor: pointer; + border: solid 2px transparent; + 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:not(.react-datepicker__day--disabled) { + text-decoration: underline; + font-weight: 700; + -webkit-transform: scale(1.2); + transform: scale(1.2); } + .react-datepicker__day--today { + font-weight: bold; + color: #36A2EF; } + .react-datepicker__day--outside-month { + color: #98A2B3; } + .react-datepicker__day--highlighted { + border-radius: 6px; + background-color: #7DDED8; + color: #FFF; } + .react-datepicker__day--highlighted:hover { + background-color: #69d9d2; } + .react-datepicker__day--in-range { + background-color: rgba(54, 162, 239, 0.1); + color: #FFF; + border-radius: 0; + border-top: solid 6px #1D1E24; + border-bottom: solid 6px #1D1E24; + border-right: none; + border-left: none; + line-height: 20px; } + .react-datepicker__day--selected, .react-datepicker__day--in-selecting-range { + height: 32px; + margin: 0 2px; + border-radius: 6px; + background-color: #36A2EF; + line-height: 28px; + border: solid 2px #36A2EF; + color: #FFF; } + .react-datepicker__day--selected:hover, .react-datepicker__day--in-selecting-range:hover { + background-color: #1e97ed; } + .react-datepicker__day--keyboard-selected { + border-radius: 6px; + border: solid 2px #36A2EF; + font-weight: 700; } + .react-datepicker__day--keyboard-selected:hover { + background-color: #1e97ed; + color: #FFF; } + .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range) { + background-color: rgba(54, 162, 239, 0.5); } + .react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range) { + background-color: #1D1E24; + color: #FFF; } + .react-datepicker__day--disabled { + cursor: not-allowed; + color: #343741; } + .react-datepicker__day--disabled:hover { + background-color: transparent; } + +.react-datepicker__input-container { + position: relative; } + +.react-datepicker__year-read-view { + font-weight: 300; + color: #98A2B3; } + +.react-datepicker__month-read-view { + font-weight: 500; } + +.react-datepicker__year-read-view, +.react-datepicker__month-read-view, +.react-datepicker__month-year-read-view { + font-size: 22px; } + .react-datepicker__year-read-view:hover, + .react-datepicker__month-read-view:hover, + .react-datepicker__month-year-read-view:hover { + cursor: pointer; + color: #36A2EF; } + .react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow, + .react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow, + .react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow, + .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow, + .react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow, + .react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow { + border-top-color: #0e0f12; } + .react-datepicker__year-read-view--down-arrow, + .react-datepicker__month-read-view--down-arrow, + .react-datepicker__month-year-read-view--down-arrow { + display: none; } + +.react-datepicker__year-dropdown, +.react-datepicker__month-dropdown, +.react-datepicker__month-year-dropdown { + background-color: #1D1E24; + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + bottom: 0; + right: 0; + z-index: 1; + text-align: center; + border-radius: 6px; + display: -webkit-flex; + display: flex; + -webkit-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-animation: euiAnimFadeIn 150ms ease-in; + animation: euiAnimFadeIn 150ms ease-in; + -webkit-align-content: space-around; + align-content: space-around; + -webkit-align-items: center; + align-items: center; + padding: 8px; } + .react-datepicker__year-dropdown:hover, + .react-datepicker__month-dropdown:hover, + .react-datepicker__month-year-dropdown:hover { + cursor: pointer; } + +.react-datepicker__year-dropdown { + -webkit-flex-wrap: wrap-reverse; + flex-wrap: wrap-reverse; + -webkit-flex-direction: row-reverse; + flex-direction: row-reverse; + -webkit-justify-content: flex-end; + justify-content: flex-end; } + +.react-datepicker__year-option:first-of-type, .react-datepicker__year-option:last-of-type { + display: none; } + +.react-datepicker__year-option, +.react-datepicker__month-option, +.react-datepicker__month-year-option { + font-size: 12px; + padding: 8px; + color: #D4DAE5; + -webkit-flex-basis: 33.3%; + flex-basis: 33.3%; } + .react-datepicker__year-option:first-of-type, + .react-datepicker__month-option:first-of-type, + .react-datepicker__month-year-option:first-of-type { + border-top-left-radius: 6px; + border-top-right-radius: 6px; } + .react-datepicker__year-option:last-of-type, + .react-datepicker__month-option:last-of-type, + .react-datepicker__month-year-option:last-of-type { + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; } + .react-datepicker__year-option:hover, + .react-datepicker__month-option:hover, + .react-datepicker__month-year-option:hover { + background-color: #25262E; } + .react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming, + .react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming, + .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming { + border-bottom-color: #0e0f12; } + .react-datepicker__year-option:hover .react-datepicker__navigation--years-previous, + .react-datepicker__month-option:hover .react-datepicker__navigation--years-previous, + .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous { + border-top-color: #0e0f12; } + .react-datepicker__year-option--selected, + .react-datepicker__month-option--selected, + .react-datepicker__month-year-option--selected { + display: none; } + +.react-datepicker__screenReaderOnly { + position: absolute; + left: -10000px; + top: auto; + width: 1px; + height: 1px; + overflow: hidden; } + +.react-datepicker__year-option--preselected, +.react-datepicker__month-option--preselected { + background: rgba(54, 162, 239, 0.3); } + +.react-datepicker__year-option--selected_year.react-datepicker__year-option--preselected, +.react-datepicker__month-option--selected_month.react-datepicker__month-option--preselected { + background: #36A2EF; } + +.react-datepicker__time-list-item--preselected, +.react-datepicker__year-option--preselected, +.react-datepicker__month-option--preselected { + background: rgba(30, 151, 237, 0.3); } + +.react-datepicker__time-container--focus { + background: rgba(54, 162, 239, 0.3); } + +.react-datepicker__month-read-view:focus, +.react-datepicker__year-read-view:focus { + text-decoration: underline; } + +.react-datepicker__month--accessible:focus { + background: rgba(54, 162, 239, 0.3); } + .react-datepicker__month--accessible:focus .react-datepicker__day--in-range:not(.react-datepicker__day--selected) { + border-top-color: rgba(54, 162, 239, 0.3); + border-bottom-color: rgba(54, 162, 239, 0.3); } + +.react-datepicker__navigation:focus { + background-color: rgba(54, 162, 239, 0.3); } + +.react-datepicker__year-option--selected_year, +.react-datepicker__month-option--selected_month { + background: #36A2EF; + color: #1D1E24; + font-weight: 700; + border-radius: 6px; } + +.react-datepicker__focusTrap { + display: -webkit-flex; + display: flex; } + +/** + * 1. Account for inner box-shadow style border + */ +.euiDatePickerRange { + max-width: 400px; + width: 100%; + height: auto; + background-color: #16171c; + background-repeat: no-repeat; + background-size: 0% 100%; + box-shadow: 0 0 transparent, inset 0 0 0 1px rgba(255, 255, 255, 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: center; + align-items: center; + padding: 1px; + /* 1 */ } + .euiDatePickerRange--fullWidth { + max-width: 100%; } + .euiDatePickerRange--compressed { + height: 32px; } + .euiDatePickerRange--inGroup { + height: 100%; } + @supports (-moz-appearance: none) { + .euiDatePickerRange { + transition-property: box-shadow, background-image, background-size; } } + .euiDatePickerRange > * { + -webkit-flex-grow: 1; + flex-grow: 1; } + .euiDatePickerRange .euiFieldText.euiDatePicker { + box-shadow: none !important; + text-align: center; } + .euiDatePickerRange .react-datepicker-popper .euiFieldText.euiDatePicker { + text-align: left; } + .euiDatePickerRange--inGroup { + box-shadow: none; + padding: 0; } + .euiDatePickerRange--inGroup .euiDatePicker { + height: 38px; } + .euiDatePickerRange > .euiDatePickerRange__delimeter { + background-color: transparent !important; + line-height: 1 !important; + -webkit-flex: 0 0 auto; + flex: 0 0 auto; + padding-left: 6px; + padding-right: 6px; } + +.euiDatePickerRange--readOnly { + background: #202128; } + +.euiSuperDatePicker__absoluteDateFormRow { + padding: 0 8px 8px; } + +.euiDatePopoverButton { + font-family: "Inter", -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: #DFE5EF; + display: block; + width: 100%; + padding: 0 8px; + line-height: 38px; + height: 38px; + word-break: break-all; + transition: background 150ms ease-in; + background-size: 100%; } + @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { + .euiDatePopoverButton { + line-height: 1em; } } + .euiDatePopoverButton::-webkit-input-placeholder { + color: #81858f; + opacity: 1; } + .euiDatePopoverButton::-moz-placeholder { + color: #81858f; + opacity: 1; } + .euiDatePopoverButton::placeholder { + color: #81858f; + opacity: 1; } + .euiDatePopoverButton:focus, .euiDatePopoverButton-isSelected { + background-image: linear-gradient(to top, #36A2EF, #36A2EF 2px, transparent 2px, transparent 100%); } + .euiDatePopoverButton-needsUpdating { + background-color: #264341; + color: #7DDED8; } + .euiDatePopoverButton-needsUpdating:focus, .euiDatePopoverButton-needsUpdating.euiDatePopoverButton-isSelected { + background-image: linear-gradient(to top, #7DDED8, #7DDED8 2px, transparent 2px, transparent 100%); } + .euiDatePopoverButton-isInvalid { + background-color: #4a201e; + color: #F86B63; } + .euiDatePopoverButton-isInvalid:focus, .euiDatePopoverButton-isInvalid.euiDatePopoverButton-isSelected { + background-image: linear-gradient(to top, #F86B63, #F86B63 2px, transparent 2px, transparent 100%); } + .euiDatePopoverButton:disabled { + background-color: #202128; + color: #98A2B3; + cursor: default; } + +.euiDatePopoverButton--start { + text-align: right; } + +.euiDatePopoverButton--end { + text-align: left; } + +.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; } } + +@media only screen and (min-width: 575px) and (max-width: 767px) { + .euiDatePopoverContent { + width: 284px; } } + +.euiQuickSelectPopover__content { + width: 400px; + max-width: 100%; } + +.euiQuickSelectPopover__section { + scrollbar-width: thin; + max-height: 132px; + overflow: hidden; + overflow-y: auto; + padding: 8px 0 4px; } + .euiQuickSelectPopover__section::-webkit-scrollbar { + width: 16px; + height: 16px; } + .euiQuickSelectPopover__section::-webkit-scrollbar-thumb { + background-color: rgba(152, 162, 179, 0.5); + border: 6px solid transparent; + background-clip: content-box; } + .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:not(:last-of-type) { + margin-bottom: 8px; } + +.euiQuickSelect__applyButton { + min-width: 0; } + +.euiRefreshInterval__startButton { + min-width: 90px; } + +.euiSuperDatePicker__flexWrapper { + max-width: calc(100% + 8px); + width: 606px; } + +.euiSuperDatePicker__flexWrapper--isAutoRefreshOnly { + width: 400px; } + +.euiSuperDatePicker__flexWrapper--noUpdateButton { + width: 480px; } + +.euiSuperDatePicker { + max-width: 100% !important; } + .euiSuperDatePicker > .euiFormControlLayout__childrenWrapper { + -webkit-flex: 1 1 100%; + flex: 1 1 100%; + overflow: hidden; } + .euiSuperDatePicker > .euiFormControlLayout__childrenWrapper > .euiDatePickerRange { + max-width: none; + width: auto; + border-radius: 0 6px 6px 0; } + +.euiSuperDatePicker__startPopoverButton { + margin-right: -12px; } + +.euiSuperDatePicker__prettyFormat { + font-family: "Inter", -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: #DFE5EF; + 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; } + @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { + .euiSuperDatePicker__prettyFormat { + line-height: 1em; } } + .euiSuperDatePicker__prettyFormat::-webkit-input-placeholder { + color: #81858f; + opacity: 1; } + .euiSuperDatePicker__prettyFormat::-moz-placeholder { + color: #81858f; + opacity: 1; } + .euiSuperDatePicker__prettyFormat::placeholder { + color: #81858f; + opacity: 1; } + .euiSuperDatePicker__prettyFormat:not(:disabled):hover, .euiSuperDatePicker__prettyFormat:focus { + text-decoration: none; } + .euiSuperDatePicker__prettyFormat:not(:disabled):hover .euiSuperDatePicker__prettyFormatLink, .euiSuperDatePicker__prettyFormat:focus .euiSuperDatePicker__prettyFormatLink { + text-decoration: underline; } + .euiSuperDatePicker__prettyFormat:disabled { + background-color: #202128; + color: #98A2B3; + cursor: not-allowed; } + .euiSuperDatePicker__prettyFormat:disabled .euiSuperDatePicker__prettyFormatLink { + display: none; } + +.euiSuperDatePicker__prettyFormatLink { + color: #36A2EF; + padding-left: 4px; + -webkit-flex-shrink: 0; + flex-shrink: 0; } + +@media only screen and (max-width: 574px) { + .euiSuperDatePicker__flexWrapper { + width: calc(100% + 8px); } + .euiSuperDatePicker__prettyFormatLink { + -webkit-flex-shrink: 1; + flex-shrink: 1; + min-width: 3em; } } + +@media only screen and (min-width: 575px) and (max-width: 767px) { + .euiSuperDatePicker__flexWrapper { + width: calc(100% + 8px); } + .euiSuperDatePicker__prettyFormatLink { + -webkit-flex-shrink: 1; + flex-shrink: 1; + min-width: 3em; } } + +.euiSuperUpdateButton { + min-width: 118px; } + +@media only screen and (max-width: 574px) { + .euiSuperUpdateButton { + min-width: 0; } + .euiSuperUpdateButton .euiSuperUpdateButton__text { + display: none; } } + +@media only screen and (min-width: 575px) and (max-width: 767px) { + .euiSuperUpdateButton { + min-width: 0; } + .euiSuperUpdateButton .euiSuperUpdateButton__text { + display: none; } } + +.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: 8000; + background: #1D1E24; } + .euiDataGrid--fullScreen .euiDataGrid__pagination { + padding-bottom: 4px; + background: #25262E; + border-top: 1px solid #343741; } + .euiDataGrid--fullScreen .euiDataGrid__verticalScroll .euiDataGridRow { + will-change: transform; } + +.euiDataGrid__content { + height: 100%; + font-feature-settings: 'tnum' 1; + max-width: 100%; + width: 100%; + z-index: 2; + background: #1D1E24; } + +.euiDataGrid__controls { + background: #141519; + position: relative; + z-index: 3; + border: 1px solid #343741; + padding: 4px; + -webkit-flex-grow: 0; + flex-grow: 0; } + .euiDataGrid__controls > * { + margin-left: 2px; } + +.euiDataGrid__controlBtn { + border-radius: 6px; } + .euiDataGrid__controlBtn:focus { + background: #3b3c43; } + +.euiDataGrid__controlBtn--active, +.euiDataGrid__controlBtn--active:focus { + font-weight: 600; + color: #FFF; } + +.euiDataGrid--bordersNone .euiDataGrid__controls { + border: none; + background: #1D1E24; } + +.euiDataGrid--bordersHorizontal .euiDataGrid__controls { + border-right: none; + border-left: none; + border-top: none; + background: #1D1E24; } + +.euiDataGrid__pagination { + padding-top: 4px; + -webkit-flex-grow: 0; + flex-grow: 0; } + +.euiDataGrid__verticalScroll { + -webkit-flex-grow: 1; + flex-grow: 1; + overflow-y: hidden; + height: 100%; } + +.euiDataGrid__overflow { + overflow-y: hidden; + height: 100%; + background: #1D1E24; } + +.euiDataGrid__restrictBody { + height: 100vh; + overflow: hidden; } + +.euiDataGrid__controlScroll { + 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(152, 162, 179, 0.5); + border: 6px solid transparent; + background-clip: content-box; } + .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 */ } + +.euiDataGrid__focusWrap { + height: 100%; } + +.euiDataGrid__virtualized { + scrollbar-width: thin; + scroll-padding: 0; } + .euiDataGrid__virtualized::-webkit-scrollbar { + width: 16px; + height: 16px; } + .euiDataGrid__virtualized::-webkit-scrollbar-thumb { + background-color: rgba(152, 162, 179, 0.5); + border: 6px solid #1D1E24; + background-clip: content-box; } + .euiDataGrid__virtualized::-webkit-scrollbar-corner, .euiDataGrid__virtualized::-webkit-scrollbar-track { + background-color: #1D1E24; } + +.euiDataGridHeader { + display: -webkit-inline-flex; + display: inline-flex; + min-width: 100%; + z-index: 3; + background: #1D1E24; + position: -webkit-sticky; + position: sticky; + top: 0; } + +.euiDataGridHeaderCell { + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + 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 > * { + max-width: 100%; + width: 100%; } + .euiDataGridHeaderCell.euiDataGridHeaderCell--numeric { + text-align: right; } + .euiDataGridHeaderCell.euiDataGridHeaderCell--currency { + text-align: right; } + .euiDataGridHeaderCell:focus { + border: 1px solid transparent; + box-shadow: 0 0 0 2px #36A2EF; + border-radius: 1px; + z-index: 2; + outline: none; + border-top: none; } + .euiDataGridHeaderCell:not(.euiDataGridHeaderCell--controlColumn):focus-within { + border: 1px solid transparent; + box-shadow: 0 0 0 2px #36A2EF; + border-radius: 1px; + z-index: 2; + outline: none; + border-top: none; } + .euiDataGridHeaderCell:not(.euiDataGridHeaderCell--controlColumn) .euiDataGridHeaderCell__sortingArrow { + margin-right: 4px; } + .euiDataGridHeaderCell:not(.euiDataGridHeaderCell--controlColumn) .euiDataGridHeaderCell__anchor { + width: 100%; } + .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; + word-wrap: normal !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: #1D1E24; } + +.euiDataGrid--headerUnderline .euiDataGridHeaderCell { + border-top: none; + border-left: none; + border-right: none; + border-bottom: 2px solid #343741; + border-bottom-color: #DFE5EF; } + +.euiDataGrid--bordersNone.euiDataGrid--headerUnderline .euiDataGridHeaderCell { + border-bottom: 2px solid #343741; + border-color: #DFE5EF; } + +.euiDataGrid--headerShade .euiDataGridHeaderCell { + background: #212229; } + +.euiDataGrid--headerShade.euiDataGrid--bordersAll .euiDataGridHeaderCell { + border-right: 1px solid #343741; + border-bottom: 1px solid #343741; + border-left: none; } + .euiDataGrid--headerShade.euiDataGrid--bordersAll .euiDataGridHeaderCell:first-of-type { + border-left: 1px solid #343741; } + +.euiDataGrid--headerShade.euiDataGrid--bordersHorizontal .euiDataGridHeaderCell { + border-top: none; + border-bottom: 1px solid #343741; } + +.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.85714rem; + line-height: 1.14286rem; } + +.euiDataGrid--fontSizeLarge .euiDataGridHeaderCell { + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; } + +.euiDataGrid--paddingSmall .euiDataGridHeaderCell { + padding: 4px; } + +.euiDataGrid--paddingLarge .euiDataGridHeaderCell { + padding: 8px; } + +.euiDataGrid--noControls.euiDataGrid--bordersAll .euiDataGridHeaderCell { + border-top: 1px solid #343741; } + +.euiDataGrid--noControls.euiDataGrid--bordersHorizontal .euiDataGridHeaderCell { + border-top: 1px solid #343741; } + +.euiDataGridRowCell.euiDataGridFooterCell { + font-weight: 700; } + +.euiDataGrid--stickyFooter .euiDataGridFooter { + position: -webkit-sticky; + position: sticky; + bottom: 0; } + +.euiDataGrid--footerOverline .euiDataGridRowCell.euiDataGridFooterCell { + border-top: 2px solid #343741; + border-top-color: #DFE5EF !important; + background: #1D1E24 !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: #212229; } + +.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: #36A2EF; } + .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 { + display: -webkit-inline-flex; + display: inline-flex; + min-width: 100%; } + +.euiDataGridRowCell { + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + padding: 6px; + border-right: solid 1px #24272e; + border-bottom: 1px solid #343741; + -webkit-flex: 0 0 auto; + flex: 0 0 auto; + background: #1D1E24; + position: relative; + -webkit-align-items: center; + align-items: center; + display: -webkit-flex; + display: flex; } + .euiDataGridRowCell > * { + max-width: 100%; + width: 100%; } + .euiDataGridRowCell.euiDataGridRowCell--firstColumn { + border-left: 1px solid #343741; } + .euiDataGridRowCell.euiDataGridRowCell--lastColumn { + border-right-color: #343741; } + .euiDataGridRowCell:focus { + border: 1px solid transparent; + box-shadow: 0 0 0 2px #36A2EF; + border-radius: 1px; + z-index: 2; + outline: none; + margin-top: -1px; } + .euiDataGridRowCell:hover .euiDataGridRowCell__expandButtonIcon { + -webkit-animation-duration: 90ms; + animation-duration: 90ms; + -webkit-animation-name: euiDataGridCellButtonSlideIn; + animation-name: euiDataGridCellButtonSlideIn; + -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__actionButtonIcon { + -webkit-animation-duration: 90ms; + animation-duration: 90ms; + -webkit-animation-name: euiDataGridCellButtonSlideIn; + animation-name: euiDataGridCellButtonSlideIn; + -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:not(:hover) .euiDataGridRowCell__expandButtonIcon, .euiDataGridRowCell.euiDataGridRowCell--open .euiDataGridRowCell__expandButtonIcon { + -webkit-animation: none; + animation: none; + margin-left: 6px; + width: 12px; } + .euiDataGridRowCell:not(:hover) .euiDataGridRowCell__actionButtonIcon, .euiDataGridRowCell.euiDataGridRowCell--open .euiDataGridRowCell__actionButtonIcon { + -webkit-animation: none; + animation: none; + margin-left: 6px; + width: 12px; } + .euiDataGridRowCell:focus .euiDataGridRowCell__actionButtonIcon { + margin-left: 6px; + width: 12px; } + .euiDataGridRowCell:not(:hover):not(:focus):not(.euiDataGridRowCell--open) .euiDataGridRowCell__expandButtonIcon, + .euiDataGridRowCell:not(:hover):not(:focus):not(.euiDataGridRowCell--open) .euiDataGridRowCell__actionButtonIcon { + display: none; } + .euiDataGridRowCell:focus:not(:first-of-type) { + padding-left: 5px; } + .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: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; + word-wrap: normal !important; + overflow: hidden; + white-space: nowrap; } + +.euiDataGridRowCell__popover { + scrollbar-width: thin; + overflow: auto; + max-width: 400px !important; + max-height: 400px !important; } + .euiDataGridRowCell__popover::-webkit-scrollbar { + width: 16px; + height: 16px; } + .euiDataGridRowCell__popover::-webkit-scrollbar-thumb { + background-color: rgba(152, 162, 179, 0.5); + border: 6px solid transparent; + background-clip: content-box; } + .euiDataGridRowCell__popover::-webkit-scrollbar-corner, .euiDataGridRowCell__popover::-webkit-scrollbar-track { + background-color: transparent; } + +.euiDataGridRowCell__expand { + width: 100%; + max-width: 100%; } + +.euiDataGridRowCell__expandFlex { + display: -webkit-flex; + display: flex; + -webkit-align-items: center; + align-items: center; } + +.euiDataGridRowCell__expandContent { + -webkit-flex-grow: 1; + flex-grow: 1; } + +.euiDataGridRowCell__expandButton { + display: -webkit-flex; + display: flex; + -webkit-flex-grow: 0; + flex-grow: 0; } + +.euiDataGridRowCell__expandButtonIcon { + height: 12px; + border-radius: 3px; + width: 0; + overflow: hidden; + transition: none; + box-shadow: none !important; + border: none; } + .euiDataGridRowCell__expandButtonIcon-isActive { + margin-left: 6px; + width: 12px; } + +.euiDataGridRowCell__actionButtonIcon { + height: 12px; + border-radius: 3px; + width: 0; + overflow: hidden; + transition: none; } + +.euiDataGrid--rowHoverHighlight .euiDataGridRow:hover .euiDataGridRowCell { + background-color: #2E2D25 !important; } + +.euiDataGrid--stripes .euiDataGridRowCell.euiDataGridRowCell--stripe { + background: #25262E; } + +.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.85714rem; + line-height: 1.14286rem; } + +.euiDataGrid--fontSizeLarge .euiDataGridRowCell { + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; } + +.euiDataGrid--paddingSmall .euiDataGridRowCell { + padding: 4px; } + .euiDataGrid--paddingSmall .euiDataGridRowCell:focus:not(:first-of-type) { + padding-left: 3px; } + +.euiDataGrid--paddingLarge .euiDataGridRowCell { + padding: 8px; } + .euiDataGrid--paddingLarge .euiDataGridRowCell:focus:not(:first-of-type) { + padding-left: 7px; } + +@-webkit-keyframes euiDataGridCellButtonSlideIn { + from { + margin-left: 0; + width: 0; } + to { + margin-left: 6px; + width: 12px; } } + +@keyframes euiDataGridCellButtonSlideIn { + from { + margin-left: 0; + width: 0; } + to { + margin-left: 6px; + width: 12px; } } + +.euiDataGridColumnSelector__item { + padding: 4px; } + .euiDataGridColumnSelector__item-isDragging { + box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25), 0 3.6px 13px rgba(0, 0, 0, 0.175), 0 8.4px 23px rgba(0, 0, 0, 0.15), 0 23px 35px rgba(0, 0, 0, 0.125); + background: #1D1E24; } + +.euiDataGridColumnSelector__columnList { + 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(152, 162, 179, 0.5); + border: 6px solid transparent; + background-clip: content-box; } + .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.85714rem; + line-height: 1.14286rem; } + +.euiDataGridColumnSelectorPopover { + -webkit-transform: none !important; + transform: none !important; + transition: none !important; + margin-top: -8px; + min-width: 192px; } + +.euiDataGridColumnSorting__item-isDragging { + box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25), 0 3.6px 13px rgba(0, 0, 0, 0.175), 0 8.4px 23px rgba(0, 0, 0, 0.15), 0 23px 35px rgba(0, 0, 0, 0.125); + background: #1D1E24; } + +.euiDataGridColumnSortingPopover { + -webkit-transform: none !important; + transform: none !important; + transition: none !important; + margin-top: -8px; + min-width: 192px; } + +.euiDataGridColumnSorting__fieldList { + 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(152, 162, 179, 0.5); + border: 6px solid transparent; + background-clip: content-box; } + .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(54, 162, 239, 0.3); } + .euiDataGridColumnSorting__field:disabled { + cursor: not-allowed; + text-decoration: none; + color: #515761; } + +.euiDataGridColumnSorting__orderButtons { + padding-left: 24px; } + .euiDataGridColumnSorting__orderButtons .euiDataGridColumnSorting__order { + min-width: 200px; + border: none; } + .euiDataGridColumnSorting__orderButtons .euiDataGridColumnSorting__order button { + font-size: 12px !important; } + +.euiDescriptionList.euiDescriptionList--row .euiDescriptionList__title { + color: #DFE5EF; + font-size: 16px; + font-size: 1.14286rem; + line-height: 1.71429rem; + font-weight: 700; + line-height: 1.5; + margin-top: 16px; } + .euiDescriptionList.euiDescriptionList--row .euiDescriptionList__title:first-of-type { + margin-top: 0; } + +.euiDescriptionList.euiDescriptionList--row .euiDescriptionList__description { + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; } + +.euiDescriptionList.euiDescriptionList--row.euiDescriptionList--center { + text-align: center; } + +.euiDescriptionList.euiDescriptionList--row.euiDescriptionList--reverse .euiDescriptionList__title { + color: #DFE5EF; + font-weight: 400; + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; } + +.euiDescriptionList.euiDescriptionList--row.euiDescriptionList--reverse .euiDescriptionList__description { + color: #DFE5EF; + font-size: 16px; + font-size: 1.14286rem; + line-height: 1.71429rem; + font-weight: 700; } + +.euiDescriptionList.euiDescriptionList--row.euiDescriptionList--compressed .euiDescriptionList__title { + color: #DFE5EF; + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + font-weight: 700; + line-height: 1.5; } + +.euiDescriptionList.euiDescriptionList--row.euiDescriptionList--compressed .euiDescriptionList__description { + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; } + +.euiDescriptionList.euiDescriptionList--row.euiDescriptionList--compressed.euiDescriptionList--reverse .euiDescriptionList__title { + color: #DFE5EF; + font-weight: 400; + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; } + +.euiDescriptionList.euiDescriptionList--row.euiDescriptionList--compressed.euiDescriptionList--reverse .euiDescriptionList__description { + color: #DFE5EF; + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + font-weight: 700; + line-height: 1.5; } + +.euiDescriptionList.euiDescriptionList--column, .euiDescriptionList.euiDescriptionList--responsiveColumn { + display: -webkit-flex; + display: flex; + -webkit-align-items: stretch; + align-items: stretch; + -webkit-flex-wrap: wrap; + flex-wrap: wrap; } + .euiDescriptionList.euiDescriptionList--column > *, .euiDescriptionList.euiDescriptionList--responsiveColumn > * { + margin-top: 16px; } + .euiDescriptionList.euiDescriptionList--column > *:first-child, + .euiDescriptionList.euiDescriptionList--column > :nth-child(2), .euiDescriptionList.euiDescriptionList--responsiveColumn > *:first-child, + .euiDescriptionList.euiDescriptionList--responsiveColumn > :nth-child(2) { + margin-top: 0; } + .euiDescriptionList.euiDescriptionList--column .euiDescriptionList__title, .euiDescriptionList.euiDescriptionList--responsiveColumn .euiDescriptionList__title { + color: #DFE5EF; + font-size: 16px; + font-size: 1.14286rem; + line-height: 1.71429rem; + font-weight: 700; + line-height: 1.5; + width: 50%; + padding-right: 8px; } + .euiDescriptionList.euiDescriptionList--column .euiDescriptionList__description, .euiDescriptionList.euiDescriptionList--responsiveColumn .euiDescriptionList__description { + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + width: 50%; + padding-left: 8px; } + .euiDescriptionList.euiDescriptionList--column.euiDescriptionList--center .euiDescriptionList__title, .euiDescriptionList.euiDescriptionList--responsiveColumn.euiDescriptionList--center .euiDescriptionList__title { + text-align: right; } + .euiDescriptionList.euiDescriptionList--column.euiDescriptionList--reverse .euiDescriptionList__title, .euiDescriptionList.euiDescriptionList--responsiveColumn.euiDescriptionList--reverse .euiDescriptionList__title { + color: #DFE5EF; + font-weight: 400; + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; } + .euiDescriptionList.euiDescriptionList--column.euiDescriptionList--reverse .euiDescriptionList__description, .euiDescriptionList.euiDescriptionList--responsiveColumn.euiDescriptionList--reverse .euiDescriptionList__description { + color: #DFE5EF; + font-size: 16px; + font-size: 1.14286rem; + line-height: 1.71429rem; + font-weight: 700; + line-height: 1.5; } + .euiDescriptionList.euiDescriptionList--column.euiDescriptionList--compressed .euiDescriptionList__title, .euiDescriptionList.euiDescriptionList--responsiveColumn.euiDescriptionList--compressed .euiDescriptionList__title { + color: #DFE5EF; + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + font-weight: 700; + line-height: 1.5; } + .euiDescriptionList.euiDescriptionList--column.euiDescriptionList--compressed .euiDescriptionList__description, .euiDescriptionList.euiDescriptionList--responsiveColumn.euiDescriptionList--compressed .euiDescriptionList__description { + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; } + .euiDescriptionList.euiDescriptionList--column.euiDescriptionList--compressed.euiDescriptionList--reverse .euiDescriptionList__title, .euiDescriptionList.euiDescriptionList--responsiveColumn.euiDescriptionList--compressed.euiDescriptionList--reverse .euiDescriptionList__title { + color: #DFE5EF; + font-weight: 400; + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; } + .euiDescriptionList.euiDescriptionList--column.euiDescriptionList--compressed.euiDescriptionList--reverse .euiDescriptionList__description, .euiDescriptionList.euiDescriptionList--responsiveColumn.euiDescriptionList--compressed.euiDescriptionList--reverse .euiDescriptionList__description { + color: #DFE5EF; + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + font-weight: 700; + line-height: 1.5; } + +@media only screen and (max-width: 574px) { + .euiDescriptionList.euiDescriptionList--responsiveColumn { + display: block; } + .euiDescriptionList.euiDescriptionList--responsiveColumn .euiDescriptionList__title, + .euiDescriptionList.euiDescriptionList--responsiveColumn .euiDescriptionList__description { + width: 100%; + padding: 0; } + .euiDescriptionList.euiDescriptionList--responsiveColumn .euiDescriptionList__description { + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + margin-top: 0; } + .euiDescriptionList.euiDescriptionList--responsiveColumn.euiDescriptionList--center .euiDescriptionList__title, + .euiDescriptionList.euiDescriptionList--responsiveColumn.euiDescriptionList--center .euiDescriptionList__description { + text-align: center; } + .euiDescriptionList.euiDescriptionList--responsiveColumn.euiDescriptionList--reverse .euiDescriptionList__title { + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; } + .euiDescriptionList.euiDescriptionList--responsiveColumn.euiDescriptionList--reverse .euiDescriptionList__description { + color: #DFE5EF; + font-size: 16px; + font-size: 1.14286rem; + line-height: 1.71429rem; + font-weight: 700; } } + +@media only screen and (min-width: 575px) and (max-width: 767px) { + .euiDescriptionList.euiDescriptionList--responsiveColumn { + display: block; } + .euiDescriptionList.euiDescriptionList--responsiveColumn .euiDescriptionList__title, + .euiDescriptionList.euiDescriptionList--responsiveColumn .euiDescriptionList__description { + width: 100%; + padding: 0; } + .euiDescriptionList.euiDescriptionList--responsiveColumn .euiDescriptionList__description { + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + margin-top: 0; } + .euiDescriptionList.euiDescriptionList--responsiveColumn.euiDescriptionList--center .euiDescriptionList__title, + .euiDescriptionList.euiDescriptionList--responsiveColumn.euiDescriptionList--center .euiDescriptionList__description { + text-align: center; } + .euiDescriptionList.euiDescriptionList--responsiveColumn.euiDescriptionList--reverse .euiDescriptionList__title { + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; } + .euiDescriptionList.euiDescriptionList--responsiveColumn.euiDescriptionList--reverse .euiDescriptionList__description { + color: #DFE5EF; + font-size: 16px; + font-size: 1.14286rem; + line-height: 1.71429rem; + font-weight: 700; } } + +.euiDescriptionList.euiDescriptionList--inline .euiDescriptionList__title { + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + display: inline; + border-radius: 6px; + font-weight: 400; + background: #25262E; + border: 1px solid #343741; + padding: 0 4px; + margin: 0 4px; } + .euiDescriptionList.euiDescriptionList--inline .euiDescriptionList__title:first-of-type { + margin-left: 0; } + +.euiDescriptionList.euiDescriptionList--inline .euiDescriptionList__description { + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + display: inline; + word-break: break-all; } + +.euiDescriptionList.euiDescriptionList--inline.euiDescriptionList--compressed .euiDescriptionList__title { + font-size: 12px; + font-size: 0.85714rem; + line-height: 1.14286rem; } + +.euiDescriptionList.euiDescriptionList--inline.euiDescriptionList--compressed .euiDescriptionList__description { + font-size: 12px; + font-size: 0.85714rem; + line-height: 1.14286rem; } + +.euiDescriptionList.euiDescriptionList--inline.euiDescriptionList--center { + text-align: center; } + +.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: .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(125, 222, 216, 0.1); } + .euiDroppable.euiDroppable--isDraggingType:not(.euiDroppable--isDisabled).euiDroppable--isDraggingOver { + background-color: rgba(125, 222, 216, 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.2), 0 2.6px 8px -1px rgba(0, 0, 0, 0.15), 0 5.7px 12px -1px rgba(0, 0, 0, 0.125), 0 15px 15px -1px rgba(0, 0, 0, 0.1); } + .euiDroppable--withPanel.euiDroppable--withPanel--hasBorder { + border: 1px solid #343741; + 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.25), 0 3.6px 13px rgba(0, 0, 0, 0.175), 0 8.4px 23px rgba(0, 0, 0, 0.15), 0 23px 35px rgba(0, 0, 0, 0.125); + -webkit-transform: translateY(-2px); + transform: translateY(-2px); + cursor: pointer; } + .euiDroppable--withPanel.euiDroppable--withPanel--borderRadiusNone { + border-radius: 0; } + .euiDroppable--withPanel.euiDroppable--withPanel--borderRadiusMedium { + border-radius: 4px; } + .euiDroppable--withPanel.euiDroppable--withPanel--transparent { + background-color: transparent; } + .euiDroppable--withPanel.euiDroppable--withPanel--plain { + background-color: #1D1E24; } + .euiDroppable--withPanel.euiDroppable--withPanel--subdued { + background-color: #141519; } + .euiDroppable--withPanel.euiDroppable--withPanel--accent { + background-color: #4a2b39; } + .euiDroppable--withPanel.euiDroppable--withPanel--primary { + background-color: #103148; } + .euiDroppable--withPanel.euiDroppable--withPanel--success { + background-color: #264341; } + .euiDroppable--withPanel.euiDroppable--withPanel--warning { + background-color: #493f22; } + .euiDroppable--withPanel.euiDroppable--withPanel--danger { + background-color: #4a201e; } + +.euiDroppable--withPanel { + box-shadow: 0 0.9px 4px -1px rgba(0, 0, 0, 0.2), 0 2.6px 8px -1px rgba(0, 0, 0, 0.15), 0 5.7px 12px -1px rgba(0, 0, 0, 0.125), 0 15px 15px -1px rgba(0, 0, 0, 0.1); + 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 { + max-width: 36em; + text-align: center; + padding: 24px; + margin: auto; } + +.euiErrorBoundary { + background: repeating-linear-gradient(45deg, rgba(248, 107, 99, 0.25), rgba(248, 107, 99, 0.25) 1px, rgba(248, 107, 99, 0.05) 1px, rgba(248, 107, 99, 0.05) 20px); + overflow: auto; + padding: 16px; } + +.euiErrorBoundary__text { + background-color: #1D1E24; + padding: 8px; } + +.euiErrorBoundary__stack { + white-space: pre-wrap; } + +/** + * 1. Keep each expression's text together as much as possible, + * but then wrap long words + */ +.euiExpression { + overflow-wrap: break-word !important; + word-wrap: break-word !important; + word-break: break-word; + /* 1 */ + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + font-family: "Roboto Mono", Consolas, Menlo, Courier, monospace; + letter-spacing: normal; + border-bottom: 2px solid transparent; + display: inline-block; + /* 1 */ + text-align: left; + padding: 2px 0; + transition: all 250ms ease-in-out; + color: #DFE5EF; } + .euiExpression:focus { + border-bottom-style: solid; } + .euiExpression + .euiExpression { + margin-left: 8px; } + .euiExpression.euiExpression--columns { + border-color: transparent; + border-bottom-style: solid; + margin-bottom: 4px; } + .euiExpression.euiExpression--truncate { + max-width: 100%; } + .euiExpression.euiExpression--truncate .euiExpression__description, + .euiExpression.euiExpression--truncate .euiExpression__value { + max-width: 100%; + overflow: hidden !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; + word-wrap: normal !important; + display: inline-block; + vertical-align: bottom; } + +.euiExpression-isUppercase .euiExpression__description { + text-transform: uppercase; } + +.euiExpression-isClickable { + cursor: pointer; + border-bottom: 2px dotted #343741; } + .euiExpression-isClickable:hover:not(:disabled) { + border-bottom-style: solid; + -webkit-transform: translateY(-1px); + transform: translateY(-1px); } + +.euiExpression__icon { + margin-left: 4px; } + +.euiExpression-isActive { + border-bottom-style: solid; } + +.euiExpression--columns { + width: 100%; + display: -webkit-flex; + display: flex; + padding: 4px; + border-radius: 4px; } + .euiExpression--columns.euiExpression-isClickable { + background-color: #25262E; } + .euiExpression--columns.euiExpression-isClickable:focus .euiExpression__description, + .euiExpression--columns.euiExpression-isClickable:focus .euiExpression__value, .euiExpression--columns.euiExpression-isClickable:hover:not(:disabled) .euiExpression__description, + .euiExpression--columns.euiExpression-isClickable:hover:not(:disabled) .euiExpression__value { + text-decoration: underline; } + .euiExpression--columns .euiExpression__description { + text-align: right; + margin-right: 8px; + -webkit-flex-shrink: 0; + flex-shrink: 0; } + .euiExpression--columns .euiExpression__value { + -webkit-flex-grow: 1; + flex-grow: 1; } + .euiExpression--columns .euiExpression__icon { + margin-top: 4px; } + +.euiExpression--subdued:focus { + background-color: rgba(122, 127, 137, 0.1); } + +.euiExpression--subdued.euiExpression-isActive { + border-bottom-color: #7a7f89; + border-color: #7a7f89; } + +.euiExpression--subdued .euiExpression__description { + color: #7a7f89; } + +.euiExpression--primary:focus { + background-color: rgba(54, 162, 239, 0.1); } + +.euiExpression--primary.euiExpression-isActive { + border-bottom-color: #36A2EF; + border-color: #36A2EF; } + +.euiExpression--primary .euiExpression__description { + color: #36A2EF; } + +.euiExpression--secondary:focus { + background-color: rgba(125, 222, 216, 0.1); } + +.euiExpression--secondary.euiExpression-isActive { + border-bottom-color: #7DDED8; + border-color: #7DDED8; } + +.euiExpression--secondary .euiExpression__description { + color: #7DDED8; } + +.euiExpression--warning:focus { + background-color: rgba(243, 211, 113, 0.1); } + +.euiExpression--warning.euiExpression-isActive { + border-bottom-color: #F3D371; + border-color: #F3D371; } + +.euiExpression--warning .euiExpression__description { + color: #F3D371; } + +.euiExpression--danger:focus { + background-color: rgba(248, 107, 99, 0.1); } + +.euiExpression--danger.euiExpression-isActive { + border-bottom-color: #F86B63; + border-color: #F86B63; } + +.euiExpression--danger .euiExpression__description { + color: #F86B63; } + +.euiExpression--accent:focus { + background-color: rgba(246, 143, 190, 0.1); } + +.euiExpression--accent.euiExpression-isActive { + border-bottom-color: #F68FBE; + border-color: #F68FBE; } + +.euiExpression--accent .euiExpression__description { + color: #F68FBE; } + +/** + * 1. Make sure the quantity doesn't get an underline on hover + */ +.euiFacetButton { + 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", -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.71429rem; + height: 32px; + text-align: left; + text-decoration: none; + transition: all 150ms ease-in; } + .euiFacetButton:hover:not(:disabled) .euiFacetButton__text, .euiFacetButton:focus:not(:disabled) .euiFacetButton__text { + text-decoration: underline; + /* 1 */ } + .euiFacetButton:focus { + background-color: rgba(54, 162, 239, 0.3); + box-shadow: -4px 0 rgba(54, 162, 239, 0.3), 4px 0 rgba(54, 162, 239, 0.3); } + .euiFacetButton:disabled { + color: #515761; + pointer-events: none; } + .euiFacetButton:disabled .euiFacetButton__content { + pointer-events: auto; + cursor: not-allowed; } + .euiFacetButton:disabled .euiFacetButton__icon, + .euiFacetButton:disabled .euiFacetButton__quantity { + opacity: .5; } + .euiFacetButton:disabled:focus { + background-color: transparent; } + .euiFacetButton:disabled:hover, .euiFacetButton:disabled:focus { + text-decoration: none; } + +.euiFacetButton__content { + height: 100%; + width: 100%; + vertical-align: middle; + display: -webkit-flex; + display: flex; + -webkit-justify-content: center; + justify-content: center; + -webkit-align-items: center; + align-items: center; } + .euiFacetButton__content .euiButtonContent__icon, + .euiFacetButton__content .euiButtonContent__spinner { + -webkit-flex-shrink: 0; + flex-shrink: 0; } + .euiFacetButton__content > * + * { + -webkit-margin-start: 8px; + margin-inline-start: 8px; } + +.euiFacetButton__text { + max-width: 100%; + overflow: hidden !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; + word-wrap: normal !important; + -webkit-flex-grow: 1; + flex-grow: 1; + vertical-align: middle; } + .euiFacetButton__text::after { + display: block; + content: attr(data-text); + font-weight: 700; + height: 0; + overflow: hidden; + visibility: hidden; } + .euiFacetButton--isSelected .euiFacetButton__text { + font-weight: 700; } + +.euiFacetButton__icon { + transition: all 150ms ease-in; } + +.euiFacetGroup--gutterNone .euiFacetButton { + margin-top: 0; + margin-bottom: 0; } + +.euiFacetGroup--gutterNone.euiFacetGroup--horizontal { + margin-left: -12px; } + .euiFacetGroup--gutterNone.euiFacetGroup--horizontal .euiFacetButton { + margin-left: 12px; + max-width: calc(100% - 12px); } + +.euiFacetGroup--gutterSmall .euiFacetButton { + margin-top: 2px; + margin-bottom: 2px; } + +.euiFacetGroup--gutterSmall.euiFacetGroup--horizontal { + margin-left: -16px; } + .euiFacetGroup--gutterSmall.euiFacetGroup--horizontal .euiFacetButton { + margin-left: 16px; + max-width: calc(100% - 16px); } + +.euiFacetGroup--gutterMedium .euiFacetButton { + margin-top: 4px; + margin-bottom: 4px; } + +.euiFacetGroup--gutterMedium.euiFacetGroup--horizontal { + margin-left: -20px; } + .euiFacetGroup--gutterMedium.euiFacetGroup--horizontal .euiFacetButton { + margin-left: 20px; + max-width: calc(100% - 20px); } + +.euiFacetGroup--gutterLarge .euiFacetButton { + margin-top: 6px; + margin-bottom: 6px; } + +.euiFacetGroup--gutterLarge.euiFacetGroup--horizontal { + margin-left: -24px; } + .euiFacetGroup--gutterLarge.euiFacetGroup--horizontal .euiFacetButton { + margin-left: 24px; + max-width: calc(100% - 24px); } + +.euiFilterGroup { + display: -webkit-inline-flex; + display: inline-flex; + max-width: 100%; + border-right: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.2), 0 3px 3px -2px rgba(0, 0, 0, 0.2); + overflow: hidden; } + .euiFilterGroup > * { + -webkit-flex: 1 1 auto; + flex: 1 1 auto; + min-width: 48px; } + .euiFilterGroup > .euiFilterButton--noGrow { + -webkit-flex-grow: 0; + flex-grow: 0; } + .euiFilterGroup > .euiFilterButton-hasNotification { + min-width: 96px; } + .euiFilterGroup > .euiFilterButton--hasIcon { + min-width: 128px; } + .euiFilterGroup .euiPopover__anchor { + display: block; } + .euiFilterGroup .euiPopover__anchor .euiFilterButton { + width: 100%; } + +.euiFilterGroup--fullWidth { + display: -webkit-flex; + display: flex; } + +.euiFilterGroup__popoverPanel { + width: 288px; } + +@media only screen and (max-width: 574px) { + .euiFilterGroup { + -webkit-flex-wrap: wrap; + flex-wrap: wrap; } } + +@media only screen and (min-width: 575px) and (max-width: 767px) { + .euiFilterGroup { + -webkit-flex-wrap: wrap; + flex-wrap: wrap; } } + +@media only screen and (max-width: 574px) { + .euiFilterGroup { + display: -webkit-flex; + display: flex; } + .euiFilterGroup .euiFilterButton { + -webkit-flex-grow: 1 !important; + flex-grow: 1 !important; } } + +.euiFilterButton { + background-color: #16171c; + height: 40px; + width: auto; + border: 1px solid rgba(255, 255, 255, 0.1); + border-right: none; + font-size: 14px; } + .euiFilterButton:disabled { + color: #515761; + pointer-events: none; } + .euiFilterButton:disabled .euiFilterButton__notification { + opacity: .5; } + .euiFilterButton:hover:not(:disabled), .euiFilterButton:focus:not(:disabled) { + text-decoration: none; } + .euiFilterButton:hover:not(:disabled) .euiFilterButton__textShift, .euiFilterButton:focus:not(:disabled) .euiFilterButton__textShift { + text-decoration: underline; } + +.euiFilterButton-hasActiveFilters { + font-weight: 700; } + +.euiFilterButton--hasIcon .euiButtonEmpty__content { + -webkit-justify-content: space-between; + justify-content: space-between; } + +.euiFilterButton--withNext + .euiFilterButton { + margin-left: -4px; + border-left: none; } + +.euiFilterButton-isSelected { + background-color: #25262E; } + +.euiFilterButton__text-hasNotification { + display: -webkit-flex; + display: flex; + -webkit-align-items: center; + align-items: center; } + +.euiFilterButton__notification { + margin-left: 8px; + vertical-align: text-bottom; } + +.euiFilterButton__textShift { + max-width: 100%; + overflow: hidden !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; + word-wrap: normal !important; + min-width: 48px; } + .euiFilterButton__textShift::after { + display: block; + content: attr(data-text); + font-weight: 700; + height: 0; + overflow: hidden; + visibility: hidden; } + +.euiFilterSelectItem { + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + padding: 4px 12px; + display: block; + width: 100%; + text-align: left; + color: #DFE5EF; + border-bottom: 1px solid #343741; + border-color: #202128; + outline-offset: -2px; } + .euiFilterSelectItem:hover { + cursor: pointer; + text-decoration: underline; } + .euiFilterSelectItem:focus { + cursor: pointer; + text-decoration: underline; + background-color: rgba(54, 162, 239, 0.3); } + .euiFilterSelectItem:disabled { + cursor: not-allowed; + text-decoration: none; + color: #515761; } + .euiFilterSelectItem:focus, .euiFilterSelectItem-isFocused { + background-color: rgba(54, 162, 239, 0.3); + color: #36A2EF; } + +.euiFilterSelectItem__content { + max-width: 100%; + overflow: hidden !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; + word-wrap: normal !important; } + +.euiFilterSelect__items { + scrollbar-width: thin; + overflow-y: auto; + max-height: 480px; } + .euiFilterSelect__items::-webkit-scrollbar { + width: 16px; + height: 16px; } + .euiFilterSelect__items::-webkit-scrollbar-thumb { + background-color: rgba(152, 162, 179, 0.5); + border: 6px solid transparent; + background-clip: content-box; } + .euiFilterSelect__items::-webkit-scrollbar-corner, .euiFilterSelect__items::-webkit-scrollbar-track { + background-color: transparent; } + +.euiFilterSelect__note { + height: 64px; + text-align: center; + display: -webkit-flex; + display: flex; + -webkit-align-items: center; + align-items: center; + -webkit-justify-content: space-around; + justify-content: space-around; } + +.euiFilterSelect__noteContent { + color: #98A2B3; + font-size: 14px; } + +/** + * 1. Not always needed, but fixes an IE11 issue when flex-groups are nested under display: flex elements. + * 2. IE requires a unit to grow. + */ +.euiFlexGroup { + display: -webkit-flex; + display: flex; + -webkit-align-items: stretch; + align-items: stretch; + -webkit-flex-grow: 1; + flex-grow: 1; + /* 1 */ } + .euiFlexGroup .euiFlexItem { + -webkit-flex-grow: 1; + flex-grow: 1; + -webkit-flex-basis: 0%; + flex-basis: 0%; + /* 2 */ } + @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { + .euiFlexGroup .euiFlexItem { + min-width: 1px; } } + +.euiFlexGroup--gutterExtraSmall { + margin: -2px; } + .euiFlexGroup--gutterExtraSmall > .euiFlexItem { + margin: 2px; } + +.euiFlexGroup--gutterSmall { + margin: -4px; } + .euiFlexGroup--gutterSmall > .euiFlexItem { + margin: 4px; } + +.euiFlexGroup--gutterMedium { + margin: -8px; } + .euiFlexGroup--gutterMedium > .euiFlexItem { + margin: 8px; } + +.euiFlexGroup--gutterLarge { + margin: -12px; } + .euiFlexGroup--gutterLarge > .euiFlexItem { + margin: 12px; } + +.euiFlexGroup--gutterExtraLarge { + margin: -20px; } + .euiFlexGroup--gutterExtraLarge > .euiFlexItem { + margin: 20px; } + +.euiFlexGroup--justifyContentSpaceEvenly { + -webkit-justify-content: space-evenly; + justify-content: space-evenly; } + +.euiFlexGroup--justifyContentSpaceBetween { + -webkit-justify-content: space-between; + justify-content: space-between; } + +.euiFlexGroup--justifyContentSpaceAround { + -webkit-justify-content: space-around; + justify-content: space-around; } + +.euiFlexGroup--justifyContentCenter { + -webkit-justify-content: center; + justify-content: center; } + +.euiFlexGroup--justifyContentFlexEnd { + -webkit-justify-content: flex-end; + justify-content: flex-end; } + +.euiFlexGroup--alignItemsFlexStart { + -webkit-align-items: flex-start; + align-items: flex-start; } + +.euiFlexGroup--alignItemsCenter { + -webkit-align-items: center; + align-items: center; } + +.euiFlexGroup--alignItemsFlexEnd { + -webkit-align-items: flex-end; + align-items: flex-end; } + +.euiFlexGroup--alignItemsBaseline { + -webkit-align-items: baseline; + align-items: baseline; } + +.euiFlexGroup--directionRow { + -webkit-flex-direction: row; + flex-direction: row; } + +.euiFlexGroup--directionRowReverse { + -webkit-flex-direction: row-reverse; + flex-direction: row-reverse; } + +.euiFlexGroup--directionColumn { + -webkit-flex-direction: column; + flex-direction: column; } + +.euiFlexGroup--directionColumnReverse { + -webkit-flex-direction: column-reverse; + flex-direction: column-reverse; } + +.euiFlexGroup--wrap { + -webkit-flex-wrap: wrap; + flex-wrap: wrap; } + +@media only screen and (max-width: 574px) { + .euiFlexGroup--responsive { + -webkit-flex-wrap: wrap; + flex-wrap: wrap; + margin-left: 0; + margin-right: 0; } } + +@media only screen and (min-width: 575px) and (max-width: 767px) { + .euiFlexGroup--responsive { + -webkit-flex-wrap: wrap; + flex-wrap: wrap; + margin-left: 0; + margin-right: 0; } } + +.euiFlexGrid { + display: -webkit-flex; + display: flex; + -webkit-flex-wrap: wrap; + flex-wrap: wrap; + margin-bottom: 0; } + .euiFlexGrid > .euiFlexItem { + -webkit-flex-grow: 0; + flex-grow: 0; } + .euiFlexGrid > .euiFlexItem.euiFlexItem--flexGrowZero { + -webkit-flex-grow: 0 !important; + flex-grow: 0 !important; + -webkit-flex-basis: auto !important; + flex-basis: auto !important; } + +/** + * 1. For vertical layouts we use columns instead of flex + */ +.euiFlexGrid--directionColumn { + display: block; + /* 1 */ + -webkit-column-gap: 0; + -moz-column-gap: 0; + column-gap: 0; } + .euiFlexGrid--directionColumn > .euiFlexItem { + display: inline-block; + /* 1 */ + line-height: initial; } + +/** + * Uncouple the gutter margin from the column widths to support cases where we use a FlexGrid + * without columns. + */ +.euiFlexGrid--gutterNone { + margin: 0px; + -webkit-align-items: stretch; + align-items: stretch; } + .euiFlexGrid--gutterNone > .euiFlexItem { + margin: 0px; } + +.euiFlexGrid--gutterNone.euiFlexGrid--fourths > .euiFlexItem { + -webkit-flex-basis: calc(25% - 0px); + flex-basis: calc(25% - 0px); } + +.euiFlexGrid--gutterNone.euiFlexGrid--fourths.euiFlexGrid--directionColumn { + /* 1 */ + -webkit-column-count: 4; + -moz-column-count: 4; + column-count: 4; } + .euiFlexGrid--gutterNone.euiFlexGrid--fourths.euiFlexGrid--directionColumn > .euiFlexItem { + width: calc(100% - 0px); } + +.euiFlexGrid--gutterNone.euiFlexGrid--thirds > .euiFlexItem { + -webkit-flex-basis: calc(33.3% - 0px); + flex-basis: calc(33.3% - 0px); } + +.euiFlexGrid--gutterNone.euiFlexGrid--thirds.euiFlexGrid--directionColumn { + /* 1 */ + -webkit-column-count: 3; + -moz-column-count: 3; + column-count: 3; } + .euiFlexGrid--gutterNone.euiFlexGrid--thirds.euiFlexGrid--directionColumn > .euiFlexItem { + width: calc(100% - 0px); } + +.euiFlexGrid--gutterNone.euiFlexGrid--halves > .euiFlexItem { + -webkit-flex-basis: calc(50% - 0px); + flex-basis: calc(50% - 0px); } + +.euiFlexGrid--gutterNone.euiFlexGrid--halves.euiFlexGrid--directionColumn { + /* 1 */ + -webkit-column-count: 2; + -moz-column-count: 2; + column-count: 2; } + .euiFlexGrid--gutterNone.euiFlexGrid--halves.euiFlexGrid--directionColumn > .euiFlexItem { + width: calc(100% - 0px); } + +.euiFlexGrid--gutterNone.euiFlexGrid--single > .euiFlexItem { + -webkit-flex-basis: calc(100% - 0px); + flex-basis: calc(100% - 0px); } + +.euiFlexGrid--gutterNone.euiFlexGrid--single.euiFlexGrid--directionColumn { + /* 1 */ + -webkit-column-count: 1; + -moz-column-count: 1; + column-count: 1; } + .euiFlexGrid--gutterNone.euiFlexGrid--single.euiFlexGrid--directionColumn > .euiFlexItem { + width: calc(100% - 0px); } + +/** + * Uncouple the gutter margin from the column widths to support cases where we use a FlexGrid + * without columns. + */ +.euiFlexGrid--gutterSmall { + margin: -4px; + -webkit-align-items: stretch; + align-items: stretch; } + .euiFlexGrid--gutterSmall > .euiFlexItem { + margin: 4px; } + +.euiFlexGrid--gutterSmall.euiFlexGrid--fourths > .euiFlexItem { + -webkit-flex-basis: calc(25% - 8px); + flex-basis: calc(25% - 8px); } + +.euiFlexGrid--gutterSmall.euiFlexGrid--fourths.euiFlexGrid--directionColumn { + /* 1 */ + -webkit-column-count: 4; + -moz-column-count: 4; + column-count: 4; } + .euiFlexGrid--gutterSmall.euiFlexGrid--fourths.euiFlexGrid--directionColumn > .euiFlexItem { + width: calc(100% - 8px); } + +.euiFlexGrid--gutterSmall.euiFlexGrid--thirds > .euiFlexItem { + -webkit-flex-basis: calc(33.3% - 8px); + flex-basis: calc(33.3% - 8px); } + +.euiFlexGrid--gutterSmall.euiFlexGrid--thirds.euiFlexGrid--directionColumn { + /* 1 */ + -webkit-column-count: 3; + -moz-column-count: 3; + column-count: 3; } + .euiFlexGrid--gutterSmall.euiFlexGrid--thirds.euiFlexGrid--directionColumn > .euiFlexItem { + width: calc(100% - 8px); } + +.euiFlexGrid--gutterSmall.euiFlexGrid--halves > .euiFlexItem { + -webkit-flex-basis: calc(50% - 8px); + flex-basis: calc(50% - 8px); } + +.euiFlexGrid--gutterSmall.euiFlexGrid--halves.euiFlexGrid--directionColumn { + /* 1 */ + -webkit-column-count: 2; + -moz-column-count: 2; + column-count: 2; } + .euiFlexGrid--gutterSmall.euiFlexGrid--halves.euiFlexGrid--directionColumn > .euiFlexItem { + width: calc(100% - 8px); } + +.euiFlexGrid--gutterSmall.euiFlexGrid--single > .euiFlexItem { + -webkit-flex-basis: calc(100% - 8px); + flex-basis: calc(100% - 8px); } + +.euiFlexGrid--gutterSmall.euiFlexGrid--single.euiFlexGrid--directionColumn { + /* 1 */ + -webkit-column-count: 1; + -moz-column-count: 1; + column-count: 1; } + .euiFlexGrid--gutterSmall.euiFlexGrid--single.euiFlexGrid--directionColumn > .euiFlexItem { + width: calc(100% - 8px); } + +/** + * Uncouple the gutter margin from the column widths to support cases where we use a FlexGrid + * without columns. + */ +.euiFlexGrid--gutterMedium { + margin: -8px; + -webkit-align-items: stretch; + align-items: stretch; } + .euiFlexGrid--gutterMedium > .euiFlexItem { + margin: 8px; } + +.euiFlexGrid--gutterMedium.euiFlexGrid--fourths > .euiFlexItem { + -webkit-flex-basis: calc(25% - 16px); + flex-basis: calc(25% - 16px); } + +.euiFlexGrid--gutterMedium.euiFlexGrid--fourths.euiFlexGrid--directionColumn { + /* 1 */ + -webkit-column-count: 4; + -moz-column-count: 4; + column-count: 4; } + .euiFlexGrid--gutterMedium.euiFlexGrid--fourths.euiFlexGrid--directionColumn > .euiFlexItem { + width: calc(100% - 16px); } + +.euiFlexGrid--gutterMedium.euiFlexGrid--thirds > .euiFlexItem { + -webkit-flex-basis: calc(33.3% - 16px); + flex-basis: calc(33.3% - 16px); } + +.euiFlexGrid--gutterMedium.euiFlexGrid--thirds.euiFlexGrid--directionColumn { + /* 1 */ + -webkit-column-count: 3; + -moz-column-count: 3; + column-count: 3; } + .euiFlexGrid--gutterMedium.euiFlexGrid--thirds.euiFlexGrid--directionColumn > .euiFlexItem { + width: calc(100% - 16px); } + +.euiFlexGrid--gutterMedium.euiFlexGrid--halves > .euiFlexItem { + -webkit-flex-basis: calc(50% - 16px); + flex-basis: calc(50% - 16px); } + +.euiFlexGrid--gutterMedium.euiFlexGrid--halves.euiFlexGrid--directionColumn { + /* 1 */ + -webkit-column-count: 2; + -moz-column-count: 2; + column-count: 2; } + .euiFlexGrid--gutterMedium.euiFlexGrid--halves.euiFlexGrid--directionColumn > .euiFlexItem { + width: calc(100% - 16px); } + +.euiFlexGrid--gutterMedium.euiFlexGrid--single > .euiFlexItem { + -webkit-flex-basis: calc(100% - 16px); + flex-basis: calc(100% - 16px); } + +.euiFlexGrid--gutterMedium.euiFlexGrid--single.euiFlexGrid--directionColumn { + /* 1 */ + -webkit-column-count: 1; + -moz-column-count: 1; + column-count: 1; } + .euiFlexGrid--gutterMedium.euiFlexGrid--single.euiFlexGrid--directionColumn > .euiFlexItem { + width: calc(100% - 16px); } + +/** + * Uncouple the gutter margin from the column widths to support cases where we use a FlexGrid + * without columns. + */ +.euiFlexGrid--gutterLarge { + margin: -12px; + -webkit-align-items: stretch; + align-items: stretch; } + .euiFlexGrid--gutterLarge > .euiFlexItem { + margin: 12px; } + +.euiFlexGrid--gutterLarge.euiFlexGrid--fourths > .euiFlexItem { + -webkit-flex-basis: calc(25% - 24px); + flex-basis: calc(25% - 24px); } + +.euiFlexGrid--gutterLarge.euiFlexGrid--fourths.euiFlexGrid--directionColumn { + /* 1 */ + -webkit-column-count: 4; + -moz-column-count: 4; + column-count: 4; } + .euiFlexGrid--gutterLarge.euiFlexGrid--fourths.euiFlexGrid--directionColumn > .euiFlexItem { + width: calc(100% - 24px); } + +.euiFlexGrid--gutterLarge.euiFlexGrid--thirds > .euiFlexItem { + -webkit-flex-basis: calc(33.3% - 24px); + flex-basis: calc(33.3% - 24px); } + +.euiFlexGrid--gutterLarge.euiFlexGrid--thirds.euiFlexGrid--directionColumn { + /* 1 */ + -webkit-column-count: 3; + -moz-column-count: 3; + column-count: 3; } + .euiFlexGrid--gutterLarge.euiFlexGrid--thirds.euiFlexGrid--directionColumn > .euiFlexItem { + width: calc(100% - 24px); } + +.euiFlexGrid--gutterLarge.euiFlexGrid--halves > .euiFlexItem { + -webkit-flex-basis: calc(50% - 24px); + flex-basis: calc(50% - 24px); } + +.euiFlexGrid--gutterLarge.euiFlexGrid--halves.euiFlexGrid--directionColumn { + /* 1 */ + -webkit-column-count: 2; + -moz-column-count: 2; + column-count: 2; } + .euiFlexGrid--gutterLarge.euiFlexGrid--halves.euiFlexGrid--directionColumn > .euiFlexItem { + width: calc(100% - 24px); } + +.euiFlexGrid--gutterLarge.euiFlexGrid--single > .euiFlexItem { + -webkit-flex-basis: calc(100% - 24px); + flex-basis: calc(100% - 24px); } + +.euiFlexGrid--gutterLarge.euiFlexGrid--single.euiFlexGrid--directionColumn { + /* 1 */ + -webkit-column-count: 1; + -moz-column-count: 1; + column-count: 1; } + .euiFlexGrid--gutterLarge.euiFlexGrid--single.euiFlexGrid--directionColumn > .euiFlexItem { + width: calc(100% - 24px); } + +/** + * Uncouple the gutter margin from the column widths to support cases where we use a FlexGrid + * without columns. + */ +.euiFlexGrid--gutterXLarge { + margin: -16px; + -webkit-align-items: stretch; + align-items: stretch; } + .euiFlexGrid--gutterXLarge > .euiFlexItem { + margin: 16px; } + +.euiFlexGrid--gutterXLarge.euiFlexGrid--fourths > .euiFlexItem { + -webkit-flex-basis: calc(25% - 32px); + flex-basis: calc(25% - 32px); } + +.euiFlexGrid--gutterXLarge.euiFlexGrid--fourths.euiFlexGrid--directionColumn { + /* 1 */ + -webkit-column-count: 4; + -moz-column-count: 4; + column-count: 4; } + .euiFlexGrid--gutterXLarge.euiFlexGrid--fourths.euiFlexGrid--directionColumn > .euiFlexItem { + width: calc(100% - 32px); } + +.euiFlexGrid--gutterXLarge.euiFlexGrid--thirds > .euiFlexItem { + -webkit-flex-basis: calc(33.3% - 32px); + flex-basis: calc(33.3% - 32px); } + +.euiFlexGrid--gutterXLarge.euiFlexGrid--thirds.euiFlexGrid--directionColumn { + /* 1 */ + -webkit-column-count: 3; + -moz-column-count: 3; + column-count: 3; } + .euiFlexGrid--gutterXLarge.euiFlexGrid--thirds.euiFlexGrid--directionColumn > .euiFlexItem { + width: calc(100% - 32px); } + +.euiFlexGrid--gutterXLarge.euiFlexGrid--halves > .euiFlexItem { + -webkit-flex-basis: calc(50% - 32px); + flex-basis: calc(50% - 32px); } + +.euiFlexGrid--gutterXLarge.euiFlexGrid--halves.euiFlexGrid--directionColumn { + /* 1 */ + -webkit-column-count: 2; + -moz-column-count: 2; + column-count: 2; } + .euiFlexGrid--gutterXLarge.euiFlexGrid--halves.euiFlexGrid--directionColumn > .euiFlexItem { + width: calc(100% - 32px); } + +.euiFlexGrid--gutterXLarge.euiFlexGrid--single > .euiFlexItem { + -webkit-flex-basis: calc(100% - 32px); + flex-basis: calc(100% - 32px); } + +.euiFlexGrid--gutterXLarge.euiFlexGrid--single.euiFlexGrid--directionColumn { + /* 1 */ + -webkit-column-count: 1; + -moz-column-count: 1; + column-count: 1; } + .euiFlexGrid--gutterXLarge.euiFlexGrid--single.euiFlexGrid--directionColumn > .euiFlexItem { + width: calc(100% - 32px); } + +@media only screen and (max-width: 574px) { + .euiFlexGrid.euiFlexGrid--responsive { + margin-left: 0 !important; + margin-right: 0 !important; + -webkit-column-count: 1 !important; + -moz-column-count: 1 !important; + column-count: 1 !important; } } + +@media only screen and (min-width: 575px) and (max-width: 767px) { + .euiFlexGrid.euiFlexGrid--responsive { + margin-left: 0 !important; + margin-right: 0 !important; + -webkit-column-count: 1 !important; + -moz-column-count: 1 !important; + column-count: 1 !important; } } + +/** + * 1. Allow EuiPanels to expand to fill the item. + * 2. IE11 hack forces inner content of flex items to respect a higher parent's width (mostly) and + * not cause weird wrapping issues. + */ +.euiFlexItem { + display: -webkit-flex; + display: flex; + /* 1 */ + -webkit-flex-direction: column; + flex-direction: column; + /* 1 */ + /* + * 1. We need the extra specificity here to override the FlexGroup > FlexItem styles. + * 2. FlexItem can be manually set to not grow if needed. + */ } + @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { + .euiFlexItem { + min-width: 1px; + /* 2 */ } } + .euiFlexItem.euiFlexItem--flexGrowZero { + /* 1 */ + -webkit-flex-grow: 0; + flex-grow: 0; + /* 2 */ + -webkit-flex-basis: auto; + flex-basis: auto; + /* 2 */ } + .euiFlexItem.euiFlexItem--flexGrow1 { + -webkit-flex-grow: 1; + flex-grow: 1; } + .euiFlexItem.euiFlexItem--flexGrow2 { + -webkit-flex-grow: 2; + flex-grow: 2; } + .euiFlexItem.euiFlexItem--flexGrow3 { + -webkit-flex-grow: 3; + flex-grow: 3; } + .euiFlexItem.euiFlexItem--flexGrow4 { + -webkit-flex-grow: 4; + flex-grow: 4; } + .euiFlexItem.euiFlexItem--flexGrow5 { + -webkit-flex-grow: 5; + flex-grow: 5; } + .euiFlexItem.euiFlexItem--flexGrow6 { + -webkit-flex-grow: 6; + flex-grow: 6; } + .euiFlexItem.euiFlexItem--flexGrow7 { + -webkit-flex-grow: 7; + flex-grow: 7; } + .euiFlexItem.euiFlexItem--flexGrow8 { + -webkit-flex-grow: 8; + flex-grow: 8; } + .euiFlexItem.euiFlexItem--flexGrow9 { + -webkit-flex-grow: 9; + flex-grow: 9; } + .euiFlexItem.euiFlexItem--flexGrow10 { + -webkit-flex-grow: 10; + flex-grow: 10; } + +@media only screen and (max-width: 574px) { + .euiFlexGroup--responsive > .euiFlexItem, + .euiFlexGrid--responsive > .euiFlexItem { + width: 100% !important; + -webkit-flex-basis: 100% !important; + flex-basis: 100% !important; + margin-left: 0 !important; + margin-right: 0 !important; + margin-bottom: 16px !important; } } + +@media only screen and (min-width: 575px) and (max-width: 767px) { + .euiFlexGroup--responsive > .euiFlexItem, + .euiFlexGrid--responsive > .euiFlexItem { + width: 100% !important; + -webkit-flex-basis: 100% !important; + flex-basis: 100% !important; + margin-left: 0 !important; + margin-right: 0 !important; + margin-bottom: 16px !important; } } + +.euiFlyout { + border-left: none; + box-shadow: 0 2.7px 9px rgba(0, 0, 0, 0.325), 0 9.4px 24px rgba(0, 0, 0, 0.225), 0 21.8px 43px rgba(0, 0, 0, 0.2); + position: fixed; + top: 0; + bottom: 0; + right: 0; + height: 100%; + z-index: 1000; + background: #1D1E24; + display: -webkit-flex; + display: flex; + -webkit-flex-direction: column; + flex-direction: column; + -webkit-align-items: stretch; + align-items: stretch; + -webkit-clip-path: polygon(-50% 0, 100% 0, 100% 100%, -50% 100%); + clip-path: polygon(-50% 0, 100% 0, 100% 100%, -50% 100%); + -webkit-animation: euiFlyout 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); + animation: euiFlyout 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } + .euiFlyout:focus { + outline: none; } + +.euiFlyout__closeButton { + background-color: rgba(29, 30, 36, 0.9); + position: absolute; + right: 8px; + top: 8px; + z-index: 3; } + .euiFlyout__closeButton--outside { + box-shadow: 0 2.7px 9px rgba(0, 0, 0, 0.325), 0 9.4px 24px rgba(0, 0, 0, 0.225), 0 21.8px 43px rgba(0, 0, 0, 0.2); + right: auto; + left: 0; + -webkit-transform: translateX(calc(-100% - 24px)) !important; + transform: translateX(calc(-100% - 24px)) !important; + -webkit-animation: none !important; + animation: none !important; } + .euiFlyout--left .euiFlyout__closeButton--outside { + left: auto; + right: 0; + -webkit-transform: translateX(calc(100% + 24px)) !important; + transform: translateX(calc(100% + 24px)) !important; } + +.euiFlyoutBody__banner { + overflow-x: hidden; } + +/** + * 1. Calculating the minimum width based on the screen takeover breakpoint + */ +.euiFlyout--small { + min-width: 384px; + width: 25vw; } + .euiFlyout--small.euiFlyout--maxWidth-default { + max-width: 403px; } + +.euiFlyout--medium { + min-width: 424px; + width: 50vw; } + .euiFlyout--medium.euiFlyout--maxWidth-default { + max-width: 768px; } + +.euiFlyout--large { + min-width: 691px; + width: 75vw; } + .euiFlyout--large.euiFlyout--maxWidth-default { + max-width: 992px; } + +.euiFlyout--paddingNone .euiFlyoutHeader { + padding: 0 0 0; } + +.euiFlyout--paddingNone .euiFlyoutHeader--hasBorder { + padding-bottom: 0; } + +.euiFlyout--paddingNone .euiFlyoutBody__overflowContent { + padding: 0; } + +.euiFlyout--paddingNone .euiFlyoutBody__banner .euiCallOut { + padding-left: 0; + padding-right: 0; } + +.euiFlyout--paddingNone .euiFlyoutFooter { + padding: 0; } + +.euiFlyout--paddingSmall .euiFlyoutHeader { + padding: 8px 8px 0; } + +.euiFlyout--paddingSmall .euiFlyoutHeader--hasBorder { + padding-bottom: 8px; } + +.euiFlyout--paddingSmall .euiFlyoutBody__overflowContent { + padding: 8px; } + +.euiFlyout--paddingSmall .euiFlyoutBody__banner .euiCallOut { + padding-left: 8px; + padding-right: 8px; } + +.euiFlyout--paddingSmall .euiFlyoutFooter { + padding: 8px; } + +.euiFlyout--paddingMedium .euiFlyoutHeader { + padding: 16px 16px 0; } + +.euiFlyout--paddingMedium .euiFlyoutHeader--hasBorder { + padding-bottom: 16px; } + +.euiFlyout--paddingMedium .euiFlyoutBody__overflowContent { + padding: 16px; } + +.euiFlyout--paddingMedium .euiFlyoutBody__banner .euiCallOut { + padding-left: 16px; + padding-right: 16px; } + +.euiFlyout--paddingMedium .euiFlyoutFooter { + padding: 12px 16px; } + +.euiFlyout--paddingLarge .euiFlyoutHeader { + padding: 24px 24px 0; } + +.euiFlyout--paddingLarge .euiFlyoutHeader--hasBorder { + padding-bottom: 24px; } + +.euiFlyout--paddingLarge .euiFlyoutBody__overflowContent { + padding: 24px; } + +.euiFlyout--paddingLarge .euiFlyoutBody__banner .euiCallOut { + padding-left: 24px; + padding-right: 24px; } + +.euiFlyout--paddingLarge .euiFlyoutFooter { + padding: 16px 24px; } + +@-webkit-keyframes euiFlyout { + 0% { + opacity: 0; + -webkit-transform: translateX(100%); + transform: translateX(100%); } + 75% { + opacity: 1; + -webkit-transform: translateX(0%); + transform: translateX(0%); } } + +@keyframes euiFlyout { + 0% { + opacity: 0; + -webkit-transform: translateX(100%); + transform: translateX(100%); } + 75% { + opacity: 1; + -webkit-transform: translateX(0%); + transform: translateX(0%); } } + +/** + * 1. Leave only a small sliver exposed on small screens so users understand that this is not a new page + * 2. If a custom maxWidth is set, we need to override it. + */ +@media only screen and (max-width: 574px) { + .euiFlyout { + max-width: 90vw !important; + /* 1, 2 */ } + .euiFlyout--small { + min-width: 0; + width: 384px; } + .euiFlyout--medium { + min-width: 0; + width: 424px; } + .euiFlyout--large { + min-width: 0; + width: 691px; } + .euiFlyout__closeButton--outside { + -webkit-transform: translateX(calc(-100% - 4px)) !important; + transform: translateX(calc(-100% - 4px)) !important; } + .euiFlyout--left .euiFlyout__closeButton--outside { + -webkit-transform: translateX(calc(100% + 4px)) !important; + transform: translateX(calc(100% + 4px)) !important; } } + +@media only screen and (min-width: 575px) and (max-width: 767px) { + .euiFlyout { + max-width: 90vw !important; + /* 1, 2 */ } + .euiFlyout--small { + min-width: 0; + width: 384px; } + .euiFlyout--medium { + min-width: 0; + width: 424px; } + .euiFlyout--large { + min-width: 0; + width: 691px; } + .euiFlyout__closeButton--outside { + -webkit-transform: translateX(calc(-100% - 4px)) !important; + transform: translateX(calc(-100% - 4px)) !important; } + .euiFlyout--left .euiFlyout__closeButton--outside { + -webkit-transform: translateX(calc(100% + 4px)) !important; + transform: translateX(calc(100% + 4px)) !important; } } + +/** + * Left side flyout (should only be used for navigation) + */ +.euiFlyout--left { + border-right: none; + border-left: none; + right: auto; + left: 0; + -webkit-clip-path: polygon(0 0, 150% 0, 150% 100%, 0 100%); + clip-path: polygon(0 0, 150% 0, 150% 100%, 0 100%); + -webkit-animation-name: euiFlyoutLeft; + animation-name: euiFlyoutLeft; } + +@-webkit-keyframes euiFlyoutLeft { + 0% { + opacity: 0; + -webkit-transform: translateX(-100%); + transform: translateX(-100%); } + 75% { + opacity: 1; + -webkit-transform: translateX(0%); + transform: translateX(0%); } } + +@keyframes euiFlyoutLeft { + 0% { + opacity: 0; + -webkit-transform: translateX(-100%); + transform: translateX(-100%); } + 75% { + opacity: 1; + -webkit-transform: translateX(0%); + transform: translateX(0%); } } + +/** + * Pushed style (inside body) + */ +.euiFlyout.euiFlyout--push { + box-shadow: none; + -webkit-clip-path: none; + clip-path: none; + -webkit-animation-duration: 0s; + animation-duration: 0s; + border-left: 2px solid #343741; + z-index: 999; } + .euiFlyout.euiFlyout--push.euiFlyout--left { + border-left: none; + border-right: 2px solid #343741; } + +.euiFlyoutBody { + -webkit-flex-grow: 1; + flex-grow: 1; + overflow-y: hidden; + height: 100%; } + .euiFlyoutBody .euiFlyoutBody__overflow { + 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%); } + .euiFlyoutBody .euiFlyoutBody__overflow::-webkit-scrollbar { + width: 16px; + height: 16px; } + .euiFlyoutBody .euiFlyoutBody__overflow::-webkit-scrollbar-thumb { + background-color: rgba(152, 162, 179, 0.5); + border: 6px solid transparent; + background-clip: content-box; } + .euiFlyoutBody .euiFlyoutBody__overflow::-webkit-scrollbar-corner, .euiFlyoutBody .euiFlyoutBody__overflow::-webkit-scrollbar-track { + background-color: transparent; } + .euiFlyoutBody .euiFlyoutBody__overflow:focus { + outline: none; + /* 1 */ } + .euiFlyoutBody .euiFlyoutBody__overflow[tabindex='0']:focus:focus-visible { + outline-style: auto; + /* 2 */ } + .euiFlyoutBody .euiFlyoutBody__overflow.euiFlyoutBody__overflow--hasBanner { + -webkit-mask-image: linear-gradient(to bottom, red calc(100% - 7.5px), rgba(255, 0, 0, 0.1) 100%); + mask-image: linear-gradient(to bottom, red calc(100% - 7.5px), rgba(255, 0, 0, 0.1) 100%); } + .euiFlyoutBody .euiFlyoutBody__banner .euiCallOut { + border: none; + border-radius: 0; } + +.euiFlyoutFooter { + background: #25262E; + -webkit-flex-grow: 0; + flex-grow: 0; } + +.euiFlyoutHeader { + -webkit-flex-grow: 0; + flex-grow: 0; } + +.euiFlyoutHeader--hasBorder { + border-bottom: 1px solid #343741; } + +.euiCheckbox { + position: relative; + /** + * 1. Float above the visual radio and match its dimension, so that when users try to click it + * they actually click this input. + */ } + .euiCheckbox .euiCheckbox__input { + position: absolute; + left: -10000px; + top: auto; + width: 1px; + height: 1px; + overflow: hidden; } + .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 #66676d; + background: #1D1E24 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: #36A2EF; + background-color: #36A2EF; + 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%2829, 30, 36%29' stroke-linecap='round' stroke-width='1.5' transform='translate(.5 1)'/%3E%3C/svg%3E"); } + .euiCheckbox .euiCheckbox__input:indeterminate + .euiCheckbox__square { + border-color: #36A2EF; + background-color: #36A2EF; + 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%2829, 30, 36%29' fill-rule='evenodd'/%3E%3C/svg%3E"); } + .euiCheckbox .euiCheckbox__input[disabled] { + cursor: not-allowed !important; } + .euiCheckbox .euiCheckbox__input[disabled] ~ .euiCheckbox__label { + color: #535966; + cursor: not-allowed !important; } + .euiCheckbox .euiCheckbox__input[disabled] + .euiCheckbox__square { + border-color: #343741; + background-color: #343741; + box-shadow: none; } + .euiCheckbox .euiCheckbox__input:checked[disabled] + .euiCheckbox__square { + border-color: #343741; + background-color: #343741; + 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%28166, 170, 176%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: #343741; + background-color: #343741; + 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%28166, 170, 176%29' fill-rule='evenodd' transform='translate(-5 -8)'/%3E%3C/svg%3E"); } + .euiCheckbox .euiCheckbox__input:focus + .euiCheckbox__square, .euiCheckbox .euiCheckbox__input:active:not(:disabled) + .euiCheckbox__square { + outline: 2px solid currentColor; + outline-offset: 2px; + border-color: #36A2EF; } + .euiCheckbox .euiCheckbox__input:focus + .euiCheckbox__square:focus-visible, .euiCheckbox .euiCheckbox__input:active:not(:disabled) + .euiCheckbox__square:focus-visible { + outline-style: auto; } + .euiCheckbox .euiCheckbox__input:focus + .euiCheckbox__square:not(:focus-visible), .euiCheckbox .euiCheckbox__input:active:not(:disabled) + .euiCheckbox__square:not(:focus-visible) { + outline: none; } + .euiCheckbox.euiCheckbox--inList, .euiCheckbox.euiCheckbox--noLabel { + min-height: 16px; + min-width: 16px; } + .euiCheckbox.euiCheckbox--inList .euiCheckbox__square, .euiCheckbox.euiCheckbox--noLabel .euiCheckbox__square { + top: 0; } + .euiCheckbox.euiCheckbox--inList .euiCheckbox__input, .euiCheckbox.euiCheckbox--noLabel .euiCheckbox__input { + width: 16px; + height: 16px; + /* 1 */ + position: absolute; + /* 1 */ + opacity: 0; + /* 1 */ + z-index: 1; + /* 1 */ + margin: 0; + /* 1 */ + left: 0; + /* 1 */ + cursor: pointer; } + +.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__fieldPadding--xxxsmall { + padding-top: 8px; } + .euiDescribedFormGroup .euiDescribedFormGroup__fieldPadding--xxsmall { + padding-top: 11px; } + .euiDescribedFormGroup .euiDescribedFormGroup__fieldPadding--xsmall { + padding-top: 11px; } + .euiDescribedFormGroup .euiDescribedFormGroup__fieldPadding--small { + padding-top: 23px; } + .euiDescribedFormGroup .euiDescribedFormGroup__fieldPadding--medium { + padding-top: 30.5px; } + .euiDescribedFormGroup .euiDescribedFormGroup__fieldPadding--large { + padding-top: 41px; } + @media only screen and (max-width: 574px) { + .euiDescribedFormGroup .euiDescribedFormGroup__fields { + padding-top: 0; } + .euiDescribedFormGroup .euiDescribedFormGroup__fields > .euiFormRow--hasEmptyLabelSpace:first-child { + padding-top: 0; } } + @media only screen and (min-width: 575px) and (max-width: 767px) { + .euiDescribedFormGroup .euiDescribedFormGroup__fields { + padding-top: 0; } + .euiDescribedFormGroup .euiDescribedFormGroup__fields > .euiFormRow--hasEmptyLabelSpace:first-child { + padding-top: 0; } } + +.euiFieldNumber { + max-width: 400px; + width: 100%; + height: 40px; + background-color: #16171c; + background-repeat: no-repeat; + background-size: 0% 100%; + box-shadow: 0 0 transparent, inset 0 0 0 1px rgba(255, 255, 255, 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", -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: #DFE5EF; + 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; } } + @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { + .euiFieldNumber { + line-height: 1em; } } + .euiFieldNumber::-webkit-input-placeholder { + color: #81858f; + opacity: 1; } + .euiFieldNumber::-moz-placeholder { + color: #81858f; + opacity: 1; } + .euiFieldNumber::placeholder { + color: #81858f; + opacity: 1; } + .euiFieldNumber:invalid { + background-image: linear-gradient(to top, #F86B63, #F86B63 2px, transparent 2px, transparent 100%); + background-size: 100%; } + .euiFieldNumber:focus { + background-color: #111216; + background-image: linear-gradient(to top, #36A2EF, #36A2EF 2px, transparent 2px, transparent 100%); + background-size: 100% 100%; + outline: none; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } + .euiFieldNumber:disabled { + cursor: not-allowed; + color: #535966; + -webkit-text-fill-color: #535966; + background: #202128; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } + .euiFieldNumber:disabled::-webkit-input-placeholder { + color: #535966; + opacity: 1; } + .euiFieldNumber:disabled::-moz-placeholder { + color: #535966; + opacity: 1; } + .euiFieldNumber:disabled::placeholder { + color: #535966; + opacity: 1; } + .euiFieldNumber[readOnly] { + cursor: default; + background: #1D1E24; + border-color: transparent; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } + .euiFieldNumber:-webkit-autofill { + -webkit-text-fill-color: #343741; } + .euiFieldNumber:-webkit-autofill ~ .euiFormControlLayoutIcons { + color: #343741; } + .euiFieldNumber--compressed { + background-color: #16171c; + background-repeat: no-repeat; + background-size: 0% 100%; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 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, #F86B63, #F86B63 2px, transparent 2px, transparent 100%); + background-size: 100%; } + .euiFieldNumber--compressed:focus { + background-color: #111216; + background-image: linear-gradient(to top, #36A2EF, #36A2EF 2px, transparent 2px, transparent 100%); + background-size: 100% 100%; + outline: none; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } + .euiFieldNumber--compressed:disabled { + cursor: not-allowed; + color: #535966; + -webkit-text-fill-color: #535966; + background: #202128; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } + .euiFieldNumber--compressed:disabled::-webkit-input-placeholder { + color: #535966; + opacity: 1; } + .euiFieldNumber--compressed:disabled::-moz-placeholder { + color: #535966; + opacity: 1; } + .euiFieldNumber--compressed:disabled::placeholder { + color: #535966; + opacity: 1; } + .euiFieldNumber--compressed[readOnly] { + cursor: default; + background: #1D1E24; + border-color: transparent; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } + .euiFieldNumber--inGroup { + box-shadow: none !important; + border-radius: 0; } + .euiFieldNumber--withIcon { + padding-left: 40px; } + .euiFieldNumber-isLoading { + padding-right: 40px; } + .euiFieldNumber-isLoading.euiFieldNumber--compressed { + padding-right: 32px; } + +.euiFieldNumber--withIcon.euiFieldNumber--compressed { + padding-left: 32px; } + +.euiFieldPassword { + max-width: 400px; + width: 100%; + height: 40px; + background-color: #16171c; + background-repeat: no-repeat; + background-size: 0% 100%; + box-shadow: 0 0 transparent, inset 0 0 0 1px rgba(255, 255, 255, 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", -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: #DFE5EF; + 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; } } + @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { + .euiFieldPassword { + line-height: 1em; } } + .euiFieldPassword::-webkit-input-placeholder { + color: #81858f; + opacity: 1; } + .euiFieldPassword::-moz-placeholder { + color: #81858f; + opacity: 1; } + .euiFieldPassword::placeholder { + color: #81858f; + opacity: 1; } + .euiFieldPassword:invalid { + background-image: linear-gradient(to top, #F86B63, #F86B63 2px, transparent 2px, transparent 100%); + background-size: 100%; } + .euiFieldPassword:focus { + background-color: #111216; + background-image: linear-gradient(to top, #36A2EF, #36A2EF 2px, transparent 2px, transparent 100%); + background-size: 100% 100%; + outline: none; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } + .euiFieldPassword:disabled { + cursor: not-allowed; + color: #535966; + -webkit-text-fill-color: #535966; + background: #202128; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } + .euiFieldPassword:disabled::-webkit-input-placeholder { + color: #535966; + opacity: 1; } + .euiFieldPassword:disabled::-moz-placeholder { + color: #535966; + opacity: 1; } + .euiFieldPassword:disabled::placeholder { + color: #535966; + opacity: 1; } + .euiFieldPassword[readOnly] { + cursor: default; + background: #1D1E24; + border-color: transparent; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } + .euiFieldPassword:-webkit-autofill { + -webkit-text-fill-color: #343741; } + .euiFieldPassword:-webkit-autofill ~ .euiFormControlLayoutIcons { + color: #343741; } + .euiFieldPassword--compressed { + background-color: #16171c; + background-repeat: no-repeat; + background-size: 0% 100%; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 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, #F86B63, #F86B63 2px, transparent 2px, transparent 100%); + background-size: 100%; } + .euiFieldPassword--compressed:focus { + background-color: #111216; + background-image: linear-gradient(to top, #36A2EF, #36A2EF 2px, transparent 2px, transparent 100%); + background-size: 100% 100%; + outline: none; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } + .euiFieldPassword--compressed:disabled { + cursor: not-allowed; + color: #535966; + -webkit-text-fill-color: #535966; + background: #202128; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } + .euiFieldPassword--compressed:disabled::-webkit-input-placeholder { + color: #535966; + opacity: 1; } + .euiFieldPassword--compressed:disabled::-moz-placeholder { + color: #535966; + opacity: 1; } + .euiFieldPassword--compressed:disabled::placeholder { + color: #535966; + opacity: 1; } + .euiFieldPassword--compressed[readOnly] { + cursor: default; + background: #1D1E24; + border-color: transparent; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } + .euiFieldPassword--inGroup { + box-shadow: none !important; + border-radius: 0; } + .euiFieldPassword-isLoading { + padding-right: 40px; } + .euiFieldPassword-isLoading.euiFieldPassword--compressed { + padding-right: 32px; } + .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 + * 2. Remove the X clear button from input type search in Chrome and IE +*/ +.euiFieldSearch { + max-width: 400px; + width: 100%; + height: 40px; + background-color: #16171c; + background-repeat: no-repeat; + background-size: 0% 100%; + box-shadow: 0 0 transparent, inset 0 0 0 1px rgba(255, 255, 255, 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", -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: #DFE5EF; + 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; } } + @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { + .euiFieldSearch { + line-height: 1em; } } + .euiFieldSearch::-webkit-input-placeholder { + color: #81858f; + opacity: 1; } + .euiFieldSearch::-moz-placeholder { + color: #81858f; + opacity: 1; } + .euiFieldSearch::placeholder { + color: #81858f; + opacity: 1; } + .euiFieldSearch:invalid { + background-image: linear-gradient(to top, #F86B63, #F86B63 2px, transparent 2px, transparent 100%); + background-size: 100%; } + .euiFieldSearch:focus { + background-color: #111216; + background-image: linear-gradient(to top, #36A2EF, #36A2EF 2px, transparent 2px, transparent 100%); + background-size: 100% 100%; + outline: none; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } + .euiFieldSearch:disabled { + cursor: not-allowed; + color: #535966; + -webkit-text-fill-color: #535966; + background: #202128; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } + .euiFieldSearch:disabled::-webkit-input-placeholder { + color: #535966; + opacity: 1; } + .euiFieldSearch:disabled::-moz-placeholder { + color: #535966; + opacity: 1; } + .euiFieldSearch:disabled::placeholder { + color: #535966; + opacity: 1; } + .euiFieldSearch[readOnly] { + cursor: default; + background: #1D1E24; + border-color: transparent; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } + .euiFieldSearch:-webkit-autofill { + -webkit-text-fill-color: #343741; } + .euiFieldSearch:-webkit-autofill ~ .euiFormControlLayoutIcons { + color: #343741; } + .euiFieldSearch--compressed { + background-color: #16171c; + background-repeat: no-repeat; + background-size: 0% 100%; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 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, #F86B63, #F86B63 2px, transparent 2px, transparent 100%); + background-size: 100%; } + .euiFieldSearch--compressed:focus { + background-color: #111216; + background-image: linear-gradient(to top, #36A2EF, #36A2EF 2px, transparent 2px, transparent 100%); + background-size: 100% 100%; + outline: none; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } + .euiFieldSearch--compressed:disabled { + cursor: not-allowed; + color: #535966; + -webkit-text-fill-color: #535966; + background: #202128; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } + .euiFieldSearch--compressed:disabled::-webkit-input-placeholder { + color: #535966; + opacity: 1; } + .euiFieldSearch--compressed:disabled::-moz-placeholder { + color: #535966; + opacity: 1; } + .euiFieldSearch--compressed:disabled::placeholder { + color: #535966; + opacity: 1; } + .euiFieldSearch--compressed[readOnly] { + cursor: default; + background: #1D1E24; + border-color: transparent; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 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::-ms-clear { + display: none; + /* 2 */ } + .euiFieldSearch.euiFieldSearch-isClearable { + padding-right: 40px; } + .euiFieldSearch.euiFieldSearch-isLoading { + padding-right: 40px; } + .euiFieldSearch.euiFieldSearch-isLoading.euiFieldSearch-isClearable { + padding-right: 62px; } + .euiFieldSearch.euiFieldSearch--compressed { + padding-left: 32px; } + .euiFieldSearch.euiFieldSearch--compressed.euiFieldSearch-isClearable { + padding-right: 32px; } + .euiFieldSearch.euiFieldSearch--compressed.euiFieldSearch-isLoading { + padding-right: 32px; } + .euiFieldSearch.euiFieldSearch--compressed.euiFieldSearch-isLoading.euiFieldSearch-isClearable { + padding-right: 54px; } + +.euiFieldText { + max-width: 400px; + width: 100%; + height: 40px; + background-color: #16171c; + background-repeat: no-repeat; + background-size: 0% 100%; + box-shadow: 0 0 transparent, inset 0 0 0 1px rgba(255, 255, 255, 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", -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: #DFE5EF; + border: none; + border-radius: 6px; + padding: 12px; + /* Invalid state normally comes from :invalid, but several components + /* like EuiDatePicker need it toggled through an extra class. + */ } + .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; } } + @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { + .euiFieldText { + line-height: 1em; } } + .euiFieldText::-webkit-input-placeholder { + color: #81858f; + opacity: 1; } + .euiFieldText::-moz-placeholder { + color: #81858f; + opacity: 1; } + .euiFieldText::placeholder { + color: #81858f; + opacity: 1; } + .euiFieldText:invalid { + background-image: linear-gradient(to top, #F86B63, #F86B63 2px, transparent 2px, transparent 100%); + background-size: 100%; } + .euiFieldText:focus { + background-color: #111216; + background-image: linear-gradient(to top, #36A2EF, #36A2EF 2px, transparent 2px, transparent 100%); + background-size: 100% 100%; + outline: none; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } + .euiFieldText:disabled { + cursor: not-allowed; + color: #535966; + -webkit-text-fill-color: #535966; + background: #202128; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } + .euiFieldText:disabled::-webkit-input-placeholder { + color: #535966; + opacity: 1; } + .euiFieldText:disabled::-moz-placeholder { + color: #535966; + opacity: 1; } + .euiFieldText:disabled::placeholder { + color: #535966; + opacity: 1; } + .euiFieldText[readOnly] { + cursor: default; + background: #1D1E24; + border-color: transparent; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } + .euiFieldText:-webkit-autofill { + -webkit-text-fill-color: #343741; } + .euiFieldText:-webkit-autofill ~ .euiFormControlLayoutIcons { + color: #343741; } + .euiFieldText--compressed { + background-color: #16171c; + background-repeat: no-repeat; + background-size: 0% 100%; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 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, #F86B63, #F86B63 2px, transparent 2px, transparent 100%); + background-size: 100%; } + .euiFieldText--compressed:focus { + background-color: #111216; + background-image: linear-gradient(to top, #36A2EF, #36A2EF 2px, transparent 2px, transparent 100%); + background-size: 100% 100%; + outline: none; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } + .euiFieldText--compressed:disabled { + cursor: not-allowed; + color: #535966; + -webkit-text-fill-color: #535966; + background: #202128; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } + .euiFieldText--compressed:disabled::-webkit-input-placeholder { + color: #535966; + opacity: 1; } + .euiFieldText--compressed:disabled::-moz-placeholder { + color: #535966; + opacity: 1; } + .euiFieldText--compressed:disabled::placeholder { + color: #535966; + opacity: 1; } + .euiFieldText--compressed[readOnly] { + cursor: default; + background: #1D1E24; + border-color: transparent; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } + .euiFieldText--inGroup { + box-shadow: none !important; + border-radius: 0; } + .euiFieldText--withIcon { + padding-left: 40px; } + .euiFieldText-isLoading { + padding-right: 40px; } + .euiFieldText-isLoading.euiFieldText--compressed { + padding-right: 32px; } + .euiFieldText.euiFieldText-isInvalid { + background-image: linear-gradient(to top, #F86B63, #F86B63 2px, transparent 2px, transparent 100%); + background-size: 100%; } + +.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: #535966; } + +.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) + * 3. Delay focus gradient or else it will only partially transition while file chooser opens + * 4. Static height so that it doesn't shift its surrounding contents around + */ +.euiFilePicker__prompt { + background-color: #16171c; + background-repeat: no-repeat; + background-size: 0% 100%; + box-shadow: 0 0 transparent, inset 0 0 0 1px rgba(255, 255, 255, 0.1); + transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in; + padding-left: 40px; + /* 2 */ + height: 40px; + padding-top: 12px; + padding-right: 12px; + padding-bottom: 12px; + pointer-events: none; + /* 1 */ + border-radius: 6px; + transition: box-shadow 150ms ease-in, background-color 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in 150ms; + /* 3 */ } + @supports (-moz-appearance: none) { + .euiFilePicker__prompt { + transition-property: box-shadow, background-image, background-size; } } + .euiFilePicker--compressed .euiFilePicker__prompt { + background-color: #16171c; + background-repeat: no-repeat; + background-size: 0% 100%; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 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; } + @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 .euiFilePicker__prompt { + background-image: linear-gradient(to top, #F86B63, #F86B63 2px, transparent 2px, transparent 100%); + background-size: 100%; } + +.euiFilePicker__promptText { + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + max-width: 100%; + overflow: hidden !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; + word-wrap: normal !important; + line-height: 16px; } + .euiFilePicker:not(.euiFilePicker--large):not(.euiFilePicker-hasFiles) .euiFilePicker__promptText { + color: #535966; } + +.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: #1D1E24; + stroke: #1D1E24; + stroke-width: 2px; } + .euiFilePicker--large .euiFilePicker__clearButton { + position: relative; + top: 0; + right: 0; } + +.euiFilePicker__showDrop .euiFilePicker__prompt, +.euiFilePicker__input:focus + .euiFilePicker__prompt { + background-color: #111216; + background-image: linear-gradient(to top, #36A2EF, #36A2EF 2px, transparent 2px, transparent 100%); + background-size: 100% 100%; + outline: none; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } + .euiFilePicker--compressed .euiFilePicker__showDrop .euiFilePicker__prompt, .euiFilePicker--compressed + .euiFilePicker__input:focus + .euiFilePicker__prompt { + background-color: #111216; + background-image: linear-gradient(to top, #36A2EF, #36A2EF 2px, transparent 2px, transparent 100%); + background-size: 100% 100%; + outline: none; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } + +.euiFilePicker__input:disabled + .euiFilePicker__prompt { + cursor: not-allowed; + color: #535966; + -webkit-text-fill-color: #535966; + background: #202128; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } + .euiFilePicker__input:disabled + .euiFilePicker__prompt::-webkit-input-placeholder { + color: #535966; + opacity: 1; } + .euiFilePicker__input:disabled + .euiFilePicker__prompt::-moz-placeholder { + color: #535966; + opacity: 1; } + .euiFilePicker__input:disabled + .euiFilePicker__prompt::placeholder { + color: #535966; + 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: #DFE5EF; } + +.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.71429rem; + list-style: disc; } + +.euiForm__errors { + margin-bottom: 16px; } + +.euiFormControlLayout { + max-width: 400px; + width: 100%; + height: 40px; } + .euiFormControlLayout--fullWidth { + max-width: 100%; } + .euiFormControlLayout--compressed { + height: 32px; } + .euiFormControlLayout--inGroup { + height: 100%; } + +.euiFormControlLayout__childrenWrapper { + position: relative; } + +/** + * 1. Account for inner box-shadow style border + * 2. Ensure truncation works in children elements + */ +.euiFormControlLayout--group { + background-color: #16171c; + background-repeat: no-repeat; + background-size: 0% 100%; + box-shadow: 0 0 transparent, inset 0 0 0 1px rgba(255, 255, 255, 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; + word-wrap: normal !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: #1f2127; } + .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: #1f2127; } + .euiFormControlLayout--group .euiButtonIcon:focus-visible { + outline: 2px solid #36A2EF; + outline-offset: -2px; } + .euiFormControlLayout--group .euiToolTipAnchor > .euiIcon { + height: 100%; + background-color: #1f2127; + 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 { + background-color: #1f2127; + padding: 12px; + line-height: 16px !important; + cursor: default !important; } + .euiFormControlLayout--group .euiFormLabel + *:not(.euiFormControlLayout__childrenWrapper):not(input), + .euiFormControlLayout--group .euiText + *: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: #16171c; + background-repeat: no-repeat; + background-size: 0% 100%; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 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 { + padding: 8px; } + .euiFormControlLayout--group.euiFormControlLayout--compressed .euiFormLabel + *:not(.euiFormControlLayout__childrenWrapper), + .euiFormControlLayout--group.euiFormControlLayout--compressed .euiText + *: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: #1D1E24; + border-color: transparent; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } + .euiFormControlLayout--group.euiFormControlLayout--readOnly input { + background-color: transparent; } + +.euiFormControlLayoutDelimited { + background-color: #16171c; + background-repeat: no-repeat; + background-size: 0% 100%; + box-shadow: 0 0 transparent, inset 0 0 0 1px rgba(255, 255, 255, 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 .euiFormControlLayoutDelimited__delimeter { + background-color: #16171c; } + .euiFormControlLayoutDelimited > .euiFormControlLayout__childrenWrapper { + display: -webkit-flex; + display: flex; + -webkit-align-items: center; + align-items: center; + width: 100%; } + .euiFormControlLayoutDelimited[class*='--compressed'] { + background-color: #16171c; + background-repeat: no-repeat; + background-size: 0% 100%; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 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*='--compressed'] .euiFormControlLayoutDelimited__input { + height: 100%; + padding-top: 0; + padding-bottom: 0; + padding-left: 8px; + padding-right: 8px; } + .euiFormControlLayoutDelimited[class*='--compressed'] .euiFormControlLayoutIcons { + padding-left: 8px; + padding-right: 8px; } + .euiFormControlLayoutDelimited[class*='--fullWidth'] .euiFormControlLayout__childrenWrapper, + .euiFormControlLayoutDelimited[class*='--fullWidth'] input { + width: 100%; + max-width: none; } + .euiFormControlLayoutDelimited[class*='-isDisabled'] { + cursor: not-allowed; + color: #535966; + -webkit-text-fill-color: #535966; + background: #202128; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } + .euiFormControlLayoutDelimited[class*='-isDisabled']::-webkit-input-placeholder { + color: #535966; + opacity: 1; } + .euiFormControlLayoutDelimited[class*='-isDisabled']::-moz-placeholder { + color: #535966; + opacity: 1; } + .euiFormControlLayoutDelimited[class*='-isDisabled']::placeholder { + color: #535966; + opacity: 1; } + .euiFormControlLayoutDelimited[class*='-isDisabled'] .euiFormControlLayoutDelimited__delimeter { + background-color: #202128; } + .euiFormControlLayoutDelimited[class*='--readOnly'] { + cursor: default; + background: #1D1E24; + border-color: transparent; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } + .euiFormControlLayoutDelimited[class*='--readOnly'] input, + .euiFormControlLayoutDelimited[class*='--readOnly'] .euiFormControlLayoutDelimited__delimeter { + background-color: #1D1E24; } + .euiFormControlLayoutDelimited .euiFormControlLayoutIcons { + position: static; + padding-left: 12px; + padding-right: 12px; + -webkit-flex-shrink: 0; + flex-shrink: 0; } + .euiFormControlLayoutDelimited .euiFormControlLayoutIcons:not(.euiFormControlLayoutIcons--right) { + -webkit-order: -1; + order: -1; } + +.euiFormControlLayoutDelimited__input { + box-shadow: none !important; + border-radius: 0 !important; + text-align: center; + height: 100%; + min-width: 0; } + .euiFormControlLayoutDelimited[class*='--compressed'] .euiFormControlLayoutDelimited__input { + max-width: none; } + +.euiFormControlLayoutDelimited__delimeter { + line-height: 1 !important; + -webkit-flex: 0 0 auto; + flex: 0 0 auto; + padding-left: 6px; + padding-right: 6px; } + +.euiFormControlLayoutIcons { + pointer-events: none; + position: absolute; + top: 0; + bottom: 0; + left: 12px; + display: -webkit-flex; + display: flex; + -webkit-align-items: center; + align-items: center; } + .euiFormControlLayoutIcons > * + * { + margin-left: 6px; } + .euiFormControlLayout--compressed .euiFormControlLayoutIcons { + left: 8px; } + +.euiFormControlLayoutIcons--right { + left: auto; + right: 12px; } + .euiFormControlLayout--compressed .euiFormControlLayoutIcons--right { + left: auto; + right: 8px; } + +*:disabled + .euiFormControlLayoutIcons { + cursor: not-allowed; + color: #535966; } + +.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: #1D1E24; + stroke: #1D1E24; + 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: #1D1E24; + stroke: #1D1E24; + 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: #535966; } + +.euiFormErrorText { + font-size: 12px; + font-size: 0.85714rem; + line-height: 1.14286rem; + padding-top: 4px; + color: #F86B63; } + +.euiFormLegend { + font-size: 12px; + font-size: 0.85714rem; + line-height: 1.14286rem; + color: #DFE5EF; + 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.85714rem; + line-height: 1.14286rem; + padding-top: 4px; + color: #98A2B3; } + +/** + * 1. Focused state overrides invalid state. + */ +.euiFormLabel { + font-size: 12px; + font-size: 0.85714rem; + line-height: 1.14286rem; + color: #DFE5EF; + font-weight: 600; + display: inline-block; + transition: all 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); } + .euiFormLabel.euiFormLabel-isInvalid { + color: #F86B63; + /* 1 */ } + .euiFormLabel.euiFormLabel-isFocused { + color: #36A2EF; + /* 1 */ } + +.euiFormLabel[for] { + cursor: pointer; } + +/** + * 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: 22px; + /* 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 { + overflow-wrap: break-word !important; + word-wrap: break-word !important; + word-break: break-word; + -webkit-hyphens: auto; + hyphens: auto; + max-width: 100%; } + .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; } + +.euiRadio { + position: relative; + /** + * 1. Float above the visual radio and match its dimension, so that when users try to click it + * they actually click this input. + */ } + .euiRadio .euiRadio__input { + position: absolute; + left: -10000px; + top: auto; + width: 1px; + height: 1px; + overflow: hidden; } + .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 #66676d; + background: #1D1E24 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: #36A2EF; + background-color: #36A2EF; + 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%2829, 30, 36%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: #535966; + cursor: not-allowed !important; } + .euiRadio .euiRadio__input[disabled] + .euiRadio__circle { + border-color: #343741; + background-color: #343741; + box-shadow: none; } + .euiRadio .euiRadio__input:checked[disabled] + .euiRadio__circle { + border-color: #343741; + background-color: #343741; + 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%28166, 170, 176%29' fill-rule='evenodd' transform='translate(-5 -8)'/%3E%3C/svg%3E"); } + .euiRadio .euiRadio__input:focus + .euiRadio__circle, .euiRadio .euiRadio__input:active:not(:disabled) + .euiRadio__circle { + outline: 2px solid currentColor; + outline-offset: 2px; + border-color: #36A2EF; } + .euiRadio .euiRadio__input:focus + .euiRadio__circle:focus-visible, .euiRadio .euiRadio__input:active:not(:disabled) + .euiRadio__circle:focus-visible { + outline-style: auto; } + .euiRadio .euiRadio__input:focus + .euiRadio__circle:not(:focus-visible), .euiRadio .euiRadio__input:active:not(:disabled) + .euiRadio__circle:not(:focus-visible) { + outline: none; } + .euiRadio.euiRadio--inList, .euiRadio.euiRadio--noLabel { + min-height: 16px; + min-width: 16px; } + .euiRadio.euiRadio--inList .euiRadio__circle, .euiRadio.euiRadio--noLabel .euiRadio__circle { + top: 0; } + .euiRadio.euiRadio--inList .euiRadio__input, .euiRadio.euiRadio--noLabel .euiRadio__input { + width: 16px; + height: 16px; + /* 1 */ + position: absolute; + /* 1 */ + opacity: 0; + /* 1 */ + z-index: 1; + /* 1 */ + margin: 0; + /* 1 */ + left: 0; + /* 1 */ + cursor: pointer; } + +.euiRadioGroup__item + .euiRadioGroup__item { + margin-top: 4px; } + .euiRadioGroup__item + .euiRadioGroup__item.euiRadio--compressed { + margin-top: 0; } + +.euiRange__horizontalSpacer { + width: 16px; } + +.euiRange__slimHorizontalSpacer { + width: 8px; } + +.euiRangeHighlight { + position: absolute; + left: 0; + width: 100%; + top: calc(50% - 2px); + overflow: hidden; } + .euiRangeHighlight__progress { + height: 4px; + border-radius: 4px; + background-color: #98A2B3; } + .euiRangeHighlight__progress--hasFocus { + background-color: #36A2EF; } + .euiRangeHighlight--hasTicks { + top: 8px; } + .euiRangeHighlight--hasTicks.euiRangeHighlight--compressed { + top: 6px; } + +.euiRangeInput { + width: auto; + min-width: 64px; } + .euiRange__popover .euiRangeInput { + margin: 0 !important; + width: 100%; } + +.euiRangeLabel--min, .euiRangeLabel--max { + font-size: 12px; } + +.euiRangeLabel--min { + margin-right: 8px; } + +.euiRangeLabel--max { + margin-left: 8px; } + +.euiRangeLabel--isDisabled { + opacity: 0.25; } + +.euiRangeLevels { + display: -webkit-flex; + display: flex; + -webkit-justify-content: stretch; + justify-content: stretch; + position: absolute; + left: 0; + right: 0; + top: 22px; } + .euiRangeLevels--hasTicks { + top: 12px; } + .euiRangeLevels--compressed { + top: 18px; } + .euiRangeLevels--compressed.euiRangeLevels--hasTicks { + top: 10px; } + +.euiRangeLevel { + display: block; + height: 6px; + border-radius: 6px; + margin: 2px; } + +.euiRangeLevel--primary { + background-color: rgba(54, 162, 239, 0.3); } + +.euiRangeLevel--success { + background-color: rgba(125, 222, 216, 0.3); } + +.euiRangeLevel--warning { + background-color: rgba(243, 211, 113, 0.3); } + +.euiRangeLevel--danger { + background-color: rgba(248, 107, 99, 0.3); } + +/* + * Input Range Customization by browser + */ +.euiRangeSlider { + height: 40px; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background: transparent; + width: 100%; + position: relative; + cursor: pointer; } + .euiRangeSlider:disabled { + cursor: not-allowed; } + .euiRangeSlider:disabled::-webkit-slider-thumb { + cursor: not-allowed; + border-color: #98A2B3; + background-color: #98A2B3; + box-shadow: none; } + .euiRangeSlider:disabled::-moz-range-thumb { + cursor: not-allowed; + border-color: #98A2B3; + background-color: #98A2B3; + box-shadow: none; } + .euiRangeSlider:disabled::-ms-thumb { + cursor: not-allowed; + border-color: #98A2B3; + background-color: #98A2B3; + box-shadow: none; } + .euiRangeSlider:disabled ~ .euiRangeThumb { + cursor: not-allowed; + border-color: #98A2B3; + background-color: #98A2B3; + box-shadow: none; } + .euiRangeSlider::-webkit-slider-thumb { + padding: 7px; + border: 1px solid #66676d; + background: #1D1E24 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; + cursor: pointer; + border-color: #98A2B3; + padding: 0; + height: 16px; + width: 16px; } + .euiRangeSlider::-moz-range-thumb { + padding: 7px; + border: 1px solid #66676d; + background: #1D1E24 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; + cursor: pointer; + border-color: #98A2B3; + padding: 0; + height: 16px; + width: 16px; } + .euiRangeSlider::-ms-thumb { + padding: 7px; + border: 1px solid #66676d; + background: #1D1E24 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; + cursor: pointer; + border-color: #98A2B3; + padding: 0; + height: 16px; + width: 16px; } + .euiRangeSlider::-webkit-slider-runnable-track { + height: 2px; + -webkit-transition: all 250ms ease-in; + transition: all 250ms ease-in; + width: 100%; + background: #98A2B3; + border: 0 solid #98A2B3; + border-radius: 4px; } + .euiRangeSlider::-moz-range-track { + height: 2px; + -moz-transition: all 250ms ease-in; + transition: all 250ms ease-in; + width: 100%; + background: #98A2B3; + border: 0 solid #98A2B3; + border-radius: 4px; } + .euiRangeSlider::-ms-fill-lower { + height: 2px; + -ms-transition: all 250ms ease-in; + transition: all 250ms ease-in; + width: 100%; + background: #98A2B3; + border: 0 solid #98A2B3; + border-radius: 4px; } + .euiRangeSlider::-ms-fill-upper { + height: 2px; + -ms-transition: all 250ms ease-in; + transition: all 250ms ease-in; + width: 100%; + background: #98A2B3; + border: 0 solid #98A2B3; + border-radius: 4px; } + .euiRangeSlider:focus { + outline: none; } + .euiRangeSlider:focus-visible::-webkit-slider-thumb, .euiRangeSlider--hasFocus::-webkit-slider-thumb { + box-shadow: 0 0 0 2px #36A2EF; } + .euiRangeSlider:focus-visible::-moz-range-thumb, .euiRangeSlider--hasFocus::-moz-range-thumb { + box-shadow: 0 0 0 2px #36A2EF; } + .euiRangeSlider:focus-visible::-ms-thumb, .euiRangeSlider--hasFocus::-ms-thumb { + box-shadow: 0 0 0 2px #36A2EF; } + .euiRangeSlider:focus-visible ~ .euiRangeThumb, .euiRangeSlider--hasFocus ~ .euiRangeThumb { + border-color: #36A2EF; } + .euiRangeSlider:focus-visible::-webkit-slider-runnable-track, .euiRangeSlider--hasFocus::-webkit-slider-runnable-track { + background-color: #36A2EF; + border-color: #36A2EF; } + .euiRangeSlider:focus-visible::-moz-range-track, .euiRangeSlider--hasFocus::-moz-range-track { + background-color: #36A2EF; + border-color: #36A2EF; } + .euiRangeSlider:focus-visible::-ms-fill-lower, .euiRangeSlider--hasFocus::-ms-fill-lower { + background-color: #36A2EF; + border-color: #36A2EF; } + .euiRangeSlider:focus-visible::-ms-fill-upper, .euiRangeSlider--hasFocus::-ms-fill-upper { + background-color: #36A2EF; + border-color: #36A2EF; } + .euiRangeSlider:focus-visible ~ .euiRangeHighlight .euiRangeHighlight__progress, .euiRangeSlider--hasFocus ~ .euiRangeHighlight .euiRangeHighlight__progress { + background-color: #36A2EF; } + .euiRangeSlider:focus-visible ~ .euiRangeTooltip .euiRangeTooltip__value, .euiRangeSlider--hasFocus ~ .euiRangeTooltip .euiRangeTooltip__value { + box-shadow: 0 0.9px 4px -1px rgba(0, 0, 0, 0.2), 0 2.6px 8px -1px rgba(0, 0, 0, 0.15), 0 5.7px 12px -1px rgba(0, 0, 0, 0.125), 0 15px 15px -1px rgba(0, 0, 0, 0.1); } + .euiRangeSlider:focus-visible ~ .euiRangeTooltip .euiRangeTooltip__value.euiRangeTooltip__value--right, .euiRangeSlider:focus-visible ~ .euiRangeTooltip .euiRangeTooltip__value.euiRangeTooltip__value--left, .euiRangeSlider--hasFocus ~ .euiRangeTooltip .euiRangeTooltip__value.euiRangeTooltip__value--right, .euiRangeSlider--hasFocus ~ .euiRangeTooltip .euiRangeTooltip__value.euiRangeTooltip__value--left { + -webkit-transform: translateX(0) translateY(-50%) scale(1.1); + transform: translateX(0) translateY(-50%) scale(1.1); } + .euiRangeSlider::-webkit-slider-thumb { + -webkit-appearance: none; + margin-top: -7px; } + .euiRangeSlider::-ms-thumb { + margin-top: 0; } + .euiRangeSlider::-moz-focus-outer { + border: none; } + .euiRangeSlider::-ms-track { + height: 2px; + -ms-transition: all 250ms ease-in; + transition: all 250ms ease-in; + width: 100%; + background: transparent; + border-color: transparent; + border-width: 8px 0; + color: transparent; } + .euiRangeSlider--hasTicks { + height: 20px; } + .euiRangeSlider--compressed { + height: 32px; } + .euiRangeSlider--compressed.euiRangeSlider--hasTicks { + height: 16px; } + +.euiRangeSlider--hasRange::-webkit-slider-runnable-track { + background-color: rgba(152, 162, 179, 0.4); + border-color: rgba(152, 162, 179, 0.4); } + +.euiRangeSlider--hasRange::-moz-range-track { + background-color: rgba(152, 162, 179, 0.4); + border-color: rgba(152, 162, 179, 0.4); } + +.euiRangeSlider--hasRange::-ms-fill-lower { + background-color: rgba(152, 162, 179, 0.4); + border-color: rgba(152, 162, 179, 0.4); } + +.euiRangeSlider--hasRange::-ms-fill-upper { + background-color: rgba(152, 162, 179, 0.4); + border-color: rgba(152, 162, 179, 0.4); } + +.euiRangeThumb { + padding: 7px; + border: 1px solid #66676d; + background: #1D1E24 no-repeat center; + border-radius: 14px; + transition: background-color 150ms ease-in, border-color 150ms ease-in; + cursor: pointer; + border-color: #98A2B3; + padding: 0; + height: 16px; + width: 16px; + content: ''; + position: absolute; + left: 0; + top: 50%; + margin-top: -8px; + pointer-events: none; } + .euiRangeThumb:focus { + outline: 2px solid currentColor; + outline-offset: 2px; + border-color: #36A2EF; } + .euiRangeThumb:focus:focus-visible { + outline-style: auto; } + .euiRangeThumb:focus:not(:focus-visible) { + outline: none; } + .euiRangeThumb--hasTicks { + top: 25%; } + +.euiRangeTicks { + position: absolute; + left: 2px; + right: 2px; + top: 8px; + display: -webkit-flex; + display: flex; } + +.euiRangeTick { + overflow-x: hidden; + text-overflow: ellipsis; + font-size: 12px; + position: relative; + padding-top: 16px; } + .euiRangeTick:not(.euiRangeTick--hasTickMark)::before { + width: 4px; + height: 4px; + background-color: #98A2B3; + border-radius: 100%; + position: absolute; + top: 0; + content: ''; + left: calc(50% - 2px); } + .euiRangeTick .euiRangeTick__pseudo { + width: 4px; + height: 4px; + background-color: #98A2B3; + border-radius: 100%; + position: absolute; + top: 0; } + .euiRangeTick--isCustom { + position: absolute; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); } + .euiRangeTick--isMin, .euiRangeTick--isMax { + -webkit-transform: translateX(0); + transform: translateX(0); + overflow-x: visible; } + .euiRangeTick--isMin .euiRangeTick__pseudo { + left: 0; } + .euiRangeTick--isMax .euiRangeTick__pseudo { + right: 0; } + .euiRangeTick:enabled:hover, .euiRangeTick:focus, .euiRangeTick--selected { + color: #36A2EF; } + .euiRangeTick--selected { + font-weight: 500; } + .euiRangeTick:disabled { + cursor: not-allowed; } + +.euiRangeTicks--compressed { + top: 6px; } + .euiRangeTicks--compressed .euiRangeTick { + padding-top: 14px; } + +.euiRangeTick__label { + pointer-events: none; } + +.euiRangeTooltip { + display: block; + position: absolute; + left: 0; + top: 0; + bottom: 0; + width: calc(100% - 16px); + margin-left: 8px; + pointer-events: none; } + +.euiRangeTooltip__value { + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + border: 1px solid black; + position: absolute; + border-radius: 6px; + padding: 2px 8px; + background-color: black; + color: #FFF; + max-width: 256px; + top: 50%; + transition: box-shadow 250ms cubic-bezier(0.694, 0.0482, 0.335, 1), -webkit-transform 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); + transition: box-shadow 250ms cubic-bezier(0.694, 0.0482, 0.335, 1), transform 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); + transition: box-shadow 250ms cubic-bezier(0.694, 0.0482, 0.335, 1), transform 250ms cubic-bezier(0.694, 0.0482, 0.335, 1), -webkit-transform 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } + .euiRangeTooltip__value::after, .euiRangeTooltip__value::before { + content: ''; + position: absolute; + bottom: -6px; + left: 50%; + -webkit-transform-origin: center; + transform-origin: center; + background-color: black; + width: 12px; + height: 12px; + border-radius: 2px; } + .euiRangeTooltip__value::before { + background-color: black; } + .euiRangeTooltip__value.euiRangeTooltip__value--right { + margin-left: 24px; } + .euiRangeTooltip__value.euiRangeTooltip__value--right:before, .euiRangeTooltip__value.euiRangeTooltip__value--right:after { + left: -5px; } + .euiRangeTooltip__value.euiRangeTooltip__value--right::before { + margin-left: -1px; } + .euiRangeTooltip__value.euiRangeTooltip__value--left { + margin-right: 24px; } + .euiRangeTooltip__value.euiRangeTooltip__value--left:before, .euiRangeTooltip__value.euiRangeTooltip__value--left:after { + left: auto; + right: -5px; } + .euiRangeTooltip__value.euiRangeTooltip__value--left::before { + margin-right: -1px; } + .euiRangeTooltip__value.euiRangeTooltip__value--right, .euiRangeTooltip__value.euiRangeTooltip__value--left { + -webkit-transform: translateX(0) translateY(-50%); + transform: translateX(0) translateY(-50%); } + .euiRangeTooltip__value.euiRangeTooltip__value--right:before, .euiRangeTooltip__value.euiRangeTooltip__value--right:after, .euiRangeTooltip__value.euiRangeTooltip__value--left:before, .euiRangeTooltip__value.euiRangeTooltip__value--left:after { + bottom: 50%; + -webkit-transform: translateY(50%) rotateZ(45deg); + transform: translateY(50%) rotateZ(45deg); } + .euiRangeTooltip__value--hasTicks { + top: 10px; } + .euiRangeTooltip--compressed .euiRangeTooltip__value--hasTicks { + top: 8px; } + +.euiRangeTrack { + height: 100%; + -webkit-flex-grow: 1; + flex-grow: 1; + position: relative; + -webkit-align-self: flex-start; + align-self: flex-start; } + .euiRangeTrack--hasTicks { + margin-left: 1em; + margin-right: 1em; } + .euiRangeTrack--disabled { + opacity: 0.25; } + +/* + * 1. There's no way to target the layout of the extra input, so we must + * use the descendant selector to allow the width to shrink. + * + * 2. Prevent the prepend/append label from extending outside the parent element + */ +.euiRangeWrapper { + max-width: 400px; + width: 100%; + height: 40px; + display: -webkit-flex; + display: flex; + -webkit-align-items: center; + align-items: center; } + .euiRangeWrapper--fullWidth { + max-width: 100%; } + .euiRangeWrapper--compressed { + height: 32px; } + .euiRangeWrapper--inGroup { + height: 100%; } + .euiRangeWrapper > .euiFormControlLayout { + /* 1 */ + width: auto; } + .euiRangeWrapper > .euiFormControlLayout.euiFormControlLayout--group { + -webkit-flex-shrink: 0; + flex-shrink: 0; + /* 2 */ } + +.euiDualRange__slider::-webkit-slider-thumb { + visibility: hidden; } + +.euiDualRange__slider::-moz-range-thumb { + visibility: hidden; } + +.euiDualRange__slider::-ms-thumb { + visibility: hidden; } + +/** + * 1. Leave room for caret. + * 2. Ensure the descenders don't get cut off + */ +.euiSelect { + max-width: 400px; + width: 100%; + height: 40px; + background-color: #16171c; + background-repeat: no-repeat; + background-size: 0% 100%; + box-shadow: 0 0 transparent, inset 0 0 0 1px rgba(255, 255, 255, 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", -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: #DFE5EF; + border: none; + border-radius: 6px; + padding: 12px; + padding-right: 40px; + /* 1 */ + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + line-height: 40px; + /* 2 */ + padding-top: 0; + /* 2 */ + padding-bottom: 0; + /* 2 */ } + .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; } } + @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { + .euiSelect { + line-height: 1em; } } + .euiSelect::-webkit-input-placeholder { + color: #81858f; + opacity: 1; } + .euiSelect::-moz-placeholder { + color: #81858f; + opacity: 1; } + .euiSelect::placeholder { + color: #81858f; + opacity: 1; } + .euiSelect:invalid { + background-image: linear-gradient(to top, #F86B63, #F86B63 2px, transparent 2px, transparent 100%); + background-size: 100%; } + .euiSelect:focus { + background-color: #111216; + background-image: linear-gradient(to top, #36A2EF, #36A2EF 2px, transparent 2px, transparent 100%); + background-size: 100% 100%; + outline: none; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } + .euiSelect:disabled { + cursor: not-allowed; + color: #535966; + -webkit-text-fill-color: #535966; + background: #202128; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } + .euiSelect:disabled::-webkit-input-placeholder { + color: #535966; + opacity: 1; } + .euiSelect:disabled::-moz-placeholder { + color: #535966; + opacity: 1; } + .euiSelect:disabled::placeholder { + color: #535966; + opacity: 1; } + .euiSelect[readOnly] { + cursor: default; + background: #1D1E24; + border-color: transparent; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } + .euiSelect:-webkit-autofill { + -webkit-text-fill-color: #343741; } + .euiSelect:-webkit-autofill ~ .euiFormControlLayoutIcons { + color: #343741; } + .euiSelect--compressed { + background-color: #16171c; + background-repeat: no-repeat; + background-size: 0% 100%; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 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, #F86B63, #F86B63 2px, transparent 2px, transparent 100%); + background-size: 100%; } + .euiSelect--compressed:focus { + background-color: #111216; + background-image: linear-gradient(to top, #36A2EF, #36A2EF 2px, transparent 2px, transparent 100%); + background-size: 100% 100%; + outline: none; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } + .euiSelect--compressed:disabled { + cursor: not-allowed; + color: #535966; + -webkit-text-fill-color: #535966; + background: #202128; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } + .euiSelect--compressed:disabled::-webkit-input-placeholder { + color: #535966; + opacity: 1; } + .euiSelect--compressed:disabled::-moz-placeholder { + color: #535966; + opacity: 1; } + .euiSelect--compressed:disabled::placeholder { + color: #535966; + opacity: 1; } + .euiSelect--compressed[readOnly] { + cursor: default; + background: #1D1E24; + border-color: transparent; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } + .euiSelect--inGroup { + box-shadow: none !important; + border-radius: 0; } + .euiSelect-isLoading { + padding-right: 62px; } + .euiSelect-isLoading.euiSelect--compressed { + padding-right: 54px; } + .euiSelect--compressed { + padding-right: 32px; + /* 1 */ + line-height: 32px; + /* 2 */ + padding-top: 0; + /* 2 */ + padding-bottom: 0; + /* 2 */ } + .euiSelect--inGroup { + line-height: 38px; + /* 2 */ } + .euiSelect--inGroup.euiSelect--compressed { + line-height: 30px; + /* 2 */ } + .euiSelect::-ms-expand { + display: none; } + .euiSelect:focus::-ms-value { + color: #DFE5EF; + background: transparent; } + .euiSelect:-moz-focusring { + color: transparent; + text-shadow: 0 0 0 #DFE5EF; } + +.euiSuperSelect__listbox { + 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(152, 162, 179, 0.5); + border: 6px solid transparent; + background-clip: content-box; } + .euiSuperSelect__listbox::-webkit-scrollbar-corner, .euiSuperSelect__listbox::-webkit-scrollbar-track { + background-color: transparent; } + +.euiSuperSelect__item { + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + padding: 8px; } + .euiSuperSelect__item:hover { + cursor: pointer; + text-decoration: underline; } + .euiSuperSelect__item:focus { + cursor: pointer; + text-decoration: underline; + background-color: rgba(54, 162, 239, 0.3); } + .euiSuperSelect__item:disabled { + cursor: not-allowed; + text-decoration: none; + color: #515761; } + +.euiSuperSelect__item--hasDividers:not(:last-of-type) { + border-bottom: 1px solid #343741; } + +/** + * 1. Leave room for caret. + * 2. Ensure the descenders don't get cut off + * 3. Makes sure the height is correct when there's no selection + */ +.euiSuperSelectControl { + max-width: 400px; + width: 100%; + height: 40px; + background-color: #16171c; + background-repeat: no-repeat; + background-size: 0% 100%; + box-shadow: 0 0 transparent, inset 0 0 0 1px rgba(255, 255, 255, 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", -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: #DFE5EF; + border: none; + border-radius: 6px; + padding: 12px; + padding-right: 40px; + /* 1 */ + display: block; + /* 3 */ + text-align: left; + line-height: 40px; + /* 2 */ + padding-top: 0; + /* 2 */ + padding-bottom: 0; + /* 2 */ + 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; } } + @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { + .euiSuperSelectControl { + line-height: 1em; } } + .euiSuperSelectControl::-webkit-input-placeholder { + color: #81858f; + opacity: 1; } + .euiSuperSelectControl::-moz-placeholder { + color: #81858f; + opacity: 1; } + .euiSuperSelectControl::placeholder { + color: #81858f; + opacity: 1; } + .euiSuperSelectControl:invalid { + background-image: linear-gradient(to top, #F86B63, #F86B63 2px, transparent 2px, transparent 100%); + background-size: 100%; } + .euiSuperSelectControl:focus { + background-color: #111216; + background-image: linear-gradient(to top, #36A2EF, #36A2EF 2px, transparent 2px, transparent 100%); + background-size: 100% 100%; + outline: none; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } + .euiSuperSelectControl:disabled { + cursor: not-allowed; + color: #535966; + -webkit-text-fill-color: #535966; + background: #202128; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } + .euiSuperSelectControl:disabled::-webkit-input-placeholder { + color: #535966; + opacity: 1; } + .euiSuperSelectControl:disabled::-moz-placeholder { + color: #535966; + opacity: 1; } + .euiSuperSelectControl:disabled::placeholder { + color: #535966; + opacity: 1; } + .euiSuperSelectControl[readOnly] { + cursor: default; + background: #1D1E24; + border-color: transparent; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } + .euiSuperSelectControl:-webkit-autofill { + -webkit-text-fill-color: #343741; } + .euiSuperSelectControl:-webkit-autofill ~ .euiFormControlLayoutIcons { + color: #343741; } + .euiSuperSelectControl--compressed { + background-color: #16171c; + background-repeat: no-repeat; + background-size: 0% 100%; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 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, #F86B63, #F86B63 2px, transparent 2px, transparent 100%); + background-size: 100%; } + .euiSuperSelectControl--compressed:focus { + background-color: #111216; + background-image: linear-gradient(to top, #36A2EF, #36A2EF 2px, transparent 2px, transparent 100%); + background-size: 100% 100%; + outline: none; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } + .euiSuperSelectControl--compressed:disabled { + cursor: not-allowed; + color: #535966; + -webkit-text-fill-color: #535966; + background: #202128; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } + .euiSuperSelectControl--compressed:disabled::-webkit-input-placeholder { + color: #535966; + opacity: 1; } + .euiSuperSelectControl--compressed:disabled::-moz-placeholder { + color: #535966; + opacity: 1; } + .euiSuperSelectControl--compressed:disabled::placeholder { + color: #535966; + opacity: 1; } + .euiSuperSelectControl--compressed[readOnly] { + cursor: default; + background: #1D1E24; + border-color: transparent; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } + .euiSuperSelectControl--inGroup { + box-shadow: none !important; + border-radius: 0; } + .euiSuperSelectControl-isLoading { + padding-right: 62px; } + .euiSuperSelectControl-isLoading.euiSuperSelectControl--compressed { + padding-right: 54px; } + .euiSuperSelectControl-isInvalid { + background-image: linear-gradient(to top, #F86B63, #F86B63 2px, transparent 2px, transparent 100%); + background-size: 100%; } + .euiSuperSelectControl--compressed { + padding-right: 32px; + /* 1 */ + line-height: 32px; + /* 2 */ + padding-top: 0; + /* 2 */ + padding-bottom: 0; + /* 2 */ } + .euiSuperSelectControl.euiSuperSelect--isOpen__button { + background-color: #111216; + background-image: linear-gradient(to top, #36A2EF, #36A2EF 2px, transparent 2px, transparent 100%); + background-size: 100% 100%; + outline: none; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } + +.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: #36A2EF; } + .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:disabled:hover, + .euiSwitch .euiSwitch__button:disabled ~ .euiSwitch__label:hover { + cursor: not-allowed; } + .euiSwitch .euiSwitch__button:disabled .euiSwitch__body { + background-color: rgba(83, 89, 102, 0.7); } + .euiSwitch .euiSwitch__button:disabled .euiSwitch__thumb { + border-color: #343741; + background-color: #343741; + box-shadow: none; + background-color: rgba(83, 89, 102, 0.7); } + .euiSwitch .euiSwitch__button:disabled .euiSwitch__icon { + fill: #a6aab0; } + .euiSwitch .euiSwitch__button:disabled + .euiSwitch__label { + color: #535966; } + .euiSwitch .euiSwitch__button[aria-checked='false'] .euiSwitch__body { + background-color: rgba(83, 89, 102, 0.7); } + .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__body { + pointer-events: none; + width: 44px; + height: 20px; + background-color: #36A2EF; + display: inline-block; + position: relative; + border-radius: 20px; + vertical-align: middle; } + .euiSwitch .euiSwitch__thumb { + padding: 9px; + border: 1px solid #66676d; + background: #1D1E24 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: #DFE5EF; } + .euiSwitch .euiSwitch__icon--checked { + right: auto; + left: -8px; + fill: #1D1E24; } + .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 #66676d; + background: #1D1E24 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 #66676d; + background: #1D1E24 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: #66676d; } + .euiSwitch.euiSwitch--compressed .euiSwitch__button[aria-checked='true'] .euiSwitch__thumb, .euiSwitch.euiSwitch--mini .euiSwitch__button[aria-checked='true'] .euiSwitch__thumb { + border-color: #36A2EF; } + +.euiTextArea { + max-width: 400px; + width: 100%; + height: 40px; + background-color: #16171c; + background-repeat: no-repeat; + background-size: 0% 100%; + box-shadow: 0 0 transparent, inset 0 0 0 1px rgba(255, 255, 255, 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", -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: #DFE5EF; + 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; } } + @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { + .euiTextArea { + line-height: 1em; } } + .euiTextArea::-webkit-input-placeholder { + color: #81858f; + opacity: 1; } + .euiTextArea::-moz-placeholder { + color: #81858f; + opacity: 1; } + .euiTextArea::placeholder { + color: #81858f; + opacity: 1; } + .euiTextArea:invalid { + background-image: linear-gradient(to top, #F86B63, #F86B63 2px, transparent 2px, transparent 100%); + background-size: 100%; } + .euiTextArea:focus { + background-color: #111216; + background-image: linear-gradient(to top, #36A2EF, #36A2EF 2px, transparent 2px, transparent 100%); + background-size: 100% 100%; + outline: none; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } + .euiTextArea:disabled { + cursor: not-allowed; + color: #535966; + -webkit-text-fill-color: #535966; + background: #202128; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } + .euiTextArea:disabled::-webkit-input-placeholder { + color: #535966; + opacity: 1; } + .euiTextArea:disabled::-moz-placeholder { + color: #535966; + opacity: 1; } + .euiTextArea:disabled::placeholder { + color: #535966; + opacity: 1; } + .euiTextArea[readOnly] { + cursor: default; + background: #1D1E24; + border-color: transparent; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } + .euiTextArea:-webkit-autofill { + -webkit-text-fill-color: #343741; } + .euiTextArea:-webkit-autofill ~ .euiFormControlLayoutIcons { + color: #343741; } + .euiTextArea--compressed { + background-color: #16171c; + background-repeat: no-repeat; + background-size: 0% 100%; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 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, #F86B63, #F86B63 2px, transparent 2px, transparent 100%); + background-size: 100%; } + .euiTextArea--compressed:focus { + background-color: #111216; + background-image: linear-gradient(to top, #36A2EF, #36A2EF 2px, transparent 2px, transparent 100%); + background-size: 100% 100%; + outline: none; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } + .euiTextArea--compressed:disabled { + cursor: not-allowed; + color: #535966; + -webkit-text-fill-color: #535966; + background: #202128; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } + .euiTextArea--compressed:disabled::-webkit-input-placeholder { + color: #535966; + opacity: 1; } + .euiTextArea--compressed:disabled::-moz-placeholder { + color: #535966; + opacity: 1; } + .euiTextArea--compressed:disabled::placeholder { + color: #535966; + opacity: 1; } + .euiTextArea--compressed[readOnly] { + cursor: default; + background: #1D1E24; + border-color: transparent; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } + .euiTextArea--inGroup { + box-shadow: none !important; + border-radius: 0; } + .euiTextArea, .euiTextArea--compressed { + height: auto; } + +.euiTextArea--resizeVertical { + resize: vertical; } + +.euiTextArea--resizeHorizontal { + resize: horizontal; } + +.euiTextArea--resizeBoth { + resize: both; } + +.euiTextArea--resizeNone { + resize: none; } + +.euiHeader { + box-shadow: 0 0.7px 1.4px rgba(0, 0, 0, 0.175), 0 1.9px 4px rgba(0, 0, 0, 0.125), 0 4.5px 10px rgba(0, 0, 0, 0.125); + height: 49px; + position: relative; + z-index: 999; + display: -webkit-flex; + display: flex; + -webkit-justify-content: space-between; + justify-content: space-between; + background: #1D1E24; + border-bottom: 1px solid #131417; } + .euiHeader--fixed { + z-index: 1000; + position: fixed; + top: 0; + left: 0; + right: 0; } + +.euiHeader--fixed + .euiHeader--fixed { + top: 48px; } + +.euiHeader--dark { + background-color: #131317; + border-bottom-color: #131417; } + .euiHeader--dark .euiHeaderLogo__text, + .euiHeader--dark .euiHeaderLink, + .euiHeader--dark .euiHeaderSectionItemButton { + color: #FFF; } + .euiHeader--dark .euiHeaderLink-isActive { + color: #36A2EF; } + .euiHeader--dark .euiHeaderSectionItem:after { + background: #25262E; } + .euiHeader--dark .euiHeaderLogo:focus, + .euiHeader--dark .euiHeaderLink:focus, + .euiHeader--dark .euiHeaderSectionItemButton:focus { + background: #1b5178; } + .euiHeader--dark .euiHeaderSectionItemButton__notification--badge { + box-shadow: 0 0 0 1px #131317; } + .euiHeader--dark .euiHeaderSectionItemButton__notification--dot { + stroke: #131317; } + +.euiHeaderProfile { + padding: 16px; } + +.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; } + +.euiHeaderLogo { + text-align: left; + position: relative; + height: 40px; + line-height: 40px; + min-width: 41px; + padding: 0 13px 0 12px; + display: -webkit-inline-flex; + display: inline-flex; + -webkit-align-items: center; + align-items: center; + vertical-align: middle; + white-space: nowrap; } + .euiHeaderLogo:hover { + text-decoration: underline; } + .euiHeaderLogo:focus { + text-decoration: underline; + background: rgba(54, 162, 239, 0.3); } + .euiHeaderLogo:focus, .euiHeaderLogo:hover { + text-decoration: none; } + +.euiHeaderLogo__text { + color: #DFE5EF; + font-size: 22px; + font-size: 1.57143rem; + line-height: 2.28571rem; + font-weight: 700; + padding-left: 16px; + font-weight: 300; } + +@media only screen and (max-width: 574px) { + .euiHeaderLogo { + padding: 0 12px; } + .euiHeaderLogo__icon.euiIcon--xLarge { + width: 24px; + height: 24px; } + .euiHeaderLogo__text { + color: #DFE5EF; + font-size: 16px; + font-size: 1.14286rem; + line-height: 1.71429rem; + font-weight: 700; + font-weight: 400; } } + +.euiHeaderAlert { + min-width: 300px; + position: relative; + margin-bottom: 24px; + padding: 0 8px 24px; + border-bottom: 1px solid #343741; + 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 { + color: #DFE5EF; + font-size: 16px; + font-size: 1.14286rem; + line-height: 1.71429rem; + font-weight: 700; + margin-bottom: 8px; } + .euiHeaderAlert .euiHeaderAlert__text { + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + margin-bottom: 16px; } + .euiHeaderAlert .euiHeaderAlert__action { + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; } + .euiHeaderAlert .euiHeaderAlert__date { + font-size: 12px; + font-size: 0.85714rem; + line-height: 1.14286rem; + color: #98A2B3; } + +.euiHeaderBreadcrumbs { + margin-left: 12px; + margin-right: 12px; + display: -webkit-flex; + display: flex; + -webkit-align-items: center; + align-items: center; + -webkit-flex-grow: 1; + flex-grow: 1; } + +.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: #343741; + 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: #1D1E24; } + .euiHeaderSectionItemButton__notification--badge { + top: 9%; + right: 9%; + box-shadow: 0 0 0 1px #1D1E24; } + +.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%; } } + +.euiHealth { + display: inline-block; } + +.euiHealth--textSizeXS { + font-size: 12px; + font-size: 0.85714rem; + line-height: 1.14286rem; } + +.euiHealth--textSizeS { + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; } + +.euiHealth--textSizeM { + font-size: 16px; + font-size: 1.14286rem; + line-height: 1.71429rem; } + +.euiHealth--textSizeInherit { + font-size: inherit; } + +.euiHorizontalRule { + border: none; + height: 1px; + background-color: #343741; + -webkit-flex-shrink: 0; + flex-shrink: 0; + -webkit-flex-grow: 0; + flex-grow: 0; } + .euiHorizontalRule.euiHorizontalRule--full { + width: 100%; } + .euiHorizontalRule.euiHorizontalRule--half { + width: 50%; + margin-left: auto; + margin-right: auto; } + .euiHorizontalRule.euiHorizontalRule--quarter { + width: 25%; + margin-left: auto; + margin-right: auto; } + +.euiHorizontalRule--marginXSmall { + margin: 8px 0; } + +.euiHorizontalRule--marginSmall { + margin: 12px 0; } + +.euiHorizontalRule--marginMedium { + margin: 16px 0; } + +.euiHorizontalRule--marginLarge { + margin: 24px 0; } + +.euiHorizontalRule--marginXLarge { + margin: 32px 0; } + +.euiHorizontalRule--marginXXLarge { + margin: 40px 0; } + +.euiIcon { + -webkit-flex-shrink: 0; + flex-shrink: 0; + display: inline-block; + vertical-align: middle; + fill: currentColor; + -webkit-transform: translate(0, 0); + transform: translate(0, 0); } + .euiIcon:focus { + opacity: 1; + background: rgba(54, 162, 239, 0.3); } + +.euiIcon--app { + fill: #DFE5EF; } + .euiIcon--app .euiIcon__fillSecondary { + fill: #7DDED8; } + +.euiIcon-isLoading { + opacity: 0.05; + background-color: currentColor; + border-radius: 6px; } + +.euiIcon-isLoaded { + -webkit-animation: euiIconLoading 250ms ease-in 0s 1 forwards; + animation: euiIconLoading 250ms ease-in 0s 1 forwards; } + +.euiIcon--accent { + color: #F68FBE; } + +.euiIcon--danger { + color: #F86B63; } + +.euiIcon--ghost { + color: #FFF; } + +.euiIcon--primary { + color: #36A2EF; } + +.euiIcon--secondary { + color: #7DDED8; } + +.euiIcon--success { + color: #7DDED8; } + +.euiIcon--subdued { + color: #7a7f89; } + +.euiIcon--text { + color: #DFE5EF; } + +.euiIcon--warning { + color: #F3D371; } + +.euiIcon--inherit { + color: inherit; } + +.euiIcon--text, +.euiIcon--text .euiIcon__fillSecondary, +.euiIcon--subdued, +.euiIcon--subdued .euiIcon__fillSecondary, +.euiIcon--primary, +.euiIcon--primary .euiIcon__fillSecondary, +.euiIcon--customColor, +.euiIcon--customColor .euiIcon__fillSecondary { + fill: currentColor; } + +.euiIcon__fillNegative { + fill: #D4DAE5; } + +.euiIcon--small { + width: 12px; + height: 12px; } + +.euiIcon--medium { + width: 16px; + height: 16px; } + +.euiIcon--large { + width: 24px; + height: 24px; } + +.euiIcon--xLarge { + width: 32px; + height: 32px; } + +.euiIcon--xxLarge { + width: 40px; + height: 40px; } + +@-webkit-keyframes euiIconLoading { + 0% { + opacity: 0.05; } + 100% { + opacity: 1; } } + +@keyframes euiIconLoading { + 0% { + opacity: 0.05; } + 100% { + opacity: 1; } } + +/** + * 1. Fix for IE where the image correctly resizes in width but doesn't collapse its height + (https://github.com/philipwalton/flexbugs/issues/75#issuecomment-134702421) + */ +.euiImage { + display: inline-block; + max-width: 100%; + position: relative; + min-height: 1px; + /* 1 */ + line-height: 0; + -webkit-flex-shrink: 0; + flex-shrink: 0; } + .euiImage .euiImage__img { + margin-bottom: 0; } + .euiImage.euiImage--hasShadow .euiImage__img { + box-shadow: 0 0.9px 4px -1px rgba(0, 0, 0, 0.2), 0 2.6px 8px -1px rgba(0, 0, 0, 0.15), 0 5.7px 12px -1px rgba(0, 0, 0, 0.125), 0 15px 15px -1px rgba(0, 0, 0, 0.1); } + .euiImage .euiImage__button { + position: relative; + cursor: pointer; + transition: all 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); } + .euiImage .euiImage__button:focus { + outline: 2px solid #36A2EF; } + .euiImage .euiImage__button:hover .euiImage__icon { + visibility: visible; + fill-opacity: 1; } + .euiImage .euiImage__button--fullWidth { + width: 100%; } + .euiImage.euiImage--allowFullScreen:hover .euiImage__caption { + text-decoration: underline; } + .euiImage.euiImage--allowFullScreen:not(.euiImage--hasShadow) .euiImage__button:hover, + .euiImage.euiImage--allowFullScreen:not(.euiImage--hasShadow) .euiImage__button:focus { + box-shadow: 0 0.9px 4px -1px rgba(0, 0, 0, 0.2), 0 2.6px 8px -1px rgba(0, 0, 0, 0.15), 0 5.7px 12px -1px rgba(0, 0, 0, 0.125), 0 15px 15px -1px rgba(0, 0, 0, 0.1); } + .euiImage.euiImage--allowFullScreen.euiImage--hasShadow .euiImage__button:hover, + .euiImage.euiImage--allowFullScreen.euiImage--hasShadow .euiImage__button:focus { + box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25), 0 3.6px 13px rgba(0, 0, 0, 0.175), 0 8.4px 23px rgba(0, 0, 0, 0.15), 0 23px 35px rgba(0, 0, 0, 0.125); } + .euiImage.euiImage--small .euiImage__img { + width: 8.57143rem; } + .euiImage.euiImage--medium .euiImage__img { + width: 14.28571rem; } + .euiImage.euiImage--large .euiImage__img { + width: 25.71429rem; } + .euiImage.euiImage--xlarge .euiImage__img { + width: 42.85714rem; } + .euiImage.euiImage--fullWidth { + width: 100%; } + .euiImage.euiImage--original .euiImage__img { + width: auto; + max-width: 100%; } + .euiImage.euiImage--floatLeft { + float: left; } + .euiImage.euiImage--floatLeft[class*='euiImage--margin'] { + margin-left: 0; + margin-top: 0; } + .euiImage.euiImage--floatRight { + float: right; } + .euiImage.euiImage--floatRight[class*='euiImage--margin'] { + margin-right: 0; + margin-top: 0; } + .euiImage.euiImage--marginSmall { + margin: 8px; } + .euiImage.euiImage--marginMedium { + margin: 16px; } + .euiImage.euiImage--marginLarge { + margin: 24px; } + .euiImage.euiImage--marginXlarge { + margin: 32px; } + +.euiImage__img { + width: 100%; + vertical-align: middle; } + +.euiImage__caption { + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + margin-top: 4px; + text-align: center; } + +.euiImage__icon { + visibility: hidden; + fill-opacity: 0; + position: absolute; + right: 16px; + top: 16px; + transition: fill-opacity 350ms cubic-bezier(0.694, 0.0482, 0.335, 1); + cursor: pointer; } + +.euiImage-isFullScreen { + position: relative; + max-height: 80vh; + max-width: 80vw; + -webkit-animation: euiImageFullScreen 500ms cubic-bezier(0.34, 1.61, 0.7, 1); + animation: euiImageFullScreen 500ms cubic-bezier(0.34, 1.61, 0.7, 1); } + .euiImage-isFullScreen:hover .euiImage__button { + box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25), 0 3.6px 13px rgba(0, 0, 0, 0.175), 0 8.4px 23px rgba(0, 0, 0, 0.15), 0 23px 35px rgba(0, 0, 0, 0.125); } + .euiImage-isFullScreen:hover .euiImage__caption { + text-decoration: underline; } + .euiImage-isFullScreen__img { + max-height: 80vh; + max-width: 80vw; + vertical-align: middle; + cursor: pointer; + transition: all 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); } + +.euiImage-isFullScreenCloseIcon { + position: absolute; + right: 16px; + top: 16px; + pointer-events: none; } + +@-webkit-keyframes euiImageFullScreen { + 0% { + opacity: 0; + -webkit-transform: translateY(64px); + transform: translateY(64px); } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); } } + +@keyframes euiImageFullScreen { + 0% { + opacity: 0; + -webkit-transform: translateY(64px); + transform: translateY(64px); } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); } } + +@media only screen and (max-width: 574px) { + .euiImage.euiImage--floatLeft, .euiImage.euiImage--floatRight { + float: none; } + .euiImage.euiImage--floatLeft[class*='euiImage--margin'], .euiImage.euiImage--floatRight[class*='euiImage--margin'] { + margin-top: inherit; + margin-right: inherit; + margin-bottom: inherit; + margin-left: inherit; } } + +@media only screen and (min-width: 575px) and (max-width: 767px) { + .euiImage.euiImage--floatLeft, .euiImage.euiImage--floatRight { + float: none; } + .euiImage.euiImage--floatLeft[class*='euiImage--margin'], .euiImage.euiImage--floatRight[class*='euiImage--margin'] { + margin-top: inherit; + margin-right: inherit; + margin-bottom: inherit; + margin-left: inherit; } } + +@media only screen and (min-width: 768px) and (max-width: 991px) { + .euiImage.euiImage--floatLeft, .euiImage.euiImage--floatRight { + float: none; } + .euiImage.euiImage--floatLeft[class*='euiImage--margin'], .euiImage.euiImage--floatRight[class*='euiImage--margin'] { + margin-top: inherit; + margin-right: inherit; + margin-bottom: inherit; + margin-left: inherit; } } + +/** + * 1. Default to grid of 3 + */ +.euiKeyPadMenu { + display: -webkit-flex; + display: flex; + -webkit-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + flex-wrap: wrap; + width: 288px; + max-width: 100%; } + +/** + * 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", -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; + color: #98A2B3; + border: 1px solid #343741; + border-color: transparent; + border-radius: 6px; + transition: border-color 150ms ease-in, box-shadow 150ms ease-in; } + .euiKeyPadMenuItem:not(:disabled):hover, .euiKeyPadMenuItem:not(:disabled):focus { + box-shadow: 0 0.8px 0.8px rgba(0, 0, 0, 0.1), 0 2.3px 2px rgba(0, 0, 0, 0.075); + border-color: #343741; } + .euiKeyPadMenuItem:not(:disabled):hover .euiKeyPadMenuItem__icon, .euiKeyPadMenuItem:not(:disabled):focus .euiKeyPadMenuItem__icon { + -webkit-transform: translateY(0); + transform: translateY(0); } + .euiKeyPadMenuItem:disabled { + color: #515761; + cursor: not-allowed; } + .euiKeyPadMenuItem:disabled .euiKeyPadMenuItem__icon { + -webkit-filter: grayscale(100%); + filter: grayscale(100%); } + .euiKeyPadMenuItem:disabled .euiKeyPadMenuItem__icon svg * { + fill: #515761; } + +.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; } + .euiKeyPadMenuItem--hasBetaBadge .euiKeyPadMenuItem__inner { + position: relative; } + .euiKeyPadMenuItem--hasBetaBadge .euiKeyPadMenuItem__inner .euiKeyPadMenuItem__betaBadgeWrapper { + position: absolute; + top: 4px; + right: 8px; + z-index: 3; } + .euiKeyPadMenuItem--hasBetaBadge .euiKeyPadMenuItem__inner .euiKeyPadMenuItem__betaBadgeWrapper .euiKeyPadMenuItem__betaBadge:not(.euiBetaBadge--iconOnly) { + padding: 0 6px; + /* 2 */ + overflow: hidden; + /* 2 */ + letter-spacing: 3rem; + /* 2 */ } + +.euiKeyPadMenuItem__betaBadge { + width: 20px; + height: 20px; + line-height: 20px; + color: #FFF; + background-color: #343741; + box-shadow: none; } + .euiKeyPadMenuItem__betaBadge .euiBetaBadge__icon { + width: 12px; + height: 12px; } + +.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); + -webkit-transform: translateY(2px); + transform: translateY(2px); + margin-bottom: 12px; } + +.euiKeyPadMenuItem__label { + font-size: 12px; + font-weight: 500; + line-height: 16px; + text-align: center; } + +.euiLink { + text-align: left; } + .euiLink:hover { + text-decoration: underline; } + .euiLink:focus { + text-decoration: underline; + background: rgba(54, 162, 239, 0.3); } + .euiLink .euiLink__externalIcon { + margin-left: 4px; } + .euiLink.euiLink-disabled { + text-decoration: none; + cursor: default; } + .euiLink.euiLink--subdued { + color: #7a7f89; } + .euiLink.euiLink--subdued:hover, .euiLink.euiLink--subdued:focus { + color: #62666e; + text-decoration: underline; } + .euiLink.euiLink--subdued:focus { + background-color: rgba(122, 127, 137, 0.3); + outline: 2px solid currentColor; + outline-offset: 0px; } + .euiLink.euiLink--subdued:focus:focus-visible { + outline-style: auto; } + .euiLink.euiLink--subdued:focus:not(:focus-visible) { + outline: none; } + .euiLink.euiLink--primary { + color: #36A2EF; } + .euiLink.euiLink--primary:hover, .euiLink.euiLink--primary:focus { + color: #128ae0; + text-decoration: underline; } + .euiLink.euiLink--primary:focus { + background-color: rgba(54, 162, 239, 0.3); + outline: 2px solid currentColor; + outline-offset: 0px; } + .euiLink.euiLink--primary:focus:focus-visible { + outline-style: auto; } + .euiLink.euiLink--primary:focus:not(:focus-visible) { + outline: none; } + .euiLink.euiLink--secondary { + color: #7DDED8; } + .euiLink.euiLink--secondary:hover, .euiLink.euiLink--secondary:focus { + color: #54d4cc; + text-decoration: underline; } + .euiLink.euiLink--secondary:focus { + background-color: rgba(125, 222, 216, 0.3); + outline: 2px solid currentColor; + outline-offset: 0px; } + .euiLink.euiLink--secondary:focus:focus-visible { + outline-style: auto; } + .euiLink.euiLink--secondary:focus:not(:focus-visible) { + outline: none; } + .euiLink.euiLink--accent { + color: #F68FBE; } + .euiLink.euiLink--accent:hover, .euiLink.euiLink--accent:focus { + color: #f260a3; + text-decoration: underline; } + .euiLink.euiLink--accent:focus { + background-color: rgba(246, 143, 190, 0.3); + outline: 2px solid currentColor; + outline-offset: 0px; } + .euiLink.euiLink--accent:focus:focus-visible { + outline-style: auto; } + .euiLink.euiLink--accent:focus:not(:focus-visible) { + outline: none; } + .euiLink.euiLink--warning { + color: #F3D371; } + .euiLink.euiLink--warning:hover, .euiLink.euiLink--warning:focus { + color: #efc442; + text-decoration: underline; } + .euiLink.euiLink--warning:focus { + background-color: rgba(243, 211, 113, 0.3); + outline: 2px solid currentColor; + outline-offset: 0px; } + .euiLink.euiLink--warning:focus:focus-visible { + outline-style: auto; } + .euiLink.euiLink--warning:focus:not(:focus-visible) { + outline: none; } + .euiLink.euiLink--danger { + color: #F86B63; } + .euiLink.euiLink--danger:hover, .euiLink.euiLink--danger:focus { + color: #f63d32; + text-decoration: underline; } + .euiLink.euiLink--danger:focus { + background-color: rgba(248, 107, 99, 0.3); + outline: 2px solid currentColor; + outline-offset: 0px; } + .euiLink.euiLink--danger:focus:focus-visible { + outline-style: auto; } + .euiLink.euiLink--danger:focus:not(:focus-visible) { + outline: none; } + .euiLink.euiLink--text { + color: #DFE5EF; } + .euiLink.euiLink--text:hover, .euiLink.euiLink--text:focus { + color: #bdc9de; + text-decoration: underline; } + .euiLink.euiLink--text:focus { + background-color: rgba(223, 229, 239, 0.3); + outline: 2px solid currentColor; + outline-offset: 0px; } + .euiLink.euiLink--text:focus:focus-visible { + outline-style: auto; } + .euiLink.euiLink--text:focus:not(:focus-visible) { + outline: none; } + .euiLink.euiLink--ghost { + color: #FFF; } + .euiLink.euiLink--ghost:hover, .euiLink.euiLink--ghost:focus { + color: #e6e6e6; + text-decoration: underline; } + .euiLink.euiLink--ghost:focus { + background-color: rgba(255, 255, 255, 0.3); + outline: 2px solid currentColor; + outline-offset: 0px; } + .euiLink.euiLink--ghost:focus:focus-visible { + outline-style: auto; } + .euiLink.euiLink--ghost:focus:not(:focus-visible) { + outline: none; } + +button.euiLink { + -webkit-user-select: text; + -moz-user-select: text; + user-select: text; } + +/** + * The List Group component provides neatly styled lists containing plain text + * or links. The outer container can be bordered, with padding, or borderless + * with links flush to the sides. + */ +.euiListGroup.euiListGroup-flush { + padding: 0; + border: none; } + +.euiListGroup.euiListGroup-bordered { + border-radius: 6px; + border: 1px solid #343741; } + +.euiListGroup-maxWidthDefault { + max-width: 400px; } + +.euiListGroup--gutterSmall { + padding: 8px; } + .euiListGroup--gutterSmall .euiListGroupItem:not(:first-of-type) { + margin-top: 8px; } + +.euiListGroup--gutterMedium { + padding: 16px; } + .euiListGroup--gutterMedium .euiListGroupItem:not(:first-of-type) { + margin-top: 16px; } + +.euiListGroupItem { + padding: 0; + border-radius: 6px; + display: -webkit-flex; + display: flex; + -webkit-align-items: center; + align-items: center; + transition: background-color 150ms; + position: relative; } + .euiListGroupItem.euiListGroupItem-isActive, .euiListGroupItem.euiListGroupItem-isClickable:hover { + background-color: rgba(52, 55, 65, 0.25); } + .euiListGroupItem.euiListGroupItem-isClickable:focus-within { + background-color: rgba(52, 55, 65, 0.25); } + .euiListGroupItem.euiListGroupItem--ghost.euiListGroupItem-isClickable:hover { + background-color: rgba(255, 255, 255, 0.1); } + .euiListGroupItem.euiListGroupItem--ghost.euiListGroupItem-isClickable:focus-within { + background-color: rgba(255, 255, 255, 0.1); } + .euiListGroupItem.euiListGroupItem-isClickable:hover .euiListGroupItem__button, + .euiListGroupItem .euiListGroupItem__button:hover, + .euiListGroupItem .euiListGroupItem__button:focus { + text-decoration: underline; } + .euiListGroupItem.euiListGroupItem-isDisabled, .euiListGroupItem.euiListGroupItem-isDisabled:hover, .euiListGroupItem.euiListGroupItem-isDisabled:focus, + .euiListGroupItem.euiListGroupItem-isDisabled .euiListGroupItem__button:hover, + .euiListGroupItem.euiListGroupItem-isDisabled .euiListGroupItem__button:focus { + color: #515761; + cursor: not-allowed; + background-color: transparent; + text-decoration: none; } + +@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { + .euiListGroupItem__button:hover, + .euiListGroupItem__button:focus { + background-color: rgba(52, 55, 65, 0.25); + border-radius: 6px; } + .euiListGroupItem__button:hover .euiListGroupItem--ghost .euiListGroupItem__button:hover, + .euiListGroupItem__button:hover .euiListGroupItem--ghost .euiListGroupItem__button:focus, + .euiListGroupItem__button:focus .euiListGroupItem--ghost .euiListGroupItem__button:hover, + .euiListGroupItem__button:focus .euiListGroupItem--ghost .euiListGroupItem__button:focus { + background-color: rgba(255, 255, 255, 0.1); } } + +.euiListGroupItem__text, +.euiListGroupItem__button { + line-height: 24px; + padding: 4px 8px; + display: -webkit-flex; + display: flex; + -webkit-align-items: center; + align-items: center; + -webkit-flex: 1 0 auto; + flex: 1 0 auto; + text-align: left; + max-width: 100%; + font-weight: inherit; } + .euiListGroupItem-hasExtraAction .euiListGroupItem__text, .euiListGroupItem-hasExtraAction + .euiListGroupItem__button { + max-width: calc(100% - 32px); } + .euiListGroupItem--primary .euiListGroupItem__text:not(:disabled), .euiListGroupItem--primary + .euiListGroupItem__button:not(:disabled) { + color: #36A2EF; } + .euiListGroupItem--text .euiListGroupItem__text:not(:disabled), .euiListGroupItem--text + .euiListGroupItem__button:not(:disabled) { + color: #DFE5EF; } + .euiListGroupItem--subdued .euiListGroupItem__text:not(:disabled), .euiListGroupItem--subdued + .euiListGroupItem__button:not(:disabled) { + color: #7a7f89; } + .euiListGroupItem--ghost .euiListGroupItem__text:not(:disabled), .euiListGroupItem--ghost + .euiListGroupItem__button:not(:disabled) { + color: #FFF; } + .euiListGroupItem-isActive:not(.euiListGroupItem--ghost) .euiListGroupItem__text, .euiListGroupItem-isActive:not(.euiListGroupItem--ghost) + .euiListGroupItem__button { + color: #DFE5EF; } + +.euiListGroupItem__label { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } + +.euiListGroupItem__extraAction { + opacity: 0; + margin-right: 8px; + transition: opacity 150ms; } + .euiListGroupItem:not(.euiListGroupItem-isDisabled):focus .euiListGroupItem__extraAction, + .euiListGroupItem:not(.euiListGroupItem-isDisabled):hover .euiListGroupItem__extraAction, .euiListGroupItem__extraAction.euiListGroupItem__extraAction-alwaysShow, .euiListGroupItem__extraAction:focus { + opacity: 1; } + +.euiListGroupItem__icon { + margin-right: 12px; + -webkit-flex-grow: 0; + flex-grow: 0; + -webkit-flex-shrink: 0; + flex-shrink: 0; } + +.euiListGroupItem--xSmall { + font-size: 12px; } + +.euiListGroupItem--small { + font-size: 14px; } + +.euiListGroupItem--medium { + font-size: 14px; } + +.euiListGroupItem--large { + font-size: 22px; } + +.euiListGroupItem--xSmall, +.euiListGroupItem--small { + font-weight: 500; + letter-spacing: 0; } + +.euiListGroupItem--xSmall .euiListGroupItem__button, +.euiListGroupItem--xSmall .euiListGroupItem__text { + line-height: 16px; } + +.euiListGroupItem--large .euiListGroupItem__button, +.euiListGroupItem--large .euiListGroupItem__text { + line-height: 32px; } + +.euiListGroupItem--wrapText .euiListGroupItem__button, +.euiListGroupItem--wrapText .euiListGroupItem__text { + width: 100%; + word-break: break-word; } + +.euiListGroupItem--wrapText .euiListGroupItem__label { + white-space: inherit; } + +.euiListGroup-flush .euiListGroupItem { + border-radius: 0; } + +.euiListGroup-bordered .euiListGroupItem:first-child { + border-top-left-radius: 6px; + border-top-right-radius: 6px; } + +.euiListGroup-bordered .euiListGroupItem:last-child { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; } + +.euiListGroupItem__tooltip { + width: 100%; } + +.euiPinnableListGroup__itemExtraAction svg { + -webkit-transform: rotate(45deg); + transform: rotate(45deg); } + +.euiPinnableListGroup__itemExtraAction-pinned:not(:hover):not(:focus) { + color: #62656d; } + +.euiLoadingKibana { + position: relative; + display: inline-block; } + .euiLoadingKibana:before, .euiLoadingKibana:after { + position: absolute; + content: ''; + width: 90%; + left: 5%; + border-radius: 50%; + opacity: .2; + z-index: 1; } + .euiLoadingKibana:before { + box-shadow: 0 0 8px #FFF; + -webkit-animation: 1s euiLoadingKibanaPulsateAndFade cubic-bezier(0.694, 0.0482, 0.335, 1) infinite; + animation: 1s euiLoadingKibanaPulsateAndFade cubic-bezier(0.694, 0.0482, 0.335, 1) infinite; } + .euiLoadingKibana:after { + background-color: #FFF; + -webkit-animation: 1s euiLoadingKibanaPulsate cubic-bezier(0.694, 0.0482, 0.335, 1) infinite; + animation: 1s euiLoadingKibanaPulsate cubic-bezier(0.694, 0.0482, 0.335, 1) infinite; } + .euiLoadingKibana .euiLoadingKibana__icon { + display: block; } + +/** + * 1. Requires pixel math for animation. + */ +.euiLoadingKibana--medium { + width: 16px; } + .euiLoadingKibana--medium:before, .euiLoadingKibana--medium:after { + height: 3px; + /* 1 */ + bottom: -4px; } + .euiLoadingKibana--medium .euiLoadingKibana__icon { + z-index: 999; + -webkit-animation: 1s euiLoadingKibanaBounceMedium cubic-bezier(0.694, 0.0482, 0.335, 1) infinite; + animation: 1s euiLoadingKibanaBounceMedium cubic-bezier(0.694, 0.0482, 0.335, 1) infinite; } + +/** + * 1. Requires pixel math for animation. + */ +.euiLoadingKibana--large { + width: 24px; } + .euiLoadingKibana--large:before, .euiLoadingKibana--large:after { + height: 6px; + /* 1 */ + bottom: -8px; } + .euiLoadingKibana--large .euiLoadingKibana__icon { + -webkit-animation: 1s euiLoadingKibanaBounceLarge cubic-bezier(0.694, 0.0482, 0.335, 1) infinite; + animation: 1s euiLoadingKibanaBounceLarge cubic-bezier(0.694, 0.0482, 0.335, 1) infinite; } + +.euiLoadingKibana--xLarge { + width: 32px; } + .euiLoadingKibana--xLarge:before, .euiLoadingKibana--xLarge:after { + height: 8px; + bottom: -12px; } + .euiLoadingKibana--xLarge .euiLoadingKibana__icon { + -webkit-animation: 1s euiLoadingKibanaBounceXLarge cubic-bezier(0.694, 0.0482, 0.335, 1) infinite; + animation: 1s euiLoadingKibanaBounceXLarge cubic-bezier(0.694, 0.0482, 0.335, 1) infinite; } + +@-webkit-keyframes euiLoadingKibanaBounceMedium { + 50% { + -webkit-transform: translateY(-8px); + transform: translateY(-8px); } } + +@keyframes euiLoadingKibanaBounceMedium { + 50% { + -webkit-transform: translateY(-8px); + transform: translateY(-8px); } } + +@-webkit-keyframes euiLoadingKibanaBounceLarge { + 50% { + -webkit-transform: translateY(-12px); + transform: translateY(-12px); } } + +@keyframes euiLoadingKibanaBounceLarge { + 50% { + -webkit-transform: translateY(-12px); + transform: translateY(-12px); } } + +@-webkit-keyframes euiLoadingKibanaBounceXLarge { + 50% { + -webkit-transform: translateY(-16px); + transform: translateY(-16px); } } + +@keyframes euiLoadingKibanaBounceXLarge { + 50% { + -webkit-transform: translateY(-16px); + transform: translateY(-16px); } } + +@-webkit-keyframes euiLoadingKibanaPulsateAndFade { + 0% { + opacity: 0; } + 50% { + -webkit-transform: scale(0.5); + transform: scale(0.5); + opacity: .1; } + 100% { + opacity: 0; } } + +@keyframes euiLoadingKibanaPulsateAndFade { + 0% { + opacity: 0; } + 50% { + -webkit-transform: scale(0.5); + transform: scale(0.5); + opacity: .1; } + 100% { + opacity: 0; } } + +@-webkit-keyframes euiLoadingKibanaPulsate { + 0% { + opacity: .15; } + 50% { + -webkit-transform: scale(0.5); + transform: scale(0.5); + opacity: .05; } + 100% { + opacity: .15; } } + +@keyframes euiLoadingKibanaPulsate { + 0% { + opacity: .15; } + 50% { + -webkit-transform: scale(0.5); + transform: scale(0.5); + opacity: .05; } + 100% { + opacity: .15; } } + +.euiLoadingElastic { + position: relative; + display: inline-block; } + +.euiLoadingElastic--medium { + width: 16px; } + +.euiLoadingElastic--large { + width: 24px; } + +.euiLoadingElastic--xLarge { + width: 32px; } + +.euiLoadingElastic--xxLarge { + width: 40px; } + +.euiLoadingElastic path { + -webkit-animation-name: euiLoadingElastic; + animation-name: euiLoadingElastic; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + -webkit-animation-direction: alternate; + animation-direction: alternate; + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-timing-function: cubic-bezier(0, 0.63, 0.49, 1); + animation-timing-function: cubic-bezier(0, 0.63, 0.49, 1); + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-transform-origin: 50% 50%; + transform-origin: 50% 50%; } + +.euiLoadingElastic path:nth-of-type(1) { + -webkit-animation-delay: 0s; + animation-delay: 0s; } + +.euiLoadingElastic path:nth-of-type(2) { + -webkit-animation-delay: .035s; + animation-delay: .035s; } + +.euiLoadingElastic path:nth-of-type(3) { + -webkit-animation-delay: .125s; + animation-delay: .125s; } + +.euiLoadingElastic path:nth-of-type(4) { + -webkit-animation-delay: .155s; + animation-delay: .155s; } + +.euiLoadingElastic path:nth-of-type(5) { + -webkit-animation-delay: .075s; + animation-delay: .075s; } + +.euiLoadingElastic path:nth-of-type(6) { + -webkit-animation-delay: .06s; + animation-delay: .06s; } + +@-webkit-keyframes euiLoadingElastic { + 0% { + -webkit-transform: scale3d(0, 0, -0.7); + transform: scale3d(0, 0, -0.7); + opacity: 0; } + 40% { + -webkit-transform: scale3d(1, 1, 2); + transform: scale3d(1, 1, 2); + opacity: 1; } + 50% { + -webkit-transform: scale3d(0.99, 0.99, 2); + transform: scale3d(0.99, 0.99, 2); } + 70% { + -webkit-transform: scale3d(0.96, 0.96, -2.5); + transform: scale3d(0.96, 0.96, -2.5); } + 100% { + -webkit-transform: scale3d(0.98, 0.98, 2); + transform: scale3d(0.98, 0.98, 2); } } + +@keyframes euiLoadingElastic { + 0% { + -webkit-transform: scale3d(0, 0, -0.7); + transform: scale3d(0, 0, -0.7); + opacity: 0; } + 40% { + -webkit-transform: scale3d(1, 1, 2); + transform: scale3d(1, 1, 2); + opacity: 1; } + 50% { + -webkit-transform: scale3d(0.99, 0.99, 2); + transform: scale3d(0.99, 0.99, 2); } + 70% { + -webkit-transform: scale3d(0.96, 0.96, -2.5); + transform: scale3d(0.96, 0.96, -2.5); } + 100% { + -webkit-transform: scale3d(0.98, 0.98, 2); + transform: scale3d(0.98, 0.98, 2); } } + +.euiLoadingChart { + height: 32px; + z-index: 500; + overflow: hidden; + display: inline-block; } + +.euiLoadingChart__bar { + height: 100%; + width: 8px; + display: inline-block; + margin-bottom: -16px; + margin-left: 2px; + -webkit-animation: euiLoadingChart 1s infinite; + animation: euiLoadingChart 1s infinite; } + .euiLoadingChart__bar:nth-child(1) { + background-color: #54B399; } + .euiLoadingChart__bar:nth-child(2) { + background-color: #6092C0; + -webkit-animation-delay: .1s; + animation-delay: .1s; } + .euiLoadingChart__bar:nth-child(3) { + background-color: #D36086; + -webkit-animation-delay: .2s; + animation-delay: .2s; } + .euiLoadingChart__bar:nth-child(4) { + background-color: #9170B8; + -webkit-animation-delay: .3s; + animation-delay: .3s; } + +.euiLoadingChart--mono .euiLoadingChart__bar:nth-child(1) { + background-color: #343741; } + +.euiLoadingChart--mono .euiLoadingChart__bar:nth-child(2) { + background-color: #3c3f49; } + +.euiLoadingChart--mono .euiLoadingChart__bar:nth-child(3) { + background-color: #444750; } + +.euiLoadingChart--mono .euiLoadingChart__bar:nth-child(4) { + background-color: #4c4f58; } + +.euiLoadingChart--medium { + height: 16px; } + .euiLoadingChart--medium > span { + width: 2px; + margin-left: 2px; + margin-bottom: 8px; } + +.euiLoadingChart--large { + height: 24px; } + .euiLoadingChart--large > span { + width: 4px; + margin-left: 2px; + margin-bottom: 12px; } + +.euiLoadingChart--xLarge { + height: 32px; } + .euiLoadingChart--xLarge > span { + width: 8px; + margin-left: 4px; + margin-bottom: 16px; } + +@-webkit-keyframes euiLoadingChart { + 0% { + -webkit-transform: translateY(0); + transform: translateY(0); } + 50% { + -webkit-transform: translateY(66%); + transform: translateY(66%); } + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); } } + +@keyframes euiLoadingChart { + 0% { + -webkit-transform: translateY(0); + transform: translateY(0); } + 50% { + -webkit-transform: translateY(66%); + transform: translateY(66%); } + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); } } + +.euiLoadingContent__loader { + display: block; + width: 100%; } + +.euiLoadingContent__singleLine { + display: block; + width: 100%; + height: 16px; + margin-bottom: 8px; + border-radius: 6px; + overflow: hidden; } + .euiLoadingContent__singleLine:last-child:not(:only-child) { + width: 75%; } + +.euiLoadingContent__singleLineBackground { + display: block; + width: 220%; + height: 100%; + background: linear-gradient(to right, #2e3039 45%, #282a31 50%, #2e3039 55%); + -webkit-animation: euiLoadingContentGradientLoad 1.5s cubic-bezier(0.694, 0.0482, 0.335, 1) infinite; + animation: euiLoadingContentGradientLoad 1.5s cubic-bezier(0.694, 0.0482, 0.335, 1) infinite; } + +@-webkit-keyframes euiLoadingContentGradientLoad { + 0% { + -webkit-transform: translateX(-53%); + transform: translateX(-53%); } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); } } + +@keyframes euiLoadingContentGradientLoad { + 0% { + -webkit-transform: translateX(-53%); + transform: translateX(-53%); } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); } } + +.euiLoadingSpinner { + -webkit-flex-shrink: 0; + flex-shrink: 0; + display: inline-block; + width: 32px; + height: 32px; + border-radius: 50%; + border: solid 2px #343741; + border-color: #36A2EF #343741 #343741 #343741; + -webkit-animation: euiLoadingSpinner .6s infinite linear; + animation: euiLoadingSpinner .6s infinite linear; } + +.euiLoadingSpinner--small { + width: 8px; + height: 8px; + border-width: 1px; } + +.euiLoadingSpinner--medium { + width: 16px; + height: 16px; + border-width: 1px; } + +.euiLoadingSpinner--large { + width: 24px; + height: 24px; } + +.euiLoadingSpinner--xLarge { + width: 32px; + height: 32px; } + +@-webkit-keyframes euiLoadingSpinner { + from { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); } + to { + -webkit-transform: rotate(359deg); + transform: rotate(359deg); } } + +@keyframes euiLoadingSpinner { + from { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); } + to { + -webkit-transform: rotate(359deg); + transform: rotate(359deg); } } + +.euiMarkdownEditor--isPreviewing .euiMarkdownEditor__toggleContainer { + display: none; } + +.euiMarkdownEditor--fullHeight { + display: -webkit-flex; + display: flex; + -webkit-flex-direction: column; + flex-direction: column; + 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(54, 162, 239, 0.1) !important; } + .euiMarkdownEditorDropZone--isDragging .euiMarkdownEditorTextArea, + .euiMarkdownEditorDropZone--isDragging .euiMarkdownEditorTextArea:focus { + background-image: linear-gradient(to top, #36A2EF, #36A2EF 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(248, 107, 99, 0.1) !important; } + .euiMarkdownEditorDropZone--hasError .euiMarkdownEditorTextArea, + .euiMarkdownEditorDropZone--hasError .euiMarkdownEditorTextArea:focus { + background-image: linear-gradient(to top, #F86B63, #F86B63 2px, transparent 2px, transparent 100%) !important; } + +.euiMarkdownFormat { + font-family: "Inter", -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; + color: #DFE5EF; + font-weight: 400; } + .euiMarkdownFormat--reversed { + color: #25262E; } + .euiMarkdownFormat > div > *:first-child { + margin-top: 0 !important; } + .euiMarkdownFormat > div > * { + margin-top: 0; + margin-bottom: 1em; } + .euiMarkdownFormat > div > *:last-child, + .euiMarkdownFormat .euiCheckbox { + margin-bottom: 0 !important; } + .euiMarkdownFormat .euiCheckbox + *:not(.euiCheckbox) { + margin-top: 1em; } + .euiMarkdownFormat p, + .euiMarkdownFormat blockquote, + .euiMarkdownFormat ul, + .euiMarkdownFormat ol, + .euiMarkdownFormat dl, + .euiMarkdownFormat pre, + .euiMarkdownFormat table { + margin-top: 0; + margin-bottom: 1em; + line-height: 1.5em; } + .euiMarkdownFormat strong { + font-weight: 600; } + .euiMarkdownFormat h1, + .euiMarkdownFormat h2, + .euiMarkdownFormat h3, + .euiMarkdownFormat h4, + .euiMarkdownFormat h5, + .euiMarkdownFormat h6 { + margin-top: 0; + margin-bottom: 0.5em; } + .euiMarkdownFormat h1 { + font-size: 2.25em; + line-height: 1.333333em; + font-weight: 300; } + .euiMarkdownFormat h2 { + font-size: 1.75em; + line-height: 1.428571em; + font-weight: 300; } + .euiMarkdownFormat h3 { + font-size: 1.25em; + line-height: 1.6em; + font-weight: 600; } + .euiMarkdownFormat h4 { + font-size: 1em; + line-height: 1.5em; + font-weight: 600; } + .euiMarkdownFormat h5 { + font-size: 0.875em; + line-height: 1.142857em; + font-weight: 700; } + .euiMarkdownFormat h6 { + font-size: 0.75em; + line-height: 1.333333em; + font-weight: 700; + text-transform: uppercase; } + .euiMarkdownFormat img { + max-width: 100%; + box-sizing: content-box; + border-style: none; } + .euiMarkdownFormat blockquote { + padding: 0 1em; + border-left: 0.25em solid rgba(255, 255, 255, 0.15); } + .euiMarkdownFormat--reversed blockquote { + border-left-color: rgba(29, 30, 36, 0.15); } + .euiMarkdownFormat hr { + border: none; + height: 1px; + background-color: rgba(255, 255, 255, 0.15); + margin: 1.5em 0; } + .euiMarkdownFormat hr::before { + display: table; + content: ''; } + .euiMarkdownFormat hr::after { + display: table; + clear: both; + content: ''; } + .euiMarkdownFormat ul, + .euiMarkdownFormat ol { + padding-left: 1.5em; + margin-top: 0; + margin-bottom: 1em; } + .euiMarkdownFormat ul { + list-style-type: disc; } + .euiMarkdownFormat ol { + list-style-type: decimal; } + .euiMarkdownFormat ul ul { + list-style-type: circle; } + .euiMarkdownFormat ol ol, + .euiMarkdownFormat ul ol { + list-style-type: lower-roman; } + .euiMarkdownFormat ul ul ol, + .euiMarkdownFormat ul ol ol, + .euiMarkdownFormat ol ul ol, + .euiMarkdownFormat ol ol ol { + list-style-type: lower-alpha; } + .euiMarkdownFormat dd { + margin-left: 0; } + .euiMarkdownFormat ul ul, + .euiMarkdownFormat ul ol, + .euiMarkdownFormat ol ol, + .euiMarkdownFormat ol ul { + margin-top: 0; + margin-bottom: 0; } + .euiMarkdownFormat li > p { + margin-bottom: 0.5em; } + .euiMarkdownFormat li + li { + margin-top: 0.25em; } + .euiMarkdownFormat .task-list-item { + list-style-type: none; } + .euiMarkdownFormat .task-list-item + .task-list-item { + margin-top: 0.25em; } + .euiMarkdownFormat .task-list-item input { + margin: 0 .2em .25em -1.6em; + vertical-align: middle; } + .euiMarkdownFormat table { + display: block; + width: 100%; + overflow: auto; + border-left: 1px solid rgba(255, 255, 255, 0.15); + border-spacing: 0; + border-collapse: collapse; } + .euiMarkdownFormat td, + .euiMarkdownFormat th { + padding: 0; } + .euiMarkdownFormat table th, + .euiMarkdownFormat table td { + padding: 0.25em 0.5em; + border-top: 1px solid rgba(255, 255, 255, 0.15); + border-bottom: 1px solid rgba(255, 255, 255, 0.15); } + .euiMarkdownFormat table th:last-child, + .euiMarkdownFormat table td:last-child { + border-right: 1px solid rgba(255, 255, 255, 0.15); } + .euiMarkdownFormat table tr { + background-color: transparent; + border-top: 1px solid rgba(255, 255, 255, 0.15); } + +.euiMarkdownEditorFooter { + display: -webkit-inline-flex; + display: inline-flex; + padding: 4px; + border: 1px solid #343741; + -webkit-align-items: center; + align-items: center; + background: #141519; } + +.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__help { + justify-self: flex-end; } + .euiMarkdownEditorFooter__help > svg { + width: 26px; } + +.euiMarkdownEditorFooter__errors > svg { + color: #7a7f89; } + +.euiMarkdownEditorPreview { + scrollbar-width: thin; + background: #1D1E24; + min-height: "150px"; + overflow-y: auto; + border: 1px solid #343741; + padding: 12px; } + .euiMarkdownEditorPreview::-webkit-scrollbar { + width: 16px; + height: 16px; } + .euiMarkdownEditorPreview::-webkit-scrollbar-thumb { + background-color: rgba(152, 162, 179, 0.5); + border: 6px solid transparent; + background-clip: content-box; } + .euiMarkdownEditorPreview::-webkit-scrollbar-corner, .euiMarkdownEditorPreview::-webkit-scrollbar-track { + background-color: transparent; } + +.euiMarkdownEditorTextArea { + font-family: "Inter", -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: #DFE5EF; + scrollbar-width: thin; + width: 100%; + height: 100%; + min-height: "150px"; + padding: 12px; + border: 1px solid #343741; + border-bottom: none; + line-height: 1.5; + resize: vertical; + background-color: #16171c; + 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; } + @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { + .euiMarkdownEditorTextArea { + line-height: 1em; } } + .euiMarkdownEditorTextArea::-webkit-input-placeholder { + color: #81858f; + opacity: 1; } + .euiMarkdownEditorTextArea::-moz-placeholder { + color: #81858f; + opacity: 1; } + .euiMarkdownEditorTextArea::placeholder { + color: #81858f; + opacity: 1; } + .euiMarkdownEditorTextArea::-webkit-scrollbar { + width: 16px; + height: 16px; } + .euiMarkdownEditorTextArea::-webkit-scrollbar-thumb { + background-color: rgba(152, 162, 179, 0.5); + border: 6px solid transparent; + background-clip: content-box; } + .euiMarkdownEditorTextArea::-webkit-scrollbar-corner, .euiMarkdownEditorTextArea::-webkit-scrollbar-track { + background-color: transparent; } + .euiMarkdownEditorTextArea:focus, + .euiMarkdownEditor:focus-within .euiMarkdownEditorTextArea { + background-color: #111216; + background-image: linear-gradient(to top, #36A2EF, #36A2EF 2px, transparent 2px, transparent 100%); + background-size: 100% 100%; } + +.euiMarkdownEditorToolbar { + display: -webkit-flex; + display: flex; + -webkit-flex-wrap: wrap; + flex-wrap: wrap; + background: #25262E; + border: 1px solid #343741; + border-color: #343741; + 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 #343741; } + +.euiMarkdownTooltip__icon { + -webkit-transform: translateY(-1px); + transform: translateY(-1px); } + +.euiMark { + background-color: transparent; + font-weight: 700; + color: #DFE5EF; } + +/** + * 1. Fix IE overflow issue (min-height) by adding a separate wrapper for the + * flex display. https://github.com/philipwalton/flexbugs#flexbug-3 + * 2. IE has trouble with min-widths on flex elements. Use the pixel value + * from our forms since that's usually the smallest we want them. + */ +.euiModal { + border: 1px solid #343741; + box-shadow: 0 2.7px 9px rgba(0, 0, 0, 0.325), 0 9.4px 24px rgba(0, 0, 0, 0.225), 0 21.8px 43px rgba(0, 0, 0, 0.2); + display: -webkit-flex; + display: flex; + /* 1 */ + position: relative; + background-color: #1D1E24; + border-radius: 6px; + z-index: 8000; + min-width: 400px; + -webkit-animation: euiModal 350ms cubic-bezier(0.34, 1.61, 0.7, 1); + animation: euiModal 350ms cubic-bezier(0.34, 1.61, 0.7, 1); + max-width: calc(100vw - 16px); } + .euiModal:focus { + outline: none; } + .euiModal .euiModal__flex { + /* 1 */ + -webkit-flex: 1 1 auto; + flex: 1 1 auto; + display: -webkit-flex; + display: flex; + -webkit-flex-direction: column; + flex-direction: column; + max-height: 75vh; + overflow: hidden; } + +.euiModal--maxWidth-default { + max-width: MIN(768px, calc(100vw - 16px)); } + +.euiModal--confirmation { + min-width: 400px; } + +.euiModalHeader { + display: -webkit-flex; + display: flex; + -webkit-justify-content: space-between; + justify-content: space-between; + -webkit-align-items: center; + align-items: center; + padding: 24px 40px 16px 24px; + -webkit-flex-grow: 0; + flex-grow: 0; + -webkit-flex-shrink: 0; + flex-shrink: 0; } + +.euiModalHeader__title { + color: #DFE5EF; + font-size: 27px; + font-size: 1.92857rem; + line-height: 2.28571rem; + font-weight: 700; } + +.euiModalBody { + -webkit-flex-grow: 1; + flex-grow: 1; + overflow: hidden; + display: -webkit-flex; + display: flex; + -webkit-flex-direction: column; + flex-direction: column; } + .euiModalBody .euiModalBody__overflow { + 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: 8px 24px; } + .euiModalBody .euiModalBody__overflow::-webkit-scrollbar { + width: 16px; + height: 16px; } + .euiModalBody .euiModalBody__overflow::-webkit-scrollbar-thumb { + background-color: rgba(152, 162, 179, 0.5); + border: 6px solid transparent; + background-clip: content-box; } + .euiModalBody .euiModalBody__overflow::-webkit-scrollbar-corner, .euiModalBody .euiModalBody__overflow::-webkit-scrollbar-track { + background-color: transparent; } + .euiModalBody .euiModalBody__overflow:focus { + outline: none; + /* 1 */ } + .euiModalBody .euiModalBody__overflow[tabindex='0']:focus:focus-visible { + outline-style: auto; + /* 2 */ } + +.euiModalFooter { + display: -webkit-flex; + display: flex; + -webkit-justify-content: flex-end; + justify-content: flex-end; + padding: 16px 24px 24px; + -webkit-flex-grow: 0; + flex-grow: 0; + -webkit-flex-shrink: 0; + flex-shrink: 0; } + .euiModalFooter > * + * { + margin-left: 16px; } + +.euiModalHeader + .euiModalFooter { + padding-top: 8px; } + +.euiModalBody:last-of-type .euiModalBody__overflow { + padding-bottom: 24px; } + +.euiModal__closeIcon { + background-color: rgba(29, 30, 36, 0.9); + position: absolute; + right: 4px; + top: 4px; + z-index: 3; } + +@-webkit-keyframes euiModal { + 0% { + opacity: 0; + -webkit-transform: translateY(32px); + transform: translateY(32px); } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); } } + +@keyframes euiModal { + 0% { + opacity: 0; + -webkit-transform: translateY(32px); + transform: translateY(32px); } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); } } + +@media only screen and (max-width: 574px) { + .euiModal { + position: fixed; + width: 100vw !important; + max-width: none !important; + min-width: 0 !important; + left: 0; + right: 0; + bottom: 0; + top: 0; + border-radius: 0; + border: none; } + .euiModal.euiModal--confirmation { + box-shadow: 0 -2.7px 9px rgba(0, 0, 0, 0.325), 0 -9.4px 24px rgba(0, 0, 0, 0.225), 0 -21.8px 43px rgba(0, 0, 0, 0.2); + top: auto; } + .euiModal .euiModal__flex { + /* 1 */ + max-height: 100vh; } + .euiModalHeader { + width: 100%; } + .euiModalFooter { + width: 100%; + background: #25262E; + padding: 12px 24px !important; + -webkit-justify-content: stretch; + justify-content: stretch; } + .euiModalFooter > * { + -webkit-flex: 1; + flex: 1; } + .euiModalFooter > * + * { + margin-left: 0; } + .euiModalBody { + width: 100%; } + .euiModalBody .euiModalBody__overflow { + padding-bottom: 24px; } } + +@media only screen and (min-width: 575px) and (max-width: 767px) { + .euiModal { + position: fixed; + width: 100vw !important; + max-width: none !important; + min-width: 0 !important; + left: 0; + right: 0; + bottom: 0; + top: 0; + border-radius: 0; + border: none; } + .euiModal.euiModal--confirmation { + box-shadow: 0 -2.7px 9px rgba(0, 0, 0, 0.325), 0 -9.4px 24px rgba(0, 0, 0, 0.225), 0 -21.8px 43px rgba(0, 0, 0, 0.2); + top: auto; } + .euiModal .euiModal__flex { + /* 1 */ + max-height: 100vh; } + .euiModalHeader { + width: 100%; } + .euiModalFooter { + width: 100%; + background: #25262E; + padding: 12px 24px !important; + -webkit-justify-content: stretch; + justify-content: stretch; } + .euiModalFooter > * { + -webkit-flex: 1; + flex: 1; } + .euiModalFooter > * + * { + margin-left: 0; } + .euiModalBody { + width: 100%; } + .euiModalBody .euiModalBody__overflow { + padding-bottom: 24px; } } + +.euiNotificationEvent { + display: -webkit-flex; + display: flex; + padding: 12px 0 12px 12px; + border-bottom: 1px solid #343741; } + .euiNotificationEvent:last-child { + border-bottom: none; } + .euiNotificationEvent--withReadState { + padding: 12px 0 12px 8px; } + +.euiNotificationEvent__title { + color: #DFE5EF; + font-size: 16px; + font-size: 1.14286rem; + line-height: 1.71429rem; + font-weight: 700; + display: -webkit-flex; + display: flex; } + .euiNotificationEvent__title.euiLink { + color: #36A2EF; } + .euiNotificationEvent__title--isRead { + color: #98A2B3 !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: #7a7f89; } + +.euiNotificationEventMessages { + font-size: 14px; } + .euiNotificationEventMessages__accordion { + color: #98A2B3; } + .euiNotificationEventMessages__accordionButton { + color: #36A2EF; } + .euiNotificationEventMessages__accordionContent > * { + padding-top: 8px; } + +.euiNotificationEventReadButton--isRead svg { + fill: transparent; + stroke-width: 1px; + stroke: #343741; } + +.euiOverlayMask { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: -webkit-flex; + display: flex; + -webkit-align-items: center; + align-items: center; + -webkit-justify-content: center; + justify-content: center; + padding-bottom: 10vh; + -webkit-animation: euiAnimFadeIn 150ms ease-in; + animation: euiAnimFadeIn 150ms ease-in; + background: rgba(52, 55, 65, 0.8); } + +.euiBody-hasOverlayMask { + overflow: hidden; } + +.euiOverlayMask--aboveHeader { + z-index: 6000; } + +.euiOverlayMask--belowHeader { + z-index: 1000; } + +.euiPagination { + display: -webkit-flex; + display: flex; + -webkit-align-items: center; + align-items: center; } + .euiPagination__compressedText { + display: -webkit-inline-flex; + display: inline-flex; + -webkit-align-items: center; + align-items: center; + line-height: 1 !important; } + .euiPagination__compressedText > *:first-child { + margin-right: 4px; } + .euiPagination__compressedText > *:last-child { + margin-left: 4px; } + +.euiPagination__list { + display: -webkit-flex; + display: flex; + -webkit-align-items: baseline; + align-items: baseline; } + +.euiPaginationButton { + font-size: 14px; + padding: 0; + text-align: center; + border-radius: 6px; } + +.euiPaginationButton-isActive { + font-weight: 700; } + .euiPaginationButton-isActive.euiPaginationButton-isActive { + color: #36A2EF; } + .euiPaginationButton-isActive.euiPaginationButton-isActive .euiButtonEmpty__content { + cursor: default; } + .euiPaginationButton-isActive.euiPaginationButton-isActive, .euiPaginationButton-isActive.euiPaginationButton-isActive:hover { + text-decoration: underline; } + +.euiPaginationButton-isPlaceholder { + -webkit-align-items: baseline; + align-items: baseline; + color: #515761; + font-size: 14px; + padding: 0 8px; + height: 24px; + padding-top: 6px; } + +@media only screen and (max-width: 574px) { + .euiPaginationButton-isPlaceholder, + .euiPaginationButton--hideOnMobile { + display: none; } } + +@media only screen and (min-width: 575px) and (max-width: 767px) { + .euiPaginationButton-isPlaceholder, + .euiPaginationButton--hideOnMobile { + display: none; } } + +.euiPanel { + -webkit-flex-grow: 1; + flex-grow: 1; } + .euiPanel.euiPanel--flexGrowZero { + -webkit-flex-grow: 0; + flex-grow: 0; } + .euiPanel.euiPanel--hasShadow { + box-shadow: 0 0.9px 4px -1px rgba(0, 0, 0, 0.2), 0 2.6px 8px -1px rgba(0, 0, 0, 0.15), 0 5.7px 12px -1px rgba(0, 0, 0, 0.125), 0 15px 15px -1px rgba(0, 0, 0, 0.1); } + .euiPanel.euiPanel--hasBorder { + border: 1px solid #343741; + box-shadow: none; } + .euiPanel.euiPanel--isClickable { + transition: all 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); } + .euiPanel.euiPanel--isClickable:enabled { + display: block; + width: 100%; + text-align: left; } + .euiPanel.euiPanel--isClickable:hover, .euiPanel.euiPanel--isClickable:focus { + box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25), 0 3.6px 13px rgba(0, 0, 0, 0.175), 0 8.4px 23px rgba(0, 0, 0, 0.15), 0 23px 35px rgba(0, 0, 0, 0.125); + -webkit-transform: translateY(-2px); + transform: translateY(-2px); + cursor: pointer; } + .euiPanel.euiPanel--borderRadiusNone { + border-radius: 0; } + .euiPanel.euiPanel--borderRadiusMedium { + border-radius: 4px; } + .euiPanel.euiPanel--transparent { + background-color: transparent; } + .euiPanel.euiPanel--plain { + background-color: #1D1E24; } + .euiPanel.euiPanel--subdued { + background-color: #141519; } + .euiPanel.euiPanel--accent { + background-color: #4a2b39; } + .euiPanel.euiPanel--primary { + background-color: #103148; } + .euiPanel.euiPanel--success { + background-color: #264341; } + .euiPanel.euiPanel--warning { + background-color: #493f22; } + .euiPanel.euiPanel--danger { + background-color: #4a201e; } + +.euiPanel--paddingSmall { + padding: 8px; } + +.euiPanel--paddingMedium { + padding: 16px; } + +.euiPanel--paddingLarge { + padding: 24px; } + +.euiSplitPanel { + display: -webkit-flex; + display: flex; + -webkit-flex-direction: column; + flex-direction: column; + min-width: 0; } + .euiSplitPanel .euiSplitPanel__inner { + -webkit-flex-basis: 0%; + flex-basis: 0%; + -webkit-transform: none !important; + transform: none !important; + box-shadow: none !important; } + .euiSplitPanel.euiSplitPanel-isResponsive.euiPanel--borderRadiusNone .euiSplitPanel__inner:first-child, + .euiSplitPanel.euiPanel--borderRadiusNone .euiSplitPanel__inner:first-child { + border-radius: -1 -1 0 0; } + .euiSplitPanel.euiSplitPanel-isResponsive.euiPanel--borderRadiusNone .euiSplitPanel__inner:last-child, + .euiSplitPanel.euiPanel--borderRadiusNone .euiSplitPanel__inner:last-child { + border-radius: 0 0 -1 -1; } + .euiSplitPanel.euiSplitPanel-isResponsive.euiPanel--borderRadiusMedium .euiSplitPanel__inner:first-child, + .euiSplitPanel.euiPanel--borderRadiusMedium .euiSplitPanel__inner:first-child { + border-radius: 3px 3px 0 0; } + .euiSplitPanel.euiSplitPanel-isResponsive.euiPanel--borderRadiusMedium .euiSplitPanel__inner:last-child, + .euiSplitPanel.euiPanel--borderRadiusMedium .euiSplitPanel__inner:last-child { + border-radius: 0 0 3px 3px; } + +.euiSplitPanel--row { + -webkit-flex-direction: row; + flex-direction: row; } + .euiSplitPanel--row.euiSplitPanel-isResponsive { + -webkit-flex-direction: column; + flex-direction: column; } + .euiSplitPanel--row.euiPanel--borderRadiusNone .euiSplitPanel__inner:first-child { + border-radius: -1 0 0 -1; } + .euiSplitPanel--row.euiPanel--borderRadiusNone .euiSplitPanel__inner:last-child { + border-radius: 0 -1 -1 0; } + .euiSplitPanel--row.euiPanel--borderRadiusMedium .euiSplitPanel__inner:first-child { + border-radius: 3px 0 0 3px; } + .euiSplitPanel--row.euiPanel--borderRadiusMedium .euiSplitPanel__inner:last-child { + border-radius: 0 3px 3px 0; } + +.euiPage { + display: -webkit-flex; + display: flex; + background-color: #141519; + -webkit-flex-shrink: 0; + flex-shrink: 0; + max-width: 100%; } + .euiPage--restrictWidth-default, .euiPage--restrictWidth-custom { + margin-left: auto; + margin-right: auto; } + .euiPage--restrictWidth-default { + max-width: 1200px; } + .euiPage--grow { + -webkit-flex-grow: 1; + flex-grow: 1; } + .euiPage--column { + -webkit-flex-direction: column; + flex-direction: column; } + @media only screen and (max-width: 574px) { + .euiPage { + -webkit-flex-direction: column; + flex-direction: column; } } + @media only screen and (min-width: 575px) and (max-width: 767px) { + .euiPage { + -webkit-flex-direction: column; + flex-direction: column; } } + +.euiPage--paddingSmall { + padding: 8px; } + .euiPage--paddingSmall .euiPageSideBar { + min-width: 192px; + margin-right: 8px; } + @media only screen and (max-width: 574px) { + .euiPage--paddingSmall .euiPageSideBar { + margin-right: 0; + margin-bottom: 8px; } } + @media only screen and (min-width: 575px) and (max-width: 767px) { + .euiPage--paddingSmall .euiPageSideBar { + margin-right: 0; + margin-bottom: 8px; } } + .euiPage--paddingSmall .euiPageHeader { + margin-bottom: 8px; } + +.euiPage--paddingMedium { + padding: 16px; } + .euiPage--paddingMedium .euiPageSideBar { + min-width: 192px; + margin-right: 16px; } + @media only screen and (max-width: 574px) { + .euiPage--paddingMedium .euiPageSideBar { + margin-right: 0; + margin-bottom: 16px; } } + @media only screen and (min-width: 575px) and (max-width: 767px) { + .euiPage--paddingMedium .euiPageSideBar { + margin-right: 0; + margin-bottom: 16px; } } + .euiPage--paddingMedium .euiPageHeader { + margin-bottom: 16px; } + +.euiPage--paddingLarge { + padding: 24px; } + .euiPage--paddingLarge .euiPageSideBar { + min-width: 192px; + margin-right: 24px; } + @media only screen and (max-width: 574px) { + .euiPage--paddingLarge .euiPageSideBar { + margin-right: 0; + margin-bottom: 24px; } } + @media only screen and (min-width: 575px) and (max-width: 767px) { + .euiPage--paddingLarge .euiPageSideBar { + margin-right: 0; + margin-bottom: 24px; } } + .euiPage--paddingLarge .euiPageHeader { + margin-bottom: 24px; } + +.euiPageBody { + display: -webkit-flex; + display: flex; + -webkit-flex-direction: column; + flex-direction: column; + -webkit-align-items: stretch; + align-items: stretch; + -webkit-flex: 1 1 100%; + flex: 1 1 100%; + max-width: 100%; + min-width: 0; } + .euiPageBody--restrictWidth-default, .euiPageBody--restrictWidth-custom { + margin-left: auto; + margin-right: auto; } + .euiPageBody--restrictWidth-default { + max-width: 1200px; } + .euiPageBody.euiPageBody--borderRadiusNone { + border-top-width: 0; + border-right-width: 0; + border-bottom-width: 0; } + +.euiPageBody--paddingSmall { + padding: 8px; } + .euiPageBody--paddingSmall > .euiPageHeader:not([class*='--padding']) { + margin-bottom: 8px; + border-bottom: 1px solid #343741; } + .euiPageBody--paddingSmall > .euiPageHeader:not([class*='--padding']):not(.euiPageHeader--tabsAtBottom) { + padding-bottom: 8px; } + +.euiPageBody--paddingMedium { + padding: 16px; } + .euiPageBody--paddingMedium > .euiPageHeader:not([class*='--padding']) { + margin-bottom: 16px; + border-bottom: 1px solid #343741; } + .euiPageBody--paddingMedium > .euiPageHeader:not([class*='--padding']):not(.euiPageHeader--tabsAtBottom) { + padding-bottom: 16px; } + +.euiPageBody--paddingLarge { + padding: 24px; } + .euiPageBody--paddingLarge > .euiPageHeader:not([class*='--padding']) { + margin-bottom: 24px; + border-bottom: 1px solid #343741; } + .euiPageBody--paddingLarge > .euiPageHeader:not([class*='--padding']):not(.euiPageHeader--tabsAtBottom) { + padding-bottom: 24px; } + +.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; + max-width: 100%; + 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; } + +.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-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(152, 162, 179, 0.5); + border: 6px solid transparent; + background-clip: content-box; } + .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-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(152, 162, 179, 0.5); + border: 6px solid transparent; + background-clip: content-box; } + .euiPageSideBar--sticky::-webkit-scrollbar-corner, .euiPageSideBar--sticky::-webkit-scrollbar-track { + background-color: transparent; } } + +@media only screen and (min-width: 1200px) { + .euiPageSideBar--sticky { + 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(152, 162, 179, 0.5); + border: 6px solid transparent; + background-clip: content-box; } + .euiPageSideBar--sticky::-webkit-scrollbar-corner, .euiPageSideBar--sticky::-webkit-scrollbar-track { + background-color: transparent; } } + +/** + * Note: Bottom margin is added in _page.scss when EuiPage has `paddingSize` + * Or it's added in _page_body.scss when EuiPageBody has `paddingSize` + */ +.euiPageHeader { + width: 100%; + 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-shrink: 0; + flex-shrink: 0; } + .euiPageHeader--restrictWidth-default, .euiPageHeader--restrictWidth-custom { + margin-left: auto; + margin-right: auto; } + .euiPageHeader--restrictWidth-default { + max-width: 1200px; } + +.euiPageHeader--bottomBorder { + border-bottom: 1px solid #343741; } + +.euiPageHeader--paddingSmall { + padding: 8px; } + .euiPageHeader--paddingSmall.euiPageHeader--tabsAtBottom { + padding-bottom: 0; + margin-bottom: 8px; } + +.euiPageHeader--paddingMedium { + padding: 16px; } + .euiPageHeader--paddingMedium.euiPageHeader--tabsAtBottom { + padding-bottom: 0; + margin-bottom: 16px; } + +.euiPageHeader--paddingLarge { + padding: 24px; } + .euiPageHeader--paddingLarge.euiPageHeader--tabsAtBottom { + padding-bottom: 0; + margin-bottom: 24px; } + +.euiPageHeader--top { + -webkit-align-items: flex-start; + align-items: flex-start; } + +.euiPageHeader--bottom { + -webkit-align-items: flex-end; + align-items: flex-end; } + +.euiPageHeader--stretch { + -webkit-align-items: stretch; + align-items: stretch; } + +@media only screen and (max-width: 574px) { + .euiPageHeader--responsive { + -webkit-flex-direction: column; + flex-direction: column; } + .euiPageHeader--responsiveReverse { + -webkit-flex-direction: column-reverse; + flex-direction: column-reverse; } } + +@media only screen and (min-width: 575px) and (max-width: 767px) { + .euiPageHeader--responsive { + -webkit-flex-direction: column; + flex-direction: column; } + .euiPageHeader--responsiveReverse { + -webkit-flex-direction: column-reverse; + flex-direction: column-reverse; } } + +.euiPageHeader .euiPageHeaderContent { + width: 100%; } + +.euiPageHeaderContent__titleIcon { + top: -4px; + position: relative; + margin-right: 16px; } + +@media only screen and (min-width: 768px) and (max-width: 991px) { + .euiPageHeaderContent__rightSideItems { + -webkit-flex-direction: row-reverse; + flex-direction: row-reverse; } } + +@media only screen and (min-width: 992px) and (max-width: 1199px) { + .euiPageHeaderContent__rightSideItems { + -webkit-flex-direction: row-reverse; + flex-direction: row-reverse; } } + +@media only screen and (min-width: 1200px) { + .euiPageHeaderContent__rightSideItems { + -webkit-flex-direction: row-reverse; + flex-direction: row-reverse; } } + +.euiPageHeaderSection:not(:first-of-type) { + margin-left: 32px; } + +@media only screen and (max-width: 574px) { + .euiPageHeader--responsive .euiPageHeaderSection { + width: 100%; } + .euiPageHeader--responsive .euiPageHeaderSection:not(:first-of-type) { + margin-left: 0; + margin-top: 16px; } + .euiPageHeader--responsiveReverse .euiPageHeaderSection { + width: 100%; } + .euiPageHeader--responsiveReverse .euiPageHeaderSection:not(:first-of-type) { + margin-left: 0; } + .euiPageHeader--responsiveReverse .euiPageHeaderSection:not(:last-of-type) { + margin-top: 16px; } } + +@media only screen and (min-width: 575px) and (max-width: 767px) { + .euiPageHeader--responsive .euiPageHeaderSection { + width: 100%; } + .euiPageHeader--responsive .euiPageHeaderSection:not(:first-of-type) { + margin-left: 0; + margin-top: 16px; } + .euiPageHeader--responsiveReverse .euiPageHeaderSection { + width: 100%; } + .euiPageHeader--responsiveReverse .euiPageHeaderSection:not(:first-of-type) { + margin-left: 0; } + .euiPageHeader--responsiveReverse .euiPageHeaderSection:not(:last-of-type) { + margin-top: 16px; } } + +.euiPopover { + display: inline-block; + position: relative; + vertical-align: middle; + max-width: 100%; } + +.euiPopover__anchor { + display: inline-block; } + +.euiPopover--displayBlock { + display: block; } + .euiPopover--displayBlock .euiPopover__anchor { + display: block; } + +/** + * 1. Can expand further, but it looks weird if it's smaller than the originating button. + * 2. Animation happens on the panel. But don't animate when using the attached mode like for inputs + * 3. Make sure the panel stays within the window. + */ +.euiPopover__panel { + box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25), 0 3.6px 13px rgba(0, 0, 0, 0.175), 0 8.4px 23px rgba(0, 0, 0, 0.15), 0 23px 35px rgba(0, 0, 0, 0.125); + position: absolute; + min-width: 112px; + /* 1 */ + max-width: calc(100vw - 32px); + /* 3 */ + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + pointer-events: none; + opacity: 0; + /* 2 */ + visibility: hidden; + /* 2 */ + transition: opacity cubic-bezier(0.34, 1.61, 0.7, 1) 350ms, visibility cubic-bezier(0.34, 1.61, 0.7, 1) 350ms; } + .euiPopover__panel:not(.euiPopover__panel-isAttached) { + -webkit-transform: translateY(0) translateX(0) translateZ(0); + transform: translateY(0) translateX(0) translateZ(0); + /* 2 */ + transition: opacity cubic-bezier(0.34, 1.61, 0.7, 1) 350ms, visibility cubic-bezier(0.34, 1.61, 0.7, 1) 350ms, -webkit-transform cubic-bezier(0.34, 1.61, 0.7, 1) 450ms; + transition: opacity cubic-bezier(0.34, 1.61, 0.7, 1) 350ms, visibility cubic-bezier(0.34, 1.61, 0.7, 1) 350ms, transform cubic-bezier(0.34, 1.61, 0.7, 1) 450ms; + transition: opacity cubic-bezier(0.34, 1.61, 0.7, 1) 350ms, visibility cubic-bezier(0.34, 1.61, 0.7, 1) 350ms, transform cubic-bezier(0.34, 1.61, 0.7, 1) 450ms, -webkit-transform cubic-bezier(0.34, 1.61, 0.7, 1) 450ms; } + .euiPopover__panel.euiPopover__panel-isOpen { + opacity: 1; + visibility: visible; + pointer-events: auto; } + .euiPopover__panel .euiPopover__panelArrow { + position: absolute; + width: 0; + height: 0; } + .euiPopover__panel .euiPopover__panelArrow:before { + position: absolute; + content: ''; + height: 0; + width: 0; } + .euiPopover__panel .euiPopover__panelArrow:after { + position: absolute; + content: ''; + height: 0; + width: 0; } + .euiPopover__panel .euiPopover__panelArrow.euiPopover__panelArrow--top:before { + bottom: -10px; + border-left: 12px solid transparent; + border-right: 12px solid transparent; + border-top: 12px solid #343741; } + .euiPopover__panel .euiPopover__panelArrow.euiPopover__panelArrow--top:after { + bottom: -9px; + border-left: 12px solid transparent; + border-right: 12px solid transparent; + border-top: 12px solid #1D1E24; } + .euiPopover__panel .euiPopover__panelArrow.euiPopover__panelArrow--right:before { + left: -12px; + top: 50%; + border-top: 12px solid transparent; + border-bottom: 12px solid transparent; + border-right: 12px solid #343741; } + .euiPopover__panel .euiPopover__panelArrow.euiPopover__panelArrow--right:after { + left: -11px; + top: 50%; + border-top: 12px solid transparent; + border-bottom: 12px solid transparent; + border-right: 12px solid #1D1E24; } + .euiPopover__panel .euiPopover__panelArrow.euiPopover__panelArrow--bottom:before { + top: -12px; + border-left: 12px solid transparent; + border-right: 12px solid transparent; + border-bottom: 12px solid #343741; } + .euiPopover__panel .euiPopover__panelArrow.euiPopover__panelArrow--bottom:after { + top: -11px; + border-left: 12px solid transparent; + border-right: 12px solid transparent; + border-bottom: 12px solid #1D1E24; } + .euiPopover__panel .euiPopover__panelArrow.euiPopover__panelArrow--left:before { + right: -11px; + top: 50%; + border-top: 12px solid transparent; + border-bottom: 12px solid transparent; + border-left: 12px solid #343741; } + .euiPopover__panel .euiPopover__panelArrow.euiPopover__panelArrow--left:after { + right: -10px; + top: 50%; + border-top: 12px solid transparent; + border-bottom: 12px solid transparent; + border-left: 12px solid #1D1E24; } + .euiPopover__panel.euiPopover__panel-noArrow .euiPopover__panelArrow { + display: none; } + .euiPopover__panel.euiPopover__panel-isAttached.euiPopover__panel--bottom { + border-top-color: rgba(52, 55, 65, 0.8); + border-top-right-radius: 0; + border-top-left-radius: 0; } + .euiPopover__panel.euiPopover__panel-isAttached.euiPopover__panel--top { + box-shadow: 0 0 0.8px rgba(0, 0, 0, 0.15), 0 0 2px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 0 17px rgba(0, 0, 0, 0.075); + border-bottom-color: rgba(52, 55, 65, 0.8); + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; } + +.euiPopover__panel.euiPopover__panel-isAttached.euiPopover__panel--top, +.euiPopover__panel.euiPopover__panel-isOpen.euiPopover__panel--top { + -webkit-transform: translateY(8px) translateZ(0); + transform: translateY(8px) translateZ(0); } + +.euiPopover__panel.euiPopover__panel-isAttached.euiPopover__panel--bottom, +.euiPopover__panel.euiPopover__panel-isOpen.euiPopover__panel--bottom { + -webkit-transform: translateY(-8px) translateZ(0); + transform: translateY(-8px) translateZ(0); } + +.euiPopover__panel.euiPopover__panel-isOpen.euiPopover__panel--left { + -webkit-transform: translateX(8px) translateZ(0); + transform: translateX(8px) translateZ(0); } + +.euiPopover__panel.euiPopover__panel-isOpen.euiPopover__panel--right { + -webkit-transform: translateX(-8px) translateZ(0); + transform: translateX(-8px) translateZ(0); } + +.euiPopoverTitle { + color: #DFE5EF; + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + font-weight: 700; + padding: 12px; + border-bottom: 1px solid #343741; } + +.euiPopoverTitle--paddingNone { + padding: 0; } + +.euiPopoverTitle--paddingSmall { + padding: 8px; } + +.euiPopoverTitle--paddingMedium { + padding: 16px; } + +.euiPopoverTitle--paddingLarge { + padding: 24px; } + +.euiPopover__panel.euiPanel--paddingSmall .euiPopoverTitle { + margin: -8px -8px 8px; } + .euiPopover__panel.euiPanel--paddingSmall .euiPopoverTitle:not([class*='euiPopoverTitle--padding']) { + padding: 12px 8px; } + +.euiPopover__panel.euiPanel--paddingMedium .euiPopoverTitle { + margin: -16px -16px 16px; } + .euiPopover__panel.euiPanel--paddingMedium .euiPopoverTitle:not([class*='euiPopoverTitle--padding']) { + padding: 12px 16px; } + +.euiPopover__panel.euiPanel--paddingLarge .euiPopoverTitle { + margin: -24px -24px 24px; } + .euiPopover__panel.euiPanel--paddingLarge .euiPopoverTitle:not([class*='euiPopoverTitle--padding']) { + padding: 12px 24px; } + +.euiPopoverFooter { + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + padding: 12px; + border-top: 1px solid #343741; } + +.euiPopoverFooter--paddingNone { + padding: 0; } + +.euiPopoverFooter--paddingSmall { + padding: 8px; } + +.euiPopoverFooter--paddingMedium { + padding: 16px; } + +.euiPopoverFooter--paddingLarge { + padding: 24px; } + +.euiPopover__panel.euiPanel--paddingSmall .euiPopoverFooter { + margin: 8px -8px -8px; } + .euiPopover__panel.euiPanel--paddingSmall .euiPopoverFooter:not([class*='euiPopoverFooter--padding']) { + padding: 12px 8px; } + +.euiPopover__panel.euiPanel--paddingMedium .euiPopoverFooter { + margin: 16px -16px -16px; } + .euiPopover__panel.euiPanel--paddingMedium .euiPopoverFooter:not([class*='euiPopoverFooter--padding']) { + padding: 12px 16px; } + +.euiPopover__panel.euiPanel--paddingLarge .euiPopoverFooter { + margin: 24px -24px -24px; } + .euiPopover__panel.euiPanel--paddingLarge .euiPopoverFooter:not([class*='euiPopoverFooter--padding']) { + padding: 12px 24px; } + +.euiInputPopover { + max-width: 400px; } + .euiInputPopover.euiInputPopover--fullWidth { + max-width: 100%; } + +/** + * 1. Portal content is absolutely positioned (e.g. tooltips, popovers, flyouts). + */ +.euiBody-hasPortalContent { + position: relative; + /* 1 */ } + +.euiProgress { + position: relative; + overflow: hidden; + background-color: #343741; } + +.euiProgress--xs { + height: 2px; } + +.euiProgress--s { + height: 4px; } + +.euiProgress--m { + height: 8px; } + +.euiProgress--l { + height: 16px; } + +.euiProgress--native { + display: block; + width: 100%; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border: none; } + .euiProgress--native::-webkit-progress-bar { + background-color: #343741; } + .euiProgress--native::-webkit-progress-value { + -webkit-transition: width 250ms linear; + transition: width 250ms linear; } + .euiProgress--native::-moz-progress-bar { + -moz-transition: width 250ms linear; + transition: width 250ms linear; } + +/** + * An indeterminate bar has an unreliable end time. Because of a Firefox animation issue, + * we apply this style to a
instead of a element. + * See https://css-tricks.com/html5-progress-element/ for more info. + */ +.euiProgress--indeterminate:before { + position: absolute; + content: ''; + width: 100%; + top: 0; + bottom: 0; + left: 0; + -webkit-transform: scaleX(0) translateX(0%); + transform: scaleX(0) translateX(0%); + -webkit-animation: euiProgress 1s cubic-bezier(0.694, 0.0482, 0.335, 1) infinite; + animation: euiProgress 1s cubic-bezier(0.694, 0.0482, 0.335, 1) infinite; } + +.euiProgress--fixed { + position: fixed; + z-index: 1001; } + +.euiProgress--absolute { + position: absolute; } + +.euiProgress--fixed, +.euiProgress--absolute { + top: 0; + left: 0; + right: 0; + background-color: transparent; } + .euiProgress--fixed.euiProgress--native::-webkit-progress-bar, + .euiProgress--absolute.euiProgress--native::-webkit-progress-bar { + background-color: transparent; } + .euiProgress--fixed.euiProgress--native::-moz-progress-bar, + .euiProgress--absolute.euiProgress--native::-moz-progress-bar { + background-color: transparent; } + +.euiProgress--primary.euiProgress--native::-webkit-progress-value { + background-color: #36A2EF; } + +.euiProgress--primary.euiProgress--native::-moz-progress-bar { + background-color: #36A2EF; } + +.euiProgress--primary.euiProgress--indeterminate:before { + background-color: #36A2EF; } + +.euiProgress__data--primary .euiProgress__valueText { + color: #36A2EF; } + +.euiProgress--secondary.euiProgress--native::-webkit-progress-value { + background-color: #7DDED8; } + +.euiProgress--secondary.euiProgress--native::-moz-progress-bar { + background-color: #7DDED8; } + +.euiProgress--secondary.euiProgress--indeterminate:before { + background-color: #7DDED8; } + +.euiProgress__data--secondary .euiProgress__valueText { + color: #7DDED8; } + +.euiProgress--success.euiProgress--native::-webkit-progress-value { + background-color: #7DDED8; } + +.euiProgress--success.euiProgress--native::-moz-progress-bar { + background-color: #7DDED8; } + +.euiProgress--success.euiProgress--indeterminate:before { + background-color: #7DDED8; } + +.euiProgress__data--success .euiProgress__valueText { + color: #7DDED8; } + +.euiProgress--warning.euiProgress--native::-webkit-progress-value { + background-color: #F3D371; } + +.euiProgress--warning.euiProgress--native::-moz-progress-bar { + background-color: #F3D371; } + +.euiProgress--warning.euiProgress--indeterminate:before { + background-color: #F3D371; } + +.euiProgress__data--warning .euiProgress__valueText { + color: #F3D371; } + +.euiProgress--danger.euiProgress--native::-webkit-progress-value { + background-color: #F86B63; } + +.euiProgress--danger.euiProgress--native::-moz-progress-bar { + background-color: #F86B63; } + +.euiProgress--danger.euiProgress--indeterminate:before { + background-color: #F86B63; } + +.euiProgress__data--danger .euiProgress__valueText { + color: #F86B63; } + +.euiProgress--accent.euiProgress--native::-webkit-progress-value { + background-color: #F68FBE; } + +.euiProgress--accent.euiProgress--native::-moz-progress-bar { + background-color: #F68FBE; } + +.euiProgress--accent.euiProgress--indeterminate:before { + background-color: #F68FBE; } + +.euiProgress__data--accent .euiProgress__valueText { + color: #F68FBE; } + +.euiProgress--subdued.euiProgress--native::-webkit-progress-value { + background-color: #7a7f89; } + +.euiProgress--subdued.euiProgress--native::-moz-progress-bar { + background-color: #7a7f89; } + +.euiProgress--subdued.euiProgress--indeterminate:before { + background-color: #7a7f89; } + +.euiProgress__data--subdued .euiProgress__valueText { + color: #7a7f89; } + +.euiProgress--vis0.euiProgress--native::-webkit-progress-value { + background-color: #54B399; } + +.euiProgress--vis0.euiProgress--native::-moz-progress-bar { + background-color: #54B399; } + +.euiProgress--vis0.euiProgress--indeterminate:before { + background-color: #54B399; } + +.euiProgress__data--vis0 .euiProgress__valueText { + color: #54B399; } + +.euiProgress--vis1.euiProgress--native::-webkit-progress-value { + background-color: #6092C0; } + +.euiProgress--vis1.euiProgress--native::-moz-progress-bar { + background-color: #6092C0; } + +.euiProgress--vis1.euiProgress--indeterminate:before { + background-color: #6092C0; } + +.euiProgress__data--vis1 .euiProgress__valueText { + color: #6092C0; } + +.euiProgress--vis2.euiProgress--native::-webkit-progress-value { + background-color: #D36086; } + +.euiProgress--vis2.euiProgress--native::-moz-progress-bar { + background-color: #D36086; } + +.euiProgress--vis2.euiProgress--indeterminate:before { + background-color: #D36086; } + +.euiProgress__data--vis2 .euiProgress__valueText { + color: #D36086; } + +.euiProgress--vis3.euiProgress--native::-webkit-progress-value { + background-color: #9170B8; } + +.euiProgress--vis3.euiProgress--native::-moz-progress-bar { + background-color: #9170B8; } + +.euiProgress--vis3.euiProgress--indeterminate:before { + background-color: #9170B8; } + +.euiProgress__data--vis3 .euiProgress__valueText { + color: #9170B8; } + +.euiProgress--vis4.euiProgress--native::-webkit-progress-value { + background-color: #CA8EAE; } + +.euiProgress--vis4.euiProgress--native::-moz-progress-bar { + background-color: #CA8EAE; } + +.euiProgress--vis4.euiProgress--indeterminate:before { + background-color: #CA8EAE; } + +.euiProgress__data--vis4 .euiProgress__valueText { + color: #CA8EAE; } + +.euiProgress--vis5.euiProgress--native::-webkit-progress-value { + background-color: #D6BF57; } + +.euiProgress--vis5.euiProgress--native::-moz-progress-bar { + background-color: #D6BF57; } + +.euiProgress--vis5.euiProgress--indeterminate:before { + background-color: #D6BF57; } + +.euiProgress__data--vis5 .euiProgress__valueText { + color: #D6BF57; } + +.euiProgress--vis6.euiProgress--native::-webkit-progress-value { + background-color: #B9A888; } + +.euiProgress--vis6.euiProgress--native::-moz-progress-bar { + background-color: #B9A888; } + +.euiProgress--vis6.euiProgress--indeterminate:before { + background-color: #B9A888; } + +.euiProgress__data--vis6 .euiProgress__valueText { + color: #B9A888; } + +.euiProgress--vis7.euiProgress--native::-webkit-progress-value { + background-color: #DA8B45; } + +.euiProgress--vis7.euiProgress--native::-moz-progress-bar { + background-color: #DA8B45; } + +.euiProgress--vis7.euiProgress--indeterminate:before { + background-color: #DA8B45; } + +.euiProgress__data--vis7 .euiProgress__valueText { + color: #DA8B45; } + +.euiProgress--vis8.euiProgress--native::-webkit-progress-value { + background-color: #AA6556; } + +.euiProgress--vis8.euiProgress--native::-moz-progress-bar { + background-color: #AA6556; } + +.euiProgress--vis8.euiProgress--indeterminate:before { + background-color: #AA6556; } + +.euiProgress__data--vis8 .euiProgress__valueText { + color: #b27466; } + +.euiProgress--vis9.euiProgress--native::-webkit-progress-value { + background-color: #E7664C; } + +.euiProgress--vis9.euiProgress--native::-moz-progress-bar { + background-color: #E7664C; } + +.euiProgress--vis9.euiProgress--indeterminate:before { + background-color: #E7664C; } + +.euiProgress__data--vis9 .euiProgress__valueText { + color: #E7664C; } + +.euiProgress--customColor.euiProgress--native::-webkit-progress-value { + background-color: currentColor; } + +.euiProgress--customColor.euiProgress--native::-moz-progress-bar { + background-color: currentColor; } + +.euiProgress--customColor.euiProgress--indeterminate:before { + background-color: currentColor; } + +@-webkit-keyframes euiProgress { + 0% { + -webkit-transform: scaleX(1) translateX(-100%); + transform: scaleX(1) translateX(-100%); } + 100% { + -webkit-transform: scaleX(1) translateX(100%); + transform: scaleX(1) translateX(100%); } } + +@keyframes euiProgress { + 0% { + -webkit-transform: scaleX(1) translateX(-100%); + transform: scaleX(1) translateX(-100%); } + 100% { + -webkit-transform: scaleX(1) translateX(100%); + transform: scaleX(1) translateX(100%); } } + +.euiProgress__data { + display: -webkit-flex; + display: flex; + -webkit-justify-content: space-between; + justify-content: space-between; } + +.euiProgress__label, +.euiProgress__valueText { + color: #DFE5EF; + font-weight: 400; + font-size: 12px; + font-size: 0.85714rem; + line-height: 1.14286rem; + max-width: 100%; + overflow: hidden !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; + word-wrap: normal !important; } + +.euiProgress__label { + -webkit-flex-grow: 1; + flex-grow: 1; } + .euiProgress__label + .euiProgress__valueText { + padding-left: 4px; + -webkit-flex-grow: 1; + flex-grow: 1; + text-align: right; + -webkit-flex-shrink: 0; + flex-shrink: 0; } + +.euiProgress__valueText { + font-feature-settings: 'tnum' 1; + margin-left: auto; } + +.euiProgress__data--l .euiProgress__label, +.euiProgress__data--l .euiProgress__valueText { + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; } + +.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; + word-wrap: normal !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(223, 229, 239, 0.3); } + .euiTreeView__nodeInner .euiTreeView__iconPlaceholder { + width: 32px; } + +.euiTreeView__nodeLabel { + max-width: 100%; + overflow: hidden !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; + word-wrap: normal !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: 1000; } + .euiResizableButton:before, .euiResizableButton:after { + content: ''; + display: block; + position: absolute; + top: 50%; + left: 50%; + background-color: #D4DAE5; + 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: #535966; + transition-delay: 150ms; } + .euiResizableButton:focus:not(:disabled) { + background-color: rgba(54, 162, 239, 0.1); } + .euiResizableButton:focus:not(:disabled):before, .euiResizableButton:focus:not(:disabled):after { + background-color: #36A2EF; + 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.1), 0 2.3px 2px rgba(0, 0, 0, 0.075); + position: absolute; + z-index: 1001; + -webkit-animation: none !important; + animation: none !important; + transition-property: background, box-shadow; } + .euiResizableToggleButton:focus { + box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25), 0 3.6px 13px rgba(0, 0, 0, 0.175), 0 8.4px 23px rgba(0, 0, 0, 0.15), 0 23px 35px rgba(0, 0, 0, 0.125); } + .euiResizableToggleButton-isCollapsed { + box-shadow: none; + background: transparent; + border-radius: 0; } + .euiResizableToggleButton:not(:focus):not(:active):not(.euiResizableToggleButton-isVisible):not(.euiResizableToggleButton-isCollapsed) { + position: absolute; + left: -10000px; + top: auto; + width: 1px; + height: 1px; + overflow: hidden; } + +.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 */ } + +.euiResizableContainer { + display: -webkit-flex; + display: flex; + width: 100%; } + .euiResizableContainer--vertical { + -webkit-flex-direction: column; + flex-direction: column; } + +.euiResizablePanel { + position: relative; } + +.euiResizablePanel--paddingSmall { + padding: 8px; } + +.euiResizablePanel--paddingMedium { + padding: 16px; } + +.euiResizablePanel--paddingLarge { + padding: 24px; } + +.euiResizablePanel__content { + height: 100%; } + .euiResizablePanel__content:not([class*='plain']) { + border-width: 0; } + +.euiResizablePanel__content--scrollable { + scrollbar-width: thin; + overflow-y: auto; } + .euiResizablePanel__content--scrollable::-webkit-scrollbar { + width: 16px; + height: 16px; } + .euiResizablePanel__content--scrollable::-webkit-scrollbar-thumb { + background-color: rgba(152, 162, 179, 0.5); + border: 6px solid transparent; + background-clip: content-box; } + .euiResizablePanel__content--scrollable::-webkit-scrollbar-corner, .euiResizablePanel__content--scrollable::-webkit-scrollbar-track { + background-color: transparent; } + +.euiResizablePanel-isCollapsed { + overflow: hidden; } + .euiResizablePanel-isCollapsed .euiResizablePanel__content * { + display: none; } + +.euiResizableContainer--horizontal .euiResizablePanel-isCollapsed { + min-width: 0 !important; } + +.euiResizableContainer--horizontal .euiResizablePanel--collapsible.euiResizablePanel-isCollapsed { + min-width: 24px !important; } + +.euiResizableContainer--vertical .euiResizablePanel-isCollapsed { + min-height: 0 !important; } + +.euiResizableContainer--vertical .euiResizablePanel--collapsible.euiResizablePanel-isCollapsed { + min-height: 24px !important; } + +.euiSideNav__mobileToggle { + display: none; + border-bottom: 1px solid #343741; + padding: 16px; + width: 100%; + text-align: left; + border-radius: 0 !important; } + .euiSideNav__mobileToggle .euiButtonContent { + -webkit-justify-content: space-between; + justify-content: space-between; } + +@media only screen and (max-width: 574px) { + /** + * 1. Animation doesn't work against height. Need max-height instead. + * We set a value larger than what is needed to fake "auto". + */ + .euiSideNav-isOpenMobile .euiSideNav__content { + visibility: visible; + opacity: 1; + margin: 24px; + max-height: 5000px; + /* 1 */ + transition: all 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } + .euiSideNav__mobileToggle { + display: block; } + .euiSideNav__content { + overflow: hidden; + visibility: hidden; + opacity: 0; + max-height: 0; + margin: 0 24px; } } + +@media only screen and (min-width: 575px) and (max-width: 767px) { + /** + * 1. Animation doesn't work against height. Need max-height instead. + * We set a value larger than what is needed to fake "auto". + */ + .euiSideNav-isOpenMobile .euiSideNav__content { + visibility: visible; + opacity: 1; + margin: 24px; + max-height: 5000px; + /* 1 */ + transition: all 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } + .euiSideNav__mobileToggle { + display: block; } + .euiSideNav__content { + overflow: hidden; + visibility: hidden; + opacity: 0; + max-height: 0; + margin: 0 24px; } } + +/** + * 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.71429rem; + 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: #36A2EF; + font-weight: 700; } + .euiSideNavItemButton.euiSideNavItemButton-isSelected .euiSideNavItemButton__label { + text-decoration: underline; + /* 4 */ } + .euiSideNavItemButton:disabled { + cursor: not-allowed; + text-decoration: none; + color: #515761; } + +.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; + word-wrap: normal !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 { + color: #DFE5EF; + font-size: 16px; + font-size: 1.14286rem; + line-height: 1.71429rem; + 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: #DFE5EF; + /* 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: #8d919a; + /* 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: #343741; + 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: #343741; } + .euiSideNavItem--branch > .euiSideNavItem__items { + margin-left: 16px; } + +.euiSideNavItem--emphasized { + background: #25282f; + color: #DFE5EF; + box-shadow: 100px 0 0 0 #25282f, -100px 0 0 0 #25282f; } + .euiSideNavItem--emphasized > .euiSideNavItemButton { + font-weight: 700; } + .euiSideNavItem--emphasized .euiSideNavItem--emphasized { + background: transparent; + box-shadow: none; } + +.euiSpacer { + -webkit-flex-shrink: 0; + flex-shrink: 0; } + +.euiSpacer--xs { + height: 4px; } + +.euiSpacer--s { + height: 8px; } + +.euiSpacer--m { + height: 16px; } + +.euiSpacer--l { + height: 24px; } + +.euiSpacer--xl { + height: 32px; } + +.euiSpacer--xxl { + height: 40px; } + +.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:focus-within { + outline: 2px solid currentColor; } + .euiSelectableList:focus-within:focus-visible { + outline-style: auto; } + .euiSelectableList:focus-within:not(:focus-visible) { + outline: none; } + +.euiSelectableList-fullHeight { + -webkit-flex-grow: 1; + flex-grow: 1; } + +.euiSelectableList-bordered { + overflow: hidden; + border: 1px solid #343741; + 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-width: thin; } + .euiSelectableList__list::-webkit-scrollbar { + width: 16px; + height: 16px; } + .euiSelectableList__list::-webkit-scrollbar-thumb { + background-color: rgba(152, 162, 179, 0.5); + border: 6px solid transparent; + background-clip: content-box; } + .euiSelectableList__list::-webkit-scrollbar-corner, .euiSelectableList__list::-webkit-scrollbar-track { + background-color: transparent; } + +.euiSelectableList__groupLabel { + color: #DFE5EF; + font-size: 12px; + font-size: 0.85714rem; + line-height: 1.14286rem; + font-weight: 700; + display: -webkit-flex; + display: flex; + -webkit-align-items: center; + align-items: center; + border-bottom: 1px solid #202128; + padding: 4px 12px; } + +.euiSelectableListItem { + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + display: -webkit-inline-flex; + display: inline-flex; + width: 100%; + text-align: left; + color: #DFE5EF; + cursor: pointer; } + .euiSelectableListItem:not(:last-of-type) { + border-bottom: 1px solid #202128; } + .euiSelectableListItem-isFocused:not([aria-disabled='true']), .euiSelectableListItem:hover:not([aria-disabled='true']) { + color: #36A2EF; + background-color: rgba(54, 162, 239, 0.3); } + .euiSelectableListItem-isFocused:not([aria-disabled='true']) .euiSelectableListItem__text, .euiSelectableListItem:hover:not([aria-disabled='true']) .euiSelectableListItem__text { + text-decoration: underline; } + .euiSelectableListItem[aria-disabled='true'] { + color: #535966; + cursor: not-allowed; } + +.euiSelectableListItem__content { + padding: 4px 12px; + 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 { + max-width: 100%; + overflow: hidden !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; + word-wrap: normal !important; + -webkit-flex-grow: 1; + flex-grow: 1; } + +/** + * 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-justify-content: center; + justify-content: center; + -webkit-align-items: center; + align-items: center; } + +.euiSelectableMessage--bordered { + overflow: hidden; + border: 1px solid #343741; + border-radius: 6px; } + +.euiHeader--dark .euiSelectableTemplateSitewide .euiFormControlLayout { + background-color: transparent; } + .euiHeader--dark .euiSelectableTemplateSitewide .euiFormControlLayout--group, + .euiHeader--dark .euiSelectableTemplateSitewide .euiFormControlLayout input { + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); } + .euiHeader--dark .euiSelectableTemplateSitewide .euiFormControlLayout:not(:focus-within) { + color: rgba(255, 255, 255, 0.7); } + .euiHeader--dark .euiSelectableTemplateSitewide .euiFormControlLayout:not(:focus-within) input { + color: inherit; + background-color: transparent; } + .euiHeader--dark .euiSelectableTemplateSitewide .euiFormControlLayout:not(:focus-within) input::-webkit-input-placeholder { + color: rgba(255, 255, 255, 0.4); + opacity: 1; } + .euiHeader--dark .euiSelectableTemplateSitewide .euiFormControlLayout:not(:focus-within) input::-moz-placeholder { + color: rgba(255, 255, 255, 0.4); + opacity: 1; } + .euiHeader--dark .euiSelectableTemplateSitewide .euiFormControlLayout:not(:focus-within) input::placeholder { + color: rgba(255, 255, 255, 0.4); + opacity: 1; } + .euiHeader--dark .euiSelectableTemplateSitewide .euiFormControlLayout:not(:focus-within) .euiFormControlLayout__append { + background-color: transparent; + color: inherit; } + +.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: #7a7f89; } + +.euiSelectableTemplateSitewide__optionMeta:not(:last-of-type)::after { + content: '•'; + margin: 0 4px; + color: #7a7f89; } + +.euiSelectableTemplateSitewide__optionMeta--application { + color: #6092C0; + font-weight: 500; } + +.euiSelectableTemplateSitewide__optionMeta--deployment { + color: #54B399; + font-weight: 500; } + +.euiSelectableTemplateSitewide__optionMeta--article { + color: #9170B8; + font-weight: 500; } + +.euiSelectableTemplateSitewide__optionMeta--case { + color: #E7664C; + font-weight: 500; } + +.euiSelectableTemplateSitewide__optionMeta--platform { + color: #D6BF57; + font-weight: 500; } + +.euiStat .euiStat__title { + color: #FFF; } + .euiStat .euiStat__title--subdued { + color: #7a7f89; } + .euiStat .euiStat__title--primary { + color: #36A2EF; } + .euiStat .euiStat__title--secondary { + color: #7DDED8; } + .euiStat .euiStat__title--danger { + color: #F86B63; } + .euiStat .euiStat__title--accent { + color: #F68FBE; } + +.euiStat .euiStat__title-isLoading { + -webkit-animation: euiStatPulse 1.5s infinite ease-in-out; + animation: euiStatPulse 1.5s infinite ease-in-out; } + +.euiStat.euiStat--leftAligned { + text-align: left; + -webkit-align-items: flex-start; + align-items: flex-start; } + +.euiStat.euiStat--centerAligned { + text-align: center; + -webkit-align-items: center; + align-items: center; } + +.euiStat.euiStat--rightAligned { + text-align: right; + -webkit-align-items: flex-end; + align-items: flex-end; } + +@-webkit-keyframes euiStatPulse { + 0% { + opacity: 1; } + 50% { + opacity: .25; } + 100% { + opacity: 1; } } + +@keyframes euiStatPulse { + 0% { + opacity: 1; } + 50% { + opacity: .25; } + 100% { + opacity: 1; } } + +.euiStepNumber { + width: 32px; + height: 32px; + display: inline-block; + line-height: 32px; + border-radius: 32px; + text-align: center; + color: #1D1E24; + background-color: #36A2EF; + font-size: 14px; + font-weight: 500; } + .euiStepNumber .euiStepNumber__icon { + vertical-align: middle; + position: relative; + top: -2px; } + .euiStepNumber--small { + width: 24px; + height: 24px; + display: inline-block; + line-height: 24px; + border-radius: 24px; + text-align: center; + color: #1D1E24; + background-color: #36A2EF; + font-size: 12px; + font-weight: 500; } + .euiStepNumber--small .euiStepNumber__icon { + top: -1px; } + .euiStepNumber--complete .euiStepNumber__icon { + stroke: currentColor; + stroke-width: .5px; } + @media screen and (prefers-reduced-motion: no-preference) { + .euiStepNumber--complete, .euiStepNumber--warning, .euiStepNumber--danger { + -webkit-animation: euiGrow 150ms cubic-bezier(0.34, 1.61, 0.7, 1); + animation: euiGrow 150ms cubic-bezier(0.34, 1.61, 0.7, 1); } } + .euiStepNumber--loading { + background: transparent; } + .euiStepNumber.euiStepNumber-isHollow { + background-color: transparent; + border: 2px solid #36A2EF; } + .euiStepNumber.euiStepNumber-isHollow .euiStepNumber__number { + display: none; } + .euiStepNumber--warning { + color: #F3D371; + background-color: #493f22; } + .euiStepNumber--danger { + color: #F86B63; + background-color: #4a201e; } + .euiStepNumber--disabled { + color: #98A2B3; + background-color: #2e3136; } + .euiStepNumber--incomplete { + color: #98A2B3; + background-color: #2e3136; } + +/** + * 1. Ensure that the step number vertically aligns with the title text + */ +.euiStep:not(:last-of-type) { + background-image: linear-gradient(to right, transparent 0, transparent 15px, #343741 15px, #343741 17px, transparent 17px, transparent 100%); + background-repeat: no-repeat; + background-position: left 40px; } + +.euiStep--small:not(:last-of-type) { + background-position: left -4px top 32px; } + +.euiStep--small .euiStep__content { + padding-left: 28px; + margin-left: 12px; } + +.euiStep__titleWrapper { + display: -webkit-flex; + display: flex; } + +.euiStep__circle { + -webkit-flex-shrink: 0; + flex-shrink: 0; + margin-right: 16px; + vertical-align: top; + /* 1 */ } + +.euiStep__title { + font-weight: 500; } + +.euiStep__content { + padding: 16px 16px 32px; + margin: 8px 0; + padding-left: 32px; + margin-left: 16px; } + +.euiSubSteps { + padding: 16px; + background-color: #25262E; + margin-bottom: 16px; } + .euiSubSteps > *:last-child { + margin-bottom: 0; } + .euiText .euiSubSteps ol, + .euiSubSteps ol { + list-style-type: lower-alpha; } + +/** + * 1. Ensure the connecting lines stays behind the number + * 2. Make each step the same width + * 3. Make the content of each step align to the top, even if the steps are of varying heights, + * e.g. due to some of their titles wrapping to multiple lines + */ +.euiStepsHorizontal { + display: -webkit-flex; + display: flex; + -webkit-align-items: stretch; + align-items: stretch; + background: rgba(37, 38, 46, 0.5); } + +.euiStepHorizontal__item { + -webkit-flex-grow: 1; + flex-grow: 1; + /* 2 */ + -webkit-flex-basis: 0%; + flex-basis: 0%; + /* 2 */ } + .euiStepHorizontal__item:first-of-type > .euiStepHorizontal::before, + .euiStepHorizontal__item:last-of-type > .euiStepHorizontal::after { + display: none; } + +.euiStepHorizontal { + padding: 24px 16px 16px; + display: -webkit-flex; + display: flex; + /* 3 */ + -webkit-flex-direction: column; + flex-direction: column; + /* 3 */ + -webkit-align-items: center; + align-items: center; + /* 3 */ + -webkit-justify-content: flex-start; + justify-content: flex-start; + /* 3 */ + cursor: pointer; + position: relative; + width: 100%; } + .euiStepHorizontal:focus:not(.euiStepHorizontal-isDisabled) .euiStepHorizontal__title, .euiStepHorizontal:hover:not(.euiStepHorizontal-isDisabled) .euiStepHorizontal__title { + text-decoration: underline; } + .euiStepHorizontal:focus:not(.euiStepHorizontal-isDisabled) { + outline: none; } + .euiStepHorizontal:focus:not(.euiStepHorizontal-isDisabled) .euiStepHorizontal__number { + outline: 2px solid currentColor; } + .euiStepHorizontal:focus:not(.euiStepHorizontal-isDisabled) .euiStepHorizontal__number:focus-visible { + outline-style: auto; } + .euiStepHorizontal:focus:not(.euiStepHorizontal-isDisabled) .euiStepHorizontal__number:not(:focus-visible) { + outline: none; } + .euiStepHorizontal.euiStepHorizontal-isDisabled { + cursor: not-allowed; } + .euiStepHorizontal::before, .euiStepHorizontal::after { + content: ''; + position: absolute; + width: calc(50% - 16px); + height: 1px; + top: 40px; + background-color: #343741; + z-index: 0; + /* 1 */ } + .euiStepHorizontal::before { + left: 0; } + .euiStepHorizontal::after { + right: 0; } + +.euiStepHorizontal__number { + position: relative; + /* 1 */ + z-index: 1; + /* 1 */ + transition: all 150ms ease-in-out; } + +.euiStepHorizontal__title { + color: #DFE5EF; + font-size: 16px; + font-size: 1.14286rem; + line-height: 1.71429rem; + font-weight: 700; + margin-top: 8px; + font-weight: 400; + text-align: center; } + .euiStepHorizontal-isDisabled .euiStepHorizontal__title { + color: #98A2B3; } + +.euiStepHorizontal-isComplete::before, .euiStepHorizontal-isComplete::after { + height: 2px; + background-color: #36A2EF; } + +.euiStepHorizontal-isSelected .euiStepHorizontal__number:not([class*='danger']):not([class*='warning']):not([class*='loading']) { + box-shadow: 0 0.8px 0.8px rgba(76, 158, 217, 0.1), 0 2.3px 2px rgba(76, 158, 217, 0.075); } + +.euiStepHorizontal-isSelected::before { + height: 2px; + background-color: #36A2EF; } + +@media only screen and (max-width: 574px) { + .euiStepHorizontal { + padding-top: 16px; } + .euiStepHorizontal::before, .euiStepHorizontal::after { + top: 32px; } + .euiStepHorizontal__title { + display: none; } } + +@media only screen and (min-width: 575px) and (max-width: 767px) { + .euiStepHorizontal { + padding-top: 16px; } + .euiStepHorizontal::before, .euiStepHorizontal::after { + top: 32px; } + .euiStepHorizontal__title { + display: none; } } + +.euiSuggestItem { + display: -webkit-flex; + display: flex; + -webkit-flex-grow: 1; + flex-grow: 1; + -webkit-align-items: center; + align-items: center; + font-size: 12px; + white-space: nowrap; } + .euiSuggestItem.euiSuggestItem-isClickable { + width: 100%; + text-align: left; } + .euiSuggestItem.euiSuggestItem-isClickable:hover, .euiSuggestItem.euiSuggestItem-isClickable:focus { + cursor: pointer; + background-color: #25262E; } + .euiSuggestItem.euiSuggestItem-isClickable:hover .euiSuggestItem__type, .euiSuggestItem.euiSuggestItem-isClickable:focus .euiSuggestItem__type { + color: #D4DAE5; } + .euiSuggestItem .euiSuggestItem__type--tint0 { + background-color: #19362e; + color: #54B399; } + .euiSuggestItem .euiSuggestItem__type--tint1 { + background-color: #1d2c3a; + color: #6897c3; } + .euiSuggestItem .euiSuggestItem__type--tint2 { + background-color: #3f1d28; + color: #d77092; } + .euiSuggestItem .euiSuggestItem__type--tint3 { + background-color: #2c2237; + color: #a184c2; } + .euiSuggestItem .euiSuggestItem__type--tint4 { + background-color: #3d2b34; + color: #CA8EAE; } + .euiSuggestItem .euiSuggestItem__type--tint5 { + background-color: #40391a; + color: #D6BF57; } + .euiSuggestItem .euiSuggestItem__type--tint6 { + background-color: #383229; + color: #B9A888; } + .euiSuggestItem .euiSuggestItem__type--tint7 { + background-color: #412a15; + color: #DA8B45; } + .euiSuggestItem .euiSuggestItem__type--tint8 { + background-color: #331e1a; + color: #b67b6e; } + .euiSuggestItem .euiSuggestItem__type--tint9 { + background-color: #451f17; + color: #e86e55; } + .euiSuggestItem .euiSuggestItem__type--tint10 { + background-color: #2e3136; + color: #98A2B3; } + .euiSuggestItem .euiSuggestItem__label, + .euiSuggestItem .euiSuggestItem__type, + .euiSuggestItem .euiSuggestItem__description { + -webkit-flex-grow: 0; + flex-grow: 0; + display: -webkit-flex; + display: flex; + -webkit-flex-direction: column; + flex-direction: column; } + .euiSuggestItem .euiSuggestItem__type { + position: relative; + -webkit-flex-shrink: 0; + flex-shrink: 0; + -webkit-flex-basis: auto; + flex-basis: auto; + width: 32px; + height: 32px; + text-align: center; + overflow: hidden; + padding: 4px; + -webkit-justify-content: center; + justify-content: center; + -webkit-align-items: center; + align-items: center; } + .euiSuggestItem .euiSuggestItem__label { + max-width: 100%; + overflow: hidden !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; + word-wrap: normal !important; + font-family: "Roboto Mono", Consolas, Menlo, Courier, monospace; + overflow: hidden; + text-overflow: ellipsis; + padding: 4px 8px; + color: #DFE5EF; + display: block; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width20 { + -webkit-flex-basis: 20%; + flex-basis: 20%; + min-width: 20%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width21 { + -webkit-flex-basis: 21%; + flex-basis: 21%; + min-width: 21%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width22 { + -webkit-flex-basis: 22%; + flex-basis: 22%; + min-width: 22%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width23 { + -webkit-flex-basis: 23%; + flex-basis: 23%; + min-width: 23%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width24 { + -webkit-flex-basis: 24%; + flex-basis: 24%; + min-width: 24%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width25 { + -webkit-flex-basis: 25%; + flex-basis: 25%; + min-width: 25%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width26 { + -webkit-flex-basis: 26%; + flex-basis: 26%; + min-width: 26%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width27 { + -webkit-flex-basis: 27%; + flex-basis: 27%; + min-width: 27%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width28 { + -webkit-flex-basis: 28%; + flex-basis: 28%; + min-width: 28%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width29 { + -webkit-flex-basis: 29%; + flex-basis: 29%; + min-width: 29%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width30 { + -webkit-flex-basis: 30%; + flex-basis: 30%; + min-width: 30%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width31 { + -webkit-flex-basis: 31%; + flex-basis: 31%; + min-width: 31%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width32 { + -webkit-flex-basis: 32%; + flex-basis: 32%; + min-width: 32%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width33 { + -webkit-flex-basis: 33%; + flex-basis: 33%; + min-width: 33%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width34 { + -webkit-flex-basis: 34%; + flex-basis: 34%; + min-width: 34%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width35 { + -webkit-flex-basis: 35%; + flex-basis: 35%; + min-width: 35%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width36 { + -webkit-flex-basis: 36%; + flex-basis: 36%; + min-width: 36%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width37 { + -webkit-flex-basis: 37%; + flex-basis: 37%; + min-width: 37%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width38 { + -webkit-flex-basis: 38%; + flex-basis: 38%; + min-width: 38%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width39 { + -webkit-flex-basis: 39%; + flex-basis: 39%; + min-width: 39%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width40 { + -webkit-flex-basis: 40%; + flex-basis: 40%; + min-width: 40%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width41 { + -webkit-flex-basis: 41%; + flex-basis: 41%; + min-width: 41%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width42 { + -webkit-flex-basis: 42%; + flex-basis: 42%; + min-width: 42%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width43 { + -webkit-flex-basis: 43%; + flex-basis: 43%; + min-width: 43%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width44 { + -webkit-flex-basis: 44%; + flex-basis: 44%; + min-width: 44%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width45 { + -webkit-flex-basis: 45%; + flex-basis: 45%; + min-width: 45%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width46 { + -webkit-flex-basis: 46%; + flex-basis: 46%; + min-width: 46%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width47 { + -webkit-flex-basis: 47%; + flex-basis: 47%; + min-width: 47%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width48 { + -webkit-flex-basis: 48%; + flex-basis: 48%; + min-width: 48%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width49 { + -webkit-flex-basis: 49%; + flex-basis: 49%; + min-width: 49%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width50 { + -webkit-flex-basis: 50%; + flex-basis: 50%; + min-width: 50%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width51 { + -webkit-flex-basis: 51%; + flex-basis: 51%; + min-width: 51%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width52 { + -webkit-flex-basis: 52%; + flex-basis: 52%; + min-width: 52%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width53 { + -webkit-flex-basis: 53%; + flex-basis: 53%; + min-width: 53%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width54 { + -webkit-flex-basis: 54%; + flex-basis: 54%; + min-width: 54%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width55 { + -webkit-flex-basis: 55%; + flex-basis: 55%; + min-width: 55%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width56 { + -webkit-flex-basis: 56%; + flex-basis: 56%; + min-width: 56%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width57 { + -webkit-flex-basis: 57%; + flex-basis: 57%; + min-width: 57%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width58 { + -webkit-flex-basis: 58%; + flex-basis: 58%; + min-width: 58%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width59 { + -webkit-flex-basis: 59%; + flex-basis: 59%; + min-width: 59%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width60 { + -webkit-flex-basis: 60%; + flex-basis: 60%; + min-width: 60%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width61 { + -webkit-flex-basis: 61%; + flex-basis: 61%; + min-width: 61%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width62 { + -webkit-flex-basis: 62%; + flex-basis: 62%; + min-width: 62%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width63 { + -webkit-flex-basis: 63%; + flex-basis: 63%; + min-width: 63%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width64 { + -webkit-flex-basis: 64%; + flex-basis: 64%; + min-width: 64%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width65 { + -webkit-flex-basis: 65%; + flex-basis: 65%; + min-width: 65%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width66 { + -webkit-flex-basis: 66%; + flex-basis: 66%; + min-width: 66%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width67 { + -webkit-flex-basis: 67%; + flex-basis: 67%; + min-width: 67%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width68 { + -webkit-flex-basis: 68%; + flex-basis: 68%; + min-width: 68%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width69 { + -webkit-flex-basis: 69%; + flex-basis: 69%; + min-width: 69%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width70 { + -webkit-flex-basis: 70%; + flex-basis: 70%; + min-width: 70%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width71 { + -webkit-flex-basis: 71%; + flex-basis: 71%; + min-width: 71%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width72 { + -webkit-flex-basis: 72%; + flex-basis: 72%; + min-width: 72%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width73 { + -webkit-flex-basis: 73%; + flex-basis: 73%; + min-width: 73%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width74 { + -webkit-flex-basis: 74%; + flex-basis: 74%; + min-width: 74%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width75 { + -webkit-flex-basis: 75%; + flex-basis: 75%; + min-width: 75%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width76 { + -webkit-flex-basis: 76%; + flex-basis: 76%; + min-width: 76%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width77 { + -webkit-flex-basis: 77%; + flex-basis: 77%; + min-width: 77%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width78 { + -webkit-flex-basis: 78%; + flex-basis: 78%; + min-width: 78%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width79 { + -webkit-flex-basis: 79%; + flex-basis: 79%; + min-width: 79%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width80 { + -webkit-flex-basis: 80%; + flex-basis: 80%; + min-width: 80%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width81 { + -webkit-flex-basis: 81%; + flex-basis: 81%; + min-width: 81%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width82 { + -webkit-flex-basis: 82%; + flex-basis: 82%; + min-width: 82%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width83 { + -webkit-flex-basis: 83%; + flex-basis: 83%; + min-width: 83%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width84 { + -webkit-flex-basis: 84%; + flex-basis: 84%; + min-width: 84%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width85 { + -webkit-flex-basis: 85%; + flex-basis: 85%; + min-width: 85%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width86 { + -webkit-flex-basis: 86%; + flex-basis: 86%; + min-width: 86%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width87 { + -webkit-flex-basis: 87%; + flex-basis: 87%; + min-width: 87%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width88 { + -webkit-flex-basis: 88%; + flex-basis: 88%; + min-width: 88%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width89 { + -webkit-flex-basis: 89%; + flex-basis: 89%; + min-width: 89%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width90 { + -webkit-flex-basis: 90%; + flex-basis: 90%; + min-width: 90%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__labelDisplay--expand { + -webkit-flex-basis: auto; + flex-basis: auto; + -webkit-flex-shrink: 1; + flex-shrink: 1; } + .euiSuggestItem .euiSuggestItem__description { + color: #98A2B3; + -webkit-flex-basis: auto; + flex-basis: auto; + padding-top: 2px; + display: block; } + .euiSuggestItem .euiSuggestItem__description.euiSuggestItem__description--wrap { + overflow-wrap: break-word !important; + word-wrap: break-word !important; + word-break: break-word; + white-space: normal; + line-height: 14px; } + .euiSuggestItem .euiSuggestItem__description.euiSuggestItem__description--truncate { + max-width: 100%; + overflow: hidden !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; + word-wrap: normal !important; + line-height: 1.5; } + .euiSuggestItem .euiSuggestItem__description:empty { + -webkit-flex-grow: 0; + flex-grow: 0; + margin-left: 0; } + +.euiSuggestInput__statusIcon { + background-color: transparent !important; } + +/** + * NOTE: table-layout: fixed causes a bug in IE11 and Edge (see #9929). It also prevents us from + * specifying a column width, e.g. the checkbox column. + */ +.euiTable { + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + font-feature-settings: "calt" 1, "kern" 1, "liga" 1, "tnum" 1; + width: 100%; + table-layout: fixed; + border: none; + border-collapse: collapse; + background-color: #1D1E24; } + .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.85714rem; + line-height: 1.14286rem; + padding: 4px; } } + +@media only screen and (min-width: 992px) and (max-width: 1199px) { + .euiTable--compressed .euiTableCellContent { + font-size: 12px; + font-size: 0.85714rem; + line-height: 1.14286rem; + padding: 4px; } } + +@media only screen and (min-width: 1200px) { + .euiTable--compressed .euiTableCellContent { + font-size: 12px; + font-size: 0.85714rem; + line-height: 1.14286rem; + padding: 4px; } } + +.euiTableFooterCell, +.euiTableHeaderCell { + vertical-align: middle; + border-top: 1px solid #343741; + border-bottom: 1px solid #343741; + font-weight: inherit; + text-align: inherit; + color: #DFE5EF; + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + font-weight: 700; + font-weight: 500; + border-top: none; } + .euiTableFooterCell .euiTableHeaderButton, + .euiTableHeaderCell .euiTableHeaderButton { + text-align: left; + font-weight: 500; } + .euiTableFooterCell .euiTableCellContent__text, + .euiTableHeaderCell .euiTableCellContent__text { + font-size: 12px; + font-size: 0.85714rem; + line-height: 1.14286rem; + font-weight: 600; } + +.euiTableHeaderButton { + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + color: inherit; + width: 100%; } + .euiTableHeaderButton:hover .euiTableCellContent__text, .euiTableHeaderButton:focus .euiTableCellContent__text { + text-decoration: underline; + color: #36A2EF; } + .euiTableHeaderButton:hover .euiTableSortIcon, .euiTableHeaderButton:focus .euiTableSortIcon { + fill: #36A2EF; } + +.euiTableSortIcon { + margin-left: 4px; + -webkit-flex-shrink: 0; + flex-shrink: 0; } + .euiTableHeaderButton-isSorted .euiTableSortIcon { + fill: #DFE5EF; } + +.euiTableHeaderCellCheckbox { + vertical-align: middle; + border-top: 1px solid #343741; + border-bottom: 1px solid #343741; + font-weight: inherit; + text-align: inherit; + width: 32px; + vertical-align: middle; + border-top: none; } + +.euiTableRow:hover { + background-color: #1e1e25; } + +.euiTableRow.euiTableRow-isClickable:hover { + background-color: rgba(54, 162, 239, 0.05); + cursor: pointer; } + +.euiTableRow.euiTableRow-isClickable:focus { + background-color: rgba(54, 162, 239, 0.1); } + +.euiTableRow.euiTableRow-isExpandedRow { + background-color: #1e1e25; } + .euiTableRow.euiTableRow-isExpandedRow.euiTableRow-isSelectable .euiTableCellContent { + padding-left: 40px; } + +.euiTableRow.euiTableRow-isSelected { + background-color: rgba(54, 162, 239, 0.3); } + .euiTableRow.euiTableRow-isSelected + .euiTableRow.euiTableRow-isExpandedRow .euiTableRowCell { + background-color: rgba(54, 162, 239, 0.3); } + .euiTableRow.euiTableRow-isSelected:hover, + .euiTableRow.euiTableRow-isSelected:hover + .euiTableRow.euiTableRow-isExpandedRow .euiTableRowCell { + background-color: rgba(33, 99, 147, 0.37); } + +.euiTableRowCell { + vertical-align: middle; + border-top: 1px solid #343741; + border-bottom: 1px solid #343741; + font-weight: inherit; + text-align: inherit; + color: #DFE5EF; } + .euiTableRowCell.euiTableRowCell--isMobileHeader { + display: none; } + +.euiTableRowCellCheckbox { + vertical-align: middle; + border-top: 1px solid #343741; + border-bottom: 1px solid #343741; + font-weight: inherit; + text-align: inherit; + width: 32px; + vertical-align: middle; } + +.euiTableFooterCell { + background-color: #25262E; + border-bottom: none; } + +/** + * 1. Vertically align all children. + * 2. The padding on this div allows the ellipsis to show if the content is truncated. If + * the padding was on the cell, the ellipsis would be cropped. + * 3. Support wrapping. + * 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-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 { + white-space: nowrap; + /* 3 */ } + .euiTableHeaderCell .euiTableCellContent__text, + .euiTableFooterCell .euiTableCellContent__text, + .euiTableCellContent--truncateText .euiTableCellContent__text { + overflow: hidden; } + +.euiTableCellContent--overflowingContent { + overflow: visible; + white-space: normal; + word-break: break-all; + 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: .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 { + overflow: hidden; + -webkit-animation: 250ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards growExpandedRow; + animation: 250ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards growExpandedRow; } + +@-webkit-keyframes growExpandedRow { + 0% { + max-height: 0; } + 99% { + max-height: 100vh; } + 100% { + max-height: unset; } } + +@keyframes growExpandedRow { + 0% { + max-height: 0; } + 99% { + max-height: 100vh; } + 100% { + max-height: unset; } } + +.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; + word-wrap: normal !important; + font-size: 9.625px; + font-size: 0.6875rem; + display: block; + color: #98A2B3; + 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: 14px; + font-size: 1rem; + line-height: 1.71429rem; } + .euiTable.euiTable--responsive .euiTableRowCell--isMobileFullWidth { + width: 100%; } + .euiTable.euiTable--responsive .euiTableRowCell--isMobileFullWidth .euiTableCellContent--alignCenter { + -webkit-justify-content: center; + justify-content: center; + text-align: center; } + .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.2), 0 2.6px 8px -1px rgba(0, 0, 0, 0.15), 0 5.7px 12px -1px rgba(0, 0, 0, 0.125), 0 15px 15px -1px rgba(0, 0, 0, 0.1); } + .euiTable.euiTable--responsive .euiTableRow.euiTableRow--hasBorder { + border: 1px solid #343741; + 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.25), 0 3.6px 13px rgba(0, 0, 0, 0.175), 0 8.4px 23px rgba(0, 0, 0, 0.15), 0 23px 35px rgba(0, 0, 0, 0.125); + -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: 4px; } + .euiTable.euiTable--responsive .euiTableRow.euiTableRow--transparent { + background-color: transparent; } + .euiTable.euiTable--responsive .euiTableRow.euiTableRow--plain { + background-color: #1D1E24; } + .euiTable.euiTable--responsive .euiTableRow.euiTableRow--subdued { + background-color: #141519; } + .euiTable.euiTable--responsive .euiTableRow.euiTableRow--accent { + background-color: #4a2b39; } + .euiTable.euiTable--responsive .euiTableRow.euiTableRow--primary { + background-color: #103148; } + .euiTable.euiTable--responsive .euiTableRow.euiTableRow--success { + background-color: #264341; } + .euiTable.euiTable--responsive .euiTableRow.euiTableRow--warning { + background-color: #493f22; } + .euiTable.euiTable--responsive .euiTableRow.euiTableRow--danger { + background-color: #4a201e; } + .euiTable.euiTable--responsive .euiTableRow { + box-shadow: 0 0.7px 1.4px rgba(0, 0, 0, 0.175), 0 1.9px 4px rgba(0, 0, 0, 0.125), 0 4.5px 10px rgba(0, 0, 0, 0.125); + background-color: #1D1E24; + 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: #1D1E24; } + .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isExpandable, .euiTable.euiTable--responsive .euiTableRow.euiTableRow-hasActions { + background-image: linear-gradient(to right, rgba(83, 89, 102, 0.1) 0, rgba(83, 89, 102, 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(54, 162, 239, 0.3); } + .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isExpandedRow { + background-image: linear-gradient(to right, rgba(83, 89, 102, 0.1) 0, rgba(83, 89, 102, 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.175), 0 1.9px 4px rgba(0, 0, 0, 0.125), 0 4.5px 10px rgba(0, 0, 0, 0.125); + 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: #1D1E24; } + .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 { + display: block; + /* IE requires block to grow and wrap. */ + 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; + word-wrap: normal !important; + font-size: 9.625px; + font-size: 0.6875rem; + display: block; + color: #98A2B3; + 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: 14px; + font-size: 1rem; + line-height: 1.71429rem; } + .euiTable.euiTable--responsive .euiTableRowCell--isMobileFullWidth { + width: 100%; } + .euiTable.euiTable--responsive .euiTableRowCell--isMobileFullWidth .euiTableCellContent--alignCenter { + -webkit-justify-content: center; + justify-content: center; + text-align: center; } + .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.2), 0 2.6px 8px -1px rgba(0, 0, 0, 0.15), 0 5.7px 12px -1px rgba(0, 0, 0, 0.125), 0 15px 15px -1px rgba(0, 0, 0, 0.1); } + .euiTable.euiTable--responsive .euiTableRow.euiTableRow--hasBorder { + border: 1px solid #343741; + 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.25), 0 3.6px 13px rgba(0, 0, 0, 0.175), 0 8.4px 23px rgba(0, 0, 0, 0.15), 0 23px 35px rgba(0, 0, 0, 0.125); + -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: 4px; } + .euiTable.euiTable--responsive .euiTableRow.euiTableRow--transparent { + background-color: transparent; } + .euiTable.euiTable--responsive .euiTableRow.euiTableRow--plain { + background-color: #1D1E24; } + .euiTable.euiTable--responsive .euiTableRow.euiTableRow--subdued { + background-color: #141519; } + .euiTable.euiTable--responsive .euiTableRow.euiTableRow--accent { + background-color: #4a2b39; } + .euiTable.euiTable--responsive .euiTableRow.euiTableRow--primary { + background-color: #103148; } + .euiTable.euiTable--responsive .euiTableRow.euiTableRow--success { + background-color: #264341; } + .euiTable.euiTable--responsive .euiTableRow.euiTableRow--warning { + background-color: #493f22; } + .euiTable.euiTable--responsive .euiTableRow.euiTableRow--danger { + background-color: #4a201e; } + .euiTable.euiTable--responsive .euiTableRow { + box-shadow: 0 0.7px 1.4px rgba(0, 0, 0, 0.175), 0 1.9px 4px rgba(0, 0, 0, 0.125), 0 4.5px 10px rgba(0, 0, 0, 0.125); + background-color: #1D1E24; + 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: #1D1E24; } + .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isExpandable, .euiTable.euiTable--responsive .euiTableRow.euiTableRow-hasActions { + background-image: linear-gradient(to right, rgba(83, 89, 102, 0.1) 0, rgba(83, 89, 102, 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(54, 162, 239, 0.3); } + .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isExpandedRow { + background-image: linear-gradient(to right, rgba(83, 89, 102, 0.1) 0, rgba(83, 89, 102, 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.175), 0 1.9px 4px rgba(0, 0, 0, 0.125), 0 4.5px 10px rgba(0, 0, 0, 0.125); + 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: #1D1E24; } + .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 { + display: block; + /* IE requires block to grow and wrap. */ + 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; } } + +.euiTabs { + scrollbar-width: thin; + display: -webkit-flex; + display: flex; + max-width: 100%; + overflow-x: auto; + overflow-y: hidden; + position: relative; + -webkit-flex-shrink: 0; + flex-shrink: 0; } + .euiTabs::-webkit-scrollbar { + width: 16px; + height: 16px; } + .euiTabs::-webkit-scrollbar-thumb { + background-color: rgba(152, 162, 179, 0.5); + border: 6px solid transparent; + background-clip: content-box; } + .euiTabs::-webkit-scrollbar-corner, .euiTabs::-webkit-scrollbar-track { + background-color: transparent; } + .euiTabs::-webkit-scrollbar { + height: 3px; } + .euiTabs:not(.euiTabs--condensed)::before { + background-color: #343741; + bottom: 0; + content: ''; + height: 1px; + left: 0; + position: absolute; + right: 0; } + +.euiTab { + font-size: 14px; + font-size: 1rem; + color: #DFE5EF; + background-color: transparent; + cursor: pointer; + line-height: 1.5; + padding: 12px 16px; + position: relative; + transition: color 250ms cubic-bezier(0.694, 0.0482, 0.335, 1), background-color 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } + .euiTab:hover:not(.euiTab-isSelected) { + text-decoration: underline; } + .euiTab:focus { + background-color: rgba(54, 162, 239, 0.3); + text-decoration: underline; + outline-offset: -2px; } + .euiTab:focus::before { + background-color: #343741; + bottom: 0; + content: ''; + height: 1px; + left: 0; + position: absolute; + right: 0; } + .euiTab.euiTab-isSelected { + color: #36A2EF; + cursor: default; } + .euiTab.euiTab-isSelected::after { + -webkit-animation: euiTab 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); + animation: euiTab 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); + background-color: #36A2EF; + bottom: 0; + content: ' '; + height: 2px; + left: 0; + position: absolute; + width: 100%; } + .euiTab.euiTab-isDisabled { + color: #515761; } + .euiTab.euiTab-isDisabled:hover { + color: #515761; + cursor: not-allowed; + text-decoration: none; } + .euiTab.euiTab-isDisabled::after { + background-color: #515761; } + .euiTabs--small .euiTab { + font-size: 14px; + font-size: 1rem; + padding: 8px; } + .euiTabs--condensed .euiTab { + font-weight: 600; + padding: 8px 4px; } + .euiTabs--condensed .euiTab:focus { + background-color: rgba(54, 162, 239, 0.3); } + .euiTabs--condensed .euiTab:focus::before { + display: none; } + .euiTabs--condensed .euiTab-isSelected { + text-decoration: none; } + .euiTabs--condensed .euiTab + .euiTab { + margin-left: 16px; } + .euiTabs--small.euiTabs--condensed .euiTab { + padding-top: 6px; + padding-bottom: 6px; } + .euiTabs--large.euiTabs--condensed .euiTab + .euiTab { + margin-left: 24px; } + .euiTabs--expand .euiTab { + -webkit-flex-basis: 0%; + flex-basis: 0%; + -webkit-flex-grow: 1; + flex-grow: 1; } + +.euiTab__content { + display: block; + overflow: hidden; + text-overflow: ellipsis; + -webkit-transform: translateY(0); + transform: translateY(0); + transition: -webkit-transform 150ms cubic-bezier(0.34, 1.61, 0.7, 1); + transition: transform 150ms cubic-bezier(0.34, 1.61, 0.7, 1); + transition: transform 150ms cubic-bezier(0.34, 1.61, 0.7, 1), -webkit-transform 150ms cubic-bezier(0.34, 1.61, 0.7, 1); + white-space: nowrap; } + +@-webkit-keyframes euiTab { + 0% { + -webkit-transform: scaleX(0); + transform: scaleX(0); } + 100% { + -webkit-transform: scaleX(1); + transform: scaleX(1); } } + +@keyframes euiTab { + 0% { + -webkit-transform: scaleX(0); + transform: scaleX(0); } + 100% { + -webkit-transform: scaleX(1); + transform: scaleX(1); } } + +.euiTextDiff del { + color: #F86B63; } + +.euiTextDiff ins { + color: #7DDED8; } + +.euiTitle + .euiTitle { + margin-top: 24px; } + +.euiTitle--uppercase { + text-transform: uppercase; } + +.euiTitle--xxxsmall { + color: #DFE5EF; + font-size: 12px; + font-size: 0.85714rem; + line-height: 1.14286rem; + font-weight: 700; } + +.euiTitle--xxsmall { + color: #DFE5EF; + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + font-weight: 700; } + +.euiTitle--xsmall { + color: #DFE5EF; + font-size: 16px; + font-size: 1.14286rem; + line-height: 1.71429rem; + font-weight: 700; } + +.euiTitle--small { + color: #DFE5EF; + font-size: 22px; + font-size: 1.57143rem; + line-height: 2.28571rem; + font-weight: 700; } + +.euiTitle--medium { + color: #DFE5EF; + font-size: 27px; + font-size: 1.92857rem; + line-height: 2.28571rem; + font-weight: 700; } + +.euiTitle--large { + color: #DFE5EF; + font-size: 34px; + font-size: 2.42857rem; + line-height: 2.85714rem; + font-weight: 700; } + +/** + * 1. Allow list to expand as items are added, but cap it at the screen height. + * 2. Allow some padding for shadow + */ +.euiGlobalToastList { + scrollbar-width: thin; + display: -webkit-flex; + display: flex; + -webkit-flex-direction: column; + flex-direction: column; + -webkit-align-items: stretch; + align-items: stretch; + position: fixed; + z-index: 9000; + bottom: 0; + width: 400px; + /* 2 */ + max-height: 100vh; + /* 1 */ + overflow-y: auto; + scrollbar-width: none; } + .euiGlobalToastList::-webkit-scrollbar { + width: 16px; + height: 16px; } + .euiGlobalToastList::-webkit-scrollbar-thumb { + background-color: rgba(152, 162, 179, 0.5); + border: 6px solid transparent; + background-clip: content-box; } + .euiGlobalToastList::-webkit-scrollbar-corner, .euiGlobalToastList::-webkit-scrollbar-track { + background-color: transparent; } + .euiGlobalToastList::-webkit-scrollbar { + width: 0; + height: 0; } + .euiGlobalToastList:not(:empty) { + padding: 16px; } + +.euiGlobalToastList--right:not(:empty) { + right: 0; + padding-left: 64px; + /* 2 */ } + +.euiGlobalToastList--left:not(:empty) { + left: 0; + padding-right: 64px; + /* 2 */ } + +.euiGlobalToastListItem { + margin-bottom: 16px; + -webkit-animation: 250ms euiShowToast cubic-bezier(0.694, 0.0482, 0.335, 1); + animation: 250ms euiShowToast cubic-bezier(0.694, 0.0482, 0.335, 1); + opacity: 1; + /** + * 1. justify-content: flex-end interferes with overflowing content, so we'll use this to push + * items to the bottom instead. + */ } + .euiGlobalToastListItem:first-child { + margin-top: auto; + /* 1 */ } + .euiGlobalToastListItem:last-child { + margin-bottom: 0; } + .euiGlobalToastListItem.euiGlobalToastListItem-isDismissed { + transition: opacity 250ms; + opacity: 0; } + +@-webkit-keyframes euiShowToast { + from { + -webkit-transform: translateY(24px) scale(0.9); + transform: translateY(24px) scale(0.9); + opacity: 0; } + to { + -webkit-transform: translateY(0) scale(1); + transform: translateY(0) scale(1); + opacity: 1; } } + +@keyframes euiShowToast { + from { + -webkit-transform: translateY(24px) scale(0.9); + transform: translateY(24px) scale(0.9); + opacity: 0; } + to { + -webkit-transform: translateY(0) scale(1); + transform: translateY(0) scale(1); + opacity: 1; } } + +@media only screen and (max-width: 574px) { + /** + * 1. Mobile we make these 100%. Matching change happens on the item as well. + */ + .euiGlobalToastList:not(:empty) { + left: 0; + padding-left: 16px; + padding-right: 16px; + width: 100%; + /* 1 */ } } + +@media only screen and (min-width: 575px) and (max-width: 767px) { + /** + * 1. Mobile we make these 100%. Matching change happens on the item as well. + */ + .euiGlobalToastList:not(:empty) { + left: 0; + padding-left: 16px; + padding-right: 16px; + width: 100%; + /* 1 */ } } + +.euiToast { + border: 1px solid #343741; + box-shadow: 0 2.7px 9px rgba(0, 0, 0, 0.325), 0 9.4px 24px rgba(0, 0, 0, 0.225), 0 21.8px 43px rgba(0, 0, 0, 0.2); + position: relative; + padding: 16px; + background-color: #1D1E24; + width: 100%; } + .euiToast:hover .euiToast__closeButton, + .euiToast:focus .euiToast__closeButton { + opacity: 1; } + +/** + * 1. Fit button to icon. + */ +.euiToast__closeButton { + position: absolute; + top: 16px; + right: 16px; + line-height: 0; + /* 1 */ + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + opacity: 0; + transition: opacity 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); } + .euiToast__closeButton svg { + fill: #434548; } + .euiToast__closeButton:hover svg { + fill: #DFE5EF; } + .euiToast__closeButton:focus { + background-color: rgba(54, 162, 239, 0.3); + opacity: 1; } + .euiToast__closeButton:focus svg { + fill: #36A2EF; } + +.euiToast--primary { + border-top: 2px solid #36A2EF; } + +.euiToast--success { + border-top: 2px solid #7DDED8; } + +.euiToast--warning { + border-top: 2px solid #F3D371; } + +.euiToast--danger { + border-top: 2px solid #F86B63; } + +/** + * 1. Align icon with first line of title text if it wraps. + * 2. Apply margin to all but last item in the flex. + * 3. Account for close button. + */ +.euiToastHeader { + padding-right: 24px; + /* 3 */ + display: -webkit-flex; + display: flex; + -webkit-align-items: baseline; + align-items: baseline; + /* 1 */ } + .euiToastHeader > * + * { + margin-left: 8px; + /* 2 */ } + +/** + * 1. Vertically center icon with first line of title. + */ +.euiToastHeader__icon { + -webkit-flex: 0 0 auto; + flex: 0 0 auto; + fill: #DFE5EF; + -webkit-transform: translateY(2px); + transform: translateY(2px); + /* 1 */ } + +.euiToastHeader__title { + color: #DFE5EF; + font-size: 16px; + font-size: 1.14286rem; + line-height: 1.71429rem; + font-weight: 700; + overflow-wrap: break-word !important; + word-wrap: break-word !important; + word-break: break-word; + font-weight: 300; } + +.euiToastHeader--withBody { + margin-bottom: 8px; } + +/** + * 1. Prevent long lines from overflowing. + */ +.euiToastBody { + word-wrap: break-word; + /* 1 */ } + +.euiToken { + display: -webkit-inline-flex; + display: inline-flex; + -webkit-align-items: center; + align-items: center; + -webkit-justify-content: center; + justify-content: center; } + .euiToken svg { + height: 100%; + margin: auto; } + +.euiToken--circle { + border-radius: 50%; } + +.euiToken--square { + border-radius: 5px; } + +.euiToken--xsmall { + width: 12px; + height: 12px; } + .euiToken--xsmall.euiToken--rectangle { + padding: 0 4px; } + +.euiToken--small { + width: 16px; + height: 16px; } + .euiToken--small.euiToken--rectangle { + padding: 0 4px; } + +.euiToken--medium { + width: 24px; + height: 24px; } + .euiToken--medium.euiToken--rectangle { + padding: 0 8px; } + +.euiToken--large { + width: 32px; + height: 32px; } + .euiToken--large.euiToken--rectangle { + padding: 0 8px; } + +.euiToken--rectangle { + box-sizing: content-box; } + +.euiToken--euiColorVis0 { + color: #54B399; } + .euiToken--euiColorVis0.euiToken--light { + color: #54B399; + background-color: #19362e; + box-shadow: inset 0 0 0 1px #22483d; } + .euiToken--euiColorVis0.euiToken--dark { + background-color: #6DCCB1; + color: #000; } + +.euiToken--euiColorVis1 { + color: #6092C0; } + .euiToken--euiColorVis1.euiToken--light { + color: #6897c3; + background-color: #1d2c3a; + box-shadow: inset 0 0 0 1px #263a4d; } + .euiToken--euiColorVis1.euiToken--dark { + background-color: #79AAD9; + color: #000; } + +.euiToken--euiColorVis2 { + color: #D36086; } + .euiToken--euiColorVis2.euiToken--light { + color: #d77092; + background-color: #3f1d28; + box-shadow: inset 0 0 0 1px #542636; } + .euiToken--euiColorVis2.euiToken--dark { + background-color: #EE789D; + color: #000; } + +.euiToken--euiColorVis3 { + color: #9170B8; } + .euiToken--euiColorVis3.euiToken--light { + color: #a184c2; + background-color: #2c2237; + box-shadow: inset 0 0 0 1px #3a2d4a; } + .euiToken--euiColorVis3.euiToken--dark { + background-color: #A987D1; + color: #000; } + +.euiToken--euiColorVis4 { + color: #CA8EAE; } + .euiToken--euiColorVis4.euiToken--light { + color: #CA8EAE; + background-color: #3d2b34; + box-shadow: inset 0 0 0 1px #513946; } + .euiToken--euiColorVis4.euiToken--dark { + background-color: #E4A6C7; + color: #000; } + +.euiToken--euiColorVis5 { + color: #D6BF57; } + .euiToken--euiColorVis5.euiToken--light { + color: #D6BF57; + background-color: #40391a; + box-shadow: inset 0 0 0 1px #564c23; } + .euiToken--euiColorVis5.euiToken--dark { + background-color: #F1D86F; + color: #000; } + +.euiToken--euiColorVis6 { + color: #B9A888; } + .euiToken--euiColorVis6.euiToken--light { + color: #B9A888; + background-color: #383229; + box-shadow: inset 0 0 0 1px #4a4336; } + .euiToken--euiColorVis6.euiToken--dark { + background-color: #D2C0A0; + color: #000; } + +.euiToken--euiColorVis7 { + color: #DA8B45; } + .euiToken--euiColorVis7.euiToken--light { + color: #DA8B45; + background-color: #412a15; + box-shadow: inset 0 0 0 1px #57381c; } + .euiToken--euiColorVis7.euiToken--dark { + background-color: #F5A35C; + color: #000; } + +.euiToken--euiColorVis8 { + color: #AA6556; } + .euiToken--euiColorVis8.euiToken--light { + color: #b67b6e; + background-color: #331e1a; + box-shadow: inset 0 0 0 1px #442822; } + .euiToken--euiColorVis8.euiToken--dark { + background-color: #C47C6C; + color: #000; } + +.euiToken--euiColorVis9 { + color: #E7664C; } + .euiToken--euiColorVis9.euiToken--light { + color: #e86e55; + background-color: #451f17; + box-shadow: inset 0 0 0 1px #5c291e; } + .euiToken--euiColorVis9.euiToken--dark { + background-color: #FF7E62; + color: #000; } + +.euiToken--gray { + color: #535966; } + .euiToken--gray.euiToken--light { + color: #81858f; + background-color: #191b1f; + box-shadow: inset 0 0 0 1px #212429; } + .euiToken--gray.euiToken--dark { + background-color: #535966; + color: #FFF; } + +/* + * 1. Shift arrow 1px more than half its size to account for border radius + */ +.euiToolTip { + box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25), 0 3.6px 13px rgba(0, 0, 0, 0.175), 0 8.4px 23px rgba(0, 0, 0, 0.15), 0 23px 35px rgba(0, 0, 0, 0.125); + border-radius: 6px; + background-color: black; + color: #FFF; + z-index: 9000; + max-width: 256px; + overflow-wrap: break-word; + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + padding: 12px; + -webkit-animation: euiToolTipTop 350ms ease-out 0s forwards; + animation: euiToolTipTop 350ms ease-out 0s forwards; + position: absolute; + opacity: 0; + /* 1 */ + /* 1 */ } + .euiToolTip .euiToolTip__arrow { + content: ''; + position: absolute; + -webkit-transform-origin: center; + transform-origin: center; + border-radius: 2px; + background-color: black; + width: 12px; + height: 12px; + -webkit-transform: translateY(-7px) rotateZ(45deg); + transform: translateY(-7px) rotateZ(45deg); + /* 1 */ } + .euiToolTip.euiToolTip--right { + -webkit-animation-name: euiToolTipRight; + animation-name: euiToolTipRight; } + .euiToolTip.euiToolTip--right .euiToolTip__arrow { + -webkit-transform: translateX(-5px) rotateZ(45deg); + transform: translateX(-5px) rotateZ(45deg); + /* 1 */ } + .euiToolTip.euiToolTip--bottom { + -webkit-animation-name: euiToolTipBottom; + animation-name: euiToolTipBottom; } + .euiToolTip.euiToolTip--bottom .euiToolTip__arrow { + -webkit-transform: translateY(-5px) rotateZ(45deg); + transform: translateY(-5px) rotateZ(45deg); + /* 1 */ } + .euiToolTip.euiToolTip--left { + -webkit-animation-name: euiToolTipLeft; + animation-name: euiToolTipLeft; } + .euiToolTip.euiToolTip--left .euiToolTip__arrow { + -webkit-transform: translateX(-7px) rotateZ(45deg); + transform: translateX(-7px) rotateZ(45deg); + /* 1 */ } + .euiToolTip .euiToolTip__title { + font-weight: 700; + border-bottom: solid 1px #333333; + padding-bottom: 4px; + margin-bottom: 4px; } + +.euiToolTipAnchor { + display: inline-block; } + .euiToolTipAnchor *[disabled] { + pointer-events: none; } + .euiToolTipAnchor.euiToolTipAnchor--displayBlock { + display: block; } + +@-webkit-keyframes euiToolTipTop { + 0% { + opacity: 0; + -webkit-transform: translateY(-16px); + transform: translateY(-16px); } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); } } + +@keyframes euiToolTipTop { + 0% { + opacity: 0; + -webkit-transform: translateY(-16px); + transform: translateY(-16px); } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); } } + +@-webkit-keyframes euiToolTipBottom { + 0% { + opacity: 0; + -webkit-transform: translateY(16px); + transform: translateY(16px); } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); } } + +@keyframes euiToolTipBottom { + 0% { + opacity: 0; + -webkit-transform: translateY(16px); + transform: translateY(16px); } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); } } + +@-webkit-keyframes euiToolTipLeft { + 0% { + opacity: 0; + -webkit-transform: translateX(-16px); + transform: translateX(-16px); } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); } } + +@keyframes euiToolTipLeft { + 0% { + opacity: 0; + -webkit-transform: translateX(-16px); + transform: translateX(-16px); } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); } } + +@-webkit-keyframes euiToolTipRight { + 0% { + opacity: 0; + -webkit-transform: translateX(16px); + transform: translateX(16px); } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); } } + +@keyframes euiToolTipRight { + 0% { + opacity: 0; + -webkit-transform: translateX(16px); + transform: translateX(16px); } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); } } + +.euiTour--minWidth-default { + min-width: 240px; } + +.euiTourHeader { + border-bottom: none; + margin-bottom: 8px !important; } + .euiTourHeader .euiTourHeader__title { + margin-top: 0; + text-transform: capitalize; } + +.euiTourHeader__subtitle { + color: #98A2B3; } + +.euiTourFooter { + background-color: #25262E; + margin-top: 24px !important; } + +.euiTour .euiTour__beacon { + pointer-events: none; + position: absolute; + opacity: 0; + transition: opacity 0s 350ms; } + +.euiTour .euiPopover__panelArrow.euiPopover__panelArrow--right .euiTour__beacon { + opacity: 1; + top: 6px; + left: -24px; } + +.euiTour .euiPopover__panelArrow.euiPopover__panelArrow--left .euiTour__beacon { + opacity: 1; + top: 6px; + left: 12px; } + +.euiTour .euiPopover__panelArrow.euiPopover__panelArrow--top:after { + border-top-color: #25262E; } + +.euiTour .euiPopover__panelArrow.euiPopover__panelArrow--top .euiTour__beacon { + opacity: 1; + top: 12px; + left: 6px; } + +.euiTour .euiPopover__panelArrow.euiPopover__panelArrow--bottom .euiTour__beacon { + opacity: 1; + top: -24px; + left: 6px; } + +.euiTourStepIndicator { + display: inline-block; } + +.euiText { + color: #DFE5EF; + font-weight: 400; + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + color: inherit; + clear: both; + line-height: 1.5rem; } + .euiText a:not([class]) { + color: #36A2EF; } + .euiText a:not([class]):hover, .euiText a:not([class]):focus { + color: #128ae0; + text-decoration: underline; } + .euiText a:not([class]):focus { + background-color: rgba(54, 162, 239, 0.3); + outline: 2px solid currentColor; } + .euiText a:not([class]):focus:focus-visible { + outline-style: auto; } + .euiText a:not([class]):focus:not(:focus-visible) { + outline: none; } + .euiText img { + display: block; + width: 100%; } + .euiText ul { + list-style: disc; } + .euiText ol { + list-style: decimal; } + .euiText blockquote { + position: relative; + text-align: center; + margin-left: auto; + margin-right: auto; + font-family: Georgia, Times, Times New Roman, serif; + font-style: italic; + letter-spacing: normal; } + .euiText blockquote p:last-child { + margin-bottom: 0; } + .euiText blockquote:before, .euiText blockquote:after { + position: absolute; + content: ''; + height: 2px; + width: 50%; + right: 0; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); + background: #98A2B3; } + .euiText blockquote:before { + top: 0; } + .euiText blockquote:after { + bottom: 0; } + .euiText h1 { + color: #DFE5EF; + font-size: 34px; + font-size: 2.42857rem; + line-height: 2.85714rem; + font-weight: 700; } + .euiText h2 { + color: #DFE5EF; + font-size: 27px; + font-size: 1.92857rem; + line-height: 2.28571rem; + font-weight: 700; } + .euiText h3 { + color: #DFE5EF; + font-size: 22px; + font-size: 1.57143rem; + line-height: 2.28571rem; + font-weight: 700; } + .euiText h4, + .euiText dt { + color: #DFE5EF; + font-size: 16px; + font-size: 1.14286rem; + line-height: 1.71429rem; + font-weight: 700; } + .euiText h5 { + color: #DFE5EF; + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + font-weight: 700; } + .euiText h6 { + color: #DFE5EF; + font-size: 12px; + font-size: 0.85714rem; + line-height: 1.14286rem; + font-weight: 700; + text-transform: uppercase; } + .euiText pre { + white-space: pre-wrap; + background: #25262E; + color: #DFE5EF; } + .euiText pre, + .euiText pre code { + display: block; } + .euiText code { + font-family: "Roboto Mono", Consolas, Menlo, Courier, monospace; + letter-spacing: normal; + display: inline-block; + font-weight: 400; } + .euiText p, + .euiText ul, + .euiText ol, + .euiText dl, + .euiText blockquote, + .euiText img, + .euiText pre { + margin-bottom: 1.5rem; } + .euiText ul, + .euiText ol { + margin-left: 1.5rem; } + .euiText blockquote { + padding: 1.5rem; + font-size: 1.125rem; } + .euiText h1, + .euiText h2, + .euiText h3, + .euiText h4, + .euiText h5, + .euiText h6 { + margin-bottom: 0.5rem; } + .euiText dd + dt { + margin-top: 1rem; } + .euiText * + h2, + .euiText * + h3, + .euiText * + h4, + .euiText * + h5, + .euiText * + h6 { + margin-top: 2rem; } + .euiText h1 { + font-size: 2.125rem; + line-height: 3rem; } + .euiText h2 { + font-size: 1.6875rem; + line-height: 2.5rem; } + .euiText h3 { + font-size: 1.375rem; + line-height: 2rem; } + .euiText h4, + .euiText dt, + .euiText .eui-definitionListReverse dd { + font-size: 1rem; + line-height: 1.5rem; } + .euiText .eui-definitionListReverse dt { + font-size: 0.75rem; + color: #DFE5EF; } + .euiText h5 { + font-size: 0.875rem; + line-height: 1rem; } + .euiText h6 { + font-size: 0.75rem; + line-height: 1rem; } + .euiText small { + font-size: 0.875rem; } + .euiText pre { + padding: 14px; } + .euiText code { + font-size: 0.9rem; } + .euiText.euiText--constrainedWidth { + max-width: 36em; + min-width: 75%; } + .euiText > :last-child, + .euiText .euiTextColor > :last-child { + margin-bottom: 0 !important; } + +.euiText--small { + font-size: 14px; + font-size: 1rem; + line-height: 1.5rem; } + .euiText--small p, + .euiText--small ul, + .euiText--small ol, + .euiText--small dl, + .euiText--small blockquote, + .euiText--small img, + .euiText--small pre { + margin-bottom: 1.5rem; } + .euiText--small ul, + .euiText--small ol { + margin-left: 1.5rem; } + .euiText--small blockquote { + padding: 1.5rem; + font-size: 1.125rem; } + .euiText--small h1, + .euiText--small h2, + .euiText--small h3, + .euiText--small h4, + .euiText--small h5, + .euiText--small h6 { + margin-bottom: 0.5rem; } + .euiText--small dd + dt { + margin-top: 1rem; } + .euiText--small * + h2, + .euiText--small * + h3, + .euiText--small * + h4, + .euiText--small * + h5, + .euiText--small * + h6 { + margin-top: 2rem; } + .euiText--small h1 { + font-size: 2.125rem; + line-height: 3rem; } + .euiText--small h2 { + font-size: 1.6875rem; + line-height: 2.5rem; } + .euiText--small h3 { + font-size: 1.375rem; + line-height: 2rem; } + .euiText--small h4, + .euiText--small dt, + .euiText--small .eui-definitionListReverse dd { + font-size: 1rem; + line-height: 1.5rem; } + .euiText--small .eui-definitionListReverse dt { + font-size: 0.75rem; + color: #DFE5EF; } + .euiText--small h5 { + font-size: 0.875rem; + line-height: 1rem; } + .euiText--small h6 { + font-size: 0.75rem; + line-height: 1rem; } + .euiText--small small { + font-size: 0.875rem; } + .euiText--small pre { + padding: 14px; } + .euiText--small code { + font-size: 0.9rem; } + +.euiText--extraSmall { + font-size: 12px; + font-size: 0.85714rem; + line-height: 1.28571rem; } + .euiText--extraSmall p, + .euiText--extraSmall ul, + .euiText--extraSmall ol, + .euiText--extraSmall dl, + .euiText--extraSmall blockquote, + .euiText--extraSmall img, + .euiText--extraSmall pre { + margin-bottom: 1.28571rem; } + .euiText--extraSmall ul, + .euiText--extraSmall ol { + margin-left: 1.28571rem; } + .euiText--extraSmall blockquote { + padding: 1.28571rem; + font-size: 0.96429rem; } + .euiText--extraSmall h1, + .euiText--extraSmall h2, + .euiText--extraSmall h3, + .euiText--extraSmall h4, + .euiText--extraSmall h5, + .euiText--extraSmall h6 { + margin-bottom: 0.42857rem; } + .euiText--extraSmall dd + dt { + margin-top: 0.85714rem; } + .euiText--extraSmall * + h2, + .euiText--extraSmall * + h3, + .euiText--extraSmall * + h4, + .euiText--extraSmall * + h5, + .euiText--extraSmall * + h6 { + margin-top: 1.71429rem; } + .euiText--extraSmall h1 { + font-size: 1.82143rem; + line-height: 2.57143rem; } + .euiText--extraSmall h2 { + font-size: 1.44643rem; + line-height: 2.14286rem; } + .euiText--extraSmall h3 { + font-size: 1.17857rem; + line-height: 1.71429rem; } + .euiText--extraSmall h4, + .euiText--extraSmall dt, + .euiText--extraSmall .eui-definitionListReverse dd { + font-size: 0.85714rem; + line-height: 1.28571rem; } + .euiText--extraSmall .eui-definitionListReverse dt { + font-size: 0.64286rem; + color: #DFE5EF; } + .euiText--extraSmall h5 { + font-size: 0.75rem; + line-height: 0.85714rem; } + .euiText--extraSmall h6 { + font-size: 0.64286rem; + line-height: 0.85714rem; } + .euiText--extraSmall small { + font-size: 0.75rem; } + .euiText--extraSmall pre { + padding: 12px; } + .euiText--extraSmall code { + font-size: 0.77143rem; } + +.euiTextColor--default { + color: #DFE5EF; } + +.euiTextColor--subdued { + color: #878b95; } + +.euiTextColor--secondary { + color: #7DDED8; } + +.euiTextColor--accent { + color: #F68FBE; } + +.euiTextColor--warning { + color: #F3D371; } + +.euiTextColor--danger { + color: #F86B63; } + +.euiTextColor--ghost { + color: #FFF; + color: #FFF !important; } + +.euiTextAlign--left { + text-align: left; } + +.euiTextAlign--right { + text-align: right; } + +.euiTextAlign--center { + text-align: center; } + +.euiAvatar--space:after, +.euiAvatar--user:after { + display: none; } + +.euiButton, +.euiButtonIcon { + box-shadow: none !important; } + +.euiButton.euiButton-isDisabled:not(.euiButton--ghost), .euiButton.euiButton-isDisabled:not(.euiButton--ghost):hover, +.euiButtonIcon.euiButtonIcon-isDisabled:not(.euiButtonIcon--ghost), +.euiButtonIcon.euiButtonIcon-isDisabled:not(.euiButtonIcon--ghost):hover { + background-color: rgba(81, 87, 97, 0.1); + color: #515761; } + +.euiButtonIcon--empty.euiButtonIcon-isDisabled:not(.euiButtonIcon--ghost), .euiButtonIcon--empty.euiButtonIcon-isDisabled:not(.euiButtonIcon--ghost):hover { + background-color: transparent; + color: #515761; } + +.euiButton--small, +.euiButtonIcon--small, +.euiButtonIcon--xSmall { + border-radius: 4px; } + +.euiButton--primary { + color: #36A2EF; + background-color: rgba(54, 162, 239, 0.2); } + .euiButton--primary:not([class*='isDisabled']):hover, .euiButton--primary:not([class*='isDisabled']):focus { + background-color: rgba(54, 162, 239, 0.2); } + .euiButton--primary.euiButton--fill:focus { + outline-color: #FFF; } + .euiButton--primary.euiButton--fill:not([class*='isDisabled']) { + color: #000; } + .euiButton--primary.euiButton--fill:not([class*='isDisabled']), .euiButton--primary.euiButton--fill:not([class*='isDisabled']):hover, .euiButton--primary.euiButton--fill:not([class*='isDisabled']):focus { + background-color: #36A2EF; } + +.euiButton--secondary { + color: #7DDED8; + background-color: rgba(125, 222, 216, 0.2); } + .euiButton--secondary:not([class*='isDisabled']):hover, .euiButton--secondary:not([class*='isDisabled']):focus { + background-color: rgba(125, 222, 216, 0.2); } + .euiButton--secondary.euiButton--fill:focus { + outline-color: #FFF; } + .euiButton--secondary.euiButton--fill:not([class*='isDisabled']) { + color: #000; } + .euiButton--secondary.euiButton--fill:not([class*='isDisabled']), .euiButton--secondary.euiButton--fill:not([class*='isDisabled']):hover, .euiButton--secondary.euiButton--fill:not([class*='isDisabled']):focus { + background-color: #7DDED8; } + +.euiButton--warning { + color: #F3D371; + background-color: rgba(243, 211, 113, 0.2); } + .euiButton--warning:not([class*='isDisabled']):hover, .euiButton--warning:not([class*='isDisabled']):focus { + background-color: rgba(243, 211, 113, 0.2); } + .euiButton--warning.euiButton--fill:focus { + outline-color: #FFF; } + .euiButton--warning.euiButton--fill:not([class*='isDisabled']) { + color: #000; } + .euiButton--warning.euiButton--fill:not([class*='isDisabled']), .euiButton--warning.euiButton--fill:not([class*='isDisabled']):hover, .euiButton--warning.euiButton--fill:not([class*='isDisabled']):focus { + background-color: #F3D371; } + +.euiButton--danger { + color: #F86B63; + background-color: rgba(248, 107, 99, 0.2); } + .euiButton--danger:not([class*='isDisabled']):hover, .euiButton--danger:not([class*='isDisabled']):focus { + background-color: rgba(248, 107, 99, 0.2); } + .euiButton--danger.euiButton--fill:focus { + outline-color: #FFF; } + .euiButton--danger.euiButton--fill:not([class*='isDisabled']) { + color: #000; } + .euiButton--danger.euiButton--fill:not([class*='isDisabled']), .euiButton--danger.euiButton--fill:not([class*='isDisabled']):hover, .euiButton--danger.euiButton--fill:not([class*='isDisabled']):focus { + background-color: #F86B63; } + +.euiButton--ghost { + color: #FFF; + background-color: rgba(255, 255, 255, 0.2); + color: #FFF; } + .euiButton--ghost:not([class*='isDisabled']):hover, .euiButton--ghost:not([class*='isDisabled']):focus { + background-color: rgba(255, 255, 255, 0.2); } + .euiButton--ghost.euiButton--fill:not([class*='isDisabled']) { + color: #000; } + .euiButton--ghost.euiButton--fill:not([class*='isDisabled']), .euiButton--ghost.euiButton--fill:not([class*='isDisabled']):hover, .euiButton--ghost.euiButton--fill:not([class*='isDisabled']):focus { + background-color: #FFF; } + +.euiButton--text { + color: #98A2B3; + background-color: rgba(152, 162, 179, 0.2); } + .euiButton--text:not([class*='isDisabled']):hover, .euiButton--text:not([class*='isDisabled']):focus { + background-color: rgba(152, 162, 179, 0.2); } + .euiButton--text.euiButton--fill:focus { + outline-color: #FFF; } + .euiButton--text.euiButton--fill:not([class*='isDisabled']) { + color: #000; } + .euiButton--text.euiButton--fill:not([class*='isDisabled']), .euiButton--text.euiButton--fill:not([class*='isDisabled']):hover, .euiButton--text.euiButton--fill:not([class*='isDisabled']):focus { + background-color: #98A2B3; } + +.euiButton.euiButton-isDisabled.euiButton--ghost, .euiButton.euiButton-isDisabled.euiButton--ghost:focus, +.euiButton.euiButton-isDisabled.euiButton--ghost.euiButton--fill, +.euiButton.euiButton-isDisabled.euiButton--ghost.euiButton--fill:focus { + color: #343741; + background-color: rgba(52, 55, 65, 0.1); } + +.euiButtonIcon--accent:not(.euiButtonIcon--empty) { + color: #F68FBE; + background-color: rgba(246, 143, 190, 0.2); } + .euiButtonIcon--accent:not(.euiButtonIcon--empty):not([class*='isDisabled']):hover, .euiButtonIcon--accent:not(.euiButtonIcon--empty):not([class*='isDisabled']):focus { + background-color: rgba(246, 143, 190, 0.2); } + .euiButtonIcon--accent:not(.euiButtonIcon--empty).euiButtonIcon--fill:focus { + outline-color: #FFF; } + .euiButtonIcon--accent:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']) { + color: #000; } + .euiButtonIcon--accent:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']), .euiButtonIcon--accent:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']):hover, .euiButtonIcon--accent:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']):focus { + background-color: #F68FBE; } + +.euiButtonIcon--danger:not(.euiButtonIcon--empty) { + color: #F86B63; + background-color: rgba(248, 107, 99, 0.2); } + .euiButtonIcon--danger:not(.euiButtonIcon--empty):not([class*='isDisabled']):hover, .euiButtonIcon--danger:not(.euiButtonIcon--empty):not([class*='isDisabled']):focus { + background-color: rgba(248, 107, 99, 0.2); } + .euiButtonIcon--danger:not(.euiButtonIcon--empty).euiButtonIcon--fill:focus { + outline-color: #FFF; } + .euiButtonIcon--danger:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']) { + color: #000; } + .euiButtonIcon--danger:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']), .euiButtonIcon--danger:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']):hover, .euiButtonIcon--danger:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']):focus { + background-color: #F86B63; } + +.euiButtonIcon--ghost:not(.euiButtonIcon--empty) { + color: #FFF; + background-color: rgba(255, 255, 255, 0.2); + color: #FFF; } + .euiButtonIcon--ghost:not(.euiButtonIcon--empty):not([class*='isDisabled']):hover, .euiButtonIcon--ghost:not(.euiButtonIcon--empty):not([class*='isDisabled']):focus { + background-color: rgba(255, 255, 255, 0.2); } + .euiButtonIcon--ghost:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']) { + color: #000; } + .euiButtonIcon--ghost:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']), .euiButtonIcon--ghost:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']):hover, .euiButtonIcon--ghost:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']):focus { + background-color: #FFF; } + +.euiButtonIcon--primary:not(.euiButtonIcon--empty) { + color: #36A2EF; + background-color: rgba(54, 162, 239, 0.2); } + .euiButtonIcon--primary:not(.euiButtonIcon--empty):not([class*='isDisabled']):hover, .euiButtonIcon--primary:not(.euiButtonIcon--empty):not([class*='isDisabled']):focus { + background-color: rgba(54, 162, 239, 0.2); } + .euiButtonIcon--primary:not(.euiButtonIcon--empty).euiButtonIcon--fill:focus { + outline-color: #FFF; } + .euiButtonIcon--primary:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']) { + color: #000; } + .euiButtonIcon--primary:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']), .euiButtonIcon--primary:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']):hover, .euiButtonIcon--primary:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']):focus { + background-color: #36A2EF; } + +.euiButtonIcon--subdued:not(.euiButtonIcon--empty) { + color: #8d919a; + background-color: rgba(122, 127, 137, 0.2); } + .euiButtonIcon--subdued:not(.euiButtonIcon--empty):not([class*='isDisabled']):hover, .euiButtonIcon--subdued:not(.euiButtonIcon--empty):not([class*='isDisabled']):focus { + background-color: rgba(122, 127, 137, 0.2); } + .euiButtonIcon--subdued:not(.euiButtonIcon--empty).euiButtonIcon--fill:focus { + outline-color: #FFF; } + .euiButtonIcon--subdued:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']) { + color: #000; } + .euiButtonIcon--subdued:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']), .euiButtonIcon--subdued:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']):hover, .euiButtonIcon--subdued:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']):focus { + background-color: #7a7f89; } + +.euiButtonIcon--success:not(.euiButtonIcon--empty) { + color: #7DDED8; + background-color: rgba(125, 222, 216, 0.2); } + .euiButtonIcon--success:not(.euiButtonIcon--empty):not([class*='isDisabled']):hover, .euiButtonIcon--success:not(.euiButtonIcon--empty):not([class*='isDisabled']):focus { + background-color: rgba(125, 222, 216, 0.2); } + .euiButtonIcon--success:not(.euiButtonIcon--empty).euiButtonIcon--fill:focus { + outline-color: #FFF; } + .euiButtonIcon--success:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']) { + color: #000; } + .euiButtonIcon--success:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']), .euiButtonIcon--success:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']):hover, .euiButtonIcon--success:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']):focus { + background-color: #7DDED8; } + +.euiButtonIcon--text:not(.euiButtonIcon--empty) { + color: #98A2B3; + background-color: rgba(152, 162, 179, 0.2); } + .euiButtonIcon--text:not(.euiButtonIcon--empty):not([class*='isDisabled']):hover, .euiButtonIcon--text:not(.euiButtonIcon--empty):not([class*='isDisabled']):focus { + background-color: rgba(152, 162, 179, 0.2); } + .euiButtonIcon--text:not(.euiButtonIcon--empty).euiButtonIcon--fill:focus { + outline-color: #FFF; } + .euiButtonIcon--text:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']) { + color: #000; } + .euiButtonIcon--text:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']), .euiButtonIcon--text:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']):hover, .euiButtonIcon--text:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']):focus { + background-color: #98A2B3; } + +.euiButtonIcon--warning:not(.euiButtonIcon--empty) { + color: #F3D371; + background-color: rgba(243, 211, 113, 0.2); } + .euiButtonIcon--warning:not(.euiButtonIcon--empty):not([class*='isDisabled']):hover, .euiButtonIcon--warning:not(.euiButtonIcon--empty):not([class*='isDisabled']):focus { + background-color: rgba(243, 211, 113, 0.2); } + .euiButtonIcon--warning:not(.euiButtonIcon--empty).euiButtonIcon--fill:focus { + outline-color: #FFF; } + .euiButtonIcon--warning:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']) { + color: #000; } + .euiButtonIcon--warning:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']), .euiButtonIcon--warning:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']):hover, .euiButtonIcon--warning:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']):focus { + background-color: #F3D371; } + +.euiButtonIcon:not(.euiButtonIcon--empty).euiButtonIcon-isDisabled.euiButtonIcon--ghost, .euiButtonIcon:not(.euiButtonIcon--empty).euiButtonIcon-isDisabled.euiButtonIcon--ghost:focus, +.euiButtonIcon.euiButtonIcon-isDisabled.euiButtonIcon--ghost.euiButtonIcon--fill, +.euiButtonIcon.euiButtonIcon-isDisabled.euiButtonIcon--ghost.euiButtonIcon--fill:focus { + color: #343741; + background-color: rgba(52, 55, 65, 0.1); } + +.euiButtonEmpty { + border-radius: 6px; } + .euiButtonEmpty.euiButtonEmpty--small, .euiButtonEmpty.euiButtonEmpty--xSmall { + border-radius: 4.002px; } + .euiButtonEmpty.euiButtonEmpty--xSmall { + font-size: 12px; } + +.euiButtonEmpty--primary:enabled:focus { + background-color: rgba(54, 162, 239, 0.3); } + +.euiButtonEmpty--secondary:enabled:focus { + background-color: rgba(125, 222, 216, 0.3); } + +.euiButtonEmpty--warning:enabled:focus { + background-color: rgba(243, 211, 113, 0.3); } + +.euiButtonEmpty--danger:enabled:focus { + background-color: rgba(248, 107, 99, 0.3); } + +.euiButtonEmpty--ghost:enabled:focus { + background-color: rgba(255, 255, 255, 0.3); } + +.euiButtonEmpty--text:enabled:focus { + background-color: rgba(152, 162, 179, 0.3); } + +.euiButtonGroup__buttons { + box-shadow: none !important; } + +.euiButtonGroup--medium .euiButtonGroupButton, +.euiButtonGroup--small .euiButtonGroupButton { + border: none !important; } + .euiButtonGroup--medium .euiButtonGroupButton:focus, + .euiButtonGroup--small .euiButtonGroupButton:focus { + outline: 2px solid currentColor; + outline-offset: -2px; } + .euiButtonGroup--medium .euiButtonGroupButton:focus:focus-visible, + .euiButtonGroup--small .euiButtonGroupButton:focus:focus-visible { + outline-style: auto; } + .euiButtonGroup--medium .euiButtonGroupButton:focus:not(:focus-visible), + .euiButtonGroup--small .euiButtonGroupButton:focus:not(:focus-visible) { + outline: none; } + .euiButtonGroup--medium .euiButtonGroupButton.euiButtonGroupButton-isSelected:focus, + .euiButtonGroup--small .euiButtonGroupButton.euiButtonGroupButton-isSelected:focus { + outline: 2px solid currentColor; + outline-offset: -3px; } + .euiButtonGroup--medium .euiButtonGroupButton.euiButtonGroupButton-isSelected:focus:focus-visible, + .euiButtonGroup--small .euiButtonGroupButton.euiButtonGroupButton-isSelected:focus:focus-visible { + outline-style: auto; } + .euiButtonGroup--medium .euiButtonGroupButton.euiButtonGroupButton-isSelected:focus:not(:focus-visible), + .euiButtonGroup--small .euiButtonGroupButton.euiButtonGroupButton-isSelected:focus:not(:focus-visible) { + outline: none; } + +.euiButtonGroup--medium .euiButtonGroupButton-isDisabled:not(.euiButtonGroupButton--ghost):not(.euiButtonGroupButton-isSelected), +.euiButtonGroup--small .euiButtonGroupButton-isDisabled:not(.euiButtonGroupButton--ghost):not(.euiButtonGroupButton-isSelected) { + background-color: rgba(81, 87, 97, 0.3); + color: #515761; } + +.euiButtonGroup--medium .euiButtonGroupButton--primary, +.euiButtonGroup--small .euiButtonGroupButton--primary { + color: #36A2EF; + background-color: rgba(54, 162, 239, 0.2); } + .euiButtonGroup--medium .euiButtonGroupButton--primary:not([class*='isDisabled']):hover, .euiButtonGroup--medium .euiButtonGroupButton--primary:not([class*='isDisabled']):focus, + .euiButtonGroup--small .euiButtonGroupButton--primary:not([class*='isDisabled']):hover, + .euiButtonGroup--small .euiButtonGroupButton--primary:not([class*='isDisabled']):focus { + background-color: rgba(54, 162, 239, 0.2); } + +.euiButtonGroup--medium .euiButtonGroupButton--secondary, +.euiButtonGroup--small .euiButtonGroupButton--secondary { + color: #7DDED8; + background-color: rgba(125, 222, 216, 0.2); } + .euiButtonGroup--medium .euiButtonGroupButton--secondary:not([class*='isDisabled']):hover, .euiButtonGroup--medium .euiButtonGroupButton--secondary:not([class*='isDisabled']):focus, + .euiButtonGroup--small .euiButtonGroupButton--secondary:not([class*='isDisabled']):hover, + .euiButtonGroup--small .euiButtonGroupButton--secondary:not([class*='isDisabled']):focus { + background-color: rgba(125, 222, 216, 0.2); } + +.euiButtonGroup--medium .euiButtonGroupButton--warning, +.euiButtonGroup--small .euiButtonGroupButton--warning { + color: #F3D371; + background-color: rgba(243, 211, 113, 0.2); } + .euiButtonGroup--medium .euiButtonGroupButton--warning:not([class*='isDisabled']):hover, .euiButtonGroup--medium .euiButtonGroupButton--warning:not([class*='isDisabled']):focus, + .euiButtonGroup--small .euiButtonGroupButton--warning:not([class*='isDisabled']):hover, + .euiButtonGroup--small .euiButtonGroupButton--warning:not([class*='isDisabled']):focus { + background-color: rgba(243, 211, 113, 0.2); } + +.euiButtonGroup--medium .euiButtonGroupButton--danger, +.euiButtonGroup--small .euiButtonGroupButton--danger { + color: #F86B63; + background-color: rgba(248, 107, 99, 0.2); } + .euiButtonGroup--medium .euiButtonGroupButton--danger:not([class*='isDisabled']):hover, .euiButtonGroup--medium .euiButtonGroupButton--danger:not([class*='isDisabled']):focus, + .euiButtonGroup--small .euiButtonGroupButton--danger:not([class*='isDisabled']):hover, + .euiButtonGroup--small .euiButtonGroupButton--danger:not([class*='isDisabled']):focus { + background-color: rgba(248, 107, 99, 0.2); } + +.euiButtonGroup--medium .euiButtonGroupButton--ghost, +.euiButtonGroup--small .euiButtonGroupButton--ghost { + color: #FFF; + background-color: rgba(255, 255, 255, 0.2); + color: #FFF; } + .euiButtonGroup--medium .euiButtonGroupButton--ghost:not([class*='isDisabled']):hover, .euiButtonGroup--medium .euiButtonGroupButton--ghost:not([class*='isDisabled']):focus, + .euiButtonGroup--small .euiButtonGroupButton--ghost:not([class*='isDisabled']):hover, + .euiButtonGroup--small .euiButtonGroupButton--ghost:not([class*='isDisabled']):focus { + background-color: rgba(255, 255, 255, 0.2); } + +.euiButtonGroup--medium .euiButtonGroupButton--text, +.euiButtonGroup--small .euiButtonGroupButton--text { + color: #98A2B3; + background-color: rgba(152, 162, 179, 0.2); } + .euiButtonGroup--medium .euiButtonGroupButton--text:not([class*='isDisabled']):hover, .euiButtonGroup--medium .euiButtonGroupButton--text:not([class*='isDisabled']):focus, + .euiButtonGroup--small .euiButtonGroupButton--text:not([class*='isDisabled']):hover, + .euiButtonGroup--small .euiButtonGroupButton--text:not([class*='isDisabled']):focus { + background-color: rgba(152, 162, 179, 0.2); } + +.euiButtonGroup--medium .euiButtonGroupButton-isDisabled.euiButtonGroupButton--ghost:not(.euiButtonGroupButton-isSelected), .euiButtonGroup--medium .euiButtonGroupButton-isDisabled.euiButtonGroupButton--ghost:not(.euiButtonGroupButton-isSelected):hover, .euiButtonGroup--medium .euiButtonGroupButton-isDisabled.euiButtonGroupButton--ghost:not(.euiButtonGroupButton-isSelected):focus, +.euiButtonGroup--small .euiButtonGroupButton-isDisabled.euiButtonGroupButton--ghost:not(.euiButtonGroupButton-isSelected), +.euiButtonGroup--small .euiButtonGroupButton-isDisabled.euiButtonGroupButton--ghost:not(.euiButtonGroupButton-isSelected):hover, +.euiButtonGroup--small .euiButtonGroupButton-isDisabled.euiButtonGroupButton--ghost:not(.euiButtonGroupButton-isSelected):focus { + background-color: rgba(52, 55, 65, 0.3); } + +.euiButtonGroup--small .euiButtonGroup__buttons { + border-radius: 4px; } + +.euiButtonGroup--compressed .euiButtonGroupButton { + border-radius: 5px; } + .euiButtonGroup--compressed .euiButtonGroupButton:not([class*='isDisabled']):focus-within { + outline: none; } + .euiButtonGroup--compressed .euiButtonGroupButton:not([class*='isDisabled']):focus { + outline: 2px solid currentColor; } + .euiButtonGroup--compressed .euiButtonGroupButton:not([class*='isDisabled']):focus:focus-visible { + outline-style: auto; } + .euiButtonGroup--compressed .euiButtonGroupButton:not([class*='isDisabled']):focus:not(:focus-visible) { + outline: none; } + .euiButtonGroup--compressed .euiButtonGroupButton--primary:not([class*='isDisabled']):hover, .euiButtonGroup--compressed .euiButtonGroupButton--primary:not([class*='isDisabled']):focus, .euiButtonGroup--compressed .euiButtonGroupButton--primary:not([class*='isDisabled']):focus-within { + background-color: rgba(54, 162, 239, 0.3); } + .euiButtonGroup--compressed .euiButtonGroupButton--primary:not([class*='isDisabled']):focus { + outline-color: #36A2EF; } + .euiButtonGroup--compressed .euiButtonGroupButton--secondary:not([class*='isDisabled']):hover, .euiButtonGroup--compressed .euiButtonGroupButton--secondary:not([class*='isDisabled']):focus, .euiButtonGroup--compressed .euiButtonGroupButton--secondary:not([class*='isDisabled']):focus-within { + background-color: rgba(125, 222, 216, 0.3); } + .euiButtonGroup--compressed .euiButtonGroupButton--secondary:not([class*='isDisabled']):focus { + outline-color: #7DDED8; } + .euiButtonGroup--compressed .euiButtonGroupButton--warning:not([class*='isDisabled']):hover, .euiButtonGroup--compressed .euiButtonGroupButton--warning:not([class*='isDisabled']):focus, .euiButtonGroup--compressed .euiButtonGroupButton--warning:not([class*='isDisabled']):focus-within { + background-color: rgba(243, 211, 113, 0.3); } + .euiButtonGroup--compressed .euiButtonGroupButton--warning:not([class*='isDisabled']):focus { + outline-color: #F3D371; } + .euiButtonGroup--compressed .euiButtonGroupButton--danger:not([class*='isDisabled']):hover, .euiButtonGroup--compressed .euiButtonGroupButton--danger:not([class*='isDisabled']):focus, .euiButtonGroup--compressed .euiButtonGroupButton--danger:not([class*='isDisabled']):focus-within { + background-color: rgba(248, 107, 99, 0.3); } + .euiButtonGroup--compressed .euiButtonGroupButton--danger:not([class*='isDisabled']):focus { + outline-color: #F86B63; } + .euiButtonGroup--compressed .euiButtonGroupButton--ghost:not([class*='isDisabled']):hover, .euiButtonGroup--compressed .euiButtonGroupButton--ghost:not([class*='isDisabled']):focus, .euiButtonGroup--compressed .euiButtonGroupButton--ghost:not([class*='isDisabled']):focus-within { + background-color: rgba(255, 255, 255, 0.3); } + .euiButtonGroup--compressed .euiButtonGroupButton--ghost:not([class*='isDisabled']):focus { + outline-color: #FFF; } + .euiButtonGroup--compressed .euiButtonGroupButton--text:not([class*='isDisabled']):hover, .euiButtonGroup--compressed .euiButtonGroupButton--text:not([class*='isDisabled']):focus, .euiButtonGroup--compressed .euiButtonGroupButton--text:not([class*='isDisabled']):focus-within { + background-color: rgba(152, 162, 179, 0.3); } + .euiButtonGroup--compressed .euiButtonGroupButton--text:not([class*='isDisabled']):focus { + outline-color: #98A2B3; } + +.euiCallOut { + border-left: none; } + .euiCallOut .euiCallOutHeader__title { + font-weight: 500; } + +.euiCodeBlock.euiCodeBlock--inline { + border-radius: 4px; + color: #a184c2; } + .euiCodeBlock.euiCodeBlock--inline .euiCodeBlock__code { + font-weight: 700; } + +.euiCommentEvent--regular { + box-shadow: none; } + +.euiDatePicker.euiDatePicker--shadow .react-datepicker-popper, +.euiDatePicker.euiDatePicker--shadow .react-datepicker-popper[data-placement^='top'] { + border: none; + border-radius: 6px; } + +.euiDatePickerRange { + border-radius: 6px; } + +.euiDatePicker.euiDatePicker--shadow.euiDatePicker--inline .react-datepicker { + border: none; } + +.euiFilterGroup { + border: none; + border-radius: 6px; + background-color: #16171c; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } + +.euiFilterButton { + border-radius: 0; + border: none; + background-color: transparent; + box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.1), -1px 0 0 0 rgba(255, 255, 255, 0.1); } + .euiFilterButton--withNext + .euiFilterButton { + box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.1); } + +.euiFormControlLayout--group { + border-radius: 6px; + background-color: #1f2127; } + .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 [class*='euiField'] { + border-radius: 6px 0 0 6px; } + .euiFormControlLayout--group .euiFormControlLayout__childrenWrapper:last-child .euiSelect, + .euiFormControlLayout--group .euiFormControlLayout__childrenWrapper:last-child [class*='euiField'] { + border-radius: 0 6px 6px 0; } + .euiFormControlLayout--group.euiFormControlLayout--compressed { + border-radius: 4px; + background-color: #1f2127; } + .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 currentColor; } + +.euiRadio .euiRadio__input:focus:focus-visible + .euiRadio__circle { + outline-style: auto; + outline-offset: 3px; } + +.euiRadio .euiRadio__input:focus:not(:focus-visible) + .euiRadio__circle { + outline: none; } + +.euiCheckbox .euiCheckbox__input:focus + .euiCheckbox__square { + outline: 2px solid currentColor; } + +.euiCheckbox .euiCheckbox__input:focus:focus-visible + .euiCheckbox__square { + outline-style: auto; + outline-offset: 3px; } + +.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; } + +.euiHeader { + height: 48px; + padding-left: 8px; + padding-right: 8px; } + +.euiHeaderSectionItem:after { + display: none !important; } + +.euiHeaderLogo { + padding-left: 8px; + padding-right: 8px; + min-width: 40px; } + @media only screen and (max-width: 574px) { + .euiHeaderLogo { + padding-left: 4px; } } + +.euiHeaderLogo__text { + color: #DFE5EF; + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + font-weight: 700; } + +.euiHeader--default + .euiHeader--default { + border-top: 1px solid #343741; } + +.euiHeaderBreadcrumbs { + font-size: 12px; + line-height: 16px; + margin-left: 8px; + margin-right: 8px; } + .euiHeaderBreadcrumbs .euiBreadcrumbSeparator { + display: none !important; } + .euiHeaderBreadcrumbs .euiBreadcrumb { + color: #DFE5EF; + background-color: rgba(223, 229, 239, 0.2); + line-height: 16px; + font-weight: 500; + padding: 4px 16px; + -webkit-clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%, 8px 50%); + clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%, 8px 50%); } + .euiHeaderBreadcrumbs .euiBreadcrumb:not([class*='isDisabled']):hover, .euiHeaderBreadcrumbs .euiBreadcrumb:not([class*='isDisabled']):focus { + background-color: rgba(223, 229, 239, 0.2); } + .euiHeaderBreadcrumbs .euiBreadcrumb:focus { + outline: 2px solid currentColor; + outline-offset: -2px; } + .euiHeaderBreadcrumbs .euiBreadcrumb:focus:focus-visible { + outline-style: auto; } + .euiHeaderBreadcrumbs .euiBreadcrumb:focus:not(:focus-visible) { + outline: none; } + .euiHeaderBreadcrumbs .euiBreadcrumb.euiBreadcrumb--collapsed, .euiHeaderBreadcrumbs .euiBreadcrumb.euiLink { + color: #36A2EF; + background-color: rgba(54, 162, 239, 0.2); } + .euiHeaderBreadcrumbs .euiBreadcrumb.euiBreadcrumb--collapsed:not([class*='isDisabled']):hover, .euiHeaderBreadcrumbs .euiBreadcrumb.euiBreadcrumb--collapsed:not([class*='isDisabled']):focus, .euiHeaderBreadcrumbs .euiBreadcrumb.euiLink:not([class*='isDisabled']):hover, .euiHeaderBreadcrumbs .euiBreadcrumb.euiLink:not([class*='isDisabled']):focus { + background-color: rgba(54, 162, 239, 0.2); } + .euiHeaderBreadcrumbs .euiBreadcrumb.euiBreadcrumb--collapsed:hover, .euiHeaderBreadcrumbs .euiBreadcrumb.euiBreadcrumb--collapsed:focus, .euiHeaderBreadcrumbs .euiBreadcrumb.euiLink:hover, .euiHeaderBreadcrumbs .euiBreadcrumb.euiLink:focus { + color: #36A2EF; } + .euiHeaderBreadcrumbs .euiBreadcrumb.euiBreadcrumb--collapsed .euiLink, .euiHeaderBreadcrumbs .euiBreadcrumb.euiBreadcrumb--collapsed .euiLink:hover, .euiHeaderBreadcrumbs .euiBreadcrumb.euiBreadcrumb--collapsed .euiLink:focus { + color: #36A2EF; } + .euiHeaderBreadcrumbs .euiBreadcrumb:not(.euiBreadcrumb--last) { + margin-right: -4px; } + .euiHeaderBreadcrumbs .euiBreadcrumb:first-child { + padding-left: 12px; + border-radius: 6px 0 0 6px; + -webkit-clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%); + clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%); } + .euiHeaderBreadcrumbs .euiBreadcrumb--last { + border-radius: 0 6px 6px 0; + padding-right: 12px; + -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 8px 50%); + clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 8px 50%); } + .euiHeaderBreadcrumbs .euiBreadcrumb:only-child { + -webkit-clip-path: none; + clip-path: none; + padding-left: 12px; + padding-right: 12px; + border-radius: 6px; } + +.euiListGroupItem--medium { + font-size: 16px; } + +.euiImage-isFullScreen .euiImage__caption { + color: #FFF; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } + +.euiImage-isFullScreenCloseIcon { + fill: #FFF; } + +.euiMark { + background: rgba(54, 162, 239, 0.3); } + +.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; } + +.euiModal { + border: none; } + +.euiOverlayMask { + background: rgba(0, 0, 0, 0.5); } + +.euiPopover__panel.euiPopover__panel-isAttached { + box-shadow: 0 0.9px 4px -1px rgba(0, 0, 0, 0.2), 0 2.6px 8px -1px rgba(0, 0, 0, 0.15), 0 5.7px 12px -1px rgba(0, 0, 0, 0.125), 0 15px 15px -1px rgba(0, 0, 0, 0.1); } + .euiPopover__panel.euiPopover__panel-isAttached.euiPanel--borderRadiusNone { + border-radius: 0; } + .euiPopover__panel.euiPopover__panel-isAttached.euiPanel--borderRadiusMedium { + border-radius: 4px; } + +.euiPopover__panel .euiPopover__panelArrow:before { + -webkit-filter: blur(3px); + filter: blur(3px); + opacity: .2; } + +.euiPopover__panel .euiPopover__panelArrow.euiPopover__panelArrow--top:before { + bottom: -12px; + border-top-color: #000; + -webkit-clip-path: polygon(-4px 0, 28px 0, 28px 16px, -4px 16px); + clip-path: polygon(-4px 0, 28px 0, 28px 16px, -4px 16px); } + +.euiPopover__panel .euiPopover__panelArrow.euiPopover__panelArrow--top:after { + bottom: -11px; } + +.euiPopover__panel .euiPopover__panelArrow.euiPopover__panelArrow--right:before { + border-right-color: #000; + -webkit-clip-path: polygon(-4px -4px, 12px -4px, 12px 28px, -4px 28px); + clip-path: polygon(-4px -4px, 12px -4px, 12px 28px, -4px 28px); } + +.euiPopover__panel .euiPopover__panelArrow.euiPopover__panelArrow--right:after { + left: -11px; } + +.euiPopover__panel .euiPopover__panelArrow.euiPopover__panelArrow--bottom:before { + border-bottom-color: #000; + -webkit-clip-path: polygon(-4px -4px, 28px -4px, 28px 12px, -4px 12px); + clip-path: polygon(-4px -4px, 28px -4px, 28px 12px, -4px 12px); } + +.euiPopover__panel .euiPopover__panelArrow.euiPopover__panelArrow--bottom:after { + top: -11px; } + +.euiPopover__panel .euiPopover__panelArrow.euiPopover__panelArrow--left:before { + right: -12px; + border-left-color: #000; + -webkit-clip-path: polygon(0 -4px, 16px -4px, 16px 28px, 0 28px); + clip-path: polygon(0 -4px, 16px -4px, 16px 28px, 0 28px); } + +.euiPopover__panel .euiPopover__panelArrow.euiPopover__panelArrow--left:after { + right: -11px; } + +.euiPopover__panel:not([class*='euiPanel--padding']) .euiPopoverTitle:not([class*='euiPopoverTitle--padding']) { + padding: 0; } + +.euiPopover__panel.euiPanel--paddingSmall .euiPopoverTitle:not([class*='euiPopoverTitle--padding']) { + padding: 8px; } + +.euiPopover__panel.euiPanel--paddingMedium .euiPopoverTitle:not([class*='euiPopoverTitle--padding']) { + padding: 16px; } + +.euiPopover__panel.euiPanel--paddingLarge .euiPopoverTitle:not([class*='euiPopoverTitle--padding']) { + padding: 24px; } + +/** + * Footer specific overrides + */ +.euiPopover__panel:not([class*='euiPanel--padding']) .euiPopoverFooter:not([class*='euiPopoverFooter--padding']) { + padding: 0; } + +.euiPopover__panel.euiPanel--paddingSmall .euiPopoverFooter:not([class*='euiPopoverFooter--padding']) { + padding: 8px; } + +.euiPopover__panel.euiPanel--paddingMedium .euiPopoverFooter:not([class*='euiPopoverFooter--padding']) { + padding: 16px; } + +.euiPopover__panel.euiPanel--paddingLarge .euiPopoverFooter:not([class*='euiPopoverFooter--padding']) { + padding: 24px; } + +.euiProgress--native { + border-radius: 8px; } + +.euiRangeTooltip__value { + border-radius: 4px; } + +.euiStepHorizontal-isDisabled .euiStepHorizontal__title, +.euiStep-isDisabled .euiStep__title { + color: #515761; } + +.euiStepNumber { + outline-color: #36A2EF; } + .euiStepNumber .euiStepNumber__icon { + position: relative; + top: -1px; } + .euiStepNumber--small .euiStepNumber__icon { + top: -1px; } + .euiStepNumber--complete .euiStepNumber__icon, .euiStepNumber--danger .euiStepNumber__icon { + stroke: currentColor; + stroke-width: .5px; } + .euiStepNumber--default { + background-color: #36A2EF; + color: #000; + outline-color: #000 !important; } + .euiStepNumber--complete { + background-color: #7DDED8; + color: #000; + outline-color: #000 !important; } + .euiStepNumber--warning { + background-color: #F3D371; + color: #000; + outline-color: #000 !important; } + .euiStepNumber--danger { + background-color: #F86B63; + color: #000; + outline-color: #000 !important; } + .euiStepNumber.euiStepNumber--incomplete { + background-color: transparent; + color: #DFE5EF; + border: 2px solid #343741; } + .euiStepNumber.euiStepNumber--incomplete .euiStepNumber__number { + display: unset; + position: relative; + top: -2px; } + +.euiStepNumber--disabled { + background-color: rgba(81, 87, 97, 0.1); + color: #515761; } + +.euiStepHorizontal__title { + font-weight: 700; } + +.euiStepHorizontal::before, .euiStepHorizontal::after { + height: 2px; + background-color: #36A2EF; + background-color: #343741; } + +.euiStep:not(:last-of-type) { + background-position: left 32px; } + +.euiStep--small:not(:last-of-type) { + background-position: -4px 24px; } + +.euiStep__content { + padding-bottom: 40px; + margin-bottom: 0; } + +.euiStepsHorizontal { + background: none; } + +.euiStepHorizontal:focus:not(.euiStepHorizontal-isDisabled) .euiStepHorizontal__number:not(:focus-visible) { + outline: 2px solid #36A2EF; } + +.euiTab { + font-weight: 500; + height: 48px; } + +.euiTabs--small .euiTab { + height: 40px; } + +.euiTabs--large .euiTab { + font-size: 16px; + font-size: 1.14286rem; + height: 48px; } + +.euiText--medium { + font-size: 16px; + font-size: 1.14286rem; + line-height: 1.71429rem; } + .euiText--medium p, + .euiText--medium ul, + .euiText--medium ol, + .euiText--medium dl, + .euiText--medium blockquote, + .euiText--medium img, + .euiText--medium pre { + margin-bottom: 1.71429rem; } + .euiText--medium ul, + .euiText--medium ol { + margin-left: 1.71429rem; } + .euiText--medium blockquote { + padding: 1.71429rem; + font-size: 1.28571rem; } + .euiText--medium h1, + .euiText--medium h2, + .euiText--medium h3, + .euiText--medium h4, + .euiText--medium h5, + .euiText--medium h6 { + margin-bottom: 0.57143rem; } + .euiText--medium dd + dt { + margin-top: 1.14286rem; } + .euiText--medium * + h2, + .euiText--medium * + h3, + .euiText--medium * + h4, + .euiText--medium * + h5, + .euiText--medium * + h6 { + margin-top: 2.28571rem; } + .euiText--medium h1 { + font-size: 2.42857rem; + line-height: 3.42857rem; } + .euiText--medium h2 { + font-size: 1.92857rem; + line-height: 2.85714rem; } + .euiText--medium h3 { + font-size: 1.57143rem; + line-height: 2.28571rem; } + .euiText--medium h4, + .euiText--medium dt, + .euiText--medium .eui-definitionListReverse dd { + font-size: 1.14286rem; + line-height: 1.71429rem; } + .euiText--medium .eui-definitionListReverse dt { + font-size: 0.85714rem; + color: #DFE5EF; } + .euiText--medium h5 { + font-size: 1rem; + line-height: 1.14286rem; } + .euiText--medium h6 { + font-size: 0.85714rem; + line-height: 1.14286rem; } + .euiText--medium small { + font-size: 1rem; } + .euiText--medium pre { + padding: 16px; } + .euiText--medium code { + font-size: 1.02857rem; } + +.euiToast { + border: none; + border-radius: 6px; } + +.euiToast--primary { + border-top: 2px solid #36A2EF; } + +.euiToast--success { + border-top: 2px solid #7DDED8; } + +.euiToast--warning { + border-top: 2px solid #F3D371; } + +.euiToast--danger { + border-top: 2px solid #F86B63; } + +.euiToastHeader__title { + font-weight: 700; } + +.euiToolTip { + padding: 8px; } diff --git a/mac-app-template/ZeroTier.app/Contents/Resources/light.css b/mac-app-template/ZeroTier.app/Contents/Resources/light.css new file mode 100644 index 0000000..06fbc74 --- /dev/null +++ b/mac-app-template/ZeroTier.app/Contents/Resources/light.css @@ -0,0 +1,16586 @@ +@charset "UTF-8"; +/** + * 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) + */ +@-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); } } + +.eui-alignBaseline { + vertical-align: baseline !important; } + +.eui-alignBottom { + vertical-align: bottom !important; } + +.eui-alignMiddle { + vertical-align: middle !important; } + +.eui-alignTop { + vertical-align: top !important; } + +.eui-displayBlock { + display: block !important; } + +.eui-displayInline { + display: inline !important; } + +.eui-displayInlineBlock { + display: inline-block !important; } + +.eui-fullWidth { + display: block !important; + width: 100% !important; } + +.eui-textCenter { + text-align: center !important; } + +.eui-textLeft { + text-align: left !important; } + +.eui-textRight { + text-align: right !important; } + +.eui-textNoWrap { + white-space: nowrap !important; } + +.eui-textInheritColor { + color: inherit !important; } + +.eui-textBreakWord { + overflow-wrap: break-word !important; + word-wrap: break-word !important; + word-break: break-word; } + +.eui-textBreakAll { + overflow-wrap: break-word !important; + word-break: break-all !important; } + +.eui-textBreakNormal { + overflow-wrap: normal !important; + word-wrap: normal !important; + word-break: normal !important; } + +.eui-textOverflowWrap { + overflow-wrap: break-word !important; } + @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { + .eui-textOverflowWrap { + word-break: break-all !important; } } + +.eui-textTruncate { + max-width: 100%; + overflow: hidden !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; + word-wrap: normal !important; } + +/** + * Responsive + * + * 1. Be sure to hide the element initially + */ +[class*='eui-showFor'] { + display: none !important; + /* 1 */ } + +@media only screen and (max-width: 574px) { + .eui-hideFor--xs { + display: none !important; } } + +@media only screen and (max-width: 574px) { + .eui-showFor--xs { + display: inline !important; } } + +@media only screen and (max-width: 574px) { + .eui-showFor--xs--block { + display: block !important; } } + +@media only screen and (max-width: 574px) { + .eui-showFor--xs--inlineBlock { + display: inline-block !important; } } + +@media only screen and (max-width: 574px) { + .eui-showFor--xs--flex { + display: -webkit-flex !important; + display: flex !important; } } + +@media only screen and (min-width: 575px) and (max-width: 767px) { + .eui-hideFor--s { + display: none !important; } } + +@media only screen and (min-width: 575px) and (max-width: 767px) { + .eui-showFor--s { + display: inline !important; } } + +@media only screen and (min-width: 575px) and (max-width: 767px) { + .eui-showFor--s--block { + display: block !important; } } + +@media only screen and (min-width: 575px) and (max-width: 767px) { + .eui-showFor--s--inlineBlock { + display: inline-block !important; } } + +@media only screen and (min-width: 575px) and (max-width: 767px) { + .eui-showFor--s--flex { + display: -webkit-flex !important; + display: flex !important; } } + +@media only screen and (min-width: 768px) and (max-width: 991px) { + .eui-hideFor--m { + display: none !important; } } + +@media only screen and (min-width: 768px) and (max-width: 991px) { + .eui-showFor--m { + display: inline !important; } } + +@media only screen and (min-width: 768px) and (max-width: 991px) { + .eui-showFor--m--block { + display: block !important; } } + +@media only screen and (min-width: 768px) and (max-width: 991px) { + .eui-showFor--m--inlineBlock { + display: inline-block !important; } } + +@media only screen and (min-width: 768px) and (max-width: 991px) { + .eui-showFor--m--flex { + display: -webkit-flex !important; + display: flex !important; } } + +@media only screen and (min-width: 992px) and (max-width: 1199px) { + .eui-hideFor--l { + display: none !important; } } + +@media only screen and (min-width: 992px) and (max-width: 1199px) { + .eui-showFor--l { + display: inline !important; } } + +@media only screen and (min-width: 992px) and (max-width: 1199px) { + .eui-showFor--l--block { + display: block !important; } } + +@media only screen and (min-width: 992px) and (max-width: 1199px) { + .eui-showFor--l--inlineBlock { + display: inline-block !important; } } + +@media only screen and (min-width: 992px) and (max-width: 1199px) { + .eui-showFor--l--flex { + display: -webkit-flex !important; + display: flex !important; } } + +@media only screen and (min-width: 1200px) { + .eui-hideFor--xl { + display: none !important; } } + +@media only screen and (min-width: 1200px) { + .eui-showFor--xl { + display: inline !important; } } + +@media only screen and (min-width: 1200px) { + .eui-showFor--xl--block { + display: block !important; } } + +@media only screen and (min-width: 1200px) { + .eui-showFor--xl--inlineBlock { + display: inline-block !important; } } + +@media only screen and (min-width: 1200px) { + .eui-showFor--xl--flex { + display: -webkit-flex !important; + display: flex !important; } } + +/** + * IE doesn't properly wrap groups if it is within a flex-item of a flex-group. + * Adding the following styles to the flex-item that contains the wrapping group, will fix IE. + * https://github.com/philipwalton/flexbugs/issues/104 + */ +@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { + .euiIEFlexWrapFix { + -webkit-flex-grow: 1; + flex-grow: 1; + -webkit-flex-shrink: 1; + flex-shrink: 1; + -webkit-flex-basis: 0%; + flex-basis: 0%; } } + +/** + * Overflow scrolling + */ +.eui-yScroll { + scrollbar-width: thin; + height: 100%; + overflow-y: auto; + overflow-x: hidden; } + .eui-yScroll::-webkit-scrollbar { + width: 16px; + height: 16px; } + .eui-yScroll::-webkit-scrollbar-thumb { + background-color: rgba(105, 112, 125, 0.5); + border: 6px solid transparent; + background-clip: content-box; } + .eui-yScroll::-webkit-scrollbar-corner, .eui-yScroll::-webkit-scrollbar-track { + background-color: transparent; } + .eui-yScroll:focus { + outline: none; + /* 1 */ } + .eui-yScroll[tabindex='0']:focus:focus-visible { + outline-style: auto; + /* 2 */ } + +.eui-xScroll { + scrollbar-width: thin; + overflow-x: auto; } + .eui-xScroll::-webkit-scrollbar { + width: 16px; + height: 16px; } + .eui-xScroll::-webkit-scrollbar-thumb { + background-color: rgba(105, 112, 125, 0.5); + border: 6px solid transparent; + background-clip: content-box; } + .eui-xScroll::-webkit-scrollbar-corner, .eui-xScroll::-webkit-scrollbar-track { + background-color: transparent; } + .eui-xScroll:focus { + outline: none; + /* 1 */ } + .eui-xScroll[tabindex='0']:focus:focus-visible { + outline-style: auto; + /* 2 */ } + +/** + * Overflow scrolling with shadows + */ +.eui-yScrollWithShadows { + 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%); } + .eui-yScrollWithShadows::-webkit-scrollbar { + width: 16px; + height: 16px; } + .eui-yScrollWithShadows::-webkit-scrollbar-thumb { + background-color: rgba(105, 112, 125, 0.5); + border: 6px solid transparent; + background-clip: content-box; } + .eui-yScrollWithShadows::-webkit-scrollbar-corner, .eui-yScrollWithShadows::-webkit-scrollbar-track { + background-color: transparent; } + .eui-yScrollWithShadows:focus { + outline: none; + /* 1 */ } + .eui-yScrollWithShadows[tabindex='0']:focus:focus-visible { + outline-style: auto; + /* 2 */ } + +.eui-xScrollWithShadows { + scrollbar-width: thin; + overflow-x: auto; + -webkit-mask-image: linear-gradient(to right, 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 right, rgba(255, 0, 0, 0.1) 0%, red 7.5px, red calc(100% - 7.5px), rgba(255, 0, 0, 0.1) 100%); } + .eui-xScrollWithShadows::-webkit-scrollbar { + width: 16px; + height: 16px; } + .eui-xScrollWithShadows::-webkit-scrollbar-thumb { + background-color: rgba(105, 112, 125, 0.5); + border: 6px solid transparent; + background-clip: content-box; } + .eui-xScrollWithShadows::-webkit-scrollbar-corner, .eui-xScrollWithShadows::-webkit-scrollbar-track { + background-color: transparent; } + .eui-xScrollWithShadows:focus { + outline: none; + /* 1 */ } + .eui-xScrollWithShadows[tabindex='0']:focus:focus-visible { + outline-style: auto; + /* 2 */ } + +.euiYScrollWithShadows { + 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%); } + .euiYScrollWithShadows::-webkit-scrollbar { + width: 16px; + height: 16px; } + .euiYScrollWithShadows::-webkit-scrollbar-thumb { + background-color: rgba(105, 112, 125, 0.5); + border: 6px solid transparent; + background-clip: content-box; } + .euiYScrollWithShadows::-webkit-scrollbar-corner, .euiYScrollWithShadows::-webkit-scrollbar-track { + background-color: transparent; } + .euiYScrollWithShadows:focus { + outline: none; + /* 1 */ } + .euiYScrollWithShadows[tabindex='0']:focus:focus-visible { + outline-style: auto; + /* 2 */ } + +/** + * Forcing focus ring on non-EUI elements + */ +.eui-isFocusable:focus { + outline: 2px solid currentColor; } + .eui-isFocusable:focus:focus-visible { + outline-style: auto; } + .eui-isFocusable:focus:not(:focus-visible) { + outline: none; } + +/** + * For quickly applying a full-height element whether using flex or not + */ +.eui-fullHeight { + height: 100%; + -webkit-flex: 1 1 auto; + flex: 1 1 auto; + overflow: hidden; } + +/** + * Adapted from Eric Meyer's reset (http://meyerweb.com/eric/tools/css/reset/, v2.0 | 20110126). + * + */ +*, *:before, *:after { + box-sizing: border-box; } + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: none; + vertical-align: baseline; } + +code, pre, kbd, samp { + font-family: "Roboto Mono", Consolas, Menlo, Courier, monospace; } + +h1, h2, h3, h4, h5, h6, p { + font-family: inherit; + font-weight: inherit; + font-size: inherit; } + +input, textarea, select, button { + font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } + +em { + font-style: italic; } + +strong { + font-weight: 700; } + +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; } + +html { + font-family: "Inter", -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; + height: 100%; + background-color: #fafbfd; } + +body { + line-height: 1.14286; } + +*:focus { + outline: 2px solid currentColor; + outline-offset: -1px; } + *:focus:focus-visible { + outline-style: auto; } + *:focus:not(:focus-visible) { + outline: none; } + +::-moz-selection { + background: rgba(0, 119, 204, 0.1); } + +::selection { + background: rgba(0, 119, 204, 0.1); } + +a { + text-decoration: none; + color: #07C; } + a:hover, a:focus { + text-decoration: none; } + +a:hover, button, [role='button'] { + cursor: pointer; } + +input { + margin: 0; + padding: 0; } + input:disabled { + opacity: 1; + /* required on iOS */ } + +button { + background: none; + border: none; + padding: 0; + margin: 0; + font-size: inherit; + color: inherit; + border-radius: 0; } + button:hover { + cursor: pointer; } + +ol, ul { + list-style: none; } + +blockquote, q { + quotes: none; } + +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; } + +table { + border-collapse: collapse; + border-spacing: 0; } + +hr { + margin: 0; } + +fieldset { + min-inline-size: auto; } + +svg text { + letter-spacing: normal !important; } + +html { + scrollbar-width: thin; + scrollbar-color: rgba(105, 112, 125, 0.5) transparent; } + +.euiScreenReaderOnly, +.euiScreenReaderOnly--showOnFocus:not(:focus):not(:active) { + position: absolute; + left: -10000px; + top: auto; + width: 1px; + height: 1px; + overflow: hidden; } + +.euiSkipLink { + transition: none !important; } + .euiSkipLink:focus { + -webkit-animation: none !important; + animation: none !important; } + .euiSkipLink.euiSkipLink--absolute:focus { + position: absolute; } + .euiSkipLink.euiSkipLink--fixed:focus { + position: fixed; + top: 4px; + left: 4px; + z-index: 1001; } + +.euiAccordion__triggerWrapper { + display: -webkit-flex; + display: flex; + -webkit-align-items: center; + align-items: center; } + +.euiAccordion__button { + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + text-align: left; + width: 100%; + -webkit-flex-grow: 1; + flex-grow: 1; + display: -webkit-flex; + display: flex; + -webkit-align-items: center; + align-items: center; } + .euiAccordion__button:hover, .euiAccordion__button:focus { + text-decoration: underline; + cursor: pointer; } + .euiAccordion__button:focus .euiAccordion__iconWrapper { + outline: 2px solid currentColor; + color: #07C; } + .euiAccordion__button:focus .euiAccordion__iconWrapper:focus-visible { + outline-style: auto; } + .euiAccordion__button:focus .euiAccordion__iconWrapper:not(:focus-visible) { + outline: none; } + +.euiAccordion__buttonReverse { + -webkit-flex-direction: row-reverse; + flex-direction: row-reverse; + -webkit-justify-content: space-between; + justify-content: space-between; } + .euiAccordion__buttonReverse .euiAccordion__iconWrapper { + margin-left: 8px; + margin-right: 4px; } + +.euiAccordion__iconWrapper { + width: 16px; + height: 16px; + margin-left: 4px; + margin-right: 8px; + border-radius: 6px; + -webkit-flex-shrink: 0; + flex-shrink: 0; } + .euiAccordion__iconWrapper .euiAccordion__icon { + vertical-align: top; + transition: -webkit-transform 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); + transition: transform 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); + transition: transform 250ms cubic-bezier(0.694, 0.0482, 0.335, 1), -webkit-transform 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } + .euiAccordion__iconWrapper .euiAccordion__icon-isOpen { + -webkit-transform: rotate(90deg); + transform: rotate(90deg); } + +.euiAccordion__iconButton { + margin-left: 8px; + margin-right: 4px; } + .euiAccordion__iconButton:focus { + outline: 2px solid currentColor; + color: #07C; } + .euiAccordion__iconButton:focus:focus-visible { + outline-style: auto; } + .euiAccordion__iconButton:focus:not(:focus-visible) { + outline: none; } + +.euiAccordion__optionalAction { + -webkit-flex-shrink: 0; + flex-shrink: 0; } + +.euiAccordion__childWrapper { + visibility: hidden; + height: 0; + opacity: 0; + overflow: hidden; + -webkit-transform: translatez(0); + transform: translatez(0); + transition: height 250ms cubic-bezier(0.694, 0.0482, 0.335, 1), opacity 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } + +.euiAccordion__padding--xs { + padding: 4px; } + +.euiAccordion__padding--s { + padding: 8px; } + +.euiAccordion__padding--m { + padding: 16px; } + +.euiAccordion__padding--l { + padding: 24px; } + +.euiAccordion__padding--xl { + padding: 32px; } + +.euiAccordion.euiAccordion-isOpen .euiAccordion__childWrapper { + visibility: visible; + opacity: 1; + height: auto; } + +.euiAccordion__children-isLoading { + line-height: 1.5; + display: -webkit-flex; + display: flex; + -webkit-align-items: center; + align-items: center; } + .euiAccordion__children-isLoading .euiAccordion__spinner { + margin-right: 4px; } + +.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; } + +.euiAspectRatio { + position: relative; } + .euiAspectRatio > * { + position: absolute !important; + top: 0 !important; + left: 0 !important; + width: 100% !important; + height: 100% !important; } + +.euiAvatar { + -webkit-flex-shrink: 0; + flex-shrink: 0; + display: -webkit-inline-flex; + display: inline-flex; + -webkit-justify-content: center; + justify-content: center; + -webkit-align-items: center; + align-items: center; + background-size: cover; + text-align: center; + vertical-align: middle; + overflow-x: hidden; + font-weight: 500; } + +.euiAvatar--user { + position: relative; + border-radius: 50%; } + .euiAvatar--user:after { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + border-radius: 50%; + content: ''; + pointer-events: none; + border: 1px solid rgba(52, 55, 65, 0.05); } + +.euiAvatar--space { + position: relative; + border-radius: 6px; } + .euiAvatar--space:after { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + border-radius: 6px; + content: ''; + pointer-events: none; + border: 1px solid rgba(52, 55, 65, 0.05); } + +.euiAvatar-isDisabled { + cursor: not-allowed; + -webkit-filter: grayscale(100%); + filter: grayscale(100%); } + +.euiAvatar--plain { + background-color: #FFF; } + +.euiAvatar--s { + width: 24px; + height: 24px; + line-height: 24px; + font-size: 12px; } + +.euiAvatar--m { + width: 32px; + height: 32px; + line-height: 32px; + font-size: 14.4px; } + +.euiAvatar--l { + width: 40px; + height: 40px; + line-height: 40px; + font-size: 19.2px; } + +.euiAvatar--xl { + width: 64px; + height: 64px; + line-height: 64px; + font-size: 25.6px; } + +/** + * 1. Accounts for the border + */ +.euiBadge { + font-size: 12px; + font-weight: 500; + line-height: 18px; + /* 1 */ + padding: 0 8px; + display: inline-block; + text-decoration: none; + border-radius: 3px; + border: solid 1px transparent; + background-color: transparent; + white-space: nowrap; + vertical-align: middle; + cursor: default; + max-width: 100%; + text-align: left; } + .euiBadge.euiBadge-isDisabled { + color: #717782 !important; + background-color: #ABB4C4 !important; } + .euiBadge:focus-within { + outline: 2px solid currentColor; } + .euiBadge:focus-within:focus-visible { + outline-style: auto; } + .euiBadge:focus-within:not(:focus-visible) { + outline: none; } + .euiBadge + .euiBadge { + margin-left: 4px; } + .euiBadge .euiBadge__content { + min-height: 18px; + display: -webkit-flex; + display: flex; + -webkit-align-items: center; + align-items: center; + overflow: hidden; } + .euiBadge .euiBadge__childButton { + max-width: 100%; + overflow: hidden !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; + word-wrap: normal !important; + -webkit-flex: 1 1 auto; + flex: 1 1 auto; + text-align: inherit; + font-weight: inherit; + line-height: inherit; + color: inherit; } + .euiBadge .euiBadge__childButton:disabled { + cursor: not-allowed; } + .euiBadge .euiBadge__childButton:not(:disabled):hover, .euiBadge .euiBadge__childButton:not(:disabled):focus { + text-decoration: underline; } + .euiBadge .euiBadge__iconButton { + -webkit-flex: 0 0 auto; + flex: 0 0 auto; + font-size: 0; + margin-left: 4px; } + .euiBadge .euiBadge__iconButton:focus { + background-color: rgba(255, 255, 255, 0.8); + color: #000; + border-radius: 2px; } + .euiBadge .euiBadge__iconButton:disabled { + cursor: not-allowed; } + .euiBadge .euiBadge__iconButton .euiBadge__icon { + margin: 0 !important; } + .euiBadge .euiBadge__text { + max-width: 100%; + overflow: hidden !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; + word-wrap: normal !important; + -webkit-flex: 1 1 auto; + flex: 1 1 auto; + cursor: default; } + .euiBadge .euiBadge__icon { + -webkit-flex: 0 0 auto; + flex: 0 0 auto; } + .euiBadge .euiBadge__icon:not(:only-child) { + margin-left: 4px; } + .euiBadge.euiBadge--iconLeft .euiBadge__content { + -webkit-flex-direction: row-reverse; + flex-direction: row-reverse; } + .euiBadge.euiBadge--iconLeft .euiBadge__iconButton, + .euiBadge.euiBadge--iconLeft .euiBadge__icon:not(:only-child) { + margin-right: 4px; + margin-left: 0; } + +.euiBadge-isClickable:not(:disabled):hover, .euiBadge-isClickable:not(:disabled):focus { + text-decoration: underline; } + +.euiBadge-isClickable.euiBadge-isDisabled { + cursor: not-allowed; } + +.euiBadge-isClickable:focus { + outline: 2px solid currentColor; } + .euiBadge-isClickable:focus:focus-visible { + outline-style: auto; } + .euiBadge-isClickable:focus:not(:focus-visible) { + outline: none; } + +.euiBadge-isClickable .euiBadge__text { + cursor: inherit; } + +.euiBadge--hollow { + background-color: #FFF; + border-color: #D3DAE6; + color: #343741; } + +.euiBadgeGroup__item { + display: inline-block; + max-width: 100%; } + +.euiBadgeGroup--gutterExtraSmall { + margin: -2px; } + .euiBadgeGroup--gutterExtraSmall > .euiBadgeGroup__item { + margin: 2px; + max-width: calc(100% - 4px); } + +.euiBadgeGroup--gutterSmall { + margin: -4px; } + .euiBadgeGroup--gutterSmall > .euiBadgeGroup__item { + margin: 4px; + max-width: calc(100% - 8px); } + +.euiBetaBadge { + display: inline-block; + padding: 0 16px; + border-radius: 24px; + box-shadow: inset 0 0 0 1px #D3DAE6; + vertical-align: super; + font-size: 12px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: .05em; + line-height: 24px; + text-align: center; + white-space: nowrap; + cursor: default; } + .euiBetaBadge:focus { + outline: 2px solid currentColor; } + .euiBetaBadge:focus:focus-visible { + outline-style: auto; } + .euiBetaBadge:focus:not(:focus-visible) { + outline: none; } + +.euiBetaBadge--iconOnly { + padding: 0; + width: 24px; } + .euiBetaBadge--iconOnly .euiBetaBadge__icon { + position: relative; + margin-top: -1px; } + +.euiNotificationBadge { + -webkit-flex-shrink: 0; + flex-shrink: 0; + display: inline-block; + border-radius: 6px; + font-size: 12px; + font-weight: 500; + line-height: 16px; + height: 16px; + min-width: 16px; + padding-left: 4px; + padding-right: 4px; + vertical-align: middle; + text-align: center; + transition: all 150ms ease-in; + cursor: default; + background: #F04E98; + color: #000; } + +.euiNotificationBadge--medium { + line-height: 20px; + height: 20px; + min-width: 24px; } + +.euiNotificationBadge--subdued { + background: #e0e5ee; + color: #000; } + +.euiBasicTable-loading { + position: relative; } + .euiBasicTable-loading tbody { + overflow: hidden; } + .euiBasicTable-loading tbody:before { + position: absolute; + content: ''; + width: 100%; + height: 2px; + background-color: #07C; + -webkit-animation: euiBasicTableLoading 1000ms linear; + animation: euiBasicTableLoading 1000ms linear; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; } + +@-webkit-keyframes euiBasicTableLoading { + from { + left: 0; + width: 0; } + 20% { + left: 0; + width: 40%; } + 80% { + left: 60%; + width: 40%; } + 100% { + left: 100%; + width: 0; } } + +@keyframes euiBasicTableLoading { + from { + left: 0; + width: 0; } + 20% { + left: 0; + width: 40%; } + 80% { + left: 60%; + width: 40%; } + 100% { + left: 100%; + width: 0; } } + +.euiBeacon { + position: relative; + background-color: #54B399; + border-radius: 50%; } + .euiBeacon:before, .euiBeacon:after { + position: absolute; + content: ''; + height: 100%; + width: 100%; + left: 0; + top: 0; + background-color: transparent; + border-radius: 50%; + box-shadow: 0 0 1px 1px #54B399; } + .euiBeacon:before { + -webkit-animation: euiBeaconPulseLarge 2.5s infinite ease-out; + animation: euiBeaconPulseLarge 2.5s infinite ease-out; } + .euiBeacon:after { + -webkit-animation: euiBeaconPulseSmall 2.5s infinite ease-out .25s; + animation: euiBeaconPulseSmall 2.5s infinite ease-out .25s; } + +@-webkit-keyframes euiBeaconPulseLarge { + 0% { + -webkit-transform: scale(0.1); + transform: scale(0.1); + opacity: 1; } + 70% { + -webkit-transform: scale(3); + transform: scale(3); + opacity: 0; } + 100% { + opacity: 0; } } + +@keyframes euiBeaconPulseLarge { + 0% { + -webkit-transform: scale(0.1); + transform: scale(0.1); + opacity: 1; } + 70% { + -webkit-transform: scale(3); + transform: scale(3); + opacity: 0; } + 100% { + opacity: 0; } } + +@-webkit-keyframes euiBeaconPulseSmall { + 0% { + -webkit-transform: scale(0.1); + transform: scale(0.1); + opacity: 1; } + 70% { + -webkit-transform: scale(2); + transform: scale(2); + opacity: 0; } + 100% { + opacity: 0; } } + +@keyframes euiBeaconPulseSmall { + 0% { + -webkit-transform: scale(0.1); + transform: scale(0.1); + opacity: 1; } + 70% { + -webkit-transform: scale(2); + transform: scale(2); + opacity: 0; } + 100% { + opacity: 0; } } + +.euiBottomBar { + box-shadow: 0 0 0.8px rgba(0, 0, 0, 0.06), 0 0 2px rgba(0, 0, 0, 0.04), 0 0 5px rgba(0, 0, 0, 0.04), 0 0 17px rgba(0, 0, 0, 0.03); + background: #25282f; + color: #FFF; } + @media screen and (prefers-reduced-motion: no-preference) { + .euiBottomBar { + -webkit-animation: euiBottomBarAppear 350ms cubic-bezier(0.694, 0.0482, 0.335, 1); + animation: euiBottomBarAppear 350ms cubic-bezier(0.694, 0.0482, 0.335, 1); } } + +.euiBottomBar--fixed { + position: fixed; + z-index: 998; } + +.euiBottomBar--sticky { + position: -webkit-sticky; + position: sticky; + z-index: 998; } + +.euiBottomBar--paddingSmall { + padding: 8px; } + +.euiBottomBar--paddingMedium { + padding: 16px; } + +.euiBottomBar--paddingLarge { + padding: 24px; } + +@-webkit-keyframes euiBottomBarAppear { + 0% { + -webkit-transform: translateY(100%); + transform: translateY(100%); + opacity: 0; } + 100% { + -webkit-transform: translateY(0%); + transform: translateY(0%); + opacity: 1; } } + +@keyframes euiBottomBarAppear { + 0% { + -webkit-transform: translateY(100%); + transform: translateY(100%); + opacity: 0; } + 100% { + -webkit-transform: translateY(0%); + transform: translateY(0%); + opacity: 1; } } + +.euiButton { + 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", -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.71429rem; + font-weight: 500; + text-decoration: none; + transition: background-color 250ms ease-in-out, border-color 250ms ease-in-out; + outline-offset: -1px; + box-shadow: 0 0.8px 0.8px rgba(0, 0, 0, 0.04), 0 2.3px 2px rgba(0, 0, 0, 0.03); + border-radius: 6px; + min-width: 112px; } + @media screen and (prefers-reduced-motion: no-preference) { + .euiButton { + transition: background 250ms ease-in-out, -webkit-transform 250ms ease-in-out; + transition: transform 250ms ease-in-out, background 250ms ease-in-out; + transition: transform 250ms ease-in-out, background 250ms ease-in-out, -webkit-transform 250ms ease-in-out; } + .euiButton:hover:not([class*='isDisabled']) { + -webkit-transform: translateY(-1px); + transform: translateY(-1px); } + .euiButton: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); } + .euiButton:active:not([class*='isDisabled']) { + -webkit-transform: translateY(1px); + transform: translateY(1px); } } + .euiButton:hover:not([class*='isDisabled']), .euiButton:focus { + text-decoration: underline; } + .euiButton .euiButton__content { + padding: 0 12px; } + .euiButton .euiButton__text { + text-overflow: ellipsis; + overflow: hidden; } + .euiButton.euiButton--small { + height: 32px; + line-height: 32px; } + .euiButton:hover, .euiButton:active { + 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); } + .euiButton:not([class*='isDisabled']):hover, .euiButton:not([class*='isDisabled']):focus, .euiButton:not([class*='isDisabled']):focus-within { + background-color: rgba(0, 119, 204, 0.1); } + .euiButton.euiButton-isDisabled { + pointer-events: auto; + cursor: not-allowed; + color: #ABB4C4; + border-color: #ABB4C4; } + .euiButton.euiButton-isDisabled .euiButtonContent__icon { + fill: currentColor; } + .euiButton.euiButton-isDisabled .euiButtonContent__spinner { + border-color: #07C currentColor currentColor currentColor; } + .euiButton.euiButton-isDisabled.euiButton--fill { + color: #717782; + background-color: #ABB4C4; + border-color: #ABB4C4; } + .euiButton.euiButton-isDisabled.euiButton--fill:hover, .euiButton.euiButton-isDisabled.euiButton--fill:focus, .euiButton.euiButton-isDisabled.euiButton--fill:focus-within { + background-color: #ABB4C4; + border-color: #ABB4C4; } + .euiButton.euiButton-isDisabled:hover, .euiButton.euiButton-isDisabled:focus, .euiButton.euiButton-isDisabled:focus-within { + box-shadow: 0 0.8px 0.8px rgba(0, 0, 0, 0.04), 0 2.3px 2px rgba(0, 0, 0, 0.03); + text-decoration: none; } + +.euiButton--primary { + color: #0071c2; + border-color: #07C; } + .euiButton--primary.euiButton--fill { + background-color: #07C; + border-color: #07C; + color: #FFF; } + .euiButton--primary.euiButton--fill:not([class*='isDisabled']):hover, .euiButton--primary.euiButton--fill:not([class*='isDisabled']):focus, .euiButton--primary.euiButton--fill:not([class*='isDisabled']):focus-within { + background-color: #0068b3; + border-color: #0068b3; } + .euiButton--primary:not([class*='isDisabled']) { + box-shadow: 0 0.8px 0.8px rgba(61, 109, 143, 0.04), 0 2.3px 2px rgba(61, 109, 143, 0.03); } + .euiButton--primary:not([class*='isDisabled']):hover, .euiButton--primary:not([class*='isDisabled']):focus, .euiButton--primary:not([class*='isDisabled']):focus-within { + box-shadow: 0 1px 5px rgba(61, 109, 143, 0.1), 0 3.6px 13px rgba(61, 109, 143, 0.07), 0 8.4px 23px rgba(61, 109, 143, 0.06), 0 23px 35px rgba(61, 109, 143, 0.05); + background-color: rgba(0, 119, 204, 0.1); } + +.euiButton--secondary { + color: #007e77; + border-color: #00BFB3; } + .euiButton--secondary.euiButton--fill { + background-color: #00BFB3; + border-color: #00BFB3; + color: #000; } + .euiButton--secondary.euiButton--fill:not([class*='isDisabled']):hover, .euiButton--secondary.euiButton--fill:not([class*='isDisabled']):focus, .euiButton--secondary.euiButton--fill:not([class*='isDisabled']):focus-within { + background-color: #00a69b; + border-color: #00a69b; } + .euiButton--secondary:not([class*='isDisabled']) { + box-shadow: 0 0.8px 0.8px rgba(57, 134, 129, 0.04), 0 2.3px 2px rgba(57, 134, 129, 0.03); } + .euiButton--secondary:not([class*='isDisabled']):hover, .euiButton--secondary:not([class*='isDisabled']):focus, .euiButton--secondary:not([class*='isDisabled']):focus-within { + box-shadow: 0 1px 5px rgba(57, 134, 129, 0.1), 0 3.6px 13px rgba(57, 134, 129, 0.07), 0 8.4px 23px rgba(57, 134, 129, 0.06), 0 23px 35px rgba(57, 134, 129, 0.05); + background-color: rgba(0, 191, 179, 0.1); } + +.euiButton--warning { + color: #8a6a0a; + border-color: #FEC514; } + .euiButton--warning.euiButton--fill { + background-color: #FEC514; + border-color: #FEC514; + color: #000; } + .euiButton--warning.euiButton--fill:not([class*='isDisabled']):hover, .euiButton--warning.euiButton--fill:not([class*='isDisabled']):focus, .euiButton--warning.euiButton--fill:not([class*='isDisabled']):focus-within { + background-color: #f7bb01; + border-color: #f7bb01; } + .euiButton--warning:not([class*='isDisabled']) { + box-shadow: 0 0.8px 0.8px rgba(183, 161, 91, 0.04), 0 2.3px 2px rgba(183, 161, 91, 0.03); } + .euiButton--warning:not([class*='isDisabled']):hover, .euiButton--warning:not([class*='isDisabled']):focus, .euiButton--warning:not([class*='isDisabled']):focus-within { + box-shadow: 0 1px 5px rgba(183, 161, 91, 0.1), 0 3.6px 13px rgba(183, 161, 91, 0.07), 0 8.4px 23px rgba(183, 161, 91, 0.06), 0 23px 35px rgba(183, 161, 91, 0.05); + background-color: rgba(254, 197, 20, 0.1); } + +.euiButton--danger { + color: #BD271E; + border-color: #BD271E; } + .euiButton--danger.euiButton--fill { + background-color: #BD271E; + border-color: #BD271E; + color: #FFF; } + .euiButton--danger.euiButton--fill:not([class*='isDisabled']):hover, .euiButton--danger.euiButton--fill:not([class*='isDisabled']):focus, .euiButton--danger.euiButton--fill:not([class*='isDisabled']):focus-within { + background-color: #a7221b; + border-color: #a7221b; } + .euiButton--danger:not([class*='isDisabled']) { + box-shadow: 0 0.8px 0.8px rgba(123, 97, 96, 0.04), 0 2.3px 2px rgba(123, 97, 96, 0.03); } + .euiButton--danger:not([class*='isDisabled']):hover, .euiButton--danger:not([class*='isDisabled']):focus, .euiButton--danger:not([class*='isDisabled']):focus-within { + box-shadow: 0 1px 5px rgba(123, 97, 96, 0.1), 0 3.6px 13px rgba(123, 97, 96, 0.07), 0 8.4px 23px rgba(123, 97, 96, 0.06), 0 23px 35px rgba(123, 97, 96, 0.05); + background-color: rgba(189, 39, 30, 0.1); } + +.euiButton--ghost { + color: #FFF; + border-color: #FFF; } + .euiButton--ghost.euiButton--fill { + background-color: #FFF; + border-color: #FFF; + color: #000; } + .euiButton--ghost.euiButton--fill:not([class*='isDisabled']):hover, .euiButton--ghost.euiButton--fill:not([class*='isDisabled']):focus, .euiButton--ghost.euiButton--fill:not([class*='isDisabled']):focus-within { + background-color: #f2f2f2; + border-color: #f2f2f2; } + .euiButton--ghost:not([class*='isDisabled']) { + box-shadow: 0 0.8px 0.8px rgba(0, 0, 0, 0.04), 0 2.3px 2px rgba(0, 0, 0, 0.03); } + .euiButton--ghost:not([class*='isDisabled']):hover, .euiButton--ghost:not([class*='isDisabled']):focus, .euiButton--ghost:not([class*='isDisabled']):focus-within { + 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-color: rgba(255, 255, 255, 0.1); } + +.euiButton--text { + color: #343741; + border-color: #69707D; } + .euiButton--text.euiButton--fill { + background-color: #69707D; + border-color: #69707D; + color: #FFF; } + .euiButton--text.euiButton--fill:not([class*='isDisabled']):hover, .euiButton--text.euiButton--fill:not([class*='isDisabled']):focus, .euiButton--text.euiButton--fill:not([class*='isDisabled']):focus-within { + background-color: #5d646f; + border-color: #5d646f; } + .euiButton--text:not([class*='isDisabled']) { + box-shadow: 0 0.8px 0.8px rgba(115, 115, 115, 0.04), 0 2.3px 2px rgba(115, 115, 115, 0.03); } + .euiButton--text:not([class*='isDisabled']):hover, .euiButton--text:not([class*='isDisabled']):focus, .euiButton--text:not([class*='isDisabled']):focus-within { + box-shadow: 0 1px 5px rgba(115, 115, 115, 0.1), 0 3.6px 13px rgba(115, 115, 115, 0.07), 0 8.4px 23px rgba(115, 115, 115, 0.06), 0 23px 35px rgba(115, 115, 115, 0.05); + background-color: rgba(105, 112, 125, 0.1); } + +.euiButton.euiButton-isDisabled.euiButton--ghost, .euiButton.euiButton-isDisabled.euiButton--ghost:hover, .euiButton.euiButton-isDisabled.euiButton--ghost:focus, .euiButton.euiButton-isDisabled.euiButton--ghost:focus-within { + box-shadow: 0 0.8px 0.8px rgba(0, 0, 0, 0.04), 0 2.3px 2px rgba(0, 0, 0, 0.03); + color: #69707D; + border-color: #69707D; } + +.euiButton.euiButton-isDisabled.euiButton--ghost.euiButton--fill { + background-color: #69707D; + color: #a1a5ae; } + +.euiButton--fullWidth { + display: block; + width: 100%; } + +.euiButtonContent { + height: 100%; + width: 100%; + vertical-align: middle; + display: -webkit-flex; + display: flex; + -webkit-justify-content: center; + justify-content: center; + -webkit-align-items: center; + align-items: center; } + .euiButtonContent .euiButtonContent__icon, + .euiButtonContent .euiButtonContent__spinner { + -webkit-flex-shrink: 0; + flex-shrink: 0; } + .euiButtonContent > * + * { + -webkit-margin-start: 8px; + margin-inline-start: 8px; } + +.euiButtonContent--iconRight { + height: 100%; + width: 100%; + vertical-align: middle; + -webkit-flex-direction: row-reverse; + flex-direction: row-reverse; } + .euiButtonContent--iconRight .euiButtonContent__icon, + .euiButtonContent--iconRight .euiButtonContent__spinner { + -webkit-flex-shrink: 0; + flex-shrink: 0; } + .euiButtonContent--iconRight > * + * { + -webkit-margin-start: 0; + margin-inline-start: 0; + -webkit-margin-end: 8px; + margin-inline-end: 8px; } + +/** + * 1. We don't want any of the animations that come inherited from the mixin. + * These should act like normal links instead. + * 2. Change the easing, quickness to not bounce so lighter backgrounds don't flash + */ +.euiButtonEmpty { + 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", -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.71429rem; + font-weight: 500; + text-decoration: none; + transition: background-color 250ms ease-in-out, border-color 250ms ease-in-out; + outline-offset: -1px; + border-color: transparent; + background-color: transparent; + box-shadow: none; + -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 */ } + @media screen and (prefers-reduced-motion: no-preference) { + .euiButtonEmpty { + transition: background 250ms ease-in-out, -webkit-transform 250ms ease-in-out; + transition: transform 250ms ease-in-out, background 250ms ease-in-out; + transition: transform 250ms ease-in-out, background 250ms ease-in-out, -webkit-transform 250ms ease-in-out; } + .euiButtonEmpty:hover:not([class*='isDisabled']) { + -webkit-transform: translateY(-1px); + transform: translateY(-1px); } + .euiButtonEmpty: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); } + .euiButtonEmpty:active:not([class*='isDisabled']) { + -webkit-transform: translateY(1px); + transform: translateY(1px); } } + .euiButtonEmpty:hover:not([class*='isDisabled']), .euiButtonEmpty:focus { + text-decoration: underline; } + .euiButtonEmpty .euiButtonEmpty__content { + padding: 0 8px; } + .euiButtonEmpty .euiButtonEmpty__text { + text-overflow: ellipsis; + overflow: hidden; } + .euiButtonEmpty.euiButtonEmpty--small { + height: 32px; } + .euiButtonEmpty.euiButtonEmpty--xSmall { + height: 24px; + font-size: 14px; } + .euiButtonEmpty:disabled { + pointer-events: auto; + cursor: not-allowed; + color: #ABB4C4; } + .euiButtonEmpty:disabled .euiButtonContent__icon { + fill: currentColor; } + .euiButtonEmpty:disabled .euiButtonContent__spinner { + border-color: #07C currentColor currentColor currentColor; } + .euiButtonEmpty:disabled:focus { + background-color: transparent; } + .euiButtonEmpty:disabled:hover, .euiButtonEmpty:disabled:focus { + text-decoration: none; } + +.euiButtonEmpty--flushLeft .euiButtonEmpty__content, +.euiButtonEmpty--flushRight .euiButtonEmpty__content, +.euiButtonEmpty--flushBoth .euiButtonEmpty__content { + padding-left: 0; + padding-right: 0; } + +.euiButtonEmpty--flushLeft { + margin-right: 8px; } + +.euiButtonEmpty--flushRight { + margin-left: 8px; } + +.euiButtonEmpty--primary { + color: #0071c2; } + .euiButtonEmpty--primary:focus { + background-color: rgba(0, 113, 194, 0.1); } + +.euiButtonEmpty--danger { + color: #BD271E; } + .euiButtonEmpty--danger:focus { + background-color: rgba(189, 39, 30, 0.1); } + +.euiButtonEmpty--disabled { + color: #717782; } + .euiButtonEmpty--disabled:focus { + background-color: rgba(171, 180, 196, 0.1); } + .euiButtonEmpty--disabled:hover { + cursor: not-allowed; } + +.euiButtonEmpty--ghost { + color: #FFF; } + .euiButtonEmpty--ghost:focus { + background-color: rgba(255, 255, 255, 0.1); } + +.euiButtonEmpty--text { + color: #343741; } + .euiButtonEmpty--text:focus { + background-color: rgba(52, 55, 65, 0.1); } + +.euiButtonEmpty--success { + color: #007e77; } + .euiButtonEmpty--success:focus { + background-color: rgba(0, 126, 119, 0.1); } + +.euiButtonEmpty--warning { + color: #8a6a0a; } + .euiButtonEmpty--warning:focus { + background-color: rgba(138, 106, 10, 0.1); } + +.euiButtonIcon { + 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", -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.71429rem; + font-weight: 500; + text-decoration: none; + transition: background-color 250ms ease-in-out, border-color 250ms ease-in-out; + outline-offset: -1px; + box-shadow: 0 0.8px 0.8px rgba(0, 0, 0, 0.04), 0 2.3px 2px rgba(0, 0, 0, 0.03); + border-radius: 6px; + width: 40px; + display: -webkit-inline-flex; + display: inline-flex; + -webkit-align-items: center; + align-items: center; + -webkit-justify-content: space-around; + justify-content: space-around; } + @media screen and (prefers-reduced-motion: no-preference) { + .euiButtonIcon { + transition: background 250ms ease-in-out, -webkit-transform 250ms ease-in-out; + transition: transform 250ms ease-in-out, background 250ms ease-in-out; + transition: transform 250ms ease-in-out, background 250ms ease-in-out, -webkit-transform 250ms ease-in-out; } + .euiButtonIcon:hover:not([class*='isDisabled']) { + -webkit-transform: translateY(-1px); + transform: translateY(-1px); } + .euiButtonIcon: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); } + .euiButtonIcon:active:not([class*='isDisabled']) { + -webkit-transform: translateY(1px); + transform: translateY(1px); } } + .euiButtonIcon:hover:not([class*='isDisabled']), .euiButtonIcon:focus { + text-decoration: underline; } + .euiButtonIcon > svg { + pointer-events: none; } + .euiButtonIcon.euiButtonIcon--empty { + box-shadow: none !important; + border: none; } + .euiButtonIcon.euiButtonIcon-isDisabled { + pointer-events: auto; + cursor: not-allowed; + color: #ABB4C4; + border-color: #ABB4C4; } + .euiButtonIcon.euiButtonIcon-isDisabled .euiButtonContent__icon { + fill: currentColor; } + .euiButtonIcon.euiButtonIcon-isDisabled .euiButtonContent__spinner { + border-color: #07C currentColor currentColor currentColor; } + .euiButtonIcon.euiButtonIcon-isDisabled.euiButtonIcon--fill { + color: #717782; + background-color: #ABB4C4; + border-color: #ABB4C4; } + .euiButtonIcon.euiButtonIcon-isDisabled.euiButtonIcon--fill:hover, .euiButtonIcon.euiButtonIcon-isDisabled.euiButtonIcon--fill:focus, .euiButtonIcon.euiButtonIcon-isDisabled.euiButtonIcon--fill:focus-within { + background-color: #ABB4C4; + border-color: #ABB4C4; } + .euiButtonIcon.euiButtonIcon-isDisabled:hover, .euiButtonIcon.euiButtonIcon-isDisabled:focus, .euiButtonIcon.euiButtonIcon-isDisabled:focus-within { + box-shadow: 0 0.8px 0.8px rgba(0, 0, 0, 0.04), 0 2.3px 2px rgba(0, 0, 0, 0.03); + text-decoration: none; } + +.euiButtonIcon--xSmall { + height: 24px; + width: 24px; } + +.euiButtonIcon--small { + height: 32px; + width: 32px; } + +.euiButtonIcon--accent { + color: #c4407c; + border-color: #c4407c; } + .euiButtonIcon--accent.euiButtonIcon--fill { + background-color: #c4407c; + border-color: #c4407c; + color: #FFF; } + .euiButtonIcon--accent.euiButtonIcon--fill:not([class*='isDisabled']):hover, .euiButtonIcon--accent.euiButtonIcon--fill:not([class*='isDisabled']):focus, .euiButtonIcon--accent.euiButtonIcon--fill:not([class*='isDisabled']):focus-within { + background-color: #b33770; + border-color: #b33770; } + .euiButtonIcon--accent:not([class*='isDisabled']) { + box-shadow: 0 0.8px 0.8px rgba(130, 130, 130, 0.04), 0 2.3px 2px rgba(130, 130, 130, 0.03); } + .euiButtonIcon--accent:not([class*='isDisabled']):hover, .euiButtonIcon--accent:not([class*='isDisabled']):focus, .euiButtonIcon--accent:not([class*='isDisabled']):focus-within { + box-shadow: 0 1px 5px rgba(130, 130, 130, 0.1), 0 3.6px 13px rgba(130, 130, 130, 0.07), 0 8.4px 23px rgba(130, 130, 130, 0.06), 0 23px 35px rgba(130, 130, 130, 0.05); + background-color: rgba(196, 64, 124, 0.1); } + +.euiButtonIcon--danger { + color: #BD271E; + border-color: #BD271E; } + .euiButtonIcon--danger.euiButtonIcon--fill { + background-color: #BD271E; + border-color: #BD271E; + color: #FFF; } + .euiButtonIcon--danger.euiButtonIcon--fill:not([class*='isDisabled']):hover, .euiButtonIcon--danger.euiButtonIcon--fill:not([class*='isDisabled']):focus, .euiButtonIcon--danger.euiButtonIcon--fill:not([class*='isDisabled']):focus-within { + background-color: #a7221b; + border-color: #a7221b; } + .euiButtonIcon--danger:not([class*='isDisabled']) { + box-shadow: 0 0.8px 0.8px rgba(123, 97, 96, 0.04), 0 2.3px 2px rgba(123, 97, 96, 0.03); } + .euiButtonIcon--danger:not([class*='isDisabled']):hover, .euiButtonIcon--danger:not([class*='isDisabled']):focus, .euiButtonIcon--danger:not([class*='isDisabled']):focus-within { + box-shadow: 0 1px 5px rgba(123, 97, 96, 0.1), 0 3.6px 13px rgba(123, 97, 96, 0.07), 0 8.4px 23px rgba(123, 97, 96, 0.06), 0 23px 35px rgba(123, 97, 96, 0.05); + background-color: rgba(189, 39, 30, 0.1); } + +.euiButtonIcon--ghost { + color: #FFF; + border-color: #FFF; } + .euiButtonIcon--ghost.euiButtonIcon--fill { + background-color: #FFF; + border-color: #FFF; + color: #000; } + .euiButtonIcon--ghost.euiButtonIcon--fill:not([class*='isDisabled']):hover, .euiButtonIcon--ghost.euiButtonIcon--fill:not([class*='isDisabled']):focus, .euiButtonIcon--ghost.euiButtonIcon--fill:not([class*='isDisabled']):focus-within { + background-color: #f2f2f2; + border-color: #f2f2f2; } + .euiButtonIcon--ghost:not([class*='isDisabled']) { + box-shadow: 0 0.8px 0.8px rgba(0, 0, 0, 0.04), 0 2.3px 2px rgba(0, 0, 0, 0.03); } + .euiButtonIcon--ghost:not([class*='isDisabled']):hover, .euiButtonIcon--ghost:not([class*='isDisabled']):focus, .euiButtonIcon--ghost:not([class*='isDisabled']):focus-within { + 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-color: rgba(255, 255, 255, 0.1); } + +.euiButtonIcon--primary { + color: #0071c2; + border-color: #0071c2; } + .euiButtonIcon--primary.euiButtonIcon--fill { + background-color: #0071c2; + border-color: #0071c2; + color: #FFF; } + .euiButtonIcon--primary.euiButtonIcon--fill:not([class*='isDisabled']):hover, .euiButtonIcon--primary.euiButtonIcon--fill:not([class*='isDisabled']):focus, .euiButtonIcon--primary.euiButtonIcon--fill:not([class*='isDisabled']):focus-within { + background-color: #0062a9; + border-color: #0062a9; } + .euiButtonIcon--primary:not([class*='isDisabled']) { + box-shadow: 0 0.8px 0.8px rgba(58, 103, 136, 0.04), 0 2.3px 2px rgba(58, 103, 136, 0.03); } + .euiButtonIcon--primary:not([class*='isDisabled']):hover, .euiButtonIcon--primary:not([class*='isDisabled']):focus, .euiButtonIcon--primary:not([class*='isDisabled']):focus-within { + box-shadow: 0 1px 5px rgba(58, 103, 136, 0.1), 0 3.6px 13px rgba(58, 103, 136, 0.07), 0 8.4px 23px rgba(58, 103, 136, 0.06), 0 23px 35px rgba(58, 103, 136, 0.05); + background-color: rgba(0, 113, 194, 0.1); } + +.euiButtonIcon--subdued { + color: #69707D; + border-color: #69707D; } + .euiButtonIcon--subdued.euiButtonIcon--fill { + background-color: #69707D; + border-color: #69707D; + color: #FFF; } + .euiButtonIcon--subdued.euiButtonIcon--fill:not([class*='isDisabled']):hover, .euiButtonIcon--subdued.euiButtonIcon--fill:not([class*='isDisabled']):focus, .euiButtonIcon--subdued.euiButtonIcon--fill:not([class*='isDisabled']):focus-within { + background-color: #5d646f; + border-color: #5d646f; } + .euiButtonIcon--subdued:not([class*='isDisabled']) { + box-shadow: 0 0.8px 0.8px rgba(115, 115, 115, 0.04), 0 2.3px 2px rgba(115, 115, 115, 0.03); } + .euiButtonIcon--subdued:not([class*='isDisabled']):hover, .euiButtonIcon--subdued:not([class*='isDisabled']):focus, .euiButtonIcon--subdued:not([class*='isDisabled']):focus-within { + box-shadow: 0 1px 5px rgba(115, 115, 115, 0.1), 0 3.6px 13px rgba(115, 115, 115, 0.07), 0 8.4px 23px rgba(115, 115, 115, 0.06), 0 23px 35px rgba(115, 115, 115, 0.05); + background-color: rgba(105, 112, 125, 0.1); } + +.euiButtonIcon--success { + color: #007e77; + border-color: #007e77; } + .euiButtonIcon--success.euiButtonIcon--fill { + background-color: #007e77; + border-color: #007e77; + color: #FFF; } + .euiButtonIcon--success.euiButtonIcon--fill:not([class*='isDisabled']):hover, .euiButtonIcon--success.euiButtonIcon--fill:not([class*='isDisabled']):focus, .euiButtonIcon--success.euiButtonIcon--fill:not([class*='isDisabled']):focus-within { + background-color: #00655f; + border-color: #00655f; } + .euiButtonIcon--success:not([class*='isDisabled']) { + box-shadow: 0 0.8px 0.8px rgba(38, 88, 85, 0.04), 0 2.3px 2px rgba(38, 88, 85, 0.03); } + .euiButtonIcon--success:not([class*='isDisabled']):hover, .euiButtonIcon--success:not([class*='isDisabled']):focus, .euiButtonIcon--success:not([class*='isDisabled']):focus-within { + box-shadow: 0 1px 5px rgba(38, 88, 85, 0.1), 0 3.6px 13px rgba(38, 88, 85, 0.07), 0 8.4px 23px rgba(38, 88, 85, 0.06), 0 23px 35px rgba(38, 88, 85, 0.05); + background-color: rgba(0, 126, 119, 0.1); } + +.euiButtonIcon--text { + color: #343741; + border-color: #69707D; } + .euiButtonIcon--text.euiButtonIcon--fill { + background-color: #69707D; + border-color: #69707D; + color: #FFF; } + .euiButtonIcon--text.euiButtonIcon--fill:not([class*='isDisabled']):hover, .euiButtonIcon--text.euiButtonIcon--fill:not([class*='isDisabled']):focus, .euiButtonIcon--text.euiButtonIcon--fill:not([class*='isDisabled']):focus-within { + background-color: #5d646f; + border-color: #5d646f; } + .euiButtonIcon--text:not([class*='isDisabled']) { + box-shadow: 0 0.8px 0.8px rgba(115, 115, 115, 0.04), 0 2.3px 2px rgba(115, 115, 115, 0.03); } + .euiButtonIcon--text:not([class*='isDisabled']):hover, .euiButtonIcon--text:not([class*='isDisabled']):focus, .euiButtonIcon--text:not([class*='isDisabled']):focus-within { + box-shadow: 0 1px 5px rgba(115, 115, 115, 0.1), 0 3.6px 13px rgba(115, 115, 115, 0.07), 0 8.4px 23px rgba(115, 115, 115, 0.06), 0 23px 35px rgba(115, 115, 115, 0.05); + background-color: rgba(105, 112, 125, 0.1); } + +.euiButtonIcon--warning { + color: #8a6a0a; + border-color: #8a6a0a; } + .euiButtonIcon--warning.euiButtonIcon--fill { + background-color: #8a6a0a; + border-color: #8a6a0a; + color: #FFF; } + .euiButtonIcon--warning.euiButtonIcon--fill:not([class*='isDisabled']):hover, .euiButtonIcon--warning.euiButtonIcon--fill:not([class*='isDisabled']):focus, .euiButtonIcon--warning.euiButtonIcon--fill:not([class*='isDisabled']):focus-within { + background-color: #725808; + border-color: #725808; } + .euiButtonIcon--warning:not([class*='isDisabled']) { + box-shadow: 0 0.8px 0.8px rgba(94, 84, 54, 0.04), 0 2.3px 2px rgba(94, 84, 54, 0.03); } + .euiButtonIcon--warning:not([class*='isDisabled']):hover, .euiButtonIcon--warning:not([class*='isDisabled']):focus, .euiButtonIcon--warning:not([class*='isDisabled']):focus-within { + box-shadow: 0 1px 5px rgba(94, 84, 54, 0.1), 0 3.6px 13px rgba(94, 84, 54, 0.07), 0 8.4px 23px rgba(94, 84, 54, 0.06), 0 23px 35px rgba(94, 84, 54, 0.05); + background-color: rgba(138, 106, 10, 0.1); } + +.euiButtonIcon.euiButtonIcon-isDisabled.euiButtonIcon--ghost, .euiButtonIcon.euiButtonIcon-isDisabled.euiButtonIcon--ghost:hover, .euiButtonIcon.euiButtonIcon-isDisabled.euiButtonIcon--ghost:focus, .euiButtonIcon.euiButtonIcon-isDisabled.euiButtonIcon--ghost:focus-within { + box-shadow: 0 0.8px 0.8px rgba(0, 0, 0, 0.04), 0 2.3px 2px rgba(0, 0, 0, 0.03); + color: #69707D; + border-color: #69707D; } + +.euiButtonIcon.euiButtonIcon-isDisabled.euiButtonIcon--ghost.euiButton--fill { + background-color: #69707D; + color: #a1a5ae; } + +.euiButtonGroup { + display: inline-block; + max-width: 100%; + position: relative; } + +.euiButtonGroup--fullWidth { + display: block; } + .euiButtonGroup--fullWidth .euiButtonGroup__buttons { + width: 100%; } + .euiButtonGroup--fullWidth .euiButtonGroup__buttons .euiButtonGroupButton { + -webkit-flex: 1; + flex: 1; } + +.euiButtonGroup__buttons { + box-shadow: 0 0.8px 0.8px rgba(0, 0, 0, 0.04), 0 2.3px 2px rgba(0, 0, 0, 0.03); + border-radius: 7px; + max-width: 100%; + display: -webkit-flex; + display: flex; + overflow: hidden; } + +.euiButtonGroup--isDisabled .euiButtonGroup__buttons { + box-shadow: none; } + +.euiButtonGroup--compressed .euiButtonGroup__buttons { + box-shadow: none !important; + border-radius: 4px; + background-color: #fbfcfd; + height: 32px; + border: 1px solid rgba(17, 43, 134, 0.1); + overflow: visible; } + +.euiButtonGroupButton { + 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", -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.71429rem; + transition: background-color 250ms ease-in-out, border-color 250ms ease-in-out, color 250ms ease-in-out; + min-width: 0; + -webkit-flex-shrink: 1; + flex-shrink: 1; + -webkit-flex-grow: 0; + flex-grow: 0; } + .euiButtonGroupButton .euiButton__content { + padding: 0 12px; } + .euiButtonGroupButton-isIconOnly .euiButton__content { + padding: 0 8px; } + .euiButtonGroupButton .euiButton__text { + text-overflow: ellipsis; + overflow: hidden; } + .euiButtonGroupButton.euiButtonGroupButton--small { + height: 32px; + line-height: 32px; } + .euiButtonGroupButton:not([class*='isDisabled']):hover, .euiButtonGroupButton:not([class*='isDisabled']):focus, .euiButtonGroupButton:not([class*='isDisabled']):focus-within { + background-color: rgba(0, 119, 204, 0.1); + text-decoration: underline; } + .euiButtonGroupButton.euiButtonGroupButton-isDisabled { + pointer-events: auto; + cursor: not-allowed; + color: #ABB4C4; } + .euiButtonGroupButton.euiButtonGroupButton-isDisabled .euiButtonContent__icon { + fill: currentColor; } + .euiButtonGroupButton.euiButtonGroupButton-isDisabled .euiButtonContent__spinner { + border-color: #07C currentColor currentColor currentColor; } + .euiButtonGroupButton.euiButtonGroupButton-isDisabled.euiButtonGroupButton-isSelected { + color: #717782; + background-color: #ABB4C4; + border-color: #ABB4C4; } + .euiButtonGroupButton.euiButtonGroupButton-isDisabled.euiButtonGroupButton-isSelected:hover, .euiButtonGroupButton.euiButtonGroupButton-isDisabled.euiButtonGroupButton-isSelected:focus, .euiButtonGroupButton.euiButtonGroupButton-isDisabled.euiButtonGroupButton-isSelected:focus-within { + background-color: #ABB4C4; + border-color: #ABB4C4; } + .euiButtonGroupButton.euiButtonGroupButton--primary:not([class*='isDisabled']) { + color: #0071c2; } + .euiButtonGroupButton.euiButtonGroupButton--primary:not([class*='isDisabled']).euiButtonGroupButton-isSelected { + background-color: #07C; + border-color: #07C; + color: #FFF; } + .euiButtonGroupButton.euiButtonGroupButton--primary:not([class*='isDisabled']).euiButtonGroupButton-isSelected:hover, .euiButtonGroupButton.euiButtonGroupButton--primary:not([class*='isDisabled']).euiButtonGroupButton-isSelected:focus, .euiButtonGroupButton.euiButtonGroupButton--primary:not([class*='isDisabled']).euiButtonGroupButton-isSelected:focus-within { + background-color: #0068b3; + border-color: #0068b3; } + .euiButtonGroupButton.euiButtonGroupButton--primary:not([class*='isDisabled']):hover, .euiButtonGroupButton.euiButtonGroupButton--primary:not([class*='isDisabled']):focus, .euiButtonGroupButton.euiButtonGroupButton--primary:not([class*='isDisabled']):focus-within { + background-color: rgba(0, 119, 204, 0.1); } + .euiButtonGroupButton.euiButtonGroupButton--secondary:not([class*='isDisabled']) { + color: #007e77; } + .euiButtonGroupButton.euiButtonGroupButton--secondary:not([class*='isDisabled']).euiButtonGroupButton-isSelected { + background-color: #00BFB3; + border-color: #00BFB3; + color: #000; } + .euiButtonGroupButton.euiButtonGroupButton--secondary:not([class*='isDisabled']).euiButtonGroupButton-isSelected:hover, .euiButtonGroupButton.euiButtonGroupButton--secondary:not([class*='isDisabled']).euiButtonGroupButton-isSelected:focus, .euiButtonGroupButton.euiButtonGroupButton--secondary:not([class*='isDisabled']).euiButtonGroupButton-isSelected:focus-within { + background-color: #00a69b; + border-color: #00a69b; } + .euiButtonGroupButton.euiButtonGroupButton--secondary:not([class*='isDisabled']):hover, .euiButtonGroupButton.euiButtonGroupButton--secondary:not([class*='isDisabled']):focus, .euiButtonGroupButton.euiButtonGroupButton--secondary:not([class*='isDisabled']):focus-within { + background-color: rgba(0, 191, 179, 0.1); } + .euiButtonGroupButton.euiButtonGroupButton--warning:not([class*='isDisabled']) { + color: #8a6a0a; } + .euiButtonGroupButton.euiButtonGroupButton--warning:not([class*='isDisabled']).euiButtonGroupButton-isSelected { + background-color: #FEC514; + border-color: #FEC514; + color: #000; } + .euiButtonGroupButton.euiButtonGroupButton--warning:not([class*='isDisabled']).euiButtonGroupButton-isSelected:hover, .euiButtonGroupButton.euiButtonGroupButton--warning:not([class*='isDisabled']).euiButtonGroupButton-isSelected:focus, .euiButtonGroupButton.euiButtonGroupButton--warning:not([class*='isDisabled']).euiButtonGroupButton-isSelected:focus-within { + background-color: #f7bb01; + border-color: #f7bb01; } + .euiButtonGroupButton.euiButtonGroupButton--warning:not([class*='isDisabled']):hover, .euiButtonGroupButton.euiButtonGroupButton--warning:not([class*='isDisabled']):focus, .euiButtonGroupButton.euiButtonGroupButton--warning:not([class*='isDisabled']):focus-within { + background-color: rgba(254, 197, 20, 0.1); } + .euiButtonGroupButton.euiButtonGroupButton--danger:not([class*='isDisabled']) { + color: #BD271E; } + .euiButtonGroupButton.euiButtonGroupButton--danger:not([class*='isDisabled']).euiButtonGroupButton-isSelected { + background-color: #BD271E; + border-color: #BD271E; + color: #FFF; } + .euiButtonGroupButton.euiButtonGroupButton--danger:not([class*='isDisabled']).euiButtonGroupButton-isSelected:hover, .euiButtonGroupButton.euiButtonGroupButton--danger:not([class*='isDisabled']).euiButtonGroupButton-isSelected:focus, .euiButtonGroupButton.euiButtonGroupButton--danger:not([class*='isDisabled']).euiButtonGroupButton-isSelected:focus-within { + background-color: #a7221b; + border-color: #a7221b; } + .euiButtonGroupButton.euiButtonGroupButton--danger:not([class*='isDisabled']):hover, .euiButtonGroupButton.euiButtonGroupButton--danger:not([class*='isDisabled']):focus, .euiButtonGroupButton.euiButtonGroupButton--danger:not([class*='isDisabled']):focus-within { + background-color: rgba(189, 39, 30, 0.1); } + .euiButtonGroupButton.euiButtonGroupButton--ghost:not([class*='isDisabled']) { + color: #FFF; } + .euiButtonGroupButton.euiButtonGroupButton--ghost:not([class*='isDisabled']).euiButtonGroupButton-isSelected { + background-color: #FFF; + border-color: #FFF; + color: #000; } + .euiButtonGroupButton.euiButtonGroupButton--ghost:not([class*='isDisabled']).euiButtonGroupButton-isSelected:hover, .euiButtonGroupButton.euiButtonGroupButton--ghost:not([class*='isDisabled']).euiButtonGroupButton-isSelected:focus, .euiButtonGroupButton.euiButtonGroupButton--ghost:not([class*='isDisabled']).euiButtonGroupButton-isSelected:focus-within { + background-color: #f2f2f2; + border-color: #f2f2f2; } + .euiButtonGroupButton.euiButtonGroupButton--ghost:not([class*='isDisabled']):hover, .euiButtonGroupButton.euiButtonGroupButton--ghost:not([class*='isDisabled']):focus, .euiButtonGroupButton.euiButtonGroupButton--ghost:not([class*='isDisabled']):focus-within { + background-color: rgba(255, 255, 255, 0.1); } + .euiButtonGroupButton.euiButtonGroupButton--text:not([class*='isDisabled']) { + color: #343741; } + .euiButtonGroupButton.euiButtonGroupButton--text:not([class*='isDisabled']).euiButtonGroupButton-isSelected { + background-color: #69707D; + border-color: #69707D; + color: #FFF; } + .euiButtonGroupButton.euiButtonGroupButton--text:not([class*='isDisabled']).euiButtonGroupButton-isSelected:hover, .euiButtonGroupButton.euiButtonGroupButton--text:not([class*='isDisabled']).euiButtonGroupButton-isSelected:focus, .euiButtonGroupButton.euiButtonGroupButton--text:not([class*='isDisabled']).euiButtonGroupButton-isSelected:focus-within { + background-color: #5d646f; + border-color: #5d646f; } + .euiButtonGroupButton.euiButtonGroupButton--text:not([class*='isDisabled']):hover, .euiButtonGroupButton.euiButtonGroupButton--text:not([class*='isDisabled']):focus, .euiButtonGroupButton.euiButtonGroupButton--text:not([class*='isDisabled']):focus-within { + background-color: rgba(105, 112, 125, 0.1); } + +.euiButtonGroupButton__textShift::after { + display: block; + content: attr(data-text); + font-weight: 700; + height: 0; + overflow: hidden; + visibility: hidden; } + +/** + * Medium and Small sizing (regular button style) + */ +.euiButtonGroup--medium .euiButtonGroupButton, +.euiButtonGroup--small .euiButtonGroupButton { + border: 1px solid #D3DAE6; } + .euiButtonGroup--medium .euiButtonGroupButton:not(:first-child), + .euiButtonGroup--small .euiButtonGroupButton:not(:first-child) { + margin-left: -1px; } + .euiButtonGroup--medium .euiButtonGroupButton:first-child, + .euiButtonGroup--small .euiButtonGroupButton:first-child { + border-radius: 6px 0 0 6px; } + .euiButtonGroup--medium .euiButtonGroupButton:last-child, + .euiButtonGroup--small .euiButtonGroupButton:last-child { + border-radius: 0 6px 6px 0; } + +.euiButtonGroup--medium .euiButtonGroupButton.euiButtonGroupButton-isDisabled.euiButtonGroupButton--ghost, .euiButtonGroup--medium .euiButtonGroupButton.euiButtonGroupButton-isDisabled.euiButtonGroupButton--ghost:hover, .euiButtonGroup--medium .euiButtonGroupButton.euiButtonGroupButton-isDisabled.euiButtonGroupButton--ghost:focus, .euiButtonGroup--medium .euiButtonGroupButton.euiButtonGroupButton-isDisabled.euiButtonGroupButton--ghost:focus-within, +.euiButtonGroup--small .euiButtonGroupButton.euiButtonGroupButton-isDisabled.euiButtonGroupButton--ghost, +.euiButtonGroup--small .euiButtonGroupButton.euiButtonGroupButton-isDisabled.euiButtonGroupButton--ghost:hover, +.euiButtonGroup--small .euiButtonGroupButton.euiButtonGroupButton-isDisabled.euiButtonGroupButton--ghost:focus, +.euiButtonGroup--small .euiButtonGroupButton.euiButtonGroupButton-isDisabled.euiButtonGroupButton--ghost:focus-within { + color: #69707D; } + +.euiButtonGroup--isDisabled .euiButtonGroup--medium .euiButtonGroupButton.euiButtonGroupButton-isDisabled.euiButtonGroupButton--ghost, .euiButtonGroup--isDisabled +.euiButtonGroup--small .euiButtonGroupButton.euiButtonGroupButton-isDisabled.euiButtonGroupButton--ghost { + border-color: #69707D; } + +.euiButtonGroup--medium .euiButtonGroupButton.euiButtonGroupButton-isDisabled.euiButtonGroupButton--ghost.euiButtonGroupButton-isSelected, +.euiButtonGroup--small .euiButtonGroupButton.euiButtonGroupButton-isDisabled.euiButtonGroupButton--ghost.euiButtonGroupButton-isSelected { + background-color: #69707D; + color: #a1a5ae; } + +.euiButtonGroup--medium .euiButtonGroupButton-isSelected, +.euiButtonGroup--small .euiButtonGroupButton-isSelected { + z-index: 0; } + +.euiButtonGroup--medium .euiButtonGroupButton-isSelected + .euiButtonGroupButton-isSelected, +.euiButtonGroup--small .euiButtonGroupButton-isSelected + .euiButtonGroupButton-isSelected { + box-shadow: -1px 0 0 rgba(255, 255, 255, 0.1); } + +/** + * Compressed (form style) + */ +.euiButtonGroup--compressed .euiButtonGroupButton { + height: 30px; + line-height: 30px; + font-size: 14px; + border-radius: 6px; + padding: 2px; + background-clip: content-box; } + .euiButtonGroup--compressed .euiButtonGroupButton .euiButton__content { + padding-left: 8px; + padding-right: 8px; } + .euiButtonGroup--compressed .euiButtonGroupButton.euiButtonGroupButton-isSelected { + font-weight: 600; } + .euiButtonGroup--compressed .euiButtonGroupButton:not([class*='isDisabled']):focus, .euiButtonGroup--compressed .euiButtonGroupButton:not([class*='isDisabled']):focus-within { + outline: 2px solid #0071c2; } + +/** + * 1. Add vertical space between breadcrumbs, + * but make sure the whole breadcrumb set doesn't add space below itself + */ +.euiBreadcrumbs { + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + margin-bottom: -4px; + /* 1 */ + display: -webkit-flex; + display: flex; + -webkit-align-items: center; + align-items: center; + -webkit-flex-wrap: wrap; + flex-wrap: wrap; + min-width: 0; } + +.euiBreadcrumb { + display: inline-block; + margin-bottom: 4px; + /* 1 */ } + .euiBreadcrumb:not(.euiBreadcrumb--last) { + margin-right: 8px; + color: #69707D; } + +.euiBreadcrumb--last { + font-weight: 500; } + +.euiBreadcrumb--collapsed { + -webkit-flex-shrink: 0; + flex-shrink: 0; } + +.euiBreadcrumbSeparator { + -webkit-flex-shrink: 0; + flex-shrink: 0; + display: inline-block; + margin-right: 8px; + width: 1px; + height: 16px; + -webkit-transform: translateY(-1px) rotate(15deg); + transform: translateY(-1px) rotate(15deg); + background: #D3DAE6; } + +.euiBreadcrumbs__inPopover .euiBreadcrumb--last { + font-weight: 400; + color: #69707D !important; } + +.euiBreadcrumbs--truncate { + white-space: nowrap; + -webkit-flex-wrap: nowrap; + flex-wrap: nowrap; } + .euiBreadcrumbs--truncate .euiBreadcrumb:not(.euiBreadcrumb--collapsed) { + max-width: 160px; + overflow: hidden; + text-overflow: ellipsis; } + .euiBreadcrumbs--truncate .euiBreadcrumb:not(.euiBreadcrumb--collapsed).euiBreadcrumb--last { + max-width: none; } + +.euiBreadcrumb--truncate { + max-width: 100%; + overflow: hidden !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; + word-wrap: normal !important; + max-width: 160px; + text-align: center; + vertical-align: top; } + +.euiCallOut { + padding: 16px; + border-left: 2px solid transparent; } + .euiCallOut.euiCallOut--small { + padding: 8px; } + .euiCallOut .euiCallOutHeader__icon { + -webkit-flex: 0 0 auto; + flex: 0 0 auto; + -webkit-transform: translateY(2px); + transform: translateY(2px); } + .euiCallOut .euiCallOutHeader__title { + color: #1a1c21; + font-size: 16px; + font-size: 1.14286rem; + line-height: 1.71429rem; + font-weight: 700; + font-weight: 400; + margin-bottom: 0; } + +.euiCallOut--small .euiCallOutHeader__title { + color: #1a1c21; + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + font-weight: 700; + font-weight: 400; } + +.euiCallOut--primary { + border-color: #07C; + background-color: #e6f1fa; } + .euiCallOut--primary .euiCallOutHeader__icon { + fill: #006bb8; } + .euiCallOut--primary .euiCallOutHeader__title { + color: #006bb8; } + +.euiCallOut--success { + border-color: #00BFB3; + background-color: #e6f9f7; } + .euiCallOut--success .euiCallOutHeader__icon { + fill: #007e77; } + .euiCallOut--success .euiCallOutHeader__title { + color: #007e77; } + +.euiCallOut--warning { + border-color: #FEC514; + background-color: #fff9e8; } + .euiCallOut--warning .euiCallOutHeader__icon { + fill: #8a6a0a; } + .euiCallOut--warning .euiCallOutHeader__title { + color: #8a6a0a; } + +.euiCallOut--danger { + border-color: #BD271E; + background-color: #f8e9e9; } + .euiCallOut--danger .euiCallOutHeader__icon { + fill: #bd271e; } + .euiCallOut--danger .euiCallOutHeader__title { + color: #bd271e; } + +/** + * 1. Align icon with first line of title text if it wraps. + * 2. If content exists under the header, space it appropriately. + * 3. Apply margin to all but last item in the flex. + */ +.euiCallOutHeader { + display: -webkit-flex; + display: flex; + -webkit-align-items: baseline; + align-items: baseline; + /* 1 */ } + .euiCallOutHeader + * { + margin-top: 8px; + /* 1 */ } + .euiCallOutHeader > * + * { + margin-left: 8px; + /* 3 */ } + +/** + * 1. Footer is always at the bottom. + * 2. Fix for IE where the image correctly resizes in width but doesn't collapse its height + (https://github.com/philipwalton/flexbugs/issues/75#issuecomment-134702421) + * 3. Horizontal layouts should always top left align no matter the textAlign prop + */ +.euiCard { + display: -webkit-flex; + display: flex; + -webkit-flex-direction: column; + flex-direction: column; + min-height: 1px; + /* 2 */ } + .euiCard.euiCard-isDisabled { + cursor: not-allowed !important; + -webkit-transform: none !important; + transform: none !important; + box-shadow: none !important; + text-decoration: none !important; + color: #ABB4C4; } + .euiCard.euiCard-isDisabled .euiCard__top { + -webkit-filter: grayscale(100%); + filter: grayscale(100%); } + .euiCard.euiCard-isDisabled .euiCard__titleAnchor, + .euiCard.euiCard-isDisabled .euiCard__titleButton { + color: #ABB4C4; + cursor: inherit; } + .euiCard.euiCard--isClickable { + display: -webkit-flex; + display: flex; + width: 100%; } + .euiCard.euiCard--isClickable:not(.euiCard-isDisabled):focus-within { + 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); + outline: 2px solid currentColor; } + .euiCard.euiCard--isClickable:not(.euiCard-isDisabled):focus-within:focus-visible { + outline-style: auto; } + .euiCard.euiCard--isClickable:not(.euiCard-isDisabled):focus-within:not(:focus-visible) { + outline: none; } + .euiCard.euiCard--isClickable:not(.euiCard-isDisabled):focus .euiCard__title, + .euiCard.euiCard--isClickable:not(.euiCard-isDisabled):focus .euiCard__titleAnchor, + .euiCard.euiCard--isClickable:not(.euiCard-isDisabled):focus .euiCard__titleButton, .euiCard.euiCard--isClickable:not(.euiCard-isDisabled):hover .euiCard__title, + .euiCard.euiCard--isClickable:not(.euiCard-isDisabled):hover .euiCard__titleAnchor, + .euiCard.euiCard--isClickable:not(.euiCard-isDisabled):hover .euiCard__titleButton { + text-decoration: underline; } + .euiCard .euiCard__top, + .euiCard .euiCard__content, + .euiCard .euiCard__footer { + width: 100%; } + .euiCard.euiCard--leftAligned { + text-align: left; + -webkit-align-items: flex-start; + align-items: flex-start; } + .euiCard.euiCard--leftAligned .euiCard__titleButton { + text-align: left; } + .euiCard.euiCard--centerAligned { + text-align: center; + -webkit-align-items: center; + align-items: center; } + .euiCard.euiCard--rightAligned { + text-align: right; + -webkit-align-items: flex-end; + align-items: flex-end; } + .euiCard.euiCard--rightAligned .euiCard__titleButton { + text-align: right; } + .euiCard.euiCard-isSelected { + transition: all 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); } + +.euiCard--hasBetaBadge { + position: relative; + overflow: visible; } + .euiCard--hasBetaBadge .euiCard__betaBadgeWrapper { + position: absolute; + top: -12px; + left: 50%; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); + z-index: 3; + min-width: 30%; + max-width: calc(100% - 32px); } + .euiCard--hasBetaBadge .euiCard__betaBadgeWrapper .euiToolTipAnchor, + .euiCard--hasBetaBadge .euiCard__betaBadgeWrapper .euiCard__betaBadge { + width: 100%; } + .euiCard--hasBetaBadge .euiCard__betaBadgeWrapper .euiCard__betaBadge { + overflow: hidden; + text-overflow: ellipsis; + background-color: #FFF; } + +.euiCard--isSelectable { + position: relative; } + +.euiCard[class*='paddingSmall'] { + padding: 8px; } + .euiCard[class*='paddingSmall'].euiCard--isSelectable { + padding-bottom: 48px; } + .euiCard[class*='paddingSmall'] .euiCard__top .euiCard__image { + width: calc(100% + (8px * 2)); + left: -8px; + top: -8px; + margin-bottom: -8px; } + .euiCard[class*='paddingSmall'] .euiCard__top .euiCard__image + .euiCard__icon { + -webkit-transform: translate(-50%, -75%); + transform: translate(-50%, -75%); + -webkit-transform: translate(-50%, calc(-50% + -8px)); + transform: translate(-50%, calc(-50% + -8px)); } + +.euiCard[class*='paddingMedium'] { + padding: 16px; } + .euiCard[class*='paddingMedium'].euiCard--isSelectable { + padding-bottom: 56px; } + .euiCard[class*='paddingMedium'] .euiCard__top .euiCard__image { + width: calc(100% + (16px * 2)); + left: -16px; + top: -16px; + margin-bottom: -16px; } + .euiCard[class*='paddingMedium'] .euiCard__top .euiCard__image + .euiCard__icon { + -webkit-transform: translate(-50%, -75%); + transform: translate(-50%, -75%); + -webkit-transform: translate(-50%, calc(-50% + -16px)); + transform: translate(-50%, calc(-50% + -16px)); } + +.euiCard[class*='paddingLarge'] { + padding: 24px; } + .euiCard[class*='paddingLarge'].euiCard--isSelectable { + padding-bottom: 64px; } + .euiCard[class*='paddingLarge'] .euiCard__top .euiCard__image { + width: calc(100% + (24px * 2)); + left: -24px; + top: -24px; + margin-bottom: -24px; } + .euiCard[class*='paddingLarge'] .euiCard__top .euiCard__image + .euiCard__icon { + -webkit-transform: translate(-50%, -75%); + transform: translate(-50%, -75%); + -webkit-transform: translate(-50%, calc(-50% + -24px)); + transform: translate(-50%, calc(-50% + -24px)); } + +.euiCard__top { + -webkit-flex-grow: 0; + flex-grow: 0; + /* 1 */ + position: relative; + min-height: 1px; + /* 2 */ + font-size: 0; } + .euiCard__top .euiCard__image { + position: relative; + border-top-left-radius: 5px; + border-top-right-radius: 5px; + overflow: hidden; } + .euiCard__top .euiCard__image img { + width: 100%; } + .euiCard__top .euiCard__image + .euiCard__icon { + position: absolute; + top: 50%; + left: 50%; } + .euiCard__top .euiCard__icon { + margin-top: 8px; } + +.euiCard__footer:not(:empty) { + -webkit-flex-grow: 0; + flex-grow: 0; + /* 1 */ + margin-top: 16px; } + +.euiCard[class*='transparent'] .euiCard__image { + border-radius: 6px; } + +.euiCard--isSelectable--text.euiCard-isSelected:not(.euiCard-isDisabled) { + border-color: #00BFB3 !important; } + +.euiCard--isSelectable--primary.euiCard-isSelected:not(.euiCard-isDisabled) { + border-color: #07C !important; } + +.euiCard--isSelectable--success.euiCard-isSelected:not(.euiCard-isDisabled) { + border-color: #00BFB3 !important; } + +.euiCard--isSelectable--danger.euiCard-isSelected:not(.euiCard-isDisabled) { + border-color: #BD271E !important; } + +.euiCard--isSelectable--ghost.euiCard-isSelected:not(.euiCard-isDisabled) { + border-color: #69707D !important; } + +.euiCard__top + .euiCard__content { + margin-top: 16px; } + +.euiCard__content { + -webkit-flex-grow: 1; + flex-grow: 1; + /* 1 */ } + .euiCard__content .euiCard__description, + .euiCard__content .euiCard__children { + margin-top: 8px; } + .euiCard__content .euiCard__titleAnchor, + .euiCard__content .euiCard__titleButton { + font: inherit; + color: inherit; + letter-spacing: inherit; } + .euiCard__content .euiCard__titleAnchor:focus, + .euiCard__content .euiCard__titleButton:focus { + text-decoration: underline; } + +.euiCard.euiCard--horizontal .euiCard__content, +.euiCard.euiCard--horizontal .euiCard__titleButton { + text-align: left; + /* 3 */ } + +.euiCard.euiCard--horizontal.euiCard--hasIcon { + -webkit-flex-direction: row; + flex-direction: row; + -webkit-align-items: flex-start !important; + align-items: flex-start !important; + /* 3 */ } + .euiCard.euiCard--horizontal.euiCard--hasIcon .euiCard__top, + .euiCard.euiCard--horizontal.euiCard--hasIcon .euiCard__content { + width: auto; + margin-top: 0; } + .euiCard.euiCard--horizontal.euiCard--hasIcon .euiCard__top .euiCard__icon { + margin-top: 0; + margin-right: 16px; } + +.euiCardSelect { + position: absolute; + bottom: 0; + left: 0; + height: 40px !important; + width: 100%; + overflow: hidden; + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; + font-weight: 700; } + .euiCardSelect--text:enabled { + background-color: #F5F7FA; } + .euiCardSelect--primary:enabled { + background-color: #e6f1fa; } + .euiCardSelect--success:enabled { + background-color: #e6f9f7; + color: #007e77; } + .euiCardSelect--danger:enabled { + background-color: #f8e9e9; } + .euiCardSelect--ghost:enabled { + background-color: #69707D; } + .euiCardSelect:disabled { + background-color: #fafbfd; } + +.euiCheckableCard { + transition: border-color 250ms ease-in; } + .euiCheckableCard:not(.euiCheckableCard-isDisabled).euiCheckableCard-isChecked { + border-color: #07C; } + +.euiCheckableCard__label { + cursor: pointer; + display: block; + width: calc(100% + 32px); + padding: 16px; + margin: -16px; } + +.euiCheckableCard__label-isDisabled { + color: #98A2B3; + cursor: not-allowed; } + +.euiCheckableCard__children { + margin-top: 16px; } + +.euiCodeBlock { + max-width: 100%; + display: block; + position: relative; + background: #F5F7FA; + color: #343741; + /* + * 1. Size the code against the text its embedded within. + */ } + .euiCodeBlock .euiCodeBlock__pre { + scrollbar-width: thin; + height: 100%; + overflow: auto; + display: block; } + .euiCodeBlock .euiCodeBlock__pre::-webkit-scrollbar { + width: 16px; + height: 16px; } + .euiCodeBlock .euiCodeBlock__pre::-webkit-scrollbar-thumb { + background-color: rgba(105, 112, 125, 0.5); + border: 6px solid transparent; + background-clip: content-box; } + .euiCodeBlock .euiCodeBlock__pre::-webkit-scrollbar-corner, .euiCodeBlock .euiCodeBlock__pre::-webkit-scrollbar-track { + background-color: transparent; } + .euiCodeBlock .euiCodeBlock__pre--whiteSpacePre { + white-space: pre; } + .euiCodeBlock .euiCodeBlock__pre--whiteSpacePreWrap { + white-space: pre-wrap; } + .euiCodeBlock .euiCodeBlock__code { + font-family: "Roboto Mono", Consolas, Menlo, Courier, monospace; + letter-spacing: normal; + display: block; + line-height: 1.5; + font-weight: 400; + font-size: inherit; } + .euiCodeBlock .euiCodeBlock__controls { + position: absolute; + top: 0; + right: 0; } + .euiCodeBlock .euiCodeBlock__fullScreenButton + .euiCodeBlock__copyButton { + margin-top: 4px; } + .euiCodeBlock .euiCodeBlock__line { + display: block; } + .euiCodeBlock.euiCodeBlock-isFullScreen { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; } + .euiCodeBlock.euiCodeBlock-isFullScreen .euiCodeBlock__pre { + padding: 32px !important; } + .euiCodeBlock.euiCodeBlock-isFullScreen .euiCodeBlock__controls { + top: 4px; + right: 4px; } + .euiCodeBlock.euiCodeBlock--fontSmall { + font-size: 12px; } + .euiCodeBlock.euiCodeBlock--fontMedium { + font-size: 14px; } + .euiCodeBlock.euiCodeBlock--fontLarge { + font-size: 14px; } + .euiCodeBlock.euiCodeBlock--hasControls .euiCodeBlock__pre--whiteSpacePreWrap { + padding-right: 28px; } + .euiCodeBlock.euiCodeBlock--hasControls .euiCodeBlock__pre--whiteSpacePre { + margin-right: 28px; } + .euiCodeBlock.euiCodeBlock--paddingSmall .euiCodeBlock__pre { + padding: 8px; } + .euiCodeBlock.euiCodeBlock--paddingSmall .euiCodeBlock__controls { + top: 8px; + right: 8px; } + .euiCodeBlock.euiCodeBlock--paddingSmall.euiCodeBlock--hasControls .euiCodeBlock__pre--whiteSpacePreWrap { + padding-right: 36px; } + .euiCodeBlock.euiCodeBlock--paddingSmall.euiCodeBlock--hasControls .euiCodeBlock__pre--whiteSpacePre { + margin-right: 36px; } + .euiCodeBlock.euiCodeBlock--paddingMedium .euiCodeBlock__pre { + padding: 16px; } + .euiCodeBlock.euiCodeBlock--paddingMedium .euiCodeBlock__controls { + top: 16px; + right: 16px; } + .euiCodeBlock.euiCodeBlock--paddingMedium.euiCodeBlock--hasControls .euiCodeBlock__pre--whiteSpacePreWrap { + padding-right: 44px; } + .euiCodeBlock.euiCodeBlock--paddingMedium.euiCodeBlock--hasControls .euiCodeBlock__pre--whiteSpacePre { + margin-right: 44px; } + .euiCodeBlock.euiCodeBlock--paddingLarge .euiCodeBlock__pre { + padding: 24px; } + .euiCodeBlock.euiCodeBlock--paddingLarge .euiCodeBlock__controls { + top: 24px; + right: 24px; } + .euiCodeBlock.euiCodeBlock--paddingLarge.euiCodeBlock--hasControls .euiCodeBlock__pre--whiteSpacePreWrap { + padding-right: 52px; } + .euiCodeBlock.euiCodeBlock--paddingLarge.euiCodeBlock--hasControls .euiCodeBlock__pre--whiteSpacePre { + margin-right: 52px; } + .euiCodeBlock.euiCodeBlock--inline { + display: inline-block; + white-space: pre; + color: #343741; + font-size: 90%; + /* 1 */ + padding: 0 8px; + background: #F5F7FA; } + .euiCodeBlock.euiCodeBlock--inline .euiCodeBlock__pre { + padding: 0 4px; } + .euiCodeBlock.euiCodeBlock--inline .euiCodeBlock__code { + display: inline; + white-space: normal; } + .euiCodeBlock.euiCodeBlock--transparentBackground { + background: transparent; } + .euiCodeBlock .token.punctuation:not(.interpolation-punctuation):not([class*='attr-']) { + opacity: .7; } + .euiCodeBlock .token.comment, + .euiCodeBlock .token.prolog, + .euiCodeBlock .token.doctype, + .euiCodeBlock .token.cdata, + .euiCodeBlock .token.coord, + .euiCodeBlock .token.blockquote { + color: #6a717d; + font-style: italic; } + .euiCodeBlock .token.selector { + color: inherit; } + .euiCodeBlock .token.string, + .euiCodeBlock .token.interpolation, + .euiCodeBlock .token.interpolation-punctuation, + .euiCodeBlock .token.doc-comment .token.keyword, + .euiCodeBlock .token.attr-value, + .euiCodeBlock .token.url .token.content { + color: #ac4e6d; } + .euiCodeBlock .token.number, + .euiCodeBlock .token.boolean, + .euiCodeBlock .token.keyword.nil, + .euiCodeBlock .token.regex, + .euiCodeBlock .token.variable, + .euiCodeBlock .token.unit, + .euiCodeBlock .token.hexcode, + .euiCodeBlock .token.attr-name, + .euiCodeBlock .token.attr-equals { + color: #3b7d6a; } + .euiCodeBlock .token.atrule .token.rule, + .euiCodeBlock .token.keyword { + color: #7c609e; } + .euiCodeBlock .token.function { + color: inherit; } + .euiCodeBlock .token.tag { + color: #4a7194; } + .euiCodeBlock .token.class-name { + color: #4a7194; } + .euiCodeBlock .token.property { + color: inherit; } + .euiCodeBlock .token.console, + .euiCodeBlock .token.list-punctuation, + .euiCodeBlock .token.url-reference, + .euiCodeBlock .token.url .token.url { + color: #b34f3b; } + .euiCodeBlock .token.paramater { + color: inherit; } + .euiCodeBlock .token.meta, + .euiCodeBlock .token.important { + color: #6a717d; } + .euiCodeBlock .token.title { + color: #996130; } + .euiCodeBlock .token.section { + color: #b34f3b; } + .euiCodeBlock .token.prefix.inserted, + .euiCodeBlock .token.prefix.deleted { + padding-left: 4px; + margin-left: -4px; } + .euiCodeBlock .token.prefix.inserted { + box-shadow: -4px 0 #3b7d6a; + color: #3b7d6a; } + .euiCodeBlock .token.prefix.deleted { + box-shadow: -4px 0 #BD271E; + color: #BD271E; } + .euiCodeBlock .token.selector .token.class { + color: inherit; } + .euiCodeBlock .token.selector .token.id { + color: inherit; } + .euiCodeBlock .token.italic { + font-style: italic; } + .euiCodeBlock .token.important, + .euiCodeBlock .token.bold { + font-weight: 700; } + .euiCodeBlock .token.url-reference, + .euiCodeBlock .token.url .token.url { + text-decoration: underline; } + .euiCodeBlock .token.entity { + cursor: help; } + +.euiCodeEditorWrapper { + position: relative; } + .euiCodeEditorWrapper .ace_hidden-cursors { + opacity: 0; } + .euiCodeEditorWrapper.euiCodeEditorWrapper-isEditing .ace_hidden-cursors { + opacity: 1; } + +.euiCodeEditorKeyboardHint { + position: absolute; + top: 0; + left: 0; + background: rgba(255, 255, 255, 0.7); + 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; + opacity: 0; + cursor: pointer; + height: 100%; + width: 100%; } + .euiCodeEditorKeyboardHint:focus { + opacity: 1; + border: 2px solid #07C; + z-index: 1000; } + .euiCodeEditorKeyboardHint.euiCodeEditorKeyboardHint-isInactive { + display: none; } + +.euiCollapsibleNav:not([class*='push']) { + z-index: 6000 !important; } + +.euiCollapsibleNavGroup:not(:first-child) { + border-top: 1px solid #D3DAE6; } + +.euiCollapsibleNavGroup .euiAccordion__triggerWrapper { + padding: 16px; } + +.euiCollapsibleNavGroup--light { + background-color: #fafbfd; } + +.euiCollapsibleNavGroup--dark { + background-color: #2a2c34; + color: #FFF; } + .euiCollapsibleNavGroup--dark .euiCollapsibleNavGroup__heading:focus .euiAccordion__iconWrapper { + color: #0d7ecf; + -webkit-animation-name: euiCollapsibleNavGroupDarkFocusRingAnimate !important; + animation-name: euiCollapsibleNavGroupDarkFocusRingAnimate !important; } + .euiCollapsibleNavGroup--dark .euiCollapsibleNavGroup__title { + color: inherit; + line-height: inherit; } + +.euiCollapsibleNavGroup__heading { + font-weight: 600; } + .euiCollapsibleNavGroup__heading:not(.euiAccordion__button) { + padding: 16px; } + +.euiCollapsibleNavGroup__children { + padding: 8px; } + +.euiCollapsibleNavGroup--withHeading .euiCollapsibleNavGroup__children { + padding-top: 0; } + +@-webkit-keyframes euiCollapsibleNavGroupDarkFocusRingAnimate { + 0% { + box-shadow: 0 0 0 2px rgba(0, 119, 204, 0); } + 100% { + box-shadow: 0 0 0 2px #0d7ecf; } } + +@keyframes euiCollapsibleNavGroupDarkFocusRingAnimate { + 0% { + box-shadow: 0 0 0 2px rgba(0, 119, 204, 0); } + 100% { + box-shadow: 0 0 0 2px #0d7ecf; } } + +.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; } + +.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: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 #c9cbcd; + 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; + cursor: pointer; + border-color: #69707D; + padding: 0; + height: 16px; + width: 16px; } + .euiHue__range::-moz-range-thumb { + padding: 7px; + border: 1px solid #c9cbcd; + 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; + cursor: pointer; + border-color: #69707D; + padding: 0; + height: 16px; + width: 16px; } + .euiHue__range::-ms-thumb { + padding: 7px; + border: 1px solid #c9cbcd; + 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; + cursor: pointer; + border-color: #69707D; + padding: 0; + height: 16px; + width: 16px; } + .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::-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, white, rgba(255, 255, 255, 0)); } + .euiSaturation .euiSaturation__saturation { + background: linear-gradient(to top, black, 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 .euiSaturation__indicator { + outline: 2px solid currentColor; } + .euiSaturation:focus .euiSaturation__indicator:focus-visible { + outline-style: auto; } + .euiSaturation:focus .euiSaturation__indicator:not(:focus-visible) { + outline: none; } + +.euiColorStops:not(.euiColorStops-isDisabled):focus { + outline: 2px solid #0071c2; } + +.euiColorStops__addContainer { + display: block; + position: absolute; + left: 0; + right: 0; + top: 50%; + height: 16px; + margin-top: -8px; } + .euiColorStops__addContainer:hover:not(.euiColorStops__addContainer-isDisabled) { + cursor: pointer; } + .euiColorStops__addContainer:hover:not(.euiColorStops__addContainer-isDisabled) .euiColorStops__addTarget { + opacity: .7; } + +.euiColorStops__addTarget { + padding: 7px; + border: 1px solid #c9cbcd; + background: #FFF no-repeat center; + border-radius: 14px; + transition: background-color 150ms ease-in, border-color 150ms ease-in; + cursor: pointer; + border-color: #69707D; + padding: 0; + height: 16px; + width: 16px; + position: absolute; + top: 0; + height: 16px; + width: 16px; + background-color: #F5F7FA; + pointer-events: none; + opacity: 0; + transition: opacity 150ms; } + +.euiColorStop { + width: 152px; } + +.euiColorStopPopover.euiPopover { + position: absolute; + top: 50%; + width: 16px; + height: 16px; + margin-top: -8px; } + +.euiColorStopPopover-hasFocus { + z-index: 1; } + +.euiColorStopPopover__anchor { + position: absolute; + width: 100%; + height: 100%; } + .euiColorStopPopover__anchor:before { + content: ''; + display: block; + position: absolute; + left: 0; + top: 0; + height: 16px; + width: 16px; + border-radius: 16px; + background: #FFF; } + +.euiColorStopThumb.euiRangeThumb:not(:disabled) { + top: 0; + margin-top: 0; + pointer-events: auto; + cursor: -webkit-grab; + cursor: grab; + border: solid 3px #FFF; + box-shadow: 0 0 0 1px #98A2B3, 0 2px 2px -1px rgba(0, 0, 0, 0.2), 0 1px 5px -2px rgba(0, 0, 0, 0.2); } + .euiColorStopThumb.euiRangeThumb:not(:disabled):active { + cursor: -webkit-grabbing; + cursor: grabbing; } + +.euiColorStopPopover-isLoadingPanel { + visibility: hidden !important; } + +.euiColorStops.euiColorStops-isDragging:not(.euiColorStops-isDisabled):not(.euiColorStops-isReadOnly) { + cursor: -webkit-grabbing; + cursor: grabbing; } + +.euiColorStops__highlight { + color: #69707D; } + +.euiColorPalettePicker__itemTitle { + font-size: 12px; + font-size: 0.85714rem; + line-height: 1.14286rem; } + +.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. + */ + /** + * 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, + .euiComboBox .euiFormControlLayout { + height: auto; } + .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, 43, 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", -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; + display: -webkit-flex; + display: flex; + /* 1 */ + outline: none; + padding-right: 40px; + /* 2 */ } + .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; } } + @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { + .euiComboBox .euiComboBox__inputWrap { + line-height: 1em; } } + .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, 43, 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--withIcon { + padding-left: 40px; } + .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__inputWrap.euiComboBox__inputWrap-isClearable { + padding-right: 62px; + /* 2 */ } + .euiComboBox .euiComboBox__inputWrap.euiComboBox__inputWrap-isLoading { + padding-right: 62px; + /* 2 */ } + .euiComboBox .euiComboBox__inputWrap.euiComboBox__inputWrap-isLoading .euiComboBoxPlaceholder { + padding-right: 62px; + /* 2 */ } + .euiComboBox .euiComboBox__inputWrap.euiComboBox__inputWrap-isLoading.euiComboBox__inputWrap-isClearable { + padding-right: 84px; + /* 2 */ } + .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", -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, 43, 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, 43, 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 { + cursor: not-allowed; + color: #98A2B3; + -webkit-text-fill-color: #98A2B3; + background: #eef2f7; + box-shadow: inset 0 0 0 1px rgba(17, 43, 134, 0.1); } + .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--compressed .euiComboBox__inputWrap { + line-height: 32px; + /* 2 */ + padding-top: 0; + padding-bottom: 0; + padding-right: 32px; + /* 2 */ } + .euiComboBox.euiComboBox--compressed .euiComboBox__inputWrap.euiComboBox__inputWrap-isClearable { + padding-right: 54px; + /* 2 */ } + .euiComboBox.euiComboBox--compressed .euiComboBox__inputWrap.euiComboBox__inputWrap-isLoading { + padding-right: 54px; + /* 2 */ } + .euiComboBox.euiComboBox--compressed .euiComboBox__inputWrap.euiComboBox__inputWrap-isLoading .euiComboBoxPlaceholder { + padding-right: 54px; + /* 2 */ } + .euiComboBox.euiComboBox--compressed .euiComboBox__inputWrap.euiComboBox__inputWrap-isLoading.euiComboBox__inputWrap-isClearable { + padding-right: 76px; + /* 2 */ } + .euiComboBox .euiFormControlLayout__prepend, + .euiComboBox .euiFormControlLayout__append { + height: auto !important; } + +.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: 22px; + vertical-align: baseline; } + .euiComboBoxPill, + .euiComboBoxPill + .euiComboBoxPill { + margin: 4px; } + .euiComboBox--compressed .euiComboBoxPill, + .euiComboBox--compressed .euiComboBoxPill + .euiComboBoxPill { + margin: 5px 4px 0 0; } + .euiComboBoxPill--plainText { + font-family: "Inter", -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; + word-wrap: normal !important; + line-height: 24px; + font-size: 14px; + padding: 0; + color: #343741; + vertical-align: middle; + display: inline-block; } + +.euiComboBoxPlaceholder { + max-width: 100%; + overflow: hidden !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; + word-wrap: normal !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.euiPopover__panel-isAttached.euiComboBoxOptionsList--top { + /* 1 */ + box-shadow: 0 0 0.8px rgba(0, 0, 0, 0.06), 0 0 2px rgba(0, 0, 0, 0.04), 0 0 5px rgba(0, 0, 0, 0.04), 0 0 17px rgba(0, 0, 0, 0.03); } + +.euiComboBoxOptionsList__empty { + overflow-wrap: break-word !important; + word-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-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); + border: 6px solid transparent; + background-clip: content-box; } + .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; } + .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; } + .euiComboBoxOption__contentWrapper .euiComboBoxOption__emptyStateText { + -webkit-flex: 1; + flex: 1; + text-align: left; + margin-bottom: 0; } + .euiComboBoxOption__contentWrapper .euiComboBoxOption__enterBadge { + -webkit-align-self: flex-start; + align-self: flex-start; + margin-left: 4px; } + +.euiComboBoxOption__content { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + -webkit-flex: 1; + flex: 1; + text-align: left; } + +/** + * 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; } + +.euiComment { + font-size: 14px; + display: -webkit-flex; + display: flex; + padding-bottom: 16px; + min-height: 56px; } + .euiComment .euiCommentEvent { + -webkit-flex-grow: 1; + flex-grow: 1; } + .euiComment .euiCommentTimeline { + position: relative; + -webkit-flex-grow: 0; + flex-grow: 0; + margin-right: 16px; } + .euiComment .euiCommentTimeline::before { + content: ''; + position: absolute; + left: 20px; + top: 24px; + width: 2px; + background-color: #D3DAE6; + height: calc(100% + 24px); } + +.euiComment:last-of-type .euiCommentTimeline::before { + display: none; } + +.euiComment--update:not(.euiComment--hasBody) { + -webkit-align-items: center; + align-items: center; } + +.euiCommentEvent--regular { + -webkit-flex-grow: 1; + flex-grow: 1; } + .euiCommentEvent--regular.euiCommentEvent--regular--flexGrowZero { + -webkit-flex-grow: 0; + flex-grow: 0; } + .euiCommentEvent--regular.euiCommentEvent--regular--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); } + .euiCommentEvent--regular.euiCommentEvent--regular--hasBorder { + border: 1px solid #D3DAE6; + box-shadow: none; } + .euiCommentEvent--regular.euiCommentEvent--regular--isClickable { + transition: all 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); } + .euiCommentEvent--regular.euiCommentEvent--regular--isClickable:enabled { + display: block; + width: 100%; + text-align: left; } + .euiCommentEvent--regular.euiCommentEvent--regular--isClickable:hover, .euiCommentEvent--regular.euiCommentEvent--regular--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; } + .euiCommentEvent--regular.euiCommentEvent--regular--borderRadiusNone { + border-radius: 0; } + .euiCommentEvent--regular.euiCommentEvent--regular--borderRadiusMedium { + border-radius: 4px; } + .euiCommentEvent--regular.euiCommentEvent--regular--transparent { + background-color: transparent; } + .euiCommentEvent--regular.euiCommentEvent--regular--plain { + background-color: #FFF; } + .euiCommentEvent--regular.euiCommentEvent--regular--subdued { + background-color: #fafbfd; } + .euiCommentEvent--regular.euiCommentEvent--regular--accent { + background-color: #feedf5; } + .euiCommentEvent--regular.euiCommentEvent--regular--primary { + background-color: #e6f1fa; } + .euiCommentEvent--regular.euiCommentEvent--regular--success { + background-color: #e6f9f7; } + .euiCommentEvent--regular.euiCommentEvent--regular--warning { + background-color: #fff9e8; } + .euiCommentEvent--regular.euiCommentEvent--regular--danger { + background-color: #f8e9e9; } + +.euiCommentEvent { + overflow: hidden; } + +.euiCommentEvent__header { + line-height: 1.5; + display: -webkit-flex; + display: flex; + -webkit-align-items: center; + align-items: center; } + +.euiCommentEvent__headerData { + -webkit-align-items: center; + align-items: center; + display: -webkit-flex; + display: flex; + -webkit-flex-wrap: wrap; + flex-wrap: wrap; } + .euiCommentEvent__headerData > div { + padding-right: 4px; } + +.euiCommentEvent__headerUsername { + font-weight: 600; } + +.euiCommentEvent--regular { + box-shadow: 0 0.8px 0.8px rgba(0, 0, 0, 0.04), 0 2.3px 2px rgba(0, 0, 0, 0.03); + border-radius: 6px; + border: 1px solid #D3DAE6; } + .euiCommentEvent--regular .euiCommentEvent__header { + min-height: 40px; + background-color: #F5F7FA; + border-bottom: 1px solid #D3DAE6; + padding: 4px 8px; + /** + * Fix for IE when using align-items:center in an item that has min-height + (https://github.com/philipwalton/flexbugs/issues/231#issuecomment-362790042) + */ } + @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { + .euiCommentEvent--regular .euiCommentEvent__header::after { + content: ''; + min-height: 32px; + font-size: 0; + display: block; } } + .euiCommentEvent--regular .euiCommentEvent__headerData { + -webkit-flex-grow: 1; + flex-grow: 1; } + .euiCommentEvent--regular .euiCommentEvent__body { + padding: 8px; } + +.euiCommentEvent--update .euiCommentEvent__header { + -webkit-justify-content: flex-start; + justify-content: flex-start; + padding: 4px 0; } + +.euiCommentEvent--update .euiCommentEvent__headerData { + padding-right: 8px; } + +.euiCommentEvent--update .euiCommentEvent__body { + padding-top: 4px; } + +.euiCommentTimeline__content { + min-width: 40px; + display: -webkit-flex; + display: flex; + -webkit-justify-content: center; + justify-content: center; + -webkit-align-items: center; + align-items: center; + position: relative; } + +.euiCommentTimeline__icon--default { + -webkit-flex-shrink: 0; + flex-shrink: 0; + display: -webkit-flex; + display: flex; + -webkit-justify-content: center; + justify-content: center; + -webkit-align-items: center; + align-items: center; + overflow-x: hidden; + border-radius: 50%; + background-color: #F5F7FA; } + .euiCommentTimeline__icon--default.euiCommentTimeline__icon--regular { + width: 40px; + height: 40px; } + .euiCommentTimeline__icon--default.euiCommentTimeline__icon--update { + width: 24px; + height: 24px; } + +.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.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 { + color: #1a1c21; + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + font-weight: 700; + padding: 12px; + border-bottom: 1px solid #D3DAE6; + padding: 12px; + width: 100%; + text-align: left; + outline-offset: -2px; } + .euiContextMenuPanelTitle:enabled:hover, .euiContextMenuPanelTitle:enabled:focus { + text-decoration: underline; } + .euiContextMenuPanelTitle--small { + color: #1a1c21; + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + font-weight: 700; + padding: 12px; + border-bottom: 1px solid #D3DAE6; + 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.71429rem; } + +.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-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); + border: 6px solid transparent; + background-clip: content-box; } + .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(.euiBreadcrumb--last) { + color: #9ca0aa; } + +.euiControlBar__breadcrumbs .euiBreadcrumbSeparator { + 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; + word-wrap: normal !important; + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + 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; + word-wrap: normal !important; + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + 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--primary:enabled { + box-shadow: none; } + +.euiControlBar__controls .euiControlBar__button.euiButton--primary:enabled:not(.euiButton--fill) { + color: #5eaadf; + border-color: #5eaadf; } + +.euiControlBar__controls .euiButtonIcon--primary { + color: #5eaadf; } + +.euiControlBar__controls .euiLink.euiLink--secondary { + color: #00BFB3; } + .euiControlBar__controls .euiLink.euiLink--secondary:hover { + color: #4dd2ca; } + +.euiControlBar__controls .euiLink.euiLink--text { + color: #FFF; } + +.euiControlBar__controls .euiControlBar__button.euiButton--secondary:enabled { + box-shadow: none; } + +.euiControlBar__controls .euiControlBar__button.euiButton--secondary:enabled:not(.euiButton--fill) { + color: #00BFB3; + border-color: #00BFB3; } + +.euiControlBar__controls .euiButtonIcon--secondary { + 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--warning:enabled { + box-shadow: none; } + +.euiControlBar__controls .euiControlBar__button.euiButton--warning:enabled:not(.euiButton--fill) { + color: #FEC514; + border-color: #FEC514; } + +.euiControlBar__controls .euiButtonIcon--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--danger:enabled { + box-shadow: none; } + +.euiControlBar__controls .euiControlBar__button.euiButton--danger:enabled:not(.euiButton--fill) { + color: #db8a85; + border-color: #db8a85; } + +.euiControlBar__controls .euiButtonIcon--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--ghost:enabled { + box-shadow: none; } + +.euiControlBar__controls .euiControlBar__button.euiButton--ghost:enabled:not(.euiButton--fill) { + color: #FFF; + border-color: #FFF; } + +.euiControlBar__controls .euiButtonIcon--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--text:enabled { + box-shadow: none; } + +.euiControlBar__controls .euiControlBar__button.euiButton--text:enabled:not(.euiButton--fill) { + color: #9ca0aa; + border-color: #9ca0aa; } + +.euiControlBar__controls .euiButtonIcon--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; } } + +/* This file is a heavy retheme of react-datepicker's Sass as of v1.4.0 +** https://github.com/Hacker0x01/react-datepicker +** +** In places where features were disabled, I've commented out the original Sass +** selectors rather than removing it so we can better understand what's changed. +** Commented out selectors that don't have properties indicate that we are not +** using those dom elements for styling of any kind. For example, react-datepicker +** has lots of pointer arrows attached to its popovers, but we choose not to render +** then in any way. +** +** Similarly, you will also find several times where we use display: none to +** completely remove extraneous UI (they had some overly obvious legends for example). +*/ +.euiDatePicker .euiFormControlLayout { + height: auto; } + +.euiDatePicker.euiDatePicker--shadow .react-datepicker-popper { + 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: 1px solid #D3DAE6; + background-color: #FFF; + border-radius: 0 0 6px 6px; } + +.euiDatePicker.euiDatePicker--shadow.euiDatePicker--inline .react-datepicker { + 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: 1px solid #D3DAE6; + background-color: #FFF; + border-radius: 6px; } + +.react-datepicker { + font-family: "Inter", -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: 12px; + color: #000; + display: -webkit-flex; + display: flex; + position: relative; + border-radius: 6px; } + +.react-datepicker--time-only .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box { + width: 100%; } + .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box .react-datepicker__time-list li.react-datepicker__time-list-item { + font-size: 14px; + text-align: left; + padding-left: 36px; + padding-right: 36px; + color: #343741; } + .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box .react-datepicker__time-list li.react-datepicker__time-list-item.react-datepicker__time-list-item--selected { + color: #FFF; } + .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box .react-datepicker__time-list li.react-datepicker__time-list-item.react-datepicker__time-list-item--disabled { + color: #ABB4C4; } + +.react-datepicker--time-only .react-datepicker__time-container { + border-left: 0; } + +.euiDatePicker.euiDatePicker--shadow .react-datepicker-popper { + z-index: 2000; + -webkit-animation: euiAnimFadeIn 150ms ease-in; + animation: euiAnimFadeIn 150ms ease-in; } + .euiDatePicker.euiDatePicker--shadow .react-datepicker-popper[data-placement^="top"] { + box-shadow: 0 0 0.8px rgba(0, 0, 0, 0.06), 0 0 2px rgba(0, 0, 0, 0.04), 0 0 5px rgba(0, 0, 0, 0.04), 0 0 17px rgba(0, 0, 0, 0.03); + border-radius: 6px 6px 0 0; } + .euiDatePicker.euiDatePicker--shadow .react-datepicker-popper[data-placement^="right"] { + margin-left: 0; } + .euiDatePicker.euiDatePicker--shadow .react-datepicker-popper[data-placement^="left"] { + margin-right: 0; } + +.react-datepicker__header { + text-align: center; + border-top-left-radius: 6px; + border-top-right-radius: 6px; } + .react-datepicker__header--time { + display: none; } + +.react-datepicker__header__dropdown { + padding: 16px 0 8px 0; } + +.react-datepicker__year-dropdown-container--select, +.react-datepicker__month-dropdown-container--select, +.react-datepicker__month-year-dropdown-container--select, +.react-datepicker__year-dropdown-container--scroll, +.react-datepicker__month-dropdown-container--scroll, +.react-datepicker__month-year-dropdown-container--scroll { + display: inline-block; + margin: 0 4px; } + +.react-datepicker__current-month, +.react-datepicker-time__header { + display: none; } + +.react-datepicker-time__header { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; } + +.react-datepicker__navigation { + cursor: pointer; + position: absolute; + top: 18px; + width: 0; + padding: 0; + z-index: 1; + text-indent: -999em; + overflow: hidden; } + .react-datepicker__navigation--previous { + background-position: center; + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+ICA8ZGVmcz4gICAgPHBhdGggaWQ9ImFycm93X2Rvd24tYSIgZD0iTTEzLjA2ODg1MDgsNS4xNTcyNTAzOCBMOC4zODQyMzk3NSw5Ljc2ODI3NDI4IEM4LjE3MDU0NDE1LDkuOTc4NjEzMDggNy44Mjk5OTIxNCw5Ljk3OTE0MDk1IDcuNjE1NzYwMjUsOS43NjgyNzQyOCBMMi45MzExNDkxNSw1LjE1NzI1MDM4IEMyLjcxODEzNTksNC45NDc1ODMyMSAyLjM3Mjc3MzE5LDQuOTQ3NTgzMjEgMi4xNTk3NTk5NCw1LjE1NzI1MDM4IEMxLjk0Njc0NjY5LDUuMzY2OTE3NTYgMS45NDY3NDY2OSw1LjcwNjg1NTIyIDIuMTU5NzU5OTQsNS45MTY1MjI0IEw2Ljg0NDM3MTA0LDEwLjUyNzU0NjMgQzcuNDg1MTc0MjQsMTEuMTU4MjgzNiA4LjUxNjQ0OTc5LDExLjE1NjY4NTEgOS4xNTU2Mjg5NiwxMC41Mjc1NDYzIEwxMy44NDAyNDAxLDUuOTE2NTIyNCBDMTQuMDUzMjUzMyw1LjcwNjg1NTIyIDE0LjA1MzI1MzMsNS4zNjY5MTc1NiAxMy44NDAyNDAxLDUuMTU3MjUwMzggQzEzLjYyNzIyNjgsNC45NDc1ODMyMSAxMy4yODE4NjQxLDQuOTQ3NTgzMjEgMTMuMDY4ODUwOCw1LjE1NzI1MDM4IFoiLz4gIDwvZGVmcz4gIDxnIGZpbGwtcnVsZT0iZXZlbm9kZCI+ICAgIDx1c2UgZmlsbC1ydWxlPSJub256ZXJvIiB4bGluazpocmVmPSIjYXJyb3dfZG93bi1hIi8+ICA8L2c+PC9zdmc+); + left: 20px; + height: 16px; + width: 16px; + -webkit-transform: rotate(90deg); + transform: rotate(90deg); + 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__navigation--previous:hover, .react-datepicker__navigation--previous:focus { + border-radius: 6px; + -webkit-transform: scale(1.2) rotate(90deg); + transform: scale(1.2) rotate(90deg); } + .react-datepicker__navigation--previous:hover { + background-color: #F5F7FA; + box-shadow: 0 0 0 2px #F5F7FA; } + .react-datepicker__navigation--previous:focus { + background-color: rgba(0, 119, 204, 0.1); + box-shadow: 0 0 0 2px rgba(0, 119, 204, 0.1); } + .react-datepicker__navigation--previous--disabled, .react-datepicker__navigation--previous--disabled:hover { + cursor: not-allowed; + opacity: .2; } + .react-datepicker__navigation--next { + background-position: center; + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+ICA8ZGVmcz4gICAgPHBhdGggaWQ9ImFycm93X2Rvd24tYSIgZD0iTTEzLjA2ODg1MDgsNS4xNTcyNTAzOCBMOC4zODQyMzk3NSw5Ljc2ODI3NDI4IEM4LjE3MDU0NDE1LDkuOTc4NjEzMDggNy44Mjk5OTIxNCw5Ljk3OTE0MDk1IDcuNjE1NzYwMjUsOS43NjgyNzQyOCBMMi45MzExNDkxNSw1LjE1NzI1MDM4IEMyLjcxODEzNTksNC45NDc1ODMyMSAyLjM3Mjc3MzE5LDQuOTQ3NTgzMjEgMi4xNTk3NTk5NCw1LjE1NzI1MDM4IEMxLjk0Njc0NjY5LDUuMzY2OTE3NTYgMS45NDY3NDY2OSw1LjcwNjg1NTIyIDIuMTU5NzU5OTQsNS45MTY1MjI0IEw2Ljg0NDM3MTA0LDEwLjUyNzU0NjMgQzcuNDg1MTc0MjQsMTEuMTU4MjgzNiA4LjUxNjQ0OTc5LDExLjE1NjY4NTEgOS4xNTU2Mjg5NiwxMC41Mjc1NDYzIEwxMy44NDAyNDAxLDUuOTE2NTIyNCBDMTQuMDUzMjUzMyw1LjcwNjg1NTIyIDE0LjA1MzI1MzMsNS4zNjY5MTc1NiAxMy44NDAyNDAxLDUuMTU3MjUwMzggQzEzLjYyNzIyNjgsNC45NDc1ODMyMSAxMy4yODE4NjQxLDQuOTQ3NTgzMjEgMTMuMDY4ODUwOCw1LjE1NzI1MDM4IFoiLz4gIDwvZGVmcz4gIDxnIGZpbGwtcnVsZT0iZXZlbm9kZCI+ICAgIDx1c2UgZmlsbC1ydWxlPSJub256ZXJvIiB4bGluazpocmVmPSIjYXJyb3dfZG93bi1hIi8+ICA8L2c+PC9zdmc+); + right: 20px; + height: 16px; + width: 16px; + -webkit-transform: rotate(-90deg); + transform: rotate(-90deg); } + .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) { + left: 248px; } + .react-datepicker__navigation--next:hover, .react-datepicker__navigation--next:focus { + border-radius: 6px; + -webkit-transform: scale(1.2) rotate(-90deg); + transform: scale(1.2) rotate(-90deg); } + .react-datepicker__navigation--next:hover { + background-color: #F5F7FA; + box-shadow: 0 0 0 2px #F5F7FA; } + .react-datepicker__navigation--next:focus { + background-color: rgba(0, 119, 204, 0.1); + box-shadow: 0 0 0 2px rgba(0, 119, 204, 0.1); } + .react-datepicker__navigation--next--disabled, .react-datepicker__navigation--next--disabled:hover { + cursor: not-allowed; + opacity: .2; } + .react-datepicker__navigation--years { + position: relative; + top: 0; + display: block; + margin-left: auto; + margin-right: auto; } + .react-datepicker__navigation--years-previous { + top: 4px; + border-top-color: #F5F7FA; } + .react-datepicker__navigation--years-previous:hover { + border-top-color: #d3dce9; } + .react-datepicker__navigation--years-upcoming { + top: -4px; + border-bottom-color: #F5F7FA; } + .react-datepicker__navigation--years-upcoming:hover { + border-bottom-color: #d3dce9; } + +.react-datepicker__month { + margin: 0 16px 16px 16px; + text-align: center; + border-radius: 6px; } + +.react-datepicker__time-container { + border-left: #D3DAE6; + width: auto; + display: -webkit-flex; + display: flex; + padding: 16px 0; + border-radius: 0 6px 6px 0; + -webkit-flex-grow: 1; + flex-grow: 1; } + .react-datepicker__time-container .react-datepicker__time { + position: relative; + -webkit-flex-grow: 1; + flex-grow: 1; + display: -webkit-flex; + display: flex; + padding-left: 4px; + -webkit-flex-direction: column; + flex-direction: column; } + .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box { + width: auto; + display: -webkit-flex; + display: flex; + -webkit-flex-direction: column; + flex-direction: column; + -webkit-flex-grow: 1; + flex-grow: 1; } + .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list { + scrollbar-width: thin; + height: 204px !important; + display: -webkit-flex; + display: flex; + -webkit-flex-direction: column; + flex-direction: column; + -webkit-flex-grow: 1; + flex-grow: 1; + overflow-y: auto; + -webkit-align-items: center; + align-items: center; } + .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list::-webkit-scrollbar { + width: 16px; + height: 16px; } + .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list::-webkit-scrollbar-thumb { + background-color: rgba(105, 112, 125, 0.5); + border: 6px solid transparent; + background-clip: content-box; } + .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list::-webkit-scrollbar-corner, .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list::-webkit-scrollbar-track { + background-color: transparent; } + .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item { + padding: 4px 8px; + margin-bottom: 4px; + text-align: right; + color: #69707D; + white-space: nowrap; + line-height: 12px; } + .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover, .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:focus { + cursor: pointer; + text-decoration: underline; } + .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected { + background-color: #07C; + color: white; + border-radius: 3px; } + .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover { + background-color: #07C; } + .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled { + color: #D3DAE6; } + .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover { + cursor: not-allowed; + text-decoration: none; + background-color: transparent; } + +.react-datepicker__week-number { + color: #F5F7FA; + display: inline-block; + width: 32px; + line-height: 28px; + text-align: center; + margin: 0 4px; } + .react-datepicker__week-number.react-datepicker__week-number--clickable { + cursor: pointer; } + .react-datepicker__week-number.react-datepicker__week-number--clickable:hover { + border-radius: 6px; + background-color: #FFF; } + +.react-datepicker__day-names, +.react-datepicker__week { + white-space: nowrap; } + +.react-datepicker__day-name, +.react-datepicker__day, +.react-datepicker__time-name { + color: #000; + display: inline-block; + width: 32px; + line-height: 28px; + text-align: center; + margin: 0 2px; } + +.react-datepicker__day-name { + color: #69707D; + text-transform: uppercase; } + +.react-datepicker__day { + cursor: pointer; + border: solid 2px transparent; + 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:not(.react-datepicker__day--disabled) { + text-decoration: underline; + font-weight: 700; + -webkit-transform: scale(1.2); + transform: scale(1.2); } + .react-datepicker__day--today { + font-weight: bold; + color: #07C; } + .react-datepicker__day--outside-month { + color: #69707D; } + .react-datepicker__day--highlighted { + border-radius: 6px; + background-color: #00BFB3; + color: #FFF; } + .react-datepicker__day--highlighted:hover { + background-color: #00a69b; } + .react-datepicker__day--in-range { + background-color: rgba(0, 119, 204, 0.1); + color: #000; + border-radius: 0; + border-top: solid 6px #FFF; + border-bottom: solid 6px #FFF; + border-right: none; + border-left: none; + line-height: 20px; } + .react-datepicker__day--selected, .react-datepicker__day--in-selecting-range { + height: 32px; + margin: 0 2px; + border-radius: 6px; + background-color: #07C; + line-height: 28px; + border: solid 2px #07C; + color: #FFF; } + .react-datepicker__day--selected:hover, .react-datepicker__day--in-selecting-range:hover { + background-color: #0068b3; } + .react-datepicker__day--keyboard-selected { + border-radius: 6px; + border: solid 2px #07C; + font-weight: 700; } + .react-datepicker__day--keyboard-selected:hover { + background-color: #0068b3; + color: #FFF; } + .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range) { + background-color: rgba(0, 119, 204, 0.5); } + .react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range) { + background-color: #FFF; + color: #000; } + .react-datepicker__day--disabled { + cursor: not-allowed; + color: #D3DAE6; } + .react-datepicker__day--disabled:hover { + background-color: transparent; } + +.react-datepicker__input-container { + position: relative; } + +.react-datepicker__year-read-view { + font-weight: 300; + color: #69707D; } + +.react-datepicker__month-read-view { + font-weight: 500; } + +.react-datepicker__year-read-view, +.react-datepicker__month-read-view, +.react-datepicker__month-year-read-view { + font-size: 22px; } + .react-datepicker__year-read-view:hover, + .react-datepicker__month-read-view:hover, + .react-datepicker__month-year-read-view:hover { + cursor: pointer; + color: #07C; } + .react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow, + .react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow, + .react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow, + .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow, + .react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow, + .react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow { + border-top-color: #d3dce9; } + .react-datepicker__year-read-view--down-arrow, + .react-datepicker__month-read-view--down-arrow, + .react-datepicker__month-year-read-view--down-arrow { + display: none; } + +.react-datepicker__year-dropdown, +.react-datepicker__month-dropdown, +.react-datepicker__month-year-dropdown { + background-color: #FFF; + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + bottom: 0; + right: 0; + z-index: 1; + text-align: center; + border-radius: 6px; + display: -webkit-flex; + display: flex; + -webkit-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-animation: euiAnimFadeIn 150ms ease-in; + animation: euiAnimFadeIn 150ms ease-in; + -webkit-align-content: space-around; + align-content: space-around; + -webkit-align-items: center; + align-items: center; + padding: 8px; } + .react-datepicker__year-dropdown:hover, + .react-datepicker__month-dropdown:hover, + .react-datepicker__month-year-dropdown:hover { + cursor: pointer; } + +.react-datepicker__year-dropdown { + -webkit-flex-wrap: wrap-reverse; + flex-wrap: wrap-reverse; + -webkit-flex-direction: row-reverse; + flex-direction: row-reverse; + -webkit-justify-content: flex-end; + justify-content: flex-end; } + +.react-datepicker__year-option:first-of-type, .react-datepicker__year-option:last-of-type { + display: none; } + +.react-datepicker__year-option, +.react-datepicker__month-option, +.react-datepicker__month-year-option { + font-size: 12px; + padding: 8px; + color: #343741; + -webkit-flex-basis: 33.3%; + flex-basis: 33.3%; } + .react-datepicker__year-option:first-of-type, + .react-datepicker__month-option:first-of-type, + .react-datepicker__month-year-option:first-of-type { + border-top-left-radius: 6px; + border-top-right-radius: 6px; } + .react-datepicker__year-option:last-of-type, + .react-datepicker__month-option:last-of-type, + .react-datepicker__month-year-option:last-of-type { + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; } + .react-datepicker__year-option:hover, + .react-datepicker__month-option:hover, + .react-datepicker__month-year-option:hover { + background-color: #F5F7FA; } + .react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming, + .react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming, + .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming { + border-bottom-color: #d3dce9; } + .react-datepicker__year-option:hover .react-datepicker__navigation--years-previous, + .react-datepicker__month-option:hover .react-datepicker__navigation--years-previous, + .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous { + border-top-color: #d3dce9; } + .react-datepicker__year-option--selected, + .react-datepicker__month-option--selected, + .react-datepicker__month-year-option--selected { + display: none; } + +.react-datepicker__screenReaderOnly { + position: absolute; + left: -10000px; + top: auto; + width: 1px; + height: 1px; + overflow: hidden; } + +.react-datepicker__year-option--preselected, +.react-datepicker__month-option--preselected { + background: rgba(0, 119, 204, 0.1); } + +.react-datepicker__year-option--selected_year.react-datepicker__year-option--preselected, +.react-datepicker__month-option--selected_month.react-datepicker__month-option--preselected { + background: #07C; } + +.react-datepicker__time-list-item--preselected, +.react-datepicker__year-option--preselected, +.react-datepicker__month-option--preselected { + background: rgba(0, 104, 179, 0.1); } + +.react-datepicker__time-container--focus { + background: rgba(0, 119, 204, 0.1); } + +.react-datepicker__month-read-view:focus, +.react-datepicker__year-read-view:focus { + text-decoration: underline; } + +.react-datepicker__month--accessible:focus { + background: rgba(0, 119, 204, 0.1); } + .react-datepicker__month--accessible:focus .react-datepicker__day--in-range:not(.react-datepicker__day--selected) { + border-top-color: rgba(0, 119, 204, 0.1); + border-bottom-color: rgba(0, 119, 204, 0.1); } + +.react-datepicker__navigation:focus { + background-color: rgba(0, 119, 204, 0.1); } + +.react-datepicker__year-option--selected_year, +.react-datepicker__month-option--selected_month { + background: #07C; + color: #FFF; + font-weight: 700; + border-radius: 6px; } + +.react-datepicker__focusTrap { + display: -webkit-flex; + display: flex; } + +/** + * 1. Account for inner box-shadow style border + */ +.euiDatePickerRange { + max-width: 400px; + width: 100%; + height: auto; + background-color: #fbfcfd; + background-repeat: no-repeat; + background-size: 0% 100%; + box-shadow: 0 0 transparent, inset 0 0 0 1px rgba(17, 43, 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: center; + align-items: center; + padding: 1px; + /* 1 */ } + .euiDatePickerRange--fullWidth { + max-width: 100%; } + .euiDatePickerRange--compressed { + height: 32px; } + .euiDatePickerRange--inGroup { + height: 100%; } + @supports (-moz-appearance: none) { + .euiDatePickerRange { + transition-property: box-shadow, background-image, background-size; } } + .euiDatePickerRange > * { + -webkit-flex-grow: 1; + flex-grow: 1; } + .euiDatePickerRange .euiFieldText.euiDatePicker { + box-shadow: none !important; + text-align: center; } + .euiDatePickerRange .react-datepicker-popper .euiFieldText.euiDatePicker { + text-align: left; } + .euiDatePickerRange--inGroup { + box-shadow: none; + padding: 0; } + .euiDatePickerRange--inGroup .euiDatePicker { + height: 38px; } + .euiDatePickerRange > .euiDatePickerRange__delimeter { + background-color: transparent !important; + line-height: 1 !important; + -webkit-flex: 0 0 auto; + flex: 0 0 auto; + padding-left: 6px; + padding-right: 6px; } + +.euiDatePickerRange--readOnly { + background: #eef2f7; } + +.euiSuperDatePicker__absoluteDateFormRow { + padding: 0 8px 8px; } + +.euiDatePopoverButton { + font-family: "Inter", -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%; } + @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { + .euiDatePopoverButton { + line-height: 1em; } } + .euiDatePopoverButton::-webkit-input-placeholder { + color: #69707D; + opacity: 1; } + .euiDatePopoverButton::-moz-placeholder { + color: #69707D; + opacity: 1; } + .euiDatePopoverButton::placeholder { + color: #69707D; + opacity: 1; } + .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-color: #f8e9e9; + 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; + color: #69707D; + cursor: default; } + +.euiDatePopoverButton--start { + text-align: right; } + +.euiDatePopoverButton--end { + text-align: left; } + +.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; } } + +@media only screen and (min-width: 575px) and (max-width: 767px) { + .euiDatePopoverContent { + width: 284px; } } + +.euiQuickSelectPopover__content { + width: 400px; + max-width: 100%; } + +.euiQuickSelectPopover__section { + scrollbar-width: thin; + max-height: 132px; + overflow: hidden; + overflow-y: auto; + padding: 8px 0 4px; } + .euiQuickSelectPopover__section::-webkit-scrollbar { + width: 16px; + height: 16px; } + .euiQuickSelectPopover__section::-webkit-scrollbar-thumb { + background-color: rgba(105, 112, 125, 0.5); + border: 6px solid transparent; + background-clip: content-box; } + .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:not(:last-of-type) { + margin-bottom: 8px; } + +.euiQuickSelect__applyButton { + min-width: 0; } + +.euiRefreshInterval__startButton { + min-width: 90px; } + +.euiSuperDatePicker__flexWrapper { + max-width: calc(100% + 8px); + width: 606px; } + +.euiSuperDatePicker__flexWrapper--isAutoRefreshOnly { + width: 400px; } + +.euiSuperDatePicker__flexWrapper--noUpdateButton { + width: 480px; } + +.euiSuperDatePicker { + max-width: 100% !important; } + .euiSuperDatePicker > .euiFormControlLayout__childrenWrapper { + -webkit-flex: 1 1 100%; + flex: 1 1 100%; + overflow: hidden; } + .euiSuperDatePicker > .euiFormControlLayout__childrenWrapper > .euiDatePickerRange { + max-width: none; + width: auto; + border-radius: 0 6px 6px 0; } + +.euiSuperDatePicker__startPopoverButton { + margin-right: -12px; } + +.euiSuperDatePicker__prettyFormat { + font-family: "Inter", -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; } + @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { + .euiSuperDatePicker__prettyFormat { + line-height: 1em; } } + .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:not(:disabled):hover .euiSuperDatePicker__prettyFormatLink, .euiSuperDatePicker__prettyFormat:focus .euiSuperDatePicker__prettyFormatLink { + text-decoration: underline; } + .euiSuperDatePicker__prettyFormat:disabled { + background-color: #eef2f7; + color: #69707D; + cursor: not-allowed; } + .euiSuperDatePicker__prettyFormat:disabled .euiSuperDatePicker__prettyFormatLink { + display: none; } + +.euiSuperDatePicker__prettyFormatLink { + color: #0071c2; + padding-left: 4px; + -webkit-flex-shrink: 0; + flex-shrink: 0; } + +@media only screen and (max-width: 574px) { + .euiSuperDatePicker__flexWrapper { + width: calc(100% + 8px); } + .euiSuperDatePicker__prettyFormatLink { + -webkit-flex-shrink: 1; + flex-shrink: 1; + min-width: 3em; } } + +@media only screen and (min-width: 575px) and (max-width: 767px) { + .euiSuperDatePicker__flexWrapper { + width: calc(100% + 8px); } + .euiSuperDatePicker__prettyFormatLink { + -webkit-flex-shrink: 1; + flex-shrink: 1; + min-width: 3em; } } + +.euiSuperUpdateButton { + min-width: 118px; } + +@media only screen and (max-width: 574px) { + .euiSuperUpdateButton { + min-width: 0; } + .euiSuperUpdateButton .euiSuperUpdateButton__text { + display: none; } } + +@media only screen and (min-width: 575px) and (max-width: 767px) { + .euiSuperUpdateButton { + min-width: 0; } + .euiSuperUpdateButton .euiSuperUpdateButton__text { + display: none; } } + +.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: 8000; + background: #FFF; } + .euiDataGrid--fullScreen .euiDataGrid__pagination { + padding-bottom: 4px; + background: #F5F7FA; + border-top: 1px solid #D3DAE6; } + .euiDataGrid--fullScreen .euiDataGrid__verticalScroll .euiDataGridRow { + will-change: transform; } + +.euiDataGrid__content { + height: 100%; + font-feature-settings: 'tnum' 1; + max-width: 100%; + width: 100%; + z-index: 2; + background: #FFF; } + +.euiDataGrid__controls { + background: #fafbfd; + position: relative; + z-index: 3; + border: 1px solid #D3DAE6; + padding: 4px; + -webkit-flex-grow: 0; + flex-grow: 0; } + .euiDataGrid__controls > * { + margin-left: 2px; } + +.euiDataGrid__controlBtn { + border-radius: 6px; } + .euiDataGrid__controlBtn:focus { + background: #dddee1; } + +.euiDataGrid__controlBtn--active, +.euiDataGrid__controlBtn--active:focus { + font-weight: 600; + color: #000; } + +.euiDataGrid--bordersNone .euiDataGrid__controls { + border: none; + background: #FFF; } + +.euiDataGrid--bordersHorizontal .euiDataGrid__controls { + border-right: none; + border-left: none; + border-top: none; + background: #FFF; } + +.euiDataGrid__pagination { + padding-top: 4px; + -webkit-flex-grow: 0; + flex-grow: 0; } + +.euiDataGrid__verticalScroll { + -webkit-flex-grow: 1; + flex-grow: 1; + overflow-y: hidden; + height: 100%; } + +.euiDataGrid__overflow { + overflow-y: hidden; + height: 100%; + background: #FFF; } + +.euiDataGrid__restrictBody { + height: 100vh; + overflow: hidden; } + +.euiDataGrid__controlScroll { + 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); + border: 6px solid transparent; + background-clip: content-box; } + .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 */ } + +.euiDataGrid__focusWrap { + height: 100%; } + +.euiDataGrid__virtualized { + 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); + border: 6px solid #FFF; + background-clip: content-box; } + .euiDataGrid__virtualized::-webkit-scrollbar-corner, .euiDataGrid__virtualized::-webkit-scrollbar-track { + background-color: #FFF; } + +.euiDataGridHeader { + display: -webkit-inline-flex; + display: inline-flex; + min-width: 100%; + z-index: 3; + background: #FFF; + position: -webkit-sticky; + position: sticky; + top: 0; } + +.euiDataGridHeaderCell { + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + 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 > * { + max-width: 100%; + width: 100%; } + .euiDataGridHeaderCell.euiDataGridHeaderCell--numeric { + text-align: right; } + .euiDataGridHeaderCell.euiDataGridHeaderCell--currency { + text-align: right; } + .euiDataGridHeaderCell:focus { + border: 1px solid transparent; + box-shadow: 0 0 0 2px #0071c2; + border-radius: 1px; + z-index: 2; + outline: none; + border-top: none; } + .euiDataGridHeaderCell:not(.euiDataGridHeaderCell--controlColumn):focus-within { + border: 1px solid transparent; + box-shadow: 0 0 0 2px #0071c2; + border-radius: 1px; + z-index: 2; + outline: none; + border-top: none; } + .euiDataGridHeaderCell:not(.euiDataGridHeaderCell--controlColumn) .euiDataGridHeaderCell__sortingArrow { + margin-right: 4px; } + .euiDataGridHeaderCell:not(.euiDataGridHeaderCell--controlColumn) .euiDataGridHeaderCell__anchor { + width: 100%; } + .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; + word-wrap: normal !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.85714rem; + line-height: 1.14286rem; } + +.euiDataGrid--fontSizeLarge .euiDataGridHeaderCell { + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; } + +.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; } + +.euiDataGridRowCell.euiDataGridFooterCell { + 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 { + display: -webkit-inline-flex; + display: inline-flex; + min-width: 100%; } + +.euiDataGridRowCell { + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + padding: 6px; + border-right: solid 1px #edf0f5; + border-bottom: 1px solid #D3DAE6; + -webkit-flex: 0 0 auto; + flex: 0 0 auto; + background: #FFF; + position: relative; + -webkit-align-items: center; + align-items: center; + display: -webkit-flex; + display: flex; } + .euiDataGridRowCell > * { + max-width: 100%; + width: 100%; } + .euiDataGridRowCell.euiDataGridRowCell--firstColumn { + border-left: 1px solid #D3DAE6; } + .euiDataGridRowCell.euiDataGridRowCell--lastColumn { + border-right-color: #D3DAE6; } + .euiDataGridRowCell:focus { + border: 1px solid transparent; + box-shadow: 0 0 0 2px #0071c2; + border-radius: 1px; + z-index: 2; + outline: none; + margin-top: -1px; } + .euiDataGridRowCell:hover .euiDataGridRowCell__expandButtonIcon { + -webkit-animation-duration: 90ms; + animation-duration: 90ms; + -webkit-animation-name: euiDataGridCellButtonSlideIn; + animation-name: euiDataGridCellButtonSlideIn; + -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__actionButtonIcon { + -webkit-animation-duration: 90ms; + animation-duration: 90ms; + -webkit-animation-name: euiDataGridCellButtonSlideIn; + animation-name: euiDataGridCellButtonSlideIn; + -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:not(:hover) .euiDataGridRowCell__expandButtonIcon, .euiDataGridRowCell.euiDataGridRowCell--open .euiDataGridRowCell__expandButtonIcon { + -webkit-animation: none; + animation: none; + margin-left: 6px; + width: 12px; } + .euiDataGridRowCell:not(:hover) .euiDataGridRowCell__actionButtonIcon, .euiDataGridRowCell.euiDataGridRowCell--open .euiDataGridRowCell__actionButtonIcon { + -webkit-animation: none; + animation: none; + margin-left: 6px; + width: 12px; } + .euiDataGridRowCell:focus .euiDataGridRowCell__actionButtonIcon { + margin-left: 6px; + width: 12px; } + .euiDataGridRowCell:not(:hover):not(:focus):not(.euiDataGridRowCell--open) .euiDataGridRowCell__expandButtonIcon, + .euiDataGridRowCell:not(:hover):not(:focus):not(.euiDataGridRowCell--open) .euiDataGridRowCell__actionButtonIcon { + display: none; } + .euiDataGridRowCell:focus:not(:first-of-type) { + padding-left: 5px; } + .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: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; + word-wrap: normal !important; + overflow: hidden; + white-space: nowrap; } + +.euiDataGridRowCell__popover { + scrollbar-width: thin; + overflow: auto; + max-width: 400px !important; + max-height: 400px !important; } + .euiDataGridRowCell__popover::-webkit-scrollbar { + width: 16px; + height: 16px; } + .euiDataGridRowCell__popover::-webkit-scrollbar-thumb { + background-color: rgba(105, 112, 125, 0.5); + border: 6px solid transparent; + background-clip: content-box; } + .euiDataGridRowCell__popover::-webkit-scrollbar-corner, .euiDataGridRowCell__popover::-webkit-scrollbar-track { + background-color: transparent; } + +.euiDataGridRowCell__expand { + width: 100%; + max-width: 100%; } + +.euiDataGridRowCell__expandFlex { + display: -webkit-flex; + display: flex; + -webkit-align-items: center; + align-items: center; } + +.euiDataGridRowCell__expandContent { + -webkit-flex-grow: 1; + flex-grow: 1; } + +.euiDataGridRowCell__expandButton { + display: -webkit-flex; + display: flex; + -webkit-flex-grow: 0; + flex-grow: 0; } + +.euiDataGridRowCell__expandButtonIcon { + height: 12px; + border-radius: 3px; + width: 0; + overflow: hidden; + transition: none; + box-shadow: none !important; + border: none; } + .euiDataGridRowCell__expandButtonIcon-isActive { + margin-left: 6px; + width: 12px; } + +.euiDataGridRowCell__actionButtonIcon { + height: 12px; + border-radius: 3px; + width: 0; + overflow: hidden; + transition: none; } + +.euiDataGrid--rowHoverHighlight .euiDataGridRow:hover .euiDataGridRowCell { + background-color: #fff9e8 !important; } + +.euiDataGrid--stripes .euiDataGridRowCell.euiDataGridRowCell--stripe { + background: #F5F7FA; } + +.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.85714rem; + line-height: 1.14286rem; } + +.euiDataGrid--fontSizeLarge .euiDataGridRowCell { + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; } + +.euiDataGrid--paddingSmall .euiDataGridRowCell { + padding: 4px; } + .euiDataGrid--paddingSmall .euiDataGridRowCell:focus:not(:first-of-type) { + padding-left: 3px; } + +.euiDataGrid--paddingLarge .euiDataGridRowCell { + padding: 8px; } + .euiDataGrid--paddingLarge .euiDataGridRowCell:focus:not(:first-of-type) { + padding-left: 7px; } + +@-webkit-keyframes euiDataGridCellButtonSlideIn { + from { + margin-left: 0; + width: 0; } + to { + margin-left: 6px; + width: 12px; } } + +@keyframes euiDataGridCellButtonSlideIn { + from { + margin-left: 0; + width: 0; } + to { + margin-left: 6px; + width: 12px; } } + +.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-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); + border: 6px solid transparent; + background-clip: content-box; } + .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.85714rem; + line-height: 1.14286rem; } + +.euiDataGridColumnSelectorPopover { + -webkit-transform: none !important; + transform: none !important; + transition: none !important; + margin-top: -8px; + min-width: 192px; } + +.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; } + +.euiDataGridColumnSortingPopover { + -webkit-transform: none !important; + transform: none !important; + transition: none !important; + margin-top: -8px; + min-width: 192px; } + +.euiDataGridColumnSorting__fieldList { + 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); + border: 6px solid transparent; + background-clip: content-box; } + .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__orderButtons { + padding-left: 24px; } + .euiDataGridColumnSorting__orderButtons .euiDataGridColumnSorting__order { + min-width: 200px; + border: none; } + .euiDataGridColumnSorting__orderButtons .euiDataGridColumnSorting__order button { + font-size: 12px !important; } + +.euiDescriptionList.euiDescriptionList--row .euiDescriptionList__title { + color: #1a1c21; + font-size: 16px; + font-size: 1.14286rem; + line-height: 1.71429rem; + font-weight: 700; + line-height: 1.5; + margin-top: 16px; } + .euiDescriptionList.euiDescriptionList--row .euiDescriptionList__title:first-of-type { + margin-top: 0; } + +.euiDescriptionList.euiDescriptionList--row .euiDescriptionList__description { + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; } + +.euiDescriptionList.euiDescriptionList--row.euiDescriptionList--center { + text-align: center; } + +.euiDescriptionList.euiDescriptionList--row.euiDescriptionList--reverse .euiDescriptionList__title { + color: #343741; + font-weight: 400; + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; } + +.euiDescriptionList.euiDescriptionList--row.euiDescriptionList--reverse .euiDescriptionList__description { + color: #1a1c21; + font-size: 16px; + font-size: 1.14286rem; + line-height: 1.71429rem; + font-weight: 700; } + +.euiDescriptionList.euiDescriptionList--row.euiDescriptionList--compressed .euiDescriptionList__title { + color: #1a1c21; + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + font-weight: 700; + line-height: 1.5; } + +.euiDescriptionList.euiDescriptionList--row.euiDescriptionList--compressed .euiDescriptionList__description { + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; } + +.euiDescriptionList.euiDescriptionList--row.euiDescriptionList--compressed.euiDescriptionList--reverse .euiDescriptionList__title { + color: #343741; + font-weight: 400; + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; } + +.euiDescriptionList.euiDescriptionList--row.euiDescriptionList--compressed.euiDescriptionList--reverse .euiDescriptionList__description { + color: #1a1c21; + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + font-weight: 700; + line-height: 1.5; } + +.euiDescriptionList.euiDescriptionList--column, .euiDescriptionList.euiDescriptionList--responsiveColumn { + display: -webkit-flex; + display: flex; + -webkit-align-items: stretch; + align-items: stretch; + -webkit-flex-wrap: wrap; + flex-wrap: wrap; } + .euiDescriptionList.euiDescriptionList--column > *, .euiDescriptionList.euiDescriptionList--responsiveColumn > * { + margin-top: 16px; } + .euiDescriptionList.euiDescriptionList--column > *:first-child, + .euiDescriptionList.euiDescriptionList--column > :nth-child(2), .euiDescriptionList.euiDescriptionList--responsiveColumn > *:first-child, + .euiDescriptionList.euiDescriptionList--responsiveColumn > :nth-child(2) { + margin-top: 0; } + .euiDescriptionList.euiDescriptionList--column .euiDescriptionList__title, .euiDescriptionList.euiDescriptionList--responsiveColumn .euiDescriptionList__title { + color: #1a1c21; + font-size: 16px; + font-size: 1.14286rem; + line-height: 1.71429rem; + font-weight: 700; + line-height: 1.5; + width: 50%; + padding-right: 8px; } + .euiDescriptionList.euiDescriptionList--column .euiDescriptionList__description, .euiDescriptionList.euiDescriptionList--responsiveColumn .euiDescriptionList__description { + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + width: 50%; + padding-left: 8px; } + .euiDescriptionList.euiDescriptionList--column.euiDescriptionList--center .euiDescriptionList__title, .euiDescriptionList.euiDescriptionList--responsiveColumn.euiDescriptionList--center .euiDescriptionList__title { + text-align: right; } + .euiDescriptionList.euiDescriptionList--column.euiDescriptionList--reverse .euiDescriptionList__title, .euiDescriptionList.euiDescriptionList--responsiveColumn.euiDescriptionList--reverse .euiDescriptionList__title { + color: #343741; + font-weight: 400; + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; } + .euiDescriptionList.euiDescriptionList--column.euiDescriptionList--reverse .euiDescriptionList__description, .euiDescriptionList.euiDescriptionList--responsiveColumn.euiDescriptionList--reverse .euiDescriptionList__description { + color: #1a1c21; + font-size: 16px; + font-size: 1.14286rem; + line-height: 1.71429rem; + font-weight: 700; + line-height: 1.5; } + .euiDescriptionList.euiDescriptionList--column.euiDescriptionList--compressed .euiDescriptionList__title, .euiDescriptionList.euiDescriptionList--responsiveColumn.euiDescriptionList--compressed .euiDescriptionList__title { + color: #1a1c21; + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + font-weight: 700; + line-height: 1.5; } + .euiDescriptionList.euiDescriptionList--column.euiDescriptionList--compressed .euiDescriptionList__description, .euiDescriptionList.euiDescriptionList--responsiveColumn.euiDescriptionList--compressed .euiDescriptionList__description { + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; } + .euiDescriptionList.euiDescriptionList--column.euiDescriptionList--compressed.euiDescriptionList--reverse .euiDescriptionList__title, .euiDescriptionList.euiDescriptionList--responsiveColumn.euiDescriptionList--compressed.euiDescriptionList--reverse .euiDescriptionList__title { + color: #343741; + font-weight: 400; + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; } + .euiDescriptionList.euiDescriptionList--column.euiDescriptionList--compressed.euiDescriptionList--reverse .euiDescriptionList__description, .euiDescriptionList.euiDescriptionList--responsiveColumn.euiDescriptionList--compressed.euiDescriptionList--reverse .euiDescriptionList__description { + color: #1a1c21; + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + font-weight: 700; + line-height: 1.5; } + +@media only screen and (max-width: 574px) { + .euiDescriptionList.euiDescriptionList--responsiveColumn { + display: block; } + .euiDescriptionList.euiDescriptionList--responsiveColumn .euiDescriptionList__title, + .euiDescriptionList.euiDescriptionList--responsiveColumn .euiDescriptionList__description { + width: 100%; + padding: 0; } + .euiDescriptionList.euiDescriptionList--responsiveColumn .euiDescriptionList__description { + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + margin-top: 0; } + .euiDescriptionList.euiDescriptionList--responsiveColumn.euiDescriptionList--center .euiDescriptionList__title, + .euiDescriptionList.euiDescriptionList--responsiveColumn.euiDescriptionList--center .euiDescriptionList__description { + text-align: center; } + .euiDescriptionList.euiDescriptionList--responsiveColumn.euiDescriptionList--reverse .euiDescriptionList__title { + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; } + .euiDescriptionList.euiDescriptionList--responsiveColumn.euiDescriptionList--reverse .euiDescriptionList__description { + color: #1a1c21; + font-size: 16px; + font-size: 1.14286rem; + line-height: 1.71429rem; + font-weight: 700; } } + +@media only screen and (min-width: 575px) and (max-width: 767px) { + .euiDescriptionList.euiDescriptionList--responsiveColumn { + display: block; } + .euiDescriptionList.euiDescriptionList--responsiveColumn .euiDescriptionList__title, + .euiDescriptionList.euiDescriptionList--responsiveColumn .euiDescriptionList__description { + width: 100%; + padding: 0; } + .euiDescriptionList.euiDescriptionList--responsiveColumn .euiDescriptionList__description { + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + margin-top: 0; } + .euiDescriptionList.euiDescriptionList--responsiveColumn.euiDescriptionList--center .euiDescriptionList__title, + .euiDescriptionList.euiDescriptionList--responsiveColumn.euiDescriptionList--center .euiDescriptionList__description { + text-align: center; } + .euiDescriptionList.euiDescriptionList--responsiveColumn.euiDescriptionList--reverse .euiDescriptionList__title { + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; } + .euiDescriptionList.euiDescriptionList--responsiveColumn.euiDescriptionList--reverse .euiDescriptionList__description { + color: #1a1c21; + font-size: 16px; + font-size: 1.14286rem; + line-height: 1.71429rem; + font-weight: 700; } } + +.euiDescriptionList.euiDescriptionList--inline .euiDescriptionList__title { + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + display: inline; + border-radius: 6px; + font-weight: 400; + background: #F5F7FA; + border: 1px solid #D3DAE6; + padding: 0 4px; + margin: 0 4px; } + .euiDescriptionList.euiDescriptionList--inline .euiDescriptionList__title:first-of-type { + margin-left: 0; } + +.euiDescriptionList.euiDescriptionList--inline .euiDescriptionList__description { + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + display: inline; + word-break: break-all; } + +.euiDescriptionList.euiDescriptionList--inline.euiDescriptionList--compressed .euiDescriptionList__title { + font-size: 12px; + font-size: 0.85714rem; + line-height: 1.14286rem; } + +.euiDescriptionList.euiDescriptionList--inline.euiDescriptionList--compressed .euiDescriptionList__description { + font-size: 12px; + font-size: 0.85714rem; + line-height: 1.14286rem; } + +.euiDescriptionList.euiDescriptionList--inline.euiDescriptionList--center { + text-align: center; } + +.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: .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: 4px; } + .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 { + max-width: 36em; + text-align: center; + padding: 24px; + margin: auto; } + +.euiErrorBoundary { + background: repeating-linear-gradient(45deg, rgba(189, 39, 30, 0.25), rgba(189, 39, 30, 0.25) 1px, rgba(189, 39, 30, 0.05) 1px, rgba(189, 39, 30, 0.05) 20px); + overflow: auto; + padding: 16px; } + +.euiErrorBoundary__text { + background-color: #FFF; + padding: 8px; } + +.euiErrorBoundary__stack { + white-space: pre-wrap; } + +/** + * 1. Keep each expression's text together as much as possible, + * but then wrap long words + */ +.euiExpression { + overflow-wrap: break-word !important; + word-wrap: break-word !important; + word-break: break-word; + /* 1 */ + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + font-family: "Roboto Mono", Consolas, Menlo, Courier, monospace; + letter-spacing: normal; + border-bottom: 2px solid transparent; + display: inline-block; + /* 1 */ + text-align: left; + padding: 2px 0; + transition: all 250ms ease-in-out; + color: #343741; } + .euiExpression:focus { + border-bottom-style: solid; } + .euiExpression + .euiExpression { + margin-left: 8px; } + .euiExpression.euiExpression--columns { + border-color: transparent; + border-bottom-style: solid; + margin-bottom: 4px; } + .euiExpression.euiExpression--truncate { + max-width: 100%; } + .euiExpression.euiExpression--truncate .euiExpression__description, + .euiExpression.euiExpression--truncate .euiExpression__value { + max-width: 100%; + overflow: hidden !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; + word-wrap: normal !important; + display: inline-block; + vertical-align: bottom; } + +.euiExpression-isUppercase .euiExpression__description { + text-transform: uppercase; } + +.euiExpression-isClickable { + cursor: pointer; + border-bottom: 2px dotted #D3DAE6; } + .euiExpression-isClickable:hover:not(:disabled) { + border-bottom-style: solid; + -webkit-transform: translateY(-1px); + transform: translateY(-1px); } + +.euiExpression__icon { + margin-left: 4px; } + +.euiExpression-isActive { + border-bottom-style: solid; } + +.euiExpression--columns { + width: 100%; + display: -webkit-flex; + display: flex; + padding: 4px; + border-radius: 4px; } + .euiExpression--columns.euiExpression-isClickable { + background-color: #F5F7FA; } + .euiExpression--columns.euiExpression-isClickable:focus .euiExpression__description, + .euiExpression--columns.euiExpression-isClickable:focus .euiExpression__value, .euiExpression--columns.euiExpression-isClickable:hover:not(:disabled) .euiExpression__description, + .euiExpression--columns.euiExpression-isClickable:hover:not(:disabled) .euiExpression__value { + text-decoration: underline; } + .euiExpression--columns .euiExpression__description { + text-align: right; + margin-right: 8px; + -webkit-flex-shrink: 0; + flex-shrink: 0; } + .euiExpression--columns .euiExpression__value { + -webkit-flex-grow: 1; + flex-grow: 1; } + .euiExpression--columns .euiExpression__icon { + margin-top: 4px; } + +.euiExpression--subdued:focus { + background-color: rgba(105, 112, 125, 0.1); } + +.euiExpression--subdued.euiExpression-isActive { + border-bottom-color: #69707D; + border-color: #69707D; } + +.euiExpression--subdued .euiExpression__description { + color: #69707D; } + +.euiExpression--primary:focus { + background-color: rgba(0, 113, 194, 0.1); } + +.euiExpression--primary.euiExpression-isActive { + border-bottom-color: #0071c2; + border-color: #0071c2; } + +.euiExpression--primary .euiExpression__description { + color: #0071c2; } + +.euiExpression--secondary:focus { + background-color: rgba(0, 126, 119, 0.1); } + +.euiExpression--secondary.euiExpression-isActive { + border-bottom-color: #007e77; + border-color: #007e77; } + +.euiExpression--secondary .euiExpression__description { + color: #007e77; } + +.euiExpression--warning:focus { + background-color: rgba(138, 106, 10, 0.1); } + +.euiExpression--warning.euiExpression-isActive { + border-bottom-color: #8a6a0a; + border-color: #8a6a0a; } + +.euiExpression--warning .euiExpression__description { + color: #8a6a0a; } + +.euiExpression--danger:focus { + background-color: rgba(189, 39, 30, 0.1); } + +.euiExpression--danger.euiExpression-isActive { + border-bottom-color: #BD271E; + border-color: #BD271E; } + +.euiExpression--danger .euiExpression__description { + color: #BD271E; } + +.euiExpression--accent:focus { + background-color: rgba(196, 64, 124, 0.1); } + +.euiExpression--accent.euiExpression-isActive { + border-bottom-color: #c4407c; + border-color: #c4407c; } + +.euiExpression--accent .euiExpression__description { + color: #c4407c; } + +/** + * 1. Make sure the quantity doesn't get an underline on hover + */ +.euiFacetButton { + 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", -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.71429rem; + height: 32px; + text-align: left; + text-decoration: none; + transition: all 150ms ease-in; } + .euiFacetButton:hover:not(:disabled) .euiFacetButton__text, .euiFacetButton:focus:not(:disabled) .euiFacetButton__text { + text-decoration: underline; + /* 1 */ } + .euiFacetButton:focus { + background-color: rgba(0, 119, 204, 0.1); + box-shadow: -4px 0 rgba(0, 119, 204, 0.1), 4px 0 rgba(0, 119, 204, 0.1); } + .euiFacetButton:disabled { + color: #ABB4C4; + pointer-events: none; } + .euiFacetButton:disabled .euiFacetButton__content { + pointer-events: auto; + cursor: not-allowed; } + .euiFacetButton:disabled .euiFacetButton__icon, + .euiFacetButton:disabled .euiFacetButton__quantity { + opacity: .5; } + .euiFacetButton:disabled:focus { + background-color: transparent; } + .euiFacetButton:disabled:hover, .euiFacetButton:disabled:focus { + text-decoration: none; } + +.euiFacetButton__content { + height: 100%; + width: 100%; + vertical-align: middle; + display: -webkit-flex; + display: flex; + -webkit-justify-content: center; + justify-content: center; + -webkit-align-items: center; + align-items: center; } + .euiFacetButton__content .euiButtonContent__icon, + .euiFacetButton__content .euiButtonContent__spinner { + -webkit-flex-shrink: 0; + flex-shrink: 0; } + .euiFacetButton__content > * + * { + -webkit-margin-start: 8px; + margin-inline-start: 8px; } + +.euiFacetButton__text { + max-width: 100%; + overflow: hidden !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; + word-wrap: normal !important; + -webkit-flex-grow: 1; + flex-grow: 1; + vertical-align: middle; } + .euiFacetButton__text::after { + display: block; + content: attr(data-text); + font-weight: 700; + height: 0; + overflow: hidden; + visibility: hidden; } + .euiFacetButton--isSelected .euiFacetButton__text { + font-weight: 700; } + +.euiFacetButton__icon { + transition: all 150ms ease-in; } + +.euiFacetGroup--gutterNone .euiFacetButton { + margin-top: 0; + margin-bottom: 0; } + +.euiFacetGroup--gutterNone.euiFacetGroup--horizontal { + margin-left: -12px; } + .euiFacetGroup--gutterNone.euiFacetGroup--horizontal .euiFacetButton { + margin-left: 12px; + max-width: calc(100% - 12px); } + +.euiFacetGroup--gutterSmall .euiFacetButton { + margin-top: 2px; + margin-bottom: 2px; } + +.euiFacetGroup--gutterSmall.euiFacetGroup--horizontal { + margin-left: -16px; } + .euiFacetGroup--gutterSmall.euiFacetGroup--horizontal .euiFacetButton { + margin-left: 16px; + max-width: calc(100% - 16px); } + +.euiFacetGroup--gutterMedium .euiFacetButton { + margin-top: 4px; + margin-bottom: 4px; } + +.euiFacetGroup--gutterMedium.euiFacetGroup--horizontal { + margin-left: -20px; } + .euiFacetGroup--gutterMedium.euiFacetGroup--horizontal .euiFacetButton { + margin-left: 20px; + max-width: calc(100% - 20px); } + +.euiFacetGroup--gutterLarge .euiFacetButton { + margin-top: 6px; + margin-bottom: 6px; } + +.euiFacetGroup--gutterLarge.euiFacetGroup--horizontal { + margin-left: -24px; } + .euiFacetGroup--gutterLarge.euiFacetGroup--horizontal .euiFacetButton { + margin-left: 24px; + max-width: calc(100% - 24px); } + +.euiFilterGroup { + display: -webkit-inline-flex; + display: inline-flex; + max-width: 100%; + border-right: 1px solid rgba(17, 43, 134, 0.1); + box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.2), 0 3px 3px -2px rgba(0, 0, 0, 0.2); + overflow: hidden; } + .euiFilterGroup > * { + -webkit-flex: 1 1 auto; + flex: 1 1 auto; + min-width: 48px; } + .euiFilterGroup > .euiFilterButton--noGrow { + -webkit-flex-grow: 0; + flex-grow: 0; } + .euiFilterGroup > .euiFilterButton-hasNotification { + min-width: 96px; } + .euiFilterGroup > .euiFilterButton--hasIcon { + min-width: 128px; } + .euiFilterGroup .euiPopover__anchor { + display: block; } + .euiFilterGroup .euiPopover__anchor .euiFilterButton { + width: 100%; } + +.euiFilterGroup--fullWidth { + display: -webkit-flex; + display: flex; } + +.euiFilterGroup__popoverPanel { + width: 288px; } + +@media only screen and (max-width: 574px) { + .euiFilterGroup { + -webkit-flex-wrap: wrap; + flex-wrap: wrap; } } + +@media only screen and (min-width: 575px) and (max-width: 767px) { + .euiFilterGroup { + -webkit-flex-wrap: wrap; + flex-wrap: wrap; } } + +@media only screen and (max-width: 574px) { + .euiFilterGroup { + display: -webkit-flex; + display: flex; } + .euiFilterGroup .euiFilterButton { + -webkit-flex-grow: 1 !important; + flex-grow: 1 !important; } } + +.euiFilterButton { + background-color: #fbfcfd; + height: 40px; + width: auto; + border: 1px solid rgba(17, 43, 134, 0.1); + border-right: none; + font-size: 14px; } + .euiFilterButton:disabled { + color: #ABB4C4; + pointer-events: none; } + .euiFilterButton:disabled .euiFilterButton__notification { + opacity: .5; } + .euiFilterButton:hover:not(:disabled), .euiFilterButton:focus:not(:disabled) { + text-decoration: none; } + .euiFilterButton:hover:not(:disabled) .euiFilterButton__textShift, .euiFilterButton:focus:not(:disabled) .euiFilterButton__textShift { + text-decoration: underline; } + +.euiFilterButton-hasActiveFilters { + font-weight: 700; } + +.euiFilterButton--hasIcon .euiButtonEmpty__content { + -webkit-justify-content: space-between; + justify-content: space-between; } + +.euiFilterButton--withNext + .euiFilterButton { + margin-left: -4px; + border-left: none; } + +.euiFilterButton-isSelected { + background-color: #F5F7FA; } + +.euiFilterButton__text-hasNotification { + display: -webkit-flex; + display: flex; + -webkit-align-items: center; + align-items: center; } + +.euiFilterButton__notification { + margin-left: 8px; + vertical-align: text-bottom; } + +.euiFilterButton__textShift { + max-width: 100%; + overflow: hidden !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; + word-wrap: normal !important; + min-width: 48px; } + .euiFilterButton__textShift::after { + display: block; + content: attr(data-text); + font-weight: 700; + height: 0; + overflow: hidden; + visibility: hidden; } + +.euiFilterSelectItem { + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + padding: 4px 12px; + display: block; + width: 100%; + text-align: left; + color: #343741; + border-bottom: 1px solid #D3DAE6; + border-color: #eef2f7; + outline-offset: -2px; } + .euiFilterSelectItem:hover { + cursor: pointer; + text-decoration: underline; } + .euiFilterSelectItem:focus { + cursor: pointer; + text-decoration: underline; + background-color: rgba(0, 119, 204, 0.1); } + .euiFilterSelectItem:disabled { + cursor: not-allowed; + text-decoration: none; + color: #ABB4C4; } + .euiFilterSelectItem:focus, .euiFilterSelectItem-isFocused { + background-color: rgba(0, 119, 204, 0.1); + color: #07C; } + +.euiFilterSelectItem__content { + max-width: 100%; + overflow: hidden !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; + word-wrap: normal !important; } + +.euiFilterSelect__items { + scrollbar-width: thin; + overflow-y: auto; + max-height: 480px; } + .euiFilterSelect__items::-webkit-scrollbar { + width: 16px; + height: 16px; } + .euiFilterSelect__items::-webkit-scrollbar-thumb { + background-color: rgba(105, 112, 125, 0.5); + border: 6px solid transparent; + background-clip: content-box; } + .euiFilterSelect__items::-webkit-scrollbar-corner, .euiFilterSelect__items::-webkit-scrollbar-track { + background-color: transparent; } + +.euiFilterSelect__note { + height: 64px; + text-align: center; + display: -webkit-flex; + display: flex; + -webkit-align-items: center; + align-items: center; + -webkit-justify-content: space-around; + justify-content: space-around; } + +.euiFilterSelect__noteContent { + color: #69707D; + font-size: 14px; } + +/** + * 1. Not always needed, but fixes an IE11 issue when flex-groups are nested under display: flex elements. + * 2. IE requires a unit to grow. + */ +.euiFlexGroup { + display: -webkit-flex; + display: flex; + -webkit-align-items: stretch; + align-items: stretch; + -webkit-flex-grow: 1; + flex-grow: 1; + /* 1 */ } + .euiFlexGroup .euiFlexItem { + -webkit-flex-grow: 1; + flex-grow: 1; + -webkit-flex-basis: 0%; + flex-basis: 0%; + /* 2 */ } + @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { + .euiFlexGroup .euiFlexItem { + min-width: 1px; } } + +.euiFlexGroup--gutterExtraSmall { + margin: -2px; } + .euiFlexGroup--gutterExtraSmall > .euiFlexItem { + margin: 2px; } + +.euiFlexGroup--gutterSmall { + margin: -4px; } + .euiFlexGroup--gutterSmall > .euiFlexItem { + margin: 4px; } + +.euiFlexGroup--gutterMedium { + margin: -8px; } + .euiFlexGroup--gutterMedium > .euiFlexItem { + margin: 8px; } + +.euiFlexGroup--gutterLarge { + margin: -12px; } + .euiFlexGroup--gutterLarge > .euiFlexItem { + margin: 12px; } + +.euiFlexGroup--gutterExtraLarge { + margin: -20px; } + .euiFlexGroup--gutterExtraLarge > .euiFlexItem { + margin: 20px; } + +.euiFlexGroup--justifyContentSpaceEvenly { + -webkit-justify-content: space-evenly; + justify-content: space-evenly; } + +.euiFlexGroup--justifyContentSpaceBetween { + -webkit-justify-content: space-between; + justify-content: space-between; } + +.euiFlexGroup--justifyContentSpaceAround { + -webkit-justify-content: space-around; + justify-content: space-around; } + +.euiFlexGroup--justifyContentCenter { + -webkit-justify-content: center; + justify-content: center; } + +.euiFlexGroup--justifyContentFlexEnd { + -webkit-justify-content: flex-end; + justify-content: flex-end; } + +.euiFlexGroup--alignItemsFlexStart { + -webkit-align-items: flex-start; + align-items: flex-start; } + +.euiFlexGroup--alignItemsCenter { + -webkit-align-items: center; + align-items: center; } + +.euiFlexGroup--alignItemsFlexEnd { + -webkit-align-items: flex-end; + align-items: flex-end; } + +.euiFlexGroup--alignItemsBaseline { + -webkit-align-items: baseline; + align-items: baseline; } + +.euiFlexGroup--directionRow { + -webkit-flex-direction: row; + flex-direction: row; } + +.euiFlexGroup--directionRowReverse { + -webkit-flex-direction: row-reverse; + flex-direction: row-reverse; } + +.euiFlexGroup--directionColumn { + -webkit-flex-direction: column; + flex-direction: column; } + +.euiFlexGroup--directionColumnReverse { + -webkit-flex-direction: column-reverse; + flex-direction: column-reverse; } + +.euiFlexGroup--wrap { + -webkit-flex-wrap: wrap; + flex-wrap: wrap; } + +@media only screen and (max-width: 574px) { + .euiFlexGroup--responsive { + -webkit-flex-wrap: wrap; + flex-wrap: wrap; + margin-left: 0; + margin-right: 0; } } + +@media only screen and (min-width: 575px) and (max-width: 767px) { + .euiFlexGroup--responsive { + -webkit-flex-wrap: wrap; + flex-wrap: wrap; + margin-left: 0; + margin-right: 0; } } + +.euiFlexGrid { + display: -webkit-flex; + display: flex; + -webkit-flex-wrap: wrap; + flex-wrap: wrap; + margin-bottom: 0; } + .euiFlexGrid > .euiFlexItem { + -webkit-flex-grow: 0; + flex-grow: 0; } + .euiFlexGrid > .euiFlexItem.euiFlexItem--flexGrowZero { + -webkit-flex-grow: 0 !important; + flex-grow: 0 !important; + -webkit-flex-basis: auto !important; + flex-basis: auto !important; } + +/** + * 1. For vertical layouts we use columns instead of flex + */ +.euiFlexGrid--directionColumn { + display: block; + /* 1 */ + -webkit-column-gap: 0; + -moz-column-gap: 0; + column-gap: 0; } + .euiFlexGrid--directionColumn > .euiFlexItem { + display: inline-block; + /* 1 */ + line-height: initial; } + +/** + * Uncouple the gutter margin from the column widths to support cases where we use a FlexGrid + * without columns. + */ +.euiFlexGrid--gutterNone { + margin: 0px; + -webkit-align-items: stretch; + align-items: stretch; } + .euiFlexGrid--gutterNone > .euiFlexItem { + margin: 0px; } + +.euiFlexGrid--gutterNone.euiFlexGrid--fourths > .euiFlexItem { + -webkit-flex-basis: calc(25% - 0px); + flex-basis: calc(25% - 0px); } + +.euiFlexGrid--gutterNone.euiFlexGrid--fourths.euiFlexGrid--directionColumn { + /* 1 */ + -webkit-column-count: 4; + -moz-column-count: 4; + column-count: 4; } + .euiFlexGrid--gutterNone.euiFlexGrid--fourths.euiFlexGrid--directionColumn > .euiFlexItem { + width: calc(100% - 0px); } + +.euiFlexGrid--gutterNone.euiFlexGrid--thirds > .euiFlexItem { + -webkit-flex-basis: calc(33.3% - 0px); + flex-basis: calc(33.3% - 0px); } + +.euiFlexGrid--gutterNone.euiFlexGrid--thirds.euiFlexGrid--directionColumn { + /* 1 */ + -webkit-column-count: 3; + -moz-column-count: 3; + column-count: 3; } + .euiFlexGrid--gutterNone.euiFlexGrid--thirds.euiFlexGrid--directionColumn > .euiFlexItem { + width: calc(100% - 0px); } + +.euiFlexGrid--gutterNone.euiFlexGrid--halves > .euiFlexItem { + -webkit-flex-basis: calc(50% - 0px); + flex-basis: calc(50% - 0px); } + +.euiFlexGrid--gutterNone.euiFlexGrid--halves.euiFlexGrid--directionColumn { + /* 1 */ + -webkit-column-count: 2; + -moz-column-count: 2; + column-count: 2; } + .euiFlexGrid--gutterNone.euiFlexGrid--halves.euiFlexGrid--directionColumn > .euiFlexItem { + width: calc(100% - 0px); } + +.euiFlexGrid--gutterNone.euiFlexGrid--single > .euiFlexItem { + -webkit-flex-basis: calc(100% - 0px); + flex-basis: calc(100% - 0px); } + +.euiFlexGrid--gutterNone.euiFlexGrid--single.euiFlexGrid--directionColumn { + /* 1 */ + -webkit-column-count: 1; + -moz-column-count: 1; + column-count: 1; } + .euiFlexGrid--gutterNone.euiFlexGrid--single.euiFlexGrid--directionColumn > .euiFlexItem { + width: calc(100% - 0px); } + +/** + * Uncouple the gutter margin from the column widths to support cases where we use a FlexGrid + * without columns. + */ +.euiFlexGrid--gutterSmall { + margin: -4px; + -webkit-align-items: stretch; + align-items: stretch; } + .euiFlexGrid--gutterSmall > .euiFlexItem { + margin: 4px; } + +.euiFlexGrid--gutterSmall.euiFlexGrid--fourths > .euiFlexItem { + -webkit-flex-basis: calc(25% - 8px); + flex-basis: calc(25% - 8px); } + +.euiFlexGrid--gutterSmall.euiFlexGrid--fourths.euiFlexGrid--directionColumn { + /* 1 */ + -webkit-column-count: 4; + -moz-column-count: 4; + column-count: 4; } + .euiFlexGrid--gutterSmall.euiFlexGrid--fourths.euiFlexGrid--directionColumn > .euiFlexItem { + width: calc(100% - 8px); } + +.euiFlexGrid--gutterSmall.euiFlexGrid--thirds > .euiFlexItem { + -webkit-flex-basis: calc(33.3% - 8px); + flex-basis: calc(33.3% - 8px); } + +.euiFlexGrid--gutterSmall.euiFlexGrid--thirds.euiFlexGrid--directionColumn { + /* 1 */ + -webkit-column-count: 3; + -moz-column-count: 3; + column-count: 3; } + .euiFlexGrid--gutterSmall.euiFlexGrid--thirds.euiFlexGrid--directionColumn > .euiFlexItem { + width: calc(100% - 8px); } + +.euiFlexGrid--gutterSmall.euiFlexGrid--halves > .euiFlexItem { + -webkit-flex-basis: calc(50% - 8px); + flex-basis: calc(50% - 8px); } + +.euiFlexGrid--gutterSmall.euiFlexGrid--halves.euiFlexGrid--directionColumn { + /* 1 */ + -webkit-column-count: 2; + -moz-column-count: 2; + column-count: 2; } + .euiFlexGrid--gutterSmall.euiFlexGrid--halves.euiFlexGrid--directionColumn > .euiFlexItem { + width: calc(100% - 8px); } + +.euiFlexGrid--gutterSmall.euiFlexGrid--single > .euiFlexItem { + -webkit-flex-basis: calc(100% - 8px); + flex-basis: calc(100% - 8px); } + +.euiFlexGrid--gutterSmall.euiFlexGrid--single.euiFlexGrid--directionColumn { + /* 1 */ + -webkit-column-count: 1; + -moz-column-count: 1; + column-count: 1; } + .euiFlexGrid--gutterSmall.euiFlexGrid--single.euiFlexGrid--directionColumn > .euiFlexItem { + width: calc(100% - 8px); } + +/** + * Uncouple the gutter margin from the column widths to support cases where we use a FlexGrid + * without columns. + */ +.euiFlexGrid--gutterMedium { + margin: -8px; + -webkit-align-items: stretch; + align-items: stretch; } + .euiFlexGrid--gutterMedium > .euiFlexItem { + margin: 8px; } + +.euiFlexGrid--gutterMedium.euiFlexGrid--fourths > .euiFlexItem { + -webkit-flex-basis: calc(25% - 16px); + flex-basis: calc(25% - 16px); } + +.euiFlexGrid--gutterMedium.euiFlexGrid--fourths.euiFlexGrid--directionColumn { + /* 1 */ + -webkit-column-count: 4; + -moz-column-count: 4; + column-count: 4; } + .euiFlexGrid--gutterMedium.euiFlexGrid--fourths.euiFlexGrid--directionColumn > .euiFlexItem { + width: calc(100% - 16px); } + +.euiFlexGrid--gutterMedium.euiFlexGrid--thirds > .euiFlexItem { + -webkit-flex-basis: calc(33.3% - 16px); + flex-basis: calc(33.3% - 16px); } + +.euiFlexGrid--gutterMedium.euiFlexGrid--thirds.euiFlexGrid--directionColumn { + /* 1 */ + -webkit-column-count: 3; + -moz-column-count: 3; + column-count: 3; } + .euiFlexGrid--gutterMedium.euiFlexGrid--thirds.euiFlexGrid--directionColumn > .euiFlexItem { + width: calc(100% - 16px); } + +.euiFlexGrid--gutterMedium.euiFlexGrid--halves > .euiFlexItem { + -webkit-flex-basis: calc(50% - 16px); + flex-basis: calc(50% - 16px); } + +.euiFlexGrid--gutterMedium.euiFlexGrid--halves.euiFlexGrid--directionColumn { + /* 1 */ + -webkit-column-count: 2; + -moz-column-count: 2; + column-count: 2; } + .euiFlexGrid--gutterMedium.euiFlexGrid--halves.euiFlexGrid--directionColumn > .euiFlexItem { + width: calc(100% - 16px); } + +.euiFlexGrid--gutterMedium.euiFlexGrid--single > .euiFlexItem { + -webkit-flex-basis: calc(100% - 16px); + flex-basis: calc(100% - 16px); } + +.euiFlexGrid--gutterMedium.euiFlexGrid--single.euiFlexGrid--directionColumn { + /* 1 */ + -webkit-column-count: 1; + -moz-column-count: 1; + column-count: 1; } + .euiFlexGrid--gutterMedium.euiFlexGrid--single.euiFlexGrid--directionColumn > .euiFlexItem { + width: calc(100% - 16px); } + +/** + * Uncouple the gutter margin from the column widths to support cases where we use a FlexGrid + * without columns. + */ +.euiFlexGrid--gutterLarge { + margin: -12px; + -webkit-align-items: stretch; + align-items: stretch; } + .euiFlexGrid--gutterLarge > .euiFlexItem { + margin: 12px; } + +.euiFlexGrid--gutterLarge.euiFlexGrid--fourths > .euiFlexItem { + -webkit-flex-basis: calc(25% - 24px); + flex-basis: calc(25% - 24px); } + +.euiFlexGrid--gutterLarge.euiFlexGrid--fourths.euiFlexGrid--directionColumn { + /* 1 */ + -webkit-column-count: 4; + -moz-column-count: 4; + column-count: 4; } + .euiFlexGrid--gutterLarge.euiFlexGrid--fourths.euiFlexGrid--directionColumn > .euiFlexItem { + width: calc(100% - 24px); } + +.euiFlexGrid--gutterLarge.euiFlexGrid--thirds > .euiFlexItem { + -webkit-flex-basis: calc(33.3% - 24px); + flex-basis: calc(33.3% - 24px); } + +.euiFlexGrid--gutterLarge.euiFlexGrid--thirds.euiFlexGrid--directionColumn { + /* 1 */ + -webkit-column-count: 3; + -moz-column-count: 3; + column-count: 3; } + .euiFlexGrid--gutterLarge.euiFlexGrid--thirds.euiFlexGrid--directionColumn > .euiFlexItem { + width: calc(100% - 24px); } + +.euiFlexGrid--gutterLarge.euiFlexGrid--halves > .euiFlexItem { + -webkit-flex-basis: calc(50% - 24px); + flex-basis: calc(50% - 24px); } + +.euiFlexGrid--gutterLarge.euiFlexGrid--halves.euiFlexGrid--directionColumn { + /* 1 */ + -webkit-column-count: 2; + -moz-column-count: 2; + column-count: 2; } + .euiFlexGrid--gutterLarge.euiFlexGrid--halves.euiFlexGrid--directionColumn > .euiFlexItem { + width: calc(100% - 24px); } + +.euiFlexGrid--gutterLarge.euiFlexGrid--single > .euiFlexItem { + -webkit-flex-basis: calc(100% - 24px); + flex-basis: calc(100% - 24px); } + +.euiFlexGrid--gutterLarge.euiFlexGrid--single.euiFlexGrid--directionColumn { + /* 1 */ + -webkit-column-count: 1; + -moz-column-count: 1; + column-count: 1; } + .euiFlexGrid--gutterLarge.euiFlexGrid--single.euiFlexGrid--directionColumn > .euiFlexItem { + width: calc(100% - 24px); } + +/** + * Uncouple the gutter margin from the column widths to support cases where we use a FlexGrid + * without columns. + */ +.euiFlexGrid--gutterXLarge { + margin: -16px; + -webkit-align-items: stretch; + align-items: stretch; } + .euiFlexGrid--gutterXLarge > .euiFlexItem { + margin: 16px; } + +.euiFlexGrid--gutterXLarge.euiFlexGrid--fourths > .euiFlexItem { + -webkit-flex-basis: calc(25% - 32px); + flex-basis: calc(25% - 32px); } + +.euiFlexGrid--gutterXLarge.euiFlexGrid--fourths.euiFlexGrid--directionColumn { + /* 1 */ + -webkit-column-count: 4; + -moz-column-count: 4; + column-count: 4; } + .euiFlexGrid--gutterXLarge.euiFlexGrid--fourths.euiFlexGrid--directionColumn > .euiFlexItem { + width: calc(100% - 32px); } + +.euiFlexGrid--gutterXLarge.euiFlexGrid--thirds > .euiFlexItem { + -webkit-flex-basis: calc(33.3% - 32px); + flex-basis: calc(33.3% - 32px); } + +.euiFlexGrid--gutterXLarge.euiFlexGrid--thirds.euiFlexGrid--directionColumn { + /* 1 */ + -webkit-column-count: 3; + -moz-column-count: 3; + column-count: 3; } + .euiFlexGrid--gutterXLarge.euiFlexGrid--thirds.euiFlexGrid--directionColumn > .euiFlexItem { + width: calc(100% - 32px); } + +.euiFlexGrid--gutterXLarge.euiFlexGrid--halves > .euiFlexItem { + -webkit-flex-basis: calc(50% - 32px); + flex-basis: calc(50% - 32px); } + +.euiFlexGrid--gutterXLarge.euiFlexGrid--halves.euiFlexGrid--directionColumn { + /* 1 */ + -webkit-column-count: 2; + -moz-column-count: 2; + column-count: 2; } + .euiFlexGrid--gutterXLarge.euiFlexGrid--halves.euiFlexGrid--directionColumn > .euiFlexItem { + width: calc(100% - 32px); } + +.euiFlexGrid--gutterXLarge.euiFlexGrid--single > .euiFlexItem { + -webkit-flex-basis: calc(100% - 32px); + flex-basis: calc(100% - 32px); } + +.euiFlexGrid--gutterXLarge.euiFlexGrid--single.euiFlexGrid--directionColumn { + /* 1 */ + -webkit-column-count: 1; + -moz-column-count: 1; + column-count: 1; } + .euiFlexGrid--gutterXLarge.euiFlexGrid--single.euiFlexGrid--directionColumn > .euiFlexItem { + width: calc(100% - 32px); } + +@media only screen and (max-width: 574px) { + .euiFlexGrid.euiFlexGrid--responsive { + margin-left: 0 !important; + margin-right: 0 !important; + -webkit-column-count: 1 !important; + -moz-column-count: 1 !important; + column-count: 1 !important; } } + +@media only screen and (min-width: 575px) and (max-width: 767px) { + .euiFlexGrid.euiFlexGrid--responsive { + margin-left: 0 !important; + margin-right: 0 !important; + -webkit-column-count: 1 !important; + -moz-column-count: 1 !important; + column-count: 1 !important; } } + +/** + * 1. Allow EuiPanels to expand to fill the item. + * 2. IE11 hack forces inner content of flex items to respect a higher parent's width (mostly) and + * not cause weird wrapping issues. + */ +.euiFlexItem { + display: -webkit-flex; + display: flex; + /* 1 */ + -webkit-flex-direction: column; + flex-direction: column; + /* 1 */ + /* + * 1. We need the extra specificity here to override the FlexGroup > FlexItem styles. + * 2. FlexItem can be manually set to not grow if needed. + */ } + @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { + .euiFlexItem { + min-width: 1px; + /* 2 */ } } + .euiFlexItem.euiFlexItem--flexGrowZero { + /* 1 */ + -webkit-flex-grow: 0; + flex-grow: 0; + /* 2 */ + -webkit-flex-basis: auto; + flex-basis: auto; + /* 2 */ } + .euiFlexItem.euiFlexItem--flexGrow1 { + -webkit-flex-grow: 1; + flex-grow: 1; } + .euiFlexItem.euiFlexItem--flexGrow2 { + -webkit-flex-grow: 2; + flex-grow: 2; } + .euiFlexItem.euiFlexItem--flexGrow3 { + -webkit-flex-grow: 3; + flex-grow: 3; } + .euiFlexItem.euiFlexItem--flexGrow4 { + -webkit-flex-grow: 4; + flex-grow: 4; } + .euiFlexItem.euiFlexItem--flexGrow5 { + -webkit-flex-grow: 5; + flex-grow: 5; } + .euiFlexItem.euiFlexItem--flexGrow6 { + -webkit-flex-grow: 6; + flex-grow: 6; } + .euiFlexItem.euiFlexItem--flexGrow7 { + -webkit-flex-grow: 7; + flex-grow: 7; } + .euiFlexItem.euiFlexItem--flexGrow8 { + -webkit-flex-grow: 8; + flex-grow: 8; } + .euiFlexItem.euiFlexItem--flexGrow9 { + -webkit-flex-grow: 9; + flex-grow: 9; } + .euiFlexItem.euiFlexItem--flexGrow10 { + -webkit-flex-grow: 10; + flex-grow: 10; } + +@media only screen and (max-width: 574px) { + .euiFlexGroup--responsive > .euiFlexItem, + .euiFlexGrid--responsive > .euiFlexItem { + width: 100% !important; + -webkit-flex-basis: 100% !important; + flex-basis: 100% !important; + margin-left: 0 !important; + margin-right: 0 !important; + margin-bottom: 16px !important; } } + +@media only screen and (min-width: 575px) and (max-width: 767px) { + .euiFlexGroup--responsive > .euiFlexItem, + .euiFlexGrid--responsive > .euiFlexItem { + width: 100% !important; + -webkit-flex-basis: 100% !important; + flex-basis: 100% !important; + margin-left: 0 !important; + margin-right: 0 !important; + margin-bottom: 16px !important; } } + +.euiFlyout { + border-left: none; + box-shadow: 0 2.7px 9px rgba(0, 0, 0, 0.13), 0 9.4px 24px rgba(0, 0, 0, 0.09), 0 21.8px 43px rgba(0, 0, 0, 0.08); + position: fixed; + top: 0; + bottom: 0; + right: 0; + height: 100%; + z-index: 1000; + background: #FFF; + display: -webkit-flex; + display: flex; + -webkit-flex-direction: column; + flex-direction: column; + -webkit-align-items: stretch; + align-items: stretch; + -webkit-clip-path: polygon(-50% 0, 100% 0, 100% 100%, -50% 100%); + clip-path: polygon(-50% 0, 100% 0, 100% 100%, -50% 100%); + -webkit-animation: euiFlyout 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); + animation: euiFlyout 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } + .euiFlyout:focus { + outline: none; } + +.euiFlyout__closeButton { + background-color: rgba(255, 255, 255, 0.9); + position: absolute; + right: 8px; + top: 8px; + z-index: 3; } + .euiFlyout__closeButton--outside { + box-shadow: 0 2.7px 9px rgba(0, 0, 0, 0.13), 0 9.4px 24px rgba(0, 0, 0, 0.09), 0 21.8px 43px rgba(0, 0, 0, 0.08); + right: auto; + left: 0; + -webkit-transform: translateX(calc(-100% - 24px)) !important; + transform: translateX(calc(-100% - 24px)) !important; + -webkit-animation: none !important; + animation: none !important; } + .euiFlyout--left .euiFlyout__closeButton--outside { + left: auto; + right: 0; + -webkit-transform: translateX(calc(100% + 24px)) !important; + transform: translateX(calc(100% + 24px)) !important; } + +.euiFlyoutBody__banner { + overflow-x: hidden; } + +/** + * 1. Calculating the minimum width based on the screen takeover breakpoint + */ +.euiFlyout--small { + min-width: 384px; + width: 25vw; } + .euiFlyout--small.euiFlyout--maxWidth-default { + max-width: 403px; } + +.euiFlyout--medium { + min-width: 424px; + width: 50vw; } + .euiFlyout--medium.euiFlyout--maxWidth-default { + max-width: 768px; } + +.euiFlyout--large { + min-width: 691px; + width: 75vw; } + .euiFlyout--large.euiFlyout--maxWidth-default { + max-width: 992px; } + +.euiFlyout--paddingNone .euiFlyoutHeader { + padding: 0 0 0; } + +.euiFlyout--paddingNone .euiFlyoutHeader--hasBorder { + padding-bottom: 0; } + +.euiFlyout--paddingNone .euiFlyoutBody__overflowContent { + padding: 0; } + +.euiFlyout--paddingNone .euiFlyoutBody__banner .euiCallOut { + padding-left: 0; + padding-right: 0; } + +.euiFlyout--paddingNone .euiFlyoutFooter { + padding: 0; } + +.euiFlyout--paddingSmall .euiFlyoutHeader { + padding: 8px 8px 0; } + +.euiFlyout--paddingSmall .euiFlyoutHeader--hasBorder { + padding-bottom: 8px; } + +.euiFlyout--paddingSmall .euiFlyoutBody__overflowContent { + padding: 8px; } + +.euiFlyout--paddingSmall .euiFlyoutBody__banner .euiCallOut { + padding-left: 8px; + padding-right: 8px; } + +.euiFlyout--paddingSmall .euiFlyoutFooter { + padding: 8px; } + +.euiFlyout--paddingMedium .euiFlyoutHeader { + padding: 16px 16px 0; } + +.euiFlyout--paddingMedium .euiFlyoutHeader--hasBorder { + padding-bottom: 16px; } + +.euiFlyout--paddingMedium .euiFlyoutBody__overflowContent { + padding: 16px; } + +.euiFlyout--paddingMedium .euiFlyoutBody__banner .euiCallOut { + padding-left: 16px; + padding-right: 16px; } + +.euiFlyout--paddingMedium .euiFlyoutFooter { + padding: 12px 16px; } + +.euiFlyout--paddingLarge .euiFlyoutHeader { + padding: 24px 24px 0; } + +.euiFlyout--paddingLarge .euiFlyoutHeader--hasBorder { + padding-bottom: 24px; } + +.euiFlyout--paddingLarge .euiFlyoutBody__overflowContent { + padding: 24px; } + +.euiFlyout--paddingLarge .euiFlyoutBody__banner .euiCallOut { + padding-left: 24px; + padding-right: 24px; } + +.euiFlyout--paddingLarge .euiFlyoutFooter { + padding: 16px 24px; } + +@-webkit-keyframes euiFlyout { + 0% { + opacity: 0; + -webkit-transform: translateX(100%); + transform: translateX(100%); } + 75% { + opacity: 1; + -webkit-transform: translateX(0%); + transform: translateX(0%); } } + +@keyframes euiFlyout { + 0% { + opacity: 0; + -webkit-transform: translateX(100%); + transform: translateX(100%); } + 75% { + opacity: 1; + -webkit-transform: translateX(0%); + transform: translateX(0%); } } + +/** + * 1. Leave only a small sliver exposed on small screens so users understand that this is not a new page + * 2. If a custom maxWidth is set, we need to override it. + */ +@media only screen and (max-width: 574px) { + .euiFlyout { + max-width: 90vw !important; + /* 1, 2 */ } + .euiFlyout--small { + min-width: 0; + width: 384px; } + .euiFlyout--medium { + min-width: 0; + width: 424px; } + .euiFlyout--large { + min-width: 0; + width: 691px; } + .euiFlyout__closeButton--outside { + -webkit-transform: translateX(calc(-100% - 4px)) !important; + transform: translateX(calc(-100% - 4px)) !important; } + .euiFlyout--left .euiFlyout__closeButton--outside { + -webkit-transform: translateX(calc(100% + 4px)) !important; + transform: translateX(calc(100% + 4px)) !important; } } + +@media only screen and (min-width: 575px) and (max-width: 767px) { + .euiFlyout { + max-width: 90vw !important; + /* 1, 2 */ } + .euiFlyout--small { + min-width: 0; + width: 384px; } + .euiFlyout--medium { + min-width: 0; + width: 424px; } + .euiFlyout--large { + min-width: 0; + width: 691px; } + .euiFlyout__closeButton--outside { + -webkit-transform: translateX(calc(-100% - 4px)) !important; + transform: translateX(calc(-100% - 4px)) !important; } + .euiFlyout--left .euiFlyout__closeButton--outside { + -webkit-transform: translateX(calc(100% + 4px)) !important; + transform: translateX(calc(100% + 4px)) !important; } } + +/** + * Left side flyout (should only be used for navigation) + */ +.euiFlyout--left { + border-right: none; + border-left: none; + right: auto; + left: 0; + -webkit-clip-path: polygon(0 0, 150% 0, 150% 100%, 0 100%); + clip-path: polygon(0 0, 150% 0, 150% 100%, 0 100%); + -webkit-animation-name: euiFlyoutLeft; + animation-name: euiFlyoutLeft; } + +@-webkit-keyframes euiFlyoutLeft { + 0% { + opacity: 0; + -webkit-transform: translateX(-100%); + transform: translateX(-100%); } + 75% { + opacity: 1; + -webkit-transform: translateX(0%); + transform: translateX(0%); } } + +@keyframes euiFlyoutLeft { + 0% { + opacity: 0; + -webkit-transform: translateX(-100%); + transform: translateX(-100%); } + 75% { + opacity: 1; + -webkit-transform: translateX(0%); + transform: translateX(0%); } } + +/** + * Pushed style (inside body) + */ +.euiFlyout.euiFlyout--push { + box-shadow: none; + -webkit-clip-path: none; + clip-path: none; + -webkit-animation-duration: 0s; + animation-duration: 0s; + border-left: 2px solid #D3DAE6; + z-index: 999; } + .euiFlyout.euiFlyout--push.euiFlyout--left { + border-left: none; + border-right: 2px solid #D3DAE6; } + +.euiFlyoutBody { + -webkit-flex-grow: 1; + flex-grow: 1; + overflow-y: hidden; + height: 100%; } + .euiFlyoutBody .euiFlyoutBody__overflow { + 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%); } + .euiFlyoutBody .euiFlyoutBody__overflow::-webkit-scrollbar { + width: 16px; + height: 16px; } + .euiFlyoutBody .euiFlyoutBody__overflow::-webkit-scrollbar-thumb { + background-color: rgba(105, 112, 125, 0.5); + border: 6px solid transparent; + background-clip: content-box; } + .euiFlyoutBody .euiFlyoutBody__overflow::-webkit-scrollbar-corner, .euiFlyoutBody .euiFlyoutBody__overflow::-webkit-scrollbar-track { + background-color: transparent; } + .euiFlyoutBody .euiFlyoutBody__overflow:focus { + outline: none; + /* 1 */ } + .euiFlyoutBody .euiFlyoutBody__overflow[tabindex='0']:focus:focus-visible { + outline-style: auto; + /* 2 */ } + .euiFlyoutBody .euiFlyoutBody__overflow.euiFlyoutBody__overflow--hasBanner { + -webkit-mask-image: linear-gradient(to bottom, red calc(100% - 7.5px), rgba(255, 0, 0, 0.1) 100%); + mask-image: linear-gradient(to bottom, red calc(100% - 7.5px), rgba(255, 0, 0, 0.1) 100%); } + .euiFlyoutBody .euiFlyoutBody__banner .euiCallOut { + border: none; + border-radius: 0; } + +.euiFlyoutFooter { + background: #F5F7FA; + -webkit-flex-grow: 0; + flex-grow: 0; } + +.euiFlyoutHeader { + -webkit-flex-grow: 0; + flex-grow: 0; } + +.euiFlyoutHeader--hasBorder { + border-bottom: 1px solid #D3DAE6; } + +.euiCheckbox { + position: relative; + /** + * 1. Float above the visual radio and match its dimension, so that when users try to click it + * they actually click this input. + */ } + .euiCheckbox .euiCheckbox__input { + position: absolute; + left: -10000px; + top: auto; + width: 1px; + height: 1px; + overflow: hidden; } + .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 #c9cbcd; + 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%3Ccircle cx='8' cy='11' r='3' fill='rgb%2894, 100, 111%29' fill-rule='evenodd' transform='translate(-5 -8)'/%3E%3C/svg%3E"); } + .euiCheckbox .euiCheckbox__input:focus + .euiCheckbox__square, .euiCheckbox .euiCheckbox__input:active:not(:disabled) + .euiCheckbox__square { + outline: 2px solid currentColor; + outline-offset: 2px; + border-color: #07C; } + .euiCheckbox .euiCheckbox__input:focus + .euiCheckbox__square:focus-visible, .euiCheckbox .euiCheckbox__input:active:not(:disabled) + .euiCheckbox__square:focus-visible { + outline-style: auto; } + .euiCheckbox .euiCheckbox__input:focus + .euiCheckbox__square:not(:focus-visible), .euiCheckbox .euiCheckbox__input:active:not(:disabled) + .euiCheckbox__square:not(:focus-visible) { + outline: none; } + .euiCheckbox.euiCheckbox--inList, .euiCheckbox.euiCheckbox--noLabel { + min-height: 16px; + min-width: 16px; } + .euiCheckbox.euiCheckbox--inList .euiCheckbox__square, .euiCheckbox.euiCheckbox--noLabel .euiCheckbox__square { + top: 0; } + .euiCheckbox.euiCheckbox--inList .euiCheckbox__input, .euiCheckbox.euiCheckbox--noLabel .euiCheckbox__input { + width: 16px; + height: 16px; + /* 1 */ + position: absolute; + /* 1 */ + opacity: 0; + /* 1 */ + z-index: 1; + /* 1 */ + margin: 0; + /* 1 */ + left: 0; + /* 1 */ + cursor: pointer; } + +.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__fieldPadding--xxxsmall { + padding-top: 8px; } + .euiDescribedFormGroup .euiDescribedFormGroup__fieldPadding--xxsmall { + padding-top: 11px; } + .euiDescribedFormGroup .euiDescribedFormGroup__fieldPadding--xsmall { + padding-top: 11px; } + .euiDescribedFormGroup .euiDescribedFormGroup__fieldPadding--small { + padding-top: 23px; } + .euiDescribedFormGroup .euiDescribedFormGroup__fieldPadding--medium { + padding-top: 30.5px; } + .euiDescribedFormGroup .euiDescribedFormGroup__fieldPadding--large { + padding-top: 41px; } + @media only screen and (max-width: 574px) { + .euiDescribedFormGroup .euiDescribedFormGroup__fields { + padding-top: 0; } + .euiDescribedFormGroup .euiDescribedFormGroup__fields > .euiFormRow--hasEmptyLabelSpace:first-child { + padding-top: 0; } } + @media only screen and (min-width: 575px) and (max-width: 767px) { + .euiDescribedFormGroup .euiDescribedFormGroup__fields { + padding-top: 0; } + .euiDescribedFormGroup .euiDescribedFormGroup__fields > .euiFormRow--hasEmptyLabelSpace:first-child { + padding-top: 0; } } + +.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, 43, 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", -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; } } + @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { + .euiFieldNumber { + line-height: 1em; } } + .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, 43, 134, 0.1); } + .euiFieldNumber:disabled { + cursor: not-allowed; + color: #98A2B3; + -webkit-text-fill-color: #98A2B3; + background: #eef2f7; + box-shadow: inset 0 0 0 1px rgba(17, 43, 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; + background: #FFF; + border-color: transparent; + box-shadow: inset 0 0 0 1px rgba(17, 43, 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, 43, 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, 43, 134, 0.1); } + .euiFieldNumber--compressed:disabled { + cursor: not-allowed; + color: #98A2B3; + -webkit-text-fill-color: #98A2B3; + background: #eef2f7; + box-shadow: inset 0 0 0 1px rgba(17, 43, 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; + background: #FFF; + border-color: transparent; + box-shadow: inset 0 0 0 1px rgba(17, 43, 134, 0.1); } + .euiFieldNumber--inGroup { + box-shadow: none !important; + border-radius: 0; } + .euiFieldNumber--withIcon { + padding-left: 40px; } + .euiFieldNumber-isLoading { + padding-right: 40px; } + .euiFieldNumber-isLoading.euiFieldNumber--compressed { + padding-right: 32px; } + +.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, 43, 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", -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; } } + @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { + .euiFieldPassword { + line-height: 1em; } } + .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, 43, 134, 0.1); } + .euiFieldPassword:disabled { + cursor: not-allowed; + color: #98A2B3; + -webkit-text-fill-color: #98A2B3; + background: #eef2f7; + box-shadow: inset 0 0 0 1px rgba(17, 43, 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; + background: #FFF; + border-color: transparent; + box-shadow: inset 0 0 0 1px rgba(17, 43, 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, 43, 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, 43, 134, 0.1); } + .euiFieldPassword--compressed:disabled { + cursor: not-allowed; + color: #98A2B3; + -webkit-text-fill-color: #98A2B3; + background: #eef2f7; + box-shadow: inset 0 0 0 1px rgba(17, 43, 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; + background: #FFF; + border-color: transparent; + box-shadow: inset 0 0 0 1px rgba(17, 43, 134, 0.1); } + .euiFieldPassword--inGroup { + box-shadow: none !important; + border-radius: 0; } + .euiFieldPassword-isLoading { + padding-right: 40px; } + .euiFieldPassword-isLoading.euiFieldPassword--compressed { + padding-right: 32px; } + .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 + * 2. Remove the X clear button from input type search in Chrome and IE +*/ +.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, 43, 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", -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; } } + @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { + .euiFieldSearch { + line-height: 1em; } } + .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, 43, 134, 0.1); } + .euiFieldSearch:disabled { + cursor: not-allowed; + color: #98A2B3; + -webkit-text-fill-color: #98A2B3; + background: #eef2f7; + box-shadow: inset 0 0 0 1px rgba(17, 43, 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; + background: #FFF; + border-color: transparent; + box-shadow: inset 0 0 0 1px rgba(17, 43, 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, 43, 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, 43, 134, 0.1); } + .euiFieldSearch--compressed:disabled { + cursor: not-allowed; + color: #98A2B3; + -webkit-text-fill-color: #98A2B3; + background: #eef2f7; + box-shadow: inset 0 0 0 1px rgba(17, 43, 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; + background: #FFF; + border-color: transparent; + box-shadow: inset 0 0 0 1px rgba(17, 43, 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::-ms-clear { + display: none; + /* 2 */ } + .euiFieldSearch.euiFieldSearch-isClearable { + padding-right: 40px; } + .euiFieldSearch.euiFieldSearch-isLoading { + padding-right: 40px; } + .euiFieldSearch.euiFieldSearch-isLoading.euiFieldSearch-isClearable { + padding-right: 62px; } + .euiFieldSearch.euiFieldSearch--compressed { + padding-left: 32px; } + .euiFieldSearch.euiFieldSearch--compressed.euiFieldSearch-isClearable { + padding-right: 32px; } + .euiFieldSearch.euiFieldSearch--compressed.euiFieldSearch-isLoading { + padding-right: 32px; } + .euiFieldSearch.euiFieldSearch--compressed.euiFieldSearch-isLoading.euiFieldSearch-isClearable { + padding-right: 54px; } + +.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, 43, 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", -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; + /* Invalid state normally comes from :invalid, but several components + /* like EuiDatePicker need it toggled through an extra class. + */ } + .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; } } + @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { + .euiFieldText { + line-height: 1em; } } + .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, 43, 134, 0.1); } + .euiFieldText:disabled { + cursor: not-allowed; + color: #98A2B3; + -webkit-text-fill-color: #98A2B3; + background: #eef2f7; + box-shadow: inset 0 0 0 1px rgba(17, 43, 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; + background: #FFF; + border-color: transparent; + box-shadow: inset 0 0 0 1px rgba(17, 43, 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, 43, 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, 43, 134, 0.1); } + .euiFieldText--compressed:disabled { + cursor: not-allowed; + color: #98A2B3; + -webkit-text-fill-color: #98A2B3; + background: #eef2f7; + box-shadow: inset 0 0 0 1px rgba(17, 43, 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; + background: #FFF; + border-color: transparent; + box-shadow: inset 0 0 0 1px rgba(17, 43, 134, 0.1); } + .euiFieldText--inGroup { + box-shadow: none !important; + border-radius: 0; } + .euiFieldText--withIcon { + padding-left: 40px; } + .euiFieldText-isLoading { + padding-right: 40px; } + .euiFieldText-isLoading.euiFieldText--compressed { + padding-right: 32px; } + .euiFieldText.euiFieldText-isInvalid { + background-image: linear-gradient(to top, #BD271E, #BD271E 2px, transparent 2px, transparent 100%); + background-size: 100%; } + +.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) + * 3. Delay focus gradient or else it will only partially transition while file chooser opens + * 4. Static height so that it doesn't shift its surrounding contents around + */ +.euiFilePicker__prompt { + background-color: #fbfcfd; + background-repeat: no-repeat; + background-size: 0% 100%; + box-shadow: 0 0 transparent, inset 0 0 0 1px rgba(17, 43, 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-left: 40px; + /* 2 */ + height: 40px; + padding-top: 12px; + padding-right: 12px; + padding-bottom: 12px; + pointer-events: none; + /* 1 */ + border-radius: 6px; + transition: box-shadow 150ms ease-in, background-color 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in 150ms; + /* 3 */ } + @supports (-moz-appearance: none) { + .euiFilePicker__prompt { + transition-property: box-shadow, background-image, background-size; } } + .euiFilePicker--compressed .euiFilePicker__prompt { + background-color: #fbfcfd; + background-repeat: no-repeat; + background-size: 0% 100%; + box-shadow: inset 0 0 0 1px rgba(17, 43, 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; } + @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 .euiFilePicker__prompt { + background-image: linear-gradient(to top, #BD271E, #BD271E 2px, transparent 2px, transparent 100%); + background-size: 100%; } + +.euiFilePicker__promptText { + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + max-width: 100%; + overflow: hidden !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; + word-wrap: normal !important; + line-height: 16px; } + .euiFilePicker:not(.euiFilePicker--large):not(.euiFilePicker-hasFiles) .euiFilePicker__promptText { + color: #98A2B3; } + +.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 { + 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, 43, 134, 0.1); } + .euiFilePicker--compressed .euiFilePicker__showDrop .euiFilePicker__prompt, .euiFilePicker--compressed + .euiFilePicker__input:focus + .euiFilePicker__prompt { + 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, 43, 134, 0.1); } + +.euiFilePicker__input:disabled + .euiFilePicker__prompt { + cursor: not-allowed; + color: #98A2B3; + -webkit-text-fill-color: #98A2B3; + background: #eef2f7; + box-shadow: inset 0 0 0 1px rgba(17, 43, 134, 0.1); } + .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.71429rem; + list-style: disc; } + +.euiForm__errors { + margin-bottom: 16px; } + +.euiFormControlLayout { + max-width: 400px; + width: 100%; + height: 40px; } + .euiFormControlLayout--fullWidth { + max-width: 100%; } + .euiFormControlLayout--compressed { + height: 32px; } + .euiFormControlLayout--inGroup { + height: 100%; } + +.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, 43, 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; + word-wrap: normal !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 { + background-color: #e9edf3; + padding: 12px; + line-height: 16px !important; + cursor: default !important; } + .euiFormControlLayout--group .euiFormLabel + *:not(.euiFormControlLayout__childrenWrapper):not(input), + .euiFormControlLayout--group .euiText + *: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, 43, 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 { + padding: 8px; } + .euiFormControlLayout--group.euiFormControlLayout--compressed .euiFormLabel + *:not(.euiFormControlLayout__childrenWrapper), + .euiFormControlLayout--group.euiFormControlLayout--compressed .euiText + *: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: #FFF; + border-color: transparent; + box-shadow: inset 0 0 0 1px rgba(17, 43, 134, 0.1); } + .euiFormControlLayout--group.euiFormControlLayout--readOnly input { + background-color: transparent; } + +.euiFormControlLayoutDelimited { + background-color: #fbfcfd; + background-repeat: no-repeat; + background-size: 0% 100%; + box-shadow: 0 0 transparent, inset 0 0 0 1px rgba(17, 43, 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 .euiFormControlLayoutDelimited__delimeter { + background-color: #fbfcfd; } + .euiFormControlLayoutDelimited > .euiFormControlLayout__childrenWrapper { + display: -webkit-flex; + display: flex; + -webkit-align-items: center; + align-items: center; + width: 100%; } + .euiFormControlLayoutDelimited[class*='--compressed'] { + background-color: #fbfcfd; + background-repeat: no-repeat; + background-size: 0% 100%; + box-shadow: inset 0 0 0 1px rgba(17, 43, 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*='--compressed'] .euiFormControlLayoutDelimited__input { + height: 100%; + padding-top: 0; + padding-bottom: 0; + padding-left: 8px; + padding-right: 8px; } + .euiFormControlLayoutDelimited[class*='--compressed'] .euiFormControlLayoutIcons { + padding-left: 8px; + padding-right: 8px; } + .euiFormControlLayoutDelimited[class*='--fullWidth'] .euiFormControlLayout__childrenWrapper, + .euiFormControlLayoutDelimited[class*='--fullWidth'] input { + width: 100%; + max-width: none; } + .euiFormControlLayoutDelimited[class*='-isDisabled'] { + cursor: not-allowed; + color: #98A2B3; + -webkit-text-fill-color: #98A2B3; + background: #eef2f7; + box-shadow: inset 0 0 0 1px rgba(17, 43, 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'] .euiFormControlLayoutDelimited__delimeter { + background-color: #eef2f7; } + .euiFormControlLayoutDelimited[class*='--readOnly'] { + cursor: default; + background: #FFF; + border-color: transparent; + box-shadow: inset 0 0 0 1px rgba(17, 43, 134, 0.1); } + .euiFormControlLayoutDelimited[class*='--readOnly'] input, + .euiFormControlLayoutDelimited[class*='--readOnly'] .euiFormControlLayoutDelimited__delimeter { + background-color: #FFF; } + .euiFormControlLayoutDelimited .euiFormControlLayoutIcons { + position: static; + padding-left: 12px; + padding-right: 12px; + -webkit-flex-shrink: 0; + flex-shrink: 0; } + .euiFormControlLayoutDelimited .euiFormControlLayoutIcons:not(.euiFormControlLayoutIcons--right) { + -webkit-order: -1; + order: -1; } + +.euiFormControlLayoutDelimited__input { + box-shadow: none !important; + border-radius: 0 !important; + text-align: center; + height: 100%; + min-width: 0; } + .euiFormControlLayoutDelimited[class*='--compressed'] .euiFormControlLayoutDelimited__input { + max-width: none; } + +.euiFormControlLayoutDelimited__delimeter { + line-height: 1 !important; + -webkit-flex: 0 0 auto; + flex: 0 0 auto; + padding-left: 6px; + padding-right: 6px; } + +.euiFormControlLayoutIcons { + pointer-events: none; + position: absolute; + top: 0; + bottom: 0; + left: 12px; + display: -webkit-flex; + display: flex; + -webkit-align-items: center; + align-items: center; } + .euiFormControlLayoutIcons > * + * { + margin-left: 6px; } + .euiFormControlLayout--compressed .euiFormControlLayoutIcons { + left: 8px; } + +.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.85714rem; + line-height: 1.14286rem; + padding-top: 4px; + color: #BD271E; } + +.euiFormLegend { + font-size: 12px; + font-size: 0.85714rem; + line-height: 1.14286rem; + 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.85714rem; + line-height: 1.14286rem; + padding-top: 4px; + color: #69707D; } + +/** + * 1. Focused state overrides invalid state. + */ +.euiFormLabel { + font-size: 12px; + font-size: 0.85714rem; + line-height: 1.14286rem; + 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; } + +/** + * 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: 22px; + /* 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 { + overflow-wrap: break-word !important; + word-wrap: break-word !important; + word-break: break-word; + -webkit-hyphens: auto; + hyphens: auto; + max-width: 100%; } + .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; } + +.euiRadio { + position: relative; + /** + * 1. Float above the visual radio and match its dimension, so that when users try to click it + * they actually click this input. + */ } + .euiRadio .euiRadio__input { + position: absolute; + left: -10000px; + top: auto; + width: 1px; + height: 1px; + overflow: hidden; } + .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 #c9cbcd; + 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, .euiRadio .euiRadio__input:active:not(:disabled) + .euiRadio__circle { + outline: 2px solid currentColor; + outline-offset: 2px; + border-color: #07C; } + .euiRadio .euiRadio__input:focus + .euiRadio__circle:focus-visible, .euiRadio .euiRadio__input:active:not(:disabled) + .euiRadio__circle:focus-visible { + outline-style: auto; } + .euiRadio .euiRadio__input:focus + .euiRadio__circle:not(:focus-visible), .euiRadio .euiRadio__input:active:not(:disabled) + .euiRadio__circle:not(:focus-visible) { + outline: none; } + .euiRadio.euiRadio--inList, .euiRadio.euiRadio--noLabel { + min-height: 16px; + min-width: 16px; } + .euiRadio.euiRadio--inList .euiRadio__circle, .euiRadio.euiRadio--noLabel .euiRadio__circle { + top: 0; } + .euiRadio.euiRadio--inList .euiRadio__input, .euiRadio.euiRadio--noLabel .euiRadio__input { + width: 16px; + height: 16px; + /* 1 */ + position: absolute; + /* 1 */ + opacity: 0; + /* 1 */ + z-index: 1; + /* 1 */ + margin: 0; + /* 1 */ + left: 0; + /* 1 */ + cursor: pointer; } + +.euiRadioGroup__item + .euiRadioGroup__item { + margin-top: 4px; } + .euiRadioGroup__item + .euiRadioGroup__item.euiRadio--compressed { + margin-top: 0; } + +.euiRange__horizontalSpacer { + width: 16px; } + +.euiRange__slimHorizontalSpacer { + width: 8px; } + +.euiRangeHighlight { + position: absolute; + left: 0; + width: 100%; + top: calc(50% - 2px); + overflow: hidden; } + .euiRangeHighlight__progress { + height: 4px; + border-radius: 4px; + background-color: #69707D; } + .euiRangeHighlight__progress--hasFocus { + background-color: #07C; } + .euiRangeHighlight--hasTicks { + top: 8px; } + .euiRangeHighlight--hasTicks.euiRangeHighlight--compressed { + top: 6px; } + +.euiRangeInput { + width: auto; + min-width: 64px; } + .euiRange__popover .euiRangeInput { + margin: 0 !important; + width: 100%; } + +.euiRangeLabel--min, .euiRangeLabel--max { + font-size: 12px; } + +.euiRangeLabel--min { + margin-right: 8px; } + +.euiRangeLabel--max { + margin-left: 8px; } + +.euiRangeLabel--isDisabled { + opacity: 0.25; } + +.euiRangeLevels { + display: -webkit-flex; + display: flex; + -webkit-justify-content: stretch; + justify-content: stretch; + position: absolute; + left: 0; + right: 0; + top: 22px; } + .euiRangeLevels--hasTicks { + top: 12px; } + .euiRangeLevels--compressed { + top: 18px; } + .euiRangeLevels--compressed.euiRangeLevels--hasTicks { + top: 10px; } + +.euiRangeLevel { + display: block; + height: 6px; + border-radius: 6px; + margin: 2px; } + +.euiRangeLevel--primary { + background-color: rgba(0, 119, 204, 0.3); } + +.euiRangeLevel--success { + background-color: rgba(0, 191, 179, 0.3); } + +.euiRangeLevel--warning { + background-color: rgba(254, 197, 20, 0.3); } + +.euiRangeLevel--danger { + background-color: rgba(189, 39, 30, 0.3); } + +/* + * Input Range Customization by browser + */ +.euiRangeSlider { + height: 40px; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background: transparent; + width: 100%; + position: relative; + cursor: pointer; } + .euiRangeSlider:disabled { + cursor: not-allowed; } + .euiRangeSlider:disabled::-webkit-slider-thumb { + cursor: not-allowed; + border-color: #69707D; + background-color: #69707D; + box-shadow: none; } + .euiRangeSlider:disabled::-moz-range-thumb { + cursor: not-allowed; + border-color: #69707D; + background-color: #69707D; + box-shadow: none; } + .euiRangeSlider:disabled::-ms-thumb { + cursor: not-allowed; + border-color: #69707D; + background-color: #69707D; + box-shadow: none; } + .euiRangeSlider:disabled ~ .euiRangeThumb { + cursor: not-allowed; + border-color: #69707D; + background-color: #69707D; + box-shadow: none; } + .euiRangeSlider::-webkit-slider-thumb { + padding: 7px; + border: 1px solid #c9cbcd; + 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; + cursor: pointer; + border-color: #69707D; + padding: 0; + height: 16px; + width: 16px; } + .euiRangeSlider::-moz-range-thumb { + padding: 7px; + border: 1px solid #c9cbcd; + 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; + cursor: pointer; + border-color: #69707D; + padding: 0; + height: 16px; + width: 16px; } + .euiRangeSlider::-ms-thumb { + padding: 7px; + border: 1px solid #c9cbcd; + 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; + cursor: pointer; + border-color: #69707D; + padding: 0; + height: 16px; + width: 16px; } + .euiRangeSlider::-webkit-slider-runnable-track { + height: 2px; + -webkit-transition: all 250ms ease-in; + transition: all 250ms ease-in; + width: 100%; + background: #69707D; + border: 0 solid #69707D; + border-radius: 4px; } + .euiRangeSlider::-moz-range-track { + height: 2px; + -moz-transition: all 250ms ease-in; + transition: all 250ms ease-in; + width: 100%; + background: #69707D; + border: 0 solid #69707D; + border-radius: 4px; } + .euiRangeSlider::-ms-fill-lower { + height: 2px; + -ms-transition: all 250ms ease-in; + transition: all 250ms ease-in; + width: 100%; + background: #69707D; + border: 0 solid #69707D; + border-radius: 4px; } + .euiRangeSlider::-ms-fill-upper { + height: 2px; + -ms-transition: all 250ms ease-in; + transition: all 250ms ease-in; + width: 100%; + background: #69707D; + border: 0 solid #69707D; + border-radius: 4px; } + .euiRangeSlider:focus { + outline: none; } + .euiRangeSlider:focus-visible::-webkit-slider-thumb, .euiRangeSlider--hasFocus::-webkit-slider-thumb { + box-shadow: 0 0 0 2px #0071c2; } + .euiRangeSlider:focus-visible::-moz-range-thumb, .euiRangeSlider--hasFocus::-moz-range-thumb { + box-shadow: 0 0 0 2px #0071c2; } + .euiRangeSlider:focus-visible::-ms-thumb, .euiRangeSlider--hasFocus::-ms-thumb { + box-shadow: 0 0 0 2px #0071c2; } + .euiRangeSlider:focus-visible ~ .euiRangeThumb, .euiRangeSlider--hasFocus ~ .euiRangeThumb { + border-color: #07C; } + .euiRangeSlider:focus-visible::-webkit-slider-runnable-track, .euiRangeSlider--hasFocus::-webkit-slider-runnable-track { + background-color: #07C; + border-color: #07C; } + .euiRangeSlider:focus-visible::-moz-range-track, .euiRangeSlider--hasFocus::-moz-range-track { + background-color: #07C; + border-color: #07C; } + .euiRangeSlider:focus-visible::-ms-fill-lower, .euiRangeSlider--hasFocus::-ms-fill-lower { + background-color: #07C; + border-color: #07C; } + .euiRangeSlider:focus-visible::-ms-fill-upper, .euiRangeSlider--hasFocus::-ms-fill-upper { + background-color: #07C; + border-color: #07C; } + .euiRangeSlider:focus-visible ~ .euiRangeHighlight .euiRangeHighlight__progress, .euiRangeSlider--hasFocus ~ .euiRangeHighlight .euiRangeHighlight__progress { + background-color: #07C; } + .euiRangeSlider:focus-visible ~ .euiRangeTooltip .euiRangeTooltip__value, .euiRangeSlider--hasFocus ~ .euiRangeTooltip .euiRangeTooltip__value { + 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); } + .euiRangeSlider:focus-visible ~ .euiRangeTooltip .euiRangeTooltip__value.euiRangeTooltip__value--right, .euiRangeSlider:focus-visible ~ .euiRangeTooltip .euiRangeTooltip__value.euiRangeTooltip__value--left, .euiRangeSlider--hasFocus ~ .euiRangeTooltip .euiRangeTooltip__value.euiRangeTooltip__value--right, .euiRangeSlider--hasFocus ~ .euiRangeTooltip .euiRangeTooltip__value.euiRangeTooltip__value--left { + -webkit-transform: translateX(0) translateY(-50%) scale(1.1); + transform: translateX(0) translateY(-50%) scale(1.1); } + .euiRangeSlider::-webkit-slider-thumb { + -webkit-appearance: none; + margin-top: -7px; } + .euiRangeSlider::-ms-thumb { + margin-top: 0; } + .euiRangeSlider::-moz-focus-outer { + border: none; } + .euiRangeSlider::-ms-track { + height: 2px; + -ms-transition: all 250ms ease-in; + transition: all 250ms ease-in; + width: 100%; + background: transparent; + border-color: transparent; + border-width: 8px 0; + color: transparent; } + .euiRangeSlider--hasTicks { + height: 20px; } + .euiRangeSlider--compressed { + height: 32px; } + .euiRangeSlider--compressed.euiRangeSlider--hasTicks { + height: 16px; } + +.euiRangeSlider--hasRange::-webkit-slider-runnable-track { + background-color: rgba(105, 112, 125, 0.4); + border-color: rgba(105, 112, 125, 0.4); } + +.euiRangeSlider--hasRange::-moz-range-track { + background-color: rgba(105, 112, 125, 0.4); + border-color: rgba(105, 112, 125, 0.4); } + +.euiRangeSlider--hasRange::-ms-fill-lower { + background-color: rgba(105, 112, 125, 0.4); + border-color: rgba(105, 112, 125, 0.4); } + +.euiRangeSlider--hasRange::-ms-fill-upper { + background-color: rgba(105, 112, 125, 0.4); + border-color: rgba(105, 112, 125, 0.4); } + +.euiRangeThumb { + padding: 7px; + border: 1px solid #c9cbcd; + background: #FFF no-repeat center; + border-radius: 14px; + transition: background-color 150ms ease-in, border-color 150ms ease-in; + cursor: pointer; + border-color: #69707D; + padding: 0; + height: 16px; + width: 16px; + content: ''; + position: absolute; + left: 0; + top: 50%; + margin-top: -8px; + pointer-events: none; } + .euiRangeThumb:focus { + outline: 2px solid currentColor; + outline-offset: 2px; + border-color: #07C; } + .euiRangeThumb:focus:focus-visible { + outline-style: auto; } + .euiRangeThumb:focus:not(:focus-visible) { + outline: none; } + .euiRangeThumb--hasTicks { + top: 25%; } + +.euiRangeTicks { + position: absolute; + left: 2px; + right: 2px; + top: 8px; + display: -webkit-flex; + display: flex; } + +.euiRangeTick { + overflow-x: hidden; + text-overflow: ellipsis; + font-size: 12px; + position: relative; + padding-top: 16px; } + .euiRangeTick:not(.euiRangeTick--hasTickMark)::before { + width: 4px; + height: 4px; + background-color: #69707D; + border-radius: 100%; + position: absolute; + top: 0; + content: ''; + left: calc(50% - 2px); } + .euiRangeTick .euiRangeTick__pseudo { + width: 4px; + height: 4px; + background-color: #69707D; + border-radius: 100%; + position: absolute; + top: 0; } + .euiRangeTick--isCustom { + position: absolute; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); } + .euiRangeTick--isMin, .euiRangeTick--isMax { + -webkit-transform: translateX(0); + transform: translateX(0); + overflow-x: visible; } + .euiRangeTick--isMin .euiRangeTick__pseudo { + left: 0; } + .euiRangeTick--isMax .euiRangeTick__pseudo { + right: 0; } + .euiRangeTick:enabled:hover, .euiRangeTick:focus, .euiRangeTick--selected { + color: #07C; } + .euiRangeTick--selected { + font-weight: 500; } + .euiRangeTick:disabled { + cursor: not-allowed; } + +.euiRangeTicks--compressed { + top: 6px; } + .euiRangeTicks--compressed .euiRangeTick { + padding-top: 14px; } + +.euiRangeTick__label { + pointer-events: none; } + +.euiRangeTooltip { + display: block; + position: absolute; + left: 0; + top: 0; + bottom: 0; + width: calc(100% - 16px); + margin-left: 8px; + pointer-events: none; } + +.euiRangeTooltip__value { + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + border: 1px solid #404040; + position: absolute; + border-radius: 6px; + padding: 2px 8px; + background-color: #404040; + color: #FFF; + max-width: 256px; + top: 50%; + transition: box-shadow 250ms cubic-bezier(0.694, 0.0482, 0.335, 1), -webkit-transform 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); + transition: box-shadow 250ms cubic-bezier(0.694, 0.0482, 0.335, 1), transform 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); + transition: box-shadow 250ms cubic-bezier(0.694, 0.0482, 0.335, 1), transform 250ms cubic-bezier(0.694, 0.0482, 0.335, 1), -webkit-transform 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } + .euiRangeTooltip__value::after, .euiRangeTooltip__value::before { + content: ''; + position: absolute; + bottom: -6px; + left: 50%; + -webkit-transform-origin: center; + transform-origin: center; + background-color: #404040; + width: 12px; + height: 12px; + border-radius: 2px; } + .euiRangeTooltip__value::before { + background-color: #404040; } + .euiRangeTooltip__value.euiRangeTooltip__value--right { + margin-left: 24px; } + .euiRangeTooltip__value.euiRangeTooltip__value--right:before, .euiRangeTooltip__value.euiRangeTooltip__value--right:after { + left: -5px; } + .euiRangeTooltip__value.euiRangeTooltip__value--right::before { + margin-left: -1px; } + .euiRangeTooltip__value.euiRangeTooltip__value--left { + margin-right: 24px; } + .euiRangeTooltip__value.euiRangeTooltip__value--left:before, .euiRangeTooltip__value.euiRangeTooltip__value--left:after { + left: auto; + right: -5px; } + .euiRangeTooltip__value.euiRangeTooltip__value--left::before { + margin-right: -1px; } + .euiRangeTooltip__value.euiRangeTooltip__value--right, .euiRangeTooltip__value.euiRangeTooltip__value--left { + -webkit-transform: translateX(0) translateY(-50%); + transform: translateX(0) translateY(-50%); } + .euiRangeTooltip__value.euiRangeTooltip__value--right:before, .euiRangeTooltip__value.euiRangeTooltip__value--right:after, .euiRangeTooltip__value.euiRangeTooltip__value--left:before, .euiRangeTooltip__value.euiRangeTooltip__value--left:after { + bottom: 50%; + -webkit-transform: translateY(50%) rotateZ(45deg); + transform: translateY(50%) rotateZ(45deg); } + .euiRangeTooltip__value--hasTicks { + top: 10px; } + .euiRangeTooltip--compressed .euiRangeTooltip__value--hasTicks { + top: 8px; } + +.euiRangeTrack { + height: 100%; + -webkit-flex-grow: 1; + flex-grow: 1; + position: relative; + -webkit-align-self: flex-start; + align-self: flex-start; } + .euiRangeTrack--hasTicks { + margin-left: 1em; + margin-right: 1em; } + .euiRangeTrack--disabled { + opacity: 0.25; } + +/* + * 1. There's no way to target the layout of the extra input, so we must + * use the descendant selector to allow the width to shrink. + * + * 2. Prevent the prepend/append label from extending outside the parent element + */ +.euiRangeWrapper { + max-width: 400px; + width: 100%; + height: 40px; + display: -webkit-flex; + display: flex; + -webkit-align-items: center; + align-items: center; } + .euiRangeWrapper--fullWidth { + max-width: 100%; } + .euiRangeWrapper--compressed { + height: 32px; } + .euiRangeWrapper--inGroup { + height: 100%; } + .euiRangeWrapper > .euiFormControlLayout { + /* 1 */ + width: auto; } + .euiRangeWrapper > .euiFormControlLayout.euiFormControlLayout--group { + -webkit-flex-shrink: 0; + flex-shrink: 0; + /* 2 */ } + +.euiDualRange__slider::-webkit-slider-thumb { + visibility: hidden; } + +.euiDualRange__slider::-moz-range-thumb { + visibility: hidden; } + +.euiDualRange__slider::-ms-thumb { + visibility: hidden; } + +/** + * 1. Leave room for caret. + * 2. 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, 43, 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", -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-right: 40px; + /* 1 */ + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + line-height: 40px; + /* 2 */ + padding-top: 0; + /* 2 */ + padding-bottom: 0; + /* 2 */ } + .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; } } + @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { + .euiSelect { + line-height: 1em; } } + .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, 43, 134, 0.1); } + .euiSelect:disabled { + cursor: not-allowed; + color: #98A2B3; + -webkit-text-fill-color: #98A2B3; + background: #eef2f7; + box-shadow: inset 0 0 0 1px rgba(17, 43, 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; + background: #FFF; + border-color: transparent; + box-shadow: inset 0 0 0 1px rgba(17, 43, 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, 43, 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, 43, 134, 0.1); } + .euiSelect--compressed:disabled { + cursor: not-allowed; + color: #98A2B3; + -webkit-text-fill-color: #98A2B3; + background: #eef2f7; + box-shadow: inset 0 0 0 1px rgba(17, 43, 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; + background: #FFF; + border-color: transparent; + box-shadow: inset 0 0 0 1px rgba(17, 43, 134, 0.1); } + .euiSelect--inGroup { + box-shadow: none !important; + border-radius: 0; } + .euiSelect-isLoading { + padding-right: 62px; } + .euiSelect-isLoading.euiSelect--compressed { + padding-right: 54px; } + .euiSelect--compressed { + padding-right: 32px; + /* 1 */ + line-height: 32px; + /* 2 */ + padding-top: 0; + /* 2 */ + padding-bottom: 0; + /* 2 */ } + .euiSelect--inGroup { + line-height: 38px; + /* 2 */ } + .euiSelect--inGroup.euiSelect--compressed { + line-height: 30px; + /* 2 */ } + .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-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); + border: 6px solid transparent; + background-clip: content-box; } + .euiSuperSelect__listbox::-webkit-scrollbar-corner, .euiSuperSelect__listbox::-webkit-scrollbar-track { + background-color: transparent; } + +.euiSuperSelect__item { + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + 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. Leave room for caret. + * 2. Ensure the descenders don't get cut off + * 3. 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, 43, 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", -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-right: 40px; + /* 1 */ + display: block; + /* 3 */ + text-align: left; + line-height: 40px; + /* 2 */ + padding-top: 0; + /* 2 */ + padding-bottom: 0; + /* 2 */ + 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; } } + @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { + .euiSuperSelectControl { + line-height: 1em; } } + .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, 43, 134, 0.1); } + .euiSuperSelectControl:disabled { + cursor: not-allowed; + color: #98A2B3; + -webkit-text-fill-color: #98A2B3; + background: #eef2f7; + box-shadow: inset 0 0 0 1px rgba(17, 43, 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; + background: #FFF; + border-color: transparent; + box-shadow: inset 0 0 0 1px rgba(17, 43, 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, 43, 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, 43, 134, 0.1); } + .euiSuperSelectControl--compressed:disabled { + cursor: not-allowed; + color: #98A2B3; + -webkit-text-fill-color: #98A2B3; + background: #eef2f7; + box-shadow: inset 0 0 0 1px rgba(17, 43, 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; + background: #FFF; + border-color: transparent; + box-shadow: inset 0 0 0 1px rgba(17, 43, 134, 0.1); } + .euiSuperSelectControl--inGroup { + box-shadow: none !important; + border-radius: 0; } + .euiSuperSelectControl-isLoading { + padding-right: 62px; } + .euiSuperSelectControl-isLoading.euiSuperSelectControl--compressed { + padding-right: 54px; } + .euiSuperSelectControl-isInvalid { + background-image: linear-gradient(to top, #BD271E, #BD271E 2px, transparent 2px, transparent 100%); + background-size: 100%; } + .euiSuperSelectControl--compressed { + padding-right: 32px; + /* 1 */ + line-height: 32px; + /* 2 */ + padding-top: 0; + /* 2 */ + padding-bottom: 0; + /* 2 */ } + .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, 43, 134, 0.1); } + +.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:disabled:hover, + .euiSwitch .euiSwitch__button:disabled ~ .euiSwitch__label:hover { + cursor: not-allowed; } + .euiSwitch .euiSwitch__button:disabled .euiSwitch__body { + background-color: rgba(152, 162, 179, 0.2); } + .euiSwitch .euiSwitch__button:disabled .euiSwitch__thumb { + border-color: #D3DAE6; + background-color: #D3DAE6; + box-shadow: none; + background-color: rgba(152, 162, 179, 0.2); } + .euiSwitch .euiSwitch__button:disabled .euiSwitch__icon { + fill: #5e646f; } + .euiSwitch .euiSwitch__button:disabled + .euiSwitch__label { + color: #98A2B3; } + .euiSwitch .euiSwitch__button[aria-checked='false'] .euiSwitch__body { + background-color: rgba(152, 162, 179, 0.2); } + .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__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 #c9cbcd; + 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: #343741; } + .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 #c9cbcd; + 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 #c9cbcd; + 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: #c9cbcd; } + .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, 43, 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", -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; } } + @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { + .euiTextArea { + line-height: 1em; } } + .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, 43, 134, 0.1); } + .euiTextArea:disabled { + cursor: not-allowed; + color: #98A2B3; + -webkit-text-fill-color: #98A2B3; + background: #eef2f7; + box-shadow: inset 0 0 0 1px rgba(17, 43, 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; + background: #FFF; + border-color: transparent; + box-shadow: inset 0 0 0 1px rgba(17, 43, 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, 43, 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, 43, 134, 0.1); } + .euiTextArea--compressed:disabled { + cursor: not-allowed; + color: #98A2B3; + -webkit-text-fill-color: #98A2B3; + background: #eef2f7; + box-shadow: inset 0 0 0 1px rgba(17, 43, 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; + background: #FFF; + border-color: transparent; + box-shadow: inset 0 0 0 1px rgba(17, 43, 134, 0.1); } + .euiTextArea--inGroup { + box-shadow: none !important; + border-radius: 0; } + .euiTextArea, .euiTextArea--compressed { + height: auto; } + +.euiTextArea--resizeVertical { + resize: vertical; } + +.euiTextArea--resizeHorizontal { + resize: horizontal; } + +.euiTextArea--resizeBoth { + resize: both; } + +.euiTextArea--resizeNone { + resize: none; } + +.euiHeader { + 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: 49px; + position: relative; + z-index: 999; + display: -webkit-flex; + display: flex; + -webkit-justify-content: space-between; + justify-content: space-between; + background: #FFF; + border-bottom: 1px solid #cdd3df; } + .euiHeader--fixed { + z-index: 1000; + position: fixed; + top: 0; + left: 0; + right: 0; } + +.euiHeader--fixed + .euiHeader--fixed { + top: 48px; } + +.euiHeader--dark { + background-color: #25282f; + border-bottom-color: #25282f; } + .euiHeader--dark .euiHeaderLogo__text, + .euiHeader--dark .euiHeaderLink, + .euiHeader--dark .euiHeaderSectionItemButton { + color: #FFF; } + .euiHeader--dark .euiHeaderLink-isActive { + color: #3a96d7; } + .euiHeader--dark .euiHeaderSectionItem:after { + background: #69707D; } + .euiHeader--dark .euiHeaderLogo:focus, + .euiHeader--dark .euiHeaderLink:focus, + .euiHeader--dark .euiHeaderSectionItemButton:focus { + background: #003c66; } + .euiHeader--dark .euiHeaderSectionItemButton__notification--badge { + box-shadow: 0 0 0 1px #25282f; } + .euiHeader--dark .euiHeaderSectionItemButton__notification--dot { + stroke: #25282f; } + +.euiHeaderProfile { + padding: 16px; } + +.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; } + +.euiHeaderLogo { + text-align: left; + position: relative; + height: 40px; + line-height: 40px; + min-width: 41px; + padding: 0 13px 0 12px; + display: -webkit-inline-flex; + display: inline-flex; + -webkit-align-items: center; + align-items: center; + vertical-align: middle; + white-space: nowrap; } + .euiHeaderLogo:hover { + text-decoration: underline; } + .euiHeaderLogo:focus { + text-decoration: underline; + background: rgba(0, 119, 204, 0.1); } + .euiHeaderLogo:focus, .euiHeaderLogo:hover { + text-decoration: none; } + +.euiHeaderLogo__text { + color: #1a1c21; + font-size: 22px; + font-size: 1.57143rem; + line-height: 2.28571rem; + font-weight: 700; + padding-left: 16px; + font-weight: 300; } + +@media only screen and (max-width: 574px) { + .euiHeaderLogo { + padding: 0 12px; } + .euiHeaderLogo__icon.euiIcon--xLarge { + width: 24px; + height: 24px; } + .euiHeaderLogo__text { + color: #1a1c21; + font-size: 16px; + font-size: 1.14286rem; + line-height: 1.71429rem; + font-weight: 700; + font-weight: 400; } } + +.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 { + color: #1a1c21; + font-size: 16px; + font-size: 1.14286rem; + line-height: 1.71429rem; + font-weight: 700; + margin-bottom: 8px; } + .euiHeaderAlert .euiHeaderAlert__text { + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + margin-bottom: 16px; } + .euiHeaderAlert .euiHeaderAlert__action { + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; } + .euiHeaderAlert .euiHeaderAlert__date { + font-size: 12px; + font-size: 0.85714rem; + line-height: 1.14286rem; + color: #69707D; } + +.euiHeaderBreadcrumbs { + margin-left: 12px; + margin-right: 12px; + display: -webkit-flex; + display: flex; + -webkit-align-items: center; + align-items: center; + -webkit-flex-grow: 1; + flex-grow: 1; } + +.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%; } } + +.euiHealth { + display: inline-block; } + +.euiHealth--textSizeXS { + font-size: 12px; + font-size: 0.85714rem; + line-height: 1.14286rem; } + +.euiHealth--textSizeS { + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; } + +.euiHealth--textSizeM { + font-size: 16px; + font-size: 1.14286rem; + line-height: 1.71429rem; } + +.euiHealth--textSizeInherit { + font-size: inherit; } + +.euiHorizontalRule { + border: none; + height: 1px; + background-color: #D3DAE6; + -webkit-flex-shrink: 0; + flex-shrink: 0; + -webkit-flex-grow: 0; + flex-grow: 0; } + .euiHorizontalRule.euiHorizontalRule--full { + width: 100%; } + .euiHorizontalRule.euiHorizontalRule--half { + width: 50%; + margin-left: auto; + margin-right: auto; } + .euiHorizontalRule.euiHorizontalRule--quarter { + width: 25%; + margin-left: auto; + margin-right: auto; } + +.euiHorizontalRule--marginXSmall { + margin: 8px 0; } + +.euiHorizontalRule--marginSmall { + margin: 12px 0; } + +.euiHorizontalRule--marginMedium { + margin: 16px 0; } + +.euiHorizontalRule--marginLarge { + margin: 24px 0; } + +.euiHorizontalRule--marginXLarge { + margin: 32px 0; } + +.euiHorizontalRule--marginXXLarge { + margin: 40px 0; } + +.euiIcon { + -webkit-flex-shrink: 0; + flex-shrink: 0; + display: inline-block; + vertical-align: middle; + fill: currentColor; + -webkit-transform: translate(0, 0); + transform: translate(0, 0); } + .euiIcon:focus { + opacity: 1; + background: rgba(0, 119, 204, 0.1); } + +.euiIcon--app { + fill: #343741; } + .euiIcon--app .euiIcon__fillSecondary { + fill: #00a39a; } + +.euiIcon-isLoading { + opacity: 0.05; + background-color: currentColor; + border-radius: 6px; } + +.euiIcon-isLoaded { + -webkit-animation: euiIconLoading 250ms ease-in 0s 1 forwards; + animation: euiIconLoading 250ms ease-in 0s 1 forwards; } + +.euiIcon--accent { + color: #F04E98; } + +.euiIcon--danger { + color: #BD271E; } + +.euiIcon--ghost { + color: #FFF; } + +.euiIcon--primary { + color: #07C; } + +.euiIcon--secondary { + color: #00a39a; } + +.euiIcon--success { + color: #00a39a; } + +.euiIcon--subdued { + color: #69707D; } + +.euiIcon--text { + color: #343741; } + +.euiIcon--warning { + color: #b28a0d; } + +.euiIcon--inherit { + color: inherit; } + +.euiIcon--text, +.euiIcon--text .euiIcon__fillSecondary, +.euiIcon--subdued, +.euiIcon--subdued .euiIcon__fillSecondary, +.euiIcon--primary, +.euiIcon--primary .euiIcon__fillSecondary, +.euiIcon--customColor, +.euiIcon--customColor .euiIcon__fillSecondary { + fill: currentColor; } + +.euiIcon__fillNegative { + fill: #343741; } + +.euiIcon--small { + width: 12px; + height: 12px; } + +.euiIcon--medium { + width: 16px; + height: 16px; } + +.euiIcon--large { + width: 24px; + height: 24px; } + +.euiIcon--xLarge { + width: 32px; + height: 32px; } + +.euiIcon--xxLarge { + width: 40px; + height: 40px; } + +@-webkit-keyframes euiIconLoading { + 0% { + opacity: 0.05; } + 100% { + opacity: 1; } } + +@keyframes euiIconLoading { + 0% { + opacity: 0.05; } + 100% { + opacity: 1; } } + +/** + * 1. Fix for IE where the image correctly resizes in width but doesn't collapse its height + (https://github.com/philipwalton/flexbugs/issues/75#issuecomment-134702421) + */ +.euiImage { + display: inline-block; + max-width: 100%; + position: relative; + min-height: 1px; + /* 1 */ + line-height: 0; + -webkit-flex-shrink: 0; + flex-shrink: 0; } + .euiImage .euiImage__img { + margin-bottom: 0; } + .euiImage.euiImage--hasShadow .euiImage__img { + 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); } + .euiImage .euiImage__button { + position: relative; + cursor: pointer; + transition: all 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); } + .euiImage .euiImage__button:focus { + outline: 2px solid #0071c2; } + .euiImage .euiImage__button:hover .euiImage__icon { + visibility: visible; + fill-opacity: 1; } + .euiImage .euiImage__button--fullWidth { + width: 100%; } + .euiImage.euiImage--allowFullScreen:hover .euiImage__caption { + text-decoration: underline; } + .euiImage.euiImage--allowFullScreen:not(.euiImage--hasShadow) .euiImage__button:hover, + .euiImage.euiImage--allowFullScreen:not(.euiImage--hasShadow) .euiImage__button:focus { + 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); } + .euiImage.euiImage--allowFullScreen.euiImage--hasShadow .euiImage__button:hover, + .euiImage.euiImage--allowFullScreen.euiImage--hasShadow .euiImage__button: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); } + .euiImage.euiImage--small .euiImage__img { + width: 8.57143rem; } + .euiImage.euiImage--medium .euiImage__img { + width: 14.28571rem; } + .euiImage.euiImage--large .euiImage__img { + width: 25.71429rem; } + .euiImage.euiImage--xlarge .euiImage__img { + width: 42.85714rem; } + .euiImage.euiImage--fullWidth { + width: 100%; } + .euiImage.euiImage--original .euiImage__img { + width: auto; + max-width: 100%; } + .euiImage.euiImage--floatLeft { + float: left; } + .euiImage.euiImage--floatLeft[class*='euiImage--margin'] { + margin-left: 0; + margin-top: 0; } + .euiImage.euiImage--floatRight { + float: right; } + .euiImage.euiImage--floatRight[class*='euiImage--margin'] { + margin-right: 0; + margin-top: 0; } + .euiImage.euiImage--marginSmall { + margin: 8px; } + .euiImage.euiImage--marginMedium { + margin: 16px; } + .euiImage.euiImage--marginLarge { + margin: 24px; } + .euiImage.euiImage--marginXlarge { + margin: 32px; } + +.euiImage__img { + width: 100%; + vertical-align: middle; } + +.euiImage__caption { + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + margin-top: 4px; + text-align: center; } + +.euiImage__icon { + visibility: hidden; + fill-opacity: 0; + position: absolute; + right: 16px; + top: 16px; + transition: fill-opacity 350ms cubic-bezier(0.694, 0.0482, 0.335, 1); + cursor: pointer; } + +.euiImage-isFullScreen { + position: relative; + max-height: 80vh; + max-width: 80vw; + -webkit-animation: euiImageFullScreen 500ms cubic-bezier(0.34, 1.61, 0.7, 1); + animation: euiImageFullScreen 500ms cubic-bezier(0.34, 1.61, 0.7, 1); } + .euiImage-isFullScreen:hover .euiImage__button { + 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); } + .euiImage-isFullScreen:hover .euiImage__caption { + text-decoration: underline; } + .euiImage-isFullScreen__img { + max-height: 80vh; + max-width: 80vw; + vertical-align: middle; + cursor: pointer; + transition: all 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); } + +.euiImage-isFullScreenCloseIcon { + position: absolute; + right: 16px; + top: 16px; + pointer-events: none; } + +@-webkit-keyframes euiImageFullScreen { + 0% { + opacity: 0; + -webkit-transform: translateY(64px); + transform: translateY(64px); } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); } } + +@keyframes euiImageFullScreen { + 0% { + opacity: 0; + -webkit-transform: translateY(64px); + transform: translateY(64px); } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); } } + +@media only screen and (max-width: 574px) { + .euiImage.euiImage--floatLeft, .euiImage.euiImage--floatRight { + float: none; } + .euiImage.euiImage--floatLeft[class*='euiImage--margin'], .euiImage.euiImage--floatRight[class*='euiImage--margin'] { + margin-top: inherit; + margin-right: inherit; + margin-bottom: inherit; + margin-left: inherit; } } + +@media only screen and (min-width: 575px) and (max-width: 767px) { + .euiImage.euiImage--floatLeft, .euiImage.euiImage--floatRight { + float: none; } + .euiImage.euiImage--floatLeft[class*='euiImage--margin'], .euiImage.euiImage--floatRight[class*='euiImage--margin'] { + margin-top: inherit; + margin-right: inherit; + margin-bottom: inherit; + margin-left: inherit; } } + +@media only screen and (min-width: 768px) and (max-width: 991px) { + .euiImage.euiImage--floatLeft, .euiImage.euiImage--floatRight { + float: none; } + .euiImage.euiImage--floatLeft[class*='euiImage--margin'], .euiImage.euiImage--floatRight[class*='euiImage--margin'] { + margin-top: inherit; + margin-right: inherit; + margin-bottom: inherit; + margin-left: inherit; } } + +/** + * 1. Default to grid of 3 + */ +.euiKeyPadMenu { + display: -webkit-flex; + display: flex; + -webkit-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + flex-wrap: wrap; + width: 288px; + max-width: 100%; } + +/** + * 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", -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; + color: #69707D; + border: 1px solid #D3DAE6; + border-color: transparent; + border-radius: 6px; + transition: border-color 150ms ease-in, box-shadow 150ms ease-in; } + .euiKeyPadMenuItem:not(:disabled):hover, .euiKeyPadMenuItem:not(:disabled):focus { + 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; } + .euiKeyPadMenuItem:not(:disabled):hover .euiKeyPadMenuItem__icon, .euiKeyPadMenuItem:not(:disabled):focus .euiKeyPadMenuItem__icon { + -webkit-transform: translateY(0); + transform: translateY(0); } + .euiKeyPadMenuItem:disabled { + color: #ABB4C4; + cursor: not-allowed; } + .euiKeyPadMenuItem:disabled .euiKeyPadMenuItem__icon { + -webkit-filter: grayscale(100%); + filter: grayscale(100%); } + .euiKeyPadMenuItem:disabled .euiKeyPadMenuItem__icon svg * { + fill: #ABB4C4; } + +.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; } + .euiKeyPadMenuItem--hasBetaBadge .euiKeyPadMenuItem__inner { + position: relative; } + .euiKeyPadMenuItem--hasBetaBadge .euiKeyPadMenuItem__inner .euiKeyPadMenuItem__betaBadgeWrapper { + position: absolute; + top: 4px; + right: 8px; + z-index: 3; } + .euiKeyPadMenuItem--hasBetaBadge .euiKeyPadMenuItem__inner .euiKeyPadMenuItem__betaBadgeWrapper .euiKeyPadMenuItem__betaBadge:not(.euiBetaBadge--iconOnly) { + padding: 0 6px; + /* 2 */ + overflow: hidden; + /* 2 */ + letter-spacing: 3rem; + /* 2 */ } + +.euiKeyPadMenuItem__betaBadge { + width: 20px; + height: 20px; + line-height: 20px; + color: #000; + background-color: #e9edf3; + box-shadow: none; } + .euiKeyPadMenuItem__betaBadge .euiBetaBadge__icon { + width: 12px; + height: 12px; } + +.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); + -webkit-transform: translateY(2px); + transform: translateY(2px); + margin-bottom: 12px; } + +.euiKeyPadMenuItem__label { + font-size: 12px; + font-weight: 500; + line-height: 16px; + text-align: center; } + +.euiLink { + text-align: left; } + .euiLink:hover { + text-decoration: underline; } + .euiLink:focus { + text-decoration: underline; + background: rgba(0, 119, 204, 0.1); } + .euiLink .euiLink__externalIcon { + margin-left: 4px; } + .euiLink.euiLink-disabled { + text-decoration: none; + cursor: default; } + .euiLink.euiLink--subdued { + color: #69707D; } + .euiLink.euiLink--subdued:hover, .euiLink.euiLink--subdued:focus { + color: #525761; + text-decoration: underline; } + .euiLink.euiLink--subdued:focus { + background-color: rgba(105, 112, 125, 0.1); + outline: 2px solid currentColor; + outline-offset: 0px; } + .euiLink.euiLink--subdued:focus:focus-visible { + outline-style: auto; } + .euiLink.euiLink--subdued:focus:not(:focus-visible) { + outline: none; } + .euiLink.euiLink--primary { + color: #0071c2; } + .euiLink.euiLink--primary:hover, .euiLink.euiLink--primary:focus { + color: #00538f; + text-decoration: underline; } + .euiLink.euiLink--primary:focus { + background-color: rgba(0, 113, 194, 0.1); + outline: 2px solid currentColor; + outline-offset: 0px; } + .euiLink.euiLink--primary:focus:focus-visible { + outline-style: auto; } + .euiLink.euiLink--primary:focus:not(:focus-visible) { + outline: none; } + .euiLink.euiLink--secondary { + color: #007e77; } + .euiLink.euiLink--secondary:hover, .euiLink.euiLink--secondary:focus { + color: #004b47; + text-decoration: underline; } + .euiLink.euiLink--secondary:focus { + background-color: rgba(0, 126, 119, 0.1); + outline: 2px solid currentColor; + outline-offset: 0px; } + .euiLink.euiLink--secondary:focus:focus-visible { + outline-style: auto; } + .euiLink.euiLink--secondary:focus:not(:focus-visible) { + outline: none; } + .euiLink.euiLink--accent { + color: #c4407c; } + .euiLink.euiLink--accent:hover, .euiLink.euiLink--accent:focus { + color: #a03163; + text-decoration: underline; } + .euiLink.euiLink--accent:focus { + background-color: rgba(196, 64, 124, 0.1); + outline: 2px solid currentColor; + outline-offset: 0px; } + .euiLink.euiLink--accent:focus:focus-visible { + outline-style: auto; } + .euiLink.euiLink--accent:focus:not(:focus-visible) { + outline: none; } + .euiLink.euiLink--warning { + color: #8a6a0a; } + .euiLink.euiLink--warning:hover, .euiLink.euiLink--warning:focus { + color: #5a4507; + text-decoration: underline; } + .euiLink.euiLink--warning:focus { + background-color: rgba(138, 106, 10, 0.1); + outline: 2px solid currentColor; + outline-offset: 0px; } + .euiLink.euiLink--warning:focus:focus-visible { + outline-style: auto; } + .euiLink.euiLink--warning:focus:not(:focus-visible) { + outline: none; } + .euiLink.euiLink--danger { + color: #BD271E; } + .euiLink.euiLink--danger:hover, .euiLink.euiLink--danger:focus { + color: #911e17; + text-decoration: underline; } + .euiLink.euiLink--danger:focus { + background-color: rgba(189, 39, 30, 0.1); + outline: 2px solid currentColor; + outline-offset: 0px; } + .euiLink.euiLink--danger:focus:focus-visible { + outline-style: auto; } + .euiLink.euiLink--danger:focus:not(:focus-visible) { + outline: none; } + .euiLink.euiLink--text { + color: #343741; } + .euiLink.euiLink--text:hover, .euiLink.euiLink--text:focus { + color: #1d1f25; + text-decoration: underline; } + .euiLink.euiLink--text:focus { + background-color: rgba(52, 55, 65, 0.1); + outline: 2px solid currentColor; + outline-offset: 0px; } + .euiLink.euiLink--text:focus:focus-visible { + outline-style: auto; } + .euiLink.euiLink--text:focus:not(:focus-visible) { + outline: none; } + .euiLink.euiLink--ghost { + color: #FFF; } + .euiLink.euiLink--ghost:hover, .euiLink.euiLink--ghost:focus { + color: #e6e6e6; + text-decoration: underline; } + .euiLink.euiLink--ghost:focus { + background-color: rgba(255, 255, 255, 0.1); + outline: 2px solid currentColor; + outline-offset: 0px; } + .euiLink.euiLink--ghost:focus:focus-visible { + outline-style: auto; } + .euiLink.euiLink--ghost:focus:not(:focus-visible) { + outline: none; } + +button.euiLink { + -webkit-user-select: text; + -moz-user-select: text; + user-select: text; } + +/** + * The List Group component provides neatly styled lists containing plain text + * or links. The outer container can be bordered, with padding, or borderless + * with links flush to the sides. + */ +.euiListGroup.euiListGroup-flush { + padding: 0; + border: none; } + +.euiListGroup.euiListGroup-bordered { + border-radius: 6px; + border: 1px solid #D3DAE6; } + +.euiListGroup-maxWidthDefault { + max-width: 400px; } + +.euiListGroup--gutterSmall { + padding: 8px; } + .euiListGroup--gutterSmall .euiListGroupItem:not(:first-of-type) { + margin-top: 8px; } + +.euiListGroup--gutterMedium { + padding: 16px; } + .euiListGroup--gutterMedium .euiListGroupItem:not(:first-of-type) { + margin-top: 16px; } + +.euiListGroupItem { + padding: 0; + border-radius: 6px; + display: -webkit-flex; + display: flex; + -webkit-align-items: center; + align-items: center; + transition: background-color 150ms; + position: relative; } + .euiListGroupItem.euiListGroupItem-isActive, .euiListGroupItem.euiListGroupItem-isClickable:hover { + background-color: rgba(211, 218, 230, 0.25); } + .euiListGroupItem.euiListGroupItem-isClickable:focus-within { + background-color: rgba(211, 218, 230, 0.25); } + .euiListGroupItem.euiListGroupItem--ghost.euiListGroupItem-isClickable:hover { + background-color: rgba(255, 255, 255, 0.1); } + .euiListGroupItem.euiListGroupItem--ghost.euiListGroupItem-isClickable:focus-within { + background-color: rgba(255, 255, 255, 0.1); } + .euiListGroupItem.euiListGroupItem-isClickable:hover .euiListGroupItem__button, + .euiListGroupItem .euiListGroupItem__button:hover, + .euiListGroupItem .euiListGroupItem__button:focus { + text-decoration: underline; } + .euiListGroupItem.euiListGroupItem-isDisabled, .euiListGroupItem.euiListGroupItem-isDisabled:hover, .euiListGroupItem.euiListGroupItem-isDisabled:focus, + .euiListGroupItem.euiListGroupItem-isDisabled .euiListGroupItem__button:hover, + .euiListGroupItem.euiListGroupItem-isDisabled .euiListGroupItem__button:focus { + color: #ABB4C4; + cursor: not-allowed; + background-color: transparent; + text-decoration: none; } + +@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { + .euiListGroupItem__button:hover, + .euiListGroupItem__button:focus { + background-color: rgba(211, 218, 230, 0.25); + border-radius: 6px; } + .euiListGroupItem__button:hover .euiListGroupItem--ghost .euiListGroupItem__button:hover, + .euiListGroupItem__button:hover .euiListGroupItem--ghost .euiListGroupItem__button:focus, + .euiListGroupItem__button:focus .euiListGroupItem--ghost .euiListGroupItem__button:hover, + .euiListGroupItem__button:focus .euiListGroupItem--ghost .euiListGroupItem__button:focus { + background-color: rgba(255, 255, 255, 0.1); } } + +.euiListGroupItem__text, +.euiListGroupItem__button { + line-height: 24px; + padding: 4px 8px; + display: -webkit-flex; + display: flex; + -webkit-align-items: center; + align-items: center; + -webkit-flex: 1 0 auto; + flex: 1 0 auto; + text-align: left; + max-width: 100%; + font-weight: inherit; } + .euiListGroupItem-hasExtraAction .euiListGroupItem__text, .euiListGroupItem-hasExtraAction + .euiListGroupItem__button { + max-width: calc(100% - 32px); } + .euiListGroupItem--primary .euiListGroupItem__text:not(:disabled), .euiListGroupItem--primary + .euiListGroupItem__button:not(:disabled) { + color: #0071c2; } + .euiListGroupItem--text .euiListGroupItem__text:not(:disabled), .euiListGroupItem--text + .euiListGroupItem__button:not(:disabled) { + color: #343741; } + .euiListGroupItem--subdued .euiListGroupItem__text:not(:disabled), .euiListGroupItem--subdued + .euiListGroupItem__button:not(:disabled) { + color: #69707D; } + .euiListGroupItem--ghost .euiListGroupItem__text:not(:disabled), .euiListGroupItem--ghost + .euiListGroupItem__button:not(:disabled) { + color: #FFF; } + .euiListGroupItem-isActive:not(.euiListGroupItem--ghost) .euiListGroupItem__text, .euiListGroupItem-isActive:not(.euiListGroupItem--ghost) + .euiListGroupItem__button { + color: #343741; } + +.euiListGroupItem__label { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } + +.euiListGroupItem__extraAction { + opacity: 0; + margin-right: 8px; + transition: opacity 150ms; } + .euiListGroupItem:not(.euiListGroupItem-isDisabled):focus .euiListGroupItem__extraAction, + .euiListGroupItem:not(.euiListGroupItem-isDisabled):hover .euiListGroupItem__extraAction, .euiListGroupItem__extraAction.euiListGroupItem__extraAction-alwaysShow, .euiListGroupItem__extraAction:focus { + opacity: 1; } + +.euiListGroupItem__icon { + margin-right: 12px; + -webkit-flex-grow: 0; + flex-grow: 0; + -webkit-flex-shrink: 0; + flex-shrink: 0; } + +.euiListGroupItem--xSmall { + font-size: 12px; } + +.euiListGroupItem--small { + font-size: 14px; } + +.euiListGroupItem--medium { + font-size: 14px; } + +.euiListGroupItem--large { + font-size: 22px; } + +.euiListGroupItem--xSmall, +.euiListGroupItem--small { + font-weight: 500; + letter-spacing: 0; } + +.euiListGroupItem--xSmall .euiListGroupItem__button, +.euiListGroupItem--xSmall .euiListGroupItem__text { + line-height: 16px; } + +.euiListGroupItem--large .euiListGroupItem__button, +.euiListGroupItem--large .euiListGroupItem__text { + line-height: 32px; } + +.euiListGroupItem--wrapText .euiListGroupItem__button, +.euiListGroupItem--wrapText .euiListGroupItem__text { + width: 100%; + word-break: break-word; } + +.euiListGroupItem--wrapText .euiListGroupItem__label { + white-space: inherit; } + +.euiListGroup-flush .euiListGroupItem { + border-radius: 0; } + +.euiListGroup-bordered .euiListGroupItem:first-child { + border-top-left-radius: 6px; + border-top-right-radius: 6px; } + +.euiListGroup-bordered .euiListGroupItem:last-child { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; } + +.euiListGroupItem__tooltip { + width: 100%; } + +.euiPinnableListGroup__itemExtraAction svg { + -webkit-transform: rotate(45deg); + transform: rotate(45deg); } + +.euiPinnableListGroup__itemExtraAction-pinned:not(:hover):not(:focus) { + color: #8c919a; } + +.euiLoadingKibana { + position: relative; + display: inline-block; } + .euiLoadingKibana:before, .euiLoadingKibana:after { + position: absolute; + content: ''; + width: 90%; + left: 5%; + border-radius: 50%; + opacity: .2; + z-index: 1; } + .euiLoadingKibana:before { + box-shadow: 0 0 8px #000; + -webkit-animation: 1s euiLoadingKibanaPulsateAndFade cubic-bezier(0.694, 0.0482, 0.335, 1) infinite; + animation: 1s euiLoadingKibanaPulsateAndFade cubic-bezier(0.694, 0.0482, 0.335, 1) infinite; } + .euiLoadingKibana:after { + background-color: #000; + -webkit-animation: 1s euiLoadingKibanaPulsate cubic-bezier(0.694, 0.0482, 0.335, 1) infinite; + animation: 1s euiLoadingKibanaPulsate cubic-bezier(0.694, 0.0482, 0.335, 1) infinite; } + .euiLoadingKibana .euiLoadingKibana__icon { + display: block; } + +/** + * 1. Requires pixel math for animation. + */ +.euiLoadingKibana--medium { + width: 16px; } + .euiLoadingKibana--medium:before, .euiLoadingKibana--medium:after { + height: 3px; + /* 1 */ + bottom: -4px; } + .euiLoadingKibana--medium .euiLoadingKibana__icon { + z-index: 999; + -webkit-animation: 1s euiLoadingKibanaBounceMedium cubic-bezier(0.694, 0.0482, 0.335, 1) infinite; + animation: 1s euiLoadingKibanaBounceMedium cubic-bezier(0.694, 0.0482, 0.335, 1) infinite; } + +/** + * 1. Requires pixel math for animation. + */ +.euiLoadingKibana--large { + width: 24px; } + .euiLoadingKibana--large:before, .euiLoadingKibana--large:after { + height: 6px; + /* 1 */ + bottom: -8px; } + .euiLoadingKibana--large .euiLoadingKibana__icon { + -webkit-animation: 1s euiLoadingKibanaBounceLarge cubic-bezier(0.694, 0.0482, 0.335, 1) infinite; + animation: 1s euiLoadingKibanaBounceLarge cubic-bezier(0.694, 0.0482, 0.335, 1) infinite; } + +.euiLoadingKibana--xLarge { + width: 32px; } + .euiLoadingKibana--xLarge:before, .euiLoadingKibana--xLarge:after { + height: 8px; + bottom: -12px; } + .euiLoadingKibana--xLarge .euiLoadingKibana__icon { + -webkit-animation: 1s euiLoadingKibanaBounceXLarge cubic-bezier(0.694, 0.0482, 0.335, 1) infinite; + animation: 1s euiLoadingKibanaBounceXLarge cubic-bezier(0.694, 0.0482, 0.335, 1) infinite; } + +@-webkit-keyframes euiLoadingKibanaBounceMedium { + 50% { + -webkit-transform: translateY(-8px); + transform: translateY(-8px); } } + +@keyframes euiLoadingKibanaBounceMedium { + 50% { + -webkit-transform: translateY(-8px); + transform: translateY(-8px); } } + +@-webkit-keyframes euiLoadingKibanaBounceLarge { + 50% { + -webkit-transform: translateY(-12px); + transform: translateY(-12px); } } + +@keyframes euiLoadingKibanaBounceLarge { + 50% { + -webkit-transform: translateY(-12px); + transform: translateY(-12px); } } + +@-webkit-keyframes euiLoadingKibanaBounceXLarge { + 50% { + -webkit-transform: translateY(-16px); + transform: translateY(-16px); } } + +@keyframes euiLoadingKibanaBounceXLarge { + 50% { + -webkit-transform: translateY(-16px); + transform: translateY(-16px); } } + +@-webkit-keyframes euiLoadingKibanaPulsateAndFade { + 0% { + opacity: 0; } + 50% { + -webkit-transform: scale(0.5); + transform: scale(0.5); + opacity: .1; } + 100% { + opacity: 0; } } + +@keyframes euiLoadingKibanaPulsateAndFade { + 0% { + opacity: 0; } + 50% { + -webkit-transform: scale(0.5); + transform: scale(0.5); + opacity: .1; } + 100% { + opacity: 0; } } + +@-webkit-keyframes euiLoadingKibanaPulsate { + 0% { + opacity: .15; } + 50% { + -webkit-transform: scale(0.5); + transform: scale(0.5); + opacity: .05; } + 100% { + opacity: .15; } } + +@keyframes euiLoadingKibanaPulsate { + 0% { + opacity: .15; } + 50% { + -webkit-transform: scale(0.5); + transform: scale(0.5); + opacity: .05; } + 100% { + opacity: .15; } } + +.euiLoadingElastic { + position: relative; + display: inline-block; } + +.euiLoadingElastic--medium { + width: 16px; } + +.euiLoadingElastic--large { + width: 24px; } + +.euiLoadingElastic--xLarge { + width: 32px; } + +.euiLoadingElastic--xxLarge { + width: 40px; } + +.euiLoadingElastic path { + -webkit-animation-name: euiLoadingElastic; + animation-name: euiLoadingElastic; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + -webkit-animation-direction: alternate; + animation-direction: alternate; + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-timing-function: cubic-bezier(0, 0.63, 0.49, 1); + animation-timing-function: cubic-bezier(0, 0.63, 0.49, 1); + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-transform-origin: 50% 50%; + transform-origin: 50% 50%; } + +.euiLoadingElastic path:nth-of-type(1) { + -webkit-animation-delay: 0s; + animation-delay: 0s; } + +.euiLoadingElastic path:nth-of-type(2) { + -webkit-animation-delay: .035s; + animation-delay: .035s; } + +.euiLoadingElastic path:nth-of-type(3) { + -webkit-animation-delay: .125s; + animation-delay: .125s; } + +.euiLoadingElastic path:nth-of-type(4) { + -webkit-animation-delay: .155s; + animation-delay: .155s; } + +.euiLoadingElastic path:nth-of-type(5) { + -webkit-animation-delay: .075s; + animation-delay: .075s; } + +.euiLoadingElastic path:nth-of-type(6) { + -webkit-animation-delay: .06s; + animation-delay: .06s; } + +@-webkit-keyframes euiLoadingElastic { + 0% { + -webkit-transform: scale3d(0, 0, -0.7); + transform: scale3d(0, 0, -0.7); + opacity: 0; } + 40% { + -webkit-transform: scale3d(1, 1, 2); + transform: scale3d(1, 1, 2); + opacity: 1; } + 50% { + -webkit-transform: scale3d(0.99, 0.99, 2); + transform: scale3d(0.99, 0.99, 2); } + 70% { + -webkit-transform: scale3d(0.96, 0.96, -2.5); + transform: scale3d(0.96, 0.96, -2.5); } + 100% { + -webkit-transform: scale3d(0.98, 0.98, 2); + transform: scale3d(0.98, 0.98, 2); } } + +@keyframes euiLoadingElastic { + 0% { + -webkit-transform: scale3d(0, 0, -0.7); + transform: scale3d(0, 0, -0.7); + opacity: 0; } + 40% { + -webkit-transform: scale3d(1, 1, 2); + transform: scale3d(1, 1, 2); + opacity: 1; } + 50% { + -webkit-transform: scale3d(0.99, 0.99, 2); + transform: scale3d(0.99, 0.99, 2); } + 70% { + -webkit-transform: scale3d(0.96, 0.96, -2.5); + transform: scale3d(0.96, 0.96, -2.5); } + 100% { + -webkit-transform: scale3d(0.98, 0.98, 2); + transform: scale3d(0.98, 0.98, 2); } } + +.euiLoadingChart { + height: 32px; + z-index: 500; + overflow: hidden; + display: inline-block; } + +.euiLoadingChart__bar { + height: 100%; + width: 8px; + display: inline-block; + margin-bottom: -16px; + margin-left: 2px; + -webkit-animation: euiLoadingChart 1s infinite; + animation: euiLoadingChart 1s infinite; } + .euiLoadingChart__bar:nth-child(1) { + background-color: #54B399; } + .euiLoadingChart__bar:nth-child(2) { + background-color: #6092C0; + -webkit-animation-delay: .1s; + animation-delay: .1s; } + .euiLoadingChart__bar:nth-child(3) { + background-color: #D36086; + -webkit-animation-delay: .2s; + animation-delay: .2s; } + .euiLoadingChart__bar:nth-child(4) { + background-color: #9170B8; + -webkit-animation-delay: .3s; + animation-delay: .3s; } + +.euiLoadingChart--mono .euiLoadingChart__bar:nth-child(1) { + background-color: #D3DAE6; } + +.euiLoadingChart--mono .euiLoadingChart__bar:nth-child(2) { + background-color: #cbd1dd; } + +.euiLoadingChart--mono .euiLoadingChart__bar:nth-child(3) { + background-color: #c2c9d4; } + +.euiLoadingChart--mono .euiLoadingChart__bar:nth-child(4) { + background-color: #bac0ca; } + +.euiLoadingChart--medium { + height: 16px; } + .euiLoadingChart--medium > span { + width: 2px; + margin-left: 2px; + margin-bottom: 8px; } + +.euiLoadingChart--large { + height: 24px; } + .euiLoadingChart--large > span { + width: 4px; + margin-left: 2px; + margin-bottom: 12px; } + +.euiLoadingChart--xLarge { + height: 32px; } + .euiLoadingChart--xLarge > span { + width: 8px; + margin-left: 4px; + margin-bottom: 16px; } + +@-webkit-keyframes euiLoadingChart { + 0% { + -webkit-transform: translateY(0); + transform: translateY(0); } + 50% { + -webkit-transform: translateY(66%); + transform: translateY(66%); } + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); } } + +@keyframes euiLoadingChart { + 0% { + -webkit-transform: translateY(0); + transform: translateY(0); } + 50% { + -webkit-transform: translateY(66%); + transform: translateY(66%); } + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); } } + +.euiLoadingContent__loader { + display: block; + width: 100%; } + +.euiLoadingContent__singleLine { + display: block; + width: 100%; + height: 16px; + margin-bottom: 8px; + border-radius: 6px; + overflow: hidden; } + .euiLoadingContent__singleLine:last-child:not(:only-child) { + width: 75%; } + +.euiLoadingContent__singleLineBackground { + display: block; + width: 220%; + height: 100%; + background: linear-gradient(to right, #d5dce7 45%, #e9edf3 50%, #d5dce7 55%); + -webkit-animation: euiLoadingContentGradientLoad 1.5s cubic-bezier(0.694, 0.0482, 0.335, 1) infinite; + animation: euiLoadingContentGradientLoad 1.5s cubic-bezier(0.694, 0.0482, 0.335, 1) infinite; } + +@-webkit-keyframes euiLoadingContentGradientLoad { + 0% { + -webkit-transform: translateX(-53%); + transform: translateX(-53%); } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); } } + +@keyframes euiLoadingContentGradientLoad { + 0% { + -webkit-transform: translateX(-53%); + transform: translateX(-53%); } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); } } + +.euiLoadingSpinner { + -webkit-flex-shrink: 0; + flex-shrink: 0; + display: inline-block; + width: 32px; + height: 32px; + border-radius: 50%; + border: solid 2px #D3DAE6; + border-color: #07C #D3DAE6 #D3DAE6 #D3DAE6; + -webkit-animation: euiLoadingSpinner .6s infinite linear; + animation: euiLoadingSpinner .6s infinite linear; } + +.euiLoadingSpinner--small { + width: 8px; + height: 8px; + border-width: 1px; } + +.euiLoadingSpinner--medium { + width: 16px; + height: 16px; + border-width: 1px; } + +.euiLoadingSpinner--large { + width: 24px; + height: 24px; } + +.euiLoadingSpinner--xLarge { + width: 32px; + height: 32px; } + +@-webkit-keyframes euiLoadingSpinner { + from { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); } + to { + -webkit-transform: rotate(359deg); + transform: rotate(359deg); } } + +@keyframes euiLoadingSpinner { + from { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); } + to { + -webkit-transform: rotate(359deg); + transform: rotate(359deg); } } + +.euiMarkdownEditor--isPreviewing .euiMarkdownEditor__toggleContainer { + display: none; } + +.euiMarkdownEditor--fullHeight { + display: -webkit-flex; + display: flex; + -webkit-flex-direction: column; + flex-direction: column; + 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 { + font-family: "Inter", -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; + color: #343741; + font-weight: 400; } + .euiMarkdownFormat--reversed { + color: #F5F7FA; } + .euiMarkdownFormat > div > *:first-child { + margin-top: 0 !important; } + .euiMarkdownFormat > div > * { + margin-top: 0; + margin-bottom: 1em; } + .euiMarkdownFormat > div > *:last-child, + .euiMarkdownFormat .euiCheckbox { + margin-bottom: 0 !important; } + .euiMarkdownFormat .euiCheckbox + *:not(.euiCheckbox) { + margin-top: 1em; } + .euiMarkdownFormat p, + .euiMarkdownFormat blockquote, + .euiMarkdownFormat ul, + .euiMarkdownFormat ol, + .euiMarkdownFormat dl, + .euiMarkdownFormat pre, + .euiMarkdownFormat table { + margin-top: 0; + margin-bottom: 1em; + line-height: 1.5em; } + .euiMarkdownFormat strong { + font-weight: 600; } + .euiMarkdownFormat h1, + .euiMarkdownFormat h2, + .euiMarkdownFormat h3, + .euiMarkdownFormat h4, + .euiMarkdownFormat h5, + .euiMarkdownFormat h6 { + margin-top: 0; + margin-bottom: 0.5em; } + .euiMarkdownFormat h1 { + font-size: 2.25em; + line-height: 1.333333em; + font-weight: 300; } + .euiMarkdownFormat h2 { + font-size: 1.75em; + line-height: 1.428571em; + font-weight: 300; } + .euiMarkdownFormat h3 { + font-size: 1.25em; + line-height: 1.6em; + font-weight: 600; } + .euiMarkdownFormat h4 { + font-size: 1em; + line-height: 1.5em; + font-weight: 600; } + .euiMarkdownFormat h5 { + font-size: 0.875em; + line-height: 1.142857em; + font-weight: 700; } + .euiMarkdownFormat h6 { + font-size: 0.75em; + line-height: 1.333333em; + font-weight: 700; + text-transform: uppercase; } + .euiMarkdownFormat img { + max-width: 100%; + box-sizing: content-box; + border-style: none; } + .euiMarkdownFormat blockquote { + padding: 0 1em; + border-left: 0.25em solid rgba(0, 0, 0, 0.15); } + .euiMarkdownFormat--reversed blockquote { + border-left-color: rgba(255, 255, 255, 0.15); } + .euiMarkdownFormat hr { + border: none; + height: 1px; + background-color: rgba(0, 0, 0, 0.15); + margin: 1.5em 0; } + .euiMarkdownFormat hr::before { + display: table; + content: ''; } + .euiMarkdownFormat hr::after { + display: table; + clear: both; + content: ''; } + .euiMarkdownFormat ul, + .euiMarkdownFormat ol { + padding-left: 1.5em; + margin-top: 0; + margin-bottom: 1em; } + .euiMarkdownFormat ul { + list-style-type: disc; } + .euiMarkdownFormat ol { + list-style-type: decimal; } + .euiMarkdownFormat ul ul { + list-style-type: circle; } + .euiMarkdownFormat ol ol, + .euiMarkdownFormat ul ol { + list-style-type: lower-roman; } + .euiMarkdownFormat ul ul ol, + .euiMarkdownFormat ul ol ol, + .euiMarkdownFormat ol ul ol, + .euiMarkdownFormat ol ol ol { + list-style-type: lower-alpha; } + .euiMarkdownFormat dd { + margin-left: 0; } + .euiMarkdownFormat ul ul, + .euiMarkdownFormat ul ol, + .euiMarkdownFormat ol ol, + .euiMarkdownFormat ol ul { + margin-top: 0; + margin-bottom: 0; } + .euiMarkdownFormat li > p { + margin-bottom: 0.5em; } + .euiMarkdownFormat li + li { + margin-top: 0.25em; } + .euiMarkdownFormat .task-list-item { + list-style-type: none; } + .euiMarkdownFormat .task-list-item + .task-list-item { + margin-top: 0.25em; } + .euiMarkdownFormat .task-list-item input { + margin: 0 .2em .25em -1.6em; + vertical-align: middle; } + .euiMarkdownFormat table { + display: block; + width: 100%; + overflow: auto; + border-left: 1px solid rgba(0, 0, 0, 0.15); + border-spacing: 0; + border-collapse: collapse; } + .euiMarkdownFormat td, + .euiMarkdownFormat th { + padding: 0; } + .euiMarkdownFormat table th, + .euiMarkdownFormat table td { + padding: 0.25em 0.5em; + border-top: 1px solid rgba(0, 0, 0, 0.15); + border-bottom: 1px solid rgba(0, 0, 0, 0.15); } + .euiMarkdownFormat table th:last-child, + .euiMarkdownFormat table td:last-child { + border-right: 1px solid rgba(0, 0, 0, 0.15); } + .euiMarkdownFormat table tr { + background-color: transparent; + border-top: 1px solid rgba(0, 0, 0, 0.15); } + +.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__help { + justify-self: flex-end; } + .euiMarkdownEditorFooter__help > svg { + width: 26px; } + +.euiMarkdownEditorFooter__errors > svg { + color: #69707D; } + +.euiMarkdownEditorPreview { + 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); + border: 6px solid transparent; + background-clip: content-box; } + .euiMarkdownEditorPreview::-webkit-scrollbar-corner, .euiMarkdownEditorPreview::-webkit-scrollbar-track { + background-color: transparent; } + +.euiMarkdownEditorTextArea { + font-family: "Inter", -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-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; } + @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { + .euiMarkdownEditorTextArea { + line-height: 1em; } } + .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); + border: 6px solid transparent; + background-clip: content-box; } + .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%; } + +.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); } + +.euiMark { + background-color: transparent; + font-weight: 700; + color: #343741; } + +/** + * 1. Fix IE overflow issue (min-height) by adding a separate wrapper for the + * flex display. https://github.com/philipwalton/flexbugs#flexbug-3 + * 2. IE has trouble with min-widths on flex elements. Use the pixel value + * from our forms since that's usually the smallest we want them. + */ +.euiModal { + border: 1px solid #D3DAE6; + box-shadow: 0 2.7px 9px rgba(0, 0, 0, 0.13), 0 9.4px 24px rgba(0, 0, 0, 0.09), 0 21.8px 43px rgba(0, 0, 0, 0.08); + display: -webkit-flex; + display: flex; + /* 1 */ + position: relative; + background-color: #FFF; + border-radius: 6px; + z-index: 8000; + min-width: 400px; + -webkit-animation: euiModal 350ms cubic-bezier(0.34, 1.61, 0.7, 1); + animation: euiModal 350ms cubic-bezier(0.34, 1.61, 0.7, 1); + max-width: calc(100vw - 16px); } + .euiModal:focus { + outline: none; } + .euiModal .euiModal__flex { + /* 1 */ + -webkit-flex: 1 1 auto; + flex: 1 1 auto; + display: -webkit-flex; + display: flex; + -webkit-flex-direction: column; + flex-direction: column; + max-height: 75vh; + overflow: hidden; } + +.euiModal--maxWidth-default { + max-width: MIN(768px, calc(100vw - 16px)); } + +.euiModal--confirmation { + min-width: 400px; } + +.euiModalHeader { + display: -webkit-flex; + display: flex; + -webkit-justify-content: space-between; + justify-content: space-between; + -webkit-align-items: center; + align-items: center; + padding: 24px 40px 16px 24px; + -webkit-flex-grow: 0; + flex-grow: 0; + -webkit-flex-shrink: 0; + flex-shrink: 0; } + +.euiModalHeader__title { + color: #1a1c21; + font-size: 27px; + font-size: 1.92857rem; + line-height: 2.28571rem; + font-weight: 700; } + +.euiModalBody { + -webkit-flex-grow: 1; + flex-grow: 1; + overflow: hidden; + display: -webkit-flex; + display: flex; + -webkit-flex-direction: column; + flex-direction: column; } + .euiModalBody .euiModalBody__overflow { + 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: 8px 24px; } + .euiModalBody .euiModalBody__overflow::-webkit-scrollbar { + width: 16px; + height: 16px; } + .euiModalBody .euiModalBody__overflow::-webkit-scrollbar-thumb { + background-color: rgba(105, 112, 125, 0.5); + border: 6px solid transparent; + background-clip: content-box; } + .euiModalBody .euiModalBody__overflow::-webkit-scrollbar-corner, .euiModalBody .euiModalBody__overflow::-webkit-scrollbar-track { + background-color: transparent; } + .euiModalBody .euiModalBody__overflow:focus { + outline: none; + /* 1 */ } + .euiModalBody .euiModalBody__overflow[tabindex='0']:focus:focus-visible { + outline-style: auto; + /* 2 */ } + +.euiModalFooter { + display: -webkit-flex; + display: flex; + -webkit-justify-content: flex-end; + justify-content: flex-end; + padding: 16px 24px 24px; + -webkit-flex-grow: 0; + flex-grow: 0; + -webkit-flex-shrink: 0; + flex-shrink: 0; } + .euiModalFooter > * + * { + margin-left: 16px; } + +.euiModalHeader + .euiModalFooter { + padding-top: 8px; } + +.euiModalBody:last-of-type .euiModalBody__overflow { + padding-bottom: 24px; } + +.euiModal__closeIcon { + background-color: rgba(255, 255, 255, 0.9); + position: absolute; + right: 4px; + top: 4px; + z-index: 3; } + +@-webkit-keyframes euiModal { + 0% { + opacity: 0; + -webkit-transform: translateY(32px); + transform: translateY(32px); } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); } } + +@keyframes euiModal { + 0% { + opacity: 0; + -webkit-transform: translateY(32px); + transform: translateY(32px); } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); } } + +@media only screen and (max-width: 574px) { + .euiModal { + position: fixed; + width: 100vw !important; + max-width: none !important; + min-width: 0 !important; + left: 0; + right: 0; + bottom: 0; + top: 0; + border-radius: 0; + border: none; } + .euiModal.euiModal--confirmation { + box-shadow: 0 -2.7px 9px rgba(0, 0, 0, 0.13), 0 -9.4px 24px rgba(0, 0, 0, 0.09), 0 -21.8px 43px rgba(0, 0, 0, 0.08); + top: auto; } + .euiModal .euiModal__flex { + /* 1 */ + max-height: 100vh; } + .euiModalHeader { + width: 100%; } + .euiModalFooter { + width: 100%; + background: #F5F7FA; + padding: 12px 24px !important; + -webkit-justify-content: stretch; + justify-content: stretch; } + .euiModalFooter > * { + -webkit-flex: 1; + flex: 1; } + .euiModalFooter > * + * { + margin-left: 0; } + .euiModalBody { + width: 100%; } + .euiModalBody .euiModalBody__overflow { + padding-bottom: 24px; } } + +@media only screen and (min-width: 575px) and (max-width: 767px) { + .euiModal { + position: fixed; + width: 100vw !important; + max-width: none !important; + min-width: 0 !important; + left: 0; + right: 0; + bottom: 0; + top: 0; + border-radius: 0; + border: none; } + .euiModal.euiModal--confirmation { + box-shadow: 0 -2.7px 9px rgba(0, 0, 0, 0.13), 0 -9.4px 24px rgba(0, 0, 0, 0.09), 0 -21.8px 43px rgba(0, 0, 0, 0.08); + top: auto; } + .euiModal .euiModal__flex { + /* 1 */ + max-height: 100vh; } + .euiModalHeader { + width: 100%; } + .euiModalFooter { + width: 100%; + background: #F5F7FA; + padding: 12px 24px !important; + -webkit-justify-content: stretch; + justify-content: stretch; } + .euiModalFooter > * { + -webkit-flex: 1; + flex: 1; } + .euiModalFooter > * + * { + margin-left: 0; } + .euiModalBody { + width: 100%; } + .euiModalBody .euiModalBody__overflow { + padding-bottom: 24px; } } + +.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 { + color: #1a1c21; + font-size: 16px; + font-size: 1.14286rem; + line-height: 1.71429rem; + 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; } + +.euiOverlayMask { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: -webkit-flex; + display: flex; + -webkit-align-items: center; + align-items: center; + -webkit-justify-content: center; + justify-content: center; + padding-bottom: 10vh; + -webkit-animation: euiAnimFadeIn 150ms ease-in; + animation: euiAnimFadeIn 150ms ease-in; + background: rgba(255, 255, 255, 0.8); } + +.euiBody-hasOverlayMask { + overflow: hidden; } + +.euiOverlayMask--aboveHeader { + z-index: 6000; } + +.euiOverlayMask--belowHeader { + z-index: 1000; } + +.euiPagination { + display: -webkit-flex; + display: flex; + -webkit-align-items: center; + align-items: center; } + .euiPagination__compressedText { + display: -webkit-inline-flex; + display: inline-flex; + -webkit-align-items: center; + align-items: center; + line-height: 1 !important; } + .euiPagination__compressedText > *:first-child { + margin-right: 4px; } + .euiPagination__compressedText > *:last-child { + margin-left: 4px; } + +.euiPagination__list { + display: -webkit-flex; + display: flex; + -webkit-align-items: baseline; + align-items: baseline; } + +.euiPaginationButton { + font-size: 14px; + padding: 0; + text-align: center; + border-radius: 6px; } + +.euiPaginationButton-isActive { + font-weight: 700; } + .euiPaginationButton-isActive.euiPaginationButton-isActive { + color: #07C; } + .euiPaginationButton-isActive.euiPaginationButton-isActive .euiButtonEmpty__content { + cursor: default; } + .euiPaginationButton-isActive.euiPaginationButton-isActive, .euiPaginationButton-isActive.euiPaginationButton-isActive:hover { + text-decoration: underline; } + +.euiPaginationButton-isPlaceholder { + -webkit-align-items: baseline; + align-items: baseline; + color: #ABB4C4; + font-size: 14px; + padding: 0 8px; + height: 24px; + padding-top: 6px; } + +@media only screen and (max-width: 574px) { + .euiPaginationButton-isPlaceholder, + .euiPaginationButton--hideOnMobile { + display: none; } } + +@media only screen and (min-width: 575px) and (max-width: 767px) { + .euiPaginationButton-isPlaceholder, + .euiPaginationButton--hideOnMobile { + display: none; } } + +.euiPanel { + -webkit-flex-grow: 1; + flex-grow: 1; } + .euiPanel.euiPanel--flexGrowZero { + -webkit-flex-grow: 0; + flex-grow: 0; } + .euiPanel.euiPanel--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); } + .euiPanel.euiPanel--hasBorder { + border: 1px solid #D3DAE6; + box-shadow: none; } + .euiPanel.euiPanel--isClickable { + transition: all 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); } + .euiPanel.euiPanel--isClickable:enabled { + display: block; + width: 100%; + text-align: left; } + .euiPanel.euiPanel--isClickable:hover, .euiPanel.euiPanel--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; } + .euiPanel.euiPanel--borderRadiusNone { + border-radius: 0; } + .euiPanel.euiPanel--borderRadiusMedium { + border-radius: 4px; } + .euiPanel.euiPanel--transparent { + background-color: transparent; } + .euiPanel.euiPanel--plain { + background-color: #FFF; } + .euiPanel.euiPanel--subdued { + background-color: #fafbfd; } + .euiPanel.euiPanel--accent { + background-color: #feedf5; } + .euiPanel.euiPanel--primary { + background-color: #e6f1fa; } + .euiPanel.euiPanel--success { + background-color: #e6f9f7; } + .euiPanel.euiPanel--warning { + background-color: #fff9e8; } + .euiPanel.euiPanel--danger { + background-color: #f8e9e9; } + +.euiPanel--paddingSmall { + padding: 8px; } + +.euiPanel--paddingMedium { + padding: 16px; } + +.euiPanel--paddingLarge { + padding: 24px; } + +.euiSplitPanel { + display: -webkit-flex; + display: flex; + -webkit-flex-direction: column; + flex-direction: column; + min-width: 0; } + .euiSplitPanel .euiSplitPanel__inner { + -webkit-flex-basis: 0%; + flex-basis: 0%; + -webkit-transform: none !important; + transform: none !important; + box-shadow: none !important; } + .euiSplitPanel.euiSplitPanel-isResponsive.euiPanel--borderRadiusNone .euiSplitPanel__inner:first-child, + .euiSplitPanel.euiPanel--borderRadiusNone .euiSplitPanel__inner:first-child { + border-radius: -1 -1 0 0; } + .euiSplitPanel.euiSplitPanel-isResponsive.euiPanel--borderRadiusNone .euiSplitPanel__inner:last-child, + .euiSplitPanel.euiPanel--borderRadiusNone .euiSplitPanel__inner:last-child { + border-radius: 0 0 -1 -1; } + .euiSplitPanel.euiSplitPanel-isResponsive.euiPanel--borderRadiusMedium .euiSplitPanel__inner:first-child, + .euiSplitPanel.euiPanel--borderRadiusMedium .euiSplitPanel__inner:first-child { + border-radius: 3px 3px 0 0; } + .euiSplitPanel.euiSplitPanel-isResponsive.euiPanel--borderRadiusMedium .euiSplitPanel__inner:last-child, + .euiSplitPanel.euiPanel--borderRadiusMedium .euiSplitPanel__inner:last-child { + border-radius: 0 0 3px 3px; } + +.euiSplitPanel--row { + -webkit-flex-direction: row; + flex-direction: row; } + .euiSplitPanel--row.euiSplitPanel-isResponsive { + -webkit-flex-direction: column; + flex-direction: column; } + .euiSplitPanel--row.euiPanel--borderRadiusNone .euiSplitPanel__inner:first-child { + border-radius: -1 0 0 -1; } + .euiSplitPanel--row.euiPanel--borderRadiusNone .euiSplitPanel__inner:last-child { + border-radius: 0 -1 -1 0; } + .euiSplitPanel--row.euiPanel--borderRadiusMedium .euiSplitPanel__inner:first-child { + border-radius: 3px 0 0 3px; } + .euiSplitPanel--row.euiPanel--borderRadiusMedium .euiSplitPanel__inner:last-child { + border-radius: 0 3px 3px 0; } + +.euiPage { + display: -webkit-flex; + display: flex; + background-color: #fafbfd; + -webkit-flex-shrink: 0; + flex-shrink: 0; + max-width: 100%; } + .euiPage--restrictWidth-default, .euiPage--restrictWidth-custom { + margin-left: auto; + margin-right: auto; } + .euiPage--restrictWidth-default { + max-width: 1200px; } + .euiPage--grow { + -webkit-flex-grow: 1; + flex-grow: 1; } + .euiPage--column { + -webkit-flex-direction: column; + flex-direction: column; } + @media only screen and (max-width: 574px) { + .euiPage { + -webkit-flex-direction: column; + flex-direction: column; } } + @media only screen and (min-width: 575px) and (max-width: 767px) { + .euiPage { + -webkit-flex-direction: column; + flex-direction: column; } } + +.euiPage--paddingSmall { + padding: 8px; } + .euiPage--paddingSmall .euiPageSideBar { + min-width: 192px; + margin-right: 8px; } + @media only screen and (max-width: 574px) { + .euiPage--paddingSmall .euiPageSideBar { + margin-right: 0; + margin-bottom: 8px; } } + @media only screen and (min-width: 575px) and (max-width: 767px) { + .euiPage--paddingSmall .euiPageSideBar { + margin-right: 0; + margin-bottom: 8px; } } + .euiPage--paddingSmall .euiPageHeader { + margin-bottom: 8px; } + +.euiPage--paddingMedium { + padding: 16px; } + .euiPage--paddingMedium .euiPageSideBar { + min-width: 192px; + margin-right: 16px; } + @media only screen and (max-width: 574px) { + .euiPage--paddingMedium .euiPageSideBar { + margin-right: 0; + margin-bottom: 16px; } } + @media only screen and (min-width: 575px) and (max-width: 767px) { + .euiPage--paddingMedium .euiPageSideBar { + margin-right: 0; + margin-bottom: 16px; } } + .euiPage--paddingMedium .euiPageHeader { + margin-bottom: 16px; } + +.euiPage--paddingLarge { + padding: 24px; } + .euiPage--paddingLarge .euiPageSideBar { + min-width: 192px; + margin-right: 24px; } + @media only screen and (max-width: 574px) { + .euiPage--paddingLarge .euiPageSideBar { + margin-right: 0; + margin-bottom: 24px; } } + @media only screen and (min-width: 575px) and (max-width: 767px) { + .euiPage--paddingLarge .euiPageSideBar { + margin-right: 0; + margin-bottom: 24px; } } + .euiPage--paddingLarge .euiPageHeader { + margin-bottom: 24px; } + +.euiPageBody { + display: -webkit-flex; + display: flex; + -webkit-flex-direction: column; + flex-direction: column; + -webkit-align-items: stretch; + align-items: stretch; + -webkit-flex: 1 1 100%; + flex: 1 1 100%; + max-width: 100%; + min-width: 0; } + .euiPageBody--restrictWidth-default, .euiPageBody--restrictWidth-custom { + margin-left: auto; + margin-right: auto; } + .euiPageBody--restrictWidth-default { + max-width: 1200px; } + .euiPageBody.euiPageBody--borderRadiusNone { + border-top-width: 0; + border-right-width: 0; + border-bottom-width: 0; } + +.euiPageBody--paddingSmall { + padding: 8px; } + .euiPageBody--paddingSmall > .euiPageHeader:not([class*='--padding']) { + margin-bottom: 8px; + border-bottom: 1px solid #D3DAE6; } + .euiPageBody--paddingSmall > .euiPageHeader:not([class*='--padding']):not(.euiPageHeader--tabsAtBottom) { + padding-bottom: 8px; } + +.euiPageBody--paddingMedium { + padding: 16px; } + .euiPageBody--paddingMedium > .euiPageHeader:not([class*='--padding']) { + margin-bottom: 16px; + border-bottom: 1px solid #D3DAE6; } + .euiPageBody--paddingMedium > .euiPageHeader:not([class*='--padding']):not(.euiPageHeader--tabsAtBottom) { + padding-bottom: 16px; } + +.euiPageBody--paddingLarge { + padding: 24px; } + .euiPageBody--paddingLarge > .euiPageHeader:not([class*='--padding']) { + margin-bottom: 24px; + border-bottom: 1px solid #D3DAE6; } + .euiPageBody--paddingLarge > .euiPageHeader:not([class*='--padding']):not(.euiPageHeader--tabsAtBottom) { + padding-bottom: 24px; } + +.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; + max-width: 100%; + 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; } + +.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-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); + border: 6px solid transparent; + background-clip: content-box; } + .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-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); + border: 6px solid transparent; + background-clip: content-box; } + .euiPageSideBar--sticky::-webkit-scrollbar-corner, .euiPageSideBar--sticky::-webkit-scrollbar-track { + background-color: transparent; } } + +@media only screen and (min-width: 1200px) { + .euiPageSideBar--sticky { + 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); + border: 6px solid transparent; + background-clip: content-box; } + .euiPageSideBar--sticky::-webkit-scrollbar-corner, .euiPageSideBar--sticky::-webkit-scrollbar-track { + background-color: transparent; } } + +/** + * Note: Bottom margin is added in _page.scss when EuiPage has `paddingSize` + * Or it's added in _page_body.scss when EuiPageBody has `paddingSize` + */ +.euiPageHeader { + width: 100%; + 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-shrink: 0; + flex-shrink: 0; } + .euiPageHeader--restrictWidth-default, .euiPageHeader--restrictWidth-custom { + margin-left: auto; + margin-right: auto; } + .euiPageHeader--restrictWidth-default { + max-width: 1200px; } + +.euiPageHeader--bottomBorder { + border-bottom: 1px solid #D3DAE6; } + +.euiPageHeader--paddingSmall { + padding: 8px; } + .euiPageHeader--paddingSmall.euiPageHeader--tabsAtBottom { + padding-bottom: 0; + margin-bottom: 8px; } + +.euiPageHeader--paddingMedium { + padding: 16px; } + .euiPageHeader--paddingMedium.euiPageHeader--tabsAtBottom { + padding-bottom: 0; + margin-bottom: 16px; } + +.euiPageHeader--paddingLarge { + padding: 24px; } + .euiPageHeader--paddingLarge.euiPageHeader--tabsAtBottom { + padding-bottom: 0; + margin-bottom: 24px; } + +.euiPageHeader--top { + -webkit-align-items: flex-start; + align-items: flex-start; } + +.euiPageHeader--bottom { + -webkit-align-items: flex-end; + align-items: flex-end; } + +.euiPageHeader--stretch { + -webkit-align-items: stretch; + align-items: stretch; } + +@media only screen and (max-width: 574px) { + .euiPageHeader--responsive { + -webkit-flex-direction: column; + flex-direction: column; } + .euiPageHeader--responsiveReverse { + -webkit-flex-direction: column-reverse; + flex-direction: column-reverse; } } + +@media only screen and (min-width: 575px) and (max-width: 767px) { + .euiPageHeader--responsive { + -webkit-flex-direction: column; + flex-direction: column; } + .euiPageHeader--responsiveReverse { + -webkit-flex-direction: column-reverse; + flex-direction: column-reverse; } } + +.euiPageHeader .euiPageHeaderContent { + width: 100%; } + +.euiPageHeaderContent__titleIcon { + top: -4px; + position: relative; + margin-right: 16px; } + +@media only screen and (min-width: 768px) and (max-width: 991px) { + .euiPageHeaderContent__rightSideItems { + -webkit-flex-direction: row-reverse; + flex-direction: row-reverse; } } + +@media only screen and (min-width: 992px) and (max-width: 1199px) { + .euiPageHeaderContent__rightSideItems { + -webkit-flex-direction: row-reverse; + flex-direction: row-reverse; } } + +@media only screen and (min-width: 1200px) { + .euiPageHeaderContent__rightSideItems { + -webkit-flex-direction: row-reverse; + flex-direction: row-reverse; } } + +.euiPageHeaderSection:not(:first-of-type) { + margin-left: 32px; } + +@media only screen and (max-width: 574px) { + .euiPageHeader--responsive .euiPageHeaderSection { + width: 100%; } + .euiPageHeader--responsive .euiPageHeaderSection:not(:first-of-type) { + margin-left: 0; + margin-top: 16px; } + .euiPageHeader--responsiveReverse .euiPageHeaderSection { + width: 100%; } + .euiPageHeader--responsiveReverse .euiPageHeaderSection:not(:first-of-type) { + margin-left: 0; } + .euiPageHeader--responsiveReverse .euiPageHeaderSection:not(:last-of-type) { + margin-top: 16px; } } + +@media only screen and (min-width: 575px) and (max-width: 767px) { + .euiPageHeader--responsive .euiPageHeaderSection { + width: 100%; } + .euiPageHeader--responsive .euiPageHeaderSection:not(:first-of-type) { + margin-left: 0; + margin-top: 16px; } + .euiPageHeader--responsiveReverse .euiPageHeaderSection { + width: 100%; } + .euiPageHeader--responsiveReverse .euiPageHeaderSection:not(:first-of-type) { + margin-left: 0; } + .euiPageHeader--responsiveReverse .euiPageHeaderSection:not(:last-of-type) { + margin-top: 16px; } } + +.euiPopover { + display: inline-block; + position: relative; + vertical-align: middle; + max-width: 100%; } + +.euiPopover__anchor { + display: inline-block; } + +.euiPopover--displayBlock { + display: block; } + .euiPopover--displayBlock .euiPopover__anchor { + display: block; } + +/** + * 1. Can expand further, but it looks weird if it's smaller than the originating button. + * 2. Animation happens on the panel. But don't animate when using the attached mode like for inputs + * 3. Make sure the panel stays within the window. + */ +.euiPopover__panel { + 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); + position: absolute; + min-width: 112px; + /* 1 */ + max-width: calc(100vw - 32px); + /* 3 */ + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + pointer-events: none; + opacity: 0; + /* 2 */ + visibility: hidden; + /* 2 */ + transition: opacity cubic-bezier(0.34, 1.61, 0.7, 1) 350ms, visibility cubic-bezier(0.34, 1.61, 0.7, 1) 350ms; } + .euiPopover__panel:not(.euiPopover__panel-isAttached) { + -webkit-transform: translateY(0) translateX(0) translateZ(0); + transform: translateY(0) translateX(0) translateZ(0); + /* 2 */ + transition: opacity cubic-bezier(0.34, 1.61, 0.7, 1) 350ms, visibility cubic-bezier(0.34, 1.61, 0.7, 1) 350ms, -webkit-transform cubic-bezier(0.34, 1.61, 0.7, 1) 450ms; + transition: opacity cubic-bezier(0.34, 1.61, 0.7, 1) 350ms, visibility cubic-bezier(0.34, 1.61, 0.7, 1) 350ms, transform cubic-bezier(0.34, 1.61, 0.7, 1) 450ms; + transition: opacity cubic-bezier(0.34, 1.61, 0.7, 1) 350ms, visibility cubic-bezier(0.34, 1.61, 0.7, 1) 350ms, transform cubic-bezier(0.34, 1.61, 0.7, 1) 450ms, -webkit-transform cubic-bezier(0.34, 1.61, 0.7, 1) 450ms; } + .euiPopover__panel.euiPopover__panel-isOpen { + opacity: 1; + visibility: visible; + pointer-events: auto; } + .euiPopover__panel .euiPopover__panelArrow { + position: absolute; + width: 0; + height: 0; } + .euiPopover__panel .euiPopover__panelArrow:before { + position: absolute; + content: ''; + height: 0; + width: 0; } + .euiPopover__panel .euiPopover__panelArrow:after { + position: absolute; + content: ''; + height: 0; + width: 0; } + .euiPopover__panel .euiPopover__panelArrow.euiPopover__panelArrow--top:before { + bottom: -10px; + border-left: 12px solid transparent; + border-right: 12px solid transparent; + border-top: 12px solid #D3DAE6; } + .euiPopover__panel .euiPopover__panelArrow.euiPopover__panelArrow--top:after { + bottom: -9px; + border-left: 12px solid transparent; + border-right: 12px solid transparent; + border-top: 12px solid #FFF; } + .euiPopover__panel .euiPopover__panelArrow.euiPopover__panelArrow--right:before { + left: -12px; + top: 50%; + border-top: 12px solid transparent; + border-bottom: 12px solid transparent; + border-right: 12px solid #D3DAE6; } + .euiPopover__panel .euiPopover__panelArrow.euiPopover__panelArrow--right:after { + left: -11px; + top: 50%; + border-top: 12px solid transparent; + border-bottom: 12px solid transparent; + border-right: 12px solid #FFF; } + .euiPopover__panel .euiPopover__panelArrow.euiPopover__panelArrow--bottom:before { + top: -12px; + border-left: 12px solid transparent; + border-right: 12px solid transparent; + border-bottom: 12px solid #D3DAE6; } + .euiPopover__panel .euiPopover__panelArrow.euiPopover__panelArrow--bottom:after { + top: -11px; + border-left: 12px solid transparent; + border-right: 12px solid transparent; + border-bottom: 12px solid #FFF; } + .euiPopover__panel .euiPopover__panelArrow.euiPopover__panelArrow--left:before { + right: -11px; + top: 50%; + border-top: 12px solid transparent; + border-bottom: 12px solid transparent; + border-left: 12px solid #D3DAE6; } + .euiPopover__panel .euiPopover__panelArrow.euiPopover__panelArrow--left:after { + right: -10px; + top: 50%; + border-top: 12px solid transparent; + border-bottom: 12px solid transparent; + border-left: 12px solid #FFF; } + .euiPopover__panel.euiPopover__panel-noArrow .euiPopover__panelArrow { + display: none; } + .euiPopover__panel.euiPopover__panel-isAttached.euiPopover__panel--bottom { + border-top-color: rgba(211, 218, 230, 0.8); + border-top-right-radius: 0; + border-top-left-radius: 0; } + .euiPopover__panel.euiPopover__panel-isAttached.euiPopover__panel--top { + box-shadow: 0 0 0.8px rgba(0, 0, 0, 0.06), 0 0 2px rgba(0, 0, 0, 0.04), 0 0 5px rgba(0, 0, 0, 0.04), 0 0 17px rgba(0, 0, 0, 0.03); + border-bottom-color: rgba(211, 218, 230, 0.8); + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; } + +.euiPopover__panel.euiPopover__panel-isAttached.euiPopover__panel--top, +.euiPopover__panel.euiPopover__panel-isOpen.euiPopover__panel--top { + -webkit-transform: translateY(8px) translateZ(0); + transform: translateY(8px) translateZ(0); } + +.euiPopover__panel.euiPopover__panel-isAttached.euiPopover__panel--bottom, +.euiPopover__panel.euiPopover__panel-isOpen.euiPopover__panel--bottom { + -webkit-transform: translateY(-8px) translateZ(0); + transform: translateY(-8px) translateZ(0); } + +.euiPopover__panel.euiPopover__panel-isOpen.euiPopover__panel--left { + -webkit-transform: translateX(8px) translateZ(0); + transform: translateX(8px) translateZ(0); } + +.euiPopover__panel.euiPopover__panel-isOpen.euiPopover__panel--right { + -webkit-transform: translateX(-8px) translateZ(0); + transform: translateX(-8px) translateZ(0); } + +.euiPopoverTitle { + color: #1a1c21; + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + font-weight: 700; + padding: 12px; + border-bottom: 1px solid #D3DAE6; } + +.euiPopoverTitle--paddingNone { + padding: 0; } + +.euiPopoverTitle--paddingSmall { + padding: 8px; } + +.euiPopoverTitle--paddingMedium { + padding: 16px; } + +.euiPopoverTitle--paddingLarge { + padding: 24px; } + +.euiPopover__panel.euiPanel--paddingSmall .euiPopoverTitle { + margin: -8px -8px 8px; } + .euiPopover__panel.euiPanel--paddingSmall .euiPopoverTitle:not([class*='euiPopoverTitle--padding']) { + padding: 12px 8px; } + +.euiPopover__panel.euiPanel--paddingMedium .euiPopoverTitle { + margin: -16px -16px 16px; } + .euiPopover__panel.euiPanel--paddingMedium .euiPopoverTitle:not([class*='euiPopoverTitle--padding']) { + padding: 12px 16px; } + +.euiPopover__panel.euiPanel--paddingLarge .euiPopoverTitle { + margin: -24px -24px 24px; } + .euiPopover__panel.euiPanel--paddingLarge .euiPopoverTitle:not([class*='euiPopoverTitle--padding']) { + padding: 12px 24px; } + +.euiPopoverFooter { + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + padding: 12px; + border-top: 1px solid #D3DAE6; } + +.euiPopoverFooter--paddingNone { + padding: 0; } + +.euiPopoverFooter--paddingSmall { + padding: 8px; } + +.euiPopoverFooter--paddingMedium { + padding: 16px; } + +.euiPopoverFooter--paddingLarge { + padding: 24px; } + +.euiPopover__panel.euiPanel--paddingSmall .euiPopoverFooter { + margin: 8px -8px -8px; } + .euiPopover__panel.euiPanel--paddingSmall .euiPopoverFooter:not([class*='euiPopoverFooter--padding']) { + padding: 12px 8px; } + +.euiPopover__panel.euiPanel--paddingMedium .euiPopoverFooter { + margin: 16px -16px -16px; } + .euiPopover__panel.euiPanel--paddingMedium .euiPopoverFooter:not([class*='euiPopoverFooter--padding']) { + padding: 12px 16px; } + +.euiPopover__panel.euiPanel--paddingLarge .euiPopoverFooter { + margin: 24px -24px -24px; } + .euiPopover__panel.euiPanel--paddingLarge .euiPopoverFooter:not([class*='euiPopoverFooter--padding']) { + padding: 12px 24px; } + +.euiInputPopover { + max-width: 400px; } + .euiInputPopover.euiInputPopover--fullWidth { + max-width: 100%; } + +/** + * 1. Portal content is absolutely positioned (e.g. tooltips, popovers, flyouts). + */ +.euiBody-hasPortalContent { + position: relative; + /* 1 */ } + +.euiProgress { + position: relative; + overflow: hidden; + background-color: #D3DAE6; } + +.euiProgress--xs { + height: 2px; } + +.euiProgress--s { + height: 4px; } + +.euiProgress--m { + height: 8px; } + +.euiProgress--l { + height: 16px; } + +.euiProgress--native { + display: block; + width: 100%; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border: none; } + .euiProgress--native::-webkit-progress-bar { + background-color: #D3DAE6; } + .euiProgress--native::-webkit-progress-value { + -webkit-transition: width 250ms linear; + transition: width 250ms linear; } + .euiProgress--native::-moz-progress-bar { + -moz-transition: width 250ms linear; + transition: width 250ms linear; } + +/** + * An indeterminate bar has an unreliable end time. Because of a Firefox animation issue, + * we apply this style to a
instead of a element. + * See https://css-tricks.com/html5-progress-element/ for more info. + */ +.euiProgress--indeterminate:before { + position: absolute; + content: ''; + width: 100%; + top: 0; + bottom: 0; + left: 0; + -webkit-transform: scaleX(0) translateX(0%); + transform: scaleX(0) translateX(0%); + -webkit-animation: euiProgress 1s cubic-bezier(0.694, 0.0482, 0.335, 1) infinite; + animation: euiProgress 1s cubic-bezier(0.694, 0.0482, 0.335, 1) infinite; } + +.euiProgress--fixed { + position: fixed; + z-index: 1001; } + +.euiProgress--absolute { + position: absolute; } + +.euiProgress--fixed, +.euiProgress--absolute { + top: 0; + left: 0; + right: 0; + background-color: transparent; } + .euiProgress--fixed.euiProgress--native::-webkit-progress-bar, + .euiProgress--absolute.euiProgress--native::-webkit-progress-bar { + background-color: transparent; } + .euiProgress--fixed.euiProgress--native::-moz-progress-bar, + .euiProgress--absolute.euiProgress--native::-moz-progress-bar { + background-color: transparent; } + +.euiProgress--primary.euiProgress--native::-webkit-progress-value { + background-color: #07C; } + +.euiProgress--primary.euiProgress--native::-moz-progress-bar { + background-color: #07C; } + +.euiProgress--primary.euiProgress--indeterminate:before { + background-color: #07C; } + +.euiProgress__data--primary .euiProgress__valueText { + color: #0071c2; } + +.euiProgress--secondary.euiProgress--native::-webkit-progress-value { + background-color: #00BFB3; } + +.euiProgress--secondary.euiProgress--native::-moz-progress-bar { + background-color: #00BFB3; } + +.euiProgress--secondary.euiProgress--indeterminate:before { + background-color: #00BFB3; } + +.euiProgress__data--secondary .euiProgress__valueText { + color: #007e77; } + +.euiProgress--success.euiProgress--native::-webkit-progress-value { + background-color: #00BFB3; } + +.euiProgress--success.euiProgress--native::-moz-progress-bar { + background-color: #00BFB3; } + +.euiProgress--success.euiProgress--indeterminate:before { + background-color: #00BFB3; } + +.euiProgress__data--success .euiProgress__valueText { + color: #007e77; } + +.euiProgress--warning.euiProgress--native::-webkit-progress-value { + background-color: #FEC514; } + +.euiProgress--warning.euiProgress--native::-moz-progress-bar { + background-color: #FEC514; } + +.euiProgress--warning.euiProgress--indeterminate:before { + background-color: #FEC514; } + +.euiProgress__data--warning .euiProgress__valueText { + color: #8a6a0a; } + +.euiProgress--danger.euiProgress--native::-webkit-progress-value { + background-color: #BD271E; } + +.euiProgress--danger.euiProgress--native::-moz-progress-bar { + background-color: #BD271E; } + +.euiProgress--danger.euiProgress--indeterminate:before { + background-color: #BD271E; } + +.euiProgress__data--danger .euiProgress__valueText { + color: #BD271E; } + +.euiProgress--accent.euiProgress--native::-webkit-progress-value { + background-color: #F04E98; } + +.euiProgress--accent.euiProgress--native::-moz-progress-bar { + background-color: #F04E98; } + +.euiProgress--accent.euiProgress--indeterminate:before { + background-color: #F04E98; } + +.euiProgress__data--accent .euiProgress__valueText { + color: #c4407c; } + +.euiProgress--subdued.euiProgress--native::-webkit-progress-value { + background-color: #69707D; } + +.euiProgress--subdued.euiProgress--native::-moz-progress-bar { + background-color: #69707D; } + +.euiProgress--subdued.euiProgress--indeterminate:before { + background-color: #69707D; } + +.euiProgress__data--subdued .euiProgress__valueText { + color: #69707D; } + +.euiProgress--vis0.euiProgress--native::-webkit-progress-value { + background-color: #54B399; } + +.euiProgress--vis0.euiProgress--native::-moz-progress-bar { + background-color: #54B399; } + +.euiProgress--vis0.euiProgress--indeterminate:before { + background-color: #54B399; } + +.euiProgress__data--vis0 .euiProgress__valueText { + color: #3b7d6a; } + +.euiProgress--vis1.euiProgress--native::-webkit-progress-value { + background-color: #6092C0; } + +.euiProgress--vis1.euiProgress--native::-moz-progress-bar { + background-color: #6092C0; } + +.euiProgress--vis1.euiProgress--indeterminate:before { + background-color: #6092C0; } + +.euiProgress__data--vis1 .euiProgress__valueText { + color: #4e779c; } + +.euiProgress--vis2.euiProgress--native::-webkit-progress-value { + background-color: #D36086; } + +.euiProgress--vis2.euiProgress--native::-moz-progress-bar { + background-color: #D36086; } + +.euiProgress--vis2.euiProgress--indeterminate:before { + background-color: #D36086; } + +.euiProgress__data--vis2 .euiProgress__valueText { + color: #b55273; } + +.euiProgress--vis3.euiProgress--native::-webkit-progress-value { + background-color: #9170B8; } + +.euiProgress--vis3.euiProgress--native::-moz-progress-bar { + background-color: #9170B8; } + +.euiProgress--vis3.euiProgress--indeterminate:before { + background-color: #9170B8; } + +.euiProgress__data--vis3 .euiProgress__valueText { + color: #8365a6; } + +.euiProgress--vis4.euiProgress--native::-webkit-progress-value { + background-color: #CA8EAE; } + +.euiProgress--vis4.euiProgress--native::-moz-progress-bar { + background-color: #CA8EAE; } + +.euiProgress--vis4.euiProgress--indeterminate:before { + background-color: #CA8EAE; } + +.euiProgress__data--vis4 .euiProgress__valueText { + color: #8d647a; } + +.euiProgress--vis5.euiProgress--native::-webkit-progress-value { + background-color: #D6BF57; } + +.euiProgress--vis5.euiProgress--native::-moz-progress-bar { + background-color: #D6BF57; } + +.euiProgress--vis5.euiProgress--indeterminate:before { + background-color: #D6BF57; } + +.euiProgress__data--vis5 .euiProgress__valueText { + color: #807234; } + +.euiProgress--vis6.euiProgress--native::-webkit-progress-value { + background-color: #B9A888; } + +.euiProgress--vis6.euiProgress--native::-moz-progress-bar { + background-color: #B9A888; } + +.euiProgress--vis6.euiProgress--indeterminate:before { + background-color: #B9A888; } + +.euiProgress__data--vis6 .euiProgress__valueText { + color: #7b705a; } + +.euiProgress--vis7.euiProgress--native::-webkit-progress-value { + background-color: #DA8B45; } + +.euiProgress--vis7.euiProgress--native::-moz-progress-bar { + background-color: #DA8B45; } + +.euiProgress--vis7.euiProgress--indeterminate:before { + background-color: #DA8B45; } + +.euiProgress__data--vis7 .euiProgress__valueText { + color: #a16633; } + +.euiProgress--vis8.euiProgress--native::-webkit-progress-value { + background-color: #AA6556; } + +.euiProgress--vis8.euiProgress--native::-moz-progress-bar { + background-color: #AA6556; } + +.euiProgress--vis8.euiProgress--indeterminate:before { + background-color: #AA6556; } + +.euiProgress__data--vis8 .euiProgress__valueText { + color: #a26052; } + +.euiProgress--vis9.euiProgress--native::-webkit-progress-value { + background-color: #E7664C; } + +.euiProgress--vis9.euiProgress--native::-moz-progress-bar { + background-color: #E7664C; } + +.euiProgress--vis9.euiProgress--indeterminate:before { + background-color: #E7664C; } + +.euiProgress__data--vis9 .euiProgress__valueText { + color: #bc533e; } + +.euiProgress--customColor.euiProgress--native::-webkit-progress-value { + background-color: currentColor; } + +.euiProgress--customColor.euiProgress--native::-moz-progress-bar { + background-color: currentColor; } + +.euiProgress--customColor.euiProgress--indeterminate:before { + background-color: currentColor; } + +@-webkit-keyframes euiProgress { + 0% { + -webkit-transform: scaleX(1) translateX(-100%); + transform: scaleX(1) translateX(-100%); } + 100% { + -webkit-transform: scaleX(1) translateX(100%); + transform: scaleX(1) translateX(100%); } } + +@keyframes euiProgress { + 0% { + -webkit-transform: scaleX(1) translateX(-100%); + transform: scaleX(1) translateX(-100%); } + 100% { + -webkit-transform: scaleX(1) translateX(100%); + transform: scaleX(1) translateX(100%); } } + +.euiProgress__data { + display: -webkit-flex; + display: flex; + -webkit-justify-content: space-between; + justify-content: space-between; } + +.euiProgress__label, +.euiProgress__valueText { + color: #343741; + font-weight: 400; + font-size: 12px; + font-size: 0.85714rem; + line-height: 1.14286rem; + max-width: 100%; + overflow: hidden !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; + word-wrap: normal !important; } + +.euiProgress__label { + -webkit-flex-grow: 1; + flex-grow: 1; } + .euiProgress__label + .euiProgress__valueText { + padding-left: 4px; + -webkit-flex-grow: 1; + flex-grow: 1; + text-align: right; + -webkit-flex-shrink: 0; + flex-shrink: 0; } + +.euiProgress__valueText { + font-feature-settings: 'tnum' 1; + margin-left: auto; } + +.euiProgress__data--l .euiProgress__label, +.euiProgress__data--l .euiProgress__valueText { + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; } + +.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; + word-wrap: normal !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; + word-wrap: normal !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: 1000; } + .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: 1001; + -webkit-animation: none !important; + animation: none !important; + transition-property: background, box-shadow; } + .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; + left: -10000px; + top: auto; + width: 1px; + height: 1px; + overflow: hidden; } + +.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 */ } + +.euiResizableContainer { + display: -webkit-flex; + display: flex; + width: 100%; } + .euiResizableContainer--vertical { + -webkit-flex-direction: column; + flex-direction: column; } + +.euiResizablePanel { + position: relative; } + +.euiResizablePanel--paddingSmall { + padding: 8px; } + +.euiResizablePanel--paddingMedium { + padding: 16px; } + +.euiResizablePanel--paddingLarge { + padding: 24px; } + +.euiResizablePanel__content { + height: 100%; } + .euiResizablePanel__content:not([class*='plain']) { + border-width: 0; } + +.euiResizablePanel__content--scrollable { + scrollbar-width: thin; + overflow-y: auto; } + .euiResizablePanel__content--scrollable::-webkit-scrollbar { + width: 16px; + height: 16px; } + .euiResizablePanel__content--scrollable::-webkit-scrollbar-thumb { + background-color: rgba(105, 112, 125, 0.5); + border: 6px solid transparent; + background-clip: content-box; } + .euiResizablePanel__content--scrollable::-webkit-scrollbar-corner, .euiResizablePanel__content--scrollable::-webkit-scrollbar-track { + background-color: transparent; } + +.euiResizablePanel-isCollapsed { + overflow: hidden; } + .euiResizablePanel-isCollapsed .euiResizablePanel__content * { + display: none; } + +.euiResizableContainer--horizontal .euiResizablePanel-isCollapsed { + min-width: 0 !important; } + +.euiResizableContainer--horizontal .euiResizablePanel--collapsible.euiResizablePanel-isCollapsed { + min-width: 24px !important; } + +.euiResizableContainer--vertical .euiResizablePanel-isCollapsed { + min-height: 0 !important; } + +.euiResizableContainer--vertical .euiResizablePanel--collapsible.euiResizablePanel-isCollapsed { + min-height: 24px !important; } + +.euiSideNav__mobileToggle { + display: none; + border-bottom: 1px solid #D3DAE6; + padding: 16px; + width: 100%; + text-align: left; + border-radius: 0 !important; } + .euiSideNav__mobileToggle .euiButtonContent { + -webkit-justify-content: space-between; + justify-content: space-between; } + +@media only screen and (max-width: 574px) { + /** + * 1. Animation doesn't work against height. Need max-height instead. + * We set a value larger than what is needed to fake "auto". + */ + .euiSideNav-isOpenMobile .euiSideNav__content { + visibility: visible; + opacity: 1; + margin: 24px; + max-height: 5000px; + /* 1 */ + transition: all 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } + .euiSideNav__mobileToggle { + display: block; } + .euiSideNav__content { + overflow: hidden; + visibility: hidden; + opacity: 0; + max-height: 0; + margin: 0 24px; } } + +@media only screen and (min-width: 575px) and (max-width: 767px) { + /** + * 1. Animation doesn't work against height. Need max-height instead. + * We set a value larger than what is needed to fake "auto". + */ + .euiSideNav-isOpenMobile .euiSideNav__content { + visibility: visible; + opacity: 1; + margin: 24px; + max-height: 5000px; + /* 1 */ + transition: all 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } + .euiSideNav__mobileToggle { + display: block; } + .euiSideNav__content { + overflow: hidden; + visibility: hidden; + opacity: 0; + max-height: 0; + margin: 0 24px; } } + +/** + * 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.71429rem; + 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: #0071c2; + font-weight: 700; } + .euiSideNavItemButton.euiSideNavItemButton-isSelected .euiSideNavItemButton__label { + text-decoration: underline; + /* 4 */ } + .euiSideNavItemButton:disabled { + cursor: not-allowed; + text-decoration: none; + color: #ABB4C4; } + +.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; + word-wrap: normal !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 { + color: #1a1c21; + font-size: 16px; + font-size: 1.14286rem; + line-height: 1.71429rem; + 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: #eff2f6; + color: #1a1c21; + box-shadow: 100px 0 0 0 #eff2f6, -100px 0 0 0 #eff2f6; } + .euiSideNavItem--emphasized > .euiSideNavItemButton { + font-weight: 700; } + .euiSideNavItem--emphasized .euiSideNavItem--emphasized { + background: transparent; + box-shadow: none; } + +.euiSpacer { + -webkit-flex-shrink: 0; + flex-shrink: 0; } + +.euiSpacer--xs { + height: 4px; } + +.euiSpacer--s { + height: 8px; } + +.euiSpacer--m { + height: 16px; } + +.euiSpacer--l { + height: 24px; } + +.euiSpacer--xl { + height: 32px; } + +.euiSpacer--xxl { + height: 40px; } + +.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:focus-within { + outline: 2px solid currentColor; } + .euiSelectableList:focus-within:focus-visible { + outline-style: auto; } + .euiSelectableList:focus-within:not(:focus-visible) { + outline: none; } + +.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-width: thin; } + .euiSelectableList__list::-webkit-scrollbar { + width: 16px; + height: 16px; } + .euiSelectableList__list::-webkit-scrollbar-thumb { + background-color: rgba(105, 112, 125, 0.5); + border: 6px solid transparent; + background-clip: content-box; } + .euiSelectableList__list::-webkit-scrollbar-corner, .euiSelectableList__list::-webkit-scrollbar-track { + background-color: transparent; } + +.euiSelectableList__groupLabel { + color: #1a1c21; + font-size: 12px; + font-size: 0.85714rem; + line-height: 1.14286rem; + 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.71429rem; + display: -webkit-inline-flex; + display: inline-flex; + width: 100%; + text-align: left; + color: #343741; + cursor: pointer; } + .euiSelectableListItem:not(:last-of-type) { + border-bottom: 1px solid #eef2f7; } + .euiSelectableListItem-isFocused:not([aria-disabled='true']), .euiSelectableListItem:hover:not([aria-disabled='true']) { + color: #07C; + 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__content { + padding: 4px 12px; + 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 { + max-width: 100%; + overflow: hidden !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; + word-wrap: normal !important; + -webkit-flex-grow: 1; + flex-grow: 1; } + +/** + * 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-justify-content: center; + justify-content: center; + -webkit-align-items: center; + align-items: center; } + +.euiSelectableMessage--bordered { + overflow: hidden; + border: 1px solid #D3DAE6; + border-radius: 6px; } + +.euiHeader--dark .euiSelectableTemplateSitewide .euiFormControlLayout { + background-color: transparent; } + .euiHeader--dark .euiSelectableTemplateSitewide .euiFormControlLayout--group, + .euiHeader--dark .euiSelectableTemplateSitewide .euiFormControlLayout input { + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); } + .euiHeader--dark .euiSelectableTemplateSitewide .euiFormControlLayout:not(:focus-within) { + color: rgba(255, 255, 255, 0.7); } + .euiHeader--dark .euiSelectableTemplateSitewide .euiFormControlLayout:not(:focus-within) input { + color: inherit; + background-color: transparent; } + .euiHeader--dark .euiSelectableTemplateSitewide .euiFormControlLayout:not(:focus-within) input::-webkit-input-placeholder { + color: rgba(255, 255, 255, 0.4); + opacity: 1; } + .euiHeader--dark .euiSelectableTemplateSitewide .euiFormControlLayout:not(:focus-within) input::-moz-placeholder { + color: rgba(255, 255, 255, 0.4); + opacity: 1; } + .euiHeader--dark .euiSelectableTemplateSitewide .euiFormControlLayout:not(:focus-within) input::placeholder { + color: rgba(255, 255, 255, 0.4); + opacity: 1; } + .euiHeader--dark .euiSelectableTemplateSitewide .euiFormControlLayout:not(:focus-within) .euiFormControlLayout__append { + background-color: transparent; + color: inherit; } + +.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: #4e779c; + font-weight: 500; } + +.euiSelectableTemplateSitewide__optionMeta--deployment { + color: #3b7d6a; + font-weight: 500; } + +.euiSelectableTemplateSitewide__optionMeta--article { + color: #8365a6; + font-weight: 500; } + +.euiSelectableTemplateSitewide__optionMeta--case { + color: #bc533e; + font-weight: 500; } + +.euiSelectableTemplateSitewide__optionMeta--platform { + color: #807234; + font-weight: 500; } + +.euiStat .euiStat__title { + color: #000; } + .euiStat .euiStat__title--subdued { + color: #69707D; } + .euiStat .euiStat__title--primary { + color: #0071c2; } + .euiStat .euiStat__title--secondary { + color: #007e77; } + .euiStat .euiStat__title--danger { + color: #BD271E; } + .euiStat .euiStat__title--accent { + color: #c4407c; } + +.euiStat .euiStat__title-isLoading { + -webkit-animation: euiStatPulse 1.5s infinite ease-in-out; + animation: euiStatPulse 1.5s infinite ease-in-out; } + +.euiStat.euiStat--leftAligned { + text-align: left; + -webkit-align-items: flex-start; + align-items: flex-start; } + +.euiStat.euiStat--centerAligned { + text-align: center; + -webkit-align-items: center; + align-items: center; } + +.euiStat.euiStat--rightAligned { + text-align: right; + -webkit-align-items: flex-end; + align-items: flex-end; } + +@-webkit-keyframes euiStatPulse { + 0% { + opacity: 1; } + 50% { + opacity: .25; } + 100% { + opacity: 1; } } + +@keyframes euiStatPulse { + 0% { + opacity: 1; } + 50% { + opacity: .25; } + 100% { + opacity: 1; } } + +.euiStepNumber { + width: 32px; + height: 32px; + display: inline-block; + line-height: 32px; + border-radius: 32px; + text-align: center; + color: #FFF; + background-color: #07C; + font-size: 14px; + font-weight: 500; } + .euiStepNumber .euiStepNumber__icon { + vertical-align: middle; + position: relative; + top: -2px; } + .euiStepNumber--small { + width: 24px; + height: 24px; + display: inline-block; + line-height: 24px; + border-radius: 24px; + text-align: center; + color: #FFF; + background-color: #07C; + font-size: 12px; + font-weight: 500; } + .euiStepNumber--small .euiStepNumber__icon { + top: -1px; } + .euiStepNumber--complete .euiStepNumber__icon { + stroke: currentColor; + stroke-width: .5px; } + @media screen and (prefers-reduced-motion: no-preference) { + .euiStepNumber--complete, .euiStepNumber--warning, .euiStepNumber--danger { + -webkit-animation: euiGrow 150ms cubic-bezier(0.34, 1.61, 0.7, 1); + animation: euiGrow 150ms cubic-bezier(0.34, 1.61, 0.7, 1); } } + .euiStepNumber--loading { + background: transparent; } + .euiStepNumber.euiStepNumber-isHollow { + background-color: transparent; + border: 2px solid #07C; } + .euiStepNumber.euiStepNumber-isHollow .euiStepNumber__number { + display: none; } + .euiStepNumber--warning { + color: #8a6a0a; + background-color: #fff9e8; } + .euiStepNumber--danger { + color: #BD271E; + background-color: #f8e9e9; } + .euiStepNumber--disabled { + color: #646a77; + background-color: #f0f1f2; } + .euiStepNumber--incomplete { + color: #646a77; + background-color: #f0f1f2; } + +/** + * 1. Ensure that the step number vertically aligns with the title text + */ +.euiStep:not(:last-of-type) { + background-image: linear-gradient(to right, transparent 0, transparent 15px, #D3DAE6 15px, #D3DAE6 17px, transparent 17px, transparent 100%); + background-repeat: no-repeat; + background-position: left 40px; } + +.euiStep--small:not(:last-of-type) { + background-position: left -4px top 32px; } + +.euiStep--small .euiStep__content { + padding-left: 28px; + margin-left: 12px; } + +.euiStep__titleWrapper { + display: -webkit-flex; + display: flex; } + +.euiStep__circle { + -webkit-flex-shrink: 0; + flex-shrink: 0; + margin-right: 16px; + vertical-align: top; + /* 1 */ } + +.euiStep__title { + font-weight: 500; } + +.euiStep__content { + padding: 16px 16px 32px; + margin: 8px 0; + padding-left: 32px; + margin-left: 16px; } + +.euiSubSteps { + padding: 16px; + background-color: #F5F7FA; + margin-bottom: 16px; } + .euiSubSteps > *:last-child { + margin-bottom: 0; } + .euiText .euiSubSteps ol, + .euiSubSteps ol { + list-style-type: lower-alpha; } + +/** + * 1. Ensure the connecting lines stays behind the number + * 2. Make each step the same width + * 3. Make the content of each step align to the top, even if the steps are of varying heights, + * e.g. due to some of their titles wrapping to multiple lines + */ +.euiStepsHorizontal { + display: -webkit-flex; + display: flex; + -webkit-align-items: stretch; + align-items: stretch; + background: rgba(245, 247, 250, 0.5); } + +.euiStepHorizontal__item { + -webkit-flex-grow: 1; + flex-grow: 1; + /* 2 */ + -webkit-flex-basis: 0%; + flex-basis: 0%; + /* 2 */ } + .euiStepHorizontal__item:first-of-type > .euiStepHorizontal::before, + .euiStepHorizontal__item:last-of-type > .euiStepHorizontal::after { + display: none; } + +.euiStepHorizontal { + padding: 24px 16px 16px; + display: -webkit-flex; + display: flex; + /* 3 */ + -webkit-flex-direction: column; + flex-direction: column; + /* 3 */ + -webkit-align-items: center; + align-items: center; + /* 3 */ + -webkit-justify-content: flex-start; + justify-content: flex-start; + /* 3 */ + cursor: pointer; + position: relative; + width: 100%; } + .euiStepHorizontal:focus:not(.euiStepHorizontal-isDisabled) .euiStepHorizontal__title, .euiStepHorizontal:hover:not(.euiStepHorizontal-isDisabled) .euiStepHorizontal__title { + text-decoration: underline; } + .euiStepHorizontal:focus:not(.euiStepHorizontal-isDisabled) { + outline: none; } + .euiStepHorizontal:focus:not(.euiStepHorizontal-isDisabled) .euiStepHorizontal__number { + outline: 2px solid currentColor; } + .euiStepHorizontal:focus:not(.euiStepHorizontal-isDisabled) .euiStepHorizontal__number:focus-visible { + outline-style: auto; } + .euiStepHorizontal:focus:not(.euiStepHorizontal-isDisabled) .euiStepHorizontal__number:not(:focus-visible) { + outline: none; } + .euiStepHorizontal.euiStepHorizontal-isDisabled { + cursor: not-allowed; } + .euiStepHorizontal::before, .euiStepHorizontal::after { + content: ''; + position: absolute; + width: calc(50% - 16px); + height: 1px; + top: 40px; + background-color: #D3DAE6; + z-index: 0; + /* 1 */ } + .euiStepHorizontal::before { + left: 0; } + .euiStepHorizontal::after { + right: 0; } + +.euiStepHorizontal__number { + position: relative; + /* 1 */ + z-index: 1; + /* 1 */ + transition: all 150ms ease-in-out; } + +.euiStepHorizontal__title { + color: #1a1c21; + font-size: 16px; + font-size: 1.14286rem; + line-height: 1.71429rem; + font-weight: 700; + margin-top: 8px; + font-weight: 400; + text-align: center; } + .euiStepHorizontal-isDisabled .euiStepHorizontal__title { + color: #69707D; } + +.euiStepHorizontal-isComplete::before, .euiStepHorizontal-isComplete::after { + height: 2px; + background-color: #07C; } + +.euiStepHorizontal-isSelected .euiStepHorizontal__number:not([class*='danger']):not([class*='warning']):not([class*='loading']) { + box-shadow: 0 0.8px 0.8px rgba(20, 116, 184, 0.04), 0 2.3px 2px rgba(20, 116, 184, 0.03); } + +.euiStepHorizontal-isSelected::before { + height: 2px; + background-color: #07C; } + +@media only screen and (max-width: 574px) { + .euiStepHorizontal { + padding-top: 16px; } + .euiStepHorizontal::before, .euiStepHorizontal::after { + top: 32px; } + .euiStepHorizontal__title { + display: none; } } + +@media only screen and (min-width: 575px) and (max-width: 767px) { + .euiStepHorizontal { + padding-top: 16px; } + .euiStepHorizontal::before, .euiStepHorizontal::after { + top: 32px; } + .euiStepHorizontal__title { + display: none; } } + +.euiSuggestItem { + display: -webkit-flex; + display: flex; + -webkit-flex-grow: 1; + flex-grow: 1; + -webkit-align-items: center; + align-items: center; + font-size: 12px; + white-space: nowrap; } + .euiSuggestItem.euiSuggestItem-isClickable { + width: 100%; + text-align: left; } + .euiSuggestItem.euiSuggestItem-isClickable:hover, .euiSuggestItem.euiSuggestItem-isClickable:focus { + cursor: pointer; + background-color: #F5F7FA; } + .euiSuggestItem.euiSuggestItem-isClickable:hover .euiSuggestItem__type, .euiSuggestItem.euiSuggestItem-isClickable:focus .euiSuggestItem__type { + color: #343741; } + .euiSuggestItem .euiSuggestItem__type--tint0 { + background-color: #e0f1ed; + color: #357160; } + .euiSuggestItem .euiSuggestItem__type--tint1 { + background-color: #e2ebf4; + color: #466b8d; } + .euiSuggestItem .euiSuggestItem__type--tint2 { + background-color: #f7e2e9; + color: #a34a68; } + .euiSuggestItem .euiSuggestItem__type--tint3 { + background-color: #ebe5f2; + color: #765b96; } + .euiSuggestItem .euiSuggestItem__type--tint4 { + background-color: #f5ebf0; + color: #865f74; } + .euiSuggestItem .euiSuggestItem__type--tint5 { + background-color: #f8f3e1; + color: #7a6c31; } + .euiSuggestItem .euiSuggestItem__type--tint6 { + background-color: #f2efea; + color: #756a56; } + .euiSuggestItem .euiSuggestItem__type--tint7 { + background-color: #f8eade; + color: #915c2e; } + .euiSuggestItem .euiSuggestItem__type--tint8 { + background-color: #f0e3e1; + color: #92564a; } + .euiSuggestItem .euiSuggestItem__type--tint9 { + background-color: #fbe3df; + color: #aa4b38; } + .euiSuggestItem .euiSuggestItem__type--tint10 { + background-color: #e4e5e8; + color: #5f6571; } + .euiSuggestItem .euiSuggestItem__label, + .euiSuggestItem .euiSuggestItem__type, + .euiSuggestItem .euiSuggestItem__description { + -webkit-flex-grow: 0; + flex-grow: 0; + display: -webkit-flex; + display: flex; + -webkit-flex-direction: column; + flex-direction: column; } + .euiSuggestItem .euiSuggestItem__type { + position: relative; + -webkit-flex-shrink: 0; + flex-shrink: 0; + -webkit-flex-basis: auto; + flex-basis: auto; + width: 32px; + height: 32px; + text-align: center; + overflow: hidden; + padding: 4px; + -webkit-justify-content: center; + justify-content: center; + -webkit-align-items: center; + align-items: center; } + .euiSuggestItem .euiSuggestItem__label { + max-width: 100%; + overflow: hidden !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; + word-wrap: normal !important; + font-family: "Roboto Mono", Consolas, Menlo, Courier, monospace; + overflow: hidden; + text-overflow: ellipsis; + padding: 4px 8px; + color: #343741; + display: block; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width20 { + -webkit-flex-basis: 20%; + flex-basis: 20%; + min-width: 20%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width21 { + -webkit-flex-basis: 21%; + flex-basis: 21%; + min-width: 21%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width22 { + -webkit-flex-basis: 22%; + flex-basis: 22%; + min-width: 22%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width23 { + -webkit-flex-basis: 23%; + flex-basis: 23%; + min-width: 23%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width24 { + -webkit-flex-basis: 24%; + flex-basis: 24%; + min-width: 24%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width25 { + -webkit-flex-basis: 25%; + flex-basis: 25%; + min-width: 25%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width26 { + -webkit-flex-basis: 26%; + flex-basis: 26%; + min-width: 26%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width27 { + -webkit-flex-basis: 27%; + flex-basis: 27%; + min-width: 27%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width28 { + -webkit-flex-basis: 28%; + flex-basis: 28%; + min-width: 28%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width29 { + -webkit-flex-basis: 29%; + flex-basis: 29%; + min-width: 29%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width30 { + -webkit-flex-basis: 30%; + flex-basis: 30%; + min-width: 30%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width31 { + -webkit-flex-basis: 31%; + flex-basis: 31%; + min-width: 31%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width32 { + -webkit-flex-basis: 32%; + flex-basis: 32%; + min-width: 32%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width33 { + -webkit-flex-basis: 33%; + flex-basis: 33%; + min-width: 33%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width34 { + -webkit-flex-basis: 34%; + flex-basis: 34%; + min-width: 34%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width35 { + -webkit-flex-basis: 35%; + flex-basis: 35%; + min-width: 35%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width36 { + -webkit-flex-basis: 36%; + flex-basis: 36%; + min-width: 36%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width37 { + -webkit-flex-basis: 37%; + flex-basis: 37%; + min-width: 37%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width38 { + -webkit-flex-basis: 38%; + flex-basis: 38%; + min-width: 38%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width39 { + -webkit-flex-basis: 39%; + flex-basis: 39%; + min-width: 39%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width40 { + -webkit-flex-basis: 40%; + flex-basis: 40%; + min-width: 40%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width41 { + -webkit-flex-basis: 41%; + flex-basis: 41%; + min-width: 41%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width42 { + -webkit-flex-basis: 42%; + flex-basis: 42%; + min-width: 42%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width43 { + -webkit-flex-basis: 43%; + flex-basis: 43%; + min-width: 43%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width44 { + -webkit-flex-basis: 44%; + flex-basis: 44%; + min-width: 44%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width45 { + -webkit-flex-basis: 45%; + flex-basis: 45%; + min-width: 45%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width46 { + -webkit-flex-basis: 46%; + flex-basis: 46%; + min-width: 46%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width47 { + -webkit-flex-basis: 47%; + flex-basis: 47%; + min-width: 47%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width48 { + -webkit-flex-basis: 48%; + flex-basis: 48%; + min-width: 48%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width49 { + -webkit-flex-basis: 49%; + flex-basis: 49%; + min-width: 49%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width50 { + -webkit-flex-basis: 50%; + flex-basis: 50%; + min-width: 50%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width51 { + -webkit-flex-basis: 51%; + flex-basis: 51%; + min-width: 51%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width52 { + -webkit-flex-basis: 52%; + flex-basis: 52%; + min-width: 52%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width53 { + -webkit-flex-basis: 53%; + flex-basis: 53%; + min-width: 53%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width54 { + -webkit-flex-basis: 54%; + flex-basis: 54%; + min-width: 54%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width55 { + -webkit-flex-basis: 55%; + flex-basis: 55%; + min-width: 55%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width56 { + -webkit-flex-basis: 56%; + flex-basis: 56%; + min-width: 56%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width57 { + -webkit-flex-basis: 57%; + flex-basis: 57%; + min-width: 57%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width58 { + -webkit-flex-basis: 58%; + flex-basis: 58%; + min-width: 58%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width59 { + -webkit-flex-basis: 59%; + flex-basis: 59%; + min-width: 59%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width60 { + -webkit-flex-basis: 60%; + flex-basis: 60%; + min-width: 60%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width61 { + -webkit-flex-basis: 61%; + flex-basis: 61%; + min-width: 61%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width62 { + -webkit-flex-basis: 62%; + flex-basis: 62%; + min-width: 62%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width63 { + -webkit-flex-basis: 63%; + flex-basis: 63%; + min-width: 63%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width64 { + -webkit-flex-basis: 64%; + flex-basis: 64%; + min-width: 64%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width65 { + -webkit-flex-basis: 65%; + flex-basis: 65%; + min-width: 65%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width66 { + -webkit-flex-basis: 66%; + flex-basis: 66%; + min-width: 66%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width67 { + -webkit-flex-basis: 67%; + flex-basis: 67%; + min-width: 67%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width68 { + -webkit-flex-basis: 68%; + flex-basis: 68%; + min-width: 68%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width69 { + -webkit-flex-basis: 69%; + flex-basis: 69%; + min-width: 69%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width70 { + -webkit-flex-basis: 70%; + flex-basis: 70%; + min-width: 70%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width71 { + -webkit-flex-basis: 71%; + flex-basis: 71%; + min-width: 71%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width72 { + -webkit-flex-basis: 72%; + flex-basis: 72%; + min-width: 72%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width73 { + -webkit-flex-basis: 73%; + flex-basis: 73%; + min-width: 73%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width74 { + -webkit-flex-basis: 74%; + flex-basis: 74%; + min-width: 74%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width75 { + -webkit-flex-basis: 75%; + flex-basis: 75%; + min-width: 75%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width76 { + -webkit-flex-basis: 76%; + flex-basis: 76%; + min-width: 76%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width77 { + -webkit-flex-basis: 77%; + flex-basis: 77%; + min-width: 77%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width78 { + -webkit-flex-basis: 78%; + flex-basis: 78%; + min-width: 78%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width79 { + -webkit-flex-basis: 79%; + flex-basis: 79%; + min-width: 79%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width80 { + -webkit-flex-basis: 80%; + flex-basis: 80%; + min-width: 80%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width81 { + -webkit-flex-basis: 81%; + flex-basis: 81%; + min-width: 81%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width82 { + -webkit-flex-basis: 82%; + flex-basis: 82%; + min-width: 82%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width83 { + -webkit-flex-basis: 83%; + flex-basis: 83%; + min-width: 83%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width84 { + -webkit-flex-basis: 84%; + flex-basis: 84%; + min-width: 84%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width85 { + -webkit-flex-basis: 85%; + flex-basis: 85%; + min-width: 85%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width86 { + -webkit-flex-basis: 86%; + flex-basis: 86%; + min-width: 86%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width87 { + -webkit-flex-basis: 87%; + flex-basis: 87%; + min-width: 87%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width88 { + -webkit-flex-basis: 88%; + flex-basis: 88%; + min-width: 88%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width89 { + -webkit-flex-basis: 89%; + flex-basis: 89%; + min-width: 89%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width90 { + -webkit-flex-basis: 90%; + flex-basis: 90%; + min-width: 90%; } + .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__labelDisplay--expand { + -webkit-flex-basis: auto; + flex-basis: auto; + -webkit-flex-shrink: 1; + flex-shrink: 1; } + .euiSuggestItem .euiSuggestItem__description { + color: #69707D; + -webkit-flex-basis: auto; + flex-basis: auto; + padding-top: 2px; + display: block; } + .euiSuggestItem .euiSuggestItem__description.euiSuggestItem__description--wrap { + overflow-wrap: break-word !important; + word-wrap: break-word !important; + word-break: break-word; + white-space: normal; + line-height: 14px; } + .euiSuggestItem .euiSuggestItem__description.euiSuggestItem__description--truncate { + max-width: 100%; + overflow: hidden !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; + word-wrap: normal !important; + line-height: 1.5; } + .euiSuggestItem .euiSuggestItem__description:empty { + -webkit-flex-grow: 0; + flex-grow: 0; + margin-left: 0; } + +.euiSuggestInput__statusIcon { + background-color: transparent !important; } + +/** + * NOTE: table-layout: fixed causes a bug in IE11 and Edge (see #9929). It also prevents us from + * specifying a column width, e.g. the checkbox column. + */ +.euiTable { + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + 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.85714rem; + line-height: 1.14286rem; + padding: 4px; } } + +@media only screen and (min-width: 992px) and (max-width: 1199px) { + .euiTable--compressed .euiTableCellContent { + font-size: 12px; + font-size: 0.85714rem; + line-height: 1.14286rem; + padding: 4px; } } + +@media only screen and (min-width: 1200px) { + .euiTable--compressed .euiTableCellContent { + font-size: 12px; + font-size: 0.85714rem; + line-height: 1.14286rem; + padding: 4px; } } + +.euiTableFooterCell, +.euiTableHeaderCell { + vertical-align: middle; + border-top: 1px solid #D3DAE6; + border-bottom: 1px solid #D3DAE6; + font-weight: inherit; + text-align: inherit; + color: #1a1c21; + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + font-weight: 700; + font-weight: 500; + border-top: none; } + .euiTableFooterCell .euiTableHeaderButton, + .euiTableHeaderCell .euiTableHeaderButton { + text-align: left; + font-weight: 500; } + .euiTableFooterCell .euiTableCellContent__text, + .euiTableHeaderCell .euiTableCellContent__text { + font-size: 12px; + font-size: 0.85714rem; + line-height: 1.14286rem; + font-weight: 600; } + +.euiTableHeaderButton { + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + 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: inherit; + width: 32px; + vertical-align: middle; + border-top: 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: inherit; + color: #343741; } + .euiTableRowCell.euiTableRowCell--isMobileHeader { + display: none; } + +.euiTableRowCellCheckbox { + vertical-align: middle; + border-top: 1px solid #D3DAE6; + border-bottom: 1px solid #D3DAE6; + font-weight: inherit; + text-align: inherit; + width: 32px; + vertical-align: middle; } + +.euiTableFooterCell { + background-color: #F5F7FA; + border-bottom: none; } + +/** + * 1. Vertically align all children. + * 2. The padding on this div allows the ellipsis to show if the content is truncated. If + * the padding was on the cell, the ellipsis would be cropped. + * 3. Support wrapping. + * 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-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 { + white-space: nowrap; + /* 3 */ } + .euiTableHeaderCell .euiTableCellContent__text, + .euiTableFooterCell .euiTableCellContent__text, + .euiTableCellContent--truncateText .euiTableCellContent__text { + overflow: hidden; } + +.euiTableCellContent--overflowingContent { + overflow: visible; + white-space: normal; + word-break: break-all; + 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: .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 { + overflow: hidden; + -webkit-animation: 250ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards growExpandedRow; + animation: 250ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards growExpandedRow; } + +@-webkit-keyframes growExpandedRow { + 0% { + max-height: 0; } + 99% { + max-height: 100vh; } + 100% { + max-height: unset; } } + +@keyframes growExpandedRow { + 0% { + max-height: 0; } + 99% { + max-height: 100vh; } + 100% { + max-height: unset; } } + +.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; + word-wrap: normal !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: 14px; + font-size: 1rem; + line-height: 1.71429rem; } + .euiTable.euiTable--responsive .euiTableRowCell--isMobileFullWidth { + width: 100%; } + .euiTable.euiTable--responsive .euiTableRowCell--isMobileFullWidth .euiTableCellContent--alignCenter { + -webkit-justify-content: center; + justify-content: center; + text-align: center; } + .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: 4px; } + .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 { + display: block; + /* IE requires block to grow and wrap. */ + 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; + word-wrap: normal !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: 14px; + font-size: 1rem; + line-height: 1.71429rem; } + .euiTable.euiTable--responsive .euiTableRowCell--isMobileFullWidth { + width: 100%; } + .euiTable.euiTable--responsive .euiTableRowCell--isMobileFullWidth .euiTableCellContent--alignCenter { + -webkit-justify-content: center; + justify-content: center; + text-align: center; } + .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: 4px; } + .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 { + display: block; + /* IE requires block to grow and wrap. */ + 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; } } + +.euiTabs { + scrollbar-width: thin; + display: -webkit-flex; + display: flex; + max-width: 100%; + overflow-x: auto; + overflow-y: hidden; + position: relative; + -webkit-flex-shrink: 0; + flex-shrink: 0; } + .euiTabs::-webkit-scrollbar { + width: 16px; + height: 16px; } + .euiTabs::-webkit-scrollbar-thumb { + background-color: rgba(105, 112, 125, 0.5); + border: 6px solid transparent; + background-clip: content-box; } + .euiTabs::-webkit-scrollbar-corner, .euiTabs::-webkit-scrollbar-track { + background-color: transparent; } + .euiTabs::-webkit-scrollbar { + height: 3px; } + .euiTabs:not(.euiTabs--condensed)::before { + background-color: #D3DAE6; + bottom: 0; + content: ''; + height: 1px; + left: 0; + position: absolute; + right: 0; } + +.euiTab { + font-size: 14px; + font-size: 1rem; + color: #343741; + background-color: transparent; + cursor: pointer; + line-height: 1.5; + padding: 12px 16px; + position: relative; + transition: color 250ms cubic-bezier(0.694, 0.0482, 0.335, 1), background-color 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } + .euiTab:hover:not(.euiTab-isSelected) { + text-decoration: underline; } + .euiTab:focus { + background-color: rgba(0, 119, 204, 0.1); + text-decoration: underline; + outline-offset: -2px; } + .euiTab:focus::before { + background-color: #D3DAE6; + bottom: 0; + content: ''; + height: 1px; + left: 0; + position: absolute; + right: 0; } + .euiTab.euiTab-isSelected { + color: #07C; + cursor: default; } + .euiTab.euiTab-isSelected::after { + -webkit-animation: euiTab 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); + animation: euiTab 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); + background-color: #07C; + bottom: 0; + content: ' '; + height: 2px; + left: 0; + position: absolute; + width: 100%; } + .euiTab.euiTab-isDisabled { + color: #ABB4C4; } + .euiTab.euiTab-isDisabled:hover { + color: #ABB4C4; + cursor: not-allowed; + text-decoration: none; } + .euiTab.euiTab-isDisabled::after { + background-color: #ABB4C4; } + .euiTabs--small .euiTab { + font-size: 14px; + font-size: 1rem; + padding: 8px; } + .euiTabs--condensed .euiTab { + font-weight: 600; + padding: 8px 4px; } + .euiTabs--condensed .euiTab:focus { + background-color: rgba(0, 119, 204, 0.1); } + .euiTabs--condensed .euiTab:focus::before { + display: none; } + .euiTabs--condensed .euiTab-isSelected { + text-decoration: none; } + .euiTabs--condensed .euiTab + .euiTab { + margin-left: 16px; } + .euiTabs--small.euiTabs--condensed .euiTab { + padding-top: 6px; + padding-bottom: 6px; } + .euiTabs--large.euiTabs--condensed .euiTab + .euiTab { + margin-left: 24px; } + .euiTabs--expand .euiTab { + -webkit-flex-basis: 0%; + flex-basis: 0%; + -webkit-flex-grow: 1; + flex-grow: 1; } + +.euiTab__content { + display: block; + overflow: hidden; + text-overflow: ellipsis; + -webkit-transform: translateY(0); + transform: translateY(0); + transition: -webkit-transform 150ms cubic-bezier(0.34, 1.61, 0.7, 1); + transition: transform 150ms cubic-bezier(0.34, 1.61, 0.7, 1); + transition: transform 150ms cubic-bezier(0.34, 1.61, 0.7, 1), -webkit-transform 150ms cubic-bezier(0.34, 1.61, 0.7, 1); + white-space: nowrap; } + +@-webkit-keyframes euiTab { + 0% { + -webkit-transform: scaleX(0); + transform: scaleX(0); } + 100% { + -webkit-transform: scaleX(1); + transform: scaleX(1); } } + +@keyframes euiTab { + 0% { + -webkit-transform: scaleX(0); + transform: scaleX(0); } + 100% { + -webkit-transform: scaleX(1); + transform: scaleX(1); } } + +.euiTextDiff del { + color: #BD271E; } + +.euiTextDiff ins { + color: #007e77; } + +.euiTitle + .euiTitle { + margin-top: 24px; } + +.euiTitle--uppercase { + text-transform: uppercase; } + +.euiTitle--xxxsmall { + color: #1a1c21; + font-size: 12px; + font-size: 0.85714rem; + line-height: 1.14286rem; + font-weight: 700; } + +.euiTitle--xxsmall { + color: #1a1c21; + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + font-weight: 700; } + +.euiTitle--xsmall { + color: #1a1c21; + font-size: 16px; + font-size: 1.14286rem; + line-height: 1.71429rem; + font-weight: 700; } + +.euiTitle--small { + color: #1a1c21; + font-size: 22px; + font-size: 1.57143rem; + line-height: 2.28571rem; + font-weight: 700; } + +.euiTitle--medium { + color: #1a1c21; + font-size: 27px; + font-size: 1.92857rem; + line-height: 2.28571rem; + font-weight: 700; } + +.euiTitle--large { + color: #1a1c21; + font-size: 34px; + font-size: 2.42857rem; + line-height: 2.85714rem; + font-weight: 700; } + +/** + * 1. Allow list to expand as items are added, but cap it at the screen height. + * 2. Allow some padding for shadow + */ +.euiGlobalToastList { + scrollbar-width: thin; + display: -webkit-flex; + display: flex; + -webkit-flex-direction: column; + flex-direction: column; + -webkit-align-items: stretch; + align-items: stretch; + position: fixed; + z-index: 9000; + bottom: 0; + width: 400px; + /* 2 */ + max-height: 100vh; + /* 1 */ + overflow-y: auto; + scrollbar-width: none; } + .euiGlobalToastList::-webkit-scrollbar { + width: 16px; + height: 16px; } + .euiGlobalToastList::-webkit-scrollbar-thumb { + background-color: rgba(105, 112, 125, 0.5); + border: 6px solid transparent; + background-clip: content-box; } + .euiGlobalToastList::-webkit-scrollbar-corner, .euiGlobalToastList::-webkit-scrollbar-track { + background-color: transparent; } + .euiGlobalToastList::-webkit-scrollbar { + width: 0; + height: 0; } + .euiGlobalToastList:not(:empty) { + padding: 16px; } + +.euiGlobalToastList--right:not(:empty) { + right: 0; + padding-left: 64px; + /* 2 */ } + +.euiGlobalToastList--left:not(:empty) { + left: 0; + padding-right: 64px; + /* 2 */ } + +.euiGlobalToastListItem { + margin-bottom: 16px; + -webkit-animation: 250ms euiShowToast cubic-bezier(0.694, 0.0482, 0.335, 1); + animation: 250ms euiShowToast cubic-bezier(0.694, 0.0482, 0.335, 1); + opacity: 1; + /** + * 1. justify-content: flex-end interferes with overflowing content, so we'll use this to push + * items to the bottom instead. + */ } + .euiGlobalToastListItem:first-child { + margin-top: auto; + /* 1 */ } + .euiGlobalToastListItem:last-child { + margin-bottom: 0; } + .euiGlobalToastListItem.euiGlobalToastListItem-isDismissed { + transition: opacity 250ms; + opacity: 0; } + +@-webkit-keyframes euiShowToast { + from { + -webkit-transform: translateY(24px) scale(0.9); + transform: translateY(24px) scale(0.9); + opacity: 0; } + to { + -webkit-transform: translateY(0) scale(1); + transform: translateY(0) scale(1); + opacity: 1; } } + +@keyframes euiShowToast { + from { + -webkit-transform: translateY(24px) scale(0.9); + transform: translateY(24px) scale(0.9); + opacity: 0; } + to { + -webkit-transform: translateY(0) scale(1); + transform: translateY(0) scale(1); + opacity: 1; } } + +@media only screen and (max-width: 574px) { + /** + * 1. Mobile we make these 100%. Matching change happens on the item as well. + */ + .euiGlobalToastList:not(:empty) { + left: 0; + padding-left: 16px; + padding-right: 16px; + width: 100%; + /* 1 */ } } + +@media only screen and (min-width: 575px) and (max-width: 767px) { + /** + * 1. Mobile we make these 100%. Matching change happens on the item as well. + */ + .euiGlobalToastList:not(:empty) { + left: 0; + padding-left: 16px; + padding-right: 16px; + width: 100%; + /* 1 */ } } + +.euiToast { + border: 1px solid #D3DAE6; + box-shadow: 0 2.7px 9px rgba(0, 0, 0, 0.13), 0 9.4px 24px rgba(0, 0, 0, 0.09), 0 21.8px 43px rgba(0, 0, 0, 0.08); + position: relative; + padding: 16px; + background-color: #FFF; + width: 100%; } + .euiToast:hover .euiToast__closeButton, + .euiToast:focus .euiToast__closeButton { + opacity: 1; } + +/** + * 1. Fit button to icon. + */ +.euiToast__closeButton { + position: absolute; + top: 16px; + right: 16px; + line-height: 0; + /* 1 */ + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + opacity: 0; + transition: opacity 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); } + .euiToast__closeButton svg { + fill: #8d8e90; } + .euiToast__closeButton:hover svg { + fill: #1a1c21; } + .euiToast__closeButton:focus { + background-color: rgba(0, 119, 204, 0.1); + opacity: 1; } + .euiToast__closeButton:focus svg { + fill: #07C; } + +.euiToast--primary { + border-top: 2px solid #07C; } + +.euiToast--success { + border-top: 2px solid #00a39a; } + +.euiToast--warning { + border-top: 2px solid #b28a0d; } + +.euiToast--danger { + border-top: 2px solid #BD271E; } + +/** + * 1. Align icon with first line of title text if it wraps. + * 2. Apply margin to all but last item in the flex. + * 3. Account for close button. + */ +.euiToastHeader { + padding-right: 24px; + /* 3 */ + display: -webkit-flex; + display: flex; + -webkit-align-items: baseline; + align-items: baseline; + /* 1 */ } + .euiToastHeader > * + * { + margin-left: 8px; + /* 2 */ } + +/** + * 1. Vertically center icon with first line of title. + */ +.euiToastHeader__icon { + -webkit-flex: 0 0 auto; + flex: 0 0 auto; + fill: #1a1c21; + -webkit-transform: translateY(2px); + transform: translateY(2px); + /* 1 */ } + +.euiToastHeader__title { + color: #1a1c21; + font-size: 16px; + font-size: 1.14286rem; + line-height: 1.71429rem; + font-weight: 700; + overflow-wrap: break-word !important; + word-wrap: break-word !important; + word-break: break-word; + font-weight: 300; } + +.euiToastHeader--withBody { + margin-bottom: 8px; } + +/** + * 1. Prevent long lines from overflowing. + */ +.euiToastBody { + word-wrap: break-word; + /* 1 */ } + +.euiToken { + display: -webkit-inline-flex; + display: inline-flex; + -webkit-align-items: center; + align-items: center; + -webkit-justify-content: center; + justify-content: center; } + .euiToken svg { + height: 100%; + margin: auto; } + +.euiToken--circle { + border-radius: 50%; } + +.euiToken--square { + border-radius: 5px; } + +.euiToken--xsmall { + width: 12px; + height: 12px; } + .euiToken--xsmall.euiToken--rectangle { + padding: 0 4px; } + +.euiToken--small { + width: 16px; + height: 16px; } + .euiToken--small.euiToken--rectangle { + padding: 0 4px; } + +.euiToken--medium { + width: 24px; + height: 24px; } + .euiToken--medium.euiToken--rectangle { + padding: 0 8px; } + +.euiToken--large { + width: 32px; + height: 32px; } + .euiToken--large.euiToken--rectangle { + padding: 0 8px; } + +.euiToken--rectangle { + box-sizing: content-box; } + +.euiToken--euiColorVis0 { + color: #54B399; } + .euiToken--euiColorVis0.euiToken--light { + color: #387765; + background-color: #eef7f5; + box-shadow: inset 0 0 0 1px #cce8e0; } + .euiToken--euiColorVis0.euiToken--dark { + background-color: #6DCCB1; + color: #000; } + +.euiToken--euiColorVis1 { + color: #6092C0; } + .euiToken--euiColorVis1.euiToken--light { + color: #4a7194; + background-color: #eff4f9; + box-shadow: inset 0 0 0 1px #cfdeec; } + .euiToken--euiColorVis1.euiToken--dark { + background-color: #79AAD9; + color: #000; } + +.euiToken--euiColorVis2 { + color: #D36086; } + .euiToken--euiColorVis2.euiToken--light { + color: #ac4e6d; + background-color: #fbeff3; + box-shadow: inset 0 0 0 1px #f2cfdb; } + .euiToken--euiColorVis2.euiToken--dark { + background-color: #EE789D; + color: #000; } + +.euiToken--euiColorVis3 { + color: #9170B8; } + .euiToken--euiColorVis3.euiToken--light { + color: #7c609e; + background-color: #f4f1f8; + box-shadow: inset 0 0 0 1px #ded4ea; } + .euiToken--euiColorVis3.euiToken--dark { + background-color: #A987D1; + color: #000; } + +.euiToken--euiColorVis4 { + color: #CA8EAE; } + .euiToken--euiColorVis4.euiToken--light { + color: #8d647a; + background-color: #faf4f7; + box-shadow: inset 0 0 0 1px #efdde7; } + .euiToken--euiColorVis4.euiToken--dark { + background-color: #E4A6C7; + color: #000; } + +.euiToken--euiColorVis5 { + color: #D6BF57; } + .euiToken--euiColorVis5.euiToken--light { + color: #807234; + background-color: #fbf9ee; + box-shadow: inset 0 0 0 1px #f3eccd; } + .euiToken--euiColorVis5.euiToken--dark { + background-color: #F1D86F; + color: #000; } + +.euiToken--euiColorVis6 { + color: #B9A888; } + .euiToken--euiColorVis6.euiToken--light { + color: #7b705a; + background-color: #f8f6f3; + box-shadow: inset 0 0 0 1px #eae5db; } + .euiToken--euiColorVis6.euiToken--dark { + background-color: #D2C0A0; + color: #000; } + +.euiToken--euiColorVis7 { + color: #DA8B45; } + .euiToken--euiColorVis7.euiToken--light { + color: #996130; + background-color: #fbf3ec; + box-shadow: inset 0 0 0 1px #f4dcc7; } + .euiToken--euiColorVis7.euiToken--dark { + background-color: #F5A35C; + color: #000; } + +.euiToken--euiColorVis8 { + color: #AA6556; } + .euiToken--euiColorVis8.euiToken--light { + color: #9a5b4e; + background-color: #f7f0ee; + box-shadow: inset 0 0 0 1px #e6d1cc; } + .euiToken--euiColorVis8.euiToken--dark { + background-color: #C47C6C; + color: #000; } + +.euiToken--euiColorVis9 { + color: #E7664C; } + .euiToken--euiColorVis9.euiToken--light { + color: #b34f3b; + background-color: #fdf0ed; + box-shadow: inset 0 0 0 1px #f8d1c9; } + .euiToken--euiColorVis9.euiToken--dark { + background-color: #FF7E62; + color: #000; } + +.euiToken--gray { + color: #69707D; } + .euiToken--gray.euiToken--light { + color: #646a77; + background-color: #f0f1f2; + box-shadow: inset 0 0 0 1px #d2d4d8; } + .euiToken--gray.euiToken--dark { + background-color: #69707D; + color: #FFF; } + +/* + * 1. Shift arrow 1px more than half its size to account for border radius + */ +.euiToolTip { + 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); + border-radius: 6px; + background-color: #404040; + color: #FFF; + z-index: 9000; + max-width: 256px; + overflow-wrap: break-word; + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + padding: 12px; + -webkit-animation: euiToolTipTop 350ms ease-out 0s forwards; + animation: euiToolTipTop 350ms ease-out 0s forwards; + position: absolute; + opacity: 0; + /* 1 */ + /* 1 */ } + .euiToolTip .euiToolTip__arrow { + content: ''; + position: absolute; + -webkit-transform-origin: center; + transform-origin: center; + border-radius: 2px; + background-color: #404040; + width: 12px; + height: 12px; + -webkit-transform: translateY(-7px) rotateZ(45deg); + transform: translateY(-7px) rotateZ(45deg); + /* 1 */ } + .euiToolTip.euiToolTip--right { + -webkit-animation-name: euiToolTipRight; + animation-name: euiToolTipRight; } + .euiToolTip.euiToolTip--right .euiToolTip__arrow { + -webkit-transform: translateX(-5px) rotateZ(45deg); + transform: translateX(-5px) rotateZ(45deg); + /* 1 */ } + .euiToolTip.euiToolTip--bottom { + -webkit-animation-name: euiToolTipBottom; + animation-name: euiToolTipBottom; } + .euiToolTip.euiToolTip--bottom .euiToolTip__arrow { + -webkit-transform: translateY(-5px) rotateZ(45deg); + transform: translateY(-5px) rotateZ(45deg); + /* 1 */ } + .euiToolTip.euiToolTip--left { + -webkit-animation-name: euiToolTipLeft; + animation-name: euiToolTipLeft; } + .euiToolTip.euiToolTip--left .euiToolTip__arrow { + -webkit-transform: translateX(-7px) rotateZ(45deg); + transform: translateX(-7px) rotateZ(45deg); + /* 1 */ } + .euiToolTip .euiToolTip__title { + font-weight: 700; + border-bottom: solid 1px #595959; + padding-bottom: 4px; + margin-bottom: 4px; } + +.euiToolTipAnchor { + display: inline-block; } + .euiToolTipAnchor *[disabled] { + pointer-events: none; } + .euiToolTipAnchor.euiToolTipAnchor--displayBlock { + display: block; } + +@-webkit-keyframes euiToolTipTop { + 0% { + opacity: 0; + -webkit-transform: translateY(-16px); + transform: translateY(-16px); } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); } } + +@keyframes euiToolTipTop { + 0% { + opacity: 0; + -webkit-transform: translateY(-16px); + transform: translateY(-16px); } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); } } + +@-webkit-keyframes euiToolTipBottom { + 0% { + opacity: 0; + -webkit-transform: translateY(16px); + transform: translateY(16px); } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); } } + +@keyframes euiToolTipBottom { + 0% { + opacity: 0; + -webkit-transform: translateY(16px); + transform: translateY(16px); } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); } } + +@-webkit-keyframes euiToolTipLeft { + 0% { + opacity: 0; + -webkit-transform: translateX(-16px); + transform: translateX(-16px); } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); } } + +@keyframes euiToolTipLeft { + 0% { + opacity: 0; + -webkit-transform: translateX(-16px); + transform: translateX(-16px); } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); } } + +@-webkit-keyframes euiToolTipRight { + 0% { + opacity: 0; + -webkit-transform: translateX(16px); + transform: translateX(16px); } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); } } + +@keyframes euiToolTipRight { + 0% { + opacity: 0; + -webkit-transform: translateX(16px); + transform: translateX(16px); } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); } } + +.euiTour--minWidth-default { + min-width: 240px; } + +.euiTourHeader { + border-bottom: none; + margin-bottom: 8px !important; } + .euiTourHeader .euiTourHeader__title { + margin-top: 0; + text-transform: capitalize; } + +.euiTourHeader__subtitle { + color: #69707D; } + +.euiTourFooter { + background-color: #F5F7FA; + margin-top: 24px !important; } + +.euiTour .euiTour__beacon { + pointer-events: none; + position: absolute; + opacity: 0; + transition: opacity 0s 350ms; } + +.euiTour .euiPopover__panelArrow.euiPopover__panelArrow--right .euiTour__beacon { + opacity: 1; + top: 6px; + left: -24px; } + +.euiTour .euiPopover__panelArrow.euiPopover__panelArrow--left .euiTour__beacon { + opacity: 1; + top: 6px; + left: 12px; } + +.euiTour .euiPopover__panelArrow.euiPopover__panelArrow--top:after { + border-top-color: #F5F7FA; } + +.euiTour .euiPopover__panelArrow.euiPopover__panelArrow--top .euiTour__beacon { + opacity: 1; + top: 12px; + left: 6px; } + +.euiTour .euiPopover__panelArrow.euiPopover__panelArrow--bottom .euiTour__beacon { + opacity: 1; + top: -24px; + left: 6px; } + +.euiTourStepIndicator { + display: inline-block; } + +.euiText { + color: #343741; + font-weight: 400; + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + color: inherit; + clear: both; + line-height: 1.5rem; } + .euiText a:not([class]) { + color: #0071c2; } + .euiText a:not([class]):hover, .euiText a:not([class]):focus { + color: #00538f; + text-decoration: underline; } + .euiText a:not([class]):focus { + background-color: rgba(0, 113, 194, 0.1); + outline: 2px solid currentColor; } + .euiText a:not([class]):focus:focus-visible { + outline-style: auto; } + .euiText a:not([class]):focus:not(:focus-visible) { + outline: none; } + .euiText img { + display: block; + width: 100%; } + .euiText ul { + list-style: disc; } + .euiText ol { + list-style: decimal; } + .euiText blockquote { + position: relative; + text-align: center; + margin-left: auto; + margin-right: auto; + font-family: Georgia, Times, Times New Roman, serif; + font-style: italic; + letter-spacing: normal; } + .euiText blockquote p:last-child { + margin-bottom: 0; } + .euiText blockquote:before, .euiText blockquote:after { + position: absolute; + content: ''; + height: 2px; + width: 50%; + right: 0; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); + background: #69707D; } + .euiText blockquote:before { + top: 0; } + .euiText blockquote:after { + bottom: 0; } + .euiText h1 { + color: #1a1c21; + font-size: 34px; + font-size: 2.42857rem; + line-height: 2.85714rem; + font-weight: 700; } + .euiText h2 { + color: #1a1c21; + font-size: 27px; + font-size: 1.92857rem; + line-height: 2.28571rem; + font-weight: 700; } + .euiText h3 { + color: #1a1c21; + font-size: 22px; + font-size: 1.57143rem; + line-height: 2.28571rem; + font-weight: 700; } + .euiText h4, + .euiText dt { + color: #1a1c21; + font-size: 16px; + font-size: 1.14286rem; + line-height: 1.71429rem; + font-weight: 700; } + .euiText h5 { + color: #1a1c21; + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + font-weight: 700; } + .euiText h6 { + color: #1a1c21; + font-size: 12px; + font-size: 0.85714rem; + line-height: 1.14286rem; + font-weight: 700; + text-transform: uppercase; } + .euiText pre { + white-space: pre-wrap; + background: #F5F7FA; + color: #343741; } + .euiText pre, + .euiText pre code { + display: block; } + .euiText code { + font-family: "Roboto Mono", Consolas, Menlo, Courier, monospace; + letter-spacing: normal; + display: inline-block; + font-weight: 400; } + .euiText p, + .euiText ul, + .euiText ol, + .euiText dl, + .euiText blockquote, + .euiText img, + .euiText pre { + margin-bottom: 1.5rem; } + .euiText ul, + .euiText ol { + margin-left: 1.5rem; } + .euiText blockquote { + padding: 1.5rem; + font-size: 1.125rem; } + .euiText h1, + .euiText h2, + .euiText h3, + .euiText h4, + .euiText h5, + .euiText h6 { + margin-bottom: 0.5rem; } + .euiText dd + dt { + margin-top: 1rem; } + .euiText * + h2, + .euiText * + h3, + .euiText * + h4, + .euiText * + h5, + .euiText * + h6 { + margin-top: 2rem; } + .euiText h1 { + font-size: 2.125rem; + line-height: 3rem; } + .euiText h2 { + font-size: 1.6875rem; + line-height: 2.5rem; } + .euiText h3 { + font-size: 1.375rem; + line-height: 2rem; } + .euiText h4, + .euiText dt, + .euiText .eui-definitionListReverse dd { + font-size: 1rem; + line-height: 1.5rem; } + .euiText .eui-definitionListReverse dt { + font-size: 0.75rem; + color: #343741; } + .euiText h5 { + font-size: 0.875rem; + line-height: 1rem; } + .euiText h6 { + font-size: 0.75rem; + line-height: 1rem; } + .euiText small { + font-size: 0.875rem; } + .euiText pre { + padding: 14px; } + .euiText code { + font-size: 0.9rem; } + .euiText.euiText--constrainedWidth { + max-width: 36em; + min-width: 75%; } + .euiText > :last-child, + .euiText .euiTextColor > :last-child { + margin-bottom: 0 !important; } + +.euiText--small { + font-size: 14px; + font-size: 1rem; + line-height: 1.5rem; } + .euiText--small p, + .euiText--small ul, + .euiText--small ol, + .euiText--small dl, + .euiText--small blockquote, + .euiText--small img, + .euiText--small pre { + margin-bottom: 1.5rem; } + .euiText--small ul, + .euiText--small ol { + margin-left: 1.5rem; } + .euiText--small blockquote { + padding: 1.5rem; + font-size: 1.125rem; } + .euiText--small h1, + .euiText--small h2, + .euiText--small h3, + .euiText--small h4, + .euiText--small h5, + .euiText--small h6 { + margin-bottom: 0.5rem; } + .euiText--small dd + dt { + margin-top: 1rem; } + .euiText--small * + h2, + .euiText--small * + h3, + .euiText--small * + h4, + .euiText--small * + h5, + .euiText--small * + h6 { + margin-top: 2rem; } + .euiText--small h1 { + font-size: 2.125rem; + line-height: 3rem; } + .euiText--small h2 { + font-size: 1.6875rem; + line-height: 2.5rem; } + .euiText--small h3 { + font-size: 1.375rem; + line-height: 2rem; } + .euiText--small h4, + .euiText--small dt, + .euiText--small .eui-definitionListReverse dd { + font-size: 1rem; + line-height: 1.5rem; } + .euiText--small .eui-definitionListReverse dt { + font-size: 0.75rem; + color: #343741; } + .euiText--small h5 { + font-size: 0.875rem; + line-height: 1rem; } + .euiText--small h6 { + font-size: 0.75rem; + line-height: 1rem; } + .euiText--small small { + font-size: 0.875rem; } + .euiText--small pre { + padding: 14px; } + .euiText--small code { + font-size: 0.9rem; } + +.euiText--extraSmall { + font-size: 12px; + font-size: 0.85714rem; + line-height: 1.28571rem; } + .euiText--extraSmall p, + .euiText--extraSmall ul, + .euiText--extraSmall ol, + .euiText--extraSmall dl, + .euiText--extraSmall blockquote, + .euiText--extraSmall img, + .euiText--extraSmall pre { + margin-bottom: 1.28571rem; } + .euiText--extraSmall ul, + .euiText--extraSmall ol { + margin-left: 1.28571rem; } + .euiText--extraSmall blockquote { + padding: 1.28571rem; + font-size: 0.96429rem; } + .euiText--extraSmall h1, + .euiText--extraSmall h2, + .euiText--extraSmall h3, + .euiText--extraSmall h4, + .euiText--extraSmall h5, + .euiText--extraSmall h6 { + margin-bottom: 0.42857rem; } + .euiText--extraSmall dd + dt { + margin-top: 0.85714rem; } + .euiText--extraSmall * + h2, + .euiText--extraSmall * + h3, + .euiText--extraSmall * + h4, + .euiText--extraSmall * + h5, + .euiText--extraSmall * + h6 { + margin-top: 1.71429rem; } + .euiText--extraSmall h1 { + font-size: 1.82143rem; + line-height: 2.57143rem; } + .euiText--extraSmall h2 { + font-size: 1.44643rem; + line-height: 2.14286rem; } + .euiText--extraSmall h3 { + font-size: 1.17857rem; + line-height: 1.71429rem; } + .euiText--extraSmall h4, + .euiText--extraSmall dt, + .euiText--extraSmall .eui-definitionListReverse dd { + font-size: 0.85714rem; + line-height: 1.28571rem; } + .euiText--extraSmall .eui-definitionListReverse dt { + font-size: 0.64286rem; + color: #343741; } + .euiText--extraSmall h5 { + font-size: 0.75rem; + line-height: 0.85714rem; } + .euiText--extraSmall h6 { + font-size: 0.64286rem; + line-height: 0.85714rem; } + .euiText--extraSmall small { + font-size: 0.75rem; } + .euiText--extraSmall pre { + padding: 12px; } + .euiText--extraSmall code { + font-size: 0.77143rem; } + +.euiTextColor--default { + color: #343741; } + +.euiTextColor--subdued { + color: #69707D; } + +.euiTextColor--secondary { + color: #00857d; } + +.euiTextColor--accent { + color: #c4407c; } + +.euiTextColor--warning { + color: #91700a; } + +.euiTextColor--danger { + color: #BD271E; } + +.euiTextColor--ghost { + color: #717171; + color: #FFF !important; } + +.euiTextAlign--left { + text-align: left; } + +.euiTextAlign--right { + text-align: right; } + +.euiTextAlign--center { + text-align: center; } + +.euiAvatar--space:after, +.euiAvatar--user:after { + display: none; } + +.euiButton, +.euiButtonIcon { + box-shadow: none !important; } + +.euiButton.euiButton-isDisabled:not(.euiButton--ghost), .euiButton.euiButton-isDisabled:not(.euiButton--ghost):hover, +.euiButtonIcon.euiButtonIcon-isDisabled:not(.euiButtonIcon--ghost), +.euiButtonIcon.euiButtonIcon-isDisabled:not(.euiButtonIcon--ghost):hover { + background-color: rgba(171, 180, 196, 0.1); + color: #a2abba; } + +.euiButtonIcon--empty.euiButtonIcon-isDisabled:not(.euiButtonIcon--ghost), .euiButtonIcon--empty.euiButtonIcon-isDisabled:not(.euiButtonIcon--ghost):hover { + background-color: transparent; + color: #ABB4C4; } + +.euiButton--small, +.euiButtonIcon--small, +.euiButtonIcon--xSmall { + border-radius: 4px; } + +.euiButton--primary { + color: #0061a6; + background-color: rgba(0, 119, 204, 0.2); } + .euiButton--primary:not([class*='isDisabled']):hover, .euiButton--primary:not([class*='isDisabled']):focus { + background-color: rgba(0, 119, 204, 0.2); } + .euiButton--primary.euiButton--fill:focus { + outline-color: #000; } + .euiButton--primary.euiButton--fill:not([class*='isDisabled']) { + color: #FFF; } + .euiButton--primary.euiButton--fill:not([class*='isDisabled']), .euiButton--primary.euiButton--fill:not([class*='isDisabled']):hover, .euiButton--primary.euiButton--fill:not([class*='isDisabled']):focus { + background-color: #07C; } + +.euiButton--secondary { + color: #00726b; + background-color: rgba(0, 191, 179, 0.2); } + .euiButton--secondary:not([class*='isDisabled']):hover, .euiButton--secondary:not([class*='isDisabled']):focus { + background-color: rgba(0, 191, 179, 0.2); } + .euiButton--secondary.euiButton--fill:focus { + outline-color: #000; } + .euiButton--secondary.euiButton--fill:not([class*='isDisabled']) { + color: #000; } + .euiButton--secondary.euiButton--fill:not([class*='isDisabled']), .euiButton--secondary.euiButton--fill:not([class*='isDisabled']):hover, .euiButton--secondary.euiButton--fill:not([class*='isDisabled']):focus { + background-color: #00BFB3; } + +.euiButton--warning { + color: #83650a; + background-color: rgba(254, 197, 20, 0.2); } + .euiButton--warning:not([class*='isDisabled']):hover, .euiButton--warning:not([class*='isDisabled']):focus { + background-color: rgba(254, 197, 20, 0.2); } + .euiButton--warning.euiButton--fill:focus { + outline-color: #000; } + .euiButton--warning.euiButton--fill:not([class*='isDisabled']) { + color: #000; } + .euiButton--warning.euiButton--fill:not([class*='isDisabled']), .euiButton--warning.euiButton--fill:not([class*='isDisabled']):hover, .euiButton--warning.euiButton--fill:not([class*='isDisabled']):focus { + background-color: #FEC514; } + +.euiButton--danger { + color: #b4251d; + background-color: rgba(189, 39, 30, 0.2); } + .euiButton--danger:not([class*='isDisabled']):hover, .euiButton--danger:not([class*='isDisabled']):focus { + background-color: rgba(189, 39, 30, 0.2); } + .euiButton--danger.euiButton--fill:focus { + outline-color: #000; } + .euiButton--danger.euiButton--fill:not([class*='isDisabled']) { + color: #FFF; } + .euiButton--danger.euiButton--fill:not([class*='isDisabled']), .euiButton--danger.euiButton--fill:not([class*='isDisabled']):hover, .euiButton--danger.euiButton--fill:not([class*='isDisabled']):focus { + background-color: #BD271E; } + +.euiButton--ghost { + color: #717171; + background-color: rgba(255, 255, 255, 0.2); + color: #FFF; } + .euiButton--ghost:not([class*='isDisabled']):hover, .euiButton--ghost:not([class*='isDisabled']):focus { + background-color: rgba(255, 255, 255, 0.2); } + .euiButton--ghost.euiButton--fill:not([class*='isDisabled']) { + color: #000; } + .euiButton--ghost.euiButton--fill:not([class*='isDisabled']), .euiButton--ghost.euiButton--fill:not([class*='isDisabled']):hover, .euiButton--ghost.euiButton--fill:not([class*='isDisabled']):focus { + background-color: #FFF; } + +.euiButton--text { + color: #5a606b; + background-color: rgba(105, 112, 125, 0.2); } + .euiButton--text:not([class*='isDisabled']):hover, .euiButton--text:not([class*='isDisabled']):focus { + background-color: rgba(105, 112, 125, 0.2); } + .euiButton--text.euiButton--fill:focus { + outline-color: #000; } + .euiButton--text.euiButton--fill:not([class*='isDisabled']) { + color: #FFF; } + .euiButton--text.euiButton--fill:not([class*='isDisabled']), .euiButton--text.euiButton--fill:not([class*='isDisabled']):hover, .euiButton--text.euiButton--fill:not([class*='isDisabled']):focus { + background-color: #69707D; } + +.euiButton.euiButton-isDisabled.euiButton--ghost, .euiButton.euiButton-isDisabled.euiButton--ghost:focus, +.euiButton.euiButton-isDisabled.euiButton--ghost.euiButton--fill, +.euiButton.euiButton-isDisabled.euiButton--ghost.euiButton--fill:focus { + color: #69707D; + background-color: rgba(105, 112, 125, 0.1); } + +.euiButtonIcon--accent:not(.euiButtonIcon--empty) { + color: #a8376a; + background-color: rgba(196, 64, 124, 0.2); } + .euiButtonIcon--accent:not(.euiButtonIcon--empty):not([class*='isDisabled']):hover, .euiButtonIcon--accent:not(.euiButtonIcon--empty):not([class*='isDisabled']):focus { + background-color: rgba(196, 64, 124, 0.2); } + .euiButtonIcon--accent:not(.euiButtonIcon--empty).euiButtonIcon--fill:focus { + outline-color: #000; } + .euiButtonIcon--accent:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']) { + color: #FFF; } + .euiButtonIcon--accent:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']), .euiButtonIcon--accent:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']):hover, .euiButtonIcon--accent:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']):focus { + background-color: #c4407c; } + +.euiButtonIcon--danger:not(.euiButtonIcon--empty) { + color: #b4251d; + background-color: rgba(189, 39, 30, 0.2); } + .euiButtonIcon--danger:not(.euiButtonIcon--empty):not([class*='isDisabled']):hover, .euiButtonIcon--danger:not(.euiButtonIcon--empty):not([class*='isDisabled']):focus { + background-color: rgba(189, 39, 30, 0.2); } + .euiButtonIcon--danger:not(.euiButtonIcon--empty).euiButtonIcon--fill:focus { + outline-color: #000; } + .euiButtonIcon--danger:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']) { + color: #FFF; } + .euiButtonIcon--danger:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']), .euiButtonIcon--danger:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']):hover, .euiButtonIcon--danger:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']):focus { + background-color: #BD271E; } + +.euiButtonIcon--ghost:not(.euiButtonIcon--empty) { + color: #717171; + background-color: rgba(255, 255, 255, 0.2); + color: #FFF; } + .euiButtonIcon--ghost:not(.euiButtonIcon--empty):not([class*='isDisabled']):hover, .euiButtonIcon--ghost:not(.euiButtonIcon--empty):not([class*='isDisabled']):focus { + background-color: rgba(255, 255, 255, 0.2); } + .euiButtonIcon--ghost:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']) { + color: #000; } + .euiButtonIcon--ghost:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']), .euiButtonIcon--ghost:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']):hover, .euiButtonIcon--ghost:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']):focus { + background-color: #FFF; } + +.euiButtonIcon--primary:not(.euiButtonIcon--empty) { + color: #0061a6; + background-color: rgba(0, 113, 194, 0.2); } + .euiButtonIcon--primary:not(.euiButtonIcon--empty):not([class*='isDisabled']):hover, .euiButtonIcon--primary:not(.euiButtonIcon--empty):not([class*='isDisabled']):focus { + background-color: rgba(0, 113, 194, 0.2); } + .euiButtonIcon--primary:not(.euiButtonIcon--empty).euiButtonIcon--fill:focus { + outline-color: #000; } + .euiButtonIcon--primary:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']) { + color: #FFF; } + .euiButtonIcon--primary:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']), .euiButtonIcon--primary:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']):hover, .euiButtonIcon--primary:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']):focus { + background-color: #0071c2; } + +.euiButtonIcon--subdued:not(.euiButtonIcon--empty) { + color: #5a606b; + background-color: rgba(105, 112, 125, 0.2); } + .euiButtonIcon--subdued:not(.euiButtonIcon--empty):not([class*='isDisabled']):hover, .euiButtonIcon--subdued:not(.euiButtonIcon--empty):not([class*='isDisabled']):focus { + background-color: rgba(105, 112, 125, 0.2); } + .euiButtonIcon--subdued:not(.euiButtonIcon--empty).euiButtonIcon--fill:focus { + outline-color: #000; } + .euiButtonIcon--subdued:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']) { + color: #FFF; } + .euiButtonIcon--subdued:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']), .euiButtonIcon--subdued:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']):hover, .euiButtonIcon--subdued:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']):focus { + background-color: #69707D; } + +.euiButtonIcon--success:not(.euiButtonIcon--empty) { + color: #006c66; + background-color: rgba(0, 126, 119, 0.2); } + .euiButtonIcon--success:not(.euiButtonIcon--empty):not([class*='isDisabled']):hover, .euiButtonIcon--success:not(.euiButtonIcon--empty):not([class*='isDisabled']):focus { + background-color: rgba(0, 126, 119, 0.2); } + .euiButtonIcon--success:not(.euiButtonIcon--empty).euiButtonIcon--fill:focus { + outline-color: #000; } + .euiButtonIcon--success:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']) { + color: #FFF; } + .euiButtonIcon--success:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']), .euiButtonIcon--success:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']):hover, .euiButtonIcon--success:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']):focus { + background-color: #007e77; } + +.euiButtonIcon--text:not(.euiButtonIcon--empty) { + color: #5a606b; + background-color: rgba(105, 112, 125, 0.2); } + .euiButtonIcon--text:not(.euiButtonIcon--empty):not([class*='isDisabled']):hover, .euiButtonIcon--text:not(.euiButtonIcon--empty):not([class*='isDisabled']):focus { + background-color: rgba(105, 112, 125, 0.2); } + .euiButtonIcon--text:not(.euiButtonIcon--empty).euiButtonIcon--fill:focus { + outline-color: #000; } + .euiButtonIcon--text:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']) { + color: #FFF; } + .euiButtonIcon--text:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']), .euiButtonIcon--text:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']):hover, .euiButtonIcon--text:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']):focus { + background-color: #69707D; } + +.euiButtonIcon--warning:not(.euiButtonIcon--empty) { + color: #765b0a; + background-color: rgba(138, 106, 10, 0.2); } + .euiButtonIcon--warning:not(.euiButtonIcon--empty):not([class*='isDisabled']):hover, .euiButtonIcon--warning:not(.euiButtonIcon--empty):not([class*='isDisabled']):focus { + background-color: rgba(138, 106, 10, 0.2); } + .euiButtonIcon--warning:not(.euiButtonIcon--empty).euiButtonIcon--fill:focus { + outline-color: #000; } + .euiButtonIcon--warning:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']) { + color: #FFF; } + .euiButtonIcon--warning:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']), .euiButtonIcon--warning:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']):hover, .euiButtonIcon--warning:not(.euiButtonIcon--empty).euiButtonIcon--fill:not([class*='isDisabled']):focus { + background-color: #8a6a0a; } + +.euiButtonIcon:not(.euiButtonIcon--empty).euiButtonIcon-isDisabled.euiButtonIcon--ghost, .euiButtonIcon:not(.euiButtonIcon--empty).euiButtonIcon-isDisabled.euiButtonIcon--ghost:focus, +.euiButtonIcon.euiButtonIcon-isDisabled.euiButtonIcon--ghost.euiButtonIcon--fill, +.euiButtonIcon.euiButtonIcon-isDisabled.euiButtonIcon--ghost.euiButtonIcon--fill:focus { + color: #69707D; + background-color: rgba(105, 112, 125, 0.1); } + +.euiButtonEmpty { + border-radius: 6px; } + .euiButtonEmpty.euiButtonEmpty--small, .euiButtonEmpty.euiButtonEmpty--xSmall { + border-radius: 4.002px; } + .euiButtonEmpty.euiButtonEmpty--xSmall { + font-size: 12px; } + +.euiButtonEmpty--primary:enabled:focus { + background-color: rgba(0, 119, 204, 0.1); } + +.euiButtonEmpty--secondary:enabled:focus { + background-color: rgba(0, 191, 179, 0.1); } + +.euiButtonEmpty--warning:enabled:focus { + background-color: rgba(254, 197, 20, 0.1); } + +.euiButtonEmpty--danger:enabled:focus { + background-color: rgba(189, 39, 30, 0.1); } + +.euiButtonEmpty--ghost:enabled:focus { + background-color: rgba(255, 255, 255, 0.1); } + +.euiButtonEmpty--text:enabled:focus { + background-color: rgba(105, 112, 125, 0.1); } + +.euiButtonGroup__buttons { + box-shadow: none !important; } + +.euiButtonGroup--medium .euiButtonGroupButton, +.euiButtonGroup--small .euiButtonGroupButton { + border: none !important; } + .euiButtonGroup--medium .euiButtonGroupButton:focus, + .euiButtonGroup--small .euiButtonGroupButton:focus { + outline: 2px solid currentColor; + outline-offset: -2px; } + .euiButtonGroup--medium .euiButtonGroupButton:focus:focus-visible, + .euiButtonGroup--small .euiButtonGroupButton:focus:focus-visible { + outline-style: auto; } + .euiButtonGroup--medium .euiButtonGroupButton:focus:not(:focus-visible), + .euiButtonGroup--small .euiButtonGroupButton:focus:not(:focus-visible) { + outline: none; } + .euiButtonGroup--medium .euiButtonGroupButton.euiButtonGroupButton-isSelected:focus, + .euiButtonGroup--small .euiButtonGroupButton.euiButtonGroupButton-isSelected:focus { + outline: 2px solid currentColor; + outline-offset: -3px; } + .euiButtonGroup--medium .euiButtonGroupButton.euiButtonGroupButton-isSelected:focus:focus-visible, + .euiButtonGroup--small .euiButtonGroupButton.euiButtonGroupButton-isSelected:focus:focus-visible { + outline-style: auto; } + .euiButtonGroup--medium .euiButtonGroupButton.euiButtonGroupButton-isSelected:focus:not(:focus-visible), + .euiButtonGroup--small .euiButtonGroupButton.euiButtonGroupButton-isSelected:focus:not(:focus-visible) { + outline: none; } + +.euiButtonGroup--medium .euiButtonGroupButton-isDisabled:not(.euiButtonGroupButton--ghost):not(.euiButtonGroupButton-isSelected), +.euiButtonGroup--small .euiButtonGroupButton-isDisabled:not(.euiButtonGroupButton--ghost):not(.euiButtonGroupButton-isSelected) { + background-color: rgba(171, 180, 196, 0.3); + color: #9aa2b1; } + +.euiButtonGroup--medium .euiButtonGroupButton--primary, +.euiButtonGroup--small .euiButtonGroupButton--primary { + color: #0061a6; + background-color: rgba(0, 119, 204, 0.2); } + .euiButtonGroup--medium .euiButtonGroupButton--primary:not([class*='isDisabled']):hover, .euiButtonGroup--medium .euiButtonGroupButton--primary:not([class*='isDisabled']):focus, + .euiButtonGroup--small .euiButtonGroupButton--primary:not([class*='isDisabled']):hover, + .euiButtonGroup--small .euiButtonGroupButton--primary:not([class*='isDisabled']):focus { + background-color: rgba(0, 119, 204, 0.2); } + +.euiButtonGroup--medium .euiButtonGroupButton--secondary, +.euiButtonGroup--small .euiButtonGroupButton--secondary { + color: #00726b; + background-color: rgba(0, 191, 179, 0.2); } + .euiButtonGroup--medium .euiButtonGroupButton--secondary:not([class*='isDisabled']):hover, .euiButtonGroup--medium .euiButtonGroupButton--secondary:not([class*='isDisabled']):focus, + .euiButtonGroup--small .euiButtonGroupButton--secondary:not([class*='isDisabled']):hover, + .euiButtonGroup--small .euiButtonGroupButton--secondary:not([class*='isDisabled']):focus { + background-color: rgba(0, 191, 179, 0.2); } + +.euiButtonGroup--medium .euiButtonGroupButton--warning, +.euiButtonGroup--small .euiButtonGroupButton--warning { + color: #83650a; + background-color: rgba(254, 197, 20, 0.2); } + .euiButtonGroup--medium .euiButtonGroupButton--warning:not([class*='isDisabled']):hover, .euiButtonGroup--medium .euiButtonGroupButton--warning:not([class*='isDisabled']):focus, + .euiButtonGroup--small .euiButtonGroupButton--warning:not([class*='isDisabled']):hover, + .euiButtonGroup--small .euiButtonGroupButton--warning:not([class*='isDisabled']):focus { + background-color: rgba(254, 197, 20, 0.2); } + +.euiButtonGroup--medium .euiButtonGroupButton--danger, +.euiButtonGroup--small .euiButtonGroupButton--danger { + color: #b4251d; + background-color: rgba(189, 39, 30, 0.2); } + .euiButtonGroup--medium .euiButtonGroupButton--danger:not([class*='isDisabled']):hover, .euiButtonGroup--medium .euiButtonGroupButton--danger:not([class*='isDisabled']):focus, + .euiButtonGroup--small .euiButtonGroupButton--danger:not([class*='isDisabled']):hover, + .euiButtonGroup--small .euiButtonGroupButton--danger:not([class*='isDisabled']):focus { + background-color: rgba(189, 39, 30, 0.2); } + +.euiButtonGroup--medium .euiButtonGroupButton--ghost, +.euiButtonGroup--small .euiButtonGroupButton--ghost { + color: #717171; + background-color: rgba(255, 255, 255, 0.2); + color: #FFF; } + .euiButtonGroup--medium .euiButtonGroupButton--ghost:not([class*='isDisabled']):hover, .euiButtonGroup--medium .euiButtonGroupButton--ghost:not([class*='isDisabled']):focus, + .euiButtonGroup--small .euiButtonGroupButton--ghost:not([class*='isDisabled']):hover, + .euiButtonGroup--small .euiButtonGroupButton--ghost:not([class*='isDisabled']):focus { + background-color: rgba(255, 255, 255, 0.2); } + +.euiButtonGroup--medium .euiButtonGroupButton--text, +.euiButtonGroup--small .euiButtonGroupButton--text { + color: #5a606b; + background-color: rgba(105, 112, 125, 0.2); } + .euiButtonGroup--medium .euiButtonGroupButton--text:not([class*='isDisabled']):hover, .euiButtonGroup--medium .euiButtonGroupButton--text:not([class*='isDisabled']):focus, + .euiButtonGroup--small .euiButtonGroupButton--text:not([class*='isDisabled']):hover, + .euiButtonGroup--small .euiButtonGroupButton--text:not([class*='isDisabled']):focus { + background-color: rgba(105, 112, 125, 0.2); } + +.euiButtonGroup--medium .euiButtonGroupButton-isDisabled.euiButtonGroupButton--ghost:not(.euiButtonGroupButton-isSelected), .euiButtonGroup--medium .euiButtonGroupButton-isDisabled.euiButtonGroupButton--ghost:not(.euiButtonGroupButton-isSelected):hover, .euiButtonGroup--medium .euiButtonGroupButton-isDisabled.euiButtonGroupButton--ghost:not(.euiButtonGroupButton-isSelected):focus, +.euiButtonGroup--small .euiButtonGroupButton-isDisabled.euiButtonGroupButton--ghost:not(.euiButtonGroupButton-isSelected), +.euiButtonGroup--small .euiButtonGroupButton-isDisabled.euiButtonGroupButton--ghost:not(.euiButtonGroupButton-isSelected):hover, +.euiButtonGroup--small .euiButtonGroupButton-isDisabled.euiButtonGroupButton--ghost:not(.euiButtonGroupButton-isSelected):focus { + background-color: rgba(105, 112, 125, 0.3); } + +.euiButtonGroup--small .euiButtonGroup__buttons { + border-radius: 4px; } + +.euiButtonGroup--compressed .euiButtonGroupButton { + border-radius: 5px; } + .euiButtonGroup--compressed .euiButtonGroupButton:not([class*='isDisabled']):focus-within { + outline: none; } + .euiButtonGroup--compressed .euiButtonGroupButton:not([class*='isDisabled']):focus { + outline: 2px solid currentColor; } + .euiButtonGroup--compressed .euiButtonGroupButton:not([class*='isDisabled']):focus:focus-visible { + outline-style: auto; } + .euiButtonGroup--compressed .euiButtonGroupButton:not([class*='isDisabled']):focus:not(:focus-visible) { + outline: none; } + .euiButtonGroup--compressed .euiButtonGroupButton--primary:not([class*='isDisabled']):hover, .euiButtonGroup--compressed .euiButtonGroupButton--primary:not([class*='isDisabled']):focus, .euiButtonGroup--compressed .euiButtonGroupButton--primary:not([class*='isDisabled']):focus-within { + background-color: rgba(0, 119, 204, 0.1); } + .euiButtonGroup--compressed .euiButtonGroupButton--primary:not([class*='isDisabled']):focus { + outline-color: #07C; } + .euiButtonGroup--compressed .euiButtonGroupButton--secondary:not([class*='isDisabled']):hover, .euiButtonGroup--compressed .euiButtonGroupButton--secondary:not([class*='isDisabled']):focus, .euiButtonGroup--compressed .euiButtonGroupButton--secondary:not([class*='isDisabled']):focus-within { + background-color: rgba(0, 191, 179, 0.1); } + .euiButtonGroup--compressed .euiButtonGroupButton--secondary:not([class*='isDisabled']):focus { + outline-color: #00BFB3; } + .euiButtonGroup--compressed .euiButtonGroupButton--warning:not([class*='isDisabled']):hover, .euiButtonGroup--compressed .euiButtonGroupButton--warning:not([class*='isDisabled']):focus, .euiButtonGroup--compressed .euiButtonGroupButton--warning:not([class*='isDisabled']):focus-within { + background-color: rgba(254, 197, 20, 0.1); } + .euiButtonGroup--compressed .euiButtonGroupButton--warning:not([class*='isDisabled']):focus { + outline-color: #FEC514; } + .euiButtonGroup--compressed .euiButtonGroupButton--danger:not([class*='isDisabled']):hover, .euiButtonGroup--compressed .euiButtonGroupButton--danger:not([class*='isDisabled']):focus, .euiButtonGroup--compressed .euiButtonGroupButton--danger:not([class*='isDisabled']):focus-within { + background-color: rgba(189, 39, 30, 0.1); } + .euiButtonGroup--compressed .euiButtonGroupButton--danger:not([class*='isDisabled']):focus { + outline-color: #BD271E; } + .euiButtonGroup--compressed .euiButtonGroupButton--ghost:not([class*='isDisabled']):hover, .euiButtonGroup--compressed .euiButtonGroupButton--ghost:not([class*='isDisabled']):focus, .euiButtonGroup--compressed .euiButtonGroupButton--ghost:not([class*='isDisabled']):focus-within { + background-color: rgba(255, 255, 255, 0.1); } + .euiButtonGroup--compressed .euiButtonGroupButton--ghost:not([class*='isDisabled']):focus { + outline-color: #FFF; } + .euiButtonGroup--compressed .euiButtonGroupButton--text:not([class*='isDisabled']):hover, .euiButtonGroup--compressed .euiButtonGroupButton--text:not([class*='isDisabled']):focus, .euiButtonGroup--compressed .euiButtonGroupButton--text:not([class*='isDisabled']):focus-within { + background-color: rgba(105, 112, 125, 0.1); } + .euiButtonGroup--compressed .euiButtonGroupButton--text:not([class*='isDisabled']):focus { + outline-color: #69707D; } + +.euiCallOut { + border-left: none; } + .euiCallOut .euiCallOutHeader__title { + font-weight: 500; } + +.euiCodeBlock.euiCodeBlock--inline { + border-radius: 4px; + color: #7c609e; } + .euiCodeBlock.euiCodeBlock--inline .euiCodeBlock__code { + font-weight: 700; } + +.euiCommentEvent--regular { + box-shadow: none; } + +.euiDatePicker.euiDatePicker--shadow .react-datepicker-popper, +.euiDatePicker.euiDatePicker--shadow .react-datepicker-popper[data-placement^='top'] { + border: none; + border-radius: 6px; } + +.euiDatePickerRange { + border-radius: 6px; } + +.euiDatePicker.euiDatePicker--shadow.euiDatePicker--inline .react-datepicker { + border: none; } + +.euiFilterGroup { + border: none; + border-radius: 6px; + background-color: #fbfcfd; + box-shadow: inset 0 0 0 1px rgba(17, 43, 134, 0.1); } + +.euiFilterButton { + border-radius: 0; + border: none; + background-color: transparent; + box-shadow: 0 1px 0 0 rgba(17, 43, 134, 0.1), -1px 0 0 0 rgba(17, 43, 134, 0.1); } + .euiFilterButton--withNext + .euiFilterButton { + box-shadow: 0 1px 0 0 rgba(17, 43, 134, 0.1); } + +.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 [class*='euiField'] { + border-radius: 6px 0 0 6px; } + .euiFormControlLayout--group .euiFormControlLayout__childrenWrapper:last-child .euiSelect, + .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__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 currentColor; } + +.euiRadio .euiRadio__input:focus:focus-visible + .euiRadio__circle { + outline-style: auto; + outline-offset: 3px; } + +.euiRadio .euiRadio__input:focus:not(:focus-visible) + .euiRadio__circle { + outline: none; } + +.euiCheckbox .euiCheckbox__input:focus + .euiCheckbox__square { + outline: 2px solid currentColor; } + +.euiCheckbox .euiCheckbox__input:focus:focus-visible + .euiCheckbox__square { + outline-style: auto; + outline-offset: 3px; } + +.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; } + +.euiHeader { + height: 48px; + padding-left: 8px; + padding-right: 8px; } + +.euiHeaderSectionItem:after { + display: none !important; } + +.euiHeaderLogo { + padding-left: 8px; + padding-right: 8px; + min-width: 40px; } + @media only screen and (max-width: 574px) { + .euiHeaderLogo { + padding-left: 4px; } } + +.euiHeaderLogo__text { + color: #1a1c21; + font-size: 14px; + font-size: 1rem; + line-height: 1.71429rem; + font-weight: 700; } + +.euiHeader--default + .euiHeader--default { + border-top: 1px solid #D3DAE6; } + +.euiHeaderBreadcrumbs { + font-size: 12px; + line-height: 16px; + margin-left: 8px; + margin-right: 8px; } + .euiHeaderBreadcrumbs .euiBreadcrumbSeparator { + display: none !important; } + .euiHeaderBreadcrumbs .euiBreadcrumb { + color: #343741; + background-color: rgba(52, 55, 65, 0.2); + line-height: 16px; + font-weight: 500; + padding: 4px 16px; + -webkit-clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%, 8px 50%); + clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%, 8px 50%); } + .euiHeaderBreadcrumbs .euiBreadcrumb:not([class*='isDisabled']):hover, .euiHeaderBreadcrumbs .euiBreadcrumb:not([class*='isDisabled']):focus { + background-color: rgba(52, 55, 65, 0.2); } + .euiHeaderBreadcrumbs .euiBreadcrumb:focus { + outline: 2px solid currentColor; + outline-offset: -2px; } + .euiHeaderBreadcrumbs .euiBreadcrumb:focus:focus-visible { + outline-style: auto; } + .euiHeaderBreadcrumbs .euiBreadcrumb:focus:not(:focus-visible) { + outline: none; } + .euiHeaderBreadcrumbs .euiBreadcrumb.euiBreadcrumb--collapsed, .euiHeaderBreadcrumbs .euiBreadcrumb.euiLink { + color: #0061a6; + background-color: rgba(0, 119, 204, 0.2); } + .euiHeaderBreadcrumbs .euiBreadcrumb.euiBreadcrumb--collapsed:not([class*='isDisabled']):hover, .euiHeaderBreadcrumbs .euiBreadcrumb.euiBreadcrumb--collapsed:not([class*='isDisabled']):focus, .euiHeaderBreadcrumbs .euiBreadcrumb.euiLink:not([class*='isDisabled']):hover, .euiHeaderBreadcrumbs .euiBreadcrumb.euiLink:not([class*='isDisabled']):focus { + background-color: rgba(0, 119, 204, 0.2); } + .euiHeaderBreadcrumbs .euiBreadcrumb.euiBreadcrumb--collapsed:hover, .euiHeaderBreadcrumbs .euiBreadcrumb.euiBreadcrumb--collapsed:focus, .euiHeaderBreadcrumbs .euiBreadcrumb.euiLink:hover, .euiHeaderBreadcrumbs .euiBreadcrumb.euiLink:focus { + color: #07C; } + .euiHeaderBreadcrumbs .euiBreadcrumb.euiBreadcrumb--collapsed .euiLink, .euiHeaderBreadcrumbs .euiBreadcrumb.euiBreadcrumb--collapsed .euiLink:hover, .euiHeaderBreadcrumbs .euiBreadcrumb.euiBreadcrumb--collapsed .euiLink:focus { + color: #07C; } + .euiHeaderBreadcrumbs .euiBreadcrumb:not(.euiBreadcrumb--last) { + margin-right: -4px; } + .euiHeaderBreadcrumbs .euiBreadcrumb:first-child { + padding-left: 12px; + border-radius: 6px 0 0 6px; + -webkit-clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%); + clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%); } + .euiHeaderBreadcrumbs .euiBreadcrumb--last { + border-radius: 0 6px 6px 0; + padding-right: 12px; + -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 8px 50%); + clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 8px 50%); } + .euiHeaderBreadcrumbs .euiBreadcrumb:only-child { + -webkit-clip-path: none; + clip-path: none; + padding-left: 12px; + padding-right: 12px; + border-radius: 6px; } + +.euiListGroupItem--medium { + font-size: 16px; } + +.euiImage-isFullScreen .euiImage__caption { + color: #FFF; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } + +.euiImage-isFullScreenCloseIcon { + fill: #FFF; } + +.euiMark { + background: rgba(0, 119, 204, 0.1); } + +.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; } + +.euiModal { + border: none; } + +.euiOverlayMask { + background: rgba(0, 0, 0, 0.5); } + +.euiPopover__panel.euiPopover__panel-isAttached { + 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); } + .euiPopover__panel.euiPopover__panel-isAttached.euiPanel--borderRadiusNone { + border-radius: 0; } + .euiPopover__panel.euiPopover__panel-isAttached.euiPanel--borderRadiusMedium { + border-radius: 4px; } + +.euiPopover__panel .euiPopover__panelArrow:before { + -webkit-filter: blur(3px); + filter: blur(3px); + opacity: .2; } + +.euiPopover__panel .euiPopover__panelArrow.euiPopover__panelArrow--top:before { + bottom: -12px; + border-top-color: #000; + -webkit-clip-path: polygon(-4px 0, 28px 0, 28px 16px, -4px 16px); + clip-path: polygon(-4px 0, 28px 0, 28px 16px, -4px 16px); } + +.euiPopover__panel .euiPopover__panelArrow.euiPopover__panelArrow--top:after { + bottom: -11px; } + +.euiPopover__panel .euiPopover__panelArrow.euiPopover__panelArrow--right:before { + border-right-color: #000; + -webkit-clip-path: polygon(-4px -4px, 12px -4px, 12px 28px, -4px 28px); + clip-path: polygon(-4px -4px, 12px -4px, 12px 28px, -4px 28px); } + +.euiPopover__panel .euiPopover__panelArrow.euiPopover__panelArrow--right:after { + left: -11px; } + +.euiPopover__panel .euiPopover__panelArrow.euiPopover__panelArrow--bottom:before { + border-bottom-color: #000; + -webkit-clip-path: polygon(-4px -4px, 28px -4px, 28px 12px, -4px 12px); + clip-path: polygon(-4px -4px, 28px -4px, 28px 12px, -4px 12px); } + +.euiPopover__panel .euiPopover__panelArrow.euiPopover__panelArrow--bottom:after { + top: -11px; } + +.euiPopover__panel .euiPopover__panelArrow.euiPopover__panelArrow--left:before { + right: -12px; + border-left-color: #000; + -webkit-clip-path: polygon(0 -4px, 16px -4px, 16px 28px, 0 28px); + clip-path: polygon(0 -4px, 16px -4px, 16px 28px, 0 28px); } + +.euiPopover__panel .euiPopover__panelArrow.euiPopover__panelArrow--left:after { + right: -11px; } + +.euiPopover__panel:not([class*='euiPanel--padding']) .euiPopoverTitle:not([class*='euiPopoverTitle--padding']) { + padding: 0; } + +.euiPopover__panel.euiPanel--paddingSmall .euiPopoverTitle:not([class*='euiPopoverTitle--padding']) { + padding: 8px; } + +.euiPopover__panel.euiPanel--paddingMedium .euiPopoverTitle:not([class*='euiPopoverTitle--padding']) { + padding: 16px; } + +.euiPopover__panel.euiPanel--paddingLarge .euiPopoverTitle:not([class*='euiPopoverTitle--padding']) { + padding: 24px; } + +/** + * Footer specific overrides + */ +.euiPopover__panel:not([class*='euiPanel--padding']) .euiPopoverFooter:not([class*='euiPopoverFooter--padding']) { + padding: 0; } + +.euiPopover__panel.euiPanel--paddingSmall .euiPopoverFooter:not([class*='euiPopoverFooter--padding']) { + padding: 8px; } + +.euiPopover__panel.euiPanel--paddingMedium .euiPopoverFooter:not([class*='euiPopoverFooter--padding']) { + padding: 16px; } + +.euiPopover__panel.euiPanel--paddingLarge .euiPopoverFooter:not([class*='euiPopoverFooter--padding']) { + padding: 24px; } + +.euiProgress--native { + border-radius: 8px; } + +.euiRangeTooltip__value { + border-radius: 4px; } + +.euiStepHorizontal-isDisabled .euiStepHorizontal__title, +.euiStep-isDisabled .euiStep__title { + color: #ABB4C4; } + +.euiStepNumber { + outline-color: #07C; } + .euiStepNumber .euiStepNumber__icon { + position: relative; + top: -1px; } + .euiStepNumber--small .euiStepNumber__icon { + top: -1px; } + .euiStepNumber--complete .euiStepNumber__icon, .euiStepNumber--danger .euiStepNumber__icon { + stroke: currentColor; + stroke-width: .5px; } + .euiStepNumber--default { + background-color: #07C; + color: #FFF; + outline-color: #000 !important; } + .euiStepNumber--complete { + background-color: #00BFB3; + color: #000; + outline-color: #000 !important; } + .euiStepNumber--warning { + background-color: #FEC514; + color: #000; + outline-color: #000 !important; } + .euiStepNumber--danger { + background-color: #BD271E; + color: #FFF; + outline-color: #000 !important; } + .euiStepNumber.euiStepNumber--incomplete { + background-color: transparent; + color: #343741; + border: 2px solid #D3DAE6; } + .euiStepNumber.euiStepNumber--incomplete .euiStepNumber__number { + display: unset; + position: relative; + top: -2px; } + +.euiStepNumber--disabled { + background-color: rgba(171, 180, 196, 0.1); + color: #a2abba; } + +.euiStepHorizontal__title { + font-weight: 700; } + +.euiStepHorizontal::before, .euiStepHorizontal::after { + height: 2px; + background-color: #07C; + background-color: #D3DAE6; } + +.euiStep:not(:last-of-type) { + background-position: left 32px; } + +.euiStep--small:not(:last-of-type) { + background-position: -4px 24px; } + +.euiStep__content { + padding-bottom: 40px; + margin-bottom: 0; } + +.euiStepsHorizontal { + background: none; } + +.euiStepHorizontal:focus:not(.euiStepHorizontal-isDisabled) .euiStepHorizontal__number:not(:focus-visible) { + outline: 2px solid #07C; } + +.euiTab { + font-weight: 500; + height: 48px; } + +.euiTabs--small .euiTab { + height: 40px; } + +.euiTabs--large .euiTab { + font-size: 16px; + font-size: 1.14286rem; + height: 48px; } + +.euiText--medium { + font-size: 16px; + font-size: 1.14286rem; + line-height: 1.71429rem; } + .euiText--medium p, + .euiText--medium ul, + .euiText--medium ol, + .euiText--medium dl, + .euiText--medium blockquote, + .euiText--medium img, + .euiText--medium pre { + margin-bottom: 1.71429rem; } + .euiText--medium ul, + .euiText--medium ol { + margin-left: 1.71429rem; } + .euiText--medium blockquote { + padding: 1.71429rem; + font-size: 1.28571rem; } + .euiText--medium h1, + .euiText--medium h2, + .euiText--medium h3, + .euiText--medium h4, + .euiText--medium h5, + .euiText--medium h6 { + margin-bottom: 0.57143rem; } + .euiText--medium dd + dt { + margin-top: 1.14286rem; } + .euiText--medium * + h2, + .euiText--medium * + h3, + .euiText--medium * + h4, + .euiText--medium * + h5, + .euiText--medium * + h6 { + margin-top: 2.28571rem; } + .euiText--medium h1 { + font-size: 2.42857rem; + line-height: 3.42857rem; } + .euiText--medium h2 { + font-size: 1.92857rem; + line-height: 2.85714rem; } + .euiText--medium h3 { + font-size: 1.57143rem; + line-height: 2.28571rem; } + .euiText--medium h4, + .euiText--medium dt, + .euiText--medium .eui-definitionListReverse dd { + font-size: 1.14286rem; + line-height: 1.71429rem; } + .euiText--medium .eui-definitionListReverse dt { + font-size: 0.85714rem; + color: #343741; } + .euiText--medium h5 { + font-size: 1rem; + line-height: 1.14286rem; } + .euiText--medium h6 { + font-size: 0.85714rem; + line-height: 1.14286rem; } + .euiText--medium small { + font-size: 1rem; } + .euiText--medium pre { + padding: 16px; } + .euiText--medium code { + font-size: 1.02857rem; } + +.euiToast { + border: none; + border-radius: 6px; } + +.euiToast--primary { + border-top: 2px solid #07C; } + +.euiToast--success { + border-top: 2px solid #00BFB3; } + +.euiToast--warning { + border-top: 2px solid #FEC514; } + +.euiToast--danger { + border-top: 2px solid #BD271E; } + +.euiToastHeader__title { + font-weight: 700; } + +.euiToolTip { + padding: 8px; } diff --git a/src/main.rs b/src/main.rs index 788a813..2bf9010 100644 --- a/src/main.rs +++ b/src/main.rs @@ -38,20 +38,21 @@ fn open_window_subprocess(mut w: MutexGuard>, ui_mode: &str) { } } -const CSS_PLACEHOLDER: &'static str = "/* XXXthis_is_replaced_by_css_in_the_rust_codeXXX */"; +const CSS_PLACEHOLDER: &'static str = ".XXXthis_is_replaced_by_css_in_the_rust_codeXXX{border:0}"; #[cfg(target_os = "macos")] #[inline(always)] fn get_web_ui_blob() -> String { let resources_path = std::env::current_exe().unwrap().parent().unwrap().parent().unwrap().join("Resources"); - let ui = std::fs::read_to_string(resources_path.join("ui.html")).map_or_else(|_| { + std::fs::read_to_string(resources_path.join("ui.html")).map_or_else(|_| { "Error: unable to load ui.html from application bundle Resources.".into() }, |ui| { - ui.replace(CSS_PLACEHOLDER, std::fs::read_to_string(resources_path.join("dark.css")).unwrap_or(String::new()).into()) - }); + ui.replace(CSS_PLACEHOLDER, std::fs::read_to_string(resources_path.join("dark.css")).unwrap_or(String::new()).as_str()) + }) } #[cfg(all(unix, not(target_os = "macos")))] +#[inline(always)] fn get_web_ui_blob() -> String { include_str!("../ui/dist/index.html").replace(CSS_PLACEHOLDER, include_str!("../ui/node_modules/@elastic/eui/dist/eui_theme_amsterdam_dark.css")) } diff --git a/src/serviceclient.rs b/src/serviceclient.rs index 71b451e..8c085a3 100644 --- a/src/serviceclient.rs +++ b/src/serviceclient.rs @@ -63,19 +63,19 @@ impl ServiceClient { pub fn refresh(&self) { // Yuck, but okay for now... let timeout = Duration::from_secs(SERVICE_TIMEOUT_SECONDS); - let res = ureq::get(format!("{}status", self.base_url).into()).timeout(timeout).set("X-ZT1-Auth", self.auth_token.into()).call(); + let res = ureq::get(format!("{}status", self.base_url).as_str()).timeout(timeout).set("X-ZT1-Auth", self.auth_token.as_str()).call(); if res.is_ok() { let res = res.unwrap(); if res.status() == 200 { let status = res.into_string(); if status.is_ok() { - let res = ureq::get(format!("{}network", self.base_url).into()).timeout(timeout).set("X-ZT1-Auth", self.auth_token.into()).call(); + let res = ureq::get(format!("{}network", self.base_url).as_str()).timeout(timeout).set("X-ZT1-Auth", self.auth_token.as_str()).call(); if res.is_ok() { let res = res.unwrap(); if res.status() == 200 { let networks = res.into_string(); if networks.is_ok() { - let res = ureq::get(format!("{}peer", self.base_url).into()).timeout(timeout).set("X-ZT1-Auth", self.auth_token.into()).call(); + let res = ureq::get(format!("{}peer", self.base_url).as_str()).timeout(timeout).set("X-ZT1-Auth", self.auth_token.as_str()).call(); if res.is_ok() { let res = res.unwrap(); if res.status() == 200 { diff --git a/ui/src/index.html b/ui/src/index.html index f14193c..3ed2e30 100644 --- a/ui/src/index.html +++ b/ui/src/index.html @@ -6,7 +6,7 @@ ZeroTier