vcomply-workflow-engine 6.6.3 → 6.6.4

package/fesm2022/vcomply-workflow-engine.mjs

@@ -2134,7 +2134,6 @@ class ResponsibilityService {
             program: { id: this.transformData(event.selectedCategory), tags: event.custom_tags },
             grcObjectId: event.linked_GRC_ids,
             assessmentId: event.assessment?.assessment_id,
-            customField: event.custom_tags,
         };
         return payload;
     }
@@ -4260,10 +4259,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 let PascalPipe$1 = class PascalPipe {
     transform(value, ...args) {
-        const isStaticData = args[0];
-        if (isStaticData) {
-            return '+ Add Custom Fields';
-        }
         if (typeof value !== 'string') {
             return value;
         }
@@ -4287,8 +4282,6 @@ let CsSelectComponent$1 = class CsSelectComponent {
         }
     }
     constructor() {
-        this.isArrowIcon = true;
-        this.isStaticData = false;
         this.selectedData = new EventEmitter();
         this.selectedValueChange = new EventEmitter();
         this.dropdownOption = false;
@@ -4333,11 +4326,11 @@ let CsSelectComponent$1 = class CsSelectComponent {
         this.dropdownOption = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CsSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CsSelectComponent, selector: "app-cs-select", inputs: { dataList: "dataList", dropdownLabel: "dropdownLabel", displayProperty: "displayProperty", selectedValue: "selectedValue", isRequired: "isRequired", dropdownSubLabel: "dropdownSubLabel", isArrowIcon: "isArrowIcon", isStaticData: "isStaticData", placeholder: "placeholder", stylex: "stylex", valueKey: "valueKey", colorBlock: "colorBlock", colorCode: "colorCode" }, outputs: { selectedData: "selectedData", selectedValueChange: "selectedValueChange" }, viewQueries: [{ propertyName: "option", first: true, predicate: ["option"], descendants: true }, { propertyName: "content", first: true, predicate: ["optionList"], descendants: true }], ngImport: i0, template: "<div class=\"input-group\">\n  <label *ngIf=\"dropdownLabel != undefined\">\n    {{ dropdownLabel }} <span class=\"sub-label\">{{ dropdownSubLabel }}</span> <span class=\"required\"\n      *ngIf=\"isRequired\">*</span></label>\n  <div class=\"custom-select-box\">\n    <input type=\"text\" [class.line]=\"stylex\" [placeholder]=\"placeholder\" [value]=\"selectedValue | pascal: isStaticData\"\n      readonly (click)=\"openDropdown($event)\" (keyup.enter)=\"openDropdown($event)\"\n      (keyup.arrowup)=\"openDropdown($event)\" (keyup.arrowdown)=\"openDropdown($event)\" />\n    <span *ngIf=\"isArrowIcon\" class=\"arrow\" [class.line]=\"stylex\">\n      <!-- <i class=\"icons\">&#xe9e8;</i> -->\n    </span>\n    <div class=\"vx-overlay active\" *ngIf=\"dropdownOption === true\" (click)=\"closeDropdown()\"></div>\n    <ul class=\"list-of-option\" *ngIf=\"dropdownOption === true\" #optionList (keyup.Escape)=\"closeDropdown()\"\n      [style.top.px]=\"getTop\" [style.left.px]=\"getLeft\" [style.min-width.px]=\"getWidth\" [style.max-width.px]=\"maxWidth\"\n      [class.active]=\"activeDoropdown\">\n      <li *ngFor=\"let data of dataList\">\n        <label *ngIf=\"colorBlock !== true\">\n          <input type=\"radio\" [value]=\"data[valueKey]\" name=\"sliceLabel\" (change)=\"selectOption(data)\" #option\n            (keyup.enter)=\"closeDropdown()\" class=\"pointer-none\" />\n          <span (click)=\"closeDropdown(); selectOption(data)\" *ngIf=\"displayProperty && displayProperty !== ''\"\n            class=\"value\">{{ data[displayProperty] }}</span>\n          <span (click)=\"closeDropdown(); selectOption(data)\" *ngIf=\"!displayProperty || displayProperty === ''\"\n            class=\"value\">{{ data }}</span>\n        </label>\n        <label *ngIf=\"colorBlock === true\" class=\"colors\">\n          <input type=\"radio\" [value]=\"data[valueKey]\" name=\"sliceLabel\" (change)=\"selectOption(data)\" #option\n            (keyup.enter)=\"closeDropdown()\" class=\"pointer-none\" />\n          <span (click)=\"selectOption(data)\" *ngIf=\"displayProperty && displayProperty !== ''\" class=\"value\"\n            [ngStyle]=\"{ color: colorCode }\">{{ data[displayProperty] }}</span>\n          <span (click)=\"selectOption(data)\" *ngIf=\"!displayProperty || displayProperty === ''\" class=\"value\"\n            [ngStyle]=\"{ color: colorCode }\">{{ data }}</span>\n        </label>\n      </li>\n    </ul>\n  </div>\n</div>", styles: [".input-group{position:relative;margin-bottom:0}.input-group label{font-size:11px;color:#161b2f;font-weight:500;line-height:16px;margin-bottom:5px;text-transform:uppercase;display:block}.input-group label span.required{color:#eb2424;font-size:14px}.input-group label span.sub-label{color:#747576;font-size:11px;font-weight:400;margin-left:3px}.input-group input[type=text]{height:36px;line-height:16px;font-size:13px;color:#747576;font-weight:400;background:#fff;border:1px solid #dbdbdb;border-radius:4px;width:100%;padding:10px 13px;display:block;outline:none}.input-group input[type=text].line{border:none;border-bottom:1px solid #dbdbdb;border-radius:0;padding-left:0}.input-group:focus-within input[type=text]{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd333}.input-group:focus-within input[type=text].line{box-shadow:none}.input-group .custom-select-box{position:relative}.input-group .custom-select-box input[type=text],.input-group .custom-select-box .input{cursor:pointer;padding-right:30px}.input-group .custom-select-box input[type=text].line,.input-group .custom-select-box .input.line{padding-right:20px}.input-group .arrow{position:absolute;right:17px;color:#747576;bottom:8px;font-size:10px;pointer-events:none}.input-group .arrow:before{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#707070;content:\"\";display:inline-block;right:15px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}.input-group .arrow.line{right:5px}ul.list-of-option{position:fixed;overflow:auto;max-height:200px;padding:0;margin:0;display:block;border:1px solid #dbdbdb;box-shadow:0 3px 6px #1e5dd333;z-index:2147483002;background:#fff;border-radius:2px;opacity:0}ul.list-of-option.reset{top:inherit;bottom:100%;box-shadow:0 -3px 6px #1e5dd333}ul.list-of-option.active{opacity:1}ul.list-of-option li{width:100%;display:block;margin-bottom:0;padding:0;height:auto}ul.list-of-option li label{line-height:23px;font-size:13px;font-weight:400;border-radius:4px;display:flex;position:relative;margin:0;align-items:center}ul.list-of-option li label input[type=radio]{position:absolute;margin:0;height:100%;width:100%;opacity:0;cursor:pointer}ul.list-of-option li label input[type=radio]:checked+span,ul.list-of-option li label input[type=radio]:hover+span{background:#dcdcdc}ul.list-of-option li label span.value{color:#747576;font-size:14px;line-height:21px;font-weight:400;max-width:100%;white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;padding:5px 15px;width:100%;text-transform:none;cursor:pointer;text-align:left}.vx-overlay{display:block}\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: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: PascalPipe$1, name: "pascal" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CsSelectComponent, selector: "app-cs-select", inputs: { dataList: "dataList", dropdownLabel: "dropdownLabel", displayProperty: "displayProperty", selectedValue: "selectedValue", isRequired: "isRequired", dropdownSubLabel: "dropdownSubLabel", placeholder: "placeholder", stylex: "stylex", valueKey: "valueKey", colorBlock: "colorBlock", colorCode: "colorCode" }, outputs: { selectedData: "selectedData", selectedValueChange: "selectedValueChange" }, viewQueries: [{ propertyName: "option", first: true, predicate: ["option"], descendants: true }, { propertyName: "content", first: true, predicate: ["optionList"], descendants: true }], ngImport: i0, template: "<div class=\"input-group\">\n  <label *ngIf=\"dropdownLabel != undefined\">\n    {{ dropdownLabel }} <span class=\"sub-label\">{{ dropdownSubLabel }}</span> <span class=\"required\" *ngIf=\"isRequired\">*</span></label\n  >\n  <div class=\"custom-select-box\">\n    <input\n      type=\"text\"\n      [class.line]=\"stylex\"\n      [placeholder]=\"placeholder\"\n      [value]=\"selectedValue | pascal\"\n      readonly\n      (click)=\"openDropdown($event)\"\n      (keyup.enter)=\"openDropdown($event)\"\n      (keyup.arrowup)=\"openDropdown($event)\"\n      (keyup.arrowdown)=\"openDropdown($event)\"\n    />\n    <span class=\"arrow\" [class.line]=\"stylex\">\n      <!-- <i class=\"icons\">&#xe9e8;</i> -->\n    </span>\n    <div class=\"vx-overlay active\" *ngIf=\"dropdownOption === true\" (click)=\"closeDropdown()\"></div>\n    <ul\n      class=\"list-of-option\"\n      *ngIf=\"dropdownOption === true\"\n      #optionList\n      (keyup.Escape)=\"closeDropdown()\"\n      [style.top.px]=\"getTop\"\n      [style.left.px]=\"getLeft\"\n      [style.min-width.px]=\"getWidth\"\n      [style.max-width.px]=\"maxWidth\"\n      [class.active]=\"activeDoropdown\"\n    >\n      <li *ngFor=\"let data of dataList\">\n        <label *ngIf=\"colorBlock !== true\">\n          <input type=\"radio\" [value]=\"data[valueKey]\" name=\"sliceLabel\" (change)=\"selectOption(data)\" #option (keyup.enter)=\"closeDropdown()\" class=\"pointer-none\" />\n          <span (click)=\"closeDropdown(); selectOption(data)\" *ngIf=\"displayProperty && displayProperty !== ''\" class=\"value\">{{ data[displayProperty] }}</span>\n          <span (click)=\"closeDropdown(); selectOption(data)\" *ngIf=\"!displayProperty || displayProperty === ''\" class=\"value\">{{ data }}</span>\n        </label>\n        <label *ngIf=\"colorBlock === true\" class=\"colors\">\n          <input type=\"radio\" [value]=\"data[valueKey]\" name=\"sliceLabel\" (change)=\"selectOption(data)\" #option (keyup.enter)=\"closeDropdown()\" class=\"pointer-none\" />\n          <span (click)=\"selectOption(data)\" *ngIf=\"displayProperty && displayProperty !== ''\" class=\"value\" [ngStyle]=\"{ color: colorCode }\">{{ data[displayProperty] }}</span>\n          <span (click)=\"selectOption(data)\" *ngIf=\"!displayProperty || displayProperty === ''\" class=\"value\" [ngStyle]=\"{ color: colorCode }\">{{ data }}</span>\n        </label>\n      </li>\n    </ul>\n  </div>\n</div>", styles: [".input-group{position:relative;margin-bottom:0}.input-group label{font-size:11px;color:#161b2f;font-weight:500;line-height:16px;margin-bottom:5px;text-transform:uppercase;display:block}.input-group label span.required{color:#eb2424;font-size:14px}.input-group label span.sub-label{color:#747576;font-size:11px;font-weight:400;margin-left:3px}.input-group input[type=text]{height:36px;line-height:16px;font-size:13px;color:#747576;font-weight:400;background:#fff;border:1px solid #dbdbdb;border-radius:4px;width:100%;padding:10px 13px;display:block;outline:none}.input-group input[type=text].line{border:none;border-bottom:1px solid #dbdbdb;border-radius:0;padding-left:0}.input-group:focus-within input[type=text]{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd333}.input-group:focus-within input[type=text].line{box-shadow:none}.input-group .custom-select-box{position:relative}.input-group .custom-select-box input[type=text],.input-group .custom-select-box .input{cursor:pointer;padding-right:30px}.input-group .custom-select-box input[type=text].line,.input-group .custom-select-box .input.line{padding-right:20px}.input-group .arrow{position:absolute;right:17px;color:#747576;bottom:8px;font-size:10px;pointer-events:none}.input-group .arrow:before{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#707070;content:\"\";display:inline-block;right:15px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}.input-group .arrow.line{right:5px}ul.list-of-option{position:fixed;overflow:auto;max-height:200px;padding:0;margin:0;display:block;border:1px solid #dbdbdb;box-shadow:0 3px 6px #1e5dd333;z-index:2147483002;background:#fff;border-radius:2px;opacity:0}ul.list-of-option.reset{top:inherit;bottom:100%;box-shadow:0 -3px 6px #1e5dd333}ul.list-of-option.active{opacity:1}ul.list-of-option li{width:100%;display:block;margin-bottom:0;padding:0;height:auto}ul.list-of-option li label{line-height:23px;font-size:13px;font-weight:400;border-radius:4px;display:flex;position:relative;margin:0;align-items:center}ul.list-of-option li label input[type=radio]{position:absolute;margin:0;height:100%;width:100%;opacity:0;cursor:pointer}ul.list-of-option li label input[type=radio]:checked+span,ul.list-of-option li label input[type=radio]:hover+span{background:#dcdcdc}ul.list-of-option li label span.value{color:#747576;font-size:14px;line-height:21px;font-weight:400;max-width:100%;white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;padding:5px 15px;width:100%;text-transform:none;cursor:pointer;text-align:left}.vx-overlay{display:block}\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: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: PascalPipe$1, name: "pascal" }] }); }
 };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CsSelectComponent$1, decorators: [{
             type: Component,
-            args: [{ selector: 'app-cs-select', template: "<div class=\"input-group\">\n  <label *ngIf=\"dropdownLabel != undefined\">\n    {{ dropdownLabel }} <span class=\"sub-label\">{{ dropdownSubLabel }}</span> <span class=\"required\"\n      *ngIf=\"isRequired\">*</span></label>\n  <div class=\"custom-select-box\">\n    <input type=\"text\" [class.line]=\"stylex\" [placeholder]=\"placeholder\" [value]=\"selectedValue | pascal: isStaticData\"\n      readonly (click)=\"openDropdown($event)\" (keyup.enter)=\"openDropdown($event)\"\n      (keyup.arrowup)=\"openDropdown($event)\" (keyup.arrowdown)=\"openDropdown($event)\" />\n    <span *ngIf=\"isArrowIcon\" class=\"arrow\" [class.line]=\"stylex\">\n      <!-- <i class=\"icons\">&#xe9e8;</i> -->\n    </span>\n    <div class=\"vx-overlay active\" *ngIf=\"dropdownOption === true\" (click)=\"closeDropdown()\"></div>\n    <ul class=\"list-of-option\" *ngIf=\"dropdownOption === true\" #optionList (keyup.Escape)=\"closeDropdown()\"\n      [style.top.px]=\"getTop\" [style.left.px]=\"getLeft\" [style.min-width.px]=\"getWidth\" [style.max-width.px]=\"maxWidth\"\n      [class.active]=\"activeDoropdown\">\n      <li *ngFor=\"let data of dataList\">\n        <label *ngIf=\"colorBlock !== true\">\n          <input type=\"radio\" [value]=\"data[valueKey]\" name=\"sliceLabel\" (change)=\"selectOption(data)\" #option\n            (keyup.enter)=\"closeDropdown()\" class=\"pointer-none\" />\n          <span (click)=\"closeDropdown(); selectOption(data)\" *ngIf=\"displayProperty && displayProperty !== ''\"\n            class=\"value\">{{ data[displayProperty] }}</span>\n          <span (click)=\"closeDropdown(); selectOption(data)\" *ngIf=\"!displayProperty || displayProperty === ''\"\n            class=\"value\">{{ data }}</span>\n        </label>\n        <label *ngIf=\"colorBlock === true\" class=\"colors\">\n          <input type=\"radio\" [value]=\"data[valueKey]\" name=\"sliceLabel\" (change)=\"selectOption(data)\" #option\n            (keyup.enter)=\"closeDropdown()\" class=\"pointer-none\" />\n          <span (click)=\"selectOption(data)\" *ngIf=\"displayProperty && displayProperty !== ''\" class=\"value\"\n            [ngStyle]=\"{ color: colorCode }\">{{ data[displayProperty] }}</span>\n          <span (click)=\"selectOption(data)\" *ngIf=\"!displayProperty || displayProperty === ''\" class=\"value\"\n            [ngStyle]=\"{ color: colorCode }\">{{ data }}</span>\n        </label>\n      </li>\n    </ul>\n  </div>\n</div>", styles: [".input-group{position:relative;margin-bottom:0}.input-group label{font-size:11px;color:#161b2f;font-weight:500;line-height:16px;margin-bottom:5px;text-transform:uppercase;display:block}.input-group label span.required{color:#eb2424;font-size:14px}.input-group label span.sub-label{color:#747576;font-size:11px;font-weight:400;margin-left:3px}.input-group input[type=text]{height:36px;line-height:16px;font-size:13px;color:#747576;font-weight:400;background:#fff;border:1px solid #dbdbdb;border-radius:4px;width:100%;padding:10px 13px;display:block;outline:none}.input-group input[type=text].line{border:none;border-bottom:1px solid #dbdbdb;border-radius:0;padding-left:0}.input-group:focus-within input[type=text]{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd333}.input-group:focus-within input[type=text].line{box-shadow:none}.input-group .custom-select-box{position:relative}.input-group .custom-select-box input[type=text],.input-group .custom-select-box .input{cursor:pointer;padding-right:30px}.input-group .custom-select-box input[type=text].line,.input-group .custom-select-box .input.line{padding-right:20px}.input-group .arrow{position:absolute;right:17px;color:#747576;bottom:8px;font-size:10px;pointer-events:none}.input-group .arrow:before{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#707070;content:\"\";display:inline-block;right:15px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}.input-group .arrow.line{right:5px}ul.list-of-option{position:fixed;overflow:auto;max-height:200px;padding:0;margin:0;display:block;border:1px solid #dbdbdb;box-shadow:0 3px 6px #1e5dd333;z-index:2147483002;background:#fff;border-radius:2px;opacity:0}ul.list-of-option.reset{top:inherit;bottom:100%;box-shadow:0 -3px 6px #1e5dd333}ul.list-of-option.active{opacity:1}ul.list-of-option li{width:100%;display:block;margin-bottom:0;padding:0;height:auto}ul.list-of-option li label{line-height:23px;font-size:13px;font-weight:400;border-radius:4px;display:flex;position:relative;margin:0;align-items:center}ul.list-of-option li label input[type=radio]{position:absolute;margin:0;height:100%;width:100%;opacity:0;cursor:pointer}ul.list-of-option li label input[type=radio]:checked+span,ul.list-of-option li label input[type=radio]:hover+span{background:#dcdcdc}ul.list-of-option li label span.value{color:#747576;font-size:14px;line-height:21px;font-weight:400;max-width:100%;white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;padding:5px 15px;width:100%;text-transform:none;cursor:pointer;text-align:left}.vx-overlay{display:block}\n"] }]
+            args: [{ selector: 'app-cs-select', template: "<div class=\"input-group\">\n  <label *ngIf=\"dropdownLabel != undefined\">\n    {{ dropdownLabel }} <span class=\"sub-label\">{{ dropdownSubLabel }}</span> <span class=\"required\" *ngIf=\"isRequired\">*</span></label\n  >\n  <div class=\"custom-select-box\">\n    <input\n      type=\"text\"\n      [class.line]=\"stylex\"\n      [placeholder]=\"placeholder\"\n      [value]=\"selectedValue | pascal\"\n      readonly\n      (click)=\"openDropdown($event)\"\n      (keyup.enter)=\"openDropdown($event)\"\n      (keyup.arrowup)=\"openDropdown($event)\"\n      (keyup.arrowdown)=\"openDropdown($event)\"\n    />\n    <span class=\"arrow\" [class.line]=\"stylex\">\n      <!-- <i class=\"icons\">&#xe9e8;</i> -->\n    </span>\n    <div class=\"vx-overlay active\" *ngIf=\"dropdownOption === true\" (click)=\"closeDropdown()\"></div>\n    <ul\n      class=\"list-of-option\"\n      *ngIf=\"dropdownOption === true\"\n      #optionList\n      (keyup.Escape)=\"closeDropdown()\"\n      [style.top.px]=\"getTop\"\n      [style.left.px]=\"getLeft\"\n      [style.min-width.px]=\"getWidth\"\n      [style.max-width.px]=\"maxWidth\"\n      [class.active]=\"activeDoropdown\"\n    >\n      <li *ngFor=\"let data of dataList\">\n        <label *ngIf=\"colorBlock !== true\">\n          <input type=\"radio\" [value]=\"data[valueKey]\" name=\"sliceLabel\" (change)=\"selectOption(data)\" #option (keyup.enter)=\"closeDropdown()\" class=\"pointer-none\" />\n          <span (click)=\"closeDropdown(); selectOption(data)\" *ngIf=\"displayProperty && displayProperty !== ''\" class=\"value\">{{ data[displayProperty] }}</span>\n          <span (click)=\"closeDropdown(); selectOption(data)\" *ngIf=\"!displayProperty || displayProperty === ''\" class=\"value\">{{ data }}</span>\n        </label>\n        <label *ngIf=\"colorBlock === true\" class=\"colors\">\n          <input type=\"radio\" [value]=\"data[valueKey]\" name=\"sliceLabel\" (change)=\"selectOption(data)\" #option (keyup.enter)=\"closeDropdown()\" class=\"pointer-none\" />\n          <span (click)=\"selectOption(data)\" *ngIf=\"displayProperty && displayProperty !== ''\" class=\"value\" [ngStyle]=\"{ color: colorCode }\">{{ data[displayProperty] }}</span>\n          <span (click)=\"selectOption(data)\" *ngIf=\"!displayProperty || displayProperty === ''\" class=\"value\" [ngStyle]=\"{ color: colorCode }\">{{ data }}</span>\n        </label>\n      </li>\n    </ul>\n  </div>\n</div>", styles: [".input-group{position:relative;margin-bottom:0}.input-group label{font-size:11px;color:#161b2f;font-weight:500;line-height:16px;margin-bottom:5px;text-transform:uppercase;display:block}.input-group label span.required{color:#eb2424;font-size:14px}.input-group label span.sub-label{color:#747576;font-size:11px;font-weight:400;margin-left:3px}.input-group input[type=text]{height:36px;line-height:16px;font-size:13px;color:#747576;font-weight:400;background:#fff;border:1px solid #dbdbdb;border-radius:4px;width:100%;padding:10px 13px;display:block;outline:none}.input-group input[type=text].line{border:none;border-bottom:1px solid #dbdbdb;border-radius:0;padding-left:0}.input-group:focus-within input[type=text]{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd333}.input-group:focus-within input[type=text].line{box-shadow:none}.input-group .custom-select-box{position:relative}.input-group .custom-select-box input[type=text],.input-group .custom-select-box .input{cursor:pointer;padding-right:30px}.input-group .custom-select-box input[type=text].line,.input-group .custom-select-box .input.line{padding-right:20px}.input-group .arrow{position:absolute;right:17px;color:#747576;bottom:8px;font-size:10px;pointer-events:none}.input-group .arrow:before{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#707070;content:\"\";display:inline-block;right:15px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}.input-group .arrow.line{right:5px}ul.list-of-option{position:fixed;overflow:auto;max-height:200px;padding:0;margin:0;display:block;border:1px solid #dbdbdb;box-shadow:0 3px 6px #1e5dd333;z-index:2147483002;background:#fff;border-radius:2px;opacity:0}ul.list-of-option.reset{top:inherit;bottom:100%;box-shadow:0 -3px 6px #1e5dd333}ul.list-of-option.active{opacity:1}ul.list-of-option li{width:100%;display:block;margin-bottom:0;padding:0;height:auto}ul.list-of-option li label{line-height:23px;font-size:13px;font-weight:400;border-radius:4px;display:flex;position:relative;margin:0;align-items:center}ul.list-of-option li label input[type=radio]{position:absolute;margin:0;height:100%;width:100%;opacity:0;cursor:pointer}ul.list-of-option li label input[type=radio]:checked+span,ul.list-of-option li label input[type=radio]:hover+span{background:#dcdcdc}ul.list-of-option li label span.value{color:#747576;font-size:14px;line-height:21px;font-weight:400;max-width:100%;white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;padding:5px 15px;width:100%;text-transform:none;cursor:pointer;text-align:left}.vx-overlay{display:block}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { dataList: [{
                 type: Input
             }], dropdownLabel: [{
@@ -4350,10 +4343,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], dropdownSubLabel: [{
                 type: Input
-            }], isArrowIcon: [{
-                type: Input
-            }], isStaticData: [{
-                type: Input
             }], option: [{
                 type: ViewChild,
                 args: ['option']
@@ -26784,7 +26773,7 @@ class CheckpointFloatingBarComponent {
         this.closeList.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckpointFloatingBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CheckpointFloatingBarComponent, selector: "app-checkpoint-floating-bar", inputs: { count: "count", pluralText: "pluralText", singularText: "singularText", requiredPoint: "requiredPoint", isPolicyCheckpoint: "isPolicyCheckpoint" }, outputs: { closeList: "closeList", saveList: "saveList", requiredPointChange: "requiredPointChange" }, ngImport: i0, template: "<div class=\"checkpoint-floating-bar\">\n  <div class=\"checkpoint-floating-bar-container vx-d-flex vx-align-center vx-justify-between vx-p-2 vx-pl-3 vx-pr-3\">\n    <div class=\"left\">\n      <div class=\"counter vx-fs-9 vx-fw-600 vx-txt-white vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center\">{{count}}</div>\n      <div class=\"name vx-fs-12 vx-paragraph-txt vx-ml-2\">\n        <span *ngIf=\"count < 2\">{{singularText}}</span>\n        <span *ngIf=\"count > 1\">{{pluralText}}</span>\n      </div>\n    </div>\n    <!-- <div class=\"mid\" *ngIf=\"isPolicyCheckpoint\">\n      <div class=\"name\" *ngIf=\"true\" >\n        <div class=\"label\">Total Points : {{count}}</div>\n        <em>Each question carries 1 point</em>\n        <span class=\"required\">*</span>\n        <!- - <i class=\"icons\">&#xe91f;</i> - ->\n      </div>\n      <div class=\"name points\" *ngIf=\"true\">\n        <div>\n          <div class=\"label\">Points required<br>to attest\n            <span class=\"required\">*</span>\n            <i class=\"icons\" appPopover (click)=\"policyPassing.popover()\" placement=\"right\">&#xe91f;</i> :\n          </div>\n        </div>\n        <div>\n          <input type=\"number\" [(ngModel)]=\"requiredPoint\" [max]=\"count\"   onkeydown=\"return event.keyCode !== 190\" min=\"0\"\n          oninput=\"this.value = Math.abs(this.value);\" (ngModelChange)=\"requiredPointChange.emit(requiredPoint)\"/>\n        </div>\n      </div>\n    </div> -->\n    <div class=\"right\">\n      <!-- <ng-container *ngIf=\"isPolicyCheckpoint\">\n      <div class=\"name\" *ngIf=\"true\" >\n        Total Points : {{count}}<br>\n        <i>Each question carries 1 point</i>\n        <span class=\"required\">*</span>\n        <i class=\"icons\">&#xe91f;</i>\n      </div>\n      <div class=\"name\" *ngIf=\"true\">\n        Points required to attest\n        <span class=\"required\">*</span>\n        <i class=\"icons\">&#xe91f;</i>\n        <input type=\"number\" [(ngModel)]=\"requiredPoint\" [max]=\"count\"   onkeydown=\"return event.keyCode !== 190\" min=\"0\"\n        oninput=\"this.value = Math.abs(this.value);\" (ngModelChange)=\"requiredPointChange.emit(requiredPoint)\"/>\n      </div>\n    </ng-container> -->\n      <app-cs-select *ngIf=\"false\"></app-cs-select>\n      <button appRipple class=\"cancel\" (click)=\"close()\">Cancel</button>\n      <button (click)=\"next()\" appRipple>Next <i class=\"icons\">&#xe91e;</i></button>\n    </div>\n  </div>\n</div>\n<app-popover #policyPassing [dontCloseonClick]=\"true\">\n  <div  class=\"pop\">\n   Every correct answer choice carries 1 point. You can specify the total number of questions that the reader must answer correctly in order to attest the policy.\n  </div>\n</app-popover>\n", styles: ["@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\";input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{appearance:none;-webkit-appearance:none;margin:0}::ng-deep .checkpoint-floating-bar-container{height:3rem;border-radius:.25rem;border:1px solid #f8f8f8;box-shadow:0 6px 12px #4681ef26}::ng-deep .checkpoint-floating-bar-container .left{display:flex;align-items:center;max-width:70%}::ng-deep .checkpoint-floating-bar-container .left .counter{background:#1e5dd3;border-radius:1.25rem;min-width:1.5rem;height:1rem}::ng-deep .checkpoint-floating-bar-container .mid{display:flex;align-items:center}::ng-deep .checkpoint-floating-bar-container .mid .name{color:#747576;font-size:10px;font-weight:500;line-height:16px;white-space:nowrap}::ng-deep .checkpoint-floating-bar-container .mid .name .label{color:#161b2f;font-size:11px;font-weight:500;text-transform:uppercase}::ng-deep .checkpoint-floating-bar-container .mid .name span.required{color:#eb2424;font-size:14px}::ng-deep .checkpoint-floating-bar-container .mid .name i{margin-left:3px;color:#1e5dd3;cursor:pointer}::ng-deep .checkpoint-floating-bar-container .mid .name.points{display:flex;align-items:center;margin-left:40px}::ng-deep .checkpoint-floating-bar-container .mid .name.points input[type=number]{-moz-appearance:textfield;border:1px solid #DCDCDC;border-radius:2px;width:30px;height:30px;text-align:center;margin-left:16px;color:#747576;font-size:11px;font-weight:600}::ng-deep .checkpoint-floating-bar-container .mid .name.points input[type=number]:focus{outline:none}::ng-deep .checkpoint-floating-bar-container .right{display:flex;align-items:center}::ng-deep .checkpoint-floating-bar-container .right app-cs-select{margin-left:12px;width:125px;display:flex}::ng-deep .checkpoint-floating-bar-container .right app-cs-select .input-group .custom-select-box input{height:32px}::ng-deep .checkpoint-floating-bar-container .right app-cs-select .input-group .custom-select-box span.arrow{bottom:6px}::ng-deep .checkpoint-floating-bar-container .right button{border-radius:2px;height:24px;background:#1e5dd3!important;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;font-weight:500;border:none!important;padding:0 8px;margin:0 0 0 8px}::ng-deep .checkpoint-floating-bar-container .right button i{margin-left:8px;font-size:11px}::ng-deep .checkpoint-floating-bar-container .right button:disabled{background:#f1f1f1!important;color:#747576!important;opacity:1}::ng-deep .checkpoint-floating-bar-container .right button.cancel{background:transparent!important;color:#eb2424!important}.pop{width:280px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;position:static;display:block;padding:10px;font-size:12px;color:#6e717e}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsSelectComponent$1, selector: "app-cs-select", inputs: ["dataList", "dropdownLabel", "displayProperty", "selectedValue", "isRequired", "dropdownSubLabel", "isArrowIcon", "isStaticData", "placeholder", "stylex", "valueKey", "colorBlock", "colorCode"], outputs: ["selectedData", "selectedValueChange"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closePopoverEvent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CheckpointFloatingBarComponent, selector: "app-checkpoint-floating-bar", inputs: { count: "count", pluralText: "pluralText", singularText: "singularText", requiredPoint: "requiredPoint", isPolicyCheckpoint: "isPolicyCheckpoint" }, outputs: { closeList: "closeList", saveList: "saveList", requiredPointChange: "requiredPointChange" }, ngImport: i0, template: "<div class=\"checkpoint-floating-bar\">\n  <div class=\"checkpoint-floating-bar-container vx-d-flex vx-align-center vx-justify-between vx-p-2 vx-pl-3 vx-pr-3\">\n    <div class=\"left\">\n      <div class=\"counter vx-fs-9 vx-fw-600 vx-txt-white vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center\">{{count}}</div>\n      <div class=\"name vx-fs-12 vx-paragraph-txt vx-ml-2\">\n        <span *ngIf=\"count < 2\">{{singularText}}</span>\n        <span *ngIf=\"count > 1\">{{pluralText}}</span>\n      </div>\n    </div>\n    <!-- <div class=\"mid\" *ngIf=\"isPolicyCheckpoint\">\n      <div class=\"name\" *ngIf=\"true\" >\n        <div class=\"label\">Total Points : {{count}}</div>\n        <em>Each question carries 1 point</em>\n        <span class=\"required\">*</span>\n        <!- - <i class=\"icons\">&#xe91f;</i> - ->\n      </div>\n      <div class=\"name points\" *ngIf=\"true\">\n        <div>\n          <div class=\"label\">Points required<br>to attest\n            <span class=\"required\">*</span>\n            <i class=\"icons\" appPopover (click)=\"policyPassing.popover()\" placement=\"right\">&#xe91f;</i> :\n          </div>\n        </div>\n        <div>\n          <input type=\"number\" [(ngModel)]=\"requiredPoint\" [max]=\"count\"   onkeydown=\"return event.keyCode !== 190\" min=\"0\"\n          oninput=\"this.value = Math.abs(this.value);\" (ngModelChange)=\"requiredPointChange.emit(requiredPoint)\"/>\n        </div>\n      </div>\n    </div> -->\n    <div class=\"right\">\n      <!-- <ng-container *ngIf=\"isPolicyCheckpoint\">\n      <div class=\"name\" *ngIf=\"true\" >\n        Total Points : {{count}}<br>\n        <i>Each question carries 1 point</i>\n        <span class=\"required\">*</span>\n        <i class=\"icons\">&#xe91f;</i>\n      </div>\n      <div class=\"name\" *ngIf=\"true\">\n        Points required to attest\n        <span class=\"required\">*</span>\n        <i class=\"icons\">&#xe91f;</i>\n        <input type=\"number\" [(ngModel)]=\"requiredPoint\" [max]=\"count\"   onkeydown=\"return event.keyCode !== 190\" min=\"0\"\n        oninput=\"this.value = Math.abs(this.value);\" (ngModelChange)=\"requiredPointChange.emit(requiredPoint)\"/>\n      </div>\n    </ng-container> -->\n      <app-cs-select *ngIf=\"false\"></app-cs-select>\n      <button appRipple class=\"cancel\" (click)=\"close()\">Cancel</button>\n      <button (click)=\"next()\" appRipple>Next <i class=\"icons\">&#xe91e;</i></button>\n    </div>\n  </div>\n</div>\n<app-popover #policyPassing [dontCloseonClick]=\"true\">\n  <div  class=\"pop\">\n   Every correct answer choice carries 1 point. You can specify the total number of questions that the reader must answer correctly in order to attest the policy.\n  </div>\n</app-popover>\n", styles: ["@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\";input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{appearance:none;-webkit-appearance:none;margin:0}::ng-deep .checkpoint-floating-bar-container{height:3rem;border-radius:.25rem;border:1px solid #f8f8f8;box-shadow:0 6px 12px #4681ef26}::ng-deep .checkpoint-floating-bar-container .left{display:flex;align-items:center;max-width:70%}::ng-deep .checkpoint-floating-bar-container .left .counter{background:#1e5dd3;border-radius:1.25rem;min-width:1.5rem;height:1rem}::ng-deep .checkpoint-floating-bar-container .mid{display:flex;align-items:center}::ng-deep .checkpoint-floating-bar-container .mid .name{color:#747576;font-size:10px;font-weight:500;line-height:16px;white-space:nowrap}::ng-deep .checkpoint-floating-bar-container .mid .name .label{color:#161b2f;font-size:11px;font-weight:500;text-transform:uppercase}::ng-deep .checkpoint-floating-bar-container .mid .name span.required{color:#eb2424;font-size:14px}::ng-deep .checkpoint-floating-bar-container .mid .name i{margin-left:3px;color:#1e5dd3;cursor:pointer}::ng-deep .checkpoint-floating-bar-container .mid .name.points{display:flex;align-items:center;margin-left:40px}::ng-deep .checkpoint-floating-bar-container .mid .name.points input[type=number]{-moz-appearance:textfield;border:1px solid #DCDCDC;border-radius:2px;width:30px;height:30px;text-align:center;margin-left:16px;color:#747576;font-size:11px;font-weight:600}::ng-deep .checkpoint-floating-bar-container .mid .name.points input[type=number]:focus{outline:none}::ng-deep .checkpoint-floating-bar-container .right{display:flex;align-items:center}::ng-deep .checkpoint-floating-bar-container .right app-cs-select{margin-left:12px;width:125px;display:flex}::ng-deep .checkpoint-floating-bar-container .right app-cs-select .input-group .custom-select-box input{height:32px}::ng-deep .checkpoint-floating-bar-container .right app-cs-select .input-group .custom-select-box span.arrow{bottom:6px}::ng-deep .checkpoint-floating-bar-container .right button{border-radius:2px;height:24px;background:#1e5dd3!important;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;font-weight:500;border:none!important;padding:0 8px;margin:0 0 0 8px}::ng-deep .checkpoint-floating-bar-container .right button i{margin-left:8px;font-size:11px}::ng-deep .checkpoint-floating-bar-container .right button:disabled{background:#f1f1f1!important;color:#747576!important;opacity:1}::ng-deep .checkpoint-floating-bar-container .right button.cancel{background:transparent!important;color:#eb2424!important}.pop{width:280px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;position:static;display:block;padding:10px;font-size:12px;color:#6e717e}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsSelectComponent$1, selector: "app-cs-select", inputs: ["dataList", "dropdownLabel", "displayProperty", "selectedValue", "isRequired", "dropdownSubLabel", "placeholder", "stylex", "valueKey", "colorBlock", "colorCode"], outputs: ["selectedData", "selectedValueChange"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closePopoverEvent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckpointFloatingBarComponent, decorators: [{
             type: Component,
@@ -31032,7 +31021,7 @@ class SelectQuestionComponent {
         this.choicesForPreviewMode = shuffle(this.choicesForPreviewMode);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectQuestionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SelectQuestionComponent, selector: "app-select-question", inputs: { question: "question", questionIndex: "questionIndex" }, ngImport: i0, template: "<div class=\"question-block vx-mb-1 vx-p-4\">\n  <div class=\"question-heading vx-pb-3 vx-mb-3\">\n    <span\n      class=\"count vx-fs-13 vx-fw-400 vx-label-txt vx-d-flex vx-align-center vx-justify-center\"\n      >{{ questionIndex }}</span\n    >\n    <span class=\"heading\">\n      <span\n        class=\"vx-fs-16 vx-label-txt vx-lh-6\"\n        [innerHTML]=\"question?.title == '' ? 'Question' : question?.title\"\n      ></span>\n      <span\n        *ngIf=\"question?.isRequired\"\n        class=\"required vx-fs-20 vx-fw-300 vx-ml-1\"\n        >*</span\n      >\n    </span>\n  </div>\n  <div class=\"question-inner vx-d-flex vx-justify-between\">\n    <div class=\"question-inner-inside\">\n      <ng-container\n        *ngIf=\"\n          question?.hasDescription && question?.description?.trim().length > 0\n        \"\n      >\n        <app-description-preview\n          [questionIndex]=\"questionIndex\"\n          [description]=\"question?.description\"\n        ></app-description-preview>\n      </ng-container>\n      <div class=\"question-option\">\n        <div class=\"options-area\">\n          <app-cs-select\n            [dataList]=\"choicesForPreviewMode\"\n            [valueKey]=\"'title'\"\n            [displayProperty]=\"'title'\"\n            [selectedValue]=\"'Select an option'\"\n          ></app-cs-select>\n        </div>\n      </div>\n    </div>\n    <div class=\"question-quickSettings\">\n      <app-quick-settings [question]=\"question\"></app-quick-settings>\n    </div>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/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\";::ng-deep .question-block{background:#f8f8f8;border-radius:.25rem;position:relative;min-height:12.5rem}::ng-deep .question-heading{border-bottom:1px solid #dbdbdb;position:relative}::ng-deep .question-heading .count{background:#dbdbdb;border-radius:50%;border:.5rem solid #fff;min-width:2.75rem;height:2.75rem;position:absolute;top:-.625rem;left:-3.25rem}::ng-deep .question-heading .heading .required{color:#c7381b;position:relative;top:-.25rem}::ng-deep .question-inner{position:relative}::ng-deep .question-inner-inside{padding-right:4rem}@media screen and (max-width: 667px){::ng-deep .question-inner-inside{padding-right:2.5rem!important;width:100%!important}}::ng-deep .question-inner-inside .question-option .options-area{width:70%}::ng-deep .question-inner-inside .question-option .options-area app-cs-select .input-group .custom-select-box .arrow{top:.5rem!important;right:0!important}@media screen and (max-width: 667px){::ng-deep .question-inner-inside .question-option .options-area{width:100%}}::ng-deep .question-quickSettings{position:absolute;top:0;right:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsSelectComponent$1, selector: "app-cs-select", inputs: ["dataList", "dropdownLabel", "displayProperty", "selectedValue", "isRequired", "dropdownSubLabel", "isArrowIcon", "isStaticData", "placeholder", "stylex", "valueKey", "colorBlock", "colorCode"], outputs: ["selectedData", "selectedValueChange"] }, { kind: "component", type: QuickSettingsComponent$1, selector: "app-quick-settings", inputs: ["question"] }, { kind: "component", type: DescriptionPreviewComponent, selector: "app-description-preview", inputs: ["questionIndex", "description"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SelectQuestionComponent, selector: "app-select-question", inputs: { question: "question", questionIndex: "questionIndex" }, ngImport: i0, template: "<div class=\"question-block vx-mb-1 vx-p-4\">\n  <div class=\"question-heading vx-pb-3 vx-mb-3\">\n    <span\n      class=\"count vx-fs-13 vx-fw-400 vx-label-txt vx-d-flex vx-align-center vx-justify-center\"\n      >{{ questionIndex }}</span\n    >\n    <span class=\"heading\">\n      <span\n        class=\"vx-fs-16 vx-label-txt vx-lh-6\"\n        [innerHTML]=\"question?.title == '' ? 'Question' : question?.title\"\n      ></span>\n      <span\n        *ngIf=\"question?.isRequired\"\n        class=\"required vx-fs-20 vx-fw-300 vx-ml-1\"\n        >*</span\n      >\n    </span>\n  </div>\n  <div class=\"question-inner vx-d-flex vx-justify-between\">\n    <div class=\"question-inner-inside\">\n      <ng-container\n        *ngIf=\"\n          question?.hasDescription && question?.description?.trim().length > 0\n        \"\n      >\n        <app-description-preview\n          [questionIndex]=\"questionIndex\"\n          [description]=\"question?.description\"\n        ></app-description-preview>\n      </ng-container>\n      <div class=\"question-option\">\n        <div class=\"options-area\">\n          <app-cs-select\n            [dataList]=\"choicesForPreviewMode\"\n            [valueKey]=\"'title'\"\n            [displayProperty]=\"'title'\"\n            [selectedValue]=\"'Select an option'\"\n          ></app-cs-select>\n        </div>\n      </div>\n    </div>\n    <div class=\"question-quickSettings\">\n      <app-quick-settings [question]=\"question\"></app-quick-settings>\n    </div>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/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\";::ng-deep .question-block{background:#f8f8f8;border-radius:.25rem;position:relative;min-height:12.5rem}::ng-deep .question-heading{border-bottom:1px solid #dbdbdb;position:relative}::ng-deep .question-heading .count{background:#dbdbdb;border-radius:50%;border:.5rem solid #fff;min-width:2.75rem;height:2.75rem;position:absolute;top:-.625rem;left:-3.25rem}::ng-deep .question-heading .heading .required{color:#c7381b;position:relative;top:-.25rem}::ng-deep .question-inner{position:relative}::ng-deep .question-inner-inside{padding-right:4rem}@media screen and (max-width: 667px){::ng-deep .question-inner-inside{padding-right:2.5rem!important;width:100%!important}}::ng-deep .question-inner-inside .question-option .options-area{width:70%}::ng-deep .question-inner-inside .question-option .options-area app-cs-select .input-group .custom-select-box .arrow{top:.5rem!important;right:0!important}@media screen and (max-width: 667px){::ng-deep .question-inner-inside .question-option .options-area{width:100%}}::ng-deep .question-quickSettings{position:absolute;top:0;right:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsSelectComponent$1, selector: "app-cs-select", inputs: ["dataList", "dropdownLabel", "displayProperty", "selectedValue", "isRequired", "dropdownSubLabel", "placeholder", "stylex", "valueKey", "colorBlock", "colorCode"], outputs: ["selectedData", "selectedValueChange"] }, { kind: "component", type: QuickSettingsComponent$1, selector: "app-quick-settings", inputs: ["question"] }, { kind: "component", type: DescriptionPreviewComponent, selector: "app-description-preview", inputs: ["questionIndex", "description"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectQuestionComponent, decorators: [{
             type: Component,
@@ -31795,7 +31784,6 @@ class WorkflowComplianceComponent {
             new_checkpoints: {},
             linkedProgram: [],
             selectedGRCObjects: [],
-            customFields: [],
         };
         this.moreOptions = {
             OBJECTIVE: false,
@@ -31813,7 +31801,6 @@ class WorkflowComplianceComponent {
             REQUIRES_AUDIT: false,
             CHECKPOINTS_NEW: false,
             GRC_OBJECTS: false,
-            CUSTOM_FIELDS: false,
         };
         this.activeSelector = '';
         this.sideSelectorElements = [
@@ -31835,7 +31822,6 @@ class WorkflowComplianceComponent {
             'requires_audit',
             'checkpoints-new',
             'GRC_OBJECTS',
-            'CUSTOM_FIELDS',
         ];
         this.focus = {
             responsibilityName: false,
@@ -31910,20 +31896,8 @@ class WorkflowComplianceComponent {
         this.assignorsListLoader = false;
         this.allowEditDueDateFeatureFlag = false;
         this.allProgamSelected = [];
-        this.customFieldsSelected = '+ Add Custom Fields';
         this.unSubscribeProgram = new Subject();
-        this.customFields = [];
         this.selectedPrograms = {};
-        this.getOrgUserInfo();
-    }
-    ngOnInit() {
-        this.setFeatureFlags();
-        this.getInitialData();
-        this.populateRCList();
-        this.pickerChanged.emit(false);
-    }
-    getOrgUserInfo() {
-        this.loader = true;
         this.organizationCommonService?.getOrgUserInfo()?.subscribe({
             next: (res) => {
                 const complianceSubmodule = res?.roleActions[res?.roleActions?.findIndex((ele) => ele?.moduleName === 'compliance')]?.subModule;
@@ -31939,10 +31913,15 @@ class WorkflowComplianceComponent {
                     this.hiddenList.push('PROGRAM');
                     this.getCategoryList();
                 }
-                this.loader = false;
             },
         });
     }
+    ngOnInit() {
+        this.setFeatureFlags();
+        this.pickerChanged.emit(false);
+        this.getInitialData();
+        this.populateRCList();
+    }
     populateRCList() {
         if (this.openedFrom === 'RISK_TREATMENT' && this.mode === 'CREATE') {
             this.getRCList();
@@ -31963,7 +31942,6 @@ class WorkflowComplianceComponent {
         this.checkWhetherAllListsLoaded();
         this.getOrganizationDetails();
         this.getUserDetails();
-        this.checkCustomFields();
         this.shortMonth = this.frequencyService.monthArray.map((month) => month.substring(0, 3));
         if (this.openedFrom === 'RISK_TREATMENT') {
             this.getRCDetailsinRiskTreatment();
@@ -31984,21 +31962,11 @@ class WorkflowComplianceComponent {
         this.setResponsibilityName();
         this.hideElementsFromMoreOptions.emit(this.hiddenList);
     }
-    checkCustomFields() {
-        if (!this.customFields?.length) {
-            if (!this.hiddenList.includes('CUSTOM_FIELDS')) {
-                this.hiddenList.push('CUSTOM_FIELDS');
-            }
-        }
-        this.hideElementsFromMoreOptions.emit(this.hiddenList);
-    }
     getRCDetailsinRiskTreatment() {
         this.responsibilityForm.rc = this.setList(this.responsibilityCentersList, [this.selectedRC], 'item_id');
         this.moreOptions.RC = true;
     }
     getOrgDetails() {
-        this.uiKitService.isLoader = true;
-        this.entrustLoader = true;
         this.organizationCommonService?.getOrgDetailsInfo()?.subscribe({
             next: (res) => {
                 this.isRiskEnable = res?.enable_riskclass ? true : false;
@@ -32006,13 +31974,9 @@ class WorkflowComplianceComponent {
                     this.hiddenList.push('RISK_CLASSIFICATION');
                     this.hideElementsFromMoreOptions.emit(this.hiddenList);
                 }
-                this.uiKitService.isLoader = false;
-                this.entrustLoader = false;
             },
             error: (err) => {
                 console.error(err);
-                this.uiKitService.isLoader = false;
-                this.entrustLoader = false;
             },
         });
     }
@@ -32056,17 +32020,8 @@ class WorkflowComplianceComponent {
             case 'assignees':
                 this.getGroupsList();
                 break;
-            case 'CUSTOM_FIELDS':
-                this.setCustomFields(event);
-                break;
         }
     }
-    setCustomFields(event) {
-        this.customFieldsSelected = '+ Add Custom Fields';
-        this.responsibilityForm.customFields.push(event);
-        this.customFields = this.customFields.filter((ele) => ele.id !== event.id);
-        this.activeSelector = '';
-    }
     setResponsibilityName() {
         if (this.assessmentDetails?.assessment_type === 'compliance_audit') {
             const assessmentData = {
@@ -32115,51 +32070,10 @@ class WorkflowComplianceComponent {
         }
         this.complianceCommonService?.getRcListInfo(params)?.subscribe({
             next: (res) => {
-                // Normalise RC list structure so UI components can rely on item_id / item_name
-                this.responsibilityCentersList = Array.isArray(res)
-                    ? res.map((item) => {
-                        // Determine item_name - prioritize existing item_name, then rc_name
-                        let itemName = item?.item_name;
-                        if (!itemName || itemName === '') {
-                            if (Array.isArray(item?.rc_name) && item.rc_name.length > 0) {
-                                // Filter out empty strings and join array elements with ' / ' separator
-                                const filteredRcName = item.rc_name.filter((name) => name && name.trim() !== '');
-                                itemName = filteredRcName.join(' / ');
-                            }
-                            else if (item?.rc_name && typeof item.rc_name === 'string') {
-                                // Use rc_name as string
-                                itemName = item.rc_name;
-                            }
-                            else if (Array.isArray(item?.item_name) && item.item_name.length > 0) {
-                                // Fallback: if item_name is an array, filter and join it
-                                const filteredItemName = item.item_name.filter((name) => name && name.trim() !== '');
-                                itemName = filteredItemName.join(' / ');
-                            }
-                        }
-                        // Clean up the name - remove any extra spaces, trim, and ensure it's a string
-                        if (itemName) {
-                            if (typeof itemName === 'string') {
-                                itemName = itemName.trim();
-                            }
-                            else {
-                                // Convert to string if it's not already
-                                itemName = String(itemName).trim();
-                            }
-                        }
-                        const normalised = {
-                            ...item,
-                            // item_id is what the RC selector & floating bar expect
-                            item_id: item?.item_id ?? item?.rc_id ?? item?.rcid ?? null,
-                            // item_name is what floating bar displays - ensure it's properly set
-                            item_name: itemName || item?.item_name || (Array.isArray(item?.rc_name) ? item.rc_name.join(' / ') : item?.rc_name) || '',
-                        };
-                        return normalised;
-                    })
-                    : [];
+                this.responsibilityCentersList = res;
                 this.rcListLoaded = true;
-                // Extract IDs using the normalised key
-                const ids = this.returnIds(this.responsibilityForm.rc, 'item_id');
-                const RC = this.responsibilityCentersList.filter((element) => ids?.includes(element.item_id));
+                const ids = this.returnIds(this.responsibilityForm.rc, 'rcid');
+                const RC = this.responsibilityCentersList.filter((element) => ids?.includes(element.rcid));
                 if (RC?.length) {
                     this.responsibilityForm.rc = RC;
                 }
@@ -33285,18 +33199,8 @@ class WorkflowComplianceComponent {
             case 'GRC_OBJECTS':
                 this.removeOtherGRCObjects(event);
                 break;
-            case 'CUSTOM_FIELDS':
-                this.removeCustomFields(event);
-                break;
         }
     }
-    removeCustomFields(event) {
-        const index = this.responsibilityForm.customFields.findIndex((ele) => ele.id === event.id);
-        if (index !== -1) {
-            this.responsibilityForm.customFields.splice(index, 1);
-        }
-        this.customFields.push(event);
-    }
     saveGroupAssigneeData(selectedItems) {
         let userObj;
         userObj = selectedItems?.length ? selectedItems : selectedItems?.users;
@@ -33804,7 +33708,7 @@ class WorkflowComplianceComponent {
         if (this.responsibilityForm.assignors.enable &&
             this.responsibilityForm.assignors.list?.length === 0) {
             this.invalidType = 'whom';
-            return false;
+            return;
         }
         if (!this.responsibilityForm.responsibility.name ||
             this.responsibilityForm.responsibility.name.trim() == '') {
@@ -33823,7 +33727,6 @@ class WorkflowComplianceComponent {
             this.responsibilityForm.frequency === '' ||
             this.responsibilityForm.frequency === '5~0~0~0') {
             this.invalidType = 'when';
-            return false;
         }
         else {
             this.invalidType = '';
@@ -33949,12 +33852,7 @@ class WorkflowComplianceComponent {
             cost_of_compliance: '',
             created_by: entrustForm.assignors.list?.length < 1 ? 0 : this.memberId,
             creation_window: 0,
-            custom_tags: entrustForm.customFields.map((ele) => {
-                return {
-                    id: ele.id,
-                    value: ele.value,
-                };
-            }),
+            custom_tags: entrustForm.customTags,
             entity_tree: moreOptions?.RC
                 ? this.isResponsibilityRcLinkEnabled &&
                     this.responsibilityCenterType == 1
@@ -34151,13 +34049,7 @@ class WorkflowComplianceComponent {
                 }
                 //this.reset();
             }, (err) => {
-                console.error('[WorkflowCompliance] entrustResponsibility - Error response:', {
-                    error: err,
-                    errorMessage: err?.message,
-                    errorStatus: err?.status,
-                    errorBody: err?.error,
-                    payload: responsibilityPayload
-                });
+                console.error(err);
                 this.loader = false;
                 this.entrustLoader = false;
                 this.uiKitService.isLoader = false;
@@ -35087,11 +34979,6 @@ class WorkflowComplianceComponent {
             checkedMoreOptions.push('CHECKPOINTS_NEW');
             this.moreOptions.CHECKPOINTS_NEW = true;
         }
-        //if custom fields are present in the responsibility form and custom fields are present in the custom fields list
-        if (this.responsibilityForm.customFields?.length > 0 && this.customFields?.length > 0) {
-            checkedMoreOptions.push('CUSTOM_FIELDS');
-            this.moreOptions.CUSTOM_FIELDS = true;
-        }
         this.populateOption.emit(checkedMoreOptions);
     }
     // Format & Evidence
@@ -35286,9 +35173,6 @@ class WorkflowComplianceComponent {
      * "getOtherGRCTabCount" function. It is of type "any", which means it can accept any data type.
      */
     getOtherGRCTabCount(event) {
-        if (!event) {
-            event = {};
-        }
         event['rc_ids'] = this.getAllRCIds(this.responsibilityForm.rc);
         this.grcTabLoader = true;
         this.grcService.getGRCTabsCount(event).subscribe((data) => {
@@ -35315,34 +35199,15 @@ class WorkflowComplianceComponent {
         });
     }
     getAllRCIds(rcIds) {
-        if (!rcIds || !Array.isArray(rcIds) || rcIds.length === 0) {
-            return '';
-        }
-        const allIds = rcIds.flatMap((rc) => {
-            if (!rc) {
-                return [];
-            }
-            const parentIds = (rc.item_parent_ids && Array.isArray(rc.item_parent_ids))
-                ? rc.item_parent_ids.map(Number)
-                : [];
-            const childIds = (rc.item_child_ids && Array.isArray(rc.item_child_ids))
-                ? rc.item_child_ids.map(Number)
-                : [];
-            const rcId = Number(rc.rc_id || rc.rcid || rc.item_id || 0);
-            return [
-                ...parentIds,
-                ...childIds,
-                rcId
-            ];
-        });
-        const result = this.responsibilityCentersList
-            .filter((rc) => {
-            const rcIdToMatch = rc?.rc_id || rc?.rcid || rc?.item_id;
-            return allIds.includes(Number(rcIdToMatch));
-        })
-            .map((ele) => ele._id || ele.rcid || ele.item_id)
+        const allIds = rcIds.flatMap((rc) => [
+            ...rc.item_parent_ids.map(Number),
+            ...rc.item_child_ids.map(Number),
+            Number(rc.rc_id),
+        ]);
+        return this.responsibilityCentersList
+            .filter((rc) => allIds.includes(rc?.rc_id))
+            .map((ele) => ele._id)
             .join(',');
-        return result;
     }
     setOtherGRCTypesFormate() {
         const grcTypes = GRC_TYPE_ARRAY;
@@ -35468,12 +35333,7 @@ class WorkflowComplianceComponent {
             frequency: res?.frequency,
             description: res?.notes,
             objective: res?.objective,
-            rc: (() => {
-                const rcId = res.responsibilityCenter?.id;
-                // After normalisation RCs should always have item_id populated
-                const rcResult = this.setList(this.responsibilityCentersList, rcId ? [rcId] : [], 'item_id');
-                return rcResult;
-            })(),
+            rc: this.setList(this.responsibilityCentersList, res.responsibilityCenter?.id, 'rcid'),
             responsibilityCenterType: res.responsibilityCenter?.type === 'all' ? 1 : 0,
             category: res?.program_cat_ids?.length
                 ? res?.category_ids_array.filter((ele) => !res.program_cat_ids?.includes(ele))
@@ -35524,9 +35384,7 @@ class WorkflowComplianceComponent {
             requiresAuditList: [],
             riskClass: res?.riskClass,
             selectedGRCObjects: res?.meta?.linkedEntities?.grcObjects ?? [],
-            customFields: this.populateCustomFields(res) ?? [],
         };
-        this.customFields = this.customFields?.filter((ele) => !res?.customField?.some((field) => field.id === ele.id));
         const GRC_OBJECTS = res?.meta?.linkedEntities?.grcObjects ?? [];
         if (GRC_OBJECTS?.length > 0) {
             this.populateGRCObjectDetails(GRC_OBJECTS);
@@ -35536,19 +35394,6 @@ class WorkflowComplianceComponent {
         this.getEditMoreOptions(res);
         this.populateformatDetails(res);
     }
-    //populate custom fields
-    populateCustomFields(res) {
-        if (!this.customFields?.length || !res?.customField?.length)
-            return [];
-        return res?.customField?.map((ele) => {
-            const customField = this.customFields?.find((field) => field.id === ele.id);
-            return {
-                name: customField?.name,
-                id: ele.id,
-                value: ele.value,
-            };
-        });
-    }
     //populate format Details
     populateformatDetails(res) {
         const formatObject = [];
@@ -35614,11 +35459,11 @@ class WorkflowComplianceComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WorkflowComplianceComponent, deps: [{ token: AuthService$1 }, { token: ResponsibilityService }, { token: FrequencyService }, { token: UiKitService }, { token: SnackBarService }, { token: AuthService$1 }, { token: ProgramsService }, { token: GrcService }, { token: OrganizationUserService }, { token: ComplianceCommonService }, { token: OrganizationCommonService }, { token: IframeService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: WorkflowComplianceComponent, selector: "app-workflow-compliance", inputs: { mode: "mode", responsibilityId: "responsibilityId", frameworkDetails: "frameworkDetails", isEntrust: "isEntrust", feature: "feature", assessmentDetails: "assessmentDetails", isDuplicate: "isDuplicate", closeOnEsc: "closeOnEsc", orgDetails: "orgDetails", openedFrom: "openedFrom", selectedRC: "selectedRC", setSelectedProgram: ["selectedProgram", "setSelectedProgram"], responsibilityDetails: "responsibilityDetails", customFields: "customFields" }, outputs: { pickerChanged: "pickerChanged", populateOption: "populateOption", hideElementsFromMoreOptions: "hideElementsFromMoreOptions", closeWorkflow: "closeWorkflow", resetForm: "resetForm", disconnectRefresh: "disconnectRefresh", checkpointCountUpdated: "checkpointCountUpdated", rcSelected: "rcSelected", onRemovingCheckpoint: "onRemovingCheckpoint", isAssessmentDisabled: "isAssessmentDisabled", assigneeTypeChange: "assigneeTypeChange", onReviewerTypeChange: "onReviewerTypeChange" }, viewQueries: [{ propertyName: "whatInput", first: true, predicate: ["what"], descendants: true }, { propertyName: "customItemTemplate", first: true, predicate: ["customItemTemplate"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"workflw-compliance\" *ngIf=\"!showSmiley\">\n  <!-- Behalf -->\n  <div *ngIf=\"mode !== 'EDIT'\" class=\"form-group-row\" [class.active]=\"activeSelector === 'assignors'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'assignors' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"\n        responsibilityForm?.assignors?.list?.length > 0 &&\n        activeSelector !== 'assignors'\n      \">\n      <img [src]=\"ASSETS.im_creating\" alt=\"im\" *ngIf=\"\n          responsibilityForm?.assignors?.list?.length == 0 ||\n          activeSelector === 'assignors'\n        \" />\n\n      <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\" *ngIf=\"\n          responsibilityForm?.assignors?.list?.length > 0 &&\n          activeSelector !== 'assignors'\n        \">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">I am creating this responsibility on behalf of someone else\n          <app-cs-switch [ngValue]=\"responsibilityForm.assignors.enable\" (ngValueChange)=\"\n              responsibilityForm.assignors.enable = $event;\n              responsibilityForm.assignors.list = []\n            \">\n          </app-cs-switch>\n        </label>\n        <div class=\"select\" *ngIf=\"\n            responsibilityForm?.assignors?.list?.length === 0 ||\n            activeSelector === 'assignors'\n          \">\n          <input type=\"text\" (click)=\"activateSelector('assignors', true)\"\n            placeholder=\"Who is responsible for managing this responsibility?\" readonly\n            [disabled]=\"!responsibilityForm?.assignors?.enable\" />\n        </div>\n        <div class=\"selected\" *ngIf=\"\n            responsibilityForm?.assignors?.list?.length > 0 &&\n            activeSelector !== 'assignors'\n          \">\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n            <ng-container *ngFor=\"\n                let b_user of responsibilityForm?.assignors?.list?.slice(0, 1)\n              \">\n              <i (click)=\"remove('assignors', b_user)\"\n                class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"b_user.member_name\" placement=\"bottom-left\"\n                delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ b_user.member_name }}</span>\n            </ng-container>\n            <button *ngIf=\"responsibilityForm?.assignors?.list?.length > 1\"\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 (click)=\"behalf.popover()\" placement=\"right\">\n              +{{ responsibilityForm?.assignors?.list?.slice(1).length }}\n            </button>\n          </div>\n\n          <!-- <div class=\"chip-container\">\n                      <span class=\"chip\" *ngFor=\"let b_user of responsibilityForm?.assignors?.list?.slice(0,2)\"><i\n                              class=\"icons\" (click)=\"remove('assignors',b_user)\">&#xe90d;</i>\n                          {{b_user.member_name}}</span>\n                      <button class=\"count\" *ngIf=\"responsibilityForm?.assignors?.list?.length > 2\" type=\"button\"\n                          appPopover (click)=\"behalf.popover()\" placement=\"right\">+\n                          {{responsibilityForm?.assignors?.list?.slice(2).length}}</button>\n                  </div> -->\n          <button *ngIf=\"activeSelector !== 'assignors'\" class=\"edit\" type=\"button\"\n            (click)=\"activateSelector('assignors', true)\">\n            <i class=\"icons\">&#xe9ba;</i> Edit\n          </button>\n        </div>\n        <app-popover #behalf [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let b_user of responsibilityForm?.assignors?.list | slice : 2;\n                  let j = index\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i class=\"icons\" (click)=\"remove('assignors', b_user)\">&#xe90d;</i>\n                    {{ b_user.member_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n        <p *ngIf=\"invalidType === 'whom'\" [appScrollInView]=\"true\" class=\"error-message\">\n          Please select the person responsible for managing this responsibility.\n        </p>\n      </div>\n    </div>\n  </div>\n\n  <!-- What -->\n  <div class=\"form-group-row\" [class.active]=\"activeSelector === 'framework'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'responsibilityName' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"\n        responsibilityForm?.responsibility?.name.trim() !== '' &&\n        !focus.responsibilityName\n      \">\n      <img [src]=\"ASSETS.what\" alt=\"im\" *ngIf=\"\n          responsibilityForm?.responsibility?.name.trim() === '' ||\n          focus.responsibilityName\n        \" />\n\n      <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\" *ngIf=\"\n          responsibilityForm?.responsibility?.name.trim() !== '' &&\n          !focus.responsibilityName\n        \">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">\n          What? <span class=\"required\">*</span>\n          <button *ngIf=\"\n              isFrameworkAvailable &&\n              mode !== 'EDIT' &&\n              openedFrom !== 'RISK_TREATMENT' &&\n              assessmentDetails?.assessment_type !== 'compliance_audit'\n            \" (click)=\"activateSelector('framework', true)\" class=\"button\">\n            Select From A framework\n          </button>\n        </label>\n        <span *ngIf=\"responsibilityForm?.responsibility?.keyResponsibility\" class=\"indicator\"\n          [appTooltip]=\"'This responsibility is marked as key responsibility.'\" placement=\"bottom\" type=\"black\"\n          delay=\"0\" [tooltipMandatory]=\"true\">\n          <i class=\"icons\">&#xea70;</i>\n        </span>\n        <input *ngIf=\"\n            responsibilityForm?.responsibility?.name.trim() == '' || !isEditWhat\n          \" type=\"text\" [ngModel]=\"responsibilityForm.responsibility.name\" placeholder=\"What is the responsibility?\"\n          (change)=\"whatChanged($event)\" (focusin)=\"activateSelector('responsibilityName', true)\"\n          (focusout)=\"activeDeselector()\" (clickOutside)=\"testFunction()\" #what />\n        <div class=\"selected\" *ngIf=\"\n            responsibilityForm?.responsibility?.name.trim() != '' && isEditWhat\n          \">\n          <div class=\"chip-container\">\n            <span class=\"value\">{{\n              responsibilityForm.responsibility?.name\n              }}</span>\n          </div>\n          <button *ngIf=\"assessmentDetails?.assessment_type !== 'compliance_audit'\" class=\"edit\" type=\"button\"\n            (click)=\"onEditWhat($event)\">\n            <i class=\"icons\">&#xe9ba;</i> Edit\n          </button>\n        </div>\n        <p *ngIf=\"invalidType === 'what'\" [appScrollInView]=\"true\" class=\"error-message\">\n          Please enter a name for this responsibility.\n        </p>\n        <div class=\"switch-row align-right\">\n          <app-cs-switch [ngValue]=\"responsibilityForm.responsibility?.keyResponsibility\" (ngValueChange)=\"\n              responsibilityForm.responsibility.keyResponsibility = $event\n            \">Key Responsibility\n          </app-cs-switch>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Who -->\n  <div class=\"form-group-row\" [class.active]=\"activeSelector === 'assignees'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'assignees' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"\n        responsibilityForm?.assignees?.list?.length > 0 &&\n        activeSelector !== 'assignees'\n      \">\n      <img [src]=\"ASSETS.case_assignees\" alt=\"im\" *ngIf=\"\n          responsibilityForm?.assignees?.list?.length == 0 ||\n          activeSelector === 'assignees'\n        \" />\n\n      <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\" *ngIf=\"\n          responsibilityForm?.assignees?.list?.length > 0 &&\n          activeSelector !== 'assignees'\n        \">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <div class=\"edit-due-date\">\n          <label class=\"vx-control-panel\">Who? <span class=\"required\">*</span></label>\n          <div *ngIf=\"allowEditDueDateFeatureFlag && false\" class=\"switch-row align-right\">\n            <app-cs-switch [ngValue]=\"responsibilityForm.allowEditDueDate\"\n              (ngValueChange)=\"responsibilityForm.allowEditDueDate = $event\">ALLOW ASSIGNEE TO EDIT COMPLETED WORK<i\n                class=\"icons\" [appTooltip]=\"\n                  'If it\u2019s enabled, the assignee will have the option to modify a previously completed due date.'\n                \" placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i>\n            </app-cs-switch>\n          </div>\n        </div>\n        <div class=\"select vx-mt-0\" *ngIf=\"\n            responsibilityForm?.assignees?.list?.length == 0 &&\n            (!featureFlag_groups ||\n              (responsibilityForm?.assigneeGroups?.list?.length == 0 &&\n                featureFlag_groups))\n          \">\n          <input type=\"text\" (click)=\"activateSelector('assignees', true)\"\n            placeholder=\"Who is responsible for completing the responsibility?\" readonly />\n        </div>\n\n        <div class=\"selected\" *ngIf=\"\n            (responsibilityForm?.assignees?.list?.length > 0 &&\n              !featureFlag_groups) ||\n            ((responsibilityForm?.assignees?.list?.length > 0 ||\n              responsibilityForm?.assigneeGroups?.list?.length > 0) &&\n              featureFlag_groups)\n          \">\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"!featureFlag_groups\">\n            <ng-container *ngFor=\"\n                let e_user of responsibilityForm?.assignees?.list?.slice(0, 1)\n              \">\n              <i (click)=\"remove('assignees', e_user)\"\n                class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"e_user.member_name\" placement=\"bottom-left\"\n                delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ e_user.member_name }}</span>\n            </ng-container>\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 greenbg\"\n              appPopover (click)=\"assignees.popover()\" placement=\"right\"\n              *ngIf=\"responsibilityForm?.assignees?.list?.length > 1\">\n              +{{ responsibilityForm?.assignees?.list?.slice(1).length }}\n            </button>\n          </div>\n\n          <div class=\"vx-d-flex vx-align-center\" *ngIf=\"featureFlag_groups\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n              *ngIf=\"responsibilityForm?.assignees?.list?.length > 0\">\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"\n                  remove('assignees', responsibilityForm?.assignees?.list[0])\n                \">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"\n                  responsibilityForm?.assignees?.list[0]?.employee_name\n                \" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\">{{\n                responsibilityForm?.assignees?.list[0]?.employee_name\n                }}</span>\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 greenBg\"\n                appPopover (click)=\"user.popover()\" placement=\"left\"\n                *ngIf=\"responsibilityForm?.assignees?.list?.length > 1\">\n                +{{ responsibilityForm?.assignees?.list?.length - 1 }}\n              </button>\n            </div>\n            <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"\n                responsibilityForm?.assignees?.list?.length > 0 &&\n                responsibilityForm?.assigneeGroups?.list?.length > 0\n              \">&</span>\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n              *ngIf=\"responsibilityForm?.assigneeGroups?.list?.length\">\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"\n                  remove(\n                    'groupassignees',\n                    responsibilityForm?.assigneeGroups?.list[0]\n                  )\n                \">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"\n                  responsibilityForm?.assigneeGroups?.list[0]?.group_name\n                \" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\">{{\n                responsibilityForm?.assigneeGroups?.list[0]?.group_name\n                }}</span>\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 (click)=\"group.popover()\" placement=\"right\"\n                *ngIf=\"responsibilityForm?.assigneeGroups?.list?.length > 1\">\n                +{{ responsibilityForm?.assigneeGroups?.list?.length - 1 }}\n              </button>\n            </div>\n          </div>\n\n          <!-- <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.assignees?.length>1\" [class.plus]=\"responsibilityForm?.assignees?.length>2\" *ngIf=\"!featureFlag_groups\">\n                      <span class=\"chip\" *ngFor=\"let e_user of responsibilityForm?.assignees?.list?.slice(0,2)\"><i\n                              class=\"icons\" (click)=\"remove('assignees',e_user)\">&#xe90d;</i>\n                          {{e_user.member_name}}</span>\n                      <button class=\"count\" *ngIf=\"responsibilityForm?.assignees?.list?.length > 2\" type=\"button\"\n                          appPopover (click)=\"assignees.popover()\" placement=\"right\">+\n                          {{responsibilityForm?.assignees?.list?.slice(2).length}}</button>\n                  </div> -->\n          <!-- <div class=\"chip-container\" *ngIf=\"featureFlag_groups\">\n                      <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.assignees?.list?.length > 0\" >\n                          <i class=\"icons cross vx-mr-1\" (click)=\"remove('assignees',responsibilityForm?.assignees?.list[0])\" >&#xe90d;</i>\n                          <span class=\"chip\" [appTooltip]=\"responsibilityForm?.assignees?.list[0]?.employee_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\">{{responsibilityForm?.assignees?.list[0]?.employee_name}}</span></span>\n                          <button *ngIf=\"responsibilityForm?.assignees?.list?.length > 1\" class=\"count user\" appPopover (click)=\"user.popover()\" placement=\"left\"> +{{responsibilityForm?.assignees?.list?.length -1}}</button>\n                      </div>\n                      <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"  *ngIf=\"responsibilityForm?.assignees?.list?.length > 0 && responsibilityForm?.assigneeGroups?.list?.length > 0\" >&</span>\n                      <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.assigneeGroups?.list?.length\" >\n                          <i *ngIf=\"(!allGroupAssignee || mode !== 'EDIT')\" class=\"icons cross vx-mr-1\" (click)=\"remove('groupassignees',responsibilityForm?.assigneeGroups?.list[0])\" >&#xe90d;</i>\n                          <span class=\"chip\" [appTooltip]=\"responsibilityForm?.assigneeGroups?.list[0]?.group_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\">{{responsibilityForm?.assigneeGroups?.list[0]?.group_name}}</span></span>\n                          <button *ngIf=\"responsibilityForm?.assigneeGroups?.list?.length > 1\" class=\"count\" appPopover (click)=\"group.popover()\" placement=\"right\">+{{responsibilityForm?.assigneeGroups?.list?.length - 1}}</button>\n                      </div>\n                  </div> -->\n          <button *ngIf=\"activeSelector !== 'assignees'\" class=\"edit\" type=\"button\"\n            (click)=\"activateSelector('assignees', true)\">\n            <i class=\"icons\">&#xe9ba;</i> Edit\n          </button>\n        </div>\n        <app-popover #user [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let e_user of responsibilityForm?.assignees?.list | slice : 1\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i class=\"icons\" (click)=\"remove('assignees', e_user)\">&#xe90d;</i>\n                    {{ e_user.member_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n        <app-popover #group [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let group of responsibilityForm?.assigneeGroups?.list\n                    | slice : 1\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i *ngIf=\"\n                        !featureFlag_groups ||\n                        (featureFlag_groups &&\n                          (!allGroupAssignee || mode !== 'EDIT'))\n                      \" class=\"icons\" (click)=\"remove('groupassignees', group)\">&#xe90d;</i>\n                    {{ group.group_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n\n        <p *ngIf=\"invalidType === 'who'\" [appScrollInView]=\"true\" class=\"error-message\">\n          Please select the person responsible for completing this\n          responsibility.\n        </p>\n        <ng-container *ngIf=\"!isGroupAssigned\">\n\n          <app-cs-radio *ngIf=\"mode !== 'EDIT'\" (checkedEvent)=\"\n              responsibilityForm.assignees.whoCanComplete = 'ANY_ONE'\n            \" [checked]=\"responsibilityForm.assignees.whoCanComplete == 'ANY_ONE'\" [name]=\"'what'\">ANY SELECTED PERSON\n            CAN COMPLETE THIS\n            <i class=\"icons\" [appTooltip]=\"\n                'If selected, only one responsibility will be created.'\n              \" placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i>\n          </app-cs-radio>\n\n          <app-cs-radio *ngIf=\"mode !== 'EDIT'\" (checkedEvent)=\"responsibilityForm.assignees.whoCanComplete = 'ALL'\"\n            [checked]=\"responsibilityForm.assignees.whoCanComplete == 'ALL'\" [name]=\"'what'\">ALL SELECTED PERSONS NEED\n            TO COMPLETE THIS<i class=\"icons\" [appTooltip]=\"\n              'If selected, separate responsibilities will be created for each person.'\n            \" placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i>\n          </app-cs-radio>\n\n          <div class=\"switch-row align-right\" *ngIf=\"\n              mode == 'EDIT' &&\n              (!featureFlag_groups ||\n                (responsibilityForm?.assigneeGroups?.list.length === 0 &&\n                  featureFlag_groups))\n            \">\n            <app-cs-switch (ngValueChange)=\"openAssigneeChangeConfirmation($event)\" [ngValue]=\"\n                responsibilityForm.assignees.whoCanComplete == 'ANY_ONE'\n              \">\n              ANY SELECTED PERSON CAN COMPLETE THIS\n            </app-cs-switch>\n          </div>\n        </ng-container>\n        <app-popover #assignees [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let e_user of responsibilityForm?.assignees?.list | slice : 1;\n                  let j = index\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i class=\"icons\" (click)=\"remove('assignees', e_user)\">&#xe90d;</i>\n                    {{ e_user.member_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n      </div>\n    </div>\n  </div>\n\n  <!-- When? -->\n  <div class=\"form-group-row\" [class.active]=\"activeSelector === 'frequency'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'frequency' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"\n        !responsibilityForm?.frequency || activeSelector === 'frequency'\n      \">\n      <img [src]=\"ASSETS.when\" alt=\"im\" *ngIf=\"!responsibilityForm?.frequency || activeSelector === 'frequency'\" />\n\n      <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\" *ngIf=\"\n          responsibilityForm?.frequency &&\n          activeSelector !== 'frequency' &&\n          responsibilityForm?.frequency != '' &&\n          responsibilityForm?.frequency != '5~0~0~0'\n        \">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">When? <span class=\"required\">*</span></label>\n        <div *ngIf=\"\n            responsibilityForm?.frequency == '' ||\n            responsibilityForm?.frequency == '5~0~0~0'\n          \" class=\"select button-sec\">\n          <input type=\"text\" (click)=\"activateSelector('frequency', true)\" [placeholder]=\"frequencyPlaceholder\"\n            readonly />\n          <button (click)=\"activateSelector('frequency', true)\" type=\"button\">\n            Set A frequency\n          </button>\n        </div>\n        <div *ngIf=\"\n            responsibilityForm?.frequency != '' &&\n            responsibilityForm?.frequency !== '5~0~0~0'\n          \" class=\"selected button-sec\">\n          <span class=\"chip\" [appTooltip]=\"frequencyPlaceholder\" placement=\"bottom-left\" delay=\"0\" type=\"black\"\n            [tooltipMandatory]=\"false\">{{ frequencyPlaceholder }}</span>\n          <button *ngIf=\"activeSelector !== 'frequency'\" type=\"button\" class=\"edit\"\n            (click)=\"activateSelector('frequency', true)\">\n            <i class=\"icons\">&#xe9ba;</i>Edit\n          </button>\n        </div>\n        <p *ngIf=\"invalidType === 'when'\" [appScrollInView]=\"true\" class=\"error-message\">\n          Please select the frequency of occurrence for this responsibility.\n        </p>\n      </div>\n    </div>\n  </div>\n\n  <!-- Notes -->\n  <div class=\"form-group-row\" [class.active]=\"activeSelector === 'notes'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'notes' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"\n        checkBlank(responsibilityForm?.description).trim() !== '' &&\n        !focus.description\n      \">\n      <img [src]=\"ASSETS.notes\" alt=\"im\" *ngIf=\"\n          checkBlank(responsibilityForm?.description).trim() === '' ||\n          focus.description\n        \" />\n\n      <svg class=\"checkIcon\" *ngIf=\"\n          checkBlank(responsibilityForm?.description).trim() !== '' &&\n          !focus.description\n        \" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">Notes</label>\n        <vcomply-editor [(ngModel)]=\"responsibilityForm.description\" [editorConfig]=\"{\n            mode: 'prime',\n            colorPalette: true,\n            link: true,\n            id: 'notes',\n            placeholder:\n              'Add more information about completing the responsibility'\n          }\"></vcomply-editor>\n      </div>\n    </div>\n  </div>\n\n  <!-- Objective -->\n  <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.OBJECTIVE\" [attr.id]=\"'OBJECTIVE'\"\n    [class.active]=\"activeSelector === 'objective'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'objective' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"\n        checkBlank(responsibilityForm?.objective).trim() !== '' &&\n        !focus.objective\n      \">\n      <img [src]=\"ASSETS.objectives\" alt=\"im\" *ngIf=\"\n          checkBlank(responsibilityForm?.objective).trim() === '' ||\n          focus.objective\n        \" />\n\n      <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\" *ngIf=\"\n          checkBlank(responsibilityForm?.objective).trim() !== '' &&\n          !focus.objective\n        \">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">Objective</label>\n        <vcomply-editor [(ngModel)]=\"responsibilityForm.objective\" [editorConfig]=\"{\n            mode: 'prime',\n            colorPalette: true,\n            id: 'objective',\n            link: true,\n            placeholder:\n              'This option lets you specify an objective for the responsibility.'\n          }\"></vcomply-editor>\n      </div>\n    </div>\n  </div>\n\n  <!-- Responsibility Center -->\n  <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.RC\" [attr.id]=\"'RC'\"\n    [class.active]=\"activeSelector === 'rc'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'rc' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"\n        responsibilityForm?.rc?.length > 0 && activeSelector !== 'rc'\n      \">\n      <img [src]=\"ASSETS.responsibility_center\" alt=\"\"\n        *ngIf=\"responsibilityForm?.rc?.length == 0 || activeSelector === 'rc'\" />\n\n      <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\n        *ngIf=\"responsibilityForm?.rc?.length > 0 && activeSelector !== 'rc'\">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">Responsibility Center </label>\n\n        <div class=\"select\" *ngIf=\"responsibilityForm?.rc?.length === 0\">\n          <div class=\"custom-input\" (click)=\"activateSelector('rc', true)\"\n            aria-placeholder=\"Select the responsibility center or the responsibility centers for this responsibility.\">\n          </div>\n          <!-- <input type=\"text\" (click)=\"activateSelector('rc',true)\" placeholder=\"Select Responsibility Center(s)\" readonly> -->\n        </div>\n\n        <div class=\"selected\" *ngIf=\"responsibilityForm?.rc?.length > 0\"\n          [class.readOnly]=\"openedFrom === 'RISK_TREATMENT'\">\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n            *ngFor=\"let rc of responsibilityForm?.rc?.slice(0, 1)\">\n            <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"remove('rc', rc)\"\n              *ngIf=\"openedFrom !== 'RISK_TREATMENT'\">&#xe9ae;</i>\n            <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"rc?.item_name\" placement=\"bottom-left\" delay=\"0\"\n              type=\"black\" [tooltipMandatory]=\"false\">{{ rc?.item_name }}</span>\n            <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n              *ngIf=\"responsibilityForm?.rc?.length > 1\" appPopover (click)=\"rcPopover.popover()\" placement=\"left\">\n              +{{ responsibilityForm?.rc?.slice(1).length }}\n            </button>\n          </div>\n\n          <!-- <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.rc?.length>1\" [class.plus]=\"responsibilityForm?.rc?.length>2\">\n                      <span class=\"chip\" *ngFor=\"let rc of responsibilityForm?.rc?.slice(0,2)\"><i class=\"icons\" (click)=\"remove('rc',rc)\" *ngIf=\"openedFrom !== 'RISK_TREATMENT'\">&#xe90d;</i>{{rc?.item_name}}</span>\n                      <button class=\"count\" *ngIf=\"responsibilityForm?.rc?.length > 2\" type=\"button\" appPopover (click)=\"rc.popover()\" placement=\"right\" placement=\"right\">+{{responsibilityForm?.rc?.slice(2).length}}</button>\n                  </div> -->\n\n          <button *ngIf=\"activeSelector !== 'rc' && openedFrom !== 'RISK_TREATMENT'\" class=\"edit\" type=\"button\"\n            (click)=\"activateSelector('rc', true)\">\n            <i class=\"icons\">&#xe9ba;</i> Edit\n          </button>\n        </div>\n        <app-popover #rcPopover [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let rc of responsibilityForm?.rc | slice : 1;\n                  let j = index\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i class=\"icons\" (click)=\"remove('rc', rc)\">&#xe90d;</i>\n                    {{ rc.item_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n\n        <ng-container *ngIf=\"\n            isResponsibilityRcLinkEnabled &&\n            (mode != 'EDIT' || responsibilityForm?.rc?.length <= 1)\n          \">\n          <!-- <app-cs-radio><div [appTooltip]=\"'Create separate responsibilities for each responsibility center'\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"true\">CREATE SEPARATE RESPONSIBILITIES FOR EACH RESPONSIBILITY CEN\u2026</div><i class=\"icons\" [appTooltip]=\"'If selected, separate responsibilities will be created for each Responsibility Center.'\" placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i></app-cs-radio> -->\n          <app-cs-radio [class.disabled]=\"\n          mode == 'EDIT' &&\n          responsibilityForm.responsibilityCenterType === 1 &&\n          responsibilityForm?.rc?.length > 1\n        \" [checked]=\"responsibilityCenterType === 1\" [name]=\"'ff_responsibility_rc_link'\"\n            (checkedEvent)=\"onRcTypeChange(1)\">DISPLAY THE SAME RESPONSIBILITY IN ALL RESPONSIBILITY CENTERS<i\n              class=\"icons\" [appTooltip]=\"\n            'If selected, the same responsibility will be linked to each Responsibility Center.'\n          \" placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i></app-cs-radio>\n          <app-cs-radio [class.disabled]=\"\n              mode == 'EDIT' &&\n              responsibilityForm.responsibilityCenterType === 1 &&\n              responsibilityForm?.rc?.length > 1\n            \" [checked]=\"responsibilityCenterType === 0\" [name]=\"'ff_responsibility_rc_link'\"\n            (checkedEvent)=\"onRcTypeChange(0)\">\n            <div class=\"rc-radio-text\" [appTooltip]=\"\n                'Create separate responsibilities for each responsibility centers'\n              \" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"true\">\n              CREATE SEPARATE RESPONSIBILITIES FOR EACH RESPONSIBILITY CEN\u2026\n            </div>\n            <i class=\"icons\" [appTooltip]=\"\n                'If selected, separate responsibilities will be created for each Responsibility Center.'\n              \" placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i>\n          </app-cs-radio>\n\n        </ng-container>\n      </div>\n    </div>\n  </div>\n\n  <!-- Program -->\n  <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.PROGRAM\" [attr.id]=\"'PROGRAM'\"\n    [class.active]=\"activeSelector === 'program'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'program' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"\n        responsibilityForm?.program?.length > 0 && activeSelector !== 'program'\n      \">\n      <img [src]=\"ASSETS.case_category\" alt=\"\" *ngIf=\"\n          (responsibilityForm?.program?.length == 0 ||\n            activeSelector === 'program') &&\n          allProgamSelected?.length == 0\n        \" />\n\n      <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\" *ngIf=\"\n          (responsibilityForm?.program?.length > 0 &&\n            activeSelector !== 'program') ||\n          allProgamSelected?.length > 0\n        \">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">Program</label>\n        <div class=\"select\" *ngIf=\"allProgamSelected?.length == 0\">\n          <div class=\"custom-input\" (click)=\"activateSelector('program', true)\"\n            aria-placeholder=\"Select the Program or Program Categories that this responsibility relates to.\"></div>\n          <!-- <input type=\"text\" (click)=\"activateSelector('program',true)\" placeholder=\"Select Responsibility program(s)\" readonly> -->\n        </div>\n        <div class=\"selected\" *ngIf=\"allProgamSelected?.length > 0\">\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n            <ng-container>\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" *ngIf=\"\n                  !hiddenList?.includes('PROGRAM') &&\n                  !program?.isViewOnlyProgram\n                \" (click)=\"remove('program', allProgamSelected[0])\">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"allProgamSelected[0]?.name ?? '--'\"\n                placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ allProgamSelected[0]?.name\n                ?? \"--\" }}</span>\n            </ng-container>\n            <button 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 (click)=\"program.popover()\" placement=\"right\" *ngIf=\"allProgamSelected?.length > 1\">\n              +{{ allProgamSelected?.length - 1 }}\n            </button>\n          </div>\n\n          <!-- <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.program?.length>1\" [class.plus]=\"responsibilityForm?.program?.length>2\">\n                              <span class=\"chip\" *ngFor=\"let program of responsibilityForm?.program\"><i class=\"icons\" *ngIf=\"feature.isFeatureEnabled('ff_deprecate_primary_program_flag')\" (click)=\"remove('program',program)\">&#xe90d;</i> {{program?.name??'--'}}</span>\n                              <!- - <button *ngIf=\"responsibilityForm?.program?.length > 2\" class=\"count\" type=\"button\" appPopover (click)=\"program.popover()\" placement=\"right\">+ {{responsibilityForm?.program?.slice(2).length}}</button> - ->\n                              <button *ngIf=\"responsibilityForm?.linkedProgram?.length > 1\" class=\"count\" type=\"button\" appPopover (click)=\"program.popover()\" placement=\"right\">+ {{responsibilityForm?.linkedProgram?.length - 1}}</button>\n                          </div> -->\n\n          <button *ngIf=\"\n              activeSelector !== 'program' && !hiddenList.includes('PROGRAM')\n            \" class=\"edit\" type=\"button\" (click)=\"activateSelector('program', true)\">\n            <i class=\"icons\">&#xe9ba;</i> Edit\n          </button>\n        </div>\n\n        <app-popover #program [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let program of allProgamSelected | slice : 1;\n                  let j = index\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\" [appTooltip]=\"program?.name\" placement=\"bottom\" type=\"black\" delay=\"0\"\n                    [tooltipMandatory]=\"false\">\n                    <i *ngIf=\"\n                        !hiddenList?.includes('PROGRAM') &&\n                        !program?.isViewOnlyProgram\n                      \" class=\"icons\" (click)=\"remove('program', program)\">&#xe90d;</i>\n                    {{ program?.name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n        <div *ngIf=\"responsibilityForm?.customTags?.length > 0\">\n          <ng-container *ngFor=\"let tag of responsibilityForm?.customTags\">\n            <ng-container *ngIf=\"tag?.name?.trim()\">\n              <label class=\"vx-control-panel vx-mt-2\">{{\n                tag?.name\n                }}</label>\n              <input type=\"text\" [(ngModel)]=\"tag.value\" placeholder=\"{{ tag?.name }}\" />\n            </ng-container>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Format & Evidence -->\n  <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.FORMATE_EVIDENCE\"\n    [attr.id]=\"'FORMATE_EVIDENCE'\" [class.active]=\"activeSelector === 'formate_evidence'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'formate_evidence' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"false\">\n      <img *ngIf=\"\n          this.responsibilityForm.formatAndEvidence.evidenceRequired == false &&\n          this.responsibilityForm.formatAndEvidence.formatFiles.length == 0 &&\n          this.responsibilityForm.formatAndEvidence.formatLinks?.length == 0\n        \" [src]=\"ASSETS.format_evidence\" alt=\"im\" />\n\n      <svg *ngIf=\"\n          this.responsibilityForm.formatAndEvidence.evidenceRequired ||\n          this.responsibilityForm.formatAndEvidence.formatFiles.length ||\n          this.responsibilityForm.formatAndEvidence.formatLinks?.length\n        \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <app-format-and-evidence (updateFiles)=\"saveSelectedList('formate_evidence', $event)\" [mode]=\"'responsibility'\"\n        [formatEvidanceData]=\"responsibilityForm?.formatAndEvidence\" [organization_id]=\"organizationId\"\n        [orgDetails]=\"orgDetails\">\n      </app-format-and-evidence>\n    </div>\n  </div>\n\n  <!-- Assessment -->\n  <div *ngIf=\"moreOptions?.ASSESSMENT\" [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\"\n    [attr.id]=\"'ASSESSMENT'\" [class.active]=\"activeSelector === 'isAssessment'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'isAssessment' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"responsibilityForm.assessment?.assessment_id\">\n      <img *ngIf=\"!responsibilityForm.assessment?.assessment_id\" [src]=\"ASSETS.assessments\" alt=\"im\" />\n\n      <svg *ngIf=\"responsibilityForm.assessment?.assessment_id\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 52 52\">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">ASSESSMENTS</label>\n        <div *ngIf=\"!responsibilityForm.assessment?.assessment_id\" class=\"select\">\n          <input type=\"text\" (click)=\"\n              activateSelector('isAssessment', true); isAssessment = true\n            \" placeholder=\"Select an assessment for this responsibility\"\n            [disabled]=\"responsibilityForm.checkpoints?.length\" readonly />\n        </div>\n        <div class=\"selected\" *ngIf=\"responsibilityForm.assessment?.assessment_id\">\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n            <i *ngIf=\"assessmentDetails?.assessment_type !== 'compliance_audit'\"\n              class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n              (click)=\"remove('assessment', category)\">&#xe9ae;</i>\n            <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"\n                responsibilityForm.assessment?.assessmentDetails\n                  ?.assessment_name\n              \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n              responsibilityForm.assessment?.assessmentDetails\n              ?.assessment_name\n              }}</span>\n            <div class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-ml-1 vx-text-center\">\n              {{ responsibilityForm.assessment?.assessmentDetails?.questions }}\n              {{\n              responsibilityForm.assessment?.assessmentDetails?.questions > 1\n              ? \"Questions\"\n              : \"Question\"\n              }}\n            </div>\n          </div>\n\n          <button *ngIf=\"assessmentDetails?.assessment_type !== 'compliance_audit'\" (click)=\"\n              activateSelector('isAssessment', true); isAssessment = true\n            \" class=\"edit\" type=\"button\">\n            <i class=\"icons\">&#xe9ba;</i> Edit\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Checkpoints -->\n  <!-- *ngIf=\"moreOptions.checkpoints\" -->\n  <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.CHECKPOINTS\"\n    [attr.id]=\"'CHECKPOINTS'\" [class.active]=\"activeSelector === 'checkpoints'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'checkpoints' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\">\n      <img [src]=\"ASSETS.checkpoints\" alt=\"im\" *ngIf=\"\n          responsibilityForm?.checkpoints?.length == 0 ||\n          activeSelector === 'checkpoints'\n        \" />\n\n      <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\" *ngIf=\"\n          responsibilityForm?.checkpoints?.length > 0 &&\n          activeSelector !== 'checkpoints'\n        \">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">\n          <!-- {{responsibilityForm.checkpoints|json}}\n                {{responsibilityForm.checkpointInstruction}} -->\n\n          Checkpoints\n          <!-- <button *ngIf=\"responsibilityForm?.checkpoints?.length === 0\" class=\"button\"\n                      (click)=\"activateSelector('checkpoints',true)\">+ Add Checkpoints</button> -->\n        </label>\n        <div class=\"select button-sec\" *ngIf=\"responsibilityForm?.checkpoints?.length === 0\">\n          <input [disabled]=\"!responsibilityForm.checkpoints?.length\" type=\"text\"\n            (click)=\"activateSelector('checkpoints', true)\" placeholder=\"Add checkpoints for this responsibility\"\n            readonly />\n          <button [disabled]=\"!responsibilityForm.checkpoints?.length\" (click)=\"activateSelector('checkpoints', true)\"\n            type=\"button\">\n            Add Checkpoints\n          </button>\n        </div>\n        <div class=\"selected\" *ngIf=\"responsibilityForm.checkpoints?.length > 0\">\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n            <ng-container *ngFor=\"\n                let checkpoint of responsibilityForm.checkpoints?.slice(0, 1)\n              \">\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"checkpoint?.label\" placement=\"bottom-left\"\n                delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ checkpoint?.label }}</span>\n            </ng-container>\n            <button 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 (click)=\"checkpoint.popover()\" placement=\"right\"\n              *ngIf=\"responsibilityForm.checkpoints?.length > 1\">\n              +{{ responsibilityForm.checkpoints?.length - 1 }}\n            </button>\n          </div>\n\n          <!-- <div class=\"chip-container checkpoints\" [class.more-one]=\"responsibilityForm.checkpoints?.length>1\" [class.plus]=\"responsibilityForm.checkpoints?.length>2\">\n                      <span class=\"chip\" *ngFor=\"let checkpoint of responsibilityForm.checkpoints?.slice(0,1)\">{{checkpoint?.label}}</span>\n                      <button class=\"count\" *ngIf=\"responsibilityForm.checkpoints?.length > 1\" type=\"button\" appPopover (click)=\"checkpoint.popover()\" placement=\"right\">+{{responsibilityForm.checkpoints?.length- 1}}</button>\n                  </div> -->\n\n          <button *ngIf=\"activeSelector !== 'checkpoints'\" class=\"edit\" type=\"button\"\n            (click)=\"activateSelector('checkpoints', true)\">\n            <i class=\"icons\">&#xe9ba;</i> Edit\n          </button>\n        </div>\n      </div>\n      <div *ngIf=\"this.responsibilityForm.checkpoints?.length\" class=\"assessment-text\">\n        <i class=\"icons alert-icon\">&#xe930;</i>\n        <span>You can now use the new <strong>Checkpoints </strong>or\n          <strong>Assessments</strong> feature instead of the old checkpoints\n          functionality to create analytical questions.\n          <button class=\"remove-btn\" (click)=\"onRemoveCheckpoints('checkpoint')\">\n            Remove Checkpoints\n          </button>\n          to continue.</span>\n      </div>\n      <app-popover #checkpoint [dontCloseonClick]=\"true\">\n        <div class=\"wf-action-list\">\n          <ul class=\"action-item\">\n            <li *ngFor=\"\n                let checkpoint of responsibilityForm.checkpoints | slice : 1;\n                let j = index\n              \">\n              <div class=\"avatar-card\">\n                <span class=\"value\">\n                  {{ checkpoint?.label }}\n                </span>\n              </div>\n            </li>\n          </ul>\n        </div>\n      </app-popover>\n    </div>\n  </div>\n\n  <!-- New  Checkpoints -->\n  <!-- *ngIf=\"moreOptions.checkpoints\" -->\n  <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.CHECKPOINTS_NEW\"\n    [attr.id]=\"'CHECKPOINTS-NEW'\" [class.active]=\"activeSelector === 'checkpoints-new'\">\n    <div class=\"left\">\n      <img [src]=\"ASSETS.checkpoints\" alt=\"im\" *ngIf=\"\n          responsibilityForm?.checkpoints?.length == 0 ||\n          activeSelector === 'checkpoints'\n        \" />\n\n      <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\n        *ngIf=\"checkpointCount > 0 && activeSelector !== 'checkpoints'\">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">\n          <!-- {{responsibilityForm.checkpoints|json}}\n                {{responsibilityForm.checkpointInstruction}} -->\n\n          Checkpoints\n          <!-- <span class=\"checkpoint-version\"> V2.0</span> -->\n          <!-- <button  class=\"button\"\n                      (click)=\"activateSelector('checkpoints-new',true)\">+ Add Checkpoints</button> -->\n        </label>\n        <div class=\"select button-sec\" *ngIf=\"checkpointCount === 0\">\n          <input type=\"text\" (click)=\"activateSelector('checkpoints-new', true)\"\n            placeholder=\"Add checkpoints for this responsibility\" readonly />\n          <button (click)=\"activateSelector('checkpoints-new', true)\" type=\"button\">\n            Add Checkpoints\n          </button>\n        </div>\n        <div class=\"selected\" *ngIf=\"checkpointCount > 0\">\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n            <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n              (click)=\"onRemoveCheckpoints('new-checkpoints')\">&#xe9ae;</i>\n            <span class=\"chipName vx-fs-11 vx-label-txt\">{{ checkpointCount }}\n              {{ checkpointCount > 1 ? \"Questions\" : \"Question\" }}</span>\n          </div>\n\n          <!-- <div class=\"chip-container checkpoints\" [class.more-one]=\"checkpointCount > 0\">\n                      <span class=\"chip\">\n                          <i class=\"icons\" (click)=\"onRemoveCheckpoints('new-checkpoints')\">&#xe90d;</i>\n                          {{checkpointCount}} {{checkpointCount > 1 ? 'Questions': 'Question'}}</span>\n                  </div> -->\n\n          <button *ngIf=\"activeSelector !== 'checkpoints-new'\" class=\"edit\" type=\"button\"\n            (click)=\"activateSelector('checkpoints-new', true)\">\n            <i class=\"icons\">&#xe9ba;</i> Edit\n          </button>\n        </div>\n      </div>\n      <app-popover #checkpoint [dontCloseonClick]=\"true\">\n        <div class=\"wf-action-list\">\n          <ul class=\"action-item\">\n            <li *ngFor=\"\n                let checkpoint of responsibilityForm.checkpoints | slice : 1;\n                let j = index\n              \">\n              <div class=\"avatar-card\">\n                <span class=\"value\">\n                  {{ checkpoint?.label }}\n                </span>\n              </div>\n            </li>\n          </ul>\n        </div>\n      </app-popover>\n    </div>\n  </div>\n\n  <!-- Risk Classification -->\n  <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.RISK_CLASSIFICATION\"\n    [attr.id]=\"'RISK_CLASSIFICATION'\" [class.active]=\"activeSelector === 'riskCalculator'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'riskCalculator' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"responsibilityForm?.riskClass\">\n      <svg *ngIf=\"responsibilityForm?.riskClass\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 52 52\">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">\n          Risk Classification\n          <button (click)=\"activateSelector('riskCalculator', true)\" class=\"button\">\n            + Risk Calculator\n          </button>\n        </label>\n\n        <div class=\"classification\">\n          <label class=\"low\" *ngFor=\"let risk of riskClassification\" [ngClass]=\"[risk.class]\">\n            <input type=\"radio\" name=\"classification\" [(ngModel)]=\"responsibilityForm.riskClass\"\n              [value]=\"risk?.value\" />\n            <span>{{ risk?.name }}</span>\n          </label>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Reviewer -->\n  <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.REVIEWER\" [attr.id]=\"'REVIEWER'\"\n    [class.active]=\"\n      activeSelector === 'reviewerFrequency' || activeSelector === 'reviewer'\n    \" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'reviewer' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"false\">\n      <img [src]=\"ASSETS.reviewer\" alt=\"\" *ngIf=\"\n          responsibilityForm?.reviewers?.list?.length == 0 ||\n          activeSelector === 'reviewer'\n        \" />\n\n      <svg *ngIf=\"\n          responsibilityForm?.reviewers?.list?.length > 0 &&\n          activeSelector !== 'reviewer'\n        \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">Reviewer</label>\n        <div class=\"select\" *ngIf=\"\n            (responsibilityForm?.reviewers?.list?.length == 0 &&\n              !featureFlag_groups) ||\n            (responsibilityForm?.reviewers?.list?.length == 0 &&\n              responsibilityForm?.groupReviewers?.list?.length == 0 &&\n              featureFlag_groups)\n          \">\n          <input type=\"text\" (click)=\"activateSelector('reviewer', true)\" placeholder=\"Select Reviewer\" readonly />\n        </div>\n        <div class=\"selected\" *ngIf=\"\n            (responsibilityForm?.reviewers?.list?.length > 0 &&\n              !featureFlag_groups) ||\n            ((responsibilityForm?.reviewers?.list?.length > 0 ||\n              responsibilityForm?.groupReviewers?.list?.length > 0) &&\n              featureFlag_groups)\n          \">\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"!featureFlag_groups\">\n            <ng-container *ngFor=\"\n                let reviewer of responsibilityForm?.reviewers?.list?.slice(0, 1)\n              \">\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                (click)=\"remove('reviewer', reviewer)\">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"reviewer.member_name\" placement=\"bottom-left\"\n                delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ reviewer.member_name }}</span>\n            </ng-container>\n            <button 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 (click)=\"reviewer.popover()\" placement=\"right\"\n              *ngIf=\"responsibilityForm?.reviewers?.list?.length > 1\">\n              +{{ responsibilityForm?.reviewers?.list?.slice(1).length }}\n            </button>\n          </div>\n\n          <!-- <div class=\"chip-container\" *ngIf=\"!featureFlag_groups\" [class.more-one]=\"responsibilityForm?.reviewers?.list?.length>1\"\n                      [class.plus]=\"responsibilityForm?.reviewers?.list?.length>2\">\n                      <span class=\"chip\" *ngFor=\"let reviewer of responsibilityForm?.reviewers?.list?.slice(0,2)\"><i class=\"icons\" (click)=\"remove('reviewer',reviewer)\">&#xe90d;</i> {{reviewer.member_name}}</span>\n                      <button class=\"count\" *ngIf=\"responsibilityForm?.reviewers?.list?.length > 2\" type=\"button\" appPopover (click)=\"reviewer.popover()\" placement=\"right\">+{{responsibilityForm?.reviewers?.list?.slice(2).length}}</button>\n                  </div> -->\n\n          <div class=\"vx-d-flex vx-align-center\" *ngIf=\"featureFlag_groups\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n              *ngIf=\"responsibilityForm?.reviewers?.list.length > 0\">\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"\n                  remove('reviewer', responsibilityForm?.reviewers?.list[0])\n                \">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"\n                  responsibilityForm?.reviewers?.list[0]?.employee_name\n                \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                responsibilityForm?.reviewers?.list[0]?.employee_name\n                }}</span>\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 greenBg\"\n                appPopover (click)=\"user.popover()\" placement=\"right\"\n                *ngIf=\"responsibilityForm?.reviewers?.list?.length > 1\">\n                +{{ responsibilityForm?.reviewers?.list?.length - 1 }}\n              </button>\n            </div>\n            <div class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"\n                responsibilityForm?.reviewers?.list.length > 0 &&\n                responsibilityForm?.groupReviewers?.list?.length > 0\n              \">\n              &\n            </div>\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n              *ngIf=\"responsibilityForm?.groupReviewers?.list.length > 0\">\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"\n                  remove(\n                    'groupReviewer',\n                    responsibilityForm?.groupReviewers?.list[0]\n                  )\n                \">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"\n                  responsibilityForm?.groupReviewers?.list[0]?.group_name\n                \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                responsibilityForm?.groupReviewers?.list[0]?.group_name\n                }}</span>\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 (click)=\"group.popover()\" placement=\"right\"\n                *ngIf=\"responsibilityForm?.groupReviewers?.list?.length > 1\">\n                +{{ responsibilityForm?.groupReviewers?.list?.length - 1 }}\n              </button>\n            </div>\n          </div>\n\n          <!-- <div class=\"chip-container\" *ngIf=\"featureFlag_groups\">\n                      <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.reviewers?.list.length > 0 \">\n                          <i class=\"icons cross vx-mr-1\" (click)=\"remove('reviewer',responsibilityForm?.reviewers?.list[0])\" >&#xe90d;</i>\n                          <span class=\"chip\" [appTooltip]=\"responsibilityForm?.reviewers?.list[0]?.employee_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\">{{responsibilityForm?.reviewers?.list[0]?.employee_name}}</span></span>\n                          <button *ngIf=\"responsibilityForm?.reviewers?.list?.length > 1\" class=\"count user\" appPopover (click)=\"user.popover()\" placement=\"left\"> +{{responsibilityForm?.reviewers?.list?.length - 1}}</button>\n                      </div>\n                      <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"responsibilityForm?.reviewers?.list.length > 0 && responsibilityForm?.groupReviewers?.list?.length > 0\">&</span>\n                      <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.groupReviewers?.list.length > 0 \" >\n                          <i class=\"icons cross vx-mr-1\" (click)=\"remove('groupReviewer',responsibilityForm?.groupReviewers?.list[0])\">&#xe90d;</i>\n                          <span class=\"chip\" [appTooltip]=\"responsibilityForm?.groupReviewers?.list[0]?.group_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\">{{responsibilityForm?.groupReviewers?.list[0]?.group_name}}</span></span>\n                          <button *ngIf=\"responsibilityForm?.groupReviewers?.list?.length > 1\" class=\"count\" appPopover (click)=\"group.popover()\" placement=\"right\">+{{responsibilityForm?.groupReviewers?.list?.length - 1}}</button>\n\n                      </div>\n                  </div> -->\n\n          <button *ngIf=\"activeSelector !== 'reviewer'\" class=\"edit\" type=\"button\"\n            (click)=\"activateSelector('reviewer', true)\">\n            <i class=\"icons\">&#xe9ba;</i> Edit\n          </button>\n        </div>\n        <app-cs-radio [checked]=\"responsibilityForm.reviewers.sequentialWorkflow\" [name]=\"'reviewer'\"\n          (checkedEvent)=\"onReviewerWorkflowChange('sequential')\" [class.disabled]=\"\n            responsibilityForm?.groupReviewers?.list?.length > 0\n          \">\n          SEQUENTIAL<i class=\"icons\" [appTooltip]=\"\n              'The responsibility will be sent for review one at a time in the sequence defined by you.'\n            \" placement=\"bottom-right\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\">&#xe91f;</i>\n        </app-cs-radio>\n        <app-cs-radio [checked]=\"!responsibilityForm.reviewers.sequentialWorkflow\" [name]=\"'reviewer'\"\n          (checkedEvent)=\"onReviewerWorkflowChange('anyReviewer')\">\n          ANY REVIEWER CAN MARK THIS AS REVIEWED<i class=\"icons\" [appTooltip]=\"\n              'The responsibility will be sent for review to all reviewers at the same time. If anyone of the reviewer reviews the responsibility, it will be considered as reviewed.'\n            \" placement=\"bottom-right\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\">&#xe91f;</i>\n        </app-cs-radio>\n        <app-popover #reviewer [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let reviewer of responsibilityForm?.reviewers?.list\n                    | slice : 1;\n                  let j = index\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i class=\"icons\" (click)=\"remove('reviewer', reviewer)\">&#xe90d;</i>\n                    {{ reviewer.member_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n        <app-popover #user [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let reviewer of responsibilityForm?.reviewers?.list\n                    | slice : 1;\n                  let j = index\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i class=\"icons\" (click)=\"remove('reviewer', reviewer)\">&#xe90d;</i>\n                    {{ reviewer.member_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n        <app-popover #group [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let group of responsibilityForm?.groupReviewers?.list\n                    | slice : 1;\n                  let i = index\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i class=\"icons\" (click)=\"remove('groupReviewer', group)\">&#xe90d;</i>\n                    {{ group.group_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n      </div>\n    </div>\n  </div>\n\n  <!-- Overseer -->\n  <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.OVERSEER\" [attr.id]=\"'OVERSEER'\"\n    [class.active]=\"\n      activeSelector === 'overseerNotify' || activeSelector === 'overseer'\n    \" [class.disabled]=\"\n      activeSelector &&\n      !['overseerNotify', 'overseerNotify'].includes(activeSelector) &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"false\">\n      <img [src]=\"ASSETS.oversight\" alt=\"\" *ngIf=\"\n          (responsibilityForm?.overseers?.list?.length == 0 &&\n            responsibilityForm?.overseers?.notifyList?.length == 0) ||\n          activeSelector === 'overseerNotify' ||\n          activeSelector === 'overseer'\n        \" />\n      <svg class=\"checkIcon\" *ngIf=\"\n          (responsibilityForm?.overseers?.list?.length > 0 ||\n            responsibilityForm?.overseers?.notifyList?.length > 0) &&\n          !(\n            activeSelector === 'overseerNotify' || activeSelector === 'overseer'\n          )\n        \" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">Oversight</label>\n        <div class=\"select\" *ngIf=\"\n            (responsibilityForm?.overseers?.list?.length == 0 &&\n              !featureFlag_groups) ||\n            (responsibilityForm?.overseers?.list?.length == 0 &&\n              responsibilityForm?.overseersGroups?.list?.length == 0 &&\n              featureFlag_groups)\n          \">\n          <input type=\"text\" (click)=\"activateSelector('overseer', true)\"\n            placeholder=\"Who should have oversight of the responsibility?\" readonly />\n        </div>\n        <div class=\"selected\" *ngIf=\"\n            (responsibilityForm?.overseers?.list?.length > 0 &&\n              !featureFlag_groups) ||\n            ((responsibilityForm?.overseers?.list?.length > 0 ||\n              responsibilityForm?.overseersGroups?.list?.length > 0) &&\n              featureFlag_groups)\n          \">\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"!featureFlag_groups\">\n            <ng-container *ngFor=\"\n                let overseer of responsibilityForm?.overseers?.list?.slice(0, 1)\n              \">\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                (click)=\"remove('overseer', overseer)\">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"overseer.member_name\" placement=\"bottom-left\"\n                delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ overseer.member_name }}</span>\n            </ng-container>\n            <button 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 (click)=\"overseers.popover()\" placement=\"right\"\n              *ngIf=\"responsibilityForm?.overseers?.list?.length > 1\">\n              +{{ responsibilityForm?.overseers?.list?.slice(1).length }}\n            </button>\n          </div>\n\n          <!-- <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.overseers?.list?.length>1\" [class.plus]=\"responsibilityForm?.overseers?.list?.length>2\" *ngIf=\"!featureFlag_groups\" >\n                      <span class=\"chip\" *ngFor=\"let overseer of responsibilityForm?.overseers?.list?.slice(0,2)\"><i class=\"icons\" (click)=\"remove('overseer',overseer)\">&#xe90d;</i> {{overseer.member_name}}</span>\n                      <button class=\"count\" *ngIf=\"responsibilityForm?.overseers?.list?.length > 2\" type=\"button\" appPopover (click)=\"overseers.popover()\" placement=\"right\">+{{responsibilityForm?.overseers?.list?.slice(2).length}}</button>\n                  </div> -->\n\n          <div class=\"vx-d-flex vx-align-center\" *ngIf=\"featureFlag_groups\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n              *ngIf=\"responsibilityForm?.overseers?.list.length > 0\">\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"\n                  remove('overseer', responsibilityForm?.overseers?.list[0])\n                \">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"\n                  responsibilityForm?.overseers?.list[0]?.employee_name\n                \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                responsibilityForm?.overseers?.list[0]?.employee_name\n                }}</span>\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 greenBg\"\n                appPopover (click)=\"overseerUser.popover()\" placement=\"right\"\n                *ngIf=\"responsibilityForm?.overseers?.list?.length > 1\">\n                +{{ responsibilityForm?.overseers?.list?.length - 1 }}\n              </button>\n            </div>\n            <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"\n                responsibilityForm?.overseers?.list.length > 0 &&\n                responsibilityForm?.overseersGroups?.list?.length > 0\n              \">&</span>\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n              *ngIf=\"responsibilityForm?.overseersGroups?.list?.length > 0\">\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"\n                  remove(\n                    'overseerGroup',\n                    responsibilityForm?.overseersGroups?.list[0]\n                  )\n                \">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"\n                  responsibilityForm?.overseersGroups?.list[0].group_name\n                \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                responsibilityForm?.overseersGroups?.list[0].group_name\n                }}</span>\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 (click)=\"overseerGroup.popover()\" placement=\"right\"\n                *ngIf=\"responsibilityForm?.overseersGroups?.list?.length > 1\">\n                +{{ responsibilityForm?.overseersGroups?.list?.length - 1 }}\n              </button>\n            </div>\n          </div>\n\n          <!-- <div class=\"chip-container\" *ngIf=\"featureFlag_groups\">\n                      <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.overseers?.list.length > 0\" >\n                          <i class=\"icons cross vx-mr-1\" (click)=\"remove('overseer',responsibilityForm?.overseers?.list[0])\">&#xe90d;</i>\n                          <span class=\"chip\" [appTooltip]=\"responsibilityForm?.overseers?.list[0]?.employee_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\">{{responsibilityForm?.overseers?.list[0]?.employee_name}}</span></span>\n                          <button *ngIf=\"responsibilityForm?.overseers?.list?.length > 1\" class=\"count user\" appPopover (click)=\"overseerUser.popover()\" placement=\"left\"> +{{responsibilityForm?.overseers?.list?.length -1}}</button>\n                      </div>\n                      <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"  *ngIf=\"responsibilityForm?.overseers?.list.length > 0 && responsibilityForm?.overseersGroups?.list?.length > 0\" >&</span>\n                      <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.overseersGroups?.list?.length > 0 \" >\n                          <i class=\"icons cross vx-mr-1\" (click)=\"remove('overseerGroup',responsibilityForm?.overseersGroups?.list[0])\">&#xe90d;</i>\n                          <span class=\"chip\" [appTooltip]=\"responsibilityForm?.overseersGroups?.list[0].group_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\"  >{{responsibilityForm?.overseersGroups?.list[0].group_name}}</span></span>\n                          <button *ngIf=\"responsibilityForm?.overseersGroups?.list?.length > 1\" class=\"count\" appPopover (click)=\"overseerGroup.popover()\" placement=\"right\">+{{responsibilityForm?.overseersGroups?.list?.length -1}}</button>\n                      </div>\n                  </div> -->\n          <button *ngIf=\"activeSelector !== 'overseer'\" class=\"edit\" type=\"button\"\n            (click)=\"activateSelector('overseer', true)\">\n            <i class=\"icons\">&#xe9ba;</i> Edit\n          </button>\n        </div>\n\n        <div class=\"select\" *ngIf=\"\n            (responsibilityForm?.overseers?.notifyList?.length == 0 &&\n              !featureFlag_groups) ||\n            (responsibilityForm?.overseers?.notifyList?.length == 0 &&\n              responsibilityForm?.overseersGroups?.notifyList?.length == 0 &&\n              featureFlag_groups)\n          \">\n          <input type=\"text\" (click)=\"activateSelector('overseerNotify', true)\"\n            placeholder=\"Who should be notified if the responsibility is not complet...\" readonly [appTooltip]=\"\n              'Who should be notified if the responsibility is not completed?'\n            \" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\" />\n        </div>\n        <div class=\"selected\" *ngIf=\"\n            (responsibilityForm?.overseers?.notifyList?.length > 0 &&\n              !featureFlag_groups) ||\n            ((responsibilityForm?.overseers?.notifyList?.length > 0 ||\n              responsibilityForm?.overseersGroups?.notifyList?.length > 0) &&\n              featureFlag_groups)\n          \">\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"!featureFlag_groups\">\n            <ng-container *ngFor=\"\n                let overseer of responsibilityForm?.overseers?.notifyList?.slice(\n                  0,\n                  1\n                )\n              \">\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                (click)=\"remove('overseerNotifyList', overseer)\">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"overseer.member_name\" placement=\"bottom-left\"\n                delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ overseer.member_name }}</span>\n            </ng-container>\n            <button 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 (click)=\"notify.popover()\" placement=\"right\"\n              *ngIf=\"responsibilityForm?.overseers?.notifyList?.length > 1\">\n              +{{ responsibilityForm?.overseers?.notifyList?.slice(1).length }}\n            </button>\n          </div>\n\n          <!-- <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.overseers?.notifyList?.length>1\" [class.plus]=\"responsibilityForm?.overseers?.notifyList?.length>2\" *ngIf=\"!featureFlag_groups\">\n                      <span class=\"chip\" *ngFor=\"let overseer of responsibilityForm?.overseers?.notifyList?.slice(0,2)\"><i class=\"icons\" (click)=\"remove('overseerNotifyList',overseer)\">&#xe90d;</i> {{overseer.member_name}}</span>\n                      <button class=\"count\" *ngIf=\"responsibilityForm?.overseers?.notifyList?.length > 2\" type=\"button\" appPopover (click)=\"notify.popover()\" placement=\"right\">+{{responsibilityForm?.overseers?.notifyList?.slice(2).length}}</button>\n                  </div> -->\n\n          <div class=\"vx-d-flex vx-align-center\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n              *ngIf=\"responsibilityForm?.overseers?.notifyList.length > 0\">\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"\n                  remove(\n                    'overseerNotifyList',\n                    responsibilityForm?.overseers?.notifyList[0]\n                  )\n                \">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"\n                  responsibilityForm?.overseers?.notifyList[0]?.employee_name\n                \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                responsibilityForm?.overseers?.notifyList[0]?.employee_name\n                }}</span>\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 greenBg\"\n                appPopover (click)=\"notifyUser.popover()\" placement=\"right\"\n                *ngIf=\"responsibilityForm?.overseers?.notifyList?.length > 1\">\n                +{{ responsibilityForm?.overseers?.notifyList?.length - 1 }}\n              </button>\n            </div>\n            <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"\n                responsibilityForm?.overseers?.notifyList.length > 0 &&\n                responsibilityForm?.overseersGroups?.notifyList?.length > 0\n              \">&</span>\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"\n                responsibilityForm?.overseersGroups?.notifyList?.length > 0\n              \">\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"\n                  remove(\n                    'overseerGroupNotifyList',\n                    responsibilityForm?.overseersGroups?.notifyList[0]\n                  )\n                \">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"\n                  responsibilityForm?.overseersGroups?.notifyList[0]?.group_name\n                \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                responsibilityForm?.overseersGroups?.notifyList[0]?.group_name\n                }}</span>\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 (click)=\"notifyGroup.popover()\" placement=\"right\" *ngIf=\"\n                  responsibilityForm?.overseersGroups?.notifyList?.length > 1\n                \">\n                +{{\n                responsibilityForm?.overseersGroups?.notifyList?.length - 1\n                }}\n              </button>\n            </div>\n          </div>\n\n          <!-- <div class=\"chip-container\" *ngIf=\"featureFlag_groups\">\n                      <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.overseers?.notifyList.length > 0\">\n                          <i class=\"icons cross vx-mr-1\" (click)=\"remove('overseerNotifyList',responsibilityForm?.overseers?.notifyList[0])\">&#xe90d;</i>\n                          <span class=\"chip\" [appTooltip]=\"responsibilityForm?.overseers?.notifyList[0]?.employee_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\">{{responsibilityForm?.overseers?.notifyList[0]?.employee_name}}</span></span>\n                          <button *ngIf=\"responsibilityForm?.overseers?.notifyList?.length > 1\" class=\"count user\" appPopover (click)=\"notifyUser.popover()\" placement=\"left\"> +{{responsibilityForm?.overseers?.notifyList?.length - 1}}</button>\n                      </div>\n                      <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"  *ngIf=\"responsibilityForm?.overseers?.notifyList.length > 0 && responsibilityForm?.overseersGroups?.notifyList?.length > 0\" >&</span>\n                      <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.overseersGroups?.notifyList?.length > 0 \" >\n                          <i class=\"icons cross vx-mr-1\" (click)=\"remove('overseerGroupNotifyList',responsibilityForm?.overseersGroups?.notifyList[0])\">&#xe90d;</i>\n                          <span class=\"chip\" [appTooltip]=\"responsibilityForm?.overseersGroups?.notifyList[0]?.group_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\"  >{{responsibilityForm?.overseersGroups?.notifyList[0]?.group_name}}</span></span>\n                          <button *ngIf=\"responsibilityForm?.overseersGroups?.notifyList?.length > 1\" class=\"count\" appPopover (click)=\"notifyGroup.popover()\" placement=\"right\">+{{responsibilityForm?.overseersGroups?.notifyList?.length - 1}}</button>\n                      </div>\n                  </div> -->\n          <button *ngIf=\"activeSelector !== 'overseerNotify'\" class=\"edit\" type=\"button\"\n            (click)=\"activateSelector('overseerNotify', true)\">\n            <i class=\"icons\">&#xe9ba;</i> Edit\n          </button>\n        </div>\n        <app-popover #overseers [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let overseer of responsibilityForm?.overseers?.list\n                    | slice : 1;\n                  let j = index\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i class=\"icons\" (click)=\"remove('overseer', overseer)\">&#xe90d;</i>\n                    {{ overseer?.member_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n        <app-popover #overseerUser [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let overseers of responsibilityForm?.overseers?.list\n                    | slice : 1;\n                  let j = index\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i class=\"icons\" (click)=\"remove('overseer', overseers)\">&#xe90d;</i>\n                    {{ overseers?.member_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n        <app-popover #overseerGroup [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let overseer of responsibilityForm?.overseersGroups?.list\n                    | slice : 1;\n                  let i = index\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i class=\"icons\" (click)=\"remove('overseerGroup', overseer)\">&#xe90d;</i>\n                    {{ overseer?.group_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n        <app-popover #notify [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let overseer of responsibilityForm?.overseers?.notifyList\n                    | slice : 1;\n                  let j = index\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i class=\"icons\" (click)=\"remove('overseerNotifyList', overseer)\">&#xe90d;</i>\n                    {{ overseer?.member_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n        <app-popover #notifyUser [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let overseer of responsibilityForm?.overseers?.notifyList\n                    | slice : 1;\n                  let j = index\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i class=\"icons\" (click)=\"remove('overseerNotifyList', overseer)\">&#xe90d;</i>\n                    {{ overseer?.member_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n        <app-popover #notifyGroup [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let group of responsibilityForm?.overseersGroups?.notifyList\n                    | slice : 1;\n                  let i = index\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i class=\"icons\" (click)=\"remove('overseerGroupNotifyList', group)\">&#xe90d;</i>\n                    {{ group?.group_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n      </div>\n    </div>\n  </div>\n\n  <!-- Assurance -->\n  <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.ASSURANCE\" [attr.id]=\"'ASSURANCE'\"\n    [class.active]=\"activeSelector === 'assurance'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'assurance' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"false\">\n      <img [src]=\"ASSETS.reviewer\" alt=\"\" *ngIf=\"\n          responsibilityForm?.assuranceList?.length == 0 ||\n          activeSelector === 'assurance'\n        \" />\n\n      <svg *ngIf=\"\n          responsibilityForm?.assuranceList?.length > 0 &&\n          activeSelector !== 'assurance'\n        \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">Assurance</label>\n        <div class=\"select\" *ngIf=\"responsibilityForm?.assuranceList?.length == 0\">\n          <div class=\"custom-input\" (click)=\"activateSelector('assurance', true)\"\n            aria-placeholder=\"Select the test plan categories that you would like to add this responsibility to.\"></div>\n        </div>\n        <div class=\"selected\" *ngIf=\"responsibilityForm?.assuranceList?.length > 0\">\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n            <ng-container *ngFor=\"\n                let assurance of responsibilityForm?.assuranceList?.slice(0, 1)\n              \">\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                (click)=\"remove('assurance', assurance)\">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"assurance.category_name\"\n                placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ assurance.category_name\n                }}</span>\n            </ng-container>\n            <button 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 (click)=\"assurance.popover()\" placement=\"right\"\n              *ngIf=\"responsibilityForm?.assuranceList?.length > 1\">\n              +{{ responsibilityForm?.assuranceList?.slice(1).length }}\n            </button>\n          </div>\n\n          <button *ngIf=\"activeSelector !== 'assurance'\" class=\"edit\" type=\"button\"\n            (click)=\"activateSelector('assurance', true)\">\n            <i class=\"icons\">&#xe9ba;</i> Edit\n          </button>\n        </div>\n        <app-popover #assurance [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let assurance of responsibilityForm?.assuranceList\n                    | slice : 1;\n                  let j = index\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i class=\"icons\" (click)=\"remove('assurance', assurance)\">&#xe90d;</i>\n                    {{ assurance.category_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n      </div>\n    </div>\n  </div>\n\n  <!-- Requires Audit -->\n  <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\"\n    *ngIf=\"moreOptions?.REQUIRES_AUDIT && responsibilityForm.rc.length > 0\" [attr.id]=\"'REQUIRES_AUDIT'\"\n    [class.active]=\"activeSelector === 'requires_audit'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'requires_audit' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"false\">\n      <img [src]=\"ASSETS.audit\" alt=\"\" *ngIf=\"\n          responsibilityForm?.requiresAuditList?.length == 0 ||\n          activeSelector === 'requires_audit'\n        \" />\n\n      <svg *ngIf=\"\n          responsibilityForm?.requiresAuditList?.length > 0 &&\n          activeSelector !== 'requires_audit'\n        \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">REQUIRES AUDIT?</label>\n        <div class=\"select\" *ngIf=\"responsibilityForm?.requiresAuditList?.length == 0\">\n          <input type=\"text\" placeholder=\"If yes, select an Audit Category.\" readonly\n            (click)=\"activateSelector('requires_audit', true)\" />\n        </div>\n        <div class=\"selected\" *ngIf=\"responsibilityForm?.requiresAuditList?.length > 0\">\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n            <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n              (click)=\"remove('requires_audit', overseer)\">&#xe9ae;</i>\n            <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"\n                responsibilityForm?.requiresAuditList[0]?.category_name\n              \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n              responsibilityForm?.requiresAuditList[0]?.category_name\n              }}</span>\n          </div>\n\n          <button class=\"edit\" type=\"button\" (click)=\"activateSelector('requires_audit', true)\">\n            <i class=\"icons\">&#xe90c;</i> Edit\n          </button>\n          <!-- class=\"icons\">&#xe9ba;</i>\n                      Edit</button> -->\n        </div>\n        <ng-container *ngIf=\"responsibilityForm?.requiresAuditList?.length\">\n          <label class=\"vx-control-panel vx-mt-8\">\n            SAMPLE SIZE\n            <app-cs-switch [(ngValue)]=\"isSample\" (ngValueChange)=\"switchEnable($event)\"></app-cs-switch>\n          </label>\n          <div class=\"sample-part\" [class.disabled]=\"!isSample\">\n            <app-cs-radio value=\"0\" class=\"sample-radio\" (click)=\"selectedSampleData(0)\"\n              [checked]=\"selectedSample === 0\">\n              <div class=\"name\">COUNT</div>\n              <input type=\"number\" placeholder=\"--\" (keypress)=\"checkInputValue($event)\" [(ngModel)]=\"sampleValue\" />\n            </app-cs-radio>\n            <div class=\"or\">OR</div>\n            <app-cs-radio value=\"1\" class=\"sample-radio\" (click)=\"selectedSampleData(1)\"\n              [checked]=\"selectedSample === 1\">\n              <div class=\"name\">PERCENTAGE</div>\n              <input type=\"number\" (keypress)=\"checkInputValue($event)\" [(ngModel)]=\"samplePercentage\"\n                placeholder=\"--\" />\n            </app-cs-radio>\n          </div>\n          <label class=\"vx-control-panel vx-mt-8\">SET A REMINDER IF THE AUDIT PLAN IS NOT CREATED.</label>\n          <div class=\"reminder-part\">\n            Send reminder every\n            <input type=\"number\" value=\"2\" [(ngModel)]=\"sendAuditRemindersValue\" />\n            Day by\n            <div class=\"picker-group\">\n              <input class=\"time\" aria-label=\"12hr format\" [(ngModel)]=\"auditTime\" [ngxTimepicker]=\"dailyTime\"\n                placeholder=\"auditTime.toUpperCase()\" type=\"text\" [min]=\"currentTime\" readonly />\n              <i class=\"icons\">&#xe955;</i>\n              <ngx-material-timepicker #dailyTime [defaultTime]=\"auditTime\">\n              </ngx-material-timepicker>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n\n  <!-- Link of GRC objects -->\n  <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\"\n    *ngIf=\"moreOptions?.GRC_OBJECTS && responsibilityForm.rc.length > 0\" [attr.id]=\"'GRC_OBJECTS'\"\n    [class.active]=\"activeSelector === 'GRC_OBJECTS'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'GRC_OBJECTS' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"false\">\n      <img [src]=\"ASSETS.audit\" alt=\"\" *ngIf=\"\n          responsibilityForm?.selectedGRCObjects?.length == 0 ||\n          activeSelector === 'GRC_OBJECTS'\n        \" />\n\n      <svg *ngIf=\"\n          responsibilityForm?.selectedGRCObjects?.length > 0 &&\n          activeSelector !== 'GRC_OBJECTS'\n        \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">LINK GRC OBJECT(S)</label>\n        <div class=\"select\" *ngIf=\"responsibilityForm?.selectedGRCObjects?.length === 0\">\n          <input type=\"text\" placeholder=\"Select GRC object(s) to link with this responsibility\" readonly\n            (click)=\"activateSelector('GRC_OBJECTS', true)\" />\n        </div>\n        <ng-container *ngIf=\"responsibilityForm?.selectedGRCObjects?.length\">\n          <ng-container *ngFor=\"let selectedGRC of GRC_TYPE_ARRAY; let i = index\">\n            <div *ngIf=\"grcDataWithTypes[selectedGRC]?.length\" class=\"selected vx-mb-2\">\n              <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n                <ng-container *ngFor=\"let grc of grcDataWithTypes[selectedGRC]?.slice(0, 1)\">\n                  <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                    (click)=\"remove('GRC_OBJECTS', grc, 0)\">&#xe9ae;</i>\n                  <div class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\">\n                    {{ selectedGRC | titlecase }}\n                  </div>\n\n                  <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"grc?.name\" placement=\"bottom-left\"\n                    delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ grc?.name }}</span>\n                </ng-container>\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 (click)=\"popoverGRC.popover()\" placement=\"left\"\n                  *ngIf=\"grcDataWithTypes[selectedGRC]?.length > 1\">\n                  +{{ grcDataWithTypes[selectedGRC].length - 1 }}\n                </button>\n              </div>\n\n              <button *ngIf=\"activeSelector !== 'GRC'\" class=\"edit\" type=\"button\" (click)=\"\n                  selectedGRCTab = grcDataWithTypes[selectedGRC][0]?.type;\n                  getOtherGRCObjects();\n                  activateSelector('GRC_OBJECTS', true)\n                \">\n                <i class=\"icons\">&#xe9ba;</i> Edit\n              </button>\n            </div>\n            <app-popover #popoverGRC [dontCloseonClick]=\"true\">\n              <div class=\"wf-action-list\">\n                <ul class=\"action-item\">\n                  <li *ngFor=\"\n                      let grc of grcDataWithTypes[selectedGRC] | slice : 1;\n                      let j = index\n                    \">\n                    <div class=\"avatar-card\">\n                      <span class=\"value\">\n                        <i class=\"icons\" (click)=\"remove('GRC_OBJECTS', grc, j + 1)\">&#xe90d;</i>\n                        {{ grc.name }}\n                      </span>\n                    </div>\n                  </li>\n                </ul>\n              </div>\n            </app-popover>\n          </ng-container>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n\n  <!-- Custom Fields -->\n  <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.CUSTOM_FIELDS \"\n    [attr.id]=\"'CUSTOM_FIELDS'\" [class.active]=\"activeSelector === 'CUSTOM_FIELDS'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'CUSTOM_FIELDS' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"false\">\n      <img [src]=\"ASSETS.audit\" alt=\"\" *ngIf=\"\n          activeSelector === 'CUSTOM_FIELDS'\n        \" />\n\n      <svg *ngIf=\"\n          activeSelector !== 'CUSTOM_FIELDS'\n        \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">Custom Fields</label>\n        <ng-container *ngFor=\"let field of responsibilityForm.customFields\">\n          <div class=\"vc-cf-container vx-d-flex vx-align-center vx-justify-between vx-pt-2 vx-pb-2\">\n            <div class=\"cf-name vx-d-flex vx-align-center vx-justify-between\">\n              <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                  (click)=\"remove('CUSTOM_FIELDS', field)\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"field.name ?? '--'\" placement=\"bottom-left\"\n                  delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ field.name\n                  ?? \"--\" }}</span>\n              </div>\n              <span class=\"vx-fs-11 vx-gray-70\">:&nbsp; </span>\n            </div>\n            <span class=\"cf-value vx-fs-13 vx-fw-500 vx-p-0 vx-m-0 vx-ml-2 vx-d-flex vx-align-center vx-justify-center\">\n              <input type=\"text\" placeholder=\"Enter value\" [(ngModel)]=\"field.value\" />\n            </span>\n          </div>\n        </ng-container>\n        <div *ngIf=\"customFields.length > 0\" class=\"select\">\n          <!-- <input type=\"text\" placeholder=\"+ Add Custom Fields\" readonly\n            (click)=\"activateSelector('CUSTOM_FIELDS', true)\" /> -->\n          <app-cs-select [dataList]='customFields' [isStaticData]=\"true\" [placeholder]=\"'+ Add Custom Fields'\"\n            valueKey=\"id\" [selectedData]=\"'+ Add Custom Fields'\" displayProperty=\"name\" [isArrowIcon]=\"false\"\n            (selectedData)=\"activateSelector('CUSTOM_FIELDS', $event)\"></app-cs-select>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<app-users-radio-list *ngIf=\"activeSelector === 'assignors'\" [usersList]=\"assignorsList\"\n  [selectedUsers]=\"responsibilityForm.assignors.list\" [itemEmailKey]=\"'member_email'\" [userIdKey]=\"'member_id'\"\n  [itemNameKey]=\"'member_name'\" (saveSelectedList)=\"saveSelectedList('assignors', $event)\"\n  (closeUsersList)=\"activeDeselector()\" [loaded]=\"assignorsListLoaded\">\n</app-users-radio-list>\n\n<ng-container *ngIf=\"activeSelector === 'assignees'\">\n  <app-group-users-list *ngIf=\"\n      isEntrust || responsibilityForm?.assignees?.whoCanComplete === 'ANY_ONE'\n    \" [openedFrom]=\"openedFrom\" [usersList]=\"assigneesList\" [fromResponsibility]=\"'Assignee'\" [groupsList]=\"groupsList\"\n    [assigneeGroupsList]=\"groupAssigneeList\" [selectedUsers]=\"responsibilityForm?.assignees?.list\"\n    [selectedGroups]=\"responsibilityForm?.assigneeGroups?.list\" [userIdKey]=\"'my_member_id'\" [groupIdKey]=\"'group_id'\"\n    [loader]=\"userListLoader || assignorsListLoader\" (saveSelectedList)=\"saveSelectedList('assignees', $event)\"\n    (closeUsersList)=\"activeDeselector()\" [groupsEnabled]=\"featureFlag_groups\">\n  </app-group-users-list>\n  <app-users-radio-list *ngIf=\"\n      !isEntrust && responsibilityForm.assignees.whoCanComplete !== 'ANY_ONE'\n    \" [itemEmailKey]=\"'employee_email'\" [usersList]=\"assigneesList\" [selectedUsers]=\"responsibilityForm.assignees.list\"\n    [userIdKey]=\"'employee_id'\" [itemNameKey]=\"'employee_name'\" [fromResponsibility]=\"'Assignee'\"\n    (saveSelectedList)=\"saveSelectedList('assignees', $event)\" (closeUsersList)=\"activeDeselector()\"\n    [loaded]=\"assigneesListLoaded\">\n  </app-users-radio-list>\n</ng-container>\n\n<app-checkpoints *ngIf=\"activeSelector === 'checkpoints'\"\n  [checkpointInstruction]=\"responsibilityForm?.checkpointInstruction\" [checkpointData]=\"responsibilityForm?.checkpoints\"\n  (saveCheckPoint)=\"saveSelectedList('checkpoints', $event)\" (closeCheckPoint)=\"activeDeselector()\"></app-checkpoints>\n<app-frequency-container *ngIf=\"activeSelector === 'frequency'\" [frequencyDetails]=\"frequencyDetails\"\n  [feature]=\"feature\" [onCompletionResponsibility]=\"responsibilityDetails?.onCompletionResponsibility\"\n  (selectedFrequency)=\"frequencyData($event)\" [mode]=\"'responsibility'\" (closeFrequency)=\"activeDeselector()\">\n</app-frequency-container>\n\n<app-responsibility-centers-list *ngIf=\"activeSelector === 'rc'\" [loaded]=\"rcListLoaded\"\n  [responsibilityCentersList]=\"responsibilityCentersList\" [radioSelection]=\"\n    mode == 'EDIT' && responsibilityCenterType === 0 ? true : false\n  \" [selectedResponsibilityCenters]=\"responsibilityForm.rc\" [rcIdKey]=\"'item_id'\"\n  (saveSelectedList)=\"saveSelectedList('rc', $event)\" (closeRcList)=\"activeDeselector()\">\n</app-responsibility-centers-list>\n\n<app-category-multi-select *ngIf=\"activeSelector === 'category'\" [categoryList]=\"categories\"\n  [allCategories]=\"allCategories\" [categoryIdKey]=\"'category_id'\" [selectedCategories]=\"responsibilityForm.category\"\n  (saveSelectedCategory)=\"saveSelectedList('category', $event)\" (closeCategoriesList)=\"activeDeselector()\">\n</app-category-multi-select>\n\n<!-- Program List Popup -->\n<app-list-container *ngIf=\"activeSelector === 'program'\" (close)=\"activeDeselector()\">\n  <app-program-list body (itemsSelectedChange)=\"onItemsSelectedChange($event)\" [selectedItems]=\"selectedPrograms\"\n    [url]=\"programListUrl\"></app-program-list>\n  <div class=\"vx-d-flex vx-align-center vx-justify-between vx-w-100\" footer>\n    <div class=\"left-side vx-fs-12 vx-d-flex\">\n      <ng-container *ngIf=\"allProgamSelected.length > 0\">\n        <button\n          class=\"selected-count-box vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\">\n          {{ allProgamSelected.length }}\n        </button>\n        <span class=\"selected-text\">\n          Program\n          {{ allProgamSelected.length > 1 ? \"Categories\" : \"Category\" }}\n          Selected</span>\n      </ng-container>\n    </div>\n    <div class=\"right-side vx-d-flex\">\n      <button class=\"cancelBtn\" (click)=\"activeDeselector()\">Cancel</button>\n      <button class=\"nextBtn\" (click)=\"activeDeselector(); selectCategory()\">\n        Next <i class=\"icons\">&#xe91e;</i>\n      </button>\n    </div>\n  </div>\n</app-list-container>\n\n<app-owner-list *ngIf=\"activeSelector === 'reviewer' && !featureFlag_groups\" [listHeading]=\"'Select a Reviewer'\"\n  [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\" [usersList]=\"allUsersList\" [showWorkflow]=\"true\"\n  [selectedUsers]=\"responsibilityForm.reviewers.list\" [userIdKey]=\"'employee_id'\" [itemEmailKey]=\"'employee_email'\"\n  [itemNameKey]=\"'member_name'\" (saveSelectedList)=\"\n    saveSelectedList('reviewer', $event);\n    activateSelector('reviewerFrequency', true)\n  \" (closeUsersList)=\"activeDeselector()\" [mode]=\"mode\" [fromResponsibility]=\"'Reviewer'\" [reviewerWorkflowType]=\"\n    responsibilityForm?.reviewers?.sequentialWorkflow\n      ? 'SEQUENTIAL'\n      : 'ANY REVIEWER CAN MARK THIS AS REVIEWED'\n  \" (reviewerWorkflowTypeChange)=\"reviewerTypeChange($event)\">\n</app-owner-list>\n<user-group-list *ngIf=\"activeSelector === 'reviewer' && featureFlag_groups\" [selectedReviewer]=\"true\"\n  [userlist]=\"reviewerMemberIdsList\" [groupEnabled]=\"true\" [groupList]=\"groupReviewerList\"\n  [selectedGroups]=\"responsibilityForm?.groupReviewers?.list\" [selectedUsers]=\"responsibilityForm?.reviewers?.list\"\n  (cancel)=\"activeDeselector()\" (save)=\"\n    saveSelectedList('reviewer', $event);\n    activateSelector('reviewerFrequency', true)\n  \" [mode]=\"mode\" [fromResponsibility]=\"'Reviewer'\" [loading]=\"userListLoader || assignorsListLoader\"\n  (reviewerWorkflowTypeChange)=\"reviewerTypeChange($event)\" [reviewerWorkflowType]=\"\n    responsibilityForm?.reviewers?.sequentialWorkflow\n      ? 'SEQUENTIAL'\n      : 'ANY REVIEWER CAN MARK THIS AS REVIEWED'\n  \" [featureflag]=\"featureFlag_groups\">\n</user-group-list>\n<app-owner-list *ngIf=\"activeSelector === 'overseer' && !featureFlag_groups\" [singularText]=\"'User selected'\"\n  [pluralText]=\"'Users selected'\" [usersList]=\"allUsersList\" [selectedUsers]=\"responsibilityForm.overseers.list\"\n  [userIdKey]=\"'employee_id'\" [fromResponsibility]=\"'Overseer'\" [itemNameKey]=\"'member_name'\"\n  (saveSelectedList)=\"saveSelectedList('overseer', $event)\" (closeUsersList)=\"activeDeselector()\"\n  [itemEmailKey]=\"'employee_email'\">\n</app-owner-list>\n<user-group-list *ngIf=\"activeSelector === 'overseer' && featureFlag_groups\" [groupEnabled]=\"true\"\n  [groupList]=\"groupOverseerList\" [selectedGroups]=\"responsibilityForm?.overseersGroups?.list\"\n  [userlist]=\"overseersList\" [selectedUsers]=\"responsibilityForm.overseers.list\" [fromResponsibility]=\"'Overseer'\"\n  [loading]=\"userListLoader || assignorsListLoader\" (save)=\"saveSelectedList('overseer', $event)\"\n  (cancel)=\"activeDeselector()\" [featureflag]=\"featureFlag_groups\">\n</user-group-list>\n\n<app-owner-list *ngIf=\"activeSelector === 'overseerNotify' && !featureFlag_groups\" [singularText]=\"'User selected'\"\n  [pluralText]=\"'Users selected'\" [usersList]=\"allUsersList\" [fromResponsibility]=\"'Overseer'\"\n  [selectedUsers]=\"responsibilityForm.overseers.notifyList\" [userIdKey]=\"'employee_id'\" [itemNameKey]=\"'member_name'\"\n  (saveSelectedList)=\"saveSelectedList('overseerNotify', $event)\" (closeUsersList)=\"activeDeselector()\"\n  [itemEmailKey]=\"'employee_email'\"></app-owner-list>\n<user-group-list *ngIf=\"activeSelector === 'overseerNotify' && featureFlag_groups\" [userlist]=\"overseersList\"\n  [groupEnabled]=\"true\" [groupList]=\"groupOverseerList\"\n  [selectedGroups]=\"responsibilityForm?.overseersGroups?.notifyList\"\n  [selectedUsers]=\"responsibilityForm.overseers.notifyList\" [fromResponsibility]=\"'Overseer'\"\n  [loading]=\"userListLoader || assignorsListLoader\" (save)=\"saveSelectedList('overseerNotify', $event)\"\n  (cancel)=\"activeDeselector()\" [featureflag]=\"featureFlag_groups\">\n</user-group-list>\n\n<app-owner-list *ngIf=\"activeSelector === 'assurance'\" [singularText]=\"'Test Category selected'\"\n  [pluralText]=\"'Test Categories selected'\" [searchPlaceholder]=\"'Search Test Category...'\"\n  [listHeading]=\"'Select Test Categories'\" [usersList]=\"assuranceCategoriesList\"\n  [noDataText]=\"'No Test Categories Found'\" [selectedUsers]=\"responsibilityForm.assuranceList\"\n  [userIdKey]=\"'category_id'\" [itemEmailKey]=\"'category_name'\" [itemNameKey]=\"'category_name'\"\n  (saveSelectedList)=\"saveSelectedList('assurance', $event)\" (closeUsersList)=\"activeDeselector()\"\n  [searchPlaceholder]=\"'Search Category'\">\n</app-owner-list>\n\n<app-audit-category-list *ngIf=\"activeSelector === 'requires_audit'\" (closeList)=\"activeDeselector()\"\n  [auditCategory]=\"assuranceRequiresAuditList\" (saveSelectedList)=\"saveSelectedList('requires_audit', $event)\"\n  [selectedData]=\"responsibilityForm?.requiresAuditList[0]\"></app-audit-category-list>\n\n<app-loader-inline *ngIf=\"(loader && this.mode === 'EDIT') || entrustLoader\"></app-loader-inline>\n<app-framework-list *ngIf=\"activeSelector === 'framework'\" (assignControl)=\"assignFromFramework($event)\"\n  [previousSelectedValues]=\"selectedFrameworkValues\" (closeFramework)=\"activeDeselector()\"\n  (entrustFramework)=\"entrustFramework($event)\"></app-framework-list>\n\n<!-- risk-calculator here -->\n<app-risk-classification *ngIf=\"activeSelector === 'riskCalculator'\" [currentRiskValue]=\"responsibilityForm.riskClass\"\n  (saveList)=\"saveSelectedList('calculatedrisk', $event)\" (closeList)=\"activeDeselector()\">\n</app-risk-classification>\n\n<app-review-frequency *ngIf=\"activeSelector === 'reviewerFrequency'\" [reviewCompleteDays]=\"\n    responsibilityForm.reviewers.reviewFrequency.reviewCompleteDays\n  \" [reviewNOtCompletedDays]=\"\n    responsibilityForm.reviewers.reviewFrequency.reviewNOtCompletedDays\n  \" (saveReviewFrequency)=\"saveSelectedList('reviewFrequency', $event)\" (closeReviewFrequency)=\"\n    activeDeselector();\n    activateSelector('reviewer', false);\n    responsibilityForm.reviewers.list = [];\n    responsibilityForm.groupReviewers.list = []\n  \" (backToUserList)=\"activeDeselector(); activateSelector('reviewer', true)\">\n</app-review-frequency>\n\n<app-assessment-list *ngIf=\"isAssessment\" [program_ids]=\"responsibilityForm.program[0]?._id\" (cancelAssessment)=\"\n    isAssessment = false; activateSelector('isAssessment', false)\n  \" [isEdit]=\"responsibilityForm?.assessment?.assessment_id ? true : false\"\n  [selectedAssessment]=\"responsibilityForm?.assessment\" (onAssessmentSelect)=\"\n    onAssessmentSelect($event); activateSelector('isAssessment', false)\n  \"></app-assessment-list>\n\n<app-smiley-dialog-inline *ngIf=\"showSmiley\" [message]=\"smileyMessage\" [actionButtons]=\"actionButtons\"\n  (action)=\"action($event)\" (closeSmiley)=\"closeSmiley($event)\"></app-smiley-dialog-inline>\n\n<div class=\"import\" *ngIf=\"activeSelector === 'checkpoints-new'\">\n  <app-create-assessment-container #editor [openPortal]=\"'RESPONSIBILITY_CHECKPOINT'\"\n    (postAssessment)=\"postAssessment($event)\" (setIsUploaded)=\"setIsUploaded($event)\"\n    [checkpointJSON]=\"responsibilityForm.new_checkpoints\">\n  </app-create-assessment-container>\n</div>\n\n<app-grc-object-list *ngIf=\"activeSelector === 'GRC_OBJECTS'\" [grcObject]=\"grcList\"\n  [selectedGRC]=\"responsibilityForm.selectedGRCObjects | refDisconnect\" [loader]=\"grcLoader\" [tableCard]=\"otherGRCCard\"\n  [selectedTab]=\"selectedGRCTab\" [cardLoader]=\"grcTabLoader\" (getOtherGRCObjects)=\"getOtherGRCObjects($event)\"\n  (saveOtherGRC)=\"saveSelectedList('GRC_OBJECTS', $event)\"\n  (closeOtherGRC)=\"activateSelector('GRC_OBJECTS', false)\"></app-grc-object-list>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::ng-deep .workflw-compliance{display:block;position:relative}::ng-deep .workflw-compliance vcomply-editor .editor-container{border-radius:4px}::ng-deep .workflw-compliance vcomply-editor .editor-container .editable-block{min-height:72px;padding:11px 15px;line-height:20px;font-size:14px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}@media not all and (min-resolution: .001dpcm){@supports (-webkit-appearance: none){::ng-deep .workflw-compliance vcomply-editor .editor-container .editable-block:before{opacity:.72}}}::ng-deep .workflw-compliance vcomply-editor .editor-container .editable-block ul{padding:0 0 0 10px;margin-top:0}::ng-deep .workflw-compliance vcomply-editor .editor-container .editable-block ul li{list-style:unset}::ng-deep .workflw-compliance vcomply-editor .editor-container .editable-block ol{padding:0 0 0 10px;margin-top:0}::ng-deep .workflw-compliance vcomply-editor .editor-container .editable-block ol li{list-style:decimal}::ng-deep .workflw-compliance vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .workflw-compliance vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:22px}::ng-deep .workflw-compliance vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .workflw-compliance vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .workflw-compliance .sample-part{display:flex;align-items:center;margin-bottom:4px}::ng-deep .workflw-compliance .sample-part .sample-radio{width:100%}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item{position:relative;width:100%}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item .radio{position:absolute;left:12px;top:12px}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item .value{border:1px solid #dbdbdb;border-radius:4px;height:40px;padding:8px 8px 8px 36px;margin:0;max-width:100%;width:100%;display:flex;align-items:center;justify-content:space-between;pointer-events:none}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item .value .name{color:#747576;font-size:11px;font-weight:500;text-transform:uppercase}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item .value input{border:1px solid #dcdcdc;background:#fff;border-radius:4px;height:24px;width:64px;text-align:center;padding:4px;color:#747576;font-size:13px}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item .value input:focus{outline:none;box-shadow:none}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item input:checked~svg{position:absolute;left:12px;top:12px}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item input:checked~.value{border:1px solid #34aa44;background:#eefcf0;pointer-events:auto}::ng-deep .workflw-compliance .sample-part .or{color:#161b2f;font-size:9px;font-weight:500;text-transform:uppercase;margin:0 10px}::ng-deep .workflw-compliance .sample-part.disabled{pointer-events:none}::ng-deep .workflw-compliance .sample-part.disabled .sample-radio .radio-item .value{background:#fbfbfb;border:1px solid #f1f1f1}::ng-deep .workflw-compliance .reminder-part{border:1px solid #dbdbdb;border-radius:4px;height:40px;padding:4px 12px;color:#747576;font-size:12px;display:flex;align-items:center}::ng-deep .workflw-compliance .reminder-part input{width:30px;border:none;border-radius:0;border-bottom:1px solid #dbdbdb;text-align:center;color:#747576;font-size:13px;font-weight:500;margin:0 4px}::ng-deep .workflw-compliance .reminder-part input:focus{outline:none!important;box-shadow:none!important}::ng-deep .workflw-compliance .reminder-part .picker-group{position:relative}::ng-deep .workflw-compliance .reminder-part .picker-group input{border:1px solid #f1f1f1!important;border-radius:4px!important;width:104px!important;height:28px!important;margin-left:8px!important;padding:6px 8px!important;cursor:pointer;color:#747576!important;font-size:12px!important;font-weight:500!important;text-align:left!important}::ng-deep .workflw-compliance .reminder-part .picker-group input:hover,::ng-deep .workflw-compliance .reminder-part .picker-group input:focus{outline:none!important;box-shadow:none!important}::ng-deep .workflw-compliance .reminder-part .picker-group i{color:#1e5dd3;position:absolute;top:6px;right:10px;font-size:16px}.assessment-text{color:#747576;font-size:11px;display:flex;align-items:center;padding:0 8px;margin:-16px 0 20px}.assessment-text i.alert-icon{color:#f2bf19;font-size:16px;margin-right:8px}.assessment-text strong{font-weight:600}.assessment-text button.remove-btn{background:transparent;border-radius:0;border:none;color:#1e5dd3;font-size:10px;font-weight:600;padding:0;margin:0}.import{position:fixed;inset:0 30px 0 0;z-index:-1;width:calc(100vw - 30px)}.wf-action-list ul.action-item li.multiple-program{background:#f8f8f8}.wf-action-list ul.action-item li.multiple-program .avatar-card{padding:2px 7.5px}.wf-action-list ul.action-item li.multiple-program .avatar-card span.value{color:#747576;font-size:11px;font-weight:600;width:unset}.primary-label{background:#7aa7f7;border-radius:2px;color:#fff;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 4px;line-height:12px;margin:0 4px}.edit-due-date{display:flex;align-items:baseline;justify-content:space-between}.left-side{color:#707070}.right-side button{border-radius:2px;height:24px;background:#1e5dd3!important;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;font-weight:500;border:none!important;padding:0 8px;margin:0 0 0 8px}.right-side button i{margin-left:8px;font-size:11px}.right-side button:disabled{background:#f1f1f1!important;color:#747576!important;opacity:1}.right-side button.cancelBtn{background:transparent!important;color:#eb2424!important}.selected-count-box{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem;position:relative}.selected-text{color:#707070;font-size:11px;font-weight:500;position:fixed;padding-left:2.5rem}::ng-deep .vc-divider{border-top:.5px solid #dbdbdb;width:100%}::ng-deep .vc-cf-container{border-bottom:1px solid #E3E3E9}::ng-deep .vc-cf-container:first-of-type,::ng-deep .vc-cf-container:only-child{border-top:1px solid #E3E3E9}::ng-deep .vc-cf-container .cf-name{width:9.25rem}::ng-deep .vc-cf-container .cf-value{width:calc(100% - 9.75rem)}::ng-deep .vc-cf-container .cf-value input{height:24px!important;border:1px solid #CDCED6!important;padding:0 .5rem!important;color:#565a6f!important;font-size:11px!important}::ng-deep .vc-cf-container .cf-value input::placeholder{color:#a9aab6!important}::ng-deep .vc-cf-container .cf-value input:hover{border-color:#343952!important}::ng-deep .vc-cf-container .cf-value input:focus{outline:none;border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd31a}\n", "@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::-webkit-scrollbar-track{background-color:#f1f1f1;position:absolute}::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}button{font-family:Poppins,sans-serif}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;font-size:13px;color:#747576;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField::placeholder{font-size:13px;color:#747576}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxEnable.withBtn:after{display:none}::ng-deep .selectBoxEnable.withBtn button.setBtn{background:transparent;border-radius:0;border:none;min-width:98px}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer .chipName.no-width{max-width:unset}::ng-deep .chipContainer .chipName.full-width{max-width:25rem}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}::ng-deep .chipContainer button.countBtn.blueBg{background:#1e5dd3}::ng-deep .workflowLavel{background:#f1f1f1;border-radius:.125rem;color:#042e7d;min-width:1rem;height:1rem}::ng-deep .reviewSelection{border-radius:.25rem;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep .reviewSelection:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectButton{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectButton:hover,::ng-deep .selectButton:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep button.createNewBtn{background:transparent;border-radius:0;border:none}::ng-deep .vx-form-group{display:block;position:relative;margin-bottom:20px}::ng-deep .vx-form-group:after{content:\"\";display:block;clear:both}::ng-deep .vx-form-group .select{position:relative}::ng-deep .vx-form-group .select:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#707070;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .vx-form-group .select input{cursor:pointer;padding-right:30px!important}::ng-deep .vx-form-group .select .custom-input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;outline:none;padding:3px 12px;line-height:16px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .vx-form-group .select .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:13px;width:94%;display:block;pointer-events:none;opacity:.8}::ng-deep .vx-form-group .select .custom-input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .vx-form-group .select .custom-input.frequency-custom-input{padding-right:108px;display:flex;align-items:center}::ng-deep .vx-form-group .select+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .select+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .select+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .select~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .select.button-sec:after{display:none}::ng-deep .vx-form-group .select.button-sec button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;position:absolute;top:12px;right:8px;padding:0;margin:0}::ng-deep .vx-form-group .select+.vx-control-panel{margin-top:8px}::ng-deep .vx-form-group .select+.selected{margin-top:8px}::ng-deep .vx-form-group .select.select{margin-top:8px}::ng-deep .vx-form-group .upload-format{border:1px solid #dbdbdb;border-radius:4px;padding:8px 12px;display:block}::ng-deep .vx-form-group .upload-format span.text{line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:block;margin-bottom:6px}::ng-deep .vx-form-group .upload-format .radio-group{display:flex}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio{display:inline-block}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;margin-left:8px}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio+app-cs-radio{margin-left:12px}::ng-deep .vx-form-group .upload-format~.upload-format{margin-top:4px}::ng-deep .vx-form-group .form-tab{display:flex;justify-content:flex-start}::ng-deep .vx-form-group .form-tab button{background:transparent;color:#161b2f;font-size:11px;line-height:16px;text-transform:uppercase;cursor:pointer;padding:8px 8px 8px 0;border:none;outline:none;font-weight:500}::ng-deep .vx-form-group .form-tab button:disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .form-tab button+button{padding:8px}::ng-deep .vx-form-group .form-tab button.active{color:#1e5dd3}::ng-deep .vx-form-group .tab-group{border:1px solid #dbdbdb;border-radius:4px;padding:0;display:block;position:relative;transition:all .2s ease-in-out}::ng-deep .vx-form-group .tab-group:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group .tab-group .upload-file{padding:16px 62px 16px 24px;display:flex;align-items:center;justify-content:space-between}::ng-deep .vx-form-group .tab-group .upload-file .image{width:80px}::ng-deep .vx-form-group .tab-group .upload-file .browse span{display:inline-block;font-size:12px;color:#747576;line-height:16px;padding:0 4px}::ng-deep .vx-form-group .tab-group .upload-file .browse .label{font-size:11px;color:#1e5dd3;line-height:16px;font-weight:600;text-transform:uppercase;margin:0;padding:0}::ng-deep .vx-form-group .tab-group .upload-file .browse .label input{opacity:0;position:absolute;margin:0;padding:0;inset:0;cursor:pointer;width:100%}::ng-deep .vx-form-group .tab-group.active{border-color:#1e5dd3}::ng-deep .vx-form-group .tab-group.uploaded{margin-top:4px}::ng-deep .vx-form-group .tab-group.uploaded .upload-file{padding:8px 0!important;text-align:center}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .image{display:none}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .browse{width:100%;text-align:center}::ng-deep .vx-form-group .tab-group+label.vx-form-group{margin-top:8px;margin-bottom:4px}::ng-deep .vx-form-group .file-list{background:#fbfbfb;border:1px solid #f1f1f1;border-radius:4px;padding:12px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;position:relative}::ng-deep .vx-form-group .file-list span.file-name{color:#747576;line-height:16px;font-size:11px;font-weight:400;cursor:pointer;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .vx-form-group .file-list .button-group{display:flex}::ng-deep .vx-form-group .file-list button{font-size:12px;color:#eb2424;cursor:pointer;display:flex;padding:0;border:none;outline:none;background:transparent}::ng-deep .vx-form-group .file-list button.edit{color:#1e5dd3}::ng-deep .vx-form-group .file-list button+button{margin-left:16px}::ng-deep .vx-form-group .file-list+.file-list{margin-top:4px}::ng-deep .vx-form-group .file-list .file-container{display:flex;justify-content:space-between;width:100%}::ng-deep .vx-form-group .file-list.policy{background:#fff}::ng-deep .vx-form-group .file-list cs-select{position:relative;margin-top:8px;width:100%}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group input.value{height:32px!important;font-size:13px!important}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group i{right:12px!important;top:12px!important}::ng-deep .vx-form-group .file-list app-line-loader{display:block;position:absolute;left:10px;right:10px;bottom:0}::ng-deep .vx-form-group label.vx-control-panel{color:#161b2f;font-size:11px;font-weight:500;line-height:16px;margin-bottom:8px;display:block;text-transform:uppercase;text-align:left}::ng-deep .vx-form-group label.vx-control-panel.custom-tag{font-size:10px}::ng-deep .vx-form-group label.vx-control-panel.vx-mt-8{margin-top:8px}::ng-deep .vx-form-group label.vx-control-panel span.required{color:#eb2424;font-size:14px;font-weight:500;position:relative;top:-2px}::ng-deep .vx-form-group label.vx-control-panel .button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;padding:0;margin:0}::ng-deep .vx-form-group label.vx-control-panel app-cs-switch{float:right;display:block}::ng-deep .vx-form-group label.vx-control-panel i{margin-left:8px;font-size:12px;color:#1e5dd3;cursor:pointer;position:relative;top:1px}::ng-deep .vx-form-group label.vx-control-panel i.depreciation-icon{color:#e4b700;font-size:16px;position:relative;top:3px}::ng-deep .vx-form-group label.vx-control-panel .checkpoint-version{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:10px;font-weight:600;line-height:14px;margin-left:4px;padding:0 2px}::ng-deep .vx-form-group input[type=text],::ng-deep .vx-form-group .input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;outline:none;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400}::ng-deep .vx-form-group input[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group input[type=text]:focus,::ng-deep .vx-form-group .input:focus,::ng-deep .vx-form-group input[type=text]:hover,::ng-deep .vx-form-group .input:hover{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group input[type=text].error,::ng-deep .vx-form-group .input.error{border-color:#eb2424;color:#eb2424;margin-bottom:4px}::ng-deep .vx-form-group input[type=text].error:focus,::ng-deep .vx-form-group .input.error:focus{box-shadow:0 0 5px #d31e1e45}::ng-deep .vx-form-group input[type=text]:disabled,::ng-deep .vx-form-group .input:disabled{background:#f1f1f1;cursor:not-allowed;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group input[type=text]:disabled:hover,::ng-deep .vx-form-group .input:disabled:hover{border-color:#dbdbdb;box-shadow:none}::ng-deep .vx-form-group input[type=text] span.text,::ng-deep .vx-form-group .input span.text{font-size:13px;color:#747576;font-weight:400;display:block;width:100%}::ng-deep .vx-form-group input[type=text] .input-group,::ng-deep .vx-form-group .input .input-group{display:flex;align-items:center}::ng-deep .vx-form-group input[type=text] .input-group.counter,::ng-deep .vx-form-group .input .input-group.counter{min-width:96px;width:96px}::ng-deep .vx-form-group input[type=text] .input-group.counter button,::ng-deep .vx-form-group .input .input-group.counter button{height:24px;width:24px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#747576;font-size:8px;cursor:pointer;outline:none}::ng-deep .vx-form-group input[type=text] .input-group.counter input,::ng-deep .vx-form-group .input .input-group.counter input{-webkit-appearance:textfield;-moz-appearance:textfield;height:24px;width:calc(100% - 48px);border:1px solid #f1f1f1;outline:none;padding:0 6px;text-align:center}::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-outer-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-outer-spin-button{appearance:none;margin:0}::ng-deep .vx-form-group input[type=text]+.file-list,::ng-deep .vx-form-group .input+.file-list{margin-top:8px}::ng-deep .vx-form-group input[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]:-ms-input-placeholder,::ng-deep .vx-form-group .input:-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]::-ms-input-placeholder,::ng-deep .vx-form-group .input::-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group .classification{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;padding:8px 12px;display:flex;justify-content:space-between}::ng-deep .vx-form-group .classification label{margin:0 4px 0 0;width:100%;position:relative;z-index:1}::ng-deep .vx-form-group .classification label span{display:block;width:100%;height:24px;border:1px solid #f1f1f1;border-radius:2px;line-height:24px;font-size:10px;text-align:center;color:#747576;font-weight:500;position:relative;text-transform:uppercase}::ng-deep .vx-form-group .classification label span:before{height:2px;content:\"\";top:0;right:0;left:0;border-radius:2px;position:absolute;transition:all .2s ease-in-out}::ng-deep .vx-form-group .classification label input{opacity:0;position:absolute;inset:0;margin:0;padding:0;width:100%;height:100%;cursor:pointer;z-index:1}::ng-deep .vx-form-group .classification label input:checked+span{color:#fff}::ng-deep .vx-form-group .classification label input:checked+span:before{bottom:0;height:100%;z-index:-1}::ng-deep .vx-form-group .classification label.low span:before{background:#34aa44}::ng-deep .vx-form-group .classification label.low-med span:before{background:#f2bf19}::ng-deep .vx-form-group .classification label.med-high span:before{background:#f29619}::ng-deep .vx-form-group .classification label.high span:before{background:#eb2424}::ng-deep .vx-form-group .classification label:last-of-type{margin-right:0}::ng-deep .vx-form-group .input{display:flex;align-items:center}::ng-deep .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;padding:8px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:flex;align-items:center;position:relative;justify-content:space-between}::ng-deep .vx-form-group .selected.first-field{z-index:2}::ng-deep .vx-form-group .selected .chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .vx-form-group .selected .chip-container.checkpoints{width:calc(100% - 120px)}::ng-deep .vx-form-group .selected .chip-container span.chip{background:#fff;border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;padding:0 8px;color:#1e5dd3;font-size:12px;display:block;width:auto;max-width:100%;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .vx-form-group .selected .chip-container span.chip.disabled{background:#f1f1f1;box-shadow:none;color:#747576;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .selected .chip-container span.chip i{font-weight:400;margin-right:8px;cursor:pointer;font-size:10px;position:relative;top:1px}::ng-deep .vx-form-group .selected .chip-container span.chip span.step{background:#1e5dd3;border-radius:2px;color:#fff;font-size:9px;line-height:14px;padding:0 4px;font-weight:400;text-align:center;min-width:auto;margin-right:4px}::ng-deep .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question{display:flex;align-items:center;justify-content:space-between;width:100%}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.value{color:#1e5dd3;font-size:12px;font-weight:400;line-height:24px;padding:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 80px)}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.label{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding-left:4px;padding-right:4px;line-height:12px;margin-left:8px}::ng-deep .vx-form-group .selected .chip-container span.value{color:#747576;font-size:13px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 52px);padding:0 4px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text{color:#747576;font-size:10px;font-weight:500;padding:0 8px;width:122px;line-height:14px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first{position:relative;min-width:162px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first:before{background:#f1f1f1;content:\"\";position:absolute;top:0;right:0;height:calc(100% + 12px);width:1px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text .no{color:#1e5dd3}::ng-deep .vx-form-group .selected .chip-container.plus span.chip{max-width:calc(50% - 35px)}::ng-deep .vx-form-group .selected .chip-container.more-one span.chip{max-width:50%}::ng-deep .vx-form-group .selected .chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .vx-form-group .selected .chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:100px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count{border-radius:20px;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .vx-form-group .selected .chip-container .chip-inner i.cross{cursor:pointer;position:relative;top:1px;font-size:8px}::ng-deep .vx-form-group .selected button.count{background:#1e5dd3;border-radius:2px;height:24px;padding:0 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none;color:#fff;font:13px;font-weight:500;line-height:20px;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit{border:none;border-radius:0;background:transparent;outline:none;cursor:pointer;display:block;font-size:11px;font-weight:600;color:#1e5dd3;text-transform:uppercase;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit i{font-weight:400;font-size:8px;margin-right:4px}::ng-deep .vx-form-group .selected button.close-btn{background:transparent;border:none;padding:0;margin-left:8px;font-size:10px;color:#c7381b;display:flex;align-items:center}::ng-deep .vx-form-group .selected .workflow-label{min-width:92px;padding:4px;text-align:center;margin-left:-8px;margin-right:8px;border-right:1px solid #f1f1f1}::ng-deep .vx-form-group .selected .workflow-label p{margin:0;display:block;text-transform:uppercase}::ng-deep .vx-form-group .selected .workflow-label p.title{font-size:9px;line-height:12px;color:#161b2f;font-weight:500}::ng-deep .vx-form-group .selected .workflow-label p.description{font-size:11px;line-height:16px;color:#161b2f;font-weight:600}::ng-deep .vx-form-group .selected .workflow-label+.chip-container{width:calc(100% - 148px)}::ng-deep .vx-form-group .selected+.selected{margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .selected+app-cs-switch.who-toggle label.cs-switch span.value{color:#747576}::ng-deep .vx-form-group .selected+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .selected~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .selected.readOnly{pointer-events:none}::ng-deep .vx-form-group .selected span.chip{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .vx-form-group .select-list{position:absolute;background:#fff;box-shadow:0 0 5px #1e5dd345;top:100%;right:0;left:0;z-index:2}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item{width:100%;padding:12px 16px}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item:hover{background:#f8f8f8}::ng-deep .vx-form-group ::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;line-height:38px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400;border:none;padding:0 12px 0 34px;outline:none}::ng-deep .vx-form-group .date-time-picker .picker-group input:focus,::ng-deep .vx-form-group .date-time-picker .picker-group input:hover{box-shadow:none;border:none}::ng-deep .vx-form-group .date-time-picker .picker-group input::placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input:-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input::-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group i{display:flex;justify-content:center;align-items:center;height:16px;width:12px;position:absolute;left:12px;top:0;color:#747576;font-size:12px;pointer-events:none}::ng-deep .vx-form-group app-cs-radio.main-filed{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;color:#707070}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group app-cs-radio.disabled{pointer-events:none;opacity:.5;filter:grayscale(1);background:#f1f1f1}::ng-deep .vx-form-group .switch-row{display:flex}::ng-deep .vx-form-group .switch-row app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:0;text-transform:uppercase;color:#747576!important}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value i{display:inline-flex;font-size:11px;cursor:pointer;color:#1e5dd3;align-items:center;line-height:16px;margin:0 4px}::ng-deep .vx-form-group .switch-row app-cs-switch+app-cs-switch{margin-left:8px}::ng-deep .vx-form-group .switch-row.align-right{justify-content:flex-end}::ng-deep .vx-form-group .switch-row.align-right label.cs-switch span.value{margin-right:8px}::ng-deep .vx-form-group .risk-type-field{background:#f8f8f8;border:1px solid #dbdbdb;border-radius:4px;height:40px;display:flex;align-items:center;padding:4px;position:relative;z-index:1}::ng-deep .vx-form-group .risk-type-field .type-item{width:50%;position:relative}::ng-deep .vx-form-group .risk-type-field .type-item button{background:transparent;border:none;border-radius:0;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase;width:100%;height:32px;padding:0 12px;text-align:left}::ng-deep .vx-form-group .risk-type-field .type-item button.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item .info{color:#1e5dd3;font-size:12px;position:absolute;top:10px;right:12px;cursor:pointer}::ng-deep .vx-form-group .risk-type-field .type-item .info.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item.active button{color:#1e5dd3!important}::ng-deep .vx-form-group .risk-type-field .type-item:nth-child(2).active~.background-glider{transform:translate(100%)}::ng-deep .vx-form-group .risk-type-field .background-glider{background:#fff;border-radius:4px;box-shadow:0 1px 3px #161b2f26;position:absolute;display:flex;width:212px;height:32px;z-index:-1;transition:.25s ease-out}.left{width:36px;height:36px;margin-top:26px;margin-left:-58px;margin-right:20px;display:flex;justify-content:center;align-items:center;position:relative;z-index:10;border-radius:50%}.left.deadline-completed{margin-top:18px}.left.checked{background:transparent}.left img{width:36px}.left .checkIcon{width:32px;height:32px;background:#fff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}.left .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}.left .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}.right{width:100%}.right span.indicator{position:absolute;top:36px;left:-16px;font-size:12px;color:#f0b819;cursor:pointer}.form-group-row{display:flex;position:relative;transition:all .2s ease-in-out}.form-group-row.disabled{-webkit-user-select:none;user-select:none;pointer-events:none;filter:grayscale(1);z-index:2}.form-group-row.disabled .left{position:relative}.form-group-row.disabled .left:before{content:\"\";position:absolute;inset:2px 0 0 2px;background:#fff;opacity:.7;border-radius:50%;width:32px;height:32px}.form-group-row.disabled .right{opacity:.3}.form-group-row.active{pointer-events:none;filter:grayscale(0);z-index:2;opacity:1}.form-group-row.active .right .vx-form-group input,.form-group-row.active .right .vx-form-group .custom-input,.form-group-row.active .right .vx-form-group .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}.form-group-row.active .right .vx-form-group .selectBoxEnable.disabled{border-color:#dbdbdb;box-shadow:none}::ng-deep .radio-group-selector app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .radio-group-selector app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .radio-group-selector app-cs-radio label.radio-item .radio,::ng-deep .radio-group-selector app-cs-radio label.radio-item .radiomark{position:absolute!important;top:9px;left:12px}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value{font-size:11px!important;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0!important;max-width:100%!important;font-weight:500!important;color:#707070!important}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value i{font-size:12px;color:#1e5dd3}::ng-deep .radio-group-selector app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}::ng-deep .wf-action-list{width:220px}::ng-deep .wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}::ng-deep .wf-action-list ul.action-item{display:block}::ng-deep .wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}::ng-deep .wf-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}::ng-deep .wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .wf-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .wf-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .wf-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .wf-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .wf-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}::ng-deep .wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}p.error-message{font-size:11px;font-weight:400;color:#eb2424;line-height:16px;margin-top:8px;margin-bottom:0}.edit-loader{position:absolute;top:-3px;left:-3px;width:46px;height:46px;transform:rotate(180deg)}.circular-loader{animation:rotate 2s linear infinite;height:100%;transform-origin:center center;width:100%;position:absolute;top:0;left:0;margin:auto}.loader-path{stroke-dasharray:150,200;stroke-dashoffset:-10;animation:dash 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35}to{stroke-dasharray:89,200;stroke-dashoffset:-124}}::ng-deep .dropdown{position:fixed;background:#fff;box-shadow:0 3px 6px #00000029;padding:24px 0;z-index:9;max-height:calc(100vh - 200px);overflow:auto}::ng-deep .dropdown ul.dropdown-list{padding:0 20px;margin:0;display:block}::ng-deep .dropdown ul.dropdown-list li{list-style:none}::ng-deep .dropdown ul.dropdown-list li app-cs-radio{display:flex}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.radio{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.value{padding:11px 12px 11px 32px;width:100%;border:1px solid #bcbcbc;border-radius:4px;margin-left:0;max-width:100%}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item svg{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item input[type=radio]:checked~span.value{background:#e8feeb;border-color:#34aa44}::ng-deep .dropdown ul.dropdown-list li+li{margin-top:8px}app-smiley-dialog{position:relative;z-index:10}app-smiley-dialog-inline{position:absolute;top:-3px;right:0;bottom:0;z-index:999;width:520px;height:calc(100vh + 3px)}::ng-deep .vx-overlay{position:fixed;z-index:3;inset:0}::ng-deep dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}::ng-deep dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}::ng-deep dp-date-picker input:focus{outline:none}::ng-deep dp-date-picker .dp-popup{width:412px;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep dp-date-picker .dp-popup dp-day-calendar,::ng-deep dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep dp-date-picker .dp-popup dp-day-calendar button,::ng-deep dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}::ng-deep dp-date-picker .dp-open+div{position:fixed!important;inset:0!important;display:flex;justify-content:center;align-items:center;z-index:99;pointer-events:none;background:#0000004d}::ng-deep .cdk-overlay-container{z-index:2147483002!important}::ng-deep .dp-popup{z-index:999;display:flex!important;align-items:center;justify-content:center;width:100vw;height:100vh;background:#0000004d!important;box-shadow:unset!important}::ng-deep .dp-popup dp-day-calendar{width:412px!important;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep .dp-popup dp-day-calendar,::ng-deep .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep .dp-popup dp-day-calendar button,::ng-deep .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep .dp-popup dp-day-calendar .dp-weekdays,::ng-deep .dp-popup dp-month-calendar .dp-weekdays,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}@keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}::ng-deep span.file{display:block;width:20px;min-width:20px;border-radius:0 0 2px 2px;border:1px solid transparent;border-color:#747576;position:relative;margin-right:5px;border-top:none;margin-top:5px;background:#fff}::ng-deep span.file.table{margin-right:8px;width:18px;min-width:18px}::ng-deep span.file.table i{font-size:8px}::ng-deep span.file.table .format{height:8px;font-size:7px;line-height:8px;font-weight:400}::ng-deep span.file:before{position:absolute;border-radius:0;top:-4px;right:-1px;content:\"\";height:4px;width:4px;display:block;background:linear-gradient(45deg,#747576 0% 1%,#747576 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file:after{height:4px;left:-1px;right:3px;border-top:1px solid;border-right:none;border-left:1px solid;content:\"\";top:-4px;position:absolute;border-radius:2px 0 0;background:#fff}::ng-deep span.file .format{height:10px;font-size:6px;text-transform:uppercase;background:transparent;font-weight:600;text-align:center;display:block;line-height:10px}::ng-deep span.file i{font-size:10px;height:10px;display:flex;align-items:center;justify-content:center;color:#dbdbdb}::ng-deep span.file.docx{width:22px!important}::ng-deep span.file.pdf,::ng-deep span.file.template{border-color:#f31c39}::ng-deep span.file.pdf:before,::ng-deep span.file.template:before{background:linear-gradient(45deg,#f31c39 0% 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#f31c39\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.pdf:after,::ng-deep span.file.template:after{border-color:#f31c39}::ng-deep span.file.pdf .format,::ng-deep span.file.template .format{color:#f31c39}::ng-deep span.file.xlsx,::ng-deep span.file.xls,::ng-deep span.file.css,::ng-deep span.file.scss,::ng-deep span.file.less{border-color:#34aa44}::ng-deep span.file.xlsx:before,::ng-deep span.file.xls:before,::ng-deep span.file.css:before,::ng-deep span.file.scss:before,::ng-deep span.file.less:before{background:linear-gradient(45deg,#34aa44 0% 1%,#34aa44 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.xlsx:after,::ng-deep span.file.xls:after,::ng-deep span.file.css:after,::ng-deep span.file.scss:after,::ng-deep span.file.less:after{border-color:#34aa44;color:#34aa44}::ng-deep span.file.xlsx .format,::ng-deep span.file.xls .format,::ng-deep span.file.css .format,::ng-deep span.file.scss .format,::ng-deep span.file.less .format{color:#34aa44}::ng-deep span.file.doc,::ng-deep span.file.docx,::ng-deep span.file.psd{border-color:#1e5dd3}::ng-deep span.file.doc:before,::ng-deep span.file.docx:before,::ng-deep span.file.psd:before{background:linear-gradient(45deg,#1e5dd3 0% 1%,#1e5dd3 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.doc:after,::ng-deep span.file.docx:after,::ng-deep span.file.psd:after{border-color:#1e5dd3}::ng-deep span.file.doc .format,::ng-deep span.file.docx .format,::ng-deep span.file.psd .format{color:#1e5dd3}::ng-deep span.file.ppt,::ng-deep span.file.ai,::ng-deep span.file.html,::ng-deep span.file.jpg,::ng-deep span.file.jpeg,::ng-deep span.file.png{border-color:#f6882f}::ng-deep span.file.ppt:before,::ng-deep span.file.ai:before,::ng-deep span.file.html:before,::ng-deep span.file.jpg:before,::ng-deep span.file.jpeg:before,::ng-deep span.file.png:before{background:linear-gradient(45deg,#f6882f 0% 1%,#f6882f 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.ppt:after,::ng-deep span.file.ai:after,::ng-deep span.file.html:after,::ng-deep span.file.jpg:after,::ng-deep span.file.jpeg:after,::ng-deep span.file.png:after{border-color:#f6882f}::ng-deep span.file.ppt .format,::ng-deep span.file.ai .format,::ng-deep span.file.html .format,::ng-deep span.file.jpg .format,::ng-deep span.file.jpeg .format,::ng-deep span.file.png .format{color:#f6882f}::ng-deep span.file.php{border-color:#7aa6f7}::ng-deep span.file.php:before{background:linear-gradient(45deg,#7aa6f7 0% 1%,#7aa6f7 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.php:after{border-color:#7aa6f7}::ng-deep span.file.php .format{color:#7aa6f7}::ng-deep ngx-material-timepicker-container .timepicker-backdrop-overlay{background-color:#0000000d!important;z-index:9999999999!important}::ng-deep ngx-material-timepicker-container .timepicker-overlay{z-index:9999999999!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker{width:232px!important;border-radius:2px!important;box-shadow:0 4px 30px #161b2f26!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header{background-color:#fff!important;padding:0!important;border-radius:2px 2px 0 0}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container{display:block!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time{color:#000!important;width:150px!important;margin:0 auto;line-height:60px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control{font-size:40px;background-color:transparent!important;color:#000!important;font-weight:600;text-align:right;caret-color:transparent;outline:none;font-family:Poppins;line-height:56px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:focus,::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:hover{background-color:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control:last-of-type .timepicker-dial__control{text-align:left}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time span{padding:0 8px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period{display:flex!important;width:182px;margin:0 auto!important;background:#f1f1f1;padding:4px 10px;border-radius:20px;position:relative}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period:before{background:#f1f1f1;content:\"\";position:absolute;top:15px;left:-25px;width:calc(100% + 50px);height:2px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period{flex-direction:unset!important;position:relative;z-index:1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:after{content:\"\";position:absolute;right:-12px;top:0;border-left:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:before{content:\"\";position:absolute;left:-18px;top:0;border-right:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button{font-size:11px;background-color:transparent;padding:0;border-radius:20px;color:#747576;font-weight:600;font-family:Poppins;width:84px;height:24px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button.timepicker-dial__item_active{background:#fff!important;color:#1e5dd3!important;box-shadow:0 1px 2px #dbdbdb}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button+button{margin-left:0!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face{width:200px!important;height:200px!important;padding:10px!important;background:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer{height:92px!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span{color:#000}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span.active{color:#fff}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand{height:80px!important;top:calc(50% - 80px)!important;background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number>span.active{background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand_minute:before{border:4px solid #1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions{display:flex!important;padding:10px 0 0!important;background:#fff!important;justify-content:space-around!important;border-radius:0 0 2px 2px!important;overflow:hidden}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div:first-child ngx-material-timepicker-button button.timepicker-button{background:#f8f8f8;color:#1e5dd3}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button{line-height:28px!important;width:100%;background:#1e5dd3;color:#fff;border-radius:0!important;height:32px!important;width:116px!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button span{font-weight:500!important;font-size:11px;font-family:Poppins}::ng-deep vcomply-editor{display:block}::ng-deep vcomply-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep vcomply-editor .editor-container:hover,::ng-deep vcomply-editor .editor-container:focus-within{border:1px solid #1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep vcomply-editor .editor-container mention-list ul li a{font-size:16px!important}::ng-deep vcomply-editor .editor-container .editable-block{background:#fff;min-height:60px;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep vcomply-editor .editor-container .editable-block:before{color:#747576!important}::ng-deep vcomply-editor .editor-container .editor-tools{border-top:1px solid #dbdbdb;border-radius:0 0 3px 3px}::ng-deep vcomply-editor .editor-container .editor-tools:hover{border-color:#1e5dd3}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep marx-modal .popup-modal-background{background-color:#161b2fcc!important}::ng-deep .within-box{background:#f1f1f1;border-radius:.125rem;color:#042e7d}::ng-deep .within-value{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-word}.wf-tooltip{pointer-events:none;position:absolute;max-width:300px;font-size:12px;text-align:left;color:#fff;padding:8px 12px;background:#000;border-radius:2px;z-index:-222;top:0;opacity:0;white-space:break-spaces;word-break:break-word}.wf-tooltip *{color:#fff!important}.wf-tooltip:empty{display:none!important}.wf-tooltip.white{box-shadow:0 2px 8px #1c5bd159;color:#747576;background:#fff;text-align:left}.wf-tooltip.white b{color:#747576!important}.wf-tooltip.animate-top{animation:animate-top .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-right{animation:animate-right .3s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-bottom{animation:animate-bottom .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-left{animation:animate-left .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip-top:after{top:100%;left:50%;margin-left:-5px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip-bottom:after{bottom:100%;left:50%;margin-left:-5px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-left.white:after{border-color:transparent transparent transparent #f1f1f1}.wf-tooltip-left:after{top:50%;left:100%;margin-top:-5px;border-width:5px;border-color:transparent transparent transparent #000000}.wf-tooltip-right.white:after{border-color:transparent #f1f1f1 transparent transparent}.wf-tooltip-right:after{top:50%;right:100%;margin-top:-5px;border-width:5px;border-color:transparent #000000 transparent transparent}.wf-tooltip-bottom-right:after{bottom:100%;left:100%;margin-left:-20px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom-right.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-bottom-left:after{bottom:100%;left:0;margin-left:10px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom-left.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-top-left:after{top:100%;left:0;margin-left:10px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top-left.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip-top-right:after{top:100%;left:100%;margin-left:-5px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top-right.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip:after{content:\"\";position:absolute;border-style:solid}.wf-tooltip span.within{font-size:80%;display:block;width:100%}.wf-tooltip .small{display:block;font-size:10px}.wf-tooltip .within-box{background:#f1f1f1;border-radius:2px;color:#042e7d!important;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 2px;margin-right:2px}.wf-tooltip-show{pointer-events:none;opacity:1;z-index:2147483001}\n"], dependencies: [{ kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: CreateAssessmentContainerComponent, selector: "app-create-assessment-container", inputs: ["openPortal", "assessmentJSON", "checkpointJSON"], outputs: ["setIsUploaded", "postAssessment"] }, { kind: "component", type: i4.MarxEditorComponent, selector: "vcomply-editor", inputs: ["editorConfig"], outputs: ["comment", "sendSavedFiles", "popup"] }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value", "oneLine"], outputs: ["checkedEvent"] }, { kind: "component", type: CsSwitchComponent, selector: "app-cs-switch", inputs: ["disabled", "ngValue", "value", "tooltipMessage", "position"], outputs: ["ngValueChange"] }, { kind: "component", type: CsSelectComponent$1, selector: "app-cs-select", inputs: ["dataList", "dropdownLabel", "displayProperty", "selectedValue", "isRequired", "dropdownSubLabel", "isArrowIcon", "isStaticData", "placeholder", "stylex", "valueKey", "colorBlock", "colorCode"], outputs: ["selectedData", "selectedValueChange"] }, { kind: "directive", type: ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closePopoverEvent"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$1.NgxMaterialTimepickerComponent, selector: "ngx-material-timepicker", inputs: ["cancelBtnTmpl", "editableHintTmpl", "confirmBtnTmpl", "ESC", "enableKeyboardInput", "preventOverlayClick", "disableAnimation", "appendToInput", "hoursOnly", "defaultTime", "timepickerClass", "theme", "min", "max", "ngxMaterialTimepickerTheme", "format", "minutesGap"], outputs: ["timeSet", "opened", "closed", "hourSelected", "timeChanged"] }, { kind: "directive", type: i5$1.TimepickerDirective, selector: "[ngxTimepicker]", inputs: ["format", "min", "max", "ngxTimepicker", "value", "disabled", "disableClick"] }, { kind: "component", type: LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "component", type: SmileyDialogInlineComponent, selector: "app-smiley-dialog-inline", inputs: ["message", "actionButtons"], outputs: ["action", "closeSmiley"] }, { kind: "directive", type: ClickOutsideDirective$1, selector: "[clickOutside]", outputs: ["clickOutside"] }, { kind: "component", type: UserGroupListComponent, selector: "user-group-list", inputs: ["groupEnabled", "panelTitle", "singleSelect", "selectedReviewer", "featureflag", "reviewerWorkflowType", "mode", "fieldType", "fromResponsibility", "assignorId", "assigneeIds", "reviewerIds", "overseerIds", "FromProgram", "userListInfo", "groupListInfo", "fromApprovalWorkflow", "approvalType", "showFutureUsersSwitch", "futureUsersWillSelect", "isAllDisabled", "isGroupTabShow", "disabledIds", "nonRemovableUserIds", "allUserSelectedDisabled", "nonRemovableGroupIds", "loading", "userlist", "selectedUsers", "defaultSelectedUsers", "userType", "groupList", "selectedGroups"], outputs: ["save", "cancel", "reviewerWorkflowTypeChange", "fetchUserData"] }, { kind: "component", type: ResponsibilityCentersListComponent, selector: "app-responsibility-centers-list", inputs: ["responsibilityCentersList", "selectedResponsibilityCenters", "rcIdKey", "radioSelection", "pluralText", "singularText", "loaded"], outputs: ["saveSelectedList", "closeRcList"] }, { kind: "component", type: GroupUsersListComponent, selector: "app-group-users-list", inputs: ["groupsEnabled", "usersList", "groupsList", "selectedUsers", "userIdKey", "groupIdKey", "openedFrom", "selectedGroups", "assigneeGroupsList", "disabledId", "fromResponsibility", "reviewerIds", "overseerIds", "assignorId", "loader", "isDisabledSelected"], outputs: ["saveSelectedList", "closeUsersList"] }, { kind: "component", type: GrcObjectListComponent, selector: "app-grc-object-list", inputs: ["grcObject", "currentPage", "loader", "tableCard", "selectedTab", "cardLoader", "onEditGRCId", "mode", "selectedGRC"], outputs: ["saveOtherGRC", "closeOtherGRC", "getOtherGRCObjects"] }, { kind: "component", type: FormatAndEvidenceComponent, selector: "app-format-and-evidence", inputs: ["mode", "categories", "organization_id", "orgDetails", "formatEvidanceData"], outputs: ["updateFiles"] }, { kind: "component", type: ProgramListComponent, selector: "app-program-list", inputs: ["items", "selectedItems", "url"], outputs: ["itemSelected", "itemDeselected", "itemsSelectedChange"] }, { kind: "component", type: OwnerListComponent, selector: "app-owner-list", inputs: ["usersList", "selectedUsers", "userIdKey", "itemNameKey", "itemEmailKey", "showWorkflow", "listHeading", "searchPlaceholder", "pluralText", "singularText", "reviewerWorkflowType", "mode", "noDataText", "workflowList", "workflowText", "disabledIds", "nonRemovableUsersList", "fromResponsibility", "assignorId", "assigneeIds", "reviewerIds", "overseerIds"], outputs: ["saveSelectedList", "closeUsersList", "reviewerWorkflowTypeChange"] }, { kind: "component", type: UserRadioListComponent, selector: "app-users-radio-list", inputs: ["usersList", "selectedUsers", "userIdKey", "itemNameKey", "itemEmailKey", "disabledId", "fromResponsibility", "reviewerIds", "overseerIds", "assignorId", "headerText", "loaded"], outputs: ["saveSelectedList", "closeUsersList"] }, { kind: "component", type: CategoryMultiSelectComponent, selector: "app-category-multi-select", inputs: ["categoryList", "allCategories", "categoryIdKey", "selectedCategories"], outputs: ["saveSelectedCategory", "closeList", "closeCategoriesList"] }, { kind: "component", type: CheckpointsComponent, selector: "app-checkpoints", inputs: ["checkpointData", "checkpointInstruction"], outputs: ["closeCheckPoint", "saveCheckPoint"] }, { kind: "component", type: ReviewFrequencyComponent, selector: "app-review-frequency", inputs: ["reviewCompleteDays", "reviewNOtCompletedDays"], outputs: ["closeReviewFrequency", "backToUserList", "saveReviewFrequency"] }, { kind: "component", type: FrequencyContainerComponent, selector: "app-frequency-container", inputs: ["frequencyDetails", "mode", "feature", "pageType", "onCompletionResponsibility"], outputs: ["selectedFrequency", "closeFrequency"] }, { kind: "component", type: FrameworkListComponent, selector: "app-framework-list", inputs: ["previousSelectedValues", "headerText", "workflowPage", "policy", "frameWorkList", "selectedFrameWork", "selectedCategories"], outputs: ["entrustFramework", "closeFramework", "assignControl"] }, { kind: "component", type: RiskClassificationComponent, selector: "app-risk-classification", inputs: ["currentRiskValue"], outputs: ["saveList", "closeList"] }, { kind: "component", type: AuditCategoryListComponent, selector: "app-audit-category-list", inputs: ["selectedData", "selectedIndex", "auditCategory"], outputs: ["closeList", "saveSelectedList"] }, { kind: "component", type: AssessmentListComponent, selector: "app-assessment-list", inputs: ["isEdit", "mode", "selectedAssessment", "selectedAssessmentData", "program_ids", "isFullScreen"], outputs: ["onAssessmentSelect", "cancelAssessment"] }, { kind: "component", type: ListContainerComponent, selector: "app-list-container", inputs: ["heading"], outputs: ["close"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1$1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: RefDisconnectPipe, name: "refDisconnect" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: WorkflowComplianceComponent, selector: "app-workflow-compliance", inputs: { mode: "mode", responsibilityId: "responsibilityId", frameworkDetails: "frameworkDetails", isEntrust: "isEntrust", feature: "feature", assessmentDetails: "assessmentDetails", isDuplicate: "isDuplicate", closeOnEsc: "closeOnEsc", orgDetails: "orgDetails", openedFrom: "openedFrom", selectedRC: "selectedRC", setSelectedProgram: ["selectedProgram", "setSelectedProgram"], responsibilityDetails: "responsibilityDetails" }, outputs: { pickerChanged: "pickerChanged", populateOption: "populateOption", hideElementsFromMoreOptions: "hideElementsFromMoreOptions", closeWorkflow: "closeWorkflow", resetForm: "resetForm", disconnectRefresh: "disconnectRefresh", checkpointCountUpdated: "checkpointCountUpdated", rcSelected: "rcSelected", onRemovingCheckpoint: "onRemovingCheckpoint", isAssessmentDisabled: "isAssessmentDisabled", assigneeTypeChange: "assigneeTypeChange", onReviewerTypeChange: "onReviewerTypeChange" }, viewQueries: [{ propertyName: "whatInput", first: true, predicate: ["what"], descendants: true }, { propertyName: "customItemTemplate", first: true, predicate: ["customItemTemplate"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"workflw-compliance\" *ngIf=\"!showSmiley\">\n  <!-- Behalf -->\n  <div *ngIf=\"mode !== 'EDIT'\" class=\"form-group-row\" [class.active]=\"activeSelector === 'assignors'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'assignors' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"\n        responsibilityForm?.assignors?.list?.length > 0 &&\n        activeSelector !== 'assignors'\n      \">\n      <img [src]=\"ASSETS.im_creating\" alt=\"im\" *ngIf=\"\n          responsibilityForm?.assignors?.list?.length == 0 ||\n          activeSelector === 'assignors'\n        \" />\n\n      <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\" *ngIf=\"\n          responsibilityForm?.assignors?.list?.length > 0 &&\n          activeSelector !== 'assignors'\n        \">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">I am creating this responsibility on behalf of someone else\n          <app-cs-switch [ngValue]=\"responsibilityForm.assignors.enable\" (ngValueChange)=\"\n              responsibilityForm.assignors.enable = $event;\n              responsibilityForm.assignors.list = []\n            \">\n          </app-cs-switch>\n        </label>\n        <div class=\"select\" *ngIf=\"\n            responsibilityForm?.assignors?.list?.length === 0 ||\n            activeSelector === 'assignors'\n          \">\n          <input type=\"text\" (click)=\"activateSelector('assignors', true)\"\n            placeholder=\"Who is responsible for managing this responsibility?\" readonly\n            [disabled]=\"!responsibilityForm?.assignors?.enable\" />\n        </div>\n        <div class=\"selected\" *ngIf=\"\n            responsibilityForm?.assignors?.list?.length > 0 &&\n            activeSelector !== 'assignors'\n          \">\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n            <ng-container *ngFor=\"\n                let b_user of responsibilityForm?.assignors?.list?.slice(0, 1)\n              \">\n              <i (click)=\"remove('assignors', b_user)\"\n                class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"b_user.member_name\" placement=\"bottom-left\"\n                delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ b_user.member_name }}</span>\n            </ng-container>\n            <button *ngIf=\"responsibilityForm?.assignors?.list?.length > 1\"\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 (click)=\"behalf.popover()\" placement=\"right\">\n              +{{ responsibilityForm?.assignors?.list?.slice(1).length }}\n            </button>\n          </div>\n\n          <!-- <div class=\"chip-container\">\n                      <span class=\"chip\" *ngFor=\"let b_user of responsibilityForm?.assignors?.list?.slice(0,2)\"><i\n                              class=\"icons\" (click)=\"remove('assignors',b_user)\">&#xe90d;</i>\n                          {{b_user.member_name}}</span>\n                      <button class=\"count\" *ngIf=\"responsibilityForm?.assignors?.list?.length > 2\" type=\"button\"\n                          appPopover (click)=\"behalf.popover()\" placement=\"right\">+\n                          {{responsibilityForm?.assignors?.list?.slice(2).length}}</button>\n                  </div> -->\n          <button *ngIf=\"activeSelector !== 'assignors'\" class=\"edit\" type=\"button\"\n            (click)=\"activateSelector('assignors', true)\">\n            <i class=\"icons\">&#xe9ba;</i> Edit\n          </button>\n        </div>\n        <app-popover #behalf [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let b_user of responsibilityForm?.assignors?.list | slice : 2;\n                  let j = index\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i class=\"icons\" (click)=\"remove('assignors', b_user)\">&#xe90d;</i>\n                    {{ b_user.member_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n        <p *ngIf=\"invalidType === 'whom'\" [appScrollInView]=\"true\" class=\"error-message\">\n          Please select the person responsible for managing this responsibility.\n        </p>\n      </div>\n    </div>\n  </div>\n\n  <!-- What -->\n  <div class=\"form-group-row\" [class.active]=\"activeSelector === 'framework'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'responsibilityName' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"\n        responsibilityForm?.responsibility?.name.trim() !== '' &&\n        !focus.responsibilityName\n      \">\n      <img [src]=\"ASSETS.what\" alt=\"im\" *ngIf=\"\n          responsibilityForm?.responsibility?.name.trim() === '' ||\n          focus.responsibilityName\n        \" />\n\n      <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\" *ngIf=\"\n          responsibilityForm?.responsibility?.name.trim() !== '' &&\n          !focus.responsibilityName\n        \">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">\n          What? <span class=\"required\">*</span>\n          <button *ngIf=\"\n              isFrameworkAvailable &&\n              mode !== 'EDIT' &&\n              openedFrom !== 'RISK_TREATMENT' &&\n              assessmentDetails?.assessment_type !== 'compliance_audit'\n            \" (click)=\"activateSelector('framework', true)\" class=\"button\">\n            Select From A framework\n          </button>\n        </label>\n        <span *ngIf=\"responsibilityForm?.responsibility?.keyResponsibility\" class=\"indicator\"\n          [appTooltip]=\"'This responsibility is marked as key responsibility.'\" placement=\"bottom\" type=\"black\"\n          delay=\"0\" [tooltipMandatory]=\"true\">\n          <i class=\"icons\">&#xea70;</i>\n        </span>\n        <input *ngIf=\"\n            responsibilityForm?.responsibility?.name.trim() == '' || !isEditWhat\n          \" type=\"text\" [ngModel]=\"responsibilityForm.responsibility.name\" placeholder=\"What is the responsibility?\"\n          (change)=\"whatChanged($event)\" (focusin)=\"activateSelector('responsibilityName', true)\"\n          (focusout)=\"activeDeselector()\" (clickOutside)=\"testFunction()\" #what />\n        <div class=\"selected\" *ngIf=\"\n            responsibilityForm?.responsibility?.name.trim() != '' && isEditWhat\n          \">\n          <div class=\"chip-container\">\n            <span class=\"value\">{{\n              responsibilityForm.responsibility?.name\n              }}</span>\n          </div>\n          <button *ngIf=\"assessmentDetails?.assessment_type !== 'compliance_audit'\" class=\"edit\" type=\"button\"\n            (click)=\"onEditWhat($event)\">\n            <i class=\"icons\">&#xe9ba;</i> Edit\n          </button>\n        </div>\n        <p *ngIf=\"invalidType === 'what'\" [appScrollInView]=\"true\" class=\"error-message\">\n          Please enter a name for this responsibility.\n        </p>\n        <div class=\"switch-row align-right\">\n          <app-cs-switch [ngValue]=\"responsibilityForm.responsibility?.keyResponsibility\" (ngValueChange)=\"\n              responsibilityForm.responsibility.keyResponsibility = $event\n            \">Key Responsibility\n          </app-cs-switch>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Who -->\n  <div class=\"form-group-row\" [class.active]=\"activeSelector === 'assignees'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'assignees' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"\n        responsibilityForm?.assignees?.list?.length > 0 &&\n        activeSelector !== 'assignees'\n      \">\n      <img [src]=\"ASSETS.case_assignees\" alt=\"im\" *ngIf=\"\n          responsibilityForm?.assignees?.list?.length == 0 ||\n          activeSelector === 'assignees'\n        \" />\n\n      <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\" *ngIf=\"\n          responsibilityForm?.assignees?.list?.length > 0 &&\n          activeSelector !== 'assignees'\n        \">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <div class=\"edit-due-date\">\n          <label class=\"vx-control-panel\">Who? <span class=\"required\">*</span></label>\n          <div *ngIf=\"allowEditDueDateFeatureFlag && false\" class=\"switch-row align-right\">\n            <app-cs-switch [ngValue]=\"responsibilityForm.allowEditDueDate\"\n              (ngValueChange)=\"responsibilityForm.allowEditDueDate = $event\">ALLOW ASSIGNEE TO EDIT COMPLETED WORK<i\n                class=\"icons\" [appTooltip]=\"\n                  'If it\u2019s enabled, the assignee will have the option to modify a previously completed due date.'\n                \" placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i>\n            </app-cs-switch>\n          </div>\n        </div>\n        <div class=\"select vx-mt-0\" *ngIf=\"\n            responsibilityForm?.assignees?.list?.length == 0 &&\n            (!featureFlag_groups ||\n              (responsibilityForm?.assigneeGroups?.list?.length == 0 &&\n                featureFlag_groups))\n          \">\n          <input type=\"text\" (click)=\"activateSelector('assignees', true)\"\n            placeholder=\"Who is responsible for completing the responsibility?\" readonly />\n        </div>\n\n        <div class=\"selected\" *ngIf=\"\n            (responsibilityForm?.assignees?.list?.length > 0 &&\n              !featureFlag_groups) ||\n            ((responsibilityForm?.assignees?.list?.length > 0 ||\n              responsibilityForm?.assigneeGroups?.list?.length > 0) &&\n              featureFlag_groups)\n          \">\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"!featureFlag_groups\">\n            <ng-container *ngFor=\"\n                let e_user of responsibilityForm?.assignees?.list?.slice(0, 1)\n              \">\n              <i (click)=\"remove('assignees', e_user)\"\n                class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"e_user.member_name\" placement=\"bottom-left\"\n                delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ e_user.member_name }}</span>\n            </ng-container>\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 greenbg\"\n              appPopover (click)=\"assignees.popover()\" placement=\"right\"\n              *ngIf=\"responsibilityForm?.assignees?.list?.length > 1\">\n              +{{ responsibilityForm?.assignees?.list?.slice(1).length }}\n            </button>\n          </div>\n\n          <div class=\"vx-d-flex vx-align-center\" *ngIf=\"featureFlag_groups\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n              *ngIf=\"responsibilityForm?.assignees?.list?.length > 0\">\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"\n                  remove('assignees', responsibilityForm?.assignees?.list[0])\n                \">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"\n                  responsibilityForm?.assignees?.list[0]?.employee_name\n                \" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\">{{\n                responsibilityForm?.assignees?.list[0]?.employee_name\n                }}</span>\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 greenBg\"\n                appPopover (click)=\"user.popover()\" placement=\"left\"\n                *ngIf=\"responsibilityForm?.assignees?.list?.length > 1\">\n                +{{ responsibilityForm?.assignees?.list?.length - 1 }}\n              </button>\n            </div>\n            <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"\n                responsibilityForm?.assignees?.list?.length > 0 &&\n                responsibilityForm?.assigneeGroups?.list?.length > 0\n              \">&</span>\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n              *ngIf=\"responsibilityForm?.assigneeGroups?.list?.length\">\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"\n                  remove(\n                    'groupassignees',\n                    responsibilityForm?.assigneeGroups?.list[0]\n                  )\n                \">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"\n                  responsibilityForm?.assigneeGroups?.list[0]?.group_name\n                \" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\">{{\n                responsibilityForm?.assigneeGroups?.list[0]?.group_name\n                }}</span>\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 (click)=\"group.popover()\" placement=\"right\"\n                *ngIf=\"responsibilityForm?.assigneeGroups?.list?.length > 1\">\n                +{{ responsibilityForm?.assigneeGroups?.list?.length - 1 }}\n              </button>\n            </div>\n          </div>\n\n          <!-- <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.assignees?.length>1\" [class.plus]=\"responsibilityForm?.assignees?.length>2\" *ngIf=\"!featureFlag_groups\">\n                      <span class=\"chip\" *ngFor=\"let e_user of responsibilityForm?.assignees?.list?.slice(0,2)\"><i\n                              class=\"icons\" (click)=\"remove('assignees',e_user)\">&#xe90d;</i>\n                          {{e_user.member_name}}</span>\n                      <button class=\"count\" *ngIf=\"responsibilityForm?.assignees?.list?.length > 2\" type=\"button\"\n                          appPopover (click)=\"assignees.popover()\" placement=\"right\">+\n                          {{responsibilityForm?.assignees?.list?.slice(2).length}}</button>\n                  </div> -->\n          <!-- <div class=\"chip-container\" *ngIf=\"featureFlag_groups\">\n                      <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.assignees?.list?.length > 0\" >\n                          <i class=\"icons cross vx-mr-1\" (click)=\"remove('assignees',responsibilityForm?.assignees?.list[0])\" >&#xe90d;</i>\n                          <span class=\"chip\" [appTooltip]=\"responsibilityForm?.assignees?.list[0]?.employee_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\">{{responsibilityForm?.assignees?.list[0]?.employee_name}}</span></span>\n                          <button *ngIf=\"responsibilityForm?.assignees?.list?.length > 1\" class=\"count user\" appPopover (click)=\"user.popover()\" placement=\"left\"> +{{responsibilityForm?.assignees?.list?.length -1}}</button>\n                      </div>\n                      <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"  *ngIf=\"responsibilityForm?.assignees?.list?.length > 0 && responsibilityForm?.assigneeGroups?.list?.length > 0\" >&</span>\n                      <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.assigneeGroups?.list?.length\" >\n                          <i *ngIf=\"(!allGroupAssignee || mode !== 'EDIT')\" class=\"icons cross vx-mr-1\" (click)=\"remove('groupassignees',responsibilityForm?.assigneeGroups?.list[0])\" >&#xe90d;</i>\n                          <span class=\"chip\" [appTooltip]=\"responsibilityForm?.assigneeGroups?.list[0]?.group_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\">{{responsibilityForm?.assigneeGroups?.list[0]?.group_name}}</span></span>\n                          <button *ngIf=\"responsibilityForm?.assigneeGroups?.list?.length > 1\" class=\"count\" appPopover (click)=\"group.popover()\" placement=\"right\">+{{responsibilityForm?.assigneeGroups?.list?.length - 1}}</button>\n                      </div>\n                  </div> -->\n          <button *ngIf=\"activeSelector !== 'assignees'\" class=\"edit\" type=\"button\"\n            (click)=\"activateSelector('assignees', true)\">\n            <i class=\"icons\">&#xe9ba;</i> Edit\n          </button>\n        </div>\n        <app-popover #user [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let e_user of responsibilityForm?.assignees?.list | slice : 1\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i class=\"icons\" (click)=\"remove('assignees', e_user)\">&#xe90d;</i>\n                    {{ e_user.member_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n        <app-popover #group [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let group of responsibilityForm?.assigneeGroups?.list\n                    | slice : 1\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i *ngIf=\"\n                        !featureFlag_groups ||\n                        (featureFlag_groups &&\n                          (!allGroupAssignee || mode !== 'EDIT'))\n                      \" class=\"icons\" (click)=\"remove('groupassignees', group)\">&#xe90d;</i>\n                    {{ group.group_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n\n        <p *ngIf=\"invalidType === 'who'\" [appScrollInView]=\"true\" class=\"error-message\">\n          Please select the person responsible for completing this\n          responsibility.\n        </p>\n        <ng-container *ngIf=\"!isGroupAssigned\">\n\n          <app-cs-radio *ngIf=\"mode !== 'EDIT'\" (checkedEvent)=\"\n              responsibilityForm.assignees.whoCanComplete = 'ANY_ONE'\n            \" [checked]=\"responsibilityForm.assignees.whoCanComplete == 'ANY_ONE'\" [name]=\"'what'\">ANY SELECTED PERSON\n            CAN COMPLETE THIS\n            <i class=\"icons\" [appTooltip]=\"\n                'If selected, only one responsibility will be created.'\n              \" placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i>\n          </app-cs-radio>\n\n          <app-cs-radio *ngIf=\"mode !== 'EDIT'\" (checkedEvent)=\"responsibilityForm.assignees.whoCanComplete = 'ALL'\"\n            [checked]=\"responsibilityForm.assignees.whoCanComplete == 'ALL'\" [name]=\"'what'\">ALL SELECTED PERSONS NEED\n            TO COMPLETE THIS<i class=\"icons\" [appTooltip]=\"\n              'If selected, separate responsibilities will be created for each person.'\n            \" placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i>\n          </app-cs-radio>\n\n          <div class=\"switch-row align-right\" *ngIf=\"\n              mode == 'EDIT' &&\n              (!featureFlag_groups ||\n                (responsibilityForm?.assigneeGroups?.list.length === 0 &&\n                  featureFlag_groups))\n            \">\n            <app-cs-switch (ngValueChange)=\"openAssigneeChangeConfirmation($event)\" [ngValue]=\"\n                responsibilityForm.assignees.whoCanComplete == 'ANY_ONE'\n              \">\n              ANY SELECTED PERSON CAN COMPLETE THIS\n            </app-cs-switch>\n          </div>\n        </ng-container>\n        <app-popover #assignees [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let e_user of responsibilityForm?.assignees?.list | slice : 1;\n                  let j = index\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i class=\"icons\" (click)=\"remove('assignees', e_user)\">&#xe90d;</i>\n                    {{ e_user.member_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n      </div>\n    </div>\n  </div>\n\n  <!-- When? -->\n  <div class=\"form-group-row\" [class.active]=\"activeSelector === 'frequency'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'frequency' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"\n        !responsibilityForm?.frequency || activeSelector === 'frequency'\n      \">\n      <img [src]=\"ASSETS.when\" alt=\"im\" *ngIf=\"!responsibilityForm?.frequency || activeSelector === 'frequency'\" />\n\n      <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\" *ngIf=\"\n          responsibilityForm?.frequency &&\n          activeSelector !== 'frequency' &&\n          responsibilityForm?.frequency != '' &&\n          responsibilityForm?.frequency != '5~0~0~0'\n        \">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">When? <span class=\"required\">*</span></label>\n        <div *ngIf=\"\n            responsibilityForm?.frequency == '' ||\n            responsibilityForm?.frequency == '5~0~0~0'\n          \" class=\"select button-sec\">\n          <input type=\"text\" (click)=\"activateSelector('frequency', true)\" [placeholder]=\"frequencyPlaceholder\"\n            readonly />\n          <button (click)=\"activateSelector('frequency', true)\" type=\"button\">\n            Set A frequency\n          </button>\n        </div>\n        <div *ngIf=\"\n            responsibilityForm?.frequency != '' &&\n            responsibilityForm?.frequency !== '5~0~0~0'\n          \" class=\"selected button-sec\">\n          <span class=\"chip\" [appTooltip]=\"frequencyPlaceholder\" placement=\"bottom-left\" delay=\"0\" type=\"black\"\n            [tooltipMandatory]=\"false\">{{ frequencyPlaceholder }}</span>\n          <button *ngIf=\"activeSelector !== 'frequency'\" type=\"button\" class=\"edit\"\n            (click)=\"activateSelector('frequency', true)\">\n            <i class=\"icons\">&#xe9ba;</i>Edit\n          </button>\n        </div>\n        <p *ngIf=\"invalidType === 'when'\" [appScrollInView]=\"true\" class=\"error-message\">\n          Please select the frequency of occurrence for this responsibility.\n        </p>\n      </div>\n    </div>\n  </div>\n\n  <!-- Notes -->\n  <div class=\"form-group-row\" [class.active]=\"activeSelector === 'notes'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'notes' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"\n        checkBlank(responsibilityForm?.description).trim() !== '' &&\n        !focus.description\n      \">\n      <img [src]=\"ASSETS.notes\" alt=\"im\" *ngIf=\"\n          checkBlank(responsibilityForm?.description).trim() === '' ||\n          focus.description\n        \" />\n\n      <svg class=\"checkIcon\" *ngIf=\"\n          checkBlank(responsibilityForm?.description).trim() !== '' &&\n          !focus.description\n        \" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">Notes</label>\n        <vcomply-editor [(ngModel)]=\"responsibilityForm.description\" [editorConfig]=\"{\n            mode: 'prime',\n            colorPalette: true,\n            link: true,\n            id: 'notes',\n            placeholder:\n              'Add more information about completing the responsibility'\n          }\"></vcomply-editor>\n      </div>\n    </div>\n  </div>\n\n  <!-- Objective -->\n  <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.OBJECTIVE\" [attr.id]=\"'OBJECTIVE'\"\n    [class.active]=\"activeSelector === 'objective'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'objective' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"\n        checkBlank(responsibilityForm?.objective).trim() !== '' &&\n        !focus.objective\n      \">\n      <img [src]=\"ASSETS.objectives\" alt=\"im\" *ngIf=\"\n          checkBlank(responsibilityForm?.objective).trim() === '' ||\n          focus.objective\n        \" />\n\n      <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\" *ngIf=\"\n          checkBlank(responsibilityForm?.objective).trim() !== '' &&\n          !focus.objective\n        \">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">Objective</label>\n        <vcomply-editor [(ngModel)]=\"responsibilityForm.objective\" [editorConfig]=\"{\n            mode: 'prime',\n            colorPalette: true,\n            id: 'objective',\n            link: true,\n            placeholder:\n              'This option lets you specify an objective for the responsibility.'\n          }\"></vcomply-editor>\n      </div>\n    </div>\n  </div>\n\n  <!-- Responsibility Center -->\n  <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.RC\" [attr.id]=\"'RC'\"\n    [class.active]=\"activeSelector === 'rc'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'rc' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"\n        responsibilityForm?.rc?.length > 0 && activeSelector !== 'rc'\n      \">\n      <img [src]=\"ASSETS.responsibility_center\" alt=\"\"\n        *ngIf=\"responsibilityForm?.rc?.length == 0 || activeSelector === 'rc'\" />\n\n      <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\n        *ngIf=\"responsibilityForm?.rc?.length > 0 && activeSelector !== 'rc'\">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">Responsibility Center </label>\n\n        <div class=\"select\" *ngIf=\"responsibilityForm?.rc?.length === 0\">\n          <div class=\"custom-input\" (click)=\"activateSelector('rc', true)\"\n            aria-placeholder=\"Select the responsibility center or the responsibility centers for this responsibility.\">\n          </div>\n          <!-- <input type=\"text\" (click)=\"activateSelector('rc',true)\" placeholder=\"Select Responsibility Center(s)\" readonly> -->\n        </div>\n\n        <div class=\"selected\" *ngIf=\"responsibilityForm?.rc?.length > 0\"\n          [class.readOnly]=\"openedFrom === 'RISK_TREATMENT'\">\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n            *ngFor=\"let rc of responsibilityForm?.rc?.slice(0, 1)\">\n            <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"remove('rc', rc)\"\n              *ngIf=\"openedFrom !== 'RISK_TREATMENT'\">&#xe9ae;</i>\n            <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"rc?.item_name\" placement=\"bottom-left\" delay=\"0\"\n              type=\"black\" [tooltipMandatory]=\"false\">{{ rc?.item_name }}</span>\n            <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n              *ngIf=\"responsibilityForm?.rc?.length > 1\" appPopover (click)=\"rcPopover.popover()\" placement=\"left\">\n              +{{ responsibilityForm?.rc?.slice(1).length }}\n            </button>\n          </div>\n\n          <!-- <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.rc?.length>1\" [class.plus]=\"responsibilityForm?.rc?.length>2\">\n                      <span class=\"chip\" *ngFor=\"let rc of responsibilityForm?.rc?.slice(0,2)\"><i class=\"icons\" (click)=\"remove('rc',rc)\" *ngIf=\"openedFrom !== 'RISK_TREATMENT'\">&#xe90d;</i>{{rc?.item_name}}</span>\n                      <button class=\"count\" *ngIf=\"responsibilityForm?.rc?.length > 2\" type=\"button\" appPopover (click)=\"rc.popover()\" placement=\"right\" placement=\"right\">+{{responsibilityForm?.rc?.slice(2).length}}</button>\n                  </div> -->\n\n          <button *ngIf=\"activeSelector !== 'rc' && openedFrom !== 'RISK_TREATMENT'\" class=\"edit\" type=\"button\"\n            (click)=\"activateSelector('rc', true)\">\n            <i class=\"icons\">&#xe9ba;</i> Edit\n          </button>\n        </div>\n        <app-popover #rcPopover [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let rc of responsibilityForm?.rc | slice : 1;\n                  let j = index\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i class=\"icons\" (click)=\"remove('rc', rc)\">&#xe90d;</i>\n                    {{ rc.item_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n\n        <ng-container *ngIf=\"\n            isResponsibilityRcLinkEnabled &&\n            (mode != 'EDIT' || responsibilityForm?.rc?.length <= 1)\n          \">\n          <!-- <app-cs-radio><div [appTooltip]=\"'Create separate responsibilities for each responsibility center'\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"true\">CREATE SEPARATE RESPONSIBILITIES FOR EACH RESPONSIBILITY CEN\u2026</div><i class=\"icons\" [appTooltip]=\"'If selected, separate responsibilities will be created for each Responsibility Center.'\" placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i></app-cs-radio> -->\n          <app-cs-radio [class.disabled]=\"\n          mode == 'EDIT' &&\n          responsibilityForm.responsibilityCenterType === 1 &&\n          responsibilityForm?.rc?.length > 1\n        \" [checked]=\"responsibilityCenterType === 1\" [name]=\"'ff_responsibility_rc_link'\"\n            (checkedEvent)=\"onRcTypeChange(1)\">DISPLAY THE SAME RESPONSIBILITY IN ALL RESPONSIBILITY CENTERS<i\n              class=\"icons\" [appTooltip]=\"\n            'If selected, the same responsibility will be linked to each Responsibility Center.'\n          \" placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i></app-cs-radio>\n          <app-cs-radio [class.disabled]=\"\n              mode == 'EDIT' &&\n              responsibilityForm.responsibilityCenterType === 1 &&\n              responsibilityForm?.rc?.length > 1\n            \" [checked]=\"responsibilityCenterType === 0\" [name]=\"'ff_responsibility_rc_link'\"\n            (checkedEvent)=\"onRcTypeChange(0)\">\n            <div class=\"rc-radio-text\" [appTooltip]=\"\n                'Create separate responsibilities for each responsibility centers'\n              \" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"true\">\n              CREATE SEPARATE RESPONSIBILITIES FOR EACH RESPONSIBILITY CEN\u2026\n            </div>\n            <i class=\"icons\" [appTooltip]=\"\n                'If selected, separate responsibilities will be created for each Responsibility Center.'\n              \" placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i>\n          </app-cs-radio>\n\n        </ng-container>\n      </div>\n    </div>\n  </div>\n\n  <!-- Program -->\n  <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.PROGRAM\" [attr.id]=\"'PROGRAM'\"\n    [class.active]=\"activeSelector === 'program'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'program' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"\n        responsibilityForm?.program?.length > 0 && activeSelector !== 'program'\n      \">\n      <img [src]=\"ASSETS.case_category\" alt=\"\" *ngIf=\"\n          (responsibilityForm?.program?.length == 0 ||\n            activeSelector === 'program') &&\n          allProgamSelected?.length == 0\n        \" />\n\n      <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\" *ngIf=\"\n          (responsibilityForm?.program?.length > 0 &&\n            activeSelector !== 'program') ||\n          allProgamSelected?.length > 0\n        \">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">Program</label>\n        <div class=\"select\" *ngIf=\"allProgamSelected?.length == 0\">\n          <div class=\"custom-input\" (click)=\"activateSelector('program', true)\"\n            aria-placeholder=\"Select the Program or Program Categories that this responsibility relates to.\"></div>\n          <!-- <input type=\"text\" (click)=\"activateSelector('program',true)\" placeholder=\"Select Responsibility program(s)\" readonly> -->\n        </div>\n        <div class=\"selected\" *ngIf=\"allProgamSelected?.length > 0\">\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n            <ng-container>\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" *ngIf=\"\n                  !hiddenList?.includes('PROGRAM') &&\n                  !program?.isViewOnlyProgram\n                \" (click)=\"remove('program', allProgamSelected[0])\">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"allProgamSelected[0]?.name ?? '--'\"\n                placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ allProgamSelected[0]?.name\n                ?? \"--\" }}</span>\n            </ng-container>\n            <button 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 (click)=\"program.popover()\" placement=\"right\" *ngIf=\"allProgamSelected?.length > 1\">\n              +{{ allProgamSelected?.length - 1 }}\n            </button>\n          </div>\n\n          <!-- <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.program?.length>1\" [class.plus]=\"responsibilityForm?.program?.length>2\">\n                              <span class=\"chip\" *ngFor=\"let program of responsibilityForm?.program\"><i class=\"icons\" *ngIf=\"feature.isFeatureEnabled('ff_deprecate_primary_program_flag')\" (click)=\"remove('program',program)\">&#xe90d;</i> {{program?.name??'--'}}</span>\n                              <!- - <button *ngIf=\"responsibilityForm?.program?.length > 2\" class=\"count\" type=\"button\" appPopover (click)=\"program.popover()\" placement=\"right\">+ {{responsibilityForm?.program?.slice(2).length}}</button> - ->\n                              <button *ngIf=\"responsibilityForm?.linkedProgram?.length > 1\" class=\"count\" type=\"button\" appPopover (click)=\"program.popover()\" placement=\"right\">+ {{responsibilityForm?.linkedProgram?.length - 1}}</button>\n                          </div> -->\n\n          <button *ngIf=\"\n              activeSelector !== 'program' && !hiddenList.includes('PROGRAM')\n            \" class=\"edit\" type=\"button\" (click)=\"activateSelector('program', true)\">\n            <i class=\"icons\">&#xe9ba;</i> Edit\n          </button>\n        </div>\n\n        <app-popover #program [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let program of allProgamSelected | slice : 1;\n                  let j = index\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\" [appTooltip]=\"program?.name\" placement=\"bottom\" type=\"black\" delay=\"0\"\n                    [tooltipMandatory]=\"false\">\n                    <i *ngIf=\"\n                        !hiddenList?.includes('PROGRAM') &&\n                        !program?.isViewOnlyProgram\n                      \" class=\"icons\" (click)=\"remove('program', program)\">&#xe90d;</i>\n                    {{ program?.name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n        <div *ngIf=\"responsibilityForm?.customTags?.length > 0\">\n          <ng-container *ngFor=\"let tag of responsibilityForm?.customTags\">\n            <ng-container *ngIf=\"tag?.name?.trim()\">\n              <label class=\"vx-control-panel vx-mt-2\">{{\n                tag?.name\n                }}</label>\n              <input type=\"text\" [(ngModel)]=\"tag.value\" placeholder=\"{{ tag?.name }}\" />\n            </ng-container>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Format & Evidence -->\n  <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.FORMATE_EVIDENCE\"\n    [attr.id]=\"'FORMATE_EVIDENCE'\" [class.active]=\"activeSelector === 'formate_evidence'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'formate_evidence' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"false\">\n      <img *ngIf=\"\n          this.responsibilityForm.formatAndEvidence.evidenceRequired == false &&\n          this.responsibilityForm.formatAndEvidence.formatFiles.length == 0 &&\n          this.responsibilityForm.formatAndEvidence.formatLinks?.length == 0\n        \" [src]=\"ASSETS.format_evidence\" alt=\"im\" />\n\n      <svg *ngIf=\"\n          this.responsibilityForm.formatAndEvidence.evidenceRequired ||\n          this.responsibilityForm.formatAndEvidence.formatFiles.length ||\n          this.responsibilityForm.formatAndEvidence.formatLinks?.length\n        \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <app-format-and-evidence (updateFiles)=\"saveSelectedList('formate_evidence', $event)\" [mode]=\"'responsibility'\"\n        [formatEvidanceData]=\"responsibilityForm?.formatAndEvidence\" [organization_id]=\"organizationId\"\n        [orgDetails]=\"orgDetails\">\n      </app-format-and-evidence>\n    </div>\n  </div>\n\n  <!-- Assessment -->\n  <div *ngIf=\"moreOptions?.ASSESSMENT\" [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\"\n    [attr.id]=\"'ASSESSMENT'\" [class.active]=\"activeSelector === 'isAssessment'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'isAssessment' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"responsibilityForm.assessment?.assessment_id\">\n      <img *ngIf=\"!responsibilityForm.assessment?.assessment_id\" [src]=\"ASSETS.assessments\" alt=\"im\" />\n\n      <svg *ngIf=\"responsibilityForm.assessment?.assessment_id\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 52 52\">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">ASSESSMENTS</label>\n        <div *ngIf=\"!responsibilityForm.assessment?.assessment_id\" class=\"select\">\n          <input type=\"text\" (click)=\"\n              activateSelector('isAssessment', true); isAssessment = true\n            \" placeholder=\"Select an assessment for this responsibility\"\n            [disabled]=\"responsibilityForm.checkpoints?.length\" readonly />\n        </div>\n        <div class=\"selected\" *ngIf=\"responsibilityForm.assessment?.assessment_id\">\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n            <i *ngIf=\"assessmentDetails?.assessment_type !== 'compliance_audit'\"\n              class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n              (click)=\"remove('assessment', category)\">&#xe9ae;</i>\n            <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"\n                responsibilityForm.assessment?.assessmentDetails\n                  ?.assessment_name\n              \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n              responsibilityForm.assessment?.assessmentDetails\n              ?.assessment_name\n              }}</span>\n            <div class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-ml-1 vx-text-center\">\n              {{ responsibilityForm.assessment?.assessmentDetails?.questions }}\n              {{\n              responsibilityForm.assessment?.assessmentDetails?.questions > 1\n              ? \"Questions\"\n              : \"Question\"\n              }}\n            </div>\n          </div>\n\n          <button *ngIf=\"assessmentDetails?.assessment_type !== 'compliance_audit'\" (click)=\"\n              activateSelector('isAssessment', true); isAssessment = true\n            \" class=\"edit\" type=\"button\">\n            <i class=\"icons\">&#xe9ba;</i> Edit\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Checkpoints -->\n  <!-- *ngIf=\"moreOptions.checkpoints\" -->\n  <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.CHECKPOINTS\"\n    [attr.id]=\"'CHECKPOINTS'\" [class.active]=\"activeSelector === 'checkpoints'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'checkpoints' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\">\n      <img [src]=\"ASSETS.checkpoints\" alt=\"im\" *ngIf=\"\n          responsibilityForm?.checkpoints?.length == 0 ||\n          activeSelector === 'checkpoints'\n        \" />\n\n      <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\" *ngIf=\"\n          responsibilityForm?.checkpoints?.length > 0 &&\n          activeSelector !== 'checkpoints'\n        \">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">\n          <!-- {{responsibilityForm.checkpoints|json}}\n                {{responsibilityForm.checkpointInstruction}} -->\n\n          Checkpoints\n          <!-- <button *ngIf=\"responsibilityForm?.checkpoints?.length === 0\" class=\"button\"\n                      (click)=\"activateSelector('checkpoints',true)\">+ Add Checkpoints</button> -->\n        </label>\n        <div class=\"select button-sec\" *ngIf=\"responsibilityForm?.checkpoints?.length === 0\">\n          <input [disabled]=\"!responsibilityForm.checkpoints?.length\" type=\"text\"\n            (click)=\"activateSelector('checkpoints', true)\" placeholder=\"Add checkpoints for this responsibility\"\n            readonly />\n          <button [disabled]=\"!responsibilityForm.checkpoints?.length\" (click)=\"activateSelector('checkpoints', true)\"\n            type=\"button\">\n            Add Checkpoints\n          </button>\n        </div>\n        <div class=\"selected\" *ngIf=\"responsibilityForm.checkpoints?.length > 0\">\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n            <ng-container *ngFor=\"\n                let checkpoint of responsibilityForm.checkpoints?.slice(0, 1)\n              \">\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"checkpoint?.label\" placement=\"bottom-left\"\n                delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ checkpoint?.label }}</span>\n            </ng-container>\n            <button 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 (click)=\"checkpoint.popover()\" placement=\"right\"\n              *ngIf=\"responsibilityForm.checkpoints?.length > 1\">\n              +{{ responsibilityForm.checkpoints?.length - 1 }}\n            </button>\n          </div>\n\n          <!-- <div class=\"chip-container checkpoints\" [class.more-one]=\"responsibilityForm.checkpoints?.length>1\" [class.plus]=\"responsibilityForm.checkpoints?.length>2\">\n                      <span class=\"chip\" *ngFor=\"let checkpoint of responsibilityForm.checkpoints?.slice(0,1)\">{{checkpoint?.label}}</span>\n                      <button class=\"count\" *ngIf=\"responsibilityForm.checkpoints?.length > 1\" type=\"button\" appPopover (click)=\"checkpoint.popover()\" placement=\"right\">+{{responsibilityForm.checkpoints?.length- 1}}</button>\n                  </div> -->\n\n          <button *ngIf=\"activeSelector !== 'checkpoints'\" class=\"edit\" type=\"button\"\n            (click)=\"activateSelector('checkpoints', true)\">\n            <i class=\"icons\">&#xe9ba;</i> Edit\n          </button>\n        </div>\n      </div>\n      <div *ngIf=\"this.responsibilityForm.checkpoints?.length\" class=\"assessment-text\">\n        <i class=\"icons alert-icon\">&#xe930;</i>\n        <span>You can now use the new <strong>Checkpoints </strong>or\n          <strong>Assessments</strong> feature instead of the old checkpoints\n          functionality to create analytical questions.\n          <button class=\"remove-btn\" (click)=\"onRemoveCheckpoints('checkpoint')\">\n            Remove Checkpoints\n          </button>\n          to continue.</span>\n      </div>\n      <app-popover #checkpoint [dontCloseonClick]=\"true\">\n        <div class=\"wf-action-list\">\n          <ul class=\"action-item\">\n            <li *ngFor=\"\n                let checkpoint of responsibilityForm.checkpoints | slice : 1;\n                let j = index\n              \">\n              <div class=\"avatar-card\">\n                <span class=\"value\">\n                  {{ checkpoint?.label }}\n                </span>\n              </div>\n            </li>\n          </ul>\n        </div>\n      </app-popover>\n    </div>\n  </div>\n\n  <!-- New  Checkpoints -->\n  <!-- *ngIf=\"moreOptions.checkpoints\" -->\n  <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.CHECKPOINTS_NEW\"\n    [attr.id]=\"'CHECKPOINTS-NEW'\" [class.active]=\"activeSelector === 'checkpoints-new'\">\n    <div class=\"left\">\n      <img [src]=\"ASSETS.checkpoints\" alt=\"im\" *ngIf=\"\n          responsibilityForm?.checkpoints?.length == 0 ||\n          activeSelector === 'checkpoints'\n        \" />\n\n      <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\n        *ngIf=\"checkpointCount > 0 && activeSelector !== 'checkpoints'\">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">\n          <!-- {{responsibilityForm.checkpoints|json}}\n                {{responsibilityForm.checkpointInstruction}} -->\n\n          Checkpoints\n          <!-- <span class=\"checkpoint-version\"> V2.0</span> -->\n          <!-- <button  class=\"button\"\n                      (click)=\"activateSelector('checkpoints-new',true)\">+ Add Checkpoints</button> -->\n        </label>\n        <div class=\"select button-sec\" *ngIf=\"checkpointCount === 0\">\n          <input type=\"text\" (click)=\"activateSelector('checkpoints-new', true)\"\n            placeholder=\"Add checkpoints for this responsibility\" readonly />\n          <button (click)=\"activateSelector('checkpoints-new', true)\" type=\"button\">\n            Add Checkpoints\n          </button>\n        </div>\n        <div class=\"selected\" *ngIf=\"checkpointCount > 0\">\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n            <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n              (click)=\"onRemoveCheckpoints('new-checkpoints')\">&#xe9ae;</i>\n            <span class=\"chipName vx-fs-11 vx-label-txt\">{{ checkpointCount }}\n              {{ checkpointCount > 1 ? \"Questions\" : \"Question\" }}</span>\n          </div>\n\n          <!-- <div class=\"chip-container checkpoints\" [class.more-one]=\"checkpointCount > 0\">\n                      <span class=\"chip\">\n                          <i class=\"icons\" (click)=\"onRemoveCheckpoints('new-checkpoints')\">&#xe90d;</i>\n                          {{checkpointCount}} {{checkpointCount > 1 ? 'Questions': 'Question'}}</span>\n                  </div> -->\n\n          <button *ngIf=\"activeSelector !== 'checkpoints-new'\" class=\"edit\" type=\"button\"\n            (click)=\"activateSelector('checkpoints-new', true)\">\n            <i class=\"icons\">&#xe9ba;</i> Edit\n          </button>\n        </div>\n      </div>\n      <app-popover #checkpoint [dontCloseonClick]=\"true\">\n        <div class=\"wf-action-list\">\n          <ul class=\"action-item\">\n            <li *ngFor=\"\n                let checkpoint of responsibilityForm.checkpoints | slice : 1;\n                let j = index\n              \">\n              <div class=\"avatar-card\">\n                <span class=\"value\">\n                  {{ checkpoint?.label }}\n                </span>\n              </div>\n            </li>\n          </ul>\n        </div>\n      </app-popover>\n    </div>\n  </div>\n\n  <!-- Risk Classification -->\n  <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.RISK_CLASSIFICATION\"\n    [attr.id]=\"'RISK_CLASSIFICATION'\" [class.active]=\"activeSelector === 'riskCalculator'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'riskCalculator' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"responsibilityForm?.riskClass\">\n      <svg *ngIf=\"responsibilityForm?.riskClass\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 52 52\">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">\n          Risk Classification\n          <button (click)=\"activateSelector('riskCalculator', true)\" class=\"button\">\n            + Risk Calculator\n          </button>\n        </label>\n\n        <div class=\"classification\">\n          <label class=\"low\" *ngFor=\"let risk of riskClassification\" [ngClass]=\"[risk.class]\">\n            <input type=\"radio\" name=\"classification\" [(ngModel)]=\"responsibilityForm.riskClass\"\n              [value]=\"risk?.value\" />\n            <span>{{ risk?.name }}</span>\n          </label>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Reviewer -->\n  <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.REVIEWER\" [attr.id]=\"'REVIEWER'\"\n    [class.active]=\"\n      activeSelector === 'reviewerFrequency' || activeSelector === 'reviewer'\n    \" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'reviewer' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"false\">\n      <img [src]=\"ASSETS.reviewer\" alt=\"\" *ngIf=\"\n          responsibilityForm?.reviewers?.list?.length == 0 ||\n          activeSelector === 'reviewer'\n        \" />\n\n      <svg *ngIf=\"\n          responsibilityForm?.reviewers?.list?.length > 0 &&\n          activeSelector !== 'reviewer'\n        \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">Reviewer</label>\n        <div class=\"select\" *ngIf=\"\n            (responsibilityForm?.reviewers?.list?.length == 0 &&\n              !featureFlag_groups) ||\n            (responsibilityForm?.reviewers?.list?.length == 0 &&\n              responsibilityForm?.groupReviewers?.list?.length == 0 &&\n              featureFlag_groups)\n          \">\n          <input type=\"text\" (click)=\"activateSelector('reviewer', true)\" placeholder=\"Select Reviewer\" readonly />\n        </div>\n        <div class=\"selected\" *ngIf=\"\n            (responsibilityForm?.reviewers?.list?.length > 0 &&\n              !featureFlag_groups) ||\n            ((responsibilityForm?.reviewers?.list?.length > 0 ||\n              responsibilityForm?.groupReviewers?.list?.length > 0) &&\n              featureFlag_groups)\n          \">\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"!featureFlag_groups\">\n            <ng-container *ngFor=\"\n                let reviewer of responsibilityForm?.reviewers?.list?.slice(0, 1)\n              \">\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                (click)=\"remove('reviewer', reviewer)\">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"reviewer.member_name\" placement=\"bottom-left\"\n                delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ reviewer.member_name }}</span>\n            </ng-container>\n            <button 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 (click)=\"reviewer.popover()\" placement=\"right\"\n              *ngIf=\"responsibilityForm?.reviewers?.list?.length > 1\">\n              +{{ responsibilityForm?.reviewers?.list?.slice(1).length }}\n            </button>\n          </div>\n\n          <!-- <div class=\"chip-container\" *ngIf=\"!featureFlag_groups\" [class.more-one]=\"responsibilityForm?.reviewers?.list?.length>1\"\n                      [class.plus]=\"responsibilityForm?.reviewers?.list?.length>2\">\n                      <span class=\"chip\" *ngFor=\"let reviewer of responsibilityForm?.reviewers?.list?.slice(0,2)\"><i class=\"icons\" (click)=\"remove('reviewer',reviewer)\">&#xe90d;</i> {{reviewer.member_name}}</span>\n                      <button class=\"count\" *ngIf=\"responsibilityForm?.reviewers?.list?.length > 2\" type=\"button\" appPopover (click)=\"reviewer.popover()\" placement=\"right\">+{{responsibilityForm?.reviewers?.list?.slice(2).length}}</button>\n                  </div> -->\n\n          <div class=\"vx-d-flex vx-align-center\" *ngIf=\"featureFlag_groups\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n              *ngIf=\"responsibilityForm?.reviewers?.list.length > 0\">\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"\n                  remove('reviewer', responsibilityForm?.reviewers?.list[0])\n                \">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"\n                  responsibilityForm?.reviewers?.list[0]?.employee_name\n                \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                responsibilityForm?.reviewers?.list[0]?.employee_name\n                }}</span>\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 greenBg\"\n                appPopover (click)=\"user.popover()\" placement=\"right\"\n                *ngIf=\"responsibilityForm?.reviewers?.list?.length > 1\">\n                +{{ responsibilityForm?.reviewers?.list?.length - 1 }}\n              </button>\n            </div>\n            <div class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"\n                responsibilityForm?.reviewers?.list.length > 0 &&\n                responsibilityForm?.groupReviewers?.list?.length > 0\n              \">\n              &\n            </div>\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n              *ngIf=\"responsibilityForm?.groupReviewers?.list.length > 0\">\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"\n                  remove(\n                    'groupReviewer',\n                    responsibilityForm?.groupReviewers?.list[0]\n                  )\n                \">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"\n                  responsibilityForm?.groupReviewers?.list[0]?.group_name\n                \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                responsibilityForm?.groupReviewers?.list[0]?.group_name\n                }}</span>\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 (click)=\"group.popover()\" placement=\"right\"\n                *ngIf=\"responsibilityForm?.groupReviewers?.list?.length > 1\">\n                +{{ responsibilityForm?.groupReviewers?.list?.length - 1 }}\n              </button>\n            </div>\n          </div>\n\n          <!-- <div class=\"chip-container\" *ngIf=\"featureFlag_groups\">\n                      <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.reviewers?.list.length > 0 \">\n                          <i class=\"icons cross vx-mr-1\" (click)=\"remove('reviewer',responsibilityForm?.reviewers?.list[0])\" >&#xe90d;</i>\n                          <span class=\"chip\" [appTooltip]=\"responsibilityForm?.reviewers?.list[0]?.employee_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\">{{responsibilityForm?.reviewers?.list[0]?.employee_name}}</span></span>\n                          <button *ngIf=\"responsibilityForm?.reviewers?.list?.length > 1\" class=\"count user\" appPopover (click)=\"user.popover()\" placement=\"left\"> +{{responsibilityForm?.reviewers?.list?.length - 1}}</button>\n                      </div>\n                      <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"responsibilityForm?.reviewers?.list.length > 0 && responsibilityForm?.groupReviewers?.list?.length > 0\">&</span>\n                      <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.groupReviewers?.list.length > 0 \" >\n                          <i class=\"icons cross vx-mr-1\" (click)=\"remove('groupReviewer',responsibilityForm?.groupReviewers?.list[0])\">&#xe90d;</i>\n                          <span class=\"chip\" [appTooltip]=\"responsibilityForm?.groupReviewers?.list[0]?.group_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\">{{responsibilityForm?.groupReviewers?.list[0]?.group_name}}</span></span>\n                          <button *ngIf=\"responsibilityForm?.groupReviewers?.list?.length > 1\" class=\"count\" appPopover (click)=\"group.popover()\" placement=\"right\">+{{responsibilityForm?.groupReviewers?.list?.length - 1}}</button>\n\n                      </div>\n                  </div> -->\n\n          <button *ngIf=\"activeSelector !== 'reviewer'\" class=\"edit\" type=\"button\"\n            (click)=\"activateSelector('reviewer', true)\">\n            <i class=\"icons\">&#xe9ba;</i> Edit\n          </button>\n        </div>\n        <app-cs-radio [checked]=\"responsibilityForm.reviewers.sequentialWorkflow\" [name]=\"'reviewer'\"\n          (checkedEvent)=\"onReviewerWorkflowChange('sequential')\" [class.disabled]=\"\n            responsibilityForm?.groupReviewers?.list?.length > 0\n          \">\n          SEQUENTIAL<i class=\"icons\" [appTooltip]=\"\n              'The responsibility will be sent for review one at a time in the sequence defined by you.'\n            \" placement=\"bottom-right\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\">&#xe91f;</i>\n        </app-cs-radio>\n        <app-cs-radio [checked]=\"!responsibilityForm.reviewers.sequentialWorkflow\" [name]=\"'reviewer'\"\n          (checkedEvent)=\"onReviewerWorkflowChange('anyReviewer')\">\n          ANY REVIEWER CAN MARK THIS AS REVIEWED<i class=\"icons\" [appTooltip]=\"\n              'The responsibility will be sent for review to all reviewers at the same time. If anyone of the reviewer reviews the responsibility, it will be considered as reviewed.'\n            \" placement=\"bottom-right\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\">&#xe91f;</i>\n        </app-cs-radio>\n        <app-popover #reviewer [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let reviewer of responsibilityForm?.reviewers?.list\n                    | slice : 1;\n                  let j = index\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i class=\"icons\" (click)=\"remove('reviewer', reviewer)\">&#xe90d;</i>\n                    {{ reviewer.member_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n        <app-popover #user [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let reviewer of responsibilityForm?.reviewers?.list\n                    | slice : 1;\n                  let j = index\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i class=\"icons\" (click)=\"remove('reviewer', reviewer)\">&#xe90d;</i>\n                    {{ reviewer.member_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n        <app-popover #group [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let group of responsibilityForm?.groupReviewers?.list\n                    | slice : 1;\n                  let i = index\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i class=\"icons\" (click)=\"remove('groupReviewer', group)\">&#xe90d;</i>\n                    {{ group.group_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n      </div>\n    </div>\n  </div>\n\n  <!-- Overseer -->\n  <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.OVERSEER\" [attr.id]=\"'OVERSEER'\"\n    [class.active]=\"\n      activeSelector === 'overseerNotify' || activeSelector === 'overseer'\n    \" [class.disabled]=\"\n      activeSelector &&\n      !['overseerNotify', 'overseerNotify'].includes(activeSelector) &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"false\">\n      <img [src]=\"ASSETS.oversight\" alt=\"\" *ngIf=\"\n          (responsibilityForm?.overseers?.list?.length == 0 &&\n            responsibilityForm?.overseers?.notifyList?.length == 0) ||\n          activeSelector === 'overseerNotify' ||\n          activeSelector === 'overseer'\n        \" />\n      <svg class=\"checkIcon\" *ngIf=\"\n          (responsibilityForm?.overseers?.list?.length > 0 ||\n            responsibilityForm?.overseers?.notifyList?.length > 0) &&\n          !(\n            activeSelector === 'overseerNotify' || activeSelector === 'overseer'\n          )\n        \" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">Oversight</label>\n        <div class=\"select\" *ngIf=\"\n            (responsibilityForm?.overseers?.list?.length == 0 &&\n              !featureFlag_groups) ||\n            (responsibilityForm?.overseers?.list?.length == 0 &&\n              responsibilityForm?.overseersGroups?.list?.length == 0 &&\n              featureFlag_groups)\n          \">\n          <input type=\"text\" (click)=\"activateSelector('overseer', true)\"\n            placeholder=\"Who should have oversight of the responsibility?\" readonly />\n        </div>\n        <div class=\"selected\" *ngIf=\"\n            (responsibilityForm?.overseers?.list?.length > 0 &&\n              !featureFlag_groups) ||\n            ((responsibilityForm?.overseers?.list?.length > 0 ||\n              responsibilityForm?.overseersGroups?.list?.length > 0) &&\n              featureFlag_groups)\n          \">\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"!featureFlag_groups\">\n            <ng-container *ngFor=\"\n                let overseer of responsibilityForm?.overseers?.list?.slice(0, 1)\n              \">\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                (click)=\"remove('overseer', overseer)\">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"overseer.member_name\" placement=\"bottom-left\"\n                delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ overseer.member_name }}</span>\n            </ng-container>\n            <button 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 (click)=\"overseers.popover()\" placement=\"right\"\n              *ngIf=\"responsibilityForm?.overseers?.list?.length > 1\">\n              +{{ responsibilityForm?.overseers?.list?.slice(1).length }}\n            </button>\n          </div>\n\n          <!-- <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.overseers?.list?.length>1\" [class.plus]=\"responsibilityForm?.overseers?.list?.length>2\" *ngIf=\"!featureFlag_groups\" >\n                      <span class=\"chip\" *ngFor=\"let overseer of responsibilityForm?.overseers?.list?.slice(0,2)\"><i class=\"icons\" (click)=\"remove('overseer',overseer)\">&#xe90d;</i> {{overseer.member_name}}</span>\n                      <button class=\"count\" *ngIf=\"responsibilityForm?.overseers?.list?.length > 2\" type=\"button\" appPopover (click)=\"overseers.popover()\" placement=\"right\">+{{responsibilityForm?.overseers?.list?.slice(2).length}}</button>\n                  </div> -->\n\n          <div class=\"vx-d-flex vx-align-center\" *ngIf=\"featureFlag_groups\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n              *ngIf=\"responsibilityForm?.overseers?.list.length > 0\">\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"\n                  remove('overseer', responsibilityForm?.overseers?.list[0])\n                \">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"\n                  responsibilityForm?.overseers?.list[0]?.employee_name\n                \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                responsibilityForm?.overseers?.list[0]?.employee_name\n                }}</span>\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 greenBg\"\n                appPopover (click)=\"overseerUser.popover()\" placement=\"right\"\n                *ngIf=\"responsibilityForm?.overseers?.list?.length > 1\">\n                +{{ responsibilityForm?.overseers?.list?.length - 1 }}\n              </button>\n            </div>\n            <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"\n                responsibilityForm?.overseers?.list.length > 0 &&\n                responsibilityForm?.overseersGroups?.list?.length > 0\n              \">&</span>\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n              *ngIf=\"responsibilityForm?.overseersGroups?.list?.length > 0\">\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"\n                  remove(\n                    'overseerGroup',\n                    responsibilityForm?.overseersGroups?.list[0]\n                  )\n                \">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"\n                  responsibilityForm?.overseersGroups?.list[0].group_name\n                \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                responsibilityForm?.overseersGroups?.list[0].group_name\n                }}</span>\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 (click)=\"overseerGroup.popover()\" placement=\"right\"\n                *ngIf=\"responsibilityForm?.overseersGroups?.list?.length > 1\">\n                +{{ responsibilityForm?.overseersGroups?.list?.length - 1 }}\n              </button>\n            </div>\n          </div>\n\n          <!-- <div class=\"chip-container\" *ngIf=\"featureFlag_groups\">\n                      <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.overseers?.list.length > 0\" >\n                          <i class=\"icons cross vx-mr-1\" (click)=\"remove('overseer',responsibilityForm?.overseers?.list[0])\">&#xe90d;</i>\n                          <span class=\"chip\" [appTooltip]=\"responsibilityForm?.overseers?.list[0]?.employee_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\">{{responsibilityForm?.overseers?.list[0]?.employee_name}}</span></span>\n                          <button *ngIf=\"responsibilityForm?.overseers?.list?.length > 1\" class=\"count user\" appPopover (click)=\"overseerUser.popover()\" placement=\"left\"> +{{responsibilityForm?.overseers?.list?.length -1}}</button>\n                      </div>\n                      <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"  *ngIf=\"responsibilityForm?.overseers?.list.length > 0 && responsibilityForm?.overseersGroups?.list?.length > 0\" >&</span>\n                      <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.overseersGroups?.list?.length > 0 \" >\n                          <i class=\"icons cross vx-mr-1\" (click)=\"remove('overseerGroup',responsibilityForm?.overseersGroups?.list[0])\">&#xe90d;</i>\n                          <span class=\"chip\" [appTooltip]=\"responsibilityForm?.overseersGroups?.list[0].group_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\"  >{{responsibilityForm?.overseersGroups?.list[0].group_name}}</span></span>\n                          <button *ngIf=\"responsibilityForm?.overseersGroups?.list?.length > 1\" class=\"count\" appPopover (click)=\"overseerGroup.popover()\" placement=\"right\">+{{responsibilityForm?.overseersGroups?.list?.length -1}}</button>\n                      </div>\n                  </div> -->\n          <button *ngIf=\"activeSelector !== 'overseer'\" class=\"edit\" type=\"button\"\n            (click)=\"activateSelector('overseer', true)\">\n            <i class=\"icons\">&#xe9ba;</i> Edit\n          </button>\n        </div>\n\n        <div class=\"select\" *ngIf=\"\n            (responsibilityForm?.overseers?.notifyList?.length == 0 &&\n              !featureFlag_groups) ||\n            (responsibilityForm?.overseers?.notifyList?.length == 0 &&\n              responsibilityForm?.overseersGroups?.notifyList?.length == 0 &&\n              featureFlag_groups)\n          \">\n          <input type=\"text\" (click)=\"activateSelector('overseerNotify', true)\"\n            placeholder=\"Who should be notified if the responsibility is not complet...\" readonly [appTooltip]=\"\n              'Who should be notified if the responsibility is not completed?'\n            \" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\" />\n        </div>\n        <div class=\"selected\" *ngIf=\"\n            (responsibilityForm?.overseers?.notifyList?.length > 0 &&\n              !featureFlag_groups) ||\n            ((responsibilityForm?.overseers?.notifyList?.length > 0 ||\n              responsibilityForm?.overseersGroups?.notifyList?.length > 0) &&\n              featureFlag_groups)\n          \">\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"!featureFlag_groups\">\n            <ng-container *ngFor=\"\n                let overseer of responsibilityForm?.overseers?.notifyList?.slice(\n                  0,\n                  1\n                )\n              \">\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                (click)=\"remove('overseerNotifyList', overseer)\">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"overseer.member_name\" placement=\"bottom-left\"\n                delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ overseer.member_name }}</span>\n            </ng-container>\n            <button 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 (click)=\"notify.popover()\" placement=\"right\"\n              *ngIf=\"responsibilityForm?.overseers?.notifyList?.length > 1\">\n              +{{ responsibilityForm?.overseers?.notifyList?.slice(1).length }}\n            </button>\n          </div>\n\n          <!-- <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.overseers?.notifyList?.length>1\" [class.plus]=\"responsibilityForm?.overseers?.notifyList?.length>2\" *ngIf=\"!featureFlag_groups\">\n                      <span class=\"chip\" *ngFor=\"let overseer of responsibilityForm?.overseers?.notifyList?.slice(0,2)\"><i class=\"icons\" (click)=\"remove('overseerNotifyList',overseer)\">&#xe90d;</i> {{overseer.member_name}}</span>\n                      <button class=\"count\" *ngIf=\"responsibilityForm?.overseers?.notifyList?.length > 2\" type=\"button\" appPopover (click)=\"notify.popover()\" placement=\"right\">+{{responsibilityForm?.overseers?.notifyList?.slice(2).length}}</button>\n                  </div> -->\n\n          <div class=\"vx-d-flex vx-align-center\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n              *ngIf=\"responsibilityForm?.overseers?.notifyList.length > 0\">\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"\n                  remove(\n                    'overseerNotifyList',\n                    responsibilityForm?.overseers?.notifyList[0]\n                  )\n                \">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"\n                  responsibilityForm?.overseers?.notifyList[0]?.employee_name\n                \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                responsibilityForm?.overseers?.notifyList[0]?.employee_name\n                }}</span>\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 greenBg\"\n                appPopover (click)=\"notifyUser.popover()\" placement=\"right\"\n                *ngIf=\"responsibilityForm?.overseers?.notifyList?.length > 1\">\n                +{{ responsibilityForm?.overseers?.notifyList?.length - 1 }}\n              </button>\n            </div>\n            <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"\n                responsibilityForm?.overseers?.notifyList.length > 0 &&\n                responsibilityForm?.overseersGroups?.notifyList?.length > 0\n              \">&</span>\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"\n                responsibilityForm?.overseersGroups?.notifyList?.length > 0\n              \">\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"\n                  remove(\n                    'overseerGroupNotifyList',\n                    responsibilityForm?.overseersGroups?.notifyList[0]\n                  )\n                \">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"\n                  responsibilityForm?.overseersGroups?.notifyList[0]?.group_name\n                \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                responsibilityForm?.overseersGroups?.notifyList[0]?.group_name\n                }}</span>\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 (click)=\"notifyGroup.popover()\" placement=\"right\" *ngIf=\"\n                  responsibilityForm?.overseersGroups?.notifyList?.length > 1\n                \">\n                +{{\n                responsibilityForm?.overseersGroups?.notifyList?.length - 1\n                }}\n              </button>\n            </div>\n          </div>\n\n          <!-- <div class=\"chip-container\" *ngIf=\"featureFlag_groups\">\n                      <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.overseers?.notifyList.length > 0\">\n                          <i class=\"icons cross vx-mr-1\" (click)=\"remove('overseerNotifyList',responsibilityForm?.overseers?.notifyList[0])\">&#xe90d;</i>\n                          <span class=\"chip\" [appTooltip]=\"responsibilityForm?.overseers?.notifyList[0]?.employee_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\">{{responsibilityForm?.overseers?.notifyList[0]?.employee_name}}</span></span>\n                          <button *ngIf=\"responsibilityForm?.overseers?.notifyList?.length > 1\" class=\"count user\" appPopover (click)=\"notifyUser.popover()\" placement=\"left\"> +{{responsibilityForm?.overseers?.notifyList?.length - 1}}</button>\n                      </div>\n                      <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"  *ngIf=\"responsibilityForm?.overseers?.notifyList.length > 0 && responsibilityForm?.overseersGroups?.notifyList?.length > 0\" >&</span>\n                      <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.overseersGroups?.notifyList?.length > 0 \" >\n                          <i class=\"icons cross vx-mr-1\" (click)=\"remove('overseerGroupNotifyList',responsibilityForm?.overseersGroups?.notifyList[0])\">&#xe90d;</i>\n                          <span class=\"chip\" [appTooltip]=\"responsibilityForm?.overseersGroups?.notifyList[0]?.group_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\"  >{{responsibilityForm?.overseersGroups?.notifyList[0]?.group_name}}</span></span>\n                          <button *ngIf=\"responsibilityForm?.overseersGroups?.notifyList?.length > 1\" class=\"count\" appPopover (click)=\"notifyGroup.popover()\" placement=\"right\">+{{responsibilityForm?.overseersGroups?.notifyList?.length - 1}}</button>\n                      </div>\n                  </div> -->\n          <button *ngIf=\"activeSelector !== 'overseerNotify'\" class=\"edit\" type=\"button\"\n            (click)=\"activateSelector('overseerNotify', true)\">\n            <i class=\"icons\">&#xe9ba;</i> Edit\n          </button>\n        </div>\n        <app-popover #overseers [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let overseer of responsibilityForm?.overseers?.list\n                    | slice : 1;\n                  let j = index\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i class=\"icons\" (click)=\"remove('overseer', overseer)\">&#xe90d;</i>\n                    {{ overseer?.member_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n        <app-popover #overseerUser [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let overseers of responsibilityForm?.overseers?.list\n                    | slice : 1;\n                  let j = index\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i class=\"icons\" (click)=\"remove('overseer', overseers)\">&#xe90d;</i>\n                    {{ overseers?.member_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n        <app-popover #overseerGroup [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let overseer of responsibilityForm?.overseersGroups?.list\n                    | slice : 1;\n                  let i = index\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i class=\"icons\" (click)=\"remove('overseerGroup', overseer)\">&#xe90d;</i>\n                    {{ overseer?.group_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n        <app-popover #notify [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let overseer of responsibilityForm?.overseers?.notifyList\n                    | slice : 1;\n                  let j = index\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i class=\"icons\" (click)=\"remove('overseerNotifyList', overseer)\">&#xe90d;</i>\n                    {{ overseer?.member_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n        <app-popover #notifyUser [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let overseer of responsibilityForm?.overseers?.notifyList\n                    | slice : 1;\n                  let j = index\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i class=\"icons\" (click)=\"remove('overseerNotifyList', overseer)\">&#xe90d;</i>\n                    {{ overseer?.member_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n        <app-popover #notifyGroup [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let group of responsibilityForm?.overseersGroups?.notifyList\n                    | slice : 1;\n                  let i = index\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i class=\"icons\" (click)=\"remove('overseerGroupNotifyList', group)\">&#xe90d;</i>\n                    {{ group?.group_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n      </div>\n    </div>\n  </div>\n\n  <!-- Assurance -->\n  <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.ASSURANCE\" [attr.id]=\"'ASSURANCE'\"\n    [class.active]=\"activeSelector === 'assurance'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'assurance' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"false\">\n      <img [src]=\"ASSETS.reviewer\" alt=\"\" *ngIf=\"\n          responsibilityForm?.assuranceList?.length == 0 ||\n          activeSelector === 'assurance'\n        \" />\n\n      <svg *ngIf=\"\n          responsibilityForm?.assuranceList?.length > 0 &&\n          activeSelector !== 'assurance'\n        \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">Assurance</label>\n        <div class=\"select\" *ngIf=\"responsibilityForm?.assuranceList?.length == 0\">\n          <div class=\"custom-input\" (click)=\"activateSelector('assurance', true)\"\n            aria-placeholder=\"Select the test plan categories that you would like to add this responsibility to.\"></div>\n        </div>\n        <div class=\"selected\" *ngIf=\"responsibilityForm?.assuranceList?.length > 0\">\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n            <ng-container *ngFor=\"\n                let assurance of responsibilityForm?.assuranceList?.slice(0, 1)\n              \">\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                (click)=\"remove('assurance', assurance)\">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"assurance.category_name\"\n                placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ assurance.category_name\n                }}</span>\n            </ng-container>\n            <button 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 (click)=\"assurance.popover()\" placement=\"right\"\n              *ngIf=\"responsibilityForm?.assuranceList?.length > 1\">\n              +{{ responsibilityForm?.assuranceList?.slice(1).length }}\n            </button>\n          </div>\n\n          <button *ngIf=\"activeSelector !== 'assurance'\" class=\"edit\" type=\"button\"\n            (click)=\"activateSelector('assurance', true)\">\n            <i class=\"icons\">&#xe9ba;</i> Edit\n          </button>\n        </div>\n        <app-popover #assurance [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let assurance of responsibilityForm?.assuranceList\n                    | slice : 1;\n                  let j = index\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i class=\"icons\" (click)=\"remove('assurance', assurance)\">&#xe90d;</i>\n                    {{ assurance.category_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n      </div>\n    </div>\n  </div>\n\n  <!-- Requires Audit -->\n  <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\"\n    *ngIf=\"moreOptions?.REQUIRES_AUDIT && responsibilityForm.rc.length > 0\" [attr.id]=\"'REQUIRES_AUDIT'\"\n    [class.active]=\"activeSelector === 'requires_audit'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'requires_audit' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"false\">\n      <img [src]=\"ASSETS.audit\" alt=\"\" *ngIf=\"\n          responsibilityForm?.requiresAuditList?.length == 0 ||\n          activeSelector === 'requires_audit'\n        \" />\n\n      <svg *ngIf=\"\n          responsibilityForm?.requiresAuditList?.length > 0 &&\n          activeSelector !== 'requires_audit'\n        \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">REQUIRES AUDIT?</label>\n        <div class=\"select\" *ngIf=\"responsibilityForm?.requiresAuditList?.length == 0\">\n          <input type=\"text\" placeholder=\"If yes, select an Audit Category.\" readonly\n            (click)=\"activateSelector('requires_audit', true)\" />\n        </div>\n        <div class=\"selected\" *ngIf=\"responsibilityForm?.requiresAuditList?.length > 0\">\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n            <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n              (click)=\"remove('requires_audit', overseer)\">&#xe9ae;</i>\n            <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"\n                responsibilityForm?.requiresAuditList[0]?.category_name\n              \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n              responsibilityForm?.requiresAuditList[0]?.category_name\n              }}</span>\n          </div>\n\n          <button class=\"edit\" type=\"button\" (click)=\"activateSelector('requires_audit', true)\">\n            <i class=\"icons\">&#xe90c;</i> Edit\n          </button>\n          <!-- class=\"icons\">&#xe9ba;</i>\n                      Edit</button> -->\n        </div>\n        <ng-container *ngIf=\"responsibilityForm?.requiresAuditList?.length\">\n          <label class=\"vx-control-panel vx-mt-8\">\n            SAMPLE SIZE\n            <app-cs-switch [(ngValue)]=\"isSample\" (ngValueChange)=\"switchEnable($event)\"></app-cs-switch>\n          </label>\n          <div class=\"sample-part\" [class.disabled]=\"!isSample\">\n            <app-cs-radio value=\"0\" class=\"sample-radio\" (click)=\"selectedSampleData(0)\"\n              [checked]=\"selectedSample === 0\">\n              <div class=\"name\">COUNT</div>\n              <input type=\"number\" placeholder=\"--\" (keypress)=\"checkInputValue($event)\" [(ngModel)]=\"sampleValue\" />\n            </app-cs-radio>\n            <div class=\"or\">OR</div>\n            <app-cs-radio value=\"1\" class=\"sample-radio\" (click)=\"selectedSampleData(1)\"\n              [checked]=\"selectedSample === 1\">\n              <div class=\"name\">PERCENTAGE</div>\n              <input type=\"number\" (keypress)=\"checkInputValue($event)\" [(ngModel)]=\"samplePercentage\"\n                placeholder=\"--\" />\n            </app-cs-radio>\n          </div>\n          <label class=\"vx-control-panel vx-mt-8\">SET A REMINDER IF THE AUDIT PLAN IS NOT CREATED.</label>\n          <div class=\"reminder-part\">\n            Send reminder every\n            <input type=\"number\" value=\"2\" [(ngModel)]=\"sendAuditRemindersValue\" />\n            Day by\n            <div class=\"picker-group\">\n              <input class=\"time\" aria-label=\"12hr format\" [(ngModel)]=\"auditTime\" [ngxTimepicker]=\"dailyTime\"\n                placeholder=\"auditTime.toUpperCase()\" type=\"text\" [min]=\"currentTime\" readonly />\n              <i class=\"icons\">&#xe955;</i>\n              <ngx-material-timepicker #dailyTime [defaultTime]=\"auditTime\">\n              </ngx-material-timepicker>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n\n  <!-- Link of GRC objects -->\n  <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\"\n    *ngIf=\"moreOptions?.GRC_OBJECTS && responsibilityForm.rc.length > 0\" [attr.id]=\"'GRC_OBJECTS'\"\n    [class.active]=\"activeSelector === 'GRC_OBJECTS'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'GRC_OBJECTS' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"false\">\n      <img [src]=\"ASSETS.audit\" alt=\"\" *ngIf=\"\n          responsibilityForm?.selectedGRCObjects?.length == 0 ||\n          activeSelector === 'GRC_OBJECTS'\n        \" />\n\n      <svg *ngIf=\"\n          responsibilityForm?.selectedGRCObjects?.length > 0 &&\n          activeSelector !== 'GRC_OBJECTS'\n        \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">LINK GRC OBJECT(S)</label>\n        <div class=\"select\" *ngIf=\"responsibilityForm?.selectedGRCObjects?.length === 0\">\n          <input type=\"text\" placeholder=\"Select GRC object(s) to link with this responsibility\" readonly\n            (click)=\"activateSelector('GRC_OBJECTS', true)\" />\n        </div>\n        <ng-container *ngIf=\"responsibilityForm?.selectedGRCObjects?.length\">\n          <ng-container *ngFor=\"let selectedGRC of GRC_TYPE_ARRAY; let i = index\">\n            <div *ngIf=\"grcDataWithTypes[selectedGRC]?.length\" class=\"selected vx-mb-2\">\n              <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n                <ng-container *ngFor=\"let grc of grcDataWithTypes[selectedGRC]?.slice(0, 1)\">\n                  <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                    (click)=\"remove('GRC_OBJECTS', grc, 0)\">&#xe9ae;</i>\n                  <div class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\">\n                    {{ selectedGRC | titlecase }}\n                  </div>\n\n                  <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"grc?.name\" placement=\"bottom-left\"\n                    delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ grc?.name }}</span>\n                </ng-container>\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 (click)=\"popoverGRC.popover()\" placement=\"left\"\n                  *ngIf=\"grcDataWithTypes[selectedGRC]?.length > 1\">\n                  +{{ grcDataWithTypes[selectedGRC].length - 1 }}\n                </button>\n              </div>\n\n              <button *ngIf=\"activeSelector !== 'GRC'\" class=\"edit\" type=\"button\" (click)=\"\n                  selectedGRCTab = grcDataWithTypes[selectedGRC][0]?.type;\n                  getOtherGRCObjects();\n                  activateSelector('GRC_OBJECTS', true)\n                \">\n                <i class=\"icons\">&#xe9ba;</i> Edit\n              </button>\n            </div>\n            <app-popover #popoverGRC [dontCloseonClick]=\"true\">\n              <div class=\"wf-action-list\">\n                <ul class=\"action-item\">\n                  <li *ngFor=\"\n                      let grc of grcDataWithTypes[selectedGRC] | slice : 1;\n                      let j = index\n                    \">\n                    <div class=\"avatar-card\">\n                      <span class=\"value\">\n                        <i class=\"icons\" (click)=\"remove('GRC_OBJECTS', grc, j + 1)\">&#xe90d;</i>\n                        {{ grc.name }}\n                      </span>\n                    </div>\n                  </li>\n                </ul>\n              </div>\n            </app-popover>\n          </ng-container>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</div>\n\n<app-users-radio-list *ngIf=\"activeSelector === 'assignors'\" [usersList]=\"assignorsList\"\n  [selectedUsers]=\"responsibilityForm.assignors.list\" [itemEmailKey]=\"'member_email'\" [userIdKey]=\"'member_id'\"\n  [itemNameKey]=\"'member_name'\" (saveSelectedList)=\"saveSelectedList('assignors', $event)\"\n  (closeUsersList)=\"activeDeselector()\" [loaded]=\"assignorsListLoaded\">\n</app-users-radio-list>\n\n<ng-container *ngIf=\"activeSelector === 'assignees'\">\n  <app-group-users-list *ngIf=\"\n      isEntrust || responsibilityForm?.assignees?.whoCanComplete === 'ANY_ONE'\n    \" [openedFrom]=\"openedFrom\" [usersList]=\"assigneesList\" [fromResponsibility]=\"'Assignee'\" [groupsList]=\"groupsList\"\n    [assigneeGroupsList]=\"groupAssigneeList\" [selectedUsers]=\"responsibilityForm?.assignees?.list\"\n    [selectedGroups]=\"responsibilityForm?.assigneeGroups?.list\" [userIdKey]=\"'my_member_id'\" [groupIdKey]=\"'group_id'\"\n    [loader]=\"userListLoader || assignorsListLoader\" (saveSelectedList)=\"saveSelectedList('assignees', $event)\"\n    (closeUsersList)=\"activeDeselector()\" [groupsEnabled]=\"featureFlag_groups\">\n  </app-group-users-list>\n  <app-users-radio-list *ngIf=\"\n      !isEntrust && responsibilityForm.assignees.whoCanComplete !== 'ANY_ONE'\n    \" [itemEmailKey]=\"'employee_email'\" [usersList]=\"assigneesList\" [selectedUsers]=\"responsibilityForm.assignees.list\"\n    [userIdKey]=\"'employee_id'\" [itemNameKey]=\"'employee_name'\" [fromResponsibility]=\"'Assignee'\"\n    (saveSelectedList)=\"saveSelectedList('assignees', $event)\" (closeUsersList)=\"activeDeselector()\"\n    [loaded]=\"assigneesListLoaded\">\n  </app-users-radio-list>\n</ng-container>\n\n<app-checkpoints *ngIf=\"activeSelector === 'checkpoints'\"\n  [checkpointInstruction]=\"responsibilityForm?.checkpointInstruction\" [checkpointData]=\"responsibilityForm?.checkpoints\"\n  (saveCheckPoint)=\"saveSelectedList('checkpoints', $event)\" (closeCheckPoint)=\"activeDeselector()\"></app-checkpoints>\n<app-frequency-container *ngIf=\"activeSelector === 'frequency'\" [frequencyDetails]=\"frequencyDetails\"\n  [feature]=\"feature\" [onCompletionResponsibility]=\"responsibilityDetails?.onCompletionResponsibility\"\n  (selectedFrequency)=\"frequencyData($event)\" [mode]=\"'responsibility'\" (closeFrequency)=\"activeDeselector()\">\n</app-frequency-container>\n\n<app-responsibility-centers-list *ngIf=\"activeSelector === 'rc'\" [loaded]=\"rcListLoaded\"\n  [responsibilityCentersList]=\"responsibilityCentersList\" [radioSelection]=\"\n    mode == 'EDIT' && responsibilityCenterType === 0 ? true : false\n  \" [selectedResponsibilityCenters]=\"responsibilityForm.rc\" [rcIdKey]=\"'item_id'\"\n  (saveSelectedList)=\"saveSelectedList('rc', $event)\" (closeRcList)=\"activeDeselector()\">\n</app-responsibility-centers-list>\n\n<app-category-multi-select *ngIf=\"activeSelector === 'category'\" [categoryList]=\"categories\"\n  [allCategories]=\"allCategories\" [categoryIdKey]=\"'category_id'\" [selectedCategories]=\"responsibilityForm.category\"\n  (saveSelectedCategory)=\"saveSelectedList('category', $event)\" (closeCategoriesList)=\"activeDeselector()\">\n</app-category-multi-select>\n\n<!-- Program List Popup -->\n<app-list-container *ngIf=\"activeSelector === 'program'\" (close)=\"activeDeselector()\">\n  <app-program-list body (itemsSelectedChange)=\"onItemsSelectedChange($event)\" [selectedItems]=\"selectedPrograms\"\n    [url]=\"programListUrl\"></app-program-list>\n  <div class=\"vx-d-flex vx-align-center vx-justify-between vx-w-100\" footer>\n    <div class=\"left-side vx-fs-12 vx-d-flex\">\n      <ng-container *ngIf=\"allProgamSelected.length > 0\">\n        <button\n          class=\"selected-count-box vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\">\n          {{ allProgamSelected.length }}\n        </button>\n        <span class=\"selected-text\">\n          Program\n          {{ allProgamSelected.length > 1 ? \"Categories\" : \"Category\" }}\n          Selected</span>\n      </ng-container>\n    </div>\n    <div class=\"right-side vx-d-flex\">\n      <button class=\"cancelBtn\" (click)=\"activeDeselector()\">Cancel</button>\n      <button class=\"nextBtn\" (click)=\"activeDeselector(); selectCategory()\">\n        Next <i class=\"icons\">&#xe91e;</i>\n      </button>\n    </div>\n  </div>\n</app-list-container>\n\n<app-owner-list *ngIf=\"activeSelector === 'reviewer' && !featureFlag_groups\" [listHeading]=\"'Select a Reviewer'\"\n  [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\" [usersList]=\"allUsersList\" [showWorkflow]=\"true\"\n  [selectedUsers]=\"responsibilityForm.reviewers.list\" [userIdKey]=\"'employee_id'\" [itemEmailKey]=\"'employee_email'\"\n  [itemNameKey]=\"'member_name'\" (saveSelectedList)=\"\n    saveSelectedList('reviewer', $event);\n    activateSelector('reviewerFrequency', true)\n  \" (closeUsersList)=\"activeDeselector()\" [mode]=\"mode\" [fromResponsibility]=\"'Reviewer'\" [reviewerWorkflowType]=\"\n    responsibilityForm?.reviewers?.sequentialWorkflow\n      ? 'SEQUENTIAL'\n      : 'ANY REVIEWER CAN MARK THIS AS REVIEWED'\n  \" (reviewerWorkflowTypeChange)=\"reviewerTypeChange($event)\">\n</app-owner-list>\n<user-group-list *ngIf=\"activeSelector === 'reviewer' && featureFlag_groups\" [selectedReviewer]=\"true\"\n  [userlist]=\"reviewerMemberIdsList\" [groupEnabled]=\"true\" [groupList]=\"groupReviewerList\"\n  [selectedGroups]=\"responsibilityForm?.groupReviewers?.list\" [selectedUsers]=\"responsibilityForm?.reviewers?.list\"\n  (cancel)=\"activeDeselector()\" (save)=\"\n    saveSelectedList('reviewer', $event);\n    activateSelector('reviewerFrequency', true)\n  \" [mode]=\"mode\" [fromResponsibility]=\"'Reviewer'\" [loading]=\"userListLoader || assignorsListLoader\"\n  (reviewerWorkflowTypeChange)=\"reviewerTypeChange($event)\" [reviewerWorkflowType]=\"\n    responsibilityForm?.reviewers?.sequentialWorkflow\n      ? 'SEQUENTIAL'\n      : 'ANY REVIEWER CAN MARK THIS AS REVIEWED'\n  \" [featureflag]=\"featureFlag_groups\">\n</user-group-list>\n<app-owner-list *ngIf=\"activeSelector === 'overseer' && !featureFlag_groups\" [singularText]=\"'User selected'\"\n  [pluralText]=\"'Users selected'\" [usersList]=\"allUsersList\" [selectedUsers]=\"responsibilityForm.overseers.list\"\n  [userIdKey]=\"'employee_id'\" [fromResponsibility]=\"'Overseer'\" [itemNameKey]=\"'member_name'\"\n  (saveSelectedList)=\"saveSelectedList('overseer', $event)\" (closeUsersList)=\"activeDeselector()\"\n  [itemEmailKey]=\"'employee_email'\">\n</app-owner-list>\n<user-group-list *ngIf=\"activeSelector === 'overseer' && featureFlag_groups\" [groupEnabled]=\"true\"\n  [groupList]=\"groupOverseerList\" [selectedGroups]=\"responsibilityForm?.overseersGroups?.list\"\n  [userlist]=\"overseersList\" [selectedUsers]=\"responsibilityForm.overseers.list\" [fromResponsibility]=\"'Overseer'\"\n  [loading]=\"userListLoader || assignorsListLoader\" (save)=\"saveSelectedList('overseer', $event)\"\n  (cancel)=\"activeDeselector()\" [featureflag]=\"featureFlag_groups\">\n</user-group-list>\n\n<app-owner-list *ngIf=\"activeSelector === 'overseerNotify' && !featureFlag_groups\" [singularText]=\"'User selected'\"\n  [pluralText]=\"'Users selected'\" [usersList]=\"allUsersList\" [fromResponsibility]=\"'Overseer'\"\n  [selectedUsers]=\"responsibilityForm.overseers.notifyList\" [userIdKey]=\"'employee_id'\" [itemNameKey]=\"'member_name'\"\n  (saveSelectedList)=\"saveSelectedList('overseerNotify', $event)\" (closeUsersList)=\"activeDeselector()\"\n  [itemEmailKey]=\"'employee_email'\"></app-owner-list>\n<user-group-list *ngIf=\"activeSelector === 'overseerNotify' && featureFlag_groups\" [userlist]=\"overseersList\"\n  [groupEnabled]=\"true\" [groupList]=\"groupOverseerList\"\n  [selectedGroups]=\"responsibilityForm?.overseersGroups?.notifyList\"\n  [selectedUsers]=\"responsibilityForm.overseers.notifyList\" [fromResponsibility]=\"'Overseer'\"\n  [loading]=\"userListLoader || assignorsListLoader\" (save)=\"saveSelectedList('overseerNotify', $event)\"\n  (cancel)=\"activeDeselector()\" [featureflag]=\"featureFlag_groups\">\n</user-group-list>\n\n<app-owner-list *ngIf=\"activeSelector === 'assurance'\" [singularText]=\"'Test Category selected'\"\n  [pluralText]=\"'Test Categories selected'\" [searchPlaceholder]=\"'Search Test Category...'\"\n  [listHeading]=\"'Select Test Categories'\" [usersList]=\"assuranceCategoriesList\"\n  [noDataText]=\"'No Test Categories Found'\" [selectedUsers]=\"responsibilityForm.assuranceList\"\n  [userIdKey]=\"'category_id'\" [itemEmailKey]=\"'category_name'\" [itemNameKey]=\"'category_name'\"\n  (saveSelectedList)=\"saveSelectedList('assurance', $event)\" (closeUsersList)=\"activeDeselector()\"\n  [searchPlaceholder]=\"'Search Category'\">\n</app-owner-list>\n\n<app-audit-category-list *ngIf=\"activeSelector === 'requires_audit'\" (closeList)=\"activeDeselector()\"\n  [auditCategory]=\"assuranceRequiresAuditList\" (saveSelectedList)=\"saveSelectedList('requires_audit', $event)\"\n  [selectedData]=\"responsibilityForm?.requiresAuditList[0]\"></app-audit-category-list>\n\n<app-loader-inline *ngIf=\"(loader && this.mode === 'EDIT') || entrustLoader\"></app-loader-inline>\n<app-framework-list *ngIf=\"activeSelector === 'framework'\" (assignControl)=\"assignFromFramework($event)\"\n  [previousSelectedValues]=\"selectedFrameworkValues\" (closeFramework)=\"activeDeselector()\"\n  (entrustFramework)=\"entrustFramework($event)\"></app-framework-list>\n\n<!-- risk-calculator here -->\n<app-risk-classification *ngIf=\"activeSelector === 'riskCalculator'\" [currentRiskValue]=\"responsibilityForm.riskClass\"\n  (saveList)=\"saveSelectedList('calculatedrisk', $event)\" (closeList)=\"activeDeselector()\">\n</app-risk-classification>\n\n<app-review-frequency *ngIf=\"activeSelector === 'reviewerFrequency'\" [reviewCompleteDays]=\"\n    responsibilityForm.reviewers.reviewFrequency.reviewCompleteDays\n  \" [reviewNOtCompletedDays]=\"\n    responsibilityForm.reviewers.reviewFrequency.reviewNOtCompletedDays\n  \" (saveReviewFrequency)=\"saveSelectedList('reviewFrequency', $event)\" (closeReviewFrequency)=\"\n    activeDeselector();\n    activateSelector('reviewer', false);\n    responsibilityForm.reviewers.list = [];\n    responsibilityForm.groupReviewers.list = []\n  \" (backToUserList)=\"activeDeselector(); activateSelector('reviewer', true)\">\n</app-review-frequency>\n\n<app-assessment-list *ngIf=\"isAssessment\" [program_ids]=\"responsibilityForm.program[0]?._id\" (cancelAssessment)=\"\n    isAssessment = false; activateSelector('isAssessment', false)\n  \" [isEdit]=\"responsibilityForm?.assessment?.assessment_id ? true : false\"\n  [selectedAssessment]=\"responsibilityForm?.assessment\" (onAssessmentSelect)=\"\n    onAssessmentSelect($event); activateSelector('isAssessment', false)\n  \"></app-assessment-list>\n\n<app-smiley-dialog-inline *ngIf=\"showSmiley\" [message]=\"smileyMessage\" [actionButtons]=\"actionButtons\"\n  (action)=\"action($event)\" (closeSmiley)=\"closeSmiley($event)\"></app-smiley-dialog-inline>\n\n<div class=\"import\" *ngIf=\"activeSelector === 'checkpoints-new'\">\n  <app-create-assessment-container #editor [openPortal]=\"'RESPONSIBILITY_CHECKPOINT'\"\n    (postAssessment)=\"postAssessment($event)\" (setIsUploaded)=\"setIsUploaded($event)\"\n    [checkpointJSON]=\"responsibilityForm.new_checkpoints\">\n  </app-create-assessment-container>\n</div>\n\n<app-grc-object-list *ngIf=\"activeSelector === 'GRC_OBJECTS'\" [grcObject]=\"grcList\"\n  [selectedGRC]=\"responsibilityForm.selectedGRCObjects | refDisconnect\" [loader]=\"grcLoader\" [tableCard]=\"otherGRCCard\"\n  [selectedTab]=\"selectedGRCTab\" [cardLoader]=\"grcTabLoader\" (getOtherGRCObjects)=\"getOtherGRCObjects($event)\"\n  (saveOtherGRC)=\"saveSelectedList('GRC_OBJECTS', $event)\"\n  (closeOtherGRC)=\"activateSelector('GRC_OBJECTS', false)\"></app-grc-object-list>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::ng-deep .workflw-compliance{display:block;position:relative}::ng-deep .workflw-compliance vcomply-editor .editor-container{border-radius:4px}::ng-deep .workflw-compliance vcomply-editor .editor-container .editable-block{min-height:72px;padding:11px 15px;line-height:20px;font-size:14px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}@media not all and (min-resolution: .001dpcm){@supports (-webkit-appearance: none){::ng-deep .workflw-compliance vcomply-editor .editor-container .editable-block:before{opacity:.72}}}::ng-deep .workflw-compliance vcomply-editor .editor-container .editable-block ul{padding:0 0 0 10px;margin-top:0}::ng-deep .workflw-compliance vcomply-editor .editor-container .editable-block ul li{list-style:unset}::ng-deep .workflw-compliance vcomply-editor .editor-container .editable-block ol{padding:0 0 0 10px;margin-top:0}::ng-deep .workflw-compliance vcomply-editor .editor-container .editable-block ol li{list-style:decimal}::ng-deep .workflw-compliance vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .workflw-compliance vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:22px}::ng-deep .workflw-compliance vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .workflw-compliance vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .workflw-compliance .sample-part{display:flex;align-items:center;margin-bottom:4px}::ng-deep .workflw-compliance .sample-part .sample-radio{width:100%}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item{position:relative;width:100%}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item .radio{position:absolute;left:12px;top:12px}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item .value{border:1px solid #dbdbdb;border-radius:4px;height:40px;padding:8px 8px 8px 36px;margin:0;max-width:100%;width:100%;display:flex;align-items:center;justify-content:space-between;pointer-events:none}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item .value .name{color:#747576;font-size:11px;font-weight:500;text-transform:uppercase}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item .value input{border:1px solid #dcdcdc;background:#fff;border-radius:4px;height:24px;width:64px;text-align:center;padding:4px;color:#747576;font-size:13px}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item .value input:focus{outline:none;box-shadow:none}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item input:checked~svg{position:absolute;left:12px;top:12px}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item input:checked~.value{border:1px solid #34aa44;background:#eefcf0;pointer-events:auto}::ng-deep .workflw-compliance .sample-part .or{color:#161b2f;font-size:9px;font-weight:500;text-transform:uppercase;margin:0 10px}::ng-deep .workflw-compliance .sample-part.disabled{pointer-events:none}::ng-deep .workflw-compliance .sample-part.disabled .sample-radio .radio-item .value{background:#fbfbfb;border:1px solid #f1f1f1}::ng-deep .workflw-compliance .reminder-part{border:1px solid #dbdbdb;border-radius:4px;height:40px;padding:4px 12px;color:#747576;font-size:12px;display:flex;align-items:center}::ng-deep .workflw-compliance .reminder-part input{width:30px;border:none;border-radius:0;border-bottom:1px solid #dbdbdb;text-align:center;color:#747576;font-size:13px;font-weight:500;margin:0 4px}::ng-deep .workflw-compliance .reminder-part input:focus{outline:none!important;box-shadow:none!important}::ng-deep .workflw-compliance .reminder-part .picker-group{position:relative}::ng-deep .workflw-compliance .reminder-part .picker-group input{border:1px solid #f1f1f1!important;border-radius:4px!important;width:104px!important;height:28px!important;margin-left:8px!important;padding:6px 8px!important;cursor:pointer;color:#747576!important;font-size:12px!important;font-weight:500!important;text-align:left!important}::ng-deep .workflw-compliance .reminder-part .picker-group input:hover,::ng-deep .workflw-compliance .reminder-part .picker-group input:focus{outline:none!important;box-shadow:none!important}::ng-deep .workflw-compliance .reminder-part .picker-group i{color:#1e5dd3;position:absolute;top:6px;right:10px;font-size:16px}.assessment-text{color:#747576;font-size:11px;display:flex;align-items:center;padding:0 8px;margin:-16px 0 20px}.assessment-text i.alert-icon{color:#f2bf19;font-size:16px;margin-right:8px}.assessment-text strong{font-weight:600}.assessment-text button.remove-btn{background:transparent;border-radius:0;border:none;color:#1e5dd3;font-size:10px;font-weight:600;padding:0;margin:0}.import{position:fixed;inset:0 30px 0 0;z-index:-1;width:calc(100vw - 30px)}.wf-action-list ul.action-item li.multiple-program{background:#f8f8f8}.wf-action-list ul.action-item li.multiple-program .avatar-card{padding:2px 7.5px}.wf-action-list ul.action-item li.multiple-program .avatar-card span.value{color:#747576;font-size:11px;font-weight:600;width:unset}.primary-label{background:#7aa7f7;border-radius:2px;color:#fff;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 4px;line-height:12px;margin:0 4px}.edit-due-date{display:flex;align-items:baseline;justify-content:space-between}.left-side{color:#707070}.right-side button{border-radius:2px;height:24px;background:#1e5dd3!important;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;font-weight:500;border:none!important;padding:0 8px;margin:0 0 0 8px}.right-side button i{margin-left:8px;font-size:11px}.right-side button:disabled{background:#f1f1f1!important;color:#747576!important;opacity:1}.right-side button.cancelBtn{background:transparent!important;color:#eb2424!important}.selected-count-box{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem;position:relative}.selected-text{color:#707070;font-size:11px;font-weight:500;position:fixed;padding-left:2.5rem}::ng-deep .vc-divider{border-top:.5px solid #dbdbdb;width:100%}::ng-deep .vc-cf-container{border-bottom:1px solid #E3E3E9}::ng-deep .vc-cf-container:first-of-type,::ng-deep .vc-cf-container:only-child{border-top:1px solid #E3E3E9}::ng-deep .vc-cf-container .cf-name{width:9.25rem}::ng-deep .vc-cf-container .cf-value{width:calc(100% - 9.75rem)}::ng-deep .vc-cf-container .cf-value input{height:24px!important;border:1px solid #CDCED6!important;padding:0 .5rem!important;color:#565a6f!important;font-size:11px!important}::ng-deep .vc-cf-container .cf-value input::placeholder{color:#a9aab6!important}::ng-deep .vc-cf-container .cf-value input:hover{border-color:#343952!important}::ng-deep .vc-cf-container .cf-value input:focus{outline:none;border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd31a}\n", "@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::-webkit-scrollbar-track{background-color:#f1f1f1;position:absolute}::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}button{font-family:Poppins,sans-serif}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;font-size:13px;color:#747576;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField::placeholder{font-size:13px;color:#747576}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxEnable.withBtn:after{display:none}::ng-deep .selectBoxEnable.withBtn button.setBtn{background:transparent;border-radius:0;border:none;min-width:98px}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer .chipName.no-width{max-width:unset}::ng-deep .chipContainer .chipName.full-width{max-width:25rem}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}::ng-deep .chipContainer button.countBtn.blueBg{background:#1e5dd3}::ng-deep .workflowLavel{background:#f1f1f1;border-radius:.125rem;color:#042e7d;min-width:1rem;height:1rem}::ng-deep .reviewSelection{border-radius:.25rem;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep .reviewSelection:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectButton{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectButton:hover,::ng-deep .selectButton:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep button.createNewBtn{background:transparent;border-radius:0;border:none}::ng-deep .vx-form-group{display:block;position:relative;margin-bottom:20px}::ng-deep .vx-form-group:after{content:\"\";display:block;clear:both}::ng-deep .vx-form-group .select{position:relative}::ng-deep .vx-form-group .select:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#707070;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .vx-form-group .select input{cursor:pointer;padding-right:30px!important}::ng-deep .vx-form-group .select .custom-input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;outline:none;padding:3px 12px;line-height:16px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .vx-form-group .select .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:13px;width:94%;display:block;pointer-events:none;opacity:.8}::ng-deep .vx-form-group .select .custom-input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .vx-form-group .select .custom-input.frequency-custom-input{padding-right:108px;display:flex;align-items:center}::ng-deep .vx-form-group .select+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .select+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .select+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .select~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .select.button-sec:after{display:none}::ng-deep .vx-form-group .select.button-sec button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;position:absolute;top:12px;right:8px;padding:0;margin:0}::ng-deep .vx-form-group .select+.vx-control-panel{margin-top:8px}::ng-deep .vx-form-group .select+.selected{margin-top:8px}::ng-deep .vx-form-group .select.select{margin-top:8px}::ng-deep .vx-form-group .upload-format{border:1px solid #dbdbdb;border-radius:4px;padding:8px 12px;display:block}::ng-deep .vx-form-group .upload-format span.text{line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:block;margin-bottom:6px}::ng-deep .vx-form-group .upload-format .radio-group{display:flex}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio{display:inline-block}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;margin-left:8px}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio+app-cs-radio{margin-left:12px}::ng-deep .vx-form-group .upload-format~.upload-format{margin-top:4px}::ng-deep .vx-form-group .form-tab{display:flex;justify-content:flex-start}::ng-deep .vx-form-group .form-tab button{background:transparent;color:#161b2f;font-size:11px;line-height:16px;text-transform:uppercase;cursor:pointer;padding:8px 8px 8px 0;border:none;outline:none;font-weight:500}::ng-deep .vx-form-group .form-tab button:disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .form-tab button+button{padding:8px}::ng-deep .vx-form-group .form-tab button.active{color:#1e5dd3}::ng-deep .vx-form-group .tab-group{border:1px solid #dbdbdb;border-radius:4px;padding:0;display:block;position:relative;transition:all .2s ease-in-out}::ng-deep .vx-form-group .tab-group:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group .tab-group .upload-file{padding:16px 62px 16px 24px;display:flex;align-items:center;justify-content:space-between}::ng-deep .vx-form-group .tab-group .upload-file .image{width:80px}::ng-deep .vx-form-group .tab-group .upload-file .browse span{display:inline-block;font-size:12px;color:#747576;line-height:16px;padding:0 4px}::ng-deep .vx-form-group .tab-group .upload-file .browse .label{font-size:11px;color:#1e5dd3;line-height:16px;font-weight:600;text-transform:uppercase;margin:0;padding:0}::ng-deep .vx-form-group .tab-group .upload-file .browse .label input{opacity:0;position:absolute;margin:0;padding:0;inset:0;cursor:pointer;width:100%}::ng-deep .vx-form-group .tab-group.active{border-color:#1e5dd3}::ng-deep .vx-form-group .tab-group.uploaded{margin-top:4px}::ng-deep .vx-form-group .tab-group.uploaded .upload-file{padding:8px 0!important;text-align:center}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .image{display:none}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .browse{width:100%;text-align:center}::ng-deep .vx-form-group .tab-group+label.vx-form-group{margin-top:8px;margin-bottom:4px}::ng-deep .vx-form-group .file-list{background:#fbfbfb;border:1px solid #f1f1f1;border-radius:4px;padding:12px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;position:relative}::ng-deep .vx-form-group .file-list span.file-name{color:#747576;line-height:16px;font-size:11px;font-weight:400;cursor:pointer;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .vx-form-group .file-list .button-group{display:flex}::ng-deep .vx-form-group .file-list button{font-size:12px;color:#eb2424;cursor:pointer;display:flex;padding:0;border:none;outline:none;background:transparent}::ng-deep .vx-form-group .file-list button.edit{color:#1e5dd3}::ng-deep .vx-form-group .file-list button+button{margin-left:16px}::ng-deep .vx-form-group .file-list+.file-list{margin-top:4px}::ng-deep .vx-form-group .file-list .file-container{display:flex;justify-content:space-between;width:100%}::ng-deep .vx-form-group .file-list.policy{background:#fff}::ng-deep .vx-form-group .file-list cs-select{position:relative;margin-top:8px;width:100%}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group input.value{height:32px!important;font-size:13px!important}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group i{right:12px!important;top:12px!important}::ng-deep .vx-form-group .file-list app-line-loader{display:block;position:absolute;left:10px;right:10px;bottom:0}::ng-deep .vx-form-group label.vx-control-panel{color:#161b2f;font-size:11px;font-weight:500;line-height:16px;margin-bottom:8px;display:block;text-transform:uppercase;text-align:left}::ng-deep .vx-form-group label.vx-control-panel.custom-tag{font-size:10px}::ng-deep .vx-form-group label.vx-control-panel.vx-mt-8{margin-top:8px}::ng-deep .vx-form-group label.vx-control-panel span.required{color:#eb2424;font-size:14px;font-weight:500;position:relative;top:-2px}::ng-deep .vx-form-group label.vx-control-panel .button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;padding:0;margin:0}::ng-deep .vx-form-group label.vx-control-panel app-cs-switch{float:right;display:block}::ng-deep .vx-form-group label.vx-control-panel i{margin-left:8px;font-size:12px;color:#1e5dd3;cursor:pointer;position:relative;top:1px}::ng-deep .vx-form-group label.vx-control-panel i.depreciation-icon{color:#e4b700;font-size:16px;position:relative;top:3px}::ng-deep .vx-form-group label.vx-control-panel .checkpoint-version{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:10px;font-weight:600;line-height:14px;margin-left:4px;padding:0 2px}::ng-deep .vx-form-group input[type=text],::ng-deep .vx-form-group .input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;outline:none;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400}::ng-deep .vx-form-group input[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group input[type=text]:focus,::ng-deep .vx-form-group .input:focus,::ng-deep .vx-form-group input[type=text]:hover,::ng-deep .vx-form-group .input:hover{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group input[type=text].error,::ng-deep .vx-form-group .input.error{border-color:#eb2424;color:#eb2424;margin-bottom:4px}::ng-deep .vx-form-group input[type=text].error:focus,::ng-deep .vx-form-group .input.error:focus{box-shadow:0 0 5px #d31e1e45}::ng-deep .vx-form-group input[type=text]:disabled,::ng-deep .vx-form-group .input:disabled{background:#f1f1f1;cursor:not-allowed;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group input[type=text]:disabled:hover,::ng-deep .vx-form-group .input:disabled:hover{border-color:#dbdbdb;box-shadow:none}::ng-deep .vx-form-group input[type=text] span.text,::ng-deep .vx-form-group .input span.text{font-size:13px;color:#747576;font-weight:400;display:block;width:100%}::ng-deep .vx-form-group input[type=text] .input-group,::ng-deep .vx-form-group .input .input-group{display:flex;align-items:center}::ng-deep .vx-form-group input[type=text] .input-group.counter,::ng-deep .vx-form-group .input .input-group.counter{min-width:96px;width:96px}::ng-deep .vx-form-group input[type=text] .input-group.counter button,::ng-deep .vx-form-group .input .input-group.counter button{height:24px;width:24px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#747576;font-size:8px;cursor:pointer;outline:none}::ng-deep .vx-form-group input[type=text] .input-group.counter input,::ng-deep .vx-form-group .input .input-group.counter input{-webkit-appearance:textfield;-moz-appearance:textfield;height:24px;width:calc(100% - 48px);border:1px solid #f1f1f1;outline:none;padding:0 6px;text-align:center}::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-outer-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-outer-spin-button{appearance:none;margin:0}::ng-deep .vx-form-group input[type=text]+.file-list,::ng-deep .vx-form-group .input+.file-list{margin-top:8px}::ng-deep .vx-form-group input[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]:-ms-input-placeholder,::ng-deep .vx-form-group .input:-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]::-ms-input-placeholder,::ng-deep .vx-form-group .input::-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group .classification{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;padding:8px 12px;display:flex;justify-content:space-between}::ng-deep .vx-form-group .classification label{margin:0 4px 0 0;width:100%;position:relative;z-index:1}::ng-deep .vx-form-group .classification label span{display:block;width:100%;height:24px;border:1px solid #f1f1f1;border-radius:2px;line-height:24px;font-size:10px;text-align:center;color:#747576;font-weight:500;position:relative;text-transform:uppercase}::ng-deep .vx-form-group .classification label span:before{height:2px;content:\"\";top:0;right:0;left:0;border-radius:2px;position:absolute;transition:all .2s ease-in-out}::ng-deep .vx-form-group .classification label input{opacity:0;position:absolute;inset:0;margin:0;padding:0;width:100%;height:100%;cursor:pointer;z-index:1}::ng-deep .vx-form-group .classification label input:checked+span{color:#fff}::ng-deep .vx-form-group .classification label input:checked+span:before{bottom:0;height:100%;z-index:-1}::ng-deep .vx-form-group .classification label.low span:before{background:#34aa44}::ng-deep .vx-form-group .classification label.low-med span:before{background:#f2bf19}::ng-deep .vx-form-group .classification label.med-high span:before{background:#f29619}::ng-deep .vx-form-group .classification label.high span:before{background:#eb2424}::ng-deep .vx-form-group .classification label:last-of-type{margin-right:0}::ng-deep .vx-form-group .input{display:flex;align-items:center}::ng-deep .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;padding:8px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:flex;align-items:center;position:relative;justify-content:space-between}::ng-deep .vx-form-group .selected.first-field{z-index:2}::ng-deep .vx-form-group .selected .chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .vx-form-group .selected .chip-container.checkpoints{width:calc(100% - 120px)}::ng-deep .vx-form-group .selected .chip-container span.chip{background:#fff;border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;padding:0 8px;color:#1e5dd3;font-size:12px;display:block;width:auto;max-width:100%;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .vx-form-group .selected .chip-container span.chip.disabled{background:#f1f1f1;box-shadow:none;color:#747576;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .selected .chip-container span.chip i{font-weight:400;margin-right:8px;cursor:pointer;font-size:10px;position:relative;top:1px}::ng-deep .vx-form-group .selected .chip-container span.chip span.step{background:#1e5dd3;border-radius:2px;color:#fff;font-size:9px;line-height:14px;padding:0 4px;font-weight:400;text-align:center;min-width:auto;margin-right:4px}::ng-deep .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question{display:flex;align-items:center;justify-content:space-between;width:100%}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.value{color:#1e5dd3;font-size:12px;font-weight:400;line-height:24px;padding:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 80px)}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.label{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding-left:4px;padding-right:4px;line-height:12px;margin-left:8px}::ng-deep .vx-form-group .selected .chip-container span.value{color:#747576;font-size:13px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 52px);padding:0 4px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text{color:#747576;font-size:10px;font-weight:500;padding:0 8px;width:122px;line-height:14px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first{position:relative;min-width:162px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first:before{background:#f1f1f1;content:\"\";position:absolute;top:0;right:0;height:calc(100% + 12px);width:1px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text .no{color:#1e5dd3}::ng-deep .vx-form-group .selected .chip-container.plus span.chip{max-width:calc(50% - 35px)}::ng-deep .vx-form-group .selected .chip-container.more-one span.chip{max-width:50%}::ng-deep .vx-form-group .selected .chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .vx-form-group .selected .chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:100px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count{border-radius:20px;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .vx-form-group .selected .chip-container .chip-inner i.cross{cursor:pointer;position:relative;top:1px;font-size:8px}::ng-deep .vx-form-group .selected button.count{background:#1e5dd3;border-radius:2px;height:24px;padding:0 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none;color:#fff;font:13px;font-weight:500;line-height:20px;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit{border:none;border-radius:0;background:transparent;outline:none;cursor:pointer;display:block;font-size:11px;font-weight:600;color:#1e5dd3;text-transform:uppercase;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit i{font-weight:400;font-size:8px;margin-right:4px}::ng-deep .vx-form-group .selected button.close-btn{background:transparent;border:none;padding:0;margin-left:8px;font-size:10px;color:#c7381b;display:flex;align-items:center}::ng-deep .vx-form-group .selected .workflow-label{min-width:92px;padding:4px;text-align:center;margin-left:-8px;margin-right:8px;border-right:1px solid #f1f1f1}::ng-deep .vx-form-group .selected .workflow-label p{margin:0;display:block;text-transform:uppercase}::ng-deep .vx-form-group .selected .workflow-label p.title{font-size:9px;line-height:12px;color:#161b2f;font-weight:500}::ng-deep .vx-form-group .selected .workflow-label p.description{font-size:11px;line-height:16px;color:#161b2f;font-weight:600}::ng-deep .vx-form-group .selected .workflow-label+.chip-container{width:calc(100% - 148px)}::ng-deep .vx-form-group .selected+.selected{margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .selected+app-cs-switch.who-toggle label.cs-switch span.value{color:#747576}::ng-deep .vx-form-group .selected+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .selected~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .selected.readOnly{pointer-events:none}::ng-deep .vx-form-group .selected span.chip{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .vx-form-group .select-list{position:absolute;background:#fff;box-shadow:0 0 5px #1e5dd345;top:100%;right:0;left:0;z-index:2}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item{width:100%;padding:12px 16px}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item:hover{background:#f8f8f8}::ng-deep .vx-form-group ::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;line-height:38px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400;border:none;padding:0 12px 0 34px;outline:none}::ng-deep .vx-form-group .date-time-picker .picker-group input:focus,::ng-deep .vx-form-group .date-time-picker .picker-group input:hover{box-shadow:none;border:none}::ng-deep .vx-form-group .date-time-picker .picker-group input::placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input:-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input::-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group i{display:flex;justify-content:center;align-items:center;height:16px;width:12px;position:absolute;left:12px;top:0;color:#747576;font-size:12px;pointer-events:none}::ng-deep .vx-form-group app-cs-radio.main-filed{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;color:#707070}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group app-cs-radio.disabled{pointer-events:none;opacity:.5;filter:grayscale(1);background:#f1f1f1}::ng-deep .vx-form-group .switch-row{display:flex}::ng-deep .vx-form-group .switch-row app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:0;text-transform:uppercase;color:#747576!important}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value i{display:inline-flex;font-size:11px;cursor:pointer;color:#1e5dd3;align-items:center;line-height:16px;margin:0 4px}::ng-deep .vx-form-group .switch-row app-cs-switch+app-cs-switch{margin-left:8px}::ng-deep .vx-form-group .switch-row.align-right{justify-content:flex-end}::ng-deep .vx-form-group .switch-row.align-right label.cs-switch span.value{margin-right:8px}::ng-deep .vx-form-group .risk-type-field{background:#f8f8f8;border:1px solid #dbdbdb;border-radius:4px;height:40px;display:flex;align-items:center;padding:4px;position:relative;z-index:1}::ng-deep .vx-form-group .risk-type-field .type-item{width:50%;position:relative}::ng-deep .vx-form-group .risk-type-field .type-item button{background:transparent;border:none;border-radius:0;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase;width:100%;height:32px;padding:0 12px;text-align:left}::ng-deep .vx-form-group .risk-type-field .type-item button.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item .info{color:#1e5dd3;font-size:12px;position:absolute;top:10px;right:12px;cursor:pointer}::ng-deep .vx-form-group .risk-type-field .type-item .info.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item.active button{color:#1e5dd3!important}::ng-deep .vx-form-group .risk-type-field .type-item:nth-child(2).active~.background-glider{transform:translate(100%)}::ng-deep .vx-form-group .risk-type-field .background-glider{background:#fff;border-radius:4px;box-shadow:0 1px 3px #161b2f26;position:absolute;display:flex;width:212px;height:32px;z-index:-1;transition:.25s ease-out}.left{width:36px;height:36px;margin-top:26px;margin-left:-58px;margin-right:20px;display:flex;justify-content:center;align-items:center;position:relative;z-index:10;border-radius:50%}.left.deadline-completed{margin-top:18px}.left.checked{background:transparent}.left img{width:36px}.left .checkIcon{width:32px;height:32px;background:#fff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}.left .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}.left .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}.right{width:100%}.right span.indicator{position:absolute;top:36px;left:-16px;font-size:12px;color:#f0b819;cursor:pointer}.form-group-row{display:flex;position:relative;transition:all .2s ease-in-out}.form-group-row.disabled{-webkit-user-select:none;user-select:none;pointer-events:none;filter:grayscale(1);z-index:2}.form-group-row.disabled .left{position:relative}.form-group-row.disabled .left:before{content:\"\";position:absolute;inset:2px 0 0 2px;background:#fff;opacity:.7;border-radius:50%;width:32px;height:32px}.form-group-row.disabled .right{opacity:.3}.form-group-row.active{pointer-events:none;filter:grayscale(0);z-index:2;opacity:1}.form-group-row.active .right .vx-form-group input,.form-group-row.active .right .vx-form-group .custom-input,.form-group-row.active .right .vx-form-group .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}.form-group-row.active .right .vx-form-group .selectBoxEnable.disabled{border-color:#dbdbdb;box-shadow:none}::ng-deep .radio-group-selector app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .radio-group-selector app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .radio-group-selector app-cs-radio label.radio-item .radio,::ng-deep .radio-group-selector app-cs-radio label.radio-item .radiomark{position:absolute!important;top:9px;left:12px}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value{font-size:11px!important;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0!important;max-width:100%!important;font-weight:500!important;color:#707070!important}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value i{font-size:12px;color:#1e5dd3}::ng-deep .radio-group-selector app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}::ng-deep .wf-action-list{width:220px}::ng-deep .wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}::ng-deep .wf-action-list ul.action-item{display:block}::ng-deep .wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}::ng-deep .wf-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}::ng-deep .wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .wf-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .wf-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .wf-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .wf-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .wf-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}::ng-deep .wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}p.error-message{font-size:11px;font-weight:400;color:#eb2424;line-height:16px;margin-top:8px;margin-bottom:0}.edit-loader{position:absolute;top:-3px;left:-3px;width:46px;height:46px;transform:rotate(180deg)}.circular-loader{animation:rotate 2s linear infinite;height:100%;transform-origin:center center;width:100%;position:absolute;top:0;left:0;margin:auto}.loader-path{stroke-dasharray:150,200;stroke-dashoffset:-10;animation:dash 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35}to{stroke-dasharray:89,200;stroke-dashoffset:-124}}::ng-deep .dropdown{position:fixed;background:#fff;box-shadow:0 3px 6px #00000029;padding:24px 0;z-index:9;max-height:calc(100vh - 200px);overflow:auto}::ng-deep .dropdown ul.dropdown-list{padding:0 20px;margin:0;display:block}::ng-deep .dropdown ul.dropdown-list li{list-style:none}::ng-deep .dropdown ul.dropdown-list li app-cs-radio{display:flex}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.radio{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.value{padding:11px 12px 11px 32px;width:100%;border:1px solid #bcbcbc;border-radius:4px;margin-left:0;max-width:100%}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item svg{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item input[type=radio]:checked~span.value{background:#e8feeb;border-color:#34aa44}::ng-deep .dropdown ul.dropdown-list li+li{margin-top:8px}app-smiley-dialog{position:relative;z-index:10}app-smiley-dialog-inline{position:absolute;top:-3px;right:0;bottom:0;z-index:999;width:520px;height:calc(100vh + 3px)}::ng-deep .vx-overlay{position:fixed;z-index:3;inset:0}::ng-deep dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}::ng-deep dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}::ng-deep dp-date-picker input:focus{outline:none}::ng-deep dp-date-picker .dp-popup{width:412px;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep dp-date-picker .dp-popup dp-day-calendar,::ng-deep dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep dp-date-picker .dp-popup dp-day-calendar button,::ng-deep dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}::ng-deep dp-date-picker .dp-open+div{position:fixed!important;inset:0!important;display:flex;justify-content:center;align-items:center;z-index:99;pointer-events:none;background:#0000004d}::ng-deep .cdk-overlay-container{z-index:2147483002!important}::ng-deep .dp-popup{z-index:999;display:flex!important;align-items:center;justify-content:center;width:100vw;height:100vh;background:#0000004d!important;box-shadow:unset!important}::ng-deep .dp-popup dp-day-calendar{width:412px!important;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep .dp-popup dp-day-calendar,::ng-deep .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep .dp-popup dp-day-calendar button,::ng-deep .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep .dp-popup dp-day-calendar .dp-weekdays,::ng-deep .dp-popup dp-month-calendar .dp-weekdays,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}@keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}::ng-deep span.file{display:block;width:20px;min-width:20px;border-radius:0 0 2px 2px;border:1px solid transparent;border-color:#747576;position:relative;margin-right:5px;border-top:none;margin-top:5px;background:#fff}::ng-deep span.file.table{margin-right:8px;width:18px;min-width:18px}::ng-deep span.file.table i{font-size:8px}::ng-deep span.file.table .format{height:8px;font-size:7px;line-height:8px;font-weight:400}::ng-deep span.file:before{position:absolute;border-radius:0;top:-4px;right:-1px;content:\"\";height:4px;width:4px;display:block;background:linear-gradient(45deg,#747576 0% 1%,#747576 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file:after{height:4px;left:-1px;right:3px;border-top:1px solid;border-right:none;border-left:1px solid;content:\"\";top:-4px;position:absolute;border-radius:2px 0 0;background:#fff}::ng-deep span.file .format{height:10px;font-size:6px;text-transform:uppercase;background:transparent;font-weight:600;text-align:center;display:block;line-height:10px}::ng-deep span.file i{font-size:10px;height:10px;display:flex;align-items:center;justify-content:center;color:#dbdbdb}::ng-deep span.file.docx{width:22px!important}::ng-deep span.file.pdf,::ng-deep span.file.template{border-color:#f31c39}::ng-deep span.file.pdf:before,::ng-deep span.file.template:before{background:linear-gradient(45deg,#f31c39 0% 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#f31c39\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.pdf:after,::ng-deep span.file.template:after{border-color:#f31c39}::ng-deep span.file.pdf .format,::ng-deep span.file.template .format{color:#f31c39}::ng-deep span.file.xlsx,::ng-deep span.file.xls,::ng-deep span.file.css,::ng-deep span.file.scss,::ng-deep span.file.less{border-color:#34aa44}::ng-deep span.file.xlsx:before,::ng-deep span.file.xls:before,::ng-deep span.file.css:before,::ng-deep span.file.scss:before,::ng-deep span.file.less:before{background:linear-gradient(45deg,#34aa44 0% 1%,#34aa44 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.xlsx:after,::ng-deep span.file.xls:after,::ng-deep span.file.css:after,::ng-deep span.file.scss:after,::ng-deep span.file.less:after{border-color:#34aa44;color:#34aa44}::ng-deep span.file.xlsx .format,::ng-deep span.file.xls .format,::ng-deep span.file.css .format,::ng-deep span.file.scss .format,::ng-deep span.file.less .format{color:#34aa44}::ng-deep span.file.doc,::ng-deep span.file.docx,::ng-deep span.file.psd{border-color:#1e5dd3}::ng-deep span.file.doc:before,::ng-deep span.file.docx:before,::ng-deep span.file.psd:before{background:linear-gradient(45deg,#1e5dd3 0% 1%,#1e5dd3 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.doc:after,::ng-deep span.file.docx:after,::ng-deep span.file.psd:after{border-color:#1e5dd3}::ng-deep span.file.doc .format,::ng-deep span.file.docx .format,::ng-deep span.file.psd .format{color:#1e5dd3}::ng-deep span.file.ppt,::ng-deep span.file.ai,::ng-deep span.file.html,::ng-deep span.file.jpg,::ng-deep span.file.jpeg,::ng-deep span.file.png{border-color:#f6882f}::ng-deep span.file.ppt:before,::ng-deep span.file.ai:before,::ng-deep span.file.html:before,::ng-deep span.file.jpg:before,::ng-deep span.file.jpeg:before,::ng-deep span.file.png:before{background:linear-gradient(45deg,#f6882f 0% 1%,#f6882f 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.ppt:after,::ng-deep span.file.ai:after,::ng-deep span.file.html:after,::ng-deep span.file.jpg:after,::ng-deep span.file.jpeg:after,::ng-deep span.file.png:after{border-color:#f6882f}::ng-deep span.file.ppt .format,::ng-deep span.file.ai .format,::ng-deep span.file.html .format,::ng-deep span.file.jpg .format,::ng-deep span.file.jpeg .format,::ng-deep span.file.png .format{color:#f6882f}::ng-deep span.file.php{border-color:#7aa6f7}::ng-deep span.file.php:before{background:linear-gradient(45deg,#7aa6f7 0% 1%,#7aa6f7 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.php:after{border-color:#7aa6f7}::ng-deep span.file.php .format{color:#7aa6f7}::ng-deep ngx-material-timepicker-container .timepicker-backdrop-overlay{background-color:#0000000d!important;z-index:9999999999!important}::ng-deep ngx-material-timepicker-container .timepicker-overlay{z-index:9999999999!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker{width:232px!important;border-radius:2px!important;box-shadow:0 4px 30px #161b2f26!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header{background-color:#fff!important;padding:0!important;border-radius:2px 2px 0 0}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container{display:block!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time{color:#000!important;width:150px!important;margin:0 auto;line-height:60px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control{font-size:40px;background-color:transparent!important;color:#000!important;font-weight:600;text-align:right;caret-color:transparent;outline:none;font-family:Poppins;line-height:56px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:focus,::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:hover{background-color:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control:last-of-type .timepicker-dial__control{text-align:left}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time span{padding:0 8px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period{display:flex!important;width:182px;margin:0 auto!important;background:#f1f1f1;padding:4px 10px;border-radius:20px;position:relative}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period:before{background:#f1f1f1;content:\"\";position:absolute;top:15px;left:-25px;width:calc(100% + 50px);height:2px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period{flex-direction:unset!important;position:relative;z-index:1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:after{content:\"\";position:absolute;right:-12px;top:0;border-left:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:before{content:\"\";position:absolute;left:-18px;top:0;border-right:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button{font-size:11px;background-color:transparent;padding:0;border-radius:20px;color:#747576;font-weight:600;font-family:Poppins;width:84px;height:24px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button.timepicker-dial__item_active{background:#fff!important;color:#1e5dd3!important;box-shadow:0 1px 2px #dbdbdb}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button+button{margin-left:0!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face{width:200px!important;height:200px!important;padding:10px!important;background:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer{height:92px!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span{color:#000}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span.active{color:#fff}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand{height:80px!important;top:calc(50% - 80px)!important;background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number>span.active{background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand_minute:before{border:4px solid #1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions{display:flex!important;padding:10px 0 0!important;background:#fff!important;justify-content:space-around!important;border-radius:0 0 2px 2px!important;overflow:hidden}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div:first-child ngx-material-timepicker-button button.timepicker-button{background:#f8f8f8;color:#1e5dd3}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button{line-height:28px!important;width:100%;background:#1e5dd3;color:#fff;border-radius:0!important;height:32px!important;width:116px!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button span{font-weight:500!important;font-size:11px;font-family:Poppins}::ng-deep vcomply-editor{display:block}::ng-deep vcomply-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep vcomply-editor .editor-container:hover,::ng-deep vcomply-editor .editor-container:focus-within{border:1px solid #1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep vcomply-editor .editor-container mention-list ul li a{font-size:16px!important}::ng-deep vcomply-editor .editor-container .editable-block{background:#fff;min-height:60px;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep vcomply-editor .editor-container .editable-block:before{color:#747576!important}::ng-deep vcomply-editor .editor-container .editor-tools{border-top:1px solid #dbdbdb;border-radius:0 0 3px 3px}::ng-deep vcomply-editor .editor-container .editor-tools:hover{border-color:#1e5dd3}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep marx-modal .popup-modal-background{background-color:#161b2fcc!important}::ng-deep .within-box{background:#f1f1f1;border-radius:.125rem;color:#042e7d}::ng-deep .within-value{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-word}.wf-tooltip{pointer-events:none;position:absolute;max-width:300px;font-size:12px;text-align:left;color:#fff;padding:8px 12px;background:#000;border-radius:2px;z-index:-222;top:0;opacity:0;white-space:break-spaces;word-break:break-word}.wf-tooltip *{color:#fff!important}.wf-tooltip:empty{display:none!important}.wf-tooltip.white{box-shadow:0 2px 8px #1c5bd159;color:#747576;background:#fff;text-align:left}.wf-tooltip.white b{color:#747576!important}.wf-tooltip.animate-top{animation:animate-top .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-right{animation:animate-right .3s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-bottom{animation:animate-bottom .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-left{animation:animate-left .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip-top:after{top:100%;left:50%;margin-left:-5px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip-bottom:after{bottom:100%;left:50%;margin-left:-5px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-left.white:after{border-color:transparent transparent transparent #f1f1f1}.wf-tooltip-left:after{top:50%;left:100%;margin-top:-5px;border-width:5px;border-color:transparent transparent transparent #000000}.wf-tooltip-right.white:after{border-color:transparent #f1f1f1 transparent transparent}.wf-tooltip-right:after{top:50%;right:100%;margin-top:-5px;border-width:5px;border-color:transparent #000000 transparent transparent}.wf-tooltip-bottom-right:after{bottom:100%;left:100%;margin-left:-20px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom-right.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-bottom-left:after{bottom:100%;left:0;margin-left:10px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom-left.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-top-left:after{top:100%;left:0;margin-left:10px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top-left.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip-top-right:after{top:100%;left:100%;margin-left:-5px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top-right.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip:after{content:\"\";position:absolute;border-style:solid}.wf-tooltip span.within{font-size:80%;display:block;width:100%}.wf-tooltip .small{display:block;font-size:10px}.wf-tooltip .within-box{background:#f1f1f1;border-radius:2px;color:#042e7d!important;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 2px;margin-right:2px}.wf-tooltip-show{pointer-events:none;opacity:1;z-index:2147483001}\n"], dependencies: [{ kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: CreateAssessmentContainerComponent, selector: "app-create-assessment-container", inputs: ["openPortal", "assessmentJSON", "checkpointJSON"], outputs: ["setIsUploaded", "postAssessment"] }, { kind: "component", type: i4.MarxEditorComponent, selector: "vcomply-editor", inputs: ["editorConfig"], outputs: ["comment", "sendSavedFiles", "popup"] }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value", "oneLine"], outputs: ["checkedEvent"] }, { kind: "component", type: CsSwitchComponent, selector: "app-cs-switch", inputs: ["disabled", "ngValue", "value", "tooltipMessage", "position"], outputs: ["ngValueChange"] }, { kind: "directive", type: ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closePopoverEvent"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$1.NgxMaterialTimepickerComponent, selector: "ngx-material-timepicker", inputs: ["cancelBtnTmpl", "editableHintTmpl", "confirmBtnTmpl", "ESC", "enableKeyboardInput", "preventOverlayClick", "disableAnimation", "appendToInput", "hoursOnly", "defaultTime", "timepickerClass", "theme", "min", "max", "ngxMaterialTimepickerTheme", "format", "minutesGap"], outputs: ["timeSet", "opened", "closed", "hourSelected", "timeChanged"] }, { kind: "directive", type: i5$1.TimepickerDirective, selector: "[ngxTimepicker]", inputs: ["format", "min", "max", "ngxTimepicker", "value", "disabled", "disableClick"] }, { kind: "component", type: LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "component", type: SmileyDialogInlineComponent, selector: "app-smiley-dialog-inline", inputs: ["message", "actionButtons"], outputs: ["action", "closeSmiley"] }, { kind: "directive", type: ClickOutsideDirective$1, selector: "[clickOutside]", outputs: ["clickOutside"] }, { kind: "component", type: UserGroupListComponent, selector: "user-group-list", inputs: ["groupEnabled", "panelTitle", "singleSelect", "selectedReviewer", "featureflag", "reviewerWorkflowType", "mode", "fieldType", "fromResponsibility", "assignorId", "assigneeIds", "reviewerIds", "overseerIds", "FromProgram", "userListInfo", "groupListInfo", "fromApprovalWorkflow", "approvalType", "showFutureUsersSwitch", "futureUsersWillSelect", "isAllDisabled", "isGroupTabShow", "disabledIds", "nonRemovableUserIds", "allUserSelectedDisabled", "nonRemovableGroupIds", "loading", "userlist", "selectedUsers", "defaultSelectedUsers", "userType", "groupList", "selectedGroups"], outputs: ["save", "cancel", "reviewerWorkflowTypeChange", "fetchUserData"] }, { kind: "component", type: ResponsibilityCentersListComponent, selector: "app-responsibility-centers-list", inputs: ["responsibilityCentersList", "selectedResponsibilityCenters", "rcIdKey", "radioSelection", "pluralText", "singularText", "loaded"], outputs: ["saveSelectedList", "closeRcList"] }, { kind: "component", type: GroupUsersListComponent, selector: "app-group-users-list", inputs: ["groupsEnabled", "usersList", "groupsList", "selectedUsers", "userIdKey", "groupIdKey", "openedFrom", "selectedGroups", "assigneeGroupsList", "disabledId", "fromResponsibility", "reviewerIds", "overseerIds", "assignorId", "loader", "isDisabledSelected"], outputs: ["saveSelectedList", "closeUsersList"] }, { kind: "component", type: GrcObjectListComponent, selector: "app-grc-object-list", inputs: ["grcObject", "currentPage", "loader", "tableCard", "selectedTab", "cardLoader", "onEditGRCId", "mode", "selectedGRC"], outputs: ["saveOtherGRC", "closeOtherGRC", "getOtherGRCObjects"] }, { kind: "component", type: FormatAndEvidenceComponent, selector: "app-format-and-evidence", inputs: ["mode", "categories", "organization_id", "orgDetails", "formatEvidanceData"], outputs: ["updateFiles"] }, { kind: "component", type: ProgramListComponent, selector: "app-program-list", inputs: ["items", "selectedItems", "url"], outputs: ["itemSelected", "itemDeselected", "itemsSelectedChange"] }, { kind: "component", type: OwnerListComponent, selector: "app-owner-list", inputs: ["usersList", "selectedUsers", "userIdKey", "itemNameKey", "itemEmailKey", "showWorkflow", "listHeading", "searchPlaceholder", "pluralText", "singularText", "reviewerWorkflowType", "mode", "noDataText", "workflowList", "workflowText", "disabledIds", "nonRemovableUsersList", "fromResponsibility", "assignorId", "assigneeIds", "reviewerIds", "overseerIds"], outputs: ["saveSelectedList", "closeUsersList", "reviewerWorkflowTypeChange"] }, { kind: "component", type: UserRadioListComponent, selector: "app-users-radio-list", inputs: ["usersList", "selectedUsers", "userIdKey", "itemNameKey", "itemEmailKey", "disabledId", "fromResponsibility", "reviewerIds", "overseerIds", "assignorId", "headerText", "loaded"], outputs: ["saveSelectedList", "closeUsersList"] }, { kind: "component", type: CategoryMultiSelectComponent, selector: "app-category-multi-select", inputs: ["categoryList", "allCategories", "categoryIdKey", "selectedCategories"], outputs: ["saveSelectedCategory", "closeList", "closeCategoriesList"] }, { kind: "component", type: CheckpointsComponent, selector: "app-checkpoints", inputs: ["checkpointData", "checkpointInstruction"], outputs: ["closeCheckPoint", "saveCheckPoint"] }, { kind: "component", type: ReviewFrequencyComponent, selector: "app-review-frequency", inputs: ["reviewCompleteDays", "reviewNOtCompletedDays"], outputs: ["closeReviewFrequency", "backToUserList", "saveReviewFrequency"] }, { kind: "component", type: FrequencyContainerComponent, selector: "app-frequency-container", inputs: ["frequencyDetails", "mode", "feature", "pageType", "onCompletionResponsibility"], outputs: ["selectedFrequency", "closeFrequency"] }, { kind: "component", type: FrameworkListComponent, selector: "app-framework-list", inputs: ["previousSelectedValues", "headerText", "workflowPage", "policy", "frameWorkList", "selectedFrameWork", "selectedCategories"], outputs: ["entrustFramework", "closeFramework", "assignControl"] }, { kind: "component", type: RiskClassificationComponent, selector: "app-risk-classification", inputs: ["currentRiskValue"], outputs: ["saveList", "closeList"] }, { kind: "component", type: AuditCategoryListComponent, selector: "app-audit-category-list", inputs: ["selectedData", "selectedIndex", "auditCategory"], outputs: ["closeList", "saveSelectedList"] }, { kind: "component", type: AssessmentListComponent, selector: "app-assessment-list", inputs: ["isEdit", "mode", "selectedAssessment", "selectedAssessmentData", "program_ids", "isFullScreen"], outputs: ["onAssessmentSelect", "cancelAssessment"] }, { kind: "component", type: ListContainerComponent, selector: "app-list-container", inputs: ["heading"], outputs: ["close"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1$1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: RefDisconnectPipe, name: "refDisconnect" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WorkflowComplianceComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-workflow-compliance', template: "<div class=\"workflw-compliance\" *ngIf=\"!showSmiley\">\n  <!-- Behalf -->\n  <div *ngIf=\"mode !== 'EDIT'\" class=\"form-group-row\" [class.active]=\"activeSelector === 'assignors'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'assignors' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"\n        responsibilityForm?.assignors?.list?.length > 0 &&\n        activeSelector !== 'assignors'\n      \">\n      <img [src]=\"ASSETS.im_creating\" alt=\"im\" *ngIf=\"\n          responsibilityForm?.assignors?.list?.length == 0 ||\n          activeSelector === 'assignors'\n        \" />\n\n      <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\" *ngIf=\"\n          responsibilityForm?.assignors?.list?.length > 0 &&\n          activeSelector !== 'assignors'\n        \">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">I am creating this responsibility on behalf of someone else\n          <app-cs-switch [ngValue]=\"responsibilityForm.assignors.enable\" (ngValueChange)=\"\n              responsibilityForm.assignors.enable = $event;\n              responsibilityForm.assignors.list = []\n            \">\n          </app-cs-switch>\n        </label>\n        <div class=\"select\" *ngIf=\"\n            responsibilityForm?.assignors?.list?.length === 0 ||\n            activeSelector === 'assignors'\n          \">\n          <input type=\"text\" (click)=\"activateSelector('assignors', true)\"\n            placeholder=\"Who is responsible for managing this responsibility?\" readonly\n            [disabled]=\"!responsibilityForm?.assignors?.enable\" />\n        </div>\n        <div class=\"selected\" *ngIf=\"\n            responsibilityForm?.assignors?.list?.length > 0 &&\n            activeSelector !== 'assignors'\n          \">\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n            <ng-container *ngFor=\"\n                let b_user of responsibilityForm?.assignors?.list?.slice(0, 1)\n              \">\n              <i (click)=\"remove('assignors', b_user)\"\n                class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"b_user.member_name\" placement=\"bottom-left\"\n                delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ b_user.member_name }}</span>\n            </ng-container>\n            <button *ngIf=\"responsibilityForm?.assignors?.list?.length > 1\"\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 (click)=\"behalf.popover()\" placement=\"right\">\n              +{{ responsibilityForm?.assignors?.list?.slice(1).length }}\n            </button>\n          </div>\n\n          <!-- <div class=\"chip-container\">\n                      <span class=\"chip\" *ngFor=\"let b_user of responsibilityForm?.assignors?.list?.slice(0,2)\"><i\n                              class=\"icons\" (click)=\"remove('assignors',b_user)\">&#xe90d;</i>\n                          {{b_user.member_name}}</span>\n                      <button class=\"count\" *ngIf=\"responsibilityForm?.assignors?.list?.length > 2\" type=\"button\"\n                          appPopover (click)=\"behalf.popover()\" placement=\"right\">+\n                          {{responsibilityForm?.assignors?.list?.slice(2).length}}</button>\n                  </div> -->\n          <button *ngIf=\"activeSelector !== 'assignors'\" class=\"edit\" type=\"button\"\n            (click)=\"activateSelector('assignors', true)\">\n            <i class=\"icons\">&#xe9ba;</i> Edit\n          </button>\n        </div>\n        <app-popover #behalf [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let b_user of responsibilityForm?.assignors?.list | slice : 2;\n                  let j = index\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i class=\"icons\" (click)=\"remove('assignors', b_user)\">&#xe90d;</i>\n                    {{ b_user.member_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n        <p *ngIf=\"invalidType === 'whom'\" [appScrollInView]=\"true\" class=\"error-message\">\n          Please select the person responsible for managing this responsibility.\n        </p>\n      </div>\n    </div>\n  </div>\n\n  <!-- What -->\n  <div class=\"form-group-row\" [class.active]=\"activeSelector === 'framework'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'responsibilityName' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"\n        responsibilityForm?.responsibility?.name.trim() !== '' &&\n        !focus.responsibilityName\n      \">\n      <img [src]=\"ASSETS.what\" alt=\"im\" *ngIf=\"\n          responsibilityForm?.responsibility?.name.trim() === '' ||\n          focus.responsibilityName\n        \" />\n\n      <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\" *ngIf=\"\n          responsibilityForm?.responsibility?.name.trim() !== '' &&\n          !focus.responsibilityName\n        \">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">\n          What? <span class=\"required\">*</span>\n          <button *ngIf=\"\n              isFrameworkAvailable &&\n              mode !== 'EDIT' &&\n              openedFrom !== 'RISK_TREATMENT' &&\n              assessmentDetails?.assessment_type !== 'compliance_audit'\n            \" (click)=\"activateSelector('framework', true)\" class=\"button\">\n            Select From A framework\n          </button>\n        </label>\n        <span *ngIf=\"responsibilityForm?.responsibility?.keyResponsibility\" class=\"indicator\"\n          [appTooltip]=\"'This responsibility is marked as key responsibility.'\" placement=\"bottom\" type=\"black\"\n          delay=\"0\" [tooltipMandatory]=\"true\">\n          <i class=\"icons\">&#xea70;</i>\n        </span>\n        <input *ngIf=\"\n            responsibilityForm?.responsibility?.name.trim() == '' || !isEditWhat\n          \" type=\"text\" [ngModel]=\"responsibilityForm.responsibility.name\" placeholder=\"What is the responsibility?\"\n          (change)=\"whatChanged($event)\" (focusin)=\"activateSelector('responsibilityName', true)\"\n          (focusout)=\"activeDeselector()\" (clickOutside)=\"testFunction()\" #what />\n        <div class=\"selected\" *ngIf=\"\n            responsibilityForm?.responsibility?.name.trim() != '' && isEditWhat\n          \">\n          <div class=\"chip-container\">\n            <span class=\"value\">{{\n              responsibilityForm.responsibility?.name\n              }}</span>\n          </div>\n          <button *ngIf=\"assessmentDetails?.assessment_type !== 'compliance_audit'\" class=\"edit\" type=\"button\"\n            (click)=\"onEditWhat($event)\">\n            <i class=\"icons\">&#xe9ba;</i> Edit\n          </button>\n        </div>\n        <p *ngIf=\"invalidType === 'what'\" [appScrollInView]=\"true\" class=\"error-message\">\n          Please enter a name for this responsibility.\n        </p>\n        <div class=\"switch-row align-right\">\n          <app-cs-switch [ngValue]=\"responsibilityForm.responsibility?.keyResponsibility\" (ngValueChange)=\"\n              responsibilityForm.responsibility.keyResponsibility = $event\n            \">Key Responsibility\n          </app-cs-switch>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Who -->\n  <div class=\"form-group-row\" [class.active]=\"activeSelector === 'assignees'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'assignees' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"\n        responsibilityForm?.assignees?.list?.length > 0 &&\n        activeSelector !== 'assignees'\n      \">\n      <img [src]=\"ASSETS.case_assignees\" alt=\"im\" *ngIf=\"\n          responsibilityForm?.assignees?.list?.length == 0 ||\n          activeSelector === 'assignees'\n        \" />\n\n      <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\" *ngIf=\"\n          responsibilityForm?.assignees?.list?.length > 0 &&\n          activeSelector !== 'assignees'\n        \">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <div class=\"edit-due-date\">\n          <label class=\"vx-control-panel\">Who? <span class=\"required\">*</span></label>\n          <div *ngIf=\"allowEditDueDateFeatureFlag && false\" class=\"switch-row align-right\">\n            <app-cs-switch [ngValue]=\"responsibilityForm.allowEditDueDate\"\n              (ngValueChange)=\"responsibilityForm.allowEditDueDate = $event\">ALLOW ASSIGNEE TO EDIT COMPLETED WORK<i\n                class=\"icons\" [appTooltip]=\"\n                  'If it\u2019s enabled, the assignee will have the option to modify a previously completed due date.'\n                \" placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i>\n            </app-cs-switch>\n          </div>\n        </div>\n        <div class=\"select vx-mt-0\" *ngIf=\"\n            responsibilityForm?.assignees?.list?.length == 0 &&\n            (!featureFlag_groups ||\n              (responsibilityForm?.assigneeGroups?.list?.length == 0 &&\n                featureFlag_groups))\n          \">\n          <input type=\"text\" (click)=\"activateSelector('assignees', true)\"\n            placeholder=\"Who is responsible for completing the responsibility?\" readonly />\n        </div>\n\n        <div class=\"selected\" *ngIf=\"\n            (responsibilityForm?.assignees?.list?.length > 0 &&\n              !featureFlag_groups) ||\n            ((responsibilityForm?.assignees?.list?.length > 0 ||\n              responsibilityForm?.assigneeGroups?.list?.length > 0) &&\n              featureFlag_groups)\n          \">\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"!featureFlag_groups\">\n            <ng-container *ngFor=\"\n                let e_user of responsibilityForm?.assignees?.list?.slice(0, 1)\n              \">\n              <i (click)=\"remove('assignees', e_user)\"\n                class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"e_user.member_name\" placement=\"bottom-left\"\n                delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ e_user.member_name }}</span>\n            </ng-container>\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 greenbg\"\n              appPopover (click)=\"assignees.popover()\" placement=\"right\"\n              *ngIf=\"responsibilityForm?.assignees?.list?.length > 1\">\n              +{{ responsibilityForm?.assignees?.list?.slice(1).length }}\n            </button>\n          </div>\n\n          <div class=\"vx-d-flex vx-align-center\" *ngIf=\"featureFlag_groups\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n              *ngIf=\"responsibilityForm?.assignees?.list?.length > 0\">\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"\n                  remove('assignees', responsibilityForm?.assignees?.list[0])\n                \">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"\n                  responsibilityForm?.assignees?.list[0]?.employee_name\n                \" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\">{{\n                responsibilityForm?.assignees?.list[0]?.employee_name\n                }}</span>\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 greenBg\"\n                appPopover (click)=\"user.popover()\" placement=\"left\"\n                *ngIf=\"responsibilityForm?.assignees?.list?.length > 1\">\n                +{{ responsibilityForm?.assignees?.list?.length - 1 }}\n              </button>\n            </div>\n            <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"\n                responsibilityForm?.assignees?.list?.length > 0 &&\n                responsibilityForm?.assigneeGroups?.list?.length > 0\n              \">&</span>\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n              *ngIf=\"responsibilityForm?.assigneeGroups?.list?.length\">\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"\n                  remove(\n                    'groupassignees',\n                    responsibilityForm?.assigneeGroups?.list[0]\n                  )\n                \">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"\n                  responsibilityForm?.assigneeGroups?.list[0]?.group_name\n                \" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\">{{\n                responsibilityForm?.assigneeGroups?.list[0]?.group_name\n                }}</span>\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 (click)=\"group.popover()\" placement=\"right\"\n                *ngIf=\"responsibilityForm?.assigneeGroups?.list?.length > 1\">\n                +{{ responsibilityForm?.assigneeGroups?.list?.length - 1 }}\n              </button>\n            </div>\n          </div>\n\n          <!-- <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.assignees?.length>1\" [class.plus]=\"responsibilityForm?.assignees?.length>2\" *ngIf=\"!featureFlag_groups\">\n                      <span class=\"chip\" *ngFor=\"let e_user of responsibilityForm?.assignees?.list?.slice(0,2)\"><i\n                              class=\"icons\" (click)=\"remove('assignees',e_user)\">&#xe90d;</i>\n                          {{e_user.member_name}}</span>\n                      <button class=\"count\" *ngIf=\"responsibilityForm?.assignees?.list?.length > 2\" type=\"button\"\n                          appPopover (click)=\"assignees.popover()\" placement=\"right\">+\n                          {{responsibilityForm?.assignees?.list?.slice(2).length}}</button>\n                  </div> -->\n          <!-- <div class=\"chip-container\" *ngIf=\"featureFlag_groups\">\n                      <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.assignees?.list?.length > 0\" >\n                          <i class=\"icons cross vx-mr-1\" (click)=\"remove('assignees',responsibilityForm?.assignees?.list[0])\" >&#xe90d;</i>\n                          <span class=\"chip\" [appTooltip]=\"responsibilityForm?.assignees?.list[0]?.employee_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\">{{responsibilityForm?.assignees?.list[0]?.employee_name}}</span></span>\n                          <button *ngIf=\"responsibilityForm?.assignees?.list?.length > 1\" class=\"count user\" appPopover (click)=\"user.popover()\" placement=\"left\"> +{{responsibilityForm?.assignees?.list?.length -1}}</button>\n                      </div>\n                      <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"  *ngIf=\"responsibilityForm?.assignees?.list?.length > 0 && responsibilityForm?.assigneeGroups?.list?.length > 0\" >&</span>\n                      <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.assigneeGroups?.list?.length\" >\n                          <i *ngIf=\"(!allGroupAssignee || mode !== 'EDIT')\" class=\"icons cross vx-mr-1\" (click)=\"remove('groupassignees',responsibilityForm?.assigneeGroups?.list[0])\" >&#xe90d;</i>\n                          <span class=\"chip\" [appTooltip]=\"responsibilityForm?.assigneeGroups?.list[0]?.group_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\">{{responsibilityForm?.assigneeGroups?.list[0]?.group_name}}</span></span>\n                          <button *ngIf=\"responsibilityForm?.assigneeGroups?.list?.length > 1\" class=\"count\" appPopover (click)=\"group.popover()\" placement=\"right\">+{{responsibilityForm?.assigneeGroups?.list?.length - 1}}</button>\n                      </div>\n                  </div> -->\n          <button *ngIf=\"activeSelector !== 'assignees'\" class=\"edit\" type=\"button\"\n            (click)=\"activateSelector('assignees', true)\">\n            <i class=\"icons\">&#xe9ba;</i> Edit\n          </button>\n        </div>\n        <app-popover #user [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let e_user of responsibilityForm?.assignees?.list | slice : 1\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i class=\"icons\" (click)=\"remove('assignees', e_user)\">&#xe90d;</i>\n                    {{ e_user.member_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n        <app-popover #group [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let group of responsibilityForm?.assigneeGroups?.list\n                    | slice : 1\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i *ngIf=\"\n                        !featureFlag_groups ||\n                        (featureFlag_groups &&\n                          (!allGroupAssignee || mode !== 'EDIT'))\n                      \" class=\"icons\" (click)=\"remove('groupassignees', group)\">&#xe90d;</i>\n                    {{ group.group_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n\n        <p *ngIf=\"invalidType === 'who'\" [appScrollInView]=\"true\" class=\"error-message\">\n          Please select the person responsible for completing this\n          responsibility.\n        </p>\n        <ng-container *ngIf=\"!isGroupAssigned\">\n\n          <app-cs-radio *ngIf=\"mode !== 'EDIT'\" (checkedEvent)=\"\n              responsibilityForm.assignees.whoCanComplete = 'ANY_ONE'\n            \" [checked]=\"responsibilityForm.assignees.whoCanComplete == 'ANY_ONE'\" [name]=\"'what'\">ANY SELECTED PERSON\n            CAN COMPLETE THIS\n            <i class=\"icons\" [appTooltip]=\"\n                'If selected, only one responsibility will be created.'\n              \" placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i>\n          </app-cs-radio>\n\n          <app-cs-radio *ngIf=\"mode !== 'EDIT'\" (checkedEvent)=\"responsibilityForm.assignees.whoCanComplete = 'ALL'\"\n            [checked]=\"responsibilityForm.assignees.whoCanComplete == 'ALL'\" [name]=\"'what'\">ALL SELECTED PERSONS NEED\n            TO COMPLETE THIS<i class=\"icons\" [appTooltip]=\"\n              'If selected, separate responsibilities will be created for each person.'\n            \" placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i>\n          </app-cs-radio>\n\n          <div class=\"switch-row align-right\" *ngIf=\"\n              mode == 'EDIT' &&\n              (!featureFlag_groups ||\n                (responsibilityForm?.assigneeGroups?.list.length === 0 &&\n                  featureFlag_groups))\n            \">\n            <app-cs-switch (ngValueChange)=\"openAssigneeChangeConfirmation($event)\" [ngValue]=\"\n                responsibilityForm.assignees.whoCanComplete == 'ANY_ONE'\n              \">\n              ANY SELECTED PERSON CAN COMPLETE THIS\n            </app-cs-switch>\n          </div>\n        </ng-container>\n        <app-popover #assignees [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let e_user of responsibilityForm?.assignees?.list | slice : 1;\n                  let j = index\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i class=\"icons\" (click)=\"remove('assignees', e_user)\">&#xe90d;</i>\n                    {{ e_user.member_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n      </div>\n    </div>\n  </div>\n\n  <!-- When? -->\n  <div class=\"form-group-row\" [class.active]=\"activeSelector === 'frequency'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'frequency' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"\n        !responsibilityForm?.frequency || activeSelector === 'frequency'\n      \">\n      <img [src]=\"ASSETS.when\" alt=\"im\" *ngIf=\"!responsibilityForm?.frequency || activeSelector === 'frequency'\" />\n\n      <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\" *ngIf=\"\n          responsibilityForm?.frequency &&\n          activeSelector !== 'frequency' &&\n          responsibilityForm?.frequency != '' &&\n          responsibilityForm?.frequency != '5~0~0~0'\n        \">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">When? <span class=\"required\">*</span></label>\n        <div *ngIf=\"\n            responsibilityForm?.frequency == '' ||\n            responsibilityForm?.frequency == '5~0~0~0'\n          \" class=\"select button-sec\">\n          <input type=\"text\" (click)=\"activateSelector('frequency', true)\" [placeholder]=\"frequencyPlaceholder\"\n            readonly />\n          <button (click)=\"activateSelector('frequency', true)\" type=\"button\">\n            Set A frequency\n          </button>\n        </div>\n        <div *ngIf=\"\n            responsibilityForm?.frequency != '' &&\n            responsibilityForm?.frequency !== '5~0~0~0'\n          \" class=\"selected button-sec\">\n          <span class=\"chip\" [appTooltip]=\"frequencyPlaceholder\" placement=\"bottom-left\" delay=\"0\" type=\"black\"\n            [tooltipMandatory]=\"false\">{{ frequencyPlaceholder }}</span>\n          <button *ngIf=\"activeSelector !== 'frequency'\" type=\"button\" class=\"edit\"\n            (click)=\"activateSelector('frequency', true)\">\n            <i class=\"icons\">&#xe9ba;</i>Edit\n          </button>\n        </div>\n        <p *ngIf=\"invalidType === 'when'\" [appScrollInView]=\"true\" class=\"error-message\">\n          Please select the frequency of occurrence for this responsibility.\n        </p>\n      </div>\n    </div>\n  </div>\n\n  <!-- Notes -->\n  <div class=\"form-group-row\" [class.active]=\"activeSelector === 'notes'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'notes' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"\n        checkBlank(responsibilityForm?.description).trim() !== '' &&\n        !focus.description\n      \">\n      <img [src]=\"ASSETS.notes\" alt=\"im\" *ngIf=\"\n          checkBlank(responsibilityForm?.description).trim() === '' ||\n          focus.description\n        \" />\n\n      <svg class=\"checkIcon\" *ngIf=\"\n          checkBlank(responsibilityForm?.description).trim() !== '' &&\n          !focus.description\n        \" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">Notes</label>\n        <vcomply-editor [(ngModel)]=\"responsibilityForm.description\" [editorConfig]=\"{\n            mode: 'prime',\n            colorPalette: true,\n            link: true,\n            id: 'notes',\n            placeholder:\n              'Add more information about completing the responsibility'\n          }\"></vcomply-editor>\n      </div>\n    </div>\n  </div>\n\n  <!-- Objective -->\n  <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.OBJECTIVE\" [attr.id]=\"'OBJECTIVE'\"\n    [class.active]=\"activeSelector === 'objective'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'objective' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"\n        checkBlank(responsibilityForm?.objective).trim() !== '' &&\n        !focus.objective\n      \">\n      <img [src]=\"ASSETS.objectives\" alt=\"im\" *ngIf=\"\n          checkBlank(responsibilityForm?.objective).trim() === '' ||\n          focus.objective\n        \" />\n\n      <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\" *ngIf=\"\n          checkBlank(responsibilityForm?.objective).trim() !== '' &&\n          !focus.objective\n        \">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">Objective</label>\n        <vcomply-editor [(ngModel)]=\"responsibilityForm.objective\" [editorConfig]=\"{\n            mode: 'prime',\n            colorPalette: true,\n            id: 'objective',\n            link: true,\n            placeholder:\n              'This option lets you specify an objective for the responsibility.'\n          }\"></vcomply-editor>\n      </div>\n    </div>\n  </div>\n\n  <!-- Responsibility Center -->\n  <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.RC\" [attr.id]=\"'RC'\"\n    [class.active]=\"activeSelector === 'rc'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'rc' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"\n        responsibilityForm?.rc?.length > 0 && activeSelector !== 'rc'\n      \">\n      <img [src]=\"ASSETS.responsibility_center\" alt=\"\"\n        *ngIf=\"responsibilityForm?.rc?.length == 0 || activeSelector === 'rc'\" />\n\n      <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\n        *ngIf=\"responsibilityForm?.rc?.length > 0 && activeSelector !== 'rc'\">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">Responsibility Center </label>\n\n        <div class=\"select\" *ngIf=\"responsibilityForm?.rc?.length === 0\">\n          <div class=\"custom-input\" (click)=\"activateSelector('rc', true)\"\n            aria-placeholder=\"Select the responsibility center or the responsibility centers for this responsibility.\">\n          </div>\n          <!-- <input type=\"text\" (click)=\"activateSelector('rc',true)\" placeholder=\"Select Responsibility Center(s)\" readonly> -->\n        </div>\n\n        <div class=\"selected\" *ngIf=\"responsibilityForm?.rc?.length > 0\"\n          [class.readOnly]=\"openedFrom === 'RISK_TREATMENT'\">\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n            *ngFor=\"let rc of responsibilityForm?.rc?.slice(0, 1)\">\n            <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"remove('rc', rc)\"\n              *ngIf=\"openedFrom !== 'RISK_TREATMENT'\">&#xe9ae;</i>\n            <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"rc?.item_name\" placement=\"bottom-left\" delay=\"0\"\n              type=\"black\" [tooltipMandatory]=\"false\">{{ rc?.item_name }}</span>\n            <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n              *ngIf=\"responsibilityForm?.rc?.length > 1\" appPopover (click)=\"rcPopover.popover()\" placement=\"left\">\n              +{{ responsibilityForm?.rc?.slice(1).length }}\n            </button>\n          </div>\n\n          <!-- <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.rc?.length>1\" [class.plus]=\"responsibilityForm?.rc?.length>2\">\n                      <span class=\"chip\" *ngFor=\"let rc of responsibilityForm?.rc?.slice(0,2)\"><i class=\"icons\" (click)=\"remove('rc',rc)\" *ngIf=\"openedFrom !== 'RISK_TREATMENT'\">&#xe90d;</i>{{rc?.item_name}}</span>\n                      <button class=\"count\" *ngIf=\"responsibilityForm?.rc?.length > 2\" type=\"button\" appPopover (click)=\"rc.popover()\" placement=\"right\" placement=\"right\">+{{responsibilityForm?.rc?.slice(2).length}}</button>\n                  </div> -->\n\n          <button *ngIf=\"activeSelector !== 'rc' && openedFrom !== 'RISK_TREATMENT'\" class=\"edit\" type=\"button\"\n            (click)=\"activateSelector('rc', true)\">\n            <i class=\"icons\">&#xe9ba;</i> Edit\n          </button>\n        </div>\n        <app-popover #rcPopover [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let rc of responsibilityForm?.rc | slice : 1;\n                  let j = index\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i class=\"icons\" (click)=\"remove('rc', rc)\">&#xe90d;</i>\n                    {{ rc.item_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n\n        <ng-container *ngIf=\"\n            isResponsibilityRcLinkEnabled &&\n            (mode != 'EDIT' || responsibilityForm?.rc?.length <= 1)\n          \">\n          <!-- <app-cs-radio><div [appTooltip]=\"'Create separate responsibilities for each responsibility center'\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"true\">CREATE SEPARATE RESPONSIBILITIES FOR EACH RESPONSIBILITY CEN\u2026</div><i class=\"icons\" [appTooltip]=\"'If selected, separate responsibilities will be created for each Responsibility Center.'\" placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i></app-cs-radio> -->\n          <app-cs-radio [class.disabled]=\"\n          mode == 'EDIT' &&\n          responsibilityForm.responsibilityCenterType === 1 &&\n          responsibilityForm?.rc?.length > 1\n        \" [checked]=\"responsibilityCenterType === 1\" [name]=\"'ff_responsibility_rc_link'\"\n            (checkedEvent)=\"onRcTypeChange(1)\">DISPLAY THE SAME RESPONSIBILITY IN ALL RESPONSIBILITY CENTERS<i\n              class=\"icons\" [appTooltip]=\"\n            'If selected, the same responsibility will be linked to each Responsibility Center.'\n          \" placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i></app-cs-radio>\n          <app-cs-radio [class.disabled]=\"\n              mode == 'EDIT' &&\n              responsibilityForm.responsibilityCenterType === 1 &&\n              responsibilityForm?.rc?.length > 1\n            \" [checked]=\"responsibilityCenterType === 0\" [name]=\"'ff_responsibility_rc_link'\"\n            (checkedEvent)=\"onRcTypeChange(0)\">\n            <div class=\"rc-radio-text\" [appTooltip]=\"\n                'Create separate responsibilities for each responsibility centers'\n              \" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"true\">\n              CREATE SEPARATE RESPONSIBILITIES FOR EACH RESPONSIBILITY CEN\u2026\n            </div>\n            <i class=\"icons\" [appTooltip]=\"\n                'If selected, separate responsibilities will be created for each Responsibility Center.'\n              \" placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i>\n          </app-cs-radio>\n\n        </ng-container>\n      </div>\n    </div>\n  </div>\n\n  <!-- Program -->\n  <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.PROGRAM\" [attr.id]=\"'PROGRAM'\"\n    [class.active]=\"activeSelector === 'program'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'program' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"\n        responsibilityForm?.program?.length > 0 && activeSelector !== 'program'\n      \">\n      <img [src]=\"ASSETS.case_category\" alt=\"\" *ngIf=\"\n          (responsibilityForm?.program?.length == 0 ||\n            activeSelector === 'program') &&\n          allProgamSelected?.length == 0\n        \" />\n\n      <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\" *ngIf=\"\n          (responsibilityForm?.program?.length > 0 &&\n            activeSelector !== 'program') ||\n          allProgamSelected?.length > 0\n        \">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">Program</label>\n        <div class=\"select\" *ngIf=\"allProgamSelected?.length == 0\">\n          <div class=\"custom-input\" (click)=\"activateSelector('program', true)\"\n            aria-placeholder=\"Select the Program or Program Categories that this responsibility relates to.\"></div>\n          <!-- <input type=\"text\" (click)=\"activateSelector('program',true)\" placeholder=\"Select Responsibility program(s)\" readonly> -->\n        </div>\n        <div class=\"selected\" *ngIf=\"allProgamSelected?.length > 0\">\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n            <ng-container>\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" *ngIf=\"\n                  !hiddenList?.includes('PROGRAM') &&\n                  !program?.isViewOnlyProgram\n                \" (click)=\"remove('program', allProgamSelected[0])\">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"allProgamSelected[0]?.name ?? '--'\"\n                placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ allProgamSelected[0]?.name\n                ?? \"--\" }}</span>\n            </ng-container>\n            <button 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 (click)=\"program.popover()\" placement=\"right\" *ngIf=\"allProgamSelected?.length > 1\">\n              +{{ allProgamSelected?.length - 1 }}\n            </button>\n          </div>\n\n          <!-- <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.program?.length>1\" [class.plus]=\"responsibilityForm?.program?.length>2\">\n                              <span class=\"chip\" *ngFor=\"let program of responsibilityForm?.program\"><i class=\"icons\" *ngIf=\"feature.isFeatureEnabled('ff_deprecate_primary_program_flag')\" (click)=\"remove('program',program)\">&#xe90d;</i> {{program?.name??'--'}}</span>\n                              <!- - <button *ngIf=\"responsibilityForm?.program?.length > 2\" class=\"count\" type=\"button\" appPopover (click)=\"program.popover()\" placement=\"right\">+ {{responsibilityForm?.program?.slice(2).length}}</button> - ->\n                              <button *ngIf=\"responsibilityForm?.linkedProgram?.length > 1\" class=\"count\" type=\"button\" appPopover (click)=\"program.popover()\" placement=\"right\">+ {{responsibilityForm?.linkedProgram?.length - 1}}</button>\n                          </div> -->\n\n          <button *ngIf=\"\n              activeSelector !== 'program' && !hiddenList.includes('PROGRAM')\n            \" class=\"edit\" type=\"button\" (click)=\"activateSelector('program', true)\">\n            <i class=\"icons\">&#xe9ba;</i> Edit\n          </button>\n        </div>\n\n        <app-popover #program [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let program of allProgamSelected | slice : 1;\n                  let j = index\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\" [appTooltip]=\"program?.name\" placement=\"bottom\" type=\"black\" delay=\"0\"\n                    [tooltipMandatory]=\"false\">\n                    <i *ngIf=\"\n                        !hiddenList?.includes('PROGRAM') &&\n                        !program?.isViewOnlyProgram\n                      \" class=\"icons\" (click)=\"remove('program', program)\">&#xe90d;</i>\n                    {{ program?.name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n        <div *ngIf=\"responsibilityForm?.customTags?.length > 0\">\n          <ng-container *ngFor=\"let tag of responsibilityForm?.customTags\">\n            <ng-container *ngIf=\"tag?.name?.trim()\">\n              <label class=\"vx-control-panel vx-mt-2\">{{\n                tag?.name\n                }}</label>\n              <input type=\"text\" [(ngModel)]=\"tag.value\" placeholder=\"{{ tag?.name }}\" />\n            </ng-container>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Format & Evidence -->\n  <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.FORMATE_EVIDENCE\"\n    [attr.id]=\"'FORMATE_EVIDENCE'\" [class.active]=\"activeSelector === 'formate_evidence'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'formate_evidence' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"false\">\n      <img *ngIf=\"\n          this.responsibilityForm.formatAndEvidence.evidenceRequired == false &&\n          this.responsibilityForm.formatAndEvidence.formatFiles.length == 0 &&\n          this.responsibilityForm.formatAndEvidence.formatLinks?.length == 0\n        \" [src]=\"ASSETS.format_evidence\" alt=\"im\" />\n\n      <svg *ngIf=\"\n          this.responsibilityForm.formatAndEvidence.evidenceRequired ||\n          this.responsibilityForm.formatAndEvidence.formatFiles.length ||\n          this.responsibilityForm.formatAndEvidence.formatLinks?.length\n        \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <app-format-and-evidence (updateFiles)=\"saveSelectedList('formate_evidence', $event)\" [mode]=\"'responsibility'\"\n        [formatEvidanceData]=\"responsibilityForm?.formatAndEvidence\" [organization_id]=\"organizationId\"\n        [orgDetails]=\"orgDetails\">\n      </app-format-and-evidence>\n    </div>\n  </div>\n\n  <!-- Assessment -->\n  <div *ngIf=\"moreOptions?.ASSESSMENT\" [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\"\n    [attr.id]=\"'ASSESSMENT'\" [class.active]=\"activeSelector === 'isAssessment'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'isAssessment' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"responsibilityForm.assessment?.assessment_id\">\n      <img *ngIf=\"!responsibilityForm.assessment?.assessment_id\" [src]=\"ASSETS.assessments\" alt=\"im\" />\n\n      <svg *ngIf=\"responsibilityForm.assessment?.assessment_id\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 52 52\">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">ASSESSMENTS</label>\n        <div *ngIf=\"!responsibilityForm.assessment?.assessment_id\" class=\"select\">\n          <input type=\"text\" (click)=\"\n              activateSelector('isAssessment', true); isAssessment = true\n            \" placeholder=\"Select an assessment for this responsibility\"\n            [disabled]=\"responsibilityForm.checkpoints?.length\" readonly />\n        </div>\n        <div class=\"selected\" *ngIf=\"responsibilityForm.assessment?.assessment_id\">\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n            <i *ngIf=\"assessmentDetails?.assessment_type !== 'compliance_audit'\"\n              class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n              (click)=\"remove('assessment', category)\">&#xe9ae;</i>\n            <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"\n                responsibilityForm.assessment?.assessmentDetails\n                  ?.assessment_name\n              \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n              responsibilityForm.assessment?.assessmentDetails\n              ?.assessment_name\n              }}</span>\n            <div class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-ml-1 vx-text-center\">\n              {{ responsibilityForm.assessment?.assessmentDetails?.questions }}\n              {{\n              responsibilityForm.assessment?.assessmentDetails?.questions > 1\n              ? \"Questions\"\n              : \"Question\"\n              }}\n            </div>\n          </div>\n\n          <button *ngIf=\"assessmentDetails?.assessment_type !== 'compliance_audit'\" (click)=\"\n              activateSelector('isAssessment', true); isAssessment = true\n            \" class=\"edit\" type=\"button\">\n            <i class=\"icons\">&#xe9ba;</i> Edit\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Checkpoints -->\n  <!-- *ngIf=\"moreOptions.checkpoints\" -->\n  <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.CHECKPOINTS\"\n    [attr.id]=\"'CHECKPOINTS'\" [class.active]=\"activeSelector === 'checkpoints'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'checkpoints' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\">\n      <img [src]=\"ASSETS.checkpoints\" alt=\"im\" *ngIf=\"\n          responsibilityForm?.checkpoints?.length == 0 ||\n          activeSelector === 'checkpoints'\n        \" />\n\n      <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\" *ngIf=\"\n          responsibilityForm?.checkpoints?.length > 0 &&\n          activeSelector !== 'checkpoints'\n        \">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">\n          <!-- {{responsibilityForm.checkpoints|json}}\n                {{responsibilityForm.checkpointInstruction}} -->\n\n          Checkpoints\n          <!-- <button *ngIf=\"responsibilityForm?.checkpoints?.length === 0\" class=\"button\"\n                      (click)=\"activateSelector('checkpoints',true)\">+ Add Checkpoints</button> -->\n        </label>\n        <div class=\"select button-sec\" *ngIf=\"responsibilityForm?.checkpoints?.length === 0\">\n          <input [disabled]=\"!responsibilityForm.checkpoints?.length\" type=\"text\"\n            (click)=\"activateSelector('checkpoints', true)\" placeholder=\"Add checkpoints for this responsibility\"\n            readonly />\n          <button [disabled]=\"!responsibilityForm.checkpoints?.length\" (click)=\"activateSelector('checkpoints', true)\"\n            type=\"button\">\n            Add Checkpoints\n          </button>\n        </div>\n        <div class=\"selected\" *ngIf=\"responsibilityForm.checkpoints?.length > 0\">\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n            <ng-container *ngFor=\"\n                let checkpoint of responsibilityForm.checkpoints?.slice(0, 1)\n              \">\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"checkpoint?.label\" placement=\"bottom-left\"\n                delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ checkpoint?.label }}</span>\n            </ng-container>\n            <button 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 (click)=\"checkpoint.popover()\" placement=\"right\"\n              *ngIf=\"responsibilityForm.checkpoints?.length > 1\">\n              +{{ responsibilityForm.checkpoints?.length - 1 }}\n            </button>\n          </div>\n\n          <!-- <div class=\"chip-container checkpoints\" [class.more-one]=\"responsibilityForm.checkpoints?.length>1\" [class.plus]=\"responsibilityForm.checkpoints?.length>2\">\n                      <span class=\"chip\" *ngFor=\"let checkpoint of responsibilityForm.checkpoints?.slice(0,1)\">{{checkpoint?.label}}</span>\n                      <button class=\"count\" *ngIf=\"responsibilityForm.checkpoints?.length > 1\" type=\"button\" appPopover (click)=\"checkpoint.popover()\" placement=\"right\">+{{responsibilityForm.checkpoints?.length- 1}}</button>\n                  </div> -->\n\n          <button *ngIf=\"activeSelector !== 'checkpoints'\" class=\"edit\" type=\"button\"\n            (click)=\"activateSelector('checkpoints', true)\">\n            <i class=\"icons\">&#xe9ba;</i> Edit\n          </button>\n        </div>\n      </div>\n      <div *ngIf=\"this.responsibilityForm.checkpoints?.length\" class=\"assessment-text\">\n        <i class=\"icons alert-icon\">&#xe930;</i>\n        <span>You can now use the new <strong>Checkpoints </strong>or\n          <strong>Assessments</strong> feature instead of the old checkpoints\n          functionality to create analytical questions.\n          <button class=\"remove-btn\" (click)=\"onRemoveCheckpoints('checkpoint')\">\n            Remove Checkpoints\n          </button>\n          to continue.</span>\n      </div>\n      <app-popover #checkpoint [dontCloseonClick]=\"true\">\n        <div class=\"wf-action-list\">\n          <ul class=\"action-item\">\n            <li *ngFor=\"\n                let checkpoint of responsibilityForm.checkpoints | slice : 1;\n                let j = index\n              \">\n              <div class=\"avatar-card\">\n                <span class=\"value\">\n                  {{ checkpoint?.label }}\n                </span>\n              </div>\n            </li>\n          </ul>\n        </div>\n      </app-popover>\n    </div>\n  </div>\n\n  <!-- New  Checkpoints -->\n  <!-- *ngIf=\"moreOptions.checkpoints\" -->\n  <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.CHECKPOINTS_NEW\"\n    [attr.id]=\"'CHECKPOINTS-NEW'\" [class.active]=\"activeSelector === 'checkpoints-new'\">\n    <div class=\"left\">\n      <img [src]=\"ASSETS.checkpoints\" alt=\"im\" *ngIf=\"\n          responsibilityForm?.checkpoints?.length == 0 ||\n          activeSelector === 'checkpoints'\n        \" />\n\n      <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\n        *ngIf=\"checkpointCount > 0 && activeSelector !== 'checkpoints'\">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">\n          <!-- {{responsibilityForm.checkpoints|json}}\n                {{responsibilityForm.checkpointInstruction}} -->\n\n          Checkpoints\n          <!-- <span class=\"checkpoint-version\"> V2.0</span> -->\n          <!-- <button  class=\"button\"\n                      (click)=\"activateSelector('checkpoints-new',true)\">+ Add Checkpoints</button> -->\n        </label>\n        <div class=\"select button-sec\" *ngIf=\"checkpointCount === 0\">\n          <input type=\"text\" (click)=\"activateSelector('checkpoints-new', true)\"\n            placeholder=\"Add checkpoints for this responsibility\" readonly />\n          <button (click)=\"activateSelector('checkpoints-new', true)\" type=\"button\">\n            Add Checkpoints\n          </button>\n        </div>\n        <div class=\"selected\" *ngIf=\"checkpointCount > 0\">\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n            <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n              (click)=\"onRemoveCheckpoints('new-checkpoints')\">&#xe9ae;</i>\n            <span class=\"chipName vx-fs-11 vx-label-txt\">{{ checkpointCount }}\n              {{ checkpointCount > 1 ? \"Questions\" : \"Question\" }}</span>\n          </div>\n\n          <!-- <div class=\"chip-container checkpoints\" [class.more-one]=\"checkpointCount > 0\">\n                      <span class=\"chip\">\n                          <i class=\"icons\" (click)=\"onRemoveCheckpoints('new-checkpoints')\">&#xe90d;</i>\n                          {{checkpointCount}} {{checkpointCount > 1 ? 'Questions': 'Question'}}</span>\n                  </div> -->\n\n          <button *ngIf=\"activeSelector !== 'checkpoints-new'\" class=\"edit\" type=\"button\"\n            (click)=\"activateSelector('checkpoints-new', true)\">\n            <i class=\"icons\">&#xe9ba;</i> Edit\n          </button>\n        </div>\n      </div>\n      <app-popover #checkpoint [dontCloseonClick]=\"true\">\n        <div class=\"wf-action-list\">\n          <ul class=\"action-item\">\n            <li *ngFor=\"\n                let checkpoint of responsibilityForm.checkpoints | slice : 1;\n                let j = index\n              \">\n              <div class=\"avatar-card\">\n                <span class=\"value\">\n                  {{ checkpoint?.label }}\n                </span>\n              </div>\n            </li>\n          </ul>\n        </div>\n      </app-popover>\n    </div>\n  </div>\n\n  <!-- Risk Classification -->\n  <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.RISK_CLASSIFICATION\"\n    [attr.id]=\"'RISK_CLASSIFICATION'\" [class.active]=\"activeSelector === 'riskCalculator'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'riskCalculator' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"responsibilityForm?.riskClass\">\n      <svg *ngIf=\"responsibilityForm?.riskClass\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 52 52\">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">\n          Risk Classification\n          <button (click)=\"activateSelector('riskCalculator', true)\" class=\"button\">\n            + Risk Calculator\n          </button>\n        </label>\n\n        <div class=\"classification\">\n          <label class=\"low\" *ngFor=\"let risk of riskClassification\" [ngClass]=\"[risk.class]\">\n            <input type=\"radio\" name=\"classification\" [(ngModel)]=\"responsibilityForm.riskClass\"\n              [value]=\"risk?.value\" />\n            <span>{{ risk?.name }}</span>\n          </label>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Reviewer -->\n  <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.REVIEWER\" [attr.id]=\"'REVIEWER'\"\n    [class.active]=\"\n      activeSelector === 'reviewerFrequency' || activeSelector === 'reviewer'\n    \" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'reviewer' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"false\">\n      <img [src]=\"ASSETS.reviewer\" alt=\"\" *ngIf=\"\n          responsibilityForm?.reviewers?.list?.length == 0 ||\n          activeSelector === 'reviewer'\n        \" />\n\n      <svg *ngIf=\"\n          responsibilityForm?.reviewers?.list?.length > 0 &&\n          activeSelector !== 'reviewer'\n        \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">Reviewer</label>\n        <div class=\"select\" *ngIf=\"\n            (responsibilityForm?.reviewers?.list?.length == 0 &&\n              !featureFlag_groups) ||\n            (responsibilityForm?.reviewers?.list?.length == 0 &&\n              responsibilityForm?.groupReviewers?.list?.length == 0 &&\n              featureFlag_groups)\n          \">\n          <input type=\"text\" (click)=\"activateSelector('reviewer', true)\" placeholder=\"Select Reviewer\" readonly />\n        </div>\n        <div class=\"selected\" *ngIf=\"\n            (responsibilityForm?.reviewers?.list?.length > 0 &&\n              !featureFlag_groups) ||\n            ((responsibilityForm?.reviewers?.list?.length > 0 ||\n              responsibilityForm?.groupReviewers?.list?.length > 0) &&\n              featureFlag_groups)\n          \">\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"!featureFlag_groups\">\n            <ng-container *ngFor=\"\n                let reviewer of responsibilityForm?.reviewers?.list?.slice(0, 1)\n              \">\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                (click)=\"remove('reviewer', reviewer)\">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"reviewer.member_name\" placement=\"bottom-left\"\n                delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ reviewer.member_name }}</span>\n            </ng-container>\n            <button 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 (click)=\"reviewer.popover()\" placement=\"right\"\n              *ngIf=\"responsibilityForm?.reviewers?.list?.length > 1\">\n              +{{ responsibilityForm?.reviewers?.list?.slice(1).length }}\n            </button>\n          </div>\n\n          <!-- <div class=\"chip-container\" *ngIf=\"!featureFlag_groups\" [class.more-one]=\"responsibilityForm?.reviewers?.list?.length>1\"\n                      [class.plus]=\"responsibilityForm?.reviewers?.list?.length>2\">\n                      <span class=\"chip\" *ngFor=\"let reviewer of responsibilityForm?.reviewers?.list?.slice(0,2)\"><i class=\"icons\" (click)=\"remove('reviewer',reviewer)\">&#xe90d;</i> {{reviewer.member_name}}</span>\n                      <button class=\"count\" *ngIf=\"responsibilityForm?.reviewers?.list?.length > 2\" type=\"button\" appPopover (click)=\"reviewer.popover()\" placement=\"right\">+{{responsibilityForm?.reviewers?.list?.slice(2).length}}</button>\n                  </div> -->\n\n          <div class=\"vx-d-flex vx-align-center\" *ngIf=\"featureFlag_groups\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n              *ngIf=\"responsibilityForm?.reviewers?.list.length > 0\">\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"\n                  remove('reviewer', responsibilityForm?.reviewers?.list[0])\n                \">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"\n                  responsibilityForm?.reviewers?.list[0]?.employee_name\n                \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                responsibilityForm?.reviewers?.list[0]?.employee_name\n                }}</span>\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 greenBg\"\n                appPopover (click)=\"user.popover()\" placement=\"right\"\n                *ngIf=\"responsibilityForm?.reviewers?.list?.length > 1\">\n                +{{ responsibilityForm?.reviewers?.list?.length - 1 }}\n              </button>\n            </div>\n            <div class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"\n                responsibilityForm?.reviewers?.list.length > 0 &&\n                responsibilityForm?.groupReviewers?.list?.length > 0\n              \">\n              &\n            </div>\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n              *ngIf=\"responsibilityForm?.groupReviewers?.list.length > 0\">\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"\n                  remove(\n                    'groupReviewer',\n                    responsibilityForm?.groupReviewers?.list[0]\n                  )\n                \">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"\n                  responsibilityForm?.groupReviewers?.list[0]?.group_name\n                \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                responsibilityForm?.groupReviewers?.list[0]?.group_name\n                }}</span>\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 (click)=\"group.popover()\" placement=\"right\"\n                *ngIf=\"responsibilityForm?.groupReviewers?.list?.length > 1\">\n                +{{ responsibilityForm?.groupReviewers?.list?.length - 1 }}\n              </button>\n            </div>\n          </div>\n\n          <!-- <div class=\"chip-container\" *ngIf=\"featureFlag_groups\">\n                      <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.reviewers?.list.length > 0 \">\n                          <i class=\"icons cross vx-mr-1\" (click)=\"remove('reviewer',responsibilityForm?.reviewers?.list[0])\" >&#xe90d;</i>\n                          <span class=\"chip\" [appTooltip]=\"responsibilityForm?.reviewers?.list[0]?.employee_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\">{{responsibilityForm?.reviewers?.list[0]?.employee_name}}</span></span>\n                          <button *ngIf=\"responsibilityForm?.reviewers?.list?.length > 1\" class=\"count user\" appPopover (click)=\"user.popover()\" placement=\"left\"> +{{responsibilityForm?.reviewers?.list?.length - 1}}</button>\n                      </div>\n                      <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"responsibilityForm?.reviewers?.list.length > 0 && responsibilityForm?.groupReviewers?.list?.length > 0\">&</span>\n                      <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.groupReviewers?.list.length > 0 \" >\n                          <i class=\"icons cross vx-mr-1\" (click)=\"remove('groupReviewer',responsibilityForm?.groupReviewers?.list[0])\">&#xe90d;</i>\n                          <span class=\"chip\" [appTooltip]=\"responsibilityForm?.groupReviewers?.list[0]?.group_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\">{{responsibilityForm?.groupReviewers?.list[0]?.group_name}}</span></span>\n                          <button *ngIf=\"responsibilityForm?.groupReviewers?.list?.length > 1\" class=\"count\" appPopover (click)=\"group.popover()\" placement=\"right\">+{{responsibilityForm?.groupReviewers?.list?.length - 1}}</button>\n\n                      </div>\n                  </div> -->\n\n          <button *ngIf=\"activeSelector !== 'reviewer'\" class=\"edit\" type=\"button\"\n            (click)=\"activateSelector('reviewer', true)\">\n            <i class=\"icons\">&#xe9ba;</i> Edit\n          </button>\n        </div>\n        <app-cs-radio [checked]=\"responsibilityForm.reviewers.sequentialWorkflow\" [name]=\"'reviewer'\"\n          (checkedEvent)=\"onReviewerWorkflowChange('sequential')\" [class.disabled]=\"\n            responsibilityForm?.groupReviewers?.list?.length > 0\n          \">\n          SEQUENTIAL<i class=\"icons\" [appTooltip]=\"\n              'The responsibility will be sent for review one at a time in the sequence defined by you.'\n            \" placement=\"bottom-right\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\">&#xe91f;</i>\n        </app-cs-radio>\n        <app-cs-radio [checked]=\"!responsibilityForm.reviewers.sequentialWorkflow\" [name]=\"'reviewer'\"\n          (checkedEvent)=\"onReviewerWorkflowChange('anyReviewer')\">\n          ANY REVIEWER CAN MARK THIS AS REVIEWED<i class=\"icons\" [appTooltip]=\"\n              'The responsibility will be sent for review to all reviewers at the same time. If anyone of the reviewer reviews the responsibility, it will be considered as reviewed.'\n            \" placement=\"bottom-right\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\">&#xe91f;</i>\n        </app-cs-radio>\n        <app-popover #reviewer [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let reviewer of responsibilityForm?.reviewers?.list\n                    | slice : 1;\n                  let j = index\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i class=\"icons\" (click)=\"remove('reviewer', reviewer)\">&#xe90d;</i>\n                    {{ reviewer.member_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n        <app-popover #user [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let reviewer of responsibilityForm?.reviewers?.list\n                    | slice : 1;\n                  let j = index\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i class=\"icons\" (click)=\"remove('reviewer', reviewer)\">&#xe90d;</i>\n                    {{ reviewer.member_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n        <app-popover #group [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let group of responsibilityForm?.groupReviewers?.list\n                    | slice : 1;\n                  let i = index\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i class=\"icons\" (click)=\"remove('groupReviewer', group)\">&#xe90d;</i>\n                    {{ group.group_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n      </div>\n    </div>\n  </div>\n\n  <!-- Overseer -->\n  <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.OVERSEER\" [attr.id]=\"'OVERSEER'\"\n    [class.active]=\"\n      activeSelector === 'overseerNotify' || activeSelector === 'overseer'\n    \" [class.disabled]=\"\n      activeSelector &&\n      !['overseerNotify', 'overseerNotify'].includes(activeSelector) &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"false\">\n      <img [src]=\"ASSETS.oversight\" alt=\"\" *ngIf=\"\n          (responsibilityForm?.overseers?.list?.length == 0 &&\n            responsibilityForm?.overseers?.notifyList?.length == 0) ||\n          activeSelector === 'overseerNotify' ||\n          activeSelector === 'overseer'\n        \" />\n      <svg class=\"checkIcon\" *ngIf=\"\n          (responsibilityForm?.overseers?.list?.length > 0 ||\n            responsibilityForm?.overseers?.notifyList?.length > 0) &&\n          !(\n            activeSelector === 'overseerNotify' || activeSelector === 'overseer'\n          )\n        \" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">Oversight</label>\n        <div class=\"select\" *ngIf=\"\n            (responsibilityForm?.overseers?.list?.length == 0 &&\n              !featureFlag_groups) ||\n            (responsibilityForm?.overseers?.list?.length == 0 &&\n              responsibilityForm?.overseersGroups?.list?.length == 0 &&\n              featureFlag_groups)\n          \">\n          <input type=\"text\" (click)=\"activateSelector('overseer', true)\"\n            placeholder=\"Who should have oversight of the responsibility?\" readonly />\n        </div>\n        <div class=\"selected\" *ngIf=\"\n            (responsibilityForm?.overseers?.list?.length > 0 &&\n              !featureFlag_groups) ||\n            ((responsibilityForm?.overseers?.list?.length > 0 ||\n              responsibilityForm?.overseersGroups?.list?.length > 0) &&\n              featureFlag_groups)\n          \">\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"!featureFlag_groups\">\n            <ng-container *ngFor=\"\n                let overseer of responsibilityForm?.overseers?.list?.slice(0, 1)\n              \">\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                (click)=\"remove('overseer', overseer)\">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"overseer.member_name\" placement=\"bottom-left\"\n                delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ overseer.member_name }}</span>\n            </ng-container>\n            <button 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 (click)=\"overseers.popover()\" placement=\"right\"\n              *ngIf=\"responsibilityForm?.overseers?.list?.length > 1\">\n              +{{ responsibilityForm?.overseers?.list?.slice(1).length }}\n            </button>\n          </div>\n\n          <!-- <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.overseers?.list?.length>1\" [class.plus]=\"responsibilityForm?.overseers?.list?.length>2\" *ngIf=\"!featureFlag_groups\" >\n                      <span class=\"chip\" *ngFor=\"let overseer of responsibilityForm?.overseers?.list?.slice(0,2)\"><i class=\"icons\" (click)=\"remove('overseer',overseer)\">&#xe90d;</i> {{overseer.member_name}}</span>\n                      <button class=\"count\" *ngIf=\"responsibilityForm?.overseers?.list?.length > 2\" type=\"button\" appPopover (click)=\"overseers.popover()\" placement=\"right\">+{{responsibilityForm?.overseers?.list?.slice(2).length}}</button>\n                  </div> -->\n\n          <div class=\"vx-d-flex vx-align-center\" *ngIf=\"featureFlag_groups\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n              *ngIf=\"responsibilityForm?.overseers?.list.length > 0\">\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"\n                  remove('overseer', responsibilityForm?.overseers?.list[0])\n                \">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"\n                  responsibilityForm?.overseers?.list[0]?.employee_name\n                \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                responsibilityForm?.overseers?.list[0]?.employee_name\n                }}</span>\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 greenBg\"\n                appPopover (click)=\"overseerUser.popover()\" placement=\"right\"\n                *ngIf=\"responsibilityForm?.overseers?.list?.length > 1\">\n                +{{ responsibilityForm?.overseers?.list?.length - 1 }}\n              </button>\n            </div>\n            <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"\n                responsibilityForm?.overseers?.list.length > 0 &&\n                responsibilityForm?.overseersGroups?.list?.length > 0\n              \">&</span>\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n              *ngIf=\"responsibilityForm?.overseersGroups?.list?.length > 0\">\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"\n                  remove(\n                    'overseerGroup',\n                    responsibilityForm?.overseersGroups?.list[0]\n                  )\n                \">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"\n                  responsibilityForm?.overseersGroups?.list[0].group_name\n                \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                responsibilityForm?.overseersGroups?.list[0].group_name\n                }}</span>\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 (click)=\"overseerGroup.popover()\" placement=\"right\"\n                *ngIf=\"responsibilityForm?.overseersGroups?.list?.length > 1\">\n                +{{ responsibilityForm?.overseersGroups?.list?.length - 1 }}\n              </button>\n            </div>\n          </div>\n\n          <!-- <div class=\"chip-container\" *ngIf=\"featureFlag_groups\">\n                      <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.overseers?.list.length > 0\" >\n                          <i class=\"icons cross vx-mr-1\" (click)=\"remove('overseer',responsibilityForm?.overseers?.list[0])\">&#xe90d;</i>\n                          <span class=\"chip\" [appTooltip]=\"responsibilityForm?.overseers?.list[0]?.employee_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\">{{responsibilityForm?.overseers?.list[0]?.employee_name}}</span></span>\n                          <button *ngIf=\"responsibilityForm?.overseers?.list?.length > 1\" class=\"count user\" appPopover (click)=\"overseerUser.popover()\" placement=\"left\"> +{{responsibilityForm?.overseers?.list?.length -1}}</button>\n                      </div>\n                      <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"  *ngIf=\"responsibilityForm?.overseers?.list.length > 0 && responsibilityForm?.overseersGroups?.list?.length > 0\" >&</span>\n                      <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.overseersGroups?.list?.length > 0 \" >\n                          <i class=\"icons cross vx-mr-1\" (click)=\"remove('overseerGroup',responsibilityForm?.overseersGroups?.list[0])\">&#xe90d;</i>\n                          <span class=\"chip\" [appTooltip]=\"responsibilityForm?.overseersGroups?.list[0].group_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\"  >{{responsibilityForm?.overseersGroups?.list[0].group_name}}</span></span>\n                          <button *ngIf=\"responsibilityForm?.overseersGroups?.list?.length > 1\" class=\"count\" appPopover (click)=\"overseerGroup.popover()\" placement=\"right\">+{{responsibilityForm?.overseersGroups?.list?.length -1}}</button>\n                      </div>\n                  </div> -->\n          <button *ngIf=\"activeSelector !== 'overseer'\" class=\"edit\" type=\"button\"\n            (click)=\"activateSelector('overseer', true)\">\n            <i class=\"icons\">&#xe9ba;</i> Edit\n          </button>\n        </div>\n\n        <div class=\"select\" *ngIf=\"\n            (responsibilityForm?.overseers?.notifyList?.length == 0 &&\n              !featureFlag_groups) ||\n            (responsibilityForm?.overseers?.notifyList?.length == 0 &&\n              responsibilityForm?.overseersGroups?.notifyList?.length == 0 &&\n              featureFlag_groups)\n          \">\n          <input type=\"text\" (click)=\"activateSelector('overseerNotify', true)\"\n            placeholder=\"Who should be notified if the responsibility is not complet...\" readonly [appTooltip]=\"\n              'Who should be notified if the responsibility is not completed?'\n            \" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\" />\n        </div>\n        <div class=\"selected\" *ngIf=\"\n            (responsibilityForm?.overseers?.notifyList?.length > 0 &&\n              !featureFlag_groups) ||\n            ((responsibilityForm?.overseers?.notifyList?.length > 0 ||\n              responsibilityForm?.overseersGroups?.notifyList?.length > 0) &&\n              featureFlag_groups)\n          \">\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"!featureFlag_groups\">\n            <ng-container *ngFor=\"\n                let overseer of responsibilityForm?.overseers?.notifyList?.slice(\n                  0,\n                  1\n                )\n              \">\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                (click)=\"remove('overseerNotifyList', overseer)\">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"overseer.member_name\" placement=\"bottom-left\"\n                delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ overseer.member_name }}</span>\n            </ng-container>\n            <button 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 (click)=\"notify.popover()\" placement=\"right\"\n              *ngIf=\"responsibilityForm?.overseers?.notifyList?.length > 1\">\n              +{{ responsibilityForm?.overseers?.notifyList?.slice(1).length }}\n            </button>\n          </div>\n\n          <!-- <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.overseers?.notifyList?.length>1\" [class.plus]=\"responsibilityForm?.overseers?.notifyList?.length>2\" *ngIf=\"!featureFlag_groups\">\n                      <span class=\"chip\" *ngFor=\"let overseer of responsibilityForm?.overseers?.notifyList?.slice(0,2)\"><i class=\"icons\" (click)=\"remove('overseerNotifyList',overseer)\">&#xe90d;</i> {{overseer.member_name}}</span>\n                      <button class=\"count\" *ngIf=\"responsibilityForm?.overseers?.notifyList?.length > 2\" type=\"button\" appPopover (click)=\"notify.popover()\" placement=\"right\">+{{responsibilityForm?.overseers?.notifyList?.slice(2).length}}</button>\n                  </div> -->\n\n          <div class=\"vx-d-flex vx-align-center\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n              *ngIf=\"responsibilityForm?.overseers?.notifyList.length > 0\">\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"\n                  remove(\n                    'overseerNotifyList',\n                    responsibilityForm?.overseers?.notifyList[0]\n                  )\n                \">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"\n                  responsibilityForm?.overseers?.notifyList[0]?.employee_name\n                \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                responsibilityForm?.overseers?.notifyList[0]?.employee_name\n                }}</span>\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 greenBg\"\n                appPopover (click)=\"notifyUser.popover()\" placement=\"right\"\n                *ngIf=\"responsibilityForm?.overseers?.notifyList?.length > 1\">\n                +{{ responsibilityForm?.overseers?.notifyList?.length - 1 }}\n              </button>\n            </div>\n            <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"\n                responsibilityForm?.overseers?.notifyList.length > 0 &&\n                responsibilityForm?.overseersGroups?.notifyList?.length > 0\n              \">&</span>\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"\n                responsibilityForm?.overseersGroups?.notifyList?.length > 0\n              \">\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"\n                  remove(\n                    'overseerGroupNotifyList',\n                    responsibilityForm?.overseersGroups?.notifyList[0]\n                  )\n                \">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"\n                  responsibilityForm?.overseersGroups?.notifyList[0]?.group_name\n                \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                responsibilityForm?.overseersGroups?.notifyList[0]?.group_name\n                }}</span>\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 (click)=\"notifyGroup.popover()\" placement=\"right\" *ngIf=\"\n                  responsibilityForm?.overseersGroups?.notifyList?.length > 1\n                \">\n                +{{\n                responsibilityForm?.overseersGroups?.notifyList?.length - 1\n                }}\n              </button>\n            </div>\n          </div>\n\n          <!-- <div class=\"chip-container\" *ngIf=\"featureFlag_groups\">\n                      <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.overseers?.notifyList.length > 0\">\n                          <i class=\"icons cross vx-mr-1\" (click)=\"remove('overseerNotifyList',responsibilityForm?.overseers?.notifyList[0])\">&#xe90d;</i>\n                          <span class=\"chip\" [appTooltip]=\"responsibilityForm?.overseers?.notifyList[0]?.employee_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\">{{responsibilityForm?.overseers?.notifyList[0]?.employee_name}}</span></span>\n                          <button *ngIf=\"responsibilityForm?.overseers?.notifyList?.length > 1\" class=\"count user\" appPopover (click)=\"notifyUser.popover()\" placement=\"left\"> +{{responsibilityForm?.overseers?.notifyList?.length - 1}}</button>\n                      </div>\n                      <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"  *ngIf=\"responsibilityForm?.overseers?.notifyList.length > 0 && responsibilityForm?.overseersGroups?.notifyList?.length > 0\" >&</span>\n                      <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.overseersGroups?.notifyList?.length > 0 \" >\n                          <i class=\"icons cross vx-mr-1\" (click)=\"remove('overseerGroupNotifyList',responsibilityForm?.overseersGroups?.notifyList[0])\">&#xe90d;</i>\n                          <span class=\"chip\" [appTooltip]=\"responsibilityForm?.overseersGroups?.notifyList[0]?.group_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\"  >{{responsibilityForm?.overseersGroups?.notifyList[0]?.group_name}}</span></span>\n                          <button *ngIf=\"responsibilityForm?.overseersGroups?.notifyList?.length > 1\" class=\"count\" appPopover (click)=\"notifyGroup.popover()\" placement=\"right\">+{{responsibilityForm?.overseersGroups?.notifyList?.length - 1}}</button>\n                      </div>\n                  </div> -->\n          <button *ngIf=\"activeSelector !== 'overseerNotify'\" class=\"edit\" type=\"button\"\n            (click)=\"activateSelector('overseerNotify', true)\">\n            <i class=\"icons\">&#xe9ba;</i> Edit\n          </button>\n        </div>\n        <app-popover #overseers [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let overseer of responsibilityForm?.overseers?.list\n                    | slice : 1;\n                  let j = index\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i class=\"icons\" (click)=\"remove('overseer', overseer)\">&#xe90d;</i>\n                    {{ overseer?.member_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n        <app-popover #overseerUser [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let overseers of responsibilityForm?.overseers?.list\n                    | slice : 1;\n                  let j = index\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i class=\"icons\" (click)=\"remove('overseer', overseers)\">&#xe90d;</i>\n                    {{ overseers?.member_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n        <app-popover #overseerGroup [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let overseer of responsibilityForm?.overseersGroups?.list\n                    | slice : 1;\n                  let i = index\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i class=\"icons\" (click)=\"remove('overseerGroup', overseer)\">&#xe90d;</i>\n                    {{ overseer?.group_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n        <app-popover #notify [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let overseer of responsibilityForm?.overseers?.notifyList\n                    | slice : 1;\n                  let j = index\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i class=\"icons\" (click)=\"remove('overseerNotifyList', overseer)\">&#xe90d;</i>\n                    {{ overseer?.member_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n        <app-popover #notifyUser [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let overseer of responsibilityForm?.overseers?.notifyList\n                    | slice : 1;\n                  let j = index\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i class=\"icons\" (click)=\"remove('overseerNotifyList', overseer)\">&#xe90d;</i>\n                    {{ overseer?.member_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n        <app-popover #notifyGroup [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let group of responsibilityForm?.overseersGroups?.notifyList\n                    | slice : 1;\n                  let i = index\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i class=\"icons\" (click)=\"remove('overseerGroupNotifyList', group)\">&#xe90d;</i>\n                    {{ group?.group_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n      </div>\n    </div>\n  </div>\n\n  <!-- Assurance -->\n  <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.ASSURANCE\" [attr.id]=\"'ASSURANCE'\"\n    [class.active]=\"activeSelector === 'assurance'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'assurance' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"false\">\n      <img [src]=\"ASSETS.reviewer\" alt=\"\" *ngIf=\"\n          responsibilityForm?.assuranceList?.length == 0 ||\n          activeSelector === 'assurance'\n        \" />\n\n      <svg *ngIf=\"\n          responsibilityForm?.assuranceList?.length > 0 &&\n          activeSelector !== 'assurance'\n        \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">Assurance</label>\n        <div class=\"select\" *ngIf=\"responsibilityForm?.assuranceList?.length == 0\">\n          <div class=\"custom-input\" (click)=\"activateSelector('assurance', true)\"\n            aria-placeholder=\"Select the test plan categories that you would like to add this responsibility to.\"></div>\n        </div>\n        <div class=\"selected\" *ngIf=\"responsibilityForm?.assuranceList?.length > 0\">\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n            <ng-container *ngFor=\"\n                let assurance of responsibilityForm?.assuranceList?.slice(0, 1)\n              \">\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                (click)=\"remove('assurance', assurance)\">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"assurance.category_name\"\n                placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ assurance.category_name\n                }}</span>\n            </ng-container>\n            <button 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 (click)=\"assurance.popover()\" placement=\"right\"\n              *ngIf=\"responsibilityForm?.assuranceList?.length > 1\">\n              +{{ responsibilityForm?.assuranceList?.slice(1).length }}\n            </button>\n          </div>\n\n          <button *ngIf=\"activeSelector !== 'assurance'\" class=\"edit\" type=\"button\"\n            (click)=\"activateSelector('assurance', true)\">\n            <i class=\"icons\">&#xe9ba;</i> Edit\n          </button>\n        </div>\n        <app-popover #assurance [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let assurance of responsibilityForm?.assuranceList\n                    | slice : 1;\n                  let j = index\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i class=\"icons\" (click)=\"remove('assurance', assurance)\">&#xe90d;</i>\n                    {{ assurance.category_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n      </div>\n    </div>\n  </div>\n\n  <!-- Requires Audit -->\n  <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\"\n    *ngIf=\"moreOptions?.REQUIRES_AUDIT && responsibilityForm.rc.length > 0\" [attr.id]=\"'REQUIRES_AUDIT'\"\n    [class.active]=\"activeSelector === 'requires_audit'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'requires_audit' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"false\">\n      <img [src]=\"ASSETS.audit\" alt=\"\" *ngIf=\"\n          responsibilityForm?.requiresAuditList?.length == 0 ||\n          activeSelector === 'requires_audit'\n        \" />\n\n      <svg *ngIf=\"\n          responsibilityForm?.requiresAuditList?.length > 0 &&\n          activeSelector !== 'requires_audit'\n        \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">REQUIRES AUDIT?</label>\n        <div class=\"select\" *ngIf=\"responsibilityForm?.requiresAuditList?.length == 0\">\n          <input type=\"text\" placeholder=\"If yes, select an Audit Category.\" readonly\n            (click)=\"activateSelector('requires_audit', true)\" />\n        </div>\n        <div class=\"selected\" *ngIf=\"responsibilityForm?.requiresAuditList?.length > 0\">\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n            <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n              (click)=\"remove('requires_audit', overseer)\">&#xe9ae;</i>\n            <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"\n                responsibilityForm?.requiresAuditList[0]?.category_name\n              \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n              responsibilityForm?.requiresAuditList[0]?.category_name\n              }}</span>\n          </div>\n\n          <button class=\"edit\" type=\"button\" (click)=\"activateSelector('requires_audit', true)\">\n            <i class=\"icons\">&#xe90c;</i> Edit\n          </button>\n          <!-- class=\"icons\">&#xe9ba;</i>\n                      Edit</button> -->\n        </div>\n        <ng-container *ngIf=\"responsibilityForm?.requiresAuditList?.length\">\n          <label class=\"vx-control-panel vx-mt-8\">\n            SAMPLE SIZE\n            <app-cs-switch [(ngValue)]=\"isSample\" (ngValueChange)=\"switchEnable($event)\"></app-cs-switch>\n          </label>\n          <div class=\"sample-part\" [class.disabled]=\"!isSample\">\n            <app-cs-radio value=\"0\" class=\"sample-radio\" (click)=\"selectedSampleData(0)\"\n              [checked]=\"selectedSample === 0\">\n              <div class=\"name\">COUNT</div>\n              <input type=\"number\" placeholder=\"--\" (keypress)=\"checkInputValue($event)\" [(ngModel)]=\"sampleValue\" />\n            </app-cs-radio>\n            <div class=\"or\">OR</div>\n            <app-cs-radio value=\"1\" class=\"sample-radio\" (click)=\"selectedSampleData(1)\"\n              [checked]=\"selectedSample === 1\">\n              <div class=\"name\">PERCENTAGE</div>\n              <input type=\"number\" (keypress)=\"checkInputValue($event)\" [(ngModel)]=\"samplePercentage\"\n                placeholder=\"--\" />\n            </app-cs-radio>\n          </div>\n          <label class=\"vx-control-panel vx-mt-8\">SET A REMINDER IF THE AUDIT PLAN IS NOT CREATED.</label>\n          <div class=\"reminder-part\">\n            Send reminder every\n            <input type=\"number\" value=\"2\" [(ngModel)]=\"sendAuditRemindersValue\" />\n            Day by\n            <div class=\"picker-group\">\n              <input class=\"time\" aria-label=\"12hr format\" [(ngModel)]=\"auditTime\" [ngxTimepicker]=\"dailyTime\"\n                placeholder=\"auditTime.toUpperCase()\" type=\"text\" [min]=\"currentTime\" readonly />\n              <i class=\"icons\">&#xe955;</i>\n              <ngx-material-timepicker #dailyTime [defaultTime]=\"auditTime\">\n              </ngx-material-timepicker>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n\n  <!-- Link of GRC objects -->\n  <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\"\n    *ngIf=\"moreOptions?.GRC_OBJECTS && responsibilityForm.rc.length > 0\" [attr.id]=\"'GRC_OBJECTS'\"\n    [class.active]=\"activeSelector === 'GRC_OBJECTS'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'GRC_OBJECTS' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"false\">\n      <img [src]=\"ASSETS.audit\" alt=\"\" *ngIf=\"\n          responsibilityForm?.selectedGRCObjects?.length == 0 ||\n          activeSelector === 'GRC_OBJECTS'\n        \" />\n\n      <svg *ngIf=\"\n          responsibilityForm?.selectedGRCObjects?.length > 0 &&\n          activeSelector !== 'GRC_OBJECTS'\n        \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">LINK GRC OBJECT(S)</label>\n        <div class=\"select\" *ngIf=\"responsibilityForm?.selectedGRCObjects?.length === 0\">\n          <input type=\"text\" placeholder=\"Select GRC object(s) to link with this responsibility\" readonly\n            (click)=\"activateSelector('GRC_OBJECTS', true)\" />\n        </div>\n        <ng-container *ngIf=\"responsibilityForm?.selectedGRCObjects?.length\">\n          <ng-container *ngFor=\"let selectedGRC of GRC_TYPE_ARRAY; let i = index\">\n            <div *ngIf=\"grcDataWithTypes[selectedGRC]?.length\" class=\"selected vx-mb-2\">\n              <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n                <ng-container *ngFor=\"let grc of grcDataWithTypes[selectedGRC]?.slice(0, 1)\">\n                  <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                    (click)=\"remove('GRC_OBJECTS', grc, 0)\">&#xe9ae;</i>\n                  <div class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\">\n                    {{ selectedGRC | titlecase }}\n                  </div>\n\n                  <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"grc?.name\" placement=\"bottom-left\"\n                    delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ grc?.name }}</span>\n                </ng-container>\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 (click)=\"popoverGRC.popover()\" placement=\"left\"\n                  *ngIf=\"grcDataWithTypes[selectedGRC]?.length > 1\">\n                  +{{ grcDataWithTypes[selectedGRC].length - 1 }}\n                </button>\n              </div>\n\n              <button *ngIf=\"activeSelector !== 'GRC'\" class=\"edit\" type=\"button\" (click)=\"\n                  selectedGRCTab = grcDataWithTypes[selectedGRC][0]?.type;\n                  getOtherGRCObjects();\n                  activateSelector('GRC_OBJECTS', true)\n                \">\n                <i class=\"icons\">&#xe9ba;</i> Edit\n              </button>\n            </div>\n            <app-popover #popoverGRC [dontCloseonClick]=\"true\">\n              <div class=\"wf-action-list\">\n                <ul class=\"action-item\">\n                  <li *ngFor=\"\n                      let grc of grcDataWithTypes[selectedGRC] | slice : 1;\n                      let j = index\n                    \">\n                    <div class=\"avatar-card\">\n                      <span class=\"value\">\n                        <i class=\"icons\" (click)=\"remove('GRC_OBJECTS', grc, j + 1)\">&#xe90d;</i>\n                        {{ grc.name }}\n                      </span>\n                    </div>\n                  </li>\n                </ul>\n              </div>\n            </app-popover>\n          </ng-container>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n\n  <!-- Custom Fields -->\n  <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.CUSTOM_FIELDS \"\n    [attr.id]=\"'CUSTOM_FIELDS'\" [class.active]=\"activeSelector === 'CUSTOM_FIELDS'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'CUSTOM_FIELDS' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"false\">\n      <img [src]=\"ASSETS.audit\" alt=\"\" *ngIf=\"\n          activeSelector === 'CUSTOM_FIELDS'\n        \" />\n\n      <svg *ngIf=\"\n          activeSelector !== 'CUSTOM_FIELDS'\n        \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">Custom Fields</label>\n        <ng-container *ngFor=\"let field of responsibilityForm.customFields\">\n          <div class=\"vc-cf-container vx-d-flex vx-align-center vx-justify-between vx-pt-2 vx-pb-2\">\n            <div class=\"cf-name vx-d-flex vx-align-center vx-justify-between\">\n              <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                  (click)=\"remove('CUSTOM_FIELDS', field)\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"field.name ?? '--'\" placement=\"bottom-left\"\n                  delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ field.name\n                  ?? \"--\" }}</span>\n              </div>\n              <span class=\"vx-fs-11 vx-gray-70\">:&nbsp; </span>\n            </div>\n            <span class=\"cf-value vx-fs-13 vx-fw-500 vx-p-0 vx-m-0 vx-ml-2 vx-d-flex vx-align-center vx-justify-center\">\n              <input type=\"text\" placeholder=\"Enter value\" [(ngModel)]=\"field.value\" />\n            </span>\n          </div>\n        </ng-container>\n        <div *ngIf=\"customFields.length > 0\" class=\"select\">\n          <!-- <input type=\"text\" placeholder=\"+ Add Custom Fields\" readonly\n            (click)=\"activateSelector('CUSTOM_FIELDS', true)\" /> -->\n          <app-cs-select [dataList]='customFields' [isStaticData]=\"true\" [placeholder]=\"'+ Add Custom Fields'\"\n            valueKey=\"id\" [selectedData]=\"'+ Add Custom Fields'\" displayProperty=\"name\" [isArrowIcon]=\"false\"\n            (selectedData)=\"activateSelector('CUSTOM_FIELDS', $event)\"></app-cs-select>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<app-users-radio-list *ngIf=\"activeSelector === 'assignors'\" [usersList]=\"assignorsList\"\n  [selectedUsers]=\"responsibilityForm.assignors.list\" [itemEmailKey]=\"'member_email'\" [userIdKey]=\"'member_id'\"\n  [itemNameKey]=\"'member_name'\" (saveSelectedList)=\"saveSelectedList('assignors', $event)\"\n  (closeUsersList)=\"activeDeselector()\" [loaded]=\"assignorsListLoaded\">\n</app-users-radio-list>\n\n<ng-container *ngIf=\"activeSelector === 'assignees'\">\n  <app-group-users-list *ngIf=\"\n      isEntrust || responsibilityForm?.assignees?.whoCanComplete === 'ANY_ONE'\n    \" [openedFrom]=\"openedFrom\" [usersList]=\"assigneesList\" [fromResponsibility]=\"'Assignee'\" [groupsList]=\"groupsList\"\n    [assigneeGroupsList]=\"groupAssigneeList\" [selectedUsers]=\"responsibilityForm?.assignees?.list\"\n    [selectedGroups]=\"responsibilityForm?.assigneeGroups?.list\" [userIdKey]=\"'my_member_id'\" [groupIdKey]=\"'group_id'\"\n    [loader]=\"userListLoader || assignorsListLoader\" (saveSelectedList)=\"saveSelectedList('assignees', $event)\"\n    (closeUsersList)=\"activeDeselector()\" [groupsEnabled]=\"featureFlag_groups\">\n  </app-group-users-list>\n  <app-users-radio-list *ngIf=\"\n      !isEntrust && responsibilityForm.assignees.whoCanComplete !== 'ANY_ONE'\n    \" [itemEmailKey]=\"'employee_email'\" [usersList]=\"assigneesList\" [selectedUsers]=\"responsibilityForm.assignees.list\"\n    [userIdKey]=\"'employee_id'\" [itemNameKey]=\"'employee_name'\" [fromResponsibility]=\"'Assignee'\"\n    (saveSelectedList)=\"saveSelectedList('assignees', $event)\" (closeUsersList)=\"activeDeselector()\"\n    [loaded]=\"assigneesListLoaded\">\n  </app-users-radio-list>\n</ng-container>\n\n<app-checkpoints *ngIf=\"activeSelector === 'checkpoints'\"\n  [checkpointInstruction]=\"responsibilityForm?.checkpointInstruction\" [checkpointData]=\"responsibilityForm?.checkpoints\"\n  (saveCheckPoint)=\"saveSelectedList('checkpoints', $event)\" (closeCheckPoint)=\"activeDeselector()\"></app-checkpoints>\n<app-frequency-container *ngIf=\"activeSelector === 'frequency'\" [frequencyDetails]=\"frequencyDetails\"\n  [feature]=\"feature\" [onCompletionResponsibility]=\"responsibilityDetails?.onCompletionResponsibility\"\n  (selectedFrequency)=\"frequencyData($event)\" [mode]=\"'responsibility'\" (closeFrequency)=\"activeDeselector()\">\n</app-frequency-container>\n\n<app-responsibility-centers-list *ngIf=\"activeSelector === 'rc'\" [loaded]=\"rcListLoaded\"\n  [responsibilityCentersList]=\"responsibilityCentersList\" [radioSelection]=\"\n    mode == 'EDIT' && responsibilityCenterType === 0 ? true : false\n  \" [selectedResponsibilityCenters]=\"responsibilityForm.rc\" [rcIdKey]=\"'item_id'\"\n  (saveSelectedList)=\"saveSelectedList('rc', $event)\" (closeRcList)=\"activeDeselector()\">\n</app-responsibility-centers-list>\n\n<app-category-multi-select *ngIf=\"activeSelector === 'category'\" [categoryList]=\"categories\"\n  [allCategories]=\"allCategories\" [categoryIdKey]=\"'category_id'\" [selectedCategories]=\"responsibilityForm.category\"\n  (saveSelectedCategory)=\"saveSelectedList('category', $event)\" (closeCategoriesList)=\"activeDeselector()\">\n</app-category-multi-select>\n\n<!-- Program List Popup -->\n<app-list-container *ngIf=\"activeSelector === 'program'\" (close)=\"activeDeselector()\">\n  <app-program-list body (itemsSelectedChange)=\"onItemsSelectedChange($event)\" [selectedItems]=\"selectedPrograms\"\n    [url]=\"programListUrl\"></app-program-list>\n  <div class=\"vx-d-flex vx-align-center vx-justify-between vx-w-100\" footer>\n    <div class=\"left-side vx-fs-12 vx-d-flex\">\n      <ng-container *ngIf=\"allProgamSelected.length > 0\">\n        <button\n          class=\"selected-count-box vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\">\n          {{ allProgamSelected.length }}\n        </button>\n        <span class=\"selected-text\">\n          Program\n          {{ allProgamSelected.length > 1 ? \"Categories\" : \"Category\" }}\n          Selected</span>\n      </ng-container>\n    </div>\n    <div class=\"right-side vx-d-flex\">\n      <button class=\"cancelBtn\" (click)=\"activeDeselector()\">Cancel</button>\n      <button class=\"nextBtn\" (click)=\"activeDeselector(); selectCategory()\">\n        Next <i class=\"icons\">&#xe91e;</i>\n      </button>\n    </div>\n  </div>\n</app-list-container>\n\n<app-owner-list *ngIf=\"activeSelector === 'reviewer' && !featureFlag_groups\" [listHeading]=\"'Select a Reviewer'\"\n  [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\" [usersList]=\"allUsersList\" [showWorkflow]=\"true\"\n  [selectedUsers]=\"responsibilityForm.reviewers.list\" [userIdKey]=\"'employee_id'\" [itemEmailKey]=\"'employee_email'\"\n  [itemNameKey]=\"'member_name'\" (saveSelectedList)=\"\n    saveSelectedList('reviewer', $event);\n    activateSelector('reviewerFrequency', true)\n  \" (closeUsersList)=\"activeDeselector()\" [mode]=\"mode\" [fromResponsibility]=\"'Reviewer'\" [reviewerWorkflowType]=\"\n    responsibilityForm?.reviewers?.sequentialWorkflow\n      ? 'SEQUENTIAL'\n      : 'ANY REVIEWER CAN MARK THIS AS REVIEWED'\n  \" (reviewerWorkflowTypeChange)=\"reviewerTypeChange($event)\">\n</app-owner-list>\n<user-group-list *ngIf=\"activeSelector === 'reviewer' && featureFlag_groups\" [selectedReviewer]=\"true\"\n  [userlist]=\"reviewerMemberIdsList\" [groupEnabled]=\"true\" [groupList]=\"groupReviewerList\"\n  [selectedGroups]=\"responsibilityForm?.groupReviewers?.list\" [selectedUsers]=\"responsibilityForm?.reviewers?.list\"\n  (cancel)=\"activeDeselector()\" (save)=\"\n    saveSelectedList('reviewer', $event);\n    activateSelector('reviewerFrequency', true)\n  \" [mode]=\"mode\" [fromResponsibility]=\"'Reviewer'\" [loading]=\"userListLoader || assignorsListLoader\"\n  (reviewerWorkflowTypeChange)=\"reviewerTypeChange($event)\" [reviewerWorkflowType]=\"\n    responsibilityForm?.reviewers?.sequentialWorkflow\n      ? 'SEQUENTIAL'\n      : 'ANY REVIEWER CAN MARK THIS AS REVIEWED'\n  \" [featureflag]=\"featureFlag_groups\">\n</user-group-list>\n<app-owner-list *ngIf=\"activeSelector === 'overseer' && !featureFlag_groups\" [singularText]=\"'User selected'\"\n  [pluralText]=\"'Users selected'\" [usersList]=\"allUsersList\" [selectedUsers]=\"responsibilityForm.overseers.list\"\n  [userIdKey]=\"'employee_id'\" [fromResponsibility]=\"'Overseer'\" [itemNameKey]=\"'member_name'\"\n  (saveSelectedList)=\"saveSelectedList('overseer', $event)\" (closeUsersList)=\"activeDeselector()\"\n  [itemEmailKey]=\"'employee_email'\">\n</app-owner-list>\n<user-group-list *ngIf=\"activeSelector === 'overseer' && featureFlag_groups\" [groupEnabled]=\"true\"\n  [groupList]=\"groupOverseerList\" [selectedGroups]=\"responsibilityForm?.overseersGroups?.list\"\n  [userlist]=\"overseersList\" [selectedUsers]=\"responsibilityForm.overseers.list\" [fromResponsibility]=\"'Overseer'\"\n  [loading]=\"userListLoader || assignorsListLoader\" (save)=\"saveSelectedList('overseer', $event)\"\n  (cancel)=\"activeDeselector()\" [featureflag]=\"featureFlag_groups\">\n</user-group-list>\n\n<app-owner-list *ngIf=\"activeSelector === 'overseerNotify' && !featureFlag_groups\" [singularText]=\"'User selected'\"\n  [pluralText]=\"'Users selected'\" [usersList]=\"allUsersList\" [fromResponsibility]=\"'Overseer'\"\n  [selectedUsers]=\"responsibilityForm.overseers.notifyList\" [userIdKey]=\"'employee_id'\" [itemNameKey]=\"'member_name'\"\n  (saveSelectedList)=\"saveSelectedList('overseerNotify', $event)\" (closeUsersList)=\"activeDeselector()\"\n  [itemEmailKey]=\"'employee_email'\"></app-owner-list>\n<user-group-list *ngIf=\"activeSelector === 'overseerNotify' && featureFlag_groups\" [userlist]=\"overseersList\"\n  [groupEnabled]=\"true\" [groupList]=\"groupOverseerList\"\n  [selectedGroups]=\"responsibilityForm?.overseersGroups?.notifyList\"\n  [selectedUsers]=\"responsibilityForm.overseers.notifyList\" [fromResponsibility]=\"'Overseer'\"\n  [loading]=\"userListLoader || assignorsListLoader\" (save)=\"saveSelectedList('overseerNotify', $event)\"\n  (cancel)=\"activeDeselector()\" [featureflag]=\"featureFlag_groups\">\n</user-group-list>\n\n<app-owner-list *ngIf=\"activeSelector === 'assurance'\" [singularText]=\"'Test Category selected'\"\n  [pluralText]=\"'Test Categories selected'\" [searchPlaceholder]=\"'Search Test Category...'\"\n  [listHeading]=\"'Select Test Categories'\" [usersList]=\"assuranceCategoriesList\"\n  [noDataText]=\"'No Test Categories Found'\" [selectedUsers]=\"responsibilityForm.assuranceList\"\n  [userIdKey]=\"'category_id'\" [itemEmailKey]=\"'category_name'\" [itemNameKey]=\"'category_name'\"\n  (saveSelectedList)=\"saveSelectedList('assurance', $event)\" (closeUsersList)=\"activeDeselector()\"\n  [searchPlaceholder]=\"'Search Category'\">\n</app-owner-list>\n\n<app-audit-category-list *ngIf=\"activeSelector === 'requires_audit'\" (closeList)=\"activeDeselector()\"\n  [auditCategory]=\"assuranceRequiresAuditList\" (saveSelectedList)=\"saveSelectedList('requires_audit', $event)\"\n  [selectedData]=\"responsibilityForm?.requiresAuditList[0]\"></app-audit-category-list>\n\n<app-loader-inline *ngIf=\"(loader && this.mode === 'EDIT') || entrustLoader\"></app-loader-inline>\n<app-framework-list *ngIf=\"activeSelector === 'framework'\" (assignControl)=\"assignFromFramework($event)\"\n  [previousSelectedValues]=\"selectedFrameworkValues\" (closeFramework)=\"activeDeselector()\"\n  (entrustFramework)=\"entrustFramework($event)\"></app-framework-list>\n\n<!-- risk-calculator here -->\n<app-risk-classification *ngIf=\"activeSelector === 'riskCalculator'\" [currentRiskValue]=\"responsibilityForm.riskClass\"\n  (saveList)=\"saveSelectedList('calculatedrisk', $event)\" (closeList)=\"activeDeselector()\">\n</app-risk-classification>\n\n<app-review-frequency *ngIf=\"activeSelector === 'reviewerFrequency'\" [reviewCompleteDays]=\"\n    responsibilityForm.reviewers.reviewFrequency.reviewCompleteDays\n  \" [reviewNOtCompletedDays]=\"\n    responsibilityForm.reviewers.reviewFrequency.reviewNOtCompletedDays\n  \" (saveReviewFrequency)=\"saveSelectedList('reviewFrequency', $event)\" (closeReviewFrequency)=\"\n    activeDeselector();\n    activateSelector('reviewer', false);\n    responsibilityForm.reviewers.list = [];\n    responsibilityForm.groupReviewers.list = []\n  \" (backToUserList)=\"activeDeselector(); activateSelector('reviewer', true)\">\n</app-review-frequency>\n\n<app-assessment-list *ngIf=\"isAssessment\" [program_ids]=\"responsibilityForm.program[0]?._id\" (cancelAssessment)=\"\n    isAssessment = false; activateSelector('isAssessment', false)\n  \" [isEdit]=\"responsibilityForm?.assessment?.assessment_id ? true : false\"\n  [selectedAssessment]=\"responsibilityForm?.assessment\" (onAssessmentSelect)=\"\n    onAssessmentSelect($event); activateSelector('isAssessment', false)\n  \"></app-assessment-list>\n\n<app-smiley-dialog-inline *ngIf=\"showSmiley\" [message]=\"smileyMessage\" [actionButtons]=\"actionButtons\"\n  (action)=\"action($event)\" (closeSmiley)=\"closeSmiley($event)\"></app-smiley-dialog-inline>\n\n<div class=\"import\" *ngIf=\"activeSelector === 'checkpoints-new'\">\n  <app-create-assessment-container #editor [openPortal]=\"'RESPONSIBILITY_CHECKPOINT'\"\n    (postAssessment)=\"postAssessment($event)\" (setIsUploaded)=\"setIsUploaded($event)\"\n    [checkpointJSON]=\"responsibilityForm.new_checkpoints\">\n  </app-create-assessment-container>\n</div>\n\n<app-grc-object-list *ngIf=\"activeSelector === 'GRC_OBJECTS'\" [grcObject]=\"grcList\"\n  [selectedGRC]=\"responsibilityForm.selectedGRCObjects | refDisconnect\" [loader]=\"grcLoader\" [tableCard]=\"otherGRCCard\"\n  [selectedTab]=\"selectedGRCTab\" [cardLoader]=\"grcTabLoader\" (getOtherGRCObjects)=\"getOtherGRCObjects($event)\"\n  (saveOtherGRC)=\"saveSelectedList('GRC_OBJECTS', $event)\"\n  (closeOtherGRC)=\"activateSelector('GRC_OBJECTS', false)\"></app-grc-object-list>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::ng-deep .workflw-compliance{display:block;position:relative}::ng-deep .workflw-compliance vcomply-editor .editor-container{border-radius:4px}::ng-deep .workflw-compliance vcomply-editor .editor-container .editable-block{min-height:72px;padding:11px 15px;line-height:20px;font-size:14px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}@media not all and (min-resolution: .001dpcm){@supports (-webkit-appearance: none){::ng-deep .workflw-compliance vcomply-editor .editor-container .editable-block:before{opacity:.72}}}::ng-deep .workflw-compliance vcomply-editor .editor-container .editable-block ul{padding:0 0 0 10px;margin-top:0}::ng-deep .workflw-compliance vcomply-editor .editor-container .editable-block ul li{list-style:unset}::ng-deep .workflw-compliance vcomply-editor .editor-container .editable-block ol{padding:0 0 0 10px;margin-top:0}::ng-deep .workflw-compliance vcomply-editor .editor-container .editable-block ol li{list-style:decimal}::ng-deep .workflw-compliance vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .workflw-compliance vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:22px}::ng-deep .workflw-compliance vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .workflw-compliance vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .workflw-compliance .sample-part{display:flex;align-items:center;margin-bottom:4px}::ng-deep .workflw-compliance .sample-part .sample-radio{width:100%}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item{position:relative;width:100%}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item .radio{position:absolute;left:12px;top:12px}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item .value{border:1px solid #dbdbdb;border-radius:4px;height:40px;padding:8px 8px 8px 36px;margin:0;max-width:100%;width:100%;display:flex;align-items:center;justify-content:space-between;pointer-events:none}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item .value .name{color:#747576;font-size:11px;font-weight:500;text-transform:uppercase}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item .value input{border:1px solid #dcdcdc;background:#fff;border-radius:4px;height:24px;width:64px;text-align:center;padding:4px;color:#747576;font-size:13px}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item .value input:focus{outline:none;box-shadow:none}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item input:checked~svg{position:absolute;left:12px;top:12px}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item input:checked~.value{border:1px solid #34aa44;background:#eefcf0;pointer-events:auto}::ng-deep .workflw-compliance .sample-part .or{color:#161b2f;font-size:9px;font-weight:500;text-transform:uppercase;margin:0 10px}::ng-deep .workflw-compliance .sample-part.disabled{pointer-events:none}::ng-deep .workflw-compliance .sample-part.disabled .sample-radio .radio-item .value{background:#fbfbfb;border:1px solid #f1f1f1}::ng-deep .workflw-compliance .reminder-part{border:1px solid #dbdbdb;border-radius:4px;height:40px;padding:4px 12px;color:#747576;font-size:12px;display:flex;align-items:center}::ng-deep .workflw-compliance .reminder-part input{width:30px;border:none;border-radius:0;border-bottom:1px solid #dbdbdb;text-align:center;color:#747576;font-size:13px;font-weight:500;margin:0 4px}::ng-deep .workflw-compliance .reminder-part input:focus{outline:none!important;box-shadow:none!important}::ng-deep .workflw-compliance .reminder-part .picker-group{position:relative}::ng-deep .workflw-compliance .reminder-part .picker-group input{border:1px solid #f1f1f1!important;border-radius:4px!important;width:104px!important;height:28px!important;margin-left:8px!important;padding:6px 8px!important;cursor:pointer;color:#747576!important;font-size:12px!important;font-weight:500!important;text-align:left!important}::ng-deep .workflw-compliance .reminder-part .picker-group input:hover,::ng-deep .workflw-compliance .reminder-part .picker-group input:focus{outline:none!important;box-shadow:none!important}::ng-deep .workflw-compliance .reminder-part .picker-group i{color:#1e5dd3;position:absolute;top:6px;right:10px;font-size:16px}.assessment-text{color:#747576;font-size:11px;display:flex;align-items:center;padding:0 8px;margin:-16px 0 20px}.assessment-text i.alert-icon{color:#f2bf19;font-size:16px;margin-right:8px}.assessment-text strong{font-weight:600}.assessment-text button.remove-btn{background:transparent;border-radius:0;border:none;color:#1e5dd3;font-size:10px;font-weight:600;padding:0;margin:0}.import{position:fixed;inset:0 30px 0 0;z-index:-1;width:calc(100vw - 30px)}.wf-action-list ul.action-item li.multiple-program{background:#f8f8f8}.wf-action-list ul.action-item li.multiple-program .avatar-card{padding:2px 7.5px}.wf-action-list ul.action-item li.multiple-program .avatar-card span.value{color:#747576;font-size:11px;font-weight:600;width:unset}.primary-label{background:#7aa7f7;border-radius:2px;color:#fff;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 4px;line-height:12px;margin:0 4px}.edit-due-date{display:flex;align-items:baseline;justify-content:space-between}.left-side{color:#707070}.right-side button{border-radius:2px;height:24px;background:#1e5dd3!important;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;font-weight:500;border:none!important;padding:0 8px;margin:0 0 0 8px}.right-side button i{margin-left:8px;font-size:11px}.right-side button:disabled{background:#f1f1f1!important;color:#747576!important;opacity:1}.right-side button.cancelBtn{background:transparent!important;color:#eb2424!important}.selected-count-box{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem;position:relative}.selected-text{color:#707070;font-size:11px;font-weight:500;position:fixed;padding-left:2.5rem}::ng-deep .vc-divider{border-top:.5px solid #dbdbdb;width:100%}::ng-deep .vc-cf-container{border-bottom:1px solid #E3E3E9}::ng-deep .vc-cf-container:first-of-type,::ng-deep .vc-cf-container:only-child{border-top:1px solid #E3E3E9}::ng-deep .vc-cf-container .cf-name{width:9.25rem}::ng-deep .vc-cf-container .cf-value{width:calc(100% - 9.75rem)}::ng-deep .vc-cf-container .cf-value input{height:24px!important;border:1px solid #CDCED6!important;padding:0 .5rem!important;color:#565a6f!important;font-size:11px!important}::ng-deep .vc-cf-container .cf-value input::placeholder{color:#a9aab6!important}::ng-deep .vc-cf-container .cf-value input:hover{border-color:#343952!important}::ng-deep .vc-cf-container .cf-value input:focus{outline:none;border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd31a}\n", "@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::-webkit-scrollbar-track{background-color:#f1f1f1;position:absolute}::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}button{font-family:Poppins,sans-serif}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;font-size:13px;color:#747576;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField::placeholder{font-size:13px;color:#747576}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxEnable.withBtn:after{display:none}::ng-deep .selectBoxEnable.withBtn button.setBtn{background:transparent;border-radius:0;border:none;min-width:98px}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer .chipName.no-width{max-width:unset}::ng-deep .chipContainer .chipName.full-width{max-width:25rem}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}::ng-deep .chipContainer button.countBtn.blueBg{background:#1e5dd3}::ng-deep .workflowLavel{background:#f1f1f1;border-radius:.125rem;color:#042e7d;min-width:1rem;height:1rem}::ng-deep .reviewSelection{border-radius:.25rem;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep .reviewSelection:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectButton{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectButton:hover,::ng-deep .selectButton:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep button.createNewBtn{background:transparent;border-radius:0;border:none}::ng-deep .vx-form-group{display:block;position:relative;margin-bottom:20px}::ng-deep .vx-form-group:after{content:\"\";display:block;clear:both}::ng-deep .vx-form-group .select{position:relative}::ng-deep .vx-form-group .select:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#707070;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .vx-form-group .select input{cursor:pointer;padding-right:30px!important}::ng-deep .vx-form-group .select .custom-input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;outline:none;padding:3px 12px;line-height:16px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .vx-form-group .select .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:13px;width:94%;display:block;pointer-events:none;opacity:.8}::ng-deep .vx-form-group .select .custom-input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .vx-form-group .select .custom-input.frequency-custom-input{padding-right:108px;display:flex;align-items:center}::ng-deep .vx-form-group .select+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .select+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .select+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .select~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .select.button-sec:after{display:none}::ng-deep .vx-form-group .select.button-sec button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;position:absolute;top:12px;right:8px;padding:0;margin:0}::ng-deep .vx-form-group .select+.vx-control-panel{margin-top:8px}::ng-deep .vx-form-group .select+.selected{margin-top:8px}::ng-deep .vx-form-group .select.select{margin-top:8px}::ng-deep .vx-form-group .upload-format{border:1px solid #dbdbdb;border-radius:4px;padding:8px 12px;display:block}::ng-deep .vx-form-group .upload-format span.text{line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:block;margin-bottom:6px}::ng-deep .vx-form-group .upload-format .radio-group{display:flex}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio{display:inline-block}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;margin-left:8px}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio+app-cs-radio{margin-left:12px}::ng-deep .vx-form-group .upload-format~.upload-format{margin-top:4px}::ng-deep .vx-form-group .form-tab{display:flex;justify-content:flex-start}::ng-deep .vx-form-group .form-tab button{background:transparent;color:#161b2f;font-size:11px;line-height:16px;text-transform:uppercase;cursor:pointer;padding:8px 8px 8px 0;border:none;outline:none;font-weight:500}::ng-deep .vx-form-group .form-tab button:disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .form-tab button+button{padding:8px}::ng-deep .vx-form-group .form-tab button.active{color:#1e5dd3}::ng-deep .vx-form-group .tab-group{border:1px solid #dbdbdb;border-radius:4px;padding:0;display:block;position:relative;transition:all .2s ease-in-out}::ng-deep .vx-form-group .tab-group:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group .tab-group .upload-file{padding:16px 62px 16px 24px;display:flex;align-items:center;justify-content:space-between}::ng-deep .vx-form-group .tab-group .upload-file .image{width:80px}::ng-deep .vx-form-group .tab-group .upload-file .browse span{display:inline-block;font-size:12px;color:#747576;line-height:16px;padding:0 4px}::ng-deep .vx-form-group .tab-group .upload-file .browse .label{font-size:11px;color:#1e5dd3;line-height:16px;font-weight:600;text-transform:uppercase;margin:0;padding:0}::ng-deep .vx-form-group .tab-group .upload-file .browse .label input{opacity:0;position:absolute;margin:0;padding:0;inset:0;cursor:pointer;width:100%}::ng-deep .vx-form-group .tab-group.active{border-color:#1e5dd3}::ng-deep .vx-form-group .tab-group.uploaded{margin-top:4px}::ng-deep .vx-form-group .tab-group.uploaded .upload-file{padding:8px 0!important;text-align:center}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .image{display:none}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .browse{width:100%;text-align:center}::ng-deep .vx-form-group .tab-group+label.vx-form-group{margin-top:8px;margin-bottom:4px}::ng-deep .vx-form-group .file-list{background:#fbfbfb;border:1px solid #f1f1f1;border-radius:4px;padding:12px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;position:relative}::ng-deep .vx-form-group .file-list span.file-name{color:#747576;line-height:16px;font-size:11px;font-weight:400;cursor:pointer;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .vx-form-group .file-list .button-group{display:flex}::ng-deep .vx-form-group .file-list button{font-size:12px;color:#eb2424;cursor:pointer;display:flex;padding:0;border:none;outline:none;background:transparent}::ng-deep .vx-form-group .file-list button.edit{color:#1e5dd3}::ng-deep .vx-form-group .file-list button+button{margin-left:16px}::ng-deep .vx-form-group .file-list+.file-list{margin-top:4px}::ng-deep .vx-form-group .file-list .file-container{display:flex;justify-content:space-between;width:100%}::ng-deep .vx-form-group .file-list.policy{background:#fff}::ng-deep .vx-form-group .file-list cs-select{position:relative;margin-top:8px;width:100%}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group input.value{height:32px!important;font-size:13px!important}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group i{right:12px!important;top:12px!important}::ng-deep .vx-form-group .file-list app-line-loader{display:block;position:absolute;left:10px;right:10px;bottom:0}::ng-deep .vx-form-group label.vx-control-panel{color:#161b2f;font-size:11px;font-weight:500;line-height:16px;margin-bottom:8px;display:block;text-transform:uppercase;text-align:left}::ng-deep .vx-form-group label.vx-control-panel.custom-tag{font-size:10px}::ng-deep .vx-form-group label.vx-control-panel.vx-mt-8{margin-top:8px}::ng-deep .vx-form-group label.vx-control-panel span.required{color:#eb2424;font-size:14px;font-weight:500;position:relative;top:-2px}::ng-deep .vx-form-group label.vx-control-panel .button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;padding:0;margin:0}::ng-deep .vx-form-group label.vx-control-panel app-cs-switch{float:right;display:block}::ng-deep .vx-form-group label.vx-control-panel i{margin-left:8px;font-size:12px;color:#1e5dd3;cursor:pointer;position:relative;top:1px}::ng-deep .vx-form-group label.vx-control-panel i.depreciation-icon{color:#e4b700;font-size:16px;position:relative;top:3px}::ng-deep .vx-form-group label.vx-control-panel .checkpoint-version{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:10px;font-weight:600;line-height:14px;margin-left:4px;padding:0 2px}::ng-deep .vx-form-group input[type=text],::ng-deep .vx-form-group .input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;outline:none;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400}::ng-deep .vx-form-group input[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group input[type=text]:focus,::ng-deep .vx-form-group .input:focus,::ng-deep .vx-form-group input[type=text]:hover,::ng-deep .vx-form-group .input:hover{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group input[type=text].error,::ng-deep .vx-form-group .input.error{border-color:#eb2424;color:#eb2424;margin-bottom:4px}::ng-deep .vx-form-group input[type=text].error:focus,::ng-deep .vx-form-group .input.error:focus{box-shadow:0 0 5px #d31e1e45}::ng-deep .vx-form-group input[type=text]:disabled,::ng-deep .vx-form-group .input:disabled{background:#f1f1f1;cursor:not-allowed;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group input[type=text]:disabled:hover,::ng-deep .vx-form-group .input:disabled:hover{border-color:#dbdbdb;box-shadow:none}::ng-deep .vx-form-group input[type=text] span.text,::ng-deep .vx-form-group .input span.text{font-size:13px;color:#747576;font-weight:400;display:block;width:100%}::ng-deep .vx-form-group input[type=text] .input-group,::ng-deep .vx-form-group .input .input-group{display:flex;align-items:center}::ng-deep .vx-form-group input[type=text] .input-group.counter,::ng-deep .vx-form-group .input .input-group.counter{min-width:96px;width:96px}::ng-deep .vx-form-group input[type=text] .input-group.counter button,::ng-deep .vx-form-group .input .input-group.counter button{height:24px;width:24px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#747576;font-size:8px;cursor:pointer;outline:none}::ng-deep .vx-form-group input[type=text] .input-group.counter input,::ng-deep .vx-form-group .input .input-group.counter input{-webkit-appearance:textfield;-moz-appearance:textfield;height:24px;width:calc(100% - 48px);border:1px solid #f1f1f1;outline:none;padding:0 6px;text-align:center}::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-outer-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-outer-spin-button{appearance:none;margin:0}::ng-deep .vx-form-group input[type=text]+.file-list,::ng-deep .vx-form-group .input+.file-list{margin-top:8px}::ng-deep .vx-form-group input[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]:-ms-input-placeholder,::ng-deep .vx-form-group .input:-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]::-ms-input-placeholder,::ng-deep .vx-form-group .input::-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group .classification{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;padding:8px 12px;display:flex;justify-content:space-between}::ng-deep .vx-form-group .classification label{margin:0 4px 0 0;width:100%;position:relative;z-index:1}::ng-deep .vx-form-group .classification label span{display:block;width:100%;height:24px;border:1px solid #f1f1f1;border-radius:2px;line-height:24px;font-size:10px;text-align:center;color:#747576;font-weight:500;position:relative;text-transform:uppercase}::ng-deep .vx-form-group .classification label span:before{height:2px;content:\"\";top:0;right:0;left:0;border-radius:2px;position:absolute;transition:all .2s ease-in-out}::ng-deep .vx-form-group .classification label input{opacity:0;position:absolute;inset:0;margin:0;padding:0;width:100%;height:100%;cursor:pointer;z-index:1}::ng-deep .vx-form-group .classification label input:checked+span{color:#fff}::ng-deep .vx-form-group .classification label input:checked+span:before{bottom:0;height:100%;z-index:-1}::ng-deep .vx-form-group .classification label.low span:before{background:#34aa44}::ng-deep .vx-form-group .classification label.low-med span:before{background:#f2bf19}::ng-deep .vx-form-group .classification label.med-high span:before{background:#f29619}::ng-deep .vx-form-group .classification label.high span:before{background:#eb2424}::ng-deep .vx-form-group .classification label:last-of-type{margin-right:0}::ng-deep .vx-form-group .input{display:flex;align-items:center}::ng-deep .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;padding:8px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:flex;align-items:center;position:relative;justify-content:space-between}::ng-deep .vx-form-group .selected.first-field{z-index:2}::ng-deep .vx-form-group .selected .chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .vx-form-group .selected .chip-container.checkpoints{width:calc(100% - 120px)}::ng-deep .vx-form-group .selected .chip-container span.chip{background:#fff;border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;padding:0 8px;color:#1e5dd3;font-size:12px;display:block;width:auto;max-width:100%;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .vx-form-group .selected .chip-container span.chip.disabled{background:#f1f1f1;box-shadow:none;color:#747576;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .selected .chip-container span.chip i{font-weight:400;margin-right:8px;cursor:pointer;font-size:10px;position:relative;top:1px}::ng-deep .vx-form-group .selected .chip-container span.chip span.step{background:#1e5dd3;border-radius:2px;color:#fff;font-size:9px;line-height:14px;padding:0 4px;font-weight:400;text-align:center;min-width:auto;margin-right:4px}::ng-deep .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question{display:flex;align-items:center;justify-content:space-between;width:100%}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.value{color:#1e5dd3;font-size:12px;font-weight:400;line-height:24px;padding:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 80px)}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.label{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding-left:4px;padding-right:4px;line-height:12px;margin-left:8px}::ng-deep .vx-form-group .selected .chip-container span.value{color:#747576;font-size:13px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 52px);padding:0 4px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text{color:#747576;font-size:10px;font-weight:500;padding:0 8px;width:122px;line-height:14px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first{position:relative;min-width:162px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first:before{background:#f1f1f1;content:\"\";position:absolute;top:0;right:0;height:calc(100% + 12px);width:1px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text .no{color:#1e5dd3}::ng-deep .vx-form-group .selected .chip-container.plus span.chip{max-width:calc(50% - 35px)}::ng-deep .vx-form-group .selected .chip-container.more-one span.chip{max-width:50%}::ng-deep .vx-form-group .selected .chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .vx-form-group .selected .chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:100px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count{border-radius:20px;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .vx-form-group .selected .chip-container .chip-inner i.cross{cursor:pointer;position:relative;top:1px;font-size:8px}::ng-deep .vx-form-group .selected button.count{background:#1e5dd3;border-radius:2px;height:24px;padding:0 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none;color:#fff;font:13px;font-weight:500;line-height:20px;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit{border:none;border-radius:0;background:transparent;outline:none;cursor:pointer;display:block;font-size:11px;font-weight:600;color:#1e5dd3;text-transform:uppercase;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit i{font-weight:400;font-size:8px;margin-right:4px}::ng-deep .vx-form-group .selected button.close-btn{background:transparent;border:none;padding:0;margin-left:8px;font-size:10px;color:#c7381b;display:flex;align-items:center}::ng-deep .vx-form-group .selected .workflow-label{min-width:92px;padding:4px;text-align:center;margin-left:-8px;margin-right:8px;border-right:1px solid #f1f1f1}::ng-deep .vx-form-group .selected .workflow-label p{margin:0;display:block;text-transform:uppercase}::ng-deep .vx-form-group .selected .workflow-label p.title{font-size:9px;line-height:12px;color:#161b2f;font-weight:500}::ng-deep .vx-form-group .selected .workflow-label p.description{font-size:11px;line-height:16px;color:#161b2f;font-weight:600}::ng-deep .vx-form-group .selected .workflow-label+.chip-container{width:calc(100% - 148px)}::ng-deep .vx-form-group .selected+.selected{margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .selected+app-cs-switch.who-toggle label.cs-switch span.value{color:#747576}::ng-deep .vx-form-group .selected+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .selected~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .selected.readOnly{pointer-events:none}::ng-deep .vx-form-group .selected span.chip{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .vx-form-group .select-list{position:absolute;background:#fff;box-shadow:0 0 5px #1e5dd345;top:100%;right:0;left:0;z-index:2}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item{width:100%;padding:12px 16px}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item:hover{background:#f8f8f8}::ng-deep .vx-form-group ::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;line-height:38px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400;border:none;padding:0 12px 0 34px;outline:none}::ng-deep .vx-form-group .date-time-picker .picker-group input:focus,::ng-deep .vx-form-group .date-time-picker .picker-group input:hover{box-shadow:none;border:none}::ng-deep .vx-form-group .date-time-picker .picker-group input::placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input:-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input::-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group i{display:flex;justify-content:center;align-items:center;height:16px;width:12px;position:absolute;left:12px;top:0;color:#747576;font-size:12px;pointer-events:none}::ng-deep .vx-form-group app-cs-radio.main-filed{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;color:#707070}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group app-cs-radio.disabled{pointer-events:none;opacity:.5;filter:grayscale(1);background:#f1f1f1}::ng-deep .vx-form-group .switch-row{display:flex}::ng-deep .vx-form-group .switch-row app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:0;text-transform:uppercase;color:#747576!important}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value i{display:inline-flex;font-size:11px;cursor:pointer;color:#1e5dd3;align-items:center;line-height:16px;margin:0 4px}::ng-deep .vx-form-group .switch-row app-cs-switch+app-cs-switch{margin-left:8px}::ng-deep .vx-form-group .switch-row.align-right{justify-content:flex-end}::ng-deep .vx-form-group .switch-row.align-right label.cs-switch span.value{margin-right:8px}::ng-deep .vx-form-group .risk-type-field{background:#f8f8f8;border:1px solid #dbdbdb;border-radius:4px;height:40px;display:flex;align-items:center;padding:4px;position:relative;z-index:1}::ng-deep .vx-form-group .risk-type-field .type-item{width:50%;position:relative}::ng-deep .vx-form-group .risk-type-field .type-item button{background:transparent;border:none;border-radius:0;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase;width:100%;height:32px;padding:0 12px;text-align:left}::ng-deep .vx-form-group .risk-type-field .type-item button.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item .info{color:#1e5dd3;font-size:12px;position:absolute;top:10px;right:12px;cursor:pointer}::ng-deep .vx-form-group .risk-type-field .type-item .info.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item.active button{color:#1e5dd3!important}::ng-deep .vx-form-group .risk-type-field .type-item:nth-child(2).active~.background-glider{transform:translate(100%)}::ng-deep .vx-form-group .risk-type-field .background-glider{background:#fff;border-radius:4px;box-shadow:0 1px 3px #161b2f26;position:absolute;display:flex;width:212px;height:32px;z-index:-1;transition:.25s ease-out}.left{width:36px;height:36px;margin-top:26px;margin-left:-58px;margin-right:20px;display:flex;justify-content:center;align-items:center;position:relative;z-index:10;border-radius:50%}.left.deadline-completed{margin-top:18px}.left.checked{background:transparent}.left img{width:36px}.left .checkIcon{width:32px;height:32px;background:#fff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}.left .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}.left .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}.right{width:100%}.right span.indicator{position:absolute;top:36px;left:-16px;font-size:12px;color:#f0b819;cursor:pointer}.form-group-row{display:flex;position:relative;transition:all .2s ease-in-out}.form-group-row.disabled{-webkit-user-select:none;user-select:none;pointer-events:none;filter:grayscale(1);z-index:2}.form-group-row.disabled .left{position:relative}.form-group-row.disabled .left:before{content:\"\";position:absolute;inset:2px 0 0 2px;background:#fff;opacity:.7;border-radius:50%;width:32px;height:32px}.form-group-row.disabled .right{opacity:.3}.form-group-row.active{pointer-events:none;filter:grayscale(0);z-index:2;opacity:1}.form-group-row.active .right .vx-form-group input,.form-group-row.active .right .vx-form-group .custom-input,.form-group-row.active .right .vx-form-group .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}.form-group-row.active .right .vx-form-group .selectBoxEnable.disabled{border-color:#dbdbdb;box-shadow:none}::ng-deep .radio-group-selector app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .radio-group-selector app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .radio-group-selector app-cs-radio label.radio-item .radio,::ng-deep .radio-group-selector app-cs-radio label.radio-item .radiomark{position:absolute!important;top:9px;left:12px}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value{font-size:11px!important;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0!important;max-width:100%!important;font-weight:500!important;color:#707070!important}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value i{font-size:12px;color:#1e5dd3}::ng-deep .radio-group-selector app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}::ng-deep .wf-action-list{width:220px}::ng-deep .wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}::ng-deep .wf-action-list ul.action-item{display:block}::ng-deep .wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}::ng-deep .wf-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}::ng-deep .wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .wf-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .wf-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .wf-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .wf-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .wf-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}::ng-deep .wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}p.error-message{font-size:11px;font-weight:400;color:#eb2424;line-height:16px;margin-top:8px;margin-bottom:0}.edit-loader{position:absolute;top:-3px;left:-3px;width:46px;height:46px;transform:rotate(180deg)}.circular-loader{animation:rotate 2s linear infinite;height:100%;transform-origin:center center;width:100%;position:absolute;top:0;left:0;margin:auto}.loader-path{stroke-dasharray:150,200;stroke-dashoffset:-10;animation:dash 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35}to{stroke-dasharray:89,200;stroke-dashoffset:-124}}::ng-deep .dropdown{position:fixed;background:#fff;box-shadow:0 3px 6px #00000029;padding:24px 0;z-index:9;max-height:calc(100vh - 200px);overflow:auto}::ng-deep .dropdown ul.dropdown-list{padding:0 20px;margin:0;display:block}::ng-deep .dropdown ul.dropdown-list li{list-style:none}::ng-deep .dropdown ul.dropdown-list li app-cs-radio{display:flex}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.radio{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.value{padding:11px 12px 11px 32px;width:100%;border:1px solid #bcbcbc;border-radius:4px;margin-left:0;max-width:100%}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item svg{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item input[type=radio]:checked~span.value{background:#e8feeb;border-color:#34aa44}::ng-deep .dropdown ul.dropdown-list li+li{margin-top:8px}app-smiley-dialog{position:relative;z-index:10}app-smiley-dialog-inline{position:absolute;top:-3px;right:0;bottom:0;z-index:999;width:520px;height:calc(100vh + 3px)}::ng-deep .vx-overlay{position:fixed;z-index:3;inset:0}::ng-deep dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}::ng-deep dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}::ng-deep dp-date-picker input:focus{outline:none}::ng-deep dp-date-picker .dp-popup{width:412px;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep dp-date-picker .dp-popup dp-day-calendar,::ng-deep dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep dp-date-picker .dp-popup dp-day-calendar button,::ng-deep dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}::ng-deep dp-date-picker .dp-open+div{position:fixed!important;inset:0!important;display:flex;justify-content:center;align-items:center;z-index:99;pointer-events:none;background:#0000004d}::ng-deep .cdk-overlay-container{z-index:2147483002!important}::ng-deep .dp-popup{z-index:999;display:flex!important;align-items:center;justify-content:center;width:100vw;height:100vh;background:#0000004d!important;box-shadow:unset!important}::ng-deep .dp-popup dp-day-calendar{width:412px!important;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep .dp-popup dp-day-calendar,::ng-deep .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep .dp-popup dp-day-calendar button,::ng-deep .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep .dp-popup dp-day-calendar .dp-weekdays,::ng-deep .dp-popup dp-month-calendar .dp-weekdays,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}@keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}::ng-deep span.file{display:block;width:20px;min-width:20px;border-radius:0 0 2px 2px;border:1px solid transparent;border-color:#747576;position:relative;margin-right:5px;border-top:none;margin-top:5px;background:#fff}::ng-deep span.file.table{margin-right:8px;width:18px;min-width:18px}::ng-deep span.file.table i{font-size:8px}::ng-deep span.file.table .format{height:8px;font-size:7px;line-height:8px;font-weight:400}::ng-deep span.file:before{position:absolute;border-radius:0;top:-4px;right:-1px;content:\"\";height:4px;width:4px;display:block;background:linear-gradient(45deg,#747576 0% 1%,#747576 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file:after{height:4px;left:-1px;right:3px;border-top:1px solid;border-right:none;border-left:1px solid;content:\"\";top:-4px;position:absolute;border-radius:2px 0 0;background:#fff}::ng-deep span.file .format{height:10px;font-size:6px;text-transform:uppercase;background:transparent;font-weight:600;text-align:center;display:block;line-height:10px}::ng-deep span.file i{font-size:10px;height:10px;display:flex;align-items:center;justify-content:center;color:#dbdbdb}::ng-deep span.file.docx{width:22px!important}::ng-deep span.file.pdf,::ng-deep span.file.template{border-color:#f31c39}::ng-deep span.file.pdf:before,::ng-deep span.file.template:before{background:linear-gradient(45deg,#f31c39 0% 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#f31c39\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.pdf:after,::ng-deep span.file.template:after{border-color:#f31c39}::ng-deep span.file.pdf .format,::ng-deep span.file.template .format{color:#f31c39}::ng-deep span.file.xlsx,::ng-deep span.file.xls,::ng-deep span.file.css,::ng-deep span.file.scss,::ng-deep span.file.less{border-color:#34aa44}::ng-deep span.file.xlsx:before,::ng-deep span.file.xls:before,::ng-deep span.file.css:before,::ng-deep span.file.scss:before,::ng-deep span.file.less:before{background:linear-gradient(45deg,#34aa44 0% 1%,#34aa44 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.xlsx:after,::ng-deep span.file.xls:after,::ng-deep span.file.css:after,::ng-deep span.file.scss:after,::ng-deep span.file.less:after{border-color:#34aa44;color:#34aa44}::ng-deep span.file.xlsx .format,::ng-deep span.file.xls .format,::ng-deep span.file.css .format,::ng-deep span.file.scss .format,::ng-deep span.file.less .format{color:#34aa44}::ng-deep span.file.doc,::ng-deep span.file.docx,::ng-deep span.file.psd{border-color:#1e5dd3}::ng-deep span.file.doc:before,::ng-deep span.file.docx:before,::ng-deep span.file.psd:before{background:linear-gradient(45deg,#1e5dd3 0% 1%,#1e5dd3 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.doc:after,::ng-deep span.file.docx:after,::ng-deep span.file.psd:after{border-color:#1e5dd3}::ng-deep span.file.doc .format,::ng-deep span.file.docx .format,::ng-deep span.file.psd .format{color:#1e5dd3}::ng-deep span.file.ppt,::ng-deep span.file.ai,::ng-deep span.file.html,::ng-deep span.file.jpg,::ng-deep span.file.jpeg,::ng-deep span.file.png{border-color:#f6882f}::ng-deep span.file.ppt:before,::ng-deep span.file.ai:before,::ng-deep span.file.html:before,::ng-deep span.file.jpg:before,::ng-deep span.file.jpeg:before,::ng-deep span.file.png:before{background:linear-gradient(45deg,#f6882f 0% 1%,#f6882f 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.ppt:after,::ng-deep span.file.ai:after,::ng-deep span.file.html:after,::ng-deep span.file.jpg:after,::ng-deep span.file.jpeg:after,::ng-deep span.file.png:after{border-color:#f6882f}::ng-deep span.file.ppt .format,::ng-deep span.file.ai .format,::ng-deep span.file.html .format,::ng-deep span.file.jpg .format,::ng-deep span.file.jpeg .format,::ng-deep span.file.png .format{color:#f6882f}::ng-deep span.file.php{border-color:#7aa6f7}::ng-deep span.file.php:before{background:linear-gradient(45deg,#7aa6f7 0% 1%,#7aa6f7 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.php:after{border-color:#7aa6f7}::ng-deep span.file.php .format{color:#7aa6f7}::ng-deep ngx-material-timepicker-container .timepicker-backdrop-overlay{background-color:#0000000d!important;z-index:9999999999!important}::ng-deep ngx-material-timepicker-container .timepicker-overlay{z-index:9999999999!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker{width:232px!important;border-radius:2px!important;box-shadow:0 4px 30px #161b2f26!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header{background-color:#fff!important;padding:0!important;border-radius:2px 2px 0 0}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container{display:block!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time{color:#000!important;width:150px!important;margin:0 auto;line-height:60px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control{font-size:40px;background-color:transparent!important;color:#000!important;font-weight:600;text-align:right;caret-color:transparent;outline:none;font-family:Poppins;line-height:56px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:focus,::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:hover{background-color:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control:last-of-type .timepicker-dial__control{text-align:left}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time span{padding:0 8px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period{display:flex!important;width:182px;margin:0 auto!important;background:#f1f1f1;padding:4px 10px;border-radius:20px;position:relative}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period:before{background:#f1f1f1;content:\"\";position:absolute;top:15px;left:-25px;width:calc(100% + 50px);height:2px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period{flex-direction:unset!important;position:relative;z-index:1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:after{content:\"\";position:absolute;right:-12px;top:0;border-left:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:before{content:\"\";position:absolute;left:-18px;top:0;border-right:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button{font-size:11px;background-color:transparent;padding:0;border-radius:20px;color:#747576;font-weight:600;font-family:Poppins;width:84px;height:24px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button.timepicker-dial__item_active{background:#fff!important;color:#1e5dd3!important;box-shadow:0 1px 2px #dbdbdb}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button+button{margin-left:0!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face{width:200px!important;height:200px!important;padding:10px!important;background:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer{height:92px!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span{color:#000}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span.active{color:#fff}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand{height:80px!important;top:calc(50% - 80px)!important;background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number>span.active{background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand_minute:before{border:4px solid #1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions{display:flex!important;padding:10px 0 0!important;background:#fff!important;justify-content:space-around!important;border-radius:0 0 2px 2px!important;overflow:hidden}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div:first-child ngx-material-timepicker-button button.timepicker-button{background:#f8f8f8;color:#1e5dd3}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button{line-height:28px!important;width:100%;background:#1e5dd3;color:#fff;border-radius:0!important;height:32px!important;width:116px!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button span{font-weight:500!important;font-size:11px;font-family:Poppins}::ng-deep vcomply-editor{display:block}::ng-deep vcomply-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep vcomply-editor .editor-container:hover,::ng-deep vcomply-editor .editor-container:focus-within{border:1px solid #1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep vcomply-editor .editor-container mention-list ul li a{font-size:16px!important}::ng-deep vcomply-editor .editor-container .editable-block{background:#fff;min-height:60px;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep vcomply-editor .editor-container .editable-block:before{color:#747576!important}::ng-deep vcomply-editor .editor-container .editor-tools{border-top:1px solid #dbdbdb;border-radius:0 0 3px 3px}::ng-deep vcomply-editor .editor-container .editor-tools:hover{border-color:#1e5dd3}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep marx-modal .popup-modal-background{background-color:#161b2fcc!important}::ng-deep .within-box{background:#f1f1f1;border-radius:.125rem;color:#042e7d}::ng-deep .within-value{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-word}.wf-tooltip{pointer-events:none;position:absolute;max-width:300px;font-size:12px;text-align:left;color:#fff;padding:8px 12px;background:#000;border-radius:2px;z-index:-222;top:0;opacity:0;white-space:break-spaces;word-break:break-word}.wf-tooltip *{color:#fff!important}.wf-tooltip:empty{display:none!important}.wf-tooltip.white{box-shadow:0 2px 8px #1c5bd159;color:#747576;background:#fff;text-align:left}.wf-tooltip.white b{color:#747576!important}.wf-tooltip.animate-top{animation:animate-top .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-right{animation:animate-right .3s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-bottom{animation:animate-bottom .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-left{animation:animate-left .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip-top:after{top:100%;left:50%;margin-left:-5px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip-bottom:after{bottom:100%;left:50%;margin-left:-5px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-left.white:after{border-color:transparent transparent transparent #f1f1f1}.wf-tooltip-left:after{top:50%;left:100%;margin-top:-5px;border-width:5px;border-color:transparent transparent transparent #000000}.wf-tooltip-right.white:after{border-color:transparent #f1f1f1 transparent transparent}.wf-tooltip-right:after{top:50%;right:100%;margin-top:-5px;border-width:5px;border-color:transparent #000000 transparent transparent}.wf-tooltip-bottom-right:after{bottom:100%;left:100%;margin-left:-20px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom-right.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-bottom-left:after{bottom:100%;left:0;margin-left:10px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom-left.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-top-left:after{top:100%;left:0;margin-left:10px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top-left.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip-top-right:after{top:100%;left:100%;margin-left:-5px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top-right.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip:after{content:\"\";position:absolute;border-style:solid}.wf-tooltip span.within{font-size:80%;display:block;width:100%}.wf-tooltip .small{display:block;font-size:10px}.wf-tooltip .within-box{background:#f1f1f1;border-radius:2px;color:#042e7d!important;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 2px;margin-right:2px}.wf-tooltip-show{pointer-events:none;opacity:1;z-index:2147483001}\n"] }]
+            args: [{ selector: 'app-workflow-compliance', template: "<div class=\"workflw-compliance\" *ngIf=\"!showSmiley\">\n  <!-- Behalf -->\n  <div *ngIf=\"mode !== 'EDIT'\" class=\"form-group-row\" [class.active]=\"activeSelector === 'assignors'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'assignors' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"\n        responsibilityForm?.assignors?.list?.length > 0 &&\n        activeSelector !== 'assignors'\n      \">\n      <img [src]=\"ASSETS.im_creating\" alt=\"im\" *ngIf=\"\n          responsibilityForm?.assignors?.list?.length == 0 ||\n          activeSelector === 'assignors'\n        \" />\n\n      <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\" *ngIf=\"\n          responsibilityForm?.assignors?.list?.length > 0 &&\n          activeSelector !== 'assignors'\n        \">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">I am creating this responsibility on behalf of someone else\n          <app-cs-switch [ngValue]=\"responsibilityForm.assignors.enable\" (ngValueChange)=\"\n              responsibilityForm.assignors.enable = $event;\n              responsibilityForm.assignors.list = []\n            \">\n          </app-cs-switch>\n        </label>\n        <div class=\"select\" *ngIf=\"\n            responsibilityForm?.assignors?.list?.length === 0 ||\n            activeSelector === 'assignors'\n          \">\n          <input type=\"text\" (click)=\"activateSelector('assignors', true)\"\n            placeholder=\"Who is responsible for managing this responsibility?\" readonly\n            [disabled]=\"!responsibilityForm?.assignors?.enable\" />\n        </div>\n        <div class=\"selected\" *ngIf=\"\n            responsibilityForm?.assignors?.list?.length > 0 &&\n            activeSelector !== 'assignors'\n          \">\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n            <ng-container *ngFor=\"\n                let b_user of responsibilityForm?.assignors?.list?.slice(0, 1)\n              \">\n              <i (click)=\"remove('assignors', b_user)\"\n                class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"b_user.member_name\" placement=\"bottom-left\"\n                delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ b_user.member_name }}</span>\n            </ng-container>\n            <button *ngIf=\"responsibilityForm?.assignors?.list?.length > 1\"\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 (click)=\"behalf.popover()\" placement=\"right\">\n              +{{ responsibilityForm?.assignors?.list?.slice(1).length }}\n            </button>\n          </div>\n\n          <!-- <div class=\"chip-container\">\n                      <span class=\"chip\" *ngFor=\"let b_user of responsibilityForm?.assignors?.list?.slice(0,2)\"><i\n                              class=\"icons\" (click)=\"remove('assignors',b_user)\">&#xe90d;</i>\n                          {{b_user.member_name}}</span>\n                      <button class=\"count\" *ngIf=\"responsibilityForm?.assignors?.list?.length > 2\" type=\"button\"\n                          appPopover (click)=\"behalf.popover()\" placement=\"right\">+\n                          {{responsibilityForm?.assignors?.list?.slice(2).length}}</button>\n                  </div> -->\n          <button *ngIf=\"activeSelector !== 'assignors'\" class=\"edit\" type=\"button\"\n            (click)=\"activateSelector('assignors', true)\">\n            <i class=\"icons\">&#xe9ba;</i> Edit\n          </button>\n        </div>\n        <app-popover #behalf [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let b_user of responsibilityForm?.assignors?.list | slice : 2;\n                  let j = index\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i class=\"icons\" (click)=\"remove('assignors', b_user)\">&#xe90d;</i>\n                    {{ b_user.member_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n        <p *ngIf=\"invalidType === 'whom'\" [appScrollInView]=\"true\" class=\"error-message\">\n          Please select the person responsible for managing this responsibility.\n        </p>\n      </div>\n    </div>\n  </div>\n\n  <!-- What -->\n  <div class=\"form-group-row\" [class.active]=\"activeSelector === 'framework'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'responsibilityName' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"\n        responsibilityForm?.responsibility?.name.trim() !== '' &&\n        !focus.responsibilityName\n      \">\n      <img [src]=\"ASSETS.what\" alt=\"im\" *ngIf=\"\n          responsibilityForm?.responsibility?.name.trim() === '' ||\n          focus.responsibilityName\n        \" />\n\n      <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\" *ngIf=\"\n          responsibilityForm?.responsibility?.name.trim() !== '' &&\n          !focus.responsibilityName\n        \">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">\n          What? <span class=\"required\">*</span>\n          <button *ngIf=\"\n              isFrameworkAvailable &&\n              mode !== 'EDIT' &&\n              openedFrom !== 'RISK_TREATMENT' &&\n              assessmentDetails?.assessment_type !== 'compliance_audit'\n            \" (click)=\"activateSelector('framework', true)\" class=\"button\">\n            Select From A framework\n          </button>\n        </label>\n        <span *ngIf=\"responsibilityForm?.responsibility?.keyResponsibility\" class=\"indicator\"\n          [appTooltip]=\"'This responsibility is marked as key responsibility.'\" placement=\"bottom\" type=\"black\"\n          delay=\"0\" [tooltipMandatory]=\"true\">\n          <i class=\"icons\">&#xea70;</i>\n        </span>\n        <input *ngIf=\"\n            responsibilityForm?.responsibility?.name.trim() == '' || !isEditWhat\n          \" type=\"text\" [ngModel]=\"responsibilityForm.responsibility.name\" placeholder=\"What is the responsibility?\"\n          (change)=\"whatChanged($event)\" (focusin)=\"activateSelector('responsibilityName', true)\"\n          (focusout)=\"activeDeselector()\" (clickOutside)=\"testFunction()\" #what />\n        <div class=\"selected\" *ngIf=\"\n            responsibilityForm?.responsibility?.name.trim() != '' && isEditWhat\n          \">\n          <div class=\"chip-container\">\n            <span class=\"value\">{{\n              responsibilityForm.responsibility?.name\n              }}</span>\n          </div>\n          <button *ngIf=\"assessmentDetails?.assessment_type !== 'compliance_audit'\" class=\"edit\" type=\"button\"\n            (click)=\"onEditWhat($event)\">\n            <i class=\"icons\">&#xe9ba;</i> Edit\n          </button>\n        </div>\n        <p *ngIf=\"invalidType === 'what'\" [appScrollInView]=\"true\" class=\"error-message\">\n          Please enter a name for this responsibility.\n        </p>\n        <div class=\"switch-row align-right\">\n          <app-cs-switch [ngValue]=\"responsibilityForm.responsibility?.keyResponsibility\" (ngValueChange)=\"\n              responsibilityForm.responsibility.keyResponsibility = $event\n            \">Key Responsibility\n          </app-cs-switch>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Who -->\n  <div class=\"form-group-row\" [class.active]=\"activeSelector === 'assignees'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'assignees' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"\n        responsibilityForm?.assignees?.list?.length > 0 &&\n        activeSelector !== 'assignees'\n      \">\n      <img [src]=\"ASSETS.case_assignees\" alt=\"im\" *ngIf=\"\n          responsibilityForm?.assignees?.list?.length == 0 ||\n          activeSelector === 'assignees'\n        \" />\n\n      <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\" *ngIf=\"\n          responsibilityForm?.assignees?.list?.length > 0 &&\n          activeSelector !== 'assignees'\n        \">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <div class=\"edit-due-date\">\n          <label class=\"vx-control-panel\">Who? <span class=\"required\">*</span></label>\n          <div *ngIf=\"allowEditDueDateFeatureFlag && false\" class=\"switch-row align-right\">\n            <app-cs-switch [ngValue]=\"responsibilityForm.allowEditDueDate\"\n              (ngValueChange)=\"responsibilityForm.allowEditDueDate = $event\">ALLOW ASSIGNEE TO EDIT COMPLETED WORK<i\n                class=\"icons\" [appTooltip]=\"\n                  'If it\u2019s enabled, the assignee will have the option to modify a previously completed due date.'\n                \" placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i>\n            </app-cs-switch>\n          </div>\n        </div>\n        <div class=\"select vx-mt-0\" *ngIf=\"\n            responsibilityForm?.assignees?.list?.length == 0 &&\n            (!featureFlag_groups ||\n              (responsibilityForm?.assigneeGroups?.list?.length == 0 &&\n                featureFlag_groups))\n          \">\n          <input type=\"text\" (click)=\"activateSelector('assignees', true)\"\n            placeholder=\"Who is responsible for completing the responsibility?\" readonly />\n        </div>\n\n        <div class=\"selected\" *ngIf=\"\n            (responsibilityForm?.assignees?.list?.length > 0 &&\n              !featureFlag_groups) ||\n            ((responsibilityForm?.assignees?.list?.length > 0 ||\n              responsibilityForm?.assigneeGroups?.list?.length > 0) &&\n              featureFlag_groups)\n          \">\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"!featureFlag_groups\">\n            <ng-container *ngFor=\"\n                let e_user of responsibilityForm?.assignees?.list?.slice(0, 1)\n              \">\n              <i (click)=\"remove('assignees', e_user)\"\n                class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"e_user.member_name\" placement=\"bottom-left\"\n                delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ e_user.member_name }}</span>\n            </ng-container>\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 greenbg\"\n              appPopover (click)=\"assignees.popover()\" placement=\"right\"\n              *ngIf=\"responsibilityForm?.assignees?.list?.length > 1\">\n              +{{ responsibilityForm?.assignees?.list?.slice(1).length }}\n            </button>\n          </div>\n\n          <div class=\"vx-d-flex vx-align-center\" *ngIf=\"featureFlag_groups\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n              *ngIf=\"responsibilityForm?.assignees?.list?.length > 0\">\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"\n                  remove('assignees', responsibilityForm?.assignees?.list[0])\n                \">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"\n                  responsibilityForm?.assignees?.list[0]?.employee_name\n                \" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\">{{\n                responsibilityForm?.assignees?.list[0]?.employee_name\n                }}</span>\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 greenBg\"\n                appPopover (click)=\"user.popover()\" placement=\"left\"\n                *ngIf=\"responsibilityForm?.assignees?.list?.length > 1\">\n                +{{ responsibilityForm?.assignees?.list?.length - 1 }}\n              </button>\n            </div>\n            <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"\n                responsibilityForm?.assignees?.list?.length > 0 &&\n                responsibilityForm?.assigneeGroups?.list?.length > 0\n              \">&</span>\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n              *ngIf=\"responsibilityForm?.assigneeGroups?.list?.length\">\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"\n                  remove(\n                    'groupassignees',\n                    responsibilityForm?.assigneeGroups?.list[0]\n                  )\n                \">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"\n                  responsibilityForm?.assigneeGroups?.list[0]?.group_name\n                \" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\">{{\n                responsibilityForm?.assigneeGroups?.list[0]?.group_name\n                }}</span>\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 (click)=\"group.popover()\" placement=\"right\"\n                *ngIf=\"responsibilityForm?.assigneeGroups?.list?.length > 1\">\n                +{{ responsibilityForm?.assigneeGroups?.list?.length - 1 }}\n              </button>\n            </div>\n          </div>\n\n          <!-- <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.assignees?.length>1\" [class.plus]=\"responsibilityForm?.assignees?.length>2\" *ngIf=\"!featureFlag_groups\">\n                      <span class=\"chip\" *ngFor=\"let e_user of responsibilityForm?.assignees?.list?.slice(0,2)\"><i\n                              class=\"icons\" (click)=\"remove('assignees',e_user)\">&#xe90d;</i>\n                          {{e_user.member_name}}</span>\n                      <button class=\"count\" *ngIf=\"responsibilityForm?.assignees?.list?.length > 2\" type=\"button\"\n                          appPopover (click)=\"assignees.popover()\" placement=\"right\">+\n                          {{responsibilityForm?.assignees?.list?.slice(2).length}}</button>\n                  </div> -->\n          <!-- <div class=\"chip-container\" *ngIf=\"featureFlag_groups\">\n                      <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.assignees?.list?.length > 0\" >\n                          <i class=\"icons cross vx-mr-1\" (click)=\"remove('assignees',responsibilityForm?.assignees?.list[0])\" >&#xe90d;</i>\n                          <span class=\"chip\" [appTooltip]=\"responsibilityForm?.assignees?.list[0]?.employee_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\">{{responsibilityForm?.assignees?.list[0]?.employee_name}}</span></span>\n                          <button *ngIf=\"responsibilityForm?.assignees?.list?.length > 1\" class=\"count user\" appPopover (click)=\"user.popover()\" placement=\"left\"> +{{responsibilityForm?.assignees?.list?.length -1}}</button>\n                      </div>\n                      <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"  *ngIf=\"responsibilityForm?.assignees?.list?.length > 0 && responsibilityForm?.assigneeGroups?.list?.length > 0\" >&</span>\n                      <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.assigneeGroups?.list?.length\" >\n                          <i *ngIf=\"(!allGroupAssignee || mode !== 'EDIT')\" class=\"icons cross vx-mr-1\" (click)=\"remove('groupassignees',responsibilityForm?.assigneeGroups?.list[0])\" >&#xe90d;</i>\n                          <span class=\"chip\" [appTooltip]=\"responsibilityForm?.assigneeGroups?.list[0]?.group_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\">{{responsibilityForm?.assigneeGroups?.list[0]?.group_name}}</span></span>\n                          <button *ngIf=\"responsibilityForm?.assigneeGroups?.list?.length > 1\" class=\"count\" appPopover (click)=\"group.popover()\" placement=\"right\">+{{responsibilityForm?.assigneeGroups?.list?.length - 1}}</button>\n                      </div>\n                  </div> -->\n          <button *ngIf=\"activeSelector !== 'assignees'\" class=\"edit\" type=\"button\"\n            (click)=\"activateSelector('assignees', true)\">\n            <i class=\"icons\">&#xe9ba;</i> Edit\n          </button>\n        </div>\n        <app-popover #user [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let e_user of responsibilityForm?.assignees?.list | slice : 1\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i class=\"icons\" (click)=\"remove('assignees', e_user)\">&#xe90d;</i>\n                    {{ e_user.member_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n        <app-popover #group [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let group of responsibilityForm?.assigneeGroups?.list\n                    | slice : 1\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i *ngIf=\"\n                        !featureFlag_groups ||\n                        (featureFlag_groups &&\n                          (!allGroupAssignee || mode !== 'EDIT'))\n                      \" class=\"icons\" (click)=\"remove('groupassignees', group)\">&#xe90d;</i>\n                    {{ group.group_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n\n        <p *ngIf=\"invalidType === 'who'\" [appScrollInView]=\"true\" class=\"error-message\">\n          Please select the person responsible for completing this\n          responsibility.\n        </p>\n        <ng-container *ngIf=\"!isGroupAssigned\">\n\n          <app-cs-radio *ngIf=\"mode !== 'EDIT'\" (checkedEvent)=\"\n              responsibilityForm.assignees.whoCanComplete = 'ANY_ONE'\n            \" [checked]=\"responsibilityForm.assignees.whoCanComplete == 'ANY_ONE'\" [name]=\"'what'\">ANY SELECTED PERSON\n            CAN COMPLETE THIS\n            <i class=\"icons\" [appTooltip]=\"\n                'If selected, only one responsibility will be created.'\n              \" placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i>\n          </app-cs-radio>\n\n          <app-cs-radio *ngIf=\"mode !== 'EDIT'\" (checkedEvent)=\"responsibilityForm.assignees.whoCanComplete = 'ALL'\"\n            [checked]=\"responsibilityForm.assignees.whoCanComplete == 'ALL'\" [name]=\"'what'\">ALL SELECTED PERSONS NEED\n            TO COMPLETE THIS<i class=\"icons\" [appTooltip]=\"\n              'If selected, separate responsibilities will be created for each person.'\n            \" placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i>\n          </app-cs-radio>\n\n          <div class=\"switch-row align-right\" *ngIf=\"\n              mode == 'EDIT' &&\n              (!featureFlag_groups ||\n                (responsibilityForm?.assigneeGroups?.list.length === 0 &&\n                  featureFlag_groups))\n            \">\n            <app-cs-switch (ngValueChange)=\"openAssigneeChangeConfirmation($event)\" [ngValue]=\"\n                responsibilityForm.assignees.whoCanComplete == 'ANY_ONE'\n              \">\n              ANY SELECTED PERSON CAN COMPLETE THIS\n            </app-cs-switch>\n          </div>\n        </ng-container>\n        <app-popover #assignees [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let e_user of responsibilityForm?.assignees?.list | slice : 1;\n                  let j = index\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i class=\"icons\" (click)=\"remove('assignees', e_user)\">&#xe90d;</i>\n                    {{ e_user.member_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n      </div>\n    </div>\n  </div>\n\n  <!-- When? -->\n  <div class=\"form-group-row\" [class.active]=\"activeSelector === 'frequency'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'frequency' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"\n        !responsibilityForm?.frequency || activeSelector === 'frequency'\n      \">\n      <img [src]=\"ASSETS.when\" alt=\"im\" *ngIf=\"!responsibilityForm?.frequency || activeSelector === 'frequency'\" />\n\n      <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\" *ngIf=\"\n          responsibilityForm?.frequency &&\n          activeSelector !== 'frequency' &&\n          responsibilityForm?.frequency != '' &&\n          responsibilityForm?.frequency != '5~0~0~0'\n        \">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">When? <span class=\"required\">*</span></label>\n        <div *ngIf=\"\n            responsibilityForm?.frequency == '' ||\n            responsibilityForm?.frequency == '5~0~0~0'\n          \" class=\"select button-sec\">\n          <input type=\"text\" (click)=\"activateSelector('frequency', true)\" [placeholder]=\"frequencyPlaceholder\"\n            readonly />\n          <button (click)=\"activateSelector('frequency', true)\" type=\"button\">\n            Set A frequency\n          </button>\n        </div>\n        <div *ngIf=\"\n            responsibilityForm?.frequency != '' &&\n            responsibilityForm?.frequency !== '5~0~0~0'\n          \" class=\"selected button-sec\">\n          <span class=\"chip\" [appTooltip]=\"frequencyPlaceholder\" placement=\"bottom-left\" delay=\"0\" type=\"black\"\n            [tooltipMandatory]=\"false\">{{ frequencyPlaceholder }}</span>\n          <button *ngIf=\"activeSelector !== 'frequency'\" type=\"button\" class=\"edit\"\n            (click)=\"activateSelector('frequency', true)\">\n            <i class=\"icons\">&#xe9ba;</i>Edit\n          </button>\n        </div>\n        <p *ngIf=\"invalidType === 'when'\" [appScrollInView]=\"true\" class=\"error-message\">\n          Please select the frequency of occurrence for this responsibility.\n        </p>\n      </div>\n    </div>\n  </div>\n\n  <!-- Notes -->\n  <div class=\"form-group-row\" [class.active]=\"activeSelector === 'notes'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'notes' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"\n        checkBlank(responsibilityForm?.description).trim() !== '' &&\n        !focus.description\n      \">\n      <img [src]=\"ASSETS.notes\" alt=\"im\" *ngIf=\"\n          checkBlank(responsibilityForm?.description).trim() === '' ||\n          focus.description\n        \" />\n\n      <svg class=\"checkIcon\" *ngIf=\"\n          checkBlank(responsibilityForm?.description).trim() !== '' &&\n          !focus.description\n        \" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">Notes</label>\n        <vcomply-editor [(ngModel)]=\"responsibilityForm.description\" [editorConfig]=\"{\n            mode: 'prime',\n            colorPalette: true,\n            link: true,\n            id: 'notes',\n            placeholder:\n              'Add more information about completing the responsibility'\n          }\"></vcomply-editor>\n      </div>\n    </div>\n  </div>\n\n  <!-- Objective -->\n  <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.OBJECTIVE\" [attr.id]=\"'OBJECTIVE'\"\n    [class.active]=\"activeSelector === 'objective'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'objective' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"\n        checkBlank(responsibilityForm?.objective).trim() !== '' &&\n        !focus.objective\n      \">\n      <img [src]=\"ASSETS.objectives\" alt=\"im\" *ngIf=\"\n          checkBlank(responsibilityForm?.objective).trim() === '' ||\n          focus.objective\n        \" />\n\n      <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\" *ngIf=\"\n          checkBlank(responsibilityForm?.objective).trim() !== '' &&\n          !focus.objective\n        \">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">Objective</label>\n        <vcomply-editor [(ngModel)]=\"responsibilityForm.objective\" [editorConfig]=\"{\n            mode: 'prime',\n            colorPalette: true,\n            id: 'objective',\n            link: true,\n            placeholder:\n              'This option lets you specify an objective for the responsibility.'\n          }\"></vcomply-editor>\n      </div>\n    </div>\n  </div>\n\n  <!-- Responsibility Center -->\n  <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.RC\" [attr.id]=\"'RC'\"\n    [class.active]=\"activeSelector === 'rc'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'rc' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"\n        responsibilityForm?.rc?.length > 0 && activeSelector !== 'rc'\n      \">\n      <img [src]=\"ASSETS.responsibility_center\" alt=\"\"\n        *ngIf=\"responsibilityForm?.rc?.length == 0 || activeSelector === 'rc'\" />\n\n      <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\n        *ngIf=\"responsibilityForm?.rc?.length > 0 && activeSelector !== 'rc'\">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">Responsibility Center </label>\n\n        <div class=\"select\" *ngIf=\"responsibilityForm?.rc?.length === 0\">\n          <div class=\"custom-input\" (click)=\"activateSelector('rc', true)\"\n            aria-placeholder=\"Select the responsibility center or the responsibility centers for this responsibility.\">\n          </div>\n          <!-- <input type=\"text\" (click)=\"activateSelector('rc',true)\" placeholder=\"Select Responsibility Center(s)\" readonly> -->\n        </div>\n\n        <div class=\"selected\" *ngIf=\"responsibilityForm?.rc?.length > 0\"\n          [class.readOnly]=\"openedFrom === 'RISK_TREATMENT'\">\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n            *ngFor=\"let rc of responsibilityForm?.rc?.slice(0, 1)\">\n            <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"remove('rc', rc)\"\n              *ngIf=\"openedFrom !== 'RISK_TREATMENT'\">&#xe9ae;</i>\n            <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"rc?.item_name\" placement=\"bottom-left\" delay=\"0\"\n              type=\"black\" [tooltipMandatory]=\"false\">{{ rc?.item_name }}</span>\n            <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n              *ngIf=\"responsibilityForm?.rc?.length > 1\" appPopover (click)=\"rcPopover.popover()\" placement=\"left\">\n              +{{ responsibilityForm?.rc?.slice(1).length }}\n            </button>\n          </div>\n\n          <!-- <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.rc?.length>1\" [class.plus]=\"responsibilityForm?.rc?.length>2\">\n                      <span class=\"chip\" *ngFor=\"let rc of responsibilityForm?.rc?.slice(0,2)\"><i class=\"icons\" (click)=\"remove('rc',rc)\" *ngIf=\"openedFrom !== 'RISK_TREATMENT'\">&#xe90d;</i>{{rc?.item_name}}</span>\n                      <button class=\"count\" *ngIf=\"responsibilityForm?.rc?.length > 2\" type=\"button\" appPopover (click)=\"rc.popover()\" placement=\"right\" placement=\"right\">+{{responsibilityForm?.rc?.slice(2).length}}</button>\n                  </div> -->\n\n          <button *ngIf=\"activeSelector !== 'rc' && openedFrom !== 'RISK_TREATMENT'\" class=\"edit\" type=\"button\"\n            (click)=\"activateSelector('rc', true)\">\n            <i class=\"icons\">&#xe9ba;</i> Edit\n          </button>\n        </div>\n        <app-popover #rcPopover [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let rc of responsibilityForm?.rc | slice : 1;\n                  let j = index\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i class=\"icons\" (click)=\"remove('rc', rc)\">&#xe90d;</i>\n                    {{ rc.item_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n\n        <ng-container *ngIf=\"\n            isResponsibilityRcLinkEnabled &&\n            (mode != 'EDIT' || responsibilityForm?.rc?.length <= 1)\n          \">\n          <!-- <app-cs-radio><div [appTooltip]=\"'Create separate responsibilities for each responsibility center'\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"true\">CREATE SEPARATE RESPONSIBILITIES FOR EACH RESPONSIBILITY CEN\u2026</div><i class=\"icons\" [appTooltip]=\"'If selected, separate responsibilities will be created for each Responsibility Center.'\" placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i></app-cs-radio> -->\n          <app-cs-radio [class.disabled]=\"\n          mode == 'EDIT' &&\n          responsibilityForm.responsibilityCenterType === 1 &&\n          responsibilityForm?.rc?.length > 1\n        \" [checked]=\"responsibilityCenterType === 1\" [name]=\"'ff_responsibility_rc_link'\"\n            (checkedEvent)=\"onRcTypeChange(1)\">DISPLAY THE SAME RESPONSIBILITY IN ALL RESPONSIBILITY CENTERS<i\n              class=\"icons\" [appTooltip]=\"\n            'If selected, the same responsibility will be linked to each Responsibility Center.'\n          \" placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i></app-cs-radio>\n          <app-cs-radio [class.disabled]=\"\n              mode == 'EDIT' &&\n              responsibilityForm.responsibilityCenterType === 1 &&\n              responsibilityForm?.rc?.length > 1\n            \" [checked]=\"responsibilityCenterType === 0\" [name]=\"'ff_responsibility_rc_link'\"\n            (checkedEvent)=\"onRcTypeChange(0)\">\n            <div class=\"rc-radio-text\" [appTooltip]=\"\n                'Create separate responsibilities for each responsibility centers'\n              \" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"true\">\n              CREATE SEPARATE RESPONSIBILITIES FOR EACH RESPONSIBILITY CEN\u2026\n            </div>\n            <i class=\"icons\" [appTooltip]=\"\n                'If selected, separate responsibilities will be created for each Responsibility Center.'\n              \" placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i>\n          </app-cs-radio>\n\n        </ng-container>\n      </div>\n    </div>\n  </div>\n\n  <!-- Program -->\n  <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.PROGRAM\" [attr.id]=\"'PROGRAM'\"\n    [class.active]=\"activeSelector === 'program'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'program' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"\n        responsibilityForm?.program?.length > 0 && activeSelector !== 'program'\n      \">\n      <img [src]=\"ASSETS.case_category\" alt=\"\" *ngIf=\"\n          (responsibilityForm?.program?.length == 0 ||\n            activeSelector === 'program') &&\n          allProgamSelected?.length == 0\n        \" />\n\n      <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\" *ngIf=\"\n          (responsibilityForm?.program?.length > 0 &&\n            activeSelector !== 'program') ||\n          allProgamSelected?.length > 0\n        \">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">Program</label>\n        <div class=\"select\" *ngIf=\"allProgamSelected?.length == 0\">\n          <div class=\"custom-input\" (click)=\"activateSelector('program', true)\"\n            aria-placeholder=\"Select the Program or Program Categories that this responsibility relates to.\"></div>\n          <!-- <input type=\"text\" (click)=\"activateSelector('program',true)\" placeholder=\"Select Responsibility program(s)\" readonly> -->\n        </div>\n        <div class=\"selected\" *ngIf=\"allProgamSelected?.length > 0\">\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n            <ng-container>\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" *ngIf=\"\n                  !hiddenList?.includes('PROGRAM') &&\n                  !program?.isViewOnlyProgram\n                \" (click)=\"remove('program', allProgamSelected[0])\">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"allProgamSelected[0]?.name ?? '--'\"\n                placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ allProgamSelected[0]?.name\n                ?? \"--\" }}</span>\n            </ng-container>\n            <button 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 (click)=\"program.popover()\" placement=\"right\" *ngIf=\"allProgamSelected?.length > 1\">\n              +{{ allProgamSelected?.length - 1 }}\n            </button>\n          </div>\n\n          <!-- <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.program?.length>1\" [class.plus]=\"responsibilityForm?.program?.length>2\">\n                              <span class=\"chip\" *ngFor=\"let program of responsibilityForm?.program\"><i class=\"icons\" *ngIf=\"feature.isFeatureEnabled('ff_deprecate_primary_program_flag')\" (click)=\"remove('program',program)\">&#xe90d;</i> {{program?.name??'--'}}</span>\n                              <!- - <button *ngIf=\"responsibilityForm?.program?.length > 2\" class=\"count\" type=\"button\" appPopover (click)=\"program.popover()\" placement=\"right\">+ {{responsibilityForm?.program?.slice(2).length}}</button> - ->\n                              <button *ngIf=\"responsibilityForm?.linkedProgram?.length > 1\" class=\"count\" type=\"button\" appPopover (click)=\"program.popover()\" placement=\"right\">+ {{responsibilityForm?.linkedProgram?.length - 1}}</button>\n                          </div> -->\n\n          <button *ngIf=\"\n              activeSelector !== 'program' && !hiddenList.includes('PROGRAM')\n            \" class=\"edit\" type=\"button\" (click)=\"activateSelector('program', true)\">\n            <i class=\"icons\">&#xe9ba;</i> Edit\n          </button>\n        </div>\n\n        <app-popover #program [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let program of allProgamSelected | slice : 1;\n                  let j = index\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\" [appTooltip]=\"program?.name\" placement=\"bottom\" type=\"black\" delay=\"0\"\n                    [tooltipMandatory]=\"false\">\n                    <i *ngIf=\"\n                        !hiddenList?.includes('PROGRAM') &&\n                        !program?.isViewOnlyProgram\n                      \" class=\"icons\" (click)=\"remove('program', program)\">&#xe90d;</i>\n                    {{ program?.name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n        <div *ngIf=\"responsibilityForm?.customTags?.length > 0\">\n          <ng-container *ngFor=\"let tag of responsibilityForm?.customTags\">\n            <ng-container *ngIf=\"tag?.name?.trim()\">\n              <label class=\"vx-control-panel vx-mt-2\">{{\n                tag?.name\n                }}</label>\n              <input type=\"text\" [(ngModel)]=\"tag.value\" placeholder=\"{{ tag?.name }}\" />\n            </ng-container>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Format & Evidence -->\n  <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.FORMATE_EVIDENCE\"\n    [attr.id]=\"'FORMATE_EVIDENCE'\" [class.active]=\"activeSelector === 'formate_evidence'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'formate_evidence' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"false\">\n      <img *ngIf=\"\n          this.responsibilityForm.formatAndEvidence.evidenceRequired == false &&\n          this.responsibilityForm.formatAndEvidence.formatFiles.length == 0 &&\n          this.responsibilityForm.formatAndEvidence.formatLinks?.length == 0\n        \" [src]=\"ASSETS.format_evidence\" alt=\"im\" />\n\n      <svg *ngIf=\"\n          this.responsibilityForm.formatAndEvidence.evidenceRequired ||\n          this.responsibilityForm.formatAndEvidence.formatFiles.length ||\n          this.responsibilityForm.formatAndEvidence.formatLinks?.length\n        \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <app-format-and-evidence (updateFiles)=\"saveSelectedList('formate_evidence', $event)\" [mode]=\"'responsibility'\"\n        [formatEvidanceData]=\"responsibilityForm?.formatAndEvidence\" [organization_id]=\"organizationId\"\n        [orgDetails]=\"orgDetails\">\n      </app-format-and-evidence>\n    </div>\n  </div>\n\n  <!-- Assessment -->\n  <div *ngIf=\"moreOptions?.ASSESSMENT\" [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\"\n    [attr.id]=\"'ASSESSMENT'\" [class.active]=\"activeSelector === 'isAssessment'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'isAssessment' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"responsibilityForm.assessment?.assessment_id\">\n      <img *ngIf=\"!responsibilityForm.assessment?.assessment_id\" [src]=\"ASSETS.assessments\" alt=\"im\" />\n\n      <svg *ngIf=\"responsibilityForm.assessment?.assessment_id\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 52 52\">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">ASSESSMENTS</label>\n        <div *ngIf=\"!responsibilityForm.assessment?.assessment_id\" class=\"select\">\n          <input type=\"text\" (click)=\"\n              activateSelector('isAssessment', true); isAssessment = true\n            \" placeholder=\"Select an assessment for this responsibility\"\n            [disabled]=\"responsibilityForm.checkpoints?.length\" readonly />\n        </div>\n        <div class=\"selected\" *ngIf=\"responsibilityForm.assessment?.assessment_id\">\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n            <i *ngIf=\"assessmentDetails?.assessment_type !== 'compliance_audit'\"\n              class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n              (click)=\"remove('assessment', category)\">&#xe9ae;</i>\n            <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"\n                responsibilityForm.assessment?.assessmentDetails\n                  ?.assessment_name\n              \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n              responsibilityForm.assessment?.assessmentDetails\n              ?.assessment_name\n              }}</span>\n            <div class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-ml-1 vx-text-center\">\n              {{ responsibilityForm.assessment?.assessmentDetails?.questions }}\n              {{\n              responsibilityForm.assessment?.assessmentDetails?.questions > 1\n              ? \"Questions\"\n              : \"Question\"\n              }}\n            </div>\n          </div>\n\n          <button *ngIf=\"assessmentDetails?.assessment_type !== 'compliance_audit'\" (click)=\"\n              activateSelector('isAssessment', true); isAssessment = true\n            \" class=\"edit\" type=\"button\">\n            <i class=\"icons\">&#xe9ba;</i> Edit\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Checkpoints -->\n  <!-- *ngIf=\"moreOptions.checkpoints\" -->\n  <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.CHECKPOINTS\"\n    [attr.id]=\"'CHECKPOINTS'\" [class.active]=\"activeSelector === 'checkpoints'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'checkpoints' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\">\n      <img [src]=\"ASSETS.checkpoints\" alt=\"im\" *ngIf=\"\n          responsibilityForm?.checkpoints?.length == 0 ||\n          activeSelector === 'checkpoints'\n        \" />\n\n      <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\" *ngIf=\"\n          responsibilityForm?.checkpoints?.length > 0 &&\n          activeSelector !== 'checkpoints'\n        \">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">\n          <!-- {{responsibilityForm.checkpoints|json}}\n                {{responsibilityForm.checkpointInstruction}} -->\n\n          Checkpoints\n          <!-- <button *ngIf=\"responsibilityForm?.checkpoints?.length === 0\" class=\"button\"\n                      (click)=\"activateSelector('checkpoints',true)\">+ Add Checkpoints</button> -->\n        </label>\n        <div class=\"select button-sec\" *ngIf=\"responsibilityForm?.checkpoints?.length === 0\">\n          <input [disabled]=\"!responsibilityForm.checkpoints?.length\" type=\"text\"\n            (click)=\"activateSelector('checkpoints', true)\" placeholder=\"Add checkpoints for this responsibility\"\n            readonly />\n          <button [disabled]=\"!responsibilityForm.checkpoints?.length\" (click)=\"activateSelector('checkpoints', true)\"\n            type=\"button\">\n            Add Checkpoints\n          </button>\n        </div>\n        <div class=\"selected\" *ngIf=\"responsibilityForm.checkpoints?.length > 0\">\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n            <ng-container *ngFor=\"\n                let checkpoint of responsibilityForm.checkpoints?.slice(0, 1)\n              \">\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"checkpoint?.label\" placement=\"bottom-left\"\n                delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ checkpoint?.label }}</span>\n            </ng-container>\n            <button 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 (click)=\"checkpoint.popover()\" placement=\"right\"\n              *ngIf=\"responsibilityForm.checkpoints?.length > 1\">\n              +{{ responsibilityForm.checkpoints?.length - 1 }}\n            </button>\n          </div>\n\n          <!-- <div class=\"chip-container checkpoints\" [class.more-one]=\"responsibilityForm.checkpoints?.length>1\" [class.plus]=\"responsibilityForm.checkpoints?.length>2\">\n                      <span class=\"chip\" *ngFor=\"let checkpoint of responsibilityForm.checkpoints?.slice(0,1)\">{{checkpoint?.label}}</span>\n                      <button class=\"count\" *ngIf=\"responsibilityForm.checkpoints?.length > 1\" type=\"button\" appPopover (click)=\"checkpoint.popover()\" placement=\"right\">+{{responsibilityForm.checkpoints?.length- 1}}</button>\n                  </div> -->\n\n          <button *ngIf=\"activeSelector !== 'checkpoints'\" class=\"edit\" type=\"button\"\n            (click)=\"activateSelector('checkpoints', true)\">\n            <i class=\"icons\">&#xe9ba;</i> Edit\n          </button>\n        </div>\n      </div>\n      <div *ngIf=\"this.responsibilityForm.checkpoints?.length\" class=\"assessment-text\">\n        <i class=\"icons alert-icon\">&#xe930;</i>\n        <span>You can now use the new <strong>Checkpoints </strong>or\n          <strong>Assessments</strong> feature instead of the old checkpoints\n          functionality to create analytical questions.\n          <button class=\"remove-btn\" (click)=\"onRemoveCheckpoints('checkpoint')\">\n            Remove Checkpoints\n          </button>\n          to continue.</span>\n      </div>\n      <app-popover #checkpoint [dontCloseonClick]=\"true\">\n        <div class=\"wf-action-list\">\n          <ul class=\"action-item\">\n            <li *ngFor=\"\n                let checkpoint of responsibilityForm.checkpoints | slice : 1;\n                let j = index\n              \">\n              <div class=\"avatar-card\">\n                <span class=\"value\">\n                  {{ checkpoint?.label }}\n                </span>\n              </div>\n            </li>\n          </ul>\n        </div>\n      </app-popover>\n    </div>\n  </div>\n\n  <!-- New  Checkpoints -->\n  <!-- *ngIf=\"moreOptions.checkpoints\" -->\n  <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.CHECKPOINTS_NEW\"\n    [attr.id]=\"'CHECKPOINTS-NEW'\" [class.active]=\"activeSelector === 'checkpoints-new'\">\n    <div class=\"left\">\n      <img [src]=\"ASSETS.checkpoints\" alt=\"im\" *ngIf=\"\n          responsibilityForm?.checkpoints?.length == 0 ||\n          activeSelector === 'checkpoints'\n        \" />\n\n      <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\n        *ngIf=\"checkpointCount > 0 && activeSelector !== 'checkpoints'\">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">\n          <!-- {{responsibilityForm.checkpoints|json}}\n                {{responsibilityForm.checkpointInstruction}} -->\n\n          Checkpoints\n          <!-- <span class=\"checkpoint-version\"> V2.0</span> -->\n          <!-- <button  class=\"button\"\n                      (click)=\"activateSelector('checkpoints-new',true)\">+ Add Checkpoints</button> -->\n        </label>\n        <div class=\"select button-sec\" *ngIf=\"checkpointCount === 0\">\n          <input type=\"text\" (click)=\"activateSelector('checkpoints-new', true)\"\n            placeholder=\"Add checkpoints for this responsibility\" readonly />\n          <button (click)=\"activateSelector('checkpoints-new', true)\" type=\"button\">\n            Add Checkpoints\n          </button>\n        </div>\n        <div class=\"selected\" *ngIf=\"checkpointCount > 0\">\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n            <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n              (click)=\"onRemoveCheckpoints('new-checkpoints')\">&#xe9ae;</i>\n            <span class=\"chipName vx-fs-11 vx-label-txt\">{{ checkpointCount }}\n              {{ checkpointCount > 1 ? \"Questions\" : \"Question\" }}</span>\n          </div>\n\n          <!-- <div class=\"chip-container checkpoints\" [class.more-one]=\"checkpointCount > 0\">\n                      <span class=\"chip\">\n                          <i class=\"icons\" (click)=\"onRemoveCheckpoints('new-checkpoints')\">&#xe90d;</i>\n                          {{checkpointCount}} {{checkpointCount > 1 ? 'Questions': 'Question'}}</span>\n                  </div> -->\n\n          <button *ngIf=\"activeSelector !== 'checkpoints-new'\" class=\"edit\" type=\"button\"\n            (click)=\"activateSelector('checkpoints-new', true)\">\n            <i class=\"icons\">&#xe9ba;</i> Edit\n          </button>\n        </div>\n      </div>\n      <app-popover #checkpoint [dontCloseonClick]=\"true\">\n        <div class=\"wf-action-list\">\n          <ul class=\"action-item\">\n            <li *ngFor=\"\n                let checkpoint of responsibilityForm.checkpoints | slice : 1;\n                let j = index\n              \">\n              <div class=\"avatar-card\">\n                <span class=\"value\">\n                  {{ checkpoint?.label }}\n                </span>\n              </div>\n            </li>\n          </ul>\n        </div>\n      </app-popover>\n    </div>\n  </div>\n\n  <!-- Risk Classification -->\n  <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.RISK_CLASSIFICATION\"\n    [attr.id]=\"'RISK_CLASSIFICATION'\" [class.active]=\"activeSelector === 'riskCalculator'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'riskCalculator' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"responsibilityForm?.riskClass\">\n      <svg *ngIf=\"responsibilityForm?.riskClass\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 52 52\">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">\n          Risk Classification\n          <button (click)=\"activateSelector('riskCalculator', true)\" class=\"button\">\n            + Risk Calculator\n          </button>\n        </label>\n\n        <div class=\"classification\">\n          <label class=\"low\" *ngFor=\"let risk of riskClassification\" [ngClass]=\"[risk.class]\">\n            <input type=\"radio\" name=\"classification\" [(ngModel)]=\"responsibilityForm.riskClass\"\n              [value]=\"risk?.value\" />\n            <span>{{ risk?.name }}</span>\n          </label>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Reviewer -->\n  <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.REVIEWER\" [attr.id]=\"'REVIEWER'\"\n    [class.active]=\"\n      activeSelector === 'reviewerFrequency' || activeSelector === 'reviewer'\n    \" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'reviewer' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"false\">\n      <img [src]=\"ASSETS.reviewer\" alt=\"\" *ngIf=\"\n          responsibilityForm?.reviewers?.list?.length == 0 ||\n          activeSelector === 'reviewer'\n        \" />\n\n      <svg *ngIf=\"\n          responsibilityForm?.reviewers?.list?.length > 0 &&\n          activeSelector !== 'reviewer'\n        \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">Reviewer</label>\n        <div class=\"select\" *ngIf=\"\n            (responsibilityForm?.reviewers?.list?.length == 0 &&\n              !featureFlag_groups) ||\n            (responsibilityForm?.reviewers?.list?.length == 0 &&\n              responsibilityForm?.groupReviewers?.list?.length == 0 &&\n              featureFlag_groups)\n          \">\n          <input type=\"text\" (click)=\"activateSelector('reviewer', true)\" placeholder=\"Select Reviewer\" readonly />\n        </div>\n        <div class=\"selected\" *ngIf=\"\n            (responsibilityForm?.reviewers?.list?.length > 0 &&\n              !featureFlag_groups) ||\n            ((responsibilityForm?.reviewers?.list?.length > 0 ||\n              responsibilityForm?.groupReviewers?.list?.length > 0) &&\n              featureFlag_groups)\n          \">\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"!featureFlag_groups\">\n            <ng-container *ngFor=\"\n                let reviewer of responsibilityForm?.reviewers?.list?.slice(0, 1)\n              \">\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                (click)=\"remove('reviewer', reviewer)\">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"reviewer.member_name\" placement=\"bottom-left\"\n                delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ reviewer.member_name }}</span>\n            </ng-container>\n            <button 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 (click)=\"reviewer.popover()\" placement=\"right\"\n              *ngIf=\"responsibilityForm?.reviewers?.list?.length > 1\">\n              +{{ responsibilityForm?.reviewers?.list?.slice(1).length }}\n            </button>\n          </div>\n\n          <!-- <div class=\"chip-container\" *ngIf=\"!featureFlag_groups\" [class.more-one]=\"responsibilityForm?.reviewers?.list?.length>1\"\n                      [class.plus]=\"responsibilityForm?.reviewers?.list?.length>2\">\n                      <span class=\"chip\" *ngFor=\"let reviewer of responsibilityForm?.reviewers?.list?.slice(0,2)\"><i class=\"icons\" (click)=\"remove('reviewer',reviewer)\">&#xe90d;</i> {{reviewer.member_name}}</span>\n                      <button class=\"count\" *ngIf=\"responsibilityForm?.reviewers?.list?.length > 2\" type=\"button\" appPopover (click)=\"reviewer.popover()\" placement=\"right\">+{{responsibilityForm?.reviewers?.list?.slice(2).length}}</button>\n                  </div> -->\n\n          <div class=\"vx-d-flex vx-align-center\" *ngIf=\"featureFlag_groups\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n              *ngIf=\"responsibilityForm?.reviewers?.list.length > 0\">\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"\n                  remove('reviewer', responsibilityForm?.reviewers?.list[0])\n                \">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"\n                  responsibilityForm?.reviewers?.list[0]?.employee_name\n                \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                responsibilityForm?.reviewers?.list[0]?.employee_name\n                }}</span>\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 greenBg\"\n                appPopover (click)=\"user.popover()\" placement=\"right\"\n                *ngIf=\"responsibilityForm?.reviewers?.list?.length > 1\">\n                +{{ responsibilityForm?.reviewers?.list?.length - 1 }}\n              </button>\n            </div>\n            <div class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"\n                responsibilityForm?.reviewers?.list.length > 0 &&\n                responsibilityForm?.groupReviewers?.list?.length > 0\n              \">\n              &\n            </div>\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n              *ngIf=\"responsibilityForm?.groupReviewers?.list.length > 0\">\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"\n                  remove(\n                    'groupReviewer',\n                    responsibilityForm?.groupReviewers?.list[0]\n                  )\n                \">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"\n                  responsibilityForm?.groupReviewers?.list[0]?.group_name\n                \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                responsibilityForm?.groupReviewers?.list[0]?.group_name\n                }}</span>\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 (click)=\"group.popover()\" placement=\"right\"\n                *ngIf=\"responsibilityForm?.groupReviewers?.list?.length > 1\">\n                +{{ responsibilityForm?.groupReviewers?.list?.length - 1 }}\n              </button>\n            </div>\n          </div>\n\n          <!-- <div class=\"chip-container\" *ngIf=\"featureFlag_groups\">\n                      <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.reviewers?.list.length > 0 \">\n                          <i class=\"icons cross vx-mr-1\" (click)=\"remove('reviewer',responsibilityForm?.reviewers?.list[0])\" >&#xe90d;</i>\n                          <span class=\"chip\" [appTooltip]=\"responsibilityForm?.reviewers?.list[0]?.employee_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\">{{responsibilityForm?.reviewers?.list[0]?.employee_name}}</span></span>\n                          <button *ngIf=\"responsibilityForm?.reviewers?.list?.length > 1\" class=\"count user\" appPopover (click)=\"user.popover()\" placement=\"left\"> +{{responsibilityForm?.reviewers?.list?.length - 1}}</button>\n                      </div>\n                      <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"responsibilityForm?.reviewers?.list.length > 0 && responsibilityForm?.groupReviewers?.list?.length > 0\">&</span>\n                      <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.groupReviewers?.list.length > 0 \" >\n                          <i class=\"icons cross vx-mr-1\" (click)=\"remove('groupReviewer',responsibilityForm?.groupReviewers?.list[0])\">&#xe90d;</i>\n                          <span class=\"chip\" [appTooltip]=\"responsibilityForm?.groupReviewers?.list[0]?.group_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\">{{responsibilityForm?.groupReviewers?.list[0]?.group_name}}</span></span>\n                          <button *ngIf=\"responsibilityForm?.groupReviewers?.list?.length > 1\" class=\"count\" appPopover (click)=\"group.popover()\" placement=\"right\">+{{responsibilityForm?.groupReviewers?.list?.length - 1}}</button>\n\n                      </div>\n                  </div> -->\n\n          <button *ngIf=\"activeSelector !== 'reviewer'\" class=\"edit\" type=\"button\"\n            (click)=\"activateSelector('reviewer', true)\">\n            <i class=\"icons\">&#xe9ba;</i> Edit\n          </button>\n        </div>\n        <app-cs-radio [checked]=\"responsibilityForm.reviewers.sequentialWorkflow\" [name]=\"'reviewer'\"\n          (checkedEvent)=\"onReviewerWorkflowChange('sequential')\" [class.disabled]=\"\n            responsibilityForm?.groupReviewers?.list?.length > 0\n          \">\n          SEQUENTIAL<i class=\"icons\" [appTooltip]=\"\n              'The responsibility will be sent for review one at a time in the sequence defined by you.'\n            \" placement=\"bottom-right\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\">&#xe91f;</i>\n        </app-cs-radio>\n        <app-cs-radio [checked]=\"!responsibilityForm.reviewers.sequentialWorkflow\" [name]=\"'reviewer'\"\n          (checkedEvent)=\"onReviewerWorkflowChange('anyReviewer')\">\n          ANY REVIEWER CAN MARK THIS AS REVIEWED<i class=\"icons\" [appTooltip]=\"\n              'The responsibility will be sent for review to all reviewers at the same time. If anyone of the reviewer reviews the responsibility, it will be considered as reviewed.'\n            \" placement=\"bottom-right\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\">&#xe91f;</i>\n        </app-cs-radio>\n        <app-popover #reviewer [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let reviewer of responsibilityForm?.reviewers?.list\n                    | slice : 1;\n                  let j = index\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i class=\"icons\" (click)=\"remove('reviewer', reviewer)\">&#xe90d;</i>\n                    {{ reviewer.member_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n        <app-popover #user [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let reviewer of responsibilityForm?.reviewers?.list\n                    | slice : 1;\n                  let j = index\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i class=\"icons\" (click)=\"remove('reviewer', reviewer)\">&#xe90d;</i>\n                    {{ reviewer.member_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n        <app-popover #group [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let group of responsibilityForm?.groupReviewers?.list\n                    | slice : 1;\n                  let i = index\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i class=\"icons\" (click)=\"remove('groupReviewer', group)\">&#xe90d;</i>\n                    {{ group.group_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n      </div>\n    </div>\n  </div>\n\n  <!-- Overseer -->\n  <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.OVERSEER\" [attr.id]=\"'OVERSEER'\"\n    [class.active]=\"\n      activeSelector === 'overseerNotify' || activeSelector === 'overseer'\n    \" [class.disabled]=\"\n      activeSelector &&\n      !['overseerNotify', 'overseerNotify'].includes(activeSelector) &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"false\">\n      <img [src]=\"ASSETS.oversight\" alt=\"\" *ngIf=\"\n          (responsibilityForm?.overseers?.list?.length == 0 &&\n            responsibilityForm?.overseers?.notifyList?.length == 0) ||\n          activeSelector === 'overseerNotify' ||\n          activeSelector === 'overseer'\n        \" />\n      <svg class=\"checkIcon\" *ngIf=\"\n          (responsibilityForm?.overseers?.list?.length > 0 ||\n            responsibilityForm?.overseers?.notifyList?.length > 0) &&\n          !(\n            activeSelector === 'overseerNotify' || activeSelector === 'overseer'\n          )\n        \" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">Oversight</label>\n        <div class=\"select\" *ngIf=\"\n            (responsibilityForm?.overseers?.list?.length == 0 &&\n              !featureFlag_groups) ||\n            (responsibilityForm?.overseers?.list?.length == 0 &&\n              responsibilityForm?.overseersGroups?.list?.length == 0 &&\n              featureFlag_groups)\n          \">\n          <input type=\"text\" (click)=\"activateSelector('overseer', true)\"\n            placeholder=\"Who should have oversight of the responsibility?\" readonly />\n        </div>\n        <div class=\"selected\" *ngIf=\"\n            (responsibilityForm?.overseers?.list?.length > 0 &&\n              !featureFlag_groups) ||\n            ((responsibilityForm?.overseers?.list?.length > 0 ||\n              responsibilityForm?.overseersGroups?.list?.length > 0) &&\n              featureFlag_groups)\n          \">\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"!featureFlag_groups\">\n            <ng-container *ngFor=\"\n                let overseer of responsibilityForm?.overseers?.list?.slice(0, 1)\n              \">\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                (click)=\"remove('overseer', overseer)\">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"overseer.member_name\" placement=\"bottom-left\"\n                delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ overseer.member_name }}</span>\n            </ng-container>\n            <button 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 (click)=\"overseers.popover()\" placement=\"right\"\n              *ngIf=\"responsibilityForm?.overseers?.list?.length > 1\">\n              +{{ responsibilityForm?.overseers?.list?.slice(1).length }}\n            </button>\n          </div>\n\n          <!-- <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.overseers?.list?.length>1\" [class.plus]=\"responsibilityForm?.overseers?.list?.length>2\" *ngIf=\"!featureFlag_groups\" >\n                      <span class=\"chip\" *ngFor=\"let overseer of responsibilityForm?.overseers?.list?.slice(0,2)\"><i class=\"icons\" (click)=\"remove('overseer',overseer)\">&#xe90d;</i> {{overseer.member_name}}</span>\n                      <button class=\"count\" *ngIf=\"responsibilityForm?.overseers?.list?.length > 2\" type=\"button\" appPopover (click)=\"overseers.popover()\" placement=\"right\">+{{responsibilityForm?.overseers?.list?.slice(2).length}}</button>\n                  </div> -->\n\n          <div class=\"vx-d-flex vx-align-center\" *ngIf=\"featureFlag_groups\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n              *ngIf=\"responsibilityForm?.overseers?.list.length > 0\">\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"\n                  remove('overseer', responsibilityForm?.overseers?.list[0])\n                \">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"\n                  responsibilityForm?.overseers?.list[0]?.employee_name\n                \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                responsibilityForm?.overseers?.list[0]?.employee_name\n                }}</span>\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 greenBg\"\n                appPopover (click)=\"overseerUser.popover()\" placement=\"right\"\n                *ngIf=\"responsibilityForm?.overseers?.list?.length > 1\">\n                +{{ responsibilityForm?.overseers?.list?.length - 1 }}\n              </button>\n            </div>\n            <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"\n                responsibilityForm?.overseers?.list.length > 0 &&\n                responsibilityForm?.overseersGroups?.list?.length > 0\n              \">&</span>\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n              *ngIf=\"responsibilityForm?.overseersGroups?.list?.length > 0\">\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"\n                  remove(\n                    'overseerGroup',\n                    responsibilityForm?.overseersGroups?.list[0]\n                  )\n                \">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"\n                  responsibilityForm?.overseersGroups?.list[0].group_name\n                \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                responsibilityForm?.overseersGroups?.list[0].group_name\n                }}</span>\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 (click)=\"overseerGroup.popover()\" placement=\"right\"\n                *ngIf=\"responsibilityForm?.overseersGroups?.list?.length > 1\">\n                +{{ responsibilityForm?.overseersGroups?.list?.length - 1 }}\n              </button>\n            </div>\n          </div>\n\n          <!-- <div class=\"chip-container\" *ngIf=\"featureFlag_groups\">\n                      <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.overseers?.list.length > 0\" >\n                          <i class=\"icons cross vx-mr-1\" (click)=\"remove('overseer',responsibilityForm?.overseers?.list[0])\">&#xe90d;</i>\n                          <span class=\"chip\" [appTooltip]=\"responsibilityForm?.overseers?.list[0]?.employee_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\">{{responsibilityForm?.overseers?.list[0]?.employee_name}}</span></span>\n                          <button *ngIf=\"responsibilityForm?.overseers?.list?.length > 1\" class=\"count user\" appPopover (click)=\"overseerUser.popover()\" placement=\"left\"> +{{responsibilityForm?.overseers?.list?.length -1}}</button>\n                      </div>\n                      <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"  *ngIf=\"responsibilityForm?.overseers?.list.length > 0 && responsibilityForm?.overseersGroups?.list?.length > 0\" >&</span>\n                      <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.overseersGroups?.list?.length > 0 \" >\n                          <i class=\"icons cross vx-mr-1\" (click)=\"remove('overseerGroup',responsibilityForm?.overseersGroups?.list[0])\">&#xe90d;</i>\n                          <span class=\"chip\" [appTooltip]=\"responsibilityForm?.overseersGroups?.list[0].group_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\"  >{{responsibilityForm?.overseersGroups?.list[0].group_name}}</span></span>\n                          <button *ngIf=\"responsibilityForm?.overseersGroups?.list?.length > 1\" class=\"count\" appPopover (click)=\"overseerGroup.popover()\" placement=\"right\">+{{responsibilityForm?.overseersGroups?.list?.length -1}}</button>\n                      </div>\n                  </div> -->\n          <button *ngIf=\"activeSelector !== 'overseer'\" class=\"edit\" type=\"button\"\n            (click)=\"activateSelector('overseer', true)\">\n            <i class=\"icons\">&#xe9ba;</i> Edit\n          </button>\n        </div>\n\n        <div class=\"select\" *ngIf=\"\n            (responsibilityForm?.overseers?.notifyList?.length == 0 &&\n              !featureFlag_groups) ||\n            (responsibilityForm?.overseers?.notifyList?.length == 0 &&\n              responsibilityForm?.overseersGroups?.notifyList?.length == 0 &&\n              featureFlag_groups)\n          \">\n          <input type=\"text\" (click)=\"activateSelector('overseerNotify', true)\"\n            placeholder=\"Who should be notified if the responsibility is not complet...\" readonly [appTooltip]=\"\n              'Who should be notified if the responsibility is not completed?'\n            \" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\" />\n        </div>\n        <div class=\"selected\" *ngIf=\"\n            (responsibilityForm?.overseers?.notifyList?.length > 0 &&\n              !featureFlag_groups) ||\n            ((responsibilityForm?.overseers?.notifyList?.length > 0 ||\n              responsibilityForm?.overseersGroups?.notifyList?.length > 0) &&\n              featureFlag_groups)\n          \">\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"!featureFlag_groups\">\n            <ng-container *ngFor=\"\n                let overseer of responsibilityForm?.overseers?.notifyList?.slice(\n                  0,\n                  1\n                )\n              \">\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                (click)=\"remove('overseerNotifyList', overseer)\">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"overseer.member_name\" placement=\"bottom-left\"\n                delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ overseer.member_name }}</span>\n            </ng-container>\n            <button 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 (click)=\"notify.popover()\" placement=\"right\"\n              *ngIf=\"responsibilityForm?.overseers?.notifyList?.length > 1\">\n              +{{ responsibilityForm?.overseers?.notifyList?.slice(1).length }}\n            </button>\n          </div>\n\n          <!-- <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.overseers?.notifyList?.length>1\" [class.plus]=\"responsibilityForm?.overseers?.notifyList?.length>2\" *ngIf=\"!featureFlag_groups\">\n                      <span class=\"chip\" *ngFor=\"let overseer of responsibilityForm?.overseers?.notifyList?.slice(0,2)\"><i class=\"icons\" (click)=\"remove('overseerNotifyList',overseer)\">&#xe90d;</i> {{overseer.member_name}}</span>\n                      <button class=\"count\" *ngIf=\"responsibilityForm?.overseers?.notifyList?.length > 2\" type=\"button\" appPopover (click)=\"notify.popover()\" placement=\"right\">+{{responsibilityForm?.overseers?.notifyList?.slice(2).length}}</button>\n                  </div> -->\n\n          <div class=\"vx-d-flex vx-align-center\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n              *ngIf=\"responsibilityForm?.overseers?.notifyList.length > 0\">\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"\n                  remove(\n                    'overseerNotifyList',\n                    responsibilityForm?.overseers?.notifyList[0]\n                  )\n                \">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"\n                  responsibilityForm?.overseers?.notifyList[0]?.employee_name\n                \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                responsibilityForm?.overseers?.notifyList[0]?.employee_name\n                }}</span>\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 greenBg\"\n                appPopover (click)=\"notifyUser.popover()\" placement=\"right\"\n                *ngIf=\"responsibilityForm?.overseers?.notifyList?.length > 1\">\n                +{{ responsibilityForm?.overseers?.notifyList?.length - 1 }}\n              </button>\n            </div>\n            <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"\n                responsibilityForm?.overseers?.notifyList.length > 0 &&\n                responsibilityForm?.overseersGroups?.notifyList?.length > 0\n              \">&</span>\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"\n                responsibilityForm?.overseersGroups?.notifyList?.length > 0\n              \">\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"\n                  remove(\n                    'overseerGroupNotifyList',\n                    responsibilityForm?.overseersGroups?.notifyList[0]\n                  )\n                \">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"\n                  responsibilityForm?.overseersGroups?.notifyList[0]?.group_name\n                \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                responsibilityForm?.overseersGroups?.notifyList[0]?.group_name\n                }}</span>\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 (click)=\"notifyGroup.popover()\" placement=\"right\" *ngIf=\"\n                  responsibilityForm?.overseersGroups?.notifyList?.length > 1\n                \">\n                +{{\n                responsibilityForm?.overseersGroups?.notifyList?.length - 1\n                }}\n              </button>\n            </div>\n          </div>\n\n          <!-- <div class=\"chip-container\" *ngIf=\"featureFlag_groups\">\n                      <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.overseers?.notifyList.length > 0\">\n                          <i class=\"icons cross vx-mr-1\" (click)=\"remove('overseerNotifyList',responsibilityForm?.overseers?.notifyList[0])\">&#xe90d;</i>\n                          <span class=\"chip\" [appTooltip]=\"responsibilityForm?.overseers?.notifyList[0]?.employee_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\">{{responsibilityForm?.overseers?.notifyList[0]?.employee_name}}</span></span>\n                          <button *ngIf=\"responsibilityForm?.overseers?.notifyList?.length > 1\" class=\"count user\" appPopover (click)=\"notifyUser.popover()\" placement=\"left\"> +{{responsibilityForm?.overseers?.notifyList?.length - 1}}</button>\n                      </div>\n                      <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"  *ngIf=\"responsibilityForm?.overseers?.notifyList.length > 0 && responsibilityForm?.overseersGroups?.notifyList?.length > 0\" >&</span>\n                      <div class=\"chip-inner\" *ngIf=\"responsibilityForm?.overseersGroups?.notifyList?.length > 0 \" >\n                          <i class=\"icons cross vx-mr-1\" (click)=\"remove('overseerGroupNotifyList',responsibilityForm?.overseersGroups?.notifyList[0])\">&#xe90d;</i>\n                          <span class=\"chip\" [appTooltip]=\"responsibilityForm?.overseersGroups?.notifyList[0]?.group_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500\"  >{{responsibilityForm?.overseersGroups?.notifyList[0]?.group_name}}</span></span>\n                          <button *ngIf=\"responsibilityForm?.overseersGroups?.notifyList?.length > 1\" class=\"count\" appPopover (click)=\"notifyGroup.popover()\" placement=\"right\">+{{responsibilityForm?.overseersGroups?.notifyList?.length - 1}}</button>\n                      </div>\n                  </div> -->\n          <button *ngIf=\"activeSelector !== 'overseerNotify'\" class=\"edit\" type=\"button\"\n            (click)=\"activateSelector('overseerNotify', true)\">\n            <i class=\"icons\">&#xe9ba;</i> Edit\n          </button>\n        </div>\n        <app-popover #overseers [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let overseer of responsibilityForm?.overseers?.list\n                    | slice : 1;\n                  let j = index\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i class=\"icons\" (click)=\"remove('overseer', overseer)\">&#xe90d;</i>\n                    {{ overseer?.member_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n        <app-popover #overseerUser [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let overseers of responsibilityForm?.overseers?.list\n                    | slice : 1;\n                  let j = index\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i class=\"icons\" (click)=\"remove('overseer', overseers)\">&#xe90d;</i>\n                    {{ overseers?.member_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n        <app-popover #overseerGroup [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let overseer of responsibilityForm?.overseersGroups?.list\n                    | slice : 1;\n                  let i = index\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i class=\"icons\" (click)=\"remove('overseerGroup', overseer)\">&#xe90d;</i>\n                    {{ overseer?.group_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n        <app-popover #notify [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let overseer of responsibilityForm?.overseers?.notifyList\n                    | slice : 1;\n                  let j = index\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i class=\"icons\" (click)=\"remove('overseerNotifyList', overseer)\">&#xe90d;</i>\n                    {{ overseer?.member_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n        <app-popover #notifyUser [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let overseer of responsibilityForm?.overseers?.notifyList\n                    | slice : 1;\n                  let j = index\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i class=\"icons\" (click)=\"remove('overseerNotifyList', overseer)\">&#xe90d;</i>\n                    {{ overseer?.member_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n        <app-popover #notifyGroup [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let group of responsibilityForm?.overseersGroups?.notifyList\n                    | slice : 1;\n                  let i = index\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i class=\"icons\" (click)=\"remove('overseerGroupNotifyList', group)\">&#xe90d;</i>\n                    {{ group?.group_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n      </div>\n    </div>\n  </div>\n\n  <!-- Assurance -->\n  <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.ASSURANCE\" [attr.id]=\"'ASSURANCE'\"\n    [class.active]=\"activeSelector === 'assurance'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'assurance' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"false\">\n      <img [src]=\"ASSETS.reviewer\" alt=\"\" *ngIf=\"\n          responsibilityForm?.assuranceList?.length == 0 ||\n          activeSelector === 'assurance'\n        \" />\n\n      <svg *ngIf=\"\n          responsibilityForm?.assuranceList?.length > 0 &&\n          activeSelector !== 'assurance'\n        \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">Assurance</label>\n        <div class=\"select\" *ngIf=\"responsibilityForm?.assuranceList?.length == 0\">\n          <div class=\"custom-input\" (click)=\"activateSelector('assurance', true)\"\n            aria-placeholder=\"Select the test plan categories that you would like to add this responsibility to.\"></div>\n        </div>\n        <div class=\"selected\" *ngIf=\"responsibilityForm?.assuranceList?.length > 0\">\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n            <ng-container *ngFor=\"\n                let assurance of responsibilityForm?.assuranceList?.slice(0, 1)\n              \">\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                (click)=\"remove('assurance', assurance)\">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"assurance.category_name\"\n                placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ assurance.category_name\n                }}</span>\n            </ng-container>\n            <button 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 (click)=\"assurance.popover()\" placement=\"right\"\n              *ngIf=\"responsibilityForm?.assuranceList?.length > 1\">\n              +{{ responsibilityForm?.assuranceList?.slice(1).length }}\n            </button>\n          </div>\n\n          <button *ngIf=\"activeSelector !== 'assurance'\" class=\"edit\" type=\"button\"\n            (click)=\"activateSelector('assurance', true)\">\n            <i class=\"icons\">&#xe9ba;</i> Edit\n          </button>\n        </div>\n        <app-popover #assurance [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"\n                  let assurance of responsibilityForm?.assuranceList\n                    | slice : 1;\n                  let j = index\n                \">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i class=\"icons\" (click)=\"remove('assurance', assurance)\">&#xe90d;</i>\n                    {{ assurance.category_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n      </div>\n    </div>\n  </div>\n\n  <!-- Requires Audit -->\n  <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\"\n    *ngIf=\"moreOptions?.REQUIRES_AUDIT && responsibilityForm.rc.length > 0\" [attr.id]=\"'REQUIRES_AUDIT'\"\n    [class.active]=\"activeSelector === 'requires_audit'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'requires_audit' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"false\">\n      <img [src]=\"ASSETS.audit\" alt=\"\" *ngIf=\"\n          responsibilityForm?.requiresAuditList?.length == 0 ||\n          activeSelector === 'requires_audit'\n        \" />\n\n      <svg *ngIf=\"\n          responsibilityForm?.requiresAuditList?.length > 0 &&\n          activeSelector !== 'requires_audit'\n        \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">REQUIRES AUDIT?</label>\n        <div class=\"select\" *ngIf=\"responsibilityForm?.requiresAuditList?.length == 0\">\n          <input type=\"text\" placeholder=\"If yes, select an Audit Category.\" readonly\n            (click)=\"activateSelector('requires_audit', true)\" />\n        </div>\n        <div class=\"selected\" *ngIf=\"responsibilityForm?.requiresAuditList?.length > 0\">\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n            <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n              (click)=\"remove('requires_audit', overseer)\">&#xe9ae;</i>\n            <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"\n                responsibilityForm?.requiresAuditList[0]?.category_name\n              \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n              responsibilityForm?.requiresAuditList[0]?.category_name\n              }}</span>\n          </div>\n\n          <button class=\"edit\" type=\"button\" (click)=\"activateSelector('requires_audit', true)\">\n            <i class=\"icons\">&#xe90c;</i> Edit\n          </button>\n          <!-- class=\"icons\">&#xe9ba;</i>\n                      Edit</button> -->\n        </div>\n        <ng-container *ngIf=\"responsibilityForm?.requiresAuditList?.length\">\n          <label class=\"vx-control-panel vx-mt-8\">\n            SAMPLE SIZE\n            <app-cs-switch [(ngValue)]=\"isSample\" (ngValueChange)=\"switchEnable($event)\"></app-cs-switch>\n          </label>\n          <div class=\"sample-part\" [class.disabled]=\"!isSample\">\n            <app-cs-radio value=\"0\" class=\"sample-radio\" (click)=\"selectedSampleData(0)\"\n              [checked]=\"selectedSample === 0\">\n              <div class=\"name\">COUNT</div>\n              <input type=\"number\" placeholder=\"--\" (keypress)=\"checkInputValue($event)\" [(ngModel)]=\"sampleValue\" />\n            </app-cs-radio>\n            <div class=\"or\">OR</div>\n            <app-cs-radio value=\"1\" class=\"sample-radio\" (click)=\"selectedSampleData(1)\"\n              [checked]=\"selectedSample === 1\">\n              <div class=\"name\">PERCENTAGE</div>\n              <input type=\"number\" (keypress)=\"checkInputValue($event)\" [(ngModel)]=\"samplePercentage\"\n                placeholder=\"--\" />\n            </app-cs-radio>\n          </div>\n          <label class=\"vx-control-panel vx-mt-8\">SET A REMINDER IF THE AUDIT PLAN IS NOT CREATED.</label>\n          <div class=\"reminder-part\">\n            Send reminder every\n            <input type=\"number\" value=\"2\" [(ngModel)]=\"sendAuditRemindersValue\" />\n            Day by\n            <div class=\"picker-group\">\n              <input class=\"time\" aria-label=\"12hr format\" [(ngModel)]=\"auditTime\" [ngxTimepicker]=\"dailyTime\"\n                placeholder=\"auditTime.toUpperCase()\" type=\"text\" [min]=\"currentTime\" readonly />\n              <i class=\"icons\">&#xe955;</i>\n              <ngx-material-timepicker #dailyTime [defaultTime]=\"auditTime\">\n              </ngx-material-timepicker>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n\n  <!-- Link of GRC objects -->\n  <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\"\n    *ngIf=\"moreOptions?.GRC_OBJECTS && responsibilityForm.rc.length > 0\" [attr.id]=\"'GRC_OBJECTS'\"\n    [class.active]=\"activeSelector === 'GRC_OBJECTS'\" [class.disabled]=\"\n      activeSelector &&\n      activeSelector !== 'GRC_OBJECTS' &&\n      sideSelectorElements.includes(activeSelector)\n    \">\n    <div class=\"left\" [class.checked]=\"false\">\n      <img [src]=\"ASSETS.audit\" alt=\"\" *ngIf=\"\n          responsibilityForm?.selectedGRCObjects?.length == 0 ||\n          activeSelector === 'GRC_OBJECTS'\n        \" />\n\n      <svg *ngIf=\"\n          responsibilityForm?.selectedGRCObjects?.length > 0 &&\n          activeSelector !== 'GRC_OBJECTS'\n        \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n      </svg>\n    </div>\n    <div class=\"right\">\n      <div class=\"vx-form-group\">\n        <label class=\"vx-control-panel\">LINK GRC OBJECT(S)</label>\n        <div class=\"select\" *ngIf=\"responsibilityForm?.selectedGRCObjects?.length === 0\">\n          <input type=\"text\" placeholder=\"Select GRC object(s) to link with this responsibility\" readonly\n            (click)=\"activateSelector('GRC_OBJECTS', true)\" />\n        </div>\n        <ng-container *ngIf=\"responsibilityForm?.selectedGRCObjects?.length\">\n          <ng-container *ngFor=\"let selectedGRC of GRC_TYPE_ARRAY; let i = index\">\n            <div *ngIf=\"grcDataWithTypes[selectedGRC]?.length\" class=\"selected vx-mb-2\">\n              <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n                <ng-container *ngFor=\"let grc of grcDataWithTypes[selectedGRC]?.slice(0, 1)\">\n                  <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                    (click)=\"remove('GRC_OBJECTS', grc, 0)\">&#xe9ae;</i>\n                  <div class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\">\n                    {{ selectedGRC | titlecase }}\n                  </div>\n\n                  <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"grc?.name\" placement=\"bottom-left\"\n                    delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ grc?.name }}</span>\n                </ng-container>\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 (click)=\"popoverGRC.popover()\" placement=\"left\"\n                  *ngIf=\"grcDataWithTypes[selectedGRC]?.length > 1\">\n                  +{{ grcDataWithTypes[selectedGRC].length - 1 }}\n                </button>\n              </div>\n\n              <button *ngIf=\"activeSelector !== 'GRC'\" class=\"edit\" type=\"button\" (click)=\"\n                  selectedGRCTab = grcDataWithTypes[selectedGRC][0]?.type;\n                  getOtherGRCObjects();\n                  activateSelector('GRC_OBJECTS', true)\n                \">\n                <i class=\"icons\">&#xe9ba;</i> Edit\n              </button>\n            </div>\n            <app-popover #popoverGRC [dontCloseonClick]=\"true\">\n              <div class=\"wf-action-list\">\n                <ul class=\"action-item\">\n                  <li *ngFor=\"\n                      let grc of grcDataWithTypes[selectedGRC] | slice : 1;\n                      let j = index\n                    \">\n                    <div class=\"avatar-card\">\n                      <span class=\"value\">\n                        <i class=\"icons\" (click)=\"remove('GRC_OBJECTS', grc, j + 1)\">&#xe90d;</i>\n                        {{ grc.name }}\n                      </span>\n                    </div>\n                  </li>\n                </ul>\n              </div>\n            </app-popover>\n          </ng-container>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</div>\n\n<app-users-radio-list *ngIf=\"activeSelector === 'assignors'\" [usersList]=\"assignorsList\"\n  [selectedUsers]=\"responsibilityForm.assignors.list\" [itemEmailKey]=\"'member_email'\" [userIdKey]=\"'member_id'\"\n  [itemNameKey]=\"'member_name'\" (saveSelectedList)=\"saveSelectedList('assignors', $event)\"\n  (closeUsersList)=\"activeDeselector()\" [loaded]=\"assignorsListLoaded\">\n</app-users-radio-list>\n\n<ng-container *ngIf=\"activeSelector === 'assignees'\">\n  <app-group-users-list *ngIf=\"\n      isEntrust || responsibilityForm?.assignees?.whoCanComplete === 'ANY_ONE'\n    \" [openedFrom]=\"openedFrom\" [usersList]=\"assigneesList\" [fromResponsibility]=\"'Assignee'\" [groupsList]=\"groupsList\"\n    [assigneeGroupsList]=\"groupAssigneeList\" [selectedUsers]=\"responsibilityForm?.assignees?.list\"\n    [selectedGroups]=\"responsibilityForm?.assigneeGroups?.list\" [userIdKey]=\"'my_member_id'\" [groupIdKey]=\"'group_id'\"\n    [loader]=\"userListLoader || assignorsListLoader\" (saveSelectedList)=\"saveSelectedList('assignees', $event)\"\n    (closeUsersList)=\"activeDeselector()\" [groupsEnabled]=\"featureFlag_groups\">\n  </app-group-users-list>\n  <app-users-radio-list *ngIf=\"\n      !isEntrust && responsibilityForm.assignees.whoCanComplete !== 'ANY_ONE'\n    \" [itemEmailKey]=\"'employee_email'\" [usersList]=\"assigneesList\" [selectedUsers]=\"responsibilityForm.assignees.list\"\n    [userIdKey]=\"'employee_id'\" [itemNameKey]=\"'employee_name'\" [fromResponsibility]=\"'Assignee'\"\n    (saveSelectedList)=\"saveSelectedList('assignees', $event)\" (closeUsersList)=\"activeDeselector()\"\n    [loaded]=\"assigneesListLoaded\">\n  </app-users-radio-list>\n</ng-container>\n\n<app-checkpoints *ngIf=\"activeSelector === 'checkpoints'\"\n  [checkpointInstruction]=\"responsibilityForm?.checkpointInstruction\" [checkpointData]=\"responsibilityForm?.checkpoints\"\n  (saveCheckPoint)=\"saveSelectedList('checkpoints', $event)\" (closeCheckPoint)=\"activeDeselector()\"></app-checkpoints>\n<app-frequency-container *ngIf=\"activeSelector === 'frequency'\" [frequencyDetails]=\"frequencyDetails\"\n  [feature]=\"feature\" [onCompletionResponsibility]=\"responsibilityDetails?.onCompletionResponsibility\"\n  (selectedFrequency)=\"frequencyData($event)\" [mode]=\"'responsibility'\" (closeFrequency)=\"activeDeselector()\">\n</app-frequency-container>\n\n<app-responsibility-centers-list *ngIf=\"activeSelector === 'rc'\" [loaded]=\"rcListLoaded\"\n  [responsibilityCentersList]=\"responsibilityCentersList\" [radioSelection]=\"\n    mode == 'EDIT' && responsibilityCenterType === 0 ? true : false\n  \" [selectedResponsibilityCenters]=\"responsibilityForm.rc\" [rcIdKey]=\"'item_id'\"\n  (saveSelectedList)=\"saveSelectedList('rc', $event)\" (closeRcList)=\"activeDeselector()\">\n</app-responsibility-centers-list>\n\n<app-category-multi-select *ngIf=\"activeSelector === 'category'\" [categoryList]=\"categories\"\n  [allCategories]=\"allCategories\" [categoryIdKey]=\"'category_id'\" [selectedCategories]=\"responsibilityForm.category\"\n  (saveSelectedCategory)=\"saveSelectedList('category', $event)\" (closeCategoriesList)=\"activeDeselector()\">\n</app-category-multi-select>\n\n<!-- Program List Popup -->\n<app-list-container *ngIf=\"activeSelector === 'program'\" (close)=\"activeDeselector()\">\n  <app-program-list body (itemsSelectedChange)=\"onItemsSelectedChange($event)\" [selectedItems]=\"selectedPrograms\"\n    [url]=\"programListUrl\"></app-program-list>\n  <div class=\"vx-d-flex vx-align-center vx-justify-between vx-w-100\" footer>\n    <div class=\"left-side vx-fs-12 vx-d-flex\">\n      <ng-container *ngIf=\"allProgamSelected.length > 0\">\n        <button\n          class=\"selected-count-box vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\">\n          {{ allProgamSelected.length }}\n        </button>\n        <span class=\"selected-text\">\n          Program\n          {{ allProgamSelected.length > 1 ? \"Categories\" : \"Category\" }}\n          Selected</span>\n      </ng-container>\n    </div>\n    <div class=\"right-side vx-d-flex\">\n      <button class=\"cancelBtn\" (click)=\"activeDeselector()\">Cancel</button>\n      <button class=\"nextBtn\" (click)=\"activeDeselector(); selectCategory()\">\n        Next <i class=\"icons\">&#xe91e;</i>\n      </button>\n    </div>\n  </div>\n</app-list-container>\n\n<app-owner-list *ngIf=\"activeSelector === 'reviewer' && !featureFlag_groups\" [listHeading]=\"'Select a Reviewer'\"\n  [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\" [usersList]=\"allUsersList\" [showWorkflow]=\"true\"\n  [selectedUsers]=\"responsibilityForm.reviewers.list\" [userIdKey]=\"'employee_id'\" [itemEmailKey]=\"'employee_email'\"\n  [itemNameKey]=\"'member_name'\" (saveSelectedList)=\"\n    saveSelectedList('reviewer', $event);\n    activateSelector('reviewerFrequency', true)\n  \" (closeUsersList)=\"activeDeselector()\" [mode]=\"mode\" [fromResponsibility]=\"'Reviewer'\" [reviewerWorkflowType]=\"\n    responsibilityForm?.reviewers?.sequentialWorkflow\n      ? 'SEQUENTIAL'\n      : 'ANY REVIEWER CAN MARK THIS AS REVIEWED'\n  \" (reviewerWorkflowTypeChange)=\"reviewerTypeChange($event)\">\n</app-owner-list>\n<user-group-list *ngIf=\"activeSelector === 'reviewer' && featureFlag_groups\" [selectedReviewer]=\"true\"\n  [userlist]=\"reviewerMemberIdsList\" [groupEnabled]=\"true\" [groupList]=\"groupReviewerList\"\n  [selectedGroups]=\"responsibilityForm?.groupReviewers?.list\" [selectedUsers]=\"responsibilityForm?.reviewers?.list\"\n  (cancel)=\"activeDeselector()\" (save)=\"\n    saveSelectedList('reviewer', $event);\n    activateSelector('reviewerFrequency', true)\n  \" [mode]=\"mode\" [fromResponsibility]=\"'Reviewer'\" [loading]=\"userListLoader || assignorsListLoader\"\n  (reviewerWorkflowTypeChange)=\"reviewerTypeChange($event)\" [reviewerWorkflowType]=\"\n    responsibilityForm?.reviewers?.sequentialWorkflow\n      ? 'SEQUENTIAL'\n      : 'ANY REVIEWER CAN MARK THIS AS REVIEWED'\n  \" [featureflag]=\"featureFlag_groups\">\n</user-group-list>\n<app-owner-list *ngIf=\"activeSelector === 'overseer' && !featureFlag_groups\" [singularText]=\"'User selected'\"\n  [pluralText]=\"'Users selected'\" [usersList]=\"allUsersList\" [selectedUsers]=\"responsibilityForm.overseers.list\"\n  [userIdKey]=\"'employee_id'\" [fromResponsibility]=\"'Overseer'\" [itemNameKey]=\"'member_name'\"\n  (saveSelectedList)=\"saveSelectedList('overseer', $event)\" (closeUsersList)=\"activeDeselector()\"\n  [itemEmailKey]=\"'employee_email'\">\n</app-owner-list>\n<user-group-list *ngIf=\"activeSelector === 'overseer' && featureFlag_groups\" [groupEnabled]=\"true\"\n  [groupList]=\"groupOverseerList\" [selectedGroups]=\"responsibilityForm?.overseersGroups?.list\"\n  [userlist]=\"overseersList\" [selectedUsers]=\"responsibilityForm.overseers.list\" [fromResponsibility]=\"'Overseer'\"\n  [loading]=\"userListLoader || assignorsListLoader\" (save)=\"saveSelectedList('overseer', $event)\"\n  (cancel)=\"activeDeselector()\" [featureflag]=\"featureFlag_groups\">\n</user-group-list>\n\n<app-owner-list *ngIf=\"activeSelector === 'overseerNotify' && !featureFlag_groups\" [singularText]=\"'User selected'\"\n  [pluralText]=\"'Users selected'\" [usersList]=\"allUsersList\" [fromResponsibility]=\"'Overseer'\"\n  [selectedUsers]=\"responsibilityForm.overseers.notifyList\" [userIdKey]=\"'employee_id'\" [itemNameKey]=\"'member_name'\"\n  (saveSelectedList)=\"saveSelectedList('overseerNotify', $event)\" (closeUsersList)=\"activeDeselector()\"\n  [itemEmailKey]=\"'employee_email'\"></app-owner-list>\n<user-group-list *ngIf=\"activeSelector === 'overseerNotify' && featureFlag_groups\" [userlist]=\"overseersList\"\n  [groupEnabled]=\"true\" [groupList]=\"groupOverseerList\"\n  [selectedGroups]=\"responsibilityForm?.overseersGroups?.notifyList\"\n  [selectedUsers]=\"responsibilityForm.overseers.notifyList\" [fromResponsibility]=\"'Overseer'\"\n  [loading]=\"userListLoader || assignorsListLoader\" (save)=\"saveSelectedList('overseerNotify', $event)\"\n  (cancel)=\"activeDeselector()\" [featureflag]=\"featureFlag_groups\">\n</user-group-list>\n\n<app-owner-list *ngIf=\"activeSelector === 'assurance'\" [singularText]=\"'Test Category selected'\"\n  [pluralText]=\"'Test Categories selected'\" [searchPlaceholder]=\"'Search Test Category...'\"\n  [listHeading]=\"'Select Test Categories'\" [usersList]=\"assuranceCategoriesList\"\n  [noDataText]=\"'No Test Categories Found'\" [selectedUsers]=\"responsibilityForm.assuranceList\"\n  [userIdKey]=\"'category_id'\" [itemEmailKey]=\"'category_name'\" [itemNameKey]=\"'category_name'\"\n  (saveSelectedList)=\"saveSelectedList('assurance', $event)\" (closeUsersList)=\"activeDeselector()\"\n  [searchPlaceholder]=\"'Search Category'\">\n</app-owner-list>\n\n<app-audit-category-list *ngIf=\"activeSelector === 'requires_audit'\" (closeList)=\"activeDeselector()\"\n  [auditCategory]=\"assuranceRequiresAuditList\" (saveSelectedList)=\"saveSelectedList('requires_audit', $event)\"\n  [selectedData]=\"responsibilityForm?.requiresAuditList[0]\"></app-audit-category-list>\n\n<app-loader-inline *ngIf=\"(loader && this.mode === 'EDIT') || entrustLoader\"></app-loader-inline>\n<app-framework-list *ngIf=\"activeSelector === 'framework'\" (assignControl)=\"assignFromFramework($event)\"\n  [previousSelectedValues]=\"selectedFrameworkValues\" (closeFramework)=\"activeDeselector()\"\n  (entrustFramework)=\"entrustFramework($event)\"></app-framework-list>\n\n<!-- risk-calculator here -->\n<app-risk-classification *ngIf=\"activeSelector === 'riskCalculator'\" [currentRiskValue]=\"responsibilityForm.riskClass\"\n  (saveList)=\"saveSelectedList('calculatedrisk', $event)\" (closeList)=\"activeDeselector()\">\n</app-risk-classification>\n\n<app-review-frequency *ngIf=\"activeSelector === 'reviewerFrequency'\" [reviewCompleteDays]=\"\n    responsibilityForm.reviewers.reviewFrequency.reviewCompleteDays\n  \" [reviewNOtCompletedDays]=\"\n    responsibilityForm.reviewers.reviewFrequency.reviewNOtCompletedDays\n  \" (saveReviewFrequency)=\"saveSelectedList('reviewFrequency', $event)\" (closeReviewFrequency)=\"\n    activeDeselector();\n    activateSelector('reviewer', false);\n    responsibilityForm.reviewers.list = [];\n    responsibilityForm.groupReviewers.list = []\n  \" (backToUserList)=\"activeDeselector(); activateSelector('reviewer', true)\">\n</app-review-frequency>\n\n<app-assessment-list *ngIf=\"isAssessment\" [program_ids]=\"responsibilityForm.program[0]?._id\" (cancelAssessment)=\"\n    isAssessment = false; activateSelector('isAssessment', false)\n  \" [isEdit]=\"responsibilityForm?.assessment?.assessment_id ? true : false\"\n  [selectedAssessment]=\"responsibilityForm?.assessment\" (onAssessmentSelect)=\"\n    onAssessmentSelect($event); activateSelector('isAssessment', false)\n  \"></app-assessment-list>\n\n<app-smiley-dialog-inline *ngIf=\"showSmiley\" [message]=\"smileyMessage\" [actionButtons]=\"actionButtons\"\n  (action)=\"action($event)\" (closeSmiley)=\"closeSmiley($event)\"></app-smiley-dialog-inline>\n\n<div class=\"import\" *ngIf=\"activeSelector === 'checkpoints-new'\">\n  <app-create-assessment-container #editor [openPortal]=\"'RESPONSIBILITY_CHECKPOINT'\"\n    (postAssessment)=\"postAssessment($event)\" (setIsUploaded)=\"setIsUploaded($event)\"\n    [checkpointJSON]=\"responsibilityForm.new_checkpoints\">\n  </app-create-assessment-container>\n</div>\n\n<app-grc-object-list *ngIf=\"activeSelector === 'GRC_OBJECTS'\" [grcObject]=\"grcList\"\n  [selectedGRC]=\"responsibilityForm.selectedGRCObjects | refDisconnect\" [loader]=\"grcLoader\" [tableCard]=\"otherGRCCard\"\n  [selectedTab]=\"selectedGRCTab\" [cardLoader]=\"grcTabLoader\" (getOtherGRCObjects)=\"getOtherGRCObjects($event)\"\n  (saveOtherGRC)=\"saveSelectedList('GRC_OBJECTS', $event)\"\n  (closeOtherGRC)=\"activateSelector('GRC_OBJECTS', false)\"></app-grc-object-list>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::ng-deep .workflw-compliance{display:block;position:relative}::ng-deep .workflw-compliance vcomply-editor .editor-container{border-radius:4px}::ng-deep .workflw-compliance vcomply-editor .editor-container .editable-block{min-height:72px;padding:11px 15px;line-height:20px;font-size:14px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}@media not all and (min-resolution: .001dpcm){@supports (-webkit-appearance: none){::ng-deep .workflw-compliance vcomply-editor .editor-container .editable-block:before{opacity:.72}}}::ng-deep .workflw-compliance vcomply-editor .editor-container .editable-block ul{padding:0 0 0 10px;margin-top:0}::ng-deep .workflw-compliance vcomply-editor .editor-container .editable-block ul li{list-style:unset}::ng-deep .workflw-compliance vcomply-editor .editor-container .editable-block ol{padding:0 0 0 10px;margin-top:0}::ng-deep .workflw-compliance vcomply-editor .editor-container .editable-block ol li{list-style:decimal}::ng-deep .workflw-compliance vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .workflw-compliance vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:22px}::ng-deep .workflw-compliance vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .workflw-compliance vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .workflw-compliance .sample-part{display:flex;align-items:center;margin-bottom:4px}::ng-deep .workflw-compliance .sample-part .sample-radio{width:100%}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item{position:relative;width:100%}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item .radio{position:absolute;left:12px;top:12px}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item .value{border:1px solid #dbdbdb;border-radius:4px;height:40px;padding:8px 8px 8px 36px;margin:0;max-width:100%;width:100%;display:flex;align-items:center;justify-content:space-between;pointer-events:none}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item .value .name{color:#747576;font-size:11px;font-weight:500;text-transform:uppercase}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item .value input{border:1px solid #dcdcdc;background:#fff;border-radius:4px;height:24px;width:64px;text-align:center;padding:4px;color:#747576;font-size:13px}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item .value input:focus{outline:none;box-shadow:none}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item input:checked~svg{position:absolute;left:12px;top:12px}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item input:checked~.value{border:1px solid #34aa44;background:#eefcf0;pointer-events:auto}::ng-deep .workflw-compliance .sample-part .or{color:#161b2f;font-size:9px;font-weight:500;text-transform:uppercase;margin:0 10px}::ng-deep .workflw-compliance .sample-part.disabled{pointer-events:none}::ng-deep .workflw-compliance .sample-part.disabled .sample-radio .radio-item .value{background:#fbfbfb;border:1px solid #f1f1f1}::ng-deep .workflw-compliance .reminder-part{border:1px solid #dbdbdb;border-radius:4px;height:40px;padding:4px 12px;color:#747576;font-size:12px;display:flex;align-items:center}::ng-deep .workflw-compliance .reminder-part input{width:30px;border:none;border-radius:0;border-bottom:1px solid #dbdbdb;text-align:center;color:#747576;font-size:13px;font-weight:500;margin:0 4px}::ng-deep .workflw-compliance .reminder-part input:focus{outline:none!important;box-shadow:none!important}::ng-deep .workflw-compliance .reminder-part .picker-group{position:relative}::ng-deep .workflw-compliance .reminder-part .picker-group input{border:1px solid #f1f1f1!important;border-radius:4px!important;width:104px!important;height:28px!important;margin-left:8px!important;padding:6px 8px!important;cursor:pointer;color:#747576!important;font-size:12px!important;font-weight:500!important;text-align:left!important}::ng-deep .workflw-compliance .reminder-part .picker-group input:hover,::ng-deep .workflw-compliance .reminder-part .picker-group input:focus{outline:none!important;box-shadow:none!important}::ng-deep .workflw-compliance .reminder-part .picker-group i{color:#1e5dd3;position:absolute;top:6px;right:10px;font-size:16px}.assessment-text{color:#747576;font-size:11px;display:flex;align-items:center;padding:0 8px;margin:-16px 0 20px}.assessment-text i.alert-icon{color:#f2bf19;font-size:16px;margin-right:8px}.assessment-text strong{font-weight:600}.assessment-text button.remove-btn{background:transparent;border-radius:0;border:none;color:#1e5dd3;font-size:10px;font-weight:600;padding:0;margin:0}.import{position:fixed;inset:0 30px 0 0;z-index:-1;width:calc(100vw - 30px)}.wf-action-list ul.action-item li.multiple-program{background:#f8f8f8}.wf-action-list ul.action-item li.multiple-program .avatar-card{padding:2px 7.5px}.wf-action-list ul.action-item li.multiple-program .avatar-card span.value{color:#747576;font-size:11px;font-weight:600;width:unset}.primary-label{background:#7aa7f7;border-radius:2px;color:#fff;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 4px;line-height:12px;margin:0 4px}.edit-due-date{display:flex;align-items:baseline;justify-content:space-between}.left-side{color:#707070}.right-side button{border-radius:2px;height:24px;background:#1e5dd3!important;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;font-weight:500;border:none!important;padding:0 8px;margin:0 0 0 8px}.right-side button i{margin-left:8px;font-size:11px}.right-side button:disabled{background:#f1f1f1!important;color:#747576!important;opacity:1}.right-side button.cancelBtn{background:transparent!important;color:#eb2424!important}.selected-count-box{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem;position:relative}.selected-text{color:#707070;font-size:11px;font-weight:500;position:fixed;padding-left:2.5rem}::ng-deep .vc-divider{border-top:.5px solid #dbdbdb;width:100%}::ng-deep .vc-cf-container{border-bottom:1px solid #E3E3E9}::ng-deep .vc-cf-container:first-of-type,::ng-deep .vc-cf-container:only-child{border-top:1px solid #E3E3E9}::ng-deep .vc-cf-container .cf-name{width:9.25rem}::ng-deep .vc-cf-container .cf-value{width:calc(100% - 9.75rem)}::ng-deep .vc-cf-container .cf-value input{height:24px!important;border:1px solid #CDCED6!important;padding:0 .5rem!important;color:#565a6f!important;font-size:11px!important}::ng-deep .vc-cf-container .cf-value input::placeholder{color:#a9aab6!important}::ng-deep .vc-cf-container .cf-value input:hover{border-color:#343952!important}::ng-deep .vc-cf-container .cf-value input:focus{outline:none;border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd31a}\n", "@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::-webkit-scrollbar-track{background-color:#f1f1f1;position:absolute}::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}button{font-family:Poppins,sans-serif}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;font-size:13px;color:#747576;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField::placeholder{font-size:13px;color:#747576}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxEnable.withBtn:after{display:none}::ng-deep .selectBoxEnable.withBtn button.setBtn{background:transparent;border-radius:0;border:none;min-width:98px}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer .chipName.no-width{max-width:unset}::ng-deep .chipContainer .chipName.full-width{max-width:25rem}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}::ng-deep .chipContainer button.countBtn.blueBg{background:#1e5dd3}::ng-deep .workflowLavel{background:#f1f1f1;border-radius:.125rem;color:#042e7d;min-width:1rem;height:1rem}::ng-deep .reviewSelection{border-radius:.25rem;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep .reviewSelection:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectButton{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectButton:hover,::ng-deep .selectButton:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep button.createNewBtn{background:transparent;border-radius:0;border:none}::ng-deep .vx-form-group{display:block;position:relative;margin-bottom:20px}::ng-deep .vx-form-group:after{content:\"\";display:block;clear:both}::ng-deep .vx-form-group .select{position:relative}::ng-deep .vx-form-group .select:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#707070;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .vx-form-group .select input{cursor:pointer;padding-right:30px!important}::ng-deep .vx-form-group .select .custom-input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;outline:none;padding:3px 12px;line-height:16px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .vx-form-group .select .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:13px;width:94%;display:block;pointer-events:none;opacity:.8}::ng-deep .vx-form-group .select .custom-input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .vx-form-group .select .custom-input.frequency-custom-input{padding-right:108px;display:flex;align-items:center}::ng-deep .vx-form-group .select+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .select+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .select+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .select~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .select.button-sec:after{display:none}::ng-deep .vx-form-group .select.button-sec button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;position:absolute;top:12px;right:8px;padding:0;margin:0}::ng-deep .vx-form-group .select+.vx-control-panel{margin-top:8px}::ng-deep .vx-form-group .select+.selected{margin-top:8px}::ng-deep .vx-form-group .select.select{margin-top:8px}::ng-deep .vx-form-group .upload-format{border:1px solid #dbdbdb;border-radius:4px;padding:8px 12px;display:block}::ng-deep .vx-form-group .upload-format span.text{line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:block;margin-bottom:6px}::ng-deep .vx-form-group .upload-format .radio-group{display:flex}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio{display:inline-block}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;margin-left:8px}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio+app-cs-radio{margin-left:12px}::ng-deep .vx-form-group .upload-format~.upload-format{margin-top:4px}::ng-deep .vx-form-group .form-tab{display:flex;justify-content:flex-start}::ng-deep .vx-form-group .form-tab button{background:transparent;color:#161b2f;font-size:11px;line-height:16px;text-transform:uppercase;cursor:pointer;padding:8px 8px 8px 0;border:none;outline:none;font-weight:500}::ng-deep .vx-form-group .form-tab button:disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .form-tab button+button{padding:8px}::ng-deep .vx-form-group .form-tab button.active{color:#1e5dd3}::ng-deep .vx-form-group .tab-group{border:1px solid #dbdbdb;border-radius:4px;padding:0;display:block;position:relative;transition:all .2s ease-in-out}::ng-deep .vx-form-group .tab-group:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group .tab-group .upload-file{padding:16px 62px 16px 24px;display:flex;align-items:center;justify-content:space-between}::ng-deep .vx-form-group .tab-group .upload-file .image{width:80px}::ng-deep .vx-form-group .tab-group .upload-file .browse span{display:inline-block;font-size:12px;color:#747576;line-height:16px;padding:0 4px}::ng-deep .vx-form-group .tab-group .upload-file .browse .label{font-size:11px;color:#1e5dd3;line-height:16px;font-weight:600;text-transform:uppercase;margin:0;padding:0}::ng-deep .vx-form-group .tab-group .upload-file .browse .label input{opacity:0;position:absolute;margin:0;padding:0;inset:0;cursor:pointer;width:100%}::ng-deep .vx-form-group .tab-group.active{border-color:#1e5dd3}::ng-deep .vx-form-group .tab-group.uploaded{margin-top:4px}::ng-deep .vx-form-group .tab-group.uploaded .upload-file{padding:8px 0!important;text-align:center}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .image{display:none}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .browse{width:100%;text-align:center}::ng-deep .vx-form-group .tab-group+label.vx-form-group{margin-top:8px;margin-bottom:4px}::ng-deep .vx-form-group .file-list{background:#fbfbfb;border:1px solid #f1f1f1;border-radius:4px;padding:12px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;position:relative}::ng-deep .vx-form-group .file-list span.file-name{color:#747576;line-height:16px;font-size:11px;font-weight:400;cursor:pointer;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .vx-form-group .file-list .button-group{display:flex}::ng-deep .vx-form-group .file-list button{font-size:12px;color:#eb2424;cursor:pointer;display:flex;padding:0;border:none;outline:none;background:transparent}::ng-deep .vx-form-group .file-list button.edit{color:#1e5dd3}::ng-deep .vx-form-group .file-list button+button{margin-left:16px}::ng-deep .vx-form-group .file-list+.file-list{margin-top:4px}::ng-deep .vx-form-group .file-list .file-container{display:flex;justify-content:space-between;width:100%}::ng-deep .vx-form-group .file-list.policy{background:#fff}::ng-deep .vx-form-group .file-list cs-select{position:relative;margin-top:8px;width:100%}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group input.value{height:32px!important;font-size:13px!important}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group i{right:12px!important;top:12px!important}::ng-deep .vx-form-group .file-list app-line-loader{display:block;position:absolute;left:10px;right:10px;bottom:0}::ng-deep .vx-form-group label.vx-control-panel{color:#161b2f;font-size:11px;font-weight:500;line-height:16px;margin-bottom:8px;display:block;text-transform:uppercase;text-align:left}::ng-deep .vx-form-group label.vx-control-panel.custom-tag{font-size:10px}::ng-deep .vx-form-group label.vx-control-panel.vx-mt-8{margin-top:8px}::ng-deep .vx-form-group label.vx-control-panel span.required{color:#eb2424;font-size:14px;font-weight:500;position:relative;top:-2px}::ng-deep .vx-form-group label.vx-control-panel .button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;padding:0;margin:0}::ng-deep .vx-form-group label.vx-control-panel app-cs-switch{float:right;display:block}::ng-deep .vx-form-group label.vx-control-panel i{margin-left:8px;font-size:12px;color:#1e5dd3;cursor:pointer;position:relative;top:1px}::ng-deep .vx-form-group label.vx-control-panel i.depreciation-icon{color:#e4b700;font-size:16px;position:relative;top:3px}::ng-deep .vx-form-group label.vx-control-panel .checkpoint-version{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:10px;font-weight:600;line-height:14px;margin-left:4px;padding:0 2px}::ng-deep .vx-form-group input[type=text],::ng-deep .vx-form-group .input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;outline:none;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400}::ng-deep .vx-form-group input[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group input[type=text]:focus,::ng-deep .vx-form-group .input:focus,::ng-deep .vx-form-group input[type=text]:hover,::ng-deep .vx-form-group .input:hover{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group input[type=text].error,::ng-deep .vx-form-group .input.error{border-color:#eb2424;color:#eb2424;margin-bottom:4px}::ng-deep .vx-form-group input[type=text].error:focus,::ng-deep .vx-form-group .input.error:focus{box-shadow:0 0 5px #d31e1e45}::ng-deep .vx-form-group input[type=text]:disabled,::ng-deep .vx-form-group .input:disabled{background:#f1f1f1;cursor:not-allowed;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group input[type=text]:disabled:hover,::ng-deep .vx-form-group .input:disabled:hover{border-color:#dbdbdb;box-shadow:none}::ng-deep .vx-form-group input[type=text] span.text,::ng-deep .vx-form-group .input span.text{font-size:13px;color:#747576;font-weight:400;display:block;width:100%}::ng-deep .vx-form-group input[type=text] .input-group,::ng-deep .vx-form-group .input .input-group{display:flex;align-items:center}::ng-deep .vx-form-group input[type=text] .input-group.counter,::ng-deep .vx-form-group .input .input-group.counter{min-width:96px;width:96px}::ng-deep .vx-form-group input[type=text] .input-group.counter button,::ng-deep .vx-form-group .input .input-group.counter button{height:24px;width:24px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#747576;font-size:8px;cursor:pointer;outline:none}::ng-deep .vx-form-group input[type=text] .input-group.counter input,::ng-deep .vx-form-group .input .input-group.counter input{-webkit-appearance:textfield;-moz-appearance:textfield;height:24px;width:calc(100% - 48px);border:1px solid #f1f1f1;outline:none;padding:0 6px;text-align:center}::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-outer-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-outer-spin-button{appearance:none;margin:0}::ng-deep .vx-form-group input[type=text]+.file-list,::ng-deep .vx-form-group .input+.file-list{margin-top:8px}::ng-deep .vx-form-group input[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]:-ms-input-placeholder,::ng-deep .vx-form-group .input:-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]::-ms-input-placeholder,::ng-deep .vx-form-group .input::-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group .classification{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;padding:8px 12px;display:flex;justify-content:space-between}::ng-deep .vx-form-group .classification label{margin:0 4px 0 0;width:100%;position:relative;z-index:1}::ng-deep .vx-form-group .classification label span{display:block;width:100%;height:24px;border:1px solid #f1f1f1;border-radius:2px;line-height:24px;font-size:10px;text-align:center;color:#747576;font-weight:500;position:relative;text-transform:uppercase}::ng-deep .vx-form-group .classification label span:before{height:2px;content:\"\";top:0;right:0;left:0;border-radius:2px;position:absolute;transition:all .2s ease-in-out}::ng-deep .vx-form-group .classification label input{opacity:0;position:absolute;inset:0;margin:0;padding:0;width:100%;height:100%;cursor:pointer;z-index:1}::ng-deep .vx-form-group .classification label input:checked+span{color:#fff}::ng-deep .vx-form-group .classification label input:checked+span:before{bottom:0;height:100%;z-index:-1}::ng-deep .vx-form-group .classification label.low span:before{background:#34aa44}::ng-deep .vx-form-group .classification label.low-med span:before{background:#f2bf19}::ng-deep .vx-form-group .classification label.med-high span:before{background:#f29619}::ng-deep .vx-form-group .classification label.high span:before{background:#eb2424}::ng-deep .vx-form-group .classification label:last-of-type{margin-right:0}::ng-deep .vx-form-group .input{display:flex;align-items:center}::ng-deep .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;padding:8px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:flex;align-items:center;position:relative;justify-content:space-between}::ng-deep .vx-form-group .selected.first-field{z-index:2}::ng-deep .vx-form-group .selected .chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .vx-form-group .selected .chip-container.checkpoints{width:calc(100% - 120px)}::ng-deep .vx-form-group .selected .chip-container span.chip{background:#fff;border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;padding:0 8px;color:#1e5dd3;font-size:12px;display:block;width:auto;max-width:100%;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .vx-form-group .selected .chip-container span.chip.disabled{background:#f1f1f1;box-shadow:none;color:#747576;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .selected .chip-container span.chip i{font-weight:400;margin-right:8px;cursor:pointer;font-size:10px;position:relative;top:1px}::ng-deep .vx-form-group .selected .chip-container span.chip span.step{background:#1e5dd3;border-radius:2px;color:#fff;font-size:9px;line-height:14px;padding:0 4px;font-weight:400;text-align:center;min-width:auto;margin-right:4px}::ng-deep .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question{display:flex;align-items:center;justify-content:space-between;width:100%}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.value{color:#1e5dd3;font-size:12px;font-weight:400;line-height:24px;padding:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 80px)}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.label{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding-left:4px;padding-right:4px;line-height:12px;margin-left:8px}::ng-deep .vx-form-group .selected .chip-container span.value{color:#747576;font-size:13px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 52px);padding:0 4px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text{color:#747576;font-size:10px;font-weight:500;padding:0 8px;width:122px;line-height:14px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first{position:relative;min-width:162px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first:before{background:#f1f1f1;content:\"\";position:absolute;top:0;right:0;height:calc(100% + 12px);width:1px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text .no{color:#1e5dd3}::ng-deep .vx-form-group .selected .chip-container.plus span.chip{max-width:calc(50% - 35px)}::ng-deep .vx-form-group .selected .chip-container.more-one span.chip{max-width:50%}::ng-deep .vx-form-group .selected .chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .vx-form-group .selected .chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:100px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count{border-radius:20px;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .vx-form-group .selected .chip-container .chip-inner i.cross{cursor:pointer;position:relative;top:1px;font-size:8px}::ng-deep .vx-form-group .selected button.count{background:#1e5dd3;border-radius:2px;height:24px;padding:0 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none;color:#fff;font:13px;font-weight:500;line-height:20px;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit{border:none;border-radius:0;background:transparent;outline:none;cursor:pointer;display:block;font-size:11px;font-weight:600;color:#1e5dd3;text-transform:uppercase;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit i{font-weight:400;font-size:8px;margin-right:4px}::ng-deep .vx-form-group .selected button.close-btn{background:transparent;border:none;padding:0;margin-left:8px;font-size:10px;color:#c7381b;display:flex;align-items:center}::ng-deep .vx-form-group .selected .workflow-label{min-width:92px;padding:4px;text-align:center;margin-left:-8px;margin-right:8px;border-right:1px solid #f1f1f1}::ng-deep .vx-form-group .selected .workflow-label p{margin:0;display:block;text-transform:uppercase}::ng-deep .vx-form-group .selected .workflow-label p.title{font-size:9px;line-height:12px;color:#161b2f;font-weight:500}::ng-deep .vx-form-group .selected .workflow-label p.description{font-size:11px;line-height:16px;color:#161b2f;font-weight:600}::ng-deep .vx-form-group .selected .workflow-label+.chip-container{width:calc(100% - 148px)}::ng-deep .vx-form-group .selected+.selected{margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .selected+app-cs-switch.who-toggle label.cs-switch span.value{color:#747576}::ng-deep .vx-form-group .selected+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .selected~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .selected.readOnly{pointer-events:none}::ng-deep .vx-form-group .selected span.chip{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .vx-form-group .select-list{position:absolute;background:#fff;box-shadow:0 0 5px #1e5dd345;top:100%;right:0;left:0;z-index:2}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item{width:100%;padding:12px 16px}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item:hover{background:#f8f8f8}::ng-deep .vx-form-group ::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;line-height:38px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400;border:none;padding:0 12px 0 34px;outline:none}::ng-deep .vx-form-group .date-time-picker .picker-group input:focus,::ng-deep .vx-form-group .date-time-picker .picker-group input:hover{box-shadow:none;border:none}::ng-deep .vx-form-group .date-time-picker .picker-group input::placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input:-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input::-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group i{display:flex;justify-content:center;align-items:center;height:16px;width:12px;position:absolute;left:12px;top:0;color:#747576;font-size:12px;pointer-events:none}::ng-deep .vx-form-group app-cs-radio.main-filed{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;color:#707070}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group app-cs-radio.disabled{pointer-events:none;opacity:.5;filter:grayscale(1);background:#f1f1f1}::ng-deep .vx-form-group .switch-row{display:flex}::ng-deep .vx-form-group .switch-row app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:0;text-transform:uppercase;color:#747576!important}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value i{display:inline-flex;font-size:11px;cursor:pointer;color:#1e5dd3;align-items:center;line-height:16px;margin:0 4px}::ng-deep .vx-form-group .switch-row app-cs-switch+app-cs-switch{margin-left:8px}::ng-deep .vx-form-group .switch-row.align-right{justify-content:flex-end}::ng-deep .vx-form-group .switch-row.align-right label.cs-switch span.value{margin-right:8px}::ng-deep .vx-form-group .risk-type-field{background:#f8f8f8;border:1px solid #dbdbdb;border-radius:4px;height:40px;display:flex;align-items:center;padding:4px;position:relative;z-index:1}::ng-deep .vx-form-group .risk-type-field .type-item{width:50%;position:relative}::ng-deep .vx-form-group .risk-type-field .type-item button{background:transparent;border:none;border-radius:0;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase;width:100%;height:32px;padding:0 12px;text-align:left}::ng-deep .vx-form-group .risk-type-field .type-item button.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item .info{color:#1e5dd3;font-size:12px;position:absolute;top:10px;right:12px;cursor:pointer}::ng-deep .vx-form-group .risk-type-field .type-item .info.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item.active button{color:#1e5dd3!important}::ng-deep .vx-form-group .risk-type-field .type-item:nth-child(2).active~.background-glider{transform:translate(100%)}::ng-deep .vx-form-group .risk-type-field .background-glider{background:#fff;border-radius:4px;box-shadow:0 1px 3px #161b2f26;position:absolute;display:flex;width:212px;height:32px;z-index:-1;transition:.25s ease-out}.left{width:36px;height:36px;margin-top:26px;margin-left:-58px;margin-right:20px;display:flex;justify-content:center;align-items:center;position:relative;z-index:10;border-radius:50%}.left.deadline-completed{margin-top:18px}.left.checked{background:transparent}.left img{width:36px}.left .checkIcon{width:32px;height:32px;background:#fff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}.left .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}.left .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}.right{width:100%}.right span.indicator{position:absolute;top:36px;left:-16px;font-size:12px;color:#f0b819;cursor:pointer}.form-group-row{display:flex;position:relative;transition:all .2s ease-in-out}.form-group-row.disabled{-webkit-user-select:none;user-select:none;pointer-events:none;filter:grayscale(1);z-index:2}.form-group-row.disabled .left{position:relative}.form-group-row.disabled .left:before{content:\"\";position:absolute;inset:2px 0 0 2px;background:#fff;opacity:.7;border-radius:50%;width:32px;height:32px}.form-group-row.disabled .right{opacity:.3}.form-group-row.active{pointer-events:none;filter:grayscale(0);z-index:2;opacity:1}.form-group-row.active .right .vx-form-group input,.form-group-row.active .right .vx-form-group .custom-input,.form-group-row.active .right .vx-form-group .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}.form-group-row.active .right .vx-form-group .selectBoxEnable.disabled{border-color:#dbdbdb;box-shadow:none}::ng-deep .radio-group-selector app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .radio-group-selector app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .radio-group-selector app-cs-radio label.radio-item .radio,::ng-deep .radio-group-selector app-cs-radio label.radio-item .radiomark{position:absolute!important;top:9px;left:12px}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value{font-size:11px!important;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0!important;max-width:100%!important;font-weight:500!important;color:#707070!important}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value i{font-size:12px;color:#1e5dd3}::ng-deep .radio-group-selector app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}::ng-deep .wf-action-list{width:220px}::ng-deep .wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}::ng-deep .wf-action-list ul.action-item{display:block}::ng-deep .wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}::ng-deep .wf-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}::ng-deep .wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .wf-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .wf-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .wf-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .wf-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .wf-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}::ng-deep .wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}p.error-message{font-size:11px;font-weight:400;color:#eb2424;line-height:16px;margin-top:8px;margin-bottom:0}.edit-loader{position:absolute;top:-3px;left:-3px;width:46px;height:46px;transform:rotate(180deg)}.circular-loader{animation:rotate 2s linear infinite;height:100%;transform-origin:center center;width:100%;position:absolute;top:0;left:0;margin:auto}.loader-path{stroke-dasharray:150,200;stroke-dashoffset:-10;animation:dash 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35}to{stroke-dasharray:89,200;stroke-dashoffset:-124}}::ng-deep .dropdown{position:fixed;background:#fff;box-shadow:0 3px 6px #00000029;padding:24px 0;z-index:9;max-height:calc(100vh - 200px);overflow:auto}::ng-deep .dropdown ul.dropdown-list{padding:0 20px;margin:0;display:block}::ng-deep .dropdown ul.dropdown-list li{list-style:none}::ng-deep .dropdown ul.dropdown-list li app-cs-radio{display:flex}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.radio{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.value{padding:11px 12px 11px 32px;width:100%;border:1px solid #bcbcbc;border-radius:4px;margin-left:0;max-width:100%}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item svg{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item input[type=radio]:checked~span.value{background:#e8feeb;border-color:#34aa44}::ng-deep .dropdown ul.dropdown-list li+li{margin-top:8px}app-smiley-dialog{position:relative;z-index:10}app-smiley-dialog-inline{position:absolute;top:-3px;right:0;bottom:0;z-index:999;width:520px;height:calc(100vh + 3px)}::ng-deep .vx-overlay{position:fixed;z-index:3;inset:0}::ng-deep dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}::ng-deep dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}::ng-deep dp-date-picker input:focus{outline:none}::ng-deep dp-date-picker .dp-popup{width:412px;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep dp-date-picker .dp-popup dp-day-calendar,::ng-deep dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep dp-date-picker .dp-popup dp-day-calendar button,::ng-deep dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}::ng-deep dp-date-picker .dp-open+div{position:fixed!important;inset:0!important;display:flex;justify-content:center;align-items:center;z-index:99;pointer-events:none;background:#0000004d}::ng-deep .cdk-overlay-container{z-index:2147483002!important}::ng-deep .dp-popup{z-index:999;display:flex!important;align-items:center;justify-content:center;width:100vw;height:100vh;background:#0000004d!important;box-shadow:unset!important}::ng-deep .dp-popup dp-day-calendar{width:412px!important;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep .dp-popup dp-day-calendar,::ng-deep .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep .dp-popup dp-day-calendar button,::ng-deep .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep .dp-popup dp-day-calendar .dp-weekdays,::ng-deep .dp-popup dp-month-calendar .dp-weekdays,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}@keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}::ng-deep span.file{display:block;width:20px;min-width:20px;border-radius:0 0 2px 2px;border:1px solid transparent;border-color:#747576;position:relative;margin-right:5px;border-top:none;margin-top:5px;background:#fff}::ng-deep span.file.table{margin-right:8px;width:18px;min-width:18px}::ng-deep span.file.table i{font-size:8px}::ng-deep span.file.table .format{height:8px;font-size:7px;line-height:8px;font-weight:400}::ng-deep span.file:before{position:absolute;border-radius:0;top:-4px;right:-1px;content:\"\";height:4px;width:4px;display:block;background:linear-gradient(45deg,#747576 0% 1%,#747576 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file:after{height:4px;left:-1px;right:3px;border-top:1px solid;border-right:none;border-left:1px solid;content:\"\";top:-4px;position:absolute;border-radius:2px 0 0;background:#fff}::ng-deep span.file .format{height:10px;font-size:6px;text-transform:uppercase;background:transparent;font-weight:600;text-align:center;display:block;line-height:10px}::ng-deep span.file i{font-size:10px;height:10px;display:flex;align-items:center;justify-content:center;color:#dbdbdb}::ng-deep span.file.docx{width:22px!important}::ng-deep span.file.pdf,::ng-deep span.file.template{border-color:#f31c39}::ng-deep span.file.pdf:before,::ng-deep span.file.template:before{background:linear-gradient(45deg,#f31c39 0% 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#f31c39\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.pdf:after,::ng-deep span.file.template:after{border-color:#f31c39}::ng-deep span.file.pdf .format,::ng-deep span.file.template .format{color:#f31c39}::ng-deep span.file.xlsx,::ng-deep span.file.xls,::ng-deep span.file.css,::ng-deep span.file.scss,::ng-deep span.file.less{border-color:#34aa44}::ng-deep span.file.xlsx:before,::ng-deep span.file.xls:before,::ng-deep span.file.css:before,::ng-deep span.file.scss:before,::ng-deep span.file.less:before{background:linear-gradient(45deg,#34aa44 0% 1%,#34aa44 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.xlsx:after,::ng-deep span.file.xls:after,::ng-deep span.file.css:after,::ng-deep span.file.scss:after,::ng-deep span.file.less:after{border-color:#34aa44;color:#34aa44}::ng-deep span.file.xlsx .format,::ng-deep span.file.xls .format,::ng-deep span.file.css .format,::ng-deep span.file.scss .format,::ng-deep span.file.less .format{color:#34aa44}::ng-deep span.file.doc,::ng-deep span.file.docx,::ng-deep span.file.psd{border-color:#1e5dd3}::ng-deep span.file.doc:before,::ng-deep span.file.docx:before,::ng-deep span.file.psd:before{background:linear-gradient(45deg,#1e5dd3 0% 1%,#1e5dd3 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.doc:after,::ng-deep span.file.docx:after,::ng-deep span.file.psd:after{border-color:#1e5dd3}::ng-deep span.file.doc .format,::ng-deep span.file.docx .format,::ng-deep span.file.psd .format{color:#1e5dd3}::ng-deep span.file.ppt,::ng-deep span.file.ai,::ng-deep span.file.html,::ng-deep span.file.jpg,::ng-deep span.file.jpeg,::ng-deep span.file.png{border-color:#f6882f}::ng-deep span.file.ppt:before,::ng-deep span.file.ai:before,::ng-deep span.file.html:before,::ng-deep span.file.jpg:before,::ng-deep span.file.jpeg:before,::ng-deep span.file.png:before{background:linear-gradient(45deg,#f6882f 0% 1%,#f6882f 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.ppt:after,::ng-deep span.file.ai:after,::ng-deep span.file.html:after,::ng-deep span.file.jpg:after,::ng-deep span.file.jpeg:after,::ng-deep span.file.png:after{border-color:#f6882f}::ng-deep span.file.ppt .format,::ng-deep span.file.ai .format,::ng-deep span.file.html .format,::ng-deep span.file.jpg .format,::ng-deep span.file.jpeg .format,::ng-deep span.file.png .format{color:#f6882f}::ng-deep span.file.php{border-color:#7aa6f7}::ng-deep span.file.php:before{background:linear-gradient(45deg,#7aa6f7 0% 1%,#7aa6f7 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.php:after{border-color:#7aa6f7}::ng-deep span.file.php .format{color:#7aa6f7}::ng-deep ngx-material-timepicker-container .timepicker-backdrop-overlay{background-color:#0000000d!important;z-index:9999999999!important}::ng-deep ngx-material-timepicker-container .timepicker-overlay{z-index:9999999999!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker{width:232px!important;border-radius:2px!important;box-shadow:0 4px 30px #161b2f26!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header{background-color:#fff!important;padding:0!important;border-radius:2px 2px 0 0}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container{display:block!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time{color:#000!important;width:150px!important;margin:0 auto;line-height:60px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control{font-size:40px;background-color:transparent!important;color:#000!important;font-weight:600;text-align:right;caret-color:transparent;outline:none;font-family:Poppins;line-height:56px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:focus,::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:hover{background-color:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control:last-of-type .timepicker-dial__control{text-align:left}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time span{padding:0 8px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period{display:flex!important;width:182px;margin:0 auto!important;background:#f1f1f1;padding:4px 10px;border-radius:20px;position:relative}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period:before{background:#f1f1f1;content:\"\";position:absolute;top:15px;left:-25px;width:calc(100% + 50px);height:2px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period{flex-direction:unset!important;position:relative;z-index:1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:after{content:\"\";position:absolute;right:-12px;top:0;border-left:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:before{content:\"\";position:absolute;left:-18px;top:0;border-right:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button{font-size:11px;background-color:transparent;padding:0;border-radius:20px;color:#747576;font-weight:600;font-family:Poppins;width:84px;height:24px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button.timepicker-dial__item_active{background:#fff!important;color:#1e5dd3!important;box-shadow:0 1px 2px #dbdbdb}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button+button{margin-left:0!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face{width:200px!important;height:200px!important;padding:10px!important;background:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer{height:92px!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span{color:#000}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span.active{color:#fff}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand{height:80px!important;top:calc(50% - 80px)!important;background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number>span.active{background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand_minute:before{border:4px solid #1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions{display:flex!important;padding:10px 0 0!important;background:#fff!important;justify-content:space-around!important;border-radius:0 0 2px 2px!important;overflow:hidden}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div:first-child ngx-material-timepicker-button button.timepicker-button{background:#f8f8f8;color:#1e5dd3}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button{line-height:28px!important;width:100%;background:#1e5dd3;color:#fff;border-radius:0!important;height:32px!important;width:116px!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button span{font-weight:500!important;font-size:11px;font-family:Poppins}::ng-deep vcomply-editor{display:block}::ng-deep vcomply-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep vcomply-editor .editor-container:hover,::ng-deep vcomply-editor .editor-container:focus-within{border:1px solid #1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep vcomply-editor .editor-container mention-list ul li a{font-size:16px!important}::ng-deep vcomply-editor .editor-container .editable-block{background:#fff;min-height:60px;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep vcomply-editor .editor-container .editable-block:before{color:#747576!important}::ng-deep vcomply-editor .editor-container .editor-tools{border-top:1px solid #dbdbdb;border-radius:0 0 3px 3px}::ng-deep vcomply-editor .editor-container .editor-tools:hover{border-color:#1e5dd3}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep marx-modal .popup-modal-background{background-color:#161b2fcc!important}::ng-deep .within-box{background:#f1f1f1;border-radius:.125rem;color:#042e7d}::ng-deep .within-value{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-word}.wf-tooltip{pointer-events:none;position:absolute;max-width:300px;font-size:12px;text-align:left;color:#fff;padding:8px 12px;background:#000;border-radius:2px;z-index:-222;top:0;opacity:0;white-space:break-spaces;word-break:break-word}.wf-tooltip *{color:#fff!important}.wf-tooltip:empty{display:none!important}.wf-tooltip.white{box-shadow:0 2px 8px #1c5bd159;color:#747576;background:#fff;text-align:left}.wf-tooltip.white b{color:#747576!important}.wf-tooltip.animate-top{animation:animate-top .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-right{animation:animate-right .3s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-bottom{animation:animate-bottom .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-left{animation:animate-left .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip-top:after{top:100%;left:50%;margin-left:-5px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip-bottom:after{bottom:100%;left:50%;margin-left:-5px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-left.white:after{border-color:transparent transparent transparent #f1f1f1}.wf-tooltip-left:after{top:50%;left:100%;margin-top:-5px;border-width:5px;border-color:transparent transparent transparent #000000}.wf-tooltip-right.white:after{border-color:transparent #f1f1f1 transparent transparent}.wf-tooltip-right:after{top:50%;right:100%;margin-top:-5px;border-width:5px;border-color:transparent #000000 transparent transparent}.wf-tooltip-bottom-right:after{bottom:100%;left:100%;margin-left:-20px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom-right.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-bottom-left:after{bottom:100%;left:0;margin-left:10px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom-left.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-top-left:after{top:100%;left:0;margin-left:10px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top-left.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip-top-right:after{top:100%;left:100%;margin-left:-5px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top-right.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip:after{content:\"\";position:absolute;border-style:solid}.wf-tooltip span.within{font-size:80%;display:block;width:100%}.wf-tooltip .small{display:block;font-size:10px}.wf-tooltip .within-box{background:#f1f1f1;border-radius:2px;color:#042e7d!important;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 2px;margin-right:2px}.wf-tooltip-show{pointer-events:none;opacity:1;z-index:2147483001}\n"] }]
         }], ctorParameters: function () { return [{ type: AuthService$1 }, { type: ResponsibilityService }, { type: FrequencyService }, { type: UiKitService }, { type: SnackBarService }, { type: AuthService$1 }, { type: ProgramsService }, { type: GrcService }, { type: OrganizationUserService }, { type: ComplianceCommonService }, { type: OrganizationCommonService }, { type: IframeService }]; }, propDecorators: { mode: [{
                 type: Input
             }], responsibilityId: [{
@@ -35674,8 +35519,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['what']
             }], responsibilityDetails: [{
                 type: Input
-            }], customFields: [{
-                type: Input
             }], customItemTemplate: [{
                 type: ViewChild,
                 args: ['customItemTemplate', { static: true }]
@@ -40641,16 +40484,17 @@ class MoreOptionComponent {
                     hidden: false,
                     code: 'OVERSEER',
                 },
-                {
-                    imageUrl: 'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/custom-fields.svg',
-                    name: 'Custom Fields',
-                    tooltipTitle: 'Custom Fields',
-                    tooltipMessage: `A custom field is a user-defined data field that allows you to capture information beyond the standard fields provided by the system.`,
-                    checked: false,
-                    hidden: false,
-                    isDisabled: false,
-                    code: 'CUSTOM_FIELDS',
-                },
+                // {
+                //   imageUrl:
+                //     'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/custom-fields.svg',
+                //   name: 'Custom Fields',
+                //   tooltipTitle: 'Custom Fields',
+                //   tooltipMessage: `A custom field is a user-defined data field that allows you to capture information beyond the standard fields provided by the system.`,
+                //   checked: false,
+                //   hidden: false,
+                //   isDisabled: false,
+                //   code: 'CUSTOM_FIELDS',
+                // },
             ],
             CAS: [
                 {
@@ -40755,15 +40599,16 @@ class MoreOptionComponent {
                     hidden: false,
                     code: 'COLLABORATORS',
                 },
-                {
-                    imageUrl: ASSETS.custom_fields,
-                    name: 'Custom Field',
-                    code: 'CUSTOM_FIELDS',
-                    tooltipTitle: ' Custom Field',
-                    tooltipMessage: 'When a custom field is specified, all responsibilities linked with a Program will contain that custom field. Custom fields enable the collection of additional meta data.',
-                    checked: false,
-                    hidden: false,
-                },
+                // {
+                //   imageUrl: ASSETS.custom_fields,
+                //   name: 'Custom Field',
+                //   code: 'CUSTOM_FIELDS',
+                //   tooltipTitle: ' Custom Field',
+                //   tooltipMessage:
+                //     'When a custom field is specified, all responsibilities linked with a Program will contain that custom field. Custom fields enable the collection of additional meta data.',
+                //   checked: false,
+                //   hidden: false,
+                // },
             ],
             GRC: [
                 {
@@ -40795,16 +40640,17 @@ class MoreOptionComponent {
                     hidden: false,
                     code: 'OTHER_GRC_OBJECTS',
                 },
-                {
-                    imageUrl: LINKS?.customFields,
-                    name: 'GRC Object Type Attributes',
-                    tooltipTitle: 'GRC Object Type Attributes',
-                    tooltipMessage: `This option lets you add additional information related to a GRC Object.`,
-                    disabledMessage: 'There are no additional attributes linked with this GRC Object Type.',
-                    checked: false,
-                    hidden: false,
-                    code: 'ATTRIBUTES',
-                },
+                // {
+                //   imageUrl: LINKS?.customFields,
+                //   name: 'GRC Object Type Attributes',
+                //   tooltipTitle: 'GRC Object Type Attributes',
+                //   tooltipMessage: `This option lets you add additional information related to a GRC Object.`,
+                //   disabledMessage:
+                //     'There are no additional attributes linked with this GRC Object Type.',
+                //   checked: false,
+                //   hidden: false,
+                //   code: 'ATTRIBUTES',
+                // },
             ],
             RAC: [
                 {
@@ -49159,7 +49005,6 @@ class WorkflowEngineContainerComponent {
         this.grcType = 0;
         this.isSendForAttestation = false;
         this.templateId = '';
-        this.customFields = [];
         this.programSimplifyFlag = false;
         this.isResponsibilitySimplifyFlag = false;
         this.caseFeatureFlag = false;
@@ -49437,6 +49282,7 @@ class WorkflowEngineContainerComponent {
                 break;
             }
             case 'GRC': {
+                console.log('this.grcObject', this.grcObject);
                 this.grcObject.saveGRCObject();
                 break;
             }
@@ -49802,11 +49648,11 @@ class WorkflowEngineContainerComponent {
         this.selectedAssessment = assessmentData;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WorkflowEngineContainerComponent, deps: [{ token: UiKitService }, { token: SnackBarService }, { token: AuthService$1 }, { token: OrganizationCommonService }, { token: ReportACaseService }, { token: ReportCasePermissionService }, { token: IframeService }, { token: ResponsibilityService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: WorkflowEngineContainerComponent, selector: "app-vcomply-workflow-engine-container", inputs: { workflowType: "workflowType", mode: "mode", id: "id", openedFrom: "openedFrom", source: "source", allowedWorkflows: "allowedWorkflows", frameworkDetails: "frameworkDetails", selectedRC: "selectedRC", secondaryOpenPortal: "secondaryOpenPortal", defaultRiskType: "defaultRiskType", moveToRegisterMode: "moveToRegisterMode", workflowDetails: "workflowDetails", reponsibilityData: "reponsibilityData", assessmentQuestion: "assessmentQuestion", pid: "pid", programType: "programType", issueData: "issueData", entrustButtonName: "entrustButtonName", config: "config", convertFileData: "convertFileData", selectedCategory: "selectedCategory", selectedProgram: "selectedProgram", canFrameworkChange: "canFrameworkChange", addToProgramDetails: "addToProgramDetails", grcType: "grcType", isSendForAttestation: "isSendForAttestation", assessmentDetails: "assessmentDetails", templateId: "templateId", customFields: "customFields", feature: "feature" }, outputs: { closeWorkflow: "closeWorkflow" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)", "window:resize": "sizeChange($event)" } }, viewQueries: [{ propertyName: "riskComponent", first: true, predicate: ["risk"], descendants: true }, { propertyName: "riskBulkUpload", first: true, predicate: ["multipleRisk"], descendants: true }, { propertyName: "responsibilityBulkUpload", first: true, predicate: ["multipleResponsibility"], descendants: true }, { propertyName: "compliance", first: true, predicate: ["responsibility"], descendants: true }, { propertyName: "moreOption", first: true, predicate: ["moreOption"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "dropdownRow", first: true, predicate: ["dropdownRow"], descendants: true }, { propertyName: "policy", first: true, predicate: ["policy"], descendants: true }, { propertyName: "logIssueComponent", first: true, predicate: ["logAnIssue"], descendants: true }, { propertyName: "workflowAssessmentComponent", first: true, predicate: ["assessment"], descendants: true }, { propertyName: "importAnAssessment", first: true, predicate: ["importAssessment"], descendants: true }, { propertyName: "program", first: true, predicate: ["program"], descendants: true }, { propertyName: "grcObject", first: true, predicate: ["grcObject"], descendants: true }, { propertyName: "reportCase", first: true, predicate: ["reportCase"], descendants: true }], ngImport: i0, template: "<app-snack-bar></app-snack-bar>\n<div class=\"workflow-engine-overlay\"></div>\n\n<app-assessment-list *ngIf=\"workflowType === 'ASSESSMENT'\" (cancelAssessment)=\"closeWorkflowEngine()\" [isEdit]=\"true\"\n  [isFullScreen]=\"true\" [selectedAssessment]=\"selectedAssessment\"\n  (onAssessmentSelect)=\"closeWorkflowEngine({ evt: $event, confirm: false })\"></app-assessment-list>\n<div *ngIf=\"workflowType !== 'ASSESSMENT'\" class=\"workflow-engine\" [class.animate]=\"animation\" [class.bg]=\"\n    (!isWorkflowSelectorEnabled || riskBulkUpload?.showCategoryList) &&\n    !policy?.showCreateDocuments\n  \">\n  <div class=\"workflow-engine-container\" [ngSwitch]=\"currentWorkflow?.code\"\n    [class.with-preview-assessment]=\"(auth?.previewPanel | async) === true\" [class.with-frequency]=\"\n      compliance?.activeSelector === 'frequency' ||\n      compliance?.activeSelector === 'reviewerFrequency' ||\n      riskComponent?.activeSelector === 'frequency' ||\n      policy?.activeSelector === 'frequency' ||\n      policy?.activeSelector === 'reviewerFrequency'\n    \">\n    <button (click)=\"closeWorkflowEngine()\" id=\"close-workflow-engine-btn\" class=\"close\" [appTooltip]=\"'[Esc] to close'\"\n      placement=\"left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\" [class.disabled]=\"\n        confirmationAlertConfig?.isVisible || !isWorkflowSelectorEnabled\n      \" [class.smiley-opened]=\"\n        riskComponent?.showSmiley ||\n        logIssueComponent?.showSmiley ||\n        compliance?.showSmiley ||\n        policy?.showCreateDocuments ||\n        responsibilityBulkUpload?.showSmiley ||\n        responsibilityBulkUpload?.showExcel ||\n        riskBulkUpload?.showSmiley ||\n        riskBulkUpload?.showExcel ||\n        program?.showSmiley ||\n        importAnAssessment?.showSmiley\n      \">\n      <i class=\"icons\">&#xe93f;</i>\n    </button>\n    <div *ngIf=\"!uiKitService.isSmileyOn\" class=\"workflow-engine-more\"\n      [hidden]=\"showMoreOption === false || policy?.showCreateDocuments\"\n      [class.disabled]=\"confirmationAlertConfig?.isVisible\" [class.read-only]=\"uiKitService?.isLoader\">\n      <app-more-option #moreOption [currentWorkflow]=\"currentWorkflow?.code\" [isEditMode]=\"mode === 'EDIT'\"\n        [isRCSelected]=\"\n          isRCSelected ||\n          (currentWorkflow?.code === 'GRC' &&\n            grcObject?.listObject.RC.selectedData?.length > 0)\n        \" [openedFrom]=\"openedFrom\" (selectedOption)=\"addMoreInfo($event)\" [isProgramSelected]=\"selectedProgram\"\n        [allowedFeature]=\"feature\" [orgDetailsData]=\"orgDetails\" [isAttributesAvailable]=\"\n          currentWorkflow?.code === 'GRC' &&\n          grcObject?.selectedAttributes?.attributes?.length > 0\n        \">\n      </app-more-option>\n    </div>\n    <div class=\"workflow-engine-form\" [class.disabled]=\"confirmationAlertConfig?.isVisible\" [class.no-shadow]=\"\n        currentWorkflow?.code == 'AMR' ||\n        currentWorkflow?.code == 'CMR' ||\n        currentWorkflow?.code == 'AAA' ||\n        uiKitService.isSmileyOn ||\n        policy?.showCreateDocuments\n      \">\n      <div class=\"container\" (scroll)=\"scrollForm()\">\n        <ng-container *ngIf=\"\n            !['VIEW_AUDIT_EXECUTION_SUMMARY', 'EXECUTE_AUDIT_PLAN'].includes(\n              openedFrom\n            )\n          \">\n          <div *ngIf=\"!(uiKitService.isSmileyOn || policy?.showCreateDocuments)\" class=\"form-group-row\" #dropdownRow\n            [class.disabled]=\"\n              (mode === 'EDIT' ||\n                !isWorkflowSelectorEnabled ||\n                disableWorkflowChange ||\n                selectedProgram) &&\n              currentWorkflow?.code !== 'ACTW'\n            \">\n            <div class=\"left\" [class.checked]=\"currentWorkflow\">\n              <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n              </svg>\n            </div>\n            <div class=\"right\">\n              <div class=\"vx-form-group\" #dropdown>\n                <label *ngIf=\"currentWorkflow?.code !== 'ACTW'\" class=\"vx-control-panel\">Select a Workflow<span\n                    class=\"required\">*</span></label>\n                <label *ngIf=\"currentWorkflow?.code === 'ACTW'\" class=\"vx-control-panel\">Assign a Case to Workflow<span\n                    class=\"required\">*</span></label>\n                <div class=\"select\" *ngIf=\"!currentWorkflow && currentWorkflow?.code !== 'ACTW'\"\n                  (click)=\"editWorkflow()\">\n                  <input type=\"text\" placeholder=\"Select a Workflow\" readonly />\n                </div>\n                <div class=\"selected first-field\" *ngIf=\"currentWorkflow\">\n                  <!-- {{currentWorkflow | json}} -->\n                  <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-mr-2\">\n                    <span class=\"chipName vx-fs-11 vx-label-txt no-width\" [appTooltip]=\"currentWorkflow?.workflowName\"\n                      placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\" [innerHTML]=\"\n                        workflowType === 'ACTW'\n                          ? '<strong>Case Reported By: </strong>' +\n                            (reportBy | userPipe : userList)?.member_name\n                          : currentWorkflow?.workflowName\n                      \">\n                    </span>\n                  </div>\n                  <!-- <div class=\"chip-container\">\n                                    <span class=\"chip\" [class.disabled]=\"false\">{{currentWorkflow?.workflowName}}</span>\n                                </div> -->\n                  <button class=\"edit\" type=\"button\" (click)=\"editWorkflow()\" *ngIf=\"\n                      !workflowList &&\n                      openedFrom != 'ASSESSMENT' &&\n                      currentWorkflow?.code !== 'ACTW'\n                    \">\n                    <i class=\"icons\">&#xe9ba;</i> Edit\n                  </button>\n                </div>\n                <div *ngIf=\"\n                    currentWorkflow?.code === 'CAPR' &&\n                    currentBusinessCycle &&\n                    !programSimplifyFlag\n                  \"\n                  class=\"program-business-cycle vx-fs-11 vx-txt-white vx-d-flex vx-align-center vx-pt-2 vx-pb-1 vx-pl-2 vx-pr-1\">\n                  <i class=\"icons vx-fs-12 vx-mr-1\">&#xe963;</i> This program is\n                  being set-up for the business cycle:\n                  <span class=\"vx-fw-600 vx-ml-1\">{{\n                    currentBusinessCycle\n                    }}</span>\n                </div>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n        <!-- <app-create-documents></app-create-documents> -->\n        <!-- <app-bulk-view></app-bulk-view> -->\n        <!-- <app-bulk-responsibility-view></app-bulk-responsibility-view> -->\n        <app-workflow-compliance (disconnectRefresh)=\"isHostRefreshActive = $event\" [orgDetails]=\"orgDetails\"\n          [isEntrust]=\"entrustButtonName.toLowerCase() == 'entrust'\" [responsibilityId]=\"id\" [mode]=\"mode\"\n          [frameworkDetails]=\"frameworkDetails\" [assessmentDetails]=\"assessmentDetails\"\n          (closeWorkflow)=\"closeWorkflowEngine($event)\" *ngSwitchCase=\"'CAR'\" #responsibility\n          (pickerChanged)=\"decideViewMoreOption($event)\" (populateOption)=\"populateMoreOption($event)\"\n          (hideElementsFromMoreOptions)=\"hideElementsFromMoreOptions($event)\" [selectedRC]=\"selectedRC\"\n          [closeOnEsc]=\"closeOnEsc\" (assigneeTypeChange)=\"assigneeTypeChange($event)\"\n          (onReviewerTypeChange)=\"onReviewerChange($event)\" [feature]=\"feature\" [openedFrom]=\"openedFrom\"\n          (rcSelected)=\"onRcSelected($event)\" (resetForm)=\"onResetForm()\"\n          (onRemovingCheckpoint)=\"onRemovingCheckpoint($event, false, true)\"\n          (isAssessmentDisabled)=\"isAssessmentDisabled($event)\" (checkpointCountUpdated)=\"checkpointCount = $event\"\n          [selectedProgram]=\"selectedProgram\" [responsibilityDetails]=\"workflowDetails\"\n          [customFields]=\"customFields\"></app-workflow-compliance>\n        <app-workflow-risk [secondaryOpenPortal]=\"secondaryOpenPortal\" [openedFrom]=\"openedFrom\"\n          (disconnectRefresh)=\"isHostRefreshActive = $event\" *ngSwitchCase=\"'AAR'\" #risk\n          (showConfirmationAlert)=\"showConfirmationPopup($event)\"\n          (hideElementsFromMoreOptions)=\"hideElementsFromMoreOptions($event)\"\n          (closeWorkflow)=\"closeWorkflowEngine($event)\" (pickerChanged)=\"decideViewMoreOption($event)\"\n          (populateOption)=\"populateMoreOption($event)\" (refreshForm)=\"onResetForm()\"\n          (rcSelected)=\"onRcSelected($event)\" [mode]=\"mode\" [riskId]=\"id\" [feature]=\"feature\"></app-workflow-risk>\n        <app-workflow-policy (disconnectRefresh)=\"isHostRefreshActive = $event\" *ngSwitchCase=\"'CAP'\" #policy\n          (showConfirmationAlert)=\"showConfirmationPopup($event)\" (shiftToEditMode)=\"shiftToEditMode()\"\n          [feature]=\"feature\" [policyId]=\"id\" [mode]=\"mode\" [templateId]=\"templateId\"\n          [convertFileData]=\"convertFileData\" [selectedCategory]=\"selectedCategory\"\n          [isSendForAttestation]=\"isSendForAttestation\" (populateOption)=\"populateMoreOption($event)\"\n          (pickerChanged)=\"decideViewMoreOption($event)\"></app-workflow-policy>\n        <app-workflow-survey-form *ngSwitchCase=\"'CAS'\" #surveyForm></app-workflow-survey-form>\n        <app-add-multiple-risk (disconnectRefresh)=\"isHostRefreshActive = $event\" *ngSwitchCase=\"'AMR'\" #multipleRisk\n          (pickerChanged)=\"decideViewMoreOption($event)\" (closeWorkflow)=\"closeWorkflowEngine($event)\"\n          [feature]=\"feature\"></app-add-multiple-risk>\n        <!-- <app-add-multiple-responsibility  (disconnectRefresh)=\"isHostRefreshActive = $event\"    (closeWorkflow)=\"closeWorkflowEngine($event)\" *ngSwitchCase=\"'CMR'\" #multipleResponsibility>\n                </app-add-multiple-responsibility> -->\n\n        <lib-add-multiple-responsibility-container [orgDetails]=\"orgDetails\"\n          (disconnectRefresh)=\"isHostRefreshActive = $event\" (closeWorkflow)=\"closeWorkflowEngine($event)\"\n          *ngSwitchCase=\"'CMR'\" [feature]=\"feature\" #multipleResponsibility></lib-add-multiple-responsibility-container>\n        <!-- New Log an Issue -->\n        <app-log-an-issue [issueDetails]=\"issueData\" *ngSwitchCase=\"'LAI'\" [reponsibilityData]=\"reponsibilityData\"\n          [assessmentQuestion]=\"assessmentQuestion\" [openedFrom]=\"openedFrom\" [source]=\"source\" [issueId]=\"id\"\n          #logAnIssue (disconnectRefresh)=\"isHostRefreshActive = $event\" (closeWorkflow)=\"closeWorkflowEngine($event)\"\n          (pickerChanged)=\"decideViewMoreOption($event)\" (populateOption)=\"populateMoreOption($event)\" [(mode)]=\"mode\">\n        </app-log-an-issue>\n        <!-- Old Log an issue -->\n        <!-- <app-log-an-issue *ngSwitchCase=\"'LAI'\" [responsibilitiesData]=\"reponsibiltyData\" [openedFrom]=\"openedFrom\"\n                #logAnIssue (closeWorkflow)=\"closeWorkflowEngine($event)\"\n                (pickerChanged)=\"decideViewMoreOption($event)\" (populateOption)=\"populateMoreOption($event)\">\n            </app-log-an-issue> -->\n\n        <app-workflow-assessment [assessmentId]=\"id\" (pickerChanged)=\"decideViewMoreOption($event)\"\n          [openedFrom]=\"openedFrom\" (disconnectRefresh)=\"isHostRefreshActive = $event\" *ngSwitchCase=\"'AAA'\"\n          (showConfirmationAlert)=\"showConfirmationPopup($event)\" (closeWorkflow)=\"closeWorkflowEngine($event)\"\n          (pickerChanged)=\"decideViewMoreOption($event)\" (populateOption)=\"populateMoreOption($event)\"\n          (refreshForm)=\"onResetForm()\" [mode]=\"mode\" #assessment></app-workflow-assessment>\n        <app-import-an-assessment (pickerChanged)=\"decideViewMoreOption($event)\"\n          (disconnectRefresh)=\"isHostRefreshActive = $event\" *ngSwitchCase=\"'IAA'\"\n          (showConfirmationAlert)=\"showConfirmationPopup($event)\" (closeWorkflow)=\"closeWorkflowEngine($event)\"\n          (pickerChanged)=\"decideViewMoreOption($event)\" (populateOption)=\"populateMoreOption($event)\"\n          (refreshForm)=\"onResetForm()\" #importAssessment></app-import-an-assessment>\n        <!-- <app-workflow-program #program *ngSwitchCase=\"'CAPR'\" (pickerChanged)=\"decideViewMoreOption($event)\" (disconnectRefresh)=\"isHostRefreshActive = $event\"></app-workflow-program> -->\n        <app-workflow-program #program *ngSwitchCase=\"'CAPR'\" [orgDetails]=\"orgDetails\" [allowedFeature]=\"feature\"\n          (disableElementsFromMoreOptions)=\"disableMoreOptions('CAPR', $event)\" [programType]=\"programType\"\n          (pickerChanged)=\"decideViewMoreOption($event)\" (disconnectRefresh)=\"isHostRefreshActive = $event\"\n          (showConfirmationAlert)=\"showConfirmationPopup($event)\" (closeWorkflow)=\"closeWorkflowEngine($event)\"\n          (pickerChanged)=\"decideViewMoreOption($event)\" (populateOption)=\"populateMoreOption($event)\"\n          (refreshForm)=\"onResetForm()\" [mode]=\"mode\" [programId]=\"id\" [programDetails]=\"workflowDetails\"\n          (onRemovingRole)=\"onRemovingRole($event)\" [canFrameworkChange]=\"canFrameworkChange\"\n          [addToProgramDetails]=\"addToProgramDetails\"></app-workflow-program>\n\n        <!-- GRC Object -->\n        <lib-grc-object-container #grcObject *ngSwitchCase=\"'GRC'\" [grcType]=\"grcType\" [MODE]=\"mode\" [ID]=\"id\"\n          (pickerChanged)=\"decideViewMoreOption($event)\" (populateOption)=\"populateMoreOption($event)\"\n          (closeWorkflow)=\"closeWorkflowEngine($event)\" (resetForm)=\"onResetGRCForm()\"\n          (disconnectRefresh)=\"isHostRefreshActive = $event\"\n          (hideElementsFromMoreOptions)=\"hideElementsFromMoreOptions($event)\"></lib-grc-object-container>\n\n        <!-- Report a Case -->\n        <app-workflow-case *ngSwitchCase=\"'RAC'\" #reportCase [openedFrom]=\"openedFrom\" [source]=\"source\" [caseId]=\"id\"\n          [mode]=\"mode\" [responsibilityData]=\"reponsibilityData\" [assessmentQuestion]=\"assessmentQuestion\"\n          [caseTypePermission]=\"caseTypePermission\" [workflowType]=\"'RAC'\"\n          (disconnectRefresh)=\"isHostRefreshActive = $event\" (populateOption)=\"populateMoreOption($event)\"\n          (closeWorkflow)=\"closeWorkflowEngine($event)\"\n          (pickerChanged)=\"decideViewMoreOption($event)\"></app-workflow-case>\n        <!-- Assign case to workflow -->\n        <app-workflow-case *ngSwitchCase=\"'ACTW'\" #reportCase [openedFrom]=\"openedFrom\" [source]=\"source\" [caseId]=\"id\"\n          [mode]=\"mode\" [workflowType]=\"'ACTW'\" [responsibilityData]=\"reponsibilityData\"\n          [assessmentQuestion]=\"assessmentQuestion\" [caseTypePermission]=\"caseTypePermission\"\n          (disconnectRefresh)=\"isHostRefreshActive = $event\" (populateOption)=\"populateMoreOption($event)\"\n          (caseReportedBy)=\"caseReportedBy($event)\" (userListEmitter)=\"userListEmitter($event)\"\n          (closeWorkflow)=\"closeWorkflowEngine($event)\"\n          (pickerChanged)=\"decideViewMoreOption($event)\"></app-workflow-case>\n      </div>\n      <div *ngIf=\"['RAC', 'ACTW'].includes(currentWorkflow?.code)\" class=\"vx-d-flex\">\n        <button class=\"cancel\" [class.disabled]=\"!isWorkflowSelectorEnabled\" (click)=\"closeWorkflowEngine()\">\n          CANCEL\n        </button>\n        <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled\" (click)=\"submit()\">\n          {{\n          mode === \"EDIT\" && currentWorkflow?.code === \"RAC\"\n          ? \"Update\"\n          : \"Report\"\n          }}\n        </button>\n      </div>\n      <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled\" *ngSwitchCase=\"'AAR'\" (click)=\"submit()\">\n        {{\n        mode === \"EDIT\" && openedFrom !== \"MOVE_TO_REGISTER\"\n        ? \"Update\"\n        : \"Add\"\n        }}\n      </button>\n      <button class=\"submit\" [class.disabled]=\"\n          !isWorkflowSelectorEnabled ||\n          !riskBulkUpload?.category?.selectedCategory\n        \" (click)=\"bulkUploadBrowse('AMR')\" *ngSwitchCase=\"'AMR'\">\n        Browse\n      </button>\n      <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled\" (click)=\"bulkUploadBrowse('CMR')\"\n        *ngSwitchCase=\"'CMR'\">\n        Browse\n      </button>\n\n      <!-- This has ternary operation to handle the both scenarios of how it works with compliance and program module, please don't change this. -->\n      <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled\" (click)=\"submit()\" *ngSwitchCase=\"'CAR'\">\n        {{\n        entrustButtonName !== \"\" && mode !== \"EDIT\"\n        ? entrustButtonName\n        : mode === \"EDIT\" && !workflowDetails?.duplicate\n        ? \"UPDATE\"\n        : \"Entrust\"\n        }}\n      </button>\n      <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled\" (click)=\"submit()\" *ngSwitchCase=\"'CAP'\">\n        {{\n        mode == \"EDIT\"\n        ? isSendForAttestation\n        ? \"Send for attestation\"\n        : \"Update\"\n        : \"Continue to draft\"\n        }}\n      </button>\n      <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled\" *ngSwitchCase=\"'CAS'\">\n        Continue to draft\n      </button>\n      <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled\" *ngSwitchCase=\"'LAI'\" (click)=\"submit()\">\n        {{ mode === \"EDIT\" ? \"Update\" : \"Add\" }}\n      </button>\n      <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled\" *ngSwitchCase=\"'AAA'\" (click)=\"submit()\">\n        {{ mode === \"EDIT\" ? \"Update\" : \"Continue to draft\" }}\n      </button>\n      <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled\" (click)=\"bulkUploadBrowse('IAA')\"\n        *ngSwitchCase=\"'IAA'\">\n        Browse\n      </button>\n      <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled || !program?.valid\" (click)=\"submit('CAPR')\"\n        *ngSwitchCase=\"'CAPR'\">\n        {{ mode === \"EDIT\" ? \"Update\" : \"Save\" }}\n      </button>\n      <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled || !program?.valid\" (click)=\"submit('CAPR')\"\n        *ngSwitchCase=\"'CAPR'\">\n        {{ mode === \"EDIT\" ? \"Update\" : \"Save\" }}\n      </button>\n      <button class=\"submit\" (click)=\"submit()\" *ngSwitchCase=\"'GRC'\">\n        {{ mode === \"EDIT\" ? \"Update\" : \"Save\" }}\n      </button>\n      <div class=\"dropdown\" *ngIf=\"workflowList\" (click)=\"closeWorkflowList()\" [style.top.px]=\"dropdownTop\"\n        [style.left.px]=\"dropdownLeft\" [style.width.px]=\"dropdownWidth\">\n        <ul class=\"dropdown-list\">\n          <li *ngFor=\"let workflow of workflowTypeList\" (click)=\"changeWorkflow($event, workflow)\">\n            <app-cs-radio *ngIf=\"workflow?.code !== 'ACTW'\" [value]=\"workflow?.code\"\n              [checked]=\"currentWorkflow?.code === workflow?.code\">\n              {{ workflow?.workflowName }}</app-cs-radio>\n          </li>\n        </ul>\n      </div>\n      <div class=\"dropdown-overlay\" *ngIf=\"workflowList\" (click)=\"closeWorkflowList()\"></div>\n    </div>\n    <app-confirmation-alert id=\"confirmation-dialogue\" (action)=\"confirmWorkflowChange($event)\"\n      *ngIf=\"confirmationAlertConfig?.isVisible\" [message]=\"confirmationAlertConfig?.message\"\n      [config]=\"confirmationAlertConfig\"></app-confirmation-alert>\n  </div>\n</div>", styles: ["@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/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.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/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";.dropdown-overlay{position:fixed;inset:0;z-index:2}.workflow-engine{background:#161b2fcc;position:fixed;inset:0;z-index:9}.workflow-engine button.close{position:absolute;background:transparent;cursor:pointer;border:none;font-size:16px;color:#000;top:8px;right:7px;z-index:12;display:flex;align-items:center;justify-content:center;border-radius:2px;padding:8px}.workflow-engine button.close.bulk-opened,.workflow-engine button.close.smiley-opened{z-index:10}.workflow-engine button.close:hover{background:#f1f1f1}.workflow-engine button.close.disabled{pointer-events:none;opacity:.3;filter:grayscale(1)}.workflow-engine-container{position:fixed;top:0;right:0;bottom:0;background:#fff;display:flex;z-index:10;border-top:3px solid #1E5DD3}.workflow-engine-container:before{content:\"\";height:30px;position:absolute;top:0;right:0;width:499px;z-index:11;background:linear-gradient(to bottom,#fff,#ffffffbf 66%,#ffffff6b 81%,#fff0);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#ffffff\",endColorstr=\"#00ffffff\",GradientType=0)}@media screen and (max-width: 1280px){.workflow-engine-container.with-frequency:before{display:none}.workflow-engine-container.with-frequency button.close{display:none}.workflow-engine-container.with-frequency .workflow-engine-form{right:-470px}.workflow-engine-container.with-frequency .workflow-engine-form .container ::ng-deep app-workflow-compliance .workflw-compliance{filter:grayscale(1)!important;pointer-events:none!important}.workflow-engine-container.with-frequency .workflow-engine-form .container ::ng-deep app-workflow-risk .workflw-risk{filter:grayscale(1)!important;pointer-events:none!important}.workflow-engine-container.with-frequency .workflow-engine-form .container ::ng-deep app-workflow-policy .workflow-policy{filter:grayscale(1)!important;pointer-events:none!important}.workflow-engine-container.with-frequency .workflow-engine-form button.submit{filter:grayscale(1)!important;pointer-events:none!important}}.workflow-engine-container.with-preview-assessment:before{display:none}.workflow-engine-container.with-preview-assessment button.close{display:none}.workflow-engine-container.with-preview-assessment .workflow-engine-form{right:-470px}.workflow-engine-container.with-preview-assessment .workflow-engine-form .container ::ng-deep app-workflow-compliance .workflw-compliance{filter:grayscale(1)!important;pointer-events:none!important}.workflow-engine-container.with-preview-assessment .workflow-engine-form button.submit{filter:grayscale(1)!important;pointer-events:none!important}.workflow-engine-more{width:318px;padding:36px 22px 36px 40px;height:100vh;overflow:auto;margin-left:-18px;scrollbar-width:none}@media screen and (max-height: 900px){.workflow-engine-more{padding:20px 22px 36px 40px}}.workflow-engine-more::-webkit-scrollbar-track{background-color:#f1f1f1;position:absolute}.workflow-engine-more::-webkit-scrollbar{width:1px;height:1px;background-color:transparent;position:absolute}.workflow-engine-more::-webkit-scrollbar-thumb{border-radius:1px;background-color:#dbdbdb;position:absolute}.workflow-engine-more.disabled{filter:grayscale(1);pointer-events:none}.workflow-engine-more.read-only{pointer-events:none}.workflow-engine-form{width:500px;position:relative}.workflow-engine-form .container{height:calc(100vh - 53px);padding:35px 24px 8px 62px;overflow:hidden;overflow-y:auto;margin-left:-22px;scrollbar-width:thin}.workflow-engine-form .container.disabled{pointer-events:none}.workflow-engine-form:before{content:\"\";top:0;bottom:-50px;left:0;width:1px;background:#f1f1f1;position:absolute;z-index:-1}.workflow-engine-form button.submit{position:sticky;height:50px;display:flex;align-items:center;justify-content:center;font-size:13px;line-height:48px;letter-spacing:1.3px;color:#fff;background:#1e5dd3;cursor:pointer;border:1px solid #1e5dd3;outline:none;border-radius:0;text-transform:uppercase;font-weight:600;width:100%;bottom:0;padding:0}.workflow-engine-form button.submit:disabled{background:#f1f1f1;border-color:#f1f1f1;pointer-events:none;cursor:not-allowed;color:#747576}.workflow-engine-form button.submit.disabled{pointer-events:none;opacity:.3;filter:grayscale(1)}.workflow-engine-form button.cancel{position:sticky;height:50px;display:flex;align-items:center;justify-content:center;font-size:13px;line-height:48px;letter-spacing:1.3px;color:#1e5dd3;background:#fff;outline:none;border-radius:0;text-transform:uppercase;font-weight:600;width:100%;bottom:0;padding:0;border:none;border-top:1px solid #F1F1F1;border-left:1px solid #F1F1F1;cursor:pointer}.workflow-engine-form button.cancel:disabled{background:#f1f1f1;border-color:#f1f1f1;pointer-events:none;cursor:not-allowed;color:#747576}.workflow-engine-form button.cancel.disabled{pointer-events:none;opacity:.3;filter:grayscale(1)}.workflow-engine-form.disabled{filter:grayscale(1);pointer-events:none}.workflow-engine-form label.browse{padding:0;margin:0;display:block;position:sticky;bottom:0}.workflow-engine-form label.browse span{height:50px;display:flex;align-items:center;justify-content:center;font-size:13px;line-height:19px;letter-spacing:3.08px;color:#fff;background:#1e5dd3;cursor:pointer;border:1px solid #1e5dd3;outline:none;border-radius:0;text-transform:uppercase;font-weight:600;width:100%}.workflow-engine-form label.browse input{position:absolute;width:100%;height:100%;z-index:1;inset:0;opacity:0;cursor:pointer}.workflow-engine-form .file-browsed{display:flex;align-items:center;background:#fff;border-top:1px solid #F1F1F1;border-bottom:1px solid #F1F1F1}.workflow-engine-form .file-browsed span{display:block;width:calc(100% - 164px);color:#161b2f;font-size:13px;font-weight:400;line-height:20px;padding:0 16px}.workflow-engine-form .file-browsed button{height:50px;display:flex;align-items:center;justify-content:center;font-size:13px;line-height:19px;letter-spacing:3.08px;color:#fff;background:#1e5dd3;cursor:pointer;border:1px solid #1e5dd3;outline:none;border-radius:0;text-transform:uppercase;font-weight:600;width:164px;bottom:0}.workflow-engine-form:after{content:\"\";height:30px;position:absolute;right:0;bottom:50px;z-index:10;background:linear-gradient(to bottom,#fff0,#ffffffbf 22%,#fff);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#00ffffff\",endColorstr=\"#ffffff\",GradientType=0)}.workflow-engine-form.no-shadow:after{display:none}.workflow-engine.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}.workflow-engine.bg{background:#fff}.program-business-cycle{background:#f2bf19;border-radius:0 0 .25rem .25rem;position:relative;top:-.25rem;z-index:1}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n", "@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::-webkit-scrollbar-track{background-color:#f1f1f1;position:absolute}::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}button{font-family:Poppins,sans-serif}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;font-size:13px;color:#747576;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField::placeholder{font-size:13px;color:#747576}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxEnable.withBtn:after{display:none}::ng-deep .selectBoxEnable.withBtn button.setBtn{background:transparent;border-radius:0;border:none;min-width:98px}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer .chipName.no-width{max-width:unset}::ng-deep .chipContainer .chipName.full-width{max-width:25rem}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}::ng-deep .chipContainer button.countBtn.blueBg{background:#1e5dd3}::ng-deep .workflowLavel{background:#f1f1f1;border-radius:.125rem;color:#042e7d;min-width:1rem;height:1rem}::ng-deep .reviewSelection{border-radius:.25rem;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep .reviewSelection:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectButton{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectButton:hover,::ng-deep .selectButton:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep button.createNewBtn{background:transparent;border-radius:0;border:none}::ng-deep .vx-form-group{display:block;position:relative;margin-bottom:20px}::ng-deep .vx-form-group:after{content:\"\";display:block;clear:both}::ng-deep .vx-form-group .select{position:relative}::ng-deep .vx-form-group .select:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#707070;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .vx-form-group .select input{cursor:pointer;padding-right:30px!important}::ng-deep .vx-form-group .select .custom-input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;outline:none;padding:3px 12px;line-height:16px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .vx-form-group .select .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:13px;width:94%;display:block;pointer-events:none;opacity:.8}::ng-deep .vx-form-group .select .custom-input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .vx-form-group .select .custom-input.frequency-custom-input{padding-right:108px;display:flex;align-items:center}::ng-deep .vx-form-group .select+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .select+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .select+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .select~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .select.button-sec:after{display:none}::ng-deep .vx-form-group .select.button-sec button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;position:absolute;top:12px;right:8px;padding:0;margin:0}::ng-deep .vx-form-group .select+.vx-control-panel{margin-top:8px}::ng-deep .vx-form-group .select+.selected{margin-top:8px}::ng-deep .vx-form-group .select.select{margin-top:8px}::ng-deep .vx-form-group .upload-format{border:1px solid #dbdbdb;border-radius:4px;padding:8px 12px;display:block}::ng-deep .vx-form-group .upload-format span.text{line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:block;margin-bottom:6px}::ng-deep .vx-form-group .upload-format .radio-group{display:flex}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio{display:inline-block}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;margin-left:8px}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio+app-cs-radio{margin-left:12px}::ng-deep .vx-form-group .upload-format~.upload-format{margin-top:4px}::ng-deep .vx-form-group .form-tab{display:flex;justify-content:flex-start}::ng-deep .vx-form-group .form-tab button{background:transparent;color:#161b2f;font-size:11px;line-height:16px;text-transform:uppercase;cursor:pointer;padding:8px 8px 8px 0;border:none;outline:none;font-weight:500}::ng-deep .vx-form-group .form-tab button:disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .form-tab button+button{padding:8px}::ng-deep .vx-form-group .form-tab button.active{color:#1e5dd3}::ng-deep .vx-form-group .tab-group{border:1px solid #dbdbdb;border-radius:4px;padding:0;display:block;position:relative;transition:all .2s ease-in-out}::ng-deep .vx-form-group .tab-group:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group .tab-group .upload-file{padding:16px 62px 16px 24px;display:flex;align-items:center;justify-content:space-between}::ng-deep .vx-form-group .tab-group .upload-file .image{width:80px}::ng-deep .vx-form-group .tab-group .upload-file .browse span{display:inline-block;font-size:12px;color:#747576;line-height:16px;padding:0 4px}::ng-deep .vx-form-group .tab-group .upload-file .browse .label{font-size:11px;color:#1e5dd3;line-height:16px;font-weight:600;text-transform:uppercase;margin:0;padding:0}::ng-deep .vx-form-group .tab-group .upload-file .browse .label input{opacity:0;position:absolute;margin:0;padding:0;inset:0;cursor:pointer;width:100%}::ng-deep .vx-form-group .tab-group.active{border-color:#1e5dd3}::ng-deep .vx-form-group .tab-group.uploaded{margin-top:4px}::ng-deep .vx-form-group .tab-group.uploaded .upload-file{padding:8px 0!important;text-align:center}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .image{display:none}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .browse{width:100%;text-align:center}::ng-deep .vx-form-group .tab-group+label.vx-form-group{margin-top:8px;margin-bottom:4px}::ng-deep .vx-form-group .file-list{background:#fbfbfb;border:1px solid #f1f1f1;border-radius:4px;padding:12px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;position:relative}::ng-deep .vx-form-group .file-list span.file-name{color:#747576;line-height:16px;font-size:11px;font-weight:400;cursor:pointer;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .vx-form-group .file-list .button-group{display:flex}::ng-deep .vx-form-group .file-list button{font-size:12px;color:#eb2424;cursor:pointer;display:flex;padding:0;border:none;outline:none;background:transparent}::ng-deep .vx-form-group .file-list button.edit{color:#1e5dd3}::ng-deep .vx-form-group .file-list button+button{margin-left:16px}::ng-deep .vx-form-group .file-list+.file-list{margin-top:4px}::ng-deep .vx-form-group .file-list .file-container{display:flex;justify-content:space-between;width:100%}::ng-deep .vx-form-group .file-list.policy{background:#fff}::ng-deep .vx-form-group .file-list cs-select{position:relative;margin-top:8px;width:100%}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group input.value{height:32px!important;font-size:13px!important}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group i{right:12px!important;top:12px!important}::ng-deep .vx-form-group .file-list app-line-loader{display:block;position:absolute;left:10px;right:10px;bottom:0}::ng-deep .vx-form-group label.vx-control-panel{color:#161b2f;font-size:11px;font-weight:500;line-height:16px;margin-bottom:8px;display:block;text-transform:uppercase;text-align:left}::ng-deep .vx-form-group label.vx-control-panel.custom-tag{font-size:10px}::ng-deep .vx-form-group label.vx-control-panel.vx-mt-8{margin-top:8px}::ng-deep .vx-form-group label.vx-control-panel span.required{color:#eb2424;font-size:14px;font-weight:500;position:relative;top:-2px}::ng-deep .vx-form-group label.vx-control-panel .button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;padding:0;margin:0}::ng-deep .vx-form-group label.vx-control-panel app-cs-switch{float:right;display:block}::ng-deep .vx-form-group label.vx-control-panel i{margin-left:8px;font-size:12px;color:#1e5dd3;cursor:pointer;position:relative;top:1px}::ng-deep .vx-form-group label.vx-control-panel i.depreciation-icon{color:#e4b700;font-size:16px;position:relative;top:3px}::ng-deep .vx-form-group label.vx-control-panel .checkpoint-version{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:10px;font-weight:600;line-height:14px;margin-left:4px;padding:0 2px}::ng-deep .vx-form-group input[type=text],::ng-deep .vx-form-group .input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;outline:none;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400}::ng-deep .vx-form-group input[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group input[type=text]:focus,::ng-deep .vx-form-group .input:focus,::ng-deep .vx-form-group input[type=text]:hover,::ng-deep .vx-form-group .input:hover{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group input[type=text].error,::ng-deep .vx-form-group .input.error{border-color:#eb2424;color:#eb2424;margin-bottom:4px}::ng-deep .vx-form-group input[type=text].error:focus,::ng-deep .vx-form-group .input.error:focus{box-shadow:0 0 5px #d31e1e45}::ng-deep .vx-form-group input[type=text]:disabled,::ng-deep .vx-form-group .input:disabled{background:#f1f1f1;cursor:not-allowed;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group input[type=text]:disabled:hover,::ng-deep .vx-form-group .input:disabled:hover{border-color:#dbdbdb;box-shadow:none}::ng-deep .vx-form-group input[type=text] span.text,::ng-deep .vx-form-group .input span.text{font-size:13px;color:#747576;font-weight:400;display:block;width:100%}::ng-deep .vx-form-group input[type=text] .input-group,::ng-deep .vx-form-group .input .input-group{display:flex;align-items:center}::ng-deep .vx-form-group input[type=text] .input-group.counter,::ng-deep .vx-form-group .input .input-group.counter{min-width:96px;width:96px}::ng-deep .vx-form-group input[type=text] .input-group.counter button,::ng-deep .vx-form-group .input .input-group.counter button{height:24px;width:24px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#747576;font-size:8px;cursor:pointer;outline:none}::ng-deep .vx-form-group input[type=text] .input-group.counter input,::ng-deep .vx-form-group .input .input-group.counter input{-webkit-appearance:textfield;-moz-appearance:textfield;height:24px;width:calc(100% - 48px);border:1px solid #f1f1f1;outline:none;padding:0 6px;text-align:center}::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-outer-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-outer-spin-button{appearance:none;margin:0}::ng-deep .vx-form-group input[type=text]+.file-list,::ng-deep .vx-form-group .input+.file-list{margin-top:8px}::ng-deep .vx-form-group input[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]:-ms-input-placeholder,::ng-deep .vx-form-group .input:-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]::-ms-input-placeholder,::ng-deep .vx-form-group .input::-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group .classification{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;padding:8px 12px;display:flex;justify-content:space-between}::ng-deep .vx-form-group .classification label{margin:0 4px 0 0;width:100%;position:relative;z-index:1}::ng-deep .vx-form-group .classification label span{display:block;width:100%;height:24px;border:1px solid #f1f1f1;border-radius:2px;line-height:24px;font-size:10px;text-align:center;color:#747576;font-weight:500;position:relative;text-transform:uppercase}::ng-deep .vx-form-group .classification label span:before{height:2px;content:\"\";top:0;right:0;left:0;border-radius:2px;position:absolute;transition:all .2s ease-in-out}::ng-deep .vx-form-group .classification label input{opacity:0;position:absolute;inset:0;margin:0;padding:0;width:100%;height:100%;cursor:pointer;z-index:1}::ng-deep .vx-form-group .classification label input:checked+span{color:#fff}::ng-deep .vx-form-group .classification label input:checked+span:before{bottom:0;height:100%;z-index:-1}::ng-deep .vx-form-group .classification label.low span:before{background:#34aa44}::ng-deep .vx-form-group .classification label.low-med span:before{background:#f2bf19}::ng-deep .vx-form-group .classification label.med-high span:before{background:#f29619}::ng-deep .vx-form-group .classification label.high span:before{background:#eb2424}::ng-deep .vx-form-group .classification label:last-of-type{margin-right:0}::ng-deep .vx-form-group .input{display:flex;align-items:center}::ng-deep .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;padding:8px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:flex;align-items:center;position:relative;justify-content:space-between}::ng-deep .vx-form-group .selected.first-field{z-index:2}::ng-deep .vx-form-group .selected .chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .vx-form-group .selected .chip-container.checkpoints{width:calc(100% - 120px)}::ng-deep .vx-form-group .selected .chip-container span.chip{background:#fff;border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;padding:0 8px;color:#1e5dd3;font-size:12px;display:block;width:auto;max-width:100%;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .vx-form-group .selected .chip-container span.chip.disabled{background:#f1f1f1;box-shadow:none;color:#747576;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .selected .chip-container span.chip i{font-weight:400;margin-right:8px;cursor:pointer;font-size:10px;position:relative;top:1px}::ng-deep .vx-form-group .selected .chip-container span.chip span.step{background:#1e5dd3;border-radius:2px;color:#fff;font-size:9px;line-height:14px;padding:0 4px;font-weight:400;text-align:center;min-width:auto;margin-right:4px}::ng-deep .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question{display:flex;align-items:center;justify-content:space-between;width:100%}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.value{color:#1e5dd3;font-size:12px;font-weight:400;line-height:24px;padding:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 80px)}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.label{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding-left:4px;padding-right:4px;line-height:12px;margin-left:8px}::ng-deep .vx-form-group .selected .chip-container span.value{color:#747576;font-size:13px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 52px);padding:0 4px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text{color:#747576;font-size:10px;font-weight:500;padding:0 8px;width:122px;line-height:14px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first{position:relative;min-width:162px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first:before{background:#f1f1f1;content:\"\";position:absolute;top:0;right:0;height:calc(100% + 12px);width:1px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text .no{color:#1e5dd3}::ng-deep .vx-form-group .selected .chip-container.plus span.chip{max-width:calc(50% - 35px)}::ng-deep .vx-form-group .selected .chip-container.more-one span.chip{max-width:50%}::ng-deep .vx-form-group .selected .chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .vx-form-group .selected .chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:100px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count{border-radius:20px;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .vx-form-group .selected .chip-container .chip-inner i.cross{cursor:pointer;position:relative;top:1px;font-size:8px}::ng-deep .vx-form-group .selected button.count{background:#1e5dd3;border-radius:2px;height:24px;padding:0 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none;color:#fff;font:13px;font-weight:500;line-height:20px;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit{border:none;border-radius:0;background:transparent;outline:none;cursor:pointer;display:block;font-size:11px;font-weight:600;color:#1e5dd3;text-transform:uppercase;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit i{font-weight:400;font-size:8px;margin-right:4px}::ng-deep .vx-form-group .selected button.close-btn{background:transparent;border:none;padding:0;margin-left:8px;font-size:10px;color:#c7381b;display:flex;align-items:center}::ng-deep .vx-form-group .selected .workflow-label{min-width:92px;padding:4px;text-align:center;margin-left:-8px;margin-right:8px;border-right:1px solid #f1f1f1}::ng-deep .vx-form-group .selected .workflow-label p{margin:0;display:block;text-transform:uppercase}::ng-deep .vx-form-group .selected .workflow-label p.title{font-size:9px;line-height:12px;color:#161b2f;font-weight:500}::ng-deep .vx-form-group .selected .workflow-label p.description{font-size:11px;line-height:16px;color:#161b2f;font-weight:600}::ng-deep .vx-form-group .selected .workflow-label+.chip-container{width:calc(100% - 148px)}::ng-deep .vx-form-group .selected+.selected{margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .selected+app-cs-switch.who-toggle label.cs-switch span.value{color:#747576}::ng-deep .vx-form-group .selected+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .selected~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .selected.readOnly{pointer-events:none}::ng-deep .vx-form-group .selected span.chip{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .vx-form-group .select-list{position:absolute;background:#fff;box-shadow:0 0 5px #1e5dd345;top:100%;right:0;left:0;z-index:2}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item{width:100%;padding:12px 16px}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item:hover{background:#f8f8f8}::ng-deep .vx-form-group ::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;line-height:38px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400;border:none;padding:0 12px 0 34px;outline:none}::ng-deep .vx-form-group .date-time-picker .picker-group input:focus,::ng-deep .vx-form-group .date-time-picker .picker-group input:hover{box-shadow:none;border:none}::ng-deep .vx-form-group .date-time-picker .picker-group input::placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input:-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input::-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group i{display:flex;justify-content:center;align-items:center;height:16px;width:12px;position:absolute;left:12px;top:0;color:#747576;font-size:12px;pointer-events:none}::ng-deep .vx-form-group app-cs-radio.main-filed{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;color:#707070}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group app-cs-radio.disabled{pointer-events:none;opacity:.5;filter:grayscale(1);background:#f1f1f1}::ng-deep .vx-form-group .switch-row{display:flex}::ng-deep .vx-form-group .switch-row app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:0;text-transform:uppercase;color:#747576!important}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value i{display:inline-flex;font-size:11px;cursor:pointer;color:#1e5dd3;align-items:center;line-height:16px;margin:0 4px}::ng-deep .vx-form-group .switch-row app-cs-switch+app-cs-switch{margin-left:8px}::ng-deep .vx-form-group .switch-row.align-right{justify-content:flex-end}::ng-deep .vx-form-group .switch-row.align-right label.cs-switch span.value{margin-right:8px}::ng-deep .vx-form-group .risk-type-field{background:#f8f8f8;border:1px solid #dbdbdb;border-radius:4px;height:40px;display:flex;align-items:center;padding:4px;position:relative;z-index:1}::ng-deep .vx-form-group .risk-type-field .type-item{width:50%;position:relative}::ng-deep .vx-form-group .risk-type-field .type-item button{background:transparent;border:none;border-radius:0;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase;width:100%;height:32px;padding:0 12px;text-align:left}::ng-deep .vx-form-group .risk-type-field .type-item button.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item .info{color:#1e5dd3;font-size:12px;position:absolute;top:10px;right:12px;cursor:pointer}::ng-deep .vx-form-group .risk-type-field .type-item .info.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item.active button{color:#1e5dd3!important}::ng-deep .vx-form-group .risk-type-field .type-item:nth-child(2).active~.background-glider{transform:translate(100%)}::ng-deep .vx-form-group .risk-type-field .background-glider{background:#fff;border-radius:4px;box-shadow:0 1px 3px #161b2f26;position:absolute;display:flex;width:212px;height:32px;z-index:-1;transition:.25s ease-out}.left{width:36px;height:36px;margin-top:26px;margin-left:-58px;margin-right:20px;display:flex;justify-content:center;align-items:center;position:relative;z-index:10;border-radius:50%}.left.deadline-completed{margin-top:18px}.left.checked{background:transparent}.left img{width:36px}.left .checkIcon{width:32px;height:32px;background:#fff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}.left .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}.left .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}.right{width:100%}.right span.indicator{position:absolute;top:36px;left:-16px;font-size:12px;color:#f0b819;cursor:pointer}.form-group-row{display:flex;position:relative;transition:all .2s ease-in-out}.form-group-row.disabled{-webkit-user-select:none;user-select:none;pointer-events:none;filter:grayscale(1);z-index:2}.form-group-row.disabled .left{position:relative}.form-group-row.disabled .left:before{content:\"\";position:absolute;inset:2px 0 0 2px;background:#fff;opacity:.7;border-radius:50%;width:32px;height:32px}.form-group-row.disabled .right{opacity:.3}.form-group-row.active{pointer-events:none;filter:grayscale(0);z-index:2;opacity:1}.form-group-row.active .right .vx-form-group input,.form-group-row.active .right .vx-form-group .custom-input,.form-group-row.active .right .vx-form-group .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}.form-group-row.active .right .vx-form-group .selectBoxEnable.disabled{border-color:#dbdbdb;box-shadow:none}::ng-deep .radio-group-selector app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .radio-group-selector app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .radio-group-selector app-cs-radio label.radio-item .radio,::ng-deep .radio-group-selector app-cs-radio label.radio-item .radiomark{position:absolute!important;top:9px;left:12px}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value{font-size:11px!important;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0!important;max-width:100%!important;font-weight:500!important;color:#707070!important}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value i{font-size:12px;color:#1e5dd3}::ng-deep .radio-group-selector app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}::ng-deep .wf-action-list{width:220px}::ng-deep .wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}::ng-deep .wf-action-list ul.action-item{display:block}::ng-deep .wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}::ng-deep .wf-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}::ng-deep .wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .wf-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .wf-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .wf-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .wf-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .wf-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}::ng-deep .wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}p.error-message{font-size:11px;font-weight:400;color:#eb2424;line-height:16px;margin-top:8px;margin-bottom:0}.edit-loader{position:absolute;top:-3px;left:-3px;width:46px;height:46px;transform:rotate(180deg)}.circular-loader{animation:rotate 2s linear infinite;height:100%;transform-origin:center center;width:100%;position:absolute;top:0;left:0;margin:auto}.loader-path{stroke-dasharray:150,200;stroke-dashoffset:-10;animation:dash 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35}to{stroke-dasharray:89,200;stroke-dashoffset:-124}}::ng-deep .dropdown{position:fixed;background:#fff;box-shadow:0 3px 6px #00000029;padding:24px 0;z-index:9;max-height:calc(100vh - 200px);overflow:auto}::ng-deep .dropdown ul.dropdown-list{padding:0 20px;margin:0;display:block}::ng-deep .dropdown ul.dropdown-list li{list-style:none}::ng-deep .dropdown ul.dropdown-list li app-cs-radio{display:flex}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.radio{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.value{padding:11px 12px 11px 32px;width:100%;border:1px solid #bcbcbc;border-radius:4px;margin-left:0;max-width:100%}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item svg{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item input[type=radio]:checked~span.value{background:#e8feeb;border-color:#34aa44}::ng-deep .dropdown ul.dropdown-list li+li{margin-top:8px}app-smiley-dialog{position:relative;z-index:10}app-smiley-dialog-inline{position:absolute;top:-3px;right:0;bottom:0;z-index:999;width:520px;height:calc(100vh + 3px)}::ng-deep .vx-overlay{position:fixed;z-index:3;inset:0}::ng-deep dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}::ng-deep dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}::ng-deep dp-date-picker input:focus{outline:none}::ng-deep dp-date-picker .dp-popup{width:412px;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep dp-date-picker .dp-popup dp-day-calendar,::ng-deep dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep dp-date-picker .dp-popup dp-day-calendar button,::ng-deep dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}::ng-deep dp-date-picker .dp-open+div{position:fixed!important;inset:0!important;display:flex;justify-content:center;align-items:center;z-index:99;pointer-events:none;background:#0000004d}::ng-deep .cdk-overlay-container{z-index:2147483002!important}::ng-deep .dp-popup{z-index:999;display:flex!important;align-items:center;justify-content:center;width:100vw;height:100vh;background:#0000004d!important;box-shadow:unset!important}::ng-deep .dp-popup dp-day-calendar{width:412px!important;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep .dp-popup dp-day-calendar,::ng-deep .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep .dp-popup dp-day-calendar button,::ng-deep .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep .dp-popup dp-day-calendar .dp-weekdays,::ng-deep .dp-popup dp-month-calendar .dp-weekdays,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}@keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}::ng-deep span.file{display:block;width:20px;min-width:20px;border-radius:0 0 2px 2px;border:1px solid transparent;border-color:#747576;position:relative;margin-right:5px;border-top:none;margin-top:5px;background:#fff}::ng-deep span.file.table{margin-right:8px;width:18px;min-width:18px}::ng-deep span.file.table i{font-size:8px}::ng-deep span.file.table .format{height:8px;font-size:7px;line-height:8px;font-weight:400}::ng-deep span.file:before{position:absolute;border-radius:0;top:-4px;right:-1px;content:\"\";height:4px;width:4px;display:block;background:linear-gradient(45deg,#747576 0% 1%,#747576 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file:after{height:4px;left:-1px;right:3px;border-top:1px solid;border-right:none;border-left:1px solid;content:\"\";top:-4px;position:absolute;border-radius:2px 0 0;background:#fff}::ng-deep span.file .format{height:10px;font-size:6px;text-transform:uppercase;background:transparent;font-weight:600;text-align:center;display:block;line-height:10px}::ng-deep span.file i{font-size:10px;height:10px;display:flex;align-items:center;justify-content:center;color:#dbdbdb}::ng-deep span.file.docx{width:22px!important}::ng-deep span.file.pdf,::ng-deep span.file.template{border-color:#f31c39}::ng-deep span.file.pdf:before,::ng-deep span.file.template:before{background:linear-gradient(45deg,#f31c39 0% 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#f31c39\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.pdf:after,::ng-deep span.file.template:after{border-color:#f31c39}::ng-deep span.file.pdf .format,::ng-deep span.file.template .format{color:#f31c39}::ng-deep span.file.xlsx,::ng-deep span.file.xls,::ng-deep span.file.css,::ng-deep span.file.scss,::ng-deep span.file.less{border-color:#34aa44}::ng-deep span.file.xlsx:before,::ng-deep span.file.xls:before,::ng-deep span.file.css:before,::ng-deep span.file.scss:before,::ng-deep span.file.less:before{background:linear-gradient(45deg,#34aa44 0% 1%,#34aa44 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.xlsx:after,::ng-deep span.file.xls:after,::ng-deep span.file.css:after,::ng-deep span.file.scss:after,::ng-deep span.file.less:after{border-color:#34aa44;color:#34aa44}::ng-deep span.file.xlsx .format,::ng-deep span.file.xls .format,::ng-deep span.file.css .format,::ng-deep span.file.scss .format,::ng-deep span.file.less .format{color:#34aa44}::ng-deep span.file.doc,::ng-deep span.file.docx,::ng-deep span.file.psd{border-color:#1e5dd3}::ng-deep span.file.doc:before,::ng-deep span.file.docx:before,::ng-deep span.file.psd:before{background:linear-gradient(45deg,#1e5dd3 0% 1%,#1e5dd3 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.doc:after,::ng-deep span.file.docx:after,::ng-deep span.file.psd:after{border-color:#1e5dd3}::ng-deep span.file.doc .format,::ng-deep span.file.docx .format,::ng-deep span.file.psd .format{color:#1e5dd3}::ng-deep span.file.ppt,::ng-deep span.file.ai,::ng-deep span.file.html,::ng-deep span.file.jpg,::ng-deep span.file.jpeg,::ng-deep span.file.png{border-color:#f6882f}::ng-deep span.file.ppt:before,::ng-deep span.file.ai:before,::ng-deep span.file.html:before,::ng-deep span.file.jpg:before,::ng-deep span.file.jpeg:before,::ng-deep span.file.png:before{background:linear-gradient(45deg,#f6882f 0% 1%,#f6882f 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.ppt:after,::ng-deep span.file.ai:after,::ng-deep span.file.html:after,::ng-deep span.file.jpg:after,::ng-deep span.file.jpeg:after,::ng-deep span.file.png:after{border-color:#f6882f}::ng-deep span.file.ppt .format,::ng-deep span.file.ai .format,::ng-deep span.file.html .format,::ng-deep span.file.jpg .format,::ng-deep span.file.jpeg .format,::ng-deep span.file.png .format{color:#f6882f}::ng-deep span.file.php{border-color:#7aa6f7}::ng-deep span.file.php:before{background:linear-gradient(45deg,#7aa6f7 0% 1%,#7aa6f7 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.php:after{border-color:#7aa6f7}::ng-deep span.file.php .format{color:#7aa6f7}::ng-deep ngx-material-timepicker-container .timepicker-backdrop-overlay{background-color:#0000000d!important;z-index:9999999999!important}::ng-deep ngx-material-timepicker-container .timepicker-overlay{z-index:9999999999!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker{width:232px!important;border-radius:2px!important;box-shadow:0 4px 30px #161b2f26!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header{background-color:#fff!important;padding:0!important;border-radius:2px 2px 0 0}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container{display:block!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time{color:#000!important;width:150px!important;margin:0 auto;line-height:60px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control{font-size:40px;background-color:transparent!important;color:#000!important;font-weight:600;text-align:right;caret-color:transparent;outline:none;font-family:Poppins;line-height:56px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:focus,::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:hover{background-color:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control:last-of-type .timepicker-dial__control{text-align:left}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time span{padding:0 8px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period{display:flex!important;width:182px;margin:0 auto!important;background:#f1f1f1;padding:4px 10px;border-radius:20px;position:relative}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period:before{background:#f1f1f1;content:\"\";position:absolute;top:15px;left:-25px;width:calc(100% + 50px);height:2px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period{flex-direction:unset!important;position:relative;z-index:1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:after{content:\"\";position:absolute;right:-12px;top:0;border-left:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:before{content:\"\";position:absolute;left:-18px;top:0;border-right:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button{font-size:11px;background-color:transparent;padding:0;border-radius:20px;color:#747576;font-weight:600;font-family:Poppins;width:84px;height:24px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button.timepicker-dial__item_active{background:#fff!important;color:#1e5dd3!important;box-shadow:0 1px 2px #dbdbdb}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button+button{margin-left:0!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face{width:200px!important;height:200px!important;padding:10px!important;background:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer{height:92px!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span{color:#000}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span.active{color:#fff}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand{height:80px!important;top:calc(50% - 80px)!important;background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number>span.active{background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand_minute:before{border:4px solid #1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions{display:flex!important;padding:10px 0 0!important;background:#fff!important;justify-content:space-around!important;border-radius:0 0 2px 2px!important;overflow:hidden}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div:first-child ngx-material-timepicker-button button.timepicker-button{background:#f8f8f8;color:#1e5dd3}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button{line-height:28px!important;width:100%;background:#1e5dd3;color:#fff;border-radius:0!important;height:32px!important;width:116px!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button span{font-weight:500!important;font-size:11px;font-family:Poppins}::ng-deep vcomply-editor{display:block}::ng-deep vcomply-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep vcomply-editor .editor-container:hover,::ng-deep vcomply-editor .editor-container:focus-within{border:1px solid #1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep vcomply-editor .editor-container mention-list ul li a{font-size:16px!important}::ng-deep vcomply-editor .editor-container .editable-block{background:#fff;min-height:60px;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep vcomply-editor .editor-container .editable-block:before{color:#747576!important}::ng-deep vcomply-editor .editor-container .editor-tools{border-top:1px solid #dbdbdb;border-radius:0 0 3px 3px}::ng-deep vcomply-editor .editor-container .editor-tools:hover{border-color:#1e5dd3}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep marx-modal .popup-modal-background{background-color:#161b2fcc!important}::ng-deep .within-box{background:#f1f1f1;border-radius:.125rem;color:#042e7d}::ng-deep .within-value{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-word}.wf-tooltip{pointer-events:none;position:absolute;max-width:300px;font-size:12px;text-align:left;color:#fff;padding:8px 12px;background:#000;border-radius:2px;z-index:-222;top:0;opacity:0;white-space:break-spaces;word-break:break-word}.wf-tooltip *{color:#fff!important}.wf-tooltip:empty{display:none!important}.wf-tooltip.white{box-shadow:0 2px 8px #1c5bd159;color:#747576;background:#fff;text-align:left}.wf-tooltip.white b{color:#747576!important}.wf-tooltip.animate-top{animation:animate-top .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-right{animation:animate-right .3s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-bottom{animation:animate-bottom .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-left{animation:animate-left .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip-top:after{top:100%;left:50%;margin-left:-5px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip-bottom:after{bottom:100%;left:50%;margin-left:-5px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-left.white:after{border-color:transparent transparent transparent #f1f1f1}.wf-tooltip-left:after{top:50%;left:100%;margin-top:-5px;border-width:5px;border-color:transparent transparent transparent #000000}.wf-tooltip-right.white:after{border-color:transparent #f1f1f1 transparent transparent}.wf-tooltip-right:after{top:50%;right:100%;margin-top:-5px;border-width:5px;border-color:transparent #000000 transparent transparent}.wf-tooltip-bottom-right:after{bottom:100%;left:100%;margin-left:-20px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom-right.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-bottom-left:after{bottom:100%;left:0;margin-left:10px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom-left.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-top-left:after{top:100%;left:0;margin-left:10px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top-left.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip-top-right:after{top:100%;left:100%;margin-left:-5px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top-right.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip:after{content:\"\";position:absolute;border-style:solid}.wf-tooltip span.within{font-size:80%;display:block;width:100%}.wf-tooltip .small{display:block;font-size:10px}.wf-tooltip .within-box{background:#f1f1f1;border-radius:2px;color:#042e7d!important;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 2px;margin-right:2px}.wf-tooltip-show{pointer-events:none;opacity:1;z-index:2147483001}\n"], dependencies: [{ kind: "directive", type: i1$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.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value", "oneLine"], outputs: ["checkedEvent"] }, { kind: "directive", type: ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: SnackBarComponent, selector: "app-snack-bar" }, { kind: "component", type: GrcObjectContainerComponent, selector: "lib-grc-object-container", inputs: ["grcType", "MODE", "ID"], outputs: ["populateOption", "pickerChanged", "closeWorkflow", "disconnectRefresh", "resetForm", "hideElementsFromMoreOptions"] }, { kind: "component", type: WorkflowCaseComponent, selector: "app-workflow-case", inputs: ["openedFrom", "source", "caseId", "mode", "workflowType", "responsibilityData", "assessmentQuestion", "caseTypePermission"], outputs: ["closeWorkflow", "populateOption", "caseReportedBy", "userListEmitter", "disconnectRefresh", "pickerChanged"] }, { kind: "component", type: WorkflowRiskComponent, selector: "app-workflow-risk", inputs: ["feature", "mode", "riskId", "defaultRiskType", "moveToRegisterMode", "secondaryOpenPortal", "openedFrom"], outputs: ["showConfirmationAlert", "pickerChanged", "populateOption", "closeWorkflow", "disconnectRefresh", "refreshForm", "hideElementsFromMoreOptions", "rcSelected"] }, { kind: "component", type: WorkflowComplianceComponent, selector: "app-workflow-compliance", inputs: ["mode", "responsibilityId", "frameworkDetails", "isEntrust", "feature", "assessmentDetails", "isDuplicate", "closeOnEsc", "orgDetails", "openedFrom", "selectedRC", "selectedProgram", "responsibilityDetails", "customFields"], outputs: ["pickerChanged", "populateOption", "hideElementsFromMoreOptions", "closeWorkflow", "resetForm", "disconnectRefresh", "checkpointCountUpdated", "rcSelected", "onRemovingCheckpoint", "isAssessmentDisabled", "assigneeTypeChange", "onReviewerTypeChange"] }, { kind: "component", type: WorkflowPolicyComponent, selector: "app-workflow-policy", inputs: ["mode", "policyId", "feature", "convertFileData", "selectedCategory", "isSendForAttestation", "templateId"], outputs: ["pickerChanged", "showConfirmationAlert", "populateOption", "disconnectRefresh", "shiftToEditMode"] }, { kind: "component", type: MoreOptionComponent, selector: "app-more-option", inputs: ["currentWorkflow", "openedFrom", "isEditMode", "isRCSelected", "isProgramSelected", "allowedFeature", "orgDetailsData", "isAttributesAvailable"], outputs: ["selectedOption"] }, { kind: "component", type: AddMultipleRiskComponent, selector: "app-add-multiple-risk", inputs: ["feature"], outputs: ["pickerChanged", "populateOption", "closeWorkflow", "disconnectRefresh"] }, { kind: "component", type: ConfirmationAlertComponent, selector: "app-confirmation-alert", inputs: ["message", "config"], outputs: ["action"] }, { kind: "component", type: WorkflowSurveyFormComponent, selector: "app-workflow-survey-form" }, { kind: "component", type: LogAnIssueComponent, selector: "app-log-an-issue", inputs: ["openedFrom", "source", "issueId", "reponsibilityData", "assessmentQuestion", "issueDetails", "mode", "config", "responsibilitiesData"], outputs: ["pickerChanged", "populateOption", "closeWorkflow", "modeChange", "disconnectRefresh"] }, { kind: "component", type: WorkflowAssessmentComponent, selector: "app-workflow-assessment", inputs: ["mode", "assessmentId", "openedFrom"], outputs: ["disconnectRefresh", "pickerChanged", "closeWorkflow"] }, { kind: "component", type: ImportAnAssessmentComponent, selector: "app-import-an-assessment", outputs: ["closeWorkflow", "disconnectRefresh"] }, { kind: "component", type: AssessmentListComponent, selector: "app-assessment-list", inputs: ["isEdit", "mode", "selectedAssessment", "selectedAssessmentData", "program_ids", "isFullScreen"], outputs: ["onAssessmentSelect", "cancelAssessment"] }, { kind: "component", type: WorkflowProgramComponent, selector: "app-workflow-program", inputs: ["canFrameworkChange", "mode", "programId", "programType", "allowedFeature", "addToProgramDetails", "orgDetails", "programDetails"], outputs: ["pickerChanged", "populateOption", "closeWorkflow", "showConfirmationAlert", "disconnectRefresh", "refreshForm", "hideElementsFromMoreOptions", "onRemovingRole", "disableElementsFromMoreOptions"] }, { kind: "component", type: AddMultipleResponsibilityContainerComponent, selector: "lib-add-multiple-responsibility-container", inputs: ["feature", "orgDetails"], outputs: ["closeWorkflow"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: UserPipe, name: "userPipe" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: WorkflowEngineContainerComponent, selector: "app-vcomply-workflow-engine-container", inputs: { workflowType: "workflowType", mode: "mode", id: "id", openedFrom: "openedFrom", source: "source", allowedWorkflows: "allowedWorkflows", frameworkDetails: "frameworkDetails", selectedRC: "selectedRC", secondaryOpenPortal: "secondaryOpenPortal", defaultRiskType: "defaultRiskType", moveToRegisterMode: "moveToRegisterMode", workflowDetails: "workflowDetails", reponsibilityData: "reponsibilityData", assessmentQuestion: "assessmentQuestion", pid: "pid", programType: "programType", issueData: "issueData", entrustButtonName: "entrustButtonName", config: "config", convertFileData: "convertFileData", selectedCategory: "selectedCategory", selectedProgram: "selectedProgram", canFrameworkChange: "canFrameworkChange", addToProgramDetails: "addToProgramDetails", grcType: "grcType", isSendForAttestation: "isSendForAttestation", assessmentDetails: "assessmentDetails", templateId: "templateId", feature: "feature" }, outputs: { closeWorkflow: "closeWorkflow" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)", "window:resize": "sizeChange($event)" } }, viewQueries: [{ propertyName: "riskComponent", first: true, predicate: ["risk"], descendants: true }, { propertyName: "riskBulkUpload", first: true, predicate: ["multipleRisk"], descendants: true }, { propertyName: "responsibilityBulkUpload", first: true, predicate: ["multipleResponsibility"], descendants: true }, { propertyName: "compliance", first: true, predicate: ["responsibility"], descendants: true }, { propertyName: "moreOption", first: true, predicate: ["moreOption"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "dropdownRow", first: true, predicate: ["dropdownRow"], descendants: true }, { propertyName: "policy", first: true, predicate: ["policy"], descendants: true }, { propertyName: "logIssueComponent", first: true, predicate: ["logAnIssue"], descendants: true }, { propertyName: "workflowAssessmentComponent", first: true, predicate: ["assessment"], descendants: true }, { propertyName: "importAnAssessment", first: true, predicate: ["importAssessment"], descendants: true }, { propertyName: "program", first: true, predicate: ["program"], descendants: true }, { propertyName: "grcObject", first: true, predicate: ["grcObject"], descendants: true }, { propertyName: "reportCase", first: true, predicate: ["reportCase"], descendants: true }], ngImport: i0, template: "<app-snack-bar></app-snack-bar>\n<div class=\"workflow-engine-overlay\"></div>\n\n<app-assessment-list *ngIf=\"workflowType === 'ASSESSMENT'\" (cancelAssessment)=\"closeWorkflowEngine()\" [isEdit]=\"true\"\n  [isFullScreen]=\"true\" [selectedAssessment]=\"selectedAssessment\"\n  (onAssessmentSelect)=\"closeWorkflowEngine({ evt: $event, confirm: false })\"></app-assessment-list>\n<div *ngIf=\"workflowType !== 'ASSESSMENT'\" class=\"workflow-engine\" [class.animate]=\"animation\" [class.bg]=\"\n    (!isWorkflowSelectorEnabled || riskBulkUpload?.showCategoryList) &&\n    !policy?.showCreateDocuments\n  \">\n  <div class=\"workflow-engine-container\" [ngSwitch]=\"currentWorkflow?.code\"\n    [class.with-preview-assessment]=\"(auth?.previewPanel | async) === true\" [class.with-frequency]=\"\n      compliance?.activeSelector === 'frequency' ||\n      compliance?.activeSelector === 'reviewerFrequency' ||\n      riskComponent?.activeSelector === 'frequency' ||\n      policy?.activeSelector === 'frequency' ||\n      policy?.activeSelector === 'reviewerFrequency'\n    \">\n    <button (click)=\"closeWorkflowEngine()\" id=\"close-workflow-engine-btn\" class=\"close\" [appTooltip]=\"'[Esc] to close'\"\n      placement=\"left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\" [class.disabled]=\"\n        confirmationAlertConfig?.isVisible || !isWorkflowSelectorEnabled\n      \" [class.smiley-opened]=\"\n        riskComponent?.showSmiley ||\n        logIssueComponent?.showSmiley ||\n        compliance?.showSmiley ||\n        policy?.showCreateDocuments ||\n        responsibilityBulkUpload?.showSmiley ||\n        responsibilityBulkUpload?.showExcel ||\n        riskBulkUpload?.showSmiley ||\n        riskBulkUpload?.showExcel ||\n        program?.showSmiley ||\n        importAnAssessment?.showSmiley\n      \">\n      <i class=\"icons\">&#xe93f;</i>\n    </button>\n    <div *ngIf=\"!uiKitService.isSmileyOn\" class=\"workflow-engine-more\"\n      [hidden]=\"showMoreOption === false || policy?.showCreateDocuments\"\n      [class.disabled]=\"confirmationAlertConfig?.isVisible\" [class.read-only]=\"uiKitService?.isLoader\">\n      <app-more-option #moreOption [currentWorkflow]=\"currentWorkflow?.code\" [isEditMode]=\"mode === 'EDIT'\"\n        [isRCSelected]=\"\n          isRCSelected ||\n          (currentWorkflow?.code === 'GRC' &&\n            grcObject?.listObject.RC.selectedData?.length > 0)\n        \" [openedFrom]=\"openedFrom\" (selectedOption)=\"addMoreInfo($event)\" [isProgramSelected]=\"selectedProgram\"\n        [allowedFeature]=\"feature\" [orgDetailsData]=\"orgDetails\" [isAttributesAvailable]=\"\n          currentWorkflow?.code === 'GRC' &&\n          grcObject?.selectedAttributes?.attributes?.length > 0\n        \">\n      </app-more-option>\n    </div>\n    <div class=\"workflow-engine-form\" [class.disabled]=\"confirmationAlertConfig?.isVisible\" [class.no-shadow]=\"\n        currentWorkflow?.code == 'AMR' ||\n        currentWorkflow?.code == 'CMR' ||\n        currentWorkflow?.code == 'AAA' ||\n        uiKitService.isSmileyOn ||\n        policy?.showCreateDocuments\n      \">\n      <div class=\"container\" (scroll)=\"scrollForm()\">\n        <ng-container *ngIf=\"\n            !['VIEW_AUDIT_EXECUTION_SUMMARY', 'EXECUTE_AUDIT_PLAN'].includes(\n              openedFrom\n            )\n          \">\n          <div *ngIf=\"!(uiKitService.isSmileyOn || policy?.showCreateDocuments)\" class=\"form-group-row\" #dropdownRow\n            [class.disabled]=\"\n              (mode === 'EDIT' ||\n                !isWorkflowSelectorEnabled ||\n                disableWorkflowChange ||\n                selectedProgram) &&\n              currentWorkflow?.code !== 'ACTW'\n            \">\n            <div class=\"left\" [class.checked]=\"currentWorkflow\">\n              <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n              </svg>\n            </div>\n            <div class=\"right\">\n              <div class=\"vx-form-group\" #dropdown>\n                <label *ngIf=\"currentWorkflow?.code !== 'ACTW'\" class=\"vx-control-panel\">Select a Workflow<span\n                    class=\"required\">*</span></label>\n                <label *ngIf=\"currentWorkflow?.code === 'ACTW'\" class=\"vx-control-panel\">Assign a Case to Workflow<span\n                    class=\"required\">*</span></label>\n                <div class=\"select\" *ngIf=\"!currentWorkflow && currentWorkflow?.code !== 'ACTW'\"\n                  (click)=\"editWorkflow()\">\n                  <input type=\"text\" placeholder=\"Select a Workflow\" readonly />\n                </div>\n                <div class=\"selected first-field\" *ngIf=\"currentWorkflow\">\n                  <!-- {{currentWorkflow | json}} -->\n                  <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-mr-2\">\n                    <span class=\"chipName vx-fs-11 vx-label-txt no-width\" [appTooltip]=\"currentWorkflow?.workflowName\"\n                      placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\" [innerHTML]=\"\n                        workflowType === 'ACTW'\n                          ? '<strong>Case Reported By: </strong>' +\n                            (reportBy | userPipe : userList)?.member_name\n                          : currentWorkflow?.workflowName\n                      \">\n                    </span>\n                  </div>\n                  <!-- <div class=\"chip-container\">\n                                    <span class=\"chip\" [class.disabled]=\"false\">{{currentWorkflow?.workflowName}}</span>\n                                </div> -->\n                  <button class=\"edit\" type=\"button\" (click)=\"editWorkflow()\" *ngIf=\"\n                      !workflowList &&\n                      openedFrom != 'ASSESSMENT' &&\n                      currentWorkflow?.code !== 'ACTW'\n                    \">\n                    <i class=\"icons\">&#xe9ba;</i> Edit\n                  </button>\n                </div>\n                <div *ngIf=\"\n                    currentWorkflow?.code === 'CAPR' &&\n                    currentBusinessCycle &&\n                    !programSimplifyFlag\n                  \"\n                  class=\"program-business-cycle vx-fs-11 vx-txt-white vx-d-flex vx-align-center vx-pt-2 vx-pb-1 vx-pl-2 vx-pr-1\">\n                  <i class=\"icons vx-fs-12 vx-mr-1\">&#xe963;</i> This program is\n                  being set-up for the business cycle:\n                  <span class=\"vx-fw-600 vx-ml-1\">{{\n                    currentBusinessCycle\n                    }}</span>\n                </div>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n        <!-- <app-create-documents></app-create-documents> -->\n        <!-- <app-bulk-view></app-bulk-view> -->\n        <!-- <app-bulk-responsibility-view></app-bulk-responsibility-view> -->\n        <app-workflow-compliance (disconnectRefresh)=\"isHostRefreshActive = $event\" [orgDetails]=\"orgDetails\"\n          [isEntrust]=\"entrustButtonName.toLowerCase() == 'entrust'\" [responsibilityId]=\"id\" [mode]=\"mode\"\n          [frameworkDetails]=\"frameworkDetails\" [assessmentDetails]=\"assessmentDetails\"\n          (closeWorkflow)=\"closeWorkflowEngine($event)\" *ngSwitchCase=\"'CAR'\" #responsibility\n          (pickerChanged)=\"decideViewMoreOption($event)\" (populateOption)=\"populateMoreOption($event)\"\n          (hideElementsFromMoreOptions)=\"hideElementsFromMoreOptions($event)\" [selectedRC]=\"selectedRC\"\n          [closeOnEsc]=\"closeOnEsc\" (assigneeTypeChange)=\"assigneeTypeChange($event)\"\n          (onReviewerTypeChange)=\"onReviewerChange($event)\" [feature]=\"feature\" [openedFrom]=\"openedFrom\"\n          (rcSelected)=\"onRcSelected($event)\" (resetForm)=\"onResetForm()\"\n          (onRemovingCheckpoint)=\"onRemovingCheckpoint($event, false, true)\"\n          (isAssessmentDisabled)=\"isAssessmentDisabled($event)\" (checkpointCountUpdated)=\"checkpointCount = $event\"\n          [selectedProgram]=\"selectedProgram\" [responsibilityDetails]=\"workflowDetails\"></app-workflow-compliance>\n        <app-workflow-risk [secondaryOpenPortal]=\"secondaryOpenPortal\" [openedFrom]=\"openedFrom\"\n          (disconnectRefresh)=\"isHostRefreshActive = $event\" *ngSwitchCase=\"'AAR'\" #risk\n          (showConfirmationAlert)=\"showConfirmationPopup($event)\"\n          (hideElementsFromMoreOptions)=\"hideElementsFromMoreOptions($event)\"\n          (closeWorkflow)=\"closeWorkflowEngine($event)\" (pickerChanged)=\"decideViewMoreOption($event)\"\n          (populateOption)=\"populateMoreOption($event)\" (refreshForm)=\"onResetForm()\"\n          (rcSelected)=\"onRcSelected($event)\" [mode]=\"mode\" [riskId]=\"id\" [feature]=\"feature\"></app-workflow-risk>\n        <app-workflow-policy (disconnectRefresh)=\"isHostRefreshActive = $event\" *ngSwitchCase=\"'CAP'\" #policy\n          (showConfirmationAlert)=\"showConfirmationPopup($event)\" (shiftToEditMode)=\"shiftToEditMode()\"\n          [feature]=\"feature\" [policyId]=\"id\" [mode]=\"mode\" [templateId]=\"templateId\"\n          [convertFileData]=\"convertFileData\" [selectedCategory]=\"selectedCategory\"\n          [isSendForAttestation]=\"isSendForAttestation\" (populateOption)=\"populateMoreOption($event)\"\n          (pickerChanged)=\"decideViewMoreOption($event)\"></app-workflow-policy>\n        <app-workflow-survey-form *ngSwitchCase=\"'CAS'\" #surveyForm></app-workflow-survey-form>\n        <app-add-multiple-risk (disconnectRefresh)=\"isHostRefreshActive = $event\" *ngSwitchCase=\"'AMR'\" #multipleRisk\n          (pickerChanged)=\"decideViewMoreOption($event)\" (closeWorkflow)=\"closeWorkflowEngine($event)\"\n          [feature]=\"feature\"></app-add-multiple-risk>\n        <!-- <app-add-multiple-responsibility  (disconnectRefresh)=\"isHostRefreshActive = $event\"    (closeWorkflow)=\"closeWorkflowEngine($event)\" *ngSwitchCase=\"'CMR'\" #multipleResponsibility>\n                </app-add-multiple-responsibility> -->\n\n        <lib-add-multiple-responsibility-container [orgDetails]=\"orgDetails\"\n          (disconnectRefresh)=\"isHostRefreshActive = $event\" (closeWorkflow)=\"closeWorkflowEngine($event)\"\n          *ngSwitchCase=\"'CMR'\" [feature]=\"feature\" #multipleResponsibility></lib-add-multiple-responsibility-container>\n        <!-- New Log an Issue -->\n        <app-log-an-issue [issueDetails]=\"issueData\" *ngSwitchCase=\"'LAI'\" [reponsibilityData]=\"reponsibilityData\"\n          [assessmentQuestion]=\"assessmentQuestion\" [openedFrom]=\"openedFrom\" [source]=\"source\" [issueId]=\"id\"\n          #logAnIssue (disconnectRefresh)=\"isHostRefreshActive = $event\" (closeWorkflow)=\"closeWorkflowEngine($event)\"\n          (pickerChanged)=\"decideViewMoreOption($event)\" (populateOption)=\"populateMoreOption($event)\" [(mode)]=\"mode\">\n        </app-log-an-issue>\n        <!-- Old Log an issue -->\n        <!-- <app-log-an-issue *ngSwitchCase=\"'LAI'\" [responsibilitiesData]=\"reponsibiltyData\" [openedFrom]=\"openedFrom\"\n                #logAnIssue (closeWorkflow)=\"closeWorkflowEngine($event)\"\n                (pickerChanged)=\"decideViewMoreOption($event)\" (populateOption)=\"populateMoreOption($event)\">\n            </app-log-an-issue> -->\n\n        <app-workflow-assessment [assessmentId]=\"id\" (pickerChanged)=\"decideViewMoreOption($event)\"\n          [openedFrom]=\"openedFrom\" (disconnectRefresh)=\"isHostRefreshActive = $event\" *ngSwitchCase=\"'AAA'\"\n          (showConfirmationAlert)=\"showConfirmationPopup($event)\" (closeWorkflow)=\"closeWorkflowEngine($event)\"\n          (pickerChanged)=\"decideViewMoreOption($event)\" (populateOption)=\"populateMoreOption($event)\"\n          (refreshForm)=\"onResetForm()\" [mode]=\"mode\" #assessment></app-workflow-assessment>\n        <app-import-an-assessment (pickerChanged)=\"decideViewMoreOption($event)\"\n          (disconnectRefresh)=\"isHostRefreshActive = $event\" *ngSwitchCase=\"'IAA'\"\n          (showConfirmationAlert)=\"showConfirmationPopup($event)\" (closeWorkflow)=\"closeWorkflowEngine($event)\"\n          (pickerChanged)=\"decideViewMoreOption($event)\" (populateOption)=\"populateMoreOption($event)\"\n          (refreshForm)=\"onResetForm()\" #importAssessment></app-import-an-assessment>\n        <!-- <app-workflow-program #program *ngSwitchCase=\"'CAPR'\" (pickerChanged)=\"decideViewMoreOption($event)\" (disconnectRefresh)=\"isHostRefreshActive = $event\"></app-workflow-program> -->\n        <app-workflow-program #program *ngSwitchCase=\"'CAPR'\" [orgDetails]=\"orgDetails\" [allowedFeature]=\"feature\"\n          (disableElementsFromMoreOptions)=\"disableMoreOptions('CAPR', $event)\" [programType]=\"programType\"\n          (pickerChanged)=\"decideViewMoreOption($event)\" (disconnectRefresh)=\"isHostRefreshActive = $event\"\n          (showConfirmationAlert)=\"showConfirmationPopup($event)\" (closeWorkflow)=\"closeWorkflowEngine($event)\"\n          (pickerChanged)=\"decideViewMoreOption($event)\" (populateOption)=\"populateMoreOption($event)\"\n          (refreshForm)=\"onResetForm()\" [mode]=\"mode\" [programId]=\"id\" [programDetails]=\"workflowDetails\"\n          (onRemovingRole)=\"onRemovingRole($event)\" [canFrameworkChange]=\"canFrameworkChange\"\n          [addToProgramDetails]=\"addToProgramDetails\"></app-workflow-program>\n\n        <!-- GRC Object -->\n        <lib-grc-object-container #grcObject *ngSwitchCase=\"'GRC'\" [grcType]=\"grcType\" [MODE]=\"mode\" [ID]=\"id\"\n          (pickerChanged)=\"decideViewMoreOption($event)\" (populateOption)=\"populateMoreOption($event)\"\n          (closeWorkflow)=\"closeWorkflowEngine($event)\" (resetForm)=\"onResetGRCForm()\"\n          (disconnectRefresh)=\"isHostRefreshActive = $event\"\n          (hideElementsFromMoreOptions)=\"hideElementsFromMoreOptions($event)\"></lib-grc-object-container>\n\n        <!-- Report a Case -->\n        <app-workflow-case *ngSwitchCase=\"'RAC'\" #reportCase [openedFrom]=\"openedFrom\" [source]=\"source\" [caseId]=\"id\"\n          [mode]=\"mode\" [responsibilityData]=\"reponsibilityData\" [assessmentQuestion]=\"assessmentQuestion\"\n          [caseTypePermission]=\"caseTypePermission\" [workflowType]=\"'RAC'\"\n          (disconnectRefresh)=\"isHostRefreshActive = $event\" (populateOption)=\"populateMoreOption($event)\"\n          (closeWorkflow)=\"closeWorkflowEngine($event)\"\n          (pickerChanged)=\"decideViewMoreOption($event)\"></app-workflow-case>\n        <!-- Assign case to workflow -->\n        <app-workflow-case *ngSwitchCase=\"'ACTW'\" #reportCase [openedFrom]=\"openedFrom\" [source]=\"source\" [caseId]=\"id\"\n          [mode]=\"mode\" [workflowType]=\"'ACTW'\" [responsibilityData]=\"reponsibilityData\"\n          [assessmentQuestion]=\"assessmentQuestion\" [caseTypePermission]=\"caseTypePermission\"\n          (disconnectRefresh)=\"isHostRefreshActive = $event\" (populateOption)=\"populateMoreOption($event)\"\n          (caseReportedBy)=\"caseReportedBy($event)\" (userListEmitter)=\"userListEmitter($event)\"\n          (closeWorkflow)=\"closeWorkflowEngine($event)\"\n          (pickerChanged)=\"decideViewMoreOption($event)\"></app-workflow-case>\n      </div>\n      <div *ngIf=\"['RAC', 'ACTW'].includes(currentWorkflow?.code)\" class=\"vx-d-flex\">\n        <button class=\"cancel\" [class.disabled]=\"!isWorkflowSelectorEnabled\" (click)=\"closeWorkflowEngine()\">\n          CANCEL\n        </button>\n        <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled\" (click)=\"submit()\">\n          {{\n          mode === \"EDIT\" && currentWorkflow?.code === \"RAC\"\n          ? \"Update\"\n          : \"Report\"\n          }}\n        </button>\n      </div>\n      <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled\" *ngSwitchCase=\"'AAR'\" (click)=\"submit()\">\n        {{\n        mode === \"EDIT\" && openedFrom !== \"MOVE_TO_REGISTER\"\n        ? \"Update\"\n        : \"Add\"\n        }}\n      </button>\n      <button class=\"submit\" [class.disabled]=\"\n          !isWorkflowSelectorEnabled ||\n          !riskBulkUpload?.category?.selectedCategory\n        \" (click)=\"bulkUploadBrowse('AMR')\" *ngSwitchCase=\"'AMR'\">\n        Browse\n      </button>\n      <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled\" (click)=\"bulkUploadBrowse('CMR')\"\n        *ngSwitchCase=\"'CMR'\">\n        Browse\n      </button>\n\n      <!-- This has ternary operation to handle the both scenarios of how it works with compliance and program module, please don't change this. -->\n      <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled\" (click)=\"submit()\" *ngSwitchCase=\"'CAR'\">\n        {{\n        entrustButtonName !== \"\" && mode !== \"EDIT\"\n        ? entrustButtonName\n        : mode === \"EDIT\" && !workflowDetails?.duplicate\n        ? \"UPDATE\"\n        : \"Entrust\"\n        }}\n      </button>\n      <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled\" (click)=\"submit()\" *ngSwitchCase=\"'CAP'\">\n        {{\n        mode == \"EDIT\"\n        ? isSendForAttestation\n        ? \"Send for attestation\"\n        : \"Update\"\n        : \"Continue to draft\"\n        }}\n      </button>\n      <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled\" *ngSwitchCase=\"'CAS'\">\n        Continue to draft\n      </button>\n      <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled\" *ngSwitchCase=\"'LAI'\" (click)=\"submit()\">\n        {{ mode === \"EDIT\" ? \"Update\" : \"Add\" }}\n      </button>\n      <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled\" *ngSwitchCase=\"'AAA'\" (click)=\"submit()\">\n        {{ mode === \"EDIT\" ? \"Update\" : \"Continue to draft\" }}\n      </button>\n      <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled\" (click)=\"bulkUploadBrowse('IAA')\"\n        *ngSwitchCase=\"'IAA'\">\n        Browse\n      </button>\n      <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled || !program?.valid\" (click)=\"submit('CAPR')\"\n        *ngSwitchCase=\"'CAPR'\">\n        {{ mode === \"EDIT\" ? \"Update\" : \"Save\" }}\n      </button>\n      <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled || !program?.valid\" (click)=\"submit('CAPR')\"\n        *ngSwitchCase=\"'CAPR'\">\n        {{ mode === \"EDIT\" ? \"Update\" : \"Save\" }}\n      </button>\n      <button class=\"submit\" (click)=\"submit()\" *ngSwitchCase=\"'GRC'\">\n        {{ mode === \"EDIT\" ? \"Update\" : \"Save\" }}\n      </button>\n      <div class=\"dropdown\" *ngIf=\"workflowList\" (click)=\"closeWorkflowList()\" [style.top.px]=\"dropdownTop\"\n        [style.left.px]=\"dropdownLeft\" [style.width.px]=\"dropdownWidth\">\n        <ul class=\"dropdown-list\">\n          <li *ngFor=\"let workflow of workflowTypeList\" (click)=\"changeWorkflow($event, workflow)\">\n            <app-cs-radio *ngIf=\"workflow?.code !== 'ACTW'\" [value]=\"workflow?.code\"\n              [checked]=\"currentWorkflow?.code === workflow?.code\">\n              {{ workflow?.workflowName }}</app-cs-radio>\n          </li>\n        </ul>\n      </div>\n      <div class=\"dropdown-overlay\" *ngIf=\"workflowList\" (click)=\"closeWorkflowList()\"></div>\n    </div>\n    <app-confirmation-alert id=\"confirmation-dialogue\" (action)=\"confirmWorkflowChange($event)\"\n      *ngIf=\"confirmationAlertConfig?.isVisible\" [message]=\"confirmationAlertConfig?.message\"\n      [config]=\"confirmationAlertConfig\"></app-confirmation-alert>\n  </div>\n</div>", styles: ["@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/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.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/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";.dropdown-overlay{position:fixed;inset:0;z-index:2}.workflow-engine{background:#161b2fcc;position:fixed;inset:0;z-index:9}.workflow-engine button.close{position:absolute;background:transparent;cursor:pointer;border:none;font-size:16px;color:#000;top:8px;right:7px;z-index:12;display:flex;align-items:center;justify-content:center;border-radius:2px;padding:8px}.workflow-engine button.close.bulk-opened,.workflow-engine button.close.smiley-opened{z-index:10}.workflow-engine button.close:hover{background:#f1f1f1}.workflow-engine button.close.disabled{pointer-events:none;opacity:.3;filter:grayscale(1)}.workflow-engine-container{position:fixed;top:0;right:0;bottom:0;background:#fff;display:flex;z-index:10;border-top:3px solid #1E5DD3}.workflow-engine-container:before{content:\"\";height:30px;position:absolute;top:0;right:0;width:499px;z-index:11;background:linear-gradient(to bottom,#fff,#ffffffbf 66%,#ffffff6b 81%,#fff0);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#ffffff\",endColorstr=\"#00ffffff\",GradientType=0)}@media screen and (max-width: 1280px){.workflow-engine-container.with-frequency:before{display:none}.workflow-engine-container.with-frequency button.close{display:none}.workflow-engine-container.with-frequency .workflow-engine-form{right:-470px}.workflow-engine-container.with-frequency .workflow-engine-form .container ::ng-deep app-workflow-compliance .workflw-compliance{filter:grayscale(1)!important;pointer-events:none!important}.workflow-engine-container.with-frequency .workflow-engine-form .container ::ng-deep app-workflow-risk .workflw-risk{filter:grayscale(1)!important;pointer-events:none!important}.workflow-engine-container.with-frequency .workflow-engine-form .container ::ng-deep app-workflow-policy .workflow-policy{filter:grayscale(1)!important;pointer-events:none!important}.workflow-engine-container.with-frequency .workflow-engine-form button.submit{filter:grayscale(1)!important;pointer-events:none!important}}.workflow-engine-container.with-preview-assessment:before{display:none}.workflow-engine-container.with-preview-assessment button.close{display:none}.workflow-engine-container.with-preview-assessment .workflow-engine-form{right:-470px}.workflow-engine-container.with-preview-assessment .workflow-engine-form .container ::ng-deep app-workflow-compliance .workflw-compliance{filter:grayscale(1)!important;pointer-events:none!important}.workflow-engine-container.with-preview-assessment .workflow-engine-form button.submit{filter:grayscale(1)!important;pointer-events:none!important}.workflow-engine-more{width:318px;padding:36px 22px 36px 40px;height:100vh;overflow:auto;margin-left:-18px;scrollbar-width:none}@media screen and (max-height: 900px){.workflow-engine-more{padding:20px 22px 36px 40px}}.workflow-engine-more::-webkit-scrollbar-track{background-color:#f1f1f1;position:absolute}.workflow-engine-more::-webkit-scrollbar{width:1px;height:1px;background-color:transparent;position:absolute}.workflow-engine-more::-webkit-scrollbar-thumb{border-radius:1px;background-color:#dbdbdb;position:absolute}.workflow-engine-more.disabled{filter:grayscale(1);pointer-events:none}.workflow-engine-more.read-only{pointer-events:none}.workflow-engine-form{width:500px;position:relative}.workflow-engine-form .container{height:calc(100vh - 53px);padding:35px 24px 8px 62px;overflow:hidden;overflow-y:auto;margin-left:-22px;scrollbar-width:thin}.workflow-engine-form .container.disabled{pointer-events:none}.workflow-engine-form:before{content:\"\";top:0;bottom:-50px;left:0;width:1px;background:#f1f1f1;position:absolute;z-index:-1}.workflow-engine-form button.submit{position:sticky;height:50px;display:flex;align-items:center;justify-content:center;font-size:13px;line-height:48px;letter-spacing:1.3px;color:#fff;background:#1e5dd3;cursor:pointer;border:1px solid #1e5dd3;outline:none;border-radius:0;text-transform:uppercase;font-weight:600;width:100%;bottom:0;padding:0}.workflow-engine-form button.submit:disabled{background:#f1f1f1;border-color:#f1f1f1;pointer-events:none;cursor:not-allowed;color:#747576}.workflow-engine-form button.submit.disabled{pointer-events:none;opacity:.3;filter:grayscale(1)}.workflow-engine-form button.cancel{position:sticky;height:50px;display:flex;align-items:center;justify-content:center;font-size:13px;line-height:48px;letter-spacing:1.3px;color:#1e5dd3;background:#fff;outline:none;border-radius:0;text-transform:uppercase;font-weight:600;width:100%;bottom:0;padding:0;border:none;border-top:1px solid #F1F1F1;border-left:1px solid #F1F1F1;cursor:pointer}.workflow-engine-form button.cancel:disabled{background:#f1f1f1;border-color:#f1f1f1;pointer-events:none;cursor:not-allowed;color:#747576}.workflow-engine-form button.cancel.disabled{pointer-events:none;opacity:.3;filter:grayscale(1)}.workflow-engine-form.disabled{filter:grayscale(1);pointer-events:none}.workflow-engine-form label.browse{padding:0;margin:0;display:block;position:sticky;bottom:0}.workflow-engine-form label.browse span{height:50px;display:flex;align-items:center;justify-content:center;font-size:13px;line-height:19px;letter-spacing:3.08px;color:#fff;background:#1e5dd3;cursor:pointer;border:1px solid #1e5dd3;outline:none;border-radius:0;text-transform:uppercase;font-weight:600;width:100%}.workflow-engine-form label.browse input{position:absolute;width:100%;height:100%;z-index:1;inset:0;opacity:0;cursor:pointer}.workflow-engine-form .file-browsed{display:flex;align-items:center;background:#fff;border-top:1px solid #F1F1F1;border-bottom:1px solid #F1F1F1}.workflow-engine-form .file-browsed span{display:block;width:calc(100% - 164px);color:#161b2f;font-size:13px;font-weight:400;line-height:20px;padding:0 16px}.workflow-engine-form .file-browsed button{height:50px;display:flex;align-items:center;justify-content:center;font-size:13px;line-height:19px;letter-spacing:3.08px;color:#fff;background:#1e5dd3;cursor:pointer;border:1px solid #1e5dd3;outline:none;border-radius:0;text-transform:uppercase;font-weight:600;width:164px;bottom:0}.workflow-engine-form:after{content:\"\";height:30px;position:absolute;right:0;bottom:50px;z-index:10;background:linear-gradient(to bottom,#fff0,#ffffffbf 22%,#fff);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#00ffffff\",endColorstr=\"#ffffff\",GradientType=0)}.workflow-engine-form.no-shadow:after{display:none}.workflow-engine.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}.workflow-engine.bg{background:#fff}.program-business-cycle{background:#f2bf19;border-radius:0 0 .25rem .25rem;position:relative;top:-.25rem;z-index:1}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n", "@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::-webkit-scrollbar-track{background-color:#f1f1f1;position:absolute}::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}button{font-family:Poppins,sans-serif}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;font-size:13px;color:#747576;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField::placeholder{font-size:13px;color:#747576}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxEnable.withBtn:after{display:none}::ng-deep .selectBoxEnable.withBtn button.setBtn{background:transparent;border-radius:0;border:none;min-width:98px}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer .chipName.no-width{max-width:unset}::ng-deep .chipContainer .chipName.full-width{max-width:25rem}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}::ng-deep .chipContainer button.countBtn.blueBg{background:#1e5dd3}::ng-deep .workflowLavel{background:#f1f1f1;border-radius:.125rem;color:#042e7d;min-width:1rem;height:1rem}::ng-deep .reviewSelection{border-radius:.25rem;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep .reviewSelection:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectButton{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectButton:hover,::ng-deep .selectButton:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep button.createNewBtn{background:transparent;border-radius:0;border:none}::ng-deep .vx-form-group{display:block;position:relative;margin-bottom:20px}::ng-deep .vx-form-group:after{content:\"\";display:block;clear:both}::ng-deep .vx-form-group .select{position:relative}::ng-deep .vx-form-group .select:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#707070;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .vx-form-group .select input{cursor:pointer;padding-right:30px!important}::ng-deep .vx-form-group .select .custom-input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;outline:none;padding:3px 12px;line-height:16px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .vx-form-group .select .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:13px;width:94%;display:block;pointer-events:none;opacity:.8}::ng-deep .vx-form-group .select .custom-input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .vx-form-group .select .custom-input.frequency-custom-input{padding-right:108px;display:flex;align-items:center}::ng-deep .vx-form-group .select+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .select+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .select+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .select~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .select.button-sec:after{display:none}::ng-deep .vx-form-group .select.button-sec button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;position:absolute;top:12px;right:8px;padding:0;margin:0}::ng-deep .vx-form-group .select+.vx-control-panel{margin-top:8px}::ng-deep .vx-form-group .select+.selected{margin-top:8px}::ng-deep .vx-form-group .select.select{margin-top:8px}::ng-deep .vx-form-group .upload-format{border:1px solid #dbdbdb;border-radius:4px;padding:8px 12px;display:block}::ng-deep .vx-form-group .upload-format span.text{line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:block;margin-bottom:6px}::ng-deep .vx-form-group .upload-format .radio-group{display:flex}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio{display:inline-block}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;margin-left:8px}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio+app-cs-radio{margin-left:12px}::ng-deep .vx-form-group .upload-format~.upload-format{margin-top:4px}::ng-deep .vx-form-group .form-tab{display:flex;justify-content:flex-start}::ng-deep .vx-form-group .form-tab button{background:transparent;color:#161b2f;font-size:11px;line-height:16px;text-transform:uppercase;cursor:pointer;padding:8px 8px 8px 0;border:none;outline:none;font-weight:500}::ng-deep .vx-form-group .form-tab button:disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .form-tab button+button{padding:8px}::ng-deep .vx-form-group .form-tab button.active{color:#1e5dd3}::ng-deep .vx-form-group .tab-group{border:1px solid #dbdbdb;border-radius:4px;padding:0;display:block;position:relative;transition:all .2s ease-in-out}::ng-deep .vx-form-group .tab-group:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group .tab-group .upload-file{padding:16px 62px 16px 24px;display:flex;align-items:center;justify-content:space-between}::ng-deep .vx-form-group .tab-group .upload-file .image{width:80px}::ng-deep .vx-form-group .tab-group .upload-file .browse span{display:inline-block;font-size:12px;color:#747576;line-height:16px;padding:0 4px}::ng-deep .vx-form-group .tab-group .upload-file .browse .label{font-size:11px;color:#1e5dd3;line-height:16px;font-weight:600;text-transform:uppercase;margin:0;padding:0}::ng-deep .vx-form-group .tab-group .upload-file .browse .label input{opacity:0;position:absolute;margin:0;padding:0;inset:0;cursor:pointer;width:100%}::ng-deep .vx-form-group .tab-group.active{border-color:#1e5dd3}::ng-deep .vx-form-group .tab-group.uploaded{margin-top:4px}::ng-deep .vx-form-group .tab-group.uploaded .upload-file{padding:8px 0!important;text-align:center}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .image{display:none}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .browse{width:100%;text-align:center}::ng-deep .vx-form-group .tab-group+label.vx-form-group{margin-top:8px;margin-bottom:4px}::ng-deep .vx-form-group .file-list{background:#fbfbfb;border:1px solid #f1f1f1;border-radius:4px;padding:12px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;position:relative}::ng-deep .vx-form-group .file-list span.file-name{color:#747576;line-height:16px;font-size:11px;font-weight:400;cursor:pointer;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .vx-form-group .file-list .button-group{display:flex}::ng-deep .vx-form-group .file-list button{font-size:12px;color:#eb2424;cursor:pointer;display:flex;padding:0;border:none;outline:none;background:transparent}::ng-deep .vx-form-group .file-list button.edit{color:#1e5dd3}::ng-deep .vx-form-group .file-list button+button{margin-left:16px}::ng-deep .vx-form-group .file-list+.file-list{margin-top:4px}::ng-deep .vx-form-group .file-list .file-container{display:flex;justify-content:space-between;width:100%}::ng-deep .vx-form-group .file-list.policy{background:#fff}::ng-deep .vx-form-group .file-list cs-select{position:relative;margin-top:8px;width:100%}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group input.value{height:32px!important;font-size:13px!important}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group i{right:12px!important;top:12px!important}::ng-deep .vx-form-group .file-list app-line-loader{display:block;position:absolute;left:10px;right:10px;bottom:0}::ng-deep .vx-form-group label.vx-control-panel{color:#161b2f;font-size:11px;font-weight:500;line-height:16px;margin-bottom:8px;display:block;text-transform:uppercase;text-align:left}::ng-deep .vx-form-group label.vx-control-panel.custom-tag{font-size:10px}::ng-deep .vx-form-group label.vx-control-panel.vx-mt-8{margin-top:8px}::ng-deep .vx-form-group label.vx-control-panel span.required{color:#eb2424;font-size:14px;font-weight:500;position:relative;top:-2px}::ng-deep .vx-form-group label.vx-control-panel .button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;padding:0;margin:0}::ng-deep .vx-form-group label.vx-control-panel app-cs-switch{float:right;display:block}::ng-deep .vx-form-group label.vx-control-panel i{margin-left:8px;font-size:12px;color:#1e5dd3;cursor:pointer;position:relative;top:1px}::ng-deep .vx-form-group label.vx-control-panel i.depreciation-icon{color:#e4b700;font-size:16px;position:relative;top:3px}::ng-deep .vx-form-group label.vx-control-panel .checkpoint-version{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:10px;font-weight:600;line-height:14px;margin-left:4px;padding:0 2px}::ng-deep .vx-form-group input[type=text],::ng-deep .vx-form-group .input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;outline:none;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400}::ng-deep .vx-form-group input[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group input[type=text]:focus,::ng-deep .vx-form-group .input:focus,::ng-deep .vx-form-group input[type=text]:hover,::ng-deep .vx-form-group .input:hover{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group input[type=text].error,::ng-deep .vx-form-group .input.error{border-color:#eb2424;color:#eb2424;margin-bottom:4px}::ng-deep .vx-form-group input[type=text].error:focus,::ng-deep .vx-form-group .input.error:focus{box-shadow:0 0 5px #d31e1e45}::ng-deep .vx-form-group input[type=text]:disabled,::ng-deep .vx-form-group .input:disabled{background:#f1f1f1;cursor:not-allowed;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group input[type=text]:disabled:hover,::ng-deep .vx-form-group .input:disabled:hover{border-color:#dbdbdb;box-shadow:none}::ng-deep .vx-form-group input[type=text] span.text,::ng-deep .vx-form-group .input span.text{font-size:13px;color:#747576;font-weight:400;display:block;width:100%}::ng-deep .vx-form-group input[type=text] .input-group,::ng-deep .vx-form-group .input .input-group{display:flex;align-items:center}::ng-deep .vx-form-group input[type=text] .input-group.counter,::ng-deep .vx-form-group .input .input-group.counter{min-width:96px;width:96px}::ng-deep .vx-form-group input[type=text] .input-group.counter button,::ng-deep .vx-form-group .input .input-group.counter button{height:24px;width:24px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#747576;font-size:8px;cursor:pointer;outline:none}::ng-deep .vx-form-group input[type=text] .input-group.counter input,::ng-deep .vx-form-group .input .input-group.counter input{-webkit-appearance:textfield;-moz-appearance:textfield;height:24px;width:calc(100% - 48px);border:1px solid #f1f1f1;outline:none;padding:0 6px;text-align:center}::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-outer-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-outer-spin-button{appearance:none;margin:0}::ng-deep .vx-form-group input[type=text]+.file-list,::ng-deep .vx-form-group .input+.file-list{margin-top:8px}::ng-deep .vx-form-group input[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]:-ms-input-placeholder,::ng-deep .vx-form-group .input:-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]::-ms-input-placeholder,::ng-deep .vx-form-group .input::-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group .classification{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;padding:8px 12px;display:flex;justify-content:space-between}::ng-deep .vx-form-group .classification label{margin:0 4px 0 0;width:100%;position:relative;z-index:1}::ng-deep .vx-form-group .classification label span{display:block;width:100%;height:24px;border:1px solid #f1f1f1;border-radius:2px;line-height:24px;font-size:10px;text-align:center;color:#747576;font-weight:500;position:relative;text-transform:uppercase}::ng-deep .vx-form-group .classification label span:before{height:2px;content:\"\";top:0;right:0;left:0;border-radius:2px;position:absolute;transition:all .2s ease-in-out}::ng-deep .vx-form-group .classification label input{opacity:0;position:absolute;inset:0;margin:0;padding:0;width:100%;height:100%;cursor:pointer;z-index:1}::ng-deep .vx-form-group .classification label input:checked+span{color:#fff}::ng-deep .vx-form-group .classification label input:checked+span:before{bottom:0;height:100%;z-index:-1}::ng-deep .vx-form-group .classification label.low span:before{background:#34aa44}::ng-deep .vx-form-group .classification label.low-med span:before{background:#f2bf19}::ng-deep .vx-form-group .classification label.med-high span:before{background:#f29619}::ng-deep .vx-form-group .classification label.high span:before{background:#eb2424}::ng-deep .vx-form-group .classification label:last-of-type{margin-right:0}::ng-deep .vx-form-group .input{display:flex;align-items:center}::ng-deep .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;padding:8px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:flex;align-items:center;position:relative;justify-content:space-between}::ng-deep .vx-form-group .selected.first-field{z-index:2}::ng-deep .vx-form-group .selected .chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .vx-form-group .selected .chip-container.checkpoints{width:calc(100% - 120px)}::ng-deep .vx-form-group .selected .chip-container span.chip{background:#fff;border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;padding:0 8px;color:#1e5dd3;font-size:12px;display:block;width:auto;max-width:100%;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .vx-form-group .selected .chip-container span.chip.disabled{background:#f1f1f1;box-shadow:none;color:#747576;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .selected .chip-container span.chip i{font-weight:400;margin-right:8px;cursor:pointer;font-size:10px;position:relative;top:1px}::ng-deep .vx-form-group .selected .chip-container span.chip span.step{background:#1e5dd3;border-radius:2px;color:#fff;font-size:9px;line-height:14px;padding:0 4px;font-weight:400;text-align:center;min-width:auto;margin-right:4px}::ng-deep .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question{display:flex;align-items:center;justify-content:space-between;width:100%}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.value{color:#1e5dd3;font-size:12px;font-weight:400;line-height:24px;padding:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 80px)}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.label{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding-left:4px;padding-right:4px;line-height:12px;margin-left:8px}::ng-deep .vx-form-group .selected .chip-container span.value{color:#747576;font-size:13px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 52px);padding:0 4px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text{color:#747576;font-size:10px;font-weight:500;padding:0 8px;width:122px;line-height:14px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first{position:relative;min-width:162px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first:before{background:#f1f1f1;content:\"\";position:absolute;top:0;right:0;height:calc(100% + 12px);width:1px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text .no{color:#1e5dd3}::ng-deep .vx-form-group .selected .chip-container.plus span.chip{max-width:calc(50% - 35px)}::ng-deep .vx-form-group .selected .chip-container.more-one span.chip{max-width:50%}::ng-deep .vx-form-group .selected .chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .vx-form-group .selected .chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:100px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count{border-radius:20px;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .vx-form-group .selected .chip-container .chip-inner i.cross{cursor:pointer;position:relative;top:1px;font-size:8px}::ng-deep .vx-form-group .selected button.count{background:#1e5dd3;border-radius:2px;height:24px;padding:0 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none;color:#fff;font:13px;font-weight:500;line-height:20px;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit{border:none;border-radius:0;background:transparent;outline:none;cursor:pointer;display:block;font-size:11px;font-weight:600;color:#1e5dd3;text-transform:uppercase;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit i{font-weight:400;font-size:8px;margin-right:4px}::ng-deep .vx-form-group .selected button.close-btn{background:transparent;border:none;padding:0;margin-left:8px;font-size:10px;color:#c7381b;display:flex;align-items:center}::ng-deep .vx-form-group .selected .workflow-label{min-width:92px;padding:4px;text-align:center;margin-left:-8px;margin-right:8px;border-right:1px solid #f1f1f1}::ng-deep .vx-form-group .selected .workflow-label p{margin:0;display:block;text-transform:uppercase}::ng-deep .vx-form-group .selected .workflow-label p.title{font-size:9px;line-height:12px;color:#161b2f;font-weight:500}::ng-deep .vx-form-group .selected .workflow-label p.description{font-size:11px;line-height:16px;color:#161b2f;font-weight:600}::ng-deep .vx-form-group .selected .workflow-label+.chip-container{width:calc(100% - 148px)}::ng-deep .vx-form-group .selected+.selected{margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .selected+app-cs-switch.who-toggle label.cs-switch span.value{color:#747576}::ng-deep .vx-form-group .selected+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .selected~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .selected.readOnly{pointer-events:none}::ng-deep .vx-form-group .selected span.chip{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .vx-form-group .select-list{position:absolute;background:#fff;box-shadow:0 0 5px #1e5dd345;top:100%;right:0;left:0;z-index:2}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item{width:100%;padding:12px 16px}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item:hover{background:#f8f8f8}::ng-deep .vx-form-group ::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;line-height:38px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400;border:none;padding:0 12px 0 34px;outline:none}::ng-deep .vx-form-group .date-time-picker .picker-group input:focus,::ng-deep .vx-form-group .date-time-picker .picker-group input:hover{box-shadow:none;border:none}::ng-deep .vx-form-group .date-time-picker .picker-group input::placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input:-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input::-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group i{display:flex;justify-content:center;align-items:center;height:16px;width:12px;position:absolute;left:12px;top:0;color:#747576;font-size:12px;pointer-events:none}::ng-deep .vx-form-group app-cs-radio.main-filed{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;color:#707070}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group app-cs-radio.disabled{pointer-events:none;opacity:.5;filter:grayscale(1);background:#f1f1f1}::ng-deep .vx-form-group .switch-row{display:flex}::ng-deep .vx-form-group .switch-row app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:0;text-transform:uppercase;color:#747576!important}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value i{display:inline-flex;font-size:11px;cursor:pointer;color:#1e5dd3;align-items:center;line-height:16px;margin:0 4px}::ng-deep .vx-form-group .switch-row app-cs-switch+app-cs-switch{margin-left:8px}::ng-deep .vx-form-group .switch-row.align-right{justify-content:flex-end}::ng-deep .vx-form-group .switch-row.align-right label.cs-switch span.value{margin-right:8px}::ng-deep .vx-form-group .risk-type-field{background:#f8f8f8;border:1px solid #dbdbdb;border-radius:4px;height:40px;display:flex;align-items:center;padding:4px;position:relative;z-index:1}::ng-deep .vx-form-group .risk-type-field .type-item{width:50%;position:relative}::ng-deep .vx-form-group .risk-type-field .type-item button{background:transparent;border:none;border-radius:0;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase;width:100%;height:32px;padding:0 12px;text-align:left}::ng-deep .vx-form-group .risk-type-field .type-item button.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item .info{color:#1e5dd3;font-size:12px;position:absolute;top:10px;right:12px;cursor:pointer}::ng-deep .vx-form-group .risk-type-field .type-item .info.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item.active button{color:#1e5dd3!important}::ng-deep .vx-form-group .risk-type-field .type-item:nth-child(2).active~.background-glider{transform:translate(100%)}::ng-deep .vx-form-group .risk-type-field .background-glider{background:#fff;border-radius:4px;box-shadow:0 1px 3px #161b2f26;position:absolute;display:flex;width:212px;height:32px;z-index:-1;transition:.25s ease-out}.left{width:36px;height:36px;margin-top:26px;margin-left:-58px;margin-right:20px;display:flex;justify-content:center;align-items:center;position:relative;z-index:10;border-radius:50%}.left.deadline-completed{margin-top:18px}.left.checked{background:transparent}.left img{width:36px}.left .checkIcon{width:32px;height:32px;background:#fff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}.left .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}.left .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}.right{width:100%}.right span.indicator{position:absolute;top:36px;left:-16px;font-size:12px;color:#f0b819;cursor:pointer}.form-group-row{display:flex;position:relative;transition:all .2s ease-in-out}.form-group-row.disabled{-webkit-user-select:none;user-select:none;pointer-events:none;filter:grayscale(1);z-index:2}.form-group-row.disabled .left{position:relative}.form-group-row.disabled .left:before{content:\"\";position:absolute;inset:2px 0 0 2px;background:#fff;opacity:.7;border-radius:50%;width:32px;height:32px}.form-group-row.disabled .right{opacity:.3}.form-group-row.active{pointer-events:none;filter:grayscale(0);z-index:2;opacity:1}.form-group-row.active .right .vx-form-group input,.form-group-row.active .right .vx-form-group .custom-input,.form-group-row.active .right .vx-form-group .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}.form-group-row.active .right .vx-form-group .selectBoxEnable.disabled{border-color:#dbdbdb;box-shadow:none}::ng-deep .radio-group-selector app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .radio-group-selector app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .radio-group-selector app-cs-radio label.radio-item .radio,::ng-deep .radio-group-selector app-cs-radio label.radio-item .radiomark{position:absolute!important;top:9px;left:12px}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value{font-size:11px!important;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0!important;max-width:100%!important;font-weight:500!important;color:#707070!important}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value i{font-size:12px;color:#1e5dd3}::ng-deep .radio-group-selector app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}::ng-deep .wf-action-list{width:220px}::ng-deep .wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}::ng-deep .wf-action-list ul.action-item{display:block}::ng-deep .wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}::ng-deep .wf-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}::ng-deep .wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .wf-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .wf-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .wf-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .wf-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .wf-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}::ng-deep .wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}p.error-message{font-size:11px;font-weight:400;color:#eb2424;line-height:16px;margin-top:8px;margin-bottom:0}.edit-loader{position:absolute;top:-3px;left:-3px;width:46px;height:46px;transform:rotate(180deg)}.circular-loader{animation:rotate 2s linear infinite;height:100%;transform-origin:center center;width:100%;position:absolute;top:0;left:0;margin:auto}.loader-path{stroke-dasharray:150,200;stroke-dashoffset:-10;animation:dash 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35}to{stroke-dasharray:89,200;stroke-dashoffset:-124}}::ng-deep .dropdown{position:fixed;background:#fff;box-shadow:0 3px 6px #00000029;padding:24px 0;z-index:9;max-height:calc(100vh - 200px);overflow:auto}::ng-deep .dropdown ul.dropdown-list{padding:0 20px;margin:0;display:block}::ng-deep .dropdown ul.dropdown-list li{list-style:none}::ng-deep .dropdown ul.dropdown-list li app-cs-radio{display:flex}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.radio{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.value{padding:11px 12px 11px 32px;width:100%;border:1px solid #bcbcbc;border-radius:4px;margin-left:0;max-width:100%}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item svg{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item input[type=radio]:checked~span.value{background:#e8feeb;border-color:#34aa44}::ng-deep .dropdown ul.dropdown-list li+li{margin-top:8px}app-smiley-dialog{position:relative;z-index:10}app-smiley-dialog-inline{position:absolute;top:-3px;right:0;bottom:0;z-index:999;width:520px;height:calc(100vh + 3px)}::ng-deep .vx-overlay{position:fixed;z-index:3;inset:0}::ng-deep dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}::ng-deep dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}::ng-deep dp-date-picker input:focus{outline:none}::ng-deep dp-date-picker .dp-popup{width:412px;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep dp-date-picker .dp-popup dp-day-calendar,::ng-deep dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep dp-date-picker .dp-popup dp-day-calendar button,::ng-deep dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}::ng-deep dp-date-picker .dp-open+div{position:fixed!important;inset:0!important;display:flex;justify-content:center;align-items:center;z-index:99;pointer-events:none;background:#0000004d}::ng-deep .cdk-overlay-container{z-index:2147483002!important}::ng-deep .dp-popup{z-index:999;display:flex!important;align-items:center;justify-content:center;width:100vw;height:100vh;background:#0000004d!important;box-shadow:unset!important}::ng-deep .dp-popup dp-day-calendar{width:412px!important;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep .dp-popup dp-day-calendar,::ng-deep .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep .dp-popup dp-day-calendar button,::ng-deep .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep .dp-popup dp-day-calendar .dp-weekdays,::ng-deep .dp-popup dp-month-calendar .dp-weekdays,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}@keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}::ng-deep span.file{display:block;width:20px;min-width:20px;border-radius:0 0 2px 2px;border:1px solid transparent;border-color:#747576;position:relative;margin-right:5px;border-top:none;margin-top:5px;background:#fff}::ng-deep span.file.table{margin-right:8px;width:18px;min-width:18px}::ng-deep span.file.table i{font-size:8px}::ng-deep span.file.table .format{height:8px;font-size:7px;line-height:8px;font-weight:400}::ng-deep span.file:before{position:absolute;border-radius:0;top:-4px;right:-1px;content:\"\";height:4px;width:4px;display:block;background:linear-gradient(45deg,#747576 0% 1%,#747576 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file:after{height:4px;left:-1px;right:3px;border-top:1px solid;border-right:none;border-left:1px solid;content:\"\";top:-4px;position:absolute;border-radius:2px 0 0;background:#fff}::ng-deep span.file .format{height:10px;font-size:6px;text-transform:uppercase;background:transparent;font-weight:600;text-align:center;display:block;line-height:10px}::ng-deep span.file i{font-size:10px;height:10px;display:flex;align-items:center;justify-content:center;color:#dbdbdb}::ng-deep span.file.docx{width:22px!important}::ng-deep span.file.pdf,::ng-deep span.file.template{border-color:#f31c39}::ng-deep span.file.pdf:before,::ng-deep span.file.template:before{background:linear-gradient(45deg,#f31c39 0% 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#f31c39\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.pdf:after,::ng-deep span.file.template:after{border-color:#f31c39}::ng-deep span.file.pdf .format,::ng-deep span.file.template .format{color:#f31c39}::ng-deep span.file.xlsx,::ng-deep span.file.xls,::ng-deep span.file.css,::ng-deep span.file.scss,::ng-deep span.file.less{border-color:#34aa44}::ng-deep span.file.xlsx:before,::ng-deep span.file.xls:before,::ng-deep span.file.css:before,::ng-deep span.file.scss:before,::ng-deep span.file.less:before{background:linear-gradient(45deg,#34aa44 0% 1%,#34aa44 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.xlsx:after,::ng-deep span.file.xls:after,::ng-deep span.file.css:after,::ng-deep span.file.scss:after,::ng-deep span.file.less:after{border-color:#34aa44;color:#34aa44}::ng-deep span.file.xlsx .format,::ng-deep span.file.xls .format,::ng-deep span.file.css .format,::ng-deep span.file.scss .format,::ng-deep span.file.less .format{color:#34aa44}::ng-deep span.file.doc,::ng-deep span.file.docx,::ng-deep span.file.psd{border-color:#1e5dd3}::ng-deep span.file.doc:before,::ng-deep span.file.docx:before,::ng-deep span.file.psd:before{background:linear-gradient(45deg,#1e5dd3 0% 1%,#1e5dd3 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.doc:after,::ng-deep span.file.docx:after,::ng-deep span.file.psd:after{border-color:#1e5dd3}::ng-deep span.file.doc .format,::ng-deep span.file.docx .format,::ng-deep span.file.psd .format{color:#1e5dd3}::ng-deep span.file.ppt,::ng-deep span.file.ai,::ng-deep span.file.html,::ng-deep span.file.jpg,::ng-deep span.file.jpeg,::ng-deep span.file.png{border-color:#f6882f}::ng-deep span.file.ppt:before,::ng-deep span.file.ai:before,::ng-deep span.file.html:before,::ng-deep span.file.jpg:before,::ng-deep span.file.jpeg:before,::ng-deep span.file.png:before{background:linear-gradient(45deg,#f6882f 0% 1%,#f6882f 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.ppt:after,::ng-deep span.file.ai:after,::ng-deep span.file.html:after,::ng-deep span.file.jpg:after,::ng-deep span.file.jpeg:after,::ng-deep span.file.png:after{border-color:#f6882f}::ng-deep span.file.ppt .format,::ng-deep span.file.ai .format,::ng-deep span.file.html .format,::ng-deep span.file.jpg .format,::ng-deep span.file.jpeg .format,::ng-deep span.file.png .format{color:#f6882f}::ng-deep span.file.php{border-color:#7aa6f7}::ng-deep span.file.php:before{background:linear-gradient(45deg,#7aa6f7 0% 1%,#7aa6f7 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.php:after{border-color:#7aa6f7}::ng-deep span.file.php .format{color:#7aa6f7}::ng-deep ngx-material-timepicker-container .timepicker-backdrop-overlay{background-color:#0000000d!important;z-index:9999999999!important}::ng-deep ngx-material-timepicker-container .timepicker-overlay{z-index:9999999999!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker{width:232px!important;border-radius:2px!important;box-shadow:0 4px 30px #161b2f26!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header{background-color:#fff!important;padding:0!important;border-radius:2px 2px 0 0}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container{display:block!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time{color:#000!important;width:150px!important;margin:0 auto;line-height:60px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control{font-size:40px;background-color:transparent!important;color:#000!important;font-weight:600;text-align:right;caret-color:transparent;outline:none;font-family:Poppins;line-height:56px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:focus,::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:hover{background-color:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control:last-of-type .timepicker-dial__control{text-align:left}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time span{padding:0 8px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period{display:flex!important;width:182px;margin:0 auto!important;background:#f1f1f1;padding:4px 10px;border-radius:20px;position:relative}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period:before{background:#f1f1f1;content:\"\";position:absolute;top:15px;left:-25px;width:calc(100% + 50px);height:2px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period{flex-direction:unset!important;position:relative;z-index:1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:after{content:\"\";position:absolute;right:-12px;top:0;border-left:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:before{content:\"\";position:absolute;left:-18px;top:0;border-right:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button{font-size:11px;background-color:transparent;padding:0;border-radius:20px;color:#747576;font-weight:600;font-family:Poppins;width:84px;height:24px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button.timepicker-dial__item_active{background:#fff!important;color:#1e5dd3!important;box-shadow:0 1px 2px #dbdbdb}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button+button{margin-left:0!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face{width:200px!important;height:200px!important;padding:10px!important;background:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer{height:92px!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span{color:#000}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span.active{color:#fff}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand{height:80px!important;top:calc(50% - 80px)!important;background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number>span.active{background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand_minute:before{border:4px solid #1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions{display:flex!important;padding:10px 0 0!important;background:#fff!important;justify-content:space-around!important;border-radius:0 0 2px 2px!important;overflow:hidden}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div:first-child ngx-material-timepicker-button button.timepicker-button{background:#f8f8f8;color:#1e5dd3}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button{line-height:28px!important;width:100%;background:#1e5dd3;color:#fff;border-radius:0!important;height:32px!important;width:116px!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button span{font-weight:500!important;font-size:11px;font-family:Poppins}::ng-deep vcomply-editor{display:block}::ng-deep vcomply-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep vcomply-editor .editor-container:hover,::ng-deep vcomply-editor .editor-container:focus-within{border:1px solid #1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep vcomply-editor .editor-container mention-list ul li a{font-size:16px!important}::ng-deep vcomply-editor .editor-container .editable-block{background:#fff;min-height:60px;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep vcomply-editor .editor-container .editable-block:before{color:#747576!important}::ng-deep vcomply-editor .editor-container .editor-tools{border-top:1px solid #dbdbdb;border-radius:0 0 3px 3px}::ng-deep vcomply-editor .editor-container .editor-tools:hover{border-color:#1e5dd3}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep marx-modal .popup-modal-background{background-color:#161b2fcc!important}::ng-deep .within-box{background:#f1f1f1;border-radius:.125rem;color:#042e7d}::ng-deep .within-value{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-word}.wf-tooltip{pointer-events:none;position:absolute;max-width:300px;font-size:12px;text-align:left;color:#fff;padding:8px 12px;background:#000;border-radius:2px;z-index:-222;top:0;opacity:0;white-space:break-spaces;word-break:break-word}.wf-tooltip *{color:#fff!important}.wf-tooltip:empty{display:none!important}.wf-tooltip.white{box-shadow:0 2px 8px #1c5bd159;color:#747576;background:#fff;text-align:left}.wf-tooltip.white b{color:#747576!important}.wf-tooltip.animate-top{animation:animate-top .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-right{animation:animate-right .3s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-bottom{animation:animate-bottom .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-left{animation:animate-left .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip-top:after{top:100%;left:50%;margin-left:-5px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip-bottom:after{bottom:100%;left:50%;margin-left:-5px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-left.white:after{border-color:transparent transparent transparent #f1f1f1}.wf-tooltip-left:after{top:50%;left:100%;margin-top:-5px;border-width:5px;border-color:transparent transparent transparent #000000}.wf-tooltip-right.white:after{border-color:transparent #f1f1f1 transparent transparent}.wf-tooltip-right:after{top:50%;right:100%;margin-top:-5px;border-width:5px;border-color:transparent #000000 transparent transparent}.wf-tooltip-bottom-right:after{bottom:100%;left:100%;margin-left:-20px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom-right.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-bottom-left:after{bottom:100%;left:0;margin-left:10px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom-left.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-top-left:after{top:100%;left:0;margin-left:10px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top-left.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip-top-right:after{top:100%;left:100%;margin-left:-5px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top-right.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip:after{content:\"\";position:absolute;border-style:solid}.wf-tooltip span.within{font-size:80%;display:block;width:100%}.wf-tooltip .small{display:block;font-size:10px}.wf-tooltip .within-box{background:#f1f1f1;border-radius:2px;color:#042e7d!important;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 2px;margin-right:2px}.wf-tooltip-show{pointer-events:none;opacity:1;z-index:2147483001}\n"], dependencies: [{ kind: "directive", type: i1$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.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value", "oneLine"], outputs: ["checkedEvent"] }, { kind: "directive", type: ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: SnackBarComponent, selector: "app-snack-bar" }, { kind: "component", type: GrcObjectContainerComponent, selector: "lib-grc-object-container", inputs: ["grcType", "MODE", "ID"], outputs: ["populateOption", "pickerChanged", "closeWorkflow", "disconnectRefresh", "resetForm", "hideElementsFromMoreOptions"] }, { kind: "component", type: WorkflowCaseComponent, selector: "app-workflow-case", inputs: ["openedFrom", "source", "caseId", "mode", "workflowType", "responsibilityData", "assessmentQuestion", "caseTypePermission"], outputs: ["closeWorkflow", "populateOption", "caseReportedBy", "userListEmitter", "disconnectRefresh", "pickerChanged"] }, { kind: "component", type: WorkflowRiskComponent, selector: "app-workflow-risk", inputs: ["feature", "mode", "riskId", "defaultRiskType", "moveToRegisterMode", "secondaryOpenPortal", "openedFrom"], outputs: ["showConfirmationAlert", "pickerChanged", "populateOption", "closeWorkflow", "disconnectRefresh", "refreshForm", "hideElementsFromMoreOptions", "rcSelected"] }, { kind: "component", type: WorkflowComplianceComponent, selector: "app-workflow-compliance", inputs: ["mode", "responsibilityId", "frameworkDetails", "isEntrust", "feature", "assessmentDetails", "isDuplicate", "closeOnEsc", "orgDetails", "openedFrom", "selectedRC", "selectedProgram", "responsibilityDetails"], outputs: ["pickerChanged", "populateOption", "hideElementsFromMoreOptions", "closeWorkflow", "resetForm", "disconnectRefresh", "checkpointCountUpdated", "rcSelected", "onRemovingCheckpoint", "isAssessmentDisabled", "assigneeTypeChange", "onReviewerTypeChange"] }, { kind: "component", type: WorkflowPolicyComponent, selector: "app-workflow-policy", inputs: ["mode", "policyId", "feature", "convertFileData", "selectedCategory", "isSendForAttestation", "templateId"], outputs: ["pickerChanged", "showConfirmationAlert", "populateOption", "disconnectRefresh", "shiftToEditMode"] }, { kind: "component", type: MoreOptionComponent, selector: "app-more-option", inputs: ["currentWorkflow", "openedFrom", "isEditMode", "isRCSelected", "isProgramSelected", "allowedFeature", "orgDetailsData", "isAttributesAvailable"], outputs: ["selectedOption"] }, { kind: "component", type: AddMultipleRiskComponent, selector: "app-add-multiple-risk", inputs: ["feature"], outputs: ["pickerChanged", "populateOption", "closeWorkflow", "disconnectRefresh"] }, { kind: "component", type: ConfirmationAlertComponent, selector: "app-confirmation-alert", inputs: ["message", "config"], outputs: ["action"] }, { kind: "component", type: WorkflowSurveyFormComponent, selector: "app-workflow-survey-form" }, { kind: "component", type: LogAnIssueComponent, selector: "app-log-an-issue", inputs: ["openedFrom", "source", "issueId", "reponsibilityData", "assessmentQuestion", "issueDetails", "mode", "config", "responsibilitiesData"], outputs: ["pickerChanged", "populateOption", "closeWorkflow", "modeChange", "disconnectRefresh"] }, { kind: "component", type: WorkflowAssessmentComponent, selector: "app-workflow-assessment", inputs: ["mode", "assessmentId", "openedFrom"], outputs: ["disconnectRefresh", "pickerChanged", "closeWorkflow"] }, { kind: "component", type: ImportAnAssessmentComponent, selector: "app-import-an-assessment", outputs: ["closeWorkflow", "disconnectRefresh"] }, { kind: "component", type: AssessmentListComponent, selector: "app-assessment-list", inputs: ["isEdit", "mode", "selectedAssessment", "selectedAssessmentData", "program_ids", "isFullScreen"], outputs: ["onAssessmentSelect", "cancelAssessment"] }, { kind: "component", type: WorkflowProgramComponent, selector: "app-workflow-program", inputs: ["canFrameworkChange", "mode", "programId", "programType", "allowedFeature", "addToProgramDetails", "orgDetails", "programDetails"], outputs: ["pickerChanged", "populateOption", "closeWorkflow", "showConfirmationAlert", "disconnectRefresh", "refreshForm", "hideElementsFromMoreOptions", "onRemovingRole", "disableElementsFromMoreOptions"] }, { kind: "component", type: AddMultipleResponsibilityContainerComponent, selector: "lib-add-multiple-responsibility-container", inputs: ["feature", "orgDetails"], outputs: ["closeWorkflow"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: UserPipe, name: "userPipe" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WorkflowEngineContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-vcomply-workflow-engine-container', template: "<app-snack-bar></app-snack-bar>\n<div class=\"workflow-engine-overlay\"></div>\n\n<app-assessment-list *ngIf=\"workflowType === 'ASSESSMENT'\" (cancelAssessment)=\"closeWorkflowEngine()\" [isEdit]=\"true\"\n  [isFullScreen]=\"true\" [selectedAssessment]=\"selectedAssessment\"\n  (onAssessmentSelect)=\"closeWorkflowEngine({ evt: $event, confirm: false })\"></app-assessment-list>\n<div *ngIf=\"workflowType !== 'ASSESSMENT'\" class=\"workflow-engine\" [class.animate]=\"animation\" [class.bg]=\"\n    (!isWorkflowSelectorEnabled || riskBulkUpload?.showCategoryList) &&\n    !policy?.showCreateDocuments\n  \">\n  <div class=\"workflow-engine-container\" [ngSwitch]=\"currentWorkflow?.code\"\n    [class.with-preview-assessment]=\"(auth?.previewPanel | async) === true\" [class.with-frequency]=\"\n      compliance?.activeSelector === 'frequency' ||\n      compliance?.activeSelector === 'reviewerFrequency' ||\n      riskComponent?.activeSelector === 'frequency' ||\n      policy?.activeSelector === 'frequency' ||\n      policy?.activeSelector === 'reviewerFrequency'\n    \">\n    <button (click)=\"closeWorkflowEngine()\" id=\"close-workflow-engine-btn\" class=\"close\" [appTooltip]=\"'[Esc] to close'\"\n      placement=\"left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\" [class.disabled]=\"\n        confirmationAlertConfig?.isVisible || !isWorkflowSelectorEnabled\n      \" [class.smiley-opened]=\"\n        riskComponent?.showSmiley ||\n        logIssueComponent?.showSmiley ||\n        compliance?.showSmiley ||\n        policy?.showCreateDocuments ||\n        responsibilityBulkUpload?.showSmiley ||\n        responsibilityBulkUpload?.showExcel ||\n        riskBulkUpload?.showSmiley ||\n        riskBulkUpload?.showExcel ||\n        program?.showSmiley ||\n        importAnAssessment?.showSmiley\n      \">\n      <i class=\"icons\">&#xe93f;</i>\n    </button>\n    <div *ngIf=\"!uiKitService.isSmileyOn\" class=\"workflow-engine-more\"\n      [hidden]=\"showMoreOption === false || policy?.showCreateDocuments\"\n      [class.disabled]=\"confirmationAlertConfig?.isVisible\" [class.read-only]=\"uiKitService?.isLoader\">\n      <app-more-option #moreOption [currentWorkflow]=\"currentWorkflow?.code\" [isEditMode]=\"mode === 'EDIT'\"\n        [isRCSelected]=\"\n          isRCSelected ||\n          (currentWorkflow?.code === 'GRC' &&\n            grcObject?.listObject.RC.selectedData?.length > 0)\n        \" [openedFrom]=\"openedFrom\" (selectedOption)=\"addMoreInfo($event)\" [isProgramSelected]=\"selectedProgram\"\n        [allowedFeature]=\"feature\" [orgDetailsData]=\"orgDetails\" [isAttributesAvailable]=\"\n          currentWorkflow?.code === 'GRC' &&\n          grcObject?.selectedAttributes?.attributes?.length > 0\n        \">\n      </app-more-option>\n    </div>\n    <div class=\"workflow-engine-form\" [class.disabled]=\"confirmationAlertConfig?.isVisible\" [class.no-shadow]=\"\n        currentWorkflow?.code == 'AMR' ||\n        currentWorkflow?.code == 'CMR' ||\n        currentWorkflow?.code == 'AAA' ||\n        uiKitService.isSmileyOn ||\n        policy?.showCreateDocuments\n      \">\n      <div class=\"container\" (scroll)=\"scrollForm()\">\n        <ng-container *ngIf=\"\n            !['VIEW_AUDIT_EXECUTION_SUMMARY', 'EXECUTE_AUDIT_PLAN'].includes(\n              openedFrom\n            )\n          \">\n          <div *ngIf=\"!(uiKitService.isSmileyOn || policy?.showCreateDocuments)\" class=\"form-group-row\" #dropdownRow\n            [class.disabled]=\"\n              (mode === 'EDIT' ||\n                !isWorkflowSelectorEnabled ||\n                disableWorkflowChange ||\n                selectedProgram) &&\n              currentWorkflow?.code !== 'ACTW'\n            \">\n            <div class=\"left\" [class.checked]=\"currentWorkflow\">\n              <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n              </svg>\n            </div>\n            <div class=\"right\">\n              <div class=\"vx-form-group\" #dropdown>\n                <label *ngIf=\"currentWorkflow?.code !== 'ACTW'\" class=\"vx-control-panel\">Select a Workflow<span\n                    class=\"required\">*</span></label>\n                <label *ngIf=\"currentWorkflow?.code === 'ACTW'\" class=\"vx-control-panel\">Assign a Case to Workflow<span\n                    class=\"required\">*</span></label>\n                <div class=\"select\" *ngIf=\"!currentWorkflow && currentWorkflow?.code !== 'ACTW'\"\n                  (click)=\"editWorkflow()\">\n                  <input type=\"text\" placeholder=\"Select a Workflow\" readonly />\n                </div>\n                <div class=\"selected first-field\" *ngIf=\"currentWorkflow\">\n                  <!-- {{currentWorkflow | json}} -->\n                  <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-mr-2\">\n                    <span class=\"chipName vx-fs-11 vx-label-txt no-width\" [appTooltip]=\"currentWorkflow?.workflowName\"\n                      placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\" [innerHTML]=\"\n                        workflowType === 'ACTW'\n                          ? '<strong>Case Reported By: </strong>' +\n                            (reportBy | userPipe : userList)?.member_name\n                          : currentWorkflow?.workflowName\n                      \">\n                    </span>\n                  </div>\n                  <!-- <div class=\"chip-container\">\n                                    <span class=\"chip\" [class.disabled]=\"false\">{{currentWorkflow?.workflowName}}</span>\n                                </div> -->\n                  <button class=\"edit\" type=\"button\" (click)=\"editWorkflow()\" *ngIf=\"\n                      !workflowList &&\n                      openedFrom != 'ASSESSMENT' &&\n                      currentWorkflow?.code !== 'ACTW'\n                    \">\n                    <i class=\"icons\">&#xe9ba;</i> Edit\n                  </button>\n                </div>\n                <div *ngIf=\"\n                    currentWorkflow?.code === 'CAPR' &&\n                    currentBusinessCycle &&\n                    !programSimplifyFlag\n                  \"\n                  class=\"program-business-cycle vx-fs-11 vx-txt-white vx-d-flex vx-align-center vx-pt-2 vx-pb-1 vx-pl-2 vx-pr-1\">\n                  <i class=\"icons vx-fs-12 vx-mr-1\">&#xe963;</i> This program is\n                  being set-up for the business cycle:\n                  <span class=\"vx-fw-600 vx-ml-1\">{{\n                    currentBusinessCycle\n                    }}</span>\n                </div>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n        <!-- <app-create-documents></app-create-documents> -->\n        <!-- <app-bulk-view></app-bulk-view> -->\n        <!-- <app-bulk-responsibility-view></app-bulk-responsibility-view> -->\n        <app-workflow-compliance (disconnectRefresh)=\"isHostRefreshActive = $event\" [orgDetails]=\"orgDetails\"\n          [isEntrust]=\"entrustButtonName.toLowerCase() == 'entrust'\" [responsibilityId]=\"id\" [mode]=\"mode\"\n          [frameworkDetails]=\"frameworkDetails\" [assessmentDetails]=\"assessmentDetails\"\n          (closeWorkflow)=\"closeWorkflowEngine($event)\" *ngSwitchCase=\"'CAR'\" #responsibility\n          (pickerChanged)=\"decideViewMoreOption($event)\" (populateOption)=\"populateMoreOption($event)\"\n          (hideElementsFromMoreOptions)=\"hideElementsFromMoreOptions($event)\" [selectedRC]=\"selectedRC\"\n          [closeOnEsc]=\"closeOnEsc\" (assigneeTypeChange)=\"assigneeTypeChange($event)\"\n          (onReviewerTypeChange)=\"onReviewerChange($event)\" [feature]=\"feature\" [openedFrom]=\"openedFrom\"\n          (rcSelected)=\"onRcSelected($event)\" (resetForm)=\"onResetForm()\"\n          (onRemovingCheckpoint)=\"onRemovingCheckpoint($event, false, true)\"\n          (isAssessmentDisabled)=\"isAssessmentDisabled($event)\" (checkpointCountUpdated)=\"checkpointCount = $event\"\n          [selectedProgram]=\"selectedProgram\" [responsibilityDetails]=\"workflowDetails\"\n          [customFields]=\"customFields\"></app-workflow-compliance>\n        <app-workflow-risk [secondaryOpenPortal]=\"secondaryOpenPortal\" [openedFrom]=\"openedFrom\"\n          (disconnectRefresh)=\"isHostRefreshActive = $event\" *ngSwitchCase=\"'AAR'\" #risk\n          (showConfirmationAlert)=\"showConfirmationPopup($event)\"\n          (hideElementsFromMoreOptions)=\"hideElementsFromMoreOptions($event)\"\n          (closeWorkflow)=\"closeWorkflowEngine($event)\" (pickerChanged)=\"decideViewMoreOption($event)\"\n          (populateOption)=\"populateMoreOption($event)\" (refreshForm)=\"onResetForm()\"\n          (rcSelected)=\"onRcSelected($event)\" [mode]=\"mode\" [riskId]=\"id\" [feature]=\"feature\"></app-workflow-risk>\n        <app-workflow-policy (disconnectRefresh)=\"isHostRefreshActive = $event\" *ngSwitchCase=\"'CAP'\" #policy\n          (showConfirmationAlert)=\"showConfirmationPopup($event)\" (shiftToEditMode)=\"shiftToEditMode()\"\n          [feature]=\"feature\" [policyId]=\"id\" [mode]=\"mode\" [templateId]=\"templateId\"\n          [convertFileData]=\"convertFileData\" [selectedCategory]=\"selectedCategory\"\n          [isSendForAttestation]=\"isSendForAttestation\" (populateOption)=\"populateMoreOption($event)\"\n          (pickerChanged)=\"decideViewMoreOption($event)\"></app-workflow-policy>\n        <app-workflow-survey-form *ngSwitchCase=\"'CAS'\" #surveyForm></app-workflow-survey-form>\n        <app-add-multiple-risk (disconnectRefresh)=\"isHostRefreshActive = $event\" *ngSwitchCase=\"'AMR'\" #multipleRisk\n          (pickerChanged)=\"decideViewMoreOption($event)\" (closeWorkflow)=\"closeWorkflowEngine($event)\"\n          [feature]=\"feature\"></app-add-multiple-risk>\n        <!-- <app-add-multiple-responsibility  (disconnectRefresh)=\"isHostRefreshActive = $event\"    (closeWorkflow)=\"closeWorkflowEngine($event)\" *ngSwitchCase=\"'CMR'\" #multipleResponsibility>\n                </app-add-multiple-responsibility> -->\n\n        <lib-add-multiple-responsibility-container [orgDetails]=\"orgDetails\"\n          (disconnectRefresh)=\"isHostRefreshActive = $event\" (closeWorkflow)=\"closeWorkflowEngine($event)\"\n          *ngSwitchCase=\"'CMR'\" [feature]=\"feature\" #multipleResponsibility></lib-add-multiple-responsibility-container>\n        <!-- New Log an Issue -->\n        <app-log-an-issue [issueDetails]=\"issueData\" *ngSwitchCase=\"'LAI'\" [reponsibilityData]=\"reponsibilityData\"\n          [assessmentQuestion]=\"assessmentQuestion\" [openedFrom]=\"openedFrom\" [source]=\"source\" [issueId]=\"id\"\n          #logAnIssue (disconnectRefresh)=\"isHostRefreshActive = $event\" (closeWorkflow)=\"closeWorkflowEngine($event)\"\n          (pickerChanged)=\"decideViewMoreOption($event)\" (populateOption)=\"populateMoreOption($event)\" [(mode)]=\"mode\">\n        </app-log-an-issue>\n        <!-- Old Log an issue -->\n        <!-- <app-log-an-issue *ngSwitchCase=\"'LAI'\" [responsibilitiesData]=\"reponsibiltyData\" [openedFrom]=\"openedFrom\"\n                #logAnIssue (closeWorkflow)=\"closeWorkflowEngine($event)\"\n                (pickerChanged)=\"decideViewMoreOption($event)\" (populateOption)=\"populateMoreOption($event)\">\n            </app-log-an-issue> -->\n\n        <app-workflow-assessment [assessmentId]=\"id\" (pickerChanged)=\"decideViewMoreOption($event)\"\n          [openedFrom]=\"openedFrom\" (disconnectRefresh)=\"isHostRefreshActive = $event\" *ngSwitchCase=\"'AAA'\"\n          (showConfirmationAlert)=\"showConfirmationPopup($event)\" (closeWorkflow)=\"closeWorkflowEngine($event)\"\n          (pickerChanged)=\"decideViewMoreOption($event)\" (populateOption)=\"populateMoreOption($event)\"\n          (refreshForm)=\"onResetForm()\" [mode]=\"mode\" #assessment></app-workflow-assessment>\n        <app-import-an-assessment (pickerChanged)=\"decideViewMoreOption($event)\"\n          (disconnectRefresh)=\"isHostRefreshActive = $event\" *ngSwitchCase=\"'IAA'\"\n          (showConfirmationAlert)=\"showConfirmationPopup($event)\" (closeWorkflow)=\"closeWorkflowEngine($event)\"\n          (pickerChanged)=\"decideViewMoreOption($event)\" (populateOption)=\"populateMoreOption($event)\"\n          (refreshForm)=\"onResetForm()\" #importAssessment></app-import-an-assessment>\n        <!-- <app-workflow-program #program *ngSwitchCase=\"'CAPR'\" (pickerChanged)=\"decideViewMoreOption($event)\" (disconnectRefresh)=\"isHostRefreshActive = $event\"></app-workflow-program> -->\n        <app-workflow-program #program *ngSwitchCase=\"'CAPR'\" [orgDetails]=\"orgDetails\" [allowedFeature]=\"feature\"\n          (disableElementsFromMoreOptions)=\"disableMoreOptions('CAPR', $event)\" [programType]=\"programType\"\n          (pickerChanged)=\"decideViewMoreOption($event)\" (disconnectRefresh)=\"isHostRefreshActive = $event\"\n          (showConfirmationAlert)=\"showConfirmationPopup($event)\" (closeWorkflow)=\"closeWorkflowEngine($event)\"\n          (pickerChanged)=\"decideViewMoreOption($event)\" (populateOption)=\"populateMoreOption($event)\"\n          (refreshForm)=\"onResetForm()\" [mode]=\"mode\" [programId]=\"id\" [programDetails]=\"workflowDetails\"\n          (onRemovingRole)=\"onRemovingRole($event)\" [canFrameworkChange]=\"canFrameworkChange\"\n          [addToProgramDetails]=\"addToProgramDetails\"></app-workflow-program>\n\n        <!-- GRC Object -->\n        <lib-grc-object-container #grcObject *ngSwitchCase=\"'GRC'\" [grcType]=\"grcType\" [MODE]=\"mode\" [ID]=\"id\"\n          (pickerChanged)=\"decideViewMoreOption($event)\" (populateOption)=\"populateMoreOption($event)\"\n          (closeWorkflow)=\"closeWorkflowEngine($event)\" (resetForm)=\"onResetGRCForm()\"\n          (disconnectRefresh)=\"isHostRefreshActive = $event\"\n          (hideElementsFromMoreOptions)=\"hideElementsFromMoreOptions($event)\"></lib-grc-object-container>\n\n        <!-- Report a Case -->\n        <app-workflow-case *ngSwitchCase=\"'RAC'\" #reportCase [openedFrom]=\"openedFrom\" [source]=\"source\" [caseId]=\"id\"\n          [mode]=\"mode\" [responsibilityData]=\"reponsibilityData\" [assessmentQuestion]=\"assessmentQuestion\"\n          [caseTypePermission]=\"caseTypePermission\" [workflowType]=\"'RAC'\"\n          (disconnectRefresh)=\"isHostRefreshActive = $event\" (populateOption)=\"populateMoreOption($event)\"\n          (closeWorkflow)=\"closeWorkflowEngine($event)\"\n          (pickerChanged)=\"decideViewMoreOption($event)\"></app-workflow-case>\n        <!-- Assign case to workflow -->\n        <app-workflow-case *ngSwitchCase=\"'ACTW'\" #reportCase [openedFrom]=\"openedFrom\" [source]=\"source\" [caseId]=\"id\"\n          [mode]=\"mode\" [workflowType]=\"'ACTW'\" [responsibilityData]=\"reponsibilityData\"\n          [assessmentQuestion]=\"assessmentQuestion\" [caseTypePermission]=\"caseTypePermission\"\n          (disconnectRefresh)=\"isHostRefreshActive = $event\" (populateOption)=\"populateMoreOption($event)\"\n          (caseReportedBy)=\"caseReportedBy($event)\" (userListEmitter)=\"userListEmitter($event)\"\n          (closeWorkflow)=\"closeWorkflowEngine($event)\"\n          (pickerChanged)=\"decideViewMoreOption($event)\"></app-workflow-case>\n      </div>\n      <div *ngIf=\"['RAC', 'ACTW'].includes(currentWorkflow?.code)\" class=\"vx-d-flex\">\n        <button class=\"cancel\" [class.disabled]=\"!isWorkflowSelectorEnabled\" (click)=\"closeWorkflowEngine()\">\n          CANCEL\n        </button>\n        <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled\" (click)=\"submit()\">\n          {{\n          mode === \"EDIT\" && currentWorkflow?.code === \"RAC\"\n          ? \"Update\"\n          : \"Report\"\n          }}\n        </button>\n      </div>\n      <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled\" *ngSwitchCase=\"'AAR'\" (click)=\"submit()\">\n        {{\n        mode === \"EDIT\" && openedFrom !== \"MOVE_TO_REGISTER\"\n        ? \"Update\"\n        : \"Add\"\n        }}\n      </button>\n      <button class=\"submit\" [class.disabled]=\"\n          !isWorkflowSelectorEnabled ||\n          !riskBulkUpload?.category?.selectedCategory\n        \" (click)=\"bulkUploadBrowse('AMR')\" *ngSwitchCase=\"'AMR'\">\n        Browse\n      </button>\n      <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled\" (click)=\"bulkUploadBrowse('CMR')\"\n        *ngSwitchCase=\"'CMR'\">\n        Browse\n      </button>\n\n      <!-- This has ternary operation to handle the both scenarios of how it works with compliance and program module, please don't change this. -->\n      <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled\" (click)=\"submit()\" *ngSwitchCase=\"'CAR'\">\n        {{\n        entrustButtonName !== \"\" && mode !== \"EDIT\"\n        ? entrustButtonName\n        : mode === \"EDIT\" && !workflowDetails?.duplicate\n        ? \"UPDATE\"\n        : \"Entrust\"\n        }}\n      </button>\n      <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled\" (click)=\"submit()\" *ngSwitchCase=\"'CAP'\">\n        {{\n        mode == \"EDIT\"\n        ? isSendForAttestation\n        ? \"Send for attestation\"\n        : \"Update\"\n        : \"Continue to draft\"\n        }}\n      </button>\n      <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled\" *ngSwitchCase=\"'CAS'\">\n        Continue to draft\n      </button>\n      <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled\" *ngSwitchCase=\"'LAI'\" (click)=\"submit()\">\n        {{ mode === \"EDIT\" ? \"Update\" : \"Add\" }}\n      </button>\n      <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled\" *ngSwitchCase=\"'AAA'\" (click)=\"submit()\">\n        {{ mode === \"EDIT\" ? \"Update\" : \"Continue to draft\" }}\n      </button>\n      <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled\" (click)=\"bulkUploadBrowse('IAA')\"\n        *ngSwitchCase=\"'IAA'\">\n        Browse\n      </button>\n      <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled || !program?.valid\" (click)=\"submit('CAPR')\"\n        *ngSwitchCase=\"'CAPR'\">\n        {{ mode === \"EDIT\" ? \"Update\" : \"Save\" }}\n      </button>\n      <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled || !program?.valid\" (click)=\"submit('CAPR')\"\n        *ngSwitchCase=\"'CAPR'\">\n        {{ mode === \"EDIT\" ? \"Update\" : \"Save\" }}\n      </button>\n      <button class=\"submit\" (click)=\"submit()\" *ngSwitchCase=\"'GRC'\">\n        {{ mode === \"EDIT\" ? \"Update\" : \"Save\" }}\n      </button>\n      <div class=\"dropdown\" *ngIf=\"workflowList\" (click)=\"closeWorkflowList()\" [style.top.px]=\"dropdownTop\"\n        [style.left.px]=\"dropdownLeft\" [style.width.px]=\"dropdownWidth\">\n        <ul class=\"dropdown-list\">\n          <li *ngFor=\"let workflow of workflowTypeList\" (click)=\"changeWorkflow($event, workflow)\">\n            <app-cs-radio *ngIf=\"workflow?.code !== 'ACTW'\" [value]=\"workflow?.code\"\n              [checked]=\"currentWorkflow?.code === workflow?.code\">\n              {{ workflow?.workflowName }}</app-cs-radio>\n          </li>\n        </ul>\n      </div>\n      <div class=\"dropdown-overlay\" *ngIf=\"workflowList\" (click)=\"closeWorkflowList()\"></div>\n    </div>\n    <app-confirmation-alert id=\"confirmation-dialogue\" (action)=\"confirmWorkflowChange($event)\"\n      *ngIf=\"confirmationAlertConfig?.isVisible\" [message]=\"confirmationAlertConfig?.message\"\n      [config]=\"confirmationAlertConfig\"></app-confirmation-alert>\n  </div>\n</div>", styles: ["@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/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.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/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";.dropdown-overlay{position:fixed;inset:0;z-index:2}.workflow-engine{background:#161b2fcc;position:fixed;inset:0;z-index:9}.workflow-engine button.close{position:absolute;background:transparent;cursor:pointer;border:none;font-size:16px;color:#000;top:8px;right:7px;z-index:12;display:flex;align-items:center;justify-content:center;border-radius:2px;padding:8px}.workflow-engine button.close.bulk-opened,.workflow-engine button.close.smiley-opened{z-index:10}.workflow-engine button.close:hover{background:#f1f1f1}.workflow-engine button.close.disabled{pointer-events:none;opacity:.3;filter:grayscale(1)}.workflow-engine-container{position:fixed;top:0;right:0;bottom:0;background:#fff;display:flex;z-index:10;border-top:3px solid #1E5DD3}.workflow-engine-container:before{content:\"\";height:30px;position:absolute;top:0;right:0;width:499px;z-index:11;background:linear-gradient(to bottom,#fff,#ffffffbf 66%,#ffffff6b 81%,#fff0);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#ffffff\",endColorstr=\"#00ffffff\",GradientType=0)}@media screen and (max-width: 1280px){.workflow-engine-container.with-frequency:before{display:none}.workflow-engine-container.with-frequency button.close{display:none}.workflow-engine-container.with-frequency .workflow-engine-form{right:-470px}.workflow-engine-container.with-frequency .workflow-engine-form .container ::ng-deep app-workflow-compliance .workflw-compliance{filter:grayscale(1)!important;pointer-events:none!important}.workflow-engine-container.with-frequency .workflow-engine-form .container ::ng-deep app-workflow-risk .workflw-risk{filter:grayscale(1)!important;pointer-events:none!important}.workflow-engine-container.with-frequency .workflow-engine-form .container ::ng-deep app-workflow-policy .workflow-policy{filter:grayscale(1)!important;pointer-events:none!important}.workflow-engine-container.with-frequency .workflow-engine-form button.submit{filter:grayscale(1)!important;pointer-events:none!important}}.workflow-engine-container.with-preview-assessment:before{display:none}.workflow-engine-container.with-preview-assessment button.close{display:none}.workflow-engine-container.with-preview-assessment .workflow-engine-form{right:-470px}.workflow-engine-container.with-preview-assessment .workflow-engine-form .container ::ng-deep app-workflow-compliance .workflw-compliance{filter:grayscale(1)!important;pointer-events:none!important}.workflow-engine-container.with-preview-assessment .workflow-engine-form button.submit{filter:grayscale(1)!important;pointer-events:none!important}.workflow-engine-more{width:318px;padding:36px 22px 36px 40px;height:100vh;overflow:auto;margin-left:-18px;scrollbar-width:none}@media screen and (max-height: 900px){.workflow-engine-more{padding:20px 22px 36px 40px}}.workflow-engine-more::-webkit-scrollbar-track{background-color:#f1f1f1;position:absolute}.workflow-engine-more::-webkit-scrollbar{width:1px;height:1px;background-color:transparent;position:absolute}.workflow-engine-more::-webkit-scrollbar-thumb{border-radius:1px;background-color:#dbdbdb;position:absolute}.workflow-engine-more.disabled{filter:grayscale(1);pointer-events:none}.workflow-engine-more.read-only{pointer-events:none}.workflow-engine-form{width:500px;position:relative}.workflow-engine-form .container{height:calc(100vh - 53px);padding:35px 24px 8px 62px;overflow:hidden;overflow-y:auto;margin-left:-22px;scrollbar-width:thin}.workflow-engine-form .container.disabled{pointer-events:none}.workflow-engine-form:before{content:\"\";top:0;bottom:-50px;left:0;width:1px;background:#f1f1f1;position:absolute;z-index:-1}.workflow-engine-form button.submit{position:sticky;height:50px;display:flex;align-items:center;justify-content:center;font-size:13px;line-height:48px;letter-spacing:1.3px;color:#fff;background:#1e5dd3;cursor:pointer;border:1px solid #1e5dd3;outline:none;border-radius:0;text-transform:uppercase;font-weight:600;width:100%;bottom:0;padding:0}.workflow-engine-form button.submit:disabled{background:#f1f1f1;border-color:#f1f1f1;pointer-events:none;cursor:not-allowed;color:#747576}.workflow-engine-form button.submit.disabled{pointer-events:none;opacity:.3;filter:grayscale(1)}.workflow-engine-form button.cancel{position:sticky;height:50px;display:flex;align-items:center;justify-content:center;font-size:13px;line-height:48px;letter-spacing:1.3px;color:#1e5dd3;background:#fff;outline:none;border-radius:0;text-transform:uppercase;font-weight:600;width:100%;bottom:0;padding:0;border:none;border-top:1px solid #F1F1F1;border-left:1px solid #F1F1F1;cursor:pointer}.workflow-engine-form button.cancel:disabled{background:#f1f1f1;border-color:#f1f1f1;pointer-events:none;cursor:not-allowed;color:#747576}.workflow-engine-form button.cancel.disabled{pointer-events:none;opacity:.3;filter:grayscale(1)}.workflow-engine-form.disabled{filter:grayscale(1);pointer-events:none}.workflow-engine-form label.browse{padding:0;margin:0;display:block;position:sticky;bottom:0}.workflow-engine-form label.browse span{height:50px;display:flex;align-items:center;justify-content:center;font-size:13px;line-height:19px;letter-spacing:3.08px;color:#fff;background:#1e5dd3;cursor:pointer;border:1px solid #1e5dd3;outline:none;border-radius:0;text-transform:uppercase;font-weight:600;width:100%}.workflow-engine-form label.browse input{position:absolute;width:100%;height:100%;z-index:1;inset:0;opacity:0;cursor:pointer}.workflow-engine-form .file-browsed{display:flex;align-items:center;background:#fff;border-top:1px solid #F1F1F1;border-bottom:1px solid #F1F1F1}.workflow-engine-form .file-browsed span{display:block;width:calc(100% - 164px);color:#161b2f;font-size:13px;font-weight:400;line-height:20px;padding:0 16px}.workflow-engine-form .file-browsed button{height:50px;display:flex;align-items:center;justify-content:center;font-size:13px;line-height:19px;letter-spacing:3.08px;color:#fff;background:#1e5dd3;cursor:pointer;border:1px solid #1e5dd3;outline:none;border-radius:0;text-transform:uppercase;font-weight:600;width:164px;bottom:0}.workflow-engine-form:after{content:\"\";height:30px;position:absolute;right:0;bottom:50px;z-index:10;background:linear-gradient(to bottom,#fff0,#ffffffbf 22%,#fff);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#00ffffff\",endColorstr=\"#ffffff\",GradientType=0)}.workflow-engine-form.no-shadow:after{display:none}.workflow-engine.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}.workflow-engine.bg{background:#fff}.program-business-cycle{background:#f2bf19;border-radius:0 0 .25rem .25rem;position:relative;top:-.25rem;z-index:1}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n", "@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::-webkit-scrollbar-track{background-color:#f1f1f1;position:absolute}::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}button{font-family:Poppins,sans-serif}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;font-size:13px;color:#747576;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField::placeholder{font-size:13px;color:#747576}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxEnable.withBtn:after{display:none}::ng-deep .selectBoxEnable.withBtn button.setBtn{background:transparent;border-radius:0;border:none;min-width:98px}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer .chipName.no-width{max-width:unset}::ng-deep .chipContainer .chipName.full-width{max-width:25rem}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}::ng-deep .chipContainer button.countBtn.blueBg{background:#1e5dd3}::ng-deep .workflowLavel{background:#f1f1f1;border-radius:.125rem;color:#042e7d;min-width:1rem;height:1rem}::ng-deep .reviewSelection{border-radius:.25rem;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep .reviewSelection:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectButton{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectButton:hover,::ng-deep .selectButton:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep button.createNewBtn{background:transparent;border-radius:0;border:none}::ng-deep .vx-form-group{display:block;position:relative;margin-bottom:20px}::ng-deep .vx-form-group:after{content:\"\";display:block;clear:both}::ng-deep .vx-form-group .select{position:relative}::ng-deep .vx-form-group .select:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#707070;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .vx-form-group .select input{cursor:pointer;padding-right:30px!important}::ng-deep .vx-form-group .select .custom-input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;outline:none;padding:3px 12px;line-height:16px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .vx-form-group .select .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:13px;width:94%;display:block;pointer-events:none;opacity:.8}::ng-deep .vx-form-group .select .custom-input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .vx-form-group .select .custom-input.frequency-custom-input{padding-right:108px;display:flex;align-items:center}::ng-deep .vx-form-group .select+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .select+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .select+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .select~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .select.button-sec:after{display:none}::ng-deep .vx-form-group .select.button-sec button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;position:absolute;top:12px;right:8px;padding:0;margin:0}::ng-deep .vx-form-group .select+.vx-control-panel{margin-top:8px}::ng-deep .vx-form-group .select+.selected{margin-top:8px}::ng-deep .vx-form-group .select.select{margin-top:8px}::ng-deep .vx-form-group .upload-format{border:1px solid #dbdbdb;border-radius:4px;padding:8px 12px;display:block}::ng-deep .vx-form-group .upload-format span.text{line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:block;margin-bottom:6px}::ng-deep .vx-form-group .upload-format .radio-group{display:flex}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio{display:inline-block}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;margin-left:8px}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio+app-cs-radio{margin-left:12px}::ng-deep .vx-form-group .upload-format~.upload-format{margin-top:4px}::ng-deep .vx-form-group .form-tab{display:flex;justify-content:flex-start}::ng-deep .vx-form-group .form-tab button{background:transparent;color:#161b2f;font-size:11px;line-height:16px;text-transform:uppercase;cursor:pointer;padding:8px 8px 8px 0;border:none;outline:none;font-weight:500}::ng-deep .vx-form-group .form-tab button:disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .form-tab button+button{padding:8px}::ng-deep .vx-form-group .form-tab button.active{color:#1e5dd3}::ng-deep .vx-form-group .tab-group{border:1px solid #dbdbdb;border-radius:4px;padding:0;display:block;position:relative;transition:all .2s ease-in-out}::ng-deep .vx-form-group .tab-group:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group .tab-group .upload-file{padding:16px 62px 16px 24px;display:flex;align-items:center;justify-content:space-between}::ng-deep .vx-form-group .tab-group .upload-file .image{width:80px}::ng-deep .vx-form-group .tab-group .upload-file .browse span{display:inline-block;font-size:12px;color:#747576;line-height:16px;padding:0 4px}::ng-deep .vx-form-group .tab-group .upload-file .browse .label{font-size:11px;color:#1e5dd3;line-height:16px;font-weight:600;text-transform:uppercase;margin:0;padding:0}::ng-deep .vx-form-group .tab-group .upload-file .browse .label input{opacity:0;position:absolute;margin:0;padding:0;inset:0;cursor:pointer;width:100%}::ng-deep .vx-form-group .tab-group.active{border-color:#1e5dd3}::ng-deep .vx-form-group .tab-group.uploaded{margin-top:4px}::ng-deep .vx-form-group .tab-group.uploaded .upload-file{padding:8px 0!important;text-align:center}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .image{display:none}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .browse{width:100%;text-align:center}::ng-deep .vx-form-group .tab-group+label.vx-form-group{margin-top:8px;margin-bottom:4px}::ng-deep .vx-form-group .file-list{background:#fbfbfb;border:1px solid #f1f1f1;border-radius:4px;padding:12px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;position:relative}::ng-deep .vx-form-group .file-list span.file-name{color:#747576;line-height:16px;font-size:11px;font-weight:400;cursor:pointer;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .vx-form-group .file-list .button-group{display:flex}::ng-deep .vx-form-group .file-list button{font-size:12px;color:#eb2424;cursor:pointer;display:flex;padding:0;border:none;outline:none;background:transparent}::ng-deep .vx-form-group .file-list button.edit{color:#1e5dd3}::ng-deep .vx-form-group .file-list button+button{margin-left:16px}::ng-deep .vx-form-group .file-list+.file-list{margin-top:4px}::ng-deep .vx-form-group .file-list .file-container{display:flex;justify-content:space-between;width:100%}::ng-deep .vx-form-group .file-list.policy{background:#fff}::ng-deep .vx-form-group .file-list cs-select{position:relative;margin-top:8px;width:100%}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group input.value{height:32px!important;font-size:13px!important}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group i{right:12px!important;top:12px!important}::ng-deep .vx-form-group .file-list app-line-loader{display:block;position:absolute;left:10px;right:10px;bottom:0}::ng-deep .vx-form-group label.vx-control-panel{color:#161b2f;font-size:11px;font-weight:500;line-height:16px;margin-bottom:8px;display:block;text-transform:uppercase;text-align:left}::ng-deep .vx-form-group label.vx-control-panel.custom-tag{font-size:10px}::ng-deep .vx-form-group label.vx-control-panel.vx-mt-8{margin-top:8px}::ng-deep .vx-form-group label.vx-control-panel span.required{color:#eb2424;font-size:14px;font-weight:500;position:relative;top:-2px}::ng-deep .vx-form-group label.vx-control-panel .button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;padding:0;margin:0}::ng-deep .vx-form-group label.vx-control-panel app-cs-switch{float:right;display:block}::ng-deep .vx-form-group label.vx-control-panel i{margin-left:8px;font-size:12px;color:#1e5dd3;cursor:pointer;position:relative;top:1px}::ng-deep .vx-form-group label.vx-control-panel i.depreciation-icon{color:#e4b700;font-size:16px;position:relative;top:3px}::ng-deep .vx-form-group label.vx-control-panel .checkpoint-version{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:10px;font-weight:600;line-height:14px;margin-left:4px;padding:0 2px}::ng-deep .vx-form-group input[type=text],::ng-deep .vx-form-group .input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;outline:none;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400}::ng-deep .vx-form-group input[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group input[type=text]:focus,::ng-deep .vx-form-group .input:focus,::ng-deep .vx-form-group input[type=text]:hover,::ng-deep .vx-form-group .input:hover{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group input[type=text].error,::ng-deep .vx-form-group .input.error{border-color:#eb2424;color:#eb2424;margin-bottom:4px}::ng-deep .vx-form-group input[type=text].error:focus,::ng-deep .vx-form-group .input.error:focus{box-shadow:0 0 5px #d31e1e45}::ng-deep .vx-form-group input[type=text]:disabled,::ng-deep .vx-form-group .input:disabled{background:#f1f1f1;cursor:not-allowed;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group input[type=text]:disabled:hover,::ng-deep .vx-form-group .input:disabled:hover{border-color:#dbdbdb;box-shadow:none}::ng-deep .vx-form-group input[type=text] span.text,::ng-deep .vx-form-group .input span.text{font-size:13px;color:#747576;font-weight:400;display:block;width:100%}::ng-deep .vx-form-group input[type=text] .input-group,::ng-deep .vx-form-group .input .input-group{display:flex;align-items:center}::ng-deep .vx-form-group input[type=text] .input-group.counter,::ng-deep .vx-form-group .input .input-group.counter{min-width:96px;width:96px}::ng-deep .vx-form-group input[type=text] .input-group.counter button,::ng-deep .vx-form-group .input .input-group.counter button{height:24px;width:24px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#747576;font-size:8px;cursor:pointer;outline:none}::ng-deep .vx-form-group input[type=text] .input-group.counter input,::ng-deep .vx-form-group .input .input-group.counter input{-webkit-appearance:textfield;-moz-appearance:textfield;height:24px;width:calc(100% - 48px);border:1px solid #f1f1f1;outline:none;padding:0 6px;text-align:center}::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-outer-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-outer-spin-button{appearance:none;margin:0}::ng-deep .vx-form-group input[type=text]+.file-list,::ng-deep .vx-form-group .input+.file-list{margin-top:8px}::ng-deep .vx-form-group input[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]:-ms-input-placeholder,::ng-deep .vx-form-group .input:-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]::-ms-input-placeholder,::ng-deep .vx-form-group .input::-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group .classification{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;padding:8px 12px;display:flex;justify-content:space-between}::ng-deep .vx-form-group .classification label{margin:0 4px 0 0;width:100%;position:relative;z-index:1}::ng-deep .vx-form-group .classification label span{display:block;width:100%;height:24px;border:1px solid #f1f1f1;border-radius:2px;line-height:24px;font-size:10px;text-align:center;color:#747576;font-weight:500;position:relative;text-transform:uppercase}::ng-deep .vx-form-group .classification label span:before{height:2px;content:\"\";top:0;right:0;left:0;border-radius:2px;position:absolute;transition:all .2s ease-in-out}::ng-deep .vx-form-group .classification label input{opacity:0;position:absolute;inset:0;margin:0;padding:0;width:100%;height:100%;cursor:pointer;z-index:1}::ng-deep .vx-form-group .classification label input:checked+span{color:#fff}::ng-deep .vx-form-group .classification label input:checked+span:before{bottom:0;height:100%;z-index:-1}::ng-deep .vx-form-group .classification label.low span:before{background:#34aa44}::ng-deep .vx-form-group .classification label.low-med span:before{background:#f2bf19}::ng-deep .vx-form-group .classification label.med-high span:before{background:#f29619}::ng-deep .vx-form-group .classification label.high span:before{background:#eb2424}::ng-deep .vx-form-group .classification label:last-of-type{margin-right:0}::ng-deep .vx-form-group .input{display:flex;align-items:center}::ng-deep .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;padding:8px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:flex;align-items:center;position:relative;justify-content:space-between}::ng-deep .vx-form-group .selected.first-field{z-index:2}::ng-deep .vx-form-group .selected .chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .vx-form-group .selected .chip-container.checkpoints{width:calc(100% - 120px)}::ng-deep .vx-form-group .selected .chip-container span.chip{background:#fff;border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;padding:0 8px;color:#1e5dd3;font-size:12px;display:block;width:auto;max-width:100%;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .vx-form-group .selected .chip-container span.chip.disabled{background:#f1f1f1;box-shadow:none;color:#747576;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .selected .chip-container span.chip i{font-weight:400;margin-right:8px;cursor:pointer;font-size:10px;position:relative;top:1px}::ng-deep .vx-form-group .selected .chip-container span.chip span.step{background:#1e5dd3;border-radius:2px;color:#fff;font-size:9px;line-height:14px;padding:0 4px;font-weight:400;text-align:center;min-width:auto;margin-right:4px}::ng-deep .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question{display:flex;align-items:center;justify-content:space-between;width:100%}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.value{color:#1e5dd3;font-size:12px;font-weight:400;line-height:24px;padding:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 80px)}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.label{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding-left:4px;padding-right:4px;line-height:12px;margin-left:8px}::ng-deep .vx-form-group .selected .chip-container span.value{color:#747576;font-size:13px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 52px);padding:0 4px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text{color:#747576;font-size:10px;font-weight:500;padding:0 8px;width:122px;line-height:14px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first{position:relative;min-width:162px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first:before{background:#f1f1f1;content:\"\";position:absolute;top:0;right:0;height:calc(100% + 12px);width:1px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text .no{color:#1e5dd3}::ng-deep .vx-form-group .selected .chip-container.plus span.chip{max-width:calc(50% - 35px)}::ng-deep .vx-form-group .selected .chip-container.more-one span.chip{max-width:50%}::ng-deep .vx-form-group .selected .chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .vx-form-group .selected .chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:100px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count{border-radius:20px;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .vx-form-group .selected .chip-container .chip-inner i.cross{cursor:pointer;position:relative;top:1px;font-size:8px}::ng-deep .vx-form-group .selected button.count{background:#1e5dd3;border-radius:2px;height:24px;padding:0 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none;color:#fff;font:13px;font-weight:500;line-height:20px;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit{border:none;border-radius:0;background:transparent;outline:none;cursor:pointer;display:block;font-size:11px;font-weight:600;color:#1e5dd3;text-transform:uppercase;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit i{font-weight:400;font-size:8px;margin-right:4px}::ng-deep .vx-form-group .selected button.close-btn{background:transparent;border:none;padding:0;margin-left:8px;font-size:10px;color:#c7381b;display:flex;align-items:center}::ng-deep .vx-form-group .selected .workflow-label{min-width:92px;padding:4px;text-align:center;margin-left:-8px;margin-right:8px;border-right:1px solid #f1f1f1}::ng-deep .vx-form-group .selected .workflow-label p{margin:0;display:block;text-transform:uppercase}::ng-deep .vx-form-group .selected .workflow-label p.title{font-size:9px;line-height:12px;color:#161b2f;font-weight:500}::ng-deep .vx-form-group .selected .workflow-label p.description{font-size:11px;line-height:16px;color:#161b2f;font-weight:600}::ng-deep .vx-form-group .selected .workflow-label+.chip-container{width:calc(100% - 148px)}::ng-deep .vx-form-group .selected+.selected{margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .selected+app-cs-switch.who-toggle label.cs-switch span.value{color:#747576}::ng-deep .vx-form-group .selected+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .selected~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .selected.readOnly{pointer-events:none}::ng-deep .vx-form-group .selected span.chip{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .vx-form-group .select-list{position:absolute;background:#fff;box-shadow:0 0 5px #1e5dd345;top:100%;right:0;left:0;z-index:2}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item{width:100%;padding:12px 16px}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item:hover{background:#f8f8f8}::ng-deep .vx-form-group ::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;line-height:38px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400;border:none;padding:0 12px 0 34px;outline:none}::ng-deep .vx-form-group .date-time-picker .picker-group input:focus,::ng-deep .vx-form-group .date-time-picker .picker-group input:hover{box-shadow:none;border:none}::ng-deep .vx-form-group .date-time-picker .picker-group input::placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input:-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input::-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group i{display:flex;justify-content:center;align-items:center;height:16px;width:12px;position:absolute;left:12px;top:0;color:#747576;font-size:12px;pointer-events:none}::ng-deep .vx-form-group app-cs-radio.main-filed{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;color:#707070}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group app-cs-radio.disabled{pointer-events:none;opacity:.5;filter:grayscale(1);background:#f1f1f1}::ng-deep .vx-form-group .switch-row{display:flex}::ng-deep .vx-form-group .switch-row app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:0;text-transform:uppercase;color:#747576!important}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value i{display:inline-flex;font-size:11px;cursor:pointer;color:#1e5dd3;align-items:center;line-height:16px;margin:0 4px}::ng-deep .vx-form-group .switch-row app-cs-switch+app-cs-switch{margin-left:8px}::ng-deep .vx-form-group .switch-row.align-right{justify-content:flex-end}::ng-deep .vx-form-group .switch-row.align-right label.cs-switch span.value{margin-right:8px}::ng-deep .vx-form-group .risk-type-field{background:#f8f8f8;border:1px solid #dbdbdb;border-radius:4px;height:40px;display:flex;align-items:center;padding:4px;position:relative;z-index:1}::ng-deep .vx-form-group .risk-type-field .type-item{width:50%;position:relative}::ng-deep .vx-form-group .risk-type-field .type-item button{background:transparent;border:none;border-radius:0;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase;width:100%;height:32px;padding:0 12px;text-align:left}::ng-deep .vx-form-group .risk-type-field .type-item button.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item .info{color:#1e5dd3;font-size:12px;position:absolute;top:10px;right:12px;cursor:pointer}::ng-deep .vx-form-group .risk-type-field .type-item .info.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item.active button{color:#1e5dd3!important}::ng-deep .vx-form-group .risk-type-field .type-item:nth-child(2).active~.background-glider{transform:translate(100%)}::ng-deep .vx-form-group .risk-type-field .background-glider{background:#fff;border-radius:4px;box-shadow:0 1px 3px #161b2f26;position:absolute;display:flex;width:212px;height:32px;z-index:-1;transition:.25s ease-out}.left{width:36px;height:36px;margin-top:26px;margin-left:-58px;margin-right:20px;display:flex;justify-content:center;align-items:center;position:relative;z-index:10;border-radius:50%}.left.deadline-completed{margin-top:18px}.left.checked{background:transparent}.left img{width:36px}.left .checkIcon{width:32px;height:32px;background:#fff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}.left .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}.left .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}.right{width:100%}.right span.indicator{position:absolute;top:36px;left:-16px;font-size:12px;color:#f0b819;cursor:pointer}.form-group-row{display:flex;position:relative;transition:all .2s ease-in-out}.form-group-row.disabled{-webkit-user-select:none;user-select:none;pointer-events:none;filter:grayscale(1);z-index:2}.form-group-row.disabled .left{position:relative}.form-group-row.disabled .left:before{content:\"\";position:absolute;inset:2px 0 0 2px;background:#fff;opacity:.7;border-radius:50%;width:32px;height:32px}.form-group-row.disabled .right{opacity:.3}.form-group-row.active{pointer-events:none;filter:grayscale(0);z-index:2;opacity:1}.form-group-row.active .right .vx-form-group input,.form-group-row.active .right .vx-form-group .custom-input,.form-group-row.active .right .vx-form-group .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}.form-group-row.active .right .vx-form-group .selectBoxEnable.disabled{border-color:#dbdbdb;box-shadow:none}::ng-deep .radio-group-selector app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .radio-group-selector app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .radio-group-selector app-cs-radio label.radio-item .radio,::ng-deep .radio-group-selector app-cs-radio label.radio-item .radiomark{position:absolute!important;top:9px;left:12px}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value{font-size:11px!important;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0!important;max-width:100%!important;font-weight:500!important;color:#707070!important}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value i{font-size:12px;color:#1e5dd3}::ng-deep .radio-group-selector app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}::ng-deep .wf-action-list{width:220px}::ng-deep .wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}::ng-deep .wf-action-list ul.action-item{display:block}::ng-deep .wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}::ng-deep .wf-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}::ng-deep .wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .wf-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .wf-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .wf-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .wf-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .wf-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}::ng-deep .wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}p.error-message{font-size:11px;font-weight:400;color:#eb2424;line-height:16px;margin-top:8px;margin-bottom:0}.edit-loader{position:absolute;top:-3px;left:-3px;width:46px;height:46px;transform:rotate(180deg)}.circular-loader{animation:rotate 2s linear infinite;height:100%;transform-origin:center center;width:100%;position:absolute;top:0;left:0;margin:auto}.loader-path{stroke-dasharray:150,200;stroke-dashoffset:-10;animation:dash 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35}to{stroke-dasharray:89,200;stroke-dashoffset:-124}}::ng-deep .dropdown{position:fixed;background:#fff;box-shadow:0 3px 6px #00000029;padding:24px 0;z-index:9;max-height:calc(100vh - 200px);overflow:auto}::ng-deep .dropdown ul.dropdown-list{padding:0 20px;margin:0;display:block}::ng-deep .dropdown ul.dropdown-list li{list-style:none}::ng-deep .dropdown ul.dropdown-list li app-cs-radio{display:flex}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.radio{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.value{padding:11px 12px 11px 32px;width:100%;border:1px solid #bcbcbc;border-radius:4px;margin-left:0;max-width:100%}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item svg{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item input[type=radio]:checked~span.value{background:#e8feeb;border-color:#34aa44}::ng-deep .dropdown ul.dropdown-list li+li{margin-top:8px}app-smiley-dialog{position:relative;z-index:10}app-smiley-dialog-inline{position:absolute;top:-3px;right:0;bottom:0;z-index:999;width:520px;height:calc(100vh + 3px)}::ng-deep .vx-overlay{position:fixed;z-index:3;inset:0}::ng-deep dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}::ng-deep dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}::ng-deep dp-date-picker input:focus{outline:none}::ng-deep dp-date-picker .dp-popup{width:412px;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep dp-date-picker .dp-popup dp-day-calendar,::ng-deep dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep dp-date-picker .dp-popup dp-day-calendar button,::ng-deep dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}::ng-deep dp-date-picker .dp-open+div{position:fixed!important;inset:0!important;display:flex;justify-content:center;align-items:center;z-index:99;pointer-events:none;background:#0000004d}::ng-deep .cdk-overlay-container{z-index:2147483002!important}::ng-deep .dp-popup{z-index:999;display:flex!important;align-items:center;justify-content:center;width:100vw;height:100vh;background:#0000004d!important;box-shadow:unset!important}::ng-deep .dp-popup dp-day-calendar{width:412px!important;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep .dp-popup dp-day-calendar,::ng-deep .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep .dp-popup dp-day-calendar button,::ng-deep .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep .dp-popup dp-day-calendar .dp-weekdays,::ng-deep .dp-popup dp-month-calendar .dp-weekdays,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}@keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}::ng-deep span.file{display:block;width:20px;min-width:20px;border-radius:0 0 2px 2px;border:1px solid transparent;border-color:#747576;position:relative;margin-right:5px;border-top:none;margin-top:5px;background:#fff}::ng-deep span.file.table{margin-right:8px;width:18px;min-width:18px}::ng-deep span.file.table i{font-size:8px}::ng-deep span.file.table .format{height:8px;font-size:7px;line-height:8px;font-weight:400}::ng-deep span.file:before{position:absolute;border-radius:0;top:-4px;right:-1px;content:\"\";height:4px;width:4px;display:block;background:linear-gradient(45deg,#747576 0% 1%,#747576 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file:after{height:4px;left:-1px;right:3px;border-top:1px solid;border-right:none;border-left:1px solid;content:\"\";top:-4px;position:absolute;border-radius:2px 0 0;background:#fff}::ng-deep span.file .format{height:10px;font-size:6px;text-transform:uppercase;background:transparent;font-weight:600;text-align:center;display:block;line-height:10px}::ng-deep span.file i{font-size:10px;height:10px;display:flex;align-items:center;justify-content:center;color:#dbdbdb}::ng-deep span.file.docx{width:22px!important}::ng-deep span.file.pdf,::ng-deep span.file.template{border-color:#f31c39}::ng-deep span.file.pdf:before,::ng-deep span.file.template:before{background:linear-gradient(45deg,#f31c39 0% 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#f31c39\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.pdf:after,::ng-deep span.file.template:after{border-color:#f31c39}::ng-deep span.file.pdf .format,::ng-deep span.file.template .format{color:#f31c39}::ng-deep span.file.xlsx,::ng-deep span.file.xls,::ng-deep span.file.css,::ng-deep span.file.scss,::ng-deep span.file.less{border-color:#34aa44}::ng-deep span.file.xlsx:before,::ng-deep span.file.xls:before,::ng-deep span.file.css:before,::ng-deep span.file.scss:before,::ng-deep span.file.less:before{background:linear-gradient(45deg,#34aa44 0% 1%,#34aa44 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.xlsx:after,::ng-deep span.file.xls:after,::ng-deep span.file.css:after,::ng-deep span.file.scss:after,::ng-deep span.file.less:after{border-color:#34aa44;color:#34aa44}::ng-deep span.file.xlsx .format,::ng-deep span.file.xls .format,::ng-deep span.file.css .format,::ng-deep span.file.scss .format,::ng-deep span.file.less .format{color:#34aa44}::ng-deep span.file.doc,::ng-deep span.file.docx,::ng-deep span.file.psd{border-color:#1e5dd3}::ng-deep span.file.doc:before,::ng-deep span.file.docx:before,::ng-deep span.file.psd:before{background:linear-gradient(45deg,#1e5dd3 0% 1%,#1e5dd3 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.doc:after,::ng-deep span.file.docx:after,::ng-deep span.file.psd:after{border-color:#1e5dd3}::ng-deep span.file.doc .format,::ng-deep span.file.docx .format,::ng-deep span.file.psd .format{color:#1e5dd3}::ng-deep span.file.ppt,::ng-deep span.file.ai,::ng-deep span.file.html,::ng-deep span.file.jpg,::ng-deep span.file.jpeg,::ng-deep span.file.png{border-color:#f6882f}::ng-deep span.file.ppt:before,::ng-deep span.file.ai:before,::ng-deep span.file.html:before,::ng-deep span.file.jpg:before,::ng-deep span.file.jpeg:before,::ng-deep span.file.png:before{background:linear-gradient(45deg,#f6882f 0% 1%,#f6882f 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.ppt:after,::ng-deep span.file.ai:after,::ng-deep span.file.html:after,::ng-deep span.file.jpg:after,::ng-deep span.file.jpeg:after,::ng-deep span.file.png:after{border-color:#f6882f}::ng-deep span.file.ppt .format,::ng-deep span.file.ai .format,::ng-deep span.file.html .format,::ng-deep span.file.jpg .format,::ng-deep span.file.jpeg .format,::ng-deep span.file.png .format{color:#f6882f}::ng-deep span.file.php{border-color:#7aa6f7}::ng-deep span.file.php:before{background:linear-gradient(45deg,#7aa6f7 0% 1%,#7aa6f7 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.php:after{border-color:#7aa6f7}::ng-deep span.file.php .format{color:#7aa6f7}::ng-deep ngx-material-timepicker-container .timepicker-backdrop-overlay{background-color:#0000000d!important;z-index:9999999999!important}::ng-deep ngx-material-timepicker-container .timepicker-overlay{z-index:9999999999!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker{width:232px!important;border-radius:2px!important;box-shadow:0 4px 30px #161b2f26!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header{background-color:#fff!important;padding:0!important;border-radius:2px 2px 0 0}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container{display:block!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time{color:#000!important;width:150px!important;margin:0 auto;line-height:60px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control{font-size:40px;background-color:transparent!important;color:#000!important;font-weight:600;text-align:right;caret-color:transparent;outline:none;font-family:Poppins;line-height:56px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:focus,::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:hover{background-color:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control:last-of-type .timepicker-dial__control{text-align:left}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time span{padding:0 8px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period{display:flex!important;width:182px;margin:0 auto!important;background:#f1f1f1;padding:4px 10px;border-radius:20px;position:relative}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period:before{background:#f1f1f1;content:\"\";position:absolute;top:15px;left:-25px;width:calc(100% + 50px);height:2px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period{flex-direction:unset!important;position:relative;z-index:1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:after{content:\"\";position:absolute;right:-12px;top:0;border-left:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:before{content:\"\";position:absolute;left:-18px;top:0;border-right:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button{font-size:11px;background-color:transparent;padding:0;border-radius:20px;color:#747576;font-weight:600;font-family:Poppins;width:84px;height:24px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button.timepicker-dial__item_active{background:#fff!important;color:#1e5dd3!important;box-shadow:0 1px 2px #dbdbdb}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button+button{margin-left:0!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face{width:200px!important;height:200px!important;padding:10px!important;background:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer{height:92px!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span{color:#000}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span.active{color:#fff}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand{height:80px!important;top:calc(50% - 80px)!important;background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number>span.active{background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand_minute:before{border:4px solid #1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions{display:flex!important;padding:10px 0 0!important;background:#fff!important;justify-content:space-around!important;border-radius:0 0 2px 2px!important;overflow:hidden}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div:first-child ngx-material-timepicker-button button.timepicker-button{background:#f8f8f8;color:#1e5dd3}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button{line-height:28px!important;width:100%;background:#1e5dd3;color:#fff;border-radius:0!important;height:32px!important;width:116px!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button span{font-weight:500!important;font-size:11px;font-family:Poppins}::ng-deep vcomply-editor{display:block}::ng-deep vcomply-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep vcomply-editor .editor-container:hover,::ng-deep vcomply-editor .editor-container:focus-within{border:1px solid #1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep vcomply-editor .editor-container mention-list ul li a{font-size:16px!important}::ng-deep vcomply-editor .editor-container .editable-block{background:#fff;min-height:60px;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep vcomply-editor .editor-container .editable-block:before{color:#747576!important}::ng-deep vcomply-editor .editor-container .editor-tools{border-top:1px solid #dbdbdb;border-radius:0 0 3px 3px}::ng-deep vcomply-editor .editor-container .editor-tools:hover{border-color:#1e5dd3}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep marx-modal .popup-modal-background{background-color:#161b2fcc!important}::ng-deep .within-box{background:#f1f1f1;border-radius:.125rem;color:#042e7d}::ng-deep .within-value{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-word}.wf-tooltip{pointer-events:none;position:absolute;max-width:300px;font-size:12px;text-align:left;color:#fff;padding:8px 12px;background:#000;border-radius:2px;z-index:-222;top:0;opacity:0;white-space:break-spaces;word-break:break-word}.wf-tooltip *{color:#fff!important}.wf-tooltip:empty{display:none!important}.wf-tooltip.white{box-shadow:0 2px 8px #1c5bd159;color:#747576;background:#fff;text-align:left}.wf-tooltip.white b{color:#747576!important}.wf-tooltip.animate-top{animation:animate-top .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-right{animation:animate-right .3s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-bottom{animation:animate-bottom .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-left{animation:animate-left .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip-top:after{top:100%;left:50%;margin-left:-5px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip-bottom:after{bottom:100%;left:50%;margin-left:-5px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-left.white:after{border-color:transparent transparent transparent #f1f1f1}.wf-tooltip-left:after{top:50%;left:100%;margin-top:-5px;border-width:5px;border-color:transparent transparent transparent #000000}.wf-tooltip-right.white:after{border-color:transparent #f1f1f1 transparent transparent}.wf-tooltip-right:after{top:50%;right:100%;margin-top:-5px;border-width:5px;border-color:transparent #000000 transparent transparent}.wf-tooltip-bottom-right:after{bottom:100%;left:100%;margin-left:-20px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom-right.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-bottom-left:after{bottom:100%;left:0;margin-left:10px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom-left.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-top-left:after{top:100%;left:0;margin-left:10px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top-left.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip-top-right:after{top:100%;left:100%;margin-left:-5px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top-right.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip:after{content:\"\";position:absolute;border-style:solid}.wf-tooltip span.within{font-size:80%;display:block;width:100%}.wf-tooltip .small{display:block;font-size:10px}.wf-tooltip .within-box{background:#f1f1f1;border-radius:2px;color:#042e7d!important;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 2px;margin-right:2px}.wf-tooltip-show{pointer-events:none;opacity:1;z-index:2147483001}\n"] }]
+            args: [{ selector: 'app-vcomply-workflow-engine-container', template: "<app-snack-bar></app-snack-bar>\n<div class=\"workflow-engine-overlay\"></div>\n\n<app-assessment-list *ngIf=\"workflowType === 'ASSESSMENT'\" (cancelAssessment)=\"closeWorkflowEngine()\" [isEdit]=\"true\"\n  [isFullScreen]=\"true\" [selectedAssessment]=\"selectedAssessment\"\n  (onAssessmentSelect)=\"closeWorkflowEngine({ evt: $event, confirm: false })\"></app-assessment-list>\n<div *ngIf=\"workflowType !== 'ASSESSMENT'\" class=\"workflow-engine\" [class.animate]=\"animation\" [class.bg]=\"\n    (!isWorkflowSelectorEnabled || riskBulkUpload?.showCategoryList) &&\n    !policy?.showCreateDocuments\n  \">\n  <div class=\"workflow-engine-container\" [ngSwitch]=\"currentWorkflow?.code\"\n    [class.with-preview-assessment]=\"(auth?.previewPanel | async) === true\" [class.with-frequency]=\"\n      compliance?.activeSelector === 'frequency' ||\n      compliance?.activeSelector === 'reviewerFrequency' ||\n      riskComponent?.activeSelector === 'frequency' ||\n      policy?.activeSelector === 'frequency' ||\n      policy?.activeSelector === 'reviewerFrequency'\n    \">\n    <button (click)=\"closeWorkflowEngine()\" id=\"close-workflow-engine-btn\" class=\"close\" [appTooltip]=\"'[Esc] to close'\"\n      placement=\"left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\" [class.disabled]=\"\n        confirmationAlertConfig?.isVisible || !isWorkflowSelectorEnabled\n      \" [class.smiley-opened]=\"\n        riskComponent?.showSmiley ||\n        logIssueComponent?.showSmiley ||\n        compliance?.showSmiley ||\n        policy?.showCreateDocuments ||\n        responsibilityBulkUpload?.showSmiley ||\n        responsibilityBulkUpload?.showExcel ||\n        riskBulkUpload?.showSmiley ||\n        riskBulkUpload?.showExcel ||\n        program?.showSmiley ||\n        importAnAssessment?.showSmiley\n      \">\n      <i class=\"icons\">&#xe93f;</i>\n    </button>\n    <div *ngIf=\"!uiKitService.isSmileyOn\" class=\"workflow-engine-more\"\n      [hidden]=\"showMoreOption === false || policy?.showCreateDocuments\"\n      [class.disabled]=\"confirmationAlertConfig?.isVisible\" [class.read-only]=\"uiKitService?.isLoader\">\n      <app-more-option #moreOption [currentWorkflow]=\"currentWorkflow?.code\" [isEditMode]=\"mode === 'EDIT'\"\n        [isRCSelected]=\"\n          isRCSelected ||\n          (currentWorkflow?.code === 'GRC' &&\n            grcObject?.listObject.RC.selectedData?.length > 0)\n        \" [openedFrom]=\"openedFrom\" (selectedOption)=\"addMoreInfo($event)\" [isProgramSelected]=\"selectedProgram\"\n        [allowedFeature]=\"feature\" [orgDetailsData]=\"orgDetails\" [isAttributesAvailable]=\"\n          currentWorkflow?.code === 'GRC' &&\n          grcObject?.selectedAttributes?.attributes?.length > 0\n        \">\n      </app-more-option>\n    </div>\n    <div class=\"workflow-engine-form\" [class.disabled]=\"confirmationAlertConfig?.isVisible\" [class.no-shadow]=\"\n        currentWorkflow?.code == 'AMR' ||\n        currentWorkflow?.code == 'CMR' ||\n        currentWorkflow?.code == 'AAA' ||\n        uiKitService.isSmileyOn ||\n        policy?.showCreateDocuments\n      \">\n      <div class=\"container\" (scroll)=\"scrollForm()\">\n        <ng-container *ngIf=\"\n            !['VIEW_AUDIT_EXECUTION_SUMMARY', 'EXECUTE_AUDIT_PLAN'].includes(\n              openedFrom\n            )\n          \">\n          <div *ngIf=\"!(uiKitService.isSmileyOn || policy?.showCreateDocuments)\" class=\"form-group-row\" #dropdownRow\n            [class.disabled]=\"\n              (mode === 'EDIT' ||\n                !isWorkflowSelectorEnabled ||\n                disableWorkflowChange ||\n                selectedProgram) &&\n              currentWorkflow?.code !== 'ACTW'\n            \">\n            <div class=\"left\" [class.checked]=\"currentWorkflow\">\n              <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n              </svg>\n            </div>\n            <div class=\"right\">\n              <div class=\"vx-form-group\" #dropdown>\n                <label *ngIf=\"currentWorkflow?.code !== 'ACTW'\" class=\"vx-control-panel\">Select a Workflow<span\n                    class=\"required\">*</span></label>\n                <label *ngIf=\"currentWorkflow?.code === 'ACTW'\" class=\"vx-control-panel\">Assign a Case to Workflow<span\n                    class=\"required\">*</span></label>\n                <div class=\"select\" *ngIf=\"!currentWorkflow && currentWorkflow?.code !== 'ACTW'\"\n                  (click)=\"editWorkflow()\">\n                  <input type=\"text\" placeholder=\"Select a Workflow\" readonly />\n                </div>\n                <div class=\"selected first-field\" *ngIf=\"currentWorkflow\">\n                  <!-- {{currentWorkflow | json}} -->\n                  <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-mr-2\">\n                    <span class=\"chipName vx-fs-11 vx-label-txt no-width\" [appTooltip]=\"currentWorkflow?.workflowName\"\n                      placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\" [innerHTML]=\"\n                        workflowType === 'ACTW'\n                          ? '<strong>Case Reported By: </strong>' +\n                            (reportBy | userPipe : userList)?.member_name\n                          : currentWorkflow?.workflowName\n                      \">\n                    </span>\n                  </div>\n                  <!-- <div class=\"chip-container\">\n                                    <span class=\"chip\" [class.disabled]=\"false\">{{currentWorkflow?.workflowName}}</span>\n                                </div> -->\n                  <button class=\"edit\" type=\"button\" (click)=\"editWorkflow()\" *ngIf=\"\n                      !workflowList &&\n                      openedFrom != 'ASSESSMENT' &&\n                      currentWorkflow?.code !== 'ACTW'\n                    \">\n                    <i class=\"icons\">&#xe9ba;</i> Edit\n                  </button>\n                </div>\n                <div *ngIf=\"\n                    currentWorkflow?.code === 'CAPR' &&\n                    currentBusinessCycle &&\n                    !programSimplifyFlag\n                  \"\n                  class=\"program-business-cycle vx-fs-11 vx-txt-white vx-d-flex vx-align-center vx-pt-2 vx-pb-1 vx-pl-2 vx-pr-1\">\n                  <i class=\"icons vx-fs-12 vx-mr-1\">&#xe963;</i> This program is\n                  being set-up for the business cycle:\n                  <span class=\"vx-fw-600 vx-ml-1\">{{\n                    currentBusinessCycle\n                    }}</span>\n                </div>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n        <!-- <app-create-documents></app-create-documents> -->\n        <!-- <app-bulk-view></app-bulk-view> -->\n        <!-- <app-bulk-responsibility-view></app-bulk-responsibility-view> -->\n        <app-workflow-compliance (disconnectRefresh)=\"isHostRefreshActive = $event\" [orgDetails]=\"orgDetails\"\n          [isEntrust]=\"entrustButtonName.toLowerCase() == 'entrust'\" [responsibilityId]=\"id\" [mode]=\"mode\"\n          [frameworkDetails]=\"frameworkDetails\" [assessmentDetails]=\"assessmentDetails\"\n          (closeWorkflow)=\"closeWorkflowEngine($event)\" *ngSwitchCase=\"'CAR'\" #responsibility\n          (pickerChanged)=\"decideViewMoreOption($event)\" (populateOption)=\"populateMoreOption($event)\"\n          (hideElementsFromMoreOptions)=\"hideElementsFromMoreOptions($event)\" [selectedRC]=\"selectedRC\"\n          [closeOnEsc]=\"closeOnEsc\" (assigneeTypeChange)=\"assigneeTypeChange($event)\"\n          (onReviewerTypeChange)=\"onReviewerChange($event)\" [feature]=\"feature\" [openedFrom]=\"openedFrom\"\n          (rcSelected)=\"onRcSelected($event)\" (resetForm)=\"onResetForm()\"\n          (onRemovingCheckpoint)=\"onRemovingCheckpoint($event, false, true)\"\n          (isAssessmentDisabled)=\"isAssessmentDisabled($event)\" (checkpointCountUpdated)=\"checkpointCount = $event\"\n          [selectedProgram]=\"selectedProgram\" [responsibilityDetails]=\"workflowDetails\"></app-workflow-compliance>\n        <app-workflow-risk [secondaryOpenPortal]=\"secondaryOpenPortal\" [openedFrom]=\"openedFrom\"\n          (disconnectRefresh)=\"isHostRefreshActive = $event\" *ngSwitchCase=\"'AAR'\" #risk\n          (showConfirmationAlert)=\"showConfirmationPopup($event)\"\n          (hideElementsFromMoreOptions)=\"hideElementsFromMoreOptions($event)\"\n          (closeWorkflow)=\"closeWorkflowEngine($event)\" (pickerChanged)=\"decideViewMoreOption($event)\"\n          (populateOption)=\"populateMoreOption($event)\" (refreshForm)=\"onResetForm()\"\n          (rcSelected)=\"onRcSelected($event)\" [mode]=\"mode\" [riskId]=\"id\" [feature]=\"feature\"></app-workflow-risk>\n        <app-workflow-policy (disconnectRefresh)=\"isHostRefreshActive = $event\" *ngSwitchCase=\"'CAP'\" #policy\n          (showConfirmationAlert)=\"showConfirmationPopup($event)\" (shiftToEditMode)=\"shiftToEditMode()\"\n          [feature]=\"feature\" [policyId]=\"id\" [mode]=\"mode\" [templateId]=\"templateId\"\n          [convertFileData]=\"convertFileData\" [selectedCategory]=\"selectedCategory\"\n          [isSendForAttestation]=\"isSendForAttestation\" (populateOption)=\"populateMoreOption($event)\"\n          (pickerChanged)=\"decideViewMoreOption($event)\"></app-workflow-policy>\n        <app-workflow-survey-form *ngSwitchCase=\"'CAS'\" #surveyForm></app-workflow-survey-form>\n        <app-add-multiple-risk (disconnectRefresh)=\"isHostRefreshActive = $event\" *ngSwitchCase=\"'AMR'\" #multipleRisk\n          (pickerChanged)=\"decideViewMoreOption($event)\" (closeWorkflow)=\"closeWorkflowEngine($event)\"\n          [feature]=\"feature\"></app-add-multiple-risk>\n        <!-- <app-add-multiple-responsibility  (disconnectRefresh)=\"isHostRefreshActive = $event\"    (closeWorkflow)=\"closeWorkflowEngine($event)\" *ngSwitchCase=\"'CMR'\" #multipleResponsibility>\n                </app-add-multiple-responsibility> -->\n\n        <lib-add-multiple-responsibility-container [orgDetails]=\"orgDetails\"\n          (disconnectRefresh)=\"isHostRefreshActive = $event\" (closeWorkflow)=\"closeWorkflowEngine($event)\"\n          *ngSwitchCase=\"'CMR'\" [feature]=\"feature\" #multipleResponsibility></lib-add-multiple-responsibility-container>\n        <!-- New Log an Issue -->\n        <app-log-an-issue [issueDetails]=\"issueData\" *ngSwitchCase=\"'LAI'\" [reponsibilityData]=\"reponsibilityData\"\n          [assessmentQuestion]=\"assessmentQuestion\" [openedFrom]=\"openedFrom\" [source]=\"source\" [issueId]=\"id\"\n          #logAnIssue (disconnectRefresh)=\"isHostRefreshActive = $event\" (closeWorkflow)=\"closeWorkflowEngine($event)\"\n          (pickerChanged)=\"decideViewMoreOption($event)\" (populateOption)=\"populateMoreOption($event)\" [(mode)]=\"mode\">\n        </app-log-an-issue>\n        <!-- Old Log an issue -->\n        <!-- <app-log-an-issue *ngSwitchCase=\"'LAI'\" [responsibilitiesData]=\"reponsibiltyData\" [openedFrom]=\"openedFrom\"\n                #logAnIssue (closeWorkflow)=\"closeWorkflowEngine($event)\"\n                (pickerChanged)=\"decideViewMoreOption($event)\" (populateOption)=\"populateMoreOption($event)\">\n            </app-log-an-issue> -->\n\n        <app-workflow-assessment [assessmentId]=\"id\" (pickerChanged)=\"decideViewMoreOption($event)\"\n          [openedFrom]=\"openedFrom\" (disconnectRefresh)=\"isHostRefreshActive = $event\" *ngSwitchCase=\"'AAA'\"\n          (showConfirmationAlert)=\"showConfirmationPopup($event)\" (closeWorkflow)=\"closeWorkflowEngine($event)\"\n          (pickerChanged)=\"decideViewMoreOption($event)\" (populateOption)=\"populateMoreOption($event)\"\n          (refreshForm)=\"onResetForm()\" [mode]=\"mode\" #assessment></app-workflow-assessment>\n        <app-import-an-assessment (pickerChanged)=\"decideViewMoreOption($event)\"\n          (disconnectRefresh)=\"isHostRefreshActive = $event\" *ngSwitchCase=\"'IAA'\"\n          (showConfirmationAlert)=\"showConfirmationPopup($event)\" (closeWorkflow)=\"closeWorkflowEngine($event)\"\n          (pickerChanged)=\"decideViewMoreOption($event)\" (populateOption)=\"populateMoreOption($event)\"\n          (refreshForm)=\"onResetForm()\" #importAssessment></app-import-an-assessment>\n        <!-- <app-workflow-program #program *ngSwitchCase=\"'CAPR'\" (pickerChanged)=\"decideViewMoreOption($event)\" (disconnectRefresh)=\"isHostRefreshActive = $event\"></app-workflow-program> -->\n        <app-workflow-program #program *ngSwitchCase=\"'CAPR'\" [orgDetails]=\"orgDetails\" [allowedFeature]=\"feature\"\n          (disableElementsFromMoreOptions)=\"disableMoreOptions('CAPR', $event)\" [programType]=\"programType\"\n          (pickerChanged)=\"decideViewMoreOption($event)\" (disconnectRefresh)=\"isHostRefreshActive = $event\"\n          (showConfirmationAlert)=\"showConfirmationPopup($event)\" (closeWorkflow)=\"closeWorkflowEngine($event)\"\n          (pickerChanged)=\"decideViewMoreOption($event)\" (populateOption)=\"populateMoreOption($event)\"\n          (refreshForm)=\"onResetForm()\" [mode]=\"mode\" [programId]=\"id\" [programDetails]=\"workflowDetails\"\n          (onRemovingRole)=\"onRemovingRole($event)\" [canFrameworkChange]=\"canFrameworkChange\"\n          [addToProgramDetails]=\"addToProgramDetails\"></app-workflow-program>\n\n        <!-- GRC Object -->\n        <lib-grc-object-container #grcObject *ngSwitchCase=\"'GRC'\" [grcType]=\"grcType\" [MODE]=\"mode\" [ID]=\"id\"\n          (pickerChanged)=\"decideViewMoreOption($event)\" (populateOption)=\"populateMoreOption($event)\"\n          (closeWorkflow)=\"closeWorkflowEngine($event)\" (resetForm)=\"onResetGRCForm()\"\n          (disconnectRefresh)=\"isHostRefreshActive = $event\"\n          (hideElementsFromMoreOptions)=\"hideElementsFromMoreOptions($event)\"></lib-grc-object-container>\n\n        <!-- Report a Case -->\n        <app-workflow-case *ngSwitchCase=\"'RAC'\" #reportCase [openedFrom]=\"openedFrom\" [source]=\"source\" [caseId]=\"id\"\n          [mode]=\"mode\" [responsibilityData]=\"reponsibilityData\" [assessmentQuestion]=\"assessmentQuestion\"\n          [caseTypePermission]=\"caseTypePermission\" [workflowType]=\"'RAC'\"\n          (disconnectRefresh)=\"isHostRefreshActive = $event\" (populateOption)=\"populateMoreOption($event)\"\n          (closeWorkflow)=\"closeWorkflowEngine($event)\"\n          (pickerChanged)=\"decideViewMoreOption($event)\"></app-workflow-case>\n        <!-- Assign case to workflow -->\n        <app-workflow-case *ngSwitchCase=\"'ACTW'\" #reportCase [openedFrom]=\"openedFrom\" [source]=\"source\" [caseId]=\"id\"\n          [mode]=\"mode\" [workflowType]=\"'ACTW'\" [responsibilityData]=\"reponsibilityData\"\n          [assessmentQuestion]=\"assessmentQuestion\" [caseTypePermission]=\"caseTypePermission\"\n          (disconnectRefresh)=\"isHostRefreshActive = $event\" (populateOption)=\"populateMoreOption($event)\"\n          (caseReportedBy)=\"caseReportedBy($event)\" (userListEmitter)=\"userListEmitter($event)\"\n          (closeWorkflow)=\"closeWorkflowEngine($event)\"\n          (pickerChanged)=\"decideViewMoreOption($event)\"></app-workflow-case>\n      </div>\n      <div *ngIf=\"['RAC', 'ACTW'].includes(currentWorkflow?.code)\" class=\"vx-d-flex\">\n        <button class=\"cancel\" [class.disabled]=\"!isWorkflowSelectorEnabled\" (click)=\"closeWorkflowEngine()\">\n          CANCEL\n        </button>\n        <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled\" (click)=\"submit()\">\n          {{\n          mode === \"EDIT\" && currentWorkflow?.code === \"RAC\"\n          ? \"Update\"\n          : \"Report\"\n          }}\n        </button>\n      </div>\n      <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled\" *ngSwitchCase=\"'AAR'\" (click)=\"submit()\">\n        {{\n        mode === \"EDIT\" && openedFrom !== \"MOVE_TO_REGISTER\"\n        ? \"Update\"\n        : \"Add\"\n        }}\n      </button>\n      <button class=\"submit\" [class.disabled]=\"\n          !isWorkflowSelectorEnabled ||\n          !riskBulkUpload?.category?.selectedCategory\n        \" (click)=\"bulkUploadBrowse('AMR')\" *ngSwitchCase=\"'AMR'\">\n        Browse\n      </button>\n      <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled\" (click)=\"bulkUploadBrowse('CMR')\"\n        *ngSwitchCase=\"'CMR'\">\n        Browse\n      </button>\n\n      <!-- This has ternary operation to handle the both scenarios of how it works with compliance and program module, please don't change this. -->\n      <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled\" (click)=\"submit()\" *ngSwitchCase=\"'CAR'\">\n        {{\n        entrustButtonName !== \"\" && mode !== \"EDIT\"\n        ? entrustButtonName\n        : mode === \"EDIT\" && !workflowDetails?.duplicate\n        ? \"UPDATE\"\n        : \"Entrust\"\n        }}\n      </button>\n      <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled\" (click)=\"submit()\" *ngSwitchCase=\"'CAP'\">\n        {{\n        mode == \"EDIT\"\n        ? isSendForAttestation\n        ? \"Send for attestation\"\n        : \"Update\"\n        : \"Continue to draft\"\n        }}\n      </button>\n      <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled\" *ngSwitchCase=\"'CAS'\">\n        Continue to draft\n      </button>\n      <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled\" *ngSwitchCase=\"'LAI'\" (click)=\"submit()\">\n        {{ mode === \"EDIT\" ? \"Update\" : \"Add\" }}\n      </button>\n      <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled\" *ngSwitchCase=\"'AAA'\" (click)=\"submit()\">\n        {{ mode === \"EDIT\" ? \"Update\" : \"Continue to draft\" }}\n      </button>\n      <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled\" (click)=\"bulkUploadBrowse('IAA')\"\n        *ngSwitchCase=\"'IAA'\">\n        Browse\n      </button>\n      <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled || !program?.valid\" (click)=\"submit('CAPR')\"\n        *ngSwitchCase=\"'CAPR'\">\n        {{ mode === \"EDIT\" ? \"Update\" : \"Save\" }}\n      </button>\n      <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled || !program?.valid\" (click)=\"submit('CAPR')\"\n        *ngSwitchCase=\"'CAPR'\">\n        {{ mode === \"EDIT\" ? \"Update\" : \"Save\" }}\n      </button>\n      <button class=\"submit\" (click)=\"submit()\" *ngSwitchCase=\"'GRC'\">\n        {{ mode === \"EDIT\" ? \"Update\" : \"Save\" }}\n      </button>\n      <div class=\"dropdown\" *ngIf=\"workflowList\" (click)=\"closeWorkflowList()\" [style.top.px]=\"dropdownTop\"\n        [style.left.px]=\"dropdownLeft\" [style.width.px]=\"dropdownWidth\">\n        <ul class=\"dropdown-list\">\n          <li *ngFor=\"let workflow of workflowTypeList\" (click)=\"changeWorkflow($event, workflow)\">\n            <app-cs-radio *ngIf=\"workflow?.code !== 'ACTW'\" [value]=\"workflow?.code\"\n              [checked]=\"currentWorkflow?.code === workflow?.code\">\n              {{ workflow?.workflowName }}</app-cs-radio>\n          </li>\n        </ul>\n      </div>\n      <div class=\"dropdown-overlay\" *ngIf=\"workflowList\" (click)=\"closeWorkflowList()\"></div>\n    </div>\n    <app-confirmation-alert id=\"confirmation-dialogue\" (action)=\"confirmWorkflowChange($event)\"\n      *ngIf=\"confirmationAlertConfig?.isVisible\" [message]=\"confirmationAlertConfig?.message\"\n      [config]=\"confirmationAlertConfig\"></app-confirmation-alert>\n  </div>\n</div>", styles: ["@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/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.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/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";.dropdown-overlay{position:fixed;inset:0;z-index:2}.workflow-engine{background:#161b2fcc;position:fixed;inset:0;z-index:9}.workflow-engine button.close{position:absolute;background:transparent;cursor:pointer;border:none;font-size:16px;color:#000;top:8px;right:7px;z-index:12;display:flex;align-items:center;justify-content:center;border-radius:2px;padding:8px}.workflow-engine button.close.bulk-opened,.workflow-engine button.close.smiley-opened{z-index:10}.workflow-engine button.close:hover{background:#f1f1f1}.workflow-engine button.close.disabled{pointer-events:none;opacity:.3;filter:grayscale(1)}.workflow-engine-container{position:fixed;top:0;right:0;bottom:0;background:#fff;display:flex;z-index:10;border-top:3px solid #1E5DD3}.workflow-engine-container:before{content:\"\";height:30px;position:absolute;top:0;right:0;width:499px;z-index:11;background:linear-gradient(to bottom,#fff,#ffffffbf 66%,#ffffff6b 81%,#fff0);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#ffffff\",endColorstr=\"#00ffffff\",GradientType=0)}@media screen and (max-width: 1280px){.workflow-engine-container.with-frequency:before{display:none}.workflow-engine-container.with-frequency button.close{display:none}.workflow-engine-container.with-frequency .workflow-engine-form{right:-470px}.workflow-engine-container.with-frequency .workflow-engine-form .container ::ng-deep app-workflow-compliance .workflw-compliance{filter:grayscale(1)!important;pointer-events:none!important}.workflow-engine-container.with-frequency .workflow-engine-form .container ::ng-deep app-workflow-risk .workflw-risk{filter:grayscale(1)!important;pointer-events:none!important}.workflow-engine-container.with-frequency .workflow-engine-form .container ::ng-deep app-workflow-policy .workflow-policy{filter:grayscale(1)!important;pointer-events:none!important}.workflow-engine-container.with-frequency .workflow-engine-form button.submit{filter:grayscale(1)!important;pointer-events:none!important}}.workflow-engine-container.with-preview-assessment:before{display:none}.workflow-engine-container.with-preview-assessment button.close{display:none}.workflow-engine-container.with-preview-assessment .workflow-engine-form{right:-470px}.workflow-engine-container.with-preview-assessment .workflow-engine-form .container ::ng-deep app-workflow-compliance .workflw-compliance{filter:grayscale(1)!important;pointer-events:none!important}.workflow-engine-container.with-preview-assessment .workflow-engine-form button.submit{filter:grayscale(1)!important;pointer-events:none!important}.workflow-engine-more{width:318px;padding:36px 22px 36px 40px;height:100vh;overflow:auto;margin-left:-18px;scrollbar-width:none}@media screen and (max-height: 900px){.workflow-engine-more{padding:20px 22px 36px 40px}}.workflow-engine-more::-webkit-scrollbar-track{background-color:#f1f1f1;position:absolute}.workflow-engine-more::-webkit-scrollbar{width:1px;height:1px;background-color:transparent;position:absolute}.workflow-engine-more::-webkit-scrollbar-thumb{border-radius:1px;background-color:#dbdbdb;position:absolute}.workflow-engine-more.disabled{filter:grayscale(1);pointer-events:none}.workflow-engine-more.read-only{pointer-events:none}.workflow-engine-form{width:500px;position:relative}.workflow-engine-form .container{height:calc(100vh - 53px);padding:35px 24px 8px 62px;overflow:hidden;overflow-y:auto;margin-left:-22px;scrollbar-width:thin}.workflow-engine-form .container.disabled{pointer-events:none}.workflow-engine-form:before{content:\"\";top:0;bottom:-50px;left:0;width:1px;background:#f1f1f1;position:absolute;z-index:-1}.workflow-engine-form button.submit{position:sticky;height:50px;display:flex;align-items:center;justify-content:center;font-size:13px;line-height:48px;letter-spacing:1.3px;color:#fff;background:#1e5dd3;cursor:pointer;border:1px solid #1e5dd3;outline:none;border-radius:0;text-transform:uppercase;font-weight:600;width:100%;bottom:0;padding:0}.workflow-engine-form button.submit:disabled{background:#f1f1f1;border-color:#f1f1f1;pointer-events:none;cursor:not-allowed;color:#747576}.workflow-engine-form button.submit.disabled{pointer-events:none;opacity:.3;filter:grayscale(1)}.workflow-engine-form button.cancel{position:sticky;height:50px;display:flex;align-items:center;justify-content:center;font-size:13px;line-height:48px;letter-spacing:1.3px;color:#1e5dd3;background:#fff;outline:none;border-radius:0;text-transform:uppercase;font-weight:600;width:100%;bottom:0;padding:0;border:none;border-top:1px solid #F1F1F1;border-left:1px solid #F1F1F1;cursor:pointer}.workflow-engine-form button.cancel:disabled{background:#f1f1f1;border-color:#f1f1f1;pointer-events:none;cursor:not-allowed;color:#747576}.workflow-engine-form button.cancel.disabled{pointer-events:none;opacity:.3;filter:grayscale(1)}.workflow-engine-form.disabled{filter:grayscale(1);pointer-events:none}.workflow-engine-form label.browse{padding:0;margin:0;display:block;position:sticky;bottom:0}.workflow-engine-form label.browse span{height:50px;display:flex;align-items:center;justify-content:center;font-size:13px;line-height:19px;letter-spacing:3.08px;color:#fff;background:#1e5dd3;cursor:pointer;border:1px solid #1e5dd3;outline:none;border-radius:0;text-transform:uppercase;font-weight:600;width:100%}.workflow-engine-form label.browse input{position:absolute;width:100%;height:100%;z-index:1;inset:0;opacity:0;cursor:pointer}.workflow-engine-form .file-browsed{display:flex;align-items:center;background:#fff;border-top:1px solid #F1F1F1;border-bottom:1px solid #F1F1F1}.workflow-engine-form .file-browsed span{display:block;width:calc(100% - 164px);color:#161b2f;font-size:13px;font-weight:400;line-height:20px;padding:0 16px}.workflow-engine-form .file-browsed button{height:50px;display:flex;align-items:center;justify-content:center;font-size:13px;line-height:19px;letter-spacing:3.08px;color:#fff;background:#1e5dd3;cursor:pointer;border:1px solid #1e5dd3;outline:none;border-radius:0;text-transform:uppercase;font-weight:600;width:164px;bottom:0}.workflow-engine-form:after{content:\"\";height:30px;position:absolute;right:0;bottom:50px;z-index:10;background:linear-gradient(to bottom,#fff0,#ffffffbf 22%,#fff);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#00ffffff\",endColorstr=\"#ffffff\",GradientType=0)}.workflow-engine-form.no-shadow:after{display:none}.workflow-engine.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}.workflow-engine.bg{background:#fff}.program-business-cycle{background:#f2bf19;border-radius:0 0 .25rem .25rem;position:relative;top:-.25rem;z-index:1}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n", "@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::-webkit-scrollbar-track{background-color:#f1f1f1;position:absolute}::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}button{font-family:Poppins,sans-serif}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;font-size:13px;color:#747576;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField::placeholder{font-size:13px;color:#747576}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxEnable.withBtn:after{display:none}::ng-deep .selectBoxEnable.withBtn button.setBtn{background:transparent;border-radius:0;border:none;min-width:98px}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer .chipName.no-width{max-width:unset}::ng-deep .chipContainer .chipName.full-width{max-width:25rem}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}::ng-deep .chipContainer button.countBtn.blueBg{background:#1e5dd3}::ng-deep .workflowLavel{background:#f1f1f1;border-radius:.125rem;color:#042e7d;min-width:1rem;height:1rem}::ng-deep .reviewSelection{border-radius:.25rem;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep .reviewSelection:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectButton{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectButton:hover,::ng-deep .selectButton:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep button.createNewBtn{background:transparent;border-radius:0;border:none}::ng-deep .vx-form-group{display:block;position:relative;margin-bottom:20px}::ng-deep .vx-form-group:after{content:\"\";display:block;clear:both}::ng-deep .vx-form-group .select{position:relative}::ng-deep .vx-form-group .select:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#707070;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .vx-form-group .select input{cursor:pointer;padding-right:30px!important}::ng-deep .vx-form-group .select .custom-input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;outline:none;padding:3px 12px;line-height:16px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .vx-form-group .select .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:13px;width:94%;display:block;pointer-events:none;opacity:.8}::ng-deep .vx-form-group .select .custom-input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .vx-form-group .select .custom-input.frequency-custom-input{padding-right:108px;display:flex;align-items:center}::ng-deep .vx-form-group .select+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .select+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .select+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .select~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .select.button-sec:after{display:none}::ng-deep .vx-form-group .select.button-sec button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;position:absolute;top:12px;right:8px;padding:0;margin:0}::ng-deep .vx-form-group .select+.vx-control-panel{margin-top:8px}::ng-deep .vx-form-group .select+.selected{margin-top:8px}::ng-deep .vx-form-group .select.select{margin-top:8px}::ng-deep .vx-form-group .upload-format{border:1px solid #dbdbdb;border-radius:4px;padding:8px 12px;display:block}::ng-deep .vx-form-group .upload-format span.text{line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:block;margin-bottom:6px}::ng-deep .vx-form-group .upload-format .radio-group{display:flex}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio{display:inline-block}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;margin-left:8px}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio+app-cs-radio{margin-left:12px}::ng-deep .vx-form-group .upload-format~.upload-format{margin-top:4px}::ng-deep .vx-form-group .form-tab{display:flex;justify-content:flex-start}::ng-deep .vx-form-group .form-tab button{background:transparent;color:#161b2f;font-size:11px;line-height:16px;text-transform:uppercase;cursor:pointer;padding:8px 8px 8px 0;border:none;outline:none;font-weight:500}::ng-deep .vx-form-group .form-tab button:disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .form-tab button+button{padding:8px}::ng-deep .vx-form-group .form-tab button.active{color:#1e5dd3}::ng-deep .vx-form-group .tab-group{border:1px solid #dbdbdb;border-radius:4px;padding:0;display:block;position:relative;transition:all .2s ease-in-out}::ng-deep .vx-form-group .tab-group:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group .tab-group .upload-file{padding:16px 62px 16px 24px;display:flex;align-items:center;justify-content:space-between}::ng-deep .vx-form-group .tab-group .upload-file .image{width:80px}::ng-deep .vx-form-group .tab-group .upload-file .browse span{display:inline-block;font-size:12px;color:#747576;line-height:16px;padding:0 4px}::ng-deep .vx-form-group .tab-group .upload-file .browse .label{font-size:11px;color:#1e5dd3;line-height:16px;font-weight:600;text-transform:uppercase;margin:0;padding:0}::ng-deep .vx-form-group .tab-group .upload-file .browse .label input{opacity:0;position:absolute;margin:0;padding:0;inset:0;cursor:pointer;width:100%}::ng-deep .vx-form-group .tab-group.active{border-color:#1e5dd3}::ng-deep .vx-form-group .tab-group.uploaded{margin-top:4px}::ng-deep .vx-form-group .tab-group.uploaded .upload-file{padding:8px 0!important;text-align:center}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .image{display:none}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .browse{width:100%;text-align:center}::ng-deep .vx-form-group .tab-group+label.vx-form-group{margin-top:8px;margin-bottom:4px}::ng-deep .vx-form-group .file-list{background:#fbfbfb;border:1px solid #f1f1f1;border-radius:4px;padding:12px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;position:relative}::ng-deep .vx-form-group .file-list span.file-name{color:#747576;line-height:16px;font-size:11px;font-weight:400;cursor:pointer;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .vx-form-group .file-list .button-group{display:flex}::ng-deep .vx-form-group .file-list button{font-size:12px;color:#eb2424;cursor:pointer;display:flex;padding:0;border:none;outline:none;background:transparent}::ng-deep .vx-form-group .file-list button.edit{color:#1e5dd3}::ng-deep .vx-form-group .file-list button+button{margin-left:16px}::ng-deep .vx-form-group .file-list+.file-list{margin-top:4px}::ng-deep .vx-form-group .file-list .file-container{display:flex;justify-content:space-between;width:100%}::ng-deep .vx-form-group .file-list.policy{background:#fff}::ng-deep .vx-form-group .file-list cs-select{position:relative;margin-top:8px;width:100%}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group input.value{height:32px!important;font-size:13px!important}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group i{right:12px!important;top:12px!important}::ng-deep .vx-form-group .file-list app-line-loader{display:block;position:absolute;left:10px;right:10px;bottom:0}::ng-deep .vx-form-group label.vx-control-panel{color:#161b2f;font-size:11px;font-weight:500;line-height:16px;margin-bottom:8px;display:block;text-transform:uppercase;text-align:left}::ng-deep .vx-form-group label.vx-control-panel.custom-tag{font-size:10px}::ng-deep .vx-form-group label.vx-control-panel.vx-mt-8{margin-top:8px}::ng-deep .vx-form-group label.vx-control-panel span.required{color:#eb2424;font-size:14px;font-weight:500;position:relative;top:-2px}::ng-deep .vx-form-group label.vx-control-panel .button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;padding:0;margin:0}::ng-deep .vx-form-group label.vx-control-panel app-cs-switch{float:right;display:block}::ng-deep .vx-form-group label.vx-control-panel i{margin-left:8px;font-size:12px;color:#1e5dd3;cursor:pointer;position:relative;top:1px}::ng-deep .vx-form-group label.vx-control-panel i.depreciation-icon{color:#e4b700;font-size:16px;position:relative;top:3px}::ng-deep .vx-form-group label.vx-control-panel .checkpoint-version{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:10px;font-weight:600;line-height:14px;margin-left:4px;padding:0 2px}::ng-deep .vx-form-group input[type=text],::ng-deep .vx-form-group .input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;outline:none;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400}::ng-deep .vx-form-group input[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group input[type=text]:focus,::ng-deep .vx-form-group .input:focus,::ng-deep .vx-form-group input[type=text]:hover,::ng-deep .vx-form-group .input:hover{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group input[type=text].error,::ng-deep .vx-form-group .input.error{border-color:#eb2424;color:#eb2424;margin-bottom:4px}::ng-deep .vx-form-group input[type=text].error:focus,::ng-deep .vx-form-group .input.error:focus{box-shadow:0 0 5px #d31e1e45}::ng-deep .vx-form-group input[type=text]:disabled,::ng-deep .vx-form-group .input:disabled{background:#f1f1f1;cursor:not-allowed;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group input[type=text]:disabled:hover,::ng-deep .vx-form-group .input:disabled:hover{border-color:#dbdbdb;box-shadow:none}::ng-deep .vx-form-group input[type=text] span.text,::ng-deep .vx-form-group .input span.text{font-size:13px;color:#747576;font-weight:400;display:block;width:100%}::ng-deep .vx-form-group input[type=text] .input-group,::ng-deep .vx-form-group .input .input-group{display:flex;align-items:center}::ng-deep .vx-form-group input[type=text] .input-group.counter,::ng-deep .vx-form-group .input .input-group.counter{min-width:96px;width:96px}::ng-deep .vx-form-group input[type=text] .input-group.counter button,::ng-deep .vx-form-group .input .input-group.counter button{height:24px;width:24px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#747576;font-size:8px;cursor:pointer;outline:none}::ng-deep .vx-form-group input[type=text] .input-group.counter input,::ng-deep .vx-form-group .input .input-group.counter input{-webkit-appearance:textfield;-moz-appearance:textfield;height:24px;width:calc(100% - 48px);border:1px solid #f1f1f1;outline:none;padding:0 6px;text-align:center}::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-outer-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-outer-spin-button{appearance:none;margin:0}::ng-deep .vx-form-group input[type=text]+.file-list,::ng-deep .vx-form-group .input+.file-list{margin-top:8px}::ng-deep .vx-form-group input[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]:-ms-input-placeholder,::ng-deep .vx-form-group .input:-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]::-ms-input-placeholder,::ng-deep .vx-form-group .input::-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group .classification{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;padding:8px 12px;display:flex;justify-content:space-between}::ng-deep .vx-form-group .classification label{margin:0 4px 0 0;width:100%;position:relative;z-index:1}::ng-deep .vx-form-group .classification label span{display:block;width:100%;height:24px;border:1px solid #f1f1f1;border-radius:2px;line-height:24px;font-size:10px;text-align:center;color:#747576;font-weight:500;position:relative;text-transform:uppercase}::ng-deep .vx-form-group .classification label span:before{height:2px;content:\"\";top:0;right:0;left:0;border-radius:2px;position:absolute;transition:all .2s ease-in-out}::ng-deep .vx-form-group .classification label input{opacity:0;position:absolute;inset:0;margin:0;padding:0;width:100%;height:100%;cursor:pointer;z-index:1}::ng-deep .vx-form-group .classification label input:checked+span{color:#fff}::ng-deep .vx-form-group .classification label input:checked+span:before{bottom:0;height:100%;z-index:-1}::ng-deep .vx-form-group .classification label.low span:before{background:#34aa44}::ng-deep .vx-form-group .classification label.low-med span:before{background:#f2bf19}::ng-deep .vx-form-group .classification label.med-high span:before{background:#f29619}::ng-deep .vx-form-group .classification label.high span:before{background:#eb2424}::ng-deep .vx-form-group .classification label:last-of-type{margin-right:0}::ng-deep .vx-form-group .input{display:flex;align-items:center}::ng-deep .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;padding:8px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:flex;align-items:center;position:relative;justify-content:space-between}::ng-deep .vx-form-group .selected.first-field{z-index:2}::ng-deep .vx-form-group .selected .chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .vx-form-group .selected .chip-container.checkpoints{width:calc(100% - 120px)}::ng-deep .vx-form-group .selected .chip-container span.chip{background:#fff;border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;padding:0 8px;color:#1e5dd3;font-size:12px;display:block;width:auto;max-width:100%;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .vx-form-group .selected .chip-container span.chip.disabled{background:#f1f1f1;box-shadow:none;color:#747576;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .selected .chip-container span.chip i{font-weight:400;margin-right:8px;cursor:pointer;font-size:10px;position:relative;top:1px}::ng-deep .vx-form-group .selected .chip-container span.chip span.step{background:#1e5dd3;border-radius:2px;color:#fff;font-size:9px;line-height:14px;padding:0 4px;font-weight:400;text-align:center;min-width:auto;margin-right:4px}::ng-deep .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question{display:flex;align-items:center;justify-content:space-between;width:100%}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.value{color:#1e5dd3;font-size:12px;font-weight:400;line-height:24px;padding:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 80px)}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.label{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding-left:4px;padding-right:4px;line-height:12px;margin-left:8px}::ng-deep .vx-form-group .selected .chip-container span.value{color:#747576;font-size:13px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 52px);padding:0 4px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text{color:#747576;font-size:10px;font-weight:500;padding:0 8px;width:122px;line-height:14px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first{position:relative;min-width:162px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first:before{background:#f1f1f1;content:\"\";position:absolute;top:0;right:0;height:calc(100% + 12px);width:1px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text .no{color:#1e5dd3}::ng-deep .vx-form-group .selected .chip-container.plus span.chip{max-width:calc(50% - 35px)}::ng-deep .vx-form-group .selected .chip-container.more-one span.chip{max-width:50%}::ng-deep .vx-form-group .selected .chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .vx-form-group .selected .chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:100px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count{border-radius:20px;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .vx-form-group .selected .chip-container .chip-inner i.cross{cursor:pointer;position:relative;top:1px;font-size:8px}::ng-deep .vx-form-group .selected button.count{background:#1e5dd3;border-radius:2px;height:24px;padding:0 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none;color:#fff;font:13px;font-weight:500;line-height:20px;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit{border:none;border-radius:0;background:transparent;outline:none;cursor:pointer;display:block;font-size:11px;font-weight:600;color:#1e5dd3;text-transform:uppercase;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit i{font-weight:400;font-size:8px;margin-right:4px}::ng-deep .vx-form-group .selected button.close-btn{background:transparent;border:none;padding:0;margin-left:8px;font-size:10px;color:#c7381b;display:flex;align-items:center}::ng-deep .vx-form-group .selected .workflow-label{min-width:92px;padding:4px;text-align:center;margin-left:-8px;margin-right:8px;border-right:1px solid #f1f1f1}::ng-deep .vx-form-group .selected .workflow-label p{margin:0;display:block;text-transform:uppercase}::ng-deep .vx-form-group .selected .workflow-label p.title{font-size:9px;line-height:12px;color:#161b2f;font-weight:500}::ng-deep .vx-form-group .selected .workflow-label p.description{font-size:11px;line-height:16px;color:#161b2f;font-weight:600}::ng-deep .vx-form-group .selected .workflow-label+.chip-container{width:calc(100% - 148px)}::ng-deep .vx-form-group .selected+.selected{margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .selected+app-cs-switch.who-toggle label.cs-switch span.value{color:#747576}::ng-deep .vx-form-group .selected+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .selected~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .selected.readOnly{pointer-events:none}::ng-deep .vx-form-group .selected span.chip{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .vx-form-group .select-list{position:absolute;background:#fff;box-shadow:0 0 5px #1e5dd345;top:100%;right:0;left:0;z-index:2}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item{width:100%;padding:12px 16px}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item:hover{background:#f8f8f8}::ng-deep .vx-form-group ::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;line-height:38px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400;border:none;padding:0 12px 0 34px;outline:none}::ng-deep .vx-form-group .date-time-picker .picker-group input:focus,::ng-deep .vx-form-group .date-time-picker .picker-group input:hover{box-shadow:none;border:none}::ng-deep .vx-form-group .date-time-picker .picker-group input::placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input:-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input::-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group i{display:flex;justify-content:center;align-items:center;height:16px;width:12px;position:absolute;left:12px;top:0;color:#747576;font-size:12px;pointer-events:none}::ng-deep .vx-form-group app-cs-radio.main-filed{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;color:#707070}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group app-cs-radio.disabled{pointer-events:none;opacity:.5;filter:grayscale(1);background:#f1f1f1}::ng-deep .vx-form-group .switch-row{display:flex}::ng-deep .vx-form-group .switch-row app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:0;text-transform:uppercase;color:#747576!important}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value i{display:inline-flex;font-size:11px;cursor:pointer;color:#1e5dd3;align-items:center;line-height:16px;margin:0 4px}::ng-deep .vx-form-group .switch-row app-cs-switch+app-cs-switch{margin-left:8px}::ng-deep .vx-form-group .switch-row.align-right{justify-content:flex-end}::ng-deep .vx-form-group .switch-row.align-right label.cs-switch span.value{margin-right:8px}::ng-deep .vx-form-group .risk-type-field{background:#f8f8f8;border:1px solid #dbdbdb;border-radius:4px;height:40px;display:flex;align-items:center;padding:4px;position:relative;z-index:1}::ng-deep .vx-form-group .risk-type-field .type-item{width:50%;position:relative}::ng-deep .vx-form-group .risk-type-field .type-item button{background:transparent;border:none;border-radius:0;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase;width:100%;height:32px;padding:0 12px;text-align:left}::ng-deep .vx-form-group .risk-type-field .type-item button.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item .info{color:#1e5dd3;font-size:12px;position:absolute;top:10px;right:12px;cursor:pointer}::ng-deep .vx-form-group .risk-type-field .type-item .info.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item.active button{color:#1e5dd3!important}::ng-deep .vx-form-group .risk-type-field .type-item:nth-child(2).active~.background-glider{transform:translate(100%)}::ng-deep .vx-form-group .risk-type-field .background-glider{background:#fff;border-radius:4px;box-shadow:0 1px 3px #161b2f26;position:absolute;display:flex;width:212px;height:32px;z-index:-1;transition:.25s ease-out}.left{width:36px;height:36px;margin-top:26px;margin-left:-58px;margin-right:20px;display:flex;justify-content:center;align-items:center;position:relative;z-index:10;border-radius:50%}.left.deadline-completed{margin-top:18px}.left.checked{background:transparent}.left img{width:36px}.left .checkIcon{width:32px;height:32px;background:#fff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}.left .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}.left .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}.right{width:100%}.right span.indicator{position:absolute;top:36px;left:-16px;font-size:12px;color:#f0b819;cursor:pointer}.form-group-row{display:flex;position:relative;transition:all .2s ease-in-out}.form-group-row.disabled{-webkit-user-select:none;user-select:none;pointer-events:none;filter:grayscale(1);z-index:2}.form-group-row.disabled .left{position:relative}.form-group-row.disabled .left:before{content:\"\";position:absolute;inset:2px 0 0 2px;background:#fff;opacity:.7;border-radius:50%;width:32px;height:32px}.form-group-row.disabled .right{opacity:.3}.form-group-row.active{pointer-events:none;filter:grayscale(0);z-index:2;opacity:1}.form-group-row.active .right .vx-form-group input,.form-group-row.active .right .vx-form-group .custom-input,.form-group-row.active .right .vx-form-group .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}.form-group-row.active .right .vx-form-group .selectBoxEnable.disabled{border-color:#dbdbdb;box-shadow:none}::ng-deep .radio-group-selector app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .radio-group-selector app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .radio-group-selector app-cs-radio label.radio-item .radio,::ng-deep .radio-group-selector app-cs-radio label.radio-item .radiomark{position:absolute!important;top:9px;left:12px}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value{font-size:11px!important;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0!important;max-width:100%!important;font-weight:500!important;color:#707070!important}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value i{font-size:12px;color:#1e5dd3}::ng-deep .radio-group-selector app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}::ng-deep .wf-action-list{width:220px}::ng-deep .wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}::ng-deep .wf-action-list ul.action-item{display:block}::ng-deep .wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}::ng-deep .wf-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}::ng-deep .wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .wf-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .wf-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .wf-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .wf-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .wf-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}::ng-deep .wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}p.error-message{font-size:11px;font-weight:400;color:#eb2424;line-height:16px;margin-top:8px;margin-bottom:0}.edit-loader{position:absolute;top:-3px;left:-3px;width:46px;height:46px;transform:rotate(180deg)}.circular-loader{animation:rotate 2s linear infinite;height:100%;transform-origin:center center;width:100%;position:absolute;top:0;left:0;margin:auto}.loader-path{stroke-dasharray:150,200;stroke-dashoffset:-10;animation:dash 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35}to{stroke-dasharray:89,200;stroke-dashoffset:-124}}::ng-deep .dropdown{position:fixed;background:#fff;box-shadow:0 3px 6px #00000029;padding:24px 0;z-index:9;max-height:calc(100vh - 200px);overflow:auto}::ng-deep .dropdown ul.dropdown-list{padding:0 20px;margin:0;display:block}::ng-deep .dropdown ul.dropdown-list li{list-style:none}::ng-deep .dropdown ul.dropdown-list li app-cs-radio{display:flex}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.radio{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.value{padding:11px 12px 11px 32px;width:100%;border:1px solid #bcbcbc;border-radius:4px;margin-left:0;max-width:100%}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item svg{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item input[type=radio]:checked~span.value{background:#e8feeb;border-color:#34aa44}::ng-deep .dropdown ul.dropdown-list li+li{margin-top:8px}app-smiley-dialog{position:relative;z-index:10}app-smiley-dialog-inline{position:absolute;top:-3px;right:0;bottom:0;z-index:999;width:520px;height:calc(100vh + 3px)}::ng-deep .vx-overlay{position:fixed;z-index:3;inset:0}::ng-deep dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}::ng-deep dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}::ng-deep dp-date-picker input:focus{outline:none}::ng-deep dp-date-picker .dp-popup{width:412px;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep dp-date-picker .dp-popup dp-day-calendar,::ng-deep dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep dp-date-picker .dp-popup dp-day-calendar button,::ng-deep dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}::ng-deep dp-date-picker .dp-open+div{position:fixed!important;inset:0!important;display:flex;justify-content:center;align-items:center;z-index:99;pointer-events:none;background:#0000004d}::ng-deep .cdk-overlay-container{z-index:2147483002!important}::ng-deep .dp-popup{z-index:999;display:flex!important;align-items:center;justify-content:center;width:100vw;height:100vh;background:#0000004d!important;box-shadow:unset!important}::ng-deep .dp-popup dp-day-calendar{width:412px!important;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep .dp-popup dp-day-calendar,::ng-deep .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep .dp-popup dp-day-calendar button,::ng-deep .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep .dp-popup dp-day-calendar .dp-weekdays,::ng-deep .dp-popup dp-month-calendar .dp-weekdays,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}@keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}::ng-deep span.file{display:block;width:20px;min-width:20px;border-radius:0 0 2px 2px;border:1px solid transparent;border-color:#747576;position:relative;margin-right:5px;border-top:none;margin-top:5px;background:#fff}::ng-deep span.file.table{margin-right:8px;width:18px;min-width:18px}::ng-deep span.file.table i{font-size:8px}::ng-deep span.file.table .format{height:8px;font-size:7px;line-height:8px;font-weight:400}::ng-deep span.file:before{position:absolute;border-radius:0;top:-4px;right:-1px;content:\"\";height:4px;width:4px;display:block;background:linear-gradient(45deg,#747576 0% 1%,#747576 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file:after{height:4px;left:-1px;right:3px;border-top:1px solid;border-right:none;border-left:1px solid;content:\"\";top:-4px;position:absolute;border-radius:2px 0 0;background:#fff}::ng-deep span.file .format{height:10px;font-size:6px;text-transform:uppercase;background:transparent;font-weight:600;text-align:center;display:block;line-height:10px}::ng-deep span.file i{font-size:10px;height:10px;display:flex;align-items:center;justify-content:center;color:#dbdbdb}::ng-deep span.file.docx{width:22px!important}::ng-deep span.file.pdf,::ng-deep span.file.template{border-color:#f31c39}::ng-deep span.file.pdf:before,::ng-deep span.file.template:before{background:linear-gradient(45deg,#f31c39 0% 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#f31c39\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.pdf:after,::ng-deep span.file.template:after{border-color:#f31c39}::ng-deep span.file.pdf .format,::ng-deep span.file.template .format{color:#f31c39}::ng-deep span.file.xlsx,::ng-deep span.file.xls,::ng-deep span.file.css,::ng-deep span.file.scss,::ng-deep span.file.less{border-color:#34aa44}::ng-deep span.file.xlsx:before,::ng-deep span.file.xls:before,::ng-deep span.file.css:before,::ng-deep span.file.scss:before,::ng-deep span.file.less:before{background:linear-gradient(45deg,#34aa44 0% 1%,#34aa44 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.xlsx:after,::ng-deep span.file.xls:after,::ng-deep span.file.css:after,::ng-deep span.file.scss:after,::ng-deep span.file.less:after{border-color:#34aa44;color:#34aa44}::ng-deep span.file.xlsx .format,::ng-deep span.file.xls .format,::ng-deep span.file.css .format,::ng-deep span.file.scss .format,::ng-deep span.file.less .format{color:#34aa44}::ng-deep span.file.doc,::ng-deep span.file.docx,::ng-deep span.file.psd{border-color:#1e5dd3}::ng-deep span.file.doc:before,::ng-deep span.file.docx:before,::ng-deep span.file.psd:before{background:linear-gradient(45deg,#1e5dd3 0% 1%,#1e5dd3 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.doc:after,::ng-deep span.file.docx:after,::ng-deep span.file.psd:after{border-color:#1e5dd3}::ng-deep span.file.doc .format,::ng-deep span.file.docx .format,::ng-deep span.file.psd .format{color:#1e5dd3}::ng-deep span.file.ppt,::ng-deep span.file.ai,::ng-deep span.file.html,::ng-deep span.file.jpg,::ng-deep span.file.jpeg,::ng-deep span.file.png{border-color:#f6882f}::ng-deep span.file.ppt:before,::ng-deep span.file.ai:before,::ng-deep span.file.html:before,::ng-deep span.file.jpg:before,::ng-deep span.file.jpeg:before,::ng-deep span.file.png:before{background:linear-gradient(45deg,#f6882f 0% 1%,#f6882f 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.ppt:after,::ng-deep span.file.ai:after,::ng-deep span.file.html:after,::ng-deep span.file.jpg:after,::ng-deep span.file.jpeg:after,::ng-deep span.file.png:after{border-color:#f6882f}::ng-deep span.file.ppt .format,::ng-deep span.file.ai .format,::ng-deep span.file.html .format,::ng-deep span.file.jpg .format,::ng-deep span.file.jpeg .format,::ng-deep span.file.png .format{color:#f6882f}::ng-deep span.file.php{border-color:#7aa6f7}::ng-deep span.file.php:before{background:linear-gradient(45deg,#7aa6f7 0% 1%,#7aa6f7 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.php:after{border-color:#7aa6f7}::ng-deep span.file.php .format{color:#7aa6f7}::ng-deep ngx-material-timepicker-container .timepicker-backdrop-overlay{background-color:#0000000d!important;z-index:9999999999!important}::ng-deep ngx-material-timepicker-container .timepicker-overlay{z-index:9999999999!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker{width:232px!important;border-radius:2px!important;box-shadow:0 4px 30px #161b2f26!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header{background-color:#fff!important;padding:0!important;border-radius:2px 2px 0 0}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container{display:block!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time{color:#000!important;width:150px!important;margin:0 auto;line-height:60px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control{font-size:40px;background-color:transparent!important;color:#000!important;font-weight:600;text-align:right;caret-color:transparent;outline:none;font-family:Poppins;line-height:56px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:focus,::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:hover{background-color:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control:last-of-type .timepicker-dial__control{text-align:left}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time span{padding:0 8px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period{display:flex!important;width:182px;margin:0 auto!important;background:#f1f1f1;padding:4px 10px;border-radius:20px;position:relative}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period:before{background:#f1f1f1;content:\"\";position:absolute;top:15px;left:-25px;width:calc(100% + 50px);height:2px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period{flex-direction:unset!important;position:relative;z-index:1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:after{content:\"\";position:absolute;right:-12px;top:0;border-left:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:before{content:\"\";position:absolute;left:-18px;top:0;border-right:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button{font-size:11px;background-color:transparent;padding:0;border-radius:20px;color:#747576;font-weight:600;font-family:Poppins;width:84px;height:24px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button.timepicker-dial__item_active{background:#fff!important;color:#1e5dd3!important;box-shadow:0 1px 2px #dbdbdb}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button+button{margin-left:0!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face{width:200px!important;height:200px!important;padding:10px!important;background:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer{height:92px!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span{color:#000}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span.active{color:#fff}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand{height:80px!important;top:calc(50% - 80px)!important;background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number>span.active{background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand_minute:before{border:4px solid #1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions{display:flex!important;padding:10px 0 0!important;background:#fff!important;justify-content:space-around!important;border-radius:0 0 2px 2px!important;overflow:hidden}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div:first-child ngx-material-timepicker-button button.timepicker-button{background:#f8f8f8;color:#1e5dd3}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button{line-height:28px!important;width:100%;background:#1e5dd3;color:#fff;border-radius:0!important;height:32px!important;width:116px!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button span{font-weight:500!important;font-size:11px;font-family:Poppins}::ng-deep vcomply-editor{display:block}::ng-deep vcomply-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep vcomply-editor .editor-container:hover,::ng-deep vcomply-editor .editor-container:focus-within{border:1px solid #1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep vcomply-editor .editor-container mention-list ul li a{font-size:16px!important}::ng-deep vcomply-editor .editor-container .editable-block{background:#fff;min-height:60px;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep vcomply-editor .editor-container .editable-block:before{color:#747576!important}::ng-deep vcomply-editor .editor-container .editor-tools{border-top:1px solid #dbdbdb;border-radius:0 0 3px 3px}::ng-deep vcomply-editor .editor-container .editor-tools:hover{border-color:#1e5dd3}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep marx-modal .popup-modal-background{background-color:#161b2fcc!important}::ng-deep .within-box{background:#f1f1f1;border-radius:.125rem;color:#042e7d}::ng-deep .within-value{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-word}.wf-tooltip{pointer-events:none;position:absolute;max-width:300px;font-size:12px;text-align:left;color:#fff;padding:8px 12px;background:#000;border-radius:2px;z-index:-222;top:0;opacity:0;white-space:break-spaces;word-break:break-word}.wf-tooltip *{color:#fff!important}.wf-tooltip:empty{display:none!important}.wf-tooltip.white{box-shadow:0 2px 8px #1c5bd159;color:#747576;background:#fff;text-align:left}.wf-tooltip.white b{color:#747576!important}.wf-tooltip.animate-top{animation:animate-top .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-right{animation:animate-right .3s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-bottom{animation:animate-bottom .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-left{animation:animate-left .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip-top:after{top:100%;left:50%;margin-left:-5px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip-bottom:after{bottom:100%;left:50%;margin-left:-5px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-left.white:after{border-color:transparent transparent transparent #f1f1f1}.wf-tooltip-left:after{top:50%;left:100%;margin-top:-5px;border-width:5px;border-color:transparent transparent transparent #000000}.wf-tooltip-right.white:after{border-color:transparent #f1f1f1 transparent transparent}.wf-tooltip-right:after{top:50%;right:100%;margin-top:-5px;border-width:5px;border-color:transparent #000000 transparent transparent}.wf-tooltip-bottom-right:after{bottom:100%;left:100%;margin-left:-20px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom-right.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-bottom-left:after{bottom:100%;left:0;margin-left:10px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom-left.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-top-left:after{top:100%;left:0;margin-left:10px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top-left.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip-top-right:after{top:100%;left:100%;margin-left:-5px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top-right.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip:after{content:\"\";position:absolute;border-style:solid}.wf-tooltip span.within{font-size:80%;display:block;width:100%}.wf-tooltip .small{display:block;font-size:10px}.wf-tooltip .within-box{background:#f1f1f1;border-radius:2px;color:#042e7d!important;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 2px;margin-right:2px}.wf-tooltip-show{pointer-events:none;opacity:1;z-index:2147483001}\n"] }]
         }], ctorParameters: function () { return [{ type: UiKitService }, { type: SnackBarService }, { type: AuthService$1 }, { type: OrganizationCommonService }, { type: ReportACaseService }, { type: ReportCasePermissionService }, { type: IframeService }, { type: ResponsibilityService }]; }, propDecorators: { workflowType: [{
                 type: Input
             }], mode: [{
@@ -49867,8 +49713,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], templateId: [{
                 type: Input
-            }], customFields: [{
-                type: Input
             }], riskComponent: [{
                 type: ViewChild,
                 args: ['risk', { static: false }]