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