.workflow-designer .sqd-workspace-canvas {
  width: 100% !important;
  height: 100% !important; }

.workflow-designer.readonly .sqd-toolbox {
  opacity: 0 !important;
  pointer-events: none; }

.workflow-designer .sqd-toolbox {
  left: 0;
  top: 0;
  width: 10%;
  min-width: 250px;
  height: 100%;
  border-radius: 0 !important;
  background: white;
  box-shadow: none !important; }
  .workflow-designer .sqd-toolbox .sqd-toolbox-body {
    width: 100%;
    height: 100% !important;
    display: flex;
    flex-direction: column;
    border-radius: 0;
    overflow: auto;
    padding: 0;
    overflow: auto; }
    .workflow-designer .sqd-toolbox .sqd-toolbox-body .sqd-toolbox-filter {
      position: sticky;
      position: relative;
      top: unset;
      margin: 0;
      padding: 3em;
      z-index: 100;
      margin-bottom: -1em; }
      .workflow-designer .sqd-toolbox .sqd-toolbox-body .sqd-toolbox-filter input {
        padding: 0.5em 0;
        border: 0;
        background: 0;
        border-radius: 0;
        font-size: 12px;
        opacity: 0.5; }
        .workflow-designer .sqd-toolbox .sqd-toolbox-body .sqd-toolbox-filter input:focus::placeholder {
          opacity: 0.4; }
    .workflow-designer .sqd-toolbox .sqd-toolbox-body .sqd-scrollbox {
      height: auto !important;
      flex-grow: 1; }
      .workflow-designer .sqd-toolbox .sqd-toolbox-body .sqd-scrollbox .sqd-scrollbox-body {
        top: 0 !important;
        padding: 0 3em !important;
        height: 100% !important;
        overflow: auto; }
  .workflow-designer .sqd-toolbox .sqd-toolbox-header {
    display: none; }
  .workflow-designer .sqd-toolbox .sqd-toolbox-group-title {
    font-size: 1.25em;
    background: none;
    padding: 0;
    font-weight: bold;
    text-align: left;
    margin: 0 0 1em 0; }
    .workflow-designer .sqd-toolbox .sqd-toolbox-group-title:not(:first-child) {
      margin-top: 2em; }
  .workflow-designer .sqd-toolbox .sqd-toolbox-item {
    display: flex;
    width: 100%;
    padding: 0.5em;
    align-items: center;
    gap: 1.25em;
    border-radius: 4px;
    position: relative;
    line-height: 1em;
    padding: 1em;
    box-shadow: rgba(0, 0, 0, 0.05) 0 0 2px;
    background: none;
    filter: none;
    border-color: rgba(0, 0, 0, 0.2);
    transition: all ease-in-out 0.3s; }
    .workflow-designer .sqd-toolbox .sqd-toolbox-item:hover {
      border-color: rgba(0, 0, 0, 0.4); }
    .workflow-designer .sqd-toolbox .sqd-toolbox-item .sqd-toolbox-item-icon {
      position: relative;
      left: 0;
      top: 0;
      line-height: 0;
      flex-grow: 0;
      width: 15px;
      height: 15px;
      margin: 0;
      height: 100%; }
      .workflow-designer .sqd-toolbox .sqd-toolbox-item .sqd-toolbox-item-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain; }
    .workflow-designer .sqd-toolbox .sqd-toolbox-item.sqd-type-Switch img {
      transform: rotate(180deg); }
    .workflow-designer .sqd-toolbox .sqd-toolbox-item .sqd-toolbox-item-text {
      position: relative;
      left: auto;
      top: auto;
      padding: 0;
      flex-grow: 1; }

.workflow-designer .sqd-control-bar {
  left: auto;
  right: 3em;
  top: 3em;
  bottom: auto;
  border-radius: 0;
  margin: 0;
  background: none !important;
  box-shadow: none !important;
  padding: 0 !important; }

.workflow-designer .sqd-large-task-circle {
  stroke-width: 0 !important; }

.workflow-designer .sqd-step-large-task .sqd-large-task-name-text {
  font-weight: bold;
  font-size: 15px;
  dominant-baseline: mathematical; }

.workflow-designer .sqd-root-start-stop-start circle,
.workflow-designer .sqd-root-start-stop-stop circle {
  fill: #292F9A; }

.workflow-designer[status="Started"] .sqd-root-start-stop-start circle, .workflow-designer[status="Running"] .sqd-root-start-stop-start circle {
  animation: fadeInOut 1s ease-in-out infinite;
  fill: #e18419; }

.workflow-designer[status="Success"] .sqd-root-start-stop-stop circle {
  fill: #269526; }

.workflow-designer[status="Error"] .sqd-root-start-stop-stop circle {
  fill: red; }

@keyframes fadeInOut {
  0%, 100% {
    opacity: 1; }
  50% {
    opacity: 0.5; } }