1@charset "UTF-8"; 2/** 3 * 1. Focus rings shouldn't be visible on scrollable regions, but a11y requires them to be focusable. 4 * Browser's supporting `:focus-visible` will still show outline on keyboard focus only. 5 * Others like Safari, won't show anything at all. 6 * 2. Force the `:focus-visible` when the `tabindex=0` (is tabbable) 7 */ 8@-webkit-keyframes euiAnimFadeIn { 9 0% { 10 opacity: 0; } 11 100% { 12 opacity: 1; } } 13@keyframes euiAnimFadeIn { 14 0% { 15 opacity: 0; } 16 100% { 17 opacity: 1; } } 18 19@-webkit-keyframes euiGrow { 20 0% { 21 opacity: 0; } 22 1% { 23 opacity: 0; 24 -webkit-transform: scale(0); 25 transform: scale(0); } 26 100% { 27 opacity: 1; 28 -webkit-transform: scale(1); 29 transform: scale(1); } } 30 31@keyframes euiGrow { 32 0% { 33 opacity: 0; } 34 1% { 35 opacity: 0; 36 -webkit-transform: scale(0); 37 transform: scale(0); } 38 100% { 39 opacity: 1; 40 -webkit-transform: scale(1); 41 transform: scale(1); } } 42 43@-webkit-keyframes focusRingAnimate { 44 0% { 45 box-shadow: 0 0 0 6px rgba(27, 169, 245, 0); } 46 100% { 47 box-shadow: 0 0 0 3px rgba(27, 169, 245, 0.3); } } 48 49@keyframes focusRingAnimate { 50 0% { 51 box-shadow: 0 0 0 6px rgba(27, 169, 245, 0); } 52 100% { 53 box-shadow: 0 0 0 3px rgba(27, 169, 245, 0.3); } } 54 55@-webkit-keyframes focusRingAnimateLarge { 56 0% { 57 box-shadow: 0 0 0 10px rgba(27, 169, 245, 0); } 58 100% { 59 box-shadow: 0 0 0 4px rgba(27, 169, 245, 0.3); } } 60 61@keyframes focusRingAnimateLarge { 62 0% { 63 box-shadow: 0 0 0 10px rgba(27, 169, 245, 0); } 64 100% { 65 box-shadow: 0 0 0 4px rgba(27, 169, 245, 0.3); } } 66 67@-webkit-keyframes euiButtonActive { 68 50% { 69 -webkit-transform: translateY(1px); 70 transform: translateY(1px); } } 71 72@keyframes euiButtonActive { 73 50% { 74 -webkit-transform: translateY(1px); 75 transform: translateY(1px); } } 76 77.eui-alignBaseline { 78 vertical-align: baseline !important; } 79 80.eui-alignBottom { 81 vertical-align: bottom !important; } 82 83.eui-alignMiddle { 84 vertical-align: middle !important; } 85 86.eui-alignTop { 87 vertical-align: top !important; } 88 89.eui-displayBlock { 90 display: block !important; } 91 92.eui-displayInline { 93 display: inline !important; } 94 95.eui-displayInlineBlock { 96 display: inline-block !important; } 97 98.eui-fullWidth { 99 display: block !important; 100 width: 100% !important; } 101 102.eui-textCenter { 103 text-align: center !important; } 104 105.eui-textLeft { 106 text-align: left !important; } 107 108.eui-textRight { 109 text-align: right !important; } 110 111.eui-textNoWrap { 112 white-space: nowrap !important; } 113 114.eui-textInheritColor { 115 color: inherit !important; } 116 117.eui-textBreakWord { 118 overflow-wrap: break-word !important; 119 word-wrap: break-word !important; 120 word-break: break-word; } 121 122.eui-textBreakAll { 123 overflow-wrap: break-word !important; 124 word-break: break-all !important; } 125 126.eui-textBreakNormal { 127 overflow-wrap: normal !important; 128 word-wrap: normal !important; 129 word-break: normal !important; } 130 131.eui-textOverflowWrap { 132 overflow-wrap: break-word !important; } 133 @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { 134 .eui-textOverflowWrap { 135 word-break: break-all !important; } } 136 137.eui-textTruncate { 138 max-width: 100%; 139 overflow: hidden !important; 140 text-overflow: ellipsis !important; 141 white-space: nowrap !important; 142 word-wrap: normal !important; } 143 144.eui-textNumber { 145 font-feature-settings: "calt" 1, "kern" 1, "liga" 1, "tnum" 1; } 146 147/** 148 * Responsive 149 * 150 * 1. Be sure to hide the element initially 151 */ 152[class*='eui-showFor'] { 153 display: none !important; 154 /* 1 */ } 155 156@media only screen and (max-width: 574px) { 157 .eui-hideFor--xs { 158 display: none !important; } } 159 160@media only screen and (max-width: 574px) { 161 .eui-showFor--xs { 162 display: inline !important; } } 163 164@media only screen and (max-width: 574px) { 165 .eui-showFor--xs--block { 166 display: block !important; } } 167 168@media only screen and (max-width: 574px) { 169 .eui-showFor--xs--inlineBlock { 170 display: inline-block !important; } } 171 172@media only screen and (max-width: 574px) { 173 .eui-showFor--xs--flex { 174 display: -webkit-flex !important; 175 display: flex !important; } } 176 177@media only screen and (min-width: 575px) and (max-width: 767px) { 178 .eui-hideFor--s { 179 display: none !important; } } 180 181@media only screen and (min-width: 575px) and (max-width: 767px) { 182 .eui-showFor--s { 183 display: inline !important; } } 184 185@media only screen and (min-width: 575px) and (max-width: 767px) { 186 .eui-showFor--s--block { 187 display: block !important; } } 188 189@media only screen and (min-width: 575px) and (max-width: 767px) { 190 .eui-showFor--s--inlineBlock { 191 display: inline-block !important; } } 192 193@media only screen and (min-width: 575px) and (max-width: 767px) { 194 .eui-showFor--s--flex { 195 display: -webkit-flex !important; 196 display: flex !important; } } 197 198@media only screen and (min-width: 768px) and (max-width: 991px) { 199 .eui-hideFor--m { 200 display: none !important; } } 201 202@media only screen and (min-width: 768px) and (max-width: 991px) { 203 .eui-showFor--m { 204 display: inline !important; } } 205 206@media only screen and (min-width: 768px) and (max-width: 991px) { 207 .eui-showFor--m--block { 208 display: block !important; } } 209 210@media only screen and (min-width: 768px) and (max-width: 991px) { 211 .eui-showFor--m--inlineBlock { 212 display: inline-block !important; } } 213 214@media only screen and (min-width: 768px) and (max-width: 991px) { 215 .eui-showFor--m--flex { 216 display: -webkit-flex !important; 217 display: flex !important; } } 218 219@media only screen and (min-width: 992px) and (max-width: 1199px) { 220 .eui-hideFor--l { 221 display: none !important; } } 222 223@media only screen and (min-width: 992px) and (max-width: 1199px) { 224 .eui-showFor--l { 225 display: inline !important; } } 226 227@media only screen and (min-width: 992px) and (max-width: 1199px) { 228 .eui-showFor--l--block { 229 display: block !important; } } 230 231@media only screen and (min-width: 992px) and (max-width: 1199px) { 232 .eui-showFor--l--inlineBlock { 233 display: inline-block !important; } } 234 235@media only screen and (min-width: 992px) and (max-width: 1199px) { 236 .eui-showFor--l--flex { 237 display: -webkit-flex !important; 238 display: flex !important; } } 239 240@media only screen and (min-width: 1200px) { 241 .eui-hideFor--xl { 242 display: none !important; } } 243 244@media only screen and (min-width: 1200px) { 245 .eui-showFor--xl { 246 display: inline !important; } } 247 248@media only screen and (min-width: 1200px) { 249 .eui-showFor--xl--block { 250 display: block !important; } } 251 252@media only screen and (min-width: 1200px) { 253 .eui-showFor--xl--inlineBlock { 254 display: inline-block !important; } } 255 256@media only screen and (min-width: 1200px) { 257 .eui-showFor--xl--flex { 258 display: -webkit-flex !important; 259 display: flex !important; } } 260 261/** 262 * IE doesn't properly wrap groups if it is within a flex-item of a flex-group. 263 * Adding the following styles to the flex-item that contains the wrapping group, will fix IE. 264 * https://github.com/philipwalton/flexbugs/issues/104 265 */ 266@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { 267 .euiIEFlexWrapFix { 268 -webkit-flex-grow: 1; 269 flex-grow: 1; 270 -webkit-flex-shrink: 1; 271 flex-shrink: 1; 272 -webkit-flex-basis: 0%; 273 flex-basis: 0%; } } 274 275/** 276 * Overflow scrolling 277 */ 278.eui-yScroll { 279 scrollbar-color: rgba(152, 162, 179, 0.5) transparent; 280 scrollbar-width: thin; 281 height: 100%; 282 overflow-y: auto; 283 overflow-x: hidden; } 284 .eui-yScroll::-webkit-scrollbar { 285 width: 16px; 286 height: 16px; } 287 .eui-yScroll::-webkit-scrollbar-thumb { 288 background-color: rgba(152, 162, 179, 0.5); 289 background-clip: content-box; 290 border-radius: 16px; 291 border: 6px solid transparent; } 292 .eui-yScroll::-webkit-scrollbar-corner, .eui-yScroll::-webkit-scrollbar-track { 293 background-color: transparent; } 294 .eui-yScroll:focus { 295 outline: none; 296 /* 1 */ } 297 .eui-yScroll[tabindex='0']:focus:focus-visible { 298 outline-style: auto; 299 /* 2 */ } 300 301.eui-xScroll { 302 scrollbar-color: rgba(152, 162, 179, 0.5) transparent; 303 scrollbar-width: thin; 304 overflow-x: auto; } 305 .eui-xScroll::-webkit-scrollbar { 306 width: 16px; 307 height: 16px; } 308 .eui-xScroll::-webkit-scrollbar-thumb { 309 background-color: rgba(152, 162, 179, 0.5); 310 background-clip: content-box; 311 border-radius: 16px; 312 border: 6px solid transparent; } 313 .eui-xScroll::-webkit-scrollbar-corner, .eui-xScroll::-webkit-scrollbar-track { 314 background-color: transparent; } 315 .eui-xScroll:focus { 316 outline: none; 317 /* 1 */ } 318 .eui-xScroll[tabindex='0']:focus:focus-visible { 319 outline-style: auto; 320 /* 2 */ } 321 322/** 323 * Overflow scrolling with shadows 324 */ 325.eui-yScrollWithShadows { 326 scrollbar-color: rgba(152, 162, 179, 0.5) transparent; 327 scrollbar-width: thin; 328 height: 100%; 329 overflow-y: auto; 330 overflow-x: hidden; 331 -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%); 332 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%); } 333 .eui-yScrollWithShadows::-webkit-scrollbar { 334 width: 16px; 335 height: 16px; } 336 .eui-yScrollWithShadows::-webkit-scrollbar-thumb { 337 background-color: rgba(152, 162, 179, 0.5); 338 background-clip: content-box; 339 border-radius: 16px; 340 border: 6px solid transparent; } 341 .eui-yScrollWithShadows::-webkit-scrollbar-corner, .eui-yScrollWithShadows::-webkit-scrollbar-track { 342 background-color: transparent; } 343 .eui-yScrollWithShadows:focus { 344 outline: none; 345 /* 1 */ } 346 .eui-yScrollWithShadows[tabindex='0']:focus:focus-visible { 347 outline-style: auto; 348 /* 2 */ } 349 350.eui-xScrollWithShadows { 351 scrollbar-color: rgba(152, 162, 179, 0.5) transparent; 352 scrollbar-width: thin; 353 overflow-x: auto; 354 -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%); 355 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%); } 356 .eui-xScrollWithShadows::-webkit-scrollbar { 357 width: 16px; 358 height: 16px; } 359 .eui-xScrollWithShadows::-webkit-scrollbar-thumb { 360 background-color: rgba(152, 162, 179, 0.5); 361 background-clip: content-box; 362 border-radius: 16px; 363 border: 6px solid transparent; } 364 .eui-xScrollWithShadows::-webkit-scrollbar-corner, .eui-xScrollWithShadows::-webkit-scrollbar-track { 365 background-color: transparent; } 366 .eui-xScrollWithShadows:focus { 367 outline: none; 368 /* 1 */ } 369 .eui-xScrollWithShadows[tabindex='0']:focus:focus-visible { 370 outline-style: auto; 371 /* 2 */ } 372 373.euiYScrollWithShadows { 374 scrollbar-color: rgba(152, 162, 179, 0.5) transparent; 375 scrollbar-width: thin; 376 height: 100%; 377 overflow-y: auto; 378 overflow-x: hidden; 379 -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%); 380 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%); } 381 .euiYScrollWithShadows::-webkit-scrollbar { 382 width: 16px; 383 height: 16px; } 384 .euiYScrollWithShadows::-webkit-scrollbar-thumb { 385 background-color: rgba(152, 162, 179, 0.5); 386 background-clip: content-box; 387 border-radius: 16px; 388 border: 6px solid transparent; } 389 .euiYScrollWithShadows::-webkit-scrollbar-corner, .euiYScrollWithShadows::-webkit-scrollbar-track { 390 background-color: transparent; } 391 .euiYScrollWithShadows:focus { 392 outline: none; 393 /* 1 */ } 394 .euiYScrollWithShadows[tabindex='0']:focus:focus-visible { 395 outline-style: auto; 396 /* 2 */ } 397 398/** 399 * Forcing focus ring on non-EUI elements 400 */ 401.eui-isFocusable:focus { 402 -webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimateLarge !important; 403 animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimateLarge !important; } 404 405/** 406 * For quickly applying a full-height element whether using flex or not 407 */ 408.eui-fullHeight { 409 height: 100%; 410 -webkit-flex: 1 1 auto; 411 flex: 1 1 auto; 412 overflow: hidden; } 413 414/** 415 * Adapted from Eric Meyer's reset (http://meyerweb.com/eric/tools/css/reset/, v2.0 | 20110126). 416 * 417 */ 418*, *:before, *:after { 419 box-sizing: border-box; } 420 421html, body, div, span, applet, object, iframe, 422h1, h2, h3, h4, h5, h6, p, blockquote, pre, 423a, abbr, acronym, address, big, cite, code, 424del, dfn, em, img, ins, kbd, q, s, samp, 425small, strike, strong, sub, sup, tt, var, 426b, u, i, center, 427dl, dt, dd, ol, ul, li, 428fieldset, form, label, legend, 429table, caption, tbody, tfoot, thead, tr, th, td, 430article, aside, canvas, details, embed, 431figure, figcaption, footer, header, hgroup, 432menu, nav, output, ruby, section, summary, 433time, mark, audio, video { 434 margin: 0; 435 padding: 0; 436 border: none; 437 vertical-align: baseline; } 438 439code, pre, kbd, samp { 440 font-family: "Roboto Mono", Consolas, Menlo, Courier, monospace; } 441 442h1, h2, h3, h4, h5, h6, p { 443 font-family: inherit; 444 font-weight: inherit; 445 font-size: inherit; } 446 447input, textarea, select, button { 448 font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } 449 450em { 451 font-style: italic; } 452 453strong { 454 font-weight: 700; } 455 456/* HTML5 display-role reset for older browsers */ 457article, aside, details, figcaption, figure, 458footer, header, hgroup, menu, nav, section { 459 display: block; } 460 461html { 462 font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 463 font-weight: 400; 464 letter-spacing: -.005em; 465 -webkit-text-size-adjust: 100%; 466 -ms-text-size-adjust: 100%; 467 -webkit-font-kerning: normal; 468 font-kerning: normal; 469 font-size: 16px; 470 color: #DFE5EF; 471 height: 100%; 472 background-color: #141519; } 473 474body { 475 line-height: 1; } 476 477*:focus { 478 outline: none; } 479 *:focus::-moz-focus-inner { 480 border: none; } 481 *:focus:-moz-focusring { 482 outline: none; } 483 484a { 485 text-decoration: none; 486 color: #1BA9F5; } 487 a:hover { 488 text-decoration: none; } 489 a:focus { 490 text-decoration: none; 491 outline: none; } 492 493a:hover, button, [role='button'] { 494 cursor: pointer; } 495 496input { 497 margin: 0; 498 padding: 0; } 499 input:disabled { 500 opacity: 1; 501 /* required on iOS */ } 502 503button { 504 background: none; 505 border: none; 506 padding: 0; 507 margin: 0; 508 outline: none; 509 font-size: inherit; 510 color: inherit; 511 border-radius: 0; } 512 button:hover { 513 cursor: pointer; } 514 515ol, ul { 516 list-style: none; } 517 518blockquote, q { 519 quotes: none; } 520 521blockquote:before, blockquote:after, 522q:before, q:after { 523 content: ''; 524 content: none; } 525 526table { 527 border-collapse: collapse; 528 border-spacing: 0; } 529 530hr { 531 margin: 0; } 532 533fieldset { 534 min-inline-size: auto; } 535 536svg text { 537 letter-spacing: normal !important; } 538 539html { 540 scrollbar-color: rgba(152, 162, 179, 0.5) #242529; } 541 html::-webkit-scrollbar { 542 width: 16px; 543 height: 16px; } 544 html::-webkit-scrollbar-thumb { 545 background-color: rgba(152, 162, 179, 0.5); 546 background-clip: content-box; 547 border-radius: 16px; 548 border: 4px solid #242529; } 549 html::-webkit-scrollbar-corner, html::-webkit-scrollbar-track { 550 background-color: #242529; } 551 552/* This file is a heavy retheme of react-datepicker's Sass as of v1.4.0 553** https://github.com/Hacker0x01/react-datepicker 554** 555** In places where features were disabled, I've commented out the original Sass 556** selectors rather than removing it so we can better understand what's changed. 557** Commented out selectors that don't have properties indicate that we are not 558** using those dom elements for styling of any kind. For example, react-datepicker 559** has lots of pointer arrows attached to its popovers, but we choose not to render 560** then in any way. 561** 562** Similarly, you will also find several times where we use display: none to 563** completely remove extraneous UI (they had some overly obvious legends for example). 564*/ 565.euiDatePicker .euiFormControlLayout { 566 height: auto; } 567 568.euiDatePicker.euiDatePicker--shadow .react-datepicker-popper { 569 box-shadow: 0 6px 12px -1px rgba(0, 0, 0, 0.2), 0 4px 4px -1px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2); 570 border: 1px solid #343741; 571 background-color: #1D1E24; 572 border-radius: 0 0 4px 4px; } 573 574.euiDatePicker.euiDatePicker--shadow.euiDatePicker--inline .react-datepicker { 575 box-shadow: 0 6px 12px -1px rgba(0, 0, 0, 0.2), 0 4px 4px -1px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2); 576 border: 1px solid #343741; 577 background-color: #1D1E24; 578 border-radius: 4px; } 579 580.react-datepicker { 581 font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 582 font-weight: 400; 583 letter-spacing: -.005em; 584 -webkit-text-size-adjust: 100%; 585 -ms-text-size-adjust: 100%; 586 -webkit-font-kerning: normal; 587 font-kerning: normal; 588 font-size: 12px; 589 color: #FFF; 590 display: -webkit-flex; 591 display: flex; 592 position: relative; 593 border-radius: 4px; } 594 595.react-datepicker--time-only .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box { 596 width: 100%; } 597 .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 { 598 font-size: 14px; 599 text-align: left; 600 padding-left: 36px; 601 padding-right: 36px; 602 color: #DFE5EF; } 603 .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 { 604 color: #FFF; } 605 .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 { 606 color: #4c4e51; } 607 608.react-datepicker--time-only .react-datepicker__time-container { 609 border-left: 0; } 610 611.euiDatePicker.euiDatePicker--shadow .react-datepicker-popper { 612 z-index: 2000; 613 -webkit-animation: euiAnimFadeIn 150ms ease-in; 614 animation: euiAnimFadeIn 150ms ease-in; } 615 .euiDatePicker.euiDatePicker--shadow .react-datepicker-popper[data-placement^="top"] { 616 box-shadow: 0 0 12px -1px rgba(0, 0, 0, 0.2), 0 0 4px -1px rgba(0, 0, 0, 0.2), 0 0 2px 0 rgba(0, 0, 0, 0.2); 617 border-radius: 4px 4px 0 0; } 618 .euiDatePicker.euiDatePicker--shadow .react-datepicker-popper[data-placement^="right"] { 619 margin-left: 0; } 620 .euiDatePicker.euiDatePicker--shadow .react-datepicker-popper[data-placement^="left"] { 621 margin-right: 0; } 622 623.react-datepicker__header { 624 text-align: center; 625 border-top-left-radius: 4px; 626 border-top-right-radius: 4px; } 627 .react-datepicker__header--time { 628 display: none; } 629 630.react-datepicker__header__dropdown { 631 padding: 16px 0 8px 0; } 632 633.react-datepicker__year-dropdown-container--select, 634.react-datepicker__month-dropdown-container--select, 635.react-datepicker__month-year-dropdown-container--select, 636.react-datepicker__year-dropdown-container--scroll, 637.react-datepicker__month-dropdown-container--scroll, 638.react-datepicker__month-year-dropdown-container--scroll { 639 display: inline-block; 640 margin: 0 4px; } 641 642.react-datepicker__current-month, 643.react-datepicker-time__header { 644 display: none; } 645 646.react-datepicker-time__header { 647 text-overflow: ellipsis; 648 white-space: nowrap; 649 overflow: hidden; } 650 651.react-datepicker__navigation { 652 cursor: pointer; 653 position: absolute; 654 top: 18px; 655 width: 0; 656 padding: 0; 657 z-index: 1; 658 text-indent: -999em; 659 overflow: hidden; } 660 .react-datepicker__navigation--previous { 661 background-position: center; 662 background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+ICA8ZGVmcz4gICAgPHBhdGggaWQ9ImRvd25hcnJvd3doaXRlLWEiIGQ9Ik0xMy4wNjg4NTA4LDUuMTU3MjUwMzggTDguMzg0MjM5NzUsOS43NjgyNzQyOCBDOC4xNzA1NDQxNSw5Ljk3ODYxMzA4IDcuODI5OTkyMTQsOS45NzkxNDA5NSA3LjYxNTc2MDI1LDkuNzY4Mjc0MjggTDIuOTMxMTQ5MTUsNS4xNTcyNTAzOCBDMi43MTgxMzU5LDQuOTQ3NTgzMjEgMi4zNzI3NzMxOSw0Ljk0NzU4MzIxIDIuMTU5NzU5OTQsNS4xNTcyNTAzOCBDMS45NDY3NDY2OSw1LjM2NjkxNzU2IDEuOTQ2NzQ2NjksNS43MDY4NTUyMiAyLjE1OTc1OTk0LDUuOTE2NTIyNCBMNi44NDQzNzEwNCwxMC41Mjc1NDYzIEM3LjQ4NTE3NDI0LDExLjE1ODI4MzYgOC41MTY0NDk3OSwxMS4xNTY2ODUxIDkuMTU1NjI4OTYsMTAuNTI3NTQ2MyBMMTMuODQwMjQwMSw1LjkxNjUyMjQgQzE0LjA1MzI1MzMsNS43MDY4NTUyMiAxNC4wNTMyNTMzLDUuMzY2OTE3NTYgMTMuODQwMjQwMSw1LjE1NzI1MDM4IEMxMy42MjcyMjY4LDQuOTQ3NTgzMjEgMTMuMjgxODY0MSw0Ljk0NzU4MzIxIDEzLjA2ODg1MDgsNS4xNTcyNTAzOCBaIi8+ICA8L2RlZnM+ICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgICA8dXNlIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIgeGxpbms6aHJlZj0iI2Rvd25hcnJvd3doaXRlLWEiLz4gIDwvZz48L3N2Zz4=); 663 left: 20px; 664 height: 16px; 665 width: 16px; 666 -webkit-transform: rotate(90deg); 667 transform: rotate(90deg); 668 transition: -webkit-transform 90ms ease-in-out; 669 transition: transform 90ms ease-in-out; 670 transition: transform 90ms ease-in-out, -webkit-transform 90ms ease-in-out; } 671 .react-datepicker__navigation--previous:hover, .react-datepicker__navigation--previous:focus { 672 border-radius: 4px; 673 -webkit-transform: scale(1.2) rotate(90deg); 674 transform: scale(1.2) rotate(90deg); } 675 .react-datepicker__navigation--previous:hover { 676 background-color: #25262E; 677 box-shadow: 0 0 0 2px #25262E; } 678 .react-datepicker__navigation--previous:focus { 679 background-color: #052231; 680 box-shadow: 0 0 0 2px #052231; } 681 .react-datepicker__navigation--previous--disabled, .react-datepicker__navigation--previous--disabled:hover { 682 cursor: not-allowed; 683 opacity: .2; } 684 .react-datepicker__navigation--next { 685 background-position: center; 686 background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+ICA8ZGVmcz4gICAgPHBhdGggaWQ9ImRvd25hcnJvd3doaXRlLWEiIGQ9Ik0xMy4wNjg4NTA4LDUuMTU3MjUwMzggTDguMzg0MjM5NzUsOS43NjgyNzQyOCBDOC4xNzA1NDQxNSw5Ljk3ODYxMzA4IDcuODI5OTkyMTQsOS45NzkxNDA5NSA3LjYxNTc2MDI1LDkuNzY4Mjc0MjggTDIuOTMxMTQ5MTUsNS4xNTcyNTAzOCBDMi43MTgxMzU5LDQuOTQ3NTgzMjEgMi4zNzI3NzMxOSw0Ljk0NzU4MzIxIDIuMTU5NzU5OTQsNS4xNTcyNTAzOCBDMS45NDY3NDY2OSw1LjM2NjkxNzU2IDEuOTQ2NzQ2NjksNS43MDY4NTUyMiAyLjE1OTc1OTk0LDUuOTE2NTIyNCBMNi44NDQzNzEwNCwxMC41Mjc1NDYzIEM3LjQ4NTE3NDI0LDExLjE1ODI4MzYgOC41MTY0NDk3OSwxMS4xNTY2ODUxIDkuMTU1NjI4OTYsMTAuNTI3NTQ2MyBMMTMuODQwMjQwMSw1LjkxNjUyMjQgQzE0LjA1MzI1MzMsNS43MDY4NTUyMiAxNC4wNTMyNTMzLDUuMzY2OTE3NTYgMTMuODQwMjQwMSw1LjE1NzI1MDM4IEMxMy42MjcyMjY4LDQuOTQ3NTgzMjEgMTMuMjgxODY0MSw0Ljk0NzU4MzIxIDEzLjA2ODg1MDgsNS4xNTcyNTAzOCBaIi8+ICA8L2RlZnM+ICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgICA8dXNlIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIgeGxpbms6aHJlZj0iI2Rvd25hcnJvd3doaXRlLWEiLz4gIDwvZz48L3N2Zz4=); 687 right: 20px; 688 height: 16px; 689 width: 16px; 690 -webkit-transform: rotate(-90deg); 691 transform: rotate(-90deg); } 692 .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) { 693 left: 248px; } 694 .react-datepicker__navigation--next:hover, .react-datepicker__navigation--next:focus { 695 border-radius: 4px; 696 -webkit-transform: scale(1.2) rotate(-90deg); 697 transform: scale(1.2) rotate(-90deg); } 698 .react-datepicker__navigation--next:hover { 699 background-color: #25262E; 700 box-shadow: 0 0 0 2px #25262E; } 701 .react-datepicker__navigation--next:focus { 702 background-color: #052231; 703 box-shadow: 0 0 0 2px #052231; } 704 .react-datepicker__navigation--next--disabled, .react-datepicker__navigation--next--disabled:hover { 705 cursor: not-allowed; 706 opacity: .2; } 707 .react-datepicker__navigation--years { 708 position: relative; 709 top: 0; 710 display: block; 711 margin-left: auto; 712 margin-right: auto; } 713 .react-datepicker__navigation--years-previous { 714 top: 4px; 715 border-top-color: #25262E; } 716 .react-datepicker__navigation--years-previous:hover { 717 border-top-color: #0e0f12; } 718 .react-datepicker__navigation--years-upcoming { 719 top: -4px; 720 border-bottom-color: #25262E; } 721 .react-datepicker__navigation--years-upcoming:hover { 722 border-bottom-color: #0e0f12; } 723 724.react-datepicker__month { 725 margin: 0 16px 16px 16px; 726 text-align: center; 727 border-radius: 4px; } 728 729.react-datepicker__time-container { 730 border-left: #343741; 731 width: auto; 732 display: -webkit-flex; 733 display: flex; 734 padding: 16px 0; 735 border-radius: 0 4px 4px 0; 736 -webkit-flex-grow: 1; 737 flex-grow: 1; } 738 .react-datepicker__time-container .react-datepicker__time { 739 position: relative; 740 -webkit-flex-grow: 1; 741 flex-grow: 1; 742 display: -webkit-flex; 743 display: flex; 744 padding-left: 4px; 745 -webkit-flex-direction: column; 746 flex-direction: column; } 747 .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box { 748 width: auto; 749 display: -webkit-flex; 750 display: flex; 751 -webkit-flex-direction: column; 752 flex-direction: column; 753 -webkit-flex-grow: 1; 754 flex-grow: 1; } 755 .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list { 756 scrollbar-color: rgba(152, 162, 179, 0.5) transparent; 757 scrollbar-width: thin; 758 height: 204px !important; 759 display: -webkit-flex; 760 display: flex; 761 -webkit-flex-direction: column; 762 flex-direction: column; 763 -webkit-flex-grow: 1; 764 flex-grow: 1; 765 overflow-y: auto; 766 -webkit-align-items: center; 767 align-items: center; } 768 .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list::-webkit-scrollbar { 769 width: 16px; 770 height: 16px; } 771 .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list::-webkit-scrollbar-thumb { 772 background-color: rgba(152, 162, 179, 0.5); 773 background-clip: content-box; 774 border-radius: 16px; 775 border: 6px solid transparent; } 776 .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 { 777 background-color: transparent; } 778 .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item { 779 padding: 4px 8px; 780 margin-bottom: 4px; 781 text-align: right; 782 color: #98A2B3; 783 white-space: nowrap; 784 line-height: 12px; } 785 .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 { 786 cursor: pointer; 787 text-decoration: underline; } 788 .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected { 789 background-color: #1BA9F5; 790 color: white; 791 border-radius: 2px; } 792 .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover { 793 background-color: #1BA9F5; } 794 .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled { 795 color: #343741; } 796 .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover { 797 cursor: not-allowed; 798 text-decoration: none; 799 background-color: transparent; } 800 801.react-datepicker__week-number { 802 color: #25262E; 803 display: inline-block; 804 width: 32px; 805 line-height: 28px; 806 text-align: center; 807 margin: 0 4px; } 808 .react-datepicker__week-number.react-datepicker__week-number--clickable { 809 cursor: pointer; } 810 .react-datepicker__week-number.react-datepicker__week-number--clickable:hover { 811 border-radius: 4px; 812 background-color: #1D1E24; } 813 814.react-datepicker__day-names, 815.react-datepicker__week { 816 white-space: nowrap; } 817 818.react-datepicker__day-name, 819.react-datepicker__day, 820.react-datepicker__time-name { 821 color: #FFF; 822 display: inline-block; 823 width: 32px; 824 line-height: 28px; 825 text-align: center; 826 margin: 0 2px; } 827 828.react-datepicker__day-name { 829 color: #98A2B3; 830 text-transform: uppercase; } 831 832.react-datepicker__day { 833 cursor: pointer; 834 border: solid 2px transparent; 835 transition: -webkit-transform 90ms ease-in-out; 836 transition: transform 90ms ease-in-out; 837 transition: transform 90ms ease-in-out, -webkit-transform 90ms ease-in-out; } 838 .react-datepicker__day:hover:not(.react-datepicker__day--disabled) { 839 text-decoration: underline; 840 font-weight: 700; 841 -webkit-transform: scale(1.2); 842 transform: scale(1.2); } 843 .react-datepicker__day--today { 844 font-weight: bold; 845 color: #1BA9F5; } 846 .react-datepicker__day--outside-month { 847 color: #98A2B3; } 848 .react-datepicker__day--highlighted { 849 border-radius: 4px; 850 background-color: #7DE2D1; 851 color: #FFF; } 852 .react-datepicker__day--highlighted:hover { 853 background-color: #68ddca; } 854 .react-datepicker__day--in-range { 855 background-color: rgba(27, 169, 245, 0.1); 856 color: #FFF; 857 border-radius: 0; 858 border-top: solid 6px #1D1E24; 859 border-bottom: solid 6px #1D1E24; 860 border-right: none; 861 border-left: none; 862 line-height: 20px; } 863 .react-datepicker__day--selected, .react-datepicker__day--in-selecting-range { 864 height: 32px; 865 margin: 0 2px; 866 border-radius: 4px; 867 background-color: #1BA9F5; 868 line-height: 28px; 869 border: solid 2px #1BA9F5; 870 color: #FFF; } 871 .react-datepicker__day--selected:hover, .react-datepicker__day--in-selecting-range:hover { 872 background-color: #0a9dec; } 873 .react-datepicker__day--keyboard-selected { 874 border-radius: 4px; 875 border: solid 2px #1BA9F5; 876 font-weight: 700; } 877 .react-datepicker__day--keyboard-selected:hover { 878 background-color: #0a9dec; 879 color: #FFF; } 880 .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range) { 881 background-color: rgba(27, 169, 245, 0.5); } 882 .react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range) { 883 background-color: #1D1E24; 884 color: #FFF; } 885 .react-datepicker__day--disabled { 886 cursor: not-allowed; 887 color: #343741; } 888 .react-datepicker__day--disabled:hover { 889 background-color: transparent; } 890 891.react-datepicker__input-container { 892 position: relative; } 893 894.react-datepicker__year-read-view { 895 font-weight: 300; 896 color: #98A2B3; } 897 898.react-datepicker__month-read-view { 899 font-weight: 500; } 900 901.react-datepicker__year-read-view, 902.react-datepicker__month-read-view, 903.react-datepicker__month-year-read-view { 904 font-size: 20px; } 905 .react-datepicker__year-read-view:hover, 906 .react-datepicker__month-read-view:hover, 907 .react-datepicker__month-year-read-view:hover { 908 cursor: pointer; 909 color: #1BA9F5; } 910 .react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow, 911 .react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow, 912 .react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow, 913 .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow, 914 .react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow, 915 .react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow { 916 border-top-color: #0e0f12; } 917 .react-datepicker__year-read-view--down-arrow, 918 .react-datepicker__month-read-view--down-arrow, 919 .react-datepicker__month-year-read-view--down-arrow { 920 display: none; } 921 922.react-datepicker__year-dropdown, 923.react-datepicker__month-dropdown, 924.react-datepicker__month-year-dropdown { 925 background-color: #1D1E24; 926 position: absolute; 927 width: 100%; 928 height: 100%; 929 left: 0; 930 top: 0; 931 bottom: 0; 932 right: 0; 933 z-index: 1; 934 text-align: center; 935 border-radius: 4px; 936 display: -webkit-flex; 937 display: flex; 938 -webkit-flex-wrap: wrap; 939 flex-wrap: wrap; 940 -webkit-animation: euiAnimFadeIn 150ms ease-in; 941 animation: euiAnimFadeIn 150ms ease-in; 942 -webkit-align-content: space-around; 943 align-content: space-around; 944 -webkit-align-items: center; 945 align-items: center; 946 padding: 8px; } 947 .react-datepicker__year-dropdown:hover, 948 .react-datepicker__month-dropdown:hover, 949 .react-datepicker__month-year-dropdown:hover { 950 cursor: pointer; } 951 952.react-datepicker__year-dropdown { 953 -webkit-flex-wrap: wrap-reverse; 954 flex-wrap: wrap-reverse; 955 -webkit-flex-direction: row-reverse; 956 flex-direction: row-reverse; 957 -webkit-justify-content: flex-end; 958 justify-content: flex-end; } 959 960.react-datepicker__year-option, 961.react-datepicker__month-option, 962.react-datepicker__month-year-option { 963 font-size: 12px; 964 padding: 8px; 965 color: #D4DAE5; 966 -webkit-flex-basis: 33.3%; 967 flex-basis: 33.3%; } 968 .react-datepicker__year-option:first-of-type, 969 .react-datepicker__month-option:first-of-type, 970 .react-datepicker__month-year-option:first-of-type { 971 border-top-left-radius: 4px; 972 border-top-right-radius: 4px; } 973 .react-datepicker__year-option:last-of-type, 974 .react-datepicker__month-option:last-of-type, 975 .react-datepicker__month-year-option:last-of-type { 976 -webkit-user-select: none; 977 -moz-user-select: none; 978 user-select: none; 979 border-bottom-left-radius: 4px; 980 border-bottom-right-radius: 4px; } 981 .react-datepicker__year-option:hover, 982 .react-datepicker__month-option:hover, 983 .react-datepicker__month-year-option:hover { 984 background-color: #25262E; } 985 .react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming, 986 .react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming, 987 .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming { 988 border-bottom-color: #0e0f12; } 989 .react-datepicker__year-option:hover .react-datepicker__navigation--years-previous, 990 .react-datepicker__month-option:hover .react-datepicker__navigation--years-previous, 991 .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous { 992 border-top-color: #0e0f12; } 993 .react-datepicker__year-option--selected, 994 .react-datepicker__month-option--selected, 995 .react-datepicker__month-year-option--selected { 996 display: none; } 997 998.react-datepicker__screenReaderOnly { 999 position: absolute; 1000 left: -10000px; 1001 top: auto; 1002 width: 1px; 1003 height: 1px; 1004 overflow: hidden; } 1005 1006.react-datepicker__year-option--preselected, 1007.react-datepicker__month-option--preselected { 1008 background: #052231; } 1009 1010.react-datepicker__year-option--selected_year.react-datepicker__year-option--preselected, 1011.react-datepicker__month-option--selected_month.react-datepicker__month-option--preselected { 1012 background: #1BA9F5; } 1013 1014.react-datepicker__time-list-item--preselected, 1015.react-datepicker__year-option--preselected, 1016.react-datepicker__month-option--preselected { 1017 background: #03121a; } 1018 1019.react-datepicker__time-container--focus { 1020 background: #052231; } 1021 1022.react-datepicker__month-read-view:focus, 1023.react-datepicker__year-read-view:focus { 1024 text-decoration: underline; } 1025 1026.react-datepicker__month--accessible:focus { 1027 background: #052231; } 1028 .react-datepicker__month--accessible:focus .react-datepicker__day--in-range:not(.react-datepicker__day--selected) { 1029 border-top-color: #052231; 1030 border-bottom-color: #052231; } 1031 1032.react-datepicker__navigation:focus { 1033 background-color: #052231; } 1034 1035.react-datepicker__year-option--selected_year, 1036.react-datepicker__month-option--selected_month { 1037 background: #1BA9F5; 1038 color: #1D1E24; 1039 font-weight: 700; 1040 border-radius: 4px; } 1041 1042.react-datepicker__focusTrap { 1043 display: -webkit-flex; 1044 display: flex; } 1045 1046.euiScreenReaderOnly, 1047.euiScreenReaderOnly--showOnFocus:not(:focus):not(:active) { 1048 position: absolute; 1049 top: auto; 1050 left: -10000px; 1051 width: 1px; 1052 height: 1px; 1053 clip: rect(0 0 0 0); 1054 -webkit-clip-path: inset(50%); 1055 clip-path: inset(50%); 1056 overflow: hidden; 1057 margin: -1px; } 1058 1059.euiSkipLink { 1060 transition: none !important; } 1061 .euiSkipLink:focus { 1062 -webkit-animation: none !important; 1063 animation: none !important; } 1064 .euiSkipLink.euiSkipLink--absolute:focus { 1065 position: absolute; } 1066 .euiSkipLink.euiSkipLink--fixed:focus { 1067 position: fixed; 1068 top: 4px; 1069 left: 4px; 1070 z-index: 1001; } 1071 1072.euiAccordion__triggerWrapper { 1073 display: -webkit-flex; 1074 display: flex; 1075 -webkit-align-items: center; 1076 align-items: center; } 1077 1078.euiAccordion__button { 1079 font-size: 16px; 1080 font-size: 1rem; 1081 line-height: 1.5; 1082 text-align: left; 1083 width: 100%; 1084 -webkit-flex-grow: 1; 1085 flex-grow: 1; 1086 display: -webkit-flex; 1087 display: flex; 1088 -webkit-align-items: center; 1089 align-items: center; } 1090 .euiAccordion__button:hover, .euiAccordion__button:focus { 1091 text-decoration: underline; 1092 cursor: pointer; } 1093 .euiAccordion__button:focus .euiAccordion__iconWrapper { 1094 -webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important; 1095 animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important; 1096 color: #1BA9F5; 1097 outline: none; } 1098 1099.euiAccordion__buttonReverse { 1100 -webkit-flex-direction: row-reverse; 1101 flex-direction: row-reverse; 1102 -webkit-justify-content: space-between; 1103 justify-content: space-between; } 1104 .euiAccordion__buttonReverse .euiAccordion__iconWrapper { 1105 margin-left: 8px; 1106 margin-right: 4px; } 1107 1108.euiAccordion__iconWrapper { 1109 width: 16px; 1110 height: 16px; 1111 margin-left: 4px; 1112 margin-right: 8px; 1113 border-radius: 4px; 1114 -webkit-flex-shrink: 0; 1115 flex-shrink: 0; } 1116 .euiAccordion__iconWrapper .euiAccordion__icon { 1117 vertical-align: top; 1118 transition: -webkit-transform 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); 1119 transition: transform 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); 1120 transition: transform 250ms cubic-bezier(0.694, 0.0482, 0.335, 1), -webkit-transform 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } 1121 .euiAccordion__iconWrapper .euiAccordion__icon-isOpen { 1122 -webkit-transform: rotate(90deg); 1123 transform: rotate(90deg); } 1124 1125.euiAccordion__iconButton { 1126 margin-left: 8px; 1127 margin-right: 4px; } 1128 .euiAccordion__iconButton:focus { 1129 -webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important; 1130 animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important; 1131 color: #1BA9F5; } 1132 1133.euiAccordion__optionalAction { 1134 -webkit-flex-shrink: 0; 1135 flex-shrink: 0; } 1136 1137.euiAccordion__childWrapper { 1138 visibility: hidden; 1139 height: 0; 1140 opacity: 0; 1141 overflow: hidden; 1142 -webkit-transform: translatez(0); 1143 transform: translatez(0); 1144 transition: height 250ms cubic-bezier(0.694, 0.0482, 0.335, 1), opacity 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } 1145 .euiAccordion__childWrapper:focus { 1146 outline: none; } 1147 1148.euiAccordion__padding--xs { 1149 padding: 4px; } 1150 1151.euiAccordion__padding--s { 1152 padding: 8px; } 1153 1154.euiAccordion__padding--m { 1155 padding: 16px; } 1156 1157.euiAccordion__padding--l { 1158 padding: 24px; } 1159 1160.euiAccordion__padding--xl { 1161 padding: 32px; } 1162 1163.euiAccordion.euiAccordion-isOpen .euiAccordion__childWrapper { 1164 visibility: visible; 1165 opacity: 1; 1166 height: auto; } 1167 1168.euiAccordion__children-isLoading { 1169 line-height: 1.5; 1170 display: -webkit-flex; 1171 display: flex; 1172 -webkit-align-items: center; 1173 align-items: center; } 1174 .euiAccordion__children-isLoading .euiAccordion__spinner { 1175 margin-right: 4px; } 1176 1177.euiAccordionForm__extraAction { 1178 opacity: 0; 1179 transition: opacity 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } 1180 .euiAccordionForm__extraAction:focus { 1181 opacity: 1; } 1182 1183.euiAccordionForm__title { 1184 display: inline-block; } 1185 1186.euiAccordionForm__button { 1187 padding: 16px 16px 16px 0; } 1188 .euiAccordionForm__button:hover { 1189 text-decoration: none; } 1190 .euiAccordionForm__button:hover .euiAccordionForm__title { 1191 text-decoration: underline; } 1192 1193.euiAccordionForm { 1194 border-top: 1px solid #343741; 1195 border-bottom: 1px solid #343741; } 1196 .euiAccordionForm + .euiAccordionForm { 1197 border-top: none; } 1198 .euiAccordionForm:hover .euiAccordionForm__extraAction { 1199 opacity: 1; 1200 visibility: visible; } 1201 1202.euiAspectRatio { 1203 position: relative; } 1204 .euiAspectRatio > * { 1205 position: absolute !important; 1206 top: 0 !important; 1207 left: 0 !important; 1208 width: 100% !important; 1209 height: 100% !important; } 1210 1211.euiAvatar { 1212 -webkit-flex-shrink: 0; 1213 flex-shrink: 0; 1214 display: -webkit-inline-flex; 1215 display: inline-flex; 1216 -webkit-justify-content: center; 1217 justify-content: center; 1218 -webkit-align-items: center; 1219 align-items: center; 1220 background-size: cover; 1221 text-align: center; 1222 vertical-align: middle; 1223 overflow-x: hidden; 1224 font-weight: 500; } 1225 1226.euiAvatar--user { 1227 position: relative; 1228 border-radius: 50%; } 1229 .euiAvatar--user:after { 1230 position: absolute; 1231 top: 0; 1232 left: 0; 1233 right: 0; 1234 bottom: 0; 1235 border-radius: 50%; 1236 content: ''; 1237 pointer-events: none; 1238 border: 1px solid rgba(212, 218, 229, 0.05); } 1239 1240.euiAvatar--space { 1241 position: relative; 1242 border-radius: 4px; } 1243 .euiAvatar--space:after { 1244 position: absolute; 1245 top: 0; 1246 left: 0; 1247 right: 0; 1248 bottom: 0; 1249 border-radius: 4px; 1250 content: ''; 1251 pointer-events: none; 1252 border: 1px solid rgba(212, 218, 229, 0.05); } 1253 1254.euiAvatar-isDisabled { 1255 cursor: not-allowed; 1256 -webkit-filter: grayscale(100%); 1257 filter: grayscale(100%); } 1258 1259.euiAvatar--plain { 1260 background-color: #1D1E24; } 1261 1262.euiAvatar--s { 1263 width: 24px; 1264 height: 24px; 1265 line-height: 24px; 1266 font-size: 12px; } 1267 1268.euiAvatar--m { 1269 width: 32px; 1270 height: 32px; 1271 line-height: 32px; 1272 font-size: 14.4px; } 1273 1274.euiAvatar--l { 1275 width: 40px; 1276 height: 40px; 1277 line-height: 40px; 1278 font-size: 19.2px; } 1279 1280.euiAvatar--xl { 1281 width: 64px; 1282 height: 64px; 1283 line-height: 64px; 1284 font-size: 25.6px; } 1285 1286/** 1287 * 1. Accounts for the border 1288 */ 1289.euiBadge { 1290 font-size: 12px; 1291 font-weight: 500; 1292 line-height: 18px; 1293 /* 1 */ 1294 padding: 0 8px; 1295 display: inline-block; 1296 text-decoration: none; 1297 border-radius: 2px; 1298 border: solid 1px transparent; 1299 background-color: transparent; 1300 white-space: nowrap; 1301 vertical-align: middle; 1302 cursor: default; 1303 max-width: 100%; 1304 text-align: left; } 1305 .euiBadge.euiBadge-isDisabled { 1306 color: #757678 !important; 1307 background-color: #434548 !important; } 1308 .euiBadge:focus-within { 1309 -webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important; 1310 animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important; } 1311 .euiBadge + .euiBadge { 1312 margin-left: 4px; } 1313 .euiBadge .euiBadge__content { 1314 min-height: 18px; 1315 display: -webkit-flex; 1316 display: flex; 1317 -webkit-align-items: center; 1318 align-items: center; 1319 overflow: hidden; } 1320 .euiBadge .euiBadge__childButton { 1321 max-width: 100%; 1322 overflow: hidden !important; 1323 text-overflow: ellipsis !important; 1324 white-space: nowrap !important; 1325 word-wrap: normal !important; 1326 -webkit-flex: 1 1 auto; 1327 flex: 1 1 auto; 1328 text-align: inherit; 1329 font-weight: inherit; 1330 line-height: inherit; 1331 color: inherit; } 1332 .euiBadge .euiBadge__childButton:disabled { 1333 cursor: not-allowed; } 1334 .euiBadge .euiBadge__childButton:not(:disabled):hover, .euiBadge .euiBadge__childButton:not(:disabled):focus { 1335 text-decoration: underline; } 1336 .euiBadge .euiBadge__iconButton { 1337 -webkit-flex: 0 0 auto; 1338 flex: 0 0 auto; 1339 font-size: 0; 1340 margin-left: 4px; } 1341 .euiBadge .euiBadge__iconButton:focus { 1342 background-color: rgba(255, 255, 255, 0.8); 1343 color: #000; 1344 border-radius: 2px; } 1345 .euiBadge .euiBadge__iconButton:disabled { 1346 cursor: not-allowed; } 1347 .euiBadge .euiBadge__iconButton .euiBadge__icon { 1348 margin: 0 !important; } 1349 .euiBadge .euiBadge__text { 1350 max-width: 100%; 1351 overflow: hidden !important; 1352 text-overflow: ellipsis !important; 1353 white-space: nowrap !important; 1354 word-wrap: normal !important; 1355 -webkit-flex: 1 1 auto; 1356 flex: 1 1 auto; 1357 cursor: default; } 1358 .euiBadge .euiBadge__icon { 1359 -webkit-flex: 0 0 auto; 1360 flex: 0 0 auto; } 1361 .euiBadge .euiBadge__icon:not(:only-child) { 1362 margin-left: 4px; } 1363 .euiBadge.euiBadge--iconLeft .euiBadge__content { 1364 -webkit-flex-direction: row-reverse; 1365 flex-direction: row-reverse; } 1366 .euiBadge.euiBadge--iconLeft .euiBadge__iconButton, 1367 .euiBadge.euiBadge--iconLeft .euiBadge__icon:not(:only-child) { 1368 margin-right: 4px; 1369 margin-left: 0; } 1370 1371.euiBadge-isClickable:not(:disabled):hover, .euiBadge-isClickable:not(:disabled):focus { 1372 text-decoration: underline; } 1373 1374.euiBadge-isClickable.euiBadge-isDisabled { 1375 cursor: not-allowed; } 1376 1377.euiBadge-isClickable:focus { 1378 -webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important; 1379 animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important; } 1380 1381.euiBadge-isClickable .euiBadge__text { 1382 cursor: inherit; } 1383 1384.euiBadge--hollow { 1385 background-color: #1D1E24; 1386 border-color: #52555e; 1387 color: #DFE5EF; } 1388 1389.euiBadgeGroup__item { 1390 display: inline-block; 1391 max-width: 100%; } 1392 1393.euiBadgeGroup--gutterExtraSmall { 1394 margin: -2px; } 1395 .euiBadgeGroup--gutterExtraSmall > .euiBadgeGroup__item { 1396 margin: 2px; 1397 max-width: calc(100% - 4px); } 1398 1399.euiBadgeGroup--gutterSmall { 1400 margin: -4px; } 1401 .euiBadgeGroup--gutterSmall > .euiBadgeGroup__item { 1402 margin: 4px; 1403 max-width: calc(100% - 8px); } 1404 1405.euiBetaBadge { 1406 display: inline-block; 1407 padding: 0 16px; 1408 border-radius: 24px; 1409 box-shadow: inset 0 0 0 1px #343741; 1410 vertical-align: super; 1411 font-size: 12px; 1412 font-weight: 700; 1413 text-transform: uppercase; 1414 letter-spacing: .05em; 1415 line-height: 24px; 1416 text-align: center; 1417 white-space: nowrap; 1418 cursor: default; } 1419 .euiBetaBadge:focus { 1420 -webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important; 1421 animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important; 1422 outline-color: #FFF; 1423 outline-offset: 2px; } 1424 .euiBetaBadge:not(.euiBetaBadge--hollow) { 1425 box-shadow: none; } 1426 .euiBetaBadge.euiBetaBadge--small { 1427 font-size: 10px; 1428 font-size: 0.625rem; 1429 line-height: 20px; 1430 padding: 0 12px; } 1431 1432.euiBetaBadge--iconOnly { 1433 padding: 0; 1434 width: 24px; } 1435 .euiBetaBadge--iconOnly .euiBetaBadge__icon { 1436 position: relative; 1437 -webkit-transform: translate(0, -1px); 1438 transform: translate(0, -1px); } 1439 .euiBetaBadge--iconOnly.euiBetaBadge--small { 1440 width: 20px; 1441 padding: 0; } 1442 1443.euiBetaBadge--singleLetter { 1444 padding: 0; 1445 width: 24px; } 1446 .euiBetaBadge--singleLetter.euiBetaBadge--small { 1447 width: 20px; 1448 padding: 0; } 1449 1450.euiBetaBadge--subdued { 1451 background: #71737a; 1452 color: #FFF; } 1453 .euiBetaBadge--subdued.euiBetaBadge-isClickable { 1454 color: #FFF; } 1455 1456.euiBetaBadge--hollow.euiBetaBadge-isClickable { 1457 color: #FFF; } 1458 1459.euiBetaBadge--accent { 1460 background: #F990C0; 1461 color: #000; } 1462 .euiBetaBadge--accent.euiBetaBadge-isClickable { 1463 color: #000; } 1464 1465.euiNotificationBadge { 1466 -webkit-flex-shrink: 0; 1467 flex-shrink: 0; 1468 display: inline-block; 1469 border-radius: 4px; 1470 font-size: 12px; 1471 font-weight: 500; 1472 line-height: 16px; 1473 height: 16px; 1474 min-width: 16px; 1475 padding-left: 4px; 1476 padding-right: 4px; 1477 vertical-align: middle; 1478 text-align: center; 1479 transition: all 150ms ease-in; 1480 cursor: default; 1481 background: #F990C0; 1482 color: #000; } 1483 1484.euiNotificationBadge--medium { 1485 line-height: 20px; 1486 height: 20px; 1487 min-width: 24px; } 1488 1489.euiNotificationBadge--subdued { 1490 background: #71737a; 1491 color: #FFF; } 1492 1493.euiBasicTable-loading { 1494 position: relative; } 1495 .euiBasicTable-loading tbody { 1496 overflow: hidden; } 1497 .euiBasicTable-loading tbody:before { 1498 position: absolute; 1499 content: ''; 1500 width: 100%; 1501 height: 2px; 1502 background-color: #1BA9F5; 1503 -webkit-animation: euiBasicTableLoading 1000ms linear; 1504 animation: euiBasicTableLoading 1000ms linear; 1505 -webkit-animation-iteration-count: infinite; 1506 animation-iteration-count: infinite; } 1507 1508@-webkit-keyframes euiBasicTableLoading { 1509 from { 1510 left: 0; 1511 width: 0; } 1512 20% { 1513 left: 0; 1514 width: 40%; } 1515 80% { 1516 left: 60%; 1517 width: 40%; } 1518 100% { 1519 left: 100%; 1520 width: 0; } } 1521 1522@keyframes euiBasicTableLoading { 1523 from { 1524 left: 0; 1525 width: 0; } 1526 20% { 1527 left: 0; 1528 width: 40%; } 1529 80% { 1530 left: 60%; 1531 width: 40%; } 1532 100% { 1533 left: 100%; 1534 width: 0; } } 1535 1536.euiBeacon { 1537 position: relative; 1538 background-color: #54B399; 1539 border-radius: 50%; } 1540 .euiBeacon:before, .euiBeacon:after { 1541 position: absolute; 1542 content: ''; 1543 height: 100%; 1544 width: 100%; 1545 left: 0; 1546 top: 0; 1547 background-color: transparent; 1548 border-radius: 50%; 1549 box-shadow: 0 0 1px 1px #54B399; } 1550 .euiBeacon:before { 1551 -webkit-animation: euiBeaconPulseLarge 2.5s infinite ease-out; 1552 animation: euiBeaconPulseLarge 2.5s infinite ease-out; } 1553 .euiBeacon:after { 1554 -webkit-animation: euiBeaconPulseSmall 2.5s infinite ease-out .25s; 1555 animation: euiBeaconPulseSmall 2.5s infinite ease-out .25s; } 1556 1557@-webkit-keyframes euiBeaconPulseLarge { 1558 0% { 1559 -webkit-transform: scale(0.1); 1560 transform: scale(0.1); 1561 opacity: 1; } 1562 70% { 1563 -webkit-transform: scale(3); 1564 transform: scale(3); 1565 opacity: 0; } 1566 100% { 1567 opacity: 0; } } 1568 1569@keyframes euiBeaconPulseLarge { 1570 0% { 1571 -webkit-transform: scale(0.1); 1572 transform: scale(0.1); 1573 opacity: 1; } 1574 70% { 1575 -webkit-transform: scale(3); 1576 transform: scale(3); 1577 opacity: 0; } 1578 100% { 1579 opacity: 0; } } 1580 1581@-webkit-keyframes euiBeaconPulseSmall { 1582 0% { 1583 -webkit-transform: scale(0.1); 1584 transform: scale(0.1); 1585 opacity: 1; } 1586 70% { 1587 -webkit-transform: scale(2); 1588 transform: scale(2); 1589 opacity: 0; } 1590 100% { 1591 opacity: 0; } } 1592 1593@keyframes euiBeaconPulseSmall { 1594 0% { 1595 -webkit-transform: scale(0.1); 1596 transform: scale(0.1); 1597 opacity: 1; } 1598 70% { 1599 -webkit-transform: scale(2); 1600 transform: scale(2); 1601 opacity: 0; } 1602 100% { 1603 opacity: 0; } } 1604 1605.euiBottomBar { 1606 box-shadow: 0 0 12px -1px rgba(0, 0, 0, 0.2), 0 0 4px -1px rgba(0, 0, 0, 0.2), 0 0 2px 0 rgba(0, 0, 0, 0.2); 1607 background: #131317; 1608 color: #FFF; } 1609 @media screen and (prefers-reduced-motion: no-preference) { 1610 .euiBottomBar { 1611 -webkit-animation: euiBottomBarAppear 350ms cubic-bezier(0.694, 0.0482, 0.335, 1); 1612 animation: euiBottomBarAppear 350ms cubic-bezier(0.694, 0.0482, 0.335, 1); } } 1613 1614.euiBottomBar--fixed { 1615 position: fixed; 1616 z-index: 998; } 1617 1618.euiBottomBar--sticky { 1619 position: -webkit-sticky; 1620 position: sticky; 1621 z-index: 998; } 1622 1623.euiBottomBar--paddingSmall { 1624 padding: 8px; } 1625 1626.euiBottomBar--paddingMedium { 1627 padding: 16px; } 1628 1629.euiBottomBar--paddingLarge { 1630 padding: 24px; } 1631 1632@-webkit-keyframes euiBottomBarAppear { 1633 0% { 1634 -webkit-transform: translateY(100%); 1635 transform: translateY(100%); 1636 opacity: 0; } 1637 100% { 1638 -webkit-transform: translateY(0%); 1639 transform: translateY(0%); 1640 opacity: 1; } } 1641 1642@keyframes euiBottomBarAppear { 1643 0% { 1644 -webkit-transform: translateY(100%); 1645 transform: translateY(100%); 1646 opacity: 0; } 1647 100% { 1648 -webkit-transform: translateY(0%); 1649 transform: translateY(0%); 1650 opacity: 1; } } 1651 1652.euiButton { 1653 display: inline-block; 1654 -webkit-appearance: none; 1655 -moz-appearance: none; 1656 appearance: none; 1657 cursor: pointer; 1658 height: 40px; 1659 line-height: 40px; 1660 text-align: center; 1661 white-space: nowrap; 1662 max-width: 100%; 1663 vertical-align: middle; 1664 font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 1665 font-weight: 400; 1666 letter-spacing: -.005em; 1667 -webkit-text-size-adjust: 100%; 1668 -ms-text-size-adjust: 100%; 1669 -webkit-font-kerning: normal; 1670 font-kerning: normal; 1671 font-size: 16px; 1672 font-size: 1rem; 1673 line-height: 1.5; 1674 text-decoration: none; 1675 border: solid 1px transparent; 1676 box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3); 1677 border-radius: 4px; 1678 min-width: 112px; } 1679 @media screen and (prefers-reduced-motion: no-preference) { 1680 .euiButton { 1681 transition: background 250ms ease-in-out, -webkit-transform 250ms ease-in-out; 1682 transition: transform 250ms ease-in-out, background 250ms ease-in-out; 1683 transition: transform 250ms ease-in-out, background 250ms ease-in-out, -webkit-transform 250ms ease-in-out; } 1684 .euiButton:hover:not([class*='isDisabled']) { 1685 -webkit-transform: translateY(-1px); 1686 transform: translateY(-1px); } 1687 .euiButton:focus { 1688 -webkit-animation: euiButtonActive 250ms cubic-bezier(0.34, 1.61, 0.7, 1); 1689 animation: euiButtonActive 250ms cubic-bezier(0.34, 1.61, 0.7, 1); } 1690 .euiButton:active:not([class*='isDisabled']) { 1691 -webkit-transform: translateY(1px); 1692 transform: translateY(1px); } } 1693 .euiButton:hover:not([class*='isDisabled']), .euiButton:focus { 1694 text-decoration: underline; } 1695 .euiButton .euiButton__content { 1696 padding: 0 12px; } 1697 .euiButton .euiButton__text { 1698 text-overflow: ellipsis; 1699 overflow: hidden; } 1700 .euiButton.euiButton--small { 1701 height: 32px; 1702 line-height: 32px; } 1703 .euiButton:hover, .euiButton:active { 1704 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 2px 2px -1px rgba(0, 0, 0, 0.3); } 1705 .euiButton:not([class*='isDisabled']):hover, .euiButton:not([class*='isDisabled']):focus, .euiButton:not([class*='isDisabled']):focus-within { 1706 background-color: rgba(27, 169, 245, 0.1); } 1707 .euiButton.euiButton-isDisabled { 1708 pointer-events: auto; 1709 cursor: not-allowed; 1710 color: #4c4e51; 1711 border-color: #434548; } 1712 .euiButton.euiButton-isDisabled .euiButtonContent__icon { 1713 fill: currentColor; } 1714 .euiButton.euiButton-isDisabled .euiButtonContent__spinner { 1715 border-color: #1BA9F5 currentColor currentColor currentColor; } 1716 .euiButton.euiButton-isDisabled.euiButton--fill { 1717 color: #757678; 1718 background-color: #434548; 1719 border-color: #434548; } 1720 .euiButton.euiButton-isDisabled.euiButton--fill:hover, .euiButton.euiButton-isDisabled.euiButton--fill:focus, .euiButton.euiButton-isDisabled.euiButton--fill:focus-within { 1721 background-color: #434548; 1722 border-color: #434548; } 1723 .euiButton.euiButton-isDisabled:hover, .euiButton.euiButton-isDisabled:focus, .euiButton.euiButton-isDisabled:focus-within { 1724 box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3); 1725 text-decoration: none; } 1726 1727.euiButton--primary { 1728 color: #1BA9F5; 1729 border-color: #1BA9F5; } 1730 .euiButton--primary.euiButton--fill { 1731 background-color: #1BA9F5; 1732 border-color: #1BA9F5; 1733 color: #000; } 1734 .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 { 1735 background-color: #0a9dec; 1736 border-color: #0a9dec; } 1737 .euiButton--primary:not([class*='isDisabled']) { 1738 box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3); } 1739 .euiButton--primary:not([class*='isDisabled']):hover, .euiButton--primary:not([class*='isDisabled']):focus, .euiButton--primary:not([class*='isDisabled']):focus-within { 1740 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 2px 2px -1px rgba(0, 0, 0, 0.3); 1741 background-color: rgba(27, 169, 245, 0.1); } 1742 1743.euiButton--accent { 1744 color: #F990C0; 1745 border-color: #F990C0; } 1746 .euiButton--accent.euiButton--fill { 1747 background-color: #F990C0; 1748 border-color: #F990C0; 1749 color: #000; } 1750 .euiButton--accent.euiButton--fill:not([class*='isDisabled']):hover, .euiButton--accent.euiButton--fill:not([class*='isDisabled']):focus, .euiButton--accent.euiButton--fill:not([class*='isDisabled']):focus-within { 1751 background-color: #f878b2; 1752 border-color: #f878b2; } 1753 .euiButton--accent:not([class*='isDisabled']) { 1754 box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3); } 1755 .euiButton--accent:not([class*='isDisabled']):hover, .euiButton--accent:not([class*='isDisabled']):focus, .euiButton--accent:not([class*='isDisabled']):focus-within { 1756 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 2px 2px -1px rgba(0, 0, 0, 0.3); 1757 background-color: rgba(249, 144, 192, 0.1); } 1758 1759.euiButton--secondary { 1760 color: #7DE2D1; 1761 border-color: #7DE2D1; } 1762 .euiButton--secondary.euiButton--fill { 1763 background-color: #7DE2D1; 1764 border-color: #7DE2D1; 1765 color: #000; } 1766 .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 { 1767 background-color: #68ddca; 1768 border-color: #68ddca; } 1769 .euiButton--secondary:not([class*='isDisabled']) { 1770 box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3); } 1771 .euiButton--secondary:not([class*='isDisabled']):hover, .euiButton--secondary:not([class*='isDisabled']):focus, .euiButton--secondary:not([class*='isDisabled']):focus-within { 1772 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 2px 2px -1px rgba(0, 0, 0, 0.3); 1773 background-color: rgba(125, 226, 209, 0.1); } 1774 1775.euiButton--success { 1776 color: #7DE2D1; 1777 border-color: #7DE2D1; } 1778 .euiButton--success.euiButton--fill { 1779 background-color: #7DE2D1; 1780 border-color: #7DE2D1; 1781 color: #000; } 1782 .euiButton--success.euiButton--fill:not([class*='isDisabled']):hover, .euiButton--success.euiButton--fill:not([class*='isDisabled']):focus, .euiButton--success.euiButton--fill:not([class*='isDisabled']):focus-within { 1783 background-color: #68ddca; 1784 border-color: #68ddca; } 1785 .euiButton--success:not([class*='isDisabled']) { 1786 box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3); } 1787 .euiButton--success:not([class*='isDisabled']):hover, .euiButton--success:not([class*='isDisabled']):focus, .euiButton--success:not([class*='isDisabled']):focus-within { 1788 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 2px 2px -1px rgba(0, 0, 0, 0.3); 1789 background-color: rgba(125, 226, 209, 0.1); } 1790 1791.euiButton--warning { 1792 color: #FFCE7A; 1793 border-color: #FFCE7A; } 1794 .euiButton--warning.euiButton--fill { 1795 background-color: #FFCE7A; 1796 border-color: #FFCE7A; 1797 color: #000; } 1798 .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 { 1799 background-color: #ffc561; 1800 border-color: #ffc561; } 1801 .euiButton--warning:not([class*='isDisabled']) { 1802 box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3); } 1803 .euiButton--warning:not([class*='isDisabled']):hover, .euiButton--warning:not([class*='isDisabled']):focus, .euiButton--warning:not([class*='isDisabled']):focus-within { 1804 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 2px 2px -1px rgba(0, 0, 0, 0.3); 1805 background-color: rgba(255, 206, 122, 0.1); } 1806 1807.euiButton--danger { 1808 color: #F66; 1809 border-color: #F66; } 1810 .euiButton--danger.euiButton--fill { 1811 background-color: #F66; 1812 border-color: #F66; 1813 color: #000; } 1814 .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 { 1815 background-color: #ff4d4d; 1816 border-color: #ff4d4d; } 1817 .euiButton--danger:not([class*='isDisabled']) { 1818 box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3); } 1819 .euiButton--danger:not([class*='isDisabled']):hover, .euiButton--danger:not([class*='isDisabled']):focus, .euiButton--danger:not([class*='isDisabled']):focus-within { 1820 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 2px 2px -1px rgba(0, 0, 0, 0.3); 1821 background-color: rgba(255, 102, 102, 0.1); } 1822 1823.euiButton--subdued { 1824 color: #7a7f89; 1825 border-color: #7a7f89; } 1826 .euiButton--subdued.euiButton--fill { 1827 background-color: #7a7f89; 1828 border-color: #7a7f89; 1829 color: #000; } 1830 .euiButton--subdued.euiButton--fill:not([class*='isDisabled']):hover, .euiButton--subdued.euiButton--fill:not([class*='isDisabled']):focus, .euiButton--subdued.euiButton--fill:not([class*='isDisabled']):focus-within { 1831 background-color: #6e727c; 1832 border-color: #6e727c; } 1833 .euiButton--subdued:not([class*='isDisabled']) { 1834 box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3); } 1835 .euiButton--subdued:not([class*='isDisabled']):hover, .euiButton--subdued:not([class*='isDisabled']):focus, .euiButton--subdued:not([class*='isDisabled']):focus-within { 1836 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 2px 2px -1px rgba(0, 0, 0, 0.3); 1837 background-color: rgba(122, 127, 137, 0.1); } 1838 1839.euiButton--ghost { 1840 color: #FFF; 1841 border-color: #FFF; } 1842 .euiButton--ghost.euiButton--fill { 1843 background-color: #FFF; 1844 border-color: #FFF; 1845 color: #000; } 1846 .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 { 1847 background-color: #f2f2f2; 1848 border-color: #f2f2f2; } 1849 .euiButton--ghost:not([class*='isDisabled']) { 1850 box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3); } 1851 .euiButton--ghost:not([class*='isDisabled']):hover, .euiButton--ghost:not([class*='isDisabled']):focus, .euiButton--ghost:not([class*='isDisabled']):focus-within { 1852 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 2px 2px -1px rgba(0, 0, 0, 0.3); 1853 background-color: rgba(255, 255, 255, 0.1); } 1854 1855.euiButton--text { 1856 color: #DFE5EF; 1857 border-color: #98A2B3; } 1858 .euiButton--text.euiButton--fill { 1859 background-color: #98A2B3; 1860 border-color: #98A2B3; 1861 color: #000; } 1862 .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 { 1863 background-color: #8995a8; 1864 border-color: #8995a8; } 1865 .euiButton--text:not([class*='isDisabled']) { 1866 box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3); } 1867 .euiButton--text:not([class*='isDisabled']):hover, .euiButton--text:not([class*='isDisabled']):focus, .euiButton--text:not([class*='isDisabled']):focus-within { 1868 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 2px 2px -1px rgba(0, 0, 0, 0.3); 1869 background-color: rgba(152, 162, 179, 0.1); } 1870 1871.euiButton.euiButton-isDisabled.euiButton--ghost, .euiButton.euiButton-isDisabled.euiButton--ghost:hover, .euiButton.euiButton-isDisabled.euiButton--ghost:focus, .euiButton.euiButton-isDisabled.euiButton--ghost:focus-within { 1872 box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3); 1873 color: #343741; 1874 border-color: #343741; } 1875 1876.euiButton.euiButton-isDisabled.euiButton--ghost.euiButton--fill { 1877 background-color: #343741; 1878 color: #62656d; } 1879 1880.euiButton--fullWidth { 1881 display: block; 1882 width: 100%; } 1883 1884.euiButtonContent { 1885 height: 100%; 1886 width: 100%; 1887 vertical-align: middle; 1888 display: -webkit-flex; 1889 display: flex; 1890 -webkit-justify-content: center; 1891 justify-content: center; 1892 -webkit-align-items: center; 1893 align-items: center; } 1894 .euiButtonContent .euiButtonContent__icon, 1895 .euiButtonContent .euiButtonContent__spinner { 1896 -webkit-flex-shrink: 0; 1897 flex-shrink: 0; } 1898 .euiButtonContent > * + * { 1899 -webkit-margin-start: 8px; 1900 margin-inline-start: 8px; } 1901 1902.euiButtonContent--iconRight { 1903 height: 100%; 1904 width: 100%; 1905 vertical-align: middle; 1906 -webkit-flex-direction: row-reverse; 1907 flex-direction: row-reverse; } 1908 .euiButtonContent--iconRight .euiButtonContent__icon, 1909 .euiButtonContent--iconRight .euiButtonContent__spinner { 1910 -webkit-flex-shrink: 0; 1911 flex-shrink: 0; } 1912 .euiButtonContent--iconRight > * + * { 1913 -webkit-margin-start: 0; 1914 margin-inline-start: 0; 1915 -webkit-margin-end: 8px; 1916 margin-inline-end: 8px; } 1917 1918/** 1919 * 1. We don't want any of the animations that come inherited from the mixin. 1920 * These should act like normal links instead. 1921 * 2. Change the easing, quickness to not bounce so lighter backgrounds don't flash 1922 */ 1923.euiButtonEmpty { 1924 display: inline-block; 1925 -webkit-appearance: none; 1926 -moz-appearance: none; 1927 appearance: none; 1928 cursor: pointer; 1929 height: 40px; 1930 line-height: 40px; 1931 text-align: center; 1932 white-space: nowrap; 1933 max-width: 100%; 1934 vertical-align: middle; 1935 font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 1936 font-weight: 400; 1937 letter-spacing: -.005em; 1938 -webkit-text-size-adjust: 100%; 1939 -ms-text-size-adjust: 100%; 1940 -webkit-font-kerning: normal; 1941 font-kerning: normal; 1942 font-size: 16px; 1943 font-size: 1rem; 1944 line-height: 1.5; 1945 text-decoration: none; 1946 border: solid 1px transparent; 1947 border-color: transparent; 1948 background-color: transparent; 1949 box-shadow: none; 1950 -webkit-transform: none !important; 1951 transform: none !important; 1952 /* 1 */ 1953 -webkit-animation: none !important; 1954 animation: none !important; 1955 /* 1 */ 1956 transition-timing-function: ease-in; 1957 /* 2 */ 1958 transition-duration: 150ms; 1959 /* 2 */ } 1960 @media screen and (prefers-reduced-motion: no-preference) { 1961 .euiButtonEmpty { 1962 transition: background 250ms ease-in-out, -webkit-transform 250ms ease-in-out; 1963 transition: transform 250ms ease-in-out, background 250ms ease-in-out; 1964 transition: transform 250ms ease-in-out, background 250ms ease-in-out, -webkit-transform 250ms ease-in-out; } 1965 .euiButtonEmpty:hover:not([class*='isDisabled']) { 1966 -webkit-transform: translateY(-1px); 1967 transform: translateY(-1px); } 1968 .euiButtonEmpty:focus { 1969 -webkit-animation: euiButtonActive 250ms cubic-bezier(0.34, 1.61, 0.7, 1); 1970 animation: euiButtonActive 250ms cubic-bezier(0.34, 1.61, 0.7, 1); } 1971 .euiButtonEmpty:active:not([class*='isDisabled']) { 1972 -webkit-transform: translateY(1px); 1973 transform: translateY(1px); } } 1974 .euiButtonEmpty:hover:not([class*='isDisabled']), .euiButtonEmpty:focus { 1975 text-decoration: underline; } 1976 .euiButtonEmpty .euiButtonEmpty__content { 1977 padding: 0 8px; } 1978 .euiButtonEmpty .euiButtonEmpty__text { 1979 text-overflow: ellipsis; 1980 overflow: hidden; } 1981 .euiButtonEmpty.euiButtonEmpty--small { 1982 height: 32px; } 1983 .euiButtonEmpty.euiButtonEmpty--xSmall { 1984 height: 24px; 1985 font-size: 14px; } 1986 .euiButtonEmpty:disabled { 1987 pointer-events: auto; 1988 cursor: not-allowed; 1989 color: #4c4e51; } 1990 .euiButtonEmpty:disabled .euiButtonContent__icon { 1991 fill: currentColor; } 1992 .euiButtonEmpty:disabled .euiButtonContent__spinner { 1993 border-color: #1BA9F5 currentColor currentColor currentColor; } 1994 .euiButtonEmpty:disabled:focus { 1995 background-color: transparent; } 1996 .euiButtonEmpty:disabled:hover, .euiButtonEmpty:disabled:focus { 1997 text-decoration: none; } 1998 1999.euiButtonEmpty--flushLeft .euiButtonEmpty__content, 2000.euiButtonEmpty--flushRight .euiButtonEmpty__content, 2001.euiButtonEmpty--flushBoth .euiButtonEmpty__content { 2002 padding-left: 0; 2003 padding-right: 0; } 2004 2005.euiButtonEmpty--flushLeft { 2006 margin-right: 8px; } 2007 2008.euiButtonEmpty--flushRight { 2009 margin-left: 8px; } 2010 2011.euiButtonEmpty--primary { 2012 color: #1BA9F5; } 2013 .euiButtonEmpty--primary:focus { 2014 background-color: rgba(27, 169, 245, 0.1); } 2015 2016.euiButtonEmpty--danger { 2017 color: #F66; } 2018 .euiButtonEmpty--danger:focus { 2019 background-color: rgba(255, 102, 102, 0.1); } 2020 2021.euiButtonEmpty--disabled { 2022 color: #898a8b; } 2023 .euiButtonEmpty--disabled:focus { 2024 background-color: rgba(76, 78, 81, 0.1); } 2025 .euiButtonEmpty--disabled:hover { 2026 cursor: not-allowed; } 2027 2028.euiButtonEmpty--ghost { 2029 color: #FFF; } 2030 .euiButtonEmpty--ghost:focus { 2031 background-color: rgba(255, 255, 255, 0.1); } 2032 2033.euiButtonEmpty--text { 2034 color: #DFE5EF; } 2035 .euiButtonEmpty--text:focus { 2036 background-color: rgba(223, 229, 239, 0.1); } 2037 2038.euiButtonEmpty--success { 2039 color: #7DE2D1; } 2040 .euiButtonEmpty--success:focus { 2041 background-color: rgba(125, 226, 209, 0.1); } 2042 2043.euiButtonEmpty--warning { 2044 color: #FFCE7A; } 2045 .euiButtonEmpty--warning:focus { 2046 background-color: rgba(255, 206, 122, 0.1); } 2047 2048.euiButtonIcon { 2049 display: inline-block; 2050 -webkit-appearance: none; 2051 -moz-appearance: none; 2052 appearance: none; 2053 cursor: pointer; 2054 height: 40px; 2055 line-height: 40px; 2056 text-align: center; 2057 white-space: nowrap; 2058 max-width: 100%; 2059 vertical-align: middle; 2060 font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 2061 font-weight: 400; 2062 letter-spacing: -.005em; 2063 -webkit-text-size-adjust: 100%; 2064 -ms-text-size-adjust: 100%; 2065 -webkit-font-kerning: normal; 2066 font-kerning: normal; 2067 font-size: 16px; 2068 font-size: 1rem; 2069 line-height: 1.5; 2070 text-decoration: none; 2071 border: solid 1px transparent; 2072 box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3); 2073 border-radius: 4px; 2074 width: 40px; 2075 display: -webkit-inline-flex; 2076 display: inline-flex; 2077 -webkit-align-items: center; 2078 align-items: center; 2079 -webkit-justify-content: space-around; 2080 justify-content: space-around; } 2081 @media screen and (prefers-reduced-motion: no-preference) { 2082 .euiButtonIcon { 2083 transition: background 250ms ease-in-out, -webkit-transform 250ms ease-in-out; 2084 transition: transform 250ms ease-in-out, background 250ms ease-in-out; 2085 transition: transform 250ms ease-in-out, background 250ms ease-in-out, -webkit-transform 250ms ease-in-out; } 2086 .euiButtonIcon:hover:not([class*='isDisabled']) { 2087 -webkit-transform: translateY(-1px); 2088 transform: translateY(-1px); } 2089 .euiButtonIcon:focus { 2090 -webkit-animation: euiButtonActive 250ms cubic-bezier(0.34, 1.61, 0.7, 1); 2091 animation: euiButtonActive 250ms cubic-bezier(0.34, 1.61, 0.7, 1); } 2092 .euiButtonIcon:active:not([class*='isDisabled']) { 2093 -webkit-transform: translateY(1px); 2094 transform: translateY(1px); } } 2095 .euiButtonIcon:hover:not([class*='isDisabled']), .euiButtonIcon:focus { 2096 text-decoration: underline; } 2097 .euiButtonIcon > svg { 2098 pointer-events: none; } 2099 .euiButtonIcon.euiButtonIcon--empty { 2100 box-shadow: none !important; 2101 border: none; } 2102 .euiButtonIcon.euiButtonIcon-isDisabled { 2103 pointer-events: auto; 2104 cursor: not-allowed; 2105 color: #4c4e51; 2106 border-color: #434548; } 2107 .euiButtonIcon.euiButtonIcon-isDisabled .euiButtonContent__icon { 2108 fill: currentColor; } 2109 .euiButtonIcon.euiButtonIcon-isDisabled .euiButtonContent__spinner { 2110 border-color: #1BA9F5 currentColor currentColor currentColor; } 2111 .euiButtonIcon.euiButtonIcon-isDisabled.euiButtonIcon--fill { 2112 color: #757678; 2113 background-color: #434548; 2114 border-color: #434548; } 2115 .euiButtonIcon.euiButtonIcon-isDisabled.euiButtonIcon--fill:hover, .euiButtonIcon.euiButtonIcon-isDisabled.euiButtonIcon--fill:focus, .euiButtonIcon.euiButtonIcon-isDisabled.euiButtonIcon--fill:focus-within { 2116 background-color: #434548; 2117 border-color: #434548; } 2118 .euiButtonIcon.euiButtonIcon-isDisabled:hover, .euiButtonIcon.euiButtonIcon-isDisabled:focus, .euiButtonIcon.euiButtonIcon-isDisabled:focus-within { 2119 box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3); 2120 text-decoration: none; } 2121 2122.euiButtonIcon--xSmall { 2123 height: 24px; 2124 width: 24px; } 2125 2126.euiButtonIcon--small { 2127 height: 32px; 2128 width: 32px; } 2129 2130.euiButtonIcon--primary { 2131 color: #1BA9F5; 2132 border-color: #1BA9F5; } 2133 .euiButtonIcon--primary.euiButtonIcon--fill { 2134 background-color: #1BA9F5; 2135 border-color: #1BA9F5; 2136 color: #000; } 2137 .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 { 2138 background-color: #0a9dec; 2139 border-color: #0a9dec; } 2140 .euiButtonIcon--primary:not([class*='isDisabled']) { 2141 box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3); } 2142 .euiButtonIcon--primary:not([class*='isDisabled']):hover, .euiButtonIcon--primary:not([class*='isDisabled']):focus, .euiButtonIcon--primary:not([class*='isDisabled']):focus-within { 2143 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 2px 2px -1px rgba(0, 0, 0, 0.3); 2144 background-color: rgba(27, 169, 245, 0.1); } 2145 2146.euiButtonIcon--accent { 2147 color: #F990C0; 2148 border-color: #F990C0; } 2149 .euiButtonIcon--accent.euiButtonIcon--fill { 2150 background-color: #F990C0; 2151 border-color: #F990C0; 2152 color: #000; } 2153 .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 { 2154 background-color: #f878b2; 2155 border-color: #f878b2; } 2156 .euiButtonIcon--accent:not([class*='isDisabled']) { 2157 box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3); } 2158 .euiButtonIcon--accent:not([class*='isDisabled']):hover, .euiButtonIcon--accent:not([class*='isDisabled']):focus, .euiButtonIcon--accent:not([class*='isDisabled']):focus-within { 2159 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 2px 2px -1px rgba(0, 0, 0, 0.3); 2160 background-color: rgba(249, 144, 192, 0.1); } 2161 2162.euiButtonIcon--secondary { 2163 color: #7DE2D1; 2164 border-color: #7DE2D1; } 2165 .euiButtonIcon--secondary.euiButtonIcon--fill { 2166 background-color: #7DE2D1; 2167 border-color: #7DE2D1; 2168 color: #000; } 2169 .euiButtonIcon--secondary.euiButtonIcon--fill:not([class*='isDisabled']):hover, .euiButtonIcon--secondary.euiButtonIcon--fill:not([class*='isDisabled']):focus, .euiButtonIcon--secondary.euiButtonIcon--fill:not([class*='isDisabled']):focus-within { 2170 background-color: #68ddca; 2171 border-color: #68ddca; } 2172 .euiButtonIcon--secondary:not([class*='isDisabled']) { 2173 box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3); } 2174 .euiButtonIcon--secondary:not([class*='isDisabled']):hover, .euiButtonIcon--secondary:not([class*='isDisabled']):focus, .euiButtonIcon--secondary:not([class*='isDisabled']):focus-within { 2175 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 2px 2px -1px rgba(0, 0, 0, 0.3); 2176 background-color: rgba(125, 226, 209, 0.1); } 2177 2178.euiButtonIcon--success { 2179 color: #7DE2D1; 2180 border-color: #7DE2D1; } 2181 .euiButtonIcon--success.euiButtonIcon--fill { 2182 background-color: #7DE2D1; 2183 border-color: #7DE2D1; 2184 color: #000; } 2185 .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 { 2186 background-color: #68ddca; 2187 border-color: #68ddca; } 2188 .euiButtonIcon--success:not([class*='isDisabled']) { 2189 box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3); } 2190 .euiButtonIcon--success:not([class*='isDisabled']):hover, .euiButtonIcon--success:not([class*='isDisabled']):focus, .euiButtonIcon--success:not([class*='isDisabled']):focus-within { 2191 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 2px 2px -1px rgba(0, 0, 0, 0.3); 2192 background-color: rgba(125, 226, 209, 0.1); } 2193 2194.euiButtonIcon--warning { 2195 color: #FFCE7A; 2196 border-color: #FFCE7A; } 2197 .euiButtonIcon--warning.euiButtonIcon--fill { 2198 background-color: #FFCE7A; 2199 border-color: #FFCE7A; 2200 color: #000; } 2201 .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 { 2202 background-color: #ffc561; 2203 border-color: #ffc561; } 2204 .euiButtonIcon--warning:not([class*='isDisabled']) { 2205 box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3); } 2206 .euiButtonIcon--warning:not([class*='isDisabled']):hover, .euiButtonIcon--warning:not([class*='isDisabled']):focus, .euiButtonIcon--warning:not([class*='isDisabled']):focus-within { 2207 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 2px 2px -1px rgba(0, 0, 0, 0.3); 2208 background-color: rgba(255, 206, 122, 0.1); } 2209 2210.euiButtonIcon--danger { 2211 color: #F66; 2212 border-color: #F66; } 2213 .euiButtonIcon--danger.euiButtonIcon--fill { 2214 background-color: #F66; 2215 border-color: #F66; 2216 color: #000; } 2217 .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 { 2218 background-color: #ff4d4d; 2219 border-color: #ff4d4d; } 2220 .euiButtonIcon--danger:not([class*='isDisabled']) { 2221 box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3); } 2222 .euiButtonIcon--danger:not([class*='isDisabled']):hover, .euiButtonIcon--danger:not([class*='isDisabled']):focus, .euiButtonIcon--danger:not([class*='isDisabled']):focus-within { 2223 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 2px 2px -1px rgba(0, 0, 0, 0.3); 2224 background-color: rgba(255, 102, 102, 0.1); } 2225 2226.euiButtonIcon--subdued { 2227 color: #7a7f89; 2228 border-color: #7a7f89; } 2229 .euiButtonIcon--subdued.euiButtonIcon--fill { 2230 background-color: #7a7f89; 2231 border-color: #7a7f89; 2232 color: #000; } 2233 .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 { 2234 background-color: #6e727c; 2235 border-color: #6e727c; } 2236 .euiButtonIcon--subdued:not([class*='isDisabled']) { 2237 box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3); } 2238 .euiButtonIcon--subdued:not([class*='isDisabled']):hover, .euiButtonIcon--subdued:not([class*='isDisabled']):focus, .euiButtonIcon--subdued:not([class*='isDisabled']):focus-within { 2239 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 2px 2px -1px rgba(0, 0, 0, 0.3); 2240 background-color: rgba(122, 127, 137, 0.1); } 2241 2242.euiButtonIcon--ghost { 2243 color: #FFF; 2244 border-color: #FFF; } 2245 .euiButtonIcon--ghost.euiButtonIcon--fill { 2246 background-color: #FFF; 2247 border-color: #FFF; 2248 color: #000; } 2249 .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 { 2250 background-color: #f2f2f2; 2251 border-color: #f2f2f2; } 2252 .euiButtonIcon--ghost:not([class*='isDisabled']) { 2253 box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3); } 2254 .euiButtonIcon--ghost:not([class*='isDisabled']):hover, .euiButtonIcon--ghost:not([class*='isDisabled']):focus, .euiButtonIcon--ghost:not([class*='isDisabled']):focus-within { 2255 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 2px 2px -1px rgba(0, 0, 0, 0.3); 2256 background-color: rgba(255, 255, 255, 0.1); } 2257 2258.euiButtonIcon--text { 2259 color: #DFE5EF; 2260 border-color: #98A2B3; } 2261 .euiButtonIcon--text.euiButtonIcon--fill { 2262 background-color: #98A2B3; 2263 border-color: #98A2B3; 2264 color: #000; } 2265 .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 { 2266 background-color: #8995a8; 2267 border-color: #8995a8; } 2268 .euiButtonIcon--text:not([class*='isDisabled']) { 2269 box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3); } 2270 .euiButtonIcon--text:not([class*='isDisabled']):hover, .euiButtonIcon--text:not([class*='isDisabled']):focus, .euiButtonIcon--text:not([class*='isDisabled']):focus-within { 2271 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 2px 2px -1px rgba(0, 0, 0, 0.3); 2272 background-color: rgba(152, 162, 179, 0.1); } 2273 2274.euiButtonIcon.euiButtonIcon-isDisabled.euiButtonIcon--ghost, .euiButtonIcon.euiButtonIcon-isDisabled.euiButtonIcon--ghost:hover, .euiButtonIcon.euiButtonIcon-isDisabled.euiButtonIcon--ghost:focus, .euiButtonIcon.euiButtonIcon-isDisabled.euiButtonIcon--ghost:focus-within { 2275 box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3); 2276 color: #343741; 2277 border-color: #343741; } 2278 2279.euiButtonIcon.euiButtonIcon-isDisabled.euiButtonIcon--ghost.euiButton--fill { 2280 background-color: #343741; 2281 color: #62656d; } 2282 2283.euiButtonGroup { 2284 display: inline-block; 2285 max-width: 100%; 2286 position: relative; } 2287 2288.euiButtonGroup--fullWidth { 2289 display: block; } 2290 .euiButtonGroup--fullWidth .euiButtonGroup__buttons { 2291 width: 100%; } 2292 .euiButtonGroup--fullWidth .euiButtonGroup__buttons .euiButtonGroupButton { 2293 -webkit-flex: 1; 2294 flex: 1; } 2295 2296.euiButtonGroup__buttons { 2297 box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3); 2298 border-radius: 5px; 2299 max-width: 100%; 2300 display: -webkit-flex; 2301 display: flex; 2302 overflow: hidden; } 2303 2304.euiButtonGroup--isDisabled .euiButtonGroup__buttons { 2305 box-shadow: none; } 2306 2307.euiButtonGroup--compressed .euiButtonGroup__buttons { 2308 box-shadow: none !important; 2309 border-radius: 2px; 2310 background-color: #16171c; 2311 height: 32px; 2312 border: 1px solid rgba(255, 255, 255, 0.1); 2313 overflow: visible; } 2314 2315.euiButtonGroupButton { 2316 display: inline-block; 2317 -webkit-appearance: none; 2318 -moz-appearance: none; 2319 appearance: none; 2320 cursor: pointer; 2321 height: 40px; 2322 line-height: 40px; 2323 text-align: center; 2324 white-space: nowrap; 2325 max-width: 100%; 2326 vertical-align: middle; 2327 font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 2328 font-weight: 400; 2329 letter-spacing: -.005em; 2330 -webkit-text-size-adjust: 100%; 2331 -ms-text-size-adjust: 100%; 2332 -webkit-font-kerning: normal; 2333 font-kerning: normal; 2334 font-size: 16px; 2335 font-size: 1rem; 2336 line-height: 1.5; 2337 transition: background-color 250ms ease-in-out, border-color 250ms ease-in-out, color 250ms ease-in-out; 2338 min-width: 0; 2339 -webkit-flex-shrink: 1; 2340 flex-shrink: 1; 2341 -webkit-flex-grow: 0; 2342 flex-grow: 0; } 2343 .euiButtonGroupButton .euiButton__content { 2344 padding: 0 12px; } 2345 .euiButtonGroupButton-isIconOnly .euiButton__content { 2346 padding: 0 8px; } 2347 .euiButtonGroupButton .euiButton__text { 2348 text-overflow: ellipsis; 2349 overflow: hidden; } 2350 .euiButtonGroupButton.euiButtonGroupButton--small { 2351 height: 32px; 2352 line-height: 32px; } 2353 .euiButtonGroupButton:not([class*='isDisabled']):hover, .euiButtonGroupButton:not([class*='isDisabled']):focus, .euiButtonGroupButton:not([class*='isDisabled']):focus-within { 2354 background-color: rgba(27, 169, 245, 0.1); 2355 text-decoration: underline; } 2356 .euiButtonGroupButton.euiButtonGroupButton-isDisabled { 2357 pointer-events: auto; 2358 cursor: not-allowed; 2359 color: #4c4e51; } 2360 .euiButtonGroupButton.euiButtonGroupButton-isDisabled .euiButtonContent__icon { 2361 fill: currentColor; } 2362 .euiButtonGroupButton.euiButtonGroupButton-isDisabled .euiButtonContent__spinner { 2363 border-color: #1BA9F5 currentColor currentColor currentColor; } 2364 .euiButtonGroupButton.euiButtonGroupButton-isDisabled.euiButtonGroupButton-isSelected { 2365 color: #757678; 2366 background-color: #434548; 2367 border-color: #434548; } 2368 .euiButtonGroupButton.euiButtonGroupButton-isDisabled.euiButtonGroupButton-isSelected:hover, .euiButtonGroupButton.euiButtonGroupButton-isDisabled.euiButtonGroupButton-isSelected:focus, .euiButtonGroupButton.euiButtonGroupButton-isDisabled.euiButtonGroupButton-isSelected:focus-within { 2369 background-color: #434548; 2370 border-color: #434548; } 2371 .euiButtonGroupButton.euiButtonGroupButton--primary:not([class*='isDisabled']) { 2372 color: #1BA9F5; } 2373 .euiButtonGroupButton.euiButtonGroupButton--primary:not([class*='isDisabled']).euiButtonGroupButton-isSelected { 2374 background-color: #1BA9F5; 2375 border-color: #1BA9F5; 2376 color: #000; } 2377 .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 { 2378 background-color: #0a9dec; 2379 border-color: #0a9dec; } 2380 .euiButtonGroupButton.euiButtonGroupButton--primary:not([class*='isDisabled']):hover, .euiButtonGroupButton.euiButtonGroupButton--primary:not([class*='isDisabled']):focus, .euiButtonGroupButton.euiButtonGroupButton--primary:not([class*='isDisabled']):focus-within { 2381 background-color: rgba(27, 169, 245, 0.1); } 2382 .euiButtonGroupButton.euiButtonGroupButton--accent:not([class*='isDisabled']) { 2383 color: #F990C0; } 2384 .euiButtonGroupButton.euiButtonGroupButton--accent:not([class*='isDisabled']).euiButtonGroupButton-isSelected { 2385 background-color: #F990C0; 2386 border-color: #F990C0; 2387 color: #000; } 2388 .euiButtonGroupButton.euiButtonGroupButton--accent:not([class*='isDisabled']).euiButtonGroupButton-isSelected:hover, .euiButtonGroupButton.euiButtonGroupButton--accent:not([class*='isDisabled']).euiButtonGroupButton-isSelected:focus, .euiButtonGroupButton.euiButtonGroupButton--accent:not([class*='isDisabled']).euiButtonGroupButton-isSelected:focus-within { 2389 background-color: #f878b2; 2390 border-color: #f878b2; } 2391 .euiButtonGroupButton.euiButtonGroupButton--accent:not([class*='isDisabled']):hover, .euiButtonGroupButton.euiButtonGroupButton--accent:not([class*='isDisabled']):focus, .euiButtonGroupButton.euiButtonGroupButton--accent:not([class*='isDisabled']):focus-within { 2392 background-color: rgba(249, 144, 192, 0.1); } 2393 .euiButtonGroupButton.euiButtonGroupButton--secondary:not([class*='isDisabled']) { 2394 color: #7DE2D1; } 2395 .euiButtonGroupButton.euiButtonGroupButton--secondary:not([class*='isDisabled']).euiButtonGroupButton-isSelected { 2396 background-color: #7DE2D1; 2397 border-color: #7DE2D1; 2398 color: #000; } 2399 .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 { 2400 background-color: #68ddca; 2401 border-color: #68ddca; } 2402 .euiButtonGroupButton.euiButtonGroupButton--secondary:not([class*='isDisabled']):hover, .euiButtonGroupButton.euiButtonGroupButton--secondary:not([class*='isDisabled']):focus, .euiButtonGroupButton.euiButtonGroupButton--secondary:not([class*='isDisabled']):focus-within { 2403 background-color: rgba(125, 226, 209, 0.1); } 2404 .euiButtonGroupButton.euiButtonGroupButton--success:not([class*='isDisabled']) { 2405 color: #7DE2D1; } 2406 .euiButtonGroupButton.euiButtonGroupButton--success:not([class*='isDisabled']).euiButtonGroupButton-isSelected { 2407 background-color: #7DE2D1; 2408 border-color: #7DE2D1; 2409 color: #000; } 2410 .euiButtonGroupButton.euiButtonGroupButton--success:not([class*='isDisabled']).euiButtonGroupButton-isSelected:hover, .euiButtonGroupButton.euiButtonGroupButton--success:not([class*='isDisabled']).euiButtonGroupButton-isSelected:focus, .euiButtonGroupButton.euiButtonGroupButton--success:not([class*='isDisabled']).euiButtonGroupButton-isSelected:focus-within { 2411 background-color: #68ddca; 2412 border-color: #68ddca; } 2413 .euiButtonGroupButton.euiButtonGroupButton--success:not([class*='isDisabled']):hover, .euiButtonGroupButton.euiButtonGroupButton--success:not([class*='isDisabled']):focus, .euiButtonGroupButton.euiButtonGroupButton--success:not([class*='isDisabled']):focus-within { 2414 background-color: rgba(125, 226, 209, 0.1); } 2415 .euiButtonGroupButton.euiButtonGroupButton--warning:not([class*='isDisabled']) { 2416 color: #FFCE7A; } 2417 .euiButtonGroupButton.euiButtonGroupButton--warning:not([class*='isDisabled']).euiButtonGroupButton-isSelected { 2418 background-color: #FFCE7A; 2419 border-color: #FFCE7A; 2420 color: #000; } 2421 .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 { 2422 background-color: #ffc561; 2423 border-color: #ffc561; } 2424 .euiButtonGroupButton.euiButtonGroupButton--warning:not([class*='isDisabled']):hover, .euiButtonGroupButton.euiButtonGroupButton--warning:not([class*='isDisabled']):focus, .euiButtonGroupButton.euiButtonGroupButton--warning:not([class*='isDisabled']):focus-within { 2425 background-color: rgba(255, 206, 122, 0.1); } 2426 .euiButtonGroupButton.euiButtonGroupButton--danger:not([class*='isDisabled']) { 2427 color: #F66; } 2428 .euiButtonGroupButton.euiButtonGroupButton--danger:not([class*='isDisabled']).euiButtonGroupButton-isSelected { 2429 background-color: #F66; 2430 border-color: #F66; 2431 color: #000; } 2432 .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 { 2433 background-color: #ff4d4d; 2434 border-color: #ff4d4d; } 2435 .euiButtonGroupButton.euiButtonGroupButton--danger:not([class*='isDisabled']):hover, .euiButtonGroupButton.euiButtonGroupButton--danger:not([class*='isDisabled']):focus, .euiButtonGroupButton.euiButtonGroupButton--danger:not([class*='isDisabled']):focus-within { 2436 background-color: rgba(255, 102, 102, 0.1); } 2437 .euiButtonGroupButton.euiButtonGroupButton--subdued:not([class*='isDisabled']) { 2438 color: #7a7f89; } 2439 .euiButtonGroupButton.euiButtonGroupButton--subdued:not([class*='isDisabled']).euiButtonGroupButton-isSelected { 2440 background-color: #7a7f89; 2441 border-color: #7a7f89; 2442 color: #000; } 2443 .euiButtonGroupButton.euiButtonGroupButton--subdued:not([class*='isDisabled']).euiButtonGroupButton-isSelected:hover, .euiButtonGroupButton.euiButtonGroupButton--subdued:not([class*='isDisabled']).euiButtonGroupButton-isSelected:focus, .euiButtonGroupButton.euiButtonGroupButton--subdued:not([class*='isDisabled']).euiButtonGroupButton-isSelected:focus-within { 2444 background-color: #6e727c; 2445 border-color: #6e727c; } 2446 .euiButtonGroupButton.euiButtonGroupButton--subdued:not([class*='isDisabled']):hover, .euiButtonGroupButton.euiButtonGroupButton--subdued:not([class*='isDisabled']):focus, .euiButtonGroupButton.euiButtonGroupButton--subdued:not([class*='isDisabled']):focus-within { 2447 background-color: rgba(122, 127, 137, 0.1); } 2448 .euiButtonGroupButton.euiButtonGroupButton--ghost:not([class*='isDisabled']) { 2449 color: #FFF; } 2450 .euiButtonGroupButton.euiButtonGroupButton--ghost:not([class*='isDisabled']).euiButtonGroupButton-isSelected { 2451 background-color: #FFF; 2452 border-color: #FFF; 2453 color: #000; } 2454 .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 { 2455 background-color: #f2f2f2; 2456 border-color: #f2f2f2; } 2457 .euiButtonGroupButton.euiButtonGroupButton--ghost:not([class*='isDisabled']):hover, .euiButtonGroupButton.euiButtonGroupButton--ghost:not([class*='isDisabled']):focus, .euiButtonGroupButton.euiButtonGroupButton--ghost:not([class*='isDisabled']):focus-within { 2458 background-color: rgba(255, 255, 255, 0.1); } 2459 .euiButtonGroupButton.euiButtonGroupButton--text:not([class*='isDisabled']) { 2460 color: #DFE5EF; } 2461 .euiButtonGroupButton.euiButtonGroupButton--text:not([class*='isDisabled']).euiButtonGroupButton-isSelected { 2462 background-color: #98A2B3; 2463 border-color: #98A2B3; 2464 color: #000; } 2465 .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 { 2466 background-color: #8995a8; 2467 border-color: #8995a8; } 2468 .euiButtonGroupButton.euiButtonGroupButton--text:not([class*='isDisabled']):hover, .euiButtonGroupButton.euiButtonGroupButton--text:not([class*='isDisabled']):focus, .euiButtonGroupButton.euiButtonGroupButton--text:not([class*='isDisabled']):focus-within { 2469 background-color: rgba(152, 162, 179, 0.1); } 2470 2471.euiButtonGroupButton__textShift::after { 2472 display: block; 2473 content: attr(data-text); 2474 font-weight: 700; 2475 height: 0; 2476 overflow: hidden; 2477 visibility: hidden; } 2478 2479/** 2480 * Medium and Small sizing (regular button style) 2481 */ 2482.euiButtonGroup--medium .euiButtonGroupButton, 2483.euiButtonGroup--small .euiButtonGroupButton { 2484 border: 1px solid #343741; } 2485 .euiButtonGroup--medium .euiButtonGroupButton:not(:first-child), 2486 .euiButtonGroup--small .euiButtonGroupButton:not(:first-child) { 2487 margin-left: -1px; } 2488 .euiButtonGroup--medium .euiButtonGroupButton:first-child, 2489 .euiButtonGroup--small .euiButtonGroupButton:first-child { 2490 border-radius: 4px 0 0 4px; } 2491 .euiButtonGroup--medium .euiButtonGroupButton:last-child, 2492 .euiButtonGroup--small .euiButtonGroupButton:last-child { 2493 border-radius: 0 4px 4px 0; } 2494 2495.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, 2496.euiButtonGroup--small .euiButtonGroupButton.euiButtonGroupButton-isDisabled.euiButtonGroupButton--ghost, 2497.euiButtonGroup--small .euiButtonGroupButton.euiButtonGroupButton-isDisabled.euiButtonGroupButton--ghost:hover, 2498.euiButtonGroup--small .euiButtonGroupButton.euiButtonGroupButton-isDisabled.euiButtonGroupButton--ghost:focus, 2499.euiButtonGroup--small .euiButtonGroupButton.euiButtonGroupButton-isDisabled.euiButtonGroupButton--ghost:focus-within { 2500 color: #343741; } 2501 2502.euiButtonGroup--isDisabled .euiButtonGroup--medium .euiButtonGroupButton.euiButtonGroupButton-isDisabled.euiButtonGroupButton--ghost, .euiButtonGroup--isDisabled 2503.euiButtonGroup--small .euiButtonGroupButton.euiButtonGroupButton-isDisabled.euiButtonGroupButton--ghost { 2504 border-color: #343741; } 2505 2506.euiButtonGroup--medium .euiButtonGroupButton.euiButtonGroupButton-isDisabled.euiButtonGroupButton--ghost.euiButtonGroupButton-isSelected, 2507.euiButtonGroup--small .euiButtonGroupButton.euiButtonGroupButton-isDisabled.euiButtonGroupButton--ghost.euiButtonGroupButton-isSelected { 2508 background-color: #343741; 2509 color: #62656d; } 2510 2511.euiButtonGroup--medium .euiButtonGroupButton-isSelected, 2512.euiButtonGroup--small .euiButtonGroupButton-isSelected { 2513 z-index: 0; } 2514 2515.euiButtonGroup--medium .euiButtonGroupButton-isSelected + .euiButtonGroupButton-isSelected, 2516.euiButtonGroup--small .euiButtonGroupButton-isSelected + .euiButtonGroupButton-isSelected { 2517 box-shadow: -1px 0 0 rgba(29, 30, 36, 0.1); } 2518 2519/** 2520 * Compressed (form style) 2521 */ 2522.euiButtonGroup--compressed .euiButtonGroupButton { 2523 height: 30px; 2524 line-height: 30px; 2525 font-size: 14px; 2526 border-radius: 4px; 2527 padding: 2px; 2528 background-clip: content-box; } 2529 .euiButtonGroup--compressed .euiButtonGroupButton .euiButton__content { 2530 padding-left: 8px; 2531 padding-right: 8px; } 2532 .euiButtonGroup--compressed .euiButtonGroupButton.euiButtonGroupButton-isSelected { 2533 font-weight: 600; } 2534 .euiButtonGroup--compressed .euiButtonGroupButton:not([class*='isDisabled']):focus, .euiButtonGroup--compressed .euiButtonGroupButton:not([class*='isDisabled']):focus-within { 2535 outline: 2px solid rgba(27, 169, 245, 0.3); } 2536 2537/** 2538 * 1. Add vertical space between breadcrumbs, 2539 * but make sure the whole breadcrumb set doesn't add space below itself 2540 */ 2541.euiBreadcrumbs__list { 2542 font-size: 14px; 2543 font-size: 0.875rem; 2544 line-height: 1.5; 2545 display: -webkit-flex; 2546 display: flex; 2547 -webkit-align-items: center; 2548 align-items: center; 2549 -webkit-flex-wrap: wrap; 2550 flex-wrap: wrap; 2551 min-width: 0; 2552 margin-bottom: -4px; 2553 /* 1 */ } 2554 2555.euiBreadcrumb { 2556 margin-bottom: 4px; 2557 /* 1 */ 2558 display: -webkit-flex; 2559 display: flex; 2560 -webkit-align-items: center; 2561 align-items: center; } 2562 .euiBreadcrumb:not(.euiBreadcrumb--last) { 2563 color: #7a7f89; } 2564 .euiBreadcrumb:not(.euiBreadcrumb--last)::after { 2565 content: ''; 2566 margin: 4px 8px 0; 2567 width: 1px; 2568 height: 16px; 2569 -webkit-transform: translateY(-1px) rotate(15deg); 2570 transform: translateY(-1px) rotate(15deg); 2571 background: #343741; 2572 -webkit-flex-shrink: 0; 2573 flex-shrink: 0; } 2574 2575.euiBreadcrumb--collapsed { 2576 -webkit-flex-shrink: 0; 2577 flex-shrink: 0; } 2578 2579.euiBreadcrumb--last { 2580 font-weight: 500; } 2581 2582.euiBreadcrumbs__inPopover .euiBreadcrumb--last .euiBreadcrumb__content { 2583 font-weight: 400; 2584 color: #7a7f89; } 2585 2586.euiBreadcrumbs--truncate .euiBreadcrumbs__list { 2587 white-space: nowrap; 2588 -webkit-flex-wrap: nowrap; 2589 flex-wrap: nowrap; } 2590 2591.euiBreadcrumbs--truncate .euiBreadcrumb:not(.euiBreadcrumb--collapsed) .euiBreadcrumb__content { 2592 max-width: 160px; 2593 overflow: hidden; 2594 text-overflow: ellipsis; } 2595 2596.euiBreadcrumbs--truncate .euiBreadcrumb:not(.euiBreadcrumb--collapsed).euiBreadcrumb--last .euiBreadcrumb__content { 2597 max-width: none; } 2598 2599.euiBreadcrumbs--truncate .euiBreadcrumb { 2600 overflow: hidden; } 2601 2602.euiBreadcrumbs--truncate .euiBreadcrumb__content, 2603.euiBreadcrumb--truncate .euiBreadcrumb__content { 2604 max-width: 100%; 2605 overflow: hidden !important; 2606 text-overflow: ellipsis !important; 2607 white-space: nowrap !important; 2608 word-wrap: normal !important; 2609 max-width: 160px; 2610 text-align: center; 2611 vertical-align: baseline; } 2612 2613.euiCallOut { 2614 padding: 16px; 2615 border-left: 2px solid transparent; } 2616 .euiCallOut.euiCallOut--small { 2617 padding: 8px; } 2618 .euiCallOut .euiCallOutHeader__icon { 2619 -webkit-flex: 0 0 auto; 2620 flex: 0 0 auto; 2621 -webkit-transform: translateY(2px); 2622 transform: translateY(2px); } 2623 .euiCallOut .euiCallOutHeader__title { 2624 overflow-wrap: break-word !important; 2625 word-wrap: break-word !important; 2626 word-break: break-word; 2627 color: #DFE5EF; 2628 font-size: 16px; 2629 font-size: 1rem; 2630 line-height: 1.5rem; 2631 font-weight: 600; 2632 letter-spacing: -0.02em; 2633 font-weight: 400; 2634 margin-bottom: 0; } 2635 2636.euiCallOut--small .euiCallOutHeader__title { 2637 overflow-wrap: break-word !important; 2638 word-wrap: break-word !important; 2639 word-break: break-word; 2640 color: #DFE5EF; 2641 font-size: 14px; 2642 font-size: 0.875rem; 2643 line-height: 1.5rem; 2644 font-weight: 700; 2645 font-weight: 400; } 2646 2647.euiCallOut--primary { 2648 border-color: #1BA9F5; 2649 background-color: #08334a; } 2650 .euiCallOut--primary .euiCallOutHeader__icon { 2651 fill: #49baf7; } 2652 .euiCallOut--primary .euiCallOutHeader__title { 2653 color: #49baf7; } 2654 2655.euiCallOut--success { 2656 border-color: #7DE2D1; 2657 background-color: #26443f; } 2658 .euiCallOut--success .euiCallOutHeader__icon { 2659 fill: #97e8da; } 2660 .euiCallOut--success .euiCallOutHeader__title { 2661 color: #97e8da; } 2662 2663.euiCallOut--warning { 2664 border-color: #FFCE7A; 2665 background-color: #4d3e25; } 2666 .euiCallOut--warning .euiCallOutHeader__icon { 2667 fill: #ffd895; } 2668 .euiCallOut--warning .euiCallOutHeader__title { 2669 color: #ffd895; } 2670 2671.euiCallOut--danger { 2672 border-color: #F66; 2673 background-color: #4d1f1f; } 2674 .euiCallOut--danger .euiCallOutHeader__icon { 2675 fill: #ff8585; } 2676 .euiCallOut--danger .euiCallOutHeader__title { 2677 color: #ff8585; } 2678 2679/** 2680 * 1. Align icon with first line of title text if it wraps. 2681 * 2. If content exists under the header, space it appropriately. 2682 * 3. Apply margin to all but last item in the flex. 2683 */ 2684.euiCallOutHeader { 2685 display: -webkit-flex; 2686 display: flex; 2687 -webkit-align-items: baseline; 2688 align-items: baseline; 2689 /* 1 */ } 2690 .euiCallOutHeader + * { 2691 margin-top: 8px; 2692 /* 1 */ } 2693 .euiCallOutHeader > * + * { 2694 margin-left: 8px; 2695 /* 3 */ } 2696 2697/** 2698 * 1. Footer is always at the bottom. 2699 * 2. Fix for IE where the image correctly resizes in width but doesn't collapse its height 2700 (https://github.com/philipwalton/flexbugs/issues/75#issuecomment-134702421) 2701 * 3. Horizontal layouts should always top left align no matter the textAlign prop 2702 */ 2703.euiCard { 2704 display: -webkit-flex; 2705 display: flex; 2706 -webkit-flex-direction: column; 2707 flex-direction: column; 2708 min-height: 1px; 2709 /* 2 */ } 2710 .euiCard.euiCard-isDisabled { 2711 cursor: not-allowed !important; 2712 -webkit-transform: none !important; 2713 transform: none !important; 2714 box-shadow: none !important; 2715 text-decoration: none !important; 2716 background-color: rgba(67, 69, 72, 0.1) !important; 2717 color: #4c4e51; } 2718 .euiCard.euiCard-isDisabled .euiCard__top { 2719 -webkit-filter: grayscale(100%); 2720 filter: grayscale(100%); } 2721 .euiCard.euiCard-isDisabled .euiCard__titleAnchor, 2722 .euiCard.euiCard-isDisabled .euiCard__titleButton { 2723 color: #4c4e51; 2724 cursor: inherit; } 2725 .euiCard.euiCard-isDisabled .euiCard__betaBadge:not(.euiBetaBadge-isClickable):not(.euiBetaBadge--hollow) { 2726 box-shadow: inset 0 0 0 1px #343741; 2727 background: transparent; 2728 color: inherit; } 2729 .euiCard.euiCard-isDisabled .euiCard__betaBadge:not(.euiBetaBadge-isClickable).euiBetaBadge--hollow { 2730 background-color: #1D1E24; } 2731 .euiCard.euiCard--isClickable { 2732 display: -webkit-flex; 2733 display: flex; 2734 width: 100%; } 2735 .euiCard.euiCard--isClickable:not(.euiCard-isDisabled):focus-within { 2736 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 2px 2px -1px rgba(0, 0, 0, 0.3); 2737 -webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimateLarge !important; 2738 animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimateLarge !important; } 2739 .euiCard.euiCard--isClickable:not(.euiCard-isDisabled):focus .euiCard__title, 2740 .euiCard.euiCard--isClickable:not(.euiCard-isDisabled):focus .euiCard__titleAnchor, 2741 .euiCard.euiCard--isClickable:not(.euiCard-isDisabled):focus .euiCard__titleButton, .euiCard.euiCard--isClickable:not(.euiCard-isDisabled):hover .euiCard__title, 2742 .euiCard.euiCard--isClickable:not(.euiCard-isDisabled):hover .euiCard__titleAnchor, 2743 .euiCard.euiCard--isClickable:not(.euiCard-isDisabled):hover .euiCard__titleButton { 2744 text-decoration: underline; } 2745 .euiCard .euiCard__top, 2746 .euiCard .euiCard__content, 2747 .euiCard .euiCard__footer { 2748 width: 100%; } 2749 .euiCard.euiCard--leftAligned { 2750 text-align: left; 2751 -webkit-align-items: flex-start; 2752 align-items: flex-start; } 2753 .euiCard.euiCard--leftAligned .euiCard__titleButton { 2754 text-align: left; } 2755 .euiCard.euiCard--centerAligned { 2756 text-align: center; 2757 -webkit-align-items: center; 2758 align-items: center; } 2759 .euiCard.euiCard--rightAligned { 2760 text-align: right; 2761 -webkit-align-items: flex-end; 2762 align-items: flex-end; } 2763 .euiCard.euiCard--rightAligned .euiCard__titleButton { 2764 text-align: right; } 2765 .euiCard.euiCard-isSelected { 2766 transition: all 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); } 2767 2768.euiCard--hasBetaBadge { 2769 position: relative; 2770 overflow: visible; } 2771 .euiCard--hasBetaBadge .euiCard__betaBadgeWrapper { 2772 position: absolute; 2773 top: -12px; 2774 left: 50%; 2775 -webkit-transform: translateX(-50%); 2776 transform: translateX(-50%); 2777 z-index: 3; 2778 min-width: 30%; 2779 max-width: calc(100% - 32px); } 2780 .euiCard--hasBetaBadge .euiCard__betaBadgeWrapper .euiToolTipAnchor, 2781 .euiCard--hasBetaBadge .euiCard__betaBadgeWrapper .euiCard__betaBadge { 2782 width: 100%; } 2783 .euiCard--hasBetaBadge .euiCard__betaBadgeWrapper .euiCard__betaBadge { 2784 overflow: hidden; 2785 text-overflow: ellipsis; } 2786 2787.euiCard__betaBadge.euiBetaBadge--hollow { 2788 background-color: #1D1E24; } 2789 2790.euiCard--isSelectable { 2791 position: relative; } 2792 2793.euiCard[class*='paddingSmall'] { 2794 padding: 8px; } 2795 .euiCard[class*='paddingSmall'].euiCard--isSelectable { 2796 padding-bottom: 48px; } 2797 .euiCard[class*='paddingSmall'] .euiCard__top .euiCard__image { 2798 width: calc(100% + (8px * 2)); 2799 left: -8px; 2800 top: -8px; 2801 margin-bottom: -8px; } 2802 .euiCard[class*='paddingSmall'] .euiCard__top .euiCard__image + .euiCard__icon { 2803 -webkit-transform: translate(-50%, -75%); 2804 transform: translate(-50%, -75%); 2805 -webkit-transform: translate(-50%, calc(-50% + -8px)); 2806 transform: translate(-50%, calc(-50% + -8px)); } 2807 2808.euiCard[class*='paddingMedium'] { 2809 padding: 16px; } 2810 .euiCard[class*='paddingMedium'].euiCard--isSelectable { 2811 padding-bottom: 56px; } 2812 .euiCard[class*='paddingMedium'] .euiCard__top .euiCard__image { 2813 width: calc(100% + (16px * 2)); 2814 left: -16px; 2815 top: -16px; 2816 margin-bottom: -16px; } 2817 .euiCard[class*='paddingMedium'] .euiCard__top .euiCard__image + .euiCard__icon { 2818 -webkit-transform: translate(-50%, -75%); 2819 transform: translate(-50%, -75%); 2820 -webkit-transform: translate(-50%, calc(-50% + -16px)); 2821 transform: translate(-50%, calc(-50% + -16px)); } 2822 2823.euiCard[class*='paddingLarge'] { 2824 padding: 24px; } 2825 .euiCard[class*='paddingLarge'].euiCard--isSelectable { 2826 padding-bottom: 64px; } 2827 .euiCard[class*='paddingLarge'] .euiCard__top .euiCard__image { 2828 width: calc(100% + (24px * 2)); 2829 left: -24px; 2830 top: -24px; 2831 margin-bottom: -24px; } 2832 .euiCard[class*='paddingLarge'] .euiCard__top .euiCard__image + .euiCard__icon { 2833 -webkit-transform: translate(-50%, -75%); 2834 transform: translate(-50%, -75%); 2835 -webkit-transform: translate(-50%, calc(-50% + -24px)); 2836 transform: translate(-50%, calc(-50% + -24px)); } 2837 2838.euiCard__top { 2839 -webkit-flex-grow: 0; 2840 flex-grow: 0; 2841 /* 1 */ 2842 position: relative; 2843 min-height: 1px; 2844 /* 2 */ 2845 font-size: 0; } 2846 .euiCard__top .euiCard__image { 2847 position: relative; 2848 border-top-left-radius: 3px; 2849 border-top-right-radius: 3px; 2850 overflow: hidden; } 2851 .euiCard__top .euiCard__image img { 2852 width: 100%; } 2853 .euiCard__top .euiCard__image + .euiCard__icon { 2854 position: absolute; 2855 top: 50%; 2856 left: 50%; } 2857 .euiCard__top .euiCard__icon { 2858 margin-top: 8px; } 2859 2860.euiCard__footer:not(:empty) { 2861 -webkit-flex-grow: 0; 2862 flex-grow: 0; 2863 /* 1 */ 2864 margin-top: 16px; } 2865 2866.euiCard[class*='transparent'] .euiCard__image { 2867 border-radius: 4px; } 2868 2869.euiCard--isSelectable--text.euiCard-isSelected:not(.euiCard-isDisabled) { 2870 border-color: #7DE2D1 !important; } 2871 2872.euiCard--isSelectable--primary.euiCard-isSelected:not(.euiCard-isDisabled) { 2873 border-color: #1BA9F5 !important; } 2874 2875.euiCard--isSelectable--success.euiCard-isSelected:not(.euiCard-isDisabled) { 2876 border-color: #7DE2D1 !important; } 2877 2878.euiCard--isSelectable--danger.euiCard-isSelected:not(.euiCard-isDisabled) { 2879 border-color: #F66 !important; } 2880 2881.euiCard--isSelectable--ghost.euiCard-isSelected:not(.euiCard-isDisabled) { 2882 border-color: #98A2B3 !important; } 2883 2884.euiCard__top + .euiCard__content { 2885 margin-top: 16px; } 2886 2887.euiCard__content { 2888 -webkit-flex-grow: 1; 2889 flex-grow: 1; 2890 /* 1 */ } 2891 .euiCard__content .euiCard__description, 2892 .euiCard__content .euiCard__children { 2893 margin-top: 8px; } 2894 .euiCard__content .euiCard__titleAnchor, 2895 .euiCard__content .euiCard__titleButton { 2896 font: inherit; 2897 color: inherit; 2898 letter-spacing: inherit; } 2899 .euiCard__content .euiCard__titleAnchor:focus, 2900 .euiCard__content .euiCard__titleButton:focus { 2901 text-decoration: underline; } 2902 2903.euiCard.euiCard--horizontal .euiCard__content, 2904.euiCard.euiCard--horizontal .euiCard__titleButton { 2905 text-align: left; 2906 /* 3 */ } 2907 2908.euiCard.euiCard--horizontal.euiCard--hasIcon { 2909 -webkit-flex-direction: row; 2910 flex-direction: row; 2911 -webkit-align-items: flex-start !important; 2912 align-items: flex-start !important; 2913 /* 3 */ } 2914 .euiCard.euiCard--horizontal.euiCard--hasIcon .euiCard__top, 2915 .euiCard.euiCard--horizontal.euiCard--hasIcon .euiCard__content { 2916 width: auto; 2917 margin-top: 0; } 2918 .euiCard.euiCard--horizontal.euiCard--hasIcon .euiCard__top .euiCard__icon { 2919 margin-top: 0; 2920 margin-right: 16px; } 2921 2922.euiCardSelect { 2923 position: absolute; 2924 bottom: 0; 2925 left: 0; 2926 height: 40px !important; 2927 width: 100%; 2928 overflow: hidden; 2929 border-bottom-left-radius: 3px; 2930 border-bottom-right-radius: 3px; 2931 font-weight: 700; } 2932 .euiCardSelect--text:enabled { 2933 background-color: #25262E !important; } 2934 .euiCardSelect--primary:enabled { 2935 background-color: #08334a !important; } 2936 .euiCardSelect--success:enabled { 2937 background-color: #26443f !important; 2938 color: #7DE2D1; } 2939 .euiCardSelect--danger:enabled { 2940 background-color: #4d1f1f !important; } 2941 .euiCardSelect--ghost:enabled { 2942 background-color: #98A2B3 !important; } 2943 .euiCardSelect:disabled { 2944 background-color: #141519; } 2945 2946.euiCheckableCard { 2947 transition: border-color 250ms ease-in; } 2948 .euiCheckableCard:not(.euiCheckableCard-isDisabled).euiCheckableCard-isChecked { 2949 border-color: #1BA9F5; } 2950 2951.euiCheckableCard__label { 2952 cursor: pointer; 2953 display: block; 2954 width: calc(100% + 32px); 2955 padding: 16px; 2956 margin: -16px; } 2957 2958.euiCheckableCard__label-isDisabled { 2959 color: #535966; 2960 cursor: not-allowed; } 2961 2962.euiCheckableCard__children { 2963 margin-top: 16px; } 2964 2965.euiCodeBlock { 2966 max-width: 100%; 2967 display: block; 2968 position: relative; 2969 background: #25262E; 2970 color: #DFE5EF; 2971 /* 2972 * 1. Size the code against the text its embedded within. 2973 */ } 2974 .euiCodeBlock .euiCodeBlock__pre { 2975 scrollbar-color: rgba(152, 162, 179, 0.5) transparent; 2976 scrollbar-width: thin; 2977 height: 100%; 2978 overflow: auto; 2979 display: block; } 2980 .euiCodeBlock .euiCodeBlock__pre::-webkit-scrollbar { 2981 width: 16px; 2982 height: 16px; } 2983 .euiCodeBlock .euiCodeBlock__pre::-webkit-scrollbar-thumb { 2984 background-color: rgba(152, 162, 179, 0.5); 2985 background-clip: content-box; 2986 border-radius: 16px; 2987 border: 6px solid transparent; } 2988 .euiCodeBlock .euiCodeBlock__pre::-webkit-scrollbar-corner, .euiCodeBlock .euiCodeBlock__pre::-webkit-scrollbar-track { 2989 background-color: transparent; } 2990 .euiCodeBlock .euiCodeBlock__pre--whiteSpacePre { 2991 white-space: pre; } 2992 .euiCodeBlock .euiCodeBlock__pre--whiteSpacePreWrap { 2993 white-space: pre-wrap; } 2994 .euiCodeBlock .euiCodeBlock__pre--isVirtualized .euiCodeBlock__code { 2995 position: relative; } 2996 .euiCodeBlock .euiCodeBlock__line { 2997 display: block; } 2998 .euiCodeBlock--hasLineNumbers .euiCodeBlock__line { 2999 position: relative; 3000 -webkit-user-select: none; 3001 -moz-user-select: none; 3002 user-select: none; } 3003 .euiCodeBlock .euiCodeBlock__lineText, 3004 .euiCodeBlock .euiCodeBlock__lineNumber { 3005 display: inline-block; } 3006 .euiCodeBlock .euiCodeBlock__lineText { 3007 padding-left: 8px; 3008 border-left: 1px solid #343741; 3009 -webkit-user-select: text; 3010 -moz-user-select: text; 3011 user-select: text; } 3012 .euiCodeBlock .euiCodeBlock__lineNumber { 3013 position: absolute; 3014 height: 100%; 3015 -webkit-user-select: none; 3016 -moz-user-select: none; 3017 user-select: none; 3018 padding-right: 8px; 3019 box-sizing: content-box; } 3020 .euiCodeBlock .euiCodeBlock__lineNumber:before { 3021 content: attr(data-line-number); 3022 color: #7a7f89; 3023 text-align: right; 3024 display: block; } 3025 .euiCodeBlock .euiCodeBlock__line--isHighlighted .euiCodeBlock__lineText { 3026 background: #052231; 3027 border-left: 2px solid rgba(27, 169, 245, 0.3); } 3028 .euiCodeBlock .euiCodeBlock__code { 3029 font-family: "Roboto Mono", Consolas, Menlo, Courier, monospace; 3030 letter-spacing: normal; 3031 display: block; 3032 line-height: 1.5; 3033 font-weight: 400; 3034 font-size: inherit; } 3035 .euiCodeBlock .euiCodeBlock__controls { 3036 position: absolute; 3037 top: 0; 3038 right: 0; } 3039 .euiCodeBlock .euiCodeBlock__fullScreenButton + .euiCodeBlock__copyButton { 3040 margin-top: 4px; } 3041 .euiCodeBlock.euiCodeBlock-isFullScreen { 3042 position: fixed; 3043 top: 0; 3044 left: 0; 3045 right: 0; 3046 bottom: 0; } 3047 .euiCodeBlock.euiCodeBlock-isFullScreen .euiCodeBlock__pre { 3048 padding: 32px !important; } 3049 .euiCodeBlock.euiCodeBlock-isFullScreen .euiCodeBlock__controls { 3050 top: 4px; 3051 right: 4px; } 3052 .euiCodeBlock.euiCodeBlock--fontSmall { 3053 font-size: 12px; } 3054 .euiCodeBlock.euiCodeBlock--fontMedium { 3055 font-size: 14px; } 3056 .euiCodeBlock.euiCodeBlock--fontLarge { 3057 font-size: 16px; } 3058 .euiCodeBlock.euiCodeBlock--hasControl { 3059 min-height: 24px; } 3060 .euiCodeBlock.euiCodeBlock--hasBothControls { 3061 min-height: 52px; } 3062 .euiCodeBlock.euiCodeBlock--hasControl .euiCodeBlock__pre--whiteSpacePreWrap { 3063 padding-right: 28px; } 3064 .euiCodeBlock.euiCodeBlock--hasControl .euiCodeBlock__pre--whiteSpacePre { 3065 margin-right: 28px; } 3066 .euiCodeBlock.euiCodeBlock--paddingSmall .euiCodeBlock__pre { 3067 padding: 8px; } 3068 .euiCodeBlock.euiCodeBlock--paddingSmall.euiCodeBlock--hasControl { 3069 min-height: 40px; } 3070 .euiCodeBlock.euiCodeBlock--paddingSmall.euiCodeBlock--hasBothControls { 3071 min-height: 68px; } 3072 .euiCodeBlock.euiCodeBlock--paddingSmall .euiCodeBlock__controls { 3073 top: 8px; 3074 right: 8px; } 3075 .euiCodeBlock.euiCodeBlock--paddingSmall.euiCodeBlock--hasControl .euiCodeBlock__pre--whiteSpacePreWrap { 3076 padding-right: 36px; } 3077 .euiCodeBlock.euiCodeBlock--paddingSmall.euiCodeBlock--hasControl .euiCodeBlock__pre--whiteSpacePre { 3078 margin-right: 36px; } 3079 .euiCodeBlock.euiCodeBlock--paddingMedium .euiCodeBlock__pre { 3080 padding: 16px; } 3081 .euiCodeBlock.euiCodeBlock--paddingMedium.euiCodeBlock--hasControl { 3082 min-height: 56px; } 3083 .euiCodeBlock.euiCodeBlock--paddingMedium.euiCodeBlock--hasBothControls { 3084 min-height: 84px; } 3085 .euiCodeBlock.euiCodeBlock--paddingMedium .euiCodeBlock__controls { 3086 top: 16px; 3087 right: 16px; } 3088 .euiCodeBlock.euiCodeBlock--paddingMedium.euiCodeBlock--hasControl .euiCodeBlock__pre--whiteSpacePreWrap { 3089 padding-right: 44px; } 3090 .euiCodeBlock.euiCodeBlock--paddingMedium.euiCodeBlock--hasControl .euiCodeBlock__pre--whiteSpacePre { 3091 margin-right: 44px; } 3092 .euiCodeBlock.euiCodeBlock--paddingLarge .euiCodeBlock__pre { 3093 padding: 24px; } 3094 .euiCodeBlock.euiCodeBlock--paddingLarge.euiCodeBlock--hasControl { 3095 min-height: 72px; } 3096 .euiCodeBlock.euiCodeBlock--paddingLarge.euiCodeBlock--hasBothControls { 3097 min-height: 100px; } 3098 .euiCodeBlock.euiCodeBlock--paddingLarge .euiCodeBlock__controls { 3099 top: 24px; 3100 right: 24px; } 3101 .euiCodeBlock.euiCodeBlock--paddingLarge.euiCodeBlock--hasControl .euiCodeBlock__pre--whiteSpacePreWrap { 3102 padding-right: 52px; } 3103 .euiCodeBlock.euiCodeBlock--paddingLarge.euiCodeBlock--hasControl .euiCodeBlock__pre--whiteSpacePre { 3104 margin-right: 52px; } 3105 .euiCodeBlock.euiCodeBlock--inline { 3106 display: inline-block; 3107 white-space: pre; 3108 color: #DFE5EF; 3109 font-size: 90%; 3110 /* 1 */ 3111 padding: 0 8px; 3112 background: #25262E; } 3113 .euiCodeBlock.euiCodeBlock--inline .euiCodeBlock__pre { 3114 padding: 0 4px; } 3115 .euiCodeBlock.euiCodeBlock--inline .euiCodeBlock__code { 3116 display: inline; 3117 white-space: normal; } 3118 .euiCodeBlock.euiCodeBlock--transparentBackground { 3119 background: transparent; } 3120 .euiCodeBlock .token.punctuation:not(.interpolation-punctuation):not([class*='attr-']) { 3121 opacity: .7; } 3122 .euiCodeBlock .token.comment, 3123 .euiCodeBlock .token.prolog, 3124 .euiCodeBlock .token.doctype, 3125 .euiCodeBlock .token.cdata, 3126 .euiCodeBlock .token.coord, 3127 .euiCodeBlock .token.blockquote { 3128 color: #8d919a; 3129 font-style: italic; } 3130 .euiCodeBlock .token.selector { 3131 color: inherit; } 3132 .euiCodeBlock .token.string, 3133 .euiCodeBlock .token.interpolation, 3134 .euiCodeBlock .token.interpolation-punctuation, 3135 .euiCodeBlock .token.doc-comment .token.keyword, 3136 .euiCodeBlock .token.attr-value, 3137 .euiCodeBlock .token.url .token.content { 3138 color: #d77092; } 3139 .euiCodeBlock .token.number, 3140 .euiCodeBlock .token.boolean, 3141 .euiCodeBlock .token.keyword.nil, 3142 .euiCodeBlock .token.regex, 3143 .euiCodeBlock .token.variable, 3144 .euiCodeBlock .token.unit, 3145 .euiCodeBlock .token.hexcode, 3146 .euiCodeBlock .token.attr-name, 3147 .euiCodeBlock .token.attr-equals { 3148 color: #54B399; } 3149 .euiCodeBlock .token.atrule .token.rule, 3150 .euiCodeBlock .token.keyword { 3151 color: #a184c2; } 3152 .euiCodeBlock .token.function { 3153 color: inherit; } 3154 .euiCodeBlock .token.tag { 3155 color: #6092C0; } 3156 .euiCodeBlock .token.class-name { 3157 color: #6092C0; } 3158 .euiCodeBlock .token.property { 3159 color: inherit; } 3160 .euiCodeBlock .token.console, 3161 .euiCodeBlock .token.list-punctuation, 3162 .euiCodeBlock .token.url-reference, 3163 .euiCodeBlock .token.url .token.url { 3164 color: #E7664C; } 3165 .euiCodeBlock .token.paramater { 3166 color: inherit; } 3167 .euiCodeBlock .token.meta, 3168 .euiCodeBlock .token.important { 3169 color: #8d919a; } 3170 .euiCodeBlock .token.title { 3171 color: #DA8B45; } 3172 .euiCodeBlock .token.section { 3173 color: #E7664C; } 3174 .euiCodeBlock .token.prefix.inserted, 3175 .euiCodeBlock .token.prefix.deleted { 3176 padding-left: 4px; 3177 margin-left: -4px; } 3178 .euiCodeBlock .token.prefix.inserted { 3179 box-shadow: -4px 0 #54B399; 3180 color: #54B399; } 3181 .euiCodeBlock .token.prefix.deleted { 3182 box-shadow: -4px 0 #F66; 3183 color: #F66; } 3184 .euiCodeBlock .token.selector .token.class { 3185 color: inherit; } 3186 .euiCodeBlock .token.selector .token.id { 3187 color: inherit; } 3188 .euiCodeBlock .token.italic { 3189 font-style: italic; } 3190 .euiCodeBlock .token.important, 3191 .euiCodeBlock .token.bold { 3192 font-weight: 700; } 3193 .euiCodeBlock .token.url-reference, 3194 .euiCodeBlock .token.url .token.url { 3195 text-decoration: underline; } 3196 .euiCodeBlock .token.entity { 3197 cursor: help; } 3198 3199.euiCodeEditorWrapper { 3200 position: relative; } 3201 .euiCodeEditorWrapper .ace_hidden-cursors { 3202 opacity: 0; } 3203 .euiCodeEditorWrapper.euiCodeEditorWrapper-isEditing .ace_hidden-cursors { 3204 opacity: 1; } 3205 3206.euiCodeEditorKeyboardHint { 3207 position: absolute; 3208 top: 0; 3209 left: 0; 3210 background: rgba(255, 255, 255, 0.7); 3211 display: -webkit-flex; 3212 display: flex; 3213 -webkit-flex-direction: column; 3214 flex-direction: column; 3215 -webkit-justify-content: center; 3216 justify-content: center; 3217 -webkit-align-items: center; 3218 align-items: center; 3219 opacity: 0; 3220 cursor: pointer; 3221 height: 100%; 3222 width: 100%; } 3223 .euiCodeEditorKeyboardHint:focus { 3224 opacity: 1; 3225 border: 2px solid #1BA9F5; 3226 z-index: 1000; } 3227 .euiCodeEditorKeyboardHint.euiCodeEditorKeyboardHint-isInactive { 3228 display: none; } 3229 3230.euiCollapsibleNav:not([class*='push']) { 3231 z-index: 6000 !important; } 3232 3233.euiCollapsibleNavGroup:not(:first-child) { 3234 border-top: 1px solid #343741; } 3235 3236.euiCollapsibleNavGroup .euiAccordion__triggerWrapper { 3237 padding: 16px; } 3238 3239.euiCollapsibleNavGroup--light { 3240 background-color: #141519; } 3241 3242.euiCollapsibleNavGroup--dark { 3243 background-color: #131317; 3244 color: #FFF; } 3245 .euiCollapsibleNavGroup--dark .euiCollapsibleNavGroup__heading:focus .euiAccordion__iconWrapper { 3246 color: #1BA9F5; 3247 -webkit-animation-name: euiCollapsibleNavGroupDarkFocusRingAnimate !important; 3248 animation-name: euiCollapsibleNavGroupDarkFocusRingAnimate !important; } 3249 .euiCollapsibleNavGroup--dark .euiCollapsibleNavGroup__title { 3250 color: inherit; 3251 line-height: inherit; } 3252 3253.euiCollapsibleNavGroup__heading { 3254 font-weight: 600; } 3255 .euiCollapsibleNavGroup__heading:not(.euiAccordion__button) { 3256 padding: 16px; } 3257 3258.euiCollapsibleNavGroup__children { 3259 padding: 8px; } 3260 3261.euiCollapsibleNavGroup--withHeading .euiCollapsibleNavGroup__children { 3262 padding-top: 0; } 3263 3264@-webkit-keyframes euiCollapsibleNavGroupDarkFocusRingAnimate { 3265 0% { 3266 box-shadow: 0 0 0 6px rgba(27, 169, 245, 0); } 3267 100% { 3268 box-shadow: 0 0 0 3px #1BA9F5; } } 3269 3270@keyframes euiCollapsibleNavGroupDarkFocusRingAnimate { 3271 0% { 3272 box-shadow: 0 0 0 6px rgba(27, 169, 245, 0); } 3273 100% { 3274 box-shadow: 0 0 0 3px #1BA9F5; } } 3275 3276.euiColorPicker { 3277 position: relative; 3278 width: 152px; } 3279 3280.euiColorPicker__popoverAnchor .euiColorPicker__input { 3281 padding-right: 40px; } 3282 .euiColorPicker__popoverAnchor .euiColorPicker__input[class*='--compressed'] { 3283 padding-right: 32px; } 3284 .euiColorPicker__popoverAnchor .euiColorPicker__input + .euiFormControlLayoutIcons { 3285 color: inherit; } 3286 3287.euiColorPicker__swatches { 3288 display: -webkit-flex; 3289 display: flex; 3290 -webkit-flex-wrap: wrap; 3291 flex-wrap: wrap; 3292 margin: -4px; } 3293 3294.euiColorPicker__swatch-item { 3295 margin: 4px; } 3296 3297.euiSwatchInput__stroke { 3298 fill: none; 3299 stroke: rgba(255, 255, 255, 0.2); } 3300 3301.euiColorPicker__popoverPanel--pickerOnly { 3302 padding-bottom: 0 !important; } 3303 3304.euiColorPicker__input--inGroup { 3305 height: 38px !important; 3306 box-shadow: none !important; 3307 border-radius: 0; } 3308 .euiColorPicker__input--inGroup.euiFieldText--compressed { 3309 height: 30px !important; 3310 border-radius: 0; } 3311 3312.euiColorPicker__alphaRange .euiRangeInput { 3313 min-width: 0; } 3314 3315.euiColorPickerSwatch { 3316 display: inline-block; 3317 height: 24px; 3318 width: 24px; 3319 border-radius: 2px; 3320 cursor: pointer; 3321 border: solid 1px rgba(255, 255, 255, 0.1); 3322 box-shadow: inset 0 0 0 1px rgba(29, 30, 36, 0.05); } 3323 .euiColorPickerSwatch:disabled { 3324 cursor: default; } 3325 .euiColorPickerSwatch:focus { 3326 -webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important; 3327 animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important; } 3328 3329.euiHue { 3330 background: linear-gradient(to right, #FF3232 0%, #FFF130 20%, #45FF30 35%, #28FFF0 52%, #282CFF 71%, #FF28FB 88%, #FF0094 100%); 3331 height: 24px; 3332 margin: 4px 0; 3333 position: relative; } 3334 .euiHue:before, .euiHue:after { 3335 content: ''; 3336 left: 0; 3337 position: absolute; 3338 height: 8px; 3339 background: #1D1E24; 3340 width: 100%; } 3341 .euiHue:after { 3342 bottom: 0; } 3343 3344.euiHue__range { 3345 position: relative; 3346 height: 24px; 3347 width: calc(100% + 2px); 3348 margin: 0 -1px; 3349 -webkit-appearance: none; 3350 -moz-appearance: none; 3351 appearance: none; 3352 background: transparent; 3353 z-index: 2; } 3354 .euiHue__range::-webkit-slider-thumb { 3355 box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3); 3356 padding: 7px; 3357 border: 1px solid #66676d; 3358 background: #1D1E24 no-repeat center; 3359 border-radius: 14px; 3360 -webkit-transition: background-color 150ms ease-in, border-color 150ms ease-in; 3361 transition: background-color 150ms ease-in, border-color 150ms ease-in; 3362 cursor: pointer; 3363 border-color: #98A2B3; 3364 padding: 0; 3365 height: 16px; 3366 width: 16px; } 3367 .euiHue__range::-moz-range-thumb { 3368 box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3); 3369 padding: 7px; 3370 border: 1px solid #66676d; 3371 background: #1D1E24 no-repeat center; 3372 border-radius: 14px; 3373 -moz-transition: background-color 150ms ease-in, border-color 150ms ease-in; 3374 transition: background-color 150ms ease-in, border-color 150ms ease-in; 3375 cursor: pointer; 3376 border-color: #98A2B3; 3377 padding: 0; 3378 height: 16px; 3379 width: 16px; } 3380 .euiHue__range::-ms-thumb { 3381 box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3); 3382 padding: 7px; 3383 border: 1px solid #66676d; 3384 background: #1D1E24 no-repeat center; 3385 border-radius: 14px; 3386 -ms-transition: background-color 150ms ease-in, border-color 150ms ease-in; 3387 transition: background-color 150ms ease-in, border-color 150ms ease-in; 3388 cursor: pointer; 3389 border-color: #98A2B3; 3390 padding: 0; 3391 height: 16px; 3392 width: 16px; } 3393 .euiHue__range::-webkit-slider-thumb { 3394 -webkit-appearance: none; 3395 margin-top: 0; } 3396 .euiHue__range::-ms-thumb { 3397 margin-top: 0; } 3398 .euiHue__range::-ms-track { 3399 height: 24px; 3400 background: transparent; 3401 border-color: transparent; 3402 color: transparent; } 3403 .euiHue__range::-moz-focus-outer { 3404 border: none; } 3405 .euiHue__range::-ms-fill-lower, .euiHue__range::-ms-fill-upper { 3406 background: transparent; } 3407 .euiHue__range:focus { 3408 outline: none; } 3409 .euiHue__range:focus::-webkit-slider-thumb { 3410 box-shadow: 0 0 0 3px rgba(27, 169, 245, 0.3); 3411 border-color: #1BA9F5; } 3412 .euiHue__range:focus::-moz-range-thumb { 3413 box-shadow: 0 0 0 3px rgba(27, 169, 245, 0.3); 3414 border-color: #1BA9F5; } 3415 .euiHue__range:focus::-ms-thumb { 3416 box-shadow: 0 0 0 3px rgba(27, 169, 245, 0.3); 3417 border-color: #1BA9F5; } 3418 3419.euiSaturation { 3420 position: relative; 3421 width: 100%; 3422 padding-bottom: 100%; 3423 border-radius: 2px; 3424 touch-action: none; 3425 z-index: 3; } 3426 .euiSaturation .euiSaturation__lightness, 3427 .euiSaturation .euiSaturation__saturation { 3428 position: absolute; 3429 top: -1px; 3430 bottom: 0; 3431 left: 0; 3432 right: 0; 3433 border-radius: 2px; } 3434 .euiSaturation .euiSaturation__lightness { 3435 background: linear-gradient(to right, white, rgba(255, 255, 255, 0)); } 3436 .euiSaturation .euiSaturation__saturation { 3437 background: linear-gradient(to top, black, rgba(0, 0, 0, 0)); } 3438 .euiSaturation .euiSaturation__indicator { 3439 position: absolute; 3440 height: 12px; 3441 width: 12px; 3442 border-radius: 100%; 3443 margin-top: -6px; 3444 margin-left: -6px; 3445 border: 1px solid #D4DAE5; } 3446 .euiSaturation .euiSaturation__indicator:before { 3447 content: ''; 3448 position: absolute; 3449 top: 0; 3450 left: 0; 3451 right: 0; 3452 bottom: 0; 3453 border-radius: 100%; 3454 border: 1px solid #25262E; } 3455 .euiSaturation:focus { 3456 outline: none; } 3457 .euiSaturation:focus .euiSaturation__indicator { 3458 box-shadow: 0 0 0 3px rgba(27, 169, 245, 0.3); 3459 border-color: #1BA9F5; } 3460 3461.euiColorStops:not(.euiColorStops-isDisabled):focus { 3462 outline: 2px solid rgba(27, 169, 245, 0.3); } 3463 3464.euiColorStops__addContainer { 3465 display: block; 3466 position: absolute; 3467 left: 0; 3468 right: 0; 3469 top: 50%; 3470 height: 16px; 3471 margin-top: -8px; } 3472 .euiColorStops__addContainer:hover:not(.euiColorStops__addContainer-isDisabled) { 3473 cursor: pointer; } 3474 .euiColorStops__addContainer:hover:not(.euiColorStops__addContainer-isDisabled) .euiColorStops__addTarget { 3475 opacity: .7; } 3476 3477.euiColorStops__addTarget { 3478 box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3); 3479 padding: 7px; 3480 border: 1px solid #66676d; 3481 background: #1D1E24 no-repeat center; 3482 border-radius: 14px; 3483 transition: background-color 150ms ease-in, border-color 150ms ease-in; 3484 cursor: pointer; 3485 border-color: #98A2B3; 3486 padding: 0; 3487 height: 16px; 3488 width: 16px; 3489 position: absolute; 3490 top: 0; 3491 height: 16px; 3492 width: 16px; 3493 background-color: #25262E; 3494 pointer-events: none; 3495 opacity: 0; 3496 transition: opacity 150ms; } 3497 3498.euiColorStop { 3499 width: 152px; } 3500 3501.euiColorStopPopover.euiPopover { 3502 position: absolute; 3503 top: 50%; 3504 width: 16px; 3505 height: 16px; 3506 margin-top: -8px; } 3507 3508.euiColorStopPopover-hasFocus { 3509 z-index: 1; } 3510 3511.euiColorStopPopover__anchor { 3512 position: absolute; 3513 width: 100%; 3514 height: 100%; } 3515 .euiColorStopPopover__anchor:before { 3516 content: ''; 3517 display: block; 3518 position: absolute; 3519 left: 0; 3520 top: 0; 3521 height: 16px; 3522 width: 16px; 3523 border-radius: 16px; 3524 background: #1D1E24; } 3525 3526.euiColorStopThumb.euiRangeThumb:not(:disabled) { 3527 top: 0; 3528 margin-top: 0; 3529 pointer-events: auto; 3530 cursor: -webkit-grab; 3531 cursor: grab; 3532 border: solid 3px #1D1E24; 3533 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); } 3534 .euiColorStopThumb.euiRangeThumb:not(:disabled):active { 3535 cursor: -webkit-grabbing; 3536 cursor: grabbing; } 3537 3538.euiColorStopPopover-isLoadingPanel { 3539 visibility: hidden !important; } 3540 3541.euiColorStops.euiColorStops-isDragging:not(.euiColorStops-isDisabled):not(.euiColorStops-isReadOnly) { 3542 cursor: -webkit-grabbing; 3543 cursor: grabbing; } 3544 3545.euiColorStops__highlight { 3546 color: #98A2B3; } 3547 3548.euiColorPalettePicker__itemTitle { 3549 font-size: 12px; 3550 font-size: 0.75rem; 3551 line-height: 1.5; } 3552 3553.euiColorPalettePicker__itemTitle + .euiColorPaletteDisplay { 3554 margin-top: 4px; } 3555 3556.euiColorPaletteDisplay { 3557 display: -webkit-flex; 3558 display: flex; 3559 -webkit-flex-direction: row; 3560 flex-direction: row; 3561 overflow: hidden; 3562 height: 8px; } 3563 3564.euiColorPaletteDisplay--sizeExtraSmall { 3565 position: relative; 3566 height: 4px; 3567 border-radius: 4px; } 3568 .euiColorPaletteDisplay--sizeExtraSmall:after { 3569 position: absolute; 3570 top: 0; 3571 left: 0; 3572 right: 0; 3573 bottom: 0; 3574 border-radius: 4px; 3575 content: ''; 3576 pointer-events: none; 3577 border: 1px solid rgba(212, 218, 229, 0.2); } 3578 3579.euiColorPaletteDisplay--sizeExtraSmall .euiColorPaletteDisplayFixed__bleedArea { 3580 height: 4px; } 3581 3582.euiColorPaletteDisplay--sizeSmall { 3583 position: relative; 3584 height: 8px; 3585 border-radius: 8px; } 3586 .euiColorPaletteDisplay--sizeSmall:after { 3587 position: absolute; 3588 top: 0; 3589 left: 0; 3590 right: 0; 3591 bottom: 0; 3592 border-radius: 8px; 3593 content: ''; 3594 pointer-events: none; 3595 border: 1px solid rgba(212, 218, 229, 0.2); } 3596 3597.euiColorPaletteDisplay--sizeSmall .euiColorPaletteDisplayFixed__bleedArea { 3598 height: 8px; } 3599 3600.euiColorPaletteDisplay--sizeMedium { 3601 position: relative; 3602 height: 16px; 3603 border-radius: 16px; } 3604 .euiColorPaletteDisplay--sizeMedium:after { 3605 position: absolute; 3606 top: 0; 3607 left: 0; 3608 right: 0; 3609 bottom: 0; 3610 border-radius: 16px; 3611 content: ''; 3612 pointer-events: none; 3613 border: 1px solid rgba(212, 218, 229, 0.2); } 3614 3615.euiColorPaletteDisplay--sizeMedium .euiColorPaletteDisplayFixed__bleedArea { 3616 height: 16px; } 3617 3618.euiColorPaletteDisplayFixed__bleedArea { 3619 position: absolute; 3620 top: 0; 3621 left: 0; 3622 display: -webkit-flex; 3623 display: flex; 3624 height: 8px; 3625 width: calc(100% + 1px); } 3626 3627.euiComboBox { 3628 max-width: 400px; 3629 width: 100%; 3630 height: auto; 3631 position: relative; 3632 /** 3633 * 1. Allow pills to truncate their text with an ellipsis. 3634 * 2. Don't allow pills/placeholder to overlap with the caret, loading icon or clear button. 3635 * 3. The height on combo can be larger than normal text inputs. 3636 */ 3637 /** 3638 * 1. Force field height to match other field heights. 3639 * 2. Force input height to expand to fill this element. 3640 * 3. Reset appearance on Safari. 3641 * 4. Fix react-input-autosize appearance. 3642 * 5. Prevent a lot of input from causing the react-input-autosize to overflow the container. 3643 */ } 3644 .euiComboBox--fullWidth { 3645 max-width: 100%; } 3646 .euiComboBox--compressed { 3647 height: 32px; } 3648 .euiComboBox--inGroup { 3649 height: 100%; } 3650 .euiComboBox--compressed, 3651 .euiComboBox .euiFormControlLayout { 3652 height: auto; } 3653 .euiComboBox .euiComboBox__inputWrap { 3654 max-width: 400px; 3655 width: 100%; 3656 height: 40px; 3657 background-color: #16171c; 3658 background-repeat: no-repeat; 3659 background-size: 0% 100%; 3660 box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.2), 0 3px 2px -2px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1); 3661 transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in; 3662 font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 3663 font-weight: 400; 3664 letter-spacing: -.005em; 3665 -webkit-text-size-adjust: 100%; 3666 -ms-text-size-adjust: 100%; 3667 -webkit-font-kerning: normal; 3668 font-kerning: normal; 3669 font-size: 14px; 3670 color: #DFE5EF; 3671 border: none; 3672 border-radius: 0; 3673 padding: 12px; 3674 max-width: 400px; 3675 width: 100%; 3676 height: auto; 3677 padding: 4px 8px; 3678 display: -webkit-flex; 3679 display: flex; 3680 /* 1 */ 3681 outline: none; 3682 padding-right: 40px; 3683 /* 2 */ } 3684 .euiComboBox .euiComboBox__inputWrap--fullWidth { 3685 max-width: 100%; } 3686 .euiComboBox .euiComboBox__inputWrap--compressed { 3687 height: 32px; } 3688 .euiComboBox .euiComboBox__inputWrap--inGroup { 3689 height: 100%; } 3690 @supports (-moz-appearance: none) { 3691 .euiComboBox .euiComboBox__inputWrap { 3692 transition-property: box-shadow, background-image, background-size; } } 3693 @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { 3694 .euiComboBox .euiComboBox__inputWrap { 3695 line-height: 1em; } } 3696 .euiComboBox .euiComboBox__inputWrap::-webkit-input-placeholder { 3697 color: #81858f; 3698 opacity: 1; } 3699 .euiComboBox .euiComboBox__inputWrap::-moz-placeholder { 3700 color: #81858f; 3701 opacity: 1; } 3702 .euiComboBox .euiComboBox__inputWrap::placeholder { 3703 color: #81858f; 3704 opacity: 1; } 3705 .euiComboBox .euiComboBox__inputWrap--compressed { 3706 background-color: #16171c; 3707 background-repeat: no-repeat; 3708 background-size: 0% 100%; 3709 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); 3710 transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in; 3711 padding: 8px; 3712 border-radius: 2px; } 3713 @supports (-moz-appearance: none) { 3714 .euiComboBox .euiComboBox__inputWrap--compressed { 3715 transition-property: box-shadow, background-image, background-size; } } 3716 .euiComboBox .euiComboBox__inputWrap--inGroup { 3717 box-shadow: none !important; 3718 border-radius: 0; } 3719 .euiComboBox .euiComboBox__inputWrap--withIcon { 3720 padding-left: 40px; } 3721 .euiComboBox .euiComboBox__inputWrap--fullWidth { 3722 max-width: 100%; } 3723 .euiComboBox .euiComboBox__inputWrap--compressed { 3724 height: 32px; } 3725 .euiComboBox .euiComboBox__inputWrap--inGroup { 3726 height: 100%; } 3727 .euiComboBox .euiComboBox__inputWrap .euiComboBoxPill { 3728 max-width: calc(100% - 2px - 16px); } 3729 .euiComboBox .euiComboBox__inputWrap:not(.euiComboBox__inputWrap--noWrap) { 3730 padding-top: 4px; 3731 padding-bottom: 4px; 3732 padding-left: 4px; 3733 height: auto; 3734 /* 3 */ 3735 -webkit-flex-wrap: wrap; 3736 flex-wrap: wrap; 3737 /* 1 */ 3738 -webkit-align-content: flex-start; 3739 align-content: flex-start; } 3740 .euiComboBox .euiComboBox__inputWrap:not(.euiComboBox__inputWrap--noWrap):hover { 3741 cursor: text; } 3742 .euiComboBox .euiComboBox__inputWrap.euiComboBox__inputWrap-isClearable { 3743 padding-right: 62px; 3744 /* 2 */ } 3745 .euiComboBox .euiComboBox__inputWrap.euiComboBox__inputWrap-isLoading { 3746 padding-right: 62px; 3747 /* 2 */ } 3748 .euiComboBox .euiComboBox__inputWrap.euiComboBox__inputWrap-isLoading .euiComboBoxPlaceholder { 3749 padding-right: 62px; 3750 /* 2 */ } 3751 .euiComboBox .euiComboBox__inputWrap.euiComboBox__inputWrap-isLoading.euiComboBox__inputWrap-isClearable { 3752 padding-right: 84px; 3753 /* 2 */ } 3754 .euiComboBox .euiComboBox__input { 3755 display: -webkit-inline-flex !important; 3756 display: inline-flex !important; 3757 /* 1 */ 3758 height: 32px; 3759 /* 2 */ 3760 overflow: hidden; 3761 /* 5 */ } 3762 .euiComboBox .euiComboBox__input > input { 3763 font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 3764 font-weight: 400; 3765 letter-spacing: -.005em; 3766 -webkit-text-size-adjust: 100%; 3767 -ms-text-size-adjust: 100%; 3768 -webkit-font-kerning: normal; 3769 font-kerning: normal; 3770 -webkit-appearance: none; 3771 -moz-appearance: none; 3772 appearance: none; 3773 /* 3 */ 3774 padding: 0; 3775 border: none; 3776 background: transparent; 3777 font-size: 14px; 3778 color: #DFE5EF; 3779 margin: 4px; 3780 line-height: 1.5; 3781 /* 4 */ } 3782 .euiComboBox.euiComboBox-isOpen .euiComboBox__inputWrap { 3783 background-color: #111216; 3784 background-image: linear-gradient(to top, #1BA9F5, #1BA9F5 2px, transparent 2px, transparent 100%); 3785 background-size: 100% 100%; 3786 box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.2), 0 4px 4px -2px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1); } 3787 .euiComboBox.euiComboBox-isOpen .euiComboBox__inputWrap--compressed { 3788 background-color: #111216; 3789 background-image: linear-gradient(to top, #1BA9F5, #1BA9F5 2px, transparent 2px, transparent 100%); 3790 background-size: 100% 100%; 3791 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } 3792 .euiComboBox.euiComboBox-isInvalid .euiComboBox__inputWrap { 3793 background-image: linear-gradient(to top, #F66, #F66 2px, transparent 2px, transparent 100%); 3794 background-size: 100%; } 3795 .euiComboBox.euiComboBox-isDisabled .euiComboBox__inputWrap { 3796 color: #535966; 3797 -webkit-text-fill-color: #535966; 3798 cursor: not-allowed; 3799 background: #202128; 3800 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); 3801 -webkit-text-fill-color: unset; } 3802 .euiComboBox.euiComboBox-isDisabled .euiComboBox__inputWrap::-webkit-input-placeholder { 3803 color: #535966; 3804 opacity: 1; } 3805 .euiComboBox.euiComboBox-isDisabled .euiComboBox__inputWrap::-moz-placeholder { 3806 color: #535966; 3807 opacity: 1; } 3808 .euiComboBox.euiComboBox-isDisabled .euiComboBox__inputWrap::placeholder { 3809 color: #535966; 3810 opacity: 1; } 3811 .euiComboBox.euiComboBox-isDisabled .euiComboBoxPlaceholder, 3812 .euiComboBox.euiComboBox-isDisabled .euiComboBoxPill--plainText { 3813 color: #535966; 3814 -webkit-text-fill-color: #535966; } 3815 .euiComboBox.euiComboBox-isDisabled .euiComboBox__inputWrap:not(.euiComboBox__inputWrap--noWrap):hover { 3816 cursor: not-allowed; } 3817 .euiComboBox.euiComboBox--compressed .euiComboBox__inputWrap { 3818 line-height: 32px; 3819 /* 2 */ 3820 padding-top: 0; 3821 padding-bottom: 0; 3822 padding-right: 32px; 3823 /* 2 */ } 3824 .euiComboBox.euiComboBox--compressed .euiComboBox__inputWrap.euiComboBox__inputWrap-isClearable { 3825 padding-right: 54px; 3826 /* 2 */ } 3827 .euiComboBox.euiComboBox--compressed .euiComboBox__inputWrap.euiComboBox__inputWrap-isLoading { 3828 padding-right: 54px; 3829 /* 2 */ } 3830 .euiComboBox.euiComboBox--compressed .euiComboBox__inputWrap.euiComboBox__inputWrap-isLoading .euiComboBoxPlaceholder { 3831 padding-right: 54px; 3832 /* 2 */ } 3833 .euiComboBox.euiComboBox--compressed .euiComboBox__inputWrap.euiComboBox__inputWrap-isLoading.euiComboBox__inputWrap-isClearable { 3834 padding-right: 76px; 3835 /* 2 */ } 3836 .euiComboBox .euiFormControlLayout__prepend, 3837 .euiComboBox .euiFormControlLayout__append { 3838 height: auto !important; } 3839 3840.euiComboBox__input { 3841 max-width: 100%; } 3842 .euiComboBox__input input { 3843 border: none !important; 3844 box-shadow: none !important; 3845 outline: none !important; } 3846 3847/* 3848 * 1. Overwrites the base styling of EuiBadge, to give it a larger size and margins 3849 * that make sense in the input wrap. 3850 */ 3851.euiComboBoxPill { 3852 height: 22px; 3853 line-height: 22px; 3854 vertical-align: baseline; } 3855 .euiComboBoxPill, 3856 .euiComboBoxPill + .euiComboBoxPill { 3857 margin: 4px; } 3858 .euiComboBox--compressed .euiComboBoxPill, 3859 .euiComboBox--compressed .euiComboBoxPill + .euiComboBoxPill { 3860 margin: 5px 4px 0 0; } 3861 .euiComboBoxPill--plainText { 3862 font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 3863 font-weight: 400; 3864 letter-spacing: -.005em; 3865 -webkit-text-size-adjust: 100%; 3866 -ms-text-size-adjust: 100%; 3867 -webkit-font-kerning: normal; 3868 font-kerning: normal; 3869 max-width: 100%; 3870 overflow: hidden !important; 3871 text-overflow: ellipsis !important; 3872 white-space: nowrap !important; 3873 word-wrap: normal !important; 3874 line-height: 24px; 3875 font-size: 14px; 3876 padding: 0; 3877 color: #DFE5EF; 3878 vertical-align: middle; 3879 display: inline-block; } 3880 3881.euiComboBoxPlaceholder { 3882 max-width: 100%; 3883 overflow: hidden !important; 3884 text-overflow: ellipsis !important; 3885 white-space: nowrap !important; 3886 word-wrap: normal !important; 3887 padding-right: 40px; 3888 position: absolute; 3889 pointer-events: none; 3890 padding-left: 4px; 3891 line-height: 32px; 3892 color: #81858f; 3893 margin-bottom: 0 !important; } 3894 3895/** 3896 * 1. Using specificity to override panel shadow 3897 * 2. Prevent really long input from overflowing the container. 3898 */ 3899.euiComboBoxOptionsList { 3900 -webkit-transform: none !important; 3901 transform: none !important; 3902 top: 0; } 3903 .euiComboBoxOptionsList.euiPopover__panel-isAttached.euiComboBoxOptionsList--top { 3904 /* 1 */ 3905 box-shadow: 0 0 12px -1px rgba(0, 0, 0, 0.2), 0 0 4px -1px rgba(0, 0, 0, 0.2), 0 0 2px 0 rgba(0, 0, 0, 0.2); } 3906 3907.euiComboBoxOptionsList__empty { 3908 overflow-wrap: break-word !important; 3909 word-wrap: break-word !important; 3910 word-break: break-word; 3911 /* 2 */ 3912 padding: 8px; 3913 text-align: center; 3914 word-wrap: break-word; } 3915 3916.euiComboBoxOptionsList__rowWrap { 3917 padding: 0; 3918 max-height: 200px; 3919 overflow: hidden; } 3920 .euiComboBoxOptionsList__rowWrap > div { 3921 scrollbar-color: rgba(152, 162, 179, 0.5) transparent; 3922 scrollbar-width: thin; } 3923 .euiComboBoxOptionsList__rowWrap > div::-webkit-scrollbar { 3924 width: 16px; 3925 height: 16px; } 3926 .euiComboBoxOptionsList__rowWrap > div::-webkit-scrollbar-thumb { 3927 background-color: rgba(152, 162, 179, 0.5); 3928 background-clip: content-box; 3929 border-radius: 16px; 3930 border: 6px solid transparent; } 3931 .euiComboBoxOptionsList__rowWrap > div::-webkit-scrollbar-corner, .euiComboBoxOptionsList__rowWrap > div::-webkit-scrollbar-track { 3932 background-color: transparent; } 3933 3934.euiComboBoxOption { 3935 font-size: 14px; 3936 padding: 4px 8px 4px 16px; 3937 width: 100%; 3938 text-align: left; 3939 border: 1px solid #343741; 3940 border-color: transparent; 3941 display: -webkit-flex; 3942 display: flex; 3943 -webkit-align-items: center; 3944 align-items: center; } 3945 .euiComboBoxOption:hover { 3946 text-decoration: underline; } 3947 .euiComboBoxOption.euiComboBoxOption-isFocused { 3948 cursor: pointer; 3949 color: #1BA9F5; 3950 background-color: #052231; } 3951 .euiComboBoxOption.euiComboBoxOption-isDisabled { 3952 color: #535966; 3953 cursor: not-allowed; } 3954 .euiComboBoxOption.euiComboBoxOption-isDisabled:hover { 3955 text-decoration: none; } 3956 3957.euiComboBoxOption__contentWrapper { 3958 display: -webkit-flex; 3959 display: flex; } 3960 .euiComboBoxOption__contentWrapper .euiComboBoxOption__emptyStateText { 3961 -webkit-flex: 1; 3962 flex: 1; 3963 text-align: left; 3964 margin-bottom: 0; } 3965 .euiComboBoxOption__contentWrapper .euiComboBoxOption__enterBadge { 3966 -webkit-align-self: flex-start; 3967 align-self: flex-start; 3968 margin-left: 4px; } 3969 3970.euiComboBoxOption__content { 3971 text-overflow: ellipsis; 3972 overflow: hidden; 3973 white-space: nowrap; 3974 -webkit-flex: 1; 3975 flex: 1; 3976 text-align: left; } 3977 3978/** 3979 * 1. Force each title to be the same height as an option, so that the virtualized scroll logic 3980 * works. 3981 */ 3982.euiComboBoxTitle { 3983 font-size: 12px; 3984 padding: 11px 8px 4px; 3985 /* 1 */ 3986 width: 100%; 3987 font-weight: 700; 3988 color: #FFF; } 3989 3990.euiComment { 3991 font-size: 14px; 3992 display: -webkit-flex; 3993 display: flex; 3994 padding-bottom: 16px; 3995 min-height: 56px; } 3996 .euiComment .euiCommentEvent { 3997 -webkit-flex-grow: 1; 3998 flex-grow: 1; } 3999 .euiComment .euiCommentTimeline { 4000 position: relative; 4001 -webkit-flex-grow: 0; 4002 flex-grow: 0; 4003 margin-right: 16px; } 4004 .euiComment .euiCommentTimeline::before { 4005 content: ''; 4006 position: absolute; 4007 left: 20px; 4008 top: 24px; 4009 width: 2px; 4010 background-color: #343741; 4011 height: calc(100% + 24px); } 4012 4013.euiComment:last-of-type .euiCommentTimeline::before { 4014 display: none; } 4015 4016.euiComment--update:not(.euiComment--hasBody) { 4017 -webkit-align-items: center; 4018 align-items: center; } 4019 4020.euiCommentEvent--regular { 4021 background-color: #1D1E24; 4022 border: 1px solid #343741; 4023 border-radius: 4px; 4024 -webkit-flex-grow: 1; 4025 flex-grow: 1; } 4026 .euiCommentEvent--regular.euiCommentEvent--regular--flexGrowZero { 4027 -webkit-flex-grow: 0; 4028 flex-grow: 0; } 4029 .euiCommentEvent--regular.euiCommentEvent--regular--noBorder { 4030 border: none; } 4031 .euiCommentEvent--regular.euiCommentEvent--regular--hasShadow { 4032 box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3), 0 1px 5px -2px rgba(0, 0, 0, 0.3); 4033 border: 1px solid #343741; } 4034 .euiCommentEvent--regular.euiCommentEvent--regular--isClickable { 4035 transition: all 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); } 4036 .euiCommentEvent--regular.euiCommentEvent--regular--isClickable:enabled { 4037 display: block; 4038 width: 100%; 4039 text-align: left; } 4040 .euiCommentEvent--regular.euiCommentEvent--regular--isClickable:hover, .euiCommentEvent--regular.euiCommentEvent--regular--isClickable:focus { 4041 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 2px 2px -1px rgba(0, 0, 0, 0.3); 4042 -webkit-transform: translateY(-2px); 4043 transform: translateY(-2px); 4044 cursor: pointer; } 4045 .euiCommentEvent--regular.euiCommentEvent--regular--borderRadiusNone { 4046 border-radius: 0; } 4047 .euiCommentEvent--regular.euiCommentEvent--regular--borderRadiusMedium { 4048 border-radius: 4px; } 4049 .euiCommentEvent--regular.euiCommentEvent--regular--transparent { 4050 background-color: transparent; } 4051 .euiCommentEvent--regular.euiCommentEvent--regular--plain { 4052 background-color: #1D1E24; } 4053 .euiCommentEvent--regular.euiCommentEvent--regular--subdued { 4054 background-color: #141519; } 4055 .euiCommentEvent--regular.euiCommentEvent--regular--accent { 4056 background-color: #4b2b3a; } 4057 .euiCommentEvent--regular.euiCommentEvent--regular--primary { 4058 background-color: #08334a; } 4059 .euiCommentEvent--regular.euiCommentEvent--regular--success { 4060 background-color: #26443f; } 4061 .euiCommentEvent--regular.euiCommentEvent--regular--warning { 4062 background-color: #4d3e25; } 4063 .euiCommentEvent--regular.euiCommentEvent--regular--danger { 4064 background-color: #4d1f1f; } 4065 4066.euiCommentEvent { 4067 overflow: hidden; } 4068 4069.euiCommentEvent__header { 4070 line-height: 1.5; 4071 display: -webkit-flex; 4072 display: flex; 4073 -webkit-align-items: center; 4074 align-items: center; } 4075 4076.euiCommentEvent__headerData { 4077 -webkit-align-items: center; 4078 align-items: center; 4079 display: -webkit-flex; 4080 display: flex; 4081 -webkit-flex-wrap: wrap; 4082 flex-wrap: wrap; } 4083 .euiCommentEvent__headerData > div { 4084 padding-right: 4px; } 4085 4086.euiCommentEvent__headerUsername { 4087 font-weight: 600; } 4088 4089.euiCommentEvent--regular { 4090 box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3); 4091 border-radius: 4px; 4092 border: 1px solid #343741; } 4093 .euiCommentEvent--regular .euiCommentEvent__header { 4094 min-height: 40px; 4095 background-color: #25262E; 4096 border-bottom: 1px solid #343741; 4097 padding: 4px 8px; 4098 /** 4099 * Fix for IE when using align-items:center in an item that has min-height 4100 (https://github.com/philipwalton/flexbugs/issues/231#issuecomment-362790042) 4101 */ } 4102 @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { 4103 .euiCommentEvent--regular .euiCommentEvent__header::after { 4104 content: ''; 4105 min-height: 32px; 4106 font-size: 0; 4107 display: block; } } 4108 .euiCommentEvent--regular .euiCommentEvent__headerData { 4109 -webkit-flex-grow: 1; 4110 flex-grow: 1; } 4111 .euiCommentEvent--regular .euiCommentEvent__body { 4112 padding: 8px; } 4113 4114.euiCommentEvent--update .euiCommentEvent__header { 4115 -webkit-justify-content: flex-start; 4116 justify-content: flex-start; 4117 padding: 4px 0; } 4118 4119.euiCommentEvent--update .euiCommentEvent__headerData { 4120 padding-right: 8px; } 4121 4122.euiCommentEvent--update .euiCommentEvent__body { 4123 padding-top: 4px; } 4124 4125.euiCommentTimeline__content { 4126 min-width: 40px; 4127 display: -webkit-flex; 4128 display: flex; 4129 -webkit-justify-content: center; 4130 justify-content: center; 4131 -webkit-align-items: center; 4132 align-items: center; 4133 position: relative; } 4134 4135.euiCommentTimeline__icon--default { 4136 -webkit-flex-shrink: 0; 4137 flex-shrink: 0; 4138 display: -webkit-flex; 4139 display: flex; 4140 -webkit-justify-content: center; 4141 justify-content: center; 4142 -webkit-align-items: center; 4143 align-items: center; 4144 overflow-x: hidden; 4145 border-radius: 50%; 4146 background-color: #25262E; } 4147 .euiCommentTimeline__icon--default.euiCommentTimeline__icon--regular { 4148 width: 40px; 4149 height: 40px; } 4150 .euiCommentTimeline__icon--default.euiCommentTimeline__icon--update { 4151 width: 24px; 4152 height: 24px; } 4153 4154.euiContextMenu { 4155 width: 256px; 4156 max-width: 100%; 4157 position: relative; 4158 overflow: hidden; 4159 transition: height 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); 4160 border-radius: 4px; } 4161 .euiContextMenu .euiContextMenu__content { 4162 padding: 8px; } 4163 4164/** 4165 * 1. When there are multiple ContextMenuPanels, the ContextMenu will absolutely 4166 * position them. ContextMenuPanel will break the layout of a Popover if it's 4167 * absolutely positioned by default. 4168 */ 4169.euiContextMenu__panel { 4170 position: absolute; 4171 /* 1 */ } 4172 4173.euiContextMenu__icon { 4174 margin-right: 8px; } 4175 4176.euiContextMenuPanel { 4177 width: 100%; 4178 visibility: visible; 4179 outline-offset: -3px; } 4180 .euiContextMenuPanel:focus { 4181 outline: none; } 4182 .euiContextMenuPanel.euiContextMenuPanel-txInLeft { 4183 pointer-events: none; 4184 -webkit-animation: euiContextMenuPanelTxInLeft 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); 4185 animation: euiContextMenuPanelTxInLeft 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } 4186 .euiContextMenuPanel.euiContextMenuPanel-txOutLeft { 4187 pointer-events: none; 4188 -webkit-animation: euiContextMenuPanelTxOutLeft 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); 4189 animation: euiContextMenuPanelTxOutLeft 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } 4190 .euiContextMenuPanel.euiContextMenuPanel-txInRight { 4191 pointer-events: none; 4192 -webkit-animation: euiContextMenuPanelTxInRight 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); 4193 animation: euiContextMenuPanelTxInRight 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } 4194 .euiContextMenuPanel.euiContextMenuPanel-txOutRight { 4195 pointer-events: none; 4196 -webkit-animation: euiContextMenuPanelTxOutRight 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); 4197 animation: euiContextMenuPanelTxOutRight 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } 4198 4199.euiContextMenuPanel--next { 4200 -webkit-transform: translateX(256px); 4201 transform: translateX(256px); 4202 visibility: hidden; } 4203 4204.euiContextMenuPanel--previous { 4205 -webkit-transform: translateX(-256px); 4206 transform: translateX(-256px); 4207 visibility: hidden; } 4208 4209.euiContextMenuPanelTitle { 4210 overflow-wrap: break-word !important; 4211 word-wrap: break-word !important; 4212 word-break: break-word; 4213 color: #DFE5EF; 4214 font-size: 14px; 4215 font-size: 0.875rem; 4216 line-height: 1.5rem; 4217 font-weight: 700; 4218 padding: 12px; 4219 text-transform: uppercase; 4220 border-bottom: 1px solid #343741; 4221 padding: 12px; 4222 width: 100%; 4223 text-align: left; 4224 outline-offset: -3px; } 4225 .euiContextMenuPanelTitle:enabled:hover, .euiContextMenuPanelTitle:enabled:focus { 4226 text-decoration: underline; } 4227 .euiContextMenuPanelTitle--small { 4228 overflow-wrap: break-word !important; 4229 word-wrap: break-word !important; 4230 word-break: break-word; 4231 color: #DFE5EF; 4232 font-size: 12px; 4233 font-size: 0.75rem; 4234 line-height: 1.5rem; 4235 font-weight: 700; 4236 padding: 12px; 4237 text-transform: uppercase; 4238 border-bottom: 1px solid #343741; 4239 padding: 6px 8px; } 4240 4241@-webkit-keyframes euiContextMenuPanelTxInLeft { 4242 0% { 4243 -webkit-transform: translateX(256px); 4244 transform: translateX(256px); } 4245 100% { 4246 -webkit-transform: translateX(0); 4247 transform: translateX(0); } } 4248 4249@keyframes euiContextMenuPanelTxInLeft { 4250 0% { 4251 -webkit-transform: translateX(256px); 4252 transform: translateX(256px); } 4253 100% { 4254 -webkit-transform: translateX(0); 4255 transform: translateX(0); } } 4256 4257@-webkit-keyframes euiContextMenuPanelTxOutLeft { 4258 0% { 4259 -webkit-transform: translateX(0); 4260 transform: translateX(0); } 4261 100% { 4262 -webkit-transform: translateX(-256px); 4263 transform: translateX(-256px); } } 4264 4265@keyframes euiContextMenuPanelTxOutLeft { 4266 0% { 4267 -webkit-transform: translateX(0); 4268 transform: translateX(0); } 4269 100% { 4270 -webkit-transform: translateX(-256px); 4271 transform: translateX(-256px); } } 4272 4273@-webkit-keyframes euiContextMenuPanelTxInRight { 4274 0% { 4275 -webkit-transform: translateX(-256px); 4276 transform: translateX(-256px); } 4277 100% { 4278 -webkit-transform: translateX(0); 4279 transform: translateX(0); } } 4280 4281@keyframes euiContextMenuPanelTxInRight { 4282 0% { 4283 -webkit-transform: translateX(-256px); 4284 transform: translateX(-256px); } 4285 100% { 4286 -webkit-transform: translateX(0); 4287 transform: translateX(0); } } 4288 4289@-webkit-keyframes euiContextMenuPanelTxOutRight { 4290 0% { 4291 -webkit-transform: translateX(0); 4292 transform: translateX(0); } 4293 100% { 4294 -webkit-transform: translateX(256px); 4295 transform: translateX(256px); } } 4296 4297@keyframes euiContextMenuPanelTxOutRight { 4298 0% { 4299 -webkit-transform: translateX(0); 4300 transform: translateX(0); } 4301 100% { 4302 -webkit-transform: translateX(256px); 4303 transform: translateX(256px); } } 4304 4305.euiContextMenuItem { 4306 display: block; 4307 padding: 12px; 4308 width: 100%; 4309 text-align: left; 4310 color: #DFE5EF; 4311 outline-offset: -3px; } 4312 .euiContextMenuItem:hover, .euiContextMenuItem:focus { 4313 text-decoration: underline; } 4314 .euiContextMenuItem:focus { 4315 background-color: #052231; } 4316 .euiContextMenuItem.euiContextMenuItem-isDisabled { 4317 color: #4c4e51; 4318 cursor: default; } 4319 .euiContextMenuItem.euiContextMenuItem-isDisabled:hover, .euiContextMenuItem.euiContextMenuItem-isDisabled:focus { 4320 text-decoration: none; } 4321 .euiContextMenuItem--small { 4322 padding: 6px 8px; } 4323 .euiContextMenuItem--small .euiContextMenuItem__text { 4324 font-size: 14px; 4325 font-size: 0.875rem; 4326 line-height: 1.5; } 4327 4328.euiContextMenuItem__inner { 4329 display: -webkit-flex; 4330 display: flex; } 4331 4332.euiContextMenuItem__text { 4333 -webkit-flex-grow: 1; 4334 flex-grow: 1; 4335 overflow: hidden; } 4336 4337.euiContextMenuItem__arrow { 4338 -webkit-align-self: flex-end; 4339 align-self: flex-end; } 4340 4341.euiContextMenu__itemLayout { 4342 display: -webkit-flex; 4343 display: flex; 4344 -webkit-align-items: center; 4345 align-items: center; } 4346 .euiContextMenu__itemLayout.euiContextMenu__itemLayout--bottom { 4347 -webkit-align-items: flex-end; 4348 align-items: flex-end; } 4349 .euiContextMenu__itemLayout.euiContextMenu__itemLayout--top { 4350 -webkit-align-items: flex-start; 4351 align-items: flex-start; } 4352 .euiContextMenu__itemLayout .euiContextMenu__icon { 4353 -webkit-flex-shrink: 0; 4354 flex-shrink: 0; } 4355 4356.euiControlBar { 4357 background: #000; 4358 color: #a9aaad; 4359 display: -webkit-flex; 4360 display: flex; 4361 -webkit-flex-direction: column; 4362 flex-direction: column; 4363 box-shadow: inset 0 40px 0 #000, inset 0 600rem 0 #141519; 4364 bottom: 0; 4365 -webkit-transform: translateY(0); 4366 transform: translateY(0); 4367 height: 40px; 4368 max-height: calc(100vh - 80px); } 4369 .euiControlBar--fixed { 4370 position: fixed; 4371 z-index: 6000; } 4372 .euiControlBar--absolute { 4373 position: absolute; 4374 z-index: 1000; } 4375 .euiControlBar--relative { 4376 position: relative; } 4377 .euiControlBar-isOpen { 4378 -webkit-animation-duration: 250ms; 4379 animation-duration: 250ms; 4380 -webkit-animation-timing-function: cubic-bezier(0.694, 0.0482, 0.335, 1); 4381 animation-timing-function: cubic-bezier(0.694, 0.0482, 0.335, 1); 4382 -webkit-animation-fill-mode: forwards; 4383 animation-fill-mode: forwards; } 4384 .euiControlBar-isOpen.euiControlBar--large { 4385 -webkit-animation-name: euiControlBarOpenPanelLarge; 4386 animation-name: euiControlBarOpenPanelLarge; 4387 height: calc(100vh - 80px); 4388 bottom: -100vh; } 4389 .euiControlBar-isOpen.euiControlBar--medium { 4390 -webkit-animation-name: euiControlBarOpenPanelMedium; 4391 animation-name: euiControlBarOpenPanelMedium; 4392 height: 480px; 4393 bottom: -480px; } 4394 .euiControlBar-isOpen.euiControlBar--small { 4395 -webkit-animation-name: euiControlBarOpenPanelSmall; 4396 animation-name: euiControlBarOpenPanelSmall; 4397 height: 240px; 4398 bottom: -240px; } 4399 4400.euiControlBar__controls { 4401 height: 40px; 4402 width: 100%; 4403 display: -webkit-flex; 4404 display: flex; 4405 -webkit-align-items: center; 4406 align-items: center; 4407 overflow-y: hidden; 4408 overflow-x: auto; 4409 padding: 0 12px; } 4410 4411.euiControlBar__content { 4412 scrollbar-color: rgba(152, 162, 179, 0.5) transparent; 4413 scrollbar-width: thin; 4414 overflow-y: auto; 4415 width: 100%; 4416 height: calc(100% - 40px); 4417 background-color: #141519; 4418 -webkit-animation-name: euiControlBarShowContent; 4419 animation-name: euiControlBarShowContent; 4420 -webkit-animation-duration: 350ms; 4421 animation-duration: 350ms; 4422 -webkit-animation-iteration-count: 1; 4423 animation-iteration-count: 1; 4424 -webkit-animation-timing-function: cubic-bezier(0.694, 0.0482, 0.335, 1); 4425 animation-timing-function: cubic-bezier(0.694, 0.0482, 0.335, 1); 4426 color: #D4DAE5; } 4427 .euiControlBar__content::-webkit-scrollbar { 4428 width: 16px; 4429 height: 16px; } 4430 .euiControlBar__content::-webkit-scrollbar-thumb { 4431 background-color: rgba(152, 162, 179, 0.5); 4432 background-clip: content-box; 4433 border-radius: 16px; 4434 border: 6px solid transparent; } 4435 .euiControlBar__content::-webkit-scrollbar-corner, .euiControlBar__content::-webkit-scrollbar-track { 4436 background-color: transparent; } 4437 4438.euiControlBar__icon { 4439 -webkit-flex-shrink: 0; 4440 flex-shrink: 0; 4441 margin-left: 8px; 4442 margin-right: 8px; } 4443 4444.euiControlBar__buttonIcon { 4445 -webkit-flex-shrink: 0; 4446 flex-shrink: 0; 4447 min-width: 40px; 4448 min-height: 40px; } 4449 4450.euiControlBar__button { 4451 -webkit-flex-shrink: 0; 4452 flex-shrink: 0; 4453 border-radius: 2px; 4454 margin-left: 4px; 4455 font-size: 14px; } 4456 .euiControlBar__button:enabled:hover { 4457 -webkit-transform: none; 4458 transform: none; 4459 box-shadow: none; } 4460 .euiControlBar__button:last-child { 4461 margin-right: 4px; } 4462 4463.euiControlBar__breadcrumbs .euiBreadcrumb:not(.euiBreadcrumb--last) .euiBreadcrumb__content { 4464 color: #7a7f89; } 4465 4466.euiControlBar__breadcrumbs .euiBreadcrumb::after { 4467 background: rgba(255, 255, 255, 0.2); } 4468 4469.euiControlBar__spacer { 4470 -webkit-flex-grow: 1; 4471 flex-grow: 1; 4472 height: 100%; } 4473 4474.euiControlBar__divider { 4475 -webkit-flex-shrink: 0; 4476 flex-shrink: 0; 4477 height: 100%; 4478 width: 1px; 4479 background-color: rgba(255, 255, 255, 0.2); } 4480 4481.euiControlBar__text { 4482 max-width: 100%; 4483 overflow: hidden !important; 4484 text-overflow: ellipsis !important; 4485 white-space: nowrap !important; 4486 word-wrap: normal !important; 4487 font-size: 14px; 4488 font-size: 0.875rem; 4489 line-height: 1.5; 4490 padding: 0 8px; 4491 color: #a9aaad; } 4492 .euiControlBar__text:last-child { 4493 padding-right: 0; } 4494 4495.euiControlBar__tab { 4496 max-width: 100%; 4497 overflow: hidden !important; 4498 text-overflow: ellipsis !important; 4499 white-space: nowrap !important; 4500 word-wrap: normal !important; 4501 font-size: 14px; 4502 font-size: 0.875rem; 4503 line-height: 1.5; 4504 color: #a9aaad; 4505 padding: 0 16px; 4506 text-align: center; 4507 height: 100%; } 4508 .euiControlBar__tab:hover, .euiControlBar__tab:focus { 4509 text-decoration: underline; 4510 cursor: pointer; } 4511 .euiControlBar__tab.euiControlBar__tab--active { 4512 background-color: #141519; 4513 box-shadow: inset 0 4px 0 #1BA9F5; 4514 color: #1BA9F5; } 4515 4516.euiControlBar__controls .euiLink.euiLink--primary { 4517 color: #1BA9F5; } 4518 .euiControlBar__controls .euiLink.euiLink--primary:hover { 4519 color: #1376ac; } 4520 4521.euiControlBar__controls .euiLink.euiLink--text { 4522 color: #FFF; } 4523 4524.euiControlBar__controls .euiControlBar__button.euiButton--primary:enabled { 4525 box-shadow: none; } 4526 4527.euiControlBar__controls .euiControlBar__button.euiButton--primary:enabled:not(.euiButton--fill) { 4528 color: #1BA9F5; 4529 border-color: #1BA9F5; } 4530 4531.euiControlBar__controls .euiButtonIcon--primary { 4532 color: #1BA9F5; } 4533 4534.euiControlBar__controls .euiLink.euiLink--accent { 4535 color: #F990C0; } 4536 .euiControlBar__controls .euiLink.euiLink--accent:hover { 4537 color: #ae6586; } 4538 4539.euiControlBar__controls .euiLink.euiLink--text { 4540 color: #FFF; } 4541 4542.euiControlBar__controls .euiControlBar__button.euiButton--accent:enabled { 4543 box-shadow: none; } 4544 4545.euiControlBar__controls .euiControlBar__button.euiButton--accent:enabled:not(.euiButton--fill) { 4546 color: #F990C0; 4547 border-color: #F990C0; } 4548 4549.euiControlBar__controls .euiButtonIcon--accent { 4550 color: #F990C0; } 4551 4552.euiControlBar__controls .euiLink.euiLink--secondary { 4553 color: #7DE2D1; } 4554 .euiControlBar__controls .euiLink.euiLink--secondary:hover { 4555 color: #589e92; } 4556 4557.euiControlBar__controls .euiLink.euiLink--text { 4558 color: #FFF; } 4559 4560.euiControlBar__controls .euiControlBar__button.euiButton--secondary:enabled { 4561 box-shadow: none; } 4562 4563.euiControlBar__controls .euiControlBar__button.euiButton--secondary:enabled:not(.euiButton--fill) { 4564 color: #7DE2D1; 4565 border-color: #7DE2D1; } 4566 4567.euiControlBar__controls .euiButtonIcon--secondary { 4568 color: #7DE2D1; } 4569 4570.euiControlBar__controls .euiLink.euiLink--success { 4571 color: #7DE2D1; } 4572 .euiControlBar__controls .euiLink.euiLink--success:hover { 4573 color: #589e92; } 4574 4575.euiControlBar__controls .euiLink.euiLink--text { 4576 color: #FFF; } 4577 4578.euiControlBar__controls .euiControlBar__button.euiButton--success:enabled { 4579 box-shadow: none; } 4580 4581.euiControlBar__controls .euiControlBar__button.euiButton--success:enabled:not(.euiButton--fill) { 4582 color: #7DE2D1; 4583 border-color: #7DE2D1; } 4584 4585.euiControlBar__controls .euiButtonIcon--success { 4586 color: #7DE2D1; } 4587 4588.euiControlBar__controls .euiLink.euiLink--warning { 4589 color: #FFCE7A; } 4590 .euiControlBar__controls .euiLink.euiLink--warning:hover { 4591 color: #b39055; } 4592 4593.euiControlBar__controls .euiLink.euiLink--text { 4594 color: #FFF; } 4595 4596.euiControlBar__controls .euiControlBar__button.euiButton--warning:enabled { 4597 box-shadow: none; } 4598 4599.euiControlBar__controls .euiControlBar__button.euiButton--warning:enabled:not(.euiButton--fill) { 4600 color: #FFCE7A; 4601 border-color: #FFCE7A; } 4602 4603.euiControlBar__controls .euiButtonIcon--warning { 4604 color: #FFCE7A; } 4605 4606.euiControlBar__controls .euiLink.euiLink--danger { 4607 color: #F66; } 4608 .euiControlBar__controls .euiLink.euiLink--danger:hover { 4609 color: #b34747; } 4610 4611.euiControlBar__controls .euiLink.euiLink--text { 4612 color: #FFF; } 4613 4614.euiControlBar__controls .euiControlBar__button.euiButton--danger:enabled { 4615 box-shadow: none; } 4616 4617.euiControlBar__controls .euiControlBar__button.euiButton--danger:enabled:not(.euiButton--fill) { 4618 color: #F66; 4619 border-color: #F66; } 4620 4621.euiControlBar__controls .euiButtonIcon--danger { 4622 color: #F66; } 4623 4624.euiControlBar__controls .euiLink.euiLink--subdued { 4625 color: #7a7f89; } 4626 .euiControlBar__controls .euiLink.euiLink--subdued:hover { 4627 color: #555960; } 4628 4629.euiControlBar__controls .euiLink.euiLink--text { 4630 color: #FFF; } 4631 4632.euiControlBar__controls .euiControlBar__button.euiButton--subdued:enabled { 4633 box-shadow: none; } 4634 4635.euiControlBar__controls .euiControlBar__button.euiButton--subdued:enabled:not(.euiButton--fill) { 4636 color: #7a7f89; 4637 border-color: #7a7f89; } 4638 4639.euiControlBar__controls .euiButtonIcon--subdued { 4640 color: #7a7f89; } 4641 4642.euiControlBar__controls .euiLink.euiLink--ghost { 4643 color: #FFF; } 4644 .euiControlBar__controls .euiLink.euiLink--ghost:hover { 4645 color: #b3b3b3; } 4646 4647.euiControlBar__controls .euiLink.euiLink--text { 4648 color: #FFF; } 4649 4650.euiControlBar__controls .euiControlBar__button.euiButton--ghost:enabled { 4651 box-shadow: none; } 4652 4653.euiControlBar__controls .euiControlBar__button.euiButton--ghost:enabled:not(.euiButton--fill) { 4654 color: #FFF; 4655 border-color: #FFF; } 4656 4657.euiControlBar__controls .euiButtonIcon--ghost { 4658 color: #FFF; } 4659 4660.euiControlBar__controls .euiLink.euiLink--text { 4661 color: #98A2B3; } 4662 .euiControlBar__controls .euiLink.euiLink--text:hover { 4663 color: #6a717d; } 4664 4665.euiControlBar__controls .euiLink.euiLink--text { 4666 color: #FFF; } 4667 4668.euiControlBar__controls .euiControlBar__button.euiButton--text:enabled { 4669 box-shadow: none; } 4670 4671.euiControlBar__controls .euiControlBar__button.euiButton--text:enabled:not(.euiButton--fill) { 4672 color: #98A2B3; 4673 border-color: #98A2B3; } 4674 4675.euiControlBar__controls .euiButtonIcon--text { 4676 color: #98A2B3; } 4677 4678@media only screen and (max-width: 574px) { 4679 .euiControlBar:not(.euiControlBar--showOnMobile) { 4680 display: none; } } 4681 4682@media only screen and (min-width: 575px) and (max-width: 767px) { 4683 .euiControlBar:not(.euiControlBar--showOnMobile) { 4684 display: none; } } 4685 4686@-webkit-keyframes euiControlBarOpenPanelLarge { 4687 0% { 4688 -webkit-transform: translateY(calc((40px * 3) * -1)); 4689 transform: translateY(calc((40px * 3) * -1)); } 4690 100% { 4691 -webkit-transform: translateY(-100vh); 4692 transform: translateY(-100vh); } } 4693 4694@keyframes euiControlBarOpenPanelLarge { 4695 0% { 4696 -webkit-transform: translateY(calc((40px * 3) * -1)); 4697 transform: translateY(calc((40px * 3) * -1)); } 4698 100% { 4699 -webkit-transform: translateY(-100vh); 4700 transform: translateY(-100vh); } } 4701 4702@-webkit-keyframes euiControlBarOpenPanelMedium { 4703 0% { 4704 -webkit-transform: translateY(-40px); 4705 transform: translateY(-40px); } 4706 100% { 4707 -webkit-transform: translateY(-480px); 4708 transform: translateY(-480px); } } 4709 4710@keyframes euiControlBarOpenPanelMedium { 4711 0% { 4712 -webkit-transform: translateY(-40px); 4713 transform: translateY(-40px); } 4714 100% { 4715 -webkit-transform: translateY(-480px); 4716 transform: translateY(-480px); } } 4717 4718@-webkit-keyframes euiControlBarOpenPanelSmall { 4719 0% { 4720 -webkit-transform: translateY(-40px); 4721 transform: translateY(-40px); } 4722 100% { 4723 -webkit-transform: translateY(-240px); 4724 transform: translateY(-240px); } } 4725 4726@keyframes euiControlBarOpenPanelSmall { 4727 0% { 4728 -webkit-transform: translateY(-40px); 4729 transform: translateY(-40px); } 4730 100% { 4731 -webkit-transform: translateY(-240px); 4732 transform: translateY(-240px); } } 4733 4734@-webkit-keyframes euiControlBarShowContent { 4735 0% { 4736 opacity: 0; } 4737 100% { 4738 opacity: 1; } } 4739 4740@keyframes euiControlBarShowContent { 4741 0% { 4742 opacity: 0; } 4743 100% { 4744 opacity: 1; } } 4745 4746/** 4747 * 1. Account for inner box-shadow style border 4748 */ 4749.euiDatePickerRange { 4750 max-width: 400px; 4751 width: 100%; 4752 height: auto; 4753 background-color: #16171c; 4754 background-repeat: no-repeat; 4755 background-size: 0% 100%; 4756 box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.2), 0 3px 2px -2px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1); 4757 transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in; 4758 display: -webkit-flex; 4759 display: flex; 4760 -webkit-align-items: center; 4761 align-items: center; 4762 padding: 1px; 4763 /* 1 */ } 4764 .euiDatePickerRange--fullWidth { 4765 max-width: 100%; } 4766 .euiDatePickerRange--compressed { 4767 height: 32px; } 4768 .euiDatePickerRange--inGroup { 4769 height: 100%; } 4770 @supports (-moz-appearance: none) { 4771 .euiDatePickerRange { 4772 transition-property: box-shadow, background-image, background-size; } } 4773 .euiDatePickerRange > * { 4774 -webkit-flex-grow: 1; 4775 flex-grow: 1; } 4776 .euiDatePickerRange .euiFieldText.euiDatePicker { 4777 box-shadow: none !important; 4778 text-align: center; } 4779 .euiDatePickerRange .euiDatePickerRange__start { 4780 border-top-right-radius: 0; 4781 border-bottom-right-radius: 0; } 4782 .euiDatePickerRange .euiDatePickerRange__end { 4783 border-top-left-radius: 0; 4784 border-bottom-left-radius: 0; } 4785 .euiDatePickerRange .react-datepicker-popper .euiFieldText.euiDatePicker { 4786 text-align: left; } 4787 .euiDatePickerRange--inGroup { 4788 box-shadow: none; 4789 padding: 0; } 4790 .euiDatePickerRange--inGroup .euiDatePicker { 4791 height: 38px; } 4792 .euiDatePickerRange > .euiDatePickerRange__delimeter { 4793 background-color: transparent !important; 4794 line-height: 1 !important; 4795 -webkit-flex: 0 0 auto; 4796 flex: 0 0 auto; 4797 padding-left: 6px; 4798 padding-right: 6px; } 4799 4800.euiDatePickerRange--readOnly { 4801 background: #202128; } 4802 4803.euiSuperDatePicker__absoluteDateFormRow { 4804 padding: 0 8px 8px; } 4805 4806.euiDatePopoverButton { 4807 font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 4808 font-weight: 400; 4809 letter-spacing: -.005em; 4810 -webkit-text-size-adjust: 100%; 4811 -ms-text-size-adjust: 100%; 4812 -webkit-font-kerning: normal; 4813 font-kerning: normal; 4814 font-size: 14px; 4815 color: #DFE5EF; 4816 display: block; 4817 width: 100%; 4818 padding: 0 8px; 4819 line-height: 38px; 4820 height: 38px; 4821 word-break: break-all; 4822 transition: background 150ms ease-in; 4823 background-size: 100%; } 4824 @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { 4825 .euiDatePopoverButton { 4826 line-height: 1em; } } 4827 .euiDatePopoverButton::-webkit-input-placeholder { 4828 color: #81858f; 4829 opacity: 1; } 4830 .euiDatePopoverButton::-moz-placeholder { 4831 color: #81858f; 4832 opacity: 1; } 4833 .euiDatePopoverButton::placeholder { 4834 color: #81858f; 4835 opacity: 1; } 4836 .euiDatePopoverButton:focus, .euiDatePopoverButton-isSelected { 4837 background-image: linear-gradient(to top, #1BA9F5, #1BA9F5 2px, transparent 2px, transparent 100%); } 4838 .euiDatePopoverButton-needsUpdating { 4839 background-color: #26443f; 4840 color: #7DE2D1; } 4841 .euiDatePopoverButton-needsUpdating:focus, .euiDatePopoverButton-needsUpdating.euiDatePopoverButton-isSelected { 4842 background-image: linear-gradient(to top, #7DE2D1, #7DE2D1 2px, transparent 2px, transparent 100%); } 4843 .euiDatePopoverButton-isInvalid { 4844 background-color: #4d1f1f; 4845 color: #F66; } 4846 .euiDatePopoverButton-isInvalid:focus, .euiDatePopoverButton-isInvalid.euiDatePopoverButton-isSelected { 4847 background-image: linear-gradient(to top, #F66, #F66 2px, transparent 2px, transparent 100%); } 4848 .euiDatePopoverButton:disabled { 4849 background-color: #202128; 4850 color: #98A2B3; 4851 cursor: default; } 4852 4853.euiDatePopoverButton--start { 4854 text-align: right; } 4855 4856.euiDatePopoverButton--end { 4857 text-align: left; } 4858 4859.euiDatePopoverContent { 4860 width: 400px; 4861 max-width: 100%; } 4862 4863.euiDatePopoverContent__padded { 4864 padding: 8px; } 4865 4866.euiDatePopoverContent__padded--large { 4867 padding: 16px; } 4868 4869@media only screen and (max-width: 574px) { 4870 .euiDatePopoverContent { 4871 width: 284px; } } 4872 4873.euiQuickSelectPopover__content { 4874 width: 400px; 4875 max-width: 100%; } 4876 4877.euiQuickSelectPopover__section { 4878 scrollbar-color: rgba(152, 162, 179, 0.5) transparent; 4879 scrollbar-width: thin; 4880 max-height: 132px; 4881 overflow: hidden; 4882 overflow-y: auto; 4883 padding: 8px 0 4px; } 4884 .euiQuickSelectPopover__section::-webkit-scrollbar { 4885 width: 16px; 4886 height: 16px; } 4887 .euiQuickSelectPopover__section::-webkit-scrollbar-thumb { 4888 background-color: rgba(152, 162, 179, 0.5); 4889 background-clip: content-box; 4890 border-radius: 16px; 4891 border: 6px solid transparent; } 4892 .euiQuickSelectPopover__section::-webkit-scrollbar-corner, .euiQuickSelectPopover__section::-webkit-scrollbar-track { 4893 background-color: transparent; } 4894 4895.euiQuickSelectPopover__buttonText { 4896 margin-right: 4px !important; } 4897 4898.euiQuickSelectPopover__anchor { 4899 height: 100%; } 4900 4901.euiQuickSelectPopover__sectionItem { 4902 font-size: 14px; 4903 line-height: 14px; } 4904 .euiQuickSelectPopover__sectionItem:not(:last-of-type) { 4905 margin-bottom: 8px; } 4906 4907.euiQuickSelect__applyButton { 4908 min-width: 0; } 4909 4910.euiRefreshInterval__startButton { 4911 min-width: 90px; } 4912 4913.euiSuperDatePicker__flexWrapper { 4914 max-width: calc(100% + 8px); 4915 width: 606px; } 4916 4917.euiSuperDatePicker__flexWrapper--isAutoRefreshOnly { 4918 width: 400px; } 4919 4920.euiSuperDatePicker__flexWrapper--noUpdateButton { 4921 width: 480px; } 4922 4923.euiSuperDatePicker { 4924 max-width: 100% !important; } 4925 .euiSuperDatePicker > .euiFormControlLayout__childrenWrapper { 4926 -webkit-flex: 1 1 100%; 4927 flex: 1 1 100%; 4928 overflow: hidden; } 4929 .euiSuperDatePicker > .euiFormControlLayout__childrenWrapper > .euiDatePickerRange { 4930 max-width: none; 4931 width: auto; 4932 border-radius: 0 0 0 0; } 4933 4934.euiSuperDatePicker__startPopoverButton { 4935 margin-right: -12px; } 4936 4937.euiSuperDatePicker__prettyFormat { 4938 font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 4939 font-weight: 400; 4940 letter-spacing: -.005em; 4941 -webkit-text-size-adjust: 100%; 4942 -ms-text-size-adjust: 100%; 4943 -webkit-font-kerning: normal; 4944 font-kerning: normal; 4945 font-size: 14px; 4946 color: #DFE5EF; 4947 display: block; 4948 width: 100%; 4949 padding: 0 8px; 4950 line-height: 38px; 4951 height: 38px; 4952 word-break: break-all; 4953 transition: background 150ms ease-in; 4954 display: -webkit-flex; 4955 display: flex; 4956 -webkit-justify-content: space-between; 4957 justify-content: space-between; 4958 text-align: left; } 4959 @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { 4960 .euiSuperDatePicker__prettyFormat { 4961 line-height: 1em; } } 4962 .euiSuperDatePicker__prettyFormat::-webkit-input-placeholder { 4963 color: #81858f; 4964 opacity: 1; } 4965 .euiSuperDatePicker__prettyFormat::-moz-placeholder { 4966 color: #81858f; 4967 opacity: 1; } 4968 .euiSuperDatePicker__prettyFormat::placeholder { 4969 color: #81858f; 4970 opacity: 1; } 4971 .euiSuperDatePicker__prettyFormat:not(:disabled):hover, .euiSuperDatePicker__prettyFormat:focus { 4972 text-decoration: none; } 4973 .euiSuperDatePicker__prettyFormat:not(:disabled):hover .euiSuperDatePicker__prettyFormatLink, .euiSuperDatePicker__prettyFormat:focus .euiSuperDatePicker__prettyFormatLink { 4974 text-decoration: underline; } 4975 .euiSuperDatePicker__prettyFormat:disabled { 4976 background-color: #202128; 4977 color: #98A2B3; 4978 cursor: not-allowed; } 4979 .euiSuperDatePicker__prettyFormat:disabled .euiSuperDatePicker__prettyFormatLink { 4980 display: none; } 4981 4982.euiSuperDatePicker__prettyFormatLink { 4983 color: #1BA9F5; 4984 padding-left: 4px; 4985 -webkit-flex-shrink: 0; 4986 flex-shrink: 0; } 4987 4988@media only screen and (max-width: 574px) { 4989 .euiSuperDatePicker__flexWrapper { 4990 width: calc(100% + 8px); } 4991 .euiSuperDatePicker__prettyFormatLink { 4992 -webkit-flex-shrink: 1; 4993 flex-shrink: 1; 4994 min-width: 3em; } } 4995 4996@media only screen and (min-width: 575px) and (max-width: 767px) { 4997 .euiSuperDatePicker__flexWrapper { 4998 width: calc(100% + 8px); } 4999 .euiSuperDatePicker__prettyFormatLink { 5000 -webkit-flex-shrink: 1; 5001 flex-shrink: 1; 5002 min-width: 3em; } } 5003 5004.euiSuperUpdateButton { 5005 min-width: 118px; } 5006 5007@media only screen and (max-width: 574px) { 5008 .euiSuperUpdateButton { 5009 min-width: 0; } 5010 .euiSuperUpdateButton .euiSuperUpdateButton__text { 5011 display: none; } } 5012 5013@media only screen and (min-width: 575px) and (max-width: 767px) { 5014 .euiSuperUpdateButton { 5015 min-width: 0; } 5016 .euiSuperUpdateButton .euiSuperUpdateButton__text { 5017 display: none; } } 5018 5019.euiDataGrid { 5020 display: -webkit-flex; 5021 display: flex; 5022 -webkit-flex-direction: column; 5023 flex-direction: column; 5024 -webkit-align-items: stretch; 5025 align-items: stretch; 5026 overflow: hidden; 5027 height: 100%; } 5028 5029.euiDataGrid--fullScreen { 5030 height: 100%; 5031 position: fixed; 5032 top: 0; 5033 left: 0; 5034 right: 0; 5035 bottom: 0; 5036 z-index: 999; 5037 background: #1D1E24; } 5038 .euiDataGrid--fullScreen .euiDataGrid__pagination { 5039 padding-bottom: 4px; 5040 background: #25262E; 5041 border-top: 1px solid #343741; } 5042 .euiDataGrid--fullScreen .euiDataGrid__verticalScroll .euiDataGridRow { 5043 will-change: transform; } 5044 5045.euiDataGrid__content { 5046 height: 100%; 5047 font-feature-settings: 'tnum' 1; 5048 max-width: 100%; 5049 width: 100%; 5050 z-index: 2; 5051 background: #1D1E24; } 5052 5053.euiDataGrid__controls { 5054 background: #141519; 5055 position: relative; 5056 z-index: 3; 5057 border: 1px solid #343741; 5058 padding: 4px; 5059 -webkit-flex-grow: 0; 5060 flex-grow: 0; } 5061 .euiDataGrid__controls > * { 5062 margin-left: 2px; } 5063 5064.euiDataGrid__controlBtn { 5065 border-radius: 4px; } 5066 .euiDataGrid__controlBtn:focus { 5067 background: #3b3c43; } 5068 5069.euiDataGrid__controlBtn--active, 5070.euiDataGrid__controlBtn--active:focus { 5071 font-weight: 600; 5072 color: #FFF; } 5073 5074.euiDataGrid--bordersNone .euiDataGrid__controls { 5075 border: none; 5076 background: #1D1E24; } 5077 5078.euiDataGrid--bordersHorizontal .euiDataGrid__controls { 5079 border-right: none; 5080 border-left: none; 5081 border-top: none; 5082 background: #1D1E24; } 5083 5084.euiDataGrid__pagination { 5085 padding-top: 4px; 5086 -webkit-flex-grow: 0; 5087 flex-grow: 0; } 5088 5089.euiDataGrid__verticalScroll { 5090 -webkit-flex-grow: 1; 5091 flex-grow: 1; 5092 overflow-y: hidden; 5093 height: 100%; } 5094 5095.euiDataGrid__overflow { 5096 overflow-y: hidden; 5097 height: 100%; 5098 background: #1D1E24; } 5099 5100.euiDataGrid__restrictBody { 5101 height: 100vh; 5102 overflow: hidden; } 5103 .euiDataGrid__restrictBody .euiHeader { 5104 z-index: 998; } 5105 5106.euiDataGrid__controlScroll { 5107 scrollbar-color: rgba(152, 162, 179, 0.5) transparent; 5108 scrollbar-width: thin; 5109 height: 100%; 5110 overflow-y: auto; 5111 overflow-x: hidden; 5112 -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%); 5113 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%); 5114 max-height: 400px; 5115 padding: 8px; 5116 margin: -8px; } 5117 .euiDataGrid__controlScroll::-webkit-scrollbar { 5118 width: 16px; 5119 height: 16px; } 5120 .euiDataGrid__controlScroll::-webkit-scrollbar-thumb { 5121 background-color: rgba(152, 162, 179, 0.5); 5122 background-clip: content-box; 5123 border-radius: 16px; 5124 border: 6px solid transparent; } 5125 .euiDataGrid__controlScroll::-webkit-scrollbar-corner, .euiDataGrid__controlScroll::-webkit-scrollbar-track { 5126 background-color: transparent; } 5127 .euiDataGrid__controlScroll:focus { 5128 outline: none; 5129 /* 1 */ } 5130 .euiDataGrid__controlScroll[tabindex='0']:focus:focus-visible { 5131 outline-style: auto; 5132 /* 2 */ } 5133 5134.euiDataGrid__focusWrap { 5135 height: 100%; } 5136 5137.euiDataGrid__virtualized { 5138 scrollbar-color: rgba(152, 162, 179, 0.5) #1D1E24; 5139 scrollbar-width: thin; 5140 scroll-padding: 0; } 5141 .euiDataGrid__virtualized::-webkit-scrollbar { 5142 width: 16px; 5143 height: 16px; } 5144 .euiDataGrid__virtualized::-webkit-scrollbar-thumb { 5145 background-color: rgba(152, 162, 179, 0.5); 5146 background-clip: content-box; 5147 border-radius: 16px; 5148 border: 6px solid #1D1E24; } 5149 .euiDataGrid__virtualized::-webkit-scrollbar-corner, .euiDataGrid__virtualized::-webkit-scrollbar-track { 5150 background-color: #1D1E24; } 5151 5152.euiDataGridHeader { 5153 display: -webkit-flex; 5154 display: flex; 5155 z-index: 3; 5156 background: #1D1E24; 5157 position: -webkit-sticky; 5158 position: sticky; 5159 top: 0; } 5160 5161.euiDataGridHeaderCell { 5162 font-size: 14px; 5163 font-size: 0.875rem; 5164 line-height: 1.5; 5165 font-weight: 700; 5166 padding: 6px; 5167 -webkit-flex: 0 0 auto; 5168 flex: 0 0 auto; 5169 position: relative; 5170 -webkit-align-items: center; 5171 align-items: center; 5172 display: -webkit-flex; 5173 display: flex; } 5174 .euiDataGridHeaderCell > * { 5175 max-width: 100%; 5176 width: 100%; } 5177 .euiDataGridHeaderCell.euiDataGridHeaderCell--numeric { 5178 text-align: right; } 5179 .euiDataGridHeaderCell.euiDataGridHeaderCell--currency { 5180 text-align: right; } 5181 .euiDataGridHeaderCell:focus { 5182 outline: none; 5183 border-top: none; } 5184 .euiDataGridHeaderCell:focus::after { 5185 content: ''; 5186 display: block; 5187 width: 100%; 5188 height: 100%; 5189 position: absolute; 5190 top: 0; 5191 left: 0; 5192 border: 2px solid rgba(27, 169, 245, 0.3); 5193 border-radius: 2px; 5194 z-index: 2; 5195 pointer-events: none; } 5196 .euiDataGridHeaderCell:not(.euiDataGridHeaderCell--controlColumn):focus-within { 5197 outline: none; 5198 border-top: none; } 5199 .euiDataGridHeaderCell:not(.euiDataGridHeaderCell--controlColumn):focus-within::after { 5200 content: ''; 5201 display: block; 5202 width: 100%; 5203 height: 100%; 5204 position: absolute; 5205 top: 0; 5206 left: 0; 5207 border: 2px solid rgba(27, 169, 245, 0.3); 5208 border-radius: 2px; 5209 z-index: 2; 5210 pointer-events: none; } 5211 .euiDataGridHeaderCell:not(.euiDataGridHeaderCell--controlColumn) .euiDataGridHeaderCell__sortingArrow { 5212 margin-right: 4px; } 5213 .euiDataGridHeaderCell:not(.euiDataGridHeaderCell--controlColumn) .euiDataGridHeaderCell__anchor { 5214 width: 100%; } 5215 .euiDataGridHeaderCell:not(.euiDataGridHeaderCell--controlColumn) .euiDataGridHeaderCell__button { 5216 -webkit-flex: 0 0 auto; 5217 flex: 0 0 auto; 5218 position: relative; 5219 -webkit-align-items: center; 5220 align-items: center; 5221 display: -webkit-flex; 5222 display: flex; 5223 width: 100%; 5224 font-weight: 700; 5225 outline: none; } 5226 .euiDataGridHeaderCell:not(.euiDataGridHeaderCell--controlColumn) .euiDataGridHeaderCell__button .euiDataGridHeaderCell__sortingArrow { 5227 -webkit-flex-grow: 0; 5228 flex-grow: 0; } 5229 .euiDataGridHeaderCell:not(.euiDataGridHeaderCell--controlColumn) .euiDataGridHeaderCell__content { 5230 max-width: 100%; 5231 overflow: hidden !important; 5232 text-overflow: ellipsis !important; 5233 white-space: nowrap !important; 5234 word-wrap: normal !important; 5235 overflow: hidden; 5236 white-space: nowrap; 5237 text-align: left; 5238 -webkit-flex-grow: 1; 5239 flex-grow: 1; 5240 -webkit-align-self: baseline; 5241 align-self: baseline; } 5242 .euiDataGridHeaderCell:not(.euiDataGridHeaderCell--controlColumn) .euiDataGridHeaderCell__icon { 5243 -webkit-flex-grow: 0; 5244 flex-grow: 0; 5245 -webkit-flex-basis: auto; 5246 flex-basis: auto; 5247 width: auto; 5248 padding-left: 4px; } 5249 5250.euiDataGridHeader__action--selected { 5251 font-weight: 700 !important; } 5252 5253.euiDataGrid--bordersNone.euiDataGrid--bordersHorizontal .euiDataGridHeader { 5254 background: #1D1E24; } 5255 5256.euiDataGrid--headerUnderline .euiDataGridHeaderCell { 5257 border-top: none; 5258 border-left: none; 5259 border-right: none; 5260 border-bottom: 2px solid #343741; 5261 border-bottom-color: #DFE5EF; } 5262 5263.euiDataGrid--bordersNone.euiDataGrid--headerUnderline .euiDataGridHeaderCell { 5264 border-bottom: 2px solid #343741; 5265 border-color: #DFE5EF; } 5266 5267.euiDataGrid--headerShade .euiDataGridHeaderCell { 5268 background: #212229; } 5269 5270.euiDataGrid--headerShade.euiDataGrid--bordersAll .euiDataGridHeaderCell { 5271 border-right: 1px solid #343741; 5272 border-bottom: 1px solid #343741; 5273 border-left: none; } 5274 .euiDataGrid--headerShade.euiDataGrid--bordersAll .euiDataGridHeaderCell:first-of-type { 5275 border-left: 1px solid #343741; } 5276 5277.euiDataGrid--headerShade.euiDataGrid--bordersHorizontal .euiDataGridHeaderCell { 5278 border-top: none; 5279 border-bottom: 1px solid #343741; } 5280 5281.euiDataGrid--bordersNone .euiDataGridHeaderCell { 5282 border: none; } 5283 5284.euiDataGrid--borderhorizontal .euiDataGridHeaderCell { 5285 border-top: none; 5286 border-right: none; 5287 border-left: none; } 5288 5289.euiDataGrid--fontSizeSmall .euiDataGridHeaderCell { 5290 font-size: 12px; 5291 font-size: 0.75rem; 5292 line-height: 1.5; } 5293 5294.euiDataGrid--fontSizeLarge .euiDataGridHeaderCell { 5295 font-size: 16px; 5296 font-size: 1rem; 5297 line-height: 1.5; } 5298 5299.euiDataGrid--paddingSmall .euiDataGridHeaderCell { 5300 padding: 4px; } 5301 5302.euiDataGrid--paddingLarge .euiDataGridHeaderCell { 5303 padding: 8px; } 5304 5305.euiDataGrid--noControls.euiDataGrid--bordersAll .euiDataGridHeaderCell { 5306 border-top: 1px solid #343741; } 5307 5308.euiDataGrid--noControls.euiDataGrid--bordersHorizontal .euiDataGridHeaderCell { 5309 border-top: 1px solid #343741; } 5310 5311.euiDataGridRowCell.euiDataGridFooterCell { 5312 font-weight: 700; } 5313 5314.euiDataGrid--stickyFooter .euiDataGridFooter { 5315 position: -webkit-sticky; 5316 position: sticky; 5317 bottom: 0; } 5318 5319.euiDataGrid--footerOverline .euiDataGridRowCell.euiDataGridFooterCell { 5320 border-top: 2px solid #343741; 5321 border-top-color: #DFE5EF !important; 5322 background: #1D1E24 !important; } 5323 5324.euiDataGrid--bordersNone .euiDataGridRowCell.euiDataGridFooterCell { 5325 border-left: none; 5326 border-right: none; } 5327 5328.euiDataGrid--bordersHorizontal .euiDataGridRowCell.euiDataGridFooterCell { 5329 border-left: none; 5330 border-right: none; } 5331 5332.euiDataGrid--footerShade .euiDataGridRowCell.euiDataGridFooterCell { 5333 background: #212229; } 5334 5335.euiDataGridColumnResizer { 5336 position: absolute; 5337 top: 0; 5338 right: -8px; 5339 height: 100%; 5340 width: 16px; 5341 cursor: ew-resize; 5342 opacity: 0; 5343 z-index: 2; } 5344 .euiDataGridColumnResizer:after { 5345 content: ''; 5346 position: absolute; 5347 left: 7px; 5348 top: 0; 5349 bottom: 0; 5350 width: 3px; 5351 background-color: #1BA9F5; } 5352 .euiDataGridColumnResizer:hover, .euiDataGridColumnResizer:active { 5353 opacity: 1; } 5354 .euiDataGridColumnResizer:hover ~ .euiDataGridHeaderCell__content, .euiDataGridColumnResizer:active ~ .euiDataGridHeaderCell__content { 5355 -webkit-user-select: none; 5356 -moz-user-select: none; 5357 user-select: none; } 5358 5359.euiDataGridHeaderCell:last-child .euiDataGridColumnResizer { 5360 right: 0; 5361 width: 8px; } 5362 .euiDataGridHeaderCell:last-child .euiDataGridColumnResizer:after { 5363 left: auto; 5364 right: 0; } 5365 5366.euiDataGridRow { 5367 display: -webkit-flex; 5368 display: flex; } 5369 5370.euiDataGridRowCell { 5371 font-size: 14px; 5372 font-size: 0.875rem; 5373 line-height: 1.5; 5374 padding: 6px; 5375 border-right: solid 1px #24272e; 5376 border-bottom: 1px solid #343741; 5377 -webkit-flex: 0 0 auto; 5378 flex: 0 0 auto; 5379 background: #1D1E24; 5380 position: relative; 5381 -webkit-align-items: center; 5382 align-items: center; 5383 display: -webkit-flex; 5384 display: flex; 5385 overflow: hidden; } 5386 .euiDataGridRowCell > * { 5387 max-width: 100%; 5388 width: 100%; } 5389 .euiDataGridRowCell.euiDataGridRowCell--firstColumn { 5390 border-left: 1px solid #343741; } 5391 .euiDataGridRowCell.euiDataGridRowCell--lastColumn { 5392 border-right-color: #343741; } 5393 .euiDataGridRowCell:focus { 5394 outline: none; } 5395 .euiDataGridRowCell:focus::after { 5396 content: ''; 5397 display: block; 5398 width: 100%; 5399 height: 100%; 5400 position: absolute; 5401 top: 0; 5402 left: 0; 5403 border: 2px solid rgba(27, 169, 245, 0.3); 5404 border-radius: 2px; 5405 z-index: 2; 5406 pointer-events: none; } 5407 .euiDataGridRowCell:hover .euiDataGridRowCell__expandButtonIcon { 5408 -webkit-animation-duration: 90ms; 5409 animation-duration: 90ms; 5410 -webkit-animation-name: euiDataGridCellButtonSlideIn; 5411 animation-name: euiDataGridCellButtonSlideIn; 5412 -webkit-animation-iteration-count: 1; 5413 animation-iteration-count: 1; 5414 -webkit-animation-delay: 250ms; 5415 animation-delay: 250ms; 5416 -webkit-animation-fill-mode: forwards; 5417 animation-fill-mode: forwards; } 5418 .euiDataGridRowCell:hover .euiDataGridRowCell__actionButtonIcon { 5419 -webkit-animation-duration: 90ms; 5420 animation-duration: 90ms; 5421 -webkit-animation-name: euiDataGridCellButtonSlideIn; 5422 animation-name: euiDataGridCellButtonSlideIn; 5423 -webkit-animation-iteration-count: 1; 5424 animation-iteration-count: 1; 5425 -webkit-animation-delay: 250ms; 5426 animation-delay: 250ms; 5427 -webkit-animation-fill-mode: forwards; 5428 animation-fill-mode: forwards; } 5429 .euiDataGridRowCell:not(:hover) .euiDataGridRowCell__expandButtonIcon, .euiDataGridRowCell.euiDataGridRowCell--open .euiDataGridRowCell__expandButtonIcon { 5430 -webkit-animation: none; 5431 animation: none; 5432 margin-left: 6px; 5433 width: 12px; } 5434 .euiDataGridRowCell:not(:hover) .euiDataGridRowCell__actionButtonIcon, .euiDataGridRowCell.euiDataGridRowCell--open .euiDataGridRowCell__actionButtonIcon { 5435 -webkit-animation: none; 5436 animation: none; 5437 margin-left: 6px; 5438 width: 12px; } 5439 .euiDataGridRowCell:focus .euiDataGridRowCell__actionButtonIcon { 5440 margin-left: 6px; 5441 width: 12px; } 5442 .euiDataGridRowCell:not(:hover):not(:focus):not(.euiDataGridRowCell--open) .euiDataGridRowCell__expandButtonIcon, 5443 .euiDataGridRowCell:not(:hover):not(:focus):not(.euiDataGridRowCell--open) .euiDataGridRowCell__actionButtonIcon { 5444 display: none; } 5445 .euiDataGridRowCell.euiDataGridRowCell--numeric { 5446 text-align: right; } 5447 .euiDataGridRowCell.euiDataGridRowCell--currency { 5448 text-align: right; } 5449 .euiDataGridRowCell.euiDataGridRowCell--uppercase { 5450 text-transform: uppercase; } 5451 .euiDataGridRowCell.euiDataGridRowCell--lowercase { 5452 text-transform: lowercase; } 5453 .euiDataGridRowCell.euiDataGridRowCell--capitalize { 5454 text-transform: capitalize; } 5455 .euiDataGridRowCell .euiDataGridRowCell__definedHeight { 5456 overflow-wrap: break-word !important; 5457 word-wrap: break-word !important; 5458 word-break: break-word; 5459 -webkit-flex-grow: 1; 5460 flex-grow: 1; } 5461 .euiDataGridRowCell:not(.euiDataGridRowCell--controlColumn) .euiDataGridRowCell__content, 5462 .euiDataGridRowCell:not(.euiDataGridRowCell--controlColumn) .euiDataGridRowCell__truncate, .euiDataGridRowCell:not(.euiDataGridRowCell--controlColumn).euiDataGridRowCell__truncate, 5463 .euiDataGridRowCell:not(.euiDataGridRowCell--controlColumn) .euiDataGridRowCell__expandContent { 5464 max-width: 100%; 5465 overflow: hidden !important; 5466 text-overflow: ellipsis !important; 5467 white-space: nowrap !important; 5468 word-wrap: normal !important; 5469 overflow: hidden; 5470 white-space: nowrap; } 5471 5472.euiDataGridRowCell__popover { 5473 scrollbar-color: rgba(152, 162, 179, 0.5) transparent; 5474 scrollbar-width: thin; 5475 overflow: auto; 5476 max-width: 400px !important; 5477 max-height: 400px !important; } 5478 .euiDataGridRowCell__popover::-webkit-scrollbar { 5479 width: 16px; 5480 height: 16px; } 5481 .euiDataGridRowCell__popover::-webkit-scrollbar-thumb { 5482 background-color: rgba(152, 162, 179, 0.5); 5483 background-clip: content-box; 5484 border-radius: 16px; 5485 border: 6px solid transparent; } 5486 .euiDataGridRowCell__popover::-webkit-scrollbar-corner, .euiDataGridRowCell__popover::-webkit-scrollbar-track { 5487 background-color: transparent; } 5488 5489.euiDataGridRowCell__expand { 5490 width: 100%; 5491 max-width: 100%; } 5492 5493.euiDataGridRowCell__expandFlex { 5494 position: relative; 5495 display: -webkit-flex; 5496 display: flex; 5497 -webkit-align-items: center; 5498 align-items: center; 5499 height: 100%; } 5500 5501.euiDataGridRowCell__expandContent { 5502 -webkit-flex-grow: 1; 5503 flex-grow: 1; } 5504 5505.euiDataGridRowCell__contentByHeight { 5506 -webkit-flex-grow: 1; 5507 flex-grow: 1; 5508 height: 100%; } 5509 5510.euiDataGridRowCell__alignBaseLine { 5511 -webkit-align-items: baseline; 5512 align-items: baseline; } 5513 5514.euiDataGridRowCell__expandButton { 5515 display: -webkit-flex; 5516 display: flex; 5517 -webkit-flex-grow: 0; 5518 flex-grow: 0; } 5519 .euiDataGridRowCell__contentByHeight + .euiDataGridRowCell__expandButton { 5520 background-color: #1D1E24; 5521 position: absolute; 5522 right: 0; 5523 top: 0; 5524 padding: 6px 0; } 5525 5526.euiDataGridRowCell__expandButtonIcon { 5527 height: 12px; 5528 border-radius: 2px; 5529 width: 0; 5530 overflow: hidden; 5531 transition: none; 5532 box-shadow: none !important; 5533 border: none; } 5534 .euiDataGridRowCell__expandButtonIcon-isActive { 5535 margin-left: 6px; 5536 width: 12px; } 5537 5538.euiDataGridRowCell__actionButtonIcon { 5539 height: 12px; 5540 border-radius: 2px; 5541 width: 0; 5542 overflow: hidden; 5543 transition: none; } 5544 5545.euiDataGrid--rowHoverHighlight .euiDataGridRow:hover .euiDataGridRowCell { 5546 background-color: #2E2D25 !important; } 5547 5548.euiDataGrid--stripes .euiDataGridRowCell.euiDataGridRowCell--stripe { 5549 background: #25262E; } 5550 5551.euiDataGrid--bordersNone .euiDataGridRowCell { 5552 border-color: transparent !important; } 5553 5554.euiDataGrid--bordersHorizontal .euiDataGridRowCell { 5555 border-right-color: transparent; 5556 border-left-color: transparent; } 5557 5558.euiDataGrid--fontSizeSmall .euiDataGridRowCell { 5559 font-size: 12px; 5560 font-size: 0.75rem; 5561 line-height: 1.5; } 5562 5563.euiDataGridRowCell--fontSizeSmall { 5564 font-size: 12px; 5565 font-size: 0.75rem; 5566 line-height: 1.5; } 5567 5568.euiDataGrid--fontSizeLarge .euiDataGridRowCell { 5569 font-size: 16px; 5570 font-size: 1rem; 5571 line-height: 1.5; } 5572 5573.euiDataGridRowCell--fontSizeLarge { 5574 font-size: 16px; 5575 font-size: 1rem; 5576 line-height: 1.5; } 5577 5578.euiDataGrid--paddingSmall .euiDataGridRowCell { 5579 padding: 4px; } 5580 5581.euiDataGridRowCell--paddingSmall { 5582 padding: 4px; } 5583 .euiDataGridRowCell--paddingSmall .euiDataGridRowCell__contentByHeight + .euiDataGridRowCell__expandButton { 5584 padding: 0; } 5585 5586.euiDataGrid--paddingLarge .euiDataGridRowCell { 5587 padding: 8px; } 5588 5589.euiDataGridRowCell--paddingLarge { 5590 padding: 8px; } 5591 .euiDataGridRowCell--paddingLarge .euiDataGridRowCell__contentByHeight + .euiDataGridRowCell__expandButton { 5592 padding: 8px 0; } 5593 5594@-webkit-keyframes euiDataGridCellButtonSlideIn { 5595 from { 5596 margin-left: 0; 5597 width: 0; } 5598 to { 5599 margin-left: 6px; 5600 width: 12px; } } 5601 5602@keyframes euiDataGridCellButtonSlideIn { 5603 from { 5604 margin-left: 0; 5605 width: 0; } 5606 to { 5607 margin-left: 6px; 5608 width: 12px; } } 5609 5610.euiDataGridColumnSelector__item { 5611 padding: 4px; } 5612 .euiDataGridColumnSelector__item-isDragging { 5613 box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.1), 0 6px 12px 0 rgba(0, 0, 0, 0.1), 0 4px 4px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.1); 5614 background: #1D1E24; } 5615 5616.euiDataGridColumnSelector__columnList { 5617 scrollbar-color: rgba(152, 162, 179, 0.5) transparent; 5618 scrollbar-width: thin; 5619 height: 100%; 5620 overflow-y: auto; 5621 overflow-x: hidden; 5622 -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%); 5623 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%); 5624 max-height: 400px; 5625 margin: 0 -8px; } 5626 .euiDataGridColumnSelector__columnList::-webkit-scrollbar { 5627 width: 16px; 5628 height: 16px; } 5629 .euiDataGridColumnSelector__columnList::-webkit-scrollbar-thumb { 5630 background-color: rgba(152, 162, 179, 0.5); 5631 background-clip: content-box; 5632 border-radius: 16px; 5633 border: 6px solid transparent; } 5634 .euiDataGridColumnSelector__columnList::-webkit-scrollbar-corner, .euiDataGridColumnSelector__columnList::-webkit-scrollbar-track { 5635 background-color: transparent; } 5636 .euiDataGridColumnSelector__columnList:focus { 5637 outline: none; 5638 /* 1 */ } 5639 .euiDataGridColumnSelector__columnList[tabindex='0']:focus:focus-visible { 5640 outline-style: auto; 5641 /* 2 */ } 5642 5643.euiDataGridColumnSelector__itemLabel { 5644 font-size: 12px; 5645 font-size: 0.75rem; 5646 line-height: 1.5; } 5647 5648.euiDataGridColumnSelectorPopover { 5649 -webkit-transform: none !important; 5650 transform: none !important; 5651 transition: none !important; 5652 margin-top: -8px; 5653 min-width: 192px; } 5654 5655.euiDataGridColumnSorting__item-isDragging { 5656 box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.1), 0 6px 12px 0 rgba(0, 0, 0, 0.1), 0 4px 4px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.1); 5657 background: #1D1E24; } 5658 5659.euiDataGridColumnSortingPopover { 5660 -webkit-transform: none !important; 5661 transform: none !important; 5662 transition: none !important; 5663 margin-top: -8px; 5664 min-width: 192px; } 5665 5666.euiDataGridColumnSorting__fieldList { 5667 scrollbar-color: rgba(152, 162, 179, 0.5) transparent; 5668 scrollbar-width: thin; 5669 height: 100%; 5670 overflow-y: auto; 5671 overflow-x: hidden; 5672 -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%); 5673 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%); 5674 padding-top: 4px; 5675 padding-bottom: 4px; 5676 max-height: 300px; } 5677 .euiDataGridColumnSorting__fieldList::-webkit-scrollbar { 5678 width: 16px; 5679 height: 16px; } 5680 .euiDataGridColumnSorting__fieldList::-webkit-scrollbar-thumb { 5681 background-color: rgba(152, 162, 179, 0.5); 5682 background-clip: content-box; 5683 border-radius: 16px; 5684 border: 6px solid transparent; } 5685 .euiDataGridColumnSorting__fieldList::-webkit-scrollbar-corner, .euiDataGridColumnSorting__fieldList::-webkit-scrollbar-track { 5686 background-color: transparent; } 5687 .euiDataGridColumnSorting__fieldList:focus { 5688 outline: none; 5689 /* 1 */ } 5690 .euiDataGridColumnSorting__fieldList[tabindex='0']:focus:focus-visible { 5691 outline-style: auto; 5692 /* 2 */ } 5693 5694.euiDataGridColumnSorting__field { 5695 display: block; 5696 padding: 4px 8px; 5697 width: 100%; 5698 outline-offset: -3px; } 5699 .euiDataGridColumnSorting__field:hover { 5700 cursor: pointer; 5701 text-decoration: underline; } 5702 .euiDataGridColumnSorting__field:focus { 5703 cursor: pointer; 5704 text-decoration: underline; 5705 background-color: #052231; } 5706 .euiDataGridColumnSorting__field:disabled { 5707 cursor: not-allowed; 5708 text-decoration: none; 5709 color: #4c4e51; } 5710 5711.euiDataGridColumnSorting__orderButtons { 5712 padding-left: 24px; } 5713 @media only screen and (max-width: 574px) { 5714 .euiDataGridColumnSorting__orderButtons { 5715 padding-left: 4px; } } 5716 @media only screen and (min-width: 575px) and (max-width: 767px) { 5717 .euiDataGridColumnSorting__orderButtons { 5718 padding-left: 4px; } } 5719 .euiDataGridColumnSorting__orderButtons .euiDataGridColumnSorting__order { 5720 min-width: 200px; 5721 border: none; } 5722 @media only screen and (max-width: 574px) { 5723 .euiDataGridColumnSorting__orderButtons .euiDataGridColumnSorting__order { 5724 min-width: unset; } } 5725 @media only screen and (min-width: 575px) and (max-width: 767px) { 5726 .euiDataGridColumnSorting__orderButtons .euiDataGridColumnSorting__order { 5727 min-width: unset; } } 5728 .euiDataGridColumnSorting__orderButtons .euiDataGridColumnSorting__order button { 5729 font-size: 12px !important; } 5730 5731.euiDescriptionList.euiDescriptionList--row .euiDescriptionList__title { 5732 overflow-wrap: break-word !important; 5733 word-wrap: break-word !important; 5734 word-break: break-word; 5735 color: #DFE5EF; 5736 font-size: 16px; 5737 font-size: 1rem; 5738 line-height: 1.5rem; 5739 font-weight: 600; 5740 letter-spacing: -0.02em; 5741 line-height: 1.5; 5742 margin-top: 16px; } 5743 .euiDescriptionList.euiDescriptionList--row .euiDescriptionList__title:first-of-type { 5744 margin-top: 0; } 5745 5746.euiDescriptionList.euiDescriptionList--row .euiDescriptionList__description { 5747 font-size: 14px; 5748 font-size: 0.875rem; 5749 line-height: 1.5; } 5750 5751.euiDescriptionList.euiDescriptionList--row.euiDescriptionList--center { 5752 text-align: center; } 5753 5754.euiDescriptionList.euiDescriptionList--row.euiDescriptionList--reverse .euiDescriptionList__title { 5755 color: #DFE5EF; 5756 font-weight: 400; 5757 font-size: 14px; 5758 font-size: 0.875rem; 5759 line-height: 1.5; } 5760 5761.euiDescriptionList.euiDescriptionList--row.euiDescriptionList--reverse .euiDescriptionList__description { 5762 overflow-wrap: break-word !important; 5763 word-wrap: break-word !important; 5764 word-break: break-word; 5765 color: #DFE5EF; 5766 font-size: 16px; 5767 font-size: 1rem; 5768 line-height: 1.5rem; 5769 font-weight: 600; 5770 letter-spacing: -0.02em; } 5771 5772.euiDescriptionList.euiDescriptionList--row.euiDescriptionList--compressed .euiDescriptionList__title { 5773 overflow-wrap: break-word !important; 5774 word-wrap: break-word !important; 5775 word-break: break-word; 5776 color: #DFE5EF; 5777 font-size: 14px; 5778 font-size: 0.875rem; 5779 line-height: 1.5rem; 5780 font-weight: 700; 5781 line-height: 1.5; } 5782 5783.euiDescriptionList.euiDescriptionList--row.euiDescriptionList--compressed .euiDescriptionList__description { 5784 font-size: 14px; 5785 font-size: 0.875rem; 5786 line-height: 1.5; } 5787 5788.euiDescriptionList.euiDescriptionList--row.euiDescriptionList--compressed.euiDescriptionList--reverse .euiDescriptionList__title { 5789 color: #DFE5EF; 5790 font-weight: 400; 5791 font-size: 14px; 5792 font-size: 0.875rem; 5793 line-height: 1.5; } 5794 5795.euiDescriptionList.euiDescriptionList--row.euiDescriptionList--compressed.euiDescriptionList--reverse .euiDescriptionList__description { 5796 overflow-wrap: break-word !important; 5797 word-wrap: break-word !important; 5798 word-break: break-word; 5799 color: #DFE5EF; 5800 font-size: 14px; 5801 font-size: 0.875rem; 5802 line-height: 1.5rem; 5803 font-weight: 700; 5804 line-height: 1.5; } 5805 5806.euiDescriptionList.euiDescriptionList--column, .euiDescriptionList.euiDescriptionList--responsiveColumn { 5807 display: -webkit-flex; 5808 display: flex; 5809 -webkit-align-items: stretch; 5810 align-items: stretch; 5811 -webkit-flex-wrap: wrap; 5812 flex-wrap: wrap; } 5813 .euiDescriptionList.euiDescriptionList--column > *, .euiDescriptionList.euiDescriptionList--responsiveColumn > * { 5814 margin-top: 16px; } 5815 .euiDescriptionList.euiDescriptionList--column > *:first-child, 5816 .euiDescriptionList.euiDescriptionList--column > :nth-child(2), .euiDescriptionList.euiDescriptionList--responsiveColumn > *:first-child, 5817 .euiDescriptionList.euiDescriptionList--responsiveColumn > :nth-child(2) { 5818 margin-top: 0; } 5819 .euiDescriptionList.euiDescriptionList--column .euiDescriptionList__title, .euiDescriptionList.euiDescriptionList--responsiveColumn .euiDescriptionList__title { 5820 overflow-wrap: break-word !important; 5821 word-wrap: break-word !important; 5822 word-break: break-word; 5823 color: #DFE5EF; 5824 font-size: 16px; 5825 font-size: 1rem; 5826 line-height: 1.5rem; 5827 font-weight: 600; 5828 letter-spacing: -0.02em; 5829 line-height: 1.5; 5830 width: 50%; 5831 padding-right: 8px; } 5832 .euiDescriptionList.euiDescriptionList--column .euiDescriptionList__description, .euiDescriptionList.euiDescriptionList--responsiveColumn .euiDescriptionList__description { 5833 font-size: 16px; 5834 font-size: 1rem; 5835 line-height: 1.5; 5836 width: 50%; 5837 padding-left: 8px; } 5838 .euiDescriptionList.euiDescriptionList--column.euiDescriptionList--center .euiDescriptionList__title, .euiDescriptionList.euiDescriptionList--responsiveColumn.euiDescriptionList--center .euiDescriptionList__title { 5839 text-align: right; } 5840 .euiDescriptionList.euiDescriptionList--column.euiDescriptionList--reverse .euiDescriptionList__title, .euiDescriptionList.euiDescriptionList--responsiveColumn.euiDescriptionList--reverse .euiDescriptionList__title { 5841 color: #DFE5EF; 5842 font-weight: 400; 5843 font-size: 16px; 5844 font-size: 1rem; 5845 line-height: 1.5; } 5846 .euiDescriptionList.euiDescriptionList--column.euiDescriptionList--reverse .euiDescriptionList__description, .euiDescriptionList.euiDescriptionList--responsiveColumn.euiDescriptionList--reverse .euiDescriptionList__description { 5847 overflow-wrap: break-word !important; 5848 word-wrap: break-word !important; 5849 word-break: break-word; 5850 color: #DFE5EF; 5851 font-size: 16px; 5852 font-size: 1rem; 5853 line-height: 1.5rem; 5854 font-weight: 600; 5855 letter-spacing: -0.02em; 5856 line-height: 1.5; } 5857 .euiDescriptionList.euiDescriptionList--column.euiDescriptionList--compressed .euiDescriptionList__title, .euiDescriptionList.euiDescriptionList--responsiveColumn.euiDescriptionList--compressed .euiDescriptionList__title { 5858 overflow-wrap: break-word !important; 5859 word-wrap: break-word !important; 5860 word-break: break-word; 5861 color: #DFE5EF; 5862 font-size: 14px; 5863 font-size: 0.875rem; 5864 line-height: 1.5rem; 5865 font-weight: 700; 5866 line-height: 1.5; } 5867 .euiDescriptionList.euiDescriptionList--column.euiDescriptionList--compressed .euiDescriptionList__description, .euiDescriptionList.euiDescriptionList--responsiveColumn.euiDescriptionList--compressed .euiDescriptionList__description { 5868 font-size: 14px; 5869 font-size: 0.875rem; 5870 line-height: 1.5; } 5871 .euiDescriptionList.euiDescriptionList--column.euiDescriptionList--compressed.euiDescriptionList--reverse .euiDescriptionList__title, .euiDescriptionList.euiDescriptionList--responsiveColumn.euiDescriptionList--compressed.euiDescriptionList--reverse .euiDescriptionList__title { 5872 color: #DFE5EF; 5873 font-weight: 400; 5874 font-size: 14px; 5875 font-size: 0.875rem; 5876 line-height: 1.5; } 5877 .euiDescriptionList.euiDescriptionList--column.euiDescriptionList--compressed.euiDescriptionList--reverse .euiDescriptionList__description, .euiDescriptionList.euiDescriptionList--responsiveColumn.euiDescriptionList--compressed.euiDescriptionList--reverse .euiDescriptionList__description { 5878 overflow-wrap: break-word !important; 5879 word-wrap: break-word !important; 5880 word-break: break-word; 5881 color: #DFE5EF; 5882 font-size: 14px; 5883 font-size: 0.875rem; 5884 line-height: 1.5rem; 5885 font-weight: 700; 5886 line-height: 1.5; } 5887 5888@media only screen and (max-width: 574px) { 5889 .euiDescriptionList.euiDescriptionList--responsiveColumn { 5890 display: block; } 5891 .euiDescriptionList.euiDescriptionList--responsiveColumn .euiDescriptionList__title, 5892 .euiDescriptionList.euiDescriptionList--responsiveColumn .euiDescriptionList__description { 5893 width: 100%; 5894 padding: 0; } 5895 .euiDescriptionList.euiDescriptionList--responsiveColumn .euiDescriptionList__description { 5896 font-size: 14px; 5897 font-size: 0.875rem; 5898 line-height: 1.5; 5899 margin-top: 0; } 5900 .euiDescriptionList.euiDescriptionList--responsiveColumn.euiDescriptionList--center .euiDescriptionList__title, 5901 .euiDescriptionList.euiDescriptionList--responsiveColumn.euiDescriptionList--center .euiDescriptionList__description { 5902 text-align: center; } 5903 .euiDescriptionList.euiDescriptionList--responsiveColumn.euiDescriptionList--reverse .euiDescriptionList__title { 5904 font-size: 14px; 5905 font-size: 0.875rem; 5906 line-height: 1.5; } 5907 .euiDescriptionList.euiDescriptionList--responsiveColumn.euiDescriptionList--reverse .euiDescriptionList__description { 5908 overflow-wrap: break-word !important; 5909 word-wrap: break-word !important; 5910 word-break: break-word; 5911 color: #DFE5EF; 5912 font-size: 16px; 5913 font-size: 1rem; 5914 line-height: 1.5rem; 5915 font-weight: 600; 5916 letter-spacing: -0.02em; } } 5917 5918@media only screen and (min-width: 575px) and (max-width: 767px) { 5919 .euiDescriptionList.euiDescriptionList--responsiveColumn { 5920 display: block; } 5921 .euiDescriptionList.euiDescriptionList--responsiveColumn .euiDescriptionList__title, 5922 .euiDescriptionList.euiDescriptionList--responsiveColumn .euiDescriptionList__description { 5923 width: 100%; 5924 padding: 0; } 5925 .euiDescriptionList.euiDescriptionList--responsiveColumn .euiDescriptionList__description { 5926 font-size: 14px; 5927 font-size: 0.875rem; 5928 line-height: 1.5; 5929 margin-top: 0; } 5930 .euiDescriptionList.euiDescriptionList--responsiveColumn.euiDescriptionList--center .euiDescriptionList__title, 5931 .euiDescriptionList.euiDescriptionList--responsiveColumn.euiDescriptionList--center .euiDescriptionList__description { 5932 text-align: center; } 5933 .euiDescriptionList.euiDescriptionList--responsiveColumn.euiDescriptionList--reverse .euiDescriptionList__title { 5934 font-size: 14px; 5935 font-size: 0.875rem; 5936 line-height: 1.5; } 5937 .euiDescriptionList.euiDescriptionList--responsiveColumn.euiDescriptionList--reverse .euiDescriptionList__description { 5938 overflow-wrap: break-word !important; 5939 word-wrap: break-word !important; 5940 word-break: break-word; 5941 color: #DFE5EF; 5942 font-size: 16px; 5943 font-size: 1rem; 5944 line-height: 1.5rem; 5945 font-weight: 600; 5946 letter-spacing: -0.02em; } } 5947 5948.euiDescriptionList.euiDescriptionList--inline .euiDescriptionList__title { 5949 font-size: 14px; 5950 font-size: 0.875rem; 5951 line-height: 1.5; 5952 display: inline; 5953 border-radius: 4px; 5954 font-weight: 400; 5955 background: #25262E; 5956 border: 1px solid #343741; 5957 padding: 0 4px; 5958 margin: 0 4px; } 5959 .euiDescriptionList.euiDescriptionList--inline .euiDescriptionList__title:first-of-type { 5960 margin-left: 0; } 5961 5962.euiDescriptionList.euiDescriptionList--inline .euiDescriptionList__description { 5963 font-size: 14px; 5964 font-size: 0.875rem; 5965 line-height: 1.5; 5966 display: inline; 5967 word-break: break-all; } 5968 5969.euiDescriptionList.euiDescriptionList--inline.euiDescriptionList--compressed .euiDescriptionList__title { 5970 font-size: 12px; 5971 font-size: 0.75rem; 5972 line-height: 1.5; } 5973 5974.euiDescriptionList.euiDescriptionList--inline.euiDescriptionList--compressed .euiDescriptionList__description { 5975 font-size: 12px; 5976 font-size: 0.75rem; 5977 line-height: 1.5; } 5978 5979.euiDescriptionList.euiDescriptionList--inline.euiDescriptionList--center { 5980 text-align: center; } 5981 5982.euiDraggable.euiDraggable--isDragging { 5983 z-index: 9000 !important; } 5984 5985.euiDraggable.euiDraggable--hasClone:not(.euiDraggable--isDragging) { 5986 -webkit-transform: none !important; 5987 transform: none !important; } 5988 5989.euiDraggable.euiDraggable--withoutDropAnimation { 5990 transition-duration: .001s !important; } 5991 5992.euiDraggable:focus > .euiDraggable__item, 5993.euiDraggable.euiDraggable--hasCustomDragHandle > .euiDraggable__item [data-react-beautiful-dnd-drag-handle]:focus { 5994 -webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important; 5995 animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important; } 5996 5997.euiDraggable .euiDraggable__item.euiDraggable__item--isDisabled { 5998 cursor: not-allowed; } 5999 6000.euiDraggable--s { 6001 padding: 2px; } 6002 6003.euiDraggable--m { 6004 padding: 4px; } 6005 6006.euiDraggable--l { 6007 padding: 8px; } 6008 6009.euiDroppable { 6010 transition: background-color 500ms ease; } 6011 .euiDroppable.euiDroppable--isDraggingType:not(.euiDroppable--isDisabled) { 6012 background-color: rgba(125, 226, 209, 0.1); } 6013 .euiDroppable.euiDroppable--isDraggingType:not(.euiDroppable--isDisabled).euiDroppable--isDraggingOver { 6014 background-color: rgba(125, 226, 209, 0.25); } 6015 .euiDroppable .euiDroppable__placeholder.euiDroppable__placeholder--isHidden { 6016 display: none !important; } 6017 6018.euiDroppable--withPanel { 6019 background-color: #1D1E24; 6020 border: 1px solid #343741; 6021 border-radius: 4px; 6022 -webkit-flex-grow: 1; 6023 flex-grow: 1; } 6024 .euiDroppable--withPanel.euiDroppable--withPanel--flexGrowZero { 6025 -webkit-flex-grow: 0; 6026 flex-grow: 0; } 6027 .euiDroppable--withPanel.euiDroppable--withPanel--noBorder { 6028 border: none; } 6029 .euiDroppable--withPanel.euiDroppable--withPanel--hasShadow { 6030 box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3), 0 1px 5px -2px rgba(0, 0, 0, 0.3); 6031 border: 1px solid #343741; } 6032 .euiDroppable--withPanel.euiDroppable--withPanel--isClickable { 6033 transition: all 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); } 6034 .euiDroppable--withPanel.euiDroppable--withPanel--isClickable:enabled { 6035 display: block; 6036 width: 100%; 6037 text-align: left; } 6038 .euiDroppable--withPanel.euiDroppable--withPanel--isClickable:hover, .euiDroppable--withPanel.euiDroppable--withPanel--isClickable:focus { 6039 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 2px 2px -1px rgba(0, 0, 0, 0.3); 6040 -webkit-transform: translateY(-2px); 6041 transform: translateY(-2px); 6042 cursor: pointer; } 6043 .euiDroppable--withPanel.euiDroppable--withPanel--borderRadiusNone { 6044 border-radius: 0; } 6045 .euiDroppable--withPanel.euiDroppable--withPanel--borderRadiusMedium { 6046 border-radius: 4px; } 6047 .euiDroppable--withPanel.euiDroppable--withPanel--transparent { 6048 background-color: transparent; } 6049 .euiDroppable--withPanel.euiDroppable--withPanel--plain { 6050 background-color: #1D1E24; } 6051 .euiDroppable--withPanel.euiDroppable--withPanel--subdued { 6052 background-color: #141519; } 6053 .euiDroppable--withPanel.euiDroppable--withPanel--accent { 6054 background-color: #4b2b3a; } 6055 .euiDroppable--withPanel.euiDroppable--withPanel--primary { 6056 background-color: #08334a; } 6057 .euiDroppable--withPanel.euiDroppable--withPanel--success { 6058 background-color: #26443f; } 6059 .euiDroppable--withPanel.euiDroppable--withPanel--warning { 6060 background-color: #4d3e25; } 6061 .euiDroppable--withPanel.euiDroppable--withPanel--danger { 6062 background-color: #4d1f1f; } 6063 6064.euiDroppable--withPanel { 6065 box-shadow: 0 6px 12px -1px rgba(0, 0, 0, 0.2), 0 4px 4px -1px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2); 6066 border-radius: 4px; } 6067 6068.euiDroppable--noGrow { 6069 -webkit-flex-grow: 0; 6070 flex-grow: 0; } 6071 6072.euiDroppable--grow { 6073 -webkit-flex-grow: 1; 6074 flex-grow: 1; } 6075 6076.euiDroppable--s { 6077 padding: 2px; } 6078 6079.euiDroppable--m { 6080 padding: 4px; } 6081 6082.euiDroppable--l { 6083 padding: 8px; } 6084 6085.euiEmptyPrompt { 6086 max-width: 36em; 6087 text-align: center; 6088 padding: 24px; 6089 margin: auto; } 6090 6091.euiErrorBoundary { 6092 background: repeating-linear-gradient(45deg, rgba(255, 102, 102, 0.25), rgba(255, 102, 102, 0.25) 1px, rgba(255, 102, 102, 0.05) 1px, rgba(255, 102, 102, 0.05) 20px); 6093 overflow: auto; 6094 padding: 16px; } 6095 6096.euiErrorBoundary__text { 6097 background-color: #1D1E24; 6098 padding: 8px; } 6099 6100.euiErrorBoundary__stack { 6101 white-space: pre-wrap; } 6102 6103/** 6104 * 1. Keep each expression's text together as much as possible, 6105 * but then wrap long words 6106 */ 6107.euiExpression { 6108 overflow-wrap: break-word !important; 6109 word-wrap: break-word !important; 6110 word-break: break-word; 6111 /* 1 */ 6112 font-size: 14px; 6113 font-size: 0.875rem; 6114 line-height: 1.5; 6115 font-family: "Roboto Mono", Consolas, Menlo, Courier, monospace; 6116 letter-spacing: normal; 6117 border-bottom: 2px solid transparent; 6118 display: inline-block; 6119 /* 1 */ 6120 text-align: left; 6121 padding: 2px 0; 6122 transition: all 250ms ease-in-out; 6123 color: #DFE5EF; } 6124 .euiExpression:focus { 6125 border-bottom-style: solid; } 6126 .euiExpression + .euiExpression { 6127 margin-left: 8px; } 6128 .euiExpression.euiExpression--columns { 6129 border-color: transparent; 6130 border-bottom-style: solid; 6131 margin-bottom: 4px; } 6132 .euiExpression.euiExpression--truncate { 6133 max-width: 100%; } 6134 .euiExpression.euiExpression--truncate .euiExpression__description, 6135 .euiExpression.euiExpression--truncate .euiExpression__value { 6136 max-width: 100%; 6137 overflow: hidden !important; 6138 text-overflow: ellipsis !important; 6139 white-space: nowrap !important; 6140 word-wrap: normal !important; 6141 display: inline-block; 6142 vertical-align: bottom; } 6143 6144.euiExpression-isUppercase .euiExpression__description { 6145 text-transform: uppercase; } 6146 6147.euiExpression-isClickable { 6148 cursor: pointer; 6149 border-bottom: 2px dotted #343741; } 6150 .euiExpression-isClickable:hover:not(:disabled) { 6151 border-bottom-style: solid; 6152 -webkit-transform: translateY(-1px); 6153 transform: translateY(-1px); } 6154 6155.euiExpression__icon { 6156 margin-left: 4px; } 6157 6158.euiExpression-isActive { 6159 border-bottom-style: solid; } 6160 6161.euiExpression--columns { 6162 width: 100%; 6163 display: -webkit-flex; 6164 display: flex; 6165 padding: 4px; 6166 border-radius: 4px; } 6167 .euiExpression--columns.euiExpression-isClickable { 6168 background-color: #25262E; } 6169 .euiExpression--columns.euiExpression-isClickable:focus .euiExpression__description, 6170 .euiExpression--columns.euiExpression-isClickable:focus .euiExpression__value, .euiExpression--columns.euiExpression-isClickable:hover:not(:disabled) .euiExpression__description, 6171 .euiExpression--columns.euiExpression-isClickable:hover:not(:disabled) .euiExpression__value { 6172 text-decoration: underline; } 6173 .euiExpression--columns .euiExpression__description { 6174 text-align: right; 6175 margin-right: 8px; 6176 -webkit-flex-shrink: 0; 6177 flex-shrink: 0; } 6178 .euiExpression--columns .euiExpression__value { 6179 -webkit-flex-grow: 1; 6180 flex-grow: 1; } 6181 .euiExpression--columns .euiExpression__icon { 6182 margin-top: 4px; } 6183 6184.euiExpression--subdued:focus { 6185 background-color: rgba(122, 127, 137, 0.1); } 6186 6187.euiExpression--subdued.euiExpression-isActive { 6188 border-bottom-color: #7a7f89; 6189 border-color: #7a7f89; } 6190 6191.euiExpression--subdued .euiExpression__description { 6192 color: #7a7f89; } 6193 6194.euiExpression--primary:focus { 6195 background-color: rgba(27, 169, 245, 0.1); } 6196 6197.euiExpression--primary.euiExpression-isActive { 6198 border-bottom-color: #1BA9F5; 6199 border-color: #1BA9F5; } 6200 6201.euiExpression--primary .euiExpression__description { 6202 color: #1BA9F5; } 6203 6204.euiExpression--success:focus { 6205 background-color: rgba(125, 226, 209, 0.1); } 6206 6207.euiExpression--success.euiExpression-isActive { 6208 border-bottom-color: #7DE2D1; 6209 border-color: #7DE2D1; } 6210 6211.euiExpression--success .euiExpression__description { 6212 color: #7DE2D1; } 6213 6214.euiExpression--secondary:focus { 6215 background-color: rgba(125, 226, 209, 0.1); } 6216 6217.euiExpression--secondary.euiExpression-isActive { 6218 border-bottom-color: #7DE2D1; 6219 border-color: #7DE2D1; } 6220 6221.euiExpression--secondary .euiExpression__description { 6222 color: #7DE2D1; } 6223 6224.euiExpression--warning:focus { 6225 background-color: rgba(255, 206, 122, 0.1); } 6226 6227.euiExpression--warning.euiExpression-isActive { 6228 border-bottom-color: #FFCE7A; 6229 border-color: #FFCE7A; } 6230 6231.euiExpression--warning .euiExpression__description { 6232 color: #FFCE7A; } 6233 6234.euiExpression--danger:focus { 6235 background-color: rgba(255, 102, 102, 0.1); } 6236 6237.euiExpression--danger.euiExpression-isActive { 6238 border-bottom-color: #F66; 6239 border-color: #F66; } 6240 6241.euiExpression--danger .euiExpression__description { 6242 color: #F66; } 6243 6244.euiExpression--accent:focus { 6245 background-color: rgba(249, 144, 192, 0.1); } 6246 6247.euiExpression--accent.euiExpression-isActive { 6248 border-bottom-color: #F990C0; 6249 border-color: #F990C0; } 6250 6251.euiExpression--accent .euiExpression__description { 6252 color: #F990C0; } 6253 6254/** 6255 * 1. Make sure the quantity doesn't get an underline on hover 6256 */ 6257.euiFacetButton { 6258 display: inline-block; 6259 -webkit-appearance: none; 6260 -moz-appearance: none; 6261 appearance: none; 6262 cursor: pointer; 6263 height: 40px; 6264 line-height: 40px; 6265 text-align: center; 6266 white-space: nowrap; 6267 max-width: 100%; 6268 vertical-align: middle; 6269 font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 6270 font-weight: 400; 6271 letter-spacing: -.005em; 6272 -webkit-text-size-adjust: 100%; 6273 -ms-text-size-adjust: 100%; 6274 -webkit-font-kerning: normal; 6275 font-kerning: normal; 6276 font-size: 14px; 6277 font-size: 0.875rem; 6278 line-height: 1.5; 6279 height: 32px; 6280 text-align: left; 6281 text-decoration: none; 6282 transition: all 150ms ease-in; } 6283 .euiFacetButton:hover:not(:disabled) .euiFacetButton__text, .euiFacetButton:focus:not(:disabled) .euiFacetButton__text { 6284 text-decoration: underline; 6285 /* 1 */ } 6286 .euiFacetButton:focus { 6287 background-color: #052231; 6288 box-shadow: -4px 0 #052231, 4px 0 #052231; } 6289 .euiFacetButton:disabled { 6290 color: #4c4e51; 6291 pointer-events: none; } 6292 .euiFacetButton:disabled .euiFacetButton__content { 6293 pointer-events: auto; 6294 cursor: not-allowed; } 6295 .euiFacetButton:disabled .euiFacetButton__icon, 6296 .euiFacetButton:disabled .euiFacetButton__quantity { 6297 opacity: .5; } 6298 .euiFacetButton:disabled:focus { 6299 background-color: transparent; } 6300 .euiFacetButton:disabled:hover, .euiFacetButton:disabled:focus { 6301 text-decoration: none; } 6302 6303.euiFacetButton__content { 6304 height: 100%; 6305 width: 100%; 6306 vertical-align: middle; 6307 display: -webkit-flex; 6308 display: flex; 6309 -webkit-justify-content: center; 6310 justify-content: center; 6311 -webkit-align-items: center; 6312 align-items: center; } 6313 .euiFacetButton__content .euiButtonContent__icon, 6314 .euiFacetButton__content .euiButtonContent__spinner { 6315 -webkit-flex-shrink: 0; 6316 flex-shrink: 0; } 6317 .euiFacetButton__content > * + * { 6318 -webkit-margin-start: 8px; 6319 margin-inline-start: 8px; } 6320 6321.euiFacetButton__text { 6322 max-width: 100%; 6323 overflow: hidden !important; 6324 text-overflow: ellipsis !important; 6325 white-space: nowrap !important; 6326 word-wrap: normal !important; 6327 -webkit-flex-grow: 1; 6328 flex-grow: 1; 6329 vertical-align: middle; } 6330 .euiFacetButton__text::after { 6331 display: block; 6332 content: attr(data-text); 6333 font-weight: 700; 6334 height: 0; 6335 overflow: hidden; 6336 visibility: hidden; } 6337 .euiFacetButton--isSelected .euiFacetButton__text { 6338 font-weight: 700; } 6339 6340.euiFacetButton__icon { 6341 transition: all 150ms ease-in; } 6342 6343.euiFacetGroup--gutterNone .euiFacetButton { 6344 margin-top: 0; 6345 margin-bottom: 0; } 6346 6347.euiFacetGroup--gutterNone.euiFacetGroup--horizontal { 6348 margin-left: -12px; } 6349 .euiFacetGroup--gutterNone.euiFacetGroup--horizontal .euiFacetButton { 6350 margin-left: 12px; 6351 max-width: calc(100% - 12px); } 6352 6353.euiFacetGroup--gutterSmall .euiFacetButton { 6354 margin-top: 2px; 6355 margin-bottom: 2px; } 6356 6357.euiFacetGroup--gutterSmall.euiFacetGroup--horizontal { 6358 margin-left: -16px; } 6359 .euiFacetGroup--gutterSmall.euiFacetGroup--horizontal .euiFacetButton { 6360 margin-left: 16px; 6361 max-width: calc(100% - 16px); } 6362 6363.euiFacetGroup--gutterMedium .euiFacetButton { 6364 margin-top: 4px; 6365 margin-bottom: 4px; } 6366 6367.euiFacetGroup--gutterMedium.euiFacetGroup--horizontal { 6368 margin-left: -20px; } 6369 .euiFacetGroup--gutterMedium.euiFacetGroup--horizontal .euiFacetButton { 6370 margin-left: 20px; 6371 max-width: calc(100% - 20px); } 6372 6373.euiFacetGroup--gutterLarge .euiFacetButton { 6374 margin-top: 6px; 6375 margin-bottom: 6px; } 6376 6377.euiFacetGroup--gutterLarge.euiFacetGroup--horizontal { 6378 margin-left: -24px; } 6379 .euiFacetGroup--gutterLarge.euiFacetGroup--horizontal .euiFacetButton { 6380 margin-left: 24px; 6381 max-width: calc(100% - 24px); } 6382 6383.euiFilterGroup { 6384 display: -webkit-inline-flex; 6385 display: inline-flex; 6386 max-width: 100%; 6387 border-right: 1px solid rgba(255, 255, 255, 0.1); 6388 box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.2), 0 3px 3px -2px rgba(0, 0, 0, 0.2); 6389 overflow: hidden; } 6390 .euiFilterGroup > * { 6391 -webkit-flex: 1 1 auto; 6392 flex: 1 1 auto; 6393 min-width: 48px; } 6394 .euiFilterGroup > .euiFilterButton--noGrow { 6395 -webkit-flex-grow: 0; 6396 flex-grow: 0; } 6397 .euiFilterGroup > .euiFilterButton-hasNotification { 6398 min-width: 96px; } 6399 .euiFilterGroup > .euiFilterButton--hasIcon { 6400 min-width: 128px; } 6401 .euiFilterGroup .euiPopover__anchor { 6402 display: block; } 6403 .euiFilterGroup .euiPopover__anchor .euiFilterButton { 6404 width: 100%; } 6405 6406.euiFilterGroup--fullWidth { 6407 display: -webkit-flex; 6408 display: flex; } 6409 6410.euiFilterGroup__popoverPanel { 6411 width: 288px; } 6412 6413@media only screen and (max-width: 574px) { 6414 .euiFilterGroup { 6415 -webkit-flex-wrap: wrap; 6416 flex-wrap: wrap; } } 6417 6418@media only screen and (min-width: 575px) and (max-width: 767px) { 6419 .euiFilterGroup { 6420 -webkit-flex-wrap: wrap; 6421 flex-wrap: wrap; } } 6422 6423@media only screen and (max-width: 574px) { 6424 .euiFilterGroup { 6425 display: -webkit-flex; 6426 display: flex; } 6427 .euiFilterGroup .euiFilterButton { 6428 -webkit-flex-grow: 1 !important; 6429 flex-grow: 1 !important; } } 6430 6431.euiFilterButton { 6432 background-color: #16171c; 6433 height: 40px; 6434 width: auto; 6435 border: 1px solid rgba(255, 255, 255, 0.1); 6436 border-right: none; 6437 font-size: 14px; } 6438 .euiFilterButton:disabled { 6439 color: #4c4e51; 6440 pointer-events: none; } 6441 .euiFilterButton:disabled .euiFilterButton__notification { 6442 opacity: .5; } 6443 .euiFilterButton:hover:not(:disabled), .euiFilterButton:focus:not(:disabled) { 6444 text-decoration: none; } 6445 .euiFilterButton:hover:not(:disabled) .euiFilterButton__textShift, .euiFilterButton:focus:not(:disabled) .euiFilterButton__textShift { 6446 text-decoration: underline; } 6447 6448.euiFilterButton-hasActiveFilters { 6449 font-weight: 700; } 6450 6451.euiFilterButton--hasIcon .euiButtonEmpty__content { 6452 -webkit-justify-content: space-between; 6453 justify-content: space-between; } 6454 6455.euiFilterButton--withNext + .euiFilterButton { 6456 margin-left: -4px; 6457 border-left: none; } 6458 6459.euiFilterButton-isSelected { 6460 background-color: #25262E; } 6461 6462.euiFilterButton__text-hasNotification { 6463 display: -webkit-flex; 6464 display: flex; 6465 -webkit-align-items: center; 6466 align-items: center; } 6467 6468.euiFilterButton__notification { 6469 margin-left: 8px; 6470 vertical-align: text-bottom; } 6471 6472.euiFilterButton__textShift { 6473 max-width: 100%; 6474 overflow: hidden !important; 6475 text-overflow: ellipsis !important; 6476 white-space: nowrap !important; 6477 word-wrap: normal !important; 6478 min-width: 48px; } 6479 .euiFilterButton__textShift::after { 6480 display: block; 6481 content: attr(data-text); 6482 font-weight: 700; 6483 height: 0; 6484 overflow: hidden; 6485 visibility: hidden; } 6486 6487.euiFilterSelectItem { 6488 font-size: 14px; 6489 font-size: 0.875rem; 6490 line-height: 1.5; 6491 padding: 4px 12px; 6492 display: block; 6493 width: 100%; 6494 text-align: left; 6495 color: #DFE5EF; 6496 border-bottom: 1px solid #343741; 6497 border-color: #202128; 6498 outline-offset: -3px; } 6499 .euiFilterSelectItem:hover { 6500 cursor: pointer; 6501 text-decoration: underline; } 6502 .euiFilterSelectItem:focus { 6503 cursor: pointer; 6504 text-decoration: underline; 6505 background-color: #052231; } 6506 .euiFilterSelectItem:disabled { 6507 cursor: not-allowed; 6508 text-decoration: none; 6509 color: #4c4e51; } 6510 .euiFilterSelectItem:focus, .euiFilterSelectItem-isFocused { 6511 background-color: #052231; 6512 color: #1BA9F5; } 6513 6514.euiFilterSelectItem__content { 6515 max-width: 100%; 6516 overflow: hidden !important; 6517 text-overflow: ellipsis !important; 6518 white-space: nowrap !important; 6519 word-wrap: normal !important; } 6520 6521.euiFilterSelect__items { 6522 scrollbar-color: rgba(152, 162, 179, 0.5) transparent; 6523 scrollbar-width: thin; 6524 overflow-y: auto; 6525 max-height: 480px; } 6526 .euiFilterSelect__items::-webkit-scrollbar { 6527 width: 16px; 6528 height: 16px; } 6529 .euiFilterSelect__items::-webkit-scrollbar-thumb { 6530 background-color: rgba(152, 162, 179, 0.5); 6531 background-clip: content-box; 6532 border-radius: 16px; 6533 border: 6px solid transparent; } 6534 .euiFilterSelect__items::-webkit-scrollbar-corner, .euiFilterSelect__items::-webkit-scrollbar-track { 6535 background-color: transparent; } 6536 6537.euiFilterSelect__note { 6538 height: 64px; 6539 text-align: center; 6540 display: -webkit-flex; 6541 display: flex; 6542 -webkit-align-items: center; 6543 align-items: center; 6544 -webkit-justify-content: space-around; 6545 justify-content: space-around; } 6546 6547.euiFilterSelect__noteContent { 6548 color: #98A2B3; 6549 font-size: 14px; } 6550 6551/** 6552 * 1. Not always needed, but fixes an IE11 issue when flex-groups are nested under display: flex elements. 6553 * 2. IE requires a unit to grow. 6554 */ 6555.euiFlexGroup { 6556 display: -webkit-flex; 6557 display: flex; 6558 -webkit-align-items: stretch; 6559 align-items: stretch; 6560 -webkit-flex-grow: 1; 6561 flex-grow: 1; 6562 /* 1 */ } 6563 .euiFlexGroup .euiFlexItem { 6564 -webkit-flex-grow: 1; 6565 flex-grow: 1; 6566 -webkit-flex-basis: 0%; 6567 flex-basis: 0%; 6568 /* 2 */ } 6569 @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { 6570 .euiFlexGroup .euiFlexItem { 6571 min-width: 1px; } } 6572 6573.euiFlexGroup--gutterExtraSmall { 6574 margin: -2px; } 6575 .euiFlexGroup--gutterExtraSmall > .euiFlexItem { 6576 margin: 2px; } 6577 6578.euiFlexGroup--gutterSmall { 6579 margin: -4px; } 6580 .euiFlexGroup--gutterSmall > .euiFlexItem { 6581 margin: 4px; } 6582 6583.euiFlexGroup--gutterMedium { 6584 margin: -8px; } 6585 .euiFlexGroup--gutterMedium > .euiFlexItem { 6586 margin: 8px; } 6587 6588.euiFlexGroup--gutterLarge { 6589 margin: -12px; } 6590 .euiFlexGroup--gutterLarge > .euiFlexItem { 6591 margin: 12px; } 6592 6593.euiFlexGroup--gutterExtraLarge { 6594 margin: -20px; } 6595 .euiFlexGroup--gutterExtraLarge > .euiFlexItem { 6596 margin: 20px; } 6597 6598.euiFlexGroup--justifyContentSpaceEvenly { 6599 -webkit-justify-content: space-evenly; 6600 justify-content: space-evenly; } 6601 6602.euiFlexGroup--justifyContentSpaceBetween { 6603 -webkit-justify-content: space-between; 6604 justify-content: space-between; } 6605 6606.euiFlexGroup--justifyContentSpaceAround { 6607 -webkit-justify-content: space-around; 6608 justify-content: space-around; } 6609 6610.euiFlexGroup--justifyContentCenter { 6611 -webkit-justify-content: center; 6612 justify-content: center; } 6613 6614.euiFlexGroup--justifyContentFlexEnd { 6615 -webkit-justify-content: flex-end; 6616 justify-content: flex-end; } 6617 6618.euiFlexGroup--alignItemsFlexStart { 6619 -webkit-align-items: flex-start; 6620 align-items: flex-start; } 6621 6622.euiFlexGroup--alignItemsCenter { 6623 -webkit-align-items: center; 6624 align-items: center; } 6625 6626.euiFlexGroup--alignItemsFlexEnd { 6627 -webkit-align-items: flex-end; 6628 align-items: flex-end; } 6629 6630.euiFlexGroup--alignItemsBaseline { 6631 -webkit-align-items: baseline; 6632 align-items: baseline; } 6633 6634.euiFlexGroup--directionRow { 6635 -webkit-flex-direction: row; 6636 flex-direction: row; } 6637 6638.euiFlexGroup--directionRowReverse { 6639 -webkit-flex-direction: row-reverse; 6640 flex-direction: row-reverse; } 6641 6642.euiFlexGroup--directionColumn { 6643 -webkit-flex-direction: column; 6644 flex-direction: column; } 6645 6646.euiFlexGroup--directionColumnReverse { 6647 -webkit-flex-direction: column-reverse; 6648 flex-direction: column-reverse; } 6649 6650.euiFlexGroup--wrap { 6651 -webkit-flex-wrap: wrap; 6652 flex-wrap: wrap; } 6653 6654@media only screen and (max-width: 574px) { 6655 .euiFlexGroup--responsive { 6656 -webkit-flex-wrap: wrap; 6657 flex-wrap: wrap; 6658 margin-left: 0; 6659 margin-right: 0; } } 6660 6661@media only screen and (min-width: 575px) and (max-width: 767px) { 6662 .euiFlexGroup--responsive { 6663 -webkit-flex-wrap: wrap; 6664 flex-wrap: wrap; 6665 margin-left: 0; 6666 margin-right: 0; } } 6667 6668.euiFlexGrid { 6669 display: -webkit-flex; 6670 display: flex; 6671 -webkit-flex-wrap: wrap; 6672 flex-wrap: wrap; 6673 margin-bottom: 0; } 6674 .euiFlexGrid > .euiFlexItem { 6675 -webkit-flex-grow: 0; 6676 flex-grow: 0; } 6677 .euiFlexGrid > .euiFlexItem.euiFlexItem--flexGrowZero { 6678 -webkit-flex-grow: 0 !important; 6679 flex-grow: 0 !important; 6680 -webkit-flex-basis: auto !important; 6681 flex-basis: auto !important; } 6682 6683/** 6684 * 1. For vertical layouts we use columns instead of flex 6685 */ 6686.euiFlexGrid--directionColumn { 6687 display: block; 6688 /* 1 */ 6689 -webkit-column-gap: 0; 6690 -moz-column-gap: 0; 6691 column-gap: 0; } 6692 .euiFlexGrid--directionColumn > .euiFlexItem { 6693 display: inline-block; 6694 /* 1 */ 6695 line-height: initial; } 6696 6697/** 6698 * Uncouple the gutter margin from the column widths to support cases where we use a FlexGrid 6699 * without columns. 6700 */ 6701.euiFlexGrid--gutterNone { 6702 margin: 0px; 6703 -webkit-align-items: stretch; 6704 align-items: stretch; } 6705 .euiFlexGrid--gutterNone > .euiFlexItem { 6706 margin: 0px; } 6707 6708.euiFlexGrid--gutterNone.euiFlexGrid--fourths > .euiFlexItem { 6709 -webkit-flex-basis: calc(25% - 0px); 6710 flex-basis: calc(25% - 0px); } 6711 6712.euiFlexGrid--gutterNone.euiFlexGrid--fourths.euiFlexGrid--directionColumn { 6713 /* 1 */ 6714 -webkit-column-count: 4; 6715 -moz-column-count: 4; 6716 column-count: 4; } 6717 .euiFlexGrid--gutterNone.euiFlexGrid--fourths.euiFlexGrid--directionColumn > .euiFlexItem { 6718 width: calc(100% - 0px); } 6719 6720.euiFlexGrid--gutterNone.euiFlexGrid--thirds > .euiFlexItem { 6721 -webkit-flex-basis: calc(33.3% - 0px); 6722 flex-basis: calc(33.3% - 0px); } 6723 6724.euiFlexGrid--gutterNone.euiFlexGrid--thirds.euiFlexGrid--directionColumn { 6725 /* 1 */ 6726 -webkit-column-count: 3; 6727 -moz-column-count: 3; 6728 column-count: 3; } 6729 .euiFlexGrid--gutterNone.euiFlexGrid--thirds.euiFlexGrid--directionColumn > .euiFlexItem { 6730 width: calc(100% - 0px); } 6731 6732.euiFlexGrid--gutterNone.euiFlexGrid--halves > .euiFlexItem { 6733 -webkit-flex-basis: calc(50% - 0px); 6734 flex-basis: calc(50% - 0px); } 6735 6736.euiFlexGrid--gutterNone.euiFlexGrid--halves.euiFlexGrid--directionColumn { 6737 /* 1 */ 6738 -webkit-column-count: 2; 6739 -moz-column-count: 2; 6740 column-count: 2; } 6741 .euiFlexGrid--gutterNone.euiFlexGrid--halves.euiFlexGrid--directionColumn > .euiFlexItem { 6742 width: calc(100% - 0px); } 6743 6744.euiFlexGrid--gutterNone.euiFlexGrid--single > .euiFlexItem { 6745 -webkit-flex-basis: calc(100% - 0px); 6746 flex-basis: calc(100% - 0px); } 6747 6748.euiFlexGrid--gutterNone.euiFlexGrid--single.euiFlexGrid--directionColumn { 6749 /* 1 */ 6750 -webkit-column-count: 1; 6751 -moz-column-count: 1; 6752 column-count: 1; } 6753 .euiFlexGrid--gutterNone.euiFlexGrid--single.euiFlexGrid--directionColumn > .euiFlexItem { 6754 width: calc(100% - 0px); } 6755 6756/** 6757 * Uncouple the gutter margin from the column widths to support cases where we use a FlexGrid 6758 * without columns. 6759 */ 6760.euiFlexGrid--gutterSmall { 6761 margin: -4px; 6762 -webkit-align-items: stretch; 6763 align-items: stretch; } 6764 .euiFlexGrid--gutterSmall > .euiFlexItem { 6765 margin: 4px; } 6766 6767.euiFlexGrid--gutterSmall.euiFlexGrid--fourths > .euiFlexItem { 6768 -webkit-flex-basis: calc(25% - 8px); 6769 flex-basis: calc(25% - 8px); } 6770 6771.euiFlexGrid--gutterSmall.euiFlexGrid--fourths.euiFlexGrid--directionColumn { 6772 /* 1 */ 6773 -webkit-column-count: 4; 6774 -moz-column-count: 4; 6775 column-count: 4; } 6776 .euiFlexGrid--gutterSmall.euiFlexGrid--fourths.euiFlexGrid--directionColumn > .euiFlexItem { 6777 width: calc(100% - 8px); } 6778 6779.euiFlexGrid--gutterSmall.euiFlexGrid--thirds > .euiFlexItem { 6780 -webkit-flex-basis: calc(33.3% - 8px); 6781 flex-basis: calc(33.3% - 8px); } 6782 6783.euiFlexGrid--gutterSmall.euiFlexGrid--thirds.euiFlexGrid--directionColumn { 6784 /* 1 */ 6785 -webkit-column-count: 3; 6786 -moz-column-count: 3; 6787 column-count: 3; } 6788 .euiFlexGrid--gutterSmall.euiFlexGrid--thirds.euiFlexGrid--directionColumn > .euiFlexItem { 6789 width: calc(100% - 8px); } 6790 6791.euiFlexGrid--gutterSmall.euiFlexGrid--halves > .euiFlexItem { 6792 -webkit-flex-basis: calc(50% - 8px); 6793 flex-basis: calc(50% - 8px); } 6794 6795.euiFlexGrid--gutterSmall.euiFlexGrid--halves.euiFlexGrid--directionColumn { 6796 /* 1 */ 6797 -webkit-column-count: 2; 6798 -moz-column-count: 2; 6799 column-count: 2; } 6800 .euiFlexGrid--gutterSmall.euiFlexGrid--halves.euiFlexGrid--directionColumn > .euiFlexItem { 6801 width: calc(100% - 8px); } 6802 6803.euiFlexGrid--gutterSmall.euiFlexGrid--single > .euiFlexItem { 6804 -webkit-flex-basis: calc(100% - 8px); 6805 flex-basis: calc(100% - 8px); } 6806 6807.euiFlexGrid--gutterSmall.euiFlexGrid--single.euiFlexGrid--directionColumn { 6808 /* 1 */ 6809 -webkit-column-count: 1; 6810 -moz-column-count: 1; 6811 column-count: 1; } 6812 .euiFlexGrid--gutterSmall.euiFlexGrid--single.euiFlexGrid--directionColumn > .euiFlexItem { 6813 width: calc(100% - 8px); } 6814 6815/** 6816 * Uncouple the gutter margin from the column widths to support cases where we use a FlexGrid 6817 * without columns. 6818 */ 6819.euiFlexGrid--gutterMedium { 6820 margin: -8px; 6821 -webkit-align-items: stretch; 6822 align-items: stretch; } 6823 .euiFlexGrid--gutterMedium > .euiFlexItem { 6824 margin: 8px; } 6825 6826.euiFlexGrid--gutterMedium.euiFlexGrid--fourths > .euiFlexItem { 6827 -webkit-flex-basis: calc(25% - 16px); 6828 flex-basis: calc(25% - 16px); } 6829 6830.euiFlexGrid--gutterMedium.euiFlexGrid--fourths.euiFlexGrid--directionColumn { 6831 /* 1 */ 6832 -webkit-column-count: 4; 6833 -moz-column-count: 4; 6834 column-count: 4; } 6835 .euiFlexGrid--gutterMedium.euiFlexGrid--fourths.euiFlexGrid--directionColumn > .euiFlexItem { 6836 width: calc(100% - 16px); } 6837 6838.euiFlexGrid--gutterMedium.euiFlexGrid--thirds > .euiFlexItem { 6839 -webkit-flex-basis: calc(33.3% - 16px); 6840 flex-basis: calc(33.3% - 16px); } 6841 6842.euiFlexGrid--gutterMedium.euiFlexGrid--thirds.euiFlexGrid--directionColumn { 6843 /* 1 */ 6844 -webkit-column-count: 3; 6845 -moz-column-count: 3; 6846 column-count: 3; } 6847 .euiFlexGrid--gutterMedium.euiFlexGrid--thirds.euiFlexGrid--directionColumn > .euiFlexItem { 6848 width: calc(100% - 16px); } 6849 6850.euiFlexGrid--gutterMedium.euiFlexGrid--halves > .euiFlexItem { 6851 -webkit-flex-basis: calc(50% - 16px); 6852 flex-basis: calc(50% - 16px); } 6853 6854.euiFlexGrid--gutterMedium.euiFlexGrid--halves.euiFlexGrid--directionColumn { 6855 /* 1 */ 6856 -webkit-column-count: 2; 6857 -moz-column-count: 2; 6858 column-count: 2; } 6859 .euiFlexGrid--gutterMedium.euiFlexGrid--halves.euiFlexGrid--directionColumn > .euiFlexItem { 6860 width: calc(100% - 16px); } 6861 6862.euiFlexGrid--gutterMedium.euiFlexGrid--single > .euiFlexItem { 6863 -webkit-flex-basis: calc(100% - 16px); 6864 flex-basis: calc(100% - 16px); } 6865 6866.euiFlexGrid--gutterMedium.euiFlexGrid--single.euiFlexGrid--directionColumn { 6867 /* 1 */ 6868 -webkit-column-count: 1; 6869 -moz-column-count: 1; 6870 column-count: 1; } 6871 .euiFlexGrid--gutterMedium.euiFlexGrid--single.euiFlexGrid--directionColumn > .euiFlexItem { 6872 width: calc(100% - 16px); } 6873 6874/** 6875 * Uncouple the gutter margin from the column widths to support cases where we use a FlexGrid 6876 * without columns. 6877 */ 6878.euiFlexGrid--gutterLarge { 6879 margin: -12px; 6880 -webkit-align-items: stretch; 6881 align-items: stretch; } 6882 .euiFlexGrid--gutterLarge > .euiFlexItem { 6883 margin: 12px; } 6884 6885.euiFlexGrid--gutterLarge.euiFlexGrid--fourths > .euiFlexItem { 6886 -webkit-flex-basis: calc(25% - 24px); 6887 flex-basis: calc(25% - 24px); } 6888 6889.euiFlexGrid--gutterLarge.euiFlexGrid--fourths.euiFlexGrid--directionColumn { 6890 /* 1 */ 6891 -webkit-column-count: 4; 6892 -moz-column-count: 4; 6893 column-count: 4; } 6894 .euiFlexGrid--gutterLarge.euiFlexGrid--fourths.euiFlexGrid--directionColumn > .euiFlexItem { 6895 width: calc(100% - 24px); } 6896 6897.euiFlexGrid--gutterLarge.euiFlexGrid--thirds > .euiFlexItem { 6898 -webkit-flex-basis: calc(33.3% - 24px); 6899 flex-basis: calc(33.3% - 24px); } 6900 6901.euiFlexGrid--gutterLarge.euiFlexGrid--thirds.euiFlexGrid--directionColumn { 6902 /* 1 */ 6903 -webkit-column-count: 3; 6904 -moz-column-count: 3; 6905 column-count: 3; } 6906 .euiFlexGrid--gutterLarge.euiFlexGrid--thirds.euiFlexGrid--directionColumn > .euiFlexItem { 6907 width: calc(100% - 24px); } 6908 6909.euiFlexGrid--gutterLarge.euiFlexGrid--halves > .euiFlexItem { 6910 -webkit-flex-basis: calc(50% - 24px); 6911 flex-basis: calc(50% - 24px); } 6912 6913.euiFlexGrid--gutterLarge.euiFlexGrid--halves.euiFlexGrid--directionColumn { 6914 /* 1 */ 6915 -webkit-column-count: 2; 6916 -moz-column-count: 2; 6917 column-count: 2; } 6918 .euiFlexGrid--gutterLarge.euiFlexGrid--halves.euiFlexGrid--directionColumn > .euiFlexItem { 6919 width: calc(100% - 24px); } 6920 6921.euiFlexGrid--gutterLarge.euiFlexGrid--single > .euiFlexItem { 6922 -webkit-flex-basis: calc(100% - 24px); 6923 flex-basis: calc(100% - 24px); } 6924 6925.euiFlexGrid--gutterLarge.euiFlexGrid--single.euiFlexGrid--directionColumn { 6926 /* 1 */ 6927 -webkit-column-count: 1; 6928 -moz-column-count: 1; 6929 column-count: 1; } 6930 .euiFlexGrid--gutterLarge.euiFlexGrid--single.euiFlexGrid--directionColumn > .euiFlexItem { 6931 width: calc(100% - 24px); } 6932 6933/** 6934 * Uncouple the gutter margin from the column widths to support cases where we use a FlexGrid 6935 * without columns. 6936 */ 6937.euiFlexGrid--gutterXLarge { 6938 margin: -16px; 6939 -webkit-align-items: stretch; 6940 align-items: stretch; } 6941 .euiFlexGrid--gutterXLarge > .euiFlexItem { 6942 margin: 16px; } 6943 6944.euiFlexGrid--gutterXLarge.euiFlexGrid--fourths > .euiFlexItem { 6945 -webkit-flex-basis: calc(25% - 32px); 6946 flex-basis: calc(25% - 32px); } 6947 6948.euiFlexGrid--gutterXLarge.euiFlexGrid--fourths.euiFlexGrid--directionColumn { 6949 /* 1 */ 6950 -webkit-column-count: 4; 6951 -moz-column-count: 4; 6952 column-count: 4; } 6953 .euiFlexGrid--gutterXLarge.euiFlexGrid--fourths.euiFlexGrid--directionColumn > .euiFlexItem { 6954 width: calc(100% - 32px); } 6955 6956.euiFlexGrid--gutterXLarge.euiFlexGrid--thirds > .euiFlexItem { 6957 -webkit-flex-basis: calc(33.3% - 32px); 6958 flex-basis: calc(33.3% - 32px); } 6959 6960.euiFlexGrid--gutterXLarge.euiFlexGrid--thirds.euiFlexGrid--directionColumn { 6961 /* 1 */ 6962 -webkit-column-count: 3; 6963 -moz-column-count: 3; 6964 column-count: 3; } 6965 .euiFlexGrid--gutterXLarge.euiFlexGrid--thirds.euiFlexGrid--directionColumn > .euiFlexItem { 6966 width: calc(100% - 32px); } 6967 6968.euiFlexGrid--gutterXLarge.euiFlexGrid--halves > .euiFlexItem { 6969 -webkit-flex-basis: calc(50% - 32px); 6970 flex-basis: calc(50% - 32px); } 6971 6972.euiFlexGrid--gutterXLarge.euiFlexGrid--halves.euiFlexGrid--directionColumn { 6973 /* 1 */ 6974 -webkit-column-count: 2; 6975 -moz-column-count: 2; 6976 column-count: 2; } 6977 .euiFlexGrid--gutterXLarge.euiFlexGrid--halves.euiFlexGrid--directionColumn > .euiFlexItem { 6978 width: calc(100% - 32px); } 6979 6980.euiFlexGrid--gutterXLarge.euiFlexGrid--single > .euiFlexItem { 6981 -webkit-flex-basis: calc(100% - 32px); 6982 flex-basis: calc(100% - 32px); } 6983 6984.euiFlexGrid--gutterXLarge.euiFlexGrid--single.euiFlexGrid--directionColumn { 6985 /* 1 */ 6986 -webkit-column-count: 1; 6987 -moz-column-count: 1; 6988 column-count: 1; } 6989 .euiFlexGrid--gutterXLarge.euiFlexGrid--single.euiFlexGrid--directionColumn > .euiFlexItem { 6990 width: calc(100% - 32px); } 6991 6992@media only screen and (max-width: 574px) { 6993 .euiFlexGrid.euiFlexGrid--responsive { 6994 margin-left: 0 !important; 6995 margin-right: 0 !important; 6996 -webkit-column-count: 1 !important; 6997 -moz-column-count: 1 !important; 6998 column-count: 1 !important; } } 6999 7000@media only screen and (min-width: 575px) and (max-width: 767px) { 7001 .euiFlexGrid.euiFlexGrid--responsive { 7002 margin-left: 0 !important; 7003 margin-right: 0 !important; 7004 -webkit-column-count: 1 !important; 7005 -moz-column-count: 1 !important; 7006 column-count: 1 !important; } } 7007 7008/** 7009 * 1. Allow EuiPanels to expand to fill the item. 7010 * 2. IE11 hack forces inner content of flex items to respect a higher parent's width (mostly) and 7011 * not cause weird wrapping issues. 7012 */ 7013.euiFlexItem { 7014 display: -webkit-flex; 7015 display: flex; 7016 /* 1 */ 7017 -webkit-flex-direction: column; 7018 flex-direction: column; 7019 /* 1 */ 7020 /* 7021 * 1. We need the extra specificity here to override the FlexGroup > FlexItem styles. 7022 * 2. FlexItem can be manually set to not grow if needed. 7023 */ } 7024 @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { 7025 .euiFlexItem { 7026 min-width: 1px; 7027 /* 2 */ } } 7028 .euiFlexItem.euiFlexItem--flexGrowZero { 7029 /* 1 */ 7030 -webkit-flex-grow: 0; 7031 flex-grow: 0; 7032 /* 2 */ 7033 -webkit-flex-basis: auto; 7034 flex-basis: auto; 7035 /* 2 */ } 7036 .euiFlexItem.euiFlexItem--flexGrow1 { 7037 -webkit-flex-grow: 1; 7038 flex-grow: 1; } 7039 .euiFlexItem.euiFlexItem--flexGrow2 { 7040 -webkit-flex-grow: 2; 7041 flex-grow: 2; } 7042 .euiFlexItem.euiFlexItem--flexGrow3 { 7043 -webkit-flex-grow: 3; 7044 flex-grow: 3; } 7045 .euiFlexItem.euiFlexItem--flexGrow4 { 7046 -webkit-flex-grow: 4; 7047 flex-grow: 4; } 7048 .euiFlexItem.euiFlexItem--flexGrow5 { 7049 -webkit-flex-grow: 5; 7050 flex-grow: 5; } 7051 .euiFlexItem.euiFlexItem--flexGrow6 { 7052 -webkit-flex-grow: 6; 7053 flex-grow: 6; } 7054 .euiFlexItem.euiFlexItem--flexGrow7 { 7055 -webkit-flex-grow: 7; 7056 flex-grow: 7; } 7057 .euiFlexItem.euiFlexItem--flexGrow8 { 7058 -webkit-flex-grow: 8; 7059 flex-grow: 8; } 7060 .euiFlexItem.euiFlexItem--flexGrow9 { 7061 -webkit-flex-grow: 9; 7062 flex-grow: 9; } 7063 .euiFlexItem.euiFlexItem--flexGrow10 { 7064 -webkit-flex-grow: 10; 7065 flex-grow: 10; } 7066 7067@media only screen and (max-width: 574px) { 7068 .euiFlexGroup--responsive > .euiFlexItem, 7069 .euiFlexGrid--responsive > .euiFlexItem { 7070 width: 100% !important; 7071 -webkit-flex-basis: 100% !important; 7072 flex-basis: 100% !important; 7073 margin-left: 0 !important; 7074 margin-right: 0 !important; 7075 margin-bottom: 16px !important; } } 7076 7077@media only screen and (min-width: 575px) and (max-width: 767px) { 7078 .euiFlexGroup--responsive > .euiFlexItem, 7079 .euiFlexGrid--responsive > .euiFlexItem { 7080 width: 100% !important; 7081 -webkit-flex-basis: 100% !important; 7082 flex-basis: 100% !important; 7083 margin-left: 0 !important; 7084 margin-right: 0 !important; 7085 margin-bottom: 16px !important; } } 7086 7087.euiFlyout { 7088 border-left: 1px solid #343741; 7089 box-shadow: 0 40px 64px 0 rgba(0, 0, 0, 0.1), 0 24px 32px 0 rgba(0, 0, 0, 0.1), 0 16px 16px 0 rgba(0, 0, 0, 0.1), 0 8px 8px 0 rgba(0, 0, 0, 0.1), 0 4px 4px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.1); 7090 position: fixed; 7091 top: 0; 7092 bottom: 0; 7093 right: 0; 7094 height: 100%; 7095 z-index: 1000; 7096 background: #1D1E24; 7097 display: -webkit-flex; 7098 display: flex; 7099 -webkit-flex-direction: column; 7100 flex-direction: column; 7101 -webkit-align-items: stretch; 7102 align-items: stretch; 7103 -webkit-clip-path: polygon(-50% 0, 100% 0, 100% 100%, -50% 100%); 7104 clip-path: polygon(-50% 0, 100% 0, 100% 100%, -50% 100%); 7105 -webkit-animation: euiFlyout 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); 7106 animation: euiFlyout 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } 7107 .euiFlyout:focus { 7108 outline: none; } 7109 7110.euiFlyout__closeButton { 7111 background-color: rgba(29, 30, 36, 0.9); 7112 position: absolute; 7113 right: 8px; 7114 top: 8px; 7115 z-index: 3; } 7116 .euiFlyout__closeButton--outside { 7117 box-shadow: 0 40px 64px 0 rgba(0, 0, 0, 0.1), 0 24px 32px 0 rgba(0, 0, 0, 0.1), 0 16px 16px 0 rgba(0, 0, 0, 0.1), 0 8px 8px 0 rgba(0, 0, 0, 0.1), 0 4px 4px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.1); 7118 right: auto; 7119 left: 0; 7120 -webkit-transform: translateX(calc(-100% - 24px)) !important; 7121 transform: translateX(calc(-100% - 24px)) !important; 7122 -webkit-animation: none !important; 7123 animation: none !important; } 7124 .euiFlyout--left .euiFlyout__closeButton--outside { 7125 left: auto; 7126 right: 0; 7127 -webkit-transform: translateX(calc(100% + 24px)) !important; 7128 transform: translateX(calc(100% + 24px)) !important; } 7129 7130.euiFlyoutBody__banner { 7131 overflow-x: hidden; } 7132 7133/** 7134 * 1. Calculating the minimum width based on the screen takeover breakpoint 7135 */ 7136.euiFlyout--small { 7137 min-width: 384px; 7138 width: 25vw; } 7139 .euiFlyout--small.euiFlyout--maxWidth-default { 7140 max-width: 403px; } 7141 7142.euiFlyout--medium { 7143 min-width: 424px; 7144 width: 50vw; } 7145 .euiFlyout--medium.euiFlyout--maxWidth-default { 7146 max-width: 768px; } 7147 7148.euiFlyout--large { 7149 min-width: 691px; 7150 width: 75vw; } 7151 .euiFlyout--large.euiFlyout--maxWidth-default { 7152 max-width: 992px; } 7153 7154.euiFlyout--paddingNone .euiFlyoutHeader { 7155 padding: 0 0 0; } 7156 7157.euiFlyout--paddingNone .euiFlyoutHeader--hasBorder { 7158 padding-bottom: 0; } 7159 7160.euiFlyout--paddingNone .euiFlyoutBody__overflowContent { 7161 padding: 0; } 7162 7163.euiFlyout--paddingNone .euiFlyoutBody__banner .euiCallOut { 7164 padding-left: 0; 7165 padding-right: 0; } 7166 7167.euiFlyout--paddingNone .euiFlyoutFooter { 7168 padding: 0; } 7169 7170.euiFlyout--paddingSmall .euiFlyoutHeader { 7171 padding: 8px 8px 0; } 7172 7173.euiFlyout--paddingSmall .euiFlyoutHeader--hasBorder { 7174 padding-bottom: 8px; } 7175 7176.euiFlyout--paddingSmall .euiFlyoutBody__overflowContent { 7177 padding: 8px; } 7178 7179.euiFlyout--paddingSmall .euiFlyoutBody__banner .euiCallOut { 7180 padding-left: 8px; 7181 padding-right: 8px; } 7182 7183.euiFlyout--paddingSmall .euiFlyoutFooter { 7184 padding: 8px; } 7185 7186.euiFlyout--paddingMedium .euiFlyoutHeader { 7187 padding: 16px 16px 0; } 7188 7189.euiFlyout--paddingMedium .euiFlyoutHeader--hasBorder { 7190 padding-bottom: 16px; } 7191 7192.euiFlyout--paddingMedium .euiFlyoutBody__overflowContent { 7193 padding: 16px; } 7194 7195.euiFlyout--paddingMedium .euiFlyoutBody__banner .euiCallOut { 7196 padding-left: 16px; 7197 padding-right: 16px; } 7198 7199.euiFlyout--paddingMedium .euiFlyoutFooter { 7200 padding: 12px 16px; } 7201 7202.euiFlyout--paddingLarge .euiFlyoutHeader { 7203 padding: 24px 24px 0; } 7204 7205.euiFlyout--paddingLarge .euiFlyoutHeader--hasBorder { 7206 padding-bottom: 24px; } 7207 7208.euiFlyout--paddingLarge .euiFlyoutBody__overflowContent { 7209 padding: 24px; } 7210 7211.euiFlyout--paddingLarge .euiFlyoutBody__banner .euiCallOut { 7212 padding-left: 24px; 7213 padding-right: 24px; } 7214 7215.euiFlyout--paddingLarge .euiFlyoutFooter { 7216 padding: 16px 24px; } 7217 7218@-webkit-keyframes euiFlyout { 7219 0% { 7220 opacity: 0; 7221 -webkit-transform: translateX(100%); 7222 transform: translateX(100%); } 7223 75% { 7224 opacity: 1; 7225 -webkit-transform: translateX(0%); 7226 transform: translateX(0%); } } 7227 7228@keyframes euiFlyout { 7229 0% { 7230 opacity: 0; 7231 -webkit-transform: translateX(100%); 7232 transform: translateX(100%); } 7233 75% { 7234 opacity: 1; 7235 -webkit-transform: translateX(0%); 7236 transform: translateX(0%); } } 7237 7238/** 7239 * 1. Leave only a small sliver exposed on small screens so users understand that this is not a new page 7240 * 2. If a custom maxWidth is set, we need to override it. 7241 */ 7242@media only screen and (max-width: 574px) { 7243 .euiFlyout { 7244 max-width: 90vw !important; 7245 /* 1, 2 */ } 7246 .euiFlyout--small { 7247 min-width: 0; 7248 width: 384px; } 7249 .euiFlyout--medium { 7250 min-width: 0; 7251 width: 424px; } 7252 .euiFlyout--large { 7253 min-width: 0; 7254 width: 691px; } 7255 .euiFlyout__closeButton--outside { 7256 -webkit-transform: translateX(calc(-100% - 4px)) !important; 7257 transform: translateX(calc(-100% - 4px)) !important; } 7258 .euiFlyout--left .euiFlyout__closeButton--outside { 7259 -webkit-transform: translateX(calc(100% + 4px)) !important; 7260 transform: translateX(calc(100% + 4px)) !important; } } 7261 7262@media only screen and (min-width: 575px) and (max-width: 767px) { 7263 .euiFlyout { 7264 max-width: 90vw !important; 7265 /* 1, 2 */ } 7266 .euiFlyout--small { 7267 min-width: 0; 7268 width: 384px; } 7269 .euiFlyout--medium { 7270 min-width: 0; 7271 width: 424px; } 7272 .euiFlyout--large { 7273 min-width: 0; 7274 width: 691px; } 7275 .euiFlyout__closeButton--outside { 7276 -webkit-transform: translateX(calc(-100% - 4px)) !important; 7277 transform: translateX(calc(-100% - 4px)) !important; } 7278 .euiFlyout--left .euiFlyout__closeButton--outside { 7279 -webkit-transform: translateX(calc(100% + 4px)) !important; 7280 transform: translateX(calc(100% + 4px)) !important; } } 7281 7282/** 7283 * Left side flyout (should only be used for navigation) 7284 */ 7285.euiFlyout--left { 7286 border-right: 1px solid #343741; 7287 border-left: none; 7288 right: auto; 7289 left: 0; 7290 -webkit-clip-path: polygon(0 0, 150% 0, 150% 100%, 0 100%); 7291 clip-path: polygon(0 0, 150% 0, 150% 100%, 0 100%); 7292 -webkit-animation-name: euiFlyoutLeft; 7293 animation-name: euiFlyoutLeft; } 7294 7295@-webkit-keyframes euiFlyoutLeft { 7296 0% { 7297 opacity: 0; 7298 -webkit-transform: translateX(-100%); 7299 transform: translateX(-100%); } 7300 75% { 7301 opacity: 1; 7302 -webkit-transform: translateX(0%); 7303 transform: translateX(0%); } } 7304 7305@keyframes euiFlyoutLeft { 7306 0% { 7307 opacity: 0; 7308 -webkit-transform: translateX(-100%); 7309 transform: translateX(-100%); } 7310 75% { 7311 opacity: 1; 7312 -webkit-transform: translateX(0%); 7313 transform: translateX(0%); } } 7314 7315/** 7316 * Pushed style (inside body) 7317 */ 7318.euiFlyout.euiFlyout--push { 7319 box-shadow: none; 7320 -webkit-clip-path: none; 7321 clip-path: none; 7322 -webkit-animation-duration: 0s; 7323 animation-duration: 0s; 7324 border-left: 2px solid #343741; 7325 z-index: 999; } 7326 .euiFlyout.euiFlyout--push.euiFlyout--left { 7327 border-left: none; 7328 border-right: 2px solid #343741; } 7329 7330.euiFlyoutBody { 7331 -webkit-flex-grow: 1; 7332 flex-grow: 1; 7333 overflow-y: hidden; 7334 height: 100%; } 7335 .euiFlyoutBody .euiFlyoutBody__overflow { 7336 scrollbar-color: rgba(152, 162, 179, 0.5) transparent; 7337 scrollbar-width: thin; 7338 height: 100%; 7339 overflow-y: auto; 7340 overflow-x: hidden; 7341 -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%); 7342 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%); } 7343 .euiFlyoutBody .euiFlyoutBody__overflow::-webkit-scrollbar { 7344 width: 16px; 7345 height: 16px; } 7346 .euiFlyoutBody .euiFlyoutBody__overflow::-webkit-scrollbar-thumb { 7347 background-color: rgba(152, 162, 179, 0.5); 7348 background-clip: content-box; 7349 border-radius: 16px; 7350 border: 6px solid transparent; } 7351 .euiFlyoutBody .euiFlyoutBody__overflow::-webkit-scrollbar-corner, .euiFlyoutBody .euiFlyoutBody__overflow::-webkit-scrollbar-track { 7352 background-color: transparent; } 7353 .euiFlyoutBody .euiFlyoutBody__overflow:focus { 7354 outline: none; 7355 /* 1 */ } 7356 .euiFlyoutBody .euiFlyoutBody__overflow[tabindex='0']:focus:focus-visible { 7357 outline-style: auto; 7358 /* 2 */ } 7359 .euiFlyoutBody .euiFlyoutBody__overflow.euiFlyoutBody__overflow--hasBanner { 7360 -webkit-mask-image: linear-gradient(to bottom, red calc(100% - 7.5px), rgba(255, 0, 0, 0.1) 100%); 7361 mask-image: linear-gradient(to bottom, red calc(100% - 7.5px), rgba(255, 0, 0, 0.1) 100%); } 7362 .euiFlyoutBody .euiFlyoutBody__banner .euiCallOut { 7363 border: none; 7364 border-radius: 0; } 7365 7366.euiFlyoutFooter { 7367 background: #25262E; 7368 -webkit-flex-grow: 0; 7369 flex-grow: 0; } 7370 7371.euiFlyoutHeader { 7372 -webkit-flex-grow: 0; 7373 flex-grow: 0; } 7374 7375.euiFlyoutHeader--hasBorder { 7376 border-bottom: 1px solid #343741; } 7377 7378/** 7379 * 1. Float above the visual radio and match its dimension, so that when users try to click it 7380 * they actually click this input. 7381 */ 7382.euiCheckbox { 7383 position: relative; } 7384 .euiCheckbox .euiCheckbox__input { 7385 width: 16px; 7386 height: 16px; 7387 top: 3px; 7388 cursor: pointer; 7389 position: absolute; 7390 /* 1 */ 7391 opacity: 0; 7392 /* 1 */ 7393 z-index: 1; 7394 /* 1 */ } 7395 .euiCheckbox .euiCheckbox__input ~ .euiCheckbox__label { 7396 display: inline-block; 7397 padding-left: 24px; 7398 line-height: 24px; 7399 font-size: 14px; 7400 position: relative; 7401 z-index: 2; 7402 cursor: pointer; } 7403 .euiCheckbox .euiCheckbox__input + .euiCheckbox__square { 7404 box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3); 7405 padding: 7px; 7406 border: 1px solid #66676d; 7407 background: #1D1E24 no-repeat center; 7408 border-radius: 4px; 7409 transition: background-color 150ms ease-in, border-color 150ms ease-in; 7410 display: inline-block; 7411 position: absolute; 7412 left: 0; 7413 top: 3px; } 7414 .euiCheckbox .euiCheckbox__input:checked + .euiCheckbox__square { 7415 border-color: #1BA9F5; 7416 background-color: #1BA9F5; 7417 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"); } 7418 .euiCheckbox .euiCheckbox__input:indeterminate + .euiCheckbox__square { 7419 border-color: #1BA9F5; 7420 background-color: #1BA9F5; 7421 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"); } 7422 .euiCheckbox .euiCheckbox__input[disabled] { 7423 cursor: not-allowed !important; } 7424 .euiCheckbox .euiCheckbox__input[disabled] ~ .euiCheckbox__label { 7425 color: #535966; 7426 cursor: not-allowed !important; } 7427 .euiCheckbox .euiCheckbox__input[disabled] + .euiCheckbox__square { 7428 border-color: #343741; 7429 background-color: #343741; 7430 box-shadow: none; } 7431 .euiCheckbox .euiCheckbox__input:checked[disabled] + .euiCheckbox__square { 7432 border-color: #343741; 7433 background-color: #343741; 7434 box-shadow: none; 7435 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"); } 7436 .euiCheckbox .euiCheckbox__input:indeterminate[disabled] + .euiCheckbox__square { 7437 border-color: #343741; 7438 background-color: #343741; 7439 box-shadow: none; 7440 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%28166, 170, 176%29' fill-rule='evenodd'/%3E%3C/svg%3E"); } 7441 .euiCheckbox .euiCheckbox__input:focus + .euiCheckbox__square { 7442 -webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important; 7443 animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important; 7444 border-color: #1BA9F5; } 7445 .euiCheckbox.euiCheckbox--inList, .euiCheckbox.euiCheckbox--noLabel { 7446 min-height: 16px; 7447 min-width: 16px; } 7448 .euiCheckbox.euiCheckbox--inList .euiCheckbox__input, 7449 .euiCheckbox.euiCheckbox--inList .euiCheckbox__square, .euiCheckbox.euiCheckbox--noLabel .euiCheckbox__input, 7450 .euiCheckbox.euiCheckbox--noLabel .euiCheckbox__square { 7451 top: 0; } 7452 .euiCheckbox.euiCheckbox--inList .euiCheckbox__input, .euiCheckbox.euiCheckbox--noLabel .euiCheckbox__input { 7453 margin: 0; } 7454 7455.euiCheckboxGroup__item + .euiCheckboxGroup__item { 7456 margin-top: 4px; } 7457 .euiCheckboxGroup__item + .euiCheckboxGroup__item.euiCheckbox--compressed { 7458 margin-top: 0; } 7459 7460.euiDescribedFormGroup { 7461 max-width: 800px; } 7462 .euiDescribedFormGroup + * { 7463 margin-top: 24px; } 7464 .euiDescribedFormGroup.euiDescribedFormGroup--fullWidth { 7465 max-width: 100%; } 7466 .euiDescribedFormGroup .euiDescribedFormGroup__description { 7467 padding-top: 8px; } 7468 .euiDescribedFormGroup .euiDescribedFormGroup__fields { 7469 min-width: 0; } 7470 .euiDescribedFormGroup .euiDescribedFormGroup__fieldPadding--xxxsmall { 7471 padding-top: 8px; } 7472 .euiDescribedFormGroup .euiDescribedFormGroup__fieldPadding--xxsmall { 7473 padding-top: 11px; } 7474 .euiDescribedFormGroup .euiDescribedFormGroup__fieldPadding--xsmall { 7475 padding-top: 14px; } 7476 .euiDescribedFormGroup .euiDescribedFormGroup__fieldPadding--small { 7477 padding-top: 20px; } 7478 .euiDescribedFormGroup .euiDescribedFormGroup__fieldPadding--medium { 7479 padding-top: 32px; } 7480 .euiDescribedFormGroup .euiDescribedFormGroup__fieldPadding--large { 7481 padding-top: 44px; } 7482 @media only screen and (max-width: 574px) { 7483 .euiDescribedFormGroup .euiDescribedFormGroup__fields { 7484 padding-top: 0; } 7485 .euiDescribedFormGroup .euiDescribedFormGroup__fields > .euiFormRow--hasEmptyLabelSpace:first-child { 7486 padding-top: 0; } } 7487 @media only screen and (min-width: 575px) and (max-width: 767px) { 7488 .euiDescribedFormGroup .euiDescribedFormGroup__fields { 7489 padding-top: 0; } 7490 .euiDescribedFormGroup .euiDescribedFormGroup__fields > .euiFormRow--hasEmptyLabelSpace:first-child { 7491 padding-top: 0; } } 7492 7493.euiFieldNumber { 7494 max-width: 400px; 7495 width: 100%; 7496 height: 40px; 7497 background-color: #16171c; 7498 background-repeat: no-repeat; 7499 background-size: 0% 100%; 7500 box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.2), 0 3px 2px -2px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1); 7501 transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in; 7502 font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 7503 font-weight: 400; 7504 letter-spacing: -.005em; 7505 -webkit-text-size-adjust: 100%; 7506 -ms-text-size-adjust: 100%; 7507 -webkit-font-kerning: normal; 7508 font-kerning: normal; 7509 font-size: 14px; 7510 color: #DFE5EF; 7511 border: none; 7512 border-radius: 0; 7513 padding: 12px; } 7514 .euiFieldNumber--fullWidth { 7515 max-width: 100%; } 7516 .euiFieldNumber--compressed { 7517 height: 32px; } 7518 .euiFieldNumber--inGroup { 7519 height: 100%; } 7520 @supports (-moz-appearance: none) { 7521 .euiFieldNumber { 7522 transition-property: box-shadow, background-image, background-size; } } 7523 @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { 7524 .euiFieldNumber { 7525 line-height: 1em; } } 7526 .euiFieldNumber::-webkit-input-placeholder { 7527 color: #81858f; 7528 opacity: 1; } 7529 .euiFieldNumber::-moz-placeholder { 7530 color: #81858f; 7531 opacity: 1; } 7532 .euiFieldNumber::placeholder { 7533 color: #81858f; 7534 opacity: 1; } 7535 .euiFieldNumber:invalid { 7536 background-image: linear-gradient(to top, #F66, #F66 2px, transparent 2px, transparent 100%); 7537 background-size: 100%; } 7538 .euiFieldNumber:focus { 7539 background-color: #111216; 7540 background-image: linear-gradient(to top, #1BA9F5, #1BA9F5 2px, transparent 2px, transparent 100%); 7541 background-size: 100% 100%; 7542 box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.2), 0 4px 4px -2px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1); } 7543 .euiFieldNumber:disabled { 7544 color: #535966; 7545 -webkit-text-fill-color: #535966; 7546 cursor: not-allowed; 7547 background: #202128; 7548 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } 7549 .euiFieldNumber:disabled::-webkit-input-placeholder { 7550 color: #535966; 7551 opacity: 1; } 7552 .euiFieldNumber:disabled::-moz-placeholder { 7553 color: #535966; 7554 opacity: 1; } 7555 .euiFieldNumber:disabled::placeholder { 7556 color: #535966; 7557 opacity: 1; } 7558 .euiFieldNumber[readOnly] { 7559 cursor: default; 7560 background: rgba(0, 0, 0, 0.05); 7561 border-color: transparent; 7562 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } 7563 .euiFieldNumber:-webkit-autofill { 7564 -webkit-text-fill-color: #343741; } 7565 .euiFieldNumber:-webkit-autofill ~ .euiFormControlLayoutIcons { 7566 color: #343741; } 7567 .euiFieldNumber--compressed { 7568 background-color: #16171c; 7569 background-repeat: no-repeat; 7570 background-size: 0% 100%; 7571 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); 7572 transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in; 7573 padding: 8px; 7574 border-radius: 2px; } 7575 @supports (-moz-appearance: none) { 7576 .euiFieldNumber--compressed { 7577 transition-property: box-shadow, background-image, background-size; } } 7578 .euiFieldNumber--compressed:invalid { 7579 background-image: linear-gradient(to top, #F66, #F66 2px, transparent 2px, transparent 100%); 7580 background-size: 100%; } 7581 .euiFieldNumber--compressed:focus { 7582 background-color: #111216; 7583 background-image: linear-gradient(to top, #1BA9F5, #1BA9F5 2px, transparent 2px, transparent 100%); 7584 background-size: 100% 100%; 7585 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } 7586 .euiFieldNumber--compressed:disabled { 7587 color: #535966; 7588 -webkit-text-fill-color: #535966; 7589 cursor: not-allowed; 7590 background: #202128; 7591 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } 7592 .euiFieldNumber--compressed:disabled::-webkit-input-placeholder { 7593 color: #535966; 7594 opacity: 1; } 7595 .euiFieldNumber--compressed:disabled::-moz-placeholder { 7596 color: #535966; 7597 opacity: 1; } 7598 .euiFieldNumber--compressed:disabled::placeholder { 7599 color: #535966; 7600 opacity: 1; } 7601 .euiFieldNumber--compressed[readOnly] { 7602 cursor: default; 7603 background: rgba(0, 0, 0, 0.05); 7604 border-color: transparent; 7605 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } 7606 .euiFieldNumber--inGroup { 7607 box-shadow: none !important; 7608 border-radius: 0; } 7609 .euiFieldNumber--withIcon { 7610 padding-left: 40px; } 7611 .euiFieldNumber-isLoading { 7612 padding-right: 40px; } 7613 .euiFieldNumber-isLoading.euiFieldNumber--compressed { 7614 padding-right: 32px; } 7615 7616.euiFieldNumber--withIcon.euiFieldNumber--compressed { 7617 padding-left: 32px; } 7618 7619.euiFieldPassword { 7620 max-width: 400px; 7621 width: 100%; 7622 height: 40px; 7623 background-color: #16171c; 7624 background-repeat: no-repeat; 7625 background-size: 0% 100%; 7626 box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.2), 0 3px 2px -2px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1); 7627 transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in; 7628 font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 7629 font-weight: 400; 7630 letter-spacing: -.005em; 7631 -webkit-text-size-adjust: 100%; 7632 -ms-text-size-adjust: 100%; 7633 -webkit-font-kerning: normal; 7634 font-kerning: normal; 7635 font-size: 14px; 7636 color: #DFE5EF; 7637 border: none; 7638 border-radius: 0; 7639 padding: 12px; 7640 padding-left: 40px; } 7641 .euiFieldPassword--fullWidth { 7642 max-width: 100%; } 7643 .euiFieldPassword--compressed { 7644 height: 32px; } 7645 .euiFieldPassword--inGroup { 7646 height: 100%; } 7647 @supports (-moz-appearance: none) { 7648 .euiFieldPassword { 7649 transition-property: box-shadow, background-image, background-size; } } 7650 @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { 7651 .euiFieldPassword { 7652 line-height: 1em; } } 7653 .euiFieldPassword::-webkit-input-placeholder { 7654 color: #81858f; 7655 opacity: 1; } 7656 .euiFieldPassword::-moz-placeholder { 7657 color: #81858f; 7658 opacity: 1; } 7659 .euiFieldPassword::placeholder { 7660 color: #81858f; 7661 opacity: 1; } 7662 .euiFieldPassword:invalid { 7663 background-image: linear-gradient(to top, #F66, #F66 2px, transparent 2px, transparent 100%); 7664 background-size: 100%; } 7665 .euiFieldPassword:focus { 7666 background-color: #111216; 7667 background-image: linear-gradient(to top, #1BA9F5, #1BA9F5 2px, transparent 2px, transparent 100%); 7668 background-size: 100% 100%; 7669 box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.2), 0 4px 4px -2px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1); } 7670 .euiFieldPassword:disabled { 7671 color: #535966; 7672 -webkit-text-fill-color: #535966; 7673 cursor: not-allowed; 7674 background: #202128; 7675 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } 7676 .euiFieldPassword:disabled::-webkit-input-placeholder { 7677 color: #535966; 7678 opacity: 1; } 7679 .euiFieldPassword:disabled::-moz-placeholder { 7680 color: #535966; 7681 opacity: 1; } 7682 .euiFieldPassword:disabled::placeholder { 7683 color: #535966; 7684 opacity: 1; } 7685 .euiFieldPassword[readOnly] { 7686 cursor: default; 7687 background: rgba(0, 0, 0, 0.05); 7688 border-color: transparent; 7689 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } 7690 .euiFieldPassword:-webkit-autofill { 7691 -webkit-text-fill-color: #343741; } 7692 .euiFieldPassword:-webkit-autofill ~ .euiFormControlLayoutIcons { 7693 color: #343741; } 7694 .euiFieldPassword--compressed { 7695 background-color: #16171c; 7696 background-repeat: no-repeat; 7697 background-size: 0% 100%; 7698 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); 7699 transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in; 7700 padding: 8px; 7701 border-radius: 2px; } 7702 @supports (-moz-appearance: none) { 7703 .euiFieldPassword--compressed { 7704 transition-property: box-shadow, background-image, background-size; } } 7705 .euiFieldPassword--compressed:invalid { 7706 background-image: linear-gradient(to top, #F66, #F66 2px, transparent 2px, transparent 100%); 7707 background-size: 100%; } 7708 .euiFieldPassword--compressed:focus { 7709 background-color: #111216; 7710 background-image: linear-gradient(to top, #1BA9F5, #1BA9F5 2px, transparent 2px, transparent 100%); 7711 background-size: 100% 100%; 7712 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } 7713 .euiFieldPassword--compressed:disabled { 7714 color: #535966; 7715 -webkit-text-fill-color: #535966; 7716 cursor: not-allowed; 7717 background: #202128; 7718 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } 7719 .euiFieldPassword--compressed:disabled::-webkit-input-placeholder { 7720 color: #535966; 7721 opacity: 1; } 7722 .euiFieldPassword--compressed:disabled::-moz-placeholder { 7723 color: #535966; 7724 opacity: 1; } 7725 .euiFieldPassword--compressed:disabled::placeholder { 7726 color: #535966; 7727 opacity: 1; } 7728 .euiFieldPassword--compressed[readOnly] { 7729 cursor: default; 7730 background: rgba(0, 0, 0, 0.05); 7731 border-color: transparent; 7732 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } 7733 .euiFieldPassword--inGroup { 7734 box-shadow: none !important; 7735 border-radius: 0; } 7736 .euiFieldPassword-isLoading { 7737 padding-right: 40px; } 7738 .euiFieldPassword-isLoading.euiFieldPassword--compressed { 7739 padding-right: 32px; } 7740 .euiFieldPassword.euiFieldPassword--compressed { 7741 padding-left: 32px; } 7742 7743.euiFieldPassword--withToggle::-ms-reveal { 7744 display: none; } 7745 7746/* 7747 * 1. Fix for Safari to ensure that it renders like a normal text input 7748 * and doesn't add extra spacing around text 7749 * 2. Remove the X clear button from input type search in Chrome and IE 7750*/ 7751.euiFieldSearch { 7752 max-width: 400px; 7753 width: 100%; 7754 height: 40px; 7755 background-color: #16171c; 7756 background-repeat: no-repeat; 7757 background-size: 0% 100%; 7758 box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.2), 0 3px 2px -2px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1); 7759 transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in; 7760 font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 7761 font-weight: 400; 7762 letter-spacing: -.005em; 7763 -webkit-text-size-adjust: 100%; 7764 -ms-text-size-adjust: 100%; 7765 -webkit-font-kerning: normal; 7766 font-kerning: normal; 7767 font-size: 14px; 7768 color: #DFE5EF; 7769 border: none; 7770 border-radius: 0; 7771 padding: 12px; 7772 padding-left: 40px; 7773 -webkit-appearance: textfield; 7774 /* 1 */ } 7775 .euiFieldSearch--fullWidth { 7776 max-width: 100%; } 7777 .euiFieldSearch--compressed { 7778 height: 32px; } 7779 .euiFieldSearch--inGroup { 7780 height: 100%; } 7781 @supports (-moz-appearance: none) { 7782 .euiFieldSearch { 7783 transition-property: box-shadow, background-image, background-size; } } 7784 @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { 7785 .euiFieldSearch { 7786 line-height: 1em; } } 7787 .euiFieldSearch::-webkit-input-placeholder { 7788 color: #81858f; 7789 opacity: 1; } 7790 .euiFieldSearch::-moz-placeholder { 7791 color: #81858f; 7792 opacity: 1; } 7793 .euiFieldSearch::placeholder { 7794 color: #81858f; 7795 opacity: 1; } 7796 .euiFieldSearch:invalid { 7797 background-image: linear-gradient(to top, #F66, #F66 2px, transparent 2px, transparent 100%); 7798 background-size: 100%; } 7799 .euiFieldSearch:focus { 7800 background-color: #111216; 7801 background-image: linear-gradient(to top, #1BA9F5, #1BA9F5 2px, transparent 2px, transparent 100%); 7802 background-size: 100% 100%; 7803 box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.2), 0 4px 4px -2px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1); } 7804 .euiFieldSearch:disabled { 7805 color: #535966; 7806 -webkit-text-fill-color: #535966; 7807 cursor: not-allowed; 7808 background: #202128; 7809 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } 7810 .euiFieldSearch:disabled::-webkit-input-placeholder { 7811 color: #535966; 7812 opacity: 1; } 7813 .euiFieldSearch:disabled::-moz-placeholder { 7814 color: #535966; 7815 opacity: 1; } 7816 .euiFieldSearch:disabled::placeholder { 7817 color: #535966; 7818 opacity: 1; } 7819 .euiFieldSearch[readOnly] { 7820 cursor: default; 7821 background: rgba(0, 0, 0, 0.05); 7822 border-color: transparent; 7823 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } 7824 .euiFieldSearch:-webkit-autofill { 7825 -webkit-text-fill-color: #343741; } 7826 .euiFieldSearch:-webkit-autofill ~ .euiFormControlLayoutIcons { 7827 color: #343741; } 7828 .euiFieldSearch--compressed { 7829 background-color: #16171c; 7830 background-repeat: no-repeat; 7831 background-size: 0% 100%; 7832 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); 7833 transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in; 7834 padding: 8px; 7835 border-radius: 2px; } 7836 @supports (-moz-appearance: none) { 7837 .euiFieldSearch--compressed { 7838 transition-property: box-shadow, background-image, background-size; } } 7839 .euiFieldSearch--compressed:invalid { 7840 background-image: linear-gradient(to top, #F66, #F66 2px, transparent 2px, transparent 100%); 7841 background-size: 100%; } 7842 .euiFieldSearch--compressed:focus { 7843 background-color: #111216; 7844 background-image: linear-gradient(to top, #1BA9F5, #1BA9F5 2px, transparent 2px, transparent 100%); 7845 background-size: 100% 100%; 7846 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } 7847 .euiFieldSearch--compressed:disabled { 7848 color: #535966; 7849 -webkit-text-fill-color: #535966; 7850 cursor: not-allowed; 7851 background: #202128; 7852 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } 7853 .euiFieldSearch--compressed:disabled::-webkit-input-placeholder { 7854 color: #535966; 7855 opacity: 1; } 7856 .euiFieldSearch--compressed:disabled::-moz-placeholder { 7857 color: #535966; 7858 opacity: 1; } 7859 .euiFieldSearch--compressed:disabled::placeholder { 7860 color: #535966; 7861 opacity: 1; } 7862 .euiFieldSearch--compressed[readOnly] { 7863 cursor: default; 7864 background: rgba(0, 0, 0, 0.05); 7865 border-color: transparent; 7866 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } 7867 .euiFieldSearch--inGroup { 7868 box-shadow: none !important; 7869 border-radius: 0; } 7870 .euiFieldSearch-isLoading { 7871 padding-right: 40px; } 7872 .euiFieldSearch-isLoading.euiFieldSearch--compressed { 7873 padding-right: 32px; } 7874 .euiFieldSearch::-webkit-search-decoration, .euiFieldSearch::-webkit-search-cancel-button { 7875 -webkit-appearance: none; 7876 /* 1, 2 */ } 7877 .euiFieldSearch::-ms-clear { 7878 display: none; 7879 /* 2 */ } 7880 .euiFieldSearch.euiFieldSearch-isClearable { 7881 padding-right: 40px; } 7882 .euiFieldSearch.euiFieldSearch-isLoading { 7883 padding-right: 40px; } 7884 .euiFieldSearch.euiFieldSearch-isLoading.euiFieldSearch-isClearable { 7885 padding-right: 62px; } 7886 .euiFieldSearch.euiFieldSearch--compressed { 7887 padding-left: 32px; } 7888 .euiFieldSearch.euiFieldSearch--compressed.euiFieldSearch-isClearable { 7889 padding-right: 32px; } 7890 .euiFieldSearch.euiFieldSearch--compressed.euiFieldSearch-isLoading { 7891 padding-right: 32px; } 7892 .euiFieldSearch.euiFieldSearch--compressed.euiFieldSearch-isLoading.euiFieldSearch-isClearable { 7893 padding-right: 54px; } 7894 7895.euiFieldText { 7896 max-width: 400px; 7897 width: 100%; 7898 height: 40px; 7899 background-color: #16171c; 7900 background-repeat: no-repeat; 7901 background-size: 0% 100%; 7902 box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.2), 0 3px 2px -2px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1); 7903 transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in; 7904 font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 7905 font-weight: 400; 7906 letter-spacing: -.005em; 7907 -webkit-text-size-adjust: 100%; 7908 -ms-text-size-adjust: 100%; 7909 -webkit-font-kerning: normal; 7910 font-kerning: normal; 7911 font-size: 14px; 7912 color: #DFE5EF; 7913 border: none; 7914 border-radius: 0; 7915 padding: 12px; 7916 /* Invalid state normally comes from :invalid, but several components 7917 /* like EuiDatePicker need it toggled through an extra class. 7918 */ } 7919 .euiFieldText--fullWidth { 7920 max-width: 100%; } 7921 .euiFieldText--compressed { 7922 height: 32px; } 7923 .euiFieldText--inGroup { 7924 height: 100%; } 7925 @supports (-moz-appearance: none) { 7926 .euiFieldText { 7927 transition-property: box-shadow, background-image, background-size; } } 7928 @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { 7929 .euiFieldText { 7930 line-height: 1em; } } 7931 .euiFieldText::-webkit-input-placeholder { 7932 color: #81858f; 7933 opacity: 1; } 7934 .euiFieldText::-moz-placeholder { 7935 color: #81858f; 7936 opacity: 1; } 7937 .euiFieldText::placeholder { 7938 color: #81858f; 7939 opacity: 1; } 7940 .euiFieldText:invalid { 7941 background-image: linear-gradient(to top, #F66, #F66 2px, transparent 2px, transparent 100%); 7942 background-size: 100%; } 7943 .euiFieldText:focus { 7944 background-color: #111216; 7945 background-image: linear-gradient(to top, #1BA9F5, #1BA9F5 2px, transparent 2px, transparent 100%); 7946 background-size: 100% 100%; 7947 box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.2), 0 4px 4px -2px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1); } 7948 .euiFieldText:disabled { 7949 color: #535966; 7950 -webkit-text-fill-color: #535966; 7951 cursor: not-allowed; 7952 background: #202128; 7953 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } 7954 .euiFieldText:disabled::-webkit-input-placeholder { 7955 color: #535966; 7956 opacity: 1; } 7957 .euiFieldText:disabled::-moz-placeholder { 7958 color: #535966; 7959 opacity: 1; } 7960 .euiFieldText:disabled::placeholder { 7961 color: #535966; 7962 opacity: 1; } 7963 .euiFieldText[readOnly] { 7964 cursor: default; 7965 background: rgba(0, 0, 0, 0.05); 7966 border-color: transparent; 7967 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } 7968 .euiFieldText:-webkit-autofill { 7969 -webkit-text-fill-color: #343741; } 7970 .euiFieldText:-webkit-autofill ~ .euiFormControlLayoutIcons { 7971 color: #343741; } 7972 .euiFieldText--compressed { 7973 background-color: #16171c; 7974 background-repeat: no-repeat; 7975 background-size: 0% 100%; 7976 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); 7977 transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in; 7978 padding: 8px; 7979 border-radius: 2px; } 7980 @supports (-moz-appearance: none) { 7981 .euiFieldText--compressed { 7982 transition-property: box-shadow, background-image, background-size; } } 7983 .euiFieldText--compressed:invalid { 7984 background-image: linear-gradient(to top, #F66, #F66 2px, transparent 2px, transparent 100%); 7985 background-size: 100%; } 7986 .euiFieldText--compressed:focus { 7987 background-color: #111216; 7988 background-image: linear-gradient(to top, #1BA9F5, #1BA9F5 2px, transparent 2px, transparent 100%); 7989 background-size: 100% 100%; 7990 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } 7991 .euiFieldText--compressed:disabled { 7992 color: #535966; 7993 -webkit-text-fill-color: #535966; 7994 cursor: not-allowed; 7995 background: #202128; 7996 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } 7997 .euiFieldText--compressed:disabled::-webkit-input-placeholder { 7998 color: #535966; 7999 opacity: 1; } 8000 .euiFieldText--compressed:disabled::-moz-placeholder { 8001 color: #535966; 8002 opacity: 1; } 8003 .euiFieldText--compressed:disabled::placeholder { 8004 color: #535966; 8005 opacity: 1; } 8006 .euiFieldText--compressed[readOnly] { 8007 cursor: default; 8008 background: rgba(0, 0, 0, 0.05); 8009 border-color: transparent; 8010 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } 8011 .euiFieldText--inGroup { 8012 box-shadow: none !important; 8013 border-radius: 0; } 8014 .euiFieldText--withIcon { 8015 padding-left: 40px; } 8016 .euiFieldText-isLoading { 8017 padding-right: 40px; } 8018 .euiFieldText-isLoading.euiFieldText--compressed { 8019 padding-right: 32px; } 8020 .euiFieldText.euiFieldText-isInvalid { 8021 background-image: linear-gradient(to top, #F66, #F66 2px, transparent 2px, transparent 100%); 8022 background-size: 100%; } 8023 8024.euiFieldText--withIcon.euiFieldText--compressed { 8025 padding-left: 32px; } 8026 8027.euiFieldText--isClearable { 8028 padding-right: 40px; } 8029 8030.euiFieldText--isClearable.euiFieldText--compressed { 8031 padding-right: 32px; } 8032 8033/** 8034 * REMEMBER: --large modifiers must come last to override --compressed 8035 */ 8036.euiFilePicker { 8037 max-width: 400px; 8038 width: 100%; 8039 height: 40px; 8040 position: relative; } 8041 .euiFilePicker--fullWidth { 8042 max-width: 100%; } 8043 .euiFilePicker--compressed { 8044 height: 32px; } 8045 .euiFilePicker--inGroup { 8046 height: 100%; } 8047 .euiFilePicker.euiFilePicker--large { 8048 border-radius: 0; 8049 overflow: hidden; 8050 height: auto; } 8051 .euiFilePicker.euiFilePicker--large.euiFilePicker--compressed { 8052 border-radius: 2px; } 8053 8054.euiFilePicker__input { 8055 position: absolute; 8056 left: 0; 8057 top: 0; 8058 width: 100%; 8059 height: 100%; 8060 opacity: 0; 8061 overflow: hidden; } 8062 .euiFilePicker__input:hover { 8063 cursor: pointer; } 8064 .euiFilePicker__input:hover:disabled { 8065 cursor: not-allowed; } 8066 .euiFilePicker__input:disabled { 8067 opacity: 0; } 8068 .euiFilePicker__input:disabled ~ .euiFilePicker__prompt { 8069 color: #535966; } 8070 8071.euiFilePicker__icon { 8072 position: absolute; 8073 left: 12px; 8074 top: 12px; 8075 transition: -webkit-transform 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); 8076 transition: transform 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); 8077 transition: transform 150ms cubic-bezier(0.694, 0.0482, 0.335, 1), -webkit-transform 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); } 8078 .euiFilePicker--compressed .euiFilePicker__icon { 8079 top: 8px; 8080 left: 8px; } 8081 .euiFilePicker--large .euiFilePicker__icon { 8082 position: static; 8083 margin-bottom: 16px; } 8084 8085/** 8086 * 1. Don't block the user from dropping files onto the filepicker. 8087 * 2. Ensure space for import icon, loading spinner, and clear button (only if it has files) 8088 * 3. Delay focus gradient or else it will only partially transition while file chooser opens 8089 * 4. Static height so that it doesn't shift its surrounding contents around 8090 */ 8091.euiFilePicker__prompt { 8092 background-color: #16171c; 8093 background-repeat: no-repeat; 8094 background-size: 0% 100%; 8095 box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.2), 0 3px 2px -2px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1); 8096 transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in; 8097 padding-left: 40px; 8098 /* 2 */ 8099 height: 40px; 8100 padding-top: 12px; 8101 padding-right: 12px; 8102 padding-bottom: 12px; 8103 pointer-events: none; 8104 /* 1 */ 8105 border-radius: 0; 8106 transition: box-shadow 150ms ease-in, background-color 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in 150ms; 8107 /* 3 */ } 8108 @supports (-moz-appearance: none) { 8109 .euiFilePicker__prompt { 8110 transition-property: box-shadow, background-image, background-size; } } 8111 .euiFilePicker--compressed .euiFilePicker__prompt { 8112 background-color: #16171c; 8113 background-repeat: no-repeat; 8114 background-size: 0% 100%; 8115 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); 8116 transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in; 8117 padding: 8px; 8118 border-radius: 2px; 8119 padding-left: 32px; 8120 /* 2 */ 8121 height: 32px; 8122 border-radius: 2px; } 8123 @supports (-moz-appearance: none) { 8124 .euiFilePicker--compressed .euiFilePicker__prompt { 8125 transition-property: box-shadow, background-image, background-size; } } 8126 .euiFilePicker--large .euiFilePicker__prompt { 8127 height: 128px; 8128 /* 4 */ 8129 padding: 0 24px; 8130 display: -webkit-flex; 8131 display: flex; 8132 -webkit-flex-direction: column; 8133 flex-direction: column; 8134 -webkit-align-items: center; 8135 align-items: center; 8136 -webkit-justify-content: center; 8137 justify-content: center; } 8138 .euiFilePicker--large.euiFilePicker--compressed .euiFilePicker__prompt { 8139 height: 104px; 8140 /* 4 */ } 8141 .euiFilePicker-isInvalid .euiFilePicker__prompt { 8142 background-image: linear-gradient(to top, #F66, #F66 2px, transparent 2px, transparent 100%); 8143 background-size: 100%; } 8144 8145.euiFilePicker__promptText { 8146 font-size: 14px; 8147 font-size: 0.875rem; 8148 line-height: 1.5; 8149 max-width: 100%; 8150 overflow: hidden !important; 8151 text-overflow: ellipsis !important; 8152 white-space: nowrap !important; 8153 word-wrap: normal !important; 8154 line-height: 16px; } 8155 .euiFilePicker:not(.euiFilePicker--large):not(.euiFilePicker-hasFiles) .euiFilePicker__promptText { 8156 color: #535966; } 8157 8158.euiFilePicker__clearButton, 8159.euiFilePicker__loadingSpinner { 8160 position: absolute; 8161 right: 12px; 8162 top: 12px; } 8163 .euiFilePicker--compressed .euiFilePicker__clearButton, .euiFilePicker--compressed 8164 .euiFilePicker__loadingSpinner { 8165 top: 8px; } 8166 8167/** 8168 * 1. Undo the pointer-events: none applied to the enclosing prompt. 8169 */ 8170.euiFilePicker__clearButton { 8171 pointer-events: auto; 8172 /* 1 */ } 8173 .euiFilePicker:not(.euiFilePicker--large) .euiFilePicker__clearButton { 8174 width: 16px; 8175 height: 16px; 8176 pointer-events: all; 8177 background-color: #98A2B3; 8178 border-radius: 16px; 8179 line-height: 0; } 8180 .euiFilePicker:not(.euiFilePicker--large) .euiFilePicker__clearButton:focus { 8181 -webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important; 8182 animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important; } 8183 .euiFilePicker:not(.euiFilePicker--large) .euiFilePicker__clearButton .euiFilePicker__clearIcon { 8184 width: 8px; 8185 height: 8px; 8186 fill: #1D1E24; 8187 stroke: #1D1E24; 8188 stroke-width: 2px; } 8189 .euiFilePicker--large .euiFilePicker__clearButton { 8190 position: relative; 8191 top: 0; 8192 right: 0; } 8193 8194.euiFilePicker__showDrop .euiFilePicker__prompt, 8195.euiFilePicker__input:focus + .euiFilePicker__prompt { 8196 background-color: #111216; 8197 background-image: linear-gradient(to top, #1BA9F5, #1BA9F5 2px, transparent 2px, transparent 100%); 8198 background-size: 100% 100%; 8199 box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.2), 0 4px 4px -2px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1); } 8200 .euiFilePicker--compressed .euiFilePicker__showDrop .euiFilePicker__prompt, .euiFilePicker--compressed 8201 .euiFilePicker__input:focus + .euiFilePicker__prompt { 8202 background-color: #111216; 8203 background-image: linear-gradient(to top, #1BA9F5, #1BA9F5 2px, transparent 2px, transparent 100%); 8204 background-size: 100% 100%; 8205 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } 8206 8207.euiFilePicker__input:disabled + .euiFilePicker__prompt { 8208 color: #535966; 8209 -webkit-text-fill-color: #535966; 8210 cursor: not-allowed; 8211 background: #202128; 8212 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } 8213 .euiFilePicker__input:disabled + .euiFilePicker__prompt::-webkit-input-placeholder { 8214 color: #535966; 8215 opacity: 1; } 8216 .euiFilePicker__input:disabled + .euiFilePicker__prompt::-moz-placeholder { 8217 color: #535966; 8218 opacity: 1; } 8219 .euiFilePicker__input:disabled + .euiFilePicker__prompt::placeholder { 8220 color: #535966; 8221 opacity: 1; } 8222 8223.euiFilePicker:not(.euiFilePicker--large).euiFilePicker-isLoading .euiFilePicker__prompt, 8224.euiFilePicker:not(.euiFilePicker--large).euiFilePicker-hasFiles .euiFilePicker__prompt { 8225 padding-right: 40px; 8226 /* 2 */ } 8227 8228.euiFilePicker-hasFiles .euiFilePicker__promptText { 8229 color: #DFE5EF; } 8230 8231.euiFilePicker--large .euiFilePicker__input:hover:not(:disabled) + .euiFilePicker__prompt .euiFilePicker__promptText, 8232.euiFilePicker--large .euiFilePicker__input:focus + .euiFilePicker__prompt .euiFilePicker__promptText { 8233 text-decoration: underline; } 8234 8235.euiFilePicker--large .euiFilePicker__input:hover:not(:disabled) + .euiFilePicker__prompt .euiFilePicker__icon, 8236.euiFilePicker--large .euiFilePicker__input:focus + .euiFilePicker__prompt .euiFilePicker__icon { 8237 -webkit-transform: scale(1.1); 8238 transform: scale(1.1); } 8239 8240.euiFilePicker--large.euiFilePicker__showDrop .euiFilePicker__prompt .euiFilePicker__promptText { 8241 text-decoration: underline; } 8242 8243.euiFilePicker--large.euiFilePicker__showDrop .euiFilePicker__prompt .euiFilePicker__icon { 8244 -webkit-transform: scale(1.1); 8245 transform: scale(1.1); } 8246 8247.euiFilePicker--large.euiFilePicker-hasFiles .euiFilePicker__promptText { 8248 font-weight: 700; } 8249 8250.euiForm__error { 8251 font-size: 14px; 8252 font-size: 0.875rem; 8253 line-height: 1.5; 8254 list-style: disc; } 8255 8256.euiForm__errors { 8257 margin-bottom: 16px; } 8258 8259.euiFormControlLayout { 8260 max-width: 400px; 8261 width: 100%; 8262 height: 40px; } 8263 .euiFormControlLayout--fullWidth { 8264 max-width: 100%; } 8265 .euiFormControlLayout--compressed { 8266 height: 32px; } 8267 .euiFormControlLayout--inGroup { 8268 height: 100%; } 8269 8270.euiFormControlLayout__childrenWrapper { 8271 position: relative; } 8272 8273/** 8274 * 1. Account for inner box-shadow style border 8275 * 2. Ensure truncation works in children elements 8276 */ 8277.euiFormControlLayout--group { 8278 background-color: #16171c; 8279 background-repeat: no-repeat; 8280 background-size: 0% 100%; 8281 box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.2), 0 3px 2px -2px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1); 8282 transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in; 8283 display: -webkit-flex; 8284 display: flex; 8285 -webkit-align-items: stretch; 8286 align-items: stretch; 8287 padding: 1px; 8288 /* 1 */ } 8289 @supports (-moz-appearance: none) { 8290 .euiFormControlLayout--group { 8291 transition-property: box-shadow, background-image, background-size; } } 8292 .euiFormControlLayout--group > *, 8293 .euiFormControlLayout--group .euiPopover__anchor, 8294 .euiFormControlLayout--group .euiButtonEmpty, 8295 .euiFormControlLayout--group .euiText, 8296 .euiFormControlLayout--group .euiFormLabel, 8297 .euiFormControlLayout--group .euiButtonIcon { 8298 height: 100%; } 8299 .euiFormControlLayout--group .euiFormControlLayout__childrenWrapper { 8300 -webkit-flex-grow: 1; 8301 flex-grow: 1; 8302 overflow: hidden; 8303 /* 2 */ } 8304 .euiFormControlLayout--group .euiFormControlLayout__prepend, 8305 .euiFormControlLayout--group .euiFormControlLayout__append { 8306 max-width: 100%; 8307 overflow: hidden !important; 8308 text-overflow: ellipsis !important; 8309 white-space: nowrap !important; 8310 word-wrap: normal !important; 8311 -webkit-flex-shrink: 0; 8312 flex-shrink: 0; 8313 height: 100%; 8314 border-radius: 0; } 8315 .euiFormControlLayout--group .euiFormControlLayout__prepend.euiIcon, 8316 .euiFormControlLayout--group .euiFormControlLayout__prepend .euiIcon, 8317 .euiFormControlLayout--group .euiFormControlLayout__append.euiIcon, 8318 .euiFormControlLayout--group .euiFormControlLayout__append .euiIcon { 8319 padding: 0 8px; 8320 width: 32px; 8321 border-radius: 0; 8322 background-color: #1f2127; } 8323 .euiFormControlLayout--group .euiFormControlLayout__prepend.euiButtonIcon, .euiFormControlLayout--group .euiFormControlLayout__prepend.euiButtonEmpty, 8324 .euiFormControlLayout--group .euiFormControlLayout__prepend .euiButtonIcon, 8325 .euiFormControlLayout--group .euiFormControlLayout__prepend .euiButtonEmpty, 8326 .euiFormControlLayout--group .euiFormControlLayout__append.euiButtonIcon, 8327 .euiFormControlLayout--group .euiFormControlLayout__append.euiButtonEmpty, 8328 .euiFormControlLayout--group .euiFormControlLayout__append .euiButtonIcon, 8329 .euiFormControlLayout--group .euiFormControlLayout__append .euiButtonEmpty { 8330 -webkit-transform: none !important; 8331 transform: none !important; } 8332 .euiFormControlLayout--group .euiFormControlLayout__prepend.euiButtonIcon .euiIcon, .euiFormControlLayout--group .euiFormControlLayout__prepend.euiButtonEmpty .euiIcon, 8333 .euiFormControlLayout--group .euiFormControlLayout__prepend .euiButtonIcon .euiIcon, 8334 .euiFormControlLayout--group .euiFormControlLayout__prepend .euiButtonEmpty .euiIcon, 8335 .euiFormControlLayout--group .euiFormControlLayout__append.euiButtonIcon .euiIcon, 8336 .euiFormControlLayout--group .euiFormControlLayout__append.euiButtonEmpty .euiIcon, 8337 .euiFormControlLayout--group .euiFormControlLayout__append .euiButtonIcon .euiIcon, 8338 .euiFormControlLayout--group .euiFormControlLayout__append .euiButtonEmpty .euiIcon { 8339 background: none !important; 8340 padding: 0; 8341 width: 16px; } 8342 .euiFormControlLayout--group .euiButtonIcon { 8343 padding: 0 8px; 8344 width: 32px; 8345 border-radius: 0; } 8346 .euiFormControlLayout--group .euiButtonIcon:not(:focus) { 8347 background-color: #1f2127; } 8348 .euiFormControlLayout--group .euiButtonIcon:focus-visible { 8349 outline: 2px solid rgba(27, 169, 245, 0.3); 8350 outline-offset: -2px; } 8351 .euiFormControlLayout--group .euiToolTipAnchor > .euiIcon { 8352 height: 100%; 8353 background-color: #1f2127; 8354 padding: 0 8px; 8355 width: 32px; 8356 border-radius: 0; } 8357 .euiFormControlLayout--group > .euiFormControlLayout__prepend, 8358 .euiFormControlLayout--group > .euiFormControlLayout__append { 8359 max-width: 50%; } 8360 .euiFormControlLayout--group .euiFormLabel, 8361 .euiFormControlLayout--group .euiText { 8362 background-color: #1f2127; 8363 padding: 12px; 8364 line-height: 16px !important; 8365 cursor: default !important; } 8366 .euiFormControlLayout--group .euiFormLabel + *:not(.euiFormControlLayout__childrenWrapper):not(input), 8367 .euiFormControlLayout--group .euiText + *:not(.euiFormControlLayout__childrenWrapper):not(input) { 8368 margin-left: -12px; } 8369 .euiFormControlLayout--group > *:not(.euiFormControlLayout__childrenWrapper) + .euiFormLabel, 8370 .euiFormControlLayout--group > *:not(.euiFormControlLayout__childrenWrapper) + .euiText { 8371 margin-left: -12px; } 8372 .euiFormControlLayout--group .euiButtonEmpty { 8373 border-right: 1px solid #282a30; } 8374 .euiFormControlLayout--group .euiFormControlLayout__childrenWrapper ~ .euiButtonEmpty, 8375 .euiFormControlLayout--group .euiFormControlLayout__childrenWrapper ~ * .euiButtonEmpty { 8376 border-right: none; 8377 border-left: 1px solid #282a30; } 8378 .euiFormControlLayout--group.euiFormControlLayout--compressed { 8379 background-color: #16171c; 8380 background-repeat: no-repeat; 8381 background-size: 0% 100%; 8382 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); 8383 transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in; 8384 border-radius: 2px; 8385 overflow: hidden; } 8386 @supports (-moz-appearance: none) { 8387 .euiFormControlLayout--group.euiFormControlLayout--compressed { 8388 transition-property: box-shadow, background-image, background-size; } } 8389 .euiFormControlLayout--group.euiFormControlLayout--compressed .euiFormLabel, 8390 .euiFormControlLayout--group.euiFormControlLayout--compressed .euiText { 8391 padding: 8px; } 8392 .euiFormControlLayout--group.euiFormControlLayout--compressed .euiFormLabel + *:not(.euiFormControlLayout__childrenWrapper), 8393 .euiFormControlLayout--group.euiFormControlLayout--compressed .euiText + *:not(.euiFormControlLayout__childrenWrapper) { 8394 margin-left: -8px; } 8395 .euiFormControlLayout--group.euiFormControlLayout--compressed > *:not(.euiFormControlLayout__childrenWrapper) + .euiFormLabel, 8396 .euiFormControlLayout--group.euiFormControlLayout--compressed > *:not(.euiFormControlLayout__childrenWrapper) + .euiText { 8397 margin-left: -8px; } 8398 .euiFormControlLayout--group.euiFormControlLayout--readOnly { 8399 cursor: default; 8400 background: rgba(0, 0, 0, 0.05); 8401 border-color: transparent; 8402 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } 8403 .euiFormControlLayout--group.euiFormControlLayout--readOnly input { 8404 background-color: transparent; } 8405 8406.euiFormControlLayoutDelimited { 8407 background-color: #16171c; 8408 background-repeat: no-repeat; 8409 background-size: 0% 100%; 8410 box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.2), 0 3px 2px -2px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1); 8411 transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in; 8412 display: -webkit-flex; 8413 display: flex; 8414 -webkit-align-items: stretch; 8415 align-items: stretch; 8416 padding: 1px; 8417 /* 1 */ } 8418 @supports (-moz-appearance: none) { 8419 .euiFormControlLayoutDelimited { 8420 transition-property: box-shadow, background-image, background-size; } } 8421 .euiFormControlLayoutDelimited .euiFormControlLayoutDelimited__delimeter { 8422 background-color: #16171c; } 8423 .euiFormControlLayoutDelimited > .euiFormControlLayout__childrenWrapper { 8424 display: -webkit-flex; 8425 display: flex; 8426 -webkit-align-items: center; 8427 align-items: center; 8428 width: 100%; } 8429 .euiFormControlLayoutDelimited[class*='--compressed'] { 8430 background-color: #16171c; 8431 background-repeat: no-repeat; 8432 background-size: 0% 100%; 8433 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); 8434 transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in; 8435 border-radius: 2px; } 8436 @supports (-moz-appearance: none) { 8437 .euiFormControlLayoutDelimited[class*='--compressed'] { 8438 transition-property: box-shadow, background-image, background-size; } } 8439 .euiFormControlLayoutDelimited[class*='--compressed'] .euiFormControlLayoutDelimited__input { 8440 height: 100%; 8441 padding-top: 0; 8442 padding-bottom: 0; 8443 padding-left: 8px; 8444 padding-right: 8px; } 8445 .euiFormControlLayoutDelimited[class*='--compressed'] .euiFormControlLayoutIcons { 8446 padding-left: 8px; 8447 padding-right: 8px; } 8448 .euiFormControlLayoutDelimited[class*='--fullWidth'] .euiFormControlLayout__childrenWrapper, 8449 .euiFormControlLayoutDelimited[class*='--fullWidth'] input { 8450 width: 100%; 8451 max-width: none; } 8452 .euiFormControlLayoutDelimited[class*='-isDisabled'] { 8453 color: #535966; 8454 -webkit-text-fill-color: #535966; 8455 cursor: not-allowed; 8456 background: #202128; 8457 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } 8458 .euiFormControlLayoutDelimited[class*='-isDisabled']::-webkit-input-placeholder { 8459 color: #535966; 8460 opacity: 1; } 8461 .euiFormControlLayoutDelimited[class*='-isDisabled']::-moz-placeholder { 8462 color: #535966; 8463 opacity: 1; } 8464 .euiFormControlLayoutDelimited[class*='-isDisabled']::placeholder { 8465 color: #535966; 8466 opacity: 1; } 8467 .euiFormControlLayoutDelimited[class*='-isDisabled'] .euiFormControlLayoutDelimited__delimeter { 8468 background-color: #202128; } 8469 .euiFormControlLayoutDelimited[class*='--readOnly'] { 8470 cursor: default; 8471 background: rgba(0, 0, 0, 0.05); 8472 border-color: transparent; 8473 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } 8474 .euiFormControlLayoutDelimited[class*='--readOnly'] input, 8475 .euiFormControlLayoutDelimited[class*='--readOnly'] .euiFormControlLayoutDelimited__delimeter { 8476 background-color: rgba(0, 0, 0, 0.05); } 8477 .euiFormControlLayoutDelimited .euiFormControlLayoutIcons { 8478 position: static; 8479 padding-left: 12px; 8480 padding-right: 12px; 8481 -webkit-flex-shrink: 0; 8482 flex-shrink: 0; } 8483 .euiFormControlLayoutDelimited .euiFormControlLayoutIcons:not(.euiFormControlLayoutIcons--right) { 8484 -webkit-order: -1; 8485 order: -1; } 8486 8487.euiFormControlLayoutDelimited__input { 8488 box-shadow: none !important; 8489 border-radius: 0 !important; 8490 text-align: center; 8491 height: 100%; 8492 min-width: 0; } 8493 .euiFormControlLayoutDelimited[class*='--compressed'] .euiFormControlLayoutDelimited__input { 8494 max-width: none; } 8495 8496.euiFormControlLayoutDelimited__delimeter { 8497 line-height: 1 !important; 8498 -webkit-flex: 0 0 auto; 8499 flex: 0 0 auto; 8500 padding-left: 6px; 8501 padding-right: 6px; } 8502 8503.euiFormControlLayoutIcons { 8504 pointer-events: none; 8505 position: absolute; 8506 top: 0; 8507 bottom: 0; 8508 left: 12px; 8509 display: -webkit-flex; 8510 display: flex; 8511 -webkit-align-items: center; 8512 align-items: center; } 8513 .euiFormControlLayoutIcons > * + * { 8514 margin-left: 6px; } 8515 .euiFormControlLayout--compressed .euiFormControlLayoutIcons { 8516 left: 8px; } 8517 8518.euiFormControlLayoutIcons--right { 8519 left: auto; 8520 right: 12px; } 8521 .euiFormControlLayout--compressed .euiFormControlLayoutIcons--right { 8522 left: auto; 8523 right: 8px; } 8524 8525*:disabled + .euiFormControlLayoutIcons { 8526 cursor: not-allowed; 8527 color: #535966; } 8528 8529.euiFormControlLayoutClearButton { 8530 width: 16px; 8531 height: 16px; 8532 pointer-events: all; 8533 background-color: #98A2B3; 8534 border-radius: 16px; 8535 line-height: 0; } 8536 .euiFormControlLayoutClearButton:focus { 8537 -webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important; 8538 animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important; } 8539 .euiFormControlLayoutClearButton .euiFormControlLayoutClearButton__icon { 8540 width: 8px; 8541 height: 8px; 8542 fill: #1D1E24; 8543 stroke: #1D1E24; 8544 stroke-width: 2px; } 8545 8546.euiFormControlLayoutClearButton--small { 8547 width: 12px; 8548 height: 12px; 8549 pointer-events: all; 8550 background-color: #98A2B3; 8551 border-radius: 12px; 8552 line-height: 0; } 8553 .euiFormControlLayoutClearButton--small:focus { 8554 -webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important; 8555 animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important; } 8556 .euiFormControlLayoutClearButton--small .euiFormControlLayoutClearButton__icon { 8557 width: 6px; 8558 height: 6px; 8559 fill: #1D1E24; 8560 stroke: #1D1E24; 8561 stroke-width: 4px; } 8562 8563.euiFormControlLayoutCustomIcon { 8564 pointer-events: none; 8565 font-size: 0; } 8566 8567.euiFormControlLayoutCustomIcon--clickable { 8568 width: 16px; 8569 height: 16px; 8570 pointer-events: all; } 8571 .euiFormControlLayoutCustomIcon--clickable .euiFormControlLayoutCustomIcon__icon { 8572 vertical-align: baseline; 8573 -webkit-transform: none; 8574 transform: none; } 8575 .euiFormControlLayoutCustomIcon--clickable:focus { 8576 -webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important; 8577 animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important; } 8578 .euiFormControlLayoutCustomIcon--clickable:disabled { 8579 cursor: not-allowed; 8580 color: #535966; } 8581 8582.euiFormErrorText { 8583 font-size: 12px; 8584 font-size: 0.75rem; 8585 line-height: 1.5; 8586 padding-top: 4px; 8587 color: #F66; } 8588 8589.euiFormLegend { 8590 font-size: 12px; 8591 font-size: 0.75rem; 8592 line-height: 1.5; 8593 overflow-wrap: break-word !important; 8594 word-wrap: break-word !important; 8595 word-break: break-word; 8596 color: #DFE5EF; 8597 font-weight: 600; } 8598 .euiFormLegend:not(.euiFormLegend-isHidden) { 8599 margin-bottom: 8px; } 8600 .euiFormLegend:not(.euiFormLegend-isHidden).euiFormLegend--compressed { 8601 margin-bottom: 4px; } 8602 8603.euiFormHelpText { 8604 font-size: 12px; 8605 font-size: 0.75rem; 8606 line-height: 1.5; 8607 padding-top: 4px; 8608 color: #98A2B3; } 8609 8610/** 8611 * 1. Focused state overrides invalid state. 8612 * 2. Disabled state overrides pointer. 8613 */ 8614.euiFormLabel { 8615 font-size: 12px; 8616 font-size: 0.75rem; 8617 line-height: 1.5; 8618 overflow-wrap: break-word !important; 8619 word-wrap: break-word !important; 8620 word-break: break-word; 8621 color: #DFE5EF; 8622 font-weight: 600; 8623 display: inline-block; 8624 transition: all 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); } 8625 .euiFormLabel.euiFormLabel-isInvalid { 8626 color: #F66; 8627 /* 1 */ } 8628 .euiFormLabel.euiFormLabel-isFocused { 8629 color: #1BA9F5; 8630 /* 1 */ } 8631 .euiFormLabel[for] { 8632 cursor: pointer; 8633 /* 2 */ } 8634 .euiFormLabel[for].euiFormLabel-isDisabled { 8635 cursor: default; 8636 /* 2 */ } 8637 8638/** 8639 * 1. Coerce inline form elements to behave as block-level elements. 8640 * 2. For inline forms, we need to add margin if the label doesn't exist. 8641 */ 8642.euiFormRow { 8643 display: -webkit-flex; 8644 display: flex; 8645 /* 1 */ 8646 -webkit-flex-direction: column; 8647 flex-direction: column; 8648 /* 1 */ 8649 max-width: 400px; } 8650 .euiFormRow + .euiFormRow, 8651 .euiFormRow + .euiButton { 8652 margin-top: 16px; } 8653 8654.euiFormRow--fullWidth { 8655 max-width: 100%; } 8656 8657.euiFormRow--hasEmptyLabelSpace { 8658 margin-top: 22px; 8659 /* 2 */ 8660 min-height: 40px; 8661 padding-bottom: 0; 8662 -webkit-justify-content: center; 8663 justify-content: center; } 8664 8665.euiFormRow__labelWrapper { 8666 display: -webkit-flex; 8667 display: flex; 8668 -webkit-flex-wrap: wrap; 8669 flex-wrap: wrap; 8670 -webkit-justify-content: space-between; 8671 justify-content: space-between; 8672 margin-bottom: 4px; } 8673 8674.euiFormRow--horizontal { 8675 -webkit-flex-direction: row; 8676 flex-direction: row; 8677 -webkit-align-items: stretch; 8678 align-items: stretch; } 8679 .euiFormRow--horizontal .euiFormRow__label { 8680 -webkit-hyphens: auto; 8681 hyphens: auto; 8682 max-width: 100%; } 8683 .euiFormRow--horizontal .euiFormRow__labelWrapper { 8684 display: block; 8685 line-height: 31px; 8686 width: calc(33% - 8px); 8687 margin-right: 8px; 8688 margin-bottom: 0; } 8689 .euiFormRow--horizontal .euiFormRow__fieldWrapper { 8690 width: 67%; } 8691 .euiFormRow--horizontal + .euiFormRow--horizontal { 8692 margin-top: 8px; } 8693 .euiFormRow--horizontal + .euiFormRow--horizontal.euiFormRow--hasSwitch { 8694 margin-top: 12px; } 8695 .euiFormRow--horizontal.euiFormRow--hasSwitch .euiFormRow__labelWrapper { 8696 line-height: 19px; 8697 width: auto; 8698 min-width: calc(33% - 8px); } 8699 .euiFormRow--horizontal.euiFormRow--hasSwitch .euiFormRow__fieldWrapper { 8700 width: auto; } 8701 .euiFormRow--horizontal.euiFormRow--hasSwitch .euiFormRow__fieldWrapper .euiSwitch--compressed { 8702 margin-top: 2px; } 8703 .euiFormRow--horizontal.euiFormRow--hasSwitch + .euiFormRow--horizontal { 8704 margin-top: 12px; } 8705 8706.euiFormRow__fieldWrapperDisplayOnly { 8707 min-height: 40px; 8708 display: -webkit-flex; 8709 display: flex; 8710 -webkit-align-items: center; 8711 align-items: center; } 8712 8713.euiFormRow--compressed.euiFormRow--hasEmptyLabelSpace { 8714 min-height: 32px; } 8715 8716.euiFormRow--compressed .euiFormRow__fieldWrapperDisplayOnly { 8717 min-height: 32px; } 8718 8719/** 8720 * 1. Float above the visual radio and match its dimension, so that when users try to click it 8721 * they actually click this input. 8722 */ 8723.euiRadio { 8724 position: relative; } 8725 .euiRadio .euiRadio__input { 8726 width: 16px; 8727 height: 16px; 8728 top: 3px; 8729 cursor: pointer; 8730 position: absolute; 8731 /* 1 */ 8732 opacity: 0; 8733 /* 1 */ 8734 z-index: 1; 8735 /* 1 */ } 8736 .euiRadio .euiRadio__input ~ .euiRadio__label { 8737 display: inline-block; 8738 padding-left: 24px; 8739 line-height: 24px; 8740 font-size: 14px; 8741 position: relative; 8742 z-index: 2; 8743 cursor: pointer; } 8744 .euiRadio .euiRadio__input + .euiRadio__circle { 8745 box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3); 8746 padding: 7px; 8747 border: 1px solid #66676d; 8748 background: #1D1E24 no-repeat center; 8749 border-radius: 14px; 8750 transition: background-color 150ms ease-in, border-color 150ms ease-in; 8751 display: inline-block; 8752 position: absolute; 8753 left: 0; 8754 top: 3px; } 8755 .euiRadio .euiRadio__input:checked + .euiRadio__circle { 8756 border-color: #1BA9F5; 8757 background-color: #1BA9F5; 8758 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"); } 8759 .euiRadio .euiRadio__input[disabled] { 8760 cursor: not-allowed !important; } 8761 .euiRadio .euiRadio__input[disabled] ~ .euiRadio__label { 8762 color: #535966; 8763 cursor: not-allowed !important; } 8764 .euiRadio .euiRadio__input[disabled] + .euiRadio__circle { 8765 border-color: #343741; 8766 background-color: #343741; 8767 box-shadow: none; } 8768 .euiRadio .euiRadio__input:checked[disabled] + .euiRadio__circle { 8769 border-color: #343741; 8770 background-color: #343741; 8771 box-shadow: none; 8772 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"); } 8773 .euiRadio .euiRadio__input:focus + .euiRadio__circle { 8774 -webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important; 8775 animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important; 8776 border-color: #1BA9F5; } 8777 .euiRadio.euiRadio--inList, .euiRadio.euiRadio--noLabel { 8778 min-height: 16px; 8779 min-width: 16px; } 8780 .euiRadio.euiRadio--inList .euiRadio__input, 8781 .euiRadio.euiRadio--inList .euiRadio__circle, .euiRadio.euiRadio--noLabel .euiRadio__input, 8782 .euiRadio.euiRadio--noLabel .euiRadio__circle { 8783 top: 0; } 8784 .euiRadio.euiRadio--inList .euiRadio__input, .euiRadio.euiRadio--noLabel .euiRadio__input { 8785 margin: 0; } 8786 8787.euiRadioGroup__item + .euiRadioGroup__item { 8788 margin-top: 4px; } 8789 .euiRadioGroup__item + .euiRadioGroup__item.euiRadio--compressed { 8790 margin-top: 0; } 8791 8792.euiRange__horizontalSpacer { 8793 width: 16px; } 8794 8795.euiRange__slimHorizontalSpacer { 8796 width: 8px; } 8797 8798.euiRangeDraggable { 8799 height: 20px; 8800 position: absolute; 8801 top: 10px; 8802 pointer-events: none; 8803 z-index: 2; } 8804 .euiRangeDraggable.euiRangeDraggable--compressed { 8805 height: 16px; 8806 top: 8px; } 8807 .euiRangeDraggable.euiRangeDraggable--hasTicks { 8808 top: 0; } 8809 .euiRangeDraggable .euiRangeDraggle__inner { 8810 position: absolute; 8811 left: 16px; 8812 right: 16px; 8813 top: 0; 8814 bottom: 0; } 8815 .euiRangeDraggable:not(.euiRangeDraggable--disabled) .euiRangeDraggle__inner { 8816 cursor: -webkit-grab; 8817 cursor: grab; 8818 pointer-events: all; } 8819 .euiRangeDraggable:not(.euiRangeDraggable--disabled) .euiRangeDraggle__inner:active { 8820 cursor: -webkit-grabbing; 8821 cursor: grabbing; } 8822 8823.euiRangeHighlight { 8824 position: absolute; 8825 left: 0; 8826 width: 100%; 8827 top: calc(50% - 2px); 8828 overflow: hidden; } 8829 .euiRangeHighlight__progress { 8830 height: 4px; 8831 border-radius: 4px; 8832 background-color: #98A2B3; } 8833 .euiRangeHighlight__progress--hasFocus { 8834 background-color: #1BA9F5; } 8835 .euiRangeHighlight--hasTicks { 8836 top: 8px; } 8837 .euiRangeHighlight--hasTicks.euiRangeHighlight--compressed { 8838 top: 6px; } 8839 8840.euiRangeInput { 8841 width: auto; 8842 min-width: 64px; } 8843 .euiRange__popover .euiRangeInput { 8844 margin: 0 !important; 8845 width: 100%; } 8846 8847.euiRangeLabel--min, .euiRangeLabel--max { 8848 font-size: 12px; } 8849 8850.euiRangeLabel--min { 8851 margin-right: 8px; } 8852 8853.euiRangeLabel--max { 8854 margin-left: 8px; } 8855 8856.euiRangeLabel--isDisabled { 8857 opacity: 0.25; } 8858 8859.euiRangeLevels { 8860 display: -webkit-flex; 8861 display: flex; 8862 -webkit-justify-content: stretch; 8863 justify-content: stretch; 8864 position: absolute; 8865 left: 0; 8866 right: 0; 8867 top: 22px; } 8868 .euiRangeLevels--hasTicks { 8869 top: 12px; } 8870 .euiRangeLevels--compressed { 8871 top: 18px; } 8872 .euiRangeLevels--compressed.euiRangeLevels--hasTicks { 8873 top: 10px; } 8874 8875.euiRangeLevel { 8876 display: block; 8877 position: absolute; 8878 height: 6px; 8879 border-radius: 6px; 8880 margin: 2px; } 8881 8882.euiRangeLevel--primary { 8883 background-color: rgba(27, 169, 245, 0.3); } 8884 8885.euiRangeLevel--success { 8886 background-color: rgba(125, 226, 209, 0.3); } 8887 8888.euiRangeLevel--warning { 8889 background-color: rgba(255, 206, 122, 0.3); } 8890 8891.euiRangeLevel--danger { 8892 background-color: rgba(255, 102, 102, 0.3); } 8893 8894/* 8895 * Input Range Customization by browser 8896 */ 8897.euiRangeSlider { 8898 height: 40px; 8899 -webkit-appearance: none; 8900 -moz-appearance: none; 8901 appearance: none; 8902 background: transparent; 8903 width: 100%; 8904 position: relative; 8905 cursor: pointer; 8906 z-index: 1; } 8907 .euiRangeSlider:disabled { 8908 cursor: not-allowed; } 8909 .euiRangeSlider:disabled::-webkit-slider-thumb { 8910 cursor: not-allowed; 8911 border-color: #98A2B3; 8912 background-color: #98A2B3; 8913 box-shadow: none; } 8914 .euiRangeSlider:disabled::-moz-range-thumb { 8915 cursor: not-allowed; 8916 border-color: #98A2B3; 8917 background-color: #98A2B3; 8918 box-shadow: none; } 8919 .euiRangeSlider:disabled::-ms-thumb { 8920 cursor: not-allowed; 8921 border-color: #98A2B3; 8922 background-color: #98A2B3; 8923 box-shadow: none; } 8924 .euiRangeSlider:disabled ~ .euiRangeThumb { 8925 cursor: not-allowed; 8926 border-color: #98A2B3; 8927 background-color: #98A2B3; 8928 box-shadow: none; } 8929 .euiRangeSlider::-webkit-slider-thumb { 8930 box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3); 8931 padding: 7px; 8932 border: 1px solid #66676d; 8933 background: #1D1E24 no-repeat center; 8934 border-radius: 14px; 8935 -webkit-transition: background-color 150ms ease-in, border-color 150ms ease-in; 8936 transition: background-color 150ms ease-in, border-color 150ms ease-in; 8937 cursor: pointer; 8938 border-color: #98A2B3; 8939 padding: 0; 8940 height: 16px; 8941 width: 16px; } 8942 .euiRangeSlider::-moz-range-thumb { 8943 box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3); 8944 padding: 7px; 8945 border: 1px solid #66676d; 8946 background: #1D1E24 no-repeat center; 8947 border-radius: 14px; 8948 -moz-transition: background-color 150ms ease-in, border-color 150ms ease-in; 8949 transition: background-color 150ms ease-in, border-color 150ms ease-in; 8950 cursor: pointer; 8951 border-color: #98A2B3; 8952 padding: 0; 8953 height: 16px; 8954 width: 16px; } 8955 .euiRangeSlider::-ms-thumb { 8956 box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3); 8957 padding: 7px; 8958 border: 1px solid #66676d; 8959 background: #1D1E24 no-repeat center; 8960 border-radius: 14px; 8961 -ms-transition: background-color 150ms ease-in, border-color 150ms ease-in; 8962 transition: background-color 150ms ease-in, border-color 150ms ease-in; 8963 cursor: pointer; 8964 border-color: #98A2B3; 8965 padding: 0; 8966 height: 16px; 8967 width: 16px; } 8968 .euiRangeSlider::-webkit-slider-runnable-track { 8969 height: 2px; 8970 -webkit-transition: all 250ms ease-in; 8971 transition: all 250ms ease-in; 8972 width: 100%; 8973 background: #98A2B3; 8974 border: 0 solid #98A2B3; 8975 border-radius: 4px; } 8976 .euiRangeSlider::-moz-range-track { 8977 height: 2px; 8978 -moz-transition: all 250ms ease-in; 8979 transition: all 250ms ease-in; 8980 width: 100%; 8981 background: #98A2B3; 8982 border: 0 solid #98A2B3; 8983 border-radius: 4px; } 8984 .euiRangeSlider::-ms-fill-lower { 8985 height: 2px; 8986 -ms-transition: all 250ms ease-in; 8987 transition: all 250ms ease-in; 8988 width: 100%; 8989 background: #98A2B3; 8990 border: 0 solid #98A2B3; 8991 border-radius: 4px; } 8992 .euiRangeSlider::-ms-fill-upper { 8993 height: 2px; 8994 -ms-transition: all 250ms ease-in; 8995 transition: all 250ms ease-in; 8996 width: 100%; 8997 background: #98A2B3; 8998 border: 0 solid #98A2B3; 8999 border-radius: 4px; } 9000 .euiRangeSlider:focus { 9001 outline: none; } 9002 .euiRangeSlider:focus-visible::-webkit-slider-thumb, .euiRangeSlider--hasFocus::-webkit-slider-thumb { 9003 box-shadow: 0 0 0 3px rgba(27, 169, 245, 0.3); } 9004 .euiRangeSlider:focus-visible::-moz-range-thumb, .euiRangeSlider--hasFocus::-moz-range-thumb { 9005 box-shadow: 0 0 0 3px rgba(27, 169, 245, 0.3); } 9006 .euiRangeSlider:focus-visible::-ms-thumb, .euiRangeSlider--hasFocus::-ms-thumb { 9007 box-shadow: 0 0 0 3px rgba(27, 169, 245, 0.3); } 9008 .euiRangeSlider:focus-visible ~ .euiRangeThumb, .euiRangeSlider--hasFocus ~ .euiRangeThumb { 9009 border-color: #98A2B3; } 9010 .euiRangeSlider:focus-visible::-webkit-slider-runnable-track, .euiRangeSlider--hasFocus::-webkit-slider-runnable-track { 9011 background-color: #1BA9F5; 9012 border-color: #1BA9F5; } 9013 .euiRangeSlider:focus-visible::-moz-range-track, .euiRangeSlider--hasFocus::-moz-range-track { 9014 background-color: #1BA9F5; 9015 border-color: #1BA9F5; } 9016 .euiRangeSlider:focus-visible::-ms-fill-lower, .euiRangeSlider--hasFocus::-ms-fill-lower { 9017 background-color: #1BA9F5; 9018 border-color: #1BA9F5; } 9019 .euiRangeSlider:focus-visible::-ms-fill-upper, .euiRangeSlider--hasFocus::-ms-fill-upper { 9020 background-color: #1BA9F5; 9021 border-color: #1BA9F5; } 9022 .euiRangeSlider:focus-visible ~ .euiRangeHighlight .euiRangeHighlight__progress, .euiRangeSlider--hasFocus ~ .euiRangeHighlight .euiRangeHighlight__progress { 9023 background-color: #1BA9F5; } 9024 .euiRangeSlider:focus-visible ~ .euiRangeTooltip .euiRangeTooltip__value, .euiRangeSlider--hasFocus ~ .euiRangeTooltip .euiRangeTooltip__value { 9025 box-shadow: 0 6px 12px -1px rgba(0, 0, 0, 0.2), 0 4px 4px -1px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2); } 9026 .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 { 9027 -webkit-transform: translateX(0) translateY(-50%) scale(1.1); 9028 transform: translateX(0) translateY(-50%) scale(1.1); } 9029 .euiRangeSlider::-webkit-slider-thumb { 9030 -webkit-appearance: none; 9031 margin-top: -7px; } 9032 .euiRangeSlider::-ms-thumb { 9033 margin-top: 0; } 9034 .euiRangeSlider::-moz-focus-outer { 9035 border: none; } 9036 .euiRangeSlider::-ms-track { 9037 height: 2px; 9038 -ms-transition: all 250ms ease-in; 9039 transition: all 250ms ease-in; 9040 width: 100%; 9041 background: transparent; 9042 border-color: transparent; 9043 border-width: 8px 0; 9044 color: transparent; } 9045 .euiRangeSlider--hasTicks { 9046 height: 20px; } 9047 .euiRangeSlider--compressed { 9048 height: 32px; } 9049 .euiRangeSlider--compressed.euiRangeSlider--hasTicks { 9050 height: 16px; } 9051 9052.euiRangeSlider--hasRange::-webkit-slider-runnable-track { 9053 background-color: rgba(152, 162, 179, 0.4); 9054 border-color: rgba(152, 162, 179, 0.4); } 9055 9056.euiRangeSlider--hasRange::-moz-range-track { 9057 background-color: rgba(152, 162, 179, 0.4); 9058 border-color: rgba(152, 162, 179, 0.4); } 9059 9060.euiRangeSlider--hasRange::-ms-fill-lower { 9061 background-color: rgba(152, 162, 179, 0.4); 9062 border-color: rgba(152, 162, 179, 0.4); } 9063 9064.euiRangeSlider--hasRange::-ms-fill-upper { 9065 background-color: rgba(152, 162, 179, 0.4); 9066 border-color: rgba(152, 162, 179, 0.4); } 9067 9068.euiRangeThumb { 9069 box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3); 9070 padding: 7px; 9071 border: 1px solid #66676d; 9072 background: #1D1E24 no-repeat center; 9073 border-radius: 14px; 9074 transition: background-color 150ms ease-in, border-color 150ms ease-in; 9075 cursor: pointer; 9076 border-color: #98A2B3; 9077 padding: 0; 9078 height: 16px; 9079 width: 16px; 9080 content: ''; 9081 position: absolute; 9082 left: 0; 9083 top: 50%; 9084 margin-top: -8px; 9085 pointer-events: none; 9086 z-index: 1; } 9087 .euiRangeThumb:focus { 9088 -webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important; 9089 animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important; 9090 border-color: #1BA9F5; } 9091 .euiRangeThumb--hasTicks { 9092 top: 25%; } 9093 9094.euiRangeTicks { 9095 position: absolute; 9096 left: 0; 9097 right: 0; 9098 top: 8px; 9099 display: -webkit-flex; 9100 display: flex; } 9101 .euiRangeTicks--isCustom { 9102 left: 2px; 9103 right: 2px; } 9104 9105.euiRangeTick { 9106 overflow-x: hidden; 9107 text-overflow: ellipsis; 9108 font-size: 12px; 9109 position: absolute; 9110 -webkit-transform: translateX(-50%); 9111 transform: translateX(-50%); 9112 padding-top: 16px; } 9113 .euiRangeTick:not(.euiRangeTick--hasTickMark)::before { 9114 width: 4px; 9115 height: 4px; 9116 background-color: #98A2B3; 9117 border-radius: 100%; 9118 position: absolute; 9119 top: 0; 9120 content: ''; 9121 left: calc(50% - 2px); } 9122 .euiRangeTick .euiRangeTick__pseudo { 9123 width: 4px; 9124 height: 4px; 9125 background-color: #98A2B3; 9126 border-radius: 100%; 9127 position: absolute; 9128 top: 0; } 9129 .euiRangeTick--isCustom { 9130 overflow-x: visible; } 9131 .euiRangeTick--isMin, .euiRangeTick--isMax { 9132 -webkit-transform: translateX(0); 9133 transform: translateX(0); } 9134 .euiRangeTick--isMin .euiRangeTick__pseudo { 9135 left: 0; } 9136 .euiRangeTick--isMax .euiRangeTick__pseudo { 9137 right: 0; } 9138 .euiRangeTick:enabled:hover, .euiRangeTick:focus, .euiRangeTick--selected { 9139 color: #1BA9F5; } 9140 .euiRangeTick--selected { 9141 font-weight: 500; } 9142 .euiRangeTick:disabled { 9143 cursor: not-allowed; } 9144 9145.euiRangeTicks--compressed { 9146 top: 6px; } 9147 .euiRangeTicks--compressed .euiRangeTick { 9148 padding-top: 14px; } 9149 9150.euiRangeTick__label { 9151 pointer-events: none; } 9152 9153.euiRangeTooltip { 9154 display: block; 9155 position: absolute; 9156 left: 0; 9157 top: 0; 9158 bottom: 0; 9159 width: calc(100% - 16px); 9160 margin-left: 8px; 9161 pointer-events: none; 9162 z-index: 2; } 9163 9164.euiRangeTooltip__value { 9165 font-size: 14px; 9166 font-size: 0.875rem; 9167 line-height: 1.5; 9168 border: 1px solid black; 9169 position: absolute; 9170 border-radius: 4px; 9171 padding: 2px 8px; 9172 background-color: black; 9173 color: #FFF; 9174 max-width: 256px; 9175 top: 50%; 9176 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); 9177 transition: box-shadow 250ms cubic-bezier(0.694, 0.0482, 0.335, 1), transform 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); 9178 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); } 9179 .euiRangeTooltip__value::after, .euiRangeTooltip__value::before { 9180 content: ''; 9181 position: absolute; 9182 bottom: -6px; 9183 left: 50%; 9184 -webkit-transform-origin: center; 9185 transform-origin: center; 9186 background-color: black; 9187 width: 12px; 9188 height: 12px; 9189 border-radius: 2px; } 9190 .euiRangeTooltip__value::before { 9191 background-color: black; } 9192 .euiRangeTooltip__value.euiRangeTooltip__value--right { 9193 margin-left: 24px; } 9194 .euiRangeTooltip__value.euiRangeTooltip__value--right:before, .euiRangeTooltip__value.euiRangeTooltip__value--right:after { 9195 left: -5px; } 9196 .euiRangeTooltip__value.euiRangeTooltip__value--right::before { 9197 margin-left: -1px; } 9198 .euiRangeTooltip__value.euiRangeTooltip__value--left { 9199 margin-right: 24px; } 9200 .euiRangeTooltip__value.euiRangeTooltip__value--left:before, .euiRangeTooltip__value.euiRangeTooltip__value--left:after { 9201 left: auto; 9202 right: -5px; } 9203 .euiRangeTooltip__value.euiRangeTooltip__value--left::before { 9204 margin-right: -1px; } 9205 .euiRangeTooltip__value.euiRangeTooltip__value--right, .euiRangeTooltip__value.euiRangeTooltip__value--left { 9206 -webkit-transform: translateX(0) translateY(-50%); 9207 transform: translateX(0) translateY(-50%); } 9208 .euiRangeTooltip__value.euiRangeTooltip__value--right:before, .euiRangeTooltip__value.euiRangeTooltip__value--right:after, .euiRangeTooltip__value.euiRangeTooltip__value--left:before, .euiRangeTooltip__value.euiRangeTooltip__value--left:after { 9209 bottom: 50%; 9210 -webkit-transform: translateY(50%) rotateZ(45deg); 9211 transform: translateY(50%) rotateZ(45deg); } 9212 .euiRangeTooltip__value--hasTicks { 9213 top: 10px; } 9214 .euiRangeTooltip--compressed .euiRangeTooltip__value--hasTicks { 9215 top: 8px; } 9216 9217.euiRangeTrack { 9218 height: 100%; 9219 -webkit-flex-grow: 1; 9220 flex-grow: 1; 9221 position: relative; 9222 -webkit-align-self: flex-start; 9223 align-self: flex-start; } 9224 .euiRangeTrack--hasTicks { 9225 margin-left: 1em; 9226 margin-right: 1em; } 9227 .euiRangeTrack--disabled { 9228 opacity: 0.25; } 9229 9230/* 9231 * 1. There's no way to target the layout of the extra input, so we must 9232 * use the descendant selector to allow the width to shrink. 9233 * 9234 * 2. Prevent the prepend/append label from extending outside the parent element 9235 */ 9236.euiRangeWrapper { 9237 max-width: 400px; 9238 width: 100%; 9239 height: 40px; 9240 display: -webkit-flex; 9241 display: flex; 9242 -webkit-align-items: center; 9243 align-items: center; } 9244 .euiRangeWrapper--fullWidth { 9245 max-width: 100%; } 9246 .euiRangeWrapper--compressed { 9247 height: 32px; } 9248 .euiRangeWrapper--inGroup { 9249 height: 100%; } 9250 .euiRangeWrapper > .euiFormControlLayout { 9251 /* 1 */ 9252 width: auto; } 9253 .euiRangeWrapper > .euiFormControlLayout.euiFormControlLayout--group { 9254 -webkit-flex-shrink: 0; 9255 flex-shrink: 0; 9256 /* 2 */ } 9257 9258.euiDualRange__slider::-webkit-slider-thumb { 9259 visibility: hidden; } 9260 9261.euiDualRange__slider::-moz-range-thumb { 9262 visibility: hidden; } 9263 9264.euiDualRange__slider::-ms-thumb { 9265 visibility: hidden; } 9266 9267/** 9268 * 1. Leave room for caret. 9269 * 2. Ensure the descenders don't get cut off 9270 */ 9271.euiSelect { 9272 max-width: 400px; 9273 width: 100%; 9274 height: 40px; 9275 background-color: #16171c; 9276 background-repeat: no-repeat; 9277 background-size: 0% 100%; 9278 box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.2), 0 3px 2px -2px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1); 9279 transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in; 9280 font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 9281 font-weight: 400; 9282 letter-spacing: -.005em; 9283 -webkit-text-size-adjust: 100%; 9284 -ms-text-size-adjust: 100%; 9285 -webkit-font-kerning: normal; 9286 font-kerning: normal; 9287 font-size: 14px; 9288 color: #DFE5EF; 9289 border: none; 9290 border-radius: 0; 9291 padding: 12px; 9292 padding-right: 40px; 9293 /* 1 */ 9294 -webkit-appearance: none; 9295 -moz-appearance: none; 9296 appearance: none; 9297 line-height: 40px; 9298 /* 2 */ 9299 padding-top: 0; 9300 /* 2 */ 9301 padding-bottom: 0; 9302 /* 2 */ } 9303 .euiSelect--fullWidth { 9304 max-width: 100%; } 9305 .euiSelect--compressed { 9306 height: 32px; } 9307 .euiSelect--inGroup { 9308 height: 100%; } 9309 @supports (-moz-appearance: none) { 9310 .euiSelect { 9311 transition-property: box-shadow, background-image, background-size; } } 9312 @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { 9313 .euiSelect { 9314 line-height: 1em; } } 9315 .euiSelect::-webkit-input-placeholder { 9316 color: #81858f; 9317 opacity: 1; } 9318 .euiSelect::-moz-placeholder { 9319 color: #81858f; 9320 opacity: 1; } 9321 .euiSelect::placeholder { 9322 color: #81858f; 9323 opacity: 1; } 9324 .euiSelect:invalid { 9325 background-image: linear-gradient(to top, #F66, #F66 2px, transparent 2px, transparent 100%); 9326 background-size: 100%; } 9327 .euiSelect:focus { 9328 background-color: #111216; 9329 background-image: linear-gradient(to top, #1BA9F5, #1BA9F5 2px, transparent 2px, transparent 100%); 9330 background-size: 100% 100%; 9331 box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.2), 0 4px 4px -2px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1); } 9332 .euiSelect:disabled { 9333 color: #535966; 9334 -webkit-text-fill-color: #535966; 9335 cursor: not-allowed; 9336 background: #202128; 9337 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } 9338 .euiSelect:disabled::-webkit-input-placeholder { 9339 color: #535966; 9340 opacity: 1; } 9341 .euiSelect:disabled::-moz-placeholder { 9342 color: #535966; 9343 opacity: 1; } 9344 .euiSelect:disabled::placeholder { 9345 color: #535966; 9346 opacity: 1; } 9347 .euiSelect[readOnly] { 9348 cursor: default; 9349 background: rgba(0, 0, 0, 0.05); 9350 border-color: transparent; 9351 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } 9352 .euiSelect:-webkit-autofill { 9353 -webkit-text-fill-color: #343741; } 9354 .euiSelect:-webkit-autofill ~ .euiFormControlLayoutIcons { 9355 color: #343741; } 9356 .euiSelect--compressed { 9357 background-color: #16171c; 9358 background-repeat: no-repeat; 9359 background-size: 0% 100%; 9360 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); 9361 transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in; 9362 padding: 8px; 9363 border-radius: 2px; } 9364 @supports (-moz-appearance: none) { 9365 .euiSelect--compressed { 9366 transition-property: box-shadow, background-image, background-size; } } 9367 .euiSelect--compressed:invalid { 9368 background-image: linear-gradient(to top, #F66, #F66 2px, transparent 2px, transparent 100%); 9369 background-size: 100%; } 9370 .euiSelect--compressed:focus { 9371 background-color: #111216; 9372 background-image: linear-gradient(to top, #1BA9F5, #1BA9F5 2px, transparent 2px, transparent 100%); 9373 background-size: 100% 100%; 9374 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } 9375 .euiSelect--compressed:disabled { 9376 color: #535966; 9377 -webkit-text-fill-color: #535966; 9378 cursor: not-allowed; 9379 background: #202128; 9380 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } 9381 .euiSelect--compressed:disabled::-webkit-input-placeholder { 9382 color: #535966; 9383 opacity: 1; } 9384 .euiSelect--compressed:disabled::-moz-placeholder { 9385 color: #535966; 9386 opacity: 1; } 9387 .euiSelect--compressed:disabled::placeholder { 9388 color: #535966; 9389 opacity: 1; } 9390 .euiSelect--compressed[readOnly] { 9391 cursor: default; 9392 background: rgba(0, 0, 0, 0.05); 9393 border-color: transparent; 9394 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } 9395 .euiSelect--inGroup { 9396 box-shadow: none !important; 9397 border-radius: 0; } 9398 .euiSelect-isLoading { 9399 padding-right: 62px; } 9400 .euiSelect-isLoading.euiSelect--compressed { 9401 padding-right: 54px; } 9402 .euiSelect--compressed { 9403 padding-right: 32px; 9404 /* 1 */ 9405 line-height: 32px; 9406 /* 2 */ 9407 padding-top: 0; 9408 /* 2 */ 9409 padding-bottom: 0; 9410 /* 2 */ } 9411 .euiSelect--inGroup { 9412 line-height: 38px; 9413 /* 2 */ } 9414 .euiSelect--inGroup.euiSelect--compressed { 9415 line-height: 30px; 9416 /* 2 */ } 9417 .euiSelect::-ms-expand { 9418 display: none; } 9419 .euiSelect:focus::-ms-value { 9420 color: #DFE5EF; 9421 background: transparent; } 9422 .euiSelect:-moz-focusring { 9423 color: transparent; 9424 text-shadow: 0 0 0 #DFE5EF; } 9425 9426.euiSuperSelect__listbox { 9427 scrollbar-color: rgba(152, 162, 179, 0.5) transparent; 9428 scrollbar-width: thin; 9429 max-height: 300px; 9430 overflow: hidden; 9431 overflow-y: auto; } 9432 .euiSuperSelect__listbox::-webkit-scrollbar { 9433 width: 16px; 9434 height: 16px; } 9435 .euiSuperSelect__listbox::-webkit-scrollbar-thumb { 9436 background-color: rgba(152, 162, 179, 0.5); 9437 background-clip: content-box; 9438 border-radius: 16px; 9439 border: 6px solid transparent; } 9440 .euiSuperSelect__listbox::-webkit-scrollbar-corner, .euiSuperSelect__listbox::-webkit-scrollbar-track { 9441 background-color: transparent; } 9442 9443.euiSuperSelect__item { 9444 font-size: 14px; 9445 font-size: 0.875rem; 9446 line-height: 1.5; 9447 padding: 8px; } 9448 .euiSuperSelect__item:hover { 9449 cursor: pointer; 9450 text-decoration: underline; } 9451 .euiSuperSelect__item:focus { 9452 cursor: pointer; 9453 text-decoration: underline; 9454 background-color: #052231; } 9455 .euiSuperSelect__item:disabled { 9456 cursor: not-allowed; 9457 text-decoration: none; 9458 color: #4c4e51; } 9459 9460.euiSuperSelect__item--hasDividers:not(:last-of-type) { 9461 border-bottom: 1px solid #343741; } 9462 9463/** 9464 * 1. Leave room for caret. 9465 * 2. Ensure the descenders don't get cut off 9466 * 3. Makes sure the height is correct when there's no selection 9467 */ 9468.euiSuperSelectControl { 9469 max-width: 400px; 9470 width: 100%; 9471 height: 40px; 9472 background-color: #16171c; 9473 background-repeat: no-repeat; 9474 background-size: 0% 100%; 9475 box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.2), 0 3px 2px -2px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1); 9476 transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in; 9477 font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 9478 font-weight: 400; 9479 letter-spacing: -.005em; 9480 -webkit-text-size-adjust: 100%; 9481 -ms-text-size-adjust: 100%; 9482 -webkit-font-kerning: normal; 9483 font-kerning: normal; 9484 font-size: 14px; 9485 color: #DFE5EF; 9486 border: none; 9487 border-radius: 0; 9488 padding: 12px; 9489 padding-right: 40px; 9490 /* 1 */ 9491 display: block; 9492 /* 3 */ 9493 text-align: left; 9494 line-height: 40px; 9495 /* 2 */ 9496 padding-top: 0; 9497 /* 2 */ 9498 padding-bottom: 0; 9499 /* 2 */ 9500 overflow: hidden; 9501 text-overflow: ellipsis; 9502 white-space: nowrap; } 9503 .euiSuperSelectControl--fullWidth { 9504 max-width: 100%; } 9505 .euiSuperSelectControl--compressed { 9506 height: 32px; } 9507 .euiSuperSelectControl--inGroup { 9508 height: 100%; } 9509 @supports (-moz-appearance: none) { 9510 .euiSuperSelectControl { 9511 transition-property: box-shadow, background-image, background-size; } } 9512 @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { 9513 .euiSuperSelectControl { 9514 line-height: 1em; } } 9515 .euiSuperSelectControl::-webkit-input-placeholder { 9516 color: #81858f; 9517 opacity: 1; } 9518 .euiSuperSelectControl::-moz-placeholder { 9519 color: #81858f; 9520 opacity: 1; } 9521 .euiSuperSelectControl::placeholder { 9522 color: #81858f; 9523 opacity: 1; } 9524 .euiSuperSelectControl:invalid { 9525 background-image: linear-gradient(to top, #F66, #F66 2px, transparent 2px, transparent 100%); 9526 background-size: 100%; } 9527 .euiSuperSelectControl:focus { 9528 background-color: #111216; 9529 background-image: linear-gradient(to top, #1BA9F5, #1BA9F5 2px, transparent 2px, transparent 100%); 9530 background-size: 100% 100%; 9531 box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.2), 0 4px 4px -2px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1); } 9532 .euiSuperSelectControl:disabled { 9533 color: #535966; 9534 -webkit-text-fill-color: #535966; 9535 cursor: not-allowed; 9536 background: #202128; 9537 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } 9538 .euiSuperSelectControl:disabled::-webkit-input-placeholder { 9539 color: #535966; 9540 opacity: 1; } 9541 .euiSuperSelectControl:disabled::-moz-placeholder { 9542 color: #535966; 9543 opacity: 1; } 9544 .euiSuperSelectControl:disabled::placeholder { 9545 color: #535966; 9546 opacity: 1; } 9547 .euiSuperSelectControl[readOnly] { 9548 cursor: default; 9549 background: rgba(0, 0, 0, 0.05); 9550 border-color: transparent; 9551 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } 9552 .euiSuperSelectControl:-webkit-autofill { 9553 -webkit-text-fill-color: #343741; } 9554 .euiSuperSelectControl:-webkit-autofill ~ .euiFormControlLayoutIcons { 9555 color: #343741; } 9556 .euiSuperSelectControl--compressed { 9557 background-color: #16171c; 9558 background-repeat: no-repeat; 9559 background-size: 0% 100%; 9560 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); 9561 transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in; 9562 padding: 8px; 9563 border-radius: 2px; } 9564 @supports (-moz-appearance: none) { 9565 .euiSuperSelectControl--compressed { 9566 transition-property: box-shadow, background-image, background-size; } } 9567 .euiSuperSelectControl--compressed:invalid { 9568 background-image: linear-gradient(to top, #F66, #F66 2px, transparent 2px, transparent 100%); 9569 background-size: 100%; } 9570 .euiSuperSelectControl--compressed:focus { 9571 background-color: #111216; 9572 background-image: linear-gradient(to top, #1BA9F5, #1BA9F5 2px, transparent 2px, transparent 100%); 9573 background-size: 100% 100%; 9574 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } 9575 .euiSuperSelectControl--compressed:disabled { 9576 color: #535966; 9577 -webkit-text-fill-color: #535966; 9578 cursor: not-allowed; 9579 background: #202128; 9580 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } 9581 .euiSuperSelectControl--compressed:disabled::-webkit-input-placeholder { 9582 color: #535966; 9583 opacity: 1; } 9584 .euiSuperSelectControl--compressed:disabled::-moz-placeholder { 9585 color: #535966; 9586 opacity: 1; } 9587 .euiSuperSelectControl--compressed:disabled::placeholder { 9588 color: #535966; 9589 opacity: 1; } 9590 .euiSuperSelectControl--compressed[readOnly] { 9591 cursor: default; 9592 background: rgba(0, 0, 0, 0.05); 9593 border-color: transparent; 9594 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } 9595 .euiSuperSelectControl--inGroup { 9596 box-shadow: none !important; 9597 border-radius: 0; } 9598 .euiSuperSelectControl-isLoading { 9599 padding-right: 62px; } 9600 .euiSuperSelectControl-isLoading.euiSuperSelectControl--compressed { 9601 padding-right: 54px; } 9602 .euiSuperSelectControl-isInvalid { 9603 background-image: linear-gradient(to top, #F66, #F66 2px, transparent 2px, transparent 100%); 9604 background-size: 100%; } 9605 .euiSuperSelectControl--compressed { 9606 padding-right: 32px; 9607 /* 1 */ 9608 line-height: 32px; 9609 /* 2 */ 9610 padding-top: 0; 9611 /* 2 */ 9612 padding-bottom: 0; 9613 /* 2 */ } 9614 .euiSuperSelectControl.euiSuperSelect--isOpen__button { 9615 background-color: #111216; 9616 background-image: linear-gradient(to top, #1BA9F5, #1BA9F5 2px, transparent 2px, transparent 100%); 9617 background-size: 100% 100%; 9618 box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.2), 0 4px 4px -2px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1); } 9619 9620.euiSwitch { 9621 position: relative; 9622 display: -webkit-inline-flex; 9623 display: inline-flex; 9624 -webkit-align-items: flex-start; 9625 align-items: flex-start; 9626 min-height: 20px; } 9627 .euiSwitch .euiSwitch__label { 9628 cursor: pointer; 9629 padding-left: 8px; 9630 line-height: 20px; 9631 font-size: 14px; 9632 vertical-align: middle; 9633 display: inline-block; } 9634 .euiSwitch .euiSwitch__button { 9635 -webkit-flex-shrink: 0; 9636 flex-shrink: 0; 9637 line-height: 0; } 9638 .euiSwitch .euiSwitch__button:focus .euiSwitch__track { 9639 -webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important; 9640 animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important; 9641 border-color: #1BA9F5; } 9642 .euiSwitch .euiSwitch__button:disabled:hover, 9643 .euiSwitch .euiSwitch__button:disabled ~ .euiSwitch__label:hover { 9644 cursor: not-allowed; } 9645 .euiSwitch .euiSwitch__button:disabled .euiSwitch__body { 9646 background-color: rgba(83, 89, 102, 0.7); } 9647 .euiSwitch .euiSwitch__button:disabled .euiSwitch__thumb { 9648 border-color: #343741; 9649 background-color: #343741; 9650 box-shadow: none; 9651 background-color: rgba(83, 89, 102, 0.7); } 9652 .euiSwitch .euiSwitch__button:disabled .euiSwitch__icon { 9653 fill: #a6aab0; } 9654 .euiSwitch .euiSwitch__button:disabled + .euiSwitch__label { 9655 color: #535966; } 9656 .euiSwitch .euiSwitch__button[aria-checked='false'] .euiSwitch__body { 9657 background-color: rgba(83, 89, 102, 0.7); } 9658 .euiSwitch .euiSwitch__button[aria-checked='false'] .euiSwitch__thumb { 9659 left: 0; } 9660 .euiSwitch .euiSwitch__button[aria-checked='false'] .euiSwitch__icon { 9661 right: -8px; } 9662 .euiSwitch .euiSwitch__button[aria-checked='false'] .euiSwitch__icon.euiSwitch__icon--checked { 9663 right: auto; 9664 left: -34px; } 9665 .euiSwitch .euiSwitch__body { 9666 pointer-events: none; 9667 width: 44px; 9668 height: 20px; 9669 background-color: #1BA9F5; 9670 display: inline-block; 9671 position: relative; 9672 border-radius: 20px; 9673 vertical-align: middle; } 9674 .euiSwitch .euiSwitch__thumb { 9675 box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3); 9676 padding: 9px; 9677 border: 1px solid #66676d; 9678 background: #1D1E24 no-repeat center; 9679 border-radius: 18px; 9680 transition: background-color 150ms ease-in, border-color 150ms ease-in; 9681 position: absolute; 9682 display: inline-block; 9683 left: 24px; 9684 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); 9685 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); 9686 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); } 9687 .euiSwitch .euiSwitch__track { 9688 position: absolute; 9689 left: 0; 9690 top: 0; 9691 right: 0; 9692 bottom: 0; 9693 overflow: hidden; 9694 border-radius: 20px; } 9695 .euiSwitch .euiSwitch__icon { 9696 position: absolute; 9697 right: -34px; 9698 top: 2px; 9699 bottom: 0; 9700 width: 42px; 9701 height: 16px; 9702 transition: left 250ms cubic-bezier(0.34, 1.61, 0.7, 1), right 250ms cubic-bezier(0.34, 1.61, 0.7, 1); 9703 fill: #DFE5EF; } 9704 .euiSwitch .euiSwitch__icon--checked { 9705 right: auto; 9706 left: -8px; 9707 fill: #1D1E24; } 9708 .euiSwitch:hover .euiSwitch__button:not(:disabled) .euiSwitch__thumb { 9709 -webkit-transform: scale(1.05); 9710 transform: scale(1.05); } 9711 .euiSwitch:hover .euiSwitch__button:active .euiSwitch__thumb { 9712 -webkit-transform: scale(0.95); 9713 transform: scale(0.95); } 9714 .euiSwitch.euiSwitch--compressed { 9715 min-height: 16px; } 9716 .euiSwitch.euiSwitch--compressed .euiSwitch__label { 9717 line-height: 16px; } 9718 .euiSwitch.euiSwitch--compressed .euiSwitch__body { 9719 width: 28px; 9720 height: 16px; 9721 border-radius: 16px; } 9722 .euiSwitch.euiSwitch--compressed .euiSwitch__thumb { 9723 box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3); 9724 padding: 6px; 9725 border: 1px solid #66676d; 9726 background: #1D1E24 no-repeat center; 9727 border-radius: 12px; 9728 transition: background-color 150ms ease-in, border-color 150ms ease-in; 9729 left: 13px; 9730 top: 1px; 9731 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); 9732 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); 9733 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); } 9734 .euiSwitch.euiSwitch--compressed .euiSwitch__track { 9735 border-radius: 16px; } 9736 .euiSwitch.euiSwitch--mini { 9737 min-height: 10px; } 9738 .euiSwitch.euiSwitch--mini .euiSwitch__label { 9739 line-height: 10px; 9740 font-size: 12px; } 9741 .euiSwitch.euiSwitch--mini .euiSwitch__body { 9742 width: 22px; 9743 height: 10px; 9744 border-radius: 10px; } 9745 .euiSwitch.euiSwitch--mini .euiSwitch__thumb { 9746 box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3); 9747 padding: 3px; 9748 border: 1px solid #66676d; 9749 background: #1D1E24 no-repeat center; 9750 border-radius: 6px; 9751 transition: background-color 150ms ease-in, border-color 150ms ease-in; 9752 left: 13px; 9753 top: 1px; 9754 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); 9755 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); 9756 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); } 9757 .euiSwitch.euiSwitch--mini .euiSwitch__track { 9758 border-radius: 10px; } 9759 .euiSwitch.euiSwitch--compressed .euiSwitch__button[aria-checked='false'] .euiSwitch__thumb, .euiSwitch.euiSwitch--mini .euiSwitch__button[aria-checked='false'] .euiSwitch__thumb { 9760 left: 1px; } 9761 .euiSwitch.euiSwitch--compressed .euiSwitch__button[aria-checked='false'] .euiSwitch__thumb, 9762 .euiSwitch.euiSwitch--compressed .euiSwitch__button[aria-checked='true']:disabled .euiSwitch__thumb, .euiSwitch.euiSwitch--mini .euiSwitch__button[aria-checked='false'] .euiSwitch__thumb, 9763 .euiSwitch.euiSwitch--mini .euiSwitch__button[aria-checked='true']:disabled .euiSwitch__thumb { 9764 border-color: #66676d; } 9765 .euiSwitch.euiSwitch--compressed .euiSwitch__button[aria-checked='true'] .euiSwitch__thumb, .euiSwitch.euiSwitch--mini .euiSwitch__button[aria-checked='true'] .euiSwitch__thumb { 9766 border-color: #1BA9F5; } 9767 9768.euiTextArea { 9769 max-width: 400px; 9770 width: 100%; 9771 height: 40px; 9772 background-color: #16171c; 9773 background-repeat: no-repeat; 9774 background-size: 0% 100%; 9775 box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.2), 0 3px 2px -2px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1); 9776 transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in; 9777 font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 9778 font-weight: 400; 9779 letter-spacing: -.005em; 9780 -webkit-text-size-adjust: 100%; 9781 -ms-text-size-adjust: 100%; 9782 -webkit-font-kerning: normal; 9783 font-kerning: normal; 9784 font-size: 14px; 9785 color: #DFE5EF; 9786 border: none; 9787 border-radius: 0; 9788 padding: 12px; 9789 line-height: 1.5; } 9790 .euiTextArea--fullWidth { 9791 max-width: 100%; } 9792 .euiTextArea--compressed { 9793 height: 32px; } 9794 .euiTextArea--inGroup { 9795 height: 100%; } 9796 @supports (-moz-appearance: none) { 9797 .euiTextArea { 9798 transition-property: box-shadow, background-image, background-size; } } 9799 @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { 9800 .euiTextArea { 9801 line-height: 1em; } } 9802 .euiTextArea::-webkit-input-placeholder { 9803 color: #81858f; 9804 opacity: 1; } 9805 .euiTextArea::-moz-placeholder { 9806 color: #81858f; 9807 opacity: 1; } 9808 .euiTextArea::placeholder { 9809 color: #81858f; 9810 opacity: 1; } 9811 .euiTextArea:invalid { 9812 background-image: linear-gradient(to top, #F66, #F66 2px, transparent 2px, transparent 100%); 9813 background-size: 100%; } 9814 .euiTextArea:focus { 9815 background-color: #111216; 9816 background-image: linear-gradient(to top, #1BA9F5, #1BA9F5 2px, transparent 2px, transparent 100%); 9817 background-size: 100% 100%; 9818 box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.2), 0 4px 4px -2px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1); } 9819 .euiTextArea:disabled { 9820 color: #535966; 9821 -webkit-text-fill-color: #535966; 9822 cursor: not-allowed; 9823 background: #202128; 9824 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } 9825 .euiTextArea:disabled::-webkit-input-placeholder { 9826 color: #535966; 9827 opacity: 1; } 9828 .euiTextArea:disabled::-moz-placeholder { 9829 color: #535966; 9830 opacity: 1; } 9831 .euiTextArea:disabled::placeholder { 9832 color: #535966; 9833 opacity: 1; } 9834 .euiTextArea[readOnly] { 9835 cursor: default; 9836 background: rgba(0, 0, 0, 0.05); 9837 border-color: transparent; 9838 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } 9839 .euiTextArea:-webkit-autofill { 9840 -webkit-text-fill-color: #343741; } 9841 .euiTextArea:-webkit-autofill ~ .euiFormControlLayoutIcons { 9842 color: #343741; } 9843 .euiTextArea--compressed { 9844 background-color: #16171c; 9845 background-repeat: no-repeat; 9846 background-size: 0% 100%; 9847 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); 9848 transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in; 9849 padding: 8px; 9850 border-radius: 2px; } 9851 @supports (-moz-appearance: none) { 9852 .euiTextArea--compressed { 9853 transition-property: box-shadow, background-image, background-size; } } 9854 .euiTextArea--compressed:invalid { 9855 background-image: linear-gradient(to top, #F66, #F66 2px, transparent 2px, transparent 100%); 9856 background-size: 100%; } 9857 .euiTextArea--compressed:focus { 9858 background-color: #111216; 9859 background-image: linear-gradient(to top, #1BA9F5, #1BA9F5 2px, transparent 2px, transparent 100%); 9860 background-size: 100% 100%; 9861 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } 9862 .euiTextArea--compressed:disabled { 9863 color: #535966; 9864 -webkit-text-fill-color: #535966; 9865 cursor: not-allowed; 9866 background: #202128; 9867 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } 9868 .euiTextArea--compressed:disabled::-webkit-input-placeholder { 9869 color: #535966; 9870 opacity: 1; } 9871 .euiTextArea--compressed:disabled::-moz-placeholder { 9872 color: #535966; 9873 opacity: 1; } 9874 .euiTextArea--compressed:disabled::placeholder { 9875 color: #535966; 9876 opacity: 1; } 9877 .euiTextArea--compressed[readOnly] { 9878 cursor: default; 9879 background: rgba(0, 0, 0, 0.05); 9880 border-color: transparent; 9881 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } 9882 .euiTextArea--inGroup { 9883 box-shadow: none !important; 9884 border-radius: 0; } 9885 .euiTextArea, .euiTextArea--compressed { 9886 height: auto; } 9887 9888.euiTextArea--resizeVertical { 9889 resize: vertical; } 9890 9891.euiTextArea--resizeHorizontal { 9892 resize: horizontal; } 9893 9894.euiTextArea--resizeBoth { 9895 resize: both; } 9896 9897.euiTextArea--resizeNone { 9898 resize: none; } 9899 9900.euiHeader { 9901 box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3), 0 1px 5px -2px rgba(0, 0, 0, 0.3); 9902 height: 49px; 9903 position: relative; 9904 z-index: 999; 9905 display: -webkit-flex; 9906 display: flex; 9907 -webkit-justify-content: space-between; 9908 justify-content: space-between; 9909 background: #1D1E24; 9910 border-bottom: 1px solid #343741; } 9911 .euiHeader--fixed { 9912 z-index: 1000; 9913 position: fixed; 9914 top: 0; 9915 left: 0; 9916 right: 0; } 9917 9918.euiHeader--fixed + .euiHeader--fixed { 9919 top: 49px; } 9920 9921.euiHeader--dark { 9922 background-color: #131317; 9923 border-bottom-color: #343741; } 9924 .euiHeader--dark .euiHeaderLogo__text, 9925 .euiHeader--dark .euiHeaderLink, 9926 .euiHeader--dark .euiHeaderSectionItemButton { 9927 color: #FFF; } 9928 .euiHeader--dark .euiHeaderLink-isActive { 9929 color: #1BA9F5; } 9930 .euiHeader--dark .euiHeaderSectionItem:after { 9931 background: #25262E; } 9932 .euiHeader--dark .euiHeaderLogo:focus, 9933 .euiHeader--dark .euiHeaderLink:focus, 9934 .euiHeader--dark .euiHeaderSectionItemButton:focus { 9935 background: #0e557b; } 9936 .euiHeader--dark .euiHeaderSectionItemButton__notification--badge { 9937 box-shadow: 0 0 0 1px #131317; } 9938 .euiHeader--dark .euiHeaderSectionItemButton__notification--dot { 9939 stroke: #131317; } 9940 9941.euiHeaderProfile { 9942 padding: 16px; } 9943 9944.euiHeaderLinks { 9945 display: -webkit-flex; 9946 display: flex; } 9947 9948.euiHeaderLinks__list { 9949 white-space: nowrap; 9950 display: -webkit-flex; 9951 display: flex; 9952 -webkit-align-items: center; 9953 align-items: center; } 9954 9955.euiHeaderLinks__list--gutterXS > * { 9956 margin: 0 4px; } 9957 9958.euiHeaderLinks__list--gutterS > * { 9959 margin: 0 8px; } 9960 9961.euiHeaderLinks__list--gutterM > * { 9962 margin: 0 12px; } 9963 9964.euiHeaderLinks__list--gutterL > * { 9965 margin: 0 24px; } 9966 9967.euiHeaderLinks__mobileList .euiHeaderLink { 9968 display: block; 9969 width: 100%; 9970 padding: 8px; } 9971 .euiHeaderLinks__mobileList .euiHeaderLink > span { 9972 -webkit-justify-content: flex-start; 9973 justify-content: flex-start; } 9974 9975.euiHeaderLogo { 9976 text-align: left; 9977 position: relative; 9978 height: 48px; 9979 line-height: 48px; 9980 min-width: 49px; 9981 padding: 0 13px 0 12px; 9982 display: -webkit-inline-flex; 9983 display: inline-flex; 9984 -webkit-align-items: center; 9985 align-items: center; 9986 vertical-align: middle; 9987 white-space: nowrap; } 9988 .euiHeaderLogo:hover { 9989 text-decoration: underline; } 9990 .euiHeaderLogo:focus { 9991 text-decoration: underline; } 9992 .euiHeaderLogo:focus, .euiHeaderLogo:hover { 9993 text-decoration: none; } 9994 9995.euiHeaderLogo__text { 9996 overflow-wrap: break-word !important; 9997 word-wrap: break-word !important; 9998 word-break: break-word; 9999 color: #DFE5EF; 10000 font-size: 20px; 10001 font-size: 1.25rem; 10002 line-height: 2rem; 10003 font-weight: 500; 10004 letter-spacing: -0.025em; 10005 padding-left: 16px; 10006 font-weight: 300; } 10007 10008@media only screen and (max-width: 574px) { 10009 .euiHeaderLogo { 10010 padding: 0 12px; } 10011 .euiHeaderLogo__icon.euiIcon--xLarge { 10012 width: 24px; 10013 height: 24px; } 10014 .euiHeaderLogo__text { 10015 overflow-wrap: break-word !important; 10016 word-wrap: break-word !important; 10017 word-break: break-word; 10018 color: #DFE5EF; 10019 font-size: 16px; 10020 font-size: 1rem; 10021 line-height: 1.5rem; 10022 font-weight: 600; 10023 letter-spacing: -0.02em; 10024 font-weight: 400; } } 10025 10026.euiHeaderAlert { 10027 min-width: 300px; 10028 position: relative; 10029 margin-bottom: 24px; 10030 padding: 0 8px 24px; 10031 border-bottom: 1px solid #343741; 10032 border-top: none; } 10033 .euiHeaderAlert .euiHeaderAlert__dismiss { 10034 opacity: 0; 10035 position: absolute; 10036 right: 12px; 10037 top: 12px; 10038 transition: opacity 250ms ease-in; } 10039 .euiHeaderAlert:hover .euiHeaderAlert__dismiss, 10040 .euiHeaderAlert .euiHeaderAlert__dismiss:focus { 10041 opacity: 1; } 10042 .euiHeaderAlert .euiHeaderAlert__title { 10043 overflow-wrap: break-word !important; 10044 word-wrap: break-word !important; 10045 word-break: break-word; 10046 color: #DFE5EF; 10047 font-size: 16px; 10048 font-size: 1rem; 10049 line-height: 1.5rem; 10050 font-weight: 600; 10051 letter-spacing: -0.02em; 10052 margin-bottom: 8px; } 10053 .euiHeaderAlert .euiHeaderAlert__text { 10054 font-size: 14px; 10055 font-size: 0.875rem; 10056 line-height: 1.5; 10057 margin-bottom: 16px; } 10058 .euiHeaderAlert .euiHeaderAlert__action { 10059 font-size: 14px; 10060 font-size: 0.875rem; 10061 line-height: 1.5; } 10062 .euiHeaderAlert .euiHeaderAlert__date { 10063 font-size: 12px; 10064 font-size: 0.75rem; 10065 line-height: 1.5; 10066 color: #98A2B3; } 10067 10068.euiHeaderBreadcrumbs { 10069 max-width: 100%; 10070 overflow: hidden !important; 10071 text-overflow: ellipsis !important; 10072 white-space: nowrap !important; 10073 word-wrap: normal !important; 10074 margin-left: 12px; 10075 margin-right: 12px; 10076 display: -webkit-flex; 10077 display: flex; 10078 -webkit-align-items: center; 10079 align-items: center; 10080 -webkit-flex-grow: 1; 10081 flex-grow: 1; } 10082 10083.euiHeaderSection { 10084 display: -webkit-flex; 10085 display: flex; 10086 -webkit-flex-grow: 0; 10087 flex-grow: 0; 10088 -webkit-flex-shrink: 0; 10089 flex-shrink: 0; } 10090 10091.euiHeaderSection--grow, 10092.euiHeaderSection--left { 10093 -webkit-flex-grow: 1; 10094 flex-grow: 1; } 10095 10096.euiHeaderSection--dontGrow { 10097 -webkit-flex-grow: 0; 10098 flex-grow: 0; } 10099 10100.euiHeaderSectionItem { 10101 position: relative; 10102 display: -webkit-flex; 10103 display: flex; 10104 -webkit-align-items: center; 10105 align-items: center; } 10106 .euiHeaderSectionItem:after { 10107 position: absolute; 10108 content: ''; 10109 top: 16px; 10110 bottom: 0; 10111 background: #343741; 10112 left: 0; } 10113 10114.euiHeaderSectionItem--borderLeft:after { 10115 left: 0; 10116 width: 1px; } 10117 10118.euiHeaderSectionItem--borderRight:after { 10119 width: 1px; 10120 left: auto; 10121 right: 0; } 10122 10123@media only screen and (max-width: 574px) { 10124 .euiHeaderSectionItem { 10125 min-width: 36px; } 10126 .euiHeaderSectionItem--borderLeft:after, 10127 .euiHeaderSectionItem--borderRight:after { 10128 display: none; } } 10129 10130.euiHeaderSectionItemButton { 10131 position: relative; 10132 height: 48px; 10133 min-width: 48px; 10134 text-align: center; 10135 font-size: 0; } 10136 10137.euiHeaderSectionItemButton__notification { 10138 position: absolute; } 10139 .euiHeaderSectionItemButton__notification--dot { 10140 top: 0; 10141 right: 0; 10142 stroke: #1D1E24; } 10143 .euiHeaderSectionItemButton__notification--badge { 10144 top: 9%; 10145 right: 9%; 10146 box-shadow: 0 0 0 1px #1D1E24; } 10147 10148.euiHeaderSectionItemButton__content { 10149 display: inline-block; } 10150 10151@media only screen and (max-width: 574px) { 10152 .euiHeaderSectionItemButton { 10153 min-width: 36px; } 10154 .euiHeaderSectionItemButton__notification.euiHeaderSectionItemButton__notification--dot { 10155 width: 16px; 10156 height: 16px; 10157 top: 9%; } } 10158 10159.euiHealth { 10160 display: inline-block; } 10161 10162.euiHealth--textSizeXS { 10163 font-size: 12px; 10164 font-size: 0.75rem; 10165 line-height: 1.5; } 10166 10167.euiHealth--textSizeS { 10168 font-size: 14px; 10169 font-size: 0.875rem; 10170 line-height: 1.5; } 10171 10172.euiHealth--textSizeM { 10173 font-size: 18px; 10174 font-size: 1.125rem; 10175 line-height: 1.5; } 10176 10177.euiHealth--textSizeInherit { 10178 font-size: inherit; } 10179 10180.euiHorizontalRule { 10181 border: none; 10182 height: 1px; 10183 background-color: #343741; 10184 -webkit-flex-shrink: 0; 10185 flex-shrink: 0; 10186 -webkit-flex-grow: 0; 10187 flex-grow: 0; } 10188 .euiHorizontalRule.euiHorizontalRule--full { 10189 width: 100%; } 10190 .euiHorizontalRule.euiHorizontalRule--half { 10191 width: 50%; 10192 margin-left: auto; 10193 margin-right: auto; } 10194 .euiHorizontalRule.euiHorizontalRule--quarter { 10195 width: 25%; 10196 margin-left: auto; 10197 margin-right: auto; } 10198 10199.euiHorizontalRule--marginXSmall { 10200 margin: 8px 0; } 10201 10202.euiHorizontalRule--marginSmall { 10203 margin: 12px 0; } 10204 10205.euiHorizontalRule--marginMedium { 10206 margin: 16px 0; } 10207 10208.euiHorizontalRule--marginLarge { 10209 margin: 24px 0; } 10210 10211.euiHorizontalRule--marginXLarge { 10212 margin: 32px 0; } 10213 10214.euiHorizontalRule--marginXXLarge { 10215 margin: 40px 0; } 10216 10217.euiIcon { 10218 -webkit-flex-shrink: 0; 10219 flex-shrink: 0; 10220 display: inline-block; 10221 vertical-align: middle; 10222 fill: currentColor; 10223 -webkit-transform: translate(0, 0); 10224 transform: translate(0, 0); } 10225 .euiIcon:focus { 10226 opacity: 1; 10227 background: #052231; } 10228 10229.euiIcon--app { 10230 fill: #DFE5EF; } 10231 .euiIcon--app .euiIcon__fillSecondary { 10232 fill: #7DE2D1; } 10233 10234.euiIcon-isLoading { 10235 opacity: 0.05; 10236 background-color: currentColor; 10237 border-radius: 4px; } 10238 10239.euiIcon-isLoaded { 10240 -webkit-animation: euiIconLoading 250ms ease-in 0s 1 forwards; 10241 animation: euiIconLoading 250ms ease-in 0s 1 forwards; } 10242 10243.euiIcon--accent { 10244 color: #F990C0; } 10245 10246.euiIcon--danger { 10247 color: #F66; } 10248 10249.euiIcon--ghost { 10250 color: #FFF; } 10251 10252.euiIcon--primary { 10253 color: #1BA9F5; } 10254 10255.euiIcon--secondary { 10256 color: #7DE2D1; } 10257 10258.euiIcon--success { 10259 color: #7DE2D1; } 10260 10261.euiIcon--subdued { 10262 color: #7a7f89; } 10263 10264.euiIcon--text { 10265 color: #DFE5EF; } 10266 10267.euiIcon--warning { 10268 color: #FFCE7A; } 10269 10270.euiIcon--inherit { 10271 color: inherit; } 10272 10273.euiIcon--ghost:not([data-type='logoElastic']) *[fill], 10274.euiIcon--ghost:not([data-type='logoElastic']) .euiIcon__fillNegative, 10275.euiIcon--text:not([data-type='logoElastic']) *[fill], 10276.euiIcon--text:not([data-type='logoElastic']) .euiIcon__fillNegative { 10277 fill: currentColor !important; } 10278 10279.euiIcon--ghost[data-type='logoElastic'] *[fill], 10280.euiIcon--text[data-type='logoElastic'] *[fill] { 10281 fill: none !important; } 10282 10283.euiIcon--ghost[data-type='logoElastic'] .outline, 10284.euiIcon--text[data-type='logoElastic'] .outline { 10285 fill: currentColor !important; } 10286 10287.euiIcon__fillNegative { 10288 fill: #D4DAE5; } 10289 10290.euiIcon--small { 10291 width: 12px; 10292 height: 12px; } 10293 10294.euiIcon--medium { 10295 width: 16px; 10296 height: 16px; } 10297 10298.euiIcon--large { 10299 width: 24px; 10300 height: 24px; } 10301 10302.euiIcon--xLarge { 10303 width: 32px; 10304 height: 32px; } 10305 10306.euiIcon--xxLarge { 10307 width: 40px; 10308 height: 40px; } 10309 10310@-webkit-keyframes euiIconLoading { 10311 0% { 10312 opacity: 0.05; } 10313 100% { 10314 opacity: 1; } } 10315 10316@keyframes euiIconLoading { 10317 0% { 10318 opacity: 0.05; } 10319 100% { 10320 opacity: 1; } } 10321 10322/** 10323 * 1. Fix for IE where the image correctly resizes in width but doesn't collapse its height 10324 (https://github.com/philipwalton/flexbugs/issues/75#issuecomment-134702421) 10325 */ 10326.euiImage { 10327 display: inline-block; 10328 max-width: 100%; 10329 position: relative; 10330 min-height: 1px; 10331 /* 1 */ 10332 line-height: 0; 10333 -webkit-flex-shrink: 0; 10334 flex-shrink: 0; } 10335 .euiImage .euiImage__img { 10336 margin-bottom: 0; } 10337 .euiImage.euiImage--hasShadow .euiImage__img { 10338 box-shadow: 0 6px 12px -1px rgba(0, 0, 0, 0.2), 0 4px 4px -1px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2); } 10339 .euiImage .euiImage__button { 10340 position: relative; 10341 cursor: pointer; 10342 transition: all 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); } 10343 .euiImage .euiImage__button:focus { 10344 outline: 2px solid rgba(27, 169, 245, 0.3); } 10345 .euiImage .euiImage__button:hover .euiImage__icon { 10346 visibility: visible; 10347 fill-opacity: 1; } 10348 .euiImage .euiImage__button--fullWidth { 10349 width: 100%; } 10350 .euiImage.euiImage--allowFullScreen:hover .euiImage__caption { 10351 text-decoration: underline; } 10352 .euiImage.euiImage--allowFullScreen:not(.euiImage--hasShadow) .euiImage__button:hover, 10353 .euiImage.euiImage--allowFullScreen:not(.euiImage--hasShadow) .euiImage__button:focus { 10354 box-shadow: 0 6px 12px -1px rgba(0, 0, 0, 0.2), 0 4px 4px -1px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2); } 10355 .euiImage.euiImage--allowFullScreen.euiImage--hasShadow .euiImage__button:hover, 10356 .euiImage.euiImage--allowFullScreen.euiImage--hasShadow .euiImage__button:focus { 10357 box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.1), 0 6px 12px 0 rgba(0, 0, 0, 0.1), 0 4px 4px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.1); } 10358 .euiImage.euiImage--small .euiImage__img { 10359 width: 7.5rem; } 10360 .euiImage.euiImage--medium .euiImage__img { 10361 width: 12.5rem; } 10362 .euiImage.euiImage--large .euiImage__img { 10363 width: 22.5rem; } 10364 .euiImage.euiImage--xlarge .euiImage__img { 10365 width: 37.5rem; } 10366 .euiImage.euiImage--fullWidth { 10367 width: 100%; } 10368 .euiImage.euiImage--original .euiImage__img { 10369 width: auto; 10370 max-width: 100%; } 10371 .euiImage.euiImage--floatLeft { 10372 float: left; } 10373 .euiImage.euiImage--floatLeft[class*='euiImage--margin'] { 10374 margin-left: 0; 10375 margin-top: 0; } 10376 .euiImage.euiImage--floatRight { 10377 float: right; } 10378 .euiImage.euiImage--floatRight[class*='euiImage--margin'] { 10379 margin-right: 0; 10380 margin-top: 0; } 10381 .euiImage.euiImage--marginSmall { 10382 margin: 8px; } 10383 .euiImage.euiImage--marginMedium { 10384 margin: 16px; } 10385 .euiImage.euiImage--marginLarge { 10386 margin: 24px; } 10387 .euiImage.euiImage--marginXlarge { 10388 margin: 32px; } 10389 10390.euiImage__img { 10391 width: 100%; 10392 vertical-align: middle; } 10393 10394.euiImage__caption { 10395 font-size: 14px; 10396 font-size: 0.875rem; 10397 line-height: 1.5; 10398 margin-top: 4px; 10399 text-align: center; } 10400 10401.euiImage__icon { 10402 visibility: hidden; 10403 fill-opacity: 0; 10404 position: absolute; 10405 right: 16px; 10406 top: 16px; 10407 transition: fill-opacity 350ms cubic-bezier(0.694, 0.0482, 0.335, 1); 10408 cursor: pointer; } 10409 10410.euiImage-isFullScreen { 10411 position: relative; 10412 max-height: 80vh; 10413 max-width: 80vw; 10414 -webkit-animation: euiImageFullScreen 500ms cubic-bezier(0.34, 1.61, 0.7, 1); 10415 animation: euiImageFullScreen 500ms cubic-bezier(0.34, 1.61, 0.7, 1); } 10416 .euiImage-isFullScreen:hover .euiImage__button { 10417 box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.1), 0 6px 12px 0 rgba(0, 0, 0, 0.1), 0 4px 4px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.1); } 10418 .euiImage-isFullScreen:hover .euiImage__caption { 10419 text-decoration: underline; } 10420 .euiImage-isFullScreen__img { 10421 max-height: 80vh; 10422 max-width: 80vw; 10423 vertical-align: middle; 10424 cursor: pointer; 10425 transition: all 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); } 10426 10427.euiImage-isFullScreenCloseIcon { 10428 position: absolute; 10429 right: 16px; 10430 top: 16px; 10431 pointer-events: none; } 10432 10433@-webkit-keyframes euiImageFullScreen { 10434 0% { 10435 opacity: 0; 10436 -webkit-transform: translateY(64px); 10437 transform: translateY(64px); } 10438 100% { 10439 opacity: 1; 10440 -webkit-transform: translateY(0); 10441 transform: translateY(0); } } 10442 10443@keyframes euiImageFullScreen { 10444 0% { 10445 opacity: 0; 10446 -webkit-transform: translateY(64px); 10447 transform: translateY(64px); } 10448 100% { 10449 opacity: 1; 10450 -webkit-transform: translateY(0); 10451 transform: translateY(0); } } 10452 10453@media only screen and (max-width: 574px) { 10454 .euiImage.euiImage--floatLeft, .euiImage.euiImage--floatRight { 10455 float: none; } 10456 .euiImage.euiImage--floatLeft[class*='euiImage--margin'], .euiImage.euiImage--floatRight[class*='euiImage--margin'] { 10457 margin-top: inherit; 10458 margin-right: inherit; 10459 margin-bottom: inherit; 10460 margin-left: inherit; } } 10461 10462@media only screen and (min-width: 575px) and (max-width: 767px) { 10463 .euiImage.euiImage--floatLeft, .euiImage.euiImage--floatRight { 10464 float: none; } 10465 .euiImage.euiImage--floatLeft[class*='euiImage--margin'], .euiImage.euiImage--floatRight[class*='euiImage--margin'] { 10466 margin-top: inherit; 10467 margin-right: inherit; 10468 margin-bottom: inherit; 10469 margin-left: inherit; } } 10470 10471@media only screen and (min-width: 768px) and (max-width: 991px) { 10472 .euiImage.euiImage--floatLeft, .euiImage.euiImage--floatRight { 10473 float: none; } 10474 .euiImage.euiImage--floatLeft[class*='euiImage--margin'], .euiImage.euiImage--floatRight[class*='euiImage--margin'] { 10475 margin-top: inherit; 10476 margin-right: inherit; 10477 margin-bottom: inherit; 10478 margin-left: inherit; } } 10479 10480/** 10481 * 1. Default to grid of 3 10482 */ 10483.euiKeyPadMenu { 10484 display: -webkit-flex; 10485 display: flex; 10486 -webkit-flex-direction: row; 10487 flex-direction: row; 10488 -webkit-flex-wrap: wrap; 10489 flex-wrap: wrap; 10490 width: 300px; 10491 max-width: 100%; 10492 margin-bottom: -4px; 10493 margin-right: -4px; } 10494 .euiKeyPadMenu legend { 10495 margin-bottom: 8px; } 10496 .euiKeyPadMenu > *:not(legend) { 10497 margin-bottom: 4px; 10498 margin-right: 4px; } 10499 10500/** 10501 * 1. If this class is applied to a button, we need to override the Chrome default font. 10502 * 2. If it has a BetaBadge, make sure only the first letter shows 10503 */ 10504.euiKeyPadMenuItem { 10505 font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 10506 font-weight: 400; 10507 letter-spacing: -.005em; 10508 -webkit-text-size-adjust: 100%; 10509 -ms-text-size-adjust: 100%; 10510 -webkit-font-kerning: normal; 10511 font-kerning: normal; 10512 /* 1 */ 10513 display: block; 10514 padding: 4px; 10515 height: 96px; 10516 width: 96px; 10517 border: 1px solid #343741; 10518 border-color: transparent; 10519 border-radius: 4px; 10520 color: #DFE5EF; } 10521 @media screen and (prefers-reduced-motion: no-preference) { 10522 .euiKeyPadMenuItem { 10523 transition: background-color 150ms ease-in, border-color 150ms ease-in, box-shadow 150ms ease-in; } } 10524 .euiKeyPadMenuItem:not(.euiKeyPadMenuItem-isDisabled):hover, .euiKeyPadMenuItem:not(.euiKeyPadMenuItem-isDisabled):focus, .euiKeyPadMenuItem:not(.euiKeyPadMenuItem-isDisabled):focus-within { 10525 cursor: pointer; 10526 text-decoration: underline; 10527 box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3); 10528 border-color: #343741; } 10529 @media screen and (prefers-reduced-motion: no-preference) { 10530 .euiKeyPadMenuItem:not(.euiKeyPadMenuItem-isDisabled):hover .euiKeyPadMenuItem__icon, .euiKeyPadMenuItem:not(.euiKeyPadMenuItem-isDisabled):focus .euiKeyPadMenuItem__icon, .euiKeyPadMenuItem:not(.euiKeyPadMenuItem-isDisabled):focus-within .euiKeyPadMenuItem__icon { 10531 -webkit-transform: translateY(0); 10532 transform: translateY(0); } } 10533 .euiKeyPadMenuItem:not(.euiKeyPadMenuItem-isDisabled):focus { 10534 cursor: pointer; 10535 text-decoration: underline; 10536 background-color: #052231; } 10537 .euiKeyPadMenuItem.euiKeyPadMenuItem-isDisabled { 10538 cursor: not-allowed; 10539 text-decoration: none; 10540 color: #4c4e51; } 10541 .euiKeyPadMenuItem.euiKeyPadMenuItem-isDisabled .euiKeyPadMenuItem__icon { 10542 -webkit-filter: grayscale(100%); 10543 filter: grayscale(100%); } 10544 .euiKeyPadMenuItem.euiKeyPadMenuItem-isDisabled .euiKeyPadMenuItem__icon svg * { 10545 fill: #4c4e51; } 10546 .euiKeyPadMenuItem.euiKeyPadMenuItem-isSelected:not(.euiKeyPadMenuItem-isDisabled) { 10547 box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3); 10548 color: #DFE5EF; } 10549 .euiKeyPadMenuItem.euiKeyPadMenuItem-isSelected { 10550 border-color: #343741; } 10551 .euiKeyPadMenuItem:not(:hover):not(:focus):not(:focus-within):not(.euiKeyPadMenuItem-isSelected) .euiKeyPadMenuItem__checkableInput, .euiKeyPadMenuItem.euiKeyPadMenuItem-isDisabled:not(.euiKeyPadMenuItem-isSelected) .euiKeyPadMenuItem__checkableInput { 10552 position: absolute; 10553 top: auto; 10554 left: -10000px; 10555 width: 1px; 10556 height: 1px; 10557 clip: rect(0 0 0 0); 10558 -webkit-clip-path: inset(50%); 10559 clip-path: inset(50%); 10560 overflow: hidden; 10561 margin: -1px; } 10562 10563.euiKeyPadMenuItem__inner { 10564 width: 100%; 10565 height: 100%; 10566 display: -webkit-flex; 10567 display: flex; 10568 -webkit-flex-direction: column; 10569 flex-direction: column; 10570 -webkit-align-items: center; 10571 align-items: center; 10572 -webkit-justify-content: center; 10573 justify-content: center; 10574 position: relative; } 10575 .euiKeyPadMenuItem__inner .euiKeyPadMenuItem__checkableInput { 10576 -webkit-transform: scale(0.75); 10577 transform: scale(0.75); 10578 -webkit-transform-origin: top right; 10579 transform-origin: top right; } 10580 .euiKeyPadMenuItem__inner .euiKeyPadMenuItem__checkableInput, 10581 .euiKeyPadMenuItem__inner .euiKeyPadMenuItem__betaBadge { 10582 position: absolute; 10583 top: 4px; 10584 right: 4px; 10585 z-index: 3; } 10586 10587.euiKeyPadMenuItem__icon { 10588 transition: -webkit-transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1); 10589 transition: transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1); 10590 transition: transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1), -webkit-transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1); 10591 margin-bottom: 12px; 10592 -webkit-transform: translateY(2px); 10593 transform: translateY(2px); } 10594 10595.euiKeyPadMenuItem__label { 10596 font-size: 12px; 10597 font-weight: 500; 10598 line-height: 16px; 10599 text-align: center; } 10600 10601.euiKeyPadMenuItem--checkable.euiKeyPadMenuItem-isSelected:not(.euiKeyPadMenuItem-isDisabled), .euiKeyPadMenuItem--checkable.euiKeyPadMenuItem-isSelected:not(.euiKeyPadMenuItem-isDisabled):hover, .euiKeyPadMenuItem--checkable.euiKeyPadMenuItem-isSelected:not(.euiKeyPadMenuItem-isDisabled):focus, .euiKeyPadMenuItem--checkable.euiKeyPadMenuItem-isSelected:not(.euiKeyPadMenuItem-isDisabled):focus-within { 10602 background-color: #052231; 10603 color: #1BA9F5; 10604 border-color: #1BA9F5; } 10605 10606.euiLink { 10607 text-align: left; } 10608 .euiLink:hover { 10609 text-decoration: underline; } 10610 .euiLink:focus { 10611 text-decoration: underline; } 10612 .euiLink[target='_blank'] { 10613 position: relative; } 10614 .euiLink[target='_blank'] .euiScreenReaderOnly { 10615 left: 0; } 10616 .euiLink .euiLink__externalIcon { 10617 margin-left: 4px; } 10618 .euiLink.euiLink-disabled { 10619 font-weight: inherit; 10620 text-decoration: none; 10621 cursor: default; } 10622 .euiLink.euiLink--subdued { 10623 color: #7a7f89; } 10624 .euiLink.euiLink--subdued:hover, .euiLink.euiLink--subdued:focus, .euiLink.euiLink--subdued:target { 10625 text-decoration: underline; } 10626 .euiLink.euiLink--subdued:target { 10627 color: #62666e; } 10628 .euiLink.euiLink--subdued:focus { 10629 -webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important; 10630 animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important; } 10631 .euiLink.euiLink--primary { 10632 color: #1BA9F5; } 10633 .euiLink.euiLink--primary:hover, .euiLink.euiLink--primary:focus, .euiLink.euiLink--primary:target { 10634 text-decoration: underline; } 10635 .euiLink.euiLink--primary:target { 10636 color: #098dd4; } 10637 .euiLink.euiLink--primary:focus { 10638 -webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important; 10639 animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important; } 10640 .euiLink.euiLink--secondary { 10641 color: #7DE2D1; } 10642 .euiLink.euiLink--secondary:hover, .euiLink.euiLink--secondary:focus, .euiLink.euiLink--secondary:target { 10643 text-decoration: underline; } 10644 .euiLink.euiLink--secondary:target { 10645 color: #53d9c2; } 10646 .euiLink.euiLink--secondary:focus { 10647 -webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important; 10648 animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important; } 10649 .euiLink.euiLink--success { 10650 color: #7DE2D1; } 10651 .euiLink.euiLink--success:hover, .euiLink.euiLink--success:focus, .euiLink.euiLink--success:target { 10652 text-decoration: underline; } 10653 .euiLink.euiLink--success:target { 10654 color: #53d9c2; } 10655 .euiLink.euiLink--success:focus { 10656 -webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important; 10657 animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important; } 10658 .euiLink.euiLink--accent { 10659 color: #F990C0; } 10660 .euiLink.euiLink--accent:hover, .euiLink.euiLink--accent:focus, .euiLink.euiLink--accent:target { 10661 text-decoration: underline; } 10662 .euiLink.euiLink--accent:target { 10663 color: #f660a5; } 10664 .euiLink.euiLink--accent:focus { 10665 -webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important; 10666 animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important; } 10667 .euiLink.euiLink--warning { 10668 color: #FFCE7A; } 10669 .euiLink.euiLink--warning:hover, .euiLink.euiLink--warning:focus, .euiLink.euiLink--warning:target { 10670 text-decoration: underline; } 10671 .euiLink.euiLink--warning:target { 10672 color: #ffbb47; } 10673 .euiLink.euiLink--warning:focus { 10674 -webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important; 10675 animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important; } 10676 .euiLink.euiLink--danger { 10677 color: #F66; } 10678 .euiLink.euiLink--danger:hover, .euiLink.euiLink--danger:focus, .euiLink.euiLink--danger:target { 10679 text-decoration: underline; } 10680 .euiLink.euiLink--danger:target { 10681 color: #ff3333; } 10682 .euiLink.euiLink--danger:focus { 10683 -webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important; 10684 animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important; } 10685 .euiLink.euiLink--text { 10686 color: #DFE5EF; } 10687 .euiLink.euiLink--text:hover, .euiLink.euiLink--text:focus, .euiLink.euiLink--text:target { 10688 text-decoration: underline; } 10689 .euiLink.euiLink--text:target { 10690 color: #bdc9de; } 10691 .euiLink.euiLink--text:focus { 10692 -webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important; 10693 animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important; } 10694 .euiLink.euiLink--ghost { 10695 color: #FFF; } 10696 .euiLink.euiLink--ghost:hover, .euiLink.euiLink--ghost:focus, .euiLink.euiLink--ghost:target { 10697 text-decoration: underline; } 10698 .euiLink.euiLink--ghost:target { 10699 color: #e6e6e6; } 10700 .euiLink.euiLink--ghost:focus { 10701 -webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important; 10702 animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important; } 10703 10704button.euiLink { 10705 -webkit-user-select: text; 10706 -moz-user-select: text; 10707 user-select: text; } 10708 10709/** 10710 * The List Group component provides neatly styled lists containing plain text 10711 * or links. The outer container can be bordered, with padding, or borderless 10712 * with links flush to the sides. 10713 */ 10714.euiListGroup.euiListGroup-flush { 10715 padding: 0; 10716 border: none; } 10717 10718.euiListGroup.euiListGroup-bordered { 10719 border-radius: 4px; 10720 border: 1px solid #343741; } 10721 10722.euiListGroup-maxWidthDefault { 10723 max-width: 400px; } 10724 10725.euiListGroup--gutterSmall { 10726 padding: 8px; } 10727 .euiListGroup--gutterSmall .euiListGroupItem:not(:first-of-type) { 10728 margin-top: 8px; } 10729 10730.euiListGroup--gutterMedium { 10731 padding: 16px; } 10732 .euiListGroup--gutterMedium .euiListGroupItem:not(:first-of-type) { 10733 margin-top: 16px; } 10734 10735.euiListGroupItem { 10736 padding: 0; 10737 border-radius: 4px; 10738 display: -webkit-flex; 10739 display: flex; 10740 -webkit-align-items: center; 10741 align-items: center; 10742 transition: background-color 150ms; 10743 position: relative; } 10744 .euiListGroupItem.euiListGroupItem-isActive, .euiListGroupItem.euiListGroupItem-isClickable:hover { 10745 background-color: rgba(52, 55, 65, 0.25); } 10746 .euiListGroupItem.euiListGroupItem-isClickable:focus-within { 10747 background-color: rgba(52, 55, 65, 0.25); } 10748 .euiListGroupItem.euiListGroupItem--ghost.euiListGroupItem-isClickable:hover { 10749 background-color: rgba(255, 255, 255, 0.1); } 10750 .euiListGroupItem.euiListGroupItem--ghost.euiListGroupItem-isClickable:focus-within { 10751 background-color: rgba(255, 255, 255, 0.1); } 10752 .euiListGroupItem.euiListGroupItem-isClickable:hover .euiListGroupItem__button, 10753 .euiListGroupItem .euiListGroupItem__button:hover, 10754 .euiListGroupItem .euiListGroupItem__button:focus { 10755 text-decoration: underline; } 10756 .euiListGroupItem.euiListGroupItem-isDisabled, .euiListGroupItem.euiListGroupItem-isDisabled:hover, .euiListGroupItem.euiListGroupItem-isDisabled:focus, 10757 .euiListGroupItem.euiListGroupItem-isDisabled .euiListGroupItem__button:hover, 10758 .euiListGroupItem.euiListGroupItem-isDisabled .euiListGroupItem__button:focus { 10759 color: #434548; 10760 cursor: not-allowed; 10761 background-color: transparent; 10762 text-decoration: none; } 10763 10764@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { 10765 .euiListGroupItem__button:hover, 10766 .euiListGroupItem__button:focus { 10767 background-color: rgba(52, 55, 65, 0.25); 10768 border-radius: 4px; } 10769 .euiListGroupItem__button:hover .euiListGroupItem--ghost .euiListGroupItem__button:hover, 10770 .euiListGroupItem__button:hover .euiListGroupItem--ghost .euiListGroupItem__button:focus, 10771 .euiListGroupItem__button:focus .euiListGroupItem--ghost .euiListGroupItem__button:hover, 10772 .euiListGroupItem__button:focus .euiListGroupItem--ghost .euiListGroupItem__button:focus { 10773 background-color: rgba(255, 255, 255, 0.1); } } 10774 10775.euiListGroupItem__text, 10776.euiListGroupItem__button { 10777 line-height: 24px; 10778 padding: 4px 8px; 10779 display: -webkit-flex; 10780 display: flex; 10781 -webkit-align-items: center; 10782 align-items: center; 10783 -webkit-flex: 1 0 auto; 10784 flex: 1 0 auto; 10785 text-align: left; 10786 max-width: 100%; 10787 font-weight: inherit; } 10788 .euiListGroupItem-hasExtraAction .euiListGroupItem__text, .euiListGroupItem-hasExtraAction 10789 .euiListGroupItem__button { 10790 max-width: calc(100% - 32px); } 10791 .euiListGroupItem--primary .euiListGroupItem__text:not(:disabled), .euiListGroupItem--primary 10792 .euiListGroupItem__button:not(:disabled) { 10793 color: #1BA9F5; } 10794 .euiListGroupItem--text .euiListGroupItem__text:not(:disabled), .euiListGroupItem--text 10795 .euiListGroupItem__button:not(:disabled) { 10796 color: #DFE5EF; } 10797 .euiListGroupItem--subdued .euiListGroupItem__text:not(:disabled), .euiListGroupItem--subdued 10798 .euiListGroupItem__button:not(:disabled) { 10799 color: #7a7f89; } 10800 .euiListGroupItem--ghost .euiListGroupItem__text:not(:disabled), .euiListGroupItem--ghost 10801 .euiListGroupItem__button:not(:disabled) { 10802 color: #FFF; } 10803 .euiListGroupItem-isActive:not(.euiListGroupItem--ghost) .euiListGroupItem__text, .euiListGroupItem-isActive:not(.euiListGroupItem--ghost) 10804 .euiListGroupItem__button { 10805 color: #DFE5EF; } 10806 10807.euiListGroupItem__label { 10808 white-space: nowrap; 10809 overflow: hidden; 10810 text-overflow: ellipsis; } 10811 10812.euiListGroupItem__extraAction { 10813 opacity: 0; 10814 margin-right: 8px; 10815 transition: opacity 150ms; } 10816 .euiListGroupItem:not(.euiListGroupItem-isDisabled):focus .euiListGroupItem__extraAction, 10817 .euiListGroupItem:not(.euiListGroupItem-isDisabled):hover .euiListGroupItem__extraAction, .euiListGroupItem__extraAction.euiListGroupItem__extraAction-alwaysShow, .euiListGroupItem__extraAction:focus { 10818 opacity: 1; } 10819 10820.euiListGroupItem__icon { 10821 margin-right: 12px; 10822 -webkit-flex-grow: 0; 10823 flex-grow: 0; 10824 -webkit-flex-shrink: 0; 10825 flex-shrink: 0; } 10826 10827.euiListGroupItem--xSmall { 10828 font-size: 12px; } 10829 10830.euiListGroupItem--small { 10831 font-size: 14px; } 10832 10833.euiListGroupItem--medium { 10834 font-size: 16px; } 10835 10836.euiListGroupItem--large { 10837 font-size: 20px; } 10838 10839.euiListGroupItem--xSmall, 10840.euiListGroupItem--small { 10841 font-weight: 500; 10842 letter-spacing: 0; } 10843 10844.euiListGroupItem--xSmall .euiListGroupItem__button, 10845.euiListGroupItem--xSmall .euiListGroupItem__text { 10846 line-height: 16px; } 10847 10848.euiListGroupItem--large .euiListGroupItem__button, 10849.euiListGroupItem--large .euiListGroupItem__text { 10850 line-height: 32px; } 10851 10852.euiListGroupItem--wrapText .euiListGroupItem__button, 10853.euiListGroupItem--wrapText .euiListGroupItem__text { 10854 width: 100%; 10855 word-break: break-word; } 10856 10857.euiListGroupItem--wrapText .euiListGroupItem__label { 10858 white-space: inherit; } 10859 10860.euiListGroup-flush .euiListGroupItem { 10861 border-radius: 0; } 10862 10863.euiListGroup-bordered .euiListGroupItem:first-child { 10864 border-top-left-radius: 4px; 10865 border-top-right-radius: 4px; } 10866 10867.euiListGroup-bordered .euiListGroupItem:last-child { 10868 border-bottom-left-radius: 4px; 10869 border-bottom-right-radius: 4px; } 10870 10871.euiListGroupItem__tooltip { 10872 width: 100%; } 10873 10874.euiPinnableListGroup__itemExtraAction svg { 10875 -webkit-transform: rotate(45deg); 10876 transform: rotate(45deg); } 10877 10878.euiPinnableListGroup__itemExtraAction-pinned:not(:hover):not(:focus) { 10879 color: #62656d; } 10880 10881.euiLoadingLogo, 10882.euiLoadingKibana { 10883 position: relative; 10884 display: inline-block; } 10885 @media screen and (prefers-reduced-motion: no-preference) { 10886 .euiLoadingLogo:before, .euiLoadingLogo:after, 10887 .euiLoadingKibana:before, 10888 .euiLoadingKibana:after { 10889 position: absolute; 10890 content: ''; 10891 width: 90%; 10892 left: 5%; 10893 border-radius: 50%; 10894 opacity: .2; 10895 z-index: 1; } 10896 .euiLoadingLogo:before, 10897 .euiLoadingKibana:before { 10898 box-shadow: 0 0 8px #FFF; 10899 -webkit-animation: 1s euiLoadingKibanaPulsateAndFade cubic-bezier(0.694, 0.0482, 0.335, 1) infinite; 10900 animation: 1s euiLoadingKibanaPulsateAndFade cubic-bezier(0.694, 0.0482, 0.335, 1) infinite; } 10901 .euiLoadingLogo:after, 10902 .euiLoadingKibana:after { 10903 background-color: #FFF; 10904 -webkit-animation: 1s euiLoadingKibanaPulsate cubic-bezier(0.694, 0.0482, 0.335, 1) infinite; 10905 animation: 1s euiLoadingKibanaPulsate cubic-bezier(0.694, 0.0482, 0.335, 1) infinite; } } 10906 .euiLoadingLogo .euiLoadingLogo__icon, 10907 .euiLoadingLogo .euiLoadingKibana__icon, 10908 .euiLoadingKibana .euiLoadingLogo__icon, 10909 .euiLoadingKibana .euiLoadingKibana__icon { 10910 display: block; } 10911 @media screen and (prefers-reduced-motion: no-preference) { 10912 .euiLoadingLogo .euiLoadingLogo__icon, 10913 .euiLoadingLogo .euiLoadingKibana__icon, 10914 .euiLoadingKibana .euiLoadingLogo__icon, 10915 .euiLoadingKibana .euiLoadingKibana__icon { 10916 -webkit-animation: 1s euiLoadingKibanaBounceMedium cubic-bezier(0.694, 0.0482, 0.335, 1) infinite; 10917 animation: 1s euiLoadingKibanaBounceMedium cubic-bezier(0.694, 0.0482, 0.335, 1) infinite; } } 10918 10919/** 10920 * 1. Requires pixel math for animation. 10921 */ 10922.euiLoadingLogo--medium, 10923.euiLoadingKibana--medium { 10924 width: 16px; } 10925 .euiLoadingLogo--medium:before, .euiLoadingLogo--medium:after, 10926 .euiLoadingKibana--medium:before, 10927 .euiLoadingKibana--medium:after { 10928 height: 3px; 10929 /* 1 */ 10930 bottom: -4px; } 10931 .euiLoadingLogo--medium .euiLoadingLogo__icon, 10932 .euiLoadingLogo--medium .euiLoadingKibana__icon, 10933 .euiLoadingKibana--medium .euiLoadingLogo__icon, 10934 .euiLoadingKibana--medium .euiLoadingKibana__icon { 10935 z-index: 999; 10936 -webkit-animation-name: euiLoadingKibanaBounceMedium; 10937 animation-name: euiLoadingKibanaBounceMedium; } 10938 10939.euiLoadingLogo--large, 10940.euiLoadingKibana--large { 10941 width: 24px; } 10942 .euiLoadingLogo--large:before, .euiLoadingLogo--large:after, 10943 .euiLoadingKibana--large:before, 10944 .euiLoadingKibana--large:after { 10945 height: 6px; 10946 /* 1 */ 10947 bottom: -8px; } 10948 .euiLoadingLogo--large .euiLoadingLogo__icon, 10949 .euiLoadingLogo--large .euiLoadingKibana__icon, 10950 .euiLoadingKibana--large .euiLoadingLogo__icon, 10951 .euiLoadingKibana--large .euiLoadingKibana__icon { 10952 -webkit-animation-name: euiLoadingKibanaBounceLarge; 10953 animation-name: euiLoadingKibanaBounceLarge; } 10954 10955.euiLoadingLogo--xLarge, 10956.euiLoadingKibana--xLarge { 10957 width: 32px; } 10958 .euiLoadingLogo--xLarge:before, .euiLoadingLogo--xLarge:after, 10959 .euiLoadingKibana--xLarge:before, 10960 .euiLoadingKibana--xLarge:after { 10961 height: 8px; 10962 bottom: -12px; } 10963 .euiLoadingLogo--xLarge .euiLoadingLogo__icon, 10964 .euiLoadingLogo--xLarge .euiLoadingKibana__icon, 10965 .euiLoadingKibana--xLarge .euiLoadingLogo__icon, 10966 .euiLoadingKibana--xLarge .euiLoadingKibana__icon { 10967 -webkit-animation-name: euiLoadingKibanaBounceXLarge; 10968 animation-name: euiLoadingKibanaBounceXLarge; } 10969 10970@-webkit-keyframes euiLoadingKibanaBounceMedium { 10971 50% { 10972 -webkit-transform: translateY(-8px); 10973 transform: translateY(-8px); } } 10974 10975@keyframes euiLoadingKibanaBounceMedium { 10976 50% { 10977 -webkit-transform: translateY(-8px); 10978 transform: translateY(-8px); } } 10979 10980@-webkit-keyframes euiLoadingKibanaBounceLarge { 10981 50% { 10982 -webkit-transform: translateY(-12px); 10983 transform: translateY(-12px); } } 10984 10985@keyframes euiLoadingKibanaBounceLarge { 10986 50% { 10987 -webkit-transform: translateY(-12px); 10988 transform: translateY(-12px); } } 10989 10990@-webkit-keyframes euiLoadingKibanaBounceXLarge { 10991 50% { 10992 -webkit-transform: translateY(-16px); 10993 transform: translateY(-16px); } } 10994 10995@keyframes euiLoadingKibanaBounceXLarge { 10996 50% { 10997 -webkit-transform: translateY(-16px); 10998 transform: translateY(-16px); } } 10999 11000@-webkit-keyframes euiLoadingKibanaPulsateAndFade { 11001 0% { 11002 opacity: 0; } 11003 50% { 11004 -webkit-transform: scale(0.5); 11005 transform: scale(0.5); 11006 opacity: .1; } 11007 100% { 11008 opacity: 0; } } 11009 11010@keyframes euiLoadingKibanaPulsateAndFade { 11011 0% { 11012 opacity: 0; } 11013 50% { 11014 -webkit-transform: scale(0.5); 11015 transform: scale(0.5); 11016 opacity: .1; } 11017 100% { 11018 opacity: 0; } } 11019 11020@-webkit-keyframes euiLoadingKibanaPulsate { 11021 0% { 11022 opacity: .15; } 11023 50% { 11024 -webkit-transform: scale(0.5); 11025 transform: scale(0.5); 11026 opacity: .05; } 11027 100% { 11028 opacity: .15; } } 11029 11030@keyframes euiLoadingKibanaPulsate { 11031 0% { 11032 opacity: .15; } 11033 50% { 11034 -webkit-transform: scale(0.5); 11035 transform: scale(0.5); 11036 opacity: .05; } 11037 100% { 11038 opacity: .15; } } 11039 11040.euiLoadingElastic { 11041 position: relative; 11042 display: inline-block; } 11043 11044.euiLoadingElastic--medium { 11045 width: 16px; } 11046 11047.euiLoadingElastic--large { 11048 width: 24px; } 11049 11050.euiLoadingElastic--xLarge { 11051 width: 32px; } 11052 11053.euiLoadingElastic--xxLarge { 11054 width: 40px; } 11055 11056.euiLoadingElastic path { 11057 -webkit-animation-fill-mode: forwards; 11058 animation-fill-mode: forwards; 11059 -webkit-animation-direction: alternate; 11060 animation-direction: alternate; 11061 -webkit-transform-style: preserve-3d; 11062 transform-style: preserve-3d; 11063 -webkit-animation-duration: 1s; 11064 animation-duration: 1s; 11065 -webkit-animation-timing-function: cubic-bezier(0, 0.63, 0.49, 1); 11066 animation-timing-function: cubic-bezier(0, 0.63, 0.49, 1); 11067 -webkit-animation-iteration-count: infinite; 11068 animation-iteration-count: infinite; 11069 -webkit-transform-origin: 50% 50%; 11070 transform-origin: 50% 50%; } 11071 @media screen and (prefers-reduced-motion: no-preference) { 11072 .euiLoadingElastic path { 11073 -webkit-animation-name: euiLoadingElastic; 11074 animation-name: euiLoadingElastic; } } 11075 11076.euiLoadingElastic path:nth-of-type(1) { 11077 -webkit-animation-delay: 0s; 11078 animation-delay: 0s; } 11079 11080.euiLoadingElastic path:nth-of-type(2) { 11081 -webkit-animation-delay: .035s; 11082 animation-delay: .035s; } 11083 11084.euiLoadingElastic path:nth-of-type(3) { 11085 -webkit-animation-delay: .125s; 11086 animation-delay: .125s; } 11087 11088.euiLoadingElastic path:nth-of-type(4) { 11089 -webkit-animation-delay: .155s; 11090 animation-delay: .155s; } 11091 11092.euiLoadingElastic path:nth-of-type(5) { 11093 -webkit-animation-delay: .075s; 11094 animation-delay: .075s; } 11095 11096.euiLoadingElastic path:nth-of-type(6) { 11097 -webkit-animation-delay: .06s; 11098 animation-delay: .06s; } 11099 11100@-webkit-keyframes euiLoadingElastic { 11101 0% { 11102 -webkit-transform: scale3d(0, 0, -0.7); 11103 transform: scale3d(0, 0, -0.7); 11104 opacity: 0; } 11105 40% { 11106 -webkit-transform: scale3d(1, 1, 2); 11107 transform: scale3d(1, 1, 2); 11108 opacity: 1; } 11109 50% { 11110 -webkit-transform: scale3d(0.99, 0.99, 2); 11111 transform: scale3d(0.99, 0.99, 2); } 11112 70% { 11113 -webkit-transform: scale3d(0.96, 0.96, -2.5); 11114 transform: scale3d(0.96, 0.96, -2.5); } 11115 100% { 11116 -webkit-transform: scale3d(0.98, 0.98, 2); 11117 transform: scale3d(0.98, 0.98, 2); } } 11118 11119@keyframes euiLoadingElastic { 11120 0% { 11121 -webkit-transform: scale3d(0, 0, -0.7); 11122 transform: scale3d(0, 0, -0.7); 11123 opacity: 0; } 11124 40% { 11125 -webkit-transform: scale3d(1, 1, 2); 11126 transform: scale3d(1, 1, 2); 11127 opacity: 1; } 11128 50% { 11129 -webkit-transform: scale3d(0.99, 0.99, 2); 11130 transform: scale3d(0.99, 0.99, 2); } 11131 70% { 11132 -webkit-transform: scale3d(0.96, 0.96, -2.5); 11133 transform: scale3d(0.96, 0.96, -2.5); } 11134 100% { 11135 -webkit-transform: scale3d(0.98, 0.98, 2); 11136 transform: scale3d(0.98, 0.98, 2); } } 11137 11138.euiLoadingChart { 11139 height: 32px; 11140 z-index: 500; 11141 overflow: hidden; 11142 display: inline-block; } 11143 11144/** 11145 * 1. Without the animation, the bars are all the same height, 11146 * so we apply transforms only if they can't animate 11147 */ 11148.euiLoadingChart__bar { 11149 height: 100%; 11150 width: 8px; 11151 display: inline-block; 11152 margin-bottom: -16px; 11153 margin-left: 2px; } 11154 @media screen and (prefers-reduced-motion: no-preference) { 11155 .euiLoadingChart__bar { 11156 -webkit-animation: euiLoadingChart 1s infinite; 11157 animation: euiLoadingChart 1s infinite; } } 11158 .euiLoadingChart__bar:nth-child(1) { 11159 background-color: #54B399; } 11160 @media screen and (prefers-reduced-motion: reduce) { 11161 .euiLoadingChart__bar:nth-child(1) { 11162 -webkit-transform: translateY(66%); 11163 transform: translateY(66%); 11164 /* 1 */ } } 11165 .euiLoadingChart__bar:nth-child(2) { 11166 background-color: #6092C0; 11167 -webkit-animation-delay: .1s; 11168 animation-delay: .1s; } 11169 @media screen and (prefers-reduced-motion: reduce) { 11170 .euiLoadingChart__bar:nth-child(2) { 11171 -webkit-transform: translateY(44%); 11172 transform: translateY(44%); 11173 /* 1 */ } } 11174 .euiLoadingChart__bar:nth-child(3) { 11175 background-color: #D36086; 11176 -webkit-animation-delay: .2s; 11177 animation-delay: .2s; } 11178 @media screen and (prefers-reduced-motion: reduce) { 11179 .euiLoadingChart__bar:nth-child(3) { 11180 -webkit-transform: translateY(22%); 11181 transform: translateY(22%); 11182 /* 1 */ } } 11183 .euiLoadingChart__bar:nth-child(4) { 11184 background-color: #9170B8; 11185 -webkit-animation-delay: .3s; 11186 animation-delay: .3s; } 11187 11188.euiLoadingChart--mono .euiLoadingChart__bar:nth-child(1) { 11189 background-color: #343741; } 11190 11191.euiLoadingChart--mono .euiLoadingChart__bar:nth-child(2) { 11192 background-color: #3c3f49; } 11193 11194.euiLoadingChart--mono .euiLoadingChart__bar:nth-child(3) { 11195 background-color: #444750; } 11196 11197.euiLoadingChart--mono .euiLoadingChart__bar:nth-child(4) { 11198 background-color: #4c4f58; } 11199 11200.euiLoadingChart--medium { 11201 height: 16px; } 11202 .euiLoadingChart--medium > span { 11203 width: 2px; 11204 margin-left: 2px; 11205 margin-bottom: 8px; } 11206 11207.euiLoadingChart--large { 11208 height: 24px; } 11209 .euiLoadingChart--large > span { 11210 width: 4px; 11211 margin-left: 2px; 11212 margin-bottom: 12px; } 11213 11214.euiLoadingChart--xLarge { 11215 height: 32px; } 11216 .euiLoadingChart--xLarge > span { 11217 width: 8px; 11218 margin-left: 4px; 11219 margin-bottom: 16px; } 11220 11221@-webkit-keyframes euiLoadingChart { 11222 0% { 11223 -webkit-transform: translateY(0); 11224 transform: translateY(0); } 11225 50% { 11226 -webkit-transform: translateY(66%); 11227 transform: translateY(66%); } 11228 100% { 11229 -webkit-transform: translateY(0); 11230 transform: translateY(0); } } 11231 11232@keyframes euiLoadingChart { 11233 0% { 11234 -webkit-transform: translateY(0); 11235 transform: translateY(0); } 11236 50% { 11237 -webkit-transform: translateY(66%); 11238 transform: translateY(66%); } 11239 100% { 11240 -webkit-transform: translateY(0); 11241 transform: translateY(0); } } 11242 11243.euiLoadingContent__loader { 11244 display: block; 11245 width: 100%; } 11246 11247.euiLoadingContent__singleLine { 11248 display: block; 11249 width: 100%; 11250 height: 16px; 11251 margin-bottom: 8px; 11252 border-radius: 4px; 11253 overflow: hidden; } 11254 .euiLoadingContent__singleLine:last-child:not(:only-child) { 11255 width: 75%; } 11256 11257.euiLoadingContent__singleLineBackground { 11258 display: block; 11259 width: 220%; 11260 height: 100%; 11261 background: linear-gradient(137deg, #2e3039 45%, #282a31 50%, #2e3039 55%); } 11262 @media screen and (prefers-reduced-motion: no-preference) { 11263 .euiLoadingContent__singleLineBackground { 11264 -webkit-animation: euiLoadingContentGradientLoad 1.5s cubic-bezier(0.694, 0.0482, 0.335, 1) infinite; 11265 animation: euiLoadingContentGradientLoad 1.5s cubic-bezier(0.694, 0.0482, 0.335, 1) infinite; } } 11266 11267@-webkit-keyframes euiLoadingContentGradientLoad { 11268 0% { 11269 -webkit-transform: translateX(-53%); 11270 transform: translateX(-53%); } 11271 100% { 11272 -webkit-transform: translateX(0); 11273 transform: translateX(0); } } 11274 11275@keyframes euiLoadingContentGradientLoad { 11276 0% { 11277 -webkit-transform: translateX(-53%); 11278 transform: translateX(-53%); } 11279 100% { 11280 -webkit-transform: translateX(0); 11281 transform: translateX(0); } } 11282 11283.euiLoadingSpinner { 11284 -webkit-flex-shrink: 0; 11285 flex-shrink: 0; 11286 display: inline-block; 11287 width: 32px; 11288 height: 32px; 11289 border-radius: 50%; 11290 border: solid 2px #343741; 11291 border-color: #1BA9F5 #343741 #343741 #343741; } 11292 @media screen and (prefers-reduced-motion: no-preference) { 11293 .euiLoadingSpinner { 11294 -webkit-animation: euiLoadingSpinner .6s infinite linear; 11295 animation: euiLoadingSpinner .6s infinite linear; } } 11296 11297.euiLoadingSpinner--small { 11298 width: 8px; 11299 height: 8px; 11300 border-width: 1px; } 11301 11302.euiLoadingSpinner--medium { 11303 width: 16px; 11304 height: 16px; 11305 border-width: 1px; } 11306 11307.euiLoadingSpinner--large { 11308 width: 24px; 11309 height: 24px; } 11310 11311.euiLoadingSpinner--xLarge { 11312 width: 32px; 11313 height: 32px; } 11314 11315@-webkit-keyframes euiLoadingSpinner { 11316 from { 11317 -webkit-transform: rotate(0deg); 11318 transform: rotate(0deg); } 11319 to { 11320 -webkit-transform: rotate(359deg); 11321 transform: rotate(359deg); } } 11322 11323@keyframes euiLoadingSpinner { 11324 from { 11325 -webkit-transform: rotate(0deg); 11326 transform: rotate(0deg); } 11327 to { 11328 -webkit-transform: rotate(359deg); 11329 transform: rotate(359deg); } } 11330 11331.euiMarkdownEditor--isPreviewing .euiMarkdownEditor__toggleContainer { 11332 display: none; } 11333 11334.euiMarkdownEditor--fullHeight { 11335 display: -webkit-flex; 11336 display: flex; 11337 -webkit-flex-direction: column; 11338 flex-direction: column; 11339 height: 100%; } 11340 .euiMarkdownEditor--fullHeight .euiMarkdownEditorTextArea { 11341 resize: none; } 11342 .euiMarkdownEditor--fullHeight .euiMarkdownEditorDropZone { 11343 height: 100%; } 11344 11345.euiMarkdownEditorDropZone { 11346 display: -webkit-flex; 11347 display: flex; 11348 position: relative; 11349 -webkit-flex-direction: column; 11350 flex-direction: column; 11351 min-height: "150px"; } 11352 .euiMarkdownEditorDropZone__input { 11353 position: absolute; 11354 left: 0; 11355 top: 0; 11356 width: 100%; 11357 height: 100%; 11358 opacity: 0; 11359 overflow: hidden; } 11360 .euiMarkdownEditorDropZone__input:hover { 11361 cursor: pointer; } 11362 .euiMarkdownEditorDropZone__input:hover:disabled { 11363 cursor: not-allowed; } 11364 .euiMarkdownEditorDropZone--isDragging .euiMarkdownEditorFooter, 11365 .euiMarkdownEditorDropZone--isDragging .euiMarkdownEditorTextArea, 11366 .euiMarkdownEditorDropZone--isDragging .euiMarkdownEditorTextArea:focus, 11367 .euiMarkdownEditorDropZone--isDragging .euiMarkdownEditor:focus-within .euiMarkdownEditorTextArea { 11368 background-color: rgba(27, 169, 245, 0.1) !important; } 11369 .euiMarkdownEditorDropZone--isDragging .euiMarkdownEditorTextArea, 11370 .euiMarkdownEditorDropZone--isDragging .euiMarkdownEditorTextArea:focus { 11371 background-image: linear-gradient(to top, #1BA9F5, #1BA9F5 2px, transparent 2px, transparent 100%) !important; } 11372 .euiMarkdownEditorDropZone--isDraggingError .euiMarkdownEditorFooter, 11373 .euiMarkdownEditorDropZone--isDraggingError .euiMarkdownEditorTextArea, 11374 .euiMarkdownEditorDropZone--isDraggingError .euiMarkdownEditorTextArea:focus, 11375 .euiMarkdownEditorDropZone--isDraggingError .euiMarkdownEditor:focus-within .euiMarkdownEditorTextArea { 11376 background-color: rgba(255, 102, 102, 0.1) !important; } 11377 .euiMarkdownEditorDropZone--hasError .euiMarkdownEditorTextArea, 11378 .euiMarkdownEditorDropZone--hasError .euiMarkdownEditorTextArea:focus { 11379 background-image: linear-gradient(to top, #F66, #F66 2px, transparent 2px, transparent 100%) !important; } 11380 11381.euiMarkdownFormat .euiTextColor--default .euiMarkdownFormat__blockquote { 11382 border-left-color: rgba(255, 255, 255, 0.15); } 11383 11384.euiMarkdownFormat .euiTextColor--default .euiHorizontalRule { 11385 background-color: rgba(255, 255, 255, 0.15); 11386 color: rgba(255, 255, 255, 0.15); } 11387 11388.euiMarkdownFormat .euiTextColor--default .euiMarkdownFormat__table { 11389 border-left: 1px solid rgba(255, 255, 255, 0.15); } 11390 11391.euiMarkdownFormat .euiTextColor--default .euiMarkdownFormat__table th, 11392.euiMarkdownFormat .euiTextColor--default .euiMarkdownFormat__table td { 11393 border-top: 1px solid rgba(255, 255, 255, 0.15); 11394 border-bottom: 1px solid rgba(255, 255, 255, 0.15); } 11395 .euiMarkdownFormat .euiTextColor--default .euiMarkdownFormat__table th:last-child, 11396 .euiMarkdownFormat .euiTextColor--default .euiMarkdownFormat__table td:last-child { 11397 border-right: 1px solid rgba(255, 255, 255, 0.15); } 11398 11399.euiMarkdownFormat .euiTextColor--default .euiMarkdownFormat__table tr { 11400 border-top: 1px solid rgba(255, 255, 255, 0.15); } 11401 11402.euiMarkdownFormat .euiTextColor--subdued .euiMarkdownFormat__blockquote { 11403 border-left-color: #7a7f89; } 11404 11405.euiMarkdownFormat .euiTextColor--subdued .euiHorizontalRule { 11406 background-color: #7a7f89; 11407 color: #7a7f89; } 11408 11409.euiMarkdownFormat .euiTextColor--subdued .euiMarkdownFormat__table { 11410 border-left: 1px solid #7a7f89; } 11411 11412.euiMarkdownFormat .euiTextColor--subdued .euiMarkdownFormat__table th, 11413.euiMarkdownFormat .euiTextColor--subdued .euiMarkdownFormat__table td { 11414 border-top: 1px solid #7a7f89; 11415 border-bottom: 1px solid #7a7f89; } 11416 .euiMarkdownFormat .euiTextColor--subdued .euiMarkdownFormat__table th:last-child, 11417 .euiMarkdownFormat .euiTextColor--subdued .euiMarkdownFormat__table td:last-child { 11418 border-right: 1px solid #7a7f89; } 11419 11420.euiMarkdownFormat .euiTextColor--subdued .euiMarkdownFormat__table tr { 11421 border-top: 1px solid #7a7f89; } 11422 11423.euiMarkdownFormat .euiTextColor--secondary .euiMarkdownFormat__blockquote { 11424 border-left-color: #7DE2D1; } 11425 11426.euiMarkdownFormat .euiTextColor--secondary .euiHorizontalRule { 11427 background-color: #7DE2D1; 11428 color: #7DE2D1; } 11429 11430.euiMarkdownFormat .euiTextColor--secondary .euiMarkdownFormat__table { 11431 border-left: 1px solid #7DE2D1; } 11432 11433.euiMarkdownFormat .euiTextColor--secondary .euiMarkdownFormat__table th, 11434.euiMarkdownFormat .euiTextColor--secondary .euiMarkdownFormat__table td { 11435 border-top: 1px solid #7DE2D1; 11436 border-bottom: 1px solid #7DE2D1; } 11437 .euiMarkdownFormat .euiTextColor--secondary .euiMarkdownFormat__table th:last-child, 11438 .euiMarkdownFormat .euiTextColor--secondary .euiMarkdownFormat__table td:last-child { 11439 border-right: 1px solid #7DE2D1; } 11440 11441.euiMarkdownFormat .euiTextColor--secondary .euiMarkdownFormat__table tr { 11442 border-top: 1px solid #7DE2D1; } 11443 11444.euiMarkdownFormat .euiTextColor--success .euiMarkdownFormat__blockquote { 11445 border-left-color: #7DE2D1; } 11446 11447.euiMarkdownFormat .euiTextColor--success .euiHorizontalRule { 11448 background-color: #7DE2D1; 11449 color: #7DE2D1; } 11450 11451.euiMarkdownFormat .euiTextColor--success .euiMarkdownFormat__table { 11452 border-left: 1px solid #7DE2D1; } 11453 11454.euiMarkdownFormat .euiTextColor--success .euiMarkdownFormat__table th, 11455.euiMarkdownFormat .euiTextColor--success .euiMarkdownFormat__table td { 11456 border-top: 1px solid #7DE2D1; 11457 border-bottom: 1px solid #7DE2D1; } 11458 .euiMarkdownFormat .euiTextColor--success .euiMarkdownFormat__table th:last-child, 11459 .euiMarkdownFormat .euiTextColor--success .euiMarkdownFormat__table td:last-child { 11460 border-right: 1px solid #7DE2D1; } 11461 11462.euiMarkdownFormat .euiTextColor--success .euiMarkdownFormat__table tr { 11463 border-top: 1px solid #7DE2D1; } 11464 11465.euiMarkdownFormat .euiTextColor--accent .euiMarkdownFormat__blockquote { 11466 border-left-color: #F990C0; } 11467 11468.euiMarkdownFormat .euiTextColor--accent .euiHorizontalRule { 11469 background-color: #F990C0; 11470 color: #F990C0; } 11471 11472.euiMarkdownFormat .euiTextColor--accent .euiMarkdownFormat__table { 11473 border-left: 1px solid #F990C0; } 11474 11475.euiMarkdownFormat .euiTextColor--accent .euiMarkdownFormat__table th, 11476.euiMarkdownFormat .euiTextColor--accent .euiMarkdownFormat__table td { 11477 border-top: 1px solid #F990C0; 11478 border-bottom: 1px solid #F990C0; } 11479 .euiMarkdownFormat .euiTextColor--accent .euiMarkdownFormat__table th:last-child, 11480 .euiMarkdownFormat .euiTextColor--accent .euiMarkdownFormat__table td:last-child { 11481 border-right: 1px solid #F990C0; } 11482 11483.euiMarkdownFormat .euiTextColor--accent .euiMarkdownFormat__table tr { 11484 border-top: 1px solid #F990C0; } 11485 11486.euiMarkdownFormat .euiTextColor--warning .euiMarkdownFormat__blockquote { 11487 border-left-color: #FFCE7A; } 11488 11489.euiMarkdownFormat .euiTextColor--warning .euiHorizontalRule { 11490 background-color: #FFCE7A; 11491 color: #FFCE7A; } 11492 11493.euiMarkdownFormat .euiTextColor--warning .euiMarkdownFormat__table { 11494 border-left: 1px solid #FFCE7A; } 11495 11496.euiMarkdownFormat .euiTextColor--warning .euiMarkdownFormat__table th, 11497.euiMarkdownFormat .euiTextColor--warning .euiMarkdownFormat__table td { 11498 border-top: 1px solid #FFCE7A; 11499 border-bottom: 1px solid #FFCE7A; } 11500 .euiMarkdownFormat .euiTextColor--warning .euiMarkdownFormat__table th:last-child, 11501 .euiMarkdownFormat .euiTextColor--warning .euiMarkdownFormat__table td:last-child { 11502 border-right: 1px solid #FFCE7A; } 11503 11504.euiMarkdownFormat .euiTextColor--warning .euiMarkdownFormat__table tr { 11505 border-top: 1px solid #FFCE7A; } 11506 11507.euiMarkdownFormat .euiTextColor--danger .euiMarkdownFormat__blockquote { 11508 border-left-color: #F66; } 11509 11510.euiMarkdownFormat .euiTextColor--danger .euiHorizontalRule { 11511 background-color: #F66; 11512 color: #F66; } 11513 11514.euiMarkdownFormat .euiTextColor--danger .euiMarkdownFormat__table { 11515 border-left: 1px solid #F66; } 11516 11517.euiMarkdownFormat .euiTextColor--danger .euiMarkdownFormat__table th, 11518.euiMarkdownFormat .euiTextColor--danger .euiMarkdownFormat__table td { 11519 border-top: 1px solid #F66; 11520 border-bottom: 1px solid #F66; } 11521 .euiMarkdownFormat .euiTextColor--danger .euiMarkdownFormat__table th:last-child, 11522 .euiMarkdownFormat .euiTextColor--danger .euiMarkdownFormat__table td:last-child { 11523 border-right: 1px solid #F66; } 11524 11525.euiMarkdownFormat .euiTextColor--danger .euiMarkdownFormat__table tr { 11526 border-top: 1px solid #F66; } 11527 11528.euiMarkdownFormat .euiTextColor--ghost .euiMarkdownFormat__blockquote { 11529 border-left-color: #FFF; } 11530 11531.euiMarkdownFormat .euiTextColor--ghost .euiHorizontalRule { 11532 background-color: #FFF; 11533 color: #FFF; } 11534 11535.euiMarkdownFormat .euiTextColor--ghost .euiMarkdownFormat__table { 11536 border-left: 1px solid #FFF; } 11537 11538.euiMarkdownFormat .euiTextColor--ghost .euiMarkdownFormat__table th, 11539.euiMarkdownFormat .euiTextColor--ghost .euiMarkdownFormat__table td { 11540 border-top: 1px solid #FFF; 11541 border-bottom: 1px solid #FFF; } 11542 .euiMarkdownFormat .euiTextColor--ghost .euiMarkdownFormat__table th:last-child, 11543 .euiMarkdownFormat .euiTextColor--ghost .euiMarkdownFormat__table td:last-child { 11544 border-right: 1px solid #FFF; } 11545 11546.euiMarkdownFormat .euiTextColor--ghost .euiMarkdownFormat__table tr { 11547 border-top: 1px solid #FFF; } 11548 11549.euiMarkdownFormat .euiTextColor--inherit .euiMarkdownFormat__blockquote { 11550 border-left-color: currentColor; } 11551 11552.euiMarkdownFormat .euiTextColor--inherit .euiHorizontalRule { 11553 background-color: currentColor; 11554 color: currentColor; } 11555 11556.euiMarkdownFormat .euiTextColor--inherit .euiMarkdownFormat__table { 11557 border-left: 1px solid currentColor; } 11558 11559.euiMarkdownFormat .euiTextColor--inherit .euiMarkdownFormat__table th, 11560.euiMarkdownFormat .euiTextColor--inherit .euiMarkdownFormat__table td { 11561 border-top: 1px solid currentColor; 11562 border-bottom: 1px solid currentColor; } 11563 .euiMarkdownFormat .euiTextColor--inherit .euiMarkdownFormat__table th:last-child, 11564 .euiMarkdownFormat .euiTextColor--inherit .euiMarkdownFormat__table td:last-child { 11565 border-right: 1px solid currentColor; } 11566 11567.euiMarkdownFormat .euiTextColor--inherit .euiMarkdownFormat__table tr { 11568 border-top: 1px solid currentColor; } 11569 11570.euiMarkdownFormat .euiTextColor--custom .euiMarkdownFormat__blockquote { 11571 border-left-color: currentColor; } 11572 11573.euiMarkdownFormat .euiTextColor--custom .euiHorizontalRule { 11574 background-color: currentColor; 11575 color: currentColor; } 11576 11577.euiMarkdownFormat .euiTextColor--custom .euiMarkdownFormat__table { 11578 border-left: 1px solid currentColor; } 11579 11580.euiMarkdownFormat .euiTextColor--custom .euiMarkdownFormat__table th, 11581.euiMarkdownFormat .euiTextColor--custom .euiMarkdownFormat__table td { 11582 border-top: 1px solid currentColor; 11583 border-bottom: 1px solid currentColor; } 11584 .euiMarkdownFormat .euiTextColor--custom .euiMarkdownFormat__table th:last-child, 11585 .euiMarkdownFormat .euiTextColor--custom .euiMarkdownFormat__table td:last-child { 11586 border-right: 1px solid currentColor; } 11587 11588.euiMarkdownFormat .euiTextColor--custom .euiMarkdownFormat__table tr { 11589 border-top: 1px solid currentColor; } 11590 11591.euiMarkdownFormat .euiMarkdownFormat__blockquote { 11592 border-left-style: solid; } 11593 11594.euiMarkdownFormat .euiCheckbox { 11595 margin-bottom: 0 !important; } 11596 11597.euiMarkdownFormat .euiCheckbox .euiCheckbox__input + .euiCheckbox__square { 11598 top: 50%; 11599 -webkit-transform: translateY(-50%); 11600 transform: translateY(-50%); } 11601 11602.euiMarkdownFormat .euiMarkdownFormat__table { 11603 display: block; 11604 width: 100%; 11605 overflow: auto; 11606 border-spacing: 0; 11607 border-collapse: collapse; } 11608 11609.euiMarkdownEditorFooter { 11610 display: -webkit-inline-flex; 11611 display: inline-flex; 11612 padding: 4px; 11613 border: 1px solid #343741; 11614 -webkit-align-items: center; 11615 align-items: center; 11616 background: #141519; } 11617 11618.euiMarkdownEditorFooter__popover { 11619 width: 300px; } 11620 11621.euiMarkdownEditorFooter__actions { 11622 -webkit-flex: 1; 11623 flex: 1; 11624 display: -webkit-inline-flex; 11625 display: inline-flex; } 11626 .euiMarkdownEditorFooter__actions > button, 11627 .euiMarkdownEditorFooter__actions > span { 11628 margin-right: 4px; 11629 -webkit-align-self: center; 11630 align-self: center; } 11631 .euiMarkdownEditorFooter__actions .euiMarkdownEditorFooter__uploadError { 11632 position: relative; 11633 left: -1px; 11634 line-height: 1; 11635 border-radius: 4px; } 11636 .euiMarkdownEditorFooter__actions .euiMarkdownEditorFooter__uploadError > span { 11637 padding: 0 4px; } 11638 11639.euiMarkdownEditorFooter__helpButton > svg { 11640 width: 26px; } 11641 11642.euiMarkdownEditorPreview { 11643 scrollbar-color: rgba(152, 162, 179, 0.5) transparent; 11644 scrollbar-width: thin; 11645 background: #1D1E24; 11646 min-height: "150px"; 11647 overflow-y: auto; 11648 border: 1px solid #343741; 11649 padding: 12px; } 11650 .euiMarkdownEditorPreview::-webkit-scrollbar { 11651 width: 16px; 11652 height: 16px; } 11653 .euiMarkdownEditorPreview::-webkit-scrollbar-thumb { 11654 background-color: rgba(152, 162, 179, 0.5); 11655 background-clip: content-box; 11656 border-radius: 16px; 11657 border: 6px solid transparent; } 11658 .euiMarkdownEditorPreview::-webkit-scrollbar-corner, .euiMarkdownEditorPreview::-webkit-scrollbar-track { 11659 background-color: transparent; } 11660 11661.euiMarkdownEditorTextArea { 11662 font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 11663 font-weight: 400; 11664 letter-spacing: -.005em; 11665 -webkit-text-size-adjust: 100%; 11666 -ms-text-size-adjust: 100%; 11667 -webkit-font-kerning: normal; 11668 font-kerning: normal; 11669 font-size: 14px; 11670 color: #DFE5EF; 11671 scrollbar-color: rgba(152, 162, 179, 0.5) transparent; 11672 scrollbar-width: thin; 11673 width: 100%; 11674 height: 100%; 11675 min-height: "150px"; 11676 padding: 12px; 11677 border: 1px solid #343741; 11678 border-bottom: none; 11679 line-height: 1.5; 11680 resize: vertical; 11681 background-color: #16171c; 11682 background-repeat: no-repeat; 11683 background-size: 0% 100%; 11684 margin: 0; 11685 transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in; } 11686 @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { 11687 .euiMarkdownEditorTextArea { 11688 line-height: 1em; } } 11689 .euiMarkdownEditorTextArea::-webkit-input-placeholder { 11690 color: #81858f; 11691 opacity: 1; } 11692 .euiMarkdownEditorTextArea::-moz-placeholder { 11693 color: #81858f; 11694 opacity: 1; } 11695 .euiMarkdownEditorTextArea::placeholder { 11696 color: #81858f; 11697 opacity: 1; } 11698 .euiMarkdownEditorTextArea::-webkit-scrollbar { 11699 width: 16px; 11700 height: 16px; } 11701 .euiMarkdownEditorTextArea::-webkit-scrollbar-thumb { 11702 background-color: rgba(152, 162, 179, 0.5); 11703 background-clip: content-box; 11704 border-radius: 16px; 11705 border: 6px solid transparent; } 11706 .euiMarkdownEditorTextArea::-webkit-scrollbar-corner, .euiMarkdownEditorTextArea::-webkit-scrollbar-track { 11707 background-color: transparent; } 11708 .euiMarkdownEditorTextArea:focus, 11709 .euiMarkdownEditor:focus-within .euiMarkdownEditorTextArea { 11710 background-color: #111216; 11711 background-image: linear-gradient(to top, #1BA9F5, #1BA9F5 2px, transparent 2px, transparent 100%); 11712 background-size: 100% 100%; } 11713 11714.euiMarkdownEditorToolbar { 11715 display: -webkit-flex; 11716 display: flex; 11717 -webkit-flex-wrap: wrap; 11718 flex-wrap: wrap; 11719 background: #25262E; 11720 border: 1px solid #343741; 11721 border-color: #343741; 11722 border-bottom: none; 11723 padding: 4px; } 11724 .euiMarkdownEditorToolbar__buttons { 11725 display: -webkit-flex; 11726 display: flex; 11727 -webkit-flex-wrap: wrap; 11728 flex-wrap: wrap; 11729 -webkit-flex: 1; 11730 flex: 1; 11731 -webkit-align-items: center; 11732 align-items: center; } 11733 .euiMarkdownEditorToolbar__buttons > * { 11734 margin-right: 4px; } 11735 .euiMarkdownEditorToolbar__divider { 11736 content: ''; 11737 height: 24px; 11738 display: block; 11739 margin-left: 4px; 11740 padding-right: 4px; 11741 border-left: 1px solid #343741; } 11742 11743.euiMarkdownTooltip__icon { 11744 -webkit-transform: translateY(-1px); 11745 transform: translateY(-1px); } 11746 11747.euiMark { 11748 background-color: transparent; 11749 font-weight: 700; 11750 color: #DFE5EF; } 11751 11752/** 11753 * 1. Fix IE overflow issue (min-height) by adding a separate wrapper for the 11754 * flex display. https://github.com/philipwalton/flexbugs#flexbug-3 11755 * 2. IE has trouble with min-widths on flex elements. Use the pixel value 11756 * from our forms since that's usually the smallest we want them. 11757 */ 11758.euiModal { 11759 border: 1px solid #343741; 11760 box-shadow: 0 40px 64px 0 rgba(0, 0, 0, 0.1), 0 24px 32px 0 rgba(0, 0, 0, 0.1), 0 16px 16px 0 rgba(0, 0, 0, 0.1), 0 8px 8px 0 rgba(0, 0, 0, 0.1), 0 4px 4px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.1); 11761 display: -webkit-flex; 11762 display: flex; 11763 /* 1 */ 11764 position: relative; 11765 background-color: #1D1E24; 11766 border-radius: 4px; 11767 z-index: 8000; 11768 min-width: 400px; 11769 -webkit-animation: euiModal 350ms cubic-bezier(0.34, 1.61, 0.7, 1); 11770 animation: euiModal 350ms cubic-bezier(0.34, 1.61, 0.7, 1); 11771 max-width: calc(100vw - 16px); } 11772 .euiModal:focus { 11773 outline: none; } 11774 .euiModal .euiModal__flex { 11775 /* 1 */ 11776 -webkit-flex: 1 1 auto; 11777 flex: 1 1 auto; 11778 display: -webkit-flex; 11779 display: flex; 11780 -webkit-flex-direction: column; 11781 flex-direction: column; 11782 max-height: 75vh; 11783 overflow: hidden; } 11784 11785.euiModal--maxWidth-default { 11786 max-width: MIN(768px, calc(100vw - 16px)); } 11787 11788.euiModal--confirmation { 11789 min-width: 400px; } 11790 11791.euiModalHeader { 11792 display: -webkit-flex; 11793 display: flex; 11794 -webkit-justify-content: space-between; 11795 justify-content: space-between; 11796 -webkit-align-items: center; 11797 align-items: center; 11798 padding: 24px 40px 16px 24px; 11799 -webkit-flex-grow: 0; 11800 flex-grow: 0; 11801 -webkit-flex-shrink: 0; 11802 flex-shrink: 0; } 11803 11804.euiModalHeader__title { 11805 overflow-wrap: break-word !important; 11806 word-wrap: break-word !important; 11807 word-break: break-word; 11808 color: #DFE5EF; 11809 font-size: 28px; 11810 font-size: 1.75rem; 11811 line-height: 2.5rem; 11812 font-weight: 300; 11813 letter-spacing: -0.04em; } 11814 11815.euiModalBody { 11816 -webkit-flex-grow: 1; 11817 flex-grow: 1; 11818 overflow: hidden; 11819 display: -webkit-flex; 11820 display: flex; 11821 -webkit-flex-direction: column; 11822 flex-direction: column; } 11823 .euiModalBody .euiModalBody__overflow { 11824 scrollbar-color: rgba(152, 162, 179, 0.5) transparent; 11825 scrollbar-width: thin; 11826 height: 100%; 11827 overflow-y: auto; 11828 overflow-x: hidden; 11829 -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%); 11830 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%); 11831 padding: 8px 24px; } 11832 .euiModalBody .euiModalBody__overflow::-webkit-scrollbar { 11833 width: 16px; 11834 height: 16px; } 11835 .euiModalBody .euiModalBody__overflow::-webkit-scrollbar-thumb { 11836 background-color: rgba(152, 162, 179, 0.5); 11837 background-clip: content-box; 11838 border-radius: 16px; 11839 border: 6px solid transparent; } 11840 .euiModalBody .euiModalBody__overflow::-webkit-scrollbar-corner, .euiModalBody .euiModalBody__overflow::-webkit-scrollbar-track { 11841 background-color: transparent; } 11842 .euiModalBody .euiModalBody__overflow:focus { 11843 outline: none; 11844 /* 1 */ } 11845 .euiModalBody .euiModalBody__overflow[tabindex='0']:focus:focus-visible { 11846 outline-style: auto; 11847 /* 2 */ } 11848 11849.euiModalFooter { 11850 display: -webkit-flex; 11851 display: flex; 11852 -webkit-justify-content: flex-end; 11853 justify-content: flex-end; 11854 padding: 16px 24px 24px; 11855 -webkit-flex-grow: 0; 11856 flex-grow: 0; 11857 -webkit-flex-shrink: 0; 11858 flex-shrink: 0; } 11859 .euiModalFooter > * + * { 11860 margin-left: 16px; } 11861 11862.euiModalHeader + .euiModalFooter { 11863 padding-top: 8px; } 11864 11865.euiModalBody:last-of-type .euiModalBody__overflow { 11866 padding-bottom: 24px; } 11867 11868.euiModal__closeIcon { 11869 background-color: rgba(29, 30, 36, 0.9); 11870 position: absolute; 11871 right: 4px; 11872 top: 4px; 11873 z-index: 3; } 11874 11875@-webkit-keyframes euiModal { 11876 0% { 11877 opacity: 0; 11878 -webkit-transform: translateY(32px); 11879 transform: translateY(32px); } 11880 100% { 11881 opacity: 1; 11882 -webkit-transform: translateY(0); 11883 transform: translateY(0); } } 11884 11885@keyframes euiModal { 11886 0% { 11887 opacity: 0; 11888 -webkit-transform: translateY(32px); 11889 transform: translateY(32px); } 11890 100% { 11891 opacity: 1; 11892 -webkit-transform: translateY(0); 11893 transform: translateY(0); } } 11894 11895@media only screen and (max-width: 574px) { 11896 .euiModal { 11897 position: fixed; 11898 width: 100vw !important; 11899 max-width: none !important; 11900 min-width: 0 !important; 11901 left: 0; 11902 right: 0; 11903 bottom: 0; 11904 top: 0; 11905 border-radius: 0; 11906 border: none; } 11907 .euiModal.euiModal--confirmation { 11908 box-shadow: 0 -40px 64px 0 rgba(0, 0, 0, 0.1), 0 -24px 32px 0 rgba(0, 0, 0, 0.1), 0 -16px 16px 0 rgba(0, 0, 0, 0.1), 0 -8px 8px 0 rgba(0, 0, 0, 0.1); 11909 top: auto; } 11910 .euiModal .euiModal__flex { 11911 /* 1 */ 11912 max-height: 100vh; } 11913 .euiModalHeader { 11914 width: 100%; } 11915 .euiModalFooter { 11916 width: 100%; 11917 background: #25262E; 11918 padding: 12px 24px !important; 11919 -webkit-justify-content: stretch; 11920 justify-content: stretch; } 11921 .euiModalFooter > * { 11922 -webkit-flex: 1; 11923 flex: 1; } 11924 .euiModalFooter > * + * { 11925 margin-left: 0; } 11926 .euiModalBody { 11927 width: 100%; } 11928 .euiModalBody .euiModalBody__overflow { 11929 padding-bottom: 24px; } } 11930 11931@media only screen and (min-width: 575px) and (max-width: 767px) { 11932 .euiModal { 11933 position: fixed; 11934 width: 100vw !important; 11935 max-width: none !important; 11936 min-width: 0 !important; 11937 left: 0; 11938 right: 0; 11939 bottom: 0; 11940 top: 0; 11941 border-radius: 0; 11942 border: none; } 11943 .euiModal.euiModal--confirmation { 11944 box-shadow: 0 -40px 64px 0 rgba(0, 0, 0, 0.1), 0 -24px 32px 0 rgba(0, 0, 0, 0.1), 0 -16px 16px 0 rgba(0, 0, 0, 0.1), 0 -8px 8px 0 rgba(0, 0, 0, 0.1); 11945 top: auto; } 11946 .euiModal .euiModal__flex { 11947 /* 1 */ 11948 max-height: 100vh; } 11949 .euiModalHeader { 11950 width: 100%; } 11951 .euiModalFooter { 11952 width: 100%; 11953 background: #25262E; 11954 padding: 12px 24px !important; 11955 -webkit-justify-content: stretch; 11956 justify-content: stretch; } 11957 .euiModalFooter > * { 11958 -webkit-flex: 1; 11959 flex: 1; } 11960 .euiModalFooter > * + * { 11961 margin-left: 0; } 11962 .euiModalBody { 11963 width: 100%; } 11964 .euiModalBody .euiModalBody__overflow { 11965 padding-bottom: 24px; } } 11966 11967.euiNotificationEvent { 11968 display: -webkit-flex; 11969 display: flex; 11970 padding: 12px 0 12px 12px; 11971 border-bottom: 1px solid #343741; } 11972 .euiNotificationEvent:last-child { 11973 border-bottom: none; } 11974 .euiNotificationEvent--withReadState { 11975 padding: 12px 0 12px 8px; } 11976 11977.euiNotificationEvent__title { 11978 overflow-wrap: break-word !important; 11979 word-wrap: break-word !important; 11980 word-break: break-word; 11981 color: #DFE5EF; 11982 font-size: 16px; 11983 font-size: 1rem; 11984 line-height: 1.5rem; 11985 font-weight: 600; 11986 letter-spacing: -0.02em; 11987 display: -webkit-flex; 11988 display: flex; } 11989 .euiNotificationEvent__title.euiLink { 11990 color: #1BA9F5; } 11991 .euiNotificationEvent__title--isRead { 11992 color: #98A2B3 !important; } 11993 11994.euiNotificationEvent__readButton { 11995 margin-right: 8px; } 11996 11997.euiNotificationEvent__content { 11998 -webkit-flex: 1; 11999 flex: 1; } 12000 .euiNotificationEvent__content > * + * { 12001 margin-top: 8px; 12002 margin-right: 12px; } 12003 12004.euiNotificationEventMeta { 12005 position: relative; 12006 display: -webkit-flex; 12007 display: flex; 12008 -webkit-flex-direction: row; 12009 flex-direction: row; 12010 -webkit-justify-content: space-between; 12011 justify-content: space-between; 12012 -webkit-align-items: center; 12013 align-items: center; 12014 -webkit-flex-wrap: wrap; 12015 flex-wrap: wrap; 12016 margin-right: 4px; 12017 min-height: 24px; } 12018 .euiNotificationEventMeta--hasContextMenu { 12019 padding-right: 24px; } 12020 .euiNotificationEventMeta__contextMenuWrapper { 12021 position: absolute; 12022 top: 0; 12023 right: 0; } 12024 .euiNotificationEventMeta__section { 12025 margin-right: 8px; } 12026 .euiNotificationEventMeta__section:first-child { 12027 display: -webkit-flex; 12028 display: flex; 12029 -webkit-flex: 1; 12030 flex: 1; 12031 -webkit-align-items: center; 12032 align-items: center; } 12033 .euiNotificationEventMeta__icon { 12034 margin-right: 8px; } 12035 .euiNotificationEventMeta__badge { 12036 max-width: 100%; 12037 display: inline-grid; } 12038 .euiNotificationEventMeta__time { 12039 font-size: 12px; 12040 color: #7a7f89; } 12041 12042.euiNotificationEventMessages { 12043 font-size: 14px; } 12044 .euiNotificationEventMessages__accordion { 12045 color: #98A2B3; } 12046 .euiNotificationEventMessages__accordionButton { 12047 color: #1BA9F5; } 12048 .euiNotificationEventMessages__accordionContent > * { 12049 padding-top: 8px; } 12050 12051.euiNotificationEventReadButton--isRead svg { 12052 fill: transparent; 12053 stroke-width: 1px; 12054 stroke: #343741; } 12055 12056.euiNotificationEventReadIcon { 12057 display: -webkit-flex; 12058 display: flex; 12059 -webkit-align-items: center; 12060 align-items: center; 12061 height: 24px; 12062 margin: 0 4px; } 12063 12064.euiNotificationEventReadIcon--isRead svg { 12065 fill: transparent; 12066 stroke-width: 1px; 12067 stroke: #343741; } 12068 12069.euiOverlayMask { 12070 position: fixed; 12071 top: 0; 12072 left: 0; 12073 right: 0; 12074 bottom: 0; 12075 display: -webkit-flex; 12076 display: flex; 12077 -webkit-align-items: center; 12078 align-items: center; 12079 -webkit-justify-content: center; 12080 justify-content: center; 12081 padding-bottom: 10vh; 12082 -webkit-animation: euiAnimFadeIn 150ms ease-in; 12083 animation: euiAnimFadeIn 150ms ease-in; 12084 background: rgba(52, 55, 65, 0.8); } 12085 12086.euiBody-hasOverlayMask { 12087 overflow: hidden; } 12088 12089.euiOverlayMask--aboveHeader { 12090 z-index: 6000; } 12091 12092.euiOverlayMask--belowHeader { 12093 z-index: 1000; } 12094 12095.euiPagination { 12096 display: -webkit-flex; 12097 display: flex; 12098 -webkit-align-items: center; 12099 align-items: center; } 12100 .euiPagination__compressedText { 12101 display: -webkit-inline-flex; 12102 display: inline-flex; 12103 -webkit-align-items: center; 12104 align-items: center; 12105 line-height: 1 !important; } 12106 .euiPagination__compressedText > *:first-child { 12107 margin-right: 4px; } 12108 .euiPagination__compressedText > *:last-child { 12109 margin-left: 4px; } 12110 12111.euiPagination__list { 12112 display: -webkit-flex; 12113 display: flex; 12114 -webkit-align-items: baseline; 12115 align-items: baseline; } 12116 12117.euiPaginationButton { 12118 font-size: 14px; 12119 padding: 0; 12120 text-align: center; 12121 border-radius: 4px; } 12122 12123.euiPaginationButton-isActive { 12124 font-weight: 700; } 12125 .euiPaginationButton-isActive.euiPaginationButton-isActive { 12126 color: #1BA9F5; } 12127 .euiPaginationButton-isActive.euiPaginationButton-isActive .euiButtonEmpty__content { 12128 cursor: default; } 12129 .euiPaginationButton-isActive.euiPaginationButton-isActive, .euiPaginationButton-isActive.euiPaginationButton-isActive:hover { 12130 text-decoration: underline; } 12131 12132.euiPaginationButton-isPlaceholder { 12133 -webkit-align-items: baseline; 12134 align-items: baseline; 12135 color: #4c4e51; 12136 font-size: 14px; 12137 padding: 0 8px; 12138 height: 24px; 12139 padding-top: 6px; } 12140 12141@media only screen and (max-width: 574px) { 12142 .euiPaginationButton-isPlaceholder, 12143 .euiPaginationButton--hideOnMobile { 12144 display: none; } } 12145 12146@media only screen and (min-width: 575px) and (max-width: 767px) { 12147 .euiPaginationButton-isPlaceholder, 12148 .euiPaginationButton--hideOnMobile { 12149 display: none; } } 12150 12151.euiPanel { 12152 background-color: #1D1E24; 12153 border: 1px solid #343741; 12154 border-radius: 4px; 12155 -webkit-flex-grow: 1; 12156 flex-grow: 1; } 12157 .euiPanel.euiPanel--flexGrowZero { 12158 -webkit-flex-grow: 0; 12159 flex-grow: 0; } 12160 .euiPanel.euiPanel--noBorder { 12161 border: none; } 12162 .euiPanel.euiPanel--hasShadow { 12163 box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3), 0 1px 5px -2px rgba(0, 0, 0, 0.3); 12164 border: 1px solid #343741; } 12165 .euiPanel.euiPanel--isClickable { 12166 transition: all 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); } 12167 .euiPanel.euiPanel--isClickable:enabled { 12168 display: block; 12169 width: 100%; 12170 text-align: left; } 12171 .euiPanel.euiPanel--isClickable:hover, .euiPanel.euiPanel--isClickable:focus { 12172 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 2px 2px -1px rgba(0, 0, 0, 0.3); 12173 -webkit-transform: translateY(-2px); 12174 transform: translateY(-2px); 12175 cursor: pointer; } 12176 .euiPanel.euiPanel--borderRadiusNone { 12177 border-radius: 0; } 12178 .euiPanel.euiPanel--borderRadiusMedium { 12179 border-radius: 4px; } 12180 .euiPanel.euiPanel--transparent { 12181 background-color: transparent; } 12182 .euiPanel.euiPanel--plain { 12183 background-color: #1D1E24; } 12184 .euiPanel.euiPanel--subdued { 12185 background-color: #141519; } 12186 .euiPanel.euiPanel--accent { 12187 background-color: #4b2b3a; } 12188 .euiPanel.euiPanel--primary { 12189 background-color: #08334a; } 12190 .euiPanel.euiPanel--success { 12191 background-color: #26443f; } 12192 .euiPanel.euiPanel--warning { 12193 background-color: #4d3e25; } 12194 .euiPanel.euiPanel--danger { 12195 background-color: #4d1f1f; } 12196 12197.euiPanel--paddingSmall { 12198 padding: 8px; } 12199 12200.euiPanel--paddingMedium { 12201 padding: 16px; } 12202 12203.euiPanel--paddingLarge { 12204 padding: 24px; } 12205 12206.euiSplitPanel { 12207 display: -webkit-flex; 12208 display: flex; 12209 -webkit-flex-direction: column; 12210 flex-direction: column; 12211 min-width: 0; } 12212 .euiSplitPanel .euiSplitPanel__inner { 12213 -webkit-flex-basis: 0%; 12214 flex-basis: 0%; 12215 -webkit-transform: none !important; 12216 transform: none !important; 12217 box-shadow: none !important; } 12218 .euiSplitPanel.euiSplitPanel-isResponsive.euiPanel--borderRadiusNone .euiSplitPanel__inner:first-child, 12219 .euiSplitPanel.euiPanel--borderRadiusNone .euiSplitPanel__inner:first-child { 12220 border-radius: -1 -1 0 0; } 12221 .euiSplitPanel.euiSplitPanel-isResponsive.euiPanel--borderRadiusNone .euiSplitPanel__inner:last-child, 12222 .euiSplitPanel.euiPanel--borderRadiusNone .euiSplitPanel__inner:last-child { 12223 border-radius: 0 0 -1 -1; } 12224 .euiSplitPanel.euiSplitPanel-isResponsive.euiPanel--borderRadiusMedium .euiSplitPanel__inner:first-child, 12225 .euiSplitPanel.euiPanel--borderRadiusMedium .euiSplitPanel__inner:first-child { 12226 border-radius: 3px 3px 0 0; } 12227 .euiSplitPanel.euiSplitPanel-isResponsive.euiPanel--borderRadiusMedium .euiSplitPanel__inner:last-child, 12228 .euiSplitPanel.euiPanel--borderRadiusMedium .euiSplitPanel__inner:last-child { 12229 border-radius: 0 0 3px 3px; } 12230 12231.euiSplitPanel--row { 12232 -webkit-flex-direction: row; 12233 flex-direction: row; } 12234 .euiSplitPanel--row.euiSplitPanel-isResponsive { 12235 -webkit-flex-direction: column; 12236 flex-direction: column; } 12237 .euiSplitPanel--row.euiPanel--borderRadiusNone .euiSplitPanel__inner:first-child { 12238 border-radius: -1 0 0 -1; } 12239 .euiSplitPanel--row.euiPanel--borderRadiusNone .euiSplitPanel__inner:last-child { 12240 border-radius: 0 -1 -1 0; } 12241 .euiSplitPanel--row.euiPanel--borderRadiusMedium .euiSplitPanel__inner:first-child { 12242 border-radius: 3px 0 0 3px; } 12243 .euiSplitPanel--row.euiPanel--borderRadiusMedium .euiSplitPanel__inner:last-child { 12244 border-radius: 0 3px 3px 0; } 12245 12246.euiPage { 12247 display: -webkit-flex; 12248 display: flex; 12249 background-color: #141519; 12250 -webkit-flex-shrink: 0; 12251 flex-shrink: 0; 12252 max-width: 100%; } 12253 .euiPage--restrictWidth-default, .euiPage--restrictWidth-custom { 12254 margin-left: auto; 12255 margin-right: auto; 12256 width: 100%; } 12257 .euiPage--restrictWidth-default { 12258 max-width: 1000px; } 12259 .euiPage--grow { 12260 -webkit-flex-grow: 1; 12261 flex-grow: 1; } 12262 .euiPage--column { 12263 -webkit-flex-direction: column; 12264 flex-direction: column; } 12265 @media only screen and (max-width: 574px) { 12266 .euiPage { 12267 -webkit-flex-direction: column; 12268 flex-direction: column; } } 12269 @media only screen and (min-width: 575px) and (max-width: 767px) { 12270 .euiPage { 12271 -webkit-flex-direction: column; 12272 flex-direction: column; } } 12273 12274.euiPage--paddingSmall { 12275 padding: 8px; } 12276 .euiPage--paddingSmall .euiPageSideBar { 12277 min-width: 192px; 12278 margin-right: 8px; } 12279 @media only screen and (max-width: 574px) { 12280 .euiPage--paddingSmall .euiPageSideBar { 12281 margin-right: 0; 12282 margin-bottom: 8px; } } 12283 @media only screen and (min-width: 575px) and (max-width: 767px) { 12284 .euiPage--paddingSmall .euiPageSideBar { 12285 margin-right: 0; 12286 margin-bottom: 8px; } } 12287 .euiPage--paddingSmall .euiPageBody > .euiPageHeader { 12288 margin-bottom: 8px; } 12289 12290.euiPage--paddingMedium { 12291 padding: 16px; } 12292 .euiPage--paddingMedium .euiPageSideBar { 12293 min-width: 192px; 12294 margin-right: 16px; } 12295 @media only screen and (max-width: 574px) { 12296 .euiPage--paddingMedium .euiPageSideBar { 12297 margin-right: 0; 12298 margin-bottom: 16px; } } 12299 @media only screen and (min-width: 575px) and (max-width: 767px) { 12300 .euiPage--paddingMedium .euiPageSideBar { 12301 margin-right: 0; 12302 margin-bottom: 16px; } } 12303 .euiPage--paddingMedium .euiPageBody > .euiPageHeader { 12304 margin-bottom: 16px; } 12305 12306.euiPage--paddingLarge { 12307 padding: 24px; } 12308 .euiPage--paddingLarge .euiPageSideBar { 12309 min-width: 192px; 12310 margin-right: 24px; } 12311 @media only screen and (max-width: 574px) { 12312 .euiPage--paddingLarge .euiPageSideBar { 12313 margin-right: 0; 12314 margin-bottom: 24px; } } 12315 @media only screen and (min-width: 575px) and (max-width: 767px) { 12316 .euiPage--paddingLarge .euiPageSideBar { 12317 margin-right: 0; 12318 margin-bottom: 24px; } } 12319 .euiPage--paddingLarge .euiPageBody > .euiPageHeader { 12320 margin-bottom: 24px; } 12321 12322.euiPageBody { 12323 display: -webkit-flex; 12324 display: flex; 12325 -webkit-flex-direction: column; 12326 flex-direction: column; 12327 -webkit-align-items: stretch; 12328 align-items: stretch; 12329 -webkit-flex: 1 1 100%; 12330 flex: 1 1 100%; 12331 max-width: 100%; 12332 min-width: 0; } 12333 .euiPageBody--restrictWidth-default, .euiPageBody--restrictWidth-custom { 12334 margin-left: auto; 12335 margin-right: auto; 12336 width: 100%; } 12337 .euiPageBody--restrictWidth-default { 12338 max-width: 1000px; } 12339 .euiPageBody.euiPageBody--borderRadiusNone { 12340 border-top-width: 0; 12341 border-right-width: 0; 12342 border-bottom-width: 0; } 12343 12344.euiPageBody--paddingSmall { 12345 padding: 8px; } 12346 .euiPageBody--paddingSmall > .euiPageHeader:not([class*='--padding']) { 12347 margin-bottom: 8px; 12348 border-bottom: 1px solid #343741; } 12349 .euiPageBody--paddingSmall > .euiPageHeader:not([class*='--padding']):not(.euiPageHeader--tabsAtBottom):not(.euiPageHeader--onlyTabs) { 12350 padding-bottom: 8px; } 12351 .euiPageBody--paddingSmall > .euiPageHeader.euiPageHeader--onlyTabs { 12352 padding-top: 0; } 12353 12354.euiPageBody--paddingMedium { 12355 padding: 16px; } 12356 .euiPageBody--paddingMedium > .euiPageHeader:not([class*='--padding']) { 12357 margin-bottom: 16px; 12358 border-bottom: 1px solid #343741; } 12359 .euiPageBody--paddingMedium > .euiPageHeader:not([class*='--padding']):not(.euiPageHeader--tabsAtBottom):not(.euiPageHeader--onlyTabs) { 12360 padding-bottom: 16px; } 12361 .euiPageBody--paddingMedium > .euiPageHeader.euiPageHeader--onlyTabs { 12362 padding-top: 0; } 12363 12364.euiPageBody--paddingLarge { 12365 padding: 24px; } 12366 .euiPageBody--paddingLarge > .euiPageHeader:not([class*='--padding']) { 12367 margin-bottom: 24px; 12368 border-bottom: 1px solid #343741; } 12369 .euiPageBody--paddingLarge > .euiPageHeader:not([class*='--padding']):not(.euiPageHeader--tabsAtBottom):not(.euiPageHeader--onlyTabs) { 12370 padding-bottom: 24px; } 12371 .euiPageBody--paddingLarge > .euiPageHeader.euiPageHeader--onlyTabs { 12372 padding-top: 0; } 12373 12374.euiPageContent { 12375 width: 100%; 12376 min-width: 0; } 12377 .euiPageContent.euiPageContent--borderRadiusNone { 12378 border-left-width: 0; 12379 border-right-width: 0; 12380 border-bottom-width: 0; } 12381 .euiPageContent.euiPageContent--verticalCenter { 12382 -webkit-align-self: center; 12383 align-self: center; 12384 margin-top: auto; 12385 margin-bottom: auto; 12386 -webkit-flex-grow: 0; 12387 flex-grow: 0; } 12388 .euiPageContent.euiPageContent--horizontalCenter { 12389 width: auto; 12390 max-width: 100%; 12391 margin-left: auto; 12392 margin-right: auto; 12393 -webkit-flex-grow: 0; 12394 flex-grow: 0; } 12395 12396.euiPageContentBody--restrictWidth-default, .euiPageContentBody--restrictWidth-custom { 12397 margin-left: auto; 12398 margin-right: auto; 12399 width: 100%; } 12400 12401.euiPageContentBody--restrictWidth-default { 12402 max-width: 1000px; } 12403 12404.euiPageContentBody--paddingSmall { 12405 padding: 8px; } 12406 12407.euiPageContentBody--paddingMedium { 12408 padding: 16px; } 12409 12410.euiPageContentBody--paddingLarge { 12411 padding: 24px; } 12412 12413.euiPageContentHeader { 12414 display: -webkit-flex; 12415 display: flex; 12416 -webkit-flex-direction: row; 12417 flex-direction: row; 12418 -webkit-justify-content: space-between; 12419 justify-content: space-between; 12420 -webkit-align-items: center; 12421 align-items: center; } 12422 .euiPageContent[class*='paddingSmall'] .euiPageContentHeader { 12423 margin-bottom: 8px; } 12424 .euiPageContent[class*='paddingMedium'] .euiPageContentHeader { 12425 margin-bottom: 16px; } 12426 .euiPageContent[class*='paddingLarge'] .euiPageContentHeader { 12427 margin-bottom: 24px; } 12428 12429@media only screen and (max-width: 574px) { 12430 .euiPageContentHeader--responsive { 12431 -webkit-flex-direction: column; 12432 flex-direction: column; 12433 -webkit-align-items: flex-start; 12434 align-items: flex-start; } } 12435 12436@media only screen and (min-width: 575px) and (max-width: 767px) { 12437 .euiPageContentHeader--responsive { 12438 -webkit-flex-direction: column; 12439 flex-direction: column; 12440 -webkit-align-items: flex-start; 12441 align-items: flex-start; } } 12442 12443.euiPageContentHeaderSection + .euiPageContentHeaderSection { 12444 margin-left: 32px; } 12445 12446@media only screen and (max-width: 574px) { 12447 .euiPageContent[class*='paddingSmall'] .euiPageContentHeader--responsive .euiPageContentHeaderSection + .euiPageContentHeaderSection { 12448 margin-left: 0; 12449 margin-top: 4px; } 12450 .euiPageContent[class*='paddingMedium'] .euiPageContentHeader--responsive .euiPageContentHeaderSection + .euiPageContentHeaderSection { 12451 margin-left: 0; 12452 margin-top: 8px; } 12453 .euiPageContent[class*='paddingLarge'] .euiPageContentHeader--responsive .euiPageContentHeaderSection + .euiPageContentHeaderSection { 12454 margin-left: 0; 12455 margin-top: 12px; } } 12456 12457@media only screen and (min-width: 575px) and (max-width: 767px) { 12458 .euiPageContent[class*='paddingSmall'] .euiPageContentHeader--responsive .euiPageContentHeaderSection + .euiPageContentHeaderSection { 12459 margin-left: 0; 12460 margin-top: 4px; } 12461 .euiPageContent[class*='paddingMedium'] .euiPageContentHeader--responsive .euiPageContentHeaderSection + .euiPageContentHeaderSection { 12462 margin-left: 0; 12463 margin-top: 8px; } 12464 .euiPageContent[class*='paddingLarge'] .euiPageContentHeader--responsive .euiPageContentHeaderSection + .euiPageContentHeaderSection { 12465 margin-left: 0; 12466 margin-top: 12px; } } 12467 12468/** 12469 * Note: Margin is added in _page.scss when EuiPage has `paddingSize` 12470 * 1. Prevent side bar width from changing when content width changes. 12471 */ 12472.euiPageSideBar { 12473 min-width: 240px; 12474 -webkit-flex: 0 1 0%; 12475 flex: 0 1 0%; 12476 /* 1 */ } 12477 12478.euiPageSideBar--paddingSmall { 12479 padding: 8px; } 12480 12481.euiPageSideBar--paddingMedium { 12482 padding: 16px; } 12483 12484.euiPageSideBar--paddingLarge { 12485 padding: 24px; } 12486 12487@media only screen and (max-width: 574px) { 12488 .euiPageSideBar { 12489 width: 100%; } } 12490 12491@media only screen and (min-width: 575px) and (max-width: 767px) { 12492 .euiPageSideBar { 12493 width: 100%; } } 12494 12495@media only screen and (min-width: 768px) and (max-width: 991px) { 12496 .euiPageSideBar--sticky { 12497 scrollbar-color: rgba(152, 162, 179, 0.5) transparent; 12498 scrollbar-width: thin; 12499 overflow-y: auto; 12500 -webkit-flex-grow: 1; 12501 flex-grow: 1; 12502 position: -webkit-sticky; 12503 position: sticky; 12504 max-height: 100vh; 12505 top: 0; } 12506 .euiPageSideBar--sticky::-webkit-scrollbar { 12507 width: 16px; 12508 height: 16px; } 12509 .euiPageSideBar--sticky::-webkit-scrollbar-thumb { 12510 background-color: rgba(152, 162, 179, 0.5); 12511 background-clip: content-box; 12512 border-radius: 16px; 12513 border: 6px solid transparent; } 12514 .euiPageSideBar--sticky::-webkit-scrollbar-corner, .euiPageSideBar--sticky::-webkit-scrollbar-track { 12515 background-color: transparent; } } 12516 12517@media only screen and (min-width: 992px) and (max-width: 1199px) { 12518 .euiPageSideBar--sticky { 12519 scrollbar-color: rgba(152, 162, 179, 0.5) transparent; 12520 scrollbar-width: thin; 12521 overflow-y: auto; 12522 -webkit-flex-grow: 1; 12523 flex-grow: 1; 12524 position: -webkit-sticky; 12525 position: sticky; 12526 max-height: 100vh; 12527 top: 0; } 12528 .euiPageSideBar--sticky::-webkit-scrollbar { 12529 width: 16px; 12530 height: 16px; } 12531 .euiPageSideBar--sticky::-webkit-scrollbar-thumb { 12532 background-color: rgba(152, 162, 179, 0.5); 12533 background-clip: content-box; 12534 border-radius: 16px; 12535 border: 6px solid transparent; } 12536 .euiPageSideBar--sticky::-webkit-scrollbar-corner, .euiPageSideBar--sticky::-webkit-scrollbar-track { 12537 background-color: transparent; } } 12538 12539@media only screen and (min-width: 1200px) { 12540 .euiPageSideBar--sticky { 12541 scrollbar-color: rgba(152, 162, 179, 0.5) transparent; 12542 scrollbar-width: thin; 12543 overflow-y: auto; 12544 -webkit-flex-grow: 1; 12545 flex-grow: 1; 12546 position: -webkit-sticky; 12547 position: sticky; 12548 max-height: 100vh; 12549 top: 0; } 12550 .euiPageSideBar--sticky::-webkit-scrollbar { 12551 width: 16px; 12552 height: 16px; } 12553 .euiPageSideBar--sticky::-webkit-scrollbar-thumb { 12554 background-color: rgba(152, 162, 179, 0.5); 12555 background-clip: content-box; 12556 border-radius: 16px; 12557 border: 6px solid transparent; } 12558 .euiPageSideBar--sticky::-webkit-scrollbar-corner, .euiPageSideBar--sticky::-webkit-scrollbar-track { 12559 background-color: transparent; } } 12560 12561/** 12562 * Note: Bottom margin is added in _page.scss when EuiPage has `paddingSize` 12563 * Or it's added in _page_body.scss when EuiPageBody has `paddingSize` 12564 */ 12565.euiPageHeader { 12566 width: 100%; 12567 display: -webkit-flex; 12568 display: flex; 12569 -webkit-flex-direction: row; 12570 flex-direction: row; 12571 -webkit-justify-content: space-between; 12572 justify-content: space-between; 12573 -webkit-align-items: center; 12574 align-items: center; 12575 -webkit-flex-shrink: 0; 12576 flex-shrink: 0; } 12577 .euiPageHeader--restrictWidth-default, .euiPageHeader--restrictWidth-custom { 12578 margin-left: auto; 12579 margin-right: auto; 12580 width: 100%; } 12581 .euiPageHeader--restrictWidth-default { 12582 max-width: 1000px; } 12583 12584.euiPageHeader--bottomBorder { 12585 border-bottom: 1px solid #343741; } 12586 .euiPageHeader--bottomBorder:not(.euiPageHeader--tabsAtBottom):not(.euiPageHeader--onlyTabs) { 12587 padding-bottom: 24px; } 12588 12589.euiPageHeader--onlyTabs { 12590 padding-top: 8px; } 12591 .euiPageHeader--onlyTabs .euiTabs--xlarge .euiTab { 12592 line-height: 72px; 12593 height: 72px; } 12594 12595.euiPageHeader--paddingSmall { 12596 padding: 8px; } 12597 .euiPageHeader--paddingSmall.euiPageHeader--tabsAtBottom, .euiPageHeader--paddingSmall.euiPageHeader--onlyTabs { 12598 padding-bottom: 0; } 12599 .euiPageHeader--paddingSmall.euiPageHeader--onlyTabs { 12600 padding-top: 8px; } 12601 .euiPageHeader--paddingSmall.euiPageHeader--tabsAtBottom.euiPageHeader--bottomBorder, .euiPageHeader--paddingSmall.euiPageHeader--onlyTabs.euiPageHeader--bottomBorder { 12602 margin-bottom: 8px; } 12603 12604.euiPageHeader--paddingMedium { 12605 padding: 16px; } 12606 .euiPageHeader--paddingMedium.euiPageHeader--tabsAtBottom, .euiPageHeader--paddingMedium.euiPageHeader--onlyTabs { 12607 padding-bottom: 0; } 12608 .euiPageHeader--paddingMedium.euiPageHeader--onlyTabs { 12609 padding-top: 8px; } 12610 .euiPageHeader--paddingMedium.euiPageHeader--tabsAtBottom.euiPageHeader--bottomBorder, .euiPageHeader--paddingMedium.euiPageHeader--onlyTabs.euiPageHeader--bottomBorder { 12611 margin-bottom: 16px; } 12612 12613.euiPageHeader--paddingLarge { 12614 padding: 24px; } 12615 .euiPageHeader--paddingLarge.euiPageHeader--tabsAtBottom, .euiPageHeader--paddingLarge.euiPageHeader--onlyTabs { 12616 padding-bottom: 0; } 12617 .euiPageHeader--paddingLarge.euiPageHeader--onlyTabs { 12618 padding-top: 8px; } 12619 .euiPageHeader--paddingLarge.euiPageHeader--tabsAtBottom.euiPageHeader--bottomBorder, .euiPageHeader--paddingLarge.euiPageHeader--onlyTabs.euiPageHeader--bottomBorder { 12620 margin-bottom: 24px; } 12621 12622.euiPageHeader--top { 12623 -webkit-align-items: flex-start; 12624 align-items: flex-start; } 12625 12626.euiPageHeader--bottom { 12627 -webkit-align-items: flex-end; 12628 align-items: flex-end; } 12629 12630.euiPageHeader--stretch { 12631 -webkit-align-items: stretch; 12632 align-items: stretch; } 12633 12634@media only screen and (max-width: 574px) { 12635 .euiPageHeader--responsive { 12636 -webkit-flex-direction: column; 12637 flex-direction: column; } 12638 .euiPageHeader--responsiveReverse { 12639 -webkit-flex-direction: column-reverse; 12640 flex-direction: column-reverse; } } 12641 12642@media only screen and (min-width: 575px) and (max-width: 767px) { 12643 .euiPageHeader--responsive { 12644 -webkit-flex-direction: column; 12645 flex-direction: column; } 12646 .euiPageHeader--responsiveReverse { 12647 -webkit-flex-direction: column-reverse; 12648 flex-direction: column-reverse; } } 12649 12650.euiPageHeader .euiPageHeaderContent { 12651 width: 100%; } 12652 12653.euiPageHeaderContent__titleIcon { 12654 top: -4px; 12655 position: relative; 12656 margin-right: 16px; } 12657 12658@media only screen and (min-width: 768px) and (max-width: 991px) { 12659 .euiPageHeaderContent__rightSideItems { 12660 -webkit-flex-direction: row-reverse; 12661 flex-direction: row-reverse; } } 12662 12663@media only screen and (min-width: 992px) and (max-width: 1199px) { 12664 .euiPageHeaderContent__rightSideItems { 12665 -webkit-flex-direction: row-reverse; 12666 flex-direction: row-reverse; } } 12667 12668@media only screen and (min-width: 1200px) { 12669 .euiPageHeaderContent__rightSideItems { 12670 -webkit-flex-direction: row-reverse; 12671 flex-direction: row-reverse; } } 12672 12673.euiPageHeaderSection:not(:first-of-type) { 12674 margin-left: 32px; } 12675 12676@media only screen and (max-width: 574px) { 12677 .euiPageHeader--responsive .euiPageHeaderSection { 12678 width: 100%; } 12679 .euiPageHeader--responsive .euiPageHeaderSection:not(:first-of-type) { 12680 margin-left: 0; 12681 margin-top: 16px; } 12682 .euiPageHeader--responsiveReverse .euiPageHeaderSection { 12683 width: 100%; } 12684 .euiPageHeader--responsiveReverse .euiPageHeaderSection:not(:first-of-type) { 12685 margin-left: 0; } 12686 .euiPageHeader--responsiveReverse .euiPageHeaderSection:not(:last-of-type) { 12687 margin-top: 16px; } } 12688 12689@media only screen and (min-width: 575px) and (max-width: 767px) { 12690 .euiPageHeader--responsive .euiPageHeaderSection { 12691 width: 100%; } 12692 .euiPageHeader--responsive .euiPageHeaderSection:not(:first-of-type) { 12693 margin-left: 0; 12694 margin-top: 16px; } 12695 .euiPageHeader--responsiveReverse .euiPageHeaderSection { 12696 width: 100%; } 12697 .euiPageHeader--responsiveReverse .euiPageHeaderSection:not(:first-of-type) { 12698 margin-left: 0; } 12699 .euiPageHeader--responsiveReverse .euiPageHeaderSection:not(:last-of-type) { 12700 margin-top: 16px; } } 12701 12702.euiPopover { 12703 display: inline-block; 12704 position: relative; 12705 vertical-align: middle; 12706 max-width: 100%; } 12707 12708.euiPopover__anchor { 12709 display: inline-block; } 12710 12711.euiPopover--displayBlock { 12712 display: block; } 12713 .euiPopover--displayBlock .euiPopover__anchor { 12714 display: block; } 12715 12716/** 12717 * 1. Can expand further, but it looks weird if it's smaller than the originating button. 12718 * 2. Animation happens on the panel. But don't animate when using the attached mode like for inputs 12719 * 3. Make sure the panel stays within the window. 12720 */ 12721.euiPopover__panel { 12722 box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.1), 0 6px 12px 0 rgba(0, 0, 0, 0.1), 0 4px 4px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.1); 12723 position: absolute; 12724 min-width: 112px; 12725 /* 1 */ 12726 max-width: calc(100vw - 32px); 12727 /* 3 */ 12728 -webkit-backface-visibility: hidden; 12729 backface-visibility: hidden; 12730 pointer-events: none; 12731 opacity: 0; 12732 /* 2 */ 12733 transition: opacity cubic-bezier(0.34, 1.61, 0.7, 1) 350ms; 12734 /* 2 */ } 12735 .euiPopover__panel:not(.euiPopover__panel-isAttached) { 12736 -webkit-transform: translateY(0) translateX(0) translateZ(0); 12737 transform: translateY(0) translateX(0) translateZ(0); 12738 /* 2 */ 12739 transition: opacity cubic-bezier(0.34, 1.61, 0.7, 1) 350ms, -webkit-transform cubic-bezier(0.34, 1.61, 0.7, 1) 450ms; 12740 transition: opacity cubic-bezier(0.34, 1.61, 0.7, 1) 350ms, transform cubic-bezier(0.34, 1.61, 0.7, 1) 450ms; 12741 transition: opacity 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; } 12742 .euiPopover__panel.euiPopover__panel-isOpen { 12743 opacity: 1; 12744 pointer-events: auto; } 12745 .euiPopover__panel .euiPopover__panelArrow { 12746 position: absolute; 12747 width: 0; 12748 height: 0; } 12749 .euiPopover__panel .euiPopover__panelArrow:before { 12750 position: absolute; 12751 content: ''; 12752 height: 0; 12753 width: 0; } 12754 .euiPopover__panel .euiPopover__panelArrow:after { 12755 position: absolute; 12756 content: ''; 12757 height: 0; 12758 width: 0; } 12759 .euiPopover__panel .euiPopover__panelArrow.euiPopover__panelArrow--top:before { 12760 bottom: -10px; 12761 border-left: 12px solid transparent; 12762 border-right: 12px solid transparent; 12763 border-top: 12px solid #343741; } 12764 .euiPopover__panel .euiPopover__panelArrow.euiPopover__panelArrow--top:after { 12765 bottom: -9px; 12766 border-left: 12px solid transparent; 12767 border-right: 12px solid transparent; 12768 border-top: 12px solid #1D1E24; } 12769 .euiPopover__panel .euiPopover__panelArrow.euiPopover__panelArrow--right:before { 12770 left: -12px; 12771 top: 50%; 12772 border-top: 12px solid transparent; 12773 border-bottom: 12px solid transparent; 12774 border-right: 12px solid #343741; } 12775 .euiPopover__panel .euiPopover__panelArrow.euiPopover__panelArrow--right:after { 12776 left: -11px; 12777 top: 50%; 12778 border-top: 12px solid transparent; 12779 border-bottom: 12px solid transparent; 12780 border-right: 12px solid #1D1E24; } 12781 .euiPopover__panel .euiPopover__panelArrow.euiPopover__panelArrow--bottom:before { 12782 top: -12px; 12783 border-left: 12px solid transparent; 12784 border-right: 12px solid transparent; 12785 border-bottom: 12px solid #343741; } 12786 .euiPopover__panel .euiPopover__panelArrow.euiPopover__panelArrow--bottom:after { 12787 top: -11px; 12788 border-left: 12px solid transparent; 12789 border-right: 12px solid transparent; 12790 border-bottom: 12px solid #1D1E24; } 12791 .euiPopover__panel .euiPopover__panelArrow.euiPopover__panelArrow--left:before { 12792 right: -11px; 12793 top: 50%; 12794 border-top: 12px solid transparent; 12795 border-bottom: 12px solid transparent; 12796 border-left: 12px solid #343741; } 12797 .euiPopover__panel .euiPopover__panelArrow.euiPopover__panelArrow--left:after { 12798 right: -10px; 12799 top: 50%; 12800 border-top: 12px solid transparent; 12801 border-bottom: 12px solid transparent; 12802 border-left: 12px solid #1D1E24; } 12803 .euiPopover__panel.euiPopover__panel-noArrow .euiPopover__panelArrow { 12804 display: none; } 12805 .euiPopover__panel.euiPopover__panel-isAttached.euiPopover__panel--bottom { 12806 border-top-color: rgba(52, 55, 65, 0.8); 12807 border-top-right-radius: 0; 12808 border-top-left-radius: 0; } 12809 .euiPopover__panel.euiPopover__panel-isAttached.euiPopover__panel--top { 12810 box-shadow: 0 0 12px -1px rgba(0, 0, 0, 0.2), 0 0 4px -1px rgba(0, 0, 0, 0.2), 0 0 2px 0 rgba(0, 0, 0, 0.2); 12811 border-bottom-color: rgba(52, 55, 65, 0.8); 12812 border-bottom-right-radius: 0; 12813 border-bottom-left-radius: 0; } 12814 12815.euiPopover__panel.euiPopover__panel-isAttached.euiPopover__panel--top, 12816.euiPopover__panel.euiPopover__panel-isOpen.euiPopover__panel--top { 12817 -webkit-transform: translateY(8px) translateZ(0); 12818 transform: translateY(8px) translateZ(0); } 12819 12820.euiPopover__panel.euiPopover__panel-isAttached.euiPopover__panel--bottom, 12821.euiPopover__panel.euiPopover__panel-isOpen.euiPopover__panel--bottom { 12822 -webkit-transform: translateY(-8px) translateZ(0); 12823 transform: translateY(-8px) translateZ(0); } 12824 12825.euiPopover__panel.euiPopover__panel-isOpen.euiPopover__panel--left { 12826 -webkit-transform: translateX(8px) translateZ(0); 12827 transform: translateX(8px) translateZ(0); } 12828 12829.euiPopover__panel.euiPopover__panel-isOpen.euiPopover__panel--right { 12830 -webkit-transform: translateX(-8px) translateZ(0); 12831 transform: translateX(-8px) translateZ(0); } 12832 12833.euiPopoverTitle { 12834 overflow-wrap: break-word !important; 12835 word-wrap: break-word !important; 12836 word-break: break-word; 12837 color: #DFE5EF; 12838 font-size: 14px; 12839 font-size: 0.875rem; 12840 line-height: 1.5rem; 12841 font-weight: 700; 12842 padding: 12px; 12843 text-transform: uppercase; 12844 border-bottom: 1px solid #343741; } 12845 12846.euiPopoverTitle--paddingNone { 12847 padding: 0; } 12848 12849.euiPopoverTitle--paddingSmall { 12850 padding: 8px; } 12851 12852.euiPopoverTitle--paddingMedium { 12853 padding: 16px; } 12854 12855.euiPopoverTitle--paddingLarge { 12856 padding: 24px; } 12857 12858.euiPopover__panel.euiPanel--paddingSmall .euiPopoverTitle { 12859 margin: -8px -8px 8px; } 12860 .euiPopover__panel.euiPanel--paddingSmall .euiPopoverTitle:not([class*='euiPopoverTitle--padding']) { 12861 padding: 12px 8px; } 12862 12863.euiPopover__panel.euiPanel--paddingMedium .euiPopoverTitle { 12864 margin: -16px -16px 16px; } 12865 .euiPopover__panel.euiPanel--paddingMedium .euiPopoverTitle:not([class*='euiPopoverTitle--padding']) { 12866 padding: 12px 16px; } 12867 12868.euiPopover__panel.euiPanel--paddingLarge .euiPopoverTitle { 12869 margin: -24px -24px 24px; } 12870 .euiPopover__panel.euiPanel--paddingLarge .euiPopoverTitle:not([class*='euiPopoverTitle--padding']) { 12871 padding: 12px 24px; } 12872 12873.euiPopoverFooter { 12874 font-size: 14px; 12875 font-size: 0.875rem; 12876 line-height: 1.5; 12877 padding: 12px; 12878 border-top: 1px solid #343741; } 12879 12880.euiPopoverFooter--paddingNone { 12881 padding: 0; } 12882 12883.euiPopoverFooter--paddingSmall { 12884 padding: 8px; } 12885 12886.euiPopoverFooter--paddingMedium { 12887 padding: 16px; } 12888 12889.euiPopoverFooter--paddingLarge { 12890 padding: 24px; } 12891 12892.euiPopover__panel.euiPanel--paddingSmall .euiPopoverFooter { 12893 margin: 8px -8px -8px; } 12894 .euiPopover__panel.euiPanel--paddingSmall .euiPopoverFooter:not([class*='euiPopoverFooter--padding']) { 12895 padding: 12px 8px; } 12896 12897.euiPopover__panel.euiPanel--paddingMedium .euiPopoverFooter { 12898 margin: 16px -16px -16px; } 12899 .euiPopover__panel.euiPanel--paddingMedium .euiPopoverFooter:not([class*='euiPopoverFooter--padding']) { 12900 padding: 12px 16px; } 12901 12902.euiPopover__panel.euiPanel--paddingLarge .euiPopoverFooter { 12903 margin: 24px -24px -24px; } 12904 .euiPopover__panel.euiPanel--paddingLarge .euiPopoverFooter:not([class*='euiPopoverFooter--padding']) { 12905 padding: 12px 24px; } 12906 12907.euiInputPopover { 12908 max-width: 400px; } 12909 .euiInputPopover.euiInputPopover--fullWidth { 12910 max-width: 100%; } 12911 12912/** 12913 * 1. Portal content is absolutely positioned (e.g. tooltips, popovers, flyouts). 12914 */ 12915.euiBody-hasPortalContent { 12916 position: relative; 12917 /* 1 */ } 12918 12919.euiProgress { 12920 position: relative; 12921 overflow: hidden; 12922 background-color: #343741; } 12923 12924.euiProgress--xs { 12925 height: 2px; } 12926 12927.euiProgress--s { 12928 height: 4px; } 12929 12930.euiProgress--m { 12931 height: 8px; } 12932 12933.euiProgress--l { 12934 height: 16px; } 12935 12936.euiProgress--native { 12937 display: block; 12938 width: 100%; 12939 -webkit-appearance: none; 12940 -moz-appearance: none; 12941 appearance: none; 12942 border: none; } 12943 .euiProgress--native::-webkit-progress-bar { 12944 background-color: #343741; } 12945 .euiProgress--native::-webkit-progress-value { 12946 -webkit-transition: width 250ms linear; 12947 transition: width 250ms linear; } 12948 .euiProgress--native::-moz-progress-bar { 12949 -moz-transition: width 250ms linear; 12950 transition: width 250ms linear; } 12951 12952/** 12953 * An indeterminate bar has an unreliable end time. Because of a Firefox animation issue, 12954 * we apply this style to a <div> instead of a <progress> element. 12955 * See https://css-tricks.com/html5-progress-element/ for more info. 12956 */ 12957.euiProgress--indeterminate:before { 12958 position: absolute; 12959 content: ''; 12960 width: 100%; 12961 top: 0; 12962 bottom: 0; 12963 left: 0; 12964 -webkit-transform: scaleX(0) translateX(0%); 12965 transform: scaleX(0) translateX(0%); 12966 -webkit-animation: euiProgress 1s cubic-bezier(0.694, 0.0482, 0.335, 1) infinite; 12967 animation: euiProgress 1s cubic-bezier(0.694, 0.0482, 0.335, 1) infinite; } 12968 12969.euiProgress--fixed { 12970 position: fixed; 12971 z-index: 1001; } 12972 12973.euiProgress--absolute { 12974 position: absolute; } 12975 12976.euiProgress--fixed, 12977.euiProgress--absolute { 12978 top: 0; 12979 left: 0; 12980 right: 0; 12981 background-color: transparent; } 12982 .euiProgress--fixed.euiProgress--native::-webkit-progress-bar, 12983 .euiProgress--absolute.euiProgress--native::-webkit-progress-bar { 12984 background-color: transparent; } 12985 .euiProgress--fixed.euiProgress--native::-moz-progress-bar, 12986 .euiProgress--absolute.euiProgress--native::-moz-progress-bar { 12987 background-color: transparent; } 12988 12989.euiProgress--primary.euiProgress--native::-webkit-progress-value { 12990 background-color: #1BA9F5; } 12991 12992.euiProgress--primary.euiProgress--native::-moz-progress-bar { 12993 background-color: #1BA9F5; } 12994 12995.euiProgress--primary.euiProgress--indeterminate:before { 12996 background-color: #1BA9F5; } 12997 12998.euiProgress__data--primary .euiProgress__valueText { 12999 color: #1BA9F5; } 13000 13001.euiProgress--secondary.euiProgress--native::-webkit-progress-value { 13002 background-color: #7DE2D1; } 13003 13004.euiProgress--secondary.euiProgress--native::-moz-progress-bar { 13005 background-color: #7DE2D1; } 13006 13007.euiProgress--secondary.euiProgress--indeterminate:before { 13008 background-color: #7DE2D1; } 13009 13010.euiProgress__data--secondary .euiProgress__valueText { 13011 color: #7DE2D1; } 13012 13013.euiProgress--success.euiProgress--native::-webkit-progress-value { 13014 background-color: #7DE2D1; } 13015 13016.euiProgress--success.euiProgress--native::-moz-progress-bar { 13017 background-color: #7DE2D1; } 13018 13019.euiProgress--success.euiProgress--indeterminate:before { 13020 background-color: #7DE2D1; } 13021 13022.euiProgress__data--success .euiProgress__valueText { 13023 color: #7DE2D1; } 13024 13025.euiProgress--warning.euiProgress--native::-webkit-progress-value { 13026 background-color: #FFCE7A; } 13027 13028.euiProgress--warning.euiProgress--native::-moz-progress-bar { 13029 background-color: #FFCE7A; } 13030 13031.euiProgress--warning.euiProgress--indeterminate:before { 13032 background-color: #FFCE7A; } 13033 13034.euiProgress__data--warning .euiProgress__valueText { 13035 color: #FFCE7A; } 13036 13037.euiProgress--danger.euiProgress--native::-webkit-progress-value { 13038 background-color: #F66; } 13039 13040.euiProgress--danger.euiProgress--native::-moz-progress-bar { 13041 background-color: #F66; } 13042 13043.euiProgress--danger.euiProgress--indeterminate:before { 13044 background-color: #F66; } 13045 13046.euiProgress__data--danger .euiProgress__valueText { 13047 color: #F66; } 13048 13049.euiProgress--accent.euiProgress--native::-webkit-progress-value { 13050 background-color: #F990C0; } 13051 13052.euiProgress--accent.euiProgress--native::-moz-progress-bar { 13053 background-color: #F990C0; } 13054 13055.euiProgress--accent.euiProgress--indeterminate:before { 13056 background-color: #F990C0; } 13057 13058.euiProgress__data--accent .euiProgress__valueText { 13059 color: #F990C0; } 13060 13061.euiProgress--subdued.euiProgress--native::-webkit-progress-value { 13062 background-color: #7a7f89; } 13063 13064.euiProgress--subdued.euiProgress--native::-moz-progress-bar { 13065 background-color: #7a7f89; } 13066 13067.euiProgress--subdued.euiProgress--indeterminate:before { 13068 background-color: #7a7f89; } 13069 13070.euiProgress__data--subdued .euiProgress__valueText { 13071 color: #7a7f89; } 13072 13073.euiProgress--vis0.euiProgress--native::-webkit-progress-value { 13074 background-color: #54B399; } 13075 13076.euiProgress--vis0.euiProgress--native::-moz-progress-bar { 13077 background-color: #54B399; } 13078 13079.euiProgress--vis0.euiProgress--indeterminate:before { 13080 background-color: #54B399; } 13081 13082.euiProgress__data--vis0 .euiProgress__valueText { 13083 color: #54B399; } 13084 13085.euiProgress--vis1.euiProgress--native::-webkit-progress-value { 13086 background-color: #6092C0; } 13087 13088.euiProgress--vis1.euiProgress--native::-moz-progress-bar { 13089 background-color: #6092C0; } 13090 13091.euiProgress--vis1.euiProgress--indeterminate:before { 13092 background-color: #6092C0; } 13093 13094.euiProgress__data--vis1 .euiProgress__valueText { 13095 color: #6092C0; } 13096 13097.euiProgress--vis2.euiProgress--native::-webkit-progress-value { 13098 background-color: #D36086; } 13099 13100.euiProgress--vis2.euiProgress--native::-moz-progress-bar { 13101 background-color: #D36086; } 13102 13103.euiProgress--vis2.euiProgress--indeterminate:before { 13104 background-color: #D36086; } 13105 13106.euiProgress__data--vis2 .euiProgress__valueText { 13107 color: #D36086; } 13108 13109.euiProgress--vis3.euiProgress--native::-webkit-progress-value { 13110 background-color: #9170B8; } 13111 13112.euiProgress--vis3.euiProgress--native::-moz-progress-bar { 13113 background-color: #9170B8; } 13114 13115.euiProgress--vis3.euiProgress--indeterminate:before { 13116 background-color: #9170B8; } 13117 13118.euiProgress__data--vis3 .euiProgress__valueText { 13119 color: #9170B8; } 13120 13121.euiProgress--vis4.euiProgress--native::-webkit-progress-value { 13122 background-color: #CA8EAE; } 13123 13124.euiProgress--vis4.euiProgress--native::-moz-progress-bar { 13125 background-color: #CA8EAE; } 13126 13127.euiProgress--vis4.euiProgress--indeterminate:before { 13128 background-color: #CA8EAE; } 13129 13130.euiProgress__data--vis4 .euiProgress__valueText { 13131 color: #CA8EAE; } 13132 13133.euiProgress--vis5.euiProgress--native::-webkit-progress-value { 13134 background-color: #D6BF57; } 13135 13136.euiProgress--vis5.euiProgress--native::-moz-progress-bar { 13137 background-color: #D6BF57; } 13138 13139.euiProgress--vis5.euiProgress--indeterminate:before { 13140 background-color: #D6BF57; } 13141 13142.euiProgress__data--vis5 .euiProgress__valueText { 13143 color: #D6BF57; } 13144 13145.euiProgress--vis6.euiProgress--native::-webkit-progress-value { 13146 background-color: #B9A888; } 13147 13148.euiProgress--vis6.euiProgress--native::-moz-progress-bar { 13149 background-color: #B9A888; } 13150 13151.euiProgress--vis6.euiProgress--indeterminate:before { 13152 background-color: #B9A888; } 13153 13154.euiProgress__data--vis6 .euiProgress__valueText { 13155 color: #B9A888; } 13156 13157.euiProgress--vis7.euiProgress--native::-webkit-progress-value { 13158 background-color: #DA8B45; } 13159 13160.euiProgress--vis7.euiProgress--native::-moz-progress-bar { 13161 background-color: #DA8B45; } 13162 13163.euiProgress--vis7.euiProgress--indeterminate:before { 13164 background-color: #DA8B45; } 13165 13166.euiProgress__data--vis7 .euiProgress__valueText { 13167 color: #DA8B45; } 13168 13169.euiProgress--vis8.euiProgress--native::-webkit-progress-value { 13170 background-color: #AA6556; } 13171 13172.euiProgress--vis8.euiProgress--native::-moz-progress-bar { 13173 background-color: #AA6556; } 13174 13175.euiProgress--vis8.euiProgress--indeterminate:before { 13176 background-color: #AA6556; } 13177 13178.euiProgress__data--vis8 .euiProgress__valueText { 13179 color: #b27466; } 13180 13181.euiProgress--vis9.euiProgress--native::-webkit-progress-value { 13182 background-color: #E7664C; } 13183 13184.euiProgress--vis9.euiProgress--native::-moz-progress-bar { 13185 background-color: #E7664C; } 13186 13187.euiProgress--vis9.euiProgress--indeterminate:before { 13188 background-color: #E7664C; } 13189 13190.euiProgress__data--vis9 .euiProgress__valueText { 13191 color: #E7664C; } 13192 13193.euiProgress--customColor.euiProgress--native::-webkit-progress-value { 13194 background-color: currentColor; } 13195 13196.euiProgress--customColor.euiProgress--native::-moz-progress-bar { 13197 background-color: currentColor; } 13198 13199.euiProgress--customColor.euiProgress--indeterminate:before { 13200 background-color: currentColor; } 13201 13202@-webkit-keyframes euiProgress { 13203 0% { 13204 -webkit-transform: scaleX(1) translateX(-100%); 13205 transform: scaleX(1) translateX(-100%); } 13206 100% { 13207 -webkit-transform: scaleX(1) translateX(100%); 13208 transform: scaleX(1) translateX(100%); } } 13209 13210@keyframes euiProgress { 13211 0% { 13212 -webkit-transform: scaleX(1) translateX(-100%); 13213 transform: scaleX(1) translateX(-100%); } 13214 100% { 13215 -webkit-transform: scaleX(1) translateX(100%); 13216 transform: scaleX(1) translateX(100%); } } 13217 13218.euiProgress__data { 13219 display: -webkit-flex; 13220 display: flex; 13221 -webkit-justify-content: space-between; 13222 justify-content: space-between; } 13223 13224.euiProgress__label, 13225.euiProgress__valueText { 13226 color: #DFE5EF; 13227 font-weight: 400; 13228 font-size: 12px; 13229 font-size: 0.75rem; 13230 line-height: 1.5; 13231 max-width: 100%; 13232 overflow: hidden !important; 13233 text-overflow: ellipsis !important; 13234 white-space: nowrap !important; 13235 word-wrap: normal !important; } 13236 13237.euiProgress__label { 13238 -webkit-flex-grow: 1; 13239 flex-grow: 1; } 13240 .euiProgress__label + .euiProgress__valueText { 13241 padding-left: 4px; 13242 -webkit-flex-grow: 1; 13243 flex-grow: 1; 13244 text-align: right; 13245 -webkit-flex-shrink: 0; 13246 flex-shrink: 0; } 13247 13248.euiProgress__valueText { 13249 font-feature-settings: 'tnum' 1; 13250 margin-left: auto; } 13251 13252.euiProgress__data--l .euiProgress__label, 13253.euiProgress__data--l .euiProgress__valueText { 13254 font-size: 14px; 13255 font-size: 0.875rem; 13256 line-height: 1.5; } 13257 13258.euiTreeView__wrapper .euiTreeView { 13259 margin: 0; 13260 list-style-type: none; } 13261 13262.euiTreeView .euiTreeView { 13263 padding-left: 24px; } 13264 13265.euiTreeView__node { 13266 max-height: 32px; 13267 line-height: 32px; } 13268 13269.euiTreeView__node--expanded { 13270 max-height: 100vh; } 13271 13272.euiTreeView__nodeInner { 13273 max-width: 100%; 13274 overflow: hidden !important; 13275 text-overflow: ellipsis !important; 13276 white-space: nowrap !important; 13277 word-wrap: normal !important; 13278 padding-left: 8px; 13279 display: -webkit-flex; 13280 display: flex; 13281 -webkit-flex-direction: row; 13282 flex-direction: row; 13283 -webkit-align-items: center; 13284 align-items: center; 13285 height: 32px; 13286 border-radius: 4px; 13287 width: 100%; 13288 -moz-text-align-last: left; 13289 text-align-last: left; } 13290 .euiTreeView__nodeInner:focus { 13291 -webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important; 13292 animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important; } 13293 .euiTreeView__nodeInner:hover, .euiTreeView__nodeInner:active, .euiTreeView__nodeInner:focus { 13294 background-color: #052231; } 13295 .euiTreeView__nodeInner .euiTreeView__iconPlaceholder { 13296 width: 32px; } 13297 13298.euiTreeView__nodeLabel { 13299 max-width: 100%; 13300 overflow: hidden !important; 13301 text-overflow: ellipsis !important; 13302 white-space: nowrap !important; 13303 word-wrap: normal !important; } 13304 13305.euiTreeView__iconWrapper { 13306 margin-top: -2px; 13307 margin-right: 8px; } 13308 .euiTreeView__iconWrapper .euiToken { 13309 margin-top: 2px; } 13310 13311.euiTreeView--compressed .euiTreeView__node { 13312 max-height: 24px; 13313 line-height: 24px; } 13314 .euiTreeView--compressed .euiTreeView__node .euiTreeView__nodeInner { 13315 height: 24px; } 13316 .euiTreeView--compressed .euiTreeView__node .euiTreeView__iconWrapper { 13317 margin: 0 6px 0 0; } 13318 .euiTreeView--compressed .euiTreeView__node .euiTreeView__nodeLabel { 13319 margin-top: -1px; } 13320 .euiTreeView--compressed .euiTreeView__node .euiTreeView__iconPlaceholder { 13321 width: 24px; } 13322 13323.euiTreeView--compressed .euiTreeView__node--expanded { 13324 max-height: 100vh; } 13325 13326.euiTreeView--withArrows .euiTreeView__expansionArrow { 13327 margin-right: 4px; } 13328 13329.euiTreeView--withArrows.euiTreeView .euiTreeView__nodeInner--withArrows .euiTreeView__iconWrapper { 13330 margin-left: 0; } 13331 13332.euiTreeView--withArrows.euiTreeView .euiTreeView__iconWrapper { 13333 margin-left: 20px; } 13334 13335.euiTreeView--withArrows.euiTreeView--compressed .euiTreeView__nodeInner--withArrows .euiTreeView__iconWrapper { 13336 margin-left: 0; } 13337 13338.euiTreeView--withArrows.euiTreeView--compressed .euiTreeView__iconWrapper { 13339 margin-left: 16px; } 13340 13341.euiResizableButton { 13342 position: relative; 13343 -webkit-flex-shrink: 0; 13344 flex-shrink: 0; 13345 z-index: 1; } 13346 .euiResizableButton:before, .euiResizableButton:after { 13347 content: ''; 13348 display: block; 13349 position: absolute; 13350 top: 50%; 13351 left: 50%; 13352 background-color: #D4DAE5; 13353 transition: width 150ms ease, height 150ms ease, background-color 150ms ease, -webkit-transform 150ms ease; 13354 transition: width 150ms ease, height 150ms ease, transform 150ms ease, background-color 150ms ease; 13355 transition: width 150ms ease, height 150ms ease, transform 150ms ease, background-color 150ms ease, -webkit-transform 150ms ease; } 13356 .euiResizableButton.euiResizableButton--horizontal { 13357 cursor: col-resize; 13358 width: 16px; 13359 margin-left: -8px; 13360 margin-right: -8px; } 13361 .euiResizableButton.euiResizableButton--horizontal:before, .euiResizableButton.euiResizableButton--horizontal:after { 13362 width: 1px; 13363 height: 12px; } 13364 .euiResizableButton.euiResizableButton--horizontal:before { 13365 -webkit-transform: translate(-2px, -50%); 13366 transform: translate(-2px, -50%); } 13367 .euiResizableButton.euiResizableButton--horizontal:after { 13368 -webkit-transform: translate(1px, -50%); 13369 transform: translate(1px, -50%); } 13370 .euiResizableButton.euiResizableButton--vertical { 13371 cursor: row-resize; 13372 height: 16px; 13373 margin-top: -8px; 13374 margin-bottom: -8px; } 13375 .euiResizableButton.euiResizableButton--vertical:before, .euiResizableButton.euiResizableButton--vertical:after { 13376 width: 12px; 13377 height: 1px; } 13378 .euiResizableButton.euiResizableButton--vertical:before { 13379 -webkit-transform: translate(-50%, -2px); 13380 transform: translate(-50%, -2px); } 13381 .euiResizableButton.euiResizableButton--vertical:after { 13382 -webkit-transform: translate(-50%, 1px); 13383 transform: translate(-50%, 1px); } 13384 .euiResizableButton:hover:not(:disabled):before, .euiResizableButton:hover:not(:disabled):after { 13385 background-color: #535966; 13386 transition-delay: 150ms; } 13387 .euiResizableButton:focus:not(:disabled) { 13388 background-color: rgba(27, 169, 245, 0.1); } 13389 .euiResizableButton:focus:not(:disabled):before, .euiResizableButton:focus:not(:disabled):after { 13390 background-color: #1BA9F5; 13391 transition: width 150ms ease, height 150ms ease, -webkit-transform 150ms ease; 13392 transition: width 150ms ease, height 150ms ease, transform 150ms ease; 13393 transition: width 150ms ease, height 150ms ease, transform 150ms ease, -webkit-transform 150ms ease; 13394 transition-delay: 75ms; } 13395 .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 { 13396 height: 100%; } 13397 .euiResizableButton:hover:not(:disabled).euiResizableButton--horizontal:before, .euiResizableButton:focus:not(:disabled).euiResizableButton--horizontal:before { 13398 -webkit-transform: translate(-1px, -50%); 13399 transform: translate(-1px, -50%); } 13400 .euiResizableButton:hover:not(:disabled).euiResizableButton--horizontal:after, .euiResizableButton:focus:not(:disabled).euiResizableButton--horizontal:after { 13401 -webkit-transform: translate(0, -50%); 13402 transform: translate(0, -50%); } 13403 .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 { 13404 width: 100%; } 13405 .euiResizableButton:hover:not(:disabled).euiResizableButton--vertical:before, .euiResizableButton:focus:not(:disabled).euiResizableButton--vertical:before { 13406 -webkit-transform: translate(-50%, -1px); 13407 transform: translate(-50%, -1px); } 13408 .euiResizableButton:hover:not(:disabled).euiResizableButton--vertical:after, .euiResizableButton:focus:not(:disabled).euiResizableButton--vertical:after { 13409 -webkit-transform: translate(-50%, 0); 13410 transform: translate(-50%, 0); } 13411 .euiResizableButton:disabled { 13412 display: none !important; } 13413 13414/** 13415 * 1. The default position of the button should always be `middle`, so 13416 * those position styles aren't restricted to a class 13417 * 2. When collpsed, the button itself is the full collapsed area and we use 13418 * flex to align the icon within 13419 */ 13420.euiResizableToggleButton { 13421 box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3); 13422 position: absolute; 13423 z-index: 2; 13424 -webkit-animation: none !important; 13425 animation: none !important; 13426 transition-property: background, box-shadow; } 13427 .euiResizableToggleButton:focus { 13428 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 2px 2px -1px rgba(0, 0, 0, 0.3); } 13429 .euiResizableToggleButton-isCollapsed { 13430 box-shadow: none; 13431 background: transparent; 13432 border-radius: 0; } 13433 .euiResizableToggleButton:not(:focus):not(:active):not(.euiResizableToggleButton-isVisible):not(.euiResizableToggleButton-isCollapsed) { 13434 position: absolute; 13435 top: auto; 13436 left: -10000px; 13437 width: 1px; 13438 height: 1px; 13439 clip: rect(0 0 0 0); 13440 -webkit-clip-path: inset(50%); 13441 clip-path: inset(50%); 13442 overflow: hidden; 13443 margin: -1px; } 13444 13445.euiResizableToggleButton--horizontal.euiResizableToggleButton.euiResizableToggleButton--after { 13446 right: 0; 13447 top: 50%; 13448 /* 1 */ 13449 -webkit-transform: translate(50%, -50%); 13450 transform: translate(50%, -50%); 13451 /* 1 */ } 13452 .euiResizableToggleButton--horizontal.euiResizableToggleButton.euiResizableToggleButton--after.euiResizableToggleButton--top { 13453 top: 0; 13454 -webkit-transform: translate(50%, 16px); 13455 transform: translate(50%, 16px); } 13456 .euiResizableToggleButton--horizontal.euiResizableToggleButton.euiResizableToggleButton--after.euiResizableToggleButton--bottom { 13457 top: auto; 13458 bottom: 0; 13459 -webkit-transform: translate(50%, -16px); 13460 transform: translate(50%, -16px); } 13461 13462.euiResizableToggleButton--horizontal.euiResizableToggleButton.euiResizableToggleButton--before { 13463 left: 0; 13464 top: 50%; 13465 /* 1 */ 13466 -webkit-transform: translate(-50%, -50%); 13467 transform: translate(-50%, -50%); 13468 /* 1 */ } 13469 .euiResizableToggleButton--horizontal.euiResizableToggleButton.euiResizableToggleButton--before.euiResizableToggleButton--top { 13470 top: 0; 13471 -webkit-transform: translate(-50%, 16px); 13472 transform: translate(-50%, 16px); } 13473 .euiResizableToggleButton--horizontal.euiResizableToggleButton.euiResizableToggleButton--before.euiResizableToggleButton--bottom { 13474 top: auto; 13475 bottom: 0; 13476 -webkit-transform: translate(-50%, -16px); 13477 transform: translate(-50%, -16px); } 13478 13479.euiResizableToggleButton--horizontal.euiResizableToggleButton.euiResizableToggleButton-isCollapsed { 13480 top: 0 !important; 13481 bottom: 0 !important; 13482 -webkit-transform: none !important; 13483 transform: none !important; 13484 height: 100%; } 13485 .euiResizableToggleButton--horizontal.euiResizableToggleButton.euiResizableToggleButton-isCollapsed.euiResizableToggleButton--top { 13486 padding-top: 16px; 13487 -webkit-align-items: flex-start; 13488 align-items: flex-start; 13489 /* 2 */ } 13490 .euiResizableToggleButton--horizontal.euiResizableToggleButton.euiResizableToggleButton-isCollapsed.euiResizableToggleButton--bottom { 13491 padding-bottom: 16px; 13492 -webkit-align-items: flex-end; 13493 align-items: flex-end; 13494 /* 2 */ } 13495 13496.euiResizableToggleButton--vertical.euiResizableToggleButton.euiResizableToggleButton--after { 13497 top: 100%; 13498 left: 50%; 13499 /* 1 */ 13500 -webkit-transform: translate(-50%, -50%); 13501 transform: translate(-50%, -50%); 13502 /* 1 */ } 13503 .euiResizableToggleButton--vertical.euiResizableToggleButton.euiResizableToggleButton--after.euiResizableToggleButton--left { 13504 left: 0; 13505 -webkit-transform: translate(16px, -50%); 13506 transform: translate(16px, -50%); } 13507 .euiResizableToggleButton--vertical.euiResizableToggleButton.euiResizableToggleButton--after.euiResizableToggleButton--right { 13508 left: auto; 13509 right: 0; 13510 -webkit-transform: translate(-16px, -50%); 13511 transform: translate(-16px, -50%); } 13512 13513.euiResizableToggleButton--vertical.euiResizableToggleButton.euiResizableToggleButton--before { 13514 bottom: 100%; 13515 left: 50%; 13516 /* 1 */ 13517 -webkit-transform: translate(-50%, 50%); 13518 transform: translate(-50%, 50%); 13519 /* 1 */ } 13520 .euiResizableToggleButton--vertical.euiResizableToggleButton.euiResizableToggleButton--before.euiResizableToggleButton--left { 13521 left: 0; 13522 -webkit-transform: translate(16px, 50%); 13523 transform: translate(16px, 50%); } 13524 .euiResizableToggleButton--vertical.euiResizableToggleButton.euiResizableToggleButton--before.euiResizableToggleButton--right { 13525 left: auto; 13526 right: 0; 13527 -webkit-transform: translate(-16px, 50%); 13528 transform: translate(-16px, 50%); } 13529 13530.euiResizableToggleButton--vertical.euiResizableToggleButton.euiResizableToggleButton-isCollapsed { 13531 top: 0 !important; 13532 bottom: 0 !important; 13533 left: 0 !important; 13534 -webkit-transform: none !important; 13535 transform: none !important; 13536 width: 100%; } 13537 .euiResizableToggleButton--vertical.euiResizableToggleButton.euiResizableToggleButton-isCollapsed.euiResizableToggleButton--left { 13538 padding-left: 16px; 13539 -webkit-justify-content: flex-start; 13540 justify-content: flex-start; 13541 /* 2 */ } 13542 .euiResizableToggleButton--vertical.euiResizableToggleButton.euiResizableToggleButton-isCollapsed.euiResizableToggleButton--right { 13543 padding-right: 16px; 13544 -webkit-justify-content: flex-end; 13545 justify-content: flex-end; 13546 /* 2 */ } 13547 13548.euiResizableContainer { 13549 display: -webkit-flex; 13550 display: flex; 13551 width: 100%; } 13552 .euiResizableContainer--vertical { 13553 -webkit-flex-direction: column; 13554 flex-direction: column; } 13555 13556.euiResizablePanel { 13557 position: relative; } 13558 13559.euiResizablePanel--paddingSmall { 13560 padding: 8px; } 13561 13562.euiResizablePanel--paddingMedium { 13563 padding: 16px; } 13564 13565.euiResizablePanel--paddingLarge { 13566 padding: 24px; } 13567 13568.euiResizablePanel__content { 13569 height: 100%; } 13570 .euiResizablePanel__content:not([class*='plain']) { 13571 border-width: 0; } 13572 13573.euiResizablePanel__content--scrollable { 13574 scrollbar-color: rgba(152, 162, 179, 0.5) transparent; 13575 scrollbar-width: thin; 13576 overflow-y: auto; } 13577 .euiResizablePanel__content--scrollable::-webkit-scrollbar { 13578 width: 16px; 13579 height: 16px; } 13580 .euiResizablePanel__content--scrollable::-webkit-scrollbar-thumb { 13581 background-color: rgba(152, 162, 179, 0.5); 13582 background-clip: content-box; 13583 border-radius: 16px; 13584 border: 6px solid transparent; } 13585 .euiResizablePanel__content--scrollable::-webkit-scrollbar-corner, .euiResizablePanel__content--scrollable::-webkit-scrollbar-track { 13586 background-color: transparent; } 13587 13588.euiResizablePanel-isCollapsed { 13589 overflow: hidden; } 13590 .euiResizablePanel-isCollapsed .euiResizablePanel__content * { 13591 display: none; } 13592 13593.euiResizableContainer--horizontal .euiResizablePanel-isCollapsed { 13594 min-width: 0 !important; } 13595 13596.euiResizableContainer--horizontal .euiResizablePanel--collapsible.euiResizablePanel-isCollapsed { 13597 min-width: 24px !important; } 13598 13599.euiResizableContainer--vertical .euiResizablePanel-isCollapsed { 13600 min-height: 0 !important; } 13601 13602.euiResizableContainer--vertical .euiResizablePanel--collapsible.euiResizablePanel-isCollapsed { 13603 min-height: 24px !important; } 13604 13605.euiSideNav__mobileToggle { 13606 height: auto; 13607 border-bottom: 1px solid #343741; 13608 width: 100%; 13609 text-align: left; 13610 border-radius: 0 !important; 13611 font-size: 18px; 13612 padding: 0 16px; } 13613 .euiSideNav__mobileToggle .euiSideNav__mobileToggleText { 13614 padding: 16px 0; } 13615 .euiSideNav__mobileToggle .euiSideNav__mobileToggleContent { 13616 -webkit-justify-content: space-between; 13617 justify-content: space-between; } 13618 13619.euiSideNav__heading { 13620 margin-bottom: 24px; } 13621 13622@media only screen and (max-width: 574px) { 13623 .euiSideNav__contentMobile-xs { 13624 overflow: hidden; 13625 visibility: hidden; 13626 opacity: 0; 13627 max-height: 0; 13628 padding: 0 24px; } 13629 .euiSideNav-isOpenMobile .euiSideNav__contentMobile-xs { 13630 visibility: visible; 13631 opacity: 1; 13632 padding: 24px; 13633 max-height: 5000px; 13634 /* 1 */ } } 13635 @media only screen and (max-width: 574px) and (prefers-reduced-motion: no-preference) { 13636 .euiSideNav-isOpenMobile .euiSideNav__contentMobile-xs { 13637 transition: all 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } } 13638 13639@media only screen and (min-width: 575px) and (max-width: 767px) { 13640 .euiSideNav__contentMobile-s { 13641 overflow: hidden; 13642 visibility: hidden; 13643 opacity: 0; 13644 max-height: 0; 13645 padding: 0 24px; } 13646 .euiSideNav-isOpenMobile .euiSideNav__contentMobile-s { 13647 visibility: visible; 13648 opacity: 1; 13649 padding: 24px; 13650 max-height: 5000px; 13651 /* 1 */ } } 13652 @media only screen and (min-width: 575px) and (max-width: 767px) and (prefers-reduced-motion: no-preference) { 13653 .euiSideNav-isOpenMobile .euiSideNav__contentMobile-s { 13654 transition: all 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } } 13655 13656@media only screen and (min-width: 768px) and (max-width: 991px) { 13657 .euiSideNav__contentMobile-m { 13658 overflow: hidden; 13659 visibility: hidden; 13660 opacity: 0; 13661 max-height: 0; 13662 padding: 0 24px; } 13663 .euiSideNav-isOpenMobile .euiSideNav__contentMobile-m { 13664 visibility: visible; 13665 opacity: 1; 13666 padding: 24px; 13667 max-height: 5000px; 13668 /* 1 */ } } 13669 @media only screen and (min-width: 768px) and (max-width: 991px) and (prefers-reduced-motion: no-preference) { 13670 .euiSideNav-isOpenMobile .euiSideNav__contentMobile-m { 13671 transition: all 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } } 13672 13673@media only screen and (min-width: 992px) and (max-width: 1199px) { 13674 .euiSideNav__contentMobile-l { 13675 overflow: hidden; 13676 visibility: hidden; 13677 opacity: 0; 13678 max-height: 0; 13679 padding: 0 24px; } 13680 .euiSideNav-isOpenMobile .euiSideNav__contentMobile-l { 13681 visibility: visible; 13682 opacity: 1; 13683 padding: 24px; 13684 max-height: 5000px; 13685 /* 1 */ } } 13686 @media only screen and (min-width: 992px) and (max-width: 1199px) and (prefers-reduced-motion: no-preference) { 13687 .euiSideNav-isOpenMobile .euiSideNav__contentMobile-l { 13688 transition: all 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } } 13689 13690@media only screen and (min-width: 1200px) { 13691 .euiSideNav__contentMobile-xl { 13692 overflow: hidden; 13693 visibility: hidden; 13694 opacity: 0; 13695 max-height: 0; 13696 padding: 0 24px; } 13697 .euiSideNav-isOpenMobile .euiSideNav__contentMobile-xl { 13698 visibility: visible; 13699 opacity: 1; 13700 padding: 24px; 13701 max-height: 5000px; 13702 /* 1 */ } } 13703 @media only screen and (min-width: 1200px) and (prefers-reduced-motion: no-preference) { 13704 .euiSideNav-isOpenMobile .euiSideNav__contentMobile-xl { 13705 transition: all 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } } 13706 13707/** 13708 * 1. Text-align defaults to center, so we have to override that. 13709 * 2. Color the text at the item level and then have the button inherit so overrides are easier 13710 * 3. Enable ellipsis overflow to work (https://css-tricks.com/flexbox-truncated-text/) 13711 * 4. Restrict the underline to the button __label so it doesn't affect other components that might live within 13712 */ 13713.euiSideNavItemButton { 13714 font-size: 14px; 13715 font-size: 0.875rem; 13716 line-height: 1.5; 13717 text-align: left; 13718 /* 1 */ 13719 display: block; 13720 width: 100%; 13721 padding: 2px 0; 13722 color: inherit; 13723 /* 2 */ } 13724 .euiSideNavItemButton.euiSideNavItemButton--isClickable:not(:disabled):hover { 13725 cursor: pointer; } 13726 .euiSideNavItemButton.euiSideNavItemButton--isClickable:not(:disabled):hover .euiSideNavItemButton__label, .euiSideNavItemButton.euiSideNavItemButton--isClickable:not(:disabled):focus .euiSideNavItemButton__label { 13727 text-decoration: underline; 13728 /* 4 */ } 13729 .euiSideNavItemButton.euiSideNavItemButton-isSelected { 13730 color: #1BA9F5; 13731 font-weight: 700; } 13732 .euiSideNavItemButton.euiSideNavItemButton-isSelected .euiSideNavItemButton__label { 13733 text-decoration: underline; 13734 /* 4 */ } 13735 .euiSideNavItemButton:disabled { 13736 cursor: not-allowed; 13737 text-decoration: none; 13738 color: #55575a; } 13739 13740.euiSideNavItemButton__content { 13741 display: -webkit-flex; 13742 display: flex; 13743 -webkit-align-items: center; 13744 align-items: center; } 13745 13746.euiSideNavItemButton__icon { 13747 margin-right: 8px; } 13748 13749.euiSideNavItemButton__labelContainer { 13750 min-width: 0; 13751 /* 3 */ } 13752 13753.euiSideNavItemButton__label { 13754 -webkit-flex-grow: 1; 13755 flex-grow: 1; } 13756 13757.euiSideNavItemButton__label--truncated { 13758 max-width: 100%; 13759 overflow: hidden !important; 13760 text-overflow: ellipsis !important; 13761 white-space: nowrap !important; 13762 word-wrap: normal !important; } 13763 13764.euiSideNavItem--root { 13765 /** 13766 * 1. Create padding around focus area without indenting the item itself. 13767 */ } 13768 .euiSideNavItem--root.euiSideNavItem--rootIcon > .euiSideNavItem__items { 13769 margin-left: 24px; } 13770 .euiSideNavItem--root > .euiSideNavItemButton { 13771 margin-bottom: 8px; 13772 padding: 0; 13773 padding-left: 8px; 13774 /* 1 */ 13775 padding-right: 8px; 13776 /* 1 */ 13777 margin-left: -8px; 13778 /* 1 */ 13779 width: calc(100% + 16px); 13780 /* 1 */ } 13781 .euiSideNavItem--root > .euiSideNavItemButton .euiSideNavItemButton__label { 13782 overflow-wrap: break-word !important; 13783 word-wrap: break-word !important; 13784 word-break: break-word; 13785 color: #DFE5EF; 13786 font-size: 16px; 13787 font-size: 1rem; 13788 line-height: 1.5rem; 13789 font-weight: 600; 13790 letter-spacing: -0.02em; 13791 color: inherit; } 13792 .euiSideNavItem--root > .euiSideNavItem__items { 13793 position: static; 13794 margin-left: 0; } 13795 .euiSideNavItem--root > .euiSideNavItem__items:after { 13796 display: none; } 13797 .euiSideNavItem--root + .euiSideNavItem--root { 13798 margin-top: 32px; } 13799 13800.euiSideNavItem--trunk { 13801 color: #DFE5EF; 13802 /* 2 */ 13803 /** 13804 * 1. Create padding around focus area without indenting the item itself. 13805 */ } 13806 .euiSideNavItem--trunk > .euiSideNavItemButton { 13807 padding-left: 8px; 13808 /* 1 */ 13809 padding-right: 8px; 13810 /* 1 */ 13811 margin-left: -8px; 13812 /* 1 */ 13813 width: calc(100% + 16px); 13814 /* 1 */ } 13815 .euiSideNavItem--trunk > .euiSideNavItem__items { 13816 margin-left: 8px; 13817 width: 100%; } 13818 13819.euiSideNavItem--branch { 13820 /** 13821 * 1. Draw the vertical line to group an expanded item's child items together. 13822 */ 13823 position: relative; 13824 color: #878b95; 13825 /* 2 */ 13826 /** 13827 * 2. Absolutely position the horizontal tick connecting the item to the vertical line. 13828 */ } 13829 .euiSideNavItem--branch::after { 13830 /* 1 */ 13831 position: absolute; 13832 content: ''; 13833 top: 0; 13834 bottom: 0; 13835 width: 1px; 13836 background: #343741; 13837 left: 0; } 13838 .euiSideNavItem--branch:last-of-type::after { 13839 height: 12px; } 13840 .euiSideNavItem--branch > .euiSideNavItemButton { 13841 position: relative; 13842 /* 2 */ 13843 padding-left: 8px; 13844 padding-right: 8px; 13845 /* 2 */ } 13846 .euiSideNavItem--branch > .euiSideNavItemButton:after { 13847 position: absolute; 13848 /* 2 */ 13849 content: ''; 13850 top: 12px; 13851 left: 0; 13852 width: 4px; 13853 height: 1px; 13854 background: #343741; } 13855 .euiSideNavItem--branch > .euiSideNavItem__items { 13856 margin-left: 16px; } 13857 13858.euiSideNavItem--emphasized { 13859 background: rgba(52, 55, 65, 0.3); 13860 color: #DFE5EF; 13861 box-shadow: 100px 0 0 0 rgba(52, 55, 65, 0.3), -100px 0 0 0 rgba(52, 55, 65, 0.3); } 13862 .euiSideNavItem--emphasized > .euiSideNavItemButton { 13863 font-weight: 700; } 13864 .euiSideNavItem--emphasized .euiSideNavItem--emphasized { 13865 background: transparent; 13866 box-shadow: none; } 13867 13868.euiSpacer { 13869 -webkit-flex-shrink: 0; 13870 flex-shrink: 0; } 13871 13872.euiSpacer--xs { 13873 height: 4px; } 13874 13875.euiSpacer--s { 13876 height: 8px; } 13877 13878.euiSpacer--m { 13879 height: 16px; } 13880 13881.euiSpacer--l { 13882 height: 24px; } 13883 13884.euiSpacer--xl { 13885 height: 32px; } 13886 13887.euiSpacer--xxl { 13888 height: 40px; } 13889 13890.euiSearchBar__searchHolder { 13891 min-width: 200px; } 13892 13893@media only screen and (min-width: 768px) and (max-width: 991px) { 13894 .euiSearchBar__filtersHolder { 13895 max-width: calc(100% - 16px); } } 13896 13897@media only screen and (min-width: 992px) and (max-width: 1199px) { 13898 .euiSearchBar__filtersHolder { 13899 max-width: calc(100% - 16px); } } 13900 13901@media only screen and (min-width: 1200px) { 13902 .euiSearchBar__filtersHolder { 13903 max-width: calc(100% - 16px); } } 13904 13905.euiSelectable { 13906 display: -webkit-flex; 13907 display: flex; 13908 -webkit-flex-direction: column; 13909 flex-direction: column; } 13910 13911.euiSelectable-fullHeight { 13912 height: 100%; } 13913 13914.euiSelectableList:focus-within { 13915 -webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important; 13916 animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate !important; } 13917 13918.euiSelectableList-fullHeight { 13919 -webkit-flex-grow: 1; 13920 flex-grow: 1; } 13921 13922.euiSelectableList-bordered { 13923 overflow: hidden; 13924 border: 1px solid #343741; 13925 border-radius: 4px; } 13926 13927.euiSelectableList__list { 13928 -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%); 13929 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%); 13930 scrollbar-color: rgba(152, 162, 179, 0.5) transparent; 13931 scrollbar-width: thin; } 13932 .euiSelectableList__list::-webkit-scrollbar { 13933 width: 16px; 13934 height: 16px; } 13935 .euiSelectableList__list::-webkit-scrollbar-thumb { 13936 background-color: rgba(152, 162, 179, 0.5); 13937 background-clip: content-box; 13938 border-radius: 16px; 13939 border: 6px solid transparent; } 13940 .euiSelectableList__list::-webkit-scrollbar-corner, .euiSelectableList__list::-webkit-scrollbar-track { 13941 background-color: transparent; } 13942 13943.euiSelectableList__groupLabel { 13944 overflow-wrap: break-word !important; 13945 word-wrap: break-word !important; 13946 word-break: break-word; 13947 color: #DFE5EF; 13948 font-size: 12px; 13949 font-size: 0.75rem; 13950 line-height: 1.5rem; 13951 font-weight: 700; 13952 display: -webkit-flex; 13953 display: flex; 13954 -webkit-align-items: center; 13955 align-items: center; 13956 border-bottom: 1px solid #202128; 13957 padding: 4px 12px; } 13958 13959.euiSelectableListItem { 13960 font-size: 14px; 13961 font-size: 0.875rem; 13962 line-height: 1.5; 13963 display: -webkit-inline-flex; 13964 display: inline-flex; 13965 width: 100%; 13966 text-align: left; 13967 color: #DFE5EF; 13968 cursor: pointer; } 13969 .euiSelectableListItem:not(:last-of-type) { 13970 border-bottom: 1px solid #202128; } 13971 .euiSelectableListItem-isFocused:not([aria-disabled='true']), .euiSelectableListItem:hover:not([aria-disabled='true']) { 13972 color: #1BA9F5; 13973 background-color: #052231; } 13974 .euiSelectableListItem-isFocused:not([aria-disabled='true']) .euiSelectableListItem__text, .euiSelectableListItem:hover:not([aria-disabled='true']) .euiSelectableListItem__text { 13975 text-decoration: underline; } 13976 .euiSelectableListItem[aria-disabled='true'] { 13977 color: #535966; 13978 cursor: not-allowed; } 13979 13980.euiSelectableListItem__content { 13981 padding: 4px 12px; 13982 width: 100%; 13983 display: -webkit-flex; 13984 display: flex; 13985 -webkit-align-items: center; 13986 align-items: center; } 13987 13988.euiSelectableListItem__icon, 13989.euiSelectableListItem__prepend { 13990 margin-right: 12px; 13991 -webkit-flex-shrink: 0; 13992 flex-shrink: 0; } 13993 13994.euiSelectableListItem__append { 13995 margin-left: 12px; 13996 -webkit-flex-shrink: 0; 13997 flex-shrink: 0; } 13998 13999.euiSelectableListItem__text { 14000 max-width: 100%; 14001 overflow: hidden !important; 14002 text-overflow: ellipsis !important; 14003 white-space: nowrap !important; 14004 word-wrap: normal !important; 14005 -webkit-flex-grow: 1; 14006 flex-grow: 1; } 14007 14008/** 14009 * 1. Prevent really long input from overflowing the container. 14010 */ 14011.euiSelectableMessage { 14012 padding: 8px; 14013 text-align: center; 14014 word-wrap: break-word; 14015 /* 1 */ 14016 display: -webkit-flex; 14017 display: flex; 14018 -webkit-justify-content: center; 14019 justify-content: center; 14020 -webkit-align-items: center; 14021 align-items: center; } 14022 14023.euiSelectableMessage--bordered { 14024 overflow: hidden; 14025 border: 1px solid #343741; 14026 border-radius: 4px; } 14027 14028.euiHeader--dark .euiSelectableTemplateSitewide .euiFormControlLayout { 14029 background-color: transparent; } 14030 .euiHeader--dark .euiSelectableTemplateSitewide .euiFormControlLayout--group, 14031 .euiHeader--dark .euiSelectableTemplateSitewide .euiFormControlLayout input { 14032 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); } 14033 .euiHeader--dark .euiSelectableTemplateSitewide .euiFormControlLayout:not(:focus-within) { 14034 color: rgba(255, 255, 255, 0.7); } 14035 .euiHeader--dark .euiSelectableTemplateSitewide .euiFormControlLayout:not(:focus-within) input { 14036 color: inherit; 14037 background-color: transparent; } 14038 .euiHeader--dark .euiSelectableTemplateSitewide .euiFormControlLayout:not(:focus-within) input::-webkit-input-placeholder { 14039 color: rgba(255, 255, 255, 0.4); 14040 opacity: 1; } 14041 .euiHeader--dark .euiSelectableTemplateSitewide .euiFormControlLayout:not(:focus-within) input::-moz-placeholder { 14042 color: rgba(255, 255, 255, 0.4); 14043 opacity: 1; } 14044 .euiHeader--dark .euiSelectableTemplateSitewide .euiFormControlLayout:not(:focus-within) input::placeholder { 14045 color: rgba(255, 255, 255, 0.4); 14046 opacity: 1; } 14047 .euiHeader--dark .euiSelectableTemplateSitewide .euiFormControlLayout:not(:focus-within) .euiFormControlLayout__append { 14048 background-color: transparent; 14049 color: inherit; } 14050 14051.euiSelectableTemplateSitewide__listItem .euiSelectableListItem__text { 14052 text-decoration: none !important; } 14053 14054.euiSelectableTemplateSitewide__listItem[class*='-isFocused']:not([aria-disabled='true']) .euiSelectableTemplateSitewide__listItemTitle, .euiSelectableTemplateSitewide__listItem:hover:not([aria-disabled='true']) .euiSelectableTemplateSitewide__listItemTitle { 14055 text-decoration: underline; } 14056 14057.euiSelectableTemplateSitewide__optionMetasList { 14058 display: block; 14059 margin-top: 4px; 14060 font-size: 12px; 14061 color: #7a7f89; } 14062 14063.euiSelectableTemplateSitewide__optionMeta:not(:last-of-type)::after { 14064 content: '•'; 14065 margin: 0 4px; 14066 color: #7a7f89; } 14067 14068.euiSelectableTemplateSitewide__optionMeta--application { 14069 color: #6092C0; 14070 font-weight: 500; } 14071 14072.euiSelectableTemplateSitewide__optionMeta--deployment { 14073 color: #54B399; 14074 font-weight: 500; } 14075 14076.euiSelectableTemplateSitewide__optionMeta--article { 14077 color: #9170B8; 14078 font-weight: 500; } 14079 14080.euiSelectableTemplateSitewide__optionMeta--case { 14081 color: #E7664C; 14082 font-weight: 500; } 14083 14084.euiSelectableTemplateSitewide__optionMeta--platform { 14085 color: #D6BF57; 14086 font-weight: 500; } 14087 14088.euiStat .euiStat__title { 14089 color: #FFF; } 14090 .euiStat .euiStat__title--subdued { 14091 color: #7a7f89; } 14092 .euiStat .euiStat__title--primary { 14093 color: #1BA9F5; } 14094 .euiStat .euiStat__title--secondary { 14095 color: #7DE2D1; } 14096 .euiStat .euiStat__title--success { 14097 color: #7DE2D1; } 14098 .euiStat .euiStat__title--danger { 14099 color: #F66; } 14100 .euiStat .euiStat__title--accent { 14101 color: #F990C0; } 14102 14103.euiStat .euiStat__title-isLoading { 14104 -webkit-animation: euiStatPulse 1.5s infinite ease-in-out; 14105 animation: euiStatPulse 1.5s infinite ease-in-out; } 14106 14107.euiStat.euiStat--leftAligned { 14108 text-align: left; 14109 -webkit-align-items: flex-start; 14110 align-items: flex-start; } 14111 14112.euiStat.euiStat--centerAligned { 14113 text-align: center; 14114 -webkit-align-items: center; 14115 align-items: center; } 14116 14117.euiStat.euiStat--rightAligned { 14118 text-align: right; 14119 -webkit-align-items: flex-end; 14120 align-items: flex-end; } 14121 14122@-webkit-keyframes euiStatPulse { 14123 0% { 14124 opacity: 1; } 14125 50% { 14126 opacity: .25; } 14127 100% { 14128 opacity: 1; } } 14129 14130@keyframes euiStatPulse { 14131 0% { 14132 opacity: 1; } 14133 50% { 14134 opacity: .25; } 14135 100% { 14136 opacity: 1; } } 14137 14138.euiStepNumber { 14139 width: 32px; 14140 height: 32px; 14141 display: inline-block; 14142 line-height: 32px; 14143 border-radius: 32px; 14144 text-align: center; 14145 color: #1D1E24; 14146 background-color: #1BA9F5; 14147 font-size: 16px; 14148 font-weight: 500; } 14149 .euiStepNumber .euiStepNumber__icon { 14150 vertical-align: middle; 14151 position: relative; 14152 top: -2px; } 14153 .euiStepNumber--small { 14154 width: 24px; 14155 height: 24px; 14156 display: inline-block; 14157 line-height: 24px; 14158 border-radius: 24px; 14159 text-align: center; 14160 color: #1D1E24; 14161 background-color: #1BA9F5; 14162 font-size: 12px; 14163 font-weight: 500; } 14164 .euiStepNumber--small .euiStepNumber__icon { 14165 top: -1px; } 14166 .euiStepNumber--complete .euiStepNumber__icon { 14167 stroke: currentColor; 14168 stroke-width: .5px; } 14169 @media screen and (prefers-reduced-motion: no-preference) { 14170 .euiStepNumber--complete, .euiStepNumber--warning, .euiStepNumber--danger { 14171 -webkit-animation: euiGrow 150ms cubic-bezier(0.34, 1.61, 0.7, 1); 14172 animation: euiGrow 150ms cubic-bezier(0.34, 1.61, 0.7, 1); } } 14173 .euiStepNumber--loading { 14174 background: transparent; } 14175 .euiStepNumber.euiStepNumber-isHollow { 14176 background-color: transparent; 14177 border: 2px solid #1BA9F5; } 14178 .euiStepNumber.euiStepNumber-isHollow .euiStepNumber__number { 14179 display: none; } 14180 .euiStepNumber--warning { 14181 color: #FFCE7A; 14182 background-color: #4d3e25; } 14183 .euiStepNumber--danger { 14184 color: #F66; 14185 background-color: #4d1f1f; } 14186 .euiStepNumber--disabled { 14187 color: #98A2B3; 14188 background-color: #2e3136; } 14189 .euiStepNumber--incomplete { 14190 color: #98A2B3; 14191 background-color: #2e3136; } 14192 14193/** 14194 * 1. Ensure that the step number vertically aligns with the title text 14195 */ 14196.euiStep:not(:last-of-type) { 14197 background-image: linear-gradient(to right, transparent 0, transparent 15px, #343741 15px, #343741 17px, transparent 17px, transparent 100%); 14198 background-repeat: no-repeat; 14199 background-position: left 40px; } 14200 14201.euiStep--small:not(:last-of-type) { 14202 background-position: left -4px top 32px; } 14203 14204.euiStep--small .euiStep__content { 14205 padding-left: 28px; 14206 margin-left: 12px; } 14207 14208.euiStep__titleWrapper { 14209 display: -webkit-flex; 14210 display: flex; } 14211 14212.euiStep__circle { 14213 -webkit-flex-shrink: 0; 14214 flex-shrink: 0; 14215 margin-right: 16px; 14216 vertical-align: top; 14217 /* 1 */ } 14218 14219.euiStep__title { 14220 font-weight: 500; } 14221 14222.euiStep__content { 14223 padding: 16px 16px 32px; 14224 margin: 8px 0; 14225 padding-left: 32px; 14226 margin-left: 16px; } 14227 14228.euiSubSteps { 14229 padding: 16px; 14230 background-color: #25262E; 14231 margin-bottom: 16px; } 14232 .euiSubSteps > *:last-child { 14233 margin-bottom: 0; } 14234 .euiText .euiSubSteps ol, 14235 .euiSubSteps ol { 14236 list-style-type: lower-alpha; } 14237 14238/** 14239 * 1. Ensure the connecting lines stays behind the number 14240 * 2. Make each step the same width 14241 * 3. Make the content of each step align to the top, even if the steps are of varying heights, 14242 * e.g. due to some of their titles wrapping to multiple lines 14243 */ 14244.euiStepsHorizontal { 14245 display: -webkit-flex; 14246 display: flex; 14247 -webkit-align-items: stretch; 14248 align-items: stretch; 14249 background: rgba(37, 38, 46, 0.5); } 14250 14251.euiStepHorizontal__item { 14252 -webkit-flex-grow: 1; 14253 flex-grow: 1; 14254 /* 2 */ 14255 -webkit-flex-basis: 0%; 14256 flex-basis: 0%; 14257 /* 2 */ } 14258 .euiStepHorizontal__item:first-of-type > .euiStepHorizontal::before, 14259 .euiStepHorizontal__item:last-of-type > .euiStepHorizontal::after { 14260 display: none; } 14261 14262.euiStepHorizontal { 14263 padding: 24px 16px 16px; 14264 display: -webkit-flex; 14265 display: flex; 14266 /* 3 */ 14267 -webkit-flex-direction: column; 14268 flex-direction: column; 14269 /* 3 */ 14270 -webkit-align-items: center; 14271 align-items: center; 14272 /* 3 */ 14273 -webkit-justify-content: flex-start; 14274 justify-content: flex-start; 14275 /* 3 */ 14276 cursor: pointer; 14277 position: relative; 14278 width: 100%; } 14279 .euiStepHorizontal:focus:not(.euiStepHorizontal-isDisabled) .euiStepHorizontal__title, .euiStepHorizontal:hover:not(.euiStepHorizontal-isDisabled) .euiStepHorizontal__title { 14280 text-decoration: underline; } 14281 .euiStepHorizontal:focus:not(.euiStepHorizontal-isDisabled) { 14282 outline: none; } 14283 .euiStepHorizontal:focus:not(.euiStepHorizontal-isDisabled) .euiStepHorizontal__number { 14284 -webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimateLarge !important; 14285 animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimateLarge !important; } 14286 .euiStepHorizontal.euiStepHorizontal-isDisabled { 14287 cursor: not-allowed; } 14288 .euiStepHorizontal::before, .euiStepHorizontal::after { 14289 content: ''; 14290 position: absolute; 14291 width: calc(50% - 16px); 14292 height: 1px; 14293 top: 40px; 14294 background-color: #343741; 14295 z-index: 0; 14296 /* 1 */ } 14297 .euiStepHorizontal::before { 14298 left: 0; } 14299 .euiStepHorizontal::after { 14300 right: 0; } 14301 14302.euiStepHorizontal__number { 14303 position: relative; 14304 /* 1 */ 14305 z-index: 1; 14306 /* 1 */ 14307 transition: all 150ms ease-in-out; } 14308 14309.euiStepHorizontal__title { 14310 overflow-wrap: break-word !important; 14311 word-wrap: break-word !important; 14312 word-break: break-word; 14313 color: #DFE5EF; 14314 font-size: 16px; 14315 font-size: 1rem; 14316 line-height: 1.5rem; 14317 font-weight: 600; 14318 letter-spacing: -0.02em; 14319 margin-top: 8px; 14320 font-weight: 400; 14321 text-align: center; } 14322 .euiStepHorizontal-isDisabled .euiStepHorizontal__title { 14323 color: #98A2B3; } 14324 14325.euiStepHorizontal-isComplete::before, .euiStepHorizontal-isComplete::after { 14326 height: 2px; 14327 background-color: #1BA9F5; } 14328 14329.euiStepHorizontal-isSelected .euiStepHorizontal__number:not([class*='danger']):not([class*='warning']):not([class*='loading']) { 14330 box-shadow: 0 2px 2px -1px rgba(51, 162, 221, 0.3); } 14331 14332.euiStepHorizontal-isSelected::before { 14333 height: 2px; 14334 background-color: #1BA9F5; } 14335 14336@media only screen and (max-width: 574px) { 14337 .euiStepHorizontal { 14338 padding-top: 16px; } 14339 .euiStepHorizontal::before, .euiStepHorizontal::after { 14340 top: 32px; } 14341 .euiStepHorizontal__title { 14342 display: none; } } 14343 14344@media only screen and (min-width: 575px) and (max-width: 767px) { 14345 .euiStepHorizontal { 14346 padding-top: 16px; } 14347 .euiStepHorizontal::before, .euiStepHorizontal::after { 14348 top: 32px; } 14349 .euiStepHorizontal__title { 14350 display: none; } } 14351 14352.euiSuggestItem { 14353 display: -webkit-flex; 14354 display: flex; 14355 -webkit-flex-grow: 1; 14356 flex-grow: 1; 14357 -webkit-align-items: center; 14358 align-items: center; 14359 font-size: 12px; 14360 white-space: nowrap; } 14361 .euiSuggestItem.euiSuggestItem-isClickable { 14362 width: 100%; 14363 text-align: left; } 14364 .euiSuggestItem.euiSuggestItem-isClickable:hover, .euiSuggestItem.euiSuggestItem-isClickable:focus { 14365 cursor: pointer; 14366 background-color: #25262E; } 14367 .euiSuggestItem.euiSuggestItem-isClickable:hover .euiSuggestItem__type, .euiSuggestItem.euiSuggestItem-isClickable:focus .euiSuggestItem__type { 14368 color: #D4DAE5; } 14369 .euiSuggestItem .euiSuggestItem__type--tint0 { 14370 background-color: #19362e; 14371 color: #54B399; } 14372 .euiSuggestItem .euiSuggestItem__type--tint1 { 14373 background-color: #1d2c3a; 14374 color: #6897c3; } 14375 .euiSuggestItem .euiSuggestItem__type--tint2 { 14376 background-color: #3f1d28; 14377 color: #d77092; } 14378 .euiSuggestItem .euiSuggestItem__type--tint3 { 14379 background-color: #2c2237; 14380 color: #a184c2; } 14381 .euiSuggestItem .euiSuggestItem__type--tint4 { 14382 background-color: #3d2b34; 14383 color: #CA8EAE; } 14384 .euiSuggestItem .euiSuggestItem__type--tint5 { 14385 background-color: #40391a; 14386 color: #D6BF57; } 14387 .euiSuggestItem .euiSuggestItem__type--tint6 { 14388 background-color: #383229; 14389 color: #B9A888; } 14390 .euiSuggestItem .euiSuggestItem__type--tint7 { 14391 background-color: #412a15; 14392 color: #DA8B45; } 14393 .euiSuggestItem .euiSuggestItem__type--tint8 { 14394 background-color: #331e1a; 14395 color: #b67b6e; } 14396 .euiSuggestItem .euiSuggestItem__type--tint9 { 14397 background-color: #451f17; 14398 color: #e86e55; } 14399 .euiSuggestItem .euiSuggestItem__type--tint10 { 14400 background-color: #2e3136; 14401 color: #98A2B3; } 14402 .euiSuggestItem .euiSuggestItem__label, 14403 .euiSuggestItem .euiSuggestItem__type, 14404 .euiSuggestItem .euiSuggestItem__description { 14405 -webkit-flex-grow: 0; 14406 flex-grow: 0; 14407 display: -webkit-flex; 14408 display: flex; 14409 -webkit-flex-direction: column; 14410 flex-direction: column; } 14411 .euiSuggestItem .euiSuggestItem__type { 14412 position: relative; 14413 -webkit-flex-shrink: 0; 14414 flex-shrink: 0; 14415 -webkit-flex-basis: auto; 14416 flex-basis: auto; 14417 width: 32px; 14418 height: 32px; 14419 text-align: center; 14420 overflow: hidden; 14421 padding: 4px; 14422 -webkit-justify-content: center; 14423 justify-content: center; 14424 -webkit-align-items: center; 14425 align-items: center; } 14426 .euiSuggestItem .euiSuggestItem__label { 14427 max-width: 100%; 14428 overflow: hidden !important; 14429 text-overflow: ellipsis !important; 14430 white-space: nowrap !important; 14431 word-wrap: normal !important; 14432 font-family: "Roboto Mono", Consolas, Menlo, Courier, monospace; 14433 overflow: hidden; 14434 text-overflow: ellipsis; 14435 padding: 4px 8px; 14436 color: #DFE5EF; 14437 display: block; } 14438 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width20 { 14439 -webkit-flex-basis: 20%; 14440 flex-basis: 20%; 14441 min-width: 20%; } 14442 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width21 { 14443 -webkit-flex-basis: 21%; 14444 flex-basis: 21%; 14445 min-width: 21%; } 14446 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width22 { 14447 -webkit-flex-basis: 22%; 14448 flex-basis: 22%; 14449 min-width: 22%; } 14450 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width23 { 14451 -webkit-flex-basis: 23%; 14452 flex-basis: 23%; 14453 min-width: 23%; } 14454 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width24 { 14455 -webkit-flex-basis: 24%; 14456 flex-basis: 24%; 14457 min-width: 24%; } 14458 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width25 { 14459 -webkit-flex-basis: 25%; 14460 flex-basis: 25%; 14461 min-width: 25%; } 14462 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width26 { 14463 -webkit-flex-basis: 26%; 14464 flex-basis: 26%; 14465 min-width: 26%; } 14466 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width27 { 14467 -webkit-flex-basis: 27%; 14468 flex-basis: 27%; 14469 min-width: 27%; } 14470 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width28 { 14471 -webkit-flex-basis: 28%; 14472 flex-basis: 28%; 14473 min-width: 28%; } 14474 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width29 { 14475 -webkit-flex-basis: 29%; 14476 flex-basis: 29%; 14477 min-width: 29%; } 14478 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width30 { 14479 -webkit-flex-basis: 30%; 14480 flex-basis: 30%; 14481 min-width: 30%; } 14482 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width31 { 14483 -webkit-flex-basis: 31%; 14484 flex-basis: 31%; 14485 min-width: 31%; } 14486 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width32 { 14487 -webkit-flex-basis: 32%; 14488 flex-basis: 32%; 14489 min-width: 32%; } 14490 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width33 { 14491 -webkit-flex-basis: 33%; 14492 flex-basis: 33%; 14493 min-width: 33%; } 14494 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width34 { 14495 -webkit-flex-basis: 34%; 14496 flex-basis: 34%; 14497 min-width: 34%; } 14498 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width35 { 14499 -webkit-flex-basis: 35%; 14500 flex-basis: 35%; 14501 min-width: 35%; } 14502 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width36 { 14503 -webkit-flex-basis: 36%; 14504 flex-basis: 36%; 14505 min-width: 36%; } 14506 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width37 { 14507 -webkit-flex-basis: 37%; 14508 flex-basis: 37%; 14509 min-width: 37%; } 14510 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width38 { 14511 -webkit-flex-basis: 38%; 14512 flex-basis: 38%; 14513 min-width: 38%; } 14514 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width39 { 14515 -webkit-flex-basis: 39%; 14516 flex-basis: 39%; 14517 min-width: 39%; } 14518 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width40 { 14519 -webkit-flex-basis: 40%; 14520 flex-basis: 40%; 14521 min-width: 40%; } 14522 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width41 { 14523 -webkit-flex-basis: 41%; 14524 flex-basis: 41%; 14525 min-width: 41%; } 14526 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width42 { 14527 -webkit-flex-basis: 42%; 14528 flex-basis: 42%; 14529 min-width: 42%; } 14530 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width43 { 14531 -webkit-flex-basis: 43%; 14532 flex-basis: 43%; 14533 min-width: 43%; } 14534 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width44 { 14535 -webkit-flex-basis: 44%; 14536 flex-basis: 44%; 14537 min-width: 44%; } 14538 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width45 { 14539 -webkit-flex-basis: 45%; 14540 flex-basis: 45%; 14541 min-width: 45%; } 14542 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width46 { 14543 -webkit-flex-basis: 46%; 14544 flex-basis: 46%; 14545 min-width: 46%; } 14546 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width47 { 14547 -webkit-flex-basis: 47%; 14548 flex-basis: 47%; 14549 min-width: 47%; } 14550 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width48 { 14551 -webkit-flex-basis: 48%; 14552 flex-basis: 48%; 14553 min-width: 48%; } 14554 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width49 { 14555 -webkit-flex-basis: 49%; 14556 flex-basis: 49%; 14557 min-width: 49%; } 14558 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width50 { 14559 -webkit-flex-basis: 50%; 14560 flex-basis: 50%; 14561 min-width: 50%; } 14562 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width51 { 14563 -webkit-flex-basis: 51%; 14564 flex-basis: 51%; 14565 min-width: 51%; } 14566 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width52 { 14567 -webkit-flex-basis: 52%; 14568 flex-basis: 52%; 14569 min-width: 52%; } 14570 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width53 { 14571 -webkit-flex-basis: 53%; 14572 flex-basis: 53%; 14573 min-width: 53%; } 14574 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width54 { 14575 -webkit-flex-basis: 54%; 14576 flex-basis: 54%; 14577 min-width: 54%; } 14578 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width55 { 14579 -webkit-flex-basis: 55%; 14580 flex-basis: 55%; 14581 min-width: 55%; } 14582 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width56 { 14583 -webkit-flex-basis: 56%; 14584 flex-basis: 56%; 14585 min-width: 56%; } 14586 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width57 { 14587 -webkit-flex-basis: 57%; 14588 flex-basis: 57%; 14589 min-width: 57%; } 14590 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width58 { 14591 -webkit-flex-basis: 58%; 14592 flex-basis: 58%; 14593 min-width: 58%; } 14594 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width59 { 14595 -webkit-flex-basis: 59%; 14596 flex-basis: 59%; 14597 min-width: 59%; } 14598 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width60 { 14599 -webkit-flex-basis: 60%; 14600 flex-basis: 60%; 14601 min-width: 60%; } 14602 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width61 { 14603 -webkit-flex-basis: 61%; 14604 flex-basis: 61%; 14605 min-width: 61%; } 14606 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width62 { 14607 -webkit-flex-basis: 62%; 14608 flex-basis: 62%; 14609 min-width: 62%; } 14610 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width63 { 14611 -webkit-flex-basis: 63%; 14612 flex-basis: 63%; 14613 min-width: 63%; } 14614 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width64 { 14615 -webkit-flex-basis: 64%; 14616 flex-basis: 64%; 14617 min-width: 64%; } 14618 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width65 { 14619 -webkit-flex-basis: 65%; 14620 flex-basis: 65%; 14621 min-width: 65%; } 14622 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width66 { 14623 -webkit-flex-basis: 66%; 14624 flex-basis: 66%; 14625 min-width: 66%; } 14626 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width67 { 14627 -webkit-flex-basis: 67%; 14628 flex-basis: 67%; 14629 min-width: 67%; } 14630 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width68 { 14631 -webkit-flex-basis: 68%; 14632 flex-basis: 68%; 14633 min-width: 68%; } 14634 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width69 { 14635 -webkit-flex-basis: 69%; 14636 flex-basis: 69%; 14637 min-width: 69%; } 14638 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width70 { 14639 -webkit-flex-basis: 70%; 14640 flex-basis: 70%; 14641 min-width: 70%; } 14642 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width71 { 14643 -webkit-flex-basis: 71%; 14644 flex-basis: 71%; 14645 min-width: 71%; } 14646 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width72 { 14647 -webkit-flex-basis: 72%; 14648 flex-basis: 72%; 14649 min-width: 72%; } 14650 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width73 { 14651 -webkit-flex-basis: 73%; 14652 flex-basis: 73%; 14653 min-width: 73%; } 14654 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width74 { 14655 -webkit-flex-basis: 74%; 14656 flex-basis: 74%; 14657 min-width: 74%; } 14658 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width75 { 14659 -webkit-flex-basis: 75%; 14660 flex-basis: 75%; 14661 min-width: 75%; } 14662 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width76 { 14663 -webkit-flex-basis: 76%; 14664 flex-basis: 76%; 14665 min-width: 76%; } 14666 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width77 { 14667 -webkit-flex-basis: 77%; 14668 flex-basis: 77%; 14669 min-width: 77%; } 14670 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width78 { 14671 -webkit-flex-basis: 78%; 14672 flex-basis: 78%; 14673 min-width: 78%; } 14674 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width79 { 14675 -webkit-flex-basis: 79%; 14676 flex-basis: 79%; 14677 min-width: 79%; } 14678 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width80 { 14679 -webkit-flex-basis: 80%; 14680 flex-basis: 80%; 14681 min-width: 80%; } 14682 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width81 { 14683 -webkit-flex-basis: 81%; 14684 flex-basis: 81%; 14685 min-width: 81%; } 14686 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width82 { 14687 -webkit-flex-basis: 82%; 14688 flex-basis: 82%; 14689 min-width: 82%; } 14690 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width83 { 14691 -webkit-flex-basis: 83%; 14692 flex-basis: 83%; 14693 min-width: 83%; } 14694 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width84 { 14695 -webkit-flex-basis: 84%; 14696 flex-basis: 84%; 14697 min-width: 84%; } 14698 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width85 { 14699 -webkit-flex-basis: 85%; 14700 flex-basis: 85%; 14701 min-width: 85%; } 14702 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width86 { 14703 -webkit-flex-basis: 86%; 14704 flex-basis: 86%; 14705 min-width: 86%; } 14706 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width87 { 14707 -webkit-flex-basis: 87%; 14708 flex-basis: 87%; 14709 min-width: 87%; } 14710 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width88 { 14711 -webkit-flex-basis: 88%; 14712 flex-basis: 88%; 14713 min-width: 88%; } 14714 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width89 { 14715 -webkit-flex-basis: 89%; 14716 flex-basis: 89%; 14717 min-width: 89%; } 14718 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__label--width90 { 14719 -webkit-flex-basis: 90%; 14720 flex-basis: 90%; 14721 min-width: 90%; } 14722 .euiSuggestItem .euiSuggestItem__label.euiSuggestItem__labelDisplay--expand { 14723 -webkit-flex-basis: auto; 14724 flex-basis: auto; 14725 -webkit-flex-shrink: 1; 14726 flex-shrink: 1; } 14727 .euiSuggestItem .euiSuggestItem__description { 14728 color: #98A2B3; 14729 -webkit-flex-basis: auto; 14730 flex-basis: auto; 14731 padding-top: 2px; 14732 display: block; } 14733 .euiSuggestItem .euiSuggestItem__description.euiSuggestItem__description--wrap { 14734 overflow-wrap: break-word !important; 14735 word-wrap: break-word !important; 14736 word-break: break-word; 14737 white-space: normal; 14738 line-height: 14px; } 14739 .euiSuggestItem .euiSuggestItem__description.euiSuggestItem__description--truncate { 14740 max-width: 100%; 14741 overflow: hidden !important; 14742 text-overflow: ellipsis !important; 14743 white-space: nowrap !important; 14744 word-wrap: normal !important; 14745 line-height: 1.5; } 14746 .euiSuggestItem .euiSuggestItem__description:empty { 14747 -webkit-flex-grow: 0; 14748 flex-grow: 0; 14749 margin-left: 0; } 14750 14751.euiSuggestInput__statusIcon { 14752 background-color: transparent !important; } 14753 14754/** 14755 * NOTE: table-layout: fixed causes a bug in IE11 and Edge (see #9929). It also prevents us from 14756 * specifying a column width, e.g. the checkbox column. 14757 */ 14758.euiTable { 14759 font-size: 14px; 14760 font-size: 0.875rem; 14761 line-height: 1.5; 14762 font-feature-settings: "calt" 1, "kern" 1, "liga" 1, "tnum" 1; 14763 width: 100%; 14764 table-layout: fixed; 14765 border: none; 14766 border-collapse: collapse; 14767 background-color: #1D1E24; } 14768 .euiTable.euiTable--auto { 14769 table-layout: auto; } 14770 14771.euiTableCaption { 14772 position: relative; } 14773 14774@media only screen and (min-width: 768px) and (max-width: 991px) { 14775 .euiTable--compressed .euiTableCellContent { 14776 font-size: 12px; 14777 font-size: 0.75rem; 14778 line-height: 1.5; 14779 padding: 4px; } } 14780 14781@media only screen and (min-width: 992px) and (max-width: 1199px) { 14782 .euiTable--compressed .euiTableCellContent { 14783 font-size: 12px; 14784 font-size: 0.75rem; 14785 line-height: 1.5; 14786 padding: 4px; } } 14787 14788@media only screen and (min-width: 1200px) { 14789 .euiTable--compressed .euiTableCellContent { 14790 font-size: 12px; 14791 font-size: 0.75rem; 14792 line-height: 1.5; 14793 padding: 4px; } } 14794 14795.euiTableFooterCell, 14796.euiTableHeaderCell { 14797 vertical-align: middle; 14798 border-top: 1px solid #343741; 14799 border-bottom: 1px solid #343741; 14800 font-weight: inherit; 14801 text-align: inherit; 14802 overflow-wrap: break-word !important; 14803 word-wrap: break-word !important; 14804 word-break: break-word; 14805 color: #DFE5EF; 14806 font-size: 14px; 14807 font-size: 0.875rem; 14808 line-height: 1.5rem; 14809 font-weight: 700; 14810 font-weight: 500; 14811 border-top: none; } 14812 .euiTableFooterCell .euiTableHeaderButton, 14813 .euiTableHeaderCell .euiTableHeaderButton { 14814 text-align: left; 14815 font-weight: 500; } 14816 .euiTableFooterCell .euiTableCellContent__text, 14817 .euiTableHeaderCell .euiTableCellContent__text { 14818 font-size: 12px; 14819 font-size: 0.75rem; 14820 line-height: 1.5; 14821 font-weight: 600; } 14822 14823.euiTableHeaderButton { 14824 font-size: 14px; 14825 font-size: 0.875rem; 14826 line-height: 1.5; 14827 color: inherit; 14828 width: 100%; } 14829 .euiTableHeaderButton:hover .euiTableCellContent__text, .euiTableHeaderButton:focus .euiTableCellContent__text { 14830 text-decoration: underline; 14831 color: #1BA9F5; } 14832 .euiTableHeaderButton:hover .euiTableSortIcon, .euiTableHeaderButton:focus .euiTableSortIcon { 14833 fill: #1BA9F5; } 14834 14835.euiTableSortIcon { 14836 margin-left: 4px; 14837 -webkit-flex-shrink: 0; 14838 flex-shrink: 0; } 14839 .euiTableHeaderButton-isSorted .euiTableSortIcon { 14840 fill: #DFE5EF; } 14841 14842.euiTableHeaderCellCheckbox { 14843 vertical-align: middle; 14844 border-top: 1px solid #343741; 14845 border-bottom: 1px solid #343741; 14846 font-weight: inherit; 14847 text-align: inherit; 14848 width: 32px; 14849 vertical-align: middle; 14850 border-top: none; } 14851 14852.euiTableRow:hover { 14853 background-color: #1e1e25; } 14854 14855.euiTableRow.euiTableRow-isClickable:hover { 14856 background-color: rgba(27, 169, 245, 0.05); 14857 cursor: pointer; } 14858 14859.euiTableRow.euiTableRow-isClickable:focus { 14860 background-color: rgba(27, 169, 245, 0.1); } 14861 14862.euiTableRow.euiTableRow-isExpandedRow { 14863 background-color: #1e1e25; } 14864 .euiTableRow.euiTableRow-isExpandedRow.euiTableRow-isSelectable .euiTableCellContent { 14865 padding-left: 40px; } 14866 14867.euiTableRow.euiTableRow-isSelected { 14868 background-color: #052231; } 14869 .euiTableRow.euiTableRow-isSelected + .euiTableRow.euiTableRow-isExpandedRow .euiTableRowCell { 14870 background-color: #052231; } 14871 .euiTableRow.euiTableRow-isSelected:hover, 14872 .euiTableRow.euiTableRow-isSelected:hover + .euiTableRow.euiTableRow-isExpandedRow .euiTableRowCell { 14873 background-color: #051f2c; } 14874 14875.euiTableRowCell { 14876 vertical-align: middle; 14877 border-top: 1px solid #343741; 14878 border-bottom: 1px solid #343741; 14879 font-weight: inherit; 14880 text-align: inherit; 14881 color: #DFE5EF; } 14882 .euiTableRowCell.euiTableRowCell--isMobileHeader { 14883 display: none; } 14884 14885.euiTableRowCellCheckbox { 14886 vertical-align: middle; 14887 border-top: 1px solid #343741; 14888 border-bottom: 1px solid #343741; 14889 font-weight: inherit; 14890 text-align: inherit; 14891 width: 32px; 14892 vertical-align: middle; } 14893 14894.euiTableFooterCell { 14895 background-color: #25262E; 14896 border-bottom: none; } 14897 14898/** 14899 * 1. Vertically align all children. 14900 * 2. The padding on this div allows the ellipsis to show if the content is truncated. If 14901 * the padding was on the cell, the ellipsis would be cropped. 14902 * 4. Prevent very long single words (e.g. the name of a field in a document) from overflowing 14903 * the cell. 14904 */ 14905.euiTableCellContent { 14906 overflow: hidden; 14907 /* 4 */ 14908 display: -webkit-flex; 14909 display: flex; 14910 -webkit-align-items: center; 14911 align-items: center; 14912 /* 1 */ 14913 padding: 8px; 14914 /* 2 */ } 14915 14916.euiTableCellContent__text { 14917 overflow-wrap: break-word !important; 14918 word-wrap: break-word !important; 14919 word-break: break-word; 14920 /* 4 */ 14921 min-width: 0; 14922 text-overflow: ellipsis; } 14923 14924.euiTableCellContent--alignRight { 14925 -webkit-justify-content: flex-end; 14926 justify-content: flex-end; 14927 text-align: right; } 14928 14929.euiTableCellContent--alignCenter { 14930 -webkit-justify-content: center; 14931 justify-content: center; 14932 text-align: center; } 14933 14934.euiTableHeaderCell, 14935.euiTableFooterCell, 14936.euiTableCellContent--truncateText { 14937 max-width: 100%; 14938 overflow: hidden !important; 14939 text-overflow: ellipsis !important; 14940 white-space: nowrap !important; 14941 word-wrap: normal !important; } 14942 .euiTableHeaderCell .euiTableCellContent__text, 14943 .euiTableFooterCell .euiTableCellContent__text, 14944 .euiTableCellContent--truncateText .euiTableCellContent__text { 14945 overflow: hidden; } 14946 14947.euiTableCellContent--overflowingContent { 14948 overflow: visible; 14949 white-space: normal; 14950 word-break: break-all; 14951 word-break: break-word; } 14952 14953.euiTableCellContent--showOnHover > *:not(:first-child) { 14954 margin-left: 8px; } 14955 14956.euiTableRow-hasActions .euiTableCellContent--showOnHover .euiTableCellContent__hoverItem { 14957 -webkit-flex-shrink: 0; 14958 flex-shrink: 0; 14959 opacity: .7; 14960 -webkit-filter: grayscale(100%); 14961 filter: grayscale(100%); 14962 transition: opacity 250ms cubic-bezier(0.694, 0.0482, 0.335, 1), -webkit-filter 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); 14963 transition: opacity 250ms cubic-bezier(0.694, 0.0482, 0.335, 1), filter 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); 14964 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); } 14965 14966.euiTableRow-hasActions .euiTableCellContent--showOnHover .expandedItemActions__completelyHide, 14967.euiTableRow-hasActions .euiTableCellContent--showOnHover .expandedItemActions__completelyHide:disabled, 14968.euiTableRow-hasActions .euiTableCellContent--showOnHover .expandedItemActions__completelyHide:disabled:hover, 14969.euiTableRow-hasActions .euiTableCellContent--showOnHover .expandedItemActions__completelyHide:disabled:focus, 14970.euiTableRow:hover .euiTableRow-hasActions .euiTableCellContent--showOnHover .expandedItemActions__completelyHide:disabled { 14971 -webkit-filter: grayscale(0%); 14972 filter: grayscale(0%); 14973 opacity: 0; } 14974 14975.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 { 14976 opacity: 1; 14977 -webkit-filter: grayscale(0%); 14978 filter: grayscale(0%); } 14979 14980.euiTableRow-isExpandedRow .euiTableCellContent { 14981 overflow: hidden; 14982 -webkit-animation: 250ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards growExpandedRow; 14983 animation: 250ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards growExpandedRow; } 14984 14985@-webkit-keyframes growExpandedRow { 14986 0% { 14987 max-height: 0; } 14988 99% { 14989 max-height: 100vh; } 14990 100% { 14991 max-height: unset; } } 14992 14993@keyframes growExpandedRow { 14994 0% { 14995 max-height: 0; } 14996 99% { 14997 max-height: 100vh; } 14998 100% { 14999 max-height: unset; } } 15000 15001.euiTableRowCell__mobileHeader { 15002 display: none; } 15003 15004@media only screen and (max-width: 574px) { 15005 .euiTableRowCell--hideForMobile { 15006 display: none !important; } } 15007 15008@media only screen and (min-width: 575px) and (max-width: 767px) { 15009 .euiTableRowCell--hideForMobile { 15010 display: none !important; } } 15011 15012@media only screen and (min-width: 768px) and (max-width: 991px) { 15013 .euiTableRowCell--hideForDesktop { 15014 display: none !important; } } 15015 15016@media only screen and (min-width: 992px) and (max-width: 1199px) { 15017 .euiTableRowCell--hideForDesktop { 15018 display: none !important; } } 15019 15020@media only screen and (min-width: 1200px) { 15021 .euiTableRowCell--hideForDesktop { 15022 display: none !important; } } 15023 15024@media only screen and (max-width: 574px) { 15025 .euiTable.euiTable--responsive thead { 15026 display: none; } 15027 .euiTable.euiTable--responsive tfoot { 15028 display: none; } 15029 .euiTable.euiTable--responsive .euiTableRowCell__mobileHeader { 15030 max-width: 100%; 15031 overflow: hidden !important; 15032 text-overflow: ellipsis !important; 15033 white-space: nowrap !important; 15034 word-wrap: normal !important; 15035 font-size: 11px; 15036 font-size: 0.6875rem; 15037 display: block; 15038 color: #98A2B3; 15039 padding: 8px; 15040 padding-bottom: 0; 15041 margin-bottom: -8px; 15042 min-height: 24px; } 15043 .euiTableRowCell:only-child .euiTable.euiTable--responsive .euiTableRowCell__mobileHeader { 15044 min-height: 0; } 15045 .euiTable.euiTable--responsive .euiTableRowCell--enlargeForMobile { 15046 font-size: 16px; 15047 font-size: 1rem; 15048 line-height: 1.5; } 15049 .euiTable.euiTable--responsive .euiTableRowCell--isMobileFullWidth { 15050 width: 100%; } 15051 .euiTable.euiTable--responsive .euiTableRowCell--isMobileFullWidth .euiTableCellContent--alignCenter { 15052 -webkit-justify-content: center; 15053 justify-content: center; 15054 text-align: center; } 15055 .euiTable.euiTable--responsive .euiTableRow { 15056 background-color: #1D1E24; 15057 border: 1px solid #343741; 15058 border-radius: 4px; 15059 -webkit-flex-grow: 1; 15060 flex-grow: 1; } 15061 .euiTable.euiTable--responsive .euiTableRow.euiTableRow--flexGrowZero { 15062 -webkit-flex-grow: 0; 15063 flex-grow: 0; } 15064 .euiTable.euiTable--responsive .euiTableRow.euiTableRow--noBorder { 15065 border: none; } 15066 .euiTable.euiTable--responsive .euiTableRow.euiTableRow--hasShadow { 15067 box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3), 0 1px 5px -2px rgba(0, 0, 0, 0.3); 15068 border: 1px solid #343741; } 15069 .euiTable.euiTable--responsive .euiTableRow.euiTableRow--isClickable { 15070 transition: all 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); } 15071 .euiTable.euiTable--responsive .euiTableRow.euiTableRow--isClickable:enabled { 15072 display: block; 15073 width: 100%; 15074 text-align: left; } 15075 .euiTable.euiTable--responsive .euiTableRow.euiTableRow--isClickable:hover, .euiTable.euiTable--responsive .euiTableRow.euiTableRow--isClickable:focus { 15076 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 2px 2px -1px rgba(0, 0, 0, 0.3); 15077 -webkit-transform: translateY(-2px); 15078 transform: translateY(-2px); 15079 cursor: pointer; } 15080 .euiTable.euiTable--responsive .euiTableRow.euiTableRow--borderRadiusNone { 15081 border-radius: 0; } 15082 .euiTable.euiTable--responsive .euiTableRow.euiTableRow--borderRadiusMedium { 15083 border-radius: 4px; } 15084 .euiTable.euiTable--responsive .euiTableRow.euiTableRow--transparent { 15085 background-color: transparent; } 15086 .euiTable.euiTable--responsive .euiTableRow.euiTableRow--plain { 15087 background-color: #1D1E24; } 15088 .euiTable.euiTable--responsive .euiTableRow.euiTableRow--subdued { 15089 background-color: #141519; } 15090 .euiTable.euiTable--responsive .euiTableRow.euiTableRow--accent { 15091 background-color: #4b2b3a; } 15092 .euiTable.euiTable--responsive .euiTableRow.euiTableRow--primary { 15093 background-color: #08334a; } 15094 .euiTable.euiTable--responsive .euiTableRow.euiTableRow--success { 15095 background-color: #26443f; } 15096 .euiTable.euiTable--responsive .euiTableRow.euiTableRow--warning { 15097 background-color: #4d3e25; } 15098 .euiTable.euiTable--responsive .euiTableRow.euiTableRow--danger { 15099 background-color: #4d1f1f; } 15100 .euiTable.euiTable--responsive .euiTableRow { 15101 box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3), 0 1px 5px -2px rgba(0, 0, 0, 0.3); 15102 background-color: #1D1E24; 15103 border-radius: 4px; 15104 display: -webkit-flex; 15105 display: flex; 15106 -webkit-flex-wrap: wrap; 15107 flex-wrap: wrap; 15108 padding: 8px; 15109 margin-bottom: 8px; } 15110 .euiTable.euiTable--responsive .euiTableRow:hover { 15111 background-color: #1D1E24; } 15112 .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isExpandable, .euiTable.euiTable--responsive .euiTableRow.euiTableRow-hasActions { 15113 background-image: linear-gradient(to right, rgba(83, 89, 102, 0.1) 0, rgba(83, 89, 102, 0.1) 1px, transparent 1px, transparent 100%); 15114 background-size: 40px 100%; 15115 background-position-x: right; 15116 background-repeat: no-repeat; 15117 padding-right: 40px; 15118 position: relative; } 15119 .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isExpandable .euiTableRowCell--isExpander, 15120 .euiTable.euiTable--responsive .euiTableRow.euiTableRow-hasActions .euiTableRowCell--hasActions { 15121 min-width: 0; 15122 width: 24px; 15123 position: absolute; 15124 top: 16px; 15125 right: 8px; } 15126 .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isExpandable .euiTableRowCell--isExpander::before, 15127 .euiTable.euiTable--responsive .euiTableRow.euiTableRow-hasActions .euiTableRowCell--hasActions::before { 15128 display: none; } 15129 .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isExpandable .euiTableRowCell--isExpander .euiTableCellContent, 15130 .euiTable.euiTable--responsive .euiTableRow.euiTableRow-hasActions .euiTableRowCell--hasActions .euiTableCellContent { 15131 -webkit-flex-direction: column; 15132 flex-direction: column; 15133 padding: 0; } 15134 .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isExpandable .euiTableRowCell--isExpander .euiTableCellContent .euiLink, 15135 .euiTable.euiTable--responsive .euiTableRow.euiTableRow-hasActions .euiTableRowCell--hasActions .euiTableCellContent .euiLink { 15136 padding: 4px; } 15137 .euiTable.euiTable--responsive .euiTableRow.euiTableRow-hasActions.euiTableRow-isExpandable .euiTableRowCell--isExpander { 15138 top: auto; 15139 bottom: 16px; 15140 right: 0; } 15141 .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isSelectable { 15142 padding-left: 36px; 15143 position: relative; } 15144 .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isSelectable .euiTableRowCellCheckbox { 15145 position: absolute; 15146 left: 4px; 15147 top: 8px; } 15148 .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isSelected, .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isSelected:hover, 15149 .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isSelected + .euiTableRow.euiTableRow-isExpandedRow, 15150 .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isSelected:hover + .euiTableRow.euiTableRow-isExpandedRow .euiTableRowCell { 15151 background-color: #052231; } 15152 .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isExpandedRow { 15153 background-image: linear-gradient(to right, rgba(83, 89, 102, 0.1) 0, rgba(83, 89, 102, 0.1) 1px, transparent 1px, transparent 100%); 15154 background-size: 40px 100%; 15155 background-position-x: right; 15156 background-repeat: no-repeat; 15157 box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3), 0 1px 5px -2px rgba(0, 0, 0, 0.3); 15158 margin-top: -16px; 15159 position: relative; 15160 z-index: 2; 15161 border-top: none; 15162 border-top-left-radius: 0; 15163 border-top-right-radius: 0; 15164 padding-left: 8px; } 15165 .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isExpandedRow:hover { 15166 background-color: #1D1E24; } 15167 .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isExpandedRow .euiTableRowCell { 15168 width: calc(100% - 40px); } 15169 .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isExpandedRow .euiTableRowCell::before { 15170 display: none; } 15171 .euiTable.euiTable--responsive .euiTableRowCell { 15172 display: block; 15173 /* IE requires block to grow and wrap. */ 15174 min-width: 50%; 15175 border: none; } 15176 .euiTable.euiTable--responsive .euiTableRowCellCheckbox { 15177 border: none; } 15178 .euiTable.euiTable--responsive .euiTableRow-hasActions .euiTableCellContent--showOnHover > * { 15179 margin-left: 0; } 15180 .euiTable.euiTable--responsive .euiTableRow-hasActions .euiTableCellContent--showOnHover .expandedItemActions__completelyHide { 15181 display: none; } 15182 .euiTable.euiTable--responsive .euiTableRow-hasActions .euiTableCellContent--showOnHover .euiTableCellContent__hoverItem { 15183 opacity: 1; 15184 -webkit-filter: none; 15185 filter: none; 15186 margin-left: 0; 15187 margin-bottom: 8px; } 15188 .euiTable.euiTable--responsive .euiTableCellContent--alignRight { 15189 -webkit-justify-content: flex-start; 15190 justify-content: flex-start; } 15191 .euiTable.euiTable--responsive .euiTableCellContent--alignCenter { 15192 -webkit-justify-content: flex-start; 15193 justify-content: flex-start; } } 15194 15195@media only screen and (min-width: 575px) and (max-width: 767px) { 15196 .euiTable.euiTable--responsive thead { 15197 display: none; } 15198 .euiTable.euiTable--responsive tfoot { 15199 display: none; } 15200 .euiTable.euiTable--responsive .euiTableRowCell__mobileHeader { 15201 max-width: 100%; 15202 overflow: hidden !important; 15203 text-overflow: ellipsis !important; 15204 white-space: nowrap !important; 15205 word-wrap: normal !important; 15206 font-size: 11px; 15207 font-size: 0.6875rem; 15208 display: block; 15209 color: #98A2B3; 15210 padding: 8px; 15211 padding-bottom: 0; 15212 margin-bottom: -8px; 15213 min-height: 24px; } 15214 .euiTableRowCell:only-child .euiTable.euiTable--responsive .euiTableRowCell__mobileHeader { 15215 min-height: 0; } 15216 .euiTable.euiTable--responsive .euiTableRowCell--enlargeForMobile { 15217 font-size: 16px; 15218 font-size: 1rem; 15219 line-height: 1.5; } 15220 .euiTable.euiTable--responsive .euiTableRowCell--isMobileFullWidth { 15221 width: 100%; } 15222 .euiTable.euiTable--responsive .euiTableRowCell--isMobileFullWidth .euiTableCellContent--alignCenter { 15223 -webkit-justify-content: center; 15224 justify-content: center; 15225 text-align: center; } 15226 .euiTable.euiTable--responsive .euiTableRow { 15227 background-color: #1D1E24; 15228 border: 1px solid #343741; 15229 border-radius: 4px; 15230 -webkit-flex-grow: 1; 15231 flex-grow: 1; } 15232 .euiTable.euiTable--responsive .euiTableRow.euiTableRow--flexGrowZero { 15233 -webkit-flex-grow: 0; 15234 flex-grow: 0; } 15235 .euiTable.euiTable--responsive .euiTableRow.euiTableRow--noBorder { 15236 border: none; } 15237 .euiTable.euiTable--responsive .euiTableRow.euiTableRow--hasShadow { 15238 box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3), 0 1px 5px -2px rgba(0, 0, 0, 0.3); 15239 border: 1px solid #343741; } 15240 .euiTable.euiTable--responsive .euiTableRow.euiTableRow--isClickable { 15241 transition: all 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); } 15242 .euiTable.euiTable--responsive .euiTableRow.euiTableRow--isClickable:enabled { 15243 display: block; 15244 width: 100%; 15245 text-align: left; } 15246 .euiTable.euiTable--responsive .euiTableRow.euiTableRow--isClickable:hover, .euiTable.euiTable--responsive .euiTableRow.euiTableRow--isClickable:focus { 15247 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 2px 2px -1px rgba(0, 0, 0, 0.3); 15248 -webkit-transform: translateY(-2px); 15249 transform: translateY(-2px); 15250 cursor: pointer; } 15251 .euiTable.euiTable--responsive .euiTableRow.euiTableRow--borderRadiusNone { 15252 border-radius: 0; } 15253 .euiTable.euiTable--responsive .euiTableRow.euiTableRow--borderRadiusMedium { 15254 border-radius: 4px; } 15255 .euiTable.euiTable--responsive .euiTableRow.euiTableRow--transparent { 15256 background-color: transparent; } 15257 .euiTable.euiTable--responsive .euiTableRow.euiTableRow--plain { 15258 background-color: #1D1E24; } 15259 .euiTable.euiTable--responsive .euiTableRow.euiTableRow--subdued { 15260 background-color: #141519; } 15261 .euiTable.euiTable--responsive .euiTableRow.euiTableRow--accent { 15262 background-color: #4b2b3a; } 15263 .euiTable.euiTable--responsive .euiTableRow.euiTableRow--primary { 15264 background-color: #08334a; } 15265 .euiTable.euiTable--responsive .euiTableRow.euiTableRow--success { 15266 background-color: #26443f; } 15267 .euiTable.euiTable--responsive .euiTableRow.euiTableRow--warning { 15268 background-color: #4d3e25; } 15269 .euiTable.euiTable--responsive .euiTableRow.euiTableRow--danger { 15270 background-color: #4d1f1f; } 15271 .euiTable.euiTable--responsive .euiTableRow { 15272 box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3), 0 1px 5px -2px rgba(0, 0, 0, 0.3); 15273 background-color: #1D1E24; 15274 border-radius: 4px; 15275 display: -webkit-flex; 15276 display: flex; 15277 -webkit-flex-wrap: wrap; 15278 flex-wrap: wrap; 15279 padding: 8px; 15280 margin-bottom: 8px; } 15281 .euiTable.euiTable--responsive .euiTableRow:hover { 15282 background-color: #1D1E24; } 15283 .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isExpandable, .euiTable.euiTable--responsive .euiTableRow.euiTableRow-hasActions { 15284 background-image: linear-gradient(to right, rgba(83, 89, 102, 0.1) 0, rgba(83, 89, 102, 0.1) 1px, transparent 1px, transparent 100%); 15285 background-size: 40px 100%; 15286 background-position-x: right; 15287 background-repeat: no-repeat; 15288 padding-right: 40px; 15289 position: relative; } 15290 .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isExpandable .euiTableRowCell--isExpander, 15291 .euiTable.euiTable--responsive .euiTableRow.euiTableRow-hasActions .euiTableRowCell--hasActions { 15292 min-width: 0; 15293 width: 24px; 15294 position: absolute; 15295 top: 16px; 15296 right: 8px; } 15297 .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isExpandable .euiTableRowCell--isExpander::before, 15298 .euiTable.euiTable--responsive .euiTableRow.euiTableRow-hasActions .euiTableRowCell--hasActions::before { 15299 display: none; } 15300 .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isExpandable .euiTableRowCell--isExpander .euiTableCellContent, 15301 .euiTable.euiTable--responsive .euiTableRow.euiTableRow-hasActions .euiTableRowCell--hasActions .euiTableCellContent { 15302 -webkit-flex-direction: column; 15303 flex-direction: column; 15304 padding: 0; } 15305 .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isExpandable .euiTableRowCell--isExpander .euiTableCellContent .euiLink, 15306 .euiTable.euiTable--responsive .euiTableRow.euiTableRow-hasActions .euiTableRowCell--hasActions .euiTableCellContent .euiLink { 15307 padding: 4px; } 15308 .euiTable.euiTable--responsive .euiTableRow.euiTableRow-hasActions.euiTableRow-isExpandable .euiTableRowCell--isExpander { 15309 top: auto; 15310 bottom: 16px; 15311 right: 0; } 15312 .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isSelectable { 15313 padding-left: 36px; 15314 position: relative; } 15315 .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isSelectable .euiTableRowCellCheckbox { 15316 position: absolute; 15317 left: 4px; 15318 top: 8px; } 15319 .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isSelected, .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isSelected:hover, 15320 .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isSelected + .euiTableRow.euiTableRow-isExpandedRow, 15321 .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isSelected:hover + .euiTableRow.euiTableRow-isExpandedRow .euiTableRowCell { 15322 background-color: #052231; } 15323 .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isExpandedRow { 15324 background-image: linear-gradient(to right, rgba(83, 89, 102, 0.1) 0, rgba(83, 89, 102, 0.1) 1px, transparent 1px, transparent 100%); 15325 background-size: 40px 100%; 15326 background-position-x: right; 15327 background-repeat: no-repeat; 15328 box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3), 0 1px 5px -2px rgba(0, 0, 0, 0.3); 15329 margin-top: -16px; 15330 position: relative; 15331 z-index: 2; 15332 border-top: none; 15333 border-top-left-radius: 0; 15334 border-top-right-radius: 0; 15335 padding-left: 8px; } 15336 .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isExpandedRow:hover { 15337 background-color: #1D1E24; } 15338 .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isExpandedRow .euiTableRowCell { 15339 width: calc(100% - 40px); } 15340 .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isExpandedRow .euiTableRowCell::before { 15341 display: none; } 15342 .euiTable.euiTable--responsive .euiTableRowCell { 15343 display: block; 15344 /* IE requires block to grow and wrap. */ 15345 min-width: 50%; 15346 border: none; } 15347 .euiTable.euiTable--responsive .euiTableRowCellCheckbox { 15348 border: none; } 15349 .euiTable.euiTable--responsive .euiTableRow-hasActions .euiTableCellContent--showOnHover > * { 15350 margin-left: 0; } 15351 .euiTable.euiTable--responsive .euiTableRow-hasActions .euiTableCellContent--showOnHover .expandedItemActions__completelyHide { 15352 display: none; } 15353 .euiTable.euiTable--responsive .euiTableRow-hasActions .euiTableCellContent--showOnHover .euiTableCellContent__hoverItem { 15354 opacity: 1; 15355 -webkit-filter: none; 15356 filter: none; 15357 margin-left: 0; 15358 margin-bottom: 8px; } 15359 .euiTable.euiTable--responsive .euiTableCellContent--alignRight { 15360 -webkit-justify-content: flex-start; 15361 justify-content: flex-start; } 15362 .euiTable.euiTable--responsive .euiTableCellContent--alignCenter { 15363 -webkit-justify-content: flex-start; 15364 justify-content: flex-start; } } 15365 15366.euiTableHeaderMobile, 15367.euiTableHeaderCell--hideForDesktop { 15368 display: none; } 15369 15370@media only screen and (max-width: 574px) { 15371 .euiTableHeaderMobile { 15372 display: -webkit-flex; 15373 display: flex; 15374 -webkit-justify-content: flex-end; 15375 justify-content: flex-end; 15376 padding: 8px 0; } 15377 .euiTableSortMobile { 15378 display: block; } } 15379 15380@media only screen and (min-width: 575px) and (max-width: 767px) { 15381 .euiTableHeaderMobile { 15382 display: -webkit-flex; 15383 display: flex; 15384 -webkit-justify-content: flex-end; 15385 justify-content: flex-end; 15386 padding: 8px 0; } 15387 .euiTableSortMobile { 15388 display: block; } } 15389 15390.euiTabs { 15391 scrollbar-color: rgba(152, 162, 179, 0.5) transparent; 15392 scrollbar-width: thin; 15393 display: -webkit-flex; 15394 display: flex; 15395 max-width: 100%; 15396 overflow-x: auto; 15397 overflow-y: hidden; 15398 position: relative; 15399 -webkit-flex-shrink: 0; 15400 flex-shrink: 0; } 15401 .euiTabs::-webkit-scrollbar { 15402 width: 16px; 15403 height: 16px; } 15404 .euiTabs::-webkit-scrollbar-thumb { 15405 background-color: rgba(152, 162, 179, 0.5); 15406 background-clip: content-box; 15407 border-radius: 16px; 15408 border: 6px solid transparent; } 15409 .euiTabs::-webkit-scrollbar-corner, .euiTabs::-webkit-scrollbar-track { 15410 background-color: transparent; } 15411 .euiTabs--bottomBorder { 15412 box-shadow: inset 0 -1px 0 #343741; } 15413 .euiTabs::-webkit-scrollbar { 15414 height: 2px; } 15415 15416.euiTab { 15417 color: #DFE5EF; 15418 padding: 12px 16px; 15419 cursor: pointer; 15420 display: -webkit-flex; 15421 display: flex; 15422 -webkit-flex-direction: row; 15423 flex-direction: row; 15424 -webkit-align-items: center; 15425 align-items: center; } 15426 .euiTab .euiTab__content { 15427 max-width: 100%; 15428 overflow: hidden !important; 15429 text-overflow: ellipsis !important; 15430 white-space: nowrap !important; 15431 word-wrap: normal !important; 15432 font-size: 16px; 15433 font-size: 1rem; 15434 line-height: 1.5; 15435 color: #DFE5EF; 15436 line-height: 1.5; 15437 display: block; } 15438 .euiTab:not(.euiTab-isDisabled):hover .euiTab__content, 15439 .euiTab:not(.euiTab-isDisabled):focus .euiTab__content { 15440 text-decoration: underline; } 15441 .euiTab:focus { 15442 background-color: #052231; 15443 outline-offset: -3px; } 15444 .euiTab.euiTab-isSelected { 15445 box-shadow: inset 0 -2px 0 #1BA9F5; } 15446 .euiTab.euiTab-isSelected, 15447 .euiTab.euiTab-isSelected .euiTab__content { 15448 color: #1BA9F5 !important; } 15449 .euiTab.euiTab-isDisabled, 15450 .euiTab.euiTab-isDisabled .euiTab__content { 15451 color: #4c4e51 !important; } 15452 .euiTab.euiTab-isDisabled:hover { 15453 cursor: not-allowed; } 15454 .euiTab.euiTab-isDisabled.euiTab-isSelected { 15455 box-shadow: inset 0 -2px 0 #4c4e51; } 15456 .euiTabs--small .euiTab { 15457 padding: 8px; } 15458 .euiTabs--small .euiTab .euiTab__content { 15459 font-size: 14px; 15460 font-size: 0.875rem; 15461 line-height: 1.5; } 15462 .euiTabs--large .euiTab { 15463 padding: 12px 16px; } 15464 .euiTabs--xlarge .euiTab { 15465 padding: 8px 24px; } 15466 .euiTabs--xlarge .euiTab .euiTab__content { 15467 font-size: 20px; 15468 font-size: 1.25rem; 15469 line-height: 1.5; } 15470 .euiTabs--expand .euiTab { 15471 -webkit-flex-basis: 0%; 15472 flex-basis: 0%; 15473 -webkit-flex-grow: 1; 15474 flex-grow: 1; 15475 -webkit-justify-content: center; 15476 justify-content: center; } 15477 15478.euiTab__prepend { 15479 margin-right: 8px; } 15480 15481.euiTab__append { 15482 margin-left: 8px; } 15483 15484.euiTabs--condensed .euiTab { 15485 padding: 8px 4px; } 15486 .euiTabs--condensed .euiTab .euiTab__content { 15487 font-size: 16px; 15488 font-size: 1rem; 15489 line-height: 1.5; 15490 font-weight: 600; } 15491 .euiTabs--condensed .euiTab + .euiTab { 15492 margin-left: 16px; } 15493 15494.euiTabs--condensed.euiTabs--small .euiTab { 15495 padding: 6px 4px; } 15496 .euiTabs--condensed.euiTabs--small .euiTab .euiTab__content { 15497 font-size: 14px; 15498 font-size: 0.875rem; 15499 line-height: 1.5; } 15500 15501.euiTabs--condensed.euiTabs--large .euiTab + .euiTab { 15502 margin-left: 24px; } 15503 15504.euiTabs--condensed.euiTabs--xlarge .euiTab { 15505 padding: 12px 4px; } 15506 .euiTabs--condensed.euiTabs--xlarge .euiTab .euiTab__content { 15507 font-size: 20px; 15508 font-size: 1.25rem; 15509 line-height: 1.5; } 15510 .euiTabs--condensed.euiTabs--xlarge .euiTab + .euiTab { 15511 margin-left: 24px; } 15512 15513.euiTextDiff del { 15514 color: #F66; } 15515 15516.euiTextDiff ins { 15517 color: #7DE2D1; } 15518 15519.euiTitle + .euiTitle { 15520 margin-top: 24px; } 15521 15522.euiTitle--uppercase { 15523 text-transform: uppercase; } 15524 15525.euiTitle--xxxsmall { 15526 overflow-wrap: break-word !important; 15527 word-wrap: break-word !important; 15528 word-break: break-word; 15529 color: #DFE5EF; 15530 font-size: 12px; 15531 font-size: 0.75rem; 15532 line-height: 1.5rem; 15533 font-weight: 700; } 15534 15535.euiTitle--xxsmall { 15536 overflow-wrap: break-word !important; 15537 word-wrap: break-word !important; 15538 word-break: break-word; 15539 color: #DFE5EF; 15540 font-size: 14px; 15541 font-size: 0.875rem; 15542 line-height: 1.5rem; 15543 font-weight: 700; } 15544 15545.euiTitle--xsmall { 15546 overflow-wrap: break-word !important; 15547 word-wrap: break-word !important; 15548 word-break: break-word; 15549 color: #DFE5EF; 15550 font-size: 16px; 15551 font-size: 1rem; 15552 line-height: 1.5rem; 15553 font-weight: 600; 15554 letter-spacing: -0.02em; } 15555 15556.euiTitle--small { 15557 overflow-wrap: break-word !important; 15558 word-wrap: break-word !important; 15559 word-break: break-word; 15560 color: #DFE5EF; 15561 font-size: 20px; 15562 font-size: 1.25rem; 15563 line-height: 2rem; 15564 font-weight: 500; 15565 letter-spacing: -0.025em; } 15566 15567.euiTitle--medium { 15568 overflow-wrap: break-word !important; 15569 word-wrap: break-word !important; 15570 word-break: break-word; 15571 color: #DFE5EF; 15572 font-size: 28px; 15573 font-size: 1.75rem; 15574 line-height: 2.5rem; 15575 font-weight: 300; 15576 letter-spacing: -0.04em; } 15577 15578.euiTitle--large { 15579 overflow-wrap: break-word !important; 15580 word-wrap: break-word !important; 15581 word-break: break-word; 15582 color: #DFE5EF; 15583 font-size: 36px; 15584 font-size: 2.25rem; 15585 line-height: 3rem; 15586 font-weight: 300; 15587 letter-spacing: -0.03em; } 15588 15589/** 15590 * 1. Allow list to expand as items are added, but cap it at the screen height. 15591 * 2. Allow some padding for shadow 15592 */ 15593.euiGlobalToastList { 15594 scrollbar-color: rgba(152, 162, 179, 0.5) transparent; 15595 scrollbar-width: thin; 15596 display: -webkit-flex; 15597 display: flex; 15598 -webkit-flex-direction: column; 15599 flex-direction: column; 15600 -webkit-align-items: stretch; 15601 align-items: stretch; 15602 position: fixed; 15603 z-index: 9000; 15604 bottom: 0; 15605 width: 400px; 15606 /* 2 */ 15607 max-height: 100vh; 15608 /* 1 */ 15609 overflow-y: auto; 15610 scrollbar-width: none; } 15611 .euiGlobalToastList::-webkit-scrollbar { 15612 width: 16px; 15613 height: 16px; } 15614 .euiGlobalToastList::-webkit-scrollbar-thumb { 15615 background-color: rgba(152, 162, 179, 0.5); 15616 background-clip: content-box; 15617 border-radius: 16px; 15618 border: 6px solid transparent; } 15619 .euiGlobalToastList::-webkit-scrollbar-corner, .euiGlobalToastList::-webkit-scrollbar-track { 15620 background-color: transparent; } 15621 .euiGlobalToastList::-webkit-scrollbar { 15622 width: 0; 15623 height: 0; } 15624 .euiGlobalToastList:not(:empty) { 15625 padding: 16px; } 15626 15627.euiGlobalToastList--right:not(:empty) { 15628 right: 0; 15629 padding-left: 64px; 15630 /* 2 */ } 15631 15632.euiGlobalToastList--left:not(:empty) { 15633 left: 0; 15634 padding-right: 64px; 15635 /* 2 */ } 15636 15637.euiGlobalToastListItem { 15638 margin-bottom: 16px; 15639 -webkit-animation: 250ms euiShowToast cubic-bezier(0.694, 0.0482, 0.335, 1); 15640 animation: 250ms euiShowToast cubic-bezier(0.694, 0.0482, 0.335, 1); 15641 opacity: 1; 15642 /** 15643 * 1. justify-content: flex-end interferes with overflowing content, so we'll use this to push 15644 * items to the bottom instead. 15645 */ } 15646 .euiGlobalToastListItem:first-child { 15647 margin-top: auto; 15648 /* 1 */ } 15649 .euiGlobalToastListItem:last-child { 15650 margin-bottom: 0; } 15651 .euiGlobalToastListItem.euiGlobalToastListItem-isDismissed { 15652 transition: opacity 250ms; 15653 opacity: 0; } 15654 15655@-webkit-keyframes euiShowToast { 15656 from { 15657 -webkit-transform: translateY(24px) scale(0.9); 15658 transform: translateY(24px) scale(0.9); 15659 opacity: 0; } 15660 to { 15661 -webkit-transform: translateY(0) scale(1); 15662 transform: translateY(0) scale(1); 15663 opacity: 1; } } 15664 15665@keyframes euiShowToast { 15666 from { 15667 -webkit-transform: translateY(24px) scale(0.9); 15668 transform: translateY(24px) scale(0.9); 15669 opacity: 0; } 15670 to { 15671 -webkit-transform: translateY(0) scale(1); 15672 transform: translateY(0) scale(1); 15673 opacity: 1; } } 15674 15675@media only screen and (max-width: 574px) { 15676 /** 15677 * 1. Mobile we make these 100%. Matching change happens on the item as well. 15678 */ 15679 .euiGlobalToastList:not(:empty) { 15680 left: 0; 15681 padding-left: 16px; 15682 padding-right: 16px; 15683 width: 100%; 15684 /* 1 */ } } 15685 15686@media only screen and (min-width: 575px) and (max-width: 767px) { 15687 /** 15688 * 1. Mobile we make these 100%. Matching change happens on the item as well. 15689 */ 15690 .euiGlobalToastList:not(:empty) { 15691 left: 0; 15692 padding-left: 16px; 15693 padding-right: 16px; 15694 width: 100%; 15695 /* 1 */ } } 15696 15697.euiToast { 15698 border: 1px solid #343741; 15699 box-shadow: 0 40px 64px 0 rgba(0, 0, 0, 0.1), 0 24px 32px 0 rgba(0, 0, 0, 0.1), 0 16px 16px 0 rgba(0, 0, 0, 0.1), 0 8px 8px 0 rgba(0, 0, 0, 0.1), 0 4px 4px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.1); 15700 position: relative; 15701 padding: 16px; 15702 background-color: #1D1E24; 15703 width: 100%; } 15704 .euiToast:hover .euiToast__closeButton, 15705 .euiToast:focus .euiToast__closeButton { 15706 opacity: 1; } 15707 15708/** 15709 * 1. Fit button to icon. 15710 */ 15711.euiToast__closeButton { 15712 position: absolute; 15713 top: 16px; 15714 right: 16px; 15715 line-height: 0; 15716 /* 1 */ 15717 -webkit-appearance: none; 15718 -moz-appearance: none; 15719 appearance: none; 15720 opacity: 0; 15721 transition: opacity 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); } 15722 .euiToast__closeButton svg { 15723 fill: #434548; } 15724 .euiToast__closeButton:hover svg { 15725 fill: #DFE5EF; } 15726 .euiToast__closeButton:focus { 15727 background-color: #052231; 15728 opacity: 1; } 15729 .euiToast__closeButton:focus svg { 15730 fill: #1BA9F5; } 15731 15732.euiToast--primary { 15733 border-top: 2px solid #1BA9F5; } 15734 15735.euiToast--success { 15736 border-top: 2px solid #7DE2D1; } 15737 15738.euiToast--warning { 15739 border-top: 2px solid #FFCE7A; } 15740 15741.euiToast--danger { 15742 border-top: 2px solid #F66; } 15743 15744/** 15745 * 1. Align icon with first line of title text if it wraps. 15746 * 2. Apply margin to all but last item in the flex. 15747 * 3. Account for close button. 15748 */ 15749.euiToastHeader { 15750 padding-right: 24px; 15751 /* 3 */ 15752 display: -webkit-flex; 15753 display: flex; 15754 -webkit-align-items: baseline; 15755 align-items: baseline; 15756 /* 1 */ } 15757 .euiToastHeader > * + * { 15758 margin-left: 8px; 15759 /* 2 */ } 15760 15761/** 15762 * 1. Vertically center icon with first line of title. 15763 */ 15764.euiToastHeader__icon { 15765 -webkit-flex: 0 0 auto; 15766 flex: 0 0 auto; 15767 fill: #DFE5EF; 15768 -webkit-transform: translateY(2px); 15769 transform: translateY(2px); 15770 /* 1 */ } 15771 15772.euiToastHeader__title { 15773 overflow-wrap: break-word !important; 15774 word-wrap: break-word !important; 15775 word-break: break-word; 15776 color: #DFE5EF; 15777 font-size: 16px; 15778 font-size: 1rem; 15779 line-height: 1.5rem; 15780 font-weight: 600; 15781 letter-spacing: -0.02em; 15782 font-weight: 300; } 15783 15784.euiToastHeader--withBody { 15785 margin-bottom: 8px; } 15786 15787/** 15788 * 1. Prevent long lines from overflowing. 15789 */ 15790.euiToastBody { 15791 word-wrap: break-word; 15792 /* 1 */ } 15793 15794.euiToken { 15795 display: -webkit-inline-flex; 15796 display: inline-flex; 15797 -webkit-align-items: center; 15798 align-items: center; 15799 -webkit-justify-content: center; 15800 justify-content: center; } 15801 .euiToken svg { 15802 height: 100%; 15803 margin: auto; } 15804 15805.euiToken--circle { 15806 border-radius: 50%; } 15807 15808.euiToken--square { 15809 border-radius: 3px; } 15810 15811.euiToken--xsmall { 15812 width: 12px; 15813 height: 12px; } 15814 .euiToken--xsmall.euiToken--rectangle { 15815 padding: 0 4px; } 15816 15817.euiToken--small { 15818 width: 16px; 15819 height: 16px; } 15820 .euiToken--small.euiToken--rectangle { 15821 padding: 0 4px; } 15822 15823.euiToken--medium { 15824 width: 24px; 15825 height: 24px; } 15826 .euiToken--medium.euiToken--rectangle { 15827 padding: 0 8px; } 15828 15829.euiToken--large { 15830 width: 32px; 15831 height: 32px; } 15832 .euiToken--large.euiToken--rectangle { 15833 padding: 0 8px; } 15834 15835.euiToken--rectangle { 15836 box-sizing: content-box; } 15837 15838.euiToken--euiColorVis0 { 15839 color: #54B399; } 15840 .euiToken--euiColorVis0.euiToken--light { 15841 color: #54B399; 15842 background-color: #19362e; 15843 box-shadow: inset 0 0 0 1px #22483d; } 15844 .euiToken--euiColorVis0.euiToken--dark { 15845 background-color: #6DCCB1; 15846 color: #000; } 15847 15848.euiToken--euiColorVis1 { 15849 color: #6092C0; } 15850 .euiToken--euiColorVis1.euiToken--light { 15851 color: #6897c3; 15852 background-color: #1d2c3a; 15853 box-shadow: inset 0 0 0 1px #263a4d; } 15854 .euiToken--euiColorVis1.euiToken--dark { 15855 background-color: #79AAD9; 15856 color: #000; } 15857 15858.euiToken--euiColorVis2 { 15859 color: #D36086; } 15860 .euiToken--euiColorVis2.euiToken--light { 15861 color: #d77092; 15862 background-color: #3f1d28; 15863 box-shadow: inset 0 0 0 1px #542636; } 15864 .euiToken--euiColorVis2.euiToken--dark { 15865 background-color: #EE789D; 15866 color: #000; } 15867 15868.euiToken--euiColorVis3 { 15869 color: #9170B8; } 15870 .euiToken--euiColorVis3.euiToken--light { 15871 color: #a184c2; 15872 background-color: #2c2237; 15873 box-shadow: inset 0 0 0 1px #3a2d4a; } 15874 .euiToken--euiColorVis3.euiToken--dark { 15875 background-color: #A987D1; 15876 color: #000; } 15877 15878.euiToken--euiColorVis4 { 15879 color: #CA8EAE; } 15880 .euiToken--euiColorVis4.euiToken--light { 15881 color: #CA8EAE; 15882 background-color: #3d2b34; 15883 box-shadow: inset 0 0 0 1px #513946; } 15884 .euiToken--euiColorVis4.euiToken--dark { 15885 background-color: #E4A6C7; 15886 color: #000; } 15887 15888.euiToken--euiColorVis5 { 15889 color: #D6BF57; } 15890 .euiToken--euiColorVis5.euiToken--light { 15891 color: #D6BF57; 15892 background-color: #40391a; 15893 box-shadow: inset 0 0 0 1px #564c23; } 15894 .euiToken--euiColorVis5.euiToken--dark { 15895 background-color: #F1D86F; 15896 color: #000; } 15897 15898.euiToken--euiColorVis6 { 15899 color: #B9A888; } 15900 .euiToken--euiColorVis6.euiToken--light { 15901 color: #B9A888; 15902 background-color: #383229; 15903 box-shadow: inset 0 0 0 1px #4a4336; } 15904 .euiToken--euiColorVis6.euiToken--dark { 15905 background-color: #D2C0A0; 15906 color: #000; } 15907 15908.euiToken--euiColorVis7 { 15909 color: #DA8B45; } 15910 .euiToken--euiColorVis7.euiToken--light { 15911 color: #DA8B45; 15912 background-color: #412a15; 15913 box-shadow: inset 0 0 0 1px #57381c; } 15914 .euiToken--euiColorVis7.euiToken--dark { 15915 background-color: #F5A35C; 15916 color: #000; } 15917 15918.euiToken--euiColorVis8 { 15919 color: #AA6556; } 15920 .euiToken--euiColorVis8.euiToken--light { 15921 color: #b67b6e; 15922 background-color: #331e1a; 15923 box-shadow: inset 0 0 0 1px #442822; } 15924 .euiToken--euiColorVis8.euiToken--dark { 15925 background-color: #C47C6C; 15926 color: #000; } 15927 15928.euiToken--euiColorVis9 { 15929 color: #E7664C; } 15930 .euiToken--euiColorVis9.euiToken--light { 15931 color: #e86e55; 15932 background-color: #451f17; 15933 box-shadow: inset 0 0 0 1px #5c291e; } 15934 .euiToken--euiColorVis9.euiToken--dark { 15935 background-color: #FF7E62; 15936 color: #000; } 15937 15938.euiToken--gray { 15939 color: #535966; } 15940 .euiToken--gray.euiToken--light { 15941 color: #81858f; 15942 background-color: #191b1f; 15943 box-shadow: inset 0 0 0 1px #212429; } 15944 .euiToken--gray.euiToken--dark { 15945 background-color: #535966; 15946 color: #FFF; } 15947 15948/* 15949 * 1. Shift arrow 1px more than half its size to account for border radius 15950 */ 15951.euiToolTip { 15952 box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.1), 0 6px 12px 0 rgba(0, 0, 0, 0.1), 0 4px 4px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.1); 15953 border-radius: 4px; 15954 background-color: black; 15955 color: #FFF; 15956 z-index: 9000; 15957 max-width: 256px; 15958 overflow-wrap: break-word; 15959 font-size: 14px; 15960 font-size: 0.875rem; 15961 line-height: 1.5; 15962 padding: 12px; 15963 -webkit-animation: euiToolTipTop 350ms ease-out 0s forwards; 15964 animation: euiToolTipTop 350ms ease-out 0s forwards; 15965 position: absolute; 15966 opacity: 0; 15967 /* 1 */ 15968 /* 1 */ } 15969 .euiToolTip .euiToolTip__arrow { 15970 content: ''; 15971 position: absolute; 15972 -webkit-transform-origin: center; 15973 transform-origin: center; 15974 border-radius: 2px; 15975 background-color: black; 15976 width: 12px; 15977 height: 12px; 15978 -webkit-transform: translateY(-7px) rotateZ(45deg); 15979 transform: translateY(-7px) rotateZ(45deg); 15980 /* 1 */ } 15981 .euiToolTip.euiToolTip--right { 15982 -webkit-animation-name: euiToolTipRight; 15983 animation-name: euiToolTipRight; } 15984 .euiToolTip.euiToolTip--right .euiToolTip__arrow { 15985 -webkit-transform: translateX(-5px) rotateZ(45deg); 15986 transform: translateX(-5px) rotateZ(45deg); 15987 /* 1 */ } 15988 .euiToolTip.euiToolTip--bottom { 15989 -webkit-animation-name: euiToolTipBottom; 15990 animation-name: euiToolTipBottom; } 15991 .euiToolTip.euiToolTip--bottom .euiToolTip__arrow { 15992 -webkit-transform: translateY(-5px) rotateZ(45deg); 15993 transform: translateY(-5px) rotateZ(45deg); 15994 /* 1 */ } 15995 .euiToolTip.euiToolTip--left { 15996 -webkit-animation-name: euiToolTipLeft; 15997 animation-name: euiToolTipLeft; } 15998 .euiToolTip.euiToolTip--left .euiToolTip__arrow { 15999 -webkit-transform: translateX(-7px) rotateZ(45deg); 16000 transform: translateX(-7px) rotateZ(45deg); 16001 /* 1 */ } 16002 .euiToolTip .euiToolTip__title { 16003 font-weight: 700; 16004 border-bottom: solid 1px #333333; 16005 padding-bottom: 4px; 16006 margin-bottom: 4px; } 16007 16008.euiToolTipAnchor { 16009 display: inline-block; } 16010 .euiToolTipAnchor *[disabled] { 16011 pointer-events: none; } 16012 .euiToolTipAnchor.euiToolTipAnchor--displayBlock { 16013 display: block; } 16014 16015@-webkit-keyframes euiToolTipTop { 16016 0% { 16017 opacity: 0; 16018 -webkit-transform: translateY(-16px); 16019 transform: translateY(-16px); } 16020 100% { 16021 opacity: 1; 16022 -webkit-transform: translateY(0); 16023 transform: translateY(0); } } 16024 16025@keyframes euiToolTipTop { 16026 0% { 16027 opacity: 0; 16028 -webkit-transform: translateY(-16px); 16029 transform: translateY(-16px); } 16030 100% { 16031 opacity: 1; 16032 -webkit-transform: translateY(0); 16033 transform: translateY(0); } } 16034 16035@-webkit-keyframes euiToolTipBottom { 16036 0% { 16037 opacity: 0; 16038 -webkit-transform: translateY(16px); 16039 transform: translateY(16px); } 16040 100% { 16041 opacity: 1; 16042 -webkit-transform: translateY(0); 16043 transform: translateY(0); } } 16044 16045@keyframes euiToolTipBottom { 16046 0% { 16047 opacity: 0; 16048 -webkit-transform: translateY(16px); 16049 transform: translateY(16px); } 16050 100% { 16051 opacity: 1; 16052 -webkit-transform: translateY(0); 16053 transform: translateY(0); } } 16054 16055@-webkit-keyframes euiToolTipLeft { 16056 0% { 16057 opacity: 0; 16058 -webkit-transform: translateX(-16px); 16059 transform: translateX(-16px); } 16060 100% { 16061 opacity: 1; 16062 -webkit-transform: translateY(0); 16063 transform: translateY(0); } } 16064 16065@keyframes euiToolTipLeft { 16066 0% { 16067 opacity: 0; 16068 -webkit-transform: translateX(-16px); 16069 transform: translateX(-16px); } 16070 100% { 16071 opacity: 1; 16072 -webkit-transform: translateY(0); 16073 transform: translateY(0); } } 16074 16075@-webkit-keyframes euiToolTipRight { 16076 0% { 16077 opacity: 0; 16078 -webkit-transform: translateX(16px); 16079 transform: translateX(16px); } 16080 100% { 16081 opacity: 1; 16082 -webkit-transform: translateY(0); 16083 transform: translateY(0); } } 16084 16085@keyframes euiToolTipRight { 16086 0% { 16087 opacity: 0; 16088 -webkit-transform: translateX(16px); 16089 transform: translateX(16px); } 16090 100% { 16091 opacity: 1; 16092 -webkit-transform: translateY(0); 16093 transform: translateY(0); } } 16094 16095.euiTourHeader { 16096 border-bottom: none; 16097 margin-bottom: 8px !important; } 16098 .euiTourHeader .euiTourHeader__title { 16099 margin-top: 0; } 16100 16101.euiTourHeader__subtitle { 16102 color: #7a7f89; } 16103 16104.euiTourFooter { 16105 background-color: #141519; 16106 border-radius: 0 0 4px 4px; } 16107 16108.euiTour .euiTour__beacon { 16109 pointer-events: none; 16110 position: absolute; 16111 opacity: 0; 16112 transition: opacity 0s 350ms; } 16113 16114.euiTour .euiPopover__panelArrow.euiPopover__panelArrow--right .euiTour__beacon { 16115 opacity: 1; 16116 top: 6px; 16117 left: -24px; } 16118 16119.euiTour .euiPopover__panelArrow.euiPopover__panelArrow--left .euiTour__beacon { 16120 opacity: 1; 16121 top: 6px; 16122 left: 12px; } 16123 16124.euiTour .euiPopover__panelArrow.euiPopover__panelArrow--top:after { 16125 border-top-color: #25262E; } 16126 16127.euiTour .euiPopover__panelArrow.euiPopover__panelArrow--top .euiTour__beacon { 16128 opacity: 1; 16129 top: 12px; 16130 left: 6px; } 16131 16132.euiTour .euiPopover__panelArrow.euiPopover__panelArrow--bottom .euiTour__beacon { 16133 opacity: 1; 16134 top: -24px; 16135 left: 6px; } 16136 16137.euiTourStepIndicator { 16138 display: inline-block; } 16139 16140.euiText { 16141 color: #DFE5EF; 16142 font-weight: 400; 16143 color: inherit; 16144 clear: both; } 16145 .euiText a:not([class]) { 16146 text-align: left; } 16147 .euiText a:not([class]):hover { 16148 text-decoration: underline; } 16149 .euiText a:not([class]):focus { 16150 text-decoration: underline; } 16151 .euiText img { 16152 display: block; 16153 width: 100%; } 16154 .euiText ul { 16155 list-style: disc; } 16156 .euiText ol { 16157 list-style: decimal; } 16158 .euiText blockquote:not(.euiMarkdownFormat__blockquote) { 16159 position: relative; 16160 text-align: center; 16161 margin-left: auto; 16162 margin-right: auto; 16163 font-family: Georgia, Times, Times New Roman, serif; 16164 font-style: italic; 16165 letter-spacing: normal; } 16166 .euiText blockquote:not(.euiMarkdownFormat__blockquote) p:last-child { 16167 margin-bottom: 0; } 16168 .euiText blockquote:not(.euiMarkdownFormat__blockquote):before, .euiText blockquote:not(.euiMarkdownFormat__blockquote):after { 16169 position: absolute; 16170 content: ''; 16171 height: 2px; 16172 width: 50%; 16173 right: 0; 16174 -webkit-transform: translateX(-50%); 16175 transform: translateX(-50%); 16176 background: #98A2B3; } 16177 .euiText blockquote:not(.euiMarkdownFormat__blockquote):before { 16178 top: 0; } 16179 .euiText blockquote:not(.euiMarkdownFormat__blockquote):after { 16180 bottom: 0; } 16181 .euiText h1 { 16182 overflow-wrap: break-word !important; 16183 word-wrap: break-word !important; 16184 word-break: break-word; 16185 color: #DFE5EF; 16186 font-size: 36px; 16187 font-size: 2.25rem; 16188 line-height: 3rem; 16189 font-weight: 300; 16190 letter-spacing: -0.03em; } 16191 .euiText h2 { 16192 overflow-wrap: break-word !important; 16193 word-wrap: break-word !important; 16194 word-break: break-word; 16195 color: #DFE5EF; 16196 font-size: 28px; 16197 font-size: 1.75rem; 16198 line-height: 2.5rem; 16199 font-weight: 300; 16200 letter-spacing: -0.04em; } 16201 .euiText h3 { 16202 overflow-wrap: break-word !important; 16203 word-wrap: break-word !important; 16204 word-break: break-word; 16205 color: #DFE5EF; 16206 font-size: 20px; 16207 font-size: 1.25rem; 16208 line-height: 2rem; 16209 font-weight: 500; 16210 letter-spacing: -0.025em; } 16211 .euiText h4, 16212 .euiText dt { 16213 overflow-wrap: break-word !important; 16214 word-wrap: break-word !important; 16215 word-break: break-word; 16216 color: #DFE5EF; 16217 font-size: 16px; 16218 font-size: 1rem; 16219 line-height: 1.5rem; 16220 font-weight: 600; 16221 letter-spacing: -0.02em; } 16222 .euiText h5 { 16223 overflow-wrap: break-word !important; 16224 word-wrap: break-word !important; 16225 word-break: break-word; 16226 color: #DFE5EF; 16227 font-size: 14px; 16228 font-size: 0.875rem; 16229 line-height: 1.5rem; 16230 font-weight: 700; } 16231 .euiText h6 { 16232 overflow-wrap: break-word !important; 16233 word-wrap: break-word !important; 16234 word-break: break-word; 16235 color: #DFE5EF; 16236 font-size: 12px; 16237 font-size: 0.75rem; 16238 line-height: 1.5rem; 16239 font-weight: 700; 16240 text-transform: uppercase; } 16241 .euiText h1, 16242 .euiText h2, 16243 .euiText h3, 16244 .euiText h4, 16245 .euiText h5, 16246 .euiText h6, 16247 .euiText dt { 16248 color: inherit; } 16249 .euiText pre { 16250 white-space: pre-wrap; 16251 background: #25262E; 16252 color: #DFE5EF; } 16253 .euiText pre, 16254 .euiText pre code { 16255 display: block; } 16256 .euiText code { 16257 font-family: "Roboto Mono", Consolas, Menlo, Courier, monospace; 16258 letter-spacing: normal; 16259 display: inline-block; 16260 font-weight: 400; } 16261 .euiText.euiText--constrainedWidth { 16262 max-width: 36em; 16263 min-width: 75%; } 16264 .euiText > :last-child, 16265 .euiText .euiTextColor > :last-child { 16266 margin-bottom: 0 !important; } 16267 16268.euiText--medium { 16269 font-size: 16px; 16270 font-size: 1rem; 16271 line-height: 1.5; } 16272 .euiText--medium p, 16273 .euiText--medium ul, 16274 .euiText--medium ol, 16275 .euiText--medium dl, 16276 .euiText--medium blockquote, 16277 .euiText--medium img, 16278 .euiText--medium pre { 16279 margin-bottom: 1.5rem; } 16280 .euiText--medium ul, 16281 .euiText--medium ol { 16282 margin-left: 1.5rem; } 16283 .euiText--medium blockquote { 16284 font-size: 1rem; 16285 padding: 1.5rem; } 16286 .euiText--medium h1 { 16287 font-size: 2.25rem; 16288 line-height: 1.33333; 16289 margin-bottom: 0.5rem; } 16290 .euiText--medium h2 { 16291 font-size: 1.75rem; 16292 line-height: 1.42857; 16293 margin-bottom: 0.5rem; } 16294 .euiText--medium h3 { 16295 font-size: 1.25rem; 16296 line-height: 1.6; 16297 margin-bottom: 0.5rem; } 16298 .euiText--medium h4 { 16299 font-size: 1rem; 16300 line-height: 1.5; 16301 margin-bottom: 0.5rem; } 16302 .euiText--medium h5 { 16303 font-size: 0.875rem; 16304 line-height: 1.14286; 16305 margin-bottom: 0.5rem; } 16306 .euiText--medium h6 { 16307 font-size: 0.75rem; 16308 line-height: 1.33333; 16309 margin-bottom: 0.5rem; } 16310 .euiText--medium * + h2 { 16311 margin-top: 2rem; } 16312 .euiText--medium * + h3 { 16313 margin-top: 2rem; } 16314 .euiText--medium * + h4 { 16315 margin-top: 2rem; } 16316 .euiText--medium * + h5 { 16317 margin-top: 2rem; } 16318 .euiText--medium * + h6 { 16319 margin-top: 2rem; } 16320 .euiText--medium dd + dt { 16321 margin-top: 1rem; } 16322 .euiText--medium dt, 16323 .euiText--medium .eui-definitionListReverse dd { 16324 font-size: 1rem; 16325 line-height: 1.5; } 16326 .euiText--medium .eui-definitionListReverse dt { 16327 font-size: 0.75rem; 16328 color: #DFE5EF; } 16329 .euiText--medium small { 16330 font-size: 0.875rem; } 16331 .euiText--medium pre { 16332 padding: 1rem; } 16333 .euiText--medium code { 16334 font-size: 0.9rem; } 16335 .euiText--medium.euiMarkdownFormat .euiMarkdownFormat__blockquote { 16336 padding: 0 1rem; 16337 border-left-width: 0.25rem; 16338 margin-bottom: 1rem; } 16339 .euiText--medium.euiMarkdownFormat .euiCheckbox + *:not(.euiCheckbox) { 16340 margin-top: 1rem; } 16341 .euiText--medium.euiMarkdownFormat .euiCheckbox__label { 16342 font-size: 1rem; 16343 padding-left: 1.5rem; 16344 line-height: 1.5; } 16345 .euiText--medium.euiMarkdownFormat .euiCheckbox + *:not(.euiCheckbox) { 16346 margin-top: 1rem; } 16347 .euiText--medium.euiMarkdownFormat .euiMarkdownFormat__codeblockWrapper { 16348 margin-bottom: 1rem; } 16349 .euiText--medium.euiMarkdownFormat .euiMarkdownFormat__table { 16350 margin-bottom: 1rem; } 16351 .euiText--medium.euiMarkdownFormat .euiMarkdownFormat__table th, 16352 .euiText--medium.euiMarkdownFormat .euiMarkdownFormat__table td { 16353 padding: 0.25rem 0.5rem; } 16354 16355.euiText--small { 16356 font-size: 14px; 16357 font-size: 0.875rem; 16358 line-height: 1.5; } 16359 .euiText--small p, 16360 .euiText--small ul, 16361 .euiText--small ol, 16362 .euiText--small dl, 16363 .euiText--small blockquote, 16364 .euiText--small img, 16365 .euiText--small pre { 16366 margin-bottom: 1.3125rem; } 16367 .euiText--small ul, 16368 .euiText--small ol { 16369 margin-left: 1.3125rem; } 16370 .euiText--small blockquote { 16371 font-size: 0.875rem; 16372 padding: 1.3125rem; } 16373 .euiText--small h1 { 16374 font-size: 1.96875rem; 16375 line-height: 1.33333; 16376 margin-bottom: 0.4375rem; } 16377 .euiText--small h2 { 16378 font-size: 1.53125rem; 16379 line-height: 1.42857; 16380 margin-bottom: 0.4375rem; } 16381 .euiText--small h3 { 16382 font-size: 1.09375rem; 16383 line-height: 1.6; 16384 margin-bottom: 0.4375rem; } 16385 .euiText--small h4 { 16386 font-size: 0.875rem; 16387 line-height: 1.5; 16388 margin-bottom: 0.4375rem; } 16389 .euiText--small h5 { 16390 font-size: 0.76562rem; 16391 line-height: 1.14286; 16392 margin-bottom: 0.4375rem; } 16393 .euiText--small h6 { 16394 font-size: 0.65625rem; 16395 line-height: 1.33333; 16396 margin-bottom: 0.4375rem; } 16397 .euiText--small * + h2 { 16398 margin-top: 1.75rem; } 16399 .euiText--small * + h3 { 16400 margin-top: 1.75rem; } 16401 .euiText--small * + h4 { 16402 margin-top: 1.75rem; } 16403 .euiText--small * + h5 { 16404 margin-top: 1.75rem; } 16405 .euiText--small * + h6 { 16406 margin-top: 1.75rem; } 16407 .euiText--small dd + dt { 16408 margin-top: 0.875rem; } 16409 .euiText--small dt, 16410 .euiText--small .eui-definitionListReverse dd { 16411 font-size: 0.875rem; 16412 line-height: 1.5; } 16413 .euiText--small .eui-definitionListReverse dt { 16414 font-size: 0.65625rem; 16415 color: #DFE5EF; } 16416 .euiText--small small { 16417 font-size: 0.76562rem; } 16418 .euiText--small pre { 16419 padding: 0.875rem; } 16420 .euiText--small code { 16421 font-size: 0.7875rem; } 16422 .euiText--small.euiMarkdownFormat .euiMarkdownFormat__blockquote { 16423 padding: 0 0.875rem; 16424 border-left-width: 0.21875rem; 16425 margin-bottom: 0.875rem; } 16426 .euiText--small.euiMarkdownFormat .euiCheckbox + *:not(.euiCheckbox) { 16427 margin-top: 0.875rem; } 16428 .euiText--small.euiMarkdownFormat .euiCheckbox__label { 16429 font-size: 0.875rem; 16430 padding-left: 1.3125rem; 16431 line-height: 1.5; } 16432 .euiText--small.euiMarkdownFormat .euiCheckbox + *:not(.euiCheckbox) { 16433 margin-top: 0.875rem; } 16434 .euiText--small.euiMarkdownFormat .euiMarkdownFormat__codeblockWrapper { 16435 margin-bottom: 0.875rem; } 16436 .euiText--small.euiMarkdownFormat .euiMarkdownFormat__table { 16437 margin-bottom: 0.875rem; } 16438 .euiText--small.euiMarkdownFormat .euiMarkdownFormat__table th, 16439 .euiText--small.euiMarkdownFormat .euiMarkdownFormat__table td { 16440 padding: 0.21875rem 0.4375rem; } 16441 16442.euiText--extraSmall { 16443 font-size: 12px; 16444 font-size: 0.75rem; 16445 line-height: 1.5; } 16446 .euiText--extraSmall p, 16447 .euiText--extraSmall ul, 16448 .euiText--extraSmall ol, 16449 .euiText--extraSmall dl, 16450 .euiText--extraSmall blockquote, 16451 .euiText--extraSmall img, 16452 .euiText--extraSmall pre { 16453 margin-bottom: 1.125rem; } 16454 .euiText--extraSmall ul, 16455 .euiText--extraSmall ol { 16456 margin-left: 1.125rem; } 16457 .euiText--extraSmall blockquote { 16458 font-size: 0.75rem; 16459 padding: 1.125rem; } 16460 .euiText--extraSmall h1 { 16461 font-size: 1.6875rem; 16462 line-height: 1.33333; 16463 margin-bottom: 0.375rem; } 16464 .euiText--extraSmall h2 { 16465 font-size: 1.3125rem; 16466 line-height: 1.42857; 16467 margin-bottom: 0.375rem; } 16468 .euiText--extraSmall h3 { 16469 font-size: 0.9375rem; 16470 line-height: 1.6; 16471 margin-bottom: 0.375rem; } 16472 .euiText--extraSmall h4 { 16473 font-size: 0.75rem; 16474 line-height: 1.5; 16475 margin-bottom: 0.375rem; } 16476 .euiText--extraSmall h5 { 16477 font-size: 0.65625rem; 16478 line-height: 1.14286; 16479 margin-bottom: 0.375rem; } 16480 .euiText--extraSmall h6 { 16481 font-size: 0.5625rem; 16482 line-height: 1.33333; 16483 margin-bottom: 0.375rem; } 16484 .euiText--extraSmall * + h2 { 16485 margin-top: 1.5rem; } 16486 .euiText--extraSmall * + h3 { 16487 margin-top: 1.5rem; } 16488 .euiText--extraSmall * + h4 { 16489 margin-top: 1.5rem; } 16490 .euiText--extraSmall * + h5 { 16491 margin-top: 1.5rem; } 16492 .euiText--extraSmall * + h6 { 16493 margin-top: 1.5rem; } 16494 .euiText--extraSmall dd + dt { 16495 margin-top: 0.75rem; } 16496 .euiText--extraSmall dt, 16497 .euiText--extraSmall .eui-definitionListReverse dd { 16498 font-size: 0.75rem; 16499 line-height: 1.5; } 16500 .euiText--extraSmall .eui-definitionListReverse dt { 16501 font-size: 0.5625rem; 16502 color: #DFE5EF; } 16503 .euiText--extraSmall small { 16504 font-size: 0.65625rem; } 16505 .euiText--extraSmall pre { 16506 padding: 0.75rem; } 16507 .euiText--extraSmall code { 16508 font-size: 0.675rem; } 16509 .euiText--extraSmall.euiMarkdownFormat .euiMarkdownFormat__blockquote { 16510 padding: 0 0.75rem; 16511 border-left-width: 0.1875rem; 16512 margin-bottom: 0.75rem; } 16513 .euiText--extraSmall.euiMarkdownFormat .euiCheckbox + *:not(.euiCheckbox) { 16514 margin-top: 0.75rem; } 16515 .euiText--extraSmall.euiMarkdownFormat .euiCheckbox__label { 16516 font-size: 0.75rem; 16517 padding-left: 1.125rem; 16518 line-height: 1.5; } 16519 .euiText--extraSmall.euiMarkdownFormat .euiCheckbox + *:not(.euiCheckbox) { 16520 margin-top: 0.75rem; } 16521 .euiText--extraSmall.euiMarkdownFormat .euiMarkdownFormat__codeblockWrapper { 16522 margin-bottom: 0.75rem; } 16523 .euiText--extraSmall.euiMarkdownFormat .euiMarkdownFormat__table { 16524 margin-bottom: 0.75rem; } 16525 .euiText--extraSmall.euiMarkdownFormat .euiMarkdownFormat__table th, 16526 .euiText--extraSmall.euiMarkdownFormat .euiMarkdownFormat__table td { 16527 padding: 0.1875rem 0.375rem; } 16528 16529.euiText--relative { 16530 font-size: 1em; 16531 line-height: 1.5; } 16532 .euiText--relative p, 16533 .euiText--relative ul, 16534 .euiText--relative ol, 16535 .euiText--relative dl, 16536 .euiText--relative blockquote, 16537 .euiText--relative img, 16538 .euiText--relative pre { 16539 margin-bottom: 1.5em; } 16540 .euiText--relative ul, 16541 .euiText--relative ol { 16542 margin-left: 1.5em; } 16543 .euiText--relative blockquote { 16544 font-size: 1em; 16545 padding: 1.5em; } 16546 .euiText--relative h1 { 16547 font-size: 2.25em; 16548 line-height: 1.33333; 16549 margin-bottom: 0.22222em; } 16550 .euiText--relative h2 { 16551 font-size: 1.75em; 16552 line-height: 1.42857; 16553 margin-bottom: 0.28571em; } 16554 .euiText--relative h3 { 16555 font-size: 1.25em; 16556 line-height: 1.6; 16557 margin-bottom: 0.4em; } 16558 .euiText--relative h4 { 16559 font-size: 1em; 16560 line-height: 1.5; 16561 margin-bottom: 0.5em; } 16562 .euiText--relative h5 { 16563 font-size: 0.875em; 16564 line-height: 1.14286; 16565 margin-bottom: 0.57143em; } 16566 .euiText--relative h6 { 16567 font-size: 0.75em; 16568 line-height: 1.33333; 16569 margin-bottom: 0.66667em; } 16570 .euiText--relative * + h2 { 16571 margin-top: 1.14286em; } 16572 .euiText--relative * + h3 { 16573 margin-top: 1.6em; } 16574 .euiText--relative * + h4 { 16575 margin-top: 2em; } 16576 .euiText--relative * + h5 { 16577 margin-top: 2.28571em; } 16578 .euiText--relative * + h6 { 16579 margin-top: 2.66667em; } 16580 .euiText--relative dd + dt { 16581 margin-top: 16pxem; } 16582 .euiText--relative dt, 16583 .euiText--relative .eui-definitionListReverse dd { 16584 font-size: 1em; 16585 line-height: 1.5; } 16586 .euiText--relative .eui-definitionListReverse dt { 16587 font-size: 0.75em; 16588 color: #DFE5EF; } 16589 .euiText--relative small { 16590 font-size: 0.875em; } 16591 .euiText--relative pre { 16592 padding: 1em; } 16593 .euiText--relative code { 16594 font-size: 0.9em; } 16595 .euiText--relative.euiMarkdownFormat .euiMarkdownFormat__blockquote { 16596 padding: 0 1em; 16597 border-left-width: 0.25em; 16598 margin-bottom: 1em; } 16599 .euiText--relative.euiMarkdownFormat .euiCheckbox + *:not(.euiCheckbox) { 16600 margin-top: 1em; } 16601 .euiText--relative.euiMarkdownFormat .euiCheckbox__label { 16602 font-size: 1em; 16603 padding-left: 1.5em; 16604 line-height: 1.5; } 16605 .euiText--relative.euiMarkdownFormat .euiCheckbox + *:not(.euiCheckbox) { 16606 margin-top: 1em; } 16607 .euiText--relative.euiMarkdownFormat .euiMarkdownFormat__codeblockWrapper { 16608 margin-bottom: 1em; } 16609 .euiText--relative.euiMarkdownFormat .euiMarkdownFormat__table { 16610 margin-bottom: 1em; } 16611 .euiText--relative.euiMarkdownFormat .euiMarkdownFormat__table th, 16612 .euiText--relative.euiMarkdownFormat .euiMarkdownFormat__table td { 16613 padding: 0.25em 0.5em; } 16614 16615.euiTextColor--default { 16616 color: #DFE5EF; } 16617 16618.euiTextColor--subdued { 16619 color: #878b95; } 16620 16621.euiTextColor--secondary { 16622 color: #7DE2D1; } 16623 16624.euiTextColor--success { 16625 color: #7DE2D1; } 16626 16627.euiTextColor--accent { 16628 color: #F990C0; } 16629 16630.euiTextColor--warning { 16631 color: #FFCE7A; } 16632 16633.euiTextColor--danger { 16634 color: #F66; } 16635 16636.euiTextColor--ghost { 16637 color: #FFF; 16638 color: #FFF !important; } 16639 16640.euiTextColor--inherit { 16641 color: inherit; } 16642 16643.euiTextAlign--left { 16644 text-align: left; } 16645 16646.euiTextAlign--right { 16647 text-align: right; } 16648 16649.euiTextAlign--center { 16650 text-align: center; } 16651