npm - @sunbird-cb/cbp-ai - Versions diffs - 0.1.122 → 0.1.123 - Mend

@sunbird-cb/cbp-ai 0.1.122 → 0.1.123

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/fesm2022/sunbird-cb-cbp-ai.mjs CHANGED Viewed

@@ -6,7 +6,7 @@ import * as i1$1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import * as i2 from '@angular/forms';
 import { Validators, FormControl, FormGroup, FormArray, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { map, debounceTime, distinctUntilChanged, startWith, finalize, switchMap, catchError, tap, takeWhile, takeUntil, take } from 'rxjs/operators';
+import { map, tap, debounceTime, distinctUntilChanged, startWith, finalize, switchMap, catchError, takeWhile, takeUntil, take } from 'rxjs/operators';
 import * as _ from 'lodash';
 import * as i1 from '@angular/common/http';
 import { HttpHeaders, HttpParams } from '@angular/common/http';
@@ -822,11 +822,12 @@ class SharedService {
             : API_END_POINTS$1.DOWNLOAD_PDF;
         const url = `${this.baseUrl}${endpoint}?state_center_id=${state_center_id}&language=${language}`;
         const headers = this.headers;
+        // Returns an observable so the caller can keep the loader visible until the file is saved
         return this.http.get(url, {
             headers,
             observe: 'response',
             responseType: 'blob'
-        }).subscribe((res) => {
+        }).pipe(tap((res) => {
             const contentDisposition = res.headers.get('content-disposition');
             console.log('contentDisposition', res.headers);
             let filename = `CBP_Report_${state_center_id}.pdf`;
@@ -844,7 +845,7 @@ class SharedService {
             a.download = filename;
             a.click();
             URL.revokeObjectURL(downloadUrl);
-        });
+        }));
     }
     downloadPdfForDepartment(state_center_id, department_id, context, language) {
         const endpoint = context === 'acbp'
@@ -852,11 +853,12 @@ class SharedService {
             : API_END_POINTS$1.DOWNLOAD_PDF;
         const url = `${this.baseUrl}${endpoint}?state_center_id=${state_center_id}&department_id=${department_id}&language=${language}`;
         const headers = this.headers;
+        // Returns an observable so the caller can keep the loader visible until the file is saved
         return this.http.get(url, {
             headers,
             observe: 'response',
             responseType: 'blob'
-        }).subscribe((res) => {
+        }).pipe(tap((res) => {
             const contentDisposition = res.headers.get('content-disposition');
             console.log('contentDisposition', res.headers);
             let filename = `CBP_Report_${state_center_id}_${department_id}.pdf`;
@@ -874,7 +876,7 @@ class SharedService {
             a.download = filename;
             a.click();
             URL.revokeObjectURL(downloadUrl);
-        });
+        }));
     }
     getCenterBasedDepartment(state_center_id, options) {
         const headers = this.headers;
@@ -1029,7 +1031,7 @@ class SharedService {
                     "identifier",
                     "avgRating"
                 ],
-                "limit": 1000,
+                "limit": identifiers?.length || 0,
                 "offset": 0,
                 "sort_by": {}
             }
@@ -12886,6 +12888,7 @@ class ViewFinalCbpPlanComponent {
             { "code": "bn", label: "Bengali" },];
         this.filteredLanguages = [...this.languages];
         this.loading = false;
+        this.downloadInProgress = false;
         this.designationData = [];
         this.totalCompetencieObj = { total: 0, behavioral: 0, functional: 0, domain: 0 };
         this.pdfTrigger = false;
@@ -13680,7 +13683,6 @@ class ViewFinalCbpPlanComponent {
         }, 2000);
     }
     generateExcel(jsonArray, filename = "final.xlsx") {
-        this.loading = true;
         if (!jsonArray || jsonArray.length === 0)
             return;
         const excelCellTextLimit = 32000;
@@ -13817,9 +13819,6 @@ class ViewFinalCbpPlanComponent {
         XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
         // Export Excel
         XLSX.writeFile(wb, filename);
-        setTimeout(() => {
-            this.loading = false;
-        }, 5000);
     }
     downloadCSV() {
         let fileName = '';
@@ -13829,21 +13828,42 @@ class ViewFinalCbpPlanComponent {
         else {
             fileName = `CBP_Report_${this.sharedService?.cbpPlanFinalObj.ministry.identifier}.xlsx`;
         }
-        this.generateExcel(this.jsonData, fileName);
+        this.loading = true;
+        this.downloadInProgress = true;
+        // Let the loader render before the synchronous Excel generation blocks the UI thread
+        setTimeout(() => {
+            try {
+                this.generateExcel(this.jsonData, fileName);
+            }
+            finally {
+                this.loading = false;
+                this.downloadInProgress = false;
+            }
+        });
     }
     downloadPdfFromBE(context) {
         let selectedLanguage = this.filterForm.get('language')?.value || 'en';
         this.loading = true;
+        this.downloadInProgress = true;
         //  this.sharedService.downloadPdf(this.sharedService?.cbpPlanFinalObj.ministry.identifier)
-        if (!this.sharedService?.cbpPlanFinalObj.departments) {
-            this.sharedService.downloadPdf(this.sharedService?.cbpPlanFinalObj.ministry.identifier, context, selectedLanguage);
-        }
-        else {
-            this.sharedService.downloadPdfForDepartment(this.sharedService?.cbpPlanFinalObj.ministry.identifier, this.sharedService?.cbpPlanFinalObj.departments, context, selectedLanguage);
-        }
-        setTimeout(() => {
-            this.loading = false;
-        }, 5000);
+        const download$ = !this.sharedService?.cbpPlanFinalObj.departments
+            ? this.sharedService.downloadPdf(this.sharedService?.cbpPlanFinalObj.ministry.identifier, context, selectedLanguage)
+            : this.sharedService.downloadPdfForDepartment(this.sharedService?.cbpPlanFinalObj.ministry.identifier, this.sharedService?.cbpPlanFinalObj.departments, context, selectedLanguage);
+        // Keep the loader until the file has actually been received and saved
+        download$.subscribe({
+            next: () => {
+                this.loading = false;
+                this.downloadInProgress = false;
+            },
+            error: () => {
+                this.loading = false;
+                this.downloadInProgress = false;
+                this.snackBar.open('Unable to download PDF', 'X', {
+                    duration: 3000,
+                    panelClass: ['snackbar-error']
+                });
+            }
+        });
     }
     getSelectedCourses(department) {
         if (!department?.cbp_plans?.length) {
@@ -13864,11 +13884,11 @@ class ViewFinalCbpPlanComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewFinalCbpPlanComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i1$1.MatDialog }, { token: i0.ChangeDetectorRef }, { token: SharedService }, { token: i3$1.MatSnackBar }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ViewFinalCbpPlanComponent, selector: "app-view-final-cbp-plan", viewQueries: [{ propertyName: "pdfContent", first: true, predicate: ["pdfContent"], descendants: true }, { propertyName: "dialogContent", first: true, predicate: ["dialogContent"], descendants: true }], ngImport: i0, template: "<div class=\"view-cbp-plan\" #dialogContent style=\"max-height: 80vh; overflow: auto;\">\n    <div class=\"popup-container\">\n        <div class=\"popup-header\">\n            <div class=\"header-container\">\n                <div>\n                    <div class=\"heading\">View Final <span *ngIf=\"openedFrom === 'cbp'\">CBP</span><span\n                            *ngIf=\"openedFrom === 'acbp'\">ACBP</span></div>\n                </div>\n                <div class=\"right-side-container\">\n                    <div class=\"search-and-buttons-container\">\n                        <form [formGroup]=\"filterForm\">\n                            <div>\n                                <mat-form-field appearance=\"outline\" class=\"language-select\" style=\" height: 34px;\">\n                                    <mat-label style=\"font-weight: normal;\">\n                                        {{ filterForm.get('language')?.value ? '' : 'Select Language' }}\n                                    </mat-label>\n\n                                    <mat-select formControlName=\"language\" panelClass=\"select-search-panel\"\n                                        (selectionChange)=\"applyFilters()\">\n\n                                        <!-- Search box -->\n                                        <input style=\"border:1px solid #ccc; padding: 5px;width: 92%;margin: 5px;\"\n                                            matInput placeholder=\"Search Languages\" (click)=\"$event.stopPropagation()\"\n                                            (keydown)=\"$event.stopPropagation()\"\n                                            (keyup)=\"filterList($any($event.target).value, 'language')\" />\n\n                                        <!-- Values -->\n                                        <mat-option *ngFor=\"let r of filteredLanguages\" [value]=\"r?.code\">\n                                            {{ r?.label }}\n                                        </mat-option>\n\n                                    </mat-select>\n                                </mat-form-field>\n                            </div>\n                        </form>\n                    </div>\n                    <div class=\"cursor-pointer\" (click)=\"closeDialog()\">\n                        <mat-icon>close</mat-icon>\n                    </div>\n                </div>\n            </div>\n\n\n\n        </div>\n        <div class=\"section-container\" #pdfContent>\n            <header class=\"bg-white header-border\">\n                <div class=\"header-flex justify-between\" style=\"width:100%\">\n                    <div class=\"flex items-center space-x-4\" style=\"width:50%\">\n                        <div class=\"image-container\">\n                            <div>\n                                <img src=\"assets/icons/dopt-logo.png\" alt=\"Department of Personnel & Training\"\n                                    class=\"h-15\" />\n                            </div>\n                            <div>\n                                <img src=\"assets/icons/CBC_logo.svg\" alt=\"Capacity Building Commission Logo\"\n                                    class=\"h-10\" />\n                            </div>\n                            <div>\n                                <img src=\"assets/icons/karmayogiLogo-min.png\" alt=\"Karmayogi Bharat Logo\"\n                                    class=\"h-10\" />\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"text-right\" style=\"width:50%\">\n                        <h1 class=\"text-2xl font-bold text-gray-900\">\n                            <span\n                                *ngIf=\"sharedService?.cbpPlanFinalObj?.ministry?.sbOrgType === 'state'\">{{sharedService?.cbpPlanFinalObj?.ministry?.orgName}}</span>\n                            <span\n                                *ngIf=\"sharedService?.cbpPlanFinalObj?.ministry?.sbOrgType === 'ministry'\">{{sharedService?.cbpPlanFinalObj?.ministry?.orgName}}</span>\n                            <span\n                                *ngIf=\"sharedService?.cbpPlanFinalObj?.department_name\">/{{sharedService?.cbpPlanFinalObj?.department_name}}</span>\n                            - Capacity Building Plan\n                        </h1>\n                        <p class=\"text-gray-600\">Comprehensive Role-Based Competency Analysis</p>\n                    </div>\n                </div>\n            </header>\n            <div class=\"min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100\">\n                <!-- Header -->\n\n\n                <div class=\"max-w-7xl mx-auto px-6 py-8 mt-4\">\n                    <!-- KPI Dashboard -->\n                    <div class=\"competency-container mt-2\">\n                        <div class=\"outside-layer-total\">\n                            <div class=\"horizontal-flex mt-2\">\n                                <div>\n                                    <svg class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\"\n                                        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n                                        stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n                                        <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\" />\n                                        <path d=\"M14 2v6h6\" />\n                                        <path d=\"M16 13H8\" />\n                                        <path d=\"M16 17H8\" />\n                                        <path d=\"M10 9H8\" />\n                                    </svg>\n                                </div>\n                                <div>\n                                    <div class=\"count\">{{totalCompetencieObj?.total}}</div>\n                                </div>\n                            </div>\n\n                            <div class=\"mt-4\">\n                                <div class=\"sub-heading\">\n                                    <p>Total Competencies</p>\n                                </div>\n                            </div>\n                            <div class=\"progress-bar mt-2\">\n                                <div class=\"progress-bar-fill\" style=\"width: 60%;\"></div>\n                            </div>\n                            <div>\n                                <div class=\"sub-text\">Total Competencies: {{totalCompetencieObj?.total}}</div>\n                            </div>\n                            <div class=\"count\">\n                                <!-- {{competenciesCount?.total}} -->\n                            </div>\n                        </div>\n                        <div class=\"outside-layer-behavioral\">\n                            <div class=\"horizontal-flex mt-2\">\n                                <div>\n                                    <svg class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\"\n                                        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n                                        stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n                                        <path d=\"M15.5 17a4 4 0 0 1-5 0\" />\n                                        <path d=\"M13 14h.01\" />\n                                        <path d=\"M11 11h.01\" />\n                                        <path d=\"M17 14h.01\" />\n                                        <path d=\"M13 10h.01\" />\n                                        <path d=\"M13 18h.01\" />\n                                        <path d=\"M13 6h.01\" />\n                                        <path d=\"M17 18h.01\" />\n                                        <path d=\"M17 6h.01\" />\n                                        <path d=\"M21 12a9 9 0 0 1-9 9a9 9 0 0 1-9-9a9 9 0 0 1 9-9a9 9 0 0 1 9 9z\" />\n                                    </svg>\n                                </div>\n                                <div>\n                                    <div class=\"count\">{{totalCompetencieObj?.behavioral}}</div>\n                                </div>\n                            </div>\n\n                            <div class=\"mt-2\">\n                                <div class=\"sub-heading\">\n                                    <p>Behavioral Competencies</p>\n                                </div>\n                            </div>\n                            <div class=\"progress-bar mt-2\">\n                                <div class=\"progress-bar-fill-behavioural\" style=\"width: 60%;\"></div>\n                            </div>\n                            <div>\n                                <div class=\"sub-text\">Behavioral Competencies: {{totalCompetencieObj?.behavioral}}\n                                </div>\n                            </div>\n\n                        </div>\n                        <div class=\"outside-layer-functional\">\n                            <div class=\"horizontal-flex mt-2\">\n                                <div>\n                                    <svg class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\"\n                                        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n                                        stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n                                        <path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\" />\n                                        <path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\" />\n                                    </svg>\n                                </div>\n                                <div>\n                                    <div class=\"count\">{{totalCompetencieObj?.functional}}</div>\n                                </div>\n                            </div>\n\n                            <div class=\"mt-2\">\n                                <div class=\"sub-heading\">\n                                    <p>Functional Competencies</p>\n                                </div>\n                            </div>\n                            <div class=\"progress-bar mt-2\">\n                                <div class=\"progress-bar-fill-functional\" style=\"width: 60%;\"></div>\n                            </div>\n                            <div>\n                                <div class=\"sub-text\">Functional Competencies: {{totalCompetencieObj?.functional}}</div>\n                            </div>\n\n\n                        </div>\n                        <div class=\"outside-layer-domain\">\n                            <div class=\"horizontal-flex mt-2\">\n                                <div>\n                                    <svg class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\"\n                                        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n                                        stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n                                        <circle cx=\"12\" cy=\"12\" r=\"10\" />\n                                        <circle cx=\"12\" cy=\"12\" r=\"6\" />\n                                        <circle cx=\"12\" cy=\"12\" r=\"2\" />\n                                    </svg>\n                                </div>\n                                <div>\n                                    <div class=\"count\">{{totalCompetencieObj?.domain}}</div>\n                                </div>\n                            </div>\n\n                            <div class=\"mt-2\">\n                                <div class=\"sub-heading\">\n                                    <p>Domain Competencies</p>\n                                </div>\n                            </div>\n                            <div class=\"progress-bar mt-2\">\n                                <div class=\"progress-bar-fill-domain\" style=\"width: 60%;\"></div>\n                            </div>\n                            <div>\n                                <div class=\"sub-text\">Domain Competencies: {{totalCompetencieObj?.domain}}</div>\n                            </div>\n\n                        </div>\n                    </div>\n                    <!-- <div class=\"mb-8\">\n                <h2 class=\"text-2xl font-bold text-gray-900 mb-6nheading\">Competency Overview</h2>\n                <div class=\"competency-grid\">\n                  <ng-container *ngFor=\"let kpi of overallKPIs;\">\n                    <div class=\"bg-white rounded-xl  outside-layer-total p-6 border-l-4 hover:shadow-xl transition-shadow\" [style.border-left-color]=\"kpi.color\">\n                      <div class=\"flex items-center justify-between mb-4 inside-layer\">\n                        <div [class]=\"'p-3 rounded-lg ' + kpi.bgColor\">\n                          <ng-container [ngSwitch]=\"kpi.name\">\n                            <svg *ngSwitchCase=\"'Behavioral Competencies'\" class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n                              <path d=\"M15.5 17a4 4 0 0 1-5 0\"/>\n                              <path d=\"M13 14h.01\"/><path d=\"M11 11h.01\"/><path d=\"M17 14h.01\"/><path d=\"M13 10h.01\"/>\n                              <path d=\"M13 18h.01\"/><path d=\"M13 6h.01\"/><path d=\"M17 18h.01\"/><path d=\"M17 6h.01\"/>\n                              <path d=\"M21 12a9 9 0 0 1-9 9a9 9 0 0 1-9-9a9 9 0 0 1 9-9a9 9 0 0 1 9 9z\"/>\n                            </svg>\n          \n                            <svg *ngSwitchCase=\"'Functional Competencies'\" class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n                              <path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"/><path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"/>\n                            </svg>\n          \n                            <svg *ngSwitchCase=\"'Domain Competencies'\" class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n                              <circle cx=\"12\" cy=\"12\" r=\"10\"/><circle cx=\"12\" cy=\"12\" r=\"6\"/><circle cx=\"12\" cy=\"12\" r=\"2\"/>\n                            </svg>\n          \n                            <svg *ngSwitchCase=\"'Total Competencies'\" class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n                              <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"/>\n                              <path d=\"M14 2v6h6\"/><path d=\"M16 13H8\"/><path d=\"M16 17H8\"/><path d=\"M10 9H8\"/>\n                            </svg>\n                            \n                          </ng-container>\n                        </div>\n                        <div class=\"text-right\">\n                          <div class=\"text-2xl font-bold text-gray-900\">{{kpi.total}}</div>\n                        </div>\n                      </div>\n                      <h3 class=\"text-gray-900 font-semibold mb-2 heading\">{{kpi.name}}</h3>\n                      <div class=\"w-full bg-gray-200 rounded-full h-3\">\n                        <div class=\"h-3 rounded-full transition-all duration-500\"\n                             [style.width.%]=\"kpi.avgCompletion\"\n                             [style.background-color]=\"kpi.color\">\n                        </div>\n                      </div>\n                      <p class=\"text-sm text-gray-500 mt-2\">Total Competencies: {{kpi.total}}</p>\n                    </div>\n                  </ng-container>\n                </div>\n              </div> -->\n\n                    <!-- Designation Reports -->\n                    <div class=\"space-y-8 mt-4\">\n                        <h2 class=\"text-2xl font-bold text-gray-900 mb-6 heading\">Detailed Competency Framework by\n                            Designation</h2>\n\n                        <ng-container *ngFor=\"let designation of designationData;\">\n                            <div class=\"bg-white rounded-xl  overflow-hidden section-shadow\">\n                                <!-- Header -->\n                                <div\n                                    class=\"bg-gradient-to-r from-indigo-600 to-blue-600 text-white p-6 heading-with-bg\">\n                                    <div class=\"flex items-center justify-between\">\n                                        <div>\n                                            <h3 class=\"text-2xl font-bold mb-2 heading-bg\">{{designation.designation}}\n                                            </h3>\n                                            <p class=\"text-indigo-100 mb-1\">Wing/Division: {{designation.wing}}</p>\n                                        </div>\n                                        <div class=\"flex items-center space-x-4 competency-count-by-designation\">\n                                            <span class=\"font-semibold text-sm\">Behavioral:\n                                                {{designation.behavioralCompetencies.length}} total</span>\n                                            <span class=\"font-semibold text-sm\">Functional:\n                                                {{designation.functionalCompetencies.length}} total</span>\n                                            <span class=\"font-semibold text-sm\">Domain:\n                                                {{designation.domainCompetencies.length}} total</span>\n                                        </div>\n                                    </div>\n                                </div>\n\n                                <!-- Body -->\n                                <div class=\"p-4 section-shadow\">\n                                    <!-- Roles -->\n                                    <div class=\"mb-6\">\n                                        <h4 class=\"text-xl font-semibold text-gray-900 mb-3 flex items-center\">\n                                            <svg class=\"h-5 w-5 mr-2 text-indigo-600 icon-sm\" fill=\"none\"\n                                                viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\n                                                    d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\" />\n                                            </svg>\n                                            Roles & Responsibilities\n                                        </h4>\n                                        <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2\">\n                                            <div *ngFor=\"let role of designation.rolesResponsibilities; let i = index\"\n                                                class=\"bg-gray-50 p-2 rounded border-l-3 border-indigo-500\">\n                                                <p class=\"text-sm text-gray-700 leading-relaxed\">{{role}}</p>\n                                            </div>\n                                        </div>\n                                    </div>\n                                    <!-- Activities -->\n                                    <div class=\"mb-6 mt-4\">\n                                        <h4 class=\"text-xl font-semibold text-gray-900 mb-3 flex items-center\">\n                                            <svg class=\"h-5 w-5 mr-2 text-indigo-600 icon-sm\" fill=\"none\"\n                                                viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\n                                                    d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\" />\n                                            </svg>\n                                            Activities\n                                        </h4>\n                                        <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2\">\n                                            <div *ngFor=\"let role of designation.activities; let i = index\"\n                                                class=\"bg-gray-50 p-2 rounded border-l-3 border-indigo-500\">\n                                                <p class=\"text-sm text-gray-700 leading-relaxed\">{{role}}</p>\n                                            </div>\n                                        </div>\n                                    </div>\n                                    <div class=\"page-break\"></div>\n                                    <!-- Competencies -->\n                                    <div class=\"competencis-grid mt-4\">\n                                        <!-- Behavioral -->\n                                        <div class=\"bg-blue-50 rounded-lg p-3 competencies-grid-3\">\n                                            <h4 class=\"font-semibold text-blue-800 text-base mb-2\">Behavioral</h4>\n                                            <div class=\"space-y-1 grid-list-item grid-list-item-behavioral\">\n                                                <div *ngFor=\"let comp of designation.behavioralCompetencies; let i = index\"\n                                                    class=\"bg-white p-1.5 rounded text-sm text-gray-700 border-l-2 border-blue-400\">\n                                                    {{comp}}\n                                                    <div class=\"flex-col-theme\">\n                                                    \n                                                    <span class=\"competency-tags\">\n                                                        <span *ngIf=\"designation.behavioralSetForProficiencyLevel[i]\"\n                                                        class=\"proficiency-tag\"\n                                                        [ngClass]=\"designation.behavioralSetForProficiencyLevel[i]?.toLowerCase()\"\n                                                        [matTooltip]=\"designation.behavioralSetForProficiencyLevelRationale[i]\"\n                                                        >\n                                                        {{ designation.behavioralSetForProficiencyLevel[i] }}\n                                                        </span>\n\n                                                        \n                                                    </span>\n                                                    \n                                                    <span class=\"competency-tags\">\n                                                        <span *ngIf=\"designation.behavioralSetForDeliveryMode[i]\"\n                                                        class=\"delivery-mode-tag\"\n                                                        [ngClass]=\"designation.behavioralSetForDeliveryMode[i]?.toLowerCase()\"\n                                                        [matTooltip]=\"designation.behavioralSetForDeliveryModeRationale[i]\"\n                                                        >\n                                                        {{ designation.behavioralSetForDeliveryMode[i] }}\n                                                        </span>\n\n                                                       \n                                                    </span>\n                                                    </div>\n                                                </div>\n                                              \n                                            </div>\n                                            \n                                            <div class=\"mt-2 text-sm text-blue-600 font-medium\">\n                                                {{designation.behavioralCompetencies.length}} total\n                                            </div>\n                                        </div>\n\n                                        <!-- Functional -->\n                                        <div class=\"bg-green-50 rounded-lg p-3 competencies-grid-3\">\n                                            <h4 class=\"font-semibold text-green-800 text-base mb-2\">Functional</h4>\n                                            <div class=\"space-y-1 grid-list-item grid-list-item-functional\">\n                                                <div *ngFor=\"let comp of designation.functionalCompetencies; let i = index\"\n                                                    class=\"bg-white p-1.5 rounded text-sm text-gray-700 border-l-2 border-green-400\">\n                                                    {{comp}}\n                                                    <div class=\"flex-col-theme\">\n                                                    \n                                                    <span class=\"competency-tags\">\n                                                        <span *ngIf=\"designation.functionalSetForProficiencyLevel[i]\"\n                                                        class=\"proficiency-tag\"\n                                                        [ngClass]=\"designation.functionalSetForProficiencyLevel[i]?.toLowerCase()\"\n                                                        [matTooltip]=\"designation.functionalSetForProficiencyLevelRationale[i]\"\n                                                        >\n                                                        {{ designation.functionalSetForProficiencyLevel[i] }}\n                                                        </span>\n\n                                                        \n                                                    </span>\n                                                    \n                                                    <span class=\"competency-tags\">\n                                                        <span *ngIf=\"designation.functionalSetForDeliveryMode[i]\"\n                                                        class=\"delivery-mode-tag\"\n                                                        [ngClass]=\"designation.functionalSetForDeliveryMode[i]?.toLowerCase()\"\n                                                        [matTooltip]=\"designation.functionalSetForDeliveryModeRationale[i]\"\n                                                        >\n                                                        {{ designation.functionalSetForDeliveryMode[i] }}\n                                                        </span>\n\n                                                       \n                                                    </span>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                            <div class=\"mt-2 text-sm text-green-600 font-medium\">\n                                                {{designation.functionalCompetencies.length}} total\n                                            </div>\n                                        </div>\n\n                                        <!-- Domain -->\n                                        <div class=\"bg-purple-50 rounded-lg p-3 competencies-grid-3\">\n                                            <h4 class=\"font-semibold text-purple-800 text-base mb-2\">Domain</h4>\n                                            <div class=\"space-y-1 grid-list-item grid-list-item-domain\">\n                                                <div *ngFor=\"let comp of designation.domainCompetencies; let i = index\"\n                                                    class=\"bg-white p-1.5 rounded text-sm text-gray-700 border-l-2 border-purple-400\">\n                                                    {{comp}}\n                                                    <div class=\"flex-col-theme\">\n                                                    \n                                                    <span class=\"competency-tags\">\n                                                        <span *ngIf=\"designation.domainSetForProficiencyLevel[i]\"\n                                                        class=\"proficiency-tag\"\n                                                        [ngClass]=\"designation.domainSetForProficiencyLevel[i]?.toLowerCase()\"\n                                                        [matTooltip]=\"designation.domainSetForProficiencyLevelRationale[i]\"\n                                                        >\n                                                        {{ designation.domainSetForProficiencyLevel[i] }}\n                                                        </span>\n\n                                                        \n                                                    </span>\n                                                    \n                                                    <span class=\"competency-tags\">\n                                                        <span *ngIf=\"designation.domainSetForDeliveryMode[i]\"\n                                                        class=\"delivery-mode-tag\"\n                                                        [ngClass]=\"designation.domainSetForDeliveryMode[i]?.toLowerCase()\"\n                                                        [matTooltip]=\"designation.domainSetForDeliveryModeRationale[i]\"\n                                                        >\n                                                        {{ designation.domainSetForDeliveryMode[i] }}\n                                                        </span>\n\n                                                       \n                                                    </span>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                            <div class=\"mt-2 text-sm text-purple-600 font-medium\">\n                                                {{designation.domainCompetencies.length}} total\n                                            </div>\n                                        </div>\n                                    </div>\n                                    <!-- Adding courses -->\n                                    <div class=\"cbp mt-4\"\n                                        *ngIf=\"designation.selectedCourses?.length && openedFrom === 'acbp'\">\n                                        <h4 class=\"text-xl font-semibold text-gray-900 mb-3 flex items-center\">\n                                            <svg class=\"h-5 w-5 mr-2 text-indigo-600 icon-sm\" fill=\"none\"\n                                                viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\n                                                    d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\" />\n                                            </svg>\n                                            Courses\n                                        </h4>\n                                        <div class=\"course-list-container\">\n                                            <div class=\"course-list-item\"\n                                                *ngFor=\"let item of designation.selectedCourses; let i = index\">\n                                                <div class=\"course-header\">\n                                                    <div class=\"checked-course-container\">\n\n                                                        <div>\n                                                            <div class=\"course-pill\">\n                                                                <div class=\"course-pill-text\">\n                                                                    <span><img\n                                                                            src=\"assets/icons/course.svg\"></span>&nbsp;<span>Course</span>\n                                                                </div>\n                                                            </div>\n                                                        </div>\n\n                                                    </div>\n                                                    <div *ngIf=\"item?.rationale && !item?.is_public\">\n                                                        <div class=\"ai-recommened-pill-green\">\n                                                            <div class=\"ai-recommened-pill-green-text\">\n                                                                <span class=\"ai-loader-icon\"><img\n                                                                        src=\"assets/icons/ai-loader.gif\"></span>\n\n                                                                <span>AI Recommended - iGOT </span>\n\n                                                            </div>\n                                                        </div>\n                                                        <div class=\"ai-recommened-pill-orange mt-2\"\n                                                            *ngIf=\"item?.platform\">\n                                                            <div class=\"ai-recommened-pill-orange-text\">\n                                                                <span class=\"ai-loader-icon\"><img\n                                                                        src=\"assets/icons/ai-loader.gif\"></span>\n                                                                <a class=\"cursor-pointer\" [href]=\"item?.public_link\"\n                                                                    target=\"_blank\"><span>Platform -\n                                                                        {{item?.platform}}</span></a>\n                                                            </div>\n                                                        </div>\n                                                        <div class=\"ai-recommened-pill-orange mt-2\"\n                                                            *ngIf=\"item?.organisation?.length\">\n                                                            <div class=\"ai-recommened-pill-orange-text\">\n                                                                <span class=\"ai-loader-icon\"><img\n                                                                        src=\"assets/icons/ai-loader.gif\"></span>\n                                                                <span>Provider - {{item?.organisation[0]}}</span>\n                                                            </div>\n                                                        </div>\n                                                    </div>\n                                                    <div *ngIf=\"item?.rationale && item?.is_public\">\n                                                        <div class=\"ai-recommened-pill-public\">\n                                                            <div class=\"ai-recommened-pill-public-text\">\n                                                                <span class=\"ai-loader-icon\"><img\n                                                                        src=\"assets/icons/ai-loader.gif\"></span>\n\n                                                                <span>AI Recommended - Public </span>\n\n                                                            </div>\n                                                        </div>\n                                                        <div class=\"ai-recommened-pill-orange mt-2\"\n                                                            *ngIf=\"item?.platform\">\n                                                            <div class=\"ai-recommened-pill-orange-text\">\n                                                                <span class=\"ai-loader-icon\"><img\n                                                                        src=\"assets/icons/ai-loader.gif\"></span>\n                                                                <a class=\"cursor-pointer\" [href]=\"item?.public_link\"\n                                                                    target=\"_blank\"><span>Platform -\n                                                                        {{item?.platform}}</span></a>\n                                                            </div>\n                                                        </div>\n                                                        <div class=\"ai-recommened-pill-orange mt-2\"\n                                                            *ngIf=\"item?.organisation?.length\">\n                                                            <div class=\"ai-recommened-pill-orange-text\">\n                                                                <span class=\"ai-loader-icon\"><img\n                                                                        src=\"assets/icons/ai-loader.gif\"></span>\n                                                                <span>Provider - {{item?.organisation[0]}}</span>\n                                                            </div>\n                                                        </div>\n                                                    </div>\n                                                    <div *ngIf=\"!item?.rationale\">\n                                                        <div class=\"ai-recommened-pill-gray\">\n                                                            <div class=\"ai-recommened-pill-gray-text\">\n                                                                <span class=\"ai-loader-icon\"><img\n                                                                        src=\"assets/icons/ai-loader.gif\"></span>\n\n                                                                <span>Manually Suggested - iGOT </span>\n\n                                                            </div>\n                                                        </div>\n                                                        <div class=\"ai-recommened-pill-orange mt-2\"\n                                                            *ngIf=\"item?.platform\">\n                                                            <div class=\"ai-recommened-pill-orange-text\">\n                                                                <span class=\"ai-loader-icon\"><img\n                                                                        src=\"assets/icons/ai-loader.gif\"></span>\n                                                                <a class=\"cursor-pointer\" [href]=\"item?.public_link\"\n                                                                    target=\"_blank\"><span>Platform -\n                                                                        {{item?.platform}}</span></a>\n                                                            </div>\n                                                        </div>\n                                                        <div class=\"ai-recommened-pill-orange mt-2\"\n                                                            *ngIf=\"item?.organisation?.length\">\n                                                            <div class=\"ai-recommened-pill-orange-text\">\n                                                                <span class=\"ai-loader-icon\"><img\n                                                                        src=\"assets/icons/ai-loader.gif\"></span>\n                                                                <span>Provider - {{item?.organisation[0]}}</span>\n                                                            </div>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                                <div class=\"course-title mt-4\">\n                                                    <div>\n                                                        <div *ngIf=\"item?.course\">{{item?.course}}</div>\n                                                        <div *ngIf=\"item?.name\">{{item?.name}}</div>\n                                                    </div>\n                                                </div>\n                                                <div class=\"course-desc mt-2\">\n                                                    <div *ngIf=\"isPDFDownload\">\n                                                        <div>{{item?.rationale}}</div>\n                                                    </div>\n                                                </div>\n                                                <div class=\"mt-3\"\n                                                    *ngIf=\"getCompetenciesByType('Behavioural',item)?.length\">\n                                                    <div class=\"competency-sub-heading\">Behavioral Competencies</div>\n                                                    <ul class=\"competency-list mt-1\">\n                                                        <li class=\"behavioural-pill\"\n                                                            *ngFor=\"let comp of getDisplayedCompetencies('Behavioural',item)\">\n                                                            <span class=\"competency-text\"> {{ comp.competencyThemeName\n                                                                }} -\n                                                                {{\n                                                                comp.competencySubThemeName }} </span>\n                                                        </li>\n                                                        <li *ngIf=\"hasMoreThanTwo('Behavioural',item)\"\n                                                            class=\"show-more-competency\">\n                                                            <span class=\"show-more-link cursor-pointer\"\n                                                                (click)=\"toggleCompetencies('Behavioural',item)\">\n                                                                {{ isExpanded('Behavioural',item) ? 'Show Less' : '+' +\n                                                                getRemainingCount('Behavioural',item) + ' More' }}\n                                                            </span>\n                                                        </li>\n                                                    </ul>\n                                                </div>\n                                                <div class=\"mt-2\"\n                                                    *ngIf=\"getCompetenciesByType('Functional',item)?.length\">\n                                                    <div class=\"competency-sub-heading\">Functional Competencies</div>\n                                                    <ul class=\"competency-list mt-1\">\n                                                        <li class=\"functional-pill\"\n                                                            *ngFor=\"let comp of getDisplayedCompetencies('Functional',item)\">\n                                                            <span class=\"competency-text\"> {{ comp.competencyThemeName\n                                                                }} -\n                                                                {{\n                                                                comp.competencySubThemeName }} </span>\n                                                        </li>\n                                                        <li *ngIf=\"hasMoreThanTwo('Functional',item)\"\n                                                            class=\"show-more-competency\">\n                                                            <span class=\"show-more-link cursor-pointer\"\n                                                                (click)=\"toggleCompetencies('Functional',item)\">\n                                                                {{ isExpanded('Functional',item) ? 'Show Less' : '+' +\n                                                                getRemainingCount('Functional',item) + ' More' }}\n                                                            </span>\n                                                        </li>\n                                                    </ul>\n                                                </div>\n                                                <div class=\"mt-2\" *ngIf=\"getCompetenciesByType('Domain',item)?.length\">\n                                                    <div class=\"competency-sub-heading\">Domain Competencies</div>\n                                                    <ul class=\"competency-list mt-1\">\n                                                        <li class=\"domain-pill\"\n                                                            *ngFor=\"let comp of getDisplayedCompetencies('Domain',item)\">\n                                                            <span class=\"competency-text\"> {{ comp.competencyThemeName\n                                                                }} -\n                                                                {{\n                                                                comp.competencySubThemeName }} </span>\n                                                        </li>\n                                                        <li *ngIf=\"hasMoreThanTwo('Domain',item)\"\n                                                            class=\"show-more-competency\">\n                                                            <span class=\"show-more-link cursor-pointer\"\n                                                                (click)=\"toggleCompetencies('Domain',item)\">\n                                                                {{ isExpanded('Domain',item) ? 'Show Less' : '+' +\n                                                                getRemainingCount('Domain',item) + ' More' }}\n                                                            </span>\n                                                        </li>\n                                                    </ul>\n                                                </div>\n                                                <div class=\"mt-2 d-flex justify-content-between item\">\n                                                    <div class=\"relevancy-container\">\n                                                        <div class=\"relevancy\">Relevancy</div>\n                                                        <div class=\"dash\">-</div>\n                                                        <div class=\"percentage\" *ngIf=\"item?.relevancy\">\n                                                            {{item?.relevancy}}%</div>\n                                                        <div class=\"percentage\" *ngIf=\"!item?.relevancy\">N/A</div>\n                                                    </div>\n\n                                                </div>\n\n                                            </div>\n\n                                        </div>\n                                    </div>\n\n                                    <!-- adding courses -->\n                                </div>\n                            </div>\n                        </ng-container>\n                    </div>\n                </div>\n\n                <!-- Footer -->\n\n            </div>\n            <footer class=\"org-footer\">\n                <div class=\"max-w-7xl mx-auto px-6 flex flex-col md:flex-row items-center justify-between\">\n                    <div class=\"flex items-center space-x-4 mb-4 mt-4 md:mb-0 footer-container\">\n                        <div class=\"footer-logo-container\">\n                            <img src=\"assets/icons/karmayogiLogo-min.png\" alt=\"Karmayogi Bharat Logo\" class=\"h-10\"\n                                style=\"margin-left:20px\" />\n                        </div>\n                        <div style=\"margin-left: 100px;\">\n                            <a href=\"https://karmayogibharat.gov.in\" target=\"_blank\" rel=\"noopener noreferrer\"\n                                class=\"text-sm font-semibold transition-colors\">\n                                karmayogibharat.gov.in\n                            </a>\n                        </div>\n\n\n                    </div>\n                    <div class=\"text-sm text-center md:text-right mb-4\" style=\"margin-left: 100px;\">\n                        <p>&copy; 2025 All Rights Reserved.</p>\n                    </div>\n                </div>\n            </footer>\n        </div>\n        <div class=\"popup-footer\">\n            <div>\n                <input class=\"btn-active\" type=\"button\" value=\"Download as Excel\" (click)=\"downloadCSV()\" />\n            </div>\n            <div>\n                <input class=\"btn-active\" type=\"button\" value=\"Download as PDF\"\n                    (click)=\"downloadPdfFromBE(openedFrom)\" />\n            </div>\n            <div>\n                <input class=\"btn-active\" type=\"button\" value=\"Cancel\" (click)=\"cancelForm()\" />\n            </div>\n        </div>\n    </div>\n    <div class=\"overlay-loader\" *ngIf=\"loading\">\n        <mat-spinner diameter=\"50\"></mat-spinner>\n    </div>", styles: ["@charset \"UTF-8\";.container{margin:10px auto}.sub-heading p{color:#000;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.radio-label{color:#000;font-family:Lato;font-size:16px;font-style:normal;font-weight:400;line-height:normal}.radio-btn-group{display:flex;width:32px;height:32px;padding:2px;gap:10px}.label{color:var(--Body-Text-Body-Color, #212529);font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:150%}::ng-deep mat-form-field{background-color:#fff!important;border-radius:25px!important;padding-left:12px;padding-right:12px;height:42px;width:100%}::ng-deep mat-select{border-radius:25px!important;background-color:#fff!important}::ng-deep .mat-select-panel{background-color:#fff!important}::ng-deep .mat-select-panel .mat-option{border-radius:0!important}::ng-deep mat-form-field .mat-form-field-underline{display:none!important}::ng-deep mat-select .mat-select-placeholder{color:#0006;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}::ng-deep mat-select .mat-select-value-text{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;line-height:normal!important;padding-top:0!important;padding-bottom:0!important}::ng-deep mat-select .mat-select-value{display:flex!important;align-items:center!important;height:100%!important}.additional-details textarea{display:flex;padding:16px 16px 0;flex-direction:column;align-items:flex-start;gap:10px;flex:1 0 0;align-self:stretch;width:100%;color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;resize:none}.section-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.btn-disable{border-radius:var(--Radius-Full-Round, 9999999px);opacity:.4;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.btn-group{display:flex;flex-direction:row;justify-content:space-between}.pl-2{padding-left:5px}.search-filter-section{display:flex;flex-direction:row;justify-content:space-between}.search .rsearch{position:relative}.search .search-icon{position:absolute;top:15px;font-size:20px;left:10px}.search .sinput{border-radius:32px;border:1px solid #d5d0d0;padding:15px 36px;font:400 14px Lato;width:800px}.select-map-route-container{display:flex;flex-direction:row}.selected-mapping-route p{color:#1b4ca1;font-family:Lato;font-size:20px;font-style:normal;font-weight:400;line-height:normal;text-decoration-line:underline;text-decoration-style:solid;-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font}.edit-plan{display:flex;padding:4px;justify-content:center;align-items:center;gap:8px;border-radius:4px;background:#1b4ca129;color:#1b4ca1;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;margin-left:10px}.search-container{display:flex;flex-direction:row}.course-container{display:flex;width:100%;padding:16px;flex-direction:column;align-items:flex-start;gap:24px;grid-row:2/span 1;grid-column:1/span 1;border-radius:12px;border:1px solid var(--borders-black-border-16-black, rgba(0, 0, 0, .16));background:#fff}.course-header{display:flex;flex-direction:row;justify-content:space-between;width:100%}.course-pill{display:flex;height:24px;padding:8px;align-items:center;gap:4px;border-radius:16px;border:1px solid var(--borders-border-fill-focussed-4-light-100, #EF951E);background:#fefaf4}.ai-recommened-pill{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);border:1px solid #1B4CA1;background:#1b4ca129}.igot-platform-pill{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);border:1px solid #EF951E;background:#ef951e29}.course-title{color:var(--Primary-KB-Primary-Light, #1B4CA1);font-family:Montserrat;font-size:20px;font-style:normal;font-weight:600;line-height:30px}.course-desc{color:#0009;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.relevancy,.competencies-matched{color:var(--accessbility-shades-with-opacity-kb-greys-black-60, rgba(0, 0, 0, .6));font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;align-items:center}.percentage{color:#1d8923;font-family:Lato;font-size:14px;font-style:normal;font-weight:800;line-height:normal}.relevancy-container,.competencies-matched-container{display:flex;flex-direction:row;align-items:center}.dash{padding:0 5px}::ng-deep .mat-radio-checked .mat-radio-inner-circle{background:#1b4ca1!important}.course-list-container{display:flex;flex-wrap:wrap;gap:16px}.course-list-item{flex:0 0 48%;box-sizing:border-box;border:1px solid #ccc;padding:16px;background-color:#fff;border-radius:8px}.checked-course-container{display:flex}.ml-2{margin-left:8px}::ng-deep .mat-checkbox-checked .mat-checkbox-background{background:#1b4ca1!important}.ai-recommened-pill-text,.igot-platform-pill-text{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:700;line-height:normal}.course-pill-text{color:var(--accessbility-shades-without-opacity-kb-greys-black-87, #212121);text-align:center;font-family:Poppins;font-size:12px;font-style:normal;font-weight:400;line-height:normal}.ai-loader-icon img,.igot-platform-icon img{width:15.714px;height:15.714px;flex-shrink:0}.competency-container{display:flex;justify-content:normal;flex-direction:row;gap:16px}.outside-layer-total{display:flex;padding:4px 20px;justify-content:left;align-items:left;gap:6px;border-radius:12px;border-left:2px solid #1B4CA1;border-right:2px solid #1B4CA1;background:#edf1f8;flex-direction:column;width:25%}.outside-layer-functional{display:flex;padding:4px 12px;justify-content:left;align-items:left;gap:16px;border-radius:12px;border-left:2px solid #E24577;border-right:2px solid #E24577;background:#f8d2de;flex-direction:column;width:25%}.outside-layer-domain{display:flex;padding:4px 12px;justify-content:left;align-items:left;gap:16px;border-radius:12px;border-left:2px solid #7B47A4;border-right:2px solid #7B47A4;background:#dfd3e9;flex-direction:column;width:25%}.outside-layer-behavioral{display:flex;padding:4px 12px;justify-content:left;align-items:left;gap:16px;border-radius:12px;border-left:2px solid #F8B861;border-right:2px solid #F8B861;background:#fde8cc;flex-direction:column;width:25%}.inside-layer{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:400;line-height:normal}.suggest-courses-header{display:flex;flex-direction:row;justify-content:space-between}.suggest-course-control{display:flex;flex-direction:row}.course-card-container{width:172px;border-radius:3.307px;border:.827px solid var(--borders-border-8-black, rgba(0, 0, 0, .08));background-color:#fff}.highlight-ai{font-family:Montserrat;font-size:24px;font-style:normal;font-weight:600;line-height:normal;background:linear-gradient(90deg,#3b27ff,#2de3d6);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}.ai-loader-icon-medium img{width:40px;height:40px;flex-shrink:0}.heading{color:#000;font-family:Montserrat;font-size:20px;font-style:normal;font-weight:600;line-height:normal;margin:10px 0}.heading-bg{color:#fff;font-family:Montserrat;font-size:20px;font-style:normal;font-weight:600;line-height:normal;margin:10px 0}.progress-popup{display:flex;flex-direction:column;justify-content:center;align-items:center}.progress-popup .desc{color:#000000de;text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.behavioural-pill{display:flex;padding:0 8px;justify-content:center;align-items:center;gap:10px;border-radius:99px;border:1px solid #F8B861;background:linear-gradient(0deg,#f8b86152 0% 100%),#fff;margin:5px 0}.functional-pill{display:flex;padding:0 8px;justify-content:center;align-items:center;gap:10px;border-radius:99px;border:1px solid #E24577;background:linear-gradient(0deg,#e245773d 0% 100%),#fff;margin:5px 0}.domain-pill{display:flex;padding:0 8px;justify-content:center;align-items:center;gap:10px;border-radius:99px;border:1px solid #7B47A4;background:linear-gradient(0deg,#7b47a43d 0% 100%),#fff;margin:5px 0}.popup-header{display:flex;flex-direction:row;justify-content:space-between}.popup-footer{display:flex;flex-direction:row;justify-content:center}.view-cbp-plan{margin:10px;padding:10px}.view-cbp-plan-popup{padding:24px;max-height:70vh;overflow-y:auto}.section{border-radius:8px;background:#1b4ca114;padding:16px}.popup-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ddd;font-weight:700;flex-shrink:0}.popup-footer{display:flex;justify-content:center;gap:16px;padding:16px 24px;background-color:#fff;flex-shrink:0;position:sticky;bottom:-15px}.section-container{overflow-y:auto;flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;align-items:center}.competency-list{display:flex;flex-direction:row;gap:16px}.competency-text{color:#000;font-family:Lato;font-size:10px;font-style:normal;font-weight:700;line-height:normal}.competency-sub-heading{color:#1b4ca1;font-family:Montserrat;font-size:12px;font-style:normal;font-weight:600;line-height:normal}.cursor-pointer{cursor:pointer}.btn-active{border-radius:var(--Radius-Full-Round, 9999999px);opacity:1;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.custom-textarea{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.overlay-loader{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#ffffffbf;z-index:9999;display:flex;justify-content:center;align-items:center}.grid{display:grid;gap:1.5rem}.grid-cols-1{grid-template-columns:repeat(1,1fr)}@media (min-width: 768px){.md\\:grid-cols-2{grid-template-columns:repeat(2,1fr)}}@media (min-width: 1024px){.lg\\:grid-cols-4{grid-template-columns:repeat(4,1fr)}}.kpi-card{background:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 4px 14px #0000000d;border-left:4px solid transparent;transition:box-shadow .3s ease}.kpi-card:hover{box-shadow:0 8px 24px #0000001a}.kpi-icon{padding:.75rem;border-radius:.5rem;display:flex;align-items:center;justify-content:center}.kpi-text{font-size:1.25rem;font-weight:700}.progress-container{background:#e5e7eb;height:.75rem;border-radius:9999px;margin-top:.5rem}.progress-bar{height:100%;border-radius:9999px;transition:width .4s ease}.competency-block{background-color:#fff;border-radius:12px;box-shadow:0 2px 10px #0000000f;overflow:hidden}.competency-header{padding:1.5rem;background:linear-gradient(to right,#4f46e5,#3b82f6);color:#fff}.competency-header h3{font-size:1.25rem;font-weight:600}.competency-body{padding:1rem}.role-card{background-color:#f9fafb;padding:.5rem;border-left:4px solid #6366f1;border-radius:6px}.role-title{font-size:1rem;font-weight:600;margin-bottom:.75rem;display:flex;align-items:center;color:#1e40af}.comp-section{border-radius:.5rem;padding:.75rem;background-color:#f0f9ff;margin-bottom:1rem}.comp-section h4{font-weight:600;margin-bottom:.5rem}.comp-item{background-color:#fff;border-left:3px solid #3b82f6;padding:.5rem;border-radius:4px;margin-bottom:.25rem;font-size:.875rem}.bg-blue-50{background-color:#fde8cc;border-radius:4px}.bg-green-50{background-color:#f8d2de;border-radius:4px}.bg-purple-50{background-color:#dfd3e9;border-radius:4px}.text-blue-800{color:#1e3a8a}.text-green-800{color:#ff1493}.text-purple-800{color:#6b21a8}.border-blue-400{border-color:#60a5fa}.border-green-400{border-color:#34d399}.border-purple-400{border-color:#c084fc}.text-sm{font-size:.875rem}.text-gray-700{color:#374151}.icon-sm{width:24px;height:24px}.heading-with-bg{background:#4f46e5;padding:24px;border-radius:8px 8px 0 0}.competencis-grid{display:flex;flex-direction:row;justify-content:space-between;gap:16px}.section-shadow{padding:16px;border-radius:4px;background:#fff;box-shadow:0 2px 4px #0000001a,0 1px 10px #0000000f}.count{color:#1b4ca1;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.competency-grid{display:flex;flex-direction:row;gap:16px;justify-content:space-between}.text-blue-600{color:#1b4ca1;font-weight:600}.text-green-600{color:#ff1493;font-weight:600}.text-purple-600{color:#6b21a8;font-weight:600}.horizontal-flex{display:flex;align-items:center;justify-content:space-between;width:100%}.progress-bar{width:100%;height:10px;background-color:#e0e0e0;border-radius:10px;overflow:hidden;box-shadow:inset 0 1px 3px #0003}.progress-bar-fill{height:100%;background-color:#1b4ca1;width:0;border-radius:10px 0 0 10px;transition:width .5s ease-in-out}.progress-bar-fill-behavioural{height:100%;background-color:#f8b861;width:0;border-radius:10px 0 0 10px;transition:width .5s ease-in-out}.progress-bar-fill-functional{height:100%;background-color:#e24577;width:0;border-radius:10px 0 0 10px;transition:width .5s ease-in-out}.progress-bar-fill-domain{height:100%;background-color:#7b47a4;width:0;border-radius:10px 0 0 10px;transition:width .5s ease-in-out}.sub-text{font-size:12px;font-weight:600;font-family:Lato}.competency-count-by-designation{display:flex;gap:10px;flex-direction:row}.competencies-grid-3{width:33%}.grid-list-item div{padding:5px 10px;margin:10px 0}.grid-list-item-behavioral div{border-left:2px solid darkorange}.grid-list-item-functional div{border-left:2px solid #ff1493}.grid-list-item-domain div{border-left:2px solid #6b21a8}.header-flex{display:flex;flex-direction:row;width:100%;justify-content:space-between;gap:30px}.header-border{border-bottom:1px solid #ccc;margin:10px;padding:10px}.text-gray-600{font-family:Lato;font-size:14px;font-weight:600}.image-container .h-10,.image-container .h-15{height:50px}.image-container{display:flex;gap:10px;flex-direction:row}.org-footer{display:flex;flex-direction:row;background:#fff;gap:16px;color:#000;width:100%;justify-content:center;align-items:center;border-top:1px solid #ccc;border-bottom:1px solid #ccc}.dialog-scrollable-content{max-height:70vh;overflow-y:auto}.org-footer a{color:#000!important}h1{font-size:1.75rem!important}@media print{.org-footer,.header-border{page-break-inside:avoid}}.header-border{padding-top:10px;padding-bottom:10px;background-color:#fff}.footer-container{display:flex;justify-content:center;align-items:center;flex-direction:column}.footer-logo-container{display:flex;justify-content:center;align-items:center;flex-direction:row;width:30%}.avoid-page-break{page-break-inside:avoid;break-inside:avoid}.pdf-clean *{box-shadow:none!important;filter:none!important;transform:none!important}.view-cbp-plan.pdf-clean{overflow:visible!important;max-height:none!important}.section-container,.popup-container,.outside-layer-total,.outside-layer-behavioral,.outside-layer-functional,.outside-layer-domain,.section-shadow{page-break-inside:avoid!important;break-inside:avoid!important}.bg-gradient-to-br{background:none!important}.section-container,.outside-layer-total,.outside-layer-behavioral,.outside-layer-functional,.outside-layer-domain,.competencis-grid{page-break-inside:avoid}.page-break{page-break-before:always}.cbp .container{margin:10px auto}.cbp .sub-heading p{color:#000;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.cbp .ministry-heading{color:#1b4ca1;font-family:Montserrat;font-size:24px;font-style:normal;font-weight:600;line-height:normal}.cbp .radio-label{color:#000;font-family:Lato;font-size:16px;font-style:normal;font-weight:400;line-height:normal}.cbp .radio-btn-group{display:flex;width:32px;height:32px;padding:2px;gap:10px}.cbp .label{color:var(--Body-Text-Body-Color, #212529);font-family:Lato;font-size:16px;font-style:normal;font-weight:700;line-height:150%}.cbp ::ng-deep mat-form-field{background-color:#fff!important;border-radius:25px!important;padding-left:12px;padding-right:12px;height:42px;width:100%}.cbp ::ng-deep mat-select{border-radius:25px!important;background-color:#fff!important}.cbp ::ng-deep .mat-select-panel{background-color:#fff!important}.cbp ::ng-deep .mat-select-panel .mat-option{border-radius:0!important}.cbp ::ng-deep mat-form-field .mat-form-field-underline{display:none!important}.cbp ::ng-deep mat-select .mat-select-placeholder{color:#0006;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.cbp ::ng-deep mat-select .mat-select-value-text{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;line-height:normal!important;padding-top:0!important;padding-bottom:0!important}.cbp ::ng-deep mat-select .mat-select-value{display:flex!important;align-items:center!important;height:100%!important}.cbp .additional-details textarea{display:flex;padding:16px 16px 0;flex-direction:column;align-items:flex-start;gap:10px;flex:1 0 0;align-self:stretch;width:100%;color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;resize:none}.cbp .section-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.cbp .btn-disable{border-radius:var(--Radius-Full-Round, 9999999px);opacity:.4;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.cbp .btn-group{display:flex;flex-direction:row;justify-content:space-between}.cbp .pl-2{padding-left:5px}.cbp .search-filter-section{display:flex;flex-direction:row;justify-content:space-between}.cbp .search .rsearch{position:relative}.cbp .search .search-icon{position:absolute;top:15px;font-size:20px;left:10px}.cbp .search .sinput{border-radius:32px;border:1px solid #d5d0d0;padding:15px 36px;font:400 14px Lato;width:800px}.cbp .select-map-route-container{display:flex;flex-direction:row}.cbp .selected-mapping-route p{color:#1b4ca1;font-family:Lato;font-size:20px;font-style:normal;font-weight:400;line-height:normal;text-decoration-line:underline;text-decoration-style:solid;-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font}.cbp .edit-plan{display:flex;padding:4px;justify-content:center;align-items:center;gap:8px;border-radius:4px;background:#1b4ca129;color:#1b4ca1;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;margin-left:10px}.cbp .search-container{display:flex;flex-direction:row}.cbp .course-container{display:flex;width:100%;padding:16px;flex-direction:column;align-items:flex-start;gap:24px;grid-row:2/span 1;grid-column:1/span 1;border-radius:12px;border:1px solid var(--borders-black-border-16-black, rgba(0, 0, 0, .16));background:#fff}.cbp .course-header{display:flex;flex-direction:row;justify-content:space-between;width:100%}.cbp .course-pill{display:flex;height:24px;padding:8px;align-items:center;gap:4px;border-radius:16px;border:1px solid var(--borders-border-fill-focussed-4-light-100, #EF951E);background:#fefaf4}.cbp .ai-recommened-pill-green{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#0080001c}.cbp .ai-recommened-pill-green-text{color:#006400;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.cbp .ai-recommened-pill-public{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#1b4ca129}.cbp .ai-recommened-pill-public-text{color:#1b4ca1;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.cbp .ai-recommened-pill-gray{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#d3d3d3}.cbp .ai-recommened-pill-gray-text{color:#000;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.cbp .ai-recommened-pill-orange{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#ffa50052}.cbp .ai-recommened-pill-orange-text{color:#5a3f0d;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.cbp .ai-recommened-pill-orange-text a{color:#5a3f0d!important;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.cbp .igot-platform-pill{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);border:1px solid #EF951E;background:#ef951e29}.cbp .course-title{color:var(--Primary-KB-Primary-Light, #1B4CA1);font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:22px}.cbp .course-desc{color:#0009;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.cbp .relevancy,.cbp .competencies-matched{color:#6c757d;font-family:Lato;font-size:12px;font-style:normal;font-weight:500;line-height:normal;align-items:center}.cbp .percentage{color:#1b4ca1;font-family:Lato;font-size:14px;font-style:normal;font-weight:600;line-height:normal}.cbp .delete-button input{background-color:#b60a0a;border-radius:10px}.cbp .relevancy-container,.cbp .competencies-matched-container{display:flex;flex-direction:row;align-items:center}.cbp .dash{padding:0 5px}.cbp ::ng-deep .mat-radio-checked .mat-radio-inner-circle{background:#1b4ca1!important}.cbp .course-list-container{display:flex;flex-wrap:wrap;gap:16px;width:100%;padding:1rem}.cbp .course-list-item{flex:1 1 calc(50% - 10px);min-width:350px;max-width:500px;box-sizing:border-box;border:1px solid #e0e0e0;padding:16px;background-color:#fff;border-radius:12px;min-height:auto;box-shadow:0 2px 4px #0000001a;transition:box-shadow .2s ease;display:flex;flex-direction:column}.cbp .course-list-item:hover{box-shadow:0 4px 8px #00000026}.cbp .course-list-item:only-child{flex:1 1 auto;max-width:800px}.cbp .checked-course-container{display:flex;width:60%}.cbp .ml-2{margin-left:8px}.cbp ::ng-deep .mat-checkbox-checked .mat-checkbox-background{background:#1b4ca1!important}.cbp .igot-platform-pill-text{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:700;line-height:normal}.cbp .course-pill-text{color:var(--accessbility-shades-without-opacity-kb-greys-black-87, #212121);text-align:center;font-family:Poppins;font-size:12px;font-style:normal;font-weight:400;line-height:normal}.cbp .ai-loader-icon img,.cbp .igot-platform-icon img{width:15.714px;height:15.714px;flex-shrink:0}.cbp .competency-container{display:flex;justify-content:normal;gap:16px;flex-direction:row}.cbp .outside-layer-total{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #1B4CA1;background:#edf1f8;width:132px}.cbp .outside-layer-functional{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #E24577;background:#f8d2de;width:132px}.cbp .outside-layer-domain{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #7B47A4;background:#dfd3e9;width:132px}.cbp .outside-layer-behavioral{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #F8B861;background:#fde8cc;width:132px}.cbp .inside-layer{color:#1b4ca1;font-family:Lato;font-size:16px;font-style:normal;font-weight:400;line-height:normal}.cbp .count{color:#1b4ca1;font-family:Montserrat;font-size:18px;font-style:normal;font-weight:600;line-height:normal}.cbp .suggest-courses-header{display:flex;flex-direction:row;justify-content:space-between}.cbp .suggest-course-control{display:flex;flex-direction:row}.cbp .course-card-container{width:172px;border-radius:3.307px;border:.827px solid var(--borders-border-8-black, rgba(0, 0, 0, .08));background-color:#fff}.cbp .highlight-ai{font-family:Montserrat;font-size:24px;font-style:normal;font-weight:600;line-height:normal;background:linear-gradient(90deg,#3b27ff,#2de3d6);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}.cbp .ai-loader-icon-medium img{width:40px;height:40px;flex-shrink:0}.cbp .heading{color:#000;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal;margin:10px 0}.cbp .pdf-heading{color:#000;font-family:Montserrat;font-size:18px;font-style:normal;font-weight:600;line-height:normal;margin:10px 0;text-align:center}.cbp .popup-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid #e0e0e0}.cbp .header-left{flex:1}.cbp .header-actions{display:flex;align-items:center;gap:12px}.cbp .regenerate-btn{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:6px;font-size:14px;font-weight:500;min-width:auto}.cbp .regenerate-btn .mat-icon{margin:0;font-size:18px;width:18px;height:18px}.cbp .regenerate-btn .mat-spinner{margin:0}.cbp .regenerate-btn:disabled{opacity:.7;cursor:not-allowed}.cbp .close-btn{padding:8px;border-radius:4px;transition:background-color .2s ease}.cbp .close-btn:hover{background-color:#f5f5f5}.cbp .close-btn .mat-icon{font-size:20px;width:20px;height:20px}.cbp .progress-popup{display:flex;flex-direction:column;justify-content:center;align-items:center}.cbp .progress-popup .desc{color:#000000de;text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.cbp .behavioural-pill{display:flex;padding:2px 6px;justify-content:center;align-items:center;gap:4px;border-radius:16px;border:1px solid #F8B861;background:linear-gradient(0deg,#f8b86152 0% 100%),#fff;margin:2px 4px 2px 0;font-size:12px}.cbp .functional-pill{display:flex;padding:2px 6px;justify-content:center;align-items:center;gap:4px;border-radius:16px;border:1px solid #E24577;background:linear-gradient(0deg,#e245773d 0% 100%),#fff;margin:2px 4px 2px 0;font-size:12px}.cbp .domain-pill{display:flex;padding:2px 6px;justify-content:center;align-items:center;gap:4px;border-radius:16px;border:1px solid #7B47A4;background:linear-gradient(0deg,#7b47a43d 0% 100%),#fff;margin:2px 4px 2px 0;font-size:12px}.cbp .popup-header{display:flex;flex-direction:row;justify-content:space-between}.cbp .popup-footer{display:flex;flex-direction:row;justify-content:end}.cbp .view-cbp-plan{margin:10px;padding:10px}.cbp .view-cbp-plan-popup{padding:24px;max-height:70vh;overflow-y:auto}.cbp .section{border-radius:8px;background:#1b4ca114;padding:16px}.cbp .popup-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ddd;font-weight:700;flex-shrink:0}.cbp .popup-footer{display:flex;justify-content:flex-end;gap:16px;padding:16px 24px;border-top:1px solid #ddd;background-color:#fff;flex-shrink:0;position:sticky;bottom:0}.cbp .section-container{overflow-y:auto;flex:1 1 auto}.cbp .competency-list{display:flex;flex-direction:row;gap:0px;flex-wrap:wrap;margin:0;padding:0;list-style:none}.cbp .competency-text{color:#000;font-family:Lato;font-size:12px;font-style:normal;font-weight:400;line-height:normal;padding:3px 6px}.cbp .competency-text-behavioral{color:#654321;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.cbp .competency-text-functional{color:#b01669;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.cbp .competency-text-domain{color:#301934;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.cbp .competency-sub-heading{color:#1b4ca1;font-family:Montserrat;font-size:14px;font-style:normal;font-weight:600;line-height:normal}.cbp .cursor-pointer{cursor:pointer}.cbp .btn-active{border-radius:var(--Radius-Full-Round, 9999999px);opacity:1;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.cbp .custom-textarea{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.cbp .overlay-loader{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#ffffffbf;z-index:9999;display:flex;justify-content:center;align-items:center}.cbp .competencis-grid{display:flex;flex-direction:row;justify-content:space-between;gap:16px}.cbp .grid-list-item-behavioral div{border-left:2px solid darkorange}.cbp .grid-list-item-functional div{border-left:2px solid #ff1493}.cbp .grid-list-item-domain div{border-left:2px solid #6b21a8}.cbp .competencies-grid-3{width:33%}.cbp .bg-blue-50{background-color:#fde8cc;border-radius:4px}.cbp .bg-green-50{background-color:#f8d2de;border-radius:4px}.cbp .bg-purple-50{background-color:#dfd3e9;border-radius:4px}.cbp .grid-list-item div{padding:5px 10px;margin:10px 0}.cbp .course-pill-container{display:flex;gap:8px}.cbp .relevancy-pill-green{display:flex;padding:4px 8px;align-items:center;gap:4px;border-radius:16px;border:1px solid #e0e0e0;background:#f8f9fa}.cbp .mt-1{margin-top:.25rem}.cbp .mt-2{margin-top:.5rem}.cbp .mt-3{margin-top:.75rem}.cbp .show-more-competency{display:inline-flex;align-items:center}.cbp .show-more-link{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:500;line-height:normal;margin:2px 4px 2px 0;text-decoration:none}.cbp .show-more-link:hover{text-decoration:underline}.cbp .course-content{flex:1;display:flex;flex-direction:column}.cbp .course-footer{margin-top:auto;padding-top:12px;display:flex;justify-content:space-between}.cbp ::ng-deep .mdc-tab__text-label{font-weight:700;font-family:Montserrat!important;font-size:16px;color:#000!important;text-transform:capitalize}.cbp .competency-tag{display:inline-block;padding:.25rem .75rem;border-radius:9999px;font-size:.75rem;font-weight:500;margin-right:.5rem;margin-bottom:.5rem}.cbp .menu-list-item.active{background-color:#1b4ca1;color:#fff}.cbp .menu-list-item:hover{background-color:#1b4ca1;color:#fff;border-color:#1b4ca1}.cbp .gray-bg{background-color:rgb(248,250,252,var(--tw-bg-opacity, 1));border-radius:8px;border:1px solid #ccc}.cbp .div-count{font-family:Lato;font-size:20px;font-weight:700}.cbp .green-bg{background-color:#0080001c;border:1px solid #006400;border-radius:8px}.cbp .div-green-count{font-family:Lato;font-size:20px;font-weight:700;color:#006400}.cbp .div-green-label{color:#006400;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.cbp .gray-bg-item{background-color:rgb(248,250,252,var(--tw-bg-opacity, 1));border-radius:8px;border:1px solid #ccc;padding:4px 8px;margin:10px}.cbp .add-btn{color:#1b4ca1;font-size:14px;font-family:Lato}.cbp .list-flex{display:flex;flex-direction:row;justify-content:space-between}.cbp .all-category-list .mat-icon{vertical-align:middle}.cbp .course-list-container-flex{display:flex;align-items:flex-start;gap:2rem}.cbp .left-panel{flex:0 0 250px;font-weight:700;text-align:left}.cbp .right-panel{flex:1;display:flex;flex-direction:row;flex-wrap:wrap;gap:20px;align-content:flex-start;justify-content:flex-start}.cbp .category-list-item{font-weight:400;font-size:16px;font-family:Lato;padding:5px}.cbp .right-panel-flex{display:flex;flex:0 0 100%;width:100%;flex-direction:row;flex-wrap:wrap;gap:20px;justify-content:flex-start}.cbp .course-list-container-right-flex{display:flex}.cbp .no-gaps-message{display:flex;flex-direction:column;align-items:center;padding:24px;background:linear-gradient(135deg,#4caf501a,#81c7841a);border:2px solid #4CAF50;border-radius:16px;margin:16px 0}.cbp .no-gaps-message .success-icon{font-size:25px;color:#4caf50;margin-bottom:16px}.cbp .no-gaps-message h4{color:#2e7d32;font-family:Montserrat;font-size:20px;font-weight:600;margin:0 0 8px;text-align:center}.cbp .no-gaps-message p{color:#388e3c;font-family:Lato;font-size:14px;font-weight:400;margin:0;text-align:center;line-height:1.5}.cbp .section-header-improved{display:flex;flex-direction:column;gap:16px}.cbp .search-and-buttons-container{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.cbp .search-container-compact{flex:0 0 auto;min-width:280px}.cbp .search-container-compact .rsearch{position:relative;display:flex;align-items:center}.cbp .search-container-compact .search-icon{position:absolute;left:12px;color:#666;font-size:20px;z-index:1}.cbp .search-container-compact .sinput-compact{border-radius:25px;border:1px solid #d5d0d0;padding:8px 12px 8px 40px;height:32px;width:100%;font:400 14px Lato;box-sizing:border-box;transition:border-color .3s ease}.cbp .search-container-compact .sinput-compact:focus{outline:none;border-color:#1b4ca1;box-shadow:0 0 0 2px #1b4ca11a}.cbp .search-container-compact .sinput-compact::placeholder{color:#999}.cbp .btn-group-compact{display:flex;gap:8px;flex:0 0 auto}.cbp .category-list-item{padding:8px 12px!important;border-radius:6px;border:1px solid transparent;transition:all .3s ease;background:#f8f9fa;color:#333;font-family:Lato;font-size:14px!important;font-weight:400!important}.cbp .category-list-item:hover{background:#1b4ca10d;border-color:#1b4ca133}.cbp .category-list-item.selected-theme{background:#1b4ca11a;border-color:#1b4ca1;color:#1b4ca1;font-weight:600!important}.cbp .category-list-item.selected-theme:before{content:\"\\2713  \";color:#1b4ca1;font-weight:700}.cbp .theme-filter-controls{margin-bottom:8px}.cbp .clear-filter-btn{background:#f8f9fa;border:1px solid #ddd;border-radius:20px;padding:4px 12px;font-size:12px;color:#666;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:4px}.cbp .clear-filter-btn:hover{background:#e9ecef;border-color:#adb5bd}.cbp .clear-filter-btn mat-icon{font-size:16px;width:16px;height:16px}.cbp .no-course-found-container{display:flex;justify-content:center;align-items:center;min-height:300px;padding:20px}.cbp .no-course-card{background:linear-gradient(135deg,#f8f9fa,#e9ecef);border:2px dashed #ced4da;border-radius:16px;padding:40px;text-align:center;max-width:500px;box-shadow:0 4px 12px #0000000d}.cbp .no-course-card .no-course-icon{margin-bottom:20px}.cbp .no-course-card .no-course-icon mat-icon{font-size:48px;width:48px;height:48px;color:#6c757d}.cbp .no-course-card .no-course-content h4{color:#495057;font-family:Montserrat;font-size:24px;font-weight:600;margin-bottom:12px}.cbp .no-course-card .no-course-content p{color:#6c757d;font-family:Lato;font-size:16px;line-height:1.5;margin-bottom:12px}.cbp .no-course-card .no-course-content p strong{color:#1b4ca1;font-weight:600}.cbp .no-course-card .suggest-course-btn{background:linear-gradient(135deg,#1b4ca1,#164080);color:#fff;border:none;border-radius:25px;padding:12px 24px;font-family:Lato;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;margin:20px auto 0;transition:all .3s ease;box-shadow:0 4px 12px #1b4ca14d}.cbp .no-course-card .suggest-course-btn:hover{background:linear-gradient(135deg,#164080,#0f2f5f);transform:translateY(-2px);box-shadow:0 6px 16px #1b4ca166}.cbp .no-course-card .suggest-course-btn:active{transform:translateY(0)}.cbp .no-course-card .suggest-course-btn mat-icon{font-size:18px;width:18px;height:18px}.cbp .left-panel{flex:0 0 280px!important;background:#f8f9fa;border-radius:12px;padding:16px;border:1px solid #e9ecef;max-height:600px;overflow-y:auto;font-weight:400!important}@media (max-width: 1200px){.cbp .search-and-buttons-container{flex-direction:column;align-items:stretch}.cbp .search-container-compact{min-width:auto;width:100%}.cbp .btn-group-compact{justify-content:center;flex-wrap:wrap}}@media (max-width: 1200px) and (min-width: 769px){.cbp .course-list-item{flex:1 1 calc(50% - 10px);min-width:300px;max-width:none}}@media (max-width: 768px){.cbp .course-list-container-flex{flex-direction:column}.cbp .left-panel{flex:none!important;max-height:300px}.cbp .course-list-item{flex:0 0 100%;max-width:100%}.cbp .no-course-card{padding:20px}.cbp .no-course-card .no-course-content h4{font-size:20px}.cbp .no-course-card .no-course-content p{font-size:14px}}.cbp ::ng-deep .error-snackbar{background-color:#f44336!important;color:#fff!important;font-weight:500}.cbp ::ng-deep .error-snackbar .mat-simple-snackbar-action{color:#fff!important}.cbp ::ng-deep .session-expired-snackbar{background-color:#ff9800!important;color:#fff!important;font-weight:600}.cbp ::ng-deep .session-expired-snackbar .mat-simple-snackbar-action{color:#fff!important;font-weight:700}.cbp .download-pdf{justify-content:end;display:flex;flex-direction:row}.section-header-improved,.section-header-improved-sec-2{display:flex;flex-direction:row;gap:0px;width:100%}.search-and-buttons-container{display:flex;justify-content:space-between;gap:4px;flex-direction:column;flex-wrap:wrap;width:37%;margin:0 5px}::ng-deep .select-search-panel{border:1px solid #ccc!important;border-radius:12px!important;box-shadow:0 8px 20px #0000001f}:host ::ng-deep .mat-select-arrow-wrapper{margin-top:5px!important}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{color:#ccc}:host ::ng-deep .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick{color:#1b4ca1;border-color:#1b4ca1!important}::ng-deep .select-search-panel .mat-option.mat-selected:not(.mat-option-disabled){background-color:#1b4ca1!important;color:#fff!important}:host ::ng-deep .mat-form-field-appearance-outline{border-radius:25px;border:1px solid #ccc}:host ::ng-deep .mat-form-field-focused .mat-form-field-appearance-outline{border-color:#1b4ca1!important}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-start{border-radius:25px 0 0 25px;border:none!important}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-end{border-right:none!important;border:none!important;border-radius:0 25px 25px 0}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-gap{border:none!important;border-radius:25px}:host::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix{background-color:transparent!important}:host ::ng-deep .search-and-buttons-container .mat-option-text{color:#fff!important}.header-container{display:flex;flex-direction:row;justify-content:space-between;width:100%;margin:10px 0}.right-side-container{display:flex;justify-content:space-between;gap:64px}::ng-deep .language-select .mat-select-trigger{font-weight:400!important}::ng-deep .language-select .mat-select-value{color:#fff!important}:host ::ng-deep .select-search-panel .mat-option-text{color:#fff!important}.competency-tags{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}.proficiency-tag,.delivery-mode-tag{display:inline-flex;align-items:center;justify-content:center;padding:2px 8px;border-radius:16px;font-size:11px;line-height:16px;font-weight:500;white-space:nowrap}.delivery-mode-tag.online{background:#e6f4ea;color:#1a7f45;border:1px solid #9BD3B0}.delivery-mode-tag.offline{background:#fdf0e3;color:#a2590a;border:1px solid #F0C48A}.delivery-mode-tag.blended{background:#efe9fb;color:#5b21b6;border:1px solid #C9B6F0}.proficiency-tag.strategic{background:#1b4ca1;color:#fff;border:none}.proficiency-tag.tactical{background:#5b8def;color:#fff;border:none}.proficiency-tag.operational{background:#dbe6f7;color:#1b4ca1;border:none}.flex-col-theme{display:flex;flex-direction:row;gap:6px}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i7.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLegacyLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "component", type: i9.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i11$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i12.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ViewFinalCbpPlanComponent, selector: "app-view-final-cbp-plan", viewQueries: [{ propertyName: "pdfContent", first: true, predicate: ["pdfContent"], descendants: true }, { propertyName: "dialogContent", first: true, predicate: ["dialogContent"], descendants: true }], ngImport: i0, template: "<div class=\"view-cbp-plan\" #dialogContent style=\"max-height: 80vh; overflow: auto;\">\n    <div class=\"popup-container\">\n        <div class=\"popup-header\">\n            <div class=\"header-container\">\n                <div>\n                    <div class=\"heading\">View Final <span *ngIf=\"openedFrom === 'cbp'\">CBP</span><span\n                            *ngIf=\"openedFrom === 'acbp'\">ACBP</span></div>\n                </div>\n                <div class=\"right-side-container\">\n                    <div class=\"search-and-buttons-container\">\n                        <form [formGroup]=\"filterForm\">\n                            <div>\n                                <mat-form-field appearance=\"outline\" class=\"language-select\" style=\" height: 34px;\">\n                                    <mat-label style=\"font-weight: normal;\">\n                                        {{ filterForm.get('language')?.value ? '' : 'Select Language' }}\n                                    </mat-label>\n\n                                    <mat-select formControlName=\"language\" panelClass=\"select-search-panel\"\n                                        (selectionChange)=\"applyFilters()\">\n\n                                        <!-- Search box -->\n                                        <input style=\"border:1px solid #ccc; padding: 5px;width: 92%;margin: 5px;\"\n                                            matInput placeholder=\"Search Languages\" (click)=\"$event.stopPropagation()\"\n                                            (keydown)=\"$event.stopPropagation()\"\n                                            (keyup)=\"filterList($any($event.target).value, 'language')\" />\n\n                                        <!-- Values -->\n                                        <mat-option *ngFor=\"let r of filteredLanguages\" [value]=\"r?.code\">\n                                            {{ r?.label }}\n                                        </mat-option>\n\n                                    </mat-select>\n                                </mat-form-field>\n                            </div>\n                        </form>\n                    </div>\n                    <div class=\"cursor-pointer\" (click)=\"closeDialog()\">\n                        <mat-icon>close</mat-icon>\n                    </div>\n                </div>\n            </div>\n\n\n\n        </div>\n        <div class=\"section-container\" #pdfContent>\n            <header class=\"bg-white header-border\">\n                <div class=\"header-flex justify-between\" style=\"width:100%\">\n                    <div class=\"flex items-center space-x-4\" style=\"width:50%\">\n                        <div class=\"image-container\">\n                            <div>\n                                <img src=\"assets/icons/dopt-logo.png\" alt=\"Department of Personnel & Training\"\n                                    class=\"h-15\" />\n                            </div>\n                            <div>\n                                <img src=\"assets/icons/CBC_logo.svg\" alt=\"Capacity Building Commission Logo\"\n                                    class=\"h-10\" />\n                            </div>\n                            <div>\n                                <img src=\"assets/icons/karmayogiLogo-min.png\" alt=\"Karmayogi Bharat Logo\"\n                                    class=\"h-10\" />\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"text-right\" style=\"width:50%\">\n                        <h1 class=\"text-2xl font-bold text-gray-900\">\n                            <span\n                                *ngIf=\"sharedService?.cbpPlanFinalObj?.ministry?.sbOrgType === 'state'\">{{sharedService?.cbpPlanFinalObj?.ministry?.orgName}}</span>\n                            <span\n                                *ngIf=\"sharedService?.cbpPlanFinalObj?.ministry?.sbOrgType === 'ministry'\">{{sharedService?.cbpPlanFinalObj?.ministry?.orgName}}</span>\n                            <span\n                                *ngIf=\"sharedService?.cbpPlanFinalObj?.department_name\">/{{sharedService?.cbpPlanFinalObj?.department_name}}</span>\n                            - Capacity Building Plan\n                        </h1>\n                        <p class=\"text-gray-600\">Comprehensive Role-Based Competency Analysis</p>\n                    </div>\n                </div>\n            </header>\n            <div class=\"min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100\">\n                <!-- Header -->\n\n\n                <div class=\"max-w-7xl mx-auto px-6 py-8 mt-4\">\n                    <!-- KPI Dashboard -->\n                    <div class=\"competency-container mt-2\">\n                        <div class=\"outside-layer-total\">\n                            <div class=\"horizontal-flex mt-2\">\n                                <div>\n                                    <svg class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\"\n                                        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n                                        stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n                                        <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\" />\n                                        <path d=\"M14 2v6h6\" />\n                                        <path d=\"M16 13H8\" />\n                                        <path d=\"M16 17H8\" />\n                                        <path d=\"M10 9H8\" />\n                                    </svg>\n                                </div>\n                                <div>\n                                    <div class=\"count\">{{totalCompetencieObj?.total}}</div>\n                                </div>\n                            </div>\n\n                            <div class=\"mt-4\">\n                                <div class=\"sub-heading\">\n                                    <p>Total Competencies</p>\n                                </div>\n                            </div>\n                            <div class=\"progress-bar mt-2\">\n                                <div class=\"progress-bar-fill\" style=\"width: 60%;\"></div>\n                            </div>\n                            <div>\n                                <div class=\"sub-text\">Total Competencies: {{totalCompetencieObj?.total}}</div>\n                            </div>\n                            <div class=\"count\">\n                                <!-- {{competenciesCount?.total}} -->\n                            </div>\n                        </div>\n                        <div class=\"outside-layer-behavioral\">\n                            <div class=\"horizontal-flex mt-2\">\n                                <div>\n                                    <svg class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\"\n                                        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n                                        stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n                                        <path d=\"M15.5 17a4 4 0 0 1-5 0\" />\n                                        <path d=\"M13 14h.01\" />\n                                        <path d=\"M11 11h.01\" />\n                                        <path d=\"M17 14h.01\" />\n                                        <path d=\"M13 10h.01\" />\n                                        <path d=\"M13 18h.01\" />\n                                        <path d=\"M13 6h.01\" />\n                                        <path d=\"M17 18h.01\" />\n                                        <path d=\"M17 6h.01\" />\n                                        <path d=\"M21 12a9 9 0 0 1-9 9a9 9 0 0 1-9-9a9 9 0 0 1 9-9a9 9 0 0 1 9 9z\" />\n                                    </svg>\n                                </div>\n                                <div>\n                                    <div class=\"count\">{{totalCompetencieObj?.behavioral}}</div>\n                                </div>\n                            </div>\n\n                            <div class=\"mt-2\">\n                                <div class=\"sub-heading\">\n                                    <p>Behavioral Competencies</p>\n                                </div>\n                            </div>\n                            <div class=\"progress-bar mt-2\">\n                                <div class=\"progress-bar-fill-behavioural\" style=\"width: 60%;\"></div>\n                            </div>\n                            <div>\n                                <div class=\"sub-text\">Behavioral Competencies: {{totalCompetencieObj?.behavioral}}\n                                </div>\n                            </div>\n\n                        </div>\n                        <div class=\"outside-layer-functional\">\n                            <div class=\"horizontal-flex mt-2\">\n                                <div>\n                                    <svg class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\"\n                                        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n                                        stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n                                        <path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\" />\n                                        <path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\" />\n                                    </svg>\n                                </div>\n                                <div>\n                                    <div class=\"count\">{{totalCompetencieObj?.functional}}</div>\n                                </div>\n                            </div>\n\n                            <div class=\"mt-2\">\n                                <div class=\"sub-heading\">\n                                    <p>Functional Competencies</p>\n                                </div>\n                            </div>\n                            <div class=\"progress-bar mt-2\">\n                                <div class=\"progress-bar-fill-functional\" style=\"width: 60%;\"></div>\n                            </div>\n                            <div>\n                                <div class=\"sub-text\">Functional Competencies: {{totalCompetencieObj?.functional}}</div>\n                            </div>\n\n\n                        </div>\n                        <div class=\"outside-layer-domain\">\n                            <div class=\"horizontal-flex mt-2\">\n                                <div>\n                                    <svg class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\"\n                                        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n                                        stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n                                        <circle cx=\"12\" cy=\"12\" r=\"10\" />\n                                        <circle cx=\"12\" cy=\"12\" r=\"6\" />\n                                        <circle cx=\"12\" cy=\"12\" r=\"2\" />\n                                    </svg>\n                                </div>\n                                <div>\n                                    <div class=\"count\">{{totalCompetencieObj?.domain}}</div>\n                                </div>\n                            </div>\n\n                            <div class=\"mt-2\">\n                                <div class=\"sub-heading\">\n                                    <p>Domain Competencies</p>\n                                </div>\n                            </div>\n                            <div class=\"progress-bar mt-2\">\n                                <div class=\"progress-bar-fill-domain\" style=\"width: 60%;\"></div>\n                            </div>\n                            <div>\n                                <div class=\"sub-text\">Domain Competencies: {{totalCompetencieObj?.domain}}</div>\n                            </div>\n\n                        </div>\n                    </div>\n                    <!-- <div class=\"mb-8\">\n                <h2 class=\"text-2xl font-bold text-gray-900 mb-6nheading\">Competency Overview</h2>\n                <div class=\"competency-grid\">\n                  <ng-container *ngFor=\"let kpi of overallKPIs;\">\n                    <div class=\"bg-white rounded-xl  outside-layer-total p-6 border-l-4 hover:shadow-xl transition-shadow\" [style.border-left-color]=\"kpi.color\">\n                      <div class=\"flex items-center justify-between mb-4 inside-layer\">\n                        <div [class]=\"'p-3 rounded-lg ' + kpi.bgColor\">\n                          <ng-container [ngSwitch]=\"kpi.name\">\n                            <svg *ngSwitchCase=\"'Behavioral Competencies'\" class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n                              <path d=\"M15.5 17a4 4 0 0 1-5 0\"/>\n                              <path d=\"M13 14h.01\"/><path d=\"M11 11h.01\"/><path d=\"M17 14h.01\"/><path d=\"M13 10h.01\"/>\n                              <path d=\"M13 18h.01\"/><path d=\"M13 6h.01\"/><path d=\"M17 18h.01\"/><path d=\"M17 6h.01\"/>\n                              <path d=\"M21 12a9 9 0 0 1-9 9a9 9 0 0 1-9-9a9 9 0 0 1 9-9a9 9 0 0 1 9 9z\"/>\n                            </svg>\n          \n                            <svg *ngSwitchCase=\"'Functional Competencies'\" class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n                              <path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"/><path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"/>\n                            </svg>\n          \n                            <svg *ngSwitchCase=\"'Domain Competencies'\" class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n                              <circle cx=\"12\" cy=\"12\" r=\"10\"/><circle cx=\"12\" cy=\"12\" r=\"6\"/><circle cx=\"12\" cy=\"12\" r=\"2\"/>\n                            </svg>\n          \n                            <svg *ngSwitchCase=\"'Total Competencies'\" class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n                              <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"/>\n                              <path d=\"M14 2v6h6\"/><path d=\"M16 13H8\"/><path d=\"M16 17H8\"/><path d=\"M10 9H8\"/>\n                            </svg>\n                            \n                          </ng-container>\n                        </div>\n                        <div class=\"text-right\">\n                          <div class=\"text-2xl font-bold text-gray-900\">{{kpi.total}}</div>\n                        </div>\n                      </div>\n                      <h3 class=\"text-gray-900 font-semibold mb-2 heading\">{{kpi.name}}</h3>\n                      <div class=\"w-full bg-gray-200 rounded-full h-3\">\n                        <div class=\"h-3 rounded-full transition-all duration-500\"\n                             [style.width.%]=\"kpi.avgCompletion\"\n                             [style.background-color]=\"kpi.color\">\n                        </div>\n                      </div>\n                      <p class=\"text-sm text-gray-500 mt-2\">Total Competencies: {{kpi.total}}</p>\n                    </div>\n                  </ng-container>\n                </div>\n              </div> -->\n\n                    <!-- Designation Reports -->\n                    <div class=\"space-y-8 mt-4\">\n                        <h2 class=\"text-2xl font-bold text-gray-900 mb-6 heading\">Detailed Competency Framework by\n                            Designation</h2>\n\n                        <ng-container *ngFor=\"let designation of designationData;\">\n                            <div class=\"bg-white rounded-xl  overflow-hidden section-shadow\">\n                                <!-- Header -->\n                                <div\n                                    class=\"bg-gradient-to-r from-indigo-600 to-blue-600 text-white p-6 heading-with-bg\">\n                                    <div class=\"flex items-center justify-between\">\n                                        <div>\n                                            <h3 class=\"text-2xl font-bold mb-2 heading-bg\">{{designation.designation}}\n                                            </h3>\n                                            <p class=\"text-indigo-100 mb-1\">Wing/Division: {{designation.wing}}</p>\n                                        </div>\n                                        <div class=\"flex items-center space-x-4 competency-count-by-designation\">\n                                            <span class=\"font-semibold text-sm\">Behavioral:\n                                                {{designation.behavioralCompetencies.length}} total</span>\n                                            <span class=\"font-semibold text-sm\">Functional:\n                                                {{designation.functionalCompetencies.length}} total</span>\n                                            <span class=\"font-semibold text-sm\">Domain:\n                                                {{designation.domainCompetencies.length}} total</span>\n                                        </div>\n                                    </div>\n                                </div>\n\n                                <!-- Body -->\n                                <div class=\"p-4 section-shadow\">\n                                    <!-- Roles -->\n                                    <div class=\"mb-6\">\n                                        <h4 class=\"text-xl font-semibold text-gray-900 mb-3 flex items-center\">\n                                            <svg class=\"h-5 w-5 mr-2 text-indigo-600 icon-sm\" fill=\"none\"\n                                                viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\n                                                    d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\" />\n                                            </svg>\n                                            Roles & Responsibilities\n                                        </h4>\n                                        <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2\">\n                                            <div *ngFor=\"let role of designation.rolesResponsibilities; let i = index\"\n                                                class=\"bg-gray-50 p-2 rounded border-l-3 border-indigo-500\">\n                                                <p class=\"text-sm text-gray-700 leading-relaxed\">{{role}}</p>\n                                            </div>\n                                        </div>\n                                    </div>\n                                    <!-- Activities -->\n                                    <div class=\"mb-6 mt-4\">\n                                        <h4 class=\"text-xl font-semibold text-gray-900 mb-3 flex items-center\">\n                                            <svg class=\"h-5 w-5 mr-2 text-indigo-600 icon-sm\" fill=\"none\"\n                                                viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\n                                                    d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\" />\n                                            </svg>\n                                            Activities\n                                        </h4>\n                                        <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2\">\n                                            <div *ngFor=\"let role of designation.activities; let i = index\"\n                                                class=\"bg-gray-50 p-2 rounded border-l-3 border-indigo-500\">\n                                                <p class=\"text-sm text-gray-700 leading-relaxed\">{{role}}</p>\n                                            </div>\n                                        </div>\n                                    </div>\n                                    <div class=\"page-break\"></div>\n                                    <!-- Competencies -->\n                                    <div class=\"competencis-grid mt-4\">\n                                        <!-- Behavioral -->\n                                        <div class=\"bg-blue-50 rounded-lg p-3 competencies-grid-3\">\n                                            <h4 class=\"font-semibold text-blue-800 text-base mb-2\">Behavioral</h4>\n                                            <div class=\"space-y-1 grid-list-item grid-list-item-behavioral\">\n                                                <div *ngFor=\"let comp of designation.behavioralCompetencies; let i = index\"\n                                                    class=\"bg-white p-1.5 rounded text-sm text-gray-700 border-l-2 border-blue-400\">\n                                                    {{comp}}\n                                                    <div class=\"flex-col-theme\">\n                                                    \n                                                    <span class=\"competency-tags\">\n                                                        <span *ngIf=\"designation.behavioralSetForProficiencyLevel[i]\"\n                                                        class=\"proficiency-tag\"\n                                                        [ngClass]=\"designation.behavioralSetForProficiencyLevel[i]?.toLowerCase()\"\n                                                        [matTooltip]=\"designation.behavioralSetForProficiencyLevelRationale[i]\"\n                                                        >\n                                                        {{ designation.behavioralSetForProficiencyLevel[i] }}\n                                                        </span>\n\n                                                        \n                                                    </span>\n                                                    \n                                                    <span class=\"competency-tags\">\n                                                        <span *ngIf=\"designation.behavioralSetForDeliveryMode[i]\"\n                                                        class=\"delivery-mode-tag\"\n                                                        [ngClass]=\"designation.behavioralSetForDeliveryMode[i]?.toLowerCase()\"\n                                                        [matTooltip]=\"designation.behavioralSetForDeliveryModeRationale[i]\"\n                                                        >\n                                                        {{ designation.behavioralSetForDeliveryMode[i] }}\n                                                        </span>\n\n                                                       \n                                                    </span>\n                                                    </div>\n                                                </div>\n                                              \n                                            </div>\n                                            \n                                            <div class=\"mt-2 text-sm text-blue-600 font-medium\">\n                                                {{designation.behavioralCompetencies.length}} total\n                                            </div>\n                                        </div>\n\n                                        <!-- Functional -->\n                                        <div class=\"bg-green-50 rounded-lg p-3 competencies-grid-3\">\n                                            <h4 class=\"font-semibold text-green-800 text-base mb-2\">Functional</h4>\n                                            <div class=\"space-y-1 grid-list-item grid-list-item-functional\">\n                                                <div *ngFor=\"let comp of designation.functionalCompetencies; let i = index\"\n                                                    class=\"bg-white p-1.5 rounded text-sm text-gray-700 border-l-2 border-green-400\">\n                                                    {{comp}}\n                                                    <div class=\"flex-col-theme\">\n                                                    \n                                                    <span class=\"competency-tags\">\n                                                        <span *ngIf=\"designation.functionalSetForProficiencyLevel[i]\"\n                                                        class=\"proficiency-tag\"\n                                                        [ngClass]=\"designation.functionalSetForProficiencyLevel[i]?.toLowerCase()\"\n                                                        [matTooltip]=\"designation.functionalSetForProficiencyLevelRationale[i]\"\n                                                        >\n                                                        {{ designation.functionalSetForProficiencyLevel[i] }}\n                                                        </span>\n\n                                                        \n                                                    </span>\n                                                    \n                                                    <span class=\"competency-tags\">\n                                                        <span *ngIf=\"designation.functionalSetForDeliveryMode[i]\"\n                                                        class=\"delivery-mode-tag\"\n                                                        [ngClass]=\"designation.functionalSetForDeliveryMode[i]?.toLowerCase()\"\n                                                        [matTooltip]=\"designation.functionalSetForDeliveryModeRationale[i]\"\n                                                        >\n                                                        {{ designation.functionalSetForDeliveryMode[i] }}\n                                                        </span>\n\n                                                       \n                                                    </span>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                            <div class=\"mt-2 text-sm text-green-600 font-medium\">\n                                                {{designation.functionalCompetencies.length}} total\n                                            </div>\n                                        </div>\n\n                                        <!-- Domain -->\n                                        <div class=\"bg-purple-50 rounded-lg p-3 competencies-grid-3\">\n                                            <h4 class=\"font-semibold text-purple-800 text-base mb-2\">Domain</h4>\n                                            <div class=\"space-y-1 grid-list-item grid-list-item-domain\">\n                                                <div *ngFor=\"let comp of designation.domainCompetencies; let i = index\"\n                                                    class=\"bg-white p-1.5 rounded text-sm text-gray-700 border-l-2 border-purple-400\">\n                                                    {{comp}}\n                                                    <div class=\"flex-col-theme\">\n                                                    \n                                                    <span class=\"competency-tags\">\n                                                        <span *ngIf=\"designation.domainSetForProficiencyLevel[i]\"\n                                                        class=\"proficiency-tag\"\n                                                        [ngClass]=\"designation.domainSetForProficiencyLevel[i]?.toLowerCase()\"\n                                                        [matTooltip]=\"designation.domainSetForProficiencyLevelRationale[i]\"\n                                                        >\n                                                        {{ designation.domainSetForProficiencyLevel[i] }}\n                                                        </span>\n\n                                                        \n                                                    </span>\n                                                    \n                                                    <span class=\"competency-tags\">\n                                                        <span *ngIf=\"designation.domainSetForDeliveryMode[i]\"\n                                                        class=\"delivery-mode-tag\"\n                                                        [ngClass]=\"designation.domainSetForDeliveryMode[i]?.toLowerCase()\"\n                                                        [matTooltip]=\"designation.domainSetForDeliveryModeRationale[i]\"\n                                                        >\n                                                        {{ designation.domainSetForDeliveryMode[i] }}\n                                                        </span>\n\n                                                       \n                                                    </span>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                            <div class=\"mt-2 text-sm text-purple-600 font-medium\">\n                                                {{designation.domainCompetencies.length}} total\n                                            </div>\n                                        </div>\n                                    </div>\n                                    <!-- Adding courses -->\n                                    <div class=\"cbp mt-4\"\n                                        *ngIf=\"designation.selectedCourses?.length && openedFrom === 'acbp'\">\n                                        <h4 class=\"text-xl font-semibold text-gray-900 mb-3 flex items-center\">\n                                            <svg class=\"h-5 w-5 mr-2 text-indigo-600 icon-sm\" fill=\"none\"\n                                                viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\n                                                    d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\" />\n                                            </svg>\n                                            Courses\n                                        </h4>\n                                        <div class=\"course-list-container\">\n                                            <div class=\"course-list-item\"\n                                                *ngFor=\"let item of designation.selectedCourses; let i = index\">\n                                                <div class=\"course-header\">\n                                                    <div class=\"checked-course-container\">\n\n                                                        <div>\n                                                            <div class=\"course-pill\">\n                                                                <div class=\"course-pill-text\">\n                                                                    <span><img\n                                                                            src=\"assets/icons/course.svg\"></span>&nbsp;<span>Course</span>\n                                                                </div>\n                                                            </div>\n                                                        </div>\n\n                                                    </div>\n                                                    <div *ngIf=\"item?.rationale && !item?.is_public\">\n                                                        <div class=\"ai-recommened-pill-green\">\n                                                            <div class=\"ai-recommened-pill-green-text\">\n                                                                <span class=\"ai-loader-icon\"><img\n                                                                        src=\"assets/icons/ai-loader.gif\"></span>\n\n                                                                <span>AI Recommended - iGOT </span>\n\n                                                            </div>\n                                                        </div>\n                                                        <div class=\"ai-recommened-pill-orange mt-2\"\n                                                            *ngIf=\"item?.platform\">\n                                                            <div class=\"ai-recommened-pill-orange-text\">\n                                                                <span class=\"ai-loader-icon\"><img\n                                                                        src=\"assets/icons/ai-loader.gif\"></span>\n                                                                <a class=\"cursor-pointer\" [href]=\"item?.public_link\"\n                                                                    target=\"_blank\"><span>Platform -\n                                                                        {{item?.platform}}</span></a>\n                                                            </div>\n                                                        </div>\n                                                        <div class=\"ai-recommened-pill-orange mt-2\"\n                                                            *ngIf=\"item?.organisation?.length\">\n                                                            <div class=\"ai-recommened-pill-orange-text\">\n                                                                <span class=\"ai-loader-icon\"><img\n                                                                        src=\"assets/icons/ai-loader.gif\"></span>\n                                                                <span>Provider - {{item?.organisation[0]}}</span>\n                                                            </div>\n                                                        </div>\n                                                    </div>\n                                                    <div *ngIf=\"item?.rationale && item?.is_public\">\n                                                        <div class=\"ai-recommened-pill-public\">\n                                                            <div class=\"ai-recommened-pill-public-text\">\n                                                                <span class=\"ai-loader-icon\"><img\n                                                                        src=\"assets/icons/ai-loader.gif\"></span>\n\n                                                                <span>AI Recommended - Public </span>\n\n                                                            </div>\n                                                        </div>\n                                                        <div class=\"ai-recommened-pill-orange mt-2\"\n                                                            *ngIf=\"item?.platform\">\n                                                            <div class=\"ai-recommened-pill-orange-text\">\n                                                                <span class=\"ai-loader-icon\"><img\n                                                                        src=\"assets/icons/ai-loader.gif\"></span>\n                                                                <a class=\"cursor-pointer\" [href]=\"item?.public_link\"\n                                                                    target=\"_blank\"><span>Platform -\n                                                                        {{item?.platform}}</span></a>\n                                                            </div>\n                                                        </div>\n                                                        <div class=\"ai-recommened-pill-orange mt-2\"\n                                                            *ngIf=\"item?.organisation?.length\">\n                                                            <div class=\"ai-recommened-pill-orange-text\">\n                                                                <span class=\"ai-loader-icon\"><img\n                                                                        src=\"assets/icons/ai-loader.gif\"></span>\n                                                                <span>Provider - {{item?.organisation[0]}}</span>\n                                                            </div>\n                                                        </div>\n                                                    </div>\n                                                    <div *ngIf=\"!item?.rationale\">\n                                                        <div class=\"ai-recommened-pill-gray\">\n                                                            <div class=\"ai-recommened-pill-gray-text\">\n                                                                <span class=\"ai-loader-icon\"><img\n                                                                        src=\"assets/icons/ai-loader.gif\"></span>\n\n                                                                <span>Manually Suggested - iGOT </span>\n\n                                                            </div>\n                                                        </div>\n                                                        <div class=\"ai-recommened-pill-orange mt-2\"\n                                                            *ngIf=\"item?.platform\">\n                                                            <div class=\"ai-recommened-pill-orange-text\">\n                                                                <span class=\"ai-loader-icon\"><img\n                                                                        src=\"assets/icons/ai-loader.gif\"></span>\n                                                                <a class=\"cursor-pointer\" [href]=\"item?.public_link\"\n                                                                    target=\"_blank\"><span>Platform -\n                                                                        {{item?.platform}}</span></a>\n                                                            </div>\n                                                        </div>\n                                                        <div class=\"ai-recommened-pill-orange mt-2\"\n                                                            *ngIf=\"item?.organisation?.length\">\n                                                            <div class=\"ai-recommened-pill-orange-text\">\n                                                                <span class=\"ai-loader-icon\"><img\n                                                                        src=\"assets/icons/ai-loader.gif\"></span>\n                                                                <span>Provider - {{item?.organisation[0]}}</span>\n                                                            </div>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                                <div class=\"course-title mt-4\">\n                                                    <div>\n                                                        <div *ngIf=\"item?.course\">{{item?.course}}</div>\n                                                        <div *ngIf=\"item?.name\">{{item?.name}}</div>\n                                                    </div>\n                                                </div>\n                                                <div class=\"course-desc mt-2\">\n                                                    <div *ngIf=\"isPDFDownload\">\n                                                        <div>{{item?.rationale}}</div>\n                                                    </div>\n                                                </div>\n                                                <div class=\"mt-3\"\n                                                    *ngIf=\"getCompetenciesByType('Behavioural',item)?.length\">\n                                                    <div class=\"competency-sub-heading\">Behavioral Competencies</div>\n                                                    <ul class=\"competency-list mt-1\">\n                                                        <li class=\"behavioural-pill\"\n                                                            *ngFor=\"let comp of getDisplayedCompetencies('Behavioural',item)\">\n                                                            <span class=\"competency-text\"> {{ comp.competencyThemeName\n                                                                }} -\n                                                                {{\n                                                                comp.competencySubThemeName }} </span>\n                                                        </li>\n                                                        <li *ngIf=\"hasMoreThanTwo('Behavioural',item)\"\n                                                            class=\"show-more-competency\">\n                                                            <span class=\"show-more-link cursor-pointer\"\n                                                                (click)=\"toggleCompetencies('Behavioural',item)\">\n                                                                {{ isExpanded('Behavioural',item) ? 'Show Less' : '+' +\n                                                                getRemainingCount('Behavioural',item) + ' More' }}\n                                                            </span>\n                                                        </li>\n                                                    </ul>\n                                                </div>\n                                                <div class=\"mt-2\"\n                                                    *ngIf=\"getCompetenciesByType('Functional',item)?.length\">\n                                                    <div class=\"competency-sub-heading\">Functional Competencies</div>\n                                                    <ul class=\"competency-list mt-1\">\n                                                        <li class=\"functional-pill\"\n                                                            *ngFor=\"let comp of getDisplayedCompetencies('Functional',item)\">\n                                                            <span class=\"competency-text\"> {{ comp.competencyThemeName\n                                                                }} -\n                                                                {{\n                                                                comp.competencySubThemeName }} </span>\n                                                        </li>\n                                                        <li *ngIf=\"hasMoreThanTwo('Functional',item)\"\n                                                            class=\"show-more-competency\">\n                                                            <span class=\"show-more-link cursor-pointer\"\n                                                                (click)=\"toggleCompetencies('Functional',item)\">\n                                                                {{ isExpanded('Functional',item) ? 'Show Less' : '+' +\n                                                                getRemainingCount('Functional',item) + ' More' }}\n                                                            </span>\n                                                        </li>\n                                                    </ul>\n                                                </div>\n                                                <div class=\"mt-2\" *ngIf=\"getCompetenciesByType('Domain',item)?.length\">\n                                                    <div class=\"competency-sub-heading\">Domain Competencies</div>\n                                                    <ul class=\"competency-list mt-1\">\n                                                        <li class=\"domain-pill\"\n                                                            *ngFor=\"let comp of getDisplayedCompetencies('Domain',item)\">\n                                                            <span class=\"competency-text\"> {{ comp.competencyThemeName\n                                                                }} -\n                                                                {{\n                                                                comp.competencySubThemeName }} </span>\n                                                        </li>\n                                                        <li *ngIf=\"hasMoreThanTwo('Domain',item)\"\n                                                            class=\"show-more-competency\">\n                                                            <span class=\"show-more-link cursor-pointer\"\n                                                                (click)=\"toggleCompetencies('Domain',item)\">\n                                                                {{ isExpanded('Domain',item) ? 'Show Less' : '+' +\n                                                                getRemainingCount('Domain',item) + ' More' }}\n                                                            </span>\n                                                        </li>\n                                                    </ul>\n                                                </div>\n                                                <div class=\"mt-2 d-flex justify-content-between item\">\n                                                    <div class=\"relevancy-container\">\n                                                        <div class=\"relevancy\">Relevancy</div>\n                                                        <div class=\"dash\">-</div>\n                                                        <div class=\"percentage\" *ngIf=\"item?.relevancy\">\n                                                            {{item?.relevancy}}%</div>\n                                                        <div class=\"percentage\" *ngIf=\"!item?.relevancy\">N/A</div>\n                                                    </div>\n\n                                                </div>\n\n                                            </div>\n\n                                        </div>\n                                    </div>\n\n                                    <!-- adding courses -->\n                                </div>\n                            </div>\n                        </ng-container>\n                    </div>\n                </div>\n\n                <!-- Footer -->\n\n            </div>\n            <footer class=\"org-footer\">\n                <div class=\"max-w-7xl mx-auto px-6 flex flex-col md:flex-row items-center justify-between\">\n                    <div class=\"flex items-center space-x-4 mb-4 mt-4 md:mb-0 footer-container\">\n                        <div class=\"footer-logo-container\">\n                            <img src=\"assets/icons/karmayogiLogo-min.png\" alt=\"Karmayogi Bharat Logo\" class=\"h-10\"\n                                style=\"margin-left:20px\" />\n                        </div>\n                        <div style=\"margin-left: 100px;\">\n                            <a href=\"https://karmayogibharat.gov.in\" target=\"_blank\" rel=\"noopener noreferrer\"\n                                class=\"text-sm font-semibold transition-colors\">\n                                karmayogibharat.gov.in\n                            </a>\n                        </div>\n\n\n                    </div>\n                    <div class=\"text-sm text-center md:text-right mb-4\" style=\"margin-left: 100px;\">\n                        <p>&copy; 2025 All Rights Reserved.</p>\n                    </div>\n                </div>\n            </footer>\n        </div>\n        <div class=\"popup-footer\">\n            <div>\n                <input class=\"btn-active\" type=\"button\" value=\"Download as Excel\" (click)=\"downloadCSV()\" />\n            </div>\n            <div>\n                <input class=\"btn-active\" type=\"button\" value=\"Download as PDF\"\n                    (click)=\"downloadPdfFromBE(openedFrom)\" />\n            </div>\n            <div>\n                <input class=\"btn-active\" type=\"button\" value=\"Cancel\" (click)=\"cancelForm()\" />\n            </div>\n        </div>\n    </div>\n    <div class=\"overlay-loader\" *ngIf=\"loading\">\n        <mat-spinner diameter=\"50\"></mat-spinner>\n        <div class=\"loader-message\" *ngIf=\"downloadInProgress\">\n            Download is in progress. Please wait, this may take a while for large files...\n        </div>\n    </div>", styles: ["@charset \"UTF-8\";.container{margin:10px auto}.sub-heading p{color:#000;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.radio-label{color:#000;font-family:Lato;font-size:16px;font-style:normal;font-weight:400;line-height:normal}.radio-btn-group{display:flex;width:32px;height:32px;padding:2px;gap:10px}.label{color:var(--Body-Text-Body-Color, #212529);font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:150%}::ng-deep mat-form-field{background-color:#fff!important;border-radius:25px!important;padding-left:12px;padding-right:12px;height:42px;width:100%}::ng-deep mat-select{border-radius:25px!important;background-color:#fff!important}::ng-deep .mat-select-panel{background-color:#fff!important}::ng-deep .mat-select-panel .mat-option{border-radius:0!important}::ng-deep mat-form-field .mat-form-field-underline{display:none!important}::ng-deep mat-select .mat-select-placeholder{color:#0006;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}::ng-deep mat-select .mat-select-value-text{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;line-height:normal!important;padding-top:0!important;padding-bottom:0!important}::ng-deep mat-select .mat-select-value{display:flex!important;align-items:center!important;height:100%!important}.additional-details textarea{display:flex;padding:16px 16px 0;flex-direction:column;align-items:flex-start;gap:10px;flex:1 0 0;align-self:stretch;width:100%;color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;resize:none}.section-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.btn-disable{border-radius:var(--Radius-Full-Round, 9999999px);opacity:.4;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.btn-group{display:flex;flex-direction:row;justify-content:space-between}.pl-2{padding-left:5px}.search-filter-section{display:flex;flex-direction:row;justify-content:space-between}.search .rsearch{position:relative}.search .search-icon{position:absolute;top:15px;font-size:20px;left:10px}.search .sinput{border-radius:32px;border:1px solid #d5d0d0;padding:15px 36px;font:400 14px Lato;width:800px}.select-map-route-container{display:flex;flex-direction:row}.selected-mapping-route p{color:#1b4ca1;font-family:Lato;font-size:20px;font-style:normal;font-weight:400;line-height:normal;text-decoration-line:underline;text-decoration-style:solid;-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font}.edit-plan{display:flex;padding:4px;justify-content:center;align-items:center;gap:8px;border-radius:4px;background:#1b4ca129;color:#1b4ca1;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;margin-left:10px}.search-container{display:flex;flex-direction:row}.course-container{display:flex;width:100%;padding:16px;flex-direction:column;align-items:flex-start;gap:24px;grid-row:2/span 1;grid-column:1/span 1;border-radius:12px;border:1px solid var(--borders-black-border-16-black, rgba(0, 0, 0, .16));background:#fff}.course-header{display:flex;flex-direction:row;justify-content:space-between;width:100%}.course-pill{display:flex;height:24px;padding:8px;align-items:center;gap:4px;border-radius:16px;border:1px solid var(--borders-border-fill-focussed-4-light-100, #EF951E);background:#fefaf4}.ai-recommened-pill{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);border:1px solid #1B4CA1;background:#1b4ca129}.igot-platform-pill{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);border:1px solid #EF951E;background:#ef951e29}.course-title{color:var(--Primary-KB-Primary-Light, #1B4CA1);font-family:Montserrat;font-size:20px;font-style:normal;font-weight:600;line-height:30px}.course-desc{color:#0009;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.relevancy,.competencies-matched{color:var(--accessbility-shades-with-opacity-kb-greys-black-60, rgba(0, 0, 0, .6));font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;align-items:center}.percentage{color:#1d8923;font-family:Lato;font-size:14px;font-style:normal;font-weight:800;line-height:normal}.relevancy-container,.competencies-matched-container{display:flex;flex-direction:row;align-items:center}.dash{padding:0 5px}::ng-deep .mat-radio-checked .mat-radio-inner-circle{background:#1b4ca1!important}.course-list-container{display:flex;flex-wrap:wrap;gap:16px}.course-list-item{flex:0 0 48%;box-sizing:border-box;border:1px solid #ccc;padding:16px;background-color:#fff;border-radius:8px}.checked-course-container{display:flex}.ml-2{margin-left:8px}::ng-deep .mat-checkbox-checked .mat-checkbox-background{background:#1b4ca1!important}.ai-recommened-pill-text,.igot-platform-pill-text{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:700;line-height:normal}.course-pill-text{color:var(--accessbility-shades-without-opacity-kb-greys-black-87, #212121);text-align:center;font-family:Poppins;font-size:12px;font-style:normal;font-weight:400;line-height:normal}.ai-loader-icon img,.igot-platform-icon img{width:15.714px;height:15.714px;flex-shrink:0}.competency-container{display:flex;justify-content:normal;flex-direction:row;gap:16px}.outside-layer-total{display:flex;padding:4px 20px;justify-content:left;align-items:left;gap:6px;border-radius:12px;border-left:2px solid #1B4CA1;border-right:2px solid #1B4CA1;background:#edf1f8;flex-direction:column;width:25%}.outside-layer-functional{display:flex;padding:4px 12px;justify-content:left;align-items:left;gap:16px;border-radius:12px;border-left:2px solid #E24577;border-right:2px solid #E24577;background:#f8d2de;flex-direction:column;width:25%}.outside-layer-domain{display:flex;padding:4px 12px;justify-content:left;align-items:left;gap:16px;border-radius:12px;border-left:2px solid #7B47A4;border-right:2px solid #7B47A4;background:#dfd3e9;flex-direction:column;width:25%}.outside-layer-behavioral{display:flex;padding:4px 12px;justify-content:left;align-items:left;gap:16px;border-radius:12px;border-left:2px solid #F8B861;border-right:2px solid #F8B861;background:#fde8cc;flex-direction:column;width:25%}.inside-layer{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:400;line-height:normal}.suggest-courses-header{display:flex;flex-direction:row;justify-content:space-between}.suggest-course-control{display:flex;flex-direction:row}.course-card-container{width:172px;border-radius:3.307px;border:.827px solid var(--borders-border-8-black, rgba(0, 0, 0, .08));background-color:#fff}.highlight-ai{font-family:Montserrat;font-size:24px;font-style:normal;font-weight:600;line-height:normal;background:linear-gradient(90deg,#3b27ff,#2de3d6);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}.ai-loader-icon-medium img{width:40px;height:40px;flex-shrink:0}.heading{color:#000;font-family:Montserrat;font-size:20px;font-style:normal;font-weight:600;line-height:normal;margin:10px 0}.heading-bg{color:#fff;font-family:Montserrat;font-size:20px;font-style:normal;font-weight:600;line-height:normal;margin:10px 0}.progress-popup{display:flex;flex-direction:column;justify-content:center;align-items:center}.progress-popup .desc{color:#000000de;text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.behavioural-pill{display:flex;padding:0 8px;justify-content:center;align-items:center;gap:10px;border-radius:99px;border:1px solid #F8B861;background:linear-gradient(0deg,#f8b86152 0% 100%),#fff;margin:5px 0}.functional-pill{display:flex;padding:0 8px;justify-content:center;align-items:center;gap:10px;border-radius:99px;border:1px solid #E24577;background:linear-gradient(0deg,#e245773d 0% 100%),#fff;margin:5px 0}.domain-pill{display:flex;padding:0 8px;justify-content:center;align-items:center;gap:10px;border-radius:99px;border:1px solid #7B47A4;background:linear-gradient(0deg,#7b47a43d 0% 100%),#fff;margin:5px 0}.popup-header{display:flex;flex-direction:row;justify-content:space-between}.popup-footer{display:flex;flex-direction:row;justify-content:center}.view-cbp-plan{margin:10px;padding:10px}.view-cbp-plan-popup{padding:24px;max-height:70vh;overflow-y:auto}.section{border-radius:8px;background:#1b4ca114;padding:16px}.popup-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ddd;font-weight:700;flex-shrink:0}.popup-footer{display:flex;justify-content:center;gap:16px;padding:16px 24px;background-color:#fff;flex-shrink:0;position:sticky;bottom:-15px}.section-container{overflow-y:auto;flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;align-items:center}.competency-list{display:flex;flex-direction:row;gap:16px}.competency-text{color:#000;font-family:Lato;font-size:10px;font-style:normal;font-weight:700;line-height:normal}.competency-sub-heading{color:#1b4ca1;font-family:Montserrat;font-size:12px;font-style:normal;font-weight:600;line-height:normal}.cursor-pointer{cursor:pointer}.btn-active{border-radius:var(--Radius-Full-Round, 9999999px);opacity:1;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.custom-textarea{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.overlay-loader{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#ffffffbf;z-index:9999;display:flex;justify-content:center;align-items:center}.grid{display:grid;gap:1.5rem}.grid-cols-1{grid-template-columns:repeat(1,1fr)}@media (min-width: 768px){.md\\:grid-cols-2{grid-template-columns:repeat(2,1fr)}}@media (min-width: 1024px){.lg\\:grid-cols-4{grid-template-columns:repeat(4,1fr)}}.kpi-card{background:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 4px 14px #0000000d;border-left:4px solid transparent;transition:box-shadow .3s ease}.kpi-card:hover{box-shadow:0 8px 24px #0000001a}.kpi-icon{padding:.75rem;border-radius:.5rem;display:flex;align-items:center;justify-content:center}.kpi-text{font-size:1.25rem;font-weight:700}.progress-container{background:#e5e7eb;height:.75rem;border-radius:9999px;margin-top:.5rem}.progress-bar{height:100%;border-radius:9999px;transition:width .4s ease}.competency-block{background-color:#fff;border-radius:12px;box-shadow:0 2px 10px #0000000f;overflow:hidden}.competency-header{padding:1.5rem;background:linear-gradient(to right,#4f46e5,#3b82f6);color:#fff}.competency-header h3{font-size:1.25rem;font-weight:600}.competency-body{padding:1rem}.role-card{background-color:#f9fafb;padding:.5rem;border-left:4px solid #6366f1;border-radius:6px}.role-title{font-size:1rem;font-weight:600;margin-bottom:.75rem;display:flex;align-items:center;color:#1e40af}.comp-section{border-radius:.5rem;padding:.75rem;background-color:#f0f9ff;margin-bottom:1rem}.comp-section h4{font-weight:600;margin-bottom:.5rem}.comp-item{background-color:#fff;border-left:3px solid #3b82f6;padding:.5rem;border-radius:4px;margin-bottom:.25rem;font-size:.875rem}.bg-blue-50{background-color:#fde8cc;border-radius:4px}.bg-green-50{background-color:#f8d2de;border-radius:4px}.bg-purple-50{background-color:#dfd3e9;border-radius:4px}.text-blue-800{color:#1e3a8a}.text-green-800{color:#ff1493}.text-purple-800{color:#6b21a8}.border-blue-400{border-color:#60a5fa}.border-green-400{border-color:#34d399}.border-purple-400{border-color:#c084fc}.text-sm{font-size:.875rem}.text-gray-700{color:#374151}.icon-sm{width:24px;height:24px}.heading-with-bg{background:#4f46e5;padding:24px;border-radius:8px 8px 0 0}.competencis-grid{display:flex;flex-direction:row;justify-content:space-between;gap:16px}.section-shadow{padding:16px;border-radius:4px;background:#fff;box-shadow:0 2px 4px #0000001a,0 1px 10px #0000000f}.count{color:#1b4ca1;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.competency-grid{display:flex;flex-direction:row;gap:16px;justify-content:space-between}.text-blue-600{color:#1b4ca1;font-weight:600}.text-green-600{color:#ff1493;font-weight:600}.text-purple-600{color:#6b21a8;font-weight:600}.horizontal-flex{display:flex;align-items:center;justify-content:space-between;width:100%}.progress-bar{width:100%;height:10px;background-color:#e0e0e0;border-radius:10px;overflow:hidden;box-shadow:inset 0 1px 3px #0003}.progress-bar-fill{height:100%;background-color:#1b4ca1;width:0;border-radius:10px 0 0 10px;transition:width .5s ease-in-out}.progress-bar-fill-behavioural{height:100%;background-color:#f8b861;width:0;border-radius:10px 0 0 10px;transition:width .5s ease-in-out}.progress-bar-fill-functional{height:100%;background-color:#e24577;width:0;border-radius:10px 0 0 10px;transition:width .5s ease-in-out}.progress-bar-fill-domain{height:100%;background-color:#7b47a4;width:0;border-radius:10px 0 0 10px;transition:width .5s ease-in-out}.sub-text{font-size:12px;font-weight:600;font-family:Lato}.competency-count-by-designation{display:flex;gap:10px;flex-direction:row}.competencies-grid-3{width:33%}.grid-list-item div{padding:5px 10px;margin:10px 0}.grid-list-item-behavioral div{border-left:2px solid darkorange}.grid-list-item-functional div{border-left:2px solid #ff1493}.grid-list-item-domain div{border-left:2px solid #6b21a8}.header-flex{display:flex;flex-direction:row;width:100%;justify-content:space-between;gap:30px}.header-border{border-bottom:1px solid #ccc;margin:10px;padding:10px}.text-gray-600{font-family:Lato;font-size:14px;font-weight:600}.image-container .h-10,.image-container .h-15{height:50px}.image-container{display:flex;gap:10px;flex-direction:row}.org-footer{display:flex;flex-direction:row;background:#fff;gap:16px;color:#000;width:100%;justify-content:center;align-items:center;border-top:1px solid #ccc;border-bottom:1px solid #ccc}.dialog-scrollable-content{max-height:70vh;overflow-y:auto}.org-footer a{color:#000!important}h1{font-size:1.75rem!important}@media print{.org-footer,.header-border{page-break-inside:avoid}}.header-border{padding-top:10px;padding-bottom:10px;background-color:#fff}.footer-container{display:flex;justify-content:center;align-items:center;flex-direction:column}.footer-logo-container{display:flex;justify-content:center;align-items:center;flex-direction:row;width:30%}.avoid-page-break{page-break-inside:avoid;break-inside:avoid}.pdf-clean *{box-shadow:none!important;filter:none!important;transform:none!important}.view-cbp-plan.pdf-clean{overflow:visible!important;max-height:none!important}.section-container,.popup-container,.outside-layer-total,.outside-layer-behavioral,.outside-layer-functional,.outside-layer-domain,.section-shadow{page-break-inside:avoid!important;break-inside:avoid!important}.bg-gradient-to-br{background:none!important}.section-container,.outside-layer-total,.outside-layer-behavioral,.outside-layer-functional,.outside-layer-domain,.competencis-grid{page-break-inside:avoid}.page-break{page-break-before:always}.cbp .container{margin:10px auto}.cbp .sub-heading p{color:#000;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.cbp .ministry-heading{color:#1b4ca1;font-family:Montserrat;font-size:24px;font-style:normal;font-weight:600;line-height:normal}.cbp .radio-label{color:#000;font-family:Lato;font-size:16px;font-style:normal;font-weight:400;line-height:normal}.cbp .radio-btn-group{display:flex;width:32px;height:32px;padding:2px;gap:10px}.cbp .label{color:var(--Body-Text-Body-Color, #212529);font-family:Lato;font-size:16px;font-style:normal;font-weight:700;line-height:150%}.cbp ::ng-deep mat-form-field{background-color:#fff!important;border-radius:25px!important;padding-left:12px;padding-right:12px;height:42px;width:100%}.cbp ::ng-deep mat-select{border-radius:25px!important;background-color:#fff!important}.cbp ::ng-deep .mat-select-panel{background-color:#fff!important}.cbp ::ng-deep .mat-select-panel .mat-option{border-radius:0!important}.cbp ::ng-deep mat-form-field .mat-form-field-underline{display:none!important}.cbp ::ng-deep mat-select .mat-select-placeholder{color:#0006;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.cbp ::ng-deep mat-select .mat-select-value-text{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;line-height:normal!important;padding-top:0!important;padding-bottom:0!important}.cbp ::ng-deep mat-select .mat-select-value{display:flex!important;align-items:center!important;height:100%!important}.cbp .additional-details textarea{display:flex;padding:16px 16px 0;flex-direction:column;align-items:flex-start;gap:10px;flex:1 0 0;align-self:stretch;width:100%;color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;resize:none}.cbp .section-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.cbp .btn-disable{border-radius:var(--Radius-Full-Round, 9999999px);opacity:.4;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.cbp .btn-group{display:flex;flex-direction:row;justify-content:space-between}.cbp .pl-2{padding-left:5px}.cbp .search-filter-section{display:flex;flex-direction:row;justify-content:space-between}.cbp .search .rsearch{position:relative}.cbp .search .search-icon{position:absolute;top:15px;font-size:20px;left:10px}.cbp .search .sinput{border-radius:32px;border:1px solid #d5d0d0;padding:15px 36px;font:400 14px Lato;width:800px}.cbp .select-map-route-container{display:flex;flex-direction:row}.cbp .selected-mapping-route p{color:#1b4ca1;font-family:Lato;font-size:20px;font-style:normal;font-weight:400;line-height:normal;text-decoration-line:underline;text-decoration-style:solid;-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font}.cbp .edit-plan{display:flex;padding:4px;justify-content:center;align-items:center;gap:8px;border-radius:4px;background:#1b4ca129;color:#1b4ca1;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;margin-left:10px}.cbp .search-container{display:flex;flex-direction:row}.cbp .course-container{display:flex;width:100%;padding:16px;flex-direction:column;align-items:flex-start;gap:24px;grid-row:2/span 1;grid-column:1/span 1;border-radius:12px;border:1px solid var(--borders-black-border-16-black, rgba(0, 0, 0, .16));background:#fff}.cbp .course-header{display:flex;flex-direction:row;justify-content:space-between;width:100%}.cbp .course-pill{display:flex;height:24px;padding:8px;align-items:center;gap:4px;border-radius:16px;border:1px solid var(--borders-border-fill-focussed-4-light-100, #EF951E);background:#fefaf4}.cbp .ai-recommened-pill-green{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#0080001c}.cbp .ai-recommened-pill-green-text{color:#006400;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.cbp .ai-recommened-pill-public{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#1b4ca129}.cbp .ai-recommened-pill-public-text{color:#1b4ca1;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.cbp .ai-recommened-pill-gray{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#d3d3d3}.cbp .ai-recommened-pill-gray-text{color:#000;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.cbp .ai-recommened-pill-orange{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#ffa50052}.cbp .ai-recommened-pill-orange-text{color:#5a3f0d;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.cbp .ai-recommened-pill-orange-text a{color:#5a3f0d!important;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.cbp .igot-platform-pill{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);border:1px solid #EF951E;background:#ef951e29}.cbp .course-title{color:var(--Primary-KB-Primary-Light, #1B4CA1);font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:22px}.cbp .course-desc{color:#0009;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.cbp .relevancy,.cbp .competencies-matched{color:#6c757d;font-family:Lato;font-size:12px;font-style:normal;font-weight:500;line-height:normal;align-items:center}.cbp .percentage{color:#1b4ca1;font-family:Lato;font-size:14px;font-style:normal;font-weight:600;line-height:normal}.cbp .delete-button input{background-color:#b60a0a;border-radius:10px}.cbp .relevancy-container,.cbp .competencies-matched-container{display:flex;flex-direction:row;align-items:center}.cbp .dash{padding:0 5px}.cbp ::ng-deep .mat-radio-checked .mat-radio-inner-circle{background:#1b4ca1!important}.cbp .course-list-container{display:flex;flex-wrap:wrap;gap:16px;width:100%;padding:1rem}.cbp .course-list-item{flex:1 1 calc(50% - 10px);min-width:350px;max-width:500px;box-sizing:border-box;border:1px solid #e0e0e0;padding:16px;background-color:#fff;border-radius:12px;min-height:auto;box-shadow:0 2px 4px #0000001a;transition:box-shadow .2s ease;display:flex;flex-direction:column}.cbp .course-list-item:hover{box-shadow:0 4px 8px #00000026}.cbp .course-list-item:only-child{flex:1 1 auto;max-width:800px}.cbp .checked-course-container{display:flex;width:60%}.cbp .ml-2{margin-left:8px}.cbp ::ng-deep .mat-checkbox-checked .mat-checkbox-background{background:#1b4ca1!important}.cbp .igot-platform-pill-text{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:700;line-height:normal}.cbp .course-pill-text{color:var(--accessbility-shades-without-opacity-kb-greys-black-87, #212121);text-align:center;font-family:Poppins;font-size:12px;font-style:normal;font-weight:400;line-height:normal}.cbp .ai-loader-icon img,.cbp .igot-platform-icon img{width:15.714px;height:15.714px;flex-shrink:0}.cbp .competency-container{display:flex;justify-content:normal;gap:16px;flex-direction:row}.cbp .outside-layer-total{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #1B4CA1;background:#edf1f8;width:132px}.cbp .outside-layer-functional{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #E24577;background:#f8d2de;width:132px}.cbp .outside-layer-domain{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #7B47A4;background:#dfd3e9;width:132px}.cbp .outside-layer-behavioral{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #F8B861;background:#fde8cc;width:132px}.cbp .inside-layer{color:#1b4ca1;font-family:Lato;font-size:16px;font-style:normal;font-weight:400;line-height:normal}.cbp .count{color:#1b4ca1;font-family:Montserrat;font-size:18px;font-style:normal;font-weight:600;line-height:normal}.cbp .suggest-courses-header{display:flex;flex-direction:row;justify-content:space-between}.cbp .suggest-course-control{display:flex;flex-direction:row}.cbp .course-card-container{width:172px;border-radius:3.307px;border:.827px solid var(--borders-border-8-black, rgba(0, 0, 0, .08));background-color:#fff}.cbp .highlight-ai{font-family:Montserrat;font-size:24px;font-style:normal;font-weight:600;line-height:normal;background:linear-gradient(90deg,#3b27ff,#2de3d6);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}.cbp .ai-loader-icon-medium img{width:40px;height:40px;flex-shrink:0}.cbp .heading{color:#000;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal;margin:10px 0}.cbp .pdf-heading{color:#000;font-family:Montserrat;font-size:18px;font-style:normal;font-weight:600;line-height:normal;margin:10px 0;text-align:center}.cbp .popup-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid #e0e0e0}.cbp .header-left{flex:1}.cbp .header-actions{display:flex;align-items:center;gap:12px}.cbp .regenerate-btn{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:6px;font-size:14px;font-weight:500;min-width:auto}.cbp .regenerate-btn .mat-icon{margin:0;font-size:18px;width:18px;height:18px}.cbp .regenerate-btn .mat-spinner{margin:0}.cbp .regenerate-btn:disabled{opacity:.7;cursor:not-allowed}.cbp .close-btn{padding:8px;border-radius:4px;transition:background-color .2s ease}.cbp .close-btn:hover{background-color:#f5f5f5}.cbp .close-btn .mat-icon{font-size:20px;width:20px;height:20px}.cbp .progress-popup{display:flex;flex-direction:column;justify-content:center;align-items:center}.cbp .progress-popup .desc{color:#000000de;text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.cbp .behavioural-pill{display:flex;padding:2px 6px;justify-content:center;align-items:center;gap:4px;border-radius:16px;border:1px solid #F8B861;background:linear-gradient(0deg,#f8b86152 0% 100%),#fff;margin:2px 4px 2px 0;font-size:12px}.cbp .functional-pill{display:flex;padding:2px 6px;justify-content:center;align-items:center;gap:4px;border-radius:16px;border:1px solid #E24577;background:linear-gradient(0deg,#e245773d 0% 100%),#fff;margin:2px 4px 2px 0;font-size:12px}.cbp .domain-pill{display:flex;padding:2px 6px;justify-content:center;align-items:center;gap:4px;border-radius:16px;border:1px solid #7B47A4;background:linear-gradient(0deg,#7b47a43d 0% 100%),#fff;margin:2px 4px 2px 0;font-size:12px}.cbp .popup-header{display:flex;flex-direction:row;justify-content:space-between}.cbp .popup-footer{display:flex;flex-direction:row;justify-content:end}.cbp .view-cbp-plan{margin:10px;padding:10px}.cbp .view-cbp-plan-popup{padding:24px;max-height:70vh;overflow-y:auto}.cbp .section{border-radius:8px;background:#1b4ca114;padding:16px}.cbp .popup-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ddd;font-weight:700;flex-shrink:0}.cbp .popup-footer{display:flex;justify-content:flex-end;gap:16px;padding:16px 24px;border-top:1px solid #ddd;background-color:#fff;flex-shrink:0;position:sticky;bottom:0}.cbp .section-container{overflow-y:auto;flex:1 1 auto}.cbp .competency-list{display:flex;flex-direction:row;gap:0px;flex-wrap:wrap;margin:0;padding:0;list-style:none}.cbp .competency-text{color:#000;font-family:Lato;font-size:12px;font-style:normal;font-weight:400;line-height:normal;padding:3px 6px}.cbp .competency-text-behavioral{color:#654321;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.cbp .competency-text-functional{color:#b01669;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.cbp .competency-text-domain{color:#301934;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.cbp .competency-sub-heading{color:#1b4ca1;font-family:Montserrat;font-size:14px;font-style:normal;font-weight:600;line-height:normal}.cbp .cursor-pointer{cursor:pointer}.cbp .btn-active{border-radius:var(--Radius-Full-Round, 9999999px);opacity:1;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.cbp .custom-textarea{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.cbp .overlay-loader{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#ffffffbf;z-index:9999;display:flex;justify-content:center;align-items:center;gap:16px}.cbp .loader-message{color:#1b4ca1;font-family:Lato;font-size:16px;font-weight:600;text-align:center;padding:0 16px}.cbp .competencis-grid{display:flex;flex-direction:row;justify-content:space-between;gap:16px}.cbp .grid-list-item-behavioral div{border-left:2px solid darkorange}.cbp .grid-list-item-functional div{border-left:2px solid #ff1493}.cbp .grid-list-item-domain div{border-left:2px solid #6b21a8}.cbp .competencies-grid-3{width:33%}.cbp .bg-blue-50{background-color:#fde8cc;border-radius:4px}.cbp .bg-green-50{background-color:#f8d2de;border-radius:4px}.cbp .bg-purple-50{background-color:#dfd3e9;border-radius:4px}.cbp .grid-list-item div{padding:5px 10px;margin:10px 0}.cbp .course-pill-container{display:flex;gap:8px}.cbp .relevancy-pill-green{display:flex;padding:4px 8px;align-items:center;gap:4px;border-radius:16px;border:1px solid #e0e0e0;background:#f8f9fa}.cbp .mt-1{margin-top:.25rem}.cbp .mt-2{margin-top:.5rem}.cbp .mt-3{margin-top:.75rem}.cbp .show-more-competency{display:inline-flex;align-items:center}.cbp .show-more-link{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:500;line-height:normal;margin:2px 4px 2px 0;text-decoration:none}.cbp .show-more-link:hover{text-decoration:underline}.cbp .course-content{flex:1;display:flex;flex-direction:column}.cbp .course-footer{margin-top:auto;padding-top:12px;display:flex;justify-content:space-between}.cbp ::ng-deep .mdc-tab__text-label{font-weight:700;font-family:Montserrat!important;font-size:16px;color:#000!important;text-transform:capitalize}.cbp .competency-tag{display:inline-block;padding:.25rem .75rem;border-radius:9999px;font-size:.75rem;font-weight:500;margin-right:.5rem;margin-bottom:.5rem}.cbp .menu-list-item.active{background-color:#1b4ca1;color:#fff}.cbp .menu-list-item:hover{background-color:#1b4ca1;color:#fff;border-color:#1b4ca1}.cbp .gray-bg{background-color:rgb(248,250,252,var(--tw-bg-opacity, 1));border-radius:8px;border:1px solid #ccc}.cbp .div-count{font-family:Lato;font-size:20px;font-weight:700}.cbp .green-bg{background-color:#0080001c;border:1px solid #006400;border-radius:8px}.cbp .div-green-count{font-family:Lato;font-size:20px;font-weight:700;color:#006400}.cbp .div-green-label{color:#006400;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.cbp .gray-bg-item{background-color:rgb(248,250,252,var(--tw-bg-opacity, 1));border-radius:8px;border:1px solid #ccc;padding:4px 8px;margin:10px}.cbp .add-btn{color:#1b4ca1;font-size:14px;font-family:Lato}.cbp .list-flex{display:flex;flex-direction:row;justify-content:space-between}.cbp .all-category-list .mat-icon{vertical-align:middle}.cbp .course-list-container-flex{display:flex;align-items:flex-start;gap:2rem}.cbp .left-panel{flex:0 0 250px;font-weight:700;text-align:left}.cbp .right-panel{flex:1;display:flex;flex-direction:row;flex-wrap:wrap;gap:20px;align-content:flex-start;justify-content:flex-start}.cbp .category-list-item{font-weight:400;font-size:16px;font-family:Lato;padding:5px}.cbp .right-panel-flex{display:flex;flex:0 0 100%;width:100%;flex-direction:row;flex-wrap:wrap;gap:20px;justify-content:flex-start}.cbp .course-list-container-right-flex{display:flex}.cbp .no-gaps-message{display:flex;flex-direction:column;align-items:center;padding:24px;background:linear-gradient(135deg,#4caf501a,#81c7841a);border:2px solid #4CAF50;border-radius:16px;margin:16px 0}.cbp .no-gaps-message .success-icon{font-size:25px;color:#4caf50;margin-bottom:16px}.cbp .no-gaps-message h4{color:#2e7d32;font-family:Montserrat;font-size:20px;font-weight:600;margin:0 0 8px;text-align:center}.cbp .no-gaps-message p{color:#388e3c;font-family:Lato;font-size:14px;font-weight:400;margin:0;text-align:center;line-height:1.5}.cbp .section-header-improved{display:flex;flex-direction:column;gap:16px}.cbp .search-and-buttons-container{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.cbp .search-container-compact{flex:0 0 auto;min-width:280px}.cbp .search-container-compact .rsearch{position:relative;display:flex;align-items:center}.cbp .search-container-compact .search-icon{position:absolute;left:12px;color:#666;font-size:20px;z-index:1}.cbp .search-container-compact .sinput-compact{border-radius:25px;border:1px solid #d5d0d0;padding:8px 12px 8px 40px;height:32px;width:100%;font:400 14px Lato;box-sizing:border-box;transition:border-color .3s ease}.cbp .search-container-compact .sinput-compact:focus{outline:none;border-color:#1b4ca1;box-shadow:0 0 0 2px #1b4ca11a}.cbp .search-container-compact .sinput-compact::placeholder{color:#999}.cbp .btn-group-compact{display:flex;gap:8px;flex:0 0 auto}.cbp .category-list-item{padding:8px 12px!important;border-radius:6px;border:1px solid transparent;transition:all .3s ease;background:#f8f9fa;color:#333;font-family:Lato;font-size:14px!important;font-weight:400!important}.cbp .category-list-item:hover{background:#1b4ca10d;border-color:#1b4ca133}.cbp .category-list-item.selected-theme{background:#1b4ca11a;border-color:#1b4ca1;color:#1b4ca1;font-weight:600!important}.cbp .category-list-item.selected-theme:before{content:\"\\2713  \";color:#1b4ca1;font-weight:700}.cbp .theme-filter-controls{margin-bottom:8px}.cbp .clear-filter-btn{background:#f8f9fa;border:1px solid #ddd;border-radius:20px;padding:4px 12px;font-size:12px;color:#666;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:4px}.cbp .clear-filter-btn:hover{background:#e9ecef;border-color:#adb5bd}.cbp .clear-filter-btn mat-icon{font-size:16px;width:16px;height:16px}.cbp .no-course-found-container{display:flex;justify-content:center;align-items:center;min-height:300px;padding:20px}.cbp .no-course-card{background:linear-gradient(135deg,#f8f9fa,#e9ecef);border:2px dashed #ced4da;border-radius:16px;padding:40px;text-align:center;max-width:500px;box-shadow:0 4px 12px #0000000d}.cbp .no-course-card .no-course-icon{margin-bottom:20px}.cbp .no-course-card .no-course-icon mat-icon{font-size:48px;width:48px;height:48px;color:#6c757d}.cbp .no-course-card .no-course-content h4{color:#495057;font-family:Montserrat;font-size:24px;font-weight:600;margin-bottom:12px}.cbp .no-course-card .no-course-content p{color:#6c757d;font-family:Lato;font-size:16px;line-height:1.5;margin-bottom:12px}.cbp .no-course-card .no-course-content p strong{color:#1b4ca1;font-weight:600}.cbp .no-course-card .suggest-course-btn{background:linear-gradient(135deg,#1b4ca1,#164080);color:#fff;border:none;border-radius:25px;padding:12px 24px;font-family:Lato;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;margin:20px auto 0;transition:all .3s ease;box-shadow:0 4px 12px #1b4ca14d}.cbp .no-course-card .suggest-course-btn:hover{background:linear-gradient(135deg,#164080,#0f2f5f);transform:translateY(-2px);box-shadow:0 6px 16px #1b4ca166}.cbp .no-course-card .suggest-course-btn:active{transform:translateY(0)}.cbp .no-course-card .suggest-course-btn mat-icon{font-size:18px;width:18px;height:18px}.cbp .left-panel{flex:0 0 280px!important;background:#f8f9fa;border-radius:12px;padding:16px;border:1px solid #e9ecef;max-height:600px;overflow-y:auto;font-weight:400!important}@media (max-width: 1200px){.cbp .search-and-buttons-container{flex-direction:column;align-items:stretch}.cbp .search-container-compact{min-width:auto;width:100%}.cbp .btn-group-compact{justify-content:center;flex-wrap:wrap}}@media (max-width: 1200px) and (min-width: 769px){.cbp .course-list-item{flex:1 1 calc(50% - 10px);min-width:300px;max-width:none}}@media (max-width: 768px){.cbp .course-list-container-flex{flex-direction:column}.cbp .left-panel{flex:none!important;max-height:300px}.cbp .course-list-item{flex:0 0 100%;max-width:100%}.cbp .no-course-card{padding:20px}.cbp .no-course-card .no-course-content h4{font-size:20px}.cbp .no-course-card .no-course-content p{font-size:14px}}.cbp ::ng-deep .error-snackbar{background-color:#f44336!important;color:#fff!important;font-weight:500}.cbp ::ng-deep .error-snackbar .mat-simple-snackbar-action{color:#fff!important}.cbp ::ng-deep .session-expired-snackbar{background-color:#ff9800!important;color:#fff!important;font-weight:600}.cbp ::ng-deep .session-expired-snackbar .mat-simple-snackbar-action{color:#fff!important;font-weight:700}.cbp .download-pdf{justify-content:end;display:flex;flex-direction:row}.section-header-improved,.section-header-improved-sec-2{display:flex;flex-direction:row;gap:0px;width:100%}.search-and-buttons-container{display:flex;justify-content:space-between;gap:4px;flex-direction:column;flex-wrap:wrap;width:37%;margin:0 5px}::ng-deep .select-search-panel{border:1px solid #ccc!important;border-radius:12px!important;box-shadow:0 8px 20px #0000001f}:host ::ng-deep .mat-select-arrow-wrapper{margin-top:5px!important}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{color:#ccc}:host ::ng-deep .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick{color:#1b4ca1;border-color:#1b4ca1!important}::ng-deep .select-search-panel .mat-option.mat-selected:not(.mat-option-disabled){background-color:#1b4ca1!important;color:#fff!important}:host ::ng-deep .mat-form-field-appearance-outline{border-radius:25px;border:1px solid #ccc}:host ::ng-deep .mat-form-field-focused .mat-form-field-appearance-outline{border-color:#1b4ca1!important}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-start{border-radius:25px 0 0 25px;border:none!important}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-end{border-right:none!important;border:none!important;border-radius:0 25px 25px 0}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-gap{border:none!important;border-radius:25px}:host::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix{background-color:transparent!important}:host ::ng-deep .search-and-buttons-container .mat-option-text{color:#fff!important}.header-container{display:flex;flex-direction:row;justify-content:space-between;width:100%;margin:10px 0}.right-side-container{display:flex;justify-content:space-between;gap:64px}::ng-deep .language-select .mat-select-trigger{font-weight:400!important}::ng-deep .language-select .mat-select-value{color:#fff!important}:host ::ng-deep .select-search-panel .mat-option-text{color:#fff!important}.competency-tags{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}.proficiency-tag,.delivery-mode-tag{display:inline-flex;align-items:center;justify-content:center;padding:2px 8px;border-radius:16px;font-size:11px;line-height:16px;font-weight:500;white-space:nowrap}.delivery-mode-tag.online{background:#e6f4ea;color:#1a7f45;border:1px solid #9BD3B0}.delivery-mode-tag.offline{background:#fdf0e3;color:#a2590a;border:1px solid #F0C48A}.delivery-mode-tag.blended{background:#efe9fb;color:#5b21b6;border:1px solid #C9B6F0}.proficiency-tag.strategic{background:#1b4ca1;color:#fff;border:none}.proficiency-tag.tactical{background:#5b8def;color:#fff;border:none}.proficiency-tag.operational{background:#dbe6f7;color:#1b4ca1;border:none}.flex-col-theme{display:flex;flex-direction:row;gap:6px}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i7.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLegacyLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "component", type: i9.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i11$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i12.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewFinalCbpPlanComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-view-final-cbp-plan', template: "<div class=\"view-cbp-plan\" #dialogContent style=\"max-height: 80vh; overflow: auto;\">\n    <div class=\"popup-container\">\n        <div class=\"popup-header\">\n            <div class=\"header-container\">\n                <div>\n                    <div class=\"heading\">View Final <span *ngIf=\"openedFrom === 'cbp'\">CBP</span><span\n                            *ngIf=\"openedFrom === 'acbp'\">ACBP</span></div>\n                </div>\n                <div class=\"right-side-container\">\n                    <div class=\"search-and-buttons-container\">\n                        <form [formGroup]=\"filterForm\">\n                            <div>\n                                <mat-form-field appearance=\"outline\" class=\"language-select\" style=\" height: 34px;\">\n                                    <mat-label style=\"font-weight: normal;\">\n                                        {{ filterForm.get('language')?.value ? '' : 'Select Language' }}\n                                    </mat-label>\n\n                                    <mat-select formControlName=\"language\" panelClass=\"select-search-panel\"\n                                        (selectionChange)=\"applyFilters()\">\n\n                                        <!-- Search box -->\n                                        <input style=\"border:1px solid #ccc; padding: 5px;width: 92%;margin: 5px;\"\n                                            matInput placeholder=\"Search Languages\" (click)=\"$event.stopPropagation()\"\n                                            (keydown)=\"$event.stopPropagation()\"\n                                            (keyup)=\"filterList($any($event.target).value, 'language')\" />\n\n                                        <!-- Values -->\n                                        <mat-option *ngFor=\"let r of filteredLanguages\" [value]=\"r?.code\">\n                                            {{ r?.label }}\n                                        </mat-option>\n\n                                    </mat-select>\n                                </mat-form-field>\n                            </div>\n                        </form>\n                    </div>\n                    <div class=\"cursor-pointer\" (click)=\"closeDialog()\">\n                        <mat-icon>close</mat-icon>\n                    </div>\n                </div>\n            </div>\n\n\n\n        </div>\n        <div class=\"section-container\" #pdfContent>\n            <header class=\"bg-white header-border\">\n                <div class=\"header-flex justify-between\" style=\"width:100%\">\n                    <div class=\"flex items-center space-x-4\" style=\"width:50%\">\n                        <div class=\"image-container\">\n                            <div>\n                                <img src=\"assets/icons/dopt-logo.png\" alt=\"Department of Personnel & Training\"\n                                    class=\"h-15\" />\n                            </div>\n                            <div>\n                                <img src=\"assets/icons/CBC_logo.svg\" alt=\"Capacity Building Commission Logo\"\n                                    class=\"h-10\" />\n                            </div>\n                            <div>\n                                <img src=\"assets/icons/karmayogiLogo-min.png\" alt=\"Karmayogi Bharat Logo\"\n                                    class=\"h-10\" />\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"text-right\" style=\"width:50%\">\n                        <h1 class=\"text-2xl font-bold text-gray-900\">\n                            <span\n                                *ngIf=\"sharedService?.cbpPlanFinalObj?.ministry?.sbOrgType === 'state'\">{{sharedService?.cbpPlanFinalObj?.ministry?.orgName}}</span>\n                            <span\n                                *ngIf=\"sharedService?.cbpPlanFinalObj?.ministry?.sbOrgType === 'ministry'\">{{sharedService?.cbpPlanFinalObj?.ministry?.orgName}}</span>\n                            <span\n                                *ngIf=\"sharedService?.cbpPlanFinalObj?.department_name\">/{{sharedService?.cbpPlanFinalObj?.department_name}}</span>\n                            - Capacity Building Plan\n                        </h1>\n                        <p class=\"text-gray-600\">Comprehensive Role-Based Competency Analysis</p>\n                    </div>\n                </div>\n            </header>\n            <div class=\"min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100\">\n                <!-- Header -->\n\n\n                <div class=\"max-w-7xl mx-auto px-6 py-8 mt-4\">\n                    <!-- KPI Dashboard -->\n                    <div class=\"competency-container mt-2\">\n                        <div class=\"outside-layer-total\">\n                            <div class=\"horizontal-flex mt-2\">\n                                <div>\n                                    <svg class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\"\n                                        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n                                        stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n                                        <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\" />\n                                        <path d=\"M14 2v6h6\" />\n                                        <path d=\"M16 13H8\" />\n                                        <path d=\"M16 17H8\" />\n                                        <path d=\"M10 9H8\" />\n                                    </svg>\n                                </div>\n                                <div>\n                                    <div class=\"count\">{{totalCompetencieObj?.total}}</div>\n                                </div>\n                            </div>\n\n                            <div class=\"mt-4\">\n                                <div class=\"sub-heading\">\n                                    <p>Total Competencies</p>\n                                </div>\n                            </div>\n                            <div class=\"progress-bar mt-2\">\n                                <div class=\"progress-bar-fill\" style=\"width: 60%;\"></div>\n                            </div>\n                            <div>\n                                <div class=\"sub-text\">Total Competencies: {{totalCompetencieObj?.total}}</div>\n                            </div>\n                            <div class=\"count\">\n                                <!-- {{competenciesCount?.total}} -->\n                            </div>\n                        </div>\n                        <div class=\"outside-layer-behavioral\">\n                            <div class=\"horizontal-flex mt-2\">\n                                <div>\n                                    <svg class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\"\n                                        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n                                        stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n                                        <path d=\"M15.5 17a4 4 0 0 1-5 0\" />\n                                        <path d=\"M13 14h.01\" />\n                                        <path d=\"M11 11h.01\" />\n                                        <path d=\"M17 14h.01\" />\n                                        <path d=\"M13 10h.01\" />\n                                        <path d=\"M13 18h.01\" />\n                                        <path d=\"M13 6h.01\" />\n                                        <path d=\"M17 18h.01\" />\n                                        <path d=\"M17 6h.01\" />\n                                        <path d=\"M21 12a9 9 0 0 1-9 9a9 9 0 0 1-9-9a9 9 0 0 1 9-9a9 9 0 0 1 9 9z\" />\n                                    </svg>\n                                </div>\n                                <div>\n                                    <div class=\"count\">{{totalCompetencieObj?.behavioral}}</div>\n                                </div>\n                            </div>\n\n                            <div class=\"mt-2\">\n                                <div class=\"sub-heading\">\n                                    <p>Behavioral Competencies</p>\n                                </div>\n                            </div>\n                            <div class=\"progress-bar mt-2\">\n                                <div class=\"progress-bar-fill-behavioural\" style=\"width: 60%;\"></div>\n                            </div>\n                            <div>\n                                <div class=\"sub-text\">Behavioral Competencies: {{totalCompetencieObj?.behavioral}}\n                                </div>\n                            </div>\n\n                        </div>\n                        <div class=\"outside-layer-functional\">\n                            <div class=\"horizontal-flex mt-2\">\n                                <div>\n                                    <svg class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\"\n                                        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n                                        stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n                                        <path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\" />\n                                        <path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\" />\n                                    </svg>\n                                </div>\n                                <div>\n                                    <div class=\"count\">{{totalCompetencieObj?.functional}}</div>\n                                </div>\n                            </div>\n\n                            <div class=\"mt-2\">\n                                <div class=\"sub-heading\">\n                                    <p>Functional Competencies</p>\n                                </div>\n                            </div>\n                            <div class=\"progress-bar mt-2\">\n                                <div class=\"progress-bar-fill-functional\" style=\"width: 60%;\"></div>\n                            </div>\n                            <div>\n                                <div class=\"sub-text\">Functional Competencies: {{totalCompetencieObj?.functional}}</div>\n                            </div>\n\n\n                        </div>\n                        <div class=\"outside-layer-domain\">\n                            <div class=\"horizontal-flex mt-2\">\n                                <div>\n                                    <svg class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\"\n                                        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n                                        stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n                                        <circle cx=\"12\" cy=\"12\" r=\"10\" />\n                                        <circle cx=\"12\" cy=\"12\" r=\"6\" />\n                                        <circle cx=\"12\" cy=\"12\" r=\"2\" />\n                                    </svg>\n                                </div>\n                                <div>\n                                    <div class=\"count\">{{totalCompetencieObj?.domain}}</div>\n                                </div>\n                            </div>\n\n                            <div class=\"mt-2\">\n                                <div class=\"sub-heading\">\n                                    <p>Domain Competencies</p>\n                                </div>\n                            </div>\n                            <div class=\"progress-bar mt-2\">\n                                <div class=\"progress-bar-fill-domain\" style=\"width: 60%;\"></div>\n                            </div>\n                            <div>\n                                <div class=\"sub-text\">Domain Competencies: {{totalCompetencieObj?.domain}}</div>\n                            </div>\n\n                        </div>\n                    </div>\n                    <!-- <div class=\"mb-8\">\n                <h2 class=\"text-2xl font-bold text-gray-900 mb-6nheading\">Competency Overview</h2>\n                <div class=\"competency-grid\">\n                  <ng-container *ngFor=\"let kpi of overallKPIs;\">\n                    <div class=\"bg-white rounded-xl  outside-layer-total p-6 border-l-4 hover:shadow-xl transition-shadow\" [style.border-left-color]=\"kpi.color\">\n                      <div class=\"flex items-center justify-between mb-4 inside-layer\">\n                        <div [class]=\"'p-3 rounded-lg ' + kpi.bgColor\">\n                          <ng-container [ngSwitch]=\"kpi.name\">\n                            <svg *ngSwitchCase=\"'Behavioral Competencies'\" class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n                              <path d=\"M15.5 17a4 4 0 0 1-5 0\"/>\n                              <path d=\"M13 14h.01\"/><path d=\"M11 11h.01\"/><path d=\"M17 14h.01\"/><path d=\"M13 10h.01\"/>\n                              <path d=\"M13 18h.01\"/><path d=\"M13 6h.01\"/><path d=\"M17 18h.01\"/><path d=\"M17 6h.01\"/>\n                              <path d=\"M21 12a9 9 0 0 1-9 9a9 9 0 0 1-9-9a9 9 0 0 1 9-9a9 9 0 0 1 9 9z\"/>\n                            </svg>\n          \n                            <svg *ngSwitchCase=\"'Functional Competencies'\" class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n                              <path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"/><path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"/>\n                            </svg>\n          \n                            <svg *ngSwitchCase=\"'Domain Competencies'\" class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n                              <circle cx=\"12\" cy=\"12\" r=\"10\"/><circle cx=\"12\" cy=\"12\" r=\"6\"/><circle cx=\"12\" cy=\"12\" r=\"2\"/>\n                            </svg>\n          \n                            <svg *ngSwitchCase=\"'Total Competencies'\" class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n                              <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"/>\n                              <path d=\"M14 2v6h6\"/><path d=\"M16 13H8\"/><path d=\"M16 17H8\"/><path d=\"M10 9H8\"/>\n                            </svg>\n                            \n                          </ng-container>\n                        </div>\n                        <div class=\"text-right\">\n                          <div class=\"text-2xl font-bold text-gray-900\">{{kpi.total}}</div>\n                        </div>\n                      </div>\n                      <h3 class=\"text-gray-900 font-semibold mb-2 heading\">{{kpi.name}}</h3>\n                      <div class=\"w-full bg-gray-200 rounded-full h-3\">\n                        <div class=\"h-3 rounded-full transition-all duration-500\"\n                             [style.width.%]=\"kpi.avgCompletion\"\n                             [style.background-color]=\"kpi.color\">\n                        </div>\n                      </div>\n                      <p class=\"text-sm text-gray-500 mt-2\">Total Competencies: {{kpi.total}}</p>\n                    </div>\n                  </ng-container>\n                </div>\n              </div> -->\n\n                    <!-- Designation Reports -->\n                    <div class=\"space-y-8 mt-4\">\n                        <h2 class=\"text-2xl font-bold text-gray-900 mb-6 heading\">Detailed Competency Framework by\n                            Designation</h2>\n\n                        <ng-container *ngFor=\"let designation of designationData;\">\n                            <div class=\"bg-white rounded-xl  overflow-hidden section-shadow\">\n                                <!-- Header -->\n                                <div\n                                    class=\"bg-gradient-to-r from-indigo-600 to-blue-600 text-white p-6 heading-with-bg\">\n                                    <div class=\"flex items-center justify-between\">\n                                        <div>\n                                            <h3 class=\"text-2xl font-bold mb-2 heading-bg\">{{designation.designation}}\n                                            </h3>\n                                            <p class=\"text-indigo-100 mb-1\">Wing/Division: {{designation.wing}}</p>\n                                        </div>\n                                        <div class=\"flex items-center space-x-4 competency-count-by-designation\">\n                                            <span class=\"font-semibold text-sm\">Behavioral:\n                                                {{designation.behavioralCompetencies.length}} total</span>\n                                            <span class=\"font-semibold text-sm\">Functional:\n                                                {{designation.functionalCompetencies.length}} total</span>\n                                            <span class=\"font-semibold text-sm\">Domain:\n                                                {{designation.domainCompetencies.length}} total</span>\n                                        </div>\n                                    </div>\n                                </div>\n\n                                <!-- Body -->\n                                <div class=\"p-4 section-shadow\">\n                                    <!-- Roles -->\n                                    <div class=\"mb-6\">\n                                        <h4 class=\"text-xl font-semibold text-gray-900 mb-3 flex items-center\">\n                                            <svg class=\"h-5 w-5 mr-2 text-indigo-600 icon-sm\" fill=\"none\"\n                                                viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\n                                                    d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\" />\n                                            </svg>\n                                            Roles & Responsibilities\n                                        </h4>\n                                        <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2\">\n                                            <div *ngFor=\"let role of designation.rolesResponsibilities; let i = index\"\n                                                class=\"bg-gray-50 p-2 rounded border-l-3 border-indigo-500\">\n                                                <p class=\"text-sm text-gray-700 leading-relaxed\">{{role}}</p>\n                                            </div>\n                                        </div>\n                                    </div>\n                                    <!-- Activities -->\n                                    <div class=\"mb-6 mt-4\">\n                                        <h4 class=\"text-xl font-semibold text-gray-900 mb-3 flex items-center\">\n                                            <svg class=\"h-5 w-5 mr-2 text-indigo-600 icon-sm\" fill=\"none\"\n                                                viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\n                                                    d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\" />\n                                            </svg>\n                                            Activities\n                                        </h4>\n                                        <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2\">\n                                            <div *ngFor=\"let role of designation.activities; let i = index\"\n                                                class=\"bg-gray-50 p-2 rounded border-l-3 border-indigo-500\">\n                                                <p class=\"text-sm text-gray-700 leading-relaxed\">{{role}}</p>\n                                            </div>\n                                        </div>\n                                    </div>\n                                    <div class=\"page-break\"></div>\n                                    <!-- Competencies -->\n                                    <div class=\"competencis-grid mt-4\">\n                                        <!-- Behavioral -->\n                                        <div class=\"bg-blue-50 rounded-lg p-3 competencies-grid-3\">\n                                            <h4 class=\"font-semibold text-blue-800 text-base mb-2\">Behavioral</h4>\n                                            <div class=\"space-y-1 grid-list-item grid-list-item-behavioral\">\n                                                <div *ngFor=\"let comp of designation.behavioralCompetencies; let i = index\"\n                                                    class=\"bg-white p-1.5 rounded text-sm text-gray-700 border-l-2 border-blue-400\">\n                                                    {{comp}}\n                                                    <div class=\"flex-col-theme\">\n                                                    \n                                                    <span class=\"competency-tags\">\n                                                        <span *ngIf=\"designation.behavioralSetForProficiencyLevel[i]\"\n                                                        class=\"proficiency-tag\"\n                                                        [ngClass]=\"designation.behavioralSetForProficiencyLevel[i]?.toLowerCase()\"\n                                                        [matTooltip]=\"designation.behavioralSetForProficiencyLevelRationale[i]\"\n                                                        >\n                                                        {{ designation.behavioralSetForProficiencyLevel[i] }}\n                                                        </span>\n\n                                                        \n                                                    </span>\n                                                    \n                                                    <span class=\"competency-tags\">\n                                                        <span *ngIf=\"designation.behavioralSetForDeliveryMode[i]\"\n                                                        class=\"delivery-mode-tag\"\n                                                        [ngClass]=\"designation.behavioralSetForDeliveryMode[i]?.toLowerCase()\"\n                                                        [matTooltip]=\"designation.behavioralSetForDeliveryModeRationale[i]\"\n                                                        >\n                                                        {{ designation.behavioralSetForDeliveryMode[i] }}\n                                                        </span>\n\n                                                       \n                                                    </span>\n                                                    </div>\n                                                </div>\n                                              \n                                            </div>\n                                            \n                                            <div class=\"mt-2 text-sm text-blue-600 font-medium\">\n                                                {{designation.behavioralCompetencies.length}} total\n                                            </div>\n                                        </div>\n\n                                        <!-- Functional -->\n                                        <div class=\"bg-green-50 rounded-lg p-3 competencies-grid-3\">\n                                            <h4 class=\"font-semibold text-green-800 text-base mb-2\">Functional</h4>\n                                            <div class=\"space-y-1 grid-list-item grid-list-item-functional\">\n                                                <div *ngFor=\"let comp of designation.functionalCompetencies; let i = index\"\n                                                    class=\"bg-white p-1.5 rounded text-sm text-gray-700 border-l-2 border-green-400\">\n                                                    {{comp}}\n                                                    <div class=\"flex-col-theme\">\n                                                    \n                                                    <span class=\"competency-tags\">\n                                                        <span *ngIf=\"designation.functionalSetForProficiencyLevel[i]\"\n                                                        class=\"proficiency-tag\"\n                                                        [ngClass]=\"designation.functionalSetForProficiencyLevel[i]?.toLowerCase()\"\n                                                        [matTooltip]=\"designation.functionalSetForProficiencyLevelRationale[i]\"\n                                                        >\n                                                        {{ designation.functionalSetForProficiencyLevel[i] }}\n                                                        </span>\n\n                                                        \n                                                    </span>\n                                                    \n                                                    <span class=\"competency-tags\">\n                                                        <span *ngIf=\"designation.functionalSetForDeliveryMode[i]\"\n                                                        class=\"delivery-mode-tag\"\n                                                        [ngClass]=\"designation.functionalSetForDeliveryMode[i]?.toLowerCase()\"\n                                                        [matTooltip]=\"designation.functionalSetForDeliveryModeRationale[i]\"\n                                                        >\n                                                        {{ designation.functionalSetForDeliveryMode[i] }}\n                                                        </span>\n\n                                                       \n                                                    </span>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                            <div class=\"mt-2 text-sm text-green-600 font-medium\">\n                                                {{designation.functionalCompetencies.length}} total\n                                            </div>\n                                        </div>\n\n                                        <!-- Domain -->\n                                        <div class=\"bg-purple-50 rounded-lg p-3 competencies-grid-3\">\n                                            <h4 class=\"font-semibold text-purple-800 text-base mb-2\">Domain</h4>\n                                            <div class=\"space-y-1 grid-list-item grid-list-item-domain\">\n                                                <div *ngFor=\"let comp of designation.domainCompetencies; let i = index\"\n                                                    class=\"bg-white p-1.5 rounded text-sm text-gray-700 border-l-2 border-purple-400\">\n                                                    {{comp}}\n                                                    <div class=\"flex-col-theme\">\n                                                    \n                                                    <span class=\"competency-tags\">\n                                                        <span *ngIf=\"designation.domainSetForProficiencyLevel[i]\"\n                                                        class=\"proficiency-tag\"\n                                                        [ngClass]=\"designation.domainSetForProficiencyLevel[i]?.toLowerCase()\"\n                                                        [matTooltip]=\"designation.domainSetForProficiencyLevelRationale[i]\"\n                                                        >\n                                                        {{ designation.domainSetForProficiencyLevel[i] }}\n                                                        </span>\n\n                                                        \n                                                    </span>\n                                                    \n                                                    <span class=\"competency-tags\">\n                                                        <span *ngIf=\"designation.domainSetForDeliveryMode[i]\"\n                                                        class=\"delivery-mode-tag\"\n                                                        [ngClass]=\"designation.domainSetForDeliveryMode[i]?.toLowerCase()\"\n                                                        [matTooltip]=\"designation.domainSetForDeliveryModeRationale[i]\"\n                                                        >\n                                                        {{ designation.domainSetForDeliveryMode[i] }}\n                                                        </span>\n\n                                                       \n                                                    </span>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                            <div class=\"mt-2 text-sm text-purple-600 font-medium\">\n                                                {{designation.domainCompetencies.length}} total\n                                            </div>\n                                        </div>\n                                    </div>\n                                    <!-- Adding courses -->\n                                    <div class=\"cbp mt-4\"\n                                        *ngIf=\"designation.selectedCourses?.length && openedFrom === 'acbp'\">\n                                        <h4 class=\"text-xl font-semibold text-gray-900 mb-3 flex items-center\">\n                                            <svg class=\"h-5 w-5 mr-2 text-indigo-600 icon-sm\" fill=\"none\"\n                                                viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\n                                                    d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\" />\n                                            </svg>\n                                            Courses\n                                        </h4>\n                                        <div class=\"course-list-container\">\n                                            <div class=\"course-list-item\"\n                                                *ngFor=\"let item of designation.selectedCourses; let i = index\">\n                                                <div class=\"course-header\">\n                                                    <div class=\"checked-course-container\">\n\n                                                        <div>\n                                                            <div class=\"course-pill\">\n                                                                <div class=\"course-pill-text\">\n                                                                    <span><img\n                                                                            src=\"assets/icons/course.svg\"></span>&nbsp;<span>Course</span>\n                                                                </div>\n                                                            </div>\n                                                        </div>\n\n                                                    </div>\n                                                    <div *ngIf=\"item?.rationale && !item?.is_public\">\n                                                        <div class=\"ai-recommened-pill-green\">\n                                                            <div class=\"ai-recommened-pill-green-text\">\n                                                                <span class=\"ai-loader-icon\"><img\n                                                                        src=\"assets/icons/ai-loader.gif\"></span>\n\n                                                                <span>AI Recommended - iGOT </span>\n\n                                                            </div>\n                                                        </div>\n                                                        <div class=\"ai-recommened-pill-orange mt-2\"\n                                                            *ngIf=\"item?.platform\">\n                                                            <div class=\"ai-recommened-pill-orange-text\">\n                                                                <span class=\"ai-loader-icon\"><img\n                                                                        src=\"assets/icons/ai-loader.gif\"></span>\n                                                                <a class=\"cursor-pointer\" [href]=\"item?.public_link\"\n                                                                    target=\"_blank\"><span>Platform -\n                                                                        {{item?.platform}}</span></a>\n                                                            </div>\n                                                        </div>\n                                                        <div class=\"ai-recommened-pill-orange mt-2\"\n                                                            *ngIf=\"item?.organisation?.length\">\n                                                            <div class=\"ai-recommened-pill-orange-text\">\n                                                                <span class=\"ai-loader-icon\"><img\n                                                                        src=\"assets/icons/ai-loader.gif\"></span>\n                                                                <span>Provider - {{item?.organisation[0]}}</span>\n                                                            </div>\n                                                        </div>\n                                                    </div>\n                                                    <div *ngIf=\"item?.rationale && item?.is_public\">\n                                                        <div class=\"ai-recommened-pill-public\">\n                                                            <div class=\"ai-recommened-pill-public-text\">\n                                                                <span class=\"ai-loader-icon\"><img\n                                                                        src=\"assets/icons/ai-loader.gif\"></span>\n\n                                                                <span>AI Recommended - Public </span>\n\n                                                            </div>\n                                                        </div>\n                                                        <div class=\"ai-recommened-pill-orange mt-2\"\n                                                            *ngIf=\"item?.platform\">\n                                                            <div class=\"ai-recommened-pill-orange-text\">\n                                                                <span class=\"ai-loader-icon\"><img\n                                                                        src=\"assets/icons/ai-loader.gif\"></span>\n                                                                <a class=\"cursor-pointer\" [href]=\"item?.public_link\"\n                                                                    target=\"_blank\"><span>Platform -\n                                                                        {{item?.platform}}</span></a>\n                                                            </div>\n                                                        </div>\n                                                        <div class=\"ai-recommened-pill-orange mt-2\"\n                                                            *ngIf=\"item?.organisation?.length\">\n                                                            <div class=\"ai-recommened-pill-orange-text\">\n                                                                <span class=\"ai-loader-icon\"><img\n                                                                        src=\"assets/icons/ai-loader.gif\"></span>\n                                                                <span>Provider - {{item?.organisation[0]}}</span>\n                                                            </div>\n                                                        </div>\n                                                    </div>\n                                                    <div *ngIf=\"!item?.rationale\">\n                                                        <div class=\"ai-recommened-pill-gray\">\n                                                            <div class=\"ai-recommened-pill-gray-text\">\n                                                                <span class=\"ai-loader-icon\"><img\n                                                                        src=\"assets/icons/ai-loader.gif\"></span>\n\n                                                                <span>Manually Suggested - iGOT </span>\n\n                                                            </div>\n                                                        </div>\n                                                        <div class=\"ai-recommened-pill-orange mt-2\"\n                                                            *ngIf=\"item?.platform\">\n                                                            <div class=\"ai-recommened-pill-orange-text\">\n                                                                <span class=\"ai-loader-icon\"><img\n                                                                        src=\"assets/icons/ai-loader.gif\"></span>\n                                                                <a class=\"cursor-pointer\" [href]=\"item?.public_link\"\n                                                                    target=\"_blank\"><span>Platform -\n                                                                        {{item?.platform}}</span></a>\n                                                            </div>\n                                                        </div>\n                                                        <div class=\"ai-recommened-pill-orange mt-2\"\n                                                            *ngIf=\"item?.organisation?.length\">\n                                                            <div class=\"ai-recommened-pill-orange-text\">\n                                                                <span class=\"ai-loader-icon\"><img\n                                                                        src=\"assets/icons/ai-loader.gif\"></span>\n                                                                <span>Provider - {{item?.organisation[0]}}</span>\n                                                            </div>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                                <div class=\"course-title mt-4\">\n                                                    <div>\n                                                        <div *ngIf=\"item?.course\">{{item?.course}}</div>\n                                                        <div *ngIf=\"item?.name\">{{item?.name}}</div>\n                                                    </div>\n                                                </div>\n                                                <div class=\"course-desc mt-2\">\n                                                    <div *ngIf=\"isPDFDownload\">\n                                                        <div>{{item?.rationale}}</div>\n                                                    </div>\n                                                </div>\n                                                <div class=\"mt-3\"\n                                                    *ngIf=\"getCompetenciesByType('Behavioural',item)?.length\">\n                                                    <div class=\"competency-sub-heading\">Behavioral Competencies</div>\n                                                    <ul class=\"competency-list mt-1\">\n                                                        <li class=\"behavioural-pill\"\n                                                            *ngFor=\"let comp of getDisplayedCompetencies('Behavioural',item)\">\n                                                            <span class=\"competency-text\"> {{ comp.competencyThemeName\n                                                                }} -\n                                                                {{\n                                                                comp.competencySubThemeName }} </span>\n                                                        </li>\n                                                        <li *ngIf=\"hasMoreThanTwo('Behavioural',item)\"\n                                                            class=\"show-more-competency\">\n                                                            <span class=\"show-more-link cursor-pointer\"\n                                                                (click)=\"toggleCompetencies('Behavioural',item)\">\n                                                                {{ isExpanded('Behavioural',item) ? 'Show Less' : '+' +\n                                                                getRemainingCount('Behavioural',item) + ' More' }}\n                                                            </span>\n                                                        </li>\n                                                    </ul>\n                                                </div>\n                                                <div class=\"mt-2\"\n                                                    *ngIf=\"getCompetenciesByType('Functional',item)?.length\">\n                                                    <div class=\"competency-sub-heading\">Functional Competencies</div>\n                                                    <ul class=\"competency-list mt-1\">\n                                                        <li class=\"functional-pill\"\n                                                            *ngFor=\"let comp of getDisplayedCompetencies('Functional',item)\">\n                                                            <span class=\"competency-text\"> {{ comp.competencyThemeName\n                                                                }} -\n                                                                {{\n                                                                comp.competencySubThemeName }} </span>\n                                                        </li>\n                                                        <li *ngIf=\"hasMoreThanTwo('Functional',item)\"\n                                                            class=\"show-more-competency\">\n                                                            <span class=\"show-more-link cursor-pointer\"\n                                                                (click)=\"toggleCompetencies('Functional',item)\">\n                                                                {{ isExpanded('Functional',item) ? 'Show Less' : '+' +\n                                                                getRemainingCount('Functional',item) + ' More' }}\n                                                            </span>\n                                                        </li>\n                                                    </ul>\n                                                </div>\n                                                <div class=\"mt-2\" *ngIf=\"getCompetenciesByType('Domain',item)?.length\">\n                                                    <div class=\"competency-sub-heading\">Domain Competencies</div>\n                                                    <ul class=\"competency-list mt-1\">\n                                                        <li class=\"domain-pill\"\n                                                            *ngFor=\"let comp of getDisplayedCompetencies('Domain',item)\">\n                                                            <span class=\"competency-text\"> {{ comp.competencyThemeName\n                                                                }} -\n                                                                {{\n                                                                comp.competencySubThemeName }} </span>\n                                                        </li>\n                                                        <li *ngIf=\"hasMoreThanTwo('Domain',item)\"\n                                                            class=\"show-more-competency\">\n                                                            <span class=\"show-more-link cursor-pointer\"\n                                                                (click)=\"toggleCompetencies('Domain',item)\">\n                                                                {{ isExpanded('Domain',item) ? 'Show Less' : '+' +\n                                                                getRemainingCount('Domain',item) + ' More' }}\n                                                            </span>\n                                                        </li>\n                                                    </ul>\n                                                </div>\n                                                <div class=\"mt-2 d-flex justify-content-between item\">\n                                                    <div class=\"relevancy-container\">\n                                                        <div class=\"relevancy\">Relevancy</div>\n                                                        <div class=\"dash\">-</div>\n                                                        <div class=\"percentage\" *ngIf=\"item?.relevancy\">\n                                                            {{item?.relevancy}}%</div>\n                                                        <div class=\"percentage\" *ngIf=\"!item?.relevancy\">N/A</div>\n                                                    </div>\n\n                                                </div>\n\n                                            </div>\n\n                                        </div>\n                                    </div>\n\n                                    <!-- adding courses -->\n                                </div>\n                            </div>\n                        </ng-container>\n                    </div>\n                </div>\n\n                <!-- Footer -->\n\n            </div>\n            <footer class=\"org-footer\">\n                <div class=\"max-w-7xl mx-auto px-6 flex flex-col md:flex-row items-center justify-between\">\n                    <div class=\"flex items-center space-x-4 mb-4 mt-4 md:mb-0 footer-container\">\n                        <div class=\"footer-logo-container\">\n                            <img src=\"assets/icons/karmayogiLogo-min.png\" alt=\"Karmayogi Bharat Logo\" class=\"h-10\"\n                                style=\"margin-left:20px\" />\n                        </div>\n                        <div style=\"margin-left: 100px;\">\n                            <a href=\"https://karmayogibharat.gov.in\" target=\"_blank\" rel=\"noopener noreferrer\"\n                                class=\"text-sm font-semibold transition-colors\">\n                                karmayogibharat.gov.in\n                            </a>\n                        </div>\n\n\n                    </div>\n                    <div class=\"text-sm text-center md:text-right mb-4\" style=\"margin-left: 100px;\">\n                        <p>&copy; 2025 All Rights Reserved.</p>\n                    </div>\n                </div>\n            </footer>\n        </div>\n        <div class=\"popup-footer\">\n            <div>\n                <input class=\"btn-active\" type=\"button\" value=\"Download as Excel\" (click)=\"downloadCSV()\" />\n            </div>\n            <div>\n                <input class=\"btn-active\" type=\"button\" value=\"Download as PDF\"\n                    (click)=\"downloadPdfFromBE(openedFrom)\" />\n            </div>\n            <div>\n                <input class=\"btn-active\" type=\"button\" value=\"Cancel\" (click)=\"cancelForm()\" />\n            </div>\n        </div>\n    </div>\n    <div class=\"overlay-loader\" *ngIf=\"loading\">\n        <mat-spinner diameter=\"50\"></mat-spinner>\n    </div>", styles: ["@charset \"UTF-8\";.container{margin:10px auto}.sub-heading p{color:#000;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.radio-label{color:#000;font-family:Lato;font-size:16px;font-style:normal;font-weight:400;line-height:normal}.radio-btn-group{display:flex;width:32px;height:32px;padding:2px;gap:10px}.label{color:var(--Body-Text-Body-Color, #212529);font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:150%}::ng-deep mat-form-field{background-color:#fff!important;border-radius:25px!important;padding-left:12px;padding-right:12px;height:42px;width:100%}::ng-deep mat-select{border-radius:25px!important;background-color:#fff!important}::ng-deep .mat-select-panel{background-color:#fff!important}::ng-deep .mat-select-panel .mat-option{border-radius:0!important}::ng-deep mat-form-field .mat-form-field-underline{display:none!important}::ng-deep mat-select .mat-select-placeholder{color:#0006;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}::ng-deep mat-select .mat-select-value-text{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;line-height:normal!important;padding-top:0!important;padding-bottom:0!important}::ng-deep mat-select .mat-select-value{display:flex!important;align-items:center!important;height:100%!important}.additional-details textarea{display:flex;padding:16px 16px 0;flex-direction:column;align-items:flex-start;gap:10px;flex:1 0 0;align-self:stretch;width:100%;color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;resize:none}.section-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.btn-disable{border-radius:var(--Radius-Full-Round, 9999999px);opacity:.4;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.btn-group{display:flex;flex-direction:row;justify-content:space-between}.pl-2{padding-left:5px}.search-filter-section{display:flex;flex-direction:row;justify-content:space-between}.search .rsearch{position:relative}.search .search-icon{position:absolute;top:15px;font-size:20px;left:10px}.search .sinput{border-radius:32px;border:1px solid #d5d0d0;padding:15px 36px;font:400 14px Lato;width:800px}.select-map-route-container{display:flex;flex-direction:row}.selected-mapping-route p{color:#1b4ca1;font-family:Lato;font-size:20px;font-style:normal;font-weight:400;line-height:normal;text-decoration-line:underline;text-decoration-style:solid;-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font}.edit-plan{display:flex;padding:4px;justify-content:center;align-items:center;gap:8px;border-radius:4px;background:#1b4ca129;color:#1b4ca1;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;margin-left:10px}.search-container{display:flex;flex-direction:row}.course-container{display:flex;width:100%;padding:16px;flex-direction:column;align-items:flex-start;gap:24px;grid-row:2/span 1;grid-column:1/span 1;border-radius:12px;border:1px solid var(--borders-black-border-16-black, rgba(0, 0, 0, .16));background:#fff}.course-header{display:flex;flex-direction:row;justify-content:space-between;width:100%}.course-pill{display:flex;height:24px;padding:8px;align-items:center;gap:4px;border-radius:16px;border:1px solid var(--borders-border-fill-focussed-4-light-100, #EF951E);background:#fefaf4}.ai-recommened-pill{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);border:1px solid #1B4CA1;background:#1b4ca129}.igot-platform-pill{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);border:1px solid #EF951E;background:#ef951e29}.course-title{color:var(--Primary-KB-Primary-Light, #1B4CA1);font-family:Montserrat;font-size:20px;font-style:normal;font-weight:600;line-height:30px}.course-desc{color:#0009;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.relevancy,.competencies-matched{color:var(--accessbility-shades-with-opacity-kb-greys-black-60, rgba(0, 0, 0, .6));font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;align-items:center}.percentage{color:#1d8923;font-family:Lato;font-size:14px;font-style:normal;font-weight:800;line-height:normal}.relevancy-container,.competencies-matched-container{display:flex;flex-direction:row;align-items:center}.dash{padding:0 5px}::ng-deep .mat-radio-checked .mat-radio-inner-circle{background:#1b4ca1!important}.course-list-container{display:flex;flex-wrap:wrap;gap:16px}.course-list-item{flex:0 0 48%;box-sizing:border-box;border:1px solid #ccc;padding:16px;background-color:#fff;border-radius:8px}.checked-course-container{display:flex}.ml-2{margin-left:8px}::ng-deep .mat-checkbox-checked .mat-checkbox-background{background:#1b4ca1!important}.ai-recommened-pill-text,.igot-platform-pill-text{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:700;line-height:normal}.course-pill-text{color:var(--accessbility-shades-without-opacity-kb-greys-black-87, #212121);text-align:center;font-family:Poppins;font-size:12px;font-style:normal;font-weight:400;line-height:normal}.ai-loader-icon img,.igot-platform-icon img{width:15.714px;height:15.714px;flex-shrink:0}.competency-container{display:flex;justify-content:normal;flex-direction:row;gap:16px}.outside-layer-total{display:flex;padding:4px 20px;justify-content:left;align-items:left;gap:6px;border-radius:12px;border-left:2px solid #1B4CA1;border-right:2px solid #1B4CA1;background:#edf1f8;flex-direction:column;width:25%}.outside-layer-functional{display:flex;padding:4px 12px;justify-content:left;align-items:left;gap:16px;border-radius:12px;border-left:2px solid #E24577;border-right:2px solid #E24577;background:#f8d2de;flex-direction:column;width:25%}.outside-layer-domain{display:flex;padding:4px 12px;justify-content:left;align-items:left;gap:16px;border-radius:12px;border-left:2px solid #7B47A4;border-right:2px solid #7B47A4;background:#dfd3e9;flex-direction:column;width:25%}.outside-layer-behavioral{display:flex;padding:4px 12px;justify-content:left;align-items:left;gap:16px;border-radius:12px;border-left:2px solid #F8B861;border-right:2px solid #F8B861;background:#fde8cc;flex-direction:column;width:25%}.inside-layer{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:400;line-height:normal}.suggest-courses-header{display:flex;flex-direction:row;justify-content:space-between}.suggest-course-control{display:flex;flex-direction:row}.course-card-container{width:172px;border-radius:3.307px;border:.827px solid var(--borders-border-8-black, rgba(0, 0, 0, .08));background-color:#fff}.highlight-ai{font-family:Montserrat;font-size:24px;font-style:normal;font-weight:600;line-height:normal;background:linear-gradient(90deg,#3b27ff,#2de3d6);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}.ai-loader-icon-medium img{width:40px;height:40px;flex-shrink:0}.heading{color:#000;font-family:Montserrat;font-size:20px;font-style:normal;font-weight:600;line-height:normal;margin:10px 0}.heading-bg{color:#fff;font-family:Montserrat;font-size:20px;font-style:normal;font-weight:600;line-height:normal;margin:10px 0}.progress-popup{display:flex;flex-direction:column;justify-content:center;align-items:center}.progress-popup .desc{color:#000000de;text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.behavioural-pill{display:flex;padding:0 8px;justify-content:center;align-items:center;gap:10px;border-radius:99px;border:1px solid #F8B861;background:linear-gradient(0deg,#f8b86152 0% 100%),#fff;margin:5px 0}.functional-pill{display:flex;padding:0 8px;justify-content:center;align-items:center;gap:10px;border-radius:99px;border:1px solid #E24577;background:linear-gradient(0deg,#e245773d 0% 100%),#fff;margin:5px 0}.domain-pill{display:flex;padding:0 8px;justify-content:center;align-items:center;gap:10px;border-radius:99px;border:1px solid #7B47A4;background:linear-gradient(0deg,#7b47a43d 0% 100%),#fff;margin:5px 0}.popup-header{display:flex;flex-direction:row;justify-content:space-between}.popup-footer{display:flex;flex-direction:row;justify-content:center}.view-cbp-plan{margin:10px;padding:10px}.view-cbp-plan-popup{padding:24px;max-height:70vh;overflow-y:auto}.section{border-radius:8px;background:#1b4ca114;padding:16px}.popup-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ddd;font-weight:700;flex-shrink:0}.popup-footer{display:flex;justify-content:center;gap:16px;padding:16px 24px;background-color:#fff;flex-shrink:0;position:sticky;bottom:-15px}.section-container{overflow-y:auto;flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;align-items:center}.competency-list{display:flex;flex-direction:row;gap:16px}.competency-text{color:#000;font-family:Lato;font-size:10px;font-style:normal;font-weight:700;line-height:normal}.competency-sub-heading{color:#1b4ca1;font-family:Montserrat;font-size:12px;font-style:normal;font-weight:600;line-height:normal}.cursor-pointer{cursor:pointer}.btn-active{border-radius:var(--Radius-Full-Round, 9999999px);opacity:1;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.custom-textarea{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.overlay-loader{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#ffffffbf;z-index:9999;display:flex;justify-content:center;align-items:center}.grid{display:grid;gap:1.5rem}.grid-cols-1{grid-template-columns:repeat(1,1fr)}@media (min-width: 768px){.md\\:grid-cols-2{grid-template-columns:repeat(2,1fr)}}@media (min-width: 1024px){.lg\\:grid-cols-4{grid-template-columns:repeat(4,1fr)}}.kpi-card{background:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 4px 14px #0000000d;border-left:4px solid transparent;transition:box-shadow .3s ease}.kpi-card:hover{box-shadow:0 8px 24px #0000001a}.kpi-icon{padding:.75rem;border-radius:.5rem;display:flex;align-items:center;justify-content:center}.kpi-text{font-size:1.25rem;font-weight:700}.progress-container{background:#e5e7eb;height:.75rem;border-radius:9999px;margin-top:.5rem}.progress-bar{height:100%;border-radius:9999px;transition:width .4s ease}.competency-block{background-color:#fff;border-radius:12px;box-shadow:0 2px 10px #0000000f;overflow:hidden}.competency-header{padding:1.5rem;background:linear-gradient(to right,#4f46e5,#3b82f6);color:#fff}.competency-header h3{font-size:1.25rem;font-weight:600}.competency-body{padding:1rem}.role-card{background-color:#f9fafb;padding:.5rem;border-left:4px solid #6366f1;border-radius:6px}.role-title{font-size:1rem;font-weight:600;margin-bottom:.75rem;display:flex;align-items:center;color:#1e40af}.comp-section{border-radius:.5rem;padding:.75rem;background-color:#f0f9ff;margin-bottom:1rem}.comp-section h4{font-weight:600;margin-bottom:.5rem}.comp-item{background-color:#fff;border-left:3px solid #3b82f6;padding:.5rem;border-radius:4px;margin-bottom:.25rem;font-size:.875rem}.bg-blue-50{background-color:#fde8cc;border-radius:4px}.bg-green-50{background-color:#f8d2de;border-radius:4px}.bg-purple-50{background-color:#dfd3e9;border-radius:4px}.text-blue-800{color:#1e3a8a}.text-green-800{color:#ff1493}.text-purple-800{color:#6b21a8}.border-blue-400{border-color:#60a5fa}.border-green-400{border-color:#34d399}.border-purple-400{border-color:#c084fc}.text-sm{font-size:.875rem}.text-gray-700{color:#374151}.icon-sm{width:24px;height:24px}.heading-with-bg{background:#4f46e5;padding:24px;border-radius:8px 8px 0 0}.competencis-grid{display:flex;flex-direction:row;justify-content:space-between;gap:16px}.section-shadow{padding:16px;border-radius:4px;background:#fff;box-shadow:0 2px 4px #0000001a,0 1px 10px #0000000f}.count{color:#1b4ca1;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.competency-grid{display:flex;flex-direction:row;gap:16px;justify-content:space-between}.text-blue-600{color:#1b4ca1;font-weight:600}.text-green-600{color:#ff1493;font-weight:600}.text-purple-600{color:#6b21a8;font-weight:600}.horizontal-flex{display:flex;align-items:center;justify-content:space-between;width:100%}.progress-bar{width:100%;height:10px;background-color:#e0e0e0;border-radius:10px;overflow:hidden;box-shadow:inset 0 1px 3px #0003}.progress-bar-fill{height:100%;background-color:#1b4ca1;width:0;border-radius:10px 0 0 10px;transition:width .5s ease-in-out}.progress-bar-fill-behavioural{height:100%;background-color:#f8b861;width:0;border-radius:10px 0 0 10px;transition:width .5s ease-in-out}.progress-bar-fill-functional{height:100%;background-color:#e24577;width:0;border-radius:10px 0 0 10px;transition:width .5s ease-in-out}.progress-bar-fill-domain{height:100%;background-color:#7b47a4;width:0;border-radius:10px 0 0 10px;transition:width .5s ease-in-out}.sub-text{font-size:12px;font-weight:600;font-family:Lato}.competency-count-by-designation{display:flex;gap:10px;flex-direction:row}.competencies-grid-3{width:33%}.grid-list-item div{padding:5px 10px;margin:10px 0}.grid-list-item-behavioral div{border-left:2px solid darkorange}.grid-list-item-functional div{border-left:2px solid #ff1493}.grid-list-item-domain div{border-left:2px solid #6b21a8}.header-flex{display:flex;flex-direction:row;width:100%;justify-content:space-between;gap:30px}.header-border{border-bottom:1px solid #ccc;margin:10px;padding:10px}.text-gray-600{font-family:Lato;font-size:14px;font-weight:600}.image-container .h-10,.image-container .h-15{height:50px}.image-container{display:flex;gap:10px;flex-direction:row}.org-footer{display:flex;flex-direction:row;background:#fff;gap:16px;color:#000;width:100%;justify-content:center;align-items:center;border-top:1px solid #ccc;border-bottom:1px solid #ccc}.dialog-scrollable-content{max-height:70vh;overflow-y:auto}.org-footer a{color:#000!important}h1{font-size:1.75rem!important}@media print{.org-footer,.header-border{page-break-inside:avoid}}.header-border{padding-top:10px;padding-bottom:10px;background-color:#fff}.footer-container{display:flex;justify-content:center;align-items:center;flex-direction:column}.footer-logo-container{display:flex;justify-content:center;align-items:center;flex-direction:row;width:30%}.avoid-page-break{page-break-inside:avoid;break-inside:avoid}.pdf-clean *{box-shadow:none!important;filter:none!important;transform:none!important}.view-cbp-plan.pdf-clean{overflow:visible!important;max-height:none!important}.section-container,.popup-container,.outside-layer-total,.outside-layer-behavioral,.outside-layer-functional,.outside-layer-domain,.section-shadow{page-break-inside:avoid!important;break-inside:avoid!important}.bg-gradient-to-br{background:none!important}.section-container,.outside-layer-total,.outside-layer-behavioral,.outside-layer-functional,.outside-layer-domain,.competencis-grid{page-break-inside:avoid}.page-break{page-break-before:always}.cbp .container{margin:10px auto}.cbp .sub-heading p{color:#000;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.cbp .ministry-heading{color:#1b4ca1;font-family:Montserrat;font-size:24px;font-style:normal;font-weight:600;line-height:normal}.cbp .radio-label{color:#000;font-family:Lato;font-size:16px;font-style:normal;font-weight:400;line-height:normal}.cbp .radio-btn-group{display:flex;width:32px;height:32px;padding:2px;gap:10px}.cbp .label{color:var(--Body-Text-Body-Color, #212529);font-family:Lato;font-size:16px;font-style:normal;font-weight:700;line-height:150%}.cbp ::ng-deep mat-form-field{background-color:#fff!important;border-radius:25px!important;padding-left:12px;padding-right:12px;height:42px;width:100%}.cbp ::ng-deep mat-select{border-radius:25px!important;background-color:#fff!important}.cbp ::ng-deep .mat-select-panel{background-color:#fff!important}.cbp ::ng-deep .mat-select-panel .mat-option{border-radius:0!important}.cbp ::ng-deep mat-form-field .mat-form-field-underline{display:none!important}.cbp ::ng-deep mat-select .mat-select-placeholder{color:#0006;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.cbp ::ng-deep mat-select .mat-select-value-text{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;line-height:normal!important;padding-top:0!important;padding-bottom:0!important}.cbp ::ng-deep mat-select .mat-select-value{display:flex!important;align-items:center!important;height:100%!important}.cbp .additional-details textarea{display:flex;padding:16px 16px 0;flex-direction:column;align-items:flex-start;gap:10px;flex:1 0 0;align-self:stretch;width:100%;color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;resize:none}.cbp .section-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.cbp .btn-disable{border-radius:var(--Radius-Full-Round, 9999999px);opacity:.4;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.cbp .btn-group{display:flex;flex-direction:row;justify-content:space-between}.cbp .pl-2{padding-left:5px}.cbp .search-filter-section{display:flex;flex-direction:row;justify-content:space-between}.cbp .search .rsearch{position:relative}.cbp .search .search-icon{position:absolute;top:15px;font-size:20px;left:10px}.cbp .search .sinput{border-radius:32px;border:1px solid #d5d0d0;padding:15px 36px;font:400 14px Lato;width:800px}.cbp .select-map-route-container{display:flex;flex-direction:row}.cbp .selected-mapping-route p{color:#1b4ca1;font-family:Lato;font-size:20px;font-style:normal;font-weight:400;line-height:normal;text-decoration-line:underline;text-decoration-style:solid;-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font}.cbp .edit-plan{display:flex;padding:4px;justify-content:center;align-items:center;gap:8px;border-radius:4px;background:#1b4ca129;color:#1b4ca1;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;margin-left:10px}.cbp .search-container{display:flex;flex-direction:row}.cbp .course-container{display:flex;width:100%;padding:16px;flex-direction:column;align-items:flex-start;gap:24px;grid-row:2/span 1;grid-column:1/span 1;border-radius:12px;border:1px solid var(--borders-black-border-16-black, rgba(0, 0, 0, .16));background:#fff}.cbp .course-header{display:flex;flex-direction:row;justify-content:space-between;width:100%}.cbp .course-pill{display:flex;height:24px;padding:8px;align-items:center;gap:4px;border-radius:16px;border:1px solid var(--borders-border-fill-focussed-4-light-100, #EF951E);background:#fefaf4}.cbp .ai-recommened-pill-green{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#0080001c}.cbp .ai-recommened-pill-green-text{color:#006400;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.cbp .ai-recommened-pill-public{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#1b4ca129}.cbp .ai-recommened-pill-public-text{color:#1b4ca1;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.cbp .ai-recommened-pill-gray{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#d3d3d3}.cbp .ai-recommened-pill-gray-text{color:#000;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.cbp .ai-recommened-pill-orange{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#ffa50052}.cbp .ai-recommened-pill-orange-text{color:#5a3f0d;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.cbp .ai-recommened-pill-orange-text a{color:#5a3f0d!important;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.cbp .igot-platform-pill{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);border:1px solid #EF951E;background:#ef951e29}.cbp .course-title{color:var(--Primary-KB-Primary-Light, #1B4CA1);font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:22px}.cbp .course-desc{color:#0009;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.cbp .relevancy,.cbp .competencies-matched{color:#6c757d;font-family:Lato;font-size:12px;font-style:normal;font-weight:500;line-height:normal;align-items:center}.cbp .percentage{color:#1b4ca1;font-family:Lato;font-size:14px;font-style:normal;font-weight:600;line-height:normal}.cbp .delete-button input{background-color:#b60a0a;border-radius:10px}.cbp .relevancy-container,.cbp .competencies-matched-container{display:flex;flex-direction:row;align-items:center}.cbp .dash{padding:0 5px}.cbp ::ng-deep .mat-radio-checked .mat-radio-inner-circle{background:#1b4ca1!important}.cbp .course-list-container{display:flex;flex-wrap:wrap;gap:16px;width:100%;padding:1rem}.cbp .course-list-item{flex:1 1 calc(50% - 10px);min-width:350px;max-width:500px;box-sizing:border-box;border:1px solid #e0e0e0;padding:16px;background-color:#fff;border-radius:12px;min-height:auto;box-shadow:0 2px 4px #0000001a;transition:box-shadow .2s ease;display:flex;flex-direction:column}.cbp .course-list-item:hover{box-shadow:0 4px 8px #00000026}.cbp .course-list-item:only-child{flex:1 1 auto;max-width:800px}.cbp .checked-course-container{display:flex;width:60%}.cbp .ml-2{margin-left:8px}.cbp ::ng-deep .mat-checkbox-checked .mat-checkbox-background{background:#1b4ca1!important}.cbp .igot-platform-pill-text{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:700;line-height:normal}.cbp .course-pill-text{color:var(--accessbility-shades-without-opacity-kb-greys-black-87, #212121);text-align:center;font-family:Poppins;font-size:12px;font-style:normal;font-weight:400;line-height:normal}.cbp .ai-loader-icon img,.cbp .igot-platform-icon img{width:15.714px;height:15.714px;flex-shrink:0}.cbp .competency-container{display:flex;justify-content:normal;gap:16px;flex-direction:row}.cbp .outside-layer-total{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #1B4CA1;background:#edf1f8;width:132px}.cbp .outside-layer-functional{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #E24577;background:#f8d2de;width:132px}.cbp .outside-layer-domain{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #7B47A4;background:#dfd3e9;width:132px}.cbp .outside-layer-behavioral{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #F8B861;background:#fde8cc;width:132px}.cbp .inside-layer{color:#1b4ca1;font-family:Lato;font-size:16px;font-style:normal;font-weight:400;line-height:normal}.cbp .count{color:#1b4ca1;font-family:Montserrat;font-size:18px;font-style:normal;font-weight:600;line-height:normal}.cbp .suggest-courses-header{display:flex;flex-direction:row;justify-content:space-between}.cbp .suggest-course-control{display:flex;flex-direction:row}.cbp .course-card-container{width:172px;border-radius:3.307px;border:.827px solid var(--borders-border-8-black, rgba(0, 0, 0, .08));background-color:#fff}.cbp .highlight-ai{font-family:Montserrat;font-size:24px;font-style:normal;font-weight:600;line-height:normal;background:linear-gradient(90deg,#3b27ff,#2de3d6);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}.cbp .ai-loader-icon-medium img{width:40px;height:40px;flex-shrink:0}.cbp .heading{color:#000;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal;margin:10px 0}.cbp .pdf-heading{color:#000;font-family:Montserrat;font-size:18px;font-style:normal;font-weight:600;line-height:normal;margin:10px 0;text-align:center}.cbp .popup-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid #e0e0e0}.cbp .header-left{flex:1}.cbp .header-actions{display:flex;align-items:center;gap:12px}.cbp .regenerate-btn{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:6px;font-size:14px;font-weight:500;min-width:auto}.cbp .regenerate-btn .mat-icon{margin:0;font-size:18px;width:18px;height:18px}.cbp .regenerate-btn .mat-spinner{margin:0}.cbp .regenerate-btn:disabled{opacity:.7;cursor:not-allowed}.cbp .close-btn{padding:8px;border-radius:4px;transition:background-color .2s ease}.cbp .close-btn:hover{background-color:#f5f5f5}.cbp .close-btn .mat-icon{font-size:20px;width:20px;height:20px}.cbp .progress-popup{display:flex;flex-direction:column;justify-content:center;align-items:center}.cbp .progress-popup .desc{color:#000000de;text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.cbp .behavioural-pill{display:flex;padding:2px 6px;justify-content:center;align-items:center;gap:4px;border-radius:16px;border:1px solid #F8B861;background:linear-gradient(0deg,#f8b86152 0% 100%),#fff;margin:2px 4px 2px 0;font-size:12px}.cbp .functional-pill{display:flex;padding:2px 6px;justify-content:center;align-items:center;gap:4px;border-radius:16px;border:1px solid #E24577;background:linear-gradient(0deg,#e245773d 0% 100%),#fff;margin:2px 4px 2px 0;font-size:12px}.cbp .domain-pill{display:flex;padding:2px 6px;justify-content:center;align-items:center;gap:4px;border-radius:16px;border:1px solid #7B47A4;background:linear-gradient(0deg,#7b47a43d 0% 100%),#fff;margin:2px 4px 2px 0;font-size:12px}.cbp .popup-header{display:flex;flex-direction:row;justify-content:space-between}.cbp .popup-footer{display:flex;flex-direction:row;justify-content:end}.cbp .view-cbp-plan{margin:10px;padding:10px}.cbp .view-cbp-plan-popup{padding:24px;max-height:70vh;overflow-y:auto}.cbp .section{border-radius:8px;background:#1b4ca114;padding:16px}.cbp .popup-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ddd;font-weight:700;flex-shrink:0}.cbp .popup-footer{display:flex;justify-content:flex-end;gap:16px;padding:16px 24px;border-top:1px solid #ddd;background-color:#fff;flex-shrink:0;position:sticky;bottom:0}.cbp .section-container{overflow-y:auto;flex:1 1 auto}.cbp .competency-list{display:flex;flex-direction:row;gap:0px;flex-wrap:wrap;margin:0;padding:0;list-style:none}.cbp .competency-text{color:#000;font-family:Lato;font-size:12px;font-style:normal;font-weight:400;line-height:normal;padding:3px 6px}.cbp .competency-text-behavioral{color:#654321;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.cbp .competency-text-functional{color:#b01669;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.cbp .competency-text-domain{color:#301934;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.cbp .competency-sub-heading{color:#1b4ca1;font-family:Montserrat;font-size:14px;font-style:normal;font-weight:600;line-height:normal}.cbp .cursor-pointer{cursor:pointer}.cbp .btn-active{border-radius:var(--Radius-Full-Round, 9999999px);opacity:1;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.cbp .custom-textarea{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.cbp .overlay-loader{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#ffffffbf;z-index:9999;display:flex;justify-content:center;align-items:center}.cbp .competencis-grid{display:flex;flex-direction:row;justify-content:space-between;gap:16px}.cbp .grid-list-item-behavioral div{border-left:2px solid darkorange}.cbp .grid-list-item-functional div{border-left:2px solid #ff1493}.cbp .grid-list-item-domain div{border-left:2px solid #6b21a8}.cbp .competencies-grid-3{width:33%}.cbp .bg-blue-50{background-color:#fde8cc;border-radius:4px}.cbp .bg-green-50{background-color:#f8d2de;border-radius:4px}.cbp .bg-purple-50{background-color:#dfd3e9;border-radius:4px}.cbp .grid-list-item div{padding:5px 10px;margin:10px 0}.cbp .course-pill-container{display:flex;gap:8px}.cbp .relevancy-pill-green{display:flex;padding:4px 8px;align-items:center;gap:4px;border-radius:16px;border:1px solid #e0e0e0;background:#f8f9fa}.cbp .mt-1{margin-top:.25rem}.cbp .mt-2{margin-top:.5rem}.cbp .mt-3{margin-top:.75rem}.cbp .show-more-competency{display:inline-flex;align-items:center}.cbp .show-more-link{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:500;line-height:normal;margin:2px 4px 2px 0;text-decoration:none}.cbp .show-more-link:hover{text-decoration:underline}.cbp .course-content{flex:1;display:flex;flex-direction:column}.cbp .course-footer{margin-top:auto;padding-top:12px;display:flex;justify-content:space-between}.cbp ::ng-deep .mdc-tab__text-label{font-weight:700;font-family:Montserrat!important;font-size:16px;color:#000!important;text-transform:capitalize}.cbp .competency-tag{display:inline-block;padding:.25rem .75rem;border-radius:9999px;font-size:.75rem;font-weight:500;margin-right:.5rem;margin-bottom:.5rem}.cbp .menu-list-item.active{background-color:#1b4ca1;color:#fff}.cbp .menu-list-item:hover{background-color:#1b4ca1;color:#fff;border-color:#1b4ca1}.cbp .gray-bg{background-color:rgb(248,250,252,var(--tw-bg-opacity, 1));border-radius:8px;border:1px solid #ccc}.cbp .div-count{font-family:Lato;font-size:20px;font-weight:700}.cbp .green-bg{background-color:#0080001c;border:1px solid #006400;border-radius:8px}.cbp .div-green-count{font-family:Lato;font-size:20px;font-weight:700;color:#006400}.cbp .div-green-label{color:#006400;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.cbp .gray-bg-item{background-color:rgb(248,250,252,var(--tw-bg-opacity, 1));border-radius:8px;border:1px solid #ccc;padding:4px 8px;margin:10px}.cbp .add-btn{color:#1b4ca1;font-size:14px;font-family:Lato}.cbp .list-flex{display:flex;flex-direction:row;justify-content:space-between}.cbp .all-category-list .mat-icon{vertical-align:middle}.cbp .course-list-container-flex{display:flex;align-items:flex-start;gap:2rem}.cbp .left-panel{flex:0 0 250px;font-weight:700;text-align:left}.cbp .right-panel{flex:1;display:flex;flex-direction:row;flex-wrap:wrap;gap:20px;align-content:flex-start;justify-content:flex-start}.cbp .category-list-item{font-weight:400;font-size:16px;font-family:Lato;padding:5px}.cbp .right-panel-flex{display:flex;flex:0 0 100%;width:100%;flex-direction:row;flex-wrap:wrap;gap:20px;justify-content:flex-start}.cbp .course-list-container-right-flex{display:flex}.cbp .no-gaps-message{display:flex;flex-direction:column;align-items:center;padding:24px;background:linear-gradient(135deg,#4caf501a,#81c7841a);border:2px solid #4CAF50;border-radius:16px;margin:16px 0}.cbp .no-gaps-message .success-icon{font-size:25px;color:#4caf50;margin-bottom:16px}.cbp .no-gaps-message h4{color:#2e7d32;font-family:Montserrat;font-size:20px;font-weight:600;margin:0 0 8px;text-align:center}.cbp .no-gaps-message p{color:#388e3c;font-family:Lato;font-size:14px;font-weight:400;margin:0;text-align:center;line-height:1.5}.cbp .section-header-improved{display:flex;flex-direction:column;gap:16px}.cbp .search-and-buttons-container{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.cbp .search-container-compact{flex:0 0 auto;min-width:280px}.cbp .search-container-compact .rsearch{position:relative;display:flex;align-items:center}.cbp .search-container-compact .search-icon{position:absolute;left:12px;color:#666;font-size:20px;z-index:1}.cbp .search-container-compact .sinput-compact{border-radius:25px;border:1px solid #d5d0d0;padding:8px 12px 8px 40px;height:32px;width:100%;font:400 14px Lato;box-sizing:border-box;transition:border-color .3s ease}.cbp .search-container-compact .sinput-compact:focus{outline:none;border-color:#1b4ca1;box-shadow:0 0 0 2px #1b4ca11a}.cbp .search-container-compact .sinput-compact::placeholder{color:#999}.cbp .btn-group-compact{display:flex;gap:8px;flex:0 0 auto}.cbp .category-list-item{padding:8px 12px!important;border-radius:6px;border:1px solid transparent;transition:all .3s ease;background:#f8f9fa;color:#333;font-family:Lato;font-size:14px!important;font-weight:400!important}.cbp .category-list-item:hover{background:#1b4ca10d;border-color:#1b4ca133}.cbp .category-list-item.selected-theme{background:#1b4ca11a;border-color:#1b4ca1;color:#1b4ca1;font-weight:600!important}.cbp .category-list-item.selected-theme:before{content:\"\\2713  \";color:#1b4ca1;font-weight:700}.cbp .theme-filter-controls{margin-bottom:8px}.cbp .clear-filter-btn{background:#f8f9fa;border:1px solid #ddd;border-radius:20px;padding:4px 12px;font-size:12px;color:#666;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:4px}.cbp .clear-filter-btn:hover{background:#e9ecef;border-color:#adb5bd}.cbp .clear-filter-btn mat-icon{font-size:16px;width:16px;height:16px}.cbp .no-course-found-container{display:flex;justify-content:center;align-items:center;min-height:300px;padding:20px}.cbp .no-course-card{background:linear-gradient(135deg,#f8f9fa,#e9ecef);border:2px dashed #ced4da;border-radius:16px;padding:40px;text-align:center;max-width:500px;box-shadow:0 4px 12px #0000000d}.cbp .no-course-card .no-course-icon{margin-bottom:20px}.cbp .no-course-card .no-course-icon mat-icon{font-size:48px;width:48px;height:48px;color:#6c757d}.cbp .no-course-card .no-course-content h4{color:#495057;font-family:Montserrat;font-size:24px;font-weight:600;margin-bottom:12px}.cbp .no-course-card .no-course-content p{color:#6c757d;font-family:Lato;font-size:16px;line-height:1.5;margin-bottom:12px}.cbp .no-course-card .no-course-content p strong{color:#1b4ca1;font-weight:600}.cbp .no-course-card .suggest-course-btn{background:linear-gradient(135deg,#1b4ca1,#164080);color:#fff;border:none;border-radius:25px;padding:12px 24px;font-family:Lato;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;margin:20px auto 0;transition:all .3s ease;box-shadow:0 4px 12px #1b4ca14d}.cbp .no-course-card .suggest-course-btn:hover{background:linear-gradient(135deg,#164080,#0f2f5f);transform:translateY(-2px);box-shadow:0 6px 16px #1b4ca166}.cbp .no-course-card .suggest-course-btn:active{transform:translateY(0)}.cbp .no-course-card .suggest-course-btn mat-icon{font-size:18px;width:18px;height:18px}.cbp .left-panel{flex:0 0 280px!important;background:#f8f9fa;border-radius:12px;padding:16px;border:1px solid #e9ecef;max-height:600px;overflow-y:auto;font-weight:400!important}@media (max-width: 1200px){.cbp .search-and-buttons-container{flex-direction:column;align-items:stretch}.cbp .search-container-compact{min-width:auto;width:100%}.cbp .btn-group-compact{justify-content:center;flex-wrap:wrap}}@media (max-width: 1200px) and (min-width: 769px){.cbp .course-list-item{flex:1 1 calc(50% - 10px);min-width:300px;max-width:none}}@media (max-width: 768px){.cbp .course-list-container-flex{flex-direction:column}.cbp .left-panel{flex:none!important;max-height:300px}.cbp .course-list-item{flex:0 0 100%;max-width:100%}.cbp .no-course-card{padding:20px}.cbp .no-course-card .no-course-content h4{font-size:20px}.cbp .no-course-card .no-course-content p{font-size:14px}}.cbp ::ng-deep .error-snackbar{background-color:#f44336!important;color:#fff!important;font-weight:500}.cbp ::ng-deep .error-snackbar .mat-simple-snackbar-action{color:#fff!important}.cbp ::ng-deep .session-expired-snackbar{background-color:#ff9800!important;color:#fff!important;font-weight:600}.cbp ::ng-deep .session-expired-snackbar .mat-simple-snackbar-action{color:#fff!important;font-weight:700}.cbp .download-pdf{justify-content:end;display:flex;flex-direction:row}.section-header-improved,.section-header-improved-sec-2{display:flex;flex-direction:row;gap:0px;width:100%}.search-and-buttons-container{display:flex;justify-content:space-between;gap:4px;flex-direction:column;flex-wrap:wrap;width:37%;margin:0 5px}::ng-deep .select-search-panel{border:1px solid #ccc!important;border-radius:12px!important;box-shadow:0 8px 20px #0000001f}:host ::ng-deep .mat-select-arrow-wrapper{margin-top:5px!important}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{color:#ccc}:host ::ng-deep .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick{color:#1b4ca1;border-color:#1b4ca1!important}::ng-deep .select-search-panel .mat-option.mat-selected:not(.mat-option-disabled){background-color:#1b4ca1!important;color:#fff!important}:host ::ng-deep .mat-form-field-appearance-outline{border-radius:25px;border:1px solid #ccc}:host ::ng-deep .mat-form-field-focused .mat-form-field-appearance-outline{border-color:#1b4ca1!important}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-start{border-radius:25px 0 0 25px;border:none!important}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-end{border-right:none!important;border:none!important;border-radius:0 25px 25px 0}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-gap{border:none!important;border-radius:25px}:host::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix{background-color:transparent!important}:host ::ng-deep .search-and-buttons-container .mat-option-text{color:#fff!important}.header-container{display:flex;flex-direction:row;justify-content:space-between;width:100%;margin:10px 0}.right-side-container{display:flex;justify-content:space-between;gap:64px}::ng-deep .language-select .mat-select-trigger{font-weight:400!important}::ng-deep .language-select .mat-select-value{color:#fff!important}:host ::ng-deep .select-search-panel .mat-option-text{color:#fff!important}.competency-tags{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}.proficiency-tag,.delivery-mode-tag{display:inline-flex;align-items:center;justify-content:center;padding:2px 8px;border-radius:16px;font-size:11px;line-height:16px;font-weight:500;white-space:nowrap}.delivery-mode-tag.online{background:#e6f4ea;color:#1a7f45;border:1px solid #9BD3B0}.delivery-mode-tag.offline{background:#fdf0e3;color:#a2590a;border:1px solid #F0C48A}.delivery-mode-tag.blended{background:#efe9fb;color:#5b21b6;border:1px solid #C9B6F0}.proficiency-tag.strategic{background:#1b4ca1;color:#fff;border:none}.proficiency-tag.tactical{background:#5b8def;color:#fff;border:none}.proficiency-tag.operational{background:#dbe6f7;color:#1b4ca1;border:none}.flex-col-theme{display:flex;flex-direction:row;gap:6px}\n"] }]
+            args: [{ selector: 'app-view-final-cbp-plan', template: "<div class=\"view-cbp-plan\" #dialogContent style=\"max-height: 80vh; overflow: auto;\">\n    <div class=\"popup-container\">\n        <div class=\"popup-header\">\n            <div class=\"header-container\">\n                <div>\n                    <div class=\"heading\">View Final <span *ngIf=\"openedFrom === 'cbp'\">CBP</span><span\n                            *ngIf=\"openedFrom === 'acbp'\">ACBP</span></div>\n                </div>\n                <div class=\"right-side-container\">\n                    <div class=\"search-and-buttons-container\">\n                        <form [formGroup]=\"filterForm\">\n                            <div>\n                                <mat-form-field appearance=\"outline\" class=\"language-select\" style=\" height: 34px;\">\n                                    <mat-label style=\"font-weight: normal;\">\n                                        {{ filterForm.get('language')?.value ? '' : 'Select Language' }}\n                                    </mat-label>\n\n                                    <mat-select formControlName=\"language\" panelClass=\"select-search-panel\"\n                                        (selectionChange)=\"applyFilters()\">\n\n                                        <!-- Search box -->\n                                        <input style=\"border:1px solid #ccc; padding: 5px;width: 92%;margin: 5px;\"\n                                            matInput placeholder=\"Search Languages\" (click)=\"$event.stopPropagation()\"\n                                            (keydown)=\"$event.stopPropagation()\"\n                                            (keyup)=\"filterList($any($event.target).value, 'language')\" />\n\n                                        <!-- Values -->\n                                        <mat-option *ngFor=\"let r of filteredLanguages\" [value]=\"r?.code\">\n                                            {{ r?.label }}\n                                        </mat-option>\n\n                                    </mat-select>\n                                </mat-form-field>\n                            </div>\n                        </form>\n                    </div>\n                    <div class=\"cursor-pointer\" (click)=\"closeDialog()\">\n                        <mat-icon>close</mat-icon>\n                    </div>\n                </div>\n            </div>\n\n\n\n        </div>\n        <div class=\"section-container\" #pdfContent>\n            <header class=\"bg-white header-border\">\n                <div class=\"header-flex justify-between\" style=\"width:100%\">\n                    <div class=\"flex items-center space-x-4\" style=\"width:50%\">\n                        <div class=\"image-container\">\n                            <div>\n                                <img src=\"assets/icons/dopt-logo.png\" alt=\"Department of Personnel & Training\"\n                                    class=\"h-15\" />\n                            </div>\n                            <div>\n                                <img src=\"assets/icons/CBC_logo.svg\" alt=\"Capacity Building Commission Logo\"\n                                    class=\"h-10\" />\n                            </div>\n                            <div>\n                                <img src=\"assets/icons/karmayogiLogo-min.png\" alt=\"Karmayogi Bharat Logo\"\n                                    class=\"h-10\" />\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"text-right\" style=\"width:50%\">\n                        <h1 class=\"text-2xl font-bold text-gray-900\">\n                            <span\n                                *ngIf=\"sharedService?.cbpPlanFinalObj?.ministry?.sbOrgType === 'state'\">{{sharedService?.cbpPlanFinalObj?.ministry?.orgName}}</span>\n                            <span\n                                *ngIf=\"sharedService?.cbpPlanFinalObj?.ministry?.sbOrgType === 'ministry'\">{{sharedService?.cbpPlanFinalObj?.ministry?.orgName}}</span>\n                            <span\n                                *ngIf=\"sharedService?.cbpPlanFinalObj?.department_name\">/{{sharedService?.cbpPlanFinalObj?.department_name}}</span>\n                            - Capacity Building Plan\n                        </h1>\n                        <p class=\"text-gray-600\">Comprehensive Role-Based Competency Analysis</p>\n                    </div>\n                </div>\n            </header>\n            <div class=\"min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100\">\n                <!-- Header -->\n\n\n                <div class=\"max-w-7xl mx-auto px-6 py-8 mt-4\">\n                    <!-- KPI Dashboard -->\n                    <div class=\"competency-container mt-2\">\n                        <div class=\"outside-layer-total\">\n                            <div class=\"horizontal-flex mt-2\">\n                                <div>\n                                    <svg class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\"\n                                        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n                                        stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n                                        <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\" />\n                                        <path d=\"M14 2v6h6\" />\n                                        <path d=\"M16 13H8\" />\n                                        <path d=\"M16 17H8\" />\n                                        <path d=\"M10 9H8\" />\n                                    </svg>\n                                </div>\n                                <div>\n                                    <div class=\"count\">{{totalCompetencieObj?.total}}</div>\n                                </div>\n                            </div>\n\n                            <div class=\"mt-4\">\n                                <div class=\"sub-heading\">\n                                    <p>Total Competencies</p>\n                                </div>\n                            </div>\n                            <div class=\"progress-bar mt-2\">\n                                <div class=\"progress-bar-fill\" style=\"width: 60%;\"></div>\n                            </div>\n                            <div>\n                                <div class=\"sub-text\">Total Competencies: {{totalCompetencieObj?.total}}</div>\n                            </div>\n                            <div class=\"count\">\n                                <!-- {{competenciesCount?.total}} -->\n                            </div>\n                        </div>\n                        <div class=\"outside-layer-behavioral\">\n                            <div class=\"horizontal-flex mt-2\">\n                                <div>\n                                    <svg class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\"\n                                        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n                                        stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n                                        <path d=\"M15.5 17a4 4 0 0 1-5 0\" />\n                                        <path d=\"M13 14h.01\" />\n                                        <path d=\"M11 11h.01\" />\n                                        <path d=\"M17 14h.01\" />\n                                        <path d=\"M13 10h.01\" />\n                                        <path d=\"M13 18h.01\" />\n                                        <path d=\"M13 6h.01\" />\n                                        <path d=\"M17 18h.01\" />\n                                        <path d=\"M17 6h.01\" />\n                                        <path d=\"M21 12a9 9 0 0 1-9 9a9 9 0 0 1-9-9a9 9 0 0 1 9-9a9 9 0 0 1 9 9z\" />\n                                    </svg>\n                                </div>\n                                <div>\n                                    <div class=\"count\">{{totalCompetencieObj?.behavioral}}</div>\n                                </div>\n                            </div>\n\n                            <div class=\"mt-2\">\n                                <div class=\"sub-heading\">\n                                    <p>Behavioral Competencies</p>\n                                </div>\n                            </div>\n                            <div class=\"progress-bar mt-2\">\n                                <div class=\"progress-bar-fill-behavioural\" style=\"width: 60%;\"></div>\n                            </div>\n                            <div>\n                                <div class=\"sub-text\">Behavioral Competencies: {{totalCompetencieObj?.behavioral}}\n                                </div>\n                            </div>\n\n                        </div>\n                        <div class=\"outside-layer-functional\">\n                            <div class=\"horizontal-flex mt-2\">\n                                <div>\n                                    <svg class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\"\n                                        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n                                        stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n                                        <path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\" />\n                                        <path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\" />\n                                    </svg>\n                                </div>\n                                <div>\n                                    <div class=\"count\">{{totalCompetencieObj?.functional}}</div>\n                                </div>\n                            </div>\n\n                            <div class=\"mt-2\">\n                                <div class=\"sub-heading\">\n                                    <p>Functional Competencies</p>\n                                </div>\n                            </div>\n                            <div class=\"progress-bar mt-2\">\n                                <div class=\"progress-bar-fill-functional\" style=\"width: 60%;\"></div>\n                            </div>\n                            <div>\n                                <div class=\"sub-text\">Functional Competencies: {{totalCompetencieObj?.functional}}</div>\n                            </div>\n\n\n                        </div>\n                        <div class=\"outside-layer-domain\">\n                            <div class=\"horizontal-flex mt-2\">\n                                <div>\n                                    <svg class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\"\n                                        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n                                        stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n                                        <circle cx=\"12\" cy=\"12\" r=\"10\" />\n                                        <circle cx=\"12\" cy=\"12\" r=\"6\" />\n                                        <circle cx=\"12\" cy=\"12\" r=\"2\" />\n                                    </svg>\n                                </div>\n                                <div>\n                                    <div class=\"count\">{{totalCompetencieObj?.domain}}</div>\n                                </div>\n                            </div>\n\n                            <div class=\"mt-2\">\n                                <div class=\"sub-heading\">\n                                    <p>Domain Competencies</p>\n                                </div>\n                            </div>\n                            <div class=\"progress-bar mt-2\">\n                                <div class=\"progress-bar-fill-domain\" style=\"width: 60%;\"></div>\n                            </div>\n                            <div>\n                                <div class=\"sub-text\">Domain Competencies: {{totalCompetencieObj?.domain}}</div>\n                            </div>\n\n                        </div>\n                    </div>\n                    <!-- <div class=\"mb-8\">\n                <h2 class=\"text-2xl font-bold text-gray-900 mb-6nheading\">Competency Overview</h2>\n                <div class=\"competency-grid\">\n                  <ng-container *ngFor=\"let kpi of overallKPIs;\">\n                    <div class=\"bg-white rounded-xl  outside-layer-total p-6 border-l-4 hover:shadow-xl transition-shadow\" [style.border-left-color]=\"kpi.color\">\n                      <div class=\"flex items-center justify-between mb-4 inside-layer\">\n                        <div [class]=\"'p-3 rounded-lg ' + kpi.bgColor\">\n                          <ng-container [ngSwitch]=\"kpi.name\">\n                            <svg *ngSwitchCase=\"'Behavioral Competencies'\" class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n                              <path d=\"M15.5 17a4 4 0 0 1-5 0\"/>\n                              <path d=\"M13 14h.01\"/><path d=\"M11 11h.01\"/><path d=\"M17 14h.01\"/><path d=\"M13 10h.01\"/>\n                              <path d=\"M13 18h.01\"/><path d=\"M13 6h.01\"/><path d=\"M17 18h.01\"/><path d=\"M17 6h.01\"/>\n                              <path d=\"M21 12a9 9 0 0 1-9 9a9 9 0 0 1-9-9a9 9 0 0 1 9-9a9 9 0 0 1 9 9z\"/>\n                            </svg>\n          \n                            <svg *ngSwitchCase=\"'Functional Competencies'\" class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n                              <path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"/><path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"/>\n                            </svg>\n          \n                            <svg *ngSwitchCase=\"'Domain Competencies'\" class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n                              <circle cx=\"12\" cy=\"12\" r=\"10\"/><circle cx=\"12\" cy=\"12\" r=\"6\"/><circle cx=\"12\" cy=\"12\" r=\"2\"/>\n                            </svg>\n          \n                            <svg *ngSwitchCase=\"'Total Competencies'\" class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n                              <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"/>\n                              <path d=\"M14 2v6h6\"/><path d=\"M16 13H8\"/><path d=\"M16 17H8\"/><path d=\"M10 9H8\"/>\n                            </svg>\n                            \n                          </ng-container>\n                        </div>\n                        <div class=\"text-right\">\n                          <div class=\"text-2xl font-bold text-gray-900\">{{kpi.total}}</div>\n                        </div>\n                      </div>\n                      <h3 class=\"text-gray-900 font-semibold mb-2 heading\">{{kpi.name}}</h3>\n                      <div class=\"w-full bg-gray-200 rounded-full h-3\">\n                        <div class=\"h-3 rounded-full transition-all duration-500\"\n                             [style.width.%]=\"kpi.avgCompletion\"\n                             [style.background-color]=\"kpi.color\">\n                        </div>\n                      </div>\n                      <p class=\"text-sm text-gray-500 mt-2\">Total Competencies: {{kpi.total}}</p>\n                    </div>\n                  </ng-container>\n                </div>\n              </div> -->\n\n                    <!-- Designation Reports -->\n                    <div class=\"space-y-8 mt-4\">\n                        <h2 class=\"text-2xl font-bold text-gray-900 mb-6 heading\">Detailed Competency Framework by\n                            Designation</h2>\n\n                        <ng-container *ngFor=\"let designation of designationData;\">\n                            <div class=\"bg-white rounded-xl  overflow-hidden section-shadow\">\n                                <!-- Header -->\n                                <div\n                                    class=\"bg-gradient-to-r from-indigo-600 to-blue-600 text-white p-6 heading-with-bg\">\n                                    <div class=\"flex items-center justify-between\">\n                                        <div>\n                                            <h3 class=\"text-2xl font-bold mb-2 heading-bg\">{{designation.designation}}\n                                            </h3>\n                                            <p class=\"text-indigo-100 mb-1\">Wing/Division: {{designation.wing}}</p>\n                                        </div>\n                                        <div class=\"flex items-center space-x-4 competency-count-by-designation\">\n                                            <span class=\"font-semibold text-sm\">Behavioral:\n                                                {{designation.behavioralCompetencies.length}} total</span>\n                                            <span class=\"font-semibold text-sm\">Functional:\n                                                {{designation.functionalCompetencies.length}} total</span>\n                                            <span class=\"font-semibold text-sm\">Domain:\n                                                {{designation.domainCompetencies.length}} total</span>\n                                        </div>\n                                    </div>\n                                </div>\n\n                                <!-- Body -->\n                                <div class=\"p-4 section-shadow\">\n                                    <!-- Roles -->\n                                    <div class=\"mb-6\">\n                                        <h4 class=\"text-xl font-semibold text-gray-900 mb-3 flex items-center\">\n                                            <svg class=\"h-5 w-5 mr-2 text-indigo-600 icon-sm\" fill=\"none\"\n                                                viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\n                                                    d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\" />\n                                            </svg>\n                                            Roles & Responsibilities\n                                        </h4>\n                                        <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2\">\n                                            <div *ngFor=\"let role of designation.rolesResponsibilities; let i = index\"\n                                                class=\"bg-gray-50 p-2 rounded border-l-3 border-indigo-500\">\n                                                <p class=\"text-sm text-gray-700 leading-relaxed\">{{role}}</p>\n                                            </div>\n                                        </div>\n                                    </div>\n                                    <!-- Activities -->\n                                    <div class=\"mb-6 mt-4\">\n                                        <h4 class=\"text-xl font-semibold text-gray-900 mb-3 flex items-center\">\n                                            <svg class=\"h-5 w-5 mr-2 text-indigo-600 icon-sm\" fill=\"none\"\n                                                viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\n                                                    d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\" />\n                                            </svg>\n                                            Activities\n                                        </h4>\n                                        <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2\">\n                                            <div *ngFor=\"let role of designation.activities; let i = index\"\n                                                class=\"bg-gray-50 p-2 rounded border-l-3 border-indigo-500\">\n                                                <p class=\"text-sm text-gray-700 leading-relaxed\">{{role}}</p>\n                                            </div>\n                                        </div>\n                                    </div>\n                                    <div class=\"page-break\"></div>\n                                    <!-- Competencies -->\n                                    <div class=\"competencis-grid mt-4\">\n                                        <!-- Behavioral -->\n                                        <div class=\"bg-blue-50 rounded-lg p-3 competencies-grid-3\">\n                                            <h4 class=\"font-semibold text-blue-800 text-base mb-2\">Behavioral</h4>\n                                            <div class=\"space-y-1 grid-list-item grid-list-item-behavioral\">\n                                                <div *ngFor=\"let comp of designation.behavioralCompetencies; let i = index\"\n                                                    class=\"bg-white p-1.5 rounded text-sm text-gray-700 border-l-2 border-blue-400\">\n                                                    {{comp}}\n                                                    <div class=\"flex-col-theme\">\n                                                    \n                                                    <span class=\"competency-tags\">\n                                                        <span *ngIf=\"designation.behavioralSetForProficiencyLevel[i]\"\n                                                        class=\"proficiency-tag\"\n                                                        [ngClass]=\"designation.behavioralSetForProficiencyLevel[i]?.toLowerCase()\"\n                                                        [matTooltip]=\"designation.behavioralSetForProficiencyLevelRationale[i]\"\n                                                        >\n                                                        {{ designation.behavioralSetForProficiencyLevel[i] }}\n                                                        </span>\n\n                                                        \n                                                    </span>\n                                                    \n                                                    <span class=\"competency-tags\">\n                                                        <span *ngIf=\"designation.behavioralSetForDeliveryMode[i]\"\n                                                        class=\"delivery-mode-tag\"\n                                                        [ngClass]=\"designation.behavioralSetForDeliveryMode[i]?.toLowerCase()\"\n                                                        [matTooltip]=\"designation.behavioralSetForDeliveryModeRationale[i]\"\n                                                        >\n                                                        {{ designation.behavioralSetForDeliveryMode[i] }}\n                                                        </span>\n\n                                                       \n                                                    </span>\n                                                    </div>\n                                                </div>\n                                              \n                                            </div>\n                                            \n                                            <div class=\"mt-2 text-sm text-blue-600 font-medium\">\n                                                {{designation.behavioralCompetencies.length}} total\n                                            </div>\n                                        </div>\n\n                                        <!-- Functional -->\n                                        <div class=\"bg-green-50 rounded-lg p-3 competencies-grid-3\">\n                                            <h4 class=\"font-semibold text-green-800 text-base mb-2\">Functional</h4>\n                                            <div class=\"space-y-1 grid-list-item grid-list-item-functional\">\n                                                <div *ngFor=\"let comp of designation.functionalCompetencies; let i = index\"\n                                                    class=\"bg-white p-1.5 rounded text-sm text-gray-700 border-l-2 border-green-400\">\n                                                    {{comp}}\n                                                    <div class=\"flex-col-theme\">\n                                                    \n                                                    <span class=\"competency-tags\">\n                                                        <span *ngIf=\"designation.functionalSetForProficiencyLevel[i]\"\n                                                        class=\"proficiency-tag\"\n                                                        [ngClass]=\"designation.functionalSetForProficiencyLevel[i]?.toLowerCase()\"\n                                                        [matTooltip]=\"designation.functionalSetForProficiencyLevelRationale[i]\"\n                                                        >\n                                                        {{ designation.functionalSetForProficiencyLevel[i] }}\n                                                        </span>\n\n                                                        \n                                                    </span>\n                                                    \n                                                    <span class=\"competency-tags\">\n                                                        <span *ngIf=\"designation.functionalSetForDeliveryMode[i]\"\n                                                        class=\"delivery-mode-tag\"\n                                                        [ngClass]=\"designation.functionalSetForDeliveryMode[i]?.toLowerCase()\"\n                                                        [matTooltip]=\"designation.functionalSetForDeliveryModeRationale[i]\"\n                                                        >\n                                                        {{ designation.functionalSetForDeliveryMode[i] }}\n                                                        </span>\n\n                                                       \n                                                    </span>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                            <div class=\"mt-2 text-sm text-green-600 font-medium\">\n                                                {{designation.functionalCompetencies.length}} total\n                                            </div>\n                                        </div>\n\n                                        <!-- Domain -->\n                                        <div class=\"bg-purple-50 rounded-lg p-3 competencies-grid-3\">\n                                            <h4 class=\"font-semibold text-purple-800 text-base mb-2\">Domain</h4>\n                                            <div class=\"space-y-1 grid-list-item grid-list-item-domain\">\n                                                <div *ngFor=\"let comp of designation.domainCompetencies; let i = index\"\n                                                    class=\"bg-white p-1.5 rounded text-sm text-gray-700 border-l-2 border-purple-400\">\n                                                    {{comp}}\n                                                    <div class=\"flex-col-theme\">\n                                                    \n                                                    <span class=\"competency-tags\">\n                                                        <span *ngIf=\"designation.domainSetForProficiencyLevel[i]\"\n                                                        class=\"proficiency-tag\"\n                                                        [ngClass]=\"designation.domainSetForProficiencyLevel[i]?.toLowerCase()\"\n                                                        [matTooltip]=\"designation.domainSetForProficiencyLevelRationale[i]\"\n                                                        >\n                                                        {{ designation.domainSetForProficiencyLevel[i] }}\n                                                        </span>\n\n                                                        \n                                                    </span>\n                                                    \n                                                    <span class=\"competency-tags\">\n                                                        <span *ngIf=\"designation.domainSetForDeliveryMode[i]\"\n                                                        class=\"delivery-mode-tag\"\n                                                        [ngClass]=\"designation.domainSetForDeliveryMode[i]?.toLowerCase()\"\n                                                        [matTooltip]=\"designation.domainSetForDeliveryModeRationale[i]\"\n                                                        >\n                                                        {{ designation.domainSetForDeliveryMode[i] }}\n                                                        </span>\n\n                                                       \n                                                    </span>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                            <div class=\"mt-2 text-sm text-purple-600 font-medium\">\n                                                {{designation.domainCompetencies.length}} total\n                                            </div>\n                                        </div>\n                                    </div>\n                                    <!-- Adding courses -->\n                                    <div class=\"cbp mt-4\"\n                                        *ngIf=\"designation.selectedCourses?.length && openedFrom === 'acbp'\">\n                                        <h4 class=\"text-xl font-semibold text-gray-900 mb-3 flex items-center\">\n                                            <svg class=\"h-5 w-5 mr-2 text-indigo-600 icon-sm\" fill=\"none\"\n                                                viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\n                                                    d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\" />\n                                            </svg>\n                                            Courses\n                                        </h4>\n                                        <div class=\"course-list-container\">\n                                            <div class=\"course-list-item\"\n                                                *ngFor=\"let item of designation.selectedCourses; let i = index\">\n                                                <div class=\"course-header\">\n                                                    <div class=\"checked-course-container\">\n\n                                                        <div>\n                                                            <div class=\"course-pill\">\n                                                                <div class=\"course-pill-text\">\n                                                                    <span><img\n                                                                            src=\"assets/icons/course.svg\"></span>&nbsp;<span>Course</span>\n                                                                </div>\n                                                            </div>\n                                                        </div>\n\n                                                    </div>\n                                                    <div *ngIf=\"item?.rationale && !item?.is_public\">\n                                                        <div class=\"ai-recommened-pill-green\">\n                                                            <div class=\"ai-recommened-pill-green-text\">\n                                                                <span class=\"ai-loader-icon\"><img\n                                                                        src=\"assets/icons/ai-loader.gif\"></span>\n\n                                                                <span>AI Recommended - iGOT </span>\n\n                                                            </div>\n                                                        </div>\n                                                        <div class=\"ai-recommened-pill-orange mt-2\"\n                                                            *ngIf=\"item?.platform\">\n                                                            <div class=\"ai-recommened-pill-orange-text\">\n                                                                <span class=\"ai-loader-icon\"><img\n                                                                        src=\"assets/icons/ai-loader.gif\"></span>\n                                                                <a class=\"cursor-pointer\" [href]=\"item?.public_link\"\n                                                                    target=\"_blank\"><span>Platform -\n                                                                        {{item?.platform}}</span></a>\n                                                            </div>\n                                                        </div>\n                                                        <div class=\"ai-recommened-pill-orange mt-2\"\n                                                            *ngIf=\"item?.organisation?.length\">\n                                                            <div class=\"ai-recommened-pill-orange-text\">\n                                                                <span class=\"ai-loader-icon\"><img\n                                                                        src=\"assets/icons/ai-loader.gif\"></span>\n                                                                <span>Provider - {{item?.organisation[0]}}</span>\n                                                            </div>\n                                                        </div>\n                                                    </div>\n                                                    <div *ngIf=\"item?.rationale && item?.is_public\">\n                                                        <div class=\"ai-recommened-pill-public\">\n                                                            <div class=\"ai-recommened-pill-public-text\">\n                                                                <span class=\"ai-loader-icon\"><img\n                                                                        src=\"assets/icons/ai-loader.gif\"></span>\n\n                                                                <span>AI Recommended - Public </span>\n\n                                                            </div>\n                                                        </div>\n                                                        <div class=\"ai-recommened-pill-orange mt-2\"\n                                                            *ngIf=\"item?.platform\">\n                                                            <div class=\"ai-recommened-pill-orange-text\">\n                                                                <span class=\"ai-loader-icon\"><img\n                                                                        src=\"assets/icons/ai-loader.gif\"></span>\n                                                                <a class=\"cursor-pointer\" [href]=\"item?.public_link\"\n                                                                    target=\"_blank\"><span>Platform -\n                                                                        {{item?.platform}}</span></a>\n                                                            </div>\n                                                        </div>\n                                                        <div class=\"ai-recommened-pill-orange mt-2\"\n                                                            *ngIf=\"item?.organisation?.length\">\n                                                            <div class=\"ai-recommened-pill-orange-text\">\n                                                                <span class=\"ai-loader-icon\"><img\n                                                                        src=\"assets/icons/ai-loader.gif\"></span>\n                                                                <span>Provider - {{item?.organisation[0]}}</span>\n                                                            </div>\n                                                        </div>\n                                                    </div>\n                                                    <div *ngIf=\"!item?.rationale\">\n                                                        <div class=\"ai-recommened-pill-gray\">\n                                                            <div class=\"ai-recommened-pill-gray-text\">\n                                                                <span class=\"ai-loader-icon\"><img\n                                                                        src=\"assets/icons/ai-loader.gif\"></span>\n\n                                                                <span>Manually Suggested - iGOT </span>\n\n                                                            </div>\n                                                        </div>\n                                                        <div class=\"ai-recommened-pill-orange mt-2\"\n                                                            *ngIf=\"item?.platform\">\n                                                            <div class=\"ai-recommened-pill-orange-text\">\n                                                                <span class=\"ai-loader-icon\"><img\n                                                                        src=\"assets/icons/ai-loader.gif\"></span>\n                                                                <a class=\"cursor-pointer\" [href]=\"item?.public_link\"\n                                                                    target=\"_blank\"><span>Platform -\n                                                                        {{item?.platform}}</span></a>\n                                                            </div>\n                                                        </div>\n                                                        <div class=\"ai-recommened-pill-orange mt-2\"\n                                                            *ngIf=\"item?.organisation?.length\">\n                                                            <div class=\"ai-recommened-pill-orange-text\">\n                                                                <span class=\"ai-loader-icon\"><img\n                                                                        src=\"assets/icons/ai-loader.gif\"></span>\n                                                                <span>Provider - {{item?.organisation[0]}}</span>\n                                                            </div>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                                <div class=\"course-title mt-4\">\n                                                    <div>\n                                                        <div *ngIf=\"item?.course\">{{item?.course}}</div>\n                                                        <div *ngIf=\"item?.name\">{{item?.name}}</div>\n                                                    </div>\n                                                </div>\n                                                <div class=\"course-desc mt-2\">\n                                                    <div *ngIf=\"isPDFDownload\">\n                                                        <div>{{item?.rationale}}</div>\n                                                    </div>\n                                                </div>\n                                                <div class=\"mt-3\"\n                                                    *ngIf=\"getCompetenciesByType('Behavioural',item)?.length\">\n                                                    <div class=\"competency-sub-heading\">Behavioral Competencies</div>\n                                                    <ul class=\"competency-list mt-1\">\n                                                        <li class=\"behavioural-pill\"\n                                                            *ngFor=\"let comp of getDisplayedCompetencies('Behavioural',item)\">\n                                                            <span class=\"competency-text\"> {{ comp.competencyThemeName\n                                                                }} -\n                                                                {{\n                                                                comp.competencySubThemeName }} </span>\n                                                        </li>\n                                                        <li *ngIf=\"hasMoreThanTwo('Behavioural',item)\"\n                                                            class=\"show-more-competency\">\n                                                            <span class=\"show-more-link cursor-pointer\"\n                                                                (click)=\"toggleCompetencies('Behavioural',item)\">\n                                                                {{ isExpanded('Behavioural',item) ? 'Show Less' : '+' +\n                                                                getRemainingCount('Behavioural',item) + ' More' }}\n                                                            </span>\n                                                        </li>\n                                                    </ul>\n                                                </div>\n                                                <div class=\"mt-2\"\n                                                    *ngIf=\"getCompetenciesByType('Functional',item)?.length\">\n                                                    <div class=\"competency-sub-heading\">Functional Competencies</div>\n                                                    <ul class=\"competency-list mt-1\">\n                                                        <li class=\"functional-pill\"\n                                                            *ngFor=\"let comp of getDisplayedCompetencies('Functional',item)\">\n                                                            <span class=\"competency-text\"> {{ comp.competencyThemeName\n                                                                }} -\n                                                                {{\n                                                                comp.competencySubThemeName }} </span>\n                                                        </li>\n                                                        <li *ngIf=\"hasMoreThanTwo('Functional',item)\"\n                                                            class=\"show-more-competency\">\n                                                            <span class=\"show-more-link cursor-pointer\"\n                                                                (click)=\"toggleCompetencies('Functional',item)\">\n                                                                {{ isExpanded('Functional',item) ? 'Show Less' : '+' +\n                                                                getRemainingCount('Functional',item) + ' More' }}\n                                                            </span>\n                                                        </li>\n                                                    </ul>\n                                                </div>\n                                                <div class=\"mt-2\" *ngIf=\"getCompetenciesByType('Domain',item)?.length\">\n                                                    <div class=\"competency-sub-heading\">Domain Competencies</div>\n                                                    <ul class=\"competency-list mt-1\">\n                                                        <li class=\"domain-pill\"\n                                                            *ngFor=\"let comp of getDisplayedCompetencies('Domain',item)\">\n                                                            <span class=\"competency-text\"> {{ comp.competencyThemeName\n                                                                }} -\n                                                                {{\n                                                                comp.competencySubThemeName }} </span>\n                                                        </li>\n                                                        <li *ngIf=\"hasMoreThanTwo('Domain',item)\"\n                                                            class=\"show-more-competency\">\n                                                            <span class=\"show-more-link cursor-pointer\"\n                                                                (click)=\"toggleCompetencies('Domain',item)\">\n                                                                {{ isExpanded('Domain',item) ? 'Show Less' : '+' +\n                                                                getRemainingCount('Domain',item) + ' More' }}\n                                                            </span>\n                                                        </li>\n                                                    </ul>\n                                                </div>\n                                                <div class=\"mt-2 d-flex justify-content-between item\">\n                                                    <div class=\"relevancy-container\">\n                                                        <div class=\"relevancy\">Relevancy</div>\n                                                        <div class=\"dash\">-</div>\n                                                        <div class=\"percentage\" *ngIf=\"item?.relevancy\">\n                                                            {{item?.relevancy}}%</div>\n                                                        <div class=\"percentage\" *ngIf=\"!item?.relevancy\">N/A</div>\n                                                    </div>\n\n                                                </div>\n\n                                            </div>\n\n                                        </div>\n                                    </div>\n\n                                    <!-- adding courses -->\n                                </div>\n                            </div>\n                        </ng-container>\n                    </div>\n                </div>\n\n                <!-- Footer -->\n\n            </div>\n            <footer class=\"org-footer\">\n                <div class=\"max-w-7xl mx-auto px-6 flex flex-col md:flex-row items-center justify-between\">\n                    <div class=\"flex items-center space-x-4 mb-4 mt-4 md:mb-0 footer-container\">\n                        <div class=\"footer-logo-container\">\n                            <img src=\"assets/icons/karmayogiLogo-min.png\" alt=\"Karmayogi Bharat Logo\" class=\"h-10\"\n                                style=\"margin-left:20px\" />\n                        </div>\n                        <div style=\"margin-left: 100px;\">\n                            <a href=\"https://karmayogibharat.gov.in\" target=\"_blank\" rel=\"noopener noreferrer\"\n                                class=\"text-sm font-semibold transition-colors\">\n                                karmayogibharat.gov.in\n                            </a>\n                        </div>\n\n\n                    </div>\n                    <div class=\"text-sm text-center md:text-right mb-4\" style=\"margin-left: 100px;\">\n                        <p>&copy; 2025 All Rights Reserved.</p>\n                    </div>\n                </div>\n            </footer>\n        </div>\n        <div class=\"popup-footer\">\n            <div>\n                <input class=\"btn-active\" type=\"button\" value=\"Download as Excel\" (click)=\"downloadCSV()\" />\n            </div>\n            <div>\n                <input class=\"btn-active\" type=\"button\" value=\"Download as PDF\"\n                    (click)=\"downloadPdfFromBE(openedFrom)\" />\n            </div>\n            <div>\n                <input class=\"btn-active\" type=\"button\" value=\"Cancel\" (click)=\"cancelForm()\" />\n            </div>\n        </div>\n    </div>\n    <div class=\"overlay-loader\" *ngIf=\"loading\">\n        <mat-spinner diameter=\"50\"></mat-spinner>\n        <div class=\"loader-message\" *ngIf=\"downloadInProgress\">\n            Download is in progress. Please wait, this may take a while for large files...\n        </div>\n    </div>", styles: ["@charset \"UTF-8\";.container{margin:10px auto}.sub-heading p{color:#000;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.radio-label{color:#000;font-family:Lato;font-size:16px;font-style:normal;font-weight:400;line-height:normal}.radio-btn-group{display:flex;width:32px;height:32px;padding:2px;gap:10px}.label{color:var(--Body-Text-Body-Color, #212529);font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:150%}::ng-deep mat-form-field{background-color:#fff!important;border-radius:25px!important;padding-left:12px;padding-right:12px;height:42px;width:100%}::ng-deep mat-select{border-radius:25px!important;background-color:#fff!important}::ng-deep .mat-select-panel{background-color:#fff!important}::ng-deep .mat-select-panel .mat-option{border-radius:0!important}::ng-deep mat-form-field .mat-form-field-underline{display:none!important}::ng-deep mat-select .mat-select-placeholder{color:#0006;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}::ng-deep mat-select .mat-select-value-text{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;line-height:normal!important;padding-top:0!important;padding-bottom:0!important}::ng-deep mat-select .mat-select-value{display:flex!important;align-items:center!important;height:100%!important}.additional-details textarea{display:flex;padding:16px 16px 0;flex-direction:column;align-items:flex-start;gap:10px;flex:1 0 0;align-self:stretch;width:100%;color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;resize:none}.section-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.btn-disable{border-radius:var(--Radius-Full-Round, 9999999px);opacity:.4;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.btn-group{display:flex;flex-direction:row;justify-content:space-between}.pl-2{padding-left:5px}.search-filter-section{display:flex;flex-direction:row;justify-content:space-between}.search .rsearch{position:relative}.search .search-icon{position:absolute;top:15px;font-size:20px;left:10px}.search .sinput{border-radius:32px;border:1px solid #d5d0d0;padding:15px 36px;font:400 14px Lato;width:800px}.select-map-route-container{display:flex;flex-direction:row}.selected-mapping-route p{color:#1b4ca1;font-family:Lato;font-size:20px;font-style:normal;font-weight:400;line-height:normal;text-decoration-line:underline;text-decoration-style:solid;-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font}.edit-plan{display:flex;padding:4px;justify-content:center;align-items:center;gap:8px;border-radius:4px;background:#1b4ca129;color:#1b4ca1;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;margin-left:10px}.search-container{display:flex;flex-direction:row}.course-container{display:flex;width:100%;padding:16px;flex-direction:column;align-items:flex-start;gap:24px;grid-row:2/span 1;grid-column:1/span 1;border-radius:12px;border:1px solid var(--borders-black-border-16-black, rgba(0, 0, 0, .16));background:#fff}.course-header{display:flex;flex-direction:row;justify-content:space-between;width:100%}.course-pill{display:flex;height:24px;padding:8px;align-items:center;gap:4px;border-radius:16px;border:1px solid var(--borders-border-fill-focussed-4-light-100, #EF951E);background:#fefaf4}.ai-recommened-pill{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);border:1px solid #1B4CA1;background:#1b4ca129}.igot-platform-pill{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);border:1px solid #EF951E;background:#ef951e29}.course-title{color:var(--Primary-KB-Primary-Light, #1B4CA1);font-family:Montserrat;font-size:20px;font-style:normal;font-weight:600;line-height:30px}.course-desc{color:#0009;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.relevancy,.competencies-matched{color:var(--accessbility-shades-with-opacity-kb-greys-black-60, rgba(0, 0, 0, .6));font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;align-items:center}.percentage{color:#1d8923;font-family:Lato;font-size:14px;font-style:normal;font-weight:800;line-height:normal}.relevancy-container,.competencies-matched-container{display:flex;flex-direction:row;align-items:center}.dash{padding:0 5px}::ng-deep .mat-radio-checked .mat-radio-inner-circle{background:#1b4ca1!important}.course-list-container{display:flex;flex-wrap:wrap;gap:16px}.course-list-item{flex:0 0 48%;box-sizing:border-box;border:1px solid #ccc;padding:16px;background-color:#fff;border-radius:8px}.checked-course-container{display:flex}.ml-2{margin-left:8px}::ng-deep .mat-checkbox-checked .mat-checkbox-background{background:#1b4ca1!important}.ai-recommened-pill-text,.igot-platform-pill-text{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:700;line-height:normal}.course-pill-text{color:var(--accessbility-shades-without-opacity-kb-greys-black-87, #212121);text-align:center;font-family:Poppins;font-size:12px;font-style:normal;font-weight:400;line-height:normal}.ai-loader-icon img,.igot-platform-icon img{width:15.714px;height:15.714px;flex-shrink:0}.competency-container{display:flex;justify-content:normal;flex-direction:row;gap:16px}.outside-layer-total{display:flex;padding:4px 20px;justify-content:left;align-items:left;gap:6px;border-radius:12px;border-left:2px solid #1B4CA1;border-right:2px solid #1B4CA1;background:#edf1f8;flex-direction:column;width:25%}.outside-layer-functional{display:flex;padding:4px 12px;justify-content:left;align-items:left;gap:16px;border-radius:12px;border-left:2px solid #E24577;border-right:2px solid #E24577;background:#f8d2de;flex-direction:column;width:25%}.outside-layer-domain{display:flex;padding:4px 12px;justify-content:left;align-items:left;gap:16px;border-radius:12px;border-left:2px solid #7B47A4;border-right:2px solid #7B47A4;background:#dfd3e9;flex-direction:column;width:25%}.outside-layer-behavioral{display:flex;padding:4px 12px;justify-content:left;align-items:left;gap:16px;border-radius:12px;border-left:2px solid #F8B861;border-right:2px solid #F8B861;background:#fde8cc;flex-direction:column;width:25%}.inside-layer{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:400;line-height:normal}.suggest-courses-header{display:flex;flex-direction:row;justify-content:space-between}.suggest-course-control{display:flex;flex-direction:row}.course-card-container{width:172px;border-radius:3.307px;border:.827px solid var(--borders-border-8-black, rgba(0, 0, 0, .08));background-color:#fff}.highlight-ai{font-family:Montserrat;font-size:24px;font-style:normal;font-weight:600;line-height:normal;background:linear-gradient(90deg,#3b27ff,#2de3d6);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}.ai-loader-icon-medium img{width:40px;height:40px;flex-shrink:0}.heading{color:#000;font-family:Montserrat;font-size:20px;font-style:normal;font-weight:600;line-height:normal;margin:10px 0}.heading-bg{color:#fff;font-family:Montserrat;font-size:20px;font-style:normal;font-weight:600;line-height:normal;margin:10px 0}.progress-popup{display:flex;flex-direction:column;justify-content:center;align-items:center}.progress-popup .desc{color:#000000de;text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.behavioural-pill{display:flex;padding:0 8px;justify-content:center;align-items:center;gap:10px;border-radius:99px;border:1px solid #F8B861;background:linear-gradient(0deg,#f8b86152 0% 100%),#fff;margin:5px 0}.functional-pill{display:flex;padding:0 8px;justify-content:center;align-items:center;gap:10px;border-radius:99px;border:1px solid #E24577;background:linear-gradient(0deg,#e245773d 0% 100%),#fff;margin:5px 0}.domain-pill{display:flex;padding:0 8px;justify-content:center;align-items:center;gap:10px;border-radius:99px;border:1px solid #7B47A4;background:linear-gradient(0deg,#7b47a43d 0% 100%),#fff;margin:5px 0}.popup-header{display:flex;flex-direction:row;justify-content:space-between}.popup-footer{display:flex;flex-direction:row;justify-content:center}.view-cbp-plan{margin:10px;padding:10px}.view-cbp-plan-popup{padding:24px;max-height:70vh;overflow-y:auto}.section{border-radius:8px;background:#1b4ca114;padding:16px}.popup-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ddd;font-weight:700;flex-shrink:0}.popup-footer{display:flex;justify-content:center;gap:16px;padding:16px 24px;background-color:#fff;flex-shrink:0;position:sticky;bottom:-15px}.section-container{overflow-y:auto;flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;align-items:center}.competency-list{display:flex;flex-direction:row;gap:16px}.competency-text{color:#000;font-family:Lato;font-size:10px;font-style:normal;font-weight:700;line-height:normal}.competency-sub-heading{color:#1b4ca1;font-family:Montserrat;font-size:12px;font-style:normal;font-weight:600;line-height:normal}.cursor-pointer{cursor:pointer}.btn-active{border-radius:var(--Radius-Full-Round, 9999999px);opacity:1;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.custom-textarea{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.overlay-loader{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#ffffffbf;z-index:9999;display:flex;justify-content:center;align-items:center}.grid{display:grid;gap:1.5rem}.grid-cols-1{grid-template-columns:repeat(1,1fr)}@media (min-width: 768px){.md\\:grid-cols-2{grid-template-columns:repeat(2,1fr)}}@media (min-width: 1024px){.lg\\:grid-cols-4{grid-template-columns:repeat(4,1fr)}}.kpi-card{background:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 4px 14px #0000000d;border-left:4px solid transparent;transition:box-shadow .3s ease}.kpi-card:hover{box-shadow:0 8px 24px #0000001a}.kpi-icon{padding:.75rem;border-radius:.5rem;display:flex;align-items:center;justify-content:center}.kpi-text{font-size:1.25rem;font-weight:700}.progress-container{background:#e5e7eb;height:.75rem;border-radius:9999px;margin-top:.5rem}.progress-bar{height:100%;border-radius:9999px;transition:width .4s ease}.competency-block{background-color:#fff;border-radius:12px;box-shadow:0 2px 10px #0000000f;overflow:hidden}.competency-header{padding:1.5rem;background:linear-gradient(to right,#4f46e5,#3b82f6);color:#fff}.competency-header h3{font-size:1.25rem;font-weight:600}.competency-body{padding:1rem}.role-card{background-color:#f9fafb;padding:.5rem;border-left:4px solid #6366f1;border-radius:6px}.role-title{font-size:1rem;font-weight:600;margin-bottom:.75rem;display:flex;align-items:center;color:#1e40af}.comp-section{border-radius:.5rem;padding:.75rem;background-color:#f0f9ff;margin-bottom:1rem}.comp-section h4{font-weight:600;margin-bottom:.5rem}.comp-item{background-color:#fff;border-left:3px solid #3b82f6;padding:.5rem;border-radius:4px;margin-bottom:.25rem;font-size:.875rem}.bg-blue-50{background-color:#fde8cc;border-radius:4px}.bg-green-50{background-color:#f8d2de;border-radius:4px}.bg-purple-50{background-color:#dfd3e9;border-radius:4px}.text-blue-800{color:#1e3a8a}.text-green-800{color:#ff1493}.text-purple-800{color:#6b21a8}.border-blue-400{border-color:#60a5fa}.border-green-400{border-color:#34d399}.border-purple-400{border-color:#c084fc}.text-sm{font-size:.875rem}.text-gray-700{color:#374151}.icon-sm{width:24px;height:24px}.heading-with-bg{background:#4f46e5;padding:24px;border-radius:8px 8px 0 0}.competencis-grid{display:flex;flex-direction:row;justify-content:space-between;gap:16px}.section-shadow{padding:16px;border-radius:4px;background:#fff;box-shadow:0 2px 4px #0000001a,0 1px 10px #0000000f}.count{color:#1b4ca1;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.competency-grid{display:flex;flex-direction:row;gap:16px;justify-content:space-between}.text-blue-600{color:#1b4ca1;font-weight:600}.text-green-600{color:#ff1493;font-weight:600}.text-purple-600{color:#6b21a8;font-weight:600}.horizontal-flex{display:flex;align-items:center;justify-content:space-between;width:100%}.progress-bar{width:100%;height:10px;background-color:#e0e0e0;border-radius:10px;overflow:hidden;box-shadow:inset 0 1px 3px #0003}.progress-bar-fill{height:100%;background-color:#1b4ca1;width:0;border-radius:10px 0 0 10px;transition:width .5s ease-in-out}.progress-bar-fill-behavioural{height:100%;background-color:#f8b861;width:0;border-radius:10px 0 0 10px;transition:width .5s ease-in-out}.progress-bar-fill-functional{height:100%;background-color:#e24577;width:0;border-radius:10px 0 0 10px;transition:width .5s ease-in-out}.progress-bar-fill-domain{height:100%;background-color:#7b47a4;width:0;border-radius:10px 0 0 10px;transition:width .5s ease-in-out}.sub-text{font-size:12px;font-weight:600;font-family:Lato}.competency-count-by-designation{display:flex;gap:10px;flex-direction:row}.competencies-grid-3{width:33%}.grid-list-item div{padding:5px 10px;margin:10px 0}.grid-list-item-behavioral div{border-left:2px solid darkorange}.grid-list-item-functional div{border-left:2px solid #ff1493}.grid-list-item-domain div{border-left:2px solid #6b21a8}.header-flex{display:flex;flex-direction:row;width:100%;justify-content:space-between;gap:30px}.header-border{border-bottom:1px solid #ccc;margin:10px;padding:10px}.text-gray-600{font-family:Lato;font-size:14px;font-weight:600}.image-container .h-10,.image-container .h-15{height:50px}.image-container{display:flex;gap:10px;flex-direction:row}.org-footer{display:flex;flex-direction:row;background:#fff;gap:16px;color:#000;width:100%;justify-content:center;align-items:center;border-top:1px solid #ccc;border-bottom:1px solid #ccc}.dialog-scrollable-content{max-height:70vh;overflow-y:auto}.org-footer a{color:#000!important}h1{font-size:1.75rem!important}@media print{.org-footer,.header-border{page-break-inside:avoid}}.header-border{padding-top:10px;padding-bottom:10px;background-color:#fff}.footer-container{display:flex;justify-content:center;align-items:center;flex-direction:column}.footer-logo-container{display:flex;justify-content:center;align-items:center;flex-direction:row;width:30%}.avoid-page-break{page-break-inside:avoid;break-inside:avoid}.pdf-clean *{box-shadow:none!important;filter:none!important;transform:none!important}.view-cbp-plan.pdf-clean{overflow:visible!important;max-height:none!important}.section-container,.popup-container,.outside-layer-total,.outside-layer-behavioral,.outside-layer-functional,.outside-layer-domain,.section-shadow{page-break-inside:avoid!important;break-inside:avoid!important}.bg-gradient-to-br{background:none!important}.section-container,.outside-layer-total,.outside-layer-behavioral,.outside-layer-functional,.outside-layer-domain,.competencis-grid{page-break-inside:avoid}.page-break{page-break-before:always}.cbp .container{margin:10px auto}.cbp .sub-heading p{color:#000;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.cbp .ministry-heading{color:#1b4ca1;font-family:Montserrat;font-size:24px;font-style:normal;font-weight:600;line-height:normal}.cbp .radio-label{color:#000;font-family:Lato;font-size:16px;font-style:normal;font-weight:400;line-height:normal}.cbp .radio-btn-group{display:flex;width:32px;height:32px;padding:2px;gap:10px}.cbp .label{color:var(--Body-Text-Body-Color, #212529);font-family:Lato;font-size:16px;font-style:normal;font-weight:700;line-height:150%}.cbp ::ng-deep mat-form-field{background-color:#fff!important;border-radius:25px!important;padding-left:12px;padding-right:12px;height:42px;width:100%}.cbp ::ng-deep mat-select{border-radius:25px!important;background-color:#fff!important}.cbp ::ng-deep .mat-select-panel{background-color:#fff!important}.cbp ::ng-deep .mat-select-panel .mat-option{border-radius:0!important}.cbp ::ng-deep mat-form-field .mat-form-field-underline{display:none!important}.cbp ::ng-deep mat-select .mat-select-placeholder{color:#0006;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.cbp ::ng-deep mat-select .mat-select-value-text{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;line-height:normal!important;padding-top:0!important;padding-bottom:0!important}.cbp ::ng-deep mat-select .mat-select-value{display:flex!important;align-items:center!important;height:100%!important}.cbp .additional-details textarea{display:flex;padding:16px 16px 0;flex-direction:column;align-items:flex-start;gap:10px;flex:1 0 0;align-self:stretch;width:100%;color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;resize:none}.cbp .section-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.cbp .btn-disable{border-radius:var(--Radius-Full-Round, 9999999px);opacity:.4;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.cbp .btn-group{display:flex;flex-direction:row;justify-content:space-between}.cbp .pl-2{padding-left:5px}.cbp .search-filter-section{display:flex;flex-direction:row;justify-content:space-between}.cbp .search .rsearch{position:relative}.cbp .search .search-icon{position:absolute;top:15px;font-size:20px;left:10px}.cbp .search .sinput{border-radius:32px;border:1px solid #d5d0d0;padding:15px 36px;font:400 14px Lato;width:800px}.cbp .select-map-route-container{display:flex;flex-direction:row}.cbp .selected-mapping-route p{color:#1b4ca1;font-family:Lato;font-size:20px;font-style:normal;font-weight:400;line-height:normal;text-decoration-line:underline;text-decoration-style:solid;-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font}.cbp .edit-plan{display:flex;padding:4px;justify-content:center;align-items:center;gap:8px;border-radius:4px;background:#1b4ca129;color:#1b4ca1;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;margin-left:10px}.cbp .search-container{display:flex;flex-direction:row}.cbp .course-container{display:flex;width:100%;padding:16px;flex-direction:column;align-items:flex-start;gap:24px;grid-row:2/span 1;grid-column:1/span 1;border-radius:12px;border:1px solid var(--borders-black-border-16-black, rgba(0, 0, 0, .16));background:#fff}.cbp .course-header{display:flex;flex-direction:row;justify-content:space-between;width:100%}.cbp .course-pill{display:flex;height:24px;padding:8px;align-items:center;gap:4px;border-radius:16px;border:1px solid var(--borders-border-fill-focussed-4-light-100, #EF951E);background:#fefaf4}.cbp .ai-recommened-pill-green{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#0080001c}.cbp .ai-recommened-pill-green-text{color:#006400;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.cbp .ai-recommened-pill-public{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#1b4ca129}.cbp .ai-recommened-pill-public-text{color:#1b4ca1;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.cbp .ai-recommened-pill-gray{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#d3d3d3}.cbp .ai-recommened-pill-gray-text{color:#000;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.cbp .ai-recommened-pill-orange{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#ffa50052}.cbp .ai-recommened-pill-orange-text{color:#5a3f0d;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.cbp .ai-recommened-pill-orange-text a{color:#5a3f0d!important;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.cbp .igot-platform-pill{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);border:1px solid #EF951E;background:#ef951e29}.cbp .course-title{color:var(--Primary-KB-Primary-Light, #1B4CA1);font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:22px}.cbp .course-desc{color:#0009;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.cbp .relevancy,.cbp .competencies-matched{color:#6c757d;font-family:Lato;font-size:12px;font-style:normal;font-weight:500;line-height:normal;align-items:center}.cbp .percentage{color:#1b4ca1;font-family:Lato;font-size:14px;font-style:normal;font-weight:600;line-height:normal}.cbp .delete-button input{background-color:#b60a0a;border-radius:10px}.cbp .relevancy-container,.cbp .competencies-matched-container{display:flex;flex-direction:row;align-items:center}.cbp .dash{padding:0 5px}.cbp ::ng-deep .mat-radio-checked .mat-radio-inner-circle{background:#1b4ca1!important}.cbp .course-list-container{display:flex;flex-wrap:wrap;gap:16px;width:100%;padding:1rem}.cbp .course-list-item{flex:1 1 calc(50% - 10px);min-width:350px;max-width:500px;box-sizing:border-box;border:1px solid #e0e0e0;padding:16px;background-color:#fff;border-radius:12px;min-height:auto;box-shadow:0 2px 4px #0000001a;transition:box-shadow .2s ease;display:flex;flex-direction:column}.cbp .course-list-item:hover{box-shadow:0 4px 8px #00000026}.cbp .course-list-item:only-child{flex:1 1 auto;max-width:800px}.cbp .checked-course-container{display:flex;width:60%}.cbp .ml-2{margin-left:8px}.cbp ::ng-deep .mat-checkbox-checked .mat-checkbox-background{background:#1b4ca1!important}.cbp .igot-platform-pill-text{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:700;line-height:normal}.cbp .course-pill-text{color:var(--accessbility-shades-without-opacity-kb-greys-black-87, #212121);text-align:center;font-family:Poppins;font-size:12px;font-style:normal;font-weight:400;line-height:normal}.cbp .ai-loader-icon img,.cbp .igot-platform-icon img{width:15.714px;height:15.714px;flex-shrink:0}.cbp .competency-container{display:flex;justify-content:normal;gap:16px;flex-direction:row}.cbp .outside-layer-total{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #1B4CA1;background:#edf1f8;width:132px}.cbp .outside-layer-functional{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #E24577;background:#f8d2de;width:132px}.cbp .outside-layer-domain{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #7B47A4;background:#dfd3e9;width:132px}.cbp .outside-layer-behavioral{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #F8B861;background:#fde8cc;width:132px}.cbp .inside-layer{color:#1b4ca1;font-family:Lato;font-size:16px;font-style:normal;font-weight:400;line-height:normal}.cbp .count{color:#1b4ca1;font-family:Montserrat;font-size:18px;font-style:normal;font-weight:600;line-height:normal}.cbp .suggest-courses-header{display:flex;flex-direction:row;justify-content:space-between}.cbp .suggest-course-control{display:flex;flex-direction:row}.cbp .course-card-container{width:172px;border-radius:3.307px;border:.827px solid var(--borders-border-8-black, rgba(0, 0, 0, .08));background-color:#fff}.cbp .highlight-ai{font-family:Montserrat;font-size:24px;font-style:normal;font-weight:600;line-height:normal;background:linear-gradient(90deg,#3b27ff,#2de3d6);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}.cbp .ai-loader-icon-medium img{width:40px;height:40px;flex-shrink:0}.cbp .heading{color:#000;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal;margin:10px 0}.cbp .pdf-heading{color:#000;font-family:Montserrat;font-size:18px;font-style:normal;font-weight:600;line-height:normal;margin:10px 0;text-align:center}.cbp .popup-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid #e0e0e0}.cbp .header-left{flex:1}.cbp .header-actions{display:flex;align-items:center;gap:12px}.cbp .regenerate-btn{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:6px;font-size:14px;font-weight:500;min-width:auto}.cbp .regenerate-btn .mat-icon{margin:0;font-size:18px;width:18px;height:18px}.cbp .regenerate-btn .mat-spinner{margin:0}.cbp .regenerate-btn:disabled{opacity:.7;cursor:not-allowed}.cbp .close-btn{padding:8px;border-radius:4px;transition:background-color .2s ease}.cbp .close-btn:hover{background-color:#f5f5f5}.cbp .close-btn .mat-icon{font-size:20px;width:20px;height:20px}.cbp .progress-popup{display:flex;flex-direction:column;justify-content:center;align-items:center}.cbp .progress-popup .desc{color:#000000de;text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.cbp .behavioural-pill{display:flex;padding:2px 6px;justify-content:center;align-items:center;gap:4px;border-radius:16px;border:1px solid #F8B861;background:linear-gradient(0deg,#f8b86152 0% 100%),#fff;margin:2px 4px 2px 0;font-size:12px}.cbp .functional-pill{display:flex;padding:2px 6px;justify-content:center;align-items:center;gap:4px;border-radius:16px;border:1px solid #E24577;background:linear-gradient(0deg,#e245773d 0% 100%),#fff;margin:2px 4px 2px 0;font-size:12px}.cbp .domain-pill{display:flex;padding:2px 6px;justify-content:center;align-items:center;gap:4px;border-radius:16px;border:1px solid #7B47A4;background:linear-gradient(0deg,#7b47a43d 0% 100%),#fff;margin:2px 4px 2px 0;font-size:12px}.cbp .popup-header{display:flex;flex-direction:row;justify-content:space-between}.cbp .popup-footer{display:flex;flex-direction:row;justify-content:end}.cbp .view-cbp-plan{margin:10px;padding:10px}.cbp .view-cbp-plan-popup{padding:24px;max-height:70vh;overflow-y:auto}.cbp .section{border-radius:8px;background:#1b4ca114;padding:16px}.cbp .popup-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ddd;font-weight:700;flex-shrink:0}.cbp .popup-footer{display:flex;justify-content:flex-end;gap:16px;padding:16px 24px;border-top:1px solid #ddd;background-color:#fff;flex-shrink:0;position:sticky;bottom:0}.cbp .section-container{overflow-y:auto;flex:1 1 auto}.cbp .competency-list{display:flex;flex-direction:row;gap:0px;flex-wrap:wrap;margin:0;padding:0;list-style:none}.cbp .competency-text{color:#000;font-family:Lato;font-size:12px;font-style:normal;font-weight:400;line-height:normal;padding:3px 6px}.cbp .competency-text-behavioral{color:#654321;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.cbp .competency-text-functional{color:#b01669;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.cbp .competency-text-domain{color:#301934;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.cbp .competency-sub-heading{color:#1b4ca1;font-family:Montserrat;font-size:14px;font-style:normal;font-weight:600;line-height:normal}.cbp .cursor-pointer{cursor:pointer}.cbp .btn-active{border-radius:var(--Radius-Full-Round, 9999999px);opacity:1;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.cbp .custom-textarea{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.cbp .overlay-loader{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#ffffffbf;z-index:9999;display:flex;justify-content:center;align-items:center;gap:16px}.cbp .loader-message{color:#1b4ca1;font-family:Lato;font-size:16px;font-weight:600;text-align:center;padding:0 16px}.cbp .competencis-grid{display:flex;flex-direction:row;justify-content:space-between;gap:16px}.cbp .grid-list-item-behavioral div{border-left:2px solid darkorange}.cbp .grid-list-item-functional div{border-left:2px solid #ff1493}.cbp .grid-list-item-domain div{border-left:2px solid #6b21a8}.cbp .competencies-grid-3{width:33%}.cbp .bg-blue-50{background-color:#fde8cc;border-radius:4px}.cbp .bg-green-50{background-color:#f8d2de;border-radius:4px}.cbp .bg-purple-50{background-color:#dfd3e9;border-radius:4px}.cbp .grid-list-item div{padding:5px 10px;margin:10px 0}.cbp .course-pill-container{display:flex;gap:8px}.cbp .relevancy-pill-green{display:flex;padding:4px 8px;align-items:center;gap:4px;border-radius:16px;border:1px solid #e0e0e0;background:#f8f9fa}.cbp .mt-1{margin-top:.25rem}.cbp .mt-2{margin-top:.5rem}.cbp .mt-3{margin-top:.75rem}.cbp .show-more-competency{display:inline-flex;align-items:center}.cbp .show-more-link{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:500;line-height:normal;margin:2px 4px 2px 0;text-decoration:none}.cbp .show-more-link:hover{text-decoration:underline}.cbp .course-content{flex:1;display:flex;flex-direction:column}.cbp .course-footer{margin-top:auto;padding-top:12px;display:flex;justify-content:space-between}.cbp ::ng-deep .mdc-tab__text-label{font-weight:700;font-family:Montserrat!important;font-size:16px;color:#000!important;text-transform:capitalize}.cbp .competency-tag{display:inline-block;padding:.25rem .75rem;border-radius:9999px;font-size:.75rem;font-weight:500;margin-right:.5rem;margin-bottom:.5rem}.cbp .menu-list-item.active{background-color:#1b4ca1;color:#fff}.cbp .menu-list-item:hover{background-color:#1b4ca1;color:#fff;border-color:#1b4ca1}.cbp .gray-bg{background-color:rgb(248,250,252,var(--tw-bg-opacity, 1));border-radius:8px;border:1px solid #ccc}.cbp .div-count{font-family:Lato;font-size:20px;font-weight:700}.cbp .green-bg{background-color:#0080001c;border:1px solid #006400;border-radius:8px}.cbp .div-green-count{font-family:Lato;font-size:20px;font-weight:700;color:#006400}.cbp .div-green-label{color:#006400;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.cbp .gray-bg-item{background-color:rgb(248,250,252,var(--tw-bg-opacity, 1));border-radius:8px;border:1px solid #ccc;padding:4px 8px;margin:10px}.cbp .add-btn{color:#1b4ca1;font-size:14px;font-family:Lato}.cbp .list-flex{display:flex;flex-direction:row;justify-content:space-between}.cbp .all-category-list .mat-icon{vertical-align:middle}.cbp .course-list-container-flex{display:flex;align-items:flex-start;gap:2rem}.cbp .left-panel{flex:0 0 250px;font-weight:700;text-align:left}.cbp .right-panel{flex:1;display:flex;flex-direction:row;flex-wrap:wrap;gap:20px;align-content:flex-start;justify-content:flex-start}.cbp .category-list-item{font-weight:400;font-size:16px;font-family:Lato;padding:5px}.cbp .right-panel-flex{display:flex;flex:0 0 100%;width:100%;flex-direction:row;flex-wrap:wrap;gap:20px;justify-content:flex-start}.cbp .course-list-container-right-flex{display:flex}.cbp .no-gaps-message{display:flex;flex-direction:column;align-items:center;padding:24px;background:linear-gradient(135deg,#4caf501a,#81c7841a);border:2px solid #4CAF50;border-radius:16px;margin:16px 0}.cbp .no-gaps-message .success-icon{font-size:25px;color:#4caf50;margin-bottom:16px}.cbp .no-gaps-message h4{color:#2e7d32;font-family:Montserrat;font-size:20px;font-weight:600;margin:0 0 8px;text-align:center}.cbp .no-gaps-message p{color:#388e3c;font-family:Lato;font-size:14px;font-weight:400;margin:0;text-align:center;line-height:1.5}.cbp .section-header-improved{display:flex;flex-direction:column;gap:16px}.cbp .search-and-buttons-container{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.cbp .search-container-compact{flex:0 0 auto;min-width:280px}.cbp .search-container-compact .rsearch{position:relative;display:flex;align-items:center}.cbp .search-container-compact .search-icon{position:absolute;left:12px;color:#666;font-size:20px;z-index:1}.cbp .search-container-compact .sinput-compact{border-radius:25px;border:1px solid #d5d0d0;padding:8px 12px 8px 40px;height:32px;width:100%;font:400 14px Lato;box-sizing:border-box;transition:border-color .3s ease}.cbp .search-container-compact .sinput-compact:focus{outline:none;border-color:#1b4ca1;box-shadow:0 0 0 2px #1b4ca11a}.cbp .search-container-compact .sinput-compact::placeholder{color:#999}.cbp .btn-group-compact{display:flex;gap:8px;flex:0 0 auto}.cbp .category-list-item{padding:8px 12px!important;border-radius:6px;border:1px solid transparent;transition:all .3s ease;background:#f8f9fa;color:#333;font-family:Lato;font-size:14px!important;font-weight:400!important}.cbp .category-list-item:hover{background:#1b4ca10d;border-color:#1b4ca133}.cbp .category-list-item.selected-theme{background:#1b4ca11a;border-color:#1b4ca1;color:#1b4ca1;font-weight:600!important}.cbp .category-list-item.selected-theme:before{content:\"\\2713  \";color:#1b4ca1;font-weight:700}.cbp .theme-filter-controls{margin-bottom:8px}.cbp .clear-filter-btn{background:#f8f9fa;border:1px solid #ddd;border-radius:20px;padding:4px 12px;font-size:12px;color:#666;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:4px}.cbp .clear-filter-btn:hover{background:#e9ecef;border-color:#adb5bd}.cbp .clear-filter-btn mat-icon{font-size:16px;width:16px;height:16px}.cbp .no-course-found-container{display:flex;justify-content:center;align-items:center;min-height:300px;padding:20px}.cbp .no-course-card{background:linear-gradient(135deg,#f8f9fa,#e9ecef);border:2px dashed #ced4da;border-radius:16px;padding:40px;text-align:center;max-width:500px;box-shadow:0 4px 12px #0000000d}.cbp .no-course-card .no-course-icon{margin-bottom:20px}.cbp .no-course-card .no-course-icon mat-icon{font-size:48px;width:48px;height:48px;color:#6c757d}.cbp .no-course-card .no-course-content h4{color:#495057;font-family:Montserrat;font-size:24px;font-weight:600;margin-bottom:12px}.cbp .no-course-card .no-course-content p{color:#6c757d;font-family:Lato;font-size:16px;line-height:1.5;margin-bottom:12px}.cbp .no-course-card .no-course-content p strong{color:#1b4ca1;font-weight:600}.cbp .no-course-card .suggest-course-btn{background:linear-gradient(135deg,#1b4ca1,#164080);color:#fff;border:none;border-radius:25px;padding:12px 24px;font-family:Lato;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;margin:20px auto 0;transition:all .3s ease;box-shadow:0 4px 12px #1b4ca14d}.cbp .no-course-card .suggest-course-btn:hover{background:linear-gradient(135deg,#164080,#0f2f5f);transform:translateY(-2px);box-shadow:0 6px 16px #1b4ca166}.cbp .no-course-card .suggest-course-btn:active{transform:translateY(0)}.cbp .no-course-card .suggest-course-btn mat-icon{font-size:18px;width:18px;height:18px}.cbp .left-panel{flex:0 0 280px!important;background:#f8f9fa;border-radius:12px;padding:16px;border:1px solid #e9ecef;max-height:600px;overflow-y:auto;font-weight:400!important}@media (max-width: 1200px){.cbp .search-and-buttons-container{flex-direction:column;align-items:stretch}.cbp .search-container-compact{min-width:auto;width:100%}.cbp .btn-group-compact{justify-content:center;flex-wrap:wrap}}@media (max-width: 1200px) and (min-width: 769px){.cbp .course-list-item{flex:1 1 calc(50% - 10px);min-width:300px;max-width:none}}@media (max-width: 768px){.cbp .course-list-container-flex{flex-direction:column}.cbp .left-panel{flex:none!important;max-height:300px}.cbp .course-list-item{flex:0 0 100%;max-width:100%}.cbp .no-course-card{padding:20px}.cbp .no-course-card .no-course-content h4{font-size:20px}.cbp .no-course-card .no-course-content p{font-size:14px}}.cbp ::ng-deep .error-snackbar{background-color:#f44336!important;color:#fff!important;font-weight:500}.cbp ::ng-deep .error-snackbar .mat-simple-snackbar-action{color:#fff!important}.cbp ::ng-deep .session-expired-snackbar{background-color:#ff9800!important;color:#fff!important;font-weight:600}.cbp ::ng-deep .session-expired-snackbar .mat-simple-snackbar-action{color:#fff!important;font-weight:700}.cbp .download-pdf{justify-content:end;display:flex;flex-direction:row}.section-header-improved,.section-header-improved-sec-2{display:flex;flex-direction:row;gap:0px;width:100%}.search-and-buttons-container{display:flex;justify-content:space-between;gap:4px;flex-direction:column;flex-wrap:wrap;width:37%;margin:0 5px}::ng-deep .select-search-panel{border:1px solid #ccc!important;border-radius:12px!important;box-shadow:0 8px 20px #0000001f}:host ::ng-deep .mat-select-arrow-wrapper{margin-top:5px!important}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{color:#ccc}:host ::ng-deep .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick{color:#1b4ca1;border-color:#1b4ca1!important}::ng-deep .select-search-panel .mat-option.mat-selected:not(.mat-option-disabled){background-color:#1b4ca1!important;color:#fff!important}:host ::ng-deep .mat-form-field-appearance-outline{border-radius:25px;border:1px solid #ccc}:host ::ng-deep .mat-form-field-focused .mat-form-field-appearance-outline{border-color:#1b4ca1!important}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-start{border-radius:25px 0 0 25px;border:none!important}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-end{border-right:none!important;border:none!important;border-radius:0 25px 25px 0}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-gap{border:none!important;border-radius:25px}:host::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix{background-color:transparent!important}:host ::ng-deep .search-and-buttons-container .mat-option-text{color:#fff!important}.header-container{display:flex;flex-direction:row;justify-content:space-between;width:100%;margin:10px 0}.right-side-container{display:flex;justify-content:space-between;gap:64px}::ng-deep .language-select .mat-select-trigger{font-weight:400!important}::ng-deep .language-select .mat-select-value{color:#fff!important}:host ::ng-deep .select-search-panel .mat-option-text{color:#fff!important}.competency-tags{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}.proficiency-tag,.delivery-mode-tag{display:inline-flex;align-items:center;justify-content:center;padding:2px 8px;border-radius:16px;font-size:11px;line-height:16px;font-weight:500;white-space:nowrap}.delivery-mode-tag.online{background:#e6f4ea;color:#1a7f45;border:1px solid #9BD3B0}.delivery-mode-tag.offline{background:#fdf0e3;color:#a2590a;border:1px solid #F0C48A}.delivery-mode-tag.blended{background:#efe9fb;color:#5b21b6;border:1px solid #C9B6F0}.proficiency-tag.strategic{background:#1b4ca1;color:#fff;border:none}.proficiency-tag.tactical{background:#5b8def;color:#fff;border:none}.proficiency-tag.operational{background:#dbe6f7;color:#1b4ca1;border:none}.flex-col-theme{display:flex;flex-direction:row;gap:6px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]