Add new code new version
Change-Id: Ic02a76313503b526f17c3df29eb387a29fe6a42a
Signed-off-by: Michael Lando <ml636r@att.com>
diff --git a/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/common/_typography.scss b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/common/_typography.scss
new file mode 100644
index 0000000..5d23eff
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/common/_typography.scss
@@ -0,0 +1,25 @@
+/* Fonts */
+@font-face {
+ font-family: Omnes-Light;
+ src: url('ecomp/asdc/common/fonts/omnes-att-light.otf');
+}
+
+@font-face {
+ font-family: Omnes-Regular;
+ src: url('ecomp/asdc/common/fonts/omnes-att-regular.otf');
+}
+
+@font-face {
+ font-family: Omnes-Medium;
+ src: url('ecomp/asdc/common/fonts/omnes-att-medium.otf');
+}
+
+@font-face {
+ font-family: Omnes-Bold;
+ src: url('ecomp/asdc/common/fonts/omnes-att-bold.otf');
+}
+
+$base-font-regular: omnes-regular, "Omnes-Regular";
+$base-font-light: omnes-light, "Omnes-Light";
+$base-font-medium: omnes-medium, "Omnes-Medium";
+$base-font-bold: omnes-bold, "Omnes-Bold";
diff --git a/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/common/_variables.scss b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/common/_variables.scss
new file mode 100644
index 0000000..1880ac3
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/common/_variables.scss
@@ -0,0 +1,44 @@
+
+// primary colors
+$blue: #009fdb;
+$dark-blue: #0568ae;
+$light-blue: #71c5e8;
+$green: #4ca90c;
+$dark-green: #007a3e;
+$light-green: #b5bd00;
+$orange: #ea7400;
+$yellow: #ffb81c;
+$dark-purple: #702f8a;
+$purple: #9063cd;
+$light-purple: #caa2dd;
+$black: #000000;
+$dark-gray: #5a5a5a;
+$gray: #959595;
+$light-gray: #d2d2d2;
+$white: #ffffff;
+
+// Secondary Colors
+$red: #cf2a2a;
+$background-gray: #f2f2f2;
+$text-black: #191919;
+$link-blue: #056bae;
+$functional-green: #007a3e;
+$functional-yellow: #ffb81c;
+$tlv-gray: #f8f8f8;
+$tlv-light-gray: #eaeaea;
+$tlv-hover: #e6f6fb;
+
+
+$scroll-bar-color: $dark-gray;
+
+//responsive @media params
+$tablet-max-width: 1024px;
+$laptop-min-width: 1224px;
+$desktop-min-width: 1824px;
+
+/* Textures */
+$images-folder-name: "../images";
+$plus-circle-icon: $images-folder-name + "/plus-circle-icon.svg";
+$interface-icon: $images-folder-name + "/interface.svg";
+$sdc-logo: $images-folder-name + "/logo.svg";
+$warning-icon: $images-folder-name + "/warning.svg";
diff --git a/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/common/fonts/omnes-att-bold-italic.otf b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/common/fonts/omnes-att-bold-italic.otf
new file mode 100644
index 0000000..77f0dbc
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/common/fonts/omnes-att-bold-italic.otf
Binary files differ
diff --git a/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/common/fonts/omnes-att-bold.otf b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/common/fonts/omnes-att-bold.otf
new file mode 100644
index 0000000..136afca
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/common/fonts/omnes-att-bold.otf
Binary files differ
diff --git a/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/common/fonts/omnes-att-italic.otf b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/common/fonts/omnes-att-italic.otf
new file mode 100644
index 0000000..5dc1da7
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/common/fonts/omnes-att-italic.otf
Binary files differ
diff --git a/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/common/fonts/omnes-att-light-Italic.otf b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/common/fonts/omnes-att-light-Italic.otf
new file mode 100644
index 0000000..b13ae4f
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/common/fonts/omnes-att-light-Italic.otf
Binary files differ
diff --git a/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/common/fonts/omnes-att-light.otf b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/common/fonts/omnes-att-light.otf
new file mode 100644
index 0000000..587d871
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/common/fonts/omnes-att-light.otf
Binary files differ
diff --git a/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/common/fonts/omnes-att-medium-italic.otf b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/common/fonts/omnes-att-medium-italic.otf
new file mode 100644
index 0000000..f824bc2
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/common/fonts/omnes-att-medium-italic.otf
Binary files differ
diff --git a/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/common/fonts/omnes-att-medium.otf b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/common/fonts/omnes-att-medium.otf
new file mode 100644
index 0000000..3085c1f
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/common/fonts/omnes-att-medium.otf
Binary files differ
diff --git a/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/common/fonts/omnes-att-regular.otf b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/common/fonts/omnes-att-regular.otf
new file mode 100644
index 0000000..a1a78eb
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/common/fonts/omnes-att-regular.otf
Binary files differ
diff --git a/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sequencer-actions.scss b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sequencer-actions.scss
new file mode 100644
index 0000000..bc5b151
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sequencer-actions.scss
@@ -0,0 +1,120 @@
+.asdcs-control {
+
+ .asdcs-actions {
+
+ @include drop-shadow();
+
+ * {
+ @include noselect();
+ }
+
+ $asdcsActionMenuWidth: 275px;
+ $asdcsActionMenuSpanIndent: 20px;
+
+ position: fixed;
+ display: none;
+ top: 0;
+ left: 0;
+
+ background: $asdcsColorOneLight;
+ border: 1px solid $asdcsColorWhitish;
+ border-radius: $asdcsPopupBorderRadius;
+ width: $asdcsActionMenuWidth;
+ z-index: 10000;
+
+ .asdcs-actions-header {
+ padding: 5px;
+ height: 20px;
+ pointer-events: none;
+ .asdcs-actions-icon {
+ height: $asdcsSmallIconSize;
+ width: $asdcsSmallIconSize;
+ fill: $asdcsColorTwo;
+ }
+ }
+
+ .asdcs-actions-footer {
+ height: 10px;
+ }
+
+ div.asdcs-actions-options {
+
+ div.asdcs-actions-state {
+ float: right;
+ height: $asdcsSmallIconSize;
+ width: $asdcsSmallIconSize;
+ .asdcs-actions-icon {
+ fill: $asdcsColorOneDark;
+ }
+ }
+
+ .asdcs-icon-action {
+ display: none;
+ fill: $asdcsColorOneDark;
+ height: 20px;
+ width: 20px;
+ }
+
+ span.asdcs-annotation {
+ color: $asdcsColorOneDark;
+ }
+
+ .asdcs-actions-option {
+ padding: 8px;
+ border-top: 1px solid $asdcsColorOne;
+ border-collapse: collapse;
+ cursor: pointer;
+ &:hover {
+ background-color: lighten($asdcsColorOneLight, 5%);
+ @include transition(background-color $asdcsTransitionTime ease);
+ }
+ }
+
+ .asdcs-icon {
+ fill: $asdcsColorOneDark;
+ &:hover {
+ fill: $asdcsColorEmphasisHover;
+ @include transition(fill $asdcsTransitionTime ease);
+ }
+ }
+
+ .asdcs-actions-optiongroup-occurrence {
+ .asdcs-actions-option-occurrence-from,
+ .asdcs-actions-option-occurrence-to {
+ span.asdcs-label {
+ padding-left: $asdcsActionMenuSpanIndent;
+ }
+ }
+ .asdcs-actions-option-occurrence-toggle {
+ background-color: $asdcsColorOneLight;
+ }
+ }
+
+ .asdcs-actions-optiongroup-fragment {
+ .asdcs-actions-fragment-toggle {
+ background-color: $asdcsColorOneLight;
+ }
+ }
+
+ .asdcs-actions-fragment-operator,
+ .asdcs-actions-fragment-guard {
+ div.asdcs-label {
+ display: table-cell;
+ width: 100px;
+ }
+ div.asdcs-value {
+ display: table-cell;
+ width: 150px;
+ input {
+ width: 90%;
+ border-color: $asdcsColorOne;
+ }
+ .asdcs-editable-select {
+ border: 1px solid $asdcsColorOne;
+ }
+ }
+ }
+ }
+ }
+
+}
diff --git a/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sequencer-common.scss b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sequencer-common.scss
new file mode 100644
index 0000000..e90a435
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sequencer-common.scss
@@ -0,0 +1,112 @@
+@import '../common/_variables.scss';
+
+$asdcsApplicationMinHeight: 400px;
+$asdcsEditorWidth: 500px;
+
+$asdcsFontSize: 13px;
+$asdcsTransitionTime: 250ms;
+$asdcsTextColor: $text-black;
+
+$asdcsColorWhite: $white;
+$asdcsColorWhitish: lighten($asdcsColorWhite, 5%);
+$asdcsColorBlack: $black;
+
+$asdcsColorOne: $tlv-light-gray;
+$asdcsColorOneLight: lighten($asdcsColorOne, 5%);
+$asdcsColorOneDark: $dark-gray;
+
+$asdcsColorTwo: $blue;
+$asdcsColorTwoLight: lighten($asdcsColorTwo, 10%);
+
+$asdcsColorThree: $light-purple;
+
+$asdcsColorGrey: $gray;
+$asdcsColorDarkGrey: $dark-gray;
+$asdcsColorLightGrey: $light-gray;
+
+$asdcsColorEmphasis: lighten($asdcsColorTwo, 10%);
+$asdcsColorEmphasisHover: $asdcsColorTwo;
+
+$asdcsSmallIconSize: 20px;
+
+// Buttons.
+
+$asdcsColorButtonBG: $asdcsColorOneDark;
+$asdcsColorButtonBGHover: $asdcsColorOne;
+$asdcsColorButtonFG: $asdcsColorWhitish;
+$asdcsColorButtonFGHover: $asdcsColorWhite;
+
+// Input fields.
+
+$asdcsInputSelectBorderColor: #d8d8d8;
+$asdcsInputSelectBorderRadius: 2px;
+$asdcsInputSelectFontSize: 14px;
+$asdcsInputSelectHeight: 30px;
+$asdcsInputSelectArrowColor: $asdcsColorOneDark;
+
+$asdcsInputTextColor: $asdcsTextColor;
+$asdcsInputTextBorderColor: $asdcsColorWhite;
+$asdcsInputTextBorderFocusColor: #d8d8d8;
+$asdcsInputTextBorderRadius: 2px;
+$asdcsInputTextFontSize: $asdcsFontSize;
+$asdcsInputTextHeight: 22px;
+
+$asdcsPopupBorderRadius: 3px;
+
+// SVG-specific.
+
+$asdcsSVGSelectableColor: $asdcsColorOne;
+$asdcsSVGSelectableOpacity: 0.01;
+$asdcsSVGSelectableWidth: 100;
+
+$asdcsSVGStrokeColor: $gray;
+$asdcsSVGStrokeColorLifeline: $asdcsSVGStrokeColor;
+$asdcsSVGStrokeColorMessage: #d8d8d8;
+$asdcsSVGTextColorMessage: $asdcsColorOneDark;
+$asdcsSVGStrokeColorFragment: $asdcsColorOneDark;
+$asdcsSVGStrokeWidth: 4;
+$asdcsSVGStrokeActiveColor: $asdcsColorBlack;
+$asdcsSVGStrokeActiveWidth: $asdcsSVGStrokeWidth + 4;
+
+// -------------------------------------------------------------------------------------------------
+
+@mixin drop-shadow($x: 0px, $y: 0px, $blur: 2px, $spread: 2px, $alpha: 0.25) {
+ -webkit-box-shadow: $x $y $blur $spread rgba(0, 0, 0, $alpha);
+ -moz-box-shadow: $x $y $blur $spread rgba(0, 0, 0, $alpha);
+ box-shadow: $x $y $blur $spread rgba(0, 0, 0, $alpha);
+}
+
+// -------------------------------------------------------------------------------------------------
+
+@mixin transition($transition) {
+ -webkit-transition: $transition;
+ -moz-transition: $transition;
+ -ms-transition: $transition;
+ -o-transition: $transition;
+}
+
+// -------------------------------------------------------------------------------------------------
+
+@mixin gradient($startColor: #eee, $endColor: white) {
+ background-color: $startColor;
+ background: -webkit-gradient(linear, left top, left bottom, from($startColor), to($endColor));
+ background: -webkit-linear-gradient(top, $startColor, $endColor);
+ background: -moz-linear-gradient(top, $startColor, $endColor);
+ background: -ms-linear-gradient(top, $startColor, $endColor);
+ background: -o-linear-gradient(top, $startColor, $endColor);
+}
+
+// -------------------------------------------------------------------------------------------------
+
+@mixin noselect() {
+ -webkit-touch-callout: none; /* iOS Safari */
+ -webkit-user-select: none; /* Chrome/Safari/Opera */
+ -khtml-user-select: none; /* Konqueror */
+ -moz-user-select: none; /* Firefox */
+ -ms-user-select: none; /* IE/Edge */
+ user-select: none; /* non-prefixed version, currently not supported by any browser */
+}
+
+.asdcs-hidden {
+ display: none;
+}
diff --git a/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sequencer-controls.scss b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sequencer-controls.scss
new file mode 100644
index 0000000..68256b9
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sequencer-controls.scss
@@ -0,0 +1,72 @@
+.asdcs-control {
+
+ // Input /////////////////////////////////////////////////////////////////////////////////////////
+
+ input.asdcs-editable {
+ border: 1px solid $asdcsInputTextBorderColor;
+ border-radius: $asdcsInputTextBorderRadius;
+ padding: 3px 5px;
+ height: $asdcsInputTextHeight;
+ width: calc(100% - 10px);
+ color: $asdcsInputTextColor;
+ background-color: $asdcsColorWhite;
+ &:focus {
+ border: 1px solid $asdcsInputTextBorderFocusColor;
+ background-color: $asdcsColorWhitish;
+ }
+ }
+
+ // Select ////////////////////////////////////////////////////////////////////////////////////////
+
+ .asdcs-editable-select {
+ outline: none;
+ border-radius: $asdcsInputSelectBorderRadius;
+ border: 1px solid $asdcsInputSelectBorderColor;
+ height: $asdcsInputSelectHeight;
+ div {
+ border-radius: $asdcsInputSelectBorderRadius;
+ }
+ * {
+ line-height: initial;
+ text-align: initial;
+ font-size: $asdcsInputSelectFontSize;
+ }
+ .Select-menu-outer {
+ .Select-option {
+ padding: 4px;
+ .is-selected {
+ background-color: $asdcsColorOneLight;
+ }
+ }
+ }
+ .Select-value {
+ height: $asdcsInputSelectHeight - 4px;
+ padding-left: 5px;
+ }
+ .Select-input {
+ border: none;
+ height: 1px;
+ line-height: 1px;
+ }
+ .Select-control {
+ box-shadow: none;
+ border: none;
+ }
+ .Select-control, .Select-placeholder {
+ border: none;
+ height: $asdcsInputSelectHeight - 4px;
+ }
+ .Select-placeholder {
+ padding-left: 4px;
+ }
+ .Select-arrow-zone {
+ text-align: center;
+ overflow: hidden;
+ padding-top: 4px;
+ }
+ &.is-focused {
+ .Select-control {
+ }
+ }
+ }
+}
diff --git a/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sequencer-designer.scss b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sequencer-designer.scss
new file mode 100644
index 0000000..9caeee5
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sequencer-designer.scss
@@ -0,0 +1,256 @@
+.asdcs-control {
+
+ .asdcs-editor-designer {
+
+ overflow: hidden;
+ table {
+ border-spacing: 2px;
+ }
+
+ $asdcsActiveBorderWidth: 1px;
+ $asdcsActiveBorderColor: $asdcsColorEmphasis;
+ .asdcs-designer-accordion {
+ display: flex;
+ flex-direction: column;
+ }
+
+ .asdcs-designer-metadata {
+ height: 70px;
+ display: table-cell;
+ padding: 0 15px;
+ text-align: left;
+ vertical-align: middle;
+ font-size: 16px;
+ color: $asdcsTextColor;
+ @include noselect();
+ }
+
+ .asdcs-designer-lifelines-container,
+ .asdcs-designer-steps-container {
+ flex: 1;
+ div,span {
+ @include noselect();
+ }
+ // overflow: hidden;
+ overflow: auto;
+ }
+
+ .asdcs-designer-lifelines-container {
+ padding: 0;
+ margin: 0;
+ .asdcs-designer-lifelines {
+ padding: 0;
+ .asdcs-designer-lifeline {
+ background-color: $asdcsColorWhite;
+ border: $asdcsActiveBorderWidth solid transparent; //$asdcsColorWhite;
+ border-bottom: $asdcsActiveBorderWidth solid $asdcsColorOne;
+ .asdcs-designer-lifeline-new {
+ background-color: $asdcsColorOneLight;
+ }
+ &.asdcs-active {
+ border: $asdcsActiveBorderWidth solid $asdcsColorEmphasis;
+ }
+ }
+ }
+ }
+
+ .asdcs-designer-steps-container {
+ padding: 0;
+ margin: 0;
+ .asdcs-designer-steps {
+ padding: 0;
+ .asdcs-designer-message {
+ border: $asdcsActiveBorderWidth solid $asdcsColorWhite;
+ border-bottom: $asdcsActiveBorderWidth solid $asdcsColorOne;
+ background-color: $asdcsColorWhite;
+ .asdcs-designer-message-new {
+ background-color: $asdcsColorOneLight;
+ }
+ &.asdcs-active {
+ border: $asdcsActiveBorderWidth solid $asdcsColorEmphasis;
+ }
+ select {
+ height: 30px;
+ width: 100%;
+ background-color: $asdcsColorWhite;
+ border-radius: $asdcsInputSelectBorderRadius;
+ border: 1px solid $asdcsInputSelectBorderColor;
+ -moz-appearance: none; // Just FF.
+ option {
+ padding: 10px 0;
+ font-size: $asdcsFontSize + 2;
+ }
+ &.asdcs-designer-select-message-type {
+ option {
+ font-size: $asdcsFontSize + 5;
+ }
+ }
+ }
+ }
+ }
+ }
+
+ .asdcs-designer-lifelines-container,
+ .asdcs-designer-steps-container {
+ table.asdcs-designer-layout {
+ width: 100%;
+ padding: 8px;
+ tbody, tr {
+ width: 100%;
+ }
+ td {
+ text-align: center;
+ vertical-align: middle;
+ }
+ &.asdcs-designer-message-row1 {
+ padding-bottom: 4px;
+ td:nth-child(3) {
+ width: 99%;
+ }
+ }
+ &.asdcs-designer-message-row2 {
+ padding-top: 0;
+ tr {
+ td:nth-child(1), td:nth-child(3) {
+ width: 45%;
+ }
+ td:nth-child(2) {
+ min-width: 70px;
+ width: 70px;
+ }
+ svg {
+ fill: $asdcsColorOneDark;
+ }
+ }
+ }
+ &.asdcs-designer-message-new {
+ tr {
+ td:nth-child(2) div {
+ white-space: nowrap;
+ color: $asdcsColorEmphasis;
+ cursor: pointer;
+ &:hover {
+ color: $asdcsColorEmphasisHover;
+ }
+ }
+ td:nth-child(3) div {
+ fill: $asdcsColorEmphasis;
+ cursor: pointer;
+ &:hover {
+ fill: $asdcsColorEmphasisHover;
+ }
+ }
+ td:nth-child(4) {
+ width: 99%;
+ }
+ }
+ }
+ &.asdcs-designer-lifeline-row1 {
+ tr {
+ td:nth-child(3) {
+ width: 99%;
+ }
+ }
+ }
+ &.asdcs-designer-lifeline-new {
+ tr {
+ td:nth-child(2) div {
+ white-space: nowrap;
+ color: $asdcsColorEmphasis;
+ cursor: pointer;
+ &:hover {
+ color: $asdcsColorEmphasisHover;
+ }
+ }
+ td:nth-child(3) div {
+ fill: $asdcsColorEmphasis;
+ &:hover {
+ fill: $asdcsColorEmphasisHover;
+ }
+ }
+ td:nth-child(4) {
+ width: 99%;
+ }
+ }
+ }
+ }
+ }
+
+ .asdcs-designer-placeholder {
+ padding: 8px;
+ background-color: $asdcsColorOneLight;
+ }
+
+ .asdcs-designer-icon {
+ display: table-cell;
+ text-align: right;
+ vertical-align: middle;
+ cursor: pointer;
+ fill: $asdcsColorDarkGrey;
+ min-width: $asdcsSmallIconSize;
+ width: $asdcsSmallIconSize;
+ height: $asdcsSmallIconSize;
+ &.asdcs-active {
+ fill: $asdcsColorEmphasis;
+ }
+ &:hover {
+ fill: $asdcsColorEmphasisHover;
+ @include transition(fill $asdcsTransitionTime ease);
+ }
+ svg {
+ pointer-events: none;
+ width: $asdcsSmallIconSize;
+ height: $asdcsSmallIconSize;
+ }
+ }
+
+ .asdcs-designer-sort {
+ text-align: center;
+ cursor: move;
+ display: table-cell;
+ }
+
+ .asdcs-designer-lifeline-index,
+ .asdcs-designer-message-index{
+ color: $asdcsTextColor;
+ }
+
+ button.asdcs-designer-new {
+ padding: 0 4px;
+ svg {
+ width: $asdcsSmallIconSize;
+ height: $asdcsSmallIconSize;
+ }
+ fill: $asdcsColorWhitish;
+ &:hover {
+ background-color: $asdcsColorEmphasis;
+ @include transition(background-color $asdcsTransitionTime ease);
+ }
+ }
+
+ h3 {
+ margin: 0;
+ font-size: 14px;
+ line-height: 40px;
+ vertical-align: middle;
+ height: 40px;
+ padding: 0 10px 0 15px;
+ background-color: $asdcsColorOne;
+ border-bottom: 1px solid $asdcsColorOneLight;
+ color: $asdcsColorOneDark;
+ text-transform: uppercase;
+ cursor: pointer;
+ div.asdcs-designer-icon {
+ padding-top: 7px;
+ display: inline;
+ float: right;
+ fill: $asdcsColorDarkGrey;
+ &:hover {
+ fill: $asdcsColorGrey;
+ @include transition(fill $asdcsTransitionTime ease);
+ }
+ }
+ @include noselect();
+ }
+ }
+}
diff --git a/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sequencer-development.scss b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sequencer-development.scss
new file mode 100644
index 0000000..0d9eef5
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sequencer-development.scss
@@ -0,0 +1,29 @@
+html,body {
+ margin: 0px;
+ padding: 0px;
+ height: 100%;
+ width: 100%;
+}
+@font-face {
+ font-family: Omnes-Light;
+ src: url('../common/fonts/omnes-att-light.otf');
+}
+
+@font-face {
+ font-family: Omnes-Regular;
+ src: url('../common/fonts/omnes-att-regular.otf');
+}
+
+@font-face {
+ font-family: Omnes-Medium;
+ src: url('../common/fonts/omnes-att-medium.otf');
+}
+
+@font-face {
+ font-family: Omnes-Bold;
+ src: url('../common/fonts/omnes-att-bold.otf');
+}
+
+* {
+ font-family: "Omnes-Regular", "Helvetiva Neue", Helvetica, Arial, SansSerif;
+}
diff --git a/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sequencer-diagram-svg.scss b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sequencer-diagram-svg.scss
new file mode 100644
index 0000000..310c4d0
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sequencer-diagram-svg.scss
@@ -0,0 +1,189 @@
+// Separate to allow for SVG-only styles, for application by Batik
+// to exported SVG on the service-side.
+
+svg {
+
+ text {
+ text-anchor: middle;
+ color: $asdcsTextColor;
+ stroke: none;
+ }
+
+ g.asdcs-diagram-title {
+ text {
+ font-size: 40pt;
+ }
+ }
+
+ rect.asdcs-diagram-occurrence {
+ stroke: $asdcsSVGStrokeColor;
+ stroke-width: $asdcsSVGStrokeWidth;
+ fill: $asdcsColorWhite;
+ }
+
+ g.asdcs-diagram-message-container {
+
+ text.asdcs-diagram-message-label {
+ fill: $asdcsSVGTextColorMessage;
+ pointer-events: none;
+ font-size: 28pt;
+ }
+
+ rect.asdcs-diagram-message-label-bg {
+ pointer-events: none;
+ stroke: none;
+ fill: $asdcsColorWhite;
+ fill-opacity: 0.75;
+ }
+
+ path.asdcs-diagram-message-selectable {
+ stroke: $asdcsSVGSelectableColor;
+ stroke-width: $asdcsSVGSelectableWidth;
+ fill: none;
+ opacity: $asdcsSVGSelectableOpacity;
+ cursor: pointer;
+ }
+
+ path.asdcs-diagram-message {
+ pointer-events: none;
+ stroke: $asdcsSVGStrokeColorMessage;
+ stroke-width: $asdcsSVGStrokeWidth;
+ fill: none;
+ &.asdcs-diagram-message-response {
+ stroke-dasharray: 30, 10;
+ }
+ }
+
+ rect.asdcs-diagram-message-bg {
+ stroke: none;
+ fill: $asdcsColorWhite;
+ }
+
+ &.asdcs-active {
+ path.asdcs-diagram-message {
+ stroke: $asdcsSVGStrokeActiveColor;
+ stroke-width: $asdcsSVGStrokeActiveWidth;
+ }
+ rect.asdcs-diagram-message-bg {
+ // Not FF:
+ // filter: url(#asdcsSvgHighlight);
+ }
+ rect.asdcs-diagram-message-label-bg {
+ fill: #fafafa;
+ }
+ }
+
+ .asdcs-diagram-notes-container {
+ display: none;
+ path {
+ fill:none;
+ stroke: $asdcsSVGStrokeColor;
+ stroke-width: 6px;
+ }
+ text {
+ font-weight: bold;
+ font-size: 40px;
+ text-anchor: start;
+ }
+ }
+
+ &.asdcs-active {
+ .asdcs-diagram-notes-container {
+ display: block;
+ }
+ }
+
+ }
+
+ g.asdcs-diagram-lifeline-container {
+
+ rect.asdcs-diagram-lifeline-heading-box {
+ stroke: $asdcsColorThree;
+ stroke-width: $asdcsSVGStrokeWidth;
+ fill: $asdcsColorWhite;
+ cursor: pointer;
+ }
+
+ text.asdcs-diagram-lifeline-heading-label {
+ font-size: 36px;
+ pointer-events: none;
+ }
+
+ path.asdcs-diagram-lifeline-selectable {
+ stroke: $asdcsSVGSelectableColor;
+ stroke-width: $asdcsSVGSelectableWidth;
+ opacity: $asdcsSVGSelectableOpacity;
+ cursor: pointer;
+ }
+
+ path.asdcs-diagram-lifeline {
+ pointer-events: none;
+ fill: $asdcsSVGStrokeColor;
+ stroke: $asdcsSVGStrokeColorLifeline;
+ stroke-width: $asdcsSVGStrokeWidth;
+ stroke-dasharray: 40, 10;
+ }
+
+ rect.asdcs-diagram-lifeline-bg {
+ stroke: none;
+ fill:white;
+ }
+
+ &.asdcs-active {
+ rect.asdcs-diagram-lifeline-heading-box, path.asdcs-diagram-lifeline {
+ stroke: $asdcsSVGStrokeActiveColor;
+ stroke-width: $asdcsSVGStrokeActiveWidth;
+ }
+ rect {
+ // Not supported by FF:
+ // filter:url(#asdcsSvgHighlight);
+ }
+ }
+ }
+
+ .asdcs-diagram-fragment {
+
+ rect {
+ stroke: $asdcsSVGStrokeColorFragment;
+ stroke-width: $asdcsSVGStrokeWidth;
+ fill: none;
+ }
+
+ rect.asdcs-diagram-fragment-guard-bg {
+ pointer-events: none;
+ stroke: none;
+ fill: $asdcsColorWhite;
+ fill-opacity: 0.75;
+ }
+
+ text {
+ font-size: 28pt;
+ text-anchor: start;
+ &.asdcs-diagram-fragment-guard {
+ fill: #888;
+ }
+ }
+
+ path {
+ stroke: $asdcsSVGStrokeColor;
+ stroke-width: $asdcsSVGStrokeWidth;
+ fill: none;
+ }
+ }
+
+ #asdcsDiagramArrowOpen, #asdcsDiagramArrowClosed, #asdcsDiagramArrowSolid {
+ stroke: $asdcsSVGStrokeColor;
+ }
+
+ #asdcsDiagramArrowOpen {
+ fill:none;
+ }
+
+ #asdcsDiagramArrowClosed {
+ fill:white;
+ }
+
+ #asdcsDiagramArrowSolid {
+ fill:$asdcsSVGStrokeColor;
+ }
+}
diff --git a/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sequencer-diagram.scss b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sequencer-diagram.scss
new file mode 100644
index 0000000..fe67c90
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sequencer-diagram.scss
@@ -0,0 +1,206 @@
+.asdcs-control {
+
+ div.asdcs-diagram {
+
+ width: auto;
+ height: 100%;
+ overflow: hidden;
+
+ @include noselect();
+
+ div.asdcs-diagram-name {
+ height: 40px;
+ line-height: 40px;
+ font-size: 24px;
+ text-align: center;
+ background-color: $asdcsColorOneLight;
+ @include noselect();
+ }
+
+ div.asdcs-diagram-svg {
+ height: 100%;
+ }
+
+ div.asdcs-diagram-popup {
+
+ @include drop-shadow();
+
+ $asdcsDiagramPopupIconPaneSize: 80px;
+ $asdcsDiagramPopupHeaderHeight: 40px;
+ $asdcsDiagramPopupFooterHeight: $asdcsDiagramPopupHeaderHeight;
+ $asdcsDiagramPopupHeight: 200px;
+ $asdcsDiagramPopupWidth: 320px;
+ $asdcsDiagramPopupBodyHeight: $asdcsDiagramPopupHeight - ($asdcsDiagramPopupHeaderHeight + $asdcsDiagramPopupFooterHeight);
+ $asdcsDiagramPopupNotesIconSize: 64px;
+
+ position: absolute;
+ height: $asdcsDiagramPopupHeight;
+ width: $asdcsDiagramPopupWidth;
+ text-overflow: ellipsis;
+ background: $asdcsColorOneLight;
+ border: 1px solid $asdcsColorWhitish;
+ border-radius: $asdcsPopupBorderRadius;
+
+ .asdcs-diagram-popup-header {
+ font-weight: bold;
+ font-size: 120%;
+ padding: 4px 10px;
+ height: $asdcsDiagramPopupHeaderHeight;
+ line-height: $asdcsDiagramPopupHeaderHeight;
+ }
+
+ .asdcs-diagram-popup-body {
+
+ height: $asdcsDiagramPopupBodyHeight;
+ overflow: hidden;
+
+ .asdcs-icon-popup {
+ display: table-cell;
+ text-align: center;
+ vertical-align: middle;
+ height: $asdcsDiagramPopupBodyHeight;
+ width: $asdcsDiagramPopupIconPaneSize;
+ min-width: $asdcsDiagramPopupIconPaneSize;
+ svg {
+ height: $asdcsDiagramPopupNotesIconSize;
+ width: $asdcsDiagramPopupNotesIconSize;
+ .asdcs-icon {
+ fill: $asdcsColorOneDark;
+ }
+ }
+ }
+
+ .asdcs-diagram-notes {
+ display: table-cell;
+ width: 100%;
+ vertical-align: middle;
+ overflow: hidden;
+ text-align: left;
+ padding: 0 15px 5px 0;
+ margin-right: 10px;
+ }
+ }
+
+ .asdcs-diagram-popup-footer {
+ height: 0;
+ }
+
+ $asdcsPopupBorderColor1: rgba(242, 242, 242, 0);
+ $asdcsPopupBorderColor2: rgba(211, 211, 211, 0);
+
+ &.asdcs-diagram-popup-topleft {
+
+ &:after, &:before {
+ border: solid transparent;
+ content: " ";
+ height: 0;
+ width: 0;
+ position: absolute;
+ pointer-events: none;
+ bottom: 100%;
+ left: 50px;
+ }
+
+ &:after {
+ border-color: $asdcsPopupBorderColor1;
+ border-width: 6px;
+ border-bottom-color: $asdcsColorOneLight;
+ margin-left: -6px;
+ }
+
+ &:before {
+ border-color: $asdcsPopupBorderColor2;
+ border-width: 7px;
+ border-bottom-color: $asdcsColorOneLight;
+ margin-left: -7px;
+ }
+ }
+
+ &.asdcs-diagram-popup-topright {
+
+ &:after, &:before {
+ border: solid transparent;
+ content: " ";
+ height: 0;
+ width: 0;
+ position: absolute;
+ pointer-events: none;
+ bottom: 100%;
+ right: 50px;
+ }
+
+ &:after {
+ border-color: $asdcsPopupBorderColor1;
+ border-width: 6px;
+ border-bottom-color: $asdcsColorOneLight;
+ margin-left: -6px;
+ }
+
+ &:before {
+ border-color: $asdcsPopupBorderColor2;
+ border-width: 7px;
+ border-bottom-color: $asdcsColorOneLight;
+ margin-left: -7px;
+ }
+ }
+
+ &.asdcs-diagram-popup-bottomleft {
+
+ &:after, &:before {
+ border: solid transparent;
+ content: " ";
+ height: 0;
+ width: 0;
+ position: absolute;
+ pointer-events: none;
+ top: 100%;
+ left: 50px;
+ }
+
+ &:after {
+ border-color: $asdcsPopupBorderColor1;
+ border-width: 6px;
+ border-top-color: $asdcsColorOneLight;
+ margin-left: -6px;
+ }
+
+ &:before {
+ border-color: $asdcsPopupBorderColor2;
+ border-width: 7px;
+ border-top-color: $asdcsColorOneLight;
+ margin-left: -7px;
+ }
+ }
+
+ &.asdcs-diagram-popup-bottomright {
+
+ &:after, &:before {
+ border: solid transparent;
+ content: " ";
+ height: 0;
+ width: 0;
+ position: absolute;
+ pointer-events: none;
+ top: 100%;
+ right: 50px;
+ }
+
+ &:after {
+ border-color: rgba(242, 242, 242, 0);
+ border-width: 6px;
+ border-top-color: $asdcsColorOneLight;
+ margin-left: -6px;
+ }
+
+ &:before {
+ border-color: rgba(211, 211, 211, 0);
+ border-width: 7px;
+ border-top-color: $asdcsColorOneLight;
+ margin-left: -7px;
+ }
+ }
+ }
+
+ @import 'sequencer-diagram-svg.scss';
+ }
+}
diff --git a/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sequencer-dialog.scss b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sequencer-dialog.scss
new file mode 100644
index 0000000..89a6412
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sequencer-dialog.scss
@@ -0,0 +1,159 @@
+/*
+<div class="asdcs-dialog">
+<div class="asdcs-dialog-overlay"></div>
+<div class="asdcs-dialog-header"></div>
+<div class="asdcs-dialog-body"></div>
+<div class="asdcs-dialog-buttonbar">
+<button class="asdcs-dialog-button-cancel">Cancel</button>
+<button class="asdcs-dialog-button-ok">OK</button>
+</div>
+</div>
+*/
+
+.asdcs-control {
+
+ $asdcsDialogIconSize: 70px;
+ $asdcsDialogWidth: 400px;
+
+ .asdcs-overlay {
+ display: none;
+ position: fixed;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ z-index: 5;
+ background-color: white;
+ opacity: 0.25;
+ pointer-events: all;
+ }
+
+ .asdcs-dialog {
+
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ width: $asdcsDialogWidth;
+ margin-left: -($asdcsDialogWidth/2);
+ height: 300px;
+ margin-top: -150px;
+ background: $asdcsColorOneLight;
+ border: 1px solid $asdcsColorWhitish;
+ border-radius: $asdcsPopupBorderRadius;
+ z-index: 10;
+
+ @include drop-shadow();
+
+ .asdcs-dialog-header {
+ position: absolute;
+ height: 60px;
+ line-height: 40px;
+ width: 100%;
+ box-sizing: border-box;
+ font-size: 14px;
+ font-weight: bold;
+ padding: 10px 15px;
+ }
+
+ .asdcs-dialog-close {
+ position: absolute;
+ top: 15px;
+ right: 15px;
+ height: $asdcsSmallIconSize;
+ width: $asdcsSmallIconSize;
+ fill: $asdcsColorGrey;
+ cursor: pointer;
+ &:hover {
+ fill: $asdcsColorEmphasis;
+ }
+ }
+
+ .asdcs-dialog-buttonbar {
+
+ position: absolute;
+ height: 50px;
+ width: 100%;
+ bottom: 0;
+ //background-color: $asdcsColorOne;
+ text-align: right;
+
+ button {
+ width: 75px;
+ border-radius: 4px;
+ border: none;
+ background-color: $asdcsColorTwo;
+ color: $asdcsColorWhite;
+ padding: 7px 10px;
+ margin: 10px 10px 10px 0px;
+ &:hover {
+ background-color: $asdcsColorTwoLight;
+ }
+ }
+ }
+
+ .asdcs-dialog-icon {
+ position: absolute;
+ top: 80px;
+ left: 20px;
+ height: $asdcsDialogIconSize;
+ width: $asdcsDialogIconSize;
+ pointer-events: none;
+ fill: $asdcsColorOneDark;
+
+ svg {
+ display: none;
+ }
+
+ &.asdcs-icon-question {
+ svg.asdcs-icon-question {
+ display: block;
+ }
+ }
+
+ &.asdcs-icon-exclaim {
+ svg.asdcs-icon-exclaim {
+ display: block;
+ }
+ }
+
+ &.asdcs-icon-info {
+ svg.asdcs-icon-info {
+ display: block;
+ }
+ }
+
+ &.asdcs-icon-edit {
+ svg.asdcs-icon-edit {
+ display: block;
+ }
+ }
+ }
+
+ .asdcs-dialog-message {
+ position: absolute;
+ padding: 10px;
+ top: 90px;
+ height: 100px;
+ left: 100px;
+ width: $asdcsDialogWidth - 120px;
+ display: table-cell;
+ vertical-align: middle;
+ word-wrap: break-word;
+ text-overflow: ellipsis;
+ }
+
+ .asdcs-dialog-text {
+ position:absolute;
+ padding: 10px;
+ top:60px;
+ height: 150px;
+ left:100px;
+ width: $asdcsDialogWidth - 130px;
+ textarea {
+ height:100%;
+ width:100%;
+ resize: none;
+ }
+ }
+ }
+}
diff --git a/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sequencer-editor.scss b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sequencer-editor.scss
new file mode 100644
index 0000000..da35ba9
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sequencer-editor.scss
@@ -0,0 +1,125 @@
+.asdcs-control {
+
+ div.asdcs-editor {
+
+ $asdcsEditorResizeWidth: 6px;
+ $asdcsEditorToolbarPadding: 4px;
+
+ box-sizing: border-box;
+ float: left;
+ height: 100%;
+ width: $asdcsEditorWidth;
+ overflow-x: hidden;
+ overflow-y: auto;
+ position: relative;
+ padding-right: $asdcsEditorResizeWidth;
+
+ div.asdcs-editor-toolbar {
+
+ display: none;
+
+ height: 40px;
+ width: 100%;
+
+ background-color: $asdcsColorOneDark;
+ text-align: center;
+
+ .asdcs-editor-toolbar-demo {
+ padding: $asdcsEditorToolbarPadding;
+ display: inline;
+ float: left;
+ }
+
+ .asdcs-editor-toolbar-toggle {
+ padding: $asdcsEditorToolbarPadding;
+ display: inline;
+ float: right;
+ }
+
+ button {
+
+ &.asdcs-button-mode {
+
+ padding-left: 8px;
+ padding-right: 8px;
+
+ &.asdcs-button-toggle-left {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ margin-right: -4px;
+ }
+
+ &.asdcs-button-toggle-right {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ margin-left: -4px;
+ }
+
+ &.asdcs-button-toggle-center {
+ border-radius: 0;
+ border-right: 1px solid lighten($asdcsColorOneDark, 3%);
+ border-left: 1px solid lighten($asdcsColorOneDark, 3%);
+ }
+
+ &.asdcs-active {
+ background-color: $asdcsColorButtonBGHover;
+ }
+
+ &:hover {
+ border-color: transparent;
+ @include transition(border-color $asdcsTransitionTime ease);
+ }
+ }
+
+ svg {
+ height: $asdcsSmallIconSize;
+ width: $asdcsSmallIconSize;
+ fill: $asdcsColorWhitish;
+ }
+ }
+ }
+
+ div.asdcs-editor-content {
+
+ height: 100%;
+ width: 100%;
+ overflow-x: hidden;
+ overflow-y: auto;
+
+ div.asdcs-editor-code {
+ display:none;
+ height: 100%;
+ width: 100%;
+ background-color: $asdcsColorWhitish;
+ textarea {
+ height: 100%;
+ }
+ .CodeMirror {
+ height: 100%;
+ }
+ }
+
+ div.asdcs-editor-designer {
+ height: 100%;
+ width: 100%;
+
+ .asdcs-designer-accordion {
+ height: 100%;
+ }
+ }
+
+ }
+
+ div.asdcs-editor-resize-handle {
+ background-color: $asdcsColorOne;
+ position: absolute;
+ top: 0;
+ right: 0;
+ height: 100%;
+ width: $asdcsEditorResizeWidth;
+ cursor: e-resize;
+ @include drop-shadow();
+
+ }
+ }
+}
diff --git a/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sequencer-standalone.scss b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sequencer-standalone.scss
new file mode 100644
index 0000000..bd13af1
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sequencer-standalone.scss
@@ -0,0 +1,2 @@
+@import 'sequencer-common.scss';
+@import 'sequencer-diagram-svg.scss';
diff --git a/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites-raster.scss b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites-raster.scss
new file mode 100644
index 0000000..f232953
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites-raster.scss
@@ -0,0 +1,30 @@
+
+@mixin sprite-width($sprite) {
+ width: nth($sprite, 3);
+}
+@mixin sprite-height($sprite) {
+ height: nth($sprite, 4);
+}
+@function sprite-width($sprite) {
+ @return nth($sprite, 3);
+}
+@function sprite-height($sprite) {
+ @return nth($sprite, 4);
+}
+@mixin sprite-position($sprite) {
+ $sprite-offset-x: nth($sprite, 1);
+ $sprite-offset-y: nth($sprite, 2);
+ background-position: $sprite-offset-x $sprite-offset-y;
+}
+@mixin sprite($sprite, $display: block) {
+ @include sprite-position($sprite);
+ background-repeat: no-repeat;
+ overflow: hidden;
+ display: $display;
+ @include sprite-width($sprite);
+ @include sprite-height($sprite);
+}
+
+.icon {
+ background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAAAmCAYAAABagbwLAAAIkklEQVRoBe2ZCVAUVxrH/yDnMAOOHFFYd1eQ04HgGsEIjjEql3jEAo9UUopuorgeAUUUZY1urMRdSzdeSarcrJLVqKuwJhpNxHAKi6igEUE8QPAWhDkYbtmvH844gyAdHavWqn5V3f3e9773ve5ff+97X8+YdHR0QCjGI2BqPFOCJY6AANTIfiAANTJQs672/APeFIJqVyjPaBefzjfR7xY8VJ+GEeoCUCNA1DchANWnYYS6ANQIEPVNCED1aRih/soAtbKyMsLjvnwTrwTQ37u64S9r12LRvDkvn8gLzvBUHvqC9l7KcJHIBt7eXjBt07wU+8Y0+kp4KPfAjx49Qgcd/+/lV3mot7cPvDw9YC+VoqFBjfLycpwtPq97RheXgXBy6Iei8+chk/nB30+GPvQdUUzt8xdLmJ589Gi4uw6CUlGPX0hWVn5FN15bCQwYAW8vD7S3teDChV8AczP09KOYn+/r8JX5wNrSEpU3KpCekaU189Q1IjwcLgP6Q0FzXyq9jIuXLhnomJmZYfzYcXBx7g+NRoMrV66g8FyRgU5vDd5AFy/+CDHvTUcTTaRQqSEWiyG2EWH/vm/x6aYtbJ7Zc+cjasJo/PRzJkYMD0BzcxPs+kphSUC+3rUbnt4y+Ms8oW7QwNHRCY9am5D88TocS89g453phSQmJGD0yOGor69Ha1sb+tr1RVHxOVhbWUD/m9jRqT+WxsUhbKwcSqUCzS2tcHRwwN3bt7Bx89+RnpWre/aJE6dgefwSSKwtcK+mhu5dAhuRNf59YB/Wb/yc6Y15ezySVyyDnViE2ocPYWktgp1EjBMnjiFh1Tqdrd4qvIC+GTwGcwhmdmYG9h5Mg0rdAKnUHjExszEhPJS8IhuFRcUMoIlJH3iSB26ih7paUYkBzi5ITlqJObNnIYvGr1i9BnX1CoLrg8Sl8ZgQMk4HNHbBQgbzW3pJ6Zk5aGlpg4enJ+bMeh9O9v3IS58gjZ0fy2Ae2L8fJ7NzoWlqhqenN+bNjcG6NatR/UEsLl+rQEDgSCQui0PNnRv49OtvcOPWbYhEYsyYPh3R02ag4vp17E39HjGzZqG1UYU1mzehsuomRDZihIWFY2pkON7JK0Da0R97Y8n6eQGVSGyQk5ONvQcOouhiKUxMTNBBN+vq4YlhPu/DwsLi8WS0vh+1ITU1FYeP/sBkJbSswiMmYoTfYBw4lIpTBWeY/GJJCSIjJqBfv76s/ZrzQEwcL8fpgnzsStmDhqYWNk9FZSVMTM2wOmHJ4zlAkIfQg4YgJysDu/bsg4o8nivXrl2HNW1g8Qs/RPTkCHyyaTuCgoIgJs9cve0LZObm62xwHi0WWcLN1ZXJHBzs0dxQi3RaXU3NzUzGLfnamvu4+6BGN663Ci+gPx07Au7gimyIL9wGu8LHywuTIiPQ2NRkMEcDhYTK6psGMrVGBYVSBaWqwUDeSF5lZdH5Y43/0GGsr7S0FAq1BpYUE7nCbUbcg925X8sAc7LfDeqEkH+6EEpaLX369OHE4AJtQeEZPKiJQmBgAAm2w4eyg6rrV2m1VDEV7enC+XOYt+CctomsnFzMnBqJk8e+R86pPBSeOYvDR37A9h07dDp8KryAcoaWJ6zAlMhQWFA85N6gWq0C5z1uA527mefJ0uyms1uRhJYYVxQqFYicTodbDZrGRjqaoJXaSiSsv4FkBoV0lSolWltbodXhrvUq8rJ7dw1UuzY2fLaevLEGkyNCEBwcjJCQECSvSqIVk4fN275C6eXyrkO6bfMCmpi0BjOnhNFSPoQjx0/g1u07qK2rx+SpUUj+aH63hn+t8CHtvFyxs5VQevTkhXBx09ramuKeSLcpKWgT4oqY5HrsWYy1k9jBnEKQUvmA6XAryI42UFuJLR7W1TGZ9iSXy4H2VmSf6gwFO3d+Be7woljM5b2jgoPwtjwIi1uaEbs0STvsmVfTZ/Y+7hw7ehSqblTin7tTUFJWznZpC3Nz+A6RoY12Ym5ZvmjJSj/OTPjJZJDaiXV229rb4e7ujgGOUt2mdLPqBrgZR40MpAzCHO2kw91Dc0sLAoe/QRuYFPn5/2X2Sul+B7l5wsdjsMEtvhEYRJvXnxE9KYzJv0lJwcyod1i97HIp0v6Thvhly2jPKKOw4W0w9lkNXkAVSiWcnJwwhnJIW0olXFxcsHjRYkwJG0Ne08Fkz5qET197exv2HDqCocMCELcwFr/9jTPzyojwCPzpw7mdJh47blnpRRz67jhGBMmRGL+I6XJp3LToaZQRvEu7tRpbd6awMfn5eWikbGHVyuUY9xZ5JJVhNEfsH2PQlzbbvQfSmMxGbIsF8z5A9JRJrM2dplEW4OXhjivXrulkvVV4LfmtO77Elg1rER8fjzjK/bi41qhpwL/27sd7707Hhs/W4ccAOYtxXF/Xwkm6lZOuvvrfNqzHACcHhFK6EhLa6Tm00+AqPVB7mz1MTZ/YXv/JWvYRMT4kDOPGh7IpuTkUdbVYkvQxS+04YXbWz9j25UD2O8DGv25gXq69l+3btiD/bDEb+/nWbViXvBKrKMVLWrlCZ+/+vdvYsXM3a/M5mejndtyAnv5Tcvfwwhh5MCQ2Nrh1sxr7KAXiyowZMyG1scAX/9gNGX21vOYgxcmMTNanPfn7/4GSZBHbSbUy7hoQEAgzkw7kFZzWF0Mufwv+vkMIdgdK6GsqPTOL4tkoaNRKgy8zbtDIkcEY+rov2yyrq6twMO2wgS1tw4k+BMJDQ+DQTwqVSoHcvHxcKrus7dZdo6Oi6EtpADoojFRUXsd3RztDkU6hS6Xrf0q8gXaxIzQfE+gKlFcMFejxJyAA5c+Kl6YAlBcm/koCUP6seGkKQHlh4q8kAOXPipemAJQXJv5KAlD+rHhpPpXY8xolKPVIQPDQHtE8X4cA9Pm49ThKANojmufr+B95nv72O1nccAAAAABJRU5ErkJggg==');
+}
diff --git a/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites.css.svg b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites.css.svg
new file mode 100644
index 0000000..ce02a1a
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites.css.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg width="1000" height="23000" viewBox="0 0 1000 23000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><svg width="1000" height="1000" viewBox="0 0 1000 1000" id="blank"/><svg width="1000" height="1000" viewBox="0 0 1000 1000" id="icon--collapsed" y="1000"><path d="M200.102 100L800 500.26 200 900z"/></svg><svg width="1000" height="1000" viewBox="0 0 1000 1000" id="icon--delete" y="2000"><path d="M500 98.344C278.768 98.344 98.344 278.768 98.344 500S278.768 901.656 500 901.656 901.656 721.232 901.656 500 721.232 98.344 500 98.344zm0 100c167.188 0 301.656 134.468 301.656 301.656 0 167.188-134.468 301.656-301.656 301.656-167.188 0-301.656-134.468-301.656-301.656 0-167.188 134.468-301.656 301.656-301.656zm-154.438 97.25a50.005 50.005 0 0 0-34.843 85.844L429.28 500 310.72 618.563a50.006 50.006 0 1 0 70.719 70.718L500 570.72 618.563 689.28a50.006 50.006 0 1 0 70.718-70.718L570.72 500 689.28 381.437a50.006 50.006 0 1 0-70.718-70.718L500 429.28 381.437 310.72a50.005 50.005 0 0 0-35.875-15.125z"/></svg><svg width="1000" height="1000" viewBox="0 0 1000 1000" id="icon--download" y="3000"><path d="M500 100c-220.914 0-400 179.086-400 400s179.086 400 400 400 400-179.086 400-400-179.086-400-400-400zm-26.357 243.536h45.714a11.404 11.404 0 0 1 11.429 11.428V472.25h91.428l-63.25 92.571-63.214 92.572-63.25-92.572-63.25-92.571h92.964V354.964a11.404 11.404 0 0 1 11.429-11.428z"/></svg><svg width="1000" height="1000" viewBox="0 0 1000 1000" id="icon--edit" y="4000"><path d="M644.351 150l-87.07 105.56 155.65 132.863L800 282.863 644.351 150zM528.258 290.747l-261.21 316.68 155.65 132.863 261.209-316.68-155.649-132.863zm-134.584 484.73L237.862 642.812 200 850l193.674-74.523z"/></svg><svg width="1000" height="1000" viewBox="0 0 1000 1000" id="icon--exclaim" y="5000"><path d="M500 100c-220.914 0-400 179.086-400 400s179.086 400 400 400 400-179.086 400-400-179.086-400-400-400zm-54.469 217.719h108.844l-12 271.75H457.5l-11.969-271.75zm1.813 314.062H552.53v67.688H447.344V631.78z"/></svg><svg width="1000" height="1000" viewBox="0 0 1000 1000" id="icon--expanded" y="6000"><path d="M900 250.102L499.74 850 100 250z"/></svg><svg width="1000" height="1000" viewBox="0 0 1000 1000" id="icon--fragment-default" y="7000"/><svg width="1000" height="1000" viewBox="0 0 1000 1000" id="icon--fragment-start" y="8000"><path d="M100 100v800h150V700h450V250h200V100H100zm150 150h300v300H250V250z"/></svg><svg width="1000" height="1000" viewBox="0 0 1000 1000" id="icon--fragment-stop" y="9000"><path d="M900 900V100H700v600H100v200h800z"/></svg><svg width="1000" height="1000" viewBox="0 0 1000 1000" id="icon--handle" y="10000"><path d="M177.397 100.008a76.318 80.006 0 1 0 0 159.997h645.206a76.318 80.006 0 1 0 0-159.997H177.397zm0 319.994a76.318 80.006 0 1 0 0 159.996h645.206a76.318 80.006 0 1 0 0-159.996H177.397zm0 319.993a76.318 80.006 0 1 0 0 159.997h645.206a76.318 80.006 0 1 0 0-159.997H177.397z"/></svg><svg width="1000" height="1000" viewBox="0 0 1000 1000" id="icon--info" y="11000"><path d="M500 100c-220.914 0-400 179.086-400 400s179.086 400 400 400 400-179.086 400-400-179.086-400-400-400zm-49.469 200.531h98.938v70H450.53v-70zm2.594 111h93.75V699.47h-93.75V411.53z"/></svg><svg width="1000" height="1000" viewBox="0 0 1000 1000" id="icon--notes" y="12000"><path d="M200 100v800h600V442.857H500V100H200zm350 1.821v283.893h248.375L550 101.821z"/></svg><svg width="1000" height="1000" viewBox="0 0 1000 1000" id="icon--occurrence-default" y="13000"><path d="M300 100h400v800H300z"/></svg><svg width="1000" height="1000" viewBox="0 0 1000 1000" id="icon--occurrence-start" y="14000"><path d="M100 100v800h375V100H100zm425 400v400h375V500H525z"/></svg><svg width="1000" height="1000" viewBox="0 0 1000 1000" id="icon--occurrence-stop" y="15000"><path d="M100 100v800h375V100H100zm425 0v400h375V100H525z"/></svg><svg width="1000" height="1000" viewBox="0 0 1000 1000" id="icon--open" y="16000"><path d="M100 200v459.155h26.898L244.957 299.57h484.86V200H100zm170.182 140.845L119.452 800H749.27L900 340.845H270.182z"/></svg><svg width="1000" height="1000" viewBox="0 0 1000 1000" id="icon--plus" y="17000"><path d="M443.75 200v243.75H200v112.5h243.75V800h112.5V556.25H800v-112.5H556.25V200h-112.5z"/></svg><svg width="1000" height="1000" viewBox="0 0 1000 1000" id="icon--question" y="18000"><path d="M500 100c-220.914 0-400 179.086-400 400s179.086 400 400 400 400-179.086 400-400-179.086-400-400-400zm-9.375 200.531c44.104 0 79.108 9.542 105 28.625 25.891 19.084 38.843 44.03 38.844 74.844 0 17.683-2.706 33.375-8.063 47.031-5.178 13.481-12.576 25.209-22.218 35.188-9.643 9.98-21.243 18.903-34.813 26.781-13.392 7.879-28.568 15.054-45.531 21.531v59.875h-94.282v-88.5c12.678-3.326 24.104-6.748 34.282-10.25 10.356-3.501 21.156-9.184 32.406-17.062 10.535-7.003 18.764-15.127 24.656-24.406 6.071-9.28 9.094-19.801 9.094-31.532 0-17.507-5.8-29.927-17.406-37.281-11.428-7.528-27.609-11.312-48.5-11.313-12.857 0-27.408 2.73-43.656 8.157-16.071 5.427-30.796 12.421-44.188 21h-10.719v-80.094c11.428-4.727 29.033-9.641 52.781-14.719 23.75-5.252 47.85-7.874 72.313-7.875zm-67.5 329.594h108.219v69.344H423.125v-69.344z"/></svg><svg width="1000" height="1000" viewBox="0 0 1000 1000" id="icon--save" y="19000"><path d="M100 100v800h800V236.844c-20.581-.151-37.219-16.883-37.219-37.5s16.638-37.349 37.219-37.5V100H100zm400 300c55.228 0 100 44.772 100 100s-44.772 100-100 100-100-44.772-100-100 44.772-100 100-100zm0 250c22.16 0 40 17.84 40 40v120c0 22.16-17.84 40-40 40s-40-17.84-40-40V690c0-22.16 17.84-40 40-40z"/></svg><svg width="1000" height="1000" viewBox="0 0 1000 1000" id="icon--settings" y="20000"><path style="text-indent:0;text-align:start;line-height:normal;text-transform:none;block-progression:tb;marker:none;-inkscape-font-specification:Sans" d="M442.857 100a28.509 28.509 0 0 0-28.571 28.571v78.036a304.473 304.473 0 0 0-61.036 25.429l-55.286-55.286a28.493 28.493 0 0 0-40.393 0l-80.821 80.821a28.493 28.493 0 0 0 0 40.393l55.179 55.179a304.13 304.13 0 0 0-25.643 61.143H128.57A28.509 28.509 0 0 0 100 442.857v114.286a28.509 28.509 0 0 0 28.571 28.571h77.715a303.927 303.927 0 0 0 25.643 61.143l-55.179 55.179a28.493 28.493 0 0 0 0 40.393l80.821 80.821a28.493 28.493 0 0 0 40.393 0l55.286-55.286a304.544 304.544 0 0 0 61.036 25.465v78A28.509 28.509 0 0 0 442.857 900h114.286a28.509 28.509 0 0 0 28.571-28.571v-78.036a304.537 304.537 0 0 0 61-25.464l55.322 55.321a28.493 28.493 0 0 0 40.393 0l80.821-80.821a28.493 28.493 0 0 0 0-40.393l-55.179-55.179a303.863 303.863 0 0 0 25.643-61.143h77.715A28.509 28.509 0 0 0 900 557.143V442.857a28.509 28.509 0 0 0-28.571-28.571h-77.715a304.067 304.067 0 0 0-25.643-61.143l55.179-55.179a28.493 28.493 0 0 0 0-40.393l-80.821-80.821a28.493 28.493 0 0 0-40.393 0l-55.322 55.321a304.488 304.488 0 0 0-61-25.464v-78.036A28.509 28.509 0 0 0 557.143 100H442.857zM500 365.286c74.994 0 134.321 59.107 134.321 134.714S574.994 634.679 500 634.679 365.679 575.607 365.679 500 425.006 365.286 500 365.286z" font-weight="400" color="#000" overflow="visible" font-family="Sans"/></svg><svg width="1000" height="1000" viewBox="0 0 1000 1000" id="icon--upload" y="21000"><path d="M500 900c-220.914 0-400-179.086-400-400s179.086-400 400-400 400 179.086 400 400-179.086 400-400 400zm-26.357-243.536h45.714a11.404 11.404 0 0 0 11.429-11.428V527.75h91.428l-63.25-92.571-63.214-92.572-63.25 92.572-63.25 92.571h92.964v117.286a11.404 11.404 0 0 0 11.429 11.428z"/></svg><svg width="1000" height="1000" viewBox="0 0 1000 1000" id="icon--validate" y="22000"><path d="M500 100c-220.914 0-400 179.086-400 400s179.086 400 400 400 400-179.086 400-400-179.086-400-400-400zm179.719 200c8.054 0 13.379.7 15.968 2.094 2.877 1.395 4.313 3.206 4.313 5.437 0 3.627-4.158 10.332-12.5 20.094-97.232 113.25-187.277 232.92-270.125 359C411.622 695.551 399.835 700 382 700c-18.123 0-28.923-.826-32.375-2.5-8.63-3.626-18.712-22.31-30.219-56.063C306.461 604.06 300 580.61 300 571.125c0-10.042 8.765-19.797 26.313-29.281 10.643-6.137 20.157-9.219 28.5-9.219 9.78 0 17.259 7.817 22.437 23.438 10.068 29.567 17.247 44.343 21.563 44.343 3.451 0 6.891-2.51 10.343-7.531 70.478-109.902 135.934-198.717 196.344-266.5C621.034 308.802 645.774 300 679.719 300z"/></svg></svg>
\ No newline at end of file
diff --git a/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites.defs.svg b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites.defs.svg
new file mode 100644
index 0000000..81d66d6
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites.defs.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><svg viewBox="0 0 1000 1000" id="blank"/><svg viewBox="0 0 1000 1000" id="icon--collapsed"><path d="M200.102 100L800 500.26 200 900z"/></svg><svg viewBox="0 0 1000 1000" id="icon--delete"><path d="M500 98.344C278.768 98.344 98.344 278.768 98.344 500S278.768 901.656 500 901.656 901.656 721.232 901.656 500 721.232 98.344 500 98.344zm0 100c167.188 0 301.656 134.468 301.656 301.656 0 167.188-134.468 301.656-301.656 301.656-167.188 0-301.656-134.468-301.656-301.656 0-167.188 134.468-301.656 301.656-301.656zm-154.438 97.25a50.005 50.005 0 0 0-34.843 85.844L429.28 500 310.72 618.563a50.006 50.006 0 1 0 70.719 70.718L500 570.72 618.563 689.28a50.006 50.006 0 1 0 70.718-70.718L570.72 500 689.28 381.437a50.006 50.006 0 1 0-70.718-70.718L500 429.28 381.437 310.72a50.005 50.005 0 0 0-35.875-15.125z"/></svg><svg viewBox="0 0 1000 1000" id="icon--download"><path d="M500 100c-220.914 0-400 179.086-400 400s179.086 400 400 400 400-179.086 400-400-179.086-400-400-400zm-26.357 243.536h45.714a11.404 11.404 0 0 1 11.429 11.428V472.25h91.428l-63.25 92.571-63.214 92.572-63.25-92.572-63.25-92.571h92.964V354.964a11.404 11.404 0 0 1 11.429-11.428z"/></svg><svg viewBox="0 0 1000 1000" id="icon--edit"><path d="M644.351 150l-87.07 105.56 155.65 132.863L800 282.863 644.351 150zM528.258 290.747l-261.21 316.68 155.65 132.863 261.209-316.68-155.649-132.863zm-134.584 484.73L237.862 642.812 200 850l193.674-74.523z"/></svg><svg viewBox="0 0 1000 1000" id="icon--exclaim"><path d="M500 100c-220.914 0-400 179.086-400 400s179.086 400 400 400 400-179.086 400-400-179.086-400-400-400zm-54.469 217.719h108.844l-12 271.75H457.5l-11.969-271.75zm1.813 314.062H552.53v67.688H447.344V631.78z"/></svg><svg viewBox="0 0 1000 1000" id="icon--expanded"><path d="M900 250.102L499.74 850 100 250z"/></svg><svg viewBox="0 0 1000 1000" id="icon--fragment-default"/><svg viewBox="0 0 1000 1000" id="icon--fragment-start"><path d="M100 100v800h150V700h450V250h200V100H100zm150 150h300v300H250V250z"/></svg><svg viewBox="0 0 1000 1000" id="icon--fragment-stop"><path d="M900 900V100H700v600H100v200h800z"/></svg><svg viewBox="0 0 1000 1000" id="icon--handle"><path d="M177.397 100.008a76.318 80.006 0 1 0 0 159.997h645.206a76.318 80.006 0 1 0 0-159.997H177.397zm0 319.994a76.318 80.006 0 1 0 0 159.996h645.206a76.318 80.006 0 1 0 0-159.996H177.397zm0 319.993a76.318 80.006 0 1 0 0 159.997h645.206a76.318 80.006 0 1 0 0-159.997H177.397z"/></svg><svg viewBox="0 0 1000 1000" id="icon--info"><path d="M500 100c-220.914 0-400 179.086-400 400s179.086 400 400 400 400-179.086 400-400-179.086-400-400-400zm-49.469 200.531h98.938v70H450.53v-70zm2.594 111h93.75V699.47h-93.75V411.53z"/></svg><svg viewBox="0 0 1000 1000" id="icon--notes"><path d="M200 100v800h600V442.857H500V100H200zm350 1.821v283.893h248.375L550 101.821z"/></svg><svg viewBox="0 0 1000 1000" id="icon--occurrence-default"><path d="M300 100h400v800H300z"/></svg><svg viewBox="0 0 1000 1000" id="icon--occurrence-start"><path d="M100 100v800h375V100H100zm425 400v400h375V500H525z"/></svg><svg viewBox="0 0 1000 1000" id="icon--occurrence-stop"><path d="M100 100v800h375V100H100zm425 0v400h375V100H525z"/></svg><svg viewBox="0 0 1000 1000" id="icon--open"><path d="M100 200v459.155h26.898L244.957 299.57h484.86V200H100zm170.182 140.845L119.452 800H749.27L900 340.845H270.182z"/></svg><svg viewBox="0 0 1000 1000" id="icon--plus"><path d="M443.75 200v243.75H200v112.5h243.75V800h112.5V556.25H800v-112.5H556.25V200h-112.5z"/></svg><svg viewBox="0 0 1000 1000" id="icon--question"><path d="M500 100c-220.914 0-400 179.086-400 400s179.086 400 400 400 400-179.086 400-400-179.086-400-400-400zm-9.375 200.531c44.104 0 79.108 9.542 105 28.625 25.891 19.084 38.843 44.03 38.844 74.844 0 17.683-2.706 33.375-8.063 47.031-5.178 13.481-12.576 25.209-22.218 35.188-9.643 9.98-21.243 18.903-34.813 26.781-13.392 7.879-28.568 15.054-45.531 21.531v59.875h-94.282v-88.5c12.678-3.326 24.104-6.748 34.282-10.25 10.356-3.501 21.156-9.184 32.406-17.062 10.535-7.003 18.764-15.127 24.656-24.406 6.071-9.28 9.094-19.801 9.094-31.532 0-17.507-5.8-29.927-17.406-37.281-11.428-7.528-27.609-11.312-48.5-11.313-12.857 0-27.408 2.73-43.656 8.157-16.071 5.427-30.796 12.421-44.188 21h-10.719v-80.094c11.428-4.727 29.033-9.641 52.781-14.719 23.75-5.252 47.85-7.874 72.313-7.875zm-67.5 329.594h108.219v69.344H423.125v-69.344z"/></svg><svg viewBox="0 0 1000 1000" id="icon--save"><path d="M100 100v800h800V236.844c-20.581-.151-37.219-16.883-37.219-37.5s16.638-37.349 37.219-37.5V100H100zm400 300c55.228 0 100 44.772 100 100s-44.772 100-100 100-100-44.772-100-100 44.772-100 100-100zm0 250c22.16 0 40 17.84 40 40v120c0 22.16-17.84 40-40 40s-40-17.84-40-40V690c0-22.16 17.84-40 40-40z"/></svg><svg viewBox="0 0 1000 1000" id="icon--settings"><path style="text-indent:0;text-align:start;line-height:normal;text-transform:none;block-progression:tb;marker:none;-inkscape-font-specification:Sans" d="M442.857 100a28.509 28.509 0 0 0-28.571 28.571v78.036a304.473 304.473 0 0 0-61.036 25.429l-55.286-55.286a28.493 28.493 0 0 0-40.393 0l-80.821 80.821a28.493 28.493 0 0 0 0 40.393l55.179 55.179a304.13 304.13 0 0 0-25.643 61.143H128.57A28.509 28.509 0 0 0 100 442.857v114.286a28.509 28.509 0 0 0 28.571 28.571h77.715a303.927 303.927 0 0 0 25.643 61.143l-55.179 55.179a28.493 28.493 0 0 0 0 40.393l80.821 80.821a28.493 28.493 0 0 0 40.393 0l55.286-55.286a304.544 304.544 0 0 0 61.036 25.465v78A28.509 28.509 0 0 0 442.857 900h114.286a28.509 28.509 0 0 0 28.571-28.571v-78.036a304.537 304.537 0 0 0 61-25.464l55.322 55.321a28.493 28.493 0 0 0 40.393 0l80.821-80.821a28.493 28.493 0 0 0 0-40.393l-55.179-55.179a303.863 303.863 0 0 0 25.643-61.143h77.715A28.509 28.509 0 0 0 900 557.143V442.857a28.509 28.509 0 0 0-28.571-28.571h-77.715a304.067 304.067 0 0 0-25.643-61.143l55.179-55.179a28.493 28.493 0 0 0 0-40.393l-80.821-80.821a28.493 28.493 0 0 0-40.393 0l-55.322 55.321a304.488 304.488 0 0 0-61-25.464v-78.036A28.509 28.509 0 0 0 557.143 100H442.857zM500 365.286c74.994 0 134.321 59.107 134.321 134.714S574.994 634.679 500 634.679 365.679 575.607 365.679 500 425.006 365.286 500 365.286z" font-weight="400" color="#000" overflow="visible" font-family="Sans"/></svg><svg viewBox="0 0 1000 1000" id="icon--upload"><path d="M500 900c-220.914 0-400-179.086-400-400s179.086-400 400-400 400 179.086 400 400-179.086 400-400 400zm-26.357-243.536h45.714a11.404 11.404 0 0 0 11.429-11.428V527.75h91.428l-63.25-92.571-63.214-92.572-63.25 92.572-63.25 92.571h92.964v117.286a11.404 11.404 0 0 0 11.429 11.428z"/></svg><svg viewBox="0 0 1000 1000" id="icon--validate"><path d="M500 100c-220.914 0-400 179.086-400 400s179.086 400 400 400 400-179.086 400-400-179.086-400-400-400zm179.719 200c8.054 0 13.379.7 15.968 2.094 2.877 1.395 4.313 3.206 4.313 5.437 0 3.627-4.158 10.332-12.5 20.094-97.232 113.25-187.277 232.92-270.125 359C411.622 695.551 399.835 700 382 700c-18.123 0-28.923-.826-32.375-2.5-8.63-3.626-18.712-22.31-30.219-56.063C306.461 604.06 300 580.61 300 571.125c0-10.042 8.765-19.797 26.313-29.281 10.643-6.137 20.157-9.219 28.5-9.219 9.78 0 17.259 7.817 22.437 23.438 10.068 29.567 17.247 44.343 21.563 44.343 3.451 0 6.891-2.51 10.343-7.531 70.478-109.902 135.934-198.717 196.344-266.5C621.034 308.802 645.774 300 679.719 300z"/></svg></defs></svg>
\ No newline at end of file
diff --git a/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites.png b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites.png
new file mode 100644
index 0000000..546a71c
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites.png
Binary files differ
diff --git a/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/amdocs.png b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/amdocs.png
new file mode 100644
index 0000000..f560f5b
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/amdocs.png
Binary files differ
diff --git a/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/arrow/request-async.svg b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/arrow/request-async.svg
new file mode 100644
index 0000000..11c5086
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/arrow/request-async.svg
@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ width="1000"
+ height="1000"
+ id="svg2985"
+ version="1.1"
+ inkscape:version="0.48.5 r10040"
+ sodipodi:docname="request-async.svg">
+ <metadata
+ id="metadata9">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <defs
+ id="defs7" />
+ <sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="1920"
+ inkscape:window-height="1029"
+ id="namedview5"
+ showgrid="false"
+ inkscape:zoom="0.944"
+ inkscape:cx="297.24147"
+ inkscape:cy="436.65307"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="layer1" />
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1">
+ <path
+ d="M 480.40625 246.34375 L 480.40625 366.90625 L 480.40625 372.8125 L 532.90625 403.96875 L 610.59375 450 L 130.9375 450 L 100 450 L 100 480.9375 L 100 519.0625 L 100 550 L 130.9375 550 L 609.0625 550 L 532.90625 595.15625 L 480.40625 626.3125 L 480.40625 632.21875 L 480.40625 752.84375 L 583.0625 689.5625 L 798.40625 556.84375 L 891.4375 499.5 L 798.375 442.1875 L 583.0625 309.5625 L 480.40625 246.34375 z "
+ id="path3762" />
+ </g>
+</svg>
diff --git a/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/arrow/request-sync.svg b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/arrow/request-sync.svg
new file mode 100644
index 0000000..d741003
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/arrow/request-sync.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ width="1000"
+ height="1000"
+ id="svg2985"
+ version="1.1"
+ inkscape:version="0.48.5 r10040"
+ sodipodi:docname="request-sync.svg">
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1">
+ <path
+ id="rect2996"
+ d="m 100,450 0,43.5 0,13 0,43.5 43.5,0 513,0 43.5,0 0,-43.5 0,-13 0,-43.5 -43.5,0 -513,0 -43.5,0 z m 402.17474,-203.12882 0,120.47069 0,265.32548 0,120.49969 L 599.92483,692.9172 815.24655,560.23996 913.05094,499.93213 815.2194,439.68228 599.89767,307.06303 502.17474,246.87118 z m 130.33345,240.94139 19.74009,12.14855 -19.74009,12.17755 0,-24.3261 z" />
+ </g>
+</svg>
diff --git a/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/arrow/response.svg b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/arrow/response.svg
new file mode 100644
index 0000000..3429077
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/arrow/response.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ width="1000"
+ height="1000"
+ id="svg2985"
+ version="1.1"
+ inkscape:version="0.48.5 r10040"
+ sodipodi:docname="response.svg">
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1">
+ <path
+ id="rect3773-40"
+ d="m 908.375,450 0,35.71875 0,28.5625 0,35.71875 -35.71875,0 -28.5625,0 -35.71875,0 0,-35.71875 0,-28.5625 0,-35.71875 35.71875,0 28.5625,0 35.71875,0 z m -350,0 0,35.71875 0,28.5625 0,35.71875 -35.71875,0 -28.5625,0 -35.71875,0 0,-35.71875 0,-28.5625 0,-35.71875 35.71875,0 28.5625,0 35.71875,0 z m 175,0 0,35.71875 0,28.5625 0,35.71875 -35.71875,0 -28.5625,0 -35.71875,0 0,-35.71875 0,-28.5625 0,-35.71875 35.71875,0 28.5625,0 35.71875,0 z m -222.34375,-203.1875 0,120.5625 0,5.90625 -52.5,31.15625 L 350.625,468.375 297.21875,500 l 53.375,31.625 107.9375,64 52.5,31.15625 0,5.90625 0,120.625 L 408.375,690.03125 193.03125,557.3125 100,499.96875 193.0625,442.65625 408.375,310.03125 511.03125,246.8125 z m -70.3125,252.46875 0,1.4375 -1.1875,-0.71875 1.1875,-0.71875 z"
+ inkscape:connector-curvature="0" />
+ </g>
+</svg>
diff --git a/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/blank.svg b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/blank.svg
new file mode 100644
index 0000000..9ecbff0
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/blank.svg
@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ width="1000"
+ height="1000"
+ id="svg3043"
+ version="1.1"
+ inkscape:version="0.48.5 r10040"
+ sodipodi:docname="New document 4">
+ <defs
+ id="defs5498" />
+ <sodipodi:namedview
+ inkscape:window-height="821"
+ inkscape:window-width="936"
+ inkscape:pageshadow="2"
+ inkscape:pageopacity="0.0"
+ borderopacity="1.0"
+ bordercolor="#666666"
+ pagecolor="#ffffff"
+ id="base"
+ showgrid="false"
+ showguides="true"
+ inkscape:guide-bbox="true"
+ inkscape:zoom="0.454"
+ inkscape:cx="500"
+ inkscape:cy="500"
+ inkscape:window-x="917"
+ inkscape:window-y="218"
+ inkscape:current-layer="layer1"
+ inkscape:window-maximized="0">
+ <sodipodi:guide
+ orientation="horizontal"
+ position="200"
+ id="guide5596" />
+ </sodipodi:namedview>
+ <metadata
+ id="metadata5594">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title></dc:title>
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1" />
+</svg>
diff --git a/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/close.svg b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/close.svg
new file mode 100644
index 0000000..2fd91de
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/close.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ width="1000"
+ height="1000"
+ id="svg2985"
+ version="1.1"
+ inkscape:version="0.48.5 r10040"
+ sodipodi:docname="delete.svg">
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1">
+ <path
+ d="M 500,98.34375 C 278.76784,98.34375 98.34375,278.76784 98.34375,500 98.34375,721.23216 278.76784,901.65625 500,901.65625 721.23214,901.65625 901.65625,721.23216 901.65625,500 901.65625,278.76783 721.23215,98.34375 500,98.34375 z m 0,100 c 167.18813,0 301.65625,134.4681 301.65625,301.65625 C 801.65625,667.18814 667.18814,801.65625 500,801.65625 332.81184,801.65625 198.34375,667.18814 198.34375,500 198.34375,332.81184 332.81184,198.34375 500,198.34375 z m -154.4375,97.25 A 50.005,50.005 0 0 0 310.71875,381.4375 L 429.28125,500 310.71875,618.5625 a 50.005708,50.005708 0 1 0 70.71875,70.71875 L 500,570.71875 618.5625,689.28125 A 50.005708,50.005708 0 1 0 689.28125,618.5625 L 570.71875,500 689.28125,381.4375 A 50.005708,50.005708 0 1 0 618.5625,310.71875 L 500,429.28125 381.4375,310.71875 a 50.005,50.005 0 0 0 -35.875,-15.125 z"
+ id="path3789-6"
+ inkscape:connector-curvature="0" />
+ </g>
+</svg>
diff --git a/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/collapsed.svg b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/collapsed.svg
new file mode 100644
index 0000000..2865518
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/collapsed.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ width="1000"
+ height="1000"
+ id="svg4406"
+ version="1.1"
+ inkscape:version="0.48.5 r10040"
+ sodipodi:docname="collapsed.svg">
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1">
+ <path
+ d="m 500.5625,299.375 a 74.185358,74.185358 0 0 0 -2.65625,0.1875 A 74.185358,74.185358 0 0 0 451.25,315.875 L 128.59375,567.3125 a 74.185358,74.185358 0 1 0 91.1875,117.03125 L 500.125,465.84375 780.21875,684.125 a 74.185358,74.185358 0 1 0 91.1875,-117 L 548.75,315.65625 A 74.185358,74.185358 0 0 0 500.5625,299.375 z"
+ id="path2991-0"
+ inkscape:connector-curvature="0" />
+ </g>
+</svg>
diff --git a/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/delete.svg b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/delete.svg
new file mode 100644
index 0000000..2fd91de
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/delete.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ width="1000"
+ height="1000"
+ id="svg2985"
+ version="1.1"
+ inkscape:version="0.48.5 r10040"
+ sodipodi:docname="delete.svg">
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1">
+ <path
+ d="M 500,98.34375 C 278.76784,98.34375 98.34375,278.76784 98.34375,500 98.34375,721.23216 278.76784,901.65625 500,901.65625 721.23214,901.65625 901.65625,721.23216 901.65625,500 901.65625,278.76783 721.23215,98.34375 500,98.34375 z m 0,100 c 167.18813,0 301.65625,134.4681 301.65625,301.65625 C 801.65625,667.18814 667.18814,801.65625 500,801.65625 332.81184,801.65625 198.34375,667.18814 198.34375,500 198.34375,332.81184 332.81184,198.34375 500,198.34375 z m -154.4375,97.25 A 50.005,50.005 0 0 0 310.71875,381.4375 L 429.28125,500 310.71875,618.5625 a 50.005708,50.005708 0 1 0 70.71875,70.71875 L 500,570.71875 618.5625,689.28125 A 50.005708,50.005708 0 1 0 689.28125,618.5625 L 570.71875,500 689.28125,381.4375 A 50.005708,50.005708 0 1 0 618.5625,310.71875 L 500,429.28125 381.4375,310.71875 a 50.005,50.005 0 0 0 -35.875,-15.125 z"
+ id="path3789-6"
+ inkscape:connector-curvature="0" />
+ </g>
+</svg>
diff --git a/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/download.svg b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/download.svg
new file mode 100644
index 0000000..1cc851b
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/download.svg
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ width="1000"
+ height="1000"
+ id="svg4406"
+ version="1.1"
+ inkscape:version="0.48.5 r10040"
+ sodipodi:docname="download.svg">
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1">
+ <path
+ style="fill:#000000;fill-opacity:1;stroke:none"
+ d="M 500,100 C 279.0861,100 100,279.0861 100,500 100,720.91389 279.0861,900 500,900 720.9139,900 900,720.91389 900,500 900,279.0861 720.9139,100 500,100 z m -26.35714,243.53571 45.71428,0 c 6.33143,0 11.42857,5.09715 11.42857,11.42858 l 0,117.28571 91.42858,0 -63.25,92.57143 L 495.75,657.39286 432.5,564.82143 369.25,472.25 l 92.96429,0 0,-117.28571 c 0,-6.33143 5.09714,-11.42858 11.42857,-11.42858 z"
+ id="path2987"
+ inkscape:connector-curvature="0" />
+ </g>
+</svg>
diff --git a/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/edit.svg b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/edit.svg
new file mode 100644
index 0000000..f374e7c
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/edit.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ width="1000"
+ height="1000"
+ id="svg4406"
+ version="1.1"
+ inkscape:version="0.48.5 r10040"
+ sodipodi:docname="edit.svg">
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1">
+ <path
+ d="M 644.35135,150 557.28154,255.56013 712.93019,388.42333 800,282.8632 644.35135,150 z M 528.25827,290.74684 267.04882,607.42725 422.69747,740.29045 683.90691,423.61005 528.25827,290.74684 z M 393.6742,775.47716 237.8623,642.81188 200,850 393.6742,775.47716 z"
+ id="rect2986"
+ inkscape:connector-curvature="0" />
+ </g>
+</svg>
diff --git a/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/exclaim.svg b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/exclaim.svg
new file mode 100644
index 0000000..8194d81
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/exclaim.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ width="1000"
+ height="1000"
+ id="svg4406"
+ version="1.1"
+ inkscape:version="0.48.5 r10040"
+ sodipodi:docname="exclaim.svg">
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1">
+ <path
+ d="M 500 100 C 279.0861 100 100 279.08611 100 500 C 100 720.91389 279.0861 900 500 900 C 720.9139 900 900 720.91389 900 500 C 900 279.08611 720.9139 100 500 100 z M 445.53125 317.71875 L 554.375 317.71875 L 542.375 589.46875 L 457.5 589.46875 L 445.53125 317.71875 z M 447.34375 631.78125 L 552.53125 631.78125 L 552.53125 699.46875 L 447.34375 699.46875 L 447.34375 631.78125 z "
+ id="path2991" />
+ </g>
+</svg>
diff --git a/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/expanded.svg b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/expanded.svg
new file mode 100644
index 0000000..0de9bff
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/expanded.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ width="1000"
+ height="1000"
+ id="svg4406"
+ version="1.1"
+ inkscape:version="0.48.5 r10040"
+ sodipodi:docname="expanded.svg">
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1">
+ <path
+ d="m 500.5625,700.74658 a 74.185358,74.185358 0 0 1 -2.65625,-0.1875 A 74.185358,74.185358 0 0 1 451.25,684.24658 L 128.59375,432.80908 a 74.185358,74.185358 0 1 1 91.1875,-117.03125 l 280.34375,218.5 280.09375,-218.28125 a 74.185358,74.185358 0 1 1 91.1875,117 L 548.75,684.46533 a 74.185358,74.185358 0 0 1 -48.1875,16.28125 z"
+ id="path2991-0"
+ inkscape:connector-curvature="0" />
+ </g>
+</svg>
diff --git a/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/fragment-default.svg b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/fragment-default.svg
new file mode 100644
index 0000000..5c7af09
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/fragment-default.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ width="1000"
+ height="1000"
+ id="svg2985"
+ version="1.1"
+ inkscape:version="0.48.5 r10040"
+ sodipodi:docname="fragment-default.svg">
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1" />
+</svg>
diff --git a/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/fragment-start.svg b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/fragment-start.svg
new file mode 100644
index 0000000..6ea25b8
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/fragment-start.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ width="1000"
+ height="1000"
+ id="svg2985"
+ version="1.1"
+ inkscape:version="0.48.5 r10040"
+ sodipodi:docname="fragment-start.svg">
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1">
+ <path
+ d="M 100 100 L 100 250 L 100 550 L 100 700 L 100 900 L 250 900 L 250 700 L 700 700 L 700 550 L 700 250 L 900 250 L 900 100 L 250 100 L 100 100 z M 250 250 L 550 250 L 550 550 L 250 550 L 250 250 z "
+ id="rect2984" />
+ </g>
+</svg>
diff --git a/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/fragment-stop.svg b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/fragment-stop.svg
new file mode 100644
index 0000000..47f055c
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/fragment-stop.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ width="1000"
+ height="1000"
+ id="svg2985"
+ version="1.1"
+ inkscape:version="0.48.5 r10040"
+ sodipodi:docname="fragment-stop.svg">
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1">
+ <path
+ d="m 900,900 0,-200 0,-600 -200,0 0,600 -600,0 0,200 600,0 200,0 z"
+ id="rect2984"
+ inkscape:connector-curvature="0" />
+ </g>
+</svg>
diff --git a/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/handle.svg b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/handle.svg
new file mode 100644
index 0000000..c21a7dd
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/handle.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ width="1000"
+ height="1000"
+ id="svg3809"
+ version="1.1"
+ inkscape:version="0.48.5 r10040"
+ sodipodi:docname="handle.svg">
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1">
+ <path
+ d="M 224.4375 150 A 74.815327 74.815327 0 1 0 224.4375 299.625 L 775.5625 299.625 A 74.815327 74.815327 0 1 0 775.5625 150 L 224.4375 150 z M 225.25 425.375 A 74.596181 74.815327 0 1 0 225.25 575 L 774.75 575 A 74.596181 74.815327 0 1 0 774.75 425.375 L 225.25 425.375 z M 225.25 700.375 A 74.596181 74.815327 0 1 0 225.25 850 L 774.75 850 A 74.596181 74.815327 0 1 0 774.75 700.375 L 225.25 700.375 z "
+ id="path2988" />
+ </g>
+</svg>
diff --git a/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/info.svg b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/info.svg
new file mode 100644
index 0000000..04a8b2f
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/info.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ width="1000"
+ height="1000"
+ id="svg4406"
+ version="1.1"
+ inkscape:version="0.48.5 r10040"
+ sodipodi:docname="info.svg">
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1">
+ <path
+ d="M 500 100 C 279.0861 100 100 279.08611 100 500 C 100 720.91389 279.0861 900 500 900 C 720.9139 900 900 720.91389 900 500 C 900 279.08611 720.9139 100 500 100 z M 450.53125 300.53125 L 549.46875 300.53125 L 549.46875 370.53125 L 450.53125 370.53125 L 450.53125 300.53125 z M 453.125 411.53125 L 546.875 411.53125 L 546.875 699.46875 L 453.125 699.46875 L 453.125 411.53125 z "
+ id="path2991" />
+ </g>
+</svg>
diff --git a/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/notes.svg b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/notes.svg
new file mode 100644
index 0000000..29a663f
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/notes.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ width="1000"
+ height="1000"
+ id="svg4406"
+ version="1.1"
+ inkscape:version="0.48.5 r10040"
+ sodipodi:docname="notes.svg">
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1">
+ <path
+ d="m 200,100 0,800 600,0 0,-457.14286 -300,0 L 500,100 200,100 z m 350,1.82143 0,283.89286 248.375,0 L 550,101.82143 z"
+ id="rect4951"
+ inkscape:connector-curvature="0" />
+ </g>
+</svg>
diff --git a/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/occurrence-default.svg b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/occurrence-default.svg
new file mode 100644
index 0000000..a943b4a
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/occurrence-default.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ width="1000"
+ height="1000"
+ id="svg2985"
+ version="1.1"
+ inkscape:version="0.48.5 r10040"
+ sodipodi:docname="occurrence-default.svg">
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1">
+ <path
+
+ d="m 300,100 400,0 0,800 -400,0 z"
+ id="rect2984" />
+ </g>
+</svg>
diff --git a/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/occurrence-start.svg b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/occurrence-start.svg
new file mode 100644
index 0000000..df0e783
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/occurrence-start.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ width="1000"
+ height="1000"
+ id="svg2985"
+ version="1.1"
+ inkscape:version="0.48.5 r10040"
+ sodipodi:docname="occurrence-start.svg">
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1">
+ <path
+ d="M 100 100 L 100 900 L 475 900 L 475 100 L 100 100 z M 525 500 L 525 900 L 900 900 L 900 500 L 525 500 z "
+ id="rect2984" />
+ </g>
+</svg>
diff --git a/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/occurrence-stop.svg b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/occurrence-stop.svg
new file mode 100644
index 0000000..9b7aecc
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/occurrence-stop.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ width="1000"
+ height="1000"
+ id="svg2985"
+ version="1.1"
+ inkscape:version="0.48.5 r10040"
+ sodipodi:docname="occurrence-end.svg">
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1">
+ <path
+ d="M 100 100 L 100 900 L 475 900 L 475 100 L 100 100 z M 525 100 L 525 500 L 900 500 L 900 100 L 525 100 z "
+ id="rect2984" />
+ </g>
+</svg>
diff --git a/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/open.svg b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/open.svg
new file mode 100644
index 0000000..779c20e
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/open.svg
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ width="1000"
+ height="1000"
+ id="svg4406"
+ version="1.1"
+ inkscape:version="0.48.5 r10040"
+ sodipodi:docname="open.svg">
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1">
+ <path
+ style="fill:#000000;fill-opacity:1;stroke:none"
+ d="m 100,200 0,459.1551 26.89847,0 118.05807,-359.58543 484.8614,0 0,-99.56967 L 100,200 z M 270.18206,340.8449 119.45219,800 749.27013,800 900,340.8449 l -629.81794,0 z"
+ id="rect2986"
+ inkscape:connector-curvature="0" />
+ </g>
+</svg>
diff --git a/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/plus.svg b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/plus.svg
new file mode 100644
index 0000000..7854624
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/plus.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ width="1000"
+ height="1000"
+ id="svg4406"
+ version="1.1"
+ inkscape:version="0.48.5 r10040"
+ sodipodi:docname="plus.svg">
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1">
+ <path
+ d="m 443.75,200 0,243.75 -243.75,0 0,112.5 243.75,0 0,243.75 112.5,0 0,-243.75 243.75,0 0,-112.5 -243.75,0 0,-243.75 -112.5,0 z"
+ id="rect2986"
+ inkscape:connector-curvature="0" />
+ </g>
+</svg>
diff --git a/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/question.svg b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/question.svg
new file mode 100644
index 0000000..9cd19ed
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/question.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ width="1000"
+ height="1000"
+ id="svg4406"
+ version="1.1"
+ inkscape:version="0.48.5 r10040"
+ sodipodi:docname="question.svg">
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1">
+ <path
+ d="M 500 100 C 279.0861 100 100 279.08611 100 500 C 100 720.91389 279.0861 900 500 900 C 720.9139 900 900 720.91389 900 500 C 900 279.08611 720.9139 100 500 100 z M 490.625 300.53125 C 534.72949 300.53165 569.73333 310.07321 595.625 329.15625 C 621.51612 348.24003 634.46844 373.18672 634.46875 404 C 634.46844 421.68309 631.76279 437.37548 626.40625 451.03125 C 621.22767 464.51244 613.82953 476.23956 604.1875 486.21875 C 594.54491 496.19836 582.94543 505.12171 569.375 513 C 555.98266 520.87866 540.80688 528.05356 523.84375 534.53125 L 523.84375 594.40625 L 429.5625 594.40625 L 429.5625 505.90625 C 442.24025 502.57999 453.66561 499.15799 463.84375 495.65625 C 474.20016 492.1549 485.00046 486.47244 496.25 478.59375 C 506.78495 471.59089 515.01354 463.46683 520.90625 454.1875 C 526.97714 444.90866 529.9998 434.38669 530 422.65625 C 529.9998 405.14881 524.20006 392.72855 512.59375 385.375 C 501.16564 377.847 484.98529 374.06283 464.09375 374.0625 C 451.23719 374.06283 436.68648 376.79168 420.4375 382.21875 C 404.36687 387.64646 389.64205 394.64027 376.25 403.21875 L 365.53125 403.21875 L 365.53125 323.125 C 376.95914 318.39829 394.56375 313.48389 418.3125 308.40625 C 442.06106 303.15434 466.16192 300.53165 490.625 300.53125 z M 423.125 630.125 L 531.34375 630.125 L 531.34375 699.46875 L 423.125 699.46875 L 423.125 630.125 z "
+ id="path2991" />
+ </g>
+</svg>
diff --git a/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/save.svg b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/save.svg
new file mode 100644
index 0000000..e71a3a3
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/save.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ width="1000"
+ height="1000"
+ id="svg4406"
+ version="1.1"
+ inkscape:version="0.48.5 r10040"
+ sodipodi:docname="save.svg">
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1">
+ <path
+ d="M 100 100 L 100 900 L 900 900 L 900 236.84375 C 879.41881 236.69254 862.78125 219.96058 862.78125 199.34375 C 862.78125 178.72692 879.41881 161.99496 900 161.84375 L 900 100 L 100 100 z M 500 400 C 555.22847 400 600 444.77152 600 500 C 600 555.22847 555.22847 600 500 600 C 444.77153 600 400 555.22847 400 500 C 400 444.77152 444.77153 400 500 400 z M 500 650 C 522.16 650 540 667.84 540 690 L 540 810 C 540 832.16 522.16 850 500 850 C 477.84 850 460 832.16 460 810 L 460 690 C 460 667.84 477.84 650 500 650 z "
+ id="rect2987" />
+ </g>
+</svg>
diff --git a/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/settings.svg b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/settings.svg
new file mode 100644
index 0000000..2559806
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/settings.svg
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ width="1000"
+ height="1000"
+ id="svg2985"
+ version="1.1"
+ inkscape:version="0.48.5 r10040"
+ sodipodi:docname="settings.svg">
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1">
+ <path
+d="m 442.85714,100 c -15.82857,-1.1e-5 -28.57144,12.74286 -28.57143,28.57143 l 0,78.03571 c -21.39083,6.29739 -41.83274,14.84225 -61.03571,25.42857 L 297.96429,176.75 c -11.1925,-11.19249 -29.20038,-11.19249 -40.39286,0 L 176.75,257.57143 c -11.19249,11.19248 -11.19249,29.20038 0,40.39286 l 55.17857,55.17857 c -10.65924,19.2368 -19.30642,39.7185 -25.64286,61.14285 l -77.71428,0 C 112.74286,414.2857 99.999989,427.02857 100,442.85714 l 0,114.28572 c -1.1e-5,15.82857 12.74286,28.57144 28.57143,28.57143 l 77.71428,0 c 6.33867,21.43243 14.97845,41.89934 25.64286,61.14285 L 176.75,702.03571 c -11.19249,11.19248 -11.19249,29.20038 0,40.39286 L 257.57143,823.25 c 11.19248,11.19249 29.20036,11.19249 40.39286,0 L 353.25,767.96429 c 19.20386,10.58763 39.64379,19.16626 61.03571,25.46428 l 0,78 c -10e-6,15.82857 12.74286,28.57144 28.57143,28.57143 l 114.28572,0 c 15.82857,10e-6 28.57144,-12.74286 28.57143,-28.57143 l 0,-78.03571 c 21.3803,-6.29801 41.80587,-14.88105 61,-25.46429 L 702.03571,823.25 c 11.19248,11.19249 29.20038,11.19249 40.39286,0 L 823.25,742.42857 c 11.19249,-11.19248 11.19249,-29.20038 0,-40.39286 l -55.17857,-55.17857 c 10.6655,-19.24547 19.30402,-39.70804 25.64286,-61.14285 l 77.71428,0 c 15.82857,10e-6 28.57144,-12.74286 28.57143,-28.57143 l 0,-114.28572 c 10e-6,-15.82857 -12.74286,-28.57144 -28.57143,-28.57143 l -77.71428,0 c -6.33662,-21.42673 -14.98253,-41.90409 -25.64286,-61.14285 L 823.25,297.96429 c 11.19249,-11.1925 11.19249,-29.20038 0,-40.39286 L 742.42857,176.75 c -11.19248,-11.19249 -29.20038,-11.19249 -40.39286,0 l -55.32142,55.32143 c -19.19616,-10.58354 -39.61723,-19.16664 -61,-25.46429 l 0,-78.03571 C 585.7143,112.74286 572.97143,99.999989 557.14286,100 l -114.28572,0 z M 500,365.28571 c 74.99435,0 134.32143,59.10773 134.32143,134.71429 0,75.60656 -59.32708,134.67857 -134.32143,134.67857 -74.99437,0 -134.32143,-59.07201 -134.32143,-134.67857 0,-75.60656 59.32708,-134.71429 134.32143,-134.71429 z"
+ id="path3783"
+ inkscape:connector-curvature="0" />
+ <g
+ id="g3951" />
+ </g>
+</svg>
diff --git a/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/upload.svg b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/upload.svg
new file mode 100644
index 0000000..453f841
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/upload.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ width="1000"
+ height="1000"
+ id="svg4406"
+ version="1.1"
+ inkscape:version="0.48.5 r10040"
+ sodipodi:docname="upload.svg">
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1">
+ <path
+ d="M 500,900 C 279.0861,900 100,720.9139 100,500 100,279.08611 279.0861,100 500,100 c 220.9139,0 400,179.08611 400,400 0,220.9139 -179.0861,400 -400,400 z m -26.35714,-243.53571 45.71428,0 c 6.33143,0 11.42857,-5.09715 11.42857,-11.42858 l 0,-117.28571 91.42858,0 -63.25,-92.57143 L 495.75,342.60714 432.5,435.17857 369.25,527.75 l 92.96429,0 0,117.28571 c 0,6.33143 5.09714,11.42858 11.42857,11.42858 z"
+ id="path2987"
+ inkscape:connector-curvature="0" />
+ </g>
+</svg>
diff --git a/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/validate.svg b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/validate.svg
new file mode 100644
index 0000000..35cc9fa
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/icon/validate.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ width="1000"
+ height="1000"
+ id="svg4406"
+ version="1.1"
+ inkscape:version="0.48.5 r10040"
+ sodipodi:docname="validate.svg">
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1">
+ <path
+ d="M 500 100 C 279.08608 100 100 279.08609 100 500 C 100 720.91389 279.08608 900 500 900 C 720.91389 900 900 720.91389 900 500 C 900 279.08609 720.91389 100 500 100 z M 679.71875 300 C 687.77296 300.00048 693.09804 300.69955 695.6875 302.09375 C 698.56369 303.48895 699.99953 305.30021 700 307.53125 C 699.99953 311.15798 695.84187 317.86261 687.5 327.625 C 590.26844 440.87501 500.22263 560.54434 417.375 686.625 C 411.6215 695.55114 399.83514 700.00006 382 700 C 363.87689 700.00006 353.07688 699.17376 349.625 697.5 C 340.99491 693.87387 330.9128 675.18934 319.40625 641.4375 C 306.46119 604.05972 299.99993 580.60914 300 571.125 C 299.99993 561.08339 308.76478 551.32795 326.3125 541.84375 C 336.95605 535.70737 346.47007 532.62524 354.8125 532.625 C 364.59303 532.62524 372.07186 540.44209 377.25 556.0625 C 387.31816 585.63032 394.49734 600.40643 398.8125 600.40625 C 402.26433 600.40643 405.70408 597.8961 409.15625 592.875 C 479.63425 482.97293 545.08977 394.15781 605.5 326.375 C 621.03359 308.80222 645.77372 300.00048 679.71875 300 z "
+ id="path2991" />
+ </g>
+</svg>
diff --git a/dox-sequence-diagram-ui/src/main/webapp/res/sdc-sequencer.scss b/dox-sequence-diagram-ui/src/main/webapp/res/sdc-sequencer.scss
new file mode 100644
index 0000000..bcb01d2
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/sdc-sequencer.scss
@@ -0,0 +1,87 @@
+@import 'ecomp/asdc/sequencer/sequencer-common.scss';
+
+.asdcs-control {
+
+ width: 100%;
+ height: 100%;
+ min-height: $asdcsApplicationMinHeight;
+
+ * {
+ outline: none;
+ line-height: initial;
+ text-align: initial;
+ }
+
+ p, div, span, td, input, select, option {
+ font-size: $asdcsFontSize;
+ color: $asdcsColorOneDark;
+ padding: 0;
+ margin: 0;
+ }
+
+ table {
+ border-collapse: initial;
+ border-spacing: initial;
+ }
+
+ // SVG always fills its container.
+
+ svg {
+ height:100%;
+ width: 100%;
+ }
+
+ button {
+
+ border-radius: 4px;
+ background-color: $asdcsColorButtonBG;
+ padding: 4px;
+ border: none;
+ color: $asdcsColorWhitish;
+ min-width: 30px;
+ min-height: 30px;
+ text-align: center;
+ vertical-align: middle;
+
+ &:hover {
+ cursor: pointer;
+ background-color: $asdcsColorEmphasisHover;
+ color: $asdcsColorWhite;
+ @include transition(background-color 250ms ease);
+ }
+
+ &:disabled {
+ cursor: default;
+ background-color:gray;
+ color:darkGray;
+ }
+
+ }
+
+ form {
+ display: none;
+ }
+
+ ::-webkit-scrollbar {
+ width: 10px;
+ }
+
+ ::-webkit-scrollbar-track {
+ border-radius: 0;
+ background-color: $asdcsColorOneLight;
+ }
+
+ ::-webkit-scrollbar-thumb {
+ border-radius: 6px;
+ margin:1px;
+ background-color: $asdcsColorOne;
+ }
+}
+
+@import 'ecomp/asdc/sequencer/sequencer-controls.scss';
+@import 'ecomp/asdc/sequencer/sequencer-diagram.scss';
+@import 'ecomp/asdc/sequencer/sequencer-editor.scss';
+@import 'ecomp/asdc/sequencer/sequencer-dialog.scss';
+@import 'ecomp/asdc/sequencer/sequencer-designer.scss';
+@import 'ecomp/asdc/sequencer/sequencer-actions.scss';
+
diff --git a/dox-sequence-diagram-ui/src/main/webapp/res/thirdparty/react-select/react-select.min.css b/dox-sequence-diagram-ui/src/main/webapp/res/thirdparty/react-select/react-select.min.css
new file mode 100644
index 0000000..f1fa71d
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/thirdparty/react-select/react-select.min.css
@@ -0,0 +1 @@
+.Select,.Select-control{position:relative}.Select-arrow-zone,.Select-clear-zone,.Select-loading-zone{text-align:center;cursor:pointer}.Select,.Select div,.Select input,.Select span{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.Select.is-disabled>.Select-control{background-color:#f9f9f9}.Select.is-disabled>.Select-control:hover{box-shadow:none}.Select.is-disabled .Select-arrow-zone{cursor:default;pointer-events:none}.Select-control{background-color:#fff;border-radius:4px;border:1px solid #ccc;color:#333;cursor:default;display:table;height:36px;outline:0;overflow:hidden;width:100%}.is-searchable.is-focused:not(.is-open)>.Select-control,.is-searchable.is-open>.Select-control{cursor:text}.Select-control:hover{box-shadow:0 1px 0 rgba(0,0,0,.06)}.is-open>.Select-control{border-bottom-right-radius:0;border-bottom-left-radius:0;background:#fff;border-color:#b3b3b3 #ccc #d9d9d9}.is-open>.Select-control>.Select-arrow{border-color:transparent transparent #999;border-width:0 5px 5px}.is-focused:not(.is-open)>.Select-control{border-color:#007eff;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 0 3px rgba(0,126,255,.1)}.Select--single>.Select-control .Select-value,.Select-placeholder{bottom:0;color:#aaa;left:0;line-height:34px;padding-left:10px;padding-right:10px;position:absolute;right:0;top:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.has-value.Select--single>.Select-control>.Select-value .Select-value-label,.has-value.is-pseudo-focused.Select--single>.Select-control>.Select-value .Select-value-label{color:#333}.has-value.Select--single>.Select-control>.Select-value a.Select-value-label,.has-value.is-pseudo-focused.Select--single>.Select-control>.Select-value a.Select-value-label{cursor:pointer;text-decoration:none}.has-value.Select--single>.Select-control>.Select-value a.Select-value-label:focus,.has-value.Select--single>.Select-control>.Select-value a.Select-value-label:hover,.has-value.is-pseudo-focused.Select--single>.Select-control>.Select-value a.Select-value-label:focus,.has-value.is-pseudo-focused.Select--single>.Select-control>.Select-value a.Select-value-label:hover{color:#007eff;outline:0;text-decoration:underline}.Select-input{height:34px;padding-left:10px;padding-right:10px;vertical-align:middle}.Select-input>input{width:100%;background:none;border:0;box-shadow:none;cursor:default;display:inline-block;font-family:inherit;font-size:inherit;margin:0;outline:0;line-height:14px;padding:8px 0 12px;-webkit-appearance:none}.Select-loading,.Select-loading-zone{width:16px;position:relative;vertical-align:middle}.is-focused .Select-input>input{cursor:text}.has-value.is-pseudo-focused .Select-input{opacity:0}.Select-control:not(.is-searchable)>.Select-input{outline:0}.Select-loading-zone{display:table-cell}.Select-loading{-webkit-animation:Select-animation-spin .4s infinite linear;-o-animation:Select-animation-spin .4s infinite linear;animation:Select-animation-spin .4s infinite linear;height:16px;box-sizing:border-box;border-radius:50%;border:2px solid #ccc;border-right-color:#333;display:inline-block}.Select-clear-zone{-webkit-animation:Select-animation-fadeIn .2s;-o-animation:Select-animation-fadeIn .2s;animation:Select-animation-fadeIn .2s;color:#999;display:table-cell;position:relative;vertical-align:middle;width:17px}.Select-clear-zone:hover{color:#D0021B}.Select-clear{display:inline-block;font-size:18px;line-height:1}.Select--multi .Select-clear-zone{width:17px}.Select-arrow-zone{display:table-cell;position:relative;vertical-align:middle;width:25px;padding-right:5px}.Select-arrow{border-color:#999 transparent transparent;border-style:solid;border-width:5px 5px 2.5px;display:inline-block;height:0;width:0}.Select-noresults,.Select-option{box-sizing:border-box;display:block;padding:8px 10px}.Select-arrow-zone:hover>.Select-arrow,.is-open .Select-arrow{border-top-color:#666}@-webkit-keyframes Select-animation-fadeIn{from{opacity:0}to{opacity:1}}@keyframes Select-animation-fadeIn{from{opacity:0}to{opacity:1}}.Select-menu-outer{border-bottom-right-radius:4px;border-bottom-left-radius:4px;background-color:#fff;border:1px solid #ccc;border-top-color:#e6e6e6;box-shadow:0 1px 0 rgba(0,0,0,.06);box-sizing:border-box;margin-top:-1px;max-height:200px;position:absolute;top:100%;width:100%;z-index:1;-webkit-overflow-scrolling:touch}.Select-menu{max-height:198px;overflow-y:auto}.Select-option{background-color:#fff;color:#666;cursor:pointer}.Select-option:last-child{border-bottom-right-radius:4px;border-bottom-left-radius:4px}.Select-option.is-selected{background-color:#f5faff;background-color:rgba(0,126,255,.04);color:#333}.Select-option.is-focused{background-color:#ebf5ff;background-color:rgba(0,126,255,.08);color:#333}.Select-option.is-disabled{color:#ccc;cursor:default}.Select-noresults{color:#999;cursor:default}.Select--multi .Select-input{vertical-align:middle;margin-left:10px;padding:0}.Select--multi.has-value .Select-input{margin-left:5px}.Select--multi .Select-value{background-color:#ebf5ff;background-color:rgba(0,126,255,.08);border-radius:2px;border:1px solid rgba(0,126,255,.24);color:#007eff;display:inline-block;font-size:.9em;line-height:1.4;margin-left:5px;margin-top:5px;vertical-align:top}.Select--multi .Select-value-icon,.Select--multi .Select-value-label{display:inline-block;vertical-align:middle}.Select--multi .Select-value-label{border-bottom-right-radius:2px;border-top-right-radius:2px;cursor:default;padding:2px 5px}.Select--multi a.Select-value-label{color:#007eff;cursor:pointer;text-decoration:none}.Select--multi a.Select-value-label:hover{text-decoration:underline}.Select--multi .Select-value-icon{cursor:pointer;border-bottom-left-radius:2px;border-top-left-radius:2px;border-right:1px solid #c2e0ff;border-right:1px solid rgba(0,126,255,.24);padding:1px 5px 3px}.Select--multi .Select-value-icon:focus,.Select--multi .Select-value-icon:hover{background-color:#d8eafd;background-color:rgba(0,113,230,.08);color:#0071e6}.Select--multi .Select-value-icon:active{background-color:#c2e0ff;background-color:rgba(0,126,255,.24)}.Select--multi.is-disabled .Select-value{background-color:#fcfcfc;border:1px solid #e3e3e3;color:#333}.Select--multi.is-disabled .Select-value-icon{cursor:not-allowed;border-right:1px solid #e3e3e3}.Select--multi.is-disabled .Select-value-icon:active,.Select--multi.is-disabled .Select-value-icon:focus,.Select--multi.is-disabled .Select-value-icon:hover{background-color:#fcfcfc}@keyframes Select-animation-spin{to{transform:rotate(1turn)}}@-webkit-keyframes Select-animation-spin{to{-webkit-transform:rotate(1turn)}}
