vc-create-dashboard 3.0.88 → 3.0.89

package/fesm2022/vc-create-dashboard.mjs

@@ -296,92 +296,40 @@ function filterActiveWidgets(widgets) {
     return (widgets ?? []).filter((w) => !w?.state || w.state === 'ACTIVE');
 }
 
-const TIMEFRAME_DATE_TIME = /^(\d{4})-(\d{2})-(\d{2})[ T](\d{2}):(\d{2}):(\d{2})/;
-function pad(value) {
-    return String(value).padStart(2, '0');
-}
-function formatLocalDateTime(date) {
-    return (`${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ` +
-        `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`);
-}
 /**
- * API timeframe values are UTC `YYYY-MM-DD HH:mm:ss` without a zone suffix.
- * Convert to the browser/system timezone and keep the same format.
- * Date-only values are left unchanged so legacy `YYYY-MM-DD` fields do not shift.
+ * Calendar day `DD-MM-YYYY` for an instant in an IANA timezone.
+ * Used as the date-picker min so past days follow the VComply user timezone.
+ * Falls back to the device calendar day only when timezone is missing or invalid.
  */
-function utcTimeframeToLocal(value) {
-    if (value == null || value === '') {
-        return value ?? null;
+function formatCalendarDateInTimeZone(date, timeZone) {
+    if (!timeZone) {
+        return formatDeviceCalendarDate(date);
+    }
+    try {
+        const parts = new Intl.DateTimeFormat('en-US', {
+            timeZone,
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit',
+        }).formatToParts(date);
+        const get = (type) => parts.find((part) => part.type === type)?.value ?? '';
+        const day = get('day');
+        const month = get('month');
+        const year = get('year');
+        if (!day || !month || !year) {
+            return formatDeviceCalendarDate(date);
+        }
+        return `${day}-${month}-${year}`;
+    }
+    catch (error) {
+        console.error(error);
+        return formatDeviceCalendarDate(date);
     }
-    const raw = String(value).trim();
-    const match = raw.match(TIMEFRAME_DATE_TIME);
-    if (!match) {
-        return raw;
-    }
-    const utcDate = new Date(Date.UTC(Number(match[1]), Number(match[2]) - 1, Number(match[3]), Number(match[4]), Number(match[5]), Number(match[6])));
-    if (isNaN(utcDate.getTime())) {
-        return raw;
-    }
-    return formatLocalDateTime(utcDate);
 }
-function toLocalDashboardTimeframe(timeframe) {
-    if (!timeframe || typeof timeframe !== 'object') {
-        return timeframe;
-    }
-    const source = timeframe;
-    const converted = { ...source };
-    ['from', 'to', 'start_date', 'end_date'].forEach((key) => {
-        if (converted[key] != null && converted[key] !== '') {
-            converted[key] = utcTimeframeToLocal(String(converted[key]));
-        }
-    });
-    return converted;
-}
-/** Converts `timeframe` (and nested `dashboard.timeframe`) on a dashboard API item. */
-function applyLocalTimeframeToDashboard(dashboard) {
-    if (!dashboard || typeof dashboard !== 'object') {
-        return dashboard;
-    }
-    const item = dashboard;
-    const next = { ...item };
-    if (item['timeframe']) {
-        next['timeframe'] = toLocalDashboardTimeframe(item['timeframe']);
-    }
-    if (item['time_frame_from'] != null) {
-        next['time_frame_from'] = utcTimeframeToLocal(item['time_frame_from']);
-    }
-    if (item['time_frame_to'] != null) {
-        next['time_frame_to'] = utcTimeframeToLocal(item['time_frame_to']);
-    }
-    const nested = item['dashboard'];
-    if (nested && typeof nested === 'object' && nested !== dashboard) {
-        next['dashboard'] = applyLocalTimeframeToDashboard(nested);
-    }
-    return next;
-}
-/** Walks getCustomDashboards / customDashboard envelopes and localizes timeframe. */
-function applyLocalTimeframeToDashboardResponse(res) {
-    if (!res || typeof res !== 'object') {
-        return res;
-    }
-    if (Array.isArray(res)) {
-        return res.map((item) => applyLocalTimeframeToDashboard(item));
-    }
-    const body = res;
-    let next = { ...body };
-    if (body['timeframe'] || body['time_frame_from'] || body['time_frame_to']) {
-        next = applyLocalTimeframeToDashboard(next);
-    }
-    if (Array.isArray(body['dashboards'])) {
-        next['dashboards'] = body['dashboards'].map((item) => applyLocalTimeframeToDashboard(item));
-    }
-    if (body['dashboard'] && typeof body['dashboard'] === 'object') {
-        next['dashboard'] = applyLocalTimeframeToDashboard(body['dashboard']);
-    }
-    if (body['data'] && typeof body['data'] === 'object') {
-        next['data'] = applyLocalTimeframeToDashboardResponse(body['data']);
-    }
-    return next;
+function formatDeviceCalendarDate(date) {
+    const day = String(date.getDate()).padStart(2, '0');
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    return `${day}-${month}-${date.getFullYear()}`;
 }
 
 class Configurations {
@@ -544,7 +492,7 @@ class CreateDashboardService {
     fetchCustomDashboardById(id) {
         return this.http
             .get(`${this.env.dashboard}customDashboard/${id}`, this.httpOptions)
-            .pipe(map((res) => applyLocalTimeframeToDashboardResponse(res)), retry(2));
+            .pipe(retry(2));
     }
     getUserInformation() {
         return this.http
@@ -561,20 +509,42 @@ class CreateDashboardService {
         }
         return '';
     }
+    /**
+     * JWT timezone used until organization/?mode=users timezone is loaded.
+     */
+    getTokenTimezone() {
+        try {
+            const stored = localStorage.getItem('currentUser');
+            if (!stored) {
+                return '';
+            }
+            const token = JSON.parse(stored)?.token;
+            if (!token) {
+                return '';
+            }
+            const helper = new JwtHelperService();
+            const tokenInfo = helper.decodeToken(token);
+            let user = tokenInfo?.user;
+            if (typeof user === 'string') {
+                user = JSON.parse(user);
+            }
+            return user?.timezone || '';
+        }
+        catch (error) {
+            console.error(error);
+            return '';
+        }
+    }
     checkDuplicateDashboardName(payload) {
         return this.http
             .post(this.env.dashboard + 'DuplicateDashboard', payload, this.httpOptions)
             .pipe(retry(2));
     }
     createDashboard(payload) {
-        return this.http
-            .post(this.env.dashboard + 'customDashboard', payload, this.httpOptions)
-            .pipe(map((res) => applyLocalTimeframeToDashboardResponse(res)));
+        return this.http.post(this.env.dashboard + 'customDashboard', payload, this.httpOptions);
     }
     updateDashboard(payload, id) {
-        return this.http
-            .put(this.env.dashboard + 'customDashboard/' + id, payload, this.httpOptions)
-            .pipe(map((res) => applyLocalTimeframeToDashboardResponse(res)));
+        return this.http.put(this.env.dashboard + 'customDashboard/' + id, payload, this.httpOptions);
     }
     saveWidgetDetails(payload) {
         return this.http.post(this.env.dashboard + 'createWidgets/creator', payload, this.httpOptions);
@@ -3375,10 +3345,14 @@ class CreateDashboardComponent {
         openOnFocus: false,
         hideInputContainer: true,
         hideOnOutsideClick: true,
+        dayBtnCssClassCallback: (day) => day.format('DD-MM-YYYY') === this.getCurrentDate()
+            ? 'dp-user-current-day'
+            : '',
     };
+    /** organization/?mode=users timezone; JWT timezone is the fallback. */
+    userTimeZone = '';
     fromDatePickerConfig = {
         ...this.datePickerBaseConfig,
-        min: this.getCurrentDate(),
     };
     toDatePickerConfig = {
         ...this.datePickerBaseConfig,
@@ -3421,6 +3395,7 @@ class CreateDashboardComponent {
         this.isSmiley = false;
     }
     ngOnInit() {
+        this.applyFromDateMin();
         this.animateContainer();
         this.getRCList();
         this.checkWhetherAllListsLoaded();
@@ -3436,6 +3411,10 @@ class CreateDashboardComponent {
     }
     getUserInfo() {
         this.createDashboardService.getUserInformation().subscribe((res) => {
+            if (res?.timezone) {
+                this.userTimeZone = res.timezone;
+                this.applyFromDateMin();
+            }
             this.setPermission(res?.roleActions);
             const quickLink = res.quick_link;
             if (quickLink.risk) {
@@ -3591,6 +3570,7 @@ class CreateDashboardComponent {
         event?.stopPropagation();
         this.toDatePicker?.api?.close();
         this.openedDatePicker = 'FROM_DATE';
+        this.applyFromDateMin();
         this.fromDatePicker?.api?.open();
         this.datePickerOverlay = true;
     }
@@ -3645,8 +3625,19 @@ class CreateDashboardComponent {
         this.activateSelector('', false);
     }
     getCurrentDate() {
-        let today = new Date();
-        return dayjs(today).format('DD-MM-YYYY');
+        const timeZone = this.userTimeZone || this.createDashboardService.getTokenTimezone();
+        return formatCalendarDateInTimeZone(new Date(), timeZone);
+    }
+    /** Disables dates before today in the VComply user timezone. */
+    applyFromDateMin() {
+        const config = {
+            ...this.datePickerBaseConfig,
+            min: this.getCurrentDate(),
+        };
+        this.fromDatePickerConfig = config;
+        if (this.fromDatePicker) {
+            this.fromDatePicker.config = config;
+        }
     }
     setToDate(data) {
         let today = new Date(data);
@@ -4765,11 +4756,11 @@ class CreateDashboardComponent {
         this.openedDatePicker = '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateDashboardComponent, deps: [{ token: CreateDashboardService }, { token: PaginationService }, { token: i0.ChangeDetectorRef }, { token: SnackBarService }, { token: PopoverService }, { token: TextCountPipe }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CreateDashboardComponent, selector: "app-create-dashboard", inputs: { feature: "feature", mode: "mode", dashboardId: "dashboardId", dashboardDetails: "dashboardDetails", createdBy: "createdBy", configureWidget: "configureWidget" }, outputs: { close: "close" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)", "document:click": "documentClick($event)" } }, providers: [TextCountPipe], viewQueries: [{ propertyName: "fromDatePicker", first: true, predicate: ["fromDatePicker"], descendants: true }, { propertyName: "toDatePicker", first: true, predicate: ["toDatePicker"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<app-snack-bar></app-snack-bar>\r\n<div class=\"create-dashboard\" *ngIf=\"!openConfigureWidgets\">\r\n  <div class=\"create-dashboard-container vx-d-flex vx-justify-end\" [class.animate-slideInRight]=\"animation\">\r\n    <div class=\"more-option\" *ngIf=\"activeSelector && activeSelector !== 'name'\">\r\n      <app-user-list *ngIf=\"activeSelector === 'whoCanView'\"\r\n        (saveSelectedUsers)=\"saveSelectedList('whoCanView', $event)\" (closeUserList)=\"activateSelector('', false)\"\r\n        [totalPages]=\"totalPages\" [totalList]=\"totalList\" [listDetails]=\"listDetails\" [totalgroupscount]=\"totalgroups\"\r\n        [feature]=\"feature\"></app-user-list>\r\n      <app-responsibility-center *ngIf=\"activeSelector === 'rcList'\"\r\n        [responsibilityCentersList]=\"responsibilityCentersList\" [radioSelection]=\"false\"\r\n        [selectedResponsibilityCenters]=\"\r\n          dashboardForm.selectedResponsibilityCenters\r\n        \" [rcIdKey]=\"'item_id'\" (saveSelectedList)=\"saveSelectedList('rc', $event)\"\r\n        (closeRcList)=\"activateSelector('', false)\">\r\n      </app-responsibility-center>\r\n      <!-- <app-categories *ngIf=\"activeSelector === 'responsibilityCategories'\"\r\n        [categoryList]=\"responsibilityCategoriesTree\" [allCategories]=\"allComplianceCategories\"\r\n        [categoryIdKey]=\"'category_id'\" [selectedCategories]=\"dashboardForm.selectedResponsibilityCategories\"\r\n        (saveSelectedCategory)=\"\r\n          saveSelectedList('responsibilityCategories', $event)\r\n        \" (closeCategoriesList)=\"activateSelector('', false)\"></app-categories> -->\r\n      <app-list-container list *ngIf=\"activeSelector === 'responsibilityCategories'\"\r\n        (close)=\"activateSelector('', false)\">\r\n        <app-program-list body (itemsSelectedChange)=\"onProgramSelectionChange($event)\"\r\n          [selectedItems]=\"selectedPrograms\" [url]=\"programListUrl\"></app-program-list>\r\n        <div class=\"vx-d-flex vx-align-center vx-justify-between vx-w-100\" footer>\r\n          <div class=\"left-side vx-fs-12 vx-d-flex\">\r\n            <ng-container *ngIf=\"allProgamSelected?.length > 0\">\r\n              <button\r\n                class=\"selected-count-box vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\">\r\n                {{ allProgamSelected.length }}\r\n              </button>\r\n              <span class=\"selected-text\">\r\n                Program\r\n                {{ allProgamSelected.length > 1 ? \"Categories\" : \"Category\" }}\r\n                Selected</span>\r\n            </ng-container>\r\n          </div>\r\n          <div class=\"right-side vx-d-flex\">\r\n            <button class=\"cancelBtn\" (click)=\"activateSelector('', false)\">Cancel</button>\r\n            <button class=\"nextBtn\" (click)=\"activateSelector('', false);\">\r\n              Next <i class=\"icons\">&#xe91e;</i>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </app-list-container>\r\n\r\n    </div>\r\n    <div class=\"vx-dialog-container side-dialog\" [class.tablet-width]=\"activeSelector && activeSelector !== 'name'\">\r\n      <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n\r\n      <div class=\"form-group\" [class.disabled]=\"disabled\">\r\n        <div class=\"vx-dialog-body-container\" (scroll)=\"animateImage()\"\r\n          [class.hidden-scroll]=\"popoverService.stopScroll\">\r\n          <!-- Dashboard Name -->\r\n          <div class=\"form-group-row\" [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\r\n            <div class=\"image\">\r\n              <img [ngSrc]=\"ASSETS.dashBoardIcon\" *ngIf=\"\r\n                  !dashboardForm.dashboardName || activeSelector === 'name'\r\n                \" alt=\"\" width=\"36\" height=\"36\" />\r\n              <svg class=\"checkIcon\" *ngIf=\"dashboardForm.dashboardName && activeSelector !== 'name'\"\r\n                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n              </svg>\r\n            </div>\r\n            <div class=\"form\">\r\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                <label\r\n                  class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">Dashboard\r\n                  Name\r\n                  <span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\r\n                <div class=\"vx-input-group\">\r\n                  <input class=\"textField\" placeholder=\"Add dashboard name (Max limit: 30 characters).\"\r\n                    [(ngModel)]=\"dashboardForm.dashboardName\" (keydown)=\"activeSelector = 'name'\"\r\n                    (focusin)=\"activateSelector('name', true)\" (focusout)=\"activateSelector('name', false)\" />\r\n\r\n                  <span class=\"counter\" *ngIf=\"dashboardForm?.dashboardName?.length > 0\">{{ 30 -\r\n                    dashboardForm.dashboardName.length }}</span>\r\n                </div>\r\n\r\n                <p class=\"vx-txt-error\" [appScrollInView]=\"true\" *ngIf=\"\r\n                    submitted &&\r\n                    (dashboardForm?.dashboardName?.length > 30 ||\r\n                      !dashboardForm?.dashboardName)\r\n                  \">\r\n                  {{\r\n                  dashboardForm.dashboardName.length > 30\r\n                  ? \"You have exceeded the maximum character limit of 30 characters.\"\r\n                  : \"Please enter a name for this Dashboard.\"\r\n                  }}\r\n                </p>\r\n\r\n                <div class=\"vx-input-group vx-mt-2\">\r\n                  <vcomply-editor [editorConfig]=\"dashboardDescription\"\r\n                    [(ngModel)]=\"dashboardForm.dashboardDescriptionText\"></vcomply-editor>\r\n                  <span class=\"counter\" *ngIf=\"dashboardForm?.dashboardDescriptionText?.length > 0\">{{\r\n                    250 -\r\n                    (dashboardForm?.dashboardDescriptionText | textCount)\r\n                    }}</span>\r\n                </div>\r\n\r\n                <p class=\"vx-txt-error\" [appScrollInView]=\"true\" *ngIf=\"\r\n                    submitted &&\r\n                    (dashboardForm?.dashboardDescriptionText | textCount) > 250\r\n                  \">\r\n                  You have exceeded the maximum character limit of 250\r\n                  characters.\r\n                </p>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Dashboard Display Criteria  -->\r\n          <span class=\"head-label vx-fs-10 vx-fw-500 vx-txt-white vx-tt-uppercase vx-pl-1 vx-pr-1 vx-lh-4\">\r\n            Dashboard Display Criteria\r\n          </span>\r\n          <app-information-block></app-information-block>\r\n\r\n          <!-- Who -->\r\n          <div class=\"form-group-row\" [class.active]=\"activeSelector === 'whoCanView'\" [class.disabled]=\"\r\n              activeSelector &&\r\n              activeSelector !== 'whoCanView' &&\r\n              activeSelector !== 'name'\r\n            \">\r\n            <div class=\"image\">\r\n              <img [ngSrc]=\"ASSETS.dashBoardUsersIcon\" *ngIf=\"\r\n                  dashboardForm?.selectedViewers?.length == 0 ||\r\n                  activeSelector === 'whoCanView'\r\n                \" alt=\"\" width=\"36\" height=\"36\" />\r\n              <svg class=\"checkIcon\" *ngIf=\"\r\n                  dashboardForm?.selectedViewers?.length > 0 &&\r\n                  activeSelector !== 'whoCanView'\r\n                \" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n              </svg>\r\n            </div>\r\n            <div class=\"form\">\r\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">Who\r\n                  can view this dashboard?<span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\r\n                <div *ngIf=\"dashboardForm?.selectedViewers?.length == 0\"\r\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n                  (click)=\"activateSelector('whoCanView', true)\">\r\n                  <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\r\n                    Who can view this dashboard?\r\n                  </div>\r\n                </div>\r\n\r\n                <div *ngIf=\"dashboardForm?.selectedViewers?.length > 0\"\r\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\r\n                  <ng-container *ngIf=\"!groupsEnabled\" id=\"onlyuserslist\">\r\n                    <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"\r\n                        let user of dashboardForm?.selectedViewers?.slice(0, 1)\r\n                      \">\r\n                      <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" *ngIf=\"\r\n                          !listDetails.nonRemovableUsersList.includes(\r\n                            user.member_id\r\n                          )\r\n                        \" (click)=\"remove('whoCanView', user)\">&#xe9ae;</i>\r\n                      <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"user.member_name\"\r\n                        placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ user.member_name\r\n                        }}</span>\r\n                      <button *ngIf=\"\r\n                          dashboardForm?.selectedViewers?.length > 1 &&\r\n                          !groupsEnabled\r\n                        \"\r\n                        class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                        appPopover (click)=\"userList.popover()\" placement=\"left\">\r\n                        +{{ dashboardForm?.selectedViewers?.slice(1).length }}\r\n                      </button>\r\n                    </div>\r\n                    <app-popover #userList [dontCloseonClick]=\"true\">\r\n                      <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                          <li *ngFor=\"\r\n                              let user of dashboardForm?.selectedViewers\r\n                                | slice : 1;\r\n                              let j = index\r\n                            \">\r\n                            <div class=\"avatar-card\">\r\n                              <span class=\"value\" [arTooltip]=\"user?.member_name\" placement=\"bottom-left\" delay=\"0\"\r\n                                type=\"black\" [tooltipMandatory]=\"false\">\r\n                                <i class=\"icons cross-icon\" *ngIf=\"\r\n                                    !listDetails.nonRemovableUsersList.includes(\r\n                                      user.member_id\r\n                                    ) && !groupsEnabled\r\n                                  \" (click)=\"remove('whoCanView', user)\">&#xe90d;</i>\r\n                                {{ user?.member_name }}\r\n                              </span>\r\n                            </div>\r\n                          </li>\r\n                        </ul>\r\n                      </div>\r\n                    </app-popover>\r\n                  </ng-container>\r\n\r\n                  <div *ngIf=\"groupsEnabled\" class=\"vx-d-flex vx-align-center\">\r\n                    <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n                      <span class=\"chipName vx-fs-11 vx-label-txt\">USER(S)</span>\r\n                      <button\r\n                        class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                        appPopover (click)=\"userCount.popover()\" placement=\"left\">\r\n                        {{ dashboardForm?.selectedViewers?.length }}\r\n                      </button>\r\n                    </div>\r\n                    <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"\r\n                        dashboardForm?.selectedGroup?.length &&\r\n                        dashboardForm?.selectedViewers?.length\r\n                      \">&</span>\r\n                    <div *ngIf=\"dashboardForm?.selectedGroup?.length\" id=\"usersandgroups\"\r\n                      class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n                      <span class=\"chipName vx-fs-11 vx-label-txt\">USER GROUP(S)</span>\r\n                      <button\r\n                        class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                        appPopover (click)=\"groupCount.popover()\" placement=\"right\">\r\n                        {{ dashboardForm?.selectedGroup?.length }}\r\n                      </button>\r\n                    </div>\r\n\r\n                    <app-popover #userCount [dontCloseonClick]=\"true\">\r\n                      <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                          <li *ngFor=\"let data of dashboardForm?.selectedViewers\">\r\n                            <div class=\"avatar-card\">\r\n                              <span class=\"value\" [arTooltip]=\"data.member_name\" placement=\"bottom-left\" delay=\"0\"\r\n                                type=\"black\" [tooltipMandatory]=\"false\">\r\n                                <i class=\"icons cross-icon\" *ngIf=\"\r\n                                    !listDetails.nonRemovableUsersList.includes(\r\n                                      data.member_id\r\n                                    )\r\n                                  \" (click)=\"remove('whoCanView', data)\">&#xe90d;</i>\r\n                                {{ data.member_name }}\r\n                              </span>\r\n                            </div>\r\n                          </li>\r\n                        </ul>\r\n                      </div>\r\n                    </app-popover>\r\n\r\n                    <app-popover #groupCount [dontCloseonClick]=\"true\">\r\n                      <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                          <li *ngFor=\"let data of dashboardForm?.selectedGroup\">\r\n                            <div class=\"avatar-card\">\r\n                              <span class=\"value\" [arTooltip]=\"data.group_name\" placement=\"bottom-left\" delay=\"0\"\r\n                                type=\"black\" [tooltipMandatory]=\"false\">\r\n                                <i class=\"icons cross-icon\" (click)=\"remove('whoCanViewGroup', data)\">&#xe90d;</i>\r\n                                {{ data.group_name }}\r\n                              </span>\r\n                            </div>\r\n                          </li>\r\n                        </ul>\r\n                      </div>\r\n                    </app-popover>\r\n                  </div>\r\n\r\n                  <button *ngIf=\"activeSelector !== 'whoCanView'\"\r\n                    class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n                    (click)=\"activateSelector('whoCanView', true)\">\r\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Responsibility Center -->\r\n          <div class=\"form-group-row\" [class.active]=\"activeSelector === 'rcList'\" [class.disabled]=\"\r\n              activeSelector &&\r\n              activeSelector !== 'rcList' &&\r\n              activeSelector !== 'name'\r\n            \">\r\n            <div class=\"image\">\r\n              <img *ngIf=\"\r\n                  dashboardForm?.selectedResponsibilityCenters?.length == 0 ||\r\n                  activeSelector === 'rcList'\r\n                \" [ngSrc]=\"ASSETS.dashBoardRcIcon\" alt=\"\" width=\"36\" height=\"36\" />\r\n              <svg *ngIf=\"\r\n                  dashboardForm?.selectedResponsibilityCenters?.length > 0 &&\r\n                  activeSelector !== 'rcList'\r\n                \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n              </svg>\r\n            </div>\r\n            <div class=\"form\">\r\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                <label\r\n                  class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">RESPONSIBILITY\r\n                  CENTER(S)</label>\r\n                <div *ngIf=\"\r\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0\r\n                  \" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n                  (click)=\"activateSelector('rcList', true)\" [class.error]=\"\r\n                    submitted &&\r\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\r\n                    allProgamSelected?.length ==\r\n                      0 &&\r\n                    dashboardForm?.selectedRiskCategories?.length == 0\r\n                  \">\r\n                  <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\r\n                    Select the Responsibility Center(s) that you would like<br />displayed\r\n                    in the Dashboard, if any.\r\n                  </div>\r\n                </div>\r\n\r\n                <div *ngIf=\"\r\n                    dashboardForm?.selectedResponsibilityCenters?.length > 0\r\n                  \" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\r\n                  <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"\r\n                      let rc of dashboardForm?.selectedResponsibilityCenters?.slice(\r\n                        0,\r\n                        1\r\n                      )\r\n                    \">\r\n                    <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" (click)=\"remove('rc', rc)\">&#xe9ae;</i>\r\n                    <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"rc.item_name\" placement=\"bottom-left\"\r\n                      delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ rc.item_name }}</span>\r\n                    <button *ngIf=\"\r\n                        dashboardForm?.selectedResponsibilityCenters?.length > 1\r\n                      \"\r\n                      class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                      appPopover (click)=\"rcList.popover()\" placement=\"left\">\r\n                      +{{\r\n                      dashboardForm?.selectedResponsibilityCenters?.slice(1)\r\n                      .length\r\n                      }}\r\n                    </button>\r\n\r\n                    <app-popover #rcList [dontCloseonClick]=\"true\">\r\n                      <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                          <li *ngFor=\"\r\n                              let rc of dashboardForm?.selectedResponsibilityCenters\r\n                                | slice : 1;\r\n                              let j = index\r\n                            \">\r\n                            <div class=\"avatar-card\">\r\n                              <span class=\"value\" [arTooltip]=\"rc?.item_name\" placement=\"bottom-left\" delay=\"0\"\r\n                                type=\"black\" [tooltipMandatory]=\"false\">\r\n                                <i class=\"icons cross-icon\" (click)=\"remove('rc', rc)\">&#xe90d;</i>\r\n                                {{ rc?.item_name }}\r\n                              </span>\r\n                            </div>\r\n                          </li>\r\n                        </ul>\r\n                      </div>\r\n                    </app-popover>\r\n                  </div>\r\n\r\n                  <button *ngIf=\"activeSelector !== 'rcList'\"\r\n                    class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n                    (click)=\"activateSelector('rcList', true)\">\r\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Program -->\r\n          <div class=\"form-group-row\" [class.active]=\"activeSelector === 'responsibilityCategories'\" [class.disabled]=\"\r\n              activeSelector &&\r\n              activeSelector !== 'responsibilityCategories' &&\r\n              activeSelector !== 'name'\r\n            \">\r\n            <div class=\"image\">\r\n              <img *ngIf=\"\r\n                  allProgamSelected?.length ==\r\n                    0 || activeSelector === 'responsibilityCategories'\r\n                \" [ngSrc]=\"ASSETS.dashBoardProgramIcon\" alt=\"\" width=\"36\" height=\"36\" />\r\n              <svg *ngIf=\"\r\n                  allProgamSelected?.length > 0 &&\r\n                  activeSelector !== 'responsibilityCategories'\r\n                \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n              </svg>\r\n            </div>\r\n            <div class=\"form\">\r\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                <label\r\n                  class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">PROGRAM</label>\r\n                <div *ngIf=\"\r\n                    allProgamSelected?.length == 0\r\n                  \" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n                  (click)=\"activateSelector('responsibilityCategories', true)\" [class.error]=\"\r\n                    submitted &&\r\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\r\n                    allProgamSelected?.length ==\r\n                      0 &&\r\n                    dashboardForm?.selectedRiskCategories?.length == 0\r\n                  \">\r\n                  <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\r\n                    Select the Program(s) that you would like displayed in\r\n                    the<br />Dashboard, if any.\r\n                  </div>\r\n                </div>\r\n\r\n                <div *ngIf=\"\r\n                    allProgamSelected?.length > 0\r\n                  \" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\r\n                  <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"\r\n                      let rCategory of allProgamSelected?.slice(\r\n                        0,\r\n                        1\r\n                      )\r\n                    \">\r\n                    <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\r\n                      (click)=\"remove('responsibilityCategories', rCategory)\">&#xe9ae;</i>\r\n                    <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"rCategory.item_name\"\r\n                      placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ rCategory.name\r\n                      }}</span>\r\n                    <button *ngIf=\"\r\n                        allProgamSelected\r\n                          ?.length > 1\r\n                      \"\r\n                      class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                      appPopover (click)=\"rCategoryList.popover()\" placement=\"left\">\r\n                      +{{\r\n                      allProgamSelected?.slice(\r\n                      1\r\n                      ).length\r\n                      }}\r\n                    </button>\r\n\r\n                    <app-popover #rCategoryList [dontCloseonClick]=\"true\">\r\n                      <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                          <li *ngFor=\"\r\n                              let rCategory of allProgamSelected\r\n                                | slice : 1;\r\n                              let j = index\r\n                            \">\r\n                            <div class=\"avatar-card\">\r\n                              <span class=\"value\" [arTooltip]=\"rCategory?.name\" placement=\"bottom-left\" delay=\"0\"\r\n                                type=\"black\" [tooltipMandatory]=\"false\">\r\n                                <i class=\"icons cross-icon\" (click)=\"\r\n                                    remove(\r\n                                      'responsibilityCategories',\r\n                                      rCategory\r\n                                    )\r\n                                  \">&#xe90d;</i>\r\n                                {{ rCategory?.name }}\r\n                              </span>\r\n                            </div>\r\n                          </li>\r\n                        </ul>\r\n                      </div>\r\n                    </app-popover>\r\n                  </div>\r\n\r\n                  <button *ngIf=\"activeSelector !== 'responsibilityCategories'\"\r\n                    class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n                    (click)=\"activateSelector('responsibilityCategories', true)\">\r\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n\r\n          <!-- Timeframe -->\r\n          <div class=\"form-group-row\" [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\r\n            <div class=\"image\">\r\n              <img *ngIf=\"\r\n                  !dashboardForm?.selectedFromDate ||\r\n                  !dashboardForm?.selectedToDate\r\n                \" [ngSrc]=\"ASSETS.dashBoardTimeFrameIcon\" alt=\"\" width=\"36\" height=\"36\" />\r\n              <svg *ngIf=\"\r\n                  dashboardForm?.selectedFromDate &&\r\n                  dashboardForm?.selectedToDate\r\n                \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n              </svg>\r\n            </div>\r\n            <div class=\"form\">\r\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                <label\r\n                  class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">TIMEFRAME</label>\r\n                <label class=\"vx-control-panel-sub-label\">Select how long the selected information should be displayed.\r\n                  Once the selected timeframe expires, the dashboard will automatically be deactivated and no longer\r\n                  displayed to users. If no timeframe is selected, the information\r\n                  will be displayed permanently.</label>\r\n                <div class=\"input-group vx-d-flex vx-justify-between\">\r\n                  <div class=\"date-select\">\r\n                    <i class=\"icons\">&#xe92d;</i>\r\n                    <input type=\"text\" id=\"from_date\" [value]=\"\r\n                        dashboardForm?.selectedFromDate | date : 'dd MMM yyyy'\r\n                      \" [placeholder]=\"'From'\" (click)=\"openFromDatePicker($event)\" readonly />\r\n                    <dp-date-picker #fromDatePicker [(ngModel)]=\"dashboardForm.selectedFromDate\"\r\n                      placeholder=\"Select Date\" (onSelect)=\"\r\n                        closeFromDatePicker(); datePickerOverlay = false\r\n                      \" [config]=\"fromDatePickerConfig\"></dp-date-picker>\r\n                    <div class=\"overlay\" (click)=\"closeFromDatePicker()\" *ngIf=\"datePickerOverlay\"></div>\r\n                  </div>\r\n                  <div class=\"date-select\" *ngIf=\"!hideToDate\" [class.disabled]=\"!dashboardForm?.selectedFromDate\">\r\n                    <i class=\"icons\">&#xe92d;</i>\r\n                    <input type=\"text\" id=\"to_date\" [value]=\"\r\n                        dashboardForm?.selectedToDate | date : 'dd MMM yyyy'\r\n                      \" [placeholder]=\"'To'\" (click)=\"openToDatePicker($event)\" readonly />\r\n                    <dp-date-picker #toDatePicker [(ngModel)]=\"dashboardForm.selectedToDate\" placeholder=\"Select Date\"\r\n                      (onSelect)=\"\r\n                        closeToDatePicker(); datePickerOverlay = false\r\n                      \" [config]=\"toDatePickerConfig\"></dp-date-picker>\r\n                    <div class=\"overlay\" (click)=\"closeToDatePicker()\" *ngIf=\"datePickerOverlay\"></div>\r\n                  </div>\r\n                </div>\r\n                <p class=\"vx-txt-error\" [appScrollInView]=\"true\" *ngIf=\"\r\n                    submitted &&\r\n                    dashboardForm.selectedFromDate &&\r\n                    !dashboardForm.selectedToDate\r\n                  \">\r\n                  Select a time-frame.\r\n                </p>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Email Summary -->\r\n          <!-- <div\r\n            class=\"form-group-row\"\r\n            [class.active]=\"activeSelector === 'frequency'\"\r\n            [class.disabled]=\"\r\n              activeSelector &&\r\n              activeSelector !== 'frequency' &&\r\n              activeSelector !== 'name'\r\n            \"\r\n          >\r\n            <div class=\"image\">\r\n              <img\r\n                *ngIf=\"!dashboardForm.frequencyMessage\"\r\n                [ngSrc]=\"ASSETS.dashBoardEmailSummariesIcon\"\r\n                alt=\"\"\r\n                width=\"36\"\r\n                height=\"36\"\r\n              />\r\n              <svg\r\n                *ngIf=\"dashboardForm.frequencyMessage\"\r\n                class=\"checkIcon\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                viewBox=\"0 0 52 52\"\r\n              >\r\n                <circle\r\n                  class=\"checkIcon__circle\"\r\n                  cx=\"26\"\r\n                  cy=\"26\"\r\n                  r=\"25\"\r\n                  fill=\"none\"\r\n                />\r\n                <path\r\n                  class=\"checkIcon__check\"\r\n                  fill=\"none\"\r\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n                />\r\n              </svg>\r\n            </div>\r\n            <div class=\"form\">\r\n              <div class=\"vx-form-group vx-d-block\">\r\n                <label\r\n                  class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\r\n                  >Email Summaries</label\r\n                >\r\n                <label class=\"vx-control-panel-sub-label\"\r\n                  >If you would like to send a summary of this Dashboard, please\r\n                  select a frequency(By default VComply sends a weekly\r\n                  Summary).</label\r\n                >\r\n                <div\r\n                  *ngIf=\"!dashboardForm.frequencyMessage\"\r\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n                  (click)=\"activateSelector('frequency', true)\"\r\n                >\r\n                  <div\r\n                    class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n                  >\r\n                    Email Summaries\r\n                  </div>\r\n                </div>\r\n\r\n                <div\r\n                  *ngIf=\"dashboardForm.frequencyMessage\"\r\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n                >\r\n                  <div\r\n                    class=\"selectBoxText vx-fs-13 vx-paragraph-txt\"\r\n                    [arTooltip]=\"dashboardForm.frequencyMessage\"\r\n                    placement=\"bottom-left\"\r\n                    type=\"black\"\r\n                    delay=\"0\"\r\n                    [tooltipMandatory]=\"false\"\r\n                    [innerHTML]=\"dashboardForm.frequencyMessage\"\r\n                  ></div>\r\n\r\n                  <button\r\n                    *ngIf=\"\r\n                      dashboardForm.frequencyMessage &&\r\n                      activeSelector !== 'frequency'\r\n                    \"\r\n                    class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n                    (click)=\"activateSelector('frequency', true)\"\r\n                  >\r\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div> -->\r\n        </div>\r\n        <div class=\"button-block\">\r\n          <button class=\"vx-btn block primary\" [disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n            (click)=\"configureDashboard()\">\r\n            Next: Configure Widgets\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <button class=\"close-dialog\" type=\"button\" [disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n        (click)=\"close.emit({ mode: 'discard' })\" [arTooltip]=\"'[Esc] to close'\" placement=\"left\" type=\"black\" delay=\"0\"\r\n        [tooltipMandatory]=\"true\" [class.hide]=\"activeSelector && activeSelector !== 'name'\">\r\n        <i class=\"icons\">&#xe93f;</i>\r\n      </button>\r\n      <div class=\"global-confirmation-alert\" *ngIf=\"\r\n          submitted &&\r\n          dashboardForm?.selectedResponsibilityCenters?.length == 0 \r\n        \">\r\n        <div class=\"global-confirmation-alert-top\">\r\n          <span class=\"icon-block\">\r\n            <i class=\"icons\">&#xe930;</i>\r\n          </span>\r\n          <p class=\"text\" *ngIf=\"showRiskCategory\">\r\n            Select a Responsibility Center or Risk Category.\r\n          </p>\r\n          <p class=\"text\" *ngIf=\"!showRiskCategory\">\r\n            Select a Responsibility Center.\r\n          </p>\r\n        </div>\r\n        <div class=\"global-confirmation-alert-bottom\">\r\n          <p class=\"message\"></p>\r\n          <div class=\"button-group\">\r\n            <button class=\"fill\" type=\"button\" (click)=\"submitted = false\">\r\n              OKAY\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<app-smiley-dialog *ngIf=\"isSmiley\" [message]=\"smileyMessage\"></app-smiley-dialog>\r\n\r\n<app-configure-widgets *ngIf=\"openConfigureWidgets\" [mode]=\"mode\" [displayedWidgets]=\"displayedWidgets\"\r\n  [showRisk]=\"showRiskWidgets\" [showCompliance]=\"!showComplianceWidgets\" [selectedWidgetsData]=\"selectedWidgets\"\r\n  (widgetsDataModified)=\"setSelectedWidgets($event)\"\r\n  (closeConfigureWidgets)=\"closeConfigureWidgets($event)\"></app-configure-widgets>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/dialog/dialog.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";::ng-deep .create-dashboard-container{width:100vw;background:#161b2fcc}::ng-deep .create-dashboard-container .vx-dialog-container{background-color:#fff;border:none;position:relative}@media screen and (max-width: 1280px){::ng-deep .create-dashboard-container .vx-dialog-container.tablet-width{width:28px!important}::ng-deep .create-dashboard-container .vx-dialog-container.tablet-width .form-group .vx-dialog-body-container{overflow:hidden}}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog{display:flex;position:absolute;top:8px;right:8px;height:32px;width:32px;font-size:16px;color:#161b2f;cursor:pointer;background:transparent;border:none;border-radius:2px;z-index:2;align-items:center;justify-content:center}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog:hover{background:#f1f1f1}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog:disabled{pointer-events:none;filter:grayscale(1);opacity:.3}@media screen and (max-width: 1280px){::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog.hide{display:none}}::ng-deep .create-dashboard .more-option{width:calc(100% - 500px);border-right:1px solid #f1f1f1;float:left}@media screen and (max-width: 1280px){::ng-deep .create-dashboard .more-option{width:calc(100vw - 28px)}::ng-deep .create-dashboard .more-option app-user-list .user-list{right:28px}::ng-deep .create-dashboard .more-option app-responsibility-center .responsibility-center{right:28px}::ng-deep .create-dashboard .more-option app-categories .category-list{right:28px}::ng-deep .create-dashboard .more-option app-risk-categories .risk-category-list{right:28px}::ng-deep .create-dashboard .more-option app-frequency .create-frequency{right:28px}}::ng-deep .form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container{padding:36px 28px 0 40px!important;height:calc(100vh - 50px);overflow:auto;margin-left:-22px;background-color:transparent;position:relative;border-radius:0 0 0 30px;background:transparent}@-moz-document url-prefix(){::ng-deep .form-group .vx-dialog-body-container.hidden-scroll{overflow:hidden}}::ng-deep .form-group .vx-dialog-body-container .form-group-row{display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image{width:36px;min-width:36px;height:36px;margin-left:-36px;margin-right:20px;margin-top:28px;display:flex;align-items:center;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image img{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon{width:32px;height:32px;background:#fff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input{height:40px;border-radius:4px;border:1px solid #dbdbdb;outline:none;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+vcomply-editor{margin-top:8px;display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:after{border-left:none;border-bottom:1px solid #707070;border-right:1px solid #707070;border-top:none;content:\"\";display:inline-block;right:15px;position:absolute;top:calc(50% + 8px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:hover .custom-input{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;position:relative;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .edit{border:1px solid #f1f1f1;border-radius:2px;background:#fff;outline:none;cursor:pointer;height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left{width:auto;display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left.frequency-left{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;width:calc(100% - 70px)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container{width:auto}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip{border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip i{cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip .value{max-width:100px;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .count{border-radius:2px;height:24px;padding:2px 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:300px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count{background:#1e5dd3;border-radius:20px;color:#fff;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group{display:flex;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group span.counter{background:transparent;color:#161b2f;font-size:9px;font-weight:500;position:absolute;top:0;right:0;border-radius:3px;height:16px;text-align:center;line-height:16px;padding:0 2px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group vcomply-editor{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor .editor-container .editable-block.bottom:before,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group vcomply-editor .editor-container .editable-block.bottom:before{opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group.vx-input-group{margin-top:8px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor{display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container{border-radius:4px;border-color:#dbdbdb}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:hover{border-color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:hover .editor-tools{border-top-color:#1e5dd3!important;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;max-height:90px}@media not all and (min-resolution: .001dpcm){@supports (-webkit-appearance: none){::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block:before,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editable-block:before{opacity:.72}}}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools{border-color:#dbdbdb;border-radius:0 0 2px 2px;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input{height:2.5rem;border-radius:.25rem;border:1px solid #dbdbdb;background:#fff;outline:none;padding:.1875rem .75rem;line-height:1.25rem;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:12px;width:94%;display:block;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input.error{border:1px solid #d93b41}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel i{font-size:12px;color:#1e5dd3;margin-left:7px;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;margin-bottom:.5rem;display:block;text-transform:none;width:100%;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label span.required{color:#eb2424}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel+.vx-control-panel-sub-label{margin-top:-.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.radio{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item svg{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio+app-cs-radio{margin-top:.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select{position:relative;width:calc(50% - .25rem);overflow:hidden;height:40px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input{position:relative;z-index:1;padding-left:36px!important;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select dp-date-picker{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;pointer-events:none;z-index:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select i{display:flex;justify-content:center;align-items:center;height:39px;width:14px;position:absolute;left:12px;top:0;color:#bcbcbc;font-size:14px;pointer-events:none;z-index:2}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled{pointer-events:none;filter:grayscale(1);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled input{background:#f1f1f1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel span.sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;text-transform:none;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row.disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active{pointer-events:none;filter:grayscale(0);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image{filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image:before{display:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form{opacity:1;filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form .custom-input,::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form input[type=text]{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container:after{content:\"\";width:100%;display:block;height:30px;position:sticky;right:0;bottom:0;left:0;z-index:6;background:linear-gradient(to bottom,#fff0,#ffffffbf 22%,#fff);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#00ffffff\",endColorstr=\"#ffffff\",GradientType=0)}::ng-deep .form-group .button-block{position:relative;z-index:2}::ng-deep .form-group .button-block button{font-size:13px!important;letter-spacing:1.3px!important;height:50px;line-height:48px!important}::ng-deep .form-group .button-block button:disabled{background:#f1f1f1!important;border-color:#f1f1f1!important;color:#747576!important;opacity:1!important;filter:unset!important}::ng-deep .form-group.disabled{pointer-events:none;z-index:2}::ng-deep .form-group.disabled .image{position:relative;filter:grayscale(1)}::ng-deep .form-group.disabled .image:before{content:\"\";position:absolute;inset:0;background:#fff;opacity:.7}::ng-deep .form-group.disabled .form{opacity:.3;filter:grayscale(1)}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}.action-list{width:220px}.action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.action-list ul.action-item{display:block}.action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.action-list ul.action-item li button:hover{background:#f3f3f3}.action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.action-list ul.action-item li .avatar-card.within-con{display:block}.action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.action-list ul.action-item li .avatar-card .avatar img{width:100%}.action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:4px}.action-list ul.action-item li .avatar-card span.value i.cross-icon{color:#747576}.action-list ul.action-item li .avatar-card.no-image{display:block}.action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.action-list ul.action-item li .chip-item span.id{font-size:9px}.action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}.global-confirmation-alert{display:block;position:absolute;z-index:9;right:0;bottom:0;left:0;background:#d93b41}.global-confirmation-alert-top{display:flex;align-items:center;justify-content:flex-start;padding:20px 20px 12px}.global-confirmation-alert span.icon-block{height:36px;width:36px;border-radius:50%;background:#fff;border:1px solid #dcdcdc;display:flex;justify-content:center;align-items:center;margin-right:16px}.global-confirmation-alert span.icon-block i{color:#d93b41;font-size:12px}.global-confirmation-alert p.text{color:#fff;font-size:14px;font-weight:300;margin:0;width:calc(100% - 52px)}.global-confirmation-alert-bottom{display:flex;align-items:center;padding:0 12px 12px 72px;background:#d93b41}.global-confirmation-alert-bottom .button-group{display:flex}.global-confirmation-alert-bottom p.message{font-size:14px;font-weight:500;margin:0;line-height:20px;color:#fff}.global-confirmation-alert button{height:24px;width:64px;border:1px solid #000;border-radius:2px;display:flex;align-items:center;justify-content:center;line-height:22px;cursor:pointer;font-size:11px;text-transform:uppercase;font-weight:500;padding:0}.global-confirmation-alert button+button{margin-left:4px}.global-confirmation-alert button.fill{background:#fff;color:#1e5dd3;border-color:#fff}.global-confirmation-alert button.outline{background:transparent;color:#fff;border-color:#fff}::ng-deep marx-modal .popup-modal-background,::ng-deep vcomply-modal .popup-modal-background{background-color:#161b2fcc!important}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;font-size:13px;color:#747576;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField::placeholder{font-size:13px;color:#747576}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxEnable.error{border-color:#eb2424}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer .chipName.no-width{max-width:unset}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}::ng-deep .cdk-overlay-pane{inset:0!important;align-items:center;justify-content:center}::ng-deep .cdk-overlay-pane .dp-popup{z-index:999;display:flex!important;align-items:center;justify-content:center;width:100vw;height:100vh;background:transparent!important;border:none!important;box-shadow:unset!important}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar{width:412px!important;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}.left-side{color:#707070}.right-side button{border-radius:2px;height:24px;background:#1e5dd3!important;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;font-weight:500;border:none!important;padding:0 8px;margin:0 0 0 8px}.right-side button i{margin-left:8px;font-size:11px}.right-side button:disabled{background:#f1f1f1!important;color:#747576!important;opacity:1}.right-side button.cancelBtn{background:transparent!important;color:#eb2424!important}.selected-count-box{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem;position:relative}.selected-text{color:#707070;font-size:11px;font-weight:500;position:fixed;padding-left:2.5rem}::ng-deep .vc-divider{border-top:.5px solid #dbdbdb;width:100%}::ng-deep .vc-cf-container{border-bottom:1px solid #E3E3E9}::ng-deep .vc-cf-container:first-of-type,::ng-deep .vc-cf-container:only-child{border-top:1px solid #E3E3E9}::ng-deep .vc-cf-container .cf-name{width:9.25rem}::ng-deep .vc-cf-container .cf-value{width:calc(100% - 9.75rem)}::ng-deep .vc-cf-container .cf-value input{height:24px!important;border:1px solid #CDCED6!important;padding:0 .5rem!important;color:#565a6f!important;font-size:11px!important}::ng-deep .vc-cf-container .cf-value input::placeholder{color:#a9aab6!important}::ng-deep .vc-cf-container .cf-value input:hover{border-color:#343952!important}::ng-deep .vc-cf-container .cf-value input:focus{outline:none;border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd31a}.head-label{background:#565a6f;border-radius:.125rem;height:1rem;position:relative}.head-label:before{background:#e3e3e9;content:\"\";position:absolute;top:7px;left:-40px;width:500px;height:1px;z-index:-1}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.MarxEditorComponent, selector: "vcomply-editor", inputs: ["editorConfig"], outputs: ["comment", "sendSavedFiles", "popup"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: ConfigureWidgetsComponent, selector: "app-configure-widgets", inputs: ["selectedWidgetsData", "displayedWidgets", "showRisk", "showCompliance", "mode"], outputs: ["widgetsDataModified", "closeConfigureWidgets"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closedOnOverlay"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "component", type: LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "component", type: SnackBarComponent, selector: "app-snack-bar" }, { kind: "directive", type: ScrollInViewDirective, selector: "[appScrollInView]", inputs: ["appScrollInView"] }, { kind: "component", type: SmileyDialogComponent, selector: "app-smiley-dialog", inputs: ["message", "autoClose", "actionButtons"], outputs: ["action", "closeSmiley"] }, { kind: "component", type: i17.DatePickerComponent, selector: "dp-date-picker", inputs: ["config", "mode", "placeholder", "disabled", "displayDate", "theme", "minDate", "maxDate", "minTime", "maxTime"], outputs: ["open", "close", "onChange", "onGoToCurrent", "onLeftNav", "onRightNav", "onSelect"] }, { kind: "directive", type: i1$1.NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "src", "srcset"] }, { kind: "component", type: ProgramListComponent, selector: "app-program-list", inputs: ["items", "selectedItems", "url"], outputs: ["itemSelected", "itemDeselected", "itemsSelectedChange"] }, { kind: "component", type: ListContainerComponent, selector: "app-list-container", inputs: ["heading"], outputs: ["close"] }, { kind: "component", type: InformationBlockComponent, selector: "app-information-block" }, { kind: "component", type: UserListComponent, selector: "app-user-list", inputs: ["selectionType", "listDetails", "totalPages", "limit", "totalList", "feature", "totalgroupscount"], outputs: ["closeUserList", "saveSelectedUsers"] }, { kind: "component", type: ResponsibilityCenterComponent, selector: "app-responsibility-center", inputs: ["responsibilityCentersList", "selectedResponsibilityCenters", "rcIdKey", "radioSelection"], outputs: ["saveSelectedList", "closeRcList"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: TextCountPipe, name: "textCount" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CreateDashboardComponent, selector: "app-create-dashboard", inputs: { feature: "feature", mode: "mode", dashboardId: "dashboardId", dashboardDetails: "dashboardDetails", createdBy: "createdBy", configureWidget: "configureWidget" }, outputs: { close: "close" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)", "document:click": "documentClick($event)" } }, providers: [TextCountPipe], viewQueries: [{ propertyName: "fromDatePicker", first: true, predicate: ["fromDatePicker"], descendants: true }, { propertyName: "toDatePicker", first: true, predicate: ["toDatePicker"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<app-snack-bar></app-snack-bar>\r\n<div class=\"create-dashboard\" *ngIf=\"!openConfigureWidgets\">\r\n  <div class=\"create-dashboard-container vx-d-flex vx-justify-end\" [class.animate-slideInRight]=\"animation\">\r\n    <div class=\"more-option\" *ngIf=\"activeSelector && activeSelector !== 'name'\">\r\n      <app-user-list *ngIf=\"activeSelector === 'whoCanView'\"\r\n        (saveSelectedUsers)=\"saveSelectedList('whoCanView', $event)\" (closeUserList)=\"activateSelector('', false)\"\r\n        [totalPages]=\"totalPages\" [totalList]=\"totalList\" [listDetails]=\"listDetails\" [totalgroupscount]=\"totalgroups\"\r\n        [feature]=\"feature\"></app-user-list>\r\n      <app-responsibility-center *ngIf=\"activeSelector === 'rcList'\"\r\n        [responsibilityCentersList]=\"responsibilityCentersList\" [radioSelection]=\"false\"\r\n        [selectedResponsibilityCenters]=\"\r\n          dashboardForm.selectedResponsibilityCenters\r\n        \" [rcIdKey]=\"'item_id'\" (saveSelectedList)=\"saveSelectedList('rc', $event)\"\r\n        (closeRcList)=\"activateSelector('', false)\">\r\n      </app-responsibility-center>\r\n      <!-- <app-categories *ngIf=\"activeSelector === 'responsibilityCategories'\"\r\n        [categoryList]=\"responsibilityCategoriesTree\" [allCategories]=\"allComplianceCategories\"\r\n        [categoryIdKey]=\"'category_id'\" [selectedCategories]=\"dashboardForm.selectedResponsibilityCategories\"\r\n        (saveSelectedCategory)=\"\r\n          saveSelectedList('responsibilityCategories', $event)\r\n        \" (closeCategoriesList)=\"activateSelector('', false)\"></app-categories> -->\r\n      <app-list-container list *ngIf=\"activeSelector === 'responsibilityCategories'\"\r\n        (close)=\"activateSelector('', false)\">\r\n        <app-program-list body (itemsSelectedChange)=\"onProgramSelectionChange($event)\"\r\n          [selectedItems]=\"selectedPrograms\" [url]=\"programListUrl\"></app-program-list>\r\n        <div class=\"vx-d-flex vx-align-center vx-justify-between vx-w-100\" footer>\r\n          <div class=\"left-side vx-fs-12 vx-d-flex\">\r\n            <ng-container *ngIf=\"allProgamSelected?.length > 0\">\r\n              <button\r\n                class=\"selected-count-box vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\">\r\n                {{ allProgamSelected.length }}\r\n              </button>\r\n              <span class=\"selected-text\">\r\n                Program\r\n                {{ allProgamSelected.length > 1 ? \"Categories\" : \"Category\" }}\r\n                Selected</span>\r\n            </ng-container>\r\n          </div>\r\n          <div class=\"right-side vx-d-flex\">\r\n            <button class=\"cancelBtn\" (click)=\"activateSelector('', false)\">Cancel</button>\r\n            <button class=\"nextBtn\" (click)=\"activateSelector('', false);\">\r\n              Next <i class=\"icons\">&#xe91e;</i>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </app-list-container>\r\n\r\n    </div>\r\n    <div class=\"vx-dialog-container side-dialog\" [class.tablet-width]=\"activeSelector && activeSelector !== 'name'\">\r\n      <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n\r\n      <div class=\"form-group\" [class.disabled]=\"disabled\">\r\n        <div class=\"vx-dialog-body-container\" (scroll)=\"animateImage()\"\r\n          [class.hidden-scroll]=\"popoverService.stopScroll\">\r\n          <!-- Dashboard Name -->\r\n          <div class=\"form-group-row\" [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\r\n            <div class=\"image\">\r\n              <img [ngSrc]=\"ASSETS.dashBoardIcon\" *ngIf=\"\r\n                  !dashboardForm.dashboardName || activeSelector === 'name'\r\n                \" alt=\"\" width=\"36\" height=\"36\" />\r\n              <svg class=\"checkIcon\" *ngIf=\"dashboardForm.dashboardName && activeSelector !== 'name'\"\r\n                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n              </svg>\r\n            </div>\r\n            <div class=\"form\">\r\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                <label\r\n                  class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">Dashboard\r\n                  Name\r\n                  <span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\r\n                <div class=\"vx-input-group\">\r\n                  <input class=\"textField\" placeholder=\"Add dashboard name (Max limit: 30 characters).\"\r\n                    [(ngModel)]=\"dashboardForm.dashboardName\" (keydown)=\"activeSelector = 'name'\"\r\n                    (focusin)=\"activateSelector('name', true)\" (focusout)=\"activateSelector('name', false)\" />\r\n\r\n                  <span class=\"counter\" *ngIf=\"dashboardForm?.dashboardName?.length > 0\">{{ 30 -\r\n                    dashboardForm.dashboardName.length }}</span>\r\n                </div>\r\n\r\n                <p class=\"vx-txt-error\" [appScrollInView]=\"true\" *ngIf=\"\r\n                    submitted &&\r\n                    (dashboardForm?.dashboardName?.length > 30 ||\r\n                      !dashboardForm?.dashboardName)\r\n                  \">\r\n                  {{\r\n                  dashboardForm.dashboardName.length > 30\r\n                  ? \"You have exceeded the maximum character limit of 30 characters.\"\r\n                  : \"Please enter a name for this Dashboard.\"\r\n                  }}\r\n                </p>\r\n\r\n                <div class=\"vx-input-group vx-mt-2\">\r\n                  <vcomply-editor [editorConfig]=\"dashboardDescription\"\r\n                    [(ngModel)]=\"dashboardForm.dashboardDescriptionText\"></vcomply-editor>\r\n                  <span class=\"counter\" *ngIf=\"dashboardForm?.dashboardDescriptionText?.length > 0\">{{\r\n                    250 -\r\n                    (dashboardForm?.dashboardDescriptionText | textCount)\r\n                    }}</span>\r\n                </div>\r\n\r\n                <p class=\"vx-txt-error\" [appScrollInView]=\"true\" *ngIf=\"\r\n                    submitted &&\r\n                    (dashboardForm?.dashboardDescriptionText | textCount) > 250\r\n                  \">\r\n                  You have exceeded the maximum character limit of 250\r\n                  characters.\r\n                </p>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Dashboard Display Criteria  -->\r\n          <span class=\"head-label vx-fs-10 vx-fw-500 vx-txt-white vx-tt-uppercase vx-pl-1 vx-pr-1 vx-lh-4\">\r\n            Dashboard Display Criteria\r\n          </span>\r\n          <app-information-block></app-information-block>\r\n\r\n          <!-- Who -->\r\n          <div class=\"form-group-row\" [class.active]=\"activeSelector === 'whoCanView'\" [class.disabled]=\"\r\n              activeSelector &&\r\n              activeSelector !== 'whoCanView' &&\r\n              activeSelector !== 'name'\r\n            \">\r\n            <div class=\"image\">\r\n              <img [ngSrc]=\"ASSETS.dashBoardUsersIcon\" *ngIf=\"\r\n                  dashboardForm?.selectedViewers?.length == 0 ||\r\n                  activeSelector === 'whoCanView'\r\n                \" alt=\"\" width=\"36\" height=\"36\" />\r\n              <svg class=\"checkIcon\" *ngIf=\"\r\n                  dashboardForm?.selectedViewers?.length > 0 &&\r\n                  activeSelector !== 'whoCanView'\r\n                \" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n              </svg>\r\n            </div>\r\n            <div class=\"form\">\r\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">Who\r\n                  can view this dashboard?<span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\r\n                <div *ngIf=\"dashboardForm?.selectedViewers?.length == 0\"\r\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n                  (click)=\"activateSelector('whoCanView', true)\">\r\n                  <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\r\n                    Who can view this dashboard?\r\n                  </div>\r\n                </div>\r\n\r\n                <div *ngIf=\"dashboardForm?.selectedViewers?.length > 0\"\r\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\r\n                  <ng-container *ngIf=\"!groupsEnabled\" id=\"onlyuserslist\">\r\n                    <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"\r\n                        let user of dashboardForm?.selectedViewers?.slice(0, 1)\r\n                      \">\r\n                      <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" *ngIf=\"\r\n                          !listDetails.nonRemovableUsersList.includes(\r\n                            user.member_id\r\n                          )\r\n                        \" (click)=\"remove('whoCanView', user)\">&#xe9ae;</i>\r\n                      <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"user.member_name\"\r\n                        placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ user.member_name\r\n                        }}</span>\r\n                      <button *ngIf=\"\r\n                          dashboardForm?.selectedViewers?.length > 1 &&\r\n                          !groupsEnabled\r\n                        \"\r\n                        class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                        appPopover (click)=\"userList.popover()\" placement=\"left\">\r\n                        +{{ dashboardForm?.selectedViewers?.slice(1).length }}\r\n                      </button>\r\n                    </div>\r\n                    <app-popover #userList [dontCloseonClick]=\"true\">\r\n                      <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                          <li *ngFor=\"\r\n                              let user of dashboardForm?.selectedViewers\r\n                                | slice : 1;\r\n                              let j = index\r\n                            \">\r\n                            <div class=\"avatar-card\">\r\n                              <span class=\"value\" [arTooltip]=\"user?.member_name\" placement=\"bottom-left\" delay=\"0\"\r\n                                type=\"black\" [tooltipMandatory]=\"false\">\r\n                                <i class=\"icons cross-icon\" *ngIf=\"\r\n                                    !listDetails.nonRemovableUsersList.includes(\r\n                                      user.member_id\r\n                                    ) && !groupsEnabled\r\n                                  \" (click)=\"remove('whoCanView', user)\">&#xe90d;</i>\r\n                                {{ user?.member_name }}\r\n                              </span>\r\n                            </div>\r\n                          </li>\r\n                        </ul>\r\n                      </div>\r\n                    </app-popover>\r\n                  </ng-container>\r\n\r\n                  <div *ngIf=\"groupsEnabled\" class=\"vx-d-flex vx-align-center\">\r\n                    <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n                      <span class=\"chipName vx-fs-11 vx-label-txt\">USER(S)</span>\r\n                      <button\r\n                        class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                        appPopover (click)=\"userCount.popover()\" placement=\"left\">\r\n                        {{ dashboardForm?.selectedViewers?.length }}\r\n                      </button>\r\n                    </div>\r\n                    <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"\r\n                        dashboardForm?.selectedGroup?.length &&\r\n                        dashboardForm?.selectedViewers?.length\r\n                      \">&</span>\r\n                    <div *ngIf=\"dashboardForm?.selectedGroup?.length\" id=\"usersandgroups\"\r\n                      class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n                      <span class=\"chipName vx-fs-11 vx-label-txt\">USER GROUP(S)</span>\r\n                      <button\r\n                        class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                        appPopover (click)=\"groupCount.popover()\" placement=\"right\">\r\n                        {{ dashboardForm?.selectedGroup?.length }}\r\n                      </button>\r\n                    </div>\r\n\r\n                    <app-popover #userCount [dontCloseonClick]=\"true\">\r\n                      <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                          <li *ngFor=\"let data of dashboardForm?.selectedViewers\">\r\n                            <div class=\"avatar-card\">\r\n                              <span class=\"value\" [arTooltip]=\"data.member_name\" placement=\"bottom-left\" delay=\"0\"\r\n                                type=\"black\" [tooltipMandatory]=\"false\">\r\n                                <i class=\"icons cross-icon\" *ngIf=\"\r\n                                    !listDetails.nonRemovableUsersList.includes(\r\n                                      data.member_id\r\n                                    )\r\n                                  \" (click)=\"remove('whoCanView', data)\">&#xe90d;</i>\r\n                                {{ data.member_name }}\r\n                              </span>\r\n                            </div>\r\n                          </li>\r\n                        </ul>\r\n                      </div>\r\n                    </app-popover>\r\n\r\n                    <app-popover #groupCount [dontCloseonClick]=\"true\">\r\n                      <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                          <li *ngFor=\"let data of dashboardForm?.selectedGroup\">\r\n                            <div class=\"avatar-card\">\r\n                              <span class=\"value\" [arTooltip]=\"data.group_name\" placement=\"bottom-left\" delay=\"0\"\r\n                                type=\"black\" [tooltipMandatory]=\"false\">\r\n                                <i class=\"icons cross-icon\" (click)=\"remove('whoCanViewGroup', data)\">&#xe90d;</i>\r\n                                {{ data.group_name }}\r\n                              </span>\r\n                            </div>\r\n                          </li>\r\n                        </ul>\r\n                      </div>\r\n                    </app-popover>\r\n                  </div>\r\n\r\n                  <button *ngIf=\"activeSelector !== 'whoCanView'\"\r\n                    class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n                    (click)=\"activateSelector('whoCanView', true)\">\r\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Responsibility Center -->\r\n          <div class=\"form-group-row\" [class.active]=\"activeSelector === 'rcList'\" [class.disabled]=\"\r\n              activeSelector &&\r\n              activeSelector !== 'rcList' &&\r\n              activeSelector !== 'name'\r\n            \">\r\n            <div class=\"image\">\r\n              <img *ngIf=\"\r\n                  dashboardForm?.selectedResponsibilityCenters?.length == 0 ||\r\n                  activeSelector === 'rcList'\r\n                \" [ngSrc]=\"ASSETS.dashBoardRcIcon\" alt=\"\" width=\"36\" height=\"36\" />\r\n              <svg *ngIf=\"\r\n                  dashboardForm?.selectedResponsibilityCenters?.length > 0 &&\r\n                  activeSelector !== 'rcList'\r\n                \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n              </svg>\r\n            </div>\r\n            <div class=\"form\">\r\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                <label\r\n                  class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">RESPONSIBILITY\r\n                  CENTER(S)</label>\r\n                <div *ngIf=\"\r\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0\r\n                  \" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n                  (click)=\"activateSelector('rcList', true)\" [class.error]=\"\r\n                    submitted &&\r\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\r\n                    allProgamSelected?.length ==\r\n                      0 &&\r\n                    dashboardForm?.selectedRiskCategories?.length == 0\r\n                  \">\r\n                  <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\r\n                    Select the Responsibility Center(s) that you would like<br />displayed\r\n                    in the Dashboard, if any.\r\n                  </div>\r\n                </div>\r\n\r\n                <div *ngIf=\"\r\n                    dashboardForm?.selectedResponsibilityCenters?.length > 0\r\n                  \" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\r\n                  <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"\r\n                      let rc of dashboardForm?.selectedResponsibilityCenters?.slice(\r\n                        0,\r\n                        1\r\n                      )\r\n                    \">\r\n                    <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" (click)=\"remove('rc', rc)\">&#xe9ae;</i>\r\n                    <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"rc.item_name\" placement=\"bottom-left\"\r\n                      delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ rc.item_name }}</span>\r\n                    <button *ngIf=\"\r\n                        dashboardForm?.selectedResponsibilityCenters?.length > 1\r\n                      \"\r\n                      class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                      appPopover (click)=\"rcList.popover()\" placement=\"left\">\r\n                      +{{\r\n                      dashboardForm?.selectedResponsibilityCenters?.slice(1)\r\n                      .length\r\n                      }}\r\n                    </button>\r\n\r\n                    <app-popover #rcList [dontCloseonClick]=\"true\">\r\n                      <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                          <li *ngFor=\"\r\n                              let rc of dashboardForm?.selectedResponsibilityCenters\r\n                                | slice : 1;\r\n                              let j = index\r\n                            \">\r\n                            <div class=\"avatar-card\">\r\n                              <span class=\"value\" [arTooltip]=\"rc?.item_name\" placement=\"bottom-left\" delay=\"0\"\r\n                                type=\"black\" [tooltipMandatory]=\"false\">\r\n                                <i class=\"icons cross-icon\" (click)=\"remove('rc', rc)\">&#xe90d;</i>\r\n                                {{ rc?.item_name }}\r\n                              </span>\r\n                            </div>\r\n                          </li>\r\n                        </ul>\r\n                      </div>\r\n                    </app-popover>\r\n                  </div>\r\n\r\n                  <button *ngIf=\"activeSelector !== 'rcList'\"\r\n                    class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n                    (click)=\"activateSelector('rcList', true)\">\r\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Program -->\r\n          <div class=\"form-group-row\" [class.active]=\"activeSelector === 'responsibilityCategories'\" [class.disabled]=\"\r\n              activeSelector &&\r\n              activeSelector !== 'responsibilityCategories' &&\r\n              activeSelector !== 'name'\r\n            \">\r\n            <div class=\"image\">\r\n              <img *ngIf=\"\r\n                  allProgamSelected?.length ==\r\n                    0 || activeSelector === 'responsibilityCategories'\r\n                \" [ngSrc]=\"ASSETS.dashBoardProgramIcon\" alt=\"\" width=\"36\" height=\"36\" />\r\n              <svg *ngIf=\"\r\n                  allProgamSelected?.length > 0 &&\r\n                  activeSelector !== 'responsibilityCategories'\r\n                \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n              </svg>\r\n            </div>\r\n            <div class=\"form\">\r\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                <label\r\n                  class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">PROGRAM</label>\r\n                <div *ngIf=\"\r\n                    allProgamSelected?.length == 0\r\n                  \" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n                  (click)=\"activateSelector('responsibilityCategories', true)\" [class.error]=\"\r\n                    submitted &&\r\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\r\n                    allProgamSelected?.length ==\r\n                      0 &&\r\n                    dashboardForm?.selectedRiskCategories?.length == 0\r\n                  \">\r\n                  <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\r\n                    Select the Program(s) that you would like displayed in\r\n                    the<br />Dashboard, if any.\r\n                  </div>\r\n                </div>\r\n\r\n                <div *ngIf=\"\r\n                    allProgamSelected?.length > 0\r\n                  \" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\r\n                  <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"\r\n                      let rCategory of allProgamSelected?.slice(\r\n                        0,\r\n                        1\r\n                      )\r\n                    \">\r\n                    <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\r\n                      (click)=\"remove('responsibilityCategories', rCategory)\">&#xe9ae;</i>\r\n                    <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"rCategory.item_name\"\r\n                      placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ rCategory.name\r\n                      }}</span>\r\n                    <button *ngIf=\"\r\n                        allProgamSelected\r\n                          ?.length > 1\r\n                      \"\r\n                      class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                      appPopover (click)=\"rCategoryList.popover()\" placement=\"left\">\r\n                      +{{\r\n                      allProgamSelected?.slice(\r\n                      1\r\n                      ).length\r\n                      }}\r\n                    </button>\r\n\r\n                    <app-popover #rCategoryList [dontCloseonClick]=\"true\">\r\n                      <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                          <li *ngFor=\"\r\n                              let rCategory of allProgamSelected\r\n                                | slice : 1;\r\n                              let j = index\r\n                            \">\r\n                            <div class=\"avatar-card\">\r\n                              <span class=\"value\" [arTooltip]=\"rCategory?.name\" placement=\"bottom-left\" delay=\"0\"\r\n                                type=\"black\" [tooltipMandatory]=\"false\">\r\n                                <i class=\"icons cross-icon\" (click)=\"\r\n                                    remove(\r\n                                      'responsibilityCategories',\r\n                                      rCategory\r\n                                    )\r\n                                  \">&#xe90d;</i>\r\n                                {{ rCategory?.name }}\r\n                              </span>\r\n                            </div>\r\n                          </li>\r\n                        </ul>\r\n                      </div>\r\n                    </app-popover>\r\n                  </div>\r\n\r\n                  <button *ngIf=\"activeSelector !== 'responsibilityCategories'\"\r\n                    class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n                    (click)=\"activateSelector('responsibilityCategories', true)\">\r\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n\r\n          <!-- Timeframe -->\r\n          <div class=\"form-group-row\" [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\r\n            <div class=\"image\">\r\n              <img *ngIf=\"\r\n                  !dashboardForm?.selectedFromDate ||\r\n                  !dashboardForm?.selectedToDate\r\n                \" [ngSrc]=\"ASSETS.dashBoardTimeFrameIcon\" alt=\"\" width=\"36\" height=\"36\" />\r\n              <svg *ngIf=\"\r\n                  dashboardForm?.selectedFromDate &&\r\n                  dashboardForm?.selectedToDate\r\n                \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n              </svg>\r\n            </div>\r\n            <div class=\"form\">\r\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                <label\r\n                  class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">TIMEFRAME</label>\r\n                <label class=\"vx-control-panel-sub-label\">Select how long the selected information should be displayed.\r\n                  Once the selected timeframe expires, the dashboard will automatically be deactivated and no longer\r\n                  displayed to users. If no timeframe is selected, the information\r\n                  will be displayed permanently.</label>\r\n                <div class=\"input-group vx-d-flex vx-justify-between\">\r\n                  <div class=\"date-select\">\r\n                    <i class=\"icons\">&#xe92d;</i>\r\n                    <input type=\"text\" id=\"from_date\" [value]=\"\r\n                        dashboardForm?.selectedFromDate | date : 'dd MMM yyyy'\r\n                      \" [placeholder]=\"'From'\" (click)=\"openFromDatePicker($event)\" readonly />\r\n                    <dp-date-picker #fromDatePicker [(ngModel)]=\"dashboardForm.selectedFromDate\"\r\n                      placeholder=\"Select Date\" theme=\"vcomply-tz\" (onSelect)=\"\r\n                        closeFromDatePicker(); datePickerOverlay = false\r\n                      \" [config]=\"fromDatePickerConfig\"></dp-date-picker>\r\n                    <div class=\"overlay\" (click)=\"closeFromDatePicker()\" *ngIf=\"datePickerOverlay\"></div>\r\n                  </div>\r\n                  <div class=\"date-select\" *ngIf=\"!hideToDate\" [class.disabled]=\"!dashboardForm?.selectedFromDate\">\r\n                    <i class=\"icons\">&#xe92d;</i>\r\n                    <input type=\"text\" id=\"to_date\" [value]=\"\r\n                        dashboardForm?.selectedToDate | date : 'dd MMM yyyy'\r\n                      \" [placeholder]=\"'To'\" (click)=\"openToDatePicker($event)\" readonly />\r\n                    <dp-date-picker #toDatePicker [(ngModel)]=\"dashboardForm.selectedToDate\" placeholder=\"Select Date\"\r\n                      theme=\"vcomply-tz\" (onSelect)=\"\r\n                        closeToDatePicker(); datePickerOverlay = false\r\n                      \" [config]=\"toDatePickerConfig\"></dp-date-picker>\r\n                    <div class=\"overlay\" (click)=\"closeToDatePicker()\" *ngIf=\"datePickerOverlay\"></div>\r\n                  </div>\r\n                </div>\r\n                <p class=\"vx-txt-error\" [appScrollInView]=\"true\" *ngIf=\"\r\n                    submitted &&\r\n                    dashboardForm.selectedFromDate &&\r\n                    !dashboardForm.selectedToDate\r\n                  \">\r\n                  Select a time-frame.\r\n                </p>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Email Summary -->\r\n          <!-- <div\r\n            class=\"form-group-row\"\r\n            [class.active]=\"activeSelector === 'frequency'\"\r\n            [class.disabled]=\"\r\n              activeSelector &&\r\n              activeSelector !== 'frequency' &&\r\n              activeSelector !== 'name'\r\n            \"\r\n          >\r\n            <div class=\"image\">\r\n              <img\r\n                *ngIf=\"!dashboardForm.frequencyMessage\"\r\n                [ngSrc]=\"ASSETS.dashBoardEmailSummariesIcon\"\r\n                alt=\"\"\r\n                width=\"36\"\r\n                height=\"36\"\r\n              />\r\n              <svg\r\n                *ngIf=\"dashboardForm.frequencyMessage\"\r\n                class=\"checkIcon\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                viewBox=\"0 0 52 52\"\r\n              >\r\n                <circle\r\n                  class=\"checkIcon__circle\"\r\n                  cx=\"26\"\r\n                  cy=\"26\"\r\n                  r=\"25\"\r\n                  fill=\"none\"\r\n                />\r\n                <path\r\n                  class=\"checkIcon__check\"\r\n                  fill=\"none\"\r\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n                />\r\n              </svg>\r\n            </div>\r\n            <div class=\"form\">\r\n              <div class=\"vx-form-group vx-d-block\">\r\n                <label\r\n                  class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\r\n                  >Email Summaries</label\r\n                >\r\n                <label class=\"vx-control-panel-sub-label\"\r\n                  >If you would like to send a summary of this Dashboard, please\r\n                  select a frequency(By default VComply sends a weekly\r\n                  Summary).</label\r\n                >\r\n                <div\r\n                  *ngIf=\"!dashboardForm.frequencyMessage\"\r\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n                  (click)=\"activateSelector('frequency', true)\"\r\n                >\r\n                  <div\r\n                    class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n                  >\r\n                    Email Summaries\r\n                  </div>\r\n                </div>\r\n\r\n                <div\r\n                  *ngIf=\"dashboardForm.frequencyMessage\"\r\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n                >\r\n                  <div\r\n                    class=\"selectBoxText vx-fs-13 vx-paragraph-txt\"\r\n                    [arTooltip]=\"dashboardForm.frequencyMessage\"\r\n                    placement=\"bottom-left\"\r\n                    type=\"black\"\r\n                    delay=\"0\"\r\n                    [tooltipMandatory]=\"false\"\r\n                    [innerHTML]=\"dashboardForm.frequencyMessage\"\r\n                  ></div>\r\n\r\n                  <button\r\n                    *ngIf=\"\r\n                      dashboardForm.frequencyMessage &&\r\n                      activeSelector !== 'frequency'\r\n                    \"\r\n                    class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n                    (click)=\"activateSelector('frequency', true)\"\r\n                  >\r\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div> -->\r\n        </div>\r\n        <div class=\"button-block\">\r\n          <button class=\"vx-btn block primary\" [disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n            (click)=\"configureDashboard()\">\r\n            Next: Configure Widgets\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <button class=\"close-dialog\" type=\"button\" [disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n        (click)=\"close.emit({ mode: 'discard' })\" [arTooltip]=\"'[Esc] to close'\" placement=\"left\" type=\"black\" delay=\"0\"\r\n        [tooltipMandatory]=\"true\" [class.hide]=\"activeSelector && activeSelector !== 'name'\">\r\n        <i class=\"icons\">&#xe93f;</i>\r\n      </button>\r\n      <div class=\"global-confirmation-alert\" *ngIf=\"\r\n          submitted &&\r\n          dashboardForm?.selectedResponsibilityCenters?.length == 0 \r\n        \">\r\n        <div class=\"global-confirmation-alert-top\">\r\n          <span class=\"icon-block\">\r\n            <i class=\"icons\">&#xe930;</i>\r\n          </span>\r\n          <p class=\"text\" *ngIf=\"showRiskCategory\">\r\n            Select a Responsibility Center or Risk Category.\r\n          </p>\r\n          <p class=\"text\" *ngIf=\"!showRiskCategory\">\r\n            Select a Responsibility Center.\r\n          </p>\r\n        </div>\r\n        <div class=\"global-confirmation-alert-bottom\">\r\n          <p class=\"message\"></p>\r\n          <div class=\"button-group\">\r\n            <button class=\"fill\" type=\"button\" (click)=\"submitted = false\">\r\n              OKAY\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<app-smiley-dialog *ngIf=\"isSmiley\" [message]=\"smileyMessage\"></app-smiley-dialog>\r\n\r\n<app-configure-widgets *ngIf=\"openConfigureWidgets\" [mode]=\"mode\" [displayedWidgets]=\"displayedWidgets\"\r\n  [showRisk]=\"showRiskWidgets\" [showCompliance]=\"!showComplianceWidgets\" [selectedWidgetsData]=\"selectedWidgets\"\r\n  (widgetsDataModified)=\"setSelectedWidgets($event)\"\r\n  (closeConfigureWidgets)=\"closeConfigureWidgets($event)\"></app-configure-widgets>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/dialog/dialog.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";::ng-deep .create-dashboard-container{width:100vw;background:#161b2fcc}::ng-deep .create-dashboard-container .vx-dialog-container{background-color:#fff;border:none;position:relative}@media screen and (max-width: 1280px){::ng-deep .create-dashboard-container .vx-dialog-container.tablet-width{width:28px!important}::ng-deep .create-dashboard-container .vx-dialog-container.tablet-width .form-group .vx-dialog-body-container{overflow:hidden}}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog{display:flex;position:absolute;top:8px;right:8px;height:32px;width:32px;font-size:16px;color:#161b2f;cursor:pointer;background:transparent;border:none;border-radius:2px;z-index:2;align-items:center;justify-content:center}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog:hover{background:#f1f1f1}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog:disabled{pointer-events:none;filter:grayscale(1);opacity:.3}@media screen and (max-width: 1280px){::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog.hide{display:none}}::ng-deep .create-dashboard .more-option{width:calc(100% - 500px);border-right:1px solid #f1f1f1;float:left}@media screen and (max-width: 1280px){::ng-deep .create-dashboard .more-option{width:calc(100vw - 28px)}::ng-deep .create-dashboard .more-option app-user-list .user-list{right:28px}::ng-deep .create-dashboard .more-option app-responsibility-center .responsibility-center{right:28px}::ng-deep .create-dashboard .more-option app-categories .category-list{right:28px}::ng-deep .create-dashboard .more-option app-risk-categories .risk-category-list{right:28px}::ng-deep .create-dashboard .more-option app-frequency .create-frequency{right:28px}}::ng-deep .form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container{padding:36px 28px 0 40px!important;height:calc(100vh - 50px);overflow:auto;margin-left:-22px;background-color:transparent;position:relative;border-radius:0 0 0 30px;background:transparent}@-moz-document url-prefix(){::ng-deep .form-group .vx-dialog-body-container.hidden-scroll{overflow:hidden}}::ng-deep .form-group .vx-dialog-body-container .form-group-row{display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image{width:36px;min-width:36px;height:36px;margin-left:-36px;margin-right:20px;margin-top:28px;display:flex;align-items:center;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image img{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon{width:32px;height:32px;background:#fff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input{height:40px;border-radius:4px;border:1px solid #dbdbdb;outline:none;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+vcomply-editor{margin-top:8px;display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:after{border-left:none;border-bottom:1px solid #707070;border-right:1px solid #707070;border-top:none;content:\"\";display:inline-block;right:15px;position:absolute;top:calc(50% + 8px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:hover .custom-input{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;position:relative;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .edit{border:1px solid #f1f1f1;border-radius:2px;background:#fff;outline:none;cursor:pointer;height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left{width:auto;display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left.frequency-left{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;width:calc(100% - 70px)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container{width:auto}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip{border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip i{cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip .value{max-width:100px;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .count{border-radius:2px;height:24px;padding:2px 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:300px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count{background:#1e5dd3;border-radius:20px;color:#fff;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group{display:flex;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group span.counter{background:transparent;color:#161b2f;font-size:9px;font-weight:500;position:absolute;top:0;right:0;border-radius:3px;height:16px;text-align:center;line-height:16px;padding:0 2px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group vcomply-editor{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor .editor-container .editable-block.bottom:before,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group vcomply-editor .editor-container .editable-block.bottom:before{opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group.vx-input-group{margin-top:8px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor{display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container{border-radius:4px;border-color:#dbdbdb}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:hover{border-color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:hover .editor-tools{border-top-color:#1e5dd3!important;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;max-height:90px}@media not all and (min-resolution: .001dpcm){@supports (-webkit-appearance: none){::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block:before,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editable-block:before{opacity:.72}}}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools{border-color:#dbdbdb;border-radius:0 0 2px 2px;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input{height:2.5rem;border-radius:.25rem;border:1px solid #dbdbdb;background:#fff;outline:none;padding:.1875rem .75rem;line-height:1.25rem;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:12px;width:94%;display:block;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input.error{border:1px solid #d93b41}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel i{font-size:12px;color:#1e5dd3;margin-left:7px;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;margin-bottom:.5rem;display:block;text-transform:none;width:100%;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label span.required{color:#eb2424}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel+.vx-control-panel-sub-label{margin-top:-.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.radio{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item svg{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio+app-cs-radio{margin-top:.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select{position:relative;width:calc(50% - .25rem);overflow:hidden;height:40px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input{position:relative;z-index:1;padding-left:36px!important;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select dp-date-picker{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;pointer-events:none;z-index:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select i{display:flex;justify-content:center;align-items:center;height:39px;width:14px;position:absolute;left:12px;top:0;color:#bcbcbc;font-size:14px;pointer-events:none;z-index:2}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled{pointer-events:none;filter:grayscale(1);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled input{background:#f1f1f1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel span.sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;text-transform:none;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row.disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active{pointer-events:none;filter:grayscale(0);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image{filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image:before{display:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form{opacity:1;filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form .custom-input,::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form input[type=text]{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container:after{content:\"\";width:100%;display:block;height:30px;position:sticky;right:0;bottom:0;left:0;z-index:6;background:linear-gradient(to bottom,#fff0,#ffffffbf 22%,#fff);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#00ffffff\",endColorstr=\"#ffffff\",GradientType=0)}::ng-deep .form-group .button-block{position:relative;z-index:2}::ng-deep .form-group .button-block button{font-size:13px!important;letter-spacing:1.3px!important;height:50px;line-height:48px!important}::ng-deep .form-group .button-block button:disabled{background:#f1f1f1!important;border-color:#f1f1f1!important;color:#747576!important;opacity:1!important;filter:unset!important}::ng-deep .form-group.disabled{pointer-events:none;z-index:2}::ng-deep .form-group.disabled .image{position:relative;filter:grayscale(1)}::ng-deep .form-group.disabled .image:before{content:\"\";position:absolute;inset:0;background:#fff;opacity:.7}::ng-deep .form-group.disabled .form{opacity:.3;filter:grayscale(1)}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}.action-list{width:220px}.action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.action-list ul.action-item{display:block}.action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.action-list ul.action-item li button:hover{background:#f3f3f3}.action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.action-list ul.action-item li .avatar-card.within-con{display:block}.action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.action-list ul.action-item li .avatar-card .avatar img{width:100%}.action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:4px}.action-list ul.action-item li .avatar-card span.value i.cross-icon{color:#747576}.action-list ul.action-item li .avatar-card.no-image{display:block}.action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.action-list ul.action-item li .chip-item span.id{font-size:9px}.action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}.global-confirmation-alert{display:block;position:absolute;z-index:9;right:0;bottom:0;left:0;background:#d93b41}.global-confirmation-alert-top{display:flex;align-items:center;justify-content:flex-start;padding:20px 20px 12px}.global-confirmation-alert span.icon-block{height:36px;width:36px;border-radius:50%;background:#fff;border:1px solid #dcdcdc;display:flex;justify-content:center;align-items:center;margin-right:16px}.global-confirmation-alert span.icon-block i{color:#d93b41;font-size:12px}.global-confirmation-alert p.text{color:#fff;font-size:14px;font-weight:300;margin:0;width:calc(100% - 52px)}.global-confirmation-alert-bottom{display:flex;align-items:center;padding:0 12px 12px 72px;background:#d93b41}.global-confirmation-alert-bottom .button-group{display:flex}.global-confirmation-alert-bottom p.message{font-size:14px;font-weight:500;margin:0;line-height:20px;color:#fff}.global-confirmation-alert button{height:24px;width:64px;border:1px solid #000;border-radius:2px;display:flex;align-items:center;justify-content:center;line-height:22px;cursor:pointer;font-size:11px;text-transform:uppercase;font-weight:500;padding:0}.global-confirmation-alert button+button{margin-left:4px}.global-confirmation-alert button.fill{background:#fff;color:#1e5dd3;border-color:#fff}.global-confirmation-alert button.outline{background:transparent;color:#fff;border-color:#fff}::ng-deep marx-modal .popup-modal-background,::ng-deep vcomply-modal .popup-modal-background{background-color:#161b2fcc!important}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;font-size:13px;color:#747576;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField::placeholder{font-size:13px;color:#747576}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxEnable.error{border-color:#eb2424}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer .chipName.no-width{max-width:unset}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}::ng-deep .cdk-overlay-pane{inset:0!important;align-items:center;justify-content:center}::ng-deep .cdk-overlay-pane .dp-popup{z-index:999;display:flex!important;align-items:center;justify-content:center;width:100vw;height:100vh;background:transparent!important;border:none!important;box-shadow:unset!important}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar{width:412px!important;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}::ng-deep .cdk-overlay-pane .dp-popup.vcomply-tz .dp-calendar-week button.dp-current-day:not(.dp-user-current-day){border:none!important;background-color:transparent!important;color:revert!important}::ng-deep .cdk-overlay-pane .dp-popup.vcomply-tz .dp-calendar-week button.dp-current-day:not(.dp-user-current-day):hover{background-color:#f3f3f3!important}::ng-deep .cdk-overlay-pane .dp-popup.vcomply-tz .dp-calendar-week button.dp-user-current-day{border:1px solid rgba(0,0,0,.38)!important;color:#1e5dd3!important;background-color:#fff!important}.left-side{color:#707070}.right-side button{border-radius:2px;height:24px;background:#1e5dd3!important;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;font-weight:500;border:none!important;padding:0 8px;margin:0 0 0 8px}.right-side button i{margin-left:8px;font-size:11px}.right-side button:disabled{background:#f1f1f1!important;color:#747576!important;opacity:1}.right-side button.cancelBtn{background:transparent!important;color:#eb2424!important}.selected-count-box{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem;position:relative}.selected-text{color:#707070;font-size:11px;font-weight:500;position:fixed;padding-left:2.5rem}::ng-deep .vc-divider{border-top:.5px solid #dbdbdb;width:100%}::ng-deep .vc-cf-container{border-bottom:1px solid #E3E3E9}::ng-deep .vc-cf-container:first-of-type,::ng-deep .vc-cf-container:only-child{border-top:1px solid #E3E3E9}::ng-deep .vc-cf-container .cf-name{width:9.25rem}::ng-deep .vc-cf-container .cf-value{width:calc(100% - 9.75rem)}::ng-deep .vc-cf-container .cf-value input{height:24px!important;border:1px solid #CDCED6!important;padding:0 .5rem!important;color:#565a6f!important;font-size:11px!important}::ng-deep .vc-cf-container .cf-value input::placeholder{color:#a9aab6!important}::ng-deep .vc-cf-container .cf-value input:hover{border-color:#343952!important}::ng-deep .vc-cf-container .cf-value input:focus{outline:none;border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd31a}.head-label{background:#565a6f;border-radius:.125rem;height:1rem;position:relative}.head-label:before{background:#e3e3e9;content:\"\";position:absolute;top:7px;left:-40px;width:500px;height:1px;z-index:-1}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.MarxEditorComponent, selector: "vcomply-editor", inputs: ["editorConfig"], outputs: ["comment", "sendSavedFiles", "popup"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: ConfigureWidgetsComponent, selector: "app-configure-widgets", inputs: ["selectedWidgetsData", "displayedWidgets", "showRisk", "showCompliance", "mode"], outputs: ["widgetsDataModified", "closeConfigureWidgets"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closedOnOverlay"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "component", type: LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "component", type: SnackBarComponent, selector: "app-snack-bar" }, { kind: "directive", type: ScrollInViewDirective, selector: "[appScrollInView]", inputs: ["appScrollInView"] }, { kind: "component", type: SmileyDialogComponent, selector: "app-smiley-dialog", inputs: ["message", "autoClose", "actionButtons"], outputs: ["action", "closeSmiley"] }, { kind: "component", type: i17.DatePickerComponent, selector: "dp-date-picker", inputs: ["config", "mode", "placeholder", "disabled", "displayDate", "theme", "minDate", "maxDate", "minTime", "maxTime"], outputs: ["open", "close", "onChange", "onGoToCurrent", "onLeftNav", "onRightNav", "onSelect"] }, { kind: "directive", type: i1$1.NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "src", "srcset"] }, { kind: "component", type: ProgramListComponent, selector: "app-program-list", inputs: ["items", "selectedItems", "url"], outputs: ["itemSelected", "itemDeselected", "itemsSelectedChange"] }, { kind: "component", type: ListContainerComponent, selector: "app-list-container", inputs: ["heading"], outputs: ["close"] }, { kind: "component", type: InformationBlockComponent, selector: "app-information-block" }, { kind: "component", type: UserListComponent, selector: "app-user-list", inputs: ["selectionType", "listDetails", "totalPages", "limit", "totalList", "feature", "totalgroupscount"], outputs: ["closeUserList", "saveSelectedUsers"] }, { kind: "component", type: ResponsibilityCenterComponent, selector: "app-responsibility-center", inputs: ["responsibilityCentersList", "selectedResponsibilityCenters", "rcIdKey", "radioSelection"], outputs: ["saveSelectedList", "closeRcList"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: TextCountPipe, name: "textCount" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateDashboardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-create-dashboard', providers: [TextCountPipe], template: "<app-snack-bar></app-snack-bar>\r\n<div class=\"create-dashboard\" *ngIf=\"!openConfigureWidgets\">\r\n  <div class=\"create-dashboard-container vx-d-flex vx-justify-end\" [class.animate-slideInRight]=\"animation\">\r\n    <div class=\"more-option\" *ngIf=\"activeSelector && activeSelector !== 'name'\">\r\n      <app-user-list *ngIf=\"activeSelector === 'whoCanView'\"\r\n        (saveSelectedUsers)=\"saveSelectedList('whoCanView', $event)\" (closeUserList)=\"activateSelector('', false)\"\r\n        [totalPages]=\"totalPages\" [totalList]=\"totalList\" [listDetails]=\"listDetails\" [totalgroupscount]=\"totalgroups\"\r\n        [feature]=\"feature\"></app-user-list>\r\n      <app-responsibility-center *ngIf=\"activeSelector === 'rcList'\"\r\n        [responsibilityCentersList]=\"responsibilityCentersList\" [radioSelection]=\"false\"\r\n        [selectedResponsibilityCenters]=\"\r\n          dashboardForm.selectedResponsibilityCenters\r\n        \" [rcIdKey]=\"'item_id'\" (saveSelectedList)=\"saveSelectedList('rc', $event)\"\r\n        (closeRcList)=\"activateSelector('', false)\">\r\n      </app-responsibility-center>\r\n      <!-- <app-categories *ngIf=\"activeSelector === 'responsibilityCategories'\"\r\n        [categoryList]=\"responsibilityCategoriesTree\" [allCategories]=\"allComplianceCategories\"\r\n        [categoryIdKey]=\"'category_id'\" [selectedCategories]=\"dashboardForm.selectedResponsibilityCategories\"\r\n        (saveSelectedCategory)=\"\r\n          saveSelectedList('responsibilityCategories', $event)\r\n        \" (closeCategoriesList)=\"activateSelector('', false)\"></app-categories> -->\r\n      <app-list-container list *ngIf=\"activeSelector === 'responsibilityCategories'\"\r\n        (close)=\"activateSelector('', false)\">\r\n        <app-program-list body (itemsSelectedChange)=\"onProgramSelectionChange($event)\"\r\n          [selectedItems]=\"selectedPrograms\" [url]=\"programListUrl\"></app-program-list>\r\n        <div class=\"vx-d-flex vx-align-center vx-justify-between vx-w-100\" footer>\r\n          <div class=\"left-side vx-fs-12 vx-d-flex\">\r\n            <ng-container *ngIf=\"allProgamSelected?.length > 0\">\r\n              <button\r\n                class=\"selected-count-box vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\">\r\n                {{ allProgamSelected.length }}\r\n              </button>\r\n              <span class=\"selected-text\">\r\n                Program\r\n                {{ allProgamSelected.length > 1 ? \"Categories\" : \"Category\" }}\r\n                Selected</span>\r\n            </ng-container>\r\n          </div>\r\n          <div class=\"right-side vx-d-flex\">\r\n            <button class=\"cancelBtn\" (click)=\"activateSelector('', false)\">Cancel</button>\r\n            <button class=\"nextBtn\" (click)=\"activateSelector('', false);\">\r\n              Next <i class=\"icons\">&#xe91e;</i>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </app-list-container>\r\n\r\n    </div>\r\n    <div class=\"vx-dialog-container side-dialog\" [class.tablet-width]=\"activeSelector && activeSelector !== 'name'\">\r\n      <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n\r\n      <div class=\"form-group\" [class.disabled]=\"disabled\">\r\n        <div class=\"vx-dialog-body-container\" (scroll)=\"animateImage()\"\r\n          [class.hidden-scroll]=\"popoverService.stopScroll\">\r\n          <!-- Dashboard Name -->\r\n          <div class=\"form-group-row\" [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\r\n            <div class=\"image\">\r\n              <img [ngSrc]=\"ASSETS.dashBoardIcon\" *ngIf=\"\r\n                  !dashboardForm.dashboardName || activeSelector === 'name'\r\n                \" alt=\"\" width=\"36\" height=\"36\" />\r\n              <svg class=\"checkIcon\" *ngIf=\"dashboardForm.dashboardName && activeSelector !== 'name'\"\r\n                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n              </svg>\r\n            </div>\r\n            <div class=\"form\">\r\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                <label\r\n                  class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">Dashboard\r\n                  Name\r\n                  <span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\r\n                <div class=\"vx-input-group\">\r\n                  <input class=\"textField\" placeholder=\"Add dashboard name (Max limit: 30 characters).\"\r\n                    [(ngModel)]=\"dashboardForm.dashboardName\" (keydown)=\"activeSelector = 'name'\"\r\n                    (focusin)=\"activateSelector('name', true)\" (focusout)=\"activateSelector('name', false)\" />\r\n\r\n                  <span class=\"counter\" *ngIf=\"dashboardForm?.dashboardName?.length > 0\">{{ 30 -\r\n                    dashboardForm.dashboardName.length }}</span>\r\n                </div>\r\n\r\n                <p class=\"vx-txt-error\" [appScrollInView]=\"true\" *ngIf=\"\r\n                    submitted &&\r\n                    (dashboardForm?.dashboardName?.length > 30 ||\r\n                      !dashboardForm?.dashboardName)\r\n                  \">\r\n                  {{\r\n                  dashboardForm.dashboardName.length > 30\r\n                  ? \"You have exceeded the maximum character limit of 30 characters.\"\r\n                  : \"Please enter a name for this Dashboard.\"\r\n                  }}\r\n                </p>\r\n\r\n                <div class=\"vx-input-group vx-mt-2\">\r\n                  <vcomply-editor [editorConfig]=\"dashboardDescription\"\r\n                    [(ngModel)]=\"dashboardForm.dashboardDescriptionText\"></vcomply-editor>\r\n                  <span class=\"counter\" *ngIf=\"dashboardForm?.dashboardDescriptionText?.length > 0\">{{\r\n                    250 -\r\n                    (dashboardForm?.dashboardDescriptionText | textCount)\r\n                    }}</span>\r\n                </div>\r\n\r\n                <p class=\"vx-txt-error\" [appScrollInView]=\"true\" *ngIf=\"\r\n                    submitted &&\r\n                    (dashboardForm?.dashboardDescriptionText | textCount) > 250\r\n                  \">\r\n                  You have exceeded the maximum character limit of 250\r\n                  characters.\r\n                </p>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Dashboard Display Criteria  -->\r\n          <span class=\"head-label vx-fs-10 vx-fw-500 vx-txt-white vx-tt-uppercase vx-pl-1 vx-pr-1 vx-lh-4\">\r\n            Dashboard Display Criteria\r\n          </span>\r\n          <app-information-block></app-information-block>\r\n\r\n          <!-- Who -->\r\n          <div class=\"form-group-row\" [class.active]=\"activeSelector === 'whoCanView'\" [class.disabled]=\"\r\n              activeSelector &&\r\n              activeSelector !== 'whoCanView' &&\r\n              activeSelector !== 'name'\r\n            \">\r\n            <div class=\"image\">\r\n              <img [ngSrc]=\"ASSETS.dashBoardUsersIcon\" *ngIf=\"\r\n                  dashboardForm?.selectedViewers?.length == 0 ||\r\n                  activeSelector === 'whoCanView'\r\n                \" alt=\"\" width=\"36\" height=\"36\" />\r\n              <svg class=\"checkIcon\" *ngIf=\"\r\n                  dashboardForm?.selectedViewers?.length > 0 &&\r\n                  activeSelector !== 'whoCanView'\r\n                \" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n              </svg>\r\n            </div>\r\n            <div class=\"form\">\r\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">Who\r\n                  can view this dashboard?<span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\r\n                <div *ngIf=\"dashboardForm?.selectedViewers?.length == 0\"\r\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n                  (click)=\"activateSelector('whoCanView', true)\">\r\n                  <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\r\n                    Who can view this dashboard?\r\n                  </div>\r\n                </div>\r\n\r\n                <div *ngIf=\"dashboardForm?.selectedViewers?.length > 0\"\r\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\r\n                  <ng-container *ngIf=\"!groupsEnabled\" id=\"onlyuserslist\">\r\n                    <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"\r\n                        let user of dashboardForm?.selectedViewers?.slice(0, 1)\r\n                      \">\r\n                      <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" *ngIf=\"\r\n                          !listDetails.nonRemovableUsersList.includes(\r\n                            user.member_id\r\n                          )\r\n                        \" (click)=\"remove('whoCanView', user)\">&#xe9ae;</i>\r\n                      <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"user.member_name\"\r\n                        placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ user.member_name\r\n                        }}</span>\r\n                      <button *ngIf=\"\r\n                          dashboardForm?.selectedViewers?.length > 1 &&\r\n                          !groupsEnabled\r\n                        \"\r\n                        class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                        appPopover (click)=\"userList.popover()\" placement=\"left\">\r\n                        +{{ dashboardForm?.selectedViewers?.slice(1).length }}\r\n                      </button>\r\n                    </div>\r\n                    <app-popover #userList [dontCloseonClick]=\"true\">\r\n                      <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                          <li *ngFor=\"\r\n                              let user of dashboardForm?.selectedViewers\r\n                                | slice : 1;\r\n                              let j = index\r\n                            \">\r\n                            <div class=\"avatar-card\">\r\n                              <span class=\"value\" [arTooltip]=\"user?.member_name\" placement=\"bottom-left\" delay=\"0\"\r\n                                type=\"black\" [tooltipMandatory]=\"false\">\r\n                                <i class=\"icons cross-icon\" *ngIf=\"\r\n                                    !listDetails.nonRemovableUsersList.includes(\r\n                                      user.member_id\r\n                                    ) && !groupsEnabled\r\n                                  \" (click)=\"remove('whoCanView', user)\">&#xe90d;</i>\r\n                                {{ user?.member_name }}\r\n                              </span>\r\n                            </div>\r\n                          </li>\r\n                        </ul>\r\n                      </div>\r\n                    </app-popover>\r\n                  </ng-container>\r\n\r\n                  <div *ngIf=\"groupsEnabled\" class=\"vx-d-flex vx-align-center\">\r\n                    <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n                      <span class=\"chipName vx-fs-11 vx-label-txt\">USER(S)</span>\r\n                      <button\r\n                        class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                        appPopover (click)=\"userCount.popover()\" placement=\"left\">\r\n                        {{ dashboardForm?.selectedViewers?.length }}\r\n                      </button>\r\n                    </div>\r\n                    <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"\r\n                        dashboardForm?.selectedGroup?.length &&\r\n                        dashboardForm?.selectedViewers?.length\r\n                      \">&</span>\r\n                    <div *ngIf=\"dashboardForm?.selectedGroup?.length\" id=\"usersandgroups\"\r\n                      class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n                      <span class=\"chipName vx-fs-11 vx-label-txt\">USER GROUP(S)</span>\r\n                      <button\r\n                        class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                        appPopover (click)=\"groupCount.popover()\" placement=\"right\">\r\n                        {{ dashboardForm?.selectedGroup?.length }}\r\n                      </button>\r\n                    </div>\r\n\r\n                    <app-popover #userCount [dontCloseonClick]=\"true\">\r\n                      <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                          <li *ngFor=\"let data of dashboardForm?.selectedViewers\">\r\n                            <div class=\"avatar-card\">\r\n                              <span class=\"value\" [arTooltip]=\"data.member_name\" placement=\"bottom-left\" delay=\"0\"\r\n                                type=\"black\" [tooltipMandatory]=\"false\">\r\n                                <i class=\"icons cross-icon\" *ngIf=\"\r\n                                    !listDetails.nonRemovableUsersList.includes(\r\n                                      data.member_id\r\n                                    )\r\n                                  \" (click)=\"remove('whoCanView', data)\">&#xe90d;</i>\r\n                                {{ data.member_name }}\r\n                              </span>\r\n                            </div>\r\n                          </li>\r\n                        </ul>\r\n                      </div>\r\n                    </app-popover>\r\n\r\n                    <app-popover #groupCount [dontCloseonClick]=\"true\">\r\n                      <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                          <li *ngFor=\"let data of dashboardForm?.selectedGroup\">\r\n                            <div class=\"avatar-card\">\r\n                              <span class=\"value\" [arTooltip]=\"data.group_name\" placement=\"bottom-left\" delay=\"0\"\r\n                                type=\"black\" [tooltipMandatory]=\"false\">\r\n                                <i class=\"icons cross-icon\" (click)=\"remove('whoCanViewGroup', data)\">&#xe90d;</i>\r\n                                {{ data.group_name }}\r\n                              </span>\r\n                            </div>\r\n                          </li>\r\n                        </ul>\r\n                      </div>\r\n                    </app-popover>\r\n                  </div>\r\n\r\n                  <button *ngIf=\"activeSelector !== 'whoCanView'\"\r\n                    class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n                    (click)=\"activateSelector('whoCanView', true)\">\r\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Responsibility Center -->\r\n          <div class=\"form-group-row\" [class.active]=\"activeSelector === 'rcList'\" [class.disabled]=\"\r\n              activeSelector &&\r\n              activeSelector !== 'rcList' &&\r\n              activeSelector !== 'name'\r\n            \">\r\n            <div class=\"image\">\r\n              <img *ngIf=\"\r\n                  dashboardForm?.selectedResponsibilityCenters?.length == 0 ||\r\n                  activeSelector === 'rcList'\r\n                \" [ngSrc]=\"ASSETS.dashBoardRcIcon\" alt=\"\" width=\"36\" height=\"36\" />\r\n              <svg *ngIf=\"\r\n                  dashboardForm?.selectedResponsibilityCenters?.length > 0 &&\r\n                  activeSelector !== 'rcList'\r\n                \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n              </svg>\r\n            </div>\r\n            <div class=\"form\">\r\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                <label\r\n                  class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">RESPONSIBILITY\r\n                  CENTER(S)</label>\r\n                <div *ngIf=\"\r\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0\r\n                  \" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n                  (click)=\"activateSelector('rcList', true)\" [class.error]=\"\r\n                    submitted &&\r\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\r\n                    allProgamSelected?.length ==\r\n                      0 &&\r\n                    dashboardForm?.selectedRiskCategories?.length == 0\r\n                  \">\r\n                  <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\r\n                    Select the Responsibility Center(s) that you would like<br />displayed\r\n                    in the Dashboard, if any.\r\n                  </div>\r\n                </div>\r\n\r\n                <div *ngIf=\"\r\n                    dashboardForm?.selectedResponsibilityCenters?.length > 0\r\n                  \" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\r\n                  <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"\r\n                      let rc of dashboardForm?.selectedResponsibilityCenters?.slice(\r\n                        0,\r\n                        1\r\n                      )\r\n                    \">\r\n                    <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" (click)=\"remove('rc', rc)\">&#xe9ae;</i>\r\n                    <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"rc.item_name\" placement=\"bottom-left\"\r\n                      delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ rc.item_name }}</span>\r\n                    <button *ngIf=\"\r\n                        dashboardForm?.selectedResponsibilityCenters?.length > 1\r\n                      \"\r\n                      class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                      appPopover (click)=\"rcList.popover()\" placement=\"left\">\r\n                      +{{\r\n                      dashboardForm?.selectedResponsibilityCenters?.slice(1)\r\n                      .length\r\n                      }}\r\n                    </button>\r\n\r\n                    <app-popover #rcList [dontCloseonClick]=\"true\">\r\n                      <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                          <li *ngFor=\"\r\n                              let rc of dashboardForm?.selectedResponsibilityCenters\r\n                                | slice : 1;\r\n                              let j = index\r\n                            \">\r\n                            <div class=\"avatar-card\">\r\n                              <span class=\"value\" [arTooltip]=\"rc?.item_name\" placement=\"bottom-left\" delay=\"0\"\r\n                                type=\"black\" [tooltipMandatory]=\"false\">\r\n                                <i class=\"icons cross-icon\" (click)=\"remove('rc', rc)\">&#xe90d;</i>\r\n                                {{ rc?.item_name }}\r\n                              </span>\r\n                            </div>\r\n                          </li>\r\n                        </ul>\r\n                      </div>\r\n                    </app-popover>\r\n                  </div>\r\n\r\n                  <button *ngIf=\"activeSelector !== 'rcList'\"\r\n                    class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n                    (click)=\"activateSelector('rcList', true)\">\r\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Program -->\r\n          <div class=\"form-group-row\" [class.active]=\"activeSelector === 'responsibilityCategories'\" [class.disabled]=\"\r\n              activeSelector &&\r\n              activeSelector !== 'responsibilityCategories' &&\r\n              activeSelector !== 'name'\r\n            \">\r\n            <div class=\"image\">\r\n              <img *ngIf=\"\r\n                  allProgamSelected?.length ==\r\n                    0 || activeSelector === 'responsibilityCategories'\r\n                \" [ngSrc]=\"ASSETS.dashBoardProgramIcon\" alt=\"\" width=\"36\" height=\"36\" />\r\n              <svg *ngIf=\"\r\n                  allProgamSelected?.length > 0 &&\r\n                  activeSelector !== 'responsibilityCategories'\r\n                \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n              </svg>\r\n            </div>\r\n            <div class=\"form\">\r\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                <label\r\n                  class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">PROGRAM</label>\r\n                <div *ngIf=\"\r\n                    allProgamSelected?.length == 0\r\n                  \" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n                  (click)=\"activateSelector('responsibilityCategories', true)\" [class.error]=\"\r\n                    submitted &&\r\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\r\n                    allProgamSelected?.length ==\r\n                      0 &&\r\n                    dashboardForm?.selectedRiskCategories?.length == 0\r\n                  \">\r\n                  <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\r\n                    Select the Program(s) that you would like displayed in\r\n                    the<br />Dashboard, if any.\r\n                  </div>\r\n                </div>\r\n\r\n                <div *ngIf=\"\r\n                    allProgamSelected?.length > 0\r\n                  \" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\r\n                  <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"\r\n                      let rCategory of allProgamSelected?.slice(\r\n                        0,\r\n                        1\r\n                      )\r\n                    \">\r\n                    <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\r\n                      (click)=\"remove('responsibilityCategories', rCategory)\">&#xe9ae;</i>\r\n                    <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"rCategory.item_name\"\r\n                      placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ rCategory.name\r\n                      }}</span>\r\n                    <button *ngIf=\"\r\n                        allProgamSelected\r\n                          ?.length > 1\r\n                      \"\r\n                      class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                      appPopover (click)=\"rCategoryList.popover()\" placement=\"left\">\r\n                      +{{\r\n                      allProgamSelected?.slice(\r\n                      1\r\n                      ).length\r\n                      }}\r\n                    </button>\r\n\r\n                    <app-popover #rCategoryList [dontCloseonClick]=\"true\">\r\n                      <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                          <li *ngFor=\"\r\n                              let rCategory of allProgamSelected\r\n                                | slice : 1;\r\n                              let j = index\r\n                            \">\r\n                            <div class=\"avatar-card\">\r\n                              <span class=\"value\" [arTooltip]=\"rCategory?.name\" placement=\"bottom-left\" delay=\"0\"\r\n                                type=\"black\" [tooltipMandatory]=\"false\">\r\n                                <i class=\"icons cross-icon\" (click)=\"\r\n                                    remove(\r\n                                      'responsibilityCategories',\r\n                                      rCategory\r\n                                    )\r\n                                  \">&#xe90d;</i>\r\n                                {{ rCategory?.name }}\r\n                              </span>\r\n                            </div>\r\n                          </li>\r\n                        </ul>\r\n                      </div>\r\n                    </app-popover>\r\n                  </div>\r\n\r\n                  <button *ngIf=\"activeSelector !== 'responsibilityCategories'\"\r\n                    class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n                    (click)=\"activateSelector('responsibilityCategories', true)\">\r\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n\r\n          <!-- Timeframe -->\r\n          <div class=\"form-group-row\" [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\r\n            <div class=\"image\">\r\n              <img *ngIf=\"\r\n                  !dashboardForm?.selectedFromDate ||\r\n                  !dashboardForm?.selectedToDate\r\n                \" [ngSrc]=\"ASSETS.dashBoardTimeFrameIcon\" alt=\"\" width=\"36\" height=\"36\" />\r\n              <svg *ngIf=\"\r\n                  dashboardForm?.selectedFromDate &&\r\n                  dashboardForm?.selectedToDate\r\n                \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n              </svg>\r\n            </div>\r\n            <div class=\"form\">\r\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                <label\r\n                  class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">TIMEFRAME</label>\r\n                <label class=\"vx-control-panel-sub-label\">Select how long the selected information should be displayed.\r\n                  Once the selected timeframe expires, the dashboard will automatically be deactivated and no longer\r\n                  displayed to users. If no timeframe is selected, the information\r\n                  will be displayed permanently.</label>\r\n                <div class=\"input-group vx-d-flex vx-justify-between\">\r\n                  <div class=\"date-select\">\r\n                    <i class=\"icons\">&#xe92d;</i>\r\n                    <input type=\"text\" id=\"from_date\" [value]=\"\r\n                        dashboardForm?.selectedFromDate | date : 'dd MMM yyyy'\r\n                      \" [placeholder]=\"'From'\" (click)=\"openFromDatePicker($event)\" readonly />\r\n                    <dp-date-picker #fromDatePicker [(ngModel)]=\"dashboardForm.selectedFromDate\"\r\n                      placeholder=\"Select Date\" (onSelect)=\"\r\n                        closeFromDatePicker(); datePickerOverlay = false\r\n                      \" [config]=\"fromDatePickerConfig\"></dp-date-picker>\r\n                    <div class=\"overlay\" (click)=\"closeFromDatePicker()\" *ngIf=\"datePickerOverlay\"></div>\r\n                  </div>\r\n                  <div class=\"date-select\" *ngIf=\"!hideToDate\" [class.disabled]=\"!dashboardForm?.selectedFromDate\">\r\n                    <i class=\"icons\">&#xe92d;</i>\r\n                    <input type=\"text\" id=\"to_date\" [value]=\"\r\n                        dashboardForm?.selectedToDate | date : 'dd MMM yyyy'\r\n                      \" [placeholder]=\"'To'\" (click)=\"openToDatePicker($event)\" readonly />\r\n                    <dp-date-picker #toDatePicker [(ngModel)]=\"dashboardForm.selectedToDate\" placeholder=\"Select Date\"\r\n                      (onSelect)=\"\r\n                        closeToDatePicker(); datePickerOverlay = false\r\n                      \" [config]=\"toDatePickerConfig\"></dp-date-picker>\r\n                    <div class=\"overlay\" (click)=\"closeToDatePicker()\" *ngIf=\"datePickerOverlay\"></div>\r\n                  </div>\r\n                </div>\r\n                <p class=\"vx-txt-error\" [appScrollInView]=\"true\" *ngIf=\"\r\n                    submitted &&\r\n                    dashboardForm.selectedFromDate &&\r\n                    !dashboardForm.selectedToDate\r\n                  \">\r\n                  Select a time-frame.\r\n                </p>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Email Summary -->\r\n          <!-- <div\r\n            class=\"form-group-row\"\r\n            [class.active]=\"activeSelector === 'frequency'\"\r\n            [class.disabled]=\"\r\n              activeSelector &&\r\n              activeSelector !== 'frequency' &&\r\n              activeSelector !== 'name'\r\n            \"\r\n          >\r\n            <div class=\"image\">\r\n              <img\r\n                *ngIf=\"!dashboardForm.frequencyMessage\"\r\n                [ngSrc]=\"ASSETS.dashBoardEmailSummariesIcon\"\r\n                alt=\"\"\r\n                width=\"36\"\r\n                height=\"36\"\r\n              />\r\n              <svg\r\n                *ngIf=\"dashboardForm.frequencyMessage\"\r\n                class=\"checkIcon\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                viewBox=\"0 0 52 52\"\r\n              >\r\n                <circle\r\n                  class=\"checkIcon__circle\"\r\n                  cx=\"26\"\r\n                  cy=\"26\"\r\n                  r=\"25\"\r\n                  fill=\"none\"\r\n                />\r\n                <path\r\n                  class=\"checkIcon__check\"\r\n                  fill=\"none\"\r\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n                />\r\n              </svg>\r\n            </div>\r\n            <div class=\"form\">\r\n              <div class=\"vx-form-group vx-d-block\">\r\n                <label\r\n                  class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\r\n                  >Email Summaries</label\r\n                >\r\n                <label class=\"vx-control-panel-sub-label\"\r\n                  >If you would like to send a summary of this Dashboard, please\r\n                  select a frequency(By default VComply sends a weekly\r\n                  Summary).</label\r\n                >\r\n                <div\r\n                  *ngIf=\"!dashboardForm.frequencyMessage\"\r\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n                  (click)=\"activateSelector('frequency', true)\"\r\n                >\r\n                  <div\r\n                    class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n                  >\r\n                    Email Summaries\r\n                  </div>\r\n                </div>\r\n\r\n                <div\r\n                  *ngIf=\"dashboardForm.frequencyMessage\"\r\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n                >\r\n                  <div\r\n                    class=\"selectBoxText vx-fs-13 vx-paragraph-txt\"\r\n                    [arTooltip]=\"dashboardForm.frequencyMessage\"\r\n                    placement=\"bottom-left\"\r\n                    type=\"black\"\r\n                    delay=\"0\"\r\n                    [tooltipMandatory]=\"false\"\r\n                    [innerHTML]=\"dashboardForm.frequencyMessage\"\r\n                  ></div>\r\n\r\n                  <button\r\n                    *ngIf=\"\r\n                      dashboardForm.frequencyMessage &&\r\n                      activeSelector !== 'frequency'\r\n                    \"\r\n                    class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n                    (click)=\"activateSelector('frequency', true)\"\r\n                  >\r\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div> -->\r\n        </div>\r\n        <div class=\"button-block\">\r\n          <button class=\"vx-btn block primary\" [disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n            (click)=\"configureDashboard()\">\r\n            Next: Configure Widgets\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <button class=\"close-dialog\" type=\"button\" [disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n        (click)=\"close.emit({ mode: 'discard' })\" [arTooltip]=\"'[Esc] to close'\" placement=\"left\" type=\"black\" delay=\"0\"\r\n        [tooltipMandatory]=\"true\" [class.hide]=\"activeSelector && activeSelector !== 'name'\">\r\n        <i class=\"icons\">&#xe93f;</i>\r\n      </button>\r\n      <div class=\"global-confirmation-alert\" *ngIf=\"\r\n          submitted &&\r\n          dashboardForm?.selectedResponsibilityCenters?.length == 0 \r\n        \">\r\n        <div class=\"global-confirmation-alert-top\">\r\n          <span class=\"icon-block\">\r\n            <i class=\"icons\">&#xe930;</i>\r\n          </span>\r\n          <p class=\"text\" *ngIf=\"showRiskCategory\">\r\n            Select a Responsibility Center or Risk Category.\r\n          </p>\r\n          <p class=\"text\" *ngIf=\"!showRiskCategory\">\r\n            Select a Responsibility Center.\r\n          </p>\r\n        </div>\r\n        <div class=\"global-confirmation-alert-bottom\">\r\n          <p class=\"message\"></p>\r\n          <div class=\"button-group\">\r\n            <button class=\"fill\" type=\"button\" (click)=\"submitted = false\">\r\n              OKAY\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<app-smiley-dialog *ngIf=\"isSmiley\" [message]=\"smileyMessage\"></app-smiley-dialog>\r\n\r\n<app-configure-widgets *ngIf=\"openConfigureWidgets\" [mode]=\"mode\" [displayedWidgets]=\"displayedWidgets\"\r\n  [showRisk]=\"showRiskWidgets\" [showCompliance]=\"!showComplianceWidgets\" [selectedWidgetsData]=\"selectedWidgets\"\r\n  (widgetsDataModified)=\"setSelectedWidgets($event)\"\r\n  (closeConfigureWidgets)=\"closeConfigureWidgets($event)\"></app-configure-widgets>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/dialog/dialog.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";::ng-deep .create-dashboard-container{width:100vw;background:#161b2fcc}::ng-deep .create-dashboard-container .vx-dialog-container{background-color:#fff;border:none;position:relative}@media screen and (max-width: 1280px){::ng-deep .create-dashboard-container .vx-dialog-container.tablet-width{width:28px!important}::ng-deep .create-dashboard-container .vx-dialog-container.tablet-width .form-group .vx-dialog-body-container{overflow:hidden}}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog{display:flex;position:absolute;top:8px;right:8px;height:32px;width:32px;font-size:16px;color:#161b2f;cursor:pointer;background:transparent;border:none;border-radius:2px;z-index:2;align-items:center;justify-content:center}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog:hover{background:#f1f1f1}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog:disabled{pointer-events:none;filter:grayscale(1);opacity:.3}@media screen and (max-width: 1280px){::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog.hide{display:none}}::ng-deep .create-dashboard .more-option{width:calc(100% - 500px);border-right:1px solid #f1f1f1;float:left}@media screen and (max-width: 1280px){::ng-deep .create-dashboard .more-option{width:calc(100vw - 28px)}::ng-deep .create-dashboard .more-option app-user-list .user-list{right:28px}::ng-deep .create-dashboard .more-option app-responsibility-center .responsibility-center{right:28px}::ng-deep .create-dashboard .more-option app-categories .category-list{right:28px}::ng-deep .create-dashboard .more-option app-risk-categories .risk-category-list{right:28px}::ng-deep .create-dashboard .more-option app-frequency .create-frequency{right:28px}}::ng-deep .form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container{padding:36px 28px 0 40px!important;height:calc(100vh - 50px);overflow:auto;margin-left:-22px;background-color:transparent;position:relative;border-radius:0 0 0 30px;background:transparent}@-moz-document url-prefix(){::ng-deep .form-group .vx-dialog-body-container.hidden-scroll{overflow:hidden}}::ng-deep .form-group .vx-dialog-body-container .form-group-row{display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image{width:36px;min-width:36px;height:36px;margin-left:-36px;margin-right:20px;margin-top:28px;display:flex;align-items:center;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image img{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon{width:32px;height:32px;background:#fff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input{height:40px;border-radius:4px;border:1px solid #dbdbdb;outline:none;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+vcomply-editor{margin-top:8px;display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:after{border-left:none;border-bottom:1px solid #707070;border-right:1px solid #707070;border-top:none;content:\"\";display:inline-block;right:15px;position:absolute;top:calc(50% + 8px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:hover .custom-input{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;position:relative;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .edit{border:1px solid #f1f1f1;border-radius:2px;background:#fff;outline:none;cursor:pointer;height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left{width:auto;display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left.frequency-left{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;width:calc(100% - 70px)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container{width:auto}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip{border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip i{cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip .value{max-width:100px;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .count{border-radius:2px;height:24px;padding:2px 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:300px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count{background:#1e5dd3;border-radius:20px;color:#fff;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group{display:flex;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group span.counter{background:transparent;color:#161b2f;font-size:9px;font-weight:500;position:absolute;top:0;right:0;border-radius:3px;height:16px;text-align:center;line-height:16px;padding:0 2px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group vcomply-editor{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor .editor-container .editable-block.bottom:before,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group vcomply-editor .editor-container .editable-block.bottom:before{opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group.vx-input-group{margin-top:8px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor{display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container{border-radius:4px;border-color:#dbdbdb}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:hover{border-color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:hover .editor-tools{border-top-color:#1e5dd3!important;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;max-height:90px}@media not all and (min-resolution: .001dpcm){@supports (-webkit-appearance: none){::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block:before,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editable-block:before{opacity:.72}}}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools{border-color:#dbdbdb;border-radius:0 0 2px 2px;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input{height:2.5rem;border-radius:.25rem;border:1px solid #dbdbdb;background:#fff;outline:none;padding:.1875rem .75rem;line-height:1.25rem;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:12px;width:94%;display:block;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input.error{border:1px solid #d93b41}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel i{font-size:12px;color:#1e5dd3;margin-left:7px;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;margin-bottom:.5rem;display:block;text-transform:none;width:100%;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label span.required{color:#eb2424}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel+.vx-control-panel-sub-label{margin-top:-.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.radio{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item svg{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio+app-cs-radio{margin-top:.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select{position:relative;width:calc(50% - .25rem);overflow:hidden;height:40px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input{position:relative;z-index:1;padding-left:36px!important;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select dp-date-picker{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;pointer-events:none;z-index:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select i{display:flex;justify-content:center;align-items:center;height:39px;width:14px;position:absolute;left:12px;top:0;color:#bcbcbc;font-size:14px;pointer-events:none;z-index:2}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled{pointer-events:none;filter:grayscale(1);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled input{background:#f1f1f1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel span.sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;text-transform:none;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row.disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active{pointer-events:none;filter:grayscale(0);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image{filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image:before{display:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form{opacity:1;filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form .custom-input,::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form input[type=text]{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container:after{content:\"\";width:100%;display:block;height:30px;position:sticky;right:0;bottom:0;left:0;z-index:6;background:linear-gradient(to bottom,#fff0,#ffffffbf 22%,#fff);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#00ffffff\",endColorstr=\"#ffffff\",GradientType=0)}::ng-deep .form-group .button-block{position:relative;z-index:2}::ng-deep .form-group .button-block button{font-size:13px!important;letter-spacing:1.3px!important;height:50px;line-height:48px!important}::ng-deep .form-group .button-block button:disabled{background:#f1f1f1!important;border-color:#f1f1f1!important;color:#747576!important;opacity:1!important;filter:unset!important}::ng-deep .form-group.disabled{pointer-events:none;z-index:2}::ng-deep .form-group.disabled .image{position:relative;filter:grayscale(1)}::ng-deep .form-group.disabled .image:before{content:\"\";position:absolute;inset:0;background:#fff;opacity:.7}::ng-deep .form-group.disabled .form{opacity:.3;filter:grayscale(1)}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}.action-list{width:220px}.action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.action-list ul.action-item{display:block}.action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.action-list ul.action-item li button:hover{background:#f3f3f3}.action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.action-list ul.action-item li .avatar-card.within-con{display:block}.action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.action-list ul.action-item li .avatar-card .avatar img{width:100%}.action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:4px}.action-list ul.action-item li .avatar-card span.value i.cross-icon{color:#747576}.action-list ul.action-item li .avatar-card.no-image{display:block}.action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.action-list ul.action-item li .chip-item span.id{font-size:9px}.action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}.global-confirmation-alert{display:block;position:absolute;z-index:9;right:0;bottom:0;left:0;background:#d93b41}.global-confirmation-alert-top{display:flex;align-items:center;justify-content:flex-start;padding:20px 20px 12px}.global-confirmation-alert span.icon-block{height:36px;width:36px;border-radius:50%;background:#fff;border:1px solid #dcdcdc;display:flex;justify-content:center;align-items:center;margin-right:16px}.global-confirmation-alert span.icon-block i{color:#d93b41;font-size:12px}.global-confirmation-alert p.text{color:#fff;font-size:14px;font-weight:300;margin:0;width:calc(100% - 52px)}.global-confirmation-alert-bottom{display:flex;align-items:center;padding:0 12px 12px 72px;background:#d93b41}.global-confirmation-alert-bottom .button-group{display:flex}.global-confirmation-alert-bottom p.message{font-size:14px;font-weight:500;margin:0;line-height:20px;color:#fff}.global-confirmation-alert button{height:24px;width:64px;border:1px solid #000;border-radius:2px;display:flex;align-items:center;justify-content:center;line-height:22px;cursor:pointer;font-size:11px;text-transform:uppercase;font-weight:500;padding:0}.global-confirmation-alert button+button{margin-left:4px}.global-confirmation-alert button.fill{background:#fff;color:#1e5dd3;border-color:#fff}.global-confirmation-alert button.outline{background:transparent;color:#fff;border-color:#fff}::ng-deep marx-modal .popup-modal-background,::ng-deep vcomply-modal .popup-modal-background{background-color:#161b2fcc!important}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;font-size:13px;color:#747576;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField::placeholder{font-size:13px;color:#747576}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxEnable.error{border-color:#eb2424}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer .chipName.no-width{max-width:unset}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}::ng-deep .cdk-overlay-pane{inset:0!important;align-items:center;justify-content:center}::ng-deep .cdk-overlay-pane .dp-popup{z-index:999;display:flex!important;align-items:center;justify-content:center;width:100vw;height:100vh;background:transparent!important;border:none!important;box-shadow:unset!important}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar{width:412px!important;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}.left-side{color:#707070}.right-side button{border-radius:2px;height:24px;background:#1e5dd3!important;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;font-weight:500;border:none!important;padding:0 8px;margin:0 0 0 8px}.right-side button i{margin-left:8px;font-size:11px}.right-side button:disabled{background:#f1f1f1!important;color:#747576!important;opacity:1}.right-side button.cancelBtn{background:transparent!important;color:#eb2424!important}.selected-count-box{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem;position:relative}.selected-text{color:#707070;font-size:11px;font-weight:500;position:fixed;padding-left:2.5rem}::ng-deep .vc-divider{border-top:.5px solid #dbdbdb;width:100%}::ng-deep .vc-cf-container{border-bottom:1px solid #E3E3E9}::ng-deep .vc-cf-container:first-of-type,::ng-deep .vc-cf-container:only-child{border-top:1px solid #E3E3E9}::ng-deep .vc-cf-container .cf-name{width:9.25rem}::ng-deep .vc-cf-container .cf-value{width:calc(100% - 9.75rem)}::ng-deep .vc-cf-container .cf-value input{height:24px!important;border:1px solid #CDCED6!important;padding:0 .5rem!important;color:#565a6f!important;font-size:11px!important}::ng-deep .vc-cf-container .cf-value input::placeholder{color:#a9aab6!important}::ng-deep .vc-cf-container .cf-value input:hover{border-color:#343952!important}::ng-deep .vc-cf-container .cf-value input:focus{outline:none;border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd31a}.head-label{background:#565a6f;border-radius:.125rem;height:1rem;position:relative}.head-label:before{background:#e3e3e9;content:\"\";position:absolute;top:7px;left:-40px;width:500px;height:1px;z-index:-1}\n"] }]
+            args: [{ selector: 'app-create-dashboard', providers: [TextCountPipe], template: "<app-snack-bar></app-snack-bar>\r\n<div class=\"create-dashboard\" *ngIf=\"!openConfigureWidgets\">\r\n  <div class=\"create-dashboard-container vx-d-flex vx-justify-end\" [class.animate-slideInRight]=\"animation\">\r\n    <div class=\"more-option\" *ngIf=\"activeSelector && activeSelector !== 'name'\">\r\n      <app-user-list *ngIf=\"activeSelector === 'whoCanView'\"\r\n        (saveSelectedUsers)=\"saveSelectedList('whoCanView', $event)\" (closeUserList)=\"activateSelector('', false)\"\r\n        [totalPages]=\"totalPages\" [totalList]=\"totalList\" [listDetails]=\"listDetails\" [totalgroupscount]=\"totalgroups\"\r\n        [feature]=\"feature\"></app-user-list>\r\n      <app-responsibility-center *ngIf=\"activeSelector === 'rcList'\"\r\n        [responsibilityCentersList]=\"responsibilityCentersList\" [radioSelection]=\"false\"\r\n        [selectedResponsibilityCenters]=\"\r\n          dashboardForm.selectedResponsibilityCenters\r\n        \" [rcIdKey]=\"'item_id'\" (saveSelectedList)=\"saveSelectedList('rc', $event)\"\r\n        (closeRcList)=\"activateSelector('', false)\">\r\n      </app-responsibility-center>\r\n      <!-- <app-categories *ngIf=\"activeSelector === 'responsibilityCategories'\"\r\n        [categoryList]=\"responsibilityCategoriesTree\" [allCategories]=\"allComplianceCategories\"\r\n        [categoryIdKey]=\"'category_id'\" [selectedCategories]=\"dashboardForm.selectedResponsibilityCategories\"\r\n        (saveSelectedCategory)=\"\r\n          saveSelectedList('responsibilityCategories', $event)\r\n        \" (closeCategoriesList)=\"activateSelector('', false)\"></app-categories> -->\r\n      <app-list-container list *ngIf=\"activeSelector === 'responsibilityCategories'\"\r\n        (close)=\"activateSelector('', false)\">\r\n        <app-program-list body (itemsSelectedChange)=\"onProgramSelectionChange($event)\"\r\n          [selectedItems]=\"selectedPrograms\" [url]=\"programListUrl\"></app-program-list>\r\n        <div class=\"vx-d-flex vx-align-center vx-justify-between vx-w-100\" footer>\r\n          <div class=\"left-side vx-fs-12 vx-d-flex\">\r\n            <ng-container *ngIf=\"allProgamSelected?.length > 0\">\r\n              <button\r\n                class=\"selected-count-box vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\">\r\n                {{ allProgamSelected.length }}\r\n              </button>\r\n              <span class=\"selected-text\">\r\n                Program\r\n                {{ allProgamSelected.length > 1 ? \"Categories\" : \"Category\" }}\r\n                Selected</span>\r\n            </ng-container>\r\n          </div>\r\n          <div class=\"right-side vx-d-flex\">\r\n            <button class=\"cancelBtn\" (click)=\"activateSelector('', false)\">Cancel</button>\r\n            <button class=\"nextBtn\" (click)=\"activateSelector('', false);\">\r\n              Next <i class=\"icons\">&#xe91e;</i>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </app-list-container>\r\n\r\n    </div>\r\n    <div class=\"vx-dialog-container side-dialog\" [class.tablet-width]=\"activeSelector && activeSelector !== 'name'\">\r\n      <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n\r\n      <div class=\"form-group\" [class.disabled]=\"disabled\">\r\n        <div class=\"vx-dialog-body-container\" (scroll)=\"animateImage()\"\r\n          [class.hidden-scroll]=\"popoverService.stopScroll\">\r\n          <!-- Dashboard Name -->\r\n          <div class=\"form-group-row\" [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\r\n            <div class=\"image\">\r\n              <img [ngSrc]=\"ASSETS.dashBoardIcon\" *ngIf=\"\r\n                  !dashboardForm.dashboardName || activeSelector === 'name'\r\n                \" alt=\"\" width=\"36\" height=\"36\" />\r\n              <svg class=\"checkIcon\" *ngIf=\"dashboardForm.dashboardName && activeSelector !== 'name'\"\r\n                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n              </svg>\r\n            </div>\r\n            <div class=\"form\">\r\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                <label\r\n                  class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">Dashboard\r\n                  Name\r\n                  <span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\r\n                <div class=\"vx-input-group\">\r\n                  <input class=\"textField\" placeholder=\"Add dashboard name (Max limit: 30 characters).\"\r\n                    [(ngModel)]=\"dashboardForm.dashboardName\" (keydown)=\"activeSelector = 'name'\"\r\n                    (focusin)=\"activateSelector('name', true)\" (focusout)=\"activateSelector('name', false)\" />\r\n\r\n                  <span class=\"counter\" *ngIf=\"dashboardForm?.dashboardName?.length > 0\">{{ 30 -\r\n                    dashboardForm.dashboardName.length }}</span>\r\n                </div>\r\n\r\n                <p class=\"vx-txt-error\" [appScrollInView]=\"true\" *ngIf=\"\r\n                    submitted &&\r\n                    (dashboardForm?.dashboardName?.length > 30 ||\r\n                      !dashboardForm?.dashboardName)\r\n                  \">\r\n                  {{\r\n                  dashboardForm.dashboardName.length > 30\r\n                  ? \"You have exceeded the maximum character limit of 30 characters.\"\r\n                  : \"Please enter a name for this Dashboard.\"\r\n                  }}\r\n                </p>\r\n\r\n                <div class=\"vx-input-group vx-mt-2\">\r\n                  <vcomply-editor [editorConfig]=\"dashboardDescription\"\r\n                    [(ngModel)]=\"dashboardForm.dashboardDescriptionText\"></vcomply-editor>\r\n                  <span class=\"counter\" *ngIf=\"dashboardForm?.dashboardDescriptionText?.length > 0\">{{\r\n                    250 -\r\n                    (dashboardForm?.dashboardDescriptionText | textCount)\r\n                    }}</span>\r\n                </div>\r\n\r\n                <p class=\"vx-txt-error\" [appScrollInView]=\"true\" *ngIf=\"\r\n                    submitted &&\r\n                    (dashboardForm?.dashboardDescriptionText | textCount) > 250\r\n                  \">\r\n                  You have exceeded the maximum character limit of 250\r\n                  characters.\r\n                </p>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Dashboard Display Criteria  -->\r\n          <span class=\"head-label vx-fs-10 vx-fw-500 vx-txt-white vx-tt-uppercase vx-pl-1 vx-pr-1 vx-lh-4\">\r\n            Dashboard Display Criteria\r\n          </span>\r\n          <app-information-block></app-information-block>\r\n\r\n          <!-- Who -->\r\n          <div class=\"form-group-row\" [class.active]=\"activeSelector === 'whoCanView'\" [class.disabled]=\"\r\n              activeSelector &&\r\n              activeSelector !== 'whoCanView' &&\r\n              activeSelector !== 'name'\r\n            \">\r\n            <div class=\"image\">\r\n              <img [ngSrc]=\"ASSETS.dashBoardUsersIcon\" *ngIf=\"\r\n                  dashboardForm?.selectedViewers?.length == 0 ||\r\n                  activeSelector === 'whoCanView'\r\n                \" alt=\"\" width=\"36\" height=\"36\" />\r\n              <svg class=\"checkIcon\" *ngIf=\"\r\n                  dashboardForm?.selectedViewers?.length > 0 &&\r\n                  activeSelector !== 'whoCanView'\r\n                \" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n              </svg>\r\n            </div>\r\n            <div class=\"form\">\r\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">Who\r\n                  can view this dashboard?<span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\r\n                <div *ngIf=\"dashboardForm?.selectedViewers?.length == 0\"\r\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n                  (click)=\"activateSelector('whoCanView', true)\">\r\n                  <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\r\n                    Who can view this dashboard?\r\n                  </div>\r\n                </div>\r\n\r\n                <div *ngIf=\"dashboardForm?.selectedViewers?.length > 0\"\r\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\r\n                  <ng-container *ngIf=\"!groupsEnabled\" id=\"onlyuserslist\">\r\n                    <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"\r\n                        let user of dashboardForm?.selectedViewers?.slice(0, 1)\r\n                      \">\r\n                      <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" *ngIf=\"\r\n                          !listDetails.nonRemovableUsersList.includes(\r\n                            user.member_id\r\n                          )\r\n                        \" (click)=\"remove('whoCanView', user)\">&#xe9ae;</i>\r\n                      <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"user.member_name\"\r\n                        placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ user.member_name\r\n                        }}</span>\r\n                      <button *ngIf=\"\r\n                          dashboardForm?.selectedViewers?.length > 1 &&\r\n                          !groupsEnabled\r\n                        \"\r\n                        class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                        appPopover (click)=\"userList.popover()\" placement=\"left\">\r\n                        +{{ dashboardForm?.selectedViewers?.slice(1).length }}\r\n                      </button>\r\n                    </div>\r\n                    <app-popover #userList [dontCloseonClick]=\"true\">\r\n                      <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                          <li *ngFor=\"\r\n                              let user of dashboardForm?.selectedViewers\r\n                                | slice : 1;\r\n                              let j = index\r\n                            \">\r\n                            <div class=\"avatar-card\">\r\n                              <span class=\"value\" [arTooltip]=\"user?.member_name\" placement=\"bottom-left\" delay=\"0\"\r\n                                type=\"black\" [tooltipMandatory]=\"false\">\r\n                                <i class=\"icons cross-icon\" *ngIf=\"\r\n                                    !listDetails.nonRemovableUsersList.includes(\r\n                                      user.member_id\r\n                                    ) && !groupsEnabled\r\n                                  \" (click)=\"remove('whoCanView', user)\">&#xe90d;</i>\r\n                                {{ user?.member_name }}\r\n                              </span>\r\n                            </div>\r\n                          </li>\r\n                        </ul>\r\n                      </div>\r\n                    </app-popover>\r\n                  </ng-container>\r\n\r\n                  <div *ngIf=\"groupsEnabled\" class=\"vx-d-flex vx-align-center\">\r\n                    <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n                      <span class=\"chipName vx-fs-11 vx-label-txt\">USER(S)</span>\r\n                      <button\r\n                        class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                        appPopover (click)=\"userCount.popover()\" placement=\"left\">\r\n                        {{ dashboardForm?.selectedViewers?.length }}\r\n                      </button>\r\n                    </div>\r\n                    <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"\r\n                        dashboardForm?.selectedGroup?.length &&\r\n                        dashboardForm?.selectedViewers?.length\r\n                      \">&</span>\r\n                    <div *ngIf=\"dashboardForm?.selectedGroup?.length\" id=\"usersandgroups\"\r\n                      class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n                      <span class=\"chipName vx-fs-11 vx-label-txt\">USER GROUP(S)</span>\r\n                      <button\r\n                        class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                        appPopover (click)=\"groupCount.popover()\" placement=\"right\">\r\n                        {{ dashboardForm?.selectedGroup?.length }}\r\n                      </button>\r\n                    </div>\r\n\r\n                    <app-popover #userCount [dontCloseonClick]=\"true\">\r\n                      <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                          <li *ngFor=\"let data of dashboardForm?.selectedViewers\">\r\n                            <div class=\"avatar-card\">\r\n                              <span class=\"value\" [arTooltip]=\"data.member_name\" placement=\"bottom-left\" delay=\"0\"\r\n                                type=\"black\" [tooltipMandatory]=\"false\">\r\n                                <i class=\"icons cross-icon\" *ngIf=\"\r\n                                    !listDetails.nonRemovableUsersList.includes(\r\n                                      data.member_id\r\n                                    )\r\n                                  \" (click)=\"remove('whoCanView', data)\">&#xe90d;</i>\r\n                                {{ data.member_name }}\r\n                              </span>\r\n                            </div>\r\n                          </li>\r\n                        </ul>\r\n                      </div>\r\n                    </app-popover>\r\n\r\n                    <app-popover #groupCount [dontCloseonClick]=\"true\">\r\n                      <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                          <li *ngFor=\"let data of dashboardForm?.selectedGroup\">\r\n                            <div class=\"avatar-card\">\r\n                              <span class=\"value\" [arTooltip]=\"data.group_name\" placement=\"bottom-left\" delay=\"0\"\r\n                                type=\"black\" [tooltipMandatory]=\"false\">\r\n                                <i class=\"icons cross-icon\" (click)=\"remove('whoCanViewGroup', data)\">&#xe90d;</i>\r\n                                {{ data.group_name }}\r\n                              </span>\r\n                            </div>\r\n                          </li>\r\n                        </ul>\r\n                      </div>\r\n                    </app-popover>\r\n                  </div>\r\n\r\n                  <button *ngIf=\"activeSelector !== 'whoCanView'\"\r\n                    class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n                    (click)=\"activateSelector('whoCanView', true)\">\r\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Responsibility Center -->\r\n          <div class=\"form-group-row\" [class.active]=\"activeSelector === 'rcList'\" [class.disabled]=\"\r\n              activeSelector &&\r\n              activeSelector !== 'rcList' &&\r\n              activeSelector !== 'name'\r\n            \">\r\n            <div class=\"image\">\r\n              <img *ngIf=\"\r\n                  dashboardForm?.selectedResponsibilityCenters?.length == 0 ||\r\n                  activeSelector === 'rcList'\r\n                \" [ngSrc]=\"ASSETS.dashBoardRcIcon\" alt=\"\" width=\"36\" height=\"36\" />\r\n              <svg *ngIf=\"\r\n                  dashboardForm?.selectedResponsibilityCenters?.length > 0 &&\r\n                  activeSelector !== 'rcList'\r\n                \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n              </svg>\r\n            </div>\r\n            <div class=\"form\">\r\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                <label\r\n                  class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">RESPONSIBILITY\r\n                  CENTER(S)</label>\r\n                <div *ngIf=\"\r\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0\r\n                  \" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n                  (click)=\"activateSelector('rcList', true)\" [class.error]=\"\r\n                    submitted &&\r\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\r\n                    allProgamSelected?.length ==\r\n                      0 &&\r\n                    dashboardForm?.selectedRiskCategories?.length == 0\r\n                  \">\r\n                  <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\r\n                    Select the Responsibility Center(s) that you would like<br />displayed\r\n                    in the Dashboard, if any.\r\n                  </div>\r\n                </div>\r\n\r\n                <div *ngIf=\"\r\n                    dashboardForm?.selectedResponsibilityCenters?.length > 0\r\n                  \" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\r\n                  <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"\r\n                      let rc of dashboardForm?.selectedResponsibilityCenters?.slice(\r\n                        0,\r\n                        1\r\n                      )\r\n                    \">\r\n                    <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" (click)=\"remove('rc', rc)\">&#xe9ae;</i>\r\n                    <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"rc.item_name\" placement=\"bottom-left\"\r\n                      delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ rc.item_name }}</span>\r\n                    <button *ngIf=\"\r\n                        dashboardForm?.selectedResponsibilityCenters?.length > 1\r\n                      \"\r\n                      class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                      appPopover (click)=\"rcList.popover()\" placement=\"left\">\r\n                      +{{\r\n                      dashboardForm?.selectedResponsibilityCenters?.slice(1)\r\n                      .length\r\n                      }}\r\n                    </button>\r\n\r\n                    <app-popover #rcList [dontCloseonClick]=\"true\">\r\n                      <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                          <li *ngFor=\"\r\n                              let rc of dashboardForm?.selectedResponsibilityCenters\r\n                                | slice : 1;\r\n                              let j = index\r\n                            \">\r\n                            <div class=\"avatar-card\">\r\n                              <span class=\"value\" [arTooltip]=\"rc?.item_name\" placement=\"bottom-left\" delay=\"0\"\r\n                                type=\"black\" [tooltipMandatory]=\"false\">\r\n                                <i class=\"icons cross-icon\" (click)=\"remove('rc', rc)\">&#xe90d;</i>\r\n                                {{ rc?.item_name }}\r\n                              </span>\r\n                            </div>\r\n                          </li>\r\n                        </ul>\r\n                      </div>\r\n                    </app-popover>\r\n                  </div>\r\n\r\n                  <button *ngIf=\"activeSelector !== 'rcList'\"\r\n                    class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n                    (click)=\"activateSelector('rcList', true)\">\r\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Program -->\r\n          <div class=\"form-group-row\" [class.active]=\"activeSelector === 'responsibilityCategories'\" [class.disabled]=\"\r\n              activeSelector &&\r\n              activeSelector !== 'responsibilityCategories' &&\r\n              activeSelector !== 'name'\r\n            \">\r\n            <div class=\"image\">\r\n              <img *ngIf=\"\r\n                  allProgamSelected?.length ==\r\n                    0 || activeSelector === 'responsibilityCategories'\r\n                \" [ngSrc]=\"ASSETS.dashBoardProgramIcon\" alt=\"\" width=\"36\" height=\"36\" />\r\n              <svg *ngIf=\"\r\n                  allProgamSelected?.length > 0 &&\r\n                  activeSelector !== 'responsibilityCategories'\r\n                \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n              </svg>\r\n            </div>\r\n            <div class=\"form\">\r\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                <label\r\n                  class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">PROGRAM</label>\r\n                <div *ngIf=\"\r\n                    allProgamSelected?.length == 0\r\n                  \" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n                  (click)=\"activateSelector('responsibilityCategories', true)\" [class.error]=\"\r\n                    submitted &&\r\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\r\n                    allProgamSelected?.length ==\r\n                      0 &&\r\n                    dashboardForm?.selectedRiskCategories?.length == 0\r\n                  \">\r\n                  <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\r\n                    Select the Program(s) that you would like displayed in\r\n                    the<br />Dashboard, if any.\r\n                  </div>\r\n                </div>\r\n\r\n                <div *ngIf=\"\r\n                    allProgamSelected?.length > 0\r\n                  \" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\r\n                  <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"\r\n                      let rCategory of allProgamSelected?.slice(\r\n                        0,\r\n                        1\r\n                      )\r\n                    \">\r\n                    <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\r\n                      (click)=\"remove('responsibilityCategories', rCategory)\">&#xe9ae;</i>\r\n                    <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"rCategory.item_name\"\r\n                      placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ rCategory.name\r\n                      }}</span>\r\n                    <button *ngIf=\"\r\n                        allProgamSelected\r\n                          ?.length > 1\r\n                      \"\r\n                      class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n                      appPopover (click)=\"rCategoryList.popover()\" placement=\"left\">\r\n                      +{{\r\n                      allProgamSelected?.slice(\r\n                      1\r\n                      ).length\r\n                      }}\r\n                    </button>\r\n\r\n                    <app-popover #rCategoryList [dontCloseonClick]=\"true\">\r\n                      <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                          <li *ngFor=\"\r\n                              let rCategory of allProgamSelected\r\n                                | slice : 1;\r\n                              let j = index\r\n                            \">\r\n                            <div class=\"avatar-card\">\r\n                              <span class=\"value\" [arTooltip]=\"rCategory?.name\" placement=\"bottom-left\" delay=\"0\"\r\n                                type=\"black\" [tooltipMandatory]=\"false\">\r\n                                <i class=\"icons cross-icon\" (click)=\"\r\n                                    remove(\r\n                                      'responsibilityCategories',\r\n                                      rCategory\r\n                                    )\r\n                                  \">&#xe90d;</i>\r\n                                {{ rCategory?.name }}\r\n                              </span>\r\n                            </div>\r\n                          </li>\r\n                        </ul>\r\n                      </div>\r\n                    </app-popover>\r\n                  </div>\r\n\r\n                  <button *ngIf=\"activeSelector !== 'responsibilityCategories'\"\r\n                    class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n                    (click)=\"activateSelector('responsibilityCategories', true)\">\r\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n\r\n          <!-- Timeframe -->\r\n          <div class=\"form-group-row\" [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\r\n            <div class=\"image\">\r\n              <img *ngIf=\"\r\n                  !dashboardForm?.selectedFromDate ||\r\n                  !dashboardForm?.selectedToDate\r\n                \" [ngSrc]=\"ASSETS.dashBoardTimeFrameIcon\" alt=\"\" width=\"36\" height=\"36\" />\r\n              <svg *ngIf=\"\r\n                  dashboardForm?.selectedFromDate &&\r\n                  dashboardForm?.selectedToDate\r\n                \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n              </svg>\r\n            </div>\r\n            <div class=\"form\">\r\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                <label\r\n                  class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">TIMEFRAME</label>\r\n                <label class=\"vx-control-panel-sub-label\">Select how long the selected information should be displayed.\r\n                  Once the selected timeframe expires, the dashboard will automatically be deactivated and no longer\r\n                  displayed to users. If no timeframe is selected, the information\r\n                  will be displayed permanently.</label>\r\n                <div class=\"input-group vx-d-flex vx-justify-between\">\r\n                  <div class=\"date-select\">\r\n                    <i class=\"icons\">&#xe92d;</i>\r\n                    <input type=\"text\" id=\"from_date\" [value]=\"\r\n                        dashboardForm?.selectedFromDate | date : 'dd MMM yyyy'\r\n                      \" [placeholder]=\"'From'\" (click)=\"openFromDatePicker($event)\" readonly />\r\n                    <dp-date-picker #fromDatePicker [(ngModel)]=\"dashboardForm.selectedFromDate\"\r\n                      placeholder=\"Select Date\" theme=\"vcomply-tz\" (onSelect)=\"\r\n                        closeFromDatePicker(); datePickerOverlay = false\r\n                      \" [config]=\"fromDatePickerConfig\"></dp-date-picker>\r\n                    <div class=\"overlay\" (click)=\"closeFromDatePicker()\" *ngIf=\"datePickerOverlay\"></div>\r\n                  </div>\r\n                  <div class=\"date-select\" *ngIf=\"!hideToDate\" [class.disabled]=\"!dashboardForm?.selectedFromDate\">\r\n                    <i class=\"icons\">&#xe92d;</i>\r\n                    <input type=\"text\" id=\"to_date\" [value]=\"\r\n                        dashboardForm?.selectedToDate | date : 'dd MMM yyyy'\r\n                      \" [placeholder]=\"'To'\" (click)=\"openToDatePicker($event)\" readonly />\r\n                    <dp-date-picker #toDatePicker [(ngModel)]=\"dashboardForm.selectedToDate\" placeholder=\"Select Date\"\r\n                      theme=\"vcomply-tz\" (onSelect)=\"\r\n                        closeToDatePicker(); datePickerOverlay = false\r\n                      \" [config]=\"toDatePickerConfig\"></dp-date-picker>\r\n                    <div class=\"overlay\" (click)=\"closeToDatePicker()\" *ngIf=\"datePickerOverlay\"></div>\r\n                  </div>\r\n                </div>\r\n                <p class=\"vx-txt-error\" [appScrollInView]=\"true\" *ngIf=\"\r\n                    submitted &&\r\n                    dashboardForm.selectedFromDate &&\r\n                    !dashboardForm.selectedToDate\r\n                  \">\r\n                  Select a time-frame.\r\n                </p>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Email Summary -->\r\n          <!-- <div\r\n            class=\"form-group-row\"\r\n            [class.active]=\"activeSelector === 'frequency'\"\r\n            [class.disabled]=\"\r\n              activeSelector &&\r\n              activeSelector !== 'frequency' &&\r\n              activeSelector !== 'name'\r\n            \"\r\n          >\r\n            <div class=\"image\">\r\n              <img\r\n                *ngIf=\"!dashboardForm.frequencyMessage\"\r\n                [ngSrc]=\"ASSETS.dashBoardEmailSummariesIcon\"\r\n                alt=\"\"\r\n                width=\"36\"\r\n                height=\"36\"\r\n              />\r\n              <svg\r\n                *ngIf=\"dashboardForm.frequencyMessage\"\r\n                class=\"checkIcon\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                viewBox=\"0 0 52 52\"\r\n              >\r\n                <circle\r\n                  class=\"checkIcon__circle\"\r\n                  cx=\"26\"\r\n                  cy=\"26\"\r\n                  r=\"25\"\r\n                  fill=\"none\"\r\n                />\r\n                <path\r\n                  class=\"checkIcon__check\"\r\n                  fill=\"none\"\r\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n                />\r\n              </svg>\r\n            </div>\r\n            <div class=\"form\">\r\n              <div class=\"vx-form-group vx-d-block\">\r\n                <label\r\n                  class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\"\r\n                  >Email Summaries</label\r\n                >\r\n                <label class=\"vx-control-panel-sub-label\"\r\n                  >If you would like to send a summary of this Dashboard, please\r\n                  select a frequency(By default VComply sends a weekly\r\n                  Summary).</label\r\n                >\r\n                <div\r\n                  *ngIf=\"!dashboardForm.frequencyMessage\"\r\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n                  (click)=\"activateSelector('frequency', true)\"\r\n                >\r\n                  <div\r\n                    class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n                  >\r\n                    Email Summaries\r\n                  </div>\r\n                </div>\r\n\r\n                <div\r\n                  *ngIf=\"dashboardForm.frequencyMessage\"\r\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n                >\r\n                  <div\r\n                    class=\"selectBoxText vx-fs-13 vx-paragraph-txt\"\r\n                    [arTooltip]=\"dashboardForm.frequencyMessage\"\r\n                    placement=\"bottom-left\"\r\n                    type=\"black\"\r\n                    delay=\"0\"\r\n                    [tooltipMandatory]=\"false\"\r\n                    [innerHTML]=\"dashboardForm.frequencyMessage\"\r\n                  ></div>\r\n\r\n                  <button\r\n                    *ngIf=\"\r\n                      dashboardForm.frequencyMessage &&\r\n                      activeSelector !== 'frequency'\r\n                    \"\r\n                    class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n                    (click)=\"activateSelector('frequency', true)\"\r\n                  >\r\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div> -->\r\n        </div>\r\n        <div class=\"button-block\">\r\n          <button class=\"vx-btn block primary\" [disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n            (click)=\"configureDashboard()\">\r\n            Next: Configure Widgets\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <button class=\"close-dialog\" type=\"button\" [disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n        (click)=\"close.emit({ mode: 'discard' })\" [arTooltip]=\"'[Esc] to close'\" placement=\"left\" type=\"black\" delay=\"0\"\r\n        [tooltipMandatory]=\"true\" [class.hide]=\"activeSelector && activeSelector !== 'name'\">\r\n        <i class=\"icons\">&#xe93f;</i>\r\n      </button>\r\n      <div class=\"global-confirmation-alert\" *ngIf=\"\r\n          submitted &&\r\n          dashboardForm?.selectedResponsibilityCenters?.length == 0 \r\n        \">\r\n        <div class=\"global-confirmation-alert-top\">\r\n          <span class=\"icon-block\">\r\n            <i class=\"icons\">&#xe930;</i>\r\n          </span>\r\n          <p class=\"text\" *ngIf=\"showRiskCategory\">\r\n            Select a Responsibility Center or Risk Category.\r\n          </p>\r\n          <p class=\"text\" *ngIf=\"!showRiskCategory\">\r\n            Select a Responsibility Center.\r\n          </p>\r\n        </div>\r\n        <div class=\"global-confirmation-alert-bottom\">\r\n          <p class=\"message\"></p>\r\n          <div class=\"button-group\">\r\n            <button class=\"fill\" type=\"button\" (click)=\"submitted = false\">\r\n              OKAY\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<app-smiley-dialog *ngIf=\"isSmiley\" [message]=\"smileyMessage\"></app-smiley-dialog>\r\n\r\n<app-configure-widgets *ngIf=\"openConfigureWidgets\" [mode]=\"mode\" [displayedWidgets]=\"displayedWidgets\"\r\n  [showRisk]=\"showRiskWidgets\" [showCompliance]=\"!showComplianceWidgets\" [selectedWidgetsData]=\"selectedWidgets\"\r\n  (widgetsDataModified)=\"setSelectedWidgets($event)\"\r\n  (closeConfigureWidgets)=\"closeConfigureWidgets($event)\"></app-configure-widgets>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/dialog/dialog.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";::ng-deep .create-dashboard-container{width:100vw;background:#161b2fcc}::ng-deep .create-dashboard-container .vx-dialog-container{background-color:#fff;border:none;position:relative}@media screen and (max-width: 1280px){::ng-deep .create-dashboard-container .vx-dialog-container.tablet-width{width:28px!important}::ng-deep .create-dashboard-container .vx-dialog-container.tablet-width .form-group .vx-dialog-body-container{overflow:hidden}}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog{display:flex;position:absolute;top:8px;right:8px;height:32px;width:32px;font-size:16px;color:#161b2f;cursor:pointer;background:transparent;border:none;border-radius:2px;z-index:2;align-items:center;justify-content:center}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog:hover{background:#f1f1f1}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog:disabled{pointer-events:none;filter:grayscale(1);opacity:.3}@media screen and (max-width: 1280px){::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog.hide{display:none}}::ng-deep .create-dashboard .more-option{width:calc(100% - 500px);border-right:1px solid #f1f1f1;float:left}@media screen and (max-width: 1280px){::ng-deep .create-dashboard .more-option{width:calc(100vw - 28px)}::ng-deep .create-dashboard .more-option app-user-list .user-list{right:28px}::ng-deep .create-dashboard .more-option app-responsibility-center .responsibility-center{right:28px}::ng-deep .create-dashboard .more-option app-categories .category-list{right:28px}::ng-deep .create-dashboard .more-option app-risk-categories .risk-category-list{right:28px}::ng-deep .create-dashboard .more-option app-frequency .create-frequency{right:28px}}::ng-deep .form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container{padding:36px 28px 0 40px!important;height:calc(100vh - 50px);overflow:auto;margin-left:-22px;background-color:transparent;position:relative;border-radius:0 0 0 30px;background:transparent}@-moz-document url-prefix(){::ng-deep .form-group .vx-dialog-body-container.hidden-scroll{overflow:hidden}}::ng-deep .form-group .vx-dialog-body-container .form-group-row{display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image{width:36px;min-width:36px;height:36px;margin-left:-36px;margin-right:20px;margin-top:28px;display:flex;align-items:center;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image img{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon{width:32px;height:32px;background:#fff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input{height:40px;border-radius:4px;border:1px solid #dbdbdb;outline:none;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+vcomply-editor{margin-top:8px;display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:after{border-left:none;border-bottom:1px solid #707070;border-right:1px solid #707070;border-top:none;content:\"\";display:inline-block;right:15px;position:absolute;top:calc(50% + 8px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:hover .custom-input{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;position:relative;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .edit{border:1px solid #f1f1f1;border-radius:2px;background:#fff;outline:none;cursor:pointer;height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left{width:auto;display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left.frequency-left{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;width:calc(100% - 70px)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container{width:auto}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip{border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip i{cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip .value{max-width:100px;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .count{border-radius:2px;height:24px;padding:2px 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:300px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count{background:#1e5dd3;border-radius:20px;color:#fff;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group{display:flex;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group span.counter{background:transparent;color:#161b2f;font-size:9px;font-weight:500;position:absolute;top:0;right:0;border-radius:3px;height:16px;text-align:center;line-height:16px;padding:0 2px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group vcomply-editor{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor .editor-container .editable-block.bottom:before,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group vcomply-editor .editor-container .editable-block.bottom:before{opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group.vx-input-group{margin-top:8px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor{display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container{border-radius:4px;border-color:#dbdbdb}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:hover{border-color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:hover .editor-tools{border-top-color:#1e5dd3!important;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;max-height:90px}@media not all and (min-resolution: .001dpcm){@supports (-webkit-appearance: none){::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block:before,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editable-block:before{opacity:.72}}}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools{border-color:#dbdbdb;border-radius:0 0 2px 2px;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input{height:2.5rem;border-radius:.25rem;border:1px solid #dbdbdb;background:#fff;outline:none;padding:.1875rem .75rem;line-height:1.25rem;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:12px;width:94%;display:block;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input.error{border:1px solid #d93b41}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel i{font-size:12px;color:#1e5dd3;margin-left:7px;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;margin-bottom:.5rem;display:block;text-transform:none;width:100%;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label span.required{color:#eb2424}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel+.vx-control-panel-sub-label{margin-top:-.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.radio{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item svg{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio+app-cs-radio{margin-top:.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select{position:relative;width:calc(50% - .25rem);overflow:hidden;height:40px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input{position:relative;z-index:1;padding-left:36px!important;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select dp-date-picker{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;pointer-events:none;z-index:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select i{display:flex;justify-content:center;align-items:center;height:39px;width:14px;position:absolute;left:12px;top:0;color:#bcbcbc;font-size:14px;pointer-events:none;z-index:2}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled{pointer-events:none;filter:grayscale(1);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled input{background:#f1f1f1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel span.sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;text-transform:none;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row.disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active{pointer-events:none;filter:grayscale(0);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image{filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image:before{display:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form{opacity:1;filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form .custom-input,::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form input[type=text]{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container:after{content:\"\";width:100%;display:block;height:30px;position:sticky;right:0;bottom:0;left:0;z-index:6;background:linear-gradient(to bottom,#fff0,#ffffffbf 22%,#fff);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#00ffffff\",endColorstr=\"#ffffff\",GradientType=0)}::ng-deep .form-group .button-block{position:relative;z-index:2}::ng-deep .form-group .button-block button{font-size:13px!important;letter-spacing:1.3px!important;height:50px;line-height:48px!important}::ng-deep .form-group .button-block button:disabled{background:#f1f1f1!important;border-color:#f1f1f1!important;color:#747576!important;opacity:1!important;filter:unset!important}::ng-deep .form-group.disabled{pointer-events:none;z-index:2}::ng-deep .form-group.disabled .image{position:relative;filter:grayscale(1)}::ng-deep .form-group.disabled .image:before{content:\"\";position:absolute;inset:0;background:#fff;opacity:.7}::ng-deep .form-group.disabled .form{opacity:.3;filter:grayscale(1)}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}.action-list{width:220px}.action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.action-list ul.action-item{display:block}.action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.action-list ul.action-item li button:hover{background:#f3f3f3}.action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.action-list ul.action-item li .avatar-card.within-con{display:block}.action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.action-list ul.action-item li .avatar-card .avatar img{width:100%}.action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:4px}.action-list ul.action-item li .avatar-card span.value i.cross-icon{color:#747576}.action-list ul.action-item li .avatar-card.no-image{display:block}.action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.action-list ul.action-item li .chip-item span.id{font-size:9px}.action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}.global-confirmation-alert{display:block;position:absolute;z-index:9;right:0;bottom:0;left:0;background:#d93b41}.global-confirmation-alert-top{display:flex;align-items:center;justify-content:flex-start;padding:20px 20px 12px}.global-confirmation-alert span.icon-block{height:36px;width:36px;border-radius:50%;background:#fff;border:1px solid #dcdcdc;display:flex;justify-content:center;align-items:center;margin-right:16px}.global-confirmation-alert span.icon-block i{color:#d93b41;font-size:12px}.global-confirmation-alert p.text{color:#fff;font-size:14px;font-weight:300;margin:0;width:calc(100% - 52px)}.global-confirmation-alert-bottom{display:flex;align-items:center;padding:0 12px 12px 72px;background:#d93b41}.global-confirmation-alert-bottom .button-group{display:flex}.global-confirmation-alert-bottom p.message{font-size:14px;font-weight:500;margin:0;line-height:20px;color:#fff}.global-confirmation-alert button{height:24px;width:64px;border:1px solid #000;border-radius:2px;display:flex;align-items:center;justify-content:center;line-height:22px;cursor:pointer;font-size:11px;text-transform:uppercase;font-weight:500;padding:0}.global-confirmation-alert button+button{margin-left:4px}.global-confirmation-alert button.fill{background:#fff;color:#1e5dd3;border-color:#fff}.global-confirmation-alert button.outline{background:transparent;color:#fff;border-color:#fff}::ng-deep marx-modal .popup-modal-background,::ng-deep vcomply-modal .popup-modal-background{background-color:#161b2fcc!important}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;font-size:13px;color:#747576;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField::placeholder{font-size:13px;color:#747576}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxEnable.error{border-color:#eb2424}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer .chipName.no-width{max-width:unset}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}::ng-deep .cdk-overlay-pane{inset:0!important;align-items:center;justify-content:center}::ng-deep .cdk-overlay-pane .dp-popup{z-index:999;display:flex!important;align-items:center;justify-content:center;width:100vw;height:100vh;background:transparent!important;border:none!important;box-shadow:unset!important}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar{width:412px!important;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}::ng-deep .cdk-overlay-pane .dp-popup.vcomply-tz .dp-calendar-week button.dp-current-day:not(.dp-user-current-day){border:none!important;background-color:transparent!important;color:revert!important}::ng-deep .cdk-overlay-pane .dp-popup.vcomply-tz .dp-calendar-week button.dp-current-day:not(.dp-user-current-day):hover{background-color:#f3f3f3!important}::ng-deep .cdk-overlay-pane .dp-popup.vcomply-tz .dp-calendar-week button.dp-user-current-day{border:1px solid rgba(0,0,0,.38)!important;color:#1e5dd3!important;background-color:#fff!important}.left-side{color:#707070}.right-side button{border-radius:2px;height:24px;background:#1e5dd3!important;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;font-weight:500;border:none!important;padding:0 8px;margin:0 0 0 8px}.right-side button i{margin-left:8px;font-size:11px}.right-side button:disabled{background:#f1f1f1!important;color:#747576!important;opacity:1}.right-side button.cancelBtn{background:transparent!important;color:#eb2424!important}.selected-count-box{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem;position:relative}.selected-text{color:#707070;font-size:11px;font-weight:500;position:fixed;padding-left:2.5rem}::ng-deep .vc-divider{border-top:.5px solid #dbdbdb;width:100%}::ng-deep .vc-cf-container{border-bottom:1px solid #E3E3E9}::ng-deep .vc-cf-container:first-of-type,::ng-deep .vc-cf-container:only-child{border-top:1px solid #E3E3E9}::ng-deep .vc-cf-container .cf-name{width:9.25rem}::ng-deep .vc-cf-container .cf-value{width:calc(100% - 9.75rem)}::ng-deep .vc-cf-container .cf-value input{height:24px!important;border:1px solid #CDCED6!important;padding:0 .5rem!important;color:#565a6f!important;font-size:11px!important}::ng-deep .vc-cf-container .cf-value input::placeholder{color:#a9aab6!important}::ng-deep .vc-cf-container .cf-value input:hover{border-color:#343952!important}::ng-deep .vc-cf-container .cf-value input:focus{outline:none;border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd31a}.head-label{background:#565a6f;border-radius:.125rem;height:1rem;position:relative}.head-label:before{background:#e3e3e9;content:\"\";position:absolute;top:7px;left:-40px;width:500px;height:1px;z-index:-1}\n"] }]
         }], ctorParameters: function () { return [{ type: CreateDashboardService }, { type: PaginationService }, { type: i0.ChangeDetectorRef }, { type: SnackBarService }, { type: PopoverService }, { type: TextCountPipe }]; }, propDecorators: { feature: [{
                 type: Input
             }], mode: [{