/* Copyright 2024 MuseMaze Inc. All Rights Reserved */

/* General style. */
:root {
  color-scheme: dark;

  /* Text colors. */
  --content-block-background-color: #17181b;
  --light-block-background-color: #22272c;
  --darker-block-background-color: #111214;
  --input-field-background-color: #111214;
  --highlighted-device-background-color: #3a3f4c;
  --button-background-color: #3a3f4c;

  /* Background colors. */
  --main-text-color: #ccc;
  --dark-text-color: #888;
  --darker-text-color: #555;
  --bright-text-color: #eee;
  --placeholder-text-color: #666;
  --username-text-color: #89b;
  --username-self-text-color: #58d;
  --username-self-text-color-bright: #70a5ff;
  --entity-label-text-color: #dfb450;
  --entity-label-inactive-text-color: #9b8c6a;
  --link-text-color: #6684b1;
  --hover-link-text-color: #84ace8;

  /* Border colors. */
  --dark-block-border-color: #2d343b;
  --light-block-border-color: #38414a;
  --button-border-color: #4e5769;
  --hover-border-color: #4e5769;

  /* Gradients. */
  --main-highlight-gradient: linear-gradient(45deg, #5b6, #56f);
  --content-block-hover-gradient: linear-gradient(45deg, #161d17, #191b29);
  --content-block-item-hover-gradient: linear-gradient(45deg, #243927, #333859);
  --light-block-hover-gradient: linear-gradient(45deg, #1e271f, #1f2133);
  --light-block-item-hover-gradient: linear-gradient(45deg, #304b34, #434974);
  --input-field-error-border-gradient: linear-gradient(45deg, #cc8630, #f93649);
  --input-field-error-background-gradient: linear-gradient(45deg, #3b2203, #491015);

  /* Sizes. */
  --header-height: 42px;
  --footer-height: 0px;
  --thumbnail-size: 80px;
  --tiny-thumbnail-size: 40px;
  --compact-tiny-thumbnail-size: 15px;
  --input-field-height: 32px;
  --choice-underline-thickness: 4px;
  --busy-animation-height: 4px;
  --sharp-outer-radius: 5px;
  --sharp-inner-radius: 4px;
  --highlight-thickness: 1px;
  --parameter-value-height: 22px;
  --parameter-value-margin: 6px;
  --details-panel-width: 316px;
  --explorer-panel-width: 316px;
  --widget-header-height: 30px;
  --actions-height: 36px;
  --editor-button-size: 28px;
  --editor-choice-button-size: 24px;
}

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  height: 100%;
  background: black;
  font-size: 13px;
  line-height: 1.6;
  color: var(--main-text-color);
  overflow: hidden;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.8);
}

#dialog-background-job.modal {
  background-color: unset;
}

#powering-up-container.modal {
  display: block;
}

#powering-up-logo {
  height: 72px;
  width: 72px;
  vertical-align: middle;
}

#powering-up-title-container {
  line-height: 1.4;
  margin-top: 20px;
}

#powering-up-title-name {
  text-align: right;
}

#powering-up-title-version {
  text-align: right;
  font-size: 12px;
  color: var(--dark-text-color);
  margin-left: auto;
  margin-right: 0;
}

.powering-up-message {
  margin-left: 10px;
  margin-right: 10px;
  padding: 12px 8px 12px 8px;
  border-bottom: 1px solid var(--dark-block-border-color);
}

.powering-up-message:last-child {
  border-bottom: none;
}

.busy-animation {
  height: var(--busy-animation-height);
  margin-bottom: calc(-1 * var(--busy-animation-height));
  visibility: hidden;
  animation-iteration-count: infinite;
  background: var(--main-highlight-gradient);
  position: relative;
}

.busy-animation.busy {
  visibility: visible;
  animation: busy-keyframes 2s infinite;
  animation-timing-function: ease-out;
}

@keyframes busy-keyframes {
  0% {
    margin-left: 0;
    margin-right: 90%;
  }

  7% {
    margin-left: 0;
  }

  50% {
    margin-left: 90%;
    margin-right: 0;
  }

  57% {
    margin-right: 0;
  }

  100% {
    margin-left: 0;
    margin-right: 90%;
  }
}

.modal-content {
  position: relative;
  width: 80%;
  background: var(--content-block-background-color);
  margin: 48px auto;
  border: 1px solid var(--dark-block-border-color);
  border-radius: 16px;
  color: var(--main-text-color);
  font-size: 14px;
  box-shadow: 0px 0px 48px 48px #000;
}

.modal-content:hover {
  background: var(--content-block-hover-gradient);
}

#dialog-background-job .modal-content {
  margin-top: 0;
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  box-shadow: 0px 0px 24px 24px var(--light-block-background-color);
}

.dialog-button-close {
  position: absolute;
  top: 0px;
  right: 0px;
  padding-left: 6px;
  padding-right: 6px;
  font-size: 32px;
  line-height: 1;
  color: var(--darker-text-color);
  cursor: pointer;
}

.dialog-button-close:hover {
  color: var(--main-text-color);
}

#dialog-background-job {
  z-index: 1100;
}

.modal-header {
  display: flex;
  padding: 18px 36px 18px 18px;
  border-bottom: 1px solid var(--dark-block-border-color);
}

.modal-body {
  padding: 12px;
  overflow-y: scroll;
  max-height: 410px;
}

.modal-title {
  flex: 1;
  font-size: 24px;
}

.modal-title-right {
  display: flex;
  margin-top: 12px;
  font-size: 12px;
  color: var(--dark-text-color);
}

.modal-footer {
  display: flex;
  padding: 12px;
  border-top: 1px solid var(--dark-block-border-color);
}

.modal-footnote {
  flex: 1;
  display: flex;
  font-size: 12px;
  margin-top: 7px;
  color: var(--dark-text-color);
}

a {
  color: var(--link-text-color);
  text-decoration: none;
  cursor: pointer;
}

.modal-link,
.circuit-embed {
  color: var(--link-text-color);
  cursor: pointer;
}

.modal-link:hover,
.circuit-embed:hover {
  color: var(--hover-link-text-color);
}

.user-website {
  float: left;
}

#dialog-register-call-to-action {
  margin-bottom: 5px;
  text-align: center;
  margin-bottom: 20px;
  color: var(--main-text-color);
}

.modal-input-rows {
  margin-top: 20px;
  margin-bottom: 20px;
}

.modal-input-rows>* {
  margin-top: 8px !important;
}

.modal-content .input-field {
  margin: 0px;
}

.input-field.error {
  background: var(--input-field-error-border-gradient) !important;
}

.input-field.error .widget-input {
  background: var(--input-field-error-background-gradient) !important;
}

.modal-choice-selector {
  display: flex;
  margin-top: 18px;
  margin-bottom: 8px;
  justify-content: center;
  cursor: default;
}

#dialog-profile-data .modal-choice-selector {
  justify-content: unset;
  margin-top: 20px;
}

.modal-choice {
  padding: 3px 6px 3px 6px;
}

.modal-choice:not(:last-child) {
  margin-right: 18px;
}

.modal-choice:hover {
  color: var(--bright-text-color);
  cursor: pointer;
  background: var(--content-block-item-hover-gradient);
  border-radius: 6px;
}

.selected.modal-choice:hover {
  cursor: unset;
  color: unset;
  background: unset;
}

.modal-dashed-item {
  border-left: 1px solid var(--dark-block-border-color);
  padding-top: 2px;
  padding-bottom: 2px;
  margin-left: 24px;
  padding-left: 24px;
}

.darker.modal-dashed-item {
  color: var(--darker-text-color);
}

#context-menu {
  display: none;
  position: absolute;
  z-index: 1100;
  background: var(--light-block-background-color);
  border: 1px solid var(--button-border-color);
  border-radius: var(--sharp-outer-radius);
  cursor: default;
  user-select: none;
}

.context-menu-item {
  color: var(--main-text-color);
  padding: 4px 8px 4px 8px;
}

.context-menu-item:has(a) {
  padding: 0;
}

.context-menu-item:first-child {
  border-top-left-radius: var(--sharp-inner-radius);
  border-top-right-radius: var(--sharp-inner-radius);
}

.context-menu-item:last-child {
  border-bottom-left-radius: var(--sharp-inner-radius);
  border-bottom-right-radius: var(--sharp-inner-radius);
}

.context-menu-item:hover:not(.inactive) {
  cursor: pointer;
  color: var(--bright-text-color);
  background: var(--light-block-item-hover-gradient);
}

.context-menu-item:hover a {
  color: var(--bright-text-color);
}

.context-menu-item a {
  display: inline-block;
  width: 100%;
  height: 100%;
  padding: 4px 8px 4px 8px;
  color: var(--main-text-color);
}

.navbar-item {
  display: none;
  white-space: nowrap;
  margin-top: 6px;
  margin-bottom: 6px;
  padding-top: 2px;
  padding-left: 16px;
  padding-right: 16px;
}

.navbar-item:hover {
  color: var(--main-text-color);
  background: var(--light-block-item-hover-gradient);
  border-radius: 6px;
}

#navbar-container {
  display: flex;
  font-size: 16px;
  height: 40px;
  min-width: 1024px;
  min-height: var(--header-height);
  max-height: var(--header-height);
  padding: 0 6px 0 6px;
  background-color: var(--light-block-background-color);
  border-bottom: 1px solid var(--light-block-border-color);
}

.embed #navbar-container {
  display: none;
}

#navbar-right-container {
  display: flex;
  margin-left: auto;
  margin-right: 0;
}

.forever {
  font-size: 12px;
}

.navbar-item:hover,
#navbar-item-profile:hover {
  color: var(--bright-text-color);
  cursor: pointer;
}

#navbar-buy-button-border {
  white-space: nowrap;
  margin-right: 12px;
  margin-top: 8px;
  font-size: 12px;
}

#navbar-buy-message {
  color: var(--dark-text-color);
  white-space: nowrap;
  font-size: 12px;
  margin-left: 5vw;
  margin-right: 12px;
  padding-top: 12px;
}

#navbar-buy-message:hover {
  color: var(--main-text-color);
  cursor: pointer;
}

#flash-message-border {
  padding: 1px;
  background: #75808c;
  border-radius: 16px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1100;
  display: none;
  opacity: 0;
  transition: opacity ease-in 600ms;
}

#flash-message-border.opaque {
  opacity: 1;
}

#flash-message-text {
  color: white;
  font-size: 16px;
  background: var(--light-block-item-hover-gradient);
  padding: 8px 24px 8px 24px;
  border-radius: 15px;
  cursor: default;
}

#panels-container {
  display: flex;
  max-height: calc(100vh - var(--header-height) - var(--footer-height));
  min-height: calc(100vh - var(--header-height) - var(--footer-height));
}

.embed #panels-container {
  display: none;
}

#filler-widget {
  order: 100;
}

.widget-title,
.comments-title {
  padding: 0px 8px 4px 4px;
  font-weight: bold;
  font-size: 14px;
  text-overflow: ellipsis;
  flex-grow: 1;
  white-space: nowrap;
}

.widget-title {
  overflow: hidden;
}

.comments-title {
  padding: 4px 8px 4px 8px;
  font-weight: bold;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
}

#navbar-container .input-field {
  margin: 6px 0 3px 0;
  width: 196px;
}

.widget {
  height: calc(100vh - var(--header-height) - var(--footer-height));
  margin-left: 0px;
  margin-top: 0px;
  background: var(--darker-block-background-color);
  border-right: 1px solid var(--light-block-border-color);
  z-index: 0;
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
  transition: width 0.2s ease, height 0.2s ease;
}

.explorer-tab {
  border: none;
  display: none;
}

.collapsed.widget {
  height: var(--widget-header-height);
  flex-grow: 0;
  flex-shrink: 1;
  border-bottom: 1px solid var(--light-block-border-color);
}

#editor-container .collapsed.widget {
  border-bottom: none;
}

.collapsed .widget-controls {
  height: var(--widget-header-height);
  min-height: var(--widget-header-height);
}

.widget-scroll {
  overflow-y: auto;
}

#dialog-user-data {
  min-height: 132px;
}

#devices-container.collapsed .widget-scroll {
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

#devices-container {
  width: 190px;
  flex-shrink: 0;
}

#details-container {
  width: var(--details-panel-width);
}

#filler-widget,
#filler-actions {
  min-width: 0;
  flex-grow: 1;
  flex-shrink: 1;
}

#filler-actions {
  border-right: 1px solid var(--light-block-border-color);
}

.collapsed#details-container {
  max-width: 186px;
  flex: 0 0 auto;
}

.owned.collapsed#details-container {
  max-width: 140px;
}

.collapsed .explorer-tab {
  max-width: 134px;
  flex: 0 0 auto;
}

.collapsed#devices-container {
  flex-direction: row;
  flex-grow: 9999;
}

.collapsed#devices-container .widget-controls {
  border-right: 1px solid var(--light-block-border-color);
}

.collapsed#devices-container .widget-scroll::-webkit-scrollbar { 
  display: none;
}

.collapsed#devices-container .widget-scroll {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.widget-controls {
  display: flex;
  flex-direction: column;
  background: var(--light-block-background-color);
  border-top: 1px solid var(--light-block-border-color);
  border-bottom: 1px solid var(--light-block-border-color);
  z-index: 10;
}

.widget-controls:first-child {
  border-top: none;
}

.action-controls {
  background: var(--light-block-background-color);
}

.input-field {
  position: relative;
  background: var(--light-block-border-color);
  padding: var(--highlight-thickness);
  height: var(--input-field-height);
  margin: 6px;
  border-radius: var(--sharp-outer-radius);
  box-sizing: border-box;
}

.modal .input-field {
  background: var(--dark-block-border-color);
}

.input-field.multi-line {
  height: unset;
}

.input-field:hover,
.prominent.text-area-border:hover {
  background: var(--hover-border-color);
}

.input-field:focus-within,
.prominent.text-area-border:focus-within {
  background: var(--main-highlight-gradient);
}

.input-field:hover .widget-input,
.prominent.text-area-border:hover .modal-multiline {
  background: var(--content-block-hover-gradient);
}

.input-close {
  display: none;
  position: absolute;
  top: 0px;
  right: 0px;
  width: 13px;
  padding: 8px 8px 8px 2px;
  height: calc(var(--input-field-height) - 8px - 8px);
  filter: brightness(0.6);
}

.input-close:hover {
  cursor: pointer;
  filter: brightness(1.2);
}

.widget-input {
  width: 100%;
  height: calc(var(--input-field-height) - 2 * var(--highlight-thickness));
  font-size: 13px;
  text-overflow: ellipsis;
  color: var(--main-text-color);
  background: var(--input-field-background-color);
  padding: 6px 8px 6px 8px;
  border: none;
  box-sizing: border-box;
  border-radius: var(--sharp-inner-radius);
}

.widget-input.multi-line {
  height: unset;
  text-overflow: unset;
}

.widget-input:focus,
.parameter-widget-input {
  outline: none;
}

.device-category {
  background: var(--content-block-background-color);
  padding: 4px;
  border-bottom: solid 1px var(--dark-block-border-color);
}

.collapsed .device-category {
  border-right: solid 1px var(--light-block-border-color);
  border-bottom: solid 1px var(--light-block-border-color);
  ;
  background: var(--light-block-background-color);
  padding: 0;
  height: 30px;
  display: inline-block;
}

.device-category:last-child {
  border-right: none;
}

.device-category:hover {
  background: var(--content-block-hover-gradient);
}

.collapsed .device-category:hover {
  background: var(--light-block-hover-gradient);
}

.collapsed .device:hover, .highlighted.device:hover {
  background: var(--light-block-item-hover-gradient);
}

.device-category:hover .device-category-name {
  color: var(--main-text-color);
}

.device-category-header {
  display: flex;
}

.device-category-triangle {
  position: relative;
  max-width: 11px;
  text-align: center;
  top: 1px;
  transform: rotate(90deg);
  transform-origin: 5px 10px;
  transition: transform 0.2s;
}

.device-category-triangle:first-child {
  width: 100%;
  height: 100%;
}

.compact .device-category-triangle {
  transform: unset;
}

.device-category:last-child {
  margin-bottom: 0;
}

.device-category-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0px 2px 2px 5px;
  font-size: 13px;
  color: var(--dark-text-color);
}

.device-category-header:hover {
  cursor: pointer;
}

.device-list {
  display: block;
  padding-left: 8px;
}

.compact .device-list {
  display: flex;
  flex-wrap: wrap;
  row-gap: 4px;
}

.collapsed .device-list {
  display: flex;
  flex-wrap: nowrap;
  padding-left: 2px;
  padding-right: 2px;
}

.device {
  display: flex;
  margin: 4px 0 4px 0px;
  padding: 4px 0 4px 4px;
  border-radius: 6px;
}

.device:last-child {
  margin-bottom: 0;
}

.compact .device {
  padding: 4px 4px 4px 4px;
  margin: 0px 2px 0px 2px;
}

.collapsed .device {
  padding: 1px 1px 1px 1px;
  margin: 3px 5px 3px 5px;
}

.highlighted.device {
  background: var(--highlighted-device-background-color);
}

.device:hover {
  cursor: pointer;
  background: var(--content-block-item-hover-gradient);
}

.device:hover .device-icon img {
  filter: brightness(1.5);
}

.device:hover .device-name {
  color: var(--bright-text-color);
}

.device-icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
}

.compact .device-icon,
.collapsed .device-icon {
  width: 22px;
  height: 22px;
  min-width: 22px;
}

.device-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  color: var(--dark-text-color);
  padding-top: 4px;
  margin: 0 0px 0 8px;
}

.compact .device-name,
.collapsed .device-name {
  display: none;
}

.circuit-item {
  background: var(--content-block-background-color);
  padding: 4px;
  border-bottom: 1px solid var(--dark-block-border-color);
  overflow-x: hidden;
}

.circuit-item:hover {
  background: var(--content-block-hover-gradient);
}

.circuit-title-container {
  display: flex;
  margin-top: 2px;
  margin-bottom: 2px;
}

.widget-title-container {
  display: flex;
  margin-top: 4px;
  margin-left: 4px;
  margin-right: auto;
  flex-grow: 1;
}

.widget-title-container:hover {
  cursor: pointer;
}

.circuit-triangle,
.widget-triangle {
  position: relative;
  max-width: 11px;
  min-width: 11px;
  text-align: center;
  top: 2px;
  transform: rotate(90deg);
  transform-origin: 5px 10px;
  transition: transform 0.2s;
}

.compact .circuit-triangle {
  transform: unset;
}

.collapsed .widget-triangle {
  transform: unset;
}

.circuit-triangle:first-child, .widget-triangle:first-child {
  width: 100%;
  height: 100%;
}

.circuit-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre-wrap;
  padding: 0px 0px 1px 4px;
  font-size: 15px;
  color: var(--main-text-color);
}

.compact .circuit-title {
  white-space: nowrap;
}

.circuit-title-container:hover {
  cursor: pointer;
}

.circuit-menu-dots {
  width: 18px;
  height: 18px;
  padding: 3px;
  filter: brightness(80%);
}

.circuit-menu-dots:hover {
  filter: brightness(110%);
  cursor: pointer;
}

.circuit-menu-dots:first-child {
  width: 100%;
  height: 100%;
}

.menu-info-text {
  color: var(--darker-text-color);
  padding-right: 3px;
}

.circuit-thumbnail-border {
  flex-shrink: 0;
  width: var(--thumbnail-size);
  height: var(--thumbnail-size);
  background: var(--dark-block-border-color);
  border-radius: var(--sharp-outer-radius);
  padding: var(--highlight-thickness);
  margin-left: 0px;
  margin-right: 8px;
}

.rectangular.circuit-thumbnail-border {
  width: unset;
  height: unset;
  margin-left: auto;
  margin-right: auto;
  padding: 12px;
  border-radius: 16px;
  background: unset;
}

.rectangular .circuit-thumbnail {
  width: unset;
  height: unset;
}

.rectangular.circuit-thumbnail-border img {
  width: auto;
  height: auto;
  max-height: 120px;
  max-width: 120px;
  vertical-align: bottom;
  border: 1px solid var(--dark-block-border-color);
}

.tiny.circuit-thumbnail-border {
  width: calc(var(--thumbnail-size) / 2);
  height: calc(var(--thumbnail-size) / 2);
}

.highlighted.circuit-thumbnail-border {
  background: var(--main-highlight-gradient);
}

.compact .tiny.circuit-thumbnail-border {
  width: var(--compact-tiny-thumbnail-size);
  height: var(--compact-tiny-thumbnail-size);
}

.tiny.circuit-thumbnail-border {
  margin: 1px 1px 1px 1px;
  display: inline-block;
  vertical-align: middle;
}

.circuit-ancestor-container .tiny.circuit-thumbnail-border {
  margin: 0;
}

.circuit-thumbnail-border:hover {
  background: var(--hover-border-color);
  cursor: pointer;
}

.highlighted.circuit-thumbnail-border:hover {
  background: var(--main-highlight-gradient);
}

.rectangular.circuit-thumbnail-border:hover {
  background: var(--content-block-item-hover-gradient);
}

.circuit-thumbnail {
  width: var(--thumbnail-size);
  height: var(--thumbnail-size);
  border-radius: var(--sharp-inner-radius);
  background: #080808;
}

.tiny.circuit-thumbnail {
  width: var(--tiny-thumbnail-size);
  height: var(--tiny-thumbnail-size);
}

.compact .tiny.circuit-thumbnail {
  width: var(--compact-tiny-thumbnail-size);
  height: var(--compact-tiny-thumbnail-size);
}

.circuit-thumbnail>img {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--sharp-inner-radius);
  filter: contrast(0.9);
}

.circuit-right-container {
  flex: 1;
  padding-left: 8px;
  margin-top: -2px;
  overflow: hidden;
}

.circuit-description,
.modal-multiline {
  padding-top: 2px;
  padding-left: 12px;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-word;
}

.modal-multiline {
  min-height: 68px;
  background: var(--input-field-background-color);
}

.compact .circuit-description {
  min-height: 43px;
  max-height: 43px;
  padding-left: 0;
  color: var(--dark-text-color);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: unset;
}

.compact.example .circuit-description {
  min-height: 86px;
  max-height: 86px;
  -webkit-line-clamp: 4;
}

.circuit-author-container {
  display: flex;
  padding-top: 0px;
  padding-left: 0px;
}

.user-mention {
  color: var(--username-text-color);
  cursor: pointer;
}

.user-mention.self {
  color: var(--username-self-text-color);
}

.monospaced-block {
  font-family: monospace;
}

#navbar-container .user-mention.self {
  color: var(--username-self-text-color-bright);
}

.circuit-author {
  color: var(--username-text-color);
  padding-right: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.circuit-author:hover {
  cursor: pointer;
}

.circuit-author.self {
  color: var(--username-self-text-color);
}

.circuit-date {
  flex: 1;
  margin-top: auto;
  margin-right: auto;
  color: #555;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#details-container .circuit-date {
  flex: unset;
}

#details-container .circuit-date-spacer {
  flex: 1;
}

#details-circuit-info .circuit-date:hover {
  cursor: pointer;
}

.comment-author-container .circuit-date {
  margin-top: unset;
}

.circuit-info-small {
  font-size: 11.5px;
}

.circuit-info-link {
  color: var(--darker-text-color);
  cursor: pointer;
}

.circuit-info-link:hover {
  color: var(--dark-text-color);
}

.circuit-info-container {
  display: block;
  padding-left: 12px;
}

.circuit-extra-info-container {
  margin-top: 8px;
}

.floated {
  float: left;
}

.stats-container {
  display: flex;
  padding-top: 2px;
  padding-bottom: 2px;
}

.compact .stats-container {
  padding-top: 1px;
  padding-bottom: 1px;
}

.user-stats-container {
  display: flex;
  padding-top: 12px;
  padding-bottom: 12px;
}

.username-large {
  font-size: 20px;
  margin-top: 8px;
  margin-bottom: 12px;
  color: var(--username-text-color);
}

.username-large.self {
  color: var(--username-self-text-color);
}

.modal-line {
  margin-top: 12px;
  margin-bottom: 12px;
}

.modal-line-centered {
  padding-left: 24px;
  padding-right: 24px;
}

.stats-item {
  padding: 6px 8px 6px 8px;
  border-left: solid var(--dark-block-border-color) 1px;
}

.modal-stats-container .stats-item {
  padding: 8px 16px 8px 16px;
}

.settings-checkbox {
  margin-right: 10px;
}

input[type=checkbox] {
  accent-color: var(--main-text-color);
}

.settings-checkbox:hover {
  cursor: pointer;
}

.settings-item {
  margin-top: 12px;
  margin-bottom: 24px;
}

.settings-item:last-child {
  margin-bottom: 12px;
}

.settings-title {
  font-size: 16px;
}

.settings-description {
  font-size: 14px;
  margin-left: 27px;
  margin-top: 8px;
  color: var(--dark-text-color);
}

.compact .stats-item {
  padding: 0px 0px 0px 8px;
  display: flex;
  border-left: none;
}

.stats-item:first-child {
  border-left: none;
}

.compact .stats-item:first-child {
  padding-left: 0;
  margin-left: -2px;
}

.stats-icon {
  width: 18px;
  height: 18px;
  margin: auto;
  text-align: center;
  filter: grayscale(100%) brightness(80%);
}

.dark .stats-icon {
  filter: grayscale(100%) brightness(40%);
}

.gold .stats-icon {
  filter: brightness(80%);
}

.blue .stats-icon {
  filter: saturate(40%) hue-rotate(175deg) brightness(60%) saturate(400%);
}

.stats-value {
  text-align: center;
  padding-top: 6px;
  color: var(--dark-text-color);
}

.compact .stats-value {
  padding-top: 0;
  padding-left: 1px;
}

.dark .stats-value {
  color: var(--darker-text-color);
}

.gold .stats-value {
  color: var(--dark-text-color);
}

.status-item {
  display: flex;
}

.status-icon {
  width: 18px;
  height: 18px;
  margin-left: -2px;
  filter: grayscale(100%) brightness(80%);
}

.status-value {
  padding-left: 4px;
  color: var(--dark-text-color);
}

.circuit-bottom-container {
  padding-bottom: 6px;
}

.compact .circuit-bottom-container {
  padding-bottom: 0;
}

.date-created,
.date-published {
  padding-top: 6px;
  color: var(--darker-text-color);
}

.compact .date-created,
.compact .date-published {
  display: none;
}

.comments-item {
  background: var(--content-block-background-color);
  padding: 4px;
  border-bottom: 1px solid var(--dark-block-border-color);
}

.comments-item:hover {
  background: var(--content-block-hover-gradient);
}

.comment-author-container {
  display: flex;
  padding-top: 2px;
  padding-left: 2px;
}

.comment {
  color: var(--main-text-color);
  margin: 0 6px 0 12px;
  overflow-wrap: break-word;
}

.explorer-tab {
  width: var(--explorer-panel-width);
}

.filler {
  flex-grow: 1;
  display: none;
}

.collapsed .device-category-header {
  display: none;
}

.circuit-history-list {
  padding-top: 1px;
  display: flex;
}

.circuit-history-list .circuit-thumbnail-border {
  margin: 1px;
}

.circuit-history-list:first-child {
  margin-left: 3px;
}

.navbar-icon {
  width: 24px;
  padding-top: 3px;
  padding-left: 3px;
  padding-right: 3px;
  text-align: center;
}

.navbar-icon img, .navbar-item-with-icon img {
  width: 24px;
  height: 24px;
}

.navbar-item-with-icon img {
  margin-top: 1px;
  margin-right: 6px;
}

#navbar-item-search img {
  margin-right: 3px;
}

.navbar-item-with-icon {
  padding-left: 12px;
}

.choice-underlined.navbar-icon {
  margin-left: 3px;
  margin-right: 3px;
}

.navbar-icon:hover img, .navbar-item-with-icon:hover img {
  filter: brightness(1.5);
}

.selected.editor-button:hover {
  cursor: default;
  background: unset;
}

.selected.editor-button:hover img {
  filter: unset;
}

.widget-header {
  display: flex;
  height: var(--widget-header-height);
  min-height: var(--widget-header-height);
}

#explorer-tab-workspace-container .widget-icons {
  margin-right: 2px;
}

.widget-icons {
  display: flex;
}

.collapsed .widget-icons {
  display: none;
}

.widget-icon {
  width: 20px;
  height: 20px;
  padding: 2px;
  margin: 3px 3px 3px 2px;
}

.widget-icon:hover img {
  filter: brightness(1.5);
}

.widget-icon:hover {
  cursor: pointer;
  background: var(--light-block-item-hover-gradient);
  border-radius: 6px;
}

.widget-shrink,
.widget-grow,
.widget-open {
  width: 14px;
  height: 14px;
  padding-top: 8px;
  flex-shrink: 0;
  filter: brightness(0.6);
}

.widget-shrink,
.widget-grow {
  margin-left: 0px;
  padding-right: 0px;
}

.widget-open {
  margin-top: 4px;
  margin-left: 0px;
  padding-right: 0px;
}

.widget-grow {
  display: none;
}

.collapsed .widget-grow,
.collapsed .widget-shrink {
  display: none;
}

.widget-shrink:hover,
.widget-grow:hover,
.widget-open:hover {
  filter: brightness(1);
  cursor: pointer;
}

#comments-controls {
  position: sticky;
  top: -1px;
  bottom: 0;
}

#comments-busy-animation-container {
  position: relative;
  top: calc(-1 * var(--busy-animation-height));
}

.editing #comments-controls {
  position: static;
}

#explorer-tab-container-community .input-field {
  display: none;
}

#devices-container .input-field {
  display: none;
}

#comments-controls .input-field {
  margin-top: 0px;
}

.sort-order {
  font-size: 13px;
  padding: 2px 5px 2px 5px;
  margin: 3px 1px 3px 1px;
}

.sort-order:hover {
  color: var(--bright-text-color);
  background: var(--light-block-item-hover-gradient);
  border-radius: 6px;
}

.selected.sort-order:hover {
  cursor: default;
  color: unset;
  background: unset;
}

.header-button {
  font-size: 13px;
  margin-top: 3px;
  margin-bottom: 3px;
  margin-left: 6px;
  margin-right: 6px;
  padding: 1px 8px 0px 8px;
  background-color: var(--button-background-color);
  border: 1px solid var(--button-border-color);
  border-radius: var(--sharp-outer-radius);
}

.header-button:hover,
.modal-action-button:hover {
  background: var(--light-block-item-hover-gradient);
  color: var(--bright-text-color);
  cursor: pointer;
}

.modal-action-button {
  border: none;
  outline: none;
  margin-left: auto;
  margin-right: 0;
  font-size: 15px;
  padding: 4px 11px 4px 11px;
  background-color: var(--button-background-color);
  border-radius: var(--sharp-inner-radius);
}

.modal-action-button:focus {
  background: var(--light-block-item-hover-gradient);
  color: var(--bright-text-color);
}

.modal-action-button-border {
  padding: var(--highlight-thickness);
  background-color: var(--button-border-color);
  border-radius: var(--sharp-outer-radius);
  margin-left: auto;
  margin-right: 0;
}

.modal-action-button-border:focus-within {
  background: var(--main-highlight-gradient);
}

.modal-action-button-border-right {
  margin-left: 16px;
}

.modal-stats-container {
  display: flex;
  margin: 12px 0px 12px 0px;
}

.choice-underlined.selected {
  position: relative;
  cursor: pointer;
}

.choice-underlined:hover {
  cursor: pointer;
}

.choice-underlined.disallowed {
  color: var(--darker-text-color);
  cursor: unset;
}

.selected:not(.parameter)::after {
  background: var(--main-highlight-gradient);
  content: "";
  position: absolute;
  left: 0;
  bottom: 0px;
  height: var(--choice-underline-thickness);
  width: 100%;
}

.navbar-icon.selected::after {
  bottom: -6px;
}

.widget-icons .selected::after {
  bottom: -3px;
}

#editor-parameters-container {
  position: relative;
  display: none;
  margin-top: auto;
  background-color: var(--light-block-background-color);
  height: unset;
  top: 100%;
  transform: translateY(-100%);
  border: 1px solid var(--light-block-border-color);
  border-bottom: none;
  border-left: none;
}

#editor-parameters-container.collapsed {
  margin-top: unset;
  border-top: none;
}

#editor-simulation-actions-container,
#editor-other-actions-container {
  height: unset;
}

#editor-other-actions-container {
  border-right: none;
}

.collapsed #editor-parameters-header,
.collapsed #editor-simulation-actions-header,
.collapsed #editor-other-actions-header {
  display: flex;
}

.collapsed #editor-parameters-actions {
  padding-left: 0;
  padding-bottom: 0;
  padding-top: 0;
  margin-top: auto;
  margin-bottom: auto;
}

.collapsed #editor-parameters-title {
  padding-top: 0px;
  padding-bottom: 0px;
}

#editor-parameters-table {
  background-color: var(--content-block-background-color);
  border-collapse: collapse;
  border-spacing: 0;
}

.collapsed #editor-parameters-table {
  display: none;
}

.parameter,
.component-label {
  border-bottom: 1px solid var(--dark-block-border-color);
  height: calc(var(--parameter-value-height) + 2 * var(--parameter-value-margin));
}

.component-label {
  border-top: 1px solid var(--light-block-border-color);
}

.parameter:hover,
.component-label:hover {
  background: var(--content-block-hover-gradient);
}

.component-label-name {
  color: var(--dark-text-color);
}

.parameter:hover .parameter-name,
.selected .parameter-name,
.component-label:hover .component-label-name {
  color: var(--main-text-color);
}

.parameter-name,
.component-label-name {
  margin-top: calc(var(--parameter-value-margin) + var(--highlight-thickness));
  padding-left: 10px;
  padding-right: 8px;
  white-space: nowrap;
}

.parameter-name {
  position: relative;
  color: var(--dark-text-color);
}

.parameter-value,
.component-label-value {
  padding: 0;
  cursor: text;
}

.parameter:hover {
  cursor: pointer;
}

.selected .parameter-name::after {
  background: var(--main-highlight-gradient);
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 100%;
  width: var(--choice-underline-thickness);
}

.parameter-widget-input {
  max-width: 99px;
  min-width: 76px;
  height: calc(var(--parameter-value-height) - 2 * var(--highlight-thickness));
  font-size: 13px;
  text-overflow: ellipsis;
  color: var(--main-text-color);
  background-color: transparent;
  padding-left: 6px;
  padding-right: 6px;
  border: none;
  border-radius: var(--sharp-inner-radius);
}

.selected .parameter-widget-input {
  background: var(--input-field-background-color);
}

.component-label .parameter-widget-input:focus {
  background: var(--input-field-background-color);
}

.parameter-input-container {
  display: inline-block;
  background-color: transparent;
  padding: var(--highlight-thickness);
  margin-right: calc(var(--parameter-value-margin) - 1px);
  border-radius: var(--sharp-outer-radius);
}

.selected .parameter-input-container {
  background: var(--dark-block-border-color);
}

.parameter-value:hover .parameter-input-container {
  background: var(--hover-border-color);
}

.parameter-value:hover .parameter-input-container:focus-within,
.parameter-input-container:focus-within,
.selected .parameter-input-container:focus-within {
  background: var(--main-highlight-gradient);
}

.parameter-value:hover .parameter-widget-input {
  background: var(--content-block-hover-gradient);
}

.error .parameter-input-container {
  background: var(--input-field-error-border-gradient) !important;
}

.error .parameter-widget-input {
  background: var(--input-field-error-background-gradient) !important;
}

.error.text-area-border {
  background: var(--input-field-error-border-gradient) !important;
}

.error .multi-line-editable {
  background: var(--input-field-error-background-gradient) !important;
}

#component-label-input {
  color: var(--entity-label-text-color);
  font-family: monospace;
}

#component-label-input::placeholder {
  color: var(--darker-text-color);
  font-family: monospace;
}

.entity-label {
  color: var(--entity-label-text-color);
  font-family: monospace;
}

.entity-label.inactive {
  color: var(--entity-label-inactive-text-color);
}

.entity-label:hover {
  cursor: pointer;
}

.entity-label.inactive:hover {
  cursor: default;
}

#editor-container {
  position: absolute;
  box-sizing: border-box;
  top: calc(var(--header-height) + var(--widget-header-height) + 2px);
  right: 0;
  bottom: 0;
}

.embed #editor-container {
  top: 0;
  width: 100%;
}

#editor {
  height: calc(100% - var(--actions-height));
}

#editor-actions-container {
  display: flex;
  flex-direction: row;
  position: absolute;
  box-sizing: border-box;
  left: 0;
  bottom: 0;
  width: 100%;
  height: var(--actions-height);
  min-height: var(--actions-height);
  border-top: 1px solid var(--light-block-border-color);
  overflow-y: unset;
}

#editor-simulation-actions-container,
#editor-simulation-actions,
#editor-other-actions-container,
#editor-other-actions {
  display: flex;
  flex-direction: row;
}

#editor-simulation-actions-title-container,
#editor-other-actions-title-container {
  margin-left: 0;
  cursor: unset;
}

#editor-simulation-actions-title,
#editor-other-actions-title {
  padding-top: 2px;
  padding-left: 16px;
}

.collapsed #editor-parameters-title-container {
  padding-top: 2px;
}

#canvas {
  width: 100%;
  height: 100%;
}

#canvas:focus-visible {
  outline: none;
}

.editor-button {
  width: var(--editor-button-size);
  min-width: var(--editor-button-size);
  height: var(--editor-button-size);
  margin: 2px 5px 2px 5px;
  padding: 1px 1px 1px 1px;
}

.choice-underlined.editor-button {
  width: var(--editor-choice-button-size);
  min-width: var(--editor-choice-button-size);
  height: var(--editor-choice-button-size);
}

.parameter-choices .editor-button.selected::after {
  bottom: -4px;
}

.editor-button:not(.inactive):hover {
  cursor: pointer;
  background: var(--light-block-item-hover-gradient);
  border-radius: 6px;
}

.editor-button img {
  width: var(--editor-button-size);
  height: var(--editor-button-size);
  min-width: var(--editor-button-size);
}

.choice-underlined.editor-button img {
  width: var(--editor-choice-button-size);
  height: var(--editor-choice-button-size);
  min-width: var(--editor-choice-button-size);
}

.editor-button:hover img {
  filter: brightness(1.5);
}

.parameter-choices {
  display: flex;
}

#editor-parameters-actions {
  display: flex;
  padding-bottom: 1px;
}

#editor-parameters-table {
  width: 100%;
}

.flex {
  display: flex;
}

#details-circuit .circuit-title-container {
  margin: 4px;
}

.text-area-border {
  display: flex;
  padding: 1px;
  margin: 2px;
  border-radius: var(--sharp-outer-radius);
}

.prominent.text-area-border {
  background: var(--dark-block-border-color);
  margin: 18px 0px 18px 0px;
}

.text-area-border:not(.rich):focus-within {
  background: var(--main-highlight-gradient);
}

.text-area-border.rich:has(.editing) {
  background: var(--main-highlight-gradient);
}

.text-area-border:hover {
  cursor: unset;
}

#details-circuit textarea {
  font-family: inherit;
  font-size: inherit;
  background: inherit;
  line-height: inherit;
  overflow-y: hidden;
  resize: none;
  border: none;
}

.multi-line-editable {
  flex: 1;
  padding: 8px 4px 8px 8px;
  border-radius: var(--sharp-inner-radius);
}

.multi-line-editable:focus {
  outline: none;
  background: var(--input-field-background-color);
}

.collapsed #details-scroll {
  display: none;
}

#details-circuit .circuit-title {
  font-size: 18px;
}

#details-circuit .circuit-author-container {
  padding-top: 0px;
  padding-bottom: 12px;
}

#details-circuit .circuit-author {
  font-size: 16px;
}

#details-circuit .status-item {
  padding-left: 4px;
  padding-top: 32px;
}

#details-circuit .circuit-ancestor .status-item {
  padding-left: 5px;
  padding-top: 0px;
}

.stats-container:not(.compact .stats-container) {
  transform: translateX(-4px);
}

#details-circuit .stats-container {
  height: 60px;
  margin-top: 10px;
}

#details-circuit .stats-item {
  padding: 10px 8px 10px 8px;
}

#details-circuit .circuit-thumbnail-border:not(.tiny) {
  cursor: unset;
}

textarea::placeholder {
  color: var(--placeholder-text-color);
}

#details-circuit .circuit-info-container {
  padding: 12px 0 12px 12px;
}

.circuit-thumbnail-line {
  display: flex;
}

.circuit-ancestor-container {
  margin-left: 12px;
}

.circuit-ancestor-connection-container {
  display: flex;
}

.circuit-ancestor-connection {
  background: linear-gradient(to top, var(--dark-block-border-color), #5b6);
  width: 1px;
  margin-left: 12px;
}

.circuit-ancestor-label {
  color: var(--dark-text-color);
  padding: 10px 0 10px 10px;
}

.placeholder-emulation:empty:before {
  content: attr(placeholder);
  pointer-events: none;
  color: var(--placeholder-text-color);
  display: block;
}

.own-save-controls-container {
  display: flex;
  margin-left: auto;
}

div.removed {
  display: none;
}

.hidden-form {
  visibility: hidden;
  height: 0;
}

.placeholder-logo {
  z-index: -1;
  position: absolute;
  bottom: 0;
}

.collapsed .placeholder-logo {
  display: none;
}

.placeholder-logo img {
  margin: 20px;
  width: calc(var(--details-panel-width) - 40px);
  filter: saturate(0) contrast(0.7) brightness(0.17);
  pointer-events: none;
  user-select: none;
}

#rich-content-examples {
  color: var(--dark-text-color);
  background: var(--content-block-background-color);
  width: calc(var(--details-panel-width) - 16px);
  border-bottom: 1px solid var(--dark-block-border-color);
  padding: 8px;
}

.collapsed .rich-content-example {
  display: none;
}

.rich-content-example {
  display: flex;
  padding-top: 8px;
}

.rich-content-plain {
  flex: 1;
  padding: 8px;
  border-top-right-radius: var(--sharp-outer-radius);
  border-bottom-right-radius: var(--sharp-outer-radius);
  background: var(--input-field-background-color);
  border: 1px solid var(--dark-block-border-color);
  overflow: hidden;
  overflow-wrap: break-word;
}

.rich-content-plain .highlight {
  color: var(--bright-text-color);
}

.rich-content-plain.smaller-font {
  font-size: 12px;
}

.rich-content-expanded {
  color: var(--main-text-color);
  flex: 0.7;
  padding: 8px;
  border-top-left-radius: var(--sharp-outer-radius);
  border-bottom-left-radius: var(--sharp-outer-radius);
  border: 1px solid var(--dark-block-border-color);
  border-right: none;
  background: var(--content-block-background-color);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.rich-content-example:hover .rich-content-expanded {
  background: var(--content-block-hover-gradient);
}

#rich-content-examples-title-container {
  display: flex;
  margin-left: -4px;
}

#rich-content-examples-title-container:hover {
  cursor: pointer;
}

.rich-content-examples-title {
  padding-top: 1px;
  padding-left: 4px;
}

#rich-content-examples-title-collapsed {
  display: none;
  color: var(--darker-text-color);
}

#rich-content-examples-title-expanded {
  display: block;
}

.collapsed #rich-content-examples-title-collapsed {
  display: block;
}

.collapsed #rich-content-examples-title-expanded {
  display: none;
}