:root {
  --tool-width: 215px;
}
/* .sqd-designer */
.sqd-designer {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
  }
  
  .sqd-designer,
  .sqd-drag,
  .sqd-context-menu {
    font-size: 13px;
    line-height: 1em;
  }
  
  .sqd-hidden {
    display: none !important;
  }
  
  .sqd-disabled {
    opacity: 0.6;
  }
  
  /* .sqd-toolbox */
  .sqd-toolbox,
  .sqd-toolbox-filter {
    font-size: 11px;
    line-height: 1.2em;
  }
  
  .sqd-toolbox {
    position: absolute;
    top: 3px;
    left: -10px;
    z-index: 20;
    box-sizing: border-box;
    width: var(--tool-width);
    -webkit-user-select: none;
    user-select: none;
  }
  
  .sqd-toolbox-header {
    position: relative;
    padding: 15px 10px;
    cursor: pointer;
  }
  
  .sqd-toolbox-header-title {
    display: block;
    font-size: 1.2em;
    line-height: 1em;
    font-weight: bold;
  }
  
  .sqd-toolbox-toggle-icon {
    position: absolute;
    top: 50%;
    right: 10px;
    width: 16px;
    height: 16px;
    margin: -8px 0 0;
  }
  
  .sqd-toolbox-header:hover .sqd-toolbox-toggle-icon {
    opacity: 0.6;
  }
  
  .sqd-scrollbox {
    position: relative;
    overflow: hidden;
    min-height: 85vh;
    margin-top: 1rem;
  }
  
  .sqd-scrollbox-body {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
  
  .sqd-toolbox-filter {
    display: block;
    box-sizing: border-box;
    padding: 6px 8px;
    outline: none;
    width: 100%;
    /* margin: 0 10px 10px; */
    box-sizing: border-box;
  }
  
  .sqd-toolbox-group-title {
    text-align: center;
    padding: 5px 0;
    width: 100%;
    margin-bottom: 1rem;
    /* margin: 0 10px 10px; */
  }
  
  .sqd-toolbox-item {
    position: relative;
    box-sizing: border-box;
    /* margin: 0 10px 10px; */
    width: 94%;
    cursor: move;
    margin: 0rem .5rem .5rem .5rem;
  }
  
  .sqd-toolbox-item-icon {
    position: absolute;
    top: 50%;
    left: 5px;
    margin-top: -10px;
    width: 20px;
    height: 20px;
  }
  
  .sqd-toolbox-item-icon-image {
    width: 100%;
    height: 100%;
  }
  
  .sqd-toolbox-item-text {
    position: relative;
    display: block;
    padding: 10px 10px 10px 30px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  
  .sqd-drag {
    position: absolute;
    z-index: 9999999;
    pointer-events: none;
  }
  
  /* .sqd-control-bar */
  .sqd-control-bar {
    position: absolute;
    /* bottom: 10px;
    left: 10px; */
    top: 0px;
    left: 16vw;
    z-index: 20;
    padding: 8px 0 8px 8px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: .5rem;
  }
  .sqd-control-bar-text {
    font-size: 18px;
    padding-right: 2rem;
    min-width: 300px;
  }
  .sqd-control-bar-button {
    display: inline-block;
    width: 32px;
    height: 32px;
    /* margin-right: 8px; */
    cursor: pointer;
    box-sizing: border-box;
  }
  
  .sqd-control-bar-button-icon {
    width: 24px;
    height: 24px;
    margin: 3px 0 0 3px;
  }
  
  .sqd-control-bar-button.sqd-disabled .sqd-control-bar-button-icon {
    opacity: 0.2;
  }
  
  /* .sqd-smart-editor */
  .sqd-smart-editor-toggle {
    position: absolute;
    top: 0;
    z-index: 29;
    width: 36px;
    height: 64px;
    border-bottom-left-radius: 10px;
    cursor: pointer;
  }
  
  .sqd-smart-editor-toggle-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
  }
  
  .sqd-smart-editor-toggle:hover .sqd-smart-editor-toggle-icon {
    opacity: 0.6;
  }
  
  .sqd-smart-editor {
    z-index: 30;
  }
  
  .sqd-layout-desktop .sqd-smart-editor {
    position: relative;
    width: var(--tool-width);
  }
  
  .sqd-layout-desktop .sqd-smart-editor-toggle {
    right: var(--tool-width); 
  }
  
  .sqd-layout-desktop .sqd-smart-editor-toggle.sqd-collapsed {
    right: 0;
  }
  
  .sqd-layout-mobile .sqd-smart-editor {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 41px;
  }
  
  .sqd-layout-mobile .sqd-smart-editor-toggle {
    left: 5px;
  }
  
  .sqd-layout-mobile .sqd-smart-editor-toggle.sqd-collapsed {
    left: auto;
    right: 0;
  }
  
  /* .sqd-context-menu */
  .sqd-context-menu {
    position: absolute;
    z-index: 2000000000;
    overflow: hidden;
    padding: 5px;
  }
  
  .sqd-context-menu-group,
  .sqd-context-menu-item {
    width: var(--tool-width);
    padding: 8px 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  
  .sqd-context-menu-group {
    font-size: 11px;
    line-height: 1em;
  }
  
  .sqd-context-menu-item {
    cursor: pointer;
    transition: background 70ms;
  }
  
  /* .sqd-workspace */
  .sqd-workspace {
    flex: 1;
    position: relative;
    display: block;
    -webkit-user-select: none;
    user-select: none;
  }
  
  .sqd-workspace-canvas {
    position: absolute;
    top: 0;
    left: 0;
    cursor: move;
  }
  
  .sqd-label-text {
    text-anchor: middle;
    dominant-baseline: central;
  }
  
  .sqd-placeholder .sqd-placeholder-rect {
    transition: fill 100ms;
  }
  
  .sqd-step-task-text {
    text-anchor: left;
    dominant-baseline: central;
  }

  .sqd-theme-light .sqd-path-bar {
    background: #fff;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.15);
}
.sqd-theme-light .sqd-path-bar-item {
    color: #000;
}
.sqd-theme-light .sqd-path-bar-item:hover {
    border-color: #939393;
}
.sqd-theme-light .sqd-path-bar-separator {
    color: #d0d0d0;
}
.sqd-theme-light .sqd-path-bar-reset-button {
    border: 1px solid transparent;
}
.sqd-theme-light .sqd-path-bar-reset-button:hover {
    border-color: #d3d3d3;
}
.sqd-theme-light .sqd-path-bar-reset-button .sqd-icon-path {
    fill: #000;
}

.sqd-root-minimal-empty {
    stroke-width: 2;
    stroke-dasharray: 3;
    stroke: #2c18df;
}

.sqd-theme-light .sqd-grid-dot {
    fill: #ccc;
}

.sqd-theme-light .sqd-cross-grid-path {
    stroke: #e3e3e3;
    stroke-width: 1;
}

.sqd-theme-light .sqd-clickable-placeholder-rect {
    fill: #d9d9d9;
}
.sqd-theme-light .sqd-clickable-placeholder:hover .sqd-clickable-placeholder-rect {
    fill: #bfbfbf;
}
.sqd-theme-light .sqd-clickable-placeholder-icon {
    fill: #000;
}

.sqd-theme-light .sqd-region-toggle-rect {
    fill: #e8e8e8;
}
.sqd-theme-light .sqd-region-toggle-icon {
    fill: #818181;
}

.sqd-theme-light .sqd-step-icon .sqd-step-icon-circle {
    fill: #fff;
    stroke: #c3c3c3;
    stroke-width: 1;
    filter: drop-shadow(0 1.5px 1.5px rgba(0, 0, 0, 0.15));
}
.sqd-theme-light .sqd-step-icon .sqd-step-icon-circle.sqd-selected {
    stroke: #ed4800;
    stroke-width: 2;
}
.sqd-theme-light .sqd-step-icon > .sqd-input {
    fill: #fff;
    stroke-width: 2;
    stroke: #000;
}
.sqd-theme-light .sqd-step-icon > .sqd-output {
    fill: #000;
    stroke-width: 0;
}

.sqd-theme-light .sqd-step-large-task .sqd-large-task-rect {
    fill: #fff;
    stroke: #c3c3c3;
    stroke-width: 1;
    filter: drop-shadow(0 1.5px 1.5px rgba(0, 0, 0, 0.15));
}
.sqd-theme-light .sqd-step-large-task .sqd-large-task-rect.sqd-selected {
    stroke: #ed4800;
    stroke-width: 2;
}
.sqd-theme-light .sqd-step-large-task .sqd-large-task-name-text {
    fill: #000;
}
.sqd-theme-light .sqd-step-large-task .sqd-large-task-description-text {
    fill: #8b8c91;
}
.sqd-theme-light .sqd-step-large-task .sqd-large-task-circle {
    stroke: #9da3ae;
    stroke-width: 1;
}
.sqd-theme-light .sqd-step-large-task .sqd-input {
    fill: #fff;
    stroke-width: 2;
    stroke: #000;
}
.sqd-theme-light .sqd-step-large-task .sqd-output {
    fill: #000;
    stroke-width: 0;
}

.sqd-theme-light .sqd-step-folder .sqd-step-folder-rect {
    fill: #fad876;
    stroke: #caae5c;
    stroke-width: 1;
    filter: drop-shadow(0 1.5px 1.5px rgba(0, 0, 0, 0.15));
}
.sqd-theme-light .sqd-step-folder .sqd-step-folder-rect.sqd-selected {
    stroke: #ed4800;
    stroke-width: 2;
}
.sqd-theme-light .sqd-step-folder .sqd-step-folder-tab-rect {
    fill: #7c631b;
}
.sqd-theme-light .sqd-step-folder .sqd-step-folder-empty-icon {
    fill: #7c631b;
}
.sqd-theme-light .sqd-step-folder .sqd-step-folder-button-text {
    fill: #7c631b;
}
.sqd-theme-light .sqd-step-folder .sqd-step-folder-button-rect {
    stroke-width: 1;
    stroke: #7c631b;
}
.sqd-theme-light .sqd-step-folder .sqd-step-folder-button-rect:hover {
    stroke: #caae5c;
}
.sqd-theme-light .sqd-step-folder .sqd-step-folder-button-icon-path {
    fill: #7c631b;
}
.sqd-theme-light .sqd-step-folder .sqd-input {
    fill: #fff;
    stroke-width: 2;
    stroke: #000;
}
.sqd-theme-light .sqd-step-folder .sqd-output {
    fill: #000;
    stroke-width: 0;
}

.sqd-theme-light .sqd-counter-badge-text {
    fill: #fff;
}
.sqd-theme-light .sqd-counter-badge-rect {
    fill: #9b9b9b;
}

.sqd-theme-light .sqd-icon-badge-circle {
    fill: #c3c3c3;
}
.sqd-theme-light .sqd-icon-badge-icon {
    fill: #434343;
}

.sqd-theme-light .sqd-icon-badge-type-loading .sqd-icon-badge-circle {
    fill: #9b9b9b;
}
.sqd-theme-light .sqd-icon-badge-type-loading .sqd-icon-badge-icon {
    fill: #fff;
}
.sqd-theme-light .sqd-icon-badge-type-loaded .sqd-icon-badge-circle {
    fill: #269526;
}
.sqd-theme-light .sqd-icon-badge-type-loaded .sqd-icon-badge-icon {
    fill: #fff;
}
.sqd-theme-light .sqd-icon-badge-type-error .sqd-icon-badge-circle {
    fill: #d93a3a;
}
.sqd-theme-light .sqd-icon-badge-type-error .sqd-icon-badge-icon {
    fill: #fff;
}