vcomply-workflow-engine 2.6.151 → 2.6.153

package/bundles/vcomply-workflow-engine.umd.js

@@ -2667,7 +2667,12 @@
                 url += '/risk-workroom/' + this.riskId;
             }
             else {
-                url += '/risk/risk-workroom/' + this.riskId;
+                if (window.location.href.includes('/riskv2')) {
+                    url += '/riskv2/risk-workroom/' + this.riskId;
+                }
+                else {
+                    url += '/risk/risk-workroom/' + this.riskId;
+                }
             }
             window.location.href = url;
             //this.resetForm();
@@ -2685,7 +2690,12 @@
                 url += '/reported-risk/';
             }
             else {
-                url += '/risk/reported-risk/';
+                if (window.location.href.includes('/riskv2')) {
+                    url += '/riskv2/risk-workroom/' + this.riskId;
+                }
+                else {
+                    url += '/risk/risk-workroom/' + this.riskId;
+                }
             }
             window.location.href = url;
             //this.resetForm();
@@ -2979,7 +2989,7 @@
     WorkflowRiskComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-workflow-risk',
-                    template: "<div class=\"workflw-risk\" *ngIf=\"!showSmiley\">\r\n    <!-- Risk Type -->\r\n    <div class=\"form-group-row\" [class.active]=\"false\"\r\n        [class.disabled]=\"false\">\r\n        <div class=\"left\" [class.checked]=\"false\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/what.svg\" alt=\"im\" *ngIf=\"true\">\r\n\r\n            <svg *ngIf=\"false\" class=\"checkIcon\"\r\n                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">Risk Type <span class=\"required\">*</span></label>\r\n                <div class=\"risk-type-field\">\r\n                    <div class=\"type-item\" [class.active]=\"riskForm?.riskType === 'NORMAL'\">\r\n                        <button [class.disabled]=\"!riskTypeChangeAllowed\" (click)=\"changeRisk('NORMAL')\">ADD TO RISK REGISTER</button>\r\n                        <i class=\"icons info\" [appTooltip]=\"'This option lets you add a risk directly to the Risk Register. The risk owners will receive an alert and they can begin the the risk assessment process.'\" placement=\"bottom-right\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\">&#xe932;</i>\r\n                    </div>\r\n                    <div class=\"type-item\" [class.active]=\"riskForm?.riskType === 'REPORTED'\">\r\n                        <button [class.disabled]=\"!riskTypeChangeAllowed\" (click)=\"changeRisk('REPORTED')\">REPORT A RISK</button>\r\n                        <i class=\"icons info\" [appTooltip]=\"'This options lets you report a risk and assign it to the risk owners. The risk owners will have the option to either add the risk to the Risk Register or flag it for a follow-up at a later date.'\" placement=\"bottom-right\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\">&#xe932;</i>\r\n                    </div>\r\n                    <span class=\"background-glider\"></span>\r\n                </div>\r\n                <p *ngIf=\"false\" class=\"error-message\">Add a risk type</p>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- Risk Name -->\r\n    <div class=\"form-group-row\" [class.active]=\"false\"\r\n        [class.disabled]=\" activeSelector && activeSelector !== 'name'  && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"riskForm.title\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/what.svg\" alt=\"im\" *ngIf=\"riskForm?.title?.trim()?.length === 0 || activeSelector === 'name'\">\r\n\r\n            <svg *ngIf=\"riskForm?.title?.trim()?.length > 0 && activeSelector !== 'name'\" class=\"checkIcon\"\r\n                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">WHAT RISK WOULD YOU LIKE TO MANAGE? <span class=\"required\">*</span></label>\r\n                <input spaceTrim type=\"text\" (keydown)=\"activeSelector = 'name'\" (focusin)=\"activateSelector('name',true)\"\r\n                    (focusout)=\"activateSelector('name',false)\" [(ngModel)]=\"riskForm.title\"\r\n                    placeholder=\"Add a risk name\" *ngIf=\"riskForm?.title?.trim() =='' || activeSelector === 'name'\">\r\n                <div class=\"selected\" *ngIf=\"riskForm?.title?.trim()!= '' && activeSelector !== 'name'\">\r\n                    <div class=\"chip-container\">\r\n                        <span class=\"value\">{{riskForm.title}}</span>\r\n                    </div>\r\n                    <button class=\"edit\" (click)=\"activateSelector('name',true)\" type=\"button\"><i\r\n                            class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                </div>\r\n                <p *ngIf=\"submitted && (!riskForm.title)\" class=\"error-message\">Add a risk name</p>\r\n                <marx-editor [(ngModel)]=\"riskForm.description\" [editorConfig]=\"description\" (clickOutside)=\"checkDescription()\"></marx-editor>\r\n                <p *ngIf=\"submitted && (riskForm.riskType ==='REPORTED' && !riskForm?.description?.trim()?.length)\" class=\"error-message\">Add a risk description</p>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- RISK OWNER -->\r\n    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'owner'\"\r\n        [class.disabled]=\" activeSelector && activeSelector !== 'owner' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"riskForm?.ownersList?.length>0\">\r\n            <img *ngIf=\"riskForm?.ownersList?.length ==0 || activeSelector === 'owner'\"\r\n                src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/im-creating.svg\" alt=\"\" />\r\n\r\n            <svg *ngIf=\"riskForm?.ownersList?.length>0 && activeSelector !== 'owner'\" class=\"checkIcon\"\r\n                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">WHO IS RESPONSIBLE FOR MANAGING THIS RISK? <span class=\"required\">*</span>\r\n                    <i class=\"icons\" [appTooltip]=\"'This is the person that is responsible for managing the risk.'\"\r\n                    placement=\"bottom\"\r\n                    delay=\"0\" type=\"white\"\r\n                    [tooltipMandatory]=\"true\">&#xe91f;</i>\r\n                </label>\r\n                <div class=\"select\" *ngIf=\"riskForm?.ownersList?.length ==0\">\r\n                    <input type=\"text\" (click)=\"activateSelector('owner',true)\" placeholder=\"Select Risk Owner(s)\"\r\n                        readonly>\r\n                </div>\r\n                \r\n                <div class=\"selected\" *ngIf=\"riskForm?.ownersList?.length>0 || riskForm?.groupsList.length > 0\">\r\n                    <div class=\"chip-container\" *ngIf=\"!featureflag_groups\" [class.more-one]=\"riskForm?.ownersList?.length>1\" [class.plus]=\"riskForm?.ownersList?.length>2\">\r\n                      <ng-container *ngIf=\"(riskForm?.ownersList|shortMerge : nonRemovableUsersList) as ownerList\">\r\n                        <span class=\"chip\" *ngFor=\"let owner of ownerList?.slice(0,2)\"><i class=\"icons\"\r\n                            *ngIf=\"!nonRemovableUsersList.includes(owner?.member_id)\" (click)=\"remove('owner',owner)\">&#xe90d;</i>\r\n                            {{owner?.member_name}}</span>\r\n                        <button class=\"count\" *ngIf=\"riskForm?.ownersList?.length > 2\" type=\"button\" appPopover\r\n                            (click)=\"popoverOwner.popover()\" placement=\"right\">+\r\n                            {{riskForm?.ownersList?.slice(2).length}}</button>\r\n                          </ng-container>\r\n                    </div>\r\n                    <div class=\"chip-container\" *ngIf=\"featureflag_groups\">\r\n                        <div class=\"chip-inner\" >\r\n                            <span class=\"chip\">\r\n                                <span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">USER(S)</span></span>\r\n                            <button class=\"count user\" appPopover (click)=\"popoverUser.popover()\" placement=\"right\">{{riskForm?.ownersList.length}}</button>\r\n                        </div>\r\n                        <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"riskForm?.groupsList.length > 0\" >&</span>\r\n                        <div class=\"chip-inner\" *ngIf=\"riskForm?.groupsList.length > 0\" >\r\n                            <span class=\"chip\" ><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">USER GROUP(S)</span></span>\r\n                            <button class=\"count\" appPopover (click)=\"group.popover()\" placement=\"right\">{{riskForm?.groupsList?.length}}</button>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <button *ngIf=\"activeSelector !== 'owner'\" class=\"edit\" type=\"button\"\r\n                        (click)=\"activateSelector('owner',true)\"><i class=\"icons\">&#xe9ba;</i>\r\n                        Edit</button>\r\n                </div>\r\n                <p *ngIf=\"submitted && (riskForm?.ownersList?.length===0)\" class=\"error-message\">Select Owner(s) for this risk.</p>\r\n                <app-popover #popoverOwner [dontCloseonClick]=\"true\">\r\n                    <div class=\"action-list\">\r\n                      <ng-container *ngIf=\"(riskForm?.ownersList|shortMerge : nonRemovableUsersList) as ownerPop\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let owner of ownerPop | slice: 2; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i *ngIf = \"!nonRemovableUsersList.includes(owner?.member_id)\" class=\"icons\" (click)=\"remove('owner',owner)\">&#xe90d;</i>\r\n                                        {{ owner.member_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                      </ng-container>\r\n                    </div>\r\n                </app-popover>\r\n                <app-popover #popoverUser [dontCloseonClick]=\"true\">\r\n                    <div class=\"action-list\">\r\n                      <ng-container *ngIf=\"(riskForm?.ownersList|shortMerge : nonRemovableUsersList) as ownerPop\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let owner of ownerPop; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i *ngIf = \"!nonRemovableUsersList.includes(owner?.member_id)\" class=\"icons\" (click)=\"remove('owner',owner)\">&#xe90d;</i>\r\n                                        {{ owner.member_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                      </ng-container>\r\n                    </div>\r\n                </app-popover>\r\n                <app-popover #group [dontCloseonClick]=\"true\">\r\n                    <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let data of (riskForm?.groupsList)\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('Ownergroup', data)\">&#xe90d;</i>\r\n                                        {{data.group_name}}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- Responsibility Center -->\r\n    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'rc'\"\r\n        [class.disabled]=\" activeSelector && activeSelector !== 'rc' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"riskForm?.responsibilityCentersList?.length>0\">\r\n            <img *ngIf=\"riskForm?.responsibilityCentersList?.length==0 || activeSelector === 'rc'\"\r\n                src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/responsibility-center.svg\" alt=\"\">\r\n\r\n            <svg *ngIf=\"riskForm?.responsibilityCentersList?.length>0 && activeSelector !== 'rc'\" class=\"checkIcon\"\r\n                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">Responsibility Center <span class=\"required\">*</span>\r\n                    <i class=\"icons\" [appTooltip]=\"'Responsibility Centers represent the corporate and operational infrastructure of an organization. One or more Responsibility Centers can be exposed to a risk and accordingly, the risk must be assessed against each Responsibility Center.'\"\r\n                    placement=\"bottom\"\r\n                    delay=\"0\" type=\"white\"\r\n                    [tooltipMandatory]=\"true\">&#xe91f;</i>\r\n                </label>\r\n                <div class=\"select\" *ngIf=\"riskForm?.responsibilityCentersList?.length==0\">\r\n                    <input type=\"text\" (click)=\"activateSelector('rc',true)\"\r\n                        placeholder=\"Select Responsibility Center(s)\" readonly>\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"riskForm?.responsibilityCentersList?.length>0\">\r\n                    <div class=\"chip-container\" [class.more-one]=\"riskForm?.responsibilityCentersList?.length>1\" [class.plus]=\"riskForm?.responsibilityCentersList?.length>2\">\r\n                        <span class=\"chip\" *ngFor=\"let rcName of riskForm?.responsibilityCentersList?.slice(0,2)\"><i\r\n                                class=\"icons\" (click)=\"remove('rc',rcName)\">&#xe90d;</i> {{rcName.item_name}}</span>\r\n                        <button class=\"count\" *ngIf=\"riskForm?.responsibilityCentersList?.length > 2\" type=\"button\"\r\n                            appPopover (click)=\"popoverRC.popover()\" placement=\"right\">+\r\n                            {{riskForm?.responsibilityCentersList?.slice(2).length}}</button>\r\n                    </div>\r\n\r\n                    <button *ngIf=\"activeSelector !== 'rc'\" class=\"edit\" type=\"button\"\r\n                        (click)=\"activateSelector('rc',true)\"><i class=\"icons\">&#xe9ba;</i>\r\n                        Edit</button>\r\n                </div>\r\n                <p *ngIf=\"submitted && (riskForm?.responsibilityCentersList?.length==0)\" class=\"error-message\">Assign\r\n                    this risk to a Responsibility Center(s)</p>\r\n                <app-popover #popoverRC [dontCloseonClick]=\"true\">\r\n                    <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let rcName of riskForm?.responsibilityCentersList | slice: 2; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('rc',rcName)\">&#xe90d;</i>\r\n                                        {{ rcName.item_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- Risk Frequency -->\r\n    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'frequency'\" [class.disabled]=\"activeSelector && activeSelector !== 'frequency'  && sideSelectorElements?.includes(activeSelector)\" *ngIf=\"riskForm?.riskType !== 'REPORTED'\">\r\n        <div class=\"left\" [class.checked]=\"riskForm?.category?.selectedCategory\">\r\n            <img *ngIf=\"!riskForm?.frequency_details?.frequency || riskForm?.frequency_details?.frequency === '' || activeSelector === 'frequency'\"\r\n                src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\" alt=\"\" />\r\n\r\n            <svg class=\"checkIcon\" *ngIf=\"riskForm?.frequency_details?.frequency && riskForm?.frequency_details?.frequency !== '' || activeSelector !== 'frequency'\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">HOW OFTEN DOES THIS RISK NEED TO BE REASSESSED? <span class=\"required\">*</span>\r\n                    <i class=\"icons\" [appTooltip]=\"'Frequency info text here...'\" placement=\"bottom\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\">&#xe91f;</i></label>\r\n                <div class=\"select\" *ngIf=\"!riskForm?.frequency_details?.frequency\" (click)=\"activateSelector('frequency',true)\">\r\n                    <input type=\"text\" placeholder=\"Set a Reassessment Frequency\" readonly>\r\n                </div>\r\n                <div class=\"selected button-sec\" *ngIf=\"riskForm?.frequency_details?.frequency\">\r\n                    <span class=\"chip\" [appTooltip]=\"frequencyPlaceholder\" placement=\"bottom\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"false\">{{frequencyPlaceholder}}</span>\r\n                    <button class=\"edit\" type=\"button\" (click)=\"activateSelector('frequency',true)\"><i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                </div>\r\n                <p *ngIf=\"submitted && (!riskForm?.frequency_details?.frequency || riskForm?.frequency_details?.frequency === '')\" class=\"error-message\">Please select the frequency of occurrence for this risk.</p>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- Risk Category -->\r\n    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'category'\"\r\n        [class.disabled]=\" activeSelector && activeSelector !== 'category' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"riskForm?.category?.selectedCategory\">\r\n            <img *ngIf=\"!riskForm?.category?.selectedCategory || activeSelector === 'category'\"\r\n                src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\" alt=\"\" />\r\n\r\n            <svg class=\"checkIcon\" *ngIf=\"riskForm?.category?.selectedCategory && activeSelector !== 'category'\"\r\n                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">Risk Category\r\n                    <i class=\"icons\" [appTooltip]=\"'Risk Categories are used to group similar risks.'\"\r\n                    placement=\"bottom\"\r\n                    delay=\"0\" type=\"white\"\r\n                    [tooltipMandatory]=\"true\">&#xe91f;</i></label>\r\n                <div class=\"select\" *ngIf=\"!riskForm?.category?.selectedCategory\">\r\n                    <input type=\"text\" (click)=\"activateSelector('category',true)\" placeholder=\"Select Risk Category\"\r\n                        readonly>\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"riskForm?.category?.selectedCategory\">\r\n                    <div class=\"chip-container\">\r\n                        <span class=\"chip\"><i class=\"icons\"\r\n                                (click)=\"remove('category',riskForm.category.selectedCategory)\">&#xe90d;</i>{{riskForm?.category?.selectedCategory?.category_name}}\r\n                        </span>\r\n                    </div>\r\n                    <button *ngIf=\"activeSelector !== 'category'\" class=\"edit\" type=\"button\"\r\n                        (click)=\"activateSelector('category',true)\"><i class=\"icons\">&#xe9ba;</i>\r\n                        Edit</button>\r\n                </div>\r\n            </div>\r\n            <ng-container *ngIf=\"riskForm?.categoryCustomTags?.length>0\">\r\n                <div class=\"vx-form-group\" *ngFor=\"let tag of riskForm.categoryCustomTags\">\r\n                    <label class=\"vx-control-panel\">{{tag.custom_tag_name}}</label>\r\n                    <input type=\"text\" [(ngModel)]=\"tag.custom_tag_value\" [placeholder]=\"tag.custom_tag_name\">\r\n                </div>\r\n            </ng-container>\r\n\r\n        </div>\r\n    </div>\r\n    <!-- Assessment Deadline -->\r\n    <!-- !settingsInfo?.assessment_deadline_enable && riskForm?.riskType !== 'REPORTED' && ((currentTimeStamp < editDetails?.assessment_date_timestamp) || !editDetails?.IfAssessmentDone ) -->\r\n    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'assessment'\" id=\"deadline\"\r\n        [class.disabled]=\" activeSelector && activeSelector !== 'assessment'  && sideSelectorElements.includes(activeSelector)\"\r\n        *ngIf=\"false\">\r\n        <div class=\"left\" [class.checked]=\"riskForm?.assessment_deadline_days>=1\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\"\r\n                *ngIf=\"riskForm?.assessment_deadline_days<1 || activeSelector === 'assessment'\" alt=\"\" />\r\n            <svg class=\"checkIcon\" *ngIf=\"riskForm?.assessment_deadline_days>=1 && activeSelector !== 'assessment'\"\r\n                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">Assessment Deadline <span class=\"required\">*</span>\r\n                    <i class=\"icons\" [appTooltip]=\"'This is the date that the inherent risk assessment must be completed by.'\"\r\n                    placement=\"bottom\"\r\n                    delay=\"0\" type=\"white\"\r\n                    [tooltipMandatory]=\"true\">&#xe91f;</i></label>\r\n                <div class=\"input\">\r\n                    <span class=\"text\">Set Number of days</span>\r\n                    <div class=\"input-group counter\">\r\n                        <button (click)=\"changeRiskAssessment('subtract')\">\r\n                            <i class=\"icons\">&#xea53;</i>\r\n                        </button>\r\n                        <input type=\"number\" [(ngModel)]=\"riskForm.assessment_deadline_days\"\r\n                            (focusin)=\"activateSelector('assessment',true)\"\r\n                            (focusout)=\"activateSelector('assessment',false)\" name=\"riskAssessmentDeadline\"\r\n                            validateAssessment #deadline=\"ngModel\"\r\n                            (ngModelChange)=\"changeRiskAssessmentDeadline($event)\"\r\n                             onkeydown=\"return event.keyCode !== 190\" min=\"0\" oninput=\"this.value = Math.abs(this.value)\" />\r\n                        <button (click)=\"changeRiskAssessment('add')\">\r\n                            <i class=\"icons\">&#xe915;</i>\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n                <p *ngIf=\"submitted && (riskForm?.assessment_deadline_days<1)\" class=\"error-message\">\r\n                    Enter a value greater than 0.\r\n                </p>\r\n                <label class=\"vx-control-panel\" *ngIf=\"riskForm?.assessment_deadline_days>=1\">\r\n                    This risk assessment needs to be completed by {{ date | date: 'dd MMM yyyy' }}\r\n                </label>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- Risk Overseer -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" [class.active]=\"activeSelector === 'overseer'\"\r\n        [class.disabled]=\" activeSelector && activeSelector !== 'overseer' && sideSelectorElements.includes(activeSelector)\"\r\n        *ngIf=\"riskForm.addOverseer\">\r\n        <div class=\"left\" [class.checked]=\"riskForm?.overseersList?.length>0\">\r\n            <img *ngIf=\"riskForm?.overseersList?.length==0 || activeSelector === 'overseer'\"\r\n                src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/oversight.svg\" alt=\"\" />\r\n            <svg class=\"checkIcon\" *ngIf=\"riskForm?.overseersList?.length>0 && activeSelector !== 'overseer'\"\r\n                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">Risk Overseer<i class=\"icons\" [appTooltip]=\"'This is the person that is responsible for overseeing the risk but who is not responsible for managing the risk.'\"\r\n                    placement=\"bottom\"\r\n                    delay=\"0\" type=\"white\"\r\n                    [tooltipMandatory]=\"true\">&#xe91f;</i></label>\r\n                <div class=\"select\" *ngIf=\"riskForm?.overseersList?.length==0 && riskForm?.overseersGroupList?.length==0 \">\r\n                    <input type=\"text\" (click)=\"activateSelector('overseer',true)\" placeholder=\"Select Risk Overseer(s)\"\r\n                        readonly>\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"riskForm?.overseersList?.length>0 || riskForm?.overseersGroupList.length > 0\">\r\n                    <div class=\"chip-container\" *ngIf=\"!featureflag_groups\" [class.more-one]=\"riskForm?.overseersList?.length>1\" [class.plus]=\"riskForm?.overseersList?.length>2\">\r\n                        <span class=\"chip\" *ngFor=\"let owner of riskForm?.overseersList?.slice(0,2)\"><i class=\"icons\"\r\n                                (click)=\"remove('overseer',owner)\">&#xe90d;</i> {{owner.member_name}}</span>\r\n                        <button class=\"count\" *ngIf=\"riskForm?.overseersList?.length > 2\" type=\"button\" appPopover\r\n                            (click)=\"popoverOverseer.popover()\" placement=\"right\">+\r\n                            {{riskForm?.overseersList?.slice(2).length}}</button>\r\n                    </div>\r\n                    <div class=\"chip-container\" *ngIf=\"featureflag_groups\">\r\n                        <div class=\"chip-inner\" >\r\n                            <span class=\"chip\">\r\n                                <span *ngIf=\"riskForm?.overseersList.length > 0\" class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">USER(S)</span></span>\r\n                            <button *ngIf=\"riskForm?.overseersList.length > 0\" class=\"count user\" appPopover (click)=\"overseer.popover()\" placement=\"right\">{{riskForm?.overseersList.length}}</button>\r\n                        </div>\r\n                        <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"riskForm?.overseersList.length > 0 && riskForm?.overseersGroupList.length > 0\" >&</span>\r\n                        <div class=\"chip-inner\" *ngIf=\"riskForm?.overseersGroupList.length > 0\" >\r\n                            <span class=\"chip\" ><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">USER GROUP(S)</span></span>\r\n                            <button class=\"count\" appPopover (click)=\"overseerGroup.popover()\" placement=\"right\">{{riskForm?.overseersGroupList?.length}}</button>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <button *ngIf=\"activeSelector !== 'overseer'\" class=\"edit\" type=\"button\"\r\n                        (click)=\"activateSelector('overseer',true)\"><i class=\"icons\">&#xe9ba;</i>\r\n                        Edit</button>\r\n                </div>\r\n                <app-popover #popoverOverseer [dontCloseonClick]=\"true\">\r\n                    <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let owner of riskForm?.overseersList | slice: 2; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('overseer',owner)\">&#xe90d;</i>\r\n                                        {{ owner.member_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n                <app-popover #overseer [dontCloseonClick]=\"true\">\r\n                    <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let owner of riskForm?.overseersList ; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('overseer',owner)\">&#xe90d;</i>\r\n                                        {{ owner.member_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n                <app-popover #overseerGroup  [dontCloseonClick]=\"true\">\r\n                    <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let data of (riskForm?.overseersGroupList)\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('overseergroup', data)\">&#xe90d;</i>\r\n                                        {{data.group_name}}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n                \r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- Risk Mitigation Priority -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" [class.active]=\"false\"\r\n        [class.disabled]=\"activeSelector && sideSelectorElements.includes(activeSelector)\"\r\n        *ngIf=\"riskForm.addMitigation\">\r\n        <div class=\"left\" [class.checked]=\"riskForm.mitigation\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/priority.svg\" *ngIf=\"!riskForm.mitigation\" alt=\"\" />\r\n            <!-- <svg viewBox=\"25 25 50 50\" class=\"edit-loader\">\r\n                <circle cx=\"50\" cy=\"50\" r=\"20\" fill=\"none\" stroke=\"#1e5dd3\" stroke-width=\"3\" class=\"loader-path\"></circle>\r\n            </svg> -->\r\n            <svg class=\"checkIcon\" *ngIf=\"riskForm.mitigation\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">Risk Mitigation Priority\r\n                    <i class=\"icons\" [appTooltip]=\"'This sets the priority level for the mitigation of each risk.'\"\r\n                    placement=\"bottom\"\r\n                    delay=\"0\" type=\"white\"\r\n                    [tooltipMandatory]=\"true\">&#xe91f;</i></label>\r\n\r\n                <cs-select [(ngModel)]=\"riskForm.mitigation\" [placeholder]=\"'Select a mitigation priority'\"\r\n                    name=\"riskForm.mitigation\">\r\n                    <cs-option *ngFor=\"let data of mitigationDetails\" [value]=\"data?.mitigation_id\"\r\n                        [color]=\"data?.mitigation_color\">\r\n                        {{ data.mitigation_name }}\r\n                    </cs-option>\r\n                </cs-select>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- Recommended Mitigation Plan -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"riskForm?.addMitigationPlan\">\r\n          <div id=\"riskSpace\" class=\"left\" [class.checked]=\"(riskForm.mitigationDescriptionPlan | spaceTrim) !== ''\">\r\n            <img *ngIf=\"(riskForm.mitigationDescriptionPlan | spaceTrim) ===''\"\r\n              src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/objectives.svg\" alt=\"\" />\r\n            <svg *ngIf=\"(riskForm.mitigationDescriptionPlan | spaceTrim) !== ''\" class=\"checkIcon\" \r\n              xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n              <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n              <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n          </div>\r\n          <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n              <label for=\"\" class=\"vx-control-panel\">Recommended Mitigation Plans<link rel=\"manifest\" href=\"./manifest.json\">\r\n                <i class=\"icons\" [appTooltip]=\"'Specify the mitigation plan that can be undertaken to mitigate the risk.'\"\r\n                    placement=\"bottom\"\r\n                    delay=\"0\" type=\"white\"\r\n                    [tooltipMandatory]=\"true\">&#xe91f;</i>\r\n              </label>\r\n              <marx-editor [(ngModel)]=\"riskForm.mitigationDescriptionPlan\"\r\n                [editorConfig]=\"mitigationDescriptionPlan\" (clickOutside)=\"checkMitigationPlan()\">\r\n              </marx-editor>\r\n            </div>\r\n          </div>\r\n    </div>\r\n    <!-- Risk Label -->\r\n    <div class=\"form-group-row\" [class.active]=\"false\" [class.disabled]=\"activeSelector && sideSelectorElements.includes(activeSelector)\" *ngIf=\"riskForm?.addRiskLabel\">\r\n        <div class=\"left\" [class.checked]=\"false\">\r\n            <!-- <img *ngIf=\"true\"\r\n                src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/oversight.svg\" alt=\"\" /> -->\r\n\r\n            <svg class=\"checkIcon\" *ngIf=\"true\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">RISK LABEL <i class=\"icons\" [appTooltip]=\"'Risk label info text here...'\" placement=\"bottom\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\">&#xe91f;</i></label>\r\n                <cs-select [(ngModel)]=\"riskForm.riskLabelValue\" [placeholder]=\"'Select a risk label'\"\r\n                    name=\"riskForm?.riskLabelValue\">\r\n                    <cs-option *ngFor=\"let data of riskLabelList\" [value]=\"data?.value\">\r\n                        {{ data?.name }}\r\n                    </cs-option>\r\n                </cs-select>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n</div>\r\n<app-responsibility-centers-list *ngIf=\"activeSelector === 'rc'\" [responsibilityCentersList]=\"responsibilityCentersList\"\r\n    [selectedResponsibilityCenters]=\"riskForm.responsibilityCentersList\" [rcIdKey]=\"'rc_id'\"\r\n    (saveSelectedList)=\"saveSelectedRCList($event)\" (closeRcList)=\"activateSelector('rc',false)\"\r\n    [singularText]=\"'Responsibility Center selected'\" [pluralText]=\"'Responsibility Centers selected'\" >\r\n</app-responsibility-centers-list>\r\n\r\n<app-owner-list *ngIf=\"!featureflag_groups && activeSelector === 'owner'\" [usersList]=\"ownersList\" [selectedUsers]=\"riskForm.ownersList\"\r\n    [userIdKey]=\"'member_id'\" [itemEmailKey]=\"'member_email'\" [itemNameKey]=\"'member_name'\" (saveSelectedList)=\"saveSelectedOwnersList($event)\"\r\n    [nonRemovableUsersList]=\"nonRemovableUsersList\" (closeUsersList)=\"activateSelector('owner',false)\"\r\n    [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\" ></app-owner-list>\r\n\r\n<user-group-list *ngIf=\"featureflag_groups && activeSelector === 'owner'\"  [userlist]=\"ownersList\"  [selectedUsers]=\"riskForm.ownersList\"  [groupList]=\"groupsList\"\r\n    [nonRemovableUserIds]=\"nonRemovableUsersList\" (save)=\"saveSelectedOwnersList($event)\" [selectedGroups]=\"riskForm.groupsList\"\r\n    (cancel)=\"activateSelector('owner',false)\" [groupEnabled]=\"true\" [featureflag]=\"featureflag_groups\"  >\r\n </user-group-list>\r\n\r\n <user-group-list *ngIf=\"featureflag_groups && activeSelector === 'overseer'\"  [userlist]=\"overseersList\"  [selectedUsers]=\"riskForm.overseersList\"  [groupList]=\"overseersGroupList\"\r\n    (save)=\"saveSelectedOverseersList($event)\" [selectedGroups]=\"riskForm.overseersGroupList\"\r\n    (cancel)=\"activateSelector('overseer',false)\" [groupEnabled]=\"true\" [featureflag]=\"featureflag_groups\"  >\r\n </user-group-list>\r\n\r\n<app-category-list *ngIf=\"activeSelector === 'category'\" [categoryList]=\"categoryList\"\r\n    [selectedCategory]=\"riskForm.category\" (saveSelectedCategory)=\"saveSelectedCategory($event)\"\r\n    (closeCategoriesList)=\"activateSelector('category',false)\"></app-category-list>\r\n<app-owner-list *ngIf=\"!featureflag_groups && activeSelector === 'overseer'\" [usersList]=\"overseersList\"\r\n    [selectedUsers]=\"riskForm.overseersList\" [userIdKey]=\"'member_id'\" [itemNameKey]=\"'member_name'\" [itemEmailKey]=\"'member_email'\"\r\n    (saveSelectedList)=\"saveSelectedOverseersList($event)\" (closeUsersList)=\"activateSelector('overseer',false)\"\r\n    [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\" >\r\n</app-owner-list>\r\n<app-loader-inline *ngIf=\"loader\"></app-loader-inline>\r\n<!-- <app-smiley-dialog *ngIf=\"showSmiley\" [message]=\"smileyMessage\" [actionButtons]=\"actionButtons\"\r\n    (action)=\"action($event)\" (closeSmiley)=\"closeSmiley($event)\"></app-smiley-dialog> -->\r\n\r\n<app-frequency-dialog-container \r\n    *ngIf=\"activeSelector === 'frequency'\" \r\n    [frequencyDetails]=\"frequencyDetails\" \r\n    (selectedFrequency)=\"frequencyData($event)\" \r\n    (closeFrequency)=\"activateSelector('frequency',false)\">\r\n</app-frequency-dialog-container>\r\n\r\n<app-smiley-dialog-inline\r\n    *ngIf=\"showSmiley\"\r\n    [message]=\"smileyMessage\"\r\n    [actionButtons]=\"actionButtons\"\r\n    (action)=\"action($event)\"\r\n    (closeSmiley)=\"closeSmiley($event)\">\r\n</app-smiley-dialog-inline>",
+                    template: "<div class=\"workflw-risk\" *ngIf=\"!showSmiley\">\r\n    <!-- Risk Type -->\r\n    <div class=\"form-group-row\" [class.active]=\"false\"\r\n        [class.disabled]=\"false\">\r\n        <div class=\"left\" [class.checked]=\"false\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/what.svg\" alt=\"im\" *ngIf=\"true\">\r\n\r\n            <svg *ngIf=\"false\" class=\"checkIcon\"\r\n                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">Risk Type <span class=\"required\">*</span></label>\r\n                <div class=\"risk-type-field\">\r\n                    <div class=\"type-item\" [class.active]=\"riskForm?.riskType === 'NORMAL'\">\r\n                        <button [class.disabled]=\"!riskTypeChangeAllowed\" (click)=\"changeRisk('NORMAL')\">ADD TO RISK REGISTER</button>\r\n                        <i class=\"icons info\" [appTooltip]=\"'This option lets you add a risk directly to the Risk Register. The risk owners will receive an alert and they can begin the the risk assessment process.'\" placement=\"bottom-right\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\">&#xe932;</i>\r\n                    </div>\r\n                    <div class=\"type-item\" [class.active]=\"riskForm?.riskType === 'REPORTED'\">\r\n                        <button [class.disabled]=\"!riskTypeChangeAllowed\" (click)=\"changeRisk('REPORTED')\">REPORT A RISK</button>\r\n                        <i class=\"icons info\" [appTooltip]=\"'This options lets you report a risk and assign it to the risk owners. The risk owners will have the option to either add the risk to the Risk Register or flag it for a follow-up at a later date.'\" placement=\"bottom-right\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\">&#xe932;</i>\r\n                    </div>\r\n                    <span class=\"background-glider\"></span>\r\n                </div>\r\n                <p *ngIf=\"false\" class=\"error-message\">Add a risk type</p>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- Risk Name -->\r\n    <div class=\"form-group-row\" [class.active]=\"false\"\r\n        [class.disabled]=\" activeSelector && activeSelector !== 'name'  && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"riskForm.title\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/what.svg\" alt=\"im\" *ngIf=\"riskForm?.title?.trim()?.length === 0 || activeSelector === 'name'\">\r\n\r\n            <svg *ngIf=\"riskForm?.title?.trim()?.length > 0 && activeSelector !== 'name'\" class=\"checkIcon\"\r\n                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">WHAT RISK WOULD YOU LIKE TO MANAGE? <span class=\"required\">*</span></label>\r\n                <input spaceTrim type=\"text\" (keydown)=\"activeSelector = 'name'\" (focusin)=\"activateSelector('name',true)\"\r\n                    (focusout)=\"activateSelector('name',false)\" [(ngModel)]=\"riskForm.title\"\r\n                    placeholder=\"Add a risk name\" *ngIf=\"riskForm?.title?.trim() =='' || activeSelector === 'name'\">\r\n                <div class=\"selected\" *ngIf=\"riskForm?.title?.trim()!= '' && activeSelector !== 'name'\">\r\n                    <div class=\"chip-container\">\r\n                        <span class=\"value\">{{riskForm.title}}</span>\r\n                    </div>\r\n                    <button class=\"edit\" (click)=\"activateSelector('name',true)\" type=\"button\"><i\r\n                            class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                </div>\r\n                <p *ngIf=\"submitted && (!riskForm.title)\" class=\"error-message\">Add a risk name</p>\r\n                <marx-editor [(ngModel)]=\"riskForm.description\" [editorConfig]=\"description\" (clickOutside)=\"checkDescription()\"></marx-editor>\r\n                <p *ngIf=\"submitted && (riskForm.riskType ==='REPORTED' && !riskForm?.description?.trim()?.length)\" class=\"error-message\">Add a risk description</p>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- RISK OWNER -->\r\n    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'owner'\"\r\n        [class.disabled]=\" activeSelector && activeSelector !== 'owner' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"riskForm?.ownersList?.length>0\">\r\n            <img *ngIf=\"riskForm?.ownersList?.length ==0 || activeSelector === 'owner'\"\r\n                src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/im-creating.svg\" alt=\"\" />\r\n\r\n            <svg *ngIf=\"riskForm?.ownersList?.length>0 && activeSelector !== 'owner'\" class=\"checkIcon\"\r\n                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">WHO IS RESPONSIBLE FOR MANAGING THIS RISK? <span class=\"required\">*</span>\r\n                    <i class=\"icons\" [appTooltip]=\"'This is the person that is responsible for managing the risk.'\"\r\n                    placement=\"bottom\"\r\n                    delay=\"0\" type=\"white\"\r\n                    [tooltipMandatory]=\"true\">&#xe91f;</i>\r\n                </label>\r\n                <div class=\"select\" *ngIf=\"riskForm?.ownersList?.length ==0\">\r\n                    <input type=\"text\" (click)=\"activateSelector('owner',true)\" placeholder=\"Select Risk Owner(s)\"\r\n                        readonly>\r\n                </div>\r\n                \r\n                <div class=\"selected\" *ngIf=\"riskForm?.ownersList?.length>0 || riskForm?.groupsList.length > 0\">\r\n                    <div class=\"chip-container\" *ngIf=\"!featureflag_groups\" [class.more-one]=\"riskForm?.ownersList?.length>1\" [class.plus]=\"riskForm?.ownersList?.length>2\">\r\n                      <ng-container *ngIf=\"(riskForm?.ownersList|shortMerge : nonRemovableUsersList) as ownerList\">\r\n                        <span class=\"chip\" *ngFor=\"let owner of ownerList?.slice(0,2)\"><i class=\"icons\"\r\n                            *ngIf=\"!nonRemovableUsersList.includes(owner?.member_id)\" (click)=\"remove('owner',owner)\">&#xe90d;</i>\r\n                            {{owner?.member_name}}</span>\r\n                        <button class=\"count\" *ngIf=\"riskForm?.ownersList?.length > 2\" type=\"button\" appPopover\r\n                            (click)=\"popoverOwner.popover()\" placement=\"right\">+\r\n                            {{riskForm?.ownersList?.slice(2).length}}</button>\r\n                          </ng-container>\r\n                    </div>\r\n                    <div class=\"chip-container\" *ngIf=\"featureflag_groups\">\r\n                        <div class=\"chip-inner\" >\r\n                            <span class=\"chip\">\r\n                                <span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">USER(S)</span></span>\r\n                            <button class=\"count user\" appPopover (click)=\"popoverUser.popover()\" placement=\"right\">{{riskForm?.ownersList.length}}</button>\r\n                        </div>\r\n                        <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"riskForm?.groupsList.length > 0\" >&</span>\r\n                        <div class=\"chip-inner\" *ngIf=\"riskForm?.groupsList.length > 0\" >\r\n                            <span class=\"chip\" ><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">USER GROUP(S)</span></span>\r\n                            <button class=\"count\" appPopover (click)=\"group.popover()\" placement=\"right\">{{riskForm?.groupsList?.length}}</button>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <button *ngIf=\"activeSelector !== 'owner'\" class=\"edit\" type=\"button\"\r\n                        (click)=\"activateSelector('owner',true)\"><i class=\"icons\">&#xe9ba;</i>\r\n                        Edit</button>\r\n                </div>\r\n                <p *ngIf=\"submitted && (riskForm?.ownersList?.length===0)\" class=\"error-message\">Select Owner(s) for this risk.</p>\r\n                <app-popover #popoverOwner [dontCloseonClick]=\"true\">\r\n                    <div class=\"action-list\">\r\n                      <ng-container *ngIf=\"(riskForm?.ownersList|shortMerge : nonRemovableUsersList) as ownerPop\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let owner of ownerPop | slice: 2; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i *ngIf = \"!nonRemovableUsersList.includes(owner?.member_id)\" class=\"icons\" (click)=\"remove('owner',owner)\">&#xe90d;</i>\r\n                                        {{ owner.member_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                      </ng-container>\r\n                    </div>\r\n                </app-popover>\r\n                <app-popover #popoverUser [dontCloseonClick]=\"true\">\r\n                    <div class=\"action-list\">\r\n                      <ng-container *ngIf=\"(riskForm?.ownersList|shortMerge : nonRemovableUsersList) as ownerPop\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let owner of ownerPop; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i *ngIf = \"!nonRemovableUsersList.includes(owner?.member_id)\" class=\"icons\" (click)=\"remove('owner',owner)\">&#xe90d;</i>\r\n                                        {{ owner.member_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                      </ng-container>\r\n                    </div>\r\n                </app-popover>\r\n                <app-popover #group [dontCloseonClick]=\"true\">\r\n                    <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let data of (riskForm?.groupsList)\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('Ownergroup', data)\">&#xe90d;</i>\r\n                                        {{data.group_name}}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- Responsibility Center -->\r\n    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'rc'\"\r\n        [class.disabled]=\" activeSelector && activeSelector !== 'rc' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"riskForm?.responsibilityCentersList?.length>0\">\r\n            <img *ngIf=\"riskForm?.responsibilityCentersList?.length==0 || activeSelector === 'rc'\"\r\n                src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/responsibility-center.svg\" alt=\"\">\r\n\r\n            <svg *ngIf=\"riskForm?.responsibilityCentersList?.length>0 && activeSelector !== 'rc'\" class=\"checkIcon\"\r\n                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">Responsibility Center <span class=\"required\">*</span>\r\n                    <i class=\"icons\" [appTooltip]=\"'Responsibility Centers represent the corporate and operational infrastructure of an organization. One or more Responsibility Centers can be exposed to a risk and accordingly, the risk must be assessed against each Responsibility Center.'\"\r\n                    placement=\"bottom\"\r\n                    delay=\"0\" type=\"white\"\r\n                    [tooltipMandatory]=\"true\">&#xe91f;</i>\r\n                </label>\r\n                <div class=\"select\" *ngIf=\"riskForm?.responsibilityCentersList?.length==0\">\r\n                    <input type=\"text\" (click)=\"activateSelector('rc',true)\"\r\n                        placeholder=\"Select Responsibility Center(s)\" readonly>\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"riskForm?.responsibilityCentersList?.length>0\">\r\n                    <div class=\"chip-container\" [class.more-one]=\"riskForm?.responsibilityCentersList?.length>1\" [class.plus]=\"riskForm?.responsibilityCentersList?.length>2\">\r\n                        <span class=\"chip\" *ngFor=\"let rcName of riskForm?.responsibilityCentersList?.slice(0,2)\"><i\r\n                                class=\"icons\" (click)=\"remove('rc',rcName)\">&#xe90d;</i> {{rcName.item_name}}</span>\r\n                        <button class=\"count\" *ngIf=\"riskForm?.responsibilityCentersList?.length > 2\" type=\"button\"\r\n                            appPopover (click)=\"popoverRC.popover()\" placement=\"right\">+\r\n                            {{riskForm?.responsibilityCentersList?.slice(2).length}}</button>\r\n                    </div>\r\n\r\n                    <button *ngIf=\"activeSelector !== 'rc'\" class=\"edit\" type=\"button\"\r\n                        (click)=\"activateSelector('rc',true)\"><i class=\"icons\">&#xe9ba;</i>\r\n                        Edit</button>\r\n                </div>\r\n                <p *ngIf=\"submitted && (riskForm?.responsibilityCentersList?.length==0)\" class=\"error-message\">Assign\r\n                    this risk to a Responsibility Center(s)</p>\r\n                <app-popover #popoverRC [dontCloseonClick]=\"true\">\r\n                    <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let rcName of riskForm?.responsibilityCentersList | slice: 2; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('rc',rcName)\">&#xe90d;</i>\r\n                                        {{ rcName.item_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- Risk Frequency -->\r\n    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'frequency'\" [class.disabled]=\"activeSelector && activeSelector !== 'frequency'  && sideSelectorElements?.includes(activeSelector)\" *ngIf=\"riskForm?.riskType !== 'REPORTED'\">\r\n        <div class=\"left\" [class.checked]=\"riskForm?.category?.selectedCategory\">\r\n            <img *ngIf=\"!riskForm?.frequency_details?.frequency || riskForm?.frequency_details?.frequency === '' || activeSelector === 'frequency'\"\r\n                src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\" alt=\"\" />\r\n\r\n            <svg class=\"checkIcon\" *ngIf=\"riskForm?.frequency_details?.frequency && riskForm?.frequency_details?.frequency !== '' || activeSelector !== 'frequency'\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">HOW OFTEN DOES THIS RISK NEED TO BE REASSESSED? <span class=\"required\">*</span>\r\n                    <i class=\"icons\" [appTooltip]=\"'The option lets you specify the risk reassessment frequency.'\" placement=\"bottom\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\">&#xe91f;</i></label>\r\n                <div class=\"select\" *ngIf=\"!riskForm?.frequency_details?.frequency\" (click)=\"activateSelector('frequency',true)\">\r\n                    <input type=\"text\" placeholder=\"Set a Reassessment Frequency\" readonly>\r\n                </div>\r\n                <div class=\"selected button-sec\" *ngIf=\"riskForm?.frequency_details?.frequency\">\r\n                    <span class=\"chip\" [appTooltip]=\"frequencyPlaceholder\" placement=\"bottom\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"false\">{{frequencyPlaceholder}}</span>\r\n                    <button class=\"edit\" type=\"button\" (click)=\"activateSelector('frequency',true)\"><i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                </div>\r\n                <p *ngIf=\"submitted && (!riskForm?.frequency_details?.frequency || riskForm?.frequency_details?.frequency === '')\" class=\"error-message\">Please select the frequency of occurrence for this risk.</p>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- Risk Category -->\r\n    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'category'\"\r\n        [class.disabled]=\" activeSelector && activeSelector !== 'category' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"riskForm?.category?.selectedCategory\">\r\n            <img *ngIf=\"!riskForm?.category?.selectedCategory || activeSelector === 'category'\"\r\n                src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\" alt=\"\" />\r\n\r\n            <svg class=\"checkIcon\" *ngIf=\"riskForm?.category?.selectedCategory && activeSelector !== 'category'\"\r\n                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">Risk Category\r\n                    <i class=\"icons\" [appTooltip]=\"'Risk Categories are used to group similar risks.'\"\r\n                    placement=\"bottom\"\r\n                    delay=\"0\" type=\"white\"\r\n                    [tooltipMandatory]=\"true\">&#xe91f;</i></label>\r\n                <div class=\"select\" *ngIf=\"!riskForm?.category?.selectedCategory\">\r\n                    <input type=\"text\" (click)=\"activateSelector('category',true)\" placeholder=\"Select Risk Category\"\r\n                        readonly>\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"riskForm?.category?.selectedCategory\">\r\n                    <div class=\"chip-container\">\r\n                        <span class=\"chip\"><i class=\"icons\"\r\n                                (click)=\"remove('category',riskForm.category.selectedCategory)\">&#xe90d;</i>{{riskForm?.category?.selectedCategory?.category_name}}\r\n                        </span>\r\n                    </div>\r\n                    <button *ngIf=\"activeSelector !== 'category'\" class=\"edit\" type=\"button\"\r\n                        (click)=\"activateSelector('category',true)\"><i class=\"icons\">&#xe9ba;</i>\r\n                        Edit</button>\r\n                </div>\r\n            </div>\r\n            <ng-container *ngIf=\"riskForm?.categoryCustomTags?.length>0\">\r\n                <div class=\"vx-form-group\" *ngFor=\"let tag of riskForm.categoryCustomTags\">\r\n                    <label class=\"vx-control-panel\">{{tag.custom_tag_name}}</label>\r\n                    <input type=\"text\" [(ngModel)]=\"tag.custom_tag_value\" [placeholder]=\"tag.custom_tag_name\">\r\n                </div>\r\n            </ng-container>\r\n\r\n        </div>\r\n    </div>\r\n    <!-- Assessment Deadline -->\r\n    <!-- !settingsInfo?.assessment_deadline_enable && riskForm?.riskType !== 'REPORTED' && ((currentTimeStamp < editDetails?.assessment_date_timestamp) || !editDetails?.IfAssessmentDone ) -->\r\n    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'assessment'\" id=\"deadline\"\r\n        [class.disabled]=\" activeSelector && activeSelector !== 'assessment'  && sideSelectorElements.includes(activeSelector)\"\r\n        *ngIf=\"false\">\r\n        <div class=\"left\" [class.checked]=\"riskForm?.assessment_deadline_days>=1\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\"\r\n                *ngIf=\"riskForm?.assessment_deadline_days<1 || activeSelector === 'assessment'\" alt=\"\" />\r\n            <svg class=\"checkIcon\" *ngIf=\"riskForm?.assessment_deadline_days>=1 && activeSelector !== 'assessment'\"\r\n                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">Assessment Deadline <span class=\"required\">*</span>\r\n                    <i class=\"icons\" [appTooltip]=\"'This is the date that the inherent risk assessment must be completed by.'\"\r\n                    placement=\"bottom\"\r\n                    delay=\"0\" type=\"white\"\r\n                    [tooltipMandatory]=\"true\">&#xe91f;</i></label>\r\n                <div class=\"input\">\r\n                    <span class=\"text\">Set Number of days</span>\r\n                    <div class=\"input-group counter\">\r\n                        <button (click)=\"changeRiskAssessment('subtract')\">\r\n                            <i class=\"icons\">&#xea53;</i>\r\n                        </button>\r\n                        <input type=\"number\" [(ngModel)]=\"riskForm.assessment_deadline_days\"\r\n                            (focusin)=\"activateSelector('assessment',true)\"\r\n                            (focusout)=\"activateSelector('assessment',false)\" name=\"riskAssessmentDeadline\"\r\n                            validateAssessment #deadline=\"ngModel\"\r\n                            (ngModelChange)=\"changeRiskAssessmentDeadline($event)\"\r\n                             onkeydown=\"return event.keyCode !== 190\" min=\"0\" oninput=\"this.value = Math.abs(this.value)\" />\r\n                        <button (click)=\"changeRiskAssessment('add')\">\r\n                            <i class=\"icons\">&#xe915;</i>\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n                <p *ngIf=\"submitted && (riskForm?.assessment_deadline_days<1)\" class=\"error-message\">\r\n                    Enter a value greater than 0.\r\n                </p>\r\n                <label class=\"vx-control-panel\" *ngIf=\"riskForm?.assessment_deadline_days>=1\">\r\n                    This risk assessment needs to be completed by {{ date | date: 'dd MMM yyyy' }}\r\n                </label>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- Risk Overseer -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" [class.active]=\"activeSelector === 'overseer'\"\r\n        [class.disabled]=\" activeSelector && activeSelector !== 'overseer' && sideSelectorElements.includes(activeSelector)\"\r\n        *ngIf=\"riskForm.addOverseer\">\r\n        <div class=\"left\" [class.checked]=\"riskForm?.overseersList?.length>0\">\r\n            <img *ngIf=\"riskForm?.overseersList?.length==0 || activeSelector === 'overseer'\"\r\n                src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/oversight.svg\" alt=\"\" />\r\n            <svg class=\"checkIcon\" *ngIf=\"riskForm?.overseersList?.length>0 && activeSelector !== 'overseer'\"\r\n                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">Risk Overseer<i class=\"icons\" [appTooltip]=\"'This is the person that is responsible for overseeing the risk but who is not responsible for managing the risk.'\"\r\n                    placement=\"bottom\"\r\n                    delay=\"0\" type=\"white\"\r\n                    [tooltipMandatory]=\"true\">&#xe91f;</i></label>\r\n                <div class=\"select\" *ngIf=\"riskForm?.overseersList?.length==0 && riskForm?.overseersGroupList?.length==0 \">\r\n                    <input type=\"text\" (click)=\"activateSelector('overseer',true)\" placeholder=\"Select Risk Overseer(s)\"\r\n                        readonly>\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"riskForm?.overseersList?.length>0 || riskForm?.overseersGroupList.length > 0\">\r\n                    <div class=\"chip-container\" *ngIf=\"!featureflag_groups\" [class.more-one]=\"riskForm?.overseersList?.length>1\" [class.plus]=\"riskForm?.overseersList?.length>2\">\r\n                        <span class=\"chip\" *ngFor=\"let owner of riskForm?.overseersList?.slice(0,2)\"><i class=\"icons\"\r\n                                (click)=\"remove('overseer',owner)\">&#xe90d;</i> {{owner.member_name}}</span>\r\n                        <button class=\"count\" *ngIf=\"riskForm?.overseersList?.length > 2\" type=\"button\" appPopover\r\n                            (click)=\"popoverOverseer.popover()\" placement=\"right\">+\r\n                            {{riskForm?.overseersList?.slice(2).length}}</button>\r\n                    </div>\r\n                    <div class=\"chip-container\" *ngIf=\"featureflag_groups\">\r\n                        <div class=\"chip-inner\" >\r\n                            <span class=\"chip\">\r\n                                <span *ngIf=\"riskForm?.overseersList.length > 0\" class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">USER(S)</span></span>\r\n                            <button *ngIf=\"riskForm?.overseersList.length > 0\" class=\"count user\" appPopover (click)=\"overseer.popover()\" placement=\"right\">{{riskForm?.overseersList.length}}</button>\r\n                        </div>\r\n                        <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"riskForm?.overseersList.length > 0 && riskForm?.overseersGroupList.length > 0\" >&</span>\r\n                        <div class=\"chip-inner\" *ngIf=\"riskForm?.overseersGroupList.length > 0\" >\r\n                            <span class=\"chip\" ><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">USER GROUP(S)</span></span>\r\n                            <button class=\"count\" appPopover (click)=\"overseerGroup.popover()\" placement=\"right\">{{riskForm?.overseersGroupList?.length}}</button>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <button *ngIf=\"activeSelector !== 'overseer'\" class=\"edit\" type=\"button\"\r\n                        (click)=\"activateSelector('overseer',true)\"><i class=\"icons\">&#xe9ba;</i>\r\n                        Edit</button>\r\n                </div>\r\n                <app-popover #popoverOverseer [dontCloseonClick]=\"true\">\r\n                    <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let owner of riskForm?.overseersList | slice: 2; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('overseer',owner)\">&#xe90d;</i>\r\n                                        {{ owner.member_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n                <app-popover #overseer [dontCloseonClick]=\"true\">\r\n                    <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let owner of riskForm?.overseersList ; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('overseer',owner)\">&#xe90d;</i>\r\n                                        {{ owner.member_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n                <app-popover #overseerGroup  [dontCloseonClick]=\"true\">\r\n                    <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let data of (riskForm?.overseersGroupList)\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('overseergroup', data)\">&#xe90d;</i>\r\n                                        {{data.group_name}}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n                \r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- Risk Mitigation Priority -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" [class.active]=\"false\"\r\n        [class.disabled]=\"activeSelector && sideSelectorElements.includes(activeSelector)\"\r\n        *ngIf=\"riskForm.addMitigation\">\r\n        <div class=\"left\" [class.checked]=\"riskForm.mitigation\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/priority.svg\" *ngIf=\"!riskForm.mitigation\" alt=\"\" />\r\n            <!-- <svg viewBox=\"25 25 50 50\" class=\"edit-loader\">\r\n                <circle cx=\"50\" cy=\"50\" r=\"20\" fill=\"none\" stroke=\"#1e5dd3\" stroke-width=\"3\" class=\"loader-path\"></circle>\r\n            </svg> -->\r\n            <svg class=\"checkIcon\" *ngIf=\"riskForm.mitigation\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">Risk Mitigation Priority\r\n                    <i class=\"icons\" [appTooltip]=\"'This sets the priority level for the mitigation of each risk.'\"\r\n                    placement=\"bottom\"\r\n                    delay=\"0\" type=\"white\"\r\n                    [tooltipMandatory]=\"true\">&#xe91f;</i></label>\r\n\r\n                <cs-select [(ngModel)]=\"riskForm.mitigation\" [placeholder]=\"'Select a mitigation priority'\"\r\n                    name=\"riskForm.mitigation\">\r\n                    <cs-option *ngFor=\"let data of mitigationDetails\" [value]=\"data?.mitigation_id\"\r\n                        [color]=\"data?.mitigation_color\">\r\n                        {{ data.mitigation_name }}\r\n                    </cs-option>\r\n                </cs-select>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- Recommended Mitigation Plan -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"riskForm?.addMitigationPlan\">\r\n          <div id=\"riskSpace\" class=\"left\" [class.checked]=\"(riskForm.mitigationDescriptionPlan | spaceTrim) !== ''\">\r\n            <img *ngIf=\"(riskForm.mitigationDescriptionPlan | spaceTrim) ===''\"\r\n              src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/objectives.svg\" alt=\"\" />\r\n            <svg *ngIf=\"(riskForm.mitigationDescriptionPlan | spaceTrim) !== ''\" class=\"checkIcon\" \r\n              xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n              <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n              <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n          </div>\r\n          <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n              <label for=\"\" class=\"vx-control-panel\">Recommended Mitigation Plans<link rel=\"manifest\" href=\"./manifest.json\">\r\n                <i class=\"icons\" [appTooltip]=\"'Specify the mitigation plan that can be undertaken to mitigate the risk.'\"\r\n                    placement=\"bottom\"\r\n                    delay=\"0\" type=\"white\"\r\n                    [tooltipMandatory]=\"true\">&#xe91f;</i>\r\n              </label>\r\n              <marx-editor [(ngModel)]=\"riskForm.mitigationDescriptionPlan\"\r\n                [editorConfig]=\"mitigationDescriptionPlan\" (clickOutside)=\"checkMitigationPlan()\">\r\n              </marx-editor>\r\n            </div>\r\n          </div>\r\n    </div>\r\n    <!-- Risk Label -->\r\n    <div class=\"form-group-row\" [class.active]=\"false\" [class.disabled]=\"activeSelector && sideSelectorElements.includes(activeSelector)\" *ngIf=\"riskForm?.addRiskLabel\">\r\n        <div class=\"left\" [class.checked]=\"false\">\r\n            <!-- <img *ngIf=\"true\"\r\n                src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/oversight.svg\" alt=\"\" /> -->\r\n\r\n            <svg class=\"checkIcon\" *ngIf=\"true\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">RISK LABEL <i class=\"icons\" [appTooltip]=\"'Risk label info text here...'\" placement=\"bottom\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\">&#xe91f;</i></label>\r\n                <cs-select [(ngModel)]=\"riskForm.riskLabelValue\" [placeholder]=\"'Select a risk label'\"\r\n                    name=\"riskForm?.riskLabelValue\">\r\n                    <cs-option *ngFor=\"let data of riskLabelList\" [value]=\"data?.value\">\r\n                        {{ data?.name }}\r\n                    </cs-option>\r\n                </cs-select>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n</div>\r\n<app-responsibility-centers-list *ngIf=\"activeSelector === 'rc'\" [responsibilityCentersList]=\"responsibilityCentersList\"\r\n    [selectedResponsibilityCenters]=\"riskForm.responsibilityCentersList\" [rcIdKey]=\"'rc_id'\"\r\n    (saveSelectedList)=\"saveSelectedRCList($event)\" (closeRcList)=\"activateSelector('rc',false)\"\r\n    [singularText]=\"'Responsibility Center selected'\" [pluralText]=\"'Responsibility Centers selected'\" >\r\n</app-responsibility-centers-list>\r\n\r\n<app-owner-list *ngIf=\"!featureflag_groups && activeSelector === 'owner'\" [usersList]=\"ownersList\" [selectedUsers]=\"riskForm.ownersList\"\r\n    [userIdKey]=\"'member_id'\" [itemEmailKey]=\"'member_email'\" [itemNameKey]=\"'member_name'\" (saveSelectedList)=\"saveSelectedOwnersList($event)\"\r\n    [nonRemovableUsersList]=\"nonRemovableUsersList\" (closeUsersList)=\"activateSelector('owner',false)\"\r\n    [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\" ></app-owner-list>\r\n\r\n<user-group-list *ngIf=\"featureflag_groups && activeSelector === 'owner'\"  [userlist]=\"ownersList\"  [selectedUsers]=\"riskForm.ownersList\"  [groupList]=\"groupsList\"\r\n    [nonRemovableUserIds]=\"nonRemovableUsersList\" (save)=\"saveSelectedOwnersList($event)\" [selectedGroups]=\"riskForm.groupsList\"\r\n    (cancel)=\"activateSelector('owner',false)\" [groupEnabled]=\"true\" [featureflag]=\"featureflag_groups\"  >\r\n </user-group-list>\r\n\r\n <user-group-list *ngIf=\"featureflag_groups && activeSelector === 'overseer'\"  [userlist]=\"overseersList\"  [selectedUsers]=\"riskForm.overseersList\"  [groupList]=\"overseersGroupList\"\r\n    (save)=\"saveSelectedOverseersList($event)\" [selectedGroups]=\"riskForm.overseersGroupList\"\r\n    (cancel)=\"activateSelector('overseer',false)\" [groupEnabled]=\"true\" [featureflag]=\"featureflag_groups\"  >\r\n </user-group-list>\r\n\r\n<app-category-list *ngIf=\"activeSelector === 'category'\" [categoryList]=\"categoryList\"\r\n    [selectedCategory]=\"riskForm.category\" (saveSelectedCategory)=\"saveSelectedCategory($event)\"\r\n    (closeCategoriesList)=\"activateSelector('category',false)\"></app-category-list>\r\n<app-owner-list *ngIf=\"!featureflag_groups && activeSelector === 'overseer'\" [usersList]=\"overseersList\"\r\n    [selectedUsers]=\"riskForm.overseersList\" [userIdKey]=\"'member_id'\" [itemNameKey]=\"'member_name'\" [itemEmailKey]=\"'member_email'\"\r\n    (saveSelectedList)=\"saveSelectedOverseersList($event)\" (closeUsersList)=\"activateSelector('overseer',false)\"\r\n    [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\" >\r\n</app-owner-list>\r\n<app-loader-inline *ngIf=\"loader\"></app-loader-inline>\r\n<!-- <app-smiley-dialog *ngIf=\"showSmiley\" [message]=\"smileyMessage\" [actionButtons]=\"actionButtons\"\r\n    (action)=\"action($event)\" (closeSmiley)=\"closeSmiley($event)\"></app-smiley-dialog> -->\r\n\r\n<app-frequency-dialog-container \r\n    *ngIf=\"activeSelector === 'frequency'\" \r\n    [frequencyDetails]=\"frequencyDetails\" \r\n    (selectedFrequency)=\"frequencyData($event)\" \r\n    (closeFrequency)=\"activateSelector('frequency',false)\">\r\n</app-frequency-dialog-container>\r\n\r\n<app-smiley-dialog-inline\r\n    *ngIf=\"showSmiley\"\r\n    [message]=\"smileyMessage\"\r\n    [actionButtons]=\"actionButtons\"\r\n    (action)=\"action($event)\"\r\n    (closeSmiley)=\"closeSmiley($event)\">\r\n</app-smiley-dialog-inline>",
                     styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");::ng-deep .workflw-risk{display:block;position:relative}", "@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.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-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}button{font-family:Poppins,sans-serif}::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-left-color:#707070;border-bottom:1px solid #707070;border-right:1px solid #707070;border-top-color:#707070;content:\"\";display:inline-block;right:15px;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 rgba(30,93,211,.27)}::ng-deep .vx-form-group .select .custom-input.frequency-custom-input{padding-right:116px}::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;-moz-user-select:none;-ms-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}::ng-deep .vx-form-group .tab-group .upload-file{padding:16px 24px;display:flex;align-items:center}::ng-deep .vx-form-group .tab-group .upload-file .image{width:80px;margin-right:20px}::ng-deep .vx-form-group .tab-group .upload-file .browse{display:flex;align-items:center;justify-content:center;width:calc(100% - 100px);text-align:center}::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;top:0;margin:0;padding:0;right:0;bottom:0;left: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:12px \u200B24px}::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%}::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:11px!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;width:100%;margin-top:4px;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:16px;font-weight:400;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,::ng-deep .vx-form-group input[type=text]{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::-moz-placeholder,::ng-deep .vx-form-group input[type=text]::-moz-placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group .input:-ms-input-placeholder,::ng-deep .vx-form-group input[type=text]:-ms-input-placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group .input::placeholder,::ng-deep .vx-form-group input[type=text]::placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group .input:focus,::ng-deep .vx-form-group .input:hover,::ng-deep .vx-form-group input[type=text]:focus,::ng-deep .vx-form-group input[type=text]:hover{border-color:#1e5dd3;box-shadow:0 0 5px rgba(30,93,211,.27)}::ng-deep .vx-form-group .input.error,::ng-deep .vx-form-group input[type=text].error{border-color:#eb2424;color:#eb2424;margin-bottom:4px}::ng-deep .vx-form-group .input.error:focus,::ng-deep .vx-form-group input[type=text].error:focus{box-shadow:0 0 5px rgba(211,30,30,.27)}::ng-deep .vx-form-group .input:disabled,::ng-deep .vx-form-group input[type=text]:disabled{background:#f1f1f1;cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}::ng-deep .vx-form-group .input:disabled:hover,::ng-deep .vx-form-group input[type=text]:disabled:hover{border-color:#dbdbdb;box-shadow:none}::ng-deep .vx-form-group .input span.text,::ng-deep .vx-form-group input[type=text] span.text{font-size:13px;color:#747576;font-weight:400;display:block;width:100%}::ng-deep .vx-form-group .input .input-group,::ng-deep .vx-form-group input[type=text] .input-group{display:flex;align-items:center}::ng-deep .vx-form-group .input .input-group.counter,::ng-deep .vx-form-group input[type=text] .input-group.counter{min-width:96px;width:96px}::ng-deep .vx-form-group .input .input-group.counter button,::ng-deep .vx-form-group input[type=text] .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 .input-group.counter input,::ng-deep .vx-form-group input[type=text] .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 .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-outer-spin-button,::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}::ng-deep .vx-form-group .input+.file-list,::ng-deep .vx-form-group input[type=text]+.file-list{margin-top:8px}::ng-deep .vx-form-group .input::-moz-placeholder,::ng-deep .vx-form-group input[type=text]::-moz-placeholder{font-size:13px}::ng-deep .vx-form-group .input::placeholder,::ng-deep .vx-form-group input[type=text]::placeholder{font-size:13px}::ng-deep .vx-form-group .input:-ms-input-placeholder,::ng-deep .vx-form-group input[type=text]:-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group .input::-ms-input-placeholder,::ng-deep .vx-form-group input[type=text]::-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{width:100%;position:relative;z-index:1;margin:0 4px 0 0}::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;top:0;right:0;bottom:0;left: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;-moz-user-select:none;-ms-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:300px}::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}::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:1px solid #f1f1f1;border-radius:2px;background:#fff;outline:none;cursor:pointer;display:block;height:24px;padding:0 5px 0 4px;font-size:11px;font-weight:500;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 #1e5dd3;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 marx-editor{margin-top:8px;display:block}::ng-deep .vx-form-group marx-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb}::ng-deep .vx-form-group marx-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 marx-editor .editor-container .editable-block ul{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group marx-editor .editor-container .editable-block ul li{list-style:disc}::ng-deep .vx-form-group marx-editor .editor-container .editable-block ol{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group marx-editor .editor-container .editable-block ol li{list-style:decimal}::ng-deep .vx-form-group marx-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 marx-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 marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .vx-form-group marx-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 marx-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 marx-editor .editor-container:focus-within{border-color:#1e5dd3!important}::ng-deep .vx-form-group marx-editor .editor-container:focus-within .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group marx-editor .editor-container:hover{border-color:#1e5dd3!important}::ng-deep .vx-form-group marx-editor .editor-container:hover .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group marx-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}::ng-deep .vx-form-group .date-time-picker:focus-within{border-color:#1e5dd3;box-shadow:0 0 5px rgba(30,93,211,.27)}::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:#fff;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::-moz-placeholder{color:#999;font-size:13px}::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:16px;position:absolute;left:12px;top:0;color:#bcbcbc;font-size:16px;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 .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;-moz-user-select:none;-ms-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.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:208px;height:32px;z-index:-1;transition:.25s ease-out}.left{width:36px;height:36px;margin-top:30px;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 0 #34aa44;-webkit-animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;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;-webkit-animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}.left .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;-webkit-animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards;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;-moz-user-select:none;-ms-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;top:2px;right:0;bottom:0;left: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 .custom-input,.form-group-row.active .right .vx-form-group input{border-color:#1e5dd3;box-shadow:0 0 5px rgba(30,93,211,.27)}::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}@-webkit-keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes strokeCheck{to{stroke-dashoffset:0}}@-webkit-keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}.action-list{width:220px}.action-list ul{padding:0;margin:0;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.action-list ul.action-item{display:block}.action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.action-list ul.action-item li button:hover{background:#f3f3f3}.action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.action-list ul.action-item li .avatar-card.within-con{display:block}.action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.action-list ul.action-item li .avatar-card .avatar img{width:100%}.action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;-moz-text-align-last:left;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:5px}.action-list ul.action-item li .avatar-card.no-image{display:block}.action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.action-list ul.action-item li .chip-item span.id{font-size:9px}.action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.action-list ul.action-item li:first-child{-webkit-animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(2){-webkit-animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(3){-webkit-animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(4){-webkit-animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(5){-webkit-animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(6){-webkit-animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(7){-webkit-animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(8){-webkit-animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(9){-webkit-animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(10){-webkit-animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@-webkit-keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@-webkit-keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}@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{-webkit-animation:rotate 2s linear infinite;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;-webkit-animation:dash 1.5s ease-in-out infinite;animation:dash 1.5s ease-in-out infinite;stroke-linecap:round}@-webkit-keyframes rotate{to{transform:rotate(1turn)}}@keyframes rotate{to{transform:rotate(1turn)}}@-webkit-keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35}to{stroke-dasharray:89,200;stroke-dashoffset:-124}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35}to{stroke-dasharray:89,200;stroke-dashoffset:-124}}::ng-deep .dropdown{position:fixed;background:#fff;box-shadow:0 3px 6px #00000029;padding:24px 0;z-index:9;max-height:calc(100vh - 200px);overflow:auto}::ng-deep .dropdown ul.dropdown-list{padding:0 20px;margin:0;display:block}::ng-deep .dropdown ul.dropdown-list li{list-style:none}::ng-deep .dropdown ul.dropdown-list li app-cs-radio{display:flex}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.radio{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.value{padding:11px 12px 11px 32px;width:100%;border:1px solid #bcbcbc;border-radius:4px;margin-left:0;max-width:100%}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item svg{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item input[type=radio]:checked~span.value{background:#e8feeb;border-color:#34aa44}::ng-deep .dropdown ul.dropdown-list li+li{margin-top:8px}app-smiley-dialog{position:relative;z-index:10}app-smiley-dialog-inline{position:absolute;top:-3px;right:0;bottom:0;z-index:999;width:520px;height:calc(100vh + 3px)}::ng-deep .vx-overlay{position:fixed;z-index:3;top:0;right:0;bottom:0;left:0}dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}dp-date-picker input:focus{outline:none}dp-date-picker .dp-popup{width:412px;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}dp-date-picker .dp-popup dp-day-calendar,dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}dp-date-picker .dp-popup dp-day-calendar button,dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover{background-color:#f3f3f3}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,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}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays{display:flex;justify-content:space-around}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover{background-color:#f3f3f3}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected{background:#1e5dd3}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,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}dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}dp-date-picker .dp-open+div{position:fixed!important;top:0!important;right:0!important;bottom:0!important;left:0!important;display:flex;justify-content:center;align-items:center;z-index:99;pointer-events:none;background:rgba(0,0,0,.3)}@-webkit-keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}@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;position:relative;margin-right:5px;border:1px solid #747576;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,#747576 1%,#747576 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));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 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,#f31c39 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));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.css,::ng-deep span.file.less,::ng-deep span.file.scss,::ng-deep span.file.xls,::ng-deep span.file.xlsx{border-color:#34aa44}::ng-deep span.file.css:before,::ng-deep span.file.less:before,::ng-deep span.file.scss:before,::ng-deep span.file.xls:before,::ng-deep span.file.xlsx:before{background:linear-gradient(45deg,#34aa44,#34aa44 1%,#34aa44 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.css:after,::ng-deep span.file.less:after,::ng-deep span.file.scss:after,::ng-deep span.file.xls:after,::ng-deep span.file.xlsx:after{border-color:#34aa44;color:#34aa44}::ng-deep span.file.css .format,::ng-deep span.file.less .format,::ng-deep span.file.scss .format,::ng-deep span.file.xls .format,::ng-deep span.file.xlsx .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,#1e5dd3 1%,#1e5dd3 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));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.ai,::ng-deep span.file.html,::ng-deep span.file.jpeg,::ng-deep span.file.jpg,::ng-deep span.file.png,::ng-deep span.file.ppt{border-color:#f6882f}::ng-deep span.file.ai:before,::ng-deep span.file.html:before,::ng-deep span.file.jpeg:before,::ng-deep span.file.jpg:before,::ng-deep span.file.png:before,::ng-deep span.file.ppt:before{background:linear-gradient(45deg,#f6882f,#f6882f 1%,#f6882f 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.ai:after,::ng-deep span.file.html:after,::ng-deep span.file.jpeg:after,::ng-deep span.file.jpg:after,::ng-deep span.file.png:after,::ng-deep span.file.ppt:after{border-color:#f6882f}::ng-deep span.file.ai .format,::ng-deep span.file.html .format,::ng-deep span.file.jpeg .format,::ng-deep span.file.jpg .format,::ng-deep span.file.png .format,::ng-deep span.file.ppt .format{color:#f6882f}::ng-deep span.file.php{border-color:#7aa6f7}::ng-deep span.file.php:before{background:linear-gradient(45deg,#7aa6f7,#7aa6f7 1%,#7aa6f7 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));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:rgba(0,0,0,.05)!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:14px solid #f1f1f1;border-bottom:12px solid transparent;border-top:12px solid 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:14px solid #f1f1f1;border-bottom:12px solid transparent;border-top:12px solid 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:calc(224px / 2 - 20px)!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 marx-modal .popup-modal-background{background-color:#161b2fcc!important}"]
                 },] }
     ];