button {
  font-family: "SpaceMono";
  border-radius: 0.5em !important;
  display: inline-flex;
  outline: none;
  border-width: 0em;
  flex: 0 0 1.75em !important;
  box-sizing: border-box;
  white-space: nowrap;
}
button:hover:not(:disabled) {
  color: #f3f3f3;
}
button:focus-visible:not(:disabled) {
  outline: none !important;
  box-shadow: inset 0 0 0 0.125em #3b82f6 !important;
  color: #f3f3f3;
}
button:disabled {
  color: colors-ui-text-disabled-default !important;
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}
[class*="ct-button-lg-"] {
  padding: 0.75em 0.875em 0.75em 0.875em;
}
[class*="ct-button-md-"] {
  padding: 0.5em 0.75em 0.5em 0.75em;
}
[class*="ct-button-sm-"] {
  padding: 0.25em 0.625em 0.25em 0.625em;
}
[class*="-button-"][class*="-primary"] {
  background-color: #4f46e5;
  color: #f3f3f3;
}
[class*="-button-"][class*="-primary"]:hover {
  background-color: #4338ca !important;
}
[class*="-button-"][class*="-tertiary"] {
  background-color: #333;
  color: #b4b4b4;
}
[class*="-button-"][class*="-tertiary"]:disabled {
  border: 0.03125em solid #333;
}
[class*="-button-"][class*="-primary"]:hover,
[class*="-button-"][class*="-tertiary"]:hover {
  background-color: #414141;
}
[class*="-button-"][class*="-primary"]:disabled,
[class*="-button-"][class*="-tertiary"]:disabled {
  background-color: #282828;
}
[class*="-button-"][class*="-secondary"] {
  background-color: #1b1b1b;
  border: 0.03125em solid #565656;
  color: #b4b4b4;
}
[class*="-button-"][class*="-secondary"]:hover {
  background-color: #262626;
}
[class*="-button-"][class*="-secondary"]:focus-visible:not(:disabled) {
  background-color: #282828;
}
[class*="ct-button-sm-secondary"] {
  border: 0em !important;
}
[class*="ct-button-image-"] {
  background-position: center;
  background-size: auto 1em !important;
  background-repeat: no-repeat;
  border-radius: 0.375em !important;
}
[class*="ct-button-image-lg-"] {
  width: 2em;
  max-width: 2em;
  height: 2em;
  max-height: 2em;
}
[class*="ct-button-image-md-"] {
  width: 1.75em;
  max-width: 1.75em;
  height: 1.75em;
  max-height: 1.75em;
}
[class*="ct-button-image-sm-"] {
  width: 1.25em;
  max-width: 1.25em;
  height: 1.25em;
  max-height: 1.25em;
}
[class*="ct-button-image-xs-"] {
  width: 1em;
  max-width: 1em;
  height: 1em;
  max-height: 1em;
}
#next-image {
  background-image: url("../../public/resources/debug/next_dark.svg");
}
#reverse-next-image {
  background-image: url("../../public/resources/debug/reverse_next_dark.svg");
}
#step-in-image {
  background-image: url("../../public/resources/debug/step-in_dark.svg");
}
#reverse-step-in-image {
  background-image: url("../../public/resources/debug/reverse_step-in_dark.svg");
}
#step-out-image {
  background-image: url("../../public/resources/debug/step-out_dark.svg");
}
#reverse-step-out-image {
  background-image: url("../../public/resources/debug/reverse_step-out_dark.svg");
}
#continue-image {
  background-image: url("../../public/resources/debug/continue_dark.svg");
}
#reverse-continue-image {
  background-image: url("../../public/resources/debug/reverse_continue_dark.svg");
}
#reset-operation-image {
  background-image: url("../../public/resources/debug/reset_operation_dark.svg");
}
#reset-operation-loading-image {
  background-image: url("../../public/resources/debug/pause_ongoing_16.gif");
}
#stop-image {
  background-image: url("../../public/resources/debug/stop_16_dark.svg");
}
#jump-before-image {
  background-image: url("../../public/resources/debug/jump-before_16_dark.svg");
}
#jump-after-image {
  background-image: url("../../public/resources/debug/jump-after_16_dark.svg");
}
#run-to-entry-image {
  background-image: url("../../public/resources/debug/run_to_entry_dark.svg");
}
#run-tests-image,
#jump-to-live-debug {
  background-image: url("../../public/resources/shared/run_test_img.svg");
}
#run-tests-loading-image {
  background-image: url("../../public/resources/shared/rerecord_animation.svg");
}
#history-back-image {
  background-image: url("../../public/resources/debug/history_back_black.svg");
}
#history-forward-image {
  background-image: url("../../public/resources/debug/history_forward_black.svg");
}
#copy-path-image {
  background-image: url("../../public/resources/menu/copy_file_path_dark.svg");
}
#category-image {
  background-image: url("../../public/resources/window/layout_nested_button_dark.svg");
  background-size: 1em auto !important;
}
#category-image.open {
  background-color: #242424;
  box-shadow: inset 0 0 0 0.0625em #6366f1 !important;
}
#close-element {
  background-image: url("../../public/resources/shared/close_button_dark.svg");
  background-size: 0.5em 0.5em !important;
}
#backward-loop {
  background-image: url("../../public/resources/shared/omniscience_backward_dark.svg");
  background-size: 0.5em !important;
  z-index: 10;
  height: 1.3em !important;
  width: 1.3em !important;
  max-width: 1.3em !important;
  max-height: 1.3em !important;
}
#forward-loop {
  background-image: url("../../public/resources/shared/omniscience_forward_dark.svg");
  background-size: 0.5em !important;
  z-index: 10;
  height: 1.3em !important;
  width: 1.3em !important;
  max-width: 1.3em !important;
  max-height: 1.3em !important;
}
#trace-run-button {
  background-image: url("../../public/resources/tracepoints/run_tracepoints_dark.svg");
  background-size: 1.75em 1.75em !important;
  z-index: 100;
}
#hamburger-dropdown {
  background-image: url("../../public/resources/tracepoints/trace_hamburger_dark.svg");
  z-index: 100;
}
.value-history-button {
  background-image: url("../../public/resources/shared/history_value_view_toggle_dark.svg");
  background-size: auto 0.5em !important;
}
.value-history-button:hover > .custom-tooltip {
  opacity: 1;
  visibility: visible;
  transition-delay: 0.2s;
}
.value-history-button .custom-tooltip {
  top: -30%;
  left: 120%;
}
.value-history-button .custom-tooltip:after {
  content: '';
  position: absolute;
  left: -0.875em;
  top: 20%;
  border-width: 0.5em;
  border-style: solid;
  border-color: transparent #1b1b1b transparent transparent;
}
.ct-button-no-border {
  border: none !important;
}
.custom-tooltip {
  display: block;
  position: absolute;
  font-family: "SpaceGrotesk";
  top: 100%;
  background-color: #1b1b1b;
  color: #f3f3f3;
  padding: 0.3125em 0.625em;
  font-size: 0.75em;
  border-radius: 0.25em;
  white-space: nowrap;
  box-shadow: 0 0.25em 0.5em rgba(0,0,0,0.2);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease, top 0.3s ease;
  pointer-events: none;
  text-align: start;
  line-height: 1em;
}
.custom-tooltip.active {
  opacity: 1;
  visibility: visible;
  top: -100%;
  height: 1.5em;
  right: 0.25em;
}
.custom-tooltip.active:after {
  content: '';
  position: absolute;
  top: 100%;
  left: unset;
  right: 0.25em;
  border-width: 0.5em;
  border-style: solid;
  border-color: #1b1b1b transparent transparent transparent;
}
.custom-tooltip:after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: calc(50% - 0.5em);
  border-width: 0.5em;
  border-style: solid;
  border-color: transparent transparent #1b1b1b transparent;
}
[class*="ct-button-image-"]:hover > .custom-tooltip {
  opacity: 1;
  visibility: visible;
  top: calc(100% + 0.3125em);
  transition-delay: 0.2s;
}
.ct-origin-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2em 0.5em;
  gap: 0.25em;
  border-radius: 0.375em !important;
  font-family: inherit;
  font-size: 0.75em;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  vertical-align: middle;
  margin-left: 0.5em;
  background-color: #1b1b1b;
  border: 0.03125em solid #565656;
  color: #b4b4b4;
}
.ct-origin-badge:hover {
  background-color: #262626;
  border-color: #3a3a3a;
}
.ct-origin-badge:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.125em #3b82f6;
}
.ct-origin-badge .ct-origin-badge-icon {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex: 0 0 auto;
}
.ct-origin-badge .ct-origin-badge-text {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ct-origin-badge.ct-origin-badge-icon-only {
  padding: 0.125em;
  border-radius: 0.375em !important;
  width: 1.25em;
  height: 1.25em;
}
.ct-origin-badge.ct-origin-badge-icon-only .ct-origin-badge-text {
  display: none;
}
.ct-origin-badge.ct-origin-badge-placeholder {
  border-style: dashed;
  background-color: transparent;
  color: #b4b4b4;
  padding: 0.2em 0.5em;
}
.ct-origin-badge.ct-origin-badge-placeholder .ct-origin-badge-icon {
  display: none;
}
.ct-origin-icon-sigma .ct-origin-badge-icon {
  background-image: url("../../../public/resources/origin-icons/sigma.svg");
}
.ct-origin-icon-quotation .ct-origin-badge-icon {
  background-image: url("../../../public/resources/origin-icons/quotation.svg");
}
.ct-origin-icon-door .ct-origin-badge-icon {
  background-image: url("../../../public/resources/origin-icons/door.svg");
}
.ct-origin-icon-globe .ct-origin-badge-icon {
  background-image: url("../../../public/resources/origin-icons/globe.svg");
}
.ct-origin-icon-clock-rewind .ct-origin-badge-icon {
  background-image: url("../../../public/resources/origin-icons/clock-rewind.svg");
}
.ct-origin-icon-question .ct-origin-badge-icon {
  background-image: url("../../../public/resources/origin-icons/question.svg");
}
.ct-origin-icon-hourglass .ct-origin-badge-icon {
  background-image: url("../../../public/resources/origin-icons/hourglass.svg");
}
@font-face {
  font-family: "SpaceGrotesk";
  font-weight: 300;
  font-style: normal;
  src: url("../../../../libs/codetracer-design-system/SpaceGrotesk_Complete/Fonts/WEB/fonts/SpaceGrotesk-Light.woff2") format('woff2'), url("../../../../libs/codetracer-design-system/SpaceGrotesk_Complete/Fonts/WEB/fonts/SpaceGrotesk-Light.ttf") format('truetype');
}
@font-face {
  font-family: "SpaceGrotesk";
  font-weight: 400;
  font-style: normal;
  src: url("../../../../libs/codetracer-design-system/SpaceGrotesk_Complete/Fonts/WEB/fonts/SpaceGrotesk-Regular.woff2") format('woff2'), url("../../../../libs/codetracer-design-system/SpaceGrotesk_Complete/Fonts/WEB/fonts/SpaceGrotesk-Regular.ttf") format('truetype');
}
@font-face {
  font-family: "SpaceGrotesk";
  font-weight: 500;
  font-style: normal;
  src: url("../../../../libs/codetracer-design-system/SpaceGrotesk_Complete/Fonts/WEB/fonts/SpaceGrotesk-Medium.woff2") format('woff2'), url("../../../../libs/codetracer-design-system/SpaceGrotesk_Complete/Fonts/WEB/fonts/SpaceGrotesk-Medium.ttf") format('truetype');
}
@font-face {
  font-family: "SpaceGrotesk";
  font-weight: 600;
  font-style: normal;
  src: url("../../../../libs/codetracer-design-system/SpaceGrotesk_Complete/Fonts/WEB/fonts/SpaceGrotesk-SemiBold.woff2") format('woff2'), url("../../../../libs/codetracer-design-system/SpaceGrotesk_Complete/Fonts/WEB/fonts/SpaceGrotesk-SemiBold.ttf") format('truetype');
}
@font-face {
  font-family: "SpaceGrotesk";
  font-weight: 700;
  font-style: normal;
  src: url("../../../../libs/codetracer-design-system/SpaceGrotesk_Complete/Fonts/WEB/fonts/SpaceGrotesk-Bold.woff2") format('woff2'), url("../../../../libs/codetracer-design-system/SpaceGrotesk_Complete/Fonts/WEB/fonts/SpaceGrotesk-Bold.ttf") format('truetype');
}
@font-face {
  font-family: "SpaceMono";
  font-weight: 400;
  font-style: normal;
  src: url("../../../../libs/codetracer-design-system/SpaceGrotesk_Complete/Fonts/Space_Mono/SpaceMono-Regular.ttf") format('truetype');
}
@font-face {
  font-family: "SpaceMono";
  font-weight: 700;
  font-style: normal;
  src: url("../../../../libs/codetracer-design-system/SpaceGrotesk_Complete/Fonts/Space_Mono/SpaceMono-Bold.ttf") format('truetype');
}
@font-face {
  font-family: "SpaceMono";
  font-weight: 400;
  font-style: italic;
  src: url("../../../../libs/codetracer-design-system/SpaceGrotesk_Complete/Fonts/Space_Mono/SpaceMono-Italic.ttf") format('truetype');
}
@font-face {
  font-family: "SpaceMono";
  font-weight: 700;
  font-style: italic;
  src: url("../../../../libs/codetracer-design-system/SpaceGrotesk_Complete/Fonts/Space_Mono/SpaceMono-BoldItalic.ttf") format('truetype');
}
@font-face {
  font-family: "FiraMono";
  font-weight: 400;
  font-style: normal;
  src: url("../../../../libs/codetracer-design-system/Fira_Mono/FiraMono-Regular.ttf") format('truetype');
}
@font-face {
  font-family: "FiraMono";
  font-weight: 500;
  font-style: normal;
  src: url("../../../../libs/codetracer-design-system/Fira_Mono/FiraMono-Medium.ttf") format('truetype');
}
@font-face {
  font-family: "FiraMono";
  font-weight: 700;
  font-style: normal;
  src: url("../../../../libs/codetracer-design-system/Fira_Mono/FiraMono-Bold.ttf") format('truetype');
}
input {
  font-family: "SpaceGrotesk" !important;
  font-size: 0.875rem !important;
  padding: 0.25em 0.75em 0.25em 0.75em;
  outline: none;
  color: #c8c8c8 !important;
}
input:hover {
  color: #f3f3f3 !important;
}
input:focus {
  outline: none !important;
}
input:focus-visible {
  outline: none !important;
  box-shadow: inset 0 0 0 0.125rem #3b82f6 !important;
  color: #f3f3f3 !important;
}
input:not(:placeholder-shown):not(:disabled) {
  border-color: #6366f1;
  background: #242424;
  color: #f3f3f3 !important;
}
input:disabled {
  border: 0.03125rem solid #333;
  background: #282828;
  color: colors-ui-text-disabled-default !important;
  pointer-events: none;
  cursor: not-allowed;
}
input::placeholder {
  color: colors-ui-text-default-placeholder;
}
input:hover::placeholder,
input:focus-visible::placeholder,
input:not(:placeholder-shown):not(:disabled)::placeholder {
  color: #f3f3f3;
}
input:disabled::placeholder {
  color: colors-ui-text-disabled-default !important;
}
.ct-input-search-image {
  padding-left: 1.875em !important;
  background-image: url("../../public/resources/shared/input_empty_search_icon_dark.svg") !important;
  background-repeat: no-repeat !important;
  background-position: 0.5em center !important;
  background-size: 1em !important;
}
.ct-input-search-image:hover,
.ct-input-search-image:focus-visible,
.ct-input-search-image:not(:placeholder-shown):not(:disabled) {
  background-image: url("../../public/resources/shared/input_default_search_icon_dark.svg") !important;
}
.ct-input-search-image:disabled {
  background-image: url("../../public/resources/shared/input_disabled_search_icon_dark.svg") !important;
}
.ct-input-form {
  height: 2.25rem;
  max-height: 2.25rem;
  border-radius: 0.375rem;
  background: #282828;
  border: 0.03125rem solid #282828;
}
.ct-input-form:hover {
  border-color: #818181;
}
.ct-input-com-pal {
  height: 1.75rem;
  max-height: 1.75rem;
  width: -webkit-fill-available;
  max-width: -webkit-fill-available;
  border-radius: 0.375rem;
  border: 0.03125rem solid #565656;
  background: #282828;
}
.ct-input-com-pal:hover {
  border-color: #818181;
  color: #f3f3f3;
}
.ct-input-small,
.ct-input-panel {
  border-radius: 0.375rem;
  background: #1b1b1b;
}
.ct-input-small:hover,
.ct-input-panel:hover {
  border: 0.03125rem solid #1b1b1b;
  border-color: #818181;
  color: #f3f3f3;
}
.ct-input-small {
  height: 1.5rem;
  max-height: 1.75rem;
  border: 0.03125em solid transparent;
}
.ct-input-panel {
  width: -webkit-fill-available;
  height: 1.75rem;
  max-height: 1.75rem;
  border: 0.03125em solid transparent;
}
.ct-fill-available {
  width: -webkit-fill-available;
  max-width: -webkit-fill-available;
}
.ct-flex {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0em 0.25em 0.25em 0.25em;
  flex-shrink: 0 !important;
  box-sizing: border-box;
  flex: 0 0 1.75em;
  gap: 0.25em;
}
[class*="ct-gap-"] {
  display: flex;
}
.ct-m-0 {
  margin: 0em;
}
.ct-mx-0 {
  margin-left: 0em;
  margin-right: 0em;
}
.ct-my-0 {
  margin-top: 0em;
  margin-bottom: 0em;
}
.ct-mt-0 {
  margin-top: 0em;
}
.ct-mb-0 {
  margin-bottom: 0em;
}
.ct-ml-0 {
  margin-left: 0em;
}
.ct-mr-0 {
  margin-right: 0em;
}
.ct-m-1 {
  margin: 0.25em;
}
.ct-mx-1 {
  margin-left: 0.25em;
  margin-right: 0.25em;
}
.ct-my-1 {
  margin-top: 0.25em;
  margin-bottom: 0.25em;
}
.ct-mt-1 {
  margin-top: 0.25em;
}
.ct-mb-1 {
  margin-bottom: 0.25em;
}
.ct-ml-1 {
  margin-left: 0.25em;
}
.ct-mr-1 {
  margin-right: 0.25em;
}
.ct-m-2 {
  margin: 0.5em;
}
.ct-mx-2 {
  margin-left: 0.5em;
  margin-right: 0.5em;
}
.ct-my-2 {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.ct-mt-2 {
  margin-top: 0.5em;
}
.ct-mb-2 {
  margin-bottom: 0.5em;
}
.ct-ml-2 {
  margin-left: 0.5em;
}
.ct-mr-2 {
  margin-right: 0.5em;
}
.ct-m-4 {
  margin: 1em;
}
.ct-mx-4 {
  margin-left: 1em;
  margin-right: 1em;
}
.ct-my-4 {
  margin-top: 1em;
  margin-bottom: 1em;
}
.ct-mt-4 {
  margin-top: 1em;
}
.ct-mb-4 {
  margin-bottom: 1em;
}
.ct-ml-4 {
  margin-left: 1em;
}
.ct-mr-4 {
  margin-right: 1em;
}
.ct-m-6 {
  margin: 1.5em;
}
.ct-mx-6 {
  margin-left: 1.5em;
  margin-right: 1.5em;
}
.ct-my-6 {
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}
.ct-mt-6 {
  margin-top: 1.5em;
}
.ct-mb-6 {
  margin-bottom: 1.5em;
}
.ct-ml-6 {
  margin-left: 1.5em;
}
.ct-mr-6 {
  margin-right: 1.5em;
}
.ct-m-8 {
  margin: 2em;
}
.ct-mx-8 {
  margin-left: 2em;
  margin-right: 2em;
}
.ct-my-8 {
  margin-top: 2em;
  margin-bottom: 2em;
}
.ct-mt-8 {
  margin-top: 2em;
}
.ct-mb-8 {
  margin-bottom: 2em;
}
.ct-ml-8 {
  margin-left: 2em;
}
.ct-mr-8 {
  margin-right: 2em;
}
.ct-p-0 {
  padding: 0em;
}
.ct-px-0 {
  padding-left: 0em;
  padding-right: 0em;
}
.ct-py-0 {
  padding-top: 0em;
  padding-bottom: 0em;
}
.ct-pt-0 {
  padding-top: 0em;
}
.ct-pb-0 {
  padding-bottom: 0em;
}
.ct-pl-0 {
  padding-left: 0em;
}
.ct-pr-0 {
  padding-right: 0em;
}
.ct-p-1 {
  padding: 0.25em;
}
.ct-px-1 {
  padding-left: 0.25em;
  padding-right: 0.25em;
}
.ct-py-1 {
  padding-top: 0.25em;
  padding-bottom: 0.25em;
}
.ct-pt-1 {
  padding-top: 0.25em;
}
.ct-pb-1 {
  padding-bottom: 0.25em;
}
.ct-pl-1 {
  padding-left: 0.25em;
}
.ct-pr-1 {
  padding-right: 0.25em;
}
.ct-p-2 {
  padding: 0.5em;
}
.ct-px-2 {
  padding-left: 0.5em;
  padding-right: 0.5em;
}
.ct-py-2 {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}
.ct-pt-2 {
  padding-top: 0.5em;
}
.ct-pb-2 {
  padding-bottom: 0.5em;
}
.ct-pl-2 {
  padding-left: 0.5em;
}
.ct-pr-2 {
  padding-right: 0.5em;
}
.ct-p-4 {
  padding: 1em;
}
.ct-px-4 {
  padding-left: 1em;
  padding-right: 1em;
}
.ct-py-4 {
  padding-top: 1em;
  padding-bottom: 1em;
}
.ct-pt-4 {
  padding-top: 1em;
}
.ct-pb-4 {
  padding-bottom: 1em;
}
.ct-pl-4 {
  padding-left: 1em;
}
.ct-pr-4 {
  padding-right: 1em;
}
.ct-p-6 {
  padding: 1.5em;
}
.ct-px-6 {
  padding-left: 1.5em;
  padding-right: 1.5em;
}
.ct-py-6 {
  padding-top: 1.5em;
  padding-bottom: 1.5em;
}
.ct-pt-6 {
  padding-top: 1.5em;
}
.ct-pb-6 {
  padding-bottom: 1.5em;
}
.ct-pl-6 {
  padding-left: 1.5em;
}
.ct-pr-6 {
  padding-right: 1.5em;
}
.ct-p-8 {
  padding: 2em;
}
.ct-px-8 {
  padding-left: 2em;
  padding-right: 2em;
}
.ct-py-8 {
  padding-top: 2em;
  padding-bottom: 2em;
}
.ct-pt-8 {
  padding-top: 2em;
}
.ct-pb-8 {
  padding-bottom: 2em;
}
.ct-pl-8 {
  padding-left: 2em;
}
.ct-pr-8 {
  padding-right: 2em;
}
.ct-gap-2 {
  gap: 0.5em;
}
.ct-gap-4 {
  gap: 1em;
}
.ct-gap-6 {
  gap: 1.5em;
}
.ct-gap-8 {
  gap: 2em;
}
.ct-omni-value {
  font-family: "SpaceMono";
  border-radius: 0.25em;
  padding: 0.25em 0.5em;
  background: #1b1b1b;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.5em;
}
.ct-omni-name {
  color: #919191;
}
.ct-omni-name-std {
  color: #67e8f9;
}
.ct-omni-name-error {
  color: #f87171;
}
[class*="ct-omni-name"] {
  margin-right: 0.5em;
}
.ct-checkmark {
  --ct-checkmark-size: 1.5em;
  --ct-checkmark-radius: 0.25em;
  --ct-checkmark-border-width: 0.0625em;
  --ct-checkmark-icon-stroke: 0.125em;
  --ct-checkmark-check-width: 0.625em;
  --ct-checkmark-check-height: 0.375em;
  --ct-checkmark-minus-width: 0.625em;
  --ct-checkmark-minus-height: 0.125em;
  --ct-checkmark-bg: transparent;
  --ct-checkmark-bg-hover: rgba(255,255,255,0.03);
  --ct-checkmark-bg-disabled: rgba(255,255,255,0.08);
  --ct-checkmark-border: rgba(255,255,255,0.28);
  --ct-checkmark-border-hover: rgba(255,255,255,0.42);
  --ct-checkmark-border-focus: #2f81ff;
  --ct-checkmark-border-error: #f2a0a6;
  --ct-checkmark-border-disabled: transparent;
  --ct-checkmark-icon: #f5f5f5;
  --ct-checkmark-icon-disabled: rgba(255,255,255,0.38);
  --ct-checkmark-icon-error: #f7b0b4;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--ct-checkmark-size);
  block-size: var(--ct-checkmark-size);
  min-inline-size: var(--ct-checkmark-size);
  min-block-size: var(--ct-checkmark-size);
  flex: 0 0 var(--ct-checkmark-size);
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: var(--ct-checkmark-border-width) solid var(--ct-checkmark-border);
  border-radius: var(--ct-checkmark-radius);
  background: var(--ct-checkmark-bg);
  vertical-align: middle;
  pointer-events: none;
  transition: background-color 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, opacity 0.14s ease;
}
.ct-checkmark::before {
  content: '';
  position: absolute;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 0.14s ease, border-color 0.14s ease, background-color 0.14s ease, transform 0.14s ease;
}
.ct-checkmark[data-state="checked"]::before {
  inline-size: var(--ct-checkmark-check-width);
  block-size: var(--ct-checkmark-check-height);
  border-left: var(--ct-checkmark-icon-stroke) solid var(--ct-checkmark-icon);
  border-bottom: var(--ct-checkmark-icon-stroke) solid var(--ct-checkmark-icon);
  transform: translateY(-0.0625em) rotate(-45deg);
  opacity: 1;
}
.ct-checkmark[data-state="indeterminate"]::before {
  inline-size: var(--ct-checkmark-minus-width);
  block-size: var(--ct-checkmark-minus-height);
  border-radius: 999em;
  background: var(--ct-checkmark-icon);
  opacity: 1;
}
.ct-checkmark[data-error="true"] {
  border-color: var(--ct-checkmark-border-error);
}
.ct-checkmark[data-error="true"][data-state="checked"]::before {
  border-left-color: var(--ct-checkmark-icon-error);
  border-bottom-color: var(--ct-checkmark-icon-error);
}
.ct-checkmark[data-error="true"][data-state="indeterminate"]::before {
  background: var(--ct-checkmark-icon-error);
}
.ct-checkmark[data-size="sm"] {
  --ct-checkmark-size: 1.25em;
  --ct-checkmark-check-width: 0.5em;
  --ct-checkmark-check-height: 0.3125em;
  --ct-checkmark-minus-width: 0.5em;
}
.ct-checkmark[data-size="md"] {
  --ct-checkmark-size: 1.5em;
}
.ct-checkmark[data-size="lg"] {
  --ct-checkmark-size: 1.75em;
  --ct-checkmark-check-width: 0.75em;
  --ct-checkmark-check-height: 0.4375em;
  --ct-checkmark-minus-width: 0.75em;
}
.ct-checkmark-field {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  cursor: pointer;
  user-select: none;
  margin-bottom: 0em !important;
  padding-top: 0.25em;
  padding-bottom: 0.25em;
}
.ct-checkmark-field[data-disabled="true"] {
  cursor: not-allowed;
}
.ct-checkmark-input {
  position: absolute;
  opacity: 0;
  inline-size: 0.0625em;
  block-size: 0.0625em;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.ct-checkmark-label {
  font: inherit;
  color: inherit;
  line-height: 1.2;
}
.ct-checkmark-input:hover + .ct-checkmark,
.ct-checkmark-field:hover .ct-checkmark {
  background: var(--ct-checkmark-bg-hover);
  border-color: var(--ct-checkmark-border-hover);
}
.ct-checkmark-input:focus-visible + .ct-checkmark {
  border-color: var(--ct-checkmark-border-focus);
  box-shadow: 0 0 0 0.0625em rgba(47,129,255,0.18);
}
.ct-checkmark-input:disabled + .ct-checkmark,
.ct-checkmark-field[data-disabled="true"] .ct-checkmark {
  background: var(--ct-checkmark-bg-disabled);
  border-color: var(--ct-checkmark-border-disabled);
}
.ct-checkmark-input:disabled + .ct-checkmark[data-state="checked"]::before,
.ct-checkmark-field[data-disabled="true"] .ct-checkmark[data-state="checked"]::before {
  border-left-color: var(--ct-checkmark-icon-disabled);
  border-bottom-color: var(--ct-checkmark-icon-disabled);
}
.ct-checkmark-input:disabled + .ct-checkmark[data-state="indeterminate"]::before,
.ct-checkmark-field[data-disabled="true"] .ct-checkmark[data-state="indeterminate"]::before {
  background: var(--ct-checkmark-icon-disabled);
}
.ct-toggle {
  --ct-toggle-width: 2.5em;
  --ct-toggle-height: 1.375em;
  --ct-toggle-thumb-size: 1.125em;
  --ct-toggle-thumb-gap: 0.125em;
  --ct-toggle-track: rgba(255,255,255,0.12);
  --ct-toggle-track-hover: rgba(255,255,255,0.2);
  --ct-toggle-track-on: #4f46e5;
  --ct-toggle-track-on-hover: #4338ca;
  --ct-toggle-thumb-color: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  width: var(--ct-toggle-width);
  height: var(--ct-toggle-height);
  border-radius: 999em;
  background: var(--ct-toggle-track);
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
  vertical-align: middle;
  transition: background 150ms ease, box-shadow 150ms ease;
}
.ct-toggle[data-size="sm"] {
  --ct-toggle-width: 2em;
  --ct-toggle-height: 1.125em;
  --ct-toggle-thumb-size: 0.875em;
}
.ct-toggle[data-checked="true"] {
  background: var(--ct-toggle-track-on);
}
.ct-toggle[data-checked="true"] .ct-toggle-thumb {
  transform: translateX(calc(var(--ct-toggle-width) - var(--ct-toggle-thumb-size) - calc(var(--ct-toggle-thumb-gap) * 2)));
}
.ct-toggle:hover {
  background: var(--ct-toggle-track-hover);
}
.ct-toggle[data-checked="true"]:hover {
  background: var(--ct-toggle-track-on-hover);
}
.ct-toggle:focus-within {
  box-shadow: 0 0 0 0.125em #3b82f6;
}
.ct-toggle-thumb {
  position: absolute;
  left: var(--ct-toggle-thumb-gap);
  width: var(--ct-toggle-thumb-size);
  height: var(--ct-toggle-thumb-size);
  border-radius: 50%;
  background: var(--ct-toggle-thumb-color);
  box-shadow: 0 0.0625em 0.25em rgba(0,0,0,0.3);
  transition: transform 150ms ease;
  pointer-events: none;
}
.ct-toggle-input {
  position: absolute;
  opacity: 0;
  inline-size: 0.0625em;
  block-size: 0.0625em;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  pointer-events: none;
}
.ct-toggle-field {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  cursor: pointer;
  user-select: none;
}
.ct-toggle-field[data-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
}
.ct-toggle-label {
  font-family: "SpaceGrotesk";
  font-size: 0.75em;
  text-transform: uppercase;
  color: #b4b4b4;
  user-select: none;
  white-space: nowrap;
}
.ct-menu-item {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0 0.5em;
  height: 2.25rem;
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
  user-select: none;
  background: #161616;
  color: #f3f3f3;
  font-family: "SpaceGrotesk";
  font-size: inherit;
  line-height: 1.25em;
  border: none;
  border-radius: 0;
  outline: none;
  text-align: start;
  transition: background-color 0.12s ease;
}
.ct-menu-item .ct-menu-item-icon {
  flex: 0 0 1em;
  width: 1em;
  height: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ddd;
}
.ct-menu-item .ct-menu-item-label {
  font-size: 0.875em;
  font-weight: 400;
  color: #f3f3f3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ct-menu-item .ct-menu-item-sublabel {
  font-size: 0.875em;
  color: #b4b4b4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ct-menu-item .ct-menu-item-trailing {
  margin-left: auto;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0.5em;
  height: 0.75em;
  background-image: url("data:image/svg+xml,%3Csvg width='5' height='9' viewBox='0 0 5 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.353516 8.35352L4.35352 4.35352L0.353515 0.353516' stroke='%23DDDDDD' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.ct-menu-item:hover:not(.ct-menu-item--disabled) {
  background: #262626;
}
.ct-menu-item.ct-menu-item--active:not(.ct-menu-item--disabled) {
  outline: none;
  background: #3b82f6;
}
.ct-menu-item.ct-menu-item--active:not(.ct-menu-item--disabled) .ct-menu-item-sublabel {
  color: #b4b4b4;
}
.ct-menu-item.ct-menu-item--disabled {
  cursor: not-allowed;
  pointer-events: none;
}
.ct-menu-item.ct-menu-item--disabled .ct-menu-item-icon {
  color: #818181;
}
.ct-menu-item.ct-menu-item--disabled .ct-menu-item-label,
.ct-menu-item.ct-menu-item--disabled .ct-menu-item-sublabel {
  color: #727272;
}
.ct-menu-item.ct-menu-item--disabled .ct-menu-item-trailing {
  opacity: 0.3;
}
.ct-menu-item.ct-menu-item--disabled .ct-checkmark {
  --ct-checkmark-border: rgba(255,255,255,0.14);
  --ct-checkmark-icon: rgba(255,255,255,0.3);
}
.ct-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5em 0.75em;
  box-sizing: border-box;
  background: transparent;
  color: #f3f3f3;
  font-family: "SpaceGrotesk";
  font-size: inherit;
  line-height: 1.2;
  border: none;
  border-bottom: 0.125em solid #565656;
  border-radius: 0.375em;
  outline: none;
  cursor: pointer;
  user-select: none;
  text-align: center;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.ct-tab:hover:not([data-disabled="true"]):not([data-selected="true"]) {
  background: #333;
  border-bottom-color: #fff;
}
.ct-tab[data-selected="true"] {
  background: #333;
  border-bottom-color: #6366f1;
  color: #4f46e5;
}
.ct-tab:focus-visible:not([data-disabled="true"]),
.ct-tab[data-focused="true"]:not([data-disabled="true"]) {
  outline: none;
  border-bottom: none;
}
.ct-tab[data-disabled="true"] {
  cursor: not-allowed;
  pointer-events: none;
  color: #727272;
  border-bottom-color: #565656;
}
.status-notification.ct-notification {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 29.125rem;
  max-width: calc(100vw - 1rem);
  position: relative;
  box-sizing: border-box;
  border: 0.0625rem solid transparent;
  border-radius: 0.5rem;
  padding: 0.75rem 0.875rem;
  gap: 0.75rem;
  background-color: #1b1b1b;
  color: #f3f3f3;
}
.status-notification.ct-notification[class*="-tertiary"] {
  width: auto;
  max-width: 29.125rem;
  margin: 0;
  padding: 0;
  gap: 0.375rem;
  border-color: transparent;
  border-radius: 0;
  background-color: transparent;
}
.status-notification.ct-notification .notification-wrapper {
  display: flex;
  align-items: flex-start;
  width: 100%;
  gap: 0.625rem;
}
.status-notification.ct-notification .notification-icon {
  width: 1.125rem;
  min-width: 1.125rem;
  height: 1.125rem;
  min-height: 1.125rem;
  background-repeat: no-repeat;
  background-size: 1.125rem;
  background-position: center;
  margin-top: 0.125rem;
}
.status-notification.ct-notification .notification-icon.info {
  background-image: url("../../public/resources/notifications/info_icon_dark.svg");
}
.status-notification.ct-notification .notification-icon.warning {
  background-image: url("../../public/resources/notifications/warning_icon_dark.svg");
}
.status-notification.ct-notification .notification-icon.error {
  background-image: url("../../public/resources/notifications/error_icon_dark.svg");
}
.status-notification.ct-notification .notification-icon.success {
  background-image: url("../../public/resources/notifications/success_icon_dark.svg");
}
.status-notification.ct-notification .notification-message {
  flex: 1;
  min-width: 0;
  color: inherit;
  font-family: "SpaceGrotesk";
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.status-notification.ct-notification .notification-button {
  flex: 0 0 auto;
  width: 1.125rem;
  min-width: 1.125rem;
  height: 1.125rem;
  min-height: 1.125rem;
  cursor: pointer;
  user-select: none;
  opacity: 0.72;
  background-image: url("../../public/resources/shared/close_button_dark.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.875rem;
  border-radius: 0.25rem;
}
.status-notification.ct-notification .notification-button:hover {
  opacity: 1;
}
.status-notification.ct-notification .notification-action-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding-left: 1.75rem;
}
.status-notification.ct-notification .notification-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 1.75rem;
  padding: 0 0.75rem;
  border: 0.0625rem solid currentColor;
  border-radius: 999px;
  background-color: transparent;
  color: inherit;
  cursor: pointer;
  user-select: none;
  font-family: "SpaceGrotesk";
  font-size: 0.8125rem;
  line-height: 1.2;
}
.status-notification.ct-notification .notification-action-button:hover {
  opacity: 0.85;
}
.status-notification.ct-notification.ct-notification-info-primary {
  border-color: #93c5fd;
  background-color: #1b1b1b;
  color: #f3f3f3;
}
.status-notification.ct-notification.ct-notification-warning-primary {
  border-color: #fdba74;
  background-color: #1b1b1b;
  color: #f3f3f3;
}
.status-notification.ct-notification.ct-notification-error-primary {
  border-color: #fca5a5;
  background-color: #1b1b1b;
  color: #f3f3f3;
}
.status-notification.ct-notification.ct-notification-success-primary {
  border-color: #4ade80;
  background-color: #1b1b1b;
  color: #f3f3f3;
}
.status-notification.ct-notification.ct-notification-info-secondary {
  border-color: #1e3a8a;
  background-color: #1e3a8a;
  color: #f3f3f3;
}
.status-notification.ct-notification.ct-notification-warning-secondary {
  border-color: #c2410c;
  background-color: #c2410c;
  color: #f3f3f3;
}
.status-notification.ct-notification.ct-notification-error-secondary {
  border-color: #b91c1c;
  background-color: #b91c1c;
  color: #f3f3f3;
}
.status-notification.ct-notification.ct-notification-success-secondary {
  border-color: #15803d;
  background-color: #15803d;
  color: #f3f3f3;
}
.status-notification.ct-notification.ct-notification-info-tertiary {
  color: #93c5fd;
}
.status-notification.ct-notification.ct-notification-warning-tertiary {
  color: #fdba74;
}
.status-notification.ct-notification.ct-notification-error-tertiary {
  color: #fca5a5;
}
.status-notification.ct-notification.ct-notification-success-tertiary {
  color: #bbf7d0;
}
::-webkit-scrollbar {
  width: 0.5em;
  height: 0.5em;
  background-color: transparent;
}
::-webkit-scrollbar-corner {
  background-color: #282828;
}
::-webkit-scrollbar:hover {
  background-color: transparent;
}
::-webkit-scrollbar-thumb:vertical,
::-webkit-scrollbar-thumb:horizontal {
  background-color: #333;
}
::-webkit-scrollbar-thumb:vertical:active,
::-webkit-scrollbar-thumb:horizontal:active {
  background-color: #282828;
}
input::-webkit-input-placeholder {
  color: #c8c8c8;
}
input:-moz-placeholder {
  color: #c8c8c8;
}
input::-moz-placeholder {
  color: #c8c8c8;
}
.hidden {
  display: none !important;
}
.chart-line {
  width: 100%;
  height: 100%;
  position: relative;
}
.chart-results-container {
  height: inherit;
  width: inherit;
  position: relative;
}
.chart-results-container .view-inactive {
  display: none;
  visibility: hidden;
}
.chartjs-render-monitor {
  width: 100% !important;
  height: 100% !important;
  min-height: 170px;
}
:root {
  accent-color: #3b82f6;
}
*:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}
[data-focus-mode="mouse"] *:focus {
  outline: none !important;
  box-shadow: none !important;
}
html,
body {
  padding: 0;
  margin: 0;
  overflow: hidden;
}
body {
  font-family: "SpaceGrotesk", sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #1b1b1b !important;
}
[data-tippy-root] {
  max-width: calc(100vw - 0.625em);
}
.tippy-box {
  border-radius: 0.25em;
  font-size: inherit;
}
.tippy-box[data-placement^="top"] > .tippy-arrow::before {
  bottom: -0.4375em;
  border-width: 0.5em 0.5em 0;
}
.tippy-box[data-placement^="bottom"] > .tippy-arrow::before {
  top: -0.4375em;
  border-width: 0 0.5em 0.5em;
}
.tippy-box[data-placement^="left"] > .tippy-arrow::before {
  right: -0.4375em;
  border-width: 0.5em 0 0.5em 0.5em;
}
.tippy-box[data-placement^="right"] > .tippy-arrow::before {
  left: -0.4375em;
  border-width: 0.5em 0.5em 0.5em 0;
}
.tippy-arrow {
  width: 1em;
  height: 1em;
}
.tippy-content {
  padding: 0.3125em 0.5625em;
}
.separate-bar {
  width: 0px;
  height: 1em;
  border-left: 0.031em solid #3a3a3a;
}
#root-container {
  position: fixed;
  height: calc(100vh - 2.125em - 2rem);
  top: 2.125em;
  left: 0;
  right: 0;
  z-index: 0;
  padding-left: 0;
  padding-right: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
#ROOT {
  background-color: #1b1b1b !important;
  color: #f3f3f3;
  height: 100%;
  flex: 1;
  min-width: 0;
  min-height: 0;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  padding-right: 0.25em;
  padding-left: 0.25em;
}
#main {
  font-size: 20px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  width: 100%;
}
#dock {
  height: 80%;
}
.highlight {
  animation: ct-line-flash 2s ease-out forwards;
  background-color: #282828 !important;
}
.value-expanded-compound::before {
  content: '';
  position: absolute;
  left: 0.72em;
  top: 1.25em;
  bottom: 0;
  width: 0.0625em;
  background-color: #f3f3f3;
  opacity: 0.2;
}
.value-load-more-button {
  width: 100%;
}
.component-container {
  font-family: "SpaceMono" !important;
  font-size: inherit !important;
  line-height: 1.5em !important;
  font-weight: 400 !important;
  width: 100%;
  height: 100%;
}
.component-container:focus {
  outline: 0px;
}
.hovered {
  opacity: 0.6;
}
.panel {
  font-size: 18px;
  border-color: #f3f3f3;
  border-width: 1px;
  border-style: solid;
  overflow: hidden;
  display: flex;
}
.r {
  opacity: 1;
}
.panel-width {
  flex-basis: 100%;
  flex-direction: column;
  display: flex;
  width: 100%;
}
.selector {
  position: absolute;
  opacity: 0.5;
  z-index: 22;
  background-color: #555;
  display: none;
}
.absolute-panel {
  position: absolute;
}
.unselectable {
  user-select: none;
}
.unselectable #trace-query {
  height: 18px;
  font-size: 16px;
}
.dataTables_filter {
  display: none;
}
#trace-q {
  width: 100%;
}
.searched-token {
  background-color: #ecf53d;
}
.indeterminate-checkmark {
  border: 1px solid #3a3a3a;
  border-radius: 2.5px;
  display: flex;
  position: absolute;
  top: 5px;
  left: 0;
  width: 15px;
  height: 15px;
  background-color: #333;
}
.indeterminate-checkmark::after {
  content: "-";
  display: flex;
  position: relative;
  align-items: center;
  transform: translateX(4px);
}
.checkbox {
  display: none;
  width: 20px !important;
  margin-left: 0 !important;
  margin-right: 5;
}
.checkbox::after {
  content: "";
  position: absolute;
  display: none;
}
.checkmark::after {
  content: "";
  position: absolute;
  display: none;
}
input:checked ~ .checkmark:after {
  display: block;
}
.code-tooltip {
  display: block;
  padding-left: 4px;
  padding-right: 4px;
  width: fit-content;
  font-size: 14px;
  line-height: 24px;
  overflow-wrap: normal;
  max-width: calc(100% - 8px);
  position: absolute;
  background-color: #333;
  z-index: 3;
  font-family: "SpaceMono";
  margin-bottom: 0;
  list-style-type: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out;
  white-space: normal;
  pointer-events: none;
  border-radius: 6px;
}
.code-tooltip .active-line {
  background: #1b1b1b;
  border-radius: 4px;
  width: fit-content;
  padding-right: 4px;
}
.code-tooltip .active-line .excerpt-code {
  color: #f3f3f3 !important;
}
.code-tooltip li {
  padding-left: 4px;
}
.checkmark {
  border: 0.5px solid #565656;
  border-radius: 2.5px;
  display: block;
  position: absolute;
  top: 6px;
  left: 0;
  width: 14px;
  height: 14px;
  background-color: #333;
}
.checkmark::after {
  left: 3.6px;
  top: 1.6px;
  width: 6px;
  height: 8px;
  border: solid #bbf7d0;
  border-width: 0 2px 2px 0;
  border-radius: 2px;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.dropdown-list {
  border-radius: 0.375rem;
  background: #161616;
  color: #242424;
  display: flex;
  flex-direction: column;
  margin-top: 0.375rem;
  right: 0;
  min-width: fit-content;
  position: relative;
  z-index: 57;
  user-select: none;
}
.dropdown-list-item {
  position: relative;
  color: #f3f3f3;
  user-select: none;
  list-style-type: none;
  width: 100%;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hamburger-dropdown + .dropdown-list.active {
  width: fit-content;
}
.layout-buttons-container {
  order: 9999;
  margin-left: auto;
  width: 1.7em !important;
  height: 1.7em !important;
  background-color: #282828;
  border-radius: 0.36em;
  background-image: url("../../public/resources/window/layout_nested_button_dark.svg");
  background-size: 1em;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  border: 0.0625em solid #282828;
}
.layout-buttons-container:focus {
  outline: none !important;
  box-shadow: none !important;
}
.layout-buttons-container:focus-visible {
  outline: none !important;
  box-shadow: inset 0 0 0 0.125em #3b82f6 !important;
}
.layout-buttons-container:hover {
  background-color: #242424;
}
.layout-buttons-container.active {
  background-color: #242424;
  border: 0.0625em solid #4f46e5 !important;
}
.layout-buttons-container .layout-dropdown {
  background: #1b1b1b;
  border: 0.03125rem solid #565656;
  border-radius: 0.375rem;
  box-shadow: none;
  overflow: hidden;
  animation: ct-dropdown-reveal 120ms ease-out;
  width: fit-content;
  z-index: 100;
  position: absolute;
  top: calc(100% + 0.375rem);
  right: 0 !important;
}
@media (prefers-reduced-motion: reduce) {
  .layout-buttons-container .layout-dropdown {
    animation: none;
  }
}
.layout-buttons-container .layout-dropdown::-webkit-scrollbar,
.layout-buttons-container .layout-dropdown ::-webkit-scrollbar {
  width: 0.375rem;
  height: 0.375rem;
}
.layout-buttons-container .layout-dropdown .layout-dropdown-node {
  font-size: 0.875rem;
  border-top: 0.0625rem solid #282828;
  padding-left: 0.5em;
  padding-right: 0.5em;
}
.layout-buttons-container .layout-dropdown .layout-dropdown-node .ct-menu-item-label,
.layout-buttons-container .layout-dropdown .layout-dropdown-node .ct-menu-item-sublabel {
  font-size: inherit;
}
.layout-buttons-container .layout-dropdown .layout-dropdown-node:first-child {
  border-top: none;
  border-radius: 0.375rem 0.375rem 0 0;
}
.layout-buttons-container .layout-dropdown .layout-dropdown-node:last-child {
  border-bottom: none;
  border-radius: 0 0 0.375rem 0.375rem;
}
.layout-buttons-container .layout-dropdown .layout-dropdown-node:hover {
  background-color: #262626;
}
.run-trace-button .custom-tooltip {
  right: 0px;
}
.run-trace-button .custom-tooltip:after {
  left: 90%;
}
.eventLog-medium-control-button .custom-tooltip {
  overflow-wrap: normal;
  white-space: normal;
}
.custom-noir-icon::before {
  content: url("../../public/resources/shared/noir_logo_dark_theme.svg");
  display: block;
  width: 1em;
  height: 1em;
  position: absolute;
  transform: translate(0.24em, 0.24em);
}
.empty-overlay {
  display: flex;
  width: inherit;
  height: inherit;
  justify-content: center;
  align-items: center;
  font-family: "SpaceGrotesk";
  font-size: 0.875rem;
  opacity: 0.6;
  line-height: 1.25rem;
  box-sizing: border-box;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  text-align: center;
  overflow-wrap: break-word;
}
.jstree-default-contextmenu {
  display: none !important;
  visibility: hidden !important;
}
.ct-picker {
  position: relative;
  flex-shrink: 0;
}
.ct-picker-trigger {
  display: flex;
  align-items: center;
  height: 1.75rem;
  max-height: 1.75rem;
  padding: 0 0.625em;
  cursor: pointer;
  gap: 0.375em;
  user-select: none;
  border-radius: 0.5em;
  border: 0.03125em solid #565656;
  background: #1b1b1b;
  font-family: "SpaceGrotesk";
  font-size: 0.75rem;
  color: #b4b4b4;
  white-space: nowrap;
  min-width: 7.5em;
}
.ct-picker-trigger:hover {
  background: #262626;
  color: #f3f3f3;
}
.ct-picker-trigger.ct-picker-trigger--open {
  border-color: #6366f1;
  color: #f3f3f3;
}
.ct-picker-chevron {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  opacity: 0.6;
}
.ct-picker-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ct-picker-dropdown {
  background: #1b1b1b;
  border: 0.03125rem solid #565656;
  border-radius: 0.375rem;
  box-shadow: none;
  overflow: hidden;
  animation: ct-dropdown-reveal 120ms ease-out;
  position: absolute;
  top: calc(100% + 0.375rem);
  left: 0;
  right: 0;
  z-index: 100;
  padding: 0.25em;
  max-height: 12.5em;
  overflow-y: auto;
}
@media (prefers-reduced-motion: reduce) {
  .ct-picker-dropdown {
    animation: none;
  }
}
.ct-picker-dropdown::-webkit-scrollbar,
.ct-picker-dropdown ::-webkit-scrollbar {
  width: 0.375rem;
  height: 0.375rem;
}
.ct-picker--chevron-left .ct-picker-trigger {
  flex-direction: row;
}
.ct-picker--chevron-right .ct-picker-trigger {
  flex-direction: row-reverse;
}
@-moz-keyframes ct-dropdown-reveal {
  from {
    opacity: 0;
    transform: translateY(-0.25rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes ct-dropdown-reveal {
  from {
    opacity: 0;
    transform: translateY(-0.25rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes ct-dropdown-reveal {
  from {
    opacity: 0;
    transform: translateY(-0.25rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes ct-dropdown-reveal {
  from {
    opacity: 0;
    transform: translateY(-0.25rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes ct-line-flash {
  0% {
    background-color: rgba(251,146,60,0.55);
  }
  40% {
    background-color: rgba(251,146,60,0.2);
  }
  100% {
    background-color: #282828;
  }
}
@-webkit-keyframes ct-line-flash {
  0% {
    background-color: rgba(251,146,60,0.55);
  }
  40% {
    background-color: rgba(251,146,60,0.2);
  }
  100% {
    background-color: #282828;
  }
}
@-o-keyframes ct-line-flash {
  0% {
    background-color: rgba(251,146,60,0.55);
  }
  40% {
    background-color: rgba(251,146,60,0.2);
  }
  100% {
    background-color: #282828;
  }
}
@keyframes ct-line-flash {
  0% {
    background-color: rgba(251,146,60,0.55);
  }
  40% {
    background-color: rgba(251,146,60,0.2);
  }
  100% {
    background-color: #282828;
  }
}
.ct-header {
  display: flex;
  padding: 0 0.25em;
  justify-content: center;
  align-items: center;
}
#isonim-debug-controls {
  -webkit-app-region: drag;
  display: flex;
  align-items: center;
  align-self: center;
  flex: 0 0 auto;
  order: 2;
}
#isonim-debug-controls > * {
  -webkit-app-region: no-drag;
}
#isonim-debug-controls .isonim-debug-controls {
  height: 2.1em;
  gap: 0.5em;
  padding: 0;
}
#isonim-debug-controls .isonim-debug-controls .debug-toolbar-mode,
#isonim-debug-controls .isonim-debug-controls .recording-head-indicator {
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0 0.35em;
  font-size: 0.8em;
  line-height: 1;
  white-space: nowrap;
  color: #f3f3f3;
}
#isonim-debug-controls .isonim-debug-controls .recording-head-indicator {
  color: PRIMARY_COLOR;
}
#isonim-debug-controls .isonim-debug-controls .jump-to-live-debug {
  min-width: 2.8em;
  padding: 0 0.35em;
  font-size: 0.78em;
  line-height: 1;
}
.monaco-editor {
  --ct-gutter-breakpoint-size: 1.1ch;
  --ct-gutter-trace-size: 1.2ch;
  --ct-gutter-highlight-left: 0.15em;
  --ct-gutter-pointer-lane: 0.75em;
  --ct-gutter-marker-lane: 1.9em;
  --ct-gutter-folding-lane: 0.85em;
  --ct-gutter-marker-gap: 0.45em;
  --ct-gutter-line-gap: 0.15em;
  --ct-gutter-highlight-size: 0.8em;
  --ct-gutter-breakpoint-right: 1.05em;
  --ct-gutter-trace-right: 0.6em;
  margin-left: 0;
  border-bottom-left-radius: 0.375em;
}
.margin-view-overlays {
  height: 100%;
}
.margin-view-overlays div {
  background-color: #282828;
}
.monaco-editor .margin .margin-view-overlays .folding {
  padding-left: 0 !important;
  width: var(--ct-gutter-folding-lane) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: visible !important;
  position: relative;
  z-index: 5;
  color: #485f7a !important;
}
.monaco-editor .margin .margin-view-overlays .folding .codicon,
.monaco-editor .margin .margin-view-overlays .folding:before,
.monaco-editor .margin .margin-view-overlays .folding [class*="codicon"] {
  color: #485f7a !important;
  opacity: 1 !important;
  position: relative;
  z-index: 6;
}
.monaco-editor .margin-view-overlays .codicon.codicon-folding-expanded,
.monaco-editor .margin-view-overlays .codicon.codicon-folding-collapsed,
.monaco-editor .margin-view-overlays .codicon.codicon-folding-manual-expanded,
.monaco-editor .margin-view-overlays .codicon.codicon-folding-manual-collapsed,
.monaco-editor .margin-view-overlays .codicon.alwaysShowFoldIcons {
  font-size: 0.8em !important;
  color: #485f7a !important;
  opacity: 1 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transform: translateX(15%);
  width: 100%;
  position: relative;
  z-index: 7;
  background-color: transparent;
}
.monaco-editor .lines-content .core-guide.core-guide-indent.vertical,
.monaco-editor .lines-content .core-guide.bracket-indent-guide.vertical {
  transform: translateX(0.18em) !important;
}
.monaco-editor .lines-content .core-guide.core-guide-indent.vertical {
  box-shadow: 0.0625em 0 0 0 #565656 inset !important;
}
.monaco-editor .lines-content .core-guide.core-guide-indent.vertical.indent-active {
  box-shadow: 0.0625em 0 0 0 #333 inset !important;
}
.sticky-widget {
  width: 100% !important;
}
.diff-view-zone {
  width: -webkit-fill-available !important;
}
.diff-view-zone .monaco-editor-background {
  background-color: #1b1b1b !important;
}
.diff-view-zone .margin {
  background-color: #1b1b1b !important;
}
.diff-view-zone .margin-view-overlays div {
  background-color: #1b1b1b !important;
}
.diff-view-zone [class^="mtk"] {
  color: #fca5a5 !important;
}
.diff-view-zone .line-numbers {
  border-right: 0.0625em solid #fca5a5 !important;
}
.diff-view-zone .diff-deleted-gutter {
  color: #fca5a5 !important;
}
.diff-view-zone .current-line {
  background-color: transparent !important;
}
.diff-added-gutter {
  color: #bbf7d0;
}
.line-numbers:has(.diff-added-gutter) {
  border-right: 0.0625em solid #bbf7d0 !important;
}
.minimap {
  right: 0.5em !important;
  left: unset !important;
}
.decorationsOverviewRuler {
  z-index: 10 !important;
  pointer-events: none;
  margin-right: 0.125em !important;
}
.monaco-editor,
.monaco-editor-background,
.monaco-editor .inputarea.ime-input,
.monaco-editor .margin,
.monaco-editor .sticky-line-content,
.monaco-editor .sticky-line-number {
  background-color: transparent !important;
  z-index: 2;
}
.monaco-editor .monaco-scrollable-element,
.monaco-editor-background .monaco-scrollable-element,
.monaco-editor .inputarea.ime-input .monaco-scrollable-element,
.monaco-editor .margin .monaco-scrollable-element,
.monaco-editor .sticky-line-content .monaco-scrollable-element,
.monaco-editor .sticky-line-number .monaco-scrollable-element {
  z-index: 1;
}
.monaco-editor .monaco-scrollable-element .visible,
.monaco-editor-background .monaco-scrollable-element .visible,
.monaco-editor .inputarea.ime-input .monaco-scrollable-element .visible,
.monaco-editor .margin .monaco-scrollable-element .visible,
.monaco-editor .sticky-line-content .monaco-scrollable-element .visible,
.monaco-editor .sticky-line-number .monaco-scrollable-element .visible {
  z-index: 9 !important;
}
.monaco-editor .decorationsOverviewRuler {
  width: 0.875rem !important;
}
.monaco-editor .monaco-scrollable-element > .scrollbar.vertical {
  width: 0.875rem !important;
}
.monaco-editor .monaco-scrollable-element > .scrollbar.vertical .slider {
  width: 0.875rem !important;
}
.monaco-editor .monaco-scrollable-element > .scrollbar.horizontal {
  height: 0.875rem !important;
}
.monaco-editor .monaco-scrollable-element > .scrollbar.horizontal .slider {
  height: 0.875rem !important;
}
.monaco-editor .monaco-editor-background {
  overflow: visible !important;
  contain: unset !important;
}
.monaco-editor .sticky-line-content {
  font-family: "SpaceMono" !important;
  font-weight: 400;
  color: #f3f3f3 !important;
  background-color: #282828 !important;
}
.view-zones .value-expanded {
  position: relative;
  z-index: 1;
  background-color: #282828;
  border: 0.0625em solid #808080;
  padding-right: 0.625em;
  height: 1.5625em !important;
  margin-top: 0;
}
.code-editor {
  width: 31.25em;
  overflow: hidden !important;
}
.expansion .monaco-editor,
.expansion .marginm {
  background-color: #bbb;
}
#context-menu-container {
  width: fit-content;
  display: none;
  flex-direction: column;
  position: fixed;
  background: #1b1b1b;
  border: 0.03125rem solid #565656;
  border-radius: 0.375rem;
  box-shadow: none;
  overflow: hidden;
  animation: ct-dropdown-reveal 120ms ease-out;
  font-family: "SpaceGrotesk";
  font-size: 0.875em;
  z-index: 1000;
}
@media (prefers-reduced-motion: reduce) {
  #context-menu-container {
    animation: none;
  }
}
#context-menu-container::-webkit-scrollbar,
#context-menu-container ::-webkit-scrollbar {
  width: 0.375rem;
  height: 0.375rem;
}
.context-menu-item-container:first-child .context-menu-item {
  border-radius: 0.375rem 0.375rem 0 0;
}
.context-menu-item-container:last-child .context-menu-item {
  border-bottom: none;
  border-radius: 0 0 0.375rem 0.375rem;
}
.expansion-1 .monaco-editor,
.expansion-1 .margin {
  background-color: #eee !important;
}
.expansion-2 .monaco-editor,
.expansion-2 .margin {
  background-color: #ddd !important;
}
.expansion-3 .monaco-editor,
.expansion-3 .margin {
  background-color: #ccc !important;
}
.monaco-inputbox {
  border-radius: 1.5625em;
}
.code-editor {
  height: 100%;
  overflow: scroll;
  flex-basis: 100%;
  border-radius: 0.375em;
}
.code-editor:focus {
  outline: 0em;
}
.code-editor .line {
  height: 1.5em;
  white-space: pre;
  display: flex;
  opacity: 0.8;
}
.code-editor .line > .raw {
  width: 80%;
  display: flex;
}
.code-editor .hit-overlay {
  height: 1.25em;
  width: 1.25em;
}
.code-editor .overlay > .hit-overlay {
  background-color: inherit;
}
.code-editor .overlay {
  background-color: #00f;
  margin-left: auto;
}
.code-editor .overlay .low-level-overlay {
  display: flex;
  flex-direction: column;
}
.code-editor .overlay .low-level-overlay .low-level-child {
  background-color: #00f;
  color: #fff;
  height: 1.5em;
}
.code-editor .overlay .hit-overlay {
  margin-right: 3.125em;
  width: 9.375em;
  height: 1.5em;
}
.code-editor .raw-info {
  width: 80%;
}
.code-editor .flow-content-widget {
  position: relative;
  z-index: 5;
  display: flex !important;
  align-items: center;
}
.code-editor .flow-loop {
  position: relative;
  overflow: visible !important;
  font-size: 0.9em;
  height: 1.25em;
  width: 100%;
}
.code-editor .flow-line-buffer {
  position: relative;
}
.code-editor .flow-parallel {
  position: fixed;
  overflow: visible !important;
  font-size: 0.9em;
  display: inline-flex;
  transform: translateY(0.125em);
}
.code-editor .flow-multiline-value-container {
  position: absolute;
  height: 1.25em;
  width: fit-content;
  z-index: 1;
  display: flex;
  align-items: center;
}
.code-editor .flow-parallel-value {
  display: inline-flex;
  padding-right: 0;
  align-items: center;
  margin-right: 0.625em;
}
.code-editor .flow-parallel-value-name {
  font-family: "SpaceMono";
  background: #333;
  color: #f3f3f3;
  padding-left: 0.3125em;
  padding-right: 0.3125em;
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  border-radius: 0.125em;
  box-sizing: border-box;
  white-space: nowrap;
}
.code-editor .ct-omniscience-loop {
  display: flex;
  padding: 0em 0.25em;
  margin-left: 0.5em;
  margin-right: 0.5em;
  justify-content: center;
  align-items: center;
  border-radius: 0.25rem;
  border: 0.12em solid #565656;
  background: #1b1b1b;
  white-space: nowrap;
}
.code-editor .flow-loop-value-name {
  font-family: "SpaceMono";
  background: #333;
  box-shadow: 0.0625em 0.0625em 0.0625em #242424;
  color: #f3f3f3;
  padding-left: 0.3125em;
  padding-right: 0.3125em;
  padding-top: 0;
  padding-bottom: 0;
  margin-right: 0em !important;
  display: flex;
  border-radius: 0.125em;
  box-sizing: border-box;
  white-space: nowrap;
}
.code-editor .flow-loop-textarea {
  height: 100%;
  background-color: #333;
  font-family: monospace;
  border: 0;
  padding: 0;
  padding-right: 0.1875em;
  overflow: hidden;
  resize: none;
  color: #f3f3f3;
  outline: none;
  cursor: text;
  opacity: 0.7;
}
.code-editor .flow-loop-textarea:focus {
  opacity: 1;
}
.code-editor .flow-loop-textarea::placeholder {
  color: #f3f3f3;
}
.code-editor .flow-parallel-loop-iteration-end {
  padding-left: 0.1875em;
}
.code-editor .flow-parallel-loop-iteration-start {
  padding-right: 0.3125em;
}
.code-editor .flow-multiline-value-pointer {
  width: 0.0625em;
  border: 0.03125em #808080 dashed;
  position: absolute;
}
.code-editor .flow-multiline-value-box {
  height: 1.0625em;
  width: 100%;
  display: inline-block;
  padding-left: 0.125em;
  padding-right: 0.125em;
  padding-top: 0;
  padding-bottom: 0.1875em;
  line-height: 1.0625em;
  box-sizing: border-box;
  font-size: 0.75em;
  overflow: hidden;
  text-align: center;
  border-radius: 0.125em;
  text-overflow: ellipsis;
  font-family: monospace;
  z-index: 2;
}
.code-editor .flow-multiline-value-before-only {
  background-color: #c2c4cd;
  color: #000;
  box-shadow: 0.0625em 0.0625em 0.0625em #9a9da7;
  width: fit-content;
}
.code-editor .flow-loop-container {
  overflow-x: clip;
  overflow-y: visible;
  position: absolute;
  height: 100%;
  display: inline-flex;
}
.code-editor .flow-loop-container .flow-loop-step-splitter {
  position: relative;
  width: 0.0625em;
  background-color: #39414a;
  z-index: 5;
  min-width: 0.0625em;
}
.code-editor .flow-nested-loop-container {
  position: absolute;
  height: 100%;
  display: inline-flex;
}
.code-editor .flow-loop-empty-cell {
  position: relative;
  height: 100%;
  margin-right: 0.625em;
  width: 1.5em;
}
.code-editor .flow-loop-container > .flow-loop-empty-cell {
  margin-right: 0;
}
.code-editor .flow-loop-step-container {
  position: absolute;
  height: 100%;
  margin-right: 0.625em;
  width: 3.125em;
  z-index: 2;
}
.code-editor .flow-loop-step-container.active-flow-step .flow-multiline-value-before-only {
  background-color: #4f89a0;
  color: #000;
}
.code-editor .flow-loop-step-container.active-flow-step .flow-inline-value-box {
  background-color: #4f89a0;
  color: #000;
}
.code-editor .flow-loop-step-container.active-flow-step .flow-parallel-value-box {
  background-color: #4f89a0;
  color: #000;
}
.code-editor .flow-loop-step-container.shrinked {
  background-color: #282828;
  border-radius: 0.15625em;
}
.code-editor .flow-loop-step-container.shrinked.active .flow-loop-shrinked-iteration {
  background-color: #4f89a0;
}
.code-editor .flow-loop-step-container.continuous {
  margin-right: 0;
}
.code-editor .flow-loop-step-container.continuous.active .flow-loop-continuous-iteration {
  background-color: #4f89a0;
}
.code-editor .flow-loop-step-container .flow-multiline-value-before-only {
  background-color: #1c5990;
  color: #c8c8c8;
  box-shadow: 0.0625em 0.0625em 0.0625em #9a9da7;
}
.code-editor .flow-loop-step-container .flow-multiline-value {
  position: absolute;
  width: 100%;
}
.code-editor .flow-multiline {
  font-size: 0.9375em;
  background-color: BACKGROUND_NEIGHBOUR_COLOR;
}
.code-editor .flow-multiline .flow-multiline-previous {
  background-color: #0ff;
}
.code-editor .flow-multiline .flow-multiline-next {
  background-color: #00f;
}
.code-editor .flow-multiline .flow-multiline-loop {
  left: 28.125em;
  position: absolute;
  width: 43.75em;
  max-width: 43.75em;
  overflow-x: scroll;
  float: right;
}
.code-editor .flow-multiline td.multiline-group {
  min-width: 11.25em;
  max-width: 11.25em;
}
.code-editor .flow-multiline td.multiline-group span {
  display: block;
}
.code-editor .zfuture-expression::after {
  background-color: #0ff;
}
.code-editor .previous-expression::after {
  background-color: #00f;
}
.code-editor .future {
  background-color: #00f;
}
.code-editor .future > .raw {
  color: #fff;
}
.code-editor .future > .raw > .token-label {
  color: #fff;
}
.code-editor .future > .raw > .token-symbol {
  color: #fff;
}
.code-editor .tra {
  background-color: #008;
}
.code-editor .tra > .raw {
  color: #fff;
}
.code-editor .tra > .raw > .token-label {
  color: #fff;
}
.code-editor .tra > .raw > .token-symbol {
  color: #fff;
}
.code-editor .instantiations-menu {
  cursor: pointer;
  background-color: #3761d3;
  color: #d3e9e9;
}
.code-editor .instantiations-menu .menu-header {
  font-size: 1.0625em;
}
.code-editor .instantiations-menu .instantiation-location {
  height: 1.25em;
  font-size: 0.9375em;
  cursor: pointer;
  background-color: #3761d3;
  color: #d3e9e9;
  opacity: 0.7;
}
.high-level-line {
  color: #f3f3f3;
}
.jump-back-button {
  white-space: nowrap;
}
.unknown-location {
  padding: 3ex;
  display: flex;
  flex-direction: column;
}
.unknown-location .unknown-border {
  border-bottom: solid 0.0625em;
  border-color: CALLGRAP_TOOLTIP_BORDER_COLOR;
  padding-top: 0.625em;
}
.unknown-location .unknown-location-header {
  font-weight: 700;
}
.unknown-location .unknown-location-buttons {
  margin: 2ex;
  display: flex;
  justify-content: space-between;
  height: 2.5em;
}
.unknown-location .unknown-location-asm {
  white-space: pre;
  font-family: monospace;
  overflow-y: scroll;
  overflow-x: auto;
}
.unknown-location .unknown-location-asm .asm-code .asm-highlight {
  color: #f00;
}
#breakpoint-list_wrapper,
#tracepoint-list_wrapper {
  width: 50%;
  float: left;
  color: #f3f3f3;
}
#breakpoint-list_wrapper tr,
#tracepoint-list_wrapper tr {
  height: 1.25em;
}
#breakpoint-list_wrapper .odd,
#tracepoint-list_wrapper .odd {
  background-color: BACKGROUND_NEIGHBOUR_COLOR;
}
#breakpoint-list_wrapper .even,
#tracepoint-list_wrapper .even {
  background-color: #282828;
}
#breakpoint-list_wrapper .dataTables_length,
#tracepoint-list_wrapper .dataTables_length {
  display: none;
}
#breakpoint-list_wrapper .dataTables_info,
#tracepoint-list_wrapper .dataTables_info {
  display: none;
}
#breakpoint-list_wrapper .dataTables_paginate,
#tracepoint-list_wrapper .dataTables_paginate {
  display: none;
}
.context-menu {
  position: fixed;
  z-index: 10000;
  width: fit-content;
  background-color: #282828;
  border-radius: 0.3125em;
  display: none;
}
.context-menu:focus {
  outline: 0 !important;
  border: 0.0625em solid #f3f3f3 !important;
}
.context-menu.visible {
  display: block;
}
.context-menu-option {
  border-radius: 0.3125em;
  font-size: 0.875em;
}
.context-menu-option-text {
  width: 100%;
}
.gutter {
  width: calc(100% - var(--ct-gutter-folding-lane) - var(--ct-gutter-marker-gap));
  height: 100%;
  position: relative;
  box-sizing: border-box;
  display: block;
  overflow: hidden;
  cursor: pointer;
}
.gutter .gutter-trace {
  width: var(--ct-gutter-trace-size);
  background: #6366f1;
  height: var(--ct-gutter-trace-size);
  border-radius: 50%;
  top: 0;
  margin-top: 0.57ch;
  position: absolute;
  right: var(--ct-gutter-trace-right);
  z-index: 9;
  outline: 0.125em solid #282828;
}
.gutter .gutter-disabled-trace {
  width: var(--ct-gutter-trace-size) !important;
  background: #333;
  height: var(--ct-gutter-trace-size);
  border-radius: 50%;
  top: 0;
  margin-top: 0.57ch;
  position: absolute;
  right: var(--ct-gutter-trace-right);
  z-index: 9;
  outline: 0.125em solid #282828;
}
.gutter .gutter-breakpoint-enabled {
  width: var(--ct-gutter-breakpoint-size);
  background: #fca5a5;
  height: var(--ct-gutter-breakpoint-size);
  border-radius: 50%;
  top: 0;
  margin-top: 0.63ch;
  position: absolute;
  right: var(--ct-gutter-breakpoint-right);
  z-index: 8;
}
.gutter .gutter-breakpoint-error {
  width: var(--ct-gutter-breakpoint-size);
  background: #f00;
  height: var(--ct-gutter-breakpoint-size);
  border-radius: 50%;
  top: 0;
  margin-top: 0.25em;
  position: absolute;
  right: var(--ct-gutter-breakpoint-right);
}
.gutter .gutter-breakpoint-disabled {
  width: var(--ct-gutter-breakpoint-size);
  background: #333;
  height: var(--ct-gutter-breakpoint-size);
  border-radius: 50%;
  top: 0;
  margin-top: 0.63ch;
  position: absolute;
  right: var(--ct-gutter-breakpoint-right);
  z-index: 8;
}
.gutter .gutter-no-breakpoint {
  width: var(--ct-gutter-breakpoint-size);
  height: var(--ct-gutter-breakpoint-size);
  background: transparent;
  top: 0;
  position: absolute;
  margin-top: 0.63ch;
  right: var(--ct-gutter-breakpoint-right);
  z-index: 8;
}
.gutter .gutter-no-trace {
  width: var(--ct-gutter-trace-size);
  height: var(--ct-gutter-trace-size);
  background: transparent;
  top: 0;
  position: absolute;
  margin-top: 0.57ch;
  right: var(--ct-gutter-trace-right);
  z-index: 9;
}
.gutter:hover > .gutter-no-breakpoint {
  background: #fca5a5;
  border-radius: 50%;
  margin-top: 0.63ch;
  opacity: 0.3;
}
.gutter .gutter-no-highlight {
  display: none;
}
.gutter .gutter-line {
  width: calc(100% - var(--ct-gutter-pointer-lane) - var(--ct-gutter-marker-lane) - (var(--ct-gutter-line-gap) * 2));
  height: 100%;
  display: block;
  box-sizing: border-box;
  margin-left: calc(var(--ct-gutter-pointer-lane) + var(--ct-gutter-line-gap));
  margin-right: var(--ct-gutter-line-gap);
  padding-left: 0;
  padding-right: 0.15em;
  text-align: right;
  white-space: nowrap;
  opacity: 0.5;
  cursor: default;
}
.line-numbers.active-line-number {
  color: #c8c8c8 !important;
  opacity: 1;
}
.line-numbers.active-line-number .gutter-line {
  color: #c8c8c8 !important;
  opacity: 1;
}
.line-numbers:not(.unified-diff-editor *) {
  font-family: "SpaceMono";
  font-weight: 300;
  line-height: inherit;
  font-size: 0.875rem !important;
  padding-top: 0.0625em !important;
  width: 100% !important;
  display: block !important;
  box-sizing: border-box;
  margin-left: 0 !important;
  text-align: right !important;
  margin-top: 0em !important;
  padding-right: 0 !important;
}
.on {
  background-color: #4f4f4f;
  position: relative;
  z-index: -2;
}
.gutter-highlight-active:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: var(--ct-gutter-highlight-left);
  width: var(--ct-gutter-highlight-size);
  height: var(--ct-gutter-highlight-size);
  background-image: url("../../public/resources/shared/highlight_line_arrow.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.47em;
  transform: translate(-40%, -40%);
  z-index: 0;
}
.inline-expanded-value-view {
  width: 100%;
  background-color: #fff;
}
.trace-button {
  margin-left: 40%;
  cursor: pointer;
}
.ct-column-breakpoint-marker {
  border-bottom: 0.125em solid #fca5a5;
  background-color: rgba(255,0,0,0.18);
  border-radius: 0.1em;
  cursor: pointer;
}
.breakpoint-program-select {
  width: 2em;
  background-color: #00f;
}
.breakpoint-frame-select {
  width: 2em;
  background-color: #fffc00;
}
.limited-expanded {
  font-size: 1em;
  overflow-y: scroll;
  height: 50vh;
}
.breakpoint-menu {
  width: 4.5em;
}
#trace-nav {
  width: 100%;
}
.container {
  top: 3.125em;
  position: absolute;
}
#editor-menu {
  font-size: 1.125em;
}
.editor-menu-trace {
  cursor: pointer;
  margin-right: 1.25em;
  color: #00f;
}
.editor-menu-close {
  cursor: pointer;
  color: #f00;
}
.expand-inline {
  color: #0ff;
}
.expand-trace:hover {
  opacity: 1;
}
.path {
  width: 100;
}
.name {
  width: 100%;
}
.break {
  color: #fff;
}
#tabs {
  width: 72%;
  float: left;
}
.tab {
  float: left;
  overflow: auto;
  display: flex;
  flex-basis: 100%;
}
#values {
  overflow-x: scroll;
}
#right {
  width: 24%;
  float: left;
  height: 62.5em;
  overflow-y: scroll;
}
.invisible {
  display: none;
}
.jump {
  color: #fff;
  width: 100%;
  font-size: 1.125em;
  cursor: pointer;
}
.expansion {
  left: -4.375em !important;
  z-index: 1;
  width: 100% !important;
  height: 12.5em;
  overflow: scroll;
  position: absolute;
}
.active-tab {
  display: flex;
}
.tab {
  width: 100%;
}
#active-tab {
  display: flex;
}
.inactive-tab {
  display: none;
}
.flow-multiline-value-container {
  position: absolute;
  height: 1.25em;
  width: fit-content;
  z-index: 1;
  display: flex;
  align-items: center;
}
.flow-parallel-value {
  display: inline-flex;
  padding-right: 0;
  align-items: center;
  margin-right: 0.625em;
}
.flow-parallel-value-name {
  font-family: "SpaceMono";
  background: #333;
  color: #f3f3f3;
  padding-left: 0.3125em;
  padding-right: 0.3125em;
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  border-radius: 0.125em;
  box-sizing: border-box;
  white-space: nowrap;
}
.flow-loop.value {
  font-size: inherit;
}
.flow-loop.value span {
  font-size: inherit;
}
.flow-loop-value-name {
  font-family: "SpaceMono";
  background: #333;
  box-shadow: 0.0625em 0.0625em 0.0625em #242424;
  color: #f3f3f3;
  padding-left: 0.3125em;
  padding-right: 0.3125em;
  padding-top: 0;
  padding-bottom: 0;
  margin-right: 0em !important;
  display: flex;
  border-radius: 0.125em;
  box-sizing: border-box;
  white-space: nowrap;
}
.flow-loop-textarea {
  height: 100%;
  background-color: #333;
  font-family: monospace;
  border: 0;
  padding: 0;
  padding-right: 0.1875em;
  overflow: hidden;
  resize: none;
  color: #f3f3f3;
  outline: none;
  cursor: text;
  opacity: 0.7;
}
.flow-loop-textarea:focus {
  opacity: 1;
}
.flow-loop-textarea::placeholder {
  color: #f3f3f3;
}
.line-diff-added {
  background-color: rgba(63,185,80,0.18);
  border-left: 0.1875em solid #3fb950;
}
.line-diff-modified {
  background-color: rgba(210,153,34,0.18);
  border-left: 0.1875em solid #d29922;
}
.line-diff-removed {
  background-color: rgba(248,81,73,0.18);
  border-left: 0.1875em solid #f85149;
}
.code-tracer-logo {
  width: 32px;
  height: 32px;
  display: inline-block;
  border-radius: 100%;
  border: 3px dashed #f00;
}
.future {
  color: #fff;
  opacity: 0.5;
}
.line-before,
.line-before-or-on {
  color: #f3f3f3;
  opacity: 1;
}
.line-after {
  color: TERMINAL_LESS_VISIBLE_COLOR;
  opacity: 0.7;
}
.terminal {
  color: #f3f3f3;
  height: 100%;
}
.terminal .terminal-line {
  cursor: pointer;
  padding-left: 0.5em;
  color: #f3f3f3;
  display: flex;
  font-family: "SpaceMono" !important;
}
.terminal pre {
  color: #f3f3f3;
  height: 100%;
}
.terminal-output,
.terminal-input {
  background-color: transparent;
  color: #ababab;
  word-wrap: break-all;
  white-space: pre-line;
  cursor: pointer;
}
#welcomeScreen {
  position: fixed;
  top: 2.125em;
  left: 0;
  right: 0;
  bottom: 2em;
  z-index: 10;
  display: none;
  pointer-events: none;
  overflow: auto;
}
#welcomeScreen .window-menu {
  align-items: start;
  height: 1.75em;
}
#welcomeScreen .welcome-screen-root {
  height: 100%;
  min-height: 100%;
}
.welcome-screen-loading-overlay {
  position: absolute;
  top: 0;
  background-color: #000;
  width: 100%;
  height: 100%;
  opacity: 0.8;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.welcome-screen-loading-overlay-text {
  padding-left: 0.625em;
  color: #fff;
  font-size: x-large;
  font-style: italic;
}
.welcome-screen-loading-overlay .welcome-screen-loading-overlay-icon {
  width: 2em;
  height: 2em;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../../public/resources/welcome/loading_sign_dots_32.svg");
  animation: infinite linear;
  animation-name: loading;
  animation-duration: 3s;
}
.welcome-logo {
  background-image: url("../../public/resources/shared/codetracer_welcome_logo.svg");
  min-width: 3.875em;
  min-height: 3.875em;
  background-size: 3.875em 3.875em;
  background-position: center;
  margin-right: 0.75em;
  background-repeat: no-repeat;
}
.welcome-screen-wrapper {
  color: #f3f3f3;
  background-color: #242424;
  min-height: 100%;
  height: 100%;
  position: relative;
  width: 100%;
  z-index: 50;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0;
  pointer-events: auto;
}
.welcome-screen-wrapper .welcome-screen {
  position: relative;
  height: fit-content;
  background-color: gradien;
  width: 56.25em;
  padding: 3em;
  padding-bottom: 3.75em;
  background: #242424;
  display: flex;
  flex-direction: column;
  border-radius: 0.75em;
  align-items: center;
  border: 0.0625em solid #3a3a3a;
}
.welcome-screen-wrapper .welcome-screen.welcome-screen-loading {
  cursor: wait !important;
}
.welcome-screen-wrapper .welcome-screen .welcome-title {
  position: relative;
  font-family: "SpaceMono";
  text-align: start;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  color: #f3f3f3;
  width: -webkit-fill-available;
}
.welcome-screen-wrapper .welcome-screen .welcome-title .welcome-text {
  word-break: break-word;
  display: flex;
  align-items: center;
  font-weight: 500;
  width: 19em;
  font-size: 2em;
  letter-spacing: -0.02em;
}
.welcome-screen-wrapper .welcome-screen .welcome-title .welcome-version {
  color: #727272;
  font-size: 0.75em;
  font-family: "SpaceMono";
  font-weight: 400;
  line-height: normal;
  text-align: center;
}
.welcome-screen-wrapper .welcome-screen .welcome-content {
  display: flex;
  flex-direction: row;
  gap: 1em;
  width: -webkit-fill-available;
}
.welcome-screen-wrapper .welcome-screen .welcome-left-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.welcome-screen-wrapper .welcome-screen .welcome-right-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.welcome-screen-wrapper .welcome-screen .start-options {
  position: relative;
  display: flex;
  width: -webkit-fill-available;
  gap: 0.5em;
  justify-content: space-between;
}
.welcome-screen-wrapper .welcome-screen .start-options .start-option {
  position: relative;
  right: 0;
  display: flex;
  cursor: pointer;
  justify-content: center;
  font-family: "SpaceGrotesk";
}
.welcome-screen-wrapper .welcome-screen .start-options .start-option.hovered {
  opacity: 1;
}
.welcome-screen-wrapper .welcome-screen .start-options .inactive-start-option {
  opacity: 0.2;
  pointer-events: none;
}
.welcome-screen-wrapper .welcome-screen .start-options .inactive-start-option.hovered {
  color: inherit;
  opacity: 0.2;
}
.welcome-screen-wrapper .welcome-screen .start-options .start-option-icon {
  width: 6.25em;
  height: 6.25em;
  background-image: url("../../public/resources/welcome/Play_50_dark.svg");
  background-repeat: no-repeat;
  background-position: center;
}
.welcome-screen-wrapper .welcome-screen .start-options .start-option-icon.hovered {
  background-image: url("../../public/resources/welcome/Play_50_blue.svg");
  opacity: 1;
}
.welcome-screen-wrapper .welcome-screen .start-options .start-option-name {
  text-align: center;
  font-size: 0.875em;
  font-weight: 500;
  letter-spacing: -0.00875em;
  line-height: 1.125em;
  background-color: #333;
  display: flex;
  align-items: center;
  color: #f3f3f3;
  justify-content: center;
  white-space: nowrap;
  padding: 0.375em;
  padding-left: 0.875em;
  padding-right: 0.875em;
  border-radius: 0.375em;
}
.welcome-screen-wrapper .welcome-screen .start-options .start-option-name.hovered {
  outline: 0.0625em solid #565656;
  opacity: 1;
}
.welcome-screen-wrapper .welcome-screen .recent-traces {
  position: relative;
  width: -webkit-fill-available;
  background-color: #282828;
  border-radius: 0.375em;
  padding: 0.5em;
  margin-top: 3em;
  margin-bottom: 3em;
  padding-right: 0;
  overflow: visible;
}
.welcome-screen-wrapper .welcome-screen .recent-traces-title {
  text-align: start;
  font-size: 1.125em;
  font-weight: 500;
  line-height: 1.125em;
  letter-spacing: -0.01125em;
  font-family: "SpaceGrotesk";
  margin-bottom: 0.375em;
}
.welcome-screen-wrapper .welcome-screen .recent-traces-list {
  max-height: 10.75em;
  overflow-y: auto;
  overflow-x: visible;
  clip-path: none;
}
.welcome-screen-wrapper .welcome-screen .recent-traces-list .empty-state-message {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
.welcome-screen-wrapper .welcome-screen .recent-traces-list .empty-state-message .empty-state-welcome {
  font-size: 1em;
  font-weight: 600;
  font-family: "SpaceGrotesk";
  color: #f3f3f3;
}
.welcome-screen-wrapper .welcome-screen .recent-traces-list .empty-state-message .empty-state-text {
  font-size: 0.8125em;
  font-family: "SpaceGrotesk";
  color: #888;
  line-height: 1.5;
}
.welcome-screen-wrapper .welcome-screen .recent-traces-list .recent-trace-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.welcome-screen-wrapper .welcome-screen .recent-traces-list .recent-trace {
  color: #fed7aa;
  background-color: #333;
  height: 1.75em;
  margin-top: 0.125em;
  margin-bottom: 0.375em;
  display: flex;
  position: relative;
  text-align: left;
  border-radius: 0.25em;
  width: -webkit-fill-available;
}
.welcome-screen-wrapper .welcome-screen .recent-traces-list .recent-trace:hover {
  cursor: pointer;
  background-color: #333;
}
.welcome-screen-wrapper .welcome-screen .recent-traces-list .recent-trace:hover .recent-trace-tooltip {
  opacity: 1;
  visibility: visible;
  transition-delay: 0.5s;
}
.welcome-screen-wrapper .welcome-screen .recent-traces-list .recent-trace .recent-trace-title {
  display: flex;
  align-items: center;
  position: relative;
  flex: 1;
  min-width: 0;
}
.welcome-screen-wrapper .welcome-screen .recent-traces-list .recent-trace .recent-trace-title .separate-bar {
  border-color: #3a3a3a;
}
.welcome-screen-wrapper .welcome-screen .recent-traces-list .recent-trace .recent-trace-title .recent-trace-title-time {
  margin-left: 0.5em;
  margin-right: 0.5em;
  font-size: 0.75em;
  font-family: "SpaceGrotesk";
  line-height: 1.125em;
  color: #888;
  white-space: nowrap;
}
.welcome-screen-wrapper .welcome-screen .recent-traces-list .recent-trace .recent-trace-title .recent-trace-title-content {
  margin-left: 0.5em;
  margin-right: 0.5em;
  font-size: 0.875em;
  font-weight: 500;
  font-family: "SpaceGrotesk";
  line-height: 1.125em;
  letter-spacing: -0.00875em;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1;
}
.welcome-screen-wrapper .welcome-screen .recent-traces-list .recent-trace .recent-trace-tooltip {
  position: fixed;
  background-color: #1b1b1b;
  color: #f3f3f3;
  padding: 0.5em 0.75em;
  font-size: 0.75em;
  font-family: "SpaceMono";
  border-radius: 0.25em;
  white-space: pre-line;
  box-shadow: 0 0.25em 0.75em rgba(0,0,0,0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
  z-index: 1000;
  max-width: 40em;
  line-height: 1.4;
  overflow-wrap: break-word;
  word-break: break-all;
  left: -9999px;
  top: -9999px;
  transform: none;
}
.welcome-screen-wrapper .welcome-screen .recent-folders {
  position: relative;
  width: -webkit-fill-available;
  background-color: #282828;
  border-radius: 0.375em;
  padding: 0.5em;
  margin-top: 3em;
  margin-bottom: 3em;
  padding-right: 0;
}
.welcome-screen-wrapper .welcome-screen .recent-folders-title {
  text-align: start;
  font-size: 1.125em;
  font-weight: 500;
  line-height: 1.125em;
  letter-spacing: -0.01125em;
  font-family: "SpaceGrotesk";
  margin-bottom: 0.375em;
}
.welcome-screen-wrapper .welcome-screen .recent-folders-list {
  max-height: 10.75em;
  overflow-y: scroll;
  overflow-x: visible;
}
.welcome-screen-wrapper .welcome-screen .recent-folders-list .empty-state-message {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
.welcome-screen-wrapper .welcome-screen .recent-folders-list .empty-state-message .empty-state-welcome {
  font-size: 1em;
  font-weight: 600;
  font-family: "SpaceGrotesk";
  color: #f3f3f3;
}
.welcome-screen-wrapper .welcome-screen .recent-folders-list .empty-state-message .empty-state-text {
  font-size: 0.8125em;
  font-family: "SpaceGrotesk";
  color: #888;
  line-height: 1.5;
}
.welcome-screen-wrapper .welcome-screen .recent-folders-list .recent-folder-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.welcome-screen-wrapper .welcome-screen .recent-folders-list .recent-folder {
  color: #fed7aa;
  background-color: #333;
  height: 1.75em;
  margin-top: 0.125em;
  margin-bottom: 0.375em;
  display: flex;
  position: relative;
  text-align: left;
  border-radius: 0.25em;
  width: -webkit-fill-available;
}
.welcome-screen-wrapper .welcome-screen .recent-folders-list .recent-folder:hover {
  cursor: pointer;
  background-color: #333;
}
.welcome-screen-wrapper .welcome-screen .recent-folders-list .recent-folder .recent-folder-name {
  margin-left: 0.5em;
  margin-right: 0.5em;
  font-size: 0.875em;
  font-weight: 500;
  font-family: "SpaceMono";
  line-height: 1.125em;
  letter-spacing: -0.00875em;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
}
.welcome-screen-wrapper .new-record-screen {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}
.welcome-screen-wrapper .new-record-screen hr {
  border-color: #333;
}
.welcome-screen-wrapper .new-record-screen .new-record-screen-content {
  position: relative;
  width: 43.75em;
  background: #242424;
  border: 0.0625em solid #3a3a3a;
  border-radius: 0.75em;
  padding: 3em;
  padding-bottom: 3.75em;
}
.welcome-screen-wrapper .new-record-screen .new-record-screen-content .welcome-logo {
  min-width: 2.5em;
  max-width: 2.5em;
  min-height: 2.5em;
  background-size: 2.5em 2.5em;
}
.welcome-screen-wrapper .new-record-screen .new-record-title {
  position: relative;
  font-size: 2em;
  font-family: "SpaceMono";
  font-weight: 500;
  text-align: start;
  width: 100%;
  letter-spacing: -0.02em;
  line-height: 2em;
  margin-bottom: 2em;
  margin-top: 2em;
}
.welcome-screen-wrapper .new-record-screen .new-record-form .new-record-form-row {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: 0.3125em;
}
.welcome-screen-wrapper .new-record-screen .new-record-form .new-record-form-row .form-validation-row {
  height: 1em;
  font-size: 0.875em;
  position: relative;
  width: 100%;
  text-indent: 13vw;
  font-style: italic;
  color: #fca5a5;
}
.welcome-screen-wrapper .new-record-screen .new-record-form .new-record-form-row .new-record-input-row {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 1em;
}
.welcome-screen-wrapper .new-record-screen .new-record-form .new-record-form-row .checkmark {
  position: relative;
  margin-right: 0.5em !important;
  top: 0 !important;
}
.welcome-screen-wrapper .new-record-screen .new-record-form .new-record-form-row label {
  margin-bottom: 0 !important;
  position: relative;
  width: fit-content;
  text-align: left;
  color: #c8c8c8;
  font-family: "SpaceMono";
  font-weight: bold;
  font-size: 0.875em;
  font-weight: 400;
}
.welcome-screen-wrapper .new-record-screen .new-record-form .new-record-form-row:last-child {
  display: flex;
  flex-direction: row !important;
  justify-content: flex-start !important;
}
.welcome-screen-wrapper .new-record-screen .new-record-result-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1em;
  border-radius: 0.375em;
  padding: 0.5em;
}
.welcome-screen-wrapper .new-record-screen .new-record-result-wrapper.empty {
  outline: none;
}
.welcome-screen-wrapper .new-record-screen .new-record-result-wrapper.in-progress {
  outline: 0.0625em solid #93c5fd;
}
.welcome-screen-wrapper .new-record-screen .new-record-result-wrapper.failed {
  outline: 0.0625em solid #fca5a5;
}
.welcome-screen-wrapper .new-record-screen .new-record-result-wrapper.success {
  outline: 0.0625em solid #bbf7d0;
}
.welcome-screen-wrapper .new-record-screen .new-record-result-wrapper .new-record-result {
  position: relative;
  width: 100%;
  text-align: center;
  font-family: "SpaceMono";
  display: flex;
  align-items: center;
}
.welcome-screen-wrapper .new-record-screen .new-record-result-wrapper .new-record-result.empty {
  display: none;
}
.welcome-screen-wrapper .new-record-screen .new-record-result-wrapper .new-record-result .new-record-status-icon {
  position: relative;
  width: 1.5em;
  height: 1.5em;
  background-repeat: no-repeat;
  background-size: 1.125em 1.125em;
  background-position: center;
  margin-right: 0.25em;
}
.welcome-screen-wrapper .new-record-screen .new-record-result-wrapper .new-record-result .new-record-status-icon.in-progress {
  background-image: url("../../public/resources/welcome/loading_sign_dots_128.svg");
  animation: infinite linear;
  animation-name: loading;
  animation-duration: 3s;
}
.welcome-screen-wrapper .new-record-screen .new-record-result-wrapper .new-record-result .new-record-status-icon.failed {
  background-image: url("../../public/resources/notifications/error_icon_dark.svg");
}
.welcome-screen-wrapper .new-record-screen .new-record-result-wrapper .new-record-result .new-record-status-icon.success {
  background-image: url("../../public/resources/notifications/success_icon_dark.svg");
}
.welcome-screen-wrapper .new-record-screen .new-record-result-wrapper .new-record-result .new-record-result-info {
  text-align: center;
  position: relative;
  width: 100%;
  height: 1.875em;
  font-family: "SpaceMono";
  font-size: 1.25em;
}
.online-functionality-buttons {
  display: flex;
  padding-right: 0.125em;
}
.online-functionality-buttons .recent-trace-buttons {
  margin-left: 0.5em;
  margin-top: 0.125em;
  margin-bottom: 0.375em;
  height: 1.75em;
  width: 1.75em;
  background-color: #333;
  border-radius: 0.25em;
  cursor: pointer;
}
.online-functionality-buttons upload:hover {
  outline: 0.0625em solid #3a3a3a;
}
.online-functionality-buttons upload:active {
  background-color: #282828;
}
.online-functionality-buttons upload.trace-info-button-active {
  background-color: #fdba74;
}
.online-functionality-buttons .recent-trace-buttons-image {
  background-repeat: no-repeat;
  background-size: 1em 1em;
  background-position: center;
  height: 1.75em;
}
.online-functionality-buttons .progress-circle {
  width: 1.25em;
  height: 1.25em;
  border-radius: 50%;
  position: absolute;
  background-image: conic-gradient(#6b6b6b 0% 0%, #2c2c2c 0% 100%);
  background-size: auto;
  z-index: 1;
  transform: translate(0.25em, 0.25em);
}
.online-functionality-buttons .inner-circle {
  width: 0.875em;
  height: 0.875em;
  border-radius: 50%;
  background-color: #333;
  position: absolute;
  z-index: 2;
  transform: translate(0.4375em, 0.4375em);
}
.online-functionality-buttons #progress-bar {
  position: relative;
}
.online-functionality-buttons #trace-upload-button {
  background-image: url("../../public/resources/welcome/welcome_screen_upload_button_dark.svg");
}
.online-functionality-buttons #trace-copy-button {
  background-image: url("../../public/resources/welcome/welcome_screen_copy_button_dark.svg");
}
.online-functionality-buttons #trace-delete-button {
  background-image: url("../../public/resources/welcome/welcome_screen_delete_button_dark.svg");
}
.online-functionality-buttons #trace-info-button {
  background-image: url("../../public/resources/welcome/welcome_screen_info_button_dark.svg");
}
.online-functionality-buttons #trace-info-button-active {
  background-image: url("../../public/resources/welcome/welcome_screen_info_active_button_dark.svg");
}
.online-functionality-buttons .welcome-path-active {
  opacity: 1;
  visibility: visible;
  height: 1.5em;
  left: calc(100% + 0.5em);
  position: absolute;
  width: fit-content;
}
.online-functionality-buttons .welcome-path-active:after {
  top: 18%;
  left: -0.875em;
  border-color: transparent #1b1b1b transparent transparent !important;
}
.recent-trace-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.recent-transactions {
  display: flex;
  text-align: left;
  font-size: 1.125em;
  font-weight: 700;
  background-color: #282828;
  border-radius: 0.375em;
  padding: 1em;
  flex-direction: column;
}
.table-column-names {
  display: flex;
  text-align: left;
  justify-content: space-between;
  font-size: 0.875em;
  font-weight: 400;
  font-family: "SpaceMono";
}
.table-column-names #tx-hash {
  width: 7.375em;
}
.table-column-names #tx-status {
  width: 4.5em;
  padding-left: 0.25em;
}
.table-column-names #tx-from {
  width: 7.5em;
}
.table-column-names #tx-to {
  width: 7.75em;
}
.table-column-names #tx-when {
  width: 3.75em;
}
.table-column-names #tx-action {
  width: 3.125em;
  text-align: end;
}
.recent-transactions-container {
  display: flex;
  justify-content: space-between;
  font-size: 0.875em;
  font-style: normal;
  font-weight: 400;
}
.recent-transactions {
  max-height: 22.5em;
  overflow: scroll;
}
.recent-transaction {
  display: flex;
  justify-content: space-between;
  text-align: center;
  align-items: center;
  width: -webkit-fill-available;
  color: #fed7aa;
  font-family: "SpaceMono";
}
.recent-transaction #tx-success {
  color: #bbf7d0;
}
.recent-transaction #tx-unsuccess {
  color: #fca5a5;
}
.action-transaction-button {
  margin-left: 0.5em;
  margin-top: 0.125em;
  margin-bottom: 0.375em;
  height: 1.75em;
  width: 1.75em;
  background-color: #333;
  border-radius: 0.25em;
  cursor: pointer;
  background-image: url("../../public/resources/welcome/transaction_action_button_dark.svg");
  background-repeat: no-repeat;
  background-position: center;
  min-width: 1.75em;
}
.recent-transaction-title {
  margin-bottom: 1em;
}
.transactions {
  margin-bottom: 0 !important;
}
.stylus-content {
  width: 53.125em !important;
}
.shell-component {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  min-height: 0;
  box-sizing: border-box;
  background-color: #282828;
  color: #f3f3f3;
  font-family: "FiraCode", monospace;
  font-size: 13px;
  overflow: hidden;
}
.shell-component .shell-output {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 0 0.5em 0.5em;
}
.shell-component .shell-input-row {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0;
  min-height: 16px;
  padding: 8px;
  border-top: 0;
}
.shell-component .shell-prompt,
.shell-component .shell-history-indicator,
.shell-component .shell-scroll-indicator {
  color: #f3f3f3;
}
.shell-component .shell-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 16px;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  color: #f3f3f3;
  font: inherit;
  padding: 0;
  outline: 0;
}
.shell-component .shell-input:focus {
  border-color: transparent;
}
.shell-component .shell-input::placeholder {
  color: transparent;
}
.shell-component .shell-history-indicator {
  flex: 0 0 auto;
  padding: 0 0.5em 0.35em;
}
.shell-container {
  display: flex;
  height: 100%;
  width: 100%;
  position: relative;
}
.shell-container .shell-events {
  width: 100%;
  position: absolute;
  display: inline-flex;
  justify-content: right;
}
.shell-container .custom-compiler-flag-command .shell-event-status {
  background-color: #1d81d2;
}
.shell-container .custom-compiler-flag-command .shell-event-range {
  background-color: #1d81d2;
}
.shell-container .linking-binary .shell-event-status {
  background-color: #de1fde;
}
.shell-container .linking-binary .shell-event-range {
  background-color: #de1fde;
}
.shell-container .recording-command .shell-event-status {
  background-color: #55e855;
}
.shell-container .recording-command .shell-event-range {
  background-color: #55e855;
}
.shell-container .shell-event {
  width: 20px;
  position: relative;
}
.shell-container .shell-event .shell-event-type {
  position: absolute;
  font-size: 12px;
  width: 100%;
  color: #808080;
  font-style: italic;
  top: 100%;
  left: -8px;
  transform-origin: 0 0;
  transform: rotate(270deg);
  overflow: hidden;
  text-overflow: ellipsis;
}
.shell-container .shell-event .shell-event-range {
  position: absolute;
  top: 8px;
  left: 9px;
  height: calc(100% - 8px);
  width: 2px;
  border-radius: 2px;
  overflow: hidden;
}
.shell-container .shell-event .shell-event-range .shell-event-summary {
  display: none;
}
.shell-container .shell-event .shell-event-status {
  position: absolute;
  top: 0;
  left: 2px;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  border-radius: 8px;
  background-position: center;
  font-size: 12px;
  color: #fff;
  text-indent: 20px;
  font-weight: bold;
}
.shell-container .shell-event .shell-event-status.working {
  background-image: url("../../public/resources/shell/loading_sign_dots_10.svg");
  animation: infinite linear;
  animation-name: loading;
  animation-duration: 1.5s;
}
.shell-container .shell-event .shell-event-status.error {
  background-image: url("../../public/resources/shell/error_sign_16.svg");
}
.shell-container .shell-event .shell-event-status.done {
  background-image: url("../../public/resources/shell/done_sign_16.svg");
}
@-moz-keyframes loading {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes loading {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes loading {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes loading {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.shell-container .shell-event:hover .shell-event-range {
  position: absolute;
  top: 0;
  left: 2px;
  width: 300px;
  border-radius: 8px;
  transition: width 2s;
  height: 100px;
  z-index: 10;
}
.shell-container .shell-event:hover .shell-event-status {
  z-index: 10;
  left: 10px;
  top: 8px;
  transition: top 0.5s, left 0.5s;
}
.shell-container .shell-event:hover .shell-event-status.working {
  background-image: url("../../public/resources/shell/loading_sign_dots_20.svg");
}
.shell-container .shell-event:hover .shell-event-status.error {
  background-image: url("../../public/resources/shell/error_sign_32.svg");
}
.shell-container .shell-event:hover .shell-event-status.done {
  background-image: url("../../public/resources/shell/done_sign_32.svg");
}
.shell-container .shell-event:hover .shell-event-summary {
  position: absolute;
  font-size: 16px;
  color: #fff;
  display: block;
  padding: 10px;
  margin-left: 20px;
}
#ROOT > .component-container > .shell-container {
  height: calc(100% + 28px);
}
.shell-gutter {
  background-color: #282828;
  border-right: 2px solid #808080;
  height: 100%;
  position: absolute;
  visibility: visible !important;
  width: 35px;
  z-index: 5;
}
.terminal.xterm {
  margin-top: 8px;
  width: 100%;
  overflow: auto;
  background-color: transparent;
  border-radius: 8px;
  font-family: "SpaceMono";
}
.xterm-screen {
  height: 100% !important;
  padding: 8px;
}
.xterm-screen .xterm-rows {
  position: relative;
  color: #f3f3f3 !important;
}
.xterm-screen .xterm-rows div {
  overflow: visible !important;
  word-wrap: break-word;
}
.xterm-screen .xterm-rows div span {
  cursor: pointer;
}
.xterm-screen canvas {
  left: 80px !important;
}
.xterm-viewport {
  position: relative;
  width: 100%;
}
.xterm-viewport .xterm-scroll-area {
  position: relative !important;
}
.xterm-viewport .xterm-decoration {
  visibility: visible;
}
.xterm-helpers {
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}
.eventLogComponent-columns {
  position: relative;
}
.eventLog-switch {
  display: none;
}
.eventLog-categories {
  display: inherit;
  flex-wrap: wrap;
}
.eventLog-medium-control-button {
  user-select: none;
  border-radius: 6px;
  color: #f3f3f3;
  white-space: nowrap;
  cursor: pointer;
  height: 28px;
  margin-left: 10px;
  background-color: #242424;
  text-align: center;
  transform: rotate(0deg);
  width: fit-content;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: start;
  padding-left: 8px;
  padding-right: 8px;
  font-weight: 400;
}
.eventLog-medium-control-button:hover {
  background-color: #282828;
  color: #f3f3f3;
}
.eventLog-medium-control-button:active {
  background-color: #333;
}
.eventLog-medium-control-button.active {
  background-color: #333;
}
.eventLog-medium-control-button .custom-tooltip {
  width: 200px;
  text-align: start;
  font-size: 12px;
  line-height: 16px;
  right: -46px;
}
#eventLog-category-filter {
  z-index: 4;
}
#eventLog-category-onlytrace {
  z-index: 3;
}
#eventLog-category-only-recorded-event {
  z-index: 2;
}
.eventLog-category-dropdown-button {
  font-family: "SpaceMono" !important;
  display: flex;
  justify-content: start;
  align-items: center;
  user-select: none;
  border-radius: 6px;
  color: #f3f3f3;
  cursor: pointer;
  height: 28px;
  width: 28px;
  margin-bottom: 10px;
  margin-left: 10px;
  background-color: #6366f1;
  background-image: EVENT_LOG_FA_DOWN_ICON;
  background-position: center;
  background-repeat: no-repeat;
  transform: translate(0px, 2px);
  position: relative;
  z-index: 1;
  font-weight: bold;
}
.eventLog-category-dropdown-button:focus {
  color: #f3f3f3;
  background-color: #4f46e5 !important;
  background-image: EVENT_LOG_FA_UP_ICON !important;
  outline: none !important;
  box-shadow: none !important;
}
.eventLog-category-dropdown-button:focus-visible {
  outline: none !important;
  box-shadow: inset 0 0 0 0.125em #3b82f6 !important;
}
.eventLog-category-dropdown-button:hover {
  background-color: #4f46e5;
  color: #f3f3f3;
}
.hamburger-dropdown-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: start;
}
.hamburger-dropdown {
  border-radius: 6px;
  color: #f3f3f3;
  cursor: pointer;
  height: 24px;
  background-color: #333;
  right: 0;
  width: 24px;
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hamburger-dropdown .fa-bars {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hamburger-dropdown:focus {
  outline: none !important;
  box-shadow: none !important;
  cursor: pointer;
  background-color: #282828;
}
.hamburger-dropdown:focus-visible {
  outline: none !important;
  box-shadow: inset 0 0 0 0.125em #3b82f6 !important;
  cursor: pointer;
  background-color: #282828;
}
.hamburger-dropdown:hover {
  background-color: #282828;
  color: #f3f3f3;
}
.dropdown-container {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: min(40em, calc(100vw - 2em));
  max-width: calc(100vw - 2em);
  border-radius: 0.375rem;
  border: 0.0625em solid #282828;
  background: #1b1b1b;
  color: #f3f3f3;
  z-index: 57;
  user-select: none;
  transform-origin: top left;
  overflow: hidden;
  box-shadow: 0 1em 2.5em rgba(0,0,0,0.32);
  top: 100%;
  font-size: 0.875rem;
  font-family: "SpaceGrotesk";
}
.dropdown-container::-webkit-scrollbar,
.dropdown-container ::-webkit-scrollbar {
  width: 0.375rem;
  height: 0.375rem;
}
.dropdown-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 !important;
  padding: 0;
  list-style: none;
  background: #161616;
}
.dropdown-list .dropdown-list-item {
  width: fit-content;
  min-width: 0;
  display: flex;
  align-items: center;
}
.dropdown-list .dropdown-list-item .ct-checkmark-field {
  width: 100%;
  min-width: 0;
  align-items: center;
  gap: 0.625em;
  color: #f3f3f3;
  line-height: 1.15;
}
.dropdown-list .dropdown-list-item .ct-checkmark {
  --ct-checkmark-size: 1rem;
  --ct-checkmark-border: rgba(255,255,255,0.22);
  --ct-checkmark-border-hover: rgba(255,255,255,0.34);
  --ct-checkmark-bg-hover: rgba(255,255,255,0.02);
}
.dropdown-list .dropdown-list-item .ct-checkmark-label {
  min-width: 0;
  white-space: nowrap;
}
.dropdown-list-row {
  display: grid;
  grid-template-columns: 9em minmax(0, 1fr);
  align-items: stretch;
  min-height: 2em;
  border-top: 0.0625em solid #282828;
  list-style: none;
}
.dropdown-list-row:first-child {
  border-top: none;
}
.dropdown-list-row > .ct-checkmark-field {
  padding: 0.25em 0.5em;
  align-items: center;
  gap: 0.375em;
  color: #b4b4b4;
  font-weight: 500;
  line-height: 1.15;
  border-right: 0.0625em solid #282828;
  background: #161616;
}
.dropdown-list-row > .ct-checkmark-field .ct-checkmark {
  --ct-checkmark-size: 1rem;
  --ct-checkmark-border: rgba(255,255,255,0.22);
  --ct-checkmark-border-hover: rgba(255,255,255,0.34);
  --ct-checkmark-bg-hover: rgba(255,255,255,0.02);
}
.dropdown-kind-items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.125em 0.75em;
  padding: 0.25em 0.625em;
}
.dropdown-kind-items .ct-checkmark-field {
  align-items: center;
  gap: 0.375em;
  color: #f3f3f3;
  line-height: 1.15;
  white-space: nowrap;
}
.dropdown-kind-items .ct-checkmark-field .ct-checkmark {
  --ct-checkmark-size: 1rem;
  --ct-checkmark-border: rgba(255,255,255,0.22);
  --ct-checkmark-border-hover: rgba(255,255,255,0.34);
  --ct-checkmark-bg-hover: rgba(255,255,255,0.02);
}
.toggle-buttons {
  display: flex;
  justify-content: start;
  gap: 0.25em;
  padding: 0 0.5rem;
  background: #1b1b1b;
  align-items: center;
  min-height: 2.4em;
  border-bottom: 0.0625em solid #282828;
}
.toggle-buttons .toggle-enabled-wrapper {
  display: flex;
  align-items: center;
  gap: 0.375em;
  margin-left: auto;
  padding-right: 0.25em;
}
.toggle-buttons .ct-tab {
  flex: 0 0 auto;
  height: 100%;
  padding: 0.4em 0.25em 0.375em;
  border-radius: 0;
  border-bottom: none;
  background: #1b1b1b;
  color: #b4b4b4;
  font-size: 1.05em;
  font-weight: 500;
  line-height: 1.1;
  position: relative;
  white-space: nowrap;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.toggle-buttons .ct-tab:hover:not([data-disabled="true"]):not([data-selected="true"]) {
  color: #f3f3f3;
  background: #262626;
  border-bottom: none;
}
.toggle-buttons .ct-tab[data-selected="true"] {
  color: #6366f1;
  background: #262626;
  border-bottom: none;
}
.toggle-buttons .ct-tab[data-selected="true"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.25em;
  height: 0.125em;
  border-radius: 999em;
  background: #6366f1;
}
.eventLog {
  font-family: Arial, Helvetica, sans-serif;
  height: 100%;
  display: flex;
  flex-direction: column;
/* thanks to https://stackoverflow.com/a/52977310 */
/* thanks to https://stackoverflow.com/a/52977310 */
/* TODO width */
}
.eventLog > .data-tables-footer {
  flex: 0 0 auto;
  min-height: 2.75em;
  align-items: center;
  font-family: "SpaceMono";
  font-size: 0.75rem;
  line-height: 1.1;
  color: #f3f3f3;
}
.eventLog > .data-tables-footer .data-tables-footer-info {
  margin-right: 0;
  gap: 0.25em;
  align-items: center;
  font-variant-numeric: tabular-nums;
}
.eventLog > .data-tables-footer .data-tables-footer-info .data-tables-footer-end-row,
.eventLog > .data-tables-footer .data-tables-footer-info .data-tables-footer-rows-count {
  padding-left: 0;
  padding-right: 0;
}
.eventLog > .data-tables-footer .data-tables-footer-input {
  width: 4.5em;
  min-width: 4.5em;
  max-width: 4.5em;
  height: 1.75em;
  max-height: 1.75em;
  margin: 0em 0em !important;
  padding: 0 0.75em;
  border-radius: 0.5em;
  border: 0.03125em solid transparent;
  background: #3e3e3b;
  color: #f3f3f3 !important;
  font-family: "SpaceMono";
  font-size: 1em !important;
  line-height: 1;
  text-align: left;
  box-sizing: border-box;
}
.eventLog > .data-tables-footer .data-tables-footer-input:hover {
  border-color: #333;
  background: #3e3e3b;
}
.eventLog > .data-tables-footer .data-tables-footer-input:focus-visible {
  outline: none !important;
  border-color: #333;
  background: #3e3e3b;
  box-shadow: 0 0 0 0.0625em #333;
}
.eventLog .eventLog-detailed-table {
  display: none;
}
.eventLog .eventLog-columns {
  flex-basis: 15%;
}
.eventLog .eventLog-columns .eventLog-button {
  width: 50px !important;
}
.eventLog .eventLog-index {
  min-width: 5ch;
  max-width: 5ch;
  padding-left: 0.5em;
  text-align: center;
}
.eventLog .eventLog-event {
  background-repeat: no-repeat;
  width: 1.125em;
  position: relative;
  cursor: pointer;
  min-width: 2.3ch !important;
  max-width: 2.3ch !important;
  height: 1.5em;
  display: flex;
  align-items: center;
}
.eventLog .eventLog-event .row-expander {
  background-size: 2ch !important;
  height: 1.125em !important;
  background-position: center !important;
  min-width: 2.3ch !important;
  max-width: 2.3ch !important;
}
.eventLog .eventLog-text {
  margin-left: 0.9375em;
  flex: auto;
  margin-right: 0.9375em;
  display: flex;
  overflow: visible;
  padding-right: 0.5em;
}
.eventLog .eventLog-fullpath {
  min-width: 20%;
  max-width: 20%;
  flex: auto;
}
.eventLog .eventLog-lowlevellocation {
  min-width: 25%;
  max-width: 25%;
  flex: auto;
}
.eventLog .eventLog-events {
  display: flex;
  flex-basis: 50%;
}
.eventLog .eventLog-events .dropdown {
  width: auto;
}
.eventLog .eventLog-button {
  width: 150px;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 14px;
  margin-bottom: 14px;
  padding: 0;
  font-size: 15px;
  font-weight: bold;
  height: 32px;
  line-height: 20px;
  text-align: center;
  border-radius: 10px;
  border: 0;
  cursor: pointer;
  background-color: #eef;
  color: #f00;
}
.eventLog .eventLog-normal-color-button,
.eventLog .eventLog-selected-kind,
.eventLog .eventLog-selected-category {
  color: #282828;
}
.eventLog .eventLog-button i {
  margin-left: 5px;
  vertical-align: -2px;
  color: #c8c8c8;
}
.eventLog .eventLog-header {
  position: relative;
  z-index: 1;
  height: fit-content;
  display: flex;
}
.eventLog .eventLog-detailed-index {
  width: calc(20%) !important;
  color: #000;
}
.eventLog .eventLog-detailed-event {
  width: calc(10%) !important;
}
.eventLog .eventLog-detailed-location {
  width: calc(70%) !important;
  height: 0.125em;
}
.eventLog .eventLog-detailed-text {
  width: calc(100%) !important;
  float: left;
}
.eventLog .eventLog-detailed-table > :nth-child(1) {
  display: none;
}
.eventLog .eventLog-detailed-table > :nth-child(1) tr {
  display: flex;
  flex-direction: column;
  background-color: #282828;
  width: 100%;
  border: 0.0625em #f3f3f3 solid;
  margin-bottom: 1.25em;
}
.eventLog .eventLog-detailed-table > :nth-child(1) thead tr {
  height: 1.25em;
}
label {
  text-align: start;
  min-width: 110px;
  color: #f3f3f3;
  font-weight: 400;
}
.eventLog-cell {
  text-overflow: ellipsis;
  white-space: pre;
  overflow: hidden;
  color: #f3f3f3;
  font-weight: bold;
  padding-right: 0.625em;
}
.eventLog-index,
.eventLog-event,
.eventLog-fullpath {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.eventLog-text {
  padding-top: 0.1em !important;
  line-height: 1.1em !important;
  padding-bottom: 0.1em !important;
  max-height: 1.5em;
  overflow: visible;
}
.dropdown-list-tag {
  display: flex;
  align-items: center;
  padding: 0.25em 0 0.25em 1em;
}
.dropdown-list-tag .ct-checkmark-field {
  font-weight: 500;
}
.dropdown-list-kind {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.25em 1em;
  align-items: center;
  padding: 0.25em 1em 0.25em 1.25em;
}
.paging-menu {
  display: flex;
}
.paging-menu .paging-page {
  background-color: #00f;
  color: #fff;
  cursor: pointer;
  margin-left: 2px;
  margin-right: 2px;
}
.paging-menu .paging-active-page {
  background-color: #ff0;
}
.eventLog .data-table tr {
  border-top: none !important;
  align-items: center !important;
}
.eventLog .data-table .direct-location-rr-ticks {
  overflow: visible !important;
  max-height: none !important;
  transform: none !important;
  padding-left: 0.5em !important;
  padding-right: 0.75em !important;
}
.eventLog .data-table .eventLog-cell.direct-location-rr-ticks {
  overflow: visible !important;
}
.paging-content {
  display: flex;
  flex-direction: column;
}
.paging-content .paging-child {
  display: flex;
}
.paging-content .paging-child .paging-view {
  flex-basis: 80%;
}
.paging-content .paging-child .paging-expand {
  color: #008000;
  flex-basis: 20%;
}
.paging-content .paging-child .paging-collapse {
  color: #f00;
  flex-basis: 20%;
}
.dt-empty {
  font-family: "SpaceGrotesk";
  padding-left: 0.5em;
  padding-top: 1em;
}
.build-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #282828;
}
.build-panel .build-header {
  padding: 4px 8px;
  font-size: 13px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.build-panel .build-header.build-failed {
  color: #f85149;
}
.build-panel .build-header.build-succeeded {
  color: #3fb950;
}
.build-panel .build-header-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.build-panel .build-ctrl-btn {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  user-select: none;
}
.build-panel .build-ctrl-btn:hover {
  color: rgba(255,255,255,0.9);
  background-color: rgba(255,255,255,0.1);
}
.build-panel .build-ctrl-btn.disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
.build-panel .build-ctrl-btn.active {
  color: #3fb950;
}
.build-panel .build-stop-btn {
  color: rgba(248,81,73,0.7);
}
.build-panel .build-stop-btn:hover {
  color: #f85149;
  background-color: rgba(248,81,73,0.15);
}
.build-panel .build-duration {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  margin-left: 4px;
  white-space: nowrap;
}
.build-panel .build-output-container {
  flex: 1;
  overflow: auto;
  font-family: "FiraCode" !important;
  font-size: 14px;
  line-height: 24px;
  white-space: pre-wrap;
}
.build-panel .build-output-container .build-stdout,
.build-panel .build-output-container .build-stderr,
.build-panel .build-output-container .build-output-line {
  min-height: 24px;
  padding-left: 0.5em;
  font-family: "FiraCode" !important;
  font-size: 14px;
  line-height: 24px;
  white-space: pre-wrap;
}
#build,
#build-errors {
  background-color: #282828;
  font-family: "FiraCode" !important;
  font-size: 14px;
  line-height: 24px;
  white-space: pre-wrap;
  overflow: auto;
  height: 100%;
}
#build .build-stdout,
#build-errors .build-stdout,
#build .build-error,
#build-errors .build-error {
  color: #f3f3f3;
}
#build .build-stdout,
#build-errors .build-stdout,
#build .build-stderr,
#build-errors .build-stderr,
#build .build-error,
#build-errors .build-error,
#build .build-output-line,
#build-errors .build-output-line {
  min-height: 24px;
  padding-left: 0.5em;
  font-family: "FiraCode" !important;
  font-size: 14px;
  line-height: 24px;
  white-space: pre-wrap;
}
#build .build-stderr,
#build-errors .build-stderr {
  color: #f85149;
  font-style: italic;
}
#build .build-location,
#build-errors .build-location {
  cursor: pointer;
}
#build .build-clickable,
#build-errors .build-clickable {
  cursor: pointer;
}
#build .build-clickable:hover,
#build-errors .build-clickable:hover {
  text-decoration: underline;
}
#build .build-line-error,
#build-errors .build-line-error {
  color: #f85149;
}
#build .build-line-warning,
#build-errors .build-line-warning {
  color: #d29922;
}
#build .build-line-info,
#build-errors .build-line-info {
  color: #f3f3f3;
}
#build .build-error,
#build-errors .build-error {
  border: #f3f3f3 solid 1px;
}
#errors {
  background-color: #282828;
  color: #f3f3f3;
}
#active-notifications {
  width: fit-content;
  height: fit-content;
  bottom: 38px;
  display: flex;
  flex-direction: column-reverse;
  gap: 0.5rem;
  position: fixed;
  z-index: 100;
  right: 8px;
}
#status {
  position: relative;
  width: 100vw;
  display: flex;
  flex-direction: column-reverse;
  font-family: "SpaceGrotesk";
}
#status > #active-notifications {
  -webkit-app-region: no-drag;
}
#status #status-base {
  bottom: 0;
  background-color: #1b1b1b;
  height: 2em;
  font-size: 1rem;
  position: fixed;
  width: 100%;
  z-index: 100 !important;
  display: flex;
  align-items: stretch;
  overflow: visible;
  padding-top: 0.25em;
  padding-bottom: 0.25em;
  -webkit-app-region: drag;
}
#status #status-base > * {
  -webkit-app-region: no-drag;
}
#status #status-base > #auto-hide-bottom-strip {
  -webkit-app-region: drag;
}
#status #status-base > #auto-hide-bottom-strip .auto-hide-strip-tab {
  -webkit-app-region: no-drag;
}
#status #status-base .checkbox {
  display: inherit;
  height: auto;
  margin-bottom: 0px !important;
}
#status #status-base .checkbox-text {
  white-space: nowrap;
}
#status #status-base .toggle-switch {
  display: flex;
  align-items: center;
}
#status #status-base .status-button {
  position: relative;
  float: left;
  width: max-content;
  margin-left: 20px;
  background-color: #282828;
  text-align: center;
  padding-left: 20px;
  padding-right: 20px;
  height: 21px;
  line-height: 21px;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 2px;
  margin-bottom: 2px;
  user-select: none;
}
#status #status-base .status-button-clicked {
  background-color: #333;
  color: #565656;
  float: left;
  width: max-content;
  margin-left: 20px;
  text-align: center;
  padding-left: 20px;
  padding-right: 20px;
  height: 21px;
  line-height: 21px;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 2px;
  margin-bottom: 2px;
}
#status #status-base .new-notifications-counter {
  position: absolute;
  top: -14px;
  right: 4px;
  padding-left: 6px;
  padding-right: 6px;
  background-color: #f00;
  border-radius: 10.5px;
  color: #fff;
  font-weight: bold;
}
#status #status-base .location-path {
  float: left;
  width: auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: end;
  user-select: none;
}
#status #status-base .status-inline {
  user-select: none;
}
#status #status-base .ready-status {
  user-select: none;
}
#status #status-base .disconnected-status {
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  margin-right: 12px;
  border: 1px solid #fdba74;
  border-radius: 6px;
  color: #fdba74;
  font-weight: 600;
}
#status #status-base .whitespace-set {
  width: 10px;
  float: left;
  font-size: 7px;
  color: #3a3a3a;
  margin-top: 4px;
  margin-bottom: 2px;
}
#status #status-base .whitespace-change {
  height: 8px;
  width: 10px;
  cursor: pointer;
}
#status #status-base .whitespace-change :hover {
  color: #f3f3f3;
}
#status #status-base .whitespace-change i {
  display: block !important;
}
#status #status-base .whitespace-label {
  width: 80px;
  float: left;
  margin-left: 10px;
}
#status #status-base .status-buttons {
  float: left;
  margin-left: 2vw;
  display: flex;
}
#status #status-base #file-info-status {
  position: absolute;
  left: -9999px;
  margin-left: 0.6em;
  display: flex;
  align-items: center;
  gap: 0.6em;
}
#status #status-base #file-info-status-editor-whitespace {
  margin-left: 2vw;
  float: left;
  width: 100px !important;
}
#status #status-base #operation-status {
  float: left;
  width: 200px;
  white-space: nowrap;
  color: #bbf7d0;
  font-family: "SpaceMono";
}
#status #status-base #version-control-status {
  margin-left: 10px;
  float: left;
}
#status #status-base .status-right {
  position: absolute;
  left: -9999px;
  float: right;
  width: auto;
  display: flex;
  padding-right: 8px;
  min-width: 0;
}
#status #status-base #location-status {
  float: left;
  display: flex;
  align-items: center;
  min-width: 0;
}
#status #status-base .status-flow-buttons .status-flow-types-list {
  position: absolute;
  top: -85px;
  color: #fff;
  text-align: left;
  background-color: #282828;
  border-radius: 5px;
  padding: 10px;
  display: none;
}
#status #status-base .status-flow-buttons .status-flow-types-list-active {
  position: absolute;
  top: -85px;
  color: #fff;
  text-align: left;
  background-color: #282828;
  border-radius: 5px;
  padding: 10px;
  display: block;
}
#status #status-base .status-flow-buttons .status-flow-type {
  border-radius: 5px;
  padding-left: 5px;
  padding-right: 5px;
}
#status #status-base .status-flow-buttons .status-flow-type:hover {
  background-color: #808080;
}
#status #notifications-container {
  width: 100%;
  max-height: 50vh;
  overflow-y: scroll;
  background-color: #282828;
  border-top: 5px solid #333;
  border-left: 5px solid #333;
  border-right: 5px solid #333;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  color: #f3f3f3;
  position: absolute;
  z-index: 100;
}
#status #notifications-container .status-notification-header {
  color: #5885ac !important;
  text-indent: 10px;
  font-family: arial;
  font-weight: bold;
}
#status #bug-report-container {
  width: 50%;
  max-height: 50vh;
  overflow-y: scroll;
  background-color: #282828;
  border-top: 5px solid #333;
  border-left: 5px solid #333;
  border-right: 5px solid #333;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  color: #f3f3f3;
  position: absolute;
  z-index: 100;
  transform: translate(50%, 0);
}
#status #bug-report-container .bug-report-header {
  color: #5885ac !important;
  text-indent: 10px;
  font-family: arial;
  font-weight: bold;
}
#status #bug-report-container .bug-report-text {
  color: #5885ac !important;
  text-indent: 10px;
  margin-left: 10%;
  font-family: arial;
  font-weight: bold;
}
#status #bug-report-container .bug-report-description {
  height: 150px;
}
#status #bug-report-container #bug-report-title {
  margin-left: 10% !important;
}
#status #bug-report-container textarea {
  color: #f3f3f3;
  height: 100px;
  min-height: 100px;
  max-height: 300px;
  font-size: 17px !important;
  border: 0;
  background-color: #333;
  width: 80%;
  margin-left: 10% !important;
  margin-bottom: 5px !important;
  border-radius: 15px;
  padding-left: 15px;
  overflow-wrap: break-word;
}
#status #bug-report-container textarea:focus-visible {
  outline: none !important;
  box-shadow: inset 0 0 0 0.125em #3b82f6 !important;
}
#status #bug-report-container .bug-report-button-container {
  display: flex;
  justify-content: space-between;
  margin-left: 10%;
}
#status #bug-report-container .bug-report-button {
  padding-top: 5px;
  padding-bottom: 5px;
  margin-bottom: 10px;
}
#status #bug-report-container .bug-report-button:focus-visible {
  outline: none !important;
  box-shadow: inset 0 0 0 0.125em #3b82f6 !important;
}
.copy-file-path {
  width: 14px;
  height: 14px;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../../public/resources/menu/copy_file_path_dark.svg");
  cursor: pointer;
}
.copy-file-path:hover {
  opacity: 0.5;
}
#status-expanded {
  bottom: 20px;
  background-color: #444;
  height: 200px;
  font-size: 15px;
  position: fixed;
  width: 100vw;
}
#build-status {
  background-color: #2a344c;
  font-size: 15px;
  height: 50px;
  float: left;
}
#build-status #build-command {
  height: 25px;
  background-color: #ff0;
  width: 100%;
}
#build-status #build-output {
  height: 25px;
  width: 100%;
}
.build-running {
  background-color: #008000 !important;
  color: #fff !important;
}
.toggle-search-results {
  color: OPPOSITE_COLOR;
}
.debug-notification {
  min-width: fit-content;
  max-width: 466px;
  height: fit-content;
  bottom: 38px;
  position: fixed;
  z-index: 100;
  left: 8px;
}
#debug {
  float: left;
  display: flex;
  height: 100%;
  align-items: center;
}
#debug .status-notification {
  background-color: transparent;
}
#debug .notification-message {
  color: #c8c8c8;
}
.viewer-search {
  background-color: #000;
  float: right;
  width: 240px;
  overflow: hidden;
  position: absolute;
  z-index: 2;
}
.viewer-search .query-completion {
  color: #fff;
  font-size: 18px;
}
.viewer-search .editor-layout {
  display: flex;
}
.animate {
  width: 500px;
  height: 500px;
}
.event-newline {
  width: 100%;
}
.event-line {
  float: left;
  cursor: pointer;
  width: 100%;
}
.short-event {
  color: #0aa;
}
.future-event {
  opacity: 0.4;
}
#message {
/*position: fixed*/
/*top: 20px*/
  width: 100%;
  text-align: center;
  z-index: 2;
  height: 20px;
}
.message-error {
  background-color: #a00;
  color: #fff;
}
.message-info {
  background-color: #0a0;
  color: #fff;
}
.message-warn {
  background-color: #0ff;
  color: #fff;
}
.debug-skip-toggle {
  margin-left: 10px;
}
.recent {
  width: 100%;
  height: 20px;
  margin: 20px;
  cursor: pointer;
}
.loading {
  height: 100vh;
  width: 100vw;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #b8f;
}
.loading-text {
  color: #00f;
  font-size: 72px;
  text-align: center;
  margin-top: 5vh;
}
.loading-logo {
  text-align: center;
  margin-top: 10vh;
}
.loading-tips {
  text-align: center;
  margin-top: 10vh;
}
.loading-tip {
  display: flex;
}
.loading-tip-info {
  display: flex;
  flex-direction: column;
  width: 50vw;
}
.loading-tip-video {
  width: 50vw;
}
.loading-tip-id {
  flex-basis: 20%;
  font-size: 42px;
}
.loading-tip-description {
  flex-basis: 80%;
  font-size: 20px;
}
.write-file {
  background-color: #282828;
  color: #f3f3f3;
}
.write-file .write-file-path {
  color: #00f;
}
.write-file .write-file-content {
  height: 100px;
}
.read-file {
  background-color: #00f;
  color: #fff;
}
.read-file .read-file-path {
  color: #eee;
}
.read-file .read-file-content {
  height: 100px;
  overflow: hidden;
}
.open-dir,
.read-dir {
  background-color: #008000;
  color: #000;
}
.traceLog {
  display: flex;
  flex-direction: column;
  color: #f3f3f3;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.traceLog .trace-log-table-header {
  display: grid;
  grid-template-columns: 120px 160px 180px minmax(0, 1fr);
  flex: 0 0 24px;
  align-items: center;
  border-bottom: 1px solid #242424;
  color: #f3f3f3;
  font-family: "FiraCode";
  font-size: 13px;
  line-height: 20px;
  padding: 0 8px;
}
.traceLog .trace-log-table-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  font-family: "FiraCode";
  font-size: 13px;
  line-height: 20px;
}
.traceLog .trace-log-row {
  display: grid;
  grid-template-columns: 120px 160px 180px minmax(0, 1fr);
  min-height: 24px;
  align-items: center;
  border-top: 1px solid #3a3a3a;
  color: #f3f3f3;
  padding: 0 8px;
  cursor: pointer;
}
.traceLog .trace-log-row:hover,
.traceLog .trace-log-row.selected {
  background: #333;
}
.traceLog .trace-col-rr-ticks,
.traceLog .trace-col-location,
.traceLog .trace-col-function,
.traceLog .trace-col-locals {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.traceLog .trace-col-rr-ticks {
  position: relative;
  padding-left: 4px;
}
.traceLog .trace-col-rr-ticks .event-rr-ticks-line {
  position: absolute;
  left: 0;
  right: 12px;
  bottom: 4px;
  height: 2px;
  background: #4f46e5;
}
.traceLog .trace-log-empty {
  padding: 12px 8px;
  color: #f3f3f3;
  font-family: "FiraCode";
  font-size: 13px;
}
.traceLog .trace-log-empty.hidden {
  display: none;
}
.traceLog .trace-location {
  width: 20%;
}
.traceLog .trace-function-name {
  width: 10%;
}
.traceLog .trace-values {
  width: 45%;
  cursor: pointer;
  text-overflow: ellipsis;
  overflow: visible;
  white-space: nowrap;
  display: flex;
}
.trace-main {
  top: 8px;
  background-color: #282828;
  color: #f3f3f3;
  width: 100% !important;
  padding-right: 1ch;
  position: absolute;
}
.trace-main .editor-textarea {
  z-index: 55;
}
.trace-main .cursor {
  z-index: 54;
}
.trace-main .view-overlays.focused {
  z-index: 53;
  opacity: 0.4;
  cursor: text;
}
.trace-main .view-overlays {
  z-index: 5;
  cursor: text;
}
.trace-main .view-lines {
  z-index: 51;
}
.trace-main .trace-view {
  position: relative;
  width: 100%;
  display: flex;
  flex: 1 1 0;
  height: 100%;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.trace-main .trace-view .chart-results-container {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.trace-main .trace-view .dt-scroll {
  overflow-x: auto !important;
}
.trace-main .trace-view .dt-scroll-body {
  overflow-x: auto !important;
  overflow-y: auto !important;
}
.trace-main .trace-view .trace-table {
  width: max-content !important;
  min-width: 100%;
  max-width: none;
}
.trace-main .trace-view .trace-table tbody {
  width: max-content;
  min-width: 100%;
}
.trace-main .trace-view .direct-location-rr-ticks {
  transform: translateY(0);
  padding-top: 0.125em;
  flex: 0 0 auto;
  min-width: max-content;
}
.trace-main .trace-view tbody tr {
  height: 1.5em;
  width: max-content;
  min-width: 100%;
}
.trace-main .trace-view tbody td {
  height: 1.5em;
  flex-shrink: 0;
}
.trace-main .trace-view .rr-ticks-time-container {
  height: 1em;
  line-height: normal;
}
.trace-main .trace-view .trace-line {
  width: 20%;
  color: #f3f3f3;
}
.trace-main .trace-view .trace-values {
  padding-top: 0.25em !important;
  line-height: 1em !important;
  width: auto;
  min-width: max-content;
  flex: 0 0 auto;
  color: #f3f3f3;
  cursor: pointer;
  overflow: visible;
  white-space: nowrap;
  display: block;
}
.trace-main .trace-view .direct-location-rr-ticks {
  width: 20%;
  height: 1.375em;
}
.trace-main .trace-view .chart-table {
  width: 100%;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.trace-main .scrollbar .slider {
  border-radius: 0.15625em;
}
.trace-main .trace-chevron {
  position: absolute;
  left: 50%;
}
.trace-main .trace-chevron .trace-chevron-baseline {
  position: absolute;
  width: 80px;
  height: 2px;
  top: 0;
  background-color: #c8c8c8;
  z-index: 3;
  left: calc(50% - 40px);
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}
.trace-main .trace-chevron .trace-chevron-baseline-cut {
  position: absolute;
  width: 10px;
  height: 2px;
  top: 0;
  background-color: #242424;
  z-index: 3;
  left: calc(50% - 5px);
}
.trace-main .trace-chevron .trace-chevron-arrow {
  color: #c8c8c8;
  cursor: pointer;
  position: absolute;
  left: 50%;
  z-index: 4;
}
.trace-main .trace-chevron .trace-chevron-arrow::before {
  border-style: solid;
  border-width: 2px 2px 0 0;
  content: '';
  display: inline-block;
  height: 9px;
  left: -4.5px;
  position: absolute;
  top: -5px;
  transform: rotate(315deg);
  vertical-align: top;
  width: 9px;
}
.trace-main .trace-modal {
  border: 1px solid #000;
  position: relative;
  display: none;
  margin-left: 60px;
  background-color: #242424;
  width: 85%;
  overflow: visible;
  z-index: 55;
}
.trace-main .trace-modal .value-view {
  position: relative !important;
}
.trace-main .trace-modal .modal-close-button {
  position: absolute;
  top: 3px;
  right: 0;
  height: 17px;
  display: flex;
  z-index: 2;
}
.trace-main .trace-modal .modal-close-button::after {
  content: "X";
  font-size: 15px;
  font-weight: bold;
}
.trace-main .trace-modal .select-kind-button-container {
  display: none;
}
.trace-main .trace-modal .value-expanded-compound {
  height: 100%;
}
.trace-main .trace-modal .value-expanded-view {
  overflow-x: auto;
  background-color: inherit;
}
.trace-main .trace-modal .atom-even {
  height: 100%;
  background-color: inherit;
}
.trace-main .trace-modal .atom-odd {
  height: 100%;
  background-color: inherit;
}
.current-trace {
  border-color: #00a;
}
.trace-menu {
  min-height: 36px;
  display: flex;
  flex: 0 0 auto;
  padding-left: 6px;
  padding-right: 6px;
  padding-top: 6px;
  align-items: start;
  justify-content: space-between;
  border-radius: 6px;
}
.trace-menu .trace-search {
  line-height: 0;
}
.trace-menu .dropdown-list {
  position: absolute;
  top: 100%;
  background-color: transparent;
  width: fit-content !important;
}
.trace-menu .dropdown-list .trace-dropdown-list-container {
  padding: 4px;
  background-color: #161616;
  border-radius: 6px;
}
.trace-menu .dropdown-list.active .fa {
  color: #242424;
}
.trace-menu .run-trace-button {
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  height: 24px;
  background: #333;
  width: 24px;
  position: relative;
  z-index: 57;
  display: flex;
  justify-content: center;
  align-items: center;
}
.trace-menu .run-trace-button:hover {
  background: #282828;
}
.trace-menu .trace-search {
  width: -webkit-fill-available;
  padding-right: 8px;
}
.trace-menu .hamburger-dropdown {
  border-radius: 6px;
  height: 24px;
  z-index: 57;
  top: 0;
}
.trace-menu .hamburger-dropdown .trace-hamburger-svg {
  height: 24px;
  width: 24px;
  background-image: url("../../public/resources/tracepoints/trace_hamburger_dark.svg");
  background-size: 12px 8px;
  background-repeat: no-repeat;
  background-position: center;
}
.trace-menu .trace-dropdown-menu {
  display: none;
}
.trace-menu .trace-dropdown-menu.active {
  background: #b8c0cf !important;
  position: absolute;
  border: 1px solid;
  border-radius: 10px;
  border-color: #a9a9a9;
  padding-top: 0;
  padding-left: 5px;
  padding-right: 10px;
  padding-bottom: 10px;
  margin-top: 5px;
  z-index: 56;
  top: 0;
  right: 20px;
  transform: translate3d(0px, 26px, 0px);
  display: block;
  color: #000;
}
.trace-menu .trace-search-unselected {
  flex-basis: 75%;
}
.trace-menu .trace-right {
  position: relative;
}
.trace-menu .trace-menu-header {
  height: 30px;
  margin-top: 5px;
}
.trace-menu .trace-menu-header .dropdown {
  border-radius: 15px;
  color: #434f6a;
  cursor: pointer;
  height: 30px;
  margin-top: 10px;
  background-color: #242424;
  padding-top: 2px;
  padding-left: 15px;
  padding-right: 30px;
  right: 10px;
  width: 30px;
  position: absolute;
  z-index: 1;
}
.trace-menu .search-traces {
  flex-basis: 50%;
  margin: 0;
  padding: 0;
}
.trace-menu .trace-buttons-container {
  display: flex;
  gap: 6px;
}
.trace-menu .trace-buttons-container .trace-run-button-svg {
  height: 24px;
  width: 24px;
  background-image: url("../../public/resources/tracepoints/run_tracepoints_dark.svg");
  background-repeat: no-repeat;
}
.kind-dropdown-menu {
  background: #b8c0cf !important;
  position: absolute;
  border: 1px solid;
  border-radius: 10px;
  border-color: #a9a9a9;
  padding-top: 0;
  padding-left: 5px;
  padding-right: 10px;
  padding-bottom: 10px;
  margin-top: 5px;
  width: fit-content;
  z-index: 56;
  top: 0 !important;
  transform: translate3d(0px, 21px, 0px);
  display: block;
  color: #000;
  user-select: none;
}
.trace-simple {
  color: #000;
  cursor: pointer;
  padding-top: 5px;
}
.trace-sequence {
  display: flex;
  flex-direction: column;
}
.trace-var {
  color: #000;
  font-size: 20px;
}
.trace-enum {
  color: #0f0;
  font-weight: bold;
}
.inline-value > .simple-value > .trace-simple {
  text-align: left;
}
.instance-0 {
  margin-left: 4%;
}
.instance-1 {
  width: 64%;
  margin-left: 10%;
}
.trace-metadata {
  flex-basis: 5%;
}
.trace-field {
  width: 100%;
}
.trace-field-name {
  width: 100%;
}
.trace-data {
  font-size: 16px;
}
.links line {
  stroke: #999;
  stroke-opacity: 0.6;
}
.nodes circle {
  stroke: #fff;
  stroke-width: 1.5px;
}
.trace-slot {
  width: 5%;
}
.trace-expand {
  color: #00f;
  cursor: pointer;
  text-align: right;
}
.width-border {
  height: 4px;
}
.width-border:hover {
  cursor: row-resize;
}
.height-border {
  width: 4px;
}
.height-border:hover {
  cursor: col-resize;
}
.width-border,
.height-border {
  background-color: #eee;
}
.trace-error {
  color: #fca5a5;
  padding-right: 8px;
}
.trace-simple-metadata {
  flex-grow: 20;
}
.trace-expandables {
  border-color: #f3f3f3;
  display: flex;
  flex-direction: column;
}
.trace-expandable {
/*border-width: 1px*/
/*border-color: #000*/
/*border-style: solid*/
  display: flex;
}
.switch {
  background-color: BACKGROUND_OPPOSITE_COLOR;
  color: #fff;
  width: 78px;
  float: left;
  cursor: pointer;
}
#trace-switch {
  margin-left: 90px;
}
.select-view-kind {
  position: relative;
  display: none;
}
.select-view-kind-button {
  text-align: center;
  height: 25px;
  width: 100px;
  background-color: #333;
  color: #f3f3f3;
  font-size: 15px;
  border-radius: 15px;
  cursor: pointer;
  display: none;
  position: absolute;
  left: 0;
}
.select-view-kind-button.active {
  border-radius: 15px;
  border: 2px solid;
  border-color: #7e7e7e;
  text-align: center;
  height: 25px;
  width: 100px;
  background-color: #b8c0cf;
  color: #333;
  font-size: 15px;
  cursor: pointer;
  position: absolute;
  left: 0;
}
.select-view-kind-button:hover {
  background-color: #b8c0cf;
  color: #333;
}
.select-view-kind-button ::after {
  margin-left: 10px !important;
}
.expanded-compound-select-view-kind {
  margin-left: 32%;
}
.editor-trace {
  cursor: pointer;
}
#save-trace {
  cursor: pointer;
  font-size: 24px;
}
.trace .dropdown-list-item {
  display: flex;
  text-indent: 0 !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
  text-align: start;
  font-weight: 400;
  font-size: 14px;
  justify-content: start;
  border-radius: 4px;
}
.trace .dropdown-list-item:hover {
  background-color: #333;
}
.tracepoint-overlay {
  opacity: 0.8;
  background-color: #282828;
  color: #f3f3f3;
  z-index: 56;
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden !important;
}
.trace-overlay {
  font-family: "SpaceMono";
  position: relative;
  font-size: 14px;
  text-align: center;
  cursor: text;
  user-select: text;
}
.graph {
  position: absolute;
  z-index: 21;
  visibility: hidden;
}
.expand-trace {
  cursor: pointer;
  opacity: 0;
}
.trace {
  height: 100%;
  z-index: 50;
}
.error-trace {
  color: #fca5a5;
  padding-right: 8px;
}
.low-level-editor-0 {
  flex-basis: 75%;
}
.low-level-editor-1 {
  flex-basis: 50% !important;
}
.low-level {
  display: flex;
  flex-direction: column;
  background-color: #282828;
  color: #f3f3f3;
  overflow: scroll;
  flex-basis: 25%;
  height: 100vh;
  white-space: pre;
}
.low-level-full {
  flex-basis: 100%;
}
.editor-info {
  display: flex;
  height: fit-content;
  margin-left: 0;
  flex-direction: column;
}
.editor-info .monaco-scrollable-element {
  margin-left: 8px;
}
.editor-info .editor-vertical-line {
  position: absolute;
  width: 3px;
  height: calc(100% + 20px);
  top: -8px;
  left: 57px;
  background-color: #565656;
  z-index: 2 !important;
}
.editor-info .editor-vertical-line.splitter {
  left: 0;
  width: 100%;
  top: 100% !important;
  height: 16px !important;
}
.editor-info .editor-vertical-line.splitter .editor-splitter-scratch {
  position: absolute;
  width: 20px;
  height: 1px;
  background-color: #242424;
  z-index: 4;
  left: calc(50% - 10px);
}
.editor-info .editor-vertical-line.splitter:hover {
  cursor: row-resize;
}
.editor-info .editor-textarea {
  position: relative;
  width: 100%;
  background-color: #242424;
  border-radius: 6px;
}
.editor-info .editor-textarea .active-line-number {
  color: #c6c6c6 !important;
}
.editor-info .editor-textarea .view-lines {
  background-color: #242424;
}
.editor-info .editor-textarea .view-lines .view-line {
  background-color: #242424;
}
.editor-info .editor-textarea .margin-view-overlays {
  background-color: #242424;
}
.editor-info .editor-textarea-empty-header {
  position: relative;
  left: 57px;
  width: calc(100% - 57px);
  height: 8px;
  background-color: #242424;
  border-radius: 6px;
}
.editor-info .editor-traces {
  margin-top: 0.24em;
  width: 100%;
  overflow: visible;
  background-color: #242424;
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 0.325em;
  min-height: 0;
}
.editor-info .editor-traces .dt-scroll-body::-webkit-scrollbar-thumb {
  border-color: #242424;
}
.editor-info .editor-traces .editor-trace {
  display: flex;
  flex-direction: column;
  color: #00f;
}
.editor-info .editor-traces .editor-trace .editor-codeID {
  height: 19px;
}
.editor-info .editor-traces .editor-trace .editor-locals {
  display: flex;
  flex-direction: column;
}
.editor-info .editor-traces .editor-trace .editor-locals .editor-local {
  display: flex;
}
.editor-info .editor-traces .editor-trace .editor-locals .editor-local .editor-local-name {
  flex-basis: 50%;
}
.editor-info .editor-traces .editor-trace .editor-locals .editor-local .editor-local-value {
  flex-basis: 50%;
}
.editor-info .chart-table {
  background-color: #242424;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.editor-info .chart-table .data-table {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.editor-info .chart-table .data-table .dt-container {
  flex: 1 1 auto;
  min-height: 0;
}
.editor-info .chart-table .data-table .dt-scroll {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}
.editor-info .chart-table .data-table .dt-scroll-body {
  flex: 1 1 auto;
  min-height: 0;
}
.editor-info .monaco-editor .margin {
  z-index: 1;
}
.low-level-editor {
  height: 100%;
}
.low-level-code {
  background-color: #282828;
  color: #f3f3f3;
  display: flex;
  flex-direction: column;
  overflow: auto;
  font-family: "FiraCode", monospace;
  font-size: 13px;
  line-height: 20px;
}
.low-level-code-header {
  flex: 0 0 auto;
  padding: 0.35em 0.5em;
  border-bottom: 1px solid #333;
  opacity: 0.85;
}
.low-level-code-instructions {
  min-width: max-content;
  padding: 0.25em 0;
}
.low-level-code-instruction {
  display: grid;
  grid-template-columns: 5em 6em 18em 14em 1fr;
  min-height: 1.55em;
  line-height: 1.55em;
  padding: 0 0.5em;
  white-space: nowrap;
  border-bottom: 1px solid #3a3a3a;
}
.low-level-code-instruction:hover {
  background-color: #333;
}
.low-level-code-instruction.active-instruction {
  background-color: #333;
  color: #f3f3f3;
}
.low-level-code-instruction-offset {
  opacity: 0.65;
}
.low-level-code-instruction-name {
  color: #f3f3f3;
}
.low-level-code-instruction-source {
  opacity: 0.65;
}
.dts_label {
  display: none !important;
}
.data-table {
  font-size: inherit !important;
  font-weight: 400 !important;
  font-family: "SpaceMono";
  letter-spacing: -0.00875em !important;
  flex: 1 1 auto;
  overflow: hidden;
  min-height: 0;
  color: #f3f3f3;
/* max-width: 200px // TODO */
}
.data-table .rr-ticks-line-container {
  position: relative;
  height: 0.3em;
}
.data-table .rr-ticks-line-container .rr-ticks-line {
  display: inline-block;
  background: #4f46e5;
  height: 0.1875em !important;
}
.data-table .rr-ticks-empty-remaining {
  display: inline-block;
  background-color: #38393a;
  height: 0.1875em !important;
  position: absolute;
  z-index: 2;
}
.data-table .rr-ticks-time-container {
  width: 100%;
  height: 1.25em;
  line-height: 2em;
  position: relative;
}
.data-table .rr-ticks-time-container .rr-ticks-time {
  position: unset;
  text-indent: -50%;
}
.data-table .direct-location-rr-ticks {
  display: inline-block;
  position: relative;
  min-width: 10%;
  max-width: 35%;
  padding-left: 3ex;
  padding-right: 3ex;
  max-height: 1.5em;
  transform: translateY(-0.24em);
}
.data-table .event-rr-ticks-line {
  height: 0.125em;
  width: 100%;
  display: inline-block;
  position: absolute;
  z-index: 0;
}
.data-table .paging_simple_numbers {
  display: none;
}
.data-table .dataTables_length {
  display: none;
}
.data-table table {
  max-width: -webkit-fill-available;
  display: block;
}
.data-table table tbody {
  display: block;
  cursor: pointer;
}
.data-table tr {
  font-size: inherit;
  font-weight: 400;
  display: flex;
  border-top: 0.0625em solid #3a3a3a;
  color: #f3f3f3;
  align-items: start;
}
.data-table tr td {
  cursor: normal;
}
.data-table tr .dataTables_empty {
  cursor: normal;
}
.data-table tr.future {
  opacity: 0.5;
}
.data-table tr.future:hover {
  opacity: 1;
}
.data-table tr.odd.past:hover {
  background-color: #333;
  opacity: 1;
}
.data-table tr.even.past:hover {
  background-color: #333;
  opacity: 1;
}
.data-table tr.odd.future:hover {
  background-color: #333;
  opacity: 1;
}
.data-table tr.even.future:hover {
  background-color: #333;
  opacity: 1;
}
.data-table tr td {
  display: grid;
  color: #f3f3f3;
  font-weight: 400;
}
.data-table td {
  text-overflow: clip;
}
.data-table thead {
  display: none;
}
.dt-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.dt-container .dt-length {
  display: none;
}
.dt-container .dt-scroll {
  flex: 1 1 auto;
  min-height: 0;
}
.dt-container .dt-scroll-body {
  min-height: 0;
}
.dt-container .dt-scroll-head {
  height: 0 !important;
}
.dt-container .dt-info {
  padding-left: 0.625em;
}
.data-tables-footer {
  position: relative;
  padding-left: 0.25rem;
  height: 1.5em;
  font-size: 0.75em;
  line-height: 1.5em;
  font-family: "SpaceMono";
  color: #f3f3f3;
  display: flex;
}
.data-tables-footer .data-tables-footer-info {
  position: relative;
  margin-right: 0.625em;
  display: flex;
  align-items: center;
}
.data-tables-footer .data-tables-footer-info .data-tables-footer-end-row {
  padding-left: 0.5ex;
  padding-right: 0.5ex;
}
.data-tables-footer .data-tables-footer-info .data-tables-footer-rows-count {
  padding-left: 0.5ex;
  padding-right: 0.5ex;
}
.data-tables-footer .data-tables-footer-input {
  margin-bottom: 0em !important;
}
.data-tables-footer .data-tables-footer-checkbox-container {
  position: relative;
  height: 100%;
  padding-left: 1.25em;
}
.dt-scroll-body:focus,
.data-table table:focus,
.data-table tbody:focus,
.data-table tr:focus,
.dt-scroll-body:focus-visible,
.data-table table:focus-visible,
.data-table tbody:focus-visible,
.data-table tr:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
.local-calltrace-view {
  flex-grow: 1;
  overflow: auto;
  padding-top: 0.5em;
}
.calltrace-loading {
  position: absolute;
  left: 15ch;
  top: 50%;
  font-size: 3ch;
}
.calltrace-view {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.calltrace-view .calltrace-lines {
  display: flex;
  flex-direction: column;
  position: relative;
}
.calltrace-view .calltrace-child {
  white-space: nowrap;
  width: 100%;
  float: left;
  display: inline;
}
.calltrace-view .calltrace-call-line {
  position: relative;
}
.calltrace-view .calltrace-svg-line {
  position: absolute;
  overflow: visible;
  z-index: 1;
  pointer-events: none;
}
.calltrace-view line {
  stroke: #e8e8e8;
}
.calltrace-view .call-offsets {
  display: inline-flex;
}
.calltrace-view .empty-offset {
  width: 0.625em;
  margin: 0;
}
.calltrace-view .empty-offset-bottom-border {
  border-bottom: 0.0625em solid #e8e8e8;
}
.calltrace-view .empty-offset-top-border {
  border-top: 0.0625em solid #e8e8e8;
}
.calltrace-view .empty-offset-right-border {
  width: 0.6875em;
  border-right: 0.0625em solid #e8e8e8;
}
.calltrace-view .offset-top-border {
  width: 0.625em;
  border-top: 0.0625em solid #e8e8e8;
}
.calltrace-view .offset-top-and-bottom-border {
  width: 0.625em;
  border-top: 0.0625em solid #e8e8e8;
  border-bottom: 0.0625em solid #e8e8e8;
}
.calltrace-view .call-offset {
  background-size: 1.25em;
  white-space: pre;
  float: left;
  background-image: linear-gradient(to right, rgba(0,0,0,0.2), 0.0625em, transparent 0.0625em, transparent);
  width: 0.625em;
  height: 1.625em;
}
.calltrace-view .call-offset-icon {
  background-color: #282828;
  width: 0.625em;
  height: 1.625em;
  position: relative;
}
.calltrace-view .call-offset-icon-1 {
  width: 0.3125em;
  height: 0.3125em;
  position: absolute;
  background-color: #e8e8e8;
  content: "";
  left: 0.1875em;
  top: 0.625em;
  border-radius: 0.09375em;
}
.calltrace-view .call-offset-icon-2 {
  width: 0.0625em;
  height: 100%;
  position: absolute;
  background-color: #e8e8e8;
  content: "";
  left: 0;
  top: 0;
}
.calltrace-view .call-offset-icon-3 {
  width: 0.125em;
  height: 0.0625em;
  position: absolute;
  background-color: #e8e8e8;
  content: "";
  left: 0.0625em;
  top: 0.75em;
}
.calltrace-view .call-offset-icon-4 {
  width: 0.3125em;
  height: 0.625em;
  position: absolute;
  background-color: #ff9870;
  border-radius: 0.125em;
  content: "";
  left: -0.125em;
  top: 0;
}
.calltrace-view .call-offset-icon-5 {
  width: 0.3125em;
  height: 0.3125em;
  position: absolute;
  background-color: #ff9870;
  border-radius: 0.09375em;
  content: "";
  left: 0.1875em;
  top: 0.625em;
}
.calltrace-view .call-offset-icon-6 {
  width: 0.0625em;
  height: 50%;
  position: absolute;
  background-color: #e8e8e8;
  content: "";
  left: 0;
  top: 0;
}
.calltrace-view .calltrace-filter {
  margin-bottom: 0.625em;
  color: #f3f3f3;
}
.calltrace-view .calltrace-row {
  padding-left: 0.3125em;
  min-height: 1.55em;
  line-height: 1.55em;
}
.calltrace-view .calltrace-row,
.calltrace-view .call-name {
  cursor: pointer;
  display: inline-flex;
  color: #f3f3f3;
  float: left;
}
.calltrace-view .calltrace-row:hover,
.calltrace-view .call-name:hover {
  background-color: #2e2e2e;
}
.calltrace-view .call-text {
  padding-left: 0.125em;
  display: inline;
  z-index: 2;
}
.calltrace-view .end-of-program-text {
  color: #fed7aa;
}
.calltrace-view .end-of-program-error {
  color: #fca5a5;
}
.calltrace-view .call-current {
  color: #f3f3f3;
  font-weight: 500;
}
.calltrace-view .call-expanded-value {
  width: 100%;
  display: flex;
  overflow: visible;
  position: relative;
  background-color: #242424;
  border-radius: 0.625em;
  padding-left: 0.9375em;
  padding-bottom: 0.15625em;
  padding-right: 0.3125em;
  margin-left: 0.625em;
  margin-right: 0.625em;
  margin-bottom: 0.1875em;
}
.calltrace-view .call-expanded-value .view-active {
  border-radius: 0.625em;
  padding-left: 0;
  position: relative;
}
.calltrace-view .call-expanded-value .view-active .value-expanded-text {
  background-color: #282828 !important;
}
.calltrace-view .call-expanded-value .view-active .value-expanded-default {
  background-color: #282828 !important;
}
.calltrace-view .call-expanded-value.return-value .value-expanded-name-text {
  color: #e48e59;
}
.calltrace-view .value-expanded-name {
  color: #bbf7d0;
}
.calltrace-view .value-expanded-view {
  background-color: #242424 !important;
  font-size: 1em;
}
.calltrace-view .value-expanded-text {
  background-color: #242424 !important;
}
.calltrace-view .remove-expanded-value {
  padding-right: 0.3125em;
  font-size: 1em;
  font-weight: bold;
  color: #f3f3f3;
  cursor: pointer;
}
.calltrace-view .call-previous {
  color: #f3f3f3;
}
.calltrace-view .call-next {
  color: #f3f3f3;
}
.calltrace-view .macro-expansion {
  color: #008000;
}
.calltrace-view .call-tooltip {
  display: block;
  padding-left: 0.3125em;
  padding-right: 0.625em;
  padding-top: 0.3125em;
  padding-bottom: 0.3125em;
  width: fit-content;
  border-radius: 0.375em;
  background-color: #242424;
  position: fixed;
  z-index: 3;
  font-weight: 400;
}
.calltrace-view .call-tooltip .value-expand-button {
  display: none;
}
.calltrace-view .call-tooltip .toggle-value-history {
  display: none;
}
.calltrace-view .call-args {
  color: #bbf7d0;
  position: relative;
  display: inline;
  margin-left: 0.3125em;
  margin-right: 0.3125em;
}
.calltrace-view .call-args-list {
  list-style: none;
  padding: 0.3125em;
  margin: 0;
}
.calltrace-view .call-arg {
  display: inline-flex;
  flex-direction: column;
  color: #bbf7d0;
}
.calltrace-view .call-arg .call-arg-header {
  display: flex;
}
.calltrace-view .call-arg-tooltip-value {
  word-wrap: break-word;
  white-space: break-spaces;
  color: #f3f3f3;
}
.calltrace-view .call-arg-text {
  text-overflow: ellipsis;
  overflow: hidden;
}
.calltrace-view .return {
  z-index: 2;
}
.calltrace-view .return-arrow {
  color: #bfdbfe;
}
.calltrace-view .return-text {
  color: #bfdbfe;
}
.calltrace-view .hidden-calls-button {
  background-color: #242424;
  border-radius: 0.625em;
  padding-left: 0.625em;
  padding-right: 0.625em;
}
.calltrace-view .expanded-call-args {
  display: flex;
}
.calltrace-view .summary-graph {
  background-color: #a2a;
}
.calltrace-view .expand-callstack,
.calltrace-view .expand-summary {
  color: #f3f3f3;
  font-size: 0.75em;
  text-decoration: underline;
  margin-left: 1.25em;
}
.calltrace-view .collapse-callstack {
  color: #f3f3f3;
}
.calltrace-view .call-child-box {
  display: flex;
  align-items: center;
  z-index: 2;
  min-width: max-content;
}
.calltrace-view .collapse-call {
  z-index: 2;
  background-color: #166534;
  padding-left: 0.3125em;
  padding-right: 0.3125em;
  font-size: 0.875em;
  line-height: 1.125em;
  padding-top: 0.125em;
  border-radius: 0.25em;
}
.calltrace-view .toggle-call {
  width: 0.875em;
  height: 1.5625em;
  display: block;
  margin-right: 0.25em;
  z-index: 2;
}
.calltrace-view .toggle-call .collapse-call-img {
  width: 0.875em;
  height: 0.875em;
  background-image: url("../../public/resources/calltrace/collapse-call-calltrace-dark.svg");
  background-size: cover;
  background-position: center;
  display: inline-block;
  position: relative;
  top: 0.25em;
  left: -0.125em;
  cursor: pointer;
}
.calltrace-view .toggle-call .collapse-call-img.active {
  background-image: url("../../public/resources/calltrace/collapse-active-call-calltrace-dark.svg") !important;
}
.calltrace-view .toggle-call .expand-call-img {
  width: 0.875em;
  height: 0.875em;
  background-image: url("../../public/resources/calltrace/expand-call-calltrace-dark.svg");
  background-size: cover;
  background-position: center;
  display: inline-block;
  position: relative;
  top: 0.25em;
  left: -0.125em;
  cursor: pointer;
}
.calltrace-view .toggle-call .expand-call-img.active {
  background-image: url("../../public/resources/calltrace/expand-active-call-calltrace-dark.svg") !important;
}
.calltrace-view .toggle-call .dot-call-img {
  width: 0.25em;
  height: 0.25em;
  background-image: url("../../public/resources/calltrace/dot-call-calltrace-dark.svg");
  background-size: cover;
  background-position: center;
  display: block;
  position: relative;
  bottom: -0.625em;
  left: 0.1875em;
}
.calltrace-view .toggle-call .dot-call-img.active {
  background-image: url("../../public/resources/calltrace/dot-active-call-calltrace-dark.svg") !important;
}
.calltrace-view .toggle-call .end-of-program-img {
  width: 0.25em;
  height: 0.25em;
  background-image: url("../../public/resources/calltrace/end-of-program-dark.svg");
  background-size: cover;
  background-position: center;
  display: block;
  position: relative;
  bottom: -0.625em;
  left: 0.2em;
}
.calltrace-view .toggle-call .end-of-program-error {
  background-image: url("../../public/resources/calltrace/end-of-program-error-dark.svg");
}
.calltrace-view .call-space {
  width: 0.125em;
  float: left;
}
.calltrace-view .collapsed-callstack {
  color: #00f;
  cursor: pointer;
}
.calltrace-view .speed-very-fast {
  color: #f3f3f3;
  background-color: #52f373;
}
.calltrace-view .speed-fast {
  color: OPPOSITE_COLOR;
  background-color: #4ba02f;
}
.calltrace-view .speed-medium {
  color: OPPOSITE_COLOR;
  background-color: #dcf438;
}
.calltrace-view .speed-slow {
  color: OPPOSITE_COLOR;
  background-color: #f02d2d;
  opacity: 0.5;
}
.calltrace-view .duration {
  margin-left: 1.25em;
  padding-left: 0.25em;
  padding-right: 0.125em;
  padding-top: 0.125em;
  font-size: 0.75em;
  height: 1em;
}
.calltrace-view .code-duration {
  display: inline-flex;
}
.calltrace-view {
  height: 100%;
  color: #f3f3f3;
}
.full-calltrace {
  background-color: FULL_CALLTRACE_BG_COLOR;
  color: FULL_CALLTRACE_FG_COLOR;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  width: 31.25em;
}
.step-list {
  background-color: #282828;
  color: #f3f3f3;
  font-family: "FiraCode", monospace;
  font-size: 13px;
  line-height: 1.5em;
  overflow: auto;
  height: 100%;
}
.step-list .step-list-lines-box,
.step-list .step-lines {
  min-height: 100%;
}
.step-list .step-line-pre {
  display: inline;
  margin: 0;
  font: inherit;
  white-space: pre;
  background-color: transparent;
}
.step-list .active-step-line-pre {
  background-color: transparent;
  color: #f3f3f3 !important;
}
.step-list .inactive-step-line-pre {
  background-color: transparent;
  color: #f3f3f3;
}
.step-list .step-line {
  display: grid;
  grid-template-columns: 3em 13em minmax(18em, 1fr) minmax(14em, 24em);
  align-items: center;
  column-gap: 0.75em;
  margin-left: 0;
  min-height: 1.625em;
  width: 100%;
  box-sizing: border-box;
  border-top: 0.0625em solid #3a3a3a;
  padding: 0 0.75em;
  cursor: pointer;
}
.step-list .step-line:hover {
  background-color: #333;
}
.step-list .active-step-line {
  background-color: #333;
  color: #f3f3f3 !important;
}
.step-list .step-line-column {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.step-list .step-line-delta {
  width: auto;
  color: #f3f3f3;
}
.step-list .step-line-location {
  width: auto;
  color: #9cdcfe;
}
.step-list .step-line-source-code {
  width: auto;
}
.step-list .step-line-call {
  grid-template-columns: minmax(0, 1fr) minmax(14em, 24em);
  background-color: rgba(210,153,34,0.12);
  color: #f3f3f3;
}
.step-list .step-line-return {
  grid-template-columns: minmax(0, 1fr) minmax(14em, 24em);
  background-color: rgba(251,146,60,0.16);
  color: #f3f3f3;
}
.step-list .step-line-description {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: auto;
}
.step-list .step-line-args,
.step-list .step-line-return-value {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: auto;
  color: #f3f3f3;
}
.step-list .step-line-flow-values {
  width: auto;
  background-color: transparent;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.step-list .step-line-flow-values .step-line-flow-value {
  margin-left: 0.625em;
}
.step-list .step-line-flow-values .step-line-flow-value:first-child {
  margin-left: 0;
}
.step-list .step-line-flow-values .step-line-flow-value-repr {
  margin-left: 0.3125em;
  color: #fdba74;
  background-color: transparent;
}
.excerpt-code {
  color: #f3f3f3;
}
.code-state-line {
  font-family: "SpaceMono", monospace;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.code-state-line:hover .code-tooltip {
  display: block;
  transition-delay: 0.2s;
  opacity: 1;
  visibility: visible;
}
.active-trace2,
.active-history,
.active-dialog {
  display: block;
  height: 100%;
  width: 100%;
  background-color: #1b1b1b;
  color: #f3f3f3;
  overflow-y: scroll;
}
.inactive-trace,
.inactive-dialog {
  display: none;
}
.active-state {
  display: flex;
  flex-direction: column;
}
.active-state .select-kind-button-container {
  position: absolute;
  margin-left: 0.625em;
}
#dialog {
  display: flex;
  flex-direction: column;
  background-color: #000;
  color: #fff;
}
.expandable-value {
  text-align: center;
  font-size: 1.25em;
}
.expandable-child {
  width: 100%;
  float: left;
  font-size: 1.25em;
  margin-left: 0.625em;
}
.border-value-0 {
  border: 0;
}
.expanded-0 {
  float: left;
  width: 99%;
  margin-left: 0em;
  display: inline-flex;
}
.expanded-1 {
  float: left;
  width: 99%;
  margin-left: 0.625em;
  display: inline-flex;
}
.expanded-2 {
  float: left;
  width: 99%;
  margin-left: 1.25em;
  display: inline-flex;
}
.expanded-3 {
  float: left;
  width: 99%;
  margin-left: 1.875em;
  display: inline-flex;
}
.expanded-4 {
  float: left;
  width: 99%;
  margin-left: 2.5em;
  display: inline-flex;
}
.expanded-5 {
  float: left;
  width: 99%;
  margin-left: 3.125em;
  display: inline-flex;
}
.expanded-6 {
  float: left;
  width: 99%;
  margin-left: 3.75em;
  display: inline-flex;
}
.expanded-7 {
  float: left;
  width: 99%;
  margin-left: 4.375em;
  display: inline-flex;
}
.expanded-8 {
  float: left;
  width: 99%;
  margin-left: 5em;
  display: inline-flex;
}
.expanded-9 {
  float: left;
  width: 99%;
  margin-left: 5.625em;
  display: inline-flex;
}
.expanded-10 {
  float: left;
  width: 99%;
  margin-left: 6.25em;
  display: inline-flex;
}
.expanded-11 {
  float: left;
  width: 99%;
  margin-left: 6.875em;
  display: inline-flex;
}
.expanded-12 {
  float: left;
  width: 99%;
  margin-left: 7.5em;
  display: inline-flex;
}
.expanded-13 {
  float: left;
  width: 99%;
  margin-left: 8.125em;
  display: inline-flex;
}
.expanded-14 {
  float: left;
  width: 99%;
  margin-left: 8.75em;
  display: inline-flex;
}
.expanded-15 {
  float: left;
  width: 99%;
  margin-left: 9.375em;
  display: inline-flex;
}
.expanded-16 {
  float: left;
  width: 99%;
  margin-left: 10em;
  display: inline-flex;
}
.expanded-17 {
  float: left;
  width: 99%;
  margin-left: 10.625em;
  display: inline-flex;
}
.expanded-18 {
  float: left;
  width: 99%;
  margin-left: 11.25em;
  display: inline-flex;
}
.expanded-19 {
  float: left;
  width: 99%;
  margin-left: 11.875em;
  display: inline-flex;
}
.expanded-20 {
  float: left;
  width: 99%;
  margin-left: 12.5em;
  display: inline-flex;
}
.expanded-21 {
  float: left;
  width: 99%;
  margin-left: 13.125em;
  display: inline-flex;
}
.expanded-22 {
  float: left;
  width: 99%;
  margin-left: 13.75em;
  display: inline-flex;
}
.expanded-23 {
  float: left;
  width: 99%;
  margin-left: 14.375em;
  display: inline-flex;
}
.expanded-24 {
  float: left;
  width: 99%;
  margin-left: 15em;
  display: inline-flex;
}
.expanded-25 {
  float: left;
  width: 99%;
  margin-left: 15.625em;
  display: inline-flex;
}
.expanded-26 {
  float: left;
  width: 99%;
  margin-left: 16.25em;
  display: inline-flex;
}
.expanded-27 {
  float: left;
  width: 99%;
  margin-left: 16.875em;
  display: inline-flex;
}
.expanded-28 {
  float: left;
  width: 99%;
  margin-left: 17.5em;
  display: inline-flex;
}
.expanded-29 {
  float: left;
  width: 99%;
  margin-left: 18.125em;
  display: inline-flex;
}
.expanded-30 {
  float: left;
  width: 99%;
  margin-left: 18.75em;
  display: inline-flex;
}
.expanded-31 {
  float: left;
  width: 99%;
  margin-left: 19.375em;
  display: inline-flex;
}
.expanded-32 {
  float: left;
  width: 99%;
  margin-left: 20em;
  display: inline-flex;
}
.expanded-33 {
  float: left;
  width: 99%;
  margin-left: 20.625em;
  display: inline-flex;
}
.expanded-34 {
  float: left;
  width: 99%;
  margin-left: 21.25em;
  display: inline-flex;
}
.expanded-35 {
  float: left;
  width: 99%;
  margin-left: 21.875em;
  display: inline-flex;
}
.expanded-36 {
  float: left;
  width: 99%;
  margin-left: 22.5em;
  display: inline-flex;
}
.expanded-37 {
  float: left;
  width: 99%;
  margin-left: 23.125em;
  display: inline-flex;
}
.expanded-38 {
  float: left;
  width: 99%;
  margin-left: 23.75em;
  display: inline-flex;
}
.expanded-39 {
  float: left;
  width: 99%;
  margin-left: 24.375em;
  display: inline-flex;
}
.expanded-40 {
  float: left;
  width: 99%;
  margin-left: 25em;
  display: inline-flex;
}
.expanded-41 {
  float: left;
  width: 99%;
  margin-left: 25.625em;
  display: inline-flex;
}
.expanded-42 {
  float: left;
  width: 99%;
  margin-left: 26.25em;
  display: inline-flex;
}
.expanded-43 {
  float: left;
  width: 99%;
  margin-left: 26.875em;
  display: inline-flex;
}
.expanded-44 {
  float: left;
  width: 99%;
  margin-left: 27.5em;
  display: inline-flex;
}
.expanded-45 {
  float: left;
  width: 99%;
  margin-left: 28.125em;
  display: inline-flex;
}
.expanded-46 {
  float: left;
  width: 99%;
  margin-left: 28.75em;
  display: inline-flex;
}
.expanded-47 {
  float: left;
  width: 99%;
  margin-left: 29.375em;
  display: inline-flex;
}
.expanded-48 {
  float: left;
  width: 99%;
  margin-left: 30em;
  display: inline-flex;
}
.expanded-49 {
  float: left;
  width: 99%;
  margin-left: 30.625em;
  display: inline-flex;
}
.expanded-50 {
  float: left;
  width: 99%;
  margin-left: 31.25em;
  display: inline-flex;
}
.expanded-51 {
  float: left;
  width: 99%;
  margin-left: 31.875em;
  display: inline-flex;
}
.expanded-52 {
  float: left;
  width: 99%;
  margin-left: 32.5em;
  display: inline-flex;
}
.expanded-53 {
  float: left;
  width: 99%;
  margin-left: 33.125em;
  display: inline-flex;
}
.expanded-54 {
  float: left;
  width: 99%;
  margin-left: 33.75em;
  display: inline-flex;
}
.expanded-55 {
  float: left;
  width: 99%;
  margin-left: 34.375em;
  display: inline-flex;
}
.expanded-56 {
  float: left;
  width: 99%;
  margin-left: 35em;
  display: inline-flex;
}
.expanded-57 {
  float: left;
  width: 99%;
  margin-left: 35.625em;
  display: inline-flex;
}
.expanded-58 {
  float: left;
  width: 99%;
  margin-left: 36.25em;
  display: inline-flex;
}
.expanded-59 {
  float: left;
  width: 99%;
  margin-left: 36.875em;
  display: inline-flex;
}
.expanded-60 {
  float: left;
  width: 99%;
  margin-left: 37.5em;
  display: inline-flex;
}
.expanded-61 {
  float: left;
  width: 99%;
  margin-left: 38.125em;
  display: inline-flex;
}
.expanded-62 {
  float: left;
  width: 99%;
  margin-left: 38.75em;
  display: inline-flex;
}
.expanded-63 {
  float: left;
  width: 99%;
  margin-left: 39.375em;
  display: inline-flex;
}
.expanded-64 {
  float: left;
  width: 99%;
  margin-left: 40em;
  display: inline-flex;
}
.expanded-65 {
  float: left;
  width: 99%;
  margin-left: 40.625em;
  display: inline-flex;
}
.expanded-66 {
  float: left;
  width: 99%;
  margin-left: 41.25em;
  display: inline-flex;
}
.expanded-67 {
  float: left;
  width: 99%;
  margin-left: 41.875em;
  display: inline-flex;
}
.expanded-68 {
  float: left;
  width: 99%;
  margin-left: 42.5em;
  display: inline-flex;
}
.expanded-69 {
  float: left;
  width: 99%;
  margin-left: 43.125em;
  display: inline-flex;
}
.expanded-70 {
  float: left;
  width: 99%;
  margin-left: 43.75em;
  display: inline-flex;
}
.expanded-71 {
  float: left;
  width: 99%;
  margin-left: 44.375em;
  display: inline-flex;
}
.expanded-72 {
  float: left;
  width: 99%;
  margin-left: 45em;
  display: inline-flex;
}
.expanded-73 {
  float: left;
  width: 99%;
  margin-left: 45.625em;
  display: inline-flex;
}
.expanded-74 {
  float: left;
  width: 99%;
  margin-left: 46.25em;
  display: inline-flex;
}
.expanded-75 {
  float: left;
  width: 99%;
  margin-left: 46.875em;
  display: inline-flex;
}
.expanded-76 {
  float: left;
  width: 99%;
  margin-left: 47.5em;
  display: inline-flex;
}
.expanded-77 {
  float: left;
  width: 99%;
  margin-left: 48.125em;
  display: inline-flex;
}
.expanded-78 {
  float: left;
  width: 99%;
  margin-left: 48.75em;
  display: inline-flex;
}
.expanded-79 {
  float: left;
  width: 99%;
  margin-left: 49.375em;
  display: inline-flex;
}
.expanded-80 {
  float: left;
  width: 99%;
  margin-left: 50em;
  display: inline-flex;
}
.expanded-81 {
  float: left;
  width: 99%;
  margin-left: 50.625em;
  display: inline-flex;
}
.expanded-82 {
  float: left;
  width: 99%;
  margin-left: 51.25em;
  display: inline-flex;
}
.expanded-83 {
  float: left;
  width: 99%;
  margin-left: 51.875em;
  display: inline-flex;
}
.expanded-84 {
  float: left;
  width: 99%;
  margin-left: 52.5em;
  display: inline-flex;
}
.expanded-85 {
  float: left;
  width: 99%;
  margin-left: 53.125em;
  display: inline-flex;
}
.expanded-86 {
  float: left;
  width: 99%;
  margin-left: 53.75em;
  display: inline-flex;
}
.expanded-87 {
  float: left;
  width: 99%;
  margin-left: 54.375em;
  display: inline-flex;
}
.expanded-88 {
  float: left;
  width: 99%;
  margin-left: 55em;
  display: inline-flex;
}
.expanded-89 {
  float: left;
  width: 99%;
  margin-left: 55.625em;
  display: inline-flex;
}
.expanded-90 {
  float: left;
  width: 99%;
  margin-left: 56.25em;
  display: inline-flex;
}
.expanded-91 {
  float: left;
  width: 99%;
  margin-left: 56.875em;
  display: inline-flex;
}
.expanded-92 {
  float: left;
  width: 99%;
  margin-left: 57.5em;
  display: inline-flex;
}
.expanded-93 {
  float: left;
  width: 99%;
  margin-left: 58.125em;
  display: inline-flex;
}
.expanded-94 {
  float: left;
  width: 99%;
  margin-left: 58.75em;
  display: inline-flex;
}
.expanded-95 {
  float: left;
  width: 99%;
  margin-left: 59.375em;
  display: inline-flex;
}
.expanded-96 {
  float: left;
  width: 99%;
  margin-left: 60em;
  display: inline-flex;
}
.expanded-97 {
  float: left;
  width: 99%;
  margin-left: 60.625em;
  display: inline-flex;
}
.expanded-98 {
  float: left;
  width: 99%;
  margin-left: 61.25em;
  display: inline-flex;
}
.expanded-99 {
  float: left;
  width: 99%;
  margin-left: 61.875em;
  display: inline-flex;
}
.expanded-100 {
  float: left;
  width: 99%;
  margin-left: 62.5em;
  display: inline-flex;
}
.value-expanded-atom {
  position: relative;
  display: flex;
  padding-left: 0.625em;
}
.value-expanded-atom-parent {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: fit-content;
}
.value-expanded-compound-parent {
  display: flex;
  flex-direction: column;
}
.value-expanded-compound {
  display: flex;
  flex-direction: column;
}
.value-expanded {
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: visible /*hidden*/;
  position: relative;
}
.atom-even {
  color: #f3f3f3;
}
.atom-odd {
  color: #f3f3f3;
}
.chevron {
  color: #f3f3f3;
  cursor: pointer;
  position: absolute;
}
.chevron::before {
  border-style: solid;
  border-width: 0.1em 0.1em 0 0;
  content: '';
  display: inline-block;
  height: 0.45em;
  left: -0.3125em;
  position: absolute;
  top: 0.15em;
  transform: rotate(135deg);
  vertical-align: top;
  width: 0.45em;
}
#chevron-container {
  margin-bottom: 0.625em;
  margin-left: 0.625em;
  margin-right: 0.625em;
  position: relative;
}
.value-components-container {
  position: relative;
  height: 100%;
  overflow: auto;
  margin-top: 0.25em;
}
.value-components-container .line-chart {
  height: 12.5em;
}
.value-expanded-text,
.value-expand {
  color: #fdba74;
  cursor: pointer;
  display: contents;
  position: absolute;
  width: 95%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.list-name {
  width: 50%;
  float: left;
}
.calltrace-editor-call {
  border: 0.0625em solid #f3f3f3;
  height: 7.5em;
  color: #f3f3f3;
}
.calltrace-editor-call .code-editor {
  height: 6.25em;
}
.local-calltrace-view .event-selected {
  padding-right: 0.5em;
}
.event-selected {
  background: #3e3e3b !important;
}
.code-state-line {
  color: #f3f3f3;
  margin-bottom: 0.5em;
}
.call-search-results {
  max-height: 5.5em;
  overflow: scroll;
  background-color: #242424;
  margin-left: 0;
  margin-bottom: 0.25em;
}
.call-search-results,
.search-result {
  color: #f3f3f3 !important;
  cursor: pointer;
  text-decoration: none;
  padding-left: 0.5em;
  line-height: 1.45em;
}
.empty-search-result {
  color: #f00;
  text-align: center;
  white-space: break-spaces;
}
.active-call-location {
  width: 0.25em;
  height: 0.25em;
  background-image: url("../../public/resources/calltrace/dot-active-call-calltrace-dark.svg") !important;
  background-size: cover;
  background-position: center;
  display: block;
  position: relative;
  bottom: -0.625em;
  left: 0.1875em;
  top: 1.125em;
}
.isonim-calltrace .calltrace-search {
  padding-left: 0.25em;
  padding-right: 0.25em;
}
.isonim-calltrace .local-calltrace-view .calltrace-call-line {
  padding-left: 0.5em;
}
.async-flow {
  font-family: "SpaceMono", monospace;
}
.calltrace-async-toggle {
  display: flex;
  align-items: center;
  padding: 4px 8px;
  gap: 8px;
  border-bottom: 1px solid var(--borders-color);
}
.async-toggle-label {
  font-size: 12px;
  color: var(--text-secondary);
}
.async-toggle-buttons {
  display: flex;
  gap: 2px;
}
.toggle-btn {
  padding: 2px 8px;
  font-size: 11px;
  border: 1px solid var(--borders-color);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  border-radius: 3px;
}
.toggle-btn.active {
  background: var(--active-menu-background);
  color: var(--active-text);
}
.continuation-jump-link {
  display: inline-block;
  margin-left: 4px;
  color: #58a6ff;
  cursor: pointer;
  font-size: 14px;
}
.continuation-jump-link:hover {
  color: #79c0ff;
  text-decoration: underline;
}
.calltrace-virtual-placeholder {
  padding: 16px;
  color: var(--text-secondary);
  font-size: 13px;
  font-style: italic;
}
.flow-status-widget {
  height: 19px;
  width: max-content;
  display: inline-block;
  background-color: #1b1b1b;
  color: #f3f3f3;
  font-size: 15px;
  padding-left: 2px;
  padding-right: 2px;
}
.flow-component {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  min-height: 0;
  box-sizing: border-box;
  overflow: hidden;
  color: #f3f3f3;
  font-family: "FiraCode";
  font-size: 13px;
  line-height: 20px;
}
.flow-component .flow-mode-selector {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  flex: 0 0 auto;
}
.flow-component .flow-mode-selector button {
  height: 24px;
  min-width: 64px;
  padding: 0 10px;
  border: 0;
  border-radius: 4px;
  background: #333;
  color: #f3f3f3;
  cursor: pointer;
  font: inherit;
}
.flow-component .flow-mode-selector button.active {
  background: #242424;
  color: #f3f3f3;
}
.flow-component .flow-loading {
  padding: 0 8px 6px;
  color: #f3f3f3;
}
.flow-component .flow-loading[display="none"] {
  display: none;
}
.flow-component .flow-iteration-slider {
  display: grid;
  grid-template-columns: max-content minmax(140px, 360px);
  gap: 10px;
  align-items: center;
  padding: 0 8px 8px;
  flex: 0 0 auto;
}
.flow-component .iteration-range {
  width: 100%;
}
.flow-component .flow-steps {
  flex: 1 1 auto;
  min-height: 0;
  border-top: 1px solid #242424;
  overflow: auto;
  background: #1b1b1b;
}
.flow-component .flow-steps-header,
.flow-component .flow-step-row {
  display: grid;
  grid-template-columns: 4.5em 14em minmax(16em, 1fr) minmax(12em, 20em);
  align-items: center;
  column-gap: 1em;
  padding: 0 0.75em;
  min-height: 24px;
  border-bottom: 1px solid #3a3a3a;
}
.flow-component .flow-steps-header {
  position: sticky;
  top: 0;
  z-index: 1;
  color: #f3f3f3;
  background: #1b1b1b;
  font-size: 12px;
}
.flow-component .flow-step-row {
  cursor: pointer;
  color: #f3f3f3;
}
.flow-component .flow-step-row:hover,
.flow-component .flow-step-row.hovered {
  background: #333;
}
.flow-component .flow-step-index {
  color: #f3f3f3;
}
.flow-component .flow-step-location {
  color: #9cdcfe;
}
.flow-component .flow-step-expression {
  color: #f3f3f3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.flow-component .flow-step-value {
  color: #b5cea8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.flow-component .flow-steps-empty {
  padding: 0.75em;
  color: #f3f3f3;
}
.flow-component .flow-value-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 8px;
  border-top: 1px solid #242424;
  flex: 0 0 auto;
}
.flow-component .raw-value-toggle {
  height: 22px;
  padding: 0 8px;
  border: 0;
  border-radius: 4px;
  background: #333;
  color: #f3f3f3;
  cursor: pointer;
  font: inherit;
}
.flow-component .raw-value-toggle.active {
  background: #242424;
  color: #f3f3f3;
}
.flow-loop-legend {
  position: absolute;
  display: inline-flex;
  height: 20px;
  overflow: visible !important;
  font-size: 0.9em;
  margin-right: 10px;
}
.flow-parallel-values {
  float: left;
  height: 20px;
  transition: all 400ms ease;
  border-right: 1px solid #aaa;
}
.flow-parallel-value {
  display: inline-flex;
  padding-right: 10px;
}
.flow-parallel-value-name {
  background: #1b1b1b;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 0;
  padding-bottom: 3px;
  display: inline-block;
  box-sizing: border-box;
  white-space: nowrap;
}
.flow-view-more-button {
  border-radius: 0px !important;
  border-top-left-radius: 4px !important;
  border-bottom-left-radius: 4px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  min-width: 3.5ch;
  max-width: 3.5ch;
}
.flow-hide-content {
  background-image: url("../../public/resources/shared/flow_hide_dark.svg") !important;
}
.flow-show-content {
  background-image: url("../../public/resources/shared/flow_show_dark.svg") !important;
}
.flow-error-name {
  background: #1b1b1b !important;
}
.flow-std-default-name {
  background: #1b1b1b !important;
}
.flow-error-box {
  background: #1b1b1b !important;
}
.flow-std-default-box {
  background: #1b1b1b !important;
}
.flow-parallel-value-before {
  background-color: #1b1b1b;
  color: #000;
}
.flow-parallel-value-after {
  background-color: #1b1b1b;
  color: #f3f3f3;
}
.flow-parallel-value-name,
.code-editor .flow-parallel-value-name {
  color: #b4b4b4;
  border-right: 1px solid #3a3a3a;
}
.flow-parallel-value-box,
.code-editor .flow-parallel-value-box {
  color: #f3f3f3;
  font-weight: 600;
}
.flow-dual-value-before {
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
}
.flow-dual-arrow {
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
  background-color: #1b1b1b !important;
}
.flow-inline-value-box {
  height: 17px;
  width: 100%;
  display: inline-block;
  padding-left: 2px;
  padding-right: 2px;
  padding-top: 0;
  padding-bottom: 3px;
  line-height: 17px;
  box-sizing: border-box;
  font-size: 12px;
  overflow: hidden;
  text-align: center;
  border-radius: 2px;
  text-overflow: ellipsis;
  font-family: monospace;
  margin-top: 1.5px;
}
.flow-inline-value-before-only {
  background-color: #1b1b1b;
  color: #bebfc1;
  box-shadow: 1px 1px 1px #242424;
}
.flow-inline-value-after-only {
  background-color: #1b1b1b;
  color: FLOW_INLINE_AFTER_VALUE_COLOR;
  box-shadow: -1px -1px FLOW_INLINE_BEFORE_VALUE_BACKGROUND_COLOR;
}
.flow-inline-value-after-only pre {
  display: inline-block;
  margin: 0;
  overflow: initial;
}
.flow-inline-value-after-only .flow-parallel-loop-values {
  float: left;
  display: inline-block;
}
.flow-inline-value-after-only .flow-iteration-info {
  width: 70px;
  float: left;
  background-color: #1b1b1b;
  color: FLOW_PARALLEL_ITERATION_INFO_COLOR;
  height: 18px;
  line-height: 18px;
  border-radius: 1px;
  border: 0;
}
.flow-inline-decoration {
  height: 18px;
  width: 80px;
  display: inline-block;
}
.flow-inline-decoration .flow-inline-value-box {
  width: 80%;
  display: inline-block;
  padding-left: 2px;
  padding-right: 2px;
  padding-top: 0;
  overflow: hidden;
  text-align: center;
  border-radius: 2px;
  text-overflow: ellipsis;
  font-family: monospace;
  font-weight: normal;
  margin-left: 15%;
  position: relative;
}
.flow-inline-decoration .flow-inline-value-before-only {
  background-color: #1b1b1b;
  color: #000;
  box-shadow: 1px 1px 1px #9a9da7;
}
.flow-loop-background {
  position: absolute;
  z-index: -1;
  background-color: #1b1b1b;
  border-radius: 5px;
  border: 1px solid #39414a;
  opacity: 0.5;
}
.flow-loop-slider-container {
  position: absolute;
  width: 100px !important;
}
.flow-component-container {
  transform: translate(0px, 2px);
}
.flow-loop-slider {
  border-color: FLOW_PARALLEL_SLIDER_COLOR !important;
  border-width: 1px !important;
  position: absolute !important;
  font-size: inherit;
  height: 2px !important;
}
.flow-loop-slider .noUi-base {
  width: 100%;
  height: 2px !important;
  background-color: #333;
}
.flow-loop-slider .noUi-touch-area {
  height: calc(100% + 1em) !important;
  width: calc(100% + 1em) !important;
  transform: translate(-0.5em, -0.5em) !important;
}
.flow-loop-slider .noUi-handle {
  border-radius: 1em;
  background: #f3f3f3;
  width: 0.23em !important;
  height: 0.9em !important;
  top: -0.4em !important;
  right: -0.2em !important;
}
.flow-loop-slider .noUi-connect {
  background: #818cf8;
}
.flow-loop-slider .noUi-tooltip {
  position: absolute;
  font-size: 12px !important;
  display: none;
  z-index: 100 !important;
}
.flow-loop-slider .noUi-tooltip::after {
  display: none;
}
.flow-loop-slider .noUi-handle:before {
  display: none;
}
.flow-loop-slider .noUi-handle:after {
  display: none;
}
.flow-loop-slider .noUi-active {
  background-color: #b4b4b4;
  background-image: url("../../public/resources/shared/noUiSlider_handle_active_icon_dark.svg");
}
.flow-loop-slider .noUi-active .noUi-tooltip {
  display: block !important;
}
.flow-loop-slider .noUi-target {
  width: 500px;
  margin-right: 64px !important;
  border: 0px !important;
  box-shadow: none !important;
  background: #333 !important;
}
.flow-loop-slider #slider-slow.noUi-state-tap .noUi-connect,
.flow-loop-slider #slider-slow.noUi-state-tap .noUi-origin {
  -webkit-transition: transform 1600ms;
  transition: transform 1600ms;
}
.flow-loop-first-line .flow-iteration-info {
  height: 16px !important;
  line-height: 16px !important;
}
.flow-loop-first-line .flow-parallel-values {
  height: 18px;
}
.flow-loop-first-line .flow-left-button {
  position: fixed;
  margin-top: 20px;
  font-size: 20px;
  cursor: pointer;
  z-index: 20;
}
.flow-loop-first-line .flow-right-button {
  position: fixed;
  margin-top: 20px;
  font-size: 20px;
  margin-left: 570px;
  cursor: pointer;
}
.flow-tooltip-value {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.flow-loop-multiline {
  left: 40ex /* TODO: custom based on annotations */;
  position: fixed;
  margin-top: 19px;
  margin-bottom: 19px;
}
.flow-loop-line {
  left: 80ex;
  position: fixed;
}
.flow-loop-empty-space {
  position: relative;
}
.flow-loop-empty-space-left-border {
  min-width: 6%;
  max-width: 6%;
  border-left: 1px solid #39414a;
  height: 20px;
}
.flow-loop-shrinked-iteration {
  background-color: #384149;
  width: 100%;
  height: 16px;
  position: absolute;
  left: 1.5px;
  top: 2px;
  border-radius: 2.5px;
}
.flow-loop-continuous-iteration {
  background-color: #384149;
  width: 100%;
  height: 16px;
  position: absolute;
  top: 2px;
  border-radius: 0.5px;
}
.flow-loop-continuous-iteration.first {
  border-top-left-radius: 2.5px;
  border-bottom-left-radius: 2.5px;
}
.flow-loop-continuous-iteration.last {
  border-top-right-radius: 2.5px;
  border-bottom-right-radius: 2.5px;
  margin-right: 5px;
}
.flow-loop-legend-expression {
  height: 17px;
  width: 100%;
  display: inline-block;
  padding-left: 2px;
  padding-right: 2px;
  padding-bottom: 3px;
  line-height: 17px;
  box-sizing: border-box;
  font-size: 12px;
  overflow: hidden;
  text-align: center;
  border-radius: 2px;
  text-overflow: ellipsis;
  font-family: monospace;
  background: #1b1b1b;
  box-shadow: 1px 1px 1px #242424;
  margin-top: 1.5px;
  color: #f3f3f3;
}
.flow-loop-value-single {
  display: flex;
}
.tippy-box[data-theme~='internal_default_light'] {
  background-color: #1b1b1b;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0.375em;
  border-bottom-right-radius: 0.375em;
  color: #f3f3f3;
  display: inline-flex;
  flex-direction: column;
  font-size: inherit;
  min-width: 3.125em;
  max-width: 100ch !important;
  max-height: 50vh !important;
  padding-right: 0.5em;
  position: relative;
  z-index: 20;
  top: 1.2ch;
}
.tippy-box[data-theme~='internal_default_light']::before {
  position: absolute;
  display: flex;
  align-items: center;
  content: 'Values:';
  font-size: 0.75em;
  width: 100%;
  height: 1.5em;
  top: -1.5em;
  left: 0;
  background-color: #1b1b1b;
  border-top-left-radius: 0.375em;
  border-top-right-radius: 0.375em;
  text-indent: 0.3125em;
  font-weight: bold;
}
.tippy-box[data-theme~='internal_default_light'] .value-expanded-compound::before {
  left: 0.25em !important;
}
.tippy-box[data-theme~='internal_default_light'] .toggle-value-history {
  display: none;
}
.tippy-box[data-theme~='internal_default_light'] .value-expand-button {
  display: none;
}
.tippy-box[data-theme~='internal_default_light'] .value-expanded-name {
  padding-left: 0 !important;
}
.tippy-box[data-theme~='internal_default_light'] .flow-tooltip-step-info {
  font-style: italic;
  color: #333;
}
.tippy-box[data-theme~='internal_default_light'] .add-to-scratchpad-button {
  width: 1em;
  height: 1em;
  background-image: url("../../public/resources/shared/add_to_scratchpad_button_dark.svg");
  background-size: 1em 1em;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  transform: translateX(-0.25em);
  border-radius: 6.25em;
  outline: 0.0625em solid #818181;
}
.tippy-box[data-theme~='internal_default_light'] .add-to-scratchpad-button:hover {
  outline: 0.125em solid #818181;
}
.tippy-box[data-theme~='internal_default_light'] .add-to-scratchpad-button:active {
  opacity: 0.5;
}
.tippy-box[data-theme~='internal_default_light'] .add-to-scratchpad-button .custom-tooltip {
  left: -8.75em;
  top: -0.375em;
}
.tippy-box[data-theme~='internal_default_light'] .add-to-scratchpad-button .custom-tooltip:after {
  border-color: transparent transparent transparent #1b1b1b;
  left: 98%;
  bottom: 0%;
  border-width: 0.75em;
  top: 0%;
}
.tippy-box[data-theme~='internal_default_light'][data-placement^="top"] > .tippy-arrow::before {
  border-top-color: #fefefe;
}
.tippy-box[data-theme~='internal_default_light'] .tippy-content {
  position: relative;
  font-weight: 400;
  overflow-y: auto !important;
  overflow-x: auto !important;
  max-height: 100%;
  white-space: nowrap;
  max-width: 100%;
  padding-left: 1ch;
}
.line-flow-hit {
  opacity: 1;
  position: relative;
}
.line-flow-skip {
  opacity: 0.5;
  font-weight: normal;
}
.line-flow-unknown {
  font-weight: normal;
  opacity: 0.5;
}
.review-flow-selector {
  display: flex;
  align-items: flex-end;
  height: 100%;
  box-sizing: border-box;
  gap: 6px;
  padding: 0 8px 2px;
  font-size: 0.85em;
  color: #f3f3f3;
  opacity: 0.85;
  position: relative;
  z-index: 12;
  pointer-events: auto;
}
.review-flow-selector .review-flow-label {
  white-space: nowrap;
}
.review-flow-selector .review-flow-step {
  background: transparent;
  border: 1px solid #3a3a3a;
  border-radius: 3px;
  color: inherit;
  cursor: pointer;
  font: inherit;
  line-height: 1;
  padding: 0 5px;
}
.review-flow-selector .review-flow-step:hover {
  background: #242424;
}
.review-flow-selector .review-flow-step[disabled] {
  cursor: default;
  opacity: 0.35;
}
.review-loop-selector {
  opacity: 0.7;
}
.review-loop-slider {
  position: relative !important;
  flex: 1 1 auto;
  min-width: 60px;
  max-width: 280px;
  width: auto !important;
  margin-left: 8px;
  margin-right: 8px;
  pointer-events: auto;
  z-index: 40;
}
.review-loop-slider .flow-loop-slider {
  position: relative !important;
  width: 100% !important;
  margin-left: 0;
}
.review-loop-slider .flow-loop-slider .noUi-base,
.review-loop-slider .flow-loop-slider .noUi-target {
  background-color: #565656 !important;
  height: 3px !important;
  width: 100% !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}
.review-loop-slider .flow-loop-slider .noUi-connect {
  background: #818cf8 !important;
}
.review-loop-slider .flow-loop-slider .noUi-handle {
  width: 0.7em !important;
  right: -0.35em !important;
  height: 1.1em !important;
  top: -0.5em !important;
  border-radius: 0.35em !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.55) !important;
}
.review-inline-value {
  white-space: pre;
  border-radius: 0.25em;
  padding: 0 0.4em;
}
.review-flow-value-box.review-inline-value {
  font-family: "SpaceMono";
  background: #242424;
  color: #f3f3f3;
  margin-right: 0.5em;
}
.review-flow-band-host {
  pointer-events: none;
}
.review-flow-band-host.review-flow-band-row-below.review-flow-band-added {
  background-color: var(--vscode-diffEditor-insertedLineBackground);
}
.review-flow-band-host.review-flow-band-row-below.review-flow-band-removed {
  background-color: var(--vscode-diffEditor-removedLineBackground);
}
.review-flow-band {
  display: flex;
  align-items: center;
  white-space: nowrap;
  pointer-events: none;
  height: 100%;
}
.review-flow-band .review-flow-band-line {
  flex: 0 0 auto;
  text-align: right;
  opacity: 0.55;
  margin-right: 1em;
  min-width: 3ch;
  font-family: inherit;
  line-height: 1;
  white-space: nowrap;
}
.review-flow-band .ct-omni-value {
  flex: 0 0 auto;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1.25;
}
.review-flow-band .flow-parallel-value-name {
  padding-top: 0;
  padding-bottom: 0;
}
.review-flow-band .review-flow-more,
.review-flow-band .review-flow-more-passes {
  color: #a2a2a2;
  padding: 0 0.4em;
  align-self: center;
  flex: 0 0 auto;
  margin-left: auto;
}
.review-flow-band .flow-parallel-loop-values,
.review-flow-band .flow-parallel-group {
  display: flex;
  float: none;
}
.review-flow-band .flow-loop-step-container {
  position: static;
  width: auto;
  margin-right: 0;
}
.review-flow-band .flow-parallel-values {
  display: flex;
  align-items: center;
  float: none;
  flex: 0 0 auto;
}
.review-flow-band .flow-parallel-values:last-of-type {
  border-right: 0;
}
.flow-taken {
  width: 100px;
  background: rgba(22,101,52,0.537);
}
.flow-not-taken {
  width: 100px;
  background: rgba(153,27,27,0.302);
}
.diff-added {
  background: rgba(22,101,52,0.537);
}
@font-face {
  font-family: FontAwesome;
  src: url("../../public/resources/fonts/fontawesome-webfont.woff") format('woff'), url("fontawesome-webfont.ttf") format('truetype');
  font-weight: 400;
  font-style: normal;
}
.status-timer {
  margin-left: 10px;
}
.status-timer #slower-message {
  padding-left: 10px;
}
.flow-inline-value-before:after {
  content: attr(data-content);
  border: 1px solid #f3f3f3;
  height: 18px;
  background-color: #0ff;
  display: inline-block;
}
@-moz-keyframes flow-width {
  0% {
    background-color: #00f;
  }
  100% {
    background-color: #0f0;
  }
}
@-webkit-keyframes flow-width {
  0% {
    background-color: #00f;
  }
  100% {
    background-color: #0f0;
  }
}
@-o-keyframes flow-width {
  0% {
    background-color: #00f;
  }
  100% {
    background-color: #0f0;
  }
}
@keyframes flow-width {
  0% {
    background-color: #00f;
  }
  100% {
    background-color: #0f0;
  }
}
.timeline-component {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  min-height: 0;
  box-sizing: border-box;
  overflow: hidden;
  color: #f3f3f3;
  font-family: "FiraCode";
  font-size: 13px;
  line-height: 20px;
}
.timeline-component .timeline-position {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 10px;
  flex: 0 0 auto;
  color: #f3f3f3;
  border-bottom: 1px solid #242424;
  background: #333;
}
.timeline-component .position-ticks {
  color: #f3f3f3;
}
.timeline-component .timeline-zoom-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  flex: 0 0 auto;
}
.timeline-component .timeline-zoom-controls button {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 4px;
  background: #333;
  color: #f3f3f3;
  cursor: pointer;
  font: inherit;
}
.timeline-component .zoom-level {
  min-width: 42px;
  text-align: center;
  color: #f3f3f3;
}
.timeline-component .timeline-track {
  position: relative;
  height: 42px;
  margin: 0 10px;
  border-top: 1px solid #242424;
  border-bottom: 1px solid #242424;
  background: linear-gradient(90deg, #3a3a3a 1px, transparent 1px), linear-gradient(to bottom, transparent 19px, #333 20px, transparent 21px);
  background-size: 40px 100%, 100% 100%;
  flex: 0 0 auto;
  cursor: pointer;
}
.timeline-component .timeline-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #d7ba7d;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35);
}
.timeline-component .timeline-hover-tooltip {
  width: fit-content;
  margin: 8px;
  padding: 2px 6px;
  border-radius: 4px;
  background: #333;
  color: #f3f3f3;
  font-size: 12px;
}
.frame-viewer-component {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  min-height: 0;
  box-sizing: border-box;
  overflow: hidden;
  color: #f3f3f3;
  background: #282828;
  font-family: "FiraCode";
  font-size: 13px;
  line-height: 20px;
}
.frame-viewer-component .frame-viewer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 10px;
  flex: 0 0 auto;
  border-bottom: 1px solid #242424;
  background: #333;
}
.frame-viewer-component .frame-viewer-player-url {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #f3f3f3;
}
.frame-viewer-component .frame-viewer-connection-status {
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  text-transform: uppercase;
  white-space: nowrap;
}
.frame-viewer-component .frame-viewer-connection-status.connected {
  background: rgba(61,135,90,0.24);
  color: #8cd9a8;
}
.frame-viewer-component .frame-viewer-connection-status.disconnected,
.frame-viewer-component .frame-viewer-connection-status.absent {
  background: rgba(142,119,56,0.24);
  color: #d8c06f;
}
.frame-viewer-component .frame-viewer-frame-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.frame-viewer-component .frame-viewer-frame-controls button {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 4px;
  background: #333;
  color: #f3f3f3;
  cursor: pointer;
  font: inherit;
}
.frame-viewer-component .frame-viewer-frame-label {
  min-width: 8em;
  text-align: center;
  color: #f3f3f3;
}
.frame-viewer-component .frame-viewer-scrubber {
  padding: 6px 10px;
  flex: 0 0 auto;
  border-bottom: 1px solid #242424;
}
.frame-viewer-component .frame-viewer-frame-range {
  width: 100%;
}
.frame-viewer-component .frame-viewer-body {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(180px, 280px);
  min-height: 0;
  flex: 1 1 auto;
}
.frame-viewer-component .frame-viewer-frame-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 12px;
  background: #101010;
}
.frame-viewer-component .frame-viewer-image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  image-rendering: pixelated;
  border: 1px solid #3a3a3a;
  background: #000;
  cursor: crosshair;
}
.frame-viewer-component .frame-viewer-image[display="none"] {
  display: none;
}
.frame-viewer-component .frame-viewer-empty,
.frame-viewer-component .frame-viewer-loading,
.frame-viewer-component .frame-viewer-error {
  color: #f3f3f3;
  padding: 12px;
}
.frame-viewer-component .frame-viewer-empty[display="none"],
.frame-viewer-component .frame-viewer-loading[display="none"],
.frame-viewer-component .frame-viewer-error[display="none"] {
  display: none;
}
.frame-viewer-component .frame-viewer-error {
  color: #fca5a5;
}
.frame-viewer-component .frame-viewer-side-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-left: 1px solid #242424;
  background: #333;
}
.frame-viewer-component .frame-viewer-selected-pixel {
  padding: 8px 10px;
  flex: 0 0 auto;
  color: #f3f3f3;
  border-bottom: 1px solid #242424;
}
.frame-viewer-component .frame-viewer-draw-calls {
  min-height: 0;
  overflow: auto;
  flex: 1 1 auto;
}
.frame-viewer-component .frame-viewer-draw-calls-header {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 6px 10px;
  color: #f3f3f3;
  background: #333;
  border-bottom: 1px solid #242424;
}
.frame-viewer-component .frame-viewer-draw-calls-empty {
  padding: 8px 10px;
  color: #f3f3f3;
}
.frame-viewer-component .frame-viewer-draw-call {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  width: 100%;
  min-height: 42px;
  padding: 6px 10px;
  border: 0;
  border-bottom: 1px solid #3a3a3a;
  background: transparent;
  color: #f3f3f3;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.frame-viewer-component .frame-viewer-draw-call:hover,
.frame-viewer-component .frame-viewer-draw-call.selected {
  background: #333;
}
.frame-viewer-component .frame-viewer-draw-call-name,
.frame-viewer-component .frame-viewer-draw-call-pipeline {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.frame-viewer-component .frame-viewer-draw-call-pipeline {
  color: #f3f3f3;
  font-size: 12px;
}
.pixel-history-component {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  min-height: 0;
  box-sizing: border-box;
  overflow: hidden;
  color: #f3f3f3;
  background: #282828;
  font-family: "FiraCode";
  font-size: 13px;
  line-height: 20px;
}
.pixel-history-component .pixel-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  flex: 0 0 auto;
  border-bottom: 1px solid #242424;
  background: #333;
}
.pixel-history-component .pixel-history-title {
  font-weight: 600;
}
.pixel-history-component .pixel-history-pixel {
  color: #f3f3f3;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pixel-history-component .pixel-history-loading,
.pixel-history-component .pixel-history-error,
.pixel-history-component .pixel-history-empty {
  padding: 10px;
  color: #f3f3f3;
}
.pixel-history-component .pixel-history-loading[display="none"],
.pixel-history-component .pixel-history-error[display="none"],
.pixel-history-component .pixel-history-empty[display="none"] {
  display: none;
}
.pixel-history-component .pixel-history-error {
  color: #fca5a5;
}
.pixel-history-component .pixel-history-list {
  min-height: 0;
  overflow: auto;
  flex: 1 1 auto;
}
.pixel-history-component .pixel-history-entry {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  width: 100%;
  min-height: 84px;
  padding: 8px 10px;
  border: 0;
  border-bottom: 1px solid #3a3a3a;
  background: transparent;
  color: #f3f3f3;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.pixel-history-component .pixel-history-entry:hover,
.pixel-history-component .pixel-history-entry.selected {
  background: #333;
}
.pixel-history-component .pixel-history-entry-main {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 8px;
  align-items: center;
  min-width: 0;
}
.pixel-history-component .pixel-history-draw,
.pixel-history-component .pixel-history-geid {
  color: #f3f3f3;
}
.pixel-history-component .pixel-history-pass {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #f3f3f3;
}
.pixel-history-component .pixel-history-colors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
}
.pixel-history-component .pixel-history-color {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.pixel-history-component .pixel-history-swatch {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border: 1px solid #3a3a3a;
  border-radius: 3px;
}
.pixel-history-component .pixel-history-color-label,
.pixel-history-component .pixel-history-tests {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #f3f3f3;
  font-size: 12px;
}
.shader-debug-component {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  min-height: 0;
  box-sizing: border-box;
  overflow: hidden;
  color: #f3f3f3;
  background: #282828;
  font-family: "FiraCode";
  font-size: 13px;
  line-height: 20px;
}
.shader-debug-component .shader-debug-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  flex: 0 0 auto;
  border-bottom: 1px solid #242424;
  background: #333;
}
.shader-debug-component .shader-debug-title {
  font-weight: 600;
}
.shader-debug-component .shader-debug-context {
  color: #f3f3f3;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shader-debug-component .shader-debug-loading,
.shader-debug-component .shader-debug-error,
.shader-debug-component .shader-debug-empty {
  padding: 10px;
  color: #f3f3f3;
}
.shader-debug-component .shader-debug-loading[display="none"],
.shader-debug-component .shader-debug-error[display="none"],
.shader-debug-component .shader-debug-empty[display="none"] {
  display: none;
}
.shader-debug-component .shader-debug-error {
  color: #fca5a5;
}
.shader-debug-component .shader-debug-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  flex: 0 0 auto;
  border-bottom: 1px solid #3a3a3a;
}
.shader-debug-component .shader-debug-toolbar button {
  min-width: 46px;
  height: 24px;
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  background: #333;
  color: #f3f3f3;
  font: inherit;
  cursor: pointer;
}
.shader-debug-component .shader-debug-toolbar button:hover {
  background: #333;
}
.shader-debug-component .shader-debug-stage,
.shader-debug-component .shader-debug-step-label {
  color: #f3f3f3;
  white-space: nowrap;
}
.shader-debug-component .shader-debug-body {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(220px, 0.8fr);
  min-height: 0;
  flex: 1 1 auto;
}
.shader-debug-component .shader-debug-source {
  min-height: 0;
  overflow: auto;
  border-right: 1px solid #3a3a3a;
}
.shader-debug-component .shader-debug-source-line {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  min-height: 22px;
  align-items: baseline;
}
.shader-debug-component .shader-debug-source-line.current {
  background: #333;
  color: #f3f3f3;
}
.shader-debug-component .shader-debug-line-number {
  padding: 0 8px;
  color: #f3f3f3;
  text-align: right;
  user-select: none;
}
.shader-debug-component .shader-debug-line-code {
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
  font: inherit;
}
.shader-debug-component .shader-debug-inspector {
  min-height: 0;
  overflow: auto;
  padding: 8px 10px;
}
.shader-debug-component .shader-debug-instruction {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}
.shader-debug-component .shader-debug-instruction-label,
.shader-debug-component .shader-debug-values-title {
  color: #f3f3f3;
  font-weight: 600;
}
.shader-debug-component .shader-debug-instruction-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shader-debug-component .shader-debug-values-section {
  margin-bottom: 12px;
}
.shader-debug-component .shader-debug-values-table {
  display: grid;
  grid-template-columns: minmax(70px, auto) minmax(55px, auto) minmax(0, 1fr);
  gap: 0;
  border-top: 1px solid #3a3a3a;
}
.shader-debug-component .shader-debug-value-row {
  display: contents;
}
.shader-debug-component .shader-debug-value-name,
.shader-debug-component .shader-debug-value-type,
.shader-debug-component .shader-debug-value-current {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 4px 6px;
  border-bottom: 1px solid #3a3a3a;
}
.shader-debug-component .shader-debug-value-type {
  color: #f3f3f3;
}
.shader-debug-component .shader-debug-values-empty {
  color: #f3f3f3;
  padding: 4px 0;
}
.video-player-component {
  --video-player-fg: #f3f3f3;
  --video-player-bg: #282828;
  --video-player-chrome-bg: #333;
  --video-player-chrome-border: #242424;
  --video-player-button-hover-bg: #242424;
  --video-player-button-active-bg: #242424;
  --video-player-divider: #242424;
  --video-player-scrub-labels-fg: #f3f3f3;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  min-height: 0;
  box-sizing: border-box;
  overflow: hidden;
  color: var(--video-player-fg);
  background: var(--video-player-bg);
  font-family: "FiraCode";
  font-size: 13px;
  line-height: 20px;
}
.video-player-component.picker-active {
  cursor: crosshair;
}
.video-player-component .video-player-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0a0a;
}
.video-player-component .video-player-image {
  max-width: 100%;
  max-height: 100%;
  image-rendering: pixelated;
  user-select: none;
  pointer-events: none;
}
.video-player-component .video-player-mirror-canvas {
  display: none !important;
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}
.video-player-component .video-player-empty,
.video-player-component .video-player-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ccc;
  font-size: 14px;
  text-align: center;
  pointer-events: none;
}
.video-player-component .video-player-startup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 6px;
  background: rgba(20,20,20,0.78);
  color: #f5f5f5;
  font-size: 13px;
  line-height: 18px;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}
.video-player-component .video-player-startup-spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.18);
  border-top-color: rgba(120,180,255,0.95);
  animation: video-player-startup-spin 0.9s linear infinite;
}
.video-player-component .video-player-startup-label {
  color: #eaeaea;
  font-weight: 500;
}
.video-player-component .video-player-error {
  position: absolute;
  left: 10px;
  bottom: 10px;
  max-width: calc(100% - 20px);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 4px;
  background: rgba(168,27,27,0.92);
  color: #fff5f5;
  font-size: 12px;
  line-height: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  pointer-events: auto;
}
.video-player-component .video-player-error-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff5f5;
  color: #a81b1b;
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  flex: 0 0 auto;
}
.video-player-component .video-player-error-message {
  white-space: pre-wrap;
  word-break: break-word;
}
.video-player-component .video-player-canvas-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}
.video-player-component .video-player-canvas-overlay.picker {
  box-shadow: inset 0 0 0 2px rgba(80,160,255,0.85);
}
.video-player-component .video-player-loupe {
  display: none;
  position: absolute;
  width: 120px;
  pointer-events: none;
  z-index: 10;
  transform-origin: top left;
}
.video-player-component .video-player-loupe.visible {
  display: block;
}
.video-player-component .video-player-loupe-canvas {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.85);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.6), 0 8px 16px rgba(0,0,0,0.5);
  background: #111;
  image-rendering: pixelated;
}
.video-player-component .video-player-loupe-readout {
  margin-top: 4px;
  padding: 2px 6px;
  background: rgba(0,0,0,0.78);
  color: #eaeaea;
  font-size: 11px;
  line-height: 14px;
  border-radius: 3px;
  white-space: nowrap;
  text-align: center;
}
.video-player-component .video-player-loupe-rgba {
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
  color: #f4f4f4;
}
.video-player-component .video-player-transport {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-top: 1px solid var(--video-player-chrome-border);
  background: var(--video-player-chrome-bg);
}
.video-player-component .video-player-transport.disabled {
  opacity: 0.45;
  pointer-events: none;
}
.video-player-component .video-player-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--video-player-fg);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  user-select: none;
}
.video-player-component .video-player-button:hover {
  background: var(--video-player-button-hover-bg);
}
.video-player-component .video-player-button:active,
.video-player-component .video-player-button.pressed {
  background: var(--video-player-button-active-bg);
  border-color: rgba(80,160,255,0.85);
  color: #fff;
}
.video-player-component .video-player-divider {
  width: 1px;
  height: 18px;
  background: var(--video-player-divider);
  margin: 0 4px;
}
.video-player-component .video-player-rate-badge {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 3px;
  background: rgba(80,160,255,0.18);
  color: #cfe7ff;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
}
.video-player-component .video-player-buffering {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fc5;
  color: transparent;
  font-size: 0;
  line-height: 1;
  box-shadow: 0 0 0 2px rgba(255,204,85,0.25);
  animation: video-player-buffering-pulse 1.4s ease-in-out infinite;
}
.video-player-component .video-player-scrubber {
  flex: 0 0 auto;
  padding: 4px 10px 8px;
  background: var(--video-player-chrome-bg);
  border-top: 1px solid var(--video-player-chrome-border);
  position: relative;
}
.video-player-component .video-player-scrub-range {
  width: 100%;
  accent-color: rgba(80,160,255,0.85);
}
.video-player-component .video-player-scrub-range:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.video-player-component .video-player-scrub-ticks {
  position: relative;
  height: 4px;
  margin: 0 6px;
}
.video-player-component .video-player-scrub-tick {
  position: absolute;
  top: 0;
  width: 2px;
  height: 4px;
  background: rgba(200,200,200,0.65);
  transform: translateX(-50%);
}
.video-player-component .video-player-scrub-labels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 2px;
  color: var(--video-player-scrub-labels-fg);
  font-size: 11px;
  line-height: 14px;
}
.video-player-component .video-player-selected-pixel {
  color: var(--video-player-fg);
}
@-moz-keyframes video-player-startup-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes video-player-startup-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes video-player-startup-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes video-player-startup-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@-moz-keyframes video-player-buffering-pulse {
  0%, 100% {
    box-shadow: 0 0 0 2px rgba(255,204,85,0.18);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(255,204,85,0.28);
  }
}
@-webkit-keyframes video-player-buffering-pulse {
  0%, 100% {
    box-shadow: 0 0 0 2px rgba(255,204,85,0.18);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(255,204,85,0.28);
  }
}
@-o-keyframes video-player-buffering-pulse {
  0%, 100% {
    box-shadow: 0 0 0 2px rgba(255,204,85,0.18);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(255,204,85,0.28);
  }
}
@keyframes video-player-buffering-pulse {
  0%, 100% {
    box-shadow: 0 0 0 2px rgba(255,204,85,0.18);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(255,204,85,0.28);
  }
}
body.theme-light .video-player-component {
  --video-player-fg: #464646;
  --video-player-bg: #f5f5f5;
  --video-player-chrome-bg: #b8c0cf;
  --video-player-chrome-border: #9aa3b5;
  --video-player-button-hover-bg: rgba(0,0,0,0.08);
  --video-player-button-active-bg: rgba(0,0,0,0.14);
  --video-player-divider: rgba(0,0,0,0.18);
  --video-player-scrub-labels-fg: #464646;
}
.point-list-component {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #282828;
  color: #f3f3f3;
  font-family: "FiraCode", monospace;
  font-size: 13px;
  line-height: 20px;
}
.point-list-header {
  flex: 0 0 28px;
  display: flex;
  align-items: center;
  padding: 0 0.75em;
  border-bottom: 1px solid #242424;
  background: #333;
  color: #f3f3f3;
}
.point-list-title {
  text-transform: uppercase;
  font-family: "SpaceGrotesk", sans-serif;
  font-size: 12px;
  font-weight: 600;
}
.point-list-items {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
.point-list-row {
  display: grid;
  grid-template-columns: 5em minmax(12em, 1fr) minmax(14em, 32em);
  align-items: center;
  column-gap: 1em;
  min-height: 26px;
  padding: 0 0.75em;
  border-bottom: 1px solid #3a3a3a;
  cursor: pointer;
}
.point-list-row:hover,
.point-list-row.selected {
  background: #333;
}
.point-list-row.disabled {
  opacity: 0.48;
}
.point-list-kind {
  color: #d7ba7d;
  text-transform: uppercase;
  font-size: 11px;
}
.point-list-label,
.point-list-location {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.point-list-location {
  color: #f3f3f3;
}
.point-list-empty {
  padding: 0.75em;
  color: #f3f3f3;
}
.point-list-footer {
  flex: 0 0 24px;
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 0 0.75em;
  border-top: 1px solid #242424;
  color: #f3f3f3;
  font-size: 12px;
}
.point-selected-indicator.active {
  color: #f3f3f3;
}
.search-component {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #282828;
  color: #f3f3f3;
  font-family: "SpaceGrotesk", sans-serif;
  font-size: 13px;
}
.search-mode-selector {
  flex: 0 0 auto;
  display: flex;
  gap: 0.375em;
  padding: 0.5em;
  border-bottom: 1px solid #242424;
  background: #333;
}
.search-mode-selector button {
  height: 24px;
  padding: 0 0.75em;
  border: 1px solid transparent;
  border-radius: 0.25em;
  background: #242424;
  color: #f3f3f3;
  font: inherit;
  cursor: pointer;
}
.search-mode-selector button:hover,
.search-mode-selector button.active {
  background: #333;
  color: #f3f3f3;
  border-color: #3a3a3a;
}
.search-input-row {
  flex: 0 0 auto;
  padding: 0.5em;
  border-bottom: 1px solid #242424;
}
.search-query-input {
  width: 100%;
  height: 30px;
  box-sizing: border-box;
  border: 1px solid #4f4f4f;
  border-radius: 0.25em;
  background: #151515;
  color: #f3f3f3;
  padding: 0 0.75em;
  font: inherit;
  outline: 0;
}
.search-results {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  background: #282828;
}
.search-results[display="none"] {
  display: none;
}
.search-result-row {
  display: grid;
  grid-template-columns: minmax(12em, 1fr) minmax(14em, 32em) 6em;
  align-items: center;
  column-gap: 1em;
  min-height: 28px;
  padding: 0 0.75em;
  border-bottom: 1px solid #3a3a3a;
  cursor: pointer;
}
.search-result-row:hover,
.search-result-row.selected {
  background: #333;
}
.search-result-label,
.search-result-detail {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-result-detail,
.search-result-shortcut,
.search-selected-indicator {
  color: #f3f3f3;
}
.search-selected-indicator {
  display: block;
  padding: 0.5em 0.75em;
  font-family: "FiraCode", monospace;
  font-size: 12px;
}
.search-selected-indicator.active {
  color: #f3f3f3;
}
.lm_goldenlayout {
  background: #1b1b1b !important;
}
.lm_header {
  background-color: transparent !important;
  color: #c8c8c8 !important;
  position: relative;
  box-shadow: 2px 0 0 0 #333 !important;
  z-index: 3 !important;
}
.lm_splitter {
  background: #1b1b1b !important;
  opacity: unset !important;
  transition: background 150ms ease !important;
  z-index: 4 !important;
  cursor: col-resize;
}
.lm_splitter.lm_vertical {
  cursor: row-resize;
}
.lm_splitter:hover {
  background: colors-ui-border-interactive-default !important;
}
.lm_stack {
  overflow: hidden !important;
}
.lm_tabs {
  width: 100%;
  display: flex;
}
.lm_splitter.lm_dragging {
  background: #444;
  z-index: 11;
}
.lm_tab {
  font-family: "SpaceGrotesk" !important;
  font-size: inherit !important;
  font-style: normal;
  font-weight: 600 !important;
  letter-spacing: -0.14px !important;
  background-color: #282828 !important;
  color: colors-ui-text-default-tab !important;
  margin: 0 !important;
  border: 0 !important;
  padding: 0.38em 0.5em !important;
  box-shadow: none !important;
  line-height: normal !important;
  overflow: hidden;
  border-radius: 0.36em;
  margin-right: 0.24em !important;
  margin-bottom: 0px !important;
  flex: 1;
  text-align: center;
  display: flex !important;
  align-items: center !important;
}
.lm_tabdropdown::before {
  color: #1e1f26 !important;
  vertical-align: text-top !important;
}
.lm_item {
  background-color: transparent !important;
  z-index: 3 !important;
}
.lm_items {
  border-radius: 0.36em;
}
.lm_content {
  background-color: #282828 !important;
  border: 0 !important;
  border-radius: 0.36em;
  font-size: inherit;
  padding: 0.25em 0em 0em 0em;
}
.lm_items {
  background-color: transparent;
}
.lm_splitter.lm_horizontal {
  width: 4px !important;
}
.lm_splitter.lm_vertical {
  height: 4px !important;
}
.lm_splitter.lm_vertical .lm_drag_handle {
  top: 0 !important;
  height: 2px !important;
  background-color: #1b1b1b;
}
.lm_splitter.lm_horizontal .lm_drag_handle {
  left: 0 !important;
  width: 4px !important;
  background-color: #1b1b1b;
}
.lm_title {
  color: #727272 !important;
  font-weight: 400 !important;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
  padding-top: 0em !important;
  text-align: start !important;
}
.lm_active {
  background-color: #282828 !important;
  color: #c8c8c8 !important;
  border-top-left-radius: 0.36em;
  border-top-right-radius: 0.36em;
  border-bottom-right-radius: 0em;
  border-bottom-left-radius: 0em;
  box-shadow: 0em 0.48em 0em 0em #282828 !important;
  overflow: visible !important;
}
.lm_active::before {
  content: " ";
  pointer-events: none;
  position: absolute;
  display: block;
  height: 80%;
  width: 1.625em;
  bottom: 0em;
  z-index: 1;
  left: -1.625em;
  border-radius: 0 0 0.625em 0;
  opacity: 1;
  box-shadow: 0.625em 0.34em 0 -0.25em #282828;
  transform: translate(0em, 0.25625em);
}
.lm_active::after {
  content: " ";
  pointer-events: none;
  position: absolute;
  display: block;
  height: 80%;
  width: 1.625em;
  bottom: 0em;
  z-index: 1;
  right: -1.625em;
  border-radius: 0 0 0 0.625em;
  opacity: 1;
  box-shadow: -0.625em 0.34em 0 -0.25em #282828;
  transform: translate(0em, 0.25625em);
}
.lm_header .lm_active .lm_title {
  color: #c8c8c8 !important;
}
.lm_header .lm_controls {
  height: 100% !important;
  align-items: center !important;
}
.lm_controls > * {
  opacity: 1 !important;
  background-color: #1b1b1b !important;
  border: 0.03125em solid #282828 !important;
  border-radius: 0.375em !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 1em 1em !important;
  width: 1.5em !important;
  height: 1.5em !important;
  cursor: pointer;
}
.lm_controls > *:focus {
  outline: none !important;
  box-shadow: none !important;
}
.lm_controls > *:focus-visible {
  outline: none !important;
  box-shadow: inset 0 0 0 0.125em #3b82f6 !important;
}
.lm_controls > *:hover {
  background-color: #262626 !important;
}
.lm_maximise {
  background-image: url("../../public/resources/menu/maximize_16_dark.svg") !important;
}
.lm_popout {
  display: none !important;
}
.lm_close {
  background-image: url("../../public/resources/menu/close_16_dark.svg") !important;
}
.lm_header .lm_tab .lm_close_tab {
  background-image: none !important;
  background-color: #919191;
  -webkit-mask-image: url("../../public/resources/menu/lm_close_tab_dark.svg");
  mask-image: url("../../public/resources/menu/lm_close_tab_dark.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.6em 0.6em;
  mask-size: 0.6em 0.6em;
  opacity: 1;
  width: 0.6em !important;
  height: 0.6em !important;
  position: static !important;
  cursor: pointer;
}
.lm_header .lm_tab .lm_close_tab:hover {
  background-color: #c8c8c8;
}
.lm_header .lm_tab .lm_pin_tab {
  background-image: none !important;
  background-color: #919191;
  -webkit-mask-image: url("../../public/resources/menu/lm_pin_tab_dark.svg");
  mask-image: url("../../public/resources/menu/lm_pin_tab_dark.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.85em 0.85em;
  mask-size: 0.85em 0.85em;
  opacity: 1;
  width: 0.85em !important;
  height: 0.85em !important;
  position: static !important;
  cursor: pointer;
  margin-right: 0.3em;
  flex-shrink: 0;
}
.lm_header .lm_tab .lm_pin_tab:hover {
  background-color: #c8c8c8;
}
.lm_header .lm_tab {
  height: 1.01em !important;
}
.lm_stack:has(> .lm_header .lm_tabs > .lm_tab.lm_active:first-child) > .lm_items,
.lm_stack:has(> .lm_header .lm_tabs > .lm_tab.lm_active:first-child) > .lm_items .lm_content {
  border-top-left-radius: 0;
}
.lm_stack:has(> .lm_header .lm_tabs > .lm_tab.lm_active:first-child) > .lm_header .lm_tabs > .lm_tab.lm_active:first-child::before {
  display: none;
}
.ct-selected-outline {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 6;
  overflow: visible;
}
.ct-selected-outline path {
  fill: none;
  stroke: #565656;
  stroke-width: 0.0625rem;
  stroke-linejoin: round;
}
#menu {
  display: flex;
  flex-direction: row;
  top: 0;
  padding: 0.25em;
  padding-right: 6em;
  box-sizing: border-box;
  -webkit-app-region: drag;
  user-select: none;
  gap: 0.5rem;
  height: 2.125em;
  max-height: 2.125em;
  min-width: 0;
}
#menu #debug {
  -webkit-app-region: no-drag;
  padding-right: 0;
  flex: 0 0 clamp(24em, 24vw, 40em);
  width: clamp(24em, 24vw, 40em);
  min-width: 0;
  max-width: 40em;
  gap: 0.5em;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  order: 3;
}
#menu #debug .separate-bar {
  margin-top: 0.4em;
}
#menu .debug-finished-background {
  background-color: #282828;
}
#menu.menu-shell--reserved-window-controls {
  padding-left: calc(62px + 1rem);
  padding-right: calc(62px + 1rem);
}
#menu.menu-shell--reserved-window-controls #session-tab-bar {
  margin-left: 0;
}
#menu.menu-shell--native-fullscreen {
  padding-left: 8px;
  padding-right: 8px;
}
#menu.menu-shell--native-fullscreen #session-tab-bar {
  margin-left: 0;
}
#menu.menu-shell--reserved-window-controls .isonim-debug-controls > .separate-bar:first-child,
#menu.menu-shell--native-fullscreen .isonim-debug-controls > .separate-bar:first-child {
  display: none;
}
.window-menu {
  display: flex;
  position: absolute;
  right: 0.3125em;
  top: 0;
  margin-right: 0;
  -webkit-app-region: no-drag;
  z-index: 50;
  height: 100%;
  align-items: center;
  cursor: pointer;
}
.window-menu .menu-button-svg {
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background-position: center;
  background-repeat: no-repeat;
}
.window-menu .menu-button-svg.minimize {
  background-image: url("../../public/resources/window/minimize_window_dark.svg");
  opacity: 1;
  background-position: center;
  background-position-y: 65%;
}
.window-menu .menu-button-svg.restore {
  background-image: url("../../public/resources/window/maximize_window_dark.svg");
  opacity: 1;
}
.window-menu .menu-button-svg.maximize {
  background-image: url("../../public/resources/window/maximize_window_dark.svg");
  opacity: 1;
}
.window-menu .menu-button-svg.close {
  background-image: url("../../public/resources/window/close_window_dark.svg");
  opacity: 1;
  font-size: inherit !important;
}
.window-menu .menu-button-svg:hover {
  opacity: 0.5;
}
#menu {
/* based on design : psd file and krita color selector */
/* TODO move to light theme */
  background-color: #1b1b1b;
  position: fixed;
  width: 100vw;
  top: 0;
  z-index: 20;
  border-top-left-radius: 0.375em;
  border-top-right-radius: 0.375em;
}
#menu i.fa-window-minimize,
#menu i.fa-window-maximize {
  width: 50px;
  height: 50px;
  font-size: 20px;
  color: OPPOSITE_COLOR;
}
#menu #navigation-menu {
  font-size: inherit;
  color: #fff;
  z-index: 10;
  -webkit-app-region: no-drag;
  order: 1;
  flex: 0 0 auto;
}
#menu #navigation-menu:focus {
  outline: 0 !important;
}
#menu #isonim-debug-controls {
  order: 2;
  flex: 1 1 0;
  min-width: max-content;
}
#menu #debug .component-container {
  min-width: 0;
}
#menu #menu-root {
  height: 100%;
  display: flex;
  width: fit-content;
  min-width: fit-content;
  align-items: center;
  justify-content: center;
}
#menu #menu-root:hover:not(:disabled) {
  background-color: #1b1b1b !important;
}
#menu #menu-root:active {
  background-color: #1b1b1b !important;
}
#menu #menu-root #menu-logo-img {
  width: 1.25em;
  height: 1.25em;
  background-image: url("../../public/resources/menu/ct_logo_dark.svg");
  background-size: cover;
  background-position: center;
  display: inline-block;
  position: relative;
  cursor: pointer;
}
#menu #menu-root #menu-root-name {
  height: 25px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  max-width: 48ex;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 10px;
}
#menu #menu-main {
  font-family: "SpaceMono";
  font-size: 0.875em;
  width: fit-content;
  min-width: 12em;
  padding: 0;
  position: absolute;
  top: 2.5rem;
  margin-left: 6px;
  background: #1b1b1b;
  border: 0.03125rem solid #565656;
  border-radius: 0.375rem;
  box-shadow: none;
  overflow: hidden;
  animation: ct-dropdown-reveal 120ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
  #menu #menu-main {
    animation: none;
  }
}
#menu #menu-main::-webkit-scrollbar,
#menu #menu-main ::-webkit-scrollbar {
  width: 0.375rem;
  height: 0.375rem;
}
#menu .menu-search-result {
  font-size: 0.875em;
  height: auto;
  min-width: fit-content;
  display: flex;
  padding-top: 2px;
  padding-bottom: 2px;
  background-color: #242424;
  margin-left: 4px;
  margin-right: 4px;
  align-items: center;
  border-radius: 4px;
}
#menu .menu-node-container {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  -webkit-app-region: no-drag;
  pointer-events: auto;
}
#menu .menu-search-result .menu-node-name {
  width: -webkit-fill-available !important;
  justify-content: space-between;
  float: left;
  padding-left: 8px;
  padding-right: 8px;
  color: #f3f3f3;
  font-size: 0.875em;
  border-radius: 5px;
  display: flex;
  align-items: center;
  font-weight: 400;
  line-height: 18px;
  white-space: nowrap;
}
#menu .menu-search-result .menu-node-shortcut {
  width: fit-content !important;
  background-color: #333;
  border-radius: 6px;
  color: #f3f3f3;
  font-size: 10px;
  text-align: right;
  padding: 4px;
  line-height: 10px;
  margin-right: 8px;
  margin-left: 8px;
  white-space: nowrap;
}
#menu .menu-folder .menu-node-name {
  width: -webkit-fill-available !important;
  justify-content: space-between;
  float: left;
  padding-left: 8px;
  padding-right: 8px;
  color: #f3f3f3;
  font-size: 0.875em;
  border-radius: 5px;
  display: flex;
  align-items: center;
  font-weight: 400;
  white-space: nowrap;
}
#menu .menu-folder .menu-expand {
  width: 2ch;
  float: left;
  position: relative;
  margin-left: 8px;
  display: flex;
  align-items: center;
}
#menu .menu-folder .menu-expand::after {
  position: absolute;
  right: 0px;
  width: 7px;
  height: 8px;
  content: url("../../public/resources/menu/menu_expand_button_dark.svg");
  display: flex;
  align-items: center;
  padding-bottom: 2px;
}
#menu .menu-node-icon {
  width: 14px;
  height: 24px;
  display: flex;
  align-items: center;
  margin-left: 4px;
  opacity: 0.5;
}
#menu .menu-node-icon i {
  font-size: 14px !important;
}
#menu .icon {
  width: 14px;
  height: 14px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px;
}
#menu .icon.file {
  background-image: url("../../public/resources/menu/menu_file_dark.svg");
}
#menu .icon.new-file {
  background-image: url("../../public/resources/menu/new_file_16_dark.svg");
}
#menu .icon.open-file {
  background-image: url("../../public/resources/menu/open_file_16_dark.svg");
}
#menu .icon.edit {
  background-image: url("../../public/resources/menu/menu_edit_dark.svg");
}
#menu .icon.navigate {
  background-image: url("../../public/resources/menu/menu_navigate_dark.svg");
}
#menu .icon.view {
  background-image: url("../../public/resources/menu/menu_view_dark.svg");
}
#menu .icon.build {
  background-image: url("../../public/resources/menu/menu_build_dark.svg");
}
#menu .icon.debug {
  background-image: url("../../public/resources/menu/menu_debug_dark.svg");
}
#menu .icon.help {
  background-image: url("../../public/resources/menu/menu_help_dark.svg");
}
#menu #menu-elements {
  width: 100%;
  overflow: hidden;
  border-radius: 0.375rem;
}
#menu .menu-node-container {
  width: 100%;
}
#menu .menu-nested-elements {
  position: absolute;
  font-size: 1em;
  width: fit-content;
  min-width: 12em;
  padding: 0;
  background: #1b1b1b;
  border: 0.03125rem solid #565656;
  border-radius: 0.375rem;
  box-shadow: none;
  overflow: hidden;
  animation: ct-dropdown-reveal 120ms ease-out;
  overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  #menu .menu-nested-elements {
    animation: none;
  }
}
#menu .menu-nested-elements::-webkit-scrollbar,
#menu .menu-nested-elements ::-webkit-scrollbar {
  width: 0.375rem;
  height: 0.375rem;
}
#menu #menu-elements .menu-node-container:first-child > .ct-menu-item,
#menu .menu-nested-elements .menu-node-container:first-child > .ct-menu-item {
  border-radius: 0.375rem 0.375rem 0 0;
}
#menu #menu-elements .menu-node-container:last-child > .ct-menu-item,
#menu .menu-nested-elements .menu-node-container:last-child > .ct-menu-item {
  border-bottom: none;
  border-radius: 0 0 0.375rem 0.375rem;
}
#menu #menu-search-results {
  height: auto;
  margin-top: 5px;
  margin-bottom: 5px;
}
#menu #menu-search-results:empty {
  display: none;
}
#menu #menu-search {
  margin-left: 4px;
  margin-right: 4px;
  border-top: 0;
  font-size: 14px;
}
#menu #menu-search-header {
  display: block;
  height: 11px;
  width: 100%;
  color: #f3f3f3;
  background: linear-gradient(to top, #242424, transparent 1px), linear-gradient(315deg, #242424, #242424 5px, transparent, transparent calc(6px)), linear-gradient(45deg, #242424, #242424 5px, transparent, transparent calc(6px)), linear-gradient(to top, #242424, transparent 1px);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 1vw 11px, 11px 11px, 11px 11px, calc(16vw - 22px) 11px;
  background-position: left 0 bottom, left 1vw bottom, left calc(1vw + 11px) bottom, left calc(1vw + 22px) bottom;
  position: fixed;
  border: 0;
  top: 25px;
}
#menu #menu-search input {
  position: relative;
  height: 28px;
  bottom: 0;
  width: 100%;
  border: 0.5px solid #565656;
  border-radius: 6px;
  background-color: #282828;
  color: #f3f3f3;
  margin: 0 !important;
  font-size: 14px !important;
}
#menu #menu-search input:focus {
  outline: 0 !important;
  border: 0 !important;
}
#menu .menu-search-icon {
  width: 2ch;
  cursor: pointer;
  background-color: #242424;
  height: 1.5625em;
  color: #f3f3f3;
  border: 0;
  display: inline-block;
}
#menu .menu-search-result {
  height: 1.5625em;
  cursor: pointer;
  color: #f3f3f3;
  background-color: #242424;
}
#menu .menu-sub-group-separator {
  display: none;
}
#menu .menu-active-node {
  background-color: #242424;
}
#menu .menu-active-search-result {
  background-color: #333;
}
#menu .menu-no-search-results {
  background-color: #242424;
  color: #f3f3f3;
  font-style: italic;
  padding-left: 20px;
}
.filesystem-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.filesystem {
  font-family: "SpaceGrotesk" !important;
  font-style: normal !important;
  font-weight: 400 !important;
  overflow: auto;
  min-height: 100px;
  height: -webkit-fill-available;
  color: colors-ui-text-default-label;
}
.filesystem:focus {
  outline: 0px;
}
.filesystem-tree {
  min-width: max-content;
  padding: 0;
}
.filesystem-entry {
  display: grid;
  grid-template-columns: 1em 1.35em max-content;
  align-items: center;
  min-height: 1.55em;
  line-height: 1.55em;
  cursor: default;
  white-space: nowrap;
}
.filesystem-entry:hover {
  background-color: #333;
}
.filesystem-entry-children {
  grid-column: 1/-1;
  padding-left: 1.35em;
}
.filesystem-entry-twisty {
  color: #f3f3f3;
  opacity: 0.85;
  text-align: center;
}
.filesystem-entry-icon {
  width: 1.1em;
  height: 1.1em;
  position: relative;
  opacity: 0.95;
}
.filesystem-entry-icon.custom-noir-icon::before {
  position: static;
  transform: none;
  width: 1em;
  height: 1em;
}
.filesystem-entry-folder-icon {
  border: 0.09em solid #f3f3f3;
  border-radius: 0.12em;
  width: 0.95em;
  height: 0.7em;
}
.filesystem-entry-folder-icon::before {
  content: "";
  position: absolute;
  left: 0.08em;
  top: -0.28em;
  width: 0.45em;
  height: 0.25em;
  border: 0.09em solid #f3f3f3;
  border-bottom: 0;
  border-radius: 0.12em 0.12em 0 0;
}
.filesystem-entry-file-icon {
  border-left: 0.12em solid #f3f3f3;
  height: 1em;
}
.filesystem-entry-label {
  overflow: hidden;
  text-overflow: ellipsis;
}
.jstree-anchor {
  color: #f3f3f3 !important;
}
.diff-file-added {
  color: #008000 !important;
}
.diff-file-changed {
  color: #ffa500 !important;
}
.diff-file-deleted {
  color: #f00 !important;
}
.diff-files-list {
  max-height: 20% !important;
  height: auto;
  display: flex;
  flex-direction: column;
  border-top: 4px solid #333;
  overflow-y: auto;
  overflow-x: hidden;
  margin-left: 2px;
  background-color: #333;
}
.diff-files-list::-webkit-scrollbar-thumb {
  border-color: #333;
  margin-right: 2px;
}
.diff-file-path {
  cursor: pointer;
  padding-left: 8px;
}
.path-odd {
  background: #282828;
}
.path-even {
  background: #333;
}
[id^="vCSComponent"],
[id^="vCSComponent"] *:not(.monaco-editor):not(.monaco-editor *) {
  font-family: "SpaceGrotesk" !important;
}
.vcs-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #282828;
  color: #f3f3f3;
  font-family: "SpaceMono", monospace;
  line-height: 1.25em;
}
.vcs-panel-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.vcs-no-repo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #f3f3f3;
  gap: 0.75em;
}
.vcs-no-repo-icon {
  font-size: 2em;
  opacity: 0.5;
}
.vcs-no-repo-message {
  font-size: 0.8125em;
  text-align: center;
  padding: 0 1em;
}
.vcs-branch-picker {
  position: relative;
  flex-shrink: 0;
  padding: 0em 0.25em 0.25em 0.25em;
  background: #282828;
}
.vcs-branch-current {
  display: flex;
  align-items: center;
  height: 1.5rem;
  max-height: 1.5rem;
  padding: 0 0.5em;
  cursor: pointer;
  gap: 0.375em;
  user-select: none;
  border-radius: 0.375rem;
  border: 0.03125em solid transparent;
  background: #1b1b1b;
  font-family: "SpaceGrotesk";
  font-size: 0.875rem;
  color: #c8c8c8;
}
.vcs-branch-current:hover {
  border-color: #818181;
  color: #f3f3f3;
}
.vcs-branch-current.vcs-branch-current-open {
  border-color: #6366f1;
  color: #f3f3f3;
}
.vcs-branch-chevron {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  opacity: 0.7;
}
.vcs-branch-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vcs-branch-dropdown {
  position: absolute;
  top: calc(100% - 0.25em + 0.375rem);
  left: 0.25em;
  right: 0.25em;
  z-index: 100;
  background: #1b1b1b;
  border: 0.03125rem solid #565656;
  border-radius: 0.375rem;
  box-shadow: none;
  overflow: hidden;
  animation: ct-dropdown-reveal 120ms ease-out;
  padding: 0.25em;
  max-height: 12.5em;
  overflow-y: auto;
}
@media (prefers-reduced-motion: reduce) {
  .vcs-branch-dropdown {
    animation: none;
  }
}
.vcs-branch-dropdown::-webkit-scrollbar,
.vcs-branch-dropdown ::-webkit-scrollbar {
  width: 0.375rem;
  height: 0.375rem;
}
.vcs-review-trace-selector {
  padding-top: 0.25em;
}
.vcs-review-trace-selector .vcs-review-trace-select {
  width: 100%;
  min-width: 0;
}
.vcs-review-stats {
  display: block;
  padding: 0.25em 0.5em 0 0.5em;
}
.deepreview-stats {
  font-size: 12px;
  color: var(--text-secondary, #8e8f92);
}
.deepreview-trace-selector {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.deepreview-trace-select {
  font-family: "SpaceMono", monospace;
  font-size: 12px;
  color: #ccc;
  background-color: #3c3c3c;
  border: 1px solid var(--border-color, #3a3b44);
  border-radius: 3px;
  padding: 2px 8px;
  height: 24px;
  cursor: pointer;
  outline: none;
  appearance: auto;
}
.deepreview-trace-select:hover {
  background-color: #4a4a4a;
}
.deepreview-trace-select:focus {
  border-color: #007acc;
}
.vcs-section-header {
  padding: 0.25em 0.5em;
  font-size: 0.6875em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03125em;
  color: #f3f3f3;
  background: #282828;
  border-bottom: 1px solid #3a3a3a;
  flex-shrink: 0;
  user-select: none;
}
.vcs-changed-files-commit {
  font-family: "SpaceMono", monospace;
  font-size: 0.625em;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: #f3f3f3;
}
.vcs-diff-toggle {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.375em;
  padding: 0.375em 0.5em;
  border-bottom: 1px solid #3a3a3a;
  background: #282828;
}
.vcs-toggle-button {
  height: 1.5em;
  display: inline-flex;
  align-items: center;
  padding: 0 0.625em;
  border-radius: 0.25em;
  cursor: pointer;
  color: #f3f3f3;
  background: #282828;
  user-select: none;
  font-size: 0.75em;
}
.vcs-toggle-button:hover {
  background: #333;
  color: #f3f3f3;
}
.vcs-toggle-button.vcs-toggle-active {
  background: #333;
  color: #f3f3f3;
}
.vcs-diff-toggle .vcs-refresh {
  margin-left: auto;
  padding: 0 0.5em;
  border-top: none;
  text-align: right;
}
.vcs-commit-history {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.vcs-commit-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}
.vcs-commit-entry {
  display: flex;
  flex-direction: column;
}
.vcs-commit-header {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-height: 1em;
  padding-left: 0.5em;
  cursor: pointer;
  user-select: none;
}
.vcs-commit-header:hover {
  background: #333;
}
.vcs-commit-header.vcs-commit-header-selected:hover {
  background: #4338ca;
}
.vcs-commit-header-selected {
  background: #4f46e5;
}
.vcs-commit-header-selected .vcs-commit-msg {
  color: #fff;
}
.vcs-commit-header-selected .vcs-commit-time-col {
  color: rgba(255,255,255,0.7);
}
.vcs-commit-header-selected .vcs-gc-dot:not(.vcs-gc-dot-hollow) {
  background: #fff !important;
  outline-color: #4f46e5 !important;
  outline-width: 0.125em !important;
}
.vcs-commit-header-selected .vcs-gc-dot-hollow {
  background: #282828 !important;
  outline-color: #4f46e5 !important;
  border-color: #fff !important;
}
.vcs-commit-graph {
  position: relative;
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
  overflow: hidden;
}
.vcs-gc-slot {
  position: relative;
  flex: 0 0 0.5em;
  min-width: 0.5em;
  max-width: 0.5em;
}
.vcs-gc-line {
  position: absolute;
  left: calc(50% - 0.05em);
  top: 0;
  bottom: 0;
  width: 0.1em;
}
.vcs-gc-line-bot {
  position: absolute;
  left: calc(50% - 0.05em);
  top: 50%;
  bottom: 0;
  width: 0.1em;
}
.vcs-gc-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0.375em;
  height: 0.375em;
  border-radius: 50%;
  outline: 0.0625em solid #282828;
  z-index: 1;
}
.vcs-gc-dot-hollow {
  background: #282828;
  outline: 0.0625em solid #282828;
  border-width: 0.125em;
  border-style: solid;
}
.vcs-gc-conn-r {
  position: absolute;
  top: 50%;
  height: 50%;
  border-right: 0.1em solid;
  border-top: 0.1em solid;
  border-top-right-radius: 0.5em;
  background: none;
  box-sizing: border-box;
  pointer-events: none;
}
.vcs-gc-conn-l {
  position: absolute;
  top: 50%;
  height: 50%;
  border-left: 0.1em solid;
  border-top: 0.1em solid;
  border-top-left-radius: 0.5em;
  background: none;
  box-sizing: border-box;
  pointer-events: none;
}
.vcs-gc-conn-tr {
  position: absolute;
  top: 0;
  height: 50%;
  border-right: 0.1em solid;
  border-bottom: 0.1em solid;
  border-bottom-right-radius: 0.5em;
  background: none;
  box-sizing: border-box;
  pointer-events: none;
}
.vcs-gc-conn-tl {
  position: absolute;
  top: 0;
  height: 50%;
  border-left: 0.1em solid;
  border-bottom: 0.1em solid;
  border-bottom-left-radius: 0.5em;
  background: none;
  box-sizing: border-box;
  pointer-events: none;
}
.vcs-commit-body {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 0.5em;
  gap: 0.5em;
  min-width: 0;
}
.vcs-commit-msg {
  flex: 1;
  font-size: 0.75em;
  color: #b4b4b4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vcs-commit-time-col {
  font-family: "SpaceMono", monospace;
  font-size: 0.625em;
  color: #b4b4b4;
  flex-shrink: 0;
}
.vcs-commit-diff-btn {
  display: none;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
  width: 0.6875em;
  height: 0.8125em;
  background-image: url("../../public/resources/shared/vc-open-diff.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.vcs-commit-diff-btn .custom-tooltip {
  right: 0;
  left: unset;
  z-index: 200;
}
.vcs-commit-diff-btn .custom-tooltip:after {
  left: unset;
  right: 0.25em;
}
.vcs-commit-header:hover .vcs-commit-diff-btn {
  display: block;
}
.vcs-commit-diff-btn:hover > .custom-tooltip {
  opacity: 1;
  visibility: visible;
  top: calc(100% + 0.3125em);
  transition-delay: 0.2s;
}
.vcs-commit-tooltip {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  position: fixed;
  z-index: 1000;
  display: flex;
  gap: 0.75em;
  background: #161616;
  border: 0.0625em solid #3a3a3a;
  border-radius: 0.5em;
  padding: 0.625em;
  min-width: 16.25em;
  max-width: 26.25em;
  box-shadow: 0 0.25em 1.25em rgba(0,0,0,0.5);
  font-family: "SpaceGrotesk";
  font-size: 0.75em;
}
.vcs-tip-left {
  flex: 1;
  min-width: 0;
}
.vcs-tip-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  flex-shrink: 0;
}
.vcs-tip-hash {
  display: block;
  color: #c8c8c8;
  font-weight: 600;
  letter-spacing: 0.03125em;
  white-space: nowrap;
  margin-bottom: 0.625em;
}
.vcs-tip-dot {
  width: 2em;
  height: 2em;
  border-radius: 50%;
  flex-shrink: 0;
  background: #4f46e5;
  color: #1b1b1b;
  font-family: "SpaceGrotesk";
  font-size: 0.625em;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vcs-tip-row {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  margin-top: 0.375em;
  line-height: 1em;
  color: #f3f3f3;
  word-break: break-all;
}
.vcs-tip-label {
  color: #f3f3f3;
  text-transform: uppercase;
  flex-shrink: 0;
}
.vcs-tip-copy {
  display: block;
  cursor: pointer;
  width: 0.8125em;
  height: 0.8125em;
  background-image: url("../../public/resources/shared/vcs-copy-details.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0.6;
  transition: background-image 0s, opacity 150ms ease;
}
.vcs-tip-copy:hover {
  opacity: 1;
}
.vcs-tip-copy.copied {
  background-image: url("../../public/resources/shared/vcs-copy-success.svg");
  opacity: 1;
  cursor: default;
}
.vcs-accordion-files {
  background: #1b1b1b;
}
.vcs-accordion-file {
  display: flex;
  align-items: stretch;
  padding: 0;
  padding-left: 0.5em;
  cursor: pointer;
}
.vcs-accordion-file:hover {
  background: #262626;
}
.vcs-accordion-file-body {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.125em 0.5em;
  font-size: 0.75em;
  min-width: 0;
}
.vcs-accordion-file-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #f3f3f3;
}
.vcs-accordion-file-status {
  font-family: "SpaceMono", monospace;
  font-weight: 700;
  flex-shrink: 0;
  width: 1em;
  text-align: center;
  order: 1;
}
.vcs-accordion-file-adds {
  font-family: "SpaceMono", monospace;
  color: #bbf7d0;
  flex-shrink: 0;
}
.vcs-accordion-file-dels {
  font-family: "SpaceMono", monospace;
  color: #fca5a5;
  flex-shrink: 0;
}
.vcs-accordion-status-added {
  color: #bbf7d0;
}
.vcs-accordion-status-deleted {
  color: #fca5a5;
}
.vcs-accordion-status-modified {
  color: #fdba74;
}
.vcs-accordion-status-copied {
  color: #4f46e5;
}
.vcs-accordion-status-renamed {
  color: #a78bfa;
}
.vcs-accordion-status-other {
  color: #f3f3f3;
}
.vcs-load-more-sentinel {
  padding: 0.5em 0.75em;
  font-size: 0.6875em;
  color: #f3f3f3;
  text-align: center;
  font-family: "SpaceMono", monospace;
}
.vcs-commit-item {
  display: flex;
  flex-direction: column;
  padding: 0.25em 0.5em;
  cursor: pointer;
  border-bottom: 1px solid #3a3a3a;
  gap: 0.0625em;
}
.vcs-commit-item:hover {
  background: #333;
}
.vcs-commit-selected {
  background: #333 !important;
}
.vcs-commit-hash {
  font-family: "SpaceMono", monospace;
  font-size: 0.6875em;
  color: #4ec9b0;
  flex-shrink: 0;
}
.vcs-commit-message {
  font-size: 0.75em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #f3f3f3;
}
.vcs-commit-time {
  font-size: 0.625em;
  color: #f3f3f3;
}
.vcs-changed-files {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.vcs-file-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}
.vcs-no-files {
  padding: 0.5em;
  color: #f3f3f3;
  font-style: italic;
  text-align: center;
}
.vcs-file-item {
  display: flex;
  align-items: center;
  padding: 0.1875em 0.5em;
  cursor: pointer;
  gap: 0.375em;
}
.vcs-file-item:hover {
  background: #333;
}
.vcs-file-selected {
  background: #333;
}
.vcs-file-status {
  font-family: "SpaceMono", monospace;
  font-size: 0.6875em;
  font-weight: bold;
  width: 1em;
  text-align: center;
  flex-shrink: 0;
}
.vcs-status-added {
  color: #4ec9b0;
}
.vcs-status-deleted {
  color: #f44747;
}
.vcs-status-modified {
  color: #e5c07b;
}
.vcs-status-other {
  color: #888;
}
.vcs-file-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75em;
}
.vcs-file-stats {
  font-family: "SpaceMono", monospace;
  font-size: 0.625em;
  flex-shrink: 0;
  display: flex;
  gap: 0.25em;
}
.vcs-stat-added {
  color: #4ec9b0;
}
.vcs-stat-deleted {
  color: #f44747;
}
.vcs-refresh {
  flex-shrink: 0;
  padding: 0.25em 0.5em;
  text-align: center;
  cursor: pointer;
  font-size: 0.6875em;
  color: #f3f3f3;
  background: #282828;
  border-top: 1px solid #3a3a3a;
  user-select: none;
}
.vcs-refresh:hover {
  background: #333;
  color: #f3f3f3;
}
.hunk-header-selectable {
  cursor: pointer;
  user-select: none;
  transition: background 0.1s ease;
}
.hunk-header-selectable:hover {
  background: #333;
}
.hunk-selected {
  border-left: 0.1875em solid #569cd6;
  background: rgba(86,156,214,0.08);
}
.hunk-selection-indicator {
  display: inline-block;
  margin-right: 0.375em;
  color: #569cd6;
  font-size: 0.75em;
  font-weight: bold;
}
.hunk-toolbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.25em 0.625em;
  background: #282828;
  border: 1px solid #3a3a3a;
  border-radius: 0.25em;
  margin: 0.25em 0 0.375em 0;
  box-shadow: 0 0.125em 0.5em rgba(0,0,0,0.3);
  font-size: 0.75em;
}
.hunk-toolbar-count {
  color: #f3f3f3;
  white-space: nowrap;
}
.hunk-toolbar-actions {
  display: flex;
  gap: 0.375em;
}
.hunk-toolbar-button {
  padding: 0.125em 0.625em;
  border-radius: 0.1875em;
  cursor: pointer;
  background: #0e639c;
  color: #fff;
  font-size: 0.6875em;
  white-space: nowrap;
  user-select: none;
}
.hunk-toolbar-button:hover {
  background: #17b;
}
.hunk-toolbar-button-subtle {
  background: transparent;
  color: #f3f3f3;
  border: 1px solid #3a3a3a;
}
.hunk-toolbar-button-subtle:hover {
  background: #333;
  color: #f3f3f3;
}
.vcs-file-diff-btn {
  display: none;
  flex-shrink: 0;
  position: relative;
  order: 2;
  cursor: pointer;
  width: 0.6875rem;
  height: 0.8125rem;
  margin-right: 0.167em;
  background-image: url("../../public/resources/shared/vc-open-diff.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.vcs-file-diff-btn .custom-tooltip {
  right: 0;
  left: unset;
  z-index: 200;
}
.vcs-file-diff-btn .custom-tooltip:after {
  left: unset;
  right: 0.25em;
}
.vcs-file-item:hover .vcs-file-diff-btn {
  display: block;
}
.vcs-accordion-file:hover .vcs-file-diff-btn {
  display: block;
}
.vcs-file-diff-btn:hover > .custom-tooltip {
  opacity: 1;
  visibility: visible;
  top: calc(100% + 0.3125em);
  transition-delay: 0.2s;
}
.unified-diff-empty {
  flex: 1;
  min-height: 0;
}
.unified-diff {
  font-family: "SpaceMono", monospace;
}
.unified-diff-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.unified-diff-toolbar-host {
  flex-shrink: 0;
}
.unified-diff-editor {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}
.unified-diff-editor .line-numbers {
  font-family: "SpaceMono";
  font-weight: 300;
  line-height: inherit;
  font-size: 0.875rem !important;
  padding-top: 0.0625em !important;
  opacity: 0.5;
  white-space: pre;
  text-align: right;
  padding-right: 8px !important;
}
.unified-diff-editor .line-numbers.active-line-number {
  opacity: 1;
}
.ct-diff-line-added,
.ct-diff-line-removed,
.ct-diff-line-context {
  background-color: transparent;
}
.ct-diff-line-hunk-header,
.monaco-diff-editor .modified-in-monaco-diff-editor .margin-view-overlays div.ct-diff-line-hunk-header {
  background-color: #3a3a3a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -1px 0 rgba(255,255,255,0.14);
}
.ct-diff-hunk-selected {
  box-shadow: inset 0.1875em 0 0 0 #6366f1;
}
.ct-diff-line-context.ct-diff-hunk-selected {
  background-color: rgba(99,102,241,0.1);
}
.unified-diff-file-header-host {
  flex-shrink: 0;
}
.unified-diff-file-header {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  padding: 0.25em 0.9em;
  font-family: monospace;
  font-size: 0.95em;
  background-color: rgba(255,255,255,0.045);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.unified-diff-file-header-status {
  opacity: 0.75;
}
.unified-diff-file-header-path {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}
.unified-diff-file-header-stats {
  margin-left: auto;
  opacity: 0.75;
}
.monaco-editor .diff-hidden-lines-widget {
  z-index: 3;
}
.monaco-editor .diff-hidden-lines {
  transform: translateY(0) !important;
  font-size: 11px;
  line-height: 16px;
}
.monaco-diff-editor .original-in-monaco-diff-editor .diff-hidden-lines-widget {
  display: none;
}
.ct-diff-expand-boundary {
  position: relative;
  height: 3px !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  background-color: rgba(120,120,120,0.55) !important;
  background-clip: padding-box;
  transition: background-color 0.1s ease-out, box-shadow 0.1s ease-out;
}
.ct-diff-expand-boundary:hover {
  background-color: rgba(190,190,190,0.95) !important;
}
.ct-diff-expand-boundary:focus {
  outline: none;
}
.ct-diff-expand-boundary:focus-visible {
  background-color: rgba(190,190,190,0.95) !important;
  box-shadow: 0 0 0 2px rgba(120,190,240,0.9);
}
.monaco-editor .diff-hidden-lines .top.dragging,
.monaco-editor .diff-hidden-lines .bottom.dragging {
  background-color: rgba(86,156,214,0.8) !important;
}
.monaco-editor .diff-hidden-lines .center {
  background-color: rgba(58,58,58,0.92);
  color: rgba(232,232,232,0.98);
  cursor: pointer;
  transition: background-color 0.1s ease-out;
  height: 16px;
  line-height: 16px;
  font-size: 11px;
  box-shadow: none;
}
.monaco-editor .diff-hidden-lines .center div.breadcrumb-item {
  display: none;
}
.monaco-editor .diff-hidden-lines .center * {
  color: inherit;
}
.monaco-editor .diff-hidden-lines .center .codicon {
  color: #d2d2d2 !important;
}
.monaco-editor .diff-hidden-lines .center::after {
  content: "expand";
  display: inline-block;
  margin-left: 8px;
  padding: 0 4px;
  align-self: center;
  height: 12px;
  line-height: 12px;
  border: 1px solid rgba(255,255,255,0.3);
  background-color: rgba(255,255,255,0.1);
  border-radius: 2px;
  font-size: 10px;
  color: #e2e2e2;
}
.monaco-editor .diff-hidden-lines .center:hover {
  background-color: rgba(74,74,74,0.98);
  color: #f6f6f6;
}
.monaco-editor .diff-hidden-lines .center:hover::after {
  background-color: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.55);
}
.ct-diff-expand-menu {
  z-index: 10002;
  min-width: 15em;
  padding: 0.25em 0;
  border-radius: 4px;
  background-color: #252526;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 4px 14px rgba(0,0,0,0.45);
}
.ct-diff-expand-menu-item {
  display: block;
  width: 100%;
  padding: 0.35em 1em;
  border: none;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 0.95em;
  text-align: left;
  cursor: pointer;
}
.ct-diff-expand-menu-item:hover,
.ct-diff-expand-menu-item:focus {
  background-color: rgba(86,156,214,0.3);
  outline: none;
}
.monaco-diff-editor .monaco-editor .margin {
  background-color: rgba(0,0,0,0.16);
}
.monaco-diff-editor .modified-in-monaco-diff-editor .margin {
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.06);
}
.monaco-diff-editor .minimap {
  opacity: 0.5;
}
.ct-diff-gutter {
  text-align: center;
  user-select: none;
}
.ct-diff-gutter-added::before,
.ct-diff-gutter-removed::before,
.ct-diff-gutter-context::before {
  content: "";
}
.ct-diff-linenum-added {
  color: #3fb950 !important;
}
.ct-diff-linenum-removed {
  color: #f85149 !important;
}
.state-component {
  font-family: "SpaceMono" !important;
}
.isonim-state .code-state-line,
.isonim-state #gdb-evaluate,
.isonim-state .state-tabs,
.isonim-state .loading-indicator,
.isonim-state .value-components-container {
  padding-left: 0.25em;
  padding-right: 0.25em;
}
.isonim-state .value-components-container {
  padding-right: 0;
  overflow-x: auto;
}
.isonim-state .value-view {
  flex-wrap: nowrap;
}
.events-bottom {
  height: 12.5em;
  float: left;
}
.code-state-line.no-code {
  display: none;
  margin-bottom: 0;
}
.value-expanded-type {
  padding-right: 0.625em;
  white-space: nowrap;
}
.value-expanded-name {
  font-size: inherit;
  padding-left: 0.5em;
  color: #f3f3f3;
}
.value-expand-button {
  display: inline-block;
  min-width: 0.9375em;
  max-width: 0.9375em;
  float: left;
}
.value-expand-button i {
  font-size: inherit;
}
.value-non-expanded {
  color: #ffa500;
}
.value-error {
  color: #fca5a5;
}
.value-non-expanded,
.value-error {
  position: absolute;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 95%;
  background: #282828;
}
.value-watch {
  font-style: italic;
}
.value-selected {
  opacity: 0.5;
}
.value-name {
  color: #4f46e5;
  white-space: nowrap;
}
.value-type {
  margin-left: 0.5em;
  color: #f3f3f3;
  white-space: nowrap;
}
.value-annotation {
  margin-left: 0.3125em;
  color: #f3f3f3;
  opacity: 0.5;
  white-space: nowrap;
}
.value-view {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.value-view .value-error {
  margin-left: 1.0625em !important;
  position: inherit;
}
.value-name-container {
  display: flex;
  align-items: center;
}
.value-name-container .caret-collapse {
  display: block;
  background-image: url("../../public/resources/shared/filesystem/filesystem_open_toggle_dark.svg");
  background-position: center;
  background-repeat: no-repeat;
  width: 0.5em;
  height: 0.5em;
}
.value-name-container .caret-expand {
  display: block;
  background-image: url("../../public/resources/shared/filesystem/filesystem_close_toggle_dark.svg");
  background-position: center;
  background-repeat: no-repeat;
  width: 0.5em;
  height: 0.5em;
}
.value-line-view-text {
  display: flex;
  white-space: nowrap;
  text-overflow: visible;
}
.value-expanded-view-text {
  display: flex;
  flex-direction: column;
  white-space: nowrap;
  text-overflow: visible;
}
.value-expanded-name-text-content {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.value-expanded-view {
  color: #f3f3f3;
  position: relative;
  margin-left: 0.625em;
  background: #282828;
}
.right-value .simple-value {
  text-align: right;
}
.edit {
  height: calc(100% - 0.5em);
  width: 100%;
  font-size: 0;
  overflow: hidden;
}
.ct-history-inline-container {
  background-color: #1b1b1b;
  font-family: "SpaceMono";
  padding: 0.25em 0;
  max-height: 5em;
  overflow-y: auto;
}
.ct-history-inline-row {
  display: flex;
  align-items: baseline;
  line-height: 1.5em;
  justify-content: flex-start;
  gap: 1em;
}
.ct-history-inline-row .history-location {
  color: #f3f3f3;
  min-width: 4em;
  text-align: right;
}
.ct-history-inline-row .history-value {
  color: #fdba74;
  text-align: left;
}
#scratchpad,
[id^='scratchpadComponent-'] {
  font-family: "SpaceMono", monospace;
}
[id^="scratchpadComponent-"] {
  height: 100%;
  position: relative;
}
[id^="scratchpadComponent-"] .empty-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
#scratchpad {
  background-color: #282828;
  height: 100vh;
}
#scratchpad .scratchpad-element .scratchpad-value {
  width: calc(100% - 20px);
  float: left;
}
#scratchpad .scratchpad-element .scratchpad-value .atom-even {
  background-color: #282828;
  border: 1px #f3f3f3 solid;
}
#scratchpad .scratchpad-element .scratchpad-close {
  width: 20px;
  float: left;
  color: #f3f3f3;
}
.scratchpad-value-view {
  display: flex;
  align-items: start;
  min-height: 1.5em;
  padding: 0.15em 0.35em;
  color: #f3f3f3;
}
.scratchpad-value-view .scratchpad-value-cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.45em;
}
.scratchpad-value-view.scratchpad-value-error .scratchpad-value-cell {
  color: #bfdbfe;
}
.scratchpad-value-view .toggle-value-history {
  display: none;
}
.scratchpad-value-view .scratchpad-value-close {
  background-image: ELEMENT_COMPONENT_CLOSE_ICON;
  background-size: 16px 16px;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0;
  width: 24px;
  height: 24px;
  background-color: transparent;
  cursor: pointer;
}
.scratchpad-value-view .scratchpad-value-close:hover {
  opacity: 0.5;
}
.scratchpad-value-view .value-expanded {
  padding: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.scratchpad-value-view .value-expanded-atom-parent {
  min-width: 0;
}
.scratchpad-value-view .value-view {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.scratchpad-value-view .value-expanded-compound:before {
  left: 4px !important;
}
#replComponent,
.repl {
  font-family: "SpaceMono", monospace;
}
.repl-component {
  height: 100%;
  width: 100%;
  min-height: 0;
  background-color: #282828;
  color: #f3f3f3;
  overflow: hidden;
}
.repl-msg-wrapper {
  width: inherit;
  height: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #f3f3f3;
  font-style: italic;
}
.repl-msg-wrapper .repl-disabled-msg {
  text-align: center;
  white-space: break-spaces;
}
#repl {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background-color: #282828;
  color: #f3f3f3;
}
#repl form {
  flex: 0 0 auto;
}
#repl #repl-input {
  color: #f3f3f3;
  height: 28px;
  font-size: 17px !important;
  border: 0;
  background-color: #333;
  width: calc(100% - 6px);
  margin-left: 8px !important;
  margin-right: 8px;
  margin-bottom: 5px !important;
  border-radius: 4px;
  padding-left: 15px;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
#repl #repl-input:focus-visible {
  outline: none !important;
  box-shadow: inset 0 0 0 0.125em #3b82f6 !important;
  border: 1px solid #282828 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
#repl #repl-history {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
#repl #repl-history .repl-input-history {
  background-color: BACKGROUND_NEIGHBOUR_COLOR;
  border-radius: 10px;
  margin: 5px;
  padding-left: 5px;
}
#repl #repl-history .repl-output-history {
  overflow-x: auto;
  margin: 5px;
  padding-left: 10px;
  padding-right: 10px;
}
#repl #repl-history .repl-output-history .repl-output-loading {
  font-style: italic;
  white-space: pre-wrap;
}
#repl #repl-history .repl-output-history .repl-output-result {
  color: #00f;
  white-space: pre-wrap;
}
#repl #repl-history .repl-output-history .repl-output-move {
  font-style: italic;
  color: #808080;
  white-space: pre-wrap;
}
#repl #repl-history .repl-output-history .repl-output-error {
  font-weight: bold;
  font-style: italic;
  color: #f00;
  white-space: pre-wrap;
}
#replComponent {
  height: inherit;
  overflow: auto;
}
#command-data {
  height: 28px;
}
.command-container {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
  background: rgba(27,27,27,0.96);
  box-sizing: border-box;
  font-family: "SpaceGrotesk", sans-serif;
}
.command-container.hidden {
  display: none;
}
.command-view {
  font-size: 16px;
  z-index: 9999;
  width: calc(100vw - 5em);
  max-width: 48em;
  color: #f3f3f3;
}
.command-view .command-input-row {
  position: relative;
  height: 2.875em;
  display: flex;
  align-items: center;
  background: #151515;
  border: 0.0625em solid #4f4f4f;
  border-radius: 0.75em 0.75em 0 0;
  box-shadow: 0 0.75em 2.5em rgba(0,0,0,0.35);
}
.command-view .command-input-field {
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #f3f3f3;
  padding: 0 1em;
  font-size: 1em;
  font-family: "SpaceGrotesk", sans-serif;
}
.command-view .command-input-placeholder {
  position: absolute;
  left: 1.875em;
  right: 1em;
  top: 0;
  line-height: 2.875em;
  pointer-events: none;
  font-size: 0.875rem;
  font-family: "SpaceGrotesk", sans-serif;
  color: #f3f3f3;
  opacity: 0.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.command-view .command-results {
  background: #1b1b1b;
  border: 0.03125rem solid #565656;
  border-radius: 0.375rem;
  box-shadow: none;
  overflow: hidden;
  animation: ct-dropdown-reveal 120ms ease-out;
  width: 100%;
  max-height: 24em;
  overflow-y: auto;
  margin-top: 0.375rem;
}
@media (prefers-reduced-motion: reduce) {
  .command-view .command-results {
    animation: none;
  }
}
.command-view .command-results::-webkit-scrollbar,
.command-view .command-results ::-webkit-scrollbar {
  width: 0.375rem;
  height: 0.375rem;
}
.command-view .command-results.hidden {
  display: none;
}
.command-view .command-results .command-result {
  font-size: 0.875rem;
  border-top: 0.0625rem solid #282828;
  padding-left: 0.5em;
  padding-right: 0.5em;
}
.command-view .command-results .command-result .ct-menu-item-label,
.command-view .command-results .command-result .ct-menu-item-sublabel {
  font-size: inherit;
}
.command-view .command-results .command-result:first-child {
  border-top: none;
  border-radius: 0.375rem 0.375rem 0 0;
}
.command-view .command-results .command-result:last-child {
  border-bottom: none;
  border-radius: 0 0 0.375rem 0.375rem;
}
.command-view .command-empty-overlay {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  height: 2.25em;
  padding: 0 0.75em;
  color: #b4b4b4;
  background: #161616;
  font-family: "SpaceGrotesk";
  border: 0.0625em solid #4f4f4f;
  border-top: 0;
  border-radius: 0 0 0.375rem 0.375rem;
  box-shadow: 0 0.75em 2.5em rgba(0,0,0,0.4);
}
.command-view .command-empty-overlay.hidden {
  display: none;
}
.command-view .command-surface {
  position: relative;
  border-radius: 0.75em;
}
.command-view .command-surface-open {
  overflow: visible;
}
.command-view .agent-com {
  max-height: 40vh;
}
.command-view .ct-input-cp-background {
  background: #282828 !important;
  padding-left: 8px !important;
}
.command-view .agent-command-input {
  color: #a5f3fc !important;
}
.command-view .agent-command-input::placeholder {
  color: #a5f3fc;
}
.command-view #command-results {
  width: 100%;
  font-size: 0.875em;
  max-height: 18em;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #161616;
  border: 0.0625em solid #282828;
  box-shadow: 0 0.75em 2.5em rgba(0,0,0,0.4);
  margin-top: 0.25rem;
  border-radius: 0.75em;
  overflow: hidden;
}
.command-view #command-results .command-result:last-child {
  border-bottom: none;
}
.command-view .command-results-open {
  margin-top: 0;
}
.command-view .command-result.empty {
  font-family: "SpaceGrotesk";
}
.command-view .command-result {
  gap: 0.75em;
  position: relative;
  overflow: hidden;
}
.command-view .command-result.empty {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 2.75em;
  color: #f3f3f3;
}
.command-view .command-result b {
  color: #4f46e5;
}
.command-view .no-results {
  display: none;
}
.command-non-active {
  display: none;
}
#fixed-search {
  display: none !important;
}
.fixed-search-non-active {
  display: none;
}
#fixed-search .search-results {
  font-size: 20px;
  background-color: #282828;
  color: #f3f3f3;
  position: fixed;
  bottom: 20px;
  max-height: 40vh;
  overflow: scroll;
  cursor: pointer;
}
#fixed-search .search-results .search-results-location {
  width: 50vw;
  background-color: #eee;
}
#fixed-search .search-results .search-results-text {
  width: 50vw;
}
#fixed-search .search-results-active {
  display: block;
}
#fixed-search .search-results-non-active {
  display: none;
}
.command-program-search-result-value > div {
  font-family: monospace;
  display: inline;
}
.command-program-search-result {
  display: flex;
  align-items: baseline;
  gap: 0.75em;
  width: 100%;
  min-width: 0;
}
.command-program-search-result-value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.command-program-search-result-source {
  flex: 0 1 35%;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #f3f3f3;
  font-size: 0.8em;
  opacity: 0.85;
}
.command-program-search-result-location {
  flex: 0 1 40%;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: lighter;
  font-size: 0.75em;
  float: none;
  padding-right: 0;
  color: #f3f3f3;
  opacity: 0.85;
}
.command-program-search-result-line {
  flex: 0 0 auto;
  font-weight: normal;
  color: #f3f3f3;
  opacity: 0.85;
}
#menu #debug > .component-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
#menu #debug .command-container {
  display: flex !important;
  height: 100%;
  width: 48em;
  padding-top: 0;
  background: transparent;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
}
#menu #debug .command-container.hidden {
  display: flex !important;
}
#menu #debug .command-view {
  width: 100%;
  max-width: 100%;
  font-size: 0.75rem;
  z-index: 25;
  position: relative;
}
#menu #debug .command-view .command-input-row {
  height: 1.625rem;
  top: 0.03125rem;
  border-radius: 0.375rem;
  background: #242424;
  border: 1px solid #565656;
  box-shadow: none;
}
#menu #debug .command-view .command-input-field {
  font-size: 0.75rem;
  padding: 0 0.75rem;
}
#menu #debug .command-view .command-input-placeholder {
  left: 1.875em;
  right: 0.75rem;
  top: 0;
  line-height: 1.75rem;
}
#menu #debug .command-view .command-results,
#menu #debug .command-view .command-empty-overlay {
  display: none;
}
#menu #debug .command-container:not(.hidden) .command-results {
  display: block;
  position: absolute;
  top: calc(1.625rem + 0.03125rem);
}
#menu #debug .command-container:not(.hidden) .command-empty-overlay:not(.hidden) {
  display: block;
  position: absolute;
  top: 1.75rem;
}
.history-list {
  position: absolute;
  display: flex;
  flex-direction: column;
  margin-top: 34px;
  white-space: nowrap;
  padding: 2px;
  padding-top: 4px;
  padding-bottom: 4px;
  transform: translate(0, 50%);
  border-radius: 6px;
  background: #242424;
}
.history-list .history-list-item-wrapper {
  padding-left: 2px;
  padding-right: 2px;
}
.history-list .history-list-item-wrapper .history-list-item {
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
  cursor: pointer;
  font-family: "SpaceMono";
  color: #f3f3f3;
  border-radius: 6px;
  font-size: 14px;
  line-height: 24px;
  display: flex;
  justify-content: space-between;
}
.history-list .history-list-item-wrapper .history-list-item:hover {
  background: #333;
}
.history-list .history-list-item-wrapper .history-list-item:focus {
  outline: none;
}
.full-history-list {
  display: flex;
  position: absolute;
  background: #242424;
  flex-direction: column;
  padding: 2px;
  padding-top: 4px;
  padding-bottom: 4px;
  left: 100%;
  transform: translateY(-28px);
  overflow-y: auto;
  min-height: 0;
  max-height: 30vh;
  border-radius: 6px;
}
.full-history-list::-webkit-scrollbar-thumb {
  border-color: #242424;
}
.menu-expand {
  width: 2ch;
  float: left;
  position: relative;
  margin-left: 8px;
  display: flex;
  align-items: center;
}
.menu-expand::after {
  position: absolute;
  right: 4px;
  width: 7px;
  height: 8px;
  content: url("../../public/resources/menu/menu_expand_button_dark.svg");
  display: flex;
  align-items: center;
  padding-bottom: 2px;
  transform: translateY(1px);
}
.history-list-item.active {
  background-color: #333;
  color: #f00;
}
#history {
  display: flex;
  flex-direction: column;
}
#history > #results {
  display: flex;
  flex-direction: column;
}
#history-switch {
  margin-left: 90px;
}
#values-switch {
  margin-left: 90px;
}
.history-expandable {
  color: #f3f3f3;
}
.history-even {
  background-color: #282828;
}
.history-odd {
  background-color: BACKGROUND_NEIGHBOUR_COLOR;
}
.value-name-container {
  white-space: nowrap;
}
.value-name-container .toggle-value-history {
  transform: translateY(0px);
  margin-left: 4px;
}
.toggle-value-history {
  background-image: url("../../public/resources/shared/history_value_view_toggle_dark.svg");
  background-size: 10px 10px;
  background-position: center;
  background-repeat: no-repeat;
  display: inline-block;
  height: 16px;
  min-width: 16px;
  margin-left: 8px;
  transform: translateY(3px);
  padding: 2px;
  border-radius: 100px;
  cursor: pointer;
  outline: 1px solid #818181;
}
.toggle-value-history.active {
  outline: 2px solid #818181;
}
.toggle-value-history:hover > .custom-tooltip {
  opacity: 1;
  visibility: visible;
  transition-delay: 0.2s;
}
.toggle-value-history .custom-tooltip {
  top: -30%;
  left: 120%;
}
.toggle-value-history .custom-tooltip:after {
  content: '';
  position: absolute;
  left: -14px;
  top: 20%;
  border-width: 8px;
  border-style: solid;
  border-color: transparent #1b1b1b transparent transparent;
}
.history-text {
  display: flex;
  flex-direction: column;
  align-items: start;
  width: inherit;
  padding-left: 4px;
  padding-right: 4px;
}
.history-text .history-text-element {
  display: flex;
  justify-content: flex-start;
  width: inherit;
}
.history-text .history-text-element .history-location-element {
  margin-right: 8px;
  display: flex;
  flex-direction: column;
  align-items: end;
}
.history-text .history-text-element .history-value-element {
  width: inherit;
}
.history-text .history-text-element .history-location {
  width: fit-content;
  color: #f3f3f3;
}
.history-text .history-text-element .history-value {
  flex-basis: 25%;
  white-space: nowrap;
  color: #fdba74;
  margin-right: 25px;
  padding-left: 4px;
}
.history-text .history-text-element .history-value:hover {
  background: #242424 !important;
  border-radius: 4px !important;
}
.history-header {
  position: relative;
  top: 0;
  height: 30px;
  margin-top: 5px;
}
.history-button-close {
  z-index: 1;
  padding-left: 10px;
  background-image: ELEMENT_COMPONENT_CLOSE_ICON;
  background-size: 22px 22px;
  background-position: center;
  background-repeat: no-repeat;
  width: 24px;
  height: 24px;
  background-color: transparent;
}
.history-button-close:hover {
  background-color: #1b1b1b;
}
.history-container {
  display: flex;
  width: -webkit-fill-available;
  margin-left: 12px;
}
.inline-history,
.history {
  background-color: #242424;
  color: #f3f3f3;
  font-size: 14px;
  cursor: pointer;
  max-height: 100px !important;
  min-height: fit-content;
  position: relative;
  display: flex;
  overflow-y: scroll;
  border-radius: 6px;
  padding-left: 4px;
  width: -webkit-fill-available;
}
.inline-history::-webkit-scrollbar-corner,
.history::-webkit-scrollbar-corner {
  background-color: #242424 !important;
}
.inline-history .inline-history-event,
.history .inline-history-event {
  display: flex;
  border-style: solid;
  border-width: 1px;
  border-color: #f3f3f3;
  padding: 1px;
}
.inline-history .inline-history-event .inline-history-event-codeID,
.history .inline-history-event .inline-history-event-codeID {
  border-right: solid 1px #f3f3f3;
  flex-basis: 50%;
}
.inline-history .inline-history-event .inline-history-event-value,
.history .inline-history-event .inline-history-event-value {
  flex-basis: 50%;
  padding: 1px;
}
.history {
  width: 100%;
}
.log-item {
  border-top: 0.0625em solid #4a4a4a;
  padding: 0.5em;
  display: flex;
  flex-direction: column;
}
.log-item:first-child {
  border-top: none;
}
.log-header {
  display: flex;
  align-items: flex-start;
}
.log-title {
  flex-grow: 1;
}
.log-output {
  margin-left: 1.625em;
  margin-top: 0.125em;
  font-style: italic;
}
.status-success {
  color: #e09f3e;
}
.status-info {
  color: #c9c9c9;
}
.status-modified {
  color: #e09f3e;
}
.agent-ha-container {
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  min-height: 0;
  min-width: 0;
  display: flex;
  font-family: "SpaceMono";
  font-size: 0.875em;
  flex-direction: column;
  gap: 0.5em;
  padding: 0.5em;
}
.agent-ha-container textarea {
  width: 100% !important;
  min-height: 2.25em;
  margin-left: 0 !important;
  margin-bottom: 0 !important;
  padding-left: 0.5em !important;
  max-height: 12em !important;
  resize: none;
  font-size: 1em;
  font-family: inherit !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  white-space: pre-wrap !important;
  border-radius: 0.5em !important;
  padding: 0.25em 0.5em;
  border: 0 !important;
  background: #282828 !important;
}
.agent-ha-container .agent-command-input {
  color: #a5f3fc !important;
}
.agent-ha-container .agent-command-input::placeholder {
  color: #a5f3fc;
}
.agent-ha-container .agent-command-input:focus {
  outline: 0 !important;
}
.agent-buttons-container {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.5em;
}
.agent-buttons-container .agent-button {
  align-items: center;
  gap: 0.375em;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto !important;
  padding: 0 0.5em 0 0.5em !important;
}
.agent-buttons-container .agent-button .add-file-img {
  background-image: url("../../public/resources/shared/add_file.svg");
  background-size: 0.625em 1em;
  background-position: center;
  background-repeat: no-repeat;
  width: 1em;
  min-width: 1em;
  height: 1em;
}
.agent-buttons-container .new-agent-instance {
  background-image: url("../../public/resources/shared/run_test_img.svg");
  background-size: 0.875em 0.5em;
  background-position: center;
  background-repeat: no-repeat;
}
.agent-buttons-container .agent-progress-loading {
  background-image: url("../../public/resources/shared/rerecord_animation.svg");
  background-size: 1.5em 1.5em;
  background-position-y: bottom;
  background-position-x: center;
  background-repeat: no-repeat;
}
.agent-buttons-container .agent-icon-button {
  flex: 0 0 auto !important;
}
.agent-buttons-container .agent-add-context-button {
  justify-content: flex-start;
  flex: 1 1 12em !important;
}
.agent-buttons-container .agent-model-select {
  justify-content: space-between;
  flex: 1 1 10em !important;
  padding-right: 0.375em !important;
}
.agent-buttons-container .agent-submit-button {
  flex: 0 0 auto !important;
}
.agent-buttons-container .agent-start-button {
  background-image: url("../../public/resources/shared/send_msg.svg");
  background-repeat: no-repeat;
  background-size: 1em;
  background-position: center;
}
.agent-buttons-container .agent-stop-button {
  background-image: url("../../public/resources/shared/stop_agent_button.svg");
  background-repeat: no-repeat;
  background-size: 1em;
  background-position: center;
}
.agent-model-img {
  height: 1.5em;
  min-width: 1.5em;
  background-image: url("../../public/resources/shared/command_arrow.svg");
  background-repeat: no-repeat;
  background-size: 0.5625em 0.375em;
  background-position: center;
}
.agent-com {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  margin-bottom: 0.5em;
}
.user-img {
  height: 1.5em;
  width: 1.5em;
  background-image: url("../../public/resources/agent/user_img.svg");
  background-size: 1em 1em;
  background-position: center;
  background-repeat: no-repeat;
}
.header-wrapper {
  display: flex;
  justify-content: space-between;
  border-bottom: 0.0625em solid #282828;
  padding: 0.375em 0.5em;
  align-items: center;
  gap: 0.5em;
}
.content-header {
  display: flex;
  align-items: center;
  min-width: 0;
}
.agent-msg-wrapper {
  border: 0.0625em solid #282828;
  border-radius: 0.25em;
  background: #242424;
  margin-bottom: 0.5em;
}
.agent-session-notice {
  border-left: 0.1875em solid #93c5fd;
  border-radius: 0.125em;
  background: #242424;
  color: #f3f3f3;
  padding: 0.5em 0.75em;
  margin-bottom: 0.5em;
  line-height: 1.4;
}
.agent-test-run {
  border: 0.0625em solid #282828;
  border-left: 0.1875em solid #93c5fd;
  border-radius: 0.25em;
  background: #242424;
  margin-bottom: 0.5em;
}
.agent-test-run-passed {
  border-left-color: #4ade80;
}
.agent-test-run-failed {
  border-left-color: #fca5a5;
}
.agent-test-run-running {
  border-left-color: #fdba74;
}
.agent-test-run-header {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 0.75em;
  cursor: pointer;
}
.agent-test-run-header:hover {
  background: #1b1b1b;
}
.agent-test-run-toggle {
  color: #b4b4b4;
  width: 1em;
  flex: 0 0 auto;
}
.agent-test-run-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #f3f3f3;
}
.agent-test-run-status {
  flex: 0 0 auto;
  color: #b4b4b4;
}
.agent-test-run-body {
  padding: 0 0.5em 0.25em 0.5em;
}
.agent-test-run-diagnostic {
  color: #fca5a5;
  padding: 0.25em 0.25em 0.25em 0.5em;
  line-height: 1.4;
}
.agent-test-run-output,
.agent-test-row-output {
  margin: 0.25em 0 0.5em 0;
  padding: 0.5em;
  border-radius: 0.125em;
  background: #1b1b1b;
  color: #f3f3f3;
  white-space: pre-wrap;
  overflow-x: auto;
  max-height: 16em;
}
.agent-test-row {
  border-top: 0.0625em solid #282828;
}
.agent-test-row-header {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.375em 0.25em;
  cursor: pointer;
}
.agent-test-row-header:hover {
  background: #1b1b1b;
}
.agent-test-row-status {
  flex: 0 0 auto;
  min-width: 5em;
  color: #b4b4b4;
}
.agent-test-row-passed > .agent-test-row-header > .agent-test-row-status {
  color: #bbf7d0;
}
.agent-test-row-failed > .agent-test-row-header > .agent-test-row-status,
.agent-test-row-errored > .agent-test-row-header > .agent-test-row-status {
  color: #fca5a5;
}
.agent-test-row-skipped > .agent-test-row-header > .agent-test-row-status,
.agent-test-row-cancelled > .agent-test-row-header > .agent-test-row-status {
  color: #fdba74;
}
.agent-test-row-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #f3f3f3;
}
.agent-test-row-duration {
  flex: 0 0 auto;
  color: #b4b4b4;
}
.agent-test-row-actions {
  display: flex;
  gap: 0.375em;
  padding: 0 0.25em 0.375em 5.5em;
}
.agent-test-row-details {
  padding: 0 0.25em 0.5em 5.5em;
}
.agent-test-row-detail {
  color: #b4b4b4;
  padding-bottom: 0.25em;
}
.agent-test-row-diagnostic-error {
  color: #fca5a5;
  line-height: 1.4;
}
.agent-test-row-diagnostic-warning {
  color: #fdba74;
  line-height: 1.4;
}
.agent-test-row-recording-failed {
  border-left: 0.1875em solid #fca5a5;
  padding: 0.25em 0.5em;
  margin-bottom: 0.25em;
  color: #f3f3f3;
  line-height: 1.4;
}
.agent-evidence {
  border: 0.0625em solid #282828;
  border-left: 0.1875em solid #93c5fd;
  border-radius: 0.25em;
  background: #242424;
  margin-bottom: 0.5em;
  padding: 0.5em 0.75em;
}
.agent-evidence-ready {
  border-left-color: #4ade80;
}
.agent-evidence-unreported,
.agent-evidence-reading {
  border-left-color: #fdba74;
}
.agent-evidence-failed,
.agent-evidence-unavailable {
  border-left-color: #fca5a5;
}
.agent-evidence-header {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
}
.agent-evidence-kind {
  flex: 1 1 auto;
  min-width: 0;
  color: #f3f3f3;
}
.agent-evidence-shape {
  flex: 0 0 auto;
  color: #b4b4b4;
}
.agent-evidence-dataset {
  padding-top: 0.25em;
  color: #f3f3f3;
  word-break: break-all;
}
.agent-evidence-command {
  padding-top: 0.125em;
  color: #b4b4b4;
  word-break: break-all;
}
.agent-evidence-note {
  padding-top: 0.375em;
  color: #b4b4b4;
  line-height: 1.4;
}
.agent-evidence-unavailable > .agent-evidence-note,
.agent-evidence-failed > .agent-evidence-note {
  color: #fca5a5;
}
.agent-evidence-actions {
  display: flex;
  gap: 0.375em;
  padding-top: 0.5em;
}
.agent-evidence-output {
  margin: 0.5em 0 0 0;
  padding: 0.5em;
  border-radius: 0.125em;
  background: #1b1b1b;
  color: #f3f3f3;
  white-space: pre-wrap;
  overflow-x: auto;
  max-height: 16em;
}
.user-wrapper {
  background: transparent !important;
}
.user-name {
  margin-left: 0.25em;
  margin-right: 0.25em;
}
.ai-msg {
  padding: 0.5em;
  margin-bottom: 0.5em;
}
.msg-content {
  padding: 0.75em;
  display: flex;
  flex-direction: column;
}
.ai-img {
  height: 1.5em;
  width: 1.5em;
  background-image: url("../../public/resources/agent/ai_img.svg");
  background-size: 1.5em 1.5em;
  background-position: center;
  background-repeat: no-repeat;
}
.ai-name {
  margin-left: 0.25em;
  margin-right: 0.25em;
}
.command-palette-copy-button {
  background-image: url("../../public/resources/agent/command_palette_copy.svg");
  background-size: 1.0625em 1.0625em;
  background-position: center;
  background-repeat: no-repeat;
  flex: 0 0 auto !important;
}
.command-palette-upload-button {
  background-image: url("../../public/resources/agent/command_palette_upload.svg");
  background-size: 1.0625em 1em;
  background-position: center;
  background-repeat: no-repeat;
}
.command-palette-redo-button {
  background-image: url("../../public/resources/agent/command_palette_redo.svg");
  background-size: 1.0625em 0.9375em;
  background-position: center;
  background-repeat: no-repeat;
}
.command-palette-edit-button {
  background-image: url("../../public/resources/agent/command_palette_edit.svg");
  background-size: 1.0625em 1.0625em;
  background-position: center;
  background-repeat: no-repeat;
}
.msg-controls {
  display: flex;
  align-items: center;
  gap: 0.375em;
}
.terminal-copy-button {
  margin-right: 0.375em;
}
.component-wrapper {
  background: #282828;
  border-radius: 0.25em;
  margin: 0.5em;
  color: #f3f3f3;
}
.component-wrapper .header-wrapper {
  background: #1b1b1b;
  border-top-right-radius: 0.375em;
  border-top-left-radius: 0.375em;
  border-bottom: 0 !important;
}
.editor-wrapper {
  height: 100%;
  margin-top: 0.5em;
}
.agent-editor {
  min-height: 15.625em;
  max-height: 15.625em;
  height: 15.625em;
}
.agent-editor .line-numbers {
  height: 100%;
}
.agent-interaction {
  border: 0.0625em solid #0e7490;
  background: #282828;
  border-radius: 0.5em;
  padding: 0.5em;
  flex: 0 0 auto;
}
.prompt-wrapper {
  background: #1b1b1b;
  border-radius: 0.375em;
  display: flex;
  flex-direction: column;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  padding: 0.75em;
}
.prompt-wrapper .password-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em;
}
.prompt-wrapper .password-wrapper .password-prompt-input {
  flex: 1 1 12em;
  background-image: none !important;
  margin-left: 0 !important;
  margin-bottom: 0 !important;
  padding-left: 0.5em !important;
  background: #2c2c2c;
}
.prompt-wrapper .password-wrapper .password-continue-button {
  flex: 0 0 auto !important;
}
.prompt-wrapper .header-wrapper {
  border-bottom: 0 !important;
  padding: 0 0 1em 0 !important;
}
.prompt-wrapper .user-options-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5em;
}
.prompt-wrapper .user-options-wrapper .user-option {
  flex: 0 0 auto !important;
}
.ai-status {
  background-image: url("../../public/resources/shared/agent_loading_animation.svg");
  background-position-y: 70%;
  background-size: 0.75em 0.75em;
  width: 1.75em;
  height: 1.75em;
  background-repeat: no-repeat;
}
.agent-workspace-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
  font-family: "SpaceMono", monospace;
}
.agent-workspace-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 16px;
  background-color: var(--bg-secondary, #1e1f26);
  border-bottom: 1px solid var(--border-color, #3a3b44);
  flex-shrink: 0;
}
.agent-workspace-header-label {
  font-size: 13px;
  font-weight: bold;
  color: var(--text-primary, #c9c9c9);
}
.agent-workspace-header-path {
  font-size: 12px;
  color: var(--text-secondary, #8e8f92);
  margin-left: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.agent-workspace-view-toggle {
  font-size: 12px;
  color: var(--accent-color, #a5f3fc);
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 4px;
  transition: background-color 0.15s ease;
}
.agent-workspace-view-toggle:hover {
  background-color: var(--bg-hover, #2a2b34);
}
.agent-workspace-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 4px 16px;
  background-color: var(--bg-secondary, #1e1f26);
  border-bottom: 1px solid var(--border-color, #3a3b44);
  flex-shrink: 0;
  font-size: 12px;
  color: var(--text-secondary, #8e8f92);
}
.agent-workspace-summary-item {
  white-space: nowrap;
}
.agent-workspace-overlay-toggle {
  margin-left: auto;
  cursor: pointer;
  color: var(--accent-color, #a5f3fc);
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 3px;
  transition: background-color 0.15s ease;
}
.agent-workspace-overlay-toggle:hover {
  background-color: var(--bg-hover, #2a2b34);
}
.agent-workspace-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}
.agent-workspace-empty {
  padding: 24px;
  font-size: 14px;
  color: var(--text-secondary, #8e8f92);
  text-align: center;
}
.agent-workspace-file-list {
  width: 240px;
  min-width: 180px;
  overflow-y: auto;
  border-right: 1px solid var(--border-color, #3a3b44);
  background-color: var(--bg-primary, #1a1b22);
  flex-shrink: 0;
}
.agent-workspace-file-item {
  padding: 6px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-color, #2a2b34);
  transition: background-color 0.15s ease;
}
.agent-workspace-file-item:hover {
  background-color: var(--bg-hover, #2a2b34);
}
.agent-workspace-file-item.selected {
  background-color: var(--bg-selected, #333444);
}
.agent-workspace-file-name {
  font-size: 13px;
  color: var(--text-primary, #c9c9c9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agent-workspace-file-path {
  font-size: 11px;
  color: var(--text-secondary, #8e8f92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.agent-workspace-coverage-badge {
  display: inline-block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-secondary, #8e8f92);
  background-color: var(--bg-hover, #2a2b34);
  padding: 1px 6px;
  border-radius: 3px;
}
.agent-workspace-flow-badge {
  display: inline-block;
  margin-top: 2px;
  margin-left: 6px;
  font-size: 10px;
  color: rgba(0,180,0,0.8);
  background-color: rgba(0,180,0,0.1);
  padding: 1px 4px;
  border-radius: 3px;
}
.agent-workspace-editor-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.agent-workspace-editor {
  flex: 1;
  min-height: 0;
}
.deepreview-line-executed {
  background-color: rgba(0,180,0,0.08);
  border-left: 3px solid rgba(0,200,0,0.5);
}
.deepreview-line-unreachable {
  background-color: rgba(220,0,0,0.08);
  border-left: 3px solid rgba(220,0,0,0.5);
}
.caption-progress-container {
  display: flex;
  flex-direction: column;
  position: relative;
  cursor: pointer;
  user-select: none;
  transition: opacity 0.2s ease;
}
.caption-progress-container:not(.caption-progress-active) {
  opacity: 0.5;
}
.caption-progress-active {
  opacity: 1;
}
.caption-progress-compact {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 12px;
  font-size: 12px;
  font-family: "SpaceMono", monospace;
  min-height: 24px;
  border-radius: 4px;
  transition: background-color 0.15s ease;
}
.caption-progress-compact:hover {
  background-color: var(--bg-hover, #2a2b34);
}
.caption-progress-idle .caption-progress-state {
  color: var(--text-secondary, #8e8f92);
}
.caption-progress-initializing .caption-progress-state {
  color: #a5f3fc;
}
.caption-progress-initializing .caption-progress-bar-fill {
  animation: caption-progress-pulse 1.5s ease-in-out infinite;
}
.caption-progress-working .caption-progress-state {
  color: #a5f3fc;
}
.caption-progress-working .caption-progress-bar-fill {
  background-color: #0e7490;
}
.caption-progress-waiting .caption-progress-state {
  color: #e09f3e;
}
.caption-progress-waiting .caption-progress-bar-fill {
  background-color: #e09f3e;
  animation: caption-progress-pulse 2s ease-in-out infinite;
}
.caption-progress-paused .caption-progress-state {
  color: #8e8f92;
}
.caption-progress-paused .caption-progress-bar-fill {
  background-color: #6e6e6e;
}
.caption-progress-completed .caption-progress-state {
  color: rgba(0,200,0,0.8);
}
.caption-progress-completed .caption-progress-bar-fill {
  background-color: rgba(0,200,0,0.6);
}
.caption-progress-failed .caption-progress-state {
  color: rgba(220,0,0,0.8);
}
.caption-progress-failed .caption-progress-bar-fill {
  background-color: rgba(220,0,0,0.6);
}
.caption-progress-bar {
  flex: 1;
  height: 4px;
  background-color: var(--bg-secondary, #2a2b34);
  border-radius: 2px;
  overflow: hidden;
  min-width: 60px;
}
.caption-progress-bar-fill {
  height: 100%;
  background-color: #0e7490;
  border-radius: 2px;
  transition: width 0.3s ease;
}
.caption-progress-state {
  font-weight: bold;
  white-space: nowrap;
  min-width: 40px;
}
.caption-progress-task {
  color: var(--text-primary, #c9c9c9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.caption-progress-count {
  color: var(--text-secondary, #8e8f92);
  white-space: nowrap;
  min-width: 30px;
  text-align: right;
}
.caption-progress-current {
  color: var(--text-secondary, #8e8f92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
  font-style: italic;
}
.caption-progress-milestones {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: var(--bg-primary, #1a1b22);
  border: 1px solid var(--border-color, #3a3b44);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  padding: 4px 0;
  max-height: 300px;
  overflow-y: auto;
}
.caption-progress-milestone-empty {
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text-secondary, #8e8f92);
  font-style: italic;
}
.caption-progress-milestone-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  font-size: 12px;
  color: var(--text-primary, #c9c9c9);
}
.caption-progress-milestone-item:hover {
  background-color: var(--bg-hover, #2a2b34);
}
.caption-progress-milestone-icon {
  font-family: monospace;
  flex-shrink: 0;
  min-width: 24px;
}
.caption-progress-milestone-content {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.caption-progress-milestone-priority {
  font-size: 10px;
  font-weight: bold;
  color: #e09f3e;
  background-color: rgba(224,159,62,0.1);
  padding: 1px 4px;
  border-radius: 2px;
}
.milestone-pending .caption-progress-milestone-icon {
  color: var(--text-secondary, #8e8f92);
}
.milestone-in-progress .caption-progress-milestone-icon {
  color: #a5f3fc;
}
.milestone-completed .caption-progress-milestone-icon {
  color: rgba(0,200,0,0.8);
}
.milestone-failed .caption-progress-milestone-icon {
  color: rgba(220,0,0,0.8);
}
.milestone-skipped .caption-progress-milestone-icon {
  color: var(--text-secondary, #6e6e6e);
}
.milestone-skipped .caption-progress-milestone-content {
  text-decoration: line-through;
  opacity: 0.6;
}
@-moz-keyframes caption-progress-pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes caption-progress-pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes caption-progress-pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@keyframes caption-progress-pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
.request-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #282828;
  color: #b4b4b4;
  font-size: 0.75rem !important;
}
.request-panel-filters {
  display: flex;
  align-items: center;
  gap: 0.667em;
  padding: 0.5em 1em;
  flex-shrink: 0;
  background: #282828;
  border-bottom: 1px solid #3a3a3a;
}
.request-filter-search {
  flex: 1;
  font-family: "SpaceGrotesk" !important;
  height: 1.75em;
  max-height: 1.75em;
}
.request-table-header {
  display: flex;
  align-items: center;
  padding: 0.4167em 1em;
  font-size: 0.9167em;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #c8c8c8;
  background: #1b1b1b;
  border-bottom: 1px solid #3a3a3a;
  flex-shrink: 0;
  user-select: none;
}
.request-table-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}
.request-row {
  display: flex;
  align-items: center;
  padding: 0.5em 1em;
  cursor: pointer;
  border-bottom: 1px solid #3a3a3a;
  color: #b4b4b4;
}
.request-row:hover {
  background: #333;
}
.request-row.selected {
  background: #4f46e5;
}
.request-col-id {
  min-width: 2.3333em;
  max-width: 2.3333em;
  color: #c8c8c8;
  text-align: right;
  padding-right: 1em;
}
.request-col-method {
  min-width: 7.3333em;
  max-width: 7.3333em;
}
.request-col-url {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 1em;
}
.request-col-status {
  min-width: 6.6667em;
  max-width: 6.6667em;
  display: flex;
  justify-content: flex-end;
}
.request-col-duration {
  min-width: 6em;
  max-width: 6em;
  text-align: right;
  color: #c8c8c8;
}
.request-col-size {
  min-width: 5.3333em;
  max-width: 5.3333em;
  text-align: right;
  color: #c8c8c8;
  padding-right: 0.1667em;
}
.request-method-badge {
  display: inline-block;
  font-size: 0.9167em;
  font-weight: 700;
  font-family: "SpaceGrotesk";
  padding: 0.25em 0.8333em;
  border-radius: 0.3333em;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.request-method-get {
  background: #1e3a8a;
  color: #93c5fd;
}
.request-method-post {
  background: #15803d;
  color: #bbf7d0;
}
.request-method-delete {
  background: #b91c1c;
  color: #fca5a5;
}
.request-method-put,
.request-method-patch {
  background: #c2410c;
  color: #fdba74;
}
.request-method-head,
.request-method-options {
  background: #282828;
  color: #c8c8c8;
}
.request-status-success,
.request-status-redirect,
.request-status-client-error,
.request-status-server-error,
.request-status-unknown {
  font-weight: 600;
  white-space: nowrap;
}
.request-status-success {
  color: #bbf7d0;
}
.request-status-redirect {
  color: #93c5fd;
}
.request-status-client-error {
  color: #fdba74;
}
.request-status-server-error {
  color: #fca5a5;
}
.request-status-unknown {
  color: #c8c8c8;
}
.request-detail-host {
  flex-shrink: 0;
  min-height: 0;
}
.request-detail-resize-handle {
  flex-shrink: 0;
  height: 0.3333em;
  cursor: ns-resize;
  background: transparent;
}
.request-detail {
  height: 100%;
  display: flex;
  flex-direction: column;
  border-top: 2px solid #3a3a3a;
  overflow: hidden;
  background: #282828;
}
.request-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8333em 1em;
  background: #1b1b1b;
  flex-shrink: 0;
  gap: 1em;
}
.request-detail-header-left {
  display: flex;
  align-items: center;
  gap: 0.8333em;
  min-width: 0;
  overflow: hidden;
}
.request-detail-header-url {
  font-family: "FiraCode", monospace;
  font-size: 1.0833em;
  color: #f3f3f3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.request-detail-header-status {
  font-size: 1.0833em;
  font-weight: 600;
  white-space: nowrap;
}
.request-detail-header-status.request-status-success {
  color: #bbf7d0;
}
.request-detail-header-status.request-status-redirect {
  color: #93c5fd;
}
.request-detail-header-status.request-status-client-error {
  color: #fdba74;
}
.request-detail-header-status.request-status-server-error {
  color: #fca5a5;
}
.request-detail-header-status.request-status-unknown {
  color: #c8c8c8;
}
.request-detail-header-right {
  flex-shrink: 0;
}
button.request-detail-handler-btn {
  flex: 0 0 auto !important;
  white-space: nowrap;
}
.request-detail-tabs {
  display: flex;
  align-items: flex-end;
  padding: 0 0.3333em;
  background: #282828;
  border-bottom: 1px solid #3a3a3a;
  flex-shrink: 0;
}
.request-detail-tab {
  padding: 0.5em 1em;
  font-family: "SpaceGrotesk";
  color: #c8c8c8;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  user-select: none;
}
.request-detail-tab:hover {
  color: #f3f3f3;
}
.request-detail-tab--active {
  color: #f3f3f3;
  border-bottom-color: #4f46e5;
}
.request-detail-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1em;
}
.request-detail-section-title {
  font-size: 0.9167em;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c8c8c8;
  margin-bottom: 0.6667em;
}
.request-detail-row {
  display: flex;
  gap: 1.3333em;
  padding: 0.3333em 0;
}
.request-detail-key {
  color: #93c5fd;
  font-family: "FiraCode", monospace;
  min-width: 10em;
}
.request-detail-value {
  color: #f3f3f3;
}
.request-detail-placeholder {
  color: #c8c8c8;
  padding: 0.3333em 0;
}
.request-timing-row {
  display: flex;
  align-items: center;
  gap: 0.6667em;
  padding: 0.25em 0;
}
.request-timing-label {
  min-width: 6.6667em;
  color: #c8c8c8;
}
.request-timing-value {
  color: #f3f3f3;
  text-align: right;
  min-width: 4em;
}
.session-tab-bar {
  display: flex;
  align-items: center;
  order: 4;
  position: relative;
  flex: 1 1 0;
  min-width: 3.5em;
  max-width: 100%;
  height: 100%;
  padding: 0;
  margin-left: calc(0.25em - 0.5em);
  z-index: 21;
  -webkit-app-region: drag;
  overflow: hidden;
  box-sizing: border-box;
}
.session-tab-bar.single-session .session-tab {
  display: none;
}
.session-tab-bar.has-overflow .session-tab-overflow {
  display: flex;
}
.session-tab-bar.overflow-open {
  overflow: visible;
}
.session-tab-bar.overflow-open .session-tab-overflow-menu {
  display: flex;
}
.session-tab {
  display: flex;
  align-items: center;
  flex: 0 1 10em;
  min-width: 6em;
  max-width: 10em;
  padding: 0 0.625em;
  height: 1.625em;
  cursor: pointer;
  color: #b0b0b0;
  opacity: 0.7;
  border-radius: 0.25em;
  margin-right: 0.25em;
  white-space: nowrap;
  user-select: none;
  transition: background-color 150ms ease, color 150ms ease, opacity 150ms ease;
  -webkit-app-region: no-drag;
}
.session-tab:hover {
  color: #f3f3f3;
  opacity: 1;
  background-color: #333;
}
.session-tab.active {
  background-color: #3c3c3c;
  color: #fff;
  opacity: 1;
}
.session-tab-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
}
.session-tab-close {
  width: 0.6em;
  height: 0.6em;
  background-image: url("../../public/resources/menu/lm_close_tab_dark.svg");
  background-size: 0.6em 0.6em;
  background-repeat: no-repeat;
  background-position: center;
  margin-left: 0.5em;
  flex-shrink: 0;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 150ms ease;
}
.session-tab-close:hover {
  opacity: 1;
}
.session-container {
  width: 100%;
  height: 100%;
}
.session-container.hidden {
  display: none;
}
.session-tab-add {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.75em !important;
  max-width: 1.75em !important;
  height: 1.75em !important;
  max-height: 1.75em !important;
  cursor: pointer;
  user-select: none;
  border-radius: 50% !important;
  border: none !important;
  background-image: url("../../public/resources/shared/session_tab_add.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 0.75em 0.75em !important;
  font-size: 1em;
  -webkit-app-region: no-drag;
}
.session-tab-overflow {
  display: none;
  align-items: center;
  justify-content: center;
  flex: 0 0 1.625em;
  width: 1.625em;
  height: 1.625em;
  margin-right: 0.125em;
  cursor: pointer;
  color: #b0b0b0;
  font-size: 1.25em;
  line-height: 1;
  user-select: none;
  border-radius: 0.25em;
  -webkit-app-region: no-drag;
  transition: color 150ms ease, background-color 150ms ease;
}
.session-tab-overflow:hover {
  color: #f3f3f3;
  background-color: #333;
}
.session-tab-overflow-menu {
  display: none;
  position: absolute;
  right: 0.25em;
  top: 2.25em;
  min-width: 13.75em;
  max-width: 22.5em;
  max-height: 70vh;
  flex-direction: column;
  padding: 0.25em;
  background: #1b1b1b;
  border: 0.03125rem solid #565656;
  border-radius: 0.375rem;
  box-shadow: none;
  overflow: hidden;
  animation: ct-dropdown-reveal 120ms ease-out;
  overflow: auto;
  z-index: 120;
  -webkit-app-region: no-drag;
}
@media (prefers-reduced-motion: reduce) {
  .session-tab-overflow-menu {
    animation: none;
  }
}
.session-tab-overflow-menu::-webkit-scrollbar,
.session-tab-overflow-menu ::-webkit-scrollbar {
  width: 0.375rem;
  height: 0.375rem;
}
.session-tab-overflow-item {
  min-height: 1.75em;
  padding: 0 0.625em;
  display: flex;
  align-items: center;
  color: #b0b0b0;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 0.25em;
}
.session-tab-overflow-item.active {
  background-color: #3c3c3c;
  color: #fff;
}
.session-tab-overflow-item:hover {
  color: #f3f3f3;
  background-color: #333;
}
#auto-hide-layout-row {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0;
  width: 100%;
}
#auto-hide-strip-left,
#auto-hide-strip-right {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background-color: #1b1b1b;
  flex-shrink: 0;
  flex-grow: 0;
  flex-basis: 0;
  width: 0;
  max-width: 0;
  overflow: visible;
  box-sizing: border-box;
  transition: width 150ms ease, max-width 150ms ease, padding 150ms ease;
  position: relative;
  z-index: 100;
}
#auto-hide-strip-left.has-tabs,
#auto-hide-strip-right.has-tabs {
  width: 2em;
  min-width: 2em;
  max-width: 2em;
  flex-basis: 2em;
  padding-left: 0.25em;
  padding-right: 0.25em;
}
#auto-hide-strip-left.has-tabs ~ #ROOT {
  padding-left: 0;
}
#auto-hide-layout-row:has(#auto-hide-strip-right.has-tabs) #ROOT {
  padding-right: 0;
}
#auto-hide-docked-left,
#auto-hide-docked-right {
  display: none;
  flex-direction: column;
  flex-shrink: 0;
  flex-grow: 0;
  background-color: transparent;
  border-radius: 0.36em;
  position: relative;
  z-index: 5;
  min-width: 150px;
  max-width: 800px;
  overflow: hidden;
}
#auto-hide-docked-left.docked-open,
#auto-hide-docked-right.docked-open {
  display: flex;
  width: 360px;
  z-index: 101;
}
#auto-hide-docked-left-content,
#auto-hide-docked-right-content {
  flex: 1;
  overflow: auto;
  min-height: 0;
  position: relative;
}
#auto-hide-docked-left-content {
  padding-right: 4px;
}
#auto-hide-docked-right-content {
  padding-left: 4px;
}
.auto-hide-docked-resize-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  cursor: col-resize;
  z-index: 10;
  flex-shrink: 0;
  background: #1b1b1b;
  opacity: unset;
  transition: background 150ms ease;
}
.auto-hide-docked-resize-handle:hover,
.auto-hide-docked-resize-handle.resizing {
  background: colors-ui-border-interactive-default;
}
#auto-hide-docked-left .auto-hide-docked-resize-handle {
  right: 0;
  left: auto;
}
#auto-hide-docked-right .auto-hide-docked-resize-handle {
  left: 0;
  right: auto;
}
#auto-hide-strip-left.collapsed-mode,
#auto-hide-strip-right.collapsed-mode {
  width: 3px;
  min-width: 3px;
  max-width: 3px;
  flex-basis: 3px;
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
  background-color: #3a5070;
  cursor: pointer;
  overflow: hidden;
  align-items: center;
}
#auto-hide-strip-left.collapsed-mode {
  border-right: none;
}
#auto-hide-strip-right.collapsed-mode {
  border-left: none;
}
.collapsed-strip-line {
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.collapsed-strip-line:hover {
  background-color: #4a6080;
}
#auto-hide-docked-bottom {
  display: none;
  flex-direction: column;
  flex-shrink: 0;
  flex-grow: 0;
  background-color: #282828;
  border-radius: 0.36em;
  position: relative;
  z-index: 5;
  min-height: 100px;
  max-height: 600px;
  overflow: hidden;
  margin-left: 0.25em;
  margin-right: 0.25em;
}
#auto-hide-docked-bottom.docked-open {
  display: flex;
  height: 280px;
  z-index: 101;
}
#auto-hide-docked-bottom-content {
  flex: 1;
  overflow: auto;
  min-width: 0;
  position: relative;
  padding-top: 4px;
}
.auto-hide-docked-resize-handle-bottom {
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  height: 4px;
  width: auto;
  cursor: ns-resize;
}
#auto-hide-bottom-strip {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex: 1;
  overflow: visible;
  position: relative;
  z-index: 100;
  padding-left: 0.25em;
  padding-right: 0.25em;
}
#root-container:has(#auto-hide-strip-left.has-tabs) #auto-hide-bottom-strip {
  padding-left: 2em;
}
#root-container:has(#auto-hide-strip-right.has-tabs) #auto-hide-bottom-strip {
  padding-right: 2em;
}
#auto-hide-bottom-strip .auto-hide-strip-tab {
  flex-direction: row;
  align-items: center;
  padding: 0 0.5em;
  margin-bottom: 0;
  margin-right: 0.24em;
  border-radius: 0.36em;
  overflow: visible;
}
#auto-hide-bottom-strip .auto-hide-strip-tab.active {
  color: #c8c8c8;
  border-radius: 0.36em;
  box-shadow: 0em -0.48em 0em 0em #282828;
  overflow: visible;
  z-index: 1;
}
#auto-hide-bottom-strip .auto-hide-strip-tab.active::before {
  content: " ";
  pointer-events: none;
  position: absolute;
  display: block;
  height: 80%;
  width: 1.625em;
  top: 0em;
  left: -1.625em;
  z-index: 1;
  border-radius: 0 0.625em 0 0;
  opacity: 1;
  box-shadow: 0.625em -0.34em 0 -0.25em #282828;
  transform: translate(0em, -0.25625em);
}
#auto-hide-bottom-strip .auto-hide-strip-tab.active::after {
  content: " ";
  pointer-events: none;
  position: absolute;
  display: block;
  height: 80%;
  width: 1.625em;
  top: 0em;
  right: -1.625em;
  z-index: 1;
  border-radius: 0.625em 0 0 0;
  opacity: 1;
  box-shadow: -0.625em -0.34em 0 -0.25em #282828;
  transform: translate(0em, -0.25625em);
}
#auto-hide-bottom-strip .auto-hide-strip-tab-label {
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  transform: none;
  padding-left: 0;
  padding-right: 0;
  max-height: none;
  align-self: stretch;
  display: flex;
  align-items: center;
  line-height: 1;
}
#auto-hide-bottom-strip .auto-hide-strip-tab-buttons {
  flex-direction: row;
  margin-bottom: 0;
  margin-left: 0.2em;
  gap: 0.2em;
}
.auto-hide-strip-tab {
  font-family: "SpaceGrotesk";
  font-size: inherit;
  letter-spacing: -0.14px;
  color: #727272;
  background-color: #282828;
  border-radius: 0.36em;
  cursor: pointer;
  padding: 0.5em 0;
  margin-bottom: 0.24em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 0;
  overflow: hidden;
  user-select: none;
  transition: color 150ms ease, background-color 150ms ease;
}
.auto-hide-strip-tab.active {
  color: #c8c8c8;
  border-top-left-radius: 0.36em;
  border-bottom-left-radius: 0.36em;
  border-top-right-radius: 0em;
  border-bottom-right-radius: 0em;
  box-shadow: 0.48em 0em 0em 0em #282828;
  overflow: visible;
  z-index: 1;
}
.auto-hide-strip-tab.active::before {
  content: " ";
  pointer-events: none;
  position: absolute;
  display: block;
  width: 80%;
  height: 1.625em;
  right: 0em;
  top: -1.625em;
  z-index: 1;
  border-radius: 0 0 0.625em 0;
  opacity: 1;
  box-shadow: 0.34em 0.625em 0 -0.25em #282828;
  transform: translate(0.25625em, 0em);
}
.auto-hide-strip-tab.active::after {
  content: " ";
  pointer-events: none;
  position: absolute;
  display: block;
  width: 80%;
  height: 1.625em;
  right: 0em;
  bottom: -1.625em;
  z-index: 1;
  border-radius: 0 0.625em 0 0;
  opacity: 1;
  box-shadow: 0.34em -0.625em 0 -0.25em #282828;
  transform: translate(0.25625em, 0em);
}
#auto-hide-strip-right .auto-hide-strip-tab.active {
  border-top-left-radius: 0em;
  border-bottom-left-radius: 0em;
  border-top-right-radius: 0.36em;
  border-bottom-right-radius: 0.36em;
  box-shadow: -0.48em 0em 0em 0em #282828;
}
#auto-hide-strip-right .auto-hide-strip-tab.active::before {
  left: 0em;
  right: auto;
  border-radius: 0 0 0 0.625em;
  box-shadow: -0.34em 0.625em 0 -0.25em #282828;
  transform: translate(-0.25625em, 0em);
}
#auto-hide-strip-right .auto-hide-strip-tab.active::after {
  left: 0em;
  right: auto;
  border-radius: 0.625em 0 0 0;
  box-shadow: -0.34em -0.625em 0 -0.25em #282828;
  transform: translate(-0.25625em, 0em);
}
#auto-hide-strip-left .auto-hide-strip-tab.active:first-child::before,
#auto-hide-strip-right .auto-hide-strip-tab.active:first-child::before {
  display: none;
}
#auto-hide-bottom-strip .auto-hide-strip-tab.active:first-child::before {
  display: none;
}
.auto-hide-strip-tab-label {
  display: block;
  padding-left: 0.38em;
  padding-right: 0.38em;
  white-space: nowrap;
}
#auto-hide-strip-left .auto-hide-strip-tab-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: none;
}
#auto-hide-strip-right .auto-hide-strip-tab-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
}
.auto-hide-strip-tab-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3em;
  margin-bottom: 0.5em;
}
.auto-hide-strip-tab-btn {
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  border: none;
  padding: 0;
  background-color: transparent;
  user-select: none;
  border-radius: 0.375em;
  transition: background-color 150ms ease;
}
.auto-hide-strip-tab-btn:hover {
  background-color: #262626;
}
.auto-hide-strip-tab-close {
  background-image: url("../../public/resources/menu/lm_close_tab_dark.svg");
  background-size: 0.6em 0.6em;
  width: 0.6em;
  height: 0.6em;
}
.auto-hide-strip-tab-unpin {
  background-image: url("../../public/resources/shared/sidebar_unpin.svg");
  background-size: 0.85em 0.85em;
  width: 0.85em;
  height: 0.85em;
  opacity: 0.7;
}
.auto-hide-strip-tab-unpin:hover {
  opacity: 1;
  background-color: transparent;
}
#auto-hide-backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: transparent;
  z-index: 98;
}
#auto-hide-overlay.visible ~ #auto-hide-backdrop {
  display: block;
}
#auto-hide-overlay {
  position: fixed;
  z-index: 101;
  background-color: #1b1b1b;
  border: none;
  border-radius: 0.36em;
  box-shadow: none;
  margin: 0;
  padding: 0;
  display: none;
  flex-direction: column;
  transition: transform 200ms ease;
}
#auto-hide-overlay.visible {
  display: flex;
}
#auto-hide-overlay.auto-hide-overlay-left {
  top: 2.125em;
  left: 2em;
  bottom: 2rem;
  width: 360px;
}
#auto-hide-overlay.auto-hide-overlay-right {
  top: 2.125em;
  right: 2em;
  bottom: 2rem;
  width: 360px;
}
#auto-hide-overlay.auto-hide-overlay-bottom {
  left: 0.25em;
  right: 0.25em;
  bottom: 2rem;
  height: 280px;
}
.auto-hide-overlay-resize-handle {
  position: absolute;
  z-index: 200;
  background: #1b1b1b;
  opacity: unset;
  transition: background 150ms ease;
}
.auto-hide-overlay-resize-handle:hover,
.auto-hide-overlay-resize-handle.resizing {
  background: colors-ui-border-interactive-default;
}
.auto-hide-overlay-left .auto-hide-overlay-resize-handle {
  right: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  cursor: col-resize;
}
.auto-hide-overlay-right .auto-hide-overlay-resize-handle {
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  cursor: col-resize;
}
.auto-hide-overlay-bottom .auto-hide-overlay-resize-handle {
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  cursor: ns-resize;
}
#auto-hide-overlay-body {
  background-color: #282828;
  border-radius: 0.36em;
  overflow: hidden;
  box-shadow: none;
}
.auto-hide-overlay-right #auto-hide-overlay-body {
  margin-left: 4px;
}
.auto-hide-overlay-left #auto-hide-overlay-body {
  margin-right: 4px;
}
.auto-hide-overlay-bottom #auto-hide-overlay-body {
  margin-top: 4px;
}
#auto-hide-overlay-header {
  display: none !important;
}
#auto-hide-overlay-content {
  flex: 1;
  overflow: auto;
  padding: 0;
  position: relative;
}
#auto-hide-overlay.collapsed-overlay #auto-hide-overlay-header {
  display: none;
}
.overlay-floating-pin {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 5;
  cursor: pointer;
  font-size: 14px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  color: #c8c8c8;
  background-color: rgba(40,40,40,0.7);
  border: 1px solid #333;
  transition: background-color 150ms ease;
  opacity: 0.6;
}
.overlay-floating-pin:hover {
  background-color: #333;
  opacity: 1;
}
.collapsed-icon-zone {
  display: none;
}
.collapsed-icon-zone.has-icons {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0 6px;
  background-color: #3a5070;
  border-radius: 0 3px 3px 0;
  height: 100%;
  align-self: stretch;
}
.collapsed-icon {
  font-size: 14px;
  cursor: pointer;
  padding: 1px 3px;
  border-radius: 2px;
  background-color: transparent;
  user-select: none;
  transition: background-color 150ms ease;
}
.collapsed-icon:hover {
  background-color: #4a6080;
}
.overlay-side-tabs {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  background-color: #333;
  padding-top: 4px;
  gap: 2px;
  overflow: hidden;
}
.overlay-side-tabs.hidden {
  display: none;
}
.overlay-side-tabs.side-tabs-left {
  width: 28px;
  min-width: 28px;
  border-right: 1px solid #333;
  order: -1;
  background-color: #282828;
}
.overlay-side-tabs.side-tabs-right {
  width: 28px;
  min-width: 28px;
  border-left: 1px solid #333;
  order: 1;
  background-color: #282828;
}
.overlay-side-tab {
  writing-mode: vertical-lr;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-family: "SpaceMono";
  font-size: 12px;
  font-weight: 600;
  color: #c8c8c8;
  background-color: #282828;
  cursor: pointer;
  padding: 3px 6px;
  margin: 2px;
  max-height: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
  transition: background-color 150ms ease;
}
.overlay-side-tab:hover {
  background-color: #282828;
  color: #f3f3f3;
}
.overlay-side-tab.active {
  background-color: #282828;
  color: #f3f3f3;
}
.side-tabs-right .overlay-side-tab {
  writing-mode: vertical-rl;
  transform: none;
}
#auto-hide-strip-left.drag-over,
#auto-hide-strip-right.drag-over {
  width: 2em !important;
  max-width: 2em !important;
  background-color: rgba(65,105,225,0.4) !important;
  box-shadow: inset 0 0 10px rgba(65,105,225,0.6);
}
#auto-hide-bottom-strip.drag-over {
  background-color: rgba(65,105,225,0.4) !important;
  box-shadow: inset 0 0 10px rgba(65,105,225,0.6);
}
.ct-process-tree {
  font-family: "SpaceMono", monospace;
}
#ct-process-tree-host {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  flex-grow: 0;
  overflow: hidden;
}
#ct-process-tree-host:empty {
  width: 0;
  max-width: 0;
}
.ct-process-tree {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 12em;
  min-width: 12em;
  height: 100%;
  overflow-y: auto;
  background-color: #1b1b1b;
  border-right: 1px solid colors-ui-border-base;
  font-size: 0.8rem;
  user-select: none;
}
.ct-process-tree-header {
  padding: 0.4em 0.6em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: bold;
  opacity: 0.6;
}
.ct-process-tree-entry {
  display: flex;
  flex-direction: column;
  padding: 0.35em 0.6em;
  cursor: pointer;
  border-left: 2px solid transparent;
}
.ct-process-tree-entry:hover {
  background-color: colors-ui-surface-base-hover;
}
.ct-process-tree-entry.active {
  border-left-color: colors-ui-text-accent;
  background-color: colors-ui-surface-base-selected;
}
.ct-process-tree-role {
  font-weight: bold;
}
.ct-process-tree-name,
.ct-process-tree-threads {
  opacity: 0.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#ct-origin-chain-side-panel {
  font-family: "SpaceMono", monospace;
}
#ct-origin-chain-side-panel {
  position: fixed;
  top: 3em;
  right: 0;
  bottom: 2em;
  width: 24em;
  max-width: 40vw;
  box-sizing: border-box;
  padding: 0.5em;
  overflow-y: auto;
  z-index: 200;
  background-color: #282828;
  border-left: 1px solid colors-ui-border-base;
  font-size: 0.85rem;
}
#ct-origin-chain-side-panel nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em;
  margin-bottom: 0.5em;
}
#ct-origin-chain-side-panel ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
#ct-origin-chain-side-panel li {
  display: flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.2em 0;
}
#ct-origin-chain-side-panel button {
  cursor: pointer;
}
#ct-origin-chain-side-panel footer {
  margin-top: 0.5em;
}
.ct-origin-breadcrumb-chip {
  padding: 0.1em 0.5em;
  border-radius: 0.8em;
  border: 1px solid colors-ui-border-base;
  background-color: #161616;
}
.ct-origin-breadcrumb-chip.ct-origin-breadcrumb-chip-placeholder {
  opacity: 0.45;
  font-style: italic;
  cursor: default;
}
.ct-origin-cross-process-badge {
  padding: 0 0.4em;
  border-radius: 0.3em;
  font-size: 0.75rem;
  background-color: #1e3a8a;
  color: #1b1b1b;
}
.problems-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  color: #f3f3f3;
  font-size: 13px;
  font-family: "FiraCode", monospace;
  background: #282828;
}
.problems-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 10px;
  border-bottom: 1px solid #242424;
  background: #333;
  flex-shrink: 0;
  user-select: none;
}
.problems-counts {
  display: flex;
  align-items: center;
  gap: 12px;
}
.problems-count-badge {
  font-size: 12px;
  opacity: 0.8;
}
.problems-count-error {
  color: #f85149;
}
.problems-count-warning {
  color: #d29922;
}
.problems-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}
.problems-filter-btn {
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  color: #f3f3f3;
  background: transparent;
}
.problems-filter-btn:hover {
  background: #242424;
}
.problems-filter-btn.active {
  background: #242424;
  color: #f3f3f3;
  font-weight: 600;
}
.problems-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}
.problems-empty {
  padding: 16px 10px;
  opacity: 0.6;
  font-style: italic;
}
.problems-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 3px 10px;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 1px solid #3a3a3a;
}
.problems-row:hover {
  background: #242424;
}
.problems-icon {
  flex-shrink: 0;
  width: 16px;
  text-align: center;
  font-size: 12px;
}
.problems-icon-error {
  color: #f85149;
}
.problems-icon-warning {
  color: #d29922;
}
.problems-icon-info {
  color: #58a6ff;
}
.problems-path {
  color: #8b949e;
  flex-shrink: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
}
.problems-location {
  color: #8b949e;
  flex-shrink: 0;
  font-size: 12px;
}
.problems-message {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #f3f3f3;
}
.problems-grouped {
  display: block;
}
.problems-file-group {
  margin-bottom: 2px;
}
.problems-file-header {
  padding: 4px 10px;
  font-weight: 600;
  font-size: 12px;
  color: #8b949e;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.problems-severity-error {
  border-left: 3px solid #f85149;
}
.problems-severity-warning {
  border-left: 3px solid #d29922;
}
.problems-severity-info {
  border-left: 3px solid #58a6ff;
}
.fif-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #282828;
  color: #f3f3f3;
  font-size: 13px;
  overflow: hidden;
}
.fif-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px 6px;
  flex-shrink: 0;
  border-bottom: 1px solid #3a3a3a;
}
.fif-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b4b4b4;
  user-select: none;
}
.fif-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.fif-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  cursor: pointer;
  color: #b4b4b4;
  font-size: 14px;
  line-height: 1;
}
.fif-icon-btn:hover {
  background-color: #333;
  color: #f3f3f3;
}
.fif-close {
  font-size: 16px;
}
.fif-search-bar {
  position: relative;
  margin: 8px 10px;
  flex-shrink: 0;
}
.fif-badge {
  position: absolute;
  left: 2rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  height: 1rem;
  padding: 0 0.4em;
  border-radius: 0.2em;
  font-size: 0.75em;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  background-color: #1e3a8a;
  color: #93c5fd;
}
.fif-input {
  width: -webkit-fill-available;
  padding-left: calc(2em + 6.5rem) !important;
  padding-right: 1.75rem !important;
}
.fif-input::placeholder {
  color: #b4b4b4;
  opacity: 0.6;
}
.fif-clear-btn {
  display: none;
  position: absolute;
  right: 0.375rem;
  top: 50%;
  transform: translateY(-50%);
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  line-height: 1;
  color: #b4b4b4;
  cursor: pointer;
  user-select: none;
}
.fif-clear-btn:hover {
  background-color: #333;
  color: #f3f3f3;
}
.fif-body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.fif-empty {
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fif-empty-prompt {
  color: #b4b4b4;
  font-size: 12px;
  text-align: center;
  padding: 24px 0;
  opacity: 0.7;
}
.fif-recent-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #b4b4b4;
  padding: 4px 2px 8px;
  opacity: 0.7;
}
.fif-recent-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 8px;
  border-radius: 5px;
  cursor: pointer;
  gap: 8px;
}
.fif-recent-item:hover {
  background-color: #333;
}
.fif-recent-query {
  font-size: 12px;
  color: #f3f3f3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.fif-recent-count {
  font-size: 11px;
  color: #b4b4b4;
  white-space: nowrap;
  flex-shrink: 0;
}
.fif-shimmer-block {
  height: 28px;
  margin: 3px 10px;
  border-radius: 4px;
  background: linear-gradient(90deg, #333 25%, #333 50%, #333 75%);
  background-size: 800px 100%;
  animation: fif-shimmer 1.4s infinite linear;
}
.fif-file-group {
  margin-bottom: 1px;
}
.fif-file-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 10px;
  background-color: #333;
  position: sticky;
  top: 0;
  z-index: 1;
  gap: 8px;
}
.fif-file-path {
  font-size: 12px;
  font-weight: 600;
  color: #f3f3f3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.fif-file-count {
  font-size: 11px;
  color: #b4b4b4;
  white-space: nowrap;
  flex-shrink: 0;
}
.fif-match-row {
  display: flex;
  align-items: baseline;
  padding: 3px 10px 3px 20px;
  cursor: pointer;
  font-family: monospace;
  font-size: 12px;
  line-height: 1.6;
  gap: 6px;
}
.fif-match-row:hover {
  background-color: #333;
}
.fif-line-number {
  min-width: 36px;
  text-align: right;
  color: #b4b4b4;
  font-size: 11px;
  flex-shrink: 0;
  user-select: none;
}
.fif-match-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  color: #f3f3f3;
}
.fif-highlight {
  background-color: rgba(251,146,60,0.3);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}
.search-results-highlight {
  background-color: rgba(251,146,60,0.3);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}
.search-results-active {
  display: flex;
}
.search-results-non-active {
  display: none;
}
@-moz-keyframes fif-shimmer {
  0% {
    background-position: -400px 0;
  }
  100% {
    background-position: 400px 0;
  }
}
@-webkit-keyframes fif-shimmer {
  0% {
    background-position: -400px 0;
  }
  100% {
    background-position: 400px 0;
  }
}
@-o-keyframes fif-shimmer {
  0% {
    background-position: -400px 0;
  }
  100% {
    background-position: 400px 0;
  }
}
@keyframes fif-shimmer {
  0% {
    background-position: -400px 0;
  }
  100% {
    background-position: 400px 0;
  }
}
.file-conflict-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.42);
}
.file-conflict-dialog {
  width: 560px;
  max-width: calc(100vw - 48px);
  padding: 18px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--panel-background);
  color: var(--text-color);
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
}
.file-conflict-dialog h2 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 600;
}
.file-conflict-dialog p {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.file-conflict-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.file-conflict-dialog-actions button {
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--button-background);
  color: var(--text-color);
  cursor: pointer;
}
.file-conflict-dialog-actions button:hover {
  background: var(--button-hover-background);
}
.empty-overlay,
.filesystem-empty-overlay,
.filesystem-loading-overlay,
.problems-empty,
.search-results-empty,
.unified-diff-empty,
.dt-empty,
.dataTables_empty,
.event-log-marker-empty,
.trace-log-empty,
.point-list-empty,
.flow-steps-empty,
.frame-viewer-empty,
.frame-viewer-draw-calls-empty,
.pixel-history-empty,
.shader-debug-empty,
.shader-debug-values-empty,
.video-player-empty,
.agent-workspace-empty {
  font-family: "SpaceGrotesk";
  font-size: 0.875rem;
  opacity: 0.6;
  line-height: 1.25rem;
  text-align: center;
  box-sizing: border-box;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  overflow-wrap: break-word;
}
.empty-overlay br,
.filesystem-empty-overlay br,
.filesystem-loading-overlay br,
.problems-empty br,
.search-results-empty br,
.unified-diff-empty br,
.dt-empty br,
.dataTables_empty br,
.event-log-marker-empty br,
.trace-log-empty br,
.point-list-empty br,
.flow-steps-empty br,
.frame-viewer-empty br,
.frame-viewer-draw-calls-empty br,
.pixel-history-empty br,
.shader-debug-empty br,
.shader-debug-values-empty br,
.video-player-empty br,
.agent-workspace-empty br {
  display: none;
}
.filesystem-empty-overlay,
.filesystem-loading-overlay,
.problems-empty,
.search-results-empty,
.event-log-marker-empty,
.trace-log-empty,
.point-list-empty,
.flow-steps-empty,
.frame-viewer-empty,
.frame-viewer-draw-calls-empty,
.pixel-history-empty,
.shader-debug-empty,
.shader-debug-values-empty,
.video-player-empty,
.agent-workspace-empty {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}
table:has(> tbody > tr > .dt-empty),
table:has(> tbody > tr > .dataTables_empty) {
  height: 100%;
}
table:has(> tbody > tr > .dt-empty) tbody,
table:has(> tbody > tr > .dataTables_empty) tbody {
  height: 100%;
}
table:has(> tbody > tr > .dt-empty) tr,
table:has(> tbody > tr > .dataTables_empty) tr {
  height: 100%;
}
.dt-empty,
.dataTables_empty {
  place-items: center;
  width: 100%;
  height: 100%;
}