Raptor UI Changes, user profile, folder restructure

Issue-ID: PORTAL-902
Change-Id: Ib76bb3fce7efe55504b75d2fc4764bafb9f8e908
Signed-off-by: mravula <mr257h@att.com>

34 files changed, 10198 insertions, 0 deletions

diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/report-run-routing.module.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/report-run-routing.module.ts
new file mode 100644
index 00000000..38f4d5b3
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/report-run-routing.module.ts
@@ -0,0 +1,28 @@
+import {RouterModule, Routes} from '@angular/router';
+
+import {NgModule} from '@angular/core';
+import {ReportRunComponent} from './report-run.component';
+import {RunReportFormFieldsComponent} from './run/run-report-form-fields/run-report-form-fields.component';
+
+
+const routes: Routes = [
+    {
+        path: '',
+        component: ReportRunComponent,
+        children: [
+            {path: ':reportId', component: RunReportFormFieldsComponent},
+            {path: ':reportId/:queryParameters', component: RunReportFormFieldsComponent},
+            {path: ':reportId/:queryParameters/:groupSelectValue', component: RunReportFormFieldsComponent},
+            {path: ':reportId/:queryParameters/:groupSelectValue/:showBackButton/:downloadPrevReport', component: RunReportFormFieldsComponent},
+            {path: '', component: RunReportFormFieldsComponent},
+        ]
+    }
+];
+
+@NgModule({
+    imports: [RouterModule.forChild(routes)],
+    exports: [RouterModule]
+})
+export  class ReportRunRouting{
+
+}
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/report-run.component.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/report-run.component.html
new file mode 100644
index 00000000..0680b43f
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/report-run.component.html
@@ -0,0 +1 @@
+<router-outlet></router-outlet>
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/report-run.component.scss b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/report-run.component.scss
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/report-run.component.scss
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/report-run.component.spec.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/report-run.component.spec.ts
new file mode 100644
index 00000000..af615a92
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/report-run.component.spec.ts
@@ -0,0 +1,26 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { ReportRunComponent } from './report-run.component';
+
+describe('ReportRunComponent', () => {
+  let component: ReportRunComponent;
+  let fixture: ComponentFixture<ReportRunComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ReportRunComponent ],
+      imports: [ RouterTestingModule]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ReportRunComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/report-run.component.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/report-run.component.ts
new file mode 100644
index 00000000..e74449cb
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/report-run.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-report-run',
+  templateUrl: './report-run.component.html',
+  styleUrls: ['./report-run.component.scss']
+})
+export class ReportRunComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/report-run.module.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/report-run.module.ts
new file mode 100644
index 00000000..775494d7
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/report-run.module.ts
@@ -0,0 +1,62 @@
+import {NgModule} from '@angular/core';
+import {RunDashboardReportComponent} from './run/run-report/run-dashboard-report/run-dashboard-report.component';
+import {RunReportFormFieldsComponent} from './run/run-report-form-fields/run-report-form-fields.component';
+import {RunReportComponent} from './run/run-report/run-report.component';
+import {ReportRunComponent} from './report-run.component';
+import {RunReportResultSetComponent} from './run/run-report-result-set/run-report-result-set.component';
+import {
+    MatAutocompleteModule,
+    MatCheckboxModule,
+    MatDatepickerModule,
+    MatFormFieldModule,
+    MatIconModule,
+    MatInputModule,
+    MatPaginatorModule,
+    MatRadioModule,
+    MatSelectModule,
+    MatSortModule,
+    MatTableModule
+} from '@angular/material';
+import {CommonModule} from '@angular/common';
+import {RouterModule} from '@angular/router';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {GridsterModule} from 'angular-gridster2';
+import {RunComponent} from './run/run.component';
+import {ReportRunRouting} from './report-run-routing.module';
+import {NgbTooltipModule} from '@ng-bootstrap/ng-bootstrap';
+import { RemoveSpaceDirective} from './run/run-report-form-fields/remove-space.directive';
+
+@NgModule({
+    declarations: [RunDashboardReportComponent,
+        RunReportFormFieldsComponent,
+        RunReportComponent,
+        ReportRunComponent,
+        RunReportResultSetComponent,
+        RunComponent,
+        RemoveSpaceDirective],
+    imports: [
+        MatTableModule,
+        CommonModule,
+        RouterModule,
+        MatIconModule,
+        MatCheckboxModule,
+        MatFormFieldModule,
+        ReactiveFormsModule,
+        MatAutocompleteModule,
+        MatPaginatorModule,
+        FormsModule,
+        GridsterModule,
+        MatSelectModule,
+        MatDatepickerModule,
+        MatRadioModule,
+        MatInputModule,
+        ReportRunRouting,
+        MatSortModule,
+        NgbTooltipModule
+    ],
+    exports: [RunReportComponent, RunComponent]
+})
+
+export class ReportRun {
+
+}
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-form-fields/remove-space.directive.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-form-fields/remove-space.directive.ts
new file mode 100644
index 00000000..5bc8058d
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-form-fields/remove-space.directive.ts
@@ -0,0 +1,18 @@
+import {Directive, ElementRef, HostListener} from '@angular/core';
+
+@Directive({
+  selector: '[appRemoveSpace]'
+})
+export class RemoveSpaceDirective {
+
+    constructor(private _el: ElementRef) { }
+
+    @HostListener('textarea', ['$event']) onInputChange(event) {
+        const initialValue = this._el.nativeElement.value;
+        this._el.nativeElement.value = initialValue.toString().trim();
+        if ( initialValue !== this._el.nativeElement.value) {
+            event.stopPropagation();
+        }
+    }
+
+}
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-form-fields/run-report-form-fields.component.css b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-form-fields/run-report-form-fields.component.css
new file mode 100644
index 00000000..91456c6a
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-form-fields/run-report-form-fields.component.css
@@ -0,0 +1,4146 @@
+.wrapper {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+}
+
+.wrapper > div {
+    border-radius: 3px;
+    padding: 0.4em;
+}
+
+mat-button-toggle-group {
+    width: 800px;
+}
+
+.stdForm {
+    margin-left: 20px;
+    line-height: 0.5;
+}
+
+.fieldWidth {
+    width: 200px;
+}
+
+.labelWidth {
+    font-weight: normal;
+    width: 300px;
+}
+
+mat-select {
+    border: 1px solid #d2d2d2;
+    border-radius: 6px;
+    height: 36px;
+}
+
+:host ::ng-deep .mat-select-value {
+    padding: 8px;
+    font-size: 12px;
+    padding-left: 15px;
+}
+
+:host ::ng-deep .mat-form-field-underline {
+    display: none;
+}
+
+:host ::ng-deep .mat-form-field-infix {
+    padding: 0;
+    border-top: 0;
+}
+
+:host ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-wrapper {
+    padding-bottom: 0;
+}
+
+:host ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-infix {
+    padding: 0;
+}
+
+.mat-form-field {
+    width: 200px;
+}
+
+label {
+    size: 70px;
+    padding-right: 15px;
+}
+
+input {
+    width: 200px;
+    height: 20px;
+}
+
+.Heading {
+    font-size: 45px;
+}
+
+.field-group {
+    position: relative;
+    display: block;
+}
+
+label + .field-group, label + .input-append, label + .row, label + .row-nowrap, label + .form-row {
+    margin-top: 5px;
+}
+
+
+select {
+    display: block;
+    width: 200px;
+    padding: 15px;
+    background-color: #e6e6e61a
+}
+
+.checkbox .skin {
+    background-color: #fff;
+    border: 1px solid #d2d2d2;
+    border-radius: 3px;
+    display: inline-block;
+    height: 24px;
+    width: 24px;
+    position: absolute;
+    left: 0;
+    top: 0;
+}
+
+html {
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: touch;
+    height: 100%;
+    position: relative;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+p,
+blockquote,
+figure,
+ol,
+ul {
+    margin: 0;
+    padding: 0;
+}
+
+sub,
+.img-no-rwd {
+    max-width: inherit !important;
+}
+
+svg {
+    display: inline-block;
+}
+
+button,
+input,
+select,
+textarea {
+    margin: 0;
+    font-size: 100%;
+    vertical-align: middle;
+}
+
+::-moz-focus-inner {
+    padding: 0;
+    border: 0;
+}
+
+button,
+html input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+    appearance: button;
+    cursor: pointer;
+}
+
+label,
+select,
+button,
+input[type="button"],
+input[type="reset"],
+input[type="submit"],
+input[type="radio"],
+input[type="checkbox"] {
+    cursor: pointer;
+}
+
+input[type=search] {
+    -webkit-appearance: textfield;
+}
+
+input[type=search]::-webkit-search-cancel-button,
+input[type=search]::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+
+select {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+}
+
+small {
+    font-size: 1.6rem;
+}
+
+.container {
+    margin: 0 auto;
+    padding: 0;
+}
+
+input {
+    padding: 8px 15px 8px 15px;
+}
+
+.field-group input.input-emphasized[type="search"] + .reset-field:after {
+    top: 14px;
+}
+
+.field-group input.input-emphasized[type="search"] + .reset-field {
+    height: 46px;
+    top: 1px;
+}
+
+p,
+h2,
+h3 {
+    orphans: 3;
+    widows: 3;
+}
+
+h2,
+h3 {
+    page-break-after: avoid;
+}
+
+.mar-top-0 {
+    margin-top: 0px;
+}
+
+.mar-top-30 {
+    margin-top: 30px;
+}
+
+a:focus {
+    outline: thin dotted #191919;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-weight: normal;
+    text-rendering: optimizeLegibility;
+    margin: 0;
+    line-height: 1;
+}
+
+@media (max-width: 767px) {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    .heading-page {
+        font-size: 2rem;
+        font-family: "Omnes-ECOMP-W02", Arial;
+        margin-bottom: 30px;
+    }
+
+    .heading-major-section {
+        font-size: 2rem;
+        font-family: "Omnes-ECOMP-W02", Arial;
+        margin-bottom: 30px;
+    }
+
+    .heading-sub-section {
+        font-size: 2rem;
+        font-family: "Omnes-ECOMP-W02", Arial;
+        margin-bottom: 20px;
+    }
+
+    .heading-medium {
+        font-size: 2rem;
+        font-family: "Omnes-ECOMP-W02", Arial;
+        margin-bottom: 20px;
+    }
+
+    .heading-medium-emphasis {
+        font-size: 2rem;
+        font-family: "Omnes-ECOMP-W02", Arial;
+        margin-bottom: 20px;
+    }
+
+    .heading-small {
+        font-size: 1.6rem;
+        font-family: "Omnes-ECOMP-W02", Arial;
+        margin-bottom: 10px;
+    }
+
+    .heading-small-emphasis {
+        font-size: 1.6rem;
+        font-family: "Omnes-ECOMP-W02-Medium", Arial;
+        margin-bottom: 5px;
+    }
+
+    * + .heading-major-section {
+        margin-top: 30px;
+    }
+
+    * + .heading-sub-section {
+        margin-top: 30px;
+    }
+
+    * + .heading-group {
+        margin-top: 20px;
+    }
+
+    * + .heading-medium {
+        margin-top: 20px;
+    }
+
+    * + .heading-medium-emphasis {
+        margin-top: 20px;
+    }
+
+    * + .heading-small {
+        margin-top: 20px;
+    }
+
+    * + .heading-small-emphasis {
+        margin-top: 20px;
+    }
+
+    * + .heading-micro {
+        margin-top: 10px;
+    }
+}
+
+/* Standard Type styles */
+.zeromargin {
+    margin: 0 !important;
+}
+
+a {
+    color: #0568ae;
+    text-decoration: none;
+}
+
+a:hover,
+a:focus {
+    text-decoration: underline;
+}
+
+a:active {
+    color: #0568ae;
+}
+
+.a-min {
+    font-size: 12px;
+}
+
+.a-small {
+    font-size: 14px;
+}
+
+.a-max {
+    font-size: 18px;
+}
+
+a.show-qualifier {
+    margin-right: 25px;
+    position: relative;
+}
+
+a.show-qualifier:after {
+    color: #333333;
+    display: inline-block;
+    white-space: pre !important;
+}
+
+a[href$="pdf"].show-qualifier:after,
+a.show-qualifier.pdf:after {
+    content: " (PDF)";
+}
+
+a[href$="psd"].show-qualifier:after,
+a.show-qualifier.psd:after {
+    content: " (PSD)";
+}
+
+.standalone-link {
+    display: flex;
+}
+
+/* 20px for the icon, 10px left of icon */
+.standalone-link.small {
+    font-size: 1.4rem;
+}
+
+.standalone-link.small i[class*="icon-primary-"] {
+    font-size: 16px;
+    top: 2px;
+}
+
+.standalone-link.large {
+    font-size: 1.8rem;
+}
+
+.standalone-link.large i[class*="icon-primary-"] {
+    font-size: 24px;
+    top: -1px;
+}
+
+p {
+    margin: 0 0 12px 0;
+    line-height: 2rem;
+}
+
+.p-small {
+    font-size: 1.4rem;
+    line-height: 1.8rem;
+}
+
+p + .p-small {
+    margin: 10px 0 0;
+}
+
+.p-micro {
+    font-size: 1.2rem;
+    line-height: 1.5rem;
+}
+
+p + .p-micro {
+    margin: 10px 0 0;
+}
+
+.p-max {
+    font-size: 1.8rem;
+}
+
+p + .p-max {
+    margin: 10px 0 0;
+}
+
+b,
+strong {
+    font-family: "Omnes-ECOMP-W02-Medium", Arial;
+    font-weight: normal;
+}
+
+i,
+em {
+    font-family: "Omnes-ECOMP-W02-Italic", Arial;
+    font-style: normal;
+}
+
+.strike {
+    text-decoration: line-through;
+}
+
+sup {
+    display: inline-block;
+    font-style: normal;
+    height: 1em;
+    position: relative;
+    vertical-align: text-top;
+    width: auto;
+}
+
+.text-legal {
+    color: #5a5a5a;
+    font-size: 1.1rem;
+    line-height: 1.5rem;
+    margin: 0 0 10px;
+}
+
+.text-legal.legal-module {
+    line-height: 1.3rem;
+    margin: 0 0 12px;
+}
+
+.text-legal b,
+.text-legal strong {
+    font-weight: bold;
+}
+
+.text-legal a {
+    font-family: "Omnes-ECOMP-W02-Medium", Arial;
+}
+
+.text-left {
+    text-align: left !important;
+}
+
+.text-right {
+    text-align: right !important;
+}
+
+.text-center {
+    text-align: center !important;
+}
+
+.text-justified {
+    text-align: justify !important;
+}
+
+ul {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+}
+
+ul.bullet,
+ul.no-bullet,
+ul.lower-alpha,
+ul.lower-roman,
+ol {
+    padding: 0;
+    margin: 12px 0 0 20px;
+}
+
+ul.bullet li,
+ul.no-bullet li,
+ul.lower-alpha li,
+ul.lower-roman li,
+ol li {
+    padding-left: 15px;
+    line-height: 20px;
+    position: relative;
+}
+
+ul.bullet li + li,
+ul.no-bullet li + li,
+ul.lower-alpha li + li,
+ul.lower-roman li + li,
+ol li + li {
+    margin-top: 12px;
+}
+
+ul.bullet > li:before,
+ul.no-bullet > li:before,
+ul.lower-alpha > li:before,
+ul.lower-roman > li:before,
+ol > li:before {
+    background-color: #333333;
+    border: 2px solid #333333;
+    border-radius: 100%;
+    content: " ";
+    display: block;
+    height: 1px;
+    left: 0;
+    position: absolute;
+    top: 8px;
+    width: 1px;
+}
+
+ul.bullet ul,
+ul.no-bullet ul,
+ul.lower-alpha ul,
+ul.lower-roman ul,
+ol ul,
+ul.bullet ol,
+ul.no-bullet ol,
+ul.lower-alpha ol,
+ul.lower-roman ol,
+ol ol {
+    margin-top: 12px;
+}
+
+ul + *,
+ol + * {
+    margin-top: 20px;
+}
+
+ul.no-bullet,
+ul.lower-alpha,
+ul.lower-roman {
+    margin: 0;
+}
+
+ul.no-bullet > li,
+ul.lower-alpha > li,
+ul.lower-roman > li {
+    padding-left: 0;
+}
+
+ul.no-bullet > li:before,
+ul.lower-alpha > li:before,
+ul.lower-roman > li:before {
+    display: none !important;
+}
+
+ol {
+    margin: 20px 0 0 32px;
+}
+
+ol li {
+    padding-left: 3px;
+}
+
+ol li:before {
+    display: none;
+}
+
+ol ol {
+    margin-left: 25px;
+}
+
+ol ul {
+    margin-left: -5px;
+}
+
+ul ul,
+ul ol,
+ol ol,
+ol ul {
+    margin-top: 0;
+}
+
+ul.lower-roman {
+    list-style-type: lower-roman;
+    margin-top: 12px;
+    margin-left: 35px;
+    margin-bottom: 0;
+}
+
+ul.lower-alpha {
+    list-style-type: lower-alpha;
+    margin-top: 12px;
+    margin-left: 35px;
+    margin-bottom: 0;
+}
+
+dl {
+    display: table;
+    margin: 0 0 20px;
+    width: 100%;
+}
+
+dt,
+dd {
+    display: table-cell;
+}
+
+.btn {
+    background-color: transparent;
+    background-clip: padding-box;
+    border: 1px solid transparent;
+    border-radius: 8px;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
+    cursor: pointer;
+    display: inline-block;
+    font-family: "Omnes-ECOMP-W02-Medium", Arial;
+    font-size: 0.5rem;
+    font-weight: normal;
+    line-height: 1;
+    margin: 0 7px 10px 0;
+
+
+    padding: 14px 19px 11px 18px;
+    position: relative;
+    text-align: center;
+    vertical-align: middle;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.btn:focus {
+    outline: 1px dotted #000;
+    outline-offset: -5px;
+}
+
+.btn:last-child {
+    margin-right: 0;
+}
+
+.btn::-moz-focus-inner {
+    padding: 0;
+    border: 0;
+}
+
+.btn i[class*="icon-primary-"].icon-primary-small {
+    font-size: 24px;
+    top: -2px;
+}
+
+.btn i[class*="icon-primary-"].icon-primary-medium {
+    font-size: 10px;
+    top: -2px;
+}
+
+.btn i[class*="icon-primary-"].icon-primary-large {
+    font-size: 10px;
+    top: -2px;
+}
+
+a.btn {
+    vertical-align: middle;
+}
+
+a.btn:hover {
+    text-decoration: none;
+}
+
+.field-group + .btn {
+    margin-left: 20px;
+}
+
+.btn-primary {
+    border-color: #ea7400 transparent #d16500;
+    background-color: #ea7400 transparent #d16500;
+    background: linear-gradient(to bottom, #ea7400 0%, #d16500 100%);
+    color: #ffffff;
+    font-family: "Omnes-ECOMP-W02", Arial;
+    font-weight: bold;
+}
+
+.btn-primary:hover {
+    text-decoration: none;
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #d16500 0%, #ea7400 100%);
+}
+
+.btn-primary:focus {
+    text-decoration: none;
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #d16500 0%, #ea7400 100%);
+}
+
+.btn-primary:active {
+    text-decoration: none;
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #d16500 0%, #ea7400 100%);
+}
+
+.btn-arrow {
+    font-family: "Omnes-ECOMP-W02", Arial;
+    font-size: 1.6rem;
+    font-weight: normal;
+    background-color: transparent;
+    border: none;
+    padding: 5px 0 0;
+    top: -4px;
+    color: #333333;
+    position: relative;
+}
+
+.btn-arrow:hover {
+    text-decoration: underline;
+}
+
+.btn-arrow:hover .btn-primary {
+    text-decoration: none;
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #d16500 0%, #ea7400 100%);
+}
+
+.btn-arrow:hover .btn-secondary {
+    color: #0568ae;
+    outline-color: #000000 !important;
+    background: linear-gradient(to bottom, #f2f2f2 0%, #fcfcfc 100%);
+}
+
+.btn-arrow:hover .btn-alt {
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #087ac2 0%, #0568ae 100%);
+}
+
+.btn-arrow:hover .btn-specialty {
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #007a3e 0%, #008744 100%);
+}
+
+.btn-arrow:focus {
+    text-decoration: underline;
+    outline: 1px dotted #666;
+}
+
+.btn-arrow:focus .btn-primary {
+    text-decoration: none;
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #d16500 0%, #ea7400 100%);
+}
+
+.btn-arrow:focus .btn-secondary {
+    color: #0568ae;
+    outline-color: #000000 !important;
+    background: linear-gradient(to bottom, #f2f2f2 0%, #fcfcfc 100%);
+}
+
+.btn-arrow:focus .btn-alt {
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #087ac2 0%, #0568ae 100%);
+}
+
+.btn-arrow:focus .btn-specialty {
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #007a3e 0%, #008744 100%);
+}
+
+.btn-arrow:active .btn-primary {
+    text-decoration: none;
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #d16500 0%, #ea7400 100%);
+}
+
+.btn-arrow:active .btn-secondary {
+    color: #0568ae;
+    outline-color: #000000 !important;
+    background: linear-gradient(to bottom, #f2f2f2 0%, #fcfcfc 100%);
+}
+
+.btn-arrow:active .btn-alt {
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #087ac2 0%, #0568ae 100%);
+}
+
+.btn-arrow:active .btn-specialty {
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #007a3e 0%, #008744 100%);
+}
+
+.btn-arrow .btn-alt {
+    border-color: #087ac2 transparent #0568ae;
+    background-color: #0568ae;
+    background: linear-gradient(to bottom, #087ac2 0%, #0568ae 100%);
+    color: #ffffff;
+}
+
+.btn-arrow .btn-alt:hover {
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #0568ae 0%, #087ac2 100%);
+}
+
+.btn-arrow .btn-alt:focus {
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #0568ae 0%, #087ac2 100%);
+}
+
+.btn-arrow .btn-alt:active {
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #0568ae 0%, #087ac2 100%);
+}
+
+.btn-arrow::-moz-focus-inner {
+    padding: 0;
+    border: 0;
+}
+
+.btn-arrow .btn {
+    border: 1px solid transparent;
+    border-radius: 100%;
+    height: 20px;
+    margin-bottom: 0;
+    margin-right: 7px;
+    max-width: 20px;
+    min-width: 20px;
+    padding: 0;
+    margin-top: -4px;
+    vertical-align: middle;
+    width: 36px;
+}
+
+.btn-arrow .btn .icon-primary-left {
+    bottom: 0;
+    display: block;
+    height: 100%;
+    left: 0;
+    line-height: 0;
+    position: absolute;
+    right: 0;
+    text-indent: 0;
+    top: 0;
+}
+
+.btn-arrow .btn .icon-primary-left:before {
+    position: absolute;
+    font-size: 1.6rem;
+    left: 1px;
+    top: 9px;
+}
+
+.btn-arrow .btn .icon-primary-right {
+    bottom: 0;
+    display: block;
+    height: 100%;
+    left: 0;
+    line-height: 0;
+    position: absolute;
+    right: 0;
+    text-indent: 0;
+    top: 0;
+    color: #ffffff;
+}
+
+.btn-arrow .btn .icon-primary-right:before {
+    position: absolute;
+    font-size: 1.6rem;
+    left: 17px;
+    top: 9px;
+}
+
+.btn-arrow .btn.btn-primary .icon-primary-left {
+    color: #fff;
+}
+
+.btn-arrow .btn.btn-primary .icon-primary-right {
+    color: #fff;
+}
+
+.btn-arrow .btn.btn-alt .icon-primary-left {
+    color: #fff;
+}
+
+.btn-arrow .btn.btn-alt .icon-primary-right {
+    color: #fff;
+}
+
+.btn-arrow .btn.btn-secondary {
+    border: 1px solid #d2d2d2;
+}
+
+.btn-arrow .btn.btn-secondary .icon-primary-left {
+    color: #0568ae;
+}
+
+.btn-arrow .btn.btn-secondary .icon-primary-right {
+    color: #0568ae;
+}
+
+.btn-arrow .btn.btn-small {
+    height: 10px;
+
+
+    width: 10px;
+    top: -1px;
+}
+
+.btn-arrow .btn.btn-small .icon-primary-left:before {
+    font-size: 5px;
+    top: 4px;
+    left: 0;
+}
+
+.btn-arrow .btn.btn-small .icon-primary-right:before {
+    font-size: 5px;
+    top: 4px;
+    left: 10px;
+}
+
+.btn-arrow .btn.btn-large .icon-primary-left:before {
+    font-size: 112%;
+    top: 12px;
+    left: 23px;
+}
+
+.btn-arrow .btn.btn-large .icon-primary-right:before {
+    font-size: 112%;
+    top: 12px;
+    left: 23px;
+}
+
+.btn-secondary {
+    border: 1px solid #d2d2d2;
+    background-color: #f2f2f2;
+    background: linear-gradient(to bottom, #fcfcfc 0%, #f2f2f2 100%);
+    color: #0568ae;
+    box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.15);
+    padding: 14px 18px 11px 17px;
+}
+
+.btn-secondary:hover {
+    color: #0568ae;
+    outline-color: #000000 !important;
+    background: linear-gradient(to bottom, #f2f2f2 0%, #fcfcfc 100%);
+}
+
+.btn-secondary:focus {
+    color: #0568ae;
+    outline-color: #000000 !important;
+    background: linear-gradient(to bottom, #f2f2f2 0%, #fcfcfc 100%);
+}
+
+.btn-secondary:active {
+    color: #0568ae;
+    outline-color: #000000 !important;
+    background: linear-gradient(to bottom, #f2f2f2 0%, #fcfcfc 100%);
+}
+
+.btn-alt {
+    border-color: #087ac2 transparent #0568ae;
+    background-color: #0568ae;
+    background: linear-gradient(to bottom, #087ac2 0%, #0568ae 100%);
+    color: #ffffff;
+}
+
+.btn-alt:hover {
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #0568ae 0%, #087ac2 100%);
+}
+
+.btn-alt:focus {
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #0568ae 0%, #087ac2 100%);
+}
+
+.btn-alt:active {
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #0568ae 0%, #087ac2 100%);
+}
+
+.btn.disabled {
+    background-image: none;
+    background-color: #767676;
+    box-shadow: none;
+    cursor: not-allowed;
+    color: #ffffff;
+    border-color: transparent;
+    outline: 0 !important;
+}
+
+.btn.disabled:hover {
+    color: #f2f2f2;
+    outline: none !important;
+}
+
+.btn.disabled:focus {
+    color: #f2f2f2;
+    outline: none !important;
+}
+
+.btn-medium {
+    padding: 12px 19px 11px 18px;
+    font-size: 1.7rem;
+}
+
+.btn-run {
+    padding: 12px 19px 11px 18px;
+    font-size: 15px;
+}
+
+.btn-small {
+    font-size: 1.5rem;
+    border-radius: 8px;
+    margin-left: 600px;
+    font-size: 15px;
+}
+
+.btn-auto-upload {
+    font-size: 15px;
+}
+
+.div-auto-upload {
+    display: contents;
+}
+
+.btn-fullwidth {
+    width: 100%;
+}
+
+button .btn-fill {
+    background-clip: padding-box;
+    border: 0;
+    border-radius: 4px;
+    bottom: 0;
+    display: block;
+    height: auto;
+    left: 0;
+    margin: 5px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: auto;
+}
+
+button .btn-fill[style*="#fff"] {
+    border: 1px solid #d2d2d2;
+}
+
+
+.btn-group[data-select-color="orange"] > .btn.active {
+    border-color: #ea7400;
+}
+
+.btn-group[data-select-color="blue"] > .btn.active {
+    border-color: #0568ae;
+}
+
+.btn-group[data-select-color="green"] > .btn.active {
+    border-color: #007a3e;
+}
+
+.btn-spinbutton-toggle.btn-group {
+    display: block !important;
+    height: 40px !important;
+    margin-top: 5px;
+    max-width: 138px;
+    min-width: 138px;
+    white-space: nowrap;
+}
+
+.btn-spinbutton-toggle .btn {
+    border-radius: 6px;
+    font-weight: normal;
+    -ms-flex: unset;
+    flex: unset;
+    height: 40px;
+    letter-spacing: normal;
+    min-width: auto;
+    padding: 3px 0 0;
+    text-align: center;
+    min-width: 46px;
+    width: 46px;
+}
+
+.btn-spinbutton-toggle .btn[data-max-value] {
+    border-bottom: 1px solid #d2d2d2;
+    border-top: 1px solid #d2d2d2;
+    box-shadow: 0 3px 2px -2px rgba(0, 0, 0, 0.08) inset;
+    background-color: #fff;
+    cursor: text;
+    font-family: "Omnes-ECOMP-W02", Arial;
+    font-size: 2rem;
+    font-weight: normal;
+    padding: 4px 0 0;
+    text-align: center;
+    min-width: 46px !important;
+    width: 46px;
+}
+
+.btn-spinbutton-toggle .btn[data-max-value]:focus {
+    border-color: #0568ae;
+    outline: none;
+}
+
+.btn-spinbutton-toggle .btn[data-max-value]:focus + .btn {
+    border-left: 1px solid #0568ae;
+    transition: border 0.3s linear 0s;
+}
+
+.btn-spinbutton-toggle .icon-primary-subtractminimize {
+    font-size: 30px !important;
+    color: #0568ae !important;
+}
+
+.btn-spinbutton-toggle .icon-primary-add-maximize {
+    font-size: 30px !important;
+    color: #0568ae !important;
+}
+
+.btn-spinbutton-toggle .btn[disabled].icon-primary-subtractminimize {
+    background-color: #d2d2d2;
+    color: #767676 !important;
+}
+
+.btn-spinbutton-toggle .btn[disabled].icon-primary-add-maximize {
+    background-color: #d2d2d2;
+    color: #767676 !important;
+}
+
+.btn-spinbutton-toggle input.btn[disabled] {
+    background-color: #d2d2d2;
+    color: #5a5a5a;
+    cursor: not-allowed;
+}
+
+.btn-group.btn-spinbutton-toggle .btn[disabled] + .btn[disabled] {
+    border-left: 1px solid #f0f0f0 !important;
+}
+
+.btn-group.btn-spinbutton-toggle .btn[data-max-value]:focus + .btn:not(:first-child) {
+    border-left: 1px solid #0568ae !important;
+}
+
+@media (max-width: 480px) {
+    .btn-group:not([data-select-color]) > .btn {
+        font-size: 1.3rem;
+        min-width: auto;
+    }
+}
+
+button.close {
+    border: 0;
+    appearance: none;
+}
+
+.corner-button {
+    box-shadow: 0 -50px 0 0 #f2f2f2 inset;
+    height: 69px;
+    /*overflow: hidden;*/
+    position: absolute;
+    right: -35px;
+    top: -35px;
+    transform: rotate(45deg);
+    width: 69px;
+}
+
+
+.field-group input + .reset-field {
+    background: none;
+    height: 36px;
+    width: 45px;
+    display: none;
+    padding: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    box-shadow: none;
+    border: none;
+    content: " ";
+}
+
+.field-group input[type="search"] + .reset-field,
+.field-group input[type="search"] + .btn-search + .reset-field,
+.tooltip-onclick input + .reset-field,
+.tooltip-onclick input + .icon-primary-tooltip + .reset-field,
+.tooltip-onclick textarea + .reset-field,
+.tooltip-onclick textarea + .icon-primary-tooltip + .reset-field {
+    right: 45px;
+}
+
+.field-group input[type="search"] + .reset-field:after,
+.field-group input[type="search"] + .btn-search + .reset-field:after,
+input:-ms-clear {
+    display: none;
+}
+
+input[type]::-webkit-inner-spin-button,
+input[type]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+}
+
+input[type] {
+    -moz-appearance: textfield;
+}
+
+form {
+    margin: 0;
+}
+
+fieldset {
+    padding: 0;
+    margin: 0;
+    border: 0;
+}
+
+label,
+legend {
+    display: inline-block;
+    /* font-size: 1.4rem; */
+    font-family: "Omnes-ECOMP-W02-Medium", Arial;
+}
+
+legend {
+    display: block;
+}
+
+.error-msg {
+    display: none;
+}
+
+select,
+textarea,
+input {
+    border-radius: 6px;
+    color: #5a5a5a;
+    display: inline-block;
+    font-size: 1.6rem;
+    margin: 0px;
+    padding: 0 15px 0 15px;
+    vertical-align: middle;
+    line-height: normal;
+}
+
+select::-webkit-input-placeholder,
+textarea::-webkit-input-placeholder,
+input::-webkit-input-placeholder {
+    color: #5a5a5a;
+    font-family: "Omnes-ECOMP-W02-Italic", Arial;
+    font-style: normal;
+    opacity: 1;
+}
+
+select:-moz-placeholder,
+textarea:-moz-placeholder,
+input:-moz-placeholder {
+    color: #5a5a5a;
+    font-family: "Omnes-ECOMP-W02-Italic", Arial;
+    font-style: normal;
+    opacity: 1;
+}
+
+select::-moz-placeholder,
+textarea::-moz-placeholder,
+input::-moz-placeholder {
+    color: #5a5a5a;
+    font-family: "Omnes-ECOMP-W02-Italic", Arial;
+    font-style: normal;
+    opacity: 1;
+}
+
+select:-ms-input-placeholder,
+textarea:-ms-input-placeholder,
+input:-ms-input-placeholder {
+    color: #5a5a5a;
+    font-family: "Omnes-ECOMP-W02-Italic", Arial;
+    transition: none;
+    opacity: 1;
+}
+
+select:placeholder,
+textarea:placeholder,
+input:placeholder {
+    color: #5a5a5a;
+    font-family: "Omnes-ECOMP-W02-Italic", Arial;
+    font-style: normal;
+    opacity: 1;
+}
+
+select:last-child,
+textarea:last-child,
+input:last-child {
+    margin-right: 0;
+}
+
+input:not([type="button"]) {
+    height: 36px;
+}
+
+input.input-emphasized {
+    font-size: 1.8rem;
+    height: 48px;
+    padding: 13px 20px 13px;
+}
+
+input[type="search"]:focus {
+    padding-right: 88px;
+}
+
+input[type="search"] {
+    padding-right: 40px;
+    -webkit-appearance: none !important;
+}
+
+input[type="search"].input-emphasized {
+    padding-right: 45px;
+}
+
+.btn-search[class*="btn"] {
+    background-color: transparent;
+    background-position: 50% 50%;
+    background-size: 20px;
+    background-repeat: no-repeat;
+    border: none;
+    height: 100%;
+    margin-left: 0;
+    margin-top: 0;
+    min-width: 45px !important;
+    outline-offset: 0;
+    padding: 0 !important;
+    position: absolute;
+    right: 0;
+    top: 0;
+    border-radius: 0 5px 5px 0;
+    min-width: 44px;
+    width: 44px;
+}
+
+.input-emphasized + .btn-search[class*="btn"],
+.input-emphasized + .reset-field + .btn-search[class*="btn"] {
+    background-size: 26px;
+    height: 46px;
+    top: 1px;
+    outline-offset: -3px;
+    margin-bottom: 0;
+    border-radius: 0 5px 5px 0;
+}
+
+input[type="search"].input-emphasized + .reset-field {
+    right: 45px !important;
+}
+
+
+input[data-provide="datepicker"],
+[data-provide="datepicker"]:-moz-placeholder,
+[data-provide="datepicker"]:-ms-input-placeholder,
+[data-provide="datepicker"]:-webkit-input-placeholder {
+    color: #0568ae !important;
+    opacity: 1;
+    filter: alpha(opacity=100);
+}
+
+input[disabled],
+input[readonly],
+select[disabled],
+select[readonly],
+textarea[disabled],
+textarea[readonly],
+i.icon-primary-calendar.disabled,
+span.icon-primary-calendar.readonly {
+    cursor: not-allowed;
+    background-color: #f2f2f2;
+    box-shadow: none;
+}
+
+i.icon-primary-calendar.disabled input,
+span.icon-primary-calendar.readonly input {
+    color: #959595 !important;
+}
+
+textarea {
+    display: block;
+    width: 800px;
+
+    padding: 15px;
+}
+
+textarea.small {
+    line-height: 20px;
+}
+
+textarea + .reset-field {
+    display: none;
+}
+
+textarea::-webkit-input-placeholder {
+    line-height: .99;
+}
+
+textarea:-moz-placeholder {
+    line-height: .99;
+}
+
+textarea::-moz-placeholder {
+    line-height: .99;
+}
+
+textarea:-ms-input-placeholder {
+    line-height: .99;
+}
+
+textarea:placeholder {
+    line-height: .99;
+}
+
+textarea,
+input {
+    background-color: #ffffff;
+    border: 1px solid #d2d2d2;
+    -webkit-appearance: none;
+    box-shadow: 2px 3px 2px -2px rgba(0, 0, 0, 0.08) inset;
+    transition: border .3s linear 0s;
+    font-family: "Omnes-ECOMP-W02", Arial;
+}
+
+textarea:focus,
+input:focus {
+    outline: 0;
+    border-color: #0568ae;
+}
+
+.input-append {
+    display: table;
+}
+
+.input-append > div {
+    display: table-cell;
+    width: 1%;
+}
+
+.input-append > .field-group {
+    width: 100%;
+}
+
+.row .field-group input[class*="span"] {
+    float: none;
+}
+
+.field-group {
+    position: relative;
+    display: inline-block;
+}
+
+label + .field-group,
+label + .input-append,
+label + .row,
+label + .row-nowrap,
+label + .form-row {
+    margin-top: 5px;
+}
+
+.field-group {
+    position: relative;
+    display: block;
+}
+
+.field-group input:not([type="button"])[disabled] {
+    padding-right: 15px;
+}
+
+input:invalid,
+textarea:invalid,
+select:invalid {
+    outline: none !important;
+}
+
+.form-row {
+    margin-top: 20px;
+}
+
+.form-row.nomar {
+    margin: 0;
+}
+
+.row-nowrap.no-flex.form-row > label + br {
+    margin-bottom: 5px;
+}
+
+span.form-row {
+    display: inline-block;
+}
+
+legend + .form-row {
+    margin-top: 20px;
+}
+
+.tooltip-onclick input {
+    padding-right: 45px;
+}
+
+.ds2_touchevents .tooltip-onclick input:focus {
+    padding-right: 95px;
+}
+
+.radio {
+    position: relative;
+    min-height: 24px;
+    font-family: "Omnes-ECOMP-W02", Arial;
+    font-size: 1.6rem;
+    margin-bottom: 5px;
+}
+
+.radio input {
+    -webkit-tap-highlight-color: transparent;
+    height: 10px;
+    margin: 6px;
+    opacity: 0;
+    outline: none;
+    position: absolute;
+    left: 1px;
+    top: 1px;
+    width: 10px;
+}
+
+.radio input:focus + .skin {
+    border-color: #0568ae;
+}
+
+.radio input:focus + .skin:before {
+    content: "";
+    height: 34px;
+    left: -6px;
+    top: -6px;
+    outline: 1px dotted #000000;
+    position: absolute;
+    width: 34px;
+}
+
+.radio input + .skin {
+    border-radius: 100%;
+}
+
+.radio input:checked + .skin:after {
+    background-color: #0568ae;
+    border-radius: 100%;
+    border: 3px solid #FFFFFF;
+    content: "";
+    display: block;
+    height: 16px;
+    position: absolute;
+    width: 16px;
+}
+
+.radio input:disabled + .skin {
+    cursor: not-allowed;
+    background-color: #d2d2d2;
+    border-color: #d2d2d2;
+    color: #666666;
+}
+
+.radio input:disabled + .skin + span {
+    cursor: not-allowed;
+    color: #666666;
+}
+
+.radio input:disabled:checked + .skin:after {
+    background-color: #666666;
+}
+
+.radio input:invalid + .skin {
+    border: solid 1px #cf2a2a;
+}
+
+.radio .skin {
+    background-color: #FFFFFF;
+    border: 1px solid #d2d2d2;
+    border-radius: 3px;
+    display: inline-block;
+    height: 24px;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 24px;
+}
+
+.radio span {
+    display: inline-block;
+    margin-left: 34px;
+    margin-top: 0;
+    position: relative;
+    top: 3px;
+}
+
+.radio label {
+    font-size: 1.6rem;
+    font-family: "Omnes-ECOMP-W02", Arial;
+}
+
+.radio.inline {
+    display: inline-block;
+    margin-bottom: 10px;
+    vertical-align: middle;
+    margin-right: 10px;
+}
+
+.radio.inline:last-child {
+    margin-right: 0;
+}
+
+.radio-box {
+    border: 1px solid #d2d2d2;
+    border-radius: 8px;
+}
+
+.radio-box > [role="radio"] label {
+    padding: 15px 15px 20px 15px;
+    display: block;
+    width: 100%;
+}
+
+.radio-box > [role="radio"] label .skin + span {
+    top: 2px;
+}
+
+.radio-box > [role="radio"] + div {
+    padding: 0 15px 15px 47px;
+}
+
+.radio-box > [aria-checked="false"] label > input {
+    top: 15px;
+    left: 15px;
+}
+
+.radio-box > [aria-checked="false"] label .skin {
+    top: 15px;
+    left: 15px;
+}
+
+.radio-box > [aria-checked="true"] label > input {
+    top: 13px;
+    left: 13px;
+}
+
+.radio-box > [aria-checked="true"] label .skin {
+    top: 13px;
+    left: 13px;
+}
+
+.radio-box.active {
+    border: 3px solid #0568ae;
+}
+
+.radio-box.active > [role="radio"] label {
+    padding: 13px 14px 19px 13px;
+}
+
+.checkbox {
+    position: relative;
+    min-height: 24px;
+    font-family: "Omnes-ECOMP-W02", Arial;
+    font-size: 1rem;
+}
+
+.checkbox input {
+    -webkit-tap-highlight-color: transparent;
+    height: 20px;
+    margin-left: 20px;
+    opacity: 0;
+    outline: none;
+    position: absolute;
+    left: 1px;
+    top: 1px;
+    width: 10px;
+}
+
+.checkbox input:focus + .skin {
+    border-color: #0568ae;
+}
+
+.checkbox input:focus + .skin:before {
+    content: "";
+    height: 34px;
+    left: -6px;
+    top: -6px;
+    outline: 1px dotted #000000;
+    position: absolute;
+    width: 34px;
+}
+
+.checkbox input:checked:not(:disabled) + .skin {
+    background-color: #0568ae;
+    border-color: #0568ae;
+}
+
+.checkbox input:checked:disabled + .skin:after {
+    color: #5A5A5A;
+}
+
+.checkbox input:checked + .skin:after {
+    height: 20px;
+    width: 10px;
+    background-color: transparent;
+    font-size: 23.4px;
+    color: #FFFFFF;
+    line-height: 21px;
+}
+
+.checkbox input:disabled + .skin {
+    cursor: not-allowed;
+    background-color: #d2d2d2;
+    border-color: #d2d2d2;
+    color: #666666;
+}
+
+.checkbox input:disabled + .skin + span {
+    cursor: not-allowed;
+    color: #666666;
+}
+
+.checkbox input:invalid + .skin {
+    border: solid 1px #cf2a2a;
+}
+
+.checkbox input:indeterminate + .skin:after {
+    background-color: transparent;
+    font-size: 25px;
+    color: #0574ac;
+    content: "\e920";
+}
+
+.checkbox .skin {
+    background-color: #fff;
+    border: 1px solid #d2d2d2;
+    border-radius: 3px;
+    display: inline-block;
+    height: 24px;
+    width: 24px;
+    position: absolute;
+    left: 0;
+    top: 0;
+}
+
+.checkbox span {
+    display: inline-block;
+    margin-left: 34px;
+    margin-top: 0;
+    position: relative;
+    top: 3px;
+}
+
+.checkbox label {
+    font-size: 1.6rem;
+    font-family: "Omnes-ECOMP-W02", Arial;
+}
+
+.checkbox input {
+    z-index: 9999;
+}
+
+.checkbox input.indeterminate + .skin:after {
+    font-size: 22px;
+    color: #0568ae;
+}
+
+.breadcrumb {
+    padding: 10px 15px;
+    height: 40px;
+    list-style: none;
+    border-bottom: 1px solid #d2d2d2;
+    font-size: 1.2rem;
+    width: 100%;
+    z-index: 1000;
+}
+
+.breadcrumb > li {
+    position: relative;
+    display: inline-block;
+    margin-right: 15px;
+}
+
+.breadcrumb > li:after {
+    font-size: 8px;
+    margin-right: 0;
+    right: -8px;
+    color: #333333;
+}
+
+.breadcrumb > li:last-child {
+    color: #333333;
+}
+
+.breadcrumb > li:last-child:after {
+    content: "";
+}
+
+.breadcrumb li > * {
+    float: none !important;
+    margin: 0;
+}
+
+.breadcrumb {
+    padding: 10px 15px !important;
+}
+
+/* ARROW */
+/* spanish */
+.datepicker {
+    background-color: #FFFFFF;
+    padding: 0;
+    border-radius: 5px;
+    direction: ltr;
+}
+
+.datepicker > div {
+    display: none;
+}
+
+.datepicker table {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    margin: 0 0 0 0;
+}
+
+.datepicker td {
+    text-align: center;
+    display: block;
+    width: 30px;
+    height: 30px;
+    border: none;
+}
+
+.datepicker td span {
+    display: block;
+    width: 23%;
+    height: 54px;
+    line-height: 54px;
+    float: left;
+    margin: 1%;
+    cursor: pointer;
+    border-radius: 4px;
+}
+
+.datepicker td span:hover {
+    background: #eeeeee;
+}
+
+.datepicker td span.disabled {
+    background: none;
+    color: #5A5A5A;
+    cursor: default;
+}
+
+.datepicker td span.disabled:hover {
+    background: none;
+    color: #5A5A5A;
+    cursor: default;
+}
+
+.datepicker td span.active {
+    color: #FFFFFF;
+    background-color: #0568ae;
+    border-color: #357ebd;
+}
+
+.datepicker td span.active:hover {
+    color: #FFFFFF;
+    background-color: #0568ae;
+    border-color: #357ebd;
+}
+
+.datepicker td span.active.disabled {
+    color: #FFFFFF;
+    background-color: #0568ae;
+    border-color: #357ebd;
+}
+
+.datepicker th {
+    text-align: center;
+    display: block;
+    width: 30px;
+    height: 30px;
+    border: none;
+}
+
+.datepicker tbody:focus {
+    outline: none;
+}
+
+.datepicker td.day {
+    background-color: transparent;
+    color: #0568ae;
+    cursor: pointer;
+    font-family: "Omnes-ECOMP-W02-Medium", Arial;
+    font-size: 16px;
+    height: 34px;
+    line-height: 30rem;
+    margin: -2px -1px 0 0;
+    overflow: hidden;
+    text-align: center;
+    width: 42px;
+}
+
+.datepicker:focus {
+    outline: 1px dotted #191919;
+    outline-offset: -2px;
+}
+
+.datepicker th[tabindex]:focus {
+    outline-offset: -15px;
+}
+
+.datepicker td.day.focused {
+    background: #ededed;
+    cursor: pointer;
+}
+
+.datepicker td.day.focused.active {
+    background-color: #ededed;
+    color: #0568ae;
+}
+
+.datepicker td.disabled {
+    font-family: "Omnes-ECOMP-W02", Arial;
+    color: #5A5A5A;
+    cursor: default;
+}
+
+.datepicker td.disabled:hover {
+    font-family: "Omnes-ECOMP-W02", Arial;
+    color: #5A5A5A;
+    cursor: default;
+}
+
+.datepicker td.disabled:hover .show-date {
+    font-family: "Omnes-ECOMP-W02", Arial;
+    color: #5A5A5A;
+}
+
+.datepicker td.disabled .show-date {
+    font-family: "Omnes-ECOMP-W02", Arial;
+    color: #5A5A5A;
+}
+
+.datepicker td.today {
+    color: #FFFFFF;
+    background-color: #0568ae;
+}
+
+.datepicker td.today:hover {
+    color: #FFFFFF;
+    background-color: #0568ae;
+    color: #FFFFFF;
+    background-color: #0568ae;
+}
+
+.datepicker td.today:active {
+    color: #FFFFFF;
+    background-color: #0568ae;
+}
+
+.datepicker td.today:focus {
+    color: #FFFFFF;
+    background-color: #0568ae;
+}
+
+.datepicker td.today.disabled {
+    color: #FFFFFF;
+    background-color: #0568ae;
+}
+
+.datepicker td.today.active {
+    color: #FFFFFF;
+    background-color: #0568ae;
+}
+
+.datepicker td.today.active:hover {
+    color: #FFFFFF;
+}
+
+.datepicker td.selected {
+    color: #FFFFFF;
+    background-color: #95959500;
+}
+
+.datepicker td.selected:hover {
+    color: #FFFFFF;
+    background-color: #95959500;
+}
+
+.datepicker td.selected.disabled {
+    color: #FFFFFF;
+    background-color: #95959500;
+}
+
+.datepicker td.active:not(.new) {
+    color: #FFFFFF;
+    border-color: #357ebd;
+}
+
+.datepicker td.active:not(.new) .show-date {
+    color: #0568ae;
+    font-family: "Omnes-ECOMP-W02-Medium", Arial;
+}
+
+.datepicker td.active:hover:not(.new) {
+    color: #FFFFFF;
+    border-color: #357ebd;
+}
+
+.datepicker td.active:hover:not(.new) .show-date {
+    color: #0568ae;
+    font-family: "Omnes-ECOMP-W02-Medium", Arial;
+}
+
+.datepicker .start-date .show-date {
+    background-color: #0568ae;
+    color: #FFFFFF !important;
+    border-radius: 5px 0 0 5px;
+    z-index: 1;
+}
+
+.datepicker .start-date .show-date:before {
+    background-color: #0568ae;
+    content: "";
+    display: block;
+    height: 26px;
+    left: 20px;
+    position: absolute;
+    width: 100%;
+    z-index: -1;
+}
+
+.datepicker .between-date .show-date {
+    background-color: #0568ae;
+    color: #FFFFFF !important;
+}
+
+.datepicker .between-date .show-date:before {
+    background-color: #0568ae;
+    content: "";
+    display: block;
+    height: 26px;
+    left: 0;
+    position: absolute;
+    width: 100%;
+    z-index: -1;
+}
+
+.datepicker .between-date:first-child .show-date:before {
+    background-color: #FFFFFF;
+    content: "";
+    height: 26px;
+    position: absolute;
+    left: 0;
+    width: 8px;
+}
+
+.datepicker .end-date .show-date {
+    background-color: #0568ae;
+    color: #FFFFFF !important;
+    border-radius: 0 5px 5px 0;
+}
+
+.datepicker .end-date .show-date:before {
+    background-color: #0568ae;
+    content: "";
+    display: block;
+    height: 26px;
+    left: -20px;
+    position: absolute;
+    width: 100%;
+    z-index: -1;
+}
+
+.datepicker .end-date:first-child .show-date:after {
+    background-color: #FFFFFF;
+    content: "";
+    height: 26px;
+    position: absolute;
+    left: 0;
+    width: 8px;
+}
+
+.datepicker .end-date:first-child .show-date::before {
+    background-color: #FFFFFF;
+}
+
+.datepicker tr td.start-date:last-child .show-date:after {
+    background-color: #FFFFFF;
+    content: "";
+    height: 26px;
+    position: absolute;
+    right: 0;
+    width: 8px;
+}
+
+.datepicker tr td.start-date:last-child:focus .show-date:after {
+    height: 30px;
+    width: 30px;
+    background-color: transparent;
+}
+
+.datepicker tr td.start-date:first-child:focus .show-date:after {
+    height: 30px;
+    width: 30px;
+    background-color: transparent;
+}
+
+.datepicker tr td.between-date:last-child .show-date:after {
+    background-color: #FFFFFF;
+    content: "";
+    height: 26px;
+    position: absolute;
+    right: 0;
+    width: 8px;
+}
+
+.datepicker tr td.between-date:last-child:focus .show-date:after {
+    height: 30px;
+    width: 30px;
+    background-color: transparent;
+}
+
+.datepicker tr td.between-date:first-child:focus .show-date:after {
+    height: 30px;
+    width: 30px;
+    background-color: transparent;
+}
+
+.datepicker tr td.end-date:last-child:focus .show-date:after {
+    height: 30px;
+    width: 30px;
+    background-color: transparent;
+}
+
+.datepicker tr td.end-date:first-child:focus .show-date:after {
+    height: 30px;
+    width: 30px;
+    background-color: transparent;
+}
+
+.datepicker th.datepicker-switch {
+    width: 198px;
+    font-size: 20px;
+    font-weight: normal;
+    cursor: default !important;
+}
+
+.datepicker thead tr:first-child th {
+    cursor: pointer;
+    height: 60px;
+    line-height: 60px;
+}
+
+.datepicker thead tr:first-child th.cw {
+    cursor: default;
+    background-color: transparent;
+}
+
+.datepicker tfoot tr th {
+    cursor: pointer;
+    height: 60px;
+    line-height: 60px;
+    height: auto;
+    line-height: normal;
+}
+
+.datepicker tfoot tr th li {
+    margin-bottom: 5px;
+}
+
+.datepicker .prev {
+    color: transparent;
+    font-size: 0;
+    margin: 0 -1px -1px 0;
+    width: 46px;
+}
+
+.datepicker .prev i {
+    color: #0568ae;
+    position: absolute;
+    font-size: 27px;
+    margin: 0;
+    top: 15px;
+    left: 8px;
+}
+
+.datepicker .next {
+    color: transparent;
+    font-size: 0;
+    margin: 0 -1px -1px 0;
+    width: 46px;
+}
+
+.datepicker .next i {
+    color: #0568ae;
+    position: absolute;
+    font-size: 27px;
+    margin: 0;
+    top: 15px;
+    right: 8px;
+}
+
+.datepicker .cw {
+    font-size: 5px;
+    width: 12px;
+    padding: 0 2px 0 5px;
+    vertical-align: middle;
+}
+
+.datepicker .due-date .show-date {
+    font-family: "Omnes-ECOMP-W02-Medium", Arial;
+    background-color: #cf2a2a;
+    border-radius: 5px;
+    color: #FFFFFF !important;
+}
+
+.datepicker .day.active .show-date:after {
+    border: 2px solid #0568ae;
+    border-radius: 7px;
+    content: "";
+    display: block;
+    height: 30px;
+    left: 4px;
+    position: absolute;
+    top: 0;
+    width: 30px;
+}
+
+.datepicker .day:focus .show-date:after {
+    border: 2px solid #0568ae;
+    border-radius: 7px;
+    content: "";
+    display: block;
+    height: 30px;
+    left: 4px;
+    position: absolute;
+    top: 0;
+    width: 30px;
+    height: 30px;
+    left: 4px;
+    top: 0;
+    width: 30px;
+}
+
+.datepicker .due-date.disabled .show-date:after {
+    border: 2px solid #0568ae;
+    border-radius: 7px;
+    content: "";
+    display: block;
+    height: 30px;
+    left: 4px;
+    position: absolute;
+    top: 0;
+    width: 30px;
+}
+
+.datepicker .day.due-date:focus .show-date:after {
+    height: 30px;
+    left: 4px;
+    top: 0;
+    width: 30px;
+}
+
+.datepicker .due-date.old:after {
+    visibility: hidden;
+}
+
+.datepicker .due-date.new:after {
+    visibility: hidden;
+}
+
+.datepicker .due-date.active:after {
+    border-color: #FFFFFF;
+}
+
+.datepicker .due-date.active.focused {
+    color: #0568ae !important;
+}
+
+.datepicker .due-date.active.focused:after {
+    border-color: #cf2a2a !important;
+}
+
+.datepicker .dow {
+    height: 24px;
+    width: 42px;
+    font-weight: normal;
+    position: relative;
+    overflow: hidden;
+    color: transparent;
+    letter-spacing: -6px;
+    margin: 0 -1px -1px 0;
+}
+
+.datepicker .dow span[aria-hidden="true"] {
+    bottom: 0;
+    color: #5A5A5A;
+    display: block;
+    left: 1px;
+    letter-spacing: 0;
+    line-height: .9;
+    margin: 0 auto;
+    padding: 0;
+    position: relative;
+    width: 22px;
+}
+
+.datepicker .calendar-legend {
+    margin-top: 3px;
+    margin-bottom: 20px;
+}
+
+.datepicker .calendar-legend li {
+    font-size: 1.4rem;
+    font-weight: normal;
+    margin-bottom: 5px;
+    padding-left: 10px;
+    padding-top: 5px;
+    position: relative;
+}
+
+.datepicker i.legend-due-date {
+    background-color: #cf2a2a;
+    border-radius: 5px;
+    height: 18px;
+    width: 18px;
+    margin-right: 8px;
+    vertical-align: middle;
+    display: inline-block;
+}
+
+.datepicker i.legend-selected-date {
+    background-color: #FFFFFF;
+    border: 2px solid #0568ae;
+    border-radius: 5px;
+    height: 18px;
+    width: 18px;
+    margin-right: 8px;
+    vertical-align: middle;
+    display: inline-block;
+}
+
+.datepicker i.legend-selectedisdue {
+    background-color: #FFFFFF;
+    border: 2px solid #0568ae;
+    border-radius: 5px;
+    display: inline-block;
+    height: 18px;
+    margin-right: 8px;
+    position: relative;
+    vertical-align: middle;
+    width: 18px;
+}
+
+.datepicker i.legend-selectedisdue:after {
+    background-color: #cf2a2a;
+    border-radius: 3px;
+    content: "";
+    display: block;
+    height: 10px;
+    left: 2px;
+    position: absolute;
+    top: 2px;
+    width: 10px;
+}
+
+.datepicker .text-left {
+    width: 100%;
+}
+
+.datepicker .active.old {
+    background-color: #ededed !important;
+    color: #ededed !important;
+}
+
+.datepicker-inline {
+    width: 220px;
+}
+
+.datepicker.datepicker-rtl {
+    direction: rtl;
+}
+
+.datepicker.datepicker-rtl td span {
+    float: right;
+}
+
+.datepicker-dropdown {
+    top: 0;
+    left: 0;
+}
+
+.datepicker-dropdown:before {
+    content: " ";
+    display: inline-block;
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+    border-bottom: 10px solid #d2d2d2;
+    border-top: 0;
+    border-bottom-color: rgba(0, 0, 0, 0.2);
+    position: absolute;
+}
+
+.datepicker-dropdown:after {
+    content: " ";
+    display: inline-block;
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+    border-bottom: 10px solid #fff;
+    border-top: 0;
+    position: absolute;
+}
+
+.datepicker-dropdown.datepicker-orient-left:before {
+    left: 16px;
+}
+
+.datepicker-dropdown.datepicker-orient-left:after {
+    left: 16px;
+}
+
+.datepicker-dropdown.datepicker-orient-right:before {
+    right: 16px;
+}
+
+.datepicker-dropdown.datepicker-orient-right:after {
+    right: 16px;
+}
+
+.datepicker-dropdown.datepicker-orient-top:before {
+    top: -10px;
+}
+
+.datepicker-dropdown.datepicker-orient-top:after {
+    top: -9px;
+}
+
+.datepicker-dropdown.datepicker-orient-bottom:before {
+    bottom: -7px;
+    border-bottom: 0;
+    border-top: 7px solid #959595;
+}
+
+.datepicker-dropdown.datepicker-orient-bottom:after {
+    bottom: -6px;
+    border-bottom: 0;
+    border-top: 6px solid #fff;
+}
+
+.datepicker.days div.datepicker-days {
+    display: block;
+}
+
+.datepicker.months div.datepicker-months {
+    display: block;
+}
+
+.datepicker.years div.datepicker-years {
+    display: block;
+}
+
+.show-date {
+    font-family: "Omnes-ECOMP-W02-Medium", Arial;
+    color: #0568ae;
+    height: 26px;
+    line-height: 26px;
+    margin: 4px auto 0;
+    width: 26px;
+}
+
+.input-group.date .input-group-addon i {
+    cursor: pointer;
+    width: 16px;
+    height: 16px;
+}
+
+.datepicker.dropdown-menu {
+    box-shadow: 0 10px 15px -10px rgba(0, 0, 0, 0.7);
+    position: absolute;
+    top: 100%;
+    left: 0;
+    float: left;
+    display: none;
+    margin-top: 13px;
+    width: 290px;
+    list-style: none;
+    background-color: #FFFFFF;
+    border: 1px solid #d2d2d2;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    border-radius: 5px;
+    color: #333333;
+    font-size: 13px;
+    line-height: 1.428571429;
+    z-index: 1050;
+}
+
+.datepicker.dropdown-menu th {
+    display: block;
+    float: left;
+    padding: 0;
+    position: relative;
+}
+
+.datepicker.dropdown-menu td {
+    display: block;
+    float: left;
+    padding: 0;
+    position: relative;
+}
+
+.s {
+    display: block;
+    height: 20px;
+    width: 12px;
+    margin: 0 auto;
+    background-color: #FFFFFF;
+    background-repeat: no-repeat;
+    background-position: -62px 0;
+}
+
+.m {
+    display: block;
+    height: 20px;
+    width: 12px;
+    margin: 0 auto;
+    background-color: #FFFFFF;
+    background-repeat: no-repeat;
+    background-position: -5px 0;
+}
+
+.t {
+    display: block;
+    height: 20px;
+    width: 12px;
+    margin: 0 auto;
+    background-color: #FFFFFF;
+    background-repeat: no-repeat;
+    background-position: -19px 0;
+}
+
+.w {
+    display: block;
+    height: 20px;
+    width: 12px;
+    margin: 0 auto;
+    background-color: #FFFFFF;
+    background-repeat: no-repeat;
+    background-position: -34px 0;
+}
+
+.f {
+    display: block;
+    height: 20px;
+    width: 12px;
+    margin: 0 auto;
+    background-color: #FFFFFF;
+    background-repeat: no-repeat;
+    background-position: -49px 0;
+}
+
+.d {
+    display: block;
+    height: 20px;
+    width: 12px;
+    margin: 0 auto;
+    background-color: #FFFFFF;
+    background-repeat: no-repeat;
+    background-position: 0 0;
+}
+
+.l {
+    display: block;
+    height: 20px;
+    width: 12px;
+    margin: 0 auto;
+    background-color: #FFFFFF;
+    background-repeat: no-repeat;
+    background-position: 0 0;
+}
+
+.v {
+    display: block;
+    height: 20px;
+    width: 12px;
+    margin: 0 auto;
+    background-color: #FFFFFF;
+    background-repeat: no-repeat;
+    background-position: 0 0;
+}
+
+.j {
+    display: block;
+    height: 20px;
+    width: 12px;
+    margin: 0 auto;
+    background-color: #FFFFFF;
+    background-repeat: no-repeat;
+    background-position: 0 0;
+}
+
+.datepicker {
+    background-color: #fff;
+    padding: 0;
+    border-radius: 5px;
+    direction: ltr;
+}
+
+.datepicker-inline {
+    width: 220px;
+}
+
+.datepicker.datepicker-rtl {
+    direction: rtl;
+}
+
+.datepicker.datepicker-rtl td span {
+    float: right;
+}
+
+.datepicker-dropdown {
+    top: 0;
+    left: 0;
+}
+
+/* ARROW */
+.datepicker-dropdown:before {
+    content: " ";
+    display: inline-block;
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+    border-bottom: 10px solid #d2d2d2;
+    border-top: 0;
+    border-bottom-color: rgba(0, 0, 0, 0.2);
+    position: absolute;
+}
+
+.datepicker-dropdown:after {
+    content: " ";
+    display: inline-block;
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+    border-bottom: 10px solid #fff;
+    border-top: 0;
+    position: absolute;
+}
+
+.datepicker-dropdown.datepicker-orient-left:before,
+.datepicker-dropdown.datepicker-orient-left:after {
+    left: 255px;
+}
+
+.datepicker-dropdown.datepicker-orient-right:before,
+.datepicker-dropdown.datepicker-orient-right:after {
+    right: 16px;
+}
+
+.datepicker-dropdown.datepicker-orient-top:before {
+    top: -10px;
+}
+
+.datepicker-dropdown.datepicker-orient-top:after {
+    top: -9px;
+}
+
+.datepicker-dropdown.datepicker-orient-bottom:before {
+    bottom: -7px;
+    border-bottom: 0;
+    border-top: 7px solid #959595;
+}
+
+.datepicker-dropdown.datepicker-orient-bottom:after {
+    bottom: -6px;
+    border-bottom: 0;
+    border-top: 6px solid #fff;
+}
+
+.datepicker > div {
+    display: none;
+}
+
+.datepicker.days div.datepicker-days {
+    display: block;
+}
+
+.datepicker.months div.datepicker-months {
+    display: block;
+}
+
+.datepicker.years div.datepicker-years {
+    display: block;
+}
+
+.datepicker table {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    margin: 0 0 0 0;
+}
+
+.datepicker td,
+.datepicker th {
+    text-align: center;
+    display: block;
+    width: 30px;
+    height: 30px;
+    border: none;
+}
+
+.datepicker tbody :focus {
+    outline: none;
+}
+
+.datepicker td.day {
+    background-color: transparent;
+    color: #0568ae;
+    cursor: pointer;
+    font-family: "Omnes-ECOMP-W02-Medium", Arial;
+    font-size: 16px;
+    height: 34px;
+    line-height: 30rem;
+    margin: -2px -1px 0 0;
+    overflow: hidden;
+    text-align: center;
+    width: 42px;
+}
+
+.datepicker :focus {
+    outline: 1px dotted #000;
+    outline-offset: -2px;
+}
+
+.datepicker td.day.focused {
+    background: #ededed;
+    cursor: pointer;
+}
+
+.datepicker td.day.focused.active {
+    background-color: #ededed;
+    color: #0568ae;
+}
+
+.datepicker td.disabled,
+.datepicker td.disabled:hover {
+    font-family: "Omnes-ECOMP-W02", Arial;
+    color: #5a5a5a;
+    cursor: default;
+}
+
+.datepicker td.today,
+.datepicker td.today:hover,
+.datepicker td.today.disabled {
+    color: #fff;
+    background-color: #0568ae;
+}
+
+.datepicker td.today.active,
+.datepicker td.today:active,
+.datepicker td.today:hover,
+.datepicker td.today:focus {
+    color: #fff;
+    background-color: #0568ae;
+}
+
+.datepicker td.today.active:hover {
+    color: #fff;
+}
+
+.datepicker td.selected,
+.datepicker td.selected:hover,
+.datepicker td.selected.disabled {
+    color: #ffffff;
+    background-color: #959595;
+}
+
+.datepicker td.active:not(.new),
+.datepicker td.active:hover:not(.new) {
+    color: #ffffff;
+    border-color: #357ebd;
+}
+
+.show-date {
+    font-family: "Omnes-ECOMP-W02-Medium", Arial;
+    color: #0568ae;
+    height: 26px;
+    line-height: 26px;
+    margin: 4px auto 0;
+    width: 26px;
+}
+
+.datepicker .start-date .show-date,
+.datepicker .between-date .show-date,
+.datepicker .end-date .show-date {
+    background-color: #0568ae;
+    color: #fff !important;
+}
+
+.datepicker .start-date .show-date {
+    border-radius: 5px 0 0 5px;
+    z-index: 1;
+}
+
+.datepicker .start-date .show-date:before {
+    background-color: #0568ae;
+    content: "";
+    display: block;
+    height: 26px;
+    left: 20px;
+    position: absolute;
+    width: 100%;
+    z-index: -1;
+}
+
+.datepicker .between-date .show-date:before {
+    background-color: #0568ae;
+    content: "";
+    display: block;
+    height: 26px;
+    left: 0;
+    position: absolute;
+    width: 100%;
+    z-index: -1;
+}
+
+.datepicker .end-date .show-date {
+    border-radius: 0 5px 5px 0;
+}
+
+.datepicker .end-date .show-date:before {
+    background-color: #0568ae;
+    content: "";
+    display: block;
+    height: 26px;
+    left: -20px;
+    position: absolute;
+    width: 100%;
+    z-index: -1;
+}
+
+.datepicker .between-date:first-child .show-date:before {
+    background-color: #fff;
+    content: "";
+    height: 26px;
+    position: absolute;
+    left: 0;
+    width: 8px;
+}
+
+.datepicker .end-date:first-child .show-date:after {
+    background-color: #fff;
+    content: "";
+    height: 26px;
+    position: absolute;
+    left: 0;
+    width: 8px;
+}
+
+.datepicker .end-date:first-child .show-date::before {
+    background-color: #fff;
+}
+
+.datepicker tr td.start-date:last-child .show-date:after,
+.datepicker tr td.between-date:last-child .show-date:after {
+    background-color: #fff;
+    content: "";
+    height: 26px;
+    position: absolute;
+    right: 0;
+    width: 8px;
+}
+
+.datepicker tr td.start-date:last-child:focus .show-date:after,
+.datepicker tr td.end-date:last-child:focus .show-date:after,
+.datepicker tr td.between-date:last-child:focus .show-date:after,
+.datepicker tr td.start-date:first-child:focus .show-date:after,
+.datepicker tr td.end-date:first-child:focus .show-date:after,
+.datepicker tr td.between-date:first-child:focus .show-date:after {
+    height: 30px;
+    width: 30px;
+    background-color: transparent;
+}
+
+.datepicker td.active:not(.new) .show-date,
+.datepicker td.active:hover:not(.new) .show-date {
+    color: #0568ae;
+    font-family: "Omnes-ECOMP-W02-Medium", Arial;
+}
+
+.datepicker td.disabled .show-date,
+.datepicker td.disabled:hover .show-date {
+    font-family: "Omnes-ECOMP-W02", Arial;
+    color: #5a5a5a;
+}
+
+.datepicker td span {
+    display: block;
+    width: 23%;
+    height: 54px;
+    line-height: 54px;
+    float: left;
+    margin: 1%;
+    cursor: pointer;
+    border-radius: 4px;
+}
+
+.datepicker td span:hover {
+    background: #eeeeee;
+}
+
+.datepicker td span.disabled,
+.datepicker td span.disabled:hover {
+    background: none;
+    color: #5a5a5a;
+    cursor: default;
+}
+
+.datepicker td span.active,
+.datepicker td span.active:hover,
+.datepicker td span.active.disabled {
+    color: #ffffff;
+    background-color: #0568ae;
+    border-color: #357ebd;
+}
+
+.datepicker th.datepicker-switch {
+    width: 198px;
+    font-size: 20px;
+    font-weight: normal;
+    cursor: default !important;
+}
+
+.datepicker thead tr:first-child th,
+.datepicker tfoot tr th {
+    cursor: pointer;
+    height: 60px;
+    line-height: 60px;
+}
+
+.datepicker tfoot tr th {
+    height: auto;
+    line-height: normal;
+}
+
+.datepicker tfoot tr th li {
+    margin-bottom: 5px;
+}
+
+.datepicker .prev,
+.datepicker .next {
+    color: transparent;
+    font-size: 0;
+    margin: 0 -1px -1px 0;
+    width: 46px;
+}
+
+.datepicker .prev i,
+.datepicker .next i {
+    color: #0568ae;
+    position: absolute;
+    font-size: 27px;
+    margin: 0;
+    top: 15px;
+}
+
+.datepicker .prev i {
+    left: 8px;
+}
+
+.datepicker .next i {
+    right: 8px;
+}
+
+.datepicker .cw {
+    font-size: 5px;
+    width: 12px;
+    padding: 0 2px 0 5px;
+    vertical-align: middle;
+}
+
+.datepicker thead tr:first-child th.cw {
+    cursor: default;
+    background-color: transparent;
+}
+
+.input-group.date .input-group-addon i {
+    cursor: pointer;
+    width: 16px;
+    height: 16px;
+}
+
+.datepicker.dropdown-menu {
+    box-shadow: 0 10px 15px -10px rgba(0, 0, 0, 0.7);
+    position: absolute;
+    top: 100%;
+    left: 0;
+    float: left;
+    display: none;
+    margin-top: 13px;
+    width: 290px;
+    list-style: none;
+    background-color: #ffffff;
+    border: 1px solid #d2d2d2;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    border-radius: 5px;
+    color: #333333;
+    font-size: 13px;
+    line-height: 1.428571429;
+    z-index: 1050;
+}
+
+.datepicker.dropdown-menu th,
+.datepicker.dropdown-menu td {
+    display: block;
+    float: left;
+    padding: 0;
+    position: relative;
+}
+
+.datepicker .due-date .show-date {
+    font-family: "Omnes-ECOMP-W02-Medium", Arial;
+    background-color: #cf2a2a;
+    border-radius: 5px;
+    color: #fff !important;
+}
+
+.datepicker .day.active .show-date:after,
+.datepicker .day:focus .show-date:after,
+.datepicker .due-date.disabled .show-date:after {
+    border: 2px solid #0568ae;
+    border-radius: 7px;
+    content: "";
+    display: block;
+    height: 30px;
+    left: 4px;
+    position: absolute;
+    top: 0;
+    width: 30px;
+}
+
+.datepicker .day:focus .show-date:after {
+    height: 30px;
+    left: 4px;
+    top: 0;
+    width: 30px;
+}
+
+.datepicker .day.due-date:focus .show-date:after {
+    height: 30px;
+    left: 4px;
+    top: 0;
+    width: 30px;
+}
+
+.datepicker .due-date.old:after,
+.datepicker .due-date.new:after {
+    visibility: hidden;
+}
+
+.datepicker .due-date.active:after {
+    border-color: #fff;
+}
+
+.datepicker .due-date.active.focused {
+    color: #0568ae !important;
+}
+
+.datepicker .due-date.active.focused:after {
+    border-color: #cf2a2a !important;
+}
+
+.datepicker .dow {
+    height: 24px;
+    width: 42px;
+    font-weight: normal;
+    position: relative;
+    overflow: hidden;
+    color: transparent;
+    letter-spacing: -6px;
+    margin: 0 -1px -1px 0;
+}
+
+.datepicker .dow span[aria-hidden="true"] {
+    bottom: 0;
+    color: #5a5a5a;
+    display: block;
+    left: 1px;
+    letter-spacing: 0;
+    line-height: .9;
+    margin: 0 auto;
+    padding: 0;
+    position: relative;
+    width: 22px;
+}
+
+.datepicker .calendar-legend {
+    margin-top: 3px;
+    margin-bottom: 20px;
+}
+
+.datepicker .calendar-legend li {
+    font-size: 1.4rem;
+    font-weight: normal;
+    margin-bottom: 5px;
+    padding-left: 10px;
+    padding-top: 5px;
+    position: relative;
+}
+
+.datepicker i.legend-due-date {
+    background-color: #cf2a2a;
+    border-radius: 5px;
+    height: 18px;
+    width: 18px;
+    margin-right: 8px;
+    vertical-align: middle;
+    display: inline-block;
+}
+
+.datepicker i.legend-selected-date {
+    background-color: #fff;
+    border: 2px solid #0568ae;
+    border-radius: 5px;
+    height: 18px;
+    width: 18px;
+    margin-right: 8px;
+    vertical-align: middle;
+    display: inline-block;
+}
+
+.datepicker i.legend-selectedisdue {
+    background-color: #fff;
+    border: 2px solid #0568ae;
+    border-radius: 5px;
+    display: inline-block;
+    height: 18px;
+    margin-right: 8px;
+    position: relative;
+    vertical-align: middle;
+    width: 18px;
+}
+
+.datepicker i.legend-selectedisdue:after {
+    background-color: #cf2a2a;
+    border-radius: 3px;
+    content: "";
+    display: block;
+    height: 10px;
+    left: 2px;
+    position: absolute;
+    top: 2px;
+    width: 10px;
+}
+
+.datepicker .text-left {
+    width: 100%;
+}
+
+.datepicker .active.old {
+    background-color: #ededed !important;
+    color: #ededed !important;
+}
+
+.s,
+.m,
+.t,
+.w,
+.f,
+.d,
+.l,
+.v,
+.j {
+    display: block;
+    height: 20px;
+    width: 12px;
+    margin: 0 auto;
+    background-color: white;
+    background-repeat: no-repeat;
+}
+
+.s {
+    background-position: -62px 0;
+}
+
+.m {
+    background-position: -5px 0;
+}
+
+.t {
+    background-position: -19px 0;
+}
+
+.w {
+    background-position: -34px 0;
+}
+
+.f {
+    background-position: -49px 0;
+}
+
+/* spanish */
+.d {
+    background-position: 0 0;
+}
+
+.l {
+    background-position: 0 0;
+}
+
+.v {
+    background-position: 0 0;
+}
+
+.j {
+    background-position: 0 0;
+}
+
+.datepicker-container {
+    position: relative;
+}
+
+.btn-calendar-icon:focus .icon-primary-calendar {
+    outline: 1px dotted #191919;
+}
+
+.btn-calendar-icon:focus {
+    outline: none;
+}
+
+/* remove focus outline when dropdown is opened */
+/*resolve blue focus outline over dropdown with error*/
+select {
+    margin-right: -1;
+
+    height: 36px;
+    line-height: 25px;
+
+    background-color: #95959521;
+}
+
+.selectWrap.disabled .icon-primary-down {
+    color: #d6d6d6;
+}
+
+.selectWrap.disabled input.awd-select {
+    z-index: 0;
+    padding: 10px 45px 10px 15px;
+    text-indent: 0;
+}
+
+.selectWrap.disabled button.awd-select {
+    z-index: 0;
+    text-indent: 15px;
+}
+
+.selectWrap.disabled:after {
+    color: #5A5A5A;
+    cursor: not-allowed;
+}
+
+input.awd-select {
+    background-color: transparent;
+    border: 1px solid #d2d2d2;
+    border-radius: 6px;
+    box-shadow: 1px 5px 2px -5px rgba(0, 0, 0, 0.15);
+    color: #333333;
+    display: block;
+    font-family: "Omnes-ECOMP-W02", Arial;
+    /*font-size: 1.6rem;*/
+    height: 36px;
+    line-height: 0;
+    margin-bottom: 0;
+    position: relative;
+    text-align: left;
+    top: 0;
+    width: 100%;
+    z-index: 10;
+    padding: 12px 45px 8px 15px;
+    user-select: none;
+}
+
+input.awd-select:focus {
+    border-color: #0568ae !important;
+    text-overflow: ellipsis;
+    padding-right: 45px;
+}
+
+button.awd-select {
+    background-color: transparent;
+    border: 1px solid #d2d2d2;
+    border-radius: 6px;
+    box-shadow: 1px 5px 2px -5px rgba(0, 0, 0, 0.15);
+    color: #333333;
+    display: block;
+    font-family: "Omnes-ECOMP-W02", Arial;
+    /*font-size: 1.6rem;*/
+    height: 36px;
+    line-height: 36px;
+    margin-bottom: 0;
+    position: relative;
+    text-align: left;
+    top: 0;
+    width: 100%;
+    z-index: 10;
+}
+
+button.awd-select:not(.large) {
+    text-indent: 15px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: clip;
+    text-overflow: ellipsis;
+}
+
+button.awd-select img {
+    height: 26px;
+    margin-right: 7px;
+    margin-top: -10px;
+    position: relative;
+    top: 2px;
+    vertical-align: text-bottom;
+}
+
+button.awd-select:focus {
+    border-color: #0568ae !important;
+}
+
+button.awd-select i {
+    font-size: 23px;
+    position: absolute;
+    right: 33px;
+    top: 5px;
+    z-index: 1000;
+}
+
+button.awd-select.large {
+    align-items: center;
+    display: flex;
+    height: 60px;
+    line-height: 20px;
+    overflow: hidden;
+    padding-left: 70px;
+    vertical-align: middle;
+}
+
+button.awd-select.large img {
+    height: 40px;
+    left: 20px;
+    position: absolute;
+    top: 20px;
+    width: 40px;
+}
+
+.selectWrap.large {
+    height: 60px;
+}
+
+.selectWrap.large .awd-select-list-item {
+    align-items: center;
+    display: flex;
+    height: 60px;
+    line-height: 20px;
+    overflow: hidden;
+    padding-left: 70px;
+    vertical-align: middle;
+}
+
+.selectWrap.large .awd-select-list-item img {
+    height: 40px;
+    left: 20px;
+    position: absolute;
+    top: 20px;
+    width: 40px;
+    top: 10px;
+}
+
+.inputWrap {
+    border-radius: 6px;
+    position: relative;
+    height: 36px;
+    line-height: 44px;
+    display: block;
+    margin: 0;
+}
+
+button.awd-select.active {
+    border-radius: 6px 6px 0 0;
+}
+
+button.awd-select.active:focus {
+    border-color: #d2d2d2 !important;
+}
+
+input.awd-select.active {
+    border-radius: 6px 6px 0 0;
+}
+
+input.awd-select.active:focus {
+    border-color: #d2d2d2 !important;
+}
+
+.selectWrapper {
+    position: relative;
+}
+
+span.selectWrap input[readonly]:focus {
+    color: transparent;
+    text-shadow: 0 0 0 #000;
+}
+
+.isIE.ds2-no-colors .awd-select:focus {
+    outline: 1px dashed transparent;
+}
+
+.awd-select-list {
+    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15);
+    border-radius: 0 0 6px 6px;
+    position: absolute;
+    border: 1px solid #d2d2d2;
+    border-top: 0;
+    padding: 0;
+    background-color: #f2f2f2;
+    z-index: 1000;
+    width: 100%;
+    max-height: 320px;
+    overflow-y: auto;
+}
+
+.awd-select-list-item {
+    cursor: pointer;
+    height: 100%;
+    min-height: 36px;
+    line-height: 20px;
+    overflow: hidden;
+    padding: 8px 15px;
+    position: relative;
+    z-index: 1000;
+}
+
+.awd-select-list-item:hover {
+    cursor: pointer;
+    background-color: #d2d2d2;
+    outline: 1px dashed transparent;
+}
+
+.awd-select-list-item:focus {
+    cursor: pointer;
+    background-color: #d2d2d2;
+    outline: 1px dashed transparent;
+}
+
+.awd-select-list-item img {
+    margin-top: 0;
+    margin-right: 7px;
+    height: 26px;
+    width: 26px;
+}
+
+.selectWrap {
+    border-radius: 6px;
+    position: relative;
+    height: 36px;
+    line-height: 28px;
+    display: block;
+    margin: 0;
+    background: linear-gradient(to bottom, #fcfcfc 0%, #f2f2f2 100%);
+    background: -webkit-linear-gradient(top, #fcfcfc 0%, #f2f2f2 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="@att-gray-highlight", endColorstr="@att-functional-bg-gray", GradientType=0);
+}
+
+.selectWrap:not(.large) .awd-select-list-item:first-child {
+    margin-top: 15px;
+}
+
+.selectWrap:not(.large) .awd-select-list-item:last-child {
+    margin-bottom: 15px;
+}
+
+.selectWrap .icon-primary-down {
+    font-size: 23px;
+    margin-top: -11px;
+    position: absolute;
+    right: 4px;
+    top: 50%;
+}
+
+.selectWrap + [aria-expanded="true"] {
+    padding-bottom: 9px;
+    padding-top: 20px;
+}
+
+.awd-select-list-item[data-hover="true"] {
+    background-color: #d2d2d2;
+}
+
+span input.awd-select {
+    width: 100%;
+    cursor: pointer;
+    text-overflow: ellipsis;
+    padding-right: 45px;
+}
+
+li.optgroup-wrapper {
+    font-family: "Omnes-ECOMP-W02-Medium", Arial;
+    cursor: default !important;
+    padding: 0px 15px;
+}
+
+li.optgroup-wrapper:first-child {
+    padding-top: 10px;
+}
+
+li.optgroup-wrapper:hover {
+    background-color: #f2f2f2;
+}
+
+ul.optgroup {
+    font-family: "Omnes-ECOMP-W02", Arial;
+    cursor: pointer !important;
+    margin: 0 -15px;
+}
+
+ul.optgroup li {
+    padding: 0 0 0 33px;
+}
+
+label + .selectWrap {
+    margin-top: 4px;
+}
+
+.group .selectWrap {
+    margin: 0 0 10px 0;
+}
+
+select.awd-select {
+    position: relative;
+    top: 0;
+    left: 0;
+    font-size: 16px;
+    z-index: 1010;
+    height: 33px;
+    min-width: 100%;
+    opacity: 0.01;
+}
+
+select.awd-select > optgroup {
+    padding-left: 8px;
+    font-style: normal;
+    margin-top: 10px;
+}
+
+select.awd-select > optgroup:first-child {
+    margin-top: 0;
+}
+
+select.awd-select > optgroup > option {
+    padding-left: 8px;
+}
+
+select.awd-select > option {
+    padding-left: 8px;
+}
+
+select.awd-select + span {
+    background: linear-gradient(to bottom, #fcfcfc 0%, #f2f2f2 100%);
+    background: -webkit-linear-gradient(top, #fcfcfc 0%, #f2f2f2 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="@att-gray-highlight", endColorstr="@att-functional-bg-gray", GradientType=0);
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 0;
+    display: block;
+    border: 1px solid #d2d2d2;
+    border-radius: 6px;
+    height: 35px;
+    line-height: 0;
+    padding: 18px 45px 15px 15px;
+    width: 100%;
+    font-size: 1.6rem;
+    padding-right: 45px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+select.awd-select + span > i {
+    font-size: 23px;
+    position: absolute;
+    right: 33px;
+    top: 5px;
+    z-index: 1000;
+}
+
+select.awd-select + span > i:before {
+    left: 1px;
+    position: absolute;
+    top: -1px;
+}
+
+select.awd-select:focus + span {
+    border-color: #0568ae;
+}
+
+
+.btn.disabled[ddh-load-button] {
+    line-height: 46px;
+    padding: 0 19px 0 18px;
+}
+
+.btn.disabled[ddh-load-button] {
+    color: #666666;
+}
+
+.icon-primary-spinner-ddh.large {
+    height: 50px;
+    width: 50px;
+}
+
+.icon-primary-spinner-ddh.small {
+    height: 30px;
+    width: 30px;
+}
+
+.icon-primary-spinner-ddh {
+    -webkit-animation: 1s linear infinite spinner;
+    animation: 1s linear infinite spinner;
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiIgaWQ9InN2Zy1zcGlubmVyIiB4PSIwcHgiIHk9IjBweCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CiAgIDxwYXRoIGZpbGw9IiNGNUY1RjUiIGQ9Ik0xOCAzNkM4LjEgMzYgMCAyNy45IDAgMThTOC4xIDAgMTggMHMxOCA4LjEgMTggMTgtOC4xIDE4LTE4IDE4em0wLTMxLjVjLTcuNSAwLTEzLjUgNi0xMy41IDEzLjVTMTAuNiAzMS41IDE4IDMxLjVjNy41IDAgMTMuNS02LjEgMTMuNS0xMy41IDAtNy41LTYtMTMuNS0xMy41LTEzLjV6Ii8+CiAgIDxwYXRoIGZpbGw9IiMwNTY4QUUiIGlkPSJzcGlubmVyIiBkPSJNMzAuNyA1LjNsLTMuMSAzLjJjMi40IDIuNCAzLjkgNS44IDMuOSA5LjUgMCA3LjQtNi4xIDEzLjUtMTMuNSAxMy41UzQuNSAyNS40IDQuNSAxOCAxMC42IDQuNSAxOCA0LjVWMEM4LjEgMCAwIDguMSAwIDE4czguMSAxOCAxOCAxOCAxOC04LjEgMTgtMThjMC01LTItOS41LTUuMy0xMi43eiIgdHJhbnNmb3JtPSIiPiAgICAgIAogICA8L3BhdGg+Cjwvc3ZnPg==);
+}
+
+.btn-small .icon-primary-spinner-ddh {
+    height: 30px !important;
+    width: 30px !important;
+}
+
+.btn-small .icon-primary-spinner {
+    height: 30px;
+    width: 30px;
+}
+
+i:focus {
+    outline: thin dotted #666;
+}
+
+.p-col-md-12 {
+    width: 50%;
+}
+
+.fieldLabel {
+    color: #666666;
+}
+
+.fieldLabel input {
+    color: #666666;
+}
+
+
+.fade1, .fadel {
+    opacity: 0.4;
+}
+
+.fade2, .fadesl {
+    opacity: 0.6;
+}
+
+h4#pagination-truncated {
+    margin-top: 50px;
+}
+
+h4#pagination-large-count {
+    margin-top: 50px;
+}
+
+input[type="text"]::-moz-placeholder {
+    color: #767676;
+    font-family: "Omnes-ECOMP-W02-Italic", Arial;
+}
+
+input[type="text"]:focus {
+    z-index: 1000;
+}
+
+input[type="text"] + .reset-field {
+    background-color: #FFFFFF;
+    height: 90%;
+    top: 5%;
+}
+
+.btn-search:focus {
+    outline: 1px dotted #0574ac;
+}
+
+.field-group input:not([type="button"])[disabled] ~ .btn-search {
+    background-color: #eee;
+}
+
+.btn-search[class*="btn"] {
+    background-color: #FFFFFF;
+    background-size: 20px 20px;
+    border-radius: 0 1.5rem 1.5rem 0;
+    height: 3rem;
+    min-width: 4.4rem !important;
+    right: 0.15rem;
+    top: 0.15rem;
+    width: 4.4rem;
+}
+
+.search-suggestion-wrapper {
+    margin-bottom: 15px;
+    position: relative;
+}
+
+.search-suggestion-wrapper .no-result {
+    padding: 0px 15px;
+}
+
+.search-suggestion-item {
+    color: #333333;
+    line-height: 4rem;
+    padding: 0 15px;
+    position: relative;
+    z-index: 1000;
+}
+
+.search-suggestion-item:hover {
+    background-color: #e4e4e4;
+    cursor: pointer;
+}
+
+.search-suggestion-item:focus {
+    background-color: #e4e4e4;
+    cursor: pointer;
+}
+
+.search-suggestion-item a {
+    color: #333333;
+    text-decoration: none;
+}
+
+.btn-search i {
+    color: #767676;
+}
+
+input.b2b-search-input-field:focus ~ .btn-search > i, .btn-search:focus > i {
+    color: #0568ae;
+}
+
+button.btn-search[disabled] {
+    cursor: not-allowed;
+}
+
+button.btn-search[disabled] i {
+    color: #767676;
+}
+
+.innershadow {
+    -webkit-background-blend-mode: mutilply;
+    box-shadow: 0 3px 0 2px rgba(0, 0, 0, 0.08);
+}
+
+li.module-groups {
+    cursor: default !important;
+    padding: 18px 15px 0px 15px;
+}
+
+li.module-list-item[selected]:before {
+    box-sizing: border-box;
+    display: inline-block;
+    font-size: 2em;
+    height: 1em;
+    position: absolute;
+    top: 20px;
+    right: 0px;
+    vertical-align: middle;
+    width: 1em;
+    color: #007a3e;
+}
+
+ul.module-optinalcta {
+    position: relative;
+    height: 44px;
+    margin-top: 0px;
+    border-bottom: 1px solid #d2d2d2;
+    border-left: 1px solid #d2d2d2;
+    border-right: 1px solid #d2d2d2;
+    border-radius: 0px 0px 6px 6px;
+}
+
+ul.module-optinalcta li {
+    position: absolute;
+    bottom: 10px;
+}
+
+ul.module-optinalcta a {
+    text-indent: 15px;
+    padding: 15px;
+}
+
+@keyframes spinner {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(359deg);
+    }
+}
+
+table {
+    max-width: 100%;
+    background-color: transparent;
+    border-collapse: collapse;
+    border-spacing: 0;
+    width: 100%;
+}
+
+table caption {
+    text-align: left;
+}
+
+table thead th {
+    vertical-align: bottom;
+}
+
+table th,
+table td {
+    padding: 19px 20px;
+    line-height: 1;
+    font-size: 1.4rem;
+    text-align: left;
+    vertical-align: top;
+    word-wrap: break-word;
+}
+
+table th {
+    font-family: "Omnes-ECOMP-W02-Medium", Arial;
+    font-size: 1.6rem;
+    font-weight: normal;
+    color: #333333;
+    padding: 13px 20px;
+}
+
+
+table tbody td:first-child {
+    border-left: none;
+}
+
+@media (max-width: 767px) {
+    table th,
+    table td {
+        padding: 19px 10px;
+    }
+
+    table th:first-child,
+    table td:first-child {
+        padding: 19px 15px;
+    }
+}
+
+.data-row-list ul > li {
+    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewport%3D%220%200%201%201%22%20style%3D%22width%3A100%25%3B%20height%3A1px%3B%22%3E%3Cstyle%3Eline%7Bstroke%3Argba(153%2C153%2C153%2C1)%3Bstroke-width%3A2%3B%7D%3C%2Fstyle%3E%3Cline%20y2%3D%221%22%20y1%3D%221%22%20x1%3D%221%22%20x2%3D%22100%25%22%20stroke-dasharray%3D%221%2C%203%22%2F%3E%3C%2Fsvg%3E") !important;
+}
+
+table {
+    border-bottom: 1px solid #d2d2d2;
+}
+
+table th,
+table td {
+    padding: 15px 15px 10px;
+}
+
+button .colors-off-msg {
+    position: relative;
+}
+
+
+textarea, input {
+    color: #333;
+}
+
+.selectWrap::after {
+    align-items: center;
+    background-position: 7px 7px;
+    background-repeat: no-repeat;
+    background-size: auto 23px;
+    border-left: 1px solid transparent;
+    color: #0568ae;
+    display: flex;
+    font-size: 23px;
+    height: 36px;
+    margin-right: 0;
+    overflow: hidden;
+    position: absolute;
+    right: 0;
+    text-indent: 7px;
+    top: 0;
+    user-select: none;
+    width: 41px;
+    z-index: 0;
+    position: absolute !important;
+    display: flex !important;
+}
+
+.card {
+    border-radius: 5px;
+}
+
+.card-header {
+    height: 50px;
+}
+
+.card-body {
+    height: 150px;
+}
+
+.card-footer {
+    height: 50px;
+}
+
+.dialog__close-btn {
+    border: 0;
+    background: #087ac2;
+    color: #ffffff;
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    font-size: 1.2em;
+    display: block;
+    border: #087ac2 2px solid;
+}
+
+.dialog {
+    margin-top: 50px;
+}
+
+.modalTitle {
+    font-size: 35px;
+}
+
+.defaultFontSize {
+    font-size: 12px;
+}
+
+.defaultFontSizeTextArea {
+    font-size: 12px;
+    width: 200px;
+    height: 42px
+}
+
+
+.tab-content {
+    margin-right: 20px;
+    /* background-color: #006496; */
+    color: rgb(0, 0, 0);
+    font-size: 12px;
+}
+
+.btn-sm {
+    width: 30px;
+    height: 15px;
+    font-size: 10px;
+}
+
+
+table, tr, td, th {
+    border: 0;
+    width: fit-content
+}
+
+
+mat-icon {
+    color: #006496;
+    cursor: pointer;
+}
+
+.matFormField {
+    width: 300px;
+}
+
+.proceedWitLoadButton {
+    font-size: 15px;
+    background: green;
+    color: white;
+
+}
+
+.abortButton {
+    font-size: 15px;
+    background: red;
+    color: white;
+}
+
+.reportTitle {
+    font-size: 16px;
+    font-weight: bold;
+}
+
+textarea {
+    display: block;
+    width: 800px;
+    padding: 8px;
+    padding-left: 15px;
+    height: 36px;
+}
+
+.subtitle {
+    font-weight: bold;
+    color: #f44336;
+    padding-top: 5px;
+    font-size: 12px;
+}
+
+.finalWidth{
+    width: 100%;
+}
+
+.finalTimeDivWidth{
+    width: 70%;
+}
+.timeStamp-HMS-sec-span{
+    width: 35%; font-size: 12px; float: left; padding-top: 12px; padding-left: 5px;
+}
+
+.timeStamp-HMS-sec-div{
+    width:65%; float: right; padding-left: 2px;
+}
+
+.timeStamp-HMS-Min-span{
+    width: 35%; font-size: 12px; float: left;  padding-top: 12px; padding-left: 5px;
+}
+
+.timeStamp-HMS-Min-div{
+    width:60%; float: right; padding-left: 2px;
+}
+
+.timeStamp-HMS-Hrs-span{
+    width: 35%; font-size: 12px; float: left;  padding-top: 12px; padding-left: 2px;
+}
+
+.timeStamp-HMS-Hrs-div{
+    width:65%; float: right;
+}
+
+.timeStamp-HMS-matFormField{
+    width: 40%;
+}
+
+.timeStamp-HMS-input{
+    font-size: 12px; padding: 3px;
+}
+.timeStamp-HMS-inner-div{
+    width: 20%; float: right;
+}
+.timeStamp-sec-select{
+    width: 42px; height: 30px; font-size: 12px; padding-left: 3px;
+}
+
+.timeStamp-HM-matFormField{
+    width: 50%;
+}
+
+
+.timeStamp-HM-Min-div{
+    width: 25%; float: right; padding-left: 13px;
+}
+.timeStamp-HM-Min-span{
+    width: 35%; font-size: 12px; float: left; padding-top: 12px;
+}
+.timeStamp-HM-Min-inner-div{
+    width:65%; float: right; padding-left: 10px;
+}
+
+.timeStamp-min-select{
+    width: 45px; height: 30px; font-size: 12px; padding-left: 3px;
+}
+
+.timeStamp-HM-Hrs-inner-div{
+    width:60%; float: right; padding-right: 3px;
+}
+
+.timeStamp-HM-Hrs-inner-span{
+    width: 40%; font-size: 12px; float: left; padding-top: 12px;
+}
+
+.timeStamp-HM-Hrs-div{
+    width: 25%; float: right;
+}
+
+
+.timeStamp-H-Hrs-div{
+    width: 30%; float: right;
+}
+
+.timeStamp-H-Hrs-inner-span{
+    width: 40%; font-size: 12px; float: left; padding-top: 12px;
+}
+
+.timeStamp-H-Hrs-inner-div{
+    width:60%; float: right;
+}
+
+.timeStamp-H-Hrs-inner-div-select{
+    width: 45px; height: 30px; font-size: 12px ; padding-left: 3px;
+}
+
+
+:host ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-suffix .mat-datepicker-toggle-default-icon {
+    width: 1.5em;
+}
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-form-fields/run-report-form-fields.component.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-form-fields/run-report-form-fields.component.html
new file mode 100644
index 00000000..aea6c768
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-form-fields/run-report-form-fields.component.html
@@ -0,0 +1,340 @@
+<span *ngIf="showSpinner" class="ecomp-spinner"></span>
+
+<div *ngIf="!showSpinner" class="stdForm">
+
+    <div class="tab-content">
+        <table>
+            <tr>
+                <td>
+                    <h6 class="reportTitle">{{reportName}}</h6>
+                    <h6 class="subtitle">{{reportSubTitle}}</h6>
+                </td>
+                <td>
+                    <mat-icon (click)="editReport(reportId)" *ngIf="allowEdit"
+                              aria-hidden="false" aria-label="edit">edit
+                    </mat-icon>
+                </td>
+            </tr>
+        </table>
+        <span *ngIf="showformFiledSpinner" class="ecomp-spinner"></span>
+        <br>
+        <div *ngIf="!showformFiledSpinner" class="stdForm">
+            <div *ngIf="formFieldList" class="wrapper">
+                <div *ngFor="let item of formFieldList; let i = index;">
+                    <div *ngIf="item.fieldType == 'TEXT' && item.validationType !== 'DATE'"
+                         class="fieldWidth">
+                        <label class="labelWidth">{{item.fieldDisplayName}} :</label> <textarea matInput placement="right" ngbTooltip="comma seperated"
+                                                                                                [ngModel]="formFieldListValueMap.get(item.fieldId)" (ngModelChange)="formFieldListValueMap.set(item.fieldId, $event.toString().trim())"  class="defaultFontSizeTextArea" id="item.fieldId"></textarea>
+                    </div>
+                    <div *ngIf="item.fieldType == 'LIST_BOX'" class="fieldWidth">
+                        <label class="labelWidth" for="reportType">{{item.fieldDisplayName}} :</label>
+                        <select  [ngModel]="formFieldListValueMap.get(item.fieldId)" (ngModelChange)="formFieldListValueMap.set(item.fieldId, $event)"
+                                 class="browser-default custom-select defaultFontSize" required="required"
+                        >
+                            <option *ngFor="let listItem of item.formFieldValues"
+                                    class="defaultFontSize" value="{{listItem.id}}">{{listItem.name}}</option>
+                        </select>
+                    </div>
+                    <div *ngIf="item.fieldType == 'LIST_MULTI_SELECT'" class="fieldWidth">
+                        <label class="labelWidth" for="reportType">{{item.fieldDisplayName}} :</label>
+                        <mat-form-field>
+                            <mat-select [ngModel]="formFieldListValueMap.get(item.fieldId)" (ngModelChange)="formFieldListValueMap.set(item.fieldId, $event)" multiple>
+                                <mat-option *ngFor="let listItem of item.formFieldValues"
+                                            value="{{listItem.id}}">{{listItem.name}}</mat-option>
+                            </mat-select>
+                        </mat-form-field>
+                    </div>
+                    <div *ngIf="item.validationType == 'DATE'" class="fieldWidth">
+                        <label class="labelWidth" for="reportType">{{item.fieldDisplayName}} :</label>
+                        <mat-form-field><input  [ngModel]="formFieldListValueMap.get(item.fieldId)" (ngModelChange)="formFieldListValueMap.set(item.fieldId, $event)"
+                                                [matDatepicker]="picker"
+                                                class="defaultFontSize" matInput>
+                            <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
+                            <mat-datepicker #picker></mat-datepicker>
+                        </mat-form-field>
+                    </div>
+
+                    <div *ngIf="item.validationType == 'TIMESTAMP_SEC'" class="finalWidth">
+                        <label class="labelWidth" class="defaultFontSize" for="reportType">{{item.fieldDisplayName}} :</label>
+                        <div class="finalWidth">
+                            <mat-form-field class="timeStamp-HMS-matFormField"><input class="timeStamp-HMS-input"
+                                                                       [(ngModel)]="formFieldListValueMap.get(item.fieldId)[0]" [matDatepicker]="picker" matInput>
+                                <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
+                                <mat-datepicker #picker></mat-datepicker>
+                            </mat-form-field>
+                            <div class="timeStamp-HMS-inner-div">
+                                <span class="timeStamp-HMS-sec-span">Sec:</span>
+                                <div class="timeStamp-HMS-sec-div">
+                                    <select name="Seconds" id="Seconds" class="browser-default custom-select timeStamp-sec-select "       
+                                            [(ngModel)]="formFieldListValueMap.get(item.fieldId)[3]">
+                                        <option *ngFor="let listItem of timeStampArray" class="defaultFontSize" value="{{listItem}}">
+                                            {{listItem}}</option>
+                                    </select>
+                                </div>
+                            </div>
+                            <div class="timeStamp-HMS-inner-div">
+                                <span class="timeStamp-HMS-Min-span">Min:</span>
+                                <div class="timeStamp-HMS-Min-div">
+                                    <select name="Minutes" id="Minutes" class="browser-default custom-select timeStamp-sec-select"
+                                            [(ngModel)]="formFieldListValueMap.get(item.fieldId)[2]">
+                                        <option *ngFor="let listItem of timeStampArray" class="defaultFontSize" value="{{listItem}}">
+                                            {{listItem}}</option>
+                                    </select>
+                                </div>
+                            </div>
+                            <div class="timeStamp-HMS-inner-div">
+                                <span class="timeStamp-HMS-Hrs-span">Hrs:</span>
+                                <div class="timeStamp-HMS-Hrs-div">
+                                    <select name="Hours" id="Hours" class="browser-default custom-select timeStamp-sec-select"
+                                            [(ngModel)]="formFieldListValueMap.get(item.fieldId)[1]">
+                                        <option *ngFor="let listItem of hoursArray" class="defaultFontSize" value="{{listItem}}">{{listItem}}
+                                        </option>
+
+                                    </select>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div *ngIf="item.validationType == 'TIMESTAMP_MIN'" class="finalWidth">
+                        <label class="labelWidth" class="defaultFontSize" for="reportType">{{item.fieldDisplayName}} :</label>
+                        <div class="finalTimeDivWidth">
+                            <mat-form-field class="timeStamp-HM-matFormField"><input class="timeStamp-HMS-input"
+                                                                       [(ngModel)]="formFieldListValueMap.get(item.fieldId)[0]" [matDatepicker]="picker" matInput>
+                                <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
+                                <mat-datepicker #picker></mat-datepicker>
+                            </mat-form-field>
+
+                            <div class="timeStamp-HM-Min-div">
+                                <span class="timeStamp-HM-Min-span">Min:</span>
+                                <div class="timeStamp-HM-Min-inner-div">
+                                    <select name="Minutes" id="Minutes" class="browser-default custom-select timeStamp-min-select "
+                                            [(ngModel)]="formFieldListValueMap.get(item.fieldId)[2]">
+                                        <option *ngFor="let listItem of timeStampArray" class="defaultFontSize" value="{{listItem}}">
+                                            {{listItem}}</option>
+                                    </select>
+                                </div>
+                            </div>
+                            <div class="timeStamp-HM-Hrs-div">
+                                <span class="timeStamp-HM-Hrs-inner-span">Hrs:</span>
+                                <div class="timeStamp-HM-Hrs-inner-div">
+                                    <select name="Hours" id="Hours" class="browser-default custom-select timeStamp-min-select "
+                                            [(ngModel)]="formFieldListValueMap.get(item.fieldId)[1]">
+                                        <option *ngFor="let listItem of hoursArray" class="defaultFontSize" value="{{listItem}}">{{listItem}}
+                                        </option>
+
+                                    </select>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div *ngIf="item.validationType == 'TIMESTAMP_HOUR'" class="finalWidth">
+                        <label class="labelWidth defaultFontSize"  for="reportType">{{item.fieldDisplayName}} :</label>
+                        <div class="finalTimeDivWidth">
+                            <mat-form-field class="finalTimeDivWidth"><input class="timeStamp-HMS-input"
+                                                                       [(ngModel)]="formFieldListValueMap.get(item.fieldId)[0]" [matDatepicker]="picker" matInput>
+                                <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
+                                <mat-datepicker #picker></mat-datepicker>
+                            </mat-form-field>
+
+                            <div class="timeStamp-H-Hrs-div">
+                                <span class="timeStamp-H-Hrs-inner-span">Hrs:</span>
+                                <div class="timeStamp-H-Hrs-inner-div">
+                                    <select name="Hours" id="Hours" class="browser-default custom-select timeStamp-H-Hrs-inner-div-select"
+                                            [(ngModel)]="formFieldListValueMap.get(item.fieldId)[1]">
+                                        <option *ngFor="let listItem of hoursArray" class="defaultFontSize" value="{{listItem}}">{{listItem}}
+                                        </option>
+                                    </select>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                  
+
+                </div>
+            </div>
+            <div *ngIf="formFieldList" style="padding: 0.3em" >
+                <div *ngIf="unCommonGropusList.length > 0">
+                    <label style="padding-top: 3px;">Select :</label><br/>
+                    <br/>
+                    <mat-radio-group ngmodel [(ngModel)]="groupSelectValue"
+                                     aria-label="Select an option" (ngModelChange) ="toggleChangeWhenCalledWithFromFields()">
+                        <div *ngFor="let group of formFieldGroupObjList; let i=index;" style="display: table-cell">
+                            <mat-radio-button value="{{group.name}}">{{group.name}}</mat-radio-button>&nbsp;&nbsp;&nbsp;
+                        </div>
+                    </mat-radio-group>
+
+                </div>
+            </div>
+
+            <div *ngIf="formFieldList" class="wrapper">
+                <div *ngFor="let item of toggleFormFieldRenderArr; let i = index;">
+                    <div *ngIf="item.fieldType == 'TEXT' && item.validationType !== 'DATE'" class="fieldWidth">
+                        <label class="labelWidth">{{item.fieldDisplayName}} :</label><textarea matInput placement="right" ngbTooltip="comma seperated" appRemoveSpace
+                                                                                               [ngModel]="formFieldListValueMap.get(item.fieldId)" (ngModelChange)="formFieldListValueMap.set(item.fieldId, $event.toString().trim())" class="defaultFontSizeTextArea" id="item.fieldId"></textarea>
+                    </div>
+                    <div *ngIf="item.fieldType == 'LIST_BOX'" class="fieldWidth">
+                        <label class="labelWidth" for="reportType">{{item.fieldDisplayName}} :</label>
+                        <select [ngModel]="formFieldListValueMap.get(item.fieldId)" (ngModelChange)="formFieldListValueMap.set(item.fieldId, $event)"
+                                class="browser-default custom-select defaultFontSize" required="required"
+                        >
+                            <option *ngFor="let listItem of item.formFieldValues"
+                                    class="defaultFontSize" value="{{listItem.id}}">{{listItem.name}}</option>
+                        </select>
+
+                    </div>
+                    <div *ngIf="item.fieldType == 'LIST_MULTI_SELECT'" class="fieldWidth">
+                        <label class="labelWidth" for="reportType">{{item.fieldDisplayName}} :</label>
+                        <mat-form-field>
+                            <mat-select [ngModel]="formFieldListValueMap.get(item.fieldId)" (ngModelChange)="formFieldListValueMap.set(item.fieldId, $event)"
+                                        multiple>
+                                <mat-option *ngFor="let listItem of item.formFieldValues"
+                                            value="{{listItem.id}}">{{listItem.name}}</mat-option>
+                            </mat-select>
+                        </mat-form-field>
+
+                        <br/>
+                    </div>
+                    <div *ngIf="item.validationType == 'DATE'" class="fieldWidth">
+                        <label class="labelWidth" for="reportType">{{item.fieldDisplayName}} :</label>
+                        <mat-form-field><input [ngModel]="formFieldListValueMap.get(item.fieldId)" (ngModelChange)="formFieldListValueMap.set(item.fieldId, $event)" [matDatepicker]="picker"
+                                               class="defaultFontSize"
+                                               matInput
+                                               value="{{item.formFieldValues[0][name]}}">
+                            <mat-datepicker-toggle
+                                [for]="picker" matSuffix></mat-datepicker-toggle>
+                            <mat-datepicker
+                                #picker></mat-datepicker>
+                        </mat-form-field>
+                    </div>
+
+                    <div *ngIf="item.validationType == 'TIMESTAMP_SEC'" class="finalWidth">
+                        <label class="labelWidth" class="defaultFontSize" for="reportType">{{item.fieldDisplayName}} :</label>
+                        <div class="finalWidth">
+                            <mat-form-field class="timeStamp-HMS-matFormField"><input class="timeStamp-HMS-input"
+                                                                       [(ngModel)]="formFieldListValueMap.get(item.fieldId)[0]" [matDatepicker]="picker" matInput>
+                                <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
+                                <mat-datepicker #picker></mat-datepicker>
+                            </mat-form-field>
+                            <div class="timeStamp-HMS-inner-div">
+                                <span class="timeStamp-HMS-sec-span">Sec:</span>
+                                <div class="timeStamp-HMS-sec-div">
+                                    <select name="Seconds" id="Seconds" class="browser-default custom-select timeStamp-sec-select "       
+                                            [(ngModel)]="formFieldListValueMap.get(item.fieldId)[3]">
+                                        <option *ngFor="let listItem of timeStampArray" class="defaultFontSize" value="{{listItem}}">
+                                            {{listItem}}</option>
+                                    </select>
+                                </div>
+                            </div>
+                            <div class="timeStamp-HMS-inner-div">
+                                <span class="timeStamp-HMS-Min-span">Min:</span>
+                                <div class="timeStamp-HMS-Min-div">
+                                    <select name="Minutes" id="Minutes" class="browser-default custom-select timeStamp-sec-select"
+                                            [(ngModel)]="formFieldListValueMap.get(item.fieldId)[2]">
+                                        <option *ngFor="let listItem of timeStampArray" class="defaultFontSize" value="{{listItem}}">
+                                            {{listItem}}</option>
+                                    </select>
+                                </div>
+                            </div>
+                            <div class="timeStamp-HMS-inner-div">
+                                <span class="timeStamp-HMS-Hrs-span">Hrs:</span>
+                                <div class="timeStamp-HMS-Hrs-div">
+                                    <select name="Hours" id="Hours" class="browser-default custom-select timeStamp-sec-select"
+                                            [(ngModel)]="formFieldListValueMap.get(item.fieldId)[1]">
+                                        <option *ngFor="let listItem of hoursArray" class="defaultFontSize" value="{{listItem}}">{{listItem}}
+                                        </option>
+
+                                    </select>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div *ngIf="item.validationType == 'TIMESTAMP_MIN'" class="finalWidth">
+                        <label class="labelWidth" class="defaultFontSize" for="reportType">{{item.fieldDisplayName}} :</label>
+                        <div class="finalTimeDivWidth">
+                            <mat-form-field class="timeStamp-HM-matFormField"><input class="timeStamp-HMS-input"
+                                                                       [(ngModel)]="formFieldListValueMap.get(item.fieldId)[0]" [matDatepicker]="picker" matInput>
+                                <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
+                                <mat-datepicker #picker></mat-datepicker>
+                            </mat-form-field>
+
+                            <div class="timeStamp-HM-Min-div">
+                                <span class="timeStamp-HM-Min-span">Min:</span>
+                                <div class="timeStamp-HM-Min-inner-div">
+                                    <select name="Minutes" id="Minutes" class="browser-default custom-select timeStamp-min-select "
+                                            [(ngModel)]="formFieldListValueMap.get(item.fieldId)[2]">
+                                        <option *ngFor="let listItem of timeStampArray" class="defaultFontSize" value="{{listItem}}">
+                                            {{listItem}}</option>
+                                    </select>
+                                </div>
+                            </div>
+                            <div class="timeStamp-HM-Hrs-div">
+                                <span class="timeStamp-HM-Hrs-inner-span">Hrs:</span>
+                                <div class="timeStamp-HM-Hrs-inner-div">
+                                    <select name="Hours" id="Hours" class="browser-default custom-select timeStamp-min-select "
+                                            [(ngModel)]="formFieldListValueMap.get(item.fieldId)[1]">
+                                        <option *ngFor="let listItem of hoursArray" class="defaultFontSize" value="{{listItem}}">{{listItem}}
+                                        </option>
+
+                                    </select>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div *ngIf="item.validationType == 'TIMESTAMP_HOUR'" class="finalWidth">
+                        <label class="labelWidth defaultFontSize"  for="reportType">{{item.fieldDisplayName}} :</label>
+                        <div class="finalTimeDivWidth">
+                            <mat-form-field class="finalTimeDivWidth"><input class="timeStamp-HMS-input"
+                                                                       [(ngModel)]="formFieldListValueMap.get(item.fieldId)[0]" [matDatepicker]="picker" matInput>
+                                <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
+                                <mat-datepicker #picker></mat-datepicker>
+                            </mat-form-field>
+
+                            <div class="timeStamp-H-Hrs-div">
+                                <span class="timeStamp-H-Hrs-inner-span">Hrs:</span>
+                                <div class="timeStamp-H-Hrs-inner-div">
+                                    <select name="Hours" id="Hours" class="browser-default custom-select timeStamp-H-Hrs-inner-div-select"
+                                            [(ngModel)]="formFieldListValueMap.get(item.fieldId)[1]">
+                                        <option *ngFor="let listItem of hoursArray" class="defaultFontSize" value="{{listItem}}">{{listItem}}
+                                        </option>
+                                    </select>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <br/>
+                </div>
+            </div>
+            <div *ngIf="showRunButton" style="float: left;">
+                <button (click)="runReport()" class="btn btn-alt btn-run" >Run Report</button>
+                <button (click)="resetFormFieldValues()" class="btn btn-alt btn-run" >Reset</button>
+            </div>&nbsp;
+            <button *ngIf="showBackButton" (click)="goBack()" class="btn btn-alt btn-run" >Back</button>
+        </div>
+    </div>
+</div>
+<div></div>
+
+<br><br><br>
+
+<div *ngIf="navigateToRun">
+    <!-- <app-run-dashboard-report [reportId]="reportId" [reportMode]="reportMode" [queryString]="getQueryString()" [DashboardReportObj]="DashboardReportObj"></app-run-dashboard-report> -->
+    <app-run-report [DashboardReportObj]="DashboardReportObj" [TriggerFFArr]="triggerFormFieldArr"
+                    [hitCnt]="hitCnt"
+                    [queryString]="getQueryString()"
+                    [reportId]="reportId" [reportMode]="reportMode" [runAgain]="runReportAgain" [groupSelectValue]="groupSelectValue" [chartType]="chartType" [isGoBack]="downloadPrevReport" ></app-run-report>
+</div>
+
+<div *ngIf="error == true">
+    <h1>Error Message:</h1>
+    <p>{{errorMessage}}</p>
+    <br/>
+    <h1>Stack Trace:</h1>
+    <p>{{stackTrace}}</p>
+
+</div>
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-form-fields/run-report-form-fields.component.spec.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-form-fields/run-report-form-fields.component.spec.ts
new file mode 100644
index 00000000..9678345a
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-form-fields/run-report-form-fields.component.spec.ts
@@ -0,0 +1,124 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import {FormsModule} from '@angular/forms';
+import { RunReportFormFieldsComponent } from './run-report-form-fields.component';
+import { CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';
+import {MatDatepickerModule} from '@angular/material/datepicker'; 
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { RunService } from '../run.service';
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/observable/of';
+import { HttpCacheService } from 'src/app/shared/services/cache.service';
+
+describe('RunReportFormFieldsComponent', () => {
+  let component: RunReportFormFieldsComponent;
+  let fixture: ComponentFixture<RunReportFormFieldsComponent>;
+  let formfield =[{"validationType":1},{},{}] ;
+  let runService: RunService;
+  let formFieldGroupObjList: {}[] = [];
+  let environment = [
+    {
+      baseUrl: 'just for testing'
+    }
+  ]
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+      imports: [FormsModule, MatDatepickerModule, HttpClientTestingModule, RouterTestingModule],
+      declarations: [ RunReportFormFieldsComponent ],
+      providers: [RunService,HttpCacheService]
+    })
+    .compileComponents();
+    runService = TestBed.get(RunService);
+     spyOn(runService, 'getDefinitionPageDetails').and.returnValue(Observable.of(environment));
+     spyOn(runService, 'refreshFormFields').and.returnValue(Observable.of(environment));
+     spyOn(runService, 'getFormFieldGroupsData').and.returnValue(Observable.of(environment));
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RunReportFormFieldsComponent);
+    component = fixture.componentInstance;
+    component.formFieldList = formfield;
+    component.formFieldGroupObjList = formFieldGroupObjList;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should test convertDate method', () => {
+      component.convertDate("test");
+  });
+
+  it('should test getQueryString methods', () => {
+    component.directCallQueryParams = 'abc';    
+    component.getQueryString();
+    expect(component.getQueryString()).toEqual(component.directCallQueryParams);
+
+    component.directCallQueryParams = "";    
+    component.getQueryString();
+    expect(component.getQueryString()).toEqual(component.queryString);
+  });
+
+  it('should test showError method', () => {
+      component.showError('test');
+      expect(component.errorMessage).toEqual('test'['errormessage']);
+      expect(component.stackTrace).toEqual('test'['stacktrace']);
+      expect(component.error).toEqual(true);
+      expect(component.showSpinner).toEqual(false);
+  });
+
+  it('should test showLabelFn method', () => {
+    component.showLabelFn();
+    expect(component.showLabel).toEqual(component.showLabel);
+  });
+
+  it('should test runReport method', () => {
+      component.iSDashboardReport = "Dashboard";
+      component.formFieldList.length = 1;
+      component.runReport();
+
+      expect(component.hitCnt).toBe(component.hitCnt++);
+      expect(component.reportMode).toBe('')
+      let spy = spyOn(component, 'generateQueryString');
+      component.generateQueryString();
+      expect(component.generateQueryString).toHaveBeenCalled();
+      expect(component.showSpinner).toBe(false);
+
+      component.iSDashboardReport = "Dashboard";
+      component.formFieldList.length = 0;
+      component.runReport();
+
+       expect(component.reportMode).toBe('');
+
+       component.iSDashboardReport = "Dashboard";
+       component.runReport();
+       expect(component.showSpinner).toBe(false);
+       expect(component.navigateToRun).toBe(true);
+
+
+   });
+
+   it('should test ngDoCheck method', () =>{
+        component.formFieldList != undefined;
+        component.oldGroupSelectValue = "test";
+        component.groupSelectValue = "testing";
+        spyOn(component, 'ngDoCheck').and.callThrough();
+        component.ngDoCheck();
+        expect(component.ngDoCheck).toHaveBeenCalled();
+        expect(component.oldGroupSelectValue).toBe(component.groupSelectValue);
+   });
+
+   it('should test generateQueryString method',() => {
+      component.generateQueryString();
+   })     
+
+   it('should test ngOnInit method', () => {
+    spyOn(component, 'ngOnInit').and.callThrough();
+        component.ngOnInit();
+        expect(component.ngOnInit).toHaveBeenCalled();
+  });
+
+});
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-form-fields/run-report-form-fields.component.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-form-fields/run-report-form-fields.component.ts
new file mode 100644
index 00000000..ced812d2
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-form-fields/run-report-form-fields.component.ts
@@ -0,0 +1,1015 @@
+import {ChangeDetectorRef, Component, HostListener, OnInit, Input, SimpleChange, SystemJsNgModuleLoader, OnDestroy} from '@angular/core';
+import {RunService} from '../run.service';
+import {ActivatedRoute, Router} from '@angular/router';
+import * as cloneDeep from 'lodash/cloneDeep';
+import {environment} from 'src/environments/environment';
+import {HttpCacheService} from '../../../shared/services/cache.service';
+
+@Component({
+    selector: 'app-run-report-form-fields',
+    templateUrl: './run-report-form-fields.component.html',
+    styleUrls: ['./run-report-form-fields.component.css']
+})
+export class RunReportFormFieldsComponent implements OnInit, OnDestroy {
+    @Input('formFieldList') formFieldList: {}[];
+    @Input('reportId') reportId: string;
+    staticFormFieldList: {}[] = [];
+    formFieldListValueArr: any[];
+    saveFormFieldGroups: any[];
+    finalQueryParamsObj: {};
+    navigateToRun: boolean;
+    reportMode: string;
+    queryString: string;
+    reportName: string;
+    reportSubTitle: string;
+    showSpinner: boolean;
+    showLabel: boolean;
+    runDashboardReport: boolean;
+    DashboardReportObj: {}[] = [];
+    triggerFormFieldArr = [];
+    initialObject = {};
+    formFieldGroupObjList: {}[] = [];
+    toggleFormFieldRenderArr: {}[] = [];
+    groupSelectValue = '';
+    oldGroupSelectValue = '';
+    unCommonCnt = 0;
+    commonCount = 0;
+    totalCommonCount = 0;
+    totalCount = 0;
+    errorMessage = '';
+    stackTrace = '';
+    error = false;
+    iSDashboardReport = '';
+    hitCnt = 0;
+    directCallQueryParams: any = '';
+    calledWithFormFields = false;
+    showformFiledSpinner = false;
+    actualformFieldValues: any[];
+    allowEdit: boolean;
+    runReportAgain: boolean;
+    tempFieldValues = [];
+    firstRun = false;
+    saveFormFieldListValueArr: any[];
+    saveGroupSelectValue = '';
+    avoidDoCheck = false;
+    toolTipPosition = 'right';
+    isResetAllowed: boolean;
+    save: {}[];
+    unCommonGropusList: any[];
+    commonFormFields: any[];
+    formFieldListValueMap: any;
+    saveFormFieldListValueMap: any;
+    chartType = '';
+    showRunButton = false;
+    showBackButton = false;
+    downloadPrevReport = '';
+    timeStampArray: any[];
+    hoursArray : any[];
+    constructor(private _runService: RunService,
+                private _route: ActivatedRoute,
+                private _router: Router,
+                private changeDetectorRefs: ChangeDetectorRef,
+                private httpCacheService: HttpCacheService) {
+        this.formFieldListValueArr = [];
+        this.saveFormFieldListValueArr = [];
+        this.saveFormFieldGroups = [];
+        this.finalQueryParamsObj = {};
+        this.navigateToRun = false;
+        this.queryString = '';
+        this.showSpinner = false;
+        this.showLabel = false;
+        this.runDashboardReport = false;
+        this.showformFiledSpinner = false;
+        this.runReportAgain = false;
+        this.tempFieldValues = [];
+        this.isResetAllowed = false;
+        this.unCommonGropusList = [];
+        this.commonFormFields = [];
+        this.formFieldListValueMap = new Map<any, any>();
+        this.saveFormFieldListValueMap = new Map<any, any>();
+        this.chartType = '';
+        this.showRunButton = false;
+        this.showBackButton = false;
+        this.downloadPrevReport = '';
+        this.timeStampArray = [];
+        this.hoursArray = [];
+
+    }
+
+    @HostListener('click') onClick() {
+        this.changeDetectorRefs.detectChanges();
+    }
+
+    ngOnDestroy(): void {
+        this.createNewObject();
+        this.showSpinner = false;
+    }
+
+    createNewObject() {
+        this.staticFormFieldList = [];
+        this.formFieldListValueArr = [];
+        this.saveFormFieldGroups = [];
+        this.saveFormFieldListValueArr = [];
+        this.finalQueryParamsObj = {};
+        this.navigateToRun = false;
+        this.reportMode = '';
+        this.queryString = '';
+        this.reportName = '';
+        this.reportSubTitle = '';
+        this.showSpinner = true;
+        this.showLabel = false;
+        this.runDashboardReport = false;
+        this.DashboardReportObj = [];
+        this.triggerFormFieldArr = [];
+        this.initialObject = {};
+        this.formFieldGroupObjList = [];
+        this.toggleFormFieldRenderArr = [];
+        this.groupSelectValue = '';
+        this.oldGroupSelectValue = '';
+        this.unCommonCnt = 0;
+        this.totalCommonCount = 0;
+        this.commonCount = 0;
+        this.totalCount = 0;
+        this.errorMessage = '';
+        this.stackTrace = '';
+        this.error = false;
+        this.iSDashboardReport = '';
+        this.hitCnt = 0;
+        this.directCallQueryParams = '';
+        this.calledWithFormFields = false;
+        this.showformFiledSpinner = false;
+        this.allowEdit = false;
+        this.runReportAgain = false;
+        this.isResetAllowed = false;
+        this.unCommonGropusList = [];
+        this.commonFormFields = [];
+        this.formFieldListValueMap = new Map<any, any>();
+        this.saveFormFieldListValueMap = new Map<any, any>();
+        this.chartType = '';
+        this.showRunButton = false;
+        this.downloadPrevReport = '';
+    }
+
+    ngOnInit() {
+
+        this.showSpinner = true;
+        this.navigateToRun = false;
+        this.getTime();
+        this.getHours();
+        this._route.params.subscribe(params => {
+            this.createNewObject();
+            this.reportId = params['reportId'];
+            const checkOfCache = this.httpCacheService.getPreviousId(this.reportId) || null;
+            if (!checkOfCache) {
+                this.httpCacheService.clearCache();
+            }
+            const backButton = params['showBackButton'];
+            const downloadPrevReport = params['downloadPrevReport'];
+            if (downloadPrevReport && downloadPrevReport === 'true') {
+                this.downloadPrevReport = 'true';
+            }
+            if (backButton && backButton === 'true') {
+                this.showBackButton = true;
+            } else if (backButton && backButton === 'false') {
+                this.showBackButton = false;
+            } else {
+                this.showBackButton = false;
+            }
+            this.groupSelectValue = params['groupSelectValue'];
+            if (this.groupSelectValue === undefined) {
+                this.groupSelectValue = '';
+            }
+            if (params['queryParameters']) {
+                this.directCallQueryParams = params['queryParameters'];
+                this.calledWithFormFields = true;
+                this.populateQueryParams(params['queryParameters']);
+            }
+            this.loadPage();
+        });
+
+    }
+
+    populateQueryParams(queryParams: any) {
+        this.actualformFieldValues = this.directCallQueryParams.substring(1, this.directCallQueryParams.length).split('&');
+        for (const ff of this.actualformFieldValues) {
+            const formfiledArray = ff.split('=');
+            const formFieldId = formfiledArray[0];
+            const formFieldObj = formfiledArray[1];
+            this.finalQueryParamsObj[formFieldId] = formFieldObj;
+        }
+        this.queryString = this.directCallQueryParams;
+    }
+
+    loadPage() {
+        this._runService.getDefinitionPageDetails(+this.reportId)
+            .subscribe((responseDefPage) => {
+                this.reportName = responseDefPage['reportName'];
+                this.reportSubTitle = responseDefPage['reportSubTitle'];
+                this.chartType = responseDefPage['chartType'];
+                if (responseDefPage['reportType'] !== 'Dashboard') {
+                    if (this.calledWithFormFields == false) {
+                        this._runService.getReportData(this.reportId)
+                            .subscribe((response) => {
+                                if (response['errormessage']) {
+                                    this.allowEdit = response['allowEdit'];
+                                    this.showError(response);
+                                } else {
+                                    this.allowEdit = response['allowEdit'];
+                                    this.reportName = response['reportName'];
+                                    if (response['formFieldList'].length > 0) {
+                                        this.fetchAndPopulateFormFields(response, this.reportId);
+                                        this.showformFiledSpinner = true;
+                                    } else {
+                                        this.formFieldList = response['formFieldList'];
+                                        this.reportMode = 'Regular';
+                                        this.httpCacheService.setRouteCache(this.reportId, this.getQueryString());
+                                        this.httpCacheService.setRouteGroupCache(this.reportId, this.groupSelectValue);
+                                        this.navigateToRun = true;
+                                        this.showformFiledSpinner = false;
+
+                                    }
+                                    this.showSpinner = false;
+                                }
+                            });
+                    } else if (this.calledWithFormFields == true) {
+                        this._runService.getReportData(this.reportId)
+                            .subscribe((response) => {
+                                if (response['errormessage']) {
+                                    this.showError(response);
+                                } else {
+                                    this.error = false;
+                                    this.reportName = response['reportName'];
+                                    this.allowEdit = response['allowEdit'];
+                                    if (response['formFieldList'].length > 0) {
+                                        this.setDefaultFieldGroupValueForNonSelected(response['formFieldList']);
+                                        this.generateQueryString();
+                                        this.fetchAndPopulateFormFields(response, this.reportId);
+                                        this.formFieldListValueMap = new Map<any, any>();
+                                        for (const ff of response['formFieldList']) {
+                                            if (this.finalQueryParamsObj[ff.fieldId]) {
+                                                if (ff.validationType == 'DATE') {
+                                                    const dateVal = this.finalQueryParamsObj[ff.fieldId];
+                                                    this.formFieldListValueMap.set(ff.fieldId, new Date(dateVal.toString().replace(/%2F/g, '/')));
+                                                } else if (ff.fieldType == 'LIST_MULTI_SELECT') {
+                                                    const multiSelectArray = [];
+                                                    let multiVal = this.finalQueryParamsObj[ff.fieldId];
+                                                    multiVal = multiVal.toString().replace(/%2F/g, '/');
+                                                    multiVal = multiVal.toString().replace(/%20/g, ' ');
+                                                    multiVal = multiVal.toString().replace(/%28/g, '(');
+                                                    multiVal = multiVal.toString().replace(/%29/g, ')');
+                                                    multiVal = multiVal.toString().replace('+', ' ');
+                                                    if (multiVal.split('|').length > 1) {
+                                                        let tempArray = multiVal.split('|');
+                                                        for (let arr = 0; arr < tempArray.length; arr++) {
+                                                            multiSelectArray.push(tempArray[arr]);
+                                                        }
+                                                    } else {
+                                                        multiSelectArray.push(multiVal);
+                                                    }
+                                                    this.formFieldListValueMap.set(ff.fieldId, multiSelectArray);
+                                                } else {
+                                                    let multiVal = this.finalQueryParamsObj[ff.fieldId];
+                                                    multiVal = multiVal.toString().replace(/%2F/g, '/');
+                                                    multiVal = multiVal.toString().replace(/%20/g, ' ');
+                                                    multiVal = multiVal.toString().replace(/%28/g, '(');
+                                                    multiVal = multiVal.toString().replace(/%29/g, ')');
+                                                    multiVal = multiVal.toString().split('+').join(' ');
+                                                    this.formFieldListValueMap.set(ff.fieldId, multiVal);
+                                                }
+                                            } else {
+                                                if (ff.fieldType == 'LIST_MULTI_SELECT') {
+                                                    const multiSelectArray = [];
+                                                    this.formFieldListValueMap.set(ff.fieldId, multiSelectArray);
+                                                } else {
+                                                    this.formFieldListValueMap.set(ff.fieldId, '');
+                                                }
+                                            }
+                                        }
+                                        this.error = false;
+                                        this.httpCacheService.setRouteCache(this.reportId, this.getQueryString());
+                                        this.httpCacheService.setRouteGroupCache(this.reportId, this.groupSelectValue);
+                                        this.navigateToRun = true;
+                                        this.showformFiledSpinner = true;
+                                        this.directCallQueryParams = '';
+                                    } else {
+                                        this.reportMode = 'Regular';
+                                        this.navigateToRun = true;
+                                        this.showformFiledSpinner = false;
+
+                                    }
+                                    this.showSpinner = false;
+
+                                }
+                            });
+                    } else {
+                        this.reportMode = 'FormField';
+                        this.navigateToRun = true;
+                        this.showSpinner = false;
+                        this.showformFiledSpinner = true;
+                    }
+                } else {
+                    if (this.calledWithFormFields == false) {
+                        this.iSDashboardReport = 'Dashboard';
+                        this.reportName = responseDefPage['reportName'];
+                        this.DashboardReportObj = JSON.parse(responseDefPage['dashboardLayoutJSON']);
+                        let i = 0;
+                        let subReportId = '';
+                        const tempDashboardArray = [];
+                        for (let dash = 0; dash < this.DashboardReportObj.length; dash++) {
+                            if (this.DashboardReportObj[dash]['hasContent']['hideDisplay'] !== true) {
+                                tempDashboardArray.push(this.DashboardReportObj[dash]);
+                            }
+                        }
+                        this.DashboardReportObj = [];
+                        this.DashboardReportObj = tempDashboardArray;
+                        while (this.DashboardReportObj[i]) {
+                            subReportId = this.DashboardReportObj[i]['hasContent']['id'].split('#')[1];
+                            i++;
+                            break;
+                        }
+                        this._runService.getReportData(subReportId)
+                            .subscribe((response) => {
+                                if (response['errormessage']) {
+                                    this.showError(response);
+                                    this.allowEdit = response['allowEdit'];
+                                } else {
+                                    this.allowEdit = response['allowEdit'];
+                                    if (response['formFieldList'].length > 0) {
+                                        this.fetchAndPopulateFormFields(response, subReportId);
+                                    } else {
+                                        this.navigateToRun = true;
+                                    }
+                                    this.runDashboardReport = true;
+                                    this.showSpinner = false;
+                                    this.showformFiledSpinner = true;
+                                }
+                            });
+                        this.showSpinner = false;
+                        this.showformFiledSpinner = true;
+                    } else if (this.calledWithFormFields == true) {
+                        this.httpCacheService.setRouteCache(this.reportId, this.getQueryString());
+                        this.httpCacheService.setRouteGroupCache(this.reportId, this.groupSelectValue);
+                        this.iSDashboardReport = 'Dashboard';
+                        this.reportName = responseDefPage['reportName'];
+                        this.DashboardReportObj = JSON.parse(responseDefPage['dashboardLayoutJSON']);
+                        const tempDashboardArray = [];
+                        for (let dash = 0; dash < this.DashboardReportObj.length; dash++) {
+                            if (this.DashboardReportObj[dash]['hasContent']['hideDisplay'] !== true) {
+                                tempDashboardArray.push(this.DashboardReportObj[dash]);
+                            }
+                        }
+                        this.DashboardReportObj = [];
+                        this.DashboardReportObj = tempDashboardArray;
+                            let subReportId1 = '';
+                            let i = 0;
+                            while (this.DashboardReportObj[i]) {
+                                subReportId1 = this.DashboardReportObj[i]['hasContent']['id'].split('#')[1];
+                                i++;
+                                break;
+                            }
+                            this._runService.getReportData(subReportId1)
+                                .subscribe((response) => {
+                                    if (response['errormessage']) {
+                                        this.showError(response);
+                                        this.allowEdit = response['allowEdit'];
+                                    } else {
+                                        this.allowEdit = response['allowEdit'];
+                                        if (response['formFieldList'].length > 0) {
+                                            this.fetchAndPopulateFormFields(response, subReportId1);
+                                            this.formFieldListValueMap = new Map<any, any>();
+                                            for (const ff of response['formFieldList']) {
+                                                if (this.finalQueryParamsObj[ff.fieldId]) {
+                                                    if (ff.validationType == 'DATE') {
+                                                        const dateVal = this.finalQueryParamsObj[ff.fieldId];
+                                                        this.formFieldListValueMap.set(ff.fieldId, new Date(dateVal.toString().replace(/%2F/g, '/')));
+                                                    } else if (ff.fieldType == 'LIST_MULTI_SELECT') {
+                                                        const multiSelectArray = [];
+                                                        let multiVal = this.finalQueryParamsObj[ff.fieldId];
+                                                        multiVal = multiVal.toString().replace(/%2F/g, '/');
+                                                        multiVal = multiVal.toString().replace(/%20/g, ' ');
+                                                        multiVal = multiVal.toString().replace(/%28/g, '(');
+                                                        multiVal = multiVal.toString().replace(/%29/g, ')');
+                                                        multiVal = multiVal.toString().replace('+', ' ');
+                                                        if (multiVal.split('|').length > 1) {
+                                                            let tempArray = multiVal.split('|');
+                                                            for (let arr = 0; arr < tempArray.length; arr++) {
+                                                                multiSelectArray.push(tempArray[arr]);
+                                                            }
+                                                        } else {
+                                                            multiSelectArray.push(multiVal);
+                                                        }
+                                                        this.formFieldListValueMap.set(ff.fieldId, multiSelectArray);
+                                                    } else {
+                                                        let multiVal = this.finalQueryParamsObj[ff.fieldId];
+                                                        multiVal = multiVal.toString().replace(/%2F/g, '/');
+                                                        multiVal = multiVal.toString().replace(/%20/g, ' ');
+                                                        multiVal = multiVal.toString().replace(/%28/g, '(');
+                                                        multiVal = multiVal.toString().replace(/%29/g, ')');
+                                                        multiVal = multiVal.toString().split('+').join(' ');
+                                                        if (multiVal == 'NULL') {
+                                                            this.formFieldListValueMap.set(ff.fieldId, '');
+                                                        } else {
+                                                            this.formFieldListValueMap.set(ff.fieldId, multiVal);
+                                                        }
+                                                    }
+                                                } else {
+                                                    if (ff.fieldType == 'LIST_MULTI_SELECT') {
+                                                        const multiSelectArray = [];
+                                                        this.formFieldListValueMap.set(ff.fieldId, multiSelectArray);
+                                                    } else {
+                                                        this.formFieldListValueMap.set(ff.fieldId, '');
+                                                    }
+                                                }
+                                            }
+                                        } else {
+                                            this.navigateToRun = true;
+                                        }
+                                        let subReportId = '';
+                                        for (const dashboard of this.DashboardReportObj) {
+                                            let temp = '';
+                                            temp = dashboard['hasContent']['id'].split('#')[1];
+                                            subReportId = temp;
+                                            this.directCallQueryParams = '';
+                                            this.runDashboardReport = true;
+                                            this.navigateToRun = true;
+                                            this.showSpinner = false;
+                                        }
+                                    }
+                                });
+
+                        }
+
+                }
+            });
+    }
+
+    toggleChangeWhenCalledWithFromFields() {
+        this.calledWithFormFields = false;
+    }
+
+    async ngDoCheck() {
+
+        if (this.formFieldList !== undefined) {
+
+            if (this.groupSelectValue !== this.oldGroupSelectValue) {
+                //  this.formFieldListValueArr.splice(this.commonCount-1, this.formFieldListValueArr.length)
+                this.removePrevioustoggleGroupData();
+                this.oldGroupSelectValue = this.groupSelectValue;
+                this.formFieldGroupObjList = [];
+                this.saveFormFieldGroups = [];
+                this.formFieldGroupObjList = cloneDeep(this.save);
+                this.saveFormFieldGroups = cloneDeep(this.save);
+                for (const formFieldGroupObjItem of this.formFieldGroupObjList) {
+                    if (formFieldGroupObjItem['name'] == this.groupSelectValue) {
+                        this.toggleFormFieldRenderArr = formFieldGroupObjItem['formFieldList'];
+                    }
+
+                }
+                if (this.toggleFormFieldRenderArr.length > 0) {
+                    for (let i = 0; i < this.toggleFormFieldRenderArr.length; i++) {
+                        const formFieldObj = this.toggleFormFieldRenderArr[i];
+                        if (formFieldObj['triggerOtherFormFields'] === true) {
+                            const formFieldId = formFieldObj['fieldId'];
+                            this.triggerFormFieldArr.push(formFieldId);
+                            this.initialObject[formFieldId] = '1';
+                            this.finalQueryParamsObj[formFieldId] = '1';
+                        }
+                    }
+                }
+
+                if (this.calledWithFormFields != true) {
+                    for (const formFieldGroupObjItem of this.saveFormFieldGroups) {
+                        if (formFieldGroupObjItem['name'] == this.groupSelectValue) {
+                            this.toggleFormFieldRenderArr = formFieldGroupObjItem['formFieldList'];
+                            for (let ffGrpValue = 0; ffGrpValue < formFieldGroupObjItem['formFieldList'].length; ffGrpValue++) {
+                                if (formFieldGroupObjItem['formFieldList'][ffGrpValue]['formFieldValues'].length > 0) {
+                                    for (let ffValue = 0; ffValue < formFieldGroupObjItem['formFieldList'][ffGrpValue]['formFieldValues'].length; ffValue++) {
+                                        if (formFieldGroupObjItem['formFieldList'][ffGrpValue]['fieldType'] == 'LIST_BOX' && formFieldGroupObjItem['formFieldList'][ffGrpValue]['formFieldValues'].length > 0) {
+                                            let isAdded = false;
+                                            for (let ffValue = 0; ffValue < formFieldGroupObjItem['formFieldList'][ffGrpValue]['formFieldValues'].length; ffValue++) {
+                                                if (formFieldGroupObjItem['formFieldList'][ffGrpValue]['formFieldValues'][ffValue]['defaultValue'] == true) {
+                                                    this.formFieldListValueMap.set(formFieldGroupObjItem['formFieldList'][ffGrpValue]['fieldId'], formFieldGroupObjItem['formFieldList'][ffGrpValue]['formFieldValues'][ffValue]['id']);
+                                                    isAdded = true;
+                                                }
+                                            }
+                                            if (!isAdded) {
+                                                this.formFieldListValueMap.set(formFieldGroupObjItem['formFieldList'][ffGrpValue]['fieldId'], '');
+                                            }
+                                        } else if ((formFieldGroupObjItem['formFieldList'][ffGrpValue]['fieldType'] == 'LIST_MULTI_SELECT' || formFieldGroupObjItem['formFieldList'][ffGrpValue]['fieldType'] == 'TEXT') && formFieldGroupObjItem['formFieldList'][ffGrpValue]['formFieldValues'].length > 0) {
+                                            let isAdded = false;
+                                            for (let ffValue = 0; ffValue < formFieldGroupObjItem['formFieldList'][ffGrpValue]['formFieldValues'].length; ffValue++) {
+
+                                                if (formFieldGroupObjItem['formFieldList'][ffGrpValue]['formFieldValues'][ffValue]['defaultValue'] == true) {
+                                                    const multiSelectArray = [];
+                                                    multiSelectArray.push(formFieldGroupObjItem['formFieldList'][ffGrpValue]['formFieldValues'][ffValue]['id']);
+                                                    this.formFieldListValueMap.set(formFieldGroupObjItem['formFieldList'][ffGrpValue]['fieldId'], multiSelectArray);
+                                                    isAdded = true;
+                                                }
+                                            }
+                                            if (!isAdded) {
+                                                this.formFieldListValueMap.set(formFieldGroupObjItem['formFieldList'][ffGrpValue]['fieldId'], '');
+                                            }
+                                        } else if (formFieldGroupObjItem['formFieldList'][ffGrpValue]['fieldType'] == 'Select Field Type' && formFieldGroupObjItem['formFieldList'][ffGrpValue]['validationType'] == 'NONE') {
+                                            let isAdded = false;
+                                            for (let ffValue = 0; ffValue < formFieldGroupObjItem['formFieldList'][ffGrpValue]['formFieldValues'].length; ffValue++) {
+
+                                                if (formFieldGroupObjItem['formFieldList'][ffGrpValue]['formFieldValues'][ffValue]['defaultValue'] == true) {
+                                                    this.formFieldListValueMap.set(formFieldGroupObjItem['formFieldList'][ffGrpValue]['fieldId'], formFieldGroupObjItem['formFieldList'][ffGrpValue]['formFieldValues'][ffValue]['id']);
+                                                    isAdded = true;
+                                                }
+                                            }
+                                            if (!isAdded) {
+                                                this.formFieldListValueArr[this.totalCommonCount + ffGrpValue] = '';
+                                            }
+                                        } else {
+                                            this.formFieldListValueMap.set(formFieldGroupObjItem['formFieldList'][ffGrpValue]['fieldId'], '');
+                                        }
+                                    }
+                                } else {
+                                    this.formFieldListValueMap.set(formFieldGroupObjItem['formFieldList'][ffGrpValue]['fieldId'], '');
+                                }
+                            }
+                        }
+                    }
+                }
+                if (this.formFieldGroupObjList.length > 0) {
+                    for (let ffl = 0; ffl < this.formFieldList.length; ffl++) {
+                        for (let ffgl = 0; ffgl < this.formFieldGroupObjList.length; ffgl++) {
+                            const inList = this.formFieldGroupObjList[ffgl]['formFieldList'];
+
+                            for (let inl = 0; inl < inList.length; inl++) {
+                                let cntr = 0;
+                                if (inList[inl]['fieldId'] == this.formFieldList[ffl]['fieldId']) {
+                                    cntr++;
+                                }
+                                if (cntr == 0) {
+                                    this.finalQueryParamsObj[inList[inl]['fieldId']] = '-1';
+                                }
+                            }
+
+                        }
+                    }
+                }
+            }
+            for (const tffr of this.toggleFormFieldRenderArr) {
+                if (this.formFieldListValueMap.get(tffr['fieldId']) || this.formFieldListValueMap.get(tffr['fieldId']) == '') {
+                    if (tffr['validationType'] == 'DATE') {
+                        this.finalQueryParamsObj[tffr['fieldId']] = this.convertDate(this.formFieldListValueMap.get(tffr['fieldId']));
+                    } else if (this.formFieldListValueMap.get(tffr['fieldId']) == '') {
+
+                        if (tffr['fieldType'] == 'LIST_MULTI_SELECT') {
+                            let multiSelectValue = '';
+                            if (multiSelectValue != '') {
+                                multiSelectValue = multiSelectValue.substring(0, multiSelectValue.length - 1);
+                            }
+                            this.finalQueryParamsObj[tffr['fieldId']] = multiSelectValue;
+
+                        } else {
+                            this.finalQueryParamsObj[tffr['fieldId']] = '';
+                        }
+                    } else {
+                        this.finalQueryParamsObj[tffr['fieldId']] = this.formFieldListValueMap.get(tffr['fieldId']);
+                        if (this.initialObject[tffr['fieldId']] !== this.finalQueryParamsObj[tffr['fieldId']]) {
+                            this.initialObject[tffr['fieldId']] = this.finalQueryParamsObj[tffr['fieldId']];
+                            this.generateQueryString();
+                            await this.delay(1000);
+                            console.log('Afterp:  ' + new Date().toString());
+                            if ( tffr['triggerOtherFormFields'] == true) {
+                                    this._runService.refreshFormFields(this.reportId, this.queryString)
+                                        .subscribe((responseRefreshFF) => {
+                                            for (let rrff = 0; rrff < responseRefreshFF['formFieldList'].length; rrff++) {
+                                                for (let innerTFRR = 0; innerTFRR < this.toggleFormFieldRenderArr.length; innerTFRR++) {
+                                                    if (responseRefreshFF['formFieldList'][rrff]['fieldId'] == this.toggleFormFieldRenderArr[innerTFRR]['fieldId']) {
+                                                        this.toggleFormFieldRenderArr[innerTFRR] = responseRefreshFF['formFieldList'][rrff];
+                                                    }
+                                                }
+                                            }
+                                        });
+                              
+                            }
+                            this.initialObject[tffr['fieldId']] = this.finalQueryParamsObj[tffr['fieldId']];
+                        }
+                    }
+                }
+            }
+
+            if (this.reportMode !== 'Regular' && this.reportMode !== 'Dashboard') {
+                for (const ffvalue of this.formFieldList) {
+                    if (this.formFieldListValueMap.get(ffvalue['fieldId']) === '' || this.formFieldListValueMap.get(ffvalue['fieldId']) ) {
+                        if (ffvalue['validationType'] == 'DATE' && this.formFieldListValueMap.get(ffvalue['fieldId']) !== '' ) {
+                            this.finalQueryParamsObj[ffvalue['fieldId']] = this.convertDate(this.formFieldListValueMap.get(ffvalue['fieldId']));
+                        }else if (ffvalue['validationType'] == 'TIMESTAMP_SEC' && this.formFieldListValueMap.get(ffvalue['fieldId']) !== ''){
+                            if(this.formFieldListValueMap.get(ffvalue['fieldId'])[0] != ''){
+                            this.finalQueryParamsObj[ffvalue['fieldId']] = this.convertDate(this.formFieldListValueMap.get(ffvalue['fieldId'])[0]);
+                        } else {
+                                this.finalQueryParamsObj[ffvalue['fieldId']] = this.formFieldListValueMap.get(ffvalue['fieldId'])[0];
+                            }
+                            this.finalQueryParamsObj[ffvalue['fieldId']+'_Hr'] = this.formFieldListValueMap.get(ffvalue['fieldId'])[1];
+                            this.finalQueryParamsObj[ffvalue['fieldId']+'_Min'] = this.formFieldListValueMap.get(ffvalue['fieldId'])[2];
+                            this.finalQueryParamsObj[ffvalue['fieldId']+'_Sec'] = this.formFieldListValueMap.get(ffvalue['fieldId'])[3];
+                        }else if (ffvalue['validationType'] == 'TIMESTAMP_MIN' && this.formFieldListValueMap.get(ffvalue['fieldId']) !== ''){
+                            if(this.formFieldListValueMap.get(ffvalue['fieldId'])[0] != ''){
+                                this.finalQueryParamsObj[ffvalue['fieldId']] = this.convertDate(this.formFieldListValueMap.get(ffvalue['fieldId'])[0]);
+                                }else{
+                                    this.finalQueryParamsObj[ffvalue['fieldId']] = this.formFieldListValueMap.get(ffvalue['fieldId'])[0];
+                                }
+                            this.finalQueryParamsObj[ffvalue['fieldId']+'_Hr'] = this.formFieldListValueMap.get(ffvalue['fieldId'])[1];
+                            this.finalQueryParamsObj[ffvalue['fieldId']+'_Min'] = this.formFieldListValueMap.get(ffvalue['fieldId'])[2];
+                        }else if (ffvalue['validationType'] == 'TIMESTAMP_HOUR' && this.formFieldListValueMap.get(ffvalue['fieldId']) !== ''){
+                            if(this.formFieldListValueMap.get(ffvalue['fieldId'])[0] != ''){
+                                this.finalQueryParamsObj[ffvalue['fieldId']] = this.convertDate(this.formFieldListValueMap.get(ffvalue['fieldId'])[0]);
+                                }else{
+                                    this.finalQueryParamsObj[ffvalue['fieldId']] = this.formFieldListValueMap.get(ffvalue['fieldId'])[0];
+                                }                            
+                                this.finalQueryParamsObj[ffvalue['fieldId']+'_Hr'] = this.formFieldListValueMap.get(ffvalue['fieldId'])[1];
+                        }                    
+                        else {
+                            this.finalQueryParamsObj[ffvalue['fieldId']] = this.formFieldListValueMap.get(ffvalue['fieldId']);
+                        }
+                            for (const trigElement of this.triggerFormFieldArr) {
+                                if (this.initialObject[trigElement] !== this.finalQueryParamsObj[trigElement]) {
+                                    this.initialObject[trigElement] = this.finalQueryParamsObj[trigElement];
+                                    this.generateQueryString();
+                                    await this.delay(1000);
+                                    console.log('Afterp:  ' + new Date().toString());
+                                          if (ffvalue['triggerOtherFormFields'] == true) {
+                                              this._runService.refreshFormFields(this.reportId, this.queryString)
+                                                  .subscribe((responseRefreshFF) => {
+                                                      for (let rrff = 0; rrff < responseRefreshFF['formFieldList'].length; rrff++) {
+                                                          for (let innerFFL = 0; innerFFL < this.formFieldList.length; innerFFL++) {
+                                                              if (responseRefreshFF['formFieldList'][rrff]['fieldId'] == this.formFieldList[innerFFL]['fieldId']) {
+                                                                  this.formFieldList[innerFFL] = responseRefreshFF['formFieldList'][rrff];
+                                                              }
+                                                          }
+                                                      }
+                                                  });
+                                          }      
+                               
+                            }
+
+                        }
+                    }
+                }
+
+            }
+        }
+        if (this.firstRun) {
+            this.saveGroupSelectValue = this.groupSelectValue;
+            this.saveFormFieldListValueMap = cloneDeep(this.formFieldListValueMap);
+        }
+        this.firstRun = false;
+    }
+
+    convertDate(str) {
+        const date = new Date(str),
+            mnth = ('0' + (date.getMonth() + 1)).slice(-2),
+            day = ('0' + date.getDate()).slice(-2);
+        return [mnth, day, date.getFullYear()].join('/');
+    }
+
+    getQueryString() {
+        if (this.directCallQueryParams !== '') {
+            return this.directCallQueryParams;
+        } else {
+            return this.queryString;
+        }
+    }
+
+    fetchAndPopulateFormFields(respObj: any, ffReportId: string) {
+        this._runService.getFormFieldGroupsData(ffReportId)
+            .subscribe((responseFormFieldGroups) => {
+                this.firstRun = true;
+                this.showformFiledSpinner = false;
+                this.formFieldGroupObjList = JSON.parse(responseFormFieldGroups['formFieldGroupsJSON']);
+                this.saveFormFieldGroups = JSON.parse(responseFormFieldGroups['formFieldGroupsJSON']);
+                this.formFieldList = respObj['formFieldList'];
+                if (this.formFieldList.length === 1 && this.formFieldList[0]['visible'] === false) {
+                    this.showRunButton = false;
+                } else if (this.formFieldList.length > 0) {
+                    this.showRunButton = true;
+                }
+                this.staticFormFieldList = respObj['formFieldList'];
+                this.reportMode = 'FormField';
+                this.totalCount = this.formFieldList.length;
+                if (this.formFieldGroupObjList !== null) {
+                    for (let ffgl = 0; ffgl < this.formFieldGroupObjList.length; ffgl++) {
+                        for (let itemFFGL = 0; itemFFGL < this.formFieldGroupObjList[ffgl]['formFieldList'].length; itemFFGL++) {
+                            const formFieldGroupItem = this.formFieldGroupObjList[ffgl]['formFieldList'][itemFFGL];
+                            for (let fflg = 0; fflg < this.formFieldList.length; fflg++) {
+                                if (formFieldGroupItem['id'] == this.formFieldList[fflg]['fieldId']) {
+                                    this.formFieldGroupObjList[ffgl]['formFieldList'][itemFFGL] = this.formFieldList[fflg];
+                                    this.saveFormFieldGroups[ffgl]['formFieldList'][itemFFGL] = this.formFieldList[fflg];
+
+                                    if (this.formFieldList[fflg]['triggerOtherFormFields'] === true) {
+                                        const formFieldId = this.formFieldList[fflg]['fieldId'];
+                                        this.triggerFormFieldArr.push(formFieldId);
+                                        this.initialObject[formFieldId] = [];
+                                        this.finalQueryParamsObj[formFieldId] = [];
+                                    }
+                                    this.formFieldList.splice(fflg, 1);
+                                    this.unCommonGropusList.push(formFieldGroupItem);
+                                    this.unCommonCnt++;
+                                }
+                            }
+                        }
+                    }
+                }
+                if (this.calledWithFormFields != true) {
+                    for (let checkRadio = 0; checkRadio < this.formFieldList.length; checkRadio++) {
+                        if (this.formFieldList[checkRadio]['fieldDisplayName'] == 'selectCriteria') {
+                            for (let ffValue = 0; ffValue < this.formFieldList[checkRadio]['formFieldValues'].length; ffValue++) {
+                                if (this.formFieldList[checkRadio]['formFieldValues'][ffValue]['defaultValue'] == true) {
+                                    this.groupSelectValue = this.formFieldList[checkRadio]['formFieldValues'][ffValue]['name'];
+                                }
+                            }
+                            this.oldGroupSelectValue = this.groupSelectValue;
+                        }
+                    }
+                }
+                this.commonCount = this.totalCount - this.unCommonCnt;
+                this.totalCommonCount = this.commonCount;
+                console.log(this.unCommonGropusList);
+                console.log(this.formFieldList);
+                for (let i = 0; i < this.formFieldList.length; i++) {
+                    const formFieldObj = this.formFieldList[i];
+                    if (formFieldObj['formFieldValues'] != null && this.calledWithFormFields != true) {
+                        if ((formFieldObj['validationType'] == 'DATE' && formFieldObj['formFieldValues'].length > 0) || formFieldObj['validationType'] == 'TIMESTAMP_SEC' || formFieldObj['validationType'] == 'TIMESTAMP_MIN' || formFieldObj['validationType'] == 'TIMESTAMP_HOUR') {
+                            if (formFieldObj['validationType'] == 'TIMESTAMP_SEC') {
+                                const multiSelectArray = [];
+
+                                if (formFieldObj['formFieldValues'].length > 0) {
+                                    const date = formFieldObj['formFieldValues'][0]['id'];
+                                    let tempDate = new Date(date);
+                                    multiSelectArray.push(tempDate);
+                                    multiSelectArray.push(tempDate.getHours());
+                                    multiSelectArray.push(tempDate.getMinutes());
+                                    multiSelectArray.push(tempDate.getSeconds());
+                                    this.formFieldListValueMap.set(formFieldObj['fieldId'], multiSelectArray);
+                                } else {
+                                    multiSelectArray.push('');
+                                    multiSelectArray.push('0');
+                                    multiSelectArray.push('0');
+                                    multiSelectArray.push('0');
+                                    this.formFieldListValueMap.set(formFieldObj['fieldId'], multiSelectArray);
+                                }
+                            }
+                            else if (formFieldObj['validationType'] == 'TIMESTAMP_MIN') {
+                                const multiSelectArray = [];
+                                if (formFieldObj['formFieldValues'].length > 0) {
+                                    const date = formFieldObj['formFieldValues'][0]['id'];
+                                    let tempDate = new Date(date);
+                                    multiSelectArray.push(tempDate);
+                                    multiSelectArray.push(tempDate.getHours());
+                                    multiSelectArray.push(tempDate.getMinutes());
+                                    this.formFieldListValueMap.set(formFieldObj['fieldId'], multiSelectArray);
+                                } else {
+                                    multiSelectArray.push('');
+                                    multiSelectArray.push('0');
+                                    multiSelectArray.push('0');
+                                    this.formFieldListValueMap.set(formFieldObj['fieldId'], multiSelectArray);
+                                }
+                            } else if (formFieldObj['validationType'] == 'TIMESTAMP_HOUR') {
+                                const multiSelectArray = [];
+
+                                if (formFieldObj['formFieldValues'].length > 0) {
+                                    const date = formFieldObj['formFieldValues'][0]['id'];
+
+                                    let tempDate = new Date(date);
+                                    multiSelectArray.push(tempDate);
+                                    multiSelectArray.push(tempDate.getHours());
+                                    this.formFieldListValueMap.set(formFieldObj['fieldId'], multiSelectArray);
+                                } else {
+                                    multiSelectArray.push('');
+                                    multiSelectArray.push('0');
+                                    this.formFieldListValueMap.set(formFieldObj['fieldId'], multiSelectArray);
+                                }
+                            }
+                               else{
+                            const date = formFieldObj['formFieldValues'][0]['id'];
+                            this.formFieldListValueMap.set(formFieldObj['fieldId'], new Date(date));
+                            }
+                        } else if (formFieldObj['fieldType'] == 'LIST_BOX' && formFieldObj['formFieldValues'].length > 0) {
+                            let isAdded = false;
+                            for (let ffValue = 0; ffValue < formFieldObj['formFieldValues'].length; ffValue++) {
+                                if (formFieldObj['formFieldValues'][ffValue]['defaultValue'] == true) {
+                                    this.formFieldListValueMap.set(formFieldObj['fieldId'], formFieldObj['formFieldValues'][ffValue]['id']);
+                                    isAdded = true;
+                                }
+                            }
+                            if (!isAdded) {
+                                this.formFieldListValueMap.set(formFieldObj['fieldId'], '');
+                            }
+                        } else if ((formFieldObj['fieldType'] == 'LIST_MULTI_SELECT' || formFieldObj['fieldType'] == 'TEXT') && formFieldObj['formFieldValues'].length > 0) {
+                            let isAdded = false;
+                            const multiSelectArray = [];
+                            for (let ffValue = 0; ffValue < formFieldObj['formFieldValues'].length; ffValue++) {
+                                if (formFieldObj['formFieldValues'][ffValue]['defaultValue'] == true) {
+                                    multiSelectArray.push(formFieldObj['formFieldValues'][ffValue]['id']);
+                                    this.formFieldListValueMap.set(formFieldObj['fieldId'], multiSelectArray);
+                                    isAdded = true;
+                                }
+                            }
+                            if (!isAdded) {
+                                this.formFieldListValueMap.set(formFieldObj['fieldId'], '');
+                            }
+                        } else if (formFieldObj['fieldDisplayName'] == 'DefaultRadio') {
+                            this.formFieldListValueMap.set(formFieldObj['fieldId'], '');
+
+                        } else {
+                            this.formFieldListValueMap.set(formFieldObj['fieldId'], '');
+                        }
+                    }
+
+                    if (formFieldObj['triggerOtherFormFields'] === true) {
+                        const formFieldId = formFieldObj['fieldId'];
+                        this.triggerFormFieldArr.push(formFieldId);
+                        this.initialObject[formFieldId] = [];
+                        this.finalQueryParamsObj[formFieldId] = [];
+                    }
+                }
+
+                console.log(this.formFieldListValueMap);
+
+                if (this.calledWithFormFields != true) {
+                    if (this.formFieldGroupObjList !== null) {
+                        for (const formFieldGroupObjItem of this.formFieldGroupObjList) {
+                            if (formFieldGroupObjItem['name'] == this.groupSelectValue) {
+                                this.toggleFormFieldRenderArr = formFieldGroupObjItem['formFieldList'];
+                                for (let ffGrpValue = 0; ffGrpValue < formFieldGroupObjItem['formFieldList'].length; ffGrpValue++) {
+                                    if (formFieldGroupObjItem['formFieldList'][ffGrpValue]['formFieldValues'].length > 0) {
+                                        for (let ffValue = 0; ffValue < formFieldGroupObjItem['formFieldList'][ffGrpValue]['formFieldValues'].length; ffValue++) {
+                                            if (formFieldGroupObjItem['formFieldList'][ffGrpValue]['formFieldValues'][ffValue]['defaultValue'] == true) {
+                                                if (formFieldGroupObjItem['formFieldList'][ffGrpValue]['fieldType'] == 'LIST_MULTI_SELECT') {
+                                                    const multiSelectArray = [];
+                                                    multiSelectArray.push(formFieldGroupObjItem['formFieldList'][ffGrpValue]['formFieldValues'][ffValue]['id']);
+                                                    this.formFieldListValueMap.set(formFieldGroupObjItem['formFieldList'][ffGrpValue]['fieldId'], multiSelectArray);
+                                                } else {
+                                                    this.formFieldListValueMap.set(formFieldGroupObjItem['formFieldList'][ffGrpValue]['fieldId'], formFieldGroupObjItem['formFieldList'][ffGrpValue]['formFieldValues'][ffValue]['id']);
+                                                }
+                                            }
+                                        }
+                                    } else {
+                                        this.formFieldListValueMap.set(formFieldGroupObjItem['formFieldList'][ffGrpValue]['fieldId'], '');
+
+                                    }
+                                }
+                            }
+
+                        }
+                    }
+                }
+                console.log('finalMap', this.formFieldListValueMap);
+                if (this.formFieldGroupObjList !== null) {
+                    if (this.formFieldGroupObjList.length > 0) {
+                        for (let ffl = 0; ffl < this.formFieldList.length; ffl++) {
+                            for (let ffgl = 0; ffgl < this.formFieldGroupObjList.length; ffgl++) {
+                                const inList = this.formFieldGroupObjList[ffgl]['formFieldList'];
+
+                                for (let inl = 0; inl < inList.length; inl++) {
+                                    let cntr = 0;
+                                    if (inList[inl]['fieldId'] == this.formFieldList[ffl]['fieldId']) {
+                                        cntr++;
+                                    }
+                                    if (cntr == 0) {
+                                        this.finalQueryParamsObj[inList[inl]['fieldId']] = '-1';
+                                    }
+                                }
+
+                            }
+                        }
+                    }
+                }
+                this.save = cloneDeep(this.formFieldGroupObjList);
+            });
+    }
+
+    generateQueryString() {
+
+        this.queryString = '';
+        for (let k = 0; k < Object.keys(this.finalQueryParamsObj).length; k++) {
+            if (typeof (this.finalQueryParamsObj[Object.keys(this.finalQueryParamsObj)[k]]) == 'object') {
+                const key = Object.keys(this.finalQueryParamsObj)[k];
+                let qstr = '';
+                let l = 0;
+                while (this.finalQueryParamsObj[key][l]) {
+                    if (l === 0) {
+                        qstr = qstr + this.finalQueryParamsObj[Object.keys(this.finalQueryParamsObj)[k]][l];
+                    } else {
+                        qstr = qstr + '|' + this.finalQueryParamsObj[Object.keys(this.finalQueryParamsObj)[k]][l];
+                    }
+                    l++;
+                }
+                if (qstr !== '') {
+                    this.queryString = this.queryString + '&' + Object.keys(this.finalQueryParamsObj)[k] + '=' + qstr;
+                }
+            } else {
+                if (typeof (this.finalQueryParamsObj[Object.keys(this.finalQueryParamsObj)[k]]) == 'string') {
+                    this.queryString = this.queryString + '&' + Object.keys(this.finalQueryParamsObj)[k] + '=' + this.finalQueryParamsObj[Object.keys(this.finalQueryParamsObj)[k]];
+                } else {
+                    this.queryString = this.queryString + '&' + Object.keys(this.finalQueryParamsObj)[k] + '=' + this.finalQueryParamsObj[Object.keys(this.finalQueryParamsObj)[k]];
+                }
+            }
+
+        }
+
+    }
+
+    showError(Errresponse: any) {
+        this.errorMessage = Errresponse['errormessage'];
+        this.stackTrace = Errresponse['stacktrace'];
+        this.error = true;
+        this.showSpinner = false;
+    }
+
+    runReport() {
+        this.hitCnt++;
+        this.showSpinner = true;
+        if (this.iSDashboardReport !== 'Dashboard') {
+            if (this.formFieldList.length > 0) {
+                this.reportMode = 'FormField';
+                this.generateQueryString();
+            } else {
+                this.reportMode = 'Regular';
+            }
+            this.showSpinner = false;
+        } else {
+            this.generateQueryString();
+            this.showSpinner = false;
+        }
+        this.httpCacheService.setRouteCache(this.reportId, this.getQueryString());
+        this.httpCacheService.setRouteGroupCache(this.reportId, this.groupSelectValue);
+        this.runReportAgain = !this.runReportAgain;
+        this.navigateToRun = true;
+    }
+
+    editReport(reportId: string) {
+        this._router.navigate(['v2/app/reports', 'Edit', reportId]);
+    }
+
+    showLabelFn() {
+        this.showLabel = !this.showLabel;
+    }
+
+    setDefaultFieldGroupValueForNonSelected(formFieldsList: any) {
+        this.tempFieldValues = [];
+        const map = new Map<string, string>();
+        for (const value in this.finalQueryParamsObj) {
+            map.set(value, this.finalQueryParamsObj[value]);
+        }
+        for (const ffl of formFieldsList) {
+            if (!map.get(ffl['fieldId']) && ffl['formFieldValues'].length === 1) {
+                this.tempFieldValues = ffl['formFieldValues'];
+                if (ffl['fieldDisplayName'] == this.tempFieldValues[0]['name']) {
+                    this.finalQueryParamsObj[ffl['fieldId']] = '-1';
+                }
+            }
+        }
+    }
+
+    resetFormFieldValues() {
+        this.httpCacheService.clearCache();
+        this._router.navigateByUrl('v2/app/refresh', {skipLocationChange: true}).then(() =>
+            this._router.navigate(['v2/run', this.reportId]));
+    }
+
+    goBack() {
+        const prevId = this.httpCacheService.getPreviousId(this.reportId) || null;
+        const prevIdParent = this.httpCacheService.getPreviousId(prevId) || null;
+        if (prevId) {
+            if (prevIdParent && prevIdParent === 'parent') {
+                this._router.navigate(['v2/run', prevId, this.httpCacheService.getRouteCache(prevId), this.httpCacheService.getRouteGroupCache(prevId), 'false', 'true']);
+            } else {
+                this._router.navigate(['v2/run', prevId, this.httpCacheService.getRouteCache(prevId), this.httpCacheService.getRouteGroupCache(prevId), 'true', 'true']);
+            }
+        }
+    }
+
+    private delay(ms: number) {
+        return new Promise(resolve => setTimeout(resolve, ms));
+    }
+
+    private removePrevioustoggleGroupData() {
+        for (const formFieldGroupObjItem of this.formFieldGroupObjList) {
+            if (formFieldGroupObjItem['name'] == this.oldGroupSelectValue) {
+                for (let ffGrpValue = 0; ffGrpValue < formFieldGroupObjItem['formFieldList'].length; ffGrpValue++) {
+                    this.finalQueryParamsObj[formFieldGroupObjItem['formFieldList'][ffGrpValue]['fieldId']] = '-1';
+                    this.formFieldListValueMap.delete(formFieldGroupObjItem['formFieldList'][ffGrpValue]['fieldId']);
+                    this.triggerFormFieldArr = [];
+                }
+
+            }
+        }
+    }
+
+    getTime(){
+       for(let i=0; i<=59; i++){
+        this.timeStampArray.push(i);
+       }
+    }
+
+    getHours(){
+        for(let i=0; i<=23; i++){
+         this.hoursArray.push(i);
+        }
+     }
+}
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-result-set/run-report-result-set-datasource.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-result-set/run-report-result-set-datasource.ts
new file mode 100644
index 00000000..a6a515b5
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-result-set/run-report-result-set-datasource.ts
@@ -0,0 +1,86 @@
+import { DataSource } from '@angular/cdk/collections';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+import { map } from 'rxjs/operators';
+import { Observable, of as observableOf, merge } from 'rxjs';
+
+// TODO: Replace this with your own data model type
+export interface RunReportFinalTableItem {
+  
+}
+
+// TODO: replace this with real data from your application
+
+
+/**
+ * Data source for the RunReportFinalTable view. This class should
+ * encapsulate all logic for fetching and manipulating the displayed data
+ * (including sorting, pagination, and filtering).
+ */
+export class RunReportFinalTableDataSource extends DataSource<RunReportFinalTableItem> {
+  data: RunReportFinalTableItem[];
+  paginator: MatPaginator;
+  sort: MatSort;
+
+  constructor() {
+    super();
+  }
+
+  /**
+   * Connect this data source to the table. The table will only update when
+   * the returned stream emits new items.
+   * @returns A stream of the items to be rendered.
+   */
+  connect(): Observable<RunReportFinalTableItem[]> {
+    // Combine everything that affects the rendered data into one update
+    // stream for the data-table to consume.
+    const dataMutations = [
+      observableOf(this.data),
+      this.paginator.page,
+      this.sort.sortChange
+    ];
+
+    return merge(...dataMutations).pipe(map(() => {
+      return this.getPagedData(this.getSortedData([...this.data]));
+    }));
+  }
+
+  /**
+   *  Called when the table is being destroyed. Use this function, to clean up
+   * any open connections or free any held resources that were set up during connect.
+   */
+  disconnect() {}
+
+  /**
+   * Paginate the data (client-side). If you're using server-side pagination,
+   * this would be replaced by requesting the appropriate data from the server.
+   */
+  private getPagedData(data: RunReportFinalTableItem[]) {
+    const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
+    return data.splice(startIndex, this.paginator.pageSize);
+  }
+
+  /**
+   * Sort the data (client-side). If you're using server-side sorting,
+   * this would be replaced by requesting the appropriate data from the server.
+   */
+  private getSortedData(data: RunReportFinalTableItem[]) {
+    if (!this.sort.active || this.sort.direction === '') {
+      return data;
+    }
+
+    return data.sort((a, b) => {
+      const isAsc = this.sort.direction === 'asc';
+      switch (this.sort.active) {
+        // case 'name': return compare(a.name, b.name, isAsc);
+        // case 'id': return compare(+a.id, +b.id, isAsc);
+        default: return 0;
+      }
+    });
+  }
+}
+
+/** Simple sort comparator for example ID/Name columns (for client-side sorting). */
+function compare(a, b, isAsc) {
+  return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
+}
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-result-set/run-report-result-set.component.css b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-result-set/run-report-result-set.component.css
new file mode 100644
index 00000000..d74a7bd4
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-result-set/run-report-result-set.component.css
@@ -0,0 +1,201 @@
+/* .left {
+  width: auto;
+  float: left;
+  text-align: right;
+}
+.right {
+  width: auto;
+  
+  float: left;
+} */
+
+mat-icon{
+  color: #006496;
+  cursor: pointer;
+}
+
+/* .tab-pane{
+  padding-right: 130px;
+  padding-left: 120px;
+  color: rgba(0, 0, 0, 0.603)
+} */
+
+.boxMargin{
+  
+  width: auto;
+}
+
+mat-button-toggle{
+  display: block;
+  width: 400px;
+  border-radius: 5px;
+}
+
+input {
+  width: 400px;
+  height: 20px;
+}
+
+.tab-content{
+  margin-right: 20px;
+  /* background-color: #006496; */
+  color: rgb(0, 0, 0);
+}
+
+.stdForm{
+  margin-left: 20px;
+}
+
+.field-group {
+  position: relative;
+  display: block;
+}
+
+label + .field-group, label + .input-append, label + .row, label + .row-nowrap, label + .form-row {
+  margin-top: 5px;
+}
+
+textarea {
+  display: block;
+  width: 400px;
+  max-width: 50%;
+  padding: 15px;
+}
+
+select{
+  display: block;
+  width: 400px;
+  max-width: 400px;
+  padding: 15px;
+  background-color: #cfcfcf7a
+}
+
+.webform-component-my-select select {
+  height: 200px;
+}
+
+.checkbox .skin {
+  background-color: #fff;
+  border: 1px solid #d2d2d2;
+  border-radius: 3px;
+  display: inline-block;
+  height: 24px;
+  width: 24px;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+i, em {
+  font-family: "Omnes-ECOMP-W02-Italic", Arial;
+  font-style: normal;
+}
+
+
+
+.card{
+  border-radius: 5px;
+}
+
+.card-header{
+  height: 50px;
+}
+
+.card-body{
+  height: 150px;
+}
+
+.card-footer{
+  height: 50px;
+}
+
+.dialog__close-btn {
+  border: 0;
+  background: #087ac2;
+  color: #ffffff;
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  font-size: 1.2em;
+  display: block;
+  border: #087ac2 2px solid;
+}
+
+.modalTitle{
+    font-size: 35px;  
+}
+
+
+.full-width-table {
+  width: 100%;
+}
+
+
+.app-data-table {
+  margin-top: 80px;
+  /* margin-left: 250px;
+  margin-right: 250px; */
+  /* overflow: scroll; */
+}
+
+.app-data-table1 {
+  margin-left: 150px;
+  margin-right: 150px;
+}
+
+th{
+  /* background-color: #006496; */
+  color: rgb(0, 0, 0);
+  font-size: 15px;
+  border-radius: 2px;
+  height: 35px;
+}
+
+tr:nth-child(even) {
+  /* background-color: #dddddd; */
+  font-size: 2px;
+  height: 35px;
+  border-radius: 4px;
+  
+}
+
+tr:nth-child(odd) {
+  font-size: 2px;
+  height: 35px;
+  border-radius: 4px;
+}
+
+    
+.card{
+  border-radius: 5px;
+  
+}
+
+.card-header{
+  height: 50px;
+}
+
+.card-body{
+  height: 150px;
+}
+
+.card-footer{
+  height: 50px;
+  margin-right: 10px;
+}
+
+.dialog__close-btn {
+  border: 0;
+  background: #087ac2;
+  color: #ffffff;
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  font-size: 1.2em;
+  display: block;
+  border: #087ac2 2px solid;
+}
+
+.modalTitle{
+    font-size: 35px;  
+}
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-result-set/run-report-result-set.component.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-result-set/run-report-result-set.component.html
new file mode 100644
index 00000000..76183db3
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-result-set/run-report-result-set.component.html
@@ -0,0 +1,23 @@
+<div class="app-data-table">
+  <table mat-table class="full-width-table" matSort aria-label="Elements">
+    <!-- Id Column -->
+    <!-- <div *ngFor="let b of "> -->
+      <div *ngFor="let keys of displayedColumns; let i = index">
+        <ng-container matColumnDef="{{keys}}">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header >{{displayedColumnsArr[i].split(",")[0]}}</th>
+            <td mat-cell *matCellDef="let row">{{row[keys]}}</td>
+          </ng-container>
+        </div>
+       
+  <!-- </div> -->
+    <tr mat-header-row *matHeaderRowDef="displayedColumns" ></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+  </table>
+
+  <mat-paginator #paginator
+      [length]="dataSource?.data.length"
+      [pageIndex]="0"
+      [pageSize]="15"
+      [pageSizeOptions]="[15, 25, 50, 100, 250]">
+  </mat-paginator>
+</div>
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-result-set/run-report-result-set.component.spec.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-result-set/run-report-result-set.component.spec.ts
new file mode 100644
index 00000000..cc8fd2bd
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-result-set/run-report-result-set.component.spec.ts
@@ -0,0 +1,38 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
+
+import { RunReportResultSetComponent } from './run-report-result-set.component';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+
+describe('RunReportResultSetComponent', () => {
+  let component: RunReportResultSetComponent;
+  let fixture: ComponentFixture<RunReportResultSetComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RunReportResultSetComponent ],
+      imports: [
+        NoopAnimationsModule,
+        MatPaginatorModule,
+        MatSortModule,
+        MatTableModule,
+        HttpClientTestingModule,
+        RouterTestingModule
+      ],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RunReportResultSetComponent);
+    component = fixture.componentInstance;
+    //fixture.detectChanges();
+  });
+
+  it('should compile', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-result-set/run-report-result-set.component.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-result-set/run-report-result-set.component.ts
new file mode 100644
index 00000000..4f18ff8e
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-result-set/run-report-result-set.component.ts
@@ -0,0 +1,139 @@
+import { AfterViewInit, Component, OnInit, ViewChild, Input, SimpleChange } from '@angular/core';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+import { MatTable } from '@angular/material/table';
+import { RunReportFinalTableDataSource, RunReportFinalTableItem } from './run-report-result-set-datasource';
+import { ActivatedRoute } from '@angular/router';
+import { HttpClient } from '@angular/common/http';
+import { RunService } from '../run.service';
+
+@Component({
+  selector: 'app-run-report-result-set',
+  templateUrl: './run-report-result-set.component.html',
+  styleUrls: ['./run-report-result-set.component.css']
+})
+export class RunReportResultSetComponent implements AfterViewInit, OnInit {
+  
+  @Input("reportId") reportId1 : string;
+
+  
+  @ViewChild(MatPaginator, {static: false} as any) paginator: MatPaginator;
+  @ViewChild(MatSort, {static: false} as any) sort: MatSort;
+  @ViewChild(MatTable, {static: false} as any) table: MatTable<RunReportFinalTableItem>;
+  dataSource: RunReportFinalTableDataSource;
+
+  /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
+  displayedColumns : string[];
+  IncomingReportId : string;
+  displayedColumnsArr : string[];
+  displayedRowObj : RunReportFinalTableItem[];
+
+  constructor(private _http : HttpClient, private _route : ActivatedRoute, private _runService : RunService){
+      this.displayedColumnsArr = new Array();
+      this.displayedRowObj = new Array();
+      this.displayedColumns = new Array();
+  }
+
+  ngOnInit() {
+    this.dataSource = new RunReportFinalTableDataSource();
+
+    this._route.params.subscribe(params => {
+      
+      this.IncomingReportId = params["reportId"];
+    });
+    this._runService.getReportData(this.reportId1)
+    .subscribe((response) => {
+      console.log(response);
+
+      let i=0;
+      while(response["reportDataColumns"][i])
+      {
+        this.displayedColumnsArr.push(response["reportDataColumns"][i]["columnTitle"] +","+ response["reportDataColumns"][i]["colId"]);
+        i++;
+      }
+
+      let j=0;
+      while(response["reportDataRows"][j])
+      {
+        let k=0;
+        let obj = new Object();
+        while(this.displayedColumnsArr[k])
+        {
+          if(response["reportDataRows"][j][this.displayedColumnsArr[k].split(",")[1]])
+          {
+            obj[response["reportDataRows"][j][this.displayedColumnsArr[k].split(",")[1]]["colId"]] = response["reportDataRows"][j][this.displayedColumnsArr[k].split(",")[1]]["displayValue"];
+          }
+          k++;
+        }
+        this.displayedRowObj.push(obj);
+        j++;
+      }
+
+      console.log(this.displayedColumnsArr);
+      console.log(this.displayedRowObj);
+
+      for(let l=0; l<this.displayedColumnsArr.length; l++)
+      {
+        this.displayedColumns.push(this.displayedColumnsArr[l].split(",")[1]);
+      }
+      
+
+      this.dataSource.data = this.displayedRowObj;
+      this.dataSource.sort = this.sort;
+      this.dataSource.paginator = this.paginator;
+      this.table.dataSource = this.dataSource;
+  
+    });
+
+
+  }
+
+  ngAfterViewInit() {
+    this._runService.getReportData(this.reportId1)
+    .subscribe((response) => {
+      console.log(response);
+
+      let i=0;
+      while(response["reportDataColumns"][i])
+      {
+        this.displayedColumnsArr.push(response["reportDataColumns"][i]["columnTitle"] +","+ response["reportDataColumns"][i]["colId"]);
+        i++;
+      }
+
+      let j=0;
+      while(response["reportDataRows"][j])
+      {
+        let k=0;
+        let obj = new Object();
+        while(this.displayedColumnsArr[k])
+        {
+          if(response["reportDataRows"][j][this.displayedColumnsArr[k].split(",")[1]])
+          {
+            obj[response["reportDataRows"][j][this.displayedColumnsArr[k].split(",")[1]]["colId"]] = response["reportDataRows"][j][this.displayedColumnsArr[k].split(",")[1]]["displayValue"];
+          }
+          k++;
+        }
+        this.displayedRowObj.push(obj);
+        j++;
+      }
+
+      console.log(this.displayedColumnsArr);
+      console.log(this.displayedRowObj);
+
+      for(let l=0; l<this.displayedColumnsArr.length; l++)
+      {
+        this.displayedColumns.push(this.displayedColumnsArr[l].split(",")[1]);
+      }
+      
+      this.dataSource.data = this.displayedRowObj;
+      this.dataSource.sort = this.sort;
+      this.dataSource.paginator = this.paginator;
+      this.table.dataSource = this.dataSource;
+  
+    });
+
+
+  }
+
+  
+}
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-dashboard-report/dashboard-report.service.spec.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-dashboard-report/dashboard-report.service.spec.ts
new file mode 100644
index 00000000..1c96f7ed
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-dashboard-report/dashboard-report.service.spec.ts
@@ -0,0 +1,37 @@
+import { TestBed } from '@angular/core/testing';
+
+import { DashboardReportService } from './dashboard-report.service';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { HttpClient } from '@angular/common/http';
+import { environment } from 'src/environments/environment';
+
+describe('DashboardReportService', () => {
+
+    let service: DashboardReportService;
+
+  beforeEach(() => {TestBed.configureTestingModule({
+    imports: [HttpClientTestingModule],
+    providers: [HttpClient, HttpClientTestingModule, DashboardReportService]
+  });
+    service = TestBed.get(DashboardReportService);
+  
+});
+
+  it('should be created', () => {
+    const service: DashboardReportService = TestBed.get(DashboardReportService);
+    expect(service).toBeTruthy();
+  });
+
+  it('should getReportData', () => {
+      service.getReportData("test").subscribe((res) => {
+          expect(res).toBe(environment);
+      });
+  });
+
+  it('should getReportDataWithFormFields', () => {
+    service.getReportDataWithFormFields("just", "test").subscribe((res) => {
+        expect(res).toBe(environment);
+    });
+  });
+
+});
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-dashboard-report/dashboard-report.service.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-dashboard-report/dashboard-report.service.ts
new file mode 100644
index 00000000..009865e7
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-dashboard-report/dashboard-report.service.ts
@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { environment } from 'src/environments/environment';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DashboardReportService {
+
+    constructor(private _http: HttpClient) {
+    }
+
+  
+    getReportData(reportId: string): Observable<any> {
+        return this._http.get(environment.baseUrl + 'raptor.htm?action=report.run.container&c_master=' + reportId + '&refresh=Y');
+  }
+
+    getReportDataWithFormFields(queryString: string, reportId: string): Observable<any> {
+        return this._http.get(environment.baseUrl + 'raptor.htm?action=report.run.container&c_master=' + reportId + queryString + '&refresh=Y&display_content=Y&r_page=0&child=true');
+  }
+}
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-dashboard-report/run-dashboard-report.component.css b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-dashboard-report/run-dashboard-report.component.css
new file mode 100644
index 00000000..730fa004
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-dashboard-report/run-dashboard-report.component.css
@@ -0,0 +1,90 @@
+.submit-approval-btn{
+  display: contents;
+}
+.lds-ring {
+  display: inline-block;
+  position: relative;
+  width: 64px;
+  height: 64px;
+}
+.lds-ring div {
+  box-sizing: border-box;
+  display: block;
+  position: absolute;
+  width: 35px;
+  height: 35px;
+  margin: 6px;
+  margin-top: 40px;
+  border: 6px solid #006496;
+  border-radius: 80%;
+  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  border-color: #006496 transparent transparent transparent;
+}
+.lds-ring div:nth-child(1) {
+  animation-delay: -0.45s;
+}
+.lds-ring div:nth-child(2) {
+  animation-delay: -0.3s;
+}
+.lds-ring div:nth-child(3) {
+  animation-delay: -0.15s;
+}
+@keyframes lds-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+
+table {
+    width: 100%;
+  }
+  .example-container {
+    height: auto;
+    max-height: 500px;
+    overflow: auto;
+  }
+
+  td.mat-cell{
+  padding-left: 3px;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+  border-right: 0.1px solid gray;
+  border-left: 0.1px solid gray;
+}
+.mat-icon-delete{
+  color: #006496;
+  cursor: pointer;
+}
+  
+
+.app-data-table {
+    margin-top: 0px;
+  }
+
+  
+th{
+    background-color: #2125299c;
+    color: rgb(255, 255, 255);
+    font-size: 15px;
+    border-radius: 2px;
+    height: 35px;
+  }
+  
+  tr:nth-child(even) {
+    background-color: #dddddd;
+    font-size: 2px;
+    height: 35px;
+    border-radius: 4px;
+    
+  }
+  
+  tr:nth-child(odd) {
+    font-size: 2px;
+    height: 35px;
+    border-radius: 4px;
+  }
+
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-dashboard-report/run-dashboard-report.component.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-dashboard-report/run-dashboard-report.component.html
new file mode 100644
index 00000000..5384e89b
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-dashboard-report/run-dashboard-report.component.html
@@ -0,0 +1,44 @@
+<span *ngIf="showSpinner" class="ecomp-spinner"></span>
+
+<div *ngIf="!showChart">  
+    <div class="app-data-table">
+        <div class="app-data-table-fixed-height">
+            <div class="example-container">
+<!--                <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>-->
+                <table [dataSource]="dataSource" mat-table matSort>
+                    <div *ngFor="let keys of displayedColumns; let i = index">
+                        <ng-container matColumnDef="{{keys}}">
+                            <th *matHeaderCellDef mat-header-cell
+                                mat-sort-header>{{displayedColumnsArr[i].split(",")[0]}}</th>
+                            <td *matCellDef="let row" mat-cell [ngStyle]="setStyle(row[keys])">
+                                <div *ngIf="row[keys].split('|')[0] == 'linkToReport'"
+                                     [ngStyle]="setStyle(row[keys].split('|')[4])">
+                                    <a (click)="linkToReport(row[keys].split('|')[1], row[keys].split('|')[2])"
+                                       [routerLink]="">{{row[keys].split('|')[3]}}</a>
+                                </div>
+                                <div *ngIf="row[keys].split('|')[0] == 'linkToMail'"
+                                     [ngStyle]="setStyle(row[keys].split('|')[3])">
+                                    <a (click)="linkToMail(row[keys].split('|')[1])"
+                                       [routerLink]="">{{row[keys].split('|')[2]}}</a>
+                                </div>
+                                <div *ngIf="row[keys].split('|')[0] !== 'linkToReport' && row[keys].split('|')[0] !== 'linkToMail'">
+                                    {{row[keys].split('|')[0]}}</div>
+                            </td>
+                            <td *matFooterCellDef align="center"
+                                mat-footer-cell>{{getDisplayTotal(keys)}}</td>
+                        </ng-container>
+                    </div>
+
+                    <tr *matHeaderRowDef="displayedColumns; sticky: true;"
+                        mat-header-row></tr>
+                    <tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
+                    <tr *matFooterRowDef="displayedColumns; sticky: true;" mat-footer-row></tr>
+                </table>
+            </div>
+        </div>
+    </div>
+</div>
+<div *ngIf="showChart" align="center">
+    <iframe #iframe height="550px" style="border: none" width="100%"></iframe>
+</div>
+
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-dashboard-report/run-dashboard-report.component.scss b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-dashboard-report/run-dashboard-report.component.scss
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-dashboard-report/run-dashboard-report.component.scss
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-dashboard-report/run-dashboard-report.component.spec.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-dashboard-report/run-dashboard-report.component.spec.ts
new file mode 100644
index 00000000..ba2fbf34
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-dashboard-report/run-dashboard-report.component.spec.ts
@@ -0,0 +1,126 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatTableModule } from '@angular/material';
+import { RunDashboardReportComponent } from './run-dashboard-report.component';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { RouterModule, Router } from '@angular/router';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { DashboardReportService } from './dashboard-report.service';
+import { MockBackend, MockConnection } from '@angular/http/testing';
+import { Http, BaseRequestOptions } from '@angular/http';
+import { Observable } from 'rxjs';
+import 'rxjs/add/observable/empty';
+import 'rxjs/add/observable/of';
+import { environment } from 'src/environments/environment';
+
+describe('RunDashboardReportComponent', () => {
+  let component: RunDashboardReportComponent;
+  let fixture: ComponentFixture<RunDashboardReportComponent>;
+  let dashboardService : DashboardReportService;
+  let router: Router;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+      declarations: [ RunDashboardReportComponent ],
+      imports: [MatTableModule, RouterTestingModule, HttpClientTestingModule],
+      providers:[DashboardReportService, MockBackend, BaseRequestOptions, {
+        provide: Http,
+                    useFactory: (backend: MockBackend, defaultOptions: BaseRequestOptions) => {
+                        return new Http(backend, defaultOptions);
+                    },
+                    deps: [MockBackend, BaseRequestOptions],
+      }]
+    })
+    .compileComponents();
+    dashboardService = TestBed.get(DashboardReportService);
+    router = TestBed.get(Router);
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RunDashboardReportComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => { 
+    expect(component).toBeTruthy();
+  });
+
+  it('should test ngOnInit method', () => {
+        component.queryString = "test";
+        component.ngOnInit();
+        expect(component.initialQueryString).toEqual("test");
+        expect(component.initCounter).toEqual(component.initCounter++);
+        spyOn(component, 'initialProcesses');
+        component.initialProcesses();
+        expect(component.initialProcesses).toHaveBeenCalled();
+  });
+
+  it('should test initialProcess method', () => {
+        component.initialProcesses();
+        expect(component.dataSource.paginator).toEqual(component.paginator);
+  });
+
+  it('should test ngOnChanges methods if condition', () => {
+
+      component.hitCnt = 1;
+      component.queryString =  "testing"
+        component.initialQueryString === "test";
+        component.initCounter > 0;
+        component.runButtonHitCounter === 2;
+
+        component.ngOnChanges();
+        expect(component.initialQueryString).toEqual(component.queryString);
+        expect(component.runButtonHitCounter).toEqual(component.hitCnt);
+
+        spyOn(component, 'initialProcesses');
+        spyOn(component, 'afterViewInitProcesses');
+        component.initialProcesses();
+        component.afterViewInitProcesses();
+        expect(component.initialProcesses).toHaveBeenCalled();
+        expect(component.afterViewInitProcesses).toHaveBeenCalled();
+        
+  });
+
+  it('should test ngOnChanges methods else condition', () => {
+
+    component.hitCnt = 1;
+    component.queryString =  "testing"
+      component.initialQueryString === "testing";
+      component.initCounter = 0;
+      component.runButtonHitCounter === 1;
+
+      component.ngOnChanges();
+      expect(component.runButtonHitCounter).toBe(component.hitCnt);
+      expect(component.initialQueryString).toBe(component.queryString);
+      
+});
+
+  it('should test applyFilter method', () => {
+        component.applyFilter("testing");
+        expect(component.dataSource.filter).toEqual("testing".trim().toLowerCase());
+  });
+
+   it('should test afterViewInitProcesses method', () => {
+    component.afterViewInitProcesses();
+    expect(component.displayedColumnsArr).toEqual(new Array());
+    expect(component.displayedRowObj).toEqual(new Array());
+    expect(component.displayedColumns).toEqual(new Array());
+    expect(component.formFieldList).toEqual(new Array());
+    expect(component.showSpinner).toEqual(true);
+    expect(component.isReady).toEqual(false);
+    expect(component.NEWdisplayedColumns).toEqual(new Array());
+  });
+
+    it('should test linkToReport method', () => {
+      let reportId = "abc";
+      let queryParameters = "def";
+      component.linkToReport(reportId, queryParameters);
+    });
+
+    it('should test linkToMail method', () => {
+      let mailID = "abc";
+      component.linkToMail(mailID);
+    });
+
+});
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-dashboard-report/run-dashboard-report.component.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-dashboard-report/run-dashboard-report.component.ts
new file mode 100644
index 00000000..e37154a1
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-dashboard-report/run-dashboard-report.component.ts
@@ -0,0 +1,303 @@
+import {Component, OnInit, Input, AfterViewInit, ViewChild, ElementRef, ChangeDetectorRef} from '@angular/core';
+import { GridsterConfig, GridType, GridsterItem } from 'angular-gridster2';
+import { MatTableDataSource } from '@angular/material/table';
+import { MatPaginator } from '@angular/material/paginator';
+import { DashboardReportService } from './dashboard-report.service';
+import { MatSort } from '@angular/material';
+import { Router } from '@angular/router';
+import { RunService } from '../../run.service';
+import {FormControl} from '@angular/forms';
+import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
+import {environment} from '../../../../../environments/environment';
+import {DisplayHtml} from '../../../../pages/analytics/Report_List/Report/display-html';
+import {ErrorModalComponent} from '../../../../modals/error-modal/error-modal.component';
+
+export interface PeriodicElement {
+
+}
+
+const ELEMENT_DATA: PeriodicElement[] = [{}];
+
+@Component({
+    selector: 'app-run-dashboard-report',
+    templateUrl: './run-dashboard-report.component.html',
+    styleUrls: ['./run-dashboard-report.component.css']
+})
+
+export class RunDashboardReportComponent implements AfterViewInit {
+
+    @Input('reportId') inputReportId: string;
+    @Input('queryString') queryString: string;
+    @Input('hitCnt') hitCnt: number;
+    @Input('reportType') reportType: string;
+    @Input('parentId') parentId: string;
+    dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
+    @ViewChild(MatPaginator, {static: false} as any) paginator: MatPaginator;
+    @ViewChild(MatSort, {static: false} as any) sort: MatSort;
+    @ViewChild('iframe') iframe: ElementRef;
+    options: GridsterConfig;
+    dashboard: Array<GridsterItem> = [];
+    displayedColumns: string[];
+    IncomingReportId: string;
+    displayedColumnsArr: string[];
+    displayedRowObj: {}[];
+    formFieldPresent: boolean;
+    showSpinner: boolean;
+    formFieldList: {}[];
+    isReady: boolean;
+    responseFormFieldListLength: number;
+    NEWdisplayedColumns: string[];
+    initCnt: number;
+    reportName: string;
+    showDashboardReport: boolean;
+    checkCnt: number;
+    initialQueryString: string;
+    initCounter: number;
+    runButtonHitCounter: number;
+    showChart = false;
+    displayColumValue: string;
+    displayTotal: any[];
+    private chartRunUrl: string;
+    replaceDisplayValue: String;
+saveResponseObj:any;
+
+    constructor(private _dashboardReportService: DashboardReportService,
+        private _router: Router,
+        private _runService: RunService,
+        private ngModal: NgbModal,
+        private changeDetectorRefs: ChangeDetectorRef,
+        public ngbModal: NgbModal) {
+        this.initCounter = 0;
+        this.runButtonHitCounter = 0;
+    }
+
+    ngOnInit() {
+        this.initialQueryString = this.queryString;
+        this.initCounter++;
+        this.runButtonHitCounter = this.hitCnt;
+        if (this.reportType === 'Chart') {
+            this.showChart = true;
+        }
+
+        this.initialProcesses();
+    }
+
+    initialProcesses() {
+        // this.dataSource.paginator = this.paginator;
+    }
+
+    ngOnChanges() {
+        if (this.initialQueryString !== this.queryString && this.initCounter > 0 && this.runButtonHitCounter !== this.hitCnt) {
+            this.initialQueryString = this.queryString;
+            this.runButtonHitCounter = this.hitCnt;
+            this.initialProcesses();
+            this.afterViewInitProcesses();
+        } else {
+            this.runButtonHitCounter = this.hitCnt;
+            this.initialQueryString = this.queryString;
+        }
+    }
+
+    ngAfterViewInit() {
+        this.afterViewInitProcesses();
+    }
+
+    afterViewInitProcesses() {
+        if (this.showChart) {
+            this.chartRunUrl = environment.baseUrl + 'raptor.htm?action=chart.run&c_master=' +
+                this.inputReportId + this.queryString + '&refresh=Y&display_content=Y&r_page=0';
+            this.iframe.nativeElement.setAttribute('src', this.chartRunUrl);
+            this.showSpinner = false;
+        } else {
+
+            this.displayedColumnsArr = [];
+            this.displayedRowObj = [];
+            this.displayedColumns = [];
+            this.formFieldList = [];
+            this.showSpinner = true;
+            this.isReady = false;
+            this.NEWdisplayedColumns = [];
+            this.displayTotal = [];
+            if (localStorage.getItem(this.inputReportId)) {
+                this.postFetchingReportDataFn(JSON.parse(localStorage.getItem(this.inputReportId)));
+                localStorage.removeItem(this.inputReportId);
+            } else {
+                this._dashboardReportService.getReportDataWithFormFields(this.queryString, this.inputReportId)
+                    .subscribe((response) => {
+                        if (response['errormessage']){
+                            this.openErrorModel(response['errormessage']);
+                            this.showSpinner = false;
+                            this.changeDetectorRefs.detectChanges();
+                        } else {
+                            this.postFetchingReportDataFn(response);
+                        }
+                    }, error => {
+                        this.openErrorModel('Error occurred while running report: ' + this.inputReportId);
+                        this.showSpinner = false;
+                        this.changeDetectorRefs.detectChanges();
+                    });
+            }
+        }
+    }
+
+    postFetchingReportDataFn(response: any){
+        this.saveResponseObj = response;
+        this.formFieldPresent = false;
+        this.responseFormFieldListLength = 0;
+        this.reportName = response['reportName'];
+        let columnCntr = 0;
+        this.displayedColumnsArr.push('RowNum,RowNum');
+        while (response['reportDataColumns'][columnCntr]) {
+            this.displayedColumnsArr.push(response['reportDataColumns'][columnCntr]['columnTitle'] + ','
+                + response['reportDataColumns'][columnCntr]['colId']);
+            columnCntr++;
+        }
+        let totalCnt = 0;
+        while (response['reportTotalDataRows'][totalCnt]) {
+            this.displayTotal.push(response['reportTotalDataRows'][totalCnt]);
+            totalCnt++;
+        }
+        let rdr_cntr = 0;
+        while (response['reportDataRows'][rdr_cntr]) {
+            let dca_cntr = 0;
+            const obj = {};
+            const reportDataRows = response['reportDataRows'][rdr_cntr];
+            while (this.displayedColumnsArr[dca_cntr]) {
+                const rowColumnId = this.displayedColumnsArr[dca_cntr].split(',')[1];
+                if (reportDataRows[rowColumnId]) {
+                    let drillDownHtml = '';
+                    let displayValue = '';
+                    drillDownHtml = reportDataRows[rowColumnId]['drillDownURL'];
+                    displayValue = reportDataRows[rowColumnId]['displayValue'];
+                    if (drillDownHtml !== null &&
+                        drillDownHtml.length > 0 &&
+                        !displayValue.includes('linkToReport')) {
+                        const value = this.convertToLinkToReport(drillDownHtml);
+                        if (value.length > 0) {
+                            this.replaceDisplayValue = value + ',' +
+                                reportDataRows[rowColumnId]['displayValue'];
+                        } else {
+                            this.replaceDisplayValue = reportDataRows[rowColumnId]['displayValue'];
+                        }
+                    } else {
+                        this.replaceDisplayValue = reportDataRows[rowColumnId]['displayValue'];
+                    }
+                    let displayObj: DisplayHtml = new class implements DisplayHtml {
+                        'background-color': string;
+                        'font-family': string;
+                        'font-size': string;
+                        'font-style': string;
+                        'font-weight': string;
+                        'text-align': string;
+                        'text-decoration': string;
+                        color: string;
+                    };
+                    if (reportDataRows[rowColumnId]['displayValueHtml'].includes('{')) {
+                        displayObj = JSON.parse(reportDataRows[rowColumnId]['displayValueHtml']);
+                    }
+                    displayObj['text-align'] = reportDataRows[rowColumnId]['alignment'];
+                    obj['RowNum'] = (rdr_cntr + 1) + '|{"text-align":"center"}';
+                    if (this.replaceDisplayValue.includes('linkToReport') || this.replaceDisplayValue.includes('linkToMail')) {
+                        obj[reportDataRows[rowColumnId]['colId']] = this.replaceDisplayValue.split(',').join('|')
+                            + '|' + JSON.stringify(displayObj);
+                    } else {
+                        obj[reportDataRows[rowColumnId]['colId']] = this.replaceDisplayValue
+                            + '|' + JSON.stringify(displayObj);
+                    }
+                }
+                dca_cntr++;
+            }
+            this.displayedRowObj.push(obj);
+            rdr_cntr++;
+        }
+        for (let pushCounter = 0; pushCounter < this.displayedColumnsArr.length; pushCounter++) {
+            this.displayedColumns.push(this.displayedColumnsArr[pushCounter].split(',')[1]);
+        }
+        this.showSpinner = false;
+        this.dataSource = new MatTableDataSource<PeriodicElement>(this.displayedRowObj);
+        this.dataSource.sort = this.sort;
+        this.changeDetectorRefs.detectChanges();
+    }
+
+    linkToReport(reportID: string, queryParameters: string) {
+        localStorage.setItem(this.inputReportId, JSON.stringify(this.saveResponseObj));
+        if (sessionStorage.length === 0) {
+            sessionStorage.setItem('1', this.parentId + '|' + this.queryString);
+        } else {
+            let length = sessionStorage.length;
+            length++;
+            sessionStorage.setItem(length.toString(), this.parentId + '|' + this.queryString);
+        }
+        this._router.navigate(['v2/run', reportID, queryParameters]);
+    }
+
+    linkToMail(mailId: string) {
+        const email = 'mailto:' + mailId;
+        window.location.href = email;
+    }
+
+    applyFilter(filterValue: string) {
+        this.dataSource.filter = filterValue.trim().toLowerCase();
+    }
+
+    setStyle(rowData: string) {
+        let styles = '';
+        if (rowData.split('|')[0] === 'linkToReport') {
+            styles = rowData.split('|')[4];
+        } else if (rowData.split('|')[0] === 'linkToMail') {
+            styles = rowData.split('|')[3];
+        } else {
+            styles = rowData.split('|')[1];
+        }
+        if (styles !== undefined && styles.includes('{')) {
+            return JSON.parse(styles);
+        } else {
+            return {};
+        }
+    }
+
+    getDisplayTotal(keys: any) {
+        if (this.displayTotal.length > 0) {
+            return this.displayTotal[0][keys].displayValue;
+        } else {
+            return '';
+        }
+    }
+
+    convertToLinkToReport(value: string) {
+        value = value.replace(/;/g, '');
+        let outPut = '';
+        while (value.includes('c_master=')) {
+            const index = value.indexOf('c_master=');
+            if (index > 0) {
+                value = value.substring(index, value.length);
+            } else if (index === 0) {
+                value = value.replace('c_master=', '');
+            }
+        }
+        const split = value.split('&');
+        // const spltFirst = split[0].split('=');
+        if (split[1].length <= 0) {
+            return outPut;
+        }
+        outPut = 'linkToReport,' + split[0] + ',';
+        let splitCounter = 1;
+        for (splitCounter = 1; splitCounter < split.length; splitCounter++) {
+            if (!split[splitCounter].includes('LOGIN_ID=') &&
+                !split[splitCounter].includes('display_content=') &&
+                !split[splitCounter].includes('drilldown_index=') &&
+                !split[splitCounter].includes('show_back_btn=') &&
+                !split[splitCounter].includes('r_action')) {
+                outPut = outPut + '&' + split[splitCounter];
+            }
+        }
+        return outPut;
+    }
+
+    openErrorModel(_message: string) {
+        const modalInfoRef = this.ngbModal.open(ErrorModalComponent);
+        modalInfoRef.componentInstance.message = _message;
+        return modalInfoRef;
+    }
+
+}
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-report-datasource.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-report-datasource.ts
new file mode 100644
index 00000000..8c8d6222
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-report-datasource.ts
@@ -0,0 +1,89 @@
+import { DataSource } from '@angular/cdk/collections';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+import { map } from 'rxjs/operators';
+import { Observable, of as observableOf, merge } from 'rxjs';
+
+// TODO: Replace this with your own data model type
+export interface RunReportFinalTableItem {
+  
+}
+
+// TODO: replace this with real data from your application
+
+
+/**
+ * Data source for the RunReportFinalTable view. This class should
+ * encapsulate all logic for fetching and manipulating the displayed data
+ * (including sorting, pagination, and filtering).
+ */
+export class RunReportDataSource extends DataSource<RunReportFinalTableItem> {
+  data: RunReportFinalTableItem[];
+  paginator: MatPaginator;
+  sort: MatSort;
+
+  constructor() {
+    super();
+  }
+
+  /**
+   * Connect this data source to the table. The table will only update when
+   * the returned stream emits new items.
+   * @returns A stream of the items to be rendered.
+   */
+  connect(): Observable<RunReportFinalTableItem[]> {
+    // Combine everything that affects the rendered data into one update
+    // stream for the data-table to consume.
+    const dataMutations = [
+      observableOf(this.data),
+      this.paginator.page,
+      this.sort.sortChange
+    ];
+
+    return merge(...dataMutations).pipe(map(() => {
+      return this.getPagedData(this.getSortedData([...this.data]));
+    }));
+  }
+
+  /**
+   *  Called when the table is being destroyed. Use this function, to clean up
+   * any open connections or free any held resources that were set up during connect.
+   */
+  disconnect() {}
+
+  /**
+   * Paginate the data (client-side). If you're using server-side pagination,
+   * this would be replaced by requesting the appropriate data from the server.
+   */
+  private getPagedData(data: RunReportFinalTableItem[]) {
+    const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
+    return data.splice(startIndex, this.paginator.pageSize);
+  }
+
+  /**
+   * Sort the data (client-side). If you're using server-side sorting,
+   * this would be replaced by requesting the appropriate data from the server.
+   */
+  private getSortedData(data: RunReportFinalTableItem[]) {
+    if (!this.sort.active || this.sort.direction === '') {
+      return data;
+    }
+
+
+    return data.sort((a, b) => {
+      const isAsc = this.sort.direction === 'asc';
+      switch (this.sort.active) {
+        // case 'name': return compare(a.name, b.name, isAsc);
+        // case 'id': return compare(+a.id, +b.id, isAsc);
+        
+        
+        default: return 0;
+      }
+    });
+  }
+}
+
+/** Simple sort comparator for example ID/Name columns (for client-side sorting). */
+function compare(a, b, isAsc) {
+  return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
+}
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-report.component.css b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-report.component.css
new file mode 100644
index 00000000..5f0f289d
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-report.component.css
@@ -0,0 +1,1362 @@
+.approval-img{
+  height:25px;
+   width:25px
+}
+
+.gridster-item-content{
+  overflow-y: scroll;
+  overflow-x: scroll;
+  overflow: scroll;
+}
+
+.lds-ring {
+  display: inline-block;
+  position: relative;
+  width: 64px;
+  height: 64px;
+}
+.lds-ring div {
+  box-sizing: border-box;
+  display: block;
+  position: absolute;
+  width: 35px;
+  height: 35px;
+  margin: 6px;
+  margin-top: 40px;
+  border: 6px solid #006496;
+  border-radius: 80%;
+  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  border-color: #006496 transparent transparent transparent;
+}
+.lds-ring div:nth-child(1) {
+  animation-delay: -0.45s;
+}
+.lds-ring div:nth-child(2) {
+  animation-delay: -0.3s;
+}
+.lds-ring div:nth-child(3) {
+  animation-delay: -0.15s;
+}
+@keyframes lds-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+mat-icon{
+  color: #006496;
+  cursor: pointer;
+}
+.mat-icon-delete{
+  color: #006496;
+  cursor: pointer;
+}
+
+
+button,
+input,
+select,
+textarea {
+  margin: 0;
+  font-size: 100%;
+  vertical-align: middle; }
+
+
+button,
+html input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+  appearance: button;
+  cursor: pointer; }
+
+
+.defaultFontSize1{
+  font-size: 16px;
+}
+
+.defaultFontSize{
+  font-size: 15px;
+}
+.boxMargin{
+
+  width: auto;
+}
+
+td.mat-cell{
+  padding-left: 3px;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+  border-right: 1px solid #999;
+  border-left: 1px solid #999;
+}
+
+mat-button-toggle{
+  display: block;
+  width: 400px;
+  border-radius: 5px;
+}
+
+
+.tab-content{
+  margin-right: 20px;
+  color: rgb(0, 0, 0);
+}
+
+.stdForm{
+  margin-left: 20px;
+}
+
+.field-group {
+  position: relative;
+  display: block;
+}
+
+
+input {
+  width: 400px;
+  height: 35px;
+}
+
+label + .field-group, label + .input-append, label + .row, label + .row-nowrap, label + .form-row {
+  margin-top: 5px;
+}
+
+
+.checkbox .skin {
+  background-color: #fff;
+  border: 1px solid #d2d2d2;
+  border-radius: 3px;
+  display: inline-block;
+  height: 24px;
+  width: 24px;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+
+label,
+select,
+button,
+input[type="button"],
+input[type="reset"],
+input[type="submit"],
+input[type="radio"],
+input[type="checkbox"] {
+  cursor: pointer; }
+
+label,
+select,
+button,
+input[type="button"],
+input[type="reset"],
+input[type="submit"],
+input[type="radio"],
+input[type="checkbox"] {
+  cursor: pointer; }
+
+input[type=search] {
+  -webkit-appearance: textfield; }
+
+input[type=search]:-webkit-search-cancel-button,
+input[type=search]:-webkit-search-decoration {
+  -webkit-appearance: none; }
+
+
+
+  [class*="icon-primary-"],
+  .nav-links a:after,
+  .bellyband-link a:after,
+  .breadcrumb > li:after,
+  .checkbox input:checked + .skin:after,
+  .checkbox input.indeterminate + .skin:after,
+  .checkbox input:indeterminate + .skin:after,
+  .selectWrap.large:before,
+  .form-row.error .error-msg:before,
+  .close:before,
+  .reset-field:before,
+  .cssIcon-globe:before,
+  .selectWrap:after {
+    color: #0568ae;
+    left: 6px;
+    top: -3px;
+    width: 2px;
+    height: 3px;
+    border: solid white;
+    border-width: 0 3px 3px 0;
+    -webkit-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    transform: rotate(45deg);}
+
+  [class*="icoWeather-"], [class*="icoTrans-"], [class*="icoBubble-"], [class*="icoRetail-"], [class*="icoPeople-"], [class*="icoNumslets-"], [class*="icoLocation-"], [class*="icoHealthcare-"], [class*="icoDocuments-"], [class*="icoDevices-"], [class*="icoDatanetwork-"], [class*="icoControls-"], [class*="icoBuilding-"], [class*="icoArrows-"] {
+    color: #0568ae;
+    display: inline-block;
+    font-style: normal;
+    font-size: 20px;
+    font-weight: normal;
+    font-variant: normal;
+    font-style: normal;
+    width: 20px;
+    text-transform: none;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    position: relative;
+    speak: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    vertical-align: middle; }
+
+  [class*="icon-primary-"]:before,
+  [class*="icon-primary-"]:after {
+    box-sizing: border-box;
+    display: inline-block;
+    font-size: 1em;
+    height: 1em;
+    position: relative;
+    top: 0;
+    left: 0;
+    vertical-align: middle;
+    width: 1em; }
+
+
+.checkbox {
+  position: relative;
+  min-height: 24px;
+  font-family: "Omnes-ECOMP-W02", Arial;
+  font-size: 1rem;
+   }
+  .checkbox input {
+    -webkit-tap-highlight-color: transparent;
+    height: 20px;
+    margin-left: 20px;
+    opacity: 0;
+    outline: none;
+    position: absolute;
+    left: 1px;
+    top: 1px;
+    width: 10px; }
+    .checkbox input:focus + .skin {
+      border-color: #0568ae; }
+      .checkbox input:focus + .skin:before {
+        content: "";
+        height: 34px;
+        left: -6px;
+        top: -6px;
+        outline: 1px dotted #000000;
+        position: absolute;
+        width: 34px; }
+    .checkbox input:checked:not(:disabled) + .skin {
+      background-color: #0568ae;
+      border-color: #0568ae; }
+    .checkbox input:checked:disabled + .skin:after {
+      color: #5A5A5A; }
+    .checkbox input:checked + .skin:after {
+      height: 20px;
+      width: 10px;
+      background-color: transparent;
+      font-size: 23.4px;
+      color: #FFFFFF;
+      line-height: 21px; }
+    .checkbox input:disabled + .skin {
+      cursor: not-allowed;
+      background-color: #d2d2d2;
+      border-color: #d2d2d2;
+      color: #666666; }
+      .checkbox input:disabled + .skin + span {
+        cursor: not-allowed;
+        color: #666666; }
+    .checkbox input:invalid + .skin {
+      border: solid 1px #cf2a2a; }
+    .checkbox input:indeterminate + .skin:after {
+      background-color: transparent;
+      font-size: 25px;
+      color: #0574ac;
+      content: "\e920"; }
+  .checkbox .skin {
+    background-color: #fff;
+    border: 1px solid #d2d2d2;
+    border-radius: 3px;
+    display: inline-block;
+    height: 24px;
+    width: 24px;
+    position: absolute;
+    left: 0;
+    top: 0; }
+  .checkbox span {
+    display: inline-block;
+    margin-left: 34px;
+    margin-top: 0;
+    position: relative;
+    top: 3px; }
+  .checkbox label {
+    font-size: 1.6rem;
+    font-family: "Omnes-ECOMP-W02", Arial; }
+  .checkbox input {
+    z-index: 9999; }
+  .checkbox input.indeterminate + .skin:after {
+    font-size: 22px;
+    color: #0568ae; }
+  .b2b-tree-checkbox a > span.nodeIcon.end {
+    margin-top: 10px; }
+.b2b-tree-checkbox a:only-child {
+  color: #0574ac; }
+  .b2b-tree-checkbox a:only-child > span.nodeIcon {
+    left: -11px;
+    border-radius: 50%;
+    line-height: 7px;
+    top: 0; }
+    .b2b-tree-checkbox a:only-child > span.nodeIcon > i {
+      background-color: inherit;
+      background: #fff; }
+.b2b-tree-checkbox a > span.nodeIcon > i.icon-primary-circle {
+  background-color: inherit;
+  background: #fff;
+  font-size: 5px; }
+.b2b-tree-checkbox ul li:first-child > a:only-child > span {
+  left: -11px;
+  border-radius: 50%;
+  line-height: 12px;
+  top: 0px; }
+.b2b-tree-checkbox ul li:first-child > a:only-child > span.end {
+  margin-top: 0px; }
+.b2b-tree-checkbox ul li:first-child > a:only-child > span i.icon-primary-circle {
+  top: 8px; }
+.b2b-tree-checkbox ul li:last-child > a:only-child > span {
+  height: 34px;
+  background-color: #fff; }
+.b2b-tree-checkbox li a + ul {
+  height: 0;
+  overflow: hidden; }
+.b2b-tree-checkbox li a.active + ul {
+  height: auto; }
+.b2b-tree-checkbox li a.grp {
+  font-family: "Omnes-ECOMP-W02-Italic", Arial; }
+.b2b-tree-checkbox span.end {
+  left: -6px !important; }
+.b2b-tree-checkbox .checkbox {
+  margin-bottom: 0px;
+  margin-top: 2px;
+  font-size: 14px; }
+  .b2b-tree-checkbox .checkbox input:indeterminate + .skin:after {
+    content: "\2014";
+    padding-left: 2px;
+    font-family: inherit !important;
+    line-height: inherit !important; }
+
+  .b2b-pane-selector-wrapper .pane-container .panes div.pane-block .form-row .checkbox-selectall {
+    margin: 0px 0 0 24px !important; }
+
+.filter-container .checkbox .icon-primary-spinner {
+  height: 24px;
+  position: absolute;
+  width: 24px; }
+
+
+textarea {
+  display: block;
+  width: 400px;
+  max-width: 50%;
+  padding: 15px;
+}
+select {
+  margin-right: -1;
+  max-width: 400px;
+  height: 36px;
+  line-height: 25px;
+  width: 400px;
+  background-color: #95959521; }
+
+.selectWrap.disabled .icon-primary-down {
+  color: #d6d6d6; }
+
+.selectWrap.disabled input.awd-select {
+  z-index: 0;
+  padding: 10px 45px 10px 15px;
+  text-indent: 0; }
+
+.selectWrap.disabled button.awd-select {
+  z-index: 0;
+  text-indent: 15px; }
+
+.selectWrap.disabled:after {
+  color: #5A5A5A;
+  cursor: not-allowed; }
+
+input.awd-select {
+  background-color: transparent;
+  border: 1px solid #d2d2d2;
+  border-radius: 6px;
+  box-shadow: 1px 5px 2px -5px rgba(0, 0, 0, 0.15);
+  color: #333333;
+  display: block;
+  font-family: "Omnes-ECOMP-W02", Arial;
+  height: 36px;
+  line-height: 0;
+  margin-bottom: 0;
+  position: relative;
+  text-align: left;
+  top: 0;
+  width: 100%;
+  z-index: 10;
+  padding: 12px 45px 8px 15px;
+  user-select: none; }
+  input.awd-select:focus {
+    border-color: #0568ae !important;
+    text-overflow: ellipsis;
+    padding-right: 45px; }
+
+button.awd-select {
+  background-color: transparent;
+  border: 1px solid #d2d2d2;
+  border-radius: 6px;
+  box-shadow: 1px 5px 2px -5px rgba(0, 0, 0, 0.15);
+  color: #333333;
+  display: block;
+  font-family: "Omnes-ECOMP-W02", Arial;
+  height: 36px;
+  line-height: 36px;
+  margin-bottom: 0;
+  position: relative;
+  text-align: left;
+  top: 0;
+  width: 100%;
+  z-index: 10; }
+  button.awd-select:not(.large) {
+    text-indent: 15px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: clip;
+    text-overflow: ellipsis; }
+  button.awd-select img {
+    height: 26px;
+    margin-right: 7px;
+    margin-top: -10px;
+    position: relative;
+    top: 2px;
+    vertical-align: text-bottom; }
+  button.awd-select:focus {
+    border-color: #0568ae !important; }
+  button.awd-select i {
+    font-size: 23px;
+    position: absolute;
+    right: 33px;
+    top: 5px;
+    z-index: 1000; }
+
+button.awd-select.large {
+  align-items: center;
+  display: flex;
+  height: 60px;
+  line-height: 20px;
+  overflow: hidden;
+  padding-left: 70px;
+  vertical-align: middle; }
+  button.awd-select.large img {
+    height: 40px;
+    left: 20px;
+    position: absolute;
+    top: 20px;
+    width: 40px; }
+
+.selectWrap.large {
+  height: 60px; }
+  .selectWrap.large .awd-select-list-item {
+    align-items: center;
+    display: flex;
+    height: 60px;
+    line-height: 20px;
+    overflow: hidden;
+    padding-left: 70px;
+    vertical-align: middle; }
+    .selectWrap.large .awd-select-list-item img {
+      height: 40px;
+      left: 20px;
+      position: absolute;
+      top: 20px;
+      width: 40px;
+      top: 10px; }
+
+      .inputWrap {
+  border-radius: 6px;
+  position: relative;
+  height: 36px;
+  line-height: 44px;
+  display: block;
+  margin: 0;
+  }
+
+button.awd-select.active {
+  border-radius: 6px 6px 0 0; }
+  button.awd-select.active:focus {
+    border-color: #d2d2d2 !important; }
+
+input.awd-select.active {
+  border-radius: 6px 6px 0 0; }
+  input.awd-select.active:focus {
+    border-color: #d2d2d2 !important; }
+
+.selectWrapper {
+  position: relative; }
+
+span.selectWrap input[readonly]:focus {
+  color: transparent;
+  text-shadow: 0 0 0 #000; }
+
+.isIE.ds2-no-colors .awd-select:focus {
+  outline: 1px dashed transparent; }
+
+.awd-select-list {
+  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15);
+  border-radius: 0 0 6px 6px;
+  position: absolute;
+  border: 1px solid #d2d2d2;
+  border-top: 0;
+  padding: 0;
+  background-color: #f2f2f2;
+  z-index: 1000;
+  width: 100%;
+  max-height: 320px;
+  overflow-y: auto; }
+
+.awd-select-list-item {
+  cursor: pointer;
+  height: 100%;
+  min-height: 36px;
+  line-height: 20px;
+  overflow: hidden;
+  padding: 8px 15px;
+  position: relative;
+  z-index: 1000; }
+  .awd-select-list-item:hover {
+    cursor: pointer;
+    background-color: #d2d2d2;
+    outline: 1px dashed transparent; }
+  .awd-select-list-item:focus {
+    cursor: pointer;
+    background-color: #d2d2d2;
+    outline: 1px dashed transparent; }
+  .awd-select-list-item img {
+    margin-top: 0;
+    margin-right: 7px;
+    height: 26px;
+    width: 26px; }
+
+.selectWrap {
+  border-radius: 6px;
+  position: relative;
+  height: 36px;
+  line-height: 28px;
+  display: block;
+  margin: 0;
+  background: linear-gradient(to bottom, #fcfcfc 0%, #f2f2f2 100%);
+  background: -webkit-linear-gradient(top, #fcfcfc 0%, #f2f2f2 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="@att-gray-highlight", endColorstr="@att-functional-bg-gray", GradientType=0); }
+  .selectWrap:not(.large) .awd-select-list-item:first-child {
+    margin-top: 15px; }
+  .selectWrap:not(.large) .awd-select-list-item:last-child {
+    margin-bottom: 15px; }
+  .selectWrap .icon-primary-down {
+    font-size: 23px;
+    margin-top: -11px;
+    position: absolute;
+    right: 4px;
+    top: 50%; }
+  .selectWrap + [aria-expanded="true"] {
+    padding-bottom: 9px;
+    padding-top: 20px; }
+
+.awd-select-list-item[data-hover="true"] {
+  background-color: #d2d2d2; }
+
+span input.awd-select {
+  width: 100%;
+  cursor: pointer;
+  text-overflow: ellipsis;
+  padding-right: 45px; }
+
+li.optgroup-wrapper {
+  font-family: "Omnes-ECOMP-W02-Medium", Arial;
+  cursor: default !important;
+  padding: 0px 15px; }
+  li.optgroup-wrapper:first-child {
+    padding-top: 10px; }
+  li.optgroup-wrapper:hover {
+    background-color: #f2f2f2; }
+
+ul.optgroup {
+  font-family: "Omnes-ECOMP-W02", Arial;
+  cursor: pointer !important;
+  margin: 0 -15px; }
+  ul.optgroup li {
+    padding: 0 0 0 33px; }
+
+label + .selectWrap {
+  margin-top: 4px; }
+
+.selectorModule {
+  border-radius: 6px;
+  position: relative;
+  height: 36px;
+  line-height: 28px;
+  display: block;
+  margin: 0;
+  background: linear-gradient(to bottom, #fcfcfc 0%, #f2f2f2 100%);
+  background: -webkit-linear-gradient(top, #fcfcfc 0%, #f2f2f2 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="@att-gray-highlight", endColorstr="@att-functional-bg-gray", GradientType=0); }
+
+.group .selectWrap {
+  margin: 0 0 10px 0; }
+
+select.awd-select {
+  position: relative;
+  top: 0;
+  left: 0;
+  font-size: 16px;
+  z-index: 1010;
+  height: 33px;
+  min-width: 100%;
+  opacity: 0.01; }
+  select.awd-select > optgroup {
+    padding-left: 8px;
+    font-style: normal;
+    margin-top: 10px; }
+    select.awd-select > optgroup:first-child {
+      margin-top: 0; }
+    select.awd-select > optgroup > option {
+      padding-left: 8px; }
+  select.awd-select > option {
+    padding-left: 8px; }
+  select.awd-select + span {
+    background: linear-gradient(to bottom, #fcfcfc 0%, #f2f2f2 100%);
+    background: -webkit-linear-gradient(top, #fcfcfc 0%, #f2f2f2 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="@att-gray-highlight", endColorstr="@att-functional-bg-gray", GradientType=0);
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 0;
+    display: block;
+    border: 1px solid #d2d2d2;
+    border-radius: 6px;
+    height: 35px;
+    line-height: 0;
+    padding: 18px 45px 15px 15px;
+    width: 100%;
+    font-size: 1.6rem;
+    padding-right: 45px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis; }
+    select.awd-select + span > i {
+      font-size: 23px;
+      position: absolute;
+      right: 33px;
+      top: 5px;
+      z-index: 1000; }
+      select.awd-select + span > i:before {
+        left: 1px;
+        position: absolute;
+        top: -1px; }
+  select.awd-select:focus + span {
+    border-color: #0568ae; }
+
+.isIE select.awd-select + span {
+  line-height: 1; }
+
+[data-default-option="true"] {
+  color: #767676 !important;
+  font-family: "Omnes-ECOMP-W02-Italic", Arial; }
+
+.placeholdercolor {
+  color: #767676 !important;
+  font-family: "Omnes-ECOMP-W02-Italic", Arial; }
+
+.filterTank button.awd-select {
+  border-color: #d2d2d2;
+  background-color: #333333;
+  color: #FFFFFF;
+  color: #333333; }
+  .filterTank button.awd-select:after {
+    background-color: #FFFFFF !important;
+    border-color: #d2d2d2; }
+
+.utility-bg button.awd-select {
+  border-color: #d2d2d2;
+  background-color: #333333;
+  color: #FFFFFF;
+  color: #333333; }
+  .utility-bg button.awd-select:after {
+    background-color: #FFFFFF !important;
+    border-color: #d2d2d2; }
+
+.utility-bg select.awd-select + span {
+  border-color: #d2d2d2;
+  border-color: #d2d2d2;
+  background-color: #333333;
+  background-color: #333333;
+  color: #FFFFFF;
+  color: #FFFFFF; }
+  .utility-bg select.awd-select + span:after {
+    background-color: #FFFFFF !important;
+    background-color: #FFFFFF !important;
+    border-color: #d2d2d2;
+    border-color: #d2d2d2; }
+
+.utility-bg select.awd-select:focus + span {
+  border-color: #d2d2d2;
+  border-color: #d2d2d2;
+  background-color: #333333;
+  background-color: #333333;
+  color: #FFFFFF;
+  color: #FFFFFF; }
+  .utility-bg select.awd-select:focus + span:after {
+    background-color: #FFFFFF !important;
+    background-color: #FFFFFF !important;
+    border-color: #d2d2d2;
+    border-color: #d2d2d2; }
+
+.utility-bg select.awd-select:hover + span {
+  border-color: #d2d2d2;
+  border-color: #d2d2d2;
+  background-color: #333333;
+  background-color: #333333;
+  color: #FFFFFF;
+  color: #FFFFFF; }
+  .utility-bg select.awd-select:hover + span:after {
+    background-color: #FFFFFF !important;
+    background-color: #FFFFFF !important;
+    border-color: #d2d2d2;
+    border-color: #d2d2d2; }
+
+input.awd-select[disabled] {
+  cursor: not-allowed;
+  border-color: #d2d2d2;
+  background-color: #d2d2d2;
+  background-image: none;
+  color: #5A5A5A; }
+  input.awd-select[disabled] + span {
+    cursor: not-allowed;
+    border-color: #d2d2d2;
+    background-color: #d2d2d2;
+    background-image: none;
+    color: #5A5A5A; }
+
+button.awd-select[disabled] {
+  cursor: not-allowed;
+  border-color: #d2d2d2;
+  background-color: #d2d2d2;
+  background-image: none;
+  color: #5A5A5A; }
+  button.awd-select[disabled]:after {
+    background-color: #d2d2d2 !important;
+    border-color: #d2d2d2; }
+
+select.awd-select[disabled] + span {
+  cursor: not-allowed;
+  border-color: #d2d2d2;
+  background-color: #d2d2d2;
+  background-image: none;
+  color: #5A5A5A; }
+  select.awd-select[disabled] + span:after {
+    background-color: #d2d2d2 !important;
+    border-color: #d2d2d2; }
+
+select.awd-select[disabled]:focus + span {
+  cursor: not-allowed;
+  border-color: #d2d2d2;
+  background-color: #d2d2d2;
+  background-image: none;
+  color: #5A5A5A; }
+
+select.awd-select[disabled]:hover + span {
+  cursor: not-allowed;
+  border-color: #d2d2d2;
+  background-color: #d2d2d2;
+  background-image: none;
+  color: #5A5A5A; }
+
+input.awd-select[disabled="disabled"] {
+  cursor: not-allowed;
+  border-color: #d2d2d2;
+  background-color: #d2d2d2;
+  background-image: none;
+  color: #5A5A5A; }
+  input.awd-select[disabled="disabled"] + span {
+    cursor: not-allowed;
+    border-color: #d2d2d2;
+    background-color: #d2d2d2;
+    background-image: none;
+    color: #5A5A5A; }
+
+select.awd-select[disabled="disabled"] + span {
+  cursor: not-allowed;
+  border-color: #d2d2d2;
+  background-color: #d2d2d2;
+  background-image: none;
+  color: #5A5A5A; }
+  select.awd-select[disabled="disabled"] + span:after {
+    background-color: #d2d2d2 !important;
+    border-color: #d2d2d2; }
+
+select.awd-select[disabled="disabled"]:focus + span {
+  cursor: not-allowed;
+  border-color: #d2d2d2;
+  background-color: #d2d2d2;
+  background-image: none;
+  color: #5A5A5A; }
+  select.awd-select[disabled="disabled"]:focus + span:after {
+    background-color: #d2d2d2 !important;
+    border-color: #d2d2d2; }
+
+select.awd-select[disabled="disabled"]:hover + span {
+  cursor: not-allowed;
+  border-color: #d2d2d2;
+  background-color: #d2d2d2;
+  background-image: none;
+  color: #5A5A5A; }
+  select.awd-select[disabled="disabled"]:hover + span:after {
+    background-color: #d2d2d2 !important;
+    border-color: #d2d2d2; }
+
+.ddexpand-wrapper > h2 {
+  margin-bottom: 11px; }
+  .ddexpand-wrapper > h2 + p {
+    margin-bottom: 4px; }
+
+.ddexpand-wrapper .selectWrap + [aria-expanded="true"] .form-row {
+  margin-top: 11px; }
+
+.ddexpand-wrapper .selectWrap + [aria-expanded="true"] .row + .row .form-row {
+  margin-top: 14px; }
+
+.modal .awd-select-list {
+  z-index: 1060 !important; }
+
+.form-row.error button.awd-select.active:focus {
+  border-color: #cf2a2a !important; }
+
+.form-row.error input.awd-select.active:focus {
+  border-color: #cf2a2a !important; }
+
+.awd-module-list .module-list-item[aria-selected="true"] {
+  background-color: #f2f2f2; }
+
+li.module-list-item[aria-selected="true"]:before {
+  color: #0568ae;
+  display: inline-block;
+  font-family: "icoControls" !important;
+  font-style: normal;
+  font-size: 20px;
+  font-weight: normal;
+  font-variant: normal;
+  height: 1em;
+  margin-right: 7px;
+  text-transform: none;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  position: relative;
+  speak: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  vertical-align: middle;
+  width: 1em;
+  content: "\e907";
+  box-sizing: border-box;
+  display: inline-block;
+  font-size: 2em;
+  height: 1em;
+  position: absolute;
+  top: 20px;
+  right: 0px;
+  vertical-align: middle;
+  width: 1em;
+  color: #007a3e; }
+
+@media (min-width: 768px) {
+  span[class*="large"] {
+    max-width: 370px; }
+  .large {
+    max-width: 370px; } }
+
+@media (max-width: 767px) {
+  .selectWrap.large:after {
+    right: 5px; }
+  .selectWrap.large .awd-select-list-item {
+    padding-right: 41px; }
+  .selectWrap + div > h4 {
+    margin-bottom: 0;
+    font-size: 16px; } }
+input.awd-select {
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
+  user-select: text; }
+
+.checkbox .skin {
+  background-color: #fff;
+  border: 1px solid #d2d2d2;
+  border-radius: 3px;
+  display: inline-block;
+  height: 24px;
+  width: 24px;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+i, em {
+  font-family: "Omnes-ECOMP-W02-Italic", Arial;
+  font-style: normal;
+}
+
+
+
+.card{
+  border-radius: 5px;
+}
+
+.card-header{
+  height: 50px;
+}
+
+.card-body{
+  height: 150px;
+}
+
+.card-footer{
+  height: 50px;
+}
+
+.dialog__close-btn {
+  border: 0;
+  background: #087ac2;
+  color: #ffffff;
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  font-size: 1.2em;
+  display: block;
+  border: #087ac2 2px solid;
+}
+
+.modalTitle{
+    font-size: 35px;
+}
+
+
+.full-width-table {
+  width: 100%;
+}
+
+
+.app-data-table {
+  margin-top: 35px;
+}
+
+.app-data-table-fixed-height {
+  overflow: scroll;
+  width: 100%;
+  max-height: 750px;
+}
+
+th{
+  background-color: #2125299c;
+  color: rgb(255, 255, 255);
+  font-size: 15px;
+  border-radius: 2px;
+  height: 35px;
+}
+
+tr:nth-child(even) {
+  background-color: #dddddd;
+  font-size: 2px;
+  height: 35px;
+  border-radius: 4px;
+
+}
+
+tr:nth-child(odd) {
+  font-size: 2px;
+  height: 35px;
+  border-radius: 4px;
+}
+
+
+.card{
+  border-radius: 10px;
+
+}
+
+.card-header{
+  height: 80px;
+}
+
+.card-body{
+  height: 150px;
+}
+
+.card-footer{
+  height: 55px;
+  margin-right: 10px;
+}
+
+.dialog__close-btn {
+  border: 0;
+  background: #087ac2;
+  color: #ffffff;
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  font-size: 1em;
+  display: block;
+  border: #087ac2 2px solid;
+}
+
+.modalTitle{
+    font-size: 35px;
+}
+
+label {
+  float: left;
+  width: 24em;
+  margin-right: 2em;
+  text-align: right;
+}
+
+
+.btn-alt {
+  border-color: #087ac2 transparent #0568ae;
+  background-color: #0568ae;
+  background: linear-gradient(to bottom, #087ac2 0%, #0568ae 100%);
+  color: #ffffff; }
+  .btn-alt:hover {
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #0568ae 0%, #087ac2 100%); }
+  .btn-alt:focus {
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #0568ae 0%, #087ac2 100%); }
+  .btn-alt:active {
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #0568ae 0%, #087ac2 100%); }
+
+
+a.btn {
+  vertical-align: middle; }
+  a.btn:hover {
+    text-decoration: none; }
+
+.field-group + .btn {
+  margin-left: 20px; }
+
+.btn-primary {
+  border-color: #ea7400 transparent #d16500;
+  background-color: #ea7400 transparent #d16500;
+  background: linear-gradient(to bottom, #ea7400 0%, #d16500 100%);
+  color: #ffffff;
+  font-family: "Omnes-ECOMP-W02", Arial;
+  font-weight: bold; }
+  .btn-primary:hover {
+    text-decoration: none;
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #d16500 0%, #ea7400 100%); }
+  .btn-primary:focus {
+    text-decoration: none;
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #d16500 0%, #ea7400 100%); }
+  .btn-primary:active {
+    text-decoration: none;
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #d16500 0%, #ea7400 100%); }
+
+.btn-arrow {
+  font-family: "Omnes-ECOMP-W02", Arial;
+  font-size: 1.6rem;
+  font-weight: normal;
+  background-color: transparent;
+  border: none;
+  padding: 5px 0 0;
+  top: -4px;
+  color: #333333;
+  position: relative; }
+  .btn-arrow:hover {
+    text-decoration: underline; }
+    .btn-arrow:hover .btn-primary {
+      text-decoration: none;
+      color: #ffffff;
+      outline-color: #ffffff !important;
+      background: linear-gradient(to bottom, #d16500 0%, #ea7400 100%); }
+    .btn-arrow:hover .btn-secondary {
+      color: #0568ae;
+      outline-color: #000000 !important;
+      background: linear-gradient(to bottom, #f2f2f2 0%, #fcfcfc 100%); }
+    .btn-arrow:hover .btn-alt {
+      color: #ffffff;
+      outline-color: #ffffff !important;
+      background: linear-gradient(to bottom, #087ac2 0%, #0568ae 100%); }
+    .btn-arrow:hover .btn-specialty {
+      color: #ffffff;
+      outline-color: #ffffff !important;
+      background: linear-gradient(to bottom, #007a3e 0%, #008744 100%); }
+  .btn-arrow:focus {
+    text-decoration: underline;
+    outline: 1px dotted #666; }
+    .btn-arrow:focus .btn-primary {
+      text-decoration: none;
+      color: #ffffff;
+      outline-color: #ffffff !important;
+      background: linear-gradient(to bottom, #d16500 0%, #ea7400 100%); }
+    .btn-arrow:focus .btn-secondary {
+      color: #0568ae;
+      outline-color: #000000 !important;
+      background: linear-gradient(to bottom, #f2f2f2 0%, #fcfcfc 100%); }
+    .btn-arrow:focus .btn-alt {
+      color: #ffffff;
+      outline-color: #ffffff !important;
+      background: linear-gradient(to bottom, #087ac2 0%, #0568ae 100%); }
+    .btn-arrow:focus .btn-specialty {
+      color: #ffffff;
+      outline-color: #ffffff !important;
+      background: linear-gradient(to bottom, #007a3e 0%, #008744 100%); }
+  .btn-arrow:active .btn-primary {
+    text-decoration: none;
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #d16500 0%, #ea7400 100%); }
+  .btn-arrow:active .btn-secondary {
+    color: #0568ae;
+    outline-color: #000000 !important;
+    background: linear-gradient(to bottom, #f2f2f2 0%, #fcfcfc 100%); }
+  .btn-arrow:active .btn-alt {
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #087ac2 0%, #0568ae 100%); }
+  .btn-arrow:active .btn-specialty {
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #007a3e 0%, #008744 100%); }
+  .btn-arrow .btn-alt {
+    border-color: #087ac2 transparent #0568ae;
+    background-color: #0568ae;
+    background: linear-gradient(to bottom, #087ac2 0%, #0568ae 100%);
+    color: #ffffff; }
+    .btn-arrow .btn-alt:hover {
+      color: #ffffff;
+      outline-color: #ffffff !important;
+      background: linear-gradient(to bottom, #0568ae 0%, #087ac2 100%); }
+    .btn-arrow .btn-alt:focus {
+      color: #ffffff;
+      outline-color: #ffffff !important;
+      background: linear-gradient(to bottom, #0568ae 0%, #087ac2 100%); }
+    .btn-arrow .btn-alt:active {
+      color: #ffffff;
+      outline-color: #ffffff !important;
+      background: linear-gradient(to bottom, #0568ae 0%, #087ac2 100%); }
+  .btn-arrow::-moz-focus-inner {
+    padding: 0;
+    border: 0; }
+  .btn-arrow .btn {
+    border: 1px solid transparent;
+    border-radius: 100%;
+    height: 36px;
+    margin-bottom: 0;
+    margin-right: 7px;
+    max-width: 36px;
+    min-width: 20px;
+    padding: 0;
+    margin-top: -4px;
+    vertical-align: middle;
+    width: 36px; }
+    .btn-arrow .btn .icon-primary-left {
+      bottom: 0;
+      display: block;
+      height: 100%;
+      left: 0;
+      line-height: 0;
+      position: absolute;
+      right: 0;
+      text-indent: 0;
+      top: 0; }
+      .btn-arrow .btn .icon-primary-left:before {
+        position: absolute;
+        font-size: 1.6rem;
+        left: 1px;
+        top: 9px; }
+    .btn-arrow .btn .icon-primary-right {
+      bottom: 0;
+      display: block;
+      height: 100%;
+      left: 0;
+      line-height: 0;
+      position: absolute;
+      right: 0;
+      text-indent: 0;
+      top: 0;
+      color: #ffffff; }
+      .btn-arrow .btn .icon-primary-right:before {
+        position: absolute;
+        font-size: 1.6rem;
+        left: 17px;
+        top: 9px; }
+  .btn-arrow .btn.btn-primary .icon-primary-left {
+    color: #fff; }
+  .btn-arrow .btn.btn-primary .icon-primary-right {
+    color: #fff; }
+  .btn-arrow .btn.btn-alt .icon-primary-left {
+    color: #fff; }
+  .btn-arrow .btn.btn-alt .icon-primary-right {
+    color: #fff; }
+  .btn-arrow .btn.btn-secondary {
+    border: 1px solid #d2d2d2; }
+    .btn-arrow .btn.btn-secondary .icon-primary-left {
+      color: #0568ae; }
+    .btn-arrow .btn.btn-secondary .icon-primary-right {
+      color: #0568ae; }
+  .btn-arrow .btn.btn-small {
+    height: 20px;
+    max-width: 20px;
+    min-width: 20px;
+    width: 20px;
+    top: -1px; }
+    .btn-arrow .btn.btn-small .icon-primary-left:before {
+      font-size: 5px;
+      top: 4px;
+      left: 0; }
+    .btn-arrow .btn.btn-small .icon-primary-right:before {
+      font-size: 5px;
+      top: 4px;
+      left: 10px; }
+  .btn-arrow .btn.btn-large .icon-primary-left:before {
+    font-size: 112%;
+    top: 12px;
+    left: 23px; }
+  .btn-arrow .btn.btn-large .icon-primary-right:before {
+    font-size: 112%;
+    top: 12px;
+    left: 23px; }
+
+.btn-secondary {
+  border: 1px solid #d2d2d2;
+  background-color: #f2f2f2;
+  background: linear-gradient(to bottom, #fcfcfc 0%, #f2f2f2 100%);
+  color: #0568ae;
+  box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.15);
+  padding: 14px 18px 11px 17px; }
+  .btn-secondary:hover {
+    color: #0568ae;
+    outline-color: #000000 !important;
+    background: linear-gradient(to bottom, #f2f2f2 0%, #fcfcfc 100%); }
+  .btn-secondary:focus {
+    color: #0568ae;
+    outline-color: #000000 !important;
+    background: linear-gradient(to bottom, #f2f2f2 0%, #fcfcfc 100%); }
+  .btn-secondary:active {
+    color: #0568ae;
+    outline-color: #000000 !important;
+    background: linear-gradient(to bottom, #f2f2f2 0%, #fcfcfc 100%); }
+
+.btn-alt {
+  border-color: #087ac2 transparent #0568ae;
+  background-color: #0568ae;
+  background: linear-gradient(to bottom, #087ac2 0%, #0568ae 100%);
+  color: #ffffff; }
+  .btn-alt:hover {
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #0568ae 0%, #087ac2 100%); }
+  .btn-alt:focus {
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #0568ae 0%, #087ac2 100%); }
+  .btn-alt:active {
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #0568ae 0%, #087ac2 100%); }
+
+.btn-specialty {
+  border-color: #008744 transparent #007a3e;
+  background-color: #007a3e;
+  background: linear-gradient(to bottom, #008744 0%, #007a3e 100%);
+  color: #ffffff; }
+  .btn-specialty:hover {
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #007a3e 0%, #008744 100%); }
+  .btn-specialty:focus {
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #007a3e 0%, #008744 100%); }
+  .btn-specialty:active {
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #007a3e 0%, #008744 100%); }
+
+.btn-clear {
+  background: transparent !important;
+  border-color: transparent !important;
+  font-weight: normal;
+  font-family: "Omnes-ECOMP-W02", Arial;
+  box-shadow: none;
+  text-decoration: none;
+  color: #0568ae; }
+  .btn-clear:focus {
+    text-decoration: underline; }
+  .btn-clear:hover {
+    text-decoration: underline; }
+
+.downloadImg{
+    height: 25px ;
+    width: 25px;
+}
+
+#reportTableSize{
+    width: 99%;
+    max-height: 750px;
+}
+
+ .gridster-color {
+        background: rgba(94, 94, 94, 0.7);
+    }
+    
+    
+.download-div{
+  width: 20%;
+  float: left;
+  height: 30px;
+}
+
+.pagination-div{
+width: 60%;
+float: right;
+height: 30px;
+}
+
+.download-title{
+padding-right: 10px;
+font-size: 14px;
+font-family: Roboto, "Helvetica Neue", sans-serif;
+color: rgba(0, 0, 0, 0.54);
+}
+
+.filter-div{
+  height: 30px;
+  width: 20%;
+  float: left;
+}
+
+.btn-back {
+    padding-bottom: 5px;
+    font-size: 15px;}
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-report.component.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-report.component.html
new file mode 100644
index 00000000..6b3836e9
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-report.component.html
@@ -0,0 +1,127 @@
+<span *ngIf="showSpinner" class="ecomp-spinner"></span>
+
+<span *ngIf="showUploadSpinner" class="ecomp-spinner"></span>
+
+<div *ngIf="showDashboardReport">
+    <span *ngIf="download_in_progress" class="ecomp-small-spinner"></span>
+    Download:
+    <a *ngIf = "isDashboardExcelReadyToDownload" [routerLink]=""><img class="downloadImg"  (click)="downloadReport('application/vnd.ms-excel', 'xls')"
+                            placement="top" ngbTooltip="Download Dashboard Report"
+                            src="assets/images/xlsx.png"></a>&nbsp;
+
+    <gridster class="gridster-color"[options]="options">
+        <gridster-item *ngFor="let item of dashboard" [item]="item">
+            <div *ngIf="item.hasContent" class="gridster-item-content">
+                <div>
+                    <a (click)="takeToReport(queryString, item.hasContent.id.split('#')[1])"
+                       [routerLink]="">{{item.hasContent.name}}</a>
+                       <div style="height: 6px;"></div>
+                    <app-run-dashboard-report [hitCnt]="hitCnt" [queryString]="queryString"
+                                              [reportId]="item.hasContent.id.split('#')[1]"
+                                              [reportType]="item.hasContent.id.split('#')[0]"
+                                              [parentId]="inputReportId">
+                    </app-run-dashboard-report>
+                </div>
+            </div>
+        </gridster-item>
+    </gridster>
+    <div *ngIf="error == true">
+        <h1>Error Message:</h1>
+        <p>{{errorMessage}}</p>
+        <br/>
+        <h1>Stack Trace:</h1>
+        <p>{{stackTrace}}</p>
+    </div>
+</div>
+<span *ngIf="download_in_progress" class="ecomp-small-spinner"></span>
+<div *ngIf="!showDashboardReport">
+    <div *ngIf="error == false" [hidden]="isChartAvailable == false" align="center">
+        <iframe #iframe height="500" style="border: none" width="70%"></iframe>
+    </div>
+
+    <div>
+        <div class="field-group">
+
+            <div class="filter-div" >
+            <mat-form-field><input (keyup)="applyFilter($event.target.value)" matInput placeholder="Filter Report Data">
+            </mat-form-field>
+           </div>
+            <div class="download-div" >
+                <span class="download-title"> Download:</span>
+            <a [routerLink]=""><img class="downloadImg" (click)="downloadSinglePage('application/vnd.ms-excel', 'xls')" placement="top" ngbTooltip="Download Current Page"
+                                    src="assets/images/xlsx.png"></a>&nbsp;
+            <a [routerLink]=""><img class="downloadImg" (click)="downloadReport('application/vnd.ms-excel', 'xls')"  placement="top" ngbTooltip="Download Upto 65,000"
+                                    src="assets/images/xlsx.png"></a>&nbsp;
+                <a [routerLink]=""><img class="downloadImg" (click)="downloadReport('application/octet-stream', 'zip')"  placement="top" ngbTooltip="Download CSV Upto 750,000"
+                                        src="assets/images/csv.png" ></a>&nbsp;
+            <a [routerLink]=""><img class="downloadImg" (click)="downloadReport('application/pdf', 'pdf')"  placement="top" ngbTooltip="Download PDF"
+                                    src="assets/images/pdf.png" ></a>&nbsp;
+                <button *ngIf="showBackButton"  (click)="goBack()" class="btn btn-alt btn-back" >Back</button>
+            </div>
+            <div class="pagination-div">
+            <mat-paginator (page)="pageEvent = $event; onPaginationChange($event)" [length]="totalRecords"
+                           [pageSize]="pageSize" showFirstLastButtons></mat-paginator>
+             </div>
+        </div>
+        <div class="app-data-table-fixed-height" id="reportTableSize">
+            <table [dataSource]="dataSource" mat-table matSort>
+                <ng-container *ngFor="let keys of displayedColumns; let i = index">
+                    <ng-container matColumnDef="{{keys}}">
+                        <th *matHeaderCellDef align="center" mat-header-cell mat-sort-header>
+                            {{displayedColumnsArr[i].split(",")[0]}}</th>
+                        <td *matCellDef="let row" mat-cell [ngStyle]="setStyle(row[keys])">
+                            <div *ngIf="row[keys].split('|')[0] == 'linkToReport'">
+                                <a (click)="linkToReport(row[keys].split('|')[1], row[keys].split('|')[2])"
+                                   [routerLink]="">{{row[keys].split('|')[3]}}</a>
+                            </div>
+                            <div *ngIf="row[keys].split('|')[0] == 'linkToMail'"
+                                 >
+                                <a (click)="linkToMail(row[keys].split('|')[1])"
+                                   [routerLink]="">{{row[keys].split('|')[2]}}</a>
+                            </div>
+                            <div *ngIf="row[keys].split('|')[0] !== 'linkToReport' && row[keys].split('|')[0] !== 'linkToMail'">
+                                {{row[keys].split('|')[0]}}&nbsp;</div>
+                        </td>
+                        <td *matFooterCellDef align="center" mat-footer-cell>{{getDisplayTotal(keys)}}</td>
+                    </ng-container>
+                </ng-container>
+
+                <tr *matHeaderRowDef="displayedColumns; sticky: true;" mat-header-row></tr>
+                <tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
+                <tr *matFooterRowDef="displayedColumns; sticky: true;" mat-footer-row></tr>
+            </table>
+        </div>
+    </div>
+</div>
+<h6>Execution Time: {{timeTaken}} Seconds</h6>
+
+
+<style scoped>
+    :host ::ng-deep .mat-paginator-outer-container .mat-paginator-container{
+        min-height: 30px;
+        height: 30px;
+    }
+
+    :host ::ng-deep  .mat-form-field-appearance-legacy .mat-form-field-label {
+    font-size: 14px;
+  }
+
+  :host ::ng-deep  .mat-paginator, .mat-paginator-page-size .mat-select-trigger {
+        font-size: 14px;
+  }
+
+  :host ::ng-deep .mat-sort-header-arrow.ng-trigger.ng-trigger-arrowPosition {
+    color: black;
+    opacity: 0;
+}
+
+:host ::ng-deep .mat-sort-header-pointer-left.ng-trigger.ng-trigger-leftPointer {
+   transform: rotate(-45deg);
+   color: black;
+}
+:host ::ng-deep .mat-sort-header-pointer-right.ng-trigger.ng-trigger-rightPointer {
+   transform: rotate(45deg);
+   color: black;
+}
+
+</style>
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-report.component.spec.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-report.component.spec.ts
new file mode 100644
index 00000000..8c1d5260
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-report.component.spec.ts
@@ -0,0 +1,188 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule, MatTableDataSource } from '@angular/material/table';
+
+import { RunReportComponent, PeriodicElement } from './run-report.component';
+import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, SimpleChange, SimpleChanges } from '@angular/core';
+import { MatMenuModule } from '@angular/material';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { RunService } from '../run.service';
+import 'rxjs/add/observable/empty';
+import 'rxjs/add/observable/of';
+import { Observable } from 'rxjs';
+import {MatDialog, MatDialogModule} from '@angular/material';
+import {HttpCacheService} from '../../../shared/services/cache.service';
+
+describe('RunReportComponent', () => {
+  let component: RunReportComponent;
+  let fixture: ComponentFixture<RunReportComponent>;
+  const displayedColumnsArr1 = [];
+  const DashboardReportObj1 = [];
+  const trigger = ["a","b"];
+  let change : SimpleChanges;
+  let runService : RunService;
+  let httpCacheService : HttpCacheService;
+  let matDialog : MatDialog;
+  let options1 = {};
+  let dashboard; 
+  let dashboard2; 
+  let responseformfield = 1;
+  let environment = [
+    {
+      baseUrl: 'just a link'
+    }
+  ]
+
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
+      declarations: [ RunReportComponent ],
+      imports: [
+        NoopAnimationsModule,
+        MatPaginatorModule,
+        MatSortModule,
+        MatTableModule,
+        MatMenuModule,
+        HttpClientTestingModule,
+        RouterTestingModule,
+        MatDialogModule
+      ],
+      providers: [RunService, HttpCacheService, MatDialog]
+    }).compileComponents();
+    runService = TestBed.get(RunService);
+    httpCacheService = TestBed.get(HttpCacheService);
+    matDialog = TestBed.get(MatDialog);
+    //spyOn(runService, 'getReportDataWithFormFields').and.returnValue(Observable.of(environment));
+    //spyOn(runService, 'getReportData').and.returnValue(Observable.of(environment));
+    spyOn(runService, 'downloadReportExcel').and.returnValue(Observable.of(environment));
+  }));
+
+  beforeEach(() => {
+    //dashboard = {"item":{"hasContent":{"name":"rupi","id":"check#check"}}};
+    fixture = TestBed.createComponent(RunReportComponent);
+    runService = TestBed.get(RunService);
+    httpCacheService = TestBed.get(HttpCacheService);
+    matDialog = TestBed.get(MatDialog);
+
+    component = fixture.componentInstance;
+    component.DashboardReportObj = DashboardReportObj1;
+    component.displayedColumnsArr = displayedColumnsArr1;
+    component.TriggerFFArr = trigger;
+    component.options = options1;
+    component.dashboard = dashboard; 
+    component.responseFormFieldListLength = responseformfield;
+    //fixture.detectChanges();
+  });
+
+  it('should compile', () => {
+      expect(component).toBeTruthy(); 
+  });
+ 
+  it('should test the ngOnChanges second If condition', () => {    
+    component.queryString = "test"
+    component.runButtonHitCnt = 1;
+    component.initialQueryString = "abc";
+    component.initCounter = 4;
+    component.hitCnt = 2;
+    component.ngOnChanges(change);
+
+    expect(component.runButtonHitCnt).toEqual(component.hitCnt);
+    expect(component.initialQueryString).toEqual("test");
+    spyOn(component, 'initialProcesses');
+    spyOn(component, 'afterViewInitialProcesses');
+    component.initialProcesses();
+    component.afterViewInitialProcesses();
+
+    expect(component.initialProcesses).toHaveBeenCalled();
+    expect(component.afterViewInitialProcesses).toHaveBeenCalled();
+});
+
+  it('should test afterViewInitialProcesses method', () => {
+      component.DashboardReportObj.length = 0;
+      component.reportMode = "Regular";
+      component.initCnt = 0;
+      component.afterViewInitialProcesses();
+
+      expect(component.showMoreVert).toEqual(false);
+      expect(component.displayedColumnsArr).toEqual(new Array());
+      expect(component.displayedRowObj).toEqual(new Array());
+      expect(component.displayedColumns).toEqual(new Array());
+      expect(component.formFieldList).toEqual(new Array());
+      expect(component.showSpinner).toEqual(true);
+      expect(component.isReady).toEqual(false);
+      expect(component.NEWdisplayedColumns).toEqual(new Array());
+  });
+
+  it('should test showError method', () => {
+
+       const spy1 = spyOn((component as any).changeDetectorRefs, 'detectChanges');
+       component.showError();
+       expect(spy1).toHaveBeenCalled();
+       expect(component.showSpinner).toEqual(false);
+    });
+
+  it('should test linkToReport', () => {
+        component.linkToReport("test", "abc");
+  })
+
+  it('should test linkToMail', () => {
+    const spy1 = spyOn((component as any).changeDetectorRefs, 'detectChanges');
+    component.linkToMail("test");
+    expect(spy1).toHaveBeenCalled();
+  })
+
+  it('should test openOptions method', () => {
+        component.openOptions();
+        expect(component.openOptionsFlag).toEqual(component.openOptionsFlag);
+  });
+
+
+  it('should test applyFilter method', () => {
+      let filterValue = "test"
+      component.applyFilter(filterValue);
+      expect(component.dataSource.filter).toEqual(filterValue.trim().toLowerCase());
+  });
+
+   it('should test the ngOnChanges first If condition', () => {   
+    change = {};
+        component.reportMode !== "Regular"
+        component.initCnt = 1;
+        component.TriggerFFArr.length = 0;
+        component.ngOnChanges(change);
+        expect(component.showMoreVert).toEqual(false);
+        expect(component.initCnt).toEqual(1);
+        expect(component.showDashboardReport).toEqual(false);
+        expect(component.displayedRowObj).toEqual(new Array());
+        expect(component.displayedColumns).toEqual(new Array());
+        expect(component.formFieldList).toEqual(new Array());
+        expect(component.showSpinner).toEqual(true);
+        expect(component.NEWdisplayedColumns).toEqual(new Array());
+        expect(component.isReady).toEqual(false);
+  });
+
+   it('should test initialProcess method', () => {
+      component.DashboardReportObj.length = 1;
+      component.initialProcesses();
+  });
+
+  // it('should test postFetchingReportDataFn method', () => {
+  //     let response: any;
+  //     component.postFetchingReportDataFn(response);
+  // })
+
+  // it('should test ngOnChanges subscribe method', ()  => {
+  //     spyOn(component, 'ngOnChanges').and.callThrough();
+  //     component.ngOnChanges(change);
+  //     expect(component.ngOnChanges).toHaveBeenCalled();
+  // })
+
+  // it('should test postFetchingReportDataFn method', () => {
+  //   let obj: any;
+  //     component.postFetchingReportDataFn(obj);
+  // })
+  
+});
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-report.component.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-report.component.ts
new file mode 100644
index 00000000..54a45226
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-report.component.ts
@@ -0,0 +1,786 @@
+import {
+    AfterViewInit,
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    ElementRef,
+    HostListener,
+    Input,
+    OnChanges,
+    OnInit,
+    SimpleChanges,
+    ViewChild
+} from '@angular/core';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+import { MatTableDataSource } from '@angular/material/table';
+import { ActivatedRoute, Router } from '@angular/router';
+import { HttpClient } from '@angular/common/http';
+import { RunService } from '../run.service';
+import { GridsterConfig, GridsterItem, GridType } from 'angular-gridster2';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
+import {environment} from '../../../../environments/environment';
+import {DisplayHtml} from '../../../pages/analytics/Report_List/Report/display-html';
+import {ErrorModalComponent} from '../../../modals/error-modal/error-modal.component';
+import {InformationModalComponent } from 'src/app/modals/information-modal/information-modal.component';
+import { FormControl } from '@angular/forms';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { ConfirmationModalComponent } from 'src/app/modals/confirmation-modal/confirmation-modal.component';
+import {MatDialog} from '@angular/material';
+import {HttpCacheService} from '../../../shared/services/cache.service';
+
+export interface PeriodicElement {
+
+}
+
+const ELEMENT_DATA: PeriodicElement[] = [{}];
+
+@Component({
+    selector: 'app-run-report',
+    templateUrl: './run-report.component.html',
+    styleUrls: ['./run-report.component.css'],
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class RunReportComponent implements OnInit, AfterViewInit, OnChanges {
+    @Input('reportId') inputReportId: string;
+    @Input('reportMode') reportMode: string;
+    @Input('queryString') queryString: string;
+    @Input('isGoBack') isGoBack: string;
+    @Input('DashboardReportObj') DashboardReportObj: Array<GridsterItem>;
+    @Input('TriggerFFArr') TriggerFFArr: string[];
+    @Input('hitCnt') hitCnt: number;
+    @Input('runAgain') runAgain: string;
+    @Input('groupSelectValue') groupSelectValue: string;
+    @Input('chartType') chartType: string;
+    @ViewChild('iframe') iframe: ElementRef;
+    @ViewChild(MatPaginator, {static: false} as any) paginator: MatPaginator;
+    @ViewChild(MatSort, {static: false} as any) sort: MatSort;
+    dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
+    displayedColumns: string[];
+    IncomingReportId: string;
+    displayedColumnsArr: string[];
+    displayedRowObj: PeriodicElement[];
+    formFieldPresent: boolean;
+    showSpinner: boolean;
+    formFieldList: {}[];
+    isReady: boolean;
+    responseFormFieldListLength: number;
+    NEWdisplayedColumns: string[];
+    initCnt: number;
+    reportName: string;
+    showDashboardReport: boolean;
+    checkCnt: number;
+    options: GridsterConfig;
+    dashboard: Array<GridsterItem> = [];
+    openOptionsFlag: boolean;
+    showMoreVert: boolean;
+    errorMessage = '';
+    stackTrace = '';
+    error = false;
+    environment: any;
+    initialQueryString: string;
+    initCounter: number;
+    runButtonHitCnt: number;
+    chartRunUrl: string;
+    url: SafeResourceUrl;
+    replaceDisplayValue: String;
+    nodeName: string;
+    uploadId: string;
+    ecgi: string;
+    lac: string;
+    cid: string;
+    displayTotal: any[];
+    totalRecords: number;
+    pageSize: number;
+    download_in_progress: boolean;
+    commentCtrl = new FormControl('');
+    isChartAvailable = false;
+    timeTaken = '...';
+    saveResponseObj: any;
+    showBackButton = false;
+
+	isDashboardExcelReadyToDownload = false;
+	
+    constructor(private _http: HttpClient,
+        private _route: ActivatedRoute,
+        private _runService: RunService,
+        private _router: Router,
+        private changeDetectorRefs: ChangeDetectorRef,
+        public sanitizer: DomSanitizer,
+        public ngbModal: NgbModal,
+        private httpCacheService: HttpCacheService,
+        private dialog: MatDialog) {
+        this.displayedColumnsArr = [];
+        this.displayedRowObj = [];
+        this.displayedColumns = [];
+        this.formFieldList = [];
+        this.showSpinner = true;
+        this.isReady = false;
+        this.NEWdisplayedColumns = [];
+        this.initCnt = 0;
+        this.checkCnt = 0;
+        this.showDashboardReport = false;
+        this.openOptionsFlag = false;
+        this.showMoreVert = false;
+        this.environment = environment;
+        this.initCounter = 0;
+        this.runButtonHitCnt = 0;
+        this.displayTotal = [];
+        this.totalRecords = 0;
+        this.pageSize = 0;
+        this.download_in_progress = false;
+        this.isGoBack = '';
+		this.isDashboardExcelReadyToDownload = false;
+    }
+
+    @HostListener('click') onClick() {
+        this.changeDetectorRefs.detectChanges();
+    }
+
+    ngOnChanges(changes: SimpleChanges) {
+        if (this.reportMode !== 'Regular' && this.initCnt > 0 && changes['runAgain']) {
+            this.isGoBack = '';
+            this.showMoreVert = false;
+            if (changes['queryString']) {
+                this.queryString = changes['queryString']['currentValue'];
+            }
+            if (this.queryString !== this.initialQueryString) {
+                this.initCnt = 1;
+                this.showDashboardReport = false;
+                this.dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
+                this.displayedColumnsArr = [];
+                this.displayedRowObj = [];
+                this.displayedColumns = [];
+                this.formFieldList = [];
+                this.showSpinner = true;
+                this.isReady = false;
+                this.NEWdisplayedColumns = [];
+                this.displayTotal = [];
+                this.isChartAvailable = false;
+                this.timeTaken = '...';
+                const startDate: Date = new Date();
+                const startTime = startDate.getTime();
+                this._runService.getReportDataWithFormFields(this.queryString, this.inputReportId, this.groupSelectValue)
+                    .subscribe((response) => {
+                        if (response['errormessage']) {
+                            this.openErrorModel(response['errormessage']);
+                            this.showError();
+                            this.changeDetectorRefs.detectChanges();
+                        } else {
+                            this.chartRunUrl = environment.baseUrl + 'raptor.htm?action=chart.run&c_master=' +
+                                this.inputReportId + this.queryString + '&refresh=Y&display_content=Y&r_page=0';
+                            if (this.reportMode !== 'FormField') {
+                                this.postFetchingReportDataFn(response, false, 0);
+                                const endDate: Date = new Date();
+                                const endTime = endDate.getTime();
+                                this.showMoreVert = true;
+                                this.showDashboardReport = true;
+                                this.errorMessage = '';
+                                this.error = false;
+                            } else {
+                                this.postFetchingReportDataFn(response, false, 0);
+                                const endDate: Date = new Date();
+                                const endTime = endDate.getTime();
+                                this.showMoreVert = true;
+                                this.errorMessage = '';
+                                this.error = false;
+                            }
+                        }
+                    }, error => {
+                        this.openErrorModel('Error occurred while running report: ' + this.inputReportId);
+                        this.showError();
+                    });
+            }
+        } else {
+        }
+        if (this.initialQueryString !== this.queryString && this.initCounter > 0 && this.hitCnt !== this.runButtonHitCnt) {
+            this.runButtonHitCnt = this.hitCnt;
+            this.initialQueryString = this.queryString;
+            this.initialProcesses();
+        } else {
+            this.runButtonHitCnt = this.hitCnt;
+        }
+
+    }
+
+    ngOnInit() {
+        this.dataSource.paginator = this.paginator;
+        this.dataSource.sort = this.sort;
+        this.dataSource.data = this.displayedRowObj;
+        this.initialProcesses();
+        this.errorMessage = '';
+        this.error = false;
+    }
+
+    initialProcesses() {
+        if (this.DashboardReportObj.length > 0) {
+            this.dashboard = this.DashboardReportObj;
+            this.options = {
+                gridType: GridType.VerticalFixed,
+                margin: 10,
+                outerMargin: true,
+                outerMarginTop: 10,
+                outerMarginRight: 10,
+                outerMarginBottom: 5000,
+                outerMarginLeft: 10,
+                scrollSensitivity: 10,
+                scrollSpeed: 20,
+                fixedColWidth: 400,
+                fixedRowHeight: 600,
+                emptyCellDragMaxCols: null,
+                emptyCellDragMaxRows: null,
+                ignoreContentClass: 'gridster-item-content',
+                enableOccupiedCellDrop: true,
+                ignoreMarginInRow: false,
+                draggable: {
+                    enabled: true,
+                },
+                resizable: {
+                    enabled: true,
+                },
+                swap: true,
+                pushItems: true,
+                disablePushOnDrag: false,
+                disablePushOnResize: false,
+                pushDirections: {north: true, east: true, south: true, west: true},
+                pushResizeItems: true,
+                disableWindowResize: true,
+                disableWarnings: false,
+                scrollToNewItems: true,
+                enableDropToAdd: true,
+                enableEmptyCellDrop: true,
+                minCols: 2,
+                minRows: 2,
+            };
+                this._runService.getDashboardReportFormFields(this.inputReportId)
+                    .subscribe((dashboardFormFields) => {
+                        this.changeDetectorRefs.detectChanges();
+                            this._runService.runDashboardReport(this.inputReportId, this.queryString)
+                                .subscribe((runDashboardReportResp) => {
+                                    if (runDashboardReportResp) {
+										this.isDashboardExcelReadyToDownload = true;
+                                        this.changeDetectorRefs.detectChanges();
+                                    }
+                                });
+                            this.download_in_progress = false;
+                        
+                    });
+            
+            this.showDashboardReport = true;
+
+        }
+        this.hitCnt = this.runButtonHitCnt;
+        this.initialQueryString = this.queryString;
+        this.initCounter++;
+    }
+
+    ngAfterViewInit() {
+        this.afterViewInitialProcesses();
+    }
+
+    afterViewInitialProcesses() {
+        if (sessionStorage.length > 0) {
+            this.showBackButton = true;
+        } else {
+            this.showBackButton = false;
+        }
+        if (this.DashboardReportObj.length === 0) {
+            if (this.reportMode === 'Regular' && this.initCnt == 0) {
+                this.showMoreVert = false;
+                this.dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
+                this.displayedColumnsArr = [];
+                this.displayedRowObj = [];
+                this.displayedColumns = [];
+                this.formFieldList = [];
+                this.showSpinner = true;
+                this.isReady = false;
+                this.NEWdisplayedColumns = [];
+                this.timeTaken = '...';
+                const startDate: Date = new Date();
+                const startTime = startDate.getTime();
+                this._runService.getReportData(this.inputReportId)
+                    .subscribe((response) => {
+                        if (response['errormessage']) {
+                            this.openErrorModel(response['errormessage']);
+                            this.showError();
+                            this.changeDetectorRefs.detectChanges();
+                        } else {
+                            this.chartRunUrl = environment.baseUrl + 'raptor.htm?action=chart.run&c_master=' +
+                                this.inputReportId + '&refresh=Y&display_content=Y&r_page=0';
+                            this.postFetchingReportDataFn(response, false, 0);
+                            const endDate: Date = new Date();
+                            const endTime = endDate.getTime();
+                            this.showMoreVert = true;
+                        }
+                    }, error => {
+                        this.openErrorModel('Error occurred while running report: ' + this.inputReportId);
+                        this.showError();
+                    });
+            } else {
+                this.showMoreVert = false;
+                this.dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
+                this.displayedColumnsArr = [];
+                this.displayedRowObj = [];
+                this.displayedColumns = [];
+                this.formFieldList = [];
+                this.showSpinner = true;
+                this.isReady = false;
+                this.NEWdisplayedColumns = [];
+                this.timeTaken = '...';
+                const startDate: Date = new Date();
+                const startTime = startDate.getTime();
+                if (localStorage.getItem(this.inputReportId)) {
+                    this.chartRunUrl = environment.baseUrl + 'raptor.htm?action=chart.run&c_master=' +
+                        this.inputReportId + this.queryString + '&refresh=Y&display_content=Y&r_page=0';
+                    this.postFetchingReportDataFn(JSON.parse(localStorage.getItem(this.inputReportId)), false, 0);
+                    this.saveResponseObj = JSON.parse(localStorage.getItem(this.inputReportId));
+                    const endDate: Date = new Date();
+                    const endTime = endDate.getTime();
+                    this.showMoreVert = true;
+                    localStorage.removeItem(this.inputReportId);
+                    this.isGoBack = 'true';
+                } else {
+                    this._runService.getReportDataWithFormFields(this.queryString, this.inputReportId, this.groupSelectValue)
+                        .subscribe((response) => {
+                            if (response['errormessage']) {
+                                this.openErrorModel(response['errormessage']);
+                                this.showError();
+                                this.changeDetectorRefs.detectChanges();
+                            } else {
+                                this.chartRunUrl = environment.baseUrl + 'raptor.htm?action=chart.run&c_master=' +
+                                    this.inputReportId + this.queryString + '&refresh=Y&display_content=Y&r_page=0';
+                                this.saveResponseObj = response;
+                                this.postFetchingReportDataFn(response, false, 0);
+                                const endDate: Date = new Date();
+                                const endTime = endDate.getTime();
+                                this.showMoreVert = true;
+                            }
+                        }, error => {
+                            this.openErrorModel('Error occurred while running report: ' + this.inputReportId);
+                            this.showError();
+                        });
+                }
+            }
+        } else {
+            this.showMoreVert = true;
+            this.showSpinner = false;
+        }
+        this.errorMessage = '';
+        this.error = false;
+        this.initCnt = 1;
+    }
+
+    showError() {
+        this.showSpinner = false;
+        this.isChartAvailable = false;
+        this.changeDetectorRefs.detectChanges();
+    }
+
+    postFetchingReportDataFn(response: any, isPageChange: boolean, pagenum: any) {
+        this.pageSize = 0;
+        this.totalRecords = 0;
+        this.displayedColumnsArr = [];
+        this.displayedColumns = [];
+        this.formFieldPresent = false;
+        this.responseFormFieldListLength = 0;
+        this.reportName = response['reportName'];
+        let rdc_cntr = 0;
+        this.timeTaken = (response['totalRunTime'] / 1000).toString();
+        this.displayedColumnsArr.push('RowNum,RowNum');
+        while (response['reportDataColumns'][rdc_cntr]) {
+            const columnTitle = response['reportDataColumns'][rdc_cntr]['columnTitle'];
+            const columnId = response['reportDataColumns'][rdc_cntr]['colId'];
+            this.displayedColumnsArr.push(columnTitle + ',' + columnId);
+            rdc_cntr++;
+        }
+
+        if (response['chartWizardAvailable'] === true && this.chartType !== 'none') {
+            this.isChartAvailable = true;
+            this.iframe.nativeElement.setAttribute('src', this.chartRunUrl);
+        }
+
+        let totalCnt = 0;
+        while (response['reportTotalDataRows'][totalCnt]) {
+            this.displayTotal.push(response['reportTotalDataRows'][totalCnt]);
+            totalCnt++;
+        }
+
+        let rdr_cntr = 0;
+        while (response['reportDataRows'][rdr_cntr]) {
+            let dca_cntr = 0;
+            const obj = {};
+            const reportDataRows = response['reportDataRows'][rdr_cntr];
+            while (this.displayedColumnsArr[dca_cntr]) {
+                const rowColumnId = this.displayedColumnsArr[dca_cntr].split(',')[1];
+                if (reportDataRows[rowColumnId]) {
+                    let drillDownHtml = '';
+                    let displayValue = '';
+                    drillDownHtml = reportDataRows[rowColumnId]['drillDownURL'];
+                    displayValue = reportDataRows[rowColumnId]['displayValue'];
+                    if (drillDownHtml !== null &&
+                        drillDownHtml.length > 0 &&
+                        !displayValue.includes('linkToReport')) {
+                        const value = this.convertToLinkToReport(drillDownHtml);
+                        if (value.length > 0) {
+                            this.replaceDisplayValue = value + ',' +
+                                reportDataRows[rowColumnId]['displayValue'];
+                        } else {
+                            this.replaceDisplayValue = reportDataRows[rowColumnId]['displayValue'];
+                        }
+                    } else {
+                        this.replaceDisplayValue = reportDataRows[rowColumnId]['displayValue'];
+                    }
+                    let displayObj: DisplayHtml = new class implements DisplayHtml {
+                        'background-color': string;
+                        'font-family': string;
+                        'font-size': string;
+                        'font-style': string;
+                        'font-weight': string;
+                        'text-align': string;
+                        'text-decoration': string;
+                        color: string;
+                    };
+                    if (reportDataRows[rowColumnId]['displayValueHtml'].includes('setStyle')) {
+                        displayObj = JSON.parse(reportDataRows[rowColumnId]['displayValueHtml']);
+                    }
+                    displayObj['text-align'] = reportDataRows[rowColumnId]['alignment'];
+                    obj['RowNum'] = (pagenum * response['pageSize'] + rdr_cntr + 1) + '|{"text-align":"center"}';
+                    if (this.replaceDisplayValue.includes('linkToReport') || this.replaceDisplayValue.includes('linkToFeedback') || this.replaceDisplayValue.includes('linkToMail')
+                        || this.replaceDisplayValue.includes('linkToMap')) {
+                        let replaceValArr = new Array();
+                        if (this.replaceDisplayValue.includes('linkToReport')) {
+                            obj[reportDataRows[rowColumnId]['colId']] = this.replaceDisplayValue.split(',').join('|');
+                            replaceValArr = obj[reportDataRows[rowColumnId]['colId']].split('|');
+                            if (replaceValArr.length > 4) {
+                                const dispValue = replaceValArr[3] + ',' + replaceValArr[4];
+                                obj[reportDataRows[rowColumnId]['colId']] =  obj[reportDataRows[rowColumnId]['colId']].replace(replaceValArr[3] + '|' + replaceValArr[4], replaceValArr[3] + ',' + replaceValArr[4])+ '|' + JSON.stringify(displayObj);
+                            } else {
+                                obj[reportDataRows[rowColumnId]['colId']] = this.replaceDisplayValue.split(',').join('|')
+                                    + '|' + JSON.stringify(displayObj);
+                            }
+                        } else {
+                            obj[reportDataRows[rowColumnId]['colId']] = this.replaceDisplayValue.split(',').join('|')
+                                + '|' + JSON.stringify(displayObj);
+                        }
+                    } else {
+                        obj[reportDataRows[rowColumnId]['colId']] = this.replaceDisplayValue.split('comment-break-line').join('')
+                            + '|' + JSON.stringify(displayObj);
+                    }
+                }
+                dca_cntr++;
+            }
+            this.displayedRowObj.push(obj);
+            rdr_cntr++;
+        }
+        this.pageSize = response['pageSize'];
+        for (let cntr = 0; cntr < this.displayedColumnsArr.length; cntr++) {
+            const columnArrId = this.displayedColumnsArr[cntr].split(',')[1];
+            this.displayedColumns.push(columnArrId);
+        }
+        this.totalRecords = 0;
+        this.totalRecords = response['totalRows'];
+        this.showSpinner = false;
+        if (!isPageChange) {
+            this.paginator.length = this.totalRecords;
+            this.paginator.pageSize = this.pageSize;
+            this.paginator.pageIndex = 0;
+        }
+        this.dataSource.data = this.displayedRowObj;
+        this.dataSource.sort = this.sort;
+        this.changeDetectorRefs.detectChanges();
+    }
+
+linkToReport(reportID: string, queryParameters: string) {
+        if (!this.httpCacheService.getPreviousId(this.inputReportId)) {
+            this.httpCacheService.setPreviousId(this.inputReportId, 'parent');
+        }
+        this.httpCacheService.setPreviousId(reportID, this.inputReportId);
+/*         localStorage.setItem(this.inputReportId, JSON.stringify(this.saveResponseObj));
+         if (sessionStorage.length === 0) {
+             sessionStorage.setItem('1', this.inputReportId + '|' + this.queryString);
+         } else {
+             let length = sessionStorage.length;
+             length++;
+             sessionStorage.setItem(length.toString(), this.inputReportId + '|' + this.queryString);
+         }*/
+         let queryParamsArr = new Array();
+         let columnDrilldownqueryParamsArr = new Array();
+         let groupSelectValue = '';
+         if (queryParameters.includes('groupSelectValue')) {
+             queryParamsArr = queryParameters.split('&');
+             for (let val = 0; val < queryParamsArr.length; val++) {
+                 if (queryParamsArr[val].includes('groupSelectValue')) {
+                     groupSelectValue = queryParamsArr[val].substring(queryParamsArr[val].indexOf('=') + 1, queryParamsArr[val].length);
+                 }
+             }
+             this._router.navigate(['v2/run', reportID, queryParameters, groupSelectValue]);
+         } else if (queryParameters.includes('SELECTCRITERIA-')) {
+             columnDrilldownqueryParamsArr = queryParameters.split('&');
+             for (let val = 0; val < columnDrilldownqueryParamsArr.length; val++) {
+                 if (columnDrilldownqueryParamsArr[val].includes('SELECTCRITERIA-')) {
+                     groupSelectValue = columnDrilldownqueryParamsArr[val].substring(columnDrilldownqueryParamsArr[val].indexOf('-') + 1, columnDrilldownqueryParamsArr[val].length);
+                 }
+             }
+             this._router.navigate(['v2/run', reportID, queryParameters, groupSelectValue, 'true', '']);
+         } else {
+             this._router.navigate(['v2/run', reportID, queryParameters, '' , 'true', '']);
+         }
+     }
+
+
+    linkToMail(mailId: string) {
+        this.changeDetectorRefs.detectChanges();
+        const email = 'mailto:' + mailId;
+        window.location.href = email;
+    }
+
+    openOptions() {
+        this.changeDetectorRefs.detectChanges();
+        this.openOptionsFlag = !this.openOptionsFlag;
+    }
+
+    downloadReport(contentType: string, extension: string) {
+
+        this.changeDetectorRefs.detectChanges();
+        if (this.showDashboardReport === false) {
+            this.download_in_progress = true;
+            this._runService.downloadReport(this.inputReportId, extension,this.isGoBack)
+                .subscribe((responseExcel) => {
+
+                    this.downLoadFile(responseExcel, contentType, extension, '');
+                    this.download_in_progress = false;
+                    this.changeDetectorRefs.detectChanges();
+                });
+        } else {
+            this.download_in_progress = true;
+            this._runService.getDashboardReportFormFields(this.inputReportId)
+                .subscribe((dashboardFormFields) => {
+/*                    this._runService.runDashboardReport(this.inputReportId, this.queryString)
+                            .subscribe((runDashboardReportResp) => {*/
+                            this._runService.downloadDashboardReportExcel(this.inputReportId)
+                                .subscribe((responseDownloadDashboardReport) => {
+                                    this.downLoadFile(responseDownloadDashboardReport, contentType, extension, 'Dashboard');
+                                    this.download_in_progress = false;
+                                    this.changeDetectorRefs.detectChanges();
+                                });
+                        //});
+
+                });
+        }
+    }
+
+    downloadSinglePage(contentType: string, extension: string) {
+        this.changeDetectorRefs.detectChanges();
+        this.download_in_progress = true;
+        this._runService.downloadSinglePageReport(this.inputReportId, extension, this.isGoBack)
+            .subscribe((responseExcel) => {
+
+                this.downLoadFile(responseExcel, contentType, extension, '');
+                this.download_in_progress = false;
+                this.changeDetectorRefs.detectChanges();
+            });
+    }
+
+    downLoadFile(data: any, type: string, extension: string, reportType: string) {
+        const blob = new Blob([data], {type: type});
+        const date = new Date();
+        const dateStr =
+            ('00' + (date.getMonth() + 1)).slice(-2) +
+            ('00' + date.getDate()).slice(-2) +
+            date.getFullYear() +
+            ('00' + date.getHours()).slice(-2) +
+            ('00' + date.getMinutes()).slice(-2) +
+            ('00' + date.getMilliseconds());
+        let fileName = this.reportName + dateStr + '.' + extension;
+        if (reportType === 'Dashboard') {
+            fileName = '';
+            fileName = reportType + '_' + this.inputReportId + '_' + dateStr + '.' + extension;
+        }
+        if (window.navigator.msSaveOrOpenBlob) {
+            window.navigator.msSaveBlob(blob, fileName);
+        } else {
+            const anchor = window.document.createElement('a');
+            anchor.href = window.URL.createObjectURL(blob);
+            anchor.download = fileName;
+            document.body.appendChild(anchor);
+            anchor.click();
+            document.body.removeChild(anchor);
+            window.URL.revokeObjectURL(anchor.href);
+        }
+    }
+
+    applyFilter(filterValue: string) {
+        this.changeDetectorRefs.detectChanges();
+        this.dataSource.data = this.displayedRowObj;
+        this.dataSource.sort = this.sort;
+        if (filterValue === '' || filterValue === null) {
+        } else {
+            this.dataSource.filter = filterValue.trim().toLowerCase();
+            this.changeDetectorRefs.detectChanges();
+        }
+    }
+
+    setStyle(rowData: string) {
+        let styles = '';
+        if (rowData.split('|')[0] === 'linkToReport') {
+            styles = rowData.split('|')[4];
+        } else if (rowData.split('|')[0] === 'linkToMail') {
+            styles = rowData.split('|')[3];
+        } else {
+            styles = rowData.split('|')[1];
+        }
+        if (styles.includes('{')) {
+            return JSON.parse(styles);
+        } else {
+            return {};
+        }
+    }
+
+    
+
+    getDisplayTotal(keys: string) {
+        if (this.displayTotal.length > 0 && this.displayTotal[0][keys]) {
+            return this.displayTotal[0][keys].displayValue;
+        } else {
+            return '';
+        }
+    }
+
+    onPaginationChange(event: any) {
+        this.changeDetectorRefs.detectChanges();
+        if (this.DashboardReportObj.length === 0) {
+            if (this.reportMode === 'Regular' && this.initCnt === 0) {
+                this.showMoreVert = false;
+                this.displayedColumnsArr = [];
+                this.displayedRowObj = [];
+                this.displayedColumns = [];
+                this.formFieldList = [];
+                this.showSpinner = true;
+                this.isReady = false;
+                this.NEWdisplayedColumns = [];
+                this.isChartAvailable = false;
+                this.timeTaken = '...';
+                const startDate: Date = new Date();
+                const startTime = startDate.getTime();
+                this._runService.getReportDataWithPageNo(this.inputReportId, event.pageIndex)
+                    .subscribe((response) => {
+                        if (response['errormessage']) {
+                            this.openErrorModel(response['errormessage']);
+                            this.showError();
+                            this.changeDetectorRefs.detectChanges();
+                        } else {
+                            const endDate: Date = new Date();
+                            const endTime = endDate.getTime();
+                            this.chartRunUrl = environment.baseUrl + 'raptor.htm?action=chart.run&c_master=' +
+                                this.inputReportId + '&refresh=Y&display_content=Y&r_page=' + event.pageIndex;
+                            this.postFetchingReportDataFn(response, true, event.pageIndex);
+                            this.showMoreVert = true;
+                        }
+                    }, error => {
+                        this.openErrorModel('Error occurred while running report: ' + this.inputReportId);
+                        this.showError();
+                    });
+            } else {
+                this.showMoreVert = false;
+                this.displayedColumnsArr = [];
+                this.displayedRowObj = [];
+                this.displayedColumns = [];
+                this.formFieldList = [];
+                this.showSpinner = true;
+                this.isReady = false;
+                this.NEWdisplayedColumns = [];
+                this.isChartAvailable = false;
+                this.timeTaken = '...';
+                const startDate: Date = new Date();
+                const startTime = startDate.getTime();
+                this._runService.getReportDataWithFormFieldsWithPageNo(this.queryString, this.inputReportId, event.pageIndex)
+                    .subscribe((response) => {
+                        if (response['errormessage']) {
+                            this.openErrorModel(response['errormessage']);
+                            this.showError();
+                            this.changeDetectorRefs.detectChanges();
+                        } else {
+                            const endDate: Date = new Date();
+                            const endTime = endDate.getTime();
+                            this.chartRunUrl = environment.baseUrl + 'raptor.htm?action=chart.run&c_master=' +
+                                this.inputReportId + this.queryString + '&refresh=Y&display_content=Y&r_page=' + event.pageIndex;
+                            this.postFetchingReportDataFn(response, true, event.pageIndex);
+                            this.showMoreVert = true;
+                        }
+                    }, error => {
+                        this.openErrorModel('Error occurred while running report: ' + this.inputReportId);
+                        this.showError();
+                    });
+            }
+        } else {
+            this.showMoreVert = true;
+            this.showSpinner = false;
+        }
+        this.errorMessage = '';
+        this.error = false;
+        this.initCnt = 1;
+    }
+
+    convertToLinkToReport(value: string) {
+        value = value.replace(/;/g, '');
+        let outPut = '';
+        while (value.includes('c_master=')) {
+            const index = value.indexOf('c_master=');
+            if (index > 0) {
+                value = value.substring(index, value.length);
+            } else if (index === 0) {
+                value = value.replace('c_master=', '');
+            }
+        }
+        const split = value.split('&');
+        if (split[1].length <= 0) {
+            return outPut;
+        }
+        outPut = 'linkToReport,' + split[0] + ',';
+        let splitCounter = 1;
+        for (splitCounter = 1; splitCounter < split.length; splitCounter++) {
+            if (!split[splitCounter].includes('LOGIN_ID=') &&
+                !split[splitCounter].includes('display_content=') &&
+                !split[splitCounter].includes('drilldown_index=') &&
+                !split[splitCounter].includes('show_back_btn=') &&
+                !split[splitCounter].includes('r_action')) {
+                outPut = outPut + '&' + split[splitCounter];
+            }
+        }
+        return outPut;
+    }
+
+    takeToReport(queryString: string, reportID: string) {
+        this._router.navigate(['v2/run', reportID, queryString, this.groupSelectValue]);
+    }
+
+    goBack() {
+        this.changeDetectorRefs.detectChanges();
+        const length = sessionStorage.length;
+        let repId = '';
+        let queryString = '';
+        if (length > 1) {
+            let split = [];
+            split = sessionStorage.getItem((length).toString()).split('|');
+            repId = split[0];
+            queryString = split[1];
+            sessionStorage.removeItem((length).toString());
+        } else if (length === 1) {
+            let split = [];
+            split = sessionStorage.getItem('1').split('|');
+            repId = split[0];
+            queryString = split[1];
+            sessionStorage.removeItem('1');
+        }
+        localStorage.removeItem(this.inputReportId);
+        this._router.navigate(['v2/run', repId, queryString]);
+    }
+    
+	openErrorModel(_message: string) { 
+        this.changeDetectorRefs.detectChanges(); 
+        const modalInfoRef = this.ngbModal.open(ErrorModalComponent); 
+        modalInfoRef.componentInstance.message = _message; 
+        return modalInfoRef; 
+    }
+
+}
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run.component.css b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run.component.css
new file mode 100644
index 00000000..89e09a51
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run.component.css
@@ -0,0 +1,497 @@
+/* .left {
+  width: auto;
+  float: left;
+  text-align: right;
+}
+.right {
+  width: auto;
+  
+  float: left;
+} */
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: normal;
+  text-rendering: optimizeLegibility;
+  margin: 0;
+  line-height: 1; }
+
+mat-icon{
+  color: #006496;
+  cursor: pointer;
+}
+
+/* .tab-pane{
+  padding-right: 130px;
+  padding-left: 120px;
+  color: rgba(0, 0, 0, 0.603)
+} */
+
+.boxMargin{
+  
+  width: auto;
+}
+
+mat-button-toggle{
+  display: block;
+  width: 400px;
+  border-radius: 5px;
+}
+
+input {
+  width: 400px;
+  height: 20px;
+}
+
+.tab-content{
+  margin-right: 20px;
+  /* background-color: #006496; */
+  color: rgb(0, 0, 0);
+}
+
+.stdForm{
+  margin-left: 20px;
+}
+
+.field-group {
+  position: relative;
+  display: block;
+}
+
+label + .field-group, label + .input-append, label + .row, label + .row-nowrap, label + .form-row {
+  margin-top: 5px;
+}
+
+textarea {
+  display: block;
+  width: 400px;
+  max-width: 50%;
+  padding: 15px;
+}
+
+select{
+  display: block;
+  width: 400px;
+  max-width: 400px;
+  padding: 15px;
+  background-color: #cfcfcf7a
+}
+
+.webform-component-my-select select {
+  height: 200px;
+}
+
+.checkbox .skin {
+  background-color: #fff;
+  border: 1px solid #d2d2d2;
+  border-radius: 3px;
+  display: inline-block;
+  height: 24px;
+  width: 24px;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+i, em {
+  font-family: "Omnes-ECOMP-W02-Italic", Arial;
+  font-style: normal;
+}
+
+
+.btn-alt {
+  border-color: #087ac2 transparent #0568ae;
+  background-color: #0568ae;
+  background: linear-gradient(to bottom, #087ac2 0%, #0568ae 100%);
+  color: #ffffff; }
+  .btn-alt:hover {
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #0568ae 0%, #087ac2 100%); }
+  .btn-alt:focus {
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #0568ae 0%, #087ac2 100%); }
+  .btn-alt:active {
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #0568ae 0%, #087ac2 100%); }
+
+    
+a.btn {
+  vertical-align: middle; }
+  a.btn:hover {
+    text-decoration: none; }
+
+.field-group + .btn {
+  margin-left: 20px; }
+
+.btn-primary {
+  border-color: #ea7400 transparent #d16500;
+  background-color: #ea7400 transparent #d16500;
+  background: linear-gradient(to bottom, #ea7400 0%, #d16500 100%);
+  color: #ffffff;
+  font-family: "Omnes-ECOMP-W02", Arial;
+  font-weight: bold; }
+  .btn-primary:hover {
+    text-decoration: none;
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #d16500 0%, #ea7400 100%); }
+  .btn-primary:focus {
+    text-decoration: none;
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #d16500 0%, #ea7400 100%); }
+  .btn-primary:active {
+    text-decoration: none;
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #d16500 0%, #ea7400 100%); }
+
+.btn-arrow {
+  font-family: "Omnes-ECOMP-W02", Arial;
+  font-size: 1.6rem;
+  font-weight: normal;
+  background-color: transparent;
+  border: none;
+  padding: 5px 0 0;
+  top: -4px;
+  color: #333333;
+  position: relative; }
+  .btn-arrow:hover {
+    text-decoration: underline; }
+    .btn-arrow:hover .btn-primary {
+      text-decoration: none;
+      color: #ffffff;
+      outline-color: #ffffff !important;
+      background: linear-gradient(to bottom, #d16500 0%, #ea7400 100%); }
+    .btn-arrow:hover .btn-secondary {
+      color: #0568ae;
+      outline-color: #000000 !important;
+      background: linear-gradient(to bottom, #f2f2f2 0%, #fcfcfc 100%); }
+    .btn-arrow:hover .btn-alt {
+      color: #ffffff;
+      outline-color: #ffffff !important;
+      background: linear-gradient(to bottom, #087ac2 0%, #0568ae 100%); }
+    .btn-arrow:hover .btn-specialty {
+      color: #ffffff;
+      outline-color: #ffffff !important;
+      background: linear-gradient(to bottom, #007a3e 0%, #008744 100%); }
+  .btn-arrow:focus {
+    text-decoration: underline;
+    outline: 1px dotted #666; }
+    .btn-arrow:focus .btn-primary {
+      text-decoration: none;
+      color: #ffffff;
+      outline-color: #ffffff !important;
+      background: linear-gradient(to bottom, #d16500 0%, #ea7400 100%); }
+    .btn-arrow:focus .btn-secondary {
+      color: #0568ae;
+      outline-color: #000000 !important;
+      background: linear-gradient(to bottom, #f2f2f2 0%, #fcfcfc 100%); }
+    .btn-arrow:focus .btn-alt {
+      color: #ffffff;
+      outline-color: #ffffff !important;
+      background: linear-gradient(to bottom, #087ac2 0%, #0568ae 100%); }
+    .btn-arrow:focus .btn-specialty {
+      color: #ffffff;
+      outline-color: #ffffff !important;
+      background: linear-gradient(to bottom, #007a3e 0%, #008744 100%); }
+  .btn-arrow:active .btn-primary {
+    text-decoration: none;
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #d16500 0%, #ea7400 100%); }
+  .btn-arrow:active .btn-secondary {
+    color: #0568ae;
+    outline-color: #000000 !important;
+    background: linear-gradient(to bottom, #f2f2f2 0%, #fcfcfc 100%); }
+  .btn-arrow:active .btn-alt {
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #087ac2 0%, #0568ae 100%); }
+  .btn-arrow:active .btn-specialty {
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #007a3e 0%, #008744 100%); }
+  .btn-arrow .btn-alt {
+    border-color: #087ac2 transparent #0568ae;
+    background-color: #0568ae;
+    background: linear-gradient(to bottom, #087ac2 0%, #0568ae 100%);
+    color: #ffffff; }
+    .btn-arrow .btn-alt:hover {
+      color: #ffffff;
+      outline-color: #ffffff !important;
+      background: linear-gradient(to bottom, #0568ae 0%, #087ac2 100%); }
+    .btn-arrow .btn-alt:focus {
+      color: #ffffff;
+      outline-color: #ffffff !important;
+      background: linear-gradient(to bottom, #0568ae 0%, #087ac2 100%); }
+    .btn-arrow .btn-alt:active {
+      color: #ffffff;
+      outline-color: #ffffff !important;
+      background: linear-gradient(to bottom, #0568ae 0%, #087ac2 100%); }
+  .btn-arrow::-moz-focus-inner {
+    padding: 0;
+    border: 0; }
+  .btn-arrow .btn {
+    border: 1px solid transparent;
+    border-radius: 100%;
+    height: 36px;
+    margin-bottom: 0;
+    margin-right: 7px;
+    max-width: 36px;
+    min-width: 20px;
+    padding: 0;
+    margin-top: -4px;
+    vertical-align: middle;
+    width: 36px; }
+    .btn-arrow .btn .icon-primary-left {
+      bottom: 0;
+      display: block;
+      height: 100%;
+      left: 0;
+      line-height: 0;
+      position: absolute;
+      right: 0;
+      text-indent: 0;
+      top: 0; }
+      .btn-arrow .btn .icon-primary-left:before {
+        position: absolute;
+        font-size: 1.6rem;
+        left: 1px;
+        top: 9px; }
+    .btn-arrow .btn .icon-primary-right {
+      bottom: 0;
+      display: block;
+      height: 100%;
+      left: 0;
+      line-height: 0;
+      position: absolute;
+      right: 0;
+      text-indent: 0;
+      top: 0;
+      color: #ffffff; }
+      .btn-arrow .btn .icon-primary-right:before {
+        position: absolute;
+        font-size: 1.6rem;
+        left: 17px;
+        top: 9px; }
+  .btn-arrow .btn.btn-primary .icon-primary-left {
+    color: #fff; }
+  .btn-arrow .btn.btn-primary .icon-primary-right {
+    color: #fff; }
+  .btn-arrow .btn.btn-alt .icon-primary-left {
+    color: #fff; }
+  .btn-arrow .btn.btn-alt .icon-primary-right {
+    color: #fff; }
+  .btn-arrow .btn.btn-secondary {
+    border: 1px solid #d2d2d2; }
+    .btn-arrow .btn.btn-secondary .icon-primary-left {
+      color: #0568ae; }
+    .btn-arrow .btn.btn-secondary .icon-primary-right {
+      color: #0568ae; }
+  .btn-arrow .btn.btn-small {
+    height: 20px;
+    max-width: 20px;
+    min-width: 20px;
+    width: 20px;
+    top: -1px; }
+    .btn-arrow .btn.btn-small .icon-primary-left:before {
+      font-size: 5px;
+      top: 4px;
+      left: 0; }
+    .btn-arrow .btn.btn-small .icon-primary-right:before {
+      font-size: 5px;
+      top: 4px;
+      left: 10px; }
+  .btn-arrow .btn.btn-large .icon-primary-left:before {
+    font-size: 112%;
+    top: 12px;
+    left: 23px; }
+  .btn-arrow .btn.btn-large .icon-primary-right:before {
+    font-size: 112%;
+    top: 12px;
+    left: 23px; }
+
+.btn-secondary {
+  border: 1px solid #d2d2d2;
+  background-color: #f2f2f2;
+  background: linear-gradient(to bottom, #fcfcfc 0%, #f2f2f2 100%);
+  color: #0568ae;
+  box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.15);
+  padding: 14px 18px 11px 17px; }
+  .btn-secondary:hover {
+    color: #0568ae;
+    outline-color: #000000 !important;
+    background: linear-gradient(to bottom, #f2f2f2 0%, #fcfcfc 100%); }
+  .btn-secondary:focus {
+    color: #0568ae;
+    outline-color: #000000 !important;
+    background: linear-gradient(to bottom, #f2f2f2 0%, #fcfcfc 100%); }
+  .btn-secondary:active {
+    color: #0568ae;
+    outline-color: #000000 !important;
+    background: linear-gradient(to bottom, #f2f2f2 0%, #fcfcfc 100%); }
+
+.btn-alt {
+  border-color: #087ac2 transparent #0568ae;
+  background-color: #0568ae;
+  background: linear-gradient(to bottom, #087ac2 0%, #0568ae 100%);
+  color: #ffffff; }
+  .btn-alt:hover {
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #0568ae 0%, #087ac2 100%); }
+  .btn-alt:focus {
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #0568ae 0%, #087ac2 100%); }
+  .btn-alt:active {
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #0568ae 0%, #087ac2 100%); }
+
+.btn-specialty {
+  border-color: #008744 transparent #007a3e;
+  background-color: #007a3e;
+  background: linear-gradient(to bottom, #008744 0%, #007a3e 100%);
+  color: #ffffff; }
+  .btn-specialty:hover {
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #007a3e 0%, #008744 100%); }
+  .btn-specialty:focus {
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #007a3e 0%, #008744 100%); }
+  .btn-specialty:active {
+    color: #ffffff;
+    outline-color: #ffffff !important;
+    background: linear-gradient(to bottom, #007a3e 0%, #008744 100%); }
+
+.btn-clear {
+  background: transparent !important;
+  border-color: transparent !important;
+  font-weight: normal;
+  font-family: "Omnes-ECOMP-W02", Arial;
+  box-shadow: none;
+  text-decoration: none;
+  color: #0568ae; }
+  .btn-clear:focus {
+    text-decoration: underline; }
+  .btn-clear:hover {
+    text-decoration: underline; }
+
+.card{
+  border-radius: 5px;
+}
+
+.card-header{
+  height: 50px;
+}
+
+.card-body{
+  height: 150px;
+}
+
+.card-footer{
+  height: 50px;
+}
+
+.dialog__close-btn {
+  border: 0;
+  background: #087ac2;
+  color: #ffffff;
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  font-size: 1.2em;
+  display: block;
+  border: #087ac2 2px solid;
+}
+
+.modalTitle{
+    font-size: 35px;  
+}
+
+
+.full-width-table {
+  width: 100%;
+}
+
+
+.app-data-table {
+  margin-top: 35px;
+  /* margin-left: 250px;
+  margin-right: 250px; */
+ 
+}
+
+.app-data-table1 {
+  overflow: scroll;
+  width: 1780px;
+  height: 550px;
+}
+
+th{
+  /* background-color: #006496; */
+  color: rgb(0, 0, 0);
+  font-size: 15px;
+  border-radius: 2px;
+  height: 35px;
+}
+
+tr:nth-child(even) {
+  /* background-color: #dddddd; */
+  font-size: 2px;
+  height: 35px;
+  border-radius: 4px;
+  
+}
+
+tr:nth-child(odd) {
+  font-size: 2px;
+  height: 35px;
+  border-radius: 4px;
+}
+
+    
+.card{
+  border-radius: 5px;
+  
+}
+
+.card-header{
+  height: 50px;
+}
+
+.card-body{
+  height: 150px;
+}
+
+.card-footer{
+  height: 50px;
+  margin-right: 10px;
+}
+
+.dialog__close-btn {
+  border: 0;
+  background: #087ac2;
+  color: #ffffff;
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  font-size: 1.2em;
+  display: block;
+  border: #087ac2 2px solid;
+}
+
+.modalTitle{
+    font-size: 35px;  
+}
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run.component.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run.component.html
new file mode 100644
index 00000000..bd765038
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run.component.html
@@ -0,0 +1,12 @@
+
+<div class="stdForm">
+        <br/>
+                        <div class="tab-content">
+                                <h3>Step {{stepNo}} - Report Run</h3>
+                        </div>
+                <br/>
+                <div *ngIf="!toggle">
+                        <button class="btn btn-alt btn-small" (click)="runReport()">Run Report</button>
+                </div>
+                
+</div>
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run.component.spec.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run.component.spec.ts
new file mode 100644
index 00000000..3aa4713f
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run.component.spec.ts
@@ -0,0 +1,39 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RunComponent } from './run.component';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+
+describe('RunComponent', () => {
+  let component: RunComponent;
+  let fixture: ComponentFixture<RunComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RunComponent ],
+      imports: [HttpClientTestingModule, RouterTestingModule]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RunComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should test ngOnInit method', () => {
+    component.reportType = "Dashboard";
+    component.ngOnInit();
+    expect(component.stepNo).toEqual("4");
+
+    component.reportType = "test";
+    component.ngOnInit();
+    expect(component.stepNo).toEqual("8");
+  });
+
+});
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run.component.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run.component.ts
new file mode 100644
index 00000000..906bc44c
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run.component.ts
@@ -0,0 +1,52 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { HttpClient } from '@angular/common/http';
+
+@Component({
+  selector: 'app-run',
+  templateUrl: './run.component.html',
+  styleUrls: ['./run.component.css']
+})
+export class RunComponent implements OnInit {
+
+  toggle : boolean;
+  IncomingReportId : string;
+  stepNo : string;
+
+  @Input("reportId") reportId1 : string;
+  @Input("reportType") reportType : string;
+
+
+
+  constructor(private _http : HttpClient, private _route : ActivatedRoute, private router : Router) {
+    this.toggle = false;
+   }
+
+  ngOnInit() {
+
+    if(this.reportType === "Dashboard")
+    {
+      this.stepNo= "4";
+    }
+    else
+    {
+      this.stepNo= "8";
+    }
+
+  }
+
+  runReport()
+  {
+    this.toggle = true;
+
+    this._route.params.subscribe(params => {
+
+      this.IncomingReportId = params["reportId"];
+      this.reportId1 = params["reportId"];
+    });
+
+    this.router.navigate(['v2/run', this.reportId1]);
+
+  }
+
+}
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run.service.spec.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run.service.spec.ts
new file mode 100644
index 00000000..a5c7fe4b
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run.service.spec.ts
@@ -0,0 +1,61 @@
+import { TestBed } from '@angular/core/testing';
+
+import { RunService } from './run.service';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { HttpClient } from '@angular/common/http';
+import { environment } from 'src/environments/environment';
+
+describe('RunService', () => {
+  let service: RunService;
+
+  beforeEach(() => 
+  {
+  TestBed.configureTestingModule({
+    imports: [HttpClientTestingModule],
+    providers: [HttpClient, HttpClientTestingModule, RunService]
+  });
+  
+    service = TestBed.get(RunService);
+});
+
+  it('should be created', () => {
+    const service: RunService = TestBed.get(RunService);
+    expect(service).toBeTruthy();
+  });
+
+    it('should getReportData', () => {
+        service.getReportData("test").subscribe((res) => {
+            expect(res).toBe(environment);
+        });
+    });
+
+    it('should getReportDataWithFormFields', () => {
+      service.getReportDataWithFormFields("just", "testing", "").subscribe((res) => {
+          expect(res).toBe(environment);
+      });
+    });
+
+    it('should getDefinitionPageDetails', () => {
+      service.getDefinitionPageDetails(1).subscribe((res) => {
+          expect(res).toBe(environment);
+      });
+    });
+
+    it('should refreshFormFields', () => {
+      service.refreshFormFields("just", "testing").subscribe((res) => {
+          expect(res).toBe(environment);
+      });
+    });
+
+    it('should getFormFieldGroupsData', () => {
+      service.getFormFieldGroupsData("test").subscribe((res) => {
+          expect(res).toBe(environment);
+      });
+    });
+
+    it('should downloadReportExcel', () => {
+      service.downloadReportExcel("test").subscribe((res) => {
+          expect(res).toBe(new Blob);
+      });
+    });
+});
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run.service.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run.service.ts
new file mode 100644
index 00000000..21f94831
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run.service.ts
@@ -0,0 +1,101 @@
+import {Injectable} from '@angular/core';
+import {HttpClient, HttpHeaders} from '@angular/common/http';
+import {Observable, throwError} from 'rxjs';
+import {retry, catchError} from 'rxjs/operators';
+
+import {HtmlParser} from '@angular/compiler';
+import {environment} from '../../../environments/environment';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class RunService {
+    finalArr: any;
+    finalResponseArr: any;
+
+    constructor(private _http: HttpClient) {
+    }
+
+    getReportData(reportId: string): Observable<any> {
+        return this._http.get(environment.baseUrl + 'raptor.htm?action=report.run.container&c_master=' + reportId + '&refresh=Y');
+    }
+
+     getReportDataWithFormFields(queryString: string, reportId: string, groupSelectValue: string): Observable<any> {
+        return this._http.get(environment.baseUrl + 'raptor.htm?action=report.run.container&c_master=' + reportId + queryString +
+        '&refresh=Y&display_content=Y&r_page=0&groupSelectValue='+groupSelectValue);
+     }
+
+    getReportDataWithPageNo(reportId: string, pageNo: string): Observable<any> {
+        if (!pageNo || pageNo === null) {
+            pageNo = '0';
+        }
+        return this._http.get(environment.baseUrl + 'raptor.htm?action=report.run.container&c_master='
+            + reportId + '&refresh=Ydisplay_content=Y&r_page=' + pageNo);
+    }
+
+    getReportDataWithFormFieldsWithPageNo(queryString: string, reportId: string, pageNo: string): Observable<any> {
+        if (!pageNo || pageNo === null) {
+            pageNo = '0';
+        }
+        return this._http.get(environment.baseUrl + 'raptor.htm?action=report.run.container&c_master='
+            + reportId + queryString + '&refresh=Y&display_content=Y&r_page=' + pageNo);
+    }
+
+    getDefinitionPageDetails(IncomingReportId: number): Observable<any> {
+        return this._http.get(environment.baseUrl + 'report/wizard/retrieve_def_tab_wise_data/' + IncomingReportId, {headers: new HttpHeaders({'Content-Type': 'application/json'})});
+    }
+
+    refreshFormFields(reportId: string, queryString: string): Observable<any> {
+        return this._http.get(environment.baseUrl + 'raptor.htm?action=report.formfields.run.container&c_master=' + reportId + queryString);
+    }
+
+    getFormFieldGroupsData(reportId: string): Observable<any> {
+        return this._http.get(environment.baseUrl + 'report/wizard/get_formfield_groups_data/' + reportId);
+    }
+
+    downloadReportExcel(reportId: string): Observable<Blob> {
+        return this._http.get(environment.baseUrl + 'raptor.htm?c_master=' + reportId + '&r_action=report.download.excel.session&page_dowload=true', {responseType: 'blob'});
+    }
+
+    downloadReport(reportId: string, type: string, isGoBack: string): Observable<Blob> {
+        if (type === 'xlsx') {
+            return this._http.get(environment.baseUrl + 'raptor.htm?c_master=' + reportId + '&r_action=report.download.excel.session&page_download=false&go_back=' + isGoBack, {responseType: 'blob'});
+        } else if (type === 'pdf') {
+            return this._http.get(environment.baseUrl + 'raptor.htm?c_master=' + reportId + '&r_action=report.download.pdf.session&page_download=false&go_back=' + isGoBack, {responseType: 'blob'});
+        } else if (type === 'zip') {
+            return this._http.get(environment.baseUrl + 'raptor.htm?c_master=' + reportId + '&r_action=report.download.csv.session&page_download=false&go_back=' + isGoBack, {responseType: 'blob'});
+        } else {
+            return this._http.get(environment.baseUrl + 'raptor.htm?c_master=' + reportId + '&r_action=report.download.excel.session&page_download=false&go_back=' + isGoBack, {responseType: 'blob'});
+        }
+    }
+
+    downloadSinglePageReport(reportId: string, type: string, isGoBack: string): Observable<Blob> {
+        return this._http.get(environment.baseUrl + 'raptor.htm?c_master=' + reportId + '&r_action=report.download.excel.session&page_download=true&go_back=' + isGoBack, {responseType: 'blob'});
+
+    }
+
+    getDashboardReportFormFields(reportId: string): Observable<any> {
+        return this._http.get(environment.baseUrl + 'raptor/dashboard/run/' + reportId);
+    }
+
+    runDashboardReport(reportId: string, queryString: string) {
+        return this._http.get(environment.baseUrl + 'raptor.htm?action=report.run.container&c_master=' + reportId + queryString + '&refresh=Y&display_content=Y&r_page=0', {responseType: 'text'});
+    }
+
+    downloadDashboardReportExcel(reportId: string): Observable<Blob> {
+        return this._http.get(environment.baseUrl + 'raptor.htm?c_master=' + reportId + '&r_action=report.download.excel.session', {responseType: 'blob'});
+    }
+    
+    handleError(error) {
+        let errorMessage = '';
+        if (error.error instanceof ErrorEvent) {
+            // client-side error
+            errorMessage = `Error: ${error.error.message}`;
+        } else {
+            // server-side error
+            errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
+        }
+        window.alert(errorMessage);
+        return throwError(errorMessage);
+    }
+}