@yoobic/yobi 8.3.0-48 → 8.3.0-51

package/dist/collection/feature-operate/mission/mission-details/mission-details.js

@@ -1,6 +1,6 @@
 import { dateFormat, fromToday, getAsyncExtraData, getCssColor, getMissionPublicationDate, getSession, getTodoCampaignPhotos, isDateAfter, isDateSame, isIonic, isPresent, isToday, isWeb, pipes, translate, translateMulti } from '@shared/utils';
 import { Component, Element, Event, h, Host, Prop, State, Watch } from '@stencil/core';
-import { cloneDeep } from 'lodash-es';
+import { cloneDeep, compact } from 'lodash-es';
 import { getMissionAddress, getMissionDueDate, getMissionPriority, getMissionTags, mapMissionToCardInboxEntry } from '../../../feature-operate/mission/helpers/missions-helpers';
 import { getAppContext } from '../../../utils/helpers/common-helpers';
 const Menu = ({ icon, text, extraClass, callback }, children, utils) => {
@@ -424,24 +424,26 @@ export class YooMissionDetailsComponent {
       h("slot", { name: "end" }));
   }
   renderActionPlanDetails() {
+    const menuContent = compact([
+      this.renderValidatedReason('REASON', 'reason', this.mission.originalUnvalidatedReason),
+      this.renderOriginalValidatedBy(),
+      this.renderLinkedTo(),
+      this.renderPriority(),
+      this.renderCategory(),
+      this.renderPublicationDate(),
+      this.renderDueDate(),
+      this.renderValidUntilDate(),
+      this.renderUser(translate('YOOBICFROMAPERSON'), 'author', this.mission.creator, true),
+      this.renderUser(translate('ASSIGNEDTO'), 'assigned', this.mission.owner, true),
+      this.renderLocation(),
+      this.renderAisle(),
+      this.renderDuration(),
+      this.renderOriginalMission()
+    ]);
     return (h("div", { class: 'mission-detail ' + (this.isMobile ? '' : 'web') },
       h("div", { class: "mission-content" },
         h("yoo-mission-heading", { animated: this.animated, mission: this.mission }),
-        h("ul", { class: { menu: true, pdf: this.isPdf } },
-          this.renderValidatedReason('REASON', 'reason', this.mission.originalUnvalidatedReason),
-          this.renderOriginalValidatedBy(),
-          this.renderLinkedTo(),
-          this.renderPriority(),
-          this.renderCategory(),
-          this.renderPublicationDate(),
-          this.renderDueDate(),
-          this.renderValidUntilDate(),
-          this.renderUser(translate('YOOBICFROMAPERSON'), 'author', this.mission.creator, true),
-          this.renderUser(translate('ASSIGNEDTO'), 'assigned', this.mission.owner, true),
-          this.renderLocation(),
-          this.renderAisle(),
-          this.renderDuration(),
-          this.renderOriginalMission()),
+        !!menuContent.length && h("ul", { class: { menu: true, pdf: this.isPdf } }, menuContent),
         h("slot", null))));
   }
   renderMissionDetails() {
@@ -452,34 +454,36 @@ export class YooMissionDetailsComponent {
     }
     const assigneeTitle = translate(this.mission.isAssigned ? 'ASSIGNEDTO' : 'STARTEDBY');
     const buttons = this.getFooterButtons();
+    const menuContent = compact([
+      this.renderValidatedReason('REASON', 'reason', this.mission.originalUnvalidatedReason),
+      this.renderOriginalValidatedBy(),
+      this.renderGeoFence(),
+      this.renderPriority(),
+      this.renderCategory(),
+      this.renderPublicationDate(),
+      this.renderDueDate(),
+      this.renderValidUntilDate(),
+      ((_c = this.mission) === null || _c === void 0 ? void 0 : _c.type) === 'service' && this.renderUser(translate('YOOBICFROMAPERSON'), 'author', this.mission.creator),
+      this.renderUser(assigneeTitle, 'assigned', assignee),
+      this.renderLocation(),
+      this.renderAisle(),
+      this.renderDescription(),
+      this.renderContent(),
+      this.renderDuration(),
+      this.renderContact(),
+      this.renderNotes(),
+      this.renderInfo(),
+      this.renderServiceData(),
+      this.renderWorkflowHistory(),
+      this.renderTodos(),
+      this.renderAudience()
+    ]);
     return (h("div", { class: { 'mission-detail': true, web: !this.isMobile } },
       h("yoo-ion-content", { class: "bg-light no-scrollbar", scrollEvents: true },
         h("div", null,
           h("div", { class: "mission-content" },
             h("yoo-mission-heading", { animated: this.animated, mission: this.mission, progress: this.progress && this.progress.value ? this.progress.value : null }),
-            h("ul", { class: { menu: true, pdf: this.isPdf } },
-              this.renderValidatedReason('REASON', 'reason', this.mission.originalUnvalidatedReason),
-              this.renderOriginalValidatedBy(),
-              this.renderGeoFence(),
-              this.renderPriority(),
-              this.renderCategory(),
-              this.renderPublicationDate(),
-              this.renderDueDate(),
-              this.renderValidUntilDate(),
-              ((_c = this.mission) === null || _c === void 0 ? void 0 : _c.type) === 'service' && this.renderUser(translate('YOOBICFROMAPERSON'), 'author', this.mission.creator),
-              this.renderUser(assigneeTitle, 'assigned', assignee),
-              this.renderLocation(),
-              this.renderAisle(),
-              this.renderDescription(),
-              this.renderContent(),
-              this.renderDuration(),
-              this.renderContact(),
-              this.renderNotes(),
-              this.renderInfo(),
-              this.renderServiceData(),
-              this.renderWorkflowHistory(),
-              this.renderTodos(),
-              this.renderAudience()),
+            !!menuContent.length && h("ul", { class: { menu: true, pdf: this.isPdf } }, menuContent),
             h("yoo-mission-score", { charts: this.charts, header: "PREVIOUSSCORE", networkScore: this.networkScore }),
             h("slot", null)),
           h("slot", { name: "end" }),
@@ -513,6 +517,22 @@ export class YooMissionDetailsComponent {
     var _a, _b, _c, _d;
     const excludedTabs = ['dueDate', 'category'];
     const tags = getMissionTags(this.mission).filter((tag) => !excludedTabs.includes(tag._id));
+    const menuContent = compact([
+      this.renderValidatedReason(this.mission.validated === false ? 'REASON' : 'COMMENTNOUN', 'reason', this.mission.unvalidatedReason),
+      this.renderPriority(),
+      this.renderCategory(),
+      this.renderDueDate(),
+      this.renderFinishedBy(),
+      this.renderValidatedBy(),
+      this.renderLocation(),
+      this.renderAisle(),
+      this.renderOriginalMission(),
+      this.renderVisitType(),
+      this.renderVisitDescription(),
+      this.renderWorkflowHistory(),
+      this.renderAudit(),
+      this.renderTodos()
+    ]);
     return (h("div", { class: { 'mission-results': true, pdf: this.isPdf, ...getAppContext(this.host) } },
       this.isPdf && (h("div", { class: "header-photo-container" },
         ((_b = (_a = this.mission) === null || _a === void 0 ? void 0 : _a.description) === null || _b === void 0 ? void 0 : _b.pdfHeaderPhoto) && h("yoo-img", { class: "header-photo", instant: this.instant, src: this.mission.description.pdfHeaderPhoto }),
@@ -522,21 +542,7 @@ export class YooMissionDetailsComponent {
           h("div", { class: "tag-container" }, this.showInformation && (tags === null || tags === void 0 ? void 0 : tags.map((tag) => h("yoo-tag", { color: tag.color, customColor: tag.customColor, innerHTML: tag.title }))))))),
       h("div", { class: "content" },
         !this.isPdf && this.showInformation && h("yoo-mission-heading", { class: "mission-results", isPdf: this.isPdf, mission: this.mission }),
-        h("ul", { class: { menu: true, pdf: this.isPdf } },
-          this.renderValidatedReason(this.mission.validated === false ? 'REASON' : 'COMMENTNOUN', 'reason', this.mission.unvalidatedReason),
-          this.renderPriority(),
-          this.renderCategory(),
-          this.renderDueDate(),
-          this.renderFinishedBy(),
-          this.renderValidatedBy(),
-          this.renderLocation(),
-          this.renderAisle(),
-          this.renderOriginalMission(),
-          this.renderVisitType(),
-          this.renderVisitDescription(),
-          this.renderWorkflowHistory(),
-          this.renderAudit(),
-          this.renderTodos()),
+        !!menuContent.length && h("ul", { class: { menu: true, pdf: this.isPdf } }, menuContent),
         h("slot", null),
         this.showScore && h("yoo-mission-score", { class: "mission-detail", isPdf: this.isPdf, charts: this.charts, networkScore: this.networkScore })),
       h("slot", { name: "end" })));

package/dist/collection/feature-platform/admin/draw-flow/draw-flow.css

@@ -202,9 +202,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 /* spacing for padding, margin, etc... */
 /* shadow */
 :host {
-  --border-size: 0.25rem;
-  --dfBackgroundColor: rgba(255, 255, 255, 1);
-  --dfBackgroundSize: 24px;
+  --border-size: 0.125rem;
+  --dfBackgroundColor: var(--stable-alt-20);
+  --dfBackgroundSize: 0.75rem;
   --dfBackgroundImage: radial-gradient(rgba(191, 191, 191, 1) 1px, transparent 1px);
   --dfNodeType: flex;
   --dfNodeTypeFloat: none;
@@ -216,6 +216,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   --dfNodeMinHeight: 40px;
   --dfNodeMinWidth: 0;
   --dfNodePaddingTop: 0;
+  --dfNodePaddingLeft:var(--spacing-08);
+  --dfNodePaddingRight:var(--spacing-08);
   --dfNodePaddingBottom: 0rem;
   --dfNodeBoxShadowHL: 0px;
   --dfNodeBoxShadowVL: 2px;
@@ -246,9 +248,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   --dfInputBorderSize: var(--border-size);
   --dfInputBorderColor: rgba(255, 255, 255, 1);
   --dfInputBorderRadius: 50px;
-  --dfInputLeft: -1.875rem;
-  --dfInputHeight: 20px;
-  --dfInputWidth: 20px;
+  --dfInputLeft: -26px;
+  --dfInputHeight: 11px;
+  --dfInputWidth: 11px;
   --dfInputHoverBackgroundColor: rgba(255, 255, 255, 1);
   --dfInputHoverBorderSize: var(--border-size);
   --dfInputHoverBorderColor: rgba(0, 0, 0, 1);
@@ -257,9 +259,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   --dfOutputBorderSize: var(--border-size);
   --dfOutputBorderColor: rgba(90, 48, 244, 1);
   --dfOutputBorderRadius: 50px;
-  --dfOutputRight: -0.1875rem;
-  --dfOutputHeight: 20px;
-  --dfOutputWidth: 20px;
+  --dfOutputRight: -7px;
+  --dfOutputHeight: 11px;
+  --dfOutputWidth: 11px;
   --dfOutputHoverBackgroundColor: #ffffff;
   --dfOutputHoverBorderSize: var(--border-size);
   --dfOutputHoverBorderColor: #000000;
@@ -321,7 +323,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   background: var(--light, #ffffff);
 }
 :host .drawflow .drawflow-node:hover {
-  cursor: move;
+  cursor: grab;
 }
 :host .drawflow .drawflow-node .inputs,
 :host .drawflow .drawflow-node .outputs {
@@ -422,12 +424,14 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host .drawflow-container .drawflow .drawflow-node {
   display: var(--dfNodeType);
-  align-items: flex-start;
+  align-items: center;
   width: auto;
   min-width: var(--dfNodeMinWidth);
   min-height: var(--dfNodeMinHeight);
   padding-top: var(--dfNodePaddingTop);
+  padding-right: var(--dfNodePaddingRight);
   padding-bottom: var(--dfNodePaddingBottom);
+  padding-left: var(--dfNodePaddingLeft);
   color: var(--dfNodeTextColor);
   background: var(--dfNodeBackgroundColor);
   border: var(--dfNodeBorderSize) solid var(--dfNodeBorderColor);
@@ -522,13 +526,21 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   justify-content: flex-end;
   padding: 1rem;
 }
-:host .drawflow-container .toolbar yoo-icon,
 :host .drawflow-container .toolbar .spacing {
   margin-left: 1rem;
 }
-:host .drawflow-container .toolbar yoo-icon[name=side-menu-collapse],
-:host .drawflow-container .toolbar yoo-icon[name=side-menu-expand] {
-  transform: rotate(90deg);
+:host .drawflow-container .toolbar .flex {
+  flex: 1;
+}
+:host .drawflow-container .toolbar .button-container {
+  display: flex;
+  padding: var(--spacing-08, 0.5rem);
+  column-gap: var(--spacing-08, 0.5rem);
+  background: var(--dark-60, rgba(0, 0, 0, 0.6));
+  border-radius: var(--spacing-04, 0.25rem);
+}
+:host .drawflow-container .toolbar .button-container yoo-icon {
+  cursor: pointer;
 }
 :host .drawflow-container .outer-container {
   flex: 1;
@@ -538,231 +550,224 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   background-image: var(--dfBackgroundImage);
   background-size: var(--dfBackgroundSize) var(--dfBackgroundSize);
 }
-:host .drawflow-container .outer-container .drawflow .parent-node .drawflow-delete {
+:host .drawflow-container .outer-container.header-container .drawflow .parent-node .drawflow-delete {
   display: flex;
   align-items: center;
   justify-content: center;
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node {
   border-color: var(--accent, #276ef1);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.multimedia, :host .drawflow-container .outer-container .drawflow .drawflow-node.learn, :host .drawflow-container .outer-container .drawflow .drawflow-node.uiactions, :host .drawflow-container .outer-container .drawflow .drawflow-node.action {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.multimedia, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.learn, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.uiactions, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.action {
   border-color: var(--info, #d84c96);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.multimedia.selected1, :host .drawflow-container .outer-container .drawflow .drawflow-node.learn.selected1, :host .drawflow-container .outer-container .drawflow .drawflow-node.uiactions.selected1, :host .drawflow-container .outer-container .drawflow .drawflow-node.action.selected1 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.multimedia.selected1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.learn.selected1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.uiactions.selected1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.action.selected1 {
   background: var(--info, #d84c96);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.multimedia.hover1, :host .drawflow-container .outer-container .drawflow .drawflow-node.learn.hover1, :host .drawflow-container .outer-container .drawflow .drawflow-node.uiactions.hover1, :host .drawflow-container .outer-container .drawflow .drawflow-node.action.hover1 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.multimedia.hover1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.learn.hover1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.uiactions.hover1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.action.hover1 {
   background: var(--info-20, rgba(216, 76, 150, 0.2));
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.multimedia .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.learn .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.uiactions .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.action .input {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.multimedia .input, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.learn .input, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.uiactions .input, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.action .input {
   background: var(--info, #d84c96);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.multimedia .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.learn .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.uiactions .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.action .output {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.multimedia .output, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.learn .output, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.uiactions .output, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.action .output {
   border-color: var(--info, #d84c96);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.select, :host .drawflow-container .outer-container .drawflow .drawflow-node.events, :host .drawflow-container .outer-container .drawflow .drawflow-node.dataevents, :host .drawflow-container .outer-container .drawflow .drawflow-node.trigger {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.select, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.events, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.dataevents, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.trigger {
   border-color: var(--accent, #276ef1);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.select.selected1, :host .drawflow-container .outer-container .drawflow .drawflow-node.events.selected1, :host .drawflow-container .outer-container .drawflow .drawflow-node.dataevents.selected1, :host .drawflow-container .outer-container .drawflow .drawflow-node.trigger.selected1 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.select.selected1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.events.selected1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.dataevents.selected1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.trigger.selected1 {
   color: var(--light, #ffffff);
   background: var(--accent, #276ef1);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.select.selected1 yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.events.selected1 yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.dataevents.selected1 yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.trigger.selected1 yoo-icon {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.select.selected1 yoo-icon, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.events.selected1 yoo-icon, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.dataevents.selected1 yoo-icon, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.trigger.selected1 yoo-icon {
   fill: var(--light, #ffffff);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.select.hover1, :host .drawflow-container .outer-container .drawflow .drawflow-node.events.hover1, :host .drawflow-container .outer-container .drawflow .drawflow-node.dataevents.hover1, :host .drawflow-container .outer-container .drawflow .drawflow-node.trigger.hover1 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.select.hover1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.events.hover1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.dataevents.hover1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.trigger.hover1 {
   background: var(--accent-20, rgba(39, 110, 241, 0.2));
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.select .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.events .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.dataevents .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.trigger .input {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.select .input, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.events .input, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.dataevents .input, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.trigger .input {
   background: var(--accent, #276ef1);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.select .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.events .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.dataevents .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.trigger .output {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.select .output, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.events .output, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.dataevents .output, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.trigger .output {
   border-color: var(--accent, #276ef1);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.textcategory, :host .drawflow-container .outer-container .drawflow .drawflow-node.condition {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.textcategory, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.condition {
   border-color: var(--energized, #ffc043);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.textcategory.selected1, :host .drawflow-container .outer-container .drawflow .drawflow-node.condition.selected1 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.textcategory.selected1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.condition.selected1 {
   color: var(--dark, #000000);
   background: var(--energized, #ffc043);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.textcategory.hover1, :host .drawflow-container .outer-container .drawflow .drawflow-node.condition.hover1 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.textcategory.hover1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.condition.hover1 {
   background: var(--energized-20, rgba(255, 192, 67, 0.2));
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.textcategory .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.condition .input {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.textcategory .input, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.condition .input {
   background: var(--energized, #ffc043);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.textcategory .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.condition .output {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.textcategory .output, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.condition .output {
   border-color: var(--energized, #ffc043);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.number, :host .drawflow-container .outer-container .drawflow .drawflow-node.appcreatorapp, :host .drawflow-container .outer-container .drawflow .drawflow-node.customfield, :host .drawflow-container .outer-container .drawflow .drawflow-node.lesson, :host .drawflow-container .outer-container .drawflow .drawflow-node.boostcontent {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.number, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.appcreatorapp, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.customfield, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.lesson, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.boostcontent {
   border-color: var(--app-color, #5a30f4);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.number.selected1, :host .drawflow-container .outer-container .drawflow .drawflow-node.appcreatorapp.selected1, :host .drawflow-container .outer-container .drawflow .drawflow-node.customfield.selected1, :host .drawflow-container .outer-container .drawflow .drawflow-node.lesson.selected1, :host .drawflow-container .outer-container .drawflow .drawflow-node.boostcontent.selected1 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.number.selected1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.appcreatorapp.selected1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.customfield.selected1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.lesson.selected1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.boostcontent.selected1 {
   color: var(--light, #ffffff);
   background: var(--app-color, #5a30f4);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.number.selected1 yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.appcreatorapp.selected1 yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.customfield.selected1 yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.lesson.selected1 yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.boostcontent.selected1 yoo-icon {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.number.selected1 yoo-icon, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.appcreatorapp.selected1 yoo-icon, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.customfield.selected1 yoo-icon, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.lesson.selected1 yoo-icon, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.boostcontent.selected1 yoo-icon {
   fill: var(--light, #ffffff);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.number.hover1, :host .drawflow-container .outer-container .drawflow .drawflow-node.appcreatorapp.hover1, :host .drawflow-container .outer-container .drawflow .drawflow-node.customfield.hover1, :host .drawflow-container .outer-container .drawflow .drawflow-node.lesson.hover1, :host .drawflow-container .outer-container .drawflow .drawflow-node.boostcontent.hover1 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.number.hover1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.appcreatorapp.hover1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.customfield.hover1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.lesson.hover1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.boostcontent.hover1 {
   background: var(--app-color-20, rgba(90, 48, 244, 0.2));
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.number .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.appcreatorapp .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.customfield .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.lesson .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.boostcontent .input {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.number .input, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.appcreatorapp .input, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.customfield .input, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.lesson .input, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.boostcontent .input {
   background: var(--app-color, #5a30f4);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.number .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.appcreatorapp .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.customfield .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.lesson .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.boostcontent .output {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.number .output, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.appcreatorapp .output, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.customfield .output, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.lesson .output, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.boostcontent .output {
   border-color: var(--app-color, #5a30f4);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.contactdetail, :host .drawflow-container .outer-container .drawflow .drawflow-node.engage, :host .drawflow-container .outer-container .drawflow .drawflow-node.information, :host .drawflow-container .outer-container .drawflow .drawflow-node.nativeactions, :host .drawflow-container .outer-container .drawflow .drawflow-node.entity, :host .drawflow-container .outer-container .drawflow .drawflow-node.notification {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.contactdetail, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.engage, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.information, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.nativeactions, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.entity, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.notification {
   border-color: var(--warning, #ed6e33);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.contactdetail.selected1, :host .drawflow-container .outer-container .drawflow .drawflow-node.engage.selected1, :host .drawflow-container .outer-container .drawflow .drawflow-node.information.selected1, :host .drawflow-container .outer-container .drawflow .drawflow-node.nativeactions.selected1, :host .drawflow-container .outer-container .drawflow .drawflow-node.entity.selected1, :host .drawflow-container .outer-container .drawflow .drawflow-node.notification.selected1 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.contactdetail.selected1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.engage.selected1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.information.selected1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.nativeactions.selected1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.entity.selected1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.notification.selected1 {
   color: var(--light, #ffffff);
   background: var(--warning, #ed6e33);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.contactdetail.selected1 yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.engage.selected1 yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.information.selected1 yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.nativeactions.selected1 yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.entity.selected1 yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.notification.selected1 yoo-icon {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.contactdetail.selected1 yoo-icon, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.engage.selected1 yoo-icon, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.information.selected1 yoo-icon, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.nativeactions.selected1 yoo-icon, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.entity.selected1 yoo-icon, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.notification.selected1 yoo-icon {
   fill: var(--light, #ffffff);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.contactdetail.hover1, :host .drawflow-container .outer-container .drawflow .drawflow-node.engage.hover1, :host .drawflow-container .outer-container .drawflow .drawflow-node.information.hover1, :host .drawflow-container .outer-container .drawflow .drawflow-node.nativeactions.hover1, :host .drawflow-container .outer-container .drawflow .drawflow-node.entity.hover1, :host .drawflow-container .outer-container .drawflow .drawflow-node.notification.hover1 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.contactdetail.hover1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.engage.hover1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.information.hover1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.nativeactions.hover1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.entity.hover1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.notification.hover1 {
   background: var(--warning-20, rgba(237, 110, 51, 0.2));
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.contactdetail .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.engage .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.information .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.nativeactions .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.entity .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.notification .input {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.contactdetail .input, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.engage .input, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.information .input, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.nativeactions .input, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.entity .input, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.notification .input {
   background: var(--warning, #ed6e33);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.contactdetail .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.engage .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.information .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.nativeactions .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.entity .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.notification .output {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.contactdetail .output, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.engage .output, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.information .output, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.nativeactions .output, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.entity .output, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.notification .output {
   border-color: var(--warning, #ed6e33);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.no-scoring, :host .drawflow-container .outer-container .drawflow .drawflow-node.waitfor {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.no-scoring, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.waitfor {
   border-color: var(--text-color, #807f83);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.no-scoring.selected1, :host .drawflow-container .outer-container .drawflow .drawflow-node.waitfor.selected1 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.no-scoring.selected1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.waitfor.selected1 {
   color: var(--dark, #000000);
   background: var(--text-color, #807f83);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.no-scoring.hover1, :host .drawflow-container .outer-container .drawflow .drawflow-node.waitfor.hover1 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.no-scoring.hover1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.waitfor.hover1 {
   background: var(--text-color-20, rgba(128, 127, 131, 0.2));
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.no-scoring .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.waitfor .input {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.no-scoring .input, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.waitfor .input {
   background: var(--text-color, #807f83);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.no-scoring .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.waitfor .output {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.no-scoring .output, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.waitfor .output {
   border-color: var(--text-color, #807f83);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.actioncategory, :host .drawflow-container .outer-container .drawflow .drawflow-node.logic {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.actioncategory, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.logic {
   border-color: var(--anthracite, #1a1a1a);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.actioncategory.selected1, :host .drawflow-container .outer-container .drawflow .drawflow-node.logic.selected1 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.actioncategory.selected1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.logic.selected1 {
   color: var(--light, #ffffff);
   background: var(--anthracite, #1a1a1a);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.actioncategory.selected1 yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.logic.selected1 yoo-icon {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.actioncategory.selected1 yoo-icon, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.logic.selected1 yoo-icon {
   fill: var(--light, #ffffff);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.actioncategory.hover1, :host .drawflow-container .outer-container .drawflow .drawflow-node.logic.hover1 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.actioncategory.hover1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.logic.hover1 {
   background: var(--anthracite-20, rgba(26, 26, 26, 0.2));
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.actioncategory .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.logic .input {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.actioncategory .input, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.logic .input {
   background: var(--anthracite, #1a1a1a);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.actioncategory .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.logic .output {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.actioncategory .output, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.logic .output {
   border-color: var(--anthracite, #1a1a1a);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.dateandtime {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.dateandtime {
   border-color: var(--dark, #000000);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.dateandtime.selected1 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.dateandtime.selected1 {
   color: var(--light, #ffffff);
   background: var(--dark, #000000);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.dateandtime.selected1 yoo-icon {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.dateandtime.selected1 yoo-icon {
   fill: var(--light, #ffffff);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.dateandtime.hover1 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.dateandtime.hover1 {
   background: var(--dark-20, rgba(0, 0, 0, 0.2));
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.dateandtime .input {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.dateandtime .input {
   background: var(--dark, #000000);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.dateandtime .output {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.dateandtime .output {
   border-color: var(--dark, #000000);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.catalogandbarcode, :host .drawflow-container .outer-container .drawflow .drawflow-node.notifications {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.catalogandbarcode, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.notifications {
   border-color: var(--danger, #d44333);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.catalogandbarcode.selected1, :host .drawflow-container .outer-container .drawflow .drawflow-node.notifications.selected1 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.catalogandbarcode.selected1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.notifications.selected1 {
   color: var(--light, #ffffff);
   background: var(--danger, #d44333);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.catalogandbarcode.selected1 yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.notifications.selected1 yoo-icon {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.catalogandbarcode.selected1 yoo-icon, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.notifications.selected1 yoo-icon {
   fill: var(--light, #ffffff);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.catalogandbarcode.hover1, :host .drawflow-container .outer-container .drawflow .drawflow-node.notifications.hover1 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.catalogandbarcode.hover1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.notifications.hover1 {
   background: var(--danger-20, rgba(212, 67, 51, 0.2));
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.catalogandbarcode .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.notifications .input {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.catalogandbarcode .input, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.notifications .input {
   background: var(--danger, #d44333);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.catalogandbarcode .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.notifications .output {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.catalogandbarcode .output, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.notifications .output {
   border-color: var(--danger, #d44333);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.condition {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.condition {
   border-color: var(--stable, #adadad);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.condition.selected1 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.condition.selected1 {
   color: var(--dark, #000000);
   background: var(--stable, #adadad);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.condition.hover1 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.condition.hover1 {
   background: var(--stable-20, rgba(173, 173, 173, 0.2));
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.condition .input {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.condition .input {
   background: var(--stable, #adadad);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.condition .output {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.condition .output {
   border-color: var(--stable, #adadad);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.page, :host .drawflow-container .outer-container .drawflow .drawflow-node.dataactions, :host .drawflow-container .outer-container .drawflow .drawflow-node.operate {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.page, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.dataactions, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.operate {
   border-color: var(--success, #3aa76d);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.page.selected1, :host .drawflow-container .outer-container .drawflow .drawflow-node.dataactions.selected1, :host .drawflow-container .outer-container .drawflow .drawflow-node.operate.selected1 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.page.selected1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.dataactions.selected1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.operate.selected1 {
   color: var(--light, #ffffff);
   background: var(--success, #3aa76d);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.page.selected1 yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.dataactions.selected1 yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.operate.selected1 yoo-icon {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.page.selected1 yoo-icon, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.dataactions.selected1 yoo-icon, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.operate.selected1 yoo-icon {
   fill: var(--light, #ffffff);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.page.hover1, :host .drawflow-container .outer-container .drawflow .drawflow-node.dataactions.hover1, :host .drawflow-container .outer-container .drawflow .drawflow-node.operate.hover1 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.page.hover1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.dataactions.hover1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.operate.hover1 {
   background: var(--success-20, rgba(58, 167, 109, 0.2));
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.page .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.dataactions .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.operate .input {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.page .input, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.dataactions .input, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.operate .input {
   background: var(--success, #3aa76d);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.page .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.dataactions .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.operate .output {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.page .output, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.dataactions .output, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.operate .output {
   border-color: var(--success, #3aa76d);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node .block-container {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node .block-container {
   display: flex;
   flex-direction: column;
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node .title-box {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node .title-box {
   display: flex;
   flex: 1;
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node .title-box .title-text {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node .title-box .title-text {
   flex: 1;
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node .title-box yoo-icon.margin-right {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node .title-box yoo-icon.margin-right {
   margin-right: var(--spacing-08, 0.5rem);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node .title-box yoo-icon.margin-left {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node .title-box yoo-icon.margin-left {
   margin-left: var(--spacing-08, 0.5rem);
-}
-:host .drawflow-container .outer-container .drawflow .drawflow-node .title-box:hover yoo-icon[name=settings] {
-  opacity: 1;
-}
-:host .drawflow-container .outer-container .drawflow .drawflow-node .title-box yoo-icon[name=settings] {
-  cursor: pointer;
-  opacity: 0.3;
 }