vcomply-workflow-engine 3.4.76 → 3.4.77

package/fesm2020/vcomply-workflow-engine.mjs

@@ -11033,6 +11033,7 @@ class WorkflowRiskComponent {
             mitigation: 0,
             assessment_deadline_days: 0,
             head_ids: [],
+            addRiskOwner: false,
             addOverseer: false,
             addMitigation: false,
             addMitigationPlan: false,
@@ -11048,6 +11049,7 @@ class WorkflowRiskComponent {
             enableAllFutureBusinessCycle: true,
             GRC: false,
             selectedGRCObjects: [],
+            risk_owner: '',
         };
         this.apiUrl = '';
         this.memberId = 0;
@@ -11256,12 +11258,14 @@ class WorkflowRiskComponent {
                 };
                 this.riskForm.categoryCustomTags = res.category_custom_tag;
             }
+            this.riskForm.risk_owner = res.risk_owner;
             this.riskForm.overseersList = this.setList(this.ownersList, res.manage_oversight, 'member_id');
             this.riskForm.overseersGroupList = this.setList(this.groupsList, res?.overseergroup_ids, '_id');
             this.riskForm.mitigation = res?.mitigation
                 ? res?.mitigation
                 : this.riskForm?.mitigation;
             this.riskForm.assessment_deadline_days = res.assessment_deadline_days;
+            this.riskForm.addRiskOwner = res.risk_owner ? true : false;
             this.riskForm.addOverseer =
                 res.manage_oversight.length > 0 || res?.overseergroup_ids?.length > 0
                     ? true
@@ -11321,6 +11325,9 @@ class WorkflowRiskComponent {
         if (this.riskForm.addMitigation) {
             activatedOptions.push('MITIGATION');
         }
+        if (this.riskForm.addRiskOwner) {
+            activatedOptions.push('RISK_OWNER');
+        }
         if (this.riskForm.addOverseer) {
             activatedOptions.push('OVERSEER');
         }
@@ -11667,6 +11674,9 @@ class WorkflowRiskComponent {
     }
     addMoreInfo(event) {
         switch (event.code) {
+            case 'RISK_OWNER':
+                this.riskForm.addRiskOwner = event?.checked;
+                break;
             case 'OVERSEER':
                 this.riskForm.addOverseer = event?.checked;
                 break;
@@ -11743,6 +11753,7 @@ class WorkflowRiskComponent {
             assessment_deadline_set_by: this.settingsInfo.assessment_deadline_set_by,
             // assessment_deadline_days: (this.settingsInfo.assessment_deadline_enable) ? this.settingsInfo.assessment_deadline_days : riskForm.assessment_deadline_days,
             risk_type: this.riskForm?.riskType ?? 'NORMAL',
+            risk_owner: riskForm.addRiskOwner ? riskForm.risk_owner ?? '' : '',
             mitigation_plan_recommendation: this.riskForm?.addMitigationPlan
                 ? this.riskForm?.mitigationDescriptionPlan ?? ''
                 : '',
@@ -11818,6 +11829,8 @@ class WorkflowRiskComponent {
             mitigation: 0,
             assessment_deadline_days: 0,
             head_ids: [],
+            risk_owner: '',
+            addRiskOwner: false,
             addOverseer: false,
             addMitigation: false,
             frequency_details: {
@@ -12505,10 +12518,10 @@ class WorkflowRiskComponent {
     }
 }
 WorkflowRiskComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: WorkflowRiskComponent, deps: [{ token: AddRiskService }, { token: AuthService }, { token: UiKitService }, { token: SnackBarService }, { token: FrequencyService }, { token: GrcService }, { token: Configurations, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-WorkflowRiskComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: WorkflowRiskComponent, selector: "app-workflow-risk", inputs: { feature: "feature", mode: "mode", riskId: "riskId", defaultRiskType: "defaultRiskType", moveToRegisterMode: "moveToRegisterMode", secondaryOpenPortal: "secondaryOpenPortal", openedFrom: "openedFrom" }, outputs: { showConfirmationAlert: "showConfirmationAlert", pickerChanged: "pickerChanged", populateOption: "populateOption", closeWorkflow: "closeWorkflow", disconnectRefresh: "disconnectRefresh", refreshForm: "refreshForm", hideElementsFromMoreOptions: "hideElementsFromMoreOptions", rcSelected: "rcSelected" }, ngImport: i0, template: "<div class=\"workflw-risk\" *ngIf=\"!showSmiley\">\r\n  <!-- Risk Type -->\r\n  <div class=\"form-group-row\" [class.active]=\"false\" [class.disabled]=\"false\">\r\n    <div class=\"left checked\">\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 Type <span class=\"required\">*</span></label\r\n        >\r\n        <div class=\"risk-type-field\">\r\n          <div\r\n            class=\"type-item\"\r\n            [class.active]=\"riskForm?.riskType === 'NORMAL'\"\r\n          >\r\n            <button\r\n              [class.disabled]=\"!riskTypeChangeAllowed\"\r\n              (click)=\"changeRisk('NORMAL')\"\r\n            >\r\n              ADD TO RISK REGISTER\r\n            </button>\r\n            <i\r\n              class=\"icons info\"\r\n              [appTooltip]=\"\r\n                'This option lets you add a risk directly to the Risk Register. The risk owners will receive an alert and they can begin the the risk assessment process.'\r\n              \"\r\n              placement=\"bottom-right\"\r\n              delay=\"0\"\r\n              type=\"white\"\r\n              [tooltipMandatory]=\"true\"\r\n              >&#xe932;</i\r\n            >\r\n          </div>\r\n          <div\r\n            class=\"type-item\"\r\n            [class.active]=\"riskForm?.riskType === 'REPORTED'\"\r\n          >\r\n            <button\r\n              [class.disabled]=\"!riskTypeChangeAllowed\"\r\n              (click)=\"changeRisk('REPORTED')\"\r\n            >\r\n              REPORT A RISK\r\n            </button>\r\n            <i\r\n              class=\"icons info\"\r\n              [appTooltip]=\"\r\n                'This options lets you report a risk and assign it to the risk owners. The risk owners will have the option to either add the risk to the Risk Register or flag it for a follow-up at a later date.'\r\n              \"\r\n              placement=\"bottom-right\"\r\n              delay=\"0\"\r\n              type=\"white\"\r\n              [tooltipMandatory]=\"true\"\r\n              >&#xe932;</i\r\n            >\r\n          </div>\r\n          <span class=\"background-glider\"></span>\r\n        </div>\r\n        <p *ngIf=\"false\" class=\"error-message\">Add a risk type</p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Risk Name -->\r\n  <div\r\n    class=\"form-group-row\"\r\n    [class.active]=\"false\"\r\n    [class.disabled]=\"\r\n      activeSelector &&\r\n      activeSelector !== 'name' &&\r\n      sideSelectorElements.includes(activeSelector)\r\n    \"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"riskForm.title\">\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          riskForm?.title?.trim()?.length === 0 || activeSelector === 'name'\r\n        \"\r\n      />\r\n\r\n      <svg\r\n        *ngIf=\"riskForm?.title?.trim()?.length > 0 && activeSelector !== 'name'\"\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          >WHAT RISK WOULD YOU LIKE TO MANAGE?\r\n          <span class=\"required\">*</span></label\r\n        >\r\n        <input\r\n          spaceTrim\r\n          type=\"text\"\r\n          (keydown)=\"activeSelector = 'name'\"\r\n          (focusin)=\"activateSelector('name', true)\"\r\n          (focusout)=\"activateSelector('name', false)\"\r\n          [(ngModel)]=\"riskForm.title\"\r\n          placeholder=\"Add a risk name\"\r\n          *ngIf=\"riskForm?.title?.trim() == '' || activeSelector === 'name'\"\r\n        />\r\n        <div\r\n          class=\"selected\"\r\n          *ngIf=\"riskForm?.title?.trim() != '' && activeSelector !== 'name'\"\r\n        >\r\n          <div class=\"chip-container\">\r\n            <span class=\"value\">{{ riskForm.title }}</span>\r\n          </div>\r\n          <button\r\n            class=\"edit\"\r\n            (click)=\"activateSelector('name', true)\"\r\n            type=\"button\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i> Edit\r\n          </button>\r\n        </div>\r\n        <p *ngIf=\"submitted && !riskForm.title\" class=\"error-message\">\r\n          Add a risk name\r\n        </p>\r\n        <vcomply-editor\r\n          [(ngModel)]=\"riskForm.description\"\r\n          [editorConfig]=\"description\"\r\n          (clickOutside)=\"checkDescription()\"\r\n        ></vcomply-editor>\r\n        <p\r\n          *ngIf=\"\r\n            submitted &&\r\n            riskForm.riskType === 'REPORTED' &&\r\n            !riskForm?.description?.trim()?.length\r\n          \"\r\n          class=\"error-message\"\r\n        >\r\n          Add a risk description\r\n        </p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Risk Owner -->\r\n  <div\r\n    class=\"form-group-row\"\r\n    [class.active]=\"activeSelector === 'owner'\"\r\n    [class.disabled]=\"\r\n      activeSelector &&\r\n      activeSelector !== 'owner' &&\r\n      sideSelectorElements.includes(activeSelector)\r\n    \"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"riskForm?.ownersList?.length > 0\">\r\n      <img\r\n        *ngIf=\"riskForm?.ownersList?.length == 0 || activeSelector === 'owner'\"\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/im-creating.svg\"\r\n        alt=\"\"\r\n      />\r\n\r\n      <svg\r\n        *ngIf=\"riskForm?.ownersList?.length > 0 && activeSelector !== 'owner'\"\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          >WHO IS RESPONSIBLE FOR MANAGING THIS RISK?\r\n          <span class=\"required\">*</span>\r\n          <i\r\n            class=\"icons\"\r\n            [appTooltip]=\"\r\n              'This is the person that is responsible for managing the risk.'\r\n            \"\r\n            placement=\"bottom\"\r\n            delay=\"0\"\r\n            type=\"white\"\r\n            [tooltipMandatory]=\"true\"\r\n            >&#xe91f;</i\r\n          >\r\n        </label>\r\n        <div class=\"select\" *ngIf=\"riskForm?.ownersList?.length == 0\">\r\n          <input\r\n            type=\"text\"\r\n            (click)=\"activateSelector('owner', true)\"\r\n            placeholder=\"Select Risk Owner(s)\"\r\n            readonly\r\n          />\r\n        </div>\r\n\r\n        <div\r\n          class=\"selected\"\r\n          *ngIf=\"\r\n            riskForm?.ownersList?.length > 0 || riskForm?.groupsList.length > 0\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              *ngIf=\"\r\n                riskForm?.ownersList\r\n                  | shortMerge : nonRemovableUsersList as ownerList\r\n              \"\r\n            >\r\n              <ng-container *ngFor=\"let owner of ownerList?.slice(0, 1)\">\r\n                <i\r\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  *ngIf=\"!nonRemovableUsersList.includes(owner?.member_id)\"\r\n                  (click)=\"remove('owner', owner)\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"owner?.member_name\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ owner?.member_name }}</span\r\n                >\r\n              </ng-container>\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)=\"popoverOwner.popover()\"\r\n              placement=\"left\"\r\n              *ngIf=\"riskForm?.ownersList?.length > 1\"\r\n            >\r\n              +{{ riskForm?.ownersList?.slice(1).length }}\r\n            </button>\r\n          </div>\r\n\r\n          <!-- <div class=\"chip-container\" *ngIf=\"!featureflag_groups\" [class.more-one]=\"riskForm?.ownersList?.length>1\" [class.plus]=\"riskForm?.ownersList?.length>2\">\r\n                      <ng-container *ngIf=\"(riskForm?.ownersList|shortMerge : nonRemovableUsersList) as ownerList\">\r\n                          <span class=\"chip\" *ngFor=\"let owner of ownerList?.slice(0,2)\"><i class=\"icons\" *ngIf=\"!nonRemovableUsersList.includes(owner?.member_id)\" (click)=\"remove('owner',owner)\">&#xe90d;</i> {{owner?.member_name}}</span>\r\n                          <button class=\"count\" *ngIf=\"riskForm?.ownersList?.length > 2\" type=\"button\" appPopover (click)=\"popoverOwner.popover()\" placement=\"right\">+{{riskForm?.ownersList?.slice(2).length}}</button>\r\n                      </ng-container>\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            >\r\n              <i\r\n                class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                *ngIf=\"\r\n                  !nonRemovableUsersList.includes(\r\n                    riskForm?.ownersList[0]?.member_id\r\n                  )\r\n                \"\r\n                (click)=\"remove('owner', riskForm?.ownersList[0])\"\r\n                >&#xe9ae;</i\r\n              >\r\n              <span\r\n                class=\"chipName vx-fs-11 vx-label-txt\"\r\n                [appTooltip]=\"riskForm?.ownersList[0]?.member_name\"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n                >{{ riskForm?.ownersList[0]?.member_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 greenBg\"\r\n                appPopover\r\n                (click)=\"popoverUser.popover()\"\r\n                placement=\"right\"\r\n                *ngIf=\"riskForm?.ownersList.length > 1\"\r\n              >\r\n                +{{ riskForm?.ownersList.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=\"riskForm?.groupsList.length > 0\"\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=\"riskForm?.groupsList.length > 0\"\r\n            >\r\n              <i\r\n                class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                (click)=\"remove('Ownergroup', riskForm?.groupsList[0])\"\r\n                >&#xe9ae;</i\r\n              >\r\n              <span\r\n                class=\"chipName vx-fs-11 vx-label-txt\"\r\n                [appTooltip]=\"riskForm?.groupsList[0]?.group_name\"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n                >{{ riskForm?.groupsList[0]?.group_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                appPopover\r\n                (click)=\"group.popover()\"\r\n                placement=\"right\"\r\n                *ngIf=\"riskForm?.groupsList?.length > 1\"\r\n              >\r\n                +{{ riskForm?.groupsList?.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\" >\r\n                        <i class=\"icons cross vx-mr-1\" *ngIf=\"!nonRemovableUsersList.includes(riskForm?.ownersList[0]?.member_id)\" (click)=\"remove('owner',riskForm?.ownersList[0])\" >&#xe90d;</i>\r\n                          <span class=\"chip\">\r\n                              <span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">{{riskForm?.ownersList[0]?.member_name}}</span></span>\r\n                          <button *ngIf=\"riskForm?.ownersList.length > 1\" class=\"count user\" appPopover (click)=\"popoverUser.popover()\" placement=\"right\">+{{riskForm?.ownersList.length - 1}}</button>\r\n                      </div>\r\n                      <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"riskForm?.groupsList.length > 0\" >&</span>\r\n                      <div class=\"chip-inner\" *ngIf=\"riskForm?.groupsList.length > 0\" >\r\n                        <i class=\"icons cross vx-mr-1\" (click)=\"remove('Ownergroup', riskForm?.groupsList[0])\" >&#xe90d;</i>\r\n                          <span class=\"chip\" [appTooltip]=\"riskForm?.groupsList[0]?.group_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">{{riskForm?.groupsList[0]?.group_name}}</span></span>\r\n                          <button *ngIf=\"riskForm?.groupsList?.length > 1\" class=\"count\" appPopover (click)=\"group.popover()\" placement=\"right\">+{{riskForm?.groupsList?.length -1}}</button>\r\n                      </div>\r\n                  </div> -->\r\n\r\n          <button\r\n            *ngIf=\"activeSelector !== 'owner'\"\r\n            class=\"edit\"\r\n            type=\"button\"\r\n            (click)=\"activateSelector('owner', true)\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i> Edit\r\n          </button>\r\n        </div>\r\n        <p\r\n          *ngIf=\"submitted && riskForm?.ownersList?.length === 0\"\r\n          class=\"error-message\"\r\n        >\r\n          Select Owner(s) for this risk.\r\n        </p>\r\n        <app-popover #popoverOwner [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ng-container\r\n              *ngIf=\"\r\n                riskForm?.ownersList\r\n                  | shortMerge : nonRemovableUsersList as ownerPop\r\n              \"\r\n            >\r\n              <ul class=\"action-item\">\r\n                <li *ngFor=\"let owner of ownerPop | slice : 1; let j = index\">\r\n                  <div class=\"avatar-card\">\r\n                    <span class=\"value\">\r\n                      <i\r\n                        *ngIf=\"\r\n                          !nonRemovableUsersList.includes(owner?.member_id)\r\n                        \"\r\n                        class=\"icons\"\r\n                        (click)=\"remove('owner', owner)\"\r\n                        >&#xe90d;</i\r\n                      >\r\n                      {{ owner.member_name }}\r\n                    </span>\r\n                  </div>\r\n                </li>\r\n              </ul>\r\n            </ng-container>\r\n          </div>\r\n        </app-popover>\r\n        <app-popover #popoverUser [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ng-container\r\n              *ngIf=\"\r\n                riskForm?.ownersList\r\n                  | shortMerge : nonRemovableUsersList as ownerPop\r\n              \"\r\n            >\r\n              <ul class=\"action-item\">\r\n                <li *ngFor=\"let owner of ownerPop | slice : 1; let j = index\">\r\n                  <div class=\"avatar-card\">\r\n                    <span class=\"value\">\r\n                      <i\r\n                        *ngIf=\"\r\n                          !nonRemovableUsersList.includes(owner?.member_id)\r\n                        \"\r\n                        class=\"icons\"\r\n                        (click)=\"remove('owner', owner)\"\r\n                        >&#xe90d;</i\r\n                      >\r\n                      {{ owner.member_name }}\r\n                    </span>\r\n                  </div>\r\n                </li>\r\n              </ul>\r\n            </ng-container>\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 *ngFor=\"let data of riskForm?.groupsList | slice : 1\">\r\n                <div class=\"avatar-card\">\r\n                  <span class=\"value\">\r\n                    <i class=\"icons\" (click)=\"remove('Ownergroup', data)\"\r\n                      >&#xe90d;</i\r\n                    >\r\n                    {{ data.group_name }}\r\n                  </span>\r\n                </div>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n        </app-popover>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Responsibility Center -->\r\n  <div\r\n    class=\"form-group-row\"\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]=\"riskForm?.responsibilityCentersList?.length > 0\"\r\n    >\r\n      <img\r\n        *ngIf=\"\r\n          riskForm?.responsibilityCentersList?.length == 0 ||\r\n          activeSelector === 'rc'\r\n        \"\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/responsibility-center.svg\"\r\n        alt=\"\"\r\n      />\r\n\r\n      <svg\r\n        *ngIf=\"\r\n          riskForm?.responsibilityCentersList?.length > 0 &&\r\n          activeSelector !== 'rc'\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\"\r\n          >Responsibility Center <span class=\"required\">*</span>\r\n          <i\r\n            class=\"icons\"\r\n            [appTooltip]=\"\r\n              'Responsibility Centers represent the corporate and operational infrastructure of an organization. One or more Responsibility Centers can be exposed to a risk and accordingly, the risk must be assessed against each Responsibility Center.'\r\n            \"\r\n            placement=\"bottom\"\r\n            delay=\"0\"\r\n            type=\"white\"\r\n            [tooltipMandatory]=\"true\"\r\n            >&#xe91f;</i\r\n          >\r\n        </label>\r\n        <div\r\n          class=\"select\"\r\n          *ngIf=\"riskForm?.responsibilityCentersList?.length == 0\"\r\n        >\r\n          <input\r\n            type=\"text\"\r\n            (click)=\"activateSelector('rc', true)\"\r\n            placeholder=\"Select Responsibility Center(s)\"\r\n            readonly\r\n          />\r\n        </div>\r\n        <div\r\n          class=\"selected\"\r\n          *ngIf=\"riskForm?.responsibilityCentersList?.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 rcName of riskForm?.responsibilityCentersList?.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('rc', rcName)\"\r\n                >&#xe9ae;</i\r\n              >\r\n              <span\r\n                class=\"chipName vx-fs-11 vx-label-txt\"\r\n                [appTooltip]=\"rcName.item_name\"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n                >{{ rcName.item_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)=\"popoverRC.popover()\"\r\n              placement=\"left\"\r\n              *ngIf=\"riskForm?.responsibilityCentersList?.length > 1\"\r\n            >\r\n              +{{ riskForm?.responsibilityCentersList?.slice(1).length }}\r\n            </button>\r\n          </div>\r\n\r\n          <!-- <div class=\"chip-container\" [class.more-one]=\"riskForm?.responsibilityCentersList?.length>1\" [class.plus]=\"riskForm?.responsibilityCentersList?.length>2\">\r\n                      <span class=\"chip\" *ngFor=\"let rcName of riskForm?.responsibilityCentersList?.slice(0,2)\"><i class=\"icons\" (click)=\"remove('rc',rcName)\">&#xe90d;</i> {{rcName.item_name}}</span>\r\n                      <button class=\"count\" *ngIf=\"riskForm?.responsibilityCentersList?.length > 2\" type=\"button\" appPopover (click)=\"popoverRC.popover()\" placement=\"right\">+{{riskForm?.responsibilityCentersList?.slice(2).length}}</button>\r\n                  </div> -->\r\n\r\n          <button\r\n            *ngIf=\"activeSelector !== 'rc'\"\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        <p\r\n          *ngIf=\"submitted && riskForm?.responsibilityCentersList?.length == 0\"\r\n          class=\"error-message\"\r\n        >\r\n          Assign this risk to a Responsibility Center(s)\r\n        </p>\r\n        <app-popover #popoverRC [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ul class=\"action-item\">\r\n              <li\r\n                *ngFor=\"\r\n                  let rcName of riskForm?.responsibilityCentersList | 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', rcName)\">&#xe90d;</i>\r\n                    {{ rcName.item_name }}\r\n                  </span>\r\n                </div>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n        </app-popover>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Risk Frequency -->\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    *ngIf=\"riskForm?.riskType !== 'REPORTED'\"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"riskForm?.category?.selectedCategory\">\r\n      <img\r\n        *ngIf=\"\r\n          !riskForm?.frequency_details?.frequency ||\r\n          riskForm?.frequency_details?.frequency === '' ||\r\n          activeSelector === 'frequency'\r\n        \"\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\"\r\n        alt=\"\"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        *ngIf=\"\r\n          (riskForm?.frequency_details?.frequency &&\r\n            riskForm?.frequency_details?.frequency !== '') ||\r\n          activeSelector !== 'frequency'\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\"\r\n          >HOW OFTEN DOES THIS RISK NEED TO BE REASSESSED?\r\n          <span class=\"required\">*</span>\r\n          <i\r\n            class=\"icons\"\r\n            [appTooltip]=\"\r\n              'The option lets you specify the risk reassessment frequency.'\r\n            \"\r\n            placement=\"bottom\"\r\n            delay=\"0\"\r\n            type=\"white\"\r\n            [tooltipMandatory]=\"true\"\r\n            >&#xe91f;</i\r\n          ></label\r\n        >\r\n        <div\r\n          class=\"select\"\r\n          *ngIf=\"!riskForm?.frequency_details?.frequency\"\r\n          (click)=\"activateSelector('frequency', true)\"\r\n        >\r\n          <input\r\n            type=\"text\"\r\n            placeholder=\"Set a Reassessment Frequency\"\r\n            readonly\r\n          />\r\n        </div>\r\n        <div\r\n          class=\"selected button-sec\"\r\n          *ngIf=\"riskForm?.frequency_details?.frequency\"\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            class=\"edit\"\r\n            type=\"button\"\r\n            (click)=\"activateSelector('frequency', true)\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i> Edit\r\n          </button>\r\n        </div>\r\n        <div class=\"vx-mt-1\">\r\n          <app-cs-switch\r\n            [ngValue]=\"riskForm?.enableAllFutureBusinessCycle\"\r\n            (ngValueChange)=\"riskForm.enableAllFutureBusinessCycle = $event\"\r\n            >DO YOU WANT THIS TO SHOW IN ALL FUTURE BUSINESS CYCLES?\r\n          </app-cs-switch>\r\n        </div>\r\n        <p\r\n          *ngIf=\"\r\n            submitted &&\r\n            (!riskForm?.frequency_details?.frequency ||\r\n              riskForm?.frequency_details?.frequency === '')\r\n          \"\r\n          class=\"error-message\"\r\n        >\r\n          Please select the frequency of occurrence for this risk.\r\n        </p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Risk Category -->\r\n  <div\r\n    class=\"form-group-row\"\r\n    [class.active]=\"activeSelector === 'category'\"\r\n    [class.disabled]=\"\r\n      activeSelector &&\r\n      activeSelector !== 'category' &&\r\n      sideSelectorElements.includes(activeSelector)\r\n    \"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"riskForm?.category?.selectedCategory\">\r\n      <img\r\n        *ngIf=\"\r\n          !riskForm?.category?.selectedCategory || activeSelector === 'category'\r\n        \"\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\"\r\n        alt=\"\"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        *ngIf=\"\r\n          riskForm?.category?.selectedCategory && activeSelector !== 'category'\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\"\r\n          >Risk Category\r\n          <i\r\n            class=\"icons\"\r\n            [appTooltip]=\"'Risk Categories are used to group similar risks.'\"\r\n            placement=\"bottom\"\r\n            delay=\"0\"\r\n            type=\"white\"\r\n            [tooltipMandatory]=\"true\"\r\n            >&#xe91f;</i\r\n          ></label\r\n        >\r\n        <div class=\"select\" *ngIf=\"!riskForm?.category?.selectedCategory\">\r\n          <input\r\n            type=\"text\"\r\n            (click)=\"activateSelector('category', true)\"\r\n            placeholder=\"Select Risk Category\"\r\n            readonly\r\n          />\r\n        </div>\r\n        <div class=\"selected\" *ngIf=\"riskForm?.category?.selectedCategory\">\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('category', riskForm.category.selectedCategory)\"\r\n              >&#xe9ae;</i\r\n            >\r\n            <span\r\n              class=\"chipName vx-fs-11 vx-label-txt\"\r\n              [appTooltip]=\"riskForm?.category?.selectedCategory?.category_name\"\r\n              placement=\"bottom-left\"\r\n              delay=\"0\"\r\n              type=\"black\"\r\n              [tooltipMandatory]=\"false\"\r\n              >{{ riskForm?.category?.selectedCategory?.category_name }}</span\r\n            >\r\n          </div>\r\n\r\n          <!-- <div class=\"chip-container\">\r\n                      <span class=\"chip\"><i class=\"icons\" (click)=\"remove('category',riskForm.category.selectedCategory)\">&#xe90d;</i>{{riskForm?.category?.selectedCategory?.category_name}}</span>\r\n                  </div> -->\r\n          <button\r\n            *ngIf=\"activeSelector !== 'category'\"\r\n            class=\"edit\"\r\n            type=\"button\"\r\n            (click)=\"activateSelector('category', true)\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i> Edit\r\n          </button>\r\n        </div>\r\n      </div>\r\n      <ng-container *ngIf=\"riskForm?.categoryCustomTags?.length > 0\">\r\n        <div\r\n          class=\"vx-form-group\"\r\n          *ngFor=\"let tag of riskForm.categoryCustomTags\"\r\n        >\r\n          <label class=\"vx-control-panel\">{{ tag.custom_tag_name }}</label>\r\n          <input\r\n            type=\"text\"\r\n            [(ngModel)]=\"tag.custom_tag_value\"\r\n            [placeholder]=\"tag.custom_tag_name\"\r\n          />\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Assessment Deadline -->\r\n  <!-- !settingsInfo?.assessment_deadline_enable && riskForm?.riskType !== 'REPORTED' && ((currentTimeStamp < editDetails?.assessment_date_timestamp) || !editDetails?.IfAssessmentDone ) -->\r\n  <div\r\n    class=\"form-group-row\"\r\n    [class.active]=\"activeSelector === 'assessment'\"\r\n    id=\"deadline\"\r\n    [class.disabled]=\"\r\n      activeSelector &&\r\n      activeSelector !== 'assessment' &&\r\n      sideSelectorElements.includes(activeSelector)\r\n    \"\r\n    *ngIf=\"false\"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"riskForm?.assessment_deadline_days >= 1\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\"\r\n        *ngIf=\"\r\n          riskForm?.assessment_deadline_days < 1 ||\r\n          activeSelector === 'assessment'\r\n        \"\r\n        alt=\"\"\r\n      />\r\n      <svg\r\n        class=\"checkIcon\"\r\n        *ngIf=\"\r\n          riskForm?.assessment_deadline_days >= 1 &&\r\n          activeSelector !== 'assessment'\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\"\r\n          >Assessment Deadline <span class=\"required\">*</span>\r\n          <i\r\n            class=\"icons\"\r\n            [appTooltip]=\"\r\n              'This is the date that the inherent risk assessment must be completed by.'\r\n            \"\r\n            placement=\"bottom\"\r\n            delay=\"0\"\r\n            type=\"white\"\r\n            [tooltipMandatory]=\"true\"\r\n            >&#xe91f;</i\r\n          ></label\r\n        >\r\n        <div class=\"input\">\r\n          <span class=\"text\">Set Number of days</span>\r\n          <div class=\"input-group counter\">\r\n            <button (click)=\"changeRiskAssessment('subtract')\">\r\n              <i class=\"icons\">&#xea53;</i>\r\n            </button>\r\n            <input\r\n              type=\"number\"\r\n              [(ngModel)]=\"riskForm.assessment_deadline_days\"\r\n              (focusin)=\"activateSelector('assessment', true)\"\r\n              (focusout)=\"activateSelector('assessment', false)\"\r\n              name=\"riskAssessmentDeadline\"\r\n              validateAssessment\r\n              #deadline=\"ngModel\"\r\n              (ngModelChange)=\"changeRiskAssessmentDeadline($event)\"\r\n              onkeydown=\"return event.keyCode !== 190\"\r\n              min=\"0\"\r\n              oninput=\"this.value = Math.abs(this.value)\"\r\n            />\r\n            <button (click)=\"changeRiskAssessment('add')\">\r\n              <i class=\"icons\">&#xe915;</i>\r\n            </button>\r\n          </div>\r\n        </div>\r\n        <p\r\n          *ngIf=\"submitted && riskForm?.assessment_deadline_days < 1\"\r\n          class=\"error-message\"\r\n        >\r\n          Enter a value greater than 0.\r\n        </p>\r\n        <label\r\n          class=\"vx-control-panel\"\r\n          *ngIf=\"riskForm?.assessment_deadline_days >= 1\"\r\n        >\r\n          This risk assessment needs to be completed by\r\n          {{ date | date : \"dd MMM yyyy\" }}\r\n        </label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Risk Overseer -->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    [class.active]=\"activeSelector === 'overseer'\"\r\n    [class.disabled]=\"\r\n      activeSelector &&\r\n      activeSelector !== 'overseer' &&\r\n      sideSelectorElements.includes(activeSelector)\r\n    \"\r\n    *ngIf=\"riskForm.addOverseer\"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"riskForm?.overseersList?.length > 0\">\r\n      <img\r\n        *ngIf=\"\r\n          riskForm?.overseersList?.length == 0 || activeSelector === 'overseer'\r\n        \"\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/oversight.svg\"\r\n        alt=\"\"\r\n      />\r\n      <svg\r\n        class=\"checkIcon\"\r\n        *ngIf=\"\r\n          riskForm?.overseersList?.length > 0 && activeSelector !== 'overseer'\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\"\r\n          >Risk Oversight<i\r\n            class=\"icons\"\r\n            [appTooltip]=\"\r\n              'This is the person that is responsible for overseeing the risk but who is not responsible for managing the risk.'\r\n            \"\r\n            placement=\"bottom\"\r\n            delay=\"0\"\r\n            type=\"white\"\r\n            [tooltipMandatory]=\"true\"\r\n            >&#xe91f;</i\r\n          ></label\r\n        >\r\n        <div\r\n          class=\"select\"\r\n          *ngIf=\"\r\n            riskForm?.overseersList?.length == 0 &&\r\n            riskForm?.overseersGroupList?.length == 0\r\n          \"\r\n        >\r\n          <input\r\n            type=\"text\"\r\n            (click)=\"activateSelector('overseer', true)\"\r\n            placeholder=\"Select Risk Oversight(s)\"\r\n            readonly\r\n          />\r\n        </div>\r\n        <div\r\n          class=\"selected\"\r\n          *ngIf=\"\r\n            riskForm?.overseersList?.length > 0 ||\r\n            riskForm?.overseersGroupList.length > 0\r\n          \"\r\n        >\r\n          <ng-container *ngIf=\"!featureflag_groups\">\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 owner of riskForm?.overseersList?.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('overseer', owner)\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"owner.member_name\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ owner.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)=\"popoverOverseer.popover()\"\r\n                placement=\"right\"\r\n                *ngIf=\"riskForm?.overseersList?.length > 1\"\r\n              >\r\n                +{{ riskForm?.overseersList?.slice(1).length }}\r\n              </button>\r\n            </div>\r\n          </ng-container>\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            >\r\n              <i\r\n                class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                (click)=\"remove('overseer', riskForm?.overseersList[0])\"\r\n                >&#xe9ae;</i\r\n              >\r\n              <span\r\n                class=\"chipName vx-fs-11 vx-label-txt\"\r\n                [appTooltip]=\"riskForm?.overseersList[0]?.member_name\"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n                *ngIf=\"riskForm?.overseersList.length > 0\"\r\n                >{{ riskForm?.overseersList[0]?.member_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 greenBg\"\r\n                appPopover\r\n                (click)=\"overseer.popover()\"\r\n                placement=\"right\"\r\n                *ngIf=\"riskForm?.overseersList.length > 1\"\r\n              >\r\n                +{{ riskForm?.overseersList.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                riskForm?.overseersList.length > 0 &&\r\n                riskForm?.overseersGroupList.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=\"riskForm?.overseersGroupList.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('overseergroup', riskForm?.overseersGroupList[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]=\"riskForm?.overseersGroupList[0]?.group_name\"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n                >{{ riskForm?.overseersGroupList[0]?.group_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                appPopover\r\n                (click)=\"overseerGroup.popover()\"\r\n                placement=\"right\"\r\n                *ngIf=\"riskForm?.overseersGroupList?.length > 1\"\r\n              >\r\n                +{{ riskForm?.overseersGroupList?.length - 1 }}\r\n              </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        <app-popover #popoverOverseer [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ul class=\"action-item\">\r\n              <li\r\n                *ngFor=\"\r\n                  let owner of riskForm?.overseersList | 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', owner)\"\r\n                      >&#xe90d;</i\r\n                    >\r\n                    {{ owner.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 #overseer [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ul class=\"action-item\">\r\n              <li\r\n                *ngFor=\"\r\n                  let owner of riskForm?.overseersList | 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', owner)\"\r\n                      >&#xe90d;</i\r\n                    >\r\n                    {{ owner.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 *ngFor=\"let data of riskForm?.overseersGroupList | slice : 1\">\r\n                <div class=\"avatar-card\">\r\n                  <span class=\"value\">\r\n                    <i class=\"icons\" (click)=\"remove('overseergroup', data)\"\r\n                      >&#xe90d;</i\r\n                    >\r\n                    {{ data.group_name }}\r\n                  </span>\r\n                </div>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n        </app-popover>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Risk Mitigation Priority -->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    [class.active]=\"false\"\r\n    [class.disabled]=\"\r\n      activeSelector && sideSelectorElements.includes(activeSelector)\r\n    \"\r\n    *ngIf=\"riskForm.addMitigation\"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"riskForm.mitigation\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/priority.svg\"\r\n        *ngIf=\"!riskForm.mitigation\"\r\n        alt=\"\"\r\n      />\r\n      <!-- <svg viewBox=\"25 25 50 50\" class=\"edit-loader\">\r\n              <circle cx=\"50\" cy=\"50\" r=\"20\" fill=\"none\" stroke=\"#1e5dd3\" stroke-width=\"3\" class=\"loader-path\"></circle>\r\n          </svg> -->\r\n      <svg\r\n        class=\"checkIcon\"\r\n        *ngIf=\"riskForm.mitigation\"\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 Mitigation Priority\r\n          <i\r\n            class=\"icons\"\r\n            [appTooltip]=\"\r\n              'This sets the priority level for the mitigation of each risk.'\r\n            \"\r\n            placement=\"bottom\"\r\n            delay=\"0\"\r\n            type=\"white\"\r\n            [tooltipMandatory]=\"true\"\r\n            >&#xe91f;</i\r\n          ></label\r\n        >\r\n\r\n        <cs-select\r\n          [(ngModel)]=\"riskForm.mitigation\"\r\n          [placeholder]=\"'Select a mitigation priority'\"\r\n          name=\"riskForm.mitigation\"\r\n        >\r\n          <cs-option\r\n            *ngFor=\"let data of mitigationDetails\"\r\n            [value]=\"data?.mitigation_id\"\r\n            [color]=\"data?.mitigation_color\"\r\n          >\r\n            {{ data.mitigation_name }}\r\n          </cs-option>\r\n        </cs-select>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Recommended Mitigation Plan -->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    *ngIf=\"riskForm?.addMitigationPlan\"\r\n  >\r\n    <div\r\n      id=\"riskSpace\"\r\n      class=\"left\"\r\n      [class.checked]=\"(riskForm.mitigationDescriptionPlan | spaceTrim) !== ''\"\r\n    >\r\n      <img\r\n        *ngIf=\"(riskForm.mitigationDescriptionPlan | spaceTrim) === ''\"\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/objectives.svg\"\r\n        alt=\"\"\r\n      />\r\n      <svg\r\n        *ngIf=\"(riskForm.mitigationDescriptionPlan | spaceTrim) !== ''\"\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 for=\"\" class=\"vx-control-panel\"\r\n          >Recommended Mitigation Plans<link\r\n            rel=\"manifest\"\r\n            href=\"./manifest.json\"\r\n          />\r\n          <i\r\n            class=\"icons\"\r\n            [appTooltip]=\"\r\n              'Specify the mitigation plan that can be undertaken to mitigate the risk.'\r\n            \"\r\n            placement=\"bottom\"\r\n            delay=\"0\"\r\n            type=\"white\"\r\n            [tooltipMandatory]=\"true\"\r\n            >&#xe91f;</i\r\n          >\r\n        </label>\r\n        <vcomply-editor\r\n          [(ngModel)]=\"riskForm.mitigationDescriptionPlan\"\r\n          [editorConfig]=\"mitigationDescriptionPlan\"\r\n          (clickOutside)=\"checkMitigationPlan()\"\r\n        >\r\n        </vcomply-editor>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Risk Label -->\r\n  <div\r\n    class=\"form-group-row\"\r\n    [class.active]=\"false\"\r\n    [class.disabled]=\"\r\n      activeSelector && sideSelectorElements.includes(activeSelector)\r\n    \"\r\n    *ngIf=\"riskForm?.addRiskLabel\"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"false\">\r\n      <!-- <img *ngIf=\"true\"\r\n              src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/oversight.svg\" alt=\"\" /> -->\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        *ngIf=\"true\"\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 LABEL\r\n          <i\r\n            class=\"icons\"\r\n            [appTooltip]=\"\r\n              'This option lets you specify if this is a newly identified risk or it is a rapidly changing risk.'\r\n            \"\r\n            placement=\"bottom\"\r\n            delay=\"0\"\r\n            type=\"white\"\r\n            [tooltipMandatory]=\"true\"\r\n            >&#xe91f;</i\r\n          ></label\r\n        >\r\n        <cs-select\r\n          [(ngModel)]=\"riskForm.riskLabelValue\"\r\n          [placeholder]=\"'Select a risk label'\"\r\n          name=\"riskForm?.riskLabelValue\"\r\n        >\r\n          <cs-option *ngFor=\"let data of riskLabelList\" [value]=\"data?.value\">\r\n            {{ data?.name }}\r\n          </cs-option>\r\n        </cs-select>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- Link with  GRC -->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    [class.active]=\"activeSelector === 'GRC'\"\r\n    [class.disabled]=\"\r\n      activeSelector &&\r\n      activeSelector !== 'GRC' &&\r\n      sideSelectorElements.includes(activeSelector)\r\n    \"\r\n    *ngIf=\"riskForm?.GRC\"\r\n  >\r\n    <div\r\n      class=\"left\"\r\n      [class.checked]=\"this.riskForm?.selectedGRCObjects?.length > 0\"\r\n    >\r\n      <img\r\n        *ngIf=\"\r\n          this.riskForm?.selectedGRCObjects?.length == 0 ||\r\n          activeSelector === 'GRC'\r\n        \"\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/link-items.svg\"\r\n        alt=\"\"\r\n      />\r\n\r\n      <svg\r\n        *ngIf=\"\r\n          this.riskForm?.selectedGRCObjects?.length > 0 &&\r\n          activeSelector !== 'GRC'\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 class=\"select\" *ngIf=\"riskForm?.selectedGRCObjects?.length === 0\">\r\n          <input\r\n            type=\"text\"\r\n            (click)=\"activateSelector('GRC', true)\"\r\n            placeholder=\"Select GRC object(s) to link with this risk.\"\r\n            readonly\r\n          />\r\n        </div>\r\n        <ng-container *ngIf=\"riskForm?.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', 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', 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 class=\"icons\" (click)=\"remove('GRC', 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<app-responsibility-centers-list\r\n  *ngIf=\"activeSelector === 'rc'\"\r\n  [responsibilityCentersList]=\"responsibilityCentersList\"\r\n  [selectedResponsibilityCenters]=\"riskForm.responsibilityCentersList\"\r\n  [rcIdKey]=\"'rc_id'\"\r\n  (saveSelectedList)=\"saveSelectedRCList($event)\"\r\n  (closeRcList)=\"activateSelector('rc', false)\"\r\n  [singularText]=\"'Responsibility Center selected'\"\r\n  [pluralText]=\"'Responsibility Centers selected'\"\r\n>\r\n</app-responsibility-centers-list>\r\n\r\n<app-owner-list\r\n  *ngIf=\"!featureflag_groups && activeSelector === 'owner'\"\r\n  [usersList]=\"ownersList\"\r\n  [selectedUsers]=\"riskForm.ownersList\"\r\n  [userIdKey]=\"'member_id'\"\r\n  [itemEmailKey]=\"'member_email'\"\r\n  [itemNameKey]=\"'member_name'\"\r\n  (saveSelectedList)=\"saveSelectedOwnersList($event)\"\r\n  [nonRemovableUsersList]=\"nonRemovableUsersList\"\r\n  (closeUsersList)=\"activateSelector('owner', false)\"\r\n  [singularText]=\"'User selected'\"\r\n  [pluralText]=\"'Users selected'\"\r\n></app-owner-list>\r\n\r\n<user-group-list\r\n  *ngIf=\"featureflag_groups && activeSelector === 'owner'\"\r\n  [userlist]=\"ownersList\"\r\n  [selectedUsers]=\"riskForm.ownersList\"\r\n  [groupList]=\"groupsList\"\r\n  [nonRemovableUserIds]=\"nonRemovableUsersList\"\r\n  (save)=\"saveSelectedOwnersList($event)\"\r\n  [selectedGroups]=\"riskForm.groupsList\"\r\n  (cancel)=\"activateSelector('owner', false)\"\r\n  [groupEnabled]=\"true\"\r\n  [featureflag]=\"featureflag_groups\"\r\n>\r\n</user-group-list>\r\n\r\n<user-group-list\r\n  *ngIf=\"featureflag_groups && activeSelector === 'overseer'\"\r\n  [userlist]=\"overseersList\"\r\n  [selectedUsers]=\"riskForm.overseersList\"\r\n  [groupList]=\"overseersGroupList\"\r\n  (save)=\"saveSelectedOverseersList($event)\"\r\n  [selectedGroups]=\"riskForm.overseersGroupList\"\r\n  (cancel)=\"activateSelector('overseer', false)\"\r\n  [groupEnabled]=\"true\"\r\n  [featureflag]=\"featureflag_groups\"\r\n>\r\n</user-group-list>\r\n\r\n<app-category-list\r\n  *ngIf=\"activeSelector === 'category'\"\r\n  [categoryList]=\"categoryList\"\r\n  [selectedCategory]=\"riskForm.category\"\r\n  (saveSelectedCategory)=\"saveSelectedCategory($event)\"\r\n  (closeCategoriesList)=\"activateSelector('category', false)\"\r\n></app-category-list>\r\n<app-owner-list\r\n  *ngIf=\"!featureflag_groups && activeSelector === 'overseer'\"\r\n  [usersList]=\"overseersList\"\r\n  [selectedUsers]=\"riskForm.overseersList\"\r\n  [userIdKey]=\"'member_id'\"\r\n  [itemNameKey]=\"'member_name'\"\r\n  [itemEmailKey]=\"'member_email'\"\r\n  (saveSelectedList)=\"saveSelectedOverseersList($event)\"\r\n  (closeUsersList)=\"activateSelector('overseer', false)\"\r\n  [singularText]=\"'User selected'\"\r\n  [pluralText]=\"'Users selected'\"\r\n>\r\n</app-owner-list>\r\n<app-loader-inline *ngIf=\"loader\"></app-loader-inline>\r\n\r\n<app-frequency-dialog-container\r\n  *ngIf=\"activeSelector === 'frequency'\"\r\n  [frequencyDetails]=\"frequencyDetails\"\r\n  (selectedFrequency)=\"frequencyData($event)\"\r\n  (closeFrequency)=\"activateSelector('frequency', false)\"\r\n>\r\n</app-frequency-dialog-container>\r\n\r\n<app-grc-object-list\r\n  *ngIf=\"activeSelector === 'GRC'\"\r\n  [grcObject]=\"grcList\"\r\n  [selectedGRC]=\"riskForm.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($event)\"\r\n  (closeOtherGRC)=\"activateSelector('GRC', false)\"\r\n></app-grc-object-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>\r\n</app-smiley-dialog-inline>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::ng-deep .workflw-risk{display:block;position:relative}\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:#ffffff;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:#ffffff}::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:#ffffff;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{-webkit-appearance:none;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:#ffffff;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:#ffffff;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:#ffffff;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:#ffffff}::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:#ffffff;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:#ffffff;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:#ffffff;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:#ffffff;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:#000000;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:rgba(0,0,0,.3)}@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:#ffffff}::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%,#747576 1%,#747576 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);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:#ffffff}::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%,#f31c39 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);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%,#34aa44 1%,#34aa44 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);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%,#1e5dd3 1%,#1e5dd3 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);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%,#f6882f 1%,#f6882f 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);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%,#7aa6f7 1%,#7aa6f7 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);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}\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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "component", type: i9.MarxEditorComponent, selector: "vcomply-editor", inputs: ["editorConfig"], outputs: ["comment", "sendSavedFiles", "popup"] }, { 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: CsSwitchComponent$1, 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: CsSelectComponent, selector: "cs-select", inputs: ["dropdownLabel", "dropdownSubLabel", "isRequired", "placeholder", "setMaxWidth"], outputs: ["valueChanged"] }, { kind: "component", type: CsOptionComponent, selector: "cs-option", inputs: ["value", "color", "backgroundColor", "optionTooltip"] }, { 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"], outputs: ["saveSelectedList", "closeRcList"] }, { 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: CategoryListComponent, selector: "app-category-list", inputs: ["categoryList", "selectedCategory"], outputs: ["saveSelectedCategory", "closeList", "closeCategoriesList"] }, { kind: "directive", type: ScrollInViewDirective, selector: "[appScrollInView]", inputs: ["appScrollInView"] }, { kind: "directive", type: spaceTrimDirective, selector: "[spaceTrim]" }, { kind: "component", type: FrequencyDialogContainerComponent, selector: "app-frequency-dialog-container", inputs: ["mode", "frequencyDetails"], outputs: ["selectedFrequency", "closeFrequency"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1$1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: RefDisconnectPipe, name: "refDisconnect" }, { kind: "pipe", type: ShortMergePipe, name: "shortMerge" }, { kind: "pipe", type: SpaceTrimPipe, name: "spaceTrim" }] });
+WorkflowRiskComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: WorkflowRiskComponent, selector: "app-workflow-risk", inputs: { feature: "feature", mode: "mode", riskId: "riskId", defaultRiskType: "defaultRiskType", moveToRegisterMode: "moveToRegisterMode", secondaryOpenPortal: "secondaryOpenPortal", openedFrom: "openedFrom" }, outputs: { showConfirmationAlert: "showConfirmationAlert", pickerChanged: "pickerChanged", populateOption: "populateOption", closeWorkflow: "closeWorkflow", disconnectRefresh: "disconnectRefresh", refreshForm: "refreshForm", hideElementsFromMoreOptions: "hideElementsFromMoreOptions", rcSelected: "rcSelected" }, ngImport: i0, template: "<div class=\"workflw-risk\" *ngIf=\"!showSmiley\">\r\n  <!-- Risk Type -->\r\n  <div class=\"form-group-row\" [class.active]=\"false\" [class.disabled]=\"false\">\r\n    <div class=\"left checked\">\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 Type <span class=\"required\">*</span></label\r\n        >\r\n        <div class=\"risk-type-field\">\r\n          <div\r\n            class=\"type-item\"\r\n            [class.active]=\"riskForm?.riskType === 'NORMAL'\"\r\n          >\r\n            <button\r\n              [class.disabled]=\"!riskTypeChangeAllowed\"\r\n              (click)=\"changeRisk('NORMAL')\"\r\n            >\r\n              ADD TO RISK REGISTER\r\n            </button>\r\n            <i\r\n              class=\"icons info\"\r\n              [appTooltip]=\"\r\n                'This option lets you add a risk directly to the Risk Register. The risk owners will receive an alert and they can begin the the risk assessment process.'\r\n              \"\r\n              placement=\"bottom-right\"\r\n              delay=\"0\"\r\n              type=\"white\"\r\n              [tooltipMandatory]=\"true\"\r\n              >&#xe932;</i\r\n            >\r\n          </div>\r\n          <div\r\n            class=\"type-item\"\r\n            [class.active]=\"riskForm?.riskType === 'REPORTED'\"\r\n          >\r\n            <button\r\n              [class.disabled]=\"!riskTypeChangeAllowed\"\r\n              (click)=\"changeRisk('REPORTED')\"\r\n            >\r\n              REPORT A RISK\r\n            </button>\r\n            <i\r\n              class=\"icons info\"\r\n              [appTooltip]=\"\r\n                'This options lets you report a risk and assign it to the risk owners. The risk owners will have the option to either add the risk to the Risk Register or flag it for a follow-up at a later date.'\r\n              \"\r\n              placement=\"bottom-right\"\r\n              delay=\"0\"\r\n              type=\"white\"\r\n              [tooltipMandatory]=\"true\"\r\n              >&#xe932;</i\r\n            >\r\n          </div>\r\n          <span class=\"background-glider\"></span>\r\n        </div>\r\n        <p *ngIf=\"false\" class=\"error-message\">Add a risk type</p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Risk Name -->\r\n  <div\r\n    class=\"form-group-row\"\r\n    [class.active]=\"false\"\r\n    [class.disabled]=\"\r\n      activeSelector &&\r\n      activeSelector !== 'name' &&\r\n      sideSelectorElements.includes(activeSelector)\r\n    \"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"riskForm.title\">\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          riskForm?.title?.trim()?.length === 0 || activeSelector === 'name'\r\n        \"\r\n      />\r\n\r\n      <svg\r\n        *ngIf=\"riskForm?.title?.trim()?.length > 0 && activeSelector !== 'name'\"\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          >WHAT RISK WOULD YOU LIKE TO MANAGE?\r\n          <span class=\"required\">*</span></label\r\n        >\r\n        <input\r\n          spaceTrim\r\n          type=\"text\"\r\n          (keydown)=\"activeSelector = 'name'\"\r\n          (focusin)=\"activateSelector('name', true)\"\r\n          (focusout)=\"activateSelector('name', false)\"\r\n          [(ngModel)]=\"riskForm.title\"\r\n          placeholder=\"Add a risk name\"\r\n          *ngIf=\"riskForm?.title?.trim() == '' || activeSelector === 'name'\"\r\n        />\r\n        <div\r\n          class=\"selected\"\r\n          *ngIf=\"riskForm?.title?.trim() != '' && activeSelector !== 'name'\"\r\n        >\r\n          <div class=\"chip-container\">\r\n            <span class=\"value\">{{ riskForm.title }}</span>\r\n          </div>\r\n          <button\r\n            class=\"edit\"\r\n            (click)=\"activateSelector('name', true)\"\r\n            type=\"button\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i> Edit\r\n          </button>\r\n        </div>\r\n        <p *ngIf=\"submitted && !riskForm.title\" class=\"error-message\">\r\n          Add a risk name\r\n        </p>\r\n        <vcomply-editor\r\n          [(ngModel)]=\"riskForm.description\"\r\n          [editorConfig]=\"description\"\r\n          (clickOutside)=\"checkDescription()\"\r\n        ></vcomply-editor>\r\n        <p\r\n          *ngIf=\"\r\n            submitted &&\r\n            riskForm.riskType === 'REPORTED' &&\r\n            !riskForm?.description?.trim()?.length\r\n          \"\r\n          class=\"error-message\"\r\n        >\r\n          Add a risk description\r\n        </p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Risk Manager -->\r\n  <div\r\n    class=\"form-group-row\"\r\n    [class.active]=\"activeSelector === 'owner'\"\r\n    [class.disabled]=\"\r\n      activeSelector &&\r\n      activeSelector !== 'owner' &&\r\n      sideSelectorElements.includes(activeSelector)\r\n    \"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"riskForm?.ownersList?.length > 0\">\r\n      <img\r\n        *ngIf=\"riskForm?.ownersList?.length == 0 || activeSelector === 'owner'\"\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/im-creating.svg\"\r\n        alt=\"\"\r\n      />\r\n\r\n      <svg\r\n        *ngIf=\"riskForm?.ownersList?.length > 0 && activeSelector !== 'owner'\"\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          >WHO IS RESPONSIBLE FOR MANAGING THIS RISK?\r\n          <span class=\"required\">*</span>\r\n          <i\r\n            class=\"icons\"\r\n            [appTooltip]=\"\r\n              'This is the person that is responsible for managing the risk.'\r\n            \"\r\n            placement=\"bottom\"\r\n            delay=\"0\"\r\n            type=\"white\"\r\n            [tooltipMandatory]=\"true\"\r\n            >&#xe91f;</i\r\n          >\r\n        </label>\r\n        <div class=\"select\" *ngIf=\"riskForm?.ownersList?.length == 0\">\r\n          <input\r\n            type=\"text\"\r\n            (click)=\"activateSelector('owner', true)\"\r\n            placeholder=\"Select Risk Manager(s)\"\r\n            readonly\r\n          />\r\n        </div>\r\n\r\n        <div\r\n          class=\"selected\"\r\n          *ngIf=\"\r\n            riskForm?.ownersList?.length > 0 || riskForm?.groupsList.length > 0\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              *ngIf=\"\r\n                riskForm?.ownersList\r\n                  | shortMerge : nonRemovableUsersList as ownerList\r\n              \"\r\n            >\r\n              <ng-container *ngFor=\"let owner of ownerList?.slice(0, 1)\">\r\n                <i\r\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  *ngIf=\"!nonRemovableUsersList.includes(owner?.member_id)\"\r\n                  (click)=\"remove('owner', owner)\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"owner?.member_name\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ owner?.member_name }}</span\r\n                >\r\n              </ng-container>\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)=\"popoverOwner.popover()\"\r\n              placement=\"left\"\r\n              *ngIf=\"riskForm?.ownersList?.length > 1\"\r\n            >\r\n              +{{ riskForm?.ownersList?.slice(1).length }}\r\n            </button>\r\n          </div>\r\n\r\n          <!-- <div class=\"chip-container\" *ngIf=\"!featureflag_groups\" [class.more-one]=\"riskForm?.ownersList?.length>1\" [class.plus]=\"riskForm?.ownersList?.length>2\">\r\n                      <ng-container *ngIf=\"(riskForm?.ownersList|shortMerge : nonRemovableUsersList) as ownerList\">\r\n                          <span class=\"chip\" *ngFor=\"let owner of ownerList?.slice(0,2)\"><i class=\"icons\" *ngIf=\"!nonRemovableUsersList.includes(owner?.member_id)\" (click)=\"remove('owner',owner)\">&#xe90d;</i> {{owner?.member_name}}</span>\r\n                          <button class=\"count\" *ngIf=\"riskForm?.ownersList?.length > 2\" type=\"button\" appPopover (click)=\"popoverOwner.popover()\" placement=\"right\">+{{riskForm?.ownersList?.slice(2).length}}</button>\r\n                      </ng-container>\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            >\r\n              <i\r\n                class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                *ngIf=\"\r\n                  !nonRemovableUsersList.includes(\r\n                    riskForm?.ownersList[0]?.member_id\r\n                  )\r\n                \"\r\n                (click)=\"remove('owner', riskForm?.ownersList[0])\"\r\n                >&#xe9ae;</i\r\n              >\r\n              <span\r\n                class=\"chipName vx-fs-11 vx-label-txt\"\r\n                [appTooltip]=\"riskForm?.ownersList[0]?.member_name\"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n                >{{ riskForm?.ownersList[0]?.member_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 greenBg\"\r\n                appPopover\r\n                (click)=\"popoverUser.popover()\"\r\n                placement=\"right\"\r\n                *ngIf=\"riskForm?.ownersList.length > 1\"\r\n              >\r\n                +{{ riskForm?.ownersList.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=\"riskForm?.groupsList.length > 0\"\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=\"riskForm?.groupsList.length > 0\"\r\n            >\r\n              <i\r\n                class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                (click)=\"remove('Ownergroup', riskForm?.groupsList[0])\"\r\n                >&#xe9ae;</i\r\n              >\r\n              <span\r\n                class=\"chipName vx-fs-11 vx-label-txt\"\r\n                [appTooltip]=\"riskForm?.groupsList[0]?.group_name\"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n                >{{ riskForm?.groupsList[0]?.group_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                appPopover\r\n                (click)=\"group.popover()\"\r\n                placement=\"right\"\r\n                *ngIf=\"riskForm?.groupsList?.length > 1\"\r\n              >\r\n                +{{ riskForm?.groupsList?.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\" >\r\n                        <i class=\"icons cross vx-mr-1\" *ngIf=\"!nonRemovableUsersList.includes(riskForm?.ownersList[0]?.member_id)\" (click)=\"remove('owner',riskForm?.ownersList[0])\" >&#xe90d;</i>\r\n                          <span class=\"chip\">\r\n                              <span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">{{riskForm?.ownersList[0]?.member_name}}</span></span>\r\n                          <button *ngIf=\"riskForm?.ownersList.length > 1\" class=\"count user\" appPopover (click)=\"popoverUser.popover()\" placement=\"right\">+{{riskForm?.ownersList.length - 1}}</button>\r\n                      </div>\r\n                      <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"riskForm?.groupsList.length > 0\" >&</span>\r\n                      <div class=\"chip-inner\" *ngIf=\"riskForm?.groupsList.length > 0\" >\r\n                        <i class=\"icons cross vx-mr-1\" (click)=\"remove('Ownergroup', riskForm?.groupsList[0])\" >&#xe90d;</i>\r\n                          <span class=\"chip\" [appTooltip]=\"riskForm?.groupsList[0]?.group_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">{{riskForm?.groupsList[0]?.group_name}}</span></span>\r\n                          <button *ngIf=\"riskForm?.groupsList?.length > 1\" class=\"count\" appPopover (click)=\"group.popover()\" placement=\"right\">+{{riskForm?.groupsList?.length -1}}</button>\r\n                      </div>\r\n                  </div> -->\r\n\r\n          <button\r\n            *ngIf=\"activeSelector !== 'owner'\"\r\n            class=\"edit\"\r\n            type=\"button\"\r\n            (click)=\"activateSelector('owner', true)\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i> Edit\r\n          </button>\r\n        </div>\r\n        <p\r\n          *ngIf=\"submitted && riskForm?.ownersList?.length === 0\"\r\n          class=\"error-message\"\r\n        >\r\n          Select Owner(s) for this risk.\r\n        </p>\r\n        <app-popover #popoverOwner [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ng-container\r\n              *ngIf=\"\r\n                riskForm?.ownersList\r\n                  | shortMerge : nonRemovableUsersList as ownerPop\r\n              \"\r\n            >\r\n              <ul class=\"action-item\">\r\n                <li *ngFor=\"let owner of ownerPop | slice : 1; let j = index\">\r\n                  <div class=\"avatar-card\">\r\n                    <span class=\"value\">\r\n                      <i\r\n                        *ngIf=\"\r\n                          !nonRemovableUsersList.includes(owner?.member_id)\r\n                        \"\r\n                        class=\"icons\"\r\n                        (click)=\"remove('owner', owner)\"\r\n                        >&#xe90d;</i\r\n                      >\r\n                      {{ owner.member_name }}\r\n                    </span>\r\n                  </div>\r\n                </li>\r\n              </ul>\r\n            </ng-container>\r\n          </div>\r\n        </app-popover>\r\n        <app-popover #popoverUser [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ng-container\r\n              *ngIf=\"\r\n                riskForm?.ownersList\r\n                  | shortMerge : nonRemovableUsersList as ownerPop\r\n              \"\r\n            >\r\n              <ul class=\"action-item\">\r\n                <li *ngFor=\"let owner of ownerPop | slice : 1; let j = index\">\r\n                  <div class=\"avatar-card\">\r\n                    <span class=\"value\">\r\n                      <i\r\n                        *ngIf=\"\r\n                          !nonRemovableUsersList.includes(owner?.member_id)\r\n                        \"\r\n                        class=\"icons\"\r\n                        (click)=\"remove('owner', owner)\"\r\n                        >&#xe90d;</i\r\n                      >\r\n                      {{ owner.member_name }}\r\n                    </span>\r\n                  </div>\r\n                </li>\r\n              </ul>\r\n            </ng-container>\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 *ngFor=\"let data of riskForm?.groupsList | slice : 1\">\r\n                <div class=\"avatar-card\">\r\n                  <span class=\"value\">\r\n                    <i class=\"icons\" (click)=\"remove('Ownergroup', data)\"\r\n                      >&#xe90d;</i\r\n                    >\r\n                    {{ data.group_name }}\r\n                  </span>\r\n                </div>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n        </app-popover>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Responsibility Center -->\r\n  <div\r\n    class=\"form-group-row\"\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]=\"riskForm?.responsibilityCentersList?.length > 0\"\r\n    >\r\n      <img\r\n        *ngIf=\"\r\n          riskForm?.responsibilityCentersList?.length == 0 ||\r\n          activeSelector === 'rc'\r\n        \"\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/responsibility-center.svg\"\r\n        alt=\"\"\r\n      />\r\n\r\n      <svg\r\n        *ngIf=\"\r\n          riskForm?.responsibilityCentersList?.length > 0 &&\r\n          activeSelector !== 'rc'\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\"\r\n          >Responsibility Center <span class=\"required\">*</span>\r\n          <i\r\n            class=\"icons\"\r\n            [appTooltip]=\"\r\n              'Responsibility Centers represent the corporate and operational infrastructure of an organization. One or more Responsibility Centers can be exposed to a risk and accordingly, the risk must be assessed against each Responsibility Center.'\r\n            \"\r\n            placement=\"bottom\"\r\n            delay=\"0\"\r\n            type=\"white\"\r\n            [tooltipMandatory]=\"true\"\r\n            >&#xe91f;</i\r\n          >\r\n        </label>\r\n        <div\r\n          class=\"select\"\r\n          *ngIf=\"riskForm?.responsibilityCentersList?.length == 0\"\r\n        >\r\n          <input\r\n            type=\"text\"\r\n            (click)=\"activateSelector('rc', true)\"\r\n            placeholder=\"Select Responsibility Center(s)\"\r\n            readonly\r\n          />\r\n        </div>\r\n        <div\r\n          class=\"selected\"\r\n          *ngIf=\"riskForm?.responsibilityCentersList?.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 rcName of riskForm?.responsibilityCentersList?.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('rc', rcName)\"\r\n                >&#xe9ae;</i\r\n              >\r\n              <span\r\n                class=\"chipName vx-fs-11 vx-label-txt\"\r\n                [appTooltip]=\"rcName.item_name\"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n                >{{ rcName.item_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)=\"popoverRC.popover()\"\r\n              placement=\"left\"\r\n              *ngIf=\"riskForm?.responsibilityCentersList?.length > 1\"\r\n            >\r\n              +{{ riskForm?.responsibilityCentersList?.slice(1).length }}\r\n            </button>\r\n          </div>\r\n\r\n          <!-- <div class=\"chip-container\" [class.more-one]=\"riskForm?.responsibilityCentersList?.length>1\" [class.plus]=\"riskForm?.responsibilityCentersList?.length>2\">\r\n                      <span class=\"chip\" *ngFor=\"let rcName of riskForm?.responsibilityCentersList?.slice(0,2)\"><i class=\"icons\" (click)=\"remove('rc',rcName)\">&#xe90d;</i> {{rcName.item_name}}</span>\r\n                      <button class=\"count\" *ngIf=\"riskForm?.responsibilityCentersList?.length > 2\" type=\"button\" appPopover (click)=\"popoverRC.popover()\" placement=\"right\">+{{riskForm?.responsibilityCentersList?.slice(2).length}}</button>\r\n                  </div> -->\r\n\r\n          <button\r\n            *ngIf=\"activeSelector !== 'rc'\"\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        <p\r\n          *ngIf=\"submitted && riskForm?.responsibilityCentersList?.length == 0\"\r\n          class=\"error-message\"\r\n        >\r\n          Assign this risk to a Responsibility Center(s)\r\n        </p>\r\n        <app-popover #popoverRC [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ul class=\"action-item\">\r\n              <li\r\n                *ngFor=\"\r\n                  let rcName of riskForm?.responsibilityCentersList | 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', rcName)\">&#xe90d;</i>\r\n                    {{ rcName.item_name }}\r\n                  </span>\r\n                </div>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n        </app-popover>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Risk Frequency -->\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    *ngIf=\"riskForm?.riskType !== 'REPORTED'\"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"riskForm?.category?.selectedCategory\">\r\n      <img\r\n        *ngIf=\"\r\n          !riskForm?.frequency_details?.frequency ||\r\n          riskForm?.frequency_details?.frequency === '' ||\r\n          activeSelector === 'frequency'\r\n        \"\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\"\r\n        alt=\"\"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        *ngIf=\"\r\n          (riskForm?.frequency_details?.frequency &&\r\n            riskForm?.frequency_details?.frequency !== '') ||\r\n          activeSelector !== 'frequency'\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\"\r\n          >HOW OFTEN DOES THIS RISK NEED TO BE REASSESSED?\r\n          <span class=\"required\">*</span>\r\n          <i\r\n            class=\"icons\"\r\n            [appTooltip]=\"\r\n              'The option lets you specify the risk reassessment frequency.'\r\n            \"\r\n            placement=\"bottom\"\r\n            delay=\"0\"\r\n            type=\"white\"\r\n            [tooltipMandatory]=\"true\"\r\n            >&#xe91f;</i\r\n          ></label\r\n        >\r\n        <div\r\n          class=\"select\"\r\n          *ngIf=\"!riskForm?.frequency_details?.frequency\"\r\n          (click)=\"activateSelector('frequency', true)\"\r\n        >\r\n          <input\r\n            type=\"text\"\r\n            placeholder=\"Set a Reassessment Frequency\"\r\n            readonly\r\n          />\r\n        </div>\r\n        <div\r\n          class=\"selected button-sec\"\r\n          *ngIf=\"riskForm?.frequency_details?.frequency\"\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            class=\"edit\"\r\n            type=\"button\"\r\n            (click)=\"activateSelector('frequency', true)\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i> Edit\r\n          </button>\r\n        </div>\r\n        <div class=\"vx-mt-1\">\r\n          <app-cs-switch\r\n            [ngValue]=\"riskForm?.enableAllFutureBusinessCycle\"\r\n            (ngValueChange)=\"riskForm.enableAllFutureBusinessCycle = $event\"\r\n            >DO YOU WANT THIS TO SHOW IN ALL FUTURE BUSINESS CYCLES?\r\n          </app-cs-switch>\r\n        </div>\r\n        <p\r\n          *ngIf=\"\r\n            submitted &&\r\n            (!riskForm?.frequency_details?.frequency ||\r\n              riskForm?.frequency_details?.frequency === '')\r\n          \"\r\n          class=\"error-message\"\r\n        >\r\n          Please select the frequency of occurrence for this risk.\r\n        </p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Risk Category -->\r\n  <div\r\n    class=\"form-group-row\"\r\n    [class.active]=\"activeSelector === 'category'\"\r\n    [class.disabled]=\"\r\n      activeSelector &&\r\n      activeSelector !== 'category' &&\r\n      sideSelectorElements.includes(activeSelector)\r\n    \"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"riskForm?.category?.selectedCategory\">\r\n      <img\r\n        *ngIf=\"\r\n          !riskForm?.category?.selectedCategory || activeSelector === 'category'\r\n        \"\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\"\r\n        alt=\"\"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        *ngIf=\"\r\n          riskForm?.category?.selectedCategory && activeSelector !== 'category'\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\"\r\n          >Risk Category\r\n          <i\r\n            class=\"icons\"\r\n            [appTooltip]=\"'Risk Categories are used to group similar risks.'\"\r\n            placement=\"bottom\"\r\n            delay=\"0\"\r\n            type=\"white\"\r\n            [tooltipMandatory]=\"true\"\r\n            >&#xe91f;</i\r\n          ></label\r\n        >\r\n        <div class=\"select\" *ngIf=\"!riskForm?.category?.selectedCategory\">\r\n          <input\r\n            type=\"text\"\r\n            (click)=\"activateSelector('category', true)\"\r\n            placeholder=\"Select Risk Category\"\r\n            readonly\r\n          />\r\n        </div>\r\n        <div class=\"selected\" *ngIf=\"riskForm?.category?.selectedCategory\">\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('category', riskForm.category.selectedCategory)\"\r\n              >&#xe9ae;</i\r\n            >\r\n            <span\r\n              class=\"chipName vx-fs-11 vx-label-txt\"\r\n              [appTooltip]=\"riskForm?.category?.selectedCategory?.category_name\"\r\n              placement=\"bottom-left\"\r\n              delay=\"0\"\r\n              type=\"black\"\r\n              [tooltipMandatory]=\"false\"\r\n              >{{ riskForm?.category?.selectedCategory?.category_name }}</span\r\n            >\r\n          </div>\r\n\r\n          <!-- <div class=\"chip-container\">\r\n                      <span class=\"chip\"><i class=\"icons\" (click)=\"remove('category',riskForm.category.selectedCategory)\">&#xe90d;</i>{{riskForm?.category?.selectedCategory?.category_name}}</span>\r\n                  </div> -->\r\n          <button\r\n            *ngIf=\"activeSelector !== 'category'\"\r\n            class=\"edit\"\r\n            type=\"button\"\r\n            (click)=\"activateSelector('category', true)\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i> Edit\r\n          </button>\r\n        </div>\r\n      </div>\r\n      <ng-container *ngIf=\"riskForm?.categoryCustomTags?.length > 0\">\r\n        <div\r\n          class=\"vx-form-group\"\r\n          *ngFor=\"let tag of riskForm.categoryCustomTags\"\r\n        >\r\n          <label class=\"vx-control-panel\">{{ tag.custom_tag_name }}</label>\r\n          <input\r\n            type=\"text\"\r\n            [(ngModel)]=\"tag.custom_tag_value\"\r\n            [placeholder]=\"tag.custom_tag_name\"\r\n          />\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Recommended Mitigation Plan -->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    [class.active]=\"false\"\r\n    [class.disabled]=\"\r\n      activeSelector &&\r\n      activeSelector !== 'mitigation' &&\r\n      sideSelectorElements.includes(activeSelector)\r\n    \"\r\n  >\r\n    <div\r\n      id=\"riskSpace\"\r\n      class=\"left\"\r\n      [class.checked]=\"(riskForm.mitigationDescriptionPlan | spaceTrim) !== ''\"\r\n    >\r\n      <img\r\n        *ngIf=\"(riskForm.mitigationDescriptionPlan | spaceTrim) === ''\"\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/objectives.svg\"\r\n        alt=\"\"\r\n      />\r\n      <svg\r\n        *ngIf=\"(riskForm.mitigationDescriptionPlan | spaceTrim) !== ''\"\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 for=\"\" class=\"vx-control-panel\"\r\n          >Recommended Mitigation Plans<link\r\n            rel=\"manifest\"\r\n            href=\"./manifest.json\"\r\n          />\r\n          <i\r\n            class=\"icons\"\r\n            [appTooltip]=\"\r\n              'Specify the mitigation plan that can be undertaken to mitigate the risk.'\r\n            \"\r\n            placement=\"bottom\"\r\n            delay=\"0\"\r\n            type=\"white\"\r\n            [tooltipMandatory]=\"true\"\r\n            >&#xe91f;</i\r\n          >\r\n        </label>\r\n        <vcomply-editor\r\n          [(ngModel)]=\"riskForm.mitigationDescriptionPlan\"\r\n          [editorConfig]=\"mitigationDescriptionPlan\"\r\n          (clickOutside)=\"checkMitigationPlan()\"\r\n        >\r\n        </vcomply-editor>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Assessment Deadline -->\r\n  <!-- !settingsInfo?.assessment_deadline_enable && riskForm?.riskType !== 'REPORTED' && ((currentTimeStamp < editDetails?.assessment_date_timestamp) || !editDetails?.IfAssessmentDone ) -->\r\n  <div\r\n    class=\"form-group-row\"\r\n    [class.active]=\"activeSelector === 'assessment'\"\r\n    id=\"deadline\"\r\n    [class.disabled]=\"\r\n      activeSelector &&\r\n      activeSelector !== 'assessment' &&\r\n      sideSelectorElements.includes(activeSelector)\r\n    \"\r\n    *ngIf=\"false\"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"riskForm?.assessment_deadline_days >= 1\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\"\r\n        *ngIf=\"\r\n          riskForm?.assessment_deadline_days < 1 ||\r\n          activeSelector === 'assessment'\r\n        \"\r\n        alt=\"\"\r\n      />\r\n      <svg\r\n        class=\"checkIcon\"\r\n        *ngIf=\"\r\n          riskForm?.assessment_deadline_days >= 1 &&\r\n          activeSelector !== 'assessment'\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\"\r\n          >Assessment Deadline <span class=\"required\">*</span>\r\n          <i\r\n            class=\"icons\"\r\n            [appTooltip]=\"\r\n              'This is the date that the inherent risk assessment must be completed by.'\r\n            \"\r\n            placement=\"bottom\"\r\n            delay=\"0\"\r\n            type=\"white\"\r\n            [tooltipMandatory]=\"true\"\r\n            >&#xe91f;</i\r\n          ></label\r\n        >\r\n        <div class=\"input\">\r\n          <span class=\"text\">Set Number of days</span>\r\n          <div class=\"input-group counter\">\r\n            <button (click)=\"changeRiskAssessment('subtract')\">\r\n              <i class=\"icons\">&#xea53;</i>\r\n            </button>\r\n            <input\r\n              type=\"number\"\r\n              [(ngModel)]=\"riskForm.assessment_deadline_days\"\r\n              (focusin)=\"activateSelector('assessment', true)\"\r\n              (focusout)=\"activateSelector('assessment', false)\"\r\n              name=\"riskAssessmentDeadline\"\r\n              validateAssessment\r\n              #deadline=\"ngModel\"\r\n              (ngModelChange)=\"changeRiskAssessmentDeadline($event)\"\r\n              onkeydown=\"return event.keyCode !== 190\"\r\n              min=\"0\"\r\n              oninput=\"this.value = Math.abs(this.value)\"\r\n            />\r\n            <button (click)=\"changeRiskAssessment('add')\">\r\n              <i class=\"icons\">&#xe915;</i>\r\n            </button>\r\n          </div>\r\n        </div>\r\n        <p\r\n          *ngIf=\"submitted && riskForm?.assessment_deadline_days < 1\"\r\n          class=\"error-message\"\r\n        >\r\n          Enter a value greater than 0.\r\n        </p>\r\n        <label\r\n          class=\"vx-control-panel\"\r\n          *ngIf=\"riskForm?.assessment_deadline_days >= 1\"\r\n        >\r\n          This risk assessment needs to be completed by\r\n          {{ date | date : \"dd MMM yyyy\" }}\r\n        </label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!--Risk Owner-->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    [class.active]=\"false\"\r\n    [class.disabled]=\"\r\n      activeSelector &&\r\n      activeSelector !== 'riskowner' &&\r\n      sideSelectorElements.includes(activeSelector)\r\n    \"\r\n    *ngIf=\"riskForm.addRiskOwner\"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"riskForm.risk_owner\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/owner.svg\"\r\n        alt=\"im\"\r\n        *ngIf=\"\r\n          riskForm?.risk_owner?.trim()?.length === 0 ||\r\n          activeSelector === 'riskowner'\r\n        \"\r\n      />\r\n\r\n      <svg\r\n        *ngIf=\"\r\n          riskForm?.risk_owner?.trim()?.length > 0 &&\r\n          activeSelector !== 'riskowner'\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 for=\"\" class=\"vx-control-panel\"\r\n          >Risk Owner<link rel=\"manifest\" href=\"./manifest.json\" />\r\n          <i\r\n            class=\"icons\"\r\n            appTooltip=\"This is either a person, department owner or a functional role within the organization that owns the risk. Example: For IT risk, the Risk Owner could be the 'Director of IT & Security.'\"\r\n            placement=\"bottom\"\r\n            delay=\"0\"\r\n            type=\"white\"\r\n            [tooltipMandatory]=\"true\"\r\n            >&#xe91f;</i\r\n          >\r\n        </label>\r\n        <input\r\n          spaceTrim\r\n          type=\"text\"\r\n          (keydown)=\"activeSelector = 'riskowner'\"\r\n          (focusin)=\"activateSelector('riskowner', true)\"\r\n          (focusout)=\"activateSelector('riskowner', false)\"\r\n          [(ngModel)]=\"riskForm.risk_owner\"\r\n          placeholder=\"Specify the name of the person, department head or functional role that owns this risk\"\r\n          *ngIf=\"\r\n            riskForm?.risk_owner?.trim() == '' || activeSelector === 'riskowner'\r\n          \"\r\n        />\r\n        <div\r\n          class=\"selected\"\r\n          *ngIf=\"\r\n            riskForm?.risk_owner?.trim() != '' && activeSelector !== 'riskowner'\r\n          \"\r\n        >\r\n          <div class=\"chip-container\">\r\n            <span class=\"value\">{{ riskForm.risk_owner }}</span>\r\n          </div>\r\n          <button\r\n            class=\"edit\"\r\n            (click)=\"activateSelector('riskowner', true)\"\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  <!-- Risk Overseer -->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    [class.active]=\"activeSelector === 'overseer'\"\r\n    [class.disabled]=\"\r\n      activeSelector &&\r\n      activeSelector !== 'overseer' &&\r\n      sideSelectorElements.includes(activeSelector)\r\n    \"\r\n    *ngIf=\"riskForm.addOverseer\"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"riskForm?.overseersList?.length > 0\">\r\n      <img\r\n        *ngIf=\"\r\n          riskForm?.overseersList?.length == 0 || activeSelector === 'overseer'\r\n        \"\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/oversight.svg\"\r\n        alt=\"\"\r\n      />\r\n      <svg\r\n        class=\"checkIcon\"\r\n        *ngIf=\"\r\n          riskForm?.overseersList?.length > 0 && activeSelector !== 'overseer'\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\"\r\n          >Risk Oversight<i\r\n            class=\"icons\"\r\n            [appTooltip]=\"\r\n              'This is the person that is responsible for overseeing the risk but who is not responsible for managing the risk.'\r\n            \"\r\n            placement=\"bottom\"\r\n            delay=\"0\"\r\n            type=\"white\"\r\n            [tooltipMandatory]=\"true\"\r\n            >&#xe91f;</i\r\n          ></label\r\n        >\r\n        <div\r\n          class=\"select\"\r\n          *ngIf=\"\r\n            riskForm?.overseersList?.length == 0 &&\r\n            riskForm?.overseersGroupList?.length == 0\r\n          \"\r\n        >\r\n          <input\r\n            type=\"text\"\r\n            (click)=\"activateSelector('overseer', true)\"\r\n            placeholder=\"Select Risk Oversight(s)\"\r\n            readonly\r\n          />\r\n        </div>\r\n        <div\r\n          class=\"selected\"\r\n          *ngIf=\"\r\n            riskForm?.overseersList?.length > 0 ||\r\n            riskForm?.overseersGroupList.length > 0\r\n          \"\r\n        >\r\n          <ng-container *ngIf=\"!featureflag_groups\">\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 owner of riskForm?.overseersList?.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('overseer', owner)\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"owner.member_name\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ owner.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)=\"popoverOverseer.popover()\"\r\n                placement=\"right\"\r\n                *ngIf=\"riskForm?.overseersList?.length > 1\"\r\n              >\r\n                +{{ riskForm?.overseersList?.slice(1).length }}\r\n              </button>\r\n            </div>\r\n          </ng-container>\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            >\r\n              <i\r\n                class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                (click)=\"remove('overseer', riskForm?.overseersList[0])\"\r\n                >&#xe9ae;</i\r\n              >\r\n              <span\r\n                class=\"chipName vx-fs-11 vx-label-txt\"\r\n                [appTooltip]=\"riskForm?.overseersList[0]?.member_name\"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n                *ngIf=\"riskForm?.overseersList.length > 0\"\r\n                >{{ riskForm?.overseersList[0]?.member_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 greenBg\"\r\n                appPopover\r\n                (click)=\"overseer.popover()\"\r\n                placement=\"right\"\r\n                *ngIf=\"riskForm?.overseersList.length > 1\"\r\n              >\r\n                +{{ riskForm?.overseersList.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                riskForm?.overseersList.length > 0 &&\r\n                riskForm?.overseersGroupList.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=\"riskForm?.overseersGroupList.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('overseergroup', riskForm?.overseersGroupList[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]=\"riskForm?.overseersGroupList[0]?.group_name\"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n                >{{ riskForm?.overseersGroupList[0]?.group_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                appPopover\r\n                (click)=\"overseerGroup.popover()\"\r\n                placement=\"right\"\r\n                *ngIf=\"riskForm?.overseersGroupList?.length > 1\"\r\n              >\r\n                +{{ riskForm?.overseersGroupList?.length - 1 }}\r\n              </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        <app-popover #popoverOverseer [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ul class=\"action-item\">\r\n              <li\r\n                *ngFor=\"\r\n                  let owner of riskForm?.overseersList | 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', owner)\"\r\n                      >&#xe90d;</i\r\n                    >\r\n                    {{ owner.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 #overseer [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ul class=\"action-item\">\r\n              <li\r\n                *ngFor=\"\r\n                  let owner of riskForm?.overseersList | 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', owner)\"\r\n                      >&#xe90d;</i\r\n                    >\r\n                    {{ owner.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 *ngFor=\"let data of riskForm?.overseersGroupList | slice : 1\">\r\n                <div class=\"avatar-card\">\r\n                  <span class=\"value\">\r\n                    <i class=\"icons\" (click)=\"remove('overseergroup', data)\"\r\n                      >&#xe90d;</i\r\n                    >\r\n                    {{ data.group_name }}\r\n                  </span>\r\n                </div>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n        </app-popover>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Risk Mitigation Priority -->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    [class.active]=\"false\"\r\n    [class.disabled]=\"\r\n      activeSelector && sideSelectorElements.includes(activeSelector)\r\n    \"\r\n    *ngIf=\"riskForm.addMitigation\"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"riskForm.mitigation\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/priority.svg\"\r\n        *ngIf=\"!riskForm.mitigation\"\r\n        alt=\"\"\r\n      />\r\n      <!-- <svg viewBox=\"25 25 50 50\" class=\"edit-loader\">\r\n              <circle cx=\"50\" cy=\"50\" r=\"20\" fill=\"none\" stroke=\"#1e5dd3\" stroke-width=\"3\" class=\"loader-path\"></circle>\r\n          </svg> -->\r\n      <svg\r\n        class=\"checkIcon\"\r\n        *ngIf=\"riskForm.mitigation\"\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 Mitigation Priority\r\n          <i\r\n            class=\"icons\"\r\n            [appTooltip]=\"\r\n              'This sets the priority level for the mitigation of each risk.'\r\n            \"\r\n            placement=\"bottom\"\r\n            delay=\"0\"\r\n            type=\"white\"\r\n            [tooltipMandatory]=\"true\"\r\n            >&#xe91f;</i\r\n          ></label\r\n        >\r\n\r\n        <cs-select\r\n          [(ngModel)]=\"riskForm.mitigation\"\r\n          [placeholder]=\"'Select a mitigation priority'\"\r\n          name=\"riskForm.mitigation\"\r\n        >\r\n          <cs-option\r\n            *ngFor=\"let data of mitigationDetails\"\r\n            [value]=\"data?.mitigation_id\"\r\n            [color]=\"data?.mitigation_color\"\r\n          >\r\n            {{ data.mitigation_name }}\r\n          </cs-option>\r\n        </cs-select>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Risk Label -->\r\n  <div\r\n    class=\"form-group-row\"\r\n    [class.active]=\"false\"\r\n    [class.disabled]=\"\r\n      activeSelector && sideSelectorElements.includes(activeSelector)\r\n    \"\r\n    *ngIf=\"riskForm?.addRiskLabel\"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"false\">\r\n      <!-- <img *ngIf=\"true\"\r\n              src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/oversight.svg\" alt=\"\" /> -->\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        *ngIf=\"true\"\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 LABEL\r\n          <i\r\n            class=\"icons\"\r\n            [appTooltip]=\"\r\n              'This option lets you specify if this is a newly identified risk or it is a rapidly changing risk.'\r\n            \"\r\n            placement=\"bottom\"\r\n            delay=\"0\"\r\n            type=\"white\"\r\n            [tooltipMandatory]=\"true\"\r\n            >&#xe91f;</i\r\n          ></label\r\n        >\r\n        <cs-select\r\n          [(ngModel)]=\"riskForm.riskLabelValue\"\r\n          [placeholder]=\"'Select a risk label'\"\r\n          name=\"riskForm?.riskLabelValue\"\r\n        >\r\n          <cs-option *ngFor=\"let data of riskLabelList\" [value]=\"data?.value\">\r\n            {{ data?.name }}\r\n          </cs-option>\r\n        </cs-select>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- Link with  GRC -->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    [class.active]=\"activeSelector === 'GRC'\"\r\n    [class.disabled]=\"\r\n      activeSelector &&\r\n      activeSelector !== 'GRC' &&\r\n      sideSelectorElements.includes(activeSelector)\r\n    \"\r\n    *ngIf=\"riskForm?.GRC\"\r\n  >\r\n    <div\r\n      class=\"left\"\r\n      [class.checked]=\"this.riskForm?.selectedGRCObjects?.length > 0\"\r\n    >\r\n      <img\r\n        *ngIf=\"\r\n          this.riskForm?.selectedGRCObjects?.length == 0 ||\r\n          activeSelector === 'GRC'\r\n        \"\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/link-items.svg\"\r\n        alt=\"\"\r\n      />\r\n\r\n      <svg\r\n        *ngIf=\"\r\n          this.riskForm?.selectedGRCObjects?.length > 0 &&\r\n          activeSelector !== 'GRC'\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 class=\"select\" *ngIf=\"riskForm?.selectedGRCObjects?.length === 0\">\r\n          <input\r\n            type=\"text\"\r\n            (click)=\"activateSelector('GRC', true)\"\r\n            placeholder=\"Select GRC object(s) to link with this risk.\"\r\n            readonly\r\n          />\r\n        </div>\r\n        <ng-container *ngIf=\"riskForm?.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', 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', 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 class=\"icons\" (click)=\"remove('GRC', 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<app-responsibility-centers-list\r\n  *ngIf=\"activeSelector === 'rc'\"\r\n  [responsibilityCentersList]=\"responsibilityCentersList\"\r\n  [selectedResponsibilityCenters]=\"riskForm.responsibilityCentersList\"\r\n  [rcIdKey]=\"'rc_id'\"\r\n  (saveSelectedList)=\"saveSelectedRCList($event)\"\r\n  (closeRcList)=\"activateSelector('rc', false)\"\r\n  [singularText]=\"'Responsibility Center selected'\"\r\n  [pluralText]=\"'Responsibility Centers selected'\"\r\n>\r\n</app-responsibility-centers-list>\r\n\r\n<app-owner-list\r\n  *ngIf=\"!featureflag_groups && activeSelector === 'owner'\"\r\n  [usersList]=\"ownersList\"\r\n  [selectedUsers]=\"riskForm.ownersList\"\r\n  [userIdKey]=\"'member_id'\"\r\n  [itemEmailKey]=\"'member_email'\"\r\n  [itemNameKey]=\"'member_name'\"\r\n  (saveSelectedList)=\"saveSelectedOwnersList($event)\"\r\n  [nonRemovableUsersList]=\"nonRemovableUsersList\"\r\n  (closeUsersList)=\"activateSelector('owner', false)\"\r\n  [singularText]=\"'User selected'\"\r\n  [pluralText]=\"'Users selected'\"\r\n></app-owner-list>\r\n\r\n<user-group-list\r\n  *ngIf=\"featureflag_groups && activeSelector === 'owner'\"\r\n  [userlist]=\"ownersList\"\r\n  [selectedUsers]=\"riskForm.ownersList\"\r\n  [groupList]=\"groupsList\"\r\n  [nonRemovableUserIds]=\"nonRemovableUsersList\"\r\n  (save)=\"saveSelectedOwnersList($event)\"\r\n  [selectedGroups]=\"riskForm.groupsList\"\r\n  (cancel)=\"activateSelector('owner', false)\"\r\n  [groupEnabled]=\"true\"\r\n  [featureflag]=\"featureflag_groups\"\r\n>\r\n</user-group-list>\r\n\r\n<user-group-list\r\n  *ngIf=\"featureflag_groups && activeSelector === 'overseer'\"\r\n  [userlist]=\"overseersList\"\r\n  [selectedUsers]=\"riskForm.overseersList\"\r\n  [groupList]=\"overseersGroupList\"\r\n  (save)=\"saveSelectedOverseersList($event)\"\r\n  [selectedGroups]=\"riskForm.overseersGroupList\"\r\n  (cancel)=\"activateSelector('overseer', false)\"\r\n  [groupEnabled]=\"true\"\r\n  [featureflag]=\"featureflag_groups\"\r\n>\r\n</user-group-list>\r\n\r\n<app-category-list\r\n  *ngIf=\"activeSelector === 'category'\"\r\n  [categoryList]=\"categoryList\"\r\n  [selectedCategory]=\"riskForm.category\"\r\n  (saveSelectedCategory)=\"saveSelectedCategory($event)\"\r\n  (closeCategoriesList)=\"activateSelector('category', false)\"\r\n></app-category-list>\r\n<app-owner-list\r\n  *ngIf=\"!featureflag_groups && activeSelector === 'overseer'\"\r\n  [usersList]=\"overseersList\"\r\n  [selectedUsers]=\"riskForm.overseersList\"\r\n  [userIdKey]=\"'member_id'\"\r\n  [itemNameKey]=\"'member_name'\"\r\n  [itemEmailKey]=\"'member_email'\"\r\n  (saveSelectedList)=\"saveSelectedOverseersList($event)\"\r\n  (closeUsersList)=\"activateSelector('overseer', false)\"\r\n  [singularText]=\"'User selected'\"\r\n  [pluralText]=\"'Users selected'\"\r\n>\r\n</app-owner-list>\r\n<app-loader-inline *ngIf=\"loader\"></app-loader-inline>\r\n\r\n<app-frequency-dialog-container\r\n  *ngIf=\"activeSelector === 'frequency'\"\r\n  [frequencyDetails]=\"frequencyDetails\"\r\n  (selectedFrequency)=\"frequencyData($event)\"\r\n  (closeFrequency)=\"activateSelector('frequency', false)\"\r\n>\r\n</app-frequency-dialog-container>\r\n\r\n<app-grc-object-list\r\n  *ngIf=\"activeSelector === 'GRC'\"\r\n  [grcObject]=\"grcList\"\r\n  [selectedGRC]=\"riskForm.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($event)\"\r\n  (closeOtherGRC)=\"activateSelector('GRC', false)\"\r\n></app-grc-object-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>\r\n</app-smiley-dialog-inline>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::ng-deep .workflw-risk{display:block;position:relative}\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:#ffffff;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:#ffffff}::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:#ffffff;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{-webkit-appearance:none;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:#ffffff;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:#ffffff;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:#ffffff;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:#ffffff}::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:#ffffff;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:#ffffff;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:#ffffff;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:#ffffff;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:#000000;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:rgba(0,0,0,.3)}@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:#ffffff}::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%,#747576 1%,#747576 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);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:#ffffff}::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%,#f31c39 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);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%,#34aa44 1%,#34aa44 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);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%,#1e5dd3 1%,#1e5dd3 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);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%,#f6882f 1%,#f6882f 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);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%,#7aa6f7 1%,#7aa6f7 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);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}\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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "component", type: i9.MarxEditorComponent, selector: "vcomply-editor", inputs: ["editorConfig"], outputs: ["comment", "sendSavedFiles", "popup"] }, { 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: CsSwitchComponent$1, 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: CsSelectComponent, selector: "cs-select", inputs: ["dropdownLabel", "dropdownSubLabel", "isRequired", "placeholder", "setMaxWidth"], outputs: ["valueChanged"] }, { kind: "component", type: CsOptionComponent, selector: "cs-option", inputs: ["value", "color", "backgroundColor", "optionTooltip"] }, { 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"], outputs: ["saveSelectedList", "closeRcList"] }, { 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: CategoryListComponent, selector: "app-category-list", inputs: ["categoryList", "selectedCategory"], outputs: ["saveSelectedCategory", "closeList", "closeCategoriesList"] }, { kind: "directive", type: ScrollInViewDirective, selector: "[appScrollInView]", inputs: ["appScrollInView"] }, { kind: "directive", type: spaceTrimDirective, selector: "[spaceTrim]" }, { kind: "component", type: FrequencyDialogContainerComponent, selector: "app-frequency-dialog-container", inputs: ["mode", "frequencyDetails"], outputs: ["selectedFrequency", "closeFrequency"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1$1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: RefDisconnectPipe, name: "refDisconnect" }, { kind: "pipe", type: ShortMergePipe, name: "shortMerge" }, { kind: "pipe", type: SpaceTrimPipe, name: "spaceTrim" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: WorkflowRiskComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-workflow-risk', template: "<div class=\"workflw-risk\" *ngIf=\"!showSmiley\">\r\n  <!-- Risk Type -->\r\n  <div class=\"form-group-row\" [class.active]=\"false\" [class.disabled]=\"false\">\r\n    <div class=\"left checked\">\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 Type <span class=\"required\">*</span></label\r\n        >\r\n        <div class=\"risk-type-field\">\r\n          <div\r\n            class=\"type-item\"\r\n            [class.active]=\"riskForm?.riskType === 'NORMAL'\"\r\n          >\r\n            <button\r\n              [class.disabled]=\"!riskTypeChangeAllowed\"\r\n              (click)=\"changeRisk('NORMAL')\"\r\n            >\r\n              ADD TO RISK REGISTER\r\n            </button>\r\n            <i\r\n              class=\"icons info\"\r\n              [appTooltip]=\"\r\n                'This option lets you add a risk directly to the Risk Register. The risk owners will receive an alert and they can begin the the risk assessment process.'\r\n              \"\r\n              placement=\"bottom-right\"\r\n              delay=\"0\"\r\n              type=\"white\"\r\n              [tooltipMandatory]=\"true\"\r\n              >&#xe932;</i\r\n            >\r\n          </div>\r\n          <div\r\n            class=\"type-item\"\r\n            [class.active]=\"riskForm?.riskType === 'REPORTED'\"\r\n          >\r\n            <button\r\n              [class.disabled]=\"!riskTypeChangeAllowed\"\r\n              (click)=\"changeRisk('REPORTED')\"\r\n            >\r\n              REPORT A RISK\r\n            </button>\r\n            <i\r\n              class=\"icons info\"\r\n              [appTooltip]=\"\r\n                'This options lets you report a risk and assign it to the risk owners. The risk owners will have the option to either add the risk to the Risk Register or flag it for a follow-up at a later date.'\r\n              \"\r\n              placement=\"bottom-right\"\r\n              delay=\"0\"\r\n              type=\"white\"\r\n              [tooltipMandatory]=\"true\"\r\n              >&#xe932;</i\r\n            >\r\n          </div>\r\n          <span class=\"background-glider\"></span>\r\n        </div>\r\n        <p *ngIf=\"false\" class=\"error-message\">Add a risk type</p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Risk Name -->\r\n  <div\r\n    class=\"form-group-row\"\r\n    [class.active]=\"false\"\r\n    [class.disabled]=\"\r\n      activeSelector &&\r\n      activeSelector !== 'name' &&\r\n      sideSelectorElements.includes(activeSelector)\r\n    \"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"riskForm.title\">\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          riskForm?.title?.trim()?.length === 0 || activeSelector === 'name'\r\n        \"\r\n      />\r\n\r\n      <svg\r\n        *ngIf=\"riskForm?.title?.trim()?.length > 0 && activeSelector !== 'name'\"\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          >WHAT RISK WOULD YOU LIKE TO MANAGE?\r\n          <span class=\"required\">*</span></label\r\n        >\r\n        <input\r\n          spaceTrim\r\n          type=\"text\"\r\n          (keydown)=\"activeSelector = 'name'\"\r\n          (focusin)=\"activateSelector('name', true)\"\r\n          (focusout)=\"activateSelector('name', false)\"\r\n          [(ngModel)]=\"riskForm.title\"\r\n          placeholder=\"Add a risk name\"\r\n          *ngIf=\"riskForm?.title?.trim() == '' || activeSelector === 'name'\"\r\n        />\r\n        <div\r\n          class=\"selected\"\r\n          *ngIf=\"riskForm?.title?.trim() != '' && activeSelector !== 'name'\"\r\n        >\r\n          <div class=\"chip-container\">\r\n            <span class=\"value\">{{ riskForm.title }}</span>\r\n          </div>\r\n          <button\r\n            class=\"edit\"\r\n            (click)=\"activateSelector('name', true)\"\r\n            type=\"button\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i> Edit\r\n          </button>\r\n        </div>\r\n        <p *ngIf=\"submitted && !riskForm.title\" class=\"error-message\">\r\n          Add a risk name\r\n        </p>\r\n        <vcomply-editor\r\n          [(ngModel)]=\"riskForm.description\"\r\n          [editorConfig]=\"description\"\r\n          (clickOutside)=\"checkDescription()\"\r\n        ></vcomply-editor>\r\n        <p\r\n          *ngIf=\"\r\n            submitted &&\r\n            riskForm.riskType === 'REPORTED' &&\r\n            !riskForm?.description?.trim()?.length\r\n          \"\r\n          class=\"error-message\"\r\n        >\r\n          Add a risk description\r\n        </p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Risk Owner -->\r\n  <div\r\n    class=\"form-group-row\"\r\n    [class.active]=\"activeSelector === 'owner'\"\r\n    [class.disabled]=\"\r\n      activeSelector &&\r\n      activeSelector !== 'owner' &&\r\n      sideSelectorElements.includes(activeSelector)\r\n    \"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"riskForm?.ownersList?.length > 0\">\r\n      <img\r\n        *ngIf=\"riskForm?.ownersList?.length == 0 || activeSelector === 'owner'\"\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/im-creating.svg\"\r\n        alt=\"\"\r\n      />\r\n\r\n      <svg\r\n        *ngIf=\"riskForm?.ownersList?.length > 0 && activeSelector !== 'owner'\"\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          >WHO IS RESPONSIBLE FOR MANAGING THIS RISK?\r\n          <span class=\"required\">*</span>\r\n          <i\r\n            class=\"icons\"\r\n            [appTooltip]=\"\r\n              'This is the person that is responsible for managing the risk.'\r\n            \"\r\n            placement=\"bottom\"\r\n            delay=\"0\"\r\n            type=\"white\"\r\n            [tooltipMandatory]=\"true\"\r\n            >&#xe91f;</i\r\n          >\r\n        </label>\r\n        <div class=\"select\" *ngIf=\"riskForm?.ownersList?.length == 0\">\r\n          <input\r\n            type=\"text\"\r\n            (click)=\"activateSelector('owner', true)\"\r\n            placeholder=\"Select Risk Owner(s)\"\r\n            readonly\r\n          />\r\n        </div>\r\n\r\n        <div\r\n          class=\"selected\"\r\n          *ngIf=\"\r\n            riskForm?.ownersList?.length > 0 || riskForm?.groupsList.length > 0\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              *ngIf=\"\r\n                riskForm?.ownersList\r\n                  | shortMerge : nonRemovableUsersList as ownerList\r\n              \"\r\n            >\r\n              <ng-container *ngFor=\"let owner of ownerList?.slice(0, 1)\">\r\n                <i\r\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  *ngIf=\"!nonRemovableUsersList.includes(owner?.member_id)\"\r\n                  (click)=\"remove('owner', owner)\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"owner?.member_name\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ owner?.member_name }}</span\r\n                >\r\n              </ng-container>\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)=\"popoverOwner.popover()\"\r\n              placement=\"left\"\r\n              *ngIf=\"riskForm?.ownersList?.length > 1\"\r\n            >\r\n              +{{ riskForm?.ownersList?.slice(1).length }}\r\n            </button>\r\n          </div>\r\n\r\n          <!-- <div class=\"chip-container\" *ngIf=\"!featureflag_groups\" [class.more-one]=\"riskForm?.ownersList?.length>1\" [class.plus]=\"riskForm?.ownersList?.length>2\">\r\n                      <ng-container *ngIf=\"(riskForm?.ownersList|shortMerge : nonRemovableUsersList) as ownerList\">\r\n                          <span class=\"chip\" *ngFor=\"let owner of ownerList?.slice(0,2)\"><i class=\"icons\" *ngIf=\"!nonRemovableUsersList.includes(owner?.member_id)\" (click)=\"remove('owner',owner)\">&#xe90d;</i> {{owner?.member_name}}</span>\r\n                          <button class=\"count\" *ngIf=\"riskForm?.ownersList?.length > 2\" type=\"button\" appPopover (click)=\"popoverOwner.popover()\" placement=\"right\">+{{riskForm?.ownersList?.slice(2).length}}</button>\r\n                      </ng-container>\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            >\r\n              <i\r\n                class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                *ngIf=\"\r\n                  !nonRemovableUsersList.includes(\r\n                    riskForm?.ownersList[0]?.member_id\r\n                  )\r\n                \"\r\n                (click)=\"remove('owner', riskForm?.ownersList[0])\"\r\n                >&#xe9ae;</i\r\n              >\r\n              <span\r\n                class=\"chipName vx-fs-11 vx-label-txt\"\r\n                [appTooltip]=\"riskForm?.ownersList[0]?.member_name\"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n                >{{ riskForm?.ownersList[0]?.member_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 greenBg\"\r\n                appPopover\r\n                (click)=\"popoverUser.popover()\"\r\n                placement=\"right\"\r\n                *ngIf=\"riskForm?.ownersList.length > 1\"\r\n              >\r\n                +{{ riskForm?.ownersList.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=\"riskForm?.groupsList.length > 0\"\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=\"riskForm?.groupsList.length > 0\"\r\n            >\r\n              <i\r\n                class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                (click)=\"remove('Ownergroup', riskForm?.groupsList[0])\"\r\n                >&#xe9ae;</i\r\n              >\r\n              <span\r\n                class=\"chipName vx-fs-11 vx-label-txt\"\r\n                [appTooltip]=\"riskForm?.groupsList[0]?.group_name\"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n                >{{ riskForm?.groupsList[0]?.group_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                appPopover\r\n                (click)=\"group.popover()\"\r\n                placement=\"right\"\r\n                *ngIf=\"riskForm?.groupsList?.length > 1\"\r\n              >\r\n                +{{ riskForm?.groupsList?.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\" >\r\n                        <i class=\"icons cross vx-mr-1\" *ngIf=\"!nonRemovableUsersList.includes(riskForm?.ownersList[0]?.member_id)\" (click)=\"remove('owner',riskForm?.ownersList[0])\" >&#xe90d;</i>\r\n                          <span class=\"chip\">\r\n                              <span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">{{riskForm?.ownersList[0]?.member_name}}</span></span>\r\n                          <button *ngIf=\"riskForm?.ownersList.length > 1\" class=\"count user\" appPopover (click)=\"popoverUser.popover()\" placement=\"right\">+{{riskForm?.ownersList.length - 1}}</button>\r\n                      </div>\r\n                      <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"riskForm?.groupsList.length > 0\" >&</span>\r\n                      <div class=\"chip-inner\" *ngIf=\"riskForm?.groupsList.length > 0\" >\r\n                        <i class=\"icons cross vx-mr-1\" (click)=\"remove('Ownergroup', riskForm?.groupsList[0])\" >&#xe90d;</i>\r\n                          <span class=\"chip\" [appTooltip]=\"riskForm?.groupsList[0]?.group_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">{{riskForm?.groupsList[0]?.group_name}}</span></span>\r\n                          <button *ngIf=\"riskForm?.groupsList?.length > 1\" class=\"count\" appPopover (click)=\"group.popover()\" placement=\"right\">+{{riskForm?.groupsList?.length -1}}</button>\r\n                      </div>\r\n                  </div> -->\r\n\r\n          <button\r\n            *ngIf=\"activeSelector !== 'owner'\"\r\n            class=\"edit\"\r\n            type=\"button\"\r\n            (click)=\"activateSelector('owner', true)\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i> Edit\r\n          </button>\r\n        </div>\r\n        <p\r\n          *ngIf=\"submitted && riskForm?.ownersList?.length === 0\"\r\n          class=\"error-message\"\r\n        >\r\n          Select Owner(s) for this risk.\r\n        </p>\r\n        <app-popover #popoverOwner [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ng-container\r\n              *ngIf=\"\r\n                riskForm?.ownersList\r\n                  | shortMerge : nonRemovableUsersList as ownerPop\r\n              \"\r\n            >\r\n              <ul class=\"action-item\">\r\n                <li *ngFor=\"let owner of ownerPop | slice : 1; let j = index\">\r\n                  <div class=\"avatar-card\">\r\n                    <span class=\"value\">\r\n                      <i\r\n                        *ngIf=\"\r\n                          !nonRemovableUsersList.includes(owner?.member_id)\r\n                        \"\r\n                        class=\"icons\"\r\n                        (click)=\"remove('owner', owner)\"\r\n                        >&#xe90d;</i\r\n                      >\r\n                      {{ owner.member_name }}\r\n                    </span>\r\n                  </div>\r\n                </li>\r\n              </ul>\r\n            </ng-container>\r\n          </div>\r\n        </app-popover>\r\n        <app-popover #popoverUser [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ng-container\r\n              *ngIf=\"\r\n                riskForm?.ownersList\r\n                  | shortMerge : nonRemovableUsersList as ownerPop\r\n              \"\r\n            >\r\n              <ul class=\"action-item\">\r\n                <li *ngFor=\"let owner of ownerPop | slice : 1; let j = index\">\r\n                  <div class=\"avatar-card\">\r\n                    <span class=\"value\">\r\n                      <i\r\n                        *ngIf=\"\r\n                          !nonRemovableUsersList.includes(owner?.member_id)\r\n                        \"\r\n                        class=\"icons\"\r\n                        (click)=\"remove('owner', owner)\"\r\n                        >&#xe90d;</i\r\n                      >\r\n                      {{ owner.member_name }}\r\n                    </span>\r\n                  </div>\r\n                </li>\r\n              </ul>\r\n            </ng-container>\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 *ngFor=\"let data of riskForm?.groupsList | slice : 1\">\r\n                <div class=\"avatar-card\">\r\n                  <span class=\"value\">\r\n                    <i class=\"icons\" (click)=\"remove('Ownergroup', data)\"\r\n                      >&#xe90d;</i\r\n                    >\r\n                    {{ data.group_name }}\r\n                  </span>\r\n                </div>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n        </app-popover>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Responsibility Center -->\r\n  <div\r\n    class=\"form-group-row\"\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]=\"riskForm?.responsibilityCentersList?.length > 0\"\r\n    >\r\n      <img\r\n        *ngIf=\"\r\n          riskForm?.responsibilityCentersList?.length == 0 ||\r\n          activeSelector === 'rc'\r\n        \"\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/responsibility-center.svg\"\r\n        alt=\"\"\r\n      />\r\n\r\n      <svg\r\n        *ngIf=\"\r\n          riskForm?.responsibilityCentersList?.length > 0 &&\r\n          activeSelector !== 'rc'\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\"\r\n          >Responsibility Center <span class=\"required\">*</span>\r\n          <i\r\n            class=\"icons\"\r\n            [appTooltip]=\"\r\n              'Responsibility Centers represent the corporate and operational infrastructure of an organization. One or more Responsibility Centers can be exposed to a risk and accordingly, the risk must be assessed against each Responsibility Center.'\r\n            \"\r\n            placement=\"bottom\"\r\n            delay=\"0\"\r\n            type=\"white\"\r\n            [tooltipMandatory]=\"true\"\r\n            >&#xe91f;</i\r\n          >\r\n        </label>\r\n        <div\r\n          class=\"select\"\r\n          *ngIf=\"riskForm?.responsibilityCentersList?.length == 0\"\r\n        >\r\n          <input\r\n            type=\"text\"\r\n            (click)=\"activateSelector('rc', true)\"\r\n            placeholder=\"Select Responsibility Center(s)\"\r\n            readonly\r\n          />\r\n        </div>\r\n        <div\r\n          class=\"selected\"\r\n          *ngIf=\"riskForm?.responsibilityCentersList?.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 rcName of riskForm?.responsibilityCentersList?.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('rc', rcName)\"\r\n                >&#xe9ae;</i\r\n              >\r\n              <span\r\n                class=\"chipName vx-fs-11 vx-label-txt\"\r\n                [appTooltip]=\"rcName.item_name\"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n                >{{ rcName.item_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)=\"popoverRC.popover()\"\r\n              placement=\"left\"\r\n              *ngIf=\"riskForm?.responsibilityCentersList?.length > 1\"\r\n            >\r\n              +{{ riskForm?.responsibilityCentersList?.slice(1).length }}\r\n            </button>\r\n          </div>\r\n\r\n          <!-- <div class=\"chip-container\" [class.more-one]=\"riskForm?.responsibilityCentersList?.length>1\" [class.plus]=\"riskForm?.responsibilityCentersList?.length>2\">\r\n                      <span class=\"chip\" *ngFor=\"let rcName of riskForm?.responsibilityCentersList?.slice(0,2)\"><i class=\"icons\" (click)=\"remove('rc',rcName)\">&#xe90d;</i> {{rcName.item_name}}</span>\r\n                      <button class=\"count\" *ngIf=\"riskForm?.responsibilityCentersList?.length > 2\" type=\"button\" appPopover (click)=\"popoverRC.popover()\" placement=\"right\">+{{riskForm?.responsibilityCentersList?.slice(2).length}}</button>\r\n                  </div> -->\r\n\r\n          <button\r\n            *ngIf=\"activeSelector !== 'rc'\"\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        <p\r\n          *ngIf=\"submitted && riskForm?.responsibilityCentersList?.length == 0\"\r\n          class=\"error-message\"\r\n        >\r\n          Assign this risk to a Responsibility Center(s)\r\n        </p>\r\n        <app-popover #popoverRC [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ul class=\"action-item\">\r\n              <li\r\n                *ngFor=\"\r\n                  let rcName of riskForm?.responsibilityCentersList | 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', rcName)\">&#xe90d;</i>\r\n                    {{ rcName.item_name }}\r\n                  </span>\r\n                </div>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n        </app-popover>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Risk Frequency -->\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    *ngIf=\"riskForm?.riskType !== 'REPORTED'\"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"riskForm?.category?.selectedCategory\">\r\n      <img\r\n        *ngIf=\"\r\n          !riskForm?.frequency_details?.frequency ||\r\n          riskForm?.frequency_details?.frequency === '' ||\r\n          activeSelector === 'frequency'\r\n        \"\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\"\r\n        alt=\"\"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        *ngIf=\"\r\n          (riskForm?.frequency_details?.frequency &&\r\n            riskForm?.frequency_details?.frequency !== '') ||\r\n          activeSelector !== 'frequency'\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\"\r\n          >HOW OFTEN DOES THIS RISK NEED TO BE REASSESSED?\r\n          <span class=\"required\">*</span>\r\n          <i\r\n            class=\"icons\"\r\n            [appTooltip]=\"\r\n              'The option lets you specify the risk reassessment frequency.'\r\n            \"\r\n            placement=\"bottom\"\r\n            delay=\"0\"\r\n            type=\"white\"\r\n            [tooltipMandatory]=\"true\"\r\n            >&#xe91f;</i\r\n          ></label\r\n        >\r\n        <div\r\n          class=\"select\"\r\n          *ngIf=\"!riskForm?.frequency_details?.frequency\"\r\n          (click)=\"activateSelector('frequency', true)\"\r\n        >\r\n          <input\r\n            type=\"text\"\r\n            placeholder=\"Set a Reassessment Frequency\"\r\n            readonly\r\n          />\r\n        </div>\r\n        <div\r\n          class=\"selected button-sec\"\r\n          *ngIf=\"riskForm?.frequency_details?.frequency\"\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            class=\"edit\"\r\n            type=\"button\"\r\n            (click)=\"activateSelector('frequency', true)\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i> Edit\r\n          </button>\r\n        </div>\r\n        <div class=\"vx-mt-1\">\r\n          <app-cs-switch\r\n            [ngValue]=\"riskForm?.enableAllFutureBusinessCycle\"\r\n            (ngValueChange)=\"riskForm.enableAllFutureBusinessCycle = $event\"\r\n            >DO YOU WANT THIS TO SHOW IN ALL FUTURE BUSINESS CYCLES?\r\n          </app-cs-switch>\r\n        </div>\r\n        <p\r\n          *ngIf=\"\r\n            submitted &&\r\n            (!riskForm?.frequency_details?.frequency ||\r\n              riskForm?.frequency_details?.frequency === '')\r\n          \"\r\n          class=\"error-message\"\r\n        >\r\n          Please select the frequency of occurrence for this risk.\r\n        </p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Risk Category -->\r\n  <div\r\n    class=\"form-group-row\"\r\n    [class.active]=\"activeSelector === 'category'\"\r\n    [class.disabled]=\"\r\n      activeSelector &&\r\n      activeSelector !== 'category' &&\r\n      sideSelectorElements.includes(activeSelector)\r\n    \"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"riskForm?.category?.selectedCategory\">\r\n      <img\r\n        *ngIf=\"\r\n          !riskForm?.category?.selectedCategory || activeSelector === 'category'\r\n        \"\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\"\r\n        alt=\"\"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        *ngIf=\"\r\n          riskForm?.category?.selectedCategory && activeSelector !== 'category'\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\"\r\n          >Risk Category\r\n          <i\r\n            class=\"icons\"\r\n            [appTooltip]=\"'Risk Categories are used to group similar risks.'\"\r\n            placement=\"bottom\"\r\n            delay=\"0\"\r\n            type=\"white\"\r\n            [tooltipMandatory]=\"true\"\r\n            >&#xe91f;</i\r\n          ></label\r\n        >\r\n        <div class=\"select\" *ngIf=\"!riskForm?.category?.selectedCategory\">\r\n          <input\r\n            type=\"text\"\r\n            (click)=\"activateSelector('category', true)\"\r\n            placeholder=\"Select Risk Category\"\r\n            readonly\r\n          />\r\n        </div>\r\n        <div class=\"selected\" *ngIf=\"riskForm?.category?.selectedCategory\">\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('category', riskForm.category.selectedCategory)\"\r\n              >&#xe9ae;</i\r\n            >\r\n            <span\r\n              class=\"chipName vx-fs-11 vx-label-txt\"\r\n              [appTooltip]=\"riskForm?.category?.selectedCategory?.category_name\"\r\n              placement=\"bottom-left\"\r\n              delay=\"0\"\r\n              type=\"black\"\r\n              [tooltipMandatory]=\"false\"\r\n              >{{ riskForm?.category?.selectedCategory?.category_name }}</span\r\n            >\r\n          </div>\r\n\r\n          <!-- <div class=\"chip-container\">\r\n                      <span class=\"chip\"><i class=\"icons\" (click)=\"remove('category',riskForm.category.selectedCategory)\">&#xe90d;</i>{{riskForm?.category?.selectedCategory?.category_name}}</span>\r\n                  </div> -->\r\n          <button\r\n            *ngIf=\"activeSelector !== 'category'\"\r\n            class=\"edit\"\r\n            type=\"button\"\r\n            (click)=\"activateSelector('category', true)\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i> Edit\r\n          </button>\r\n        </div>\r\n      </div>\r\n      <ng-container *ngIf=\"riskForm?.categoryCustomTags?.length > 0\">\r\n        <div\r\n          class=\"vx-form-group\"\r\n          *ngFor=\"let tag of riskForm.categoryCustomTags\"\r\n        >\r\n          <label class=\"vx-control-panel\">{{ tag.custom_tag_name }}</label>\r\n          <input\r\n            type=\"text\"\r\n            [(ngModel)]=\"tag.custom_tag_value\"\r\n            [placeholder]=\"tag.custom_tag_name\"\r\n          />\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Assessment Deadline -->\r\n  <!-- !settingsInfo?.assessment_deadline_enable && riskForm?.riskType !== 'REPORTED' && ((currentTimeStamp < editDetails?.assessment_date_timestamp) || !editDetails?.IfAssessmentDone ) -->\r\n  <div\r\n    class=\"form-group-row\"\r\n    [class.active]=\"activeSelector === 'assessment'\"\r\n    id=\"deadline\"\r\n    [class.disabled]=\"\r\n      activeSelector &&\r\n      activeSelector !== 'assessment' &&\r\n      sideSelectorElements.includes(activeSelector)\r\n    \"\r\n    *ngIf=\"false\"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"riskForm?.assessment_deadline_days >= 1\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\"\r\n        *ngIf=\"\r\n          riskForm?.assessment_deadline_days < 1 ||\r\n          activeSelector === 'assessment'\r\n        \"\r\n        alt=\"\"\r\n      />\r\n      <svg\r\n        class=\"checkIcon\"\r\n        *ngIf=\"\r\n          riskForm?.assessment_deadline_days >= 1 &&\r\n          activeSelector !== 'assessment'\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\"\r\n          >Assessment Deadline <span class=\"required\">*</span>\r\n          <i\r\n            class=\"icons\"\r\n            [appTooltip]=\"\r\n              'This is the date that the inherent risk assessment must be completed by.'\r\n            \"\r\n            placement=\"bottom\"\r\n            delay=\"0\"\r\n            type=\"white\"\r\n            [tooltipMandatory]=\"true\"\r\n            >&#xe91f;</i\r\n          ></label\r\n        >\r\n        <div class=\"input\">\r\n          <span class=\"text\">Set Number of days</span>\r\n          <div class=\"input-group counter\">\r\n            <button (click)=\"changeRiskAssessment('subtract')\">\r\n              <i class=\"icons\">&#xea53;</i>\r\n            </button>\r\n            <input\r\n              type=\"number\"\r\n              [(ngModel)]=\"riskForm.assessment_deadline_days\"\r\n              (focusin)=\"activateSelector('assessment', true)\"\r\n              (focusout)=\"activateSelector('assessment', false)\"\r\n              name=\"riskAssessmentDeadline\"\r\n              validateAssessment\r\n              #deadline=\"ngModel\"\r\n              (ngModelChange)=\"changeRiskAssessmentDeadline($event)\"\r\n              onkeydown=\"return event.keyCode !== 190\"\r\n              min=\"0\"\r\n              oninput=\"this.value = Math.abs(this.value)\"\r\n            />\r\n            <button (click)=\"changeRiskAssessment('add')\">\r\n              <i class=\"icons\">&#xe915;</i>\r\n            </button>\r\n          </div>\r\n        </div>\r\n        <p\r\n          *ngIf=\"submitted && riskForm?.assessment_deadline_days < 1\"\r\n          class=\"error-message\"\r\n        >\r\n          Enter a value greater than 0.\r\n        </p>\r\n        <label\r\n          class=\"vx-control-panel\"\r\n          *ngIf=\"riskForm?.assessment_deadline_days >= 1\"\r\n        >\r\n          This risk assessment needs to be completed by\r\n          {{ date | date : \"dd MMM yyyy\" }}\r\n        </label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Risk Overseer -->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    [class.active]=\"activeSelector === 'overseer'\"\r\n    [class.disabled]=\"\r\n      activeSelector &&\r\n      activeSelector !== 'overseer' &&\r\n      sideSelectorElements.includes(activeSelector)\r\n    \"\r\n    *ngIf=\"riskForm.addOverseer\"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"riskForm?.overseersList?.length > 0\">\r\n      <img\r\n        *ngIf=\"\r\n          riskForm?.overseersList?.length == 0 || activeSelector === 'overseer'\r\n        \"\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/oversight.svg\"\r\n        alt=\"\"\r\n      />\r\n      <svg\r\n        class=\"checkIcon\"\r\n        *ngIf=\"\r\n          riskForm?.overseersList?.length > 0 && activeSelector !== 'overseer'\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\"\r\n          >Risk Oversight<i\r\n            class=\"icons\"\r\n            [appTooltip]=\"\r\n              'This is the person that is responsible for overseeing the risk but who is not responsible for managing the risk.'\r\n            \"\r\n            placement=\"bottom\"\r\n            delay=\"0\"\r\n            type=\"white\"\r\n            [tooltipMandatory]=\"true\"\r\n            >&#xe91f;</i\r\n          ></label\r\n        >\r\n        <div\r\n          class=\"select\"\r\n          *ngIf=\"\r\n            riskForm?.overseersList?.length == 0 &&\r\n            riskForm?.overseersGroupList?.length == 0\r\n          \"\r\n        >\r\n          <input\r\n            type=\"text\"\r\n            (click)=\"activateSelector('overseer', true)\"\r\n            placeholder=\"Select Risk Oversight(s)\"\r\n            readonly\r\n          />\r\n        </div>\r\n        <div\r\n          class=\"selected\"\r\n          *ngIf=\"\r\n            riskForm?.overseersList?.length > 0 ||\r\n            riskForm?.overseersGroupList.length > 0\r\n          \"\r\n        >\r\n          <ng-container *ngIf=\"!featureflag_groups\">\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 owner of riskForm?.overseersList?.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('overseer', owner)\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"owner.member_name\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ owner.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)=\"popoverOverseer.popover()\"\r\n                placement=\"right\"\r\n                *ngIf=\"riskForm?.overseersList?.length > 1\"\r\n              >\r\n                +{{ riskForm?.overseersList?.slice(1).length }}\r\n              </button>\r\n            </div>\r\n          </ng-container>\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            >\r\n              <i\r\n                class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                (click)=\"remove('overseer', riskForm?.overseersList[0])\"\r\n                >&#xe9ae;</i\r\n              >\r\n              <span\r\n                class=\"chipName vx-fs-11 vx-label-txt\"\r\n                [appTooltip]=\"riskForm?.overseersList[0]?.member_name\"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n                *ngIf=\"riskForm?.overseersList.length > 0\"\r\n                >{{ riskForm?.overseersList[0]?.member_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 greenBg\"\r\n                appPopover\r\n                (click)=\"overseer.popover()\"\r\n                placement=\"right\"\r\n                *ngIf=\"riskForm?.overseersList.length > 1\"\r\n              >\r\n                +{{ riskForm?.overseersList.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                riskForm?.overseersList.length > 0 &&\r\n                riskForm?.overseersGroupList.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=\"riskForm?.overseersGroupList.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('overseergroup', riskForm?.overseersGroupList[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]=\"riskForm?.overseersGroupList[0]?.group_name\"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n                >{{ riskForm?.overseersGroupList[0]?.group_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                appPopover\r\n                (click)=\"overseerGroup.popover()\"\r\n                placement=\"right\"\r\n                *ngIf=\"riskForm?.overseersGroupList?.length > 1\"\r\n              >\r\n                +{{ riskForm?.overseersGroupList?.length - 1 }}\r\n              </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        <app-popover #popoverOverseer [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ul class=\"action-item\">\r\n              <li\r\n                *ngFor=\"\r\n                  let owner of riskForm?.overseersList | 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', owner)\"\r\n                      >&#xe90d;</i\r\n                    >\r\n                    {{ owner.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 #overseer [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ul class=\"action-item\">\r\n              <li\r\n                *ngFor=\"\r\n                  let owner of riskForm?.overseersList | 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', owner)\"\r\n                      >&#xe90d;</i\r\n                    >\r\n                    {{ owner.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 *ngFor=\"let data of riskForm?.overseersGroupList | slice : 1\">\r\n                <div class=\"avatar-card\">\r\n                  <span class=\"value\">\r\n                    <i class=\"icons\" (click)=\"remove('overseergroup', data)\"\r\n                      >&#xe90d;</i\r\n                    >\r\n                    {{ data.group_name }}\r\n                  </span>\r\n                </div>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n        </app-popover>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Risk Mitigation Priority -->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    [class.active]=\"false\"\r\n    [class.disabled]=\"\r\n      activeSelector && sideSelectorElements.includes(activeSelector)\r\n    \"\r\n    *ngIf=\"riskForm.addMitigation\"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"riskForm.mitigation\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/priority.svg\"\r\n        *ngIf=\"!riskForm.mitigation\"\r\n        alt=\"\"\r\n      />\r\n      <!-- <svg viewBox=\"25 25 50 50\" class=\"edit-loader\">\r\n              <circle cx=\"50\" cy=\"50\" r=\"20\" fill=\"none\" stroke=\"#1e5dd3\" stroke-width=\"3\" class=\"loader-path\"></circle>\r\n          </svg> -->\r\n      <svg\r\n        class=\"checkIcon\"\r\n        *ngIf=\"riskForm.mitigation\"\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 Mitigation Priority\r\n          <i\r\n            class=\"icons\"\r\n            [appTooltip]=\"\r\n              'This sets the priority level for the mitigation of each risk.'\r\n            \"\r\n            placement=\"bottom\"\r\n            delay=\"0\"\r\n            type=\"white\"\r\n            [tooltipMandatory]=\"true\"\r\n            >&#xe91f;</i\r\n          ></label\r\n        >\r\n\r\n        <cs-select\r\n          [(ngModel)]=\"riskForm.mitigation\"\r\n          [placeholder]=\"'Select a mitigation priority'\"\r\n          name=\"riskForm.mitigation\"\r\n        >\r\n          <cs-option\r\n            *ngFor=\"let data of mitigationDetails\"\r\n            [value]=\"data?.mitigation_id\"\r\n            [color]=\"data?.mitigation_color\"\r\n          >\r\n            {{ data.mitigation_name }}\r\n          </cs-option>\r\n        </cs-select>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Recommended Mitigation Plan -->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    *ngIf=\"riskForm?.addMitigationPlan\"\r\n  >\r\n    <div\r\n      id=\"riskSpace\"\r\n      class=\"left\"\r\n      [class.checked]=\"(riskForm.mitigationDescriptionPlan | spaceTrim) !== ''\"\r\n    >\r\n      <img\r\n        *ngIf=\"(riskForm.mitigationDescriptionPlan | spaceTrim) === ''\"\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/objectives.svg\"\r\n        alt=\"\"\r\n      />\r\n      <svg\r\n        *ngIf=\"(riskForm.mitigationDescriptionPlan | spaceTrim) !== ''\"\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 for=\"\" class=\"vx-control-panel\"\r\n          >Recommended Mitigation Plans<link\r\n            rel=\"manifest\"\r\n            href=\"./manifest.json\"\r\n          />\r\n          <i\r\n            class=\"icons\"\r\n            [appTooltip]=\"\r\n              'Specify the mitigation plan that can be undertaken to mitigate the risk.'\r\n            \"\r\n            placement=\"bottom\"\r\n            delay=\"0\"\r\n            type=\"white\"\r\n            [tooltipMandatory]=\"true\"\r\n            >&#xe91f;</i\r\n          >\r\n        </label>\r\n        <vcomply-editor\r\n          [(ngModel)]=\"riskForm.mitigationDescriptionPlan\"\r\n          [editorConfig]=\"mitigationDescriptionPlan\"\r\n          (clickOutside)=\"checkMitigationPlan()\"\r\n        >\r\n        </vcomply-editor>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Risk Label -->\r\n  <div\r\n    class=\"form-group-row\"\r\n    [class.active]=\"false\"\r\n    [class.disabled]=\"\r\n      activeSelector && sideSelectorElements.includes(activeSelector)\r\n    \"\r\n    *ngIf=\"riskForm?.addRiskLabel\"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"false\">\r\n      <!-- <img *ngIf=\"true\"\r\n              src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/oversight.svg\" alt=\"\" /> -->\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        *ngIf=\"true\"\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 LABEL\r\n          <i\r\n            class=\"icons\"\r\n            [appTooltip]=\"\r\n              'This option lets you specify if this is a newly identified risk or it is a rapidly changing risk.'\r\n            \"\r\n            placement=\"bottom\"\r\n            delay=\"0\"\r\n            type=\"white\"\r\n            [tooltipMandatory]=\"true\"\r\n            >&#xe91f;</i\r\n          ></label\r\n        >\r\n        <cs-select\r\n          [(ngModel)]=\"riskForm.riskLabelValue\"\r\n          [placeholder]=\"'Select a risk label'\"\r\n          name=\"riskForm?.riskLabelValue\"\r\n        >\r\n          <cs-option *ngFor=\"let data of riskLabelList\" [value]=\"data?.value\">\r\n            {{ data?.name }}\r\n          </cs-option>\r\n        </cs-select>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- Link with  GRC -->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    [class.active]=\"activeSelector === 'GRC'\"\r\n    [class.disabled]=\"\r\n      activeSelector &&\r\n      activeSelector !== 'GRC' &&\r\n      sideSelectorElements.includes(activeSelector)\r\n    \"\r\n    *ngIf=\"riskForm?.GRC\"\r\n  >\r\n    <div\r\n      class=\"left\"\r\n      [class.checked]=\"this.riskForm?.selectedGRCObjects?.length > 0\"\r\n    >\r\n      <img\r\n        *ngIf=\"\r\n          this.riskForm?.selectedGRCObjects?.length == 0 ||\r\n          activeSelector === 'GRC'\r\n        \"\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/link-items.svg\"\r\n        alt=\"\"\r\n      />\r\n\r\n      <svg\r\n        *ngIf=\"\r\n          this.riskForm?.selectedGRCObjects?.length > 0 &&\r\n          activeSelector !== 'GRC'\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 class=\"select\" *ngIf=\"riskForm?.selectedGRCObjects?.length === 0\">\r\n          <input\r\n            type=\"text\"\r\n            (click)=\"activateSelector('GRC', true)\"\r\n            placeholder=\"Select GRC object(s) to link with this risk.\"\r\n            readonly\r\n          />\r\n        </div>\r\n        <ng-container *ngIf=\"riskForm?.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', 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', 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 class=\"icons\" (click)=\"remove('GRC', 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<app-responsibility-centers-list\r\n  *ngIf=\"activeSelector === 'rc'\"\r\n  [responsibilityCentersList]=\"responsibilityCentersList\"\r\n  [selectedResponsibilityCenters]=\"riskForm.responsibilityCentersList\"\r\n  [rcIdKey]=\"'rc_id'\"\r\n  (saveSelectedList)=\"saveSelectedRCList($event)\"\r\n  (closeRcList)=\"activateSelector('rc', false)\"\r\n  [singularText]=\"'Responsibility Center selected'\"\r\n  [pluralText]=\"'Responsibility Centers selected'\"\r\n>\r\n</app-responsibility-centers-list>\r\n\r\n<app-owner-list\r\n  *ngIf=\"!featureflag_groups && activeSelector === 'owner'\"\r\n  [usersList]=\"ownersList\"\r\n  [selectedUsers]=\"riskForm.ownersList\"\r\n  [userIdKey]=\"'member_id'\"\r\n  [itemEmailKey]=\"'member_email'\"\r\n  [itemNameKey]=\"'member_name'\"\r\n  (saveSelectedList)=\"saveSelectedOwnersList($event)\"\r\n  [nonRemovableUsersList]=\"nonRemovableUsersList\"\r\n  (closeUsersList)=\"activateSelector('owner', false)\"\r\n  [singularText]=\"'User selected'\"\r\n  [pluralText]=\"'Users selected'\"\r\n></app-owner-list>\r\n\r\n<user-group-list\r\n  *ngIf=\"featureflag_groups && activeSelector === 'owner'\"\r\n  [userlist]=\"ownersList\"\r\n  [selectedUsers]=\"riskForm.ownersList\"\r\n  [groupList]=\"groupsList\"\r\n  [nonRemovableUserIds]=\"nonRemovableUsersList\"\r\n  (save)=\"saveSelectedOwnersList($event)\"\r\n  [selectedGroups]=\"riskForm.groupsList\"\r\n  (cancel)=\"activateSelector('owner', false)\"\r\n  [groupEnabled]=\"true\"\r\n  [featureflag]=\"featureflag_groups\"\r\n>\r\n</user-group-list>\r\n\r\n<user-group-list\r\n  *ngIf=\"featureflag_groups && activeSelector === 'overseer'\"\r\n  [userlist]=\"overseersList\"\r\n  [selectedUsers]=\"riskForm.overseersList\"\r\n  [groupList]=\"overseersGroupList\"\r\n  (save)=\"saveSelectedOverseersList($event)\"\r\n  [selectedGroups]=\"riskForm.overseersGroupList\"\r\n  (cancel)=\"activateSelector('overseer', false)\"\r\n  [groupEnabled]=\"true\"\r\n  [featureflag]=\"featureflag_groups\"\r\n>\r\n</user-group-list>\r\n\r\n<app-category-list\r\n  *ngIf=\"activeSelector === 'category'\"\r\n  [categoryList]=\"categoryList\"\r\n  [selectedCategory]=\"riskForm.category\"\r\n  (saveSelectedCategory)=\"saveSelectedCategory($event)\"\r\n  (closeCategoriesList)=\"activateSelector('category', false)\"\r\n></app-category-list>\r\n<app-owner-list\r\n  *ngIf=\"!featureflag_groups && activeSelector === 'overseer'\"\r\n  [usersList]=\"overseersList\"\r\n  [selectedUsers]=\"riskForm.overseersList\"\r\n  [userIdKey]=\"'member_id'\"\r\n  [itemNameKey]=\"'member_name'\"\r\n  [itemEmailKey]=\"'member_email'\"\r\n  (saveSelectedList)=\"saveSelectedOverseersList($event)\"\r\n  (closeUsersList)=\"activateSelector('overseer', false)\"\r\n  [singularText]=\"'User selected'\"\r\n  [pluralText]=\"'Users selected'\"\r\n>\r\n</app-owner-list>\r\n<app-loader-inline *ngIf=\"loader\"></app-loader-inline>\r\n\r\n<app-frequency-dialog-container\r\n  *ngIf=\"activeSelector === 'frequency'\"\r\n  [frequencyDetails]=\"frequencyDetails\"\r\n  (selectedFrequency)=\"frequencyData($event)\"\r\n  (closeFrequency)=\"activateSelector('frequency', false)\"\r\n>\r\n</app-frequency-dialog-container>\r\n\r\n<app-grc-object-list\r\n  *ngIf=\"activeSelector === 'GRC'\"\r\n  [grcObject]=\"grcList\"\r\n  [selectedGRC]=\"riskForm.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($event)\"\r\n  (closeOtherGRC)=\"activateSelector('GRC', false)\"\r\n></app-grc-object-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>\r\n</app-smiley-dialog-inline>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::ng-deep .workflw-risk{display:block;position:relative}\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:#ffffff;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:#ffffff}::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:#ffffff;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{-webkit-appearance:none;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:#ffffff;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:#ffffff;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:#ffffff;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:#ffffff}::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:#ffffff;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:#ffffff;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:#ffffff;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:#ffffff;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:#000000;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:rgba(0,0,0,.3)}@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:#ffffff}::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%,#747576 1%,#747576 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);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:#ffffff}::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%,#f31c39 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);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%,#34aa44 1%,#34aa44 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);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%,#1e5dd3 1%,#1e5dd3 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);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%,#f6882f 1%,#f6882f 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);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%,#7aa6f7 1%,#7aa6f7 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);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}\n"] }]
+            args: [{ selector: 'app-workflow-risk', template: "<div class=\"workflw-risk\" *ngIf=\"!showSmiley\">\r\n  <!-- Risk Type -->\r\n  <div class=\"form-group-row\" [class.active]=\"false\" [class.disabled]=\"false\">\r\n    <div class=\"left checked\">\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 Type <span class=\"required\">*</span></label\r\n        >\r\n        <div class=\"risk-type-field\">\r\n          <div\r\n            class=\"type-item\"\r\n            [class.active]=\"riskForm?.riskType === 'NORMAL'\"\r\n          >\r\n            <button\r\n              [class.disabled]=\"!riskTypeChangeAllowed\"\r\n              (click)=\"changeRisk('NORMAL')\"\r\n            >\r\n              ADD TO RISK REGISTER\r\n            </button>\r\n            <i\r\n              class=\"icons info\"\r\n              [appTooltip]=\"\r\n                'This option lets you add a risk directly to the Risk Register. The risk owners will receive an alert and they can begin the the risk assessment process.'\r\n              \"\r\n              placement=\"bottom-right\"\r\n              delay=\"0\"\r\n              type=\"white\"\r\n              [tooltipMandatory]=\"true\"\r\n              >&#xe932;</i\r\n            >\r\n          </div>\r\n          <div\r\n            class=\"type-item\"\r\n            [class.active]=\"riskForm?.riskType === 'REPORTED'\"\r\n          >\r\n            <button\r\n              [class.disabled]=\"!riskTypeChangeAllowed\"\r\n              (click)=\"changeRisk('REPORTED')\"\r\n            >\r\n              REPORT A RISK\r\n            </button>\r\n            <i\r\n              class=\"icons info\"\r\n              [appTooltip]=\"\r\n                'This options lets you report a risk and assign it to the risk owners. The risk owners will have the option to either add the risk to the Risk Register or flag it for a follow-up at a later date.'\r\n              \"\r\n              placement=\"bottom-right\"\r\n              delay=\"0\"\r\n              type=\"white\"\r\n              [tooltipMandatory]=\"true\"\r\n              >&#xe932;</i\r\n            >\r\n          </div>\r\n          <span class=\"background-glider\"></span>\r\n        </div>\r\n        <p *ngIf=\"false\" class=\"error-message\">Add a risk type</p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Risk Name -->\r\n  <div\r\n    class=\"form-group-row\"\r\n    [class.active]=\"false\"\r\n    [class.disabled]=\"\r\n      activeSelector &&\r\n      activeSelector !== 'name' &&\r\n      sideSelectorElements.includes(activeSelector)\r\n    \"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"riskForm.title\">\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          riskForm?.title?.trim()?.length === 0 || activeSelector === 'name'\r\n        \"\r\n      />\r\n\r\n      <svg\r\n        *ngIf=\"riskForm?.title?.trim()?.length > 0 && activeSelector !== 'name'\"\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          >WHAT RISK WOULD YOU LIKE TO MANAGE?\r\n          <span class=\"required\">*</span></label\r\n        >\r\n        <input\r\n          spaceTrim\r\n          type=\"text\"\r\n          (keydown)=\"activeSelector = 'name'\"\r\n          (focusin)=\"activateSelector('name', true)\"\r\n          (focusout)=\"activateSelector('name', false)\"\r\n          [(ngModel)]=\"riskForm.title\"\r\n          placeholder=\"Add a risk name\"\r\n          *ngIf=\"riskForm?.title?.trim() == '' || activeSelector === 'name'\"\r\n        />\r\n        <div\r\n          class=\"selected\"\r\n          *ngIf=\"riskForm?.title?.trim() != '' && activeSelector !== 'name'\"\r\n        >\r\n          <div class=\"chip-container\">\r\n            <span class=\"value\">{{ riskForm.title }}</span>\r\n          </div>\r\n          <button\r\n            class=\"edit\"\r\n            (click)=\"activateSelector('name', true)\"\r\n            type=\"button\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i> Edit\r\n          </button>\r\n        </div>\r\n        <p *ngIf=\"submitted && !riskForm.title\" class=\"error-message\">\r\n          Add a risk name\r\n        </p>\r\n        <vcomply-editor\r\n          [(ngModel)]=\"riskForm.description\"\r\n          [editorConfig]=\"description\"\r\n          (clickOutside)=\"checkDescription()\"\r\n        ></vcomply-editor>\r\n        <p\r\n          *ngIf=\"\r\n            submitted &&\r\n            riskForm.riskType === 'REPORTED' &&\r\n            !riskForm?.description?.trim()?.length\r\n          \"\r\n          class=\"error-message\"\r\n        >\r\n          Add a risk description\r\n        </p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Risk Manager -->\r\n  <div\r\n    class=\"form-group-row\"\r\n    [class.active]=\"activeSelector === 'owner'\"\r\n    [class.disabled]=\"\r\n      activeSelector &&\r\n      activeSelector !== 'owner' &&\r\n      sideSelectorElements.includes(activeSelector)\r\n    \"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"riskForm?.ownersList?.length > 0\">\r\n      <img\r\n        *ngIf=\"riskForm?.ownersList?.length == 0 || activeSelector === 'owner'\"\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/im-creating.svg\"\r\n        alt=\"\"\r\n      />\r\n\r\n      <svg\r\n        *ngIf=\"riskForm?.ownersList?.length > 0 && activeSelector !== 'owner'\"\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          >WHO IS RESPONSIBLE FOR MANAGING THIS RISK?\r\n          <span class=\"required\">*</span>\r\n          <i\r\n            class=\"icons\"\r\n            [appTooltip]=\"\r\n              'This is the person that is responsible for managing the risk.'\r\n            \"\r\n            placement=\"bottom\"\r\n            delay=\"0\"\r\n            type=\"white\"\r\n            [tooltipMandatory]=\"true\"\r\n            >&#xe91f;</i\r\n          >\r\n        </label>\r\n        <div class=\"select\" *ngIf=\"riskForm?.ownersList?.length == 0\">\r\n          <input\r\n            type=\"text\"\r\n            (click)=\"activateSelector('owner', true)\"\r\n            placeholder=\"Select Risk Manager(s)\"\r\n            readonly\r\n          />\r\n        </div>\r\n\r\n        <div\r\n          class=\"selected\"\r\n          *ngIf=\"\r\n            riskForm?.ownersList?.length > 0 || riskForm?.groupsList.length > 0\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              *ngIf=\"\r\n                riskForm?.ownersList\r\n                  | shortMerge : nonRemovableUsersList as ownerList\r\n              \"\r\n            >\r\n              <ng-container *ngFor=\"let owner of ownerList?.slice(0, 1)\">\r\n                <i\r\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                  *ngIf=\"!nonRemovableUsersList.includes(owner?.member_id)\"\r\n                  (click)=\"remove('owner', owner)\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"owner?.member_name\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ owner?.member_name }}</span\r\n                >\r\n              </ng-container>\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)=\"popoverOwner.popover()\"\r\n              placement=\"left\"\r\n              *ngIf=\"riskForm?.ownersList?.length > 1\"\r\n            >\r\n              +{{ riskForm?.ownersList?.slice(1).length }}\r\n            </button>\r\n          </div>\r\n\r\n          <!-- <div class=\"chip-container\" *ngIf=\"!featureflag_groups\" [class.more-one]=\"riskForm?.ownersList?.length>1\" [class.plus]=\"riskForm?.ownersList?.length>2\">\r\n                      <ng-container *ngIf=\"(riskForm?.ownersList|shortMerge : nonRemovableUsersList) as ownerList\">\r\n                          <span class=\"chip\" *ngFor=\"let owner of ownerList?.slice(0,2)\"><i class=\"icons\" *ngIf=\"!nonRemovableUsersList.includes(owner?.member_id)\" (click)=\"remove('owner',owner)\">&#xe90d;</i> {{owner?.member_name}}</span>\r\n                          <button class=\"count\" *ngIf=\"riskForm?.ownersList?.length > 2\" type=\"button\" appPopover (click)=\"popoverOwner.popover()\" placement=\"right\">+{{riskForm?.ownersList?.slice(2).length}}</button>\r\n                      </ng-container>\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            >\r\n              <i\r\n                class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                *ngIf=\"\r\n                  !nonRemovableUsersList.includes(\r\n                    riskForm?.ownersList[0]?.member_id\r\n                  )\r\n                \"\r\n                (click)=\"remove('owner', riskForm?.ownersList[0])\"\r\n                >&#xe9ae;</i\r\n              >\r\n              <span\r\n                class=\"chipName vx-fs-11 vx-label-txt\"\r\n                [appTooltip]=\"riskForm?.ownersList[0]?.member_name\"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n                >{{ riskForm?.ownersList[0]?.member_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 greenBg\"\r\n                appPopover\r\n                (click)=\"popoverUser.popover()\"\r\n                placement=\"right\"\r\n                *ngIf=\"riskForm?.ownersList.length > 1\"\r\n              >\r\n                +{{ riskForm?.ownersList.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=\"riskForm?.groupsList.length > 0\"\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=\"riskForm?.groupsList.length > 0\"\r\n            >\r\n              <i\r\n                class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                (click)=\"remove('Ownergroup', riskForm?.groupsList[0])\"\r\n                >&#xe9ae;</i\r\n              >\r\n              <span\r\n                class=\"chipName vx-fs-11 vx-label-txt\"\r\n                [appTooltip]=\"riskForm?.groupsList[0]?.group_name\"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n                >{{ riskForm?.groupsList[0]?.group_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                appPopover\r\n                (click)=\"group.popover()\"\r\n                placement=\"right\"\r\n                *ngIf=\"riskForm?.groupsList?.length > 1\"\r\n              >\r\n                +{{ riskForm?.groupsList?.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\" >\r\n                        <i class=\"icons cross vx-mr-1\" *ngIf=\"!nonRemovableUsersList.includes(riskForm?.ownersList[0]?.member_id)\" (click)=\"remove('owner',riskForm?.ownersList[0])\" >&#xe90d;</i>\r\n                          <span class=\"chip\">\r\n                              <span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">{{riskForm?.ownersList[0]?.member_name}}</span></span>\r\n                          <button *ngIf=\"riskForm?.ownersList.length > 1\" class=\"count user\" appPopover (click)=\"popoverUser.popover()\" placement=\"right\">+{{riskForm?.ownersList.length - 1}}</button>\r\n                      </div>\r\n                      <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"riskForm?.groupsList.length > 0\" >&</span>\r\n                      <div class=\"chip-inner\" *ngIf=\"riskForm?.groupsList.length > 0\" >\r\n                        <i class=\"icons cross vx-mr-1\" (click)=\"remove('Ownergroup', riskForm?.groupsList[0])\" >&#xe90d;</i>\r\n                          <span class=\"chip\" [appTooltip]=\"riskForm?.groupsList[0]?.group_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">{{riskForm?.groupsList[0]?.group_name}}</span></span>\r\n                          <button *ngIf=\"riskForm?.groupsList?.length > 1\" class=\"count\" appPopover (click)=\"group.popover()\" placement=\"right\">+{{riskForm?.groupsList?.length -1}}</button>\r\n                      </div>\r\n                  </div> -->\r\n\r\n          <button\r\n            *ngIf=\"activeSelector !== 'owner'\"\r\n            class=\"edit\"\r\n            type=\"button\"\r\n            (click)=\"activateSelector('owner', true)\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i> Edit\r\n          </button>\r\n        </div>\r\n        <p\r\n          *ngIf=\"submitted && riskForm?.ownersList?.length === 0\"\r\n          class=\"error-message\"\r\n        >\r\n          Select Owner(s) for this risk.\r\n        </p>\r\n        <app-popover #popoverOwner [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ng-container\r\n              *ngIf=\"\r\n                riskForm?.ownersList\r\n                  | shortMerge : nonRemovableUsersList as ownerPop\r\n              \"\r\n            >\r\n              <ul class=\"action-item\">\r\n                <li *ngFor=\"let owner of ownerPop | slice : 1; let j = index\">\r\n                  <div class=\"avatar-card\">\r\n                    <span class=\"value\">\r\n                      <i\r\n                        *ngIf=\"\r\n                          !nonRemovableUsersList.includes(owner?.member_id)\r\n                        \"\r\n                        class=\"icons\"\r\n                        (click)=\"remove('owner', owner)\"\r\n                        >&#xe90d;</i\r\n                      >\r\n                      {{ owner.member_name }}\r\n                    </span>\r\n                  </div>\r\n                </li>\r\n              </ul>\r\n            </ng-container>\r\n          </div>\r\n        </app-popover>\r\n        <app-popover #popoverUser [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ng-container\r\n              *ngIf=\"\r\n                riskForm?.ownersList\r\n                  | shortMerge : nonRemovableUsersList as ownerPop\r\n              \"\r\n            >\r\n              <ul class=\"action-item\">\r\n                <li *ngFor=\"let owner of ownerPop | slice : 1; let j = index\">\r\n                  <div class=\"avatar-card\">\r\n                    <span class=\"value\">\r\n                      <i\r\n                        *ngIf=\"\r\n                          !nonRemovableUsersList.includes(owner?.member_id)\r\n                        \"\r\n                        class=\"icons\"\r\n                        (click)=\"remove('owner', owner)\"\r\n                        >&#xe90d;</i\r\n                      >\r\n                      {{ owner.member_name }}\r\n                    </span>\r\n                  </div>\r\n                </li>\r\n              </ul>\r\n            </ng-container>\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 *ngFor=\"let data of riskForm?.groupsList | slice : 1\">\r\n                <div class=\"avatar-card\">\r\n                  <span class=\"value\">\r\n                    <i class=\"icons\" (click)=\"remove('Ownergroup', data)\"\r\n                      >&#xe90d;</i\r\n                    >\r\n                    {{ data.group_name }}\r\n                  </span>\r\n                </div>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n        </app-popover>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Responsibility Center -->\r\n  <div\r\n    class=\"form-group-row\"\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]=\"riskForm?.responsibilityCentersList?.length > 0\"\r\n    >\r\n      <img\r\n        *ngIf=\"\r\n          riskForm?.responsibilityCentersList?.length == 0 ||\r\n          activeSelector === 'rc'\r\n        \"\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/responsibility-center.svg\"\r\n        alt=\"\"\r\n      />\r\n\r\n      <svg\r\n        *ngIf=\"\r\n          riskForm?.responsibilityCentersList?.length > 0 &&\r\n          activeSelector !== 'rc'\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\"\r\n          >Responsibility Center <span class=\"required\">*</span>\r\n          <i\r\n            class=\"icons\"\r\n            [appTooltip]=\"\r\n              'Responsibility Centers represent the corporate and operational infrastructure of an organization. One or more Responsibility Centers can be exposed to a risk and accordingly, the risk must be assessed against each Responsibility Center.'\r\n            \"\r\n            placement=\"bottom\"\r\n            delay=\"0\"\r\n            type=\"white\"\r\n            [tooltipMandatory]=\"true\"\r\n            >&#xe91f;</i\r\n          >\r\n        </label>\r\n        <div\r\n          class=\"select\"\r\n          *ngIf=\"riskForm?.responsibilityCentersList?.length == 0\"\r\n        >\r\n          <input\r\n            type=\"text\"\r\n            (click)=\"activateSelector('rc', true)\"\r\n            placeholder=\"Select Responsibility Center(s)\"\r\n            readonly\r\n          />\r\n        </div>\r\n        <div\r\n          class=\"selected\"\r\n          *ngIf=\"riskForm?.responsibilityCentersList?.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 rcName of riskForm?.responsibilityCentersList?.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('rc', rcName)\"\r\n                >&#xe9ae;</i\r\n              >\r\n              <span\r\n                class=\"chipName vx-fs-11 vx-label-txt\"\r\n                [appTooltip]=\"rcName.item_name\"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n                >{{ rcName.item_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)=\"popoverRC.popover()\"\r\n              placement=\"left\"\r\n              *ngIf=\"riskForm?.responsibilityCentersList?.length > 1\"\r\n            >\r\n              +{{ riskForm?.responsibilityCentersList?.slice(1).length }}\r\n            </button>\r\n          </div>\r\n\r\n          <!-- <div class=\"chip-container\" [class.more-one]=\"riskForm?.responsibilityCentersList?.length>1\" [class.plus]=\"riskForm?.responsibilityCentersList?.length>2\">\r\n                      <span class=\"chip\" *ngFor=\"let rcName of riskForm?.responsibilityCentersList?.slice(0,2)\"><i class=\"icons\" (click)=\"remove('rc',rcName)\">&#xe90d;</i> {{rcName.item_name}}</span>\r\n                      <button class=\"count\" *ngIf=\"riskForm?.responsibilityCentersList?.length > 2\" type=\"button\" appPopover (click)=\"popoverRC.popover()\" placement=\"right\">+{{riskForm?.responsibilityCentersList?.slice(2).length}}</button>\r\n                  </div> -->\r\n\r\n          <button\r\n            *ngIf=\"activeSelector !== 'rc'\"\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        <p\r\n          *ngIf=\"submitted && riskForm?.responsibilityCentersList?.length == 0\"\r\n          class=\"error-message\"\r\n        >\r\n          Assign this risk to a Responsibility Center(s)\r\n        </p>\r\n        <app-popover #popoverRC [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ul class=\"action-item\">\r\n              <li\r\n                *ngFor=\"\r\n                  let rcName of riskForm?.responsibilityCentersList | 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', rcName)\">&#xe90d;</i>\r\n                    {{ rcName.item_name }}\r\n                  </span>\r\n                </div>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n        </app-popover>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Risk Frequency -->\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    *ngIf=\"riskForm?.riskType !== 'REPORTED'\"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"riskForm?.category?.selectedCategory\">\r\n      <img\r\n        *ngIf=\"\r\n          !riskForm?.frequency_details?.frequency ||\r\n          riskForm?.frequency_details?.frequency === '' ||\r\n          activeSelector === 'frequency'\r\n        \"\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\"\r\n        alt=\"\"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        *ngIf=\"\r\n          (riskForm?.frequency_details?.frequency &&\r\n            riskForm?.frequency_details?.frequency !== '') ||\r\n          activeSelector !== 'frequency'\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\"\r\n          >HOW OFTEN DOES THIS RISK NEED TO BE REASSESSED?\r\n          <span class=\"required\">*</span>\r\n          <i\r\n            class=\"icons\"\r\n            [appTooltip]=\"\r\n              'The option lets you specify the risk reassessment frequency.'\r\n            \"\r\n            placement=\"bottom\"\r\n            delay=\"0\"\r\n            type=\"white\"\r\n            [tooltipMandatory]=\"true\"\r\n            >&#xe91f;</i\r\n          ></label\r\n        >\r\n        <div\r\n          class=\"select\"\r\n          *ngIf=\"!riskForm?.frequency_details?.frequency\"\r\n          (click)=\"activateSelector('frequency', true)\"\r\n        >\r\n          <input\r\n            type=\"text\"\r\n            placeholder=\"Set a Reassessment Frequency\"\r\n            readonly\r\n          />\r\n        </div>\r\n        <div\r\n          class=\"selected button-sec\"\r\n          *ngIf=\"riskForm?.frequency_details?.frequency\"\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            class=\"edit\"\r\n            type=\"button\"\r\n            (click)=\"activateSelector('frequency', true)\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i> Edit\r\n          </button>\r\n        </div>\r\n        <div class=\"vx-mt-1\">\r\n          <app-cs-switch\r\n            [ngValue]=\"riskForm?.enableAllFutureBusinessCycle\"\r\n            (ngValueChange)=\"riskForm.enableAllFutureBusinessCycle = $event\"\r\n            >DO YOU WANT THIS TO SHOW IN ALL FUTURE BUSINESS CYCLES?\r\n          </app-cs-switch>\r\n        </div>\r\n        <p\r\n          *ngIf=\"\r\n            submitted &&\r\n            (!riskForm?.frequency_details?.frequency ||\r\n              riskForm?.frequency_details?.frequency === '')\r\n          \"\r\n          class=\"error-message\"\r\n        >\r\n          Please select the frequency of occurrence for this risk.\r\n        </p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Risk Category -->\r\n  <div\r\n    class=\"form-group-row\"\r\n    [class.active]=\"activeSelector === 'category'\"\r\n    [class.disabled]=\"\r\n      activeSelector &&\r\n      activeSelector !== 'category' &&\r\n      sideSelectorElements.includes(activeSelector)\r\n    \"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"riskForm?.category?.selectedCategory\">\r\n      <img\r\n        *ngIf=\"\r\n          !riskForm?.category?.selectedCategory || activeSelector === 'category'\r\n        \"\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\"\r\n        alt=\"\"\r\n      />\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        *ngIf=\"\r\n          riskForm?.category?.selectedCategory && activeSelector !== 'category'\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\"\r\n          >Risk Category\r\n          <i\r\n            class=\"icons\"\r\n            [appTooltip]=\"'Risk Categories are used to group similar risks.'\"\r\n            placement=\"bottom\"\r\n            delay=\"0\"\r\n            type=\"white\"\r\n            [tooltipMandatory]=\"true\"\r\n            >&#xe91f;</i\r\n          ></label\r\n        >\r\n        <div class=\"select\" *ngIf=\"!riskForm?.category?.selectedCategory\">\r\n          <input\r\n            type=\"text\"\r\n            (click)=\"activateSelector('category', true)\"\r\n            placeholder=\"Select Risk Category\"\r\n            readonly\r\n          />\r\n        </div>\r\n        <div class=\"selected\" *ngIf=\"riskForm?.category?.selectedCategory\">\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('category', riskForm.category.selectedCategory)\"\r\n              >&#xe9ae;</i\r\n            >\r\n            <span\r\n              class=\"chipName vx-fs-11 vx-label-txt\"\r\n              [appTooltip]=\"riskForm?.category?.selectedCategory?.category_name\"\r\n              placement=\"bottom-left\"\r\n              delay=\"0\"\r\n              type=\"black\"\r\n              [tooltipMandatory]=\"false\"\r\n              >{{ riskForm?.category?.selectedCategory?.category_name }}</span\r\n            >\r\n          </div>\r\n\r\n          <!-- <div class=\"chip-container\">\r\n                      <span class=\"chip\"><i class=\"icons\" (click)=\"remove('category',riskForm.category.selectedCategory)\">&#xe90d;</i>{{riskForm?.category?.selectedCategory?.category_name}}</span>\r\n                  </div> -->\r\n          <button\r\n            *ngIf=\"activeSelector !== 'category'\"\r\n            class=\"edit\"\r\n            type=\"button\"\r\n            (click)=\"activateSelector('category', true)\"\r\n          >\r\n            <i class=\"icons\">&#xe9ba;</i> Edit\r\n          </button>\r\n        </div>\r\n      </div>\r\n      <ng-container *ngIf=\"riskForm?.categoryCustomTags?.length > 0\">\r\n        <div\r\n          class=\"vx-form-group\"\r\n          *ngFor=\"let tag of riskForm.categoryCustomTags\"\r\n        >\r\n          <label class=\"vx-control-panel\">{{ tag.custom_tag_name }}</label>\r\n          <input\r\n            type=\"text\"\r\n            [(ngModel)]=\"tag.custom_tag_value\"\r\n            [placeholder]=\"tag.custom_tag_name\"\r\n          />\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Recommended Mitigation Plan -->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    [class.active]=\"false\"\r\n    [class.disabled]=\"\r\n      activeSelector &&\r\n      activeSelector !== 'mitigation' &&\r\n      sideSelectorElements.includes(activeSelector)\r\n    \"\r\n  >\r\n    <div\r\n      id=\"riskSpace\"\r\n      class=\"left\"\r\n      [class.checked]=\"(riskForm.mitigationDescriptionPlan | spaceTrim) !== ''\"\r\n    >\r\n      <img\r\n        *ngIf=\"(riskForm.mitigationDescriptionPlan | spaceTrim) === ''\"\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/objectives.svg\"\r\n        alt=\"\"\r\n      />\r\n      <svg\r\n        *ngIf=\"(riskForm.mitigationDescriptionPlan | spaceTrim) !== ''\"\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 for=\"\" class=\"vx-control-panel\"\r\n          >Recommended Mitigation Plans<link\r\n            rel=\"manifest\"\r\n            href=\"./manifest.json\"\r\n          />\r\n          <i\r\n            class=\"icons\"\r\n            [appTooltip]=\"\r\n              'Specify the mitigation plan that can be undertaken to mitigate the risk.'\r\n            \"\r\n            placement=\"bottom\"\r\n            delay=\"0\"\r\n            type=\"white\"\r\n            [tooltipMandatory]=\"true\"\r\n            >&#xe91f;</i\r\n          >\r\n        </label>\r\n        <vcomply-editor\r\n          [(ngModel)]=\"riskForm.mitigationDescriptionPlan\"\r\n          [editorConfig]=\"mitigationDescriptionPlan\"\r\n          (clickOutside)=\"checkMitigationPlan()\"\r\n        >\r\n        </vcomply-editor>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Assessment Deadline -->\r\n  <!-- !settingsInfo?.assessment_deadline_enable && riskForm?.riskType !== 'REPORTED' && ((currentTimeStamp < editDetails?.assessment_date_timestamp) || !editDetails?.IfAssessmentDone ) -->\r\n  <div\r\n    class=\"form-group-row\"\r\n    [class.active]=\"activeSelector === 'assessment'\"\r\n    id=\"deadline\"\r\n    [class.disabled]=\"\r\n      activeSelector &&\r\n      activeSelector !== 'assessment' &&\r\n      sideSelectorElements.includes(activeSelector)\r\n    \"\r\n    *ngIf=\"false\"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"riskForm?.assessment_deadline_days >= 1\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\"\r\n        *ngIf=\"\r\n          riskForm?.assessment_deadline_days < 1 ||\r\n          activeSelector === 'assessment'\r\n        \"\r\n        alt=\"\"\r\n      />\r\n      <svg\r\n        class=\"checkIcon\"\r\n        *ngIf=\"\r\n          riskForm?.assessment_deadline_days >= 1 &&\r\n          activeSelector !== 'assessment'\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\"\r\n          >Assessment Deadline <span class=\"required\">*</span>\r\n          <i\r\n            class=\"icons\"\r\n            [appTooltip]=\"\r\n              'This is the date that the inherent risk assessment must be completed by.'\r\n            \"\r\n            placement=\"bottom\"\r\n            delay=\"0\"\r\n            type=\"white\"\r\n            [tooltipMandatory]=\"true\"\r\n            >&#xe91f;</i\r\n          ></label\r\n        >\r\n        <div class=\"input\">\r\n          <span class=\"text\">Set Number of days</span>\r\n          <div class=\"input-group counter\">\r\n            <button (click)=\"changeRiskAssessment('subtract')\">\r\n              <i class=\"icons\">&#xea53;</i>\r\n            </button>\r\n            <input\r\n              type=\"number\"\r\n              [(ngModel)]=\"riskForm.assessment_deadline_days\"\r\n              (focusin)=\"activateSelector('assessment', true)\"\r\n              (focusout)=\"activateSelector('assessment', false)\"\r\n              name=\"riskAssessmentDeadline\"\r\n              validateAssessment\r\n              #deadline=\"ngModel\"\r\n              (ngModelChange)=\"changeRiskAssessmentDeadline($event)\"\r\n              onkeydown=\"return event.keyCode !== 190\"\r\n              min=\"0\"\r\n              oninput=\"this.value = Math.abs(this.value)\"\r\n            />\r\n            <button (click)=\"changeRiskAssessment('add')\">\r\n              <i class=\"icons\">&#xe915;</i>\r\n            </button>\r\n          </div>\r\n        </div>\r\n        <p\r\n          *ngIf=\"submitted && riskForm?.assessment_deadline_days < 1\"\r\n          class=\"error-message\"\r\n        >\r\n          Enter a value greater than 0.\r\n        </p>\r\n        <label\r\n          class=\"vx-control-panel\"\r\n          *ngIf=\"riskForm?.assessment_deadline_days >= 1\"\r\n        >\r\n          This risk assessment needs to be completed by\r\n          {{ date | date : \"dd MMM yyyy\" }}\r\n        </label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!--Risk Owner-->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    [class.active]=\"false\"\r\n    [class.disabled]=\"\r\n      activeSelector &&\r\n      activeSelector !== 'riskowner' &&\r\n      sideSelectorElements.includes(activeSelector)\r\n    \"\r\n    *ngIf=\"riskForm.addRiskOwner\"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"riskForm.risk_owner\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/owner.svg\"\r\n        alt=\"im\"\r\n        *ngIf=\"\r\n          riskForm?.risk_owner?.trim()?.length === 0 ||\r\n          activeSelector === 'riskowner'\r\n        \"\r\n      />\r\n\r\n      <svg\r\n        *ngIf=\"\r\n          riskForm?.risk_owner?.trim()?.length > 0 &&\r\n          activeSelector !== 'riskowner'\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 for=\"\" class=\"vx-control-panel\"\r\n          >Risk Owner<link rel=\"manifest\" href=\"./manifest.json\" />\r\n          <i\r\n            class=\"icons\"\r\n            appTooltip=\"This is either a person, department owner or a functional role within the organization that owns the risk. Example: For IT risk, the Risk Owner could be the 'Director of IT & Security.'\"\r\n            placement=\"bottom\"\r\n            delay=\"0\"\r\n            type=\"white\"\r\n            [tooltipMandatory]=\"true\"\r\n            >&#xe91f;</i\r\n          >\r\n        </label>\r\n        <input\r\n          spaceTrim\r\n          type=\"text\"\r\n          (keydown)=\"activeSelector = 'riskowner'\"\r\n          (focusin)=\"activateSelector('riskowner', true)\"\r\n          (focusout)=\"activateSelector('riskowner', false)\"\r\n          [(ngModel)]=\"riskForm.risk_owner\"\r\n          placeholder=\"Specify the name of the person, department head or functional role that owns this risk\"\r\n          *ngIf=\"\r\n            riskForm?.risk_owner?.trim() == '' || activeSelector === 'riskowner'\r\n          \"\r\n        />\r\n        <div\r\n          class=\"selected\"\r\n          *ngIf=\"\r\n            riskForm?.risk_owner?.trim() != '' && activeSelector !== 'riskowner'\r\n          \"\r\n        >\r\n          <div class=\"chip-container\">\r\n            <span class=\"value\">{{ riskForm.risk_owner }}</span>\r\n          </div>\r\n          <button\r\n            class=\"edit\"\r\n            (click)=\"activateSelector('riskowner', true)\"\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  <!-- Risk Overseer -->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    [class.active]=\"activeSelector === 'overseer'\"\r\n    [class.disabled]=\"\r\n      activeSelector &&\r\n      activeSelector !== 'overseer' &&\r\n      sideSelectorElements.includes(activeSelector)\r\n    \"\r\n    *ngIf=\"riskForm.addOverseer\"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"riskForm?.overseersList?.length > 0\">\r\n      <img\r\n        *ngIf=\"\r\n          riskForm?.overseersList?.length == 0 || activeSelector === 'overseer'\r\n        \"\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/oversight.svg\"\r\n        alt=\"\"\r\n      />\r\n      <svg\r\n        class=\"checkIcon\"\r\n        *ngIf=\"\r\n          riskForm?.overseersList?.length > 0 && activeSelector !== 'overseer'\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\"\r\n          >Risk Oversight<i\r\n            class=\"icons\"\r\n            [appTooltip]=\"\r\n              'This is the person that is responsible for overseeing the risk but who is not responsible for managing the risk.'\r\n            \"\r\n            placement=\"bottom\"\r\n            delay=\"0\"\r\n            type=\"white\"\r\n            [tooltipMandatory]=\"true\"\r\n            >&#xe91f;</i\r\n          ></label\r\n        >\r\n        <div\r\n          class=\"select\"\r\n          *ngIf=\"\r\n            riskForm?.overseersList?.length == 0 &&\r\n            riskForm?.overseersGroupList?.length == 0\r\n          \"\r\n        >\r\n          <input\r\n            type=\"text\"\r\n            (click)=\"activateSelector('overseer', true)\"\r\n            placeholder=\"Select Risk Oversight(s)\"\r\n            readonly\r\n          />\r\n        </div>\r\n        <div\r\n          class=\"selected\"\r\n          *ngIf=\"\r\n            riskForm?.overseersList?.length > 0 ||\r\n            riskForm?.overseersGroupList.length > 0\r\n          \"\r\n        >\r\n          <ng-container *ngIf=\"!featureflag_groups\">\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 owner of riskForm?.overseersList?.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('overseer', owner)\"\r\n                  >&#xe9ae;</i\r\n                >\r\n                <span\r\n                  class=\"chipName vx-fs-11 vx-label-txt\"\r\n                  [appTooltip]=\"owner.member_name\"\r\n                  placement=\"bottom-left\"\r\n                  delay=\"0\"\r\n                  type=\"black\"\r\n                  [tooltipMandatory]=\"false\"\r\n                  >{{ owner.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)=\"popoverOverseer.popover()\"\r\n                placement=\"right\"\r\n                *ngIf=\"riskForm?.overseersList?.length > 1\"\r\n              >\r\n                +{{ riskForm?.overseersList?.slice(1).length }}\r\n              </button>\r\n            </div>\r\n          </ng-container>\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            >\r\n              <i\r\n                class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n                (click)=\"remove('overseer', riskForm?.overseersList[0])\"\r\n                >&#xe9ae;</i\r\n              >\r\n              <span\r\n                class=\"chipName vx-fs-11 vx-label-txt\"\r\n                [appTooltip]=\"riskForm?.overseersList[0]?.member_name\"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n                *ngIf=\"riskForm?.overseersList.length > 0\"\r\n                >{{ riskForm?.overseersList[0]?.member_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 greenBg\"\r\n                appPopover\r\n                (click)=\"overseer.popover()\"\r\n                placement=\"right\"\r\n                *ngIf=\"riskForm?.overseersList.length > 1\"\r\n              >\r\n                +{{ riskForm?.overseersList.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                riskForm?.overseersList.length > 0 &&\r\n                riskForm?.overseersGroupList.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=\"riskForm?.overseersGroupList.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('overseergroup', riskForm?.overseersGroupList[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]=\"riskForm?.overseersGroupList[0]?.group_name\"\r\n                placement=\"bottom-left\"\r\n                delay=\"0\"\r\n                type=\"black\"\r\n                [tooltipMandatory]=\"false\"\r\n                >{{ riskForm?.overseersGroupList[0]?.group_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                appPopover\r\n                (click)=\"overseerGroup.popover()\"\r\n                placement=\"right\"\r\n                *ngIf=\"riskForm?.overseersGroupList?.length > 1\"\r\n              >\r\n                +{{ riskForm?.overseersGroupList?.length - 1 }}\r\n              </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        <app-popover #popoverOverseer [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ul class=\"action-item\">\r\n              <li\r\n                *ngFor=\"\r\n                  let owner of riskForm?.overseersList | 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', owner)\"\r\n                      >&#xe90d;</i\r\n                    >\r\n                    {{ owner.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 #overseer [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ul class=\"action-item\">\r\n              <li\r\n                *ngFor=\"\r\n                  let owner of riskForm?.overseersList | 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', owner)\"\r\n                      >&#xe90d;</i\r\n                    >\r\n                    {{ owner.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 *ngFor=\"let data of riskForm?.overseersGroupList | slice : 1\">\r\n                <div class=\"avatar-card\">\r\n                  <span class=\"value\">\r\n                    <i class=\"icons\" (click)=\"remove('overseergroup', data)\"\r\n                      >&#xe90d;</i\r\n                    >\r\n                    {{ data.group_name }}\r\n                  </span>\r\n                </div>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n        </app-popover>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Risk Mitigation Priority -->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    [class.active]=\"false\"\r\n    [class.disabled]=\"\r\n      activeSelector && sideSelectorElements.includes(activeSelector)\r\n    \"\r\n    *ngIf=\"riskForm.addMitigation\"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"riskForm.mitigation\">\r\n      <img\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/priority.svg\"\r\n        *ngIf=\"!riskForm.mitigation\"\r\n        alt=\"\"\r\n      />\r\n      <!-- <svg viewBox=\"25 25 50 50\" class=\"edit-loader\">\r\n              <circle cx=\"50\" cy=\"50\" r=\"20\" fill=\"none\" stroke=\"#1e5dd3\" stroke-width=\"3\" class=\"loader-path\"></circle>\r\n          </svg> -->\r\n      <svg\r\n        class=\"checkIcon\"\r\n        *ngIf=\"riskForm.mitigation\"\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 Mitigation Priority\r\n          <i\r\n            class=\"icons\"\r\n            [appTooltip]=\"\r\n              'This sets the priority level for the mitigation of each risk.'\r\n            \"\r\n            placement=\"bottom\"\r\n            delay=\"0\"\r\n            type=\"white\"\r\n            [tooltipMandatory]=\"true\"\r\n            >&#xe91f;</i\r\n          ></label\r\n        >\r\n\r\n        <cs-select\r\n          [(ngModel)]=\"riskForm.mitigation\"\r\n          [placeholder]=\"'Select a mitigation priority'\"\r\n          name=\"riskForm.mitigation\"\r\n        >\r\n          <cs-option\r\n            *ngFor=\"let data of mitigationDetails\"\r\n            [value]=\"data?.mitigation_id\"\r\n            [color]=\"data?.mitigation_color\"\r\n          >\r\n            {{ data.mitigation_name }}\r\n          </cs-option>\r\n        </cs-select>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Risk Label -->\r\n  <div\r\n    class=\"form-group-row\"\r\n    [class.active]=\"false\"\r\n    [class.disabled]=\"\r\n      activeSelector && sideSelectorElements.includes(activeSelector)\r\n    \"\r\n    *ngIf=\"riskForm?.addRiskLabel\"\r\n  >\r\n    <div class=\"left\" [class.checked]=\"false\">\r\n      <!-- <img *ngIf=\"true\"\r\n              src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/oversight.svg\" alt=\"\" /> -->\r\n\r\n      <svg\r\n        class=\"checkIcon\"\r\n        *ngIf=\"true\"\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 LABEL\r\n          <i\r\n            class=\"icons\"\r\n            [appTooltip]=\"\r\n              'This option lets you specify if this is a newly identified risk or it is a rapidly changing risk.'\r\n            \"\r\n            placement=\"bottom\"\r\n            delay=\"0\"\r\n            type=\"white\"\r\n            [tooltipMandatory]=\"true\"\r\n            >&#xe91f;</i\r\n          ></label\r\n        >\r\n        <cs-select\r\n          [(ngModel)]=\"riskForm.riskLabelValue\"\r\n          [placeholder]=\"'Select a risk label'\"\r\n          name=\"riskForm?.riskLabelValue\"\r\n        >\r\n          <cs-option *ngFor=\"let data of riskLabelList\" [value]=\"data?.value\">\r\n            {{ data?.name }}\r\n          </cs-option>\r\n        </cs-select>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- Link with  GRC -->\r\n  <div\r\n    [appScrollInView]=\"scrollToBottom\"\r\n    class=\"form-group-row\"\r\n    [class.active]=\"activeSelector === 'GRC'\"\r\n    [class.disabled]=\"\r\n      activeSelector &&\r\n      activeSelector !== 'GRC' &&\r\n      sideSelectorElements.includes(activeSelector)\r\n    \"\r\n    *ngIf=\"riskForm?.GRC\"\r\n  >\r\n    <div\r\n      class=\"left\"\r\n      [class.checked]=\"this.riskForm?.selectedGRCObjects?.length > 0\"\r\n    >\r\n      <img\r\n        *ngIf=\"\r\n          this.riskForm?.selectedGRCObjects?.length == 0 ||\r\n          activeSelector === 'GRC'\r\n        \"\r\n        src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/link-items.svg\"\r\n        alt=\"\"\r\n      />\r\n\r\n      <svg\r\n        *ngIf=\"\r\n          this.riskForm?.selectedGRCObjects?.length > 0 &&\r\n          activeSelector !== 'GRC'\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 class=\"select\" *ngIf=\"riskForm?.selectedGRCObjects?.length === 0\">\r\n          <input\r\n            type=\"text\"\r\n            (click)=\"activateSelector('GRC', true)\"\r\n            placeholder=\"Select GRC object(s) to link with this risk.\"\r\n            readonly\r\n          />\r\n        </div>\r\n        <ng-container *ngIf=\"riskForm?.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', 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', 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 class=\"icons\" (click)=\"remove('GRC', 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<app-responsibility-centers-list\r\n  *ngIf=\"activeSelector === 'rc'\"\r\n  [responsibilityCentersList]=\"responsibilityCentersList\"\r\n  [selectedResponsibilityCenters]=\"riskForm.responsibilityCentersList\"\r\n  [rcIdKey]=\"'rc_id'\"\r\n  (saveSelectedList)=\"saveSelectedRCList($event)\"\r\n  (closeRcList)=\"activateSelector('rc', false)\"\r\n  [singularText]=\"'Responsibility Center selected'\"\r\n  [pluralText]=\"'Responsibility Centers selected'\"\r\n>\r\n</app-responsibility-centers-list>\r\n\r\n<app-owner-list\r\n  *ngIf=\"!featureflag_groups && activeSelector === 'owner'\"\r\n  [usersList]=\"ownersList\"\r\n  [selectedUsers]=\"riskForm.ownersList\"\r\n  [userIdKey]=\"'member_id'\"\r\n  [itemEmailKey]=\"'member_email'\"\r\n  [itemNameKey]=\"'member_name'\"\r\n  (saveSelectedList)=\"saveSelectedOwnersList($event)\"\r\n  [nonRemovableUsersList]=\"nonRemovableUsersList\"\r\n  (closeUsersList)=\"activateSelector('owner', false)\"\r\n  [singularText]=\"'User selected'\"\r\n  [pluralText]=\"'Users selected'\"\r\n></app-owner-list>\r\n\r\n<user-group-list\r\n  *ngIf=\"featureflag_groups && activeSelector === 'owner'\"\r\n  [userlist]=\"ownersList\"\r\n  [selectedUsers]=\"riskForm.ownersList\"\r\n  [groupList]=\"groupsList\"\r\n  [nonRemovableUserIds]=\"nonRemovableUsersList\"\r\n  (save)=\"saveSelectedOwnersList($event)\"\r\n  [selectedGroups]=\"riskForm.groupsList\"\r\n  (cancel)=\"activateSelector('owner', false)\"\r\n  [groupEnabled]=\"true\"\r\n  [featureflag]=\"featureflag_groups\"\r\n>\r\n</user-group-list>\r\n\r\n<user-group-list\r\n  *ngIf=\"featureflag_groups && activeSelector === 'overseer'\"\r\n  [userlist]=\"overseersList\"\r\n  [selectedUsers]=\"riskForm.overseersList\"\r\n  [groupList]=\"overseersGroupList\"\r\n  (save)=\"saveSelectedOverseersList($event)\"\r\n  [selectedGroups]=\"riskForm.overseersGroupList\"\r\n  (cancel)=\"activateSelector('overseer', false)\"\r\n  [groupEnabled]=\"true\"\r\n  [featureflag]=\"featureflag_groups\"\r\n>\r\n</user-group-list>\r\n\r\n<app-category-list\r\n  *ngIf=\"activeSelector === 'category'\"\r\n  [categoryList]=\"categoryList\"\r\n  [selectedCategory]=\"riskForm.category\"\r\n  (saveSelectedCategory)=\"saveSelectedCategory($event)\"\r\n  (closeCategoriesList)=\"activateSelector('category', false)\"\r\n></app-category-list>\r\n<app-owner-list\r\n  *ngIf=\"!featureflag_groups && activeSelector === 'overseer'\"\r\n  [usersList]=\"overseersList\"\r\n  [selectedUsers]=\"riskForm.overseersList\"\r\n  [userIdKey]=\"'member_id'\"\r\n  [itemNameKey]=\"'member_name'\"\r\n  [itemEmailKey]=\"'member_email'\"\r\n  (saveSelectedList)=\"saveSelectedOverseersList($event)\"\r\n  (closeUsersList)=\"activateSelector('overseer', false)\"\r\n  [singularText]=\"'User selected'\"\r\n  [pluralText]=\"'Users selected'\"\r\n>\r\n</app-owner-list>\r\n<app-loader-inline *ngIf=\"loader\"></app-loader-inline>\r\n\r\n<app-frequency-dialog-container\r\n  *ngIf=\"activeSelector === 'frequency'\"\r\n  [frequencyDetails]=\"frequencyDetails\"\r\n  (selectedFrequency)=\"frequencyData($event)\"\r\n  (closeFrequency)=\"activateSelector('frequency', false)\"\r\n>\r\n</app-frequency-dialog-container>\r\n\r\n<app-grc-object-list\r\n  *ngIf=\"activeSelector === 'GRC'\"\r\n  [grcObject]=\"grcList\"\r\n  [selectedGRC]=\"riskForm.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($event)\"\r\n  (closeOtherGRC)=\"activateSelector('GRC', false)\"\r\n></app-grc-object-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>\r\n</app-smiley-dialog-inline>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::ng-deep .workflw-risk{display:block;position:relative}\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:#ffffff;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:#ffffff}::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:#ffffff;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{-webkit-appearance:none;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:#ffffff;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:#ffffff;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:#ffffff;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:#ffffff}::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:#ffffff;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:#ffffff;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:#ffffff;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:#ffffff;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:#000000;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:rgba(0,0,0,.3)}@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:#ffffff}::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%,#747576 1%,#747576 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);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:#ffffff}::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%,#f31c39 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);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%,#34aa44 1%,#34aa44 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);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%,#1e5dd3 1%,#1e5dd3 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);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%,#f6882f 1%,#f6882f 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);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%,#7aa6f7 1%,#7aa6f7 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);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}\n"] }]
         }], ctorParameters: function () { return [{ type: AddRiskService }, { type: AuthService }, { type: UiKitService }, { type: SnackBarService }, { type: FrequencyService }, { type: GrcService }, { type: Configurations, decorators: [{
                     type: Optional
                 }] }]; }, propDecorators: { feature: [{
@@ -22494,9 +22507,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }] } });
 
 class PageHeaderComponent {
-    constructor() { }
-    ngOnInit() {
+    constructor() {
+        this.isExpand = false;
     }
+    ngOnInit() { }
 }
 PageHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
 PageHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PageHeaderComponent, selector: "app-page-header", inputs: { pageDetail: "pageDetail", pageTitle: "pageTitle" }, ngImport: i0, template: "<div class=\"page-header vx-pb-2 vx-mb-5\">\r\n  <div class=\"page-heading vx-d-flex\">\r\n    <div\r\n      *ngIf=\"!pageTitle\"\r\n      class=\"label vx-fs-11 vx-fw-500 vx-txt-white vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1\"\r\n    >\r\n      PAGE {{ pageDetail?.pageNumber }}\r\n    </div>\r\n    <div\r\n      *ngIf=\"pageTitle\"\r\n      class=\"label vx-fs-11 vx-fw-500 vx-txt-white vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1\"\r\n    >\r\n      {{ pageTitle }}\r\n    </div>\r\n    <div\r\n      *ngIf=\"pageDetail?.pageName?.trim()?.length\"\r\n      class=\"page-name vx-fs-13 vx-label-txt\"\r\n      [innerHTML]=\"pageDetail?.pageName\"\r\n      [appTooltip]=\"pageDetail?.pageName\"\r\n      placement=\"bottom-left\"\r\n      delay=\"0\"\r\n      type=\"black\"\r\n      [tooltipMandatory]=\"false\"\r\n    ></div>\r\n  </div>\r\n  <div\r\n    *ngIf=\"pageDetail?.pageDescription?.trim()?.length\"\r\n    class=\"page-details vx-fs-11 vx-paragraph-txt vx-mt-2\"\r\n    [innerHTML]=\"pageDetail?.pageDescription\"\r\n    [class.expand]=\"false\"\r\n  ></div>\r\n  <div class=\"page-details-btn vx-d-flex vx-justify-end\">\r\n    <button class=\"vx-fs-8 vx-fw-500 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0\">\r\n      Read More\r\n    </button>\r\n  </div>\r\n\r\n  <!-- <div  *ngIf=\"!pageTitle\" class=\"label vx-fs-10 vx-fw-500 vx-txt-white vx-pl-1 vx-pr-1 vx-lh-4 vx-mb-2 vx-d-inline-flex\">PAGE {{pageDetail?.pageNumber}} </div>\r\n    <div  *ngIf=\"pageTitle\" class=\"label vx-fs-10 vx-fw-500 vx-txt-white vx-pl-1 vx-pr-1 vx-lh-4 vx-mb-2 vx-d-inline-flex\">{{pageTitle}} </div>\r\n    <div *ngIf=\"pageDetail?.pageName?.trim()?.length\" class=\"page-name vx-fs-12 vx-label-txt vx-mb-3\" [innerHTML]=\"pageDetail?.pageName\"> </div>\r\n    <div *ngIf=\"pageDetail?.pageDescription?.trim()?.length\" class=\"page-details vx-fs-12 vx-label-txt vx-p-4\" [innerHTML]=\"pageDetail?.pageDescription\"></div> -->\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.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\";::ng-deep .page-header{border-bottom:1px solid #f1f1f1;position:relative}::ng-deep .page-header .page-heading{width:calc(100% - 4rem)}::ng-deep .page-header .page-heading .label{background:#161b2f;border-radius:.125rem;height:1rem}::ng-deep .page-header .page-heading .page-name{width:calc(100% - 3rem);position:relative;top:-1px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .page-header .page-details{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word;max-height:2.5rem;position:relative}::ng-deep .page-header .page-details.expand{display:block;-webkit-line-clamp:unset;-webkit-box-orient:unset;word-break:unset;max-height:unset}::ng-deep .page-header .page-details-btn button{background:transparent;border-radius:0;border:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }] });
@@ -31266,6 +31280,15 @@ class MoreOptionComponent {
         this.businessCycle = JSON.parse(localStorage.getItem('businessCycle') ?? '{}');
         this.moreOptionsList = {
             AAR: [
+                {
+                    imageUrl: 'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/owner.svg',
+                    name: 'Risk Owner',
+                    tooltipTitle: 'Risk Owner',
+                    tooltipMessage: 'This is either a person, department owner or a functional role within the organization that owns the risk. Example: For IT risk, the Risk Owner could be the "Director of IT & Security".',
+                    checked: false,
+                    hidden: false,
+                    code: 'RISK_OWNER',
+                },
                 {
                     imageUrl: 'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/oversight.svg',
                     name: 'Risk Oversight',
@@ -31284,15 +31307,6 @@ class MoreOptionComponent {
                     hidden: false,
                     code: 'MITIGATION',
                 },
-                {
-                    imageUrl: 'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/objectives.svg',
-                    name: 'Recommended Mitigation Plans',
-                    tooltipTitle: 'Recommended Mitigation Plans',
-                    tooltipMessage: 'Specify the mitigation plan that can be undertaken to mitigate the risk.',
-                    checked: false,
-                    hidden: false,
-                    code: 'MITIGATION_PLAN',
-                },
                 {
                     imageUrl: 'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/lables.svg',
                     name: 'Risk Label',
@@ -32243,10 +32257,10 @@ class BulkViewComponent {
     }
 }
 BulkViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BulkViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BulkViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: BulkViewComponent, selector: "app-bulk-view", inputs: { riskBulkUpload: "riskBulkUpload", templateInfo: "templateInfo", fileName: "fileName", assessmentDaysEnable: "assessmentDaysEnable", defaultOwner: "defaultOwner", loader: "loader" }, outputs: { submitRiskBulkUpload: "submitRiskBulkUpload", cancel: "cancel" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"bulk-view\">\r\n    <div class=\"bulk-view-head\">\r\n        <h2 class=\"bulk-view-title\">\r\n            {{fileName}}\r\n        </h2>\r\n    </div>\r\n    <div class=\"bulk-view-body\">\r\n        <div class=\"exel-view\">\r\n            <div class=\"exel-view-row head\">\r\n                <div class=\"exel-view-column sl-no\">#</div>\r\n                <div class=\"exel-view-column\" [class.two-column]=\"heading && i === 4\" *ngFor=\"let heading of riskBulkUpload?.header; let i = index\"\r\n                    [class.large]=\"heading && heading.startsWith('Inherent')\">\r\n                    <ng-container *ngIf=\"heading && !(heading.startsWith('Inherent')) && !(i === 4)\">\r\n                        {{(heading.includes('*')? heading.replace('*', '') : heading)}}\r\n                        <span *ngIf=\"heading.includes('*')\" class=\"required\">*</span>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"heading && heading.startsWith('Inherent')\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Inherent Risk Assessment</div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\">\r\n                            <div class=\"exel-view-column\" *ngFor=\"let weightAgeFactor of riskBulkUpload.weightFactors | slice : 2\">\r\n                                {{weightAgeFactor}}</div>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"heading && i === 4\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">\r\n                                {{(heading.includes('*')? heading.replace('*', '') : heading)}}\r\n                                <span *ngIf=\"heading.includes('*')\" class=\"required\">*</span>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column\" *ngFor=\"let weightAgeFactor of riskBulkUpload?.weightFactors | slice : 0: 2\">\r\n                                {{(weightAgeFactor.includes('*')? weightAgeFactor.replace('*', '') : weightAgeFactor)}}\r\n                                <span *ngIf=\"weightAgeFactor.includes('*')\" class=\"required\">*</span>\r\n                            </div>\r\n                        </div>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n            <div class=\"exel-view-row\" *ngFor=\"let risk of riskBulkUpload.risks; let i = index\">\r\n                <div class=\"exel-view-column sl-no\" [class.error]=\"!risk.isValid\">{{i+1}}</div>\r\n\r\n                <div class=\"exel-view-column\" [class.error]=\"!risk?.riskName\">{{risk?.riskName}}\r\n                    <i *ngIf=\"!risk?.riskName\" class=\"icons\" [appTooltip]=\"'Risk Name must be populated.'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                </div>\r\n\r\n                <div class=\"exel-view-column\">{{risk?.description}}</div>\r\n\r\n                <div class=\"exel-view-column\" [class.error]=\"!risk?.rcName\">{{risk?.rcName}}\r\n                    <i *ngIf=\"!risk?.rcName\" class=\"icons\"\r\n                        [appTooltip]=\"'Assign this risk to a Responsibility Center.'\" placement=\"bottom-right\"\r\n                        type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                </div>\r\n\r\n                <div class=\"exel-view-column\">{{risk?.owner}}</div>\r\n                <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                    <div class=\"exel-view-column\" [class.error]=\"!risk?.isValidFrequency\">{{risk?.frequency}} \r\n                        <i *ngIf=\"!risk?.isValidFrequency\" class=\"icons\"\r\n                        [appTooltip]=\"'Set a frequency for the completion of the inherent risk assessment.'\" placement=\"bottom-right\"\r\n                        type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                    </div>\r\n                    <div class=\"exel-view-column\" [class.error]=\"false\">{{risk?.emailReminder}} </div>\r\n                </div>\r\n                <div class=\"exel-view-column\" [class.error]=\"(risk?.owner && (risk?.owner == risk?.overseer))||\r\n                       (!risk?.owner && (defaultOwner == risk?.overseer))\">{{risk?.overseer}}\r\n                    <i *ngIf=\"(risk?.owner && (risk?.owner == risk?.overseer)) || (!risk?.owner && (defaultOwner == risk?.overseer)) \"\r\n                        class=\"icons\"\r\n                        [appTooltip]=\"((risk?.owner)?'The Risk Owner cannot also be the':'You cannot be a') +' Oversight of the risk. Select another user as the Oversight of this risk.'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                </div>\r\n                <div *ngIf=\"riskBulkUpload?.header && riskBulkUpload?.header?.includes('Recommended Mitigation Priority')\" class=\"exel-view-column\">{{risk?.mitigationPriority}}</div>\r\n                <div class=\"exel-view-column\">{{risk?.mitigationPlans}}</div>\r\n                <div class=\"exel-view-column\">{{risk?.riskLabel}}</div>\r\n                <!-- <div class=\"exel-view-column\" *ngIf=\"assessmentDaysEnable\" [class.error]=\"!risk?.assessmentDeadLine\">\r\n                    {{risk?.assessmentDeadLine}}\r\n                    <i *ngIf=\"!risk?.assessmentDeadLine\" class=\"icons\"\r\n                        [appTooltip]=\"'Set a deadline for the completion of the inherent risk assessment.'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe932;</i>\r\n                </div> -->\r\n                <div class=\"exel-view-row multi-column\">\r\n                    <div class=\"exel-view-column\" [class.error]=\"risk?.likelihood && !templateInfo?.likelihood.includes(risk?.likelihood)\">{{risk?.likelihood}} </div>\r\n                    <div class=\"exel-view-column\" [class.error]=\"risk?.impact && !templateInfo?.impact.includes(risk?.impact)\">{{risk?.impact}} </div>\r\n                    <div class=\"exel-view-column\" [class.error]=\"risk?.velocity && !templateInfo?.velocity.includes(risk?.velocity)\"\r\n                     *ngIf=\"riskBulkUpload?.weightFactors?.includes('Velocity')\">\r\n                        {{risk?.velocity}} </div>\r\n                    <div class=\"exel-view-column\" [class.error]=\"risk?.vulnerability && !templateInfo?.vulnerability.includes(risk?.vulnerability)\"\r\n                     *ngIf=\"riskBulkUpload?.weightFactors?.includes('Vulnerability')\">\r\n                        {{risk?.vulnerability}} </div>\r\n                </div>\r\n                <div *ngIf=\"riskBulkUpload?.header && riskBulkUpload?.header?.includes('Do you want to apply the same risk ratings for all Responsibility Centers?')\" class=\"exel-view-column\">{{risk?.applySameRiskRating}}</div>\r\n                <!-- <div class=\"exel-view-column\">{{risk?.customField1}}</div>\r\n                <div class=\"exel-view-column\">{{risk?.customField2}}</div> -->\r\n\r\n                <ng-container *ngIf=\"risk?.customTag\">\r\n                    <div class=\"exel-view-column\" *ngFor=\"let tag of risk?.customTag\">{{tag?.custom_tag_value}}</div>\r\n                </ng-container>\r\n\r\n            </div>\r\n\r\n        </div>\r\n        <div class=\"bulk-view-footer\">\r\n            <div class=\"left\">\r\n                <p>{{finalRisks}} out of {{riskBulkUpload?.risks?.length}} risks will be added to the Risk Register.</p>\r\n            </div>\r\n            <div class=\"right\">\r\n                <button (click)=\"close()\">Cancel</button>\r\n                <button (click)=\"submit(false)\" [disabled]=\"finalRisks<1\" class=\"blue\">Add Risks</button>\r\n                <button (click)=\"submit(true)\" *ngIf=\"showCompleteAssessmentButton\"\r\n                 [disabled]=\"finalRisks<1\" class=\"blue\">Add Risks And Complete Assessment</button>\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <app-loader-inline *ngIf=\"loader\"></app-loader-inline>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::-webkit-scrollbar-thumb,::-webkit-scrollbar-thumb:hover{background:#747576;border-radius:16px}::-webkit-scrollbar{height:15px}.bulk-view{position:fixed;inset:0;z-index:11}.bulk-view-head{height:60px;padding:20px 24px;background:#161b2f;display:flex;justify-content:flex-start}.bulk-view-title{font-size:16px;line-height:20px;font-weight:400;margin:0;color:#fff}.bulk-view-body{height:calc(100vh - 110px);overflow:auto;width:100%;background:#FFFFFF}.bulk-view-body .exel-view{display:block}.bulk-view-body .exel-view-row{display:flex;width:100%}.bulk-view-body .exel-view-row.head .exel-view-column{font-weight:500;font-size:14px;min-height:26px;background:#f1f1f1;padding:0}.bulk-view-body .exel-view-row.two-column .exel-view-column,.bulk-view-body .exel-view-row.three-column .exel-view-column,.bulk-view-body .exel-view-row.four-column .exel-view-column{min-width:250px!important}.bulk-view-body .exel-view-row.multi-column .exel-view-column{width:140px;min-width:140px}.bulk-view-body .exel-view-column{width:300px;min-width:300px;padding:0 10px;border-right:1px solid #dcdcdc;border-bottom:1px solid #dcdcdc;display:flex;align-items:center;justify-content:center;text-align:center;word-break:break-all;line-height:16px;font-size:12px;color:#161b2f;flex-wrap:wrap;position:relative}.bulk-view-body .exel-view-column.two-column{width:500px;min-width:500px!important}.bulk-view-body .exel-view-column.three-column{width:750px;min-width:750px!important}.bulk-view-body .exel-view-column.four-column{width:1000px;min-width:1000px!important}.bulk-view-body .exel-view-column i.icons{position:absolute;top:8px;right:10px;cursor:pointer;color:#d93b41}.bulk-view-body .exel-view-column.large{width:100%;min-width:auto}.bulk-view-body .exel-view-column.error{border:1px solid #EB2424}.bulk-view-body .exel-view-column span.required{color:#eb2424}.bulk-view-body .exel-view-column .exel-view-row .exel-view-column{width:100%}.bulk-view-body .exel-view-column.sl-no{background:#f1f1f1;width:60px;min-width:60px;min-height:30px;font-weight:400}.bulk-view-footer{height:50px;box-shadow:0 0 15px #1e5dd259;padding:10px 20px;position:fixed;width:100%;bottom:0;display:flex;align-items:center;justify-content:space-between;background:#FFFFFF}.bulk-view-footer .left p{color:#747576;font-size:13px;font-weight:500;margin:0}.bulk-view-footer .right button{font-size:12px;background:#fff;border:1px solid #dcdcdc;color:#747576;border-radius:2px;padding:8px 18px;cursor:pointer;text-transform:uppercase}.bulk-view-footer .right button+button{margin-left:4px}.bulk-view-footer .right button.blue{color:#fff;background:#1E5DD3}.bulk-view-footer .right button:disabled{background:#F1F1F1;border-color:#f1f1f1;pointer-events:none;cursor:not-allowed;color:#747576}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }] });
+BulkViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: BulkViewComponent, selector: "app-bulk-view", inputs: { riskBulkUpload: "riskBulkUpload", templateInfo: "templateInfo", fileName: "fileName", assessmentDaysEnable: "assessmentDaysEnable", defaultOwner: "defaultOwner", loader: "loader" }, outputs: { submitRiskBulkUpload: "submitRiskBulkUpload", cancel: "cancel" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"bulk-view\">\r\n  <div class=\"bulk-view-head\">\r\n    <h2 class=\"bulk-view-title\">\r\n      {{ fileName }}\r\n    </h2>\r\n  </div>\r\n  <div class=\"bulk-view-body\">\r\n    <div class=\"exel-view\">\r\n      <div class=\"exel-view-row head\">\r\n        <div class=\"exel-view-column sl-no\">#</div>\r\n        <div\r\n          class=\"exel-view-column\"\r\n          [class.two-column]=\"heading && i === 5\"\r\n          *ngFor=\"let heading of riskBulkUpload?.header; let i = index\"\r\n          [class.large]=\"heading && heading.startsWith('Inherent')\"\r\n        >\r\n          <ng-container\r\n            *ngIf=\"heading && !heading.startsWith('Inherent') && !(i === 5)\"\r\n          >\r\n            {{ heading.includes(\"*\") ? heading.replace(\"*\", \"\") : heading }}\r\n            <span *ngIf=\"heading.includes('*')\" class=\"required\">*</span>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"heading && heading.startsWith('Inherent')\">\r\n            <div class=\"exel-view-row\">\r\n              <div class=\"exel-view-column large\">Inherent Risk Assessment</div>\r\n            </div>\r\n            <div class=\"exel-view-row multi-column\">\r\n              <div\r\n                class=\"exel-view-column\"\r\n                *ngFor=\"\r\n                  let weightAgeFactor of riskBulkUpload.weightFactors\r\n                    | slice : 2\r\n                \"\r\n              >\r\n                {{ weightAgeFactor }}\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"heading && i === 5\">\r\n            <div class=\"exel-view-row\">\r\n              <div class=\"exel-view-column large\">\r\n                {{ heading.includes(\"*\") ? heading.replace(\"*\", \"\") : heading }}\r\n                <span *ngIf=\"heading.includes('*')\" class=\"required\">*</span>\r\n              </div>\r\n            </div>\r\n            <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n              <div\r\n                class=\"exel-view-column\"\r\n                *ngFor=\"\r\n                  let weightAgeFactor of riskBulkUpload?.weightFactors\r\n                    | slice : 0 : 2\r\n                \"\r\n              >\r\n                {{\r\n                  weightAgeFactor.includes(\"*\")\r\n                    ? weightAgeFactor.replace(\"*\", \"\")\r\n                    : weightAgeFactor\r\n                }}\r\n                <span *ngIf=\"weightAgeFactor.includes('*')\" class=\"required\"\r\n                  >*</span\r\n                >\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n      <div\r\n        class=\"exel-view-row\"\r\n        *ngFor=\"let risk of riskBulkUpload.risks; let i = index\"\r\n      >\r\n        <div class=\"exel-view-column sl-no\" [class.error]=\"!risk.isValid\">\r\n          {{ i + 1 }}\r\n        </div>\r\n\r\n        <div class=\"exel-view-column\" [class.error]=\"!risk?.riskName\">\r\n          {{ risk?.riskName }}\r\n          <i\r\n            *ngIf=\"!risk?.riskName\"\r\n            class=\"icons\"\r\n            [appTooltip]=\"'Risk Name must be populated.'\"\r\n            placement=\"bottom-right\"\r\n            type=\"white\"\r\n            delay=\"0\"\r\n            [tooltipMandatory]=\"true\"\r\n            >&#xe932;</i\r\n          >\r\n        </div>\r\n\r\n        <div class=\"exel-view-column\">{{ risk?.description }}</div>\r\n\r\n        <div class=\"exel-view-column\" [class.error]=\"!risk?.rcName\">\r\n          {{ risk?.rcName }}\r\n          <i\r\n            *ngIf=\"!risk?.rcName\"\r\n            class=\"icons\"\r\n            [appTooltip]=\"'Assign this risk to a Responsibility Center.'\"\r\n            placement=\"bottom-right\"\r\n            type=\"white\"\r\n            delay=\"0\"\r\n            [tooltipMandatory]=\"true\"\r\n            >&#xe932;</i\r\n          >\r\n        </div>\r\n        <div class=\"exel-view-column\">{{ risk?.owner }}</div>\r\n        <div class=\"exel-view-column\">{{ risk?.riskOwner }}</div>\r\n        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n          <div class=\"exel-view-column\" [class.error]=\"!risk?.isValidFrequency\">\r\n            {{ risk?.frequency }}\r\n            <i\r\n              *ngIf=\"!risk?.isValidFrequency\"\r\n              class=\"icons\"\r\n              [appTooltip]=\"\r\n                'Set a frequency for the completion of the inherent risk assessment.'\r\n              \"\r\n              placement=\"bottom-right\"\r\n              type=\"white\"\r\n              delay=\"0\"\r\n              [tooltipMandatory]=\"true\"\r\n              >&#xe932;</i\r\n            >\r\n          </div>\r\n          <div class=\"exel-view-column\" [class.error]=\"false\">\r\n            {{ risk?.emailReminder }}\r\n          </div>\r\n        </div>\r\n        <div\r\n          class=\"exel-view-column\"\r\n          [class.error]=\"\r\n            (risk?.owner && risk?.owner == risk?.overseer) ||\r\n            (!risk?.owner && defaultOwner == risk?.overseer)\r\n          \"\r\n        >\r\n          {{ risk?.overseer }}\r\n          <i\r\n            *ngIf=\"\r\n              (risk?.owner && risk?.owner == risk?.overseer) ||\r\n              (!risk?.owner && defaultOwner == risk?.overseer)\r\n            \"\r\n            class=\"icons\"\r\n            [appTooltip]=\"\r\n              (risk?.owner\r\n                ? 'The Risk Owner cannot also be the'\r\n                : 'You cannot be a') +\r\n              ' Oversight of the risk. Select another user as the Oversight of this risk.'\r\n            \"\r\n            placement=\"bottom-right\"\r\n            type=\"white\"\r\n            delay=\"0\"\r\n            [tooltipMandatory]=\"true\"\r\n            >&#xe932;</i\r\n          >\r\n        </div>\r\n        <div\r\n          *ngIf=\"\r\n            riskBulkUpload?.header &&\r\n            riskBulkUpload?.header?.includes('Recommended Mitigation Priority')\r\n          \"\r\n          class=\"exel-view-column\"\r\n        >\r\n          {{ risk?.mitigationPriority }}\r\n        </div>\r\n        <div class=\"exel-view-column\">{{ risk?.mitigationPlans }}</div>\r\n        <div class=\"exel-view-column\">{{ risk?.riskLabel }}</div>\r\n        <!-- <div class=\"exel-view-column\" *ngIf=\"assessmentDaysEnable\" [class.error]=\"!risk?.assessmentDeadLine\">\r\n                  {{risk?.assessmentDeadLine}}\r\n                  <i *ngIf=\"!risk?.assessmentDeadLine\" class=\"icons\"\r\n                      [appTooltip]=\"'Set a deadline for the completion of the inherent risk assessment.'\"\r\n                      placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe932;</i>\r\n              </div> -->\r\n        <div class=\"exel-view-row multi-column\">\r\n          <div\r\n            class=\"exel-view-column\"\r\n            [class.error]=\"\r\n              risk?.likelihood &&\r\n              !templateInfo?.likelihood.includes(risk?.likelihood)\r\n            \"\r\n          >\r\n            {{ risk?.likelihood }}\r\n          </div>\r\n          <div\r\n            class=\"exel-view-column\"\r\n            [class.error]=\"\r\n              risk?.impact && !templateInfo?.impact.includes(risk?.impact)\r\n            \"\r\n          >\r\n            {{ risk?.impact }}\r\n          </div>\r\n          <div\r\n            class=\"exel-view-column\"\r\n            [class.error]=\"\r\n              risk?.velocity && !templateInfo?.velocity.includes(risk?.velocity)\r\n            \"\r\n            *ngIf=\"riskBulkUpload?.weightFactors?.includes('Velocity')\"\r\n          >\r\n            {{ risk?.velocity }}\r\n          </div>\r\n          <div\r\n            class=\"exel-view-column\"\r\n            [class.error]=\"\r\n              risk?.vulnerability &&\r\n              !templateInfo?.vulnerability.includes(risk?.vulnerability)\r\n            \"\r\n            *ngIf=\"riskBulkUpload?.weightFactors?.includes('Vulnerability')\"\r\n          >\r\n            {{ risk?.vulnerability }}\r\n          </div>\r\n        </div>\r\n        <div\r\n          *ngIf=\"\r\n            riskBulkUpload?.header &&\r\n            riskBulkUpload?.header?.includes(\r\n              'Do you want to apply the same risk ratings for all Responsibility Centers?'\r\n            )\r\n          \"\r\n          class=\"exel-view-column\"\r\n        >\r\n          {{ risk?.applySameRiskRating }}\r\n        </div>\r\n        <!-- <div class=\"exel-view-column\">{{risk?.customField1}}</div>\r\n              <div class=\"exel-view-column\">{{risk?.customField2}}</div> -->\r\n\r\n        <ng-container *ngIf=\"risk?.customTag\">\r\n          <div class=\"exel-view-column\" *ngFor=\"let tag of risk?.customTag\">\r\n            {{ tag?.custom_tag_value }}\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n    <div class=\"bulk-view-footer\">\r\n      <div class=\"left\">\r\n        <p>\r\n          {{ finalRisks }} out of {{ riskBulkUpload?.risks?.length }} risks will\r\n          be added to the Risk Register.\r\n        </p>\r\n      </div>\r\n      <div class=\"right\">\r\n        <button (click)=\"close()\">Cancel</button>\r\n        <button\r\n          (click)=\"submit(false)\"\r\n          [disabled]=\"finalRisks < 1\"\r\n          class=\"blue\"\r\n        >\r\n          Add Risks\r\n        </button>\r\n        <button\r\n          (click)=\"submit(true)\"\r\n          *ngIf=\"showCompleteAssessmentButton\"\r\n          [disabled]=\"finalRisks < 1\"\r\n          class=\"blue\"\r\n        >\r\n          Add Risks And Complete Assessment\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <app-loader-inline *ngIf=\"loader\"></app-loader-inline>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::-webkit-scrollbar-thumb,::-webkit-scrollbar-thumb:hover{background:#747576;border-radius:16px}::-webkit-scrollbar{height:15px}.bulk-view{position:fixed;inset:0;z-index:11}.bulk-view-head{height:60px;padding:20px 24px;background:#161b2f;display:flex;justify-content:flex-start}.bulk-view-title{font-size:16px;line-height:20px;font-weight:400;margin:0;color:#fff}.bulk-view-body{height:calc(100vh - 110px);overflow:auto;width:100%;background:#ffffff}.bulk-view-body .exel-view{display:block}.bulk-view-body .exel-view-row{display:flex;width:100%}.bulk-view-body .exel-view-row.head .exel-view-column{font-weight:500;font-size:14px;min-height:26px;background:#f1f1f1;padding:0}.bulk-view-body .exel-view-row.two-column .exel-view-column,.bulk-view-body .exel-view-row.three-column .exel-view-column,.bulk-view-body .exel-view-row.four-column .exel-view-column{min-width:250px!important}.bulk-view-body .exel-view-row.multi-column .exel-view-column{width:140px;min-width:140px}.bulk-view-body .exel-view-column{width:300px;min-width:300px;padding:0 10px;border-right:1px solid #dcdcdc;border-bottom:1px solid #dcdcdc;display:flex;align-items:center;justify-content:center;text-align:center;word-break:break-all;line-height:16px;font-size:12px;color:#161b2f;flex-wrap:wrap;position:relative}.bulk-view-body .exel-view-column.two-column{width:500px;min-width:500px!important}.bulk-view-body .exel-view-column.three-column{width:750px;min-width:750px!important}.bulk-view-body .exel-view-column.four-column{width:1000px;min-width:1000px!important}.bulk-view-body .exel-view-column i.icons{position:absolute;top:8px;right:10px;cursor:pointer;color:#d93b41}.bulk-view-body .exel-view-column.large{width:100%;min-width:auto}.bulk-view-body .exel-view-column.error{border:1px solid #eb2424}.bulk-view-body .exel-view-column span.required{color:#eb2424}.bulk-view-body .exel-view-column .exel-view-row .exel-view-column{width:100%}.bulk-view-body .exel-view-column.sl-no{background:#f1f1f1;width:60px;min-width:60px;min-height:30px;font-weight:400}.bulk-view-footer{height:50px;box-shadow:0 0 15px #1e5dd259;padding:10px 20px;position:fixed;width:100%;bottom:0;display:flex;align-items:center;justify-content:space-between;background:#ffffff}.bulk-view-footer .left p{color:#747576;font-size:13px;font-weight:500;margin:0}.bulk-view-footer .right button{font-size:12px;background:#fff;border:1px solid #dcdcdc;color:#747576;border-radius:2px;padding:8px 18px;cursor:pointer;text-transform:uppercase}.bulk-view-footer .right button+button{margin-left:4px}.bulk-view-footer .right button.blue{color:#fff;background:#1e5dd3}.bulk-view-footer .right button:disabled{background:#f1f1f1;border-color:#f1f1f1;pointer-events:none;cursor:not-allowed;color:#747576}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BulkViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-bulk-view', template: "<div class=\"bulk-view\">\r\n    <div class=\"bulk-view-head\">\r\n        <h2 class=\"bulk-view-title\">\r\n            {{fileName}}\r\n        </h2>\r\n    </div>\r\n    <div class=\"bulk-view-body\">\r\n        <div class=\"exel-view\">\r\n            <div class=\"exel-view-row head\">\r\n                <div class=\"exel-view-column sl-no\">#</div>\r\n                <div class=\"exel-view-column\" [class.two-column]=\"heading && i === 4\" *ngFor=\"let heading of riskBulkUpload?.header; let i = index\"\r\n                    [class.large]=\"heading && heading.startsWith('Inherent')\">\r\n                    <ng-container *ngIf=\"heading && !(heading.startsWith('Inherent')) && !(i === 4)\">\r\n                        {{(heading.includes('*')? heading.replace('*', '') : heading)}}\r\n                        <span *ngIf=\"heading.includes('*')\" class=\"required\">*</span>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"heading && heading.startsWith('Inherent')\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Inherent Risk Assessment</div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\">\r\n                            <div class=\"exel-view-column\" *ngFor=\"let weightAgeFactor of riskBulkUpload.weightFactors | slice : 2\">\r\n                                {{weightAgeFactor}}</div>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"heading && i === 4\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">\r\n                                {{(heading.includes('*')? heading.replace('*', '') : heading)}}\r\n                                <span *ngIf=\"heading.includes('*')\" class=\"required\">*</span>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column\" *ngFor=\"let weightAgeFactor of riskBulkUpload?.weightFactors | slice : 0: 2\">\r\n                                {{(weightAgeFactor.includes('*')? weightAgeFactor.replace('*', '') : weightAgeFactor)}}\r\n                                <span *ngIf=\"weightAgeFactor.includes('*')\" class=\"required\">*</span>\r\n                            </div>\r\n                        </div>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n            <div class=\"exel-view-row\" *ngFor=\"let risk of riskBulkUpload.risks; let i = index\">\r\n                <div class=\"exel-view-column sl-no\" [class.error]=\"!risk.isValid\">{{i+1}}</div>\r\n\r\n                <div class=\"exel-view-column\" [class.error]=\"!risk?.riskName\">{{risk?.riskName}}\r\n                    <i *ngIf=\"!risk?.riskName\" class=\"icons\" [appTooltip]=\"'Risk Name must be populated.'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                </div>\r\n\r\n                <div class=\"exel-view-column\">{{risk?.description}}</div>\r\n\r\n                <div class=\"exel-view-column\" [class.error]=\"!risk?.rcName\">{{risk?.rcName}}\r\n                    <i *ngIf=\"!risk?.rcName\" class=\"icons\"\r\n                        [appTooltip]=\"'Assign this risk to a Responsibility Center.'\" placement=\"bottom-right\"\r\n                        type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                </div>\r\n\r\n                <div class=\"exel-view-column\">{{risk?.owner}}</div>\r\n                <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                    <div class=\"exel-view-column\" [class.error]=\"!risk?.isValidFrequency\">{{risk?.frequency}} \r\n                        <i *ngIf=\"!risk?.isValidFrequency\" class=\"icons\"\r\n                        [appTooltip]=\"'Set a frequency for the completion of the inherent risk assessment.'\" placement=\"bottom-right\"\r\n                        type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                    </div>\r\n                    <div class=\"exel-view-column\" [class.error]=\"false\">{{risk?.emailReminder}} </div>\r\n                </div>\r\n                <div class=\"exel-view-column\" [class.error]=\"(risk?.owner && (risk?.owner == risk?.overseer))||\r\n                       (!risk?.owner && (defaultOwner == risk?.overseer))\">{{risk?.overseer}}\r\n                    <i *ngIf=\"(risk?.owner && (risk?.owner == risk?.overseer)) || (!risk?.owner && (defaultOwner == risk?.overseer)) \"\r\n                        class=\"icons\"\r\n                        [appTooltip]=\"((risk?.owner)?'The Risk Owner cannot also be the':'You cannot be a') +' Oversight of the risk. Select another user as the Oversight of this risk.'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                </div>\r\n                <div *ngIf=\"riskBulkUpload?.header && riskBulkUpload?.header?.includes('Recommended Mitigation Priority')\" class=\"exel-view-column\">{{risk?.mitigationPriority}}</div>\r\n                <div class=\"exel-view-column\">{{risk?.mitigationPlans}}</div>\r\n                <div class=\"exel-view-column\">{{risk?.riskLabel}}</div>\r\n                <!-- <div class=\"exel-view-column\" *ngIf=\"assessmentDaysEnable\" [class.error]=\"!risk?.assessmentDeadLine\">\r\n                    {{risk?.assessmentDeadLine}}\r\n                    <i *ngIf=\"!risk?.assessmentDeadLine\" class=\"icons\"\r\n                        [appTooltip]=\"'Set a deadline for the completion of the inherent risk assessment.'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe932;</i>\r\n                </div> -->\r\n                <div class=\"exel-view-row multi-column\">\r\n                    <div class=\"exel-view-column\" [class.error]=\"risk?.likelihood && !templateInfo?.likelihood.includes(risk?.likelihood)\">{{risk?.likelihood}} </div>\r\n                    <div class=\"exel-view-column\" [class.error]=\"risk?.impact && !templateInfo?.impact.includes(risk?.impact)\">{{risk?.impact}} </div>\r\n                    <div class=\"exel-view-column\" [class.error]=\"risk?.velocity && !templateInfo?.velocity.includes(risk?.velocity)\"\r\n                     *ngIf=\"riskBulkUpload?.weightFactors?.includes('Velocity')\">\r\n                        {{risk?.velocity}} </div>\r\n                    <div class=\"exel-view-column\" [class.error]=\"risk?.vulnerability && !templateInfo?.vulnerability.includes(risk?.vulnerability)\"\r\n                     *ngIf=\"riskBulkUpload?.weightFactors?.includes('Vulnerability')\">\r\n                        {{risk?.vulnerability}} </div>\r\n                </div>\r\n                <div *ngIf=\"riskBulkUpload?.header && riskBulkUpload?.header?.includes('Do you want to apply the same risk ratings for all Responsibility Centers?')\" class=\"exel-view-column\">{{risk?.applySameRiskRating}}</div>\r\n                <!-- <div class=\"exel-view-column\">{{risk?.customField1}}</div>\r\n                <div class=\"exel-view-column\">{{risk?.customField2}}</div> -->\r\n\r\n                <ng-container *ngIf=\"risk?.customTag\">\r\n                    <div class=\"exel-view-column\" *ngFor=\"let tag of risk?.customTag\">{{tag?.custom_tag_value}}</div>\r\n                </ng-container>\r\n\r\n            </div>\r\n\r\n        </div>\r\n        <div class=\"bulk-view-footer\">\r\n            <div class=\"left\">\r\n                <p>{{finalRisks}} out of {{riskBulkUpload?.risks?.length}} risks will be added to the Risk Register.</p>\r\n            </div>\r\n            <div class=\"right\">\r\n                <button (click)=\"close()\">Cancel</button>\r\n                <button (click)=\"submit(false)\" [disabled]=\"finalRisks<1\" class=\"blue\">Add Risks</button>\r\n                <button (click)=\"submit(true)\" *ngIf=\"showCompleteAssessmentButton\"\r\n                 [disabled]=\"finalRisks<1\" class=\"blue\">Add Risks And Complete Assessment</button>\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <app-loader-inline *ngIf=\"loader\"></app-loader-inline>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::-webkit-scrollbar-thumb,::-webkit-scrollbar-thumb:hover{background:#747576;border-radius:16px}::-webkit-scrollbar{height:15px}.bulk-view{position:fixed;inset:0;z-index:11}.bulk-view-head{height:60px;padding:20px 24px;background:#161b2f;display:flex;justify-content:flex-start}.bulk-view-title{font-size:16px;line-height:20px;font-weight:400;margin:0;color:#fff}.bulk-view-body{height:calc(100vh - 110px);overflow:auto;width:100%;background:#FFFFFF}.bulk-view-body .exel-view{display:block}.bulk-view-body .exel-view-row{display:flex;width:100%}.bulk-view-body .exel-view-row.head .exel-view-column{font-weight:500;font-size:14px;min-height:26px;background:#f1f1f1;padding:0}.bulk-view-body .exel-view-row.two-column .exel-view-column,.bulk-view-body .exel-view-row.three-column .exel-view-column,.bulk-view-body .exel-view-row.four-column .exel-view-column{min-width:250px!important}.bulk-view-body .exel-view-row.multi-column .exel-view-column{width:140px;min-width:140px}.bulk-view-body .exel-view-column{width:300px;min-width:300px;padding:0 10px;border-right:1px solid #dcdcdc;border-bottom:1px solid #dcdcdc;display:flex;align-items:center;justify-content:center;text-align:center;word-break:break-all;line-height:16px;font-size:12px;color:#161b2f;flex-wrap:wrap;position:relative}.bulk-view-body .exel-view-column.two-column{width:500px;min-width:500px!important}.bulk-view-body .exel-view-column.three-column{width:750px;min-width:750px!important}.bulk-view-body .exel-view-column.four-column{width:1000px;min-width:1000px!important}.bulk-view-body .exel-view-column i.icons{position:absolute;top:8px;right:10px;cursor:pointer;color:#d93b41}.bulk-view-body .exel-view-column.large{width:100%;min-width:auto}.bulk-view-body .exel-view-column.error{border:1px solid #EB2424}.bulk-view-body .exel-view-column span.required{color:#eb2424}.bulk-view-body .exel-view-column .exel-view-row .exel-view-column{width:100%}.bulk-view-body .exel-view-column.sl-no{background:#f1f1f1;width:60px;min-width:60px;min-height:30px;font-weight:400}.bulk-view-footer{height:50px;box-shadow:0 0 15px #1e5dd259;padding:10px 20px;position:fixed;width:100%;bottom:0;display:flex;align-items:center;justify-content:space-between;background:#FFFFFF}.bulk-view-footer .left p{color:#747576;font-size:13px;font-weight:500;margin:0}.bulk-view-footer .right button{font-size:12px;background:#fff;border:1px solid #dcdcdc;color:#747576;border-radius:2px;padding:8px 18px;cursor:pointer;text-transform:uppercase}.bulk-view-footer .right button+button{margin-left:4px}.bulk-view-footer .right button.blue{color:#fff;background:#1E5DD3}.bulk-view-footer .right button:disabled{background:#F1F1F1;border-color:#f1f1f1;pointer-events:none;cursor:not-allowed;color:#747576}\n"] }]
+            args: [{ selector: 'app-bulk-view', template: "<div class=\"bulk-view\">\r\n  <div class=\"bulk-view-head\">\r\n    <h2 class=\"bulk-view-title\">\r\n      {{ fileName }}\r\n    </h2>\r\n  </div>\r\n  <div class=\"bulk-view-body\">\r\n    <div class=\"exel-view\">\r\n      <div class=\"exel-view-row head\">\r\n        <div class=\"exel-view-column sl-no\">#</div>\r\n        <div\r\n          class=\"exel-view-column\"\r\n          [class.two-column]=\"heading && i === 5\"\r\n          *ngFor=\"let heading of riskBulkUpload?.header; let i = index\"\r\n          [class.large]=\"heading && heading.startsWith('Inherent')\"\r\n        >\r\n          <ng-container\r\n            *ngIf=\"heading && !heading.startsWith('Inherent') && !(i === 5)\"\r\n          >\r\n            {{ heading.includes(\"*\") ? heading.replace(\"*\", \"\") : heading }}\r\n            <span *ngIf=\"heading.includes('*')\" class=\"required\">*</span>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"heading && heading.startsWith('Inherent')\">\r\n            <div class=\"exel-view-row\">\r\n              <div class=\"exel-view-column large\">Inherent Risk Assessment</div>\r\n            </div>\r\n            <div class=\"exel-view-row multi-column\">\r\n              <div\r\n                class=\"exel-view-column\"\r\n                *ngFor=\"\r\n                  let weightAgeFactor of riskBulkUpload.weightFactors\r\n                    | slice : 2\r\n                \"\r\n              >\r\n                {{ weightAgeFactor }}\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"heading && i === 5\">\r\n            <div class=\"exel-view-row\">\r\n              <div class=\"exel-view-column large\">\r\n                {{ heading.includes(\"*\") ? heading.replace(\"*\", \"\") : heading }}\r\n                <span *ngIf=\"heading.includes('*')\" class=\"required\">*</span>\r\n              </div>\r\n            </div>\r\n            <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n              <div\r\n                class=\"exel-view-column\"\r\n                *ngFor=\"\r\n                  let weightAgeFactor of riskBulkUpload?.weightFactors\r\n                    | slice : 0 : 2\r\n                \"\r\n              >\r\n                {{\r\n                  weightAgeFactor.includes(\"*\")\r\n                    ? weightAgeFactor.replace(\"*\", \"\")\r\n                    : weightAgeFactor\r\n                }}\r\n                <span *ngIf=\"weightAgeFactor.includes('*')\" class=\"required\"\r\n                  >*</span\r\n                >\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n      <div\r\n        class=\"exel-view-row\"\r\n        *ngFor=\"let risk of riskBulkUpload.risks; let i = index\"\r\n      >\r\n        <div class=\"exel-view-column sl-no\" [class.error]=\"!risk.isValid\">\r\n          {{ i + 1 }}\r\n        </div>\r\n\r\n        <div class=\"exel-view-column\" [class.error]=\"!risk?.riskName\">\r\n          {{ risk?.riskName }}\r\n          <i\r\n            *ngIf=\"!risk?.riskName\"\r\n            class=\"icons\"\r\n            [appTooltip]=\"'Risk Name must be populated.'\"\r\n            placement=\"bottom-right\"\r\n            type=\"white\"\r\n            delay=\"0\"\r\n            [tooltipMandatory]=\"true\"\r\n            >&#xe932;</i\r\n          >\r\n        </div>\r\n\r\n        <div class=\"exel-view-column\">{{ risk?.description }}</div>\r\n\r\n        <div class=\"exel-view-column\" [class.error]=\"!risk?.rcName\">\r\n          {{ risk?.rcName }}\r\n          <i\r\n            *ngIf=\"!risk?.rcName\"\r\n            class=\"icons\"\r\n            [appTooltip]=\"'Assign this risk to a Responsibility Center.'\"\r\n            placement=\"bottom-right\"\r\n            type=\"white\"\r\n            delay=\"0\"\r\n            [tooltipMandatory]=\"true\"\r\n            >&#xe932;</i\r\n          >\r\n        </div>\r\n        <div class=\"exel-view-column\">{{ risk?.owner }}</div>\r\n        <div class=\"exel-view-column\">{{ risk?.riskOwner }}</div>\r\n        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n          <div class=\"exel-view-column\" [class.error]=\"!risk?.isValidFrequency\">\r\n            {{ risk?.frequency }}\r\n            <i\r\n              *ngIf=\"!risk?.isValidFrequency\"\r\n              class=\"icons\"\r\n              [appTooltip]=\"\r\n                'Set a frequency for the completion of the inherent risk assessment.'\r\n              \"\r\n              placement=\"bottom-right\"\r\n              type=\"white\"\r\n              delay=\"0\"\r\n              [tooltipMandatory]=\"true\"\r\n              >&#xe932;</i\r\n            >\r\n          </div>\r\n          <div class=\"exel-view-column\" [class.error]=\"false\">\r\n            {{ risk?.emailReminder }}\r\n          </div>\r\n        </div>\r\n        <div\r\n          class=\"exel-view-column\"\r\n          [class.error]=\"\r\n            (risk?.owner && risk?.owner == risk?.overseer) ||\r\n            (!risk?.owner && defaultOwner == risk?.overseer)\r\n          \"\r\n        >\r\n          {{ risk?.overseer }}\r\n          <i\r\n            *ngIf=\"\r\n              (risk?.owner && risk?.owner == risk?.overseer) ||\r\n              (!risk?.owner && defaultOwner == risk?.overseer)\r\n            \"\r\n            class=\"icons\"\r\n            [appTooltip]=\"\r\n              (risk?.owner\r\n                ? 'The Risk Owner cannot also be the'\r\n                : 'You cannot be a') +\r\n              ' Oversight of the risk. Select another user as the Oversight of this risk.'\r\n            \"\r\n            placement=\"bottom-right\"\r\n            type=\"white\"\r\n            delay=\"0\"\r\n            [tooltipMandatory]=\"true\"\r\n            >&#xe932;</i\r\n          >\r\n        </div>\r\n        <div\r\n          *ngIf=\"\r\n            riskBulkUpload?.header &&\r\n            riskBulkUpload?.header?.includes('Recommended Mitigation Priority')\r\n          \"\r\n          class=\"exel-view-column\"\r\n        >\r\n          {{ risk?.mitigationPriority }}\r\n        </div>\r\n        <div class=\"exel-view-column\">{{ risk?.mitigationPlans }}</div>\r\n        <div class=\"exel-view-column\">{{ risk?.riskLabel }}</div>\r\n        <!-- <div class=\"exel-view-column\" *ngIf=\"assessmentDaysEnable\" [class.error]=\"!risk?.assessmentDeadLine\">\r\n                  {{risk?.assessmentDeadLine}}\r\n                  <i *ngIf=\"!risk?.assessmentDeadLine\" class=\"icons\"\r\n                      [appTooltip]=\"'Set a deadline for the completion of the inherent risk assessment.'\"\r\n                      placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe932;</i>\r\n              </div> -->\r\n        <div class=\"exel-view-row multi-column\">\r\n          <div\r\n            class=\"exel-view-column\"\r\n            [class.error]=\"\r\n              risk?.likelihood &&\r\n              !templateInfo?.likelihood.includes(risk?.likelihood)\r\n            \"\r\n          >\r\n            {{ risk?.likelihood }}\r\n          </div>\r\n          <div\r\n            class=\"exel-view-column\"\r\n            [class.error]=\"\r\n              risk?.impact && !templateInfo?.impact.includes(risk?.impact)\r\n            \"\r\n          >\r\n            {{ risk?.impact }}\r\n          </div>\r\n          <div\r\n            class=\"exel-view-column\"\r\n            [class.error]=\"\r\n              risk?.velocity && !templateInfo?.velocity.includes(risk?.velocity)\r\n            \"\r\n            *ngIf=\"riskBulkUpload?.weightFactors?.includes('Velocity')\"\r\n          >\r\n            {{ risk?.velocity }}\r\n          </div>\r\n          <div\r\n            class=\"exel-view-column\"\r\n            [class.error]=\"\r\n              risk?.vulnerability &&\r\n              !templateInfo?.vulnerability.includes(risk?.vulnerability)\r\n            \"\r\n            *ngIf=\"riskBulkUpload?.weightFactors?.includes('Vulnerability')\"\r\n          >\r\n            {{ risk?.vulnerability }}\r\n          </div>\r\n        </div>\r\n        <div\r\n          *ngIf=\"\r\n            riskBulkUpload?.header &&\r\n            riskBulkUpload?.header?.includes(\r\n              'Do you want to apply the same risk ratings for all Responsibility Centers?'\r\n            )\r\n          \"\r\n          class=\"exel-view-column\"\r\n        >\r\n          {{ risk?.applySameRiskRating }}\r\n        </div>\r\n        <!-- <div class=\"exel-view-column\">{{risk?.customField1}}</div>\r\n              <div class=\"exel-view-column\">{{risk?.customField2}}</div> -->\r\n\r\n        <ng-container *ngIf=\"risk?.customTag\">\r\n          <div class=\"exel-view-column\" *ngFor=\"let tag of risk?.customTag\">\r\n            {{ tag?.custom_tag_value }}\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n    <div class=\"bulk-view-footer\">\r\n      <div class=\"left\">\r\n        <p>\r\n          {{ finalRisks }} out of {{ riskBulkUpload?.risks?.length }} risks will\r\n          be added to the Risk Register.\r\n        </p>\r\n      </div>\r\n      <div class=\"right\">\r\n        <button (click)=\"close()\">Cancel</button>\r\n        <button\r\n          (click)=\"submit(false)\"\r\n          [disabled]=\"finalRisks < 1\"\r\n          class=\"blue\"\r\n        >\r\n          Add Risks\r\n        </button>\r\n        <button\r\n          (click)=\"submit(true)\"\r\n          *ngIf=\"showCompleteAssessmentButton\"\r\n          [disabled]=\"finalRisks < 1\"\r\n          class=\"blue\"\r\n        >\r\n          Add Risks And Complete Assessment\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <app-loader-inline *ngIf=\"loader\"></app-loader-inline>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::-webkit-scrollbar-thumb,::-webkit-scrollbar-thumb:hover{background:#747576;border-radius:16px}::-webkit-scrollbar{height:15px}.bulk-view{position:fixed;inset:0;z-index:11}.bulk-view-head{height:60px;padding:20px 24px;background:#161b2f;display:flex;justify-content:flex-start}.bulk-view-title{font-size:16px;line-height:20px;font-weight:400;margin:0;color:#fff}.bulk-view-body{height:calc(100vh - 110px);overflow:auto;width:100%;background:#ffffff}.bulk-view-body .exel-view{display:block}.bulk-view-body .exel-view-row{display:flex;width:100%}.bulk-view-body .exel-view-row.head .exel-view-column{font-weight:500;font-size:14px;min-height:26px;background:#f1f1f1;padding:0}.bulk-view-body .exel-view-row.two-column .exel-view-column,.bulk-view-body .exel-view-row.three-column .exel-view-column,.bulk-view-body .exel-view-row.four-column .exel-view-column{min-width:250px!important}.bulk-view-body .exel-view-row.multi-column .exel-view-column{width:140px;min-width:140px}.bulk-view-body .exel-view-column{width:300px;min-width:300px;padding:0 10px;border-right:1px solid #dcdcdc;border-bottom:1px solid #dcdcdc;display:flex;align-items:center;justify-content:center;text-align:center;word-break:break-all;line-height:16px;font-size:12px;color:#161b2f;flex-wrap:wrap;position:relative}.bulk-view-body .exel-view-column.two-column{width:500px;min-width:500px!important}.bulk-view-body .exel-view-column.three-column{width:750px;min-width:750px!important}.bulk-view-body .exel-view-column.four-column{width:1000px;min-width:1000px!important}.bulk-view-body .exel-view-column i.icons{position:absolute;top:8px;right:10px;cursor:pointer;color:#d93b41}.bulk-view-body .exel-view-column.large{width:100%;min-width:auto}.bulk-view-body .exel-view-column.error{border:1px solid #eb2424}.bulk-view-body .exel-view-column span.required{color:#eb2424}.bulk-view-body .exel-view-column .exel-view-row .exel-view-column{width:100%}.bulk-view-body .exel-view-column.sl-no{background:#f1f1f1;width:60px;min-width:60px;min-height:30px;font-weight:400}.bulk-view-footer{height:50px;box-shadow:0 0 15px #1e5dd259;padding:10px 20px;position:fixed;width:100%;bottom:0;display:flex;align-items:center;justify-content:space-between;background:#ffffff}.bulk-view-footer .left p{color:#747576;font-size:13px;font-weight:500;margin:0}.bulk-view-footer .right button{font-size:12px;background:#fff;border:1px solid #dcdcdc;color:#747576;border-radius:2px;padding:8px 18px;cursor:pointer;text-transform:uppercase}.bulk-view-footer .right button+button{margin-left:4px}.bulk-view-footer .right button.blue{color:#fff;background:#1e5dd3}.bulk-view-footer .right button:disabled{background:#f1f1f1;border-color:#f1f1f1;pointer-events:none;cursor:not-allowed;color:#747576}\n"] }]
         }], propDecorators: { riskBulkUpload: [{
                 type: Input
             }], templateInfo: [{
@@ -32601,6 +32615,7 @@ class AddMultipleRiskComponent {
                     //   obj.customTag = customTags;
                     // }
                     let obj = this.setRiskDetails(risk);
+                    console.log(riskData);
                     if (obj?.likelihood &&
                         !this.templateInfo?.likelihood.includes(obj?.likelihood)) {
                         obj.isValid = false;
@@ -32643,10 +32658,10 @@ class AddMultipleRiskComponent {
         trimmedName = trimmedName.replace(/  +/g, ' ');
         // || (this.assessmentDeadLine && (!risk[6]))
         if (!trimmedName ||
-            (risk[3] && risk[3] == risk[6]) ||
-            (!risk[3] && this.defaultOwner == risk[6]) ||
+            (risk[3] && risk[3] == risk[7]) ||
+            (!risk[3] && this.defaultOwner == risk[7]) ||
             !risk[2] ||
-            !this.frequencyType?.includes(risk[4]?.toLowerCase())) {
+            !this.frequencyType?.includes(risk[5]?.toLowerCase())) {
             return false;
         }
         else {
@@ -32708,6 +32723,7 @@ class AddMultipleRiskComponent {
                     owner: risk?.owner
                         ? this.returnIds(risk?.owner, 'owner')
                         : this.returnIds(this.defaultOwner, 'owner'),
+                    risk_owner: risk?.riskOwner,
                     category: this.category?.selectedCategory?.category_id
                         ? [this.category?.selectedCategory?.category_id]
                         : [],
@@ -32902,12 +32918,13 @@ class AddMultipleRiskComponent {
             description: risk[1] ?? '',
             rcName: risk[2] ?? '',
             owner: risk[3] ?? '',
-            frequency: risk[4] ?? '',
-            emailReminder: risk[5],
-            overseer: risk[6] ?? '',
+            riskOwner: risk[4] ?? '',
+            frequency: risk[5] ?? '',
+            emailReminder: risk[6],
+            overseer: risk[7] ?? '',
             isValid: this.checkValidity(risk),
         };
-        let index = 7;
+        let index = 8;
         if (this.riskBulkUpload?.header?.includes('Recommended Mitigation Priority')) {
             obj['mitigationPriority'] = risk[index] ?? '';
             index++;
@@ -38584,10 +38601,10 @@ class BulkResponsibilityViewComponent {
     }
 }
 BulkResponsibilityViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BulkResponsibilityViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BulkResponsibilityViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: BulkResponsibilityViewComponent, selector: "app-bulk-responsibility-view", inputs: { responsibilityBulkUpload: "responsibilityBulkUpload", fileName: "fileName", defaultOwner: "defaultOwner", loader: "loader", tabType: "tabType", bulkUpload: "bulkUpload", responsibilityType: "responsibilityType" }, outputs: { submitResponsibilityBulkUpload: "submitResponsibilityBulkUpload", cancel: "cancel", selectedTab: "selectedTab" }, usesOnChanges: true, ngImport: i0, template: "\r\n<ng-container *ngIf=\"responsibilityType === 'singleTab'\">\r\n<div class=\"bulk-view\">\r\n    <div class=\"bulk-view-head\">\r\n        <h2 class=\"bulk-view-title\">\r\n            {{fileName}}\r\n        </h2>\r\n    </div>\r\n    <div class=\"bulk-view-body\">\r\n        <div class=\"exel-view\">\r\n            <div class=\"exel-view-row head\">\r\n                <div class=\"exel-view-column sl-no\">#</div>\r\n                <div class=\"exel-view-column\" *ngFor=\"let heading of responsibilityBulkUpload?.header\"\r\n                    [class.large]=\"heading && heading.startsWith('Inherent')\">\r\n                    <ng-container *ngIf=\"heading && !(heading.startsWith('Due')) && !(heading.startsWith('Oversight'))\">\r\n                        {{(heading.includes('*')? heading.replace('*', '') : heading)}}\r\n                        <span *ngIf=\"heading.includes('*')\" class=\"required\">*</span>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"heading && heading.startsWith('Due')\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Due Date</div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\">\r\n                            <div class=\"exel-view-column\">Day</div>\r\n                            <div class=\"exel-view-column\">Month</div>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"heading && heading.startsWith('Oversight')\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Oversight </div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\">\r\n                            <div class=\"exel-view-column\">Always Notify</div>\r\n                            <div class=\"exel-view-column\">Notify on Failure</div>\r\n                        </div>\r\n                    </ng-container>\r\n                </div>\r\n\r\n            </div>\r\n            <div class=\"exel-view-row\" *ngFor=\"let report of responsibilityBulkUpload?.reports; let i = index\">\r\n                <div class=\"exel-view-column sl-no\">{{i+1}}</div>\r\n\r\n                <div class=\"exel-view-column\" [class.error]=\"!report.responsibilityName\">{{report?.responsibilityName}}\r\n                    <i *ngIf=\"!report?.responsibilityName\" class=\"icons\"\r\n                        [appTooltip]=\"'Enter a name for this responsibility.'\" placement=\"bottom-right\" type=\"white\"\r\n                        delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                </div>\r\n                <div class=\"exel-view-column\">\r\n                    {{report?.assignor}}\r\n                    <i *ngIf=\"((report?.assignor) && (report?.notifyOnFailure == report?.assignor||report?.alwaysNotify == report?.assignor))\"\r\n                        class=\"icons\"\r\n                        [appTooltip]=\"'The Overseer cannot also be the Assignor of this responsibility. Select another user as the Assignor.'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i>\r\n<!--\r\n                    <i *ngIf=\"((report?.assignor) && (report?.reviewer == report?.assignor))\"\r\n                        class=\"icons\"\r\n                        [appTooltip]=\"'The Reviewer cannot also be the Assignor of this responsibility. Select another user as the Assignor.'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i>     -->\r\n                </div>\r\n                <div class=\"exel-view-column\">\r\n                    {{report?.assignee}}\r\n\r\n                    <i *ngIf=\"((report?.assignee) && (report?.notifyOnFailure == report?.assignee||report?.alwaysNotify == report?.assignee))\"\r\n                        class=\"icons\"\r\n                        [appTooltip]=\"'The Overseer cannot also be the Assignee of this responsibility. Select another user as the Assignee.'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i>\r\n\r\n                    <i *ngIf=\"((report?.assignee) && (report?.reviewer == report?.assignee))\"\r\n                        class=\"icons\"\r\n                        [appTooltip]=\"'The Reviewer cannot also be the Assignee of this responsibility. Select another user as the Assignee.'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i>\r\n                    <i *ngIf=\"(!report?.assignee) || (!report?.isValidUser)\"\r\n                    class=\"icons\"\r\n                    [appTooltip]=\"'Select the user responsible for completing this responsibility. '\"\r\n                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i>\r\n                </div>\r\n                <div class=\"exel-view-column\" id=\"resCategory\" *ngIf=\"report?.responsibilityCategory!==null\">{{report?.responsibilityCategory}}</div>\r\n                <div class=\"exel-view-column\" [class.error]=\"!report.frequency\">{{report?.frequency}}\r\n                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\r\n                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                </div>\r\n                <div class=\"exel-view-column multi-column\">\r\n                    <div class=\"exel-view-row\">\r\n                        <div class=\"exel-view-column\" [class.error]=\"!report.isValidDueDate\">{{report?.day}}\r\n                            <i *ngIf=\"!report?.isValidDueDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\r\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                            <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\r\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                        </div>\r\n                        <div class=\"exel-view-column\" [class.error]=\"!report.isValidDueDate\">{{report?.month}}\r\n                            <i *ngIf=\"!report?.isValidDueDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\r\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                            <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\r\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"exel-view-column\">{{report?.responsibilityWindow}}</div>\r\n                <div class=\"exel-view-column\">{{report?.failedAfter}}</div>\r\n                <div class=\"exel-view-column\">{{report?.reportClass}}</div>\r\n                <div class=\"exel-view-column\">{{report?.responsibilityCenter}}</div>\r\n                <div class=\"exel-view-column\">\r\n                    {{report?.reviewer}}\r\n\r\n                    <i *ngIf=\"(report?.reviewer) && ((report?.reviewer == report?.alwaysNotify) || (report?.reviewer == report?.notifyOnFailure))\"\r\n                        class=\"icons\"\r\n                        [appTooltip]=\"'The Overseer cannot also be the Reviewer of this responsibility. Select another user as the Reviewer'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i>\r\n\r\n                    <i *ngIf=\"report?.reviewer && (report?.reviewer == report?.assignee)\" class=\"icons\"\r\n                        [appTooltip]=\"'The Assignee cannot also be the Reviewer of this responsibility. Select another user as the Reviewer.'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i>\r\n                    <!-- <i *ngIf=\"(report?.reviewer && report?.assignor)\"\r\n                        class=\"icons\"\r\n                        [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Reviewer of this responsibility.':'You cannot be a Reviewer of this responsibility since you are the assignor. ') +'Select another user as the Reviewer'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i> -->\r\n                </div>\r\n                <div class=\"exel-view-column\">{{report?.reviewToBeCompletedWithin}}</div>\r\n                <div class=\"exel-view-column\">{{report?.reviewWillBeFailedAfter}}</div>\r\n                <div class=\"exel-view-column\">{{report?.formatForResponsibility}}</div>\r\n                <div class=\"exel-view-column\">{{report?.notes}}</div>\r\n                <div class=\"exel-view-column\">{{report?.documentEvidenceRequired}}</div>\r\n                <div class=\"exel-view-column multi-column\">\r\n                    <div class=\"exel-view-row\">\r\n                        <div class=\"exel-view-column\">\r\n                            {{report?.alwaysNotify}}\r\n                            <i *ngIf=\"(report?.alwaysNotify) && ((report?.reviewer == report?.alwaysNotify))\"\r\n                                class=\"icons\"\r\n                                [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\r\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                            </i>\r\n\r\n                            <i *ngIf=\"report?.alwaysNotify && (report?.alwaysNotify == report?.assignee)\" class=\"icons\"\r\n                                [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\r\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                            </i>\r\n                            <i *ngIf=\"((report?.alwaysNotify && report?.assignor) && (report?.alwaysNotify == report?.assignor)) ||((report?.alwaysNotify && (!report?.assignor)) && (report?.alwaysNotify == defaultOwner))\"\r\n                                class=\"icons\"\r\n                                [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Overseer of this responsibility. ':'You cannot be an Overseer of this responsibility since you are the Assignor. ') +'Select another user as the Overseer.'\"\r\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                            </i>\r\n                        </div>\r\n                        <div class=\"exel-view-column\">\r\n                            {{report?.notifyOnFailure}}\r\n                            <i *ngIf=\"(report?.notifyOnFailure) && ((report?.reviewer == report?.notifyOnFailure))\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n\r\n                        <i *ngIf=\"report?.notifyOnFailure && (report?.notifyOnFailure == report?.assignee)\" class=\"icons\"\r\n                            [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                        <i *ngIf=\"((report?.notifyOnFailure && report?.assignor) && (report?.notifyOnFailure == report?.assignor)) ||((report?.notifyOnFailure && (!report?.assignor)) && (report?.notifyOnFailure == defaultOwner))\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Overseer of this responsibility. ':'You cannot be an Overseer of this responsibility since you are the Assignor. ') +'Select another user as the Overseer.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n\r\n                <div class=\"exel-view-column\">{{report?.keyResponsibility}}</div>\r\n                <div class=\"exel-view-column\">{{report?.objective}}</div>\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"bulk-view-footer\">\r\n        <div class=\"left\">\r\n            <p>{{finalResponsibilities}} out of {{responsibilityBulkUpload?.reports?.length}} responsibilities will be\r\n                uploaded.</p>\r\n        </div>\r\n        <div class=\"right\">\r\n            <button (click)=\"close()\" id=\"bulk-resp-cancel\" >Cancel</button>\r\n            <button (click)=\"submit()\" id=\"bulk-resp-confirm\" [disabled]=\"finalResponsibilities<1\" class=\"blue\">Confirm</button>\r\n        </div>\r\n    </div>\r\n</div>\r\n<app-loader  *ngIf=\"loader\"></app-loader>\r\n\r\n</ng-container>\r\n\r\n<!-- --------------------------------------------------------------------upward is new one-------------------- -->\r\n<app-loader  *ngIf=\"loader\"></app-loader>\r\n\r\n\r\n\r\n\r\n\r\n\r\n<!-- HTML for multiple tabs -->\r\n<ng-container *ngIf=\"responsibilityType === 'multiTab'\">\r\n    <div class=\"bulk-view\">\r\n        <div class=\"bulk-view-head\">\r\n            <h2 class=\"bulk-view-title\">\r\n                {{fileName}}\r\n            </h2>\r\n        </div>\r\n        <div class=\"bulk-view-body bulk\">\r\n            <div class=\"exel-view\">\r\n                <div class=\"exel-view-row head\">\r\n                    <div class=\"exel-view-column sl-no\">#</div>\r\n                    <div class=\"exel-view-column\">Responsibility Name <span class=\"required\">*</span></div>\r\n                    <div class=\"exel-view-column\" *ngIf=\"responsibilityBulkUpload?.header.includes('Program')\" [class.three-column]=\"true\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Program</div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\r\n                            <div class=\"exel-view-column\">Program Type</div>\r\n                            <div class=\"exel-view-column\">Program</div>\r\n                            <div class=\"exel-view-column\">Program Category</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">Entrusted By</div>\r\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Entrust To <span class=\"required\">*</span></div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column\">Person or Group<span class=\"required\">*</span></div>\r\n                            <div class=\"exel-view-column\">All or Any Persons</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">Key Responsibility?</div>\r\n                    <div class=\"exel-view-column\" [class.five-column]=\"tabType === 'frequency' || tabType === 'onCompletion'\" [class.three-column]=\"tabType === 'ongoing'\">\r\n                        <div class=\"exel-view-row\">\r\n                            <!-- <div class=\"exel-view-column large\">Frequency of Occurrence and Completion Window <span class=\"required\">*</span></div> -->\r\n                            <div class=\"exel-view-column large\">{{responsibilityBulkUpload?.header.includes('Program') ? responsibilityBulkUpload?.header[8]?.slice(0, -1) : responsibilityBulkUpload?.header[5]?.slice(0, -1)}}<span class=\"required\">*</span></div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.five-column]=\"tabType === 'frequency' || tabType === 'onCompletion'\" [class.three-column]=\"tabType === 'ongoing'\">\r\n                            <ng-container *ngIf=\"tabType === 'frequency'\">\r\n                                <div class=\"exel-view-column\">Frequency <span class=\"required\">*</span></div>\r\n                                <div class=\"exel-view-column\">Due Date <span class=\"info-text\">(Day)</span></div>\r\n                                <div class=\"exel-view-column\">Due Date <span class=\"info-text\">(Month)</span></div>\r\n                                <div class=\"exel-view-column\">Start <span class=\"info-text\">(No. of days before the due date)</span></div>\r\n                                <div class=\"exel-view-column\">Fail <span class=\"info-text\" appTooltip=\"(No. of days after the due date. Select '0' if the responsibility must be completed on the due date)\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">(No. of days after the due date. Select \"0\" if the responsibility must be completed on the due date)</span></div>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"tabType === 'ongoing'\">\r\n                                <div class=\"exel-view-column\">Ongoing Frequency <span class=\"required\">*</span></div>\r\n                                <div class=\"exel-view-column\">Set a Reminder?</div>\r\n                                <div class=\"exel-view-column\">Frequency of Reminder</div>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"tabType === 'onCompletion'\">\r\n                                <div class=\"exel-view-column\">On Completion of Frequency <span class=\"required\">*</span></div>\r\n                                <div class=\"exel-view-column\">Parent Responsibility<span class=\"info-text\">(Day)</span></div>\r\n                                <div class=\"exel-view-column\">Due Date <span class=\"info-text\" appTooltip=\"(No. of days after completion of the Parent Responsibility)\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">(No. of days after completion of the Parent Responsibility)</span></div>\r\n                                <div class=\"exel-view-column\">Start <span class=\"info-text\" appTooltip=\"(No. of days before the due date)\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">(No. of days before the due date)</span></div>\r\n                                <div class=\"exel-view-column\">Fail <span class=\"info-text\" appTooltip=\"(No. of days after the due date. Select '0' if the responsibility must be completed on the due date)\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">(No. of days after the due date. Select \"0\" if the responsibility must be completed on the due date)</span></div>\r\n                            </ng-container>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">Responsibility Centre</div>\r\n                    <div class=\"exel-view-column\">Risk Class</div>\r\n                    <div class=\"exel-view-column\">Objective</div>\r\n                    <div class=\"exel-view-column\">Notes</div>\r\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Format & Evidence</div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\" [class.three-column]=\"false\">\r\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">Format</div>\r\n                            <div class=\"exel-view-column\">Format For Responsibility (link)</div>\r\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">Evidence</div>\r\n                        </div>\r\n                    </div>\r\n                    <!-- <div class=\"exel-view-column\">Assessments or Checkpoints</div> -->\r\n                    <div class=\"exel-view-column\" [class.three-column]=\"true\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Review of Responsibility</div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\r\n                            <div class=\"exel-view-column\">Reviewer</div>\r\n                            <div class=\"exel-view-column\">Review Start <span class=\"info-text\">(No. of days before the due date)</span></div>\r\n                            <div class=\"exel-view-column\">Review Fail <span class=\"info-text\" appTooltip=\"(No. of days after the due date. Select '0' if the responsibility must be reviewed on the due date)\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">(No. of days after the due date. Select \"0\" if the responsibility must be reviewed on the due date)</span></div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Overseer</div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column\">Always Notify</div>\r\n                            <div class=\"exel-view-column\">Notify on Failure</div>\r\n                        </div>\r\n                    </div>\r\n                    <!-- <div class=\"exel-view-column\">Overseer</div> -->\r\n    \r\n                </div>\r\n                <div class=\"exel-view-row\" *ngFor=\"let report of responsibilityBulkUpload?.reports; let i = index\">\r\n                    <div class=\"exel-view-column sl-no\" [class.error]=\"!report?.isValid\">{{i+1}}</div>\r\n                    <div class=\"exel-view-column\" [class.error]=\"!report.responsibilityName\">{{report?.responsibilityName}} <i *ngIf=\"!report.responsibilityName\" class=\"icons\" [appTooltip]=\"'Enter a name for this responsibility.'\"  placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i></div>\r\n                    <div class=\"exel-view-column multi-column\" *ngIf=\"responsibilityBulkUpload?.header.includes('Program')\" [class.error]=\"false\" [class.three-column]=\"true\">\r\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\r\n                            <div class=\"exel-view-column\">{{report?.programType}}</div>\r\n                            <div class=\"exel-view-column\">{{report?.program}}</div>\r\n                            <div class=\"exel-view-column\">{{report?.programCategory}}</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">{{report?.assignor}}\r\n                        <!-- <i *ngIf=\"((report?.assignor) && (report?.reviewer === report?.assignor))\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"'The Reviewer cannot also be the Assignor of this responsibility. Select another user as the Assignor.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i> -->\r\n                    </div>\r\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column\" [class.error]=\"!report?.assignee || !report?.userValidateWithProgram?.isValidAssignee || (!report?.isValidUser)\">{{report?.assignee}}\r\n                                <!-- || (!report?.isValidUser) -->\r\n                                <i *ngIf=\"(!report?.assignee) || (!report?.isValidUser)\"\r\n                                    class=\"icons\"\r\n                                    [appTooltip]=\"'Select the user responsible for completing this responsibility. '\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                                <i *ngIf=\"(report?.assignee) && !report?.userValidateWithProgram?.isValidAssignee\"\r\n                                    class=\"icons\"\r\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                            </div>\r\n                            <div class=\"exel-view-column\">{{report?.assigneeType}}</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">{{report?.keyResponsibility}}</div>\r\n                    <div class=\"exel-view-column multi-column\" [class.five-column]=\"tabType === 'frequency' || tabType === 'onCompletion'\" [class.three-column]=\"tabType === 'ongoing'\">\r\n                        <ng-container *ngIf=\"tabType === 'frequency'\">\r\n                            <div class=\"exel-view-row multi-column\" [class.five-column]=\"true\">\r\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.frequency\">{{report?.frequency}}\r\n                                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                </div>\r\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.validDate || report?.isPastDate\">{{report?.day}}\r\n                                    <i *ngIf=\"!report?.validDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\r\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                    <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\r\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                </div>\r\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.validDate || report?.isPastDate\">{{report?.month}}\r\n                                    <i *ngIf=\"!report?.validDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\r\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                    <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\r\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                </div>\r\n                                <div class=\"exel-view-column\">{{report?.responsibilityWindow}}</div>\r\n                                <div class=\"exel-view-column\">{{report?.failedAfter}}</div>\r\n                            </div>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"tabType === 'ongoing'\">\r\n                            <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\r\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.frequency\">{{report?.frequency}}\r\n                                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                </div>\r\n                                <div class=\"exel-view-column\">{{report?.setReminder}}</div>\r\n                                <div class=\"exel-view-column\">{{report?.frequencyReminder}}</div>\r\n                            </div>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"tabType === 'onCompletion'\">\r\n                            <div class=\"exel-view-row multi-column\" [class.five-column]=\"true\">\r\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.frequency\">{{report?.frequency}}\r\n                                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                </div>\r\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.parentResponsibility\">{{report?.parentResponsibility}}\r\n                                    <i *ngIf=\"!report?.parentResponsibility\" class=\"icons\" [appTooltip]=\"'Select a parent responsibility on whose completion this responsibility will become active.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                </div>\r\n                                <div class=\"exel-view-column\">{{report?.dueDate}}</div>\r\n                                <div class=\"exel-view-column\">{{report?.responsibilityWindow}}</div>\r\n                                <div class=\"exel-view-column\">{{report?.failedAfter}}</div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">{{report?.responsibilityCenter}}</div>\r\n                    <div class=\"exel-view-column\">{{report?.reportClass}}</div>\r\n                    <div class=\"exel-view-column\">{{report?.objective}}</div>\r\n                    <div class=\"exel-view-column\">{{report?.notes}}</div>\r\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column multi-column\">\r\n                                <div class=\"exel-view-row multi-column\">\r\n                                    <div class=\"exel-view-column\" [class.small-column]=\"true\">{{report?.isFormat}}</div>\r\n                                    <div class=\"exel-view-column\">{{report?.formatForResponsibility}}</div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">{{report?.documentEvidenceRequired}}</div>\r\n                        </div>\r\n                    </div>\r\n                    <!-- <div class=\"exel-view-column\">{{report?.assessments}}</div> -->\r\n                    <div class=\"exel-view-column multi-column\" [class.three-column]=\"true\">\r\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\r\n                            <div class=\"exel-view-column\" [class.error]=\"report?.reviewer && (\r\n                              !report?.userValidateWithProgram?.isValidReviewer )\">{{report?.reviewer}}\r\n            \r\n                        <!-- <i *ngIf=\"(report?.reviewer && report?.reviewer === report?.assignor)\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Reviewer of this responsibility.':'You cannot be a Reviewer of this responsibility since you are the assignor. ') +'Select another user as the Reviewer'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i> -->\r\n                        <i *ngIf=\"report?.reviewer && !report?.userValidateWithProgram?.isValidReviewer\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"'This user is not associated with the selected Program.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                            </div>\r\n                            <div class=\"exel-view-column\">{{report?.reviewToBeCompletedWithin}}</div>\r\n                            <div class=\"exel-view-column\">{{report?.reviewWillBeFailedAfter}}</div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column\" [class.error]=\"report?.overseer && (\r\n                              !report?.userValidateWithProgram?.isValidOverseer )\">\r\n                            {{report?.overseer}}\r\n                            \r\n                                <i *ngIf=\"(report?.overseer) && !report?.userValidateWithProgram?.isValidOverseer\"\r\n                                    class=\"icons\"\r\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                            </div>\r\n                            <div class=\"exel-view-column\" [class.error]=\"report?.notifyOnFailure && (\r\n                            !report?.userValidateWithProgram?.isValidNotifyOnFailure )\">\r\n                                {{report?.notifyOnFailure}}\r\n          \r\n                                <i *ngIf=\"(report?.notifyOnFailure) && !report?.userValidateWithProgram?.isValidNotifyOnFailure\"\r\n                                    class=\"icons\"\r\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    \r\n                    <!-- <div class=\"exel-view-column\" [class.error]=\"(report?.overseer) && ((report?.overseer === report?.assignee) ||(report?.reviewer === report?.overseer) || (report?.overseer == report?.assignor) || (!report?.userValidateWithProgram?.isValidOverseer))\">\r\n                        {{report?.overseer}}\r\n                        <i *ngIf=\"(report?.overseer) && ((report?.reviewer === report?.overseer))\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n\r\n                        <i *ngIf=\"report?.overseer && (report?.overseer === report?.assignee)\" class=\"icons\"\r\n                            [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                        <i *ngIf=\"((report?.overseer) && (report?.overseer == report?.assignor))\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Overseer of this responsibility. ':'You cannot be an Overseer of this responsibility since you are the Assignor. ') +'Select another user as the Overseer.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                        <i *ngIf=\"!report?.userValidateWithProgram?.isValidOverseer\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"'Selected user is not a valid overseer for selected program.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                    </div> -->\r\n                </div>\r\n    \r\n    \r\n    \r\n    \r\n    \r\n    \r\n                <!-- ------------------------------------------------old code dynamic------------------------------------------------- -->\r\n    \r\n                <!-- *ngFor=\"let report of responsibilityBulkUpload?.reports; let i = index\" -->\r\n            </div>\r\n        </div>\r\n        <div class=\"bulk-view-option\">\r\n            <button *ngIf=\"bulkUpload?.frequency?.reports?.length\" [class.active]=\"tabType === 'frequency'\" (click)=\"selectedTab.emit('frequency')\">Frequency Responsibilities</button>\r\n            <button *ngIf=\"bulkUpload?.ongoing?.reports?.length\" [class.active]=\"tabType === 'ongoing'\" (click)=\"selectedTab.emit('ongoing')\">Ongoing Responsibilities</button>\r\n            <button *ngIf=\"bulkUpload?.onCompletion?.reports?.length\" [class.active]=\"tabType === 'onCompletion'\" (click)=\"selectedTab.emit('onCompletion')\">On Completion Responsibilities</button>\r\n        </div>\r\n        <div class=\"bulk-view-footer\">\r\n            <!-- <div class=\"left\">\r\n                <p>{{finalResponsibilities}} out of {{responsibilityBulkUpload?.reports?.length}} responsibilities will be\r\n                    uploaded.</p>\r\n            </div> -->\r\n            <div class=\"left\">\r\n                <p>{{finalResponsibilities}} out of {{responsibilityMultiTabBulkUpload?.length}} {{responsibilityMultiTabBulkUpload?.length > 1 ? 'responsibilities' : 'responsibility'}} will be\r\n                    uploaded.</p>\r\n            </div>\r\n            <div class=\"right\">\r\n                <button (click)=\"close()\" id=\"bulk-resp-cancel\">Cancel</button>\r\n                <button (click)=\"submit()\" id=\"bulk-resp-confirm\" [disabled]=\"!isConfirmClickable\" class=\"blue\">Confirm</button>\r\n                <!-- finalResponsibilities < 1 -->\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <app-loader  *ngIf=\"loader\"></app-loader>\r\n    \r\n</ng-container>\r\n    \r\n    <!-- --------------------------------------------------------------------upward is new one-------------------- -->", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::-webkit-scrollbar-thumb,::-webkit-scrollbar-thumb:hover{background:#747576;border-radius:16px}::-webkit-scrollbar{height:15px}.bulk-view{position:fixed;inset:0;z-index:11}.bulk-view-head{height:60px;padding:20px 24px;background:#161b2f;display:flex;justify-content:flex-start}.bulk-view-title{font-size:16px;line-height:20px;font-weight:400;margin:0;color:#fff}.bulk-view-body{height:calc(100vh - 110px);overflow:auto;width:100%;background:#FFFFFF}.bulk-view-body .exel-view{display:block}.bulk-view-body .exel-view-row{display:flex;width:100%}.bulk-view-body .exel-view-row.head .exel-view-column{font-weight:500;font-size:14px;min-height:26px;background:#f1f1f1;padding:0;word-break:unset}.bulk-view-body .exel-view-row.multi-column .exel-view-column{width:140px;min-width:140px}.bulk-view-body .exel-view-column{width:300px;min-width:300px;padding:0 10px;border-right:1px solid #dcdcdc;border-bottom:1px solid #dcdcdc;display:flex;align-items:center;justify-content:center;text-align:center;word-break:break-all;line-height:16px;font-size:12px;color:#161b2f;flex-wrap:wrap;position:relative}.bulk-view-body .exel-view-column i.icons{position:absolute;top:8px;right:10px;cursor:pointer;color:#d93b41}.bulk-view-body .exel-view-column.large{width:100%;min-width:auto}.bulk-view-body .exel-view-column.error{border:1px solid #EB2424!important;padding-right:24px}.bulk-view-body .exel-view-column.error+.error{border-left:none!important}.bulk-view-body .exel-view-column span.required{color:#eb2424;display:contents}.bulk-view-body .exel-view-column .exel-view-row .exel-view-column{width:100%}.bulk-view-body .exel-view-column.sl-no{background:#f1f1f1;width:60px;min-width:60px;min-height:30px;font-weight:400}.bulk-view-body .exel-view-column.sl-no.error{background:#eb242424;border:none;padding-right:10px;border-bottom:1px solid #dcdcdc}.bulk-view-body .exel-view-column.multi-column{padding:0;border:none}.bulk-view-body .exel-view-column.multi-column .exel-view-row{height:100%}.bulk-view-body .exel-view-column.multi-column .exel-view-column{width:50%;min-width:50%}.bulk-view-body .exel-view-column.multi-column .exel-view-column+.exel-view-column{border-left:none}.bulk-view-body.bulk{height:calc(100vh - 142px)}.bulk-view-body.bulk .exel-view-row.head{position:sticky;top:0;z-index:1}.bulk-view-body.bulk .exel-view-row.head .exel-view-column{min-height:34px}.bulk-view-body.bulk .exel-view-row.head .exel-view-column .info-text{font-size:10px;display:block;width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding:0 8px}.bulk-view-body.bulk .exel-view-row.two-column .exel-view-column{min-width:250px!important}.bulk-view-body.bulk .exel-view-row.three-column .exel-view-column,.bulk-view-body.bulk .exel-view-row.five-column .exel-view-column{width:200px;min-width:200px!important}.bulk-view-body.bulk .exel-view-column .exel-view-row .exel-view-column.small-column{width:120px;min-width:120px!important}.bulk-view-body.bulk .exel-view-column.multi-column .exel-view-column{min-width:unset}.bulk-view-body.bulk .exel-view-column.two-column{width:500px;min-width:500px!important}.bulk-view-body.bulk .exel-view-column.three-column{width:600px;min-width:600px!important}.bulk-view-body.bulk .exel-view-column.five-column{width:1000px;min-width:1000px!important}.bulk-view-option{background:#FFFFFF;border-top:1px solid #f1f1f1;padding:0 20px;position:fixed;width:100%;bottom:50px;display:flex;align-items:center}.bulk-view-option button{background:transparent;border-radius:0;border:none;border-left:1px solid #f1f1f1;color:#747576;font-size:11px;font-weight:500;padding:0 .5rem;margin:0;height:2rem;position:relative}.bulk-view-option button:last-of-type{border-right:1px solid #f1f1f1}.bulk-view-option button.active{color:#1e5dd3}.bulk-view-option button.active:before{background:#fff;content:\"\";position:absolute;top:-1px;left:0;height:1px;width:100%}.bulk-view-footer{height:50px;box-shadow:0 0 15px #1e03d259;padding:10px 20px;position:fixed;width:100%;bottom:0;display:flex;align-items:center;justify-content:space-between;background:#FFFFFF}.bulk-view-footer .left p{color:#747576;font-size:13px;font-weight:500;margin:0}.bulk-view-footer .right button{font-size:12px;background:#fff;border:1px solid #dcdcdc;color:#747576;border-radius:2px;padding:8px 18px;cursor:pointer;text-transform:uppercase}.bulk-view-footer .right button+button{margin-left:4px}.bulk-view-footer .right button.blue{color:#fff;background:#1E5DD3}.bulk-view-footer .right button:disabled{background:#F1F1F1;border-color:#f1f1f1;pointer-events:none;cursor:not-allowed;color:#747576}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: LoaderComponent$1, selector: "app-loader" }] });
+BulkResponsibilityViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: BulkResponsibilityViewComponent, selector: "app-bulk-responsibility-view", inputs: { responsibilityBulkUpload: "responsibilityBulkUpload", fileName: "fileName", defaultOwner: "defaultOwner", loader: "loader", tabType: "tabType", bulkUpload: "bulkUpload", responsibilityType: "responsibilityType" }, outputs: { submitResponsibilityBulkUpload: "submitResponsibilityBulkUpload", cancel: "cancel", selectedTab: "selectedTab" }, usesOnChanges: true, ngImport: i0, template: "\r\n<ng-container *ngIf=\"responsibilityType === 'singleTab'\">\r\n<div class=\"bulk-view\">\r\n    <div class=\"bulk-view-head\">\r\n        <h2 class=\"bulk-view-title\">\r\n            {{fileName}}\r\n        </h2>\r\n    </div>\r\n    <div class=\"bulk-view-body\">\r\n        <div class=\"exel-view\">\r\n            <div class=\"exel-view-row head\">\r\n                <div class=\"exel-view-column sl-no\">#</div>\r\n                <div class=\"exel-view-column\" *ngFor=\"let heading of responsibilityBulkUpload?.header\"\r\n                    [class.large]=\"heading && heading.startsWith('Inherent')\">\r\n                    <ng-container *ngIf=\"heading && !(heading.startsWith('Due')) && !(heading.startsWith('Oversight'))\">\r\n                        {{(heading.includes('*')? heading.replace('*', '') : heading)}}\r\n                        <span *ngIf=\"heading.includes('*')\" class=\"required\">*</span>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"heading && heading.startsWith('Due')\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Due Date</div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\">\r\n                            <div class=\"exel-view-column\">Day</div>\r\n                            <div class=\"exel-view-column\">Month</div>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"heading && heading.startsWith('Oversight')\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Oversight </div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\">\r\n                            <div class=\"exel-view-column\">Always Notify</div>\r\n                            <div class=\"exel-view-column\">Notify on Failure</div>\r\n                        </div>\r\n                    </ng-container>\r\n                </div>\r\n\r\n            </div>\r\n            <div class=\"exel-view-row\" *ngFor=\"let report of responsibilityBulkUpload?.reports; let i = index\">\r\n                <div class=\"exel-view-column sl-no\">{{i+1}}</div>\r\n\r\n                <div class=\"exel-view-column\" [class.error]=\"!report.responsibilityName\">{{report?.responsibilityName}}\r\n                    <i *ngIf=\"!report?.responsibilityName\" class=\"icons\"\r\n                        [appTooltip]=\"'Enter a name for this responsibility.'\" placement=\"bottom-right\" type=\"white\"\r\n                        delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                </div>\r\n                <div class=\"exel-view-column\">\r\n                    {{report?.assignor}}\r\n                    <i *ngIf=\"((report?.assignor) && (report?.notifyOnFailure == report?.assignor||report?.alwaysNotify == report?.assignor))\"\r\n                        class=\"icons\"\r\n                        [appTooltip]=\"'The Overseer cannot also be the Assignor of this responsibility. Select another user as the Assignor.'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i>\r\n<!--\r\n                    <i *ngIf=\"((report?.assignor) && (report?.reviewer == report?.assignor))\"\r\n                        class=\"icons\"\r\n                        [appTooltip]=\"'The Reviewer cannot also be the Assignor of this responsibility. Select another user as the Assignor.'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i>     -->\r\n                </div>\r\n                <div class=\"exel-view-column\">\r\n                    {{report?.assignee}}\r\n\r\n                    <i *ngIf=\"((report?.assignee) && (report?.notifyOnFailure == report?.assignee||report?.alwaysNotify == report?.assignee))\"\r\n                        class=\"icons\"\r\n                        [appTooltip]=\"'The Overseer cannot also be the Assignee of this responsibility. Select another user as the Assignee.'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i>\r\n\r\n                    <i *ngIf=\"((report?.assignee) && (report?.reviewer == report?.assignee))\"\r\n                        class=\"icons\"\r\n                        [appTooltip]=\"'The Reviewer cannot also be the Assignee of this responsibility. Select another user as the Assignee.'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i>\r\n                    <i *ngIf=\"(!report?.assignee) || (!report?.isValidUser)\"\r\n                    class=\"icons\"\r\n                    [appTooltip]=\"'Select the user responsible for completing this responsibility. '\"\r\n                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i>\r\n                </div>\r\n                <div class=\"exel-view-column\" id=\"resCategory\" *ngIf=\"report?.responsibilityCategory!==null\">{{report?.responsibilityCategory}}</div>\r\n                <div class=\"exel-view-column\" [class.error]=\"!report.frequency\">{{report?.frequency}}\r\n                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\r\n                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                </div>\r\n                <div class=\"exel-view-column multi-column\">\r\n                    <div class=\"exel-view-row\">\r\n                        <div class=\"exel-view-column\" [class.error]=\"!report.isValidDueDate\">{{report?.day}}\r\n                            <i *ngIf=\"!report?.isValidDueDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\r\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                            <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\r\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                        </div>\r\n                        <div class=\"exel-view-column\" [class.error]=\"!report.isValidDueDate\">{{report?.month}}\r\n                            <i *ngIf=\"!report?.isValidDueDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\r\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                            <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\r\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"exel-view-column\">{{report?.responsibilityWindow}}</div>\r\n                <div class=\"exel-view-column\">{{report?.failedAfter}}</div>\r\n                <div class=\"exel-view-column\">{{report?.reportClass}}</div>\r\n                <div class=\"exel-view-column\">{{report?.responsibilityCenter}}</div>\r\n                <div class=\"exel-view-column\">\r\n                    {{report?.reviewer}}\r\n\r\n                    <i *ngIf=\"(report?.reviewer) && ((report?.reviewer == report?.alwaysNotify) || (report?.reviewer == report?.notifyOnFailure))\"\r\n                        class=\"icons\"\r\n                        [appTooltip]=\"'The Overseer cannot also be the Reviewer of this responsibility. Select another user as the Reviewer'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i>\r\n\r\n                    <i *ngIf=\"report?.reviewer && (report?.reviewer == report?.assignee)\" class=\"icons\"\r\n                        [appTooltip]=\"'The Assignee cannot also be the Reviewer of this responsibility. Select another user as the Reviewer.'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i>\r\n                    <!-- <i *ngIf=\"(report?.reviewer && report?.assignor)\"\r\n                        class=\"icons\"\r\n                        [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Reviewer of this responsibility.':'You cannot be a Reviewer of this responsibility since you are the assignor. ') +'Select another user as the Reviewer'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i> -->\r\n                </div>\r\n                <div class=\"exel-view-column\">{{report?.reviewToBeCompletedWithin}}</div>\r\n                <div class=\"exel-view-column\">{{report?.reviewWillBeFailedAfter}}</div>\r\n                <div class=\"exel-view-column\">{{report?.formatForResponsibility}}</div>\r\n                <div class=\"exel-view-column\">{{report?.notes}}</div>\r\n                <div class=\"exel-view-column\">{{report?.documentEvidenceRequired}}</div>\r\n                <div class=\"exel-view-column multi-column\">\r\n                    <div class=\"exel-view-row\">\r\n                        <div class=\"exel-view-column\">\r\n                            {{report?.alwaysNotify}}\r\n                            <i *ngIf=\"(report?.alwaysNotify) && ((report?.reviewer == report?.alwaysNotify))\"\r\n                                class=\"icons\"\r\n                                [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\r\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                            </i>\r\n\r\n                            <i *ngIf=\"report?.alwaysNotify && (report?.alwaysNotify == report?.assignee)\" class=\"icons\"\r\n                                [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\r\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                            </i>\r\n                            <i *ngIf=\"((report?.alwaysNotify && report?.assignor) && (report?.alwaysNotify == report?.assignor)) ||((report?.alwaysNotify && (!report?.assignor)) && (report?.alwaysNotify == defaultOwner))\"\r\n                                class=\"icons\"\r\n                                [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Overseer of this responsibility. ':'You cannot be an Overseer of this responsibility since you are the Assignor. ') +'Select another user as the Overseer.'\"\r\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                            </i>\r\n                        </div>\r\n                        <div class=\"exel-view-column\">\r\n                            {{report?.notifyOnFailure}}\r\n                            <i *ngIf=\"(report?.notifyOnFailure) && ((report?.reviewer == report?.notifyOnFailure))\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n\r\n                        <i *ngIf=\"report?.notifyOnFailure && (report?.notifyOnFailure == report?.assignee)\" class=\"icons\"\r\n                            [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                        <i *ngIf=\"((report?.notifyOnFailure && report?.assignor) && (report?.notifyOnFailure == report?.assignor)) ||((report?.notifyOnFailure && (!report?.assignor)) && (report?.notifyOnFailure == defaultOwner))\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Overseer of this responsibility. ':'You cannot be an Overseer of this responsibility since you are the Assignor. ') +'Select another user as the Overseer.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n\r\n                <div class=\"exel-view-column\">{{report?.keyResponsibility}}</div>\r\n                <div class=\"exel-view-column\">{{report?.objective}}</div>\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"bulk-view-footer\">\r\n        <div class=\"left\">\r\n            <p>{{finalResponsibilities}} out of {{responsibilityBulkUpload?.reports?.length}} responsibilities will be\r\n                uploaded.</p>\r\n        </div>\r\n        <div class=\"right\">\r\n            <button (click)=\"close()\" id=\"bulk-resp-cancel\" >Cancel</button>\r\n            <button (click)=\"submit()\" id=\"bulk-resp-confirm\" [disabled]=\"finalResponsibilities<1\" class=\"blue\">Confirm</button>\r\n        </div>\r\n    </div>\r\n</div>\r\n<app-loader  *ngIf=\"loader\"></app-loader>\r\n\r\n</ng-container>\r\n\r\n<!-- --------------------------------------------------------------------upward is new one-------------------- -->\r\n<app-loader  *ngIf=\"loader\"></app-loader>\r\n\r\n\r\n\r\n\r\n\r\n\r\n<!-- HTML for multiple tabs -->\r\n<ng-container *ngIf=\"responsibilityType === 'multiTab'\">\r\n    <div class=\"bulk-view\">\r\n        <div class=\"bulk-view-head\">\r\n            <h2 class=\"bulk-view-title\">\r\n                {{fileName}}\r\n            </h2>\r\n        </div>\r\n        <div class=\"bulk-view-body bulk\">\r\n            <div class=\"exel-view\">\r\n                <div class=\"exel-view-row head\">\r\n                    <div class=\"exel-view-column sl-no\">#</div>\r\n                    <div class=\"exel-view-column\">Responsibility Name <span class=\"required\">*</span></div>\r\n                    <div class=\"exel-view-column\" *ngIf=\"responsibilityBulkUpload?.header.includes('Program')\" [class.three-column]=\"true\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Program</div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\r\n                            <div class=\"exel-view-column\">Program Type</div>\r\n                            <div class=\"exel-view-column\">Program</div>\r\n                            <div class=\"exel-view-column\">Program Category</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">Entrusted By</div>\r\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Entrust To <span class=\"required\">*</span></div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column\">Person or Group<span class=\"required\">*</span></div>\r\n                            <div class=\"exel-view-column\">All or Any Persons</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">Key Responsibility?</div>\r\n                    <div class=\"exel-view-column\" [class.five-column]=\"tabType === 'frequency' || tabType === 'onCompletion'\" [class.three-column]=\"tabType === 'ongoing'\">\r\n                        <div class=\"exel-view-row\">\r\n                            <!-- <div class=\"exel-view-column large\">Frequency of Occurrence and Completion Window <span class=\"required\">*</span></div> -->\r\n                            <div class=\"exel-view-column large\">{{responsibilityBulkUpload?.header.includes('Program') ? responsibilityBulkUpload?.header[8]?.slice(0, -1) : responsibilityBulkUpload?.header[5]?.slice(0, -1)}}<span class=\"required\">*</span></div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.five-column]=\"tabType === 'frequency' || tabType === 'onCompletion'\" [class.three-column]=\"tabType === 'ongoing'\">\r\n                            <ng-container *ngIf=\"tabType === 'frequency'\">\r\n                                <div class=\"exel-view-column\">Frequency <span class=\"required\">*</span></div>\r\n                                <div class=\"exel-view-column\">Due Date <span class=\"info-text\">(Day)</span></div>\r\n                                <div class=\"exel-view-column\">Due Date <span class=\"info-text\">(Month)</span></div>\r\n                                <div class=\"exel-view-column\">Start <span class=\"info-text\">(No. of days before the due date)</span></div>\r\n                                <div class=\"exel-view-column\">Fail <span class=\"info-text\" appTooltip=\"(No. of days after the due date. Select '0' if the responsibility must be completed on the due date)\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">(No. of days after the due date. Select \"0\" if the responsibility must be completed on the due date)</span></div>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"tabType === 'ongoing'\">\r\n                                <div class=\"exel-view-column\">Ongoing Frequency <span class=\"required\">*</span></div>\r\n                                <div class=\"exel-view-column\">Set a Reminder?</div>\r\n                                <div class=\"exel-view-column\">Frequency of Reminder</div>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"tabType === 'onCompletion'\">\r\n                                <div class=\"exel-view-column\">On Completion of Frequency <span class=\"required\">*</span></div>\r\n                                <div class=\"exel-view-column\">Parent Responsibility<span class=\"info-text\">(Day)</span></div>\r\n                                <div class=\"exel-view-column\">Due Date <span class=\"info-text\" appTooltip=\"(No. of days after completion of the Parent Responsibility)\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">(No. of days after completion of the Parent Responsibility)</span></div>\r\n                                <div class=\"exel-view-column\">Start <span class=\"info-text\" appTooltip=\"(No. of days before the due date)\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">(No. of days before the due date)</span></div>\r\n                                <div class=\"exel-view-column\">Fail <span class=\"info-text\" appTooltip=\"(No. of days after the due date. Select '0' if the responsibility must be completed on the due date)\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">(No. of days after the due date. Select \"0\" if the responsibility must be completed on the due date)</span></div>\r\n                            </ng-container>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">Responsibility Centre</div>\r\n                    <div class=\"exel-view-column\">Risk Class</div>\r\n                    <div class=\"exel-view-column\">Objective</div>\r\n                    <div class=\"exel-view-column\">Notes</div>\r\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Format & Evidence</div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\" [class.three-column]=\"false\">\r\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">Format</div>\r\n                            <div class=\"exel-view-column\">Format For Responsibility (link)</div>\r\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">Evidence</div>\r\n                        </div>\r\n                    </div>\r\n                    <!-- <div class=\"exel-view-column\">Assessments or Checkpoints</div> -->\r\n                    <div class=\"exel-view-column\" [class.three-column]=\"true\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Review of Responsibility</div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\r\n                            <div class=\"exel-view-column\">Reviewer</div>\r\n                            <div class=\"exel-view-column\">Review Start <span class=\"info-text\">(No. of days before the due date)</span></div>\r\n                            <div class=\"exel-view-column\">Review Fail <span class=\"info-text\" appTooltip=\"(No. of days after the due date. Select '0' if the responsibility must be reviewed on the due date)\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">(No. of days after the due date. Select \"0\" if the responsibility must be reviewed on the due date)</span></div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Overseer</div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column\">Always Notify</div>\r\n                            <div class=\"exel-view-column\">Notify on Failure</div>\r\n                        </div>\r\n                    </div>\r\n                    <!-- <div class=\"exel-view-column\">Overseer</div> -->\r\n\r\n                </div>\r\n                <div class=\"exel-view-row\" *ngFor=\"let report of responsibilityBulkUpload?.reports; let i = index\">\r\n                    <div class=\"exel-view-column sl-no\" [class.error]=\"!report?.isValid\">{{i+1}}</div>\r\n                    <div class=\"exel-view-column\" [class.error]=\"!report.responsibilityName\">{{report?.responsibilityName}} <i *ngIf=\"!report.responsibilityName\" class=\"icons\" [appTooltip]=\"'Enter a name for this responsibility.'\"  placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i></div>\r\n                    <div class=\"exel-view-column multi-column\" *ngIf=\"responsibilityBulkUpload?.header.includes('Program')\" [class.error]=\"false\" [class.three-column]=\"true\">\r\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\r\n                            <div class=\"exel-view-column\">{{report?.programType}}</div>\r\n                            <div class=\"exel-view-column\">{{report?.program}}</div>\r\n                            <div class=\"exel-view-column\">{{report?.programCategory}}</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">{{report?.assignor}}\r\n                        <!-- <i *ngIf=\"((report?.assignor) && (report?.reviewer === report?.assignor))\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"'The Reviewer cannot also be the Assignor of this responsibility. Select another user as the Assignor.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i> -->\r\n                    </div>\r\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column\" [class.error]=\"!report?.assignee || !report?.userValidateWithProgram?.isValidAssignee || (!report?.isValidUser)\">{{report?.assignee}}\r\n                                <!-- || (!report?.isValidUser) -->\r\n                                <i *ngIf=\"(!report?.assignee) || (!report?.isValidUser)\"\r\n                                    class=\"icons\"\r\n                                    [appTooltip]=\"'Select the user responsible for completing this responsibility. '\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                                <i *ngIf=\"(report?.assignee) && !report?.userValidateWithProgram?.isValidAssignee\"\r\n                                    class=\"icons\"\r\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                            </div>\r\n                            <div class=\"exel-view-column\">{{report?.assigneeType}}</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">{{report?.keyResponsibility}}</div>\r\n                    <div class=\"exel-view-column multi-column\" [class.five-column]=\"tabType === 'frequency' || tabType === 'onCompletion'\" [class.three-column]=\"tabType === 'ongoing'\">\r\n                        <ng-container *ngIf=\"tabType === 'frequency'\">\r\n                            <div class=\"exel-view-row multi-column\" [class.five-column]=\"true\">\r\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.frequency\">{{report?.frequency}}\r\n                                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                </div>\r\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.validDate || report?.isPastDate\">{{report?.day}}\r\n                                    <i *ngIf=\"!report?.validDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\r\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                    <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\r\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                </div>\r\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.validDate || report?.isPastDate\">{{report?.month}}\r\n                                    <i *ngIf=\"!report?.validDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\r\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                    <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\r\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                </div>\r\n                                <div class=\"exel-view-column\">{{report?.responsibilityWindow}}</div>\r\n                                <div class=\"exel-view-column\">{{report?.failedAfter}}</div>\r\n                            </div>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"tabType === 'ongoing'\">\r\n                            <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\r\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.frequency\">{{report?.frequency}}\r\n                                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                </div>\r\n                                <div class=\"exel-view-column\">{{report?.setReminder}}</div>\r\n                                <div class=\"exel-view-column\">{{report?.frequencyReminder}}</div>\r\n                            </div>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"tabType === 'onCompletion'\">\r\n                            <div class=\"exel-view-row multi-column\" [class.five-column]=\"true\">\r\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.frequency\">{{report?.frequency}}\r\n                                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                </div>\r\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.parentResponsibility\">{{report?.parentResponsibility}}\r\n                                    <i *ngIf=\"!report?.parentResponsibility\" class=\"icons\" [appTooltip]=\"'Select a parent responsibility on whose completion this responsibility will become active.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                </div>\r\n                                <div class=\"exel-view-column\">{{report?.dueDate}}</div>\r\n                                <div class=\"exel-view-column\">{{report?.responsibilityWindow}}</div>\r\n                                <div class=\"exel-view-column\">{{report?.failedAfter}}</div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">{{report?.responsibilityCenter}}</div>\r\n                    <div class=\"exel-view-column\">{{report?.reportClass}}</div>\r\n                    <div class=\"exel-view-column\">{{report?.objective}}</div>\r\n                    <div class=\"exel-view-column\">{{report?.notes}}</div>\r\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column multi-column\">\r\n                                <div class=\"exel-view-row multi-column\">\r\n                                    <div class=\"exel-view-column\" [class.small-column]=\"true\">{{report?.isFormat}}</div>\r\n                                    <div class=\"exel-view-column\">{{report?.formatForResponsibility}}</div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">{{report?.documentEvidenceRequired}}</div>\r\n                        </div>\r\n                    </div>\r\n                    <!-- <div class=\"exel-view-column\">{{report?.assessments}}</div> -->\r\n                    <div class=\"exel-view-column multi-column\" [class.three-column]=\"true\">\r\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\r\n                            <div class=\"exel-view-column\" [class.error]=\"report?.reviewer && (\r\n                              !report?.userValidateWithProgram?.isValidReviewer )\">{{report?.reviewer}}\r\n\r\n                        <!-- <i *ngIf=\"(report?.reviewer && report?.reviewer === report?.assignor)\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Reviewer of this responsibility.':'You cannot be a Reviewer of this responsibility since you are the assignor. ') +'Select another user as the Reviewer'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i> -->\r\n                        <i *ngIf=\"report?.reviewer && !report?.userValidateWithProgram?.isValidReviewer\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"'This user is not associated with the selected Program.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                            </div>\r\n                            <div class=\"exel-view-column\">{{report?.reviewToBeCompletedWithin}}</div>\r\n                            <div class=\"exel-view-column\">{{report?.reviewWillBeFailedAfter}}</div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column\" [class.error]=\"report?.overseer && (\r\n                              !report?.userValidateWithProgram?.isValidOverseer )\">\r\n                            {{report?.overseer}}\r\n\r\n                                <i *ngIf=\"(report?.overseer) && !report?.userValidateWithProgram?.isValidOverseer\"\r\n                                    class=\"icons\"\r\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                            </div>\r\n                            <div class=\"exel-view-column\" [class.error]=\"report?.notifyOnFailure && (\r\n                            !report?.userValidateWithProgram?.isValidNotifyOnFailure )\">\r\n                                {{report?.notifyOnFailure}}\r\n\r\n                                <i *ngIf=\"(report?.notifyOnFailure) && !report?.userValidateWithProgram?.isValidNotifyOnFailure\"\r\n                                    class=\"icons\"\r\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- <div class=\"exel-view-column\" [class.error]=\"(report?.overseer) && ((report?.overseer === report?.assignee) ||(report?.reviewer === report?.overseer) || (report?.overseer == report?.assignor) || (!report?.userValidateWithProgram?.isValidOverseer))\">\r\n                        {{report?.overseer}}\r\n                        <i *ngIf=\"(report?.overseer) && ((report?.reviewer === report?.overseer))\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n\r\n                        <i *ngIf=\"report?.overseer && (report?.overseer === report?.assignee)\" class=\"icons\"\r\n                            [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                        <i *ngIf=\"((report?.overseer) && (report?.overseer == report?.assignor))\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Overseer of this responsibility. ':'You cannot be an Overseer of this responsibility since you are the Assignor. ') +'Select another user as the Overseer.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                        <i *ngIf=\"!report?.userValidateWithProgram?.isValidOverseer\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"'Selected user is not a valid overseer for selected program.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                    </div> -->\r\n                </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n                <!-- ------------------------------------------------old code dynamic------------------------------------------------- -->\r\n\r\n                <!-- *ngFor=\"let report of responsibilityBulkUpload?.reports; let i = index\" -->\r\n            </div>\r\n        </div>\r\n        <div class=\"bulk-view-option\">\r\n            <button *ngIf=\"bulkUpload?.frequency?.reports?.length\" [class.active]=\"tabType === 'frequency'\" (click)=\"selectedTab.emit('frequency')\">Frequency Responsibilities</button>\r\n            <button *ngIf=\"bulkUpload?.ongoing?.reports?.length\" [class.active]=\"tabType === 'ongoing'\" (click)=\"selectedTab.emit('ongoing')\">Ongoing Responsibilities</button>\r\n            <button *ngIf=\"bulkUpload?.onCompletion?.reports?.length\" [class.active]=\"tabType === 'onCompletion'\" (click)=\"selectedTab.emit('onCompletion')\">On Completion Responsibilities</button>\r\n        </div>\r\n        <div class=\"bulk-view-footer\">\r\n            <!-- <div class=\"left\">\r\n                <p>{{finalResponsibilities}} out of {{responsibilityBulkUpload?.reports?.length}} responsibilities will be\r\n                    uploaded.</p>\r\n            </div> -->\r\n            <div class=\"left\">\r\n                <p>{{finalResponsibilities}} out of {{responsibilityMultiTabBulkUpload?.length}} {{responsibilityMultiTabBulkUpload?.length > 1 ? 'responsibilities' : 'responsibility'}} will be\r\n                    uploaded.</p>\r\n            </div>\r\n            <div class=\"right\">\r\n                <button (click)=\"close()\" id=\"bulk-resp-cancel\">Cancel</button>\r\n                <button (click)=\"submit()\" id=\"bulk-resp-confirm\" [disabled]=\"!isConfirmClickable\" class=\"blue\">Confirm</button>\r\n                <!-- finalResponsibilities < 1 -->\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <app-loader  *ngIf=\"loader\"></app-loader>\r\n\r\n</ng-container>\r\n\r\n    <!-- --------------------------------------------------------------------upward is new one-------------------- -->\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::-webkit-scrollbar-thumb,::-webkit-scrollbar-thumb:hover{background:#747576;border-radius:16px}::-webkit-scrollbar{height:15px}.bulk-view{position:fixed;inset:0;z-index:11}.bulk-view-head{height:60px;padding:20px 24px;background:#161b2f;display:flex;justify-content:flex-start}.bulk-view-title{font-size:16px;line-height:20px;font-weight:400;margin:0;color:#fff}.bulk-view-body{height:calc(100vh - 110px);overflow:auto;width:100%;background:#FFFFFF}.bulk-view-body .exel-view{display:block}.bulk-view-body .exel-view-row{display:flex;width:100%}.bulk-view-body .exel-view-row.head .exel-view-column{font-weight:500;font-size:14px;min-height:26px;background:#f1f1f1;padding:0;word-break:unset}.bulk-view-body .exel-view-row.multi-column .exel-view-column{width:140px;min-width:140px}.bulk-view-body .exel-view-column{width:300px;min-width:300px;padding:0 10px;border-right:1px solid #dcdcdc;border-bottom:1px solid #dcdcdc;display:flex;align-items:center;justify-content:center;text-align:center;word-break:break-all;line-height:16px;font-size:12px;color:#161b2f;flex-wrap:wrap;position:relative}.bulk-view-body .exel-view-column i.icons{position:absolute;top:8px;right:10px;cursor:pointer;color:#d93b41}.bulk-view-body .exel-view-column.large{width:100%;min-width:auto}.bulk-view-body .exel-view-column.error{border:1px solid #EB2424!important;padding-right:24px}.bulk-view-body .exel-view-column.error+.error{border-left:none!important}.bulk-view-body .exel-view-column span.required{color:#eb2424;display:contents}.bulk-view-body .exel-view-column .exel-view-row .exel-view-column{width:100%}.bulk-view-body .exel-view-column.sl-no{background:#f1f1f1;width:60px;min-width:60px;min-height:30px;font-weight:400}.bulk-view-body .exel-view-column.sl-no.error{background:#eb242424;border:none;padding-right:10px;border-bottom:1px solid #dcdcdc}.bulk-view-body .exel-view-column.multi-column{padding:0;border:none}.bulk-view-body .exel-view-column.multi-column .exel-view-row{height:100%}.bulk-view-body .exel-view-column.multi-column .exel-view-column{width:50%;min-width:50%}.bulk-view-body .exel-view-column.multi-column .exel-view-column+.exel-view-column{border-left:none}.bulk-view-body.bulk{height:calc(100vh - 142px)}.bulk-view-body.bulk .exel-view-row.head{position:sticky;top:0;z-index:1}.bulk-view-body.bulk .exel-view-row.head .exel-view-column{min-height:34px}.bulk-view-body.bulk .exel-view-row.head .exel-view-column .info-text{font-size:10px;display:block;width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding:0 8px}.bulk-view-body.bulk .exel-view-row.two-column .exel-view-column{min-width:250px!important}.bulk-view-body.bulk .exel-view-row.three-column .exel-view-column,.bulk-view-body.bulk .exel-view-row.five-column .exel-view-column{width:200px;min-width:200px!important}.bulk-view-body.bulk .exel-view-column .exel-view-row .exel-view-column.small-column{width:120px;min-width:120px!important}.bulk-view-body.bulk .exel-view-column.multi-column .exel-view-column{min-width:unset}.bulk-view-body.bulk .exel-view-column.two-column{width:500px;min-width:500px!important}.bulk-view-body.bulk .exel-view-column.three-column{width:600px;min-width:600px!important}.bulk-view-body.bulk .exel-view-column.five-column{width:1000px;min-width:1000px!important}.bulk-view-option{background:#FFFFFF;border-top:1px solid #f1f1f1;padding:0 20px;position:fixed;width:100%;bottom:50px;display:flex;align-items:center}.bulk-view-option button{background:transparent;border-radius:0;border:none;border-left:1px solid #f1f1f1;color:#747576;font-size:11px;font-weight:500;padding:0 .5rem;margin:0;height:2rem;position:relative}.bulk-view-option button:last-of-type{border-right:1px solid #f1f1f1}.bulk-view-option button.active{color:#1e5dd3}.bulk-view-option button.active:before{background:#fff;content:\"\";position:absolute;top:-1px;left:0;height:1px;width:100%}.bulk-view-footer{height:50px;box-shadow:0 0 15px #1e03d259;padding:10px 20px;position:fixed;width:100%;bottom:0;display:flex;align-items:center;justify-content:space-between;background:#FFFFFF}.bulk-view-footer .left p{color:#747576;font-size:13px;font-weight:500;margin:0}.bulk-view-footer .right button{font-size:12px;background:#fff;border:1px solid #dcdcdc;color:#747576;border-radius:2px;padding:8px 18px;cursor:pointer;text-transform:uppercase}.bulk-view-footer .right button+button{margin-left:4px}.bulk-view-footer .right button.blue{color:#fff;background:#1E5DD3}.bulk-view-footer .right button:disabled{background:#F1F1F1;border-color:#f1f1f1;pointer-events:none;cursor:not-allowed;color:#747576}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: LoaderComponent$1, selector: "app-loader" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BulkResponsibilityViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-bulk-responsibility-view', template: "\r\n<ng-container *ngIf=\"responsibilityType === 'singleTab'\">\r\n<div class=\"bulk-view\">\r\n    <div class=\"bulk-view-head\">\r\n        <h2 class=\"bulk-view-title\">\r\n            {{fileName}}\r\n        </h2>\r\n    </div>\r\n    <div class=\"bulk-view-body\">\r\n        <div class=\"exel-view\">\r\n            <div class=\"exel-view-row head\">\r\n                <div class=\"exel-view-column sl-no\">#</div>\r\n                <div class=\"exel-view-column\" *ngFor=\"let heading of responsibilityBulkUpload?.header\"\r\n                    [class.large]=\"heading && heading.startsWith('Inherent')\">\r\n                    <ng-container *ngIf=\"heading && !(heading.startsWith('Due')) && !(heading.startsWith('Oversight'))\">\r\n                        {{(heading.includes('*')? heading.replace('*', '') : heading)}}\r\n                        <span *ngIf=\"heading.includes('*')\" class=\"required\">*</span>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"heading && heading.startsWith('Due')\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Due Date</div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\">\r\n                            <div class=\"exel-view-column\">Day</div>\r\n                            <div class=\"exel-view-column\">Month</div>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"heading && heading.startsWith('Oversight')\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Oversight </div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\">\r\n                            <div class=\"exel-view-column\">Always Notify</div>\r\n                            <div class=\"exel-view-column\">Notify on Failure</div>\r\n                        </div>\r\n                    </ng-container>\r\n                </div>\r\n\r\n            </div>\r\n            <div class=\"exel-view-row\" *ngFor=\"let report of responsibilityBulkUpload?.reports; let i = index\">\r\n                <div class=\"exel-view-column sl-no\">{{i+1}}</div>\r\n\r\n                <div class=\"exel-view-column\" [class.error]=\"!report.responsibilityName\">{{report?.responsibilityName}}\r\n                    <i *ngIf=\"!report?.responsibilityName\" class=\"icons\"\r\n                        [appTooltip]=\"'Enter a name for this responsibility.'\" placement=\"bottom-right\" type=\"white\"\r\n                        delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                </div>\r\n                <div class=\"exel-view-column\">\r\n                    {{report?.assignor}}\r\n                    <i *ngIf=\"((report?.assignor) && (report?.notifyOnFailure == report?.assignor||report?.alwaysNotify == report?.assignor))\"\r\n                        class=\"icons\"\r\n                        [appTooltip]=\"'The Overseer cannot also be the Assignor of this responsibility. Select another user as the Assignor.'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i>\r\n<!--\r\n                    <i *ngIf=\"((report?.assignor) && (report?.reviewer == report?.assignor))\"\r\n                        class=\"icons\"\r\n                        [appTooltip]=\"'The Reviewer cannot also be the Assignor of this responsibility. Select another user as the Assignor.'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i>     -->\r\n                </div>\r\n                <div class=\"exel-view-column\">\r\n                    {{report?.assignee}}\r\n\r\n                    <i *ngIf=\"((report?.assignee) && (report?.notifyOnFailure == report?.assignee||report?.alwaysNotify == report?.assignee))\"\r\n                        class=\"icons\"\r\n                        [appTooltip]=\"'The Overseer cannot also be the Assignee of this responsibility. Select another user as the Assignee.'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i>\r\n\r\n                    <i *ngIf=\"((report?.assignee) && (report?.reviewer == report?.assignee))\"\r\n                        class=\"icons\"\r\n                        [appTooltip]=\"'The Reviewer cannot also be the Assignee of this responsibility. Select another user as the Assignee.'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i>\r\n                    <i *ngIf=\"(!report?.assignee) || (!report?.isValidUser)\"\r\n                    class=\"icons\"\r\n                    [appTooltip]=\"'Select the user responsible for completing this responsibility. '\"\r\n                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i>\r\n                </div>\r\n                <div class=\"exel-view-column\" id=\"resCategory\" *ngIf=\"report?.responsibilityCategory!==null\">{{report?.responsibilityCategory}}</div>\r\n                <div class=\"exel-view-column\" [class.error]=\"!report.frequency\">{{report?.frequency}}\r\n                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\r\n                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                </div>\r\n                <div class=\"exel-view-column multi-column\">\r\n                    <div class=\"exel-view-row\">\r\n                        <div class=\"exel-view-column\" [class.error]=\"!report.isValidDueDate\">{{report?.day}}\r\n                            <i *ngIf=\"!report?.isValidDueDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\r\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                            <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\r\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                        </div>\r\n                        <div class=\"exel-view-column\" [class.error]=\"!report.isValidDueDate\">{{report?.month}}\r\n                            <i *ngIf=\"!report?.isValidDueDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\r\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                            <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\r\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"exel-view-column\">{{report?.responsibilityWindow}}</div>\r\n                <div class=\"exel-view-column\">{{report?.failedAfter}}</div>\r\n                <div class=\"exel-view-column\">{{report?.reportClass}}</div>\r\n                <div class=\"exel-view-column\">{{report?.responsibilityCenter}}</div>\r\n                <div class=\"exel-view-column\">\r\n                    {{report?.reviewer}}\r\n\r\n                    <i *ngIf=\"(report?.reviewer) && ((report?.reviewer == report?.alwaysNotify) || (report?.reviewer == report?.notifyOnFailure))\"\r\n                        class=\"icons\"\r\n                        [appTooltip]=\"'The Overseer cannot also be the Reviewer of this responsibility. Select another user as the Reviewer'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i>\r\n\r\n                    <i *ngIf=\"report?.reviewer && (report?.reviewer == report?.assignee)\" class=\"icons\"\r\n                        [appTooltip]=\"'The Assignee cannot also be the Reviewer of this responsibility. Select another user as the Reviewer.'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i>\r\n                    <!-- <i *ngIf=\"(report?.reviewer && report?.assignor)\"\r\n                        class=\"icons\"\r\n                        [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Reviewer of this responsibility.':'You cannot be a Reviewer of this responsibility since you are the assignor. ') +'Select another user as the Reviewer'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i> -->\r\n                </div>\r\n                <div class=\"exel-view-column\">{{report?.reviewToBeCompletedWithin}}</div>\r\n                <div class=\"exel-view-column\">{{report?.reviewWillBeFailedAfter}}</div>\r\n                <div class=\"exel-view-column\">{{report?.formatForResponsibility}}</div>\r\n                <div class=\"exel-view-column\">{{report?.notes}}</div>\r\n                <div class=\"exel-view-column\">{{report?.documentEvidenceRequired}}</div>\r\n                <div class=\"exel-view-column multi-column\">\r\n                    <div class=\"exel-view-row\">\r\n                        <div class=\"exel-view-column\">\r\n                            {{report?.alwaysNotify}}\r\n                            <i *ngIf=\"(report?.alwaysNotify) && ((report?.reviewer == report?.alwaysNotify))\"\r\n                                class=\"icons\"\r\n                                [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\r\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                            </i>\r\n\r\n                            <i *ngIf=\"report?.alwaysNotify && (report?.alwaysNotify == report?.assignee)\" class=\"icons\"\r\n                                [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\r\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                            </i>\r\n                            <i *ngIf=\"((report?.alwaysNotify && report?.assignor) && (report?.alwaysNotify == report?.assignor)) ||((report?.alwaysNotify && (!report?.assignor)) && (report?.alwaysNotify == defaultOwner))\"\r\n                                class=\"icons\"\r\n                                [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Overseer of this responsibility. ':'You cannot be an Overseer of this responsibility since you are the Assignor. ') +'Select another user as the Overseer.'\"\r\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                            </i>\r\n                        </div>\r\n                        <div class=\"exel-view-column\">\r\n                            {{report?.notifyOnFailure}}\r\n                            <i *ngIf=\"(report?.notifyOnFailure) && ((report?.reviewer == report?.notifyOnFailure))\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n\r\n                        <i *ngIf=\"report?.notifyOnFailure && (report?.notifyOnFailure == report?.assignee)\" class=\"icons\"\r\n                            [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                        <i *ngIf=\"((report?.notifyOnFailure && report?.assignor) && (report?.notifyOnFailure == report?.assignor)) ||((report?.notifyOnFailure && (!report?.assignor)) && (report?.notifyOnFailure == defaultOwner))\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Overseer of this responsibility. ':'You cannot be an Overseer of this responsibility since you are the Assignor. ') +'Select another user as the Overseer.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n\r\n                <div class=\"exel-view-column\">{{report?.keyResponsibility}}</div>\r\n                <div class=\"exel-view-column\">{{report?.objective}}</div>\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"bulk-view-footer\">\r\n        <div class=\"left\">\r\n            <p>{{finalResponsibilities}} out of {{responsibilityBulkUpload?.reports?.length}} responsibilities will be\r\n                uploaded.</p>\r\n        </div>\r\n        <div class=\"right\">\r\n            <button (click)=\"close()\" id=\"bulk-resp-cancel\" >Cancel</button>\r\n            <button (click)=\"submit()\" id=\"bulk-resp-confirm\" [disabled]=\"finalResponsibilities<1\" class=\"blue\">Confirm</button>\r\n        </div>\r\n    </div>\r\n</div>\r\n<app-loader  *ngIf=\"loader\"></app-loader>\r\n\r\n</ng-container>\r\n\r\n<!-- --------------------------------------------------------------------upward is new one-------------------- -->\r\n<app-loader  *ngIf=\"loader\"></app-loader>\r\n\r\n\r\n\r\n\r\n\r\n\r\n<!-- HTML for multiple tabs -->\r\n<ng-container *ngIf=\"responsibilityType === 'multiTab'\">\r\n    <div class=\"bulk-view\">\r\n        <div class=\"bulk-view-head\">\r\n            <h2 class=\"bulk-view-title\">\r\n                {{fileName}}\r\n            </h2>\r\n        </div>\r\n        <div class=\"bulk-view-body bulk\">\r\n            <div class=\"exel-view\">\r\n                <div class=\"exel-view-row head\">\r\n                    <div class=\"exel-view-column sl-no\">#</div>\r\n                    <div class=\"exel-view-column\">Responsibility Name <span class=\"required\">*</span></div>\r\n                    <div class=\"exel-view-column\" *ngIf=\"responsibilityBulkUpload?.header.includes('Program')\" [class.three-column]=\"true\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Program</div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\r\n                            <div class=\"exel-view-column\">Program Type</div>\r\n                            <div class=\"exel-view-column\">Program</div>\r\n                            <div class=\"exel-view-column\">Program Category</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">Entrusted By</div>\r\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Entrust To <span class=\"required\">*</span></div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column\">Person or Group<span class=\"required\">*</span></div>\r\n                            <div class=\"exel-view-column\">All or Any Persons</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">Key Responsibility?</div>\r\n                    <div class=\"exel-view-column\" [class.five-column]=\"tabType === 'frequency' || tabType === 'onCompletion'\" [class.three-column]=\"tabType === 'ongoing'\">\r\n                        <div class=\"exel-view-row\">\r\n                            <!-- <div class=\"exel-view-column large\">Frequency of Occurrence and Completion Window <span class=\"required\">*</span></div> -->\r\n                            <div class=\"exel-view-column large\">{{responsibilityBulkUpload?.header.includes('Program') ? responsibilityBulkUpload?.header[8]?.slice(0, -1) : responsibilityBulkUpload?.header[5]?.slice(0, -1)}}<span class=\"required\">*</span></div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.five-column]=\"tabType === 'frequency' || tabType === 'onCompletion'\" [class.three-column]=\"tabType === 'ongoing'\">\r\n                            <ng-container *ngIf=\"tabType === 'frequency'\">\r\n                                <div class=\"exel-view-column\">Frequency <span class=\"required\">*</span></div>\r\n                                <div class=\"exel-view-column\">Due Date <span class=\"info-text\">(Day)</span></div>\r\n                                <div class=\"exel-view-column\">Due Date <span class=\"info-text\">(Month)</span></div>\r\n                                <div class=\"exel-view-column\">Start <span class=\"info-text\">(No. of days before the due date)</span></div>\r\n                                <div class=\"exel-view-column\">Fail <span class=\"info-text\" appTooltip=\"(No. of days after the due date. Select '0' if the responsibility must be completed on the due date)\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">(No. of days after the due date. Select \"0\" if the responsibility must be completed on the due date)</span></div>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"tabType === 'ongoing'\">\r\n                                <div class=\"exel-view-column\">Ongoing Frequency <span class=\"required\">*</span></div>\r\n                                <div class=\"exel-view-column\">Set a Reminder?</div>\r\n                                <div class=\"exel-view-column\">Frequency of Reminder</div>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"tabType === 'onCompletion'\">\r\n                                <div class=\"exel-view-column\">On Completion of Frequency <span class=\"required\">*</span></div>\r\n                                <div class=\"exel-view-column\">Parent Responsibility<span class=\"info-text\">(Day)</span></div>\r\n                                <div class=\"exel-view-column\">Due Date <span class=\"info-text\" appTooltip=\"(No. of days after completion of the Parent Responsibility)\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">(No. of days after completion of the Parent Responsibility)</span></div>\r\n                                <div class=\"exel-view-column\">Start <span class=\"info-text\" appTooltip=\"(No. of days before the due date)\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">(No. of days before the due date)</span></div>\r\n                                <div class=\"exel-view-column\">Fail <span class=\"info-text\" appTooltip=\"(No. of days after the due date. Select '0' if the responsibility must be completed on the due date)\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">(No. of days after the due date. Select \"0\" if the responsibility must be completed on the due date)</span></div>\r\n                            </ng-container>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">Responsibility Centre</div>\r\n                    <div class=\"exel-view-column\">Risk Class</div>\r\n                    <div class=\"exel-view-column\">Objective</div>\r\n                    <div class=\"exel-view-column\">Notes</div>\r\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Format & Evidence</div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\" [class.three-column]=\"false\">\r\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">Format</div>\r\n                            <div class=\"exel-view-column\">Format For Responsibility (link)</div>\r\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">Evidence</div>\r\n                        </div>\r\n                    </div>\r\n                    <!-- <div class=\"exel-view-column\">Assessments or Checkpoints</div> -->\r\n                    <div class=\"exel-view-column\" [class.three-column]=\"true\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Review of Responsibility</div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\r\n                            <div class=\"exel-view-column\">Reviewer</div>\r\n                            <div class=\"exel-view-column\">Review Start <span class=\"info-text\">(No. of days before the due date)</span></div>\r\n                            <div class=\"exel-view-column\">Review Fail <span class=\"info-text\" appTooltip=\"(No. of days after the due date. Select '0' if the responsibility must be reviewed on the due date)\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">(No. of days after the due date. Select \"0\" if the responsibility must be reviewed on the due date)</span></div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Overseer</div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column\">Always Notify</div>\r\n                            <div class=\"exel-view-column\">Notify on Failure</div>\r\n                        </div>\r\n                    </div>\r\n                    <!-- <div class=\"exel-view-column\">Overseer</div> -->\r\n    \r\n                </div>\r\n                <div class=\"exel-view-row\" *ngFor=\"let report of responsibilityBulkUpload?.reports; let i = index\">\r\n                    <div class=\"exel-view-column sl-no\" [class.error]=\"!report?.isValid\">{{i+1}}</div>\r\n                    <div class=\"exel-view-column\" [class.error]=\"!report.responsibilityName\">{{report?.responsibilityName}} <i *ngIf=\"!report.responsibilityName\" class=\"icons\" [appTooltip]=\"'Enter a name for this responsibility.'\"  placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i></div>\r\n                    <div class=\"exel-view-column multi-column\" *ngIf=\"responsibilityBulkUpload?.header.includes('Program')\" [class.error]=\"false\" [class.three-column]=\"true\">\r\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\r\n                            <div class=\"exel-view-column\">{{report?.programType}}</div>\r\n                            <div class=\"exel-view-column\">{{report?.program}}</div>\r\n                            <div class=\"exel-view-column\">{{report?.programCategory}}</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">{{report?.assignor}}\r\n                        <!-- <i *ngIf=\"((report?.assignor) && (report?.reviewer === report?.assignor))\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"'The Reviewer cannot also be the Assignor of this responsibility. Select another user as the Assignor.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i> -->\r\n                    </div>\r\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column\" [class.error]=\"!report?.assignee || !report?.userValidateWithProgram?.isValidAssignee || (!report?.isValidUser)\">{{report?.assignee}}\r\n                                <!-- || (!report?.isValidUser) -->\r\n                                <i *ngIf=\"(!report?.assignee) || (!report?.isValidUser)\"\r\n                                    class=\"icons\"\r\n                                    [appTooltip]=\"'Select the user responsible for completing this responsibility. '\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                                <i *ngIf=\"(report?.assignee) && !report?.userValidateWithProgram?.isValidAssignee\"\r\n                                    class=\"icons\"\r\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                            </div>\r\n                            <div class=\"exel-view-column\">{{report?.assigneeType}}</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">{{report?.keyResponsibility}}</div>\r\n                    <div class=\"exel-view-column multi-column\" [class.five-column]=\"tabType === 'frequency' || tabType === 'onCompletion'\" [class.three-column]=\"tabType === 'ongoing'\">\r\n                        <ng-container *ngIf=\"tabType === 'frequency'\">\r\n                            <div class=\"exel-view-row multi-column\" [class.five-column]=\"true\">\r\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.frequency\">{{report?.frequency}}\r\n                                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                </div>\r\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.validDate || report?.isPastDate\">{{report?.day}}\r\n                                    <i *ngIf=\"!report?.validDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\r\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                    <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\r\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                </div>\r\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.validDate || report?.isPastDate\">{{report?.month}}\r\n                                    <i *ngIf=\"!report?.validDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\r\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                    <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\r\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                </div>\r\n                                <div class=\"exel-view-column\">{{report?.responsibilityWindow}}</div>\r\n                                <div class=\"exel-view-column\">{{report?.failedAfter}}</div>\r\n                            </div>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"tabType === 'ongoing'\">\r\n                            <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\r\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.frequency\">{{report?.frequency}}\r\n                                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                </div>\r\n                                <div class=\"exel-view-column\">{{report?.setReminder}}</div>\r\n                                <div class=\"exel-view-column\">{{report?.frequencyReminder}}</div>\r\n                            </div>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"tabType === 'onCompletion'\">\r\n                            <div class=\"exel-view-row multi-column\" [class.five-column]=\"true\">\r\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.frequency\">{{report?.frequency}}\r\n                                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                </div>\r\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.parentResponsibility\">{{report?.parentResponsibility}}\r\n                                    <i *ngIf=\"!report?.parentResponsibility\" class=\"icons\" [appTooltip]=\"'Select a parent responsibility on whose completion this responsibility will become active.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                </div>\r\n                                <div class=\"exel-view-column\">{{report?.dueDate}}</div>\r\n                                <div class=\"exel-view-column\">{{report?.responsibilityWindow}}</div>\r\n                                <div class=\"exel-view-column\">{{report?.failedAfter}}</div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">{{report?.responsibilityCenter}}</div>\r\n                    <div class=\"exel-view-column\">{{report?.reportClass}}</div>\r\n                    <div class=\"exel-view-column\">{{report?.objective}}</div>\r\n                    <div class=\"exel-view-column\">{{report?.notes}}</div>\r\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column multi-column\">\r\n                                <div class=\"exel-view-row multi-column\">\r\n                                    <div class=\"exel-view-column\" [class.small-column]=\"true\">{{report?.isFormat}}</div>\r\n                                    <div class=\"exel-view-column\">{{report?.formatForResponsibility}}</div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">{{report?.documentEvidenceRequired}}</div>\r\n                        </div>\r\n                    </div>\r\n                    <!-- <div class=\"exel-view-column\">{{report?.assessments}}</div> -->\r\n                    <div class=\"exel-view-column multi-column\" [class.three-column]=\"true\">\r\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\r\n                            <div class=\"exel-view-column\" [class.error]=\"report?.reviewer && (\r\n                              !report?.userValidateWithProgram?.isValidReviewer )\">{{report?.reviewer}}\r\n            \r\n                        <!-- <i *ngIf=\"(report?.reviewer && report?.reviewer === report?.assignor)\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Reviewer of this responsibility.':'You cannot be a Reviewer of this responsibility since you are the assignor. ') +'Select another user as the Reviewer'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i> -->\r\n                        <i *ngIf=\"report?.reviewer && !report?.userValidateWithProgram?.isValidReviewer\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"'This user is not associated with the selected Program.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                            </div>\r\n                            <div class=\"exel-view-column\">{{report?.reviewToBeCompletedWithin}}</div>\r\n                            <div class=\"exel-view-column\">{{report?.reviewWillBeFailedAfter}}</div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column\" [class.error]=\"report?.overseer && (\r\n                              !report?.userValidateWithProgram?.isValidOverseer )\">\r\n                            {{report?.overseer}}\r\n                            \r\n                                <i *ngIf=\"(report?.overseer) && !report?.userValidateWithProgram?.isValidOverseer\"\r\n                                    class=\"icons\"\r\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                            </div>\r\n                            <div class=\"exel-view-column\" [class.error]=\"report?.notifyOnFailure && (\r\n                            !report?.userValidateWithProgram?.isValidNotifyOnFailure )\">\r\n                                {{report?.notifyOnFailure}}\r\n          \r\n                                <i *ngIf=\"(report?.notifyOnFailure) && !report?.userValidateWithProgram?.isValidNotifyOnFailure\"\r\n                                    class=\"icons\"\r\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    \r\n                    <!-- <div class=\"exel-view-column\" [class.error]=\"(report?.overseer) && ((report?.overseer === report?.assignee) ||(report?.reviewer === report?.overseer) || (report?.overseer == report?.assignor) || (!report?.userValidateWithProgram?.isValidOverseer))\">\r\n                        {{report?.overseer}}\r\n                        <i *ngIf=\"(report?.overseer) && ((report?.reviewer === report?.overseer))\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n\r\n                        <i *ngIf=\"report?.overseer && (report?.overseer === report?.assignee)\" class=\"icons\"\r\n                            [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                        <i *ngIf=\"((report?.overseer) && (report?.overseer == report?.assignor))\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Overseer of this responsibility. ':'You cannot be an Overseer of this responsibility since you are the Assignor. ') +'Select another user as the Overseer.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                        <i *ngIf=\"!report?.userValidateWithProgram?.isValidOverseer\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"'Selected user is not a valid overseer for selected program.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                    </div> -->\r\n                </div>\r\n    \r\n    \r\n    \r\n    \r\n    \r\n    \r\n                <!-- ------------------------------------------------old code dynamic------------------------------------------------- -->\r\n    \r\n                <!-- *ngFor=\"let report of responsibilityBulkUpload?.reports; let i = index\" -->\r\n            </div>\r\n        </div>\r\n        <div class=\"bulk-view-option\">\r\n            <button *ngIf=\"bulkUpload?.frequency?.reports?.length\" [class.active]=\"tabType === 'frequency'\" (click)=\"selectedTab.emit('frequency')\">Frequency Responsibilities</button>\r\n            <button *ngIf=\"bulkUpload?.ongoing?.reports?.length\" [class.active]=\"tabType === 'ongoing'\" (click)=\"selectedTab.emit('ongoing')\">Ongoing Responsibilities</button>\r\n            <button *ngIf=\"bulkUpload?.onCompletion?.reports?.length\" [class.active]=\"tabType === 'onCompletion'\" (click)=\"selectedTab.emit('onCompletion')\">On Completion Responsibilities</button>\r\n        </div>\r\n        <div class=\"bulk-view-footer\">\r\n            <!-- <div class=\"left\">\r\n                <p>{{finalResponsibilities}} out of {{responsibilityBulkUpload?.reports?.length}} responsibilities will be\r\n                    uploaded.</p>\r\n            </div> -->\r\n            <div class=\"left\">\r\n                <p>{{finalResponsibilities}} out of {{responsibilityMultiTabBulkUpload?.length}} {{responsibilityMultiTabBulkUpload?.length > 1 ? 'responsibilities' : 'responsibility'}} will be\r\n                    uploaded.</p>\r\n            </div>\r\n            <div class=\"right\">\r\n                <button (click)=\"close()\" id=\"bulk-resp-cancel\">Cancel</button>\r\n                <button (click)=\"submit()\" id=\"bulk-resp-confirm\" [disabled]=\"!isConfirmClickable\" class=\"blue\">Confirm</button>\r\n                <!-- finalResponsibilities < 1 -->\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <app-loader  *ngIf=\"loader\"></app-loader>\r\n    \r\n</ng-container>\r\n    \r\n    <!-- --------------------------------------------------------------------upward is new one-------------------- -->", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::-webkit-scrollbar-thumb,::-webkit-scrollbar-thumb:hover{background:#747576;border-radius:16px}::-webkit-scrollbar{height:15px}.bulk-view{position:fixed;inset:0;z-index:11}.bulk-view-head{height:60px;padding:20px 24px;background:#161b2f;display:flex;justify-content:flex-start}.bulk-view-title{font-size:16px;line-height:20px;font-weight:400;margin:0;color:#fff}.bulk-view-body{height:calc(100vh - 110px);overflow:auto;width:100%;background:#FFFFFF}.bulk-view-body .exel-view{display:block}.bulk-view-body .exel-view-row{display:flex;width:100%}.bulk-view-body .exel-view-row.head .exel-view-column{font-weight:500;font-size:14px;min-height:26px;background:#f1f1f1;padding:0;word-break:unset}.bulk-view-body .exel-view-row.multi-column .exel-view-column{width:140px;min-width:140px}.bulk-view-body .exel-view-column{width:300px;min-width:300px;padding:0 10px;border-right:1px solid #dcdcdc;border-bottom:1px solid #dcdcdc;display:flex;align-items:center;justify-content:center;text-align:center;word-break:break-all;line-height:16px;font-size:12px;color:#161b2f;flex-wrap:wrap;position:relative}.bulk-view-body .exel-view-column i.icons{position:absolute;top:8px;right:10px;cursor:pointer;color:#d93b41}.bulk-view-body .exel-view-column.large{width:100%;min-width:auto}.bulk-view-body .exel-view-column.error{border:1px solid #EB2424!important;padding-right:24px}.bulk-view-body .exel-view-column.error+.error{border-left:none!important}.bulk-view-body .exel-view-column span.required{color:#eb2424;display:contents}.bulk-view-body .exel-view-column .exel-view-row .exel-view-column{width:100%}.bulk-view-body .exel-view-column.sl-no{background:#f1f1f1;width:60px;min-width:60px;min-height:30px;font-weight:400}.bulk-view-body .exel-view-column.sl-no.error{background:#eb242424;border:none;padding-right:10px;border-bottom:1px solid #dcdcdc}.bulk-view-body .exel-view-column.multi-column{padding:0;border:none}.bulk-view-body .exel-view-column.multi-column .exel-view-row{height:100%}.bulk-view-body .exel-view-column.multi-column .exel-view-column{width:50%;min-width:50%}.bulk-view-body .exel-view-column.multi-column .exel-view-column+.exel-view-column{border-left:none}.bulk-view-body.bulk{height:calc(100vh - 142px)}.bulk-view-body.bulk .exel-view-row.head{position:sticky;top:0;z-index:1}.bulk-view-body.bulk .exel-view-row.head .exel-view-column{min-height:34px}.bulk-view-body.bulk .exel-view-row.head .exel-view-column .info-text{font-size:10px;display:block;width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding:0 8px}.bulk-view-body.bulk .exel-view-row.two-column .exel-view-column{min-width:250px!important}.bulk-view-body.bulk .exel-view-row.three-column .exel-view-column,.bulk-view-body.bulk .exel-view-row.five-column .exel-view-column{width:200px;min-width:200px!important}.bulk-view-body.bulk .exel-view-column .exel-view-row .exel-view-column.small-column{width:120px;min-width:120px!important}.bulk-view-body.bulk .exel-view-column.multi-column .exel-view-column{min-width:unset}.bulk-view-body.bulk .exel-view-column.two-column{width:500px;min-width:500px!important}.bulk-view-body.bulk .exel-view-column.three-column{width:600px;min-width:600px!important}.bulk-view-body.bulk .exel-view-column.five-column{width:1000px;min-width:1000px!important}.bulk-view-option{background:#FFFFFF;border-top:1px solid #f1f1f1;padding:0 20px;position:fixed;width:100%;bottom:50px;display:flex;align-items:center}.bulk-view-option button{background:transparent;border-radius:0;border:none;border-left:1px solid #f1f1f1;color:#747576;font-size:11px;font-weight:500;padding:0 .5rem;margin:0;height:2rem;position:relative}.bulk-view-option button:last-of-type{border-right:1px solid #f1f1f1}.bulk-view-option button.active{color:#1e5dd3}.bulk-view-option button.active:before{background:#fff;content:\"\";position:absolute;top:-1px;left:0;height:1px;width:100%}.bulk-view-footer{height:50px;box-shadow:0 0 15px #1e03d259;padding:10px 20px;position:fixed;width:100%;bottom:0;display:flex;align-items:center;justify-content:space-between;background:#FFFFFF}.bulk-view-footer .left p{color:#747576;font-size:13px;font-weight:500;margin:0}.bulk-view-footer .right button{font-size:12px;background:#fff;border:1px solid #dcdcdc;color:#747576;border-radius:2px;padding:8px 18px;cursor:pointer;text-transform:uppercase}.bulk-view-footer .right button+button{margin-left:4px}.bulk-view-footer .right button.blue{color:#fff;background:#1E5DD3}.bulk-view-footer .right button:disabled{background:#F1F1F1;border-color:#f1f1f1;pointer-events:none;cursor:not-allowed;color:#747576}\n"] }]
+            args: [{ selector: 'app-bulk-responsibility-view', template: "\r\n<ng-container *ngIf=\"responsibilityType === 'singleTab'\">\r\n<div class=\"bulk-view\">\r\n    <div class=\"bulk-view-head\">\r\n        <h2 class=\"bulk-view-title\">\r\n            {{fileName}}\r\n        </h2>\r\n    </div>\r\n    <div class=\"bulk-view-body\">\r\n        <div class=\"exel-view\">\r\n            <div class=\"exel-view-row head\">\r\n                <div class=\"exel-view-column sl-no\">#</div>\r\n                <div class=\"exel-view-column\" *ngFor=\"let heading of responsibilityBulkUpload?.header\"\r\n                    [class.large]=\"heading && heading.startsWith('Inherent')\">\r\n                    <ng-container *ngIf=\"heading && !(heading.startsWith('Due')) && !(heading.startsWith('Oversight'))\">\r\n                        {{(heading.includes('*')? heading.replace('*', '') : heading)}}\r\n                        <span *ngIf=\"heading.includes('*')\" class=\"required\">*</span>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"heading && heading.startsWith('Due')\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Due Date</div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\">\r\n                            <div class=\"exel-view-column\">Day</div>\r\n                            <div class=\"exel-view-column\">Month</div>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"heading && heading.startsWith('Oversight')\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Oversight </div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\">\r\n                            <div class=\"exel-view-column\">Always Notify</div>\r\n                            <div class=\"exel-view-column\">Notify on Failure</div>\r\n                        </div>\r\n                    </ng-container>\r\n                </div>\r\n\r\n            </div>\r\n            <div class=\"exel-view-row\" *ngFor=\"let report of responsibilityBulkUpload?.reports; let i = index\">\r\n                <div class=\"exel-view-column sl-no\">{{i+1}}</div>\r\n\r\n                <div class=\"exel-view-column\" [class.error]=\"!report.responsibilityName\">{{report?.responsibilityName}}\r\n                    <i *ngIf=\"!report?.responsibilityName\" class=\"icons\"\r\n                        [appTooltip]=\"'Enter a name for this responsibility.'\" placement=\"bottom-right\" type=\"white\"\r\n                        delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                </div>\r\n                <div class=\"exel-view-column\">\r\n                    {{report?.assignor}}\r\n                    <i *ngIf=\"((report?.assignor) && (report?.notifyOnFailure == report?.assignor||report?.alwaysNotify == report?.assignor))\"\r\n                        class=\"icons\"\r\n                        [appTooltip]=\"'The Overseer cannot also be the Assignor of this responsibility. Select another user as the Assignor.'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i>\r\n<!--\r\n                    <i *ngIf=\"((report?.assignor) && (report?.reviewer == report?.assignor))\"\r\n                        class=\"icons\"\r\n                        [appTooltip]=\"'The Reviewer cannot also be the Assignor of this responsibility. Select another user as the Assignor.'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i>     -->\r\n                </div>\r\n                <div class=\"exel-view-column\">\r\n                    {{report?.assignee}}\r\n\r\n                    <i *ngIf=\"((report?.assignee) && (report?.notifyOnFailure == report?.assignee||report?.alwaysNotify == report?.assignee))\"\r\n                        class=\"icons\"\r\n                        [appTooltip]=\"'The Overseer cannot also be the Assignee of this responsibility. Select another user as the Assignee.'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i>\r\n\r\n                    <i *ngIf=\"((report?.assignee) && (report?.reviewer == report?.assignee))\"\r\n                        class=\"icons\"\r\n                        [appTooltip]=\"'The Reviewer cannot also be the Assignee of this responsibility. Select another user as the Assignee.'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i>\r\n                    <i *ngIf=\"(!report?.assignee) || (!report?.isValidUser)\"\r\n                    class=\"icons\"\r\n                    [appTooltip]=\"'Select the user responsible for completing this responsibility. '\"\r\n                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i>\r\n                </div>\r\n                <div class=\"exel-view-column\" id=\"resCategory\" *ngIf=\"report?.responsibilityCategory!==null\">{{report?.responsibilityCategory}}</div>\r\n                <div class=\"exel-view-column\" [class.error]=\"!report.frequency\">{{report?.frequency}}\r\n                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\r\n                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                </div>\r\n                <div class=\"exel-view-column multi-column\">\r\n                    <div class=\"exel-view-row\">\r\n                        <div class=\"exel-view-column\" [class.error]=\"!report.isValidDueDate\">{{report?.day}}\r\n                            <i *ngIf=\"!report?.isValidDueDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\r\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                            <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\r\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                        </div>\r\n                        <div class=\"exel-view-column\" [class.error]=\"!report.isValidDueDate\">{{report?.month}}\r\n                            <i *ngIf=\"!report?.isValidDueDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\r\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                            <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\r\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"exel-view-column\">{{report?.responsibilityWindow}}</div>\r\n                <div class=\"exel-view-column\">{{report?.failedAfter}}</div>\r\n                <div class=\"exel-view-column\">{{report?.reportClass}}</div>\r\n                <div class=\"exel-view-column\">{{report?.responsibilityCenter}}</div>\r\n                <div class=\"exel-view-column\">\r\n                    {{report?.reviewer}}\r\n\r\n                    <i *ngIf=\"(report?.reviewer) && ((report?.reviewer == report?.alwaysNotify) || (report?.reviewer == report?.notifyOnFailure))\"\r\n                        class=\"icons\"\r\n                        [appTooltip]=\"'The Overseer cannot also be the Reviewer of this responsibility. Select another user as the Reviewer'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i>\r\n\r\n                    <i *ngIf=\"report?.reviewer && (report?.reviewer == report?.assignee)\" class=\"icons\"\r\n                        [appTooltip]=\"'The Assignee cannot also be the Reviewer of this responsibility. Select another user as the Reviewer.'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i>\r\n                    <!-- <i *ngIf=\"(report?.reviewer && report?.assignor)\"\r\n                        class=\"icons\"\r\n                        [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Reviewer of this responsibility.':'You cannot be a Reviewer of this responsibility since you are the assignor. ') +'Select another user as the Reviewer'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i> -->\r\n                </div>\r\n                <div class=\"exel-view-column\">{{report?.reviewToBeCompletedWithin}}</div>\r\n                <div class=\"exel-view-column\">{{report?.reviewWillBeFailedAfter}}</div>\r\n                <div class=\"exel-view-column\">{{report?.formatForResponsibility}}</div>\r\n                <div class=\"exel-view-column\">{{report?.notes}}</div>\r\n                <div class=\"exel-view-column\">{{report?.documentEvidenceRequired}}</div>\r\n                <div class=\"exel-view-column multi-column\">\r\n                    <div class=\"exel-view-row\">\r\n                        <div class=\"exel-view-column\">\r\n                            {{report?.alwaysNotify}}\r\n                            <i *ngIf=\"(report?.alwaysNotify) && ((report?.reviewer == report?.alwaysNotify))\"\r\n                                class=\"icons\"\r\n                                [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\r\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                            </i>\r\n\r\n                            <i *ngIf=\"report?.alwaysNotify && (report?.alwaysNotify == report?.assignee)\" class=\"icons\"\r\n                                [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\r\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                            </i>\r\n                            <i *ngIf=\"((report?.alwaysNotify && report?.assignor) && (report?.alwaysNotify == report?.assignor)) ||((report?.alwaysNotify && (!report?.assignor)) && (report?.alwaysNotify == defaultOwner))\"\r\n                                class=\"icons\"\r\n                                [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Overseer of this responsibility. ':'You cannot be an Overseer of this responsibility since you are the Assignor. ') +'Select another user as the Overseer.'\"\r\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                            </i>\r\n                        </div>\r\n                        <div class=\"exel-view-column\">\r\n                            {{report?.notifyOnFailure}}\r\n                            <i *ngIf=\"(report?.notifyOnFailure) && ((report?.reviewer == report?.notifyOnFailure))\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n\r\n                        <i *ngIf=\"report?.notifyOnFailure && (report?.notifyOnFailure == report?.assignee)\" class=\"icons\"\r\n                            [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                        <i *ngIf=\"((report?.notifyOnFailure && report?.assignor) && (report?.notifyOnFailure == report?.assignor)) ||((report?.notifyOnFailure && (!report?.assignor)) && (report?.notifyOnFailure == defaultOwner))\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Overseer of this responsibility. ':'You cannot be an Overseer of this responsibility since you are the Assignor. ') +'Select another user as the Overseer.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n\r\n                <div class=\"exel-view-column\">{{report?.keyResponsibility}}</div>\r\n                <div class=\"exel-view-column\">{{report?.objective}}</div>\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"bulk-view-footer\">\r\n        <div class=\"left\">\r\n            <p>{{finalResponsibilities}} out of {{responsibilityBulkUpload?.reports?.length}} responsibilities will be\r\n                uploaded.</p>\r\n        </div>\r\n        <div class=\"right\">\r\n            <button (click)=\"close()\" id=\"bulk-resp-cancel\" >Cancel</button>\r\n            <button (click)=\"submit()\" id=\"bulk-resp-confirm\" [disabled]=\"finalResponsibilities<1\" class=\"blue\">Confirm</button>\r\n        </div>\r\n    </div>\r\n</div>\r\n<app-loader  *ngIf=\"loader\"></app-loader>\r\n\r\n</ng-container>\r\n\r\n<!-- --------------------------------------------------------------------upward is new one-------------------- -->\r\n<app-loader  *ngIf=\"loader\"></app-loader>\r\n\r\n\r\n\r\n\r\n\r\n\r\n<!-- HTML for multiple tabs -->\r\n<ng-container *ngIf=\"responsibilityType === 'multiTab'\">\r\n    <div class=\"bulk-view\">\r\n        <div class=\"bulk-view-head\">\r\n            <h2 class=\"bulk-view-title\">\r\n                {{fileName}}\r\n            </h2>\r\n        </div>\r\n        <div class=\"bulk-view-body bulk\">\r\n            <div class=\"exel-view\">\r\n                <div class=\"exel-view-row head\">\r\n                    <div class=\"exel-view-column sl-no\">#</div>\r\n                    <div class=\"exel-view-column\">Responsibility Name <span class=\"required\">*</span></div>\r\n                    <div class=\"exel-view-column\" *ngIf=\"responsibilityBulkUpload?.header.includes('Program')\" [class.three-column]=\"true\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Program</div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\r\n                            <div class=\"exel-view-column\">Program Type</div>\r\n                            <div class=\"exel-view-column\">Program</div>\r\n                            <div class=\"exel-view-column\">Program Category</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">Entrusted By</div>\r\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Entrust To <span class=\"required\">*</span></div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column\">Person or Group<span class=\"required\">*</span></div>\r\n                            <div class=\"exel-view-column\">All or Any Persons</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">Key Responsibility?</div>\r\n                    <div class=\"exel-view-column\" [class.five-column]=\"tabType === 'frequency' || tabType === 'onCompletion'\" [class.three-column]=\"tabType === 'ongoing'\">\r\n                        <div class=\"exel-view-row\">\r\n                            <!-- <div class=\"exel-view-column large\">Frequency of Occurrence and Completion Window <span class=\"required\">*</span></div> -->\r\n                            <div class=\"exel-view-column large\">{{responsibilityBulkUpload?.header.includes('Program') ? responsibilityBulkUpload?.header[8]?.slice(0, -1) : responsibilityBulkUpload?.header[5]?.slice(0, -1)}}<span class=\"required\">*</span></div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.five-column]=\"tabType === 'frequency' || tabType === 'onCompletion'\" [class.three-column]=\"tabType === 'ongoing'\">\r\n                            <ng-container *ngIf=\"tabType === 'frequency'\">\r\n                                <div class=\"exel-view-column\">Frequency <span class=\"required\">*</span></div>\r\n                                <div class=\"exel-view-column\">Due Date <span class=\"info-text\">(Day)</span></div>\r\n                                <div class=\"exel-view-column\">Due Date <span class=\"info-text\">(Month)</span></div>\r\n                                <div class=\"exel-view-column\">Start <span class=\"info-text\">(No. of days before the due date)</span></div>\r\n                                <div class=\"exel-view-column\">Fail <span class=\"info-text\" appTooltip=\"(No. of days after the due date. Select '0' if the responsibility must be completed on the due date)\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">(No. of days after the due date. Select \"0\" if the responsibility must be completed on the due date)</span></div>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"tabType === 'ongoing'\">\r\n                                <div class=\"exel-view-column\">Ongoing Frequency <span class=\"required\">*</span></div>\r\n                                <div class=\"exel-view-column\">Set a Reminder?</div>\r\n                                <div class=\"exel-view-column\">Frequency of Reminder</div>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"tabType === 'onCompletion'\">\r\n                                <div class=\"exel-view-column\">On Completion of Frequency <span class=\"required\">*</span></div>\r\n                                <div class=\"exel-view-column\">Parent Responsibility<span class=\"info-text\">(Day)</span></div>\r\n                                <div class=\"exel-view-column\">Due Date <span class=\"info-text\" appTooltip=\"(No. of days after completion of the Parent Responsibility)\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">(No. of days after completion of the Parent Responsibility)</span></div>\r\n                                <div class=\"exel-view-column\">Start <span class=\"info-text\" appTooltip=\"(No. of days before the due date)\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">(No. of days before the due date)</span></div>\r\n                                <div class=\"exel-view-column\">Fail <span class=\"info-text\" appTooltip=\"(No. of days after the due date. Select '0' if the responsibility must be completed on the due date)\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">(No. of days after the due date. Select \"0\" if the responsibility must be completed on the due date)</span></div>\r\n                            </ng-container>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">Responsibility Centre</div>\r\n                    <div class=\"exel-view-column\">Risk Class</div>\r\n                    <div class=\"exel-view-column\">Objective</div>\r\n                    <div class=\"exel-view-column\">Notes</div>\r\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Format & Evidence</div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\" [class.three-column]=\"false\">\r\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">Format</div>\r\n                            <div class=\"exel-view-column\">Format For Responsibility (link)</div>\r\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">Evidence</div>\r\n                        </div>\r\n                    </div>\r\n                    <!-- <div class=\"exel-view-column\">Assessments or Checkpoints</div> -->\r\n                    <div class=\"exel-view-column\" [class.three-column]=\"true\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Review of Responsibility</div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\r\n                            <div class=\"exel-view-column\">Reviewer</div>\r\n                            <div class=\"exel-view-column\">Review Start <span class=\"info-text\">(No. of days before the due date)</span></div>\r\n                            <div class=\"exel-view-column\">Review Fail <span class=\"info-text\" appTooltip=\"(No. of days after the due date. Select '0' if the responsibility must be reviewed on the due date)\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">(No. of days after the due date. Select \"0\" if the responsibility must be reviewed on the due date)</span></div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Overseer</div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column\">Always Notify</div>\r\n                            <div class=\"exel-view-column\">Notify on Failure</div>\r\n                        </div>\r\n                    </div>\r\n                    <!-- <div class=\"exel-view-column\">Overseer</div> -->\r\n\r\n                </div>\r\n                <div class=\"exel-view-row\" *ngFor=\"let report of responsibilityBulkUpload?.reports; let i = index\">\r\n                    <div class=\"exel-view-column sl-no\" [class.error]=\"!report?.isValid\">{{i+1}}</div>\r\n                    <div class=\"exel-view-column\" [class.error]=\"!report.responsibilityName\">{{report?.responsibilityName}} <i *ngIf=\"!report.responsibilityName\" class=\"icons\" [appTooltip]=\"'Enter a name for this responsibility.'\"  placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i></div>\r\n                    <div class=\"exel-view-column multi-column\" *ngIf=\"responsibilityBulkUpload?.header.includes('Program')\" [class.error]=\"false\" [class.three-column]=\"true\">\r\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\r\n                            <div class=\"exel-view-column\">{{report?.programType}}</div>\r\n                            <div class=\"exel-view-column\">{{report?.program}}</div>\r\n                            <div class=\"exel-view-column\">{{report?.programCategory}}</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">{{report?.assignor}}\r\n                        <!-- <i *ngIf=\"((report?.assignor) && (report?.reviewer === report?.assignor))\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"'The Reviewer cannot also be the Assignor of this responsibility. Select another user as the Assignor.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i> -->\r\n                    </div>\r\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column\" [class.error]=\"!report?.assignee || !report?.userValidateWithProgram?.isValidAssignee || (!report?.isValidUser)\">{{report?.assignee}}\r\n                                <!-- || (!report?.isValidUser) -->\r\n                                <i *ngIf=\"(!report?.assignee) || (!report?.isValidUser)\"\r\n                                    class=\"icons\"\r\n                                    [appTooltip]=\"'Select the user responsible for completing this responsibility. '\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                                <i *ngIf=\"(report?.assignee) && !report?.userValidateWithProgram?.isValidAssignee\"\r\n                                    class=\"icons\"\r\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                            </div>\r\n                            <div class=\"exel-view-column\">{{report?.assigneeType}}</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">{{report?.keyResponsibility}}</div>\r\n                    <div class=\"exel-view-column multi-column\" [class.five-column]=\"tabType === 'frequency' || tabType === 'onCompletion'\" [class.three-column]=\"tabType === 'ongoing'\">\r\n                        <ng-container *ngIf=\"tabType === 'frequency'\">\r\n                            <div class=\"exel-view-row multi-column\" [class.five-column]=\"true\">\r\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.frequency\">{{report?.frequency}}\r\n                                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                </div>\r\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.validDate || report?.isPastDate\">{{report?.day}}\r\n                                    <i *ngIf=\"!report?.validDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\r\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                    <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\r\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                </div>\r\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.validDate || report?.isPastDate\">{{report?.month}}\r\n                                    <i *ngIf=\"!report?.validDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\r\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                    <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\r\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                </div>\r\n                                <div class=\"exel-view-column\">{{report?.responsibilityWindow}}</div>\r\n                                <div class=\"exel-view-column\">{{report?.failedAfter}}</div>\r\n                            </div>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"tabType === 'ongoing'\">\r\n                            <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\r\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.frequency\">{{report?.frequency}}\r\n                                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                </div>\r\n                                <div class=\"exel-view-column\">{{report?.setReminder}}</div>\r\n                                <div class=\"exel-view-column\">{{report?.frequencyReminder}}</div>\r\n                            </div>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"tabType === 'onCompletion'\">\r\n                            <div class=\"exel-view-row multi-column\" [class.five-column]=\"true\">\r\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.frequency\">{{report?.frequency}}\r\n                                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                </div>\r\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.parentResponsibility\">{{report?.parentResponsibility}}\r\n                                    <i *ngIf=\"!report?.parentResponsibility\" class=\"icons\" [appTooltip]=\"'Select a parent responsibility on whose completion this responsibility will become active.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                </div>\r\n                                <div class=\"exel-view-column\">{{report?.dueDate}}</div>\r\n                                <div class=\"exel-view-column\">{{report?.responsibilityWindow}}</div>\r\n                                <div class=\"exel-view-column\">{{report?.failedAfter}}</div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">{{report?.responsibilityCenter}}</div>\r\n                    <div class=\"exel-view-column\">{{report?.reportClass}}</div>\r\n                    <div class=\"exel-view-column\">{{report?.objective}}</div>\r\n                    <div class=\"exel-view-column\">{{report?.notes}}</div>\r\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column multi-column\">\r\n                                <div class=\"exel-view-row multi-column\">\r\n                                    <div class=\"exel-view-column\" [class.small-column]=\"true\">{{report?.isFormat}}</div>\r\n                                    <div class=\"exel-view-column\">{{report?.formatForResponsibility}}</div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">{{report?.documentEvidenceRequired}}</div>\r\n                        </div>\r\n                    </div>\r\n                    <!-- <div class=\"exel-view-column\">{{report?.assessments}}</div> -->\r\n                    <div class=\"exel-view-column multi-column\" [class.three-column]=\"true\">\r\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\r\n                            <div class=\"exel-view-column\" [class.error]=\"report?.reviewer && (\r\n                              !report?.userValidateWithProgram?.isValidReviewer )\">{{report?.reviewer}}\r\n\r\n                        <!-- <i *ngIf=\"(report?.reviewer && report?.reviewer === report?.assignor)\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Reviewer of this responsibility.':'You cannot be a Reviewer of this responsibility since you are the assignor. ') +'Select another user as the Reviewer'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i> -->\r\n                        <i *ngIf=\"report?.reviewer && !report?.userValidateWithProgram?.isValidReviewer\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"'This user is not associated with the selected Program.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                            </div>\r\n                            <div class=\"exel-view-column\">{{report?.reviewToBeCompletedWithin}}</div>\r\n                            <div class=\"exel-view-column\">{{report?.reviewWillBeFailedAfter}}</div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column\" [class.error]=\"report?.overseer && (\r\n                              !report?.userValidateWithProgram?.isValidOverseer )\">\r\n                            {{report?.overseer}}\r\n\r\n                                <i *ngIf=\"(report?.overseer) && !report?.userValidateWithProgram?.isValidOverseer\"\r\n                                    class=\"icons\"\r\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                            </div>\r\n                            <div class=\"exel-view-column\" [class.error]=\"report?.notifyOnFailure && (\r\n                            !report?.userValidateWithProgram?.isValidNotifyOnFailure )\">\r\n                                {{report?.notifyOnFailure}}\r\n\r\n                                <i *ngIf=\"(report?.notifyOnFailure) && !report?.userValidateWithProgram?.isValidNotifyOnFailure\"\r\n                                    class=\"icons\"\r\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- <div class=\"exel-view-column\" [class.error]=\"(report?.overseer) && ((report?.overseer === report?.assignee) ||(report?.reviewer === report?.overseer) || (report?.overseer == report?.assignor) || (!report?.userValidateWithProgram?.isValidOverseer))\">\r\n                        {{report?.overseer}}\r\n                        <i *ngIf=\"(report?.overseer) && ((report?.reviewer === report?.overseer))\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n\r\n                        <i *ngIf=\"report?.overseer && (report?.overseer === report?.assignee)\" class=\"icons\"\r\n                            [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                        <i *ngIf=\"((report?.overseer) && (report?.overseer == report?.assignor))\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Overseer of this responsibility. ':'You cannot be an Overseer of this responsibility since you are the Assignor. ') +'Select another user as the Overseer.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                        <i *ngIf=\"!report?.userValidateWithProgram?.isValidOverseer\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"'Selected user is not a valid overseer for selected program.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                    </div> -->\r\n                </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n                <!-- ------------------------------------------------old code dynamic------------------------------------------------- -->\r\n\r\n                <!-- *ngFor=\"let report of responsibilityBulkUpload?.reports; let i = index\" -->\r\n            </div>\r\n        </div>\r\n        <div class=\"bulk-view-option\">\r\n            <button *ngIf=\"bulkUpload?.frequency?.reports?.length\" [class.active]=\"tabType === 'frequency'\" (click)=\"selectedTab.emit('frequency')\">Frequency Responsibilities</button>\r\n            <button *ngIf=\"bulkUpload?.ongoing?.reports?.length\" [class.active]=\"tabType === 'ongoing'\" (click)=\"selectedTab.emit('ongoing')\">Ongoing Responsibilities</button>\r\n            <button *ngIf=\"bulkUpload?.onCompletion?.reports?.length\" [class.active]=\"tabType === 'onCompletion'\" (click)=\"selectedTab.emit('onCompletion')\">On Completion Responsibilities</button>\r\n        </div>\r\n        <div class=\"bulk-view-footer\">\r\n            <!-- <div class=\"left\">\r\n                <p>{{finalResponsibilities}} out of {{responsibilityBulkUpload?.reports?.length}} responsibilities will be\r\n                    uploaded.</p>\r\n            </div> -->\r\n            <div class=\"left\">\r\n                <p>{{finalResponsibilities}} out of {{responsibilityMultiTabBulkUpload?.length}} {{responsibilityMultiTabBulkUpload?.length > 1 ? 'responsibilities' : 'responsibility'}} will be\r\n                    uploaded.</p>\r\n            </div>\r\n            <div class=\"right\">\r\n                <button (click)=\"close()\" id=\"bulk-resp-cancel\">Cancel</button>\r\n                <button (click)=\"submit()\" id=\"bulk-resp-confirm\" [disabled]=\"!isConfirmClickable\" class=\"blue\">Confirm</button>\r\n                <!-- finalResponsibilities < 1 -->\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <app-loader  *ngIf=\"loader\"></app-loader>\r\n\r\n</ng-container>\r\n\r\n    <!-- --------------------------------------------------------------------upward is new one-------------------- -->\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::-webkit-scrollbar-thumb,::-webkit-scrollbar-thumb:hover{background:#747576;border-radius:16px}::-webkit-scrollbar{height:15px}.bulk-view{position:fixed;inset:0;z-index:11}.bulk-view-head{height:60px;padding:20px 24px;background:#161b2f;display:flex;justify-content:flex-start}.bulk-view-title{font-size:16px;line-height:20px;font-weight:400;margin:0;color:#fff}.bulk-view-body{height:calc(100vh - 110px);overflow:auto;width:100%;background:#FFFFFF}.bulk-view-body .exel-view{display:block}.bulk-view-body .exel-view-row{display:flex;width:100%}.bulk-view-body .exel-view-row.head .exel-view-column{font-weight:500;font-size:14px;min-height:26px;background:#f1f1f1;padding:0;word-break:unset}.bulk-view-body .exel-view-row.multi-column .exel-view-column{width:140px;min-width:140px}.bulk-view-body .exel-view-column{width:300px;min-width:300px;padding:0 10px;border-right:1px solid #dcdcdc;border-bottom:1px solid #dcdcdc;display:flex;align-items:center;justify-content:center;text-align:center;word-break:break-all;line-height:16px;font-size:12px;color:#161b2f;flex-wrap:wrap;position:relative}.bulk-view-body .exel-view-column i.icons{position:absolute;top:8px;right:10px;cursor:pointer;color:#d93b41}.bulk-view-body .exel-view-column.large{width:100%;min-width:auto}.bulk-view-body .exel-view-column.error{border:1px solid #EB2424!important;padding-right:24px}.bulk-view-body .exel-view-column.error+.error{border-left:none!important}.bulk-view-body .exel-view-column span.required{color:#eb2424;display:contents}.bulk-view-body .exel-view-column .exel-view-row .exel-view-column{width:100%}.bulk-view-body .exel-view-column.sl-no{background:#f1f1f1;width:60px;min-width:60px;min-height:30px;font-weight:400}.bulk-view-body .exel-view-column.sl-no.error{background:#eb242424;border:none;padding-right:10px;border-bottom:1px solid #dcdcdc}.bulk-view-body .exel-view-column.multi-column{padding:0;border:none}.bulk-view-body .exel-view-column.multi-column .exel-view-row{height:100%}.bulk-view-body .exel-view-column.multi-column .exel-view-column{width:50%;min-width:50%}.bulk-view-body .exel-view-column.multi-column .exel-view-column+.exel-view-column{border-left:none}.bulk-view-body.bulk{height:calc(100vh - 142px)}.bulk-view-body.bulk .exel-view-row.head{position:sticky;top:0;z-index:1}.bulk-view-body.bulk .exel-view-row.head .exel-view-column{min-height:34px}.bulk-view-body.bulk .exel-view-row.head .exel-view-column .info-text{font-size:10px;display:block;width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding:0 8px}.bulk-view-body.bulk .exel-view-row.two-column .exel-view-column{min-width:250px!important}.bulk-view-body.bulk .exel-view-row.three-column .exel-view-column,.bulk-view-body.bulk .exel-view-row.five-column .exel-view-column{width:200px;min-width:200px!important}.bulk-view-body.bulk .exel-view-column .exel-view-row .exel-view-column.small-column{width:120px;min-width:120px!important}.bulk-view-body.bulk .exel-view-column.multi-column .exel-view-column{min-width:unset}.bulk-view-body.bulk .exel-view-column.two-column{width:500px;min-width:500px!important}.bulk-view-body.bulk .exel-view-column.three-column{width:600px;min-width:600px!important}.bulk-view-body.bulk .exel-view-column.five-column{width:1000px;min-width:1000px!important}.bulk-view-option{background:#FFFFFF;border-top:1px solid #f1f1f1;padding:0 20px;position:fixed;width:100%;bottom:50px;display:flex;align-items:center}.bulk-view-option button{background:transparent;border-radius:0;border:none;border-left:1px solid #f1f1f1;color:#747576;font-size:11px;font-weight:500;padding:0 .5rem;margin:0;height:2rem;position:relative}.bulk-view-option button:last-of-type{border-right:1px solid #f1f1f1}.bulk-view-option button.active{color:#1e5dd3}.bulk-view-option button.active:before{background:#fff;content:\"\";position:absolute;top:-1px;left:0;height:1px;width:100%}.bulk-view-footer{height:50px;box-shadow:0 0 15px #1e03d259;padding:10px 20px;position:fixed;width:100%;bottom:0;display:flex;align-items:center;justify-content:space-between;background:#FFFFFF}.bulk-view-footer .left p{color:#747576;font-size:13px;font-weight:500;margin:0}.bulk-view-footer .right button{font-size:12px;background:#fff;border:1px solid #dcdcdc;color:#747576;border-radius:2px;padding:8px 18px;cursor:pointer;text-transform:uppercase}.bulk-view-footer .right button+button{margin-left:4px}.bulk-view-footer .right button.blue{color:#fff;background:#1E5DD3}.bulk-view-footer .right button:disabled{background:#F1F1F1;border-color:#f1f1f1;pointer-events:none;cursor:not-allowed;color:#747576}\n"] }]
         }], propDecorators: { responsibilityBulkUpload: [{
                 type: Input
             }], fileName: [{