vcomply-workflow-engine 3.6.4 → 3.6.6

package/fesm2022/vcomply-workflow-engine.mjs

@@ -2,9 +2,9 @@ import * as i0 from '@angular/core';
 import { Injectable, Optional, EventEmitter, Component, Input, Output, Directive, HostListener, NgModule, Pipe, ViewChild, forwardRef, ElementRef, createComponent, ViewChildren, HostBinding } from '@angular/core';
 import * as i1 from '@angular/common/http';
 import { HttpHeaders, HttpParams, HttpClientModule } from '@angular/common/http';
-import { Subject, BehaviorSubject, retry as retry$1, of, takeUntil, throwError, distinctUntilChanged, take } from 'rxjs';
+import { Subject, BehaviorSubject, retry as retry$1, of, map as map$1, catchError, takeUntil, throwError, distinctUntilChanged, take } from 'rxjs';
 import { JwtHelperService } from '@auth0/angular-jwt';
-import { retry, map, catchError, takeUntil as takeUntil$1 } from 'rxjs/operators';
+import { retry, map, catchError as catchError$1, takeUntil as takeUntil$1 } from 'rxjs/operators';
 import * as i1$1 from '@angular/common';
 import { CommonModule, DatePipe } from '@angular/common';
 import * as i1$3 from '@angular/forms';
@@ -2363,7 +2363,7 @@ class ResponsibilityCentersListComponent {
         this.closeRcList = new EventEmitter();
         this.pluralText = 'Responsibility Centers selected';
         this.singularText = 'Responsibility Center selected';
-        this.loaded = false;
+        this.loaded = true;
         this.selectedIds = [];
         this.animation = false;
         this.search = '';
@@ -13071,6 +13071,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     type: Optional
                 }] }]; } });
 
+class OrganizationUserService {
+    constructor(http, authService, config) {
+        this.http = http;
+        this.authService = authService;
+        this.organizationUsers = new BehaviorSubject([] || null);
+        this.permissions = [];
+        if (config) {
+            this.env = config.envConfig;
+        }
+    }
+    getAllOrgUser() {
+        const headers = new HttpHeaders().set('token', this.authService.getAuthorizationToken());
+        return this.http
+            .get(this.env.organizationGet + 'getAllUsers&type=all', {
+            headers,
+        })
+            .pipe(map$1((res) => this.setOrganizationUsers(res)), catchError((error) => {
+            console.error('Error fetching organization users:', error);
+            return of([]);
+        }));
+    }
+    setOrganizationUsers(data) {
+        const res = this.dataMap(data);
+        this.organizationUsers.next(res);
+        return res;
+    }
+    dataMap(data) {
+        return data.map((user) => ({
+            ...user,
+            employee_id: user?.member_id,
+            employee_pic: user?.member_pic,
+            employee_name: user?.member_name,
+            employee_email: user?.member_email,
+            employee_short_name: user?.short_name,
+            my_member_id: user?.member_id,
+            user_id: user?.member_id,
+        }));
+    }
+    getOrganizationUsers() {
+        const currentUsers = this.organizationUsers.getValue();
+        if (currentUsers && currentUsers.length) {
+            return of(this.organizationUsers.value);
+        }
+        return this.getAllOrgUser();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OrganizationUserService, deps: [{ token: i1.HttpClient }, { token: AuthService }, { token: Configurations, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OrganizationUserService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OrganizationUserService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: AuthService }, { type: Configurations, decorators: [{
+                    type: Optional
+                }] }]; } });
+
 class DialogConfig {
 }
 
@@ -17752,7 +17809,7 @@ class UserRadioListComponent {
         this.overseerIds = [];
         this.assignorId = [];
         this.headerText = 'Select User';
-        this.loaded = false;
+        this.loaded = true;
         this.search = '';
         this.selectedIds = [];
         this.animation = false;
@@ -24012,7 +24069,7 @@ class WorkflowComplianceComponent {
             this.responsibilityForm.linkedProgram.push(program);
         }
     }
-    constructor(authService, responsibilityService, frequencyService, uiKitService, snackBar, permission, programService, grcService) {
+    constructor(authService, responsibilityService, frequencyService, uiKitService, snackBar, permission, programService, grcService, organizationUserService) {
         this.authService = authService;
         this.responsibilityService = responsibilityService;
         this.frequencyService = frequencyService;
@@ -24021,6 +24078,7 @@ class WorkflowComplianceComponent {
         this.permission = permission;
         this.programService = programService;
         this.grcService = grcService;
+        this.organizationUserService = organizationUserService;
         /* Defining the input parameters for the component. */
         this.mode = 'CREATE';
         this.responsibilityId = '';
@@ -24669,7 +24727,10 @@ class WorkflowComplianceComponent {
             params = params.append('program_ids', program_id);
         }
         this.userListLoader = true;
-        this.responsibilityService.getOrganizationPeople(params).subscribe((res) => {
+        this.fetchAssignee(program_id);
+    }
+    fetchAssignee(program_id) {
+        this.organizationUserService.getOrganizationUsers().subscribe((res) => {
             this.allUsersList = res.map((user) => {
                 user.member_name = user.employee_name;
                 return user;
@@ -24701,24 +24762,8 @@ class WorkflowComplianceComponent {
             params = params.append('program_ids', program_id);
             this.userListLoader = true;
         }
-        this.responsibilityService.getOrganizationPeople(params).subscribe((res) => {
-            this.assigneesList = res.assignee.map((user) => {
-                user.member_name = user.employee_name;
-                return user;
-            });
-            this.overseersList = res.overseer.map((user) => {
-                user.member_name = user.employee_name;
-                return user;
-            });
-            this.reviewersList = res.reviewer.map((user) => {
-                user.member_name = user.employee_name;
-                return user;
-            });
-            this.programPeopleList = {
-                assigneesList: [...new Set(this.assigneesList)],
-                reviewersList: [...new Set(this.reviewersList)],
-                overseersList: [...new Set(this.overseersList)],
-            };
+        this.organizationUserService.getOrganizationUsers().subscribe((res) => {
+            this.setOrganizationUserList(res);
             if (this.responsibilityForm?.program[0]?.default_assignee_ids ||
                 this.responsibilityForm.assignees.list?.length) {
                 if (this.responsibilityForm.assignees.list?.length) {
@@ -24785,14 +24830,14 @@ class WorkflowComplianceComponent {
                 const ids = this.returnIds(this.responsibilityForm?.overseers?.list, 'my_member_id');
                 const allDefaultCCIds = [
                     ...new Set(ids),
-                    ...new Set(this.responsibilityForm?.program[0]?.default_overseers?.cc_email),
+                    ...new Set(this.responsibilityForm?.program[0]?.default_overseers?.cc_member_email),
                 ];
                 const overseersCC = this.overseersList?.filter((element) => allDefaultCCIds?.includes(element?.my_member_id));
                 // const overseers = this.overseersList.filter((element: any) => this.responsibilityForm.program[0].default_overseers.cc_email.includes(element.my_member_id));
                 const notifyListIds = this.returnIds(this.responsibilityForm.overseers.notifyList, 'my_member_id');
                 const allDefaultCCFailureIds = [
                     ...new Set(notifyListIds),
-                    ...new Set(this.responsibilityForm?.program[0]?.default_overseers?.failure_cc_email),
+                    ...new Set(this.responsibilityForm?.program[0]?.default_overseers?.failure_cc_member_email),
                 ];
                 const overseersCCFailure = this.overseersList?.filter((element) => allDefaultCCFailureIds?.includes(element?.my_member_id));
                 // const notifyOverseers = this.overseersList.filter((element: any) => this.responsibilityForm.program[0].default_overseers.failure_cc_email.includes(element.my_member_id));
@@ -24847,6 +24892,25 @@ class WorkflowComplianceComponent {
             this.userListLoader = false;
         });
     }
+    setOrganizationUserList(res) {
+        this.assigneesList = res.assignee.map((user) => {
+            user.member_name = user.employee_name;
+            return user;
+        });
+        this.overseersList = res.overseer.map((user) => {
+            user.member_name = user.employee_name;
+            return user;
+        });
+        this.reviewersList = res.reviewer.map((user) => {
+            user.member_name = user.employee_name;
+            return user;
+        });
+        this.programPeopleList = {
+            assigneesList: [...new Set(this.assigneesList)],
+            reviewersList: [...new Set(this.reviewersList)],
+            overseersList: [...new Set(this.overseersList)],
+        };
+    }
     getGroupsList(program_id) {
         let params = new HttpParams();
         if (program_id) {
@@ -24919,7 +24983,7 @@ class WorkflowComplianceComponent {
             this.isDuplicateEntrust = true;
             if (res) {
                 this.rawResponsibility = res;
-                this.originalAssignee = [Number(res.assigned_to)];
+                this.originalAssignee = [Number(res.assignee_member_id)];
                 const currentUser = this.authService.getUserDetails()?.user;
                 this.isGroupAssigned = res?.isGroupAssignTo ? true : false;
                 const currentsUerInfo = {
@@ -24957,7 +25021,7 @@ class WorkflowComplianceComponent {
                     assignees: {
                         whoCanComplete: res.isGroupAssignTo ? 'ANY_ONE' : 'ALL',
                         list: res.assigned_to_member_id?.length == 0
-                            ? this.setList(this.assigneesList, [Number(res.assigned_to)], 'employee_id')
+                            ? this.setList(this.assigneesList, [Number(res.assignee_member_id)], 'employee_id')
                             : this.setList(this.assigneesList, res.assigned_to_member_id, 'my_member_id'),
                     },
                     allowEditDueDate: res?.allowEditDueDate,
@@ -24996,11 +25060,11 @@ class WorkflowComplianceComponent {
                             : [],
                     },
                     overseers: {
-                        list: res?.cc_email
-                            ? this.setList(this.overseersList, Object.keys(res?.cc_email).map(Number), 'employee_id')
+                        list: res?.cc_member_email
+                            ? this.setList(this.overseersList, Object.keys(res?.cc_member_email).map(Number), 'employee_id')
                             : [],
-                        notifyList: res?.failure_cc_email
-                            ? this.setList(this.overseersList, Object.keys(res?.failure_cc_email).map(Number), 'employee_id')
+                        notifyList: res?.failure_cc_member_email
+                            ? this.setList(this.overseersList, Object.keys(res?.failure_cc_member_email).map(Number), 'employee_id')
                             : [],
                     },
                     formatAndEvidence: {
@@ -25242,27 +25306,27 @@ class WorkflowComplianceComponent {
     populateOverseerData(res) {
         let overseerUserList = [];
         let overseerUserNotifyList = [];
-        let overseerEmployeesList = res?.cc_email
-            ? Object.keys(res?.cc_email).map(Number)
+        let overseerEmployeesList = res?.cc_member_email
+            ? Object.keys(res?.cc_member_email).map(Number)
             : [];
         overseerUserList =
             overseerEmployeesList?.length > 0 &&
                 res?.userGroupIds?.ccEmailGroupIds?.length > 0
-                ? overseerEmployeesList.filter((employeeIds) => res?.existingUserIds?.ccEmailEmpIds?.includes(employeeIds))
+                ? overseerEmployeesList.filter((employeeIds) => res?.existingUserIds?.ccEmailMemberIds?.includes(employeeIds))
                 : [...overseerEmployeesList];
-        let overseerEmployeeNotifyList = res?.failure_cc_email
-            ? Object.keys(res?.failure_cc_email).map(Number)
+        let overseerEmployeeNotifyList = res?.failure_cc_member_email
+            ? Object.keys(res?.failure_cc_member_email).map(Number)
             : [];
         overseerUserNotifyList =
             overseerEmployeeNotifyList?.length > 0 &&
                 res?.userGroupIds?.failureCCEmailGroupIds?.length > 0
-                ? overseerEmployeeNotifyList.filter((employeeIds) => res?.existingUserIds?.failureCCEmailEmpIds?.includes(employeeIds))
+                ? overseerEmployeeNotifyList.filter((employeeIds) => res?.existingUserIds?.failureCCEmailMemberIds?.includes(employeeIds))
                 : [...overseerEmployeeNotifyList];
         this.responsibilityForm['overseers'] = {
-            list: res?.cc_email
+            list: res?.cc_member_email
                 ? this.setList(this.overseersList, overseerUserList, 'employee_id')
                 : [],
-            notifyList: res?.failure_cc_email
+            notifyList: res?.failure_cc_member_email
                 ? this.setList(this.overseersList, overseerUserNotifyList, 'employee_id')
                 : [],
         };
@@ -25321,12 +25385,12 @@ class WorkflowComplianceComponent {
                 ? assigneeAnyOneList.filter((employeeIds) => res?.existingUserIds?.assigneeAnyoneIds?.includes(employeeIds))
                 : [...assigneeAnyOneList];
         AssigneeAllUserList =
-            res?.assigned_to && !this.isEntrust ? res?.assigned_to : [];
-        const assignedToUserDetails = this.setList(this.assigneesList, [Number(res?.assigned_to)], 'employee_id');
+            res?.assignee_member_id && !this.isEntrust ? res?.assignee_member_id : [];
+        const assignedToUserDetails = this.setList(this.assigneesList, [Number(res?.assignee_member_id)], 'employee_id');
         if (assignedToUserDetails?.length) {
             const member_id = assignedToUserDetails[0]?.my_member_id;
             if (res?.existingUserIds?.assigneeAllIds?.includes(member_id)) {
-                AssigneeAllUserList = res?.assigned_to;
+                AssigneeAllUserList = res?.assignee_member_id;
                 res.userGroupIds['assigneeAllGroupIds'] = [];
             }
             else if (res?.userGroupIds?.assigneeAllGroupIds?.length > 0) {
@@ -26429,7 +26493,7 @@ class WorkflowComplianceComponent {
             : '';
         let payload = {
             app_association: [],
-            assigned_to: this.returnIds(this.assigneeUserList, 'employee_id').toString(),
+            assignee_member_id: this.returnIds(this.assigneeUserList, 'employee_id').toString(),
             program_cat_ids: moreOptions?.PROGRAM
                 ? entrustForm?.program?.length
                     ? [entrustForm?.program[0]?.category_id]
@@ -26448,7 +26512,7 @@ class WorkflowComplianceComponent {
                     ...[entrustForm?.program[0]?.category_id],
                 ])?.toString()
                 : '',
-            cc_email: moreOptions.OVERSEER
+            cc_member_email: moreOptions.OVERSEER
                 ? this.returnIds(this.overseerUserList, 'employee_id').toString()
                 : '',
             checkpoint_description: moreOptions.CHECKPOINTS
@@ -26476,7 +26540,7 @@ class WorkflowComplianceComponent {
             entrust_from_risk: this.openedFrom === 'RISK_TREATMENT' ? true : false,
             failed_after_days: entrustForm.failed_after_days,
             failed_time_utc: entrustForm.failed_time_utc,
-            failure_cc_email: moreOptions.OVERSEER
+            failure_cc_member_email: moreOptions.OVERSEER
                 ? this.returnIds(this.overseerUserNotifyList, 'employee_id').toString()
                 : '',
             frequency_details: entrustForm.frequency,
@@ -26555,8 +26619,8 @@ class WorkflowComplianceComponent {
                 assigneeAnyoneIds: entrustForm.assignees.whoCanComplete === 'ANY_ONE'
                     ? this.returnIds(entrustForm?.assignees?.list, 'my_member_id')
                     : [],
-                ccEmailEmpIds: this.returnIds(entrustForm?.overseers?.list, 'employee_id') ?? [],
-                failureCCEmailEmpIds: this.returnIds(entrustForm?.overseers?.notifyList, 'employee_id') ??
+                ccEmailMemberIds: this.returnIds(entrustForm?.overseers?.list, 'employee_id') ?? [],
+                failureCCEmailMemberIds: this.returnIds(entrustForm?.overseers?.notifyList, 'employee_id') ??
                     [],
                 reviewerIds: this.returnIds(this.responsibilityForm?.reviewers?.list, 'member_id') ?? [],
             },
@@ -26695,7 +26759,7 @@ class WorkflowComplianceComponent {
     combineUserAndUserGroupMembers(isGroup) {
         if (this.featureFlag_groups) {
             this.assigneeUserList = isGroup
-                ? [{ employee_id: this.rawResponsibility?.assigned_to }]
+                ? [{ employee_id: this.rawResponsibility?.assignee_member_id }]
                 : this.uniqueIdUserGroups(this.allUsersList, this.responsibilityForm?.assigneeGroups?.list, this.responsibilityForm?.assignees?.list);
             this.reviewerUserList = this.uniqueIdUserGroups(this.allUsersList, this.responsibilityForm?.groupReviewers?.list, this.responsibilityForm?.reviewers?.list);
             this.overseerUserList = this.uniqueIdUserGroups(this.allUsersList, this.responsibilityForm?.overseersGroups?.list, this.responsibilityForm?.overseers?.list);
@@ -27837,13 +27901,13 @@ class WorkflowComplianceComponent {
     filterOtherGRCData(event, type) {
         this.grcDataWithTypes[type] = this.grcDataWithTypes[type]?.filter((grc) => grc?._id !== event?._id);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WorkflowComplianceComponent, deps: [{ token: AuthService }, { token: ResponsibilityService }, { token: FrequencyService }, { token: UiKitService }, { token: SnackBarService }, { token: AuthService }, { token: ProgramsService }, { token: GrcService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WorkflowComplianceComponent, deps: [{ token: AuthService }, { token: ResponsibilityService }, { token: FrequencyService }, { token: UiKitService }, { token: SnackBarService }, { token: AuthService }, { token: ProgramsService }, { token: GrcService }, { token: OrganizationUserService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: WorkflowComplianceComponent, selector: "app-workflow-compliance", inputs: { mode: "mode", responsibilityId: "responsibilityId", frameworkDetails: "frameworkDetails", isEntrust: "isEntrust", feature: "feature", assessmentDetails: "assessmentDetails", closeOnEsc: "closeOnEsc", orgDetails: "orgDetails", openedFrom: "openedFrom", selectedRC: "selectedRC", setSelectedProgram: ["selectedProgram", "setSelectedProgram"] }, outputs: { pickerChanged: "pickerChanged", populateOption: "populateOption", hideElementsFromMoreOptions: "hideElementsFromMoreOptions", closeWorkflow: "closeWorkflow", resetForm: "resetForm", disconnectRefresh: "disconnectRefresh", checkpointCountUpdated: "checkpointCountUpdated", rcSelected: "rcSelected", onRemovingCheckpoint: "onRemovingCheckpoint", isAssessmentDisabled: "isAssessmentDisabled", assigneeTypeChange: "assigneeTypeChange", onReviewerTypeChange: "onReviewerTypeChange" }, viewQueries: [{ propertyName: "whatInput", first: true, predicate: ["what"], descendants: true }], ngImport: i0, template: "<div class=\"workflw-compliance\" *ngIf=\"!showSmiley\">\r\n  <!-- Behalf -->\r\n  <div\r\n    *ngIf=\"mode !== 'EDIT'\"\r\n    class=\"form-group-row\"\r\n    [class.active]=\"activeSelector === 'assignors'\"\r\n    [class.disabled]=\"\r\n      activeSelector &&\r\n      activeSelector !== 'assignors' &&\r\n      sideSelectorElements.includes(activeSelector)\r\n    \"\r\n  >\r\n    <div\r\n      class=\"left\"\r\n      [class.checked]=\"\r\n        responsibilityForm?.assignors?.list?.length > 0 &&\r\n        activeSelector !== 'assignors'\r\n      \"\r\n    >\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/im-creating.svg\"\r\n        alt=\"im\"\r\n        *ngIf=\"\r\n          responsibilityForm?.assignors?.list?.length == 0 ||\r\n          activeSelector === 'assignors'\r\n        \"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n        *ngIf=\"\r\n          responsibilityForm?.assignors?.list?.length > 0 &&\r\n          activeSelector !== 'assignors'\r\n        \"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\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=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\"\r\n          >I am creating this responsibility on behalf of someone else\r\n          <app-cs-switch\r\n            [ngValue]=\"responsibilityForm.assignors.enable\"\r\n            (ngValueChange)=\"\r\n              responsibilityForm.assignors.enable = $event;\r\n              responsibilityForm.assignors.list = []\r\n            \"\r\n          >\r\n          </app-cs-switch>\r\n        </label>\r\n        <div\r\n          class=\"select\"\r\n          *ngIf=\"\r\n            responsibilityForm?.assignors?.list?.length === 0 ||\r\n            activeSelector === 'assignors'\r\n          \"\r\n        >\r\n          <input\r\n            type=\"text\"\r\n            (click)=\"activateSelector('assignors', true)\"\r\n            placeholder=\"Who is responsible for managing this responsibility?\"\r\n            readonly\r\n            [disabled]=\"!responsibilityForm?.assignors?.enable\"\r\n          />\r\n        </div>\r\n        <div\r\n          class=\"selected\"\r\n          *ngIf=\"\r\n            responsibilityForm?.assignors?.list?.length > 0 &&\r\n            activeSelector !== 'assignors'\r\n          \"\r\n        >\r\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n            <ng-container\r\n              *ngFor=\"\r\n                let b_user of responsibilityForm?.assignors?.list?.slice(0, 1)\r\n              \"\r\n            >\r\n              <i\r\n                (click)=\"remove('assignors', b_user)\"\r\n                class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                >&#xe9ae;</i\r\n              >\r\n              <span\r\n                class=\"chipName vx-fs-11 vx-label-txt\"\r\n                [appTooltip]=\"b_user.member_name\"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n                >{{ b_user.member_name }}</span\r\n              >\r\n            </ng-container>\r\n            <button\r\n              *ngIf=\"responsibilityForm?.assignors?.list?.length > 1\"\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\r\n              (click)=\"behalf.popover()\"\r\n              placement=\"right\"\r\n            >\r\n              +{{ responsibilityForm?.assignors?.list?.slice(1).length }}\r\n            </button>\r\n          </div>\r\n\r\n          <!-- <div class=\"chip-container\">\r\n                      <span class=\"chip\" *ngFor=\"let b_user of responsibilityForm?.assignors?.list?.slice(0,2)\"><i\r\n                              class=\"icons\" (click)=\"remove('assignors',b_user)\">&#xe90d;</i>\r\n                          {{b_user.member_name}}</span>\r\n                      <button class=\"count\" *ngIf=\"responsibilityForm?.assignors?.list?.length > 2\" type=\"button\"\r\n                          appPopover (click)=\"behalf.popover()\" placement=\"right\">+\r\n                          {{responsibilityForm?.assignors?.list?.slice(2).length}}</button>\r\n                  </div> -->\r\n          <button\r\n            *ngIf=\"activeSelector !== 'assignors'\"\r\n            class=\"edit\"\r\n            type=\"button\"\r\n            (click)=\"activateSelector('assignors', true)\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i> Edit\r\n          </button>\r\n        </div>\r\n        <app-popover #behalf [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ul class=\"action-item\">\r\n              <li\r\n                *ngFor=\"\r\n                  let b_user of responsibilityForm?.assignors?.list | slice : 2;\r\n                  let j = index\r\n                \"\r\n              >\r\n                <div class=\"avatar-card\">\r\n                  <span class=\"value\">\r\n                    <i class=\"icons\" (click)=\"remove('assignors', b_user)\"\r\n                      >&#xe90d;</i\r\n                    >\r\n                    {{ b_user.member_name }}\r\n                  </span>\r\n                </div>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n        </app-popover>\r\n        <p\r\n          *ngIf=\"invalidType === 'whom'\"\r\n          [appScrollInView]=\"true\"\r\n          class=\"error-message\"\r\n        >\r\n          Please select the person responsible for managing this responsibility.\r\n        </p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- What -->\r\n  <div\r\n    class=\"form-group-row\"\r\n    [class.active]=\"activeSelector === 'framework'\"\r\n    [class.disabled]=\"\r\n      activeSelector &&\r\n      activeSelector !== 'responsibilityName' &&\r\n      sideSelectorElements.includes(activeSelector)\r\n    \"\r\n  >\r\n    <div\r\n      class=\"left\"\r\n      [class.checked]=\"\r\n        responsibilityForm?.responsibility?.name.trim() !== '' &&\r\n        !focus.responsibilityName\r\n      \"\r\n    >\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/what.svg\"\r\n        alt=\"im\"\r\n        *ngIf=\"\r\n          responsibilityForm?.responsibility?.name.trim() === '' ||\r\n          focus.responsibilityName\r\n        \"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n        *ngIf=\"\r\n          responsibilityForm?.responsibility?.name.trim() !== '' &&\r\n          !focus.responsibilityName\r\n        \"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\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=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\">\r\n          What? <span class=\"required\">*</span>\r\n          <button\r\n            *ngIf=\"\r\n              isFrameworkAvailable &&\r\n              mode !== 'EDIT' &&\r\n              openedFrom !== 'RISK_TREATMENT' &&\r\n              assessmentDetails?.assessment_type !== 'compliance_audit'\r\n            \"\r\n            (click)=\"activateSelector('framework', true)\"\r\n            class=\"button\"\r\n          >\r\n            Select From A framework\r\n          </button>\r\n        </label>\r\n        <span\r\n          *ngIf=\"responsibilityForm?.responsibility?.keyResponsibility\"\r\n          class=\"indicator\"\r\n          [appTooltip]=\"'This responsibility is marked as key responsibility.'\"\r\n          placement=\"bottom\"\r\n          type=\"black\"\r\n          delay=\"0\"\r\n          [tooltipMandatory]=\"true\"\r\n        >\r\n          <i class=\"icons\">&#xea70;</i>\r\n        </span>\r\n        <input\r\n          *ngIf=\"\r\n            responsibilityForm?.responsibility?.name.trim() == '' || !isEditWhat\r\n          \"\r\n          type=\"text\"\r\n          [ngModel]=\"responsibilityForm.responsibility.name\"\r\n          placeholder=\"What is the responsibility?\"\r\n          (change)=\"whatChanged($event)\"\r\n          (focusin)=\"activateSelector('responsibilityName', true)\"\r\n          (focusout)=\"activeDeselector()\"\r\n          (clickOutside)=\"testFunction()\"\r\n          #what\r\n        />\r\n        <div\r\n          class=\"selected\"\r\n          *ngIf=\"\r\n            responsibilityForm?.responsibility?.name.trim() != '' && isEditWhat\r\n          \"\r\n        >\r\n          <div class=\"chip-container\">\r\n            <span class=\"value\">{{\r\n              responsibilityForm.responsibility?.name\r\n            }}</span>\r\n          </div>\r\n          <button\r\n            *ngIf=\"assessmentDetails?.assessment_type !== 'compliance_audit'\"\r\n            class=\"edit\"\r\n            type=\"button\"\r\n            (click)=\"onEditWhat($event)\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i> Edit\r\n          </button>\r\n        </div>\r\n        <p\r\n          *ngIf=\"invalidType === 'what'\"\r\n          [appScrollInView]=\"true\"\r\n          class=\"error-message\"\r\n        >\r\n          Please enter a name for this responsibility.\r\n        </p>\r\n        <div class=\"switch-row align-right\">\r\n          <app-cs-switch\r\n            [ngValue]=\"responsibilityForm.responsibility?.keyResponsibility\"\r\n            (ngValueChange)=\"\r\n              responsibilityForm.responsibility.keyResponsibility = $event\r\n            \"\r\n            >Key Responsibility\r\n          </app-cs-switch>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Who -->\r\n  <div\r\n    class=\"form-group-row\"\r\n    [class.active]=\"activeSelector === 'assignees'\"\r\n    [class.disabled]=\"\r\n      activeSelector &&\r\n      activeSelector !== 'assignees' &&\r\n      sideSelectorElements.includes(activeSelector)\r\n    \"\r\n  >\r\n    <div\r\n      class=\"left\"\r\n      [class.checked]=\"\r\n        responsibilityForm?.assignees?.list?.length > 0 &&\r\n        activeSelector !== 'assignees'\r\n      \"\r\n    >\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/who.svg\"\r\n        alt=\"im\"\r\n        *ngIf=\"\r\n          responsibilityForm?.assignees?.list?.length == 0 ||\r\n          activeSelector === 'assignees'\r\n        \"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n        *ngIf=\"\r\n          responsibilityForm?.assignees?.list?.length > 0 &&\r\n          activeSelector !== 'assignees'\r\n        \"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\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=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <div class=\"edit-due-date\">\r\n          <label class=\"vx-control-panel\"\r\n            >Who? <span class=\"required\">*</span></label\r\n          >\r\n          <div *ngIf=\"allowEditDueDateFeatureFlag\" class=\"switch-row align-right\">\r\n            <app-cs-switch\r\n              [ngValue]=\"responsibilityForm.allowEditDueDate\"\r\n              (ngValueChange)=\"\r\n                responsibilityForm.allowEditDueDate = $event\r\n              \"\r\n              >ALLOW ASSIGNEE TO EDIT COMPLETED WORK<i\r\n                class=\"icons\"\r\n                [appTooltip]=\"\r\n                  'If it\u2019s enabled, the assignee will have the option to modify a previously completed due date.'\r\n                \"\r\n                placement=\"bottom-right\"\r\n                type=\"white\"\r\n                delay=\"0\"\r\n                [tooltipMandatory]=\"true\"\r\n                >&#xe91f;</i\r\n              >\r\n            </app-cs-switch>\r\n          </div>\r\n        </div>\r\n        <div\r\n          class=\"select vx-mt-0\"\r\n          *ngIf=\"\r\n            responsibilityForm?.assignees?.list?.length == 0 &&\r\n            (!featureFlag_groups ||\r\n              (responsibilityForm?.assigneeGroups?.list?.length == 0 &&\r\n                featureFlag_groups))\r\n          \"\r\n        >\r\n          <input\r\n            type=\"text\"\r\n            (click)=\"activateSelector('assignees', true)\"\r\n            placeholder=\"Who is responsible for completing the responsibility?\"\r\n            readonly\r\n          />\r\n        </div>\r\n\r\n        <div\r\n          class=\"selected\"\r\n          *ngIf=\"\r\n            (responsibilityForm?.assignees?.list?.length > 0 &&\r\n              !featureFlag_groups) ||\r\n            ((responsibilityForm?.assignees?.list?.length > 0 ||\r\n              responsibilityForm?.assigneeGroups?.list?.length > 0) &&\r\n              featureFlag_groups)\r\n          \"\r\n        >\r\n          <div\r\n            class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n            *ngIf=\"!featureFlag_groups\"\r\n          >\r\n            <ng-container\r\n              *ngFor=\"\r\n                let e_user of responsibilityForm?.assignees?.list?.slice(0, 1)\r\n              \"\r\n            >\r\n              <i\r\n                (click)=\"remove('assignees', e_user)\"\r\n                class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                >&#xe9ae;</i\r\n              >\r\n              <span\r\n                class=\"chipName vx-fs-11 vx-label-txt\"\r\n                [appTooltip]=\"e_user.member_name\"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n                >{{ e_user.member_name }}</span\r\n              >\r\n            </ng-container>\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 greenbg\"\r\n              appPopover\r\n              (click)=\"assignees.popover()\"\r\n              placement=\"right\"\r\n              *ngIf=\"responsibilityForm?.assignees?.list?.length > 1\"\r\n            >\r\n              +{{ responsibilityForm?.assignees?.list?.slice(1).length }}\r\n            </button>\r\n          </div>\r\n\r\n          <div class=\"vx-d-flex vx-align-center\" *ngIf=\"featureFlag_groups\">\r\n            <div\r\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n              *ngIf=\"responsibilityForm?.assignees?.list?.length > 0\"\r\n            >\r\n              <i\r\n                class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                (click)=\"\r\n                  remove('assignees', responsibilityForm?.assignees?.list[0])\r\n                \"\r\n                >&#xe9ae;</i\r\n              >\r\n              <span\r\n                class=\"chipName vx-fs-11 vx-label-txt\"\r\n                [appTooltip]=\"\r\n                  responsibilityForm?.assignees?.list[0]?.employee_name\r\n                \"\r\n                placement=\"bottom-left\"\r\n                type=\"black\"\r\n                delay=\"0\"\r\n                [tooltipMandatory]=\"false\"\r\n                >{{\r\n                  responsibilityForm?.assignees?.list[0]?.employee_name\r\n                }}</span\r\n              >\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 greenBg\"\r\n                appPopover\r\n                (click)=\"user.popover()\"\r\n                placement=\"left\"\r\n                *ngIf=\"responsibilityForm?.assignees?.list?.length > 1\"\r\n              >\r\n                +{{ responsibilityForm?.assignees?.list?.length - 1 }}\r\n              </button>\r\n            </div>\r\n            <span\r\n              class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\r\n              *ngIf=\"\r\n                responsibilityForm?.assignees?.list?.length > 0 &&\r\n                responsibilityForm?.assigneeGroups?.list?.length > 0\r\n              \"\r\n              >&</span\r\n            >\r\n            <div\r\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n              *ngIf=\"responsibilityForm?.assigneeGroups?.list?.length\"\r\n            >\r\n              <i\r\n                class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                *ngIf=\"!allGroupAssignee || mode !== 'EDIT'\"\r\n                (click)=\"\r\n                  remove(\r\n                    'groupassignees',\r\n                    responsibilityForm?.assigneeGroups?.list[0]\r\n                  )\r\n                \"\r\n                >&#xe9ae;</i\r\n              >\r\n              <span\r\n                class=\"chipName vx-fs-11 vx-label-txt\"\r\n                [appTooltip]=\"\r\n                  responsibilityForm?.assigneeGroups?.list[0]?.group_name\r\n                \"\r\n                placement=\"bottom-left\"\r\n                type=\"black\"\r\n                delay=\"0\"\r\n                [tooltipMandatory]=\"false\"\r\n                >{{\r\n                  responsibilityForm?.assigneeGroups?.list[0]?.group_name\r\n                }}</span\r\n              >\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\r\n                (click)=\"group.popover()\"\r\n                placement=\"right\"\r\n                *ngIf=\"responsibilityForm?.assigneeGroups?.list?.length > 1\"\r\n              >\r\n                +{{ responsibilityForm?.assigneeGroups?.list?.length - 1 }}\r\n              </button>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.assignees?.length>1\" [class.plus]=\"responsibilityForm?.assignees?.length>2\" *ngIf=\"!featureFlag_groups\">\r\n                      <span class=\"chip\" *ngFor=\"let e_user of responsibilityForm?.assignees?.list?.slice(0,2)\"><i\r\n                              class=\"icons\" (click)=\"remove('assignees',e_user)\">&#xe90d;</i>\r\n                          {{e_user.member_name}}</span>\r\n                      <button class=\"count\" *ngIf=\"responsibilityForm?.assignees?.list?.length > 2\" type=\"button\"\r\n                          appPopover (click)=\"assignees.popover()\" placement=\"right\">+\r\n                          {{responsibilityForm?.assignees?.list?.slice(2).length}}</button>\r\n                  </div> -->\r\n          <!-- <div class=\"chip-container\" *ngIf=\"featureFlag_groups\">\r\n                      <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.assignees?.list?.length > 0\" >\r\n                          <i class=\"icons cross vx-mr-1\" (click)=\"remove('assignees',responsibilityForm?.assignees?.list[0])\" >&#xe90d;</i>\r\n                          <span class=\"chip\" [appTooltip]=\"responsibilityForm?.assignees?.list[0]?.employee_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\">{{responsibilityForm?.assignees?.list[0]?.employee_name}}</span></span>\r\n                          <button *ngIf=\"responsibilityForm?.assignees?.list?.length > 1\" class=\"count user\" appPopover (click)=\"user.popover()\" placement=\"left\"> +{{responsibilityForm?.assignees?.list?.length -1}}</button>\r\n                      </div>\r\n                      <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"  *ngIf=\"responsibilityForm?.assignees?.list?.length > 0 && responsibilityForm?.assigneeGroups?.list?.length > 0\" >&</span>\r\n                      <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.assigneeGroups?.list?.length\" >\r\n                          <i *ngIf=\"(!allGroupAssignee || mode !== 'EDIT')\" class=\"icons cross vx-mr-1\" (click)=\"remove('groupassignees',responsibilityForm?.assigneeGroups?.list[0])\" >&#xe90d;</i>\r\n                          <span class=\"chip\" [appTooltip]=\"responsibilityForm?.assigneeGroups?.list[0]?.group_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\">{{responsibilityForm?.assigneeGroups?.list[0]?.group_name}}</span></span>\r\n                          <button *ngIf=\"responsibilityForm?.assigneeGroups?.list?.length > 1\" class=\"count\" appPopover (click)=\"group.popover()\" placement=\"right\">+{{responsibilityForm?.assigneeGroups?.list?.length - 1}}</button>\r\n                      </div>\r\n                  </div> -->\r\n          <button\r\n            *ngIf=\"\r\n              activeSelector !== 'assignees' &&\r\n              (!featureFlag_groups ||\r\n                (featureFlag_groups && (!allGroupAssignee || mode !== 'EDIT')))\r\n            \"\r\n            class=\"edit\"\r\n            type=\"button\"\r\n            (click)=\"activateSelector('assignees', true)\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i> Edit\r\n          </button>\r\n        </div>\r\n        <app-popover #user [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ul class=\"action-item\">\r\n              <li\r\n                *ngFor=\"\r\n                  let e_user of responsibilityForm?.assignees?.list | slice : 1\r\n                \"\r\n              >\r\n                <div class=\"avatar-card\">\r\n                  <span class=\"value\">\r\n                    <i class=\"icons\" (click)=\"remove('assignees', e_user)\"\r\n                      >&#xe90d;</i\r\n                    >\r\n                    {{ e_user.member_name }}\r\n                  </span>\r\n                </div>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n        </app-popover>\r\n        <app-popover #group [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ul class=\"action-item\">\r\n              <li\r\n                *ngFor=\"\r\n                  let group of responsibilityForm?.assigneeGroups?.list\r\n                    | slice : 1\r\n                \"\r\n              >\r\n                <div class=\"avatar-card\">\r\n                  <span class=\"value\">\r\n                    <i\r\n                      *ngIf=\"\r\n                        !featureFlag_groups ||\r\n                        (featureFlag_groups &&\r\n                          (!allGroupAssignee || mode !== 'EDIT'))\r\n                      \"\r\n                      class=\"icons\"\r\n                      (click)=\"remove('groupassignees', group)\"\r\n                      >&#xe90d;</i\r\n                    >\r\n                    {{ group.group_name }}\r\n                  </span>\r\n                </div>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n        </app-popover>\r\n\r\n        <p\r\n          *ngIf=\"invalidType === 'who'\"\r\n          [appScrollInView]=\"true\"\r\n          class=\"error-message\"\r\n        >\r\n          Please select the person responsible for completing this\r\n          responsibility.\r\n        </p>\r\n        <ng-container *ngIf=\"!isGroupAssigned\">\r\n          <app-cs-radio\r\n            *ngIf=\"mode !== 'EDIT'\"\r\n            (checkedEvent)=\"responsibilityForm.assignees.whoCanComplete = 'ALL'\"\r\n            [checked]=\"responsibilityForm.assignees.whoCanComplete == 'ALL'\"\r\n            [name]=\"'what'\"\r\n            >ALL SELECTED PERSONS NEED TO COMPLETE THIS<i\r\n              class=\"icons\"\r\n              [appTooltip]=\"\r\n                'If selected, separate responsibilities will be created for each person.'\r\n              \"\r\n              placement=\"bottom-right\"\r\n              type=\"white\"\r\n              delay=\"0\"\r\n              [tooltipMandatory]=\"true\"\r\n              >&#xe91f;</i\r\n            >\r\n          </app-cs-radio>\r\n          <app-cs-radio\r\n            *ngIf=\"mode !== 'EDIT'\"\r\n            (checkedEvent)=\"\r\n              responsibilityForm.assignees.whoCanComplete = 'ANY_ONE'\r\n            \"\r\n            [checked]=\"responsibilityForm.assignees.whoCanComplete == 'ANY_ONE'\"\r\n            [name]=\"'what'\"\r\n            >ANY SELECTED PERSON CAN COMPLETE THIS\r\n            <i\r\n              class=\"icons\"\r\n              [appTooltip]=\"\r\n                'If selected, only one responsibility will be created.'\r\n              \"\r\n              placement=\"bottom-right\"\r\n              type=\"white\"\r\n              delay=\"0\"\r\n              [tooltipMandatory]=\"true\"\r\n              >&#xe91f;</i\r\n            >\r\n          </app-cs-radio>\r\n\r\n          <div\r\n            class=\"switch-row align-right\"\r\n            *ngIf=\"\r\n              mode == 'EDIT' &&\r\n              (!featureFlag_groups ||\r\n                (responsibilityForm?.assigneeGroups?.list.length === 0 &&\r\n                  featureFlag_groups))\r\n            \"\r\n          >\r\n            <app-cs-switch\r\n              (ngValueChange)=\"openAssigneeChangeConfirmation($event)\"\r\n              [ngValue]=\"\r\n                responsibilityForm.assignees.whoCanComplete == 'ANY_ONE'\r\n              \"\r\n            >\r\n              ANY SELECTED PERSON CAN COMPLETE THIS\r\n            </app-cs-switch>\r\n          </div>\r\n        </ng-container>\r\n        <app-popover #assignees [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ul class=\"action-item\">\r\n              <li\r\n                *ngFor=\"\r\n                  let e_user of responsibilityForm?.assignees?.list | slice : 1;\r\n                  let j = index\r\n                \"\r\n              >\r\n                <div class=\"avatar-card\">\r\n                  <span class=\"value\">\r\n                    <i class=\"icons\" (click)=\"remove('assignees', e_user)\"\r\n                      >&#xe90d;</i\r\n                    >\r\n                    {{ e_user.member_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    </div>\r\n  </div>\r\n\r\n  <!-- When? -->\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      sideSelectorElements.includes(activeSelector)\r\n    \"\r\n  >\r\n    <div\r\n      class=\"left\"\r\n      [class.checked]=\"\r\n        !responsibilityForm?.frequency || activeSelector === 'frequency'\r\n      \"\r\n    >\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\"\r\n        alt=\"im\"\r\n        *ngIf=\"!responsibilityForm?.frequency || activeSelector === 'frequency'\"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n        *ngIf=\"\r\n          responsibilityForm?.frequency &&\r\n          activeSelector !== 'frequency' &&\r\n          responsibilityForm?.frequency != '' &&\r\n          responsibilityForm?.frequency != '5~0~0~0'\r\n        \"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\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=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\"\r\n          >When? <span class=\"required\">*</span></label\r\n        >\r\n        <div\r\n          *ngIf=\"\r\n            responsibilityForm?.frequency == '' ||\r\n            responsibilityForm?.frequency == '5~0~0~0'\r\n          \"\r\n          class=\"select button-sec\"\r\n        >\r\n          <input\r\n            type=\"text\"\r\n            (click)=\"activateSelector('frequency', true)\"\r\n            [placeholder]=\"frequencyPlaceholder\"\r\n            readonly\r\n          />\r\n          <button (click)=\"activateSelector('frequency', true)\" type=\"button\">\r\n            Set A frequency\r\n          </button>\r\n        </div>\r\n        <div\r\n          *ngIf=\"\r\n            responsibilityForm?.frequency != '' &&\r\n            responsibilityForm?.frequency !== '5~0~0~0'\r\n          \"\r\n          class=\"selected button-sec\"\r\n        >\r\n          <span\r\n            class=\"chip\"\r\n            [appTooltip]=\"frequencyPlaceholder\"\r\n            placement=\"bottom-left\"\r\n            delay=\"0\"\r\n            type=\"black\"\r\n            [tooltipMandatory]=\"false\"\r\n            >{{ frequencyPlaceholder }}</span\r\n          >\r\n          <button\r\n            *ngIf=\"activeSelector !== 'frequency'\"\r\n            type=\"button\"\r\n            class=\"edit\"\r\n            (click)=\"activateSelector('frequency', true)\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i>Edit\r\n          </button>\r\n        </div>\r\n        <p\r\n          *ngIf=\"invalidType === 'when'\"\r\n          [appScrollInView]=\"true\"\r\n          class=\"error-message\"\r\n        >\r\n          Please select the frequency of occurrence for this responsibility.\r\n        </p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Notes -->\r\n  <div\r\n    class=\"form-group-row\"\r\n    [class.active]=\"activeSelector === 'notes'\"\r\n    [class.disabled]=\"\r\n      activeSelector &&\r\n      activeSelector !== 'notes' &&\r\n      sideSelectorElements.includes(activeSelector)\r\n    \"\r\n  >\r\n    <div\r\n      class=\"left\"\r\n      [class.checked]=\"\r\n        checkBlank(responsibilityForm?.description).trim() !== '' &&\r\n        !focus.description\r\n      \"\r\n    >\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/notes.svg\"\r\n        alt=\"im\"\r\n        *ngIf=\"\r\n          checkBlank(responsibilityForm?.description).trim() === '' ||\r\n          focus.description\r\n        \"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        *ngIf=\"\r\n          checkBlank(responsibilityForm?.description).trim() !== '' &&\r\n          !focus.description\r\n        \"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\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=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\">Notes</label>\r\n        <vcomply-editor\r\n          [(ngModel)]=\"responsibilityForm.description\"\r\n          [editorConfig]=\"{\r\n            mode: 'prime',\r\n            colorPalette: true,\r\n            link: true,\r\n            id: 'notes',\r\n            placeholder:\r\n              'Add more information about completing the responsibility'\r\n          }\"\r\n        ></vcomply-editor>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Objective -->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    *ngIf=\"moreOptions?.OBJECTIVE\"\r\n    [attr.id]=\"'OBJECTIVE'\"\r\n    [class.active]=\"activeSelector === 'objective'\"\r\n    [class.disabled]=\"\r\n      activeSelector &&\r\n      activeSelector !== 'objective' &&\r\n      sideSelectorElements.includes(activeSelector)\r\n    \"\r\n  >\r\n    <div\r\n      class=\"left\"\r\n      [class.checked]=\"\r\n        checkBlank(responsibilityForm?.objective).trim() !== '' &&\r\n        !focus.objective\r\n      \"\r\n    >\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/objectives.svg\"\r\n        alt=\"im\"\r\n        *ngIf=\"\r\n          checkBlank(responsibilityForm?.objective).trim() === '' ||\r\n          focus.objective\r\n        \"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n        *ngIf=\"\r\n          checkBlank(responsibilityForm?.objective).trim() !== '' &&\r\n          !focus.objective\r\n        \"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\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=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\">Objective</label>\r\n        <vcomply-editor\r\n          [(ngModel)]=\"responsibilityForm.objective\"\r\n          [editorConfig]=\"{\r\n            mode: 'prime',\r\n            colorPalette: true,\r\n            id: 'objective',\r\n            link: true,\r\n            placeholder:\r\n              'This option lets you specify an objective for the responsibility.'\r\n          }\"\r\n        ></vcomply-editor>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Responsibility Center -->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    *ngIf=\"moreOptions?.RC\"\r\n    [attr.id]=\"'RC'\"\r\n    [class.active]=\"activeSelector === 'rc'\"\r\n    [class.disabled]=\"\r\n      activeSelector &&\r\n      activeSelector !== 'rc' &&\r\n      sideSelectorElements.includes(activeSelector)\r\n    \"\r\n  >\r\n    <div\r\n      class=\"left\"\r\n      [class.checked]=\"\r\n        responsibilityForm?.rc?.length > 0 && activeSelector !== 'rc'\r\n      \"\r\n    >\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/responsibility-center.svg\"\r\n        alt=\"\"\r\n        *ngIf=\"responsibilityForm?.rc?.length == 0 || activeSelector === 'rc'\"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n        *ngIf=\"responsibilityForm?.rc?.length > 0 && activeSelector !== 'rc'\"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\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=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\">Responsibility Center </label>\r\n\r\n        <div class=\"select\" *ngIf=\"responsibilityForm?.rc?.length === 0\">\r\n          <div\r\n            class=\"custom-input\"\r\n            (click)=\"activateSelector('rc', true)\"\r\n            aria-placeholder=\"Select the responsibility center or the responsibility centers for this responsibility.\"\r\n          ></div>\r\n          <!-- <input type=\"text\" (click)=\"activateSelector('rc',true)\" placeholder=\"Select Responsibility Center(s)\" readonly> -->\r\n        </div>\r\n\r\n        <div\r\n          class=\"selected\"\r\n          *ngIf=\"responsibilityForm?.rc?.length > 0\"\r\n          [class.readOnly]=\"openedFrom === 'RISK_TREATMENT'\"\r\n        >\r\n          <div\r\n            class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n            *ngFor=\"let rc of responsibilityForm?.rc?.slice(0, 1)\"\r\n          >\r\n            <i\r\n              class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n              (click)=\"remove('rc', rc)\"\r\n              *ngIf=\"openedFrom !== 'RISK_TREATMENT'\"\r\n              >&#xe9ae;</i\r\n            >\r\n            <span\r\n              class=\"chipName vx-fs-11 vx-label-txt\"\r\n              [appTooltip]=\"rc?.item_name\"\r\n              placement=\"bottom-left\"\r\n              delay=\"0\"\r\n              type=\"black\"\r\n              [tooltipMandatory]=\"false\"\r\n              >{{ rc?.item_name }}</span\r\n            >\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              *ngIf=\"responsibilityForm?.rc?.length > 1\"\r\n              appPopover\r\n              (click)=\"rcPopover.popover()\"\r\n              placement=\"left\"\r\n            >\r\n              +{{ responsibilityForm?.rc?.slice(1).length }}\r\n            </button>\r\n          </div>\r\n\r\n          <!-- <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.rc?.length>1\" [class.plus]=\"responsibilityForm?.rc?.length>2\">\r\n                      <span class=\"chip\" *ngFor=\"let rc of responsibilityForm?.rc?.slice(0,2)\"><i class=\"icons\" (click)=\"remove('rc',rc)\" *ngIf=\"openedFrom !== 'RISK_TREATMENT'\">&#xe90d;</i>{{rc?.item_name}}</span>\r\n                      <button class=\"count\" *ngIf=\"responsibilityForm?.rc?.length > 2\" type=\"button\" appPopover (click)=\"rc.popover()\" placement=\"right\" placement=\"right\">+{{responsibilityForm?.rc?.slice(2).length}}</button>\r\n                  </div> -->\r\n\r\n          <button\r\n            *ngIf=\"activeSelector !== 'rc' && openedFrom !== 'RISK_TREATMENT'\"\r\n            class=\"edit\"\r\n            type=\"button\"\r\n            (click)=\"activateSelector('rc', true)\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i> Edit\r\n          </button>\r\n        </div>\r\n        <app-popover #rcPopover [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ul class=\"action-item\">\r\n              <li\r\n                *ngFor=\"\r\n                  let rc of responsibilityForm?.rc | slice : 1;\r\n                  let j = index\r\n                \"\r\n              >\r\n                <div class=\"avatar-card\">\r\n                  <span class=\"value\">\r\n                    <i class=\"icons\" (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\r\n        <ng-container\r\n          *ngIf=\"\r\n            isResponsibilityRcLinkEnabled &&\r\n            (mode != 'EDIT' || responsibilityForm?.rc?.length <= 1)\r\n          \"\r\n        >\r\n          <!-- <app-cs-radio><div [appTooltip]=\"'Create separate responsibilities for each responsibility center'\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"true\">CREATE SEPARATE RESPONSIBILITIES FOR EACH RESPONSIBILITY CEN\u2026</div><i class=\"icons\" [appTooltip]=\"'If selected, separate responsibilities will be created for each Responsibility Center.'\" placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i></app-cs-radio> -->\r\n          <app-cs-radio\r\n            [class.disabled]=\"\r\n              mode == 'EDIT' &&\r\n              responsibilityForm.responsibilityCenterType === 1 &&\r\n              responsibilityForm?.rc?.length > 1\r\n            \"\r\n            [checked]=\"responsibilityCenterType === 0\"\r\n            [name]=\"'ff_responsibility_rc_link'\"\r\n            (checkedEvent)=\"onRcTypeChange(0)\"\r\n            ><div\r\n              class=\"rc-radio-text\"\r\n              [appTooltip]=\"\r\n                'Create separate responsibilities for each responsibility centers'\r\n              \"\r\n              placement=\"bottom-left\"\r\n              type=\"black\"\r\n              delay=\"0\"\r\n              [tooltipMandatory]=\"true\"\r\n            >\r\n              CREATE SEPARATE RESPONSIBILITIES FOR EACH RESPONSIBILITY CEN\u2026\r\n            </div>\r\n            <i\r\n              class=\"icons\"\r\n              [appTooltip]=\"\r\n                'If selected, separate responsibilities will be created for each Responsibility Center.'\r\n              \"\r\n              placement=\"bottom-right\"\r\n              type=\"white\"\r\n              delay=\"0\"\r\n              [tooltipMandatory]=\"true\"\r\n              >&#xe91f;</i\r\n            ></app-cs-radio\r\n          >\r\n          <app-cs-radio\r\n            [class.disabled]=\"\r\n              mode == 'EDIT' &&\r\n              responsibilityForm.responsibilityCenterType === 1 &&\r\n              responsibilityForm?.rc?.length > 1\r\n            \"\r\n            [checked]=\"responsibilityCenterType === 1\"\r\n            [name]=\"'ff_responsibility_rc_link'\"\r\n            (checkedEvent)=\"onRcTypeChange(1)\"\r\n            >DISPLAY THE SAME RESPONSIBILITY IN ALL RESPONSIBILITY CENTERS<i\r\n              class=\"icons\"\r\n              [appTooltip]=\"\r\n                'If selected, the same responsibility will be linked to each Responsibility Center.'\r\n              \"\r\n              placement=\"bottom-right\"\r\n              type=\"white\"\r\n              delay=\"0\"\r\n              [tooltipMandatory]=\"true\"\r\n              >&#xe91f;</i\r\n            ></app-cs-radio\r\n          >\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Program -->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    *ngIf=\"moreOptions?.PROGRAM\"\r\n    [attr.id]=\"'PROGRAM'\"\r\n    [class.active]=\"activeSelector === 'program'\"\r\n    [class.disabled]=\"\r\n      activeSelector &&\r\n      activeSelector !== 'program' &&\r\n      sideSelectorElements.includes(activeSelector)\r\n    \"\r\n  >\r\n    <div\r\n      class=\"left\"\r\n      [class.checked]=\"\r\n        responsibilityForm?.program?.length > 0 && activeSelector !== 'program'\r\n      \"\r\n    >\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\"\r\n        alt=\"\"\r\n        *ngIf=\"\r\n          responsibilityForm?.program?.length == 0 ||\r\n          activeSelector === 'program'\r\n        \"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n        *ngIf=\"\r\n          responsibilityForm?.program?.length > 0 &&\r\n          activeSelector !== 'program'\r\n        \"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\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=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\">Program</label>\r\n        <div class=\"select\" *ngIf=\"responsibilityForm?.program?.length == 0\">\r\n          <div\r\n            class=\"custom-input\"\r\n            (click)=\"activateSelector('program', true)\"\r\n            aria-placeholder=\"Select the Program or Program Categories that this responsibility relates to.\"\r\n          ></div>\r\n          <!-- <input type=\"text\" (click)=\"activateSelector('program',true)\" placeholder=\"Select Responsibility program(s)\" readonly> -->\r\n        </div>\r\n        <div class=\"selected\" *ngIf=\"responsibilityForm?.program?.length > 0\">\r\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n            <ng-container *ngFor=\"let program of responsibilityForm?.program\">\r\n              <i\r\n                class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                *ngIf=\"\r\n                  !hiddenList?.includes('PROGRAM') &&\r\n                  !program?.isViewOnlyProgram\r\n                \"\r\n                (click)=\"remove('program', program)\"\r\n                >&#xe9ae;</i\r\n              >\r\n              <span\r\n                class=\"chipName vx-fs-11 vx-label-txt\"\r\n                [appTooltip]=\"program?.name ?? '--'\"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n                >{{ program?.name ?? \"--\" }}</span\r\n              >\r\n            </ng-container>\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\r\n              (click)=\"program.popover()\"\r\n              placement=\"right\"\r\n              *ngIf=\"responsibilityForm?.linkedProgram?.length > 1\"\r\n            >\r\n              +{{ responsibilityForm?.linkedProgram?.length - 1 }}\r\n            </button>\r\n          </div>\r\n\r\n          <!-- <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.program?.length>1\" [class.plus]=\"responsibilityForm?.program?.length>2\">\r\n                              <span class=\"chip\" *ngFor=\"let program of responsibilityForm?.program\"><i class=\"icons\" *ngIf=\"feature.isFeatureEnabled('ff_deprecate_primary_program_flag')\" (click)=\"remove('program',program)\">&#xe90d;</i> {{program?.name??'--'}}</span>\r\n                              <!- - <button *ngIf=\"responsibilityForm?.program?.length > 2\" class=\"count\" type=\"button\" appPopover (click)=\"program.popover()\" placement=\"right\">+ {{responsibilityForm?.program?.slice(2).length}}</button> - ->\r\n                              <button *ngIf=\"responsibilityForm?.linkedProgram?.length > 1\" class=\"count\" type=\"button\" appPopover (click)=\"program.popover()\" placement=\"right\">+ {{responsibilityForm?.linkedProgram?.length - 1}}</button>\r\n                          </div> -->\r\n\r\n          <button\r\n            *ngIf=\"\r\n              activeSelector !== 'program' && !hiddenList.includes('PROGRAM')\r\n            \"\r\n            class=\"edit\"\r\n            type=\"button\"\r\n            (click)=\"activateSelector('program', true)\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i> Edit\r\n          </button>\r\n        </div>\r\n\r\n        <app-popover #program [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ul class=\"action-item\">\r\n              <ng-container\r\n                *ngIf=\"\r\n                  !feature.isFeatureEnabled('ff_deprecate_primary_program_flag')\r\n                \"\r\n              >\r\n                <li class=\"multiple-program\">\r\n                  <div class=\"avatar-card\">\r\n                    <span\r\n                      class=\"value\"\r\n                      [appTooltip]=\"responsibilityForm?.program[0]?.name\"\r\n                      placement=\"bottom\"\r\n                      type=\"black\"\r\n                      delay=\"0\"\r\n                      [tooltipMandatory]=\"false\"\r\n                    >\r\n                      {{ responsibilityForm?.program[0]?.name }}\r\n                    </span>\r\n                    <div class=\"primary-label\">PRIMARY</div>\r\n                  </div>\r\n                </li>\r\n              </ng-container>\r\n              <li\r\n                *ngFor=\"\r\n                  let program of responsibilityForm?.linkedProgram;\r\n                  let j = index\r\n                \"\r\n              >\r\n                <div\r\n                  class=\"avatar-card\"\r\n                  *ngIf=\"\r\n                    program?.category_id !==\r\n                    responsibilityForm?.program[0]?.category_id\r\n                  \"\r\n                >\r\n                  <span\r\n                    class=\"value\"\r\n                    [appTooltip]=\"program?.name\"\r\n                    placement=\"bottom\"\r\n                    type=\"black\"\r\n                    delay=\"0\"\r\n                    [tooltipMandatory]=\"false\"\r\n                  >\r\n                    <i\r\n                      *ngIf=\"\r\n                        !hiddenList?.includes('PROGRAM') &&\r\n                        !program?.isViewOnlyProgram\r\n                      \"\r\n                      class=\"icons\"\r\n                      (click)=\"remove('program', program)\"\r\n                      >&#xe90d;</i\r\n                    >\r\n                    {{ program?.name }}\r\n                  </span>\r\n                </div>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n        </app-popover>\r\n        <div *ngIf=\"responsibilityForm?.customTags?.length > 0\">\r\n          <ng-container *ngFor=\"let tag of responsibilityForm?.customTags\">\r\n            <ng-container *ngIf=\"tag?.tag_name?.trim()\">\r\n              <label class=\"vx-control-panel vx-mt-2\">{{\r\n                tag?.tag_name\r\n              }}</label>\r\n              <input\r\n                type=\"text\"\r\n                [(ngModel)]=\"tag.value\"\r\n                placeholder=\"{{ tag?.tag_name }}\"\r\n              />\r\n            </ng-container>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Format & Evidence -->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    *ngIf=\"moreOptions?.FORMATE_EVIDENCE\"\r\n    [attr.id]=\"'FORMATE_EVIDENCE'\"\r\n    [class.active]=\"activeSelector === 'formate_evidence'\"\r\n    [class.disabled]=\"\r\n      activeSelector &&\r\n      activeSelector !== 'formate_evidence' &&\r\n      sideSelectorElements.includes(activeSelector)\r\n    \"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"false\">\r\n      <img\r\n        *ngIf=\"\r\n          this.responsibilityForm.formatAndEvidence.evidenceRequired == false &&\r\n          this.responsibilityForm.formatAndEvidence.formatFiles.length == 0 &&\r\n          this.responsibilityForm.formatAndEvidence.formatLinks?.length == 0\r\n        \"\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/format-evidence.svg\"\r\n        alt=\"im\"\r\n      />\r\n\r\n      <svg\r\n        *ngIf=\"\r\n          this.responsibilityForm.formatAndEvidence.evidenceRequired ||\r\n          this.responsibilityForm.formatAndEvidence.formatFiles.length ||\r\n          this.responsibilityForm.formatAndEvidence.formatLinks?.length\r\n        \"\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 class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\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=\"right\">\r\n      <app-format-and-evidence\r\n        (updateFiles)=\"saveSelectedList('formate_evidence', $event)\"\r\n        [mode]=\"'responsibility'\"\r\n        [formatEvidanceData]=\"responsibilityForm?.formatAndEvidence\"\r\n      >\r\n      </app-format-and-evidence>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Assessment -->\r\n  <div\r\n    *ngIf=\"moreOptions?.ASSESSMENT\"\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    [attr.id]=\"'ASSESSMENT'\"\r\n    [class.active]=\"false\"\r\n    [class.disabled]=\"false\"\r\n  >\r\n    <div\r\n      class=\"left\"\r\n      [class.checked]=\"responsibilityForm.assessment?.assessment_id\"\r\n    >\r\n      <img\r\n        *ngIf=\"!responsibilityForm.assessment?.assessment_id\"\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/assessments.svg\"\r\n        alt=\"im\"\r\n      />\r\n\r\n      <svg\r\n        *ngIf=\"responsibilityForm.assessment?.assessment_id\"\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 class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\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=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\">ASSESSMENTS</label>\r\n        <div\r\n          *ngIf=\"!responsibilityForm.assessment?.assessment_id\"\r\n          class=\"select\"\r\n        >\r\n          <input\r\n            type=\"text\"\r\n            (click)=\"\r\n              activateSelector('isAssessment', true); isAssessment = true\r\n            \"\r\n            placeholder=\"Select an assessment for this responsibility\"\r\n            [disabled]=\"responsibilityForm.checkpoints?.length\"\r\n            readonly\r\n          />\r\n        </div>\r\n        <div\r\n          class=\"selected\"\r\n          *ngIf=\"responsibilityForm.assessment?.assessment_id\"\r\n        >\r\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n            <i\r\n              *ngIf=\"assessmentDetails?.assessment_type !== 'compliance_audit'\"\r\n              class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n              (click)=\"remove('assessment', category)\"\r\n              >&#xe9ae;</i\r\n            >\r\n            <span\r\n              class=\"chipName vx-fs-11 vx-label-txt\"\r\n              [appTooltip]=\"\r\n                responsibilityForm.assessment?.assessmentDetails\r\n                  ?.assessment_name\r\n              \"\r\n              placement=\"bottom-left\"\r\n              delay=\"0\"\r\n              type=\"black\"\r\n              [tooltipMandatory]=\"false\"\r\n              >{{\r\n                responsibilityForm.assessment?.assessmentDetails\r\n                  ?.assessment_name\r\n              }}</span\r\n            >\r\n            <div\r\n              class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-ml-1 vx-text-center\"\r\n            >\r\n              {{ responsibilityForm.assessment?.assessmentDetails?.questions }}\r\n              {{\r\n                responsibilityForm.assessment?.assessmentDetails?.questions > 1\r\n                  ? \"Questions\"\r\n                  : \"Question\"\r\n              }}\r\n            </div>\r\n          </div>\r\n\r\n          <button\r\n            *ngIf=\"assessmentDetails?.assessment_type !== 'compliance_audit'\"\r\n            (click)=\"\r\n              activateSelector('isAssessment', true); isAssessment = true\r\n            \"\r\n            class=\"edit\"\r\n            type=\"button\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i> Edit\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Checkpoints -->\r\n  <!-- *ngIf=\"moreOptions.checkpoints\" -->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    *ngIf=\"moreOptions?.CHECKPOINTS\"\r\n    [attr.id]=\"'CHECKPOINTS'\"\r\n    [class.active]=\"activeSelector === 'checkpoints'\"\r\n    [class.disabled]=\"\r\n      activeSelector &&\r\n      activeSelector !== 'checkpoints' &&\r\n      sideSelectorElements.includes(activeSelector)\r\n    \"\r\n  >\r\n    <div class=\"left\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/checkpoints.svg\"\r\n        alt=\"im\"\r\n        *ngIf=\"\r\n          responsibilityForm?.checkpoints?.length == 0 ||\r\n          activeSelector === 'checkpoints'\r\n        \"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n        *ngIf=\"\r\n          responsibilityForm?.checkpoints?.length > 0 &&\r\n          activeSelector !== 'checkpoints'\r\n        \"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\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=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\">\r\n          <!-- {{responsibilityForm.checkpoints|json}}\r\n                {{responsibilityForm.checkpointInstruction}} -->\r\n\r\n          Checkpoints\r\n          <!-- <button *ngIf=\"responsibilityForm?.checkpoints?.length === 0\" class=\"button\"\r\n                      (click)=\"activateSelector('checkpoints',true)\">+ Add Checkpoints</button> -->\r\n        </label>\r\n        <div\r\n          class=\"select button-sec\"\r\n          *ngIf=\"responsibilityForm?.checkpoints?.length === 0\"\r\n        >\r\n          <input\r\n            [disabled]=\"!responsibilityForm.checkpoints?.length\"\r\n            type=\"text\"\r\n            (click)=\"activateSelector('checkpoints', true)\"\r\n            placeholder=\"Add checkpoints for this responsibility\"\r\n            readonly\r\n          />\r\n          <button\r\n            [disabled]=\"!responsibilityForm.checkpoints?.length\"\r\n            (click)=\"activateSelector('checkpoints', true)\"\r\n            type=\"button\"\r\n          >\r\n            Add Checkpoints\r\n          </button>\r\n        </div>\r\n        <div\r\n          class=\"selected\"\r\n          *ngIf=\"responsibilityForm.checkpoints?.length > 0\"\r\n        >\r\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n            <ng-container\r\n              *ngFor=\"\r\n                let checkpoint of responsibilityForm.checkpoints?.slice(0, 1)\r\n              \"\r\n            >\r\n              <span\r\n                class=\"chipName vx-fs-11 vx-label-txt\"\r\n                [appTooltip]=\"checkpoint?.label\"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n                >{{ checkpoint?.label }}</span\r\n              >\r\n            </ng-container>\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\r\n              (click)=\"checkpoint.popover()\"\r\n              placement=\"right\"\r\n              *ngIf=\"responsibilityForm.checkpoints?.length > 1\"\r\n            >\r\n              +{{ responsibilityForm.checkpoints?.length - 1 }}\r\n            </button>\r\n          </div>\r\n\r\n          <!-- <div class=\"chip-container checkpoints\" [class.more-one]=\"responsibilityForm.checkpoints?.length>1\" [class.plus]=\"responsibilityForm.checkpoints?.length>2\">\r\n                      <span class=\"chip\" *ngFor=\"let checkpoint of responsibilityForm.checkpoints?.slice(0,1)\">{{checkpoint?.label}}</span>\r\n                      <button class=\"count\" *ngIf=\"responsibilityForm.checkpoints?.length > 1\" type=\"button\" appPopover (click)=\"checkpoint.popover()\" placement=\"right\">+{{responsibilityForm.checkpoints?.length- 1}}</button>\r\n                  </div> -->\r\n\r\n          <button\r\n            *ngIf=\"activeSelector !== 'checkpoints'\"\r\n            class=\"edit\"\r\n            type=\"button\"\r\n            (click)=\"activateSelector('checkpoints', true)\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i> Edit\r\n          </button>\r\n        </div>\r\n      </div>\r\n      <div\r\n        *ngIf=\"this.responsibilityForm.checkpoints?.length\"\r\n        class=\"assessment-text\"\r\n      >\r\n        <i class=\"icons alert-icon\">&#xe930;</i>\r\n        <span\r\n          >You can now use the new <strong>Checkpoints </strong>or\r\n          <strong>Assessments</strong> feature instead of the old checkpoints\r\n          functionality to create analytical questions.\r\n          <button\r\n            class=\"remove-btn\"\r\n            (click)=\"onRemoveCheckpoints('checkpoint')\"\r\n          >\r\n            Remove Checkpoints\r\n          </button>\r\n          to continue.</span\r\n        >\r\n      </div>\r\n      <app-popover #checkpoint [dontCloseonClick]=\"true\">\r\n        <div class=\"wf-action-list\">\r\n          <ul class=\"action-item\">\r\n            <li\r\n              *ngFor=\"\r\n                let checkpoint of responsibilityForm.checkpoints | slice : 1;\r\n                let j = index\r\n              \"\r\n            >\r\n              <div class=\"avatar-card\">\r\n                <span class=\"value\">\r\n                  {{ checkpoint?.label }}\r\n                </span>\r\n              </div>\r\n            </li>\r\n          </ul>\r\n        </div>\r\n      </app-popover>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- New  Checkpoints -->\r\n  <!-- *ngIf=\"moreOptions.checkpoints\" -->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    *ngIf=\"moreOptions?.CHECKPOINTS_NEW\"\r\n    [attr.id]=\"'CHECKPOINTS-NEW'\"\r\n    [class.active]=\"activeSelector === 'checkpoints-new'\"\r\n  >\r\n    <div class=\"left\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/checkpoints.svg\"\r\n        alt=\"im\"\r\n        *ngIf=\"\r\n          responsibilityForm?.checkpoints?.length == 0 ||\r\n          activeSelector === 'checkpoints'\r\n        \"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n        *ngIf=\"checkpointCount > 0 && activeSelector !== 'checkpoints'\"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\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=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\">\r\n          <!-- {{responsibilityForm.checkpoints|json}}\r\n                {{responsibilityForm.checkpointInstruction}} -->\r\n\r\n          Checkpoints\r\n          <!-- <span class=\"checkpoint-version\"> V2.0</span> -->\r\n          <!-- <button  class=\"button\"\r\n                      (click)=\"activateSelector('checkpoints-new',true)\">+ Add Checkpoints</button> -->\r\n        </label>\r\n        <div class=\"select button-sec\" *ngIf=\"checkpointCount === 0\">\r\n          <input\r\n            type=\"text\"\r\n            (click)=\"activateSelector('checkpoints-new', true)\"\r\n            placeholder=\"Add checkpoints for this responsibility\"\r\n            readonly\r\n          />\r\n          <button\r\n            (click)=\"activateSelector('checkpoints-new', true)\"\r\n            type=\"button\"\r\n          >\r\n            Add Checkpoints\r\n          </button>\r\n        </div>\r\n        <div class=\"selected\" *ngIf=\"checkpointCount > 0\">\r\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n            <i\r\n              class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n              (click)=\"onRemoveCheckpoints('new-checkpoints')\"\r\n              >&#xe9ae;</i\r\n            >\r\n            <span class=\"chipName vx-fs-11 vx-label-txt\"\r\n              >{{ checkpointCount }}\r\n              {{ checkpointCount > 1 ? \"Questions\" : \"Question\" }}</span\r\n            >\r\n          </div>\r\n\r\n          <!-- <div class=\"chip-container checkpoints\" [class.more-one]=\"checkpointCount > 0\">\r\n                      <span class=\"chip\">\r\n                          <i class=\"icons\" (click)=\"onRemoveCheckpoints('new-checkpoints')\">&#xe90d;</i>\r\n                          {{checkpointCount}} {{checkpointCount > 1 ? 'Questions': 'Question'}}</span>\r\n                  </div> -->\r\n\r\n          <button\r\n            *ngIf=\"activeSelector !== 'checkpoints-new'\"\r\n            class=\"edit\"\r\n            type=\"button\"\r\n            (click)=\"activateSelector('checkpoints-new', true)\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i> Edit\r\n          </button>\r\n        </div>\r\n      </div>\r\n      <app-popover #checkpoint [dontCloseonClick]=\"true\">\r\n        <div class=\"wf-action-list\">\r\n          <ul class=\"action-item\">\r\n            <li\r\n              *ngFor=\"\r\n                let checkpoint of responsibilityForm.checkpoints | slice : 1;\r\n                let j = index\r\n              \"\r\n            >\r\n              <div class=\"avatar-card\">\r\n                <span class=\"value\">\r\n                  {{ checkpoint?.label }}\r\n                </span>\r\n              </div>\r\n            </li>\r\n          </ul>\r\n        </div>\r\n      </app-popover>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Risk Classification -->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    *ngIf=\"moreOptions?.RISK_CLASSIFICATION\"\r\n    [attr.id]=\"'RISK_CLASSIFICATION'\"\r\n    [class.active]=\"activeSelector === 'riskCalculator'\"\r\n    [class.disabled]=\"\r\n      activeSelector &&\r\n      activeSelector !== 'riskCalculator' &&\r\n      sideSelectorElements.includes(activeSelector)\r\n    \"\r\n  >\r\n    <div class=\"left\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/risks.svg\"\r\n        alt=\"im\"\r\n      />\r\n\r\n      <svg\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 class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\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=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\">\r\n          Risk Classification\r\n          <button\r\n            (click)=\"activateSelector('riskCalculator', true)\"\r\n            class=\"button\"\r\n          >\r\n            + Risk Calculator\r\n          </button>\r\n        </label>\r\n\r\n        <div class=\"classification\">\r\n          <label\r\n            class=\"low\"\r\n            *ngFor=\"let risk of riskClassification\"\r\n            [ngClass]=\"[risk.class]\"\r\n          >\r\n            <input\r\n              type=\"radio\"\r\n              name=\"classification\"\r\n              [(ngModel)]=\"responsibilityForm.riskClass\"\r\n              [value]=\"risk?.value\"\r\n            />\r\n            <span>{{ risk?.name }}</span>\r\n          </label>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Reviewer -->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    *ngIf=\"moreOptions?.REVIEWER\"\r\n    [attr.id]=\"'REVIEWER'\"\r\n    [class.active]=\"\r\n      activeSelector === 'reviewerFrequency' || activeSelector === 'reviewer'\r\n    \"\r\n    [class.disabled]=\"\r\n      activeSelector &&\r\n      activeSelector !== 'reviewer' &&\r\n      sideSelectorElements.includes(activeSelector)\r\n    \"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"false\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/reviewer.svg\"\r\n        alt=\"\"\r\n        *ngIf=\"\r\n          responsibilityForm?.reviewers?.list?.length == 0 ||\r\n          activeSelector === 'reviewer'\r\n        \"\r\n      />\r\n\r\n      <svg\r\n        *ngIf=\"\r\n          responsibilityForm?.reviewers?.list?.length > 0 &&\r\n          activeSelector !== 'reviewer'\r\n        \"\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 class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\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=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\">Reviewer</label>\r\n        <div\r\n          class=\"select\"\r\n          *ngIf=\"\r\n            (responsibilityForm?.reviewers?.list?.length == 0 &&\r\n              !featureFlag_groups) ||\r\n            (responsibilityForm?.reviewers?.list?.length == 0 &&\r\n              responsibilityForm?.groupReviewers?.list?.length == 0 &&\r\n              featureFlag_groups)\r\n          \"\r\n        >\r\n          <input\r\n            type=\"text\"\r\n            (click)=\"activateSelector('reviewer', true)\"\r\n            placeholder=\"Select Reviewer\"\r\n            readonly\r\n          />\r\n        </div>\r\n        <div\r\n          class=\"selected\"\r\n          *ngIf=\"\r\n            (responsibilityForm?.reviewers?.list?.length > 0 &&\r\n              !featureFlag_groups) ||\r\n            ((responsibilityForm?.reviewers?.list?.length > 0 ||\r\n              responsibilityForm?.groupReviewers?.list?.length > 0) &&\r\n              featureFlag_groups)\r\n          \"\r\n        >\r\n          <div\r\n            class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n            *ngIf=\"!featureFlag_groups\"\r\n          >\r\n            <ng-container\r\n              *ngFor=\"\r\n                let reviewer of responsibilityForm?.reviewers?.list?.slice(0, 1)\r\n              \"\r\n            >\r\n              <i\r\n                class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                (click)=\"remove('reviewer', reviewer)\"\r\n                >&#xe9ae;</i\r\n              >\r\n              <span\r\n                class=\"chipName vx-fs-11 vx-label-txt\"\r\n                [appTooltip]=\"reviewer.member_name\"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n                >{{ reviewer.member_name }}</span\r\n              >\r\n            </ng-container>\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\r\n              (click)=\"reviewer.popover()\"\r\n              placement=\"right\"\r\n              *ngIf=\"responsibilityForm?.reviewers?.list?.length > 1\"\r\n            >\r\n              +{{ responsibilityForm?.reviewers?.list?.slice(1).length }}\r\n            </button>\r\n          </div>\r\n\r\n          <!-- <div class=\"chip-container\" *ngIf=\"!featureFlag_groups\" [class.more-one]=\"responsibilityForm?.reviewers?.list?.length>1\"\r\n                      [class.plus]=\"responsibilityForm?.reviewers?.list?.length>2\">\r\n                      <span class=\"chip\" *ngFor=\"let reviewer of responsibilityForm?.reviewers?.list?.slice(0,2)\"><i class=\"icons\" (click)=\"remove('reviewer',reviewer)\">&#xe90d;</i> {{reviewer.member_name}}</span>\r\n                      <button class=\"count\" *ngIf=\"responsibilityForm?.reviewers?.list?.length > 2\" type=\"button\" appPopover (click)=\"reviewer.popover()\" placement=\"right\">+{{responsibilityForm?.reviewers?.list?.slice(2).length}}</button>\r\n                  </div> -->\r\n\r\n          <div class=\"vx-d-flex vx-align-center\" *ngIf=\"featureFlag_groups\">\r\n            <div\r\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n              *ngIf=\"responsibilityForm?.reviewers?.list.length > 0\"\r\n            >\r\n              <i\r\n                class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                (click)=\"\r\n                  remove('reviewer', responsibilityForm?.reviewers?.list[0])\r\n                \"\r\n                >&#xe9ae;</i\r\n              >\r\n              <span\r\n                class=\"chipName vx-fs-11 vx-label-txt\"\r\n                [appTooltip]=\"\r\n                  responsibilityForm?.reviewers?.list[0]?.employee_name\r\n                \"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n                >{{\r\n                  responsibilityForm?.reviewers?.list[0]?.employee_name\r\n                }}</span\r\n              >\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 greenBg\"\r\n                appPopover\r\n                (click)=\"user.popover()\"\r\n                placement=\"right\"\r\n                *ngIf=\"responsibilityForm?.reviewers?.list?.length > 1\"\r\n              >\r\n                +{{ responsibilityForm?.reviewers?.list?.length - 1 }}\r\n              </button>\r\n            </div>\r\n            <div\r\n              class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\r\n              *ngIf=\"\r\n                responsibilityForm?.reviewers?.list.length > 0 &&\r\n                responsibilityForm?.groupReviewers?.list?.length > 0\r\n              \"\r\n            >\r\n              &\r\n            </div>\r\n            <div\r\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n              *ngIf=\"responsibilityForm?.groupReviewers?.list.length > 0\"\r\n            >\r\n              <i\r\n                class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                (click)=\"\r\n                  remove(\r\n                    'groupReviewer',\r\n                    responsibilityForm?.groupReviewers?.list[0]\r\n                  )\r\n                \"\r\n                >&#xe9ae;</i\r\n              >\r\n              <span\r\n                class=\"chipName vx-fs-11 vx-label-txt\"\r\n                [appTooltip]=\"\r\n                  responsibilityForm?.groupReviewers?.list[0]?.group_name\r\n                \"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n                >{{\r\n                  responsibilityForm?.groupReviewers?.list[0]?.group_name\r\n                }}</span\r\n              >\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\r\n                (click)=\"group.popover()\"\r\n                placement=\"right\"\r\n                *ngIf=\"responsibilityForm?.groupReviewers?.list?.length > 1\"\r\n              >\r\n                +{{ responsibilityForm?.groupReviewers?.list?.length - 1 }}\r\n              </button>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- <div class=\"chip-container\" *ngIf=\"featureFlag_groups\">\r\n                      <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.reviewers?.list.length > 0 \">\r\n                          <i class=\"icons cross vx-mr-1\" (click)=\"remove('reviewer',responsibilityForm?.reviewers?.list[0])\" >&#xe90d;</i>\r\n                          <span class=\"chip\" [appTooltip]=\"responsibilityForm?.reviewers?.list[0]?.employee_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\">{{responsibilityForm?.reviewers?.list[0]?.employee_name}}</span></span>\r\n                          <button *ngIf=\"responsibilityForm?.reviewers?.list?.length > 1\" class=\"count user\" appPopover (click)=\"user.popover()\" placement=\"left\"> +{{responsibilityForm?.reviewers?.list?.length - 1}}</button>\r\n                      </div>\r\n                      <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"responsibilityForm?.reviewers?.list.length > 0 && responsibilityForm?.groupReviewers?.list?.length > 0\">&</span>\r\n                      <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.groupReviewers?.list.length > 0 \" >\r\n                          <i class=\"icons cross vx-mr-1\" (click)=\"remove('groupReviewer',responsibilityForm?.groupReviewers?.list[0])\">&#xe90d;</i>\r\n                          <span class=\"chip\" [appTooltip]=\"responsibilityForm?.groupReviewers?.list[0]?.group_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\">{{responsibilityForm?.groupReviewers?.list[0]?.group_name}}</span></span>\r\n                          <button *ngIf=\"responsibilityForm?.groupReviewers?.list?.length > 1\" class=\"count\" appPopover (click)=\"group.popover()\" placement=\"right\">+{{responsibilityForm?.groupReviewers?.list?.length - 1}}</button>\r\n\r\n                      </div>\r\n                  </div> -->\r\n\r\n          <button\r\n            *ngIf=\"activeSelector !== 'reviewer'\"\r\n            class=\"edit\"\r\n            type=\"button\"\r\n            (click)=\"activateSelector('reviewer', true)\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i> Edit\r\n          </button>\r\n        </div>\r\n        <app-cs-radio\r\n          [checked]=\"responsibilityForm.reviewers.sequentialWorkflow\"\r\n          [name]=\"'reviewer'\"\r\n          (checkedEvent)=\"onReviewerWorkflowChange('sequential')\"\r\n          [class.disabled]=\"\r\n            responsibilityForm?.groupReviewers?.list?.length > 0\r\n          \"\r\n        >\r\n          SEQUENTIAL<i\r\n            class=\"icons\"\r\n            [appTooltip]=\"\r\n              'The responsibility will be sent for review one at a time in the sequence defined by you.'\r\n            \"\r\n            placement=\"bottom-right\"\r\n            delay=\"0\"\r\n            type=\"white\"\r\n            [tooltipMandatory]=\"true\"\r\n            >&#xe91f;</i\r\n          >\r\n        </app-cs-radio>\r\n        <app-cs-radio\r\n          [checked]=\"!responsibilityForm.reviewers.sequentialWorkflow\"\r\n          [name]=\"'reviewer'\"\r\n          (checkedEvent)=\"onReviewerWorkflowChange('anyReviewer')\"\r\n        >\r\n          ANY REVIEWER CAN MARK THIS AS REVIEWED<i\r\n            class=\"icons\"\r\n            [appTooltip]=\"\r\n              'The responsibility will be sent for review to all reviewers at the same time. If anyone of the reviewer reviews the responsibility, it will be considered as reviewed.'\r\n            \"\r\n            placement=\"bottom-right\"\r\n            delay=\"0\"\r\n            type=\"white\"\r\n            [tooltipMandatory]=\"true\"\r\n            >&#xe91f;</i\r\n          >\r\n        </app-cs-radio>\r\n        <app-popover #reviewer [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ul class=\"action-item\">\r\n              <li\r\n                *ngFor=\"\r\n                  let reviewer of responsibilityForm?.reviewers?.list\r\n                    | slice : 1;\r\n                  let j = index\r\n                \"\r\n              >\r\n                <div class=\"avatar-card\">\r\n                  <span class=\"value\">\r\n                    <i class=\"icons\" (click)=\"remove('reviewer', reviewer)\"\r\n                      >&#xe90d;</i\r\n                    >\r\n                    {{ reviewer.member_name }}\r\n                  </span>\r\n                </div>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n        </app-popover>\r\n        <app-popover #user [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ul class=\"action-item\">\r\n              <li\r\n                *ngFor=\"\r\n                  let reviewer of responsibilityForm?.reviewers?.list\r\n                    | slice : 1;\r\n                  let j = index\r\n                \"\r\n              >\r\n                <div class=\"avatar-card\">\r\n                  <span class=\"value\">\r\n                    <i class=\"icons\" (click)=\"remove('reviewer', reviewer)\"\r\n                      >&#xe90d;</i\r\n                    >\r\n                    {{ reviewer.member_name }}\r\n                  </span>\r\n                </div>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n        </app-popover>\r\n        <app-popover #group [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ul class=\"action-item\">\r\n              <li\r\n                *ngFor=\"\r\n                  let group of responsibilityForm?.groupReviewers?.list\r\n                    | slice : 1;\r\n                  let i = index\r\n                \"\r\n              >\r\n                <div class=\"avatar-card\">\r\n                  <span class=\"value\">\r\n                    <i class=\"icons\" (click)=\"remove('groupReviewer', group)\"\r\n                      >&#xe90d;</i\r\n                    >\r\n                    {{ group.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    </div>\r\n  </div>\r\n\r\n  <!-- Overseer -->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    *ngIf=\"moreOptions?.OVERSEER\"\r\n    [attr.id]=\"'OVERSEER'\"\r\n    [class.active]=\"\r\n      activeSelector === 'overseerNotify' || activeSelector === 'overseer'\r\n    \"\r\n    [class.disabled]=\"\r\n      activeSelector &&\r\n      !['overseerNotify', 'overseerNotify'].includes(activeSelector) &&\r\n      sideSelectorElements.includes(activeSelector)\r\n    \"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"false\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/oversight.svg\"\r\n        alt=\"\"\r\n        *ngIf=\"\r\n          (responsibilityForm?.overseers?.list?.length == 0 &&\r\n            responsibilityForm?.overseers?.notifyList?.length == 0) ||\r\n          activeSelector === 'overseerNotify' ||\r\n          activeSelector === 'overseer'\r\n        \"\r\n      />\r\n      <svg\r\n        class=\"checkIcon\"\r\n        *ngIf=\"\r\n          (responsibilityForm?.overseers?.list?.length > 0 ||\r\n            responsibilityForm?.overseers?.notifyList?.length > 0) &&\r\n          !(\r\n            activeSelector === 'overseerNotify' || activeSelector === 'overseer'\r\n          )\r\n        \"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\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=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\">Oversight</label>\r\n        <div\r\n          class=\"select\"\r\n          *ngIf=\"\r\n            (responsibilityForm?.overseers?.list?.length == 0 &&\r\n              !featureFlag_groups) ||\r\n            (responsibilityForm?.overseers?.list?.length == 0 &&\r\n              responsibilityForm?.overseersGroups?.list?.length == 0 &&\r\n              featureFlag_groups)\r\n          \"\r\n        >\r\n          <input\r\n            type=\"text\"\r\n            (click)=\"activateSelector('overseer', true)\"\r\n            placeholder=\"Who should have oversight of the responsibility?\"\r\n            readonly\r\n          />\r\n        </div>\r\n        <div\r\n          class=\"selected\"\r\n          *ngIf=\"\r\n            (responsibilityForm?.overseers?.list?.length > 0 &&\r\n              !featureFlag_groups) ||\r\n            ((responsibilityForm?.overseers?.list?.length > 0 ||\r\n              responsibilityForm?.overseersGroups?.list?.length > 0) &&\r\n              featureFlag_groups)\r\n          \"\r\n        >\r\n          <div\r\n            class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n            *ngIf=\"!featureFlag_groups\"\r\n          >\r\n            <ng-container\r\n              *ngFor=\"\r\n                let overseer of responsibilityForm?.overseers?.list?.slice(0, 1)\r\n              \"\r\n            >\r\n              <i\r\n                class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                (click)=\"remove('overseer', overseer)\"\r\n                >&#xe9ae;</i\r\n              >\r\n              <span\r\n                class=\"chipName vx-fs-11 vx-label-txt\"\r\n                [appTooltip]=\"overseer.member_name\"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n                >{{ overseer.member_name }}</span\r\n              >\r\n            </ng-container>\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\r\n              (click)=\"overseers.popover()\"\r\n              placement=\"right\"\r\n              *ngIf=\"responsibilityForm?.overseers?.list?.length > 1\"\r\n            >\r\n              +{{ responsibilityForm?.overseers?.list?.slice(1).length }}\r\n            </button>\r\n          </div>\r\n\r\n          <!-- <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.overseers?.list?.length>1\" [class.plus]=\"responsibilityForm?.overseers?.list?.length>2\" *ngIf=\"!featureFlag_groups\" >\r\n                      <span class=\"chip\" *ngFor=\"let overseer of responsibilityForm?.overseers?.list?.slice(0,2)\"><i class=\"icons\" (click)=\"remove('overseer',overseer)\">&#xe90d;</i> {{overseer.member_name}}</span>\r\n                      <button class=\"count\" *ngIf=\"responsibilityForm?.overseers?.list?.length > 2\" type=\"button\" appPopover (click)=\"overseers.popover()\" placement=\"right\">+{{responsibilityForm?.overseers?.list?.slice(2).length}}</button>\r\n                  </div> -->\r\n\r\n          <div class=\"vx-d-flex vx-align-center\" *ngIf=\"featureFlag_groups\">\r\n            <div\r\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n              *ngIf=\"responsibilityForm?.overseers?.list.length > 0\"\r\n            >\r\n              <i\r\n                class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                (click)=\"\r\n                  remove('overseer', responsibilityForm?.overseers?.list[0])\r\n                \"\r\n                >&#xe9ae;</i\r\n              >\r\n              <span\r\n                class=\"chipName vx-fs-11 vx-label-txt\"\r\n                [appTooltip]=\"\r\n                  responsibilityForm?.overseers?.list[0]?.employee_name\r\n                \"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n                >{{\r\n                  responsibilityForm?.overseers?.list[0]?.employee_name\r\n                }}</span\r\n              >\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 greenBg\"\r\n                appPopover\r\n                (click)=\"overseerUser.popover()\"\r\n                placement=\"right\"\r\n                *ngIf=\"responsibilityForm?.overseers?.list?.length > 1\"\r\n              >\r\n                +{{ responsibilityForm?.overseers?.list?.length - 1 }}\r\n              </button>\r\n            </div>\r\n            <span\r\n              class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\r\n              *ngIf=\"\r\n                responsibilityForm?.overseers?.list.length > 0 &&\r\n                responsibilityForm?.overseersGroups?.list?.length > 0\r\n              \"\r\n              >&</span\r\n            >\r\n            <div\r\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n              *ngIf=\"responsibilityForm?.overseersGroups?.list?.length > 0\"\r\n            >\r\n              <i\r\n                class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                (click)=\"\r\n                  remove(\r\n                    'overseerGroup',\r\n                    responsibilityForm?.overseersGroups?.list[0]\r\n                  )\r\n                \"\r\n                >&#xe9ae;</i\r\n              >\r\n              <span\r\n                class=\"chipName vx-fs-11 vx-label-txt\"\r\n                [appTooltip]=\"\r\n                  responsibilityForm?.overseersGroups?.list[0].group_name\r\n                \"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n                >{{\r\n                  responsibilityForm?.overseersGroups?.list[0].group_name\r\n                }}</span\r\n              >\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\r\n                (click)=\"overseerGroup.popover()\"\r\n                placement=\"right\"\r\n                *ngIf=\"responsibilityForm?.overseersGroups?.list?.length > 1\"\r\n              >\r\n                +{{ responsibilityForm?.overseersGroups?.list?.length - 1 }}\r\n              </button>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- <div class=\"chip-container\" *ngIf=\"featureFlag_groups\">\r\n                      <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.overseers?.list.length > 0\" >\r\n                          <i class=\"icons cross vx-mr-1\" (click)=\"remove('overseer',responsibilityForm?.overseers?.list[0])\">&#xe90d;</i>\r\n                          <span class=\"chip\" [appTooltip]=\"responsibilityForm?.overseers?.list[0]?.employee_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\">{{responsibilityForm?.overseers?.list[0]?.employee_name}}</span></span>\r\n                          <button *ngIf=\"responsibilityForm?.overseers?.list?.length > 1\" class=\"count user\" appPopover (click)=\"overseerUser.popover()\" placement=\"left\"> +{{responsibilityForm?.overseers?.list?.length -1}}</button>\r\n                      </div>\r\n                      <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"  *ngIf=\"responsibilityForm?.overseers?.list.length > 0 && responsibilityForm?.overseersGroups?.list?.length > 0\" >&</span>\r\n                      <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.overseersGroups?.list?.length > 0 \" >\r\n                          <i class=\"icons cross vx-mr-1\" (click)=\"remove('overseerGroup',responsibilityForm?.overseersGroups?.list[0])\">&#xe90d;</i>\r\n                          <span class=\"chip\" [appTooltip]=\"responsibilityForm?.overseersGroups?.list[0].group_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\"  >{{responsibilityForm?.overseersGroups?.list[0].group_name}}</span></span>\r\n                          <button *ngIf=\"responsibilityForm?.overseersGroups?.list?.length > 1\" class=\"count\" appPopover (click)=\"overseerGroup.popover()\" placement=\"right\">+{{responsibilityForm?.overseersGroups?.list?.length -1}}</button>\r\n                      </div>\r\n                  </div> -->\r\n          <button\r\n            *ngIf=\"activeSelector !== 'overseer'\"\r\n            class=\"edit\"\r\n            type=\"button\"\r\n            (click)=\"activateSelector('overseer', true)\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i> Edit\r\n          </button>\r\n        </div>\r\n\r\n        <div\r\n          class=\"select\"\r\n          *ngIf=\"\r\n            (responsibilityForm?.overseers?.notifyList?.length == 0 &&\r\n              !featureFlag_groups) ||\r\n            (responsibilityForm?.overseers?.notifyList?.length == 0 &&\r\n              responsibilityForm?.overseersGroups?.notifyList?.length == 0 &&\r\n              featureFlag_groups)\r\n          \"\r\n        >\r\n          <input\r\n            type=\"text\"\r\n            (click)=\"activateSelector('overseerNotify', true)\"\r\n            placeholder=\"Who should be notified if the responsibility is not complet...\"\r\n            readonly\r\n            [appTooltip]=\"\r\n              'Who should be notified if the responsibility is not completed?'\r\n            \"\r\n            placement=\"bottom\"\r\n            delay=\"0\"\r\n            [tooltipMandatory]=\"true\"\r\n          />\r\n        </div>\r\n        <div\r\n          class=\"selected\"\r\n          *ngIf=\"\r\n            (responsibilityForm?.overseers?.notifyList?.length > 0 &&\r\n              !featureFlag_groups) ||\r\n            ((responsibilityForm?.overseers?.notifyList?.length > 0 ||\r\n              responsibilityForm?.overseersGroups?.notifyList?.length > 0) &&\r\n              featureFlag_groups)\r\n          \"\r\n        >\r\n          <div\r\n            class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n            *ngIf=\"!featureFlag_groups\"\r\n          >\r\n            <ng-container\r\n              *ngFor=\"\r\n                let overseer of responsibilityForm?.overseers?.notifyList?.slice(\r\n                  0,\r\n                  1\r\n                )\r\n              \"\r\n            >\r\n              <i\r\n                class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                (click)=\"remove('overseerNotifyList', overseer)\"\r\n                >&#xe9ae;</i\r\n              >\r\n              <span\r\n                class=\"chipName vx-fs-11 vx-label-txt\"\r\n                [appTooltip]=\"overseer.member_name\"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n                >{{ overseer.member_name }}</span\r\n              >\r\n            </ng-container>\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\r\n              (click)=\"notify.popover()\"\r\n              placement=\"right\"\r\n              *ngIf=\"responsibilityForm?.overseers?.notifyList?.length > 1\"\r\n            >\r\n              +{{ responsibilityForm?.overseers?.notifyList?.slice(1).length }}\r\n            </button>\r\n          </div>\r\n\r\n          <!-- <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.overseers?.notifyList?.length>1\" [class.plus]=\"responsibilityForm?.overseers?.notifyList?.length>2\" *ngIf=\"!featureFlag_groups\">\r\n                      <span class=\"chip\" *ngFor=\"let overseer of responsibilityForm?.overseers?.notifyList?.slice(0,2)\"><i class=\"icons\" (click)=\"remove('overseerNotifyList',overseer)\">&#xe90d;</i> {{overseer.member_name}}</span>\r\n                      <button class=\"count\" *ngIf=\"responsibilityForm?.overseers?.notifyList?.length > 2\" type=\"button\" appPopover (click)=\"notify.popover()\" placement=\"right\">+{{responsibilityForm?.overseers?.notifyList?.slice(2).length}}</button>\r\n                  </div> -->\r\n\r\n          <div class=\"vx-d-flex vx-align-center\">\r\n            <div\r\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n              *ngIf=\"responsibilityForm?.overseers?.notifyList.length > 0\"\r\n            >\r\n              <i\r\n                class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                (click)=\"\r\n                  remove(\r\n                    'overseerNotifyList',\r\n                    responsibilityForm?.overseers?.notifyList[0]\r\n                  )\r\n                \"\r\n                >&#xe9ae;</i\r\n              >\r\n              <span\r\n                class=\"chipName vx-fs-11 vx-label-txt\"\r\n                [appTooltip]=\"\r\n                  responsibilityForm?.overseers?.notifyList[0]?.employee_name\r\n                \"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n                >{{\r\n                  responsibilityForm?.overseers?.notifyList[0]?.employee_name\r\n                }}</span\r\n              >\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 greenBg\"\r\n                appPopover\r\n                (click)=\"notifyUser.popover()\"\r\n                placement=\"right\"\r\n                *ngIf=\"responsibilityForm?.overseers?.notifyList?.length > 1\"\r\n              >\r\n                +{{ responsibilityForm?.overseers?.notifyList?.length - 1 }}\r\n              </button>\r\n            </div>\r\n            <span\r\n              class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\r\n              *ngIf=\"\r\n                responsibilityForm?.overseers?.notifyList.length > 0 &&\r\n                responsibilityForm?.overseersGroups?.notifyList?.length > 0\r\n              \"\r\n              >&</span\r\n            >\r\n            <div\r\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n              *ngIf=\"\r\n                responsibilityForm?.overseersGroups?.notifyList?.length > 0\r\n              \"\r\n            >\r\n              <i\r\n                class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                (click)=\"\r\n                  remove(\r\n                    'overseerGroupNotifyList',\r\n                    responsibilityForm?.overseersGroups?.notifyList[0]\r\n                  )\r\n                \"\r\n                >&#xe9ae;</i\r\n              >\r\n              <span\r\n                class=\"chipName vx-fs-11 vx-label-txt\"\r\n                [appTooltip]=\"\r\n                  responsibilityForm?.overseersGroups?.notifyList[0]?.group_name\r\n                \"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n                >{{\r\n                  responsibilityForm?.overseersGroups?.notifyList[0]?.group_name\r\n                }}</span\r\n              >\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\r\n                (click)=\"notifyGroup.popover()\"\r\n                placement=\"right\"\r\n                *ngIf=\"\r\n                  responsibilityForm?.overseersGroups?.notifyList?.length > 1\r\n                \"\r\n              >\r\n                +{{\r\n                  responsibilityForm?.overseersGroups?.notifyList?.length - 1\r\n                }}\r\n              </button>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- <div class=\"chip-container\" *ngIf=\"featureFlag_groups\">\r\n                      <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.overseers?.notifyList.length > 0\">\r\n                          <i class=\"icons cross vx-mr-1\" (click)=\"remove('overseerNotifyList',responsibilityForm?.overseers?.notifyList[0])\">&#xe90d;</i>\r\n                          <span class=\"chip\" [appTooltip]=\"responsibilityForm?.overseers?.notifyList[0]?.employee_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\">{{responsibilityForm?.overseers?.notifyList[0]?.employee_name}}</span></span>\r\n                          <button *ngIf=\"responsibilityForm?.overseers?.notifyList?.length > 1\" class=\"count user\" appPopover (click)=\"notifyUser.popover()\" placement=\"left\"> +{{responsibilityForm?.overseers?.notifyList?.length - 1}}</button>\r\n                      </div>\r\n                      <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"  *ngIf=\"responsibilityForm?.overseers?.notifyList.length > 0 && responsibilityForm?.overseersGroups?.notifyList?.length > 0\" >&</span>\r\n                      <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.overseersGroups?.notifyList?.length > 0 \" >\r\n                          <i class=\"icons cross vx-mr-1\" (click)=\"remove('overseerGroupNotifyList',responsibilityForm?.overseersGroups?.notifyList[0])\">&#xe90d;</i>\r\n                          <span class=\"chip\" [appTooltip]=\"responsibilityForm?.overseersGroups?.notifyList[0]?.group_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\"  >{{responsibilityForm?.overseersGroups?.notifyList[0]?.group_name}}</span></span>\r\n                          <button *ngIf=\"responsibilityForm?.overseersGroups?.notifyList?.length > 1\" class=\"count\" appPopover (click)=\"notifyGroup.popover()\" placement=\"right\">+{{responsibilityForm?.overseersGroups?.notifyList?.length - 1}}</button>\r\n                      </div>\r\n                  </div> -->\r\n          <button\r\n            *ngIf=\"activeSelector !== 'overseerNotify'\"\r\n            class=\"edit\"\r\n            type=\"button\"\r\n            (click)=\"activateSelector('overseerNotify', true)\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i> Edit\r\n          </button>\r\n        </div>\r\n        <app-popover #overseers [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ul class=\"action-item\">\r\n              <li\r\n                *ngFor=\"\r\n                  let overseer of responsibilityForm?.overseers?.list\r\n                    | slice : 1;\r\n                  let j = index\r\n                \"\r\n              >\r\n                <div class=\"avatar-card\">\r\n                  <span class=\"value\">\r\n                    <i class=\"icons\" (click)=\"remove('overseer', overseer)\"\r\n                      >&#xe90d;</i\r\n                    >\r\n                    {{ overseer?.member_name }}\r\n                  </span>\r\n                </div>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n        </app-popover>\r\n        <app-popover #overseerUser [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ul class=\"action-item\">\r\n              <li\r\n                *ngFor=\"\r\n                  let overseers of responsibilityForm?.overseers?.list\r\n                    | slice : 1;\r\n                  let j = index\r\n                \"\r\n              >\r\n                <div class=\"avatar-card\">\r\n                  <span class=\"value\">\r\n                    <i class=\"icons\" (click)=\"remove('overseer', overseers)\"\r\n                      >&#xe90d;</i\r\n                    >\r\n                    {{ overseers?.member_name }}\r\n                  </span>\r\n                </div>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n        </app-popover>\r\n        <app-popover #overseerGroup [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ul class=\"action-item\">\r\n              <li\r\n                *ngFor=\"\r\n                  let overseer of responsibilityForm?.overseersGroups?.list\r\n                    | slice : 1;\r\n                  let i = index\r\n                \"\r\n              >\r\n                <div class=\"avatar-card\">\r\n                  <span class=\"value\">\r\n                    <i class=\"icons\" (click)=\"remove('overseerGroup', overseer)\"\r\n                      >&#xe90d;</i\r\n                    >\r\n                    {{ overseer?.group_name }}\r\n                  </span>\r\n                </div>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n        </app-popover>\r\n        <app-popover #notify [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ul class=\"action-item\">\r\n              <li\r\n                *ngFor=\"\r\n                  let overseer of responsibilityForm?.overseers?.notifyList\r\n                    | slice : 1;\r\n                  let j = index\r\n                \"\r\n              >\r\n                <div class=\"avatar-card\">\r\n                  <span class=\"value\">\r\n                    <i\r\n                      class=\"icons\"\r\n                      (click)=\"remove('overseerNotifyList', overseer)\"\r\n                      >&#xe90d;</i\r\n                    >\r\n                    {{ overseer?.member_name }}\r\n                  </span>\r\n                </div>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n        </app-popover>\r\n        <app-popover #notifyUser [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ul class=\"action-item\">\r\n              <li\r\n                *ngFor=\"\r\n                  let overseer of responsibilityForm?.overseers?.notifyList\r\n                    | slice : 1;\r\n                  let j = index\r\n                \"\r\n              >\r\n                <div class=\"avatar-card\">\r\n                  <span class=\"value\">\r\n                    <i\r\n                      class=\"icons\"\r\n                      (click)=\"remove('overseerNotifyList', overseer)\"\r\n                      >&#xe90d;</i\r\n                    >\r\n                    {{ overseer?.member_name }}\r\n                  </span>\r\n                </div>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n        </app-popover>\r\n        <app-popover #notifyGroup [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ul class=\"action-item\">\r\n              <li\r\n                *ngFor=\"\r\n                  let group of responsibilityForm?.overseersGroups?.notifyList\r\n                    | slice : 1;\r\n                  let i = index\r\n                \"\r\n              >\r\n                <div class=\"avatar-card\">\r\n                  <span class=\"value\">\r\n                    <i\r\n                      class=\"icons\"\r\n                      (click)=\"remove('overseerGroupNotifyList', group)\"\r\n                      >&#xe90d;</i\r\n                    >\r\n                    {{ group?.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    </div>\r\n  </div>\r\n\r\n  <!-- Assurance -->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    *ngIf=\"moreOptions?.ASSURANCE\"\r\n    [attr.id]=\"'ASSURANCE'\"\r\n    [class.active]=\"activeSelector === 'assurance'\"\r\n    [class.disabled]=\"\r\n      activeSelector &&\r\n      activeSelector !== 'assurance' &&\r\n      sideSelectorElements.includes(activeSelector)\r\n    \"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"false\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/reviewer.svg\"\r\n        alt=\"\"\r\n        *ngIf=\"\r\n          responsibilityForm?.assuranceList?.length == 0 ||\r\n          activeSelector === 'assurance'\r\n        \"\r\n      />\r\n\r\n      <svg\r\n        *ngIf=\"\r\n          responsibilityForm?.assuranceList?.length > 0 &&\r\n          activeSelector !== 'assurance'\r\n        \"\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 class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\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=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\">Assurance</label>\r\n        <div\r\n          class=\"select\"\r\n          *ngIf=\"responsibilityForm?.assuranceList?.length == 0\"\r\n        >\r\n          <div\r\n            class=\"custom-input\"\r\n            (click)=\"activateSelector('assurance', true)\"\r\n            aria-placeholder=\"Select the test plan categories that you would like to add this responsibility to.\"\r\n          ></div>\r\n        </div>\r\n        <div\r\n          class=\"selected\"\r\n          *ngIf=\"responsibilityForm?.assuranceList?.length > 0\"\r\n        >\r\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n            <ng-container\r\n              *ngFor=\"\r\n                let assurance of responsibilityForm?.assuranceList?.slice(0, 1)\r\n              \"\r\n            >\r\n              <i\r\n                class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                (click)=\"remove('assurance', assurance)\"\r\n                >&#xe9ae;</i\r\n              >\r\n              <span\r\n                class=\"chipName vx-fs-11 vx-label-txt\"\r\n                [appTooltip]=\"assurance.category_name\"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n                >{{ assurance.category_name }}</span\r\n              >\r\n            </ng-container>\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\r\n              (click)=\"assurance.popover()\"\r\n              placement=\"right\"\r\n              *ngIf=\"responsibilityForm?.assuranceList?.length > 1\"\r\n            >\r\n              +{{ responsibilityForm?.assuranceList?.slice(1).length }}\r\n            </button>\r\n          </div>\r\n\r\n          <button\r\n            *ngIf=\"activeSelector !== 'assurance'\"\r\n            class=\"edit\"\r\n            type=\"button\"\r\n            (click)=\"activateSelector('assurance', true)\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i> Edit\r\n          </button>\r\n        </div>\r\n        <app-popover #assurance [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ul class=\"action-item\">\r\n              <li\r\n                *ngFor=\"\r\n                  let assurance of responsibilityForm?.assuranceList\r\n                    | slice : 1;\r\n                  let j = index\r\n                \"\r\n              >\r\n                <div class=\"avatar-card\">\r\n                  <span class=\"value\">\r\n                    <i class=\"icons\" (click)=\"remove('assurance', assurance)\"\r\n                      >&#xe90d;</i\r\n                    >\r\n                    {{ assurance.category_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    </div>\r\n  </div>\r\n\r\n  <!-- Requires Audit -->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    *ngIf=\"moreOptions?.REQUIRES_AUDIT && responsibilityForm.rc.length > 0\"\r\n    [attr.id]=\"'REQUIRES_AUDIT'\"\r\n    [class.active]=\"activeSelector === 'requires_audit'\"\r\n    [class.disabled]=\"\r\n      activeSelector &&\r\n      activeSelector !== 'requires_audit' &&\r\n      sideSelectorElements.includes(activeSelector)\r\n    \"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"false\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/audit.svg\"\r\n        alt=\"\"\r\n        *ngIf=\"\r\n          responsibilityForm?.requiresAuditList?.length == 0 ||\r\n          activeSelector === 'requires_audit'\r\n        \"\r\n      />\r\n\r\n      <svg\r\n        *ngIf=\"\r\n          responsibilityForm?.requiresAuditList?.length > 0 &&\r\n          activeSelector !== 'requires_audit'\r\n        \"\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 class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\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=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\">REQUIRES AUDIT?</label>\r\n        <div\r\n          class=\"select\"\r\n          *ngIf=\"responsibilityForm?.requiresAuditList?.length == 0\"\r\n        >\r\n          <input\r\n            type=\"text\"\r\n            placeholder=\"If yes, select an Audit Category.\"\r\n            readonly\r\n            (click)=\"activateSelector('requires_audit', true)\"\r\n          />\r\n        </div>\r\n        <div\r\n          class=\"selected\"\r\n          *ngIf=\"responsibilityForm?.requiresAuditList?.length > 0\"\r\n        >\r\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n            <i\r\n              class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n              (click)=\"remove('requires_audit', overseer)\"\r\n              >&#xe9ae;</i\r\n            >\r\n            <span\r\n              class=\"chipName vx-fs-11 vx-label-txt\"\r\n              [appTooltip]=\"\r\n                responsibilityForm?.requiresAuditList[0]?.category_name\r\n              \"\r\n              placement=\"bottom-left\"\r\n              delay=\"0\"\r\n              type=\"black\"\r\n              [tooltipMandatory]=\"false\"\r\n              >{{\r\n                responsibilityForm?.requiresAuditList[0]?.category_name\r\n              }}</span\r\n            >\r\n          </div>\r\n\r\n          <button\r\n            class=\"edit\"\r\n            type=\"button\"\r\n            (click)=\"activateSelector('requires_audit', true)\"\r\n          >\r\n            <i class=\"icons\">&#xe90c;</i> Edit\r\n          </button>\r\n          <!-- class=\"icons\">&#xe9ba;</i>\r\n                      Edit</button> -->\r\n        </div>\r\n        <ng-container *ngIf=\"responsibilityForm?.requiresAuditList?.length\">\r\n          <label class=\"vx-control-panel vx-mt-8\">\r\n            SAMPLE SIZE\r\n            <app-cs-switch\r\n              [(ngValue)]=\"isSample\"\r\n              (ngValueChange)=\"switchEnable($event)\"\r\n            ></app-cs-switch>\r\n          </label>\r\n          <div class=\"sample-part\" [class.disabled]=\"!isSample\">\r\n            <app-cs-radio\r\n              value=\"0\"\r\n              class=\"sample-radio\"\r\n              (click)=\"selectedSampleData(0)\"\r\n              [checked]=\"selectedSample === 0\"\r\n            >\r\n              <div class=\"name\">COUNT</div>\r\n              <input\r\n                type=\"number\"\r\n                placeholder=\"--\"\r\n                (keypress)=\"checkInputValue($event)\"\r\n                [(ngModel)]=\"sampleValue\"\r\n              />\r\n            </app-cs-radio>\r\n            <div class=\"or\">OR</div>\r\n            <app-cs-radio\r\n              value=\"1\"\r\n              class=\"sample-radio\"\r\n              (click)=\"selectedSampleData(1)\"\r\n              [checked]=\"selectedSample === 1\"\r\n            >\r\n              <div class=\"name\">PERCENTAGE</div>\r\n              <input\r\n                type=\"number\"\r\n                (keypress)=\"checkInputValue($event)\"\r\n                [(ngModel)]=\"samplePercentage\"\r\n                placeholder=\"--\"\r\n              />\r\n            </app-cs-radio>\r\n          </div>\r\n          <label class=\"vx-control-panel vx-mt-8\"\r\n            >SET A REMINDER IF THE AUDIT PLAN IS NOT CREATED.</label\r\n          >\r\n          <div class=\"reminder-part\">\r\n            Send reminder every\r\n            <input\r\n              type=\"number\"\r\n              value=\"2\"\r\n              [(ngModel)]=\"sendAuditRemindersValue\"\r\n            />\r\n            Day by\r\n            <div class=\"picker-group\">\r\n              <input\r\n                class=\"time\"\r\n                aria-label=\"12hr format\"\r\n                [(ngModel)]=\"auditTime\"\r\n                [ngxTimepicker]=\"dailyTime\"\r\n                placeholder=\"auditTime.toUpperCase()\"\r\n                type=\"text\"\r\n                [min]=\"currentTime\"\r\n                readonly\r\n              />\r\n              <i class=\"icons\">&#xe955;</i>\r\n              <ngx-material-timepicker #dailyTime [defaultTime]=\"auditTime\">\r\n              </ngx-material-timepicker>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Link of GRC objects -->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    *ngIf=\"moreOptions?.GRC_OBJECTS && responsibilityForm.rc.length > 0\"\r\n    [attr.id]=\"'GRC_OBJECTS'\"\r\n    [class.active]=\"activeSelector === 'GRC_OBJECTS'\"\r\n    [class.disabled]=\"\r\n      activeSelector &&\r\n      activeSelector !== 'GRC_OBJECTS' &&\r\n      sideSelectorElements.includes(activeSelector)\r\n    \"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"false\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/audit.svg\"\r\n        alt=\"\"\r\n        *ngIf=\"\r\n          responsibilityForm?.selectedGRCObjects?.length == 0 ||\r\n          activeSelector === 'GRC_OBJECTS'\r\n        \"\r\n      />\r\n\r\n      <svg\r\n        *ngIf=\"\r\n          responsibilityForm?.selectedGRCObjects?.length > 0 &&\r\n          activeSelector !== 'GRC_OBJECTS'\r\n        \"\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 class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\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=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\">LINK GRC OBJECT(S)</label>\r\n        <div\r\n          class=\"select\"\r\n          *ngIf=\"responsibilityForm?.selectedGRCObjects?.length === 0\"\r\n        >\r\n          <input\r\n            type=\"text\"\r\n            placeholder=\"Select GRC object(s) to link with this responsibility\"\r\n            readonly\r\n            (click)=\"activateSelector('GRC_OBJECTS', true)\"\r\n          />\r\n        </div>\r\n        <ng-container *ngIf=\"responsibilityForm?.selectedGRCObjects?.length\">\r\n          <ng-container\r\n            *ngFor=\"let selectedGRC of GRC_TYPE_ARRAY; let i = index\"\r\n          >\r\n            <div\r\n              *ngIf=\"grcDataWithTypes[selectedGRC]?.length\"\r\n              class=\"selected vx-mb-2\"\r\n            >\r\n              <div\r\n                class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n              >\r\n                <ng-container\r\n                  *ngFor=\"let grc of grcDataWithTypes[selectedGRC]?.slice(0, 1)\"\r\n                >\r\n                  <i\r\n                    class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                    (click)=\"remove('GRC_OBJECTS', grc, 0)\"\r\n                    >&#xe9ae;</i\r\n                  >\r\n                  <div\r\n                    class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\r\n                  >\r\n                    {{ selectedGRC | titlecase }}\r\n                  </div>\r\n\r\n                  <span\r\n                    class=\"chipName vx-fs-11 vx-label-txt\"\r\n                    [appTooltip]=\"grc?.name\"\r\n                    placement=\"bottom-left\"\r\n                    delay=\"0\"\r\n                    type=\"black\"\r\n                    [tooltipMandatory]=\"false\"\r\n                    >{{ grc?.name }}</span\r\n                  >\r\n                </ng-container>\r\n\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\r\n                  (click)=\"popoverGRC.popover()\"\r\n                  placement=\"left\"\r\n                  *ngIf=\"grcDataWithTypes[selectedGRC]?.length > 1\"\r\n                >\r\n                  +{{ grcDataWithTypes[selectedGRC].length - 1 }}\r\n                </button>\r\n              </div>\r\n\r\n              <button\r\n                *ngIf=\"activeSelector !== 'GRC'\"\r\n                class=\"edit\"\r\n                type=\"button\"\r\n                (click)=\"\r\n                  selectedGRCTab = grcDataWithTypes[selectedGRC][0]?.type;\r\n                  getOtherGRCObjects();\r\n                  activateSelector('GRC_OBJECTS', true)\r\n                \"\r\n              >\r\n                <i class=\"icons\">&#xe9ba;</i> Edit\r\n              </button>\r\n            </div>\r\n            <app-popover #popoverGRC [dontCloseonClick]=\"true\">\r\n              <div class=\"wf-action-list\">\r\n                <ul class=\"action-item\">\r\n                  <li\r\n                    *ngFor=\"\r\n                      let grc of grcDataWithTypes[selectedGRC] | slice : 1;\r\n                      let j = index\r\n                    \"\r\n                  >\r\n                    <div class=\"avatar-card\">\r\n                      <span class=\"value\">\r\n                        <i\r\n                          class=\"icons\"\r\n                          (click)=\"remove('GRC_OBJECTS', grc, j + 1)\"\r\n                          >&#xe90d;</i\r\n                        >\r\n                        {{ grc.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        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<app-users-radio-list\r\n  *ngIf=\"activeSelector === 'assignors'\"\r\n  [usersList]=\"assignorsList\"\r\n  [selectedUsers]=\"responsibilityForm.assignors.list\"\r\n  [itemEmailKey]=\"'member_email'\"\r\n  [userIdKey]=\"'member_id'\"\r\n  [itemNameKey]=\"'member_name'\"\r\n  (saveSelectedList)=\"saveSelectedList('assignors', $event)\"\r\n  (closeUsersList)=\"activeDeselector()\"\r\n  [loaded]=\"assignorsListLoaded\"\r\n>\r\n</app-users-radio-list>\r\n\r\n<ng-container *ngIf=\"activeSelector === 'assignees'\">\r\n  <app-group-users-list\r\n    *ngIf=\"\r\n      isEntrust || responsibilityForm?.assignees?.whoCanComplete === 'ANY_ONE'\r\n    \"\r\n    [openedFrom]=\"openedFrom\"\r\n    [usersList]=\"assigneesList\"\r\n    [fromResponsibility]=\"'Assignee'\"\r\n    [groupsList]=\"groupsList\"\r\n    [assigneeGroupsList]=\"groupAssigneeList\"\r\n    [selectedUsers]=\"responsibilityForm?.assignees?.list\"\r\n    [selectedGroups]=\"responsibilityForm?.assigneeGroups?.list\"\r\n    [userIdKey]=\"'my_member_id'\"\r\n    [groupIdKey]=\"'group_id'\"\r\n    [loader]=\"userListLoader || assignorsListLoader\"\r\n    (saveSelectedList)=\"saveSelectedList('assignees', $event)\"\r\n    (closeUsersList)=\"activeDeselector()\"\r\n    [groupsEnabled]=\"featureFlag_groups\"\r\n  >\r\n  </app-group-users-list>\r\n  <app-users-radio-list\r\n    *ngIf=\"\r\n      !isEntrust && responsibilityForm.assignees.whoCanComplete !== 'ANY_ONE'\r\n    \"\r\n    [itemEmailKey]=\"'employee_email'\"\r\n    [usersList]=\"assigneesList\"\r\n    [selectedUsers]=\"responsibilityForm.assignees.list\"\r\n    [userIdKey]=\"'employee_id'\"\r\n    [itemNameKey]=\"'employee_name'\"\r\n    [fromResponsibility]=\"'Assignee'\"\r\n    (saveSelectedList)=\"saveSelectedList('assignees', $event)\"\r\n    (closeUsersList)=\"activeDeselector()\"\r\n    [loaded]=\"assigneesListLoaded\"\r\n  >\r\n  </app-users-radio-list>\r\n</ng-container>\r\n\r\n<app-checkpoints\r\n  *ngIf=\"activeSelector === 'checkpoints'\"\r\n  [checkpointInstruction]=\"responsibilityForm?.checkpointInstruction\"\r\n  [checkpointData]=\"responsibilityForm?.checkpoints\"\r\n  (saveCheckPoint)=\"saveSelectedList('checkpoints', $event)\"\r\n  (closeCheckPoint)=\"activeDeselector()\"\r\n></app-checkpoints>\r\n<app-frequency-container\r\n  *ngIf=\"activeSelector === 'frequency'\"\r\n  [frequencyDetails]=\"frequencyDetails\"\r\n  [feature]=\"feature\"\r\n  (selectedFrequency)=\"frequencyData($event)\"\r\n  [mode]=\"'responsibility'\"\r\n  (closeFrequency)=\"activeDeselector()\"\r\n>\r\n</app-frequency-container>\r\n\r\n<app-responsibility-centers-list\r\n  *ngIf=\"activeSelector === 'rc'\"\r\n  [loaded]=\"rcListLoaded\"\r\n  [responsibilityCentersList]=\"responsibilityCentersList\"\r\n  [radioSelection]=\"\r\n    mode == 'EDIT' && responsibilityCenterType === 0 ? true : false\r\n  \"\r\n  [selectedResponsibilityCenters]=\"responsibilityForm.rc\"\r\n  [rcIdKey]=\"'item_id'\"\r\n  (saveSelectedList)=\"saveSelectedList('rc', $event)\"\r\n  (closeRcList)=\"activeDeselector()\"\r\n>\r\n</app-responsibility-centers-list>\r\n\r\n<app-category-multi-select\r\n  *ngIf=\"activeSelector === 'category'\"\r\n  [categoryList]=\"categories\"\r\n  [allCategories]=\"allCategories\"\r\n  [categoryIdKey]=\"'category_id'\"\r\n  [selectedCategories]=\"responsibilityForm.category\"\r\n  (saveSelectedCategory)=\"saveSelectedList('category', $event)\"\r\n  (closeCategoriesList)=\"activeDeselector()\"\r\n>\r\n</app-category-multi-select>\r\n\r\n<!-- [hideProgramsList]=\"(selectedProgram  && !(this.selectedProgram?.programType === 0 && this.selectedProgram?.name?.toLowerCase() === 'uncategorized' )) ? true : false\" -->\r\n<app-program-listing\r\n  *ngIf=\"activeSelector === 'program'\"\r\n  [feature]=\"feature\"\r\n  [programsList]=\"programsList\"\r\n  [selectedCategories]=\"responsibilityForm.category | refDisconnect\"\r\n  [selectedProgram]=\"responsibilityForm.program | refDisconnect\"\r\n  (saveSelectedProgram)=\"saveSelectedList('program', $event)\"\r\n  (closeEvent)=\"activeDeselector()\"\r\n  [linkedProgram]=\"responsibilityForm?.linkedProgram\"\r\n  [mode]=\"\r\n    this.selectedProgram?.programType === 0 &&\r\n    this.selectedProgram?.name?.toLowerCase() === 'uncategorized'\r\n      ? ''\r\n      : mode\r\n  \"\r\n  [openedFrom]=\"openedFrom\"\r\n  [responsibilityId]=\"responsibilityId\"\r\n></app-program-listing>\r\n\r\n<app-owner-list\r\n  *ngIf=\"activeSelector === 'reviewer' && !featureFlag_groups\"\r\n  [listHeading]=\"'Select a Reviewer'\"\r\n  [singularText]=\"'User selected'\"\r\n  [pluralText]=\"'Users selected'\"\r\n  [usersList]=\"allUsersList\"\r\n  [showWorkflow]=\"true\"\r\n  [selectedUsers]=\"responsibilityForm.reviewers.list\"\r\n  [userIdKey]=\"'employee_id'\"\r\n  [itemEmailKey]=\"'employee_email'\"\r\n  [itemNameKey]=\"'member_name'\"\r\n  (saveSelectedList)=\"\r\n    saveSelectedList('reviewer', $event);\r\n    activateSelector('reviewerFrequency', true)\r\n  \"\r\n  (closeUsersList)=\"activeDeselector()\"\r\n  [mode]=\"mode\"\r\n  [fromResponsibility]=\"'Reviewer'\"\r\n  [reviewerWorkflowType]=\"\r\n    responsibilityForm?.reviewers?.sequentialWorkflow\r\n      ? 'SEQUENTIAL'\r\n      : 'ANY REVIEWER CAN MARK THIS AS REVIEWED'\r\n  \"\r\n  (reviewerWorkflowTypeChange)=\"reviewerTypeChange($event)\"\r\n>\r\n</app-owner-list>\r\n<user-group-list\r\n  *ngIf=\"activeSelector === 'reviewer' && featureFlag_groups\"\r\n  [selectedReviewer]=\"true\"\r\n  [userlist]=\"reviewerMemberIdsList\"\r\n  [groupEnabled]=\"true\"\r\n  [groupList]=\"groupReviewerList\"\r\n  [selectedGroups]=\"responsibilityForm?.groupReviewers?.list\"\r\n  [selectedUsers]=\"responsibilityForm?.reviewers?.list\"\r\n  (cancel)=\"activeDeselector()\"\r\n  (save)=\"\r\n    saveSelectedList('reviewer', $event);\r\n    activateSelector('reviewerFrequency', true)\r\n  \"\r\n  [mode]=\"mode\"\r\n  [fromResponsibility]=\"'Reviewer'\"\r\n  [loading]=\"userListLoader || assignorsListLoader\"\r\n  (reviewerWorkflowTypeChange)=\"reviewerTypeChange($event)\"\r\n  [reviewerWorkflowType]=\"\r\n    responsibilityForm?.reviewers?.sequentialWorkflow\r\n      ? 'SEQUENTIAL'\r\n      : 'ANY REVIEWER CAN MARK THIS AS REVIEWED'\r\n  \"\r\n  [featureflag]=\"featureFlag_groups\"\r\n>\r\n</user-group-list>\r\n<app-owner-list\r\n  *ngIf=\"activeSelector === 'overseer' && !featureFlag_groups\"\r\n  [singularText]=\"'User selected'\"\r\n  [pluralText]=\"'Users selected'\"\r\n  [usersList]=\"allUsersList\"\r\n  [selectedUsers]=\"responsibilityForm.overseers.list\"\r\n  [userIdKey]=\"'employee_id'\"\r\n  [fromResponsibility]=\"'Overseer'\"\r\n  [itemNameKey]=\"'member_name'\"\r\n  (saveSelectedList)=\"saveSelectedList('overseer', $event)\"\r\n  (closeUsersList)=\"activeDeselector()\"\r\n  [itemEmailKey]=\"'employee_email'\"\r\n>\r\n</app-owner-list>\r\n<user-group-list\r\n  *ngIf=\"activeSelector === 'overseer' && featureFlag_groups\"\r\n  [groupEnabled]=\"true\"\r\n  [groupList]=\"groupOverseerList\"\r\n  [selectedGroups]=\"responsibilityForm?.overseersGroups?.list\"\r\n  [userlist]=\"overseersList\"\r\n  [selectedUsers]=\"responsibilityForm.overseers.list\"\r\n  [fromResponsibility]=\"'Overseer'\"\r\n  [loading]=\"userListLoader || assignorsListLoader\"\r\n  (save)=\"saveSelectedList('overseer', $event)\"\r\n  (cancel)=\"activeDeselector()\"\r\n  [featureflag]=\"featureFlag_groups\"\r\n>\r\n</user-group-list>\r\n\r\n<app-owner-list\r\n  *ngIf=\"activeSelector === 'overseerNotify' && !featureFlag_groups\"\r\n  [singularText]=\"'User selected'\"\r\n  [pluralText]=\"'Users selected'\"\r\n  [usersList]=\"allUsersList\"\r\n  [fromResponsibility]=\"'Overseer'\"\r\n  [selectedUsers]=\"responsibilityForm.overseers.notifyList\"\r\n  [userIdKey]=\"'employee_id'\"\r\n  [itemNameKey]=\"'member_name'\"\r\n  (saveSelectedList)=\"saveSelectedList('overseerNotify', $event)\"\r\n  (closeUsersList)=\"activeDeselector()\"\r\n  [itemEmailKey]=\"'employee_email'\"\r\n></app-owner-list>\r\n<user-group-list\r\n  *ngIf=\"activeSelector === 'overseerNotify' && featureFlag_groups\"\r\n  [userlist]=\"overseersList\"\r\n  [groupEnabled]=\"true\"\r\n  [groupList]=\"groupOverseerList\"\r\n  [selectedGroups]=\"responsibilityForm?.overseersGroups?.notifyList\"\r\n  [selectedUsers]=\"responsibilityForm.overseers.notifyList\"\r\n  [fromResponsibility]=\"'Overseer'\"\r\n  [loading]=\"userListLoader || assignorsListLoader\"\r\n  (save)=\"saveSelectedList('overseerNotify', $event)\"\r\n  (cancel)=\"activeDeselector()\"\r\n  [featureflag]=\"featureFlag_groups\"\r\n>\r\n</user-group-list>\r\n\r\n<app-owner-list\r\n  *ngIf=\"activeSelector === 'assurance'\"\r\n  [singularText]=\"'Test Category selected'\"\r\n  [pluralText]=\"'Test Categories selected'\"\r\n  [searchPlaceholder]=\"'Search Test Category...'\"\r\n  [listHeading]=\"'Select Test Categories'\"\r\n  [usersList]=\"assuranceCategoriesList\"\r\n  [noDataText]=\"'No Test Categories Found'\"\r\n  [selectedUsers]=\"responsibilityForm.assuranceList\"\r\n  [userIdKey]=\"'category_id'\"\r\n  [itemEmailKey]=\"'category_name'\"\r\n  [itemNameKey]=\"'category_name'\"\r\n  (saveSelectedList)=\"saveSelectedList('assurance', $event)\"\r\n  (closeUsersList)=\"activeDeselector()\"\r\n  [searchPlaceholder]=\"'Search Category'\"\r\n>\r\n</app-owner-list>\r\n\r\n<app-audit-category-list\r\n  *ngIf=\"activeSelector === 'requires_audit'\"\r\n  (closeList)=\"activeDeselector()\"\r\n  [auditCategory]=\"assuranceRequiresAuditList\"\r\n  (saveSelectedList)=\"saveSelectedList('requires_audit', $event)\"\r\n  [selectedData]=\"responsibilityForm?.requiresAuditList[0]\"\r\n></app-audit-category-list>\r\n\r\n<app-loader-inline *ngIf=\"(loader && this.mode === 'EDIT') || entrustLoader\"></app-loader-inline>\r\n<app-framework-list\r\n  *ngIf=\"activeSelector === 'framework'\"\r\n  (assignControl)=\"assignFromFramework($event)\"\r\n  [previousSelectedValues]=\"selectedFrameworkValues\"\r\n  (closeFramework)=\"activeDeselector()\"\r\n  (entrustFramework)=\"entrustFramework($event)\"\r\n></app-framework-list>\r\n\r\n<!-- risk-calculator here -->\r\n<app-risk-classification\r\n  *ngIf=\"activeSelector === 'riskCalculator'\"\r\n  [currentRiskValue]=\"responsibilityForm.riskClass\"\r\n  (saveList)=\"saveSelectedList('calculatedrisk', $event)\"\r\n  (closeList)=\"activeDeselector()\"\r\n>\r\n</app-risk-classification>\r\n\r\n<app-review-frequency\r\n  *ngIf=\"activeSelector === 'reviewerFrequency'\"\r\n  [reviewCompleteDays]=\"\r\n    responsibilityForm.reviewers.reviewFrequency.reviewCompleteDays\r\n  \"\r\n  [reviewNOtCompletedDays]=\"\r\n    responsibilityForm.reviewers.reviewFrequency.reviewNOtCompletedDays\r\n  \"\r\n  (saveReviewFrequency)=\"saveSelectedList('reviewFrequency', $event)\"\r\n  (closeReviewFrequency)=\"\r\n    activeDeselector();\r\n    activateSelector('reviewer', false);\r\n    responsibilityForm.reviewers.list = [];\r\n    responsibilityForm.groupReviewers.list = []\r\n  \"\r\n  (backToUserList)=\"activeDeselector(); activateSelector('reviewer', true)\"\r\n>\r\n</app-review-frequency>\r\n\r\n<app-assessment-list\r\n  *ngIf=\"isAssessment\"\r\n  [program_ids]=\"responsibilityForm.program[0]?._id\"\r\n  (cancelAssessment)=\"\r\n    isAssessment = false; activateSelector('isAssessment', false)\r\n  \"\r\n  [isEdit]=\"responsibilityForm?.assessment?.assessment_id ? true : false\"\r\n  [selectedAssessment]=\"responsibilityForm?.assessment\"\r\n  (onAssessmentSelect)=\"\r\n    onAssessmentSelect($event); activateSelector('isAssessment', false)\r\n  \"\r\n></app-assessment-list>\r\n\r\n<app-smiley-dialog-inline\r\n  *ngIf=\"showSmiley\"\r\n  [message]=\"smileyMessage\"\r\n  [actionButtons]=\"actionButtons\"\r\n  (action)=\"action($event)\"\r\n  (closeSmiley)=\"closeSmiley($event)\"\r\n></app-smiley-dialog-inline>\r\n\r\n<div class=\"import\" *ngIf=\"activeSelector === 'checkpoints-new'\">\r\n  <app-create-assessment-container\r\n    #editor\r\n    [openPortal]=\"'RESPONSIBILITY_CHECKPOINT'\"\r\n    (postAssessment)=\"postAssessment($event)\"\r\n    (setIsUploaded)=\"setIsUploaded($event)\"\r\n    [checkpointJSON]=\"responsibilityForm.new_checkpoints\"\r\n  >\r\n  </app-create-assessment-container>\r\n</div>\r\n\r\n<app-grc-object-list\r\n  *ngIf=\"activeSelector === 'GRC_OBJECTS'\"\r\n  [grcObject]=\"grcList\"\r\n  [selectedGRC]=\"responsibilityForm.selectedGRCObjects | refDisconnect\"\r\n  [loader]=\"grcLoader\"\r\n  [tableCard]=\"otherGRCCard\"\r\n  [selectedTab]=\"selectedGRCTab\"\r\n  [cardLoader]=\"grcTabLoader\"\r\n  (getOtherGRCObjects)=\"getOtherGRCObjects($event)\"\r\n  (saveOtherGRC)=\"saveSelectedList('GRC_OBJECTS', $event)\"\r\n  (closeOtherGRC)=\"activateSelector('GRC_OBJECTS', false)\"\r\n></app-grc-object-list>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::ng-deep .workflw-compliance{display:block;position:relative}::ng-deep .workflw-compliance vcomply-editor .editor-container{border-radius:4px}::ng-deep .workflw-compliance vcomply-editor .editor-container .editable-block{min-height:72px;padding:11px 15px;line-height:20px;font-size:14px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}@media not all and (min-resolution: .001dpcm){@supports (-webkit-appearance: none){::ng-deep .workflw-compliance vcomply-editor .editor-container .editable-block:before{opacity:.72}}}::ng-deep .workflw-compliance vcomply-editor .editor-container .editable-block ul{padding:0 0 0 10px;margin-top:0}::ng-deep .workflw-compliance vcomply-editor .editor-container .editable-block ul li{list-style:unset}::ng-deep .workflw-compliance vcomply-editor .editor-container .editable-block ol{padding:0 0 0 10px;margin-top:0}::ng-deep .workflw-compliance vcomply-editor .editor-container .editable-block ol li{list-style:decimal}::ng-deep .workflw-compliance vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .workflw-compliance vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:22px}::ng-deep .workflw-compliance 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 .workflw-compliance 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 .workflw-compliance .sample-part{display:flex;align-items:center;margin-bottom:4px}::ng-deep .workflw-compliance .sample-part .sample-radio{width:100%}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item{position:relative;width:100%}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item .radio{position:absolute;left:12px;top:12px}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item .value{border:1px solid #DBDBDB;border-radius:4px;height:40px;padding:8px 8px 8px 36px;margin:0;max-width:100%;width:100%;display:flex;align-items:center;justify-content:space-between;pointer-events:none}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item .value .name{color:#747576;font-size:11px;font-weight:500;text-transform:uppercase}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item .value input{border:1px solid #DCDCDC;background:#fff;border-radius:4px;height:24px;width:64px;text-align:center;padding:4px;color:#747576;font-size:13px}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item .value input:focus{outline:none;box-shadow:none}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item input:checked~svg{position:absolute;left:12px;top:12px}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item input:checked~.value{border:1px solid #34AA44;background:#eefcf0;pointer-events:auto}::ng-deep .workflw-compliance .sample-part .or{color:#161b2f;font-size:9px;font-weight:500;text-transform:uppercase;margin:0 10px}::ng-deep .workflw-compliance .sample-part.disabled{pointer-events:none}::ng-deep .workflw-compliance .sample-part.disabled .sample-radio .radio-item .value{background:#fbfbfb;border:1px solid #f1f1f1}::ng-deep .workflw-compliance .reminder-part{border:1px solid #DBDBDB;border-radius:4px;height:40px;padding:4px 12px;color:#747576;font-size:12px;display:flex;align-items:center}::ng-deep .workflw-compliance .reminder-part input{width:30px;border:none;border-radius:0;border-bottom:1px solid #DBDBDB;text-align:center;color:#747576;font-size:13px;font-weight:500;margin:0 4px}::ng-deep .workflw-compliance .reminder-part input:focus{outline:none!important;box-shadow:none!important}::ng-deep .workflw-compliance .reminder-part .picker-group{position:relative}::ng-deep .workflw-compliance .reminder-part .picker-group input{border:1px solid #F1F1F1!important;border-radius:4px!important;width:104px!important;height:28px!important;margin-left:8px!important;padding:6px 8px!important;cursor:pointer;color:#747576!important;font-size:12px!important;font-weight:500!important;text-align:left!important}::ng-deep .workflw-compliance .reminder-part .picker-group input:hover,::ng-deep .workflw-compliance .reminder-part .picker-group input:focus{outline:none!important;box-shadow:none!important}::ng-deep .workflw-compliance .reminder-part .picker-group i{color:#1e5dd3;position:absolute;top:6px;right:10px;font-size:16px}.assessment-text{color:#747576;font-size:11px;display:flex;align-items:center;padding:0 8px;margin:-16px 0 20px}.assessment-text i.alert-icon{color:#f2bf19;font-size:16px;margin-right:8px}.assessment-text strong{font-weight:600}.assessment-text button.remove-btn{background:transparent;border-radius:0;border:none;color:#1e5dd3;font-size:10px;font-weight:600;padding:0;margin:0}.import{position:fixed;inset:0 30px 0 0;z-index:-1;width:calc(100vw - 30px)}.wf-action-list ul.action-item li.multiple-program{background:#f8f8f8}.wf-action-list ul.action-item li.multiple-program .avatar-card{padding:2px 7.5px}.wf-action-list ul.action-item li.multiple-program .avatar-card span.value{color:#747576;font-size:11px;font-weight:600;width:unset}.primary-label{background:#7aa7f7;border-radius:2px;color:#fff;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 4px;line-height:12px;margin:0 4px}.edit-due-date{display:flex;align-items:baseline;justify-content:space-between}\n", "@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/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.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-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.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-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::-webkit-scrollbar-track{background-color:#f1f1f1;position:absolute}::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}button{font-family:Poppins,sans-serif}::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.withBtn:after{display:none}::ng-deep .selectBoxEnable.withBtn button.setBtn{background:transparent;border-radius:0;border:none;min-width:98px}::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 .chipName.full-width{max-width:25rem}::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 .workflowLavel{background:#f1f1f1;border-radius:.125rem;color:#042e7d;min-width:1rem;height:1rem}::ng-deep .reviewSelection{border-radius:.25rem;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep .reviewSelection:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectButton{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectButton:hover,::ng-deep .selectButton:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep button.createNewBtn{background:transparent;border-radius:0;border:none}::ng-deep .vx-form-group{display:block;position:relative;margin-bottom:20px}::ng-deep .vx-form-group:after{content:\"\";display:block;clear:both}::ng-deep .vx-form-group .select{position:relative}::ng-deep .vx-form-group .select:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#707070;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .vx-form-group .select input{cursor:pointer;padding-right:30px!important}::ng-deep .vx-form-group .select .custom-input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;outline:none;padding:3px 12px;line-height:16px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .vx-form-group .select .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:13px;width:94%;display:block;pointer-events:none;opacity:.8}::ng-deep .vx-form-group .select .custom-input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .vx-form-group .select .custom-input.frequency-custom-input{padding-right:108px;display:flex;align-items:center}::ng-deep .vx-form-group .select+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .select+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .select+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .select~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~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 .vx-form-group .select~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .select.button-sec:after{display:none}::ng-deep .vx-form-group .select.button-sec button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;position:absolute;top:12px;right:8px;padding:0;margin:0}::ng-deep .vx-form-group .select+.vx-control-panel{margin-top:8px}::ng-deep .vx-form-group .select+.selected{margin-top:8px}::ng-deep .vx-form-group .select.select{margin-top:8px}::ng-deep .vx-form-group .upload-format{border:1px solid #dbdbdb;border-radius:4px;padding:8px 12px;display:block}::ng-deep .vx-form-group .upload-format span.text{line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:block;margin-bottom:6px}::ng-deep .vx-form-group .upload-format .radio-group{display:flex}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio{display:inline-block}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;margin-left:8px}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio+app-cs-radio{margin-left:12px}::ng-deep .vx-form-group .upload-format~.upload-format{margin-top:4px}::ng-deep .vx-form-group .form-tab{display:flex;justify-content:flex-start}::ng-deep .vx-form-group .form-tab button{background:transparent;color:#161b2f;font-size:11px;line-height:16px;text-transform:uppercase;cursor:pointer;padding:8px 8px 8px 0;border:none;outline:none;font-weight:500}::ng-deep .vx-form-group .form-tab button:disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .form-tab button+button{padding:8px}::ng-deep .vx-form-group .form-tab button.active{color:#1e5dd3}::ng-deep .vx-form-group .tab-group{border:1px solid #dbdbdb;border-radius:4px;padding:0;display:block;position:relative;transition:all .2s ease-in-out}::ng-deep .vx-form-group .tab-group:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group .tab-group .upload-file{padding:16px 62px 16px 24px;display:flex;align-items:center;justify-content:space-between}::ng-deep .vx-form-group .tab-group .upload-file .image{width:80px}::ng-deep .vx-form-group .tab-group .upload-file .browse span{display:inline-block;font-size:12px;color:#747576;line-height:16px;padding:0 4px}::ng-deep .vx-form-group .tab-group .upload-file .browse .label{font-size:11px;color:#1e5dd3;line-height:16px;font-weight:600;text-transform:uppercase;margin:0;padding:0}::ng-deep .vx-form-group .tab-group .upload-file .browse .label input{opacity:0;position:absolute;margin:0;padding:0;inset:0;cursor:pointer;width:100%}::ng-deep .vx-form-group .tab-group.active{border-color:#1e5dd3}::ng-deep .vx-form-group .tab-group.uploaded{margin-top:4px}::ng-deep .vx-form-group .tab-group.uploaded .upload-file{padding:8px 0!important;text-align:center}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .image{display:none}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .browse{width:100%;text-align:center}::ng-deep .vx-form-group .tab-group+label.vx-form-group{margin-top:8px;margin-bottom:4px}::ng-deep .vx-form-group .file-list{background:#fbfbfb;border:1px solid #f1f1f1;border-radius:4px;padding:12px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;position:relative}::ng-deep .vx-form-group .file-list span.file-name{color:#747576;line-height:16px;font-size:11px;font-weight:400;cursor:pointer;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .vx-form-group .file-list .button-group{display:flex}::ng-deep .vx-form-group .file-list button{font-size:12px;color:#eb2424;cursor:pointer;display:flex;padding:0;border:none;outline:none;background:transparent}::ng-deep .vx-form-group .file-list button.edit{color:#1e5dd3}::ng-deep .vx-form-group .file-list button+button{margin-left:16px}::ng-deep .vx-form-group .file-list+.file-list{margin-top:4px}::ng-deep .vx-form-group .file-list .file-container{display:flex;justify-content:space-between;width:100%}::ng-deep .vx-form-group .file-list.policy{background:#fff}::ng-deep .vx-form-group .file-list cs-select{position:relative;margin-top:8px;width:100%}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group input.value{height:32px!important;font-size:13px!important}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group i{right:12px!important;top:12px!important}::ng-deep .vx-form-group .file-list app-line-loader{display:block;position:absolute;left:10px;right:10px;bottom:0}::ng-deep .vx-form-group label.vx-control-panel{color:#161b2f;font-size:11px;font-weight:500;line-height:16px;margin-bottom:8px;display:block;text-transform:uppercase;text-align:left}::ng-deep .vx-form-group label.vx-control-panel.custom-tag{font-size:10px}::ng-deep .vx-form-group label.vx-control-panel.vx-mt-8{margin-top:8px}::ng-deep .vx-form-group label.vx-control-panel span.required{color:#eb2424;font-size:14px;font-weight:500;position:relative;top:-2px}::ng-deep .vx-form-group label.vx-control-panel .button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;padding:0;margin:0}::ng-deep .vx-form-group label.vx-control-panel app-cs-switch{float:right;display:block}::ng-deep .vx-form-group label.vx-control-panel i{margin-left:8px;font-size:12px;color:#1e5dd3;cursor:pointer;position:relative;top:1px}::ng-deep .vx-form-group label.vx-control-panel i.depreciation-icon{color:#e4b700;font-size:16px;position:relative;top:3px}::ng-deep .vx-form-group label.vx-control-panel .checkpoint-version{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:10px;font-weight:600;line-height:14px;margin-left:4px;padding:0 2px}::ng-deep .vx-form-group input[type=text],::ng-deep .vx-form-group .input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;outline:none;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400}::ng-deep .vx-form-group input[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group input[type=text]:focus,::ng-deep .vx-form-group .input:focus,::ng-deep .vx-form-group input[type=text]:hover,::ng-deep .vx-form-group .input:hover{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group input[type=text].error,::ng-deep .vx-form-group .input.error{border-color:#eb2424;color:#eb2424;margin-bottom:4px}::ng-deep .vx-form-group input[type=text].error:focus,::ng-deep .vx-form-group .input.error:focus{box-shadow:0 0 5px #d31e1e45}::ng-deep .vx-form-group input[type=text]:disabled,::ng-deep .vx-form-group .input:disabled{background:#f1f1f1;cursor:not-allowed;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group input[type=text]:disabled:hover,::ng-deep .vx-form-group .input:disabled:hover{border-color:#dbdbdb;box-shadow:none}::ng-deep .vx-form-group input[type=text] span.text,::ng-deep .vx-form-group .input span.text{font-size:13px;color:#747576;font-weight:400;display:block;width:100%}::ng-deep .vx-form-group input[type=text] .input-group,::ng-deep .vx-form-group .input .input-group{display:flex;align-items:center}::ng-deep .vx-form-group input[type=text] .input-group.counter,::ng-deep .vx-form-group .input .input-group.counter{min-width:96px;width:96px}::ng-deep .vx-form-group input[type=text] .input-group.counter button,::ng-deep .vx-form-group .input .input-group.counter button{height:24px;width:24px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#747576;font-size:8px;cursor:pointer;outline:none}::ng-deep .vx-form-group input[type=text] .input-group.counter input,::ng-deep .vx-form-group .input .input-group.counter input{-webkit-appearance:textfield;-moz-appearance:textfield;height:24px;width:calc(100% - 48px);border:1px solid #f1f1f1;outline:none;padding:0 6px;text-align:center}::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-outer-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-outer-spin-button{appearance:none;margin:0}::ng-deep .vx-form-group input[type=text]+.file-list,::ng-deep .vx-form-group .input+.file-list{margin-top:8px}::ng-deep .vx-form-group input[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]:-ms-input-placeholder,::ng-deep .vx-form-group .input:-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]::-ms-input-placeholder,::ng-deep .vx-form-group .input::-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group .classification{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;padding:8px 12px;display:flex;justify-content:space-between}::ng-deep .vx-form-group .classification label{margin:0 4px 0 0;width:100%;position:relative;z-index:1}::ng-deep .vx-form-group .classification label span{display:block;width:100%;height:24px;border:1px solid #f1f1f1;border-radius:2px;line-height:24px;font-size:10px;text-align:center;color:#747576;font-weight:500;position:relative;text-transform:uppercase}::ng-deep .vx-form-group .classification label span:before{height:2px;content:\"\";top:0;right:0;left:0;border-radius:2px;position:absolute;transition:all .2s ease-in-out}::ng-deep .vx-form-group .classification label input{opacity:0;position:absolute;inset:0;margin:0;padding:0;width:100%;height:100%;cursor:pointer;z-index:1}::ng-deep .vx-form-group .classification label input:checked+span{color:#fff}::ng-deep .vx-form-group .classification label input:checked+span:before{bottom:0;height:100%;z-index:-1}::ng-deep .vx-form-group .classification label.low span:before{background:#34aa44}::ng-deep .vx-form-group .classification label.low-med span:before{background:#f2bf19}::ng-deep .vx-form-group .classification label.med-high span:before{background:#f29619}::ng-deep .vx-form-group .classification label.high span:before{background:#eb2424}::ng-deep .vx-form-group .classification label:last-of-type{margin-right:0}::ng-deep .vx-form-group .input{display:flex;align-items:center}::ng-deep .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;padding:8px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:flex;align-items:center;position:relative;justify-content:space-between}::ng-deep .vx-form-group .selected.first-field{z-index:2}::ng-deep .vx-form-group .selected .chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .vx-form-group .selected .chip-container.checkpoints{width:calc(100% - 120px)}::ng-deep .vx-form-group .selected .chip-container span.chip{background:#fff;border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;padding:0 8px;color:#1e5dd3;font-size:12px;display:block;width:auto;max-width:100%;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .vx-form-group .selected .chip-container span.chip.disabled{background:#f1f1f1;box-shadow:none;color:#747576;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .selected .chip-container span.chip i{font-weight:400;margin-right:8px;cursor:pointer;font-size:10px;position:relative;top:1px}::ng-deep .vx-form-group .selected .chip-container span.chip span.step{background:#1e5dd3;border-radius:2px;color:#fff;font-size:9px;line-height:14px;padding:0 4px;font-weight:400;text-align:center;min-width:auto;margin-right:4px}::ng-deep .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question{display:flex;align-items:center;justify-content:space-between;width:100%}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.value{color:#1e5dd3;font-size:12px;font-weight:400;line-height:24px;padding:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 80px)}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.label{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding-left:4px;padding-right:4px;line-height:12px;margin-left:8px}::ng-deep .vx-form-group .selected .chip-container span.value{color:#747576;font-size:13px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 52px);padding:0 4px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text{color:#747576;font-size:10px;font-weight:500;padding:0 8px;width:122px;line-height:14px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first{position:relative;min-width:162px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first:before{background:#f1f1f1;content:\"\";position:absolute;top:0;right:0;height:calc(100% + 12px);width:1px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text .no{color:#1e5dd3}::ng-deep .vx-form-group .selected .chip-container.plus span.chip{max-width:calc(50% - 35px)}::ng-deep .vx-form-group .selected .chip-container.more-one span.chip{max-width:50%}::ng-deep .vx-form-group .selected .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 .vx-form-group .selected .chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:100px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count{border-radius:20px;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .vx-form-group .selected .chip-container .chip-inner i.cross{cursor:pointer;position:relative;top:1px;font-size:8px}::ng-deep .vx-form-group .selected button.count{background:#1e5dd3;border-radius:2px;height:24px;padding:0 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none;color:#fff;font:13px;font-weight:500;line-height:20px;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit{border:none;border-radius:0;background:transparent;outline:none;cursor:pointer;display:block;font-size:11px;font-weight:600;color:#1e5dd3;text-transform:uppercase;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit i{font-weight:400;font-size:8px;margin-right:4px}::ng-deep .vx-form-group .selected button.close-btn{background:transparent;border:none;padding:0;margin-left:8px;font-size:10px;color:#c7381b;display:flex;align-items:center}::ng-deep .vx-form-group .selected .workflow-label{min-width:92px;padding:4px;text-align:center;margin-left:-8px;margin-right:8px;border-right:1px solid #f1f1f1}::ng-deep .vx-form-group .selected .workflow-label p{margin:0;display:block;text-transform:uppercase}::ng-deep .vx-form-group .selected .workflow-label p.title{font-size:9px;line-height:12px;color:#161b2f;font-weight:500}::ng-deep .vx-form-group .selected .workflow-label p.description{font-size:11px;line-height:16px;color:#161b2f;font-weight:600}::ng-deep .vx-form-group .selected .workflow-label+.chip-container{width:calc(100% - 148px)}::ng-deep .vx-form-group .selected+.selected{margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .selected+app-cs-switch.who-toggle label.cs-switch span.value{color:#747576}::ng-deep .vx-form-group .selected+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .selected~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~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 .vx-form-group .selected~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .selected.readOnly{pointer-events:none}::ng-deep .vx-form-group .selected span.chip{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .vx-form-group .select-list{position:absolute;background:#fff;box-shadow:0 0 5px #1e5dd345;top:100%;right:0;left:0;z-index:2}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item{width:100%;padding:12px 16px}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item:hover{background:#f8f8f8}::ng-deep .vx-form-group vcomply-editor{margin-top:8px;display:block}::ng-deep .vx-form-group vcomply-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb}::ng-deep .vx-form-group vcomply-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;max-height:100px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep .vx-form-group vcomply-editor .editor-container .editable-block ul{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group vcomply-editor .editor-container .editable-block ul li{list-style:disc}::ng-deep .vx-form-group vcomply-editor .editor-container .editable-block ol{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group vcomply-editor .editor-container .editable-block ol li{list-style:decimal}::ng-deep .vx-form-group vcomply-editor .editor-container .editor-tools{z-index:1;border-top:1px solid #dbdbdb;transition:none;border-radius:0 0 3px 3px;position:static}::ng-deep .vx-form-group vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .vx-form-group vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .vx-form-group 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 .vx-form-group 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 .vx-form-group vcomply-editor .editor-container:focus-within{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group vcomply-editor .editor-container:focus-within .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group vcomply-editor .editor-container:hover{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group vcomply-editor .editor-container:hover .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group vcomply-editor+app-cs-switch{margin-top:8px}::ng-deep .vx-form-group app-cs-switch label.cs-switch span.value{font-size:11px;color:#747576;text-transform:uppercase}::ng-deep .vx-form-group app-cs-switch+app-cs-switch{margin-top:8px}::ng-deep .vx-form-group .date-time-picker{display:flex;justify-content:space-between;height:40px;border-radius:4px;border:1px solid #dbdbdb;padding:11px 0;background:#fff}::ng-deep .vx-form-group .date-time-picker:focus-within{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .vx-form-group .date-time-picker .picker-group{width:50%;position:relative;display:flex;align-items:center}::ng-deep .vx-form-group .date-time-picker .picker-group:first-of-type{border-right:1px solid #dbdbdb}::ng-deep .vx-form-group .date-time-picker .picker-group:only-of-type{border:none;width:100%}::ng-deep .vx-form-group .date-time-picker .picker-group input{height:38px;background:transparent;line-height:38px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400;border:none;padding:0 12px 0 34px;outline:none}::ng-deep .vx-form-group .date-time-picker .picker-group input:focus,::ng-deep .vx-form-group .date-time-picker .picker-group input:hover{box-shadow:none;border:none}::ng-deep .vx-form-group .date-time-picker .picker-group input::placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input:-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input::-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group i{display:flex;justify-content:center;align-items:center;height:16px;width:12px;position:absolute;left:12px;top:0;color:#747576;font-size:12px;pointer-events:none}::ng-deep .vx-form-group app-cs-radio.main-filed{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed 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%;color:#707070}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group app-cs-radio.disabled{pointer-events:none;opacity:.5;filter:grayscale(1);background:#f1f1f1}::ng-deep .vx-form-group .switch-row{display:flex}::ng-deep .vx-form-group .switch-row app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:0;text-transform:uppercase;color:#747576!important}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value i{display:inline-flex;font-size:11px;cursor:pointer;color:#1e5dd3;align-items:center;line-height:16px;margin:0 4px}::ng-deep .vx-form-group .switch-row app-cs-switch+app-cs-switch{margin-left:8px}::ng-deep .vx-form-group .switch-row.align-right{justify-content:flex-end}::ng-deep .vx-form-group .switch-row.align-right label.cs-switch span.value{margin-right:8px}::ng-deep .vx-form-group .risk-type-field{background:#f8f8f8;border:1px solid #dbdbdb;border-radius:4px;height:40px;display:flex;align-items:center;padding:4px;position:relative;z-index:1}::ng-deep .vx-form-group .risk-type-field .type-item{width:50%;position:relative}::ng-deep .vx-form-group .risk-type-field .type-item button{background:transparent;border:none;border-radius:0;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase;width:100%;height:32px;padding:0 12px;text-align:left}::ng-deep .vx-form-group .risk-type-field .type-item button.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item .info{color:#1e5dd3;font-size:12px;position:absolute;top:10px;right:12px;cursor:pointer}::ng-deep .vx-form-group .risk-type-field .type-item .info.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item.active button{color:#1e5dd3!important}::ng-deep .vx-form-group .risk-type-field .type-item:nth-child(2).active~.background-glider{transform:translate(100%)}::ng-deep .vx-form-group .risk-type-field .background-glider{background:#fff;border-radius:4px;box-shadow:0 1px 3px #161b2f26;position:absolute;display:flex;width:212px;height:32px;z-index:-1;transition:.25s ease-out}.left{width:36px;height:36px;margin-top:26px;margin-left:-58px;margin-right:20px;display:flex;justify-content:center;align-items:center;position:relative;z-index:10;border-radius:50%}.left.deadline-completed{margin-top:18px}.left.checked{background:transparent}.left img{width:36px}.left .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}.left .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}.left .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}.right{width:100%}.right span.indicator{position:absolute;top:36px;left:-16px;font-size:12px;color:#f0b819;cursor:pointer}.form-group-row{display:flex;position:relative;transition:all .2s ease-in-out}.form-group-row.disabled{-webkit-user-select:none;user-select:none;pointer-events:none;filter:grayscale(1);z-index:2}.form-group-row.disabled .left{position:relative}.form-group-row.disabled .left:before{content:\"\";position:absolute;inset:2px 0 0 2px;background:#fff;opacity:.7;border-radius:50%;width:32px;height:32px}.form-group-row.disabled .right{opacity:.3}.form-group-row.active{pointer-events:none;filter:grayscale(0);z-index:2;opacity:1}.form-group-row.active .right .vx-form-group input,.form-group-row.active .right .vx-form-group .custom-input,.form-group-row.active .right .vx-form-group .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}.form-group-row.active .right .vx-form-group .selectBoxEnable.disabled{border-color:#dbdbdb;box-shadow:none}::ng-deep .radio-group-selector app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .radio-group-selector app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .radio-group-selector app-cs-radio label.radio-item .radio,::ng-deep .radio-group-selector app-cs-radio label.radio-item .radiomark{position:absolute!important;top:9px;left:12px}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value{font-size:11px!important;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!important;max-width:100%!important;font-weight:500!important;color:#707070!important}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value i{font-size:12px;color:#1e5dd3}::ng-deep .radio-group-selector app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}::ng-deep .wf-action-list{width:220px}::ng-deep .wf-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}::ng-deep .wf-action-list ul.action-item{display:block}::ng-deep .wf-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}::ng-deep .wf-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}::ng-deep .wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .wf-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .wf-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}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .wf-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .wf-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}::ng-deep .wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .wf-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .wf-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}::ng-deep .wf-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}::ng-deep .wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}p.error-message{font-size:11px;font-weight:400;color:#eb2424;line-height:16px;margin-top:8px;margin-bottom:0}.edit-loader{position:absolute;top:-3px;left:-3px;width:46px;height:46px;transform:rotate(180deg)}.circular-loader{animation:rotate 2s linear infinite;height:100%;transform-origin:center center;width:100%;position:absolute;top:0;left:0;margin:auto}.loader-path{stroke-dasharray:150,200;stroke-dashoffset:-10;animation:dash 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35}to{stroke-dasharray:89,200;stroke-dashoffset:-124}}::ng-deep .dropdown{position:fixed;background:#fff;box-shadow:0 3px 6px #00000029;padding:24px 0;z-index:9;max-height:calc(100vh - 200px);overflow:auto}::ng-deep .dropdown ul.dropdown-list{padding:0 20px;margin:0;display:block}::ng-deep .dropdown ul.dropdown-list li{list-style:none}::ng-deep .dropdown ul.dropdown-list li app-cs-radio{display:flex}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.radio{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.value{padding:11px 12px 11px 32px;width:100%;border:1px solid #bcbcbc;border-radius:4px;margin-left:0;max-width:100%}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item svg{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item input[type=radio]:checked~span.value{background:#e8feeb;border-color:#34aa44}::ng-deep .dropdown ul.dropdown-list li+li{margin-top:8px}app-smiley-dialog{position:relative;z-index:10}app-smiley-dialog-inline{position:absolute;top:-3px;right:0;bottom:0;z-index:999;width:520px;height:calc(100vh + 3px)}::ng-deep .vx-overlay{position:fixed;z-index:3;inset:0}::ng-deep dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}::ng-deep dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}::ng-deep dp-date-picker input:focus{outline:none}::ng-deep dp-date-picker .dp-popup{width:412px;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 dp-date-picker .dp-popup dp-day-calendar,::ng-deep dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep dp-date-picker .dp-popup dp-day-calendar button,::ng-deep dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep dp-date-picker .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 dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep dp-date-picker .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 dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep dp-date-picker .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 dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep dp-date-picker .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 dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep dp-date-picker .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 dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep dp-date-picker .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 dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}::ng-deep dp-date-picker .dp-open+div{position:fixed!important;inset:0!important;display:flex;justify-content:center;align-items:center;z-index:99;pointer-events:none;background:#0000004d}::ng-deep .cdk-overlay-container{z-index:2147483002!important}::ng-deep .dp-popup{z-index:999;display:flex!important;align-items:center;justify-content:center;width:100vw;height:100vh;background:#0000004d!important;box-shadow:unset!important}::ng-deep .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 .dp-popup dp-day-calendar,::ng-deep .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep .dp-popup dp-day-calendar button,::ng-deep .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep .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 .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep .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 .dp-popup dp-day-calendar .dp-weekdays,::ng-deep .dp-popup dp-month-calendar .dp-weekdays,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep .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 .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep .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 .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep .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 .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep .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 .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}@keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}::ng-deep span.file{display:block;width:20px;min-width:20px;border-radius:0 0 2px 2px;border:1px solid transparent;border-color:#747576;position:relative;margin-right:5px;border-top:none;margin-top:5px;background:#fff}::ng-deep span.file.table{margin-right:8px;width:18px;min-width:18px}::ng-deep span.file.table i{font-size:8px}::ng-deep span.file.table .format{height:8px;font-size:7px;line-height:8px;font-weight:400}::ng-deep span.file:before{position:absolute;border-radius:0;top:-4px;right:-1px;content:\"\";height:4px;width:4px;display:block;background:linear-gradient(45deg,#747576 0% 1%,#747576 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file:after{height:4px;left:-1px;right:3px;border-top:1px solid;border-right:none;border-left:1px solid;content:\"\";top:-4px;position:absolute;border-radius:2px 0 0;background:#fff}::ng-deep span.file .format{height:10px;font-size:6px;text-transform:uppercase;background:transparent;font-weight:600;text-align:center;display:block;line-height:10px}::ng-deep span.file i{font-size:10px;height:10px;display:flex;align-items:center;justify-content:center;color:#dbdbdb}::ng-deep span.file.docx{width:22px!important}::ng-deep span.file.pdf,::ng-deep span.file.template{border-color:#f31c39}::ng-deep span.file.pdf:before,::ng-deep span.file.template:before{background:linear-gradient(45deg,#f31c39 0% 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#f31c39\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.pdf:after,::ng-deep span.file.template:after{border-color:#f31c39}::ng-deep span.file.pdf .format,::ng-deep span.file.template .format{color:#f31c39}::ng-deep span.file.xlsx,::ng-deep span.file.xls,::ng-deep span.file.css,::ng-deep span.file.scss,::ng-deep span.file.less{border-color:#34aa44}::ng-deep span.file.xlsx:before,::ng-deep span.file.xls:before,::ng-deep span.file.css:before,::ng-deep span.file.scss:before,::ng-deep span.file.less:before{background:linear-gradient(45deg,#34aa44 0% 1%,#34aa44 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.xlsx:after,::ng-deep span.file.xls:after,::ng-deep span.file.css:after,::ng-deep span.file.scss:after,::ng-deep span.file.less:after{border-color:#34aa44;color:#34aa44}::ng-deep span.file.xlsx .format,::ng-deep span.file.xls .format,::ng-deep span.file.css .format,::ng-deep span.file.scss .format,::ng-deep span.file.less .format{color:#34aa44}::ng-deep span.file.doc,::ng-deep span.file.docx,::ng-deep span.file.psd{border-color:#1e5dd3}::ng-deep span.file.doc:before,::ng-deep span.file.docx:before,::ng-deep span.file.psd:before{background:linear-gradient(45deg,#1e5dd3 0% 1%,#1e5dd3 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.doc:after,::ng-deep span.file.docx:after,::ng-deep span.file.psd:after{border-color:#1e5dd3}::ng-deep span.file.doc .format,::ng-deep span.file.docx .format,::ng-deep span.file.psd .format{color:#1e5dd3}::ng-deep span.file.ppt,::ng-deep span.file.ai,::ng-deep span.file.html,::ng-deep span.file.jpg,::ng-deep span.file.jpeg,::ng-deep span.file.png{border-color:#f6882f}::ng-deep span.file.ppt:before,::ng-deep span.file.ai:before,::ng-deep span.file.html:before,::ng-deep span.file.jpg:before,::ng-deep span.file.jpeg:before,::ng-deep span.file.png:before{background:linear-gradient(45deg,#f6882f 0% 1%,#f6882f 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.ppt:after,::ng-deep span.file.ai:after,::ng-deep span.file.html:after,::ng-deep span.file.jpg:after,::ng-deep span.file.jpeg:after,::ng-deep span.file.png:after{border-color:#f6882f}::ng-deep span.file.ppt .format,::ng-deep span.file.ai .format,::ng-deep span.file.html .format,::ng-deep span.file.jpg .format,::ng-deep span.file.jpeg .format,::ng-deep span.file.png .format{color:#f6882f}::ng-deep span.file.php{border-color:#7aa6f7}::ng-deep span.file.php:before{background:linear-gradient(45deg,#7aa6f7 0% 1%,#7aa6f7 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.php:after{border-color:#7aa6f7}::ng-deep span.file.php .format{color:#7aa6f7}::ng-deep ngx-material-timepicker-container .timepicker-backdrop-overlay{background-color:#0000000d!important;z-index:9999999999!important}::ng-deep ngx-material-timepicker-container .timepicker-overlay{z-index:9999999999!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker{width:232px!important;border-radius:2px!important;box-shadow:0 4px 30px #161b2f26!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header{background-color:#fff!important;padding:0!important;border-radius:2px 2px 0 0}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container{display:block!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time{color:#000!important;width:150px!important;margin:0 auto;line-height:60px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control{font-size:40px;background-color:transparent!important;color:#000!important;font-weight:600;text-align:right;caret-color:transparent;outline:none;font-family:Poppins;line-height:56px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:focus,::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:hover{background-color:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control:last-of-type .timepicker-dial__control{text-align:left}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time span{padding:0 8px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period{display:flex!important;width:182px;margin:0 auto!important;background:#f1f1f1;padding:4px 10px;border-radius:20px;position:relative}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period:before{background:#f1f1f1;content:\"\";position:absolute;top:15px;left:-25px;width:calc(100% + 50px);height:2px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period{flex-direction:unset!important;position:relative;z-index:1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:after{content:\"\";position:absolute;right:-12px;top:0;border-left:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:before{content:\"\";position:absolute;left:-18px;top:0;border-right:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button{font-size:11px;background-color:transparent;padding:0;border-radius:20px;color:#747576;font-weight:600;font-family:Poppins;width:84px;height:24px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button.timepicker-dial__item_active{background:#fff!important;color:#1e5dd3!important;box-shadow:0 1px 2px #dbdbdb}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button+button{margin-left:0!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face{width:200px!important;height:200px!important;padding:10px!important;background:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer{height:92px!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span{color:#000}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span.active{color:#fff}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand{height:80px!important;top:calc(50% - 80px)!important;background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number>span.active{background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand_minute:before{border:4px solid #1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions{display:flex!important;padding:10px 0 0!important;background:#fff!important;justify-content:space-around!important;border-radius:0 0 2px 2px!important;overflow:hidden}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div:first-child ngx-material-timepicker-button button.timepicker-button{background:#f8f8f8;color:#1e5dd3}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button{line-height:28px!important;width:100%;background:#1e5dd3;color:#fff;border-radius:0!important;height:32px!important;width:116px!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button span{font-weight:500!important;font-size:11px;font-family:Poppins}::ng-deep vcomply-editor{display:block}::ng-deep vcomply-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep vcomply-editor .editor-container:hover,::ng-deep vcomply-editor .editor-container:focus-within{border:1px solid #1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep vcomply-editor .editor-container mention-list ul li a{font-size:16px!important}::ng-deep vcomply-editor .editor-container .editable-block{background:#fff;min-height:60px;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep vcomply-editor .editor-container .editable-block:before{color:#747576!important}::ng-deep vcomply-editor .editor-container .editor-tools{border-top:1px solid #dbdbdb;border-radius:0 0 3px 3px}::ng-deep vcomply-editor .editor-container .editor-tools:hover{border-color:#1e5dd3}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep 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 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 marx-modal .popup-modal-background{background-color:#161b2fcc!important}::ng-deep .within-box{background:#f1f1f1;border-radius:.125rem;color:#042e7d}::ng-deep .within-value{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-word}.wf-tooltip{pointer-events:none;position:absolute;max-width:300px;font-size:12px;text-align:left;color:#fff;padding:8px 12px;background:#000;border-radius:2px;z-index:-222;top:0;opacity:0;white-space:break-spaces;word-break:break-word}.wf-tooltip *{color:#fff!important}.wf-tooltip:empty{display:none!important}.wf-tooltip.white{box-shadow:0 2px 8px #1c5bd159;color:#747576;background:#fff;text-align:left}.wf-tooltip.white b{color:#747576!important}.wf-tooltip.animate-top{animation:animate-top .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-right{animation:animate-right .3s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-bottom{animation:animate-bottom .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-left{animation:animate-left .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip-top:after{top:100%;left:50%;margin-left:-5px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip-bottom:after{bottom:100%;left:50%;margin-left:-5px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-left.white:after{border-color:transparent transparent transparent #f1f1f1}.wf-tooltip-left:after{top:50%;left:100%;margin-top:-5px;border-width:5px;border-color:transparent transparent transparent #000000}.wf-tooltip-right.white:after{border-color:transparent #f1f1f1 transparent transparent}.wf-tooltip-right:after{top:50%;right:100%;margin-top:-5px;border-width:5px;border-color:transparent #000000 transparent transparent}.wf-tooltip-bottom-right:after{bottom:100%;left:100%;margin-left:-20px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom-right.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-bottom-left:after{bottom:100%;left:0;margin-left:10px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom-left.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-top-left:after{top:100%;left:0;margin-left:10px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top-left.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip-top-right:after{top:100%;left:100%;margin-left:-5px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top-right.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip:after{content:\"\";position:absolute;border-style:solid}.wf-tooltip span.within{font-size:80%;display:block;width:100%}.wf-tooltip .small{display:block;font-size:10px}.wf-tooltip .within-box{background:#f1f1f1;border-radius:2px;color:#042e7d!important;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 2px;margin-right:2px}.wf-tooltip-show{pointer-events:none;opacity:1;z-index:2147483001}\n"], dependencies: [{ kind: "directive", type: i1$3.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: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: CreateAssessmentContainerComponent, selector: "app-create-assessment-container", inputs: ["openPortal", "assessmentJSON", "checkpointJSON"], outputs: ["setIsUploaded", "postAssessment"] }, { kind: "component", type: i4.MarxEditorComponent, selector: "vcomply-editor", inputs: ["editorConfig"], outputs: ["comment", "sendSavedFiles", "popup"] }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value", "oneLine"], outputs: ["checkedEvent"] }, { kind: "component", type: CsSwitchComponent, selector: "app-cs-switch", inputs: ["disabled", "ngValue", "value", "tooltipMessage", "position"], outputs: ["ngValueChange"] }, { kind: "directive", type: ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$1.NgxMaterialTimepickerComponent, selector: "ngx-material-timepicker", inputs: ["cancelBtnTmpl", "editableHintTmpl", "confirmBtnTmpl", "ESC", "enableKeyboardInput", "preventOverlayClick", "disableAnimation", "appendToInput", "hoursOnly", "defaultTime", "timepickerClass", "theme", "min", "max", "ngxMaterialTimepickerTheme", "format", "minutesGap"], outputs: ["timeSet", "opened", "closed", "hourSelected", "timeChanged"] }, { kind: "directive", type: i5$1.TimepickerDirective, selector: "[ngxTimepicker]", inputs: ["format", "min", "max", "ngxTimepicker", "value", "disabled", "disableClick"] }, { kind: "component", type: LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "component", type: SmileyDialogInlineComponent, selector: "app-smiley-dialog-inline", inputs: ["message", "actionButtons"], outputs: ["action", "closeSmiley"] }, { kind: "directive", type: ClickOutsideDirective$1, selector: "[clickOutside]", outputs: ["clickOutside"] }, { kind: "component", type: UserGroupListComponent, selector: "user-group-list", inputs: ["groupEnabled", "panelTitle", "singleSelect", "selectedReviewer", "featureflag", "reviewerWorkflowType", "mode", "fieldType", "fromResponsibility", "assignorId", "assigneeIds", "reviewerIds", "overseerIds", "FromProgram", "userListInfo", "groupListInfo", "fromApprovalWorkflow", "approvalType", "showFutureUsersSwitch", "futureUsersWillSelect", "isAllDisabled", "isGroupTabShow", "disabledIds", "nonRemovableUserIds", "allUserSelectedDisabled", "nonRemovableGroupIds", "loading", "userlist", "selectedUsers", "defaultSelectedUsers", "userType", "groupList", "selectedGroups"], outputs: ["save", "cancel", "reviewerWorkflowTypeChange", "fetchUserData"] }, { kind: "component", type: ResponsibilityCentersListComponent, selector: "app-responsibility-centers-list", inputs: ["responsibilityCentersList", "selectedResponsibilityCenters", "rcIdKey", "radioSelection", "pluralText", "singularText", "loaded"], outputs: ["saveSelectedList", "closeRcList"] }, { kind: "component", type: GroupUsersListComponent, selector: "app-group-users-list", inputs: ["groupsEnabled", "usersList", "groupsList", "selectedUsers", "userIdKey", "groupIdKey", "openedFrom", "selectedGroups", "assigneeGroupsList", "disabledId", "fromResponsibility", "reviewerIds", "overseerIds", "assignorId", "loader", "isDisabledSelected"], outputs: ["saveSelectedList", "closeUsersList"] }, { kind: "component", type: GrcObjectListComponent, selector: "app-grc-object-list", inputs: ["grcObject", "currentPage", "loader", "tableCard", "selectedTab", "cardLoader", "onEditGRCId", "mode", "selectedGRC"], outputs: ["saveOtherGRC", "closeOtherGRC", "getOtherGRCObjects"] }, { kind: "component", type: OwnerListComponent, selector: "app-owner-list", inputs: ["usersList", "selectedUsers", "userIdKey", "itemNameKey", "itemEmailKey", "showWorkflow", "listHeading", "searchPlaceholder", "pluralText", "singularText", "reviewerWorkflowType", "mode", "noDataText", "workflowList", "workflowText", "disabledIds", "nonRemovableUsersList", "fromResponsibility", "assignorId", "assigneeIds", "reviewerIds", "overseerIds"], outputs: ["saveSelectedList", "closeUsersList", "reviewerWorkflowTypeChange"] }, { kind: "component", type: UserRadioListComponent, selector: "app-users-radio-list", inputs: ["usersList", "selectedUsers", "userIdKey", "itemNameKey", "itemEmailKey", "disabledId", "fromResponsibility", "reviewerIds", "overseerIds", "assignorId", "headerText", "loaded"], outputs: ["saveSelectedList", "closeUsersList"] }, { kind: "component", type: CategoryMultiSelectComponent, selector: "app-category-multi-select", inputs: ["categoryList", "allCategories", "categoryIdKey", "selectedCategories"], outputs: ["saveSelectedCategory", "closeList", "closeCategoriesList"] }, { kind: "component", type: CheckpointsComponent, selector: "app-checkpoints", inputs: ["checkpointData", "checkpointInstruction"], outputs: ["closeCheckPoint", "saveCheckPoint"] }, { kind: "component", type: ReviewFrequencyComponent, selector: "app-review-frequency", inputs: ["reviewCompleteDays", "reviewNOtCompletedDays"], outputs: ["closeReviewFrequency", "backToUserList", "saveReviewFrequency"] }, { kind: "component", type: FrequencyContainerComponent, selector: "app-frequency-container", inputs: ["frequencyDetails", "mode", "feature", "pageType"], outputs: ["selectedFrequency", "closeFrequency"] }, { kind: "component", type: FrameworkListComponent, selector: "app-framework-list", inputs: ["previousSelectedValues", "headerText", "workflowPage", "policy", "frameWorkList", "selectedFrameWork", "selectedCategories"], outputs: ["entrustFramework", "closeFramework", "assignControl"] }, { kind: "component", type: FormatAndEvidenceComponent, selector: "app-format-and-evidence", inputs: ["mode", "categories", "organization_id", "formatEvidanceData"], outputs: ["updateFiles"] }, { kind: "component", type: RiskClassificationComponent, selector: "app-risk-classification", inputs: ["currentRiskValue"], outputs: ["saveList", "closeList"] }, { kind: "directive", type: ScrollInViewDirective, selector: "[appScrollInView]", inputs: ["appScrollInView"] }, { kind: "component", type: AuditCategoryListComponent, selector: "app-audit-category-list", inputs: ["selectedData", "selectedIndex", "auditCategory"], outputs: ["closeList", "saveSelectedList"] }, { kind: "component", type: AssessmentListComponent, selector: "app-assessment-list", inputs: ["isEdit", "mode", "selectedAssessment", "selectedAssessmentData", "program_ids"], outputs: ["onAssessmentSelect", "cancelAssessment"] }, { kind: "component", type: ProgramListingComponent, selector: "app-program-listing", inputs: ["programsList", "selectedProgram", "openedFrom", "selectedCategories", "responsibilityId", "feature", "hideProgramsList", "mode", "linkedProgram"], outputs: ["saveSelectedProgram", "closeEvent"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1$1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: RefDisconnectPipe, name: "refDisconnect" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WorkflowComplianceComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-workflow-compliance', template: "<div class=\"workflw-compliance\" *ngIf=\"!showSmiley\">\r\n  <!-- Behalf -->\r\n  <div\r\n    *ngIf=\"mode !== 'EDIT'\"\r\n    class=\"form-group-row\"\r\n    [class.active]=\"activeSelector === 'assignors'\"\r\n    [class.disabled]=\"\r\n      activeSelector &&\r\n      activeSelector !== 'assignors' &&\r\n      sideSelectorElements.includes(activeSelector)\r\n    \"\r\n  >\r\n    <div\r\n      class=\"left\"\r\n      [class.checked]=\"\r\n        responsibilityForm?.assignors?.list?.length > 0 &&\r\n        activeSelector !== 'assignors'\r\n      \"\r\n    >\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/im-creating.svg\"\r\n        alt=\"im\"\r\n        *ngIf=\"\r\n          responsibilityForm?.assignors?.list?.length == 0 ||\r\n          activeSelector === 'assignors'\r\n        \"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n        *ngIf=\"\r\n          responsibilityForm?.assignors?.list?.length > 0 &&\r\n          activeSelector !== 'assignors'\r\n        \"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\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=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\"\r\n          >I am creating this responsibility on behalf of someone else\r\n          <app-cs-switch\r\n            [ngValue]=\"responsibilityForm.assignors.enable\"\r\n            (ngValueChange)=\"\r\n              responsibilityForm.assignors.enable = $event;\r\n              responsibilityForm.assignors.list = []\r\n            \"\r\n          >\r\n          </app-cs-switch>\r\n        </label>\r\n        <div\r\n          class=\"select\"\r\n          *ngIf=\"\r\n            responsibilityForm?.assignors?.list?.length === 0 ||\r\n            activeSelector === 'assignors'\r\n          \"\r\n        >\r\n          <input\r\n            type=\"text\"\r\n            (click)=\"activateSelector('assignors', true)\"\r\n            placeholder=\"Who is responsible for managing this responsibility?\"\r\n            readonly\r\n            [disabled]=\"!responsibilityForm?.assignors?.enable\"\r\n          />\r\n        </div>\r\n        <div\r\n          class=\"selected\"\r\n          *ngIf=\"\r\n            responsibilityForm?.assignors?.list?.length > 0 &&\r\n            activeSelector !== 'assignors'\r\n          \"\r\n        >\r\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n            <ng-container\r\n              *ngFor=\"\r\n                let b_user of responsibilityForm?.assignors?.list?.slice(0, 1)\r\n              \"\r\n            >\r\n              <i\r\n                (click)=\"remove('assignors', b_user)\"\r\n                class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                >&#xe9ae;</i\r\n              >\r\n              <span\r\n                class=\"chipName vx-fs-11 vx-label-txt\"\r\n                [appTooltip]=\"b_user.member_name\"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n                >{{ b_user.member_name }}</span\r\n              >\r\n            </ng-container>\r\n            <button\r\n              *ngIf=\"responsibilityForm?.assignors?.list?.length > 1\"\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\r\n              (click)=\"behalf.popover()\"\r\n              placement=\"right\"\r\n            >\r\n              +{{ responsibilityForm?.assignors?.list?.slice(1).length }}\r\n            </button>\r\n          </div>\r\n\r\n          <!-- <div class=\"chip-container\">\r\n                      <span class=\"chip\" *ngFor=\"let b_user of responsibilityForm?.assignors?.list?.slice(0,2)\"><i\r\n                              class=\"icons\" (click)=\"remove('assignors',b_user)\">&#xe90d;</i>\r\n                          {{b_user.member_name}}</span>\r\n                      <button class=\"count\" *ngIf=\"responsibilityForm?.assignors?.list?.length > 2\" type=\"button\"\r\n                          appPopover (click)=\"behalf.popover()\" placement=\"right\">+\r\n                          {{responsibilityForm?.assignors?.list?.slice(2).length}}</button>\r\n                  </div> -->\r\n          <button\r\n            *ngIf=\"activeSelector !== 'assignors'\"\r\n            class=\"edit\"\r\n            type=\"button\"\r\n            (click)=\"activateSelector('assignors', true)\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i> Edit\r\n          </button>\r\n        </div>\r\n        <app-popover #behalf [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ul class=\"action-item\">\r\n              <li\r\n                *ngFor=\"\r\n                  let b_user of responsibilityForm?.assignors?.list | slice : 2;\r\n                  let j = index\r\n                \"\r\n              >\r\n                <div class=\"avatar-card\">\r\n                  <span class=\"value\">\r\n                    <i class=\"icons\" (click)=\"remove('assignors', b_user)\"\r\n                      >&#xe90d;</i\r\n                    >\r\n                    {{ b_user.member_name }}\r\n                  </span>\r\n                </div>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n        </app-popover>\r\n        <p\r\n          *ngIf=\"invalidType === 'whom'\"\r\n          [appScrollInView]=\"true\"\r\n          class=\"error-message\"\r\n        >\r\n          Please select the person responsible for managing this responsibility.\r\n        </p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- What -->\r\n  <div\r\n    class=\"form-group-row\"\r\n    [class.active]=\"activeSelector === 'framework'\"\r\n    [class.disabled]=\"\r\n      activeSelector &&\r\n      activeSelector !== 'responsibilityName' &&\r\n      sideSelectorElements.includes(activeSelector)\r\n    \"\r\n  >\r\n    <div\r\n      class=\"left\"\r\n      [class.checked]=\"\r\n        responsibilityForm?.responsibility?.name.trim() !== '' &&\r\n        !focus.responsibilityName\r\n      \"\r\n    >\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/what.svg\"\r\n        alt=\"im\"\r\n        *ngIf=\"\r\n          responsibilityForm?.responsibility?.name.trim() === '' ||\r\n          focus.responsibilityName\r\n        \"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n        *ngIf=\"\r\n          responsibilityForm?.responsibility?.name.trim() !== '' &&\r\n          !focus.responsibilityName\r\n        \"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\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=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\">\r\n          What? <span class=\"required\">*</span>\r\n          <button\r\n            *ngIf=\"\r\n              isFrameworkAvailable &&\r\n              mode !== 'EDIT' &&\r\n              openedFrom !== 'RISK_TREATMENT' &&\r\n              assessmentDetails?.assessment_type !== 'compliance_audit'\r\n            \"\r\n            (click)=\"activateSelector('framework', true)\"\r\n            class=\"button\"\r\n          >\r\n            Select From A framework\r\n          </button>\r\n        </label>\r\n        <span\r\n          *ngIf=\"responsibilityForm?.responsibility?.keyResponsibility\"\r\n          class=\"indicator\"\r\n          [appTooltip]=\"'This responsibility is marked as key responsibility.'\"\r\n          placement=\"bottom\"\r\n          type=\"black\"\r\n          delay=\"0\"\r\n          [tooltipMandatory]=\"true\"\r\n        >\r\n          <i class=\"icons\">&#xea70;</i>\r\n        </span>\r\n        <input\r\n          *ngIf=\"\r\n            responsibilityForm?.responsibility?.name.trim() == '' || !isEditWhat\r\n          \"\r\n          type=\"text\"\r\n          [ngModel]=\"responsibilityForm.responsibility.name\"\r\n          placeholder=\"What is the responsibility?\"\r\n          (change)=\"whatChanged($event)\"\r\n          (focusin)=\"activateSelector('responsibilityName', true)\"\r\n          (focusout)=\"activeDeselector()\"\r\n          (clickOutside)=\"testFunction()\"\r\n          #what\r\n        />\r\n        <div\r\n          class=\"selected\"\r\n          *ngIf=\"\r\n            responsibilityForm?.responsibility?.name.trim() != '' && isEditWhat\r\n          \"\r\n        >\r\n          <div class=\"chip-container\">\r\n            <span class=\"value\">{{\r\n              responsibilityForm.responsibility?.name\r\n            }}</span>\r\n          </div>\r\n          <button\r\n            *ngIf=\"assessmentDetails?.assessment_type !== 'compliance_audit'\"\r\n            class=\"edit\"\r\n            type=\"button\"\r\n            (click)=\"onEditWhat($event)\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i> Edit\r\n          </button>\r\n        </div>\r\n        <p\r\n          *ngIf=\"invalidType === 'what'\"\r\n          [appScrollInView]=\"true\"\r\n          class=\"error-message\"\r\n        >\r\n          Please enter a name for this responsibility.\r\n        </p>\r\n        <div class=\"switch-row align-right\">\r\n          <app-cs-switch\r\n            [ngValue]=\"responsibilityForm.responsibility?.keyResponsibility\"\r\n            (ngValueChange)=\"\r\n              responsibilityForm.responsibility.keyResponsibility = $event\r\n            \"\r\n            >Key Responsibility\r\n          </app-cs-switch>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Who -->\r\n  <div\r\n    class=\"form-group-row\"\r\n    [class.active]=\"activeSelector === 'assignees'\"\r\n    [class.disabled]=\"\r\n      activeSelector &&\r\n      activeSelector !== 'assignees' &&\r\n      sideSelectorElements.includes(activeSelector)\r\n    \"\r\n  >\r\n    <div\r\n      class=\"left\"\r\n      [class.checked]=\"\r\n        responsibilityForm?.assignees?.list?.length > 0 &&\r\n        activeSelector !== 'assignees'\r\n      \"\r\n    >\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/who.svg\"\r\n        alt=\"im\"\r\n        *ngIf=\"\r\n          responsibilityForm?.assignees?.list?.length == 0 ||\r\n          activeSelector === 'assignees'\r\n        \"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n        *ngIf=\"\r\n          responsibilityForm?.assignees?.list?.length > 0 &&\r\n          activeSelector !== 'assignees'\r\n        \"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\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=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <div class=\"edit-due-date\">\r\n          <label class=\"vx-control-panel\"\r\n            >Who? <span class=\"required\">*</span></label\r\n          >\r\n          <div *ngIf=\"allowEditDueDateFeatureFlag\" class=\"switch-row align-right\">\r\n            <app-cs-switch\r\n              [ngValue]=\"responsibilityForm.allowEditDueDate\"\r\n              (ngValueChange)=\"\r\n                responsibilityForm.allowEditDueDate = $event\r\n              \"\r\n              >ALLOW ASSIGNEE TO EDIT COMPLETED WORK<i\r\n                class=\"icons\"\r\n                [appTooltip]=\"\r\n                  'If it\u2019s enabled, the assignee will have the option to modify a previously completed due date.'\r\n                \"\r\n                placement=\"bottom-right\"\r\n                type=\"white\"\r\n                delay=\"0\"\r\n                [tooltipMandatory]=\"true\"\r\n                >&#xe91f;</i\r\n              >\r\n            </app-cs-switch>\r\n          </div>\r\n        </div>\r\n        <div\r\n          class=\"select vx-mt-0\"\r\n          *ngIf=\"\r\n            responsibilityForm?.assignees?.list?.length == 0 &&\r\n            (!featureFlag_groups ||\r\n              (responsibilityForm?.assigneeGroups?.list?.length == 0 &&\r\n                featureFlag_groups))\r\n          \"\r\n        >\r\n          <input\r\n            type=\"text\"\r\n            (click)=\"activateSelector('assignees', true)\"\r\n            placeholder=\"Who is responsible for completing the responsibility?\"\r\n            readonly\r\n          />\r\n        </div>\r\n\r\n        <div\r\n          class=\"selected\"\r\n          *ngIf=\"\r\n            (responsibilityForm?.assignees?.list?.length > 0 &&\r\n              !featureFlag_groups) ||\r\n            ((responsibilityForm?.assignees?.list?.length > 0 ||\r\n              responsibilityForm?.assigneeGroups?.list?.length > 0) &&\r\n              featureFlag_groups)\r\n          \"\r\n        >\r\n          <div\r\n            class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n            *ngIf=\"!featureFlag_groups\"\r\n          >\r\n            <ng-container\r\n              *ngFor=\"\r\n                let e_user of responsibilityForm?.assignees?.list?.slice(0, 1)\r\n              \"\r\n            >\r\n              <i\r\n                (click)=\"remove('assignees', e_user)\"\r\n                class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                >&#xe9ae;</i\r\n              >\r\n              <span\r\n                class=\"chipName vx-fs-11 vx-label-txt\"\r\n                [appTooltip]=\"e_user.member_name\"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n                >{{ e_user.member_name }}</span\r\n              >\r\n            </ng-container>\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 greenbg\"\r\n              appPopover\r\n              (click)=\"assignees.popover()\"\r\n              placement=\"right\"\r\n              *ngIf=\"responsibilityForm?.assignees?.list?.length > 1\"\r\n            >\r\n              +{{ responsibilityForm?.assignees?.list?.slice(1).length }}\r\n            </button>\r\n          </div>\r\n\r\n          <div class=\"vx-d-flex vx-align-center\" *ngIf=\"featureFlag_groups\">\r\n            <div\r\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n              *ngIf=\"responsibilityForm?.assignees?.list?.length > 0\"\r\n            >\r\n              <i\r\n                class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                (click)=\"\r\n                  remove('assignees', responsibilityForm?.assignees?.list[0])\r\n                \"\r\n                >&#xe9ae;</i\r\n              >\r\n              <span\r\n                class=\"chipName vx-fs-11 vx-label-txt\"\r\n                [appTooltip]=\"\r\n                  responsibilityForm?.assignees?.list[0]?.employee_name\r\n                \"\r\n                placement=\"bottom-left\"\r\n                type=\"black\"\r\n                delay=\"0\"\r\n                [tooltipMandatory]=\"false\"\r\n                >{{\r\n                  responsibilityForm?.assignees?.list[0]?.employee_name\r\n                }}</span\r\n              >\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 greenBg\"\r\n                appPopover\r\n                (click)=\"user.popover()\"\r\n                placement=\"left\"\r\n                *ngIf=\"responsibilityForm?.assignees?.list?.length > 1\"\r\n              >\r\n                +{{ responsibilityForm?.assignees?.list?.length - 1 }}\r\n              </button>\r\n            </div>\r\n            <span\r\n              class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\r\n              *ngIf=\"\r\n                responsibilityForm?.assignees?.list?.length > 0 &&\r\n                responsibilityForm?.assigneeGroups?.list?.length > 0\r\n              \"\r\n              >&</span\r\n            >\r\n            <div\r\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n              *ngIf=\"responsibilityForm?.assigneeGroups?.list?.length\"\r\n            >\r\n              <i\r\n                class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                *ngIf=\"!allGroupAssignee || mode !== 'EDIT'\"\r\n                (click)=\"\r\n                  remove(\r\n                    'groupassignees',\r\n                    responsibilityForm?.assigneeGroups?.list[0]\r\n                  )\r\n                \"\r\n                >&#xe9ae;</i\r\n              >\r\n              <span\r\n                class=\"chipName vx-fs-11 vx-label-txt\"\r\n                [appTooltip]=\"\r\n                  responsibilityForm?.assigneeGroups?.list[0]?.group_name\r\n                \"\r\n                placement=\"bottom-left\"\r\n                type=\"black\"\r\n                delay=\"0\"\r\n                [tooltipMandatory]=\"false\"\r\n                >{{\r\n                  responsibilityForm?.assigneeGroups?.list[0]?.group_name\r\n                }}</span\r\n              >\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\r\n                (click)=\"group.popover()\"\r\n                placement=\"right\"\r\n                *ngIf=\"responsibilityForm?.assigneeGroups?.list?.length > 1\"\r\n              >\r\n                +{{ responsibilityForm?.assigneeGroups?.list?.length - 1 }}\r\n              </button>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.assignees?.length>1\" [class.plus]=\"responsibilityForm?.assignees?.length>2\" *ngIf=\"!featureFlag_groups\">\r\n                      <span class=\"chip\" *ngFor=\"let e_user of responsibilityForm?.assignees?.list?.slice(0,2)\"><i\r\n                              class=\"icons\" (click)=\"remove('assignees',e_user)\">&#xe90d;</i>\r\n                          {{e_user.member_name}}</span>\r\n                      <button class=\"count\" *ngIf=\"responsibilityForm?.assignees?.list?.length > 2\" type=\"button\"\r\n                          appPopover (click)=\"assignees.popover()\" placement=\"right\">+\r\n                          {{responsibilityForm?.assignees?.list?.slice(2).length}}</button>\r\n                  </div> -->\r\n          <!-- <div class=\"chip-container\" *ngIf=\"featureFlag_groups\">\r\n                      <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.assignees?.list?.length > 0\" >\r\n                          <i class=\"icons cross vx-mr-1\" (click)=\"remove('assignees',responsibilityForm?.assignees?.list[0])\" >&#xe90d;</i>\r\n                          <span class=\"chip\" [appTooltip]=\"responsibilityForm?.assignees?.list[0]?.employee_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\">{{responsibilityForm?.assignees?.list[0]?.employee_name}}</span></span>\r\n                          <button *ngIf=\"responsibilityForm?.assignees?.list?.length > 1\" class=\"count user\" appPopover (click)=\"user.popover()\" placement=\"left\"> +{{responsibilityForm?.assignees?.list?.length -1}}</button>\r\n                      </div>\r\n                      <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"  *ngIf=\"responsibilityForm?.assignees?.list?.length > 0 && responsibilityForm?.assigneeGroups?.list?.length > 0\" >&</span>\r\n                      <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.assigneeGroups?.list?.length\" >\r\n                          <i *ngIf=\"(!allGroupAssignee || mode !== 'EDIT')\" class=\"icons cross vx-mr-1\" (click)=\"remove('groupassignees',responsibilityForm?.assigneeGroups?.list[0])\" >&#xe90d;</i>\r\n                          <span class=\"chip\" [appTooltip]=\"responsibilityForm?.assigneeGroups?.list[0]?.group_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\">{{responsibilityForm?.assigneeGroups?.list[0]?.group_name}}</span></span>\r\n                          <button *ngIf=\"responsibilityForm?.assigneeGroups?.list?.length > 1\" class=\"count\" appPopover (click)=\"group.popover()\" placement=\"right\">+{{responsibilityForm?.assigneeGroups?.list?.length - 1}}</button>\r\n                      </div>\r\n                  </div> -->\r\n          <button\r\n            *ngIf=\"\r\n              activeSelector !== 'assignees' &&\r\n              (!featureFlag_groups ||\r\n                (featureFlag_groups && (!allGroupAssignee || mode !== 'EDIT')))\r\n            \"\r\n            class=\"edit\"\r\n            type=\"button\"\r\n            (click)=\"activateSelector('assignees', true)\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i> Edit\r\n          </button>\r\n        </div>\r\n        <app-popover #user [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ul class=\"action-item\">\r\n              <li\r\n                *ngFor=\"\r\n                  let e_user of responsibilityForm?.assignees?.list | slice : 1\r\n                \"\r\n              >\r\n                <div class=\"avatar-card\">\r\n                  <span class=\"value\">\r\n                    <i class=\"icons\" (click)=\"remove('assignees', e_user)\"\r\n                      >&#xe90d;</i\r\n                    >\r\n                    {{ e_user.member_name }}\r\n                  </span>\r\n                </div>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n        </app-popover>\r\n        <app-popover #group [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ul class=\"action-item\">\r\n              <li\r\n                *ngFor=\"\r\n                  let group of responsibilityForm?.assigneeGroups?.list\r\n                    | slice : 1\r\n                \"\r\n              >\r\n                <div class=\"avatar-card\">\r\n                  <span class=\"value\">\r\n                    <i\r\n                      *ngIf=\"\r\n                        !featureFlag_groups ||\r\n                        (featureFlag_groups &&\r\n                          (!allGroupAssignee || mode !== 'EDIT'))\r\n                      \"\r\n                      class=\"icons\"\r\n                      (click)=\"remove('groupassignees', group)\"\r\n                      >&#xe90d;</i\r\n                    >\r\n                    {{ group.group_name }}\r\n                  </span>\r\n                </div>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n        </app-popover>\r\n\r\n        <p\r\n          *ngIf=\"invalidType === 'who'\"\r\n          [appScrollInView]=\"true\"\r\n          class=\"error-message\"\r\n        >\r\n          Please select the person responsible for completing this\r\n          responsibility.\r\n        </p>\r\n        <ng-container *ngIf=\"!isGroupAssigned\">\r\n          <app-cs-radio\r\n            *ngIf=\"mode !== 'EDIT'\"\r\n            (checkedEvent)=\"responsibilityForm.assignees.whoCanComplete = 'ALL'\"\r\n            [checked]=\"responsibilityForm.assignees.whoCanComplete == 'ALL'\"\r\n            [name]=\"'what'\"\r\n            >ALL SELECTED PERSONS NEED TO COMPLETE THIS<i\r\n              class=\"icons\"\r\n              [appTooltip]=\"\r\n                'If selected, separate responsibilities will be created for each person.'\r\n              \"\r\n              placement=\"bottom-right\"\r\n              type=\"white\"\r\n              delay=\"0\"\r\n              [tooltipMandatory]=\"true\"\r\n              >&#xe91f;</i\r\n            >\r\n          </app-cs-radio>\r\n          <app-cs-radio\r\n            *ngIf=\"mode !== 'EDIT'\"\r\n            (checkedEvent)=\"\r\n              responsibilityForm.assignees.whoCanComplete = 'ANY_ONE'\r\n            \"\r\n            [checked]=\"responsibilityForm.assignees.whoCanComplete == 'ANY_ONE'\"\r\n            [name]=\"'what'\"\r\n            >ANY SELECTED PERSON CAN COMPLETE THIS\r\n            <i\r\n              class=\"icons\"\r\n              [appTooltip]=\"\r\n                'If selected, only one responsibility will be created.'\r\n              \"\r\n              placement=\"bottom-right\"\r\n              type=\"white\"\r\n              delay=\"0\"\r\n              [tooltipMandatory]=\"true\"\r\n              >&#xe91f;</i\r\n            >\r\n          </app-cs-radio>\r\n\r\n          <div\r\n            class=\"switch-row align-right\"\r\n            *ngIf=\"\r\n              mode == 'EDIT' &&\r\n              (!featureFlag_groups ||\r\n                (responsibilityForm?.assigneeGroups?.list.length === 0 &&\r\n                  featureFlag_groups))\r\n            \"\r\n          >\r\n            <app-cs-switch\r\n              (ngValueChange)=\"openAssigneeChangeConfirmation($event)\"\r\n              [ngValue]=\"\r\n                responsibilityForm.assignees.whoCanComplete == 'ANY_ONE'\r\n              \"\r\n            >\r\n              ANY SELECTED PERSON CAN COMPLETE THIS\r\n            </app-cs-switch>\r\n          </div>\r\n        </ng-container>\r\n        <app-popover #assignees [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ul class=\"action-item\">\r\n              <li\r\n                *ngFor=\"\r\n                  let e_user of responsibilityForm?.assignees?.list | slice : 1;\r\n                  let j = index\r\n                \"\r\n              >\r\n                <div class=\"avatar-card\">\r\n                  <span class=\"value\">\r\n                    <i class=\"icons\" (click)=\"remove('assignees', e_user)\"\r\n                      >&#xe90d;</i\r\n                    >\r\n                    {{ e_user.member_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    </div>\r\n  </div>\r\n\r\n  <!-- When? -->\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      sideSelectorElements.includes(activeSelector)\r\n    \"\r\n  >\r\n    <div\r\n      class=\"left\"\r\n      [class.checked]=\"\r\n        !responsibilityForm?.frequency || activeSelector === 'frequency'\r\n      \"\r\n    >\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\"\r\n        alt=\"im\"\r\n        *ngIf=\"!responsibilityForm?.frequency || activeSelector === 'frequency'\"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n        *ngIf=\"\r\n          responsibilityForm?.frequency &&\r\n          activeSelector !== 'frequency' &&\r\n          responsibilityForm?.frequency != '' &&\r\n          responsibilityForm?.frequency != '5~0~0~0'\r\n        \"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\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=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\"\r\n          >When? <span class=\"required\">*</span></label\r\n        >\r\n        <div\r\n          *ngIf=\"\r\n            responsibilityForm?.frequency == '' ||\r\n            responsibilityForm?.frequency == '5~0~0~0'\r\n          \"\r\n          class=\"select button-sec\"\r\n        >\r\n          <input\r\n            type=\"text\"\r\n            (click)=\"activateSelector('frequency', true)\"\r\n            [placeholder]=\"frequencyPlaceholder\"\r\n            readonly\r\n          />\r\n          <button (click)=\"activateSelector('frequency', true)\" type=\"button\">\r\n            Set A frequency\r\n          </button>\r\n        </div>\r\n        <div\r\n          *ngIf=\"\r\n            responsibilityForm?.frequency != '' &&\r\n            responsibilityForm?.frequency !== '5~0~0~0'\r\n          \"\r\n          class=\"selected button-sec\"\r\n        >\r\n          <span\r\n            class=\"chip\"\r\n            [appTooltip]=\"frequencyPlaceholder\"\r\n            placement=\"bottom-left\"\r\n            delay=\"0\"\r\n            type=\"black\"\r\n            [tooltipMandatory]=\"false\"\r\n            >{{ frequencyPlaceholder }}</span\r\n          >\r\n          <button\r\n            *ngIf=\"activeSelector !== 'frequency'\"\r\n            type=\"button\"\r\n            class=\"edit\"\r\n            (click)=\"activateSelector('frequency', true)\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i>Edit\r\n          </button>\r\n        </div>\r\n        <p\r\n          *ngIf=\"invalidType === 'when'\"\r\n          [appScrollInView]=\"true\"\r\n          class=\"error-message\"\r\n        >\r\n          Please select the frequency of occurrence for this responsibility.\r\n        </p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Notes -->\r\n  <div\r\n    class=\"form-group-row\"\r\n    [class.active]=\"activeSelector === 'notes'\"\r\n    [class.disabled]=\"\r\n      activeSelector &&\r\n      activeSelector !== 'notes' &&\r\n      sideSelectorElements.includes(activeSelector)\r\n    \"\r\n  >\r\n    <div\r\n      class=\"left\"\r\n      [class.checked]=\"\r\n        checkBlank(responsibilityForm?.description).trim() !== '' &&\r\n        !focus.description\r\n      \"\r\n    >\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/notes.svg\"\r\n        alt=\"im\"\r\n        *ngIf=\"\r\n          checkBlank(responsibilityForm?.description).trim() === '' ||\r\n          focus.description\r\n        \"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        *ngIf=\"\r\n          checkBlank(responsibilityForm?.description).trim() !== '' &&\r\n          !focus.description\r\n        \"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\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=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\">Notes</label>\r\n        <vcomply-editor\r\n          [(ngModel)]=\"responsibilityForm.description\"\r\n          [editorConfig]=\"{\r\n            mode: 'prime',\r\n            colorPalette: true,\r\n            link: true,\r\n            id: 'notes',\r\n            placeholder:\r\n              'Add more information about completing the responsibility'\r\n          }\"\r\n        ></vcomply-editor>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Objective -->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    *ngIf=\"moreOptions?.OBJECTIVE\"\r\n    [attr.id]=\"'OBJECTIVE'\"\r\n    [class.active]=\"activeSelector === 'objective'\"\r\n    [class.disabled]=\"\r\n      activeSelector &&\r\n      activeSelector !== 'objective' &&\r\n      sideSelectorElements.includes(activeSelector)\r\n    \"\r\n  >\r\n    <div\r\n      class=\"left\"\r\n      [class.checked]=\"\r\n        checkBlank(responsibilityForm?.objective).trim() !== '' &&\r\n        !focus.objective\r\n      \"\r\n    >\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/objectives.svg\"\r\n        alt=\"im\"\r\n        *ngIf=\"\r\n          checkBlank(responsibilityForm?.objective).trim() === '' ||\r\n          focus.objective\r\n        \"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n        *ngIf=\"\r\n          checkBlank(responsibilityForm?.objective).trim() !== '' &&\r\n          !focus.objective\r\n        \"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\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=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\">Objective</label>\r\n        <vcomply-editor\r\n          [(ngModel)]=\"responsibilityForm.objective\"\r\n          [editorConfig]=\"{\r\n            mode: 'prime',\r\n            colorPalette: true,\r\n            id: 'objective',\r\n            link: true,\r\n            placeholder:\r\n              'This option lets you specify an objective for the responsibility.'\r\n          }\"\r\n        ></vcomply-editor>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Responsibility Center -->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    *ngIf=\"moreOptions?.RC\"\r\n    [attr.id]=\"'RC'\"\r\n    [class.active]=\"activeSelector === 'rc'\"\r\n    [class.disabled]=\"\r\n      activeSelector &&\r\n      activeSelector !== 'rc' &&\r\n      sideSelectorElements.includes(activeSelector)\r\n    \"\r\n  >\r\n    <div\r\n      class=\"left\"\r\n      [class.checked]=\"\r\n        responsibilityForm?.rc?.length > 0 && activeSelector !== 'rc'\r\n      \"\r\n    >\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/responsibility-center.svg\"\r\n        alt=\"\"\r\n        *ngIf=\"responsibilityForm?.rc?.length == 0 || activeSelector === 'rc'\"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n        *ngIf=\"responsibilityForm?.rc?.length > 0 && activeSelector !== 'rc'\"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\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=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\">Responsibility Center </label>\r\n\r\n        <div class=\"select\" *ngIf=\"responsibilityForm?.rc?.length === 0\">\r\n          <div\r\n            class=\"custom-input\"\r\n            (click)=\"activateSelector('rc', true)\"\r\n            aria-placeholder=\"Select the responsibility center or the responsibility centers for this responsibility.\"\r\n          ></div>\r\n          <!-- <input type=\"text\" (click)=\"activateSelector('rc',true)\" placeholder=\"Select Responsibility Center(s)\" readonly> -->\r\n        </div>\r\n\r\n        <div\r\n          class=\"selected\"\r\n          *ngIf=\"responsibilityForm?.rc?.length > 0\"\r\n          [class.readOnly]=\"openedFrom === 'RISK_TREATMENT'\"\r\n        >\r\n          <div\r\n            class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n            *ngFor=\"let rc of responsibilityForm?.rc?.slice(0, 1)\"\r\n          >\r\n            <i\r\n              class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n              (click)=\"remove('rc', rc)\"\r\n              *ngIf=\"openedFrom !== 'RISK_TREATMENT'\"\r\n              >&#xe9ae;</i\r\n            >\r\n            <span\r\n              class=\"chipName vx-fs-11 vx-label-txt\"\r\n              [appTooltip]=\"rc?.item_name\"\r\n              placement=\"bottom-left\"\r\n              delay=\"0\"\r\n              type=\"black\"\r\n              [tooltipMandatory]=\"false\"\r\n              >{{ rc?.item_name }}</span\r\n            >\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              *ngIf=\"responsibilityForm?.rc?.length > 1\"\r\n              appPopover\r\n              (click)=\"rcPopover.popover()\"\r\n              placement=\"left\"\r\n            >\r\n              +{{ responsibilityForm?.rc?.slice(1).length }}\r\n            </button>\r\n          </div>\r\n\r\n          <!-- <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.rc?.length>1\" [class.plus]=\"responsibilityForm?.rc?.length>2\">\r\n                      <span class=\"chip\" *ngFor=\"let rc of responsibilityForm?.rc?.slice(0,2)\"><i class=\"icons\" (click)=\"remove('rc',rc)\" *ngIf=\"openedFrom !== 'RISK_TREATMENT'\">&#xe90d;</i>{{rc?.item_name}}</span>\r\n                      <button class=\"count\" *ngIf=\"responsibilityForm?.rc?.length > 2\" type=\"button\" appPopover (click)=\"rc.popover()\" placement=\"right\" placement=\"right\">+{{responsibilityForm?.rc?.slice(2).length}}</button>\r\n                  </div> -->\r\n\r\n          <button\r\n            *ngIf=\"activeSelector !== 'rc' && openedFrom !== 'RISK_TREATMENT'\"\r\n            class=\"edit\"\r\n            type=\"button\"\r\n            (click)=\"activateSelector('rc', true)\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i> Edit\r\n          </button>\r\n        </div>\r\n        <app-popover #rcPopover [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ul class=\"action-item\">\r\n              <li\r\n                *ngFor=\"\r\n                  let rc of responsibilityForm?.rc | slice : 1;\r\n                  let j = index\r\n                \"\r\n              >\r\n                <div class=\"avatar-card\">\r\n                  <span class=\"value\">\r\n                    <i class=\"icons\" (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\r\n        <ng-container\r\n          *ngIf=\"\r\n            isResponsibilityRcLinkEnabled &&\r\n            (mode != 'EDIT' || responsibilityForm?.rc?.length <= 1)\r\n          \"\r\n        >\r\n          <!-- <app-cs-radio><div [appTooltip]=\"'Create separate responsibilities for each responsibility center'\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"true\">CREATE SEPARATE RESPONSIBILITIES FOR EACH RESPONSIBILITY CEN\u2026</div><i class=\"icons\" [appTooltip]=\"'If selected, separate responsibilities will be created for each Responsibility Center.'\" placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i></app-cs-radio> -->\r\n          <app-cs-radio\r\n            [class.disabled]=\"\r\n              mode == 'EDIT' &&\r\n              responsibilityForm.responsibilityCenterType === 1 &&\r\n              responsibilityForm?.rc?.length > 1\r\n            \"\r\n            [checked]=\"responsibilityCenterType === 0\"\r\n            [name]=\"'ff_responsibility_rc_link'\"\r\n            (checkedEvent)=\"onRcTypeChange(0)\"\r\n            ><div\r\n              class=\"rc-radio-text\"\r\n              [appTooltip]=\"\r\n                'Create separate responsibilities for each responsibility centers'\r\n              \"\r\n              placement=\"bottom-left\"\r\n              type=\"black\"\r\n              delay=\"0\"\r\n              [tooltipMandatory]=\"true\"\r\n            >\r\n              CREATE SEPARATE RESPONSIBILITIES FOR EACH RESPONSIBILITY CEN\u2026\r\n            </div>\r\n            <i\r\n              class=\"icons\"\r\n              [appTooltip]=\"\r\n                'If selected, separate responsibilities will be created for each Responsibility Center.'\r\n              \"\r\n              placement=\"bottom-right\"\r\n              type=\"white\"\r\n              delay=\"0\"\r\n              [tooltipMandatory]=\"true\"\r\n              >&#xe91f;</i\r\n            ></app-cs-radio\r\n          >\r\n          <app-cs-radio\r\n            [class.disabled]=\"\r\n              mode == 'EDIT' &&\r\n              responsibilityForm.responsibilityCenterType === 1 &&\r\n              responsibilityForm?.rc?.length > 1\r\n            \"\r\n            [checked]=\"responsibilityCenterType === 1\"\r\n            [name]=\"'ff_responsibility_rc_link'\"\r\n            (checkedEvent)=\"onRcTypeChange(1)\"\r\n            >DISPLAY THE SAME RESPONSIBILITY IN ALL RESPONSIBILITY CENTERS<i\r\n              class=\"icons\"\r\n              [appTooltip]=\"\r\n                'If selected, the same responsibility will be linked to each Responsibility Center.'\r\n              \"\r\n              placement=\"bottom-right\"\r\n              type=\"white\"\r\n              delay=\"0\"\r\n              [tooltipMandatory]=\"true\"\r\n              >&#xe91f;</i\r\n            ></app-cs-radio\r\n          >\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Program -->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    *ngIf=\"moreOptions?.PROGRAM\"\r\n    [attr.id]=\"'PROGRAM'\"\r\n    [class.active]=\"activeSelector === 'program'\"\r\n    [class.disabled]=\"\r\n      activeSelector &&\r\n      activeSelector !== 'program' &&\r\n      sideSelectorElements.includes(activeSelector)\r\n    \"\r\n  >\r\n    <div\r\n      class=\"left\"\r\n      [class.checked]=\"\r\n        responsibilityForm?.program?.length > 0 && activeSelector !== 'program'\r\n      \"\r\n    >\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\"\r\n        alt=\"\"\r\n        *ngIf=\"\r\n          responsibilityForm?.program?.length == 0 ||\r\n          activeSelector === 'program'\r\n        \"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n        *ngIf=\"\r\n          responsibilityForm?.program?.length > 0 &&\r\n          activeSelector !== 'program'\r\n        \"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\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=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\">Program</label>\r\n        <div class=\"select\" *ngIf=\"responsibilityForm?.program?.length == 0\">\r\n          <div\r\n            class=\"custom-input\"\r\n            (click)=\"activateSelector('program', true)\"\r\n            aria-placeholder=\"Select the Program or Program Categories that this responsibility relates to.\"\r\n          ></div>\r\n          <!-- <input type=\"text\" (click)=\"activateSelector('program',true)\" placeholder=\"Select Responsibility program(s)\" readonly> -->\r\n        </div>\r\n        <div class=\"selected\" *ngIf=\"responsibilityForm?.program?.length > 0\">\r\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n            <ng-container *ngFor=\"let program of responsibilityForm?.program\">\r\n              <i\r\n                class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                *ngIf=\"\r\n                  !hiddenList?.includes('PROGRAM') &&\r\n                  !program?.isViewOnlyProgram\r\n                \"\r\n                (click)=\"remove('program', program)\"\r\n                >&#xe9ae;</i\r\n              >\r\n              <span\r\n                class=\"chipName vx-fs-11 vx-label-txt\"\r\n                [appTooltip]=\"program?.name ?? '--'\"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n                >{{ program?.name ?? \"--\" }}</span\r\n              >\r\n            </ng-container>\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\r\n              (click)=\"program.popover()\"\r\n              placement=\"right\"\r\n              *ngIf=\"responsibilityForm?.linkedProgram?.length > 1\"\r\n            >\r\n              +{{ responsibilityForm?.linkedProgram?.length - 1 }}\r\n            </button>\r\n          </div>\r\n\r\n          <!-- <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.program?.length>1\" [class.plus]=\"responsibilityForm?.program?.length>2\">\r\n                              <span class=\"chip\" *ngFor=\"let program of responsibilityForm?.program\"><i class=\"icons\" *ngIf=\"feature.isFeatureEnabled('ff_deprecate_primary_program_flag')\" (click)=\"remove('program',program)\">&#xe90d;</i> {{program?.name??'--'}}</span>\r\n                              <!- - <button *ngIf=\"responsibilityForm?.program?.length > 2\" class=\"count\" type=\"button\" appPopover (click)=\"program.popover()\" placement=\"right\">+ {{responsibilityForm?.program?.slice(2).length}}</button> - ->\r\n                              <button *ngIf=\"responsibilityForm?.linkedProgram?.length > 1\" class=\"count\" type=\"button\" appPopover (click)=\"program.popover()\" placement=\"right\">+ {{responsibilityForm?.linkedProgram?.length - 1}}</button>\r\n                          </div> -->\r\n\r\n          <button\r\n            *ngIf=\"\r\n              activeSelector !== 'program' && !hiddenList.includes('PROGRAM')\r\n            \"\r\n            class=\"edit\"\r\n            type=\"button\"\r\n            (click)=\"activateSelector('program', true)\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i> Edit\r\n          </button>\r\n        </div>\r\n\r\n        <app-popover #program [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ul class=\"action-item\">\r\n              <ng-container\r\n                *ngIf=\"\r\n                  !feature.isFeatureEnabled('ff_deprecate_primary_program_flag')\r\n                \"\r\n              >\r\n                <li class=\"multiple-program\">\r\n                  <div class=\"avatar-card\">\r\n                    <span\r\n                      class=\"value\"\r\n                      [appTooltip]=\"responsibilityForm?.program[0]?.name\"\r\n                      placement=\"bottom\"\r\n                      type=\"black\"\r\n                      delay=\"0\"\r\n                      [tooltipMandatory]=\"false\"\r\n                    >\r\n                      {{ responsibilityForm?.program[0]?.name }}\r\n                    </span>\r\n                    <div class=\"primary-label\">PRIMARY</div>\r\n                  </div>\r\n                </li>\r\n              </ng-container>\r\n              <li\r\n                *ngFor=\"\r\n                  let program of responsibilityForm?.linkedProgram;\r\n                  let j = index\r\n                \"\r\n              >\r\n                <div\r\n                  class=\"avatar-card\"\r\n                  *ngIf=\"\r\n                    program?.category_id !==\r\n                    responsibilityForm?.program[0]?.category_id\r\n                  \"\r\n                >\r\n                  <span\r\n                    class=\"value\"\r\n                    [appTooltip]=\"program?.name\"\r\n                    placement=\"bottom\"\r\n                    type=\"black\"\r\n                    delay=\"0\"\r\n                    [tooltipMandatory]=\"false\"\r\n                  >\r\n                    <i\r\n                      *ngIf=\"\r\n                        !hiddenList?.includes('PROGRAM') &&\r\n                        !program?.isViewOnlyProgram\r\n                      \"\r\n                      class=\"icons\"\r\n                      (click)=\"remove('program', program)\"\r\n                      >&#xe90d;</i\r\n                    >\r\n                    {{ program?.name }}\r\n                  </span>\r\n                </div>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n        </app-popover>\r\n        <div *ngIf=\"responsibilityForm?.customTags?.length > 0\">\r\n          <ng-container *ngFor=\"let tag of responsibilityForm?.customTags\">\r\n            <ng-container *ngIf=\"tag?.tag_name?.trim()\">\r\n              <label class=\"vx-control-panel vx-mt-2\">{{\r\n                tag?.tag_name\r\n              }}</label>\r\n              <input\r\n                type=\"text\"\r\n                [(ngModel)]=\"tag.value\"\r\n                placeholder=\"{{ tag?.tag_name }}\"\r\n              />\r\n            </ng-container>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Format & Evidence -->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    *ngIf=\"moreOptions?.FORMATE_EVIDENCE\"\r\n    [attr.id]=\"'FORMATE_EVIDENCE'\"\r\n    [class.active]=\"activeSelector === 'formate_evidence'\"\r\n    [class.disabled]=\"\r\n      activeSelector &&\r\n      activeSelector !== 'formate_evidence' &&\r\n      sideSelectorElements.includes(activeSelector)\r\n    \"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"false\">\r\n      <img\r\n        *ngIf=\"\r\n          this.responsibilityForm.formatAndEvidence.evidenceRequired == false &&\r\n          this.responsibilityForm.formatAndEvidence.formatFiles.length == 0 &&\r\n          this.responsibilityForm.formatAndEvidence.formatLinks?.length == 0\r\n        \"\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/format-evidence.svg\"\r\n        alt=\"im\"\r\n      />\r\n\r\n      <svg\r\n        *ngIf=\"\r\n          this.responsibilityForm.formatAndEvidence.evidenceRequired ||\r\n          this.responsibilityForm.formatAndEvidence.formatFiles.length ||\r\n          this.responsibilityForm.formatAndEvidence.formatLinks?.length\r\n        \"\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 class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\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=\"right\">\r\n      <app-format-and-evidence\r\n        (updateFiles)=\"saveSelectedList('formate_evidence', $event)\"\r\n        [mode]=\"'responsibility'\"\r\n        [formatEvidanceData]=\"responsibilityForm?.formatAndEvidence\"\r\n      >\r\n      </app-format-and-evidence>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Assessment -->\r\n  <div\r\n    *ngIf=\"moreOptions?.ASSESSMENT\"\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    [attr.id]=\"'ASSESSMENT'\"\r\n    [class.active]=\"false\"\r\n    [class.disabled]=\"false\"\r\n  >\r\n    <div\r\n      class=\"left\"\r\n      [class.checked]=\"responsibilityForm.assessment?.assessment_id\"\r\n    >\r\n      <img\r\n        *ngIf=\"!responsibilityForm.assessment?.assessment_id\"\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/assessments.svg\"\r\n        alt=\"im\"\r\n      />\r\n\r\n      <svg\r\n        *ngIf=\"responsibilityForm.assessment?.assessment_id\"\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 class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\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=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\">ASSESSMENTS</label>\r\n        <div\r\n          *ngIf=\"!responsibilityForm.assessment?.assessment_id\"\r\n          class=\"select\"\r\n        >\r\n          <input\r\n            type=\"text\"\r\n            (click)=\"\r\n              activateSelector('isAssessment', true); isAssessment = true\r\n            \"\r\n            placeholder=\"Select an assessment for this responsibility\"\r\n            [disabled]=\"responsibilityForm.checkpoints?.length\"\r\n            readonly\r\n          />\r\n        </div>\r\n        <div\r\n          class=\"selected\"\r\n          *ngIf=\"responsibilityForm.assessment?.assessment_id\"\r\n        >\r\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n            <i\r\n              *ngIf=\"assessmentDetails?.assessment_type !== 'compliance_audit'\"\r\n              class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n              (click)=\"remove('assessment', category)\"\r\n              >&#xe9ae;</i\r\n            >\r\n            <span\r\n              class=\"chipName vx-fs-11 vx-label-txt\"\r\n              [appTooltip]=\"\r\n                responsibilityForm.assessment?.assessmentDetails\r\n                  ?.assessment_name\r\n              \"\r\n              placement=\"bottom-left\"\r\n              delay=\"0\"\r\n              type=\"black\"\r\n              [tooltipMandatory]=\"false\"\r\n              >{{\r\n                responsibilityForm.assessment?.assessmentDetails\r\n                  ?.assessment_name\r\n              }}</span\r\n            >\r\n            <div\r\n              class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-ml-1 vx-text-center\"\r\n            >\r\n              {{ responsibilityForm.assessment?.assessmentDetails?.questions }}\r\n              {{\r\n                responsibilityForm.assessment?.assessmentDetails?.questions > 1\r\n                  ? \"Questions\"\r\n                  : \"Question\"\r\n              }}\r\n            </div>\r\n          </div>\r\n\r\n          <button\r\n            *ngIf=\"assessmentDetails?.assessment_type !== 'compliance_audit'\"\r\n            (click)=\"\r\n              activateSelector('isAssessment', true); isAssessment = true\r\n            \"\r\n            class=\"edit\"\r\n            type=\"button\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i> Edit\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Checkpoints -->\r\n  <!-- *ngIf=\"moreOptions.checkpoints\" -->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    *ngIf=\"moreOptions?.CHECKPOINTS\"\r\n    [attr.id]=\"'CHECKPOINTS'\"\r\n    [class.active]=\"activeSelector === 'checkpoints'\"\r\n    [class.disabled]=\"\r\n      activeSelector &&\r\n      activeSelector !== 'checkpoints' &&\r\n      sideSelectorElements.includes(activeSelector)\r\n    \"\r\n  >\r\n    <div class=\"left\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/checkpoints.svg\"\r\n        alt=\"im\"\r\n        *ngIf=\"\r\n          responsibilityForm?.checkpoints?.length == 0 ||\r\n          activeSelector === 'checkpoints'\r\n        \"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n        *ngIf=\"\r\n          responsibilityForm?.checkpoints?.length > 0 &&\r\n          activeSelector !== 'checkpoints'\r\n        \"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\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=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\">\r\n          <!-- {{responsibilityForm.checkpoints|json}}\r\n                {{responsibilityForm.checkpointInstruction}} -->\r\n\r\n          Checkpoints\r\n          <!-- <button *ngIf=\"responsibilityForm?.checkpoints?.length === 0\" class=\"button\"\r\n                      (click)=\"activateSelector('checkpoints',true)\">+ Add Checkpoints</button> -->\r\n        </label>\r\n        <div\r\n          class=\"select button-sec\"\r\n          *ngIf=\"responsibilityForm?.checkpoints?.length === 0\"\r\n        >\r\n          <input\r\n            [disabled]=\"!responsibilityForm.checkpoints?.length\"\r\n            type=\"text\"\r\n            (click)=\"activateSelector('checkpoints', true)\"\r\n            placeholder=\"Add checkpoints for this responsibility\"\r\n            readonly\r\n          />\r\n          <button\r\n            [disabled]=\"!responsibilityForm.checkpoints?.length\"\r\n            (click)=\"activateSelector('checkpoints', true)\"\r\n            type=\"button\"\r\n          >\r\n            Add Checkpoints\r\n          </button>\r\n        </div>\r\n        <div\r\n          class=\"selected\"\r\n          *ngIf=\"responsibilityForm.checkpoints?.length > 0\"\r\n        >\r\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n            <ng-container\r\n              *ngFor=\"\r\n                let checkpoint of responsibilityForm.checkpoints?.slice(0, 1)\r\n              \"\r\n            >\r\n              <span\r\n                class=\"chipName vx-fs-11 vx-label-txt\"\r\n                [appTooltip]=\"checkpoint?.label\"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n                >{{ checkpoint?.label }}</span\r\n              >\r\n            </ng-container>\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\r\n              (click)=\"checkpoint.popover()\"\r\n              placement=\"right\"\r\n              *ngIf=\"responsibilityForm.checkpoints?.length > 1\"\r\n            >\r\n              +{{ responsibilityForm.checkpoints?.length - 1 }}\r\n            </button>\r\n          </div>\r\n\r\n          <!-- <div class=\"chip-container checkpoints\" [class.more-one]=\"responsibilityForm.checkpoints?.length>1\" [class.plus]=\"responsibilityForm.checkpoints?.length>2\">\r\n                      <span class=\"chip\" *ngFor=\"let checkpoint of responsibilityForm.checkpoints?.slice(0,1)\">{{checkpoint?.label}}</span>\r\n                      <button class=\"count\" *ngIf=\"responsibilityForm.checkpoints?.length > 1\" type=\"button\" appPopover (click)=\"checkpoint.popover()\" placement=\"right\">+{{responsibilityForm.checkpoints?.length- 1}}</button>\r\n                  </div> -->\r\n\r\n          <button\r\n            *ngIf=\"activeSelector !== 'checkpoints'\"\r\n            class=\"edit\"\r\n            type=\"button\"\r\n            (click)=\"activateSelector('checkpoints', true)\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i> Edit\r\n          </button>\r\n        </div>\r\n      </div>\r\n      <div\r\n        *ngIf=\"this.responsibilityForm.checkpoints?.length\"\r\n        class=\"assessment-text\"\r\n      >\r\n        <i class=\"icons alert-icon\">&#xe930;</i>\r\n        <span\r\n          >You can now use the new <strong>Checkpoints </strong>or\r\n          <strong>Assessments</strong> feature instead of the old checkpoints\r\n          functionality to create analytical questions.\r\n          <button\r\n            class=\"remove-btn\"\r\n            (click)=\"onRemoveCheckpoints('checkpoint')\"\r\n          >\r\n            Remove Checkpoints\r\n          </button>\r\n          to continue.</span\r\n        >\r\n      </div>\r\n      <app-popover #checkpoint [dontCloseonClick]=\"true\">\r\n        <div class=\"wf-action-list\">\r\n          <ul class=\"action-item\">\r\n            <li\r\n              *ngFor=\"\r\n                let checkpoint of responsibilityForm.checkpoints | slice : 1;\r\n                let j = index\r\n              \"\r\n            >\r\n              <div class=\"avatar-card\">\r\n                <span class=\"value\">\r\n                  {{ checkpoint?.label }}\r\n                </span>\r\n              </div>\r\n            </li>\r\n          </ul>\r\n        </div>\r\n      </app-popover>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- New  Checkpoints -->\r\n  <!-- *ngIf=\"moreOptions.checkpoints\" -->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    *ngIf=\"moreOptions?.CHECKPOINTS_NEW\"\r\n    [attr.id]=\"'CHECKPOINTS-NEW'\"\r\n    [class.active]=\"activeSelector === 'checkpoints-new'\"\r\n  >\r\n    <div class=\"left\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/checkpoints.svg\"\r\n        alt=\"im\"\r\n        *ngIf=\"\r\n          responsibilityForm?.checkpoints?.length == 0 ||\r\n          activeSelector === 'checkpoints'\r\n        \"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n        *ngIf=\"checkpointCount > 0 && activeSelector !== 'checkpoints'\"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\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=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\">\r\n          <!-- {{responsibilityForm.checkpoints|json}}\r\n                {{responsibilityForm.checkpointInstruction}} -->\r\n\r\n          Checkpoints\r\n          <!-- <span class=\"checkpoint-version\"> V2.0</span> -->\r\n          <!-- <button  class=\"button\"\r\n                      (click)=\"activateSelector('checkpoints-new',true)\">+ Add Checkpoints</button> -->\r\n        </label>\r\n        <div class=\"select button-sec\" *ngIf=\"checkpointCount === 0\">\r\n          <input\r\n            type=\"text\"\r\n            (click)=\"activateSelector('checkpoints-new', true)\"\r\n            placeholder=\"Add checkpoints for this responsibility\"\r\n            readonly\r\n          />\r\n          <button\r\n            (click)=\"activateSelector('checkpoints-new', true)\"\r\n            type=\"button\"\r\n          >\r\n            Add Checkpoints\r\n          </button>\r\n        </div>\r\n        <div class=\"selected\" *ngIf=\"checkpointCount > 0\">\r\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n            <i\r\n              class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n              (click)=\"onRemoveCheckpoints('new-checkpoints')\"\r\n              >&#xe9ae;</i\r\n            >\r\n            <span class=\"chipName vx-fs-11 vx-label-txt\"\r\n              >{{ checkpointCount }}\r\n              {{ checkpointCount > 1 ? \"Questions\" : \"Question\" }}</span\r\n            >\r\n          </div>\r\n\r\n          <!-- <div class=\"chip-container checkpoints\" [class.more-one]=\"checkpointCount > 0\">\r\n                      <span class=\"chip\">\r\n                          <i class=\"icons\" (click)=\"onRemoveCheckpoints('new-checkpoints')\">&#xe90d;</i>\r\n                          {{checkpointCount}} {{checkpointCount > 1 ? 'Questions': 'Question'}}</span>\r\n                  </div> -->\r\n\r\n          <button\r\n            *ngIf=\"activeSelector !== 'checkpoints-new'\"\r\n            class=\"edit\"\r\n            type=\"button\"\r\n            (click)=\"activateSelector('checkpoints-new', true)\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i> Edit\r\n          </button>\r\n        </div>\r\n      </div>\r\n      <app-popover #checkpoint [dontCloseonClick]=\"true\">\r\n        <div class=\"wf-action-list\">\r\n          <ul class=\"action-item\">\r\n            <li\r\n              *ngFor=\"\r\n                let checkpoint of responsibilityForm.checkpoints | slice : 1;\r\n                let j = index\r\n              \"\r\n            >\r\n              <div class=\"avatar-card\">\r\n                <span class=\"value\">\r\n                  {{ checkpoint?.label }}\r\n                </span>\r\n              </div>\r\n            </li>\r\n          </ul>\r\n        </div>\r\n      </app-popover>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Risk Classification -->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    *ngIf=\"moreOptions?.RISK_CLASSIFICATION\"\r\n    [attr.id]=\"'RISK_CLASSIFICATION'\"\r\n    [class.active]=\"activeSelector === 'riskCalculator'\"\r\n    [class.disabled]=\"\r\n      activeSelector &&\r\n      activeSelector !== 'riskCalculator' &&\r\n      sideSelectorElements.includes(activeSelector)\r\n    \"\r\n  >\r\n    <div class=\"left\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/risks.svg\"\r\n        alt=\"im\"\r\n      />\r\n\r\n      <svg\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 class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\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=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\">\r\n          Risk Classification\r\n          <button\r\n            (click)=\"activateSelector('riskCalculator', true)\"\r\n            class=\"button\"\r\n          >\r\n            + Risk Calculator\r\n          </button>\r\n        </label>\r\n\r\n        <div class=\"classification\">\r\n          <label\r\n            class=\"low\"\r\n            *ngFor=\"let risk of riskClassification\"\r\n            [ngClass]=\"[risk.class]\"\r\n          >\r\n            <input\r\n              type=\"radio\"\r\n              name=\"classification\"\r\n              [(ngModel)]=\"responsibilityForm.riskClass\"\r\n              [value]=\"risk?.value\"\r\n            />\r\n            <span>{{ risk?.name }}</span>\r\n          </label>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Reviewer -->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    *ngIf=\"moreOptions?.REVIEWER\"\r\n    [attr.id]=\"'REVIEWER'\"\r\n    [class.active]=\"\r\n      activeSelector === 'reviewerFrequency' || activeSelector === 'reviewer'\r\n    \"\r\n    [class.disabled]=\"\r\n      activeSelector &&\r\n      activeSelector !== 'reviewer' &&\r\n      sideSelectorElements.includes(activeSelector)\r\n    \"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"false\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/reviewer.svg\"\r\n        alt=\"\"\r\n        *ngIf=\"\r\n          responsibilityForm?.reviewers?.list?.length == 0 ||\r\n          activeSelector === 'reviewer'\r\n        \"\r\n      />\r\n\r\n      <svg\r\n        *ngIf=\"\r\n          responsibilityForm?.reviewers?.list?.length > 0 &&\r\n          activeSelector !== 'reviewer'\r\n        \"\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 class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\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=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\">Reviewer</label>\r\n        <div\r\n          class=\"select\"\r\n          *ngIf=\"\r\n            (responsibilityForm?.reviewers?.list?.length == 0 &&\r\n              !featureFlag_groups) ||\r\n            (responsibilityForm?.reviewers?.list?.length == 0 &&\r\n              responsibilityForm?.groupReviewers?.list?.length == 0 &&\r\n              featureFlag_groups)\r\n          \"\r\n        >\r\n          <input\r\n            type=\"text\"\r\n            (click)=\"activateSelector('reviewer', true)\"\r\n            placeholder=\"Select Reviewer\"\r\n            readonly\r\n          />\r\n        </div>\r\n        <div\r\n          class=\"selected\"\r\n          *ngIf=\"\r\n            (responsibilityForm?.reviewers?.list?.length > 0 &&\r\n              !featureFlag_groups) ||\r\n            ((responsibilityForm?.reviewers?.list?.length > 0 ||\r\n              responsibilityForm?.groupReviewers?.list?.length > 0) &&\r\n              featureFlag_groups)\r\n          \"\r\n        >\r\n          <div\r\n            class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n            *ngIf=\"!featureFlag_groups\"\r\n          >\r\n            <ng-container\r\n              *ngFor=\"\r\n                let reviewer of responsibilityForm?.reviewers?.list?.slice(0, 1)\r\n              \"\r\n            >\r\n              <i\r\n                class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                (click)=\"remove('reviewer', reviewer)\"\r\n                >&#xe9ae;</i\r\n              >\r\n              <span\r\n                class=\"chipName vx-fs-11 vx-label-txt\"\r\n                [appTooltip]=\"reviewer.member_name\"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n                >{{ reviewer.member_name }}</span\r\n              >\r\n            </ng-container>\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\r\n              (click)=\"reviewer.popover()\"\r\n              placement=\"right\"\r\n              *ngIf=\"responsibilityForm?.reviewers?.list?.length > 1\"\r\n            >\r\n              +{{ responsibilityForm?.reviewers?.list?.slice(1).length }}\r\n            </button>\r\n          </div>\r\n\r\n          <!-- <div class=\"chip-container\" *ngIf=\"!featureFlag_groups\" [class.more-one]=\"responsibilityForm?.reviewers?.list?.length>1\"\r\n                      [class.plus]=\"responsibilityForm?.reviewers?.list?.length>2\">\r\n                      <span class=\"chip\" *ngFor=\"let reviewer of responsibilityForm?.reviewers?.list?.slice(0,2)\"><i class=\"icons\" (click)=\"remove('reviewer',reviewer)\">&#xe90d;</i> {{reviewer.member_name}}</span>\r\n                      <button class=\"count\" *ngIf=\"responsibilityForm?.reviewers?.list?.length > 2\" type=\"button\" appPopover (click)=\"reviewer.popover()\" placement=\"right\">+{{responsibilityForm?.reviewers?.list?.slice(2).length}}</button>\r\n                  </div> -->\r\n\r\n          <div class=\"vx-d-flex vx-align-center\" *ngIf=\"featureFlag_groups\">\r\n            <div\r\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n              *ngIf=\"responsibilityForm?.reviewers?.list.length > 0\"\r\n            >\r\n              <i\r\n                class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                (click)=\"\r\n                  remove('reviewer', responsibilityForm?.reviewers?.list[0])\r\n                \"\r\n                >&#xe9ae;</i\r\n              >\r\n              <span\r\n                class=\"chipName vx-fs-11 vx-label-txt\"\r\n                [appTooltip]=\"\r\n                  responsibilityForm?.reviewers?.list[0]?.employee_name\r\n                \"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n                >{{\r\n                  responsibilityForm?.reviewers?.list[0]?.employee_name\r\n                }}</span\r\n              >\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 greenBg\"\r\n                appPopover\r\n                (click)=\"user.popover()\"\r\n                placement=\"right\"\r\n                *ngIf=\"responsibilityForm?.reviewers?.list?.length > 1\"\r\n              >\r\n                +{{ responsibilityForm?.reviewers?.list?.length - 1 }}\r\n              </button>\r\n            </div>\r\n            <div\r\n              class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\r\n              *ngIf=\"\r\n                responsibilityForm?.reviewers?.list.length > 0 &&\r\n                responsibilityForm?.groupReviewers?.list?.length > 0\r\n              \"\r\n            >\r\n              &\r\n            </div>\r\n            <div\r\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n              *ngIf=\"responsibilityForm?.groupReviewers?.list.length > 0\"\r\n            >\r\n              <i\r\n                class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                (click)=\"\r\n                  remove(\r\n                    'groupReviewer',\r\n                    responsibilityForm?.groupReviewers?.list[0]\r\n                  )\r\n                \"\r\n                >&#xe9ae;</i\r\n              >\r\n              <span\r\n                class=\"chipName vx-fs-11 vx-label-txt\"\r\n                [appTooltip]=\"\r\n                  responsibilityForm?.groupReviewers?.list[0]?.group_name\r\n                \"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n                >{{\r\n                  responsibilityForm?.groupReviewers?.list[0]?.group_name\r\n                }}</span\r\n              >\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\r\n                (click)=\"group.popover()\"\r\n                placement=\"right\"\r\n                *ngIf=\"responsibilityForm?.groupReviewers?.list?.length > 1\"\r\n              >\r\n                +{{ responsibilityForm?.groupReviewers?.list?.length - 1 }}\r\n              </button>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- <div class=\"chip-container\" *ngIf=\"featureFlag_groups\">\r\n                      <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.reviewers?.list.length > 0 \">\r\n                          <i class=\"icons cross vx-mr-1\" (click)=\"remove('reviewer',responsibilityForm?.reviewers?.list[0])\" >&#xe90d;</i>\r\n                          <span class=\"chip\" [appTooltip]=\"responsibilityForm?.reviewers?.list[0]?.employee_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\">{{responsibilityForm?.reviewers?.list[0]?.employee_name}}</span></span>\r\n                          <button *ngIf=\"responsibilityForm?.reviewers?.list?.length > 1\" class=\"count user\" appPopover (click)=\"user.popover()\" placement=\"left\"> +{{responsibilityForm?.reviewers?.list?.length - 1}}</button>\r\n                      </div>\r\n                      <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"responsibilityForm?.reviewers?.list.length > 0 && responsibilityForm?.groupReviewers?.list?.length > 0\">&</span>\r\n                      <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.groupReviewers?.list.length > 0 \" >\r\n                          <i class=\"icons cross vx-mr-1\" (click)=\"remove('groupReviewer',responsibilityForm?.groupReviewers?.list[0])\">&#xe90d;</i>\r\n                          <span class=\"chip\" [appTooltip]=\"responsibilityForm?.groupReviewers?.list[0]?.group_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\">{{responsibilityForm?.groupReviewers?.list[0]?.group_name}}</span></span>\r\n                          <button *ngIf=\"responsibilityForm?.groupReviewers?.list?.length > 1\" class=\"count\" appPopover (click)=\"group.popover()\" placement=\"right\">+{{responsibilityForm?.groupReviewers?.list?.length - 1}}</button>\r\n\r\n                      </div>\r\n                  </div> -->\r\n\r\n          <button\r\n            *ngIf=\"activeSelector !== 'reviewer'\"\r\n            class=\"edit\"\r\n            type=\"button\"\r\n            (click)=\"activateSelector('reviewer', true)\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i> Edit\r\n          </button>\r\n        </div>\r\n        <app-cs-radio\r\n          [checked]=\"responsibilityForm.reviewers.sequentialWorkflow\"\r\n          [name]=\"'reviewer'\"\r\n          (checkedEvent)=\"onReviewerWorkflowChange('sequential')\"\r\n          [class.disabled]=\"\r\n            responsibilityForm?.groupReviewers?.list?.length > 0\r\n          \"\r\n        >\r\n          SEQUENTIAL<i\r\n            class=\"icons\"\r\n            [appTooltip]=\"\r\n              'The responsibility will be sent for review one at a time in the sequence defined by you.'\r\n            \"\r\n            placement=\"bottom-right\"\r\n            delay=\"0\"\r\n            type=\"white\"\r\n            [tooltipMandatory]=\"true\"\r\n            >&#xe91f;</i\r\n          >\r\n        </app-cs-radio>\r\n        <app-cs-radio\r\n          [checked]=\"!responsibilityForm.reviewers.sequentialWorkflow\"\r\n          [name]=\"'reviewer'\"\r\n          (checkedEvent)=\"onReviewerWorkflowChange('anyReviewer')\"\r\n        >\r\n          ANY REVIEWER CAN MARK THIS AS REVIEWED<i\r\n            class=\"icons\"\r\n            [appTooltip]=\"\r\n              'The responsibility will be sent for review to all reviewers at the same time. If anyone of the reviewer reviews the responsibility, it will be considered as reviewed.'\r\n            \"\r\n            placement=\"bottom-right\"\r\n            delay=\"0\"\r\n            type=\"white\"\r\n            [tooltipMandatory]=\"true\"\r\n            >&#xe91f;</i\r\n          >\r\n        </app-cs-radio>\r\n        <app-popover #reviewer [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ul class=\"action-item\">\r\n              <li\r\n                *ngFor=\"\r\n                  let reviewer of responsibilityForm?.reviewers?.list\r\n                    | slice : 1;\r\n                  let j = index\r\n                \"\r\n              >\r\n                <div class=\"avatar-card\">\r\n                  <span class=\"value\">\r\n                    <i class=\"icons\" (click)=\"remove('reviewer', reviewer)\"\r\n                      >&#xe90d;</i\r\n                    >\r\n                    {{ reviewer.member_name }}\r\n                  </span>\r\n                </div>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n        </app-popover>\r\n        <app-popover #user [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ul class=\"action-item\">\r\n              <li\r\n                *ngFor=\"\r\n                  let reviewer of responsibilityForm?.reviewers?.list\r\n                    | slice : 1;\r\n                  let j = index\r\n                \"\r\n              >\r\n                <div class=\"avatar-card\">\r\n                  <span class=\"value\">\r\n                    <i class=\"icons\" (click)=\"remove('reviewer', reviewer)\"\r\n                      >&#xe90d;</i\r\n                    >\r\n                    {{ reviewer.member_name }}\r\n                  </span>\r\n                </div>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n        </app-popover>\r\n        <app-popover #group [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ul class=\"action-item\">\r\n              <li\r\n                *ngFor=\"\r\n                  let group of responsibilityForm?.groupReviewers?.list\r\n                    | slice : 1;\r\n                  let i = index\r\n                \"\r\n              >\r\n                <div class=\"avatar-card\">\r\n                  <span class=\"value\">\r\n                    <i class=\"icons\" (click)=\"remove('groupReviewer', group)\"\r\n                      >&#xe90d;</i\r\n                    >\r\n                    {{ group.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    </div>\r\n  </div>\r\n\r\n  <!-- Overseer -->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    *ngIf=\"moreOptions?.OVERSEER\"\r\n    [attr.id]=\"'OVERSEER'\"\r\n    [class.active]=\"\r\n      activeSelector === 'overseerNotify' || activeSelector === 'overseer'\r\n    \"\r\n    [class.disabled]=\"\r\n      activeSelector &&\r\n      !['overseerNotify', 'overseerNotify'].includes(activeSelector) &&\r\n      sideSelectorElements.includes(activeSelector)\r\n    \"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"false\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/oversight.svg\"\r\n        alt=\"\"\r\n        *ngIf=\"\r\n          (responsibilityForm?.overseers?.list?.length == 0 &&\r\n            responsibilityForm?.overseers?.notifyList?.length == 0) ||\r\n          activeSelector === 'overseerNotify' ||\r\n          activeSelector === 'overseer'\r\n        \"\r\n      />\r\n      <svg\r\n        class=\"checkIcon\"\r\n        *ngIf=\"\r\n          (responsibilityForm?.overseers?.list?.length > 0 ||\r\n            responsibilityForm?.overseers?.notifyList?.length > 0) &&\r\n          !(\r\n            activeSelector === 'overseerNotify' || activeSelector === 'overseer'\r\n          )\r\n        \"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 52 52\"\r\n      >\r\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\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=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\">Oversight</label>\r\n        <div\r\n          class=\"select\"\r\n          *ngIf=\"\r\n            (responsibilityForm?.overseers?.list?.length == 0 &&\r\n              !featureFlag_groups) ||\r\n            (responsibilityForm?.overseers?.list?.length == 0 &&\r\n              responsibilityForm?.overseersGroups?.list?.length == 0 &&\r\n              featureFlag_groups)\r\n          \"\r\n        >\r\n          <input\r\n            type=\"text\"\r\n            (click)=\"activateSelector('overseer', true)\"\r\n            placeholder=\"Who should have oversight of the responsibility?\"\r\n            readonly\r\n          />\r\n        </div>\r\n        <div\r\n          class=\"selected\"\r\n          *ngIf=\"\r\n            (responsibilityForm?.overseers?.list?.length > 0 &&\r\n              !featureFlag_groups) ||\r\n            ((responsibilityForm?.overseers?.list?.length > 0 ||\r\n              responsibilityForm?.overseersGroups?.list?.length > 0) &&\r\n              featureFlag_groups)\r\n          \"\r\n        >\r\n          <div\r\n            class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n            *ngIf=\"!featureFlag_groups\"\r\n          >\r\n            <ng-container\r\n              *ngFor=\"\r\n                let overseer of responsibilityForm?.overseers?.list?.slice(0, 1)\r\n              \"\r\n            >\r\n              <i\r\n                class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                (click)=\"remove('overseer', overseer)\"\r\n                >&#xe9ae;</i\r\n              >\r\n              <span\r\n                class=\"chipName vx-fs-11 vx-label-txt\"\r\n                [appTooltip]=\"overseer.member_name\"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n                >{{ overseer.member_name }}</span\r\n              >\r\n            </ng-container>\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\r\n              (click)=\"overseers.popover()\"\r\n              placement=\"right\"\r\n              *ngIf=\"responsibilityForm?.overseers?.list?.length > 1\"\r\n            >\r\n              +{{ responsibilityForm?.overseers?.list?.slice(1).length }}\r\n            </button>\r\n          </div>\r\n\r\n          <!-- <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.overseers?.list?.length>1\" [class.plus]=\"responsibilityForm?.overseers?.list?.length>2\" *ngIf=\"!featureFlag_groups\" >\r\n                      <span class=\"chip\" *ngFor=\"let overseer of responsibilityForm?.overseers?.list?.slice(0,2)\"><i class=\"icons\" (click)=\"remove('overseer',overseer)\">&#xe90d;</i> {{overseer.member_name}}</span>\r\n                      <button class=\"count\" *ngIf=\"responsibilityForm?.overseers?.list?.length > 2\" type=\"button\" appPopover (click)=\"overseers.popover()\" placement=\"right\">+{{responsibilityForm?.overseers?.list?.slice(2).length}}</button>\r\n                  </div> -->\r\n\r\n          <div class=\"vx-d-flex vx-align-center\" *ngIf=\"featureFlag_groups\">\r\n            <div\r\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n              *ngIf=\"responsibilityForm?.overseers?.list.length > 0\"\r\n            >\r\n              <i\r\n                class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                (click)=\"\r\n                  remove('overseer', responsibilityForm?.overseers?.list[0])\r\n                \"\r\n                >&#xe9ae;</i\r\n              >\r\n              <span\r\n                class=\"chipName vx-fs-11 vx-label-txt\"\r\n                [appTooltip]=\"\r\n                  responsibilityForm?.overseers?.list[0]?.employee_name\r\n                \"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n                >{{\r\n                  responsibilityForm?.overseers?.list[0]?.employee_name\r\n                }}</span\r\n              >\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 greenBg\"\r\n                appPopover\r\n                (click)=\"overseerUser.popover()\"\r\n                placement=\"right\"\r\n                *ngIf=\"responsibilityForm?.overseers?.list?.length > 1\"\r\n              >\r\n                +{{ responsibilityForm?.overseers?.list?.length - 1 }}\r\n              </button>\r\n            </div>\r\n            <span\r\n              class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\r\n              *ngIf=\"\r\n                responsibilityForm?.overseers?.list.length > 0 &&\r\n                responsibilityForm?.overseersGroups?.list?.length > 0\r\n              \"\r\n              >&</span\r\n            >\r\n            <div\r\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n              *ngIf=\"responsibilityForm?.overseersGroups?.list?.length > 0\"\r\n            >\r\n              <i\r\n                class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                (click)=\"\r\n                  remove(\r\n                    'overseerGroup',\r\n                    responsibilityForm?.overseersGroups?.list[0]\r\n                  )\r\n                \"\r\n                >&#xe9ae;</i\r\n              >\r\n              <span\r\n                class=\"chipName vx-fs-11 vx-label-txt\"\r\n                [appTooltip]=\"\r\n                  responsibilityForm?.overseersGroups?.list[0].group_name\r\n                \"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n                >{{\r\n                  responsibilityForm?.overseersGroups?.list[0].group_name\r\n                }}</span\r\n              >\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\r\n                (click)=\"overseerGroup.popover()\"\r\n                placement=\"right\"\r\n                *ngIf=\"responsibilityForm?.overseersGroups?.list?.length > 1\"\r\n              >\r\n                +{{ responsibilityForm?.overseersGroups?.list?.length - 1 }}\r\n              </button>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- <div class=\"chip-container\" *ngIf=\"featureFlag_groups\">\r\n                      <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.overseers?.list.length > 0\" >\r\n                          <i class=\"icons cross vx-mr-1\" (click)=\"remove('overseer',responsibilityForm?.overseers?.list[0])\">&#xe90d;</i>\r\n                          <span class=\"chip\" [appTooltip]=\"responsibilityForm?.overseers?.list[0]?.employee_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\">{{responsibilityForm?.overseers?.list[0]?.employee_name}}</span></span>\r\n                          <button *ngIf=\"responsibilityForm?.overseers?.list?.length > 1\" class=\"count user\" appPopover (click)=\"overseerUser.popover()\" placement=\"left\"> +{{responsibilityForm?.overseers?.list?.length -1}}</button>\r\n                      </div>\r\n                      <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"  *ngIf=\"responsibilityForm?.overseers?.list.length > 0 && responsibilityForm?.overseersGroups?.list?.length > 0\" >&</span>\r\n                      <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.overseersGroups?.list?.length > 0 \" >\r\n                          <i class=\"icons cross vx-mr-1\" (click)=\"remove('overseerGroup',responsibilityForm?.overseersGroups?.list[0])\">&#xe90d;</i>\r\n                          <span class=\"chip\" [appTooltip]=\"responsibilityForm?.overseersGroups?.list[0].group_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\"  >{{responsibilityForm?.overseersGroups?.list[0].group_name}}</span></span>\r\n                          <button *ngIf=\"responsibilityForm?.overseersGroups?.list?.length > 1\" class=\"count\" appPopover (click)=\"overseerGroup.popover()\" placement=\"right\">+{{responsibilityForm?.overseersGroups?.list?.length -1}}</button>\r\n                      </div>\r\n                  </div> -->\r\n          <button\r\n            *ngIf=\"activeSelector !== 'overseer'\"\r\n            class=\"edit\"\r\n            type=\"button\"\r\n            (click)=\"activateSelector('overseer', true)\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i> Edit\r\n          </button>\r\n        </div>\r\n\r\n        <div\r\n          class=\"select\"\r\n          *ngIf=\"\r\n            (responsibilityForm?.overseers?.notifyList?.length == 0 &&\r\n              !featureFlag_groups) ||\r\n            (responsibilityForm?.overseers?.notifyList?.length == 0 &&\r\n              responsibilityForm?.overseersGroups?.notifyList?.length == 0 &&\r\n              featureFlag_groups)\r\n          \"\r\n        >\r\n          <input\r\n            type=\"text\"\r\n            (click)=\"activateSelector('overseerNotify', true)\"\r\n            placeholder=\"Who should be notified if the responsibility is not complet...\"\r\n            readonly\r\n            [appTooltip]=\"\r\n              'Who should be notified if the responsibility is not completed?'\r\n            \"\r\n            placement=\"bottom\"\r\n            delay=\"0\"\r\n            [tooltipMandatory]=\"true\"\r\n          />\r\n        </div>\r\n        <div\r\n          class=\"selected\"\r\n          *ngIf=\"\r\n            (responsibilityForm?.overseers?.notifyList?.length > 0 &&\r\n              !featureFlag_groups) ||\r\n            ((responsibilityForm?.overseers?.notifyList?.length > 0 ||\r\n              responsibilityForm?.overseersGroups?.notifyList?.length > 0) &&\r\n              featureFlag_groups)\r\n          \"\r\n        >\r\n          <div\r\n            class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n            *ngIf=\"!featureFlag_groups\"\r\n          >\r\n            <ng-container\r\n              *ngFor=\"\r\n                let overseer of responsibilityForm?.overseers?.notifyList?.slice(\r\n                  0,\r\n                  1\r\n                )\r\n              \"\r\n            >\r\n              <i\r\n                class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                (click)=\"remove('overseerNotifyList', overseer)\"\r\n                >&#xe9ae;</i\r\n              >\r\n              <span\r\n                class=\"chipName vx-fs-11 vx-label-txt\"\r\n                [appTooltip]=\"overseer.member_name\"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n                >{{ overseer.member_name }}</span\r\n              >\r\n            </ng-container>\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\r\n              (click)=\"notify.popover()\"\r\n              placement=\"right\"\r\n              *ngIf=\"responsibilityForm?.overseers?.notifyList?.length > 1\"\r\n            >\r\n              +{{ responsibilityForm?.overseers?.notifyList?.slice(1).length }}\r\n            </button>\r\n          </div>\r\n\r\n          <!-- <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.overseers?.notifyList?.length>1\" [class.plus]=\"responsibilityForm?.overseers?.notifyList?.length>2\" *ngIf=\"!featureFlag_groups\">\r\n                      <span class=\"chip\" *ngFor=\"let overseer of responsibilityForm?.overseers?.notifyList?.slice(0,2)\"><i class=\"icons\" (click)=\"remove('overseerNotifyList',overseer)\">&#xe90d;</i> {{overseer.member_name}}</span>\r\n                      <button class=\"count\" *ngIf=\"responsibilityForm?.overseers?.notifyList?.length > 2\" type=\"button\" appPopover (click)=\"notify.popover()\" placement=\"right\">+{{responsibilityForm?.overseers?.notifyList?.slice(2).length}}</button>\r\n                  </div> -->\r\n\r\n          <div class=\"vx-d-flex vx-align-center\">\r\n            <div\r\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n              *ngIf=\"responsibilityForm?.overseers?.notifyList.length > 0\"\r\n            >\r\n              <i\r\n                class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                (click)=\"\r\n                  remove(\r\n                    'overseerNotifyList',\r\n                    responsibilityForm?.overseers?.notifyList[0]\r\n                  )\r\n                \"\r\n                >&#xe9ae;</i\r\n              >\r\n              <span\r\n                class=\"chipName vx-fs-11 vx-label-txt\"\r\n                [appTooltip]=\"\r\n                  responsibilityForm?.overseers?.notifyList[0]?.employee_name\r\n                \"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n                >{{\r\n                  responsibilityForm?.overseers?.notifyList[0]?.employee_name\r\n                }}</span\r\n              >\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 greenBg\"\r\n                appPopover\r\n                (click)=\"notifyUser.popover()\"\r\n                placement=\"right\"\r\n                *ngIf=\"responsibilityForm?.overseers?.notifyList?.length > 1\"\r\n              >\r\n                +{{ responsibilityForm?.overseers?.notifyList?.length - 1 }}\r\n              </button>\r\n            </div>\r\n            <span\r\n              class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\r\n              *ngIf=\"\r\n                responsibilityForm?.overseers?.notifyList.length > 0 &&\r\n                responsibilityForm?.overseersGroups?.notifyList?.length > 0\r\n              \"\r\n              >&</span\r\n            >\r\n            <div\r\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n              *ngIf=\"\r\n                responsibilityForm?.overseersGroups?.notifyList?.length > 0\r\n              \"\r\n            >\r\n              <i\r\n                class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                (click)=\"\r\n                  remove(\r\n                    'overseerGroupNotifyList',\r\n                    responsibilityForm?.overseersGroups?.notifyList[0]\r\n                  )\r\n                \"\r\n                >&#xe9ae;</i\r\n              >\r\n              <span\r\n                class=\"chipName vx-fs-11 vx-label-txt\"\r\n                [appTooltip]=\"\r\n                  responsibilityForm?.overseersGroups?.notifyList[0]?.group_name\r\n                \"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n                >{{\r\n                  responsibilityForm?.overseersGroups?.notifyList[0]?.group_name\r\n                }}</span\r\n              >\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\r\n                (click)=\"notifyGroup.popover()\"\r\n                placement=\"right\"\r\n                *ngIf=\"\r\n                  responsibilityForm?.overseersGroups?.notifyList?.length > 1\r\n                \"\r\n              >\r\n                +{{\r\n                  responsibilityForm?.overseersGroups?.notifyList?.length - 1\r\n                }}\r\n              </button>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- <div class=\"chip-container\" *ngIf=\"featureFlag_groups\">\r\n                      <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.overseers?.notifyList.length > 0\">\r\n                          <i class=\"icons cross vx-mr-1\" (click)=\"remove('overseerNotifyList',responsibilityForm?.overseers?.notifyList[0])\">&#xe90d;</i>\r\n                          <span class=\"chip\" [appTooltip]=\"responsibilityForm?.overseers?.notifyList[0]?.employee_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\">{{responsibilityForm?.overseers?.notifyList[0]?.employee_name}}</span></span>\r\n                          <button *ngIf=\"responsibilityForm?.overseers?.notifyList?.length > 1\" class=\"count user\" appPopover (click)=\"notifyUser.popover()\" placement=\"left\"> +{{responsibilityForm?.overseers?.notifyList?.length - 1}}</button>\r\n                      </div>\r\n                      <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"  *ngIf=\"responsibilityForm?.overseers?.notifyList.length > 0 && responsibilityForm?.overseersGroups?.notifyList?.length > 0\" >&</span>\r\n                      <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.overseersGroups?.notifyList?.length > 0 \" >\r\n                          <i class=\"icons cross vx-mr-1\" (click)=\"remove('overseerGroupNotifyList',responsibilityForm?.overseersGroups?.notifyList[0])\">&#xe90d;</i>\r\n                          <span class=\"chip\" [appTooltip]=\"responsibilityForm?.overseersGroups?.notifyList[0]?.group_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\"  >{{responsibilityForm?.overseersGroups?.notifyList[0]?.group_name}}</span></span>\r\n                          <button *ngIf=\"responsibilityForm?.overseersGroups?.notifyList?.length > 1\" class=\"count\" appPopover (click)=\"notifyGroup.popover()\" placement=\"right\">+{{responsibilityForm?.overseersGroups?.notifyList?.length - 1}}</button>\r\n                      </div>\r\n                  </div> -->\r\n          <button\r\n            *ngIf=\"activeSelector !== 'overseerNotify'\"\r\n            class=\"edit\"\r\n            type=\"button\"\r\n            (click)=\"activateSelector('overseerNotify', true)\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i> Edit\r\n          </button>\r\n        </div>\r\n        <app-popover #overseers [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ul class=\"action-item\">\r\n              <li\r\n                *ngFor=\"\r\n                  let overseer of responsibilityForm?.overseers?.list\r\n                    | slice : 1;\r\n                  let j = index\r\n                \"\r\n              >\r\n                <div class=\"avatar-card\">\r\n                  <span class=\"value\">\r\n                    <i class=\"icons\" (click)=\"remove('overseer', overseer)\"\r\n                      >&#xe90d;</i\r\n                    >\r\n                    {{ overseer?.member_name }}\r\n                  </span>\r\n                </div>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n        </app-popover>\r\n        <app-popover #overseerUser [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ul class=\"action-item\">\r\n              <li\r\n                *ngFor=\"\r\n                  let overseers of responsibilityForm?.overseers?.list\r\n                    | slice : 1;\r\n                  let j = index\r\n                \"\r\n              >\r\n                <div class=\"avatar-card\">\r\n                  <span class=\"value\">\r\n                    <i class=\"icons\" (click)=\"remove('overseer', overseers)\"\r\n                      >&#xe90d;</i\r\n                    >\r\n                    {{ overseers?.member_name }}\r\n                  </span>\r\n                </div>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n        </app-popover>\r\n        <app-popover #overseerGroup [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ul class=\"action-item\">\r\n              <li\r\n                *ngFor=\"\r\n                  let overseer of responsibilityForm?.overseersGroups?.list\r\n                    | slice : 1;\r\n                  let i = index\r\n                \"\r\n              >\r\n                <div class=\"avatar-card\">\r\n                  <span class=\"value\">\r\n                    <i class=\"icons\" (click)=\"remove('overseerGroup', overseer)\"\r\n                      >&#xe90d;</i\r\n                    >\r\n                    {{ overseer?.group_name }}\r\n                  </span>\r\n                </div>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n        </app-popover>\r\n        <app-popover #notify [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ul class=\"action-item\">\r\n              <li\r\n                *ngFor=\"\r\n                  let overseer of responsibilityForm?.overseers?.notifyList\r\n                    | slice : 1;\r\n                  let j = index\r\n                \"\r\n              >\r\n                <div class=\"avatar-card\">\r\n                  <span class=\"value\">\r\n                    <i\r\n                      class=\"icons\"\r\n                      (click)=\"remove('overseerNotifyList', overseer)\"\r\n                      >&#xe90d;</i\r\n                    >\r\n                    {{ overseer?.member_name }}\r\n                  </span>\r\n                </div>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n        </app-popover>\r\n        <app-popover #notifyUser [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ul class=\"action-item\">\r\n              <li\r\n                *ngFor=\"\r\n                  let overseer of responsibilityForm?.overseers?.notifyList\r\n                    | slice : 1;\r\n                  let j = index\r\n                \"\r\n              >\r\n                <div class=\"avatar-card\">\r\n                  <span class=\"value\">\r\n                    <i\r\n                      class=\"icons\"\r\n                      (click)=\"remove('overseerNotifyList', overseer)\"\r\n                      >&#xe90d;</i\r\n                    >\r\n                    {{ overseer?.member_name }}\r\n                  </span>\r\n                </div>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n        </app-popover>\r\n        <app-popover #notifyGroup [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ul class=\"action-item\">\r\n              <li\r\n                *ngFor=\"\r\n                  let group of responsibilityForm?.overseersGroups?.notifyList\r\n                    | slice : 1;\r\n                  let i = index\r\n                \"\r\n              >\r\n                <div class=\"avatar-card\">\r\n                  <span class=\"value\">\r\n                    <i\r\n                      class=\"icons\"\r\n                      (click)=\"remove('overseerGroupNotifyList', group)\"\r\n                      >&#xe90d;</i\r\n                    >\r\n                    {{ group?.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    </div>\r\n  </div>\r\n\r\n  <!-- Assurance -->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    *ngIf=\"moreOptions?.ASSURANCE\"\r\n    [attr.id]=\"'ASSURANCE'\"\r\n    [class.active]=\"activeSelector === 'assurance'\"\r\n    [class.disabled]=\"\r\n      activeSelector &&\r\n      activeSelector !== 'assurance' &&\r\n      sideSelectorElements.includes(activeSelector)\r\n    \"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"false\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/reviewer.svg\"\r\n        alt=\"\"\r\n        *ngIf=\"\r\n          responsibilityForm?.assuranceList?.length == 0 ||\r\n          activeSelector === 'assurance'\r\n        \"\r\n      />\r\n\r\n      <svg\r\n        *ngIf=\"\r\n          responsibilityForm?.assuranceList?.length > 0 &&\r\n          activeSelector !== 'assurance'\r\n        \"\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 class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\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=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\">Assurance</label>\r\n        <div\r\n          class=\"select\"\r\n          *ngIf=\"responsibilityForm?.assuranceList?.length == 0\"\r\n        >\r\n          <div\r\n            class=\"custom-input\"\r\n            (click)=\"activateSelector('assurance', true)\"\r\n            aria-placeholder=\"Select the test plan categories that you would like to add this responsibility to.\"\r\n          ></div>\r\n        </div>\r\n        <div\r\n          class=\"selected\"\r\n          *ngIf=\"responsibilityForm?.assuranceList?.length > 0\"\r\n        >\r\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n            <ng-container\r\n              *ngFor=\"\r\n                let assurance of responsibilityForm?.assuranceList?.slice(0, 1)\r\n              \"\r\n            >\r\n              <i\r\n                class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                (click)=\"remove('assurance', assurance)\"\r\n                >&#xe9ae;</i\r\n              >\r\n              <span\r\n                class=\"chipName vx-fs-11 vx-label-txt\"\r\n                [appTooltip]=\"assurance.category_name\"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n                >{{ assurance.category_name }}</span\r\n              >\r\n            </ng-container>\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\r\n              (click)=\"assurance.popover()\"\r\n              placement=\"right\"\r\n              *ngIf=\"responsibilityForm?.assuranceList?.length > 1\"\r\n            >\r\n              +{{ responsibilityForm?.assuranceList?.slice(1).length }}\r\n            </button>\r\n          </div>\r\n\r\n          <button\r\n            *ngIf=\"activeSelector !== 'assurance'\"\r\n            class=\"edit\"\r\n            type=\"button\"\r\n            (click)=\"activateSelector('assurance', true)\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i> Edit\r\n          </button>\r\n        </div>\r\n        <app-popover #assurance [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ul class=\"action-item\">\r\n              <li\r\n                *ngFor=\"\r\n                  let assurance of responsibilityForm?.assuranceList\r\n                    | slice : 1;\r\n                  let j = index\r\n                \"\r\n              >\r\n                <div class=\"avatar-card\">\r\n                  <span class=\"value\">\r\n                    <i class=\"icons\" (click)=\"remove('assurance', assurance)\"\r\n                      >&#xe90d;</i\r\n                    >\r\n                    {{ assurance.category_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    </div>\r\n  </div>\r\n\r\n  <!-- Requires Audit -->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    *ngIf=\"moreOptions?.REQUIRES_AUDIT && responsibilityForm.rc.length > 0\"\r\n    [attr.id]=\"'REQUIRES_AUDIT'\"\r\n    [class.active]=\"activeSelector === 'requires_audit'\"\r\n    [class.disabled]=\"\r\n      activeSelector &&\r\n      activeSelector !== 'requires_audit' &&\r\n      sideSelectorElements.includes(activeSelector)\r\n    \"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"false\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/audit.svg\"\r\n        alt=\"\"\r\n        *ngIf=\"\r\n          responsibilityForm?.requiresAuditList?.length == 0 ||\r\n          activeSelector === 'requires_audit'\r\n        \"\r\n      />\r\n\r\n      <svg\r\n        *ngIf=\"\r\n          responsibilityForm?.requiresAuditList?.length > 0 &&\r\n          activeSelector !== 'requires_audit'\r\n        \"\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 class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\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=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\">REQUIRES AUDIT?</label>\r\n        <div\r\n          class=\"select\"\r\n          *ngIf=\"responsibilityForm?.requiresAuditList?.length == 0\"\r\n        >\r\n          <input\r\n            type=\"text\"\r\n            placeholder=\"If yes, select an Audit Category.\"\r\n            readonly\r\n            (click)=\"activateSelector('requires_audit', true)\"\r\n          />\r\n        </div>\r\n        <div\r\n          class=\"selected\"\r\n          *ngIf=\"responsibilityForm?.requiresAuditList?.length > 0\"\r\n        >\r\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n            <i\r\n              class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n              (click)=\"remove('requires_audit', overseer)\"\r\n              >&#xe9ae;</i\r\n            >\r\n            <span\r\n              class=\"chipName vx-fs-11 vx-label-txt\"\r\n              [appTooltip]=\"\r\n                responsibilityForm?.requiresAuditList[0]?.category_name\r\n              \"\r\n              placement=\"bottom-left\"\r\n              delay=\"0\"\r\n              type=\"black\"\r\n              [tooltipMandatory]=\"false\"\r\n              >{{\r\n                responsibilityForm?.requiresAuditList[0]?.category_name\r\n              }}</span\r\n            >\r\n          </div>\r\n\r\n          <button\r\n            class=\"edit\"\r\n            type=\"button\"\r\n            (click)=\"activateSelector('requires_audit', true)\"\r\n          >\r\n            <i class=\"icons\">&#xe90c;</i> Edit\r\n          </button>\r\n          <!-- class=\"icons\">&#xe9ba;</i>\r\n                      Edit</button> -->\r\n        </div>\r\n        <ng-container *ngIf=\"responsibilityForm?.requiresAuditList?.length\">\r\n          <label class=\"vx-control-panel vx-mt-8\">\r\n            SAMPLE SIZE\r\n            <app-cs-switch\r\n              [(ngValue)]=\"isSample\"\r\n              (ngValueChange)=\"switchEnable($event)\"\r\n            ></app-cs-switch>\r\n          </label>\r\n          <div class=\"sample-part\" [class.disabled]=\"!isSample\">\r\n            <app-cs-radio\r\n              value=\"0\"\r\n              class=\"sample-radio\"\r\n              (click)=\"selectedSampleData(0)\"\r\n              [checked]=\"selectedSample === 0\"\r\n            >\r\n              <div class=\"name\">COUNT</div>\r\n              <input\r\n                type=\"number\"\r\n                placeholder=\"--\"\r\n                (keypress)=\"checkInputValue($event)\"\r\n                [(ngModel)]=\"sampleValue\"\r\n              />\r\n            </app-cs-radio>\r\n            <div class=\"or\">OR</div>\r\n            <app-cs-radio\r\n              value=\"1\"\r\n              class=\"sample-radio\"\r\n              (click)=\"selectedSampleData(1)\"\r\n              [checked]=\"selectedSample === 1\"\r\n            >\r\n              <div class=\"name\">PERCENTAGE</div>\r\n              <input\r\n                type=\"number\"\r\n                (keypress)=\"checkInputValue($event)\"\r\n                [(ngModel)]=\"samplePercentage\"\r\n                placeholder=\"--\"\r\n              />\r\n            </app-cs-radio>\r\n          </div>\r\n          <label class=\"vx-control-panel vx-mt-8\"\r\n            >SET A REMINDER IF THE AUDIT PLAN IS NOT CREATED.</label\r\n          >\r\n          <div class=\"reminder-part\">\r\n            Send reminder every\r\n            <input\r\n              type=\"number\"\r\n              value=\"2\"\r\n              [(ngModel)]=\"sendAuditRemindersValue\"\r\n            />\r\n            Day by\r\n            <div class=\"picker-group\">\r\n              <input\r\n                class=\"time\"\r\n                aria-label=\"12hr format\"\r\n                [(ngModel)]=\"auditTime\"\r\n                [ngxTimepicker]=\"dailyTime\"\r\n                placeholder=\"auditTime.toUpperCase()\"\r\n                type=\"text\"\r\n                [min]=\"currentTime\"\r\n                readonly\r\n              />\r\n              <i class=\"icons\">&#xe955;</i>\r\n              <ngx-material-timepicker #dailyTime [defaultTime]=\"auditTime\">\r\n              </ngx-material-timepicker>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Link of GRC objects -->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    *ngIf=\"moreOptions?.GRC_OBJECTS && responsibilityForm.rc.length > 0\"\r\n    [attr.id]=\"'GRC_OBJECTS'\"\r\n    [class.active]=\"activeSelector === 'GRC_OBJECTS'\"\r\n    [class.disabled]=\"\r\n      activeSelector &&\r\n      activeSelector !== 'GRC_OBJECTS' &&\r\n      sideSelectorElements.includes(activeSelector)\r\n    \"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"false\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/audit.svg\"\r\n        alt=\"\"\r\n        *ngIf=\"\r\n          responsibilityForm?.selectedGRCObjects?.length == 0 ||\r\n          activeSelector === 'GRC_OBJECTS'\r\n        \"\r\n      />\r\n\r\n      <svg\r\n        *ngIf=\"\r\n          responsibilityForm?.selectedGRCObjects?.length > 0 &&\r\n          activeSelector !== 'GRC_OBJECTS'\r\n        \"\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 class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\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=\"right\">\r\n      <div class=\"vx-form-group\">\r\n        <label class=\"vx-control-panel\">LINK GRC OBJECT(S)</label>\r\n        <div\r\n          class=\"select\"\r\n          *ngIf=\"responsibilityForm?.selectedGRCObjects?.length === 0\"\r\n        >\r\n          <input\r\n            type=\"text\"\r\n            placeholder=\"Select GRC object(s) to link with this responsibility\"\r\n            readonly\r\n            (click)=\"activateSelector('GRC_OBJECTS', true)\"\r\n          />\r\n        </div>\r\n        <ng-container *ngIf=\"responsibilityForm?.selectedGRCObjects?.length\">\r\n          <ng-container\r\n            *ngFor=\"let selectedGRC of GRC_TYPE_ARRAY; let i = index\"\r\n          >\r\n            <div\r\n              *ngIf=\"grcDataWithTypes[selectedGRC]?.length\"\r\n              class=\"selected vx-mb-2\"\r\n            >\r\n              <div\r\n                class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n              >\r\n                <ng-container\r\n                  *ngFor=\"let grc of grcDataWithTypes[selectedGRC]?.slice(0, 1)\"\r\n                >\r\n                  <i\r\n                    class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                    (click)=\"remove('GRC_OBJECTS', grc, 0)\"\r\n                    >&#xe9ae;</i\r\n                  >\r\n                  <div\r\n                    class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\r\n                  >\r\n                    {{ selectedGRC | titlecase }}\r\n                  </div>\r\n\r\n                  <span\r\n                    class=\"chipName vx-fs-11 vx-label-txt\"\r\n                    [appTooltip]=\"grc?.name\"\r\n                    placement=\"bottom-left\"\r\n                    delay=\"0\"\r\n                    type=\"black\"\r\n                    [tooltipMandatory]=\"false\"\r\n                    >{{ grc?.name }}</span\r\n                  >\r\n                </ng-container>\r\n\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\r\n                  (click)=\"popoverGRC.popover()\"\r\n                  placement=\"left\"\r\n                  *ngIf=\"grcDataWithTypes[selectedGRC]?.length > 1\"\r\n                >\r\n                  +{{ grcDataWithTypes[selectedGRC].length - 1 }}\r\n                </button>\r\n              </div>\r\n\r\n              <button\r\n                *ngIf=\"activeSelector !== 'GRC'\"\r\n                class=\"edit\"\r\n                type=\"button\"\r\n                (click)=\"\r\n                  selectedGRCTab = grcDataWithTypes[selectedGRC][0]?.type;\r\n                  getOtherGRCObjects();\r\n                  activateSelector('GRC_OBJECTS', true)\r\n                \"\r\n              >\r\n                <i class=\"icons\">&#xe9ba;</i> Edit\r\n              </button>\r\n            </div>\r\n            <app-popover #popoverGRC [dontCloseonClick]=\"true\">\r\n              <div class=\"wf-action-list\">\r\n                <ul class=\"action-item\">\r\n                  <li\r\n                    *ngFor=\"\r\n                      let grc of grcDataWithTypes[selectedGRC] | slice : 1;\r\n                      let j = index\r\n                    \"\r\n                  >\r\n                    <div class=\"avatar-card\">\r\n                      <span class=\"value\">\r\n                        <i\r\n                          class=\"icons\"\r\n                          (click)=\"remove('GRC_OBJECTS', grc, j + 1)\"\r\n                          >&#xe90d;</i\r\n                        >\r\n                        {{ grc.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        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<app-users-radio-list\r\n  *ngIf=\"activeSelector === 'assignors'\"\r\n  [usersList]=\"assignorsList\"\r\n  [selectedUsers]=\"responsibilityForm.assignors.list\"\r\n  [itemEmailKey]=\"'member_email'\"\r\n  [userIdKey]=\"'member_id'\"\r\n  [itemNameKey]=\"'member_name'\"\r\n  (saveSelectedList)=\"saveSelectedList('assignors', $event)\"\r\n  (closeUsersList)=\"activeDeselector()\"\r\n  [loaded]=\"assignorsListLoaded\"\r\n>\r\n</app-users-radio-list>\r\n\r\n<ng-container *ngIf=\"activeSelector === 'assignees'\">\r\n  <app-group-users-list\r\n    *ngIf=\"\r\n      isEntrust || responsibilityForm?.assignees?.whoCanComplete === 'ANY_ONE'\r\n    \"\r\n    [openedFrom]=\"openedFrom\"\r\n    [usersList]=\"assigneesList\"\r\n    [fromResponsibility]=\"'Assignee'\"\r\n    [groupsList]=\"groupsList\"\r\n    [assigneeGroupsList]=\"groupAssigneeList\"\r\n    [selectedUsers]=\"responsibilityForm?.assignees?.list\"\r\n    [selectedGroups]=\"responsibilityForm?.assigneeGroups?.list\"\r\n    [userIdKey]=\"'my_member_id'\"\r\n    [groupIdKey]=\"'group_id'\"\r\n    [loader]=\"userListLoader || assignorsListLoader\"\r\n    (saveSelectedList)=\"saveSelectedList('assignees', $event)\"\r\n    (closeUsersList)=\"activeDeselector()\"\r\n    [groupsEnabled]=\"featureFlag_groups\"\r\n  >\r\n  </app-group-users-list>\r\n  <app-users-radio-list\r\n    *ngIf=\"\r\n      !isEntrust && responsibilityForm.assignees.whoCanComplete !== 'ANY_ONE'\r\n    \"\r\n    [itemEmailKey]=\"'employee_email'\"\r\n    [usersList]=\"assigneesList\"\r\n    [selectedUsers]=\"responsibilityForm.assignees.list\"\r\n    [userIdKey]=\"'employee_id'\"\r\n    [itemNameKey]=\"'employee_name'\"\r\n    [fromResponsibility]=\"'Assignee'\"\r\n    (saveSelectedList)=\"saveSelectedList('assignees', $event)\"\r\n    (closeUsersList)=\"activeDeselector()\"\r\n    [loaded]=\"assigneesListLoaded\"\r\n  >\r\n  </app-users-radio-list>\r\n</ng-container>\r\n\r\n<app-checkpoints\r\n  *ngIf=\"activeSelector === 'checkpoints'\"\r\n  [checkpointInstruction]=\"responsibilityForm?.checkpointInstruction\"\r\n  [checkpointData]=\"responsibilityForm?.checkpoints\"\r\n  (saveCheckPoint)=\"saveSelectedList('checkpoints', $event)\"\r\n  (closeCheckPoint)=\"activeDeselector()\"\r\n></app-checkpoints>\r\n<app-frequency-container\r\n  *ngIf=\"activeSelector === 'frequency'\"\r\n  [frequencyDetails]=\"frequencyDetails\"\r\n  [feature]=\"feature\"\r\n  (selectedFrequency)=\"frequencyData($event)\"\r\n  [mode]=\"'responsibility'\"\r\n  (closeFrequency)=\"activeDeselector()\"\r\n>\r\n</app-frequency-container>\r\n\r\n<app-responsibility-centers-list\r\n  *ngIf=\"activeSelector === 'rc'\"\r\n  [loaded]=\"rcListLoaded\"\r\n  [responsibilityCentersList]=\"responsibilityCentersList\"\r\n  [radioSelection]=\"\r\n    mode == 'EDIT' && responsibilityCenterType === 0 ? true : false\r\n  \"\r\n  [selectedResponsibilityCenters]=\"responsibilityForm.rc\"\r\n  [rcIdKey]=\"'item_id'\"\r\n  (saveSelectedList)=\"saveSelectedList('rc', $event)\"\r\n  (closeRcList)=\"activeDeselector()\"\r\n>\r\n</app-responsibility-centers-list>\r\n\r\n<app-category-multi-select\r\n  *ngIf=\"activeSelector === 'category'\"\r\n  [categoryList]=\"categories\"\r\n  [allCategories]=\"allCategories\"\r\n  [categoryIdKey]=\"'category_id'\"\r\n  [selectedCategories]=\"responsibilityForm.category\"\r\n  (saveSelectedCategory)=\"saveSelectedList('category', $event)\"\r\n  (closeCategoriesList)=\"activeDeselector()\"\r\n>\r\n</app-category-multi-select>\r\n\r\n<!-- [hideProgramsList]=\"(selectedProgram  && !(this.selectedProgram?.programType === 0 && this.selectedProgram?.name?.toLowerCase() === 'uncategorized' )) ? true : false\" -->\r\n<app-program-listing\r\n  *ngIf=\"activeSelector === 'program'\"\r\n  [feature]=\"feature\"\r\n  [programsList]=\"programsList\"\r\n  [selectedCategories]=\"responsibilityForm.category | refDisconnect\"\r\n  [selectedProgram]=\"responsibilityForm.program | refDisconnect\"\r\n  (saveSelectedProgram)=\"saveSelectedList('program', $event)\"\r\n  (closeEvent)=\"activeDeselector()\"\r\n  [linkedProgram]=\"responsibilityForm?.linkedProgram\"\r\n  [mode]=\"\r\n    this.selectedProgram?.programType === 0 &&\r\n    this.selectedProgram?.name?.toLowerCase() === 'uncategorized'\r\n      ? ''\r\n      : mode\r\n  \"\r\n  [openedFrom]=\"openedFrom\"\r\n  [responsibilityId]=\"responsibilityId\"\r\n></app-program-listing>\r\n\r\n<app-owner-list\r\n  *ngIf=\"activeSelector === 'reviewer' && !featureFlag_groups\"\r\n  [listHeading]=\"'Select a Reviewer'\"\r\n  [singularText]=\"'User selected'\"\r\n  [pluralText]=\"'Users selected'\"\r\n  [usersList]=\"allUsersList\"\r\n  [showWorkflow]=\"true\"\r\n  [selectedUsers]=\"responsibilityForm.reviewers.list\"\r\n  [userIdKey]=\"'employee_id'\"\r\n  [itemEmailKey]=\"'employee_email'\"\r\n  [itemNameKey]=\"'member_name'\"\r\n  (saveSelectedList)=\"\r\n    saveSelectedList('reviewer', $event);\r\n    activateSelector('reviewerFrequency', true)\r\n  \"\r\n  (closeUsersList)=\"activeDeselector()\"\r\n  [mode]=\"mode\"\r\n  [fromResponsibility]=\"'Reviewer'\"\r\n  [reviewerWorkflowType]=\"\r\n    responsibilityForm?.reviewers?.sequentialWorkflow\r\n      ? 'SEQUENTIAL'\r\n      : 'ANY REVIEWER CAN MARK THIS AS REVIEWED'\r\n  \"\r\n  (reviewerWorkflowTypeChange)=\"reviewerTypeChange($event)\"\r\n>\r\n</app-owner-list>\r\n<user-group-list\r\n  *ngIf=\"activeSelector === 'reviewer' && featureFlag_groups\"\r\n  [selectedReviewer]=\"true\"\r\n  [userlist]=\"reviewerMemberIdsList\"\r\n  [groupEnabled]=\"true\"\r\n  [groupList]=\"groupReviewerList\"\r\n  [selectedGroups]=\"responsibilityForm?.groupReviewers?.list\"\r\n  [selectedUsers]=\"responsibilityForm?.reviewers?.list\"\r\n  (cancel)=\"activeDeselector()\"\r\n  (save)=\"\r\n    saveSelectedList('reviewer', $event);\r\n    activateSelector('reviewerFrequency', true)\r\n  \"\r\n  [mode]=\"mode\"\r\n  [fromResponsibility]=\"'Reviewer'\"\r\n  [loading]=\"userListLoader || assignorsListLoader\"\r\n  (reviewerWorkflowTypeChange)=\"reviewerTypeChange($event)\"\r\n  [reviewerWorkflowType]=\"\r\n    responsibilityForm?.reviewers?.sequentialWorkflow\r\n      ? 'SEQUENTIAL'\r\n      : 'ANY REVIEWER CAN MARK THIS AS REVIEWED'\r\n  \"\r\n  [featureflag]=\"featureFlag_groups\"\r\n>\r\n</user-group-list>\r\n<app-owner-list\r\n  *ngIf=\"activeSelector === 'overseer' && !featureFlag_groups\"\r\n  [singularText]=\"'User selected'\"\r\n  [pluralText]=\"'Users selected'\"\r\n  [usersList]=\"allUsersList\"\r\n  [selectedUsers]=\"responsibilityForm.overseers.list\"\r\n  [userIdKey]=\"'employee_id'\"\r\n  [fromResponsibility]=\"'Overseer'\"\r\n  [itemNameKey]=\"'member_name'\"\r\n  (saveSelectedList)=\"saveSelectedList('overseer', $event)\"\r\n  (closeUsersList)=\"activeDeselector()\"\r\n  [itemEmailKey]=\"'employee_email'\"\r\n>\r\n</app-owner-list>\r\n<user-group-list\r\n  *ngIf=\"activeSelector === 'overseer' && featureFlag_groups\"\r\n  [groupEnabled]=\"true\"\r\n  [groupList]=\"groupOverseerList\"\r\n  [selectedGroups]=\"responsibilityForm?.overseersGroups?.list\"\r\n  [userlist]=\"overseersList\"\r\n  [selectedUsers]=\"responsibilityForm.overseers.list\"\r\n  [fromResponsibility]=\"'Overseer'\"\r\n  [loading]=\"userListLoader || assignorsListLoader\"\r\n  (save)=\"saveSelectedList('overseer', $event)\"\r\n  (cancel)=\"activeDeselector()\"\r\n  [featureflag]=\"featureFlag_groups\"\r\n>\r\n</user-group-list>\r\n\r\n<app-owner-list\r\n  *ngIf=\"activeSelector === 'overseerNotify' && !featureFlag_groups\"\r\n  [singularText]=\"'User selected'\"\r\n  [pluralText]=\"'Users selected'\"\r\n  [usersList]=\"allUsersList\"\r\n  [fromResponsibility]=\"'Overseer'\"\r\n  [selectedUsers]=\"responsibilityForm.overseers.notifyList\"\r\n  [userIdKey]=\"'employee_id'\"\r\n  [itemNameKey]=\"'member_name'\"\r\n  (saveSelectedList)=\"saveSelectedList('overseerNotify', $event)\"\r\n  (closeUsersList)=\"activeDeselector()\"\r\n  [itemEmailKey]=\"'employee_email'\"\r\n></app-owner-list>\r\n<user-group-list\r\n  *ngIf=\"activeSelector === 'overseerNotify' && featureFlag_groups\"\r\n  [userlist]=\"overseersList\"\r\n  [groupEnabled]=\"true\"\r\n  [groupList]=\"groupOverseerList\"\r\n  [selectedGroups]=\"responsibilityForm?.overseersGroups?.notifyList\"\r\n  [selectedUsers]=\"responsibilityForm.overseers.notifyList\"\r\n  [fromResponsibility]=\"'Overseer'\"\r\n  [loading]=\"userListLoader || assignorsListLoader\"\r\n  (save)=\"saveSelectedList('overseerNotify', $event)\"\r\n  (cancel)=\"activeDeselector()\"\r\n  [featureflag]=\"featureFlag_groups\"\r\n>\r\n</user-group-list>\r\n\r\n<app-owner-list\r\n  *ngIf=\"activeSelector === 'assurance'\"\r\n  [singularText]=\"'Test Category selected'\"\r\n  [pluralText]=\"'Test Categories selected'\"\r\n  [searchPlaceholder]=\"'Search Test Category...'\"\r\n  [listHeading]=\"'Select Test Categories'\"\r\n  [usersList]=\"assuranceCategoriesList\"\r\n  [noDataText]=\"'No Test Categories Found'\"\r\n  [selectedUsers]=\"responsibilityForm.assuranceList\"\r\n  [userIdKey]=\"'category_id'\"\r\n  [itemEmailKey]=\"'category_name'\"\r\n  [itemNameKey]=\"'category_name'\"\r\n  (saveSelectedList)=\"saveSelectedList('assurance', $event)\"\r\n  (closeUsersList)=\"activeDeselector()\"\r\n  [searchPlaceholder]=\"'Search Category'\"\r\n>\r\n</app-owner-list>\r\n\r\n<app-audit-category-list\r\n  *ngIf=\"activeSelector === 'requires_audit'\"\r\n  (closeList)=\"activeDeselector()\"\r\n  [auditCategory]=\"assuranceRequiresAuditList\"\r\n  (saveSelectedList)=\"saveSelectedList('requires_audit', $event)\"\r\n  [selectedData]=\"responsibilityForm?.requiresAuditList[0]\"\r\n></app-audit-category-list>\r\n\r\n<app-loader-inline *ngIf=\"(loader && this.mode === 'EDIT') || entrustLoader\"></app-loader-inline>\r\n<app-framework-list\r\n  *ngIf=\"activeSelector === 'framework'\"\r\n  (assignControl)=\"assignFromFramework($event)\"\r\n  [previousSelectedValues]=\"selectedFrameworkValues\"\r\n  (closeFramework)=\"activeDeselector()\"\r\n  (entrustFramework)=\"entrustFramework($event)\"\r\n></app-framework-list>\r\n\r\n<!-- risk-calculator here -->\r\n<app-risk-classification\r\n  *ngIf=\"activeSelector === 'riskCalculator'\"\r\n  [currentRiskValue]=\"responsibilityForm.riskClass\"\r\n  (saveList)=\"saveSelectedList('calculatedrisk', $event)\"\r\n  (closeList)=\"activeDeselector()\"\r\n>\r\n</app-risk-classification>\r\n\r\n<app-review-frequency\r\n  *ngIf=\"activeSelector === 'reviewerFrequency'\"\r\n  [reviewCompleteDays]=\"\r\n    responsibilityForm.reviewers.reviewFrequency.reviewCompleteDays\r\n  \"\r\n  [reviewNOtCompletedDays]=\"\r\n    responsibilityForm.reviewers.reviewFrequency.reviewNOtCompletedDays\r\n  \"\r\n  (saveReviewFrequency)=\"saveSelectedList('reviewFrequency', $event)\"\r\n  (closeReviewFrequency)=\"\r\n    activeDeselector();\r\n    activateSelector('reviewer', false);\r\n    responsibilityForm.reviewers.list = [];\r\n    responsibilityForm.groupReviewers.list = []\r\n  \"\r\n  (backToUserList)=\"activeDeselector(); activateSelector('reviewer', true)\"\r\n>\r\n</app-review-frequency>\r\n\r\n<app-assessment-list\r\n  *ngIf=\"isAssessment\"\r\n  [program_ids]=\"responsibilityForm.program[0]?._id\"\r\n  (cancelAssessment)=\"\r\n    isAssessment = false; activateSelector('isAssessment', false)\r\n  \"\r\n  [isEdit]=\"responsibilityForm?.assessment?.assessment_id ? true : false\"\r\n  [selectedAssessment]=\"responsibilityForm?.assessment\"\r\n  (onAssessmentSelect)=\"\r\n    onAssessmentSelect($event); activateSelector('isAssessment', false)\r\n  \"\r\n></app-assessment-list>\r\n\r\n<app-smiley-dialog-inline\r\n  *ngIf=\"showSmiley\"\r\n  [message]=\"smileyMessage\"\r\n  [actionButtons]=\"actionButtons\"\r\n  (action)=\"action($event)\"\r\n  (closeSmiley)=\"closeSmiley($event)\"\r\n></app-smiley-dialog-inline>\r\n\r\n<div class=\"import\" *ngIf=\"activeSelector === 'checkpoints-new'\">\r\n  <app-create-assessment-container\r\n    #editor\r\n    [openPortal]=\"'RESPONSIBILITY_CHECKPOINT'\"\r\n    (postAssessment)=\"postAssessment($event)\"\r\n    (setIsUploaded)=\"setIsUploaded($event)\"\r\n    [checkpointJSON]=\"responsibilityForm.new_checkpoints\"\r\n  >\r\n  </app-create-assessment-container>\r\n</div>\r\n\r\n<app-grc-object-list\r\n  *ngIf=\"activeSelector === 'GRC_OBJECTS'\"\r\n  [grcObject]=\"grcList\"\r\n  [selectedGRC]=\"responsibilityForm.selectedGRCObjects | refDisconnect\"\r\n  [loader]=\"grcLoader\"\r\n  [tableCard]=\"otherGRCCard\"\r\n  [selectedTab]=\"selectedGRCTab\"\r\n  [cardLoader]=\"grcTabLoader\"\r\n  (getOtherGRCObjects)=\"getOtherGRCObjects($event)\"\r\n  (saveOtherGRC)=\"saveSelectedList('GRC_OBJECTS', $event)\"\r\n  (closeOtherGRC)=\"activateSelector('GRC_OBJECTS', false)\"\r\n></app-grc-object-list>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::ng-deep .workflw-compliance{display:block;position:relative}::ng-deep .workflw-compliance vcomply-editor .editor-container{border-radius:4px}::ng-deep .workflw-compliance vcomply-editor .editor-container .editable-block{min-height:72px;padding:11px 15px;line-height:20px;font-size:14px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}@media not all and (min-resolution: .001dpcm){@supports (-webkit-appearance: none){::ng-deep .workflw-compliance vcomply-editor .editor-container .editable-block:before{opacity:.72}}}::ng-deep .workflw-compliance vcomply-editor .editor-container .editable-block ul{padding:0 0 0 10px;margin-top:0}::ng-deep .workflw-compliance vcomply-editor .editor-container .editable-block ul li{list-style:unset}::ng-deep .workflw-compliance vcomply-editor .editor-container .editable-block ol{padding:0 0 0 10px;margin-top:0}::ng-deep .workflw-compliance vcomply-editor .editor-container .editable-block ol li{list-style:decimal}::ng-deep .workflw-compliance vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .workflw-compliance vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:22px}::ng-deep .workflw-compliance 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 .workflw-compliance 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 .workflw-compliance .sample-part{display:flex;align-items:center;margin-bottom:4px}::ng-deep .workflw-compliance .sample-part .sample-radio{width:100%}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item{position:relative;width:100%}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item .radio{position:absolute;left:12px;top:12px}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item .value{border:1px solid #DBDBDB;border-radius:4px;height:40px;padding:8px 8px 8px 36px;margin:0;max-width:100%;width:100%;display:flex;align-items:center;justify-content:space-between;pointer-events:none}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item .value .name{color:#747576;font-size:11px;font-weight:500;text-transform:uppercase}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item .value input{border:1px solid #DCDCDC;background:#fff;border-radius:4px;height:24px;width:64px;text-align:center;padding:4px;color:#747576;font-size:13px}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item .value input:focus{outline:none;box-shadow:none}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item input:checked~svg{position:absolute;left:12px;top:12px}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item input:checked~.value{border:1px solid #34AA44;background:#eefcf0;pointer-events:auto}::ng-deep .workflw-compliance .sample-part .or{color:#161b2f;font-size:9px;font-weight:500;text-transform:uppercase;margin:0 10px}::ng-deep .workflw-compliance .sample-part.disabled{pointer-events:none}::ng-deep .workflw-compliance .sample-part.disabled .sample-radio .radio-item .value{background:#fbfbfb;border:1px solid #f1f1f1}::ng-deep .workflw-compliance .reminder-part{border:1px solid #DBDBDB;border-radius:4px;height:40px;padding:4px 12px;color:#747576;font-size:12px;display:flex;align-items:center}::ng-deep .workflw-compliance .reminder-part input{width:30px;border:none;border-radius:0;border-bottom:1px solid #DBDBDB;text-align:center;color:#747576;font-size:13px;font-weight:500;margin:0 4px}::ng-deep .workflw-compliance .reminder-part input:focus{outline:none!important;box-shadow:none!important}::ng-deep .workflw-compliance .reminder-part .picker-group{position:relative}::ng-deep .workflw-compliance .reminder-part .picker-group input{border:1px solid #F1F1F1!important;border-radius:4px!important;width:104px!important;height:28px!important;margin-left:8px!important;padding:6px 8px!important;cursor:pointer;color:#747576!important;font-size:12px!important;font-weight:500!important;text-align:left!important}::ng-deep .workflw-compliance .reminder-part .picker-group input:hover,::ng-deep .workflw-compliance .reminder-part .picker-group input:focus{outline:none!important;box-shadow:none!important}::ng-deep .workflw-compliance .reminder-part .picker-group i{color:#1e5dd3;position:absolute;top:6px;right:10px;font-size:16px}.assessment-text{color:#747576;font-size:11px;display:flex;align-items:center;padding:0 8px;margin:-16px 0 20px}.assessment-text i.alert-icon{color:#f2bf19;font-size:16px;margin-right:8px}.assessment-text strong{font-weight:600}.assessment-text button.remove-btn{background:transparent;border-radius:0;border:none;color:#1e5dd3;font-size:10px;font-weight:600;padding:0;margin:0}.import{position:fixed;inset:0 30px 0 0;z-index:-1;width:calc(100vw - 30px)}.wf-action-list ul.action-item li.multiple-program{background:#f8f8f8}.wf-action-list ul.action-item li.multiple-program .avatar-card{padding:2px 7.5px}.wf-action-list ul.action-item li.multiple-program .avatar-card span.value{color:#747576;font-size:11px;font-weight:600;width:unset}.primary-label{background:#7aa7f7;border-radius:2px;color:#fff;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 4px;line-height:12px;margin:0 4px}.edit-due-date{display:flex;align-items:baseline;justify-content:space-between}\n", "@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/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.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-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.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-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::-webkit-scrollbar-track{background-color:#f1f1f1;position:absolute}::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}button{font-family:Poppins,sans-serif}::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.withBtn:after{display:none}::ng-deep .selectBoxEnable.withBtn button.setBtn{background:transparent;border-radius:0;border:none;min-width:98px}::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 .chipName.full-width{max-width:25rem}::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 .workflowLavel{background:#f1f1f1;border-radius:.125rem;color:#042e7d;min-width:1rem;height:1rem}::ng-deep .reviewSelection{border-radius:.25rem;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep .reviewSelection:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectButton{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectButton:hover,::ng-deep .selectButton:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep button.createNewBtn{background:transparent;border-radius:0;border:none}::ng-deep .vx-form-group{display:block;position:relative;margin-bottom:20px}::ng-deep .vx-form-group:after{content:\"\";display:block;clear:both}::ng-deep .vx-form-group .select{position:relative}::ng-deep .vx-form-group .select:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#707070;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .vx-form-group .select input{cursor:pointer;padding-right:30px!important}::ng-deep .vx-form-group .select .custom-input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;outline:none;padding:3px 12px;line-height:16px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .vx-form-group .select .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:13px;width:94%;display:block;pointer-events:none;opacity:.8}::ng-deep .vx-form-group .select .custom-input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .vx-form-group .select .custom-input.frequency-custom-input{padding-right:108px;display:flex;align-items:center}::ng-deep .vx-form-group .select+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .select+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .select+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .select~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~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 .vx-form-group .select~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .select.button-sec:after{display:none}::ng-deep .vx-form-group .select.button-sec button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;position:absolute;top:12px;right:8px;padding:0;margin:0}::ng-deep .vx-form-group .select+.vx-control-panel{margin-top:8px}::ng-deep .vx-form-group .select+.selected{margin-top:8px}::ng-deep .vx-form-group .select.select{margin-top:8px}::ng-deep .vx-form-group .upload-format{border:1px solid #dbdbdb;border-radius:4px;padding:8px 12px;display:block}::ng-deep .vx-form-group .upload-format span.text{line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:block;margin-bottom:6px}::ng-deep .vx-form-group .upload-format .radio-group{display:flex}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio{display:inline-block}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;margin-left:8px}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio+app-cs-radio{margin-left:12px}::ng-deep .vx-form-group .upload-format~.upload-format{margin-top:4px}::ng-deep .vx-form-group .form-tab{display:flex;justify-content:flex-start}::ng-deep .vx-form-group .form-tab button{background:transparent;color:#161b2f;font-size:11px;line-height:16px;text-transform:uppercase;cursor:pointer;padding:8px 8px 8px 0;border:none;outline:none;font-weight:500}::ng-deep .vx-form-group .form-tab button:disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .form-tab button+button{padding:8px}::ng-deep .vx-form-group .form-tab button.active{color:#1e5dd3}::ng-deep .vx-form-group .tab-group{border:1px solid #dbdbdb;border-radius:4px;padding:0;display:block;position:relative;transition:all .2s ease-in-out}::ng-deep .vx-form-group .tab-group:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group .tab-group .upload-file{padding:16px 62px 16px 24px;display:flex;align-items:center;justify-content:space-between}::ng-deep .vx-form-group .tab-group .upload-file .image{width:80px}::ng-deep .vx-form-group .tab-group .upload-file .browse span{display:inline-block;font-size:12px;color:#747576;line-height:16px;padding:0 4px}::ng-deep .vx-form-group .tab-group .upload-file .browse .label{font-size:11px;color:#1e5dd3;line-height:16px;font-weight:600;text-transform:uppercase;margin:0;padding:0}::ng-deep .vx-form-group .tab-group .upload-file .browse .label input{opacity:0;position:absolute;margin:0;padding:0;inset:0;cursor:pointer;width:100%}::ng-deep .vx-form-group .tab-group.active{border-color:#1e5dd3}::ng-deep .vx-form-group .tab-group.uploaded{margin-top:4px}::ng-deep .vx-form-group .tab-group.uploaded .upload-file{padding:8px 0!important;text-align:center}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .image{display:none}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .browse{width:100%;text-align:center}::ng-deep .vx-form-group .tab-group+label.vx-form-group{margin-top:8px;margin-bottom:4px}::ng-deep .vx-form-group .file-list{background:#fbfbfb;border:1px solid #f1f1f1;border-radius:4px;padding:12px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;position:relative}::ng-deep .vx-form-group .file-list span.file-name{color:#747576;line-height:16px;font-size:11px;font-weight:400;cursor:pointer;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .vx-form-group .file-list .button-group{display:flex}::ng-deep .vx-form-group .file-list button{font-size:12px;color:#eb2424;cursor:pointer;display:flex;padding:0;border:none;outline:none;background:transparent}::ng-deep .vx-form-group .file-list button.edit{color:#1e5dd3}::ng-deep .vx-form-group .file-list button+button{margin-left:16px}::ng-deep .vx-form-group .file-list+.file-list{margin-top:4px}::ng-deep .vx-form-group .file-list .file-container{display:flex;justify-content:space-between;width:100%}::ng-deep .vx-form-group .file-list.policy{background:#fff}::ng-deep .vx-form-group .file-list cs-select{position:relative;margin-top:8px;width:100%}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group input.value{height:32px!important;font-size:13px!important}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group i{right:12px!important;top:12px!important}::ng-deep .vx-form-group .file-list app-line-loader{display:block;position:absolute;left:10px;right:10px;bottom:0}::ng-deep .vx-form-group label.vx-control-panel{color:#161b2f;font-size:11px;font-weight:500;line-height:16px;margin-bottom:8px;display:block;text-transform:uppercase;text-align:left}::ng-deep .vx-form-group label.vx-control-panel.custom-tag{font-size:10px}::ng-deep .vx-form-group label.vx-control-panel.vx-mt-8{margin-top:8px}::ng-deep .vx-form-group label.vx-control-panel span.required{color:#eb2424;font-size:14px;font-weight:500;position:relative;top:-2px}::ng-deep .vx-form-group label.vx-control-panel .button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;padding:0;margin:0}::ng-deep .vx-form-group label.vx-control-panel app-cs-switch{float:right;display:block}::ng-deep .vx-form-group label.vx-control-panel i{margin-left:8px;font-size:12px;color:#1e5dd3;cursor:pointer;position:relative;top:1px}::ng-deep .vx-form-group label.vx-control-panel i.depreciation-icon{color:#e4b700;font-size:16px;position:relative;top:3px}::ng-deep .vx-form-group label.vx-control-panel .checkpoint-version{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:10px;font-weight:600;line-height:14px;margin-left:4px;padding:0 2px}::ng-deep .vx-form-group input[type=text],::ng-deep .vx-form-group .input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;outline:none;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400}::ng-deep .vx-form-group input[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group input[type=text]:focus,::ng-deep .vx-form-group .input:focus,::ng-deep .vx-form-group input[type=text]:hover,::ng-deep .vx-form-group .input:hover{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group input[type=text].error,::ng-deep .vx-form-group .input.error{border-color:#eb2424;color:#eb2424;margin-bottom:4px}::ng-deep .vx-form-group input[type=text].error:focus,::ng-deep .vx-form-group .input.error:focus{box-shadow:0 0 5px #d31e1e45}::ng-deep .vx-form-group input[type=text]:disabled,::ng-deep .vx-form-group .input:disabled{background:#f1f1f1;cursor:not-allowed;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group input[type=text]:disabled:hover,::ng-deep .vx-form-group .input:disabled:hover{border-color:#dbdbdb;box-shadow:none}::ng-deep .vx-form-group input[type=text] span.text,::ng-deep .vx-form-group .input span.text{font-size:13px;color:#747576;font-weight:400;display:block;width:100%}::ng-deep .vx-form-group input[type=text] .input-group,::ng-deep .vx-form-group .input .input-group{display:flex;align-items:center}::ng-deep .vx-form-group input[type=text] .input-group.counter,::ng-deep .vx-form-group .input .input-group.counter{min-width:96px;width:96px}::ng-deep .vx-form-group input[type=text] .input-group.counter button,::ng-deep .vx-form-group .input .input-group.counter button{height:24px;width:24px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#747576;font-size:8px;cursor:pointer;outline:none}::ng-deep .vx-form-group input[type=text] .input-group.counter input,::ng-deep .vx-form-group .input .input-group.counter input{-webkit-appearance:textfield;-moz-appearance:textfield;height:24px;width:calc(100% - 48px);border:1px solid #f1f1f1;outline:none;padding:0 6px;text-align:center}::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-outer-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-outer-spin-button{appearance:none;margin:0}::ng-deep .vx-form-group input[type=text]+.file-list,::ng-deep .vx-form-group .input+.file-list{margin-top:8px}::ng-deep .vx-form-group input[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]:-ms-input-placeholder,::ng-deep .vx-form-group .input:-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]::-ms-input-placeholder,::ng-deep .vx-form-group .input::-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group .classification{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;padding:8px 12px;display:flex;justify-content:space-between}::ng-deep .vx-form-group .classification label{margin:0 4px 0 0;width:100%;position:relative;z-index:1}::ng-deep .vx-form-group .classification label span{display:block;width:100%;height:24px;border:1px solid #f1f1f1;border-radius:2px;line-height:24px;font-size:10px;text-align:center;color:#747576;font-weight:500;position:relative;text-transform:uppercase}::ng-deep .vx-form-group .classification label span:before{height:2px;content:\"\";top:0;right:0;left:0;border-radius:2px;position:absolute;transition:all .2s ease-in-out}::ng-deep .vx-form-group .classification label input{opacity:0;position:absolute;inset:0;margin:0;padding:0;width:100%;height:100%;cursor:pointer;z-index:1}::ng-deep .vx-form-group .classification label input:checked+span{color:#fff}::ng-deep .vx-form-group .classification label input:checked+span:before{bottom:0;height:100%;z-index:-1}::ng-deep .vx-form-group .classification label.low span:before{background:#34aa44}::ng-deep .vx-form-group .classification label.low-med span:before{background:#f2bf19}::ng-deep .vx-form-group .classification label.med-high span:before{background:#f29619}::ng-deep .vx-form-group .classification label.high span:before{background:#eb2424}::ng-deep .vx-form-group .classification label:last-of-type{margin-right:0}::ng-deep .vx-form-group .input{display:flex;align-items:center}::ng-deep .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;padding:8px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:flex;align-items:center;position:relative;justify-content:space-between}::ng-deep .vx-form-group .selected.first-field{z-index:2}::ng-deep .vx-form-group .selected .chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .vx-form-group .selected .chip-container.checkpoints{width:calc(100% - 120px)}::ng-deep .vx-form-group .selected .chip-container span.chip{background:#fff;border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;padding:0 8px;color:#1e5dd3;font-size:12px;display:block;width:auto;max-width:100%;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .vx-form-group .selected .chip-container span.chip.disabled{background:#f1f1f1;box-shadow:none;color:#747576;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .selected .chip-container span.chip i{font-weight:400;margin-right:8px;cursor:pointer;font-size:10px;position:relative;top:1px}::ng-deep .vx-form-group .selected .chip-container span.chip span.step{background:#1e5dd3;border-radius:2px;color:#fff;font-size:9px;line-height:14px;padding:0 4px;font-weight:400;text-align:center;min-width:auto;margin-right:4px}::ng-deep .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question{display:flex;align-items:center;justify-content:space-between;width:100%}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.value{color:#1e5dd3;font-size:12px;font-weight:400;line-height:24px;padding:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 80px)}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.label{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding-left:4px;padding-right:4px;line-height:12px;margin-left:8px}::ng-deep .vx-form-group .selected .chip-container span.value{color:#747576;font-size:13px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 52px);padding:0 4px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text{color:#747576;font-size:10px;font-weight:500;padding:0 8px;width:122px;line-height:14px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first{position:relative;min-width:162px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first:before{background:#f1f1f1;content:\"\";position:absolute;top:0;right:0;height:calc(100% + 12px);width:1px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text .no{color:#1e5dd3}::ng-deep .vx-form-group .selected .chip-container.plus span.chip{max-width:calc(50% - 35px)}::ng-deep .vx-form-group .selected .chip-container.more-one span.chip{max-width:50%}::ng-deep .vx-form-group .selected .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 .vx-form-group .selected .chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:100px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count{border-radius:20px;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .vx-form-group .selected .chip-container .chip-inner i.cross{cursor:pointer;position:relative;top:1px;font-size:8px}::ng-deep .vx-form-group .selected button.count{background:#1e5dd3;border-radius:2px;height:24px;padding:0 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none;color:#fff;font:13px;font-weight:500;line-height:20px;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit{border:none;border-radius:0;background:transparent;outline:none;cursor:pointer;display:block;font-size:11px;font-weight:600;color:#1e5dd3;text-transform:uppercase;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit i{font-weight:400;font-size:8px;margin-right:4px}::ng-deep .vx-form-group .selected button.close-btn{background:transparent;border:none;padding:0;margin-left:8px;font-size:10px;color:#c7381b;display:flex;align-items:center}::ng-deep .vx-form-group .selected .workflow-label{min-width:92px;padding:4px;text-align:center;margin-left:-8px;margin-right:8px;border-right:1px solid #f1f1f1}::ng-deep .vx-form-group .selected .workflow-label p{margin:0;display:block;text-transform:uppercase}::ng-deep .vx-form-group .selected .workflow-label p.title{font-size:9px;line-height:12px;color:#161b2f;font-weight:500}::ng-deep .vx-form-group .selected .workflow-label p.description{font-size:11px;line-height:16px;color:#161b2f;font-weight:600}::ng-deep .vx-form-group .selected .workflow-label+.chip-container{width:calc(100% - 148px)}::ng-deep .vx-form-group .selected+.selected{margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .selected+app-cs-switch.who-toggle label.cs-switch span.value{color:#747576}::ng-deep .vx-form-group .selected+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .selected~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~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 .vx-form-group .selected~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .selected.readOnly{pointer-events:none}::ng-deep .vx-form-group .selected span.chip{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .vx-form-group .select-list{position:absolute;background:#fff;box-shadow:0 0 5px #1e5dd345;top:100%;right:0;left:0;z-index:2}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item{width:100%;padding:12px 16px}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item:hover{background:#f8f8f8}::ng-deep .vx-form-group vcomply-editor{margin-top:8px;display:block}::ng-deep .vx-form-group vcomply-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb}::ng-deep .vx-form-group vcomply-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;max-height:100px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep .vx-form-group vcomply-editor .editor-container .editable-block ul{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group vcomply-editor .editor-container .editable-block ul li{list-style:disc}::ng-deep .vx-form-group vcomply-editor .editor-container .editable-block ol{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group vcomply-editor .editor-container .editable-block ol li{list-style:decimal}::ng-deep .vx-form-group vcomply-editor .editor-container .editor-tools{z-index:1;border-top:1px solid #dbdbdb;transition:none;border-radius:0 0 3px 3px;position:static}::ng-deep .vx-form-group vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .vx-form-group vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .vx-form-group 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 .vx-form-group 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 .vx-form-group vcomply-editor .editor-container:focus-within{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group vcomply-editor .editor-container:focus-within .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group vcomply-editor .editor-container:hover{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group vcomply-editor .editor-container:hover .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group vcomply-editor+app-cs-switch{margin-top:8px}::ng-deep .vx-form-group app-cs-switch label.cs-switch span.value{font-size:11px;color:#747576;text-transform:uppercase}::ng-deep .vx-form-group app-cs-switch+app-cs-switch{margin-top:8px}::ng-deep .vx-form-group .date-time-picker{display:flex;justify-content:space-between;height:40px;border-radius:4px;border:1px solid #dbdbdb;padding:11px 0;background:#fff}::ng-deep .vx-form-group .date-time-picker:focus-within{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .vx-form-group .date-time-picker .picker-group{width:50%;position:relative;display:flex;align-items:center}::ng-deep .vx-form-group .date-time-picker .picker-group:first-of-type{border-right:1px solid #dbdbdb}::ng-deep .vx-form-group .date-time-picker .picker-group:only-of-type{border:none;width:100%}::ng-deep .vx-form-group .date-time-picker .picker-group input{height:38px;background:transparent;line-height:38px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400;border:none;padding:0 12px 0 34px;outline:none}::ng-deep .vx-form-group .date-time-picker .picker-group input:focus,::ng-deep .vx-form-group .date-time-picker .picker-group input:hover{box-shadow:none;border:none}::ng-deep .vx-form-group .date-time-picker .picker-group input::placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input:-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input::-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group i{display:flex;justify-content:center;align-items:center;height:16px;width:12px;position:absolute;left:12px;top:0;color:#747576;font-size:12px;pointer-events:none}::ng-deep .vx-form-group app-cs-radio.main-filed{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed 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%;color:#707070}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group app-cs-radio.disabled{pointer-events:none;opacity:.5;filter:grayscale(1);background:#f1f1f1}::ng-deep .vx-form-group .switch-row{display:flex}::ng-deep .vx-form-group .switch-row app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:0;text-transform:uppercase;color:#747576!important}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value i{display:inline-flex;font-size:11px;cursor:pointer;color:#1e5dd3;align-items:center;line-height:16px;margin:0 4px}::ng-deep .vx-form-group .switch-row app-cs-switch+app-cs-switch{margin-left:8px}::ng-deep .vx-form-group .switch-row.align-right{justify-content:flex-end}::ng-deep .vx-form-group .switch-row.align-right label.cs-switch span.value{margin-right:8px}::ng-deep .vx-form-group .risk-type-field{background:#f8f8f8;border:1px solid #dbdbdb;border-radius:4px;height:40px;display:flex;align-items:center;padding:4px;position:relative;z-index:1}::ng-deep .vx-form-group .risk-type-field .type-item{width:50%;position:relative}::ng-deep .vx-form-group .risk-type-field .type-item button{background:transparent;border:none;border-radius:0;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase;width:100%;height:32px;padding:0 12px;text-align:left}::ng-deep .vx-form-group .risk-type-field .type-item button.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item .info{color:#1e5dd3;font-size:12px;position:absolute;top:10px;right:12px;cursor:pointer}::ng-deep .vx-form-group .risk-type-field .type-item .info.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item.active button{color:#1e5dd3!important}::ng-deep .vx-form-group .risk-type-field .type-item:nth-child(2).active~.background-glider{transform:translate(100%)}::ng-deep .vx-form-group .risk-type-field .background-glider{background:#fff;border-radius:4px;box-shadow:0 1px 3px #161b2f26;position:absolute;display:flex;width:212px;height:32px;z-index:-1;transition:.25s ease-out}.left{width:36px;height:36px;margin-top:26px;margin-left:-58px;margin-right:20px;display:flex;justify-content:center;align-items:center;position:relative;z-index:10;border-radius:50%}.left.deadline-completed{margin-top:18px}.left.checked{background:transparent}.left img{width:36px}.left .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}.left .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}.left .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}.right{width:100%}.right span.indicator{position:absolute;top:36px;left:-16px;font-size:12px;color:#f0b819;cursor:pointer}.form-group-row{display:flex;position:relative;transition:all .2s ease-in-out}.form-group-row.disabled{-webkit-user-select:none;user-select:none;pointer-events:none;filter:grayscale(1);z-index:2}.form-group-row.disabled .left{position:relative}.form-group-row.disabled .left:before{content:\"\";position:absolute;inset:2px 0 0 2px;background:#fff;opacity:.7;border-radius:50%;width:32px;height:32px}.form-group-row.disabled .right{opacity:.3}.form-group-row.active{pointer-events:none;filter:grayscale(0);z-index:2;opacity:1}.form-group-row.active .right .vx-form-group input,.form-group-row.active .right .vx-form-group .custom-input,.form-group-row.active .right .vx-form-group .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}.form-group-row.active .right .vx-form-group .selectBoxEnable.disabled{border-color:#dbdbdb;box-shadow:none}::ng-deep .radio-group-selector app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .radio-group-selector app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .radio-group-selector app-cs-radio label.radio-item .radio,::ng-deep .radio-group-selector app-cs-radio label.radio-item .radiomark{position:absolute!important;top:9px;left:12px}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value{font-size:11px!important;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!important;max-width:100%!important;font-weight:500!important;color:#707070!important}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value i{font-size:12px;color:#1e5dd3}::ng-deep .radio-group-selector app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}::ng-deep .wf-action-list{width:220px}::ng-deep .wf-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}::ng-deep .wf-action-list ul.action-item{display:block}::ng-deep .wf-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}::ng-deep .wf-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}::ng-deep .wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .wf-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .wf-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}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .wf-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .wf-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}::ng-deep .wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .wf-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .wf-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}::ng-deep .wf-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}::ng-deep .wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}p.error-message{font-size:11px;font-weight:400;color:#eb2424;line-height:16px;margin-top:8px;margin-bottom:0}.edit-loader{position:absolute;top:-3px;left:-3px;width:46px;height:46px;transform:rotate(180deg)}.circular-loader{animation:rotate 2s linear infinite;height:100%;transform-origin:center center;width:100%;position:absolute;top:0;left:0;margin:auto}.loader-path{stroke-dasharray:150,200;stroke-dashoffset:-10;animation:dash 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35}to{stroke-dasharray:89,200;stroke-dashoffset:-124}}::ng-deep .dropdown{position:fixed;background:#fff;box-shadow:0 3px 6px #00000029;padding:24px 0;z-index:9;max-height:calc(100vh - 200px);overflow:auto}::ng-deep .dropdown ul.dropdown-list{padding:0 20px;margin:0;display:block}::ng-deep .dropdown ul.dropdown-list li{list-style:none}::ng-deep .dropdown ul.dropdown-list li app-cs-radio{display:flex}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.radio{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.value{padding:11px 12px 11px 32px;width:100%;border:1px solid #bcbcbc;border-radius:4px;margin-left:0;max-width:100%}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item svg{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item input[type=radio]:checked~span.value{background:#e8feeb;border-color:#34aa44}::ng-deep .dropdown ul.dropdown-list li+li{margin-top:8px}app-smiley-dialog{position:relative;z-index:10}app-smiley-dialog-inline{position:absolute;top:-3px;right:0;bottom:0;z-index:999;width:520px;height:calc(100vh + 3px)}::ng-deep .vx-overlay{position:fixed;z-index:3;inset:0}::ng-deep dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}::ng-deep dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}::ng-deep dp-date-picker input:focus{outline:none}::ng-deep dp-date-picker .dp-popup{width:412px;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 dp-date-picker .dp-popup dp-day-calendar,::ng-deep dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep dp-date-picker .dp-popup dp-day-calendar button,::ng-deep dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep dp-date-picker .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 dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep dp-date-picker .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 dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep dp-date-picker .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 dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep dp-date-picker .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 dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep dp-date-picker .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 dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep dp-date-picker .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 dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}::ng-deep dp-date-picker .dp-open+div{position:fixed!important;inset:0!important;display:flex;justify-content:center;align-items:center;z-index:99;pointer-events:none;background:#0000004d}::ng-deep .cdk-overlay-container{z-index:2147483002!important}::ng-deep .dp-popup{z-index:999;display:flex!important;align-items:center;justify-content:center;width:100vw;height:100vh;background:#0000004d!important;box-shadow:unset!important}::ng-deep .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 .dp-popup dp-day-calendar,::ng-deep .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep .dp-popup dp-day-calendar button,::ng-deep .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep .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 .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep .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 .dp-popup dp-day-calendar .dp-weekdays,::ng-deep .dp-popup dp-month-calendar .dp-weekdays,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep .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 .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep .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 .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep .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 .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep .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 .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}@keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}::ng-deep span.file{display:block;width:20px;min-width:20px;border-radius:0 0 2px 2px;border:1px solid transparent;border-color:#747576;position:relative;margin-right:5px;border-top:none;margin-top:5px;background:#fff}::ng-deep span.file.table{margin-right:8px;width:18px;min-width:18px}::ng-deep span.file.table i{font-size:8px}::ng-deep span.file.table .format{height:8px;font-size:7px;line-height:8px;font-weight:400}::ng-deep span.file:before{position:absolute;border-radius:0;top:-4px;right:-1px;content:\"\";height:4px;width:4px;display:block;background:linear-gradient(45deg,#747576 0% 1%,#747576 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file:after{height:4px;left:-1px;right:3px;border-top:1px solid;border-right:none;border-left:1px solid;content:\"\";top:-4px;position:absolute;border-radius:2px 0 0;background:#fff}::ng-deep span.file .format{height:10px;font-size:6px;text-transform:uppercase;background:transparent;font-weight:600;text-align:center;display:block;line-height:10px}::ng-deep span.file i{font-size:10px;height:10px;display:flex;align-items:center;justify-content:center;color:#dbdbdb}::ng-deep span.file.docx{width:22px!important}::ng-deep span.file.pdf,::ng-deep span.file.template{border-color:#f31c39}::ng-deep span.file.pdf:before,::ng-deep span.file.template:before{background:linear-gradient(45deg,#f31c39 0% 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#f31c39\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.pdf:after,::ng-deep span.file.template:after{border-color:#f31c39}::ng-deep span.file.pdf .format,::ng-deep span.file.template .format{color:#f31c39}::ng-deep span.file.xlsx,::ng-deep span.file.xls,::ng-deep span.file.css,::ng-deep span.file.scss,::ng-deep span.file.less{border-color:#34aa44}::ng-deep span.file.xlsx:before,::ng-deep span.file.xls:before,::ng-deep span.file.css:before,::ng-deep span.file.scss:before,::ng-deep span.file.less:before{background:linear-gradient(45deg,#34aa44 0% 1%,#34aa44 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.xlsx:after,::ng-deep span.file.xls:after,::ng-deep span.file.css:after,::ng-deep span.file.scss:after,::ng-deep span.file.less:after{border-color:#34aa44;color:#34aa44}::ng-deep span.file.xlsx .format,::ng-deep span.file.xls .format,::ng-deep span.file.css .format,::ng-deep span.file.scss .format,::ng-deep span.file.less .format{color:#34aa44}::ng-deep span.file.doc,::ng-deep span.file.docx,::ng-deep span.file.psd{border-color:#1e5dd3}::ng-deep span.file.doc:before,::ng-deep span.file.docx:before,::ng-deep span.file.psd:before{background:linear-gradient(45deg,#1e5dd3 0% 1%,#1e5dd3 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.doc:after,::ng-deep span.file.docx:after,::ng-deep span.file.psd:after{border-color:#1e5dd3}::ng-deep span.file.doc .format,::ng-deep span.file.docx .format,::ng-deep span.file.psd .format{color:#1e5dd3}::ng-deep span.file.ppt,::ng-deep span.file.ai,::ng-deep span.file.html,::ng-deep span.file.jpg,::ng-deep span.file.jpeg,::ng-deep span.file.png{border-color:#f6882f}::ng-deep span.file.ppt:before,::ng-deep span.file.ai:before,::ng-deep span.file.html:before,::ng-deep span.file.jpg:before,::ng-deep span.file.jpeg:before,::ng-deep span.file.png:before{background:linear-gradient(45deg,#f6882f 0% 1%,#f6882f 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.ppt:after,::ng-deep span.file.ai:after,::ng-deep span.file.html:after,::ng-deep span.file.jpg:after,::ng-deep span.file.jpeg:after,::ng-deep span.file.png:after{border-color:#f6882f}::ng-deep span.file.ppt .format,::ng-deep span.file.ai .format,::ng-deep span.file.html .format,::ng-deep span.file.jpg .format,::ng-deep span.file.jpeg .format,::ng-deep span.file.png .format{color:#f6882f}::ng-deep span.file.php{border-color:#7aa6f7}::ng-deep span.file.php:before{background:linear-gradient(45deg,#7aa6f7 0% 1%,#7aa6f7 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.php:after{border-color:#7aa6f7}::ng-deep span.file.php .format{color:#7aa6f7}::ng-deep ngx-material-timepicker-container .timepicker-backdrop-overlay{background-color:#0000000d!important;z-index:9999999999!important}::ng-deep ngx-material-timepicker-container .timepicker-overlay{z-index:9999999999!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker{width:232px!important;border-radius:2px!important;box-shadow:0 4px 30px #161b2f26!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header{background-color:#fff!important;padding:0!important;border-radius:2px 2px 0 0}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container{display:block!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time{color:#000!important;width:150px!important;margin:0 auto;line-height:60px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control{font-size:40px;background-color:transparent!important;color:#000!important;font-weight:600;text-align:right;caret-color:transparent;outline:none;font-family:Poppins;line-height:56px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:focus,::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:hover{background-color:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control:last-of-type .timepicker-dial__control{text-align:left}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time span{padding:0 8px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period{display:flex!important;width:182px;margin:0 auto!important;background:#f1f1f1;padding:4px 10px;border-radius:20px;position:relative}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period:before{background:#f1f1f1;content:\"\";position:absolute;top:15px;left:-25px;width:calc(100% + 50px);height:2px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period{flex-direction:unset!important;position:relative;z-index:1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:after{content:\"\";position:absolute;right:-12px;top:0;border-left:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:before{content:\"\";position:absolute;left:-18px;top:0;border-right:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button{font-size:11px;background-color:transparent;padding:0;border-radius:20px;color:#747576;font-weight:600;font-family:Poppins;width:84px;height:24px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button.timepicker-dial__item_active{background:#fff!important;color:#1e5dd3!important;box-shadow:0 1px 2px #dbdbdb}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button+button{margin-left:0!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face{width:200px!important;height:200px!important;padding:10px!important;background:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer{height:92px!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span{color:#000}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span.active{color:#fff}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand{height:80px!important;top:calc(50% - 80px)!important;background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number>span.active{background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand_minute:before{border:4px solid #1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions{display:flex!important;padding:10px 0 0!important;background:#fff!important;justify-content:space-around!important;border-radius:0 0 2px 2px!important;overflow:hidden}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div:first-child ngx-material-timepicker-button button.timepicker-button{background:#f8f8f8;color:#1e5dd3}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button{line-height:28px!important;width:100%;background:#1e5dd3;color:#fff;border-radius:0!important;height:32px!important;width:116px!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button span{font-weight:500!important;font-size:11px;font-family:Poppins}::ng-deep vcomply-editor{display:block}::ng-deep vcomply-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep vcomply-editor .editor-container:hover,::ng-deep vcomply-editor .editor-container:focus-within{border:1px solid #1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep vcomply-editor .editor-container mention-list ul li a{font-size:16px!important}::ng-deep vcomply-editor .editor-container .editable-block{background:#fff;min-height:60px;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep vcomply-editor .editor-container .editable-block:before{color:#747576!important}::ng-deep vcomply-editor .editor-container .editor-tools{border-top:1px solid #dbdbdb;border-radius:0 0 3px 3px}::ng-deep vcomply-editor .editor-container .editor-tools:hover{border-color:#1e5dd3}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep 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 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 marx-modal .popup-modal-background{background-color:#161b2fcc!important}::ng-deep .within-box{background:#f1f1f1;border-radius:.125rem;color:#042e7d}::ng-deep .within-value{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-word}.wf-tooltip{pointer-events:none;position:absolute;max-width:300px;font-size:12px;text-align:left;color:#fff;padding:8px 12px;background:#000;border-radius:2px;z-index:-222;top:0;opacity:0;white-space:break-spaces;word-break:break-word}.wf-tooltip *{color:#fff!important}.wf-tooltip:empty{display:none!important}.wf-tooltip.white{box-shadow:0 2px 8px #1c5bd159;color:#747576;background:#fff;text-align:left}.wf-tooltip.white b{color:#747576!important}.wf-tooltip.animate-top{animation:animate-top .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-right{animation:animate-right .3s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-bottom{animation:animate-bottom .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-left{animation:animate-left .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip-top:after{top:100%;left:50%;margin-left:-5px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip-bottom:after{bottom:100%;left:50%;margin-left:-5px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-left.white:after{border-color:transparent transparent transparent #f1f1f1}.wf-tooltip-left:after{top:50%;left:100%;margin-top:-5px;border-width:5px;border-color:transparent transparent transparent #000000}.wf-tooltip-right.white:after{border-color:transparent #f1f1f1 transparent transparent}.wf-tooltip-right:after{top:50%;right:100%;margin-top:-5px;border-width:5px;border-color:transparent #000000 transparent transparent}.wf-tooltip-bottom-right:after{bottom:100%;left:100%;margin-left:-20px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom-right.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-bottom-left:after{bottom:100%;left:0;margin-left:10px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom-left.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-top-left:after{top:100%;left:0;margin-left:10px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top-left.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip-top-right:after{top:100%;left:100%;margin-left:-5px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top-right.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip:after{content:\"\";position:absolute;border-style:solid}.wf-tooltip span.within{font-size:80%;display:block;width:100%}.wf-tooltip .small{display:block;font-size:10px}.wf-tooltip .within-box{background:#f1f1f1;border-radius:2px;color:#042e7d!important;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 2px;margin-right:2px}.wf-tooltip-show{pointer-events:none;opacity:1;z-index:2147483001}\n"] }]
-        }], ctorParameters: function () { return [{ type: AuthService }, { type: ResponsibilityService }, { type: FrequencyService }, { type: UiKitService }, { type: SnackBarService }, { type: AuthService }, { type: ProgramsService }, { type: GrcService }]; }, propDecorators: { mode: [{
+        }], ctorParameters: function () { return [{ type: AuthService }, { type: ResponsibilityService }, { type: FrequencyService }, { type: UiKitService }, { type: SnackBarService }, { type: AuthService }, { type: ProgramsService }, { type: GrcService }, { type: OrganizationUserService }]; }, propDecorators: { mode: [{
                 type: Input
             }], responsibilityId: [{
                 type: Input
@@ -27967,21 +28031,21 @@ class RestApiService {
             case 'get':
                 return this.httpClient
                     .get(url + additionalUrl, httpOptions)
-                    .pipe(retry(2), catchError(this.handleError));
+                    .pipe(retry(2), catchError$1(this.handleError));
             case 'post':
                 return this.httpClient.post(url + additionalUrl, req.data, httpOptions);
             case 'put':
                 return this.httpClient
                     .put(url + additionalUrl, req.data)
-                    .pipe(retry(2), catchError(this.handleError));
+                    .pipe(retry(2), catchError$1(this.handleError));
             case 'patch':
                 return this.httpClient
                     .patch(url + additionalUrl, req.data)
-                    .pipe(retry(2), catchError(this.handleError));
+                    .pipe(retry(2), catchError$1(this.handleError));
             case 'delete':
                 return this.httpClient
                     .delete(url + additionalUrl, httpOptions)
-                    .pipe(retry(2), catchError(this.handleError));
+                    .pipe(retry(2), catchError$1(this.handleError));
             default:
                 return of('invalid req');
         }
@@ -28005,21 +28069,21 @@ class RestApiService {
             case 'get':
                 return this.httpClient
                     .get(url + req.action, httpOptions)
-                    .pipe(retry(2), catchError(this.handleError));
+                    .pipe(retry(2), catchError$1(this.handleError));
             case 'post':
                 return this.httpClient.post(url + req.action, req.data, httpOptions);
             case 'put':
                 return this.httpClient
                     .put(url + req.action, req.data)
-                    .pipe(retry(2), catchError(this.handleError));
+                    .pipe(retry(2), catchError$1(this.handleError));
             case 'patch':
                 return this.httpClient
                     .patch(url + req.action, req.data)
-                    .pipe(retry(2), catchError(this.handleError));
+                    .pipe(retry(2), catchError$1(this.handleError));
             case 'delete':
                 return this.httpClient
                     .delete(url + req.action, httpOptions)
-                    .pipe(retry(2), catchError(this.handleError));
+                    .pipe(retry(2), catchError$1(this.handleError));
             default:
                 return of('invalid req');
         }