packages/devtools_app/web/styles.css

/* Copyright 2018 The Chromium Authors. All rights reserved. */
/* Use of this source code is governed by a BSD-style license that can be */
/* found in the LICENSE file. */

/* All color values that need to be customized depending on whether a light */
/* or dark theme is used must be specified with CSS variables. */
/* TODO(jacobr): the current list of variables is a bit redundant and should */
/* be refactored to eliminate cases where very similar colors are used with */
/* no clear reason to diverge. */
/* If you add a CSS variable here, be sure to also add it to styles_dart.css */
:root {
    --border-color: #eee;
    --button-selected-color: #eaeff4;
    --chart-bar-color: #4078c0;
    --counter-color: #666;
    --link-color: #2188ff;
    --dark-shadow-color: #666;
    --default-background-rgb: 255, 255, 255;
    --default-background: rgba(var(--default-background-rgb), 1);
    --default-button-text-color: #24292e;
    --default-color-thumb: #888;
    --default-color: #000;
    --disabled-background: #ddd;
    --error-background: #f97c7c;
    --error-summary-color: #F44336;
    --inspector-info-color: #24292e;
    --even-row-background: #f7f7f7;
    --footer-color: #7a7a7a;
    --footer-link-hover: #0366d6;
    --footer-strong: #333;
    --form-select-background: #f9fbfc;
    --header-background: #f3f3f3;
    --header-color: #586069;
    --header-item-rgb: 255, 255, 255;
    --header-item: rgba(var(--header-item-rgb), 1);
    --hint-background: #fffbdd;
    --inspector-hint-color: #000;
    --light-background: #ccc;
    --light-text-color: #f5f5dc;
    --list-background: #fff;
    --match-color: #fff;
    --masthead-background: #4078c0;
    --menu-item-border: #e1e4e8;
    --popup-border-color: #d1d5da;
    --row-hover-background: #f2f4fa;
    --selected-background: #4078c0;
    --selected-border: #a2a2a2;
    --selected-line: #c4daf7;
    --shadow-color: #ddd;
    --shaded-background-lighter: #fdfdfd;
    --shaded-background-darker: #f6f6f6;
    --subtle: #777;
    --subtle-selected: var(--light-background);
    --table-border: #dfe2e5;
    --title: #555;
    --toast-background: #f9f9f9;
    --toast-border: #d8dee2;
}

/*
 * Variables used in media queries (not themes) to handle different screen
 * sizes better
 */
:root {
    --page-outer-padding: 30px;
}

@media all and (max-width: 600px) {
    :root {
        --page-outer-padding: 20px;
    }
}

.lead, .page-title + .markdown-body > p:first-child {
    margin-bottom: 30px;
    font-size: 20px;
    font-weight: normal;
    color: var(--title);
}

body {
    overflow: hidden;
    font-size: 14px;
    background-color: var(--default-background);
}

.container {
    width: initial;
    margin-right: var(--page-outer-padding);
    margin-left: var(--page-outer-padding);
}

.masthead {
    padding: 16px var(--page-outer-padding);
    margin-bottom: 20px;
    text-align: center;
    background-color: var(--masthead-background);
}

.masthead .masthead-logo {
    display: inline-block;
    font-size: 1.5rem;
    color: var(--header-item);
    float: left;
}

.masthead-nav {
    margin-top: .5rem;
    white-space: nowrap;
    display: inline-flex;
}

.masthead-nav a:not(:last-child) {
    margin-right: 15px;
}

.masthead .mega-octicon {
    font-size: 1.5rem;
}

@media all and (max-width: 550px) {
    /* At 550px we hide "Dart DevTools" from the title, so we can reduce spacing
     * around the icons */
    .masthead {
        padding: 8px var(--page-outer-padding);
    }
    .masthead-nav {
        margin-top: 0;
    }
}

.small-octicon {
  font-size: 13px;
}

#icon-nav a {
  padding-bottom: 5px;
  padding-left: 3px;
  color: var(--header-item) !important;
}

.masthead a,
.masthead .masthead-item {
    color: rgba(var(--header-item-rgb), 0.5) !important;
    font-size: 1rem;
    text-decoration: none;
}

.masthead a.disabled {
    cursor: default;
    opacity: 0.5;
}

.masthead a:hover:not([disabled]) {
    color: var(--header-item) !important;
}

.masthead-nav .active {
    color: var(--header-item) !important;
}

h2 {
    font-size: 18px;
    font-weight: bold;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 8px;
    padding-bottom: 0;
}

td.left,
th.left {
    text-align: left;
}

td.right,
th.right {
    text-align: right;
}

.pre {
    white-space: pre;
}

.pre-wrap {
    white-space: pre-wrap;
}

.monospace {
    font-family: monospace;
}

span.label {
    background-color: #616161;
}

span.label.stderr {
    background-color: #F44336;
}
span.label.stdout {
    background-color: #78909C;
}
span.label.flutter {
    background-color: #0091ea;
}
span.label.gc {
    background-color: #424242;
}

.sticky-top {
    position: sticky;
    top: 0;
}

.table-virtual {
    position: relative;
    overflow-anchor: none;
}

.table-virtual td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.table-virtual.overflow-y td {
    max-width: 500px; /* required for text-overflow to work? */
}

table thead {
    background-color: var(--header-background);
    border-bottom: 1px solid var(--table-border);
}

table tbody {
    vertical-align: top;
}

tbody.selectable tr {
    cursor: default;
}

table th {
  font-weight: bold;
  color: var(--header-color);
  background-color: var(--header-background);
  white-space: nowrap;
}

table th.wide {
    width: 80%;
}

.allocation {
    float: right;
}

.allocation-abstract {
    text-decoration: line-through;
    color: var(--dark-shadow-color);
}

.li-allocation-abstract {
    font-style: italic;
}

.alloc-image {
    background-image: url('icons/memory/alloc_icon.png');
    width: 11px;
    height: 12px;
    margin-top: 5px;
    margin-bottom: 4px;
}

.allocation:hover {
    background-color: var(--selected-background);
    cursor: pointer;
}

.allocation-hover {
    background-color: var(--selected-background);
    cursor: pointer;
    float: right;
}

.allocation-hover-card {
    display: none;
    height: 25%;
    position: absolute;
    background-color: var(--default-background);
    color: var(--title);
    border: 4px solid var(--popup-border-color);
    overflow-y: scroll;
    width: 30em;
    z-index: 101; /* Keep hover top-most. */
}

.allocation-hover-card ul {
    list-style-type: square;
    list-style-position: outside;
    list-style-image: none;
}

.allocation-hover-card ul li {
    padding: 5px;
}

.allocation-li-title {
    background-color: var(--header-background);
    color: var(--header-color);
}

.allocation-li {
    background-color: var(--default-background);
    color: var(--default-color)
}

.allocation-li:hover {
    background-color: var(--row-hover-background);
    cursor: default;
}

.allocated-by-class-title {
    float: left;
    font-weight: bold;
}
.ref-by-title {
    float: right;
    font-weight: bold;
}

.allocated-by-class { float: left; }
.ref-by { float: right; }

.memory-buttons {
    text-align: right;
}

.history-navigation {
    display: block;
}

.history-separator {
    color: gray;
    padding-left: 1em;
    padding-right: .5em;
}

.history-link {
    text-decoration: underline;
    color: var(--link-color);
    cursor: pointer;
}

.history-link-last {
    text-decoration: underline;
    color: var(--link-color);
    font-weight: bold;
    cursor: pointer;
}

table td,
table th {
  padding: 4px 8px;
  /*border: 1px solid var(--table-border);*/
}

tr th.right span.sortable:before {
    content: "▼ ";
    visibility: hidden;
}

tr th.left span.sortable:after {
    content: " ▼";
    visibility: hidden;
}

tr th.right span.sortable.down:before {
    content: "▼ ";
    visibility: visible;
}

tr th.right span.sortable.up:before {
    content: "▲ ";
    visibility: visible;
}

tr th.left span.sortable.down:after {
    content: " ▼";
    visibility: visible;
}

tr th.left span.sortable.up:after {
    content: " ▲";
    visibility: visible;
}

table tr:nth-child(2n) {
    background-color: var(--even-row-background);
}

table tr:hover {
    background-color: var(--row-hover-background);
}

table tr.selected {
    color: var(--light-text-color);
    background-color: var(--selected-background);
}

.table-border {
   border: 1px solid var(--table-border);
   border-radius: 3px;
}

.gutter {
    background-color: var(--default-background);
    background-repeat: no-repeat;
    background-position: 50%;
    margin-left: 0;
    margin-right: 0;
    flex-shrink: 0;
}

.gutter.gutter-horizontal {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
    cursor: col-resize;
    height: 100%;
}

.gutter.gutter-vertical {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=');
    cursor: row-resize;
    width: 100%;
}

.flutter-icon {
    box-sizing: content-box;
    margin: 2px 3px 2px 2px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    vertical-align: text-bottom;
}

input:disabled+label {
    opacity: 0.5;
}

.frame-bar {
    background: var(--chart-bar-color);
    height: 12px;
    display: inline-block;
    border-radius: 1px;
}

tr.selected .frame-bar {
    background: var(--default-background);
}

.frame-bar.over-budget {
    background: var(--error-background);
}

form[horizontal] {
    align-items: baseline;
}

.nowrap {
    white-space: nowrap;
}

.scroll-table {
    max-height: 190px;
    overflow-x: auto;
}

.overflow-auto {
    overflow: auto;
}

.overflow-y {
    overflow-y: auto;
    overflow-x: hidden;
}

.full-width {
    width: 100%;
}

.full-size {
    width: 100%;
    height: 100%;
}

.footer {
    padding: 10px var(--page-outer-padding);
    margin-top: 20px;
    color: var(--footer-color);
    border-top: 1px solid var(--border-color);
}

.footer a {
    color: var(--footer-color);
}

.footer a:hover {
    color: var(--footer-link-hover);
    text-decoration: none;
}

.footer .separator {
    margin-left: 20px;
    margin-right: 20px;
}

[text-center] {
    text-align: center;
}

[horiz-padding] {
    padding-left: 15px;
    padding-right: 15px;
}


.footer-status {
    display: inline-block;
    min-width: 100px;
}

.interactable {
    cursor: pointer;
    user-select: none;
}

.footer strong {
    color: var(--footer-strong);
}

.section + .section {
  margin-top: 10px;
}

form + form {
  margin-top: 10px;
}

.section .title {
    padding-top: 0.3em;
    margin-bottom: 0.2em;
    font-size: 1.2em;
    font-weight: bold;
    border-bottom: 1px solid var(--border-color);
}

.fill-section {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.form-checkbox {
    user-select: none;
}

.margin-left {
    margin-left: 8px;
}

.margin-right {
    margin-right: 20px;
}

span.function-kind {
    background: #888;
    color: #fff;
    border-radius: 2px;
    padding: 0 2px 1px 2px;
}

span.function-kind.Stub {
    background: #888;
}

span.function-kind.Native {
    background-color: #d73a3a;
}

span.function-kind.Tag {
    background-color: cornflowerblue;
}

.flash {
    margin-bottom: 20px;
}

a[disabled] {
    cursor: default;
}

.masthead a[disabled]:hover {
    color: var(--default-background);
    opacity: 0.5;
}

.progress-element {
    width: 200px;
    height: 16px;
    background: var(--light-background);
    border-radius: 1px;
    position: relative;
    display: inline-block;
}

.progress-element .complete {
    background: var(--selected-background);
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
}

form.align-items-center,
footer.align-items-center {
    align-items: center;
}

div.tabnav {
    margin-bottom: 0;
}

.search-text {
    visibility: hidden;
    vertical-align: top;
    height: 2.1em;
    background-color: var(--default-background);
    color: var(--default-color);
    width: 20em; /* Matches width of popup-view, see below. */
}

.popup-view {
    z-index: 100;
    position: absolute;
    height: calc(30%);
    color: var(--header-color);
    background-color: var(--list-background);
    list-style: none;
    border: 1px solid var(--popup-border-color);
    padding-left: 4px;
    margin-bottom: 2px;
    cursor: pointer;
    overflow-y: scroll;
    display: none;
    width: 20em;  /* Matches width of search-text class, see above. */
}

.popup-items-list {
    cursor: pointer;
}

.popup-list-item {
    white-space: nowrap;
    list-style-type: none;
}

.memory-table {
    /* Just width doesn't work? */
    max-width: 500px;
    min-width: 500px;
}

.memory-table table:focus {
    outline: none;
}

.memory-inspector {
    padding: 3px;
    box-sizing: border-box;
    font-weight: bold;
    color: var(--header-color);
    background-color: var(--header-background);
    white-space: nowrap;
    font-size: 14px;
    border: 1px solid var(--table-border);
    border-radius: 3px;
}

.memory-inspector-items-list {
    background-color: var(--shaded-background-lighter);
}

.memory-instance-data-list-item {
    background-color: var(--shaded-background-lighter);
    color: var(--default-color);
    padding-top: 6px;
    padding-left: 6px;
    white-space: nowrap;
}

.memory-instance-data-list-item .subtle {
    color: var(--header-color);
}

.settings-box {
    border-bottom-style: solid;
    border-bottom-width: 2px;
    border-bottom-color: var(--border-color);
}

.settings-title {
    margin-bottom: 10px;
    padding: 5px 5px;
}

.settings-area {
    padding-left: 5px;
    padding-bottom: 10px;
}

.settings-left {
    margin-left: 2em;
}

.settings-libraries {
    overflow-y: auto;
    overflow-x: hidden;
    height: 100px;
    width: 300px;
    border-style: solid;
    border-width: 2px;
    border-color: var(--border-color);
}

.settings-libraries-checkbox {
    vertical-align: text-bottom;
    margin: 3px 8px 5px 8px;
}

.settings-libraries-label {
    vertical-align: text-bottom;
    margin-top: 2px;
    font-weight: normal;
}

.filter-pattern-area {
    margin-bottom: 1em;
}

.filter-class {
    vertical-align: middle;
    height: 2.1em;
    background-color: var(--default-background);
    color: var(--default-color);
    width: 20em; /* Matches width of popup-view, see below. */
}

.setttings-options {
    margin-left: 2em;
    font-size: 10pt;
}

.setttings-options-2 {
    border-left: solid lightgray 1px;
    padding-left: 2em;
    margin-left: 2em;
    font-size: 10pt;
}

.settings-checkbox-option {
    vertical-align: text-bottom;
}

.settings-checkbox-label-option {
    margin-left: .5em;
    font-weight: normal;
}

.settings-buttons {
    margin-top: auto;
}

div.tabnav-tab {
    cursor: pointer;
}

[hidden] {
    visibility: hidden;
}

.btn-group .btn:first-child:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right-width: 0;
}

.btn-group .btn:not(:first-child):not(:last-child) {
    border-radius: 0;
}

.btn-group .btn+.btn {
    margin-left: -1px;
}

.btn-group .btn:last-child:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.form-select {
    cursor: pointer;
}

.form-select.button-bar-dropdown {
    background-color: var(--button-background);
    color: var(--default-button-text-color);
    display: inline-flex;
    align-items: center;
    height: 30px;
}

.form-select[disabled], .form-select[disabled]:hover {
    color: rgba(36,41,46,0.4);
    background-color: #eff3f6;
    cursor: default;
}

.form-select:hover {
    background-color: var(--button-selected-color);
}

input[type='checkbox'] {
    cursor: pointer;
}

/* To truly center an object in its parent, give the object a negative top margin of half its height.
 * See [centered-single-line-message] as an example (where the height of the single line is ~20px). */
.center-in-parent, .centered-single-line-message {
    width: 100%;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 0;
}

.centered-single-line-message {
    margin-top: -10px;
}

.spinner.centered {
    position: absolute;
    margin-top: -16px;
    margin-left: -16px;
    top: 50%;
    left: 50%;
}

.spinner {
    display: inline-block;
    width: 32px;
    height: 32px;
}

.spinner:after {
    content: " ";
    display: block;
    width: 23px;
    height: 23px;
    margin: 1px;
    border-radius: 50%;
    border: 3px solid var(--selected-background);
    border-color: var(--selected-background) transparent var(--selected-background) transparent;
    animation: spin 1.2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

nav.menu {
    margin-bottom: 0;
}

.counter {
  display: inline-block;
  padding: 2px 5px;
  font-size: 11px;
  font-weight: bold;
  color: var(--counter-color);
  background-color: var(--border-color);
  border-radius: 10px;
}

.menu-item .counter {
  float: right;
  margin-left: 5px;
}

nav.menu .menu-item {
    user-select: none;
    cursor: pointer;
}

nav.menu li {
    cursor: pointer;
    padding: 4px 10px;
}

.menu-item-bottom-border {
    border-bottom: 1px solid var(--menu-item-border);
}

.list-item {
    white-space: nowrap;
}

.strong-match {
    color: var(--default-color);
}

.list-item.subtle {
    color: var(--subtle);
}

.list-item .subtle {
    font-size: 90%;
    color: var(--subtle);
}

.list-item.selected {
    color: var(--light-text-color);
    background-color: var(--selected-background);
}

.list-item.selected .subtle {
    color: var(--subtle-selected);
}

.list-item.selected .strong-match {
    color: var(--match-color);
}

.tree-list {
    padding-left: 25px;
    list-style: none;
}

tr.selected .tree-toggle {
    color: var(--header-background);
}

.tree-toggle {
    width: 14px;
    font-size: 14px;
    display: inline-block;
    padding-bottom: 1px;
    color: var(--subtle);
    user-select: none;
    align-self: center;
}

.tree-toggle.octicon-triangle-right {
    padding-left: 2px;
}

/* We have to do something with the scrollbars as they flicker due to DOM
manipulation in our table and ViewportCanvas code.

Currently we overwrite the default to keep the scrollbars always visible
but a more subtle solution would be better. */

.custom-scrollbar ::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 9px;
    height: 9px;
}

.custom-scrollbar ::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: var(--default-color-thumb);
    box-shadow: 0 0 1px var(--default-background);
    opacity: 0.5;
}

::-webkit-scrollbar-corner {
    background: var(--default-background);
}

/* Make sure content inside buttons is vertically centered. */
.btn {
    display: inline-flex;
    align-items: center;
    height: 30px; /* Force height to 22px even when there's no text (2x3px padding + 2x1px margin) */
}

/* Increase line height so standard sized icons look ok in buttons. */
.btn-sm {
    line-height: 22px;
}

.btn-outline:hover .flutter-icon {
  filter: brightness(0) invert(1);
}

.toast {
    border: 1px solid var(--toast-border);
    border-radius: 3px;
    background: var(--toast-background);
    padding: 10px;
    box-shadow: 1px 1px 2px 0px var(--shadow-color);

    transition-property: left;
    transition-duration: 0.5s;
    position: relative;
    left: 400px;
}

.toast + .toast {
  margin-top: 10px;
}

#toast-container {
    width: 360px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 10;
}

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: normal;
    src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(packages/devtools/src/ui/MaterialIcons-Regular.woff2) format('woff2');
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;

    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;

    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;

    /* Support for IE. */
    font-feature-settings: 'liga';
}

html [full] {
    height: 100%;
    overflow: hidden;
}

.flash div {
    margin-left: auto;
    margin-right: auto;
}

.flash-close {
    line-height: 1.5;
}

#messages-container div+div {
    margin-top: 1em;
}

.action-button {
    border-radius: 50%;
    height: 28px;
    width: 28px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.action-button:hover {
    box-shadow: 0 2px 2px 0 var(--dark-shadow-color);
    background-color: rgba(var(--default-background-rgb), 0.1);
}

.action-button:active {
    box-shadow: 0 2px 2px 0 var(--dark-shadow-color);
    background-color: rgba(var(--default-background-rgb), 0.3);
}

.action-button[disabled] {
    box-shadow: none;
    background-color: rgba(var(--default-background-rgb), 0);
    opacity: 0.5;
}

.action-button .flutter-icon {
    margin: 2px;
}

.btn[disabled] .flutter-icon {
    opacity: 0.5;
}

.action-button+.action-button {
    margin-left: 8px;
}

#ga-dialog {
    background-color: var(--default-background);
    color: var(--default-color);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 20px;
}

#connect-dialog {
    display: none;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 20px;
}

#connect-dialog #uri-field {
    /* Override the max-width to take the button into account */
    max-width: calc(100% - 100px);
}

.masthead-item .octicon {
    top: 1px;
    position: relative;
    font-weight: bold;
}

span.strong {
    font-weight: bold;
}

/*
 * Support tagging elements with collapsible that can have children tagged
 * with optional-text to be hidden when the page is below a certain threshold.
 *
 * Also support optional directly on elements to be hidden.
 */

@media all and (max-width: 550px) { .optional-550 { display: none; } }
@media all and (max-width: 700px) { .optional-700 { display: none; } }
@media all and (max-width: 1000px) { .optional-1000 { display: none; } }
@media all and (max-width: 1060px) { .optional-1060 { display: none; } }

/*
 * Support tagging btn-groups with collapsible that can have children tagged
 * with optional-text to be hidden when the page is below a certain threshold.
 */

@media all and (max-width: 685px) {
    .btn-group.collapsible-685 .optional-text span:not(.octicon) {
        display: none;
    }

    .btn-group.collapsible-685 .btn .flutter-icon {
        margin-right: 0;
        box-sizing: content-box;
    }
}

@media all and (max-width: 750px) {
    .btn-group.collapsible-750 .optional-text span:not(.octicon) {
        display: none;
    }

    .btn-group.collapsible-750 .btn .flutter-icon {
        margin-right: 0;
        box-sizing: content-box;
    }
}

@media all and (max-width: 785px) {
    .btn-group.collapsible-785 .optional-text span:not(.octicon) {
        display: none;
    }

    .btn-group.collapsible-785 .btn .flutter-icon {
        margin-right: 0;
        box-sizing: content-box;
    }
}

@media all and (max-width: 800px) {
    .btn-group.collapsible-800 .optional-text span:not(.octicon) {
        display: none;
    }

    .btn-group.collapsible-800 .btn .flutter-icon {
        margin-right: 0;
        box-sizing: content-box;
    }
}

@media all and (max-width: 885px) {
    .btn-group.collapsible-885 .optional-text span:not(.octicon) {
        display: none;
    }

    .btn-group.collapsible-885 .btn .flutter-icon {
        margin-right: 0;
        box-sizing: content-box;
    }
}

@media all and (max-width: 1000px) {
    .btn-group.collapsible-1000 .optional-text span:not(.octicon) {
        display: none;
    }

    .btn-group.collapsible-1000 .btn .flutter-icon {
        margin-right: 0;
        box-sizing: content-box;
    }
}

@media all and (max-width: 1200px) {
    .btn-group.collapsible-1200 .optional-text span:not(.octicon) {
        display: none;
    }

    .btn-group.collapsible-1200 .btn .flutter-icon {
        margin-right: 0;
        box-sizing: content-box;
    }
}

@media all and (max-width: 1400px) {
    .btn-group.collapsible-1400 .optional-text span:not(.octicon) {
        display: none;
    }

    .btn-group.collapsible-1400 .btn .flutter-icon {
        margin-right: 0;
        box-sizing: content-box;
    }
}

/* Bidirectional splitters that change direction when window is wider/taller  */
.bidirectional {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}
@media (min-aspect-ratio: 1/1) {
    .bidirectional {
        flex-direction: row;
    }
}

.recording-instruction-container {
    margin-top: -22px; /* Negative top margin of half of the container height. */
}

.recording-instruction-message {
    justify-content: center;
}

.recording-status-message {
    margin-top: -34px; /* Full height of the text field plus padding for the spinner. */
}

.recording-spinner {
    margin-top: 0 !important;
}

.checkbox-container {
    justify-content: flex-end;
    align-items: center;
    margin-right: 6px;
}

.checkbox {
    margin-left: 6px;
    margin-right: 6px;
}

.checkbox-text {
    margin-bottom: 1px;
}

.inspector-tree-html {
  font: 14px arial;
  line-height: 22px;
}