@charset "UTF-8";
body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  overflow: hidden;
}

.paper-container {
  position: absolute;
  overflow: hidden;
  box-sizing: border-box;
  width: calc(100% - 340px);
  height: 100%;
}
.paper-container .joint-paper-scroller {
  overflow: hidden;
}
.paper-container.drop-zone::after {
  position: absolute;
  display: flex;
  pointer-events: none;
  inset: 0px;
  content: "Drop file here";
  text-align: center;
  background: rgba(255, 255, 255, 0.7);
  flex-direction: column;
  justify-content: center;
  color: #333333;
  font-family: "Inter", sans-serif;
  font-size: 1.5em;
}

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-VariableFont_opsz,wght.ttf") format("opentype-variations");
  font-weight: 100 900;
  font-style: normal;
}
/* Material design icons (https://material.io/resources/icons) */
@font-face {
  font-family: "material-icons";
  src: url("../assets/fonts/MaterialIcons-Regular.woff2") format("woff2"), url("../assets/fonts/MaterialIcons-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}
.toolbar-container {
  position: fixed;
  top: 10px;
  left: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.toolbar-container .toolbar-logo {
  padding: 8px 10px 4px;
}
.toolbar-container .toolbar-logo img {
  display: block;
  height: 20px;
  width: auto;
}
.toolbar-container .joint-toolbar.joint-theme-light {
  padding: 8px;
  border-radius: 8px;
  height: unset;
}
.toolbar-container .joint-toolbar.joint-theme-light button {
  height: 30px;
  transition: color 200ms ease-in-out, border-color 200ms ease-in-out, background-color 200ms ease-in-out;
}
.toolbar-container .joint-toolbar.joint-theme-light button:not(:disabled):hover {
  background-color: var(--app-accent-hover) !important;
}
.toolbar-container .joint-toolbar.joint-theme-light [data-type=undo],
.toolbar-container .joint-toolbar.joint-theme-light [data-type=redo] {
  width: 32px;
}
.toolbar-container .joint-toolbar.joint-theme-light [data-group=save-load] button,
.toolbar-container .joint-toolbar.joint-theme-light [data-group=run] button {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--app-border-radius-small);
  border: 1px solid var(--app-border-primary);
  background-color: var(--app-bg-primary);
  color: var(--app-text-primary);
  padding: 6px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
}
.toolbar-container .joint-toolbar.joint-theme-light [data-group=save-load] button:hover,
.toolbar-container .joint-toolbar.joint-theme-light [data-group=run] button:hover {
  border-color: var(--app-border-accent-hover);
  color: var(--app-primary);
}
.toolbar-container .joint-toolbar.joint-theme-light button[data-name=publish] {
  border-width: 0;
  color: white;
  background-color: #131E29;
}
.toolbar-container .joint-toolbar.joint-theme-light button[data-name=publish]:hover {
  background-color: #ED2637 !important;
  color: white;
}
.toolbar-container .joint-toolbar.joint-theme-light [data-type=separator] {
  margin-left: 6px;
}

#app .joint-context-toolbar button {
  font-family: "Inter", sans-serif;
  font-weight: 500;
}
#app .joint-context-toolbar button:hover {
  background-color: var(--app-accent-hover);
}

.paper-container {
  /* Fade-in animation */
  /* Add button (insert node) hover effect */
  /* Tool button hover effects */
}
.paper-container .joint-cell {
  /* Border highlight when a node is selected */
  /* Node background element */
  /* Agent add skill hover effect */
  /* Agent remove skill hover effect */
  /* Note */
}
.paper-container .joint-cell.hover {
  /* Border highlight on hover (when not selected) */
  /* Hide warning effect on hover */
  /* Button hover effects */
}
.paper-container .joint-cell.hover .note-body:not(.selected),
.paper-container .joint-cell.hover .node-body:not(.selected) {
  stroke: var(--app-border-selector);
  stroke-width: 1;
}
.paper-container .joint-cell.hover .joint-warning-effect {
  display: none;
}
.paper-container .joint-cell.hover .add-button-body {
  stroke: var(--app-border-selector);
}
.paper-container .joint-cell.hover .add-button-icon {
  stroke: var(--app-border-selector);
}
.paper-container .joint-cell .selected {
  stroke: var(--app-border-selector);
  stroke-width: 2;
}
.paper-container .joint-cell .note-body,
.paper-container .joint-cell .node-body {
  transition: stroke 150ms ease-in-out;
  -webkit-filter: drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.08));
  filter: drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.08));
}
.paper-container .joint-cell .agent-add-skill-button:hover .agent-add-skill-button-body {
  transition: fill 150ms ease-in-out;
  fill: #EDF2F1;
}
.paper-container .joint-cell .agent-skill-remove:hover {
  transition: opacity 150ms ease-in-out;
  opacity: 0.8;
}
.paper-container .joint-cell.joint-type-note :first-child {
  margin-top: 0px;
}
.paper-container .joint-cell.joint-type-note a {
  color: inherit;
}
.paper-container .fade-in {
  opacity: 1;
  transition: opacity 300ms ease;
}
@starting-style {
  .paper-container .fade-in {
    opacity: 0;
  }
}
.paper-container .add-button-body {
  transition: stroke 150ms ease-in-out;
}
.paper-container .add-button-icon {
  transition: stroke 150ms ease-in-out;
}
.paper-container .joint-tools .joint-tool {
  pointer-events: visible;
}
.paper-container .joint-tools .joint-tool .tool-button-icon {
  transition: fill 150ms ease-in-out;
  fill: #9CA7A9;
}
.paper-container .joint-tools .joint-tool:hover .tool-button-icon {
  fill: #131E29;
}
.paper-container .joint-tools .joint-tool:hover .add-button-body {
  stroke: var(--app-border-selector);
}
.paper-container .joint-tools .joint-tool:hover .add-button-icon {
  stroke: var(--app-border-selector);
}

.inspector-container {
  position: absolute;
  right: 0;
  flex-shrink: 0;
  width: 340px;
  height: 100%;
  box-sizing: border-box;
  overflow-y: auto;
  padding: 10px 8px 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0px 4px 12px 0px #00000014;
  overflow-x: hidden;
  background-color: var(--jj-bg-primary);
}
.inspector-container .joint-inspector {
  position: relative;
}
.inspector-container .joint-inspector .group[data-name=general] {
  padding: 0 0 4px 0;
}
.inspector-container .joint-inspector .group[data-name=general] .group-label {
  display: none;
}
.inspector-container .joint-inspector .group-label {
  margin-left: 4px;
  margin-right: 4px;
  border-radius: 4px !important;
  border: 1px solid var(--app-border-primary) !important;
  background-color: var(--app-bg-tertiary) !important;
  color: #6B7280 !important;
  font-family: "Inter", sans-serif !important;
}
.inspector-container .joint-inspector .group-label:hover {
  background-color: var(--jj-accent-hover) !important;
}
.inspector-container .joint-inspector .field {
  padding-top: 8px !important;
}
.inspector-container .joint-inspector .field.is-focused input, .inspector-container .joint-inspector .field.is-focused .content-editable {
  outline-color: var(--app-primary) !important;
}
.inspector-container .joint-inspector .field:last-of-type {
  margin-bottom: 0 !important;
}
.inspector-container .joint-inspector div[data-property=id] {
  display: none;
}
.inspector-container .joint-inspector label {
  color: #6B7280 !important;
  font-family: "Inter", sans-serif !important;
  margin-bottom: 8px;
  margin-top: 0;
}
.inspector-container .joint-inspector label:has(div)::after {
  display: none;
}
.inspector-container .joint-inspector label .field-hint-container {
  margin-top: 8px;
  display: flex;
  gap: 10px;
  border: none;
  border-radius: var(--jj-border-radius-small);
  background-color: #F2F4F6;
  padding: 11px;
}
.inspector-container .joint-inspector label .field-hint {
  flex: 1;
  font-weight: 400;
  font-size: 12px;
  color: #6B7280;
}
.inspector-container .joint-inspector label .field-hint-icon {
  width: 14px;
  height: 14px;
}
.inspector-container .joint-inspector .list {
  padding: 4px 0 0 0;
}
.inspector-container .joint-inspector .list button {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 600;
}
.inspector-container .joint-inspector .list .list-items {
  margin-top: 8px;
}
.inspector-container .joint-inspector .list .btn-list-add {
  width: auto !important;
  margin: 0px !important;
  border: 1px solid var(--app-border-primary);
  border-radius: var(--app-border-radius-small) !important;
  background-color: var(--app-bg-primary);
  color: var(--app-text-primary);
  padding: 6px 10px;
  transition: color 200ms ease-in-out, border-color 200ms ease-in-out, background-color 200ms ease-in-out;
}
.inspector-container .joint-inspector .list .btn-list-add:hover {
  border-color: var(--app-border-accent-hover) !important;
  color: var(--app-primary);
  background-color: var(--app-accent-hover) !important;
}
.inspector-container .joint-inspector .list .list-item {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row-reverse;
}
.inspector-container .joint-inspector .list .list-item > div.field {
  padding-right: 0;
}
.inspector-container .joint-inspector .list .list-item .btn-list-del {
  margin-top: 32px;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  border: none !important;
  border-radius: 0 !important;
  color: transparent !important;
  width: 24px !important;
  height: 24px !important;
  position: relative;
}
.inspector-container .joint-inspector .list .list-item .btn-list-del:hover {
  background-color: transparent !important;
}
.inspector-container .joint-inspector .list .list-item button::after {
  content: "";
  font-family: "material-icons";
  font-size: 16px;
  font-weight: 300;
  color: #6B7280;
  position: absolute;
  left: calc(50% - 8px);
  top: calc(50% - 8px);
}
.inspector-container .joint-inspector .list .list-item div.field {
  padding-top: 0px !important;
  padding-left: 0px !important;
  margin-bottom: 0px !important;
  flex: 1;
}
.inspector-container .joint-inspector .list .list-item div.field.object-field {
  margin-bottom: 8px !important;
}
.inspector-container .joint-inspector .content-editable {
  word-break: normal;
  min-height: 50px;
  font-family: "Inter", sans-serif !important;
  color: var(--jj-text-primary) !important;
}
.inspector-container .joint-inspector .content-editable:focus {
  outline: revert !important;
}
.inspector-container .joint-inspector .text-field input {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  text-align: left;
  border: 1px solid var(--jj-border-secondary);
  border-radius: var(--jj-border-radius-small);
  box-sizing: border-box;
  width: 100%;
  padding: 8px;
  height: 34px;
  color: var(--jj-text-primary);
}
.inspector-container .joint-inspector .number-field input {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  text-align: left;
  border: 1px solid var(--jj-border-secondary);
  border-radius: var(--jj-border-radius-small);
  box-sizing: border-box;
  width: 100%;
  padding: 8px;
  height: 34px;
  color: var(--jj-text-primary);
}
.inspector-container .joint-inspector .toggle {
  height: 14px;
  width: 36px;
  border-radius: 14px;
}
.inspector-container .joint-inspector .toggle input:checked + span {
  background: #5fa9ee;
}
.inspector-container .joint-inspector .toggle input:checked + span i {
  position: absolute;
  left: 20px;
  background: #3f51b5;
  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 8px 0 rgba(0, 0, 0, 0.12);
}
.inspector-container .joint-inspector .toggle span {
  background: rgba(0, 0, 0, 0.26);
  color: #f6f6f6;
  border-radius: 14px;
  box-shadow: none;
}
.inspector-container .joint-inspector .toggle span i {
  right: 50%;
  width: 50%;
  top: -2px;
  height: 130%;
  left: 0;
  border-radius: 50%;
  cursor: pointer;
  background: #fafafa;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  transition-duration: 0.28s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: left;
}
.inspector-container .inspector-header {
  align-items: center;
  border-bottom: 1px solid var(--app-border-secondary);
  margin-left: 4px;
  margin-right: 4px;
  padding: 12px 0;
  display: flex;
}
.inspector-container .inspector-header.hidden {
  display: none;
}
.inspector-container .inspector-header img.inspector-header-icon {
  width: 26px;
  height: 26px;
  margin-right: 8px;
}
.inspector-container .inspector-header span.inspector-header-text {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 16px;
  text-transform: uppercase;
  padding: 0;
  color: #333333;
}
.inspector-container .inspector-content > div {
  position: static;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.inspector-container .inspector-content .inspector-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.inspector-container .inspector-content .inspector-placeholder .inspector-placeholder-icon {
  width: 38px;
  height: 38px;
  background-image: url(../assets/icons/inspector-empty.svg);
  background-size: contain;
  background-repeat: no-repeat;
}
.inspector-container .inspector-content .inspector-placeholder span {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  color: var(--app-text-tertiary);
}
.inspector-container.inspector-closed {
  padding-top: calc(38.2vh);
}
.inspector-container.inspector-closed .inspector-content {
  transform: translateY(-50%);
}
.inspector-container .joint-select-box-options.joint-select-box:not(.joint-color-palette) {
  width: calc(100% - $field-padding-combined);
}
.inspector-container .joint-select-box-options.joint-select-box:not(.joint-color-palette).list-select-box {
  width: calc(100% - $list-filed-padding-combined);
}

.navigator {
  font-size: 12px;
  line-height: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: var(--jj-navigator-border-radius, 8px);
  background-color: var(--jj-navigator-bg-color, #FFFFFF);
  color: var(--jj-navigator-text-color, #333333);
  font-family: var(--jj-navigator-font-family, "Inter", sans-serif);
  box-shadow: 0px 4px 11px 0px #00000014;
}
.navigator .joint-toolbar {
  border-radius: 8px;
}
.navigator .joint-toolbar .joint-toolbar-group {
  gap: 4px;
}
.navigator .joint-toolbar .joint-widget[data-type=iconButton] {
  background: transparent;
  border: none;
  padding: 6px 8px;
  height: 36px;
  cursor: pointer;
}
.navigator .joint-toolbar .joint-widget[data-type=iconButton]:not(.active):hover {
  background-color: var(--app-accent-hover);
}
.navigator .joint-toolbar .joint-widget[data-type=iconButton].active {
  background-color: var(--app-bg-active);
}
.navigator .joint-toolbar .joint-widget[data-type=zoomSlider] {
  --jj-accent-hover: transparent;
  padding: 6px 4px;
}
.navigator .joint-toolbar .joint-widget[data-type=zoomSlider] input {
  outline-offset: 4px;
}
.navigator .joint-toolbar .joint-widget[data-type=zoomSlider] output {
  min-width: 28px;
}

.joint-navigator {
  max-height: 180px;
  transform: scale(1);
  transform-origin: center bottom;
  transition: 0.3s ease-in-out;
  transition-property: max-height, transform;
}
.current-view:not(.joint-navigator.hidden) {
  opacity: 1;
  transition-delay: 0.3s;
  transition-property: opacity;
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out;
}
.joint-navigator .joint-paper {
  box-shadow: none;
}
.joint-navigator .joint-paper .joint-link .labels {
  display: none;
}
.joint-navigator.hidden {
  max-height: 0;
  transform: scale(0);
}
.joint-navigator.hidden .current-view {
  opacity: 0;
  transition: none;
}

.navigator-container {
  position: absolute;
  left: 10px;
  bottom: 10px;
  border-radius: 8px;
  background-color: var(--jj-bg-primary);
  color: var(--jj-text-secondary);
}
.navigator-container .joint-element .trigger {
  fill: #739EDB;
  stroke: #4A7AC1;
}
.navigator-container .joint-element .action {
  fill: #A3C2E8;
  stroke: #7FAEDB;
}
.navigator-container .joint-element .condition {
  fill: #92E39A;
  stroke: #76D681;
}
.navigator-container .joint-element .agent {
  fill: #F3D19C;
  stroke: #E2B87A;
}
.navigator-container .joint-element .note {
  fill: #E8EDF8;
  stroke: #B6C6F2;
}

.joint-dialog .joint-stencil .group-label {
  font-family: "Inter", sans-serif !important;
  height: 24px !important;
  background-color: unset !important;
}
.joint-dialog .joint-stencil .joint-element:hover [joint-selector=body] {
  stroke: #C3D1DA;
}
.joint-dialog.mock-dialog div.body {
  padding: 16px;
  color: black;
  font-size: 14px;
}
.joint-dialog.mock-dialog div.controls button.control-button {
  margin-left: 16px !important;
  height: 30px;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--app-border-radius-small);
  border: 1px solid #D6E0E7;
  background-color: white;
  color: #304254;
  padding: 6px 8px 6px 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 200ms ease-in-out, border-color 200ms ease-in-out, background-color 200ms ease-in-out;
}
.joint-dialog.mock-dialog div.controls button.control-button:hover {
  border-color: var(--app-border-accent-hover);
  color: var(--app-primary);
  background-color: var(--app-accent-hover);
}

:root {
  --jj-border-radius-small: 4px;
  --jj-border-radius-medium: 6px;
  --jj-border-radius-large: 12px;
  --jj-bg-tooltip: #374151;
  --jj-bg-navigator-path-fill: #8DA9D3;
  --jj-bg-primary: #FFFFFF;
  --jj-bg-secondary: #4B5563;
  --jj-bg-tertiary: #D1D5DB;
  --jj-bg-quaternary: #EDF1F8;
  --jj-border-navigator: #4D6490;
  --jj-border-selector: #137BDD;
  --jj-border-primary: #9CA3AF;
  --jj-border-secondary: #D1D5DB;
  --jj-border-tertiary: #E0E6EA;
  --jj-border-quaternary: #374151;
  --jj-text-context-toolbar: #1F2937;
  --jj-text-primary: #4B5563;
  --jj-text-secondary: #6B7280;
  --jj-text-tertiary: #9CA3AF;
  --jj-text-disabled: #D1D5DB;
  --jj-accent-primary: #E2E9F4;
  --jj-accent-secondary: #D9E2F2;
  --jj-accent-tertiary: #D2DDE5;
  --jj-accent-hover: #EDF1F8;
}

@font-face {
  font-family: "Open Sans";
  font-stretch: 75% 125%;
  font-style: normal;
  font-weight: 125 950;
  src: url(../assets/fonts/OpenSans.ttf);
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scaleY(0);
  }
  to {
    opacity: 1;
    transform: scaleY(1);
  }
}
.joint-select-box.joint-color-palette.joint-theme-light .select-box-selection {
  padding: 4px;
  box-sizing: border-box;
  border-radius: var(--jj-border-radius-small);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.joint-select-box.joint-color-palette.joint-theme-light .select-box-selection::after {
  content: none;
}
.joint-select-box.joint-color-palette.joint-theme-light .select-box-selection .select-box-option-content {
  width: 23px;
  height: 23px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--jj-border-secondary);
}
.joint-select-box.joint-color-palette.joint-theme-light .select-box-selection .select-box-option-content img {
  margin: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.joint-select-box-options.joint-select-box.joint-color-palette.joint-theme-light.rendered {
  background-color: var(--jj-bg-primary);
  border-radius: var(--jj-border-radius-small);
  width: 144px;
  box-shadow: 0px 4px 4px 0px #00000040;
}
.joint-select-box-options.joint-select-box.joint-color-palette.joint-theme-light.rendered .select-box-option-content.select-box-option {
  border-radius: 50%;
  border: solid 1px var(--jj-border-secondary);
}
.joint-select-box-options.joint-select-box.joint-color-palette.joint-theme-light.rendered .select-box-option-content.select-box-option img.select-box-option-icon {
  width: 100%;
  height: 100%;
  margin: 0;
  vertical-align: unset !important;
}

.joint-context-toolbar.joint-theme-light.joint-vertical {
  min-width: 116px;
  box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.06);
  border-radius: var(--jj-border-radius-medium);
  padding: 2px;
  border: 1px solid var(--jj-accent-primary);
  background: var(--jj-bg-primary);
  animation: fadeIn 0.2s ease-in-out;
}
.joint-context-toolbar.joint-theme-light.joint-vertical .tools {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  border-radius: inherit;
  background: var(--jj-bg-primary);
  cursor: default;
  flex-grow: 1;
}
.joint-context-toolbar.joint-theme-light.joint-vertical .tools .tool {
  display: flex;
  height: 28px;
  width: 100%;
  padding: 0px 12px;
  align-items: center;
  color: var(--jj-text-context-menu);
  text-align: center;
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  border: none;
  background: var(--jj-bg-primary);
}
.joint-context-toolbar.joint-theme-light.joint-vertical .tools .tool:first-of-type {
  border-top-left-radius: var(--jj-border-radius-small);
  border-top-right-radius: var(--jj-border-radius-small);
}
.joint-context-toolbar.joint-theme-light.joint-vertical .tools .tool:last-of-type {
  border-bottom-left-radius: var(--jj-border-radius-small);
  border-bottom-right-radius: var(--jj-border-radius-small);
}
.joint-context-toolbar.joint-theme-light.joint-vertical .tools .tool:not(:disabled):hover {
  background: var(--jj-accent-primary);
}
.joint-context-toolbar.joint-theme-light.joint-vertical .tools .tool[disabled] {
  color: var(--jj-text-disabled);
  cursor: inherit;
}

.joint-free-transform.joint-theme-light {
  border: 1px solid var(--jj-border-selector);
}
.joint-free-transform.joint-theme-light .resize {
  border-radius: 1px !important;
  width: 6px;
  height: 6px;
}
.joint-free-transform.joint-theme-light .resize.nw, .joint-free-transform.joint-theme-light .resize.ne, .joint-free-transform.joint-theme-light .resize.se, .joint-free-transform.joint-theme-light .resize.sw {
  background: var(--jj-border-selector);
}

.joint-halo.joint-theme-light .handle.nw, .joint-halo.joint-theme-light .handle.sw, .joint-halo.joint-theme-light .handle.w {
  transform: translate(-5px, 0);
}
.joint-halo.joint-theme-light .handle.ne, .joint-halo.joint-theme-light .handle.se, .joint-halo.joint-theme-light .handle.e {
  transform: translate(5px, 0);
}
.joint-halo.joint-theme-light .handle.remove {
  background-image: url(../assets/icons/halo/icon-remove.svg);
}
.joint-halo.joint-theme-light .handle.unlink {
  background-image: url(../assets/icons/halo/icon-unlink.svg);
}
.joint-halo.joint-theme-light .handle.rotate {
  background-image: url(../assets/icons/halo/icon-rotate.svg);
}
.joint-halo.joint-theme-light .handle.fork {
  background-image: url(../assets/icons/halo/icon-fork.svg);
}
.joint-halo.joint-theme-light .handle.link {
  background-image: url(../assets/icons/halo/icon-link.svg);
}
.joint-halo.joint-theme-light .handle.clone {
  background-image: url(../assets/icons/halo/icon-clone.svg);
}

.joint-inspector.joint-theme-light .group {
  padding: 0;
  max-height: 1000px;
  transition: max-height 0.3s ease-in;
}
.joint-inspector.joint-theme-light .group .group-label::before {
  top: 0 !important;
  position: static !important;
  margin-right: 8px !important;
  margin-left: 4px !important;
  width: auto !important;
  height: auto !important;
}
.joint-inspector.joint-theme-light .group.closed {
  max-height: 32px;
  transition: max-height 0.3s ease-out;
}
.joint-inspector.joint-theme-light .group.closed .field:not(.color-palette-field) {
  display: block;
}
.joint-inspector.joint-theme-light .group.closed .group-label::before {
  transform: rotate(-90deg);
  filter: invert(0.5);
}
.joint-inspector.joint-theme-light .group .group-label {
  border-radius: var(--jj-border-radius-small);
  background-color: var(--jj-accent-primary);
  color: var(--jj-text-primary);
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  padding: 6px 5px 6px 5px;
  height: 32px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  transition: background-color 0.2s ease-in-out;
}
.joint-inspector.joint-theme-light .group .group-label::before {
  width: 10px !important;
  height: 16px !important;
  transition: transform 0.3s ease;
  content: url(../assets/icons/inspector/icon-opened.svg) !important;
}
.joint-inspector.joint-theme-light .group .group-label:hover {
  background-color: var(--jj-accent-hover);
}
.joint-inspector.joint-theme-light .group .field {
  box-sizing: border-box;
  padding: 10px 4px 0 4px;
  background-color: var(--jj-bg-primary);
}
.joint-inspector.joint-theme-light .group .field label {
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  text-align: left;
}
.joint-inspector.joint-theme-light .group .field label.with-output {
  margin-right: 8px;
}
.joint-inspector.joint-theme-light .group .field.range-field input {
  color: var(--jj-bg-secondary);
  --thumb-height: 0.875em;
  --track-height: 0.125em;
  --track-color: var(--jj-bg-tertiary);
  --brightness-hover: 130%;
  --brightness-down: 80%;
  --clip-edges: 0.125em;
  /* === range commons === */
  /* === WebKit specific styles === */
  /* === Firefox specific styles === */
}
.joint-inspector.joint-theme-light .group .field.range-field input {
  position: relative;
  background: none;
  overflow: hidden;
  padding: 6px 0;
}
.joint-inspector.joint-theme-light .group .field.range-field input:active {
  cursor: grabbing;
}
.joint-inspector.joint-theme-light .group .field.range-field input:disabled {
  filter: grayscale(1);
  opacity: 0.3;
  cursor: not-allowed;
}
.joint-inspector.joint-theme-light .group .field.range-field input, .joint-inspector.joint-theme-light .group .field.range-field input::-webkit-slider-runnable-track, .joint-inspector.joint-theme-light .group .field.range-field input::-webkit-slider-thumb {
  -webkit-appearance: none;
  transition: all ease 100ms;
  height: var(--thumb-height);
}
.joint-inspector.joint-theme-light .group .field.range-field input::-webkit-slider-runnable-track, .joint-inspector.joint-theme-light .group .field.range-field input::-webkit-slider-thumb {
  position: relative;
}
.joint-inspector.joint-theme-light .group .field.range-field input::-webkit-slider-thumb {
  --thumb-radius: calc((var(--thumb-height) * 0.5) - 1px);
  --clip-top: calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.5px);
  --clip-bottom: calc(var(--thumb-height) - var(--clip-top));
  --clip-further: calc(100% + 1px);
  --box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0 100vmax currentColor;
  width: var(--thumb-width, var(--thumb-height));
  background: linear-gradient(currentColor 0 0) scroll no-repeat left center/50% calc(var(--track-height) + 1px);
  background-color: currentColor;
  box-shadow: var(--box-fill);
  border-radius: var(--thumb-width, var(--thumb-height));
  filter: brightness(100%);
  clip-path: polygon(100% -1px, var(--clip-edges) -1px, 0 var(--clip-top), -100vmax var(--clip-top), -100vmax var(--clip-bottom), 0 var(--clip-bottom), var(--clip-edges) 100%, var(--clip-further) var(--clip-further));
}
.joint-inspector.joint-theme-light .group .field.range-field input:hover::-webkit-slider-thumb {
  filter: brightness(var(--brightness-hover));
  cursor: grab;
}
.joint-inspector.joint-theme-light .group .field.range-field input:active::-webkit-slider-thumb {
  filter: brightness(var(--brightness-down));
  cursor: grabbing;
}
.joint-inspector.joint-theme-light .group .field.range-field input::-webkit-slider-runnable-track {
  background: linear-gradient(var(--track-color) 0 0) scroll no-repeat center/100% calc(var(--track-height) + 1px);
}
.joint-inspector.joint-theme-light .group .field.range-field input:disabled::-webkit-slider-thumb {
  cursor: not-allowed;
}
.joint-inspector.joint-theme-light .group .field.range-field input, .joint-inspector.joint-theme-light .group .field.range-field input::-moz-range-track, .joint-inspector.joint-theme-light .group .field.range-field input::-moz-range-thumb {
  appearance: none;
  transition: all ease 100ms;
  height: var(--thumb-height);
}
.joint-inspector.joint-theme-light .group .field.range-field input::-moz-range-track, .joint-inspector.joint-theme-light .group .field.range-field input::-moz-range-thumb, .joint-inspector.joint-theme-light .group .field.range-field input::-moz-range-progress {
  background: #fff0;
}
.joint-inspector.joint-theme-light .group .field.range-field input::-moz-range-thumb {
  background: currentColor;
  border: 0;
  width: var(--thumb-width, var(--thumb-height));
  border-radius: var(--thumb-width, var(--thumb-height));
  cursor: grab;
}
.joint-inspector.joint-theme-light .group .field.range-field input:active::-moz-range-thumb {
  cursor: grabbing;
}
.joint-inspector.joint-theme-light .group .field.range-field input::-moz-range-track {
  width: 100%;
  background: var(--track-color);
}
.joint-inspector.joint-theme-light .group .field.range-field input::-moz-range-progress {
  appearance: none;
  background: currentColor;
  transition-delay: 30ms;
}
.joint-inspector.joint-theme-light .group .field.range-field input::-moz-range-track, .joint-inspector.joint-theme-light .group .field.range-field input::-moz-range-progress {
  height: calc(var(--track-height) + 1px);
  border-radius: var(--track-height);
}
.joint-inspector.joint-theme-light .group .field.range-field input::-moz-range-thumb, .joint-inspector.joint-theme-light .group .field.range-field input::-moz-range-progress {
  filter: brightness(100%);
}
.joint-inspector.joint-theme-light .group .field.range-field input:hover::-moz-range-thumb, .joint-inspector.joint-theme-light .group .field.range-field input:hover::-moz-range-progress {
  filter: brightness(var(--brightness-hover));
}
.joint-inspector.joint-theme-light .group .field.range-field input:active::-moz-range-thumb, .joint-inspector.joint-theme-light .group .field.range-field input:active::-moz-range-progress {
  filter: brightness(var(--brightness-down));
}
.joint-inspector.joint-theme-light .group .field.range-field input:disabled::-moz-range-thumb {
  cursor: not-allowed;
}
.joint-inspector.joint-theme-light .group .field.range-field output,
.joint-inspector.joint-theme-light .group .field.range-field span.units {
  color: var(--jj-text-secondary);
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  text-align: left;
}
.joint-inspector.joint-theme-light .group .field.content-editable-field .content-editable {
  color: var(--jj-text-secondary);
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  text-align: left;
  border: 1px solid var(--jj-border-secondary);
  border-radius: var(--jj-border-radius-small);
  box-sizing: border-box;
  width: 100%;
  padding: 8px;
}
.joint-inspector.joint-theme-light .group .field:last-of-type {
  margin-bottom: 12px;
}
.joint-inspector.joint-theme-light .group button.btn-list-add,
.joint-inspector.joint-theme-light .group button.btn-list-del {
  border: 1px solid var(--jj-border-primary);
  border-radius: 50%;
  background: var(--jj-bg-primary);
  color: var(--jj-text-primary);
  width: 28px;
  height: 28px;
  box-sizing: border-box;
}
.joint-inspector.joint-theme-light .group button.btn-list-add:hover,
.joint-inspector.joint-theme-light .group button.btn-list-del:hover {
  background: var(--jj-accent-primary);
  border-color: var(--jj-accent-primary);
}

.joint-lightbox.joint-theme-light .bg {
  background-color: rgba(0, 0, 0, 0.7);
}
.joint-lightbox.joint-theme-light .fg {
  background-color: #F6F6F6 !important;
}
.joint-lightbox.joint-theme-light .controls button {
  line-height: 17.7px;
  height: auto;
  box-sizing: content-box;
  border-radius: var(--jj-border-radius-small);
  padding: 8px;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--jj-text-primary);
  background-color: var(--jj-bg-primary);
  border: none;
}

.joint-navigator.joint-theme-light {
  border: none;
  padding: 0 !important;
}
.current-view:not(.joint-navigator.joint-theme-light.hidden) {
  border: 2px solid var(--jj-border-navigator);
  border-radius: var(--jj-border-radius-small);
}

.joint-popup.joint-theme-light {
  box-shadow: 0px 4px 12px 0px #00000014;
  border-radius: var(--jj-border-radius-small);
  background-color: var(--jj-bg-primary);
  border: 1px solid var(--jj-border-secondary);
  animation: fadeIn 0.2s ease-in-out;
}

.joint-select-box.joint-theme-light {
  box-sizing: border-box;
  border-radius: var(--jj-border-radius-small);
  border: 1px solid var(--jj-border-secondary);
  color: var(--jj-text-primary);
  font-family: "Open Sans", sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  text-align: left;
  transition: border-color 0.2s ease-in-out;
}
.joint-select-box.joint-theme-light[data-type=select-box]:hover {
  border-color: var(--jj-border-primary);
}
.joint-select-box.joint-theme-light .select-box-option:hover {
  background-color: var(--jj-accent-hover);
}
.joint-select-box.joint-theme-light .select-box-selection::after {
  width: 10px;
  height: 6px;
  background-image: url("../assets/icons/inspector/icon-arrow-down.svg");
  background-size: 10px 6px;
}

.joint-select-box-options.joint-select-box.joint-theme-light:not(.joint-color-palette) {
  box-sizing: border-box;
  background-color: var(--jj-bg-primary);
  color: var(--jj-text-primary);
  font-family: "Open Sans", sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  border-radius: var(--jj-border-radius-small);
  border: 1px solid var(--jj-border-secondary);
  transform: translate(-1px, -1px);
  box-shadow: 0px 4px 12px 0px #00000014;
}
.joint-select-box-options.joint-select-box.joint-theme-light:not(.joint-color-palette) .select-box-option.selected::after {
  width: 10px;
  height: 7px;
  background-image: url("../assets/icons/select-box/icon-selected-option.svg");
  background-size: 10px 7px;
}
.joint-select-box-options.joint-select-box.joint-theme-light:not(.joint-color-palette) > div.select-box-option-content:first-of-type {
  border-radius: var(--jj-border-radius-small) var(--jj-border-radius-small) 0 0;
}
.joint-select-box-options.joint-select-box.joint-theme-light:not(.joint-color-palette) > div.select-box-option-content:nth-last-child(2) {
  border-radius: 0 0 var(--jj-border-radius-small) var(--jj-border-radius-small);
}

.joint-select-button-group.joint-theme-light .select-button-group-button {
  border-radius: var(--jj-border-radius-small);
  border: 1px solid var(--jj-border-secondary);
  box-sizing: border-box;
  margin: 0 4px;
}
.joint-select-button-group.joint-theme-light .select-button-group-button.selected {
  background: var(--jj-accent-primary);
  border-color: var(--jj-accent-primary);
}

.joint-selection.joint-theme-light {
  background-color: var(--jj-accent-primary);
  border: 1px solid var(--jj-border-selector);
}
.joint-selection.joint-theme-light .selection-wrapper {
  border: 1px solid var(--jj-border-selector);
}
.joint-selection.joint-theme-light .handle.rotate {
  background-image: url(../assets/icons/selection/icon-rotate.svg);
}
.joint-selection.joint-theme-light .handle.resize {
  background-image: url(../assets/icons/selection/icon-resize.svg);
}
.joint-selection.joint-theme-light .handle.resize.se {
  cursor: se-resize;
}
.joint-selection.joint-theme-light .handle.remove {
  background-image: url(../assets/icons/selection/icon-remove.svg);
}
.joint-selection.joint-theme-light .joint-selection-frame {
  border: 1px dashed var(--jj-border-selector) !important;
}

.snapline.horizontal {
  border-bottom: 1px dashed var(--jj-border-selector);
}

.snapline.vertical {
  border-right: 1px dashed var(--jj-border-selector);
}

.joint-stencil.joint-theme-light {
  position: relative;
  box-sizing: border-box;
  height: 100%;
  padding: 10px 0 8px 8px;
  display: flex;
  flex-direction: column;
  flex-shrink: 1;
  gap: 8px;
}
.joint-stencil.joint-theme-light.stencil-filtered.not-found::after {
  top: 100px !important;
  left: 0;
  color: var(--jj-text-secondary);
}
.joint-stencil.joint-theme-light .groups-toggle {
  display: flex;
  width: 100%;
  height: 24px;
  align-items: center;
  gap: 4px;
}
.joint-stencil.joint-theme-light .groups-toggle .group-label {
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 16px;
  text-transform: uppercase;
  margin-left: 10px;
  padding: 0;
  order: 3;
  color: var(--jj-text-secondary);
  cursor: initial;
}
.joint-stencil.joint-theme-light .groups-toggle button.btn {
  position: relative;
  background: transparent;
  color: transparent;
  height: 20px;
  width: 20px;
  box-sizing: content-box;
  border: 1px solid var(--jj-border-secondary);
  border-radius: var(--jj-border-radius-small);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease-in-out;
}
.joint-stencil.joint-theme-light .groups-toggle button.btn::before {
  display: block;
  content: "";
  background-size: 8px 12px;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  height: 100%;
  width: 100%;
}
.joint-stencil.joint-theme-light .groups-toggle button.btn:hover {
  background: var(--jj-accent-hover);
}
.joint-stencil.joint-theme-light .groups-toggle button.btn.btn-expand {
  order: 1;
}
.joint-stencil.joint-theme-light .groups-toggle button.btn.btn-expand::before {
  background-image: url(../assets/icons/stencil/icon-expand.svg);
}
.joint-stencil.joint-theme-light .groups-toggle button.btn.btn-collapse {
  order: 2;
}
.joint-stencil.joint-theme-light .groups-toggle button.btn.btn-collapse::before {
  background-image: url(../assets/icons/stencil/icon-collapse.svg);
}
.joint-stencil.joint-theme-light .search-wrap {
  height: 30px;
  padding-right: 8px;
}
.joint-stencil.joint-theme-light .search-wrap input {
  color: var(--jj-text-tertiary);
  font-family: "Open Sans", sans-serif;
  font-size: 13.333px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  height: 100%;
  padding: 7.5px 7px 7px 31.5px;
  border-radius: var(--jj-border-radius-small);
  border: 1px solid var(--jj-border-secondary);
  transition: border-color 0.2s ease-in-out;
}
.joint-stencil.joint-theme-light .search-wrap input:hover {
  border-color: var(--jj-border-primary);
}
.joint-stencil.joint-theme-light .search-wrap input::placeholder {
  color: var(--jj-text-tertiary);
  font-family: "Open Sans", sans-serif;
  font-size: 13.333px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-transform: capitalize;
}
.joint-stencil.joint-theme-light .search-wrap input::-webkit-search-cancel-button {
  background: green;
}
.joint-stencil.joint-theme-light .search-wrap::after {
  content: url(../assets/icons/stencil/icon-search.svg);
  width: 15.5px;
  height: 15.5px;
  display: block;
  top: -24px;
  left: 8px;
  position: relative;
  flex-shrink: 0;
  z-index: 1;
}
.joint-stencil.joint-theme-light .content {
  top: 50px !important;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: calc(100% - $top-offset);
}
.joint-stencil.joint-theme-light .content .group {
  padding: 0 8px;
  flex-shrink: 0;
  max-height: 1000px;
  transition: max-height 0.3s ease-in;
}
.joint-stencil.joint-theme-light .content .group .joint-paper {
  width: 100% !important;
}
.joint-stencil.joint-theme-light .content .group-label::before {
  flex-shrink: 0;
  display: block;
  margin-right: 8px;
  margin-left: 4px;
}
.joint-stencil.joint-theme-light .content .group.closed {
  max-height: 32px;
  transition: max-height 0.3s ease-out;
}
.joint-stencil.joint-theme-light .content .group.closed .group-label::before {
  transform: rotate(-90deg);
  filter: invert(0.5);
}
.joint-stencil.joint-theme-light .content .group-label {
  border-radius: var(--jj-border-radius-small);
  background-color: var(--jj-accent-primary);
  color: var(--jj-text-primary);
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  padding: 6px 5px 6px 5px;
  height: 32px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  transition: background-color 0.2s ease-in-out;
}
.joint-stencil.joint-theme-light .content .group-label::before {
  width: 10px !important;
  height: 16px !important;
  transition: transform 0.3s ease;
  content: url(../assets/icons/stencil/icon-opened.svg);
}
.joint-stencil.joint-theme-light .content .group-label:hover {
  background-color: var(--jj-accent-hover);
}
.joint-stencil.joint-theme-light .joint-viewport > g {
  pointer-events: bounding-box;
}

.joint-toolbar.joint-theme-light {
  background-color: var(--jj-bg-primary);
  box-shadow: 0px 3.8580212593px 7.7160425186px 0px #0000001A;
  box-sizing: border-box;
  width: 100%;
  height: 55px;
  padding: 0 8px;
}

.joint-tooltip.joint-theme-light {
  background: var(--jj-bg-tooltip);
  border: none;
  border-radius: var(--jj-border-radius-medium);
  box-shadow: 0px 4px 14px 0px #0000000F;
  color: var(--jj-accent-tertiary);
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  font-size: 11px;
  line-height: 15px;
  --arrow-mask-size: 4px;
  --arrow-mask-margin: calc(var(--arrow-mask-size) * -1);
  --arrow-size: 6px;
  --arrow-margin: calc(var(--arrow-size) * -1);
}
.joint-tooltip.joint-theme-light .tooltip-arrow-mask {
  border-width: var(--arrow-mask-size);
}
.joint-tooltip.joint-theme-light.top .tooltip-arrow-mask, .joint-tooltip.joint-theme-light.bottom .tooltip-arrow-mask {
  margin-left: var(--arrow-mask-margin);
}
.joint-tooltip.joint-theme-light.left .tooltip-arrow-mask, .joint-tooltip.joint-theme-light.right .tooltip-arrow-mask {
  margin-top: var(--arrow-mask-margin);
}
.joint-tooltip.joint-theme-light.top .tooltip-arrow-mask {
  border-bottom-color: var(--jj-bg-tooltip);
}
.joint-tooltip.joint-theme-light.right .tooltip-arrow-mask {
  border-left-color: var(--jj-bg-tooltip);
}
.joint-tooltip.joint-theme-light.bottom .tooltip-arrow-mask {
  border-top-color: var(--jj-bg-tooltip);
}
.joint-tooltip.joint-theme-light.left .tooltip-arrow-mask {
  border-right-color: var(--jj-bg-tooltip);
}
.joint-tooltip.joint-theme-light .tooltip-arrow {
  border-width: var(--arrow-size);
}
.joint-tooltip.joint-theme-light.top .tooltip-arrow, .joint-tooltip.joint-theme-light.bottom .tooltip-arrow {
  margin-left: var(--arrow-margin);
}
.joint-tooltip.joint-theme-light.left .tooltip-arrow, .joint-tooltip.joint-theme-light.right .tooltip-arrow {
  margin-top: var(--arrow-margin);
}
.joint-tooltip.joint-theme-light.top .tooltip-arrow {
  border-bottom-color: var(--jj-bg-tooltip);
}
.joint-tooltip.joint-theme-light.right .tooltip-arrow {
  border-left-color: var(--jj-bg-tooltip);
}
.joint-tooltip.joint-theme-light.bottom .tooltip-arrow {
  border-top-color: var(--jj-bg-tooltip);
}
.joint-tooltip.joint-theme-light.left .tooltip-arrow {
  border-right-color: var(--jj-bg-tooltip);
}

.joint-widget.joint-theme-light {
  border-radius: var(--jj-border-radius-small);
  transition: background-color 0.2s ease-in-out;
}
.joint-widget.joint-theme-light:hover:not([data-type=separator]):not(:disabled) {
  background-color: var(--jj-accent-hover);
}
.joint-widget.joint-theme-light[data-type=separator] {
  width: 0px;
  border-color: var(--jj-border-tertiary);
}
.joint-widget.joint-theme-light[data-name=undo], .joint-widget.joint-theme-light[data-name=redo] {
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.joint-widget.joint-theme-light[data-name=undo]::before {
  content: url("../assets/icons/widgets/icon-undo.svg");
}
.joint-widget.joint-theme-light[data-name=redo]::before {
  content: url("../assets/icons/widgets/icon-redo.svg");
}
.joint-widget.joint-theme-light input[type=range] {
  margin-right: 8px;
  color: var(--jj-bg-secondary);
  --thumb-height: 0.875em;
  --track-height: 0.125em;
  --track-color: var(--jj-bg-tertiary);
  --brightness-hover: 130%;
  --brightness-down: 80%;
  --clip-edges: 0.125em;
  /* === range commons === */
  /* === WebKit specific styles === */
  /* === Firefox specific styles === */
}
.joint-widget.joint-theme-light input[type=range] {
  position: relative;
  background: none;
  overflow: hidden;
  padding: 6px 0;
}
.joint-widget.joint-theme-light input[type=range]:active {
  cursor: grabbing;
}
.joint-widget.joint-theme-light input[type=range]:disabled {
  filter: grayscale(1);
  opacity: 0.3;
  cursor: not-allowed;
}
.joint-widget.joint-theme-light input[type=range], .joint-widget.joint-theme-light input[type=range]::-webkit-slider-runnable-track, .joint-widget.joint-theme-light input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  transition: all ease 100ms;
  height: var(--thumb-height);
}
.joint-widget.joint-theme-light input[type=range]::-webkit-slider-runnable-track, .joint-widget.joint-theme-light input[type=range]::-webkit-slider-thumb {
  position: relative;
}
.joint-widget.joint-theme-light input[type=range]::-webkit-slider-thumb {
  --thumb-radius: calc((var(--thumb-height) * 0.5) - 1px);
  --clip-top: calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.5px);
  --clip-bottom: calc(var(--thumb-height) - var(--clip-top));
  --clip-further: calc(100% + 1px);
  --box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0 100vmax currentColor;
  width: var(--thumb-width, var(--thumb-height));
  background: linear-gradient(currentColor 0 0) scroll no-repeat left center/50% calc(var(--track-height) + 1px);
  background-color: currentColor;
  box-shadow: var(--box-fill);
  border-radius: var(--thumb-width, var(--thumb-height));
  filter: brightness(100%);
  clip-path: polygon(100% -1px, var(--clip-edges) -1px, 0 var(--clip-top), -100vmax var(--clip-top), -100vmax var(--clip-bottom), 0 var(--clip-bottom), var(--clip-edges) 100%, var(--clip-further) var(--clip-further));
}
.joint-widget.joint-theme-light input[type=range]:hover::-webkit-slider-thumb {
  filter: brightness(var(--brightness-hover));
  cursor: grab;
}
.joint-widget.joint-theme-light input[type=range]:active::-webkit-slider-thumb {
  filter: brightness(var(--brightness-down));
  cursor: grabbing;
}
.joint-widget.joint-theme-light input[type=range]::-webkit-slider-runnable-track {
  background: linear-gradient(var(--track-color) 0 0) scroll no-repeat center/100% calc(var(--track-height) + 1px);
}
.joint-widget.joint-theme-light input[type=range]:disabled::-webkit-slider-thumb {
  cursor: not-allowed;
}
.joint-widget.joint-theme-light input[type=range], .joint-widget.joint-theme-light input[type=range]::-moz-range-track, .joint-widget.joint-theme-light input[type=range]::-moz-range-thumb {
  appearance: none;
  transition: all ease 100ms;
  height: var(--thumb-height);
}
.joint-widget.joint-theme-light input[type=range]::-moz-range-track, .joint-widget.joint-theme-light input[type=range]::-moz-range-thumb, .joint-widget.joint-theme-light input[type=range]::-moz-range-progress {
  background: #fff0;
}
.joint-widget.joint-theme-light input[type=range]::-moz-range-thumb {
  background: currentColor;
  border: 0;
  width: var(--thumb-width, var(--thumb-height));
  border-radius: var(--thumb-width, var(--thumb-height));
  cursor: grab;
}
.joint-widget.joint-theme-light input[type=range]:active::-moz-range-thumb {
  cursor: grabbing;
}
.joint-widget.joint-theme-light input[type=range]::-moz-range-track {
  width: 100%;
  background: var(--track-color);
}
.joint-widget.joint-theme-light input[type=range]::-moz-range-progress {
  appearance: none;
  background: currentColor;
  transition-delay: 30ms;
}
.joint-widget.joint-theme-light input[type=range]::-moz-range-track, .joint-widget.joint-theme-light input[type=range]::-moz-range-progress {
  height: calc(var(--track-height) + 1px);
  border-radius: var(--track-height);
}
.joint-widget.joint-theme-light input[type=range]::-moz-range-thumb, .joint-widget.joint-theme-light input[type=range]::-moz-range-progress {
  filter: brightness(100%);
}
.joint-widget.joint-theme-light input[type=range]:hover::-moz-range-thumb, .joint-widget.joint-theme-light input[type=range]:hover::-moz-range-progress {
  filter: brightness(var(--brightness-hover));
}
.joint-widget.joint-theme-light input[type=range]:active::-moz-range-thumb, .joint-widget.joint-theme-light input[type=range]:active::-moz-range-progress {
  filter: brightness(var(--brightness-down));
}
.joint-widget.joint-theme-light input[type=range]:disabled::-moz-range-thumb {
  cursor: not-allowed;
}
.joint-widget.joint-theme-light[data-type=checkbox] {
  width: 20px;
  height: 20px;
  position: relative;
  border-radius: var(--jj-border-radius-small);
  margin: 0;
}
.joint-widget.joint-theme-light[data-type=checkbox] input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.joint-widget.joint-theme-light[data-type=checkbox] input[type=checkbox]:after {
  cursor: pointer;
  line-height: 1.5em;
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background: var(--jj-bg-quaternary);
  border: 1px solid var(--jj-border-secondary);
  border-radius: var(--jj-border-radius-small);
}
.joint-widget.joint-theme-light[data-type=checkbox] input[type=checkbox]:checked:after {
  content: url("../assets/icons/widgets/icon-checkbox-tick.svg");
  text-align: center;
}
.joint-widget.joint-theme-light[data-type=colorPicker] {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background: none;
  width: 16px;
  height: 16px;
  cursor: pointer;
  padding: 0;
  border: 1px solid var(--jj-border-quaternary);
  border-radius: var(--jj-border-radius-small);
  overflow: hidden;
  width: 24px;
  height: 24px;
}
.joint-widget.joint-theme-light:disabled {
  filter: opacity(0.5);
  cursor: initial;
}

::-webkit-color-swatch-wrapper {
  padding: 0;
}

::-webkit-color-swatch {
  border: 0;
  border-radius: 0;
}

::-moz-color-swatch,
::-moz-focus-inner {
  border: 0;
}

::-moz-focus-inner {
  padding: 0;
}

.joint-dialog.joint-theme-light {
  font-family: "Inter", sans-serif;
}
.joint-dialog.joint-theme-light .fg {
  border: 1px solid #E4E5E7;
  background-color: #FFFFFF;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.16);
}
.joint-dialog.joint-theme-light .titlebar {
  color: #333333;
  font-weight: 600;
  text-shadow: none;
  background-color: #FFFFFF;
  padding-top: 16px;
  padding-left: 16px;
  padding-right: 25px;
}
.joint-dialog.joint-theme-light.inlined .fg {
  position: relative;
  top: auto;
  left: auto;
  z-index: auto;
  margin: 0;
}

.joint-dialog.joint-theme-light[data-type=alert] .fg {
  border-color: #C00D0F;
}

.joint-dialog.joint-theme-light[data-type=alert] .titlebar {
  color: #deebfb;
  background-color: #C00D0F;
}

.joint-dialog.joint-theme-light[data-type=warning] .fg {
  border-color: #daac0f;
}

.joint-dialog.joint-theme-light[data-type=warning] .titlebar {
  color: #deebfb;
  background-color: #daac0f;
}

.joint-dialog.joint-theme-light[data-type=success] .fg {
  border-color: #5fa9ee;
}

.joint-dialog.joint-theme-light[data-type=success] .titlebar {
  color: #deebfb;
  background-color: #5fa9ee;
}

.joint-dialog.joint-theme-light .btn-close {
  color: #6a6c8a;
  font-size: 16px;
  padding: 16px;
  font-weight: 500;
  background-color: transparent;
  border: none;
}

.joint-dialog.joint-theme-light[data-type=alert] .btn-close,
.joint-dialog.joint-theme-light[data-type=warning] .btn-close,
.joint-dialog.joint-theme-light[data-type=success] .btn-close {
  color: #f6f6f6;
}

.joint-dialog.joint-theme-light .body {
  color: #55627b;
  padding: 10px;
}

.joint-dialog.joint-theme-light .controls .control-button {
  border: none;
  color: #fefefe;
  background-color: #5faaee;
  border-radius: 8px;
  padding: 0 15px;
  font-size: 10pt;
  font-weight: bold;
}

.joint-dialog.joint-theme-light .controls .control-button:hover {
  background-color: #4C88BE;
}

:root {
  --app-primary: #ED2637;
  --app-bg-primary: #FFFFFF;
  --app-bg-secondary: #131E29;
  --app-bg-tertiary: #EAF0F4;
  --app-bg-quaternary: #F2F4F6;
  --app-bg-tooltip: #131E29;
  --app-bg-active: #FCEBED;
  --app-border-primary: #C1CFDA;
  --app-border-secondary: #D6E0E7;
  --app-border-accent: #F4A0A7;
  --app-border-accent-hover: #ED2637;
  --app-border-selector: #ED2637;
  --app-border-navigator: #ED2637;
  --app-text-primary: #131E29;
  --app-text-secondary: #394755;
  --app-text-tertiary: #94A2AC;
  --app-border-radius-medium: 8px;
  --app-border-radius-small: 6px;
  --app-accent-hover: #FEF1F2;
  /** Overriding variables from JointJS theme **/
  --jj-bg-primary: var(--app-bg-primary);
  --jj-bg-secondary: var(--app-bg-secondary);
  --jj-bg-tertiary: var(--app-bg-tertiary);
  --jj-bg-quaternary: var(--app-bg-quaternary);
  --jj-bg-tooltip: var(--app-bg-tooltip);
  --jj-border-primary: var(--app-border-primary);
  --jj-border-secondary: var(--app-border-secondary);
  --jj-border-accent: var(--app-border-accent);
  --jj-border-accent-hover: var(--app-border-accent-hover);
  --jj-border-selector: var(--app-border-selector);
  --jj-border-navigator: var(--app-border-navigator);
  --jj-text-primary: var(--app-text-primary);
  --jj-text-secondary: var(--app-text-secondary);
  --jj-text-tertiary: var(--app-text-tertiary);
  --jj-border-radius-medium: var(--app-border-radius-medium);
  --jj-border-radius-small: var(--app-border-radius-small);
  --jj-accent-hover: var(--app-accent-hover);
}