vcomply-workflow-engine 8.0.8 → 8.0.10

package/fesm2022/vcomply-workflow-engine.mjs

@@ -14531,12 +14531,13 @@ class WorkflowCaseComponent {
         this.reportACaseService.resetMoreOption.next(true);
     }
     saveSupportingDocument(event) {
-        const document = event?.files;
+        let document = event?.files;
+        document = [...document];
         if (this.caseTypeSelected === report.ADD_CASE_TO_WORKFLOW) {
-            this.addToCasePayload.supporting_documents = [...document];
+            this.addToCasePayload.supporting_documents = document;
         }
         else {
-            this.payload.supporting_documents = [...document];
+            this.payload.supporting_documents = document;
         }
     }
     onCategoryChange(event) {
@@ -15067,11 +15068,11 @@ class WorkflowCaseComponent {
             this.loader.reportCaseLoader);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: WorkflowCaseComponent, deps: [{ token: ReportACaseService }, { token: UiKitService }, { token: OrganizationUserService }, { token: ResponsibilityService }, { token: ComplianceCommonService }, { token: IframeService }, { token: DateUtilityService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.21", type: WorkflowCaseComponent, isStandalone: false, selector: "app-workflow-case", inputs: { openedFrom: "openedFrom", source: "source", caseId: "caseId", mode: "mode", workflowType: "workflowType", responsibilityData: "responsibilityData", assessmentQuestion: "assessmentQuestion", caseTypePermission: "caseTypePermission" }, outputs: { closeWorkflow: "closeWorkflow", populateOption: "populateOption", caseReportedBy: "caseReportedBy", userListEmitter: "userListEmitter", disconnectRefresh: "disconnectRefresh", pickerChanged: "pickerChanged" }, ngImport: i0, template: "<div *ngIf=\"!showSmiley\" class=\"workflow-case\">\n  <app-case-type\n    *ngIf=\"mode !== 'EDIT' && caseTypePermission\"\n    [fieldSelected]=\"fieldClicked\"\n    (caseTypeChange)=\"onCaseTypeChange($event)\"\n  ></app-case-type>\n  <app-linked-responsibilities\n    *ngIf=\"['COMPLIANCE_WORKROOM', 'ASSESSMENT'].includes(openedFrom)\"\n    [payload]=\"\n      caseTypeSelected === caseType.REPORT_CASE ? payload : addToCasePayload\n    \"\n    [openedFrom]=\"openedFrom\"\n    [fieldSelected]=\"fieldClicked\"\n    [responsibilityData]=\"responsibilityData\"\n    (fieldClicked)=\"onFieldClicked($event)\"\n  ></app-linked-responsibilities>\n  <app-linked-assessment\n    *ngIf=\"openedFrom === 'ASSESSMENT'\"\n    [payload]=\"payload\"\n    [openedFrom]=\"openedFrom\"\n    [fieldSelected]=\"fieldClicked\"\n    [responsibilityData]=\"responsibilityData\"\n    [assessmentQuestion]=\"assessmentQuestion\"\n    (fieldClicked)=\"onFieldClicked($event)\"\n  ></app-linked-assessment>\n  <app-case-details\n    [payload]=\"\n      caseTypeSelected === caseType.REPORT_CASE ? payload : addToCasePayload\n    \"\n    [fieldSelected]=\"fieldClicked\"\n    [validationError]=\"validationError\"\n    [caseTypeSelected]=\"caseTypeSelected\"\n  ></app-case-details>\n  <span\n    *ngIf=\"caseTypeSelected === caseType.ADD_CASE_TO_WORKFLOW\"\n    class=\"head-label vx-fs-10 vx-fw-500 vx-txt-white vx-tt-uppercase vx-pl-1 vx-pr-1 vx-lh-4\"\n  >\n    CASE DETAILS\n  </span>\n  <app-information-block\n    *ngIf=\"caseTypeSelected === caseType.ADD_CASE_TO_WORKFLOW\"\n  ></app-information-block>\n  <app-rc-details\n    [payload]=\"\n      caseTypeSelected === caseType.REPORT_CASE ? payload : addToCasePayload\n    \"\n    [fieldSelected]=\"fieldClicked\"\n    [caseTypeSelected]=\"caseTypeSelected\"\n    [validationError]=\"validationError\"\n    [initialSelection]=\"\n      caseTypeSelected === caseType.REPORT_CASE\n        ? payload?.rc_details\n        : addToCasePayload?.rc_details\n    \"\n    [mode]=\"mode\"\n    [workflowType]=\"workflowType\"\n    (fieldClicked)=\"onFieldClicked($event)\"\n    (onRcChange)=\"onRcChange($event)\"\n    (filterDeselector)=\"pickerToggle($event)\"\n  ></app-rc-details>\n  <app-case-type-dropdown\n    [payload]=\"\n      caseTypeSelected === caseType.REPORT_CASE ? payload : addToCasePayload\n    \"\n    [fieldSelected]=\"fieldClicked\"\n    [validationError]=\"validationError\"\n    [initialSelection]=\"\n      caseTypeSelected === caseType.REPORT_CASE\n        ? payload?.case_type\n        : addToCasePayload?.case_type\n    \"\n    [mode]=\"mode\"\n    [caseTypeSelected]=\"caseTypeSelected\"\n    [workflowType]=\"workflowType\"\n    (onCaseTypeChange)=\"onCaseTypeDropdownChange($event)\"\n    (onCaseTypeLoading)=\"onCaseLoader($event, 'type')\"\n  ></app-case-type-dropdown>\n  <app-case-category\n    [payload]=\"\n      caseTypeSelected === caseType.REPORT_CASE ? payload : addToCasePayload\n    \"\n    [fieldSelected]=\"fieldClicked\"\n    [caseTypeSelected]=\"caseTypeSelected\"\n    [initialSelection]=\"\n      caseTypeSelected === caseType.REPORT_CASE\n        ? payload?.category\n        : addToCasePayload?.category\n    \"\n    [initialAdditionalSelection]=\"\n      caseTypeSelected === caseType.REPORT_CASE\n        ? payload?.additional_category\n        : addToCasePayload?.additional_category\n    \"\n    [mode]=\"mode\"\n    [workflowType]=\"workflowType\"\n    (onCategoryChange)=\"onCategoryChange($event)\"\n    (fieldClicked)=\"onFieldClicked($event)\"\n    (filterDeselector)=\"pickerToggle($event)\"\n  ></app-case-category>\n  <app-report-date\n    [payload]=\"\n      caseTypeSelected === caseType.REPORT_CASE ? payload : addToCasePayload\n    \"\n    [fieldSelected]=\"fieldClicked\"\n    [validationError]=\"validationError\"\n    (fieldClicked)=\"onFieldClicked($event)\"\n  ></app-report-date>\n  <app-case-priority\n    [payload]=\"\n      caseTypeSelected === caseType.REPORT_CASE ? payload : addToCasePayload\n    \"\n    [fieldSelected]=\"fieldClicked\"\n    [caseTypeSelected]=\"caseTypeSelected\"\n    [validationError]=\"validationError\"\n    [initialSelection]=\"\n      caseTypeSelected === caseType.REPORT_CASE\n        ? payload?.priority\n        : addToCasePayload?.priority\n    \"\n    [mode]=\"mode\"\n    [workflowType]=\"workflowType\"\n    (onPriorityChange)=\"onPriorityChange($event)\"\n    (onPriorityLoader)=\"onCaseLoader($event, 'priority')\"\n  ></app-case-priority>\n  <ng-template #supportingDocumentsBlock let-docs=\"docs\">\n    <app-field-holder\n      [image]=\"ASSETS.format_evidence\"\n      [disabled]=\"fieldSelector?.includes(fieldClicked)\"\n      [checked]=\"docs?.length\"\n    >\n      <ng-container field>\n        <app-vc-label\n          label\n          [labelText]=\"reportTexts.case_details.attachments.title\"\n        ></app-vc-label>\n        <app-format-and-evidence\n          (updateFiles)=\"saveSupportingDocument($event)\"\n          [mode]=\"'reportACase'\"\n          [formatEvidanceData]=\"docs\"\n        ></app-format-and-evidence>\n      </ng-container>\n    </app-field-holder>\n  </ng-template>\n  <ng-container\n    *ngIf=\"caseTypeSelected === caseType.ADD_CASE_TO_WORKFLOW\"\n    [ngTemplateOutlet]=\"supportingDocumentsBlock\"\n    [ngTemplateOutletContext]=\"{ docs: addToCasePayload?.supporting_documents }\"\n  ></ng-container>\n  <span\n    *ngIf=\"caseTypeSelected === caseType.ADD_CASE_TO_WORKFLOW\"\n    class=\"head-label vx-fs-10 vx-fw-500 vx-txt-white vx-tt-uppercase vx-pl-1 vx-pr-1 vx-lh-4\"\n  >\n    USER DETAILS\n  </span>\n  <app-case-owners\n    *ngIf=\"caseTypeSelected === caseType.ADD_CASE_TO_WORKFLOW\"\n    [payload]=\"addToCasePayload\"\n    [initialSelection]=\"addToCasePayload?.caseToWorkflow?.owners\"\n    [workflowId]=\"addToCasePayload?.caseToWorkflow?.workflow_id\"\n    [fieldSelected]=\"fieldClicked\"\n    [validationError]=\"validationError\"\n    [mode]=\"mode\"\n    (fieldClicked)=\"onFieldClicked($event)\"\n    (filterDeselector)=\"pickerToggle($event)\"\n  ></app-case-owners>\n  <app-case-assignees\n    *ngIf=\"caseTypeSelected === caseType.ADD_CASE_TO_WORKFLOW\"\n    [payload]=\"addToCasePayload\"\n    [fieldSelected]=\"fieldClicked\"\n    [initialSelection]=\"addToCasePayload?.caseToWorkflow\"\n    [userList]=\"userList\"\n    [groupList]=\"groupList\"\n    [validationError]=\"validationError\"\n    (fieldClicked)=\"onFieldClicked($event)\"\n    (filterDeselector)=\"pickerToggle($event)\"\n  ></app-case-assignees>\n  <ng-container\n    *ngIf=\"caseTypeSelected === caseType.REPORT_CASE\"\n    [ngTemplateOutlet]=\"supportingDocumentsBlock\"\n    [ngTemplateOutletContext]=\"{ docs: payload?.supporting_documents }\"\n  ></ng-container>\n  <span\n    *ngIf=\"caseTypeSelected === caseType.ADD_CASE_TO_WORKFLOW\"\n    class=\"head-label vx-fs-10 vx-fw-500 vx-txt-white vx-tt-uppercase vx-pl-1 vx-pr-1 vx-lh-4 vx-mb-4\"\n  >\n    CASE RESOLUTION DETAILS\n  </span>\n  <app-case-resolution-deadline\n    *ngIf=\"caseTypeSelected === caseType.ADD_CASE_TO_WORKFLOW\"\n    [payload]=\"addToCasePayload\"\n    [userList]=\"userList\"\n    [groupList]=\"groupList\"\n    [initialSelection]=\"addToCasePayload?.caseToWorkflow\"\n    [fieldSelected]=\"fieldClicked\"\n    [mode]=\"mode\"\n    [caseId]=\"caseId\"\n    (fieldClicked)=\"onFieldClicked($event)\"\n    [validationError]=\"validationError\"\n    (filterDeselector)=\"pickerToggle($event)\"\n  ></app-case-resolution-deadline>\n  <span\n    *ngIf=\"\n      caseTypeSelected === caseType.ADD_CASE_TO_WORKFLOW &&\n      displayAdditionalOptions\n    \"\n    class=\"head-label vx-fs-10 vx-fw-500 vx-txt-white vx-tt-uppercase vx-pl-1 vx-pr-1 vx-lh-4\"\n  >\n    ADDITIONAL OPTIONS\n  </span>\n  <!-- Exception Type -->\n  <app-field-holder\n    *ngIf=\"\n      additionalOptionStatus.EXCEPTION_TYPE &&\n      caseTypeSelected === caseType.ADD_CASE_TO_WORKFLOW\n    \"\n    [scrollToBottom]=\"scrollToBottom\"\n    [active]=\"false\"\n    [disabled]=\"fieldSelector?.includes(fieldClicked)\"\n    [checked]=\"addToCasePayload?.caseToWorkflow?.exception_type\"\n    [image]=\"ASSETS.objectives\"\n  >\n    <ng-container field>\n      <span class=\"vx-control-panel\">Exception Type</span>\n      <app-cs-radio\n        class=\"main-filed\"\n        [value]=\"exceptionType.DESIGN_EXCEPTION\"\n        name=\"exception-type\"\n        [checked]=\"\n          addToCasePayload?.caseToWorkflow?.exception_type ===\n          exceptionType.DESIGN_EXCEPTION\n        \"\n        (checkedEvent)=\"setException(exceptionType.DESIGN_EXCEPTION)\"\n        >Design Exception\n      </app-cs-radio>\n      <app-cs-radio\n        class=\"main-filed\"\n        [value]=\"exceptionType.EFFECTIVENESS_EXCEPTION\"\n        name=\"exception-type\"\n        [checked]=\"\n          addToCasePayload?.caseToWorkflow?.exception_type ===\n          exceptionType.EFFECTIVENESS_EXCEPTION\n        \"\n        (checkedEvent)=\"setException(exceptionType.EFFECTIVENESS_EXCEPTION)\"\n        >Effectiveness Exception\n      </app-cs-radio>\n    </ng-container>\n  </app-field-holder>\n\n  <!-- Associated Risks -->\n  <div\n    [appScrollInView]=\"scrollToBottom\"\n    class=\"form-group-row\"\n    *ngIf=\"additionalOptionStatus.ASSOCIATED_RISKS\"\n    [class.disabled]=\"fieldSelector?.includes(fieldClicked)\"\n  >\n    <div\n      class=\"left\"\n      [class.checked]=\"addToCasePayload?.caseToWorkflow?.associated_risks?.text\"\n    >\n      <img\n        [src]=\"ASSETS.associated_risks\"\n        alt=\"im\"\n        *ngIf=\"\n          !addToCasePayload?.caseToWorkflow?.associated_risks?.text?.trim()\n            ?.length\n        \"\n      />\n\n      <svg\n        class=\"checkIcon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 52 52\"\n        *ngIf=\"\n          addToCasePayload?.caseToWorkflow?.associated_risks?.text?.trim()\n            .length\n        \"\n      >\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path\n          class=\"checkIcon__check\"\n          fill=\"none\"\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n        />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <span class=\"vx-control-panel\">Associated Risks </span>\n        <ng-container\n          *ngIf=\"\n            addToCasePayload?.caseToWorkflow?.associated_risks?.attachments\n              ?.length > 0\n          \"\n        >\n          <div\n            class=\"file-list\"\n            *ngFor=\"\n              let uploadingFile of addToCasePayload?.caseToWorkflow\n                ?.associated_risks?.attachments\n            \"\n          >\n            <div class=\"file-container\">\n              <span class=\"file-name\">{{ uploadingFile }}</span>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container\n          *ngIf=\"\n            addToCasePayload?.caseToWorkflow?.associated_risks?.attachments\n              ?.length > 0\n          \"\n        >\n          <div\n            class=\"file-list\"\n            *ngFor=\"\n              let file of addToCasePayload?.caseToWorkflow?.associated_risks\n                ?.attachments\n            \"\n          >\n            <div class=\"file-container\">\n              <span class=\"file-name\">{{ file?.name }}</span>\n              <button>\n                <i class=\"icons\" (click)=\"deleteFile(file, 'ASSOCIATED_RISKS')\"\n                  >&#xe90d;</i\n                >\n              </button>\n            </div>\n          </div>\n        </ng-container>\n        <vcomply-editor\n          [(ngModel)]=\"addToCasePayload.caseToWorkflow.associated_risks.text\"\n          [editorConfig]=\"{\n            mode: 'prime',\n            colorPalette: true,\n            link: true,\n            file: false,\n            placeholder: 'Associated Risks'\n          }\"\n          (clickOutside)=\"checkDescription()\"\n          (sendSavedFiles)=\"selectFile('ASSOCIATED_RISKS', $event)\"\n        ></vcomply-editor>\n      </div>\n    </div>\n  </div>\n\n  <!-- Overseer -->\n  <div\n    [appScrollInView]=\"scrollToBottom\"\n    class=\"form-group-row\"\n    [class.active]=\"false\"\n    *ngIf=\"additionalOptionStatus.OVERSIGHT\"\n    [class.disabled]=\"fieldSelector?.includes(fieldClicked)\"\n  >\n    <div\n      class=\"left\"\n      [class.checked]=\"\n        addToCasePayload?.caseToWorkflow?.oversights?.cc_ids?.length ||\n        addToCasePayload?.caseToWorkflow?.oversights?.cc_failures_ids?.length\n      \"\n    >\n      <img\n        [src]=\"ASSETS.oversight\"\n        alt=\"\"\n        *ngIf=\"\n          !(\n            addToCasePayload?.caseToWorkflow?.oversights?.cc_ids?.length ||\n            addToCasePayload?.caseToWorkflow?.oversights?.cc_failures_ids\n              ?.length\n          )\n        \"\n      />\n\n      <svg\n        class=\"checkIcon\"\n        *ngIf=\"\n          addToCasePayload?.caseToWorkflow?.oversights?.cc_ids?.length ||\n          addToCasePayload?.caseToWorkflow?.oversights?.cc_failures_ids?.length\n        \"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 52 52\"\n      >\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path\n          class=\"checkIcon__check\"\n          fill=\"none\"\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n        />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <span class=\"vx-control-panel\">Oversight</span>\n        <div class=\"select\" *ngIf=\"!selectedOversights?.cc_list?.length\">\n          <input\n            type=\"text\"\n            (click)=\"setActiveFieldSelector('CASE_CC', 'CASE_CC')\"\n            placeholder=\"Who should have oversight of this case?\"\n            readonly\n          />\n        </div>\n\n        <div class=\"selected\" *ngIf=\"selectedOversights?.cc_list?.length\">\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n            <i\n              class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n              (click)=\"deleteItem('CASE_CC', selectedOversights?.cc_list[0])\"\n              >&#xe9ae;</i\n            >\n            <span\n              class=\"chipName vx-fs-11 vx-label-txt\"\n              [appTooltip]=\"selectedOversights?.cc_list[0]?.employee_name\"\n              placement=\"bottom-left\"\n              delay=\"0\"\n              type=\"black\"\n              [tooltipMandatory]=\"false\"\n              >{{ selectedOversights?.cc_list[0]?.employee_name }}</span\n            >\n            <button\n              class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n              appPopover\n              (click)=\"CC.popover()\"\n              placement=\"right\"\n              *ngIf=\"selectedOversights?.cc_list?.length > 1\"\n            >\n              +{{ selectedOversights?.cc_list?.slice(1).length }}\n            </button>\n          </div>\n          <button\n            *ngIf=\"activeField !== 'CASE_CC'\"\n            class=\"edit\"\n            type=\"button\"\n            (click)=\"setActiveFieldSelector('CASE_CC', 'CASE_CC')\"\n          >\n            <i class=\"icons\">&#xe9ba;</i>Edit\n          </button>\n        </div>\n        <div\n          class=\"select\"\n          *ngIf=\"\n            !selectedOversights?.cc_failures_list ||\n            selectedOversights?.cc_failures_list?.length === 0\n          \"\n        >\n          <input\n            (click)=\"setActiveFieldSelector('CASE_FCC', 'CASE_FCC')\"\n            type=\"text\"\n            placeholder=\"Who should be notified if the case is not resolved?\"\n            readonly\n          />\n        </div>\n\n        <div\n          class=\"selected\"\n          *ngIf=\"selectedOversights?.cc_failures_list?.length\"\n        >\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n            <i\n              class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n              (click)=\"\n                deleteItem('CASE_FCC', selectedOversights?.cc_failures_list[0])\n              \"\n              >&#xe9ae;</i\n            >\n            <span\n              class=\"chipName vx-fs-11 vx-label-txt\"\n              [appTooltip]=\"\n                selectedOversights?.cc_failures_list[0]?.employee_name\n              \"\n              placement=\"bottom-left\"\n              delay=\"0\"\n              type=\"black\"\n              [tooltipMandatory]=\"false\"\n              >{{\n                selectedOversights?.cc_failures_list[0]?.employee_name\n              }}</span\n            >\n            <button\n              class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n              appPopover\n              (click)=\"FCC.popover()\"\n              placement=\"right\"\n              *ngIf=\"selectedOversights?.cc_failures_list?.length > 1\"\n            >\n              +{{ selectedOversights?.cc_failures_list?.slice(1)?.length }}\n            </button>\n          </div>\n          <button\n            *ngIf=\"activeField !== 'CASE_FCC'\"\n            class=\"edit\"\n            type=\"button\"\n            (click)=\"setActiveFieldSelector('CASE_FCC', 'CASE_FCC')\"\n          >\n            <i class=\"icons\">&#xe9ba;</i>Edit\n          </button>\n        </div>\n      </div>\n      <app-popover #CC [dontCloseonClick]=\"true\">\n        <div class=\"wf-action-list\">\n          <ul class=\"action-item\">\n            <li\n              *ngFor=\"\n                let cc of selectedOversights?.cc_list | slice : 1;\n                let j = index\n              \"\n            >\n              <div class=\"avatar-card\">\n                <span class=\"value\">\n                  <i class=\"icons\" (click)=\"deleteItem('CASE_CC', cc)\"\n                    >&#xe90d;</i\n                  >\n                  {{ cc?.employee_name }}\n                </span>\n              </div>\n            </li>\n          </ul>\n        </div>\n      </app-popover>\n      <app-popover #FCC [dontCloseonClick]=\"true\">\n        <div class=\"wf-action-list\">\n          <ul class=\"action-item\">\n            <li\n              *ngFor=\"\n                let fcc of selectedOversights?.cc_failures_list | slice : 1;\n                let j = index\n              \"\n            >\n              <div class=\"avatar-card\">\n                <span class=\"value\">\n                  <i class=\"icons\" (click)=\"deleteItem('CASE_FCC', fcc)\"\n                    >&#xe90d;</i\n                  >\n                  {{ fcc?.employee_name }}\n                </span>\n              </div>\n            </li>\n          </ul>\n        </div>\n      </app-popover>\n    </div>\n  </div>\n\n  <!-- Evidence -->\n  <div\n    [appScrollInView]=\"scrollToBottom\"\n    class=\"form-group-row\"\n    *ngIf=\"additionalOptionStatus.EVIDENCE\"\n    [class.disabled]=\"fieldSelector?.includes(fieldClicked)\"\n  >\n    <div class=\"left\" [class.checked]=\"true\">\n      <svg\n        class=\"checkIcon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 52 52\"\n      >\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path\n          class=\"checkIcon__check\"\n          fill=\"none\"\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n        />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <span class=\"vx-control-panel\">Evidence</span>\n        <div class=\"upload-format\">\n          <span class=\"text\"\n            >Do you want evidence of completion of the case to be\n            uploaded?</span\n          >\n          <div class=\"radio-group\">\n            <app-cs-radio\n              [name]=\"'file-evidence'\"\n              [value]=\"1\"\n              [checked]=\"addToCasePayload?.caseToWorkflow?.evidence_enabled\"\n              (checkedEvent)=\"setEvidence(true)\"\n              >Yes\n            </app-cs-radio>\n            <app-cs-radio\n              [name]=\"'file-evidence'\"\n              [value]=\"0\"\n              [checked]=\"!addToCasePayload?.caseToWorkflow?.evidence_enabled\"\n              (checkedEvent)=\"setEvidence(false)\"\n              >No\n            </app-cs-radio>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- Recommended Actions -->\n  <div\n    class=\"form-group-row\"\n    *ngIf=\"additionalOptionStatus.RECOMMENDED_ACTIONS\"\n    [class.disabled]=\"fieldSelector?.includes(fieldClicked)\"\n  >\n    <div\n      class=\"left\"\n      [class.checked]=\"addToCasePayload?.caseToWorkflow?.recommendations?.text\"\n    >\n      <img\n        [src]=\"ASSETS.recommended_action\"\n        alt=\"im\"\n        *ngIf=\"\n          !(\n            addToCasePayload?.caseToWorkflow?.recommendations?.text\n            | spaceBreaker\n          )?.length\n        \"\n      />\n      <svg\n        class=\"checkIcon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 52 52\"\n        *ngIf=\"\n          (\n            addToCasePayload?.caseToWorkflow?.recommendations?.text\n            | spaceBreaker\n          )?.length > 0\n        \"\n      >\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path\n          class=\"checkIcon__check\"\n          fill=\"none\"\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n        />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <span class=\"vx-control-panel\">Recommended Actions</span>\n        <ng-container\n          *ngIf=\"\n            addToCasePayload?.caseToWorkflow?.recommendations?.attachments\n              ?.length > 0\n          \"\n        >\n          <div\n            class=\"file-list\"\n            *ngFor=\"\n              let uploadingFile of addToCasePayload?.caseToWorkflow\n                ?.recommendations?.attachments\n            \"\n          >\n            <div class=\"file-container\">\n              <span class=\"file-name\">{{ uploadingFile }}</span>\n            </div>\n            <app-line-loader [loaderHeight]=\"2\"></app-line-loader>\n          </div>\n        </ng-container>\n        <ng-container\n          *ngIf=\"\n            addToCasePayload?.caseToWorkflow?.recommendations?.attachments\n              ?.length > 0\n          \"\n        >\n          <div\n            class=\"file-list\"\n            *ngFor=\"\n              let file of addToCasePayload?.caseToWorkflow?.recommendations\n                ?.attachments\n            \"\n          >\n            <div class=\"file-container\">\n              <span class=\"file-name\">{{ file?.name }}</span>\n              <button>\n                <i\n                  class=\"icons\"\n                  (click)=\"deleteFile(file, 'RECOMMENDED_ACTIONS')\"\n                  >&#xe90d;</i\n                >\n              </button>\n            </div>\n          </div>\n        </ng-container>\n        <vcomply-editor\n          [(ngModel)]=\"addToCasePayload.caseToWorkflow.recommendations.text\"\n          [editorConfig]=\"{\n            mode: 'prime',\n            colorPalette: true,\n            link: true,\n            file: true,\n            placeholder: 'Recommended actions'\n          }\"\n          (ngModelChange)=\"\n            addToCasePayload?.caseToWorkflow?.recommendations?.text?.trim()\n              ?.length > 0\n              ? removeError('issueRecommendation')\n              : null\n          \"\n          (clickOutside)=\"checkDescription()\"\n          (sendSavedFiles)=\"selectFile('RECOMMENDED_ACTIONS', $event)\"\n        ></vcomply-editor>\n      </div>\n    </div>\n  </div>\n  <!-- Risk Classification -->\n  <div\n    *ngIf=\"additionalOptionStatus.RISK_CLASSIFICATION\"\n    class=\"form-group-row\"\n    id=\"risk_classification\"\n    [class.disabled]=\"fieldSelector?.includes(fieldClicked)\"\n  >\n    <div class=\"left\" [class.checked]=\"addToCasePayload.risk_class\">\n      <img [src]=\"ASSETS.risks\" alt=\"im\" *ngIf=\"!addToCasePayload.risk_class\" />\n\n      <svg\n        class=\"checkIcon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 52 52\"\n        *ngIf=\"addToCasePayload.risk_class\"\n      >\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path\n          class=\"checkIcon__check\"\n          fill=\"none\"\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n        />\n      </svg>\n    </div>\n\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <span class=\"vx-control-panel\">Risk Classification</span>\n        <div class=\"classification\">\n          <label\n            class=\"low\"\n            *ngFor=\"let class of riskClassification; let rcIdx = index\"\n            [ngClass]=\"[class.class]\"\n            [attr.for]=\"'workflow-case-risk-class-' + rcIdx\"\n          >\n            <input\n              [id]=\"'workflow-case-risk-class-' + rcIdx\"\n              type=\"radio\"\n              name=\"classification\"\n              [value]=\"class.value\"\n              [checked]=\"addToCasePayload.risk_class === class.value\"\n              [(ngModel)]=\"addToCasePayload.risk_class\"\n            />\n            <span>{{ class.name }}</span>\n          </label>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<app-loader-inline *ngIf=\"checkloader\"></app-loader-inline>\n<app-checkbox-list\n  [config]=\"oversight_config\"\n  [twoColumn]=\"true\"\n  [itemsList]=\"userList\"\n  [selectedItems]=\"selectedOversights?.cc_list\"\n  [identifierKey]=\"'employee_email'\"\n  [displayKey]=\"'employee_name'\"\n  [tooltipKey]=\"'employee_email'\"\n  *ngIf=\"activeSelector === 'CASE_CC'\"\n  (saveList)=\"selectorAction($event, 'CASE_CC')\"\n  (closeList)=\"fieldDeselector('CASE_CC')\"\n  [loaded]=\"loader.userListLoader\"\n></app-checkbox-list>\n\n<app-checkbox-list\n  [config]=\"oversight_config\"\n  [twoColumn]=\"true\"\n  [itemsList]=\"userList\"\n  [selectedItems]=\"selectedOversights?.cc_failures_list\"\n  [identifierKey]=\"'employee_email'\"\n  [displayKey]=\"'employee_name'\"\n  [tooltipKey]=\"'employee_email'\"\n  *ngIf=\"activeSelector === 'CASE_FCC'\"\n  (saveList)=\"selectorAction($event, 'CASE_FCC')\"\n  (closeList)=\"fieldDeselector('CASE_FCC')\"\n  [loaded]=\"loader.userListLoader\"\n></app-checkbox-list>\n\n<app-smiley-dialog-inline\n  *ngIf=\"showSmiley\"\n  [message]=\"smileyMessage\"\n  [actionButtons]=\"actionButtons\"\n  (action)=\"smileyActions($event)\"\n  (closeSmiley)=\"closeSmiley($event)\"\n></app-smiley-dialog-inline>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.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/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/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\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::ng-deep .workflow-case{display:block;position:relative}::ng-deep .workflow-case app-case-type{cursor:pointer}::ng-deep .workflow-case app-case-details app-field-holder app-vc-input input{cursor:text;z-index:1000}::ng-deep .workflow-case app-report-date .date-time-picker{pointer-events:auto!important;z-index:1}::ng-deep .workflow-case app-rc-details app-cs-switch .cs-switch .switch{pointer-events:none!important;opacity:.5!important}::ng-deep .workflow-case .head-label{background:#565a6f;border-radius:.125rem;height:1rem;position:relative}::ng-deep .workflow-case .head-label:before{background:#e3e3e9;content:\"\";position:absolute;top:7px;left:-40px;width:500px;height:1px;z-index:-1}\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\";@import\"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700&display=swap\";::-webkit-scrollbar-track{background-color:#f1f1f1;position:absolute}::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}button{font-family:Poppins,sans-serif}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;font-size:13px;color:#747576;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField::placeholder{font-size:13px;color:#747576}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxEnable.withBtn:after{display:none}::ng-deep .selectBoxEnable.withBtn button.setBtn{background:transparent;border-radius:0;border:none;min-width:98px}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer .chipName.no-width{max-width:unset}::ng-deep .chipContainer .chipName.full-width{max-width:25rem}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}::ng-deep .workflowLavel{background:#f1f1f1;border-radius:.125rem;color:#042e7d;min-width:1rem;height:1rem}::ng-deep .reviewSelection{border-radius:.25rem;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep .reviewSelection:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectButton{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectButton:hover,::ng-deep .selectButton:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep button.createNewBtn{background:transparent;border-radius:0;border:none}::ng-deep .vx-form-group{display:block;position:relative;margin-bottom:20px}::ng-deep .vx-form-group:after{content:\"\";display:block;clear:both}::ng-deep .vx-form-group .select{position:relative}::ng-deep .vx-form-group .select:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#707070;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .vx-form-group .select input{cursor:pointer;padding-right:30px!important}::ng-deep .vx-form-group .select .custom-input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;outline:none;padding:3px 12px;line-height:16px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .vx-form-group .select .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:13px;width:94%;display:block;pointer-events:none;opacity:.8}::ng-deep .vx-form-group .select .custom-input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .vx-form-group .select .custom-input.frequency-custom-input{padding-right:108px;display:flex;align-items:center}::ng-deep .vx-form-group .select+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .select+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .select+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .select~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .select.button-sec:after{display:none}::ng-deep .vx-form-group .select.button-sec button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;position:absolute;top:12px;right:8px;padding:0;margin:0}::ng-deep .vx-form-group .select+.vx-control-panel{margin-top:8px}::ng-deep .vx-form-group .select+.selected{margin-top:8px}::ng-deep .vx-form-group .select.select{margin-top:8px}::ng-deep .vx-form-group .upload-format{border:1px solid #dbdbdb;border-radius:4px;padding:8px 12px;display:block}::ng-deep .vx-form-group .upload-format span.text{line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:block;margin-bottom:6px}::ng-deep .vx-form-group .upload-format .radio-group{display:flex}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio{display:inline-block}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;margin-left:8px}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio+app-cs-radio{margin-left:12px}::ng-deep .vx-form-group .upload-format~.upload-format{margin-top:4px}::ng-deep .vx-form-group .form-tab{display:flex;justify-content:flex-start}::ng-deep .vx-form-group .form-tab button{background:transparent;color:#161b2f;font-size:11px;line-height:16px;text-transform:uppercase;cursor:pointer;padding:8px 8px 8px 0;border:none;outline:none;font-weight:500}::ng-deep .vx-form-group .form-tab button:disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .form-tab button+button{padding:8px}::ng-deep .vx-form-group .form-tab button.active{color:#1e5dd3}::ng-deep .vx-form-group .tab-group{border:1px solid #dbdbdb;border-radius:4px;padding:0;display:block;position:relative;transition:all .2s ease-in-out}::ng-deep .vx-form-group .tab-group:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group .tab-group .upload-file{padding:16px 62px 16px 24px;display:flex;align-items:center;justify-content:space-between}::ng-deep .vx-form-group .tab-group .upload-file .image{width:80px}::ng-deep .vx-form-group .tab-group .upload-file .browse span{display:inline-block;font-size:12px;color:#747576;line-height:16px;padding:0 4px}::ng-deep .vx-form-group .tab-group .upload-file .browse .label{font-size:11px;color:#1e5dd3;line-height:16px;font-weight:600;text-transform:uppercase;margin:0;padding:0}::ng-deep .vx-form-group .tab-group .upload-file .browse .label input{opacity:0;position:absolute;margin:0;padding:0;inset:0;cursor:pointer;width:100%}::ng-deep .vx-form-group .tab-group.active{border-color:#1e5dd3}::ng-deep .vx-form-group .tab-group.uploaded{margin-top:4px}::ng-deep .vx-form-group .tab-group.uploaded .upload-file{padding:8px 0!important;text-align:center}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .image{display:none}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .browse{width:100%;text-align:center}::ng-deep .vx-form-group .tab-group+label.vx-form-group{margin-top:8px;margin-bottom:4px}::ng-deep .vx-form-group .file-list{background:#fbfbfb;border:1px solid #f1f1f1;border-radius:4px;padding:12px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;position:relative}::ng-deep .vx-form-group .file-list span.file-name{color:#747576;line-height:16px;font-size:11px;font-weight:400;cursor:pointer;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .vx-form-group .file-list .button-group{display:flex}::ng-deep .vx-form-group .file-list button{font-size:12px;color:#eb2424;cursor:pointer;display:flex;padding:0;border:none;outline:none;background:transparent}::ng-deep .vx-form-group .file-list button.edit{color:#1e5dd3}::ng-deep .vx-form-group .file-list button+button{margin-left:16px}::ng-deep .vx-form-group .file-list+.file-list{margin-top:4px}::ng-deep .vx-form-group .file-list .file-container{display:flex;justify-content:space-between;width:100%}::ng-deep .vx-form-group .file-list.policy{background:#fff}::ng-deep .vx-form-group .file-list cs-select{position:relative;margin-top:8px;width:100%}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group input.value{height:32px!important;font-size:13px!important}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group i{right:12px!important;top:12px!important}::ng-deep .vx-form-group .file-list app-line-loader{display:block;position:absolute;left:10px;right:10px;bottom:0}::ng-deep .vx-form-group span.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 span.vx-control-panel.custom-tag{font-size:10px}::ng-deep .vx-form-group span.vx-control-panel.vx-mt-8{margin-top:8px}::ng-deep .vx-form-group span.vx-control-panel span.required{color:#eb2424;font-size:14px;font-weight:500;position:relative;top:-2px}::ng-deep .vx-form-group span.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 span.vx-control-panel app-cs-switch{float:right;display:block}::ng-deep .vx-form-group span.vx-control-panel i{margin-left:8px;font-size:12px;color:#1e5dd3;cursor:pointer;position:relative;top:1px}::ng-deep .vx-form-group span.vx-control-panel i.depreciation-icon{color:#e4b700;font-size:16px;position:relative;top:3px}::ng-deep .vx-form-group span.vx-control-panel .checkpoint-version{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:10px;font-weight:600;line-height:14px;margin-left:4px;padding:0 2px}::ng-deep .vx-form-group input[type=text],::ng-deep .vx-form-group .input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;outline:none;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::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;-moz-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:#fff;padding:8px 12px;display:flex;justify-content:space-between}::ng-deep .vx-form-group .classification label{margin:0 4px 0 0;width:100%;position:relative;z-index:1}::ng-deep .vx-form-group .classification label span{display:block;width:100%;height:24px;border:1px solid #f1f1f1;border-radius:2px;line-height:24px;font-size:10px;text-align:center;color:#747576;font-weight:500;position:relative;text-transform:uppercase}::ng-deep .vx-form-group .classification label span:before{height:2px;content:\"\";top:0;right:0;left:0;border-radius:2px;position:absolute;transition:all .2s ease-in-out}::ng-deep .vx-form-group .classification label input{opacity:0;position:absolute;inset:0;margin:0;padding:0;width:100%;height:100%;cursor:pointer;z-index:1}::ng-deep .vx-form-group .classification label input:checked+span{color:#fff}::ng-deep .vx-form-group .classification label input:checked+span:before{bottom:0;height:100%;z-index:-1}::ng-deep .vx-form-group .classification label.low span:before{background:#34aa44}::ng-deep .vx-form-group .classification label.low-med span:before{background:#f2bf19}::ng-deep .vx-form-group .classification label.med-high span:before{background:#f29619}::ng-deep .vx-form-group .classification label.high span:before{background:#eb2424}::ng-deep .vx-form-group .classification label:last-of-type{margin-right:0}::ng-deep .vx-form-group .input{display:flex;align-items:center}::ng-deep .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;padding:8px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:flex;align-items:center;position:relative;justify-content:space-between}::ng-deep .vx-form-group .selected.first-field{z-index:2}::ng-deep .vx-form-group .selected .chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .vx-form-group .selected .chip-container.checkpoints{width:calc(100% - 120px)}::ng-deep .vx-form-group .selected .chip-container span.chip{background:#fff;border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;padding:0 8px;color:#1e5dd3;font-size:12px;display:block;width:auto;max-width:100%;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .vx-form-group .selected .chip-container span.chip.disabled{background:#f1f1f1;box-shadow:none;color:#747576;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .selected .chip-container span.chip i{font-weight:400;margin-right:8px;cursor:pointer;font-size:10px;position:relative;top:1px}::ng-deep .vx-form-group .selected .chip-container span.chip span.step{background:#1e5dd3;border-radius:2px;color:#fff;font-size:9px;line-height:14px;padding:0 4px;font-weight:400;text-align:center;min-width:auto;margin-right:4px}::ng-deep .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question{display:flex;align-items:center;justify-content:space-between;width:100%}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.value{color:#1e5dd3;font-size:12px;font-weight:400;line-height:24px;padding:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 80px)}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.label{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding-left:4px;padding-right:4px;line-height:12px;margin-left:8px}::ng-deep .vx-form-group .selected .chip-container span.value{color:#747576;font-size:13px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 52px);padding:0 4px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text{color:#747576;font-size:10px;font-weight:500;padding:0 8px;width:122px;line-height:14px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first{position:relative;min-width:162px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first:before{background:#f1f1f1;content:\"\";position:absolute;top:0;right:0;height:calc(100% + 12px);width:1px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text .no{color:#1e5dd3}::ng-deep .vx-form-group .selected .chip-container.plus span.chip{max-width:calc(50% - 35px)}::ng-deep .vx-form-group .selected .chip-container.more-one span.chip{max-width:50%}::ng-deep .vx-form-group .selected .chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .vx-form-group .selected .chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:100px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count{border-radius:20px;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .vx-form-group .selected .chip-container .chip-inner i.cross{cursor:pointer;position:relative;top:1px;font-size:8px}::ng-deep .vx-form-group .selected button.count{background:#1e5dd3;border-radius:2px;height:24px;padding:0 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none;color:#fff;font:13px;font-weight:500;line-height:20px;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit{border:none;border-radius:0;background:transparent;outline:none;cursor:pointer;display:block;font-size:11px;font-weight:600;color:#1e5dd3;text-transform:uppercase;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit i{font-weight:400;font-size:8px;margin-right:4px}::ng-deep .vx-form-group .selected button.close-btn{background:transparent;border:none;padding:0;margin-left:8px;font-size:10px;color:#c7381b;display:flex;align-items:center}::ng-deep .vx-form-group .selected .workflow-label{min-width:92px;padding:4px;text-align:center;margin-left:-8px;margin-right:8px;border-right:1px solid #f1f1f1}::ng-deep .vx-form-group .selected .workflow-label p{margin:0;display:block;text-transform:uppercase}::ng-deep .vx-form-group .selected .workflow-label p.title{font-size:9px;line-height:12px;color:#161b2f;font-weight:500}::ng-deep .vx-form-group .selected .workflow-label p.description{font-size:11px;line-height:16px;color:#161b2f;font-weight:600}::ng-deep .vx-form-group .selected .workflow-label+.chip-container{width:calc(100% - 148px)}::ng-deep .vx-form-group .selected+.selected{margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .selected+app-cs-switch.who-toggle label.cs-switch span.value{color:#747576}::ng-deep .vx-form-group .selected+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .selected~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .selected.readOnly{pointer-events:none}::ng-deep .vx-form-group .selected span.chip{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .vx-form-group .select-list{position:absolute;background:#fff;box-shadow:0 0 5px #1e5dd345;top:100%;right:0;left:0;z-index:2}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item{width:100%;padding:12px 16px}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item:hover{background:#f8f8f8}::ng-deep .vx-form-group ::ng-deep vcomply-editor{margin-top:8px;display:block;pointer-events:auto!important;z-index:1}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb}::ng-deep .vx-form-group ::ng-deep 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 ::ng-deep vcomply-editor .editor-container .editable-block ul{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editable-block ul li{list-style:disc}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editable-block ol{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editable-block ol li{list-style:decimal}::ng-deep .vx-form-group ::ng-deep 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 ::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 .vx-form-group ::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .vx-form-group ::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 .vx-form-group ::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 .vx-form-group ::ng-deep vcomply-editor .editor-container:focus-within{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container:focus-within .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container:hover{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container:hover .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group ::ng-deep vcomply-editor+app-cs-switch{margin-top:8px}::ng-deep .vx-form-group app-cs-switch label.cs-switch span.value{font-size:11px;color:#747576;text-transform:uppercase}::ng-deep .vx-form-group app-cs-switch+app-cs-switch{margin-top:8px}::ng-deep .vx-form-group .date-time-picker{display:flex;justify-content:space-between;height:40px;border-radius:4px;border:1px solid #dbdbdb;padding:11px 0;background:#fff}::ng-deep .vx-form-group .date-time-picker:focus-within{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .vx-form-group .date-time-picker .picker-group{width:50%;position:relative;display:flex;align-items:center}::ng-deep .vx-form-group .date-time-picker .picker-group:first-of-type{border-right:1px solid #dbdbdb}::ng-deep .vx-form-group .date-time-picker .picker-group:only-of-type{border:none;width:100%}::ng-deep .vx-form-group .date-time-picker .picker-group input{height:38px;background:transparent;outline:none;line-height:38px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;border:none;padding:0 12px 0 34px}::ng-deep .vx-form-group .date-time-picker .picker-group input:focus,::ng-deep .vx-form-group .date-time-picker .picker-group input:hover{box-shadow:none;border:none}::ng-deep .vx-form-group .date-time-picker .picker-group input::placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input:-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input::-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group i{display:flex;justify-content:center;align-items:center;height:16px;width:12px;position:absolute;left:12px;top:0;color:#747576;font-size:12px;pointer-events:none}::ng-deep .vx-form-group app-cs-radio.main-filed{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;color:#707070}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group app-cs-radio.disabled{pointer-events:none;opacity:.5;filter:grayscale(1);background:#f1f1f1}::ng-deep .vx-form-group .switch-row{display:flex}::ng-deep .vx-form-group .switch-row app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:0;text-transform:uppercase;color:#747576!important}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value i{display:inline-flex;font-size:11px;cursor:pointer;color:#1e5dd3;align-items:center;line-height:16px;margin:0 4px}::ng-deep .vx-form-group .switch-row app-cs-switch+app-cs-switch{margin-left:8px}::ng-deep .vx-form-group .switch-row.align-right{justify-content:flex-end}::ng-deep .vx-form-group .switch-row.align-right label.cs-switch span.value{margin-right:8px}::ng-deep .vx-form-group .risk-type-field{background:#f8f8f8;border:1px solid #dbdbdb;border-radius:4px;height:40px;display:flex;align-items:center;padding:4px;position:relative;z-index:1}::ng-deep .vx-form-group .risk-type-field .type-item{width:50%;position:relative}::ng-deep .vx-form-group .risk-type-field .type-item button{background:transparent;border:none;border-radius:0;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase;width:100%;height:32px;padding:0 12px;text-align:left}::ng-deep .vx-form-group .risk-type-field .type-item button.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item .info{color:#1e5dd3;font-size:12px;position:absolute;top:10px;right:12px;cursor:pointer}::ng-deep .vx-form-group .risk-type-field .type-item .info.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item.active button{color:#1e5dd3!important}::ng-deep .vx-form-group .risk-type-field .type-item:nth-child(2).active~.background-glider{transform:translate(100%)}::ng-deep .vx-form-group .risk-type-field .background-glider{background:#fff;border-radius:4px;box-shadow:0 1px 3px #161b2f26;position:absolute;display:flex;width:212px;height:32px;z-index:-1;transition:.25s ease-out}.left{width:36px;height:36px;margin-top:26px;margin-left:-58px;margin-right:20px;display:flex;justify-content:center;align-items:center;position:relative;z-index:10;border-radius:50%}.left.deadline-completed{margin-top:18px}.left.checked{background:transparent}.left img{width:36px}.left .checkIcon{width:32px;height:32px;background:#fff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}.left .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}.left .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}.right{width:100%}.right span.indicator{position:absolute;top:36px;left:-16px;font-size:12px;color:#f0b819;cursor:pointer}.right app-format-and-evidence~.error-message{position:relative;top:-12px}.form-group-row{display:flex;position:relative;transition:all .2s ease-in-out}.form-group-row.disabled{-webkit-user-select:none;user-select:none;pointer-events:none;filter:grayscale(1);z-index:2}.form-group-row.disabled .left{position:relative}.form-group-row.disabled .left:before{content:\"\";position:absolute;inset:2px 0 0 2px;background:#fff;opacity:.7;border-radius:50%;width:32px;height:32px}.form-group-row.disabled .right{opacity:.3}.form-group-row.active{pointer-events:none;filter:grayscale(0);z-index:2;opacity:1}.form-group-row.active .right .vx-form-group input,.form-group-row.active .right .vx-form-group .custom-input,.form-group-row.active .right .vx-form-group .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}.form-group-row.active .right .vx-form-group .selectBoxEnable.disabled{border-color:#dbdbdb;box-shadow:none}::ng-deep .radio-group-selector app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .radio-group-selector app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .radio-group-selector app-cs-radio label.radio-item .radio,::ng-deep .radio-group-selector app-cs-radio label.radio-item .radiomark{position:absolute!important;top:9px;left:12px}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value{font-size:11px!important;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0!important;max-width:100%!important;font-weight:500!important;color:#707070!important}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value i{font-size:12px;color:#1e5dd3}::ng-deep .radio-group-selector app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}::ng-deep .wf-action-list{width:220px}::ng-deep .wf-action-list ul{padding:0;margin:0;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}::ng-deep .wf-action-list ul.action-item{display:block}::ng-deep .wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}::ng-deep .wf-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}::ng-deep .wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .wf-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .wf-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .wf-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .wf-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .wf-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}::ng-deep .wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{-webkit-transform:translateY(50px);transform:translateY(50px)}to{-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes scale-up-center{0%{-webkit-transform:scale(.5);transform:scale(.5);opacity:0}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes scale-up-center{0%{-webkit-transform:scale(.5);transform:scale(.5);opacity:0}to{-webkit-transform:scale(1);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{-webkit-animation:rotate 2s linear infinite;animation:rotate 2s linear infinite;height:100%;-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center;width:100%;position:absolute;top:0;left:0;margin:auto}.loader-path{stroke-dasharray:150,200;stroke-dashoffset:-10;-webkit-animation:dash 1.5s ease-in-out infinite;animation:dash 1.5s ease-in-out infinite;stroke-linecap:round}@-webkit-keyframes rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-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}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35}to{stroke-dasharray:89,200;stroke-dashoffset:-124}}::ng-deep .dropdown{position:fixed;background:#fff;box-shadow:0 3px 6px #00000029;padding:24px 0;z-index:9;max-height:calc(100vh - 200px);overflow:auto}::ng-deep .dropdown ul.dropdown-list{padding:0 20px;margin:0;display:block}::ng-deep .dropdown ul.dropdown-list li{list-style:none}::ng-deep .dropdown ul.dropdown-list li app-cs-radio{display:flex}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.radio{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.value{padding:11px 12px 11px 32px;width:100%;border:1px solid #bcbcbc;border-radius:4px;margin-left:0;max-width:100%}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item svg{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item input[type=radio]:checked~span.value{background:#e8feeb;border-color:#34aa44}::ng-deep .dropdown ul.dropdown-list li+li{margin-top:8px}app-smiley-dialog{position:relative;z-index:10}app-smiley-dialog-inline{position:absolute;top:-3px;right:0;bottom:0;z-index:999;width:520px;height:calc(100vh + 3px)}::ng-deep .vx-overlay{position:fixed;z-index:3;inset:0}::ng-deep dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}::ng-deep dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}::ng-deep dp-date-picker input:focus{outline:none}::ng-deep dp-date-picker .dp-popup{width:412px;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep dp-date-picker .dp-popup dp-day-calendar,::ng-deep dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep dp-date-picker .dp-popup dp-day-calendar button,::ng-deep dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}::ng-deep dp-date-picker .dp-open+div{position:fixed!important;inset:0!important;display:flex;justify-content:center;align-items:center;z-index:99;pointer-events:none;background:#0000004d}::ng-deep .cdk-overlay-container{z-index:2147483002!important}::ng-deep .dp-popup{z-index:999;display:flex!important;align-items:center;justify-content:center;width:100vw;height:100vh;background:#0000004d!important;box-shadow:unset!important}::ng-deep .dp-popup dp-day-calendar{width:412px!important;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep .dp-popup dp-day-calendar,::ng-deep .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep .dp-popup dp-day-calendar button,::ng-deep .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep .dp-popup dp-day-calendar .dp-weekdays,::ng-deep .dp-popup dp-month-calendar .dp-weekdays,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}@-webkit-keyframes slide-bottom{0%{-webkit-transform:translateY(-100px);transform:translateY(-100px)}to{-webkit-transform:translateY(0px);transform:translateY(0)}}@keyframes slide-bottom{0%{-webkit-transform:translateY(-100px);transform:translateY(-100px)}to{-webkit-transform:translateY(0px);transform:translateY(0)}}::ng-deep span.file{display:block;width:20px;min-width:20px;border-radius:0 0 2px 2px;border:1px solid transparent;border-color:#747576;position:relative;margin-right:5px;border-top:none;margin-top:5px;background:#fff}::ng-deep span.file.table{margin-right:8px;width:18px;min-width:18px}::ng-deep span.file.table i{font-size:8px}::ng-deep span.file.table .format{height:8px;font-size:7px;line-height:8px;font-weight:400}::ng-deep span.file:before{position:absolute;border-radius:0;top:-4px;right:-1px;content:\"\";height:4px;width:4px;display:block;background:-moz-linear-gradient(45deg,#747576 0%,#747576 1%,#747576 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);background:-webkit-linear-gradient(45deg,#747576 0%,#747576 1%,#747576 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);background:linear-gradient(45deg,#747576 0% 1%,#747576 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file:after{height:4px;left:-1px;right:3px;border-top:1px solid;border-right:none;border-left:1px solid;content:\"\";top:-4px;position:absolute;border-radius:2px 0 0;background:#fff}::ng-deep span.file .format{height:10px;font-size:6px;text-transform:uppercase;background:transparent;font-weight:600;text-align:center;display:block;line-height:10px}::ng-deep span.file i{font-size:10px;height:10px;display:flex;align-items:center;justify-content:center;color:#dbdbdb}::ng-deep span.file.docx{width:22px!important}::ng-deep span.file.pdf,::ng-deep span.file.template{border-color:#f31c39}::ng-deep span.file.pdf:before,::ng-deep span.file.template:before{background:-moz-linear-gradient(45deg,#f31c39 0%,#f31c39 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);background:-webkit-linear-gradient(45deg,#f31c39 0%,#f31c39 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);background:linear-gradient(45deg,#f31c39 0% 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#f31c39\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.pdf:after,::ng-deep span.file.template:after{border-color:#f31c39}::ng-deep span.file.pdf .format,::ng-deep span.file.template .format{color:#f31c39}::ng-deep span.file.xlsx,::ng-deep span.file.xls,::ng-deep span.file.css,::ng-deep span.file.scss,::ng-deep span.file.less{border-color:#34aa44}::ng-deep span.file.xlsx:before,::ng-deep span.file.xls:before,::ng-deep span.file.css:before,::ng-deep span.file.scss:before,::ng-deep span.file.less:before{background:-moz-linear-gradient(45deg,#34aa44 0%,#34aa44 1%,#34aa44 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);background:-webkit-linear-gradient(45deg,#34aa44 0%,#34aa44 1%,#34aa44 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);background:linear-gradient(45deg,#34aa44 0% 1%,#34aa44 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.xlsx:after,::ng-deep span.file.xls:after,::ng-deep span.file.css:after,::ng-deep span.file.scss:after,::ng-deep span.file.less:after{border-color:#34aa44;color:#34aa44}::ng-deep span.file.xlsx .format,::ng-deep span.file.xls .format,::ng-deep span.file.css .format,::ng-deep span.file.scss .format,::ng-deep span.file.less .format{color:#34aa44}::ng-deep span.file.doc,::ng-deep span.file.docx,::ng-deep span.file.psd{border-color:#1e5dd3}::ng-deep span.file.doc:before,::ng-deep span.file.docx:before,::ng-deep span.file.psd:before{background:-moz-linear-gradient(45deg,#1e5dd3 0%,#1e5dd3 1%,#1e5dd3 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);background:-webkit-linear-gradient(45deg,#1e5dd3 0%,#1e5dd3 1%,#1e5dd3 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);background:linear-gradient(45deg,#1e5dd3 0% 1%,#1e5dd3 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.doc:after,::ng-deep span.file.docx:after,::ng-deep span.file.psd:after{border-color:#1e5dd3}::ng-deep span.file.doc .format,::ng-deep span.file.docx .format,::ng-deep span.file.psd .format{color:#1e5dd3}::ng-deep span.file.ppt,::ng-deep span.file.ai,::ng-deep span.file.html,::ng-deep span.file.jpg,::ng-deep span.file.jpeg,::ng-deep span.file.png{border-color:#f6882f}::ng-deep span.file.ppt:before,::ng-deep span.file.ai:before,::ng-deep span.file.html:before,::ng-deep span.file.jpg:before,::ng-deep span.file.jpeg:before,::ng-deep span.file.png:before{background:-moz-linear-gradient(45deg,#f6882f 0%,#f6882f 1%,#f6882f 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);background:-webkit-linear-gradient(45deg,#f6882f 0%,#f6882f 1%,#f6882f 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);background:linear-gradient(45deg,#f6882f 0% 1%,#f6882f 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.ppt:after,::ng-deep span.file.ai:after,::ng-deep span.file.html:after,::ng-deep span.file.jpg:after,::ng-deep span.file.jpeg:after,::ng-deep span.file.png:after{border-color:#f6882f}::ng-deep span.file.ppt .format,::ng-deep span.file.ai .format,::ng-deep span.file.html .format,::ng-deep span.file.jpg .format,::ng-deep span.file.jpeg .format,::ng-deep span.file.png .format{color:#f6882f}::ng-deep span.file.php{border-color:#7aa6f7}::ng-deep span.file.php:before{background:-moz-linear-gradient(45deg,#7aa6f7 0%,#7aa6f7 1%,#7aa6f7 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);background:-webkit-linear-gradient(45deg,#7aa6f7 0%,#7aa6f7 1%,#7aa6f7 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);background:linear-gradient(45deg,#7aa6f7 0% 1%,#7aa6f7 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.php:after{border-color:#7aa6f7}::ng-deep span.file.php .format{color:#7aa6f7}::ng-deep ngx-material-timepicker-container .timepicker-backdrop-overlay{background-color:#0000000d!important;z-index:9999999999!important}::ng-deep ngx-material-timepicker-container .timepicker-overlay{z-index:9999999999!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker{width:232px!important;border-radius:2px!important;box-shadow:0 4px 30px #161b2f26!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header{background-color:#fff!important;padding:0!important;border-radius:2px 2px 0 0}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container{display:block!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time{color:#000!important;width:150px!important;margin:0 auto;line-height:60px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control{font-size:40px;background-color:transparent!important;color:#000!important;font-weight:600;text-align:right;caret-color:transparent;outline:none;font-family:Poppins,sans-serif;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,sans-serif;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;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,sans-serif}::ng-deep vcomply-editor{display:block}::ng-deep vcomply-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep vcomply-editor .editor-container:hover,::ng-deep vcomply-editor .editor-container:focus-within{border:1px solid #1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep vcomply-editor .editor-container mention-list ul li a{font-size:16px!important}::ng-deep vcomply-editor .editor-container .editable-block{background:#fff;min-height:60px;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep vcomply-editor .editor-container .editable-block:before{color:#747576!important}::ng-deep vcomply-editor .editor-container .editor-tools{border-top:1px solid #dbdbdb;border-radius:0 0 3px 3px}::ng-deep vcomply-editor .editor-container .editor-tools:hover{border-color:#1e5dd3}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep marx-modal .popup-modal-background{background-color:#161b2fcc!important}::ng-deep .within-box{background:#f1f1f1;border-radius:.125rem;color:#042e7d}::ng-deep .within-value{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-word}.wf-tooltip{pointer-events:none;position:absolute;max-width:300px;font-size:12px;text-align:left;color:#fff;padding:8px 12px;background:#000;border-radius:2px;z-index:-222;top:0;opacity:0;white-space:break-spaces;word-break:break-word}.wf-tooltip *{color:#fff!important}.wf-tooltip:empty{display:none!important}.wf-tooltip.white{box-shadow:0 2px 8px #1c5bd159;color:#747576;background:#fff;text-align:left}.wf-tooltip.white b{color:#747576!important}.wf-tooltip.animate-top{-webkit-animation:animate-top .5s cubic-bezier(.25,.46,.45,.94) both;animation:animate-top .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-right{-webkit-animation:animate-right .3s cubic-bezier(.25,.46,.45,.94) both;animation:animate-right .3s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-bottom{-webkit-animation:animate-bottom .5s cubic-bezier(.25,.46,.45,.94) both;animation:animate-bottom .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-left{-webkit-animation:animate-left .5s cubic-bezier(.25,.46,.45,.94) both;animation:animate-left .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip-top:after{top:100%;left:50%;margin-left:-5px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip-bottom:after{bottom:100%;left:50%;margin-left:-5px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-left.white:after{border-color:transparent transparent transparent #f1f1f1}.wf-tooltip-left:after{top:50%;left:100%;margin-top:-5px;border-width:5px;border-color:transparent transparent transparent #000000}.wf-tooltip-right.white:after{border-color:transparent #f1f1f1 transparent transparent}.wf-tooltip-right:after{top:50%;right:100%;margin-top:-5px;border-width:5px;border-color:transparent #000000 transparent transparent}.wf-tooltip-bottom-right:after{bottom:100%;left:100%;margin-left:-20px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom-right.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-bottom-left:after{bottom:100%;left:0;margin-left:10px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom-left.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-top-left:after{top:100%;left:0;margin-left:10px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top-left.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip-top-right:after{top:100%;left:100%;margin-left:-5px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top-right.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip:after{content:\"\";position:absolute;border-style:solid}.wf-tooltip span.within{font-size:80%;display:block;width:100%}.wf-tooltip .small{display:block;font-size:10px}.wf-tooltip .within-box{background:#f1f1f1;border-radius:2px;color:#042e7d!important;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 2px;margin-right:2px}.wf-tooltip-show{pointer-events:none;opacity:1;z-index:2147483001}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value", "oneLine"], outputs: ["checkedEvent"] }, { kind: "component", type: i4.VcomplyEditorComponent, selector: "vcomply-editor", inputs: ["editorConfig"], outputs: ["comment", "sendSavedFiles", "popup"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "directive", type: i1$2.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$2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormatAndEvidenceComponent, selector: "app-format-and-evidence", inputs: ["mode", "categories", "organization_id", "formatEvidanceData", "isMandatory"], outputs: ["updateFiles"] }, { 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: ScrollInViewDirective, selector: "[appScrollInView]", inputs: ["appScrollInView"] }, { kind: "component", type: CheckboxListComponent, selector: "app-checkbox-list", inputs: ["itemsList", "selectedItems", "identifierKey", "displayKey", "tooltipKey", "config", "twoColumn", "loaded"], outputs: ["closeList", "saveList"] }, { kind: "component", type: CaseTypeComponent, selector: "app-case-type", inputs: ["fieldSelected"], outputs: ["caseTypeChange"] }, { kind: "component", type: InformationBlockComponent, selector: "app-information-block" }, { kind: "component", type: CaseDetailsComponent, selector: "app-case-details", inputs: ["payload", "fieldSelected", "validationError", "caseTypeSelected"] }, { kind: "component", type: VCFormLabelComponent, selector: "app-vc-label", inputs: ["labelText", "details", "required", "showInfo", "tooltipText"] }, { kind: "component", type: FieldHolderComponent, selector: "app-field-holder", inputs: ["image", "active", "disabled", "checked", "scrollToBottom"] }, { kind: "component", type: RcDetailsComponent, selector: "app-rc-details", inputs: ["payload", "fieldSelected", "caseTypeSelected", "validationError", "initialSelection", "mode", "workflowType"], outputs: ["fieldClicked", "onRcChange", "filterDeselector"] }, { kind: "component", type: CaseDropdownComponent, selector: "app-case-type-dropdown", inputs: ["fieldSelected", "payload", "validationError", "initialSelection", "mode", "caseTypeSelected", "workflowType"], outputs: ["onCaseTypeChange", "onCaseTypeLoading"] }, { kind: "component", type: ReportDateComponent, selector: "app-report-date", inputs: ["payload", "fieldSelected", "validationError"] }, { kind: "component", type: CasePriorityComponent, selector: "app-case-priority", inputs: ["fieldSelected", "payload", "caseTypeSelected", "validationError", "initialSelection", "mode", "workflowType"], outputs: ["onPriorityChange", "onPriorityLoader"] }, { kind: "component", type: CaseCategoryComponent, selector: "app-case-category", inputs: ["payload", "fieldSelected", "caseTypeSelected", "initialSelection", "initialAdditionalSelection", "mode", "workflowType"], outputs: ["onCategoryChange", "fieldClicked", "filterDeselector"] }, { kind: "component", type: CaseResolutionDeadlineComponent, selector: "app-case-resolution-deadline", inputs: ["payload", "userList", "groupList", "mode", "caseId", "initialSelection", "fieldSelected", "validationError"], outputs: ["fieldClicked", "filterDeselector"] }, { kind: "component", type: CaseAssigneesComponent, selector: "app-case-assignees", inputs: ["payload", "fieldSelected", "userList", "groupList", "initialSelection", "validationError"], outputs: ["fieldClicked", "onRcChange", "filterDeselector"] }, { kind: "component", type: CaseOwnersComponent, selector: "app-case-owners", inputs: ["payload", "fieldSelected", "initialSelection", "workflowId", "validationError", "mode"], outputs: ["fieldClicked", "filterDeselector"] }, { kind: "component", type: LinkedAssessmentComponent, selector: "app-linked-assessment", inputs: ["openedFrom", "payload", "responsibilityData", "assessmentQuestion", "fieldSelected"] }, { kind: "component", type: LinkedResponsibilitiesComponent, selector: "app-linked-responsibilities", inputs: ["openedFrom", "isLinkQuestionVisible", "payload", "fieldSelected", "responsibilityData"], outputs: ["fieldClicked"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: SpaceBreakerPipe, name: "spaceBreaker" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.21", type: WorkflowCaseComponent, isStandalone: false, selector: "app-workflow-case", inputs: { openedFrom: "openedFrom", source: "source", caseId: "caseId", mode: "mode", workflowType: "workflowType", responsibilityData: "responsibilityData", assessmentQuestion: "assessmentQuestion", caseTypePermission: "caseTypePermission" }, outputs: { closeWorkflow: "closeWorkflow", populateOption: "populateOption", caseReportedBy: "caseReportedBy", userListEmitter: "userListEmitter", disconnectRefresh: "disconnectRefresh", pickerChanged: "pickerChanged" }, ngImport: i0, template: "<div *ngIf=\"!showSmiley\" class=\"workflow-case\">\n  <app-case-type\n    *ngIf=\"mode !== 'EDIT' && caseTypePermission\"\n    [fieldSelected]=\"fieldClicked\"\n    (caseTypeChange)=\"onCaseTypeChange($event)\"\n  ></app-case-type>\n  <app-linked-responsibilities\n    *ngIf=\"['COMPLIANCE_WORKROOM', 'ASSESSMENT'].includes(openedFrom)\"\n    [payload]=\"\n      caseTypeSelected === caseType.REPORT_CASE ? payload : addToCasePayload\n    \"\n    [openedFrom]=\"openedFrom\"\n    [fieldSelected]=\"fieldClicked\"\n    [responsibilityData]=\"responsibilityData\"\n    (fieldClicked)=\"onFieldClicked($event)\"\n  ></app-linked-responsibilities>\n  <app-linked-assessment\n    *ngIf=\"openedFrom === 'ASSESSMENT'\"\n    [payload]=\"payload\"\n    [openedFrom]=\"openedFrom\"\n    [fieldSelected]=\"fieldClicked\"\n    [responsibilityData]=\"responsibilityData\"\n    [assessmentQuestion]=\"assessmentQuestion\"\n    (fieldClicked)=\"onFieldClicked($event)\"\n  ></app-linked-assessment>\n  <app-case-details\n    [payload]=\"\n      caseTypeSelected === caseType.REPORT_CASE ? payload : addToCasePayload\n    \"\n    [fieldSelected]=\"fieldClicked\"\n    [validationError]=\"validationError\"\n    [caseTypeSelected]=\"caseTypeSelected\"\n  ></app-case-details>\n  <span\n    *ngIf=\"caseTypeSelected === caseType.ADD_CASE_TO_WORKFLOW\"\n    class=\"head-label vx-fs-10 vx-fw-500 vx-txt-white vx-tt-uppercase vx-pl-1 vx-pr-1 vx-lh-4\"\n  >\n    CASE DETAILS\n  </span>\n  <app-information-block\n    *ngIf=\"caseTypeSelected === caseType.ADD_CASE_TO_WORKFLOW\"\n  ></app-information-block>\n  <app-rc-details\n    [payload]=\"\n      caseTypeSelected === caseType.REPORT_CASE ? payload : addToCasePayload\n    \"\n    [fieldSelected]=\"fieldClicked\"\n    [caseTypeSelected]=\"caseTypeSelected\"\n    [validationError]=\"validationError\"\n    [initialSelection]=\"\n      caseTypeSelected === caseType.REPORT_CASE\n        ? payload?.rc_details\n        : addToCasePayload?.rc_details\n    \"\n    [mode]=\"mode\"\n    [workflowType]=\"workflowType\"\n    (fieldClicked)=\"onFieldClicked($event)\"\n    (onRcChange)=\"onRcChange($event)\"\n    (filterDeselector)=\"pickerToggle($event)\"\n  ></app-rc-details>\n  <app-case-type-dropdown\n    [payload]=\"\n      caseTypeSelected === caseType.REPORT_CASE ? payload : addToCasePayload\n    \"\n    [fieldSelected]=\"fieldClicked\"\n    [validationError]=\"validationError\"\n    [initialSelection]=\"\n      caseTypeSelected === caseType.REPORT_CASE\n        ? payload?.case_type\n        : addToCasePayload?.case_type\n    \"\n    [mode]=\"mode\"\n    [caseTypeSelected]=\"caseTypeSelected\"\n    [workflowType]=\"workflowType\"\n    (onCaseTypeChange)=\"onCaseTypeDropdownChange($event)\"\n    (onCaseTypeLoading)=\"onCaseLoader($event, 'type')\"\n  ></app-case-type-dropdown>\n  <app-case-category\n    [payload]=\"\n      caseTypeSelected === caseType.REPORT_CASE ? payload : addToCasePayload\n    \"\n    [fieldSelected]=\"fieldClicked\"\n    [caseTypeSelected]=\"caseTypeSelected\"\n    [initialSelection]=\"\n      caseTypeSelected === caseType.REPORT_CASE\n        ? payload?.category\n        : addToCasePayload?.category\n    \"\n    [initialAdditionalSelection]=\"\n      caseTypeSelected === caseType.REPORT_CASE\n        ? payload?.additional_category\n        : addToCasePayload?.additional_category\n    \"\n    [mode]=\"mode\"\n    [workflowType]=\"workflowType\"\n    (onCategoryChange)=\"onCategoryChange($event)\"\n    (fieldClicked)=\"onFieldClicked($event)\"\n    (filterDeselector)=\"pickerToggle($event)\"\n  ></app-case-category>\n  <app-report-date\n    [payload]=\"\n      caseTypeSelected === caseType.REPORT_CASE ? payload : addToCasePayload\n    \"\n    [fieldSelected]=\"fieldClicked\"\n    [validationError]=\"validationError\"\n    (fieldClicked)=\"onFieldClicked($event)\"\n  ></app-report-date>\n  <app-case-priority\n    [payload]=\"\n      caseTypeSelected === caseType.REPORT_CASE ? payload : addToCasePayload\n    \"\n    [fieldSelected]=\"fieldClicked\"\n    [caseTypeSelected]=\"caseTypeSelected\"\n    [validationError]=\"validationError\"\n    [initialSelection]=\"\n      caseTypeSelected === caseType.REPORT_CASE\n        ? payload?.priority\n        : addToCasePayload?.priority\n    \"\n    [mode]=\"mode\"\n    [workflowType]=\"workflowType\"\n    (onPriorityChange)=\"onPriorityChange($event)\"\n    (onPriorityLoader)=\"onCaseLoader($event, 'priority')\"\n  ></app-case-priority>\n  <ng-template #supportingDocumentsBlock let-docs=\"docs\">\n    <app-field-holder\n      [image]=\"ASSETS.format_evidence\"\n      [disabled]=\"fieldSelector?.includes(fieldClicked)\"\n      [checked]=\"docs?.length\"\n    >\n      <ng-container field>\n        <app-vc-label\n          label\n          [labelText]=\"reportTexts?.case_details?.attachments?.title\"\n        ></app-vc-label>\n        <app-format-and-evidence\n          (updateFiles)=\"saveSupportingDocument($event)\"\n          [mode]=\"'reportACase'\"\n          [formatEvidanceData]=\"docs\"\n        ></app-format-and-evidence>\n      </ng-container>\n    </app-field-holder>\n  </ng-template>\n  <ng-container\n    *ngIf=\"caseTypeSelected === caseType.ADD_CASE_TO_WORKFLOW\"\n    [ngTemplateOutlet]=\"supportingDocumentsBlock\"\n    [ngTemplateOutletContext]=\"{ docs: addToCasePayload?.supporting_documents }\"\n  ></ng-container>\n  <span\n    *ngIf=\"caseTypeSelected === caseType.ADD_CASE_TO_WORKFLOW\"\n    class=\"head-label vx-fs-10 vx-fw-500 vx-txt-white vx-tt-uppercase vx-pl-1 vx-pr-1 vx-lh-4\"\n  >\n    USER DETAILS\n  </span>\n  <app-case-owners\n    *ngIf=\"caseTypeSelected === caseType.ADD_CASE_TO_WORKFLOW\"\n    [payload]=\"addToCasePayload\"\n    [initialSelection]=\"addToCasePayload?.caseToWorkflow?.owners\"\n    [workflowId]=\"addToCasePayload?.caseToWorkflow?.workflow_id\"\n    [fieldSelected]=\"fieldClicked\"\n    [validationError]=\"validationError\"\n    [mode]=\"mode\"\n    (fieldClicked)=\"onFieldClicked($event)\"\n    (filterDeselector)=\"pickerToggle($event)\"\n  ></app-case-owners>\n  <app-case-assignees\n    *ngIf=\"caseTypeSelected === caseType.ADD_CASE_TO_WORKFLOW\"\n    [payload]=\"addToCasePayload\"\n    [fieldSelected]=\"fieldClicked\"\n    [initialSelection]=\"addToCasePayload?.caseToWorkflow\"\n    [userList]=\"userList\"\n    [groupList]=\"groupList\"\n    [validationError]=\"validationError\"\n    (fieldClicked)=\"onFieldClicked($event)\"\n    (filterDeselector)=\"pickerToggle($event)\"\n  ></app-case-assignees>\n  <ng-container\n    *ngIf=\"caseTypeSelected === caseType.REPORT_CASE\"\n    [ngTemplateOutlet]=\"supportingDocumentsBlock\"\n    [ngTemplateOutletContext]=\"{ docs: payload?.supporting_documents }\"\n  ></ng-container>\n  <span\n    *ngIf=\"caseTypeSelected === caseType.ADD_CASE_TO_WORKFLOW\"\n    class=\"head-label vx-fs-10 vx-fw-500 vx-txt-white vx-tt-uppercase vx-pl-1 vx-pr-1 vx-lh-4 vx-mb-4\"\n  >\n    CASE RESOLUTION DETAILS\n  </span>\n  <app-case-resolution-deadline\n    *ngIf=\"caseTypeSelected === caseType.ADD_CASE_TO_WORKFLOW\"\n    [payload]=\"addToCasePayload\"\n    [userList]=\"userList\"\n    [groupList]=\"groupList\"\n    [initialSelection]=\"addToCasePayload?.caseToWorkflow\"\n    [fieldSelected]=\"fieldClicked\"\n    [mode]=\"mode\"\n    [caseId]=\"caseId\"\n    (fieldClicked)=\"onFieldClicked($event)\"\n    [validationError]=\"validationError\"\n    (filterDeselector)=\"pickerToggle($event)\"\n  ></app-case-resolution-deadline>\n  <span\n    *ngIf=\"\n      caseTypeSelected === caseType.ADD_CASE_TO_WORKFLOW &&\n      displayAdditionalOptions\n    \"\n    class=\"head-label vx-fs-10 vx-fw-500 vx-txt-white vx-tt-uppercase vx-pl-1 vx-pr-1 vx-lh-4\"\n  >\n    ADDITIONAL OPTIONS\n  </span>\n  <!-- Exception Type -->\n  <app-field-holder\n    *ngIf=\"\n      additionalOptionStatus.EXCEPTION_TYPE &&\n      caseTypeSelected === caseType.ADD_CASE_TO_WORKFLOW\n    \"\n    [scrollToBottom]=\"scrollToBottom\"\n    [active]=\"false\"\n    [disabled]=\"fieldSelector?.includes(fieldClicked)\"\n    [checked]=\"addToCasePayload?.caseToWorkflow?.exception_type\"\n    [image]=\"ASSETS.objectives\"\n  >\n    <ng-container field>\n      <span class=\"vx-control-panel\">Exception Type</span>\n      <app-cs-radio\n        class=\"main-filed\"\n        [value]=\"exceptionType.DESIGN_EXCEPTION\"\n        name=\"exception-type\"\n        [checked]=\"\n          addToCasePayload?.caseToWorkflow?.exception_type ===\n          exceptionType.DESIGN_EXCEPTION\n        \"\n        (checkedEvent)=\"setException(exceptionType.DESIGN_EXCEPTION)\"\n        >Design Exception\n      </app-cs-radio>\n      <app-cs-radio\n        class=\"main-filed\"\n        [value]=\"exceptionType.EFFECTIVENESS_EXCEPTION\"\n        name=\"exception-type\"\n        [checked]=\"\n          addToCasePayload?.caseToWorkflow?.exception_type ===\n          exceptionType.EFFECTIVENESS_EXCEPTION\n        \"\n        (checkedEvent)=\"setException(exceptionType.EFFECTIVENESS_EXCEPTION)\"\n        >Effectiveness Exception\n      </app-cs-radio>\n    </ng-container>\n  </app-field-holder>\n\n  <!-- Associated Risks -->\n  <div\n    [appScrollInView]=\"scrollToBottom\"\n    class=\"form-group-row\"\n    *ngIf=\"additionalOptionStatus.ASSOCIATED_RISKS\"\n    [class.disabled]=\"fieldSelector?.includes(fieldClicked)\"\n  >\n    <div\n      class=\"left\"\n      [class.checked]=\"addToCasePayload?.caseToWorkflow?.associated_risks?.text\"\n    >\n      <img\n        [src]=\"ASSETS.associated_risks\"\n        alt=\"im\"\n        *ngIf=\"\n          !addToCasePayload?.caseToWorkflow?.associated_risks?.text?.trim()\n            ?.length\n        \"\n      />\n\n      <svg\n        class=\"checkIcon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 52 52\"\n        *ngIf=\"\n          addToCasePayload?.caseToWorkflow?.associated_risks?.text?.trim()\n            .length\n        \"\n      >\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path\n          class=\"checkIcon__check\"\n          fill=\"none\"\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n        />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <span class=\"vx-control-panel\">Associated Risks </span>\n        <ng-container\n          *ngIf=\"\n            addToCasePayload?.caseToWorkflow?.associated_risks?.attachments\n              ?.length > 0\n          \"\n        >\n          <div\n            class=\"file-list\"\n            *ngFor=\"\n              let uploadingFile of addToCasePayload?.caseToWorkflow\n                ?.associated_risks?.attachments\n            \"\n          >\n            <div class=\"file-container\">\n              <span class=\"file-name\">{{ uploadingFile }}</span>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container\n          *ngIf=\"\n            addToCasePayload?.caseToWorkflow?.associated_risks?.attachments\n              ?.length > 0\n          \"\n        >\n          <div\n            class=\"file-list\"\n            *ngFor=\"\n              let file of addToCasePayload?.caseToWorkflow?.associated_risks\n                ?.attachments\n            \"\n          >\n            <div class=\"file-container\">\n              <span class=\"file-name\">{{ file?.name }}</span>\n              <button>\n                <i class=\"icons\" (click)=\"deleteFile(file, 'ASSOCIATED_RISKS')\"\n                  >&#xe90d;</i\n                >\n              </button>\n            </div>\n          </div>\n        </ng-container>\n        <vcomply-editor\n          [(ngModel)]=\"addToCasePayload.caseToWorkflow.associated_risks.text\"\n          [editorConfig]=\"{\n            mode: 'prime',\n            colorPalette: true,\n            link: true,\n            file: false,\n            placeholder: 'Associated Risks'\n          }\"\n          (clickOutside)=\"checkDescription()\"\n          (sendSavedFiles)=\"selectFile('ASSOCIATED_RISKS', $event)\"\n        ></vcomply-editor>\n      </div>\n    </div>\n  </div>\n\n  <!-- Overseer -->\n  <div\n    [appScrollInView]=\"scrollToBottom\"\n    class=\"form-group-row\"\n    [class.active]=\"false\"\n    *ngIf=\"additionalOptionStatus.OVERSIGHT\"\n    [class.disabled]=\"fieldSelector?.includes(fieldClicked)\"\n  >\n    <div\n      class=\"left\"\n      [class.checked]=\"\n        addToCasePayload?.caseToWorkflow?.oversights?.cc_ids?.length ||\n        addToCasePayload?.caseToWorkflow?.oversights?.cc_failures_ids?.length\n      \"\n    >\n      <img\n        [src]=\"ASSETS.oversight\"\n        alt=\"\"\n        *ngIf=\"\n          !(\n            addToCasePayload?.caseToWorkflow?.oversights?.cc_ids?.length ||\n            addToCasePayload?.caseToWorkflow?.oversights?.cc_failures_ids\n              ?.length\n          )\n        \"\n      />\n\n      <svg\n        class=\"checkIcon\"\n        *ngIf=\"\n          addToCasePayload?.caseToWorkflow?.oversights?.cc_ids?.length ||\n          addToCasePayload?.caseToWorkflow?.oversights?.cc_failures_ids?.length\n        \"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 52 52\"\n      >\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path\n          class=\"checkIcon__check\"\n          fill=\"none\"\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n        />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <span class=\"vx-control-panel\">Oversight</span>\n        <div class=\"select\" *ngIf=\"!selectedOversights?.cc_list?.length\">\n          <input\n            type=\"text\"\n            (click)=\"setActiveFieldSelector('CASE_CC', 'CASE_CC')\"\n            placeholder=\"Who should have oversight of this case?\"\n            readonly\n          />\n        </div>\n\n        <div class=\"selected\" *ngIf=\"selectedOversights?.cc_list?.length\">\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n            <i\n              class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n              (click)=\"deleteItem('CASE_CC', selectedOversights?.cc_list[0])\"\n              >&#xe9ae;</i\n            >\n            <span\n              class=\"chipName vx-fs-11 vx-label-txt\"\n              [appTooltip]=\"selectedOversights?.cc_list[0]?.employee_name\"\n              placement=\"bottom-left\"\n              delay=\"0\"\n              type=\"black\"\n              [tooltipMandatory]=\"false\"\n              >{{ selectedOversights?.cc_list[0]?.employee_name }}</span\n            >\n            <button\n              class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n              appPopover\n              (click)=\"CC.popover()\"\n              placement=\"right\"\n              *ngIf=\"selectedOversights?.cc_list?.length > 1\"\n            >\n              +{{ selectedOversights?.cc_list?.slice(1).length }}\n            </button>\n          </div>\n          <button\n            *ngIf=\"activeField !== 'CASE_CC'\"\n            class=\"edit\"\n            type=\"button\"\n            (click)=\"setActiveFieldSelector('CASE_CC', 'CASE_CC')\"\n          >\n            <i class=\"icons\">&#xe9ba;</i>Edit\n          </button>\n        </div>\n        <div\n          class=\"select\"\n          *ngIf=\"\n            !selectedOversights?.cc_failures_list ||\n            selectedOversights?.cc_failures_list?.length === 0\n          \"\n        >\n          <input\n            (click)=\"setActiveFieldSelector('CASE_FCC', 'CASE_FCC')\"\n            type=\"text\"\n            placeholder=\"Who should be notified if the case is not resolved?\"\n            readonly\n          />\n        </div>\n\n        <div\n          class=\"selected\"\n          *ngIf=\"selectedOversights?.cc_failures_list?.length\"\n        >\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n            <i\n              class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n              (click)=\"\n                deleteItem('CASE_FCC', selectedOversights?.cc_failures_list[0])\n              \"\n              >&#xe9ae;</i\n            >\n            <span\n              class=\"chipName vx-fs-11 vx-label-txt\"\n              [appTooltip]=\"\n                selectedOversights?.cc_failures_list[0]?.employee_name\n              \"\n              placement=\"bottom-left\"\n              delay=\"0\"\n              type=\"black\"\n              [tooltipMandatory]=\"false\"\n              >{{\n                selectedOversights?.cc_failures_list[0]?.employee_name\n              }}</span\n            >\n            <button\n              class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n              appPopover\n              (click)=\"FCC.popover()\"\n              placement=\"right\"\n              *ngIf=\"selectedOversights?.cc_failures_list?.length > 1\"\n            >\n              +{{ selectedOversights?.cc_failures_list?.slice(1)?.length }}\n            </button>\n          </div>\n          <button\n            *ngIf=\"activeField !== 'CASE_FCC'\"\n            class=\"edit\"\n            type=\"button\"\n            (click)=\"setActiveFieldSelector('CASE_FCC', 'CASE_FCC')\"\n          >\n            <i class=\"icons\">&#xe9ba;</i>Edit\n          </button>\n        </div>\n      </div>\n      <app-popover #CC [dontCloseonClick]=\"true\">\n        <div class=\"wf-action-list\">\n          <ul class=\"action-item\">\n            <li\n              *ngFor=\"\n                let cc of selectedOversights?.cc_list | slice : 1;\n                let j = index\n              \"\n            >\n              <div class=\"avatar-card\">\n                <span class=\"value\">\n                  <i class=\"icons\" (click)=\"deleteItem('CASE_CC', cc)\"\n                    >&#xe90d;</i\n                  >\n                  {{ cc?.employee_name }}\n                </span>\n              </div>\n            </li>\n          </ul>\n        </div>\n      </app-popover>\n      <app-popover #FCC [dontCloseonClick]=\"true\">\n        <div class=\"wf-action-list\">\n          <ul class=\"action-item\">\n            <li\n              *ngFor=\"\n                let fcc of selectedOversights?.cc_failures_list | slice : 1;\n                let j = index\n              \"\n            >\n              <div class=\"avatar-card\">\n                <span class=\"value\">\n                  <i class=\"icons\" (click)=\"deleteItem('CASE_FCC', fcc)\"\n                    >&#xe90d;</i\n                  >\n                  {{ fcc?.employee_name }}\n                </span>\n              </div>\n            </li>\n          </ul>\n        </div>\n      </app-popover>\n    </div>\n  </div>\n\n  <!-- Evidence -->\n  <div\n    [appScrollInView]=\"scrollToBottom\"\n    class=\"form-group-row\"\n    *ngIf=\"additionalOptionStatus.EVIDENCE\"\n    [class.disabled]=\"fieldSelector?.includes(fieldClicked)\"\n  >\n    <div class=\"left\" [class.checked]=\"true\">\n      <svg\n        class=\"checkIcon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 52 52\"\n      >\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path\n          class=\"checkIcon__check\"\n          fill=\"none\"\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n        />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <span class=\"vx-control-panel\">Evidence</span>\n        <div class=\"upload-format\">\n          <span class=\"text\"\n            >Do you want evidence of completion of the case to be\n            uploaded?</span\n          >\n          <div class=\"radio-group\">\n            <app-cs-radio\n              [name]=\"'file-evidence'\"\n              [value]=\"1\"\n              [checked]=\"addToCasePayload?.caseToWorkflow?.evidence_enabled\"\n              (checkedEvent)=\"setEvidence(true)\"\n              >Yes\n            </app-cs-radio>\n            <app-cs-radio\n              [name]=\"'file-evidence'\"\n              [value]=\"0\"\n              [checked]=\"!addToCasePayload?.caseToWorkflow?.evidence_enabled\"\n              (checkedEvent)=\"setEvidence(false)\"\n              >No\n            </app-cs-radio>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- Recommended Actions -->\n  <div\n    class=\"form-group-row\"\n    *ngIf=\"additionalOptionStatus.RECOMMENDED_ACTIONS\"\n    [class.disabled]=\"fieldSelector?.includes(fieldClicked)\"\n  >\n    <div\n      class=\"left\"\n      [class.checked]=\"addToCasePayload?.caseToWorkflow?.recommendations?.text\"\n    >\n      <img\n        [src]=\"ASSETS.recommended_action\"\n        alt=\"im\"\n        *ngIf=\"\n          !(\n            addToCasePayload?.caseToWorkflow?.recommendations?.text\n            | spaceBreaker\n          )?.length\n        \"\n      />\n      <svg\n        class=\"checkIcon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 52 52\"\n        *ngIf=\"\n          (\n            addToCasePayload?.caseToWorkflow?.recommendations?.text\n            | spaceBreaker\n          )?.length > 0\n        \"\n      >\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path\n          class=\"checkIcon__check\"\n          fill=\"none\"\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n        />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <span class=\"vx-control-panel\">Recommended Actions</span>\n        <ng-container\n          *ngIf=\"\n            addToCasePayload?.caseToWorkflow?.recommendations?.attachments\n              ?.length > 0\n          \"\n        >\n          <div\n            class=\"file-list\"\n            *ngFor=\"\n              let uploadingFile of addToCasePayload?.caseToWorkflow\n                ?.recommendations?.attachments\n            \"\n          >\n            <div class=\"file-container\">\n              <span class=\"file-name\">{{ uploadingFile }}</span>\n            </div>\n            <app-line-loader [loaderHeight]=\"2\"></app-line-loader>\n          </div>\n        </ng-container>\n        <ng-container\n          *ngIf=\"\n            addToCasePayload?.caseToWorkflow?.recommendations?.attachments\n              ?.length > 0\n          \"\n        >\n          <div\n            class=\"file-list\"\n            *ngFor=\"\n              let file of addToCasePayload?.caseToWorkflow?.recommendations\n                ?.attachments\n            \"\n          >\n            <div class=\"file-container\">\n              <span class=\"file-name\">{{ file?.name }}</span>\n              <button>\n                <i\n                  class=\"icons\"\n                  (click)=\"deleteFile(file, 'RECOMMENDED_ACTIONS')\"\n                  >&#xe90d;</i\n                >\n              </button>\n            </div>\n          </div>\n        </ng-container>\n        <vcomply-editor\n          [(ngModel)]=\"addToCasePayload.caseToWorkflow.recommendations.text\"\n          [editorConfig]=\"{\n            mode: 'prime',\n            colorPalette: true,\n            link: true,\n            file: true,\n            placeholder: 'Recommended actions'\n          }\"\n          (ngModelChange)=\"\n            addToCasePayload?.caseToWorkflow?.recommendations?.text?.trim()\n              ?.length > 0\n              ? removeError('issueRecommendation')\n              : null\n          \"\n          (clickOutside)=\"checkDescription()\"\n          (sendSavedFiles)=\"selectFile('RECOMMENDED_ACTIONS', $event)\"\n        ></vcomply-editor>\n      </div>\n    </div>\n  </div>\n  <!-- Risk Classification -->\n  <div\n    *ngIf=\"additionalOptionStatus.RISK_CLASSIFICATION\"\n    class=\"form-group-row\"\n    id=\"risk_classification\"\n    [class.disabled]=\"fieldSelector?.includes(fieldClicked)\"\n  >\n    <div class=\"left\" [class.checked]=\"addToCasePayload.risk_class\">\n      <img [src]=\"ASSETS.risks\" alt=\"im\" *ngIf=\"!addToCasePayload.risk_class\" />\n\n      <svg\n        class=\"checkIcon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 52 52\"\n        *ngIf=\"addToCasePayload.risk_class\"\n      >\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path\n          class=\"checkIcon__check\"\n          fill=\"none\"\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n        />\n      </svg>\n    </div>\n\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <span class=\"vx-control-panel\">Risk Classification</span>\n        <div class=\"classification\">\n          <label\n            class=\"low\"\n            *ngFor=\"let class of riskClassification; let rcIdx = index\"\n            [ngClass]=\"[class.class]\"\n            [attr.for]=\"'workflow-case-risk-class-' + rcIdx\"\n          >\n            <input\n              [id]=\"'workflow-case-risk-class-' + rcIdx\"\n              type=\"radio\"\n              name=\"classification\"\n              [value]=\"class.value\"\n              [checked]=\"addToCasePayload.risk_class === class.value\"\n              [(ngModel)]=\"addToCasePayload.risk_class\"\n            />\n            <span>{{ class.name }}</span>\n          </label>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<app-loader-inline *ngIf=\"checkloader\"></app-loader-inline>\n<app-checkbox-list\n  [config]=\"oversight_config\"\n  [twoColumn]=\"true\"\n  [itemsList]=\"userList\"\n  [selectedItems]=\"selectedOversights?.cc_list\"\n  [identifierKey]=\"'employee_email'\"\n  [displayKey]=\"'employee_name'\"\n  [tooltipKey]=\"'employee_email'\"\n  *ngIf=\"activeSelector === 'CASE_CC'\"\n  (saveList)=\"selectorAction($event, 'CASE_CC')\"\n  (closeList)=\"fieldDeselector('CASE_CC')\"\n  [loaded]=\"loader.userListLoader\"\n></app-checkbox-list>\n\n<app-checkbox-list\n  [config]=\"oversight_config\"\n  [twoColumn]=\"true\"\n  [itemsList]=\"userList\"\n  [selectedItems]=\"selectedOversights?.cc_failures_list\"\n  [identifierKey]=\"'employee_email'\"\n  [displayKey]=\"'employee_name'\"\n  [tooltipKey]=\"'employee_email'\"\n  *ngIf=\"activeSelector === 'CASE_FCC'\"\n  (saveList)=\"selectorAction($event, 'CASE_FCC')\"\n  (closeList)=\"fieldDeselector('CASE_FCC')\"\n  [loaded]=\"loader.userListLoader\"\n></app-checkbox-list>\n\n<app-smiley-dialog-inline\n  *ngIf=\"showSmiley\"\n  [message]=\"smileyMessage\"\n  [actionButtons]=\"actionButtons\"\n  (action)=\"smileyActions($event)\"\n  (closeSmiley)=\"closeSmiley($event)\"\n></app-smiley-dialog-inline>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.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/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/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\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::ng-deep .workflow-case{display:block;position:relative}::ng-deep .workflow-case app-case-type{cursor:pointer}::ng-deep .workflow-case app-case-details app-field-holder app-vc-input input{cursor:text;z-index:1000}::ng-deep .workflow-case app-report-date .date-time-picker{pointer-events:auto!important;z-index:1}::ng-deep .workflow-case app-rc-details app-cs-switch .cs-switch .switch{pointer-events:none!important;opacity:.5!important}::ng-deep .workflow-case .head-label{background:#565a6f;border-radius:.125rem;height:1rem;position:relative}::ng-deep .workflow-case .head-label:before{background:#e3e3e9;content:\"\";position:absolute;top:7px;left:-40px;width:500px;height:1px;z-index:-1}\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\";@import\"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700&display=swap\";::-webkit-scrollbar-track{background-color:#f1f1f1;position:absolute}::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}button{font-family:Poppins,sans-serif}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;font-size:13px;color:#747576;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField::placeholder{font-size:13px;color:#747576}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxEnable.withBtn:after{display:none}::ng-deep .selectBoxEnable.withBtn button.setBtn{background:transparent;border-radius:0;border:none;min-width:98px}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer .chipName.no-width{max-width:unset}::ng-deep .chipContainer .chipName.full-width{max-width:25rem}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}::ng-deep .workflowLavel{background:#f1f1f1;border-radius:.125rem;color:#042e7d;min-width:1rem;height:1rem}::ng-deep .reviewSelection{border-radius:.25rem;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep .reviewSelection:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectButton{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectButton:hover,::ng-deep .selectButton:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep button.createNewBtn{background:transparent;border-radius:0;border:none}::ng-deep .vx-form-group{display:block;position:relative;margin-bottom:20px}::ng-deep .vx-form-group:after{content:\"\";display:block;clear:both}::ng-deep .vx-form-group .select{position:relative}::ng-deep .vx-form-group .select:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#707070;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .vx-form-group .select input{cursor:pointer;padding-right:30px!important}::ng-deep .vx-form-group .select .custom-input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;outline:none;padding:3px 12px;line-height:16px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .vx-form-group .select .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:13px;width:94%;display:block;pointer-events:none;opacity:.8}::ng-deep .vx-form-group .select .custom-input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .vx-form-group .select .custom-input.frequency-custom-input{padding-right:108px;display:flex;align-items:center}::ng-deep .vx-form-group .select+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .select+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .select+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .select~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .select.button-sec:after{display:none}::ng-deep .vx-form-group .select.button-sec button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;position:absolute;top:12px;right:8px;padding:0;margin:0}::ng-deep .vx-form-group .select+.vx-control-panel{margin-top:8px}::ng-deep .vx-form-group .select+.selected{margin-top:8px}::ng-deep .vx-form-group .select.select{margin-top:8px}::ng-deep .vx-form-group .upload-format{border:1px solid #dbdbdb;border-radius:4px;padding:8px 12px;display:block}::ng-deep .vx-form-group .upload-format span.text{line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:block;margin-bottom:6px}::ng-deep .vx-form-group .upload-format .radio-group{display:flex}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio{display:inline-block}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;margin-left:8px}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio+app-cs-radio{margin-left:12px}::ng-deep .vx-form-group .upload-format~.upload-format{margin-top:4px}::ng-deep .vx-form-group .form-tab{display:flex;justify-content:flex-start}::ng-deep .vx-form-group .form-tab button{background:transparent;color:#161b2f;font-size:11px;line-height:16px;text-transform:uppercase;cursor:pointer;padding:8px 8px 8px 0;border:none;outline:none;font-weight:500}::ng-deep .vx-form-group .form-tab button:disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .form-tab button+button{padding:8px}::ng-deep .vx-form-group .form-tab button.active{color:#1e5dd3}::ng-deep .vx-form-group .tab-group{border:1px solid #dbdbdb;border-radius:4px;padding:0;display:block;position:relative;transition:all .2s ease-in-out}::ng-deep .vx-form-group .tab-group:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group .tab-group .upload-file{padding:16px 62px 16px 24px;display:flex;align-items:center;justify-content:space-between}::ng-deep .vx-form-group .tab-group .upload-file .image{width:80px}::ng-deep .vx-form-group .tab-group .upload-file .browse span{display:inline-block;font-size:12px;color:#747576;line-height:16px;padding:0 4px}::ng-deep .vx-form-group .tab-group .upload-file .browse .label{font-size:11px;color:#1e5dd3;line-height:16px;font-weight:600;text-transform:uppercase;margin:0;padding:0}::ng-deep .vx-form-group .tab-group .upload-file .browse .label input{opacity:0;position:absolute;margin:0;padding:0;inset:0;cursor:pointer;width:100%}::ng-deep .vx-form-group .tab-group.active{border-color:#1e5dd3}::ng-deep .vx-form-group .tab-group.uploaded{margin-top:4px}::ng-deep .vx-form-group .tab-group.uploaded .upload-file{padding:8px 0!important;text-align:center}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .image{display:none}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .browse{width:100%;text-align:center}::ng-deep .vx-form-group .tab-group+label.vx-form-group{margin-top:8px;margin-bottom:4px}::ng-deep .vx-form-group .file-list{background:#fbfbfb;border:1px solid #f1f1f1;border-radius:4px;padding:12px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;position:relative}::ng-deep .vx-form-group .file-list span.file-name{color:#747576;line-height:16px;font-size:11px;font-weight:400;cursor:pointer;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .vx-form-group .file-list .button-group{display:flex}::ng-deep .vx-form-group .file-list button{font-size:12px;color:#eb2424;cursor:pointer;display:flex;padding:0;border:none;outline:none;background:transparent}::ng-deep .vx-form-group .file-list button.edit{color:#1e5dd3}::ng-deep .vx-form-group .file-list button+button{margin-left:16px}::ng-deep .vx-form-group .file-list+.file-list{margin-top:4px}::ng-deep .vx-form-group .file-list .file-container{display:flex;justify-content:space-between;width:100%}::ng-deep .vx-form-group .file-list.policy{background:#fff}::ng-deep .vx-form-group .file-list cs-select{position:relative;margin-top:8px;width:100%}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group input.value{height:32px!important;font-size:13px!important}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group i{right:12px!important;top:12px!important}::ng-deep .vx-form-group .file-list app-line-loader{display:block;position:absolute;left:10px;right:10px;bottom:0}::ng-deep .vx-form-group span.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 span.vx-control-panel.custom-tag{font-size:10px}::ng-deep .vx-form-group span.vx-control-panel.vx-mt-8{margin-top:8px}::ng-deep .vx-form-group span.vx-control-panel span.required{color:#eb2424;font-size:14px;font-weight:500;position:relative;top:-2px}::ng-deep .vx-form-group span.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 span.vx-control-panel app-cs-switch{float:right;display:block}::ng-deep .vx-form-group span.vx-control-panel i{margin-left:8px;font-size:12px;color:#1e5dd3;cursor:pointer;position:relative;top:1px}::ng-deep .vx-form-group span.vx-control-panel i.depreciation-icon{color:#e4b700;font-size:16px;position:relative;top:3px}::ng-deep .vx-form-group span.vx-control-panel .checkpoint-version{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:10px;font-weight:600;line-height:14px;margin-left:4px;padding:0 2px}::ng-deep .vx-form-group input[type=text],::ng-deep .vx-form-group .input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;outline:none;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::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;-moz-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:#fff;padding:8px 12px;display:flex;justify-content:space-between}::ng-deep .vx-form-group .classification label{margin:0 4px 0 0;width:100%;position:relative;z-index:1}::ng-deep .vx-form-group .classification label span{display:block;width:100%;height:24px;border:1px solid #f1f1f1;border-radius:2px;line-height:24px;font-size:10px;text-align:center;color:#747576;font-weight:500;position:relative;text-transform:uppercase}::ng-deep .vx-form-group .classification label span:before{height:2px;content:\"\";top:0;right:0;left:0;border-radius:2px;position:absolute;transition:all .2s ease-in-out}::ng-deep .vx-form-group .classification label input{opacity:0;position:absolute;inset:0;margin:0;padding:0;width:100%;height:100%;cursor:pointer;z-index:1}::ng-deep .vx-form-group .classification label input:checked+span{color:#fff}::ng-deep .vx-form-group .classification label input:checked+span:before{bottom:0;height:100%;z-index:-1}::ng-deep .vx-form-group .classification label.low span:before{background:#34aa44}::ng-deep .vx-form-group .classification label.low-med span:before{background:#f2bf19}::ng-deep .vx-form-group .classification label.med-high span:before{background:#f29619}::ng-deep .vx-form-group .classification label.high span:before{background:#eb2424}::ng-deep .vx-form-group .classification label:last-of-type{margin-right:0}::ng-deep .vx-form-group .input{display:flex;align-items:center}::ng-deep .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;padding:8px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:flex;align-items:center;position:relative;justify-content:space-between}::ng-deep .vx-form-group .selected.first-field{z-index:2}::ng-deep .vx-form-group .selected .chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .vx-form-group .selected .chip-container.checkpoints{width:calc(100% - 120px)}::ng-deep .vx-form-group .selected .chip-container span.chip{background:#fff;border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;padding:0 8px;color:#1e5dd3;font-size:12px;display:block;width:auto;max-width:100%;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .vx-form-group .selected .chip-container span.chip.disabled{background:#f1f1f1;box-shadow:none;color:#747576;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .selected .chip-container span.chip i{font-weight:400;margin-right:8px;cursor:pointer;font-size:10px;position:relative;top:1px}::ng-deep .vx-form-group .selected .chip-container span.chip span.step{background:#1e5dd3;border-radius:2px;color:#fff;font-size:9px;line-height:14px;padding:0 4px;font-weight:400;text-align:center;min-width:auto;margin-right:4px}::ng-deep .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question{display:flex;align-items:center;justify-content:space-between;width:100%}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.value{color:#1e5dd3;font-size:12px;font-weight:400;line-height:24px;padding:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 80px)}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.label{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding-left:4px;padding-right:4px;line-height:12px;margin-left:8px}::ng-deep .vx-form-group .selected .chip-container span.value{color:#747576;font-size:13px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 52px);padding:0 4px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text{color:#747576;font-size:10px;font-weight:500;padding:0 8px;width:122px;line-height:14px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first{position:relative;min-width:162px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first:before{background:#f1f1f1;content:\"\";position:absolute;top:0;right:0;height:calc(100% + 12px);width:1px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text .no{color:#1e5dd3}::ng-deep .vx-form-group .selected .chip-container.plus span.chip{max-width:calc(50% - 35px)}::ng-deep .vx-form-group .selected .chip-container.more-one span.chip{max-width:50%}::ng-deep .vx-form-group .selected .chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .vx-form-group .selected .chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:100px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count{border-radius:20px;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .vx-form-group .selected .chip-container .chip-inner i.cross{cursor:pointer;position:relative;top:1px;font-size:8px}::ng-deep .vx-form-group .selected button.count{background:#1e5dd3;border-radius:2px;height:24px;padding:0 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none;color:#fff;font:13px;font-weight:500;line-height:20px;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit{border:none;border-radius:0;background:transparent;outline:none;cursor:pointer;display:block;font-size:11px;font-weight:600;color:#1e5dd3;text-transform:uppercase;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit i{font-weight:400;font-size:8px;margin-right:4px}::ng-deep .vx-form-group .selected button.close-btn{background:transparent;border:none;padding:0;margin-left:8px;font-size:10px;color:#c7381b;display:flex;align-items:center}::ng-deep .vx-form-group .selected .workflow-label{min-width:92px;padding:4px;text-align:center;margin-left:-8px;margin-right:8px;border-right:1px solid #f1f1f1}::ng-deep .vx-form-group .selected .workflow-label p{margin:0;display:block;text-transform:uppercase}::ng-deep .vx-form-group .selected .workflow-label p.title{font-size:9px;line-height:12px;color:#161b2f;font-weight:500}::ng-deep .vx-form-group .selected .workflow-label p.description{font-size:11px;line-height:16px;color:#161b2f;font-weight:600}::ng-deep .vx-form-group .selected .workflow-label+.chip-container{width:calc(100% - 148px)}::ng-deep .vx-form-group .selected+.selected{margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .selected+app-cs-switch.who-toggle label.cs-switch span.value{color:#747576}::ng-deep .vx-form-group .selected+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .selected~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .selected.readOnly{pointer-events:none}::ng-deep .vx-form-group .selected span.chip{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .vx-form-group .select-list{position:absolute;background:#fff;box-shadow:0 0 5px #1e5dd345;top:100%;right:0;left:0;z-index:2}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item{width:100%;padding:12px 16px}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item:hover{background:#f8f8f8}::ng-deep .vx-form-group ::ng-deep vcomply-editor{margin-top:8px;display:block;pointer-events:auto!important;z-index:1}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb}::ng-deep .vx-form-group ::ng-deep 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 ::ng-deep vcomply-editor .editor-container .editable-block ul{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editable-block ul li{list-style:disc}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editable-block ol{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editable-block ol li{list-style:decimal}::ng-deep .vx-form-group ::ng-deep 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 ::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 .vx-form-group ::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .vx-form-group ::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 .vx-form-group ::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 .vx-form-group ::ng-deep vcomply-editor .editor-container:focus-within{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container:focus-within .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container:hover{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container:hover .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group ::ng-deep vcomply-editor+app-cs-switch{margin-top:8px}::ng-deep .vx-form-group app-cs-switch label.cs-switch span.value{font-size:11px;color:#747576;text-transform:uppercase}::ng-deep .vx-form-group app-cs-switch+app-cs-switch{margin-top:8px}::ng-deep .vx-form-group .date-time-picker{display:flex;justify-content:space-between;height:40px;border-radius:4px;border:1px solid #dbdbdb;padding:11px 0;background:#fff}::ng-deep .vx-form-group .date-time-picker:focus-within{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .vx-form-group .date-time-picker .picker-group{width:50%;position:relative;display:flex;align-items:center}::ng-deep .vx-form-group .date-time-picker .picker-group:first-of-type{border-right:1px solid #dbdbdb}::ng-deep .vx-form-group .date-time-picker .picker-group:only-of-type{border:none;width:100%}::ng-deep .vx-form-group .date-time-picker .picker-group input{height:38px;background:transparent;outline:none;line-height:38px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;border:none;padding:0 12px 0 34px}::ng-deep .vx-form-group .date-time-picker .picker-group input:focus,::ng-deep .vx-form-group .date-time-picker .picker-group input:hover{box-shadow:none;border:none}::ng-deep .vx-form-group .date-time-picker .picker-group input::placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input:-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input::-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group i{display:flex;justify-content:center;align-items:center;height:16px;width:12px;position:absolute;left:12px;top:0;color:#747576;font-size:12px;pointer-events:none}::ng-deep .vx-form-group app-cs-radio.main-filed{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;color:#707070}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group app-cs-radio.disabled{pointer-events:none;opacity:.5;filter:grayscale(1);background:#f1f1f1}::ng-deep .vx-form-group .switch-row{display:flex}::ng-deep .vx-form-group .switch-row app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:0;text-transform:uppercase;color:#747576!important}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value i{display:inline-flex;font-size:11px;cursor:pointer;color:#1e5dd3;align-items:center;line-height:16px;margin:0 4px}::ng-deep .vx-form-group .switch-row app-cs-switch+app-cs-switch{margin-left:8px}::ng-deep .vx-form-group .switch-row.align-right{justify-content:flex-end}::ng-deep .vx-form-group .switch-row.align-right label.cs-switch span.value{margin-right:8px}::ng-deep .vx-form-group .risk-type-field{background:#f8f8f8;border:1px solid #dbdbdb;border-radius:4px;height:40px;display:flex;align-items:center;padding:4px;position:relative;z-index:1}::ng-deep .vx-form-group .risk-type-field .type-item{width:50%;position:relative}::ng-deep .vx-form-group .risk-type-field .type-item button{background:transparent;border:none;border-radius:0;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase;width:100%;height:32px;padding:0 12px;text-align:left}::ng-deep .vx-form-group .risk-type-field .type-item button.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item .info{color:#1e5dd3;font-size:12px;position:absolute;top:10px;right:12px;cursor:pointer}::ng-deep .vx-form-group .risk-type-field .type-item .info.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item.active button{color:#1e5dd3!important}::ng-deep .vx-form-group .risk-type-field .type-item:nth-child(2).active~.background-glider{transform:translate(100%)}::ng-deep .vx-form-group .risk-type-field .background-glider{background:#fff;border-radius:4px;box-shadow:0 1px 3px #161b2f26;position:absolute;display:flex;width:212px;height:32px;z-index:-1;transition:.25s ease-out}.left{width:36px;height:36px;margin-top:26px;margin-left:-58px;margin-right:20px;display:flex;justify-content:center;align-items:center;position:relative;z-index:10;border-radius:50%}.left.deadline-completed{margin-top:18px}.left.checked{background:transparent}.left img{width:36px}.left .checkIcon{width:32px;height:32px;background:#fff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}.left .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}.left .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}.right{width:100%}.right span.indicator{position:absolute;top:36px;left:-16px;font-size:12px;color:#f0b819;cursor:pointer}.right app-format-and-evidence~.error-message{position:relative;top:-12px}.form-group-row{display:flex;position:relative;transition:all .2s ease-in-out}.form-group-row.disabled{-webkit-user-select:none;user-select:none;pointer-events:none;filter:grayscale(1);z-index:2}.form-group-row.disabled .left{position:relative}.form-group-row.disabled .left:before{content:\"\";position:absolute;inset:2px 0 0 2px;background:#fff;opacity:.7;border-radius:50%;width:32px;height:32px}.form-group-row.disabled .right{opacity:.3}.form-group-row.active{pointer-events:none;filter:grayscale(0);z-index:2;opacity:1}.form-group-row.active .right .vx-form-group input,.form-group-row.active .right .vx-form-group .custom-input,.form-group-row.active .right .vx-form-group .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}.form-group-row.active .right .vx-form-group .selectBoxEnable.disabled{border-color:#dbdbdb;box-shadow:none}::ng-deep .radio-group-selector app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .radio-group-selector app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .radio-group-selector app-cs-radio label.radio-item .radio,::ng-deep .radio-group-selector app-cs-radio label.radio-item .radiomark{position:absolute!important;top:9px;left:12px}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value{font-size:11px!important;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0!important;max-width:100%!important;font-weight:500!important;color:#707070!important}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value i{font-size:12px;color:#1e5dd3}::ng-deep .radio-group-selector app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}::ng-deep .wf-action-list{width:220px}::ng-deep .wf-action-list ul{padding:0;margin:0;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}::ng-deep .wf-action-list ul.action-item{display:block}::ng-deep .wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}::ng-deep .wf-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}::ng-deep .wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .wf-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .wf-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .wf-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .wf-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .wf-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}::ng-deep .wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{-webkit-transform:translateY(50px);transform:translateY(50px)}to{-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes scale-up-center{0%{-webkit-transform:scale(.5);transform:scale(.5);opacity:0}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes scale-up-center{0%{-webkit-transform:scale(.5);transform:scale(.5);opacity:0}to{-webkit-transform:scale(1);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{-webkit-animation:rotate 2s linear infinite;animation:rotate 2s linear infinite;height:100%;-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center;width:100%;position:absolute;top:0;left:0;margin:auto}.loader-path{stroke-dasharray:150,200;stroke-dashoffset:-10;-webkit-animation:dash 1.5s ease-in-out infinite;animation:dash 1.5s ease-in-out infinite;stroke-linecap:round}@-webkit-keyframes rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-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}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35}to{stroke-dasharray:89,200;stroke-dashoffset:-124}}::ng-deep .dropdown{position:fixed;background:#fff;box-shadow:0 3px 6px #00000029;padding:24px 0;z-index:9;max-height:calc(100vh - 200px);overflow:auto}::ng-deep .dropdown ul.dropdown-list{padding:0 20px;margin:0;display:block}::ng-deep .dropdown ul.dropdown-list li{list-style:none}::ng-deep .dropdown ul.dropdown-list li app-cs-radio{display:flex}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.radio{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.value{padding:11px 12px 11px 32px;width:100%;border:1px solid #bcbcbc;border-radius:4px;margin-left:0;max-width:100%}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item svg{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item input[type=radio]:checked~span.value{background:#e8feeb;border-color:#34aa44}::ng-deep .dropdown ul.dropdown-list li+li{margin-top:8px}app-smiley-dialog{position:relative;z-index:10}app-smiley-dialog-inline{position:absolute;top:-3px;right:0;bottom:0;z-index:999;width:520px;height:calc(100vh + 3px)}::ng-deep .vx-overlay{position:fixed;z-index:3;inset:0}::ng-deep dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}::ng-deep dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}::ng-deep dp-date-picker input:focus{outline:none}::ng-deep dp-date-picker .dp-popup{width:412px;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep dp-date-picker .dp-popup dp-day-calendar,::ng-deep dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep dp-date-picker .dp-popup dp-day-calendar button,::ng-deep dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}::ng-deep dp-date-picker .dp-open+div{position:fixed!important;inset:0!important;display:flex;justify-content:center;align-items:center;z-index:99;pointer-events:none;background:#0000004d}::ng-deep .cdk-overlay-container{z-index:2147483002!important}::ng-deep .dp-popup{z-index:999;display:flex!important;align-items:center;justify-content:center;width:100vw;height:100vh;background:#0000004d!important;box-shadow:unset!important}::ng-deep .dp-popup dp-day-calendar{width:412px!important;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep .dp-popup dp-day-calendar,::ng-deep .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep .dp-popup dp-day-calendar button,::ng-deep .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep .dp-popup dp-day-calendar .dp-weekdays,::ng-deep .dp-popup dp-month-calendar .dp-weekdays,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}@-webkit-keyframes slide-bottom{0%{-webkit-transform:translateY(-100px);transform:translateY(-100px)}to{-webkit-transform:translateY(0px);transform:translateY(0)}}@keyframes slide-bottom{0%{-webkit-transform:translateY(-100px);transform:translateY(-100px)}to{-webkit-transform:translateY(0px);transform:translateY(0)}}::ng-deep span.file{display:block;width:20px;min-width:20px;border-radius:0 0 2px 2px;border:1px solid transparent;border-color:#747576;position:relative;margin-right:5px;border-top:none;margin-top:5px;background:#fff}::ng-deep span.file.table{margin-right:8px;width:18px;min-width:18px}::ng-deep span.file.table i{font-size:8px}::ng-deep span.file.table .format{height:8px;font-size:7px;line-height:8px;font-weight:400}::ng-deep span.file:before{position:absolute;border-radius:0;top:-4px;right:-1px;content:\"\";height:4px;width:4px;display:block;background:-moz-linear-gradient(45deg,#747576 0%,#747576 1%,#747576 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);background:-webkit-linear-gradient(45deg,#747576 0%,#747576 1%,#747576 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);background:linear-gradient(45deg,#747576 0% 1%,#747576 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file:after{height:4px;left:-1px;right:3px;border-top:1px solid;border-right:none;border-left:1px solid;content:\"\";top:-4px;position:absolute;border-radius:2px 0 0;background:#fff}::ng-deep span.file .format{height:10px;font-size:6px;text-transform:uppercase;background:transparent;font-weight:600;text-align:center;display:block;line-height:10px}::ng-deep span.file i{font-size:10px;height:10px;display:flex;align-items:center;justify-content:center;color:#dbdbdb}::ng-deep span.file.docx{width:22px!important}::ng-deep span.file.pdf,::ng-deep span.file.template{border-color:#f31c39}::ng-deep span.file.pdf:before,::ng-deep span.file.template:before{background:-moz-linear-gradient(45deg,#f31c39 0%,#f31c39 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);background:-webkit-linear-gradient(45deg,#f31c39 0%,#f31c39 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);background:linear-gradient(45deg,#f31c39 0% 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#f31c39\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.pdf:after,::ng-deep span.file.template:after{border-color:#f31c39}::ng-deep span.file.pdf .format,::ng-deep span.file.template .format{color:#f31c39}::ng-deep span.file.xlsx,::ng-deep span.file.xls,::ng-deep span.file.css,::ng-deep span.file.scss,::ng-deep span.file.less{border-color:#34aa44}::ng-deep span.file.xlsx:before,::ng-deep span.file.xls:before,::ng-deep span.file.css:before,::ng-deep span.file.scss:before,::ng-deep span.file.less:before{background:-moz-linear-gradient(45deg,#34aa44 0%,#34aa44 1%,#34aa44 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);background:-webkit-linear-gradient(45deg,#34aa44 0%,#34aa44 1%,#34aa44 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);background:linear-gradient(45deg,#34aa44 0% 1%,#34aa44 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.xlsx:after,::ng-deep span.file.xls:after,::ng-deep span.file.css:after,::ng-deep span.file.scss:after,::ng-deep span.file.less:after{border-color:#34aa44;color:#34aa44}::ng-deep span.file.xlsx .format,::ng-deep span.file.xls .format,::ng-deep span.file.css .format,::ng-deep span.file.scss .format,::ng-deep span.file.less .format{color:#34aa44}::ng-deep span.file.doc,::ng-deep span.file.docx,::ng-deep span.file.psd{border-color:#1e5dd3}::ng-deep span.file.doc:before,::ng-deep span.file.docx:before,::ng-deep span.file.psd:before{background:-moz-linear-gradient(45deg,#1e5dd3 0%,#1e5dd3 1%,#1e5dd3 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);background:-webkit-linear-gradient(45deg,#1e5dd3 0%,#1e5dd3 1%,#1e5dd3 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);background:linear-gradient(45deg,#1e5dd3 0% 1%,#1e5dd3 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.doc:after,::ng-deep span.file.docx:after,::ng-deep span.file.psd:after{border-color:#1e5dd3}::ng-deep span.file.doc .format,::ng-deep span.file.docx .format,::ng-deep span.file.psd .format{color:#1e5dd3}::ng-deep span.file.ppt,::ng-deep span.file.ai,::ng-deep span.file.html,::ng-deep span.file.jpg,::ng-deep span.file.jpeg,::ng-deep span.file.png{border-color:#f6882f}::ng-deep span.file.ppt:before,::ng-deep span.file.ai:before,::ng-deep span.file.html:before,::ng-deep span.file.jpg:before,::ng-deep span.file.jpeg:before,::ng-deep span.file.png:before{background:-moz-linear-gradient(45deg,#f6882f 0%,#f6882f 1%,#f6882f 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);background:-webkit-linear-gradient(45deg,#f6882f 0%,#f6882f 1%,#f6882f 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);background:linear-gradient(45deg,#f6882f 0% 1%,#f6882f 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.ppt:after,::ng-deep span.file.ai:after,::ng-deep span.file.html:after,::ng-deep span.file.jpg:after,::ng-deep span.file.jpeg:after,::ng-deep span.file.png:after{border-color:#f6882f}::ng-deep span.file.ppt .format,::ng-deep span.file.ai .format,::ng-deep span.file.html .format,::ng-deep span.file.jpg .format,::ng-deep span.file.jpeg .format,::ng-deep span.file.png .format{color:#f6882f}::ng-deep span.file.php{border-color:#7aa6f7}::ng-deep span.file.php:before{background:-moz-linear-gradient(45deg,#7aa6f7 0%,#7aa6f7 1%,#7aa6f7 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);background:-webkit-linear-gradient(45deg,#7aa6f7 0%,#7aa6f7 1%,#7aa6f7 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);background:linear-gradient(45deg,#7aa6f7 0% 1%,#7aa6f7 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.php:after{border-color:#7aa6f7}::ng-deep span.file.php .format{color:#7aa6f7}::ng-deep ngx-material-timepicker-container .timepicker-backdrop-overlay{background-color:#0000000d!important;z-index:9999999999!important}::ng-deep ngx-material-timepicker-container .timepicker-overlay{z-index:9999999999!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker{width:232px!important;border-radius:2px!important;box-shadow:0 4px 30px #161b2f26!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header{background-color:#fff!important;padding:0!important;border-radius:2px 2px 0 0}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container{display:block!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time{color:#000!important;width:150px!important;margin:0 auto;line-height:60px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control{font-size:40px;background-color:transparent!important;color:#000!important;font-weight:600;text-align:right;caret-color:transparent;outline:none;font-family:Poppins,sans-serif;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,sans-serif;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;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,sans-serif}::ng-deep vcomply-editor{display:block}::ng-deep vcomply-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep vcomply-editor .editor-container:hover,::ng-deep vcomply-editor .editor-container:focus-within{border:1px solid #1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep vcomply-editor .editor-container mention-list ul li a{font-size:16px!important}::ng-deep vcomply-editor .editor-container .editable-block{background:#fff;min-height:60px;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep vcomply-editor .editor-container .editable-block:before{color:#747576!important}::ng-deep vcomply-editor .editor-container .editor-tools{border-top:1px solid #dbdbdb;border-radius:0 0 3px 3px}::ng-deep vcomply-editor .editor-container .editor-tools:hover{border-color:#1e5dd3}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep marx-modal .popup-modal-background{background-color:#161b2fcc!important}::ng-deep .within-box{background:#f1f1f1;border-radius:.125rem;color:#042e7d}::ng-deep .within-value{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-word}.wf-tooltip{pointer-events:none;position:absolute;max-width:300px;font-size:12px;text-align:left;color:#fff;padding:8px 12px;background:#000;border-radius:2px;z-index:-222;top:0;opacity:0;white-space:break-spaces;word-break:break-word}.wf-tooltip *{color:#fff!important}.wf-tooltip:empty{display:none!important}.wf-tooltip.white{box-shadow:0 2px 8px #1c5bd159;color:#747576;background:#fff;text-align:left}.wf-tooltip.white b{color:#747576!important}.wf-tooltip.animate-top{-webkit-animation:animate-top .5s cubic-bezier(.25,.46,.45,.94) both;animation:animate-top .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-right{-webkit-animation:animate-right .3s cubic-bezier(.25,.46,.45,.94) both;animation:animate-right .3s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-bottom{-webkit-animation:animate-bottom .5s cubic-bezier(.25,.46,.45,.94) both;animation:animate-bottom .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-left{-webkit-animation:animate-left .5s cubic-bezier(.25,.46,.45,.94) both;animation:animate-left .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip-top:after{top:100%;left:50%;margin-left:-5px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip-bottom:after{bottom:100%;left:50%;margin-left:-5px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-left.white:after{border-color:transparent transparent transparent #f1f1f1}.wf-tooltip-left:after{top:50%;left:100%;margin-top:-5px;border-width:5px;border-color:transparent transparent transparent #000000}.wf-tooltip-right.white:after{border-color:transparent #f1f1f1 transparent transparent}.wf-tooltip-right:after{top:50%;right:100%;margin-top:-5px;border-width:5px;border-color:transparent #000000 transparent transparent}.wf-tooltip-bottom-right:after{bottom:100%;left:100%;margin-left:-20px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom-right.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-bottom-left:after{bottom:100%;left:0;margin-left:10px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom-left.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-top-left:after{top:100%;left:0;margin-left:10px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top-left.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip-top-right:after{top:100%;left:100%;margin-left:-5px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top-right.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip:after{content:\"\";position:absolute;border-style:solid}.wf-tooltip span.within{font-size:80%;display:block;width:100%}.wf-tooltip .small{display:block;font-size:10px}.wf-tooltip .within-box{background:#f1f1f1;border-radius:2px;color:#042e7d!important;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 2px;margin-right:2px}.wf-tooltip-show{pointer-events:none;opacity:1;z-index:2147483001}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value", "oneLine"], outputs: ["checkedEvent"] }, { kind: "component", type: i4.VcomplyEditorComponent, selector: "vcomply-editor", inputs: ["editorConfig"], outputs: ["comment", "sendSavedFiles", "popup"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "directive", type: i1$2.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$2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormatAndEvidenceComponent, selector: "app-format-and-evidence", inputs: ["mode", "categories", "organization_id", "formatEvidanceData", "isMandatory"], outputs: ["updateFiles"] }, { 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: ScrollInViewDirective, selector: "[appScrollInView]", inputs: ["appScrollInView"] }, { kind: "component", type: CheckboxListComponent, selector: "app-checkbox-list", inputs: ["itemsList", "selectedItems", "identifierKey", "displayKey", "tooltipKey", "config", "twoColumn", "loaded"], outputs: ["closeList", "saveList"] }, { kind: "component", type: CaseTypeComponent, selector: "app-case-type", inputs: ["fieldSelected"], outputs: ["caseTypeChange"] }, { kind: "component", type: InformationBlockComponent, selector: "app-information-block" }, { kind: "component", type: CaseDetailsComponent, selector: "app-case-details", inputs: ["payload", "fieldSelected", "validationError", "caseTypeSelected"] }, { kind: "component", type: VCFormLabelComponent, selector: "app-vc-label", inputs: ["labelText", "details", "required", "showInfo", "tooltipText"] }, { kind: "component", type: FieldHolderComponent, selector: "app-field-holder", inputs: ["image", "active", "disabled", "checked", "scrollToBottom"] }, { kind: "component", type: RcDetailsComponent, selector: "app-rc-details", inputs: ["payload", "fieldSelected", "caseTypeSelected", "validationError", "initialSelection", "mode", "workflowType"], outputs: ["fieldClicked", "onRcChange", "filterDeselector"] }, { kind: "component", type: CaseDropdownComponent, selector: "app-case-type-dropdown", inputs: ["fieldSelected", "payload", "validationError", "initialSelection", "mode", "caseTypeSelected", "workflowType"], outputs: ["onCaseTypeChange", "onCaseTypeLoading"] }, { kind: "component", type: ReportDateComponent, selector: "app-report-date", inputs: ["payload", "fieldSelected", "validationError"] }, { kind: "component", type: CasePriorityComponent, selector: "app-case-priority", inputs: ["fieldSelected", "payload", "caseTypeSelected", "validationError", "initialSelection", "mode", "workflowType"], outputs: ["onPriorityChange", "onPriorityLoader"] }, { kind: "component", type: CaseCategoryComponent, selector: "app-case-category", inputs: ["payload", "fieldSelected", "caseTypeSelected", "initialSelection", "initialAdditionalSelection", "mode", "workflowType"], outputs: ["onCategoryChange", "fieldClicked", "filterDeselector"] }, { kind: "component", type: CaseResolutionDeadlineComponent, selector: "app-case-resolution-deadline", inputs: ["payload", "userList", "groupList", "mode", "caseId", "initialSelection", "fieldSelected", "validationError"], outputs: ["fieldClicked", "filterDeselector"] }, { kind: "component", type: CaseAssigneesComponent, selector: "app-case-assignees", inputs: ["payload", "fieldSelected", "userList", "groupList", "initialSelection", "validationError"], outputs: ["fieldClicked", "onRcChange", "filterDeselector"] }, { kind: "component", type: CaseOwnersComponent, selector: "app-case-owners", inputs: ["payload", "fieldSelected", "initialSelection", "workflowId", "validationError", "mode"], outputs: ["fieldClicked", "filterDeselector"] }, { kind: "component", type: LinkedAssessmentComponent, selector: "app-linked-assessment", inputs: ["openedFrom", "payload", "responsibilityData", "assessmentQuestion", "fieldSelected"] }, { kind: "component", type: LinkedResponsibilitiesComponent, selector: "app-linked-responsibilities", inputs: ["openedFrom", "isLinkQuestionVisible", "payload", "fieldSelected", "responsibilityData"], outputs: ["fieldClicked"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: SpaceBreakerPipe, name: "spaceBreaker" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: WorkflowCaseComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-workflow-case', standalone: false, template: "<div *ngIf=\"!showSmiley\" class=\"workflow-case\">\n  <app-case-type\n    *ngIf=\"mode !== 'EDIT' && caseTypePermission\"\n    [fieldSelected]=\"fieldClicked\"\n    (caseTypeChange)=\"onCaseTypeChange($event)\"\n  ></app-case-type>\n  <app-linked-responsibilities\n    *ngIf=\"['COMPLIANCE_WORKROOM', 'ASSESSMENT'].includes(openedFrom)\"\n    [payload]=\"\n      caseTypeSelected === caseType.REPORT_CASE ? payload : addToCasePayload\n    \"\n    [openedFrom]=\"openedFrom\"\n    [fieldSelected]=\"fieldClicked\"\n    [responsibilityData]=\"responsibilityData\"\n    (fieldClicked)=\"onFieldClicked($event)\"\n  ></app-linked-responsibilities>\n  <app-linked-assessment\n    *ngIf=\"openedFrom === 'ASSESSMENT'\"\n    [payload]=\"payload\"\n    [openedFrom]=\"openedFrom\"\n    [fieldSelected]=\"fieldClicked\"\n    [responsibilityData]=\"responsibilityData\"\n    [assessmentQuestion]=\"assessmentQuestion\"\n    (fieldClicked)=\"onFieldClicked($event)\"\n  ></app-linked-assessment>\n  <app-case-details\n    [payload]=\"\n      caseTypeSelected === caseType.REPORT_CASE ? payload : addToCasePayload\n    \"\n    [fieldSelected]=\"fieldClicked\"\n    [validationError]=\"validationError\"\n    [caseTypeSelected]=\"caseTypeSelected\"\n  ></app-case-details>\n  <span\n    *ngIf=\"caseTypeSelected === caseType.ADD_CASE_TO_WORKFLOW\"\n    class=\"head-label vx-fs-10 vx-fw-500 vx-txt-white vx-tt-uppercase vx-pl-1 vx-pr-1 vx-lh-4\"\n  >\n    CASE DETAILS\n  </span>\n  <app-information-block\n    *ngIf=\"caseTypeSelected === caseType.ADD_CASE_TO_WORKFLOW\"\n  ></app-information-block>\n  <app-rc-details\n    [payload]=\"\n      caseTypeSelected === caseType.REPORT_CASE ? payload : addToCasePayload\n    \"\n    [fieldSelected]=\"fieldClicked\"\n    [caseTypeSelected]=\"caseTypeSelected\"\n    [validationError]=\"validationError\"\n    [initialSelection]=\"\n      caseTypeSelected === caseType.REPORT_CASE\n        ? payload?.rc_details\n        : addToCasePayload?.rc_details\n    \"\n    [mode]=\"mode\"\n    [workflowType]=\"workflowType\"\n    (fieldClicked)=\"onFieldClicked($event)\"\n    (onRcChange)=\"onRcChange($event)\"\n    (filterDeselector)=\"pickerToggle($event)\"\n  ></app-rc-details>\n  <app-case-type-dropdown\n    [payload]=\"\n      caseTypeSelected === caseType.REPORT_CASE ? payload : addToCasePayload\n    \"\n    [fieldSelected]=\"fieldClicked\"\n    [validationError]=\"validationError\"\n    [initialSelection]=\"\n      caseTypeSelected === caseType.REPORT_CASE\n        ? payload?.case_type\n        : addToCasePayload?.case_type\n    \"\n    [mode]=\"mode\"\n    [caseTypeSelected]=\"caseTypeSelected\"\n    [workflowType]=\"workflowType\"\n    (onCaseTypeChange)=\"onCaseTypeDropdownChange($event)\"\n    (onCaseTypeLoading)=\"onCaseLoader($event, 'type')\"\n  ></app-case-type-dropdown>\n  <app-case-category\n    [payload]=\"\n      caseTypeSelected === caseType.REPORT_CASE ? payload : addToCasePayload\n    \"\n    [fieldSelected]=\"fieldClicked\"\n    [caseTypeSelected]=\"caseTypeSelected\"\n    [initialSelection]=\"\n      caseTypeSelected === caseType.REPORT_CASE\n        ? payload?.category\n        : addToCasePayload?.category\n    \"\n    [initialAdditionalSelection]=\"\n      caseTypeSelected === caseType.REPORT_CASE\n        ? payload?.additional_category\n        : addToCasePayload?.additional_category\n    \"\n    [mode]=\"mode\"\n    [workflowType]=\"workflowType\"\n    (onCategoryChange)=\"onCategoryChange($event)\"\n    (fieldClicked)=\"onFieldClicked($event)\"\n    (filterDeselector)=\"pickerToggle($event)\"\n  ></app-case-category>\n  <app-report-date\n    [payload]=\"\n      caseTypeSelected === caseType.REPORT_CASE ? payload : addToCasePayload\n    \"\n    [fieldSelected]=\"fieldClicked\"\n    [validationError]=\"validationError\"\n    (fieldClicked)=\"onFieldClicked($event)\"\n  ></app-report-date>\n  <app-case-priority\n    [payload]=\"\n      caseTypeSelected === caseType.REPORT_CASE ? payload : addToCasePayload\n    \"\n    [fieldSelected]=\"fieldClicked\"\n    [caseTypeSelected]=\"caseTypeSelected\"\n    [validationError]=\"validationError\"\n    [initialSelection]=\"\n      caseTypeSelected === caseType.REPORT_CASE\n        ? payload?.priority\n        : addToCasePayload?.priority\n    \"\n    [mode]=\"mode\"\n    [workflowType]=\"workflowType\"\n    (onPriorityChange)=\"onPriorityChange($event)\"\n    (onPriorityLoader)=\"onCaseLoader($event, 'priority')\"\n  ></app-case-priority>\n  <ng-template #supportingDocumentsBlock let-docs=\"docs\">\n    <app-field-holder\n      [image]=\"ASSETS.format_evidence\"\n      [disabled]=\"fieldSelector?.includes(fieldClicked)\"\n      [checked]=\"docs?.length\"\n    >\n      <ng-container field>\n        <app-vc-label\n          label\n          [labelText]=\"reportTexts.case_details.attachments.title\"\n        ></app-vc-label>\n        <app-format-and-evidence\n          (updateFiles)=\"saveSupportingDocument($event)\"\n          [mode]=\"'reportACase'\"\n          [formatEvidanceData]=\"docs\"\n        ></app-format-and-evidence>\n      </ng-container>\n    </app-field-holder>\n  </ng-template>\n  <ng-container\n    *ngIf=\"caseTypeSelected === caseType.ADD_CASE_TO_WORKFLOW\"\n    [ngTemplateOutlet]=\"supportingDocumentsBlock\"\n    [ngTemplateOutletContext]=\"{ docs: addToCasePayload?.supporting_documents }\"\n  ></ng-container>\n  <span\n    *ngIf=\"caseTypeSelected === caseType.ADD_CASE_TO_WORKFLOW\"\n    class=\"head-label vx-fs-10 vx-fw-500 vx-txt-white vx-tt-uppercase vx-pl-1 vx-pr-1 vx-lh-4\"\n  >\n    USER DETAILS\n  </span>\n  <app-case-owners\n    *ngIf=\"caseTypeSelected === caseType.ADD_CASE_TO_WORKFLOW\"\n    [payload]=\"addToCasePayload\"\n    [initialSelection]=\"addToCasePayload?.caseToWorkflow?.owners\"\n    [workflowId]=\"addToCasePayload?.caseToWorkflow?.workflow_id\"\n    [fieldSelected]=\"fieldClicked\"\n    [validationError]=\"validationError\"\n    [mode]=\"mode\"\n    (fieldClicked)=\"onFieldClicked($event)\"\n    (filterDeselector)=\"pickerToggle($event)\"\n  ></app-case-owners>\n  <app-case-assignees\n    *ngIf=\"caseTypeSelected === caseType.ADD_CASE_TO_WORKFLOW\"\n    [payload]=\"addToCasePayload\"\n    [fieldSelected]=\"fieldClicked\"\n    [initialSelection]=\"addToCasePayload?.caseToWorkflow\"\n    [userList]=\"userList\"\n    [groupList]=\"groupList\"\n    [validationError]=\"validationError\"\n    (fieldClicked)=\"onFieldClicked($event)\"\n    (filterDeselector)=\"pickerToggle($event)\"\n  ></app-case-assignees>\n  <ng-container\n    *ngIf=\"caseTypeSelected === caseType.REPORT_CASE\"\n    [ngTemplateOutlet]=\"supportingDocumentsBlock\"\n    [ngTemplateOutletContext]=\"{ docs: payload?.supporting_documents }\"\n  ></ng-container>\n  <span\n    *ngIf=\"caseTypeSelected === caseType.ADD_CASE_TO_WORKFLOW\"\n    class=\"head-label vx-fs-10 vx-fw-500 vx-txt-white vx-tt-uppercase vx-pl-1 vx-pr-1 vx-lh-4 vx-mb-4\"\n  >\n    CASE RESOLUTION DETAILS\n  </span>\n  <app-case-resolution-deadline\n    *ngIf=\"caseTypeSelected === caseType.ADD_CASE_TO_WORKFLOW\"\n    [payload]=\"addToCasePayload\"\n    [userList]=\"userList\"\n    [groupList]=\"groupList\"\n    [initialSelection]=\"addToCasePayload?.caseToWorkflow\"\n    [fieldSelected]=\"fieldClicked\"\n    [mode]=\"mode\"\n    [caseId]=\"caseId\"\n    (fieldClicked)=\"onFieldClicked($event)\"\n    [validationError]=\"validationError\"\n    (filterDeselector)=\"pickerToggle($event)\"\n  ></app-case-resolution-deadline>\n  <span\n    *ngIf=\"\n      caseTypeSelected === caseType.ADD_CASE_TO_WORKFLOW &&\n      displayAdditionalOptions\n    \"\n    class=\"head-label vx-fs-10 vx-fw-500 vx-txt-white vx-tt-uppercase vx-pl-1 vx-pr-1 vx-lh-4\"\n  >\n    ADDITIONAL OPTIONS\n  </span>\n  <!-- Exception Type -->\n  <app-field-holder\n    *ngIf=\"\n      additionalOptionStatus.EXCEPTION_TYPE &&\n      caseTypeSelected === caseType.ADD_CASE_TO_WORKFLOW\n    \"\n    [scrollToBottom]=\"scrollToBottom\"\n    [active]=\"false\"\n    [disabled]=\"fieldSelector?.includes(fieldClicked)\"\n    [checked]=\"addToCasePayload?.caseToWorkflow?.exception_type\"\n    [image]=\"ASSETS.objectives\"\n  >\n    <ng-container field>\n      <span class=\"vx-control-panel\">Exception Type</span>\n      <app-cs-radio\n        class=\"main-filed\"\n        [value]=\"exceptionType.DESIGN_EXCEPTION\"\n        name=\"exception-type\"\n        [checked]=\"\n          addToCasePayload?.caseToWorkflow?.exception_type ===\n          exceptionType.DESIGN_EXCEPTION\n        \"\n        (checkedEvent)=\"setException(exceptionType.DESIGN_EXCEPTION)\"\n        >Design Exception\n      </app-cs-radio>\n      <app-cs-radio\n        class=\"main-filed\"\n        [value]=\"exceptionType.EFFECTIVENESS_EXCEPTION\"\n        name=\"exception-type\"\n        [checked]=\"\n          addToCasePayload?.caseToWorkflow?.exception_type ===\n          exceptionType.EFFECTIVENESS_EXCEPTION\n        \"\n        (checkedEvent)=\"setException(exceptionType.EFFECTIVENESS_EXCEPTION)\"\n        >Effectiveness Exception\n      </app-cs-radio>\n    </ng-container>\n  </app-field-holder>\n\n  <!-- Associated Risks -->\n  <div\n    [appScrollInView]=\"scrollToBottom\"\n    class=\"form-group-row\"\n    *ngIf=\"additionalOptionStatus.ASSOCIATED_RISKS\"\n    [class.disabled]=\"fieldSelector?.includes(fieldClicked)\"\n  >\n    <div\n      class=\"left\"\n      [class.checked]=\"addToCasePayload?.caseToWorkflow?.associated_risks?.text\"\n    >\n      <img\n        [src]=\"ASSETS.associated_risks\"\n        alt=\"im\"\n        *ngIf=\"\n          !addToCasePayload?.caseToWorkflow?.associated_risks?.text?.trim()\n            ?.length\n        \"\n      />\n\n      <svg\n        class=\"checkIcon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 52 52\"\n        *ngIf=\"\n          addToCasePayload?.caseToWorkflow?.associated_risks?.text?.trim()\n            .length\n        \"\n      >\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path\n          class=\"checkIcon__check\"\n          fill=\"none\"\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n        />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <span class=\"vx-control-panel\">Associated Risks </span>\n        <ng-container\n          *ngIf=\"\n            addToCasePayload?.caseToWorkflow?.associated_risks?.attachments\n              ?.length > 0\n          \"\n        >\n          <div\n            class=\"file-list\"\n            *ngFor=\"\n              let uploadingFile of addToCasePayload?.caseToWorkflow\n                ?.associated_risks?.attachments\n            \"\n          >\n            <div class=\"file-container\">\n              <span class=\"file-name\">{{ uploadingFile }}</span>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container\n          *ngIf=\"\n            addToCasePayload?.caseToWorkflow?.associated_risks?.attachments\n              ?.length > 0\n          \"\n        >\n          <div\n            class=\"file-list\"\n            *ngFor=\"\n              let file of addToCasePayload?.caseToWorkflow?.associated_risks\n                ?.attachments\n            \"\n          >\n            <div class=\"file-container\">\n              <span class=\"file-name\">{{ file?.name }}</span>\n              <button>\n                <i class=\"icons\" (click)=\"deleteFile(file, 'ASSOCIATED_RISKS')\"\n                  >&#xe90d;</i\n                >\n              </button>\n            </div>\n          </div>\n        </ng-container>\n        <vcomply-editor\n          [(ngModel)]=\"addToCasePayload.caseToWorkflow.associated_risks.text\"\n          [editorConfig]=\"{\n            mode: 'prime',\n            colorPalette: true,\n            link: true,\n            file: false,\n            placeholder: 'Associated Risks'\n          }\"\n          (clickOutside)=\"checkDescription()\"\n          (sendSavedFiles)=\"selectFile('ASSOCIATED_RISKS', $event)\"\n        ></vcomply-editor>\n      </div>\n    </div>\n  </div>\n\n  <!-- Overseer -->\n  <div\n    [appScrollInView]=\"scrollToBottom\"\n    class=\"form-group-row\"\n    [class.active]=\"false\"\n    *ngIf=\"additionalOptionStatus.OVERSIGHT\"\n    [class.disabled]=\"fieldSelector?.includes(fieldClicked)\"\n  >\n    <div\n      class=\"left\"\n      [class.checked]=\"\n        addToCasePayload?.caseToWorkflow?.oversights?.cc_ids?.length ||\n        addToCasePayload?.caseToWorkflow?.oversights?.cc_failures_ids?.length\n      \"\n    >\n      <img\n        [src]=\"ASSETS.oversight\"\n        alt=\"\"\n        *ngIf=\"\n          !(\n            addToCasePayload?.caseToWorkflow?.oversights?.cc_ids?.length ||\n            addToCasePayload?.caseToWorkflow?.oversights?.cc_failures_ids\n              ?.length\n          )\n        \"\n      />\n\n      <svg\n        class=\"checkIcon\"\n        *ngIf=\"\n          addToCasePayload?.caseToWorkflow?.oversights?.cc_ids?.length ||\n          addToCasePayload?.caseToWorkflow?.oversights?.cc_failures_ids?.length\n        \"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 52 52\"\n      >\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path\n          class=\"checkIcon__check\"\n          fill=\"none\"\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n        />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <span class=\"vx-control-panel\">Oversight</span>\n        <div class=\"select\" *ngIf=\"!selectedOversights?.cc_list?.length\">\n          <input\n            type=\"text\"\n            (click)=\"setActiveFieldSelector('CASE_CC', 'CASE_CC')\"\n            placeholder=\"Who should have oversight of this case?\"\n            readonly\n          />\n        </div>\n\n        <div class=\"selected\" *ngIf=\"selectedOversights?.cc_list?.length\">\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n            <i\n              class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n              (click)=\"deleteItem('CASE_CC', selectedOversights?.cc_list[0])\"\n              >&#xe9ae;</i\n            >\n            <span\n              class=\"chipName vx-fs-11 vx-label-txt\"\n              [appTooltip]=\"selectedOversights?.cc_list[0]?.employee_name\"\n              placement=\"bottom-left\"\n              delay=\"0\"\n              type=\"black\"\n              [tooltipMandatory]=\"false\"\n              >{{ selectedOversights?.cc_list[0]?.employee_name }}</span\n            >\n            <button\n              class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n              appPopover\n              (click)=\"CC.popover()\"\n              placement=\"right\"\n              *ngIf=\"selectedOversights?.cc_list?.length > 1\"\n            >\n              +{{ selectedOversights?.cc_list?.slice(1).length }}\n            </button>\n          </div>\n          <button\n            *ngIf=\"activeField !== 'CASE_CC'\"\n            class=\"edit\"\n            type=\"button\"\n            (click)=\"setActiveFieldSelector('CASE_CC', 'CASE_CC')\"\n          >\n            <i class=\"icons\">&#xe9ba;</i>Edit\n          </button>\n        </div>\n        <div\n          class=\"select\"\n          *ngIf=\"\n            !selectedOversights?.cc_failures_list ||\n            selectedOversights?.cc_failures_list?.length === 0\n          \"\n        >\n          <input\n            (click)=\"setActiveFieldSelector('CASE_FCC', 'CASE_FCC')\"\n            type=\"text\"\n            placeholder=\"Who should be notified if the case is not resolved?\"\n            readonly\n          />\n        </div>\n\n        <div\n          class=\"selected\"\n          *ngIf=\"selectedOversights?.cc_failures_list?.length\"\n        >\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n            <i\n              class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n              (click)=\"\n                deleteItem('CASE_FCC', selectedOversights?.cc_failures_list[0])\n              \"\n              >&#xe9ae;</i\n            >\n            <span\n              class=\"chipName vx-fs-11 vx-label-txt\"\n              [appTooltip]=\"\n                selectedOversights?.cc_failures_list[0]?.employee_name\n              \"\n              placement=\"bottom-left\"\n              delay=\"0\"\n              type=\"black\"\n              [tooltipMandatory]=\"false\"\n              >{{\n                selectedOversights?.cc_failures_list[0]?.employee_name\n              }}</span\n            >\n            <button\n              class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n              appPopover\n              (click)=\"FCC.popover()\"\n              placement=\"right\"\n              *ngIf=\"selectedOversights?.cc_failures_list?.length > 1\"\n            >\n              +{{ selectedOversights?.cc_failures_list?.slice(1)?.length }}\n            </button>\n          </div>\n          <button\n            *ngIf=\"activeField !== 'CASE_FCC'\"\n            class=\"edit\"\n            type=\"button\"\n            (click)=\"setActiveFieldSelector('CASE_FCC', 'CASE_FCC')\"\n          >\n            <i class=\"icons\">&#xe9ba;</i>Edit\n          </button>\n        </div>\n      </div>\n      <app-popover #CC [dontCloseonClick]=\"true\">\n        <div class=\"wf-action-list\">\n          <ul class=\"action-item\">\n            <li\n              *ngFor=\"\n                let cc of selectedOversights?.cc_list | slice : 1;\n                let j = index\n              \"\n            >\n              <div class=\"avatar-card\">\n                <span class=\"value\">\n                  <i class=\"icons\" (click)=\"deleteItem('CASE_CC', cc)\"\n                    >&#xe90d;</i\n                  >\n                  {{ cc?.employee_name }}\n                </span>\n              </div>\n            </li>\n          </ul>\n        </div>\n      </app-popover>\n      <app-popover #FCC [dontCloseonClick]=\"true\">\n        <div class=\"wf-action-list\">\n          <ul class=\"action-item\">\n            <li\n              *ngFor=\"\n                let fcc of selectedOversights?.cc_failures_list | slice : 1;\n                let j = index\n              \"\n            >\n              <div class=\"avatar-card\">\n                <span class=\"value\">\n                  <i class=\"icons\" (click)=\"deleteItem('CASE_FCC', fcc)\"\n                    >&#xe90d;</i\n                  >\n                  {{ fcc?.employee_name }}\n                </span>\n              </div>\n            </li>\n          </ul>\n        </div>\n      </app-popover>\n    </div>\n  </div>\n\n  <!-- Evidence -->\n  <div\n    [appScrollInView]=\"scrollToBottom\"\n    class=\"form-group-row\"\n    *ngIf=\"additionalOptionStatus.EVIDENCE\"\n    [class.disabled]=\"fieldSelector?.includes(fieldClicked)\"\n  >\n    <div class=\"left\" [class.checked]=\"true\">\n      <svg\n        class=\"checkIcon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 52 52\"\n      >\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path\n          class=\"checkIcon__check\"\n          fill=\"none\"\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n        />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <span class=\"vx-control-panel\">Evidence</span>\n        <div class=\"upload-format\">\n          <span class=\"text\"\n            >Do you want evidence of completion of the case to be\n            uploaded?</span\n          >\n          <div class=\"radio-group\">\n            <app-cs-radio\n              [name]=\"'file-evidence'\"\n              [value]=\"1\"\n              [checked]=\"addToCasePayload?.caseToWorkflow?.evidence_enabled\"\n              (checkedEvent)=\"setEvidence(true)\"\n              >Yes\n            </app-cs-radio>\n            <app-cs-radio\n              [name]=\"'file-evidence'\"\n              [value]=\"0\"\n              [checked]=\"!addToCasePayload?.caseToWorkflow?.evidence_enabled\"\n              (checkedEvent)=\"setEvidence(false)\"\n              >No\n            </app-cs-radio>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- Recommended Actions -->\n  <div\n    class=\"form-group-row\"\n    *ngIf=\"additionalOptionStatus.RECOMMENDED_ACTIONS\"\n    [class.disabled]=\"fieldSelector?.includes(fieldClicked)\"\n  >\n    <div\n      class=\"left\"\n      [class.checked]=\"addToCasePayload?.caseToWorkflow?.recommendations?.text\"\n    >\n      <img\n        [src]=\"ASSETS.recommended_action\"\n        alt=\"im\"\n        *ngIf=\"\n          !(\n            addToCasePayload?.caseToWorkflow?.recommendations?.text\n            | spaceBreaker\n          )?.length\n        \"\n      />\n      <svg\n        class=\"checkIcon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 52 52\"\n        *ngIf=\"\n          (\n            addToCasePayload?.caseToWorkflow?.recommendations?.text\n            | spaceBreaker\n          )?.length > 0\n        \"\n      >\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path\n          class=\"checkIcon__check\"\n          fill=\"none\"\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n        />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <span class=\"vx-control-panel\">Recommended Actions</span>\n        <ng-container\n          *ngIf=\"\n            addToCasePayload?.caseToWorkflow?.recommendations?.attachments\n              ?.length > 0\n          \"\n        >\n          <div\n            class=\"file-list\"\n            *ngFor=\"\n              let uploadingFile of addToCasePayload?.caseToWorkflow\n                ?.recommendations?.attachments\n            \"\n          >\n            <div class=\"file-container\">\n              <span class=\"file-name\">{{ uploadingFile }}</span>\n            </div>\n            <app-line-loader [loaderHeight]=\"2\"></app-line-loader>\n          </div>\n        </ng-container>\n        <ng-container\n          *ngIf=\"\n            addToCasePayload?.caseToWorkflow?.recommendations?.attachments\n              ?.length > 0\n          \"\n        >\n          <div\n            class=\"file-list\"\n            *ngFor=\"\n              let file of addToCasePayload?.caseToWorkflow?.recommendations\n                ?.attachments\n            \"\n          >\n            <div class=\"file-container\">\n              <span class=\"file-name\">{{ file?.name }}</span>\n              <button>\n                <i\n                  class=\"icons\"\n                  (click)=\"deleteFile(file, 'RECOMMENDED_ACTIONS')\"\n                  >&#xe90d;</i\n                >\n              </button>\n            </div>\n          </div>\n        </ng-container>\n        <vcomply-editor\n          [(ngModel)]=\"addToCasePayload.caseToWorkflow.recommendations.text\"\n          [editorConfig]=\"{\n            mode: 'prime',\n            colorPalette: true,\n            link: true,\n            file: true,\n            placeholder: 'Recommended actions'\n          }\"\n          (ngModelChange)=\"\n            addToCasePayload?.caseToWorkflow?.recommendations?.text?.trim()\n              ?.length > 0\n              ? removeError('issueRecommendation')\n              : null\n          \"\n          (clickOutside)=\"checkDescription()\"\n          (sendSavedFiles)=\"selectFile('RECOMMENDED_ACTIONS', $event)\"\n        ></vcomply-editor>\n      </div>\n    </div>\n  </div>\n  <!-- Risk Classification -->\n  <div\n    *ngIf=\"additionalOptionStatus.RISK_CLASSIFICATION\"\n    class=\"form-group-row\"\n    id=\"risk_classification\"\n    [class.disabled]=\"fieldSelector?.includes(fieldClicked)\"\n  >\n    <div class=\"left\" [class.checked]=\"addToCasePayload.risk_class\">\n      <img [src]=\"ASSETS.risks\" alt=\"im\" *ngIf=\"!addToCasePayload.risk_class\" />\n\n      <svg\n        class=\"checkIcon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 52 52\"\n        *ngIf=\"addToCasePayload.risk_class\"\n      >\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path\n          class=\"checkIcon__check\"\n          fill=\"none\"\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n        />\n      </svg>\n    </div>\n\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <span class=\"vx-control-panel\">Risk Classification</span>\n        <div class=\"classification\">\n          <label\n            class=\"low\"\n            *ngFor=\"let class of riskClassification; let rcIdx = index\"\n            [ngClass]=\"[class.class]\"\n            [attr.for]=\"'workflow-case-risk-class-' + rcIdx\"\n          >\n            <input\n              [id]=\"'workflow-case-risk-class-' + rcIdx\"\n              type=\"radio\"\n              name=\"classification\"\n              [value]=\"class.value\"\n              [checked]=\"addToCasePayload.risk_class === class.value\"\n              [(ngModel)]=\"addToCasePayload.risk_class\"\n            />\n            <span>{{ class.name }}</span>\n          </label>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<app-loader-inline *ngIf=\"checkloader\"></app-loader-inline>\n<app-checkbox-list\n  [config]=\"oversight_config\"\n  [twoColumn]=\"true\"\n  [itemsList]=\"userList\"\n  [selectedItems]=\"selectedOversights?.cc_list\"\n  [identifierKey]=\"'employee_email'\"\n  [displayKey]=\"'employee_name'\"\n  [tooltipKey]=\"'employee_email'\"\n  *ngIf=\"activeSelector === 'CASE_CC'\"\n  (saveList)=\"selectorAction($event, 'CASE_CC')\"\n  (closeList)=\"fieldDeselector('CASE_CC')\"\n  [loaded]=\"loader.userListLoader\"\n></app-checkbox-list>\n\n<app-checkbox-list\n  [config]=\"oversight_config\"\n  [twoColumn]=\"true\"\n  [itemsList]=\"userList\"\n  [selectedItems]=\"selectedOversights?.cc_failures_list\"\n  [identifierKey]=\"'employee_email'\"\n  [displayKey]=\"'employee_name'\"\n  [tooltipKey]=\"'employee_email'\"\n  *ngIf=\"activeSelector === 'CASE_FCC'\"\n  (saveList)=\"selectorAction($event, 'CASE_FCC')\"\n  (closeList)=\"fieldDeselector('CASE_FCC')\"\n  [loaded]=\"loader.userListLoader\"\n></app-checkbox-list>\n\n<app-smiley-dialog-inline\n  *ngIf=\"showSmiley\"\n  [message]=\"smileyMessage\"\n  [actionButtons]=\"actionButtons\"\n  (action)=\"smileyActions($event)\"\n  (closeSmiley)=\"closeSmiley($event)\"\n></app-smiley-dialog-inline>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.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/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/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\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::ng-deep .workflow-case{display:block;position:relative}::ng-deep .workflow-case app-case-type{cursor:pointer}::ng-deep .workflow-case app-case-details app-field-holder app-vc-input input{cursor:text;z-index:1000}::ng-deep .workflow-case app-report-date .date-time-picker{pointer-events:auto!important;z-index:1}::ng-deep .workflow-case app-rc-details app-cs-switch .cs-switch .switch{pointer-events:none!important;opacity:.5!important}::ng-deep .workflow-case .head-label{background:#565a6f;border-radius:.125rem;height:1rem;position:relative}::ng-deep .workflow-case .head-label:before{background:#e3e3e9;content:\"\";position:absolute;top:7px;left:-40px;width:500px;height:1px;z-index:-1}\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\";@import\"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700&display=swap\";::-webkit-scrollbar-track{background-color:#f1f1f1;position:absolute}::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}button{font-family:Poppins,sans-serif}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;font-size:13px;color:#747576;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField::placeholder{font-size:13px;color:#747576}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxEnable.withBtn:after{display:none}::ng-deep .selectBoxEnable.withBtn button.setBtn{background:transparent;border-radius:0;border:none;min-width:98px}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer .chipName.no-width{max-width:unset}::ng-deep .chipContainer .chipName.full-width{max-width:25rem}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}::ng-deep .workflowLavel{background:#f1f1f1;border-radius:.125rem;color:#042e7d;min-width:1rem;height:1rem}::ng-deep .reviewSelection{border-radius:.25rem;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep .reviewSelection:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectButton{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectButton:hover,::ng-deep .selectButton:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep button.createNewBtn{background:transparent;border-radius:0;border:none}::ng-deep .vx-form-group{display:block;position:relative;margin-bottom:20px}::ng-deep .vx-form-group:after{content:\"\";display:block;clear:both}::ng-deep .vx-form-group .select{position:relative}::ng-deep .vx-form-group .select:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#707070;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .vx-form-group .select input{cursor:pointer;padding-right:30px!important}::ng-deep .vx-form-group .select .custom-input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;outline:none;padding:3px 12px;line-height:16px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .vx-form-group .select .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:13px;width:94%;display:block;pointer-events:none;opacity:.8}::ng-deep .vx-form-group .select .custom-input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .vx-form-group .select .custom-input.frequency-custom-input{padding-right:108px;display:flex;align-items:center}::ng-deep .vx-form-group .select+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .select+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .select+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .select~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .select.button-sec:after{display:none}::ng-deep .vx-form-group .select.button-sec button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;position:absolute;top:12px;right:8px;padding:0;margin:0}::ng-deep .vx-form-group .select+.vx-control-panel{margin-top:8px}::ng-deep .vx-form-group .select+.selected{margin-top:8px}::ng-deep .vx-form-group .select.select{margin-top:8px}::ng-deep .vx-form-group .upload-format{border:1px solid #dbdbdb;border-radius:4px;padding:8px 12px;display:block}::ng-deep .vx-form-group .upload-format span.text{line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:block;margin-bottom:6px}::ng-deep .vx-form-group .upload-format .radio-group{display:flex}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio{display:inline-block}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;margin-left:8px}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio+app-cs-radio{margin-left:12px}::ng-deep .vx-form-group .upload-format~.upload-format{margin-top:4px}::ng-deep .vx-form-group .form-tab{display:flex;justify-content:flex-start}::ng-deep .vx-form-group .form-tab button{background:transparent;color:#161b2f;font-size:11px;line-height:16px;text-transform:uppercase;cursor:pointer;padding:8px 8px 8px 0;border:none;outline:none;font-weight:500}::ng-deep .vx-form-group .form-tab button:disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .form-tab button+button{padding:8px}::ng-deep .vx-form-group .form-tab button.active{color:#1e5dd3}::ng-deep .vx-form-group .tab-group{border:1px solid #dbdbdb;border-radius:4px;padding:0;display:block;position:relative;transition:all .2s ease-in-out}::ng-deep .vx-form-group .tab-group:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group .tab-group .upload-file{padding:16px 62px 16px 24px;display:flex;align-items:center;justify-content:space-between}::ng-deep .vx-form-group .tab-group .upload-file .image{width:80px}::ng-deep .vx-form-group .tab-group .upload-file .browse span{display:inline-block;font-size:12px;color:#747576;line-height:16px;padding:0 4px}::ng-deep .vx-form-group .tab-group .upload-file .browse .label{font-size:11px;color:#1e5dd3;line-height:16px;font-weight:600;text-transform:uppercase;margin:0;padding:0}::ng-deep .vx-form-group .tab-group .upload-file .browse .label input{opacity:0;position:absolute;margin:0;padding:0;inset:0;cursor:pointer;width:100%}::ng-deep .vx-form-group .tab-group.active{border-color:#1e5dd3}::ng-deep .vx-form-group .tab-group.uploaded{margin-top:4px}::ng-deep .vx-form-group .tab-group.uploaded .upload-file{padding:8px 0!important;text-align:center}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .image{display:none}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .browse{width:100%;text-align:center}::ng-deep .vx-form-group .tab-group+label.vx-form-group{margin-top:8px;margin-bottom:4px}::ng-deep .vx-form-group .file-list{background:#fbfbfb;border:1px solid #f1f1f1;border-radius:4px;padding:12px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;position:relative}::ng-deep .vx-form-group .file-list span.file-name{color:#747576;line-height:16px;font-size:11px;font-weight:400;cursor:pointer;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .vx-form-group .file-list .button-group{display:flex}::ng-deep .vx-form-group .file-list button{font-size:12px;color:#eb2424;cursor:pointer;display:flex;padding:0;border:none;outline:none;background:transparent}::ng-deep .vx-form-group .file-list button.edit{color:#1e5dd3}::ng-deep .vx-form-group .file-list button+button{margin-left:16px}::ng-deep .vx-form-group .file-list+.file-list{margin-top:4px}::ng-deep .vx-form-group .file-list .file-container{display:flex;justify-content:space-between;width:100%}::ng-deep .vx-form-group .file-list.policy{background:#fff}::ng-deep .vx-form-group .file-list cs-select{position:relative;margin-top:8px;width:100%}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group input.value{height:32px!important;font-size:13px!important}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group i{right:12px!important;top:12px!important}::ng-deep .vx-form-group .file-list app-line-loader{display:block;position:absolute;left:10px;right:10px;bottom:0}::ng-deep .vx-form-group span.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 span.vx-control-panel.custom-tag{font-size:10px}::ng-deep .vx-form-group span.vx-control-panel.vx-mt-8{margin-top:8px}::ng-deep .vx-form-group span.vx-control-panel span.required{color:#eb2424;font-size:14px;font-weight:500;position:relative;top:-2px}::ng-deep .vx-form-group span.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 span.vx-control-panel app-cs-switch{float:right;display:block}::ng-deep .vx-form-group span.vx-control-panel i{margin-left:8px;font-size:12px;color:#1e5dd3;cursor:pointer;position:relative;top:1px}::ng-deep .vx-form-group span.vx-control-panel i.depreciation-icon{color:#e4b700;font-size:16px;position:relative;top:3px}::ng-deep .vx-form-group span.vx-control-panel .checkpoint-version{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:10px;font-weight:600;line-height:14px;margin-left:4px;padding:0 2px}::ng-deep .vx-form-group input[type=text],::ng-deep .vx-form-group .input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;outline:none;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::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;-moz-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:#fff;padding:8px 12px;display:flex;justify-content:space-between}::ng-deep .vx-form-group .classification label{margin:0 4px 0 0;width:100%;position:relative;z-index:1}::ng-deep .vx-form-group .classification label span{display:block;width:100%;height:24px;border:1px solid #f1f1f1;border-radius:2px;line-height:24px;font-size:10px;text-align:center;color:#747576;font-weight:500;position:relative;text-transform:uppercase}::ng-deep .vx-form-group .classification label span:before{height:2px;content:\"\";top:0;right:0;left:0;border-radius:2px;position:absolute;transition:all .2s ease-in-out}::ng-deep .vx-form-group .classification label input{opacity:0;position:absolute;inset:0;margin:0;padding:0;width:100%;height:100%;cursor:pointer;z-index:1}::ng-deep .vx-form-group .classification label input:checked+span{color:#fff}::ng-deep .vx-form-group .classification label input:checked+span:before{bottom:0;height:100%;z-index:-1}::ng-deep .vx-form-group .classification label.low span:before{background:#34aa44}::ng-deep .vx-form-group .classification label.low-med span:before{background:#f2bf19}::ng-deep .vx-form-group .classification label.med-high span:before{background:#f29619}::ng-deep .vx-form-group .classification label.high span:before{background:#eb2424}::ng-deep .vx-form-group .classification label:last-of-type{margin-right:0}::ng-deep .vx-form-group .input{display:flex;align-items:center}::ng-deep .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;padding:8px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:flex;align-items:center;position:relative;justify-content:space-between}::ng-deep .vx-form-group .selected.first-field{z-index:2}::ng-deep .vx-form-group .selected .chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .vx-form-group .selected .chip-container.checkpoints{width:calc(100% - 120px)}::ng-deep .vx-form-group .selected .chip-container span.chip{background:#fff;border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;padding:0 8px;color:#1e5dd3;font-size:12px;display:block;width:auto;max-width:100%;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .vx-form-group .selected .chip-container span.chip.disabled{background:#f1f1f1;box-shadow:none;color:#747576;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .selected .chip-container span.chip i{font-weight:400;margin-right:8px;cursor:pointer;font-size:10px;position:relative;top:1px}::ng-deep .vx-form-group .selected .chip-container span.chip span.step{background:#1e5dd3;border-radius:2px;color:#fff;font-size:9px;line-height:14px;padding:0 4px;font-weight:400;text-align:center;min-width:auto;margin-right:4px}::ng-deep .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question{display:flex;align-items:center;justify-content:space-between;width:100%}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.value{color:#1e5dd3;font-size:12px;font-weight:400;line-height:24px;padding:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 80px)}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.label{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding-left:4px;padding-right:4px;line-height:12px;margin-left:8px}::ng-deep .vx-form-group .selected .chip-container span.value{color:#747576;font-size:13px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 52px);padding:0 4px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text{color:#747576;font-size:10px;font-weight:500;padding:0 8px;width:122px;line-height:14px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first{position:relative;min-width:162px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first:before{background:#f1f1f1;content:\"\";position:absolute;top:0;right:0;height:calc(100% + 12px);width:1px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text .no{color:#1e5dd3}::ng-deep .vx-form-group .selected .chip-container.plus span.chip{max-width:calc(50% - 35px)}::ng-deep .vx-form-group .selected .chip-container.more-one span.chip{max-width:50%}::ng-deep .vx-form-group .selected .chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .vx-form-group .selected .chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:100px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count{border-radius:20px;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .vx-form-group .selected .chip-container .chip-inner i.cross{cursor:pointer;position:relative;top:1px;font-size:8px}::ng-deep .vx-form-group .selected button.count{background:#1e5dd3;border-radius:2px;height:24px;padding:0 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none;color:#fff;font:13px;font-weight:500;line-height:20px;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit{border:none;border-radius:0;background:transparent;outline:none;cursor:pointer;display:block;font-size:11px;font-weight:600;color:#1e5dd3;text-transform:uppercase;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit i{font-weight:400;font-size:8px;margin-right:4px}::ng-deep .vx-form-group .selected button.close-btn{background:transparent;border:none;padding:0;margin-left:8px;font-size:10px;color:#c7381b;display:flex;align-items:center}::ng-deep .vx-form-group .selected .workflow-label{min-width:92px;padding:4px;text-align:center;margin-left:-8px;margin-right:8px;border-right:1px solid #f1f1f1}::ng-deep .vx-form-group .selected .workflow-label p{margin:0;display:block;text-transform:uppercase}::ng-deep .vx-form-group .selected .workflow-label p.title{font-size:9px;line-height:12px;color:#161b2f;font-weight:500}::ng-deep .vx-form-group .selected .workflow-label p.description{font-size:11px;line-height:16px;color:#161b2f;font-weight:600}::ng-deep .vx-form-group .selected .workflow-label+.chip-container{width:calc(100% - 148px)}::ng-deep .vx-form-group .selected+.selected{margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .selected+app-cs-switch.who-toggle label.cs-switch span.value{color:#747576}::ng-deep .vx-form-group .selected+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .selected~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .selected.readOnly{pointer-events:none}::ng-deep .vx-form-group .selected span.chip{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .vx-form-group .select-list{position:absolute;background:#fff;box-shadow:0 0 5px #1e5dd345;top:100%;right:0;left:0;z-index:2}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item{width:100%;padding:12px 16px}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item:hover{background:#f8f8f8}::ng-deep .vx-form-group ::ng-deep vcomply-editor{margin-top:8px;display:block;pointer-events:auto!important;z-index:1}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb}::ng-deep .vx-form-group ::ng-deep 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 ::ng-deep vcomply-editor .editor-container .editable-block ul{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editable-block ul li{list-style:disc}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editable-block ol{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editable-block ol li{list-style:decimal}::ng-deep .vx-form-group ::ng-deep 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 ::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 .vx-form-group ::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .vx-form-group ::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 .vx-form-group ::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 .vx-form-group ::ng-deep vcomply-editor .editor-container:focus-within{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container:focus-within .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container:hover{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container:hover .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group ::ng-deep vcomply-editor+app-cs-switch{margin-top:8px}::ng-deep .vx-form-group app-cs-switch label.cs-switch span.value{font-size:11px;color:#747576;text-transform:uppercase}::ng-deep .vx-form-group app-cs-switch+app-cs-switch{margin-top:8px}::ng-deep .vx-form-group .date-time-picker{display:flex;justify-content:space-between;height:40px;border-radius:4px;border:1px solid #dbdbdb;padding:11px 0;background:#fff}::ng-deep .vx-form-group .date-time-picker:focus-within{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .vx-form-group .date-time-picker .picker-group{width:50%;position:relative;display:flex;align-items:center}::ng-deep .vx-form-group .date-time-picker .picker-group:first-of-type{border-right:1px solid #dbdbdb}::ng-deep .vx-form-group .date-time-picker .picker-group:only-of-type{border:none;width:100%}::ng-deep .vx-form-group .date-time-picker .picker-group input{height:38px;background:transparent;outline:none;line-height:38px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;border:none;padding:0 12px 0 34px}::ng-deep .vx-form-group .date-time-picker .picker-group input:focus,::ng-deep .vx-form-group .date-time-picker .picker-group input:hover{box-shadow:none;border:none}::ng-deep .vx-form-group .date-time-picker .picker-group input::placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input:-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input::-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group i{display:flex;justify-content:center;align-items:center;height:16px;width:12px;position:absolute;left:12px;top:0;color:#747576;font-size:12px;pointer-events:none}::ng-deep .vx-form-group app-cs-radio.main-filed{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;color:#707070}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group app-cs-radio.disabled{pointer-events:none;opacity:.5;filter:grayscale(1);background:#f1f1f1}::ng-deep .vx-form-group .switch-row{display:flex}::ng-deep .vx-form-group .switch-row app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:0;text-transform:uppercase;color:#747576!important}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value i{display:inline-flex;font-size:11px;cursor:pointer;color:#1e5dd3;align-items:center;line-height:16px;margin:0 4px}::ng-deep .vx-form-group .switch-row app-cs-switch+app-cs-switch{margin-left:8px}::ng-deep .vx-form-group .switch-row.align-right{justify-content:flex-end}::ng-deep .vx-form-group .switch-row.align-right label.cs-switch span.value{margin-right:8px}::ng-deep .vx-form-group .risk-type-field{background:#f8f8f8;border:1px solid #dbdbdb;border-radius:4px;height:40px;display:flex;align-items:center;padding:4px;position:relative;z-index:1}::ng-deep .vx-form-group .risk-type-field .type-item{width:50%;position:relative}::ng-deep .vx-form-group .risk-type-field .type-item button{background:transparent;border:none;border-radius:0;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase;width:100%;height:32px;padding:0 12px;text-align:left}::ng-deep .vx-form-group .risk-type-field .type-item button.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item .info{color:#1e5dd3;font-size:12px;position:absolute;top:10px;right:12px;cursor:pointer}::ng-deep .vx-form-group .risk-type-field .type-item .info.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item.active button{color:#1e5dd3!important}::ng-deep .vx-form-group .risk-type-field .type-item:nth-child(2).active~.background-glider{transform:translate(100%)}::ng-deep .vx-form-group .risk-type-field .background-glider{background:#fff;border-radius:4px;box-shadow:0 1px 3px #161b2f26;position:absolute;display:flex;width:212px;height:32px;z-index:-1;transition:.25s ease-out}.left{width:36px;height:36px;margin-top:26px;margin-left:-58px;margin-right:20px;display:flex;justify-content:center;align-items:center;position:relative;z-index:10;border-radius:50%}.left.deadline-completed{margin-top:18px}.left.checked{background:transparent}.left img{width:36px}.left .checkIcon{width:32px;height:32px;background:#fff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}.left .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}.left .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}.right{width:100%}.right span.indicator{position:absolute;top:36px;left:-16px;font-size:12px;color:#f0b819;cursor:pointer}.right app-format-and-evidence~.error-message{position:relative;top:-12px}.form-group-row{display:flex;position:relative;transition:all .2s ease-in-out}.form-group-row.disabled{-webkit-user-select:none;user-select:none;pointer-events:none;filter:grayscale(1);z-index:2}.form-group-row.disabled .left{position:relative}.form-group-row.disabled .left:before{content:\"\";position:absolute;inset:2px 0 0 2px;background:#fff;opacity:.7;border-radius:50%;width:32px;height:32px}.form-group-row.disabled .right{opacity:.3}.form-group-row.active{pointer-events:none;filter:grayscale(0);z-index:2;opacity:1}.form-group-row.active .right .vx-form-group input,.form-group-row.active .right .vx-form-group .custom-input,.form-group-row.active .right .vx-form-group .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}.form-group-row.active .right .vx-form-group .selectBoxEnable.disabled{border-color:#dbdbdb;box-shadow:none}::ng-deep .radio-group-selector app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .radio-group-selector app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .radio-group-selector app-cs-radio label.radio-item .radio,::ng-deep .radio-group-selector app-cs-radio label.radio-item .radiomark{position:absolute!important;top:9px;left:12px}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value{font-size:11px!important;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0!important;max-width:100%!important;font-weight:500!important;color:#707070!important}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value i{font-size:12px;color:#1e5dd3}::ng-deep .radio-group-selector app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}::ng-deep .wf-action-list{width:220px}::ng-deep .wf-action-list ul{padding:0;margin:0;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}::ng-deep .wf-action-list ul.action-item{display:block}::ng-deep .wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}::ng-deep .wf-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}::ng-deep .wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .wf-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .wf-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .wf-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .wf-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .wf-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}::ng-deep .wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{-webkit-transform:translateY(50px);transform:translateY(50px)}to{-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes scale-up-center{0%{-webkit-transform:scale(.5);transform:scale(.5);opacity:0}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes scale-up-center{0%{-webkit-transform:scale(.5);transform:scale(.5);opacity:0}to{-webkit-transform:scale(1);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{-webkit-animation:rotate 2s linear infinite;animation:rotate 2s linear infinite;height:100%;-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center;width:100%;position:absolute;top:0;left:0;margin:auto}.loader-path{stroke-dasharray:150,200;stroke-dashoffset:-10;-webkit-animation:dash 1.5s ease-in-out infinite;animation:dash 1.5s ease-in-out infinite;stroke-linecap:round}@-webkit-keyframes rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-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}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35}to{stroke-dasharray:89,200;stroke-dashoffset:-124}}::ng-deep .dropdown{position:fixed;background:#fff;box-shadow:0 3px 6px #00000029;padding:24px 0;z-index:9;max-height:calc(100vh - 200px);overflow:auto}::ng-deep .dropdown ul.dropdown-list{padding:0 20px;margin:0;display:block}::ng-deep .dropdown ul.dropdown-list li{list-style:none}::ng-deep .dropdown ul.dropdown-list li app-cs-radio{display:flex}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.radio{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.value{padding:11px 12px 11px 32px;width:100%;border:1px solid #bcbcbc;border-radius:4px;margin-left:0;max-width:100%}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item svg{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item input[type=radio]:checked~span.value{background:#e8feeb;border-color:#34aa44}::ng-deep .dropdown ul.dropdown-list li+li{margin-top:8px}app-smiley-dialog{position:relative;z-index:10}app-smiley-dialog-inline{position:absolute;top:-3px;right:0;bottom:0;z-index:999;width:520px;height:calc(100vh + 3px)}::ng-deep .vx-overlay{position:fixed;z-index:3;inset:0}::ng-deep dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}::ng-deep dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}::ng-deep dp-date-picker input:focus{outline:none}::ng-deep dp-date-picker .dp-popup{width:412px;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep dp-date-picker .dp-popup dp-day-calendar,::ng-deep dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep dp-date-picker .dp-popup dp-day-calendar button,::ng-deep dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}::ng-deep dp-date-picker .dp-open+div{position:fixed!important;inset:0!important;display:flex;justify-content:center;align-items:center;z-index:99;pointer-events:none;background:#0000004d}::ng-deep .cdk-overlay-container{z-index:2147483002!important}::ng-deep .dp-popup{z-index:999;display:flex!important;align-items:center;justify-content:center;width:100vw;height:100vh;background:#0000004d!important;box-shadow:unset!important}::ng-deep .dp-popup dp-day-calendar{width:412px!important;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep .dp-popup dp-day-calendar,::ng-deep .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep .dp-popup dp-day-calendar button,::ng-deep .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep .dp-popup dp-day-calendar .dp-weekdays,::ng-deep .dp-popup dp-month-calendar .dp-weekdays,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}@-webkit-keyframes slide-bottom{0%{-webkit-transform:translateY(-100px);transform:translateY(-100px)}to{-webkit-transform:translateY(0px);transform:translateY(0)}}@keyframes slide-bottom{0%{-webkit-transform:translateY(-100px);transform:translateY(-100px)}to{-webkit-transform:translateY(0px);transform:translateY(0)}}::ng-deep span.file{display:block;width:20px;min-width:20px;border-radius:0 0 2px 2px;border:1px solid transparent;border-color:#747576;position:relative;margin-right:5px;border-top:none;margin-top:5px;background:#fff}::ng-deep span.file.table{margin-right:8px;width:18px;min-width:18px}::ng-deep span.file.table i{font-size:8px}::ng-deep span.file.table .format{height:8px;font-size:7px;line-height:8px;font-weight:400}::ng-deep span.file:before{position:absolute;border-radius:0;top:-4px;right:-1px;content:\"\";height:4px;width:4px;display:block;background:-moz-linear-gradient(45deg,#747576 0%,#747576 1%,#747576 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);background:-webkit-linear-gradient(45deg,#747576 0%,#747576 1%,#747576 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);background:linear-gradient(45deg,#747576 0% 1%,#747576 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file:after{height:4px;left:-1px;right:3px;border-top:1px solid;border-right:none;border-left:1px solid;content:\"\";top:-4px;position:absolute;border-radius:2px 0 0;background:#fff}::ng-deep span.file .format{height:10px;font-size:6px;text-transform:uppercase;background:transparent;font-weight:600;text-align:center;display:block;line-height:10px}::ng-deep span.file i{font-size:10px;height:10px;display:flex;align-items:center;justify-content:center;color:#dbdbdb}::ng-deep span.file.docx{width:22px!important}::ng-deep span.file.pdf,::ng-deep span.file.template{border-color:#f31c39}::ng-deep span.file.pdf:before,::ng-deep span.file.template:before{background:-moz-linear-gradient(45deg,#f31c39 0%,#f31c39 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);background:-webkit-linear-gradient(45deg,#f31c39 0%,#f31c39 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);background:linear-gradient(45deg,#f31c39 0% 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#f31c39\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.pdf:after,::ng-deep span.file.template:after{border-color:#f31c39}::ng-deep span.file.pdf .format,::ng-deep span.file.template .format{color:#f31c39}::ng-deep span.file.xlsx,::ng-deep span.file.xls,::ng-deep span.file.css,::ng-deep span.file.scss,::ng-deep span.file.less{border-color:#34aa44}::ng-deep span.file.xlsx:before,::ng-deep span.file.xls:before,::ng-deep span.file.css:before,::ng-deep span.file.scss:before,::ng-deep span.file.less:before{background:-moz-linear-gradient(45deg,#34aa44 0%,#34aa44 1%,#34aa44 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);background:-webkit-linear-gradient(45deg,#34aa44 0%,#34aa44 1%,#34aa44 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);background:linear-gradient(45deg,#34aa44 0% 1%,#34aa44 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.xlsx:after,::ng-deep span.file.xls:after,::ng-deep span.file.css:after,::ng-deep span.file.scss:after,::ng-deep span.file.less:after{border-color:#34aa44;color:#34aa44}::ng-deep span.file.xlsx .format,::ng-deep span.file.xls .format,::ng-deep span.file.css .format,::ng-deep span.file.scss .format,::ng-deep span.file.less .format{color:#34aa44}::ng-deep span.file.doc,::ng-deep span.file.docx,::ng-deep span.file.psd{border-color:#1e5dd3}::ng-deep span.file.doc:before,::ng-deep span.file.docx:before,::ng-deep span.file.psd:before{background:-moz-linear-gradient(45deg,#1e5dd3 0%,#1e5dd3 1%,#1e5dd3 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);background:-webkit-linear-gradient(45deg,#1e5dd3 0%,#1e5dd3 1%,#1e5dd3 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);background:linear-gradient(45deg,#1e5dd3 0% 1%,#1e5dd3 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.doc:after,::ng-deep span.file.docx:after,::ng-deep span.file.psd:after{border-color:#1e5dd3}::ng-deep span.file.doc .format,::ng-deep span.file.docx .format,::ng-deep span.file.psd .format{color:#1e5dd3}::ng-deep span.file.ppt,::ng-deep span.file.ai,::ng-deep span.file.html,::ng-deep span.file.jpg,::ng-deep span.file.jpeg,::ng-deep span.file.png{border-color:#f6882f}::ng-deep span.file.ppt:before,::ng-deep span.file.ai:before,::ng-deep span.file.html:before,::ng-deep span.file.jpg:before,::ng-deep span.file.jpeg:before,::ng-deep span.file.png:before{background:-moz-linear-gradient(45deg,#f6882f 0%,#f6882f 1%,#f6882f 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);background:-webkit-linear-gradient(45deg,#f6882f 0%,#f6882f 1%,#f6882f 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);background:linear-gradient(45deg,#f6882f 0% 1%,#f6882f 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.ppt:after,::ng-deep span.file.ai:after,::ng-deep span.file.html:after,::ng-deep span.file.jpg:after,::ng-deep span.file.jpeg:after,::ng-deep span.file.png:after{border-color:#f6882f}::ng-deep span.file.ppt .format,::ng-deep span.file.ai .format,::ng-deep span.file.html .format,::ng-deep span.file.jpg .format,::ng-deep span.file.jpeg .format,::ng-deep span.file.png .format{color:#f6882f}::ng-deep span.file.php{border-color:#7aa6f7}::ng-deep span.file.php:before{background:-moz-linear-gradient(45deg,#7aa6f7 0%,#7aa6f7 1%,#7aa6f7 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);background:-webkit-linear-gradient(45deg,#7aa6f7 0%,#7aa6f7 1%,#7aa6f7 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);background:linear-gradient(45deg,#7aa6f7 0% 1%,#7aa6f7 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.php:after{border-color:#7aa6f7}::ng-deep span.file.php .format{color:#7aa6f7}::ng-deep ngx-material-timepicker-container .timepicker-backdrop-overlay{background-color:#0000000d!important;z-index:9999999999!important}::ng-deep ngx-material-timepicker-container .timepicker-overlay{z-index:9999999999!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker{width:232px!important;border-radius:2px!important;box-shadow:0 4px 30px #161b2f26!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header{background-color:#fff!important;padding:0!important;border-radius:2px 2px 0 0}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container{display:block!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time{color:#000!important;width:150px!important;margin:0 auto;line-height:60px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control{font-size:40px;background-color:transparent!important;color:#000!important;font-weight:600;text-align:right;caret-color:transparent;outline:none;font-family:Poppins,sans-serif;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,sans-serif;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;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,sans-serif}::ng-deep vcomply-editor{display:block}::ng-deep vcomply-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep vcomply-editor .editor-container:hover,::ng-deep vcomply-editor .editor-container:focus-within{border:1px solid #1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep vcomply-editor .editor-container mention-list ul li a{font-size:16px!important}::ng-deep vcomply-editor .editor-container .editable-block{background:#fff;min-height:60px;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep vcomply-editor .editor-container .editable-block:before{color:#747576!important}::ng-deep vcomply-editor .editor-container .editor-tools{border-top:1px solid #dbdbdb;border-radius:0 0 3px 3px}::ng-deep vcomply-editor .editor-container .editor-tools:hover{border-color:#1e5dd3}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep marx-modal .popup-modal-background{background-color:#161b2fcc!important}::ng-deep .within-box{background:#f1f1f1;border-radius:.125rem;color:#042e7d}::ng-deep .within-value{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-word}.wf-tooltip{pointer-events:none;position:absolute;max-width:300px;font-size:12px;text-align:left;color:#fff;padding:8px 12px;background:#000;border-radius:2px;z-index:-222;top:0;opacity:0;white-space:break-spaces;word-break:break-word}.wf-tooltip *{color:#fff!important}.wf-tooltip:empty{display:none!important}.wf-tooltip.white{box-shadow:0 2px 8px #1c5bd159;color:#747576;background:#fff;text-align:left}.wf-tooltip.white b{color:#747576!important}.wf-tooltip.animate-top{-webkit-animation:animate-top .5s cubic-bezier(.25,.46,.45,.94) both;animation:animate-top .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-right{-webkit-animation:animate-right .3s cubic-bezier(.25,.46,.45,.94) both;animation:animate-right .3s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-bottom{-webkit-animation:animate-bottom .5s cubic-bezier(.25,.46,.45,.94) both;animation:animate-bottom .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-left{-webkit-animation:animate-left .5s cubic-bezier(.25,.46,.45,.94) both;animation:animate-left .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip-top:after{top:100%;left:50%;margin-left:-5px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip-bottom:after{bottom:100%;left:50%;margin-left:-5px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-left.white:after{border-color:transparent transparent transparent #f1f1f1}.wf-tooltip-left:after{top:50%;left:100%;margin-top:-5px;border-width:5px;border-color:transparent transparent transparent #000000}.wf-tooltip-right.white:after{border-color:transparent #f1f1f1 transparent transparent}.wf-tooltip-right:after{top:50%;right:100%;margin-top:-5px;border-width:5px;border-color:transparent #000000 transparent transparent}.wf-tooltip-bottom-right:after{bottom:100%;left:100%;margin-left:-20px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom-right.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-bottom-left:after{bottom:100%;left:0;margin-left:10px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom-left.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-top-left:after{top:100%;left:0;margin-left:10px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top-left.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip-top-right:after{top:100%;left:100%;margin-left:-5px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top-right.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip:after{content:\"\";position:absolute;border-style:solid}.wf-tooltip span.within{font-size:80%;display:block;width:100%}.wf-tooltip .small{display:block;font-size:10px}.wf-tooltip .within-box{background:#f1f1f1;border-radius:2px;color:#042e7d!important;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 2px;margin-right:2px}.wf-tooltip-show{pointer-events:none;opacity:1;z-index:2147483001}\n"] }]
+            args: [{ selector: 'app-workflow-case', standalone: false, template: "<div *ngIf=\"!showSmiley\" class=\"workflow-case\">\n  <app-case-type\n    *ngIf=\"mode !== 'EDIT' && caseTypePermission\"\n    [fieldSelected]=\"fieldClicked\"\n    (caseTypeChange)=\"onCaseTypeChange($event)\"\n  ></app-case-type>\n  <app-linked-responsibilities\n    *ngIf=\"['COMPLIANCE_WORKROOM', 'ASSESSMENT'].includes(openedFrom)\"\n    [payload]=\"\n      caseTypeSelected === caseType.REPORT_CASE ? payload : addToCasePayload\n    \"\n    [openedFrom]=\"openedFrom\"\n    [fieldSelected]=\"fieldClicked\"\n    [responsibilityData]=\"responsibilityData\"\n    (fieldClicked)=\"onFieldClicked($event)\"\n  ></app-linked-responsibilities>\n  <app-linked-assessment\n    *ngIf=\"openedFrom === 'ASSESSMENT'\"\n    [payload]=\"payload\"\n    [openedFrom]=\"openedFrom\"\n    [fieldSelected]=\"fieldClicked\"\n    [responsibilityData]=\"responsibilityData\"\n    [assessmentQuestion]=\"assessmentQuestion\"\n    (fieldClicked)=\"onFieldClicked($event)\"\n  ></app-linked-assessment>\n  <app-case-details\n    [payload]=\"\n      caseTypeSelected === caseType.REPORT_CASE ? payload : addToCasePayload\n    \"\n    [fieldSelected]=\"fieldClicked\"\n    [validationError]=\"validationError\"\n    [caseTypeSelected]=\"caseTypeSelected\"\n  ></app-case-details>\n  <span\n    *ngIf=\"caseTypeSelected === caseType.ADD_CASE_TO_WORKFLOW\"\n    class=\"head-label vx-fs-10 vx-fw-500 vx-txt-white vx-tt-uppercase vx-pl-1 vx-pr-1 vx-lh-4\"\n  >\n    CASE DETAILS\n  </span>\n  <app-information-block\n    *ngIf=\"caseTypeSelected === caseType.ADD_CASE_TO_WORKFLOW\"\n  ></app-information-block>\n  <app-rc-details\n    [payload]=\"\n      caseTypeSelected === caseType.REPORT_CASE ? payload : addToCasePayload\n    \"\n    [fieldSelected]=\"fieldClicked\"\n    [caseTypeSelected]=\"caseTypeSelected\"\n    [validationError]=\"validationError\"\n    [initialSelection]=\"\n      caseTypeSelected === caseType.REPORT_CASE\n        ? payload?.rc_details\n        : addToCasePayload?.rc_details\n    \"\n    [mode]=\"mode\"\n    [workflowType]=\"workflowType\"\n    (fieldClicked)=\"onFieldClicked($event)\"\n    (onRcChange)=\"onRcChange($event)\"\n    (filterDeselector)=\"pickerToggle($event)\"\n  ></app-rc-details>\n  <app-case-type-dropdown\n    [payload]=\"\n      caseTypeSelected === caseType.REPORT_CASE ? payload : addToCasePayload\n    \"\n    [fieldSelected]=\"fieldClicked\"\n    [validationError]=\"validationError\"\n    [initialSelection]=\"\n      caseTypeSelected === caseType.REPORT_CASE\n        ? payload?.case_type\n        : addToCasePayload?.case_type\n    \"\n    [mode]=\"mode\"\n    [caseTypeSelected]=\"caseTypeSelected\"\n    [workflowType]=\"workflowType\"\n    (onCaseTypeChange)=\"onCaseTypeDropdownChange($event)\"\n    (onCaseTypeLoading)=\"onCaseLoader($event, 'type')\"\n  ></app-case-type-dropdown>\n  <app-case-category\n    [payload]=\"\n      caseTypeSelected === caseType.REPORT_CASE ? payload : addToCasePayload\n    \"\n    [fieldSelected]=\"fieldClicked\"\n    [caseTypeSelected]=\"caseTypeSelected\"\n    [initialSelection]=\"\n      caseTypeSelected === caseType.REPORT_CASE\n        ? payload?.category\n        : addToCasePayload?.category\n    \"\n    [initialAdditionalSelection]=\"\n      caseTypeSelected === caseType.REPORT_CASE\n        ? payload?.additional_category\n        : addToCasePayload?.additional_category\n    \"\n    [mode]=\"mode\"\n    [workflowType]=\"workflowType\"\n    (onCategoryChange)=\"onCategoryChange($event)\"\n    (fieldClicked)=\"onFieldClicked($event)\"\n    (filterDeselector)=\"pickerToggle($event)\"\n  ></app-case-category>\n  <app-report-date\n    [payload]=\"\n      caseTypeSelected === caseType.REPORT_CASE ? payload : addToCasePayload\n    \"\n    [fieldSelected]=\"fieldClicked\"\n    [validationError]=\"validationError\"\n    (fieldClicked)=\"onFieldClicked($event)\"\n  ></app-report-date>\n  <app-case-priority\n    [payload]=\"\n      caseTypeSelected === caseType.REPORT_CASE ? payload : addToCasePayload\n    \"\n    [fieldSelected]=\"fieldClicked\"\n    [caseTypeSelected]=\"caseTypeSelected\"\n    [validationError]=\"validationError\"\n    [initialSelection]=\"\n      caseTypeSelected === caseType.REPORT_CASE\n        ? payload?.priority\n        : addToCasePayload?.priority\n    \"\n    [mode]=\"mode\"\n    [workflowType]=\"workflowType\"\n    (onPriorityChange)=\"onPriorityChange($event)\"\n    (onPriorityLoader)=\"onCaseLoader($event, 'priority')\"\n  ></app-case-priority>\n  <ng-template #supportingDocumentsBlock let-docs=\"docs\">\n    <app-field-holder\n      [image]=\"ASSETS.format_evidence\"\n      [disabled]=\"fieldSelector?.includes(fieldClicked)\"\n      [checked]=\"docs?.length\"\n    >\n      <ng-container field>\n        <app-vc-label\n          label\n          [labelText]=\"reportTexts?.case_details?.attachments?.title\"\n        ></app-vc-label>\n        <app-format-and-evidence\n          (updateFiles)=\"saveSupportingDocument($event)\"\n          [mode]=\"'reportACase'\"\n          [formatEvidanceData]=\"docs\"\n        ></app-format-and-evidence>\n      </ng-container>\n    </app-field-holder>\n  </ng-template>\n  <ng-container\n    *ngIf=\"caseTypeSelected === caseType.ADD_CASE_TO_WORKFLOW\"\n    [ngTemplateOutlet]=\"supportingDocumentsBlock\"\n    [ngTemplateOutletContext]=\"{ docs: addToCasePayload?.supporting_documents }\"\n  ></ng-container>\n  <span\n    *ngIf=\"caseTypeSelected === caseType.ADD_CASE_TO_WORKFLOW\"\n    class=\"head-label vx-fs-10 vx-fw-500 vx-txt-white vx-tt-uppercase vx-pl-1 vx-pr-1 vx-lh-4\"\n  >\n    USER DETAILS\n  </span>\n  <app-case-owners\n    *ngIf=\"caseTypeSelected === caseType.ADD_CASE_TO_WORKFLOW\"\n    [payload]=\"addToCasePayload\"\n    [initialSelection]=\"addToCasePayload?.caseToWorkflow?.owners\"\n    [workflowId]=\"addToCasePayload?.caseToWorkflow?.workflow_id\"\n    [fieldSelected]=\"fieldClicked\"\n    [validationError]=\"validationError\"\n    [mode]=\"mode\"\n    (fieldClicked)=\"onFieldClicked($event)\"\n    (filterDeselector)=\"pickerToggle($event)\"\n  ></app-case-owners>\n  <app-case-assignees\n    *ngIf=\"caseTypeSelected === caseType.ADD_CASE_TO_WORKFLOW\"\n    [payload]=\"addToCasePayload\"\n    [fieldSelected]=\"fieldClicked\"\n    [initialSelection]=\"addToCasePayload?.caseToWorkflow\"\n    [userList]=\"userList\"\n    [groupList]=\"groupList\"\n    [validationError]=\"validationError\"\n    (fieldClicked)=\"onFieldClicked($event)\"\n    (filterDeselector)=\"pickerToggle($event)\"\n  ></app-case-assignees>\n  <ng-container\n    *ngIf=\"caseTypeSelected === caseType.REPORT_CASE\"\n    [ngTemplateOutlet]=\"supportingDocumentsBlock\"\n    [ngTemplateOutletContext]=\"{ docs: payload?.supporting_documents }\"\n  ></ng-container>\n  <span\n    *ngIf=\"caseTypeSelected === caseType.ADD_CASE_TO_WORKFLOW\"\n    class=\"head-label vx-fs-10 vx-fw-500 vx-txt-white vx-tt-uppercase vx-pl-1 vx-pr-1 vx-lh-4 vx-mb-4\"\n  >\n    CASE RESOLUTION DETAILS\n  </span>\n  <app-case-resolution-deadline\n    *ngIf=\"caseTypeSelected === caseType.ADD_CASE_TO_WORKFLOW\"\n    [payload]=\"addToCasePayload\"\n    [userList]=\"userList\"\n    [groupList]=\"groupList\"\n    [initialSelection]=\"addToCasePayload?.caseToWorkflow\"\n    [fieldSelected]=\"fieldClicked\"\n    [mode]=\"mode\"\n    [caseId]=\"caseId\"\n    (fieldClicked)=\"onFieldClicked($event)\"\n    [validationError]=\"validationError\"\n    (filterDeselector)=\"pickerToggle($event)\"\n  ></app-case-resolution-deadline>\n  <span\n    *ngIf=\"\n      caseTypeSelected === caseType.ADD_CASE_TO_WORKFLOW &&\n      displayAdditionalOptions\n    \"\n    class=\"head-label vx-fs-10 vx-fw-500 vx-txt-white vx-tt-uppercase vx-pl-1 vx-pr-1 vx-lh-4\"\n  >\n    ADDITIONAL OPTIONS\n  </span>\n  <!-- Exception Type -->\n  <app-field-holder\n    *ngIf=\"\n      additionalOptionStatus.EXCEPTION_TYPE &&\n      caseTypeSelected === caseType.ADD_CASE_TO_WORKFLOW\n    \"\n    [scrollToBottom]=\"scrollToBottom\"\n    [active]=\"false\"\n    [disabled]=\"fieldSelector?.includes(fieldClicked)\"\n    [checked]=\"addToCasePayload?.caseToWorkflow?.exception_type\"\n    [image]=\"ASSETS.objectives\"\n  >\n    <ng-container field>\n      <span class=\"vx-control-panel\">Exception Type</span>\n      <app-cs-radio\n        class=\"main-filed\"\n        [value]=\"exceptionType.DESIGN_EXCEPTION\"\n        name=\"exception-type\"\n        [checked]=\"\n          addToCasePayload?.caseToWorkflow?.exception_type ===\n          exceptionType.DESIGN_EXCEPTION\n        \"\n        (checkedEvent)=\"setException(exceptionType.DESIGN_EXCEPTION)\"\n        >Design Exception\n      </app-cs-radio>\n      <app-cs-radio\n        class=\"main-filed\"\n        [value]=\"exceptionType.EFFECTIVENESS_EXCEPTION\"\n        name=\"exception-type\"\n        [checked]=\"\n          addToCasePayload?.caseToWorkflow?.exception_type ===\n          exceptionType.EFFECTIVENESS_EXCEPTION\n        \"\n        (checkedEvent)=\"setException(exceptionType.EFFECTIVENESS_EXCEPTION)\"\n        >Effectiveness Exception\n      </app-cs-radio>\n    </ng-container>\n  </app-field-holder>\n\n  <!-- Associated Risks -->\n  <div\n    [appScrollInView]=\"scrollToBottom\"\n    class=\"form-group-row\"\n    *ngIf=\"additionalOptionStatus.ASSOCIATED_RISKS\"\n    [class.disabled]=\"fieldSelector?.includes(fieldClicked)\"\n  >\n    <div\n      class=\"left\"\n      [class.checked]=\"addToCasePayload?.caseToWorkflow?.associated_risks?.text\"\n    >\n      <img\n        [src]=\"ASSETS.associated_risks\"\n        alt=\"im\"\n        *ngIf=\"\n          !addToCasePayload?.caseToWorkflow?.associated_risks?.text?.trim()\n            ?.length\n        \"\n      />\n\n      <svg\n        class=\"checkIcon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 52 52\"\n        *ngIf=\"\n          addToCasePayload?.caseToWorkflow?.associated_risks?.text?.trim()\n            .length\n        \"\n      >\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path\n          class=\"checkIcon__check\"\n          fill=\"none\"\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n        />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <span class=\"vx-control-panel\">Associated Risks </span>\n        <ng-container\n          *ngIf=\"\n            addToCasePayload?.caseToWorkflow?.associated_risks?.attachments\n              ?.length > 0\n          \"\n        >\n          <div\n            class=\"file-list\"\n            *ngFor=\"\n              let uploadingFile of addToCasePayload?.caseToWorkflow\n                ?.associated_risks?.attachments\n            \"\n          >\n            <div class=\"file-container\">\n              <span class=\"file-name\">{{ uploadingFile }}</span>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container\n          *ngIf=\"\n            addToCasePayload?.caseToWorkflow?.associated_risks?.attachments\n              ?.length > 0\n          \"\n        >\n          <div\n            class=\"file-list\"\n            *ngFor=\"\n              let file of addToCasePayload?.caseToWorkflow?.associated_risks\n                ?.attachments\n            \"\n          >\n            <div class=\"file-container\">\n              <span class=\"file-name\">{{ file?.name }}</span>\n              <button>\n                <i class=\"icons\" (click)=\"deleteFile(file, 'ASSOCIATED_RISKS')\"\n                  >&#xe90d;</i\n                >\n              </button>\n            </div>\n          </div>\n        </ng-container>\n        <vcomply-editor\n          [(ngModel)]=\"addToCasePayload.caseToWorkflow.associated_risks.text\"\n          [editorConfig]=\"{\n            mode: 'prime',\n            colorPalette: true,\n            link: true,\n            file: false,\n            placeholder: 'Associated Risks'\n          }\"\n          (clickOutside)=\"checkDescription()\"\n          (sendSavedFiles)=\"selectFile('ASSOCIATED_RISKS', $event)\"\n        ></vcomply-editor>\n      </div>\n    </div>\n  </div>\n\n  <!-- Overseer -->\n  <div\n    [appScrollInView]=\"scrollToBottom\"\n    class=\"form-group-row\"\n    [class.active]=\"false\"\n    *ngIf=\"additionalOptionStatus.OVERSIGHT\"\n    [class.disabled]=\"fieldSelector?.includes(fieldClicked)\"\n  >\n    <div\n      class=\"left\"\n      [class.checked]=\"\n        addToCasePayload?.caseToWorkflow?.oversights?.cc_ids?.length ||\n        addToCasePayload?.caseToWorkflow?.oversights?.cc_failures_ids?.length\n      \"\n    >\n      <img\n        [src]=\"ASSETS.oversight\"\n        alt=\"\"\n        *ngIf=\"\n          !(\n            addToCasePayload?.caseToWorkflow?.oversights?.cc_ids?.length ||\n            addToCasePayload?.caseToWorkflow?.oversights?.cc_failures_ids\n              ?.length\n          )\n        \"\n      />\n\n      <svg\n        class=\"checkIcon\"\n        *ngIf=\"\n          addToCasePayload?.caseToWorkflow?.oversights?.cc_ids?.length ||\n          addToCasePayload?.caseToWorkflow?.oversights?.cc_failures_ids?.length\n        \"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 52 52\"\n      >\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path\n          class=\"checkIcon__check\"\n          fill=\"none\"\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n        />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <span class=\"vx-control-panel\">Oversight</span>\n        <div class=\"select\" *ngIf=\"!selectedOversights?.cc_list?.length\">\n          <input\n            type=\"text\"\n            (click)=\"setActiveFieldSelector('CASE_CC', 'CASE_CC')\"\n            placeholder=\"Who should have oversight of this case?\"\n            readonly\n          />\n        </div>\n\n        <div class=\"selected\" *ngIf=\"selectedOversights?.cc_list?.length\">\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n            <i\n              class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n              (click)=\"deleteItem('CASE_CC', selectedOversights?.cc_list[0])\"\n              >&#xe9ae;</i\n            >\n            <span\n              class=\"chipName vx-fs-11 vx-label-txt\"\n              [appTooltip]=\"selectedOversights?.cc_list[0]?.employee_name\"\n              placement=\"bottom-left\"\n              delay=\"0\"\n              type=\"black\"\n              [tooltipMandatory]=\"false\"\n              >{{ selectedOversights?.cc_list[0]?.employee_name }}</span\n            >\n            <button\n              class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n              appPopover\n              (click)=\"CC.popover()\"\n              placement=\"right\"\n              *ngIf=\"selectedOversights?.cc_list?.length > 1\"\n            >\n              +{{ selectedOversights?.cc_list?.slice(1).length }}\n            </button>\n          </div>\n          <button\n            *ngIf=\"activeField !== 'CASE_CC'\"\n            class=\"edit\"\n            type=\"button\"\n            (click)=\"setActiveFieldSelector('CASE_CC', 'CASE_CC')\"\n          >\n            <i class=\"icons\">&#xe9ba;</i>Edit\n          </button>\n        </div>\n        <div\n          class=\"select\"\n          *ngIf=\"\n            !selectedOversights?.cc_failures_list ||\n            selectedOversights?.cc_failures_list?.length === 0\n          \"\n        >\n          <input\n            (click)=\"setActiveFieldSelector('CASE_FCC', 'CASE_FCC')\"\n            type=\"text\"\n            placeholder=\"Who should be notified if the case is not resolved?\"\n            readonly\n          />\n        </div>\n\n        <div\n          class=\"selected\"\n          *ngIf=\"selectedOversights?.cc_failures_list?.length\"\n        >\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n            <i\n              class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n              (click)=\"\n                deleteItem('CASE_FCC', selectedOversights?.cc_failures_list[0])\n              \"\n              >&#xe9ae;</i\n            >\n            <span\n              class=\"chipName vx-fs-11 vx-label-txt\"\n              [appTooltip]=\"\n                selectedOversights?.cc_failures_list[0]?.employee_name\n              \"\n              placement=\"bottom-left\"\n              delay=\"0\"\n              type=\"black\"\n              [tooltipMandatory]=\"false\"\n              >{{\n                selectedOversights?.cc_failures_list[0]?.employee_name\n              }}</span\n            >\n            <button\n              class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n              appPopover\n              (click)=\"FCC.popover()\"\n              placement=\"right\"\n              *ngIf=\"selectedOversights?.cc_failures_list?.length > 1\"\n            >\n              +{{ selectedOversights?.cc_failures_list?.slice(1)?.length }}\n            </button>\n          </div>\n          <button\n            *ngIf=\"activeField !== 'CASE_FCC'\"\n            class=\"edit\"\n            type=\"button\"\n            (click)=\"setActiveFieldSelector('CASE_FCC', 'CASE_FCC')\"\n          >\n            <i class=\"icons\">&#xe9ba;</i>Edit\n          </button>\n        </div>\n      </div>\n      <app-popover #CC [dontCloseonClick]=\"true\">\n        <div class=\"wf-action-list\">\n          <ul class=\"action-item\">\n            <li\n              *ngFor=\"\n                let cc of selectedOversights?.cc_list | slice : 1;\n                let j = index\n              \"\n            >\n              <div class=\"avatar-card\">\n                <span class=\"value\">\n                  <i class=\"icons\" (click)=\"deleteItem('CASE_CC', cc)\"\n                    >&#xe90d;</i\n                  >\n                  {{ cc?.employee_name }}\n                </span>\n              </div>\n            </li>\n          </ul>\n        </div>\n      </app-popover>\n      <app-popover #FCC [dontCloseonClick]=\"true\">\n        <div class=\"wf-action-list\">\n          <ul class=\"action-item\">\n            <li\n              *ngFor=\"\n                let fcc of selectedOversights?.cc_failures_list | slice : 1;\n                let j = index\n              \"\n            >\n              <div class=\"avatar-card\">\n                <span class=\"value\">\n                  <i class=\"icons\" (click)=\"deleteItem('CASE_FCC', fcc)\"\n                    >&#xe90d;</i\n                  >\n                  {{ fcc?.employee_name }}\n                </span>\n              </div>\n            </li>\n          </ul>\n        </div>\n      </app-popover>\n    </div>\n  </div>\n\n  <!-- Evidence -->\n  <div\n    [appScrollInView]=\"scrollToBottom\"\n    class=\"form-group-row\"\n    *ngIf=\"additionalOptionStatus.EVIDENCE\"\n    [class.disabled]=\"fieldSelector?.includes(fieldClicked)\"\n  >\n    <div class=\"left\" [class.checked]=\"true\">\n      <svg\n        class=\"checkIcon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 52 52\"\n      >\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path\n          class=\"checkIcon__check\"\n          fill=\"none\"\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n        />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <span class=\"vx-control-panel\">Evidence</span>\n        <div class=\"upload-format\">\n          <span class=\"text\"\n            >Do you want evidence of completion of the case to be\n            uploaded?</span\n          >\n          <div class=\"radio-group\">\n            <app-cs-radio\n              [name]=\"'file-evidence'\"\n              [value]=\"1\"\n              [checked]=\"addToCasePayload?.caseToWorkflow?.evidence_enabled\"\n              (checkedEvent)=\"setEvidence(true)\"\n              >Yes\n            </app-cs-radio>\n            <app-cs-radio\n              [name]=\"'file-evidence'\"\n              [value]=\"0\"\n              [checked]=\"!addToCasePayload?.caseToWorkflow?.evidence_enabled\"\n              (checkedEvent)=\"setEvidence(false)\"\n              >No\n            </app-cs-radio>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- Recommended Actions -->\n  <div\n    class=\"form-group-row\"\n    *ngIf=\"additionalOptionStatus.RECOMMENDED_ACTIONS\"\n    [class.disabled]=\"fieldSelector?.includes(fieldClicked)\"\n  >\n    <div\n      class=\"left\"\n      [class.checked]=\"addToCasePayload?.caseToWorkflow?.recommendations?.text\"\n    >\n      <img\n        [src]=\"ASSETS.recommended_action\"\n        alt=\"im\"\n        *ngIf=\"\n          !(\n            addToCasePayload?.caseToWorkflow?.recommendations?.text\n            | spaceBreaker\n          )?.length\n        \"\n      />\n      <svg\n        class=\"checkIcon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 52 52\"\n        *ngIf=\"\n          (\n            addToCasePayload?.caseToWorkflow?.recommendations?.text\n            | spaceBreaker\n          )?.length > 0\n        \"\n      >\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path\n          class=\"checkIcon__check\"\n          fill=\"none\"\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n        />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <span class=\"vx-control-panel\">Recommended Actions</span>\n        <ng-container\n          *ngIf=\"\n            addToCasePayload?.caseToWorkflow?.recommendations?.attachments\n              ?.length > 0\n          \"\n        >\n          <div\n            class=\"file-list\"\n            *ngFor=\"\n              let uploadingFile of addToCasePayload?.caseToWorkflow\n                ?.recommendations?.attachments\n            \"\n          >\n            <div class=\"file-container\">\n              <span class=\"file-name\">{{ uploadingFile }}</span>\n            </div>\n            <app-line-loader [loaderHeight]=\"2\"></app-line-loader>\n          </div>\n        </ng-container>\n        <ng-container\n          *ngIf=\"\n            addToCasePayload?.caseToWorkflow?.recommendations?.attachments\n              ?.length > 0\n          \"\n        >\n          <div\n            class=\"file-list\"\n            *ngFor=\"\n              let file of addToCasePayload?.caseToWorkflow?.recommendations\n                ?.attachments\n            \"\n          >\n            <div class=\"file-container\">\n              <span class=\"file-name\">{{ file?.name }}</span>\n              <button>\n                <i\n                  class=\"icons\"\n                  (click)=\"deleteFile(file, 'RECOMMENDED_ACTIONS')\"\n                  >&#xe90d;</i\n                >\n              </button>\n            </div>\n          </div>\n        </ng-container>\n        <vcomply-editor\n          [(ngModel)]=\"addToCasePayload.caseToWorkflow.recommendations.text\"\n          [editorConfig]=\"{\n            mode: 'prime',\n            colorPalette: true,\n            link: true,\n            file: true,\n            placeholder: 'Recommended actions'\n          }\"\n          (ngModelChange)=\"\n            addToCasePayload?.caseToWorkflow?.recommendations?.text?.trim()\n              ?.length > 0\n              ? removeError('issueRecommendation')\n              : null\n          \"\n          (clickOutside)=\"checkDescription()\"\n          (sendSavedFiles)=\"selectFile('RECOMMENDED_ACTIONS', $event)\"\n        ></vcomply-editor>\n      </div>\n    </div>\n  </div>\n  <!-- Risk Classification -->\n  <div\n    *ngIf=\"additionalOptionStatus.RISK_CLASSIFICATION\"\n    class=\"form-group-row\"\n    id=\"risk_classification\"\n    [class.disabled]=\"fieldSelector?.includes(fieldClicked)\"\n  >\n    <div class=\"left\" [class.checked]=\"addToCasePayload.risk_class\">\n      <img [src]=\"ASSETS.risks\" alt=\"im\" *ngIf=\"!addToCasePayload.risk_class\" />\n\n      <svg\n        class=\"checkIcon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 52 52\"\n        *ngIf=\"addToCasePayload.risk_class\"\n      >\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path\n          class=\"checkIcon__check\"\n          fill=\"none\"\n          d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n        />\n      </svg>\n    </div>\n\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <span class=\"vx-control-panel\">Risk Classification</span>\n        <div class=\"classification\">\n          <label\n            class=\"low\"\n            *ngFor=\"let class of riskClassification; let rcIdx = index\"\n            [ngClass]=\"[class.class]\"\n            [attr.for]=\"'workflow-case-risk-class-' + rcIdx\"\n          >\n            <input\n              [id]=\"'workflow-case-risk-class-' + rcIdx\"\n              type=\"radio\"\n              name=\"classification\"\n              [value]=\"class.value\"\n              [checked]=\"addToCasePayload.risk_class === class.value\"\n              [(ngModel)]=\"addToCasePayload.risk_class\"\n            />\n            <span>{{ class.name }}</span>\n          </label>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<app-loader-inline *ngIf=\"checkloader\"></app-loader-inline>\n<app-checkbox-list\n  [config]=\"oversight_config\"\n  [twoColumn]=\"true\"\n  [itemsList]=\"userList\"\n  [selectedItems]=\"selectedOversights?.cc_list\"\n  [identifierKey]=\"'employee_email'\"\n  [displayKey]=\"'employee_name'\"\n  [tooltipKey]=\"'employee_email'\"\n  *ngIf=\"activeSelector === 'CASE_CC'\"\n  (saveList)=\"selectorAction($event, 'CASE_CC')\"\n  (closeList)=\"fieldDeselector('CASE_CC')\"\n  [loaded]=\"loader.userListLoader\"\n></app-checkbox-list>\n\n<app-checkbox-list\n  [config]=\"oversight_config\"\n  [twoColumn]=\"true\"\n  [itemsList]=\"userList\"\n  [selectedItems]=\"selectedOversights?.cc_failures_list\"\n  [identifierKey]=\"'employee_email'\"\n  [displayKey]=\"'employee_name'\"\n  [tooltipKey]=\"'employee_email'\"\n  *ngIf=\"activeSelector === 'CASE_FCC'\"\n  (saveList)=\"selectorAction($event, 'CASE_FCC')\"\n  (closeList)=\"fieldDeselector('CASE_FCC')\"\n  [loaded]=\"loader.userListLoader\"\n></app-checkbox-list>\n\n<app-smiley-dialog-inline\n  *ngIf=\"showSmiley\"\n  [message]=\"smileyMessage\"\n  [actionButtons]=\"actionButtons\"\n  (action)=\"smileyActions($event)\"\n  (closeSmiley)=\"closeSmiley($event)\"\n></app-smiley-dialog-inline>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.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/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/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\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::ng-deep .workflow-case{display:block;position:relative}::ng-deep .workflow-case app-case-type{cursor:pointer}::ng-deep .workflow-case app-case-details app-field-holder app-vc-input input{cursor:text;z-index:1000}::ng-deep .workflow-case app-report-date .date-time-picker{pointer-events:auto!important;z-index:1}::ng-deep .workflow-case app-rc-details app-cs-switch .cs-switch .switch{pointer-events:none!important;opacity:.5!important}::ng-deep .workflow-case .head-label{background:#565a6f;border-radius:.125rem;height:1rem;position:relative}::ng-deep .workflow-case .head-label:before{background:#e3e3e9;content:\"\";position:absolute;top:7px;left:-40px;width:500px;height:1px;z-index:-1}\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\";@import\"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700&display=swap\";::-webkit-scrollbar-track{background-color:#f1f1f1;position:absolute}::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}button{font-family:Poppins,sans-serif}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;font-size:13px;color:#747576;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField::placeholder{font-size:13px;color:#747576}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxEnable.withBtn:after{display:none}::ng-deep .selectBoxEnable.withBtn button.setBtn{background:transparent;border-radius:0;border:none;min-width:98px}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer .chipName.no-width{max-width:unset}::ng-deep .chipContainer .chipName.full-width{max-width:25rem}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}::ng-deep .workflowLavel{background:#f1f1f1;border-radius:.125rem;color:#042e7d;min-width:1rem;height:1rem}::ng-deep .reviewSelection{border-radius:.25rem;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep .reviewSelection:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectButton{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectButton:hover,::ng-deep .selectButton:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep button.createNewBtn{background:transparent;border-radius:0;border:none}::ng-deep .vx-form-group{display:block;position:relative;margin-bottom:20px}::ng-deep .vx-form-group:after{content:\"\";display:block;clear:both}::ng-deep .vx-form-group .select{position:relative}::ng-deep .vx-form-group .select:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#707070;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .vx-form-group .select input{cursor:pointer;padding-right:30px!important}::ng-deep .vx-form-group .select .custom-input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;outline:none;padding:3px 12px;line-height:16px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .vx-form-group .select .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:13px;width:94%;display:block;pointer-events:none;opacity:.8}::ng-deep .vx-form-group .select .custom-input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .vx-form-group .select .custom-input.frequency-custom-input{padding-right:108px;display:flex;align-items:center}::ng-deep .vx-form-group .select+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .select+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .select+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .select~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .select.button-sec:after{display:none}::ng-deep .vx-form-group .select.button-sec button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;position:absolute;top:12px;right:8px;padding:0;margin:0}::ng-deep .vx-form-group .select+.vx-control-panel{margin-top:8px}::ng-deep .vx-form-group .select+.selected{margin-top:8px}::ng-deep .vx-form-group .select.select{margin-top:8px}::ng-deep .vx-form-group .upload-format{border:1px solid #dbdbdb;border-radius:4px;padding:8px 12px;display:block}::ng-deep .vx-form-group .upload-format span.text{line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:block;margin-bottom:6px}::ng-deep .vx-form-group .upload-format .radio-group{display:flex}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio{display:inline-block}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;margin-left:8px}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio+app-cs-radio{margin-left:12px}::ng-deep .vx-form-group .upload-format~.upload-format{margin-top:4px}::ng-deep .vx-form-group .form-tab{display:flex;justify-content:flex-start}::ng-deep .vx-form-group .form-tab button{background:transparent;color:#161b2f;font-size:11px;line-height:16px;text-transform:uppercase;cursor:pointer;padding:8px 8px 8px 0;border:none;outline:none;font-weight:500}::ng-deep .vx-form-group .form-tab button:disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .form-tab button+button{padding:8px}::ng-deep .vx-form-group .form-tab button.active{color:#1e5dd3}::ng-deep .vx-form-group .tab-group{border:1px solid #dbdbdb;border-radius:4px;padding:0;display:block;position:relative;transition:all .2s ease-in-out}::ng-deep .vx-form-group .tab-group:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group .tab-group .upload-file{padding:16px 62px 16px 24px;display:flex;align-items:center;justify-content:space-between}::ng-deep .vx-form-group .tab-group .upload-file .image{width:80px}::ng-deep .vx-form-group .tab-group .upload-file .browse span{display:inline-block;font-size:12px;color:#747576;line-height:16px;padding:0 4px}::ng-deep .vx-form-group .tab-group .upload-file .browse .label{font-size:11px;color:#1e5dd3;line-height:16px;font-weight:600;text-transform:uppercase;margin:0;padding:0}::ng-deep .vx-form-group .tab-group .upload-file .browse .label input{opacity:0;position:absolute;margin:0;padding:0;inset:0;cursor:pointer;width:100%}::ng-deep .vx-form-group .tab-group.active{border-color:#1e5dd3}::ng-deep .vx-form-group .tab-group.uploaded{margin-top:4px}::ng-deep .vx-form-group .tab-group.uploaded .upload-file{padding:8px 0!important;text-align:center}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .image{display:none}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .browse{width:100%;text-align:center}::ng-deep .vx-form-group .tab-group+label.vx-form-group{margin-top:8px;margin-bottom:4px}::ng-deep .vx-form-group .file-list{background:#fbfbfb;border:1px solid #f1f1f1;border-radius:4px;padding:12px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;position:relative}::ng-deep .vx-form-group .file-list span.file-name{color:#747576;line-height:16px;font-size:11px;font-weight:400;cursor:pointer;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .vx-form-group .file-list .button-group{display:flex}::ng-deep .vx-form-group .file-list button{font-size:12px;color:#eb2424;cursor:pointer;display:flex;padding:0;border:none;outline:none;background:transparent}::ng-deep .vx-form-group .file-list button.edit{color:#1e5dd3}::ng-deep .vx-form-group .file-list button+button{margin-left:16px}::ng-deep .vx-form-group .file-list+.file-list{margin-top:4px}::ng-deep .vx-form-group .file-list .file-container{display:flex;justify-content:space-between;width:100%}::ng-deep .vx-form-group .file-list.policy{background:#fff}::ng-deep .vx-form-group .file-list cs-select{position:relative;margin-top:8px;width:100%}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group input.value{height:32px!important;font-size:13px!important}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group i{right:12px!important;top:12px!important}::ng-deep .vx-form-group .file-list app-line-loader{display:block;position:absolute;left:10px;right:10px;bottom:0}::ng-deep .vx-form-group span.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 span.vx-control-panel.custom-tag{font-size:10px}::ng-deep .vx-form-group span.vx-control-panel.vx-mt-8{margin-top:8px}::ng-deep .vx-form-group span.vx-control-panel span.required{color:#eb2424;font-size:14px;font-weight:500;position:relative;top:-2px}::ng-deep .vx-form-group span.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 span.vx-control-panel app-cs-switch{float:right;display:block}::ng-deep .vx-form-group span.vx-control-panel i{margin-left:8px;font-size:12px;color:#1e5dd3;cursor:pointer;position:relative;top:1px}::ng-deep .vx-form-group span.vx-control-panel i.depreciation-icon{color:#e4b700;font-size:16px;position:relative;top:3px}::ng-deep .vx-form-group span.vx-control-panel .checkpoint-version{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:10px;font-weight:600;line-height:14px;margin-left:4px;padding:0 2px}::ng-deep .vx-form-group input[type=text],::ng-deep .vx-form-group .input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;outline:none;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::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;-moz-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:#fff;padding:8px 12px;display:flex;justify-content:space-between}::ng-deep .vx-form-group .classification label{margin:0 4px 0 0;width:100%;position:relative;z-index:1}::ng-deep .vx-form-group .classification label span{display:block;width:100%;height:24px;border:1px solid #f1f1f1;border-radius:2px;line-height:24px;font-size:10px;text-align:center;color:#747576;font-weight:500;position:relative;text-transform:uppercase}::ng-deep .vx-form-group .classification label span:before{height:2px;content:\"\";top:0;right:0;left:0;border-radius:2px;position:absolute;transition:all .2s ease-in-out}::ng-deep .vx-form-group .classification label input{opacity:0;position:absolute;inset:0;margin:0;padding:0;width:100%;height:100%;cursor:pointer;z-index:1}::ng-deep .vx-form-group .classification label input:checked+span{color:#fff}::ng-deep .vx-form-group .classification label input:checked+span:before{bottom:0;height:100%;z-index:-1}::ng-deep .vx-form-group .classification label.low span:before{background:#34aa44}::ng-deep .vx-form-group .classification label.low-med span:before{background:#f2bf19}::ng-deep .vx-form-group .classification label.med-high span:before{background:#f29619}::ng-deep .vx-form-group .classification label.high span:before{background:#eb2424}::ng-deep .vx-form-group .classification label:last-of-type{margin-right:0}::ng-deep .vx-form-group .input{display:flex;align-items:center}::ng-deep .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;padding:8px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:flex;align-items:center;position:relative;justify-content:space-between}::ng-deep .vx-form-group .selected.first-field{z-index:2}::ng-deep .vx-form-group .selected .chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .vx-form-group .selected .chip-container.checkpoints{width:calc(100% - 120px)}::ng-deep .vx-form-group .selected .chip-container span.chip{background:#fff;border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;padding:0 8px;color:#1e5dd3;font-size:12px;display:block;width:auto;max-width:100%;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .vx-form-group .selected .chip-container span.chip.disabled{background:#f1f1f1;box-shadow:none;color:#747576;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .selected .chip-container span.chip i{font-weight:400;margin-right:8px;cursor:pointer;font-size:10px;position:relative;top:1px}::ng-deep .vx-form-group .selected .chip-container span.chip span.step{background:#1e5dd3;border-radius:2px;color:#fff;font-size:9px;line-height:14px;padding:0 4px;font-weight:400;text-align:center;min-width:auto;margin-right:4px}::ng-deep .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question{display:flex;align-items:center;justify-content:space-between;width:100%}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.value{color:#1e5dd3;font-size:12px;font-weight:400;line-height:24px;padding:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 80px)}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.label{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding-left:4px;padding-right:4px;line-height:12px;margin-left:8px}::ng-deep .vx-form-group .selected .chip-container span.value{color:#747576;font-size:13px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 52px);padding:0 4px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text{color:#747576;font-size:10px;font-weight:500;padding:0 8px;width:122px;line-height:14px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first{position:relative;min-width:162px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first:before{background:#f1f1f1;content:\"\";position:absolute;top:0;right:0;height:calc(100% + 12px);width:1px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text .no{color:#1e5dd3}::ng-deep .vx-form-group .selected .chip-container.plus span.chip{max-width:calc(50% - 35px)}::ng-deep .vx-form-group .selected .chip-container.more-one span.chip{max-width:50%}::ng-deep .vx-form-group .selected .chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .vx-form-group .selected .chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:100px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count{border-radius:20px;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .vx-form-group .selected .chip-container .chip-inner i.cross{cursor:pointer;position:relative;top:1px;font-size:8px}::ng-deep .vx-form-group .selected button.count{background:#1e5dd3;border-radius:2px;height:24px;padding:0 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none;color:#fff;font:13px;font-weight:500;line-height:20px;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit{border:none;border-radius:0;background:transparent;outline:none;cursor:pointer;display:block;font-size:11px;font-weight:600;color:#1e5dd3;text-transform:uppercase;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit i{font-weight:400;font-size:8px;margin-right:4px}::ng-deep .vx-form-group .selected button.close-btn{background:transparent;border:none;padding:0;margin-left:8px;font-size:10px;color:#c7381b;display:flex;align-items:center}::ng-deep .vx-form-group .selected .workflow-label{min-width:92px;padding:4px;text-align:center;margin-left:-8px;margin-right:8px;border-right:1px solid #f1f1f1}::ng-deep .vx-form-group .selected .workflow-label p{margin:0;display:block;text-transform:uppercase}::ng-deep .vx-form-group .selected .workflow-label p.title{font-size:9px;line-height:12px;color:#161b2f;font-weight:500}::ng-deep .vx-form-group .selected .workflow-label p.description{font-size:11px;line-height:16px;color:#161b2f;font-weight:600}::ng-deep .vx-form-group .selected .workflow-label+.chip-container{width:calc(100% - 148px)}::ng-deep .vx-form-group .selected+.selected{margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .selected+app-cs-switch.who-toggle label.cs-switch span.value{color:#747576}::ng-deep .vx-form-group .selected+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .selected~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .selected.readOnly{pointer-events:none}::ng-deep .vx-form-group .selected span.chip{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .vx-form-group .select-list{position:absolute;background:#fff;box-shadow:0 0 5px #1e5dd345;top:100%;right:0;left:0;z-index:2}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item{width:100%;padding:12px 16px}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item:hover{background:#f8f8f8}::ng-deep .vx-form-group ::ng-deep vcomply-editor{margin-top:8px;display:block;pointer-events:auto!important;z-index:1}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb}::ng-deep .vx-form-group ::ng-deep 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 ::ng-deep vcomply-editor .editor-container .editable-block ul{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editable-block ul li{list-style:disc}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editable-block ol{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editable-block ol li{list-style:decimal}::ng-deep .vx-form-group ::ng-deep 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 ::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 .vx-form-group ::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .vx-form-group ::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 .vx-form-group ::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 .vx-form-group ::ng-deep vcomply-editor .editor-container:focus-within{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container:focus-within .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container:hover{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container:hover .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group ::ng-deep vcomply-editor+app-cs-switch{margin-top:8px}::ng-deep .vx-form-group app-cs-switch label.cs-switch span.value{font-size:11px;color:#747576;text-transform:uppercase}::ng-deep .vx-form-group app-cs-switch+app-cs-switch{margin-top:8px}::ng-deep .vx-form-group .date-time-picker{display:flex;justify-content:space-between;height:40px;border-radius:4px;border:1px solid #dbdbdb;padding:11px 0;background:#fff}::ng-deep .vx-form-group .date-time-picker:focus-within{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .vx-form-group .date-time-picker .picker-group{width:50%;position:relative;display:flex;align-items:center}::ng-deep .vx-form-group .date-time-picker .picker-group:first-of-type{border-right:1px solid #dbdbdb}::ng-deep .vx-form-group .date-time-picker .picker-group:only-of-type{border:none;width:100%}::ng-deep .vx-form-group .date-time-picker .picker-group input{height:38px;background:transparent;outline:none;line-height:38px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;border:none;padding:0 12px 0 34px}::ng-deep .vx-form-group .date-time-picker .picker-group input:focus,::ng-deep .vx-form-group .date-time-picker .picker-group input:hover{box-shadow:none;border:none}::ng-deep .vx-form-group .date-time-picker .picker-group input::placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input:-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input::-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group i{display:flex;justify-content:center;align-items:center;height:16px;width:12px;position:absolute;left:12px;top:0;color:#747576;font-size:12px;pointer-events:none}::ng-deep .vx-form-group app-cs-radio.main-filed{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;color:#707070}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group app-cs-radio.disabled{pointer-events:none;opacity:.5;filter:grayscale(1);background:#f1f1f1}::ng-deep .vx-form-group .switch-row{display:flex}::ng-deep .vx-form-group .switch-row app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:0;text-transform:uppercase;color:#747576!important}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value i{display:inline-flex;font-size:11px;cursor:pointer;color:#1e5dd3;align-items:center;line-height:16px;margin:0 4px}::ng-deep .vx-form-group .switch-row app-cs-switch+app-cs-switch{margin-left:8px}::ng-deep .vx-form-group .switch-row.align-right{justify-content:flex-end}::ng-deep .vx-form-group .switch-row.align-right label.cs-switch span.value{margin-right:8px}::ng-deep .vx-form-group .risk-type-field{background:#f8f8f8;border:1px solid #dbdbdb;border-radius:4px;height:40px;display:flex;align-items:center;padding:4px;position:relative;z-index:1}::ng-deep .vx-form-group .risk-type-field .type-item{width:50%;position:relative}::ng-deep .vx-form-group .risk-type-field .type-item button{background:transparent;border:none;border-radius:0;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase;width:100%;height:32px;padding:0 12px;text-align:left}::ng-deep .vx-form-group .risk-type-field .type-item button.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item .info{color:#1e5dd3;font-size:12px;position:absolute;top:10px;right:12px;cursor:pointer}::ng-deep .vx-form-group .risk-type-field .type-item .info.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item.active button{color:#1e5dd3!important}::ng-deep .vx-form-group .risk-type-field .type-item:nth-child(2).active~.background-glider{transform:translate(100%)}::ng-deep .vx-form-group .risk-type-field .background-glider{background:#fff;border-radius:4px;box-shadow:0 1px 3px #161b2f26;position:absolute;display:flex;width:212px;height:32px;z-index:-1;transition:.25s ease-out}.left{width:36px;height:36px;margin-top:26px;margin-left:-58px;margin-right:20px;display:flex;justify-content:center;align-items:center;position:relative;z-index:10;border-radius:50%}.left.deadline-completed{margin-top:18px}.left.checked{background:transparent}.left img{width:36px}.left .checkIcon{width:32px;height:32px;background:#fff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}.left .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}.left .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}.right{width:100%}.right span.indicator{position:absolute;top:36px;left:-16px;font-size:12px;color:#f0b819;cursor:pointer}.right app-format-and-evidence~.error-message{position:relative;top:-12px}.form-group-row{display:flex;position:relative;transition:all .2s ease-in-out}.form-group-row.disabled{-webkit-user-select:none;user-select:none;pointer-events:none;filter:grayscale(1);z-index:2}.form-group-row.disabled .left{position:relative}.form-group-row.disabled .left:before{content:\"\";position:absolute;inset:2px 0 0 2px;background:#fff;opacity:.7;border-radius:50%;width:32px;height:32px}.form-group-row.disabled .right{opacity:.3}.form-group-row.active{pointer-events:none;filter:grayscale(0);z-index:2;opacity:1}.form-group-row.active .right .vx-form-group input,.form-group-row.active .right .vx-form-group .custom-input,.form-group-row.active .right .vx-form-group .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}.form-group-row.active .right .vx-form-group .selectBoxEnable.disabled{border-color:#dbdbdb;box-shadow:none}::ng-deep .radio-group-selector app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .radio-group-selector app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .radio-group-selector app-cs-radio label.radio-item .radio,::ng-deep .radio-group-selector app-cs-radio label.radio-item .radiomark{position:absolute!important;top:9px;left:12px}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value{font-size:11px!important;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0!important;max-width:100%!important;font-weight:500!important;color:#707070!important}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value i{font-size:12px;color:#1e5dd3}::ng-deep .radio-group-selector app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}::ng-deep .wf-action-list{width:220px}::ng-deep .wf-action-list ul{padding:0;margin:0;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}::ng-deep .wf-action-list ul.action-item{display:block}::ng-deep .wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}::ng-deep .wf-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}::ng-deep .wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .wf-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .wf-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .wf-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .wf-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .wf-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}::ng-deep .wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{-webkit-transform:translateY(50px);transform:translateY(50px)}to{-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes scale-up-center{0%{-webkit-transform:scale(.5);transform:scale(.5);opacity:0}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes scale-up-center{0%{-webkit-transform:scale(.5);transform:scale(.5);opacity:0}to{-webkit-transform:scale(1);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{-webkit-animation:rotate 2s linear infinite;animation:rotate 2s linear infinite;height:100%;-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center;width:100%;position:absolute;top:0;left:0;margin:auto}.loader-path{stroke-dasharray:150,200;stroke-dashoffset:-10;-webkit-animation:dash 1.5s ease-in-out infinite;animation:dash 1.5s ease-in-out infinite;stroke-linecap:round}@-webkit-keyframes rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-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}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35}to{stroke-dasharray:89,200;stroke-dashoffset:-124}}::ng-deep .dropdown{position:fixed;background:#fff;box-shadow:0 3px 6px #00000029;padding:24px 0;z-index:9;max-height:calc(100vh - 200px);overflow:auto}::ng-deep .dropdown ul.dropdown-list{padding:0 20px;margin:0;display:block}::ng-deep .dropdown ul.dropdown-list li{list-style:none}::ng-deep .dropdown ul.dropdown-list li app-cs-radio{display:flex}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.radio{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.value{padding:11px 12px 11px 32px;width:100%;border:1px solid #bcbcbc;border-radius:4px;margin-left:0;max-width:100%}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item svg{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item input[type=radio]:checked~span.value{background:#e8feeb;border-color:#34aa44}::ng-deep .dropdown ul.dropdown-list li+li{margin-top:8px}app-smiley-dialog{position:relative;z-index:10}app-smiley-dialog-inline{position:absolute;top:-3px;right:0;bottom:0;z-index:999;width:520px;height:calc(100vh + 3px)}::ng-deep .vx-overlay{position:fixed;z-index:3;inset:0}::ng-deep dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}::ng-deep dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}::ng-deep dp-date-picker input:focus{outline:none}::ng-deep dp-date-picker .dp-popup{width:412px;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep dp-date-picker .dp-popup dp-day-calendar,::ng-deep dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep dp-date-picker .dp-popup dp-day-calendar button,::ng-deep dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}::ng-deep dp-date-picker .dp-open+div{position:fixed!important;inset:0!important;display:flex;justify-content:center;align-items:center;z-index:99;pointer-events:none;background:#0000004d}::ng-deep .cdk-overlay-container{z-index:2147483002!important}::ng-deep .dp-popup{z-index:999;display:flex!important;align-items:center;justify-content:center;width:100vw;height:100vh;background:#0000004d!important;box-shadow:unset!important}::ng-deep .dp-popup dp-day-calendar{width:412px!important;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep .dp-popup dp-day-calendar,::ng-deep .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep .dp-popup dp-day-calendar button,::ng-deep .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep .dp-popup dp-day-calendar .dp-weekdays,::ng-deep .dp-popup dp-month-calendar .dp-weekdays,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}@-webkit-keyframes slide-bottom{0%{-webkit-transform:translateY(-100px);transform:translateY(-100px)}to{-webkit-transform:translateY(0px);transform:translateY(0)}}@keyframes slide-bottom{0%{-webkit-transform:translateY(-100px);transform:translateY(-100px)}to{-webkit-transform:translateY(0px);transform:translateY(0)}}::ng-deep span.file{display:block;width:20px;min-width:20px;border-radius:0 0 2px 2px;border:1px solid transparent;border-color:#747576;position:relative;margin-right:5px;border-top:none;margin-top:5px;background:#fff}::ng-deep span.file.table{margin-right:8px;width:18px;min-width:18px}::ng-deep span.file.table i{font-size:8px}::ng-deep span.file.table .format{height:8px;font-size:7px;line-height:8px;font-weight:400}::ng-deep span.file:before{position:absolute;border-radius:0;top:-4px;right:-1px;content:\"\";height:4px;width:4px;display:block;background:-moz-linear-gradient(45deg,#747576 0%,#747576 1%,#747576 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);background:-webkit-linear-gradient(45deg,#747576 0%,#747576 1%,#747576 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);background:linear-gradient(45deg,#747576 0% 1%,#747576 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file:after{height:4px;left:-1px;right:3px;border-top:1px solid;border-right:none;border-left:1px solid;content:\"\";top:-4px;position:absolute;border-radius:2px 0 0;background:#fff}::ng-deep span.file .format{height:10px;font-size:6px;text-transform:uppercase;background:transparent;font-weight:600;text-align:center;display:block;line-height:10px}::ng-deep span.file i{font-size:10px;height:10px;display:flex;align-items:center;justify-content:center;color:#dbdbdb}::ng-deep span.file.docx{width:22px!important}::ng-deep span.file.pdf,::ng-deep span.file.template{border-color:#f31c39}::ng-deep span.file.pdf:before,::ng-deep span.file.template:before{background:-moz-linear-gradient(45deg,#f31c39 0%,#f31c39 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);background:-webkit-linear-gradient(45deg,#f31c39 0%,#f31c39 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);background:linear-gradient(45deg,#f31c39 0% 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#f31c39\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.pdf:after,::ng-deep span.file.template:after{border-color:#f31c39}::ng-deep span.file.pdf .format,::ng-deep span.file.template .format{color:#f31c39}::ng-deep span.file.xlsx,::ng-deep span.file.xls,::ng-deep span.file.css,::ng-deep span.file.scss,::ng-deep span.file.less{border-color:#34aa44}::ng-deep span.file.xlsx:before,::ng-deep span.file.xls:before,::ng-deep span.file.css:before,::ng-deep span.file.scss:before,::ng-deep span.file.less:before{background:-moz-linear-gradient(45deg,#34aa44 0%,#34aa44 1%,#34aa44 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);background:-webkit-linear-gradient(45deg,#34aa44 0%,#34aa44 1%,#34aa44 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);background:linear-gradient(45deg,#34aa44 0% 1%,#34aa44 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.xlsx:after,::ng-deep span.file.xls:after,::ng-deep span.file.css:after,::ng-deep span.file.scss:after,::ng-deep span.file.less:after{border-color:#34aa44;color:#34aa44}::ng-deep span.file.xlsx .format,::ng-deep span.file.xls .format,::ng-deep span.file.css .format,::ng-deep span.file.scss .format,::ng-deep span.file.less .format{color:#34aa44}::ng-deep span.file.doc,::ng-deep span.file.docx,::ng-deep span.file.psd{border-color:#1e5dd3}::ng-deep span.file.doc:before,::ng-deep span.file.docx:before,::ng-deep span.file.psd:before{background:-moz-linear-gradient(45deg,#1e5dd3 0%,#1e5dd3 1%,#1e5dd3 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);background:-webkit-linear-gradient(45deg,#1e5dd3 0%,#1e5dd3 1%,#1e5dd3 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);background:linear-gradient(45deg,#1e5dd3 0% 1%,#1e5dd3 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.doc:after,::ng-deep span.file.docx:after,::ng-deep span.file.psd:after{border-color:#1e5dd3}::ng-deep span.file.doc .format,::ng-deep span.file.docx .format,::ng-deep span.file.psd .format{color:#1e5dd3}::ng-deep span.file.ppt,::ng-deep span.file.ai,::ng-deep span.file.html,::ng-deep span.file.jpg,::ng-deep span.file.jpeg,::ng-deep span.file.png{border-color:#f6882f}::ng-deep span.file.ppt:before,::ng-deep span.file.ai:before,::ng-deep span.file.html:before,::ng-deep span.file.jpg:before,::ng-deep span.file.jpeg:before,::ng-deep span.file.png:before{background:-moz-linear-gradient(45deg,#f6882f 0%,#f6882f 1%,#f6882f 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);background:-webkit-linear-gradient(45deg,#f6882f 0%,#f6882f 1%,#f6882f 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);background:linear-gradient(45deg,#f6882f 0% 1%,#f6882f 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.ppt:after,::ng-deep span.file.ai:after,::ng-deep span.file.html:after,::ng-deep span.file.jpg:after,::ng-deep span.file.jpeg:after,::ng-deep span.file.png:after{border-color:#f6882f}::ng-deep span.file.ppt .format,::ng-deep span.file.ai .format,::ng-deep span.file.html .format,::ng-deep span.file.jpg .format,::ng-deep span.file.jpeg .format,::ng-deep span.file.png .format{color:#f6882f}::ng-deep span.file.php{border-color:#7aa6f7}::ng-deep span.file.php:before{background:-moz-linear-gradient(45deg,#7aa6f7 0%,#7aa6f7 1%,#7aa6f7 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);background:-webkit-linear-gradient(45deg,#7aa6f7 0%,#7aa6f7 1%,#7aa6f7 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);background:linear-gradient(45deg,#7aa6f7 0% 1%,#7aa6f7 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.php:after{border-color:#7aa6f7}::ng-deep span.file.php .format{color:#7aa6f7}::ng-deep ngx-material-timepicker-container .timepicker-backdrop-overlay{background-color:#0000000d!important;z-index:9999999999!important}::ng-deep ngx-material-timepicker-container .timepicker-overlay{z-index:9999999999!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker{width:232px!important;border-radius:2px!important;box-shadow:0 4px 30px #161b2f26!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header{background-color:#fff!important;padding:0!important;border-radius:2px 2px 0 0}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container{display:block!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time{color:#000!important;width:150px!important;margin:0 auto;line-height:60px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control{font-size:40px;background-color:transparent!important;color:#000!important;font-weight:600;text-align:right;caret-color:transparent;outline:none;font-family:Poppins,sans-serif;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,sans-serif;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;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,sans-serif}::ng-deep vcomply-editor{display:block}::ng-deep vcomply-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep vcomply-editor .editor-container:hover,::ng-deep vcomply-editor .editor-container:focus-within{border:1px solid #1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep vcomply-editor .editor-container mention-list ul li a{font-size:16px!important}::ng-deep vcomply-editor .editor-container .editable-block{background:#fff;min-height:60px;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep vcomply-editor .editor-container .editable-block:before{color:#747576!important}::ng-deep vcomply-editor .editor-container .editor-tools{border-top:1px solid #dbdbdb;border-radius:0 0 3px 3px}::ng-deep vcomply-editor .editor-container .editor-tools:hover{border-color:#1e5dd3}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep marx-modal .popup-modal-background{background-color:#161b2fcc!important}::ng-deep .within-box{background:#f1f1f1;border-radius:.125rem;color:#042e7d}::ng-deep .within-value{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-word}.wf-tooltip{pointer-events:none;position:absolute;max-width:300px;font-size:12px;text-align:left;color:#fff;padding:8px 12px;background:#000;border-radius:2px;z-index:-222;top:0;opacity:0;white-space:break-spaces;word-break:break-word}.wf-tooltip *{color:#fff!important}.wf-tooltip:empty{display:none!important}.wf-tooltip.white{box-shadow:0 2px 8px #1c5bd159;color:#747576;background:#fff;text-align:left}.wf-tooltip.white b{color:#747576!important}.wf-tooltip.animate-top{-webkit-animation:animate-top .5s cubic-bezier(.25,.46,.45,.94) both;animation:animate-top .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-right{-webkit-animation:animate-right .3s cubic-bezier(.25,.46,.45,.94) both;animation:animate-right .3s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-bottom{-webkit-animation:animate-bottom .5s cubic-bezier(.25,.46,.45,.94) both;animation:animate-bottom .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-left{-webkit-animation:animate-left .5s cubic-bezier(.25,.46,.45,.94) both;animation:animate-left .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip-top:after{top:100%;left:50%;margin-left:-5px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip-bottom:after{bottom:100%;left:50%;margin-left:-5px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-left.white:after{border-color:transparent transparent transparent #f1f1f1}.wf-tooltip-left:after{top:50%;left:100%;margin-top:-5px;border-width:5px;border-color:transparent transparent transparent #000000}.wf-tooltip-right.white:after{border-color:transparent #f1f1f1 transparent transparent}.wf-tooltip-right:after{top:50%;right:100%;margin-top:-5px;border-width:5px;border-color:transparent #000000 transparent transparent}.wf-tooltip-bottom-right:after{bottom:100%;left:100%;margin-left:-20px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom-right.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-bottom-left:after{bottom:100%;left:0;margin-left:10px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom-left.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-top-left:after{top:100%;left:0;margin-left:10px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top-left.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip-top-right:after{top:100%;left:100%;margin-left:-5px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top-right.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip:after{content:\"\";position:absolute;border-style:solid}.wf-tooltip span.within{font-size:80%;display:block;width:100%}.wf-tooltip .small{display:block;font-size:10px}.wf-tooltip .within-box{background:#f1f1f1;border-radius:2px;color:#042e7d!important;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 2px;margin-right:2px}.wf-tooltip-show{pointer-events:none;opacity:1;z-index:2147483001}\n"] }]
         }], ctorParameters: () => [{ type: ReportACaseService }, { type: UiKitService }, { type: OrganizationUserService }, { type: ResponsibilityService }, { type: ComplianceCommonService }, { type: IframeService }, { type: DateUtilityService }], propDecorators: { openedFrom: [{
                 type: Input
             }], source: [{
@@ -20195,6 +20196,10 @@ const VALIDATION_MESSAGES = {
     DAY: 'Invalid day selection. Select a valid day from the drop-down list in the template.',
     DATE_FORMAT: 'Invalid date format. Select a valid date from the drop-down list in the template.',
     DUE_DATE: 'Invalid Due Date.',
+    START_DATE: 'Invalid Start Date.',
+    START_DATE_PAST: 'Start date cannot be less than the current date.',
+    START_DATE_AFTER_DUE_DATE: 'Start date cannot be greater than the due date.',
+    START_MONTH: 'Invalid month selection. Select a valid month from the drop-down list in the template.',
 };
 const RESPONSIBILITY_VALIDATION_MESSAGES = {
     WHO_MANAGING: 'Please select the person responsible for managing this responsibility.',
@@ -46927,11 +46932,11 @@ class BulkResponsibilityViewComponent {
         this.cancel.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: BulkResponsibilityViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.21", type: BulkResponsibilityViewComponent, isStandalone: false, 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: "\n<ng-container *ngIf=\"responsibilityType === 'singleTab'\">\n<div class=\"bulk-view\">\n    <div class=\"bulk-view-head\">\n        <h2 class=\"bulk-view-title\">\n            {{fileName}}\n        </h2>\n    </div>\n    <div class=\"bulk-view-body\">\n        <div class=\"exel-view\">\n            <div class=\"exel-view-row head\">\n                <div class=\"exel-view-column sl-no\">#</div>\n                <div class=\"exel-view-column\" *ngFor=\"let heading of responsibilityBulkUpload?.header\"\n                    [class.large]=\"heading && heading.startsWith('Inherent')\">\n                    <ng-container *ngIf=\"heading && !(heading.startsWith('Due')) && !(heading.startsWith('Oversight'))\">\n                        {{(heading.includes('*')? heading.replace('*', '') : heading)}}\n                        <span *ngIf=\"heading.includes('*')\" class=\"required\">*</span>\n                    </ng-container>\n                    <ng-container *ngIf=\"heading && heading.startsWith('Due')\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Due Date</div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\">\n                            <div class=\"exel-view-column\">Day</div>\n                            <div class=\"exel-view-column\">Month</div>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngIf=\"heading && heading.startsWith('Oversight')\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Oversight </div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\">\n                            <div class=\"exel-view-column\">Always Notify</div>\n                            <div class=\"exel-view-column\">Notify on Failure</div>\n                        </div>\n                    </ng-container>\n                </div>\n\n            </div>\n            <div class=\"exel-view-row\" *ngFor=\"let report of responsibilityBulkUpload?.reports; let i = index\">\n                <div class=\"exel-view-column sl-no\">{{i+1}}</div>\n\n                <div class=\"exel-view-column\" [class.error]=\"!report.responsibilityName\">{{report?.responsibilityName}}\n                    <i *ngIf=\"!report?.responsibilityName\" class=\"icons\"\n                        [appTooltip]=\"'Enter a name for this responsibility.'\" placement=\"bottom-right\" type=\"white\"\n                        delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                </div>\n                <div class=\"exel-view-column\">\n                    {{report?.assignor}}\n                    <i *ngIf=\"((report?.assignor) && (report?.notifyOnFailure == report?.assignor||report?.alwaysNotify == report?.assignor))\"\n                        class=\"icons\"\n                        [appTooltip]=\"'The Overseer cannot also be the Assignor of this responsibility. Select another user as the Assignor.'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>\n\n                </div>\n                <div class=\"exel-view-column\">\n                    {{report?.assignee}}\n\n                    <i *ngIf=\"((report?.assignee) && (report?.notifyOnFailure == report?.assignee||report?.alwaysNotify == report?.assignee))\"\n                        class=\"icons\"\n                        [appTooltip]=\"'The Overseer cannot also be the Assignee of this responsibility. Select another user as the Assignee.'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>\n\n                    <i *ngIf=\"((report?.assignee) && (report?.reviewer == report?.assignee))\"\n                        class=\"icons\"\n                        [appTooltip]=\"'The Reviewer cannot also be the Assignee of this responsibility. Select another user as the Assignee.'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>\n                    <i *ngIf=\"(!report?.assignee) || (!report?.isValidUser)\"\n                    class=\"icons\"\n                    [appTooltip]=\"'Select the user responsible for completing this responsibility. '\"\n                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>\n                </div>\n                <div class=\"exel-view-column\" id=\"resCategory\" *ngIf=\"report?.responsibilityCategory!==null\">{{report?.responsibilityCategory}}</div>\n                <div class=\"exel-view-column\" [class.error]=\"!report.frequency\">{{report?.frequency}}\n                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\n                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                </div>\n                <div class=\"exel-view-column multi-column\">\n                    <div class=\"exel-view-row\">\n                        <div class=\"exel-view-column\" [class.error]=\"!report.isValidDueDate\">{{report?.day}}\n                            <i *ngIf=\"!report?.isValidDueDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                            <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                        </div>\n                        <div class=\"exel-view-column\" [class.error]=\"!report.isValidDueDate\">{{report?.month}}\n                            <i *ngIf=\"!report?.isValidDueDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                            <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"exel-view-column\">{{report?.responsibilityWindow}}</div>\n                <div class=\"exel-view-column\">{{report?.failedAfter}}</div>\n                <div class=\"exel-view-column\">{{report?.reportClass}}</div>\n                <div class=\"exel-view-column\">{{report?.responsibilityCenter}}</div>\n                <div class=\"exel-view-column\">\n                    {{report?.reviewer}}\n\n                    <i *ngIf=\"(report?.reviewer) && ((report?.reviewer == report?.alwaysNotify) || (report?.reviewer == report?.notifyOnFailure))\"\n                        class=\"icons\"\n                        [appTooltip]=\"'The Overseer cannot also be the Reviewer of this responsibility. Select another user as the Reviewer'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>\n\n                    <i *ngIf=\"report?.reviewer && (report?.reviewer == report?.assignee)\" class=\"icons\"\n                        [appTooltip]=\"'The Assignee cannot also be the Reviewer of this responsibility. Select another user as the Reviewer.'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>\n                    \n                </div>\n                <div class=\"exel-view-column\">{{report?.reviewToBeCompletedWithin}}</div>\n                <div class=\"exel-view-column\">{{report?.reviewWillBeFailedAfter}}</div>\n                <div class=\"exel-view-column\">{{report?.formatForResponsibility}}</div>\n                <div class=\"exel-view-column\">{{report?.notes}}</div>\n                <div class=\"exel-view-column\">{{report?.documentEvidenceRequired}}</div>\n                <div class=\"exel-view-column multi-column\">\n                    <div class=\"exel-view-row\">\n                        <div class=\"exel-view-column\">\n                            {{report?.alwaysNotify}}\n                            <i *ngIf=\"(report?.alwaysNotify) && ((report?.reviewer == report?.alwaysNotify))\"\n                                class=\"icons\"\n                                [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                            </i>\n\n                            <i *ngIf=\"report?.alwaysNotify && (report?.alwaysNotify == report?.assignee)\" class=\"icons\"\n                                [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                            </i>\n                            <i *ngIf=\"((report?.alwaysNotify && report?.assignor) && (report?.alwaysNotify == report?.assignor)) ||((report?.alwaysNotify && (!report?.assignor)) && (report?.alwaysNotify == defaultOwner))\"\n                                class=\"icons\"\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.'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                            </i>\n                        </div>\n                        <div class=\"exel-view-column\">\n                            {{report?.notifyOnFailure}}\n                            <i *ngIf=\"(report?.notifyOnFailure) && ((report?.reviewer == report?.notifyOnFailure))\"\n                            class=\"icons\"\n                            [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n\n                        <i *ngIf=\"report?.notifyOnFailure && (report?.notifyOnFailure == report?.assignee)\" class=\"icons\"\n                            [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n                        <i *ngIf=\"((report?.notifyOnFailure && report?.assignor) && (report?.notifyOnFailure == report?.assignor)) ||((report?.notifyOnFailure && (!report?.assignor)) && (report?.notifyOnFailure == defaultOwner))\"\n                            class=\"icons\"\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.'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n                        </div>\n                    </div>\n                </div>\n\n\n                <div class=\"exel-view-column\">{{report?.keyResponsibility}}</div>\n                <div class=\"exel-view-column\">{{report?.objective}}</div>\n\n            </div>\n        </div>\n    </div>\n    <div class=\"bulk-view-footer\">\n        <div class=\"left\">\n            <p>{{finalResponsibilities}} out of {{responsibilityBulkUpload?.reports?.length}} responsibilities will be\n                uploaded.</p>\n        </div>\n        <div class=\"right\">\n            <button (click)=\"close()\" id=\"bulk-resp-cancel\" >Cancel</button>\n            <button (click)=\"submit()\" id=\"bulk-resp-confirm\" [disabled]=\"finalResponsibilities<1\" class=\"blue\">Confirm</button>\n        </div>\n    </div>\n</div>\n<app-loader  *ngIf=\"loader\"></app-loader>\n\n</ng-container>\n\n<!-- --------------------------------------------------------------------upward is new one-------------------- -->\n<app-loader  *ngIf=\"loader\"></app-loader>\n\n\n\n\n\n\n<!-- HTML for multiple tabs -->\n<ng-container *ngIf=\"responsibilityType === 'multiTab'\">\n    <div class=\"bulk-view\">\n        <div class=\"bulk-view-head\">\n            <h2 class=\"bulk-view-title\">\n                {{fileName}}\n            </h2>\n        </div>\n        <div class=\"bulk-view-body bulk\">\n            <div class=\"exel-view\">\n                <div class=\"exel-view-row head\">\n                    <div class=\"exel-view-column sl-no\">#</div>\n                    <div class=\"exel-view-column\">Responsibility Name <span class=\"required\">*</span></div>\n                    <div class=\"exel-view-column\" *ngIf=\"responsibilityBulkUpload?.header.includes('Program')\" [class.three-column]=\"true\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Program</div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\n                            <div class=\"exel-view-column\">Program Type</div>\n                            <div class=\"exel-view-column\">Program</div>\n                            <div class=\"exel-view-column\">Program Category</div>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\">Entrusted By</div>\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Entrust To <span class=\"required\">*</span></div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\n                            <div class=\"exel-view-column\">Person or Group<span class=\"required\">*</span></div>\n                            <div class=\"exel-view-column\">All or Any Persons</div>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\">Key Responsibility?</div>\n                    <div class=\"exel-view-column\" [class.five-column]=\"tabType === 'frequency' || tabType === 'onCompletion'\" [class.three-column]=\"tabType === 'ongoing'\">\n                        <div class=\"exel-view-row\">\n                            \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>\n                        </div>\n                        <div class=\"exel-view-row multi-column\" [class.five-column]=\"tabType === 'frequency' || tabType === 'onCompletion'\" [class.three-column]=\"tabType === 'ongoing'\">\n                            <ng-container *ngIf=\"tabType === 'frequency'\">\n                                <div class=\"exel-view-column\">Frequency <span class=\"required\">*</span></div>\n                                <div class=\"exel-view-column\">Due Date <span class=\"info-text\">(Day)</span></div>\n                                <div class=\"exel-view-column\">Due Date <span class=\"info-text\">(Month)</span></div>\n                                <div class=\"exel-view-column\">Start <span class=\"info-text\">(No. of days before the due date)</span></div>\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>\n                            </ng-container>\n                            <ng-container *ngIf=\"tabType === 'ongoing'\">\n                                <div class=\"exel-view-column\">Ongoing Frequency <span class=\"required\">*</span></div>\n                                <div class=\"exel-view-column\">Set a Reminder?</div>\n                                <div class=\"exel-view-column\">Frequency of Reminder</div>\n                            </ng-container>\n                            <ng-container *ngIf=\"tabType === 'onCompletion'\">\n                                <div class=\"exel-view-column\">On Completion of Frequency <span class=\"required\">*</span></div>\n                                <div class=\"exel-view-column\">Parent Responsibility<span class=\"info-text\">(Day)</span></div>\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>\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>\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>\n                            </ng-container>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\">Responsibility Centre</div>\n                    <div class=\"exel-view-column\">Risk Class</div>\n                    <div class=\"exel-view-column\">Objective</div>\n                    <div class=\"exel-view-column\">Notes</div>\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Format & Evidence</div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\" [class.three-column]=\"false\">\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">Format</div>\n                            <div class=\"exel-view-column\">Format For Responsibility (link)</div>\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">Evidence</div>\n                        </div>\n                    </div>\n                    \n                    <div class=\"exel-view-column\" [class.three-column]=\"true\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Review of Responsibility</div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\n                            <div class=\"exel-view-column\">Reviewer</div>\n                            <div class=\"exel-view-column\">Review Start <span class=\"info-text\">(No. of days before the due date)</span></div>\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>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Overseer</div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\n                            <div class=\"exel-view-column\">Always Notify</div>\n                            <div class=\"exel-view-column\">Notify on Failure</div>\n                        </div>\n                    </div>\n                    \n\n                </div>\n                <div class=\"exel-view-row\" *ngFor=\"let report of responsibilityBulkUpload?.reports; let i = index\">\n                    <div class=\"exel-view-column sl-no\" [class.error]=\"!report?.isValid\">{{i+1}}</div>\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>\n                    <div class=\"exel-view-column multi-column\" *ngIf=\"responsibilityBulkUpload?.header.includes('Program')\" [class.error]=\"false\" [class.three-column]=\"true\">\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\n                            <div class=\"exel-view-column\">{{report?.programType}}</div>\n                            <div class=\"exel-view-column\">{{report?.program}}</div>\n                            <div class=\"exel-view-column\">{{report?.programCategory}}</div>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\">{{report?.assignor}}\n                        \n                    </div>\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\n                            <div class=\"exel-view-column\" [class.error]=\"!report?.assignee || !report?.userValidateWithProgram?.isValidAssignee || (!report?.isValidUser)\">{{report?.assignee}}\n                                <!-- || (!report?.isValidUser) -->\n                                <i *ngIf=\"(!report?.assignee) || (!report?.isValidUser)\"\n                                    class=\"icons\"\n                                    [appTooltip]=\"'Select the user responsible for completing this responsibility. '\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                                </i>\n                                <i *ngIf=\"(report?.assignee) && !report?.userValidateWithProgram?.isValidAssignee\"\n                                    class=\"icons\"\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                                </i>\n                            </div>\n                            <div class=\"exel-view-column\">{{report?.assigneeType}}</div>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\">{{report?.keyResponsibility}}</div>\n                    <div class=\"exel-view-column multi-column\" [class.five-column]=\"tabType === 'frequency' || tabType === 'onCompletion'\" [class.three-column]=\"tabType === 'ongoing'\">\n                        <ng-container *ngIf=\"tabType === 'frequency'\">\n                            <div class=\"exel-view-row multi-column\" [class.five-column]=\"true\">\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.frequency\">{{report?.frequency}}\n                                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                </div>\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.validDate || report?.isPastDate\">{{report?.day}}\n                                    <i *ngIf=\"!report?.validDate\" class=\"icons\" [appTooltip]=\"report?.isDayInvalid ? VALIDATION_MESSAGES.DAY : VALIDATION_MESSAGES.DUE_DATE\"\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                    <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                </div>\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.validDate || report?.isPastDate\">{{report?.month}}\n                                    <i *ngIf=\"!report?.validDate\" class=\"icons\" [appTooltip]=\"report?.isDateFormatInvalid ? VALIDATION_MESSAGES.DATE_FORMAT : VALIDATION_MESSAGES.DUE_DATE\"\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                    <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                </div>\n                                <div class=\"exel-view-column\">{{report?.responsibilityWindow}}</div>\n                                <div class=\"exel-view-column\">{{report?.failedAfter}}</div>\n                            </div>\n                        </ng-container>\n                        <ng-container *ngIf=\"tabType === 'ongoing'\">\n                            <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.frequency\">{{report?.frequency}}\n                                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                </div>\n                                <div class=\"exel-view-column\">{{report?.setReminder}}</div>\n                                <div class=\"exel-view-column\">{{report?.frequencyReminder}}</div>\n                            </div>\n                        </ng-container>\n                        <ng-container *ngIf=\"tabType === 'onCompletion'\">\n                            <div class=\"exel-view-row multi-column\" [class.five-column]=\"true\">\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.frequency\">{{report?.frequency}}\n                                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                </div>\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.parentResponsibility\">{{report?.parentResponsibility}}\n                                    <i *ngIf=\"!report?.parentResponsibility\" class=\"icons\" [appTooltip]=\"'Select a parent responsibility on whose completion this responsibility will become active.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                </div>\n                                <div class=\"exel-view-column\">{{report?.dueDate}}</div>\n                                <div class=\"exel-view-column\">{{report?.responsibilityWindow}}</div>\n                                <div class=\"exel-view-column\">{{report?.failedAfter}}</div>\n                            </div>\n                        </ng-container>\n                    </div>  \n                    <div class=\"exel-view-column\">{{report?.responsibilityCenter}}</div>\n                    <div class=\"exel-view-column\" [class.error]=\"!(report?.reportClass | riskClass)\">{{report?.reportClass}}\n                        <i *ngIf=\"!(report?.reportClass | riskClass)\" class=\"icons\" [appTooltip]=\"VALIDATION_MESSAGES.RISK_CLASS\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                    </div>\n                    <div class=\"exel-view-column\">{{report?.objective}}</div>\n                    <div class=\"exel-view-column\">{{report?.notes}}</div>\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\n                            <div class=\"exel-view-column multi-column\">\n                                <div class=\"exel-view-row multi-column\">\n                                    <div class=\"exel-view-column\" [class.small-column]=\"true\">{{report?.isFormat}}</div>\n                                    <div class=\"exel-view-column\">{{report?.formatForResponsibility}}</div>\n                                </div>\n                            </div>\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">{{report?.documentEvidenceRequired}}</div>\n                        </div>\n                    </div>\n                    \n                    <div class=\"exel-view-column multi-column\" [class.three-column]=\"true\">\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\n                            <div class=\"exel-view-column\" [class.error]=\"report?.reviewer && (\n                              !report?.userValidateWithProgram?.isValidReviewer )\">{{report?.reviewer}}\n\n                        \n                        <i *ngIf=\"report?.reviewer && !report?.userValidateWithProgram?.isValidReviewer\"\n                            class=\"icons\"\n                            [appTooltip]=\"'This user is not associated with the selected Program.'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n                            </div>\n                            <div class=\"exel-view-column\">{{report?.reviewToBeCompletedWithin}}</div>\n                            <div class=\"exel-view-column\">{{report?.reviewWillBeFailedAfter}}</div>\n                        </div>\n                    </div>\n\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\n                            <div class=\"exel-view-column\" [class.error]=\"report?.overseer && (\n                              !report?.userValidateWithProgram?.isValidOverseer )\">\n                            {{report?.overseer}}\n\n                                <i *ngIf=\"(report?.overseer) && !report?.userValidateWithProgram?.isValidOverseer\"\n                                    class=\"icons\"\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                                </i>\n                            </div>\n                            <div class=\"exel-view-column\" [class.error]=\"report?.notifyOnFailure && (\n                            !report?.userValidateWithProgram?.isValidNotifyOnFailure )\">\n                                {{report?.notifyOnFailure}}\n\n                                <i *ngIf=\"(report?.notifyOnFailure) && !report?.userValidateWithProgram?.isValidNotifyOnFailure\"\n                                    class=\"icons\"\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                                </i>\n                            </div>\n                        </div>\n                    </div>\n\n                    \n                </div>\n\n\n\n\n\n\n                <!-- ------------------------------------------------old code dynamic------------------------------------------------- -->\n\n                \n            </div>\n        </div>\n        <div class=\"bulk-view-option\">\n            <button *ngIf=\"bulkUpload?.frequency?.reports?.length\" [class.active]=\"tabType === 'frequency'\" (click)=\"selectedTab.emit('frequency')\">Frequency Responsibilities</button>\n            <button *ngIf=\"bulkUpload?.ongoing?.reports?.length\" [class.active]=\"tabType === 'ongoing'\" (click)=\"selectedTab.emit('ongoing')\">Ongoing Responsibilities</button>\n            <button *ngIf=\"bulkUpload?.onCompletion?.reports?.length\" [class.active]=\"tabType === 'onCompletion'\" (click)=\"selectedTab.emit('onCompletion')\">On Completion Responsibilities</button>\n        </div>\n        <div class=\"bulk-view-footer\">\n            \n            <div class=\"left\">\n                <p>{{finalResponsibilities}} out of {{responsibilityMultiTabBulkUpload?.length}} {{responsibilityMultiTabBulkUpload?.length > 1 ? 'responsibilities' : 'responsibility'}} will be\n                    uploaded.</p>\n            </div>\n            <div class=\"right\">\n                <button (click)=\"close()\" id=\"bulk-resp-cancel-multi\">Cancel</button>\n                <button (click)=\"submit()\" id=\"bulk-resp-confirm-multi\" [disabled]=\"!isConfirmClickable\" class=\"blue\">Confirm</button>\n                \n            </div>\n        </div>\n    </div>\n    <app-loader  *ngIf=\"loader\"></app-loader>\n\n</ng-container>\n\n    <!-- --------------------------------------------------------------------upward is new one-------------------- -->\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:#fff}.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:#fff;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:#fff}.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" }, { kind: "pipe", type: RiskClassPipe, name: "riskClass" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.21", type: BulkResponsibilityViewComponent, isStandalone: false, 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: "\n<ng-container *ngIf=\"responsibilityType === 'singleTab'\">\n<div class=\"bulk-view\">\n    <div class=\"bulk-view-head\">\n        <h2 class=\"bulk-view-title\">\n            {{fileName}}\n        </h2>\n    </div>\n    <div class=\"bulk-view-body\">\n        <div class=\"exel-view\">\n            <div class=\"exel-view-row head\">\n                <div class=\"exel-view-column sl-no\">#</div>\n                <div class=\"exel-view-column\" *ngFor=\"let heading of responsibilityBulkUpload?.header\"\n                    [class.large]=\"heading && heading.startsWith('Inherent')\">\n                    <ng-container *ngIf=\"heading && !(heading.startsWith('Due')) && !(heading.startsWith('Oversight'))\">\n                        {{(heading.includes('*')? heading.replace('*', '') : heading)}}\n                        <span *ngIf=\"heading.includes('*')\" class=\"required\">*</span>\n                    </ng-container>\n                    <ng-container *ngIf=\"heading && heading.startsWith('Due')\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Due Date</div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\">\n                            <div class=\"exel-view-column\">Day</div>\n                            <div class=\"exel-view-column\">Month</div>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngIf=\"heading && heading.startsWith('Oversight')\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Oversight </div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\">\n                            <div class=\"exel-view-column\">Always Notify</div>\n                            <div class=\"exel-view-column\">Notify on Failure</div>\n                        </div>\n                    </ng-container>\n                </div>\n\n            </div>\n            <div class=\"exel-view-row\" *ngFor=\"let report of responsibilityBulkUpload?.reports; let i = index\">\n                <div class=\"exel-view-column sl-no\">{{i+1}}</div>\n\n                <div class=\"exel-view-column\" [class.error]=\"!report.responsibilityName\">{{report?.responsibilityName}}\n                    <i *ngIf=\"!report?.responsibilityName\" class=\"icons\"\n                        [appTooltip]=\"'Enter a name for this responsibility.'\" placement=\"bottom-right\" type=\"white\"\n                        delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                </div>\n                <div class=\"exel-view-column\">\n                    {{report?.assignor}}\n                    <i *ngIf=\"((report?.assignor) && (report?.notifyOnFailure == report?.assignor||report?.alwaysNotify == report?.assignor))\"\n                        class=\"icons\"\n                        [appTooltip]=\"'The Overseer cannot also be the Assignor of this responsibility. Select another user as the Assignor.'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>\n\n                </div>\n                <div class=\"exel-view-column\">\n                    {{report?.assignee}}\n\n                    <i *ngIf=\"((report?.assignee) && (report?.notifyOnFailure == report?.assignee||report?.alwaysNotify == report?.assignee))\"\n                        class=\"icons\"\n                        [appTooltip]=\"'The Overseer cannot also be the Assignee of this responsibility. Select another user as the Assignee.'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>\n\n                    <i *ngIf=\"((report?.assignee) && (report?.reviewer == report?.assignee))\"\n                        class=\"icons\"\n                        [appTooltip]=\"'The Reviewer cannot also be the Assignee of this responsibility. Select another user as the Assignee.'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>\n                    <i *ngIf=\"(!report?.assignee) || (!report?.isValidUser)\"\n                    class=\"icons\"\n                    [appTooltip]=\"'Select the user responsible for completing this responsibility. '\"\n                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>\n                </div>\n                <div class=\"exel-view-column\" id=\"resCategory\" *ngIf=\"report?.responsibilityCategory!==null\">{{report?.responsibilityCategory}}</div>\n                <div class=\"exel-view-column\" [class.error]=\"!report.frequency\">{{report?.frequency}}\n                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\n                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                </div>\n                <div class=\"exel-view-column multi-column\">\n                    <div class=\"exel-view-row\">\n                        <div class=\"exel-view-column\" [class.error]=\"!report.isValidDueDate\">{{report?.day}}\n                            <i *ngIf=\"!report?.isValidDueDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                            <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                        </div>\n                        <div class=\"exel-view-column\" [class.error]=\"!report.isValidDueDate\">{{report?.month}}\n                            <i *ngIf=\"!report?.isValidDueDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                            <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"exel-view-column\">{{report?.responsibilityWindow}}</div>\n                <div class=\"exel-view-column\">{{report?.failedAfter}}</div>\n                <div class=\"exel-view-column\">{{report?.reportClass}}</div>\n                <div class=\"exel-view-column\">{{report?.responsibilityCenter}}</div>\n                <div class=\"exel-view-column\">\n                    {{report?.reviewer}}\n\n                    <i *ngIf=\"(report?.reviewer) && ((report?.reviewer == report?.alwaysNotify) || (report?.reviewer == report?.notifyOnFailure))\"\n                        class=\"icons\"\n                        [appTooltip]=\"'The Overseer cannot also be the Reviewer of this responsibility. Select another user as the Reviewer'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>\n\n                    <i *ngIf=\"report?.reviewer && (report?.reviewer == report?.assignee)\" class=\"icons\"\n                        [appTooltip]=\"'The Assignee cannot also be the Reviewer of this responsibility. Select another user as the Reviewer.'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>\n                    \n                </div>\n                <div class=\"exel-view-column\">{{report?.reviewToBeCompletedWithin}}</div>\n                <div class=\"exel-view-column\">{{report?.reviewWillBeFailedAfter}}</div>\n                <div class=\"exel-view-column\">{{report?.formatForResponsibility}}</div>\n                <div class=\"exel-view-column\">{{report?.notes}}</div>\n                <div class=\"exel-view-column\">{{report?.documentEvidenceRequired}}</div>\n                <div class=\"exel-view-column multi-column\">\n                    <div class=\"exel-view-row\">\n                        <div class=\"exel-view-column\">\n                            {{report?.alwaysNotify}}\n                            <i *ngIf=\"(report?.alwaysNotify) && ((report?.reviewer == report?.alwaysNotify))\"\n                                class=\"icons\"\n                                [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                            </i>\n\n                            <i *ngIf=\"report?.alwaysNotify && (report?.alwaysNotify == report?.assignee)\" class=\"icons\"\n                                [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                            </i>\n                            <i *ngIf=\"((report?.alwaysNotify && report?.assignor) && (report?.alwaysNotify == report?.assignor)) ||((report?.alwaysNotify && (!report?.assignor)) && (report?.alwaysNotify == defaultOwner))\"\n                                class=\"icons\"\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.'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                            </i>\n                        </div>\n                        <div class=\"exel-view-column\">\n                            {{report?.notifyOnFailure}}\n                            <i *ngIf=\"(report?.notifyOnFailure) && ((report?.reviewer == report?.notifyOnFailure))\"\n                            class=\"icons\"\n                            [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n\n                        <i *ngIf=\"report?.notifyOnFailure && (report?.notifyOnFailure == report?.assignee)\" class=\"icons\"\n                            [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n                        <i *ngIf=\"((report?.notifyOnFailure && report?.assignor) && (report?.notifyOnFailure == report?.assignor)) ||((report?.notifyOnFailure && (!report?.assignor)) && (report?.notifyOnFailure == defaultOwner))\"\n                            class=\"icons\"\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.'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n                        </div>\n                    </div>\n                </div>\n\n\n                <div class=\"exel-view-column\">{{report?.keyResponsibility}}</div>\n                <div class=\"exel-view-column\">{{report?.objective}}</div>\n\n            </div>\n        </div>\n    </div>\n    <div class=\"bulk-view-footer\">\n        <div class=\"left\">\n            <p>{{finalResponsibilities}} out of {{responsibilityBulkUpload?.reports?.length}} responsibilities will be\n                uploaded.</p>\n        </div>\n        <div class=\"right\">\n            <button (click)=\"close()\" id=\"bulk-resp-cancel\" >Cancel</button>\n            <button (click)=\"submit()\" id=\"bulk-resp-confirm\" [disabled]=\"finalResponsibilities<1\" class=\"blue\">Confirm</button>\n        </div>\n    </div>\n</div>\n<app-loader  *ngIf=\"loader\"></app-loader>\n\n</ng-container>\n\n<!-- --------------------------------------------------------------------upward is new one-------------------- -->\n<app-loader  *ngIf=\"loader\"></app-loader>\n\n\n\n\n\n\n<!-- HTML for multiple tabs -->\n<ng-container *ngIf=\"responsibilityType === 'multiTab'\">\n    <div class=\"bulk-view\">\n        <div class=\"bulk-view-head\">\n            <h2 class=\"bulk-view-title\">\n                {{fileName}}\n            </h2>\n        </div>\n        <div class=\"bulk-view-body bulk\">\n            <div class=\"exel-view\">\n                <div class=\"exel-view-row head\">\n                    <div class=\"exel-view-column sl-no\">#</div>\n                    <div class=\"exel-view-column\">Responsibility Name <span class=\"required\">*</span></div>\n                    <div class=\"exel-view-column\" *ngIf=\"responsibilityBulkUpload?.header.includes('Program')\" [class.three-column]=\"true\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Program</div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\n                            <div class=\"exel-view-column\">Program Type</div>\n                            <div class=\"exel-view-column\">Program</div>\n                            <div class=\"exel-view-column\">Program Category</div>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\">Entrusted By</div>\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Entrust To <span class=\"required\">*</span></div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\n                            <div class=\"exel-view-column\">Person or Group<span class=\"required\">*</span></div>\n                            <div class=\"exel-view-column\">All or Any Persons</div>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\">Key Responsibility?</div>\n                    <div class=\"exel-view-column\" [class.seven-column]=\"tabType === 'frequency'\" [class.five-column]=\"tabType === 'onCompletion'\" [class.three-column]=\"tabType === 'ongoing'\">\n                        <div class=\"exel-view-row\">\n                            \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>\n                        </div>\n                        <div class=\"exel-view-row multi-column\" [class.seven-column]=\"tabType === 'frequency'\" [class.five-column]=\"tabType === 'onCompletion'\" [class.three-column]=\"tabType === 'ongoing'\">\n                            <ng-container *ngIf=\"tabType === 'frequency'\">\n                                <div class=\"exel-view-column\">Frequency <span class=\"required\">*</span></div>\n                                <div class=\"exel-view-column\">Due Date <span class=\"info-text\">(Day)</span></div>\n                                <div class=\"exel-view-column\">Due Date <span class=\"info-text\">(Month)</span></div>\n                                <div class=\"exel-view-column\">Start <span class=\"info-text\">(No. of days before the due date)</span></div>\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>\n                                <div class=\"exel-view-column\">Start Date <span class=\"info-text\">(Day)</span></div>\n                                <div class=\"exel-view-column\">Start Date <span class=\"info-text\">(Month)</span></div>\n                            </ng-container>\n                            <ng-container *ngIf=\"tabType === 'ongoing'\">\n                                <div class=\"exel-view-column\">Ongoing Frequency <span class=\"required\">*</span></div>\n                                <div class=\"exel-view-column\">Set a Reminder?</div>\n                                <div class=\"exel-view-column\">Frequency of Reminder</div>\n                            </ng-container>\n                            <ng-container *ngIf=\"tabType === 'onCompletion'\">\n                                <div class=\"exel-view-column\">On Completion of Frequency <span class=\"required\">*</span></div>\n                                <div class=\"exel-view-column\">Parent Responsibility<span class=\"info-text\">(Day)</span></div>\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>\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>\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>\n                            </ng-container>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\">Responsibility Centre</div>\n                    <div class=\"exel-view-column\">Risk Class</div>\n                    <div class=\"exel-view-column\">Objective</div>\n                    <div class=\"exel-view-column\">Notes</div>\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Format & Evidence</div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\" [class.three-column]=\"false\">\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">Format</div>\n                            <div class=\"exel-view-column\">Format For Responsibility (link)</div>\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">Evidence</div>\n                        </div>\n                    </div>\n                    \n                    <div class=\"exel-view-column\" [class.three-column]=\"true\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Review of Responsibility</div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\n                            <div class=\"exel-view-column\">Reviewer</div>\n                            <div class=\"exel-view-column\">Review Start <span class=\"info-text\">(No. of days before the due date)</span></div>\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>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Overseer</div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\n                            <div class=\"exel-view-column\">Always Notify</div>\n                            <div class=\"exel-view-column\">Notify on Failure</div>\n                        </div>\n                    </div>\n                    \n\n                </div>\n                <div class=\"exel-view-row\" *ngFor=\"let report of responsibilityBulkUpload?.reports; let i = index\">\n                    <div class=\"exel-view-column sl-no\" [class.error]=\"!report?.isValid\">{{i+1}}</div>\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>\n                    <div class=\"exel-view-column multi-column\" *ngIf=\"responsibilityBulkUpload?.header.includes('Program')\" [class.error]=\"false\" [class.three-column]=\"true\">\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\n                            <div class=\"exel-view-column\">{{report?.programType}}</div>\n                            <div class=\"exel-view-column\">{{report?.program}}</div>\n                            <div class=\"exel-view-column\">{{report?.programCategory}}</div>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\">{{report?.assignor}}\n                        \n                    </div>\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\n                            <div class=\"exel-view-column\" [class.error]=\"!report?.assignee || !report?.userValidateWithProgram?.isValidAssignee || (!report?.isValidUser)\">{{report?.assignee}}\n                                <!-- || (!report?.isValidUser) -->\n                                <i *ngIf=\"(!report?.assignee) || (!report?.isValidUser)\"\n                                    class=\"icons\"\n                                    [appTooltip]=\"'Select the user responsible for completing this responsibility. '\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                                </i>\n                                <i *ngIf=\"(report?.assignee) && !report?.userValidateWithProgram?.isValidAssignee\"\n                                    class=\"icons\"\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                                </i>\n                            </div>\n                            <div class=\"exel-view-column\">{{report?.assigneeType}}</div>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\">{{report?.keyResponsibility}}</div>\n                    <div class=\"exel-view-column multi-column\" [class.seven-column]=\"tabType === 'frequency'\" [class.five-column]=\"tabType === 'onCompletion'\" [class.three-column]=\"tabType === 'ongoing'\">\n                        <ng-container *ngIf=\"tabType === 'frequency'\">\n                            <div class=\"exel-view-row multi-column\" [class.seven-column]=\"true\">\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.frequency\">{{report?.frequency}}\n                                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                </div>\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.validDate || report?.isPastDate\">{{report?.day}}\n                                    <i *ngIf=\"!report?.validDate\" class=\"icons\" [appTooltip]=\"report?.isDayInvalid ? VALIDATION_MESSAGES.DAY : VALIDATION_MESSAGES.DUE_DATE\"\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                    <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                </div>\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.validDate || report?.isPastDate\">{{report?.month}}\n                                    <i *ngIf=\"!report?.validDate\" class=\"icons\" [appTooltip]=\"report?.isDateFormatInvalid ? VALIDATION_MESSAGES.DATE_FORMAT : VALIDATION_MESSAGES.DUE_DATE\"\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                    <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                </div>\n                                <div class=\"exel-view-column\">{{report?.responsibilityWindow}}</div>\n                                <div class=\"exel-view-column\">{{report?.failedAfter}}</div>\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.validStartDate || report?.isStartDatePast || report?.isStartDateAfterDueDate\">{{report?.startDay}}\n                                    <i *ngIf=\"report?.isStartDateAfterDueDate\" class=\"icons\" [appTooltip]=\"VALIDATION_MESSAGES.START_DATE_AFTER_DUE_DATE\"\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                    <i *ngIf=\"report?.isStartDatePast && !report?.isStartDateAfterDueDate\" class=\"icons\" [appTooltip]=\"VALIDATION_MESSAGES.START_DATE_PAST\"\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                    <i *ngIf=\"!report?.validStartDate && !report?.isStartDatePast && !report?.isStartDateAfterDueDate\" class=\"icons\" [appTooltip]=\"report?.isStartDayInvalid ? VALIDATION_MESSAGES.DAY : (report?.isStartDateFormatInvalid ? VALIDATION_MESSAGES.DATE_FORMAT : VALIDATION_MESSAGES.START_DATE)\"\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                </div>\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.validStartDate || report?.isStartDatePast || report?.isStartDateAfterDueDate\">{{report?.startMonth}}\n                                    <i *ngIf=\"report?.isStartDateAfterDueDate\" class=\"icons\" [appTooltip]=\"VALIDATION_MESSAGES.START_DATE_AFTER_DUE_DATE\"\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                    <i *ngIf=\"report?.isStartDatePast && !report?.isStartDateAfterDueDate\" class=\"icons\" [appTooltip]=\"VALIDATION_MESSAGES.START_DATE_PAST\"\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                    <i *ngIf=\"!report?.validStartDate && !report?.isStartDatePast && !report?.isStartDateAfterDueDate\" class=\"icons\" [appTooltip]=\"report?.isStartDateFormatInvalid ? VALIDATION_MESSAGES.DATE_FORMAT : VALIDATION_MESSAGES.START_DATE\"\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                </div>\n                            </div>\n                        </ng-container>\n                        <ng-container *ngIf=\"tabType === 'ongoing'\">\n                            <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.frequency\">{{report?.frequency}}\n                                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                </div>\n                                <div class=\"exel-view-column\">{{report?.setReminder}}</div>\n                                <div class=\"exel-view-column\">{{report?.frequencyReminder}}</div>\n                            </div>\n                        </ng-container>\n                        <ng-container *ngIf=\"tabType === 'onCompletion'\">\n                            <div class=\"exel-view-row multi-column\" [class.five-column]=\"true\">\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.frequency\">{{report?.frequency}}\n                                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                </div>\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.parentResponsibility\">{{report?.parentResponsibility}}\n                                    <i *ngIf=\"!report?.parentResponsibility\" class=\"icons\" [appTooltip]=\"'Select a parent responsibility on whose completion this responsibility will become active.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                </div>\n                                <div class=\"exel-view-column\">{{report?.dueDate}}</div>\n                                <div class=\"exel-view-column\">{{report?.responsibilityWindow}}</div>\n                                <div class=\"exel-view-column\">{{report?.failedAfter}}</div>\n                            </div>\n                        </ng-container>\n                    </div>  \n                    <div class=\"exel-view-column\">{{report?.responsibilityCenter}}</div>\n                    <div class=\"exel-view-column\" [class.error]=\"!(report?.reportClass | riskClass)\">{{report?.reportClass}}\n                        <i *ngIf=\"!(report?.reportClass | riskClass)\" class=\"icons\" [appTooltip]=\"VALIDATION_MESSAGES.RISK_CLASS\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                    </div>\n                    <div class=\"exel-view-column\">{{report?.objective}}</div>\n                    <div class=\"exel-view-column\">{{report?.notes}}</div>\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\n                            <div class=\"exel-view-column multi-column\">\n                                <div class=\"exel-view-row multi-column\">\n                                    <div class=\"exel-view-column\" [class.small-column]=\"true\">{{report?.isFormat}}</div>\n                                    <div class=\"exel-view-column\">{{report?.formatForResponsibility}}</div>\n                                </div>\n                            </div>\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">{{report?.documentEvidenceRequired}}</div>\n                        </div>\n                    </div>\n                    \n                    <div class=\"exel-view-column multi-column\" [class.three-column]=\"true\">\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\n                            <div class=\"exel-view-column\" [class.error]=\"report?.reviewer && (\n                              !report?.userValidateWithProgram?.isValidReviewer )\">{{report?.reviewer}}\n\n                        \n                        <i *ngIf=\"report?.reviewer && !report?.userValidateWithProgram?.isValidReviewer\"\n                            class=\"icons\"\n                            [appTooltip]=\"'This user is not associated with the selected Program.'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n                            </div>\n                            <div class=\"exel-view-column\">{{report?.reviewToBeCompletedWithin}}</div>\n                            <div class=\"exel-view-column\">{{report?.reviewWillBeFailedAfter}}</div>\n                        </div>\n                    </div>\n\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\n                            <div class=\"exel-view-column\" [class.error]=\"report?.overseer && (\n                              !report?.userValidateWithProgram?.isValidOverseer )\">\n                            {{report?.overseer}}\n\n                                <i *ngIf=\"(report?.overseer) && !report?.userValidateWithProgram?.isValidOverseer\"\n                                    class=\"icons\"\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                                </i>\n                            </div>\n                            <div class=\"exel-view-column\" [class.error]=\"report?.notifyOnFailure && (\n                            !report?.userValidateWithProgram?.isValidNotifyOnFailure )\">\n                                {{report?.notifyOnFailure}}\n\n                                <i *ngIf=\"(report?.notifyOnFailure) && !report?.userValidateWithProgram?.isValidNotifyOnFailure\"\n                                    class=\"icons\"\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                                </i>\n                            </div>\n                        </div>\n                    </div>\n\n                    \n                </div>\n\n\n\n\n\n\n                <!-- ------------------------------------------------old code dynamic------------------------------------------------- -->\n\n                \n            </div>\n        </div>\n        <div class=\"bulk-view-option\">\n            <button *ngIf=\"bulkUpload?.frequency?.reports?.length\" [class.active]=\"tabType === 'frequency'\" (click)=\"selectedTab.emit('frequency')\">Frequency Responsibilities</button>\n            <button *ngIf=\"bulkUpload?.ongoing?.reports?.length\" [class.active]=\"tabType === 'ongoing'\" (click)=\"selectedTab.emit('ongoing')\">Ongoing Responsibilities</button>\n            <button *ngIf=\"bulkUpload?.onCompletion?.reports?.length\" [class.active]=\"tabType === 'onCompletion'\" (click)=\"selectedTab.emit('onCompletion')\">On Completion Responsibilities</button>\n        </div>\n        <div class=\"bulk-view-footer\">\n            \n            <div class=\"left\">\n                <p>{{finalResponsibilities}} out of {{responsibilityMultiTabBulkUpload?.length}} {{responsibilityMultiTabBulkUpload?.length > 1 ? 'responsibilities' : 'responsibility'}} will be\n                    uploaded.</p>\n            </div>\n            <div class=\"right\">\n                <button (click)=\"close()\" id=\"bulk-resp-cancel-multi\">Cancel</button>\n                <button (click)=\"submit()\" id=\"bulk-resp-confirm-multi\" [disabled]=\"!isConfirmClickable\" class=\"blue\">Confirm</button>\n                \n            </div>\n        </div>\n    </div>\n    <app-loader  *ngIf=\"loader\"></app-loader>\n\n</ng-container>\n\n    <!-- --------------------------------------------------------------------upward is new one-------------------- -->\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:#fff}.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,.bulk-view-body.bulk .exel-view-row.seven-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-body.bulk .exel-view-column.seven-column{width:1400px;min-width:1400px!important}.bulk-view-option{background:#fff;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:#fff}.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" }, { kind: "pipe", type: RiskClassPipe, name: "riskClass" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: BulkResponsibilityViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-bulk-responsibility-view', standalone: false, template: "\n<ng-container *ngIf=\"responsibilityType === 'singleTab'\">\n<div class=\"bulk-view\">\n    <div class=\"bulk-view-head\">\n        <h2 class=\"bulk-view-title\">\n            {{fileName}}\n        </h2>\n    </div>\n    <div class=\"bulk-view-body\">\n        <div class=\"exel-view\">\n            <div class=\"exel-view-row head\">\n                <div class=\"exel-view-column sl-no\">#</div>\n                <div class=\"exel-view-column\" *ngFor=\"let heading of responsibilityBulkUpload?.header\"\n                    [class.large]=\"heading && heading.startsWith('Inherent')\">\n                    <ng-container *ngIf=\"heading && !(heading.startsWith('Due')) && !(heading.startsWith('Oversight'))\">\n                        {{(heading.includes('*')? heading.replace('*', '') : heading)}}\n                        <span *ngIf=\"heading.includes('*')\" class=\"required\">*</span>\n                    </ng-container>\n                    <ng-container *ngIf=\"heading && heading.startsWith('Due')\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Due Date</div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\">\n                            <div class=\"exel-view-column\">Day</div>\n                            <div class=\"exel-view-column\">Month</div>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngIf=\"heading && heading.startsWith('Oversight')\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Oversight </div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\">\n                            <div class=\"exel-view-column\">Always Notify</div>\n                            <div class=\"exel-view-column\">Notify on Failure</div>\n                        </div>\n                    </ng-container>\n                </div>\n\n            </div>\n            <div class=\"exel-view-row\" *ngFor=\"let report of responsibilityBulkUpload?.reports; let i = index\">\n                <div class=\"exel-view-column sl-no\">{{i+1}}</div>\n\n                <div class=\"exel-view-column\" [class.error]=\"!report.responsibilityName\">{{report?.responsibilityName}}\n                    <i *ngIf=\"!report?.responsibilityName\" class=\"icons\"\n                        [appTooltip]=\"'Enter a name for this responsibility.'\" placement=\"bottom-right\" type=\"white\"\n                        delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                </div>\n                <div class=\"exel-view-column\">\n                    {{report?.assignor}}\n                    <i *ngIf=\"((report?.assignor) && (report?.notifyOnFailure == report?.assignor||report?.alwaysNotify == report?.assignor))\"\n                        class=\"icons\"\n                        [appTooltip]=\"'The Overseer cannot also be the Assignor of this responsibility. Select another user as the Assignor.'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>\n\n                </div>\n                <div class=\"exel-view-column\">\n                    {{report?.assignee}}\n\n                    <i *ngIf=\"((report?.assignee) && (report?.notifyOnFailure == report?.assignee||report?.alwaysNotify == report?.assignee))\"\n                        class=\"icons\"\n                        [appTooltip]=\"'The Overseer cannot also be the Assignee of this responsibility. Select another user as the Assignee.'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>\n\n                    <i *ngIf=\"((report?.assignee) && (report?.reviewer == report?.assignee))\"\n                        class=\"icons\"\n                        [appTooltip]=\"'The Reviewer cannot also be the Assignee of this responsibility. Select another user as the Assignee.'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>\n                    <i *ngIf=\"(!report?.assignee) || (!report?.isValidUser)\"\n                    class=\"icons\"\n                    [appTooltip]=\"'Select the user responsible for completing this responsibility. '\"\n                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>\n                </div>\n                <div class=\"exel-view-column\" id=\"resCategory\" *ngIf=\"report?.responsibilityCategory!==null\">{{report?.responsibilityCategory}}</div>\n                <div class=\"exel-view-column\" [class.error]=\"!report.frequency\">{{report?.frequency}}\n                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\n                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                </div>\n                <div class=\"exel-view-column multi-column\">\n                    <div class=\"exel-view-row\">\n                        <div class=\"exel-view-column\" [class.error]=\"!report.isValidDueDate\">{{report?.day}}\n                            <i *ngIf=\"!report?.isValidDueDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                            <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                        </div>\n                        <div class=\"exel-view-column\" [class.error]=\"!report.isValidDueDate\">{{report?.month}}\n                            <i *ngIf=\"!report?.isValidDueDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                            <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"exel-view-column\">{{report?.responsibilityWindow}}</div>\n                <div class=\"exel-view-column\">{{report?.failedAfter}}</div>\n                <div class=\"exel-view-column\">{{report?.reportClass}}</div>\n                <div class=\"exel-view-column\">{{report?.responsibilityCenter}}</div>\n                <div class=\"exel-view-column\">\n                    {{report?.reviewer}}\n\n                    <i *ngIf=\"(report?.reviewer) && ((report?.reviewer == report?.alwaysNotify) || (report?.reviewer == report?.notifyOnFailure))\"\n                        class=\"icons\"\n                        [appTooltip]=\"'The Overseer cannot also be the Reviewer of this responsibility. Select another user as the Reviewer'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>\n\n                    <i *ngIf=\"report?.reviewer && (report?.reviewer == report?.assignee)\" class=\"icons\"\n                        [appTooltip]=\"'The Assignee cannot also be the Reviewer of this responsibility. Select another user as the Reviewer.'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>\n                    \n                </div>\n                <div class=\"exel-view-column\">{{report?.reviewToBeCompletedWithin}}</div>\n                <div class=\"exel-view-column\">{{report?.reviewWillBeFailedAfter}}</div>\n                <div class=\"exel-view-column\">{{report?.formatForResponsibility}}</div>\n                <div class=\"exel-view-column\">{{report?.notes}}</div>\n                <div class=\"exel-view-column\">{{report?.documentEvidenceRequired}}</div>\n                <div class=\"exel-view-column multi-column\">\n                    <div class=\"exel-view-row\">\n                        <div class=\"exel-view-column\">\n                            {{report?.alwaysNotify}}\n                            <i *ngIf=\"(report?.alwaysNotify) && ((report?.reviewer == report?.alwaysNotify))\"\n                                class=\"icons\"\n                                [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                            </i>\n\n                            <i *ngIf=\"report?.alwaysNotify && (report?.alwaysNotify == report?.assignee)\" class=\"icons\"\n                                [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                            </i>\n                            <i *ngIf=\"((report?.alwaysNotify && report?.assignor) && (report?.alwaysNotify == report?.assignor)) ||((report?.alwaysNotify && (!report?.assignor)) && (report?.alwaysNotify == defaultOwner))\"\n                                class=\"icons\"\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.'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                            </i>\n                        </div>\n                        <div class=\"exel-view-column\">\n                            {{report?.notifyOnFailure}}\n                            <i *ngIf=\"(report?.notifyOnFailure) && ((report?.reviewer == report?.notifyOnFailure))\"\n                            class=\"icons\"\n                            [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n\n                        <i *ngIf=\"report?.notifyOnFailure && (report?.notifyOnFailure == report?.assignee)\" class=\"icons\"\n                            [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n                        <i *ngIf=\"((report?.notifyOnFailure && report?.assignor) && (report?.notifyOnFailure == report?.assignor)) ||((report?.notifyOnFailure && (!report?.assignor)) && (report?.notifyOnFailure == defaultOwner))\"\n                            class=\"icons\"\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.'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n                        </div>\n                    </div>\n                </div>\n\n\n                <div class=\"exel-view-column\">{{report?.keyResponsibility}}</div>\n                <div class=\"exel-view-column\">{{report?.objective}}</div>\n\n            </div>\n        </div>\n    </div>\n    <div class=\"bulk-view-footer\">\n        <div class=\"left\">\n            <p>{{finalResponsibilities}} out of {{responsibilityBulkUpload?.reports?.length}} responsibilities will be\n                uploaded.</p>\n        </div>\n        <div class=\"right\">\n            <button (click)=\"close()\" id=\"bulk-resp-cancel\" >Cancel</button>\n            <button (click)=\"submit()\" id=\"bulk-resp-confirm\" [disabled]=\"finalResponsibilities<1\" class=\"blue\">Confirm</button>\n        </div>\n    </div>\n</div>\n<app-loader  *ngIf=\"loader\"></app-loader>\n\n</ng-container>\n\n<!-- --------------------------------------------------------------------upward is new one-------------------- -->\n<app-loader  *ngIf=\"loader\"></app-loader>\n\n\n\n\n\n\n<!-- HTML for multiple tabs -->\n<ng-container *ngIf=\"responsibilityType === 'multiTab'\">\n    <div class=\"bulk-view\">\n        <div class=\"bulk-view-head\">\n            <h2 class=\"bulk-view-title\">\n                {{fileName}}\n            </h2>\n        </div>\n        <div class=\"bulk-view-body bulk\">\n            <div class=\"exel-view\">\n                <div class=\"exel-view-row head\">\n                    <div class=\"exel-view-column sl-no\">#</div>\n                    <div class=\"exel-view-column\">Responsibility Name <span class=\"required\">*</span></div>\n                    <div class=\"exel-view-column\" *ngIf=\"responsibilityBulkUpload?.header.includes('Program')\" [class.three-column]=\"true\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Program</div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\n                            <div class=\"exel-view-column\">Program Type</div>\n                            <div class=\"exel-view-column\">Program</div>\n                            <div class=\"exel-view-column\">Program Category</div>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\">Entrusted By</div>\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Entrust To <span class=\"required\">*</span></div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\n                            <div class=\"exel-view-column\">Person or Group<span class=\"required\">*</span></div>\n                            <div class=\"exel-view-column\">All or Any Persons</div>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\">Key Responsibility?</div>\n                    <div class=\"exel-view-column\" [class.five-column]=\"tabType === 'frequency' || tabType === 'onCompletion'\" [class.three-column]=\"tabType === 'ongoing'\">\n                        <div class=\"exel-view-row\">\n                            \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>\n                        </div>\n                        <div class=\"exel-view-row multi-column\" [class.five-column]=\"tabType === 'frequency' || tabType === 'onCompletion'\" [class.three-column]=\"tabType === 'ongoing'\">\n                            <ng-container *ngIf=\"tabType === 'frequency'\">\n                                <div class=\"exel-view-column\">Frequency <span class=\"required\">*</span></div>\n                                <div class=\"exel-view-column\">Due Date <span class=\"info-text\">(Day)</span></div>\n                                <div class=\"exel-view-column\">Due Date <span class=\"info-text\">(Month)</span></div>\n                                <div class=\"exel-view-column\">Start <span class=\"info-text\">(No. of days before the due date)</span></div>\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>\n                            </ng-container>\n                            <ng-container *ngIf=\"tabType === 'ongoing'\">\n                                <div class=\"exel-view-column\">Ongoing Frequency <span class=\"required\">*</span></div>\n                                <div class=\"exel-view-column\">Set a Reminder?</div>\n                                <div class=\"exel-view-column\">Frequency of Reminder</div>\n                            </ng-container>\n                            <ng-container *ngIf=\"tabType === 'onCompletion'\">\n                                <div class=\"exel-view-column\">On Completion of Frequency <span class=\"required\">*</span></div>\n                                <div class=\"exel-view-column\">Parent Responsibility<span class=\"info-text\">(Day)</span></div>\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>\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>\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>\n                            </ng-container>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\">Responsibility Centre</div>\n                    <div class=\"exel-view-column\">Risk Class</div>\n                    <div class=\"exel-view-column\">Objective</div>\n                    <div class=\"exel-view-column\">Notes</div>\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Format & Evidence</div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\" [class.three-column]=\"false\">\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">Format</div>\n                            <div class=\"exel-view-column\">Format For Responsibility (link)</div>\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">Evidence</div>\n                        </div>\n                    </div>\n                    \n                    <div class=\"exel-view-column\" [class.three-column]=\"true\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Review of Responsibility</div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\n                            <div class=\"exel-view-column\">Reviewer</div>\n                            <div class=\"exel-view-column\">Review Start <span class=\"info-text\">(No. of days before the due date)</span></div>\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>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Overseer</div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\n                            <div class=\"exel-view-column\">Always Notify</div>\n                            <div class=\"exel-view-column\">Notify on Failure</div>\n                        </div>\n                    </div>\n                    \n\n                </div>\n                <div class=\"exel-view-row\" *ngFor=\"let report of responsibilityBulkUpload?.reports; let i = index\">\n                    <div class=\"exel-view-column sl-no\" [class.error]=\"!report?.isValid\">{{i+1}}</div>\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>\n                    <div class=\"exel-view-column multi-column\" *ngIf=\"responsibilityBulkUpload?.header.includes('Program')\" [class.error]=\"false\" [class.three-column]=\"true\">\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\n                            <div class=\"exel-view-column\">{{report?.programType}}</div>\n                            <div class=\"exel-view-column\">{{report?.program}}</div>\n                            <div class=\"exel-view-column\">{{report?.programCategory}}</div>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\">{{report?.assignor}}\n                        \n                    </div>\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\n                            <div class=\"exel-view-column\" [class.error]=\"!report?.assignee || !report?.userValidateWithProgram?.isValidAssignee || (!report?.isValidUser)\">{{report?.assignee}}\n                                <!-- || (!report?.isValidUser) -->\n                                <i *ngIf=\"(!report?.assignee) || (!report?.isValidUser)\"\n                                    class=\"icons\"\n                                    [appTooltip]=\"'Select the user responsible for completing this responsibility. '\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                                </i>\n                                <i *ngIf=\"(report?.assignee) && !report?.userValidateWithProgram?.isValidAssignee\"\n                                    class=\"icons\"\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                                </i>\n                            </div>\n                            <div class=\"exel-view-column\">{{report?.assigneeType}}</div>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\">{{report?.keyResponsibility}}</div>\n                    <div class=\"exel-view-column multi-column\" [class.five-column]=\"tabType === 'frequency' || tabType === 'onCompletion'\" [class.three-column]=\"tabType === 'ongoing'\">\n                        <ng-container *ngIf=\"tabType === 'frequency'\">\n                            <div class=\"exel-view-row multi-column\" [class.five-column]=\"true\">\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.frequency\">{{report?.frequency}}\n                                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                </div>\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.validDate || report?.isPastDate\">{{report?.day}}\n                                    <i *ngIf=\"!report?.validDate\" class=\"icons\" [appTooltip]=\"report?.isDayInvalid ? VALIDATION_MESSAGES.DAY : VALIDATION_MESSAGES.DUE_DATE\"\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                    <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                </div>\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.validDate || report?.isPastDate\">{{report?.month}}\n                                    <i *ngIf=\"!report?.validDate\" class=\"icons\" [appTooltip]=\"report?.isDateFormatInvalid ? VALIDATION_MESSAGES.DATE_FORMAT : VALIDATION_MESSAGES.DUE_DATE\"\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                    <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                </div>\n                                <div class=\"exel-view-column\">{{report?.responsibilityWindow}}</div>\n                                <div class=\"exel-view-column\">{{report?.failedAfter}}</div>\n                            </div>\n                        </ng-container>\n                        <ng-container *ngIf=\"tabType === 'ongoing'\">\n                            <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.frequency\">{{report?.frequency}}\n                                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                </div>\n                                <div class=\"exel-view-column\">{{report?.setReminder}}</div>\n                                <div class=\"exel-view-column\">{{report?.frequencyReminder}}</div>\n                            </div>\n                        </ng-container>\n                        <ng-container *ngIf=\"tabType === 'onCompletion'\">\n                            <div class=\"exel-view-row multi-column\" [class.five-column]=\"true\">\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.frequency\">{{report?.frequency}}\n                                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                </div>\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.parentResponsibility\">{{report?.parentResponsibility}}\n                                    <i *ngIf=\"!report?.parentResponsibility\" class=\"icons\" [appTooltip]=\"'Select a parent responsibility on whose completion this responsibility will become active.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                </div>\n                                <div class=\"exel-view-column\">{{report?.dueDate}}</div>\n                                <div class=\"exel-view-column\">{{report?.responsibilityWindow}}</div>\n                                <div class=\"exel-view-column\">{{report?.failedAfter}}</div>\n                            </div>\n                        </ng-container>\n                    </div>  \n                    <div class=\"exel-view-column\">{{report?.responsibilityCenter}}</div>\n                    <div class=\"exel-view-column\" [class.error]=\"!(report?.reportClass | riskClass)\">{{report?.reportClass}}\n                        <i *ngIf=\"!(report?.reportClass | riskClass)\" class=\"icons\" [appTooltip]=\"VALIDATION_MESSAGES.RISK_CLASS\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                    </div>\n                    <div class=\"exel-view-column\">{{report?.objective}}</div>\n                    <div class=\"exel-view-column\">{{report?.notes}}</div>\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\n                            <div class=\"exel-view-column multi-column\">\n                                <div class=\"exel-view-row multi-column\">\n                                    <div class=\"exel-view-column\" [class.small-column]=\"true\">{{report?.isFormat}}</div>\n                                    <div class=\"exel-view-column\">{{report?.formatForResponsibility}}</div>\n                                </div>\n                            </div>\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">{{report?.documentEvidenceRequired}}</div>\n                        </div>\n                    </div>\n                    \n                    <div class=\"exel-view-column multi-column\" [class.three-column]=\"true\">\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\n                            <div class=\"exel-view-column\" [class.error]=\"report?.reviewer && (\n                              !report?.userValidateWithProgram?.isValidReviewer )\">{{report?.reviewer}}\n\n                        \n                        <i *ngIf=\"report?.reviewer && !report?.userValidateWithProgram?.isValidReviewer\"\n                            class=\"icons\"\n                            [appTooltip]=\"'This user is not associated with the selected Program.'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n                            </div>\n                            <div class=\"exel-view-column\">{{report?.reviewToBeCompletedWithin}}</div>\n                            <div class=\"exel-view-column\">{{report?.reviewWillBeFailedAfter}}</div>\n                        </div>\n                    </div>\n\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\n                            <div class=\"exel-view-column\" [class.error]=\"report?.overseer && (\n                              !report?.userValidateWithProgram?.isValidOverseer )\">\n                            {{report?.overseer}}\n\n                                <i *ngIf=\"(report?.overseer) && !report?.userValidateWithProgram?.isValidOverseer\"\n                                    class=\"icons\"\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                                </i>\n                            </div>\n                            <div class=\"exel-view-column\" [class.error]=\"report?.notifyOnFailure && (\n                            !report?.userValidateWithProgram?.isValidNotifyOnFailure )\">\n                                {{report?.notifyOnFailure}}\n\n                                <i *ngIf=\"(report?.notifyOnFailure) && !report?.userValidateWithProgram?.isValidNotifyOnFailure\"\n                                    class=\"icons\"\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                                </i>\n                            </div>\n                        </div>\n                    </div>\n\n                    \n                </div>\n\n\n\n\n\n\n                <!-- ------------------------------------------------old code dynamic------------------------------------------------- -->\n\n                \n            </div>\n        </div>\n        <div class=\"bulk-view-option\">\n            <button *ngIf=\"bulkUpload?.frequency?.reports?.length\" [class.active]=\"tabType === 'frequency'\" (click)=\"selectedTab.emit('frequency')\">Frequency Responsibilities</button>\n            <button *ngIf=\"bulkUpload?.ongoing?.reports?.length\" [class.active]=\"tabType === 'ongoing'\" (click)=\"selectedTab.emit('ongoing')\">Ongoing Responsibilities</button>\n            <button *ngIf=\"bulkUpload?.onCompletion?.reports?.length\" [class.active]=\"tabType === 'onCompletion'\" (click)=\"selectedTab.emit('onCompletion')\">On Completion Responsibilities</button>\n        </div>\n        <div class=\"bulk-view-footer\">\n            \n            <div class=\"left\">\n                <p>{{finalResponsibilities}} out of {{responsibilityMultiTabBulkUpload?.length}} {{responsibilityMultiTabBulkUpload?.length > 1 ? 'responsibilities' : 'responsibility'}} will be\n                    uploaded.</p>\n            </div>\n            <div class=\"right\">\n                <button (click)=\"close()\" id=\"bulk-resp-cancel-multi\">Cancel</button>\n                <button (click)=\"submit()\" id=\"bulk-resp-confirm-multi\" [disabled]=\"!isConfirmClickable\" class=\"blue\">Confirm</button>\n                \n            </div>\n        </div>\n    </div>\n    <app-loader  *ngIf=\"loader\"></app-loader>\n\n</ng-container>\n\n    <!-- --------------------------------------------------------------------upward is new one-------------------- -->\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:#fff}.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:#fff;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:#fff}.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', standalone: false, template: "\n<ng-container *ngIf=\"responsibilityType === 'singleTab'\">\n<div class=\"bulk-view\">\n    <div class=\"bulk-view-head\">\n        <h2 class=\"bulk-view-title\">\n            {{fileName}}\n        </h2>\n    </div>\n    <div class=\"bulk-view-body\">\n        <div class=\"exel-view\">\n            <div class=\"exel-view-row head\">\n                <div class=\"exel-view-column sl-no\">#</div>\n                <div class=\"exel-view-column\" *ngFor=\"let heading of responsibilityBulkUpload?.header\"\n                    [class.large]=\"heading && heading.startsWith('Inherent')\">\n                    <ng-container *ngIf=\"heading && !(heading.startsWith('Due')) && !(heading.startsWith('Oversight'))\">\n                        {{(heading.includes('*')? heading.replace('*', '') : heading)}}\n                        <span *ngIf=\"heading.includes('*')\" class=\"required\">*</span>\n                    </ng-container>\n                    <ng-container *ngIf=\"heading && heading.startsWith('Due')\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Due Date</div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\">\n                            <div class=\"exel-view-column\">Day</div>\n                            <div class=\"exel-view-column\">Month</div>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngIf=\"heading && heading.startsWith('Oversight')\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Oversight </div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\">\n                            <div class=\"exel-view-column\">Always Notify</div>\n                            <div class=\"exel-view-column\">Notify on Failure</div>\n                        </div>\n                    </ng-container>\n                </div>\n\n            </div>\n            <div class=\"exel-view-row\" *ngFor=\"let report of responsibilityBulkUpload?.reports; let i = index\">\n                <div class=\"exel-view-column sl-no\">{{i+1}}</div>\n\n                <div class=\"exel-view-column\" [class.error]=\"!report.responsibilityName\">{{report?.responsibilityName}}\n                    <i *ngIf=\"!report?.responsibilityName\" class=\"icons\"\n                        [appTooltip]=\"'Enter a name for this responsibility.'\" placement=\"bottom-right\" type=\"white\"\n                        delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                </div>\n                <div class=\"exel-view-column\">\n                    {{report?.assignor}}\n                    <i *ngIf=\"((report?.assignor) && (report?.notifyOnFailure == report?.assignor||report?.alwaysNotify == report?.assignor))\"\n                        class=\"icons\"\n                        [appTooltip]=\"'The Overseer cannot also be the Assignor of this responsibility. Select another user as the Assignor.'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>\n\n                </div>\n                <div class=\"exel-view-column\">\n                    {{report?.assignee}}\n\n                    <i *ngIf=\"((report?.assignee) && (report?.notifyOnFailure == report?.assignee||report?.alwaysNotify == report?.assignee))\"\n                        class=\"icons\"\n                        [appTooltip]=\"'The Overseer cannot also be the Assignee of this responsibility. Select another user as the Assignee.'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>\n\n                    <i *ngIf=\"((report?.assignee) && (report?.reviewer == report?.assignee))\"\n                        class=\"icons\"\n                        [appTooltip]=\"'The Reviewer cannot also be the Assignee of this responsibility. Select another user as the Assignee.'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>\n                    <i *ngIf=\"(!report?.assignee) || (!report?.isValidUser)\"\n                    class=\"icons\"\n                    [appTooltip]=\"'Select the user responsible for completing this responsibility. '\"\n                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>\n                </div>\n                <div class=\"exel-view-column\" id=\"resCategory\" *ngIf=\"report?.responsibilityCategory!==null\">{{report?.responsibilityCategory}}</div>\n                <div class=\"exel-view-column\" [class.error]=\"!report.frequency\">{{report?.frequency}}\n                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\n                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                </div>\n                <div class=\"exel-view-column multi-column\">\n                    <div class=\"exel-view-row\">\n                        <div class=\"exel-view-column\" [class.error]=\"!report.isValidDueDate\">{{report?.day}}\n                            <i *ngIf=\"!report?.isValidDueDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                            <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                        </div>\n                        <div class=\"exel-view-column\" [class.error]=\"!report.isValidDueDate\">{{report?.month}}\n                            <i *ngIf=\"!report?.isValidDueDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                            <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"exel-view-column\">{{report?.responsibilityWindow}}</div>\n                <div class=\"exel-view-column\">{{report?.failedAfter}}</div>\n                <div class=\"exel-view-column\">{{report?.reportClass}}</div>\n                <div class=\"exel-view-column\">{{report?.responsibilityCenter}}</div>\n                <div class=\"exel-view-column\">\n                    {{report?.reviewer}}\n\n                    <i *ngIf=\"(report?.reviewer) && ((report?.reviewer == report?.alwaysNotify) || (report?.reviewer == report?.notifyOnFailure))\"\n                        class=\"icons\"\n                        [appTooltip]=\"'The Overseer cannot also be the Reviewer of this responsibility. Select another user as the Reviewer'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>\n\n                    <i *ngIf=\"report?.reviewer && (report?.reviewer == report?.assignee)\" class=\"icons\"\n                        [appTooltip]=\"'The Assignee cannot also be the Reviewer of this responsibility. Select another user as the Reviewer.'\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                    </i>\n                    \n                </div>\n                <div class=\"exel-view-column\">{{report?.reviewToBeCompletedWithin}}</div>\n                <div class=\"exel-view-column\">{{report?.reviewWillBeFailedAfter}}</div>\n                <div class=\"exel-view-column\">{{report?.formatForResponsibility}}</div>\n                <div class=\"exel-view-column\">{{report?.notes}}</div>\n                <div class=\"exel-view-column\">{{report?.documentEvidenceRequired}}</div>\n                <div class=\"exel-view-column multi-column\">\n                    <div class=\"exel-view-row\">\n                        <div class=\"exel-view-column\">\n                            {{report?.alwaysNotify}}\n                            <i *ngIf=\"(report?.alwaysNotify) && ((report?.reviewer == report?.alwaysNotify))\"\n                                class=\"icons\"\n                                [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                            </i>\n\n                            <i *ngIf=\"report?.alwaysNotify && (report?.alwaysNotify == report?.assignee)\" class=\"icons\"\n                                [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                            </i>\n                            <i *ngIf=\"((report?.alwaysNotify && report?.assignor) && (report?.alwaysNotify == report?.assignor)) ||((report?.alwaysNotify && (!report?.assignor)) && (report?.alwaysNotify == defaultOwner))\"\n                                class=\"icons\"\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.'\"\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                            </i>\n                        </div>\n                        <div class=\"exel-view-column\">\n                            {{report?.notifyOnFailure}}\n                            <i *ngIf=\"(report?.notifyOnFailure) && ((report?.reviewer == report?.notifyOnFailure))\"\n                            class=\"icons\"\n                            [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n\n                        <i *ngIf=\"report?.notifyOnFailure && (report?.notifyOnFailure == report?.assignee)\" class=\"icons\"\n                            [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n                        <i *ngIf=\"((report?.notifyOnFailure && report?.assignor) && (report?.notifyOnFailure == report?.assignor)) ||((report?.notifyOnFailure && (!report?.assignor)) && (report?.notifyOnFailure == defaultOwner))\"\n                            class=\"icons\"\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.'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n                        </div>\n                    </div>\n                </div>\n\n\n                <div class=\"exel-view-column\">{{report?.keyResponsibility}}</div>\n                <div class=\"exel-view-column\">{{report?.objective}}</div>\n\n            </div>\n        </div>\n    </div>\n    <div class=\"bulk-view-footer\">\n        <div class=\"left\">\n            <p>{{finalResponsibilities}} out of {{responsibilityBulkUpload?.reports?.length}} responsibilities will be\n                uploaded.</p>\n        </div>\n        <div class=\"right\">\n            <button (click)=\"close()\" id=\"bulk-resp-cancel\" >Cancel</button>\n            <button (click)=\"submit()\" id=\"bulk-resp-confirm\" [disabled]=\"finalResponsibilities<1\" class=\"blue\">Confirm</button>\n        </div>\n    </div>\n</div>\n<app-loader  *ngIf=\"loader\"></app-loader>\n\n</ng-container>\n\n<!-- --------------------------------------------------------------------upward is new one-------------------- -->\n<app-loader  *ngIf=\"loader\"></app-loader>\n\n\n\n\n\n\n<!-- HTML for multiple tabs -->\n<ng-container *ngIf=\"responsibilityType === 'multiTab'\">\n    <div class=\"bulk-view\">\n        <div class=\"bulk-view-head\">\n            <h2 class=\"bulk-view-title\">\n                {{fileName}}\n            </h2>\n        </div>\n        <div class=\"bulk-view-body bulk\">\n            <div class=\"exel-view\">\n                <div class=\"exel-view-row head\">\n                    <div class=\"exel-view-column sl-no\">#</div>\n                    <div class=\"exel-view-column\">Responsibility Name <span class=\"required\">*</span></div>\n                    <div class=\"exel-view-column\" *ngIf=\"responsibilityBulkUpload?.header.includes('Program')\" [class.three-column]=\"true\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Program</div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\n                            <div class=\"exel-view-column\">Program Type</div>\n                            <div class=\"exel-view-column\">Program</div>\n                            <div class=\"exel-view-column\">Program Category</div>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\">Entrusted By</div>\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Entrust To <span class=\"required\">*</span></div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\n                            <div class=\"exel-view-column\">Person or Group<span class=\"required\">*</span></div>\n                            <div class=\"exel-view-column\">All or Any Persons</div>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\">Key Responsibility?</div>\n                    <div class=\"exel-view-column\" [class.seven-column]=\"tabType === 'frequency'\" [class.five-column]=\"tabType === 'onCompletion'\" [class.three-column]=\"tabType === 'ongoing'\">\n                        <div class=\"exel-view-row\">\n                            \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>\n                        </div>\n                        <div class=\"exel-view-row multi-column\" [class.seven-column]=\"tabType === 'frequency'\" [class.five-column]=\"tabType === 'onCompletion'\" [class.three-column]=\"tabType === 'ongoing'\">\n                            <ng-container *ngIf=\"tabType === 'frequency'\">\n                                <div class=\"exel-view-column\">Frequency <span class=\"required\">*</span></div>\n                                <div class=\"exel-view-column\">Due Date <span class=\"info-text\">(Day)</span></div>\n                                <div class=\"exel-view-column\">Due Date <span class=\"info-text\">(Month)</span></div>\n                                <div class=\"exel-view-column\">Start <span class=\"info-text\">(No. of days before the due date)</span></div>\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>\n                                <div class=\"exel-view-column\">Start Date <span class=\"info-text\">(Day)</span></div>\n                                <div class=\"exel-view-column\">Start Date <span class=\"info-text\">(Month)</span></div>\n                            </ng-container>\n                            <ng-container *ngIf=\"tabType === 'ongoing'\">\n                                <div class=\"exel-view-column\">Ongoing Frequency <span class=\"required\">*</span></div>\n                                <div class=\"exel-view-column\">Set a Reminder?</div>\n                                <div class=\"exel-view-column\">Frequency of Reminder</div>\n                            </ng-container>\n                            <ng-container *ngIf=\"tabType === 'onCompletion'\">\n                                <div class=\"exel-view-column\">On Completion of Frequency <span class=\"required\">*</span></div>\n                                <div class=\"exel-view-column\">Parent Responsibility<span class=\"info-text\">(Day)</span></div>\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>\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>\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>\n                            </ng-container>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\">Responsibility Centre</div>\n                    <div class=\"exel-view-column\">Risk Class</div>\n                    <div class=\"exel-view-column\">Objective</div>\n                    <div class=\"exel-view-column\">Notes</div>\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Format & Evidence</div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\" [class.three-column]=\"false\">\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">Format</div>\n                            <div class=\"exel-view-column\">Format For Responsibility (link)</div>\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">Evidence</div>\n                        </div>\n                    </div>\n                    \n                    <div class=\"exel-view-column\" [class.three-column]=\"true\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Review of Responsibility</div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\n                            <div class=\"exel-view-column\">Reviewer</div>\n                            <div class=\"exel-view-column\">Review Start <span class=\"info-text\">(No. of days before the due date)</span></div>\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>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row\">\n                            <div class=\"exel-view-column large\">Overseer</div>\n                        </div>\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\n                            <div class=\"exel-view-column\">Always Notify</div>\n                            <div class=\"exel-view-column\">Notify on Failure</div>\n                        </div>\n                    </div>\n                    \n\n                </div>\n                <div class=\"exel-view-row\" *ngFor=\"let report of responsibilityBulkUpload?.reports; let i = index\">\n                    <div class=\"exel-view-column sl-no\" [class.error]=\"!report?.isValid\">{{i+1}}</div>\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>\n                    <div class=\"exel-view-column multi-column\" *ngIf=\"responsibilityBulkUpload?.header.includes('Program')\" [class.error]=\"false\" [class.three-column]=\"true\">\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\n                            <div class=\"exel-view-column\">{{report?.programType}}</div>\n                            <div class=\"exel-view-column\">{{report?.program}}</div>\n                            <div class=\"exel-view-column\">{{report?.programCategory}}</div>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\">{{report?.assignor}}\n                        \n                    </div>\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\n                            <div class=\"exel-view-column\" [class.error]=\"!report?.assignee || !report?.userValidateWithProgram?.isValidAssignee || (!report?.isValidUser)\">{{report?.assignee}}\n                                <!-- || (!report?.isValidUser) -->\n                                <i *ngIf=\"(!report?.assignee) || (!report?.isValidUser)\"\n                                    class=\"icons\"\n                                    [appTooltip]=\"'Select the user responsible for completing this responsibility. '\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                                </i>\n                                <i *ngIf=\"(report?.assignee) && !report?.userValidateWithProgram?.isValidAssignee\"\n                                    class=\"icons\"\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                                </i>\n                            </div>\n                            <div class=\"exel-view-column\">{{report?.assigneeType}}</div>\n                        </div>\n                    </div>\n                    <div class=\"exel-view-column\">{{report?.keyResponsibility}}</div>\n                    <div class=\"exel-view-column multi-column\" [class.seven-column]=\"tabType === 'frequency'\" [class.five-column]=\"tabType === 'onCompletion'\" [class.three-column]=\"tabType === 'ongoing'\">\n                        <ng-container *ngIf=\"tabType === 'frequency'\">\n                            <div class=\"exel-view-row multi-column\" [class.seven-column]=\"true\">\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.frequency\">{{report?.frequency}}\n                                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                </div>\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.validDate || report?.isPastDate\">{{report?.day}}\n                                    <i *ngIf=\"!report?.validDate\" class=\"icons\" [appTooltip]=\"report?.isDayInvalid ? VALIDATION_MESSAGES.DAY : VALIDATION_MESSAGES.DUE_DATE\"\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                    <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                </div>\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.validDate || report?.isPastDate\">{{report?.month}}\n                                    <i *ngIf=\"!report?.validDate\" class=\"icons\" [appTooltip]=\"report?.isDateFormatInvalid ? VALIDATION_MESSAGES.DATE_FORMAT : VALIDATION_MESSAGES.DUE_DATE\"\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                    <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                </div>\n                                <div class=\"exel-view-column\">{{report?.responsibilityWindow}}</div>\n                                <div class=\"exel-view-column\">{{report?.failedAfter}}</div>\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.validStartDate || report?.isStartDatePast || report?.isStartDateAfterDueDate\">{{report?.startDay}}\n                                    <i *ngIf=\"report?.isStartDateAfterDueDate\" class=\"icons\" [appTooltip]=\"VALIDATION_MESSAGES.START_DATE_AFTER_DUE_DATE\"\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                    <i *ngIf=\"report?.isStartDatePast && !report?.isStartDateAfterDueDate\" class=\"icons\" [appTooltip]=\"VALIDATION_MESSAGES.START_DATE_PAST\"\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                    <i *ngIf=\"!report?.validStartDate && !report?.isStartDatePast && !report?.isStartDateAfterDueDate\" class=\"icons\" [appTooltip]=\"report?.isStartDayInvalid ? VALIDATION_MESSAGES.DAY : (report?.isStartDateFormatInvalid ? VALIDATION_MESSAGES.DATE_FORMAT : VALIDATION_MESSAGES.START_DATE)\"\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                </div>\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.validStartDate || report?.isStartDatePast || report?.isStartDateAfterDueDate\">{{report?.startMonth}}\n                                    <i *ngIf=\"report?.isStartDateAfterDueDate\" class=\"icons\" [appTooltip]=\"VALIDATION_MESSAGES.START_DATE_AFTER_DUE_DATE\"\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                    <i *ngIf=\"report?.isStartDatePast && !report?.isStartDateAfterDueDate\" class=\"icons\" [appTooltip]=\"VALIDATION_MESSAGES.START_DATE_PAST\"\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                    <i *ngIf=\"!report?.validStartDate && !report?.isStartDatePast && !report?.isStartDateAfterDueDate\" class=\"icons\" [appTooltip]=\"report?.isStartDateFormatInvalid ? VALIDATION_MESSAGES.DATE_FORMAT : VALIDATION_MESSAGES.START_DATE\"\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                </div>\n                            </div>\n                        </ng-container>\n                        <ng-container *ngIf=\"tabType === 'ongoing'\">\n                            <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.frequency\">{{report?.frequency}}\n                                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                </div>\n                                <div class=\"exel-view-column\">{{report?.setReminder}}</div>\n                                <div class=\"exel-view-column\">{{report?.frequencyReminder}}</div>\n                            </div>\n                        </ng-container>\n                        <ng-container *ngIf=\"tabType === 'onCompletion'\">\n                            <div class=\"exel-view-row multi-column\" [class.five-column]=\"true\">\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.frequency\">{{report?.frequency}}\n                                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                </div>\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.parentResponsibility\">{{report?.parentResponsibility}}\n                                    <i *ngIf=\"!report?.parentResponsibility\" class=\"icons\" [appTooltip]=\"'Select a parent responsibility on whose completion this responsibility will become active.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                                </div>\n                                <div class=\"exel-view-column\">{{report?.dueDate}}</div>\n                                <div class=\"exel-view-column\">{{report?.responsibilityWindow}}</div>\n                                <div class=\"exel-view-column\">{{report?.failedAfter}}</div>\n                            </div>\n                        </ng-container>\n                    </div>  \n                    <div class=\"exel-view-column\">{{report?.responsibilityCenter}}</div>\n                    <div class=\"exel-view-column\" [class.error]=\"!(report?.reportClass | riskClass)\">{{report?.reportClass}}\n                        <i *ngIf=\"!(report?.reportClass | riskClass)\" class=\"icons\" [appTooltip]=\"VALIDATION_MESSAGES.RISK_CLASS\"\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\n                    </div>\n                    <div class=\"exel-view-column\">{{report?.objective}}</div>\n                    <div class=\"exel-view-column\">{{report?.notes}}</div>\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\n                            <div class=\"exel-view-column multi-column\">\n                                <div class=\"exel-view-row multi-column\">\n                                    <div class=\"exel-view-column\" [class.small-column]=\"true\">{{report?.isFormat}}</div>\n                                    <div class=\"exel-view-column\">{{report?.formatForResponsibility}}</div>\n                                </div>\n                            </div>\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">{{report?.documentEvidenceRequired}}</div>\n                        </div>\n                    </div>\n                    \n                    <div class=\"exel-view-column multi-column\" [class.three-column]=\"true\">\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\n                            <div class=\"exel-view-column\" [class.error]=\"report?.reviewer && (\n                              !report?.userValidateWithProgram?.isValidReviewer )\">{{report?.reviewer}}\n\n                        \n                        <i *ngIf=\"report?.reviewer && !report?.userValidateWithProgram?.isValidReviewer\"\n                            class=\"icons\"\n                            [appTooltip]=\"'This user is not associated with the selected Program.'\"\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                        </i>\n                            </div>\n                            <div class=\"exel-view-column\">{{report?.reviewToBeCompletedWithin}}</div>\n                            <div class=\"exel-view-column\">{{report?.reviewWillBeFailedAfter}}</div>\n                        </div>\n                    </div>\n\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\n                            <div class=\"exel-view-column\" [class.error]=\"report?.overseer && (\n                              !report?.userValidateWithProgram?.isValidOverseer )\">\n                            {{report?.overseer}}\n\n                                <i *ngIf=\"(report?.overseer) && !report?.userValidateWithProgram?.isValidOverseer\"\n                                    class=\"icons\"\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                                </i>\n                            </div>\n                            <div class=\"exel-view-column\" [class.error]=\"report?.notifyOnFailure && (\n                            !report?.userValidateWithProgram?.isValidNotifyOnFailure )\">\n                                {{report?.notifyOnFailure}}\n\n                                <i *ngIf=\"(report?.notifyOnFailure) && !report?.userValidateWithProgram?.isValidNotifyOnFailure\"\n                                    class=\"icons\"\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\n                                </i>\n                            </div>\n                        </div>\n                    </div>\n\n                    \n                </div>\n\n\n\n\n\n\n                <!-- ------------------------------------------------old code dynamic------------------------------------------------- -->\n\n                \n            </div>\n        </div>\n        <div class=\"bulk-view-option\">\n            <button *ngIf=\"bulkUpload?.frequency?.reports?.length\" [class.active]=\"tabType === 'frequency'\" (click)=\"selectedTab.emit('frequency')\">Frequency Responsibilities</button>\n            <button *ngIf=\"bulkUpload?.ongoing?.reports?.length\" [class.active]=\"tabType === 'ongoing'\" (click)=\"selectedTab.emit('ongoing')\">Ongoing Responsibilities</button>\n            <button *ngIf=\"bulkUpload?.onCompletion?.reports?.length\" [class.active]=\"tabType === 'onCompletion'\" (click)=\"selectedTab.emit('onCompletion')\">On Completion Responsibilities</button>\n        </div>\n        <div class=\"bulk-view-footer\">\n            \n            <div class=\"left\">\n                <p>{{finalResponsibilities}} out of {{responsibilityMultiTabBulkUpload?.length}} {{responsibilityMultiTabBulkUpload?.length > 1 ? 'responsibilities' : 'responsibility'}} will be\n                    uploaded.</p>\n            </div>\n            <div class=\"right\">\n                <button (click)=\"close()\" id=\"bulk-resp-cancel-multi\">Cancel</button>\n                <button (click)=\"submit()\" id=\"bulk-resp-confirm-multi\" [disabled]=\"!isConfirmClickable\" class=\"blue\">Confirm</button>\n                \n            </div>\n        </div>\n    </div>\n    <app-loader  *ngIf=\"loader\"></app-loader>\n\n</ng-container>\n\n    <!-- --------------------------------------------------------------------upward is new one-------------------- -->\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:#fff}.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,.bulk-view-body.bulk .exel-view-row.seven-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-body.bulk .exel-view-column.seven-column{width:1400px;min-width:1400px!important}.bulk-view-option{background:#fff;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:#fff}.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: [{
@@ -48261,6 +48266,78 @@ class AddMultipleResponsibilityWithTabComponent {
             }
         }
     }
+    getStartDateValidation(day, month) {
+        const validation = {
+            validStartDate: true,
+            isStartDatePast: false,
+            isStartDayInvalid: false,
+            isStartDateFormatInvalid: false,
+        };
+        if (!(day || month)) {
+            return validation;
+        }
+        if (!(day && month)) {
+            validation.validStartDate = false;
+            return validation;
+        }
+        const monthFormatRegex = REGEX.MONTH;
+        if (!monthFormatRegex.test(month)) {
+            validation.isStartDateFormatInvalid = true;
+            validation.validStartDate = false;
+            return validation;
+        }
+        if (!(day > 0 && day < 32)) {
+            validation.isStartDayInvalid = true;
+            validation.validStartDate = false;
+            return validation;
+        }
+        const monthAndYear = month.split("'");
+        const parsedStartDate = moment$1(day + '-' + monthAndYear[0] + '-' + 20 + monthAndYear[1] + ' 00:00:00', 'DD-MMMM-YYYY HH:mm:ss').format('YYYY-MM-DD HH:mm:ss');
+        if (parsedStartDate == 'Invalid date') {
+            validation.isStartDayInvalid = true;
+            validation.validStartDate = false;
+            return validation;
+        }
+        if (this.isPastDate(day, month)) {
+            validation.isStartDatePast = true;
+            validation.validStartDate = false;
+        }
+        return validation;
+    }
+    parseBulkUploadDate(day, month) {
+        if (!(day && month)) {
+            return null;
+        }
+        const monthAndYear = month.split("'");
+        const parsedDate = moment$1(day + '-' + monthAndYear[0] + '-' + 20 + monthAndYear[1] + ' 00:00:00', 'DD-MMMM-YYYY HH:mm:ss');
+        return parsedDate.isValid() ? parsedDate : null;
+    }
+    isStartDateAfterDueDate(startDay, startMonth, dueDay, dueMonth) {
+        const startDate = this.parseBulkUploadDate(startDay, startMonth);
+        const dueDate = this.parseBulkUploadDate(dueDay, dueMonth);
+        if (!startDate || !dueDate) {
+            return false;
+        }
+        return startDate.isAfter(dueDate, 'day');
+    }
+    applyStartDateValidation(obj) {
+        const startDateValidation = this.getStartDateValidation(obj?.startDay, obj?.startMonth);
+        obj['validStartDate'] = startDateValidation.validStartDate;
+        obj['isStartDatePast'] = startDateValidation.isStartDatePast;
+        obj['isStartDayInvalid'] = startDateValidation.isStartDayInvalid;
+        obj['isStartDateFormatInvalid'] =
+            startDateValidation.isStartDateFormatInvalid;
+        obj['isStartDateAfterDueDate'] = false;
+        if (startDateValidation.validStartDate &&
+            !startDateValidation.isStartDatePast &&
+            obj?.day &&
+            obj?.month) {
+            obj['isStartDateAfterDueDate'] = this.isStartDateAfterDueDate(obj?.startDay, obj?.startMonth, obj?.day, obj?.month);
+            if (obj['isStartDateAfterDueDate']) {
+                obj['validStartDate'] = false;
+            }
+        }
+    }
     downloadTemplate() {
         this.downloadStatus = 'DOWNLOADING';
         this.downloadPercent = 0;
@@ -48916,18 +48993,20 @@ class AddMultipleResponsibilityWithTabComponent {
                         month: report[10],
                         responsibilityWindow: report[11],
                         failedAfter: report[12],
-                        responsibilityCenter: report[13],
-                        reportClass: report[14],
-                        objective: report[15],
-                        notes: report[16],
-                        isFormat: report[17],
-                        formatForResponsibility: report[18],
-                        documentEvidenceRequired: report[19],
-                        reviewer: report[20],
-                        reviewToBeCompletedWithin: report[21],
-                        reviewWillBeFailedAfter: report[22],
-                        overseer: report[23],
-                        notifyOnFailure: report[24],
+                        startDay: report[13],
+                        startMonth: report[14],
+                        responsibilityCenter: report[15],
+                        reportClass: report[16],
+                        objective: report[17],
+                        notes: report[18],
+                        isFormat: report[19],
+                        formatForResponsibility: report[20],
+                        documentEvidenceRequired: report[21],
+                        reviewer: report[22],
+                        reviewToBeCompletedWithin: report[23],
+                        reviewWillBeFailedAfter: report[24],
+                        overseer: report[25],
+                        notifyOnFailure: report[26],
                     };
                     obj['isValidData'] = this.isValidData(obj);
                     obj['isValidUser'] = this.returnIds(obj?.assignee, 'entrusted_to')
@@ -48938,10 +49017,14 @@ class AddMultipleResponsibilityWithTabComponent {
                     obj['isDateFormatInvalid'] = this.isDateFormatInvalid;
                     obj['isDayInvalid'] = this.isDayInvalid;
                     obj['isPastDate'] = this.isPastDate(obj?.day, obj?.month);
+                    this.applyStartDateValidation(obj);
                     obj['isValid'] =
                         obj['isValidData'] &&
                             obj['validDate'] &&
                             !obj['isPastDate'] &&
+                            obj['validStartDate'] &&
+                            !obj['isStartDatePast'] &&
+                            !obj['isStartDateAfterDueDate'] &&
                             obj?.frequency?.length &&
                             !Object.values(obj['userValidateWithProgram']).includes(false) &&
                             obj['isValidUser'] &&
@@ -48961,18 +49044,20 @@ class AddMultipleResponsibilityWithTabComponent {
                         month: report[7],
                         responsibilityWindow: report[8],
                         failedAfter: report[9],
-                        responsibilityCenter: report[10],
-                        reportClass: report[11],
-                        objective: report[12],
-                        notes: report[13],
-                        isFormat: report[14],
-                        formatForResponsibility: report[15],
-                        documentEvidenceRequired: report[16],
-                        reviewer: report[17],
-                        reviewToBeCompletedWithin: report[18],
-                        reviewWillBeFailedAfter: report[19],
-                        overseer: report[20],
-                        notifyOnFailure: report[21],
+                        startDay: report[10],
+                        startMonth: report[11],
+                        responsibilityCenter: report[12],
+                        reportClass: report[13],
+                        objective: report[14],
+                        notes: report[15],
+                        isFormat: report[16],
+                        formatForResponsibility: report[17],
+                        documentEvidenceRequired: report[18],
+                        reviewer: report[19],
+                        reviewToBeCompletedWithin: report[20],
+                        reviewWillBeFailedAfter: report[21],
+                        overseer: report[22],
+                        notifyOnFailure: report[23],
                     };
                     obj['isValidData'] = this.isValidData(obj);
                     obj['userValidateWithProgram'] = this.validateDataWithProgram(obj);
@@ -48981,10 +49066,14 @@ class AddMultipleResponsibilityWithTabComponent {
                         : false;
                     obj['validDate'] = this.compareWithCurrentDate(obj?.day, obj?.month);
                     obj['isPastDate'] = this.isPastDate(obj?.day, obj?.month);
+                    this.applyStartDateValidation(obj);
                     obj['isValid'] =
                         obj['isValidData'] &&
                             obj['validDate'] &&
                             !obj['isPastDate'] &&
+                            obj['validStartDate'] &&
+                            !obj['isStartDatePast'] &&
+                            !obj['isStartDateAfterDueDate'] &&
                             obj?.frequency?.length &&
                             obj['isValidUser'] &&
                             this.isValidRiskClass(obj?.reportClass);