Add new code new version

Change-Id: Ic02a76313503b526f17c3df29eb387a29fe6a42a
Signed-off-by: Michael Lando <ml636r@att.com>

54 files changed, 2254 insertions, 0 deletions

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 0000000000..5d23eff34f
--- /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 0000000000..1880ac3047
--- /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 0000000000..77f0dbc15f
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/common/fonts/omnes-att-bold-italic.otf
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 0000000000..136afca84c
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/common/fonts/omnes-att-bold.otf
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 0000000000..5dc1da79d4
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/common/fonts/omnes-att-italic.otf
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 0000000000..b13ae4fede
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/common/fonts/omnes-att-light-Italic.otf
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 0000000000..587d871e6f
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/common/fonts/omnes-att-light.otf
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 0000000000..f824bc23e7
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/common/fonts/omnes-att-medium-italic.otf
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 0000000000..3085c1fa39
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/common/fonts/omnes-att-medium.otf
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 0000000000..a1a78eb7ca
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/common/fonts/omnes-att-regular.otf
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 0000000000..bc5b151c16
--- /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 0000000000..e90a435a98
--- /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 0000000000..68256b9c3e
--- /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 0000000000..9caeee5c57
--- /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 0000000000..0d9eef54d2
--- /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 0000000000..310c4d0c40
--- /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 0000000000..fe67c9059e
--- /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 0000000000..89a6412dd0
--- /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 0000000000..da35ba9182
--- /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 0000000000..bd13af16e0
--- /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 0000000000..f23295399b
--- /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 0000000000..ce02a1a41e
--- /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 0000000000..81d66d69d0
--- /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 0000000000..546a71c681
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites.png
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 0000000000..f560f5be17
--- /dev/null
+++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sprites/amdocs.png
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 0000000000..11c5086198
--- /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 0000000000..d7410035a4
--- /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 0000000000..3429077f21
--- /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 0000000000..9ecbff0eca
--- /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 0000000000..2fd91dea94
--- /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 0000000000..2865518a49
--- /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 0000000000..2fd91dea94
--- /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 0000000000..1cc851b518
--- /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 0000000000..f374e7c8d5
--- /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 0000000000..8194d819b1
--- /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 0000000000..0de9bffb93
--- /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 0000000000..5c7af09ea3
--- /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 0000000000..6ea25b8c70
--- /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 0000000000..47f055c873
--- /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 0000000000..c21a7dddb7
--- /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 0000000000..04a8b2f205
--- /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 0000000000..29a663f602
--- /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 0000000000..a943b4acbc
--- /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 0000000000..df0e78377d
--- /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 0000000000..9b7aecc04e
--- /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 0000000000..779c20e471
--- /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 0000000000..7854624a97
--- /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 0000000000..9cd19eda9a
--- /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 0000000000..e71a3a3cae
--- /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 0000000000..255980690a
--- /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 0000000000..453f8418b9
--- /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 0000000000..35cc9fa418
--- /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 0000000000..bcb01d2253
--- /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 0000000000..f1fa71dec4
--- /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)}}