.rightgutter {
  display: none;
}

.widget {
  position: relative;
  display: inline-block;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;
  margin-left: 4px;
  padding-left: 4px;
}

.widget.probe, .widget.slider {
  padding: 0;
  margin-bottom: -3px;
}

.widget.slider .probe-meta {
  padding-bottom: 2px;
}

.widget.slider .probe-example {
  padding-top: 1px;
  padding-bottom: 1px;
}

.widget.slider .status {
  white-space: nowrap;
}

.example-name {
  border-radius: 3px;
  padding-left: 4px;
  height: max-content;
  white-space: nowrap;
}

.probe-example .example-name {
  padding-right: 4px;
  height: 17px;
}

.widget.replacement {
  background-color: hsla(344, 54%, 63%, 0.2);
}

.widget.example, .widget.instance {
  background-color: #e8e8e8;
  border-bottom-left-radius: 0px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  width: max-content;
  display: flex;
}

.CodeMirror-linewidget:last-of-type > .widget.example,
.CodeMirror-linewidget:last-of-type > .widget.instance {
  border-bottom-left-radius: 3px;
}

.widget-line:last-of-type .probe-meta {
  border-bottom-left-radius: 3px;
}

.widget-line .probe-example {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

.widget input {
  background: transparent;
  border: none;
  font: inherit;
}

.marker {
  display: inline-block;
}

.marker.start {
  border-top-left-radius: 3px;
}

.marker.end {
  border-top-right-radius: 3px;
}

.marker.probe, .marker.slider {
  background-color: hsla(198, 69%, 67%, 0.4);
}

.marker.replacement {
  background-color: hsla(344, 54%, 63%, 0.2);
  text-decoration: line-through;
}

.marker.example, .marker.instance {
  background-color: #e8e8e8;
}

.marker.dead {
  opacity: 0.5;
}

.widget > table {
  border-collapse: collapse;
  border: none;
}

.widget > table > tr {
  vertical-align: top;
}

.widget > table td {
  padding: 0;
}

.widget > table td.probe-meta {
  padding-left: 4px;
  white-space: nowrap;
}

.widget > table td.probe-example {
  padding-right: 4px;
}

.probe-example {
  display: flex;
  width: max-content;
}

.probe-meta, .probe-example {
  background-color: hsla(198, 69%, 67%, 0.4);
}

.probe-value {
  display: flex;
}

.probe-value .old-value {
  text-decoration: line-through;
}

.probe-value .run {
  border-right: 1px solid rgba(0, 0, 0, 0.6);
  margin-right: 1ch;
  padding-right: 1ch;
  padding-bottom: 2px;
  cursor: pointer;
}

.probe-value .run:last-of-type {
  border-right: none;
  margin-right: 0;
}

.probe-value .run.noexec {
  cursor: inherit !important;
  color: #666;
}

.probe-value canvas {
  height: 100px;
}

.object {
  display: flex;
}

.object .properties {
  display: flex;
  flex-direction: row;
}

.object .properties::before {
  content: "{";
  color: rgba(0, 0, 0, 0.6);
}

.object .properties::after {
  content: "}";
  color: rgba(0, 0, 0, 0.6);
}

.object .key::after {
  content: ":";
  color: rgba(0, 0, 0, 0.6);
}

.object .property .new-value::after {
  content: ", ";
  white-space: pre;
  color: rgba(0, 0, 0, 0.6);
}

.object .property:last-of-type .new-value::after {
  content: "";
  color: rgba(0, 0, 0, 0.6);
}

.id-name::after {
  content: ":";
  color: rgba(0, 0, 0, 0.6);
}

.array:last-of-type {
  padding-right: 0;
}

.array::before {
  content: "[";
  color: rgba(0, 0, 0, 0.6);
}

.array::after {
  content: "]";
  color: rgba(0, 0, 0, 0.6);
}

.array .new-value::after {
  content: ", ";
  white-space: pre;
  color: rgba(0, 0, 0, 0.6);
}

.array .new-value:last-of-type::after {
  content: "";
}

.slider-input {
  width: 200px;
}

.buttons {
  padding-top: 2px;
}

.icon {
  font-family: "FontAwesome";
  display: inline-block;
  cursor: pointer;
  opacity: 0.8;
  min-width: 1em;
  text-align: center;
}

.delete-button {
  color: maroon;
}

.delete-button::before {
  content: "\f00d"
}

.widget.probe .delete-button, .widget.probe .delete-button {
  padding-right: 2px;
}

.space-before {
  margin-left: 1ch;
}

.space-before {
  margin-left: 1ch;
}

.space-after {
  margin-right: 1ch;
}

.icon.on {
  color: blue;
}

.switch-button.on::before {
  content: "\f205";
}

.switch-button.off::before {
  content: "\f204";
}

.emoji {
  display: inline-block;
  width: 2ch;
  margin-top: -3px;
  height: 18px;
}

.input-field {
  border: 1px solid rgba(0, 0, 0, 0.6);
  border-radius: 3px;
  display: inline-block;
}

.connector {
  opacity: 0.8;
  color: black;
  padding-right: 2px;
}

.connector.broken {
  color: maroon !important;
  opacity: 1 !important;
}

.connector::before {
  content: "\f0c1";
}

.input-field select {
  border:none;
  border-radius: 0;
  font: inherit;
  background: transparent;
  width: 15px;
}

.input-field.select select {
  color: blue;
}

.widget input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  background: transparent;
}

.widget input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 12px;
  width: 4px;
  border-radius: 2px;
  background: #333;
  margin-top: -4px;
}

.widget input[type=range]:focus {
  outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  background: #999;
  border-radius: 2px;
}

.inspector {
  padding-top: 1px;
}

.inspector::before {
  content: "\f002";
  opacity: 0.8;
}

.icon.expand::before {
  content: "\f141";
}

.expanded .icon.expand::before {
  content: "\f142";
}

.form {
  display: flex;
  flex-direction: row;
}

.expanded .form {
  flex-direction: column;
}

.icon.warn {
  color: rgb(151, 45, 46);
}

.icon.warn::before {
  content: "\f071";
}

.icon.exchange::before {
  content: "\f0ec";
}

.icon.object-group::before {
  content: "\f247";
}