src/third_party/WebKit/Source/devtools/front_end/inspectorStyle.css

   1 /*
   2  * Copyright (C) 2006, 2007, 2008 Apple Inc.  All rights reserved.
   3  * Copyright (C) 2009 Anthony Ricaud <rik@webkit.org>
   4  *
   5  * Redistribution and use in source and binary forms, with or without
   6  * modification, are permitted provided that the following conditions
   7  * are met:
   8  *
   9  * 1.  Redistributions of source code must retain the above copyright
  10  *     notice, this list of conditions and the following disclaimer.
  11  * 2.  Redistributions in binary form must reproduce the above copyright
  12  *     notice, this list of conditions and the following disclaimer in the
  13  *     documentation and/or other materials provided with the distribution.
  14  * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
  15  *     its contributors may be used to endorse or promote products derived
  16  *     from this software without specific prior written permission.
  17  *
  18  * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
  19  * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
  20  * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
  21  * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
  22  * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
  23  * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
  24  * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
  25  * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  26  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
  27  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  28  */
  29
  30 input[type="search"]:focus,
  31 input[type="text"]:focus {
  32     outline: auto 5px -webkit-focus-ring-color;
  33 }
  34
  35 input[type="checkbox"] {
  36     height: 12px;
  37     width: 12px;
  38     margin: auto 3px;
  39     flex-shrink: 0;
  40 }
  41
  42 label {
  43     cursor: pointer;
  44 }
  45
  46 label:hover input {
  47     box-shadow: 0 0 3px highlight;
  48 }
  49
  50 label.dimmed {
  51     opacity: 0.6;
  52     cursor: default;
  53 }
  54
  55 label.dimmed:hover input {
  56     box-shadow: none;
  57 }
  58
  59 fieldset[disabled] label:hover input {
  60     box-shadow: none;
  61 }
  62
  63 .fill {
  64     position: absolute;
  65     top: 0;
  66     left: 0;
  67     right: 0;
  68     bottom: 0;
  69 }
  70
  71 .view {
  72     position: relative;
  73     flex: auto;
  74 }
  75
  76 .hbox {
  77     display: flex;
  78     flex-direction: row !important;
  79     position: relative;
  80 }
  81
  82 .vbox {
  83     display: flex;
  84     flex-direction: column !important;
  85     position: relative;
  86 }
  87
  88 .flex-auto {
  89     flex: auto;
  90 }
  91
  92 .inline-block {
  93     display: inline-block;
  94 }
  95
  96 .hidden {
  97     display: none !important;
  98 }
  99
 100 .white-background {
 101     background-color: white;
 102 }
 103
 104 .overflow-hidden {
 105     overflow: hidden;
 106 }
 107
 108 .nowrap,
 109 .nowrap-below,
 110 .nowrap-below div,
 111 .nowrap-below span {
 112     white-space: nowrap !important;
 113 }
 114
 115 .toolbar-background {
 116     padding-left: 1px;
 117     border-bottom: 1px solid rgb(64%, 64%, 64%);
 118     background-origin: padding-box;
 119     background-clip: padding-box;
 120 }
 121
 122 .toolbar-colors {
 123     background-color: rgb(233, 233, 233);
 124 }
 125
 126 .toolbar {
 127     flex: 0 0 24px;
 128     display: flex;
 129     flex-direction: row;
 130     position: relative;
 131 }
 132
 133 .toolbar .tabbed-pane-header {
 134     border: none;
 135 }
 136
 137 .toolbar .tabbed-pane-header-contents {
 138     margin: 0;
 139 }
 140
 141 .toolbar .tabbed-pane-header-tab,
 142 .toolbar .tabbed-pane-header-tab.selected {
 143     border-width: 0 2px 0 2px;
 144     background: none;
 145     padding-right: 3px;
 146 }
 147
 148 .toolbar .tabbed-pane-header-tab.selected {
 149     border-width: 0 2px 0 2px;
 150     -webkit-border-image: url(Images/toolbarItemSelected.png) 0 2 0 2;
 151 }
 152
 153 .toolbar button.status-bar-item {
 154     border: none;
 155     margin: 0 -2px;
 156 }
 157
 158 button,
 159 input,
 160 select {
 161   font-family: inherit;
 162   font-size: inherit;
 163 }
 164
 165 body.dock-to-bottom .toolbar-background {
 166     padding-top: 0;
 167 }
 168
 169 body.dock-to-bottom .toolbar-background .tabbed-pane-header {
 170     cursor: ns-resize;
 171 }
 172
 173 body.dock-to-bottom .toolbar-background .tabbed-pane-header .tabbed-pane-header-tabs {
 174     cursor: default;
 175 }
 176
 177 body.platform-windows .toolbar-colors,
 178 body.platform-windows.inactive .toolbar-colors {
 179     background-image: none;
 180 }
 181
 182 body.undocked.platform-mac-leopard .toolbar-colors {
 183     background-image: linear-gradient(to bottom, rgb(175, 175, 175), rgb(151, 151, 151)) !important;
 184     color: #333 !important;
 185 }
 186
 187 body.undocked.platform-mac-leopard.inactive .toolbar-colors {
 188     background-image: linear-gradient(to bottom, rgb(221, 221, 221), rgb(207, 207, 207)) !important;
 189     color: #555 !important;
 190 }
 191
 192 body.undocked.platform-mac-snowleopard .toolbar-colors {
 193     background-image: linear-gradient(to bottom, rgb(189, 189, 189), rgb(167, 167, 167)) !important;
 194     color: #333 !important;
 195 }
 196
 197 body.undocked.platform-mac-snowleopard.inactive .toolbar-colors {
 198     background-image: linear-gradient(to bottom, rgb(228, 228, 228), rgb(216, 216, 216)) !important;
 199     color: #555 !important;
 200 }
 201
 202 body.undocked.platform-mac .toolbar-colors {
 203     background-image: linear-gradient(to bottom, rgb(208, 208, 208), rgb(200, 200, 200)) !important;
 204     color: #333 !important;
 205 }
 206
 207 body.undocked.platform-mac.inactive .toolbar-colors {
 208     background-image: linear-gradient(to bottom, rgb(238, 238, 238), rgb(224, 224, 224)) !important;
 209     color: #555 !important;
 210 }
 211
 212 .toolbar > .tabbed-pane-header {
 213     flex: auto;
 214 }
 215
 216 .tabbed-pane-header.locked .tabbed-pane-header-tab:not(.selected) {
 217     opacity: 0.6;
 218 }
 219
 220 .toolbar-controls-left {
 221     flex: none;
 222     opacity: 0.8;
 223     padding-top: 1px;
 224 }
 225
 226 .toolbar-controls-right {
 227     flex: none;
 228     margin-right: 2px;
 229     padding-top: 1px;
 230 }
 231
 232 .toolbar-controls-right .status-bar-item
 233 {
 234     opacity: 0.8;
 235 }
 236
 237 .search-replace {
 238     -webkit-appearance: none;
 239     border: 0;
 240     padding: 0 3px;
 241     margin: 0;
 242     flex: 1;
 243 }
 244
 245 .search-replace:focus {
 246     outline: none;
 247 }
 248
 249 #search-input-field {
 250     height: 18px;
 251 }
 252
 253 .toolbar-search {
 254     border-spacing: 1px;
 255 }
 256
 257 .toolbar-search td {
 258     padding: 0 5px 0 0;
 259 }
 260
 261 .toolbar-search td > span {
 262     display: flex;
 263 }
 264
 265 .toolbar-search-navigation-controls {
 266     vertical-align: top;
 267     background-image: linear-gradient(rgb(228, 228, 228), rgb(206, 206, 206));
 268 }
 269
 270 .toolbar-search-navigation {
 271     display: inline-block;
 272     width: 18px;
 273     height: 18px;
 274     background-repeat: no-repeat;
 275     background-position: 4px 7px;
 276     border-left: 1px solid rgb(170, 170, 170);
 277     opacity: 0.3;
 278 }
 279
 280 .toolbar-search-navigation.enabled {
 281     opacity: 1.0;
 282 }
 283
 284 .toolbar-search label {
 285     margin: auto 0;
 286 }
 287
 288 .toolbar-search button {
 289     border: 1px solid rgb(163, 163, 163);
 290     border-radius: 8px;
 291     margin: 0;
 292     background-image: linear-gradient(rgb(241, 241, 241), rgb(220, 220, 220));
 293     width: 100%;
 294     height: 20px;
 295 }
 296
 297 .toolbar-search button:active {
 298     background-image: linear-gradient(rgb(185, 185, 185), rgb(156, 156, 156));
 299 }
 300
 301 .toolbar-search-control {
 302     display: -webkit-flex;
 303     width: 253px;
 304     position: relative;
 305     background-color: white;
 306     border: 1px solid rgb(163, 163, 163);
 307     height: 20px;
 308     border-radius: 2px;
 309     margin-left: 1px;
 310 }
 311
 312 .toolbar-replace-control {
 313     border: 1px solid rgb(163, 163, 163);
 314     height: 20px;
 315     border-radius: 2px;
 316     width: 100%;
 317     margin: auto 0;
 318 }
 319
 320 .toolbar-search-navigation.enabled:active {
 321     background-position: 4px 7px, 0 0;
 322 }
 323
 324 .toolbar-search-navigation.toolbar-search-navigation-prev {
 325     background-image: url(Images/searchPrev.png);
 326     border-left: 1px solid rgb(163, 163, 163);
 327 }
 328
 329 .toolbar-search-navigation.toolbar-search-navigation-prev.enabled:active {
 330     background-image: url(Images/searchPrev.png), linear-gradient(rgb(168, 168, 168), rgb(116, 116, 116));
 331 }
 332
 333 .toolbar-search-navigation.toolbar-search-navigation-next {
 334     background-image: url(Images/searchNext.png);
 335     border-left: 1px solid rgb(230, 230, 230);
 336 }
 337
 338 .toolbar-search-navigation.toolbar-search-navigation-next.enabled:active {
 339     background-image: url(Images/searchNext.png), linear-gradient(rgb(168, 168, 168), rgb(116, 116, 116));
 340 }
 341
 342 .search-results-matches {
 343     display: inline-block;
 344     min-height: 10px;
 345     text-align: right;
 346     font-size: 11px;
 347     padding: 1px 4px;
 348     color: rgb(165, 165, 165);
 349 }
 350
 351 .close-button,
 352 .close-button-gray {
 353     background-image: url(Images/statusbarButtonGlyphs.png);
 354     background-size: 320px 144px;
 355     display: inline-block;
 356 }
 357
 358 .close-button {
 359     width: 14px;
 360     height: 14px;
 361     background-position: -128px -96px;
 362 }
 363
 364 .close-button-gray {
 365     width: 13px;
 366     height: 13px;
 367     background-position: -175px -96px;
 368 }
 369
 370 @media (-webkit-min-device-pixel-ratio: 1.5) {
 371 .close-button,
 372 .close-button-gray {
 373     background-image: url(Images/statusbarButtonGlyphs_2x.png);
 374 }
 375 } /* media */
 376
 377 .close-button:hover {
 378     background-position: -96px -96px;
 379 }
 380
 381 .close-button:active {
 382     background-position: -111px -96px;
 383 }
 384
 385 .close-button-gray:hover {
 386     background-position: -143px -96px;
 387 }
 388
 389 .close-button-gray:active {
 390     background-position: -160px -96px;
 391 }
 392
 393 .panel-status-bar {
 394     border-top: none;
 395     display: flex;
 396     background-color: white;
 397     flex: 0 0 23px;
 398     position: relative;
 399 }
 400
 401 .panel-status-bar > div {
 402     margin: auto 0;
 403 }
 404
 405 .panel-status-bar label {
 406     margin: auto 0 auto 5px;
 407     display: flex;
 408     white-space: nowrap;
 409     overflow: hidden;
 410 }
 411
 412 .status-bar {
 413     position: relative;
 414     white-space: nowrap;
 415     height: 23px;
 416     overflow: hidden;
 417     width: 100%;
 418     z-index: 12;
 419     border-top: 1px solid rgb(202, 202, 202);
 420     display: -webkit-flex;
 421 }
 422
 423 .status-bar > div {
 424     display: inline-flex;
 425     overflow: visible;
 426 }
 427
 428 .status-bar-item {
 429     display: inline-block;
 430     height: 22px;
 431     padding: 0;
 432     margin-left: -1px;
 433     margin-right: 0;
 434     vertical-align: top;
 435     border: 0 transparent none;
 436     background-color: transparent;
 437     flex: none;
 438 }
 439
 440 .status-bar-text {
 441     padding-left: 5px;
 442     padding-right: 15px;
 443     height: auto;
 444     margin: auto 0;
 445     white-space: nowrap;
 446     overflow: hidden;
 447 }
 448
 449 #drawer-view-anchor {
 450     display: inline-block;
 451 }
 452
 453 .status-bar-item:active {
 454     position: relative;
 455     z-index: 200;
 456 }
 457
 458 .glyph {
 459     position: absolute;
 460     top: -1px;
 461     bottom: 1px;
 462     left: 0;
 463     right: 0;
 464     background-color: rgba(0, 0, 0, 0.75);
 465     z-index: 1;
 466 }
 467
 468 .glyph.shadow {
 469     top: 0;
 470     bottom: 0;
 471     background-color: white;
 472     z-index: 0;
 473 }
 474
 475 .long-click-glyph {
 476     background-color: rgba(0, 0, 0, 0.75);
 477     -webkit-mask-image: url(Images/statusbarButtonGlyphs.png);
 478     -webkit-mask-position: -288px -48px;
 479     -webkit-mask-size: 320px 144px;
 480     z-index: 1;
 481 }
 482
 483 @media (-webkit-min-device-pixel-ratio: 1.5) {
 484 .long-click-glyph {
 485     -webkit-mask-image: url(Images/statusbarButtonGlyphs_2x.png);
 486 }
 487 } /* media */
 488
 489 .long-click-glyph.shadow {
 490     top: 1px;
 491     background-color: white !important;
 492     z-index: 0;
 493 }
 494
 495 button.status-bar-item {
 496     position: relative;
 497     width: 32px;
 498 }
 499
 500 .status-bar button.status-bar-item .glyph {
 501     margin: 0 -1px;
 502 }
 503
 504 button.status-bar-item .glyph.shadow {
 505     background-color: rgba(255, 255, 255, 0.33);
 506 }
 507
 508 button.status-bar-item.toggled-on .glyph:not(.shadow) {
 509     background-color: rgb(66, 129, 235) !important;
 510 }
 511
 512 button.status-bar-item:hover .glyph {
 513     opacity: 1;
 514 }
 515
 516 button.status-bar-item:active .glyph {
 517     opacity: 0.8;
 518 }
 519
 520 button.status-bar-item:disabled {
 521     background-position: 0 0 !important;
 522 }
 523
 524 button.status-bar-item:disabled .glyph {
 525     opacity: 0.5 !important;
 526 }
 527
 528 button.status-bar-item.extension {
 529     background-image: none;
 530 }
 531
 532 .status-bar-select-container {
 533     display: inline-flex;
 534     flex-shrink: 0;
 535     margin-right: 6px;
 536 }
 537
 538 .status-bar-select-arrow {
 539     background-image: url(Images/statusbarButtonGlyphs.png);
 540     background-size: 320px 144px;
 541     opacity: 0.7;
 542     width: 12px;
 543     height: 12px;
 544     background-position: -18px -96px;
 545     display: inline-block;
 546     pointer-events: none;
 547     margin: auto 0;
 548 }
 549
 550 @media (-webkit-min-device-pixel-ratio: 1.5) {
 551 .status-bar-select-arrow {
 552     background-image: url(Images/statusbarButtonGlyphs_2x.png);
 553 }
 554 } /* media */
 555
 556 input.status-bar-item {
 557     width: 200px;
 558     height: 20px;
 559     padding: 3px;
 560     margin: 1px 3px;
 561     background-color: white;
 562     border: solid 1px rgb(236, 236, 236);
 563 }
 564
 565 input.status-bar-item:focus,
 566 input.status-bar-item:hover {
 567     border: solid 1px rgb(202, 202, 202);
 568 }
 569
 570 select.status-bar-item {
 571     min-width: 48px;
 572     color: rgb(48, 48, 48);
 573     text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
 574     -webkit-appearance: none;
 575     border: 0;
 576     border-radius: 0;
 577     padding: 0 15px 0 5px;
 578     margin-right: -10px;
 579     position: relative;
 580     line-height: 22px;
 581 }
 582
 583 .status-bar-item.checkbox {
 584     margin: auto 6px auto 0;
 585     height: auto;
 586     display: flex;
 587 }
 588
 589 .status-bar-item > .glyph {
 590     -webkit-mask-image: url(Images/statusbarButtonGlyphs.png);
 591     -webkit-mask-size: 320px 144px;
 592     opacity: 0.8;
 593 }
 594
 595 @media (-webkit-min-device-pixel-ratio: 1.5) {
 596 .status-bar-item > .glyph {
 597     -webkit-mask-image: url(Images/statusbarButtonGlyphs_2x.png);
 598 }
 599 } /* media */
 600
 601 button.status-bar-item.dock-status-bar-item.toggled-undocked .glyph {
 602     -webkit-mask-position: 0 -48px;
 603 }
 604
 605 button.status-bar-item.dock-status-bar-item.toggled-bottom .glyph {
 606     -webkit-mask-position: -32px -24px;
 607 }
 608
 609 button.status-bar-item.dock-status-bar-item.toggled-right .glyph {
 610     -webkit-mask-position: -256px -48px;
 611 }
 612
 613 button.status-bar-item.dock-status-bar-item.toggled-left .glyph {
 614     -webkit-mask-position: -32px -120px;
 615 }
 616
 617 body.undocked .alternate-status-bar-buttons-bar {
 618     margin-left: 1px;
 619 }
 620
 621 .alternate-status-bar-buttons-bar {
 622     position: absolute;
 623     width: 31px;
 624     bottom: -3px;
 625     background: white;
 626 }
 627
 628 .alternate-status-bar-buttons-bar .status-bar-item {
 629     height: 24px;
 630     margin-top: -1px;
 631     border: 1px solid rgb(202, 202, 202);
 632 }
 633
 634 .alternate-status-bar-buttons-bar .status-bar-item.emulate-active {
 635     background-color: rgb(163,163,163);
 636     border: 1px solid rgb(120, 120, 120);
 637 }
 638
 639 button.status-bar-item.settings-status-bar-item,
 640 button.status-bar-item.settings-status-bar-item:active {
 641     border-right: 0 transparent none;
 642 }
 643
 644 div.resizer-widget {
 645     position: absolute;
 646     top: 0;
 647     right: 0;
 648     height: 24px;
 649     width: 16px;
 650     background-image: url(Images/statusbarResizerHorizontal.png);
 651     background-repeat: no-repeat;
 652     background-position: center;
 653     z-index: 13;
 654 }
 655
 656 .ns-resizer-widget {
 657     cursor: ns-resize;
 658 }
 659
 660 .ew-resizer-widget {
 661     cursor: ew-resize;
 662 }
 663
 664 .settings-status-bar-item .glyph {
 665     -webkit-mask-position: -160px -24px;
 666 }
 667
 668 .console-status-bar-item .glyph {
 669     -webkit-mask-position: -64px -24px;
 670 }
 671
 672 .screencast-status-bar-item.toggled-left .glyph {
 673     -webkit-mask-position: -256px -96px;
 674 }
 675
 676 .screencast-status-bar-item.toggled-top .glyph {
 677     -webkit-mask-position: -288px -96px;
 678 }
 679
 680 .screencast-status-bar-item.toggled-disabled .glyph {
 681     -webkit-mask-position: 0px -120px;
 682 }
 683
 684 .clear-status-bar-item .glyph {
 685     -webkit-mask-position: -64px 0;
 686 }
 687
 688 .error-icon-small,
 689 .warning-icon-small,
 690 .device-icon-small,
 691 .red-ball,
 692 .green-ball,
 693 .orange-ball {
 694     background-image: url(Images/statusbarButtonGlyphs.png);
 695     background-size: 320px 144px;
 696     width: 10px;
 697     height: 10px;
 698     display: inline-block;
 699 }
 700
 701 @media (-webkit-min-device-pixel-ratio: 1.5) {
 702 .error-icon-small,
 703 .warning-icon-small,
 704 .device-icon-small,
 705 .red-ball,
 706 .green-ball,
 707 .orange-ball {
 708     background-image: url(Images/statusbarButtonGlyphs_2x.png);
 709 }
 710 } /* media */
 711
 712 .error-icon-small {
 713     background-position: -213px -96px;
 714 }
 715
 716 .warning-icon-small {
 717     background-position: -202px -107px;
 718 }
 719
 720 .device-icon-small {
 721     background-position: -224px -107px;
 722 }
 723
 724 .red-ball {
 725     background-position: -224px -96px;
 726 }
 727
 728 .green-ball {
 729     background-position: -235px -96px;
 730 }
 731
 732 .orange-ball {
 733     background-position: -246px -96px;
 734 }
 735
 736 .status-bar-counter {
 737     display: inline-block;
 738     padding: 4px 6px 6px 0;
 739     font-size: 11px;
 740     height: 19px;
 741     cursor: pointer;
 742     line-height: 14px;
 743 }
 744
 745 .status-bar-counter:hover {
 746     border-bottom: 1px solid rgb(96, 96, 96);
 747 }
 748
 749 .status-bar-counter-item {
 750     margin-left: 6px;
 751 }
 752
 753 .status-bar-counter-item.status-bar-counter-item-first {
 754     margin-left: 0;
 755 }
 756
 757 .status-bar-counter-item > div {
 758     vertical-align: -1px;
 759     margin-right: 2px;
 760 }
 761
 762 #drawer-tabbed-pane > .tabbed-pane-header {
 763     background-color: rgb(236, 236, 236);
 764 }
 765
 766 #drawer-contents .tabbed-pane-header .tabbed-pane-header-tab {
 767     cursor: default;
 768 }
 769
 770 body.platform-mac .monospace,
 771 body.platform-mac .source-code {
 772     font-size: 11px !important;
 773     font-family: Menlo, monospace;
 774 }
 775
 776 body.platform-mac.platform-mac-tiger .monospace,
 777 body.platform-mac.platform-mac-tiger .source-code {
 778     font-size: 10px !important;
 779     font-family: Monaco, monospace;
 780 }
 781
 782 body.platform-windows .monospace,
 783 body.platform-windows .source-code {
 784     font-size: 12px !important;
 785     font-family: Consolas, Lucida Console, monospace;
 786 }
 787
 788 body.platform-linux .monospace,
 789 body.platform-linux .source-code {
 790     font-size: 11px !important;
 791     font-family: dejavu sans mono, monospace;
 792 }
 793
 794 .console-view {
 795     background-color: white;
 796     overflow: hidden;
 797 }
 798
 799 .console-view-wrapper {
 800     background-color: rgb(236, 236, 236);
 801 }
 802
 803 .console-status-bar,
 804 .console-filters-header {
 805     flex: 0 0 23px;
 806     overflow: hidden;
 807 }
 808
 809 .console-status-bar {
 810     display: flex;
 811 }
 812
 813 #console-messages {
 814     flex: 1 1;
 815     padding: 2px 0;
 816     overflow-y: auto;
 817     word-wrap: break-word;
 818     -webkit-user-select: text;
 819     border-top: 1px solid rgb(230, 230, 230);
 820     -webkit-transform: translateZ(0);
 821 }
 822
 823 .console-view-fix-select-all {
 824     height: 0px;
 825     overflow: hidden;
 826 }
 827
 828 #console-prompt {
 829     clear: right;
 830     position: relative;
 831     padding: 1px 22px 1px 0;
 832     margin-left: 24px;
 833     min-height: 16px;
 834     white-space: pre-wrap;
 835     -webkit-user-modify: read-write-plaintext-only;
 836 }
 837
 838 #console-prompt::before {
 839     background-position: -192px -96px;
 840 }
 841
 842 .console-user-command-result.console-log-level::before {
 843     background-position: -202px -96px;
 844 }
 845
 846 .console-message,
 847 .console-user-command {
 848     clear: right;
 849     position: relative;
 850     border-bottom: 1px solid rgb(240, 240, 240);
 851     padding: 1px 22px 1px 0;
 852     margin-left: 24px;
 853     min-height: 16px;
 854     flex: auto;
 855 }
 856
 857 .console-adjacent-user-command-result .console-user-command {
 858     border-bottom: none;
 859 }
 860
 861 .console-adjacent-user-command-result + .console-user-command-result.console-log-level::before {
 862     background-image: none;
 863 }
 864
 865 .console-timestamp {
 866     color: gray;
 867     margin-right: 10px;
 868     -webkit-user-select: none;
 869 }
 870
 871 .console-message::before,
 872 .console-user-command::before,
 873 #console-prompt::before,
 874 .console-group-title::before {
 875     position: absolute;
 876     display: block;
 877     content: "";
 878     left: -17px;
 879     top: 0.8em;
 880     width: 10px;
 881     height: 10px;
 882     margin-top: -6px;
 883     -webkit-user-select: none;
 884     background-image: url(Images/statusbarButtonGlyphs.png);
 885     background-size: 320px 144px;
 886 }
 887
 888 @media (-webkit-min-device-pixel-ratio: 1.5) {
 889 .console-message::before,
 890 .console-user-command::before,
 891 #console-prompt::before,
 892 .console-group-title::before {
 893     background-image: url(Images/statusbarButtonGlyphs_2x.png);
 894 }
 895 } /* media */
 896
 897 .console-message > .outline-disclosure li.parent::before {
 898     top: 0;
 899 }
 900
 901 .console-message .outline-disclosure .stacktrace-entry:hover {
 902     background-color: rgba(0, 0, 0, 0.05);
 903 }
 904
 905 .stacktrace-entry .webkit-html-blackbox-link {
 906     opacity: 0.6;
 907 }
 908
 909 .bubble-repeat-count {
 910     display: inline-block;
 911     height: 14px;
 912     background-color: rgb(128, 151, 189);
 913     vertical-align: middle;
 914     white-space: nowrap;
 915     padding: 1px 4px;
 916     text-align: left;
 917     font-size: 11px;
 918     line-height: normal;
 919     font-weight: bold;
 920     text-shadow: none;
 921     color: white;
 922     margin-top: -1px;
 923     border-radius: 7px;
 924 }
 925
 926 .console-message .bubble-repeat-count {
 927     margin-right: 4px;
 928     margin-left: -18px;
 929 }
 930
 931 .console-async-trace-text {
 932     margin-left: -10px;
 933     font-style: italic;
 934 }
 935
 936 .repeated-message.console-error-level::before,
 937 .repeated-message.console-warning-level:before,
 938 .repeated-message.console-debug-level:before,
 939 .repeated-message.console-info-level:before {
 940     visibility: hidden;
 941 }
 942
 943 .repeated-message .outline-disclosure,
 944 .repeated-message > .console-message-text {
 945     -webkit-flex: 1;
 946 }
 947
 948 .console-info {
 949     color: rgb(128, 128, 128);
 950     font-style: italic;
 951 }
 952
 953 .console-group .console-group > .console-group-messages {
 954     margin-left: 16px;
 955 }
 956
 957 .console-group-title {
 958     font-weight: bold;
 959 }
 960
 961 .console-group-title::before {
 962     -webkit-user-select: none;
 963     -webkit-mask-image: url(Images/statusbarButtonGlyphs.png);
 964     -webkit-mask-size: 320px 144px;
 965     float: left;
 966     width: 8px;
 967     content: "a";
 968     color: transparent;
 969     text-shadow: none;
 970     margin-left: 3px;
 971     margin-top: -7px;
 972 }
 973
 974 @media (-webkit-min-device-pixel-ratio: 1.5) {
 975 .console-group-title::before {
 976     -webkit-mask-image: url(Images/statusbarButtonGlyphs_2x.png);
 977 }
 978 } /* media */
 979
 980 .console-group .console-group-title::before {
 981     -webkit-mask-position: -20px -96px;
 982     background-color: rgb(110, 110, 110);
 983 }
 984
 985 .console-message-wrapper.collapsed .console-group-title::before {
 986     -webkit-mask-position: -4px -96px;
 987 }
 988
 989 .console-group {
 990     position: relative;
 991 }
 992
 993 .console-message-wrapper {
 994     display: flex;
 995 }
 996
 997 .console-message-wrapper .nesting-level-marker {
 998     width: 14px;
 999     flex: 0 0 auto;
1000     border-right: 1px solid #A3A3A3;
1001     position: relative;
1002 }
1003
1004 .console-message-wrapper:last-child .nesting-level-marker,
1005 .console-message-wrapper .nesting-level-marker.group-closed {
1006     margin-bottom: 4px;
1007 }
1008
1009 .console-message-wrapper:last-child .nesting-level-marker::before,
1010 .console-message-wrapper .nesting-level-marker.group-closed::before
1011 {
1012     content: "";
1013 }
1014
1015 .console-message-wrapper .nesting-level-marker::before {
1016     border-bottom: 1px solid #A3A3A3;
1017     position: absolute;
1018     top: 0;
1019     left: 0;
1020     margin-left: 100%;
1021     width: 3px;
1022     height: 100%;
1023     box-sizing: border-box;
1024 }
1025
1026 .console-error-level .console-message-text,
1027 .console-error-level .section > .header .title {
1028     color: red !important;
1029 }
1030
1031 .console-debug-level .console-message-text {
1032     color: blue;
1033 }
1034
1035 .console-error-level::before,
1036 .console-warning-level::before,
1037 .console-debug-level::before,
1038 .console-info-level::before {
1039     background-image: url(Images/statusbarButtonGlyphs.png);
1040     background-size: 320px 144px;
1041     width: 10px;
1042     height: 10px;
1043 }
1044
1045 @media (-webkit-min-device-pixel-ratio: 1.5) {
1046 .console-error-level::before,
1047 .console-warning-level::before,
1048 .console-debug-level::before,
1049 .console-info-level::before {
1050     background-image: url(Images/statusbarButtonGlyphs_2x.png);
1051 }
1052 } /* media */
1053
1054 .console-warning-level::before {
1055     background-position: -202px -107px;
1056 }
1057
1058 .console-error-level::before {
1059     background-position: -213px -96px;
1060 }
1061
1062 .console-info-level::before {
1063     background-position: -213px -107px;
1064 }
1065
1066 .console-user-command .console-message {
1067     margin-left: -24px;
1068     padding-right: 0;
1069     border-bottom: none;
1070 }
1071
1072 .console-user-command::before {
1073     background-position: -192px -107px;
1074 }
1075
1076 .console-user-command > .console-message-text {
1077     color: rgb(0, 128, 255);
1078 }
1079
1080 #console-messages .link {
1081     text-decoration: underline;
1082 }
1083
1084 #console-messages .link,
1085 #console-messages a {
1086     color: rgb(33%, 33%, 33%);
1087     cursor: pointer;
1088 }
1089
1090 #console-messages .link:hover,
1091 #console-messages a:hover {
1092     color: rgb(15%, 15%, 15%);
1093 }
1094
1095 ol.watch-expressions > li.hovered {
1096     background-color: #F0F0F0;
1097 }
1098
1099 .console-message-url {
1100     float: right;
1101     text-align: right;
1102     max-width: 100%;
1103     margin-left: 4px;
1104 }
1105
1106 .console-group-messages .section {
1107     margin: 0 0 0 12px !important;
1108 }
1109
1110 .console-group-messages .section > .header {
1111     padding: 0 8px 0 0;
1112     background-image: none;
1113     border: none;
1114     min-height: 0;
1115 }
1116
1117 .console-group-messages .section > .header::before {
1118     margin-left: -12px;
1119 }
1120
1121 .console-group-messages .section > .header .title {
1122     color: #222;
1123     font-weight: normal;
1124     line-height: 13px;
1125 }
1126
1127 .console-group-messages .section .properties li .info {
1128     padding-top: 0;
1129     padding-bottom: 0;
1130     color: rgb(60%, 60%, 60%);
1131 }
1132
1133 .console-group-messages .outline-disclosure {
1134     padding-left: 0;
1135 }
1136
1137 .console-group-messages .outline-disclosure > ol {
1138     padding: 0 0 0 12px !important;
1139 }
1140
1141 .console-group-messages .outline-disclosure,
1142 .console-group-messages .outline-disclosure ol {
1143     font-size: inherit;
1144     line-height: 12px;
1145 }
1146
1147 .console-group-messages .outline-disclosure.single-node li {
1148     padding-left: 2px;
1149 }
1150
1151 .console-group-messages .outline-disclosure li .selection {
1152     margin-left: -6px;
1153     margin-right: -6px;
1154 }
1155
1156 .console-group-messages .add-attribute {
1157     display: none;
1158 }
1159
1160 .console-formatted-object,
1161 .console-formatted-map,
1162 .console-formatted-set,
1163 .console-formatted-node,
1164 .console-formatted-array {
1165     position: relative;
1166     display: inline-block;
1167     vertical-align: top;
1168     color: inherit;
1169 }
1170
1171 .console-formatted-node:hover {
1172     background-color: rgba(56, 121, 217, 0.1);
1173 }
1174
1175 .console-formatted-object .section,
1176 .console-formatted-map .section,
1177 .console-formatted-set .section,
1178 .console-formatted-node .section,
1179 .console-formatted-array .section {
1180     position: static;
1181 }
1182
1183 .console-formatted-object .section > .header::before {
1184     margin-top: 0;
1185 }
1186
1187 .console-formatted-object .properties,
1188 .console-formatted-map .properties,
1189 .console-formatted-set .properties,
1190 .console-formatted-node .properties {
1191     padding-left: 0 !important;
1192 }
1193
1194 .console-formatted-number,
1195 .console-formatted-boolean {
1196     color: rgb(28, 0, 207);
1197 }
1198
1199 .console-formatted-string,
1200 .console-formatted-regexp,
1201 .console-formatted-symbol {
1202     color: rgb(196, 26, 22);
1203     white-space: pre;
1204     unicode-bidi: -webkit-isolate;
1205 }
1206
1207 .console-formatted-null,
1208 .console-formatted-undefined {
1209     color: rgb(128, 128, 128);
1210 }
1211
1212 .console-formatted-preview-node,
1213 .section .console-formatted-node {
1214     color: rgb(136, 18, 128);
1215 }
1216
1217 .console-object-preview {
1218     font-style: italic;
1219 }
1220
1221 .object-info-state-note {
1222     display: inline-block;
1223     width: 11px;
1224     height: 11px;
1225     background-color: rgb(179, 203, 247);
1226     color: white;
1227     text-align: center;
1228     border-radius: 3px;
1229     line-height: 13px;
1230     margin: 0 6px;
1231     font-size: 9px;
1232 }
1233
1234 .object-info-state-note::before {
1235     content: "i";
1236 }
1237
1238 .section:not(.expanded) .object-info-state-note {
1239     display: none;
1240 }
1241
1242 .error-message {
1243     color: red;
1244 }
1245
1246 .error-input {
1247     background-color: rgb(220, 130, 130);
1248 }
1249
1250 .auto-complete-text,
1251 .editing .auto-complete-text {
1252     color: rgb(128, 128, 128) !important;
1253     -webkit-user-select: none;
1254     -webkit-user-modify: read-only;
1255 }
1256
1257 .panel {
1258     display: none;
1259     overflow: hidden;
1260     position: absolute;
1261     top: 0;
1262     left: 0;
1263     right: 0;
1264     bottom: 0;
1265     z-index: 0;
1266 }
1267
1268 .panel.visible {
1269     display: flex;
1270 }
1271
1272 .panel.extension-panel.visible {
1273     display: flex !important;
1274     flex-direction: column;
1275 }
1276
1277 .extension-view {
1278     flex: auto;
1279 }
1280
1281 iframe.extension {
1282     width: 100%;
1283     height: 100%;
1284 }
1285
1286 iframe.panel.extension {
1287     display: block;
1288     height: 100%;
1289 }
1290
1291 .outline-disclosure li.hovered:not(.selected) .selection {
1292     display: block;
1293     left: 3px;
1294     right: 3px;
1295     background-color: rgba(56, 121, 217, 0.1);
1296     border-radius: 5px;
1297 }
1298
1299 .outline-disclosure li .selection {
1300     display: none;
1301     position: absolute;
1302     left: 0;
1303     right: 0;
1304     height: 15px;
1305     z-index: -1;
1306 }
1307
1308 .outline-disclosure li.selected .selection {
1309     display: block;
1310     background-color: rgb(212, 212, 212);
1311 }
1312
1313 .outline-disclosure li.in-clipboard .highlight {
1314     outline: 1px dotted darkgrey;
1315 }
1316
1317 .outline-disclosure li.elements-drag-over .selection {
1318     display: block;
1319     margin-top: -2px;
1320     border-top: 2px solid rgb(56, 121, 217);
1321 }
1322
1323 .outline-disclosure ol:focus li.selected .selection {
1324     background-color: rgb(56, 121, 217);
1325 }
1326
1327 .outline-disclosure ol:focus li.parent.selected::before {
1328     background-color: white;
1329 }
1330
1331 .outline-disclosure > ol {
1332     position: relative;
1333     padding: 2px 6px !important;
1334     margin: 0;
1335     cursor: default;
1336     min-width: 100%;
1337 }
1338
1339 .outline-disclosure,
1340 .outline-disclosure ol {
1341     list-style-type: none;
1342     -webkit-padding-start: 12px;
1343     margin: 0;
1344 }
1345
1346 .source-code {
1347     font-family: monospace;
1348     font-size: 11px !important;
1349     white-space: pre-wrap;
1350 }
1351
1352 .console-message-text {
1353     white-space: pre-wrap;
1354 }
1355
1356 .outline-disclosure li {
1357     padding: 0 0 0 14px;
1358     margin-top: 1px;
1359     margin-left: -2px;
1360     word-wrap: break-word;
1361 }
1362
1363 .outline-disclosure ol:focus li.selected {
1364     color: white;
1365 }
1366
1367 .outline-disclosure ol:focus li.selected * {
1368     color: inherit;
1369 }
1370
1371 .outline-disclosure li.parent {
1372     margin-left: -12px
1373 }
1374
1375 .outline-disclosure li .webkit-html-tag.close {
1376     margin-left: -12px;
1377 }
1378
1379 .outline-disclosure li.parent::before {
1380     float: left;
1381     width: 10px;
1382     padding-right: 2px;
1383     box-sizing: border-box;
1384 }
1385
1386 .outline-disclosure li.parent::before {
1387     -webkit-user-select: none;
1388     -webkit-mask-image: url(Images/statusbarButtonGlyphs.png);
1389     -webkit-mask-size: 320px 144px;
1390     content: "a";
1391     color: transparent;
1392     text-shadow: none;
1393     position: relative;
1394     top: 2px;
1395     margin-right: 1px;
1396     height: 12px;
1397 }
1398
1399 @media (-webkit-min-device-pixel-ratio: 1.5) {
1400 .outline-disclosure li.parent::before {
1401     -webkit-mask-image: url(Images/statusbarButtonGlyphs_2x.png);
1402 }
1403 } /* media */
1404
1405 .outline-disclosure li.parent::before {
1406     -webkit-mask-position: -4px -96px;
1407     background-color: rgb(110, 110, 110);
1408 }
1409
1410 .outline-disclosure li.parent.expanded::before {
1411     -webkit-mask-position: -20px -96px;
1412 }
1413
1414 .outline-disclosure ol.children {
1415     display: none;
1416 }
1417
1418 .outline-disclosure ol.children.expanded {
1419     display: block;
1420 }
1421
1422 .placard {
1423     position: relative;
1424     padding: 3px 8px 4px 18px;
1425     min-height: 18px;
1426     white-space: nowrap;
1427 }
1428
1429 .placard:nth-of-type(2n) {
1430     background-color: rgb(234, 243, 255);
1431 }
1432
1433 .placard.selected {
1434     background-color: rgb(212, 212, 212);
1435     background-clip: padding-box;
1436 }
1437
1438 .placard .title {
1439     font-weight: normal;
1440     word-wrap: break-word;
1441     white-space: normal;
1442 }
1443
1444 .placard .subtitle {
1445     float: right;
1446     margin-left: 5px;
1447     color: rgba(0, 0, 0, 0.7);
1448     text-overflow: ellipsis;
1449     overflow: hidden;
1450 }
1451
1452 .placard .subtitle a {
1453     color: inherit;
1454 }
1455
1456 .placard-label {
1457     text-align: center;
1458 }
1459
1460 .placard-label .title,
1461 .placard-label .subtitle {
1462     font-style: italic;
1463     font-weight: bold;
1464     color: #999;
1465 }
1466
1467 .section {
1468     position: relative;
1469     margin-top: 1px;
1470 }
1471
1472 .events-pane .section {
1473     margin: 0;
1474 }
1475 .events-pane .section:not(:nth-of-type(1)) {
1476     border-top: 1px solid rgb(231, 231, 231);
1477 }
1478
1479 .section > .header {
1480     padding: 0px 8px 0 5px;
1481     min-height: 18px;
1482     white-space: nowrap;
1483     background-origin: padding-box;
1484     background-clip: padding-box;
1485 }
1486
1487 .section > .header::before {
1488     -webkit-user-select: none;
1489     background-image: url(Images/statusbarButtonGlyphs.png);
1490     background-size: 320px 144px;
1491     opacity: 0.5;
1492     content: "a";
1493     color: transparent;
1494     text-shadow: none;
1495     float: left;
1496     width: 8px;
1497     margin-right: 4px;
1498     margin-top: 2px;
1499 }
1500
1501 @media (-webkit-min-device-pixel-ratio: 1.5) {
1502 .section > .header::before {
1503     background-image: url(Images/statusbarButtonGlyphs_2x.png);
1504 }
1505 } /* media */
1506
1507 .section > .header::before {
1508     background-position: -4px -96px;
1509 }
1510
1511 .section.expanded > .header::before {
1512     background-position: -20px -96px;
1513 }
1514
1515 .section > .header .title,
1516 .event-bar .header .title {
1517     font-weight: normal;
1518     word-wrap: break-word;
1519     white-space: normal;
1520     line-height: 18px;
1521 }
1522
1523 .section > .header label,
1524 .event-bar .header label {
1525     display: none;
1526 }
1527
1528 .section.expanded .header label,
1529 .event-bar.expanded .header label {
1530     display: inline;
1531 }
1532
1533 .section > .header .subtitle,
1534 .event-bar .header .subtitle {
1535     float: right;
1536     margin-left: 5px;
1537     max-width: 55%;
1538     text-overflow: ellipsis;
1539     overflow: hidden;
1540 }
1541
1542 .section > .header .subtitle a {
1543     color: inherit;
1544 }
1545
1546 .section .properties,
1547 .event-bar .event-properties {
1548     display: none;
1549 }
1550
1551 .section.expanded .properties,
1552 .event-bar.expanded .event-properties {
1553     display: block;
1554 }
1555
1556 .event-bar .event-properties {
1557     padding-left: 16px;
1558 }
1559
1560 .section.no-affect .properties li {
1561     opacity: 0.5;
1562 }
1563
1564 .section.no-affect .properties li.editing {
1565     opacity: 1.0;
1566 }
1567
1568 .properties-tree {
1569     margin: 0;
1570     padding: 0 6px 2px;
1571     list-style: none;
1572     min-height: 18px;
1573 }
1574
1575 .properties-tree li {
1576     margin-left: 12px;
1577     white-space: nowrap;
1578     text-overflow: ellipsis;
1579     overflow: hidden;
1580     -webkit-user-select: text;
1581     cursor: default;
1582     padding-top: 2px;
1583     line-height: 12px;
1584 }
1585
1586 .properties-tree li.parent {
1587     margin-left: 1px;
1588 }
1589
1590
1591 .properties-tree li.parent::before {
1592     -webkit-user-select: none;
1593     background-image: url(Images/statusbarButtonGlyphs.png);
1594     background-size: 320px 144px;
1595     opacity: 0.5;
1596     content: "a";
1597     width: 8px;
1598     float: left;
1599     margin-right: 4px;
1600     color: transparent;
1601     text-shadow: none;
1602 }
1603
1604 .properties-calculate-value-button:hover {
1605     text-decoration: underline;
1606 }
1607
1608 .properties-accessor-property-name {
1609     font-style: italic;
1610 }
1611
1612 @media (-webkit-min-device-pixel-ratio: 1.5) {
1613 .properties-tree li.parent::before {
1614     background-image: url(Images/statusbarButtonGlyphs_2x.png);
1615 }
1616 } /* media */
1617
1618 .properties-tree li.parent::before {
1619     background-position: -4px -96px;
1620 }
1621
1622 .properties-tree li.parent.expanded::before {
1623     background-position: -20px -96px;
1624 }
1625
1626 .properties-tree li .info {
1627     padding-top: 4px;
1628     padding-bottom: 3px;
1629 }
1630
1631 .properties-tree ol {
1632     display: none;
1633     margin: 0;
1634     -webkit-padding-start: 12px;
1635     list-style: none;
1636 }
1637
1638 .properties-tree ol.expanded {
1639     display: block;
1640 }
1641
1642 .editing {
1643     -webkit-user-select: text;
1644     box-shadow: rgba(0, 0, 0, .5) 3px 3px 4px;
1645     outline: 1px solid rgb(66%, 66%, 66%) !important;
1646     background-color: white;
1647     -webkit-user-modify: read-write-plaintext-only;
1648     text-overflow: clip !important;
1649     padding-left: 2px;
1650     margin-left: -2px;
1651     padding-right: 2px;
1652     margin-right: -2px;
1653     margin-bottom: -1px;
1654     padding-bottom: 1px;
1655     opacity: 1.0 !important;
1656 }
1657
1658 .editing,
1659 .editing * {
1660     color: #222 !important;
1661     text-decoration: none !important;
1662 }
1663
1664 .child-editing {
1665     color: #222 !important;
1666     text-decoration: none !important;
1667     overflow: visible !important;
1668 }
1669
1670 .editing br {
1671     display: none;
1672 }
1673
1674 .section .properties li.editing {
1675     margin-left: 10px;
1676     text-overflow: clip;
1677 }
1678
1679 li.editing .swatch, li.editing .enabled-button,
1680 li.editing-sub-part .delete-button {
1681     display: none !important;
1682 }
1683
1684 .sidebar-tabbed-pane .watch-expressions {
1685     margin-top: 17px;
1686 }
1687
1688 .properties-tree.watch-expressions {
1689     padding-left: 0 !important;
1690 }
1691
1692 .properties-tree.watch-expressions > li {
1693     padding-left: 4px;
1694 }
1695
1696 .properties-tree.watch-expressions > li > .value {
1697     display: inline;
1698     position: static;
1699 }
1700
1701 .properties-tree.watch-expressions > li:not(.parent) {
1702     margin-left: 1px;
1703     padding-left: 15px;
1704 }
1705
1706 .properties-tree.watch-expressions > li.hovered {
1707     padding-right: 14px;
1708 }
1709
1710 .watch-expressions > li.editing-sub-part .text-prompt {
1711     display: block;
1712     width: 100%;
1713     overflow: hidden;
1714 }
1715
1716 .watch-expressions > li.editing-sub-part .value,
1717 .watch-expressions > li.editing-sub-part .separator  {
1718     display: none;
1719 }
1720
1721 .section .properties li.editing-sub-part {
1722     padding: 3px 6px 8px 18px;
1723     margin: -1px -6px -8px -6px;
1724     text-overflow: clip;
1725 }
1726
1727 .section .properties .delete-button {
1728     width: 10px;
1729     height: 10px;
1730     background-image: url(Images/deleteIcon.png);
1731     background-position: 0 0;
1732     background-color: transparent;
1733     background-repeat: no-repeat;
1734     border: 0 none transparent;
1735     position: absolute;
1736     right: 8px;
1737     display: none;
1738 }
1739
1740 .section .properties li.hovered .delete-button {
1741     display: inline;
1742 }
1743
1744 .section .properties .name,
1745 .event-properties .name,
1746 .console-object-preview .name {
1747     color: rgb(136, 19, 145);
1748 }
1749
1750 .section .properties .dimmed {
1751     opacity: 0.6;
1752 }
1753
1754 .section .properties .value.error {
1755     color: red;
1756 }
1757
1758 .section .properties .number,
1759 .event-properties .number {
1760     color: blue;
1761 }
1762
1763 .section .properties .keyword,
1764 .event-properties .keyword {
1765     color: rgb(136, 19, 79);
1766 }
1767
1768 .section .properties .color,
1769 .event-properties .color {
1770     color: rgb(118, 15, 21);
1771 }
1772
1773 .swatch {
1774     margin-left: 1px;
1775     margin-right: 2px;
1776     width: 10px;
1777     height: 10px;
1778     position: relative;
1779     top: 1px;
1780     display: inline-block;
1781     background-image: url(Images/checker.png);
1782     -webkit-user-select: none;
1783 }
1784
1785 .swatch-inner {
1786     width: 100%;
1787     height: 100%;
1788     display: inline-block;
1789     border: 1px solid rgba(128, 128, 128, 0.6);
1790 }
1791
1792 .swatch-inner:hover {
1793     border: 1px solid rgba(64, 64, 64, 0.8);
1794 }
1795
1796 .sidebar {
1797     overflow-x: hidden;
1798     background-color: rgb(232, 232, 232);
1799 }
1800
1801 .pane-title-button {
1802     color: rgb(6, 6, 6);
1803     background-color: transparent;
1804     border: 1px solid rgb(165, 165, 165);
1805     background-color: rgb(237, 237, 237);
1806     background-image: linear-gradient(to bottom, rgb(252, 252, 252), rgb(223, 223, 223));
1807     border-radius: 12px;
1808     -webkit-appearance: none;
1809 }
1810
1811 .pane-title-button:active {
1812     background-color: rgb(215, 215, 215);
1813     background-image: linear-gradient(to bottom, rgb(194, 194, 194), rgb(239, 239, 239));
1814 }
1815
1816 .console-warning-level.repeated-message,
1817 .console-error-level.repeated-message,
1818 .console-log-level.repeated-message,
1819 .console-debug-level.repeated-message,
1820 .console-info-level.repeated-message {
1821     display: -webkit-flex;
1822 }
1823
1824 .console-user-command-result {
1825     display: block;
1826 }
1827
1828 .sidebar-tree,
1829 .sidebar-tree .children {
1830     position: relative;
1831     padding: 0;
1832     margin: 0;
1833     list-style: none;
1834 }
1835
1836 .sidebar-tree-section {
1837     position: relative;
1838     height: 18px;
1839     padding: 1px 10px 6px 10px;
1840     white-space: nowrap;
1841     margin-top: 1px;
1842     color: rgb(92, 110, 129);
1843     text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
1844 }
1845
1846 .sidebar-tree-item {
1847     position: relative;
1848     height: 36px;
1849     padding: 0 5px 0 5px;
1850     white-space: nowrap;
1851     overflow-x: hidden;
1852     overflow-y: hidden;
1853     margin-top: 1px;
1854     line-height: 34px;
1855     border-top: 1px solid transparent;
1856 }
1857
1858 .sidebar-tree .children {
1859     display: none;
1860 }
1861
1862 .sidebar-tree .children.expanded {
1863     display: block;
1864 }
1865
1866 .sidebar-tree-section + .children > .sidebar-tree-item {
1867     padding-left: 10px !important;
1868 }
1869
1870 .sidebar-tree-section + .children.small > .sidebar-tree-item {
1871     padding-left: 17px !important;
1872 }
1873
1874 .sidebar-tree > .children > .sidebar-tree-item {
1875     padding-left: 37px;
1876 }
1877
1878 .sidebar-tree > .children > .children > .sidebar-tree-item {
1879     padding-left: 37px;
1880 }
1881
1882 .sidebar-tree.some-expandable > .sidebar-tree-item:not(.parent) .icon {
1883     margin-left: 16px;
1884 }
1885
1886 .sidebar-tree-item .disclosure-button {
1887     float: left;
1888     width: 10px;
1889     height: 10px;
1890     border: 0;
1891     -webkit-mask-image: url(Images/statusbarButtonGlyphs.png);
1892     -webkit-mask-size: 320px 144px;
1893     -webkit-appearance: none;
1894     background-color: rgba(0, 0, 0, 0.75);
1895     position: relative;
1896     top: 10px;
1897 }
1898
1899 @media (-webkit-min-device-pixel-ratio: 1.5) {
1900 .sidebar-tree-item .disclosure-button {
1901     -webkit-mask-image: url(Images/statusbarButtonGlyphs_2x.png);
1902 }
1903 } /* media */
1904
1905 .sidebar-tree-item .disclosure-button {
1906     -webkit-mask-position: -4px -96px;
1907 }
1908
1909 .sidebar-tree-item.selected .disclosure-button {
1910     background-color: white;
1911     -webkit-mask-position: -4px -96px;
1912 }
1913
1914 .sidebar-tree-item.expanded .disclosure-button {
1915     -webkit-mask-position: -20px -96px;
1916 }
1917
1918 .sidebar-tree-item.selected.expanded .disclosure-button {
1919     background-color: white;
1920     -webkit-mask-position: -20px -96px;
1921 }
1922
1923 .sidebar-tree-item .icon {
1924     float: left;
1925     width: 32px;
1926     height: 32px;
1927     margin-top: 1px;
1928     margin-right: 3px;
1929 }
1930
1931 .sidebar-tree-item.wait .icon {
1932     content: none;
1933 }
1934
1935 .spinner-icon::before,
1936 .sidebar-tree-item.wait .icon::before {
1937     display: block;
1938     width: 24px;
1939     height: 24px;
1940     margin: 4px;
1941     border: 3px solid grey;
1942     border-radius: 12px;
1943     clip: rect(0px, 15px, 15px, 0px);
1944     content: "";
1945     position: absolute;
1946     -webkit-animation: spinner-animation 1s linear infinite;
1947     box-sizing: border-box;
1948 }
1949
1950 .spinner-icon.small::before,
1951 .sidebar-tree-item.wait.small .icon::before {
1952     width: 14px;
1953     height: 14px;
1954     margin: 1px;
1955     clip: rect(0px, 9px, 9px, 0px);
1956     border-width: 2px;
1957 }
1958
1959 .sidebar-tree-item.wait.selected .icon::before {
1960     border-color: white;
1961 }
1962
1963 @-webkit-keyframes spinner-animation {
1964     from { -webkit-transform: rotate(0); }
1965     to { -webkit-transform: rotate(360deg); }
1966 }
1967
1968 li .status {
1969     float: right;
1970     height: 16px;
1971     margin-top: 9px;
1972     margin-left: 4px;
1973     line-height: 1em;
1974 }
1975
1976 li .status:empty {
1977     display: none;
1978 }
1979
1980 li .status .bubble-repeat-count:empty {
1981     display: none;
1982 }
1983
1984 li.selected .status .bubble-repeat-count {
1985     background-color: white !important;
1986     color: rgb(132, 154, 190) !important;
1987 }
1988
1989 :focus li.selected .status .bubble-repeat-count {
1990     color: rgb(36, 98, 172) !important;
1991 }
1992
1993 body.inactive li.selected .status .bubble-repeat-count {
1994     color: rgb(159, 159, 159) !important;
1995 }
1996
1997 .sidebar-tree.small .sidebar-tree-item,
1998 .sidebar-tree .children.small .sidebar-tree-item,
1999 .sidebar-tree-item.small {
2000     height: 20px;
2001 }
2002
2003 .sidebar-tree.small .sidebar-tree-item .icon,
2004 .sidebar-tree .children.small .sidebar-tree-item .icon,
2005 .sidebar-tree-item.small .icon {
2006     width: 16px;
2007     height: 16px;
2008 }
2009
2010 .sidebar-tree.small .sidebar-tree-item .status,
2011 .sidebar-tree .children.small .sidebar-tree-item .status,
2012 .sidebar-tree-item.small .status {
2013     margin-top: 1px;
2014 }
2015
2016 .sidebar-tree-item.selected {
2017     color: white;
2018     text-shadow: rgba(0, 0, 0, 0.33) 1px 1px 0;
2019     background-origin: padding-box;
2020     background-clip: padding-box;
2021     background-color: rgb(56, 121, 217);
2022 }
2023
2024 :focus .sidebar-tree-item.selected {
2025     background-color: rgb(56, 121, 217);
2026 }
2027
2028 body.inactive .sidebar-tree-item.selected {
2029     background-color: rgb(180,180,180);
2030 }
2031
2032 .sidebar-tree-item .titles {
2033     display: flex;
2034     flex-direction: column;
2035     position: relative;
2036     top: 5px;
2037     line-height: 12px;
2038     padding-bottom: 1px;
2039     text-overflow: ellipsis;
2040     overflow: hidden;
2041     white-space: nowrap;
2042 }
2043
2044 .titles > .title-container {
2045     display: flex;
2046 }
2047
2048 .sidebar-tree-item .titles.no-subtitle {
2049     top: 10px;
2050 }
2051
2052 .sidebar-tree.small .sidebar-tree-item .titles,
2053 .sidebar-tree .children.small .sidebar-tree-item .titles,
2054 .sidebar-tree-item.small .titles {
2055     top: 2px;
2056     line-height: normal;
2057 }
2058
2059 .sidebar-tree:not(.small) .sidebar-tree-item:not(.small) .title::after,
2060 .sidebar-tree .children:not(.small) .sidebar-tree-item .title::after {
2061     content: "\A";
2062     white-space: pre;
2063 }
2064
2065 .sidebar-tree-item .subtitle {
2066     font-size: 80%;
2067 }
2068
2069 .sidebar-tree.small .sidebar-tree-item .subtitle,
2070 .sidebar-tree .children.small .sidebar-tree-item .subtitle,
2071 .sidebar-tree-item.small .subtitle {
2072     display: none;
2073 }
2074
2075 .sidebar-tree-item.selected .subtitle {
2076     color: white;
2077 }
2078
2079 .bubble-repeat-count.debug,
2080 .console-debug-level .bubble-repeat-count {
2081     background-color: rgb(0, 0, 255) !important;
2082 }
2083
2084 .bubble-repeat-count.warning,
2085 .console-warning-level .bubble-repeat-count {
2086     background-color: rgb(232, 164, 0) !important;
2087 }
2088
2089 .bubble-repeat-count.error,
2090 .console-error-level .bubble-repeat-count {
2091     background-color: rgb(216, 35, 35) !important;
2092 }
2093
2094 .storage-application-cache-status-icon,
2095 .storage-application-cache-connectivity-icon {
2096     margin: 5px 5px 0;
2097     vertical-align: middle;
2098 }
2099
2100 .status-bar-divider {
2101     margin-left: 7px;
2102     border-right: 1px solid #CCC;
2103 }
2104
2105 .storage-application-cache-status,
2106 .storage-application-cache-connectivity {
2107     position: relative;
2108     top: 4px;
2109 }
2110
2111 .node-search-status-bar-item .glyph {
2112     -webkit-mask-position: -224px -24px;
2113 }
2114
2115 .emulation-status-bar-item .glyph {
2116     -webkit-mask-position: -164px 0px;
2117 }
2118
2119 .emulation-status-bar-item.warning::before {
2120     background-image: url(Images/statusbarButtonGlyphs.png);
2121     background-size: 320px 144px;
2122     width: 10px;
2123     height: 10px;
2124     content: "";
2125     position: relative;
2126     top: 4px;
2127     left: -7px;
2128     background-position: -202px -107px;
2129     float: right;
2130 }
2131
2132 @media (-webkit-min-device-pixel-ratio: 1.5) {
2133     .emulation-status-bar-item.warning::before {
2134         background-image: url(Images/statusbarButtonGlyphs_2x.png);
2135     }
2136 } /* media */
2137
2138 .delete-storage-status-bar-item .glyph {
2139     -webkit-mask-position: -128px 0;
2140 }
2141
2142 .clear-storage-status-bar-item .glyph {
2143     -webkit-mask-position: -64px 0;
2144 }
2145
2146 .refresh-storage-status-bar-item .glyph {
2147     -webkit-mask-position: 0 0;
2148 }
2149
2150 .webkit-html-js-node,
2151 .webkit-html-css-node {
2152     white-space: pre;
2153 }
2154
2155 .source-frame-breakpoint-condition {
2156     z-index: 30;
2157     padding: 4px;
2158     background-color: rgb(203, 226, 255);
2159     border-radius: 7px;
2160     border: 2px solid rgb(169, 172, 203);
2161     width: 90%;
2162     pointer-events: auto;
2163 }
2164
2165 .source-frame-breakpoint-message {
2166     background-color: transparent;
2167     font-weight: normal;
2168     font-size: 11px;
2169     text-align: left;
2170     text-shadow: none;
2171     color: rgb(85, 85, 85);
2172     cursor: default;
2173     margin: 0 0 2px 0;
2174 }
2175
2176 #source-frame-breakpoint-condition {
2177     margin: 0;
2178     border: 1px inset rgb(190, 190, 190) !important;
2179     width: 100%;
2180     box-shadow: none !important;
2181     outline: none !important;
2182     -webkit-user-modify: read-write;
2183 }
2184
2185 .source-frame-popover-title {
2186     text-overflow: ellipsis;
2187     overflow: hidden;
2188     white-space: nowrap;
2189     font-weight: bold;
2190     padding-left: 18px;
2191 }
2192
2193 .source-frame-popover-tree {
2194     border-top: 1px solid rgb(184, 184, 184);
2195     overflow: auto;
2196     position: absolute;
2197     top: 15px;
2198     bottom: 0;
2199     left: 0;
2200     right: 0;
2201 }
2202
2203 .source-frame-eval-expression {
2204     outline: 1px solid rgb(163, 41, 34);
2205     background-color: rgb(255, 255, 194);
2206 }
2207
2208 .node-link {
2209     text-decoration: underline;
2210     cursor: pointer;
2211 }
2212
2213 .cursor-pointer {
2214     cursor: pointer;
2215 }
2216
2217 .cursor-auto {
2218     cursor: auto;
2219 }
2220
2221 .resource-view.json {
2222     padding: 5px;
2223 }
2224
2225 .resource-view.html iframe {
2226     width: 100%;
2227     height: 100%;
2228     position: absolute;
2229 }
2230
2231 .soft-context-menu-glass-pane {
2232     position: absolute;
2233     top: 0;
2234     bottom: 0;
2235     left: 0;
2236     right: 0;
2237     z-index: 20000;
2238 }
2239
2240 .soft-context-menu {
2241     position: absolute;
2242     border: 1px solid rgba(196, 196, 196, 0.9);
2243     border-top: 1px solid rgba(196, 196, 196, 0.5);
2244     border-bottom: 1px solid rgba(150, 150, 150, 0.9);
2245     padding: 4px 0 4px 0;
2246     border-radius: 4px;
2247     background-color: white;
2248     box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
2249 }
2250
2251 .soft-context-menu-item {
2252     width: 100%;
2253     line-height: 13px;
2254     font-size: 14px;
2255     border-top: 1px solid transparent;
2256     border-bottom: 1px solid transparent;
2257     padding: 2px 7px 2px 6px;
2258     margin: 0 13px 0 0;
2259     white-space: nowrap;
2260 }
2261
2262 .soft-context-menu-separator {
2263     height: 10px;
2264     margin: 0 1px;
2265 }
2266
2267 .soft-context-menu-separator > .separator-line {
2268     margin: 0;
2269     height: 5px;
2270     border-bottom: 1px solid rgb(227, 227, 227);
2271     pointer-events: none;
2272 }
2273
2274 .soft-context-menu-item-mouse-over {
2275     border-top: 1px solid rgb(56, 121, 217);
2276     border-bottom: 1px solid rgb(56, 121, 217);
2277     background-color: rgb(56, 121, 217);
2278     color: white;
2279 }
2280
2281 body.platform-mac .soft-context-menu-item-mouse-over {
2282     border-top: 1px solid rgb(90, 131, 236);
2283     border-bottom: 1px solid rgb(18, 88, 233);
2284     background-image: linear-gradient(to bottom, rgb(100, 140, 243), rgb(36, 101, 243));
2285 }
2286
2287 .soft-context-menu-item-checkmark {
2288     color: rgb(108, 108, 108);
2289     pointer-events: none;
2290 }
2291
2292 .soft-context-menu-item-submenu-arrow {
2293     color: #222;
2294     float: right;
2295     pointer-events: none;
2296 }
2297
2298 .soft-context-menu-item-mouse-over .soft-context-menu-item-checkmark {
2299     color: white;
2300 }
2301
2302 .search-view {
2303     position: absolute;
2304     top: 0;
2305     bottom: 0;
2306     left: 0;
2307     right: 0;
2308 }
2309
2310 .search-drawer-header {
2311     flex: none;
2312     padding: 4px;
2313     display: flex;
2314 }
2315
2316 .search-drawer-header input[type="text"].search-config-search {
2317     -webkit-appearance: none;
2318     padding: 0 3px;
2319     margin: 0;
2320     border: 1px solid rgb(163, 163, 163);
2321     height: 20px;
2322     border-radius: 2px;
2323     color: #303030;
2324 }
2325
2326 .search-drawer-header input[type="search"].search-config-search:focus {
2327     border: 1px solid rgb(190, 190, 190);
2328     outline: none;
2329 }
2330
2331 body.platform-mac .search-drawer-header input[type="search"].search-config-search {
2332     top: 1px;
2333 }
2334
2335 .search-drawer-header label.search-config-label {
2336     margin: auto 0;
2337     margin-left: 8px;
2338     color: #303030;
2339     display: flex;
2340 }
2341
2342 #bottom-status-bar-container {
2343     -webkit-flex: 1 1 0;
2344     width: 0;
2345     overflow: hidden;
2346 }
2347
2348 .search-status-bar-summary {
2349     background-color: rgb(236, 236, 236);
2350     border-top: 1px solid #ccc;
2351     padding-left: 5px;
2352     flex: 0 0 19px;
2353     display: flex;
2354     padding-right: 5px;
2355 }
2356
2357 .search-status-bar-summary .search-message {
2358     padding-top: 2px;
2359 }
2360
2361 .search-status-bar-summary .search-message-spacer {
2362     flex-grow: 1;
2363 }
2364
2365 .search-status-bar-summary .progress-bar-container {
2366     margin-top: -4px;
2367 }
2368
2369 .progress-bar-stop-button .glyph {
2370     -webkit-mask-position: -96px -48px;
2371     background-color: rgb(216, 0, 0) !important;
2372 }
2373
2374 .search-view .search-results {
2375     overflow-y: auto;
2376     flex: auto;
2377 }
2378
2379 .search-results .empty-view {
2380     pointer-events:none;
2381 }
2382
2383 #search-results-pane-file-based li {
2384     list-style: none;
2385 }
2386
2387 #search-results-pane-file-based ol {
2388     -webkit-padding-start: 0;
2389     margin-top: 0;
2390 }
2391
2392 #search-results-pane-file-based ol.children {
2393     display: none;
2394 }
2395
2396 #search-results-pane-file-based ol.children.expanded {
2397     display: block;
2398 }
2399
2400 #search-results-pane-file-based li.parent::before {
2401     -webkit-user-select: none;
2402     background-image: url(Images/statusbarButtonGlyphs.png);
2403     background-size: 320px 144px;
2404     opacity: 0.5;
2405     width: 12px;
2406     content: "a";
2407     color: transparent;
2408     margin-left: -5px;
2409     padding-right: 4px;
2410     display: inline-block;
2411     box-sizing: border-box;
2412 }
2413
2414 @media (-webkit-min-device-pixel-ratio: 1.5) {
2415 #search-results-pane-file-based li.parent::before {
2416     background-image: url(Images/statusbarButtonGlyphs_2x.png);
2417 }
2418 } /* media */
2419
2420 #search-results-pane-file-based li.parent::before {
2421     background-position: -4px -96px;
2422 }
2423
2424 #search-results-pane-file-based li.parent.expanded::before {
2425     background-position: -20px -96px;
2426 }
2427
2428 #search-results-pane-file-based .search-result {
2429     font-size: 11px;
2430     padding: 2px 0 2px 10px;
2431     word-wrap: normal;
2432     white-space: pre;
2433     cursor: pointer;
2434 }
2435
2436 #search-results-pane-file-based .search-result:hover {
2437     background-color: rgba(121, 121, 121, 0.1);
2438 }
2439
2440 #search-results-pane-file-based .search-result .search-result-file-name {
2441     font-weight: bold;
2442     color: #222;
2443 }
2444
2445 #search-results-pane-file-based .search-result .search-result-matches-count {
2446     margin-left: 5px;
2447     color: #222;
2448 }
2449
2450 #search-results-pane-file-based .show-more-matches {
2451     padding: 4px 0;
2452     color: #222;
2453     cursor: pointer;
2454     font-size: 11px;
2455     margin-left: 20px;
2456 }
2457
2458 #search-results-pane-file-based .show-more-matches:hover {
2459     text-decoration: underline;
2460 }
2461
2462 #search-results-pane-file-based .search-match {
2463     word-wrap: normal;
2464     white-space: pre;
2465 }
2466
2467 #search-results-pane-file-based .search-match .search-match-line-number {
2468     color: rgb(128, 128, 128);
2469     text-align: right;
2470     vertical-align: top;
2471     word-break: normal;
2472     padding-right: 4px;
2473     padding-left: 6px;
2474     margin-right: 5px;
2475     border-right: 1px solid #BBB;
2476 }
2477
2478 #search-results-pane-file-based .search-match:not(:hover) .search-match-line-number {
2479     background-color: #F0F0F0;
2480 }
2481
2482 #search-results-pane-file-based .search-match:hover {
2483     background-color: rgba(56, 121, 217, 0.1);
2484 }
2485
2486 #search-results-pane-file-based .search-match .highlighted-match {
2487     background-color: #F1EA00;
2488 }
2489
2490 #search-results-pane-file-based a {
2491     text-decoration: none;
2492     display: block;
2493 }
2494
2495 #search-results-pane-file-based .search-match .search-match-content {
2496     color: #000;
2497 }
2498
2499 .record-profile-status-bar-item .glyph {
2500     -webkit-mask-position: -288px 0;
2501 }
2502
2503 button.record-profile-status-bar-item.toggled-on .glyph:not(.shadow) {
2504     -webkit-mask-position: -288px -24px;
2505     background-color: rgb(216, 0, 0) !important;
2506 }
2507
2508 .empty-view,
2509 .storage-view .storage-table-error {
2510     position: absolute;
2511     top: 0;
2512     bottom: 25%;
2513     left: 0;
2514     right: 0;
2515     font-size: 24px;
2516     color: rgb(75%, 75%, 75%);
2517     margin-top: auto;
2518     margin-bottom: auto;
2519     height: 50px;
2520     line-height: 26px;
2521     text-align: center;
2522     font-weight: bold;
2523     padding: 10px;
2524     white-space: pre-wrap;
2525 }
2526
2527 /* Custom popup scrollers */
2528
2529 .custom-popup-horizontal-scroll ::-webkit-scrollbar,
2530 .custom-popup-vertical-scroll ::-webkit-scrollbar {
2531     width: 11px;
2532     height: 11px;
2533 }
2534
2535 .custom-popup-horizontal-scroll ::-webkit-scrollbar-corner,
2536 .custom-popup-vertical-scroll ::-webkit-scrollbar-corner {
2537     display: none;
2538 }
2539
2540 .custom-popup-horizontal-scroll ::-webkit-resizer,
2541 .custom-popup-vertical-scroll ::-webkit-resizer {
2542     display: none;
2543 }
2544
2545 .custom-popup-horizontal-scroll ::-webkit-scrollbar-button,
2546 .custom-popup-vertical-scroll ::-webkit-scrollbar-button {
2547     display: none;
2548 }
2549
2550 /* Custom Horizontal Scrollbar Styles */
2551
2552 .custom-popup-horizontal-scroll ::-webkit-scrollbar:horizontal:corner-present {
2553     border-right-width: 0;
2554 }
2555
2556 .custom-popup-horizontal-scroll ::-webkit-scrollbar-thumb:horizontal {
2557     -webkit-border-image: url(Images/thumbHoriz.png) 0 11 0 11;
2558     border-color: transparent;
2559     border-width: 0 11px;
2560     min-width: 20px;
2561 }
2562
2563 .custom-popup-horizontal-scroll ::-webkit-scrollbar-thumb:horizontal:hover {
2564     -webkit-border-image: url(Images/thumbHoverHoriz.png) 0 11 0 11;
2565 }
2566
2567 .custom-popup-horizontal-scroll ::-webkit-scrollbar-thumb:horizontal:active {
2568     -webkit-border-image: url(Images/thumbActiveHoriz.png) 0 11 0 11;
2569 }
2570
2571 .custom-popup-horizontal-scroll ::-webkit-scrollbar-track-piece:horizontal:start {
2572     margin-left: 5px;
2573 }
2574
2575 .custom-popup-horizontal-scroll ::-webkit-scrollbar-track-piece:horizontal:end {
2576     margin-right: 5px;
2577 }
2578
2579 .custom-popup-horizontal-scroll ::-webkit-scrollbar-track-piece:horizontal:end:corner-present {
2580     margin-right: 4px;
2581 }
2582
2583 .custom-popup-horizontal-scroll ::-webkit-scrollbar-track-piece:horizontal:decrement {
2584     -webkit-border-image: url(Images/thumbHoriz.png) 0 11 0 11;
2585     border-color: transparent;
2586     border-width: 0 0 0 11px;
2587 }
2588
2589 .custom-popup-horizontal-scroll ::-webkit-scrollbar-track-piece:horizontal:increment {
2590     -webkit-border-image: url(Images/thumbHoriz.png) 0 11 0 11;
2591     border-color: transparent;
2592     border-width: 0 11px 0 0;
2593 }
2594
2595 /* Custom Vertical Scrollbar Styles */
2596
2597 .custom-popup-vertical-scroll ::-webkit-scrollbar:vertical:corner-present {
2598     border-bottom-width: 0;
2599 }
2600
2601 .custom-popup-vertical-scroll ::-webkit-scrollbar-thumb:vertical {
2602     -webkit-border-image: url(Images/thumbVert.png) 11 0 11 0;
2603     border-color: transparent;
2604     border-width: 11px 0;
2605     min-height: 20px;
2606 }
2607
2608 .custom-popup-vertical-scroll ::-webkit-scrollbar-thumb:vertical:hover {
2609     -webkit-border-image: url(Images/thumbHoverVert.png) 11 0 11 0;
2610 }
2611
2612 .custom-popup-vertical-scroll ::-webkit-scrollbar-thumb:vertical:active {
2613     -webkit-border-image: url(Images/thumbActiveVert.png) 11 0 11 0;
2614 }
2615
2616 .custom-popup-vertical-scroll ::-webkit-scrollbar-track-piece:vertical:decrement {
2617 }
2618
2619 .custom-popup-vertical-scroll ::-webkit-scrollbar-track:vertical {
2620     background: linear-gradient(to right, rgb(80, 80, 80), rgb(192, 192, 192) 25%, rgb(192, 192, 192));
2621     border-radius: 5px;
2622     margin: 5px;
2623 }
2624
2625 .console-context {
2626     max-width: 200px;
2627 }
2628
2629 .root-view {
2630     overflow: hidden;
2631     position: absolute !important;
2632     left: 0;
2633     top: 0;
2634     right: 0;
2635     bottom: 0;
2636 }
2637
2638 .search-bar {
2639     flex: 0 0 23px;
2640     background-color: rgb(236, 236, 236);
2641 }
2642
2643 .search-bar.replaceable {
2644     flex: 0 0 44px;
2645 }
2646
2647 .progress-bar-container {
2648     display: inline-flex;
2649     margin: 0 8px;
2650     -webkit-flex: 1 0;
2651 }
2652
2653 .progress-bar-container span {
2654     padding: 6px;
2655 }
2656
2657 .progress-bar-container progress {
2658     margin-top: 7px;
2659     -webkit-flex: 1 0;
2660 }
2661
2662 body.platform-mac .progress-bar-container progress {
2663     margin-top: 6px;
2664 }
2665
2666 .progress-bar-container button.status-bar-item {
2667     border-left: none;
2668     margin-top: 1px;
2669 }
2670
2671 .elements-tree-outline li.parent::before {
2672     top: 0 !important;
2673 }
2674
2675 .elements-tree-outline li.shadow-root + ol {
2676     margin-left: 5px;
2677     padding-left: 5px;
2678     border-left: 1px solid gray;
2679 }
2680
2681 #drawer-editor-view {
2682     flex: auto;
2683 }
2684
2685 .toolbar-close-button-item {
2686     display: inline-block;
2687     float: right;
2688     padding-right: 4px;
2689     padding-top: 4px;
2690     padding-left: 2px;
2691 }
2692
2693 body.undocked .toolbar-close-button-item {
2694     display: none;
2695 }
2696
2697 .root-view > .split-view > .split-view-sidebar {
2698     position: relative;
2699 }
2700
2701 select.drop-down-menu {
2702     border: none;
2703     -webkit-appearance: none;
2704 }
2705
2706 .viewport-control-gap-element {
2707     color: transparent;
2708 }
2709
2710 label.checkbox-with-label {
2711     display: flex;
2712     -webkit-user-select: none;
2713 }
2714
2715 .text-button {
2716     background-image: linear-gradient(hsl(0, 0%, 93%), hsl(0, 0%, 93%) 38%, hsl(0, 0%, 87%));
2717     border: 1px solid hsla(0, 0%, 0%, 0.25);
2718     border-radius: 2px;
2719     box-shadow: 0 1px 0 hsla(0, 0%, 0%, 0.08), inset 0 1px 2px hsla(0, 100%, 100%, 0.75);
2720     color: hsl(0, 0%, 27%);
2721     font-size: 12px;
2722     margin: 0 1px 0 0;
2723     text-shadow: 0 1px 0 hsl(0, 0%, 94%);
2724     min-height: 2em;
2725     padding-left: 10px;
2726     padding-right: 10px;
2727 }
2728
2729 body.inactive button.text-button,
2730 .text-button:disabled {
2731     background-image: linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6);
2732     border-color: rgba(80, 80, 80, 0.2);
2733     box-shadow: 0 1px 0 rgba(80, 80, 80, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.75);
2734     color: #aaa;
2735 }
2736
2737 .text-button:not(:disabled):hover {
2738     background-image: linear-gradient(hsl(0, 0%, 94%), hsl(0, 0%, 94%) 38%, hsl(0, 0%, 88%));
2739     border-color: hsla(0, 0%, 0%, 0.3);
2740     box-shadow: 0 1px 0 hsla(0, 0%, 0%, 0.12), inset 0 1px 2px hsla(0, 100%, 100%, 0.95);
2741     color: hsl(0, 0%, 0%);
2742 }
2743
2744 .text-button:not(:disabled):active {
2745     background-image: linear-gradient(hsl(0, 0%, 91%), hsl(0, 0%, 91%) 38%, hsl(0, 0%, 84%));
2746     box-shadow: none;
2747     text-shadow: none;
2748 }
2749
2750 .chrome-select {
2751     -webkit-appearance: none;
2752     -webkit-user-select: none;
2753     border: 1px solid rgba(0, 0, 0, 0.25);
2754     border-radius: 2px;
2755     box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08),
2756     inset 0 1px 2px rgba(255, 255, 255, 0.75);
2757     color: #444;
2758     font: inherit;
2759     margin: 0 1px 0 0;
2760     outline: none;
2761     text-shadow: 0 1px 0 rgb(240, 240, 240);
2762     padding-right: 20px;
2763     padding-left: 6px;
2764     background-image: -webkit-image-set(url(Images/chromeSelect.png) 1x, url(Images/chromeSelect_2x.png) 2x), linear-gradient(#ededed, #ededed 38%, #dedede);
2765     background-position: right center;
2766     background-repeat: no-repeat;
2767     min-height: 24px;
2768 }
2769
2770 .chrome-select:enabled:hover {
2771     background-image: -webkit-image-set(url(Images/chromeSelect.png) 1x, url(Images/chromeSelect_2x.png) 2x), linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0);
2772     border-color: rgba(0, 0, 0, 0.3);
2773     box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12),
2774     inset 0 1px 2px rgba(255, 255, 255, 0.95);
2775     color: black;
2776 }
2777
2778 .chrome-select:enabled:active {
2779     background-image: -webkit-image-set(url(Images/chromeSelect.png) 1x, url(Images/chromeSelect_2x.png) 2x), linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
2780     box-shadow: none;
2781     text-shadow: none;
2782 }
2783
2784 .chrome-select:enabled:focus {
2785     /* OVERRIDE */
2786     -webkit-transition: border-color 200ms;
2787     /* We use border color because it follows the border radius (unlike outline).
2788      * This is particularly noticeable on mac. */
2789     border-color: rgb(77, 144, 254);
2790     outline: none;
2791 }
2792
2793 body.inactive select.chrome-select,
2794 .chrome-select:disabled {
2795     background-image: -webkit-image-set(url(Images/chromeDisabledSelect.png) 1x, url(Images/chromeDisabledSelect_2x.png) 2x), linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6);
2796     border-color: rgba(80, 80, 80, 0.2);
2797     box-shadow: 0 1px 0 rgba(80, 80, 80, 0.08),
2798     inset 0 1px 2px rgba(255, 255, 255, 0.75);
2799     color: #aaa;
2800 }
2801
2802 .resources-dividers {
2803     position: absolute;
2804     left: 0;
2805     right: 0;
2806     top: 0;
2807     z-index: -100;
2808     bottom: 0;
2809 }
2810
2811 .resources-event-dividers {
2812     position: absolute;
2813     left: 0;
2814     right: 0;
2815     height: 100%;
2816     top: 0;
2817     z-index: 300;
2818     pointer-events: none;
2819 }
2820
2821 .resources-dividers-label-bar {
2822     position: absolute;
2823     top: 0;
2824     left: 0;
2825     right: 0;
2826     background-color: rgba(255, 255, 255, 0.85);
2827     background-clip: padding-box;
2828     height: 20px;
2829     z-index: 200;
2830     pointer-events: none;
2831     overflow: hidden;
2832 }
2833
2834 .resources-divider {
2835     position: absolute;
2836     width: 1px;
2837     top: 0;
2838     bottom: 0;
2839     background-color: rgba(0, 0, 0, 0.1);
2840 }
2841
2842 .resources-event-divider {
2843     position: absolute;
2844     width: 2px;
2845     top: 0;
2846     bottom: 0;
2847     z-index: 300;
2848 }
2849
2850 .resources-divider-label {
2851     position: absolute;
2852     top: 4px;
2853     right: 3px;
2854     font-size: 80%;
2855     white-space: nowrap;
2856     pointer-events: none;
2857 }