@sunbird-cb/cbp-ai 0.1.24 → 0.1.25

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 (24) hide show
  1. package/esm2022/lib/ai-cbp.module.mjs +13 -13
  2. package/esm2022/lib/components/add-course/add-course.component.mjs +5 -5
  3. package/esm2022/lib/components/add-designation/add-designation.component.mjs +5 -5
  4. package/esm2022/lib/components/approval-request-form/approval-request-form.component.mjs +5 -5
  5. package/esm2022/lib/components/approval-requests/approval-requests.component.mjs +7 -7
  6. package/esm2022/lib/components/dashboard/dashboard.component.mjs +6 -6
  7. package/esm2022/lib/components/designation-approval-request-form/designation-approval-request-form.component.mjs +2 -2
  8. package/esm2022/lib/components/edit-cbp-plan/edit-cbp-plan.component.mjs +5 -5
  9. package/esm2022/lib/components/generate-course-recommendation/generate-course-recommendation.component.mjs +8 -8
  10. package/esm2022/lib/components/publish-request-form/publish-request-form.component.mjs +5 -5
  11. package/esm2022/lib/components/reject-item-request-form/reject-item-request-form.component.mjs +3 -3
  12. package/esm2022/lib/components/reject-request-form/reject-request-form.component.mjs +3 -3
  13. package/esm2022/lib/components/review-request/review-request.component.mjs +5 -5
  14. package/esm2022/lib/components/role-mapping-generation/role-mapping-generation.component.mjs +7 -7
  15. package/esm2022/lib/components/role-mapping-list/role-mapping-list.component.mjs +4 -4
  16. package/esm2022/lib/components/suggest-more-courses/suggest-more-courses.component.mjs +4 -4
  17. package/esm2022/lib/components/view-final-cbp-plan/view-final-cbp-plan.component.mjs +5 -5
  18. package/esm2022/lib/modules/upload-document-page/upload-dialog/upload-dialog.component.mjs +2 -2
  19. package/esm2022/lib/modules/upload-document-page/upload-document-page.component.mjs +3 -3
  20. package/fesm2022/sunbird-cb-cbp-ai.mjs +47 -47
  21. package/fesm2022/sunbird-cb-cbp-ai.mjs.map +1 -1
  22. package/lib/ai-cbp.module.d.ts +10 -10
  23. package/package.json +1 -1
  24. package/sunbird-cb-cbp-ai-0.1.24.tgz +0 -0
package/esm2022/lib/components/view-final-cbp-plan/view-final-cbp-plan.component.mjs CHANGED
@@ -11,11 +11,11 @@ import * as i2 from "../../modules/shared/services/shared.service";
11
11
  import * as i3 from "@angular/material/snack-bar";
12
12
  import * as i4 from "@angular/forms";
13
13
  import * as i5 from "@angular/common";
14
- import * as i6 from "@angular/material/form-field";
15
- import * as i7 from "@angular/material/input";
14
+ import * as i6 from "@angular/material/legacy-form-field";
15
+ import * as i7 from "@angular/material/legacy-input";
16
16
  import * as i8 from "@angular/material/icon";
17
- import * as i9 from "@angular/material/select";
18
- import * as i10 from "@angular/material/core";
17
+ import * as i9 from "@angular/material/legacy-select";
18
+ import * as i10 from "@angular/material/legacy-core";
19
19
  import * as i11 from "@angular/material/progress-spinner";
20
20
  export class ViewFinalCbpPlanComponent {
21
21
  constructor(dialogRef, data, dialog, cdr, sharedService, snackBar, fb) {
@@ -866,7 +866,7 @@ export class ViewFinalCbpPlanComponent {
866
866
  }
867
867
  }
868
868
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewFinalCbpPlanComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i1.MatDialog }, { token: i0.ChangeDetectorRef }, { token: i2.SharedService }, { token: i3.MatSnackBar }, { token: i4.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
869
- 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>\n </div>\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>\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>\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}\n"], dependencies: [{ 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: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i10.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i11.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
869
+ 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>\n </div>\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>\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>\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}\n"], dependencies: [{ 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: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i6.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLegacyLabel, selector: "mat-label" }, { kind: "directive", type: i7.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i10.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i11.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
870
870
  }
871
871
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewFinalCbpPlanComponent, decorators: [{
872
872
  type: Component,
package/esm2022/lib/modules/upload-document-page/upload-dialog/upload-dialog.component.mjs CHANGED
@@ -7,7 +7,7 @@ import * as i1 from "@angular/material/dialog";
7
7
  import * as i2 from "../../shared/services/shared.service";
8
8
  import * as i3 from "@angular/material/snack-bar";
9
9
  import * as i4 from "@angular/common";
10
- import * as i5 from "@angular/material/button";
10
+ import * as i5 from "@angular/material/legacy-button";
11
11
  import * as i6 from "@angular/material/icon";
12
12
  import * as i7 from "@angular/material/progress-spinner";
13
13
  import * as i8 from "@angular/material/tooltip";
@@ -177,7 +177,7 @@ export class UploadDialogComponent {
177
177
  });
178
178
  }
179
179
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UploadDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: i2.SharedService }, { token: i3.MatSnackBar }, { token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
180
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UploadDialogComponent, selector: "app-upload-dialog", ngImport: i0, template: "<h2 mat-dialog-title>Upload Document</h2>\n\n<mat-dialog-content>\n\n <!-- <mat-form-field appearance=\"fill\" style=\"width: 100%; border: 1px solid #000;\">\n <input\n matInput\n [(ngModel)]=\"documentName\"\n placeholder=\"Document Name\"\n [disabled]=\"totalFileCount >= MAX_FILES\"\n >\n </mat-form-field> -->\n\n <!-- Upload Box -->\n <div\n class=\"file-upload-box\"\n style=\"margin-top: 30px;\"\n [class.disabled]=\"totalFileCount >= MAX_FILES\"\n (click)=\"totalFileCount < MAX_FILES && fileInput.click()\"\n >\n <input\n type=\"file\"\n #fileInput\n hidden\n multiple\n accept=\".pdf,.doc,.docx\"\n (change)=\"onFileSelected($event)\"\n >\n\n <p *ngIf=\"totalFileCount < MAX_FILES\">\n Click to select files\n </p>\n\n <p *ngIf=\"totalFileCount >= MAX_FILES\" class=\"error-text\">\n Maximum 10 documents allowed\n </p>\n\n <p><strong>Note:</strong> <small>PDF Files Only (Max:25 MB)</small></p>\n </div>\n\n <!-- Selected Files List -->\n <div *ngIf=\"selectedFiles.length > 0\" class=\"file-list\" style=\"margin-top:10px\">\n <p><strong>Selected Files</strong></p>\n\n <div class=\"file-item\" *ngFor=\"let file of selectedFiles; let i = index\">\n <span>{{ file.name }}</span>\n <span (click)=\"removeFile(i)\">\n <mat-icon class=\"file-cross-icon\" matTooltip=\"Remove\" matTooltipPosition=\"above\">close</mat-icon>\n </span>\n </div>\n </div>\n\n</mat-dialog-content>\n\n<div class=\"disclaimer-text\">\n <p>Disclaimer: Please do not upload any confidential documents.</p>\n</div>\n\n<mat-dialog-actions align=\"center\" style=\"margin: 20px 0;\">\n <button mat-button mat-dialog-close>Cancel</button>\n\n <button class=\"primary-btn cursor-pointer\"\n mat-raised-button\n color=\"primary\"\n (click)=\"upload()\"\n [disabled]=\"selectedFiles.length === 0\"\n >\n Upload\n </button>\n</mat-dialog-actions>\n\n<div class=\"overlay-loader\" *ngIf=\"loading\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n</div>\n", styles: [".file-upload-box{border:2px dashed #ccc;padding:20px;text-align:center;cursor:pointer;margin-top:10px}.primary-btn{background-color:#1b4ca1;color:#fff}.disclaimer-text p{font-size:16px;font-family:Lato;font-weight:400;margin-left:24px}.file-cross-icon{height:24px;width:24px;vertical-align:middle;background:#d3d3d3;margin-left:10px;border-radius:25px}:host .mat-mdc-dialog-content{max-height:100vh!important}.cursor-pointer{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] }); }
180
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UploadDialogComponent, selector: "app-upload-dialog", ngImport: i0, template: "<h2 mat-dialog-title>Upload Document</h2>\n\n<mat-dialog-content>\n\n <!-- <mat-form-field appearance=\"fill\" style=\"width: 100%; border: 1px solid #000;\">\n <input\n matInput\n [(ngModel)]=\"documentName\"\n placeholder=\"Document Name\"\n [disabled]=\"totalFileCount >= MAX_FILES\"\n >\n </mat-form-field> -->\n\n <!-- Upload Box -->\n <div\n class=\"file-upload-box\"\n style=\"margin-top: 30px;\"\n [class.disabled]=\"totalFileCount >= MAX_FILES\"\n (click)=\"totalFileCount < MAX_FILES && fileInput.click()\"\n >\n <input\n type=\"file\"\n #fileInput\n hidden\n multiple\n accept=\".pdf,.doc,.docx\"\n (change)=\"onFileSelected($event)\"\n >\n\n <p *ngIf=\"totalFileCount < MAX_FILES\">\n Click to select files\n </p>\n\n <p *ngIf=\"totalFileCount >= MAX_FILES\" class=\"error-text\">\n Maximum 10 documents allowed\n </p>\n\n <p><strong>Note:</strong> <small>PDF Files Only (Max:25 MB)</small></p>\n </div>\n\n <!-- Selected Files List -->\n <div *ngIf=\"selectedFiles.length > 0\" class=\"file-list\" style=\"margin-top:10px\">\n <p><strong>Selected Files</strong></p>\n\n <div class=\"file-item\" *ngFor=\"let file of selectedFiles; let i = index\">\n <span>{{ file.name }}</span>\n <span (click)=\"removeFile(i)\">\n <mat-icon class=\"file-cross-icon\" matTooltip=\"Remove\" matTooltipPosition=\"above\">close</mat-icon>\n </span>\n </div>\n </div>\n\n</mat-dialog-content>\n\n<div class=\"disclaimer-text\">\n <p>Disclaimer: Please do not upload any confidential documents.</p>\n</div>\n\n<mat-dialog-actions align=\"center\" style=\"margin: 20px 0;\">\n <button mat-button mat-dialog-close>Cancel</button>\n\n <button class=\"primary-btn cursor-pointer\"\n mat-raised-button\n color=\"primary\"\n (click)=\"upload()\"\n [disabled]=\"selectedFiles.length === 0\"\n >\n Upload\n </button>\n</mat-dialog-actions>\n\n<div class=\"overlay-loader\" *ngIf=\"loading\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n</div>\n", styles: [".file-upload-box{border:2px dashed #ccc;padding:20px;text-align:center;cursor:pointer;margin-top:10px}.primary-btn{background-color:#1b4ca1;color:#fff}.disclaimer-text p{font-size:16px;font-family:Lato;font-weight:400;margin-left:24px}.file-cross-icon{height:24px;width:24px;vertical-align:middle;background:#d3d3d3;margin-left:10px;border-radius:25px}:host .mat-mdc-dialog-content{max-height:100vh!important}.cursor-pointer{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatLegacyButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] }); }
181
181
  }
182
182
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UploadDialogComponent, decorators: [{
183
183
  type: Component,