styles.css

body {

}

#console-panel .dev-tools-icon-container,
#console-panel .dev-tools-icon-container *,
#console-panel .dev-tools-console,
#console-panel .dev-tools-console * {
    font-family: monospace;
}

#console-panel .dev-tools-header,
#console-panel .dev-tools-header * {
    font-family: sans-serif;
}

#console-panel .dev-tools-icon-container {
    position: fixed;
    z-index: 2000000001;
}
#console-panel .dev-tools-icon-container-left-top,
#console-panel .dev-tools-icon-container-top-left {
    top: 20px;
    left: 20px;
}
#console-panel .dev-tools-icon-container-top-right,
#console-panel .dev-tools-icon-container-right-top {
    top: 20px;
    right: 20px;
}
#console-panel .dev-tools-icon-container-bottom-left,
#console-panel .dev-tools-icon-container-left-bottom {
    bottom: 20px;
    left: 20px;
}
#console-panel .dev-tools-icon-container-bottom-right,
#console-panel .dev-tools-icon-container-right-bottom {
    right: 20px;
    bottom: 20px;
}

#console-panel .dev-tools-icon {
    width: 32px;
    height: 32px;
    line-height: 35px;  /* Keeping height a little more than height, so that it looks better middle-aligned (since we are going to render numbers inside it) */
    border-radius: 999px;

    cursor: pointer;

    text-align: center;
    font-size: 14px;

    /* This may help in improving CPU usage for some of the animations */
    transform: translateZ(0);
}


#console-panel .dev-tools-icon.no-unread-messages {
    /* https://github.com/mozilla/gecko-dev/blob/7aef56cc4e682e5c99fcc282f30abbf8212efd50/devtools/client/definitions.js */
    /* chrome://devtools/skin/images/tool-webconsole.svg */
    background-image: url("data:image/svg+xml;base64,PCEtLSBUaGlzIFNvdXJjZSBDb2RlIEZvcm0gaXMgc3ViamVjdCB0byB0aGUgdGVybXMgb2YgdGhlIE1vemlsbGEgUHVibGljCiAgIC0gTGljZW5zZSwgdi4gMi4wLiBJZiBhIGNvcHkgb2YgdGhlIE1QTCB3YXMgbm90IGRpc3RyaWJ1dGVkIHdpdGggdGhpcwogICAtIGZpbGUsIFlvdSBjYW4gb2J0YWluIG9uZSBhdCBodHRwOi8vbW96aWxsYS5vcmcvTVBMLzIuMC8uIC0tPgo8c3ZnIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9ImNvbnRleHQtZmlsbCAjMGIwYjBiIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogIDxwYXRoIGQ9Ik0xNCA0VjNIMnYxaDEyem0wIDF2OEgyVjVoMTJ6TTEgMy4wMDJDMSAyLjQ1IDEuNDUgMiAyLjAwNyAyaDExLjk4NkExLjAxIDEuMDEgMCAwIDEgMTUgMy4wMDJ2OS45OTZDMTUgMTMuNTUgMTQuNTUgMTQgMTMuOTkzIDE0SDIuMDA3QTEuMDEgMS4wMSAwIDAgMSAxIDEyLjk5OFYzLjAwMnoiLz4KICA8cGF0aCBkPSJNNC4wOSA3Ljg1OWwyLjA2MiAyLS4wMDYtLjcxMy0yLjA2MSAyLjA2MmEuNS41IDAgMCAwIC43MDcuNzA3bDIuMDYyLTIuMDYxYS41LjUgMCAwIDAtLjAwNi0uNzEzbC0yLjA2MS0yYS41LjUgMCAxIDAtLjY5Ny43MTh6Ii8+Cjwvc3ZnPg==");
    background-repeat: no-repeat;
    background-position: center center;

    opacity: 0.5;
}
#console-panel .dev-tools-icon.no-unread-messages:hover {
    opacity: 1;
}

#console-panel .dev-tools-icon                         {   background-color: #e7e7e7;  box-shadow: inset 0 0 15px 1px #979797; }
#console-panel .dev-tools-icon:hover                   {   background-color: #d0d0d0;                                              }
#console-panel .dev-tools-icon.found-something,
#console-panel .dev-tools-icon.found-log               {   background-color: #d3d3d3;  box-shadow: inset 0 0 15px 1px #777;    }
#console-panel .dev-tools-icon.found-something:hover,
#console-panel .dev-tools-icon.found-log:hover         {   background-color: #b9b9b9;                                              }
#console-panel .dev-tools-icon.found-info              {   background-color: #dad4dd;  box-shadow: inset 0 0 15px 1px #6e61bf; }
#console-panel .dev-tools-icon.found-info:hover        {   background-color: #cbb6d6;                                              }
#console-panel .dev-tools-icon.found-warn              {   background-color: #ffea83;  box-shadow: inset 0 0 15px 1px #f8981b; }
#console-panel .dev-tools-icon.found-warn:hover        {   background-color: #f9d626;                                              }
#console-panel .dev-tools-icon.found-error             {   background-color: #ffc5c5;  box-shadow: inset 0 0 15px 1px #ff5858; }
#console-panel .dev-tools-icon.found-error:hover       {   background-color: #fc9292;  box-shadow: inset 0 0 15px 1px #f00;    }

#console-panel .dev-tools-icon.found-error {
    /* Limiting the animation to 5 times. Otherwise, the CSS animation may cause high CPU usage. */
    animation: console-panel-animation-notify-error 3s 5;
}
@keyframes console-panel-animation-notify-error {
    50% {
        background-color: #ffa500;
        box-shadow: inset 0 0 15px 1px #f00;
    }
}

#console-panel .dev-tools-icon-container .strong-notification:before,
#console-panel .dev-tools-icon-container .strong-notification:after {
    display: block;
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    border-radius: 50%;
    z-index: -1;
}

#console-panel .dev-tools-icon-container .strong-notification:before { background-color: rgba(255, 0, 0, 0.5); }
#console-panel .dev-tools-icon-container .strong-notification:after  { background-color: rgba(255,177,0, 0.5); }

/* To ensure that the CSS animation does not cause high CPU usage, we remove
   the "strong-notification" class via JavaScript, once it is not required
   anymore. */
#console-panel .dev-tools-icon-container .strong-notification:before { animation: console-panel-animation-ripple 0.75s ease-in  infinite; }
#console-panel .dev-tools-icon-container .strong-notification:after  { animation: console-panel-animation-ripple 0.75s ease-out infinite; }

/* https://stackoverflow.com/questions/32955459/rings-with-ripple-animation-css-only/32955876#32955876 */
@keyframes console-panel-animation-ripple {
    0% {
        top:    0px;
        right:  0px;
        bottom: 0px;
        left:   0px;
    }
    25% {
        top:    -10vh;
        top:    -10vmin;
        right:  -10vh;
        right:  -10vmin;
        bottom: -10vh;
        bottom: -10vmin;
        left:   -10vh;
        left:   -10vmin;
        opacity: 0.5;
    }
    90% {
        opacity: 0.2;
    }
    100% {
        top:    -20vh;
        top:    -20vmin;
        right:  -20vh;
        right:  -20vmin;
        bottom: -20vh;
        bottom: -20vmin;
        left:   -20vh;
        left:   -20vmin;
        opacity: 0;
    }
}

#console-panel .dev-tools {
    position: fixed;
    z-index: 2000000000;

    display: block;
    bottom: 0;
    right: 0;
    box-sizing: border-box;
    background-color: #fff;
    border-top: 1px solid #d0d0d0;
    width: 100%;

    /* Values much higher than this may not work so well in different mobile device orientation since the "vh"/"vmin" might be calculated
       w.r.t. full-screen size, while the toolbar is also visible (which eats some of that height) */
    max-height: 80vh;
    max-height: 80vmin;

    height: 250px;
    min-height: 90px;
    padding: 0;

    color: #303942;
    /* A mix and match of font-family names from Chrome DevTools (ui/inspectorStyle.css) */
    font-family: 'Segoe UI', '.SFNSDisplay-Regular', 'Helvetica Neue', 'Lucida Grande', Roboto, Ubuntu, Tahoma, Arial, sans-serif;

    font-size: 12px;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

#console-panel .dev-tools-header {
    height: 27px;
    line-height: 27px;
    background-color: #f3f3f3;
    padding: 2px 0px 2px 6px;
    border-bottom: 1px solid #d0d0d0;
    font-size: 12px;
}

#console-panel .dev-tools-clear-console-icon {
    width: 13px;
    height: 13px;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gsJFi8Kd+JgAwAAAblJREFUSMellj1PQjEUhh8SGU3EuCkjfoVJ/BgciYNxwMmBxN/A4sfgDzAOOgjhRxBNSJwUwYG4sqJxIJEYVsHFqIBLb3Jz0vb2Xpp0OT1vn7anPacxgtsSsA/sAPNAUtm7wAdQA6rAKxHbOlAHxo79GdgOA4gDZWAUAuL1EVBSc1jbLPBkmegb6AH9AGADSNh2ooN8AZfApljptIpdxbD7hmlnZcPqCg7HnQHaGm1ROm5YYvIH5B1gM0BTE7OM36kRcOausDmgI7Q1b3BZE5OCmjwKLKdZ6CLAqTBeKUF+AlhL6I4BHoVxyyeICjsTmgdU6vAMP5orGQWWFf4vAAOfoWcQhoWtCN+BBH1aVnkA/GpghxrftPDry6MbqxfPhDvb0x1dTRhzAYF2gV2I8XuAE2GsOFxfGyyuapV/7MgrbNa0ERJ2q3mwKU8kC1xb5a4osLEpBXnVVCbVpspdk8CGwJoUlDSOHYfLEQduDKBrk8CUxVsqrWTVY1wFdoFz4N2gqdtKesKhZLj0uq2U+3dWjPg5GarjmgrzG0oDdyEgNV3gvRZzAKZ8H8gksOD7QHZVmakCb7ZJ/gEMg1YzMOnqgwAAAABJRU5ErkJggg==");
    float: left;
    background-size: contain;
    opacity: 0.5;
    margin-right: 5px;
    margin-top: 7px;
    cursor: pointer;
}
#console-panel .dev-tools-clear-console-icon:hover {
    opacity: 0.85;
}

#console-panel .dev-tools-header-cross-icon,
#console-panel .dev-tools-header-disable-icon {
    float: right;
    cursor: pointer;
    width: 13px;
    height: 13px;
    opacity: 0.5;
    background-repeat: no-repeat;
    height: 24px;
}

#console-panel .dev-tools-header-cross-icon {
    width: 30px;

    /* Source: chrome-devtools://devtools/bundled/Images/largeIcons_2x.png (in Google Chrome browser) */
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gsGFTI1ZM2PLQAAAKdJREFUOMutlUsOwjAMRB8cgIqzdGGuHnEANpwFuScoC1LJQq1rW4mUTZR5+c048GsT0IAH+TYDT+COgb2AFViS0Bn4dO17g7Y+sHUFJACTPtdq2/8qa3Cnexq1mgz0FJaBhmERaBrmXbYejEnFDntdK549grqwayEZF4px8o6cStTQR/GskU5UxGdhaMa0p9BKAlzo8PJ1MwVWRxRY+wVIwbPStRPAF611ou20opYrAAAAAElFTkSuQmCC");
    background-position: 9px 8px;
    background-size: 10px 10px;
}

#console-panel .dev-tools-header-disable-icon {
    width: 20px;

    /* Source: https://www.iconfinder.com/icons/1608429/off_power_icon */
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB3aWR0aD0iMTc5MiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTY2NCA4OTZxMCAxNTYtNjEgMjk4dC0xNjQgMjQ1LTI0NSAxNjQtMjk4IDYxLTI5OC02MS0yNDUtMTY0LTE2NC0yNDUtNjEtMjk4cTAtMTgyIDgwLjUtMzQzdDIyNi41LTI3MHE0My0zMiA5NS41LTI1dDgzLjUgNTBxMzIgNDIgMjQuNSA5NC41dC00OS41IDg0LjVxLTk4IDc0LTE1MS41IDE4MXQtNTMuNSAyMjhxMCAxMDQgNDAuNSAxOTguNXQxMDkuNSAxNjMuNSAxNjMuNSAxMDkuNSAxOTguNSA0MC41IDE5OC41LTQwLjUgMTYzLjUtMTA5LjUgMTA5LjUtMTYzLjUgNDAuNS0xOTguNXEwLTEyMS01My41LTIyOHQtMTUxLjUtMTgxcS00Mi0zMi00OS41LTg0LjV0MjQuNS05NC41cTMxLTQzIDg0LTUwdDk1IDI1cTE0NiAxMDkgMjI2LjUgMjcwdDgwLjUgMzQzem0tNjQwLTc2OHY2NDBxMCA1Mi0zOCA5MHQtOTAgMzgtOTAtMzgtMzgtOTB2LTY0MHEwLTUyIDM4LTkwdDkwLTM4IDkwIDM4IDM4IDkweiIvPjwvc3ZnPg==");
    background-size: 14px 14px;
    background-position: 3px 6px;
}

#console-panel .dev-tools-header-cross-icon:hover,
#console-panel .dev-tools-header-disable-icon:hover {
    opacity: 0.75;
}

#console-panel .dev-tools-console {
    clear: both;
    overflow: auto;
    height: calc(100% - 31px);
}

#console-panel .dev-tools-console-body {
    overflow: auto;
}

#console-panel .dev-tools-console-message-wrapper {
    line-height: 13px;
    border-top: 1px solid transparent;
    border-bottom: 1px solid #f0f0f0;
    line-height: 17px;
    padding: 3px 22px 1px 0;
}

/* This helps in ensuring that the texts show proper whitespace (also useful in showing function definitions) */
#console-panel .dev-tools-console-message > span {
    white-space: pre-wrap;
}

#console-panel .log-mode-info,
#console-panel .log-mode-warn,
#console-panel .log-mode-error,
#console-panel .log-mode-window-onerror {
    background-repeat: no-repeat;
}

#console-panel .log-mode-info {
    /* chrome-devtools://devtools/bundled/Images/smallIcons_2x.png */
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gsKDw81VUJejQAAAsxJREFUOMutVFtLVFEU/vbex5lxjjIqlWVXsKQL4UORRb0WJZSKmQVRD0UE9hLRjSDqqRtdXnqpH1BvXpDeoiBIgyYyGcuCUuli6ejczzmzL6uHypzRJNDvae+1v/Wtb7FZi2EaNDVFfCNwG7Q0dZ4yNcqYCqUIWpmvWZdeKCPbgsnRtkhkXzY/l+UHag/2NHpS34prWuYSYPIJ2kA5CpmYO5h15ckfPTtaJz+Lv65IVNXsvTGe1XdGFYUkAAJQFrJQu60UyYxBIq0BzsB9Ar5iXwmImkXRftsZWfkYeEoAYP0RpFDftR9pdSom/3oSguHBldVYssCHeEphZ0vklygAxhjseTaY4Ke12kTxfpwFAA4AB46/bYy66lQsm9ugHeBYPN8HAAgVWaj4fZ6MYGkh7DL7TLDyUT0AiKZLEZ+KU+dgKluST/YkQWrCsoV+dD4bQ+uT6HR/CL9dgPS4s9Ur33OXHTrR3zwQcx+OOiqHJDiDXchzYmnXQGuaVjQxksG3gfg+iwH1cU9PIVQuDaD15pqc2JHLH9Ddm5xW0C7xgzPUcUeZzdJMrfp+0MG6va8wNOzhfyAKBCy/2MIVUTnmCJaPL+IgzBkYMcMtwYbnSlBKPcwDgnUVcDZrMS01lGeec0ZoD/mtWQumYy4MmQ7ul6nWeYXWAJuFSTKExIgzpIudDhEO3zPVm1qGGKE5NWmOly/y4/7FVVi+MAAhflWrripCcVAg/DaVIxgfTlMm6RyW/Q19E74aj0auf0tnT/+Z52CAo7rKnuLm+5jEx8/uxD0z7iL6NXE1+W7X+Zxts37J2nN6sJcEsTNjUiPjGnS9Sc7YZibqUCrqXE++e3Hhnwt298E39Wmpbye0WeESweRRyBB0RsKNuZ88T538/np7+4wbGwA2HHtZEBpDvZSoc43ZrI2p0NJASvqisrpbKt1eporbw+GNMj/3Jz2CZsrrkClGAAAAAElFTkSuQmCC");
    background-size: 11px 11px;
    background-position: 7px 4px;

    background-color: #edebfb;
    border-bottom-color: #e5e1ff;
}

#console-panel .log-mode-warn {
    /* chrome-devtools://devtools/bundled/Images/smallIcons_2x.png */
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gsKDwIt84C4lgAAAbFJREFUOMudlLtOG0EUhr9dr9esL7uz4MvKSkIRiZKaDvECeYRADSjCBmoeIZKL1IZHSIMrEzp3kVKCEJcgCHgxdizLyNg4RbhkYXfWZLqZc+afb/45ZxRCxu4XPqQtygBui4XZRb7K8hVZsFbCFBnO3mZJAPy8pNOsk5/5xO+gPapMcBCjmBv/KwaQGycxiFH8L8JaCdPKcv4uQ/zf9dM63bNz8nMFmq8i7OusOsIrBpCzMWIGhVcRPtClDOLNtjcmUtDpBlNqfoK3UYqOIH5yAdMfh57Yjy2FSQfjqkkB2Ai9cq2EmbZZ16PBxkc1mBCs73xGhAoGeTeql+pzugnBmowujFKV0UUiMOh3n+qy3yUSkVOqMjqRAvdk93HuHn/DTskpVZl3VhLcw8rjvH5UwUzKvVSD6Ib3Rdpzt5/Kqb6Nch8LolTDXnYqs0enqtCpKkxl90NfXPHr2SGjDcWnx7W7MVYd21/s4NS/U96/8doCkLUx3BYrmpVgSddG/CAlOboGIsmyJvtxbBO+l73htJCepWqNNvPA5piO7ZdhJb1Xvu3Dr8bLvJse1402838AjWeMl7yfz78AAAAASUVORK5CYII=");
    background-size: 10px 10px;
    background-position: 7px 5px;

    background-color: #fffbe5;
    border-bottom-color: #fff5c2;
}

#console-panel .log-mode-error,
#console-panel .log-mode-window-onerror {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gsKDxgoM8e2wgAAAxlJREFUOMudlMtPE1EUxr97Z+ZOh0I7pTxKwbZAjCaNxhijkBiNbowx8hD1D1DDgvhCMJq4cYuCGjUuXOAejAKJKxMJmCgmLkyMGjGA5WGRVx9IKcPMHRdg40B56Fmec88v557vu5cgTbQFwZQpVk1Ns1Jmyj6BMi8AGFz7saDNvzNM0pHM0zpOf4K2spesTLwoyKyRRXbH4/T4XBkuMIFZ6pqhITIXQXg2HEouJuuPh+efpwW2AUKmX23y2PMbCh0FoIRgveAmx+hsGBO/Jm+/C0Wu3wQ4AIh/DjhKPU1bsvIb8pRsbCYoofA5CqFIylUiyiYGxq+lJny53V+TIzufFmW48T8xMjeFyWS0+kj/SAdtCwaZLCot3gyX5ZDtRAWoS109mUuF7USFJVdkd0Nhyv22YJAJdd6ckx6b85ydsr9glchsvAxWvhdady/MZDIFcz5oge3YUfBIFPqXr8tCEFAqOnWy8JEKEqtyiDarkq96oA8MQigphvPRPVC3G1RV4bjfDKGkGEZoGFrPa0uPQ7JBFFgl6SsvGyqFElh1NVWF40EzxNISGKOjgM4hBHwwQsOInb8CPj2zah3feGKQSlTKT2uLaBTxC43Qv4cgFBUtwUbH1oQBgCyyAgpBWldBsolMqiIwTrnExtP6bPnKQsAPY2RsedJCOB+2gLrT24uL0jjlTH6rU7r2/kLDiNVdQryufkkovy8tVKcEBpPfUCLKnfNMthTZ4YNLsMEhxOoug0/PLO30YiOMwSEIfh/Ywf2WnoQsg4qsi7yvrZXEn/F+7+REgJimxdhady94JLrK2OzQASSfdaVyJiEIu3OHRRvfSgDgw6kz1fZfsWdqdOa/nl5MzTbjmc6q3e2tXRQAdrW3Pk+oObfnHOo/w+ayVCTU3Kbd7a1dAJBSY+e2guvxvC23YjlemJRsCDIpRTzXa8Y9vqYd2zw31jTV57MNVdD0u/aZ8YA8G4WwaP2UDYlhIUtFIjt/iIusPvikuXNDl76vrZUU5FZRwitJcqFM0DXvss/GDFnpM4nZOW9Od+55/HhxZe9vO6ohHl8Nk3cAAAAASUVORK5CYII=");
    background-size: 11px 11px;
    background-position: 7px 5px;

    background-color: #fff0f0;
    border-bottom-color: #ffd6d6;
}

#console-panel .log-mode-unhandled {
    background-color: #eff;
}

#console-panel .dev-tools-console-message {
    margin-left: 24px;
    word-wrap: break-word;
    font-family: monospace;
}


#console-panel .dev-tools-console-message-code-line {
    float: right;
}

#console-panel .log-call-stack {
    white-space: pre-wrap;
}

#console-panel .log-value-window-onerror {
    color: #f00;
}

#console-panel .log-value-unknown {
    color: #000;
}

#console-panel .log-value-boolean,
#console-panel .log-value-number {
    color: #1c00cf;
}

#console-panel .log-value-null,
#console-panel .log-value-undefined,
#console-panel .log-value-console-clear {
    color: #808080;
}

#console-panel .log-value-console-clear {
    font-style: italic;
}

#console-panel .log-value-string:before,
#console-panel .log-value-string:after {
    content: '"';
    color: #222;
}
#console-panel .log-value-string {
    color: #c41a16;
}

#console-panel .log-value-dom-text:before,
#console-panel .log-value-dom-text:after {
    color: #888;
    font-style: italic;
}
#console-panel .log-value-dom-text:before {
    content: '#text "';
}
#console-panel .log-value-dom-text:after {
    content: '"';
}

#console-panel .log-value-dom {
    color: #881280;
}

/* This helps in keeping the console-panel-expand-collapse icon together with the highlighted
   code (for example when multiple items are logged via single console.log()) */
#console-panel .log-value-dom {
    display: inline-block;
}
/* But, the above rule may cause the console-panel-expand-collapse icon to move to the next
   line even when it is the first child, but that case may be better to ignore (to avoid
   that extra line). For example: when we log an element which contains huge HTML code, which
   would need to get wrapped */
#console-panel .dev-tools-console-message .log-value-dom:first-child {
    display: inline;
}

#console-panel .jsoneditor-not-available.log-value-array,
#console-panel .jsoneditor-not-available.log-value-object {
    color: #808080;
}
#console-panel .jsoneditor-not-available.log-value-array:before,
#console-panel .jsoneditor-not-available.log-value-object:before {
    color: rgb(33, 33, 33);
}
#console-panel .jsoneditor-not-available.log-value-array:before {
    content: 'Array ';
}
#console-panel .jsoneditor-not-available.log-value-object:before {
    content: 'Object ';
}

/* CSS fixes for JSON Editor */
#console-panel div.jsoneditor-menu {
    display: none;
}
#console-panel div.jsoneditor-outer {
    margin-top: 0;
    padding-top: 0;
}
#console-panel div.jsoneditor {
    border-width: 0;
}
#console-panel div.jsoneditor-tree div.jsoneditor-tree-inner {
    padding-bottom: 0;
}

/* Without this, a scroll seems to come up */
#console-panel div.jsoneditor-tree {
    display: inline;
}

#console-panel .jsoneditor,
#console-panel .jsoneditor-outer,
#console-panel .jsoneditor-tree-inner,
#console-panel .jsoneditor-outer > .jsoneditor-tree,
#console-panel .jsoneditor-outer > .jsoneditor-tree > .jsoneditor-tree-inner > .jsoneditor-tree {
    display: inline;
}

/* This style may be useful in older browsers */
#console-panel div.jsoneditor-value.jsoneditor-array,
#console-panel div.jsoneditor-value.jsoneditor-object {
    min-width: unset;
}


#console-panel div.jsoneditor-value {
    width: max-content;
}

#console-panel div.jsoneditor-tree button.jsoneditor-button,
#console-panel div.jsoneditor-tree button.jsoneditor-button.jsoneditor-expanded {
    background-position: 0px 2px;
}

#console-panel div.jsoneditor-tree button.jsoneditor-button {
    width: 10px;
    height: 10px;
    background-repeat: no-repeat;

    /* chrome-devtools://devtools/bundled/Images/treeoutlineTriangles.png */
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAICAQAAABwz0azAAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfiCxITJRj/Z+u0AAAAL0lEQVQI12NgyGBgZICD/wy7GGQRnP8MHxjSEJz/DP8ZtjJIMTEga0BXhmQAktEApfUQ8zThbVYAAAAASUVORK5CYII=");
}

#console-panel div.jsoneditor-tree button.jsoneditor-button.jsoneditor-expanded {
    /* chrome-devtools://devtools/bundled/Images/treeoutlineTriangles.png */
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAGCAQAAAC7znxOAAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfiCxITJDGkzkKZAAAAP0lEQVQI12Ng4Ga4xfAfDu8x8DIwMDBYMfyBCvxlsGOAgm6oUBcDHLAzXGL4z3CNgYMBCRgyfGUwZUAD2jAGAEP7FIhkSA3EAAAAAElFTkSuQmCC");
}


#console-panel div.jsoneditor-readonly,
#console-panel div.jsoneditor-value {
    padding: 0;
    margin: 0;
}

#console-panel div.jsoneditor-field,
#console-panel div.jsoneditor-readonly,
#console-panel div.jsoneditor-value {
    min-height: 0px;
    min-width: 0px;    /* Useful for keeping widths for property names as small as possible */
}

#console-panel .jsoneditor-schema-error,
#console-panel div.jsoneditor td,
#console-panel div.jsoneditor textarea,
#console-panel div.jsoneditor th,
#console-panel div.jsoneditor-field,
#console-panel div.jsoneditor-value {
    font-size: 11px;
    font-family: monospace;
}


#console-panel div.jsoneditor td.jsoneditor-tree {
    vertical-align: middle;
}


/* Begin: Styles to make JSON Editor match Chrome DevTools UI */
#console-panel div.jsoneditor-field {
    color: #881391;
}

#console-panel div.jsoneditor-value.jsoneditor-string {
    color: #c41a16;
}

#console-panel div.jsoneditor-value.jsoneditor-string:before,
#console-panel div.jsoneditor-value.jsoneditor-string:after {
    content: '"';
    color: #222;
}

#console-panel div.jsoneditor-empty {
    border-width: 0;
}

#console-panel .jsoneditor-expandable .jsoneditor-readonly {
    text-transform: capitalize;
    color: rgb(33, 33, 33);
}

#console-panel div.jsoneditor-tree button.jsoneditor-button:focus {
    background-color: transparent;
    outline: none;
}

/* End */


/* Begin: Styles to make Prism JS match Chrome DevTools */
#console-panel .only-first-line-of-code code.language-markup:after {
    content: '…';
}

#console-panel pre.language-markup {
    background-color: transparent;
    padding: 0;
    margin: 0;

    display: inline-block;
}
/* End */


#console-panel .all-lines-of-code {
    display: inline-block;
}

#console-panel .console-panel-expand-collapse {
    display: inline-block;
    width: 10px;
    height: 10px;
}

#console-panel .console-panel-expand-collapse.console-panel-collapsed,
#console-panel .console-panel-expand-collapse.console-panel-expanded {
    cursor: pointer;
    background-repeat: no-repeat;
}
#console-panel .console-panel-expand-collapse.console-panel-expanded {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAGCAQAAAC7znxOAAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfiCxITJDGkzkKZAAAAP0lEQVQI12Ng4Ga4xfAfDu8x8DIwMDBYMfyBCvxlsGOAgm6oUBcDHLAzXGL4z3CNgYMBCRgyfGUwZUAD2jAGAEP7FIhkSA3EAAAAAElFTkSuQmCC");
    background-position: 0px 2px;
}

#console-panel .console-panel-expand-collapse.console-panel-collapsed {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAICAQAAABwz0azAAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfiCxITJRj/Z+u0AAAAL0lEQVQI12NgyGBgZICD/wy7GGQRnP8MHxjSEJz/DP8ZtjJIMTEga0BXhmQAktEApfUQ8zThbVYAAAAASUVORK5CYII=");
}

#console-panel .only-first-line-of-code {
    vertical-align: top;
    vertical-align: text-top;
}
#console-panel .all-lines-of-code {
    vertical-align: top;
}
#console-panel code[class*="language-"],
#console-panel pre[class*="language-"] {
    white-space: pre-wrap;
    word-break: break-word;
}

/* Begin: Useful styles when Prism JS is not available */
#console-panel .log-value-dom .all-lines-of-code pre,
#console-panel .log-value-dom .only-first-line-of-code pre {
    display: inline;
}
/* End */

/* Begin: Match Prism JS with DevTools style */
#console-panel code[class*="language-"],
#console-panel pre[class*="language-"] {
    font-family: monospace;
}

#console-panel .token.tag {
    color: #881280;
}
#console-panel .token.attr-name {
    color: #994500;
}

#console-panel .token.attr-value {
    color: #1a1aa6;
}

#console-panel .token.comment {
    color: #236e25;
}
/* */


/* Begin: Resize related CSS */
html #console-panel .dev-tools-resize-handle {
    top: 0;
    height: inherit;
    padding-top: inherit;
    padding-bottom: inherit;
    position: absolute;
    width: 100%;
    left: 0;
    margin-left: 10px;
    margin-right: 10px;
    display: block;
}

#console-panel .dev-tools {
    top: unset !important;
    bottom: 0 !important;
}
/* End */

/* Begin: jQuery UI related fix */
#console-panel .dev-tools {
    position: fixed;
}