github.com/siglens/siglens@v0.0.0-20240328180423-f7ce9ae441ed/static/css/siglens.css (about) 1 :root { 2 --black: #000; 3 --white: #fff; 4 --error: #f00; 5 --error-trace: #E93125; 6 --color-danger: #d1242f; 7 --fw-400: 400; 8 --fw-500: 500; 9 --fw-900: 900; 10 11 --lavender-1: #B4A6E6; 12 --lavender-2: #826CE1; 13 --orange-1: #F2A52B; 14 --purple-1: #6347D9; 15 --purple-2: #6449D6; 16 --purple-3: #8270DC; 17 18 --purple-15p: rgba(99, 71, 217, 0.15); 19 20 --shadow-1: #6F6B7B29; 21 --shadow-2: #00000029; 22 --trace-error-shadow:#E9312526; 23 24 /* Dark Theme - default */ 25 --black-1: #160F29; 26 --black-2: #262038; 27 --black-3: #383148; 28 --black-4: #504B5F; 29 --black-5: #6F6B7B; 30 --black-6: #C8C7CC; 31 --black-7: #453F54; 32 33 /* Light Theme - default */ 34 --white-0: #FFFFFF; 35 --white-1: #F4F4F5; 36 --white-2: #EBEBED; 37 --white-3: #DCDBDF; 38 --white-4: #6F6B7B; 39 --white-5: #262038; 40 --white-6: #160F29; 41 --white-7: #453F54; 42 --white-8: #9C99A3; 43 44 /* Metrics UI Graph Line Colors */ 45 --graph-line-color-1: #FF0000; 46 --graph-line-color-2: #FF8700; 47 --graph-line-color-3: #FFD300; 48 --graph-line-color-4: #DEFF0A; 49 --graph-line-color-5: #FF5400; 50 --graph-line-color-6: #A1FF0A; 51 --graph-line-color-7: #580AFF; 52 --graph-line-color-8: #E67F0D; 53 --graph-line-color-9: #00FFD0; 54 --graph-line-color-10: #3C5B55; 55 --graph-line-color-11: #A46774; 56 --graph-line-color-12: #F20089; 57 --graph-line-color-13: #780790; 58 --graph-line-color-14: #AA00FF; 59 --graph-line-color-15: #759C17; 60 --graph-line-color-16: #00A7EF; 61 --graph-line-color-17: #F9CB1F; 62 --graph-line-color-18: #33E566; 63 --graph-line-color-19: #2D00F7; 64 --graph-line-color-20: #FD23DE; 65 66 /* aliases - these are the values to optionally override for the light theme */ 67 --bg-color: var(--black-2); 68 --text-color: var(--white-0); 69 --hits-summary-text-color: var(--black-6); 70 --table-or-regular-text-color: var(--black-6); 71 72 --border-switch: var(--white-3); 73 --border-btn-color: var(--black-5); 74 --filter-color: var(--black-2); 75 --table-head-bg-color: var(--black-2); 76 --panel-table-line-color: var(--white-4); 77 78 --default-tab: var(--black-1); 79 80 --input-color: var(--white-0); 81 --input-bg-color: var(--black-1); 82 --input-border-color: transparent; 83 84 --button-text-color: var(--white-0); 85 --button-bg-color: var(--black-1); 86 --button-border-color: transparent; 87 88 --side-nav-bg-color: var(--black-1); 89 90 --component-bg-color: var(--black-5); 91 --component-bg-color-hover: var(--black-7); 92 --component-text-color: var(--white-0); 93 94 --date-picker-bg: var(--bg-color); 95 96 --calendar-range-bg-color: var(--button-bg-color); 97 --calendar-range-color: var(--text-color); 98 99 --menu-icon-color: var(--bg-color); 100 --source-key-color: var(--text-color); 101 --source-key-bg-color: var(--bg-color); 102 103 --side-nav-selected-border-color: var(--orange-1); 104 --side-nav-bg-color-regular: var(--black-1); 105 --side-nav-bg-color-selected: var(--black-2); 106 107 --top-bar-bg-color-regular: var(--black-2); 108 109 --search-bar-bg: var(--black-1); 110 --search-bar-text-color-regular-or-hover: var(--black-5); 111 --search-bar-text-color-active: var(--black-6); 112 113 --btn-regular-bg-color: var(--purple-1); 114 --btn-hover-or-click-bg-color: var(--lavender-2); 115 116 --border-color-regular: var(--black-5); 117 118 --log-views-btn-click-bg-color: var(--purple-2); 119 120 --text-color-regular: var(--white-0); 121 122 --drop-down-btn-bg-regular: var(--black-1); 123 --drop-down-btn-bg-hover: var(--black-7); 124 --drop-down-btn-bg-active: var(--purple-15p); 125 --drop-down-btn-border-active: var(--purple-1); 126 --dropdown-bg-color-new: var(--black-5); 127 128 --drop-down-text-color: var(--white-1); 129 --drop-down-text-color-new: var(--white-3); 130 131 --hits-summary-bg-regular: var(--black-1); 132 --hits-summary-small-text-color: var(--black-5); 133 134 --datatable-row-text-color: var(--black-6); 135 --datatable-even-row-bg-color: var(--black-3); 136 --datatable-odd-row-bg-color: var(--black-1); 137 138 --datatable-bg-color: var(--black-1); 139 --datatable-header-bg-color: var(--black-4); 140 --datatable-row-column-line-color: var(--black-2); 141 --datatable-header-text-color: var(--white-0); 142 143 144 --accent-color: var(--purple-1); 145 --ui-widget-border-color: var(--black-5); 146 --ui-widget-bg-color: var(--black-1); 147 --ui-widget-input-default-color: var(--black-6); 148 --ui-widget-overlay-bg-color: var(--black-1); 149 150 --footer-text-color: var(--black-5); 151 152 --cstats-table-bg-color: var(--black-1); 153 --table-row-column-line-color: var(--black-2); 154 155 --theme-btn-hover-bg-color: var(--black-3); 156 --theme-btn-active-bg-color: var(--purple-1); 157 158 --table-header-bg-color: var(--black-4); 159 --cstats-header-text-color: var(--white); 160 --health-stats-value-text-color: var(--black-6); 161 162 --index-drop-down-box-bg-color: var(--black-1); 163 --index-drop-down-item-inactive-bg-color: var(--black-2); 164 --index-drop-down-item-hover-bg-color: var(--black-7); 165 --index-drop-down-item-active-bg-color: var(--purple-1); 166 --index-drop-down-item-active-text-color: var(--white-0); 167 --index-drop-down-item-hover-text-color: var(--white-0); 168 --index-drop-down-item-inactive-text-color: var(--black-5); 169 170 --available-fields-drop-down-box-bg-color: var(--black-1); 171 --available-fields-drop-down-item-inactive-bg-color: var(--black-2); 172 --available-fields-drop-down-item-hover-bg-color: var(--black-7); 173 --available-fields-drop-down-item-active-bg-color: var(--purple-1); 174 --available-fields-drop-down-item-active-text-color: var(--white-0); 175 --available-fields-drop-down-item-hover-text-color: var(--white-0); 176 --available-fields-drop-down-item-inactive-text-color: var(--black-5); 177 --select-unselect-header-text-color: var(--white-0); 178 --select-unselect-box-border-color-regular: var(--black-5); 179 --select-unselect-box-border-color-hover: var(--lavender-1); 180 --select-unselect-box-border-color-clicked: var(--black-5); 181 182 --query-link-text-color: var(--orange-1); 183 184 --progress-bar-value-color: var(--purple-1); 185 --progress-bar-bg-color: var(--black-1); 186 187 --timepicker-border-color: var(--black-5); 188 --timepicker-bg-color: var(--black-1); 189 --timepicker-text-color: var(--black-5); 190 --timepicker-text-color-active: var(--black-6); 191 --timepicker-bg-color-hover: var(--black-2) ; 192 --timepicker-text-color-hover: var(--lavender-1) ; 193 194 --timepicker-click-bg-color: var(--purple-2); 195 --timepicker-hr-color: var(--black-5); 196 --timepicker-dt-hdr-color: var(--white-0); 197 --timepicker-reset-color: var(--black-5); 198 199 --timepicker-btn-regular : var(--lavender-1); 200 --timepicker-btn-hover : var(--lavender-2); 201 202 203 --empty-response-text-color: var(--black-5); 204 --dashboard-title-color: var(--orange-1); 205 206 --dropdown-border-color:var(--white-4); 207 --dropdown-icon-color:var(--white-0); 208 209 --navbar-link-text:var(--white-4); 210 --navbar-link-text-active:var(--white-0); 211 212 --metrics-legends-text-color: var(--white-4); 213 --legend-element-hover: var(--white); 214 215 --myOrg-button: var(--black-1); 216 --myOrg-input: var(--black-1); 217 --myOrg-dropdown-bg: var(--black-2); 218 --myOrg-dropdown-options-bg:var(--black-1); 219 --myOrg-dropdown-color: var(--white-4); 220 --myOrg-dropdown-border-color:var(--white-4); 221 222 --delete-btn: var(--color-danger); 223 --subsection-border: var(--white-3); 224 --search-input-border: var(--white-4); 225 --caption-color: var(--white-1); 226 --box-shadow : 0px 2px 8px 0px rgba(111, 107, 123, 0.16); 227 --alert-background : var(--black-2); 228 --black1-to-white0: var(--black-1); 229 --alerting-table-bg-color:var(--black-2); 230 --alerting-table-line-color:var(--white-4); 231 --alerting-table-hover: var(--black-2); 232 --tab-active-background:var(--purple-1); 233 --dashboard-tab-bg: var(--black-2); 234 --top-refresh-btn-bg-img: url("../assets/refresh-icon.svg"); 235 --new-tab-icon: url("../assets/new-tab-icon-dark.svg"); 236 --copy-icon: url("../assets/copy-icon-dark-mode.svg"); 237 } 238 239 /* end aliases */ 240 241 242 /* Light Theme */ 243 [data-theme='light'] { 244 --bg-color: var(--white-0); 245 --text-color: var(--white-6); 246 --hits-summary-text-color: var(--white-5); 247 --table-or-regular-text-color: var(--white-4); 248 249 --border-switch: var(--black-5); 250 --border-btn-color: var(--white-3); 251 --default-tab: var(--white-0); 252 --filter-color: var(--white-2); 253 --table-head-bg-color: var(--white-1); 254 --panel-table-line-color: var(--white-3); 255 256 --input-color: var(--white-2); 257 --input-bg-color: var(--white-6); 258 259 --button-text-color: var(--white-1); 260 --button-bg-color: var(--white-6); 261 262 --top-bar-bg-color-regular: var(--white-0); 263 264 --search-bar-bg: var(--white-1); 265 --search-bar-text-color-regular-or-hover: var(--white-8); 266 --search-bar-text-color-active: var(--white-5); 267 268 --ui-widget-border-color: var(--white-3); 269 --ui-widget-bg-color: var(--white-0); 270 --ui-widget-input-default-color: var(--black-6); 271 --component-text-color: var(--white-0); 272 273 --border-color-regular: var(--white-3); 274 275 --text-color-regular: var(--black-1); 276 277 --drop-down-btn-bg-regular: var(--white-1); 278 --dropdown-bg-color-new: var(--white-2); 279 --drop-down-btn-bg-hover: var(--white-2); 280 --drop-down-btn-bg-active: var(--purple-15p); 281 282 --drop-down-text-color: var(--white-6); 283 --drop-down-text-color-new: var(--black-5); 284 285 --hits-summary-bg-regular: var(--white-2); 286 --hits-summary-small-text-color: var(--white-6); 287 --hits-summary-regular-text-color: var(--white-5); 288 289 --datatable-row-text-color: var(--white-4); 290 --datatable-odd-row-bg-color: var(--white-1); 291 --datatable-even-row-bg-color: var(--white-2); 292 293 --datatable-bg-color: var(--white-1); 294 --datatable-header-bg-color: var(--white-3); 295 --datatable-row-column-line-color: var(--white-0); 296 --datatable-header-text-color: var(--black-1); 297 298 299 --theme-btn-hover-bg-color: var(--white-3); 300 --theme-btn-active-bg-color: var(--white-0); 301 302 --footer-text-color: var(--white-8); 303 --cstats-table-bg-color: var(--white-1); 304 --table-header-bg-color: var(--white-3); 305 --table-row-column-line-color: var(--white); 306 --cstats-header-text-color: var(--black-1); 307 --health-stats-value-text-color: var(--white-4); 308 309 --index-drop-down-box-bg-color: var(--white-1); 310 --index-drop-down-item-inactive-bg-color: var(--white-2); 311 --index-drop-down-item-hover-bg-color: var(--white-3); 312 --index-drop-down-item-active-bg-color: var(--purple-1); 313 --index-drop-down-item-active-text-color: var(--white-0); 314 --index-drop-down-item-hover-text-color: var(--black-5); 315 --index-drop-down-item-inactive-text-color: var(--black-5); 316 317 --available-fields-drop-down-box-bg-color: var(--white-2); 318 --available-fields-drop-down-item-inactive-bg-color: var(--white-4); 319 --available-fields-drop-down-item-hover-bg-color: var(--white-3); 320 --available-fields-drop-down-item-active-bg-color: var(--purple-1); 321 --available-fields-drop-down-item-active-text-color: var(--white-0); 322 --available-fields-drop-down-item-hover-text-color: var(--white-4); 323 --available-fields-drop-down-item-inactive-text-color: var(--black-5); 324 --select-unselect-header-text-color: var(--black-1); 325 --select-unselect-box-border-color-regular: var(--black-5); 326 --select-unselect-box-border-color-hover: var(--lavender-1); 327 --select-unselect-box-border-color-clicked: var(--black-5); 328 329 --query-link-text-color: var(--purple-1); 330 331 --empty-response-text-color: var(--white-8); 332 --progress-bar-bg-color: var(--white-1); 333 --progress-bar-value-color: var(--lavender-1); 334 335 --timepicker-border-color: var(--white-3); 336 --timepicker-bg-color: var(--white-0); 337 --timepicker-bg-color-hover: var(--white-2) ; 338 --timepicker-bg-color-active: var(--purple-2); 339 --timepicker-hr-color: var(--white-3); 340 --timepicker-dt-hdr-color: var(--white-6); 341 --timepicker-reset-bg-color: var(--white-4); 342 343 344 --timepicker-text-color: var(--white-8); 345 --timepicker-text-color-active: var(--white-5); 346 347 --dashboard-title-color: var(--purple-1); 348 --dropdown-border-color: var(--white-3); 349 350 --dropdown-icon-color:var(--white-6) ; 351 352 --navbar-link-text:var(--white-4); 353 --navbar-link-text-active:var(--white-0); 354 355 --metrics-legends-text-color: var(--white-4); 356 --legend-element-hover: var(--black); 357 358 --myOrg-button: var(--white-8); 359 --myOrg-input: var(--white-1); 360 --myOrg-dropdown-bg: var(--white-2); 361 --myOrg-dropdown-options-bg:var(--white-0); 362 --myOrg-dropdown-color:var(--white-5); 363 --myOrg-dropdown-border-color:var(--white-3); 364 --subsection-border: var(--white-4); 365 --search-input-border: var(--white-3); 366 --box-shadow : 0px 2px 8px 0px rgba(0, 0, 0, 0.16); 367 --alert-background : var(--white-1); 368 --black1-to-white0 : var(--white-0); 369 --alerting-table-bg-color:var(--white-2); 370 --alerting-table-line-color: var(--white-3); 371 --alerting-table-hover: var(--white-1); 372 --tab-active-background: #E8E3F9; 373 --dashboard-tab-bg: var(--white-1); 374 --top-refresh-btn-bg-img: url("../assets/refreshy-icon.svg"); 375 --new-tab-icon: url("../assets/new-tab-icon-light.svg"); 376 --copy-icon: url("../assets/copy-icon.svg"); 377 } 378 379 380 html { 381 font-size: 16px; 382 height: 100%; 383 } 384 385 body { 386 -webkit-font-smoothing: antialiased; 387 -moz-osx-font-smoothing: grayscale; 388 389 background: var(--bg-color); 390 color: var(--text-color); 391 392 font-size: 14px; 393 font-weight: var(--fw-400); 394 font-family: "DINpro", Arial, sans-serif; 395 min-height: 100%; 396 } 397 398 @font-face { 399 font-family: "DINpro"; 400 src: url(./fonts/DINPro-400.otf); 401 } 402 403 [data-theme='dark'] .dropdown-arrow.blue, 404 [data-theme='light'] .dropdown-arrow.blue { 405 display: none; 406 } 407 408 [data-theme='light'] .dropdown-toggle.active .dropdown-arrow.blue { 409 display: inline; 410 } 411 412 [data-theme='light'] .dropdown-toggle.active .dropdown-arrow.orange { 413 display: none; 414 } 415 416 .theme-btn-group { 417 width: 48px; 418 border-radius: 5px; 419 padding: 4px; 420 display: flex; 421 align-items: center; 422 justify-content: center; 423 margin-right: 6px !important; 424 } 425 426 #theme-btn { 427 box-sizing: border-box; 428 width: 36px; 429 height: 36px; 430 padding: 0; 431 border-radius: 4px; 432 background-color: transparent !important; 433 } 434 435 .theme-btn:hover { 436 background: var(--theme-btn-hover-bg-color) !important; 437 } 438 439 .theme-btn:focus { 440 background: var(--btn-regular-bg-color); 441 } 442 443 [data-theme='light'] .theme-btn .theme-img.dark{ 444 display: inline; 445 } 446 447 [data-theme='light'] .theme-btn .theme-img.light{ 448 display: none; 449 } 450 451 [data-theme='dark'] .theme-btn .theme-img.dark{ 452 display: none; 453 } 454 455 [data-theme='dark'] .theme-btn .theme-img.light{ 456 display: inline; 457 } 458 459 460 [data-theme="light"] .div-toast { 461 color: var(--white-0); 462 } 463 464 [data-theme="light"] .test-data-toast, .ret-days-toast, .usage-stats-toast { 465 color: var(--white-0); 466 } 467 #app-container { 468 display: flex; 469 height: 100vh; 470 position: relative; 471 } 472 473 #cstats-app-container { 474 display: flex; 475 height: 100vh; 476 } 477 478 #dashboard { 479 width: 100%; 480 display: flex; 481 flex-direction: column; 482 overflow: hidden; 483 } 484 485 /* Navigation */ 486 487 .icon-myorg, 488 .icon-cstats, 489 .icon-search, 490 .icon-usq, 491 .sslogo, 492 .icon-launchdb, 493 .icon-metrics, 494 .icon-alerts, 495 .icon-minion, 496 .icon-live, 497 .icon-traces, 498 .icon-ingest, 499 .icon-help{ 500 min-height: 42px; 501 min-width: 48px; 502 background-origin: content-box; 503 background-repeat: no-repeat; 504 background-size: auto; 505 background-position: 50%; 506 display: inline-block; 507 border: 0; 508 } 509 510 #app-side-nav { 511 justify-items: center; 512 background: var(--side-nav-bg-color-regular); 513 color: var(--text-color); 514 position: relative; 515 display: flex; 516 flex-direction: column; 517 justify-content: space-between; 518 width: 176px !important; 519 transition: all 0.3s linear; 520 } 521 522 #app-side-nav .menu { 523 min-height: 38px; 524 border-left: 5px solid transparent; 525 border-right: 5px solid transparent; 526 border-radius: 0 5px 5px 0; 527 margin-bottom: 2px; 528 margin-right: 8px; 529 } 530 531 #app-side-nav .menu.active { 532 border-left: 5px solid var(--side-nav-selected-border-color); 533 border-right: 5px solid var(--side-nav-bg-color-selected); 534 background-color: var(--side-nav-bg-color-selected); 535 border-radius: 0 5px 5px 0; 536 } 537 538 #app-side-nav .menu.logo { 539 display: flex; 540 justify-content: center; 541 padding: 16px; 542 } 543 #app-side-nav.active .menu.logo { 544 padding: 20px 0 20px 0px; 545 } 546 547 #app-side-nav .menu.logo .sslogo { 548 height: 44px; 549 width: 37px; 550 } 551 552 .icon-search { 553 background-image: url("../assets/search-icon-inactive.svg"); 554 height: 19px; 555 width: 19px; 556 } 557 558 .icon-cstats { 559 background-image: url("../assets/cluster-health-icon-inactive.svg"); 560 height: 23px; 561 width: 18px; 562 } 563 564 .icon-usq { 565 background-image: url("../assets/saved-queries-icon-inactive.svg"); 566 height: 18px; 567 width: 18px; 568 } 569 .icon-metrics { 570 background-image: url("../assets/metrics-icon-inactive.svg"); 571 height: 18px; 572 width: 18px; 573 } 574 575 .icon-feedback { 576 background-image: url("../assets/feedback-icon-inactive.svg"); 577 height: 18px; 578 width: 18px; 579 margin-right: 10px; 580 } 581 582 .icon-launchdb{ 583 background-image: url("../assets/dashboard-icon-inactive.svg"); 584 height: 18px; 585 width: 18px; 586 } 587 588 .icon-myorg { 589 background-image: url("../assets/my-org-icon-inactive.svg"); 590 height: 18px; 591 width: 18px; 592 } 593 594 .icon-ingest { 595 background-image: url("../assets/ingestion-icon-inactive.svg"); 596 height: 18px; 597 width: 18px; 598 } 599 600 .icon-alerts { 601 background-image: url("../assets/alerting-icon-inactive.svg"); 602 height: 18px; 603 width: 18px; 604 } 605 606 .icon-minion { 607 background-image: url("../assets/minion-icon-inactive.svg"); 608 height: 24px; 609 width: 24px; 610 } 611 612 .icon-live { 613 background-image: url("../assets/live-tail-icon-inactive.svg"); 614 height: 24px; 615 width: 24px; 616 } 617 618 .icon-traces { 619 background-image: url("../assets/tracing-icon-inactive.svg"); 620 height: 24px; 621 width: 24px; 622 } 623 624 .icon-search:hover, 625 .menu.nav-search.active .icon-search { 626 background-image: url("../assets/search-icon-active.svg"); 627 height: 19px; 628 width: 19px; 629 } 630 631 .icon-cstats:hover, 632 .menu.nav-cstats.active .icon-cstats { 633 background-image: url("../assets/cluster-health-icon-active.svg"); 634 height: 23px; 635 width: 18px; 636 } 637 638 .icon-usq:hover, 639 .menu.nav-usq.active .icon-usq { 640 background-image: url("../assets/saved-queries-icon-active.svg"); 641 height: 18px; 642 width: 18px; 643 } 644 645 .icon-feedback:hover, 646 .menu.nav-feedback.active .icon-feedback { 647 background-image: url("../assets/feedback-icon-active.svg"); 648 height: 18px; 649 width: 18px; 650 } 651 652 .icon-launchdb:hover, 653 .menu.nav-ldb.active .icon-launchdb { 654 background-image: url("../assets/dashboard-icon-active.svg"); 655 height: 18px; 656 width: 18px; 657 } 658 .icon-metrics:hover, 659 .menu.nav-metrics.active .icon-metrics { 660 background-image: url("../assets/metrics-icon-active.svg"); 661 height: 18px; 662 width: 18px; 663 } 664 665 .icon-myorg:hover, 666 .menu.nav-myorg.active .icon-myorg { 667 background-image: url("../assets/my-org-icon-active.svg"); 668 height: 18px; 669 width: 18px; 670 } 671 672 .icon-ingest:hover, 673 .menu.nav-ingest.active .icon-ingest { 674 background-image: url("../assets/ingestion-icon-active.svg"); 675 height: 18px; 676 width: 18px; 677 } 678 679 .icon-alerts:hover, 680 .menu.nav-alerts.active .icon-alerts{ 681 background-image: url("../assets/alerting-icon-active.svg"); 682 height: 18px; 683 width: 18px; 684 } 685 686 .icon-minion:hover, 687 .menu.nav-minion.active .icon-minion{ 688 background-image: url("../assets/minion-icon.svg"); 689 height: 24px; 690 width: 24px; 691 } 692 693 .icon-live:hover, 694 .menu.nav-live.active .icon-live { 695 background-image: url("../assets/live-tail-icon-active.svg"); 696 height: 24px; 697 width: 24px; 698 } 699 700 .icon-traces:hover, 701 .menu.nav-traces.active .icon-traces { 702 background-image: url("../assets/tracing-icon-active.svg"); 703 height: 24px; 704 width: 24px; 705 } 706 #filter-container { 707 display: grid; 708 grid-template-columns: 2fr auto auto auto auto; 709 column-gap: 15px; 710 margin-top: 16px; 711 margin-left: 23px; 712 margin-right: 10px; 713 height: 44px; 714 background-color: var(--top-bar-bg-color-regular); 715 } 716 #cancel-loading, 717 #live-tail-btn, 718 #add-icon, 719 #add-icon-second, 720 #create-db-btn, 721 #run-metrics-query-btn, 722 #logout-btn, 723 #search-query-btn, 724 #test-data-btn{ 725 background: var(--btn-regular-bg-color); 726 } 727 #live-tail-btn, 728 #saveq-btn { 729 position: relative; 730 border-radius: 5px; 731 } 732 733 #add-icon:hover, 734 #add-icon-second:hover, 735 #live-tail-btn:hover, 736 #cancel-loading:hover, 737 #search-query-btn:hover, 738 #run-metrics-query-btn:hover{ 739 background: var(--btn-hover-or-click-bg-color); 740 } 741 742 #add-icon.active, 743 #add-icon-second:active, 744 #live-tail-btn.active, 745 #cancel-loading.active { 746 background: var(--btn-hover-or-click-bg-color); 747 } 748 #alert-btn, 749 #index-btn, 750 #query-language-btn, 751 #date-picker-btn, 752 #cancel-loading, 753 #live-tail-btn, 754 #create-db-btn, 755 #logout-btn, 756 #search-query-btn, 757 #test-data-btn{ 758 margin: 0; 759 text-decoration: none; 760 height: 30px; 761 display: flex; 762 justify-content: space-evenly; 763 align-items: center; 764 } 765 .run-metrics-query-btn{ 766 margin: 0; 767 text-decoration: none; 768 border: none; 769 height: 32px; 770 } 771 #query-language-btn { 772 width: 108px; 773 margin-left: 16px; 774 } 775 776 777 .avail-fields-btn { 778 height: 30px; 779 padding: 0 14px; 780 } 781 #alert-btn:hover, 782 #index-btn:hover, 783 #query-language-btn:hover, 784 #date-picker-btn:hover, 785 #avail-fields-btn:hover { 786 background: var(--drop-down-btn-bg-hover); 787 } 788 789 #avail-fields-btn:focus, 790 #alert-btn.active, 791 #index-btn.active, 792 #query-language-btn.active, 793 #date-picker-btn.active, 794 #avail-fields-btn.active 795 #source-selection.active { 796 background: var(--drop-down-btn-bg-active) !important; 797 outline: 1px solid var(--drop-down-btn-border-active); 798 outline-offset: -1pt; 799 } 800 801 #date-picker-btn { 802 width: 140px !important; 803 } 804 805 .dropdown-arrow { 806 border: none; 807 } 808 809 #query-language-btn.active .dropdown-arrow.orange, 810 #alert-btn.active .dropdown-arrow.orange, 811 #index-btn.active .dropdown-arrow.orange, 812 #date-picker-btn.active .dropdown-arrow.orange, 813 #avail-fields-btn.active .dropdown-arrow.orange, 814 #refresh-picker-btn.active .dropdown-arrow.orange { 815 padding-left: 0; 816 padding-right: 15px; 817 transform: rotate(180deg); 818 } 819 820 #available-indexes { 821 width: 300px; 822 } 823 #associated-alerts { 824 width: 300px; 825 } 826 #app-footer { 827 position: fixed; 828 bottom: 0; 829 right: 40px; 830 font-size: 0.7rem; 831 z-index: -100; 832 width: fit-content; 833 height: 23px; 834 font-style: normal; 835 font-weight: 500; 836 line-height: 23px; 837 letter-spacing: -0.02em; 838 color: var(--footer-text-color); 839 } 840 841 #cstats-app-footer { 842 float: right; 843 font-size: 0.7rem; 844 width: 126px; 845 height: 23px; 846 font-style: normal; 847 font-weight: 500; 848 line-height: 23px; 849 letter-spacing: -0.02em; 850 color: var(--footer-text-color); 851 } 852 853 /* bootstrap overrides*/ 854 .btn { 855 background-color: var(--drop-down-btn-bg-regular); 856 color: var(--drop-down-text-color) !important; 857 border-radius: 5px; 858 box-shadow: none !important; 859 font-size: 14px; 860 } 861 862 .btn:focus { 863 border-radius: 5px; 864 box-shadow: none !important; 865 } 866 867 #add-icon, 868 #add-icon-second, 869 #live-tail-btn, 870 #run-filter-btn, 871 #cancel-loading, 872 #create-db-btn, 873 #run-metrics-query-btn, 874 #logout-btn, 875 #search-query-btn, 876 #test-data-btn{ 877 color: var(--button-text-color) !important; 878 } 879 880 #log-opt-single-btn.btn.active, 881 #log-opt-multi-btn.btn.active, 882 #log-opt-table-btn.btn.active { 883 background: var(--log-views-btn-click-bg-color) !important; 884 } 885 886 input.form-control { 887 background: var(--hits-summary-bg-regular) !important; 888 color: var(--search-bar-text-color-regular-or-hover); 889 font-size: 14px; 890 border-radius: 5px; 891 transition: none; 892 box-shadow: none !important; 893 } 894 895 input.form-control:focus { 896 color: var(--search-bar-text-color-active); 897 border-radius: 5px; 898 background: var(--search-bar-bg); 899 outline: 1pt solid var(--drop-down-btn-border-active); 900 outline-offset: -1pt; 901 } 902 903 .dropdown-toggle::after { 904 display: none !important; 905 padding: 0; 906 } 907 908 /* end - bootstrap overrides*/ 909 910 #progress-div { 911 display: grid; 912 grid-template-columns: 3fr auto; 913 column-gap: 25px; 914 margin-top: 15px; 915 margin-left: 23px; 916 margin-right: 25px; 917 height: 8px; 918 919 font-size: 14px; 920 font-weight: 600; 921 } 922 923 #percent-value { 924 line-height: 10px; 925 color: var(--hits-summary-text-color); 926 } 927 928 progress { 929 margin-top: 4px; 930 height: 5px!important; 931 width: 100%; 932 text-align: center; 933 background-color: var(--progress-bar-bg-color); 934 border-radius: 50px !important 935 } 936 937 /* For Chrome or Safari */ 938 progress::-webkit-progress-bar { 939 background-color: var(--progress-bar-bg-color); 940 border-radius: 50px !important 941 } 942 943 progress::-webkit-progress-value { 944 background-color: var(--progress-bar-value-color) !important; 945 border-radius: 50px !important 946 } 947 948 progress::-moz-progress-bar { 949 background-color: var(--progress-bar-value-color) !important; 950 border-radius: 50px !important 951 } 952 953 progress.hidden { 954 height: 0; 955 transition-delay: .4s; 956 } 957 958 .hits-summary { 959 font-size: 16px; 960 display: flex; 961 flex-direction: column; 962 justify-content: space-between; 963 } 964 .hits-summary div{ 965 margin-top: 10px; 966 } 967 .hits-summary div:last-child{ 968 margin-top: 20px; 969 font-size: 12px; 970 color: var(--hits-summary-small-text-color); 971 } 972 #hits-summary progress { 973 vertical-align: middle; 974 } 975 976 [data-theme='light'] #hits-summary { 977 color: var(--hits-summary-regular-text-color); 978 font-weight: var(--fw-400); 979 } 980 981 [data-theme='light'] .total-hits { 982 color: var(--hits-summary-small-text-color); 983 font-weight: var(--fw-500); 984 } 985 986 #logs-view-controls { 987 display: grid; 988 grid-template-columns: repeat(2, auto); 989 990 } 991 #logs-view-controls.hidden{ 992 height: 0; 993 } 994 995 #save-query-div { 996 display: flex; 997 justify-content: flex-start; 998 margin-top: 5px; 999 position: relative; 1000 } 1001 1002 #log-view { 1003 width: 102px; 1004 height: 30px; 1005 background-color: var(--drop-down-btn-bg-regular); 1006 border-radius: 5px; 1007 border: 1px solid var(--border-btn-color); 1008 } 1009 1010 .single-line-icon, 1011 .multi-line-icon, 1012 .table-view-icon { 1013 background-origin: content-box; 1014 background-repeat: no-repeat; 1015 background-size: auto; 1016 background-position: 50%; 1017 display: inline-block; 1018 border: 0; 1019 min-height: 16px; 1020 min-width: 16px; 1021 } 1022 1023 .single-line-icon { 1024 background-image: url("../assets/single-line-icon.svg"); 1025 background-size: 15px; 1026 1027 } 1028 1029 .multi-line-icon { 1030 background-image: url("../assets/wrap-line-icon.svg"); 1031 height: 16px; 1032 width: 18px; 1033 } 1034 1035 .table-view-icon { 1036 background-image: url("../assets/table-view-icon.svg"); 1037 height: 16px; 1038 width: 16px; 1039 } 1040 1041 .btn.active .single-line-icon { 1042 background-image: url("../assets/single-line-icon-active.svg"); 1043 background-size: 24px; 1044 } 1045 1046 .btn.active .multi-line-icon { 1047 background-image: url("../assets/wrap-line-icon-active.svg"); 1048 height: 16px; 1049 width: 18px; 1050 } 1051 1052 .btn.active .table-view-icon { 1053 background-image: url("../assets/table-view-icon-active.svg"); 1054 height: 16px; 1055 width: 16px; 1056 } 1057 .table-view-icon, 1058 .multi-line-icon, 1059 .single-line-icon { 1060 background-repeat: no-repeat; 1061 background-position: center; 1062 } 1063 1064 #log-opt-single-btn, 1065 #log-opt-multi-btn, 1066 #log-opt-table-btn { 1067 width: 32px; 1068 height: 22px; 1069 border-radius: 4px !important; 1070 display: flex; 1071 justify-content: center; 1072 align-items: center; 1073 padding: 0px; 1074 } 1075 1076 #log-opt-single-btn { 1077 margin: 3px; 1078 } 1079 #log-opt-multi-btn { 1080 margin: 3px 3px 3px 0; 1081 } 1082 1083 #log-opt-table-btn { 1084 margin: 3px 3px 3px 0; 1085 } 1086 1087 #log-opt-single-btn:hover, 1088 #log-opt-multi-btn:hover, 1089 #log-opt-table-btn:hover { 1090 background-color: var(--theme-btn-hover-bg-color); 1091 } 1092 1093 #views-container { 1094 display: flex; 1095 justify-content: flex-end; 1096 column-gap: 15px; 1097 margin-top: 5px; 1098 margin-left: 23px; 1099 margin-right: 25px; 1100 border-radius: 5px; 1101 } 1102 1103 .details-control { 1104 cursor: pointer; 1105 } 1106 1107 1108 #corner-popup { 1109 display: none; 1110 box-sizing: border-box; 1111 max-height: 200px; 1112 min-height: 50px; 1113 z-index: 9999; 1114 position: relative; 1115 top: 18vh; 1116 /* bottom: 30px; */ 1117 right: 8px; 1118 min-width: 300px; 1119 max-width: 95vw; 1120 padding: 38px 70px; 1121 overflow: hidden; 1122 align-self: center; 1123 background: var(--ui-widget-bg-color); 1124 border: 1px solid var(--ui-widget-border-color); 1125 border-radius: 8px !important; 1126 } 1127 .corner-text{ 1128 color:var(--text-color); 1129 font-size: 16px; 1130 line-height: 24px; 1131 font-weight: var(--fw-400); 1132 text-align: center; 1133 } 1134 1135 #corner-popup .corner-container { 1136 display: flex; 1137 justify-content: space-between; 1138 margin-bottom: 28px; 1139 column-gap: 3px; 1140 flex-wrap: nowrap; 1141 align-self: center; 1142 } 1143 #empty-qsearch-response, 1144 #empty-response { 1145 text-align: center; 1146 font-size: 24px; 1147 line-height: 31px; 1148 font-weight: var(--fw-500); 1149 color: var(--empty-response-text-color); 1150 left: 0; 1151 right: 0; 1152 /* margin: auto; */ 1153 margin-left: auto; 1154 margin-right: auto; 1155 margin-top: 15%; 1156 } 1157 1158 /* Save Query Dialog box 1159 ----------------------------------*/ 1160 .ui-helper-clearfix:before, 1161 .ui-helper-clearfix:after { 1162 content: ""; 1163 display: table; 1164 border-collapse: collapse; 1165 } 1166 1167 .ui-helper-clearfix:after { 1168 clear: both; 1169 } 1170 1171 .ui-dialog { 1172 position: absolute; 1173 top: 0; 1174 left: 0; 1175 padding: .2em; 1176 outline: 0; 1177 z-index: 999; 1178 } 1179 1180 .ui-dialog .ui-dialog-titlebar { 1181 padding: .4em 1em; 1182 position: relative; 1183 } 1184 1185 .ui-dialog .ui-dialog-title { 1186 float: left; 1187 margin: .1em 0; 1188 white-space: nowrap; 1189 width: 90%; 1190 overflow: hidden; 1191 text-overflow: ellipsis; 1192 } 1193 1194 .ui-dialog .ui-dialog-content { 1195 position: relative; 1196 border: 0; 1197 padding: .5em 1em; 1198 background: none; 1199 overflow: auto; 1200 } 1201 1202 .ui-dialog .ui-dialog-buttonpane { 1203 text-align: left; 1204 border-width: 1px 0 0 0; 1205 background-image: none; 1206 margin-top: .5em; 1207 padding: .3em 1em .5em .4em; 1208 } 1209 1210 .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { 1211 float: right; 1212 } 1213 1214 .ui-dialog .ui-dialog-buttonpane button { 1215 margin: .5em .4em .5em 0; 1216 cursor: pointer; 1217 } 1218 1219 .ui-draggable .ui-dialog-titlebar { 1220 cursor: move; 1221 } 1222 1223 .ui-draggable-handle { 1224 -ms-touch-action: none; 1225 touch-action: none; 1226 } 1227 1228 /* Component containers 1229 ----------------------------------*/ 1230 .ui-widget { 1231 font-size: 1em; 1232 } 1233 1234 .ui-widget .ui-widget { 1235 font-size: 1em; 1236 } 1237 1238 .ui-widget input { 1239 font-size: 1em; 1240 background: var(--input-bg-color); 1241 } 1242 1243 .ui-widget button { 1244 font-size: 1em; 1245 } 1246 1247 .ui-widget.ui-widget-content { 1248 border: 1px solid var(--ui-widget-border-color); 1249 } 1250 1251 .ui-widget-content { 1252 border: 1px solid var(--ui-widget-border-color); 1253 background: var(--ui-widget-bg-color); 1254 color: var(--text-color); 1255 } 1256 1257 .ui-widget-header { 1258 border: 1px solid var(--ui-widget-border-color); 1259 background: var(--ui-widget-bg-color); 1260 color: var(--text-color); 1261 font-weight: bold; 1262 } 1263 1264 /* Corner radius */ 1265 1266 .ui-corner-all { 1267 border-radius: 3px; 1268 } 1269 1270 .ui-widget-content .ui-state-highlight{ 1271 border: 1px solid var(--error); 1272 background: var(--accent-color); 1273 color: var(--white-0); 1274 } 1275 .ui-widget-header .ui-state-highlight { 1276 border: 1px solid var(--error); 1277 background: var(--accent-color); 1278 color: var(--text-color); 1279 } 1280 1281 .checkbox { 1282 vertical-align: middle; 1283 float: right; 1284 } 1285 1286 .index-label { 1287 display: block; 1288 overflow: hidden; 1289 } 1290 1291 #close-btn { 1292 align-self: center; 1293 margin: auto; 1294 padding: 10px 28px; 1295 font-size: 16px; 1296 display: flex; 1297 background-color: var(--btn-regular-bg-color); 1298 color: var(--button-text-color) !important; 1299 } 1300 1301 1302 /* cluster stats start */ 1303 1304 #app-content-area { 1305 width: 100%; 1306 background-color: var(--bg-color); 1307 } 1308 1309 #app-content-area .cstats-data-container{ 1310 overflow-x: hidden; 1311 display: flex; 1312 flex-direction: column; 1313 } 1314 1315 #cluster-stats-theme { 1316 display: grid; 1317 grid-template-columns: auto; 1318 justify-content: end; 1319 margin-top: 16px; 1320 margin-right: 25px; 1321 margin-left: 23px; 1322 height: 44px; 1323 } 1324 1325 #app-content-area #filter-container{ 1326 padding: 10px; 1327 display: flex; 1328 justify-content: flex-end; 1329 margin: 0; 1330 height: 44px; 1331 background: var( --black1-to-white0); 1332 } 1333 1334 #app-content-area .graph-container { 1335 margin-left: 23px; 1336 display: flex; 1337 width: 97%; 1338 align-items: center; 1339 justify-content: space-around; 1340 } 1341 1342 .ingestion-stats-header { 1343 padding-left: 15px; 1344 margin-bottom: 12px; 1345 font-size: 16px; 1346 color: var(--cstats-header-text-color); 1347 font-weight: 200 !important; 1348 font-family: "DINpro", Arial, sans-serif; 1349 font-style: normal; 1350 text-align: center; 1351 } 1352 1353 .ingestion-table { 1354 margin-top: 12px; 1355 display: table !important; 1356 } 1357 1358 .ingestion-table tbody td { 1359 padding-left: 15px; 1360 width: 333px; 1361 height: 55px; 1362 border: 3px solid var(--table-row-column-line-color); 1363 background-color: var(--cstats-table-bg-color); 1364 1365 } 1366 1367 .ingestion-table tbody tr { 1368 padding-bottom: 20px; 1369 line-height: 23.18px; 1370 } 1371 1372 .ingestion-table tbody tr:nth-child(1) td:nth-child(1) { 1373 border-radius: 10px 0 0 0; 1374 } 1375 1376 .ingestion-table tbody tr:nth-child(1) td:nth-child(2) { 1377 border-radius: 0 10px 0 0; 1378 } 1379 1380 .ingestion-table tbody tr:nth-child(3) td:nth-child(1) { 1381 border-radius: 0 0 0 10px; 1382 } 1383 1384 .ingestion-table tbody tr:nth-child(3) td:nth-child(2) { 1385 border-radius: 0 0 10px 0; 1386 } 1387 1388 .query-stats{ 1389 width: 40%; 1390 margin-right: 30px; 1391 } 1392 1393 .query-stats-header{ 1394 padding-left: 15px; 1395 margin-bottom: 12px; 1396 font-size: 18px; 1397 color: var(--cstats-header-text-color); 1398 font-weight: var(--fw-500) !important; 1399 font-family: "DINpro", Arial, sans-serif; 1400 font-style: normal; 1401 } 1402 1403 .query-table, .metrics-table, .org-settings-table { 1404 margin-top: 12px; 1405 } 1406 1407 .query-table tbody td, .metrics-table tbody td, .org-settings-table td, .org-settings-table th{ 1408 padding-left: 15px; 1409 width: 334px; 1410 height: 50px; 1411 border: 3px solid var(--table-row-column-line-color); 1412 background-color: var(--cstats-table-bg-color); 1413 } 1414 1415 .query-table tbody tr, .metrics-table tbody tr, .org-settings-table tr{ 1416 padding-bottom: 20px; 1417 /* width: 300px; */ 1418 line-height: 18px; 1419 } 1420 1421 .query-table tbody tr:nth-child(1) td:nth-child(1),.metrics-table tbody tr:nth-child(1) td:nth-child(1) { 1422 border-radius: 10px 0 0 0; 1423 } 1424 1425 .query-table tbody tr:nth-child(1) td:nth-child(2) ,.metrics-table tbody tr:nth-child(1) td:nth-child(2) { 1426 border-radius: 0 10px 0 0; 1427 } 1428 1429 .query-table tbody tr:nth-child(2) td:nth-child(1) ,.metrics-table tbody tr:nth-child(2) td:nth-child(1) { 1430 border-radius: 0 0 0 10px; 1431 } 1432 1433 .query-table tbody tr:nth-child(2) td:nth-child(2) ,.metrics-table tbody tr:nth-child(2) td:nth-child(2) { 1434 border-radius: 0 0 10px 0; 1435 } 1436 1437 .health-stats-value, .org-settings-table td { 1438 color: var(--health-stats-value-text-color); 1439 } 1440 1441 #system-info-table td{ 1442 width: 530px; 1443 } 1444 1445 #system-info-table td div{ 1446 margin: 5px 0px !important; 1447 } 1448 1449 #system-info-table td div b{ 1450 width: 75px; 1451 display: inline-block; 1452 } 1453 1454 .index-stats { 1455 margin: auto; 1456 float: left; 1457 width: 95%; 1458 } 1459 .index-data-table{ 1460 width:100% 1461 } 1462 1463 #app-content-area { 1464 background-color: var(--bg-color); 1465 } 1466 1467 .index-stats-header { 1468 padding-left: 8px; 1469 margin-bottom: 12px; 1470 font-size: 18px; 1471 color: var(--cstats-header-text-color); 1472 font-weight: var(--fw-500) !important; 1473 font-family: "DINpro", Arial, sans-serif; 1474 font-style: normal; 1475 } 1476 1477 .index-data-table { 1478 margin: 0 !important; 1479 } 1480 1481 .index-data-table thead th { 1482 background: var(--table-header-bg-color) !important; 1483 padding-left: 15px !important; 1484 border-bottom: none !important; 1485 } 1486 1487 .index-data-table tbody tr { 1488 background: var(--cstats-table-bg-color) !important; 1489 } 1490 1491 .index-data-table .even { 1492 background: var(--cstats-table-bg-color) !important; 1493 padding-left: 15px !important; 1494 } 1495 1496 .index-data-table tbody td { 1497 color: var(--table-or-regular-text-color) !important; 1498 font-weight: normal; 1499 } 1500 .index-data-table tbody>tr:nth-child(1) td { 1501 color: var(--lavender-2) !important; 1502 font-weight: 900 !important; 1503 } 1504 1505 #metrics-data-table tbody>tr:nth-child(1) td { 1506 color: var(--table-or-regular-text-color) !important; 1507 font-weight: normal !important; 1508 } 1509 1510 .index-data-table thead tr th:nth-child(1){ 1511 border-radius: 10px 0 0 0 !important; 1512 } 1513 1514 .index-data-table thead tr th:last-child { 1515 border-radius: 0 10px 0 0 !important; 1516 } 1517 1518 .index-data-table tbody tr:last-child td:nth-child(1) { 1519 border-radius: 0 0 0 10px !important; 1520 } 1521 1522 .index-data-table tbody tr:last-child td:last-child { 1523 border-radius: 0 0 10px 0 !important; 1524 } 1525 div.dts div.dataTables_scrollBody table { 1526 z-index: 0 !important; 1527 } 1528 1529 1530 .dataTables_wrapper.no-footer .index-data-table { 1531 border-bottom: none !important; 1532 border-collapse: separate !important; 1533 background-color: var(--bg-color) !important; 1534 } 1535 1536 .dataTables_info { 1537 color: var(--text-color) !important; 1538 font-size: 13px; 1539 margin-top: -4px; 1540 } 1541 1542 #GBCountChart{ 1543 padding-right: 20px; 1544 } 1545 1546 #EventCountChart{ 1547 padding-right: 20px; 1548 height: 40vh; 1549 } 1550 1551 #TotalVolumeChart { 1552 height: 43vh !important; 1553 width: 100% !important; 1554 padding-left: 5px; 1555 } 1556 1557 .chart_container { 1558 float: left; 1559 margin-bottom: 30px; 1560 width: 50%; 1561 } 1562 1563 .bar_chart_container { 1564 width: 36%; 1565 } 1566 1567 .index-data-table.dataTable.no-footer{ 1568 width: 100% !important; 1569 } 1570 .storage-savings-container { 1571 display: grid; 1572 grid-template: 1fr / 1fr; 1573 place-items: center; 1574 } 1575 .storage-savings-container > * { 1576 grid-column: 1 / 1; 1577 grid-row: 1 / 1; 1578 } 1579 1580 .storage-savings-container .storage-savings-title { 1581 margin-top: 220px; 1582 z-index: 2; 1583 margin-left: 30px; 1584 } 1585 1586 .storage-savings-container .storage-savings-percent { 1587 text-align: center !important; 1588 color: rgb(115, 191, 105) !important; 1589 font-size: 4.4em; 1590 align-items: center; 1591 font-weight: var(--fw-900); 1592 z-index: 1; 1593 margin-left: 41px; 1594 } 1595 1596 .query-index-container{ 1597 display: flex; 1598 justify-content: center; 1599 flex-direction: column; 1600 align-items: center; 1601 width: 100%; 1602 margin-top: 40px; 1603 } 1604 1605 .chart-container{ 1606 flex-direction: column; 1607 border: 1px solid var(--search-input-border); 1608 box-shadow: var(--box-shadow); 1609 border-radius: 10px; 1610 padding: 10px; 1611 background: var( --black1-to-white0); 1612 } 1613 1614 .chart-container #date-picker-btn { 1615 width: 140px !important; 1616 margin-left: 20px !important; 1617 height: 32px !important; 1618 display: flex; 1619 align-items: center; 1620 justify-content: space-between; 1621 border: 1px solid var(--search-input-border); 1622 } 1623 1624 1625 /* cluster stats end */ 1626 1627 #logs-result-container, #agg-result-container { 1628 margin-bottom: 2%; 1629 height: 100% !important; 1630 } 1631 1632 #queries-grid-container { 1633 margin-left: 23px; 1634 margin-bottom: 2%; 1635 margin-right: 25px; 1636 margin-top: 25px; 1637 height: 100% !important; 1638 } 1639 1640 #queries-grid-container{ 1641 margin-top: 25px; 1642 } 1643 1644 #queries-grid-container{ 1645 margin-top: 25px; 1646 } 1647 1648 1649 /* start - index dropdown overrides */ 1650 1651 #available-indexes { 1652 width: 265px; 1653 max-height: 209px; 1654 background: var(--index-drop-down-box-bg-color); 1655 overflow: scroll; 1656 border: 1px solid var(--timepicker-border-color); 1657 } 1658 #associated-alerts { 1659 width: 265px; 1660 max-height: 209px; 1661 background: var(--index-drop-down-box-bg-color); 1662 overflow: scroll; 1663 border: 1px solid var(--timepicker-border-color); 1664 } 1665 #save-query-options, 1666 #query-language-options, 1667 #source-options { 1668 width: 130px; 1669 background: var(--index-drop-down-box-bg-color); 1670 overflow: hidden; 1671 padding: 0px 10px 10px 10px; 1672 border: 1px solid var(--timepicker-border-color); 1673 } 1674 1675 .index-dropdown-item,.alert-dropdown-item, .query-language-option ,.panEdit-query-language-option, .source-option { 1676 width: 241px; 1677 background: var(--index-drop-down-item-inactive-bg-color); 1678 color: var(--index-drop-down-item-inactive-text-color); 1679 margin-bottom: 10px; 1680 margin-top: 10px; 1681 cursor: pointer; 1682 margin-left: 12px; 1683 margin-right: 12px; 1684 padding: 4px 0; 1685 padding-left: 12px; 1686 font-weight: var(--fw-400); 1687 font-family: "DINpro", Arial, sans-serif; 1688 border-radius: 4px; 1689 } 1690 1691 .query-language-option , .panEdit-query-language-option{ 1692 width: 100%; 1693 margin: 0; 1694 margin-top: 10px; 1695 } 1696 1697 .index-dropdown-item:hover,.alert-dropdown-item:hover,.panEdit-query-language-option:hover, .query-language-option:hover,.source-option:hover{ 1698 background: var(--index-drop-down-item-hover-bg-color); 1699 color: var(--index-drop-down-item-hover-text-color); 1700 } 1701 1702 .index-dropdown-item.active,.alert-dropdown-item.active,.panEdit-query-language-option.active, .query-language-option.active,.source-option.active{ 1703 background: var(--index-drop-down-item-active-bg-color); 1704 color: var(--index-drop-down-item-active-text-color); 1705 } 1706 1707 .index-dropdown-item img { 1708 display: none; 1709 float: right; 1710 position: relative; 1711 top: 9px; 1712 right: 5px; 1713 } 1714 .alert-dropdown-item img { 1715 display: none; 1716 float: right; 1717 position: relative; 1718 top: 9px; 1719 right: 5px; 1720 } 1721 1722 .index-dropdown-item.active img { 1723 display: inline; 1724 } 1725 .alert-dropdown-item.active img { 1726 display: inline; 1727 } 1728 1729 /* end - index dropdown overrides */ 1730 1731 /* start saved queries page overrides */ 1732 1733 #app-content-area { 1734 width: 100%; 1735 background-color: var(--bg-color); 1736 display: flex; 1737 flex-direction: column; 1738 overflow-x: hidden; 1739 } 1740 1741 #sq-search-container ,#db-search-container, #metrics-container{ 1742 display: grid; 1743 grid-template-columns: 2fr auto auto; 1744 column-gap: 15px; 1745 margin-top: 16px; 1746 margin-left: 23px; 1747 margin-right: 25px; 1748 height: 44px; 1749 background-color: var(--top-bar-bg-color-regular); 1750 } 1751 1752 #sq-filter-input { 1753 margin: 0; 1754 padding: 15px 12px; 1755 text-decoration: none; 1756 height: 30px; 1757 line-height: 14px; 1758 } 1759 .sq-magnigying-glass { 1760 margin: 0; 1761 padding: 15px 12px; 1762 text-decoration: none; 1763 border: none; 1764 height: 44px; 1765 line-height: 14px; 1766 } 1767 1768 .queries-table-container { 1769 margin-left: 23px; 1770 height: 600px !important; 1771 } 1772 .queries-table { 1773 width: 1372px !important; 1774 margin: 0px !important; 1775 height: 70px; 1776 } 1777 1778 .queries-table thead th{ 1779 background: var(--table-header-bg-color) !important; 1780 padding-left: 15px !important; 1781 padding-bottom: 28px !important; 1782 border-bottom: none !important; 1783 top: 24px !important; 1784 font-size: 18px !important; 1785 font-weight: var(--fw-500) !important; 1786 font-family: "DINpro", Arial, sans-serif !important; 1787 color: var(--text-color) !important; 1788 } 1789 1790 .queries-table tbody tr { 1791 background: var(--cstats-table-bg-color) !important; 1792 } 1793 1794 .queries-table .even { 1795 background: var(--cstats-table-bg-color) !important; 1796 } 1797 1798 .queries-table tbody td { 1799 color: var(--table-or-regular-text-color) !important; 1800 font-weight: var(--fw-400) !important; 1801 margin-left: 15px !important;; 1802 padding-bottom: 28px !important; 1803 border-bottom: none !important; 1804 } 1805 1806 1807 .queries-table .details-control { 1808 padding-left: 15px !important; 1809 } 1810 1811 .queries-table .column-logs { 1812 padding-left: 15px !important; 1813 } 1814 1815 .query-link { 1816 color: var(--query-link-text-color) !important; 1817 } 1818 1819 .queries-table thead th:nth-child(1) { 1820 border-radius: 10px 0px 0px 0px !important; 1821 } 1822 1823 .queries-table thead th:nth-child(3) { 1824 border-radius: 0px 10px 0px 0px !important; 1825 } 1826 .dataTables_scrollHead, .dataTables_scrollHeadInner{ 1827 width: 100% !important; 1828 } 1829 .dataTables_wrapper.no-footer .dataTables_scrollHeadInner .queries-table { 1830 border-spacing: 3px 0 !important; 1831 } 1832 1833 .dataTables_wrapper.no-footer .dataTables_scrollBody .queries-table { 1834 margin-top: -5px !important; 1835 } 1836 1837 .dataTables_wrapper.no-footer .queries-table { 1838 border-bottom: none !important; 1839 border-spacing: 3px !important; 1840 border-collapse: separate !important; 1841 } 1842 1843 #delbutton { 1844 background-image: url(../assets/dark-delete-icon-regular.svg); 1845 height: 16px; 1846 background-repeat: no-repeat; 1847 width: 18px; 1848 cursor: pointer; 1849 background-color: transparent; 1850 border-width: 0; 1851 margin-left: 15px; 1852 padding-bottom: 0; 1853 margin-top: 0px; 1854 background-size: contain; 1855 } 1856 1857 #editbutton { 1858 background-image: url(../assets/edit-alert-icon.svg); 1859 height: 16px; 1860 background-repeat: no-repeat; 1861 width: 20px; 1862 cursor: pointer; 1863 background-color: transparent; 1864 border-width: 0; 1865 margin-left: 0px; 1866 padding-bottom: 0; 1867 background-size: contain; 1868 background-position: center; 1869 } 1870 1871 #delOrgUserBtn, .index-del-btn { 1872 background-image: url(../assets/dark-delete-icon-regular.svg); 1873 height: 16px; 1874 width: 15px; 1875 cursor: pointer; 1876 background-color: transparent; 1877 border-width: 0; 1878 margin-left: 15px; 1879 background-size: contain; 1880 } 1881 1882 #viewbutton { 1883 background-image: url(../assets/view-icon.svg); 1884 height: 14px; 1885 width: 19px; 1886 cursor: pointer; 1887 background-color: transparent; 1888 border-width: 0; 1889 padding: 0px; 1890 background-size: contain; 1891 } 1892 1893 #duplicateButton{ 1894 background-image: url(../assets/dashboard-duplicate-icon.svg); 1895 height: 17px; 1896 width: 17px; 1897 cursor: pointer; 1898 background-color: transparent; 1899 border-width: 0; 1900 margin-left: 15px; 1901 background-size: contain; 1902 } 1903 #favbutton{ 1904 background-image: url(../assets/star-outline.svg); 1905 height: 16px; 1906 width: 17px; 1907 cursor: pointer; 1908 background-color: transparent; 1909 border-width: 0; 1910 margin-left: 15px; 1911 } 1912 1913 #delbutton:hover { 1914 background-image: url(../assets/dark-delete-icon-hover.svg); 1915 cursor: pointer; 1916 background-color: transparent; 1917 border-width: 0; 1918 margin-left: 15px; 1919 } 1920 #editbutton:hover { 1921 background-image: url(../assets/edit-alert-icon-active.svg); 1922 cursor: pointer; 1923 background-color: transparent; 1924 border-width: 0; 1925 margin-left: 0px; 1926 } 1927 1928 /* Delete confimation popup */ 1929 .popupOverlay { 1930 visibility: hidden; 1931 position: fixed; 1932 top: 0; 1933 left: 0; 1934 width: 100%; 1935 height: 100%; 1936 background-color: var(--ui-widget-overlay-bg-color); 1937 opacity: .75; 1938 z-index: 1; 1939 } 1940 1941 .popupContent,.delete-dialog { 1942 background-color: var(--ui-widget-bg-color); 1943 border-radius: 8px; 1944 border: 1px solid var(--ui-widget-border-color); 1945 padding: 25px; 1946 position: absolute; 1947 top:32%; 1948 left:35%; 1949 visibility: hidden; 1950 color: var(--text-color); 1951 font-size: 1em; 1952 height: fit-content; 1953 width: 464px !important; 1954 z-index: 10; 1955 } 1956 .delete-dialog{ 1957 width: 564px !important; 1958 left: 30%; 1959 } 1960 1961 .usage-stats .popupContent { 1962 background-color: var(--ui-widget-bg-color); 1963 border-radius: 8px; 1964 border: 1px solid var(--ui-widget-border-color); 1965 padding: 25px; 1966 position: absolute; 1967 top: 32%; 1968 left: 35%; 1969 visibility: hidden; 1970 color: var(--text-color); 1971 font-size: 1em; 1972 height: fit-content; 1973 width: 479px !important; 1974 z-index: 12; 1975 } 1976 1977 .popupContent .header,.delete-dialog .header { 1978 color: var(--text-color); 1979 margin-bottom: 25px; 1980 font-weight: bold; 1981 font-size: 18px; 1982 } 1983 1984 #buttons-popupContent { 1985 display: flex; 1986 justify-content: space-between; 1987 margin-top: 24px; 1988 } 1989 1990 .popupOverlay.active ,.popupContent.active,.delete-dialog.active{ 1991 visibility: visible; 1992 position: fixed; 1993 overflow: hidden; 1994 } 1995 1996 #delete-btn , 1997 #cancel-btn { 1998 width: 195px !important; 1999 height: 32px !important; 2000 border-radius: 5px; 2001 border: none; 2002 background: var(--component-bg-color); 2003 color: var(--component-text-color); 2004 margin-top: 15px; 2005 } 2006 2007 .prompt-text-container { 2008 margin-bottom: 16px; 2009 } 2010 2011 #buttons-db-prompt { 2012 justify-content: space-between; 2013 display: flex; 2014 } 2015 2016 #cancel-btn { 2017 margin-right: 14px; 2018 background: var(--btn-regular-bg-color); 2019 } 2020 2021 #delete-btn:hover { 2022 background: var(--component-bg-color-hover); 2023 } 2024 2025 #delete-btn:focus { 2026 background: var(--btn-regular-bg-color); 2027 } 2028 2029 [data-theme='dark'] .popupContent { 2030 background: var(--ui-widget-bg-color); 2031 border: 1px solid var(--ui-widget-border-color); 2032 color: var(--text-color); 2033 } 2034 2035 /* end saved queries page overrides */ 2036 2037 /* start available fields dropdown overrides */ 2038 #available-fields { 2039 max-height: 204px; 2040 background: var(--index-drop-down-box-bg-color); 2041 overflow-y: auto; 2042 scrollbar-width: none; 2043 -ms-overflow-style: none; 2044 border: 1px solid var(--timepicker-border-color); 2045 width: max-content; 2046 } 2047 #available-fields::-webkit-scrollbar { 2048 width: 0; 2049 } 2050 .available-fields-dropdown-item { 2051 height: 32px; 2052 display: flex; 2053 align-items: center; 2054 background: var(--index-drop-down-item-inactive-bg-color); 2055 color: var(--index-drop-down-item-inactive-text-color); 2056 margin-bottom: 10px; 2057 margin-top: 6px; 2058 margin-right: 10px; 2059 cursor: pointer; 2060 padding-left: 12px; 2061 font-size: 14px; 2062 font-weight: var(--fw-400); 2063 font-family: "DINpro", Arial, sans-serif; 2064 padding-top: 2px; 2065 border-radius: 4px; 2066 } 2067 2068 .available-fields-dropdown-item:hover { 2069 background: var(--available-fields-drop-down-item-hover-bg-color); 2070 color: var(--available-fields-drop-down-item-hover-text-color); 2071 } 2072 2073 .available-fields-dropdown-item.active { 2074 background: var(--available-fields-drop-down-item-active-bg-color); 2075 color: var(--available-fields-drop-down-item-active-text-color); 2076 width: max-content; 2077 } 2078 2079 .available-fields-dropdown-item img { 2080 display: none; 2081 float: right; 2082 position: relative; 2083 top: 15%; 2084 transform: translateY(-50%); 2085 right: 5px; 2086 vertical-align: middle; 2087 margin-left: 10px; 2088 } 2089 .fieldname-text { 2090 flex-grow: 1; 2091 white-space: nowrap; 2092 overflow: visible; 2093 } 2094 2095 .fields{ 2096 margin-left: 10px; 2097 } 2098 2099 .available-fields-dropdown-item.active img { 2100 display: inline; 2101 } 2102 2103 #select-unselect-header { 2104 color: var(--select-unselect-header-text-color); 2105 font-size: 14px; 2106 font-weight: var(--fw-500); 2107 font-family: "DINpro", Arial, sans-serif; 2108 position: relative; 2109 margin-top: 5px; 2110 margin-left: 11px; 2111 display: flex; 2112 align-items: center; 2113 width:max-content; 2114 } 2115 2116 .select-unselect-checkbox { 2117 margin-left: 10px; 2118 height: 20px; 2119 width: 20px; 2120 border: 1px solid transparent; 2121 border-radius: 4px; 2122 cursor: pointer; 2123 position: relative; 2124 z-index: 1; 2125 } 2126 .select-unselect-checkbox:hover { 2127 border: 1px solid var(--select-unselect-box-border-color-hover); 2128 } 2129 2130 .select-unselect-checkbox.active { 2131 border: 0px solid var(--select-unselect-box-border-color-clicked); 2132 } 2133 2134 .select-unselect-checkmark { 2135 position: relative; 2136 z-index: 2; 2137 float: right; 2138 right: 16px; 2139 top: 0px; 2140 } 2141 2142 2143 /* end available fields dropdown overrides */ 2144 2145 /* save query dialog */ 2146 2147 #save-queries { 2148 display: none; 2149 } 2150 2151 #download-info { 2152 display: none; 2153 } 2154 2155 .ui-widget { 2156 font-size: 1em; 2157 height: 327px; 2158 width: 464px; 2159 } 2160 2161 .ui-dialog-titlebar-close { 2162 display: none; 2163 } 2164 2165 .ui-widget-header { 2166 border: none; 2167 background: var(--ui-widget-bg-color); 2168 color: var(--text-color); 2169 font-weight: bold; 2170 } 2171 2172 .ui-widget-header { 2173 border: none; 2174 } 2175 2176 .ui-widget.ui-widget-content { 2177 border: 1px solid var(--ui-widget-border-color); 2178 border-radius: 8px !important; 2179 } 2180 2181 .ui-widget-overlay { 2182 position: fixed; 2183 z-index: 1049; 2184 top: 0; 2185 left: 0; 2186 width: 100%; 2187 height: 100%; 2188 background-color: var(--ui-widget-overlay-bg-color); 2189 } 2190 2191 .ui-widget-overlay img { 2192 position: absolute; 2193 top: 50%; 2194 left: 50%; 2195 margin: -27px 0 0 -27px; 2196 } 2197 2198 2199 .opacity-75 { 2200 opacity: .75 !important; 2201 -moz-opacity: .75 !important; 2202 } 2203 2204 2205 .ui-dialog .ui-dialog-title { 2206 float: left; 2207 margin: 0 !important; 2208 white-space: nowrap; 2209 overflow: hidden; 2210 text-overflow: ellipsis; 2211 } 2212 2213 .ui-draggable .ui-dialog-titlebar { 2214 cursor: move; 2215 padding: 22px 0 0 30px !important; 2216 } 2217 2218 div#save-queries { 2219 width: 404px !important; 2220 height: 100px !important; 2221 margin: 30px !important; 2222 padding: 0 !important; 2223 } 2224 div#download-info { 2225 width: 404px !important; 2226 height: 70px !important; 2227 margin: 30px !important; 2228 padding: 0 !important; 2229 } 2230 2231 .ui-widget input { 2232 font-size: 14px; 2233 background: var(--ui-widget-bg-color); 2234 padding: 13px 0 14px 14px; 2235 box-sizing: border-box; 2236 color: var(--text-color); 2237 } 2238 2239 .ui-widget input:focus { 2240 outline: none; 2241 } 2242 2243 .validateTips.active { 2244 height: 1em; 2245 line-height: 1em; 2246 font-size: 0.8em; 2247 border:none; 2248 margin:0 0 5px 0; 2249 display: block; 2250 } 2251 2252 .validateTips { 2253 display: none; 2254 } 2255 2256 input[type="text"]:focus { 2257 color: var(--search-bar-text-color-active); 2258 border-radius: 5px; 2259 background: var(--search-bar-bg); 2260 outline: 1pt solid var(--drop-down-btn-border-active); 2261 outline-offset: -1pt; 2262 } 2263 2264 input[type="text"].active { 2265 color: var(--search-bar-text-color-active); 2266 } 2267 2268 #qname, 2269 #qnameDL, 2270 #description { 2271 width: 404px; 2272 height: 32px; 2273 border-radius: 5px; 2274 } 2275 2276 #description { 2277 margin-top: 20px !important; 2278 } 2279 2280 .ui-dialog .ui-dialog-buttonpane { 2281 text-align: left; 2282 border: none; 2283 background-image: none; 2284 padding: 0 !important; 2285 margin: 0 30px 0 30px !important; 2286 width: 404px !important; 2287 } 2288 2289 2290 .ui-dialog .ui-dialog-buttonpane button { 2291 padding: 0 !important; 2292 cursor: pointer; 2293 } 2294 2295 .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { 2296 float: left; 2297 } 2298 2299 .ui-dialog-buttonset { 2300 margin-bottom: 20px; 2301 } 2302 2303 .saveqButton, 2304 .cancelqButton { 2305 width: 195px !important; 2306 height: 32px !important; 2307 border-radius: 5px; 2308 border: none; 2309 background: var(--component-bg-color); 2310 color: var(--component-text-color); 2311 } 2312 2313 .cancelqButton:hover { 2314 background: var(--component-bg-color-hover); 2315 } 2316 2317 .cancelqButton:focus { 2318 background: var(--btn-regular-bg-color); 2319 } 2320 2321 .saveqButton { 2322 margin: 0 0 0 14px !important; 2323 background: var(--btn-regular-bg-color); 2324 } 2325 2326 .cancelqButton { 2327 margin: 0 !important; 2328 } 2329 2330 .ui-draggable .ui-dialog-titlebar { 2331 cursor: move; 2332 } 2333 2334 2335 input[type="submit" i] { 2336 padding: 0; 2337 border: none; 2338 } 2339 2340 /* end save query dialog */ 2341 2342 2343 /* datepicker */ 2344 2345 #date-picker-btn { 2346 cursor: pointer; 2347 display: flex; 2348 justify-content: space-around; 2349 align-items: center; 2350 border: 1px solid var(--border-btn-color); 2351 } 2352 .dropdown-menu{ 2353 font-size: 14px !important; 2354 } 2355 2356 .dropdown-menu.daterangepicker.show{ 2357 background: var(--side-nav-bg-color-regular); 2358 color: var(--text-color); 2359 2360 width: 330px !important; 2361 height: 486px !important; 2362 background: var(--timepicker-bg-color); 2363 border: 1px solid var(--timepicker-border-color); 2364 border-radius: 5px; 2365 2366 font-family: "DINpro", Arial, sans-serif; 2367 color: var(--table-or-regular-text-color); 2368 2369 margin-right: 25px; 2370 left:3px !important; 2371 2372 top: 60px; 2373 right: 0px; 2374 display: block; 2375 2376 line-height: 1em; 2377 2378 } 2379 #cstats-app-container .dropdown-menu.daterangepicker.show{ 2380 height: auto !important; 2381 width: 300px !important; 2382 padding: 8px; 2383 } 2384 2385 #daterangepicker.active{ 2386 display: block; 2387 } 2388 2389 #daterangepicker.hidden{ 2390 display: none; 2391 } 2392 2393 .dt-header { 2394 margin-bottom: 8px; 2395 margin-left: 10px; 2396 margin-top: 8px; 2397 font-weight: var(--fw-500); 2398 font-style: normal; 2399 font-size: 16px; 2400 line-height: 23px; 2401 color: var(--timepicker-dt-hdr-color); 2402 } 2403 2404 .ranges { 2405 display: grid; 2406 grid-template-rows: repeat(4, 1fr); 2407 float: none !important; 2408 } 2409 2410 #cstats-app-container .ranges { 2411 display: grid; 2412 grid-template-rows: repeat(2, 1fr); 2413 float: none !important; 2414 } 2415 2416 2417 .inner-range { 2418 display: grid; 2419 grid-template-columns: repeat(3, 1fr); 2420 column-gap: 50px; 2421 } 2422 2423 #cstats-app-container .inner-range { 2424 display: grid; 2425 grid-template-columns: repeat(2, 1fr); 2426 column-gap: 50px; 2427 } 2428 2429 .range-item { 2430 padding-left: 12px !important; 2431 padding-top: 6px !important; 2432 padding-bottom: 6px !important; 2433 2434 display: flex; 2435 align-items: center; 2436 border-radius: 5px; 2437 line-height: 23px; 2438 cursor: pointer; 2439 } 2440 2441 .db-range-item{ 2442 padding-left: 12px !important; 2443 padding-top: 6px !important; 2444 padding-bottom: 6px !important; 2445 2446 display: flex; 2447 align-items: center; 2448 border-radius: 5px; 2449 line-height: 23px; 2450 cursor: pointer; 2451 } 2452 2453 hr { 2454 margin: 1rem 0; 2455 color: var(--timepicker-hr-color) !important; 2456 border: 0; 2457 } 2458 2459 .range-item:hover { 2460 /* background-color: var(--timepicker-bg-color-hover); */ 2461 color: var(--timepicker-text-color-hover); 2462 } 2463 2464 .db-range-item:hover { 2465 color: var(--timepicker-text-color-hover); 2466 } 2467 2468 .range-item.active { 2469 background-color: var(--index-drop-down-item-active-bg-color); 2470 color: var(--index-drop-down-item-active-text-color); 2471 } 2472 2473 .db-range-item.active{ 2474 background-color: var(--index-drop-down-item-active-bg-color); 2475 color: var(--index-drop-down-item-active-text-color); 2476 } 2477 2478 #reset-timepicker { 2479 float:right; 2480 color: var(--timepicker-reset-color); 2481 margin-right: 12px; 2482 cursor: pointer; 2483 } 2484 2485 #reset-timepicker:hover { 2486 color: var(--timepicker-text-color-hover); 2487 } 2488 2489 #daterange-from { 2490 margin-top: 20px; 2491 } 2492 #dt-from-text { 2493 margin-left: 12px; 2494 } 2495 2496 #daterange-to { 2497 margin-top: 19px; 2498 } 2499 #dt-to-text { 2500 margin-left: 12px; 2501 } 2502 2503 #date-start, #date-end { 2504 margin-top: 8px; 2505 margin-left: 12px; 2506 width: 147.41px; 2507 height: 35px; 2508 2509 border: 1px solid var(--timepicker-border-color); 2510 border-radius: 4px; 2511 } 2512 2513 #date-start:hover, #date-end:hover, #time-start:hover, #time-end:hover { 2514 border: 1px solid var(--drop-down-btn-border-active); 2515 } 2516 2517 #date-start.active, #date-end.active, #time-start.active, #time-end.active { 2518 color: var(--timepicker-text-color-active); 2519 } 2520 2521 #date-start:focus, #date-end:focus, #time-start:focus, #time-end:focus { 2522 border: 1px solid var(--timepicker-border-color); 2523 outline: none; 2524 } 2525 2526 #time-start, #time-end{ 2527 margin-top: 8px; 2528 margin-left: 11px; 2529 width: 147.41px; 2530 height: 35px; 2531 2532 border: 1px solid var(--timepicker-border-color); 2533 border-radius: 4px; 2534 } 2535 2536 [data-theme='dark'] input { 2537 color-scheme: dark; 2538 } 2539 input[type="date" i] { 2540 padding-inline-start: 10px !important; 2541 opacity:1; 2542 position: relative; 2543 border: none; 2544 background-color: transparent; 2545 color: var(--timepicker-text-color); 2546 2547 } 2548 2549 input[type="time" i] { 2550 padding-inline-start: 10px !important; 2551 opacity:1; 2552 position: relative; 2553 border: none; 2554 background-color: transparent; 2555 color: var(--timepicker-text-color); 2556 } 2557 2558 input[type="date"]::-webkit-calendar-picker-indicator , input[type="time"]::-webkit-calendar-picker-indicator { 2559 color: var(--timepicker-text-color); 2560 filter: invert(0.5); 2561 } 2562 2563 2564 .daterangepicker .drp-buttons { 2565 clear: both; 2566 border:none !important; 2567 line-height: 12px; 2568 display: block !important; 2569 margin-top: 20px; 2570 margin-left: 12px; 2571 } 2572 2573 .daterangepicker .drp-buttons .btn{ 2574 width: 306px !important; 2575 height: 35px !important; 2576 background: var(--btn-regular-bg-color) !important; 2577 border-radius: 4px; 2578 font-weight: var(--fw-400); 2579 font-size: 18px; 2580 line-height: 23px; 2581 font-family: "DINpro", Arial, sans-serif !important; 2582 opacity: 100 !important; 2583 color: var(--button-text-color) !important; 2584 border: none; 2585 } 2586 .daterangepicker .drp-buttons .btn:hover { 2587 background: var(--timepicker-btn-hover) !important; 2588 } 2589 2590 .col-sep { 2591 color: var(--search-bar-text-color-regular-or-hover); 2592 } 2593 /* end datepicker*/ 2594 2595 #replace-pcs-btn.btn { 2596 color: var(--button-text-color) !important; 2597 } 2598 #append-pcs-btn.btn { 2599 color: var(--button-text-color) !important; 2600 } 2601 #close-pcs-btn.btn{ 2602 color: var(--button-text-color) !important; 2603 } 2604 2605 .search-bar-container{ 2606 display: inline-block; 2607 2608 } 2609 2610 .info-icon { 2611 font-size: 16px; 2612 color: var(--text-color); 2613 top: .5rem; 2614 /*left: 62.75rem;*/ 2615 pointer-events: all; 2616 cursor:pointer; 2617 left: auto; 2618 right: 10px; 2619 position: absolute !important; 2620 } 2621 2622 #filter-input{ 2623 padding-left: 1rem; 2624 padding-right: 3rem; 2625 } 2626 2627 .tooltip{ 2628 display: inline; 2629 position: absolute; 2630 } 2631 2632 .tooltip-inner { 2633 display: flex; 2634 text-align: left !important; 2635 max-width: fit-content; 2636 white-space: pre-line !important; 2637 padding: 0.5rem !important; 2638 border: 1px var(--accent-color) !important; 2639 border-style: solid !important; 2640 background-color: var(--ui-widget-bg-color) !important; 2641 color: var(--text-color) !important; 2642 justify-content: center; 2643 font-size: 14px; 2644 } 2645 2646 /* Logs Results Ag-Grid Css */ 2647 2648 #LogResultsGrid, #queries-grid, #measureAggGrid, .panelLogResultsGrid{ 2649 height: 100%; 2650 width: 100%; 2651 } 2652 2653 .ag-theme-mycustomtheme .ag-center-cols-container{ 2654 background: var(--datatable-odd-row-bg-color) !important; 2655 } 2656 2657 .ag-theme-mycustomtheme .ag-root-wrapper { 2658 border-radius: 5px; 2659 padding-left: 0px !important; 2660 padding-top: 0 !important; 2661 border-bottom: none !important; 2662 color: var(--table-or-regular-text-color); 2663 } 2664 .ag-theme-mycustomtheme .ag-root-wrapper-body { 2665 background: var(--datatable-odd-row-bg-color) !important; 2666 border-radius: 5px; 2667 } 2668 2669 .ag-theme-mycustomtheme .ag-center-cols-container { 2670 background: var(--datatable-odd-row-bg-color) !important; 2671 } 2672 2673 .ag-theme-mycustomtheme .ag-header { 2674 border-top-left-radius: 5px; 2675 border-top-right-radius: 5px; 2676 background: var(--datatable-header-bg-color) !important; 2677 border-bottom: 0 !important; 2678 font-weight: var(--fw-500); 2679 color: var(--text-color) !important; 2680 } 2681 2682 .ag-theme-mycustomtheme { 2683 min-height: 35px!important; 2684 } 2685 2686 .ag-header-row { 2687 /* min-height: 42px!important; */ 2688 /* margin-top: 6px; */ 2689 height: auto; 2690 } 2691 .ag-header-cell-text { 2692 text-indent: 12px !important; 2693 color: var(--text-color) !important; 2694 font-size: 14px; 2695 font-weight: bold; 2696 user-select: all; 2697 } 2698 2699 .ag-theme-mycustomtheme .ag-header-cell-resize { 2700 background-color: var(--bg-color) !important; 2701 } 2702 .ag-cell { 2703 padding: 3px 15px !important; 2704 font-size: 14px; 2705 } 2706 2707 .ag-theme-mycustomtheme .ag-row{ 2708 min-height: 30px!important; 2709 } 2710 2711 .ag-theme-mycustomtheme .ag-center-cols-container { 2712 background: var(--datatable-odd-row-bg-color) !important; 2713 } 2714 2715 .ag-header-cell { 2716 padding: 0 15px !important; 2717 font-weight: bold; 2718 width: 100%; 2719 } 2720 2721 .ag-header-cell:not(.ag-header-cell-auto-height) .ag-header-cell-comp-wrapper { 2722 /* height: 100%; */ 2723 display: flex; 2724 align-items: center; 2725 } 2726 .measureAggGrid .ag-row-even, 2727 .LogResultsGrid .ag-row-even, 2728 .Queries-Grid .ag-row-even, 2729 .panelLogResultsGrid, 2730 .Queries-Grid .ag-row-even, .panelLogResultsGrid { 2731 background: var(--datatable-even-row-bg-color) !important; 2732 } 2733 .panelLogResultsGrid { 2734 height: 100%; 2735 } 2736 2737 .ag-pinned-left-header{ 2738 border-right: 5px solid var(--bg-color)!important; 2739 } 2740 2741 .ag-cell.ag-cell-last-left-pinned:not(.ag-cell-range-right):not(.ag-cell-range-single-cell) { 2742 border-right: 5px solid var(--bg-color)!important; 2743 } 2744 2745 .ag-cell-label-container{ 2746 padding: 0; 2747 } 2748 2749 .odd-popup-textarea{ 2750 background: var(--datatable-odd-row-bg-color) !important; 2751 color: var(--text-color) !important; 2752 } 2753 .even-popup-textarea{ 2754 background: var(--datatable-even-row-bg-color) !important; 2755 color: var(--text-color) !important; 2756 } 2757 2758 .fa-sort-alpha-up:before{ 2759 margin-left: 5px !important; 2760 } 2761 2762 .fa-sort-alpha-down:before{ 2763 margin-left: 5px !important; 2764 } 2765 2766 /*launch dashboard*/ 2767 .launch-dashboard .popupContent{ 2768 width: 464px !important; 2769 flex-direction: column; 2770 display: flex; 2771 justify-content: space-between; 2772 } 2773 2774 .launch-dashboard .popupContent .input, input{ 2775 font-size: 1em; 2776 background: var(--ui-widget-bg-color); 2777 padding: 13px 0 14px 14px; 2778 box-sizing: border-box; 2779 color: var(--search-bar-text-color-regular-or-hover); 2780 border: 1px solid var(--ui-widget-border-color); 2781 width: 100%; 2782 height: 32px; 2783 border-radius: 5px; 2784 } 2785 2786 .launch-dashboard .popupContent button, #buttons-ret-prompt button,#panel-del-prompt button, #panel-edit-prompt button { 2787 width: 195px !important; 2788 height: 32px !important; 2789 border-radius: 5px; 2790 border: none; 2791 background: var(--component-bg-color); 2792 color: var(--component-text-color); 2793 } 2794 2795 .launch-dashboard .popupContent .header{ 2796 font-size: 20px; 2797 } 2798 2799 .launch-dashboard .popupContent .error-tip{ 2800 color: #6449D6; 2801 visibility: hidden; 2802 font-size: 13px; 2803 margin-bottom: 6px; 2804 } 2805 .launch-dashboard .popupContent .error-tip.active{ 2806 visibility: visible; 2807 } 2808 2809 .launch-dashboard input[type="text"]:focus { 2810 color: var(--search-bar-text-color-active); 2811 border-radius: 5px; 2812 background: var(--search-bar-bg); 2813 outline: 1pt solid var(--drop-down-btn-border-active); 2814 outline-offset: -1pt; 2815 } 2816 2817 .launch-dashboard input[type="text"].active { 2818 color: var(--search-bar-text-color-active); 2819 } 2820 2821 .launch-dashboard #empty-response { 2822 display: none; 2823 } 2824 2825 #cancel-dbbtn:hover, #delete-dbbtn:hover, #cancel-ret-change-btn:hover, .delete-btn:hover, #cancel-ret-days-btn:hover, #cancel-del-org-btn:hover { 2826 background: var(--component-bg-color-hover); 2827 } 2828 2829 #cancel-dbbtn:focus,#error-ok-btn:focus, #delete-dbbtn:focus, #cancel-del-org-btn:focus { 2830 background: var(--btn-regular-bg-color); 2831 } 2832 2833 #save-dbbtn,#error-ok-btn, #cancel-db-prompt, .save-btn,#cancel-btn-panel { 2834 background: var(--btn-regular-bg-color) !important; 2835 } 2836 2837 #cancel-dbbtn { 2838 margin: 0 !important; 2839 } 2840 #error-ok-btn { 2841 float: right; 2842 } 2843 #error-ok-btn { 2844 width: 150px !important; 2845 height: 45px !important; 2846 border-radius: 5px; 2847 border: none; 2848 margin-left: auto; 2849 margin-right: 14px !important; 2850 color: var(--component-text-color); 2851 margin-top: 15px; 2852 } 2853 #delete-db-prompt { 2854 display: none; 2855 } 2856 2857 .dashboard-header { 2858 margin-top: 8px; 2859 margin-right: 39px; 2860 display: flex; 2861 justify-content: flex-end; 2862 margin-bottom: 5px; 2863 } 2864 2865 .add-icon{ 2866 height: 12px; 2867 width: 12px; 2868 margin-right: 8px; 2869 } 2870 2871 .dashboard-grid{ 2872 display: flex; 2873 justify-content: space-between; 2874 padding: 15px; 2875 white-space: nowrap; 2876 color: var(--dashboard-title-color); 2877 border-radius: 5px; 2878 margin-top: 4px; 2879 background-color: var(--datatable-odd-row-bg-color); 2880 font-size: 18px; 2881 text-decoration-line: underline; 2882 cursor: pointer; 2883 } 2884 2885 .dashboard-name{ 2886 padding-left: 15px; 2887 color: var(--dashboard-title-color); 2888 cursor: pointer; 2889 font-size: 18px; 2890 text-decoration-line: underline; 2891 } 2892 2893 2894 .dashboard-grid .db-button{ 2895 display: flex; 2896 flex-direction: row; 2897 align-items: center; 2898 } 2899 2900 2901 #dashboard-grid-container { 2902 margin-left: 23px; 2903 margin-bottom: 2%; 2904 margin-right: 25px; 2905 margin-top: 13px; 2906 height: 100% !important; 2907 } 2908 2909 2910 2911 /*dashboard*/ 2912 #new-dashboard{ 2913 padding-left: 10px; 2914 overflow-x: hidden; 2915 overflow-y: hidden; 2916 margin-bottom: 12px; 2917 font-size: 20px; 2918 color: var(--cstats-header-text-color); 2919 font-weight: var(--fw-500) !important; 2920 font-family: "DINpro", Arial, sans-serif; 2921 font-style: normal; 2922 margin: 20px; 2923 margin-left: 0; 2924 display: flex; 2925 flex-direction: column; 2926 width: 100%; 2927 transition: all 0.3s linear; 2928 } 2929 2930 #new-dashboard .header-container{ 2931 display: flex; 2932 justify-content: space-between; 2933 height: 45px; 2934 align-items: center; 2935 width: 100%; 2936 } 2937 2938 #new-dashboard .dashboard-names{ 2939 display: flex; 2940 gap: 10px; 2941 align-items: center; 2942 } 2943 2944 #new-dashboard .all-dashboards{ 2945 font-size: 18px; 2946 color: #6F6B7B; 2947 cursor: pointer; 2948 margin-bottom: 0; 2949 } 2950 2951 #new-dashboard .name-dashboard{ 2952 font-weight: 500; 2953 font-size: 18px; 2954 cursor: pointer; 2955 margin-bottom: 0; 2956 } 2957 2958 #new-dashboard .btn-container{ 2959 display: flex; 2960 gap: 15px; 2961 } 2962 2963 #add-panel-btn, 2964 #save-db-btn, 2965 .settings-btn, 2966 .refresh-btn, 2967 #run-search, 2968 .save-btn { 2969 text-decoration: none; 2970 border: none; 2971 height: 32px; 2972 line-height: 14px; 2973 display: flex; 2974 background: var(--btn-regular-bg-color); 2975 color: var(--button-text-color) !important; 2976 align-items: center; 2977 justify-content: center; 2978 } 2979 2980 #save-db-btn img{ 2981 width: 20px; 2982 height: 20px; 2983 } 2984 2985 .settings-btn img{ 2986 width: 22px; 2987 height: 22px; 2988 } 2989 2990 .refresh-btn img{ 2991 width: 22px; 2992 height: 18px; 2993 } 2994 2995 /*panel*/ 2996 2997 #panel-container { 2998 width: 100%; 2999 height: 100%; 3000 position: relative; 3001 padding: 0.5em 0; 3002 padding-left: 0px; 3003 } 3004 3005 .panel div.panel-header { 3006 cursor: move; 3007 background: var(--datatable-bg-color); 3008 display: flex; 3009 align-items: center; 3010 padding: 3px; 3011 padding-left: 12px; 3012 cursor: move; 3013 color: var(--hits-summary-regular-text-color); 3014 border-radius: 5px 5px 0px 0px; 3015 position: relative; 3016 font-size: 16px; 3017 justify-content: center; 3018 } 3019 .panel div.panel-header p{ 3020 color: var(--white-1); 3021 } 3022 3023 .panel div.panel-header p{ 3024 margin: 0; 3025 } 3026 3027 3028 3029 .panel div.panel-header .dropdown-btn{ 3030 background-image: url(../assets/up-arrow-btn-dark-theme.svg); 3031 width: 10px; 3032 height: 6px; 3033 margin-left: 10px; 3034 cursor: pointer; 3035 } 3036 3037 [data-theme='dark'] .panel div.panel-header .dropdown-btn{ 3038 background-image: url(../assets/up-arrow-btn-dark-theme.svg); 3039 } 3040 3041 .panel div.panel-header .dropdown-btn.active{ 3042 transform: rotate(180deg); 3043 } 3044 3045 .panel div.panel-header .hidden{ 3046 visibility: hidden; 3047 } 3048 3049 .panel { 3050 width: 49%; 3051 height: 250px; 3052 background-color: var(--datatable-bg-color); 3053 border-radius: 5px; 3054 } 3055 3056 .panel-body{ 3057 height: 87%; 3058 display: flex; 3059 justify-content: center; 3060 /* justify-content: space-between; */ 3061 align-items: center; 3062 } 3063 3064 .panel-body #corner-popup { 3065 display: flex; 3066 align-items: center; 3067 text-align: center; 3068 justify-content: center; 3069 position: static; 3070 width: 100%; 3071 height: 100%; 3072 border: none; 3073 background-color: var(--datatable-bg-color); 3074 font-size: 24px; 3075 font-weight: 700; 3076 color: var(--empty-response-text-color); 3077 z-index: 1; 3078 } 3079 3080 .panel-body #empty-response { 3081 font-weight: 700; 3082 color: var(--empty-response-text-color); 3083 } 3084 3085 .dropdown-style{ 3086 text-decoration: none; 3087 border: 1px solid var(--dropdown-border-color); 3088 position: absolute; 3089 top: 25px; 3090 list-style-type: none; 3091 padding: 11px 16px; 3092 cursor: pointer; 3093 background-color: var(--datatable-bg-color); 3094 border-radius: 5px; 3095 font-size: 14px; 3096 width: 131px; 3097 z-index: 2; 3098 } 3099 3100 3101 .dropdown-style .icon{ 3102 background-color: var(--dropdown-icon-color) ; 3103 height: 20px; 3104 } 3105 3106 .dropdown-style li{ 3107 display: flex; 3108 align-items: center; 3109 padding-bottom: 10px; 3110 } 3111 .dropdown-style .view{ 3112 background-image: url(../assets/view-icon-dropdown.svg); 3113 background-size: contain; 3114 width: 16.5px; 3115 height: 12px; 3116 margin-right: 16px; 3117 } 3118 3119 [data-theme='dark'] .dropdown-style .view{ 3120 background-image: url(../assets/view-icon-dark-mode.svg); 3121 } 3122 3123 .dropdown-style .edit{ 3124 background-image: url(../assets/edit-icon.svg); 3125 background-size: contain; 3126 width: 14px; 3127 height: 14px; 3128 margin-right: 18px; 3129 } 3130 3131 [data-theme='dark'] .dropdown-style .edit{ 3132 background-image: url(../assets/edit-icon-dark-mode.svg); 3133 } 3134 3135 .dropdown-style .copy{ 3136 background-image: url(assets/copy-icon.svg); 3137 background-size: contain; 3138 width: 20px; 3139 height: 20px; 3140 margin-right: 14px; 3141 } 3142 3143 [data-theme='dark'] .dropdown-style .copy{ 3144 background-image: url(../assets/copy-icon-dark-mode.svg); 3145 } 3146 3147 .dropdown-style .duplicate{ 3148 background-image: url(../assets/duplicate-icon.svg); 3149 background-size: contain; 3150 width: 16px; 3151 height: 16px; 3152 margin-right: 14px; 3153 } 3154 3155 [data-theme='dark'] .dropdown-style .duplicate{ 3156 background-image: url(../assets/duplicate-icon-dark-mode.svg); 3157 } 3158 3159 .dropdown-style .remove{ 3160 background-image: url(../assets/remove-icon.svg); 3161 background-size: contain; 3162 width: 14px; 3163 height: 15.78px; 3164 margin-right: 18px; 3165 } 3166 3167 [data-theme='dark'] .dropdown-style .remove{ 3168 background-image: url(../assets/remove-icon-dark-mode.svg); 3169 } 3170 3171 .search-db-input,.metrics-input{ 3172 padding-left: 1rem; 3173 padding-right: 4.4rem; 3174 height: 32px; 3175 } 3176 3177 .dbSet-textareaContainer .copy{ 3178 background-image: url(../assets/copy-icon.svg); 3179 background-size: contain; 3180 width: 20px; 3181 height: 20px; 3182 position: absolute; 3183 right: calc(20% + 20px); 3184 top: 20px; 3185 } 3186 3187 [data-theme='dark'] .dbSet-textareaContainer .copy{ 3188 background-image: url(../assets/copy-icon-dark-mode.svg); 3189 } 3190 3191 /* dashboard Grid*/ 3192 #dashboard-grid-container{ 3193 margin-left: 23px; 3194 margin-bottom: 2%; 3195 margin-right: 25px; 3196 margin-top: -3px; 3197 height: 100% !important; 3198 } 3199 3200 #dashboard-grid{ 3201 height: 100%; 3202 width: 100%; 3203 } 3204 #dashboard-grid .ag-header-cell{ 3205 padding: 0 !important; 3206 } 3207 3208 #dashboard-grid .ag-header{ 3209 background: var(--bg-color) !important; 3210 color: var(--datatable-header-text-color); 3211 font-size: 18px; 3212 font-weight: 600; 3213 3214 } 3215 3216 #dashboard-grid .ag-row{ 3217 max-height: 100px; 3218 } 3219 3220 #dashboard-grid .ag-center-cols-viewport { 3221 background: var(--bg-color); 3222 } 3223 3224 #dashboard-grid .ag-theme-mycustomtheme .ag-center-cols-container { 3225 background: var(--bg-color); 3226 3227 } 3228 #dashboard-grid .ag-cell{ 3229 display: flex !important; 3230 padding: 0px 15px !important; 3231 cursor: pointer; 3232 font-size: 14px; 3233 text-decoration-line: underline; 3234 border-bottom: var(--bg-color) 5px solid; 3235 } 3236 #dashboard-grid .ag-cell a{ 3237 color: var(--dashboard-title-color) !important; 3238 } 3239 3240 3241 #dashboard-grid-btn,#alert-grid-btn{ 3242 display: flex; 3243 align-items: center; 3244 } 3245 3246 /*NAVBAR */ 3247 .sidebar-icon{ 3248 background-image: url("../assets/collapse-sidebar-icon.svg"); 3249 cursor: pointer; 3250 position: absolute; 3251 width: 20px; 3252 height: 20px; 3253 left: 205px; 3254 top: 28px; 3255 transition: all 0.3s linear; 3256 } 3257 3258 .sidebar-icon.active{ 3259 background-image: url("../assets/expand-sidebar-icon.svg"); 3260 left: 73px; 3261 top: 28px; 3262 z-index: 1; 3263 } 3264 3265 .nav-links{ 3266 display: flex; 3267 align-items: center; 3268 text-decoration: none !important; 3269 justify-content: flex-start; 3270 } 3271 3272 .nav-link-text{ 3273 font-size: 14px; 3274 font-weight: 600; 3275 color: var(--navbar-link-text); 3276 white-space: nowrap; 3277 transition-delay: 0.3s; 3278 } 3279 3280 .nav-link-text.feedback{ 3281 line-height: 23px; 3282 text-decoration-line: underline; 3283 } 3284 3285 .nav-link-text:hover { 3286 color: var(--navbar-link-text-active); 3287 } 3288 3289 3290 3291 #app-side-nav .menu.active .nav-link-text{ 3292 color: var(--navbar-link-text-active); 3293 } 3294 3295 3296 #app-side-nav .menu.logo .sslogo-text{ 3297 padding-left: 8px; 3298 width: 82px; 3299 height: 20px; 3300 } 3301 3302 /* METRICS UI */ 3303 #metrics-graph-container,#metrics-table-container{ 3304 height: 80vh; 3305 border-radius: 5px; 3306 margin: 0px 27px 0px 22px; 3307 background: var(--search-bar-bg); 3308 } 3309 3310 #metrics-display-toggle-container{ 3311 margin: 0px 0 10px 22px; 3312 width: 150px; 3313 height: 30px; 3314 border-radius: 5px; 3315 background: var(--myOrg-input); 3316 display: flex; 3317 flex-direction: row; 3318 justify-content: space-between; 3319 } 3320 3321 .metrics-table-btn,.metrics-graph-btn{ 3322 height: 22px; 3323 margin: 4px; 3324 width: 70px; 3325 padding: 0px 10px; 3326 display: flex; 3327 align-items: center; 3328 justify-content: center; 3329 } 3330 3331 .metrics-table-btn.active,.metrics-graph-btn.active{ 3332 background: var(--btn-regular-bg-color) !important; 3333 color: var(--button-text-color) !important; 3334 } 3335 3336 .metrics-table-btn:hover,.metrics-graph-btn:hover{ 3337 background-color: var(--theme-btn-hover-bg-color); 3338 } 3339 .metrics-response{ 3340 display: flex; 3341 justify-content: flex-end; 3342 margin-top: 10px; 3343 margin-right: 20px; 3344 font-size: 14px; 3345 } 3346 3347 #response-time { 3348 font-weight: bold; 3349 margin-left: 4px; 3350 } 3351 3352 #metrics-canvas-container{ 3353 height: 80%; 3354 padding:20px; 3355 padding-top: 0px; 3356 } 3357 3358 #metrics-legends{ 3359 display: flex; 3360 flex-direction: column; 3361 color: var(--metrics-legends-text-color); 3362 font-size: 14px; 3363 padding-left: 40px; 3364 overflow-x: scroll; 3365 cursor: pointer; 3366 height: 14%; 3367 } 3368 3369 .legend-element{ 3370 display: flex; 3371 align-items: center; 3372 font-weight: bold; 3373 gap: 10px; 3374 } 3375 3376 .legend-colors{ 3377 border-radius: 3px; 3378 width: 25px; 3379 height: 6px; 3380 display: inline-block; 3381 } 3382 3383 .legend-element:hover { 3384 color: var(--legend-element-hover); 3385 } 3386 3387 .legend-element.selected { 3388 color: var(--legend-element-hover); 3389 } 3390 3391 #metrics-table-container { 3392 overflow-y: scroll; 3393 font-size: 16px; 3394 } 3395 3396 #metrics-table-container table{ 3397 width: 100%; 3398 } 3399 3400 #metrics-table-container table th:first-child { 3401 border-radius: 6px 0 0 0; 3402 width: 70%; 3403 } 3404 3405 #metrics-table-container table th:last-child { 3406 border-radius: 0 6px 0 0; 3407 border-left: 4px var(--top-bar-bg-color-regular) solid; 3408 } 3409 3410 #metrics-table-container table tr:first-child{ 3411 background: var(--table-header-bg-color); 3412 } 3413 3414 #metrics-table-container tr th{ 3415 padding: 10px 20px; 3416 } 3417 3418 #metrics-table-container table tr td{ 3419 padding: 8px 20px; 3420 color: var(--table-or-regular-text-color); 3421 } 3422 3423 #metrics-table-container tr:nth-child(odd) { 3424 background: var(--datatable-odd-row-bg-color) 3425 } 3426 3427 #metrics-table-container tr:nth-child(even) { 3428 background: var(--datatable-even-row-bg-color) 3429 } 3430 3431 /* MY ORG PAGE */ 3432 .myOrg { 3433 width: 100%; 3434 display: flex; 3435 flex-direction: column; 3436 min-height: 100vh; 3437 } 3438 3439 .myOrg-container { 3440 display: flex; 3441 flex-direction: column; 3442 height: 100%; 3443 overflow-y: scroll; 3444 } 3445 3446 .myOrg-inner-container { 3447 font-size: 14px; 3448 padding: 20px; 3449 padding-top: 0px; 3450 height: 100%; 3451 } 3452 3453 .copy-link-container { 3454 display: flex; 3455 height: 32px; 3456 align-items: center; 3457 } 3458 3459 .myOrgFormInput { 3460 flex-grow: 3; 3461 width: 694px; 3462 height: 32px; 3463 margin-right: 6px; 3464 border: none; 3465 background: var(--myOrg-input); 3466 font-size: 14px; 3467 border-radius: 5px; 3468 color: var(--timepicker-text-color); 3469 } 3470 3471 .copy-button { 3472 background-size: cover; 3473 height: 32px; 3474 background-color: var(--myOrg-input); 3475 border-radius: 5px; 3476 color: var(--timepicker-text-color); 3477 width: 32px; 3478 margin-right: 8px; 3479 border: none; 3480 display: flex; 3481 align-items: center; 3482 justify-content: center; 3483 font-size: 20px; 3484 } 3485 3486 .copy-button:hover { 3487 background-color: var(--purple-1); 3488 color: var(--white-0); 3489 } 3490 3491 .section-buttons { 3492 display: flex; 3493 height: 30px; 3494 border-radius: 5px; 3495 width: fit-content; 3496 align-items: center; 3497 padding: 4px; 3498 margin-top: 10px; 3499 background: var(--myOrg-input); 3500 3501 } 3502 3503 .section-button { 3504 padding: 4px 10px 5px 10px; 3505 height: 24px; 3506 width: fit-content; 3507 border-radius: 5px; 3508 background: var(--myOrg-input); 3509 display: flex; 3510 align-items: center; 3511 justify-content: center; 3512 margin: 0px; 3513 } 3514 3515 .section-button a{ 3516 text-decoration: none; 3517 color: var(--subsection-border); 3518 } 3519 3520 .section-button.active a{ 3521 color: var(--datatable-header-text-color); 3522 } 3523 3524 .section-button.active { 3525 height: 24px; 3526 border: 1px solid #6347D9; 3527 background: var(--tab-active-background); 3528 } 3529 3530 .api-keys-inner-info { 3531 display: flex; 3532 margin-bottom: 16px; 3533 } 3534 3535 .caption { 3536 font-size: 16px; 3537 color: var(--text-color); 3538 margin-bottom: 10px; 3539 } 3540 3541 .inviteBtn { 3542 width: 106px !important; 3543 justify-content: center; 3544 border-radius: 5px; 3545 font-size: 14px !important; 3546 } 3547 3548 .inviteBtn:disabled, #del-org-btn:disabled, #del-index-btn:disabled { 3549 background-color: var(--timepicker-text-color) !important; 3550 } 3551 3552 .myOrg-inner-container input[type="submit"] { 3553 height: 100%; 3554 background-size: cover; 3555 background-color: var(--purple-1); 3556 border-radius: 5px; 3557 color: white; 3558 line-height: 20px; 3559 font-size: 14px; 3560 width: 144px; 3561 } 3562 3563 .users-header { 3564 display: flex; 3565 justify-content: space-between; 3566 align-items: baseline; 3567 } 3568 3569 #inviteForm { 3570 display: flex; 3571 height: 32px; 3572 align-items: center; 3573 } 3574 3575 .users-data-table { 3576 height: 90%; 3577 width: 100%; 3578 margin-top: 8px; 3579 } 3580 3581 .myOrg #panelLogResultsGrid{ 3582 height: 100%; 3583 width: 100%; 3584 } 3585 3586 .users-table { 3587 height: 100%; 3588 width: 100%; 3589 background:#B4A6E6; 3590 } 3591 3592 #orgGridBtns { 3593 margin-top: 6px; 3594 } 3595 3596 .allInputs { 3597 padding: 8px 10px; 3598 font-size: 14px; 3599 color: var(--timepicker-text-color); 3600 border: none; 3601 background: #F4F4F5; 3602 border-radius: 5px; 3603 display: flex; 3604 margin-right: 12px; 3605 align-items: center; 3606 height: 100%; 3607 background: var(--myOrg-input); 3608 } 3609 3610 .myOrg-heading { 3611 font-weight: bold; 3612 font-size: 18px; 3613 color: var(--datatable-header-text-color); 3614 } 3615 3616 .myOrg-inner-container label { 3617 font-size: 14px; 3618 margin-bottom: 5px; 3619 } 3620 3621 .myOrg .role-inner-dropdown{ 3622 line-height: 28px; 3623 border-radius: 5px; 3624 border: 1px solid var(--myOrg-dropdown-border-color); 3625 padding-left: 10px; 3626 padding-right:10px ; 3627 width: 170px; 3628 display: flex; 3629 justify-content: space-between; 3630 align-items: center; 3631 color: var(--table-or-regular-text-color); 3632 position: relative; 3633 } 3634 3635 3636 .myOrg .dropdown-option { 3637 background: var(--myOrg-dropdown-options-bg); 3638 z-index: 99; 3639 position: relative; 3640 width: 170px; 3641 padding: 0 7px 7px 7px; 3642 margin-top: 5px; 3643 border: 1px solid var(--myOrg-dropdown-border-color); 3644 border-radius: 5px; 3645 color: var(--table-or-regular-text-color); 3646 } 3647 3648 .myOrg .dropdown-option li { 3649 padding: 5px; 3650 border-radius: 5px; 3651 margin-top: 7px; 3652 background: var(--myOrg-dropdown-bg); 3653 } 3654 3655 .myOrg .dropdown-option{ 3656 visibility: hidden; 3657 } 3658 3659 .myOrg .dropdown-option.active{ 3660 visibility: visible; 3661 } 3662 3663 .myOrg .dropdown-option li:hover{ 3664 background: #6347D9; 3665 color: #fff; 3666 } 3667 3668 .arrow-btn { 3669 display: none; 3670 } 3671 3672 .myOrg .ag-cell{ 3673 overflow: visible; 3674 } 3675 3676 .copy-msg { 3677 font-size: 22px; 3678 /* color: var(--text-color); */ 3679 top: 0.75rem; 3680 /* left: 62.75rem; */ 3681 pointer-events: all; 3682 cursor: pointer; 3683 left: auto; 3684 right: 10px; 3685 } 3686 3687 #receiverEmail { 3688 width: 407px; 3689 } 3690 3691 .myOrgScreen .ag-root-wrapper { 3692 padding-left: 0 !important; 3693 height: 100%; 3694 } 3695 3696 #viewPanel-container { 3697 display: none; 3698 flex-direction: column; 3699 max-height: 100vh; 3700 width: 100%; 3701 height: 100%; 3702 position: relative; 3703 padding: 1em 0; 3704 padding-left: 0px; 3705 } 3706 3707 /* ORG SIGNUP FORM */ 3708 .create-org-page{ 3709 height: 100vh; 3710 width: 100vw; 3711 display: flex; 3712 align-items: center; 3713 justify-content: center; 3714 background: linear-gradient(107.3deg, #6347D9 -0.52%, #CCC3EF 100%); 3715 } 3716 3717 .org-signup-form{ 3718 width: 600px; 3719 height: 354px; 3720 background: var(--black-1); 3721 border-radius: 5px; 3722 padding: 60px 70px; 3723 color: var(--white-0); 3724 display: flex; 3725 flex-direction: column; 3726 justify-content: space-between; 3727 } 3728 3729 .org-signup-form .header { 3730 font-weight: 700; 3731 font-size: 32px; 3732 text-align: center; 3733 margin-bottom: 40px; 3734 } 3735 3736 .org-signup-form label{ 3737 color: var(--white-0); 3738 font-size: 18px; 3739 padding-bottom: 10px; 3740 } 3741 3742 .org-signup-form .input{ 3743 background: #262038; 3744 border: 1px solid #B4A6E6; 3745 border-radius: 5px; 3746 width: 100%; 3747 font-size: 18px; 3748 color: #C8C7CC; 3749 } 3750 3751 .org-signup-form .error-tip{ 3752 color: #6449D6; 3753 visibility: hidden; 3754 font-size: 13px; 3755 margin-left: 8px; 3756 margin-bottom: 0px; 3757 } 3758 .org-signup-form .org-name-err-2{ 3759 margin-top: -15px; 3760 } 3761 .org-signup-form .error-tip.active{ 3762 visibility: visible; 3763 text-align: initial; 3764 } 3765 3766 .org-signup-form input[type="text"]:focus { 3767 border-radius: 5px; 3768 outline: 1pt solid var(--drop-down-btn-border-active); 3769 outline-offset: -1pt; 3770 } 3771 3772 .org-signup-form input[type="text"].active { 3773 color: #C8C7CC; 3774 } 3775 3776 .org-signup-form button { 3777 width: 195px !important; 3778 height: 45px !important; 3779 border-radius: 5px; 3780 border: none; 3781 background: var(--component-bg-color); 3782 color: var(--component-text-color); 3783 } 3784 3785 #submit-org-btn:hover { 3786 background: var(--lavender-1); 3787 transition: all 0.1s linear; 3788 } 3789 3790 #submit-org-btn { 3791 margin: 10px 0 0 14px !important; 3792 background: var(--purple-1); 3793 } 3794 3795 .submit-org-btn { 3796 text-align: center; 3797 } 3798 3799 #logout-btn { 3800 width: 80px; 3801 } 3802 3803 .org-settings { 3804 width: 38vw; 3805 } 3806 3807 .org-settings-table tr { 3808 font-weight: var(--fw-500) !important; 3809 } 3810 3811 #retention-days-value { 3812 margin: 5px; 3813 width: 64px; 3814 height: 32px; 3815 } 3816 3817 #confirm-ret-change-prompt { 3818 display: none; 3819 } 3820 3821 .cancel-btn { 3822 color: var(--button-text-color) !important; 3823 background: var(--component-bg-color); 3824 } 3825 3826 #buttons-ret-prompt, .buttons-prompt { 3827 justify-content: space-between; 3828 display: flex; 3829 } 3830 3831 .buttons-prompt button { 3832 width: 49%; 3833 height: 32px !important; 3834 border-radius: 5px; 3835 border: none; 3836 } 3837 3838 #settings-buttons { 3839 display: flex; 3840 margin: 24px 0; 3841 } 3842 3843 #cancel-ret-days-btn, #confirm-save-ret-days-btn { 3844 width: 100px; 3845 margin-right: 10px; 3846 border-radius: 5px; 3847 box-shadow: none !important; 3848 border: none; 3849 font-size: 14px; 3850 } 3851 3852 #delete-org-container { 3853 border: 2px solid; 3854 border-color: #e16565; 3855 border-radius: 5px; 3856 } 3857 3858 #delete-org-inner { 3859 padding: 20px; 3860 } 3861 3862 #confirm-del-org-prompt { 3863 display: block; 3864 width: 607px !important; 3865 } 3866 3867 .delete-org-btn, #del-index-btn { 3868 background-color: var(--delete-btn) !important; 3869 color: var(--button-text-color) !important; 3870 height: 32px; 3871 padding: 0 20px; 3872 } 3873 3874 #confirm-del-org-prompt .header { 3875 color: var(--text-color); 3876 margin-bottom: 15px; 3877 font-weight: bold; 3878 font-size: 18px; 3879 } 3880 3881 .prompt-input { 3882 height: 32px; 3883 margin-bottom: 18px; 3884 } 3885 3886 .prompt-text { 3887 font-weight: var(--fw-500); 3888 } 3889 3890 .prompt-text-bottom { 3891 margin: 15px 0; 3892 } 3893 3894 #delete-org-inner .header { 3895 margin-bottom: 10px; 3896 font-size: 16px; 3897 font-weight: bold; 3898 } 3899 3900 #confirm-del-org-prompt { 3901 display: none; 3902 } 3903 3904 .del-org-prompt-text-container span { 3905 font-weight: var(--fw-900); 3906 } 3907 3908 3909 3910 /*SignUP Form*/ 3911 .email-form input { 3912 font-size: 14px; 3913 margin-bottom: 16px; 3914 } 3915 .email-form input:focus{ 3916 outline: 1pt solid var(--drop-down-btn-border-active); 3917 outline-offset: -1pt; 3918 color: var(--text-color); 3919 } 3920 .log-in-btn{ 3921 background-color: var(--purple-1); 3922 border: none; 3923 color: var(--white) !important; 3924 height: 36px; 3925 width: 100%; 3926 border-radius: 5px; 3927 margin-top: 8px; 3928 font-weight: 600; 3929 } 3930 .log-in-btn:hover{ 3931 background-color: var(--btn-hover-or-click-bg-color); 3932 } 3933 .login-separator{ 3934 margin-top: 20px; 3935 margin-bottom: 20px; 3936 position: relative; 3937 text-align: center; 3938 color: var(--black-4); 3939 font-weight: 600; 3940 } 3941 .login-separator:before{ 3942 content:" "; 3943 display: block; 3944 height: 1.5px; 3945 width: 185px; 3946 position: absolute; 3947 top: 50%; 3948 left: 30px; 3949 background: var(--black-4); 3950 } 3951 3952 .login-separator:after{ 3953 content:" "; 3954 height: 1.5px; 3955 width: 185px; 3956 background: var(--black-4); 3957 display: block; 3958 position: absolute; 3959 top: 50%; 3960 right: 30px; 3961 } 3962 3963 #login-error-message { 3964 background-color: rgba(224, 104, 124, 0.5); 3965 border-top: 4px solid rgb(224 104 125 / 1); 3966 padding: 10px; 3967 border-radius: 5px; 3968 margin-bottom: 20px; 3969 display: none; 3970 font-weight: 600; 3971 } 3972 3973 #login-form { 3974 width: 100%; 3975 height: 100vh; 3976 display: flex; 3977 align-items: center; 3978 justify-content: center; 3979 background: linear-gradient(107.3deg, #6347D9 -0.52%, #CCC3EF 100%); 3980 } 3981 3982 .form-box{ 3983 width: 500px; 3984 background: var(--black-1); 3985 border-radius: 5px; 3986 padding: 30px 40px; 3987 color: var(--white-0); 3988 display: flex; 3989 flex-direction: column; 3990 justify-content: space-between; 3991 } 3992 3993 .form-box .sslogo{ 3994 width: 200px; 3995 } 3996 3997 .form-box .tag-line{ 3998 color: #B4A6E6; 3999 font-size: 20px; 4000 font-weight: 600; 4001 margin-top: 10px; 4002 margin-bottom: 20px; 4003 } 4004 4005 .signup-fields { 4006 display: flex; 4007 flex-direction: column; 4008 justify-content: center; 4009 align-items: center; 4010 } 4011 4012 .signup-fields a{ 4013 background: #262038; 4014 border-radius: 5px; 4015 text-decoration: none; 4016 height: 36px; 4017 width: 100%; 4018 margin-bottom: 15px; 4019 font-size: 14px; 4020 font-weight: 700; 4021 letter-spacing: 0.02em; 4022 color: var(--white-0); 4023 display: flex; 4024 align-items: center; 4025 justify-content: center; 4026 } 4027 4028 .signup-fields a:hover,.signup-fields a:focus{ 4029 /* border: 1px solid var(--purple-1); */ 4030 background: #352f48; 4031 } 4032 .signup-fields a span img{ 4033 margin-right: 20px; 4034 height: 20px; 4035 } 4036 4037 .tag-line-toggle p{ 4038 color: #B4A6E6; 4039 font-size: 14px; 4040 margin-top: 10px; 4041 } 4042 4043 .tag-line-toggle p span{ 4044 margin-left: 5px; 4045 font-size: 15px; 4046 color: var(--orange-1); 4047 font-weight: 700; 4048 cursor: pointer; 4049 } 4050 4051 .tag-line-toggle p span:hover{ 4052 text-decoration: underline; 4053 } 4054 4055 .form-toggle #signup{ 4056 display: none; 4057 } 4058 4059 .tag-line-toggle .signin-tag{ 4060 display: none; 4061 } 4062 4063 .tag-line-toggle .signup-tag{ 4064 display: block; 4065 } 4066 4067 .tag-line-toggle.active .signin-tag{ 4068 display: block; 4069 } 4070 4071 .tag-line-toggle.active .signup-tag{ 4072 display: none; 4073 } 4074 4075 .div-toast, .ret-days-toast, .usage-stats-toast { 4076 background: linear-gradient(to right, #6347D9, #160F29); 4077 right: 19px; 4078 top: 86px; 4079 position: absolute; 4080 padding: 0.5rem 1rem; 4081 transition: 2s; 4082 z-index: 2; 4083 border-radius: 5px; 4084 } 4085 4086 .test-data-toast{ 4087 background: linear-gradient(to right, #6347D9, #160F29); 4088 right: 40%; 4089 top: 200px; 4090 position: absolute; 4091 padding: 0.5rem 1rem; 4092 transition: 2s; 4093 z-index: 2; 4094 border-radius: 5px; 4095 } 4096 4097 .ret-days-toast { 4098 right: 490px; 4099 top: 266px; 4100 } 4101 4102 .usage-stats-toast { 4103 position: relative; 4104 z-index: 10; 4105 top: -11px 4106 } 4107 4108 .toast-close { 4109 cursor: pointer; 4110 border: none; 4111 outline: none; 4112 background-color: transparent; 4113 color: var(--white-0); 4114 position: relative; 4115 } 4116 4117 .usage-stats .index-header { 4118 display: flex; 4119 flex-direction: row; 4120 justify-content: space-between; 4121 } 4122 4123 .usage-stats-header{ 4124 display: flex; 4125 justify-content: space-between; 4126 align-items: center; 4127 } 4128 4129 #app-content-area .usage-stats-header{ 4130 display: flex; 4131 justify-content: space-between; 4132 align-items: center; 4133 } 4134 4135 4136 .org-nav-tab, .ingestion-nav-tab{ 4137 display: flex; 4138 justify-content: space-between; 4139 margin: 20px; 4140 margin-bottom: 10px; 4141 } 4142 4143 .usage-stats{ 4144 display:flex; 4145 flex-direction: column; 4146 } 4147 4148 .usage-stats .index-stats{ 4149 z-index: 1; 4150 } 4151 4152 .myOrg #source-selection{ 4153 height: 32px; 4154 border: 1px solid var(--border-btn-color) !important; 4155 margin-right: 16px; 4156 } 4157 .myOrg #source-options, 4158 .myOrg #source-selection { 4159 width: 674px; 4160 } 4161 .source-option{ 4162 width: 100% !important; 4163 margin-left: 0 !important; 4164 margin-bottom: 0 !important; 4165 } 4166 4167 #versionInfo{ 4168 font-size: 18px; 4169 } 4170 /*Alerting Page*/ 4171 #alerting{ 4172 padding: 20px; 4173 width: 100%; 4174 background-color: var(--alert-background); 4175 display: flex; 4176 flex-direction: column; 4177 max-height: 100vh; 4178 overflow-y: scroll; 4179 font-size: 14px; 4180 } 4181 4182 #alerting input , #alerting .dropdown-toggle , #alerting textarea ,.add-label-container{ 4183 border: 1px solid var(--search-input-border); 4184 background: var(--alert-background); 4185 } 4186 4187 #alerting .form-container { 4188 background-color: var(--black1-to-white0); 4189 border: 1px solid var(--search-input-border); 4190 border-radius: 10px; 4191 padding: 30px; 4192 box-shadow: var(--box-shadow); 4193 overflow-y: scroll; 4194 } 4195 4196 #alerting .section-buttons{ 4197 box-shadow: var(--box-shadow); 4198 } 4199 4200 #alerting .section-buttons,#alerting .section-button{ 4201 background-color: var(--black1-to-white0); 4202 } 4203 4204 #alerting .section-button.active{ 4205 background: var(--tab-active-background); 4206 } 4207 4208 .subsection-heading{ 4209 display: flex; 4210 align-items: center; 4211 } 4212 4213 .subsection-heading div:nth-child(2){ 4214 color: var(--drop-down-text-color); 4215 font-size: 18px; 4216 font-weight: 600; 4217 margin-left: 20px; 4218 } 4219 4220 .label-subsection{ 4221 margin-left: 62px 4222 } 4223 #alerting .circle{ 4224 height: 36px; 4225 width: 36px; 4226 border-radius: 50%; 4227 background-color: var(--purple-1); 4228 color: var(--white-0); 4229 display: flex; 4230 justify-content: center; 4231 align-items: center; 4232 font-weight: 700; 4233 4234 } 4235 4236 .alert-form-subsection{ 4237 background-color: var(--black1-to-white0); 4238 border: 1px solid var(--search-input-border); 4239 padding: 20px; 4240 border-radius: 10px; 4241 margin-bottom: 30px; 4242 margin-top: 20px; 4243 margin-left: 50px 4244 } 4245 4246 .alerts-nav-tab{ 4247 display: flex; 4248 } 4249 4250 #alerting .caption{ 4251 margin-top: 10px; 4252 margin-bottom: 10px; 4253 } 4254 4255 #save-alert-btn,#save-contact-btn,#new-alert-rule, #new-contact-point,.add-cp-btn,.add-new-contact-type{ 4256 margin: 0; 4257 text-decoration: none; 4258 border: none; 4259 height: 30px; 4260 color: var(--button-text-color) !important; 4261 background: var(--btn-regular-bg-color); 4262 width: 100px; 4263 display: flex; 4264 align-items: center; 4265 justify-content: center; 4266 } 4267 4268 #new-contact-point,#new-alert-rule{ 4269 white-space: nowrap; 4270 width: fit-content; 4271 } 4272 4273 .add-new-contact-type{ 4274 width: 194px; 4275 } 4276 4277 #cancel-alert-btn,#cancel-contact-btn{ 4278 height: 30px; 4279 width: 100px; 4280 margin-right: 10px; 4281 color: var(--button-text-color) !important; 4282 background: var(--component-bg-color); 4283 padding: 0px 20px; 4284 } 4285 .add-alert-form,.add-contact-form{ 4286 width: 70%; 4287 } 4288 4289 .evaluation-container,.condition-container,.notification-container,.query-container,.query-lang-container{ 4290 display: flex; 4291 } 4292 .query-lang-container{ 4293 width: 92%; 4294 } 4295 .query-lang-container div, .query-lang-container div button{ 4296 width: 100%; 4297 } 4298 #alert-data-source,#logs-language-btn{ 4299 max-width: 210px; 4300 } 4301 #alert-condition,#contact-types,#contact-points-dropdown{ 4302 width: 210px; 4303 } 4304 .evaluation-container div,.condition-container div,.notification-container div{ 4305 margin-right: 30px; 4306 margin-bottom: 0; 4307 } 4308 4309 .evaluation-container div{ 4310 display: flex; 4311 align-items: center; 4312 } 4313 4314 .query-container, .evaluation-container, .message-info{ 4315 margin-top: 20px; 4316 } 4317 4318 .min-span{ 4319 color: var(--search-bar-text-color-regular-or-hover); 4320 margin-left:-50px 4321 } 4322 4323 .label-container input, .condition-container input{ 4324 width: 210px; 4325 } 4326 4327 .evaluation-container input{ 4328 margin-left: 40px; 4329 width: 70px; 4330 margin-right: 10px; 4331 } 4332 .label-container{ 4333 margin-bottom: 20px; 4334 } 4335 4336 #label-evaluate-every , #for-span{ 4337 position: relative; 4338 } 4339 4340 #info-evaluate-every,#info-evaluate-for{ 4341 top: 4px; 4342 right: -30px; 4343 } 4344 4345 #alert-condition,#contact-types,#contact-points-dropdown,#alert-data-source, 4346 #logs-language-btn{ 4347 height: 32px; 4348 display: flex; 4349 justify-content: space-between; 4350 align-items: center; 4351 } 4352 4353 .alert-condition-options,.contact-options,.contact-points-options, #data-source-options, 4354 #logs-language-options { 4355 width: 210px; 4356 background: var(--index-drop-down-box-bg-color); 4357 overflow: hidden; 4358 border: 1px solid var(--timepicker-border-color); 4359 padding: 0; 4360 } 4361 4362 .alert-condition-options li,.contact-options li,.contact-points-options li , .query-lang-container li{ 4363 background: var(--index-drop-down-item-inactive-bg-color); 4364 color: var(--index-drop-down-item-inactive-text-color); 4365 margin: 6px; 4366 cursor: pointer; 4367 padding: 6px 0; 4368 padding-left: 12px; 4369 font-weight: var(--fw-400); 4370 font-family: "DINpro", Arial, sans-serif; 4371 border-radius: 4px; 4372 } 4373 4374 .alert-condition-option.active,.contact-option.active,.contact-points-option.active, 4375 .data-source-option.active,.logs-language-option.active{ 4376 background: var(--index-drop-down-item-active-bg-color); 4377 color: var(--index-drop-down-item-active-text-color); 4378 } 4379 4380 .alert-condition-option:hover,.contact-option:hover,.contact-points-option:hover,.data-source-option:hover, 4381 .logs-language-option:hover{ 4382 background: var(--index-drop-down-item-hover-bg-color); 4383 color: var(--index-drop-down-item-hover-text-color); 4384 } 4385 4386 .add-contact-form div{ 4387 margin-bottom: 20px; 4388 } 4389 4390 .message{ 4391 background: var(--search-bar-bg); 4392 border: none; 4393 color: var(--search-bar-text-color-regular-or-hover); 4394 font-size: 14px; 4395 border-radius: 5px; 4396 } 4397 4398 .message:focus{ 4399 color: var(--search-bar-text-color-active); 4400 border-radius: 5px; 4401 background: var(--search-bar-bg); 4402 outline: 1pt solid var(--drop-down-btn-border-active); 4403 outline-offset: -1pt; 4404 } 4405 4406 .upper-header{ 4407 display: flex; 4408 justify-content: space-between; 4409 align-items: center; 4410 } 4411 4412 #alert-grid-container{ 4413 height: 100% !important; 4414 margin-bottom: 20px; 4415 } 4416 4417 #alert-grid-btn{ 4418 display: flex; 4419 } 4420 4421 #contact-points-dropdown,.contact-points-options,.new-contact-point,#contact-types,.contact-options { 4422 width: 300px; 4423 } 4424 4425 .contact-points-options{ 4426 overflow-y: scroll; 4427 } 4428 4429 .contact-container{ 4430 padding: 20px; 4431 padding-bottom: 0px; 4432 border: 1px solid var(--search-input-border); 4433 border-radius: 5px; 4434 } 4435 4436 .del-contact-type,.delete-icon{ 4437 background-image: url(../assets/dark-delete-icon-regular.svg); 4438 height: 20px; 4439 background-repeat: no-repeat; 4440 width: 18px; 4441 cursor: pointer; 4442 background-color: transparent; 4443 border-width: 0; 4444 margin-left: 15px; 4445 padding-bottom: 0; 4446 margin-top: 5px; 4447 float: right; 4448 } 4449 4450 #alerting input,.add-label-container{ 4451 height: 32px; 4452 } 4453 4454 #alerting .timepicker .dropdown-toggle{ 4455 height: 32px !important; 4456 display: flex; 4457 align-items: center; 4458 justify-content: space-between; 4459 width: 210px !important; 4460 } 4461 4462 #alerting .dropdown-menu.daterangepicker.show { 4463 height: 216px !important; 4464 } 4465 4466 .delete-dialog #cancel-btn{ 4467 float: right; 4468 } 4469 4470 .align-center-grid { 4471 display: flex; 4472 align-items: center; 4473 } 4474 4475 4476 .clear-icon { 4477 position: absolute; 4478 top: 11px; 4479 right: 35px; 4480 cursor: pointer; 4481 display: none; 4482 background: url(../assets/cross-btn-icon.svg); 4483 height: 11px; 4484 width: 11px; 4485 background-size: cover; 4486 } 4487 4488 .dataTables_wrapper.no-footer .dataTables_scrollBody { 4489 border: none !important; 4490 } 4491 4492 /*Minion Searches*/ 4493 4494 .logminion-container{ 4495 padding: 20px; 4496 height: 100%; 4497 } 4498 .main-heading{ 4499 font-size: 18px; 4500 color: var(--datatable-header-text-color); 4501 font-weight: 600; 4502 } 4503 4504 .log-pane { 4505 display: flex; 4506 margin: 10px 0 15px 0; 4507 } 4508 4509 .log-pane button{ 4510 height: 34px; 4511 width: 110px; 4512 margin-right: 14px; 4513 border-radius: 5px; 4514 color: var(--text-color); 4515 display: flex; 4516 align-items: center; 4517 justify-content: center; 4518 } 4519 4520 .log-pane button h3{ 4521 margin-right: 10px; 4522 font-size: 14px; 4523 margin-bottom: 0; 4524 } 4525 4526 .log-pane button h4{ 4527 font-weight: 700; 4528 font-size: 15px; 4529 margin-bottom: 0; 4530 } 4531 4532 #error{ 4533 border: 1px solid #F55759; 4534 background: rgba(245, 87, 89, 0.30); 4535 } 4536 4537 #info{ 4538 border: 1px solid #53DB6E; 4539 background: rgba(83, 219, 110, 0.30) 4540 } 4541 4542 #warning{ 4543 border: 1px solid #F4BB20; 4544 background: rgba(244, 187, 32, 0.30) 4545 } 4546 4547 #debug{ 4548 border: 1px solid #418CE4; 4549 background: rgba(65, 140, 228, 0.30) 4550 } 4551 4552 .result-pane{ 4553 background-color: var(--datatable-bg-color); 4554 height: 36%; 4555 border-radius: 5px; 4556 position: relative; 4557 margin-top: 14px; 4558 } 4559 4560 .result-pane .header{ 4561 height: 34px; 4562 position: absolute; 4563 top: 0; 4564 background: var(--datatable-header-bg-color); 4565 width: 100%; 4566 border-radius: 5px 5px 0 0; 4567 padding: 7px; 4568 font-weight: 600; 4569 } 4570 4571 .result-body { 4572 padding-top: 54px; 4573 padding-left: 10px; 4574 } 4575 .row-details p{ 4576 font-size: 16px; 4577 margin-bottom: 0.5rem; 4578 } 4579 #ag-grid{ 4580 height: 100%; 4581 width: 100%; 4582 margin-bottom: 10px; 4583 } 4584 4585 .ag-paging-panel{ 4586 font-size: 12px; 4587 } 4588 4589 .ag-paging-page-summary-panel{ 4590 margin-left: 20px; 4591 } 4592 4593 #ag-grid .ag-row:hover { 4594 background: var(--datatable-even-row-bg-color); 4595 cursor: pointer; 4596 } 4597 4598 #ag-grid .ag-header-cell{ 4599 padding: 4px !important; 4600 } 4601 4602 /* Create Dashboard from logs popup */ 4603 #add-logs-to-db-btn,#alert-from-logs-btn{ 4604 margin-left: 10px; 4605 } 4606 4607 #add-logs-to-db-btn img{ 4608 height: 18px; 4609 margin-bottom: 2px; 4610 } 4611 4612 #create-db-popup .create-db{ 4613 width: 195px !important; 4614 height: 32px !important; 4615 border-radius: 5px; 4616 border: none; 4617 background: var(--btn-regular-bg-color); 4618 color: var(--component-text-color) !important; 4619 margin-left: 20px; 4620 } 4621 4622 #create-db-popup #cancel-dbbtn{ 4623 width: 195px !important; 4624 height: 32px !important; 4625 border-radius: 5px; 4626 border: none; 4627 background: var(--component-bg-color); 4628 color: var(--component-text-color) !important; 4629 } 4630 4631 #create-db-popup .error-tip{ 4632 display: none; 4633 } 4634 4635 #create-db-popup .error-tip.active{ 4636 display: block; 4637 color: #6449D6; 4638 font-size: 13px; 4639 margin-bottom: 0px; 4640 } 4641 #create-db-popup .section-buttons, #create-db-popup .section-button{ 4642 background-color: var(--dashboard-tab-bg); 4643 } 4644 #create-db-popup .section-button.active{ 4645 background: var(--tab-active-background); 4646 } 4647 4648 #selected-dashboard{ 4649 height: 32px; 4650 width: 100%; 4651 display: flex; 4652 justify-content: space-between; 4653 align-items: center; 4654 } 4655 4656 #dashboard-options{ 4657 width: 100%; 4658 background: var(--index-drop-down-box-bg-color); 4659 overflow: hidden; 4660 padding: 0px 10px 0px 0px; 4661 border: 1px solid var(--timepicker-border-color); 4662 max-height: 102px; 4663 overflow-y: scroll; 4664 } 4665 4666 #dashboard-options .dashboard{ 4667 width: 95%; 4668 background: var(--index-drop-down-item-inactive-bg-color); 4669 color: var(--index-drop-down-item-inactive-text-color); 4670 margin-bottom: 10px; 4671 margin-top: 10px; 4672 cursor: pointer; 4673 margin-left: 12px; 4674 margin-right: 12px; 4675 padding: 4px 0; 4676 padding-left: 12px; 4677 font-weight: var(--fw-400); 4678 font-family: "DINpro", Arial, sans-serif; 4679 border-radius: 4px; 4680 min-height: 32px; /* Min height for any dropdown option including empty */ 4681 } 4682 4683 #dashboard-options .dashboard:hover{ 4684 background: var(--index-drop-down-item-hover-bg-color); 4685 color: var(--index-drop-down-item-hover-text-color); 4686 } 4687 4688 #dashboard-options .dashboard.active { 4689 background: var(--index-drop-down-item-active-bg-color); 4690 color: var(--index-drop-down-item-active-text-color); 4691 } 4692 4693 .sendMsg{ 4694 top: 35px; 4695 } 4696 .message-info{ 4697 position: relative; 4698 } 4699 4700 .minion-searches-pane{ 4701 height: 50%; 4702 } 4703 4704 #add-new-contact-popup{ 4705 position: absolute; 4706 top: 10%; 4707 left: 22%; 4708 height: 70%; 4709 width: 60% !important; 4710 overflow: hidden; 4711 } 4712 #add-new-contact-popup #contact-form-container{ 4713 height: 90%; 4714 } 4715 #add-new-contact-popup .add-contact-form{ 4716 width: 100%; 4717 } 4718 4719 .alert-properties > div { 4720 display: flex; 4721 align-items: center; 4722 margin-bottom: 14px; 4723 } 4724 4725 .alert-properties h4 { 4726 font-weight: bold; 4727 margin-right: 10px; 4728 font-size: 16px !important; 4729 margin-bottom: 0px; 4730 } 4731 4732 .alert-properties{ 4733 padding: 20px; 4734 border: 1px solid var(--search-input-border); 4735 box-shadow: var(--box-shadow); 4736 border-radius: 5px; 4737 background-color: var(--black1-to-white0); 4738 margin-top: 30px; 4739 } 4740 4741 .alert-properties .label-element{ 4742 display: inline-block; 4743 border: 1px solid #ccc; 4744 padding: 5px; 4745 margin: 5px; 4746 border-radius: 5px; 4747 height: 32px; 4748 } 4749 4750 #edit-alert-btn ,#delete-alert, #cancel-alert-details{ 4751 height: 30px; 4752 border: 1px solid var(--search-input-border); 4753 border-radius: 5px; 4754 background-color: var(--black1-to-white0); 4755 width: 100px; 4756 margin-right: 10px; 4757 padding: 0; 4758 } 4759 4760 #edit-alert-btn:hover ,#delete-alert:hover, #cancel-alert-details:hover{ 4761 background-color: var(--alert-background); 4762 } 4763 4764 #alert-details{ 4765 margin-top: 10px; 4766 } 4767 .alert-query{ 4768 color: var(--text-color) !important; 4769 outline: none !important; 4770 } 4771 4772 .alert-rule-ctn{ 4773 font-weight: 600; 4774 font-size: 18px; 4775 margin-bottom: 0px; 4776 } 4777 4778 .label-equal{ 4779 padding: 0px 10px; 4780 } 4781 4782 #delete-alert-label{ 4783 margin: 10px; 4784 } 4785 4786 .add-label-container{ 4787 margin-bottom: 20px; 4788 margin-left: 10px; 4789 } 4790 #alert-form .btn-container,#contact-form .btn-container { 4791 margin-top: -70px; 4792 position: absolute; 4793 right: 20px; 4794 } 4795 4796 #alerting #ag-grid{ 4797 border: 1px solid var(--search-input-border); 4798 box-shadow: var(--box-shadow); 4799 border-radius: 5px; 4800 } 4801 4802 #alerting .ag-header-viewport, 4803 #alerting .ag-header-cell{ 4804 background-color: var(--alerting-table-bg-color); 4805 } 4806 4807 #alerting .ag-row-position-absolute::after{ 4808 content: ''; 4809 position: absolute; 4810 left: 10px; 4811 width: 98%; 4812 height: 1px; 4813 background-color: var(--alerting-table-line-color); 4814 bottom: 0; 4815 } 4816 4817 #alerting .ag-theme-mycustomtheme .ag-root-wrapper-body, #alerting .ag-theme-mycustomtheme .ag-center-cols-container { 4818 background-color: var(--black1-to-white0) !important; 4819 } 4820 4821 #alerting #ag-grid .ag-row:hover { 4822 background: var(--alerting-table-hover); 4823 cursor: pointer; 4824 } 4825 /* Log Screen */ 4826 .save-options { 4827 position: absolute; 4828 display: flex; 4829 flex-direction: column; 4830 width: 200px; 4831 height: 100px; 4832 } 4833 4834 .download-options { 4835 width: 200px !important; 4836 } 4837 4838 .ui-progressbar { 4839 height: 1em; 4840 text-align: left; 4841 overflow: hidden; 4842 } 4843 4844 .ui-progressbar .ui-progressbar-value { 4845 margin: -1px; 4846 height: 100%; 4847 background-color: #ccc; 4848 } 4849 4850 .progress-label { 4851 position: absolute; 4852 left: 43%; 4853 top: 4px; 4854 font-weight: bold; 4855 text-shadow: 1px 1px 0 #fff; 4856 } 4857 4858 .progress-download { 4859 width: 450px !important; 4860 height: 10px !important; 4861 z-index: 10; 4862 position: fixed; 4863 left: 50%; 4864 top: 50%; 4865 -webkit-transform: translate(-50%, -50%); 4866 transform: translate(-50%, -50%); 4867 margin-top: -7px; 4868 } 4869 4870 .pop-layer { 4871 position: absolute; 4872 display: none; 4873 left: 0; 4874 top: 0; 4875 z-index: 10; 4876 background: var(--ui-widget-overlay-bg-color); 4877 ; 4878 -moz-opacity: 0.8; 4879 opacity: .80; 4880 } 4881 4882 .pop-download { 4883 display: none; 4884 z-index: 10; 4885 background: white; 4886 width: 500px; 4887 height: 140px; 4888 border-radius: 10px; 4889 position: fixed; 4890 left: 50%; 4891 top: 50%; 4892 -webkit-transform: translate(-50%, -50%); 4893 transform: translate(-50%, -50%); 4894 } 4895 4896 .pop-text { 4897 margin-left: 23px; 4898 font-weight: bold; 4899 margin: 10px 22px; 4900 } 4901 4902 .cancel-loading { 4903 margin-top: 50px !important; 4904 margin-left: 358px !important; 4905 text-align: center; 4906 display: flex; 4907 justify-content: center; 4908 flex-direction: row; 4909 align-items: center; 4910 background: var(--component-bg-color) !important; 4911 color: var(--component-text-color) !important; 4912 width: 117px; 4913 height: 44px !important; 4914 } 4915 .ui-dialog{ 4916 position: fixed; 4917 left: 50%; 4918 top: 50%; 4919 -webkit-transform: translate(-50%, -50%); 4920 transform: translate(-50%, -50%); 4921 } 4922 .avail-fields-btn, 4923 .query-language-btn, 4924 .index-btn, 4925 .filter-input, 4926 .metrics-graph-container, 4927 #metrics-table-container, 4928 input.form-control { 4929 border: 1px solid var(--border-btn-color); 4930 } 4931 .filter-input { 4932 margin: 0; 4933 text-decoration: none; 4934 height: 30px; 4935 } 4936 4937 .live-tail-logs-container{ 4938 margin: 0px 20px 20px 20px!important; 4939 } 4940 4941 .live-tail #query-language-btn{ 4942 margin-left: 0px; 4943 } 4944 .live-tail #views-container{ 4945 margin-left: 0 !important; 4946 } 4947 4948 .live-tail-logs-container .ag-theme-mycustomtheme .ag-root-wrapper { 4949 border: 1px solid var(--border-btn-color); 4950 } 4951 4952 #logs-view-controls .refresh-container{ 4953 display: flex; 4954 margin-top: 5px; 4955 } 4956 4957 #logs-view-controls #refresh-picker-btn{ 4958 margin: 0; 4959 text-decoration: none; 4960 border: none; 4961 height: 30px; 4962 line-height: 14px; 4963 cursor: pointer; 4964 border-radius: 0 5px 5px 0 !important; 4965 width: auto; 4966 padding: 0 5px; 4967 border: 1px solid var(--border-color-regular) !important 4968 } 4969 4970 #refresh-picker-btn:hover { 4971 background: var(--drop-down-btn-bg-hover); 4972 } 4973 4974 #refresh-picker-btn.active { 4975 background: var(--drop-down-btn-bg-active) !important; 4976 outline: 1px solid var(--drop-down-btn-border-active); 4977 outline-offset: -1pt; 4978 } 4979 4980 #logs-view-controls .refresh-btn{ 4981 border-radius: 5px 0 0 5px !important; 4982 background-color: var(--drop-down-btn-bg-regular) !important; 4983 width: 30px; 4984 height: 30px !important; 4985 border: 1px solid var(--border-color-regular) !important 4986 } 4987 4988 .refresh-picker.show{ 4989 min-width: 53px !important; 4990 height: auto !important; 4991 background: var(--timepicker-bg-color); 4992 border: 1px solid var(--timepicker-border-color); 4993 color: var(--table-or-regular-text-color); 4994 border-radius: 5px; 4995 left:3px !important; 4996 padding: 0.5rem; 4997 } 4998 4999 .refresh-range-item.active { 5000 background-color: var(--index-drop-down-item-active-bg-color); 5001 color: var(--index-drop-down-item-active-text-color); 5002 } 5003 5004 .refresh-range-item { 5005 padding:6px 10px !important; 5006 display: flex; 5007 align-items: center; 5008 border-radius: 5px; 5009 line-height: 23px; 5010 cursor: pointer; 5011 } 5012 5013 .refresh-range-item:hover { 5014 color: var(--timepicker-text-color-hover); 5015 } 5016 5017 .refresh-btn{ 5018 height: 32px !important; 5019 background: var(--top-refresh-btn-bg-img) var(--drop-down-btn-bg-regular) center center no-repeat !important; 5020 background-size: 46% !important; 5021 } 5022 5023 #delbutton.default-dashboard-delete:hover { 5024 background-image: url(../assets/dark-delete-icon-regular.svg); 5025 } 5026 #data-ingestion .myOrg-heading{ 5027 font-size: 16px; 5028 margin-top: 20px; 5029 margin-bottom: 4px; 5030 width: 200px; 5031 } 5032 .ingestion-container, .basic-info{ 5033 margin-top: 16px; 5034 width: 50%; 5035 font-size: 14px; 5036 background-color: var(--black1-to-white0); 5037 border: 1px solid var(--search-input-border); 5038 border-radius: 10px; 5039 padding: 30px; 5040 box-shadow: var(--box-shadow); 5041 } 5042 .ingestion-container textarea.form-control{ 5043 background: var(--hits-summary-bg-regular) !important; 5044 color: var(--text-color); 5045 font-size: 14px; 5046 border-radius: 5px; 5047 transition: none; 5048 box-shadow: none !important; 5049 border: 1px solid var(--border-btn-color); 5050 height: 110px; 5051 } 5052 .basic-info input{ 5053 width: 50%; 5054 color: var(--text-color) !important 5055 } 5056 .ingestion-container a{ 5057 color: var(--dashboard-title-color); 5058 font-weight: 600; 5059 } 5060 5061 .help-options { 5062 display: none; 5063 position: absolute; 5064 background-color: var(--side-nav-bg-color); 5065 min-width: 160px; 5066 box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); 5067 padding: 2px; 5068 z-index: 1; 5069 transition: opacity 0.3s ease-in-out; 5070 bottom: 12px; 5071 left: 158px; 5072 border: 1px solid var(--border-btn-color); 5073 border-radius: 5px; 5074 box-shadow: 0px 2px 8px 0px var(--border-shadow); 5075 } 5076 5077 .help-options hr{ 5078 margin: 0; 5079 margin-bottom: 0px; 5080 } 5081 /* .icon-help, */ 5082 .icon-slack, 5083 .icon-docs, 5084 .icon-twitter, 5085 .icon-linkedin, 5086 .icon-feedback{ 5087 min-height: 42px; 5088 min-width: 38px; 5089 background-origin: content-box; 5090 background-repeat: no-repeat; 5091 background-size: 18px; 5092 background-position: 50%; 5093 display: inline-block; 5094 border: 0; 5095 height: 18px; 5096 width: 18px; 5097 } 5098 .icon-help { 5099 background-image: url("../assets/help-icon-inactive.svg"); 5100 height: 18px; 5101 width: 18px; 5102 background-size: 18px; 5103 } 5104 .icon-help:hover, 5105 .menu.nav-help.active .icon-help { 5106 background-image: url("../assets/help-icon-active.svg"); 5107 height: 18px; 5108 width: 18px; 5109 } 5110 .icon-slack { 5111 background-image: url("../assets/slack-icon-inactive.svg"); 5112 } 5113 .icon-slack:hover, 5114 .menu.nav-slack.active .icon-slack { 5115 background-image: url("../assets/slack-icon-active.svg"); 5116 } 5117 5118 .icon-docs { 5119 background-image: url("../assets/docs-icon-inactive.svg"); 5120 } 5121 .icon-docs:hover, 5122 .menu.nav-docs.active .icon-docs { 5123 background-image: url("../assets/docs-icon-active.svg"); 5124 } 5125 .icon-twitter { 5126 background-image: url("../assets/twitter-icon-inactive.svg"); 5127 } 5128 .icon-twitter:hover, 5129 .menu.nav-twitter.active .icon-twitter { 5130 background-image: url("../assets/twitter-icon-active.svg"); 5131 } 5132 .icon-linkedin { 5133 background-image: url("../assets/linkedin-icon-inactive.svg"); 5134 } 5135 .icon-linkedin:hover, 5136 .menu.nav-linkedin.active .icon-linkedin { 5137 background-image: url("../assets/linkedin-icon-active.svg"); 5138 } 5139 #open-new-tab-icon{ 5140 margin-left: 4px; 5141 display: inline-block; 5142 width: 16px; 5143 height: 16px; 5144 background-size: cover; 5145 background-image: var(--new-tab-icon); 5146 margin-bottom: -1px; 5147 } 5148 .copy-icon { 5149 position: absolute; 5150 display: inline-block; 5151 width: 14px; 5152 height: 14px; 5153 background-size: cover; 5154 background-image: var(--copy-icon); 5155 cursor: pointer; 5156 top: 8px; 5157 right: 8px; 5158 transition: background-image 0.3s ease; 5159 } 5160 .copy-icon.success { 5161 background-image: url("../assets/tick-icon.svg"); 5162 width: 16px; 5163 height: 12px; 5164 top: 9px; 5165 } 5166 5167 .loading-icon { 5168 display: block; 5169 width: 50px; 5170 height: 50px; 5171 border: 8px solid #B4A6E6; 5172 border-top: 8px solid #6347D9; 5173 border-radius: 50%; 5174 animation: spin 2s linear infinite; 5175 position: absolute; 5176 top: 50%; 5177 left: 50%; 5178 transform: translate(-50%, -50%); 5179 z-index: 99; 5180 } 5181 5182 @keyframes spin { 5183 0% { transform: translate(-50%, -50%) rotate(0deg); } 5184 100% { transform: translate(-50%, -50%) rotate(360deg); } 5185 } 5186 5187 .ag-overlay-loading-center{ 5188 position: relative; 5189 } 5190 5191 .loading-text{ 5192 position: absolute; 5193 font-weight: 600; 5194 top: 20px; 5195 left: -36px; 5196 background-color: var(--bg-color); 5197 padding: 8px; 5198 }