tango-app-ui-manage-tickets 3.7.0-beta.61 → 3.7.0-beta.62

package/src/lib/components/tango-manage-tickets/tango-manage-tickets.component.html

@@ -1,43 +0,0 @@
-<div class="card mb-5 py-3 px-5">
-    <ul class="nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap">
-        <li class="nav-item">
-            <a [routerLink]="['/manage/tickets']" [queryParams]="{ type: 'installation' }"  (click)="Selectedtabs('installation')"
-               [ngClass]="SelectedTab === 'installation' ? 'active' : ''" class="nav-link cursor-pointer no-border me-3">
-                Installation<span class="mx-2 " [ngClass]="SelectedTab ==='installation' ? 'badge-num-primary' :'badge-num-muted'">{{ticketAllCount?.installationCount?ticketAllCount?.installationCount:0}}</span>
-            </a>
-        </li>
-        <li class="nav-item" >
-            <a [routerLink]="['/manage/tickets']" [queryParams]="{ type: 'infra' }" (click)="Selectedtabs('infra')"
-               [ngClass]="SelectedTab === 'infra' ? 'active' : ''" class="nav-link cursor-pointer no-border me-3">
-                Infra<span class="mx-2" [ngClass]="SelectedTab ==='infra' ? 'badge-num-primary' :'badge-num-muted'">{{ticketAllCount?.infraCount?ticketAllCount?.infraCount:0}}</span>
-            </a>
-        </li>    
-        <li class="nav-item" [routerLink]="['/manage/tickets']" [queryParams]="{ type: 'dataMismatch' }"  (click)="Selectedtabs('dataMismatch')">
-            <a [ngClass]="SelectedTab ==='dataMismatch' ? 'active' :''" class="nav-link cursor-pointer me-3">Data Mismatch
-                <span class="mx-2" [ngClass]="SelectedTab ==='dataMismatch' ? 'badge-num-primary' :'badge-num-muted'">{{ticketAllCount?.datamismatchCount? ticketAllCount?.datamismatchCount:0}}</span></a>
-        </li>
-       <!-- <li *ngIf="this.users.userType ==='tango'" class="nav-item" [routerLink]="['/manage/tickets']" [queryParams]="{ type: 'audit' }" (click)="Selectedtabs('audit')"><a [ngClass]="SelectedTab ==='audit' ? 'active' :''"
-            class="nav-link cursor-pointer no-border me-3">Audit</a>
-        </li> -->
-        <li *ngIf="this.users.userType ==='tango'" class="nav-item" (click)="Selectedtabs('mat')"><a [routerLink]="['/manage/tickets']" [queryParams]="{ type: 'mat' }" [ngClass]="SelectedTab ==='mat' ? 'active' :''"
-            class="nav-link cursor-pointer no-border me-3">Employee Mat
-            <span class="mx-2 " [ngClass]="SelectedTab ==='mat' ? 'badge-num-primary' :'badge-num-muted'">{{ticketAllCount?.matCount ?ticketAllCount?.matCount:0}}</span></a>
-        </li>
-<!-- <li *ngIf="(gs.userAccess | async)?.userType === 'tango' || clientData?.isVMS" class="nav-item" (click)="Selectedtabs('footfall')"><a [routerLink]="['/manage/tickets']" [queryParams]="{ type: 'footfall' }" [ngClass]="SelectedTab ==='footfall' ? 'active' :''"
-            class="nav-link cursor-pointer no-border me-3">Footfall Directory
-            <span class="mx-2 " [ngClass]="SelectedTab ==='footfall' ? 'badge-num-primary' :'badge-num-muted'">{{ticketAllCount?.footfallDirectory ?ticketAllCount?.footfallDirectory:0}}</span>
-
-            </a>
-        </li> -->
-        <li *ngIf="this.users.userType ==='tango' || (this.users.userType ==='client' && this.users.role !=='user')"  class="nav-item" (click)="Selectedtabs('footfall')"><a [routerLink]="['/manage/tickets']" [queryParams]="{ type: 'footfall' }" [ngClass]="SelectedTab ==='footfall' ? 'active' :''"
-            class="nav-link cursor-pointer no-border me-3">Footfall Directory
-            <span class="mx-2" [ngClass]="SelectedTab ==='footfall' ? 'badge-num-primary' :'badge-num-muted'">{{ticketAllCount?.footfallDirectory ?ticketAllCount?.footfallDirectory:0}}</span>
-            </a>
-        </li>
-    </ul>
-</div>
-<lib-ticket-footfall-new *ngIf="SelectedTab ==='footfall'"></lib-ticket-footfall-new>
-<lib-footfall-dic *ngIf="SelectedTab ==='footfall-new'"></lib-footfall-dic>
-<lib-tickets *ngIf="SelectedTab !=='audit' && SelectedTab !=='footfall' && SelectedTab !=='footfall-new'"></lib-tickets>
-<lib-audit-metrics *ngIf="SelectedTab ==='audit'"></lib-audit-metrics>
-<router-outlet></router-outlet>

package/src/lib/components/tango-manage-tickets/tango-manage-tickets.component.scss

@@ -1,35 +0,0 @@
-.nav-item .nav-link.active{
-    border:none;
-    border-radius: 6px;
-    background: var(--Primary-50, #EAF8FF);
-    padding: 8px 12px;
- }
- .nav-item .nav-link:hover{
-     border: none;
- }
- .badge-num-primary {
-     border-radius: 16px !important;
-     background: var(--Primary-50, #EAF8FF) !important;
-     color: var(--Primary-700, #009BF3) !important;
-     text-align: center;
-     font-size: 14px !important;
-     font-style: normal;
-     font-weight: 500;
-     line-height: 20px;
-     padding: 2px 10px !important;
-     mix-blend-mode: multiply !important;
- }
-
- .badge-num-muted {
-    border-radius: 16px !important;
-    background: var(--Primary-50, #F2F4F7) !important;
-    color: var(--Gray-700, #344054) !important;
-    text-align: center;
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 20px;
-    padding: 2px 10px !important;
-    mix-blend-mode: multiply !important;
-}
-

package/src/lib/components/tango-manage-tickets/tango-manage-tickets.component.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { TangoManageTicketsComponent } from './tango-manage-tickets.component';
-
-describe('TangoManageTicketsComponent', () => {
-  let component: TangoManageTicketsComponent;
-  let fixture: ComponentFixture<TangoManageTicketsComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [TangoManageTicketsComponent]
-    })
-    .compileComponents();
-    
-    fixture = TestBed.createComponent(TangoManageTicketsComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/components/tango-manage-tickets/tango-manage-tickets.component.ts

@@ -1,118 +0,0 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { GlobalStateService, PageInfoService } from 'tango-app-ui-global';
-import { Subject, takeUntil } from "rxjs";
-import { TicketService } from '../../services/ticket.service';
-@Component({
-  selector: 'lib-tango-manage-tickets',
-  templateUrl: './tango-manage-tickets.component.html',
-  styleUrl: './tango-manage-tickets.component.scss'
-})
-export class TangoManageTicketsComponent implements OnInit,OnDestroy {
-  SelectedTab:any='installation'
-  private readonly destroy$ = new Subject();
-  headerFilters: any;
-  ticketAllCount: any;
-  users: any;
-  constructor(private pageInfo:PageInfoService,private route: ActivatedRoute,private router:Router,public gs:GlobalStateService,private service:TicketService){
-  }
-clientData:any;
-  ngOnInit(): void {
-    const userData: any = JSON.parse(localStorage.getItem("user-info") || "{}");
-    this.users = userData;
-        const clientData: any = JSON.parse(localStorage.getItem("client-details") || "{}");
-    this.clientData = clientData;
-    this.route?.queryParams?.pipe(takeUntil(this.destroy$)).subscribe(params => {
-      if (params.hasOwnProperty('type')) {
-          const type = params['type'];
-          this.Selectedtabs(type);
-         
-      } else{
-        this.updateStoreIdQueryParam()
-      }
-  });
-  this.onLoad(); 
-    this.setPageData();
-  }
-
-  updateStoreIdQueryParam() {
-    const queryParams = { ...this.route?.snapshot?.queryParams };
-    // Update storeId in queryParams
-    queryParams.type = this.SelectedTab.toLocaleLowerCase();
-    // Navigate to the same route with updated queryParams
-    this.router.navigate([], { queryParams: queryParams, queryParamsHandling: 'merge' });
-  }
-
-  setPageData(){
-    this.pageInfo.setTitle('Tickets')
-    this.pageInfo.setDescription('Summary of queries raised,addresed & resolved')
-    let breadcrumbs : any[]=[];
-    if (this.gs.userAccess.value?.userType === "tango") {
-      breadcrumbs=  [
-        {
-          title: "Manage",
-          path: "/manage/brands",
-          isActive: false,
-          isSeparator: false,
-        },
-        {
-          title: "Manage",
-          path: "/manage/brands",
-          isActive: false,
-          isSeparator: true,
-        },
-      ];
-    } else if (this.gs.userAccess.value?.userType === "client") {
-      breadcrumbs= [
-        {
-          title: "Manage",
-          path: "/manage/summary",
-          isActive: false,
-          isSeparator: false,
-        },
-        {
-          title: "Manage",
-          path: "/manage/summary",
-          isActive: false,
-          isSeparator: true,
-        },
-      ];
-    }
-    this.pageInfo.setBreadcrumbs(breadcrumbs);
-  }
-
- 
-  Selectedtabs(value:any){
-    this.SelectedTab = value;
-  }
-  ngOnDestroy(): void {
-    this.destroy$.next(true);
-    this.destroy$.complete();
-  }
-onLoad(){
-  this.gs.dataRangeValue?.pipe(takeUntil(this.destroy$))?.subscribe({
-    next: (data: any) => {
-      if (data) {
-        this.headerFilters = data;
-        this.getAllCount();
-      }
-    }
-  })
-}
-
-getAllCount(){
-  let obj ={
-    clientId: this.headerFilters?.clients,
-      fromDate: this.headerFilters?.date?.startDate,
-      toDate: this.headerFilters?.date?.endDate
-  }
-  this.service.getAllCounts(obj)?.pipe(takeUntil(this.destroy$))?.subscribe({
-    next: (res: any) => {
-      if(res.code ===200){
-          this.ticketAllCount = res?.data[0];
-      }
-    }
-  })
-}
-
-}

package/src/lib/components/ticket-filter-panel/ticket-filter-panel.component.html

@@ -1,386 +0,0 @@
-<!-- ticket-filter-panel.component.html -->
-<div class="filter-wrapper" *ngIf="isOpen">
-  <div class="filter-card">
-    <div class="filter-header d-flex justify-content-between align-items-center mb-3">
-  <div class="title">Filter Options</div>
-      <!-- <button type="button" class="btn-close" (click)="close()">✕</button> -->
-    </div>
-
-    <form [formGroup]="filterForm">
-      <!-- Status -->
-<div class="mb-3 position-relative" (click)="$event.stopPropagation()">
-  <label class="form-label">Status</label>
-
-  <!-- Header / trigger -->
-  <div
-    class="status-select border rounded px-3 py-2 d-flex justify-content-between align-items-center"
-    (click)="toggleDropdown('status', $event)"
-  >
-    <span *ngIf="!selectedStatuses.length">Select</span>
-
-    <span *ngIf="selectedStatuses.length === 1">
-      {{ selectedStatuses[0] }}
-    </span>
-
-    <span *ngIf="selectedStatuses.length > 1" class="d-flex align-items-center">
-      <span>{{ selectedStatuses[0] }}</span>
-      <span class="badge ms-2">
-        +{{ selectedStatuses.length - 1 }}
-      </span>
-    </span>
-
-  </div>
-
-  <!-- DROPDOWN PANEL (OVERLAY) -->
-  <div
-    class="status-dropdown position-absolute w-100 mt-1 border rounded p-1 bg-white"
-    style="z-index: 1000; max-height: 220px; overflow-y: auto;"
-   *ngIf="isDropdownOpen('status')"
-    (click)="$event.stopPropagation()"
-  >
-    <!-- Select All -->
-    <div class="form-check px-0 d-flex align-items-center mb-2">
-      <input
-        type="checkbox"
-        class="form-check-input "
-        id="status-select-all"
-        [checked]="areAllStatusesSelected()"
-        (change)="onStatusSelectAllChange($event)"
-      />
-      <label class="form-check-label text-dark ms-2" for="status-select-all">
-        Select All
-      </label>
-    </div>
-
-
-    <!-- Options -->
-    <div
-      class="form-check px-0 d-flex align-items-center mb-1"
-      *ngFor="let s of statusOptions"
-    >
-      <input
-        type="checkbox"
-        class="form-check-input "
-        [id]="'status-' + s"
-        [checked]="isStatusSelected(s)"
-        (change)="onStatusChange($event, s)"
-      />
-      <label class="form-check-label text-dark ms-2" [for]="'status-' + s">
-        {{ s }}
-      </label>
-    </div>
-  </div>
-</div>
-
-
-
-      <!-- Reviewer accuracy -->
-      <div class="mb-3" *ngIf="showReviewerAccuracy" (click)="closeAll()">
-        <label class="form-label">Reviewer accuracy (%) by condition</label>
-        <div class="d-flex gap-2">
-          <select class="form-select w-100" formControlName="reviewerCondition">
-            <option [ngValue]="null">Select</option>
-            <option *ngFor="let c of conditionOptions" [ngValue]="c.value">
-              {{ c.label }}
-            </option>
-          </select>
-
-          <!-- one or two inputs -->
-          <ng-container *ngIf="isBetween('reviewerCondition'); else singleReviewer">
-            <input
-              type="number"
-              min="1"
-              max="100"
-              class="form-control"
-              formControlName="reviewerFrom"
-              placeholder="From" (input)="limitValue($event, 'reviewerFrom')" />
-            <input
-              type="number"
-              min="1"
-              max="100"
-              class="form-control"
-              formControlName="reviewerTo"
-              placeholder="To" (input)="limitValue($event, 'reviewerTo')" />
-          </ng-container>
-          <ng-template #singleReviewer>
-            <input
-              type="number"
-              min="1"
-              max="100"
-              class="form-control"
-              formControlName="reviewerFrom"
-              placeholder="1 to 100%" (input)="limitValue($event, 'reviewerFrom')" />
-          </ng-template>
-        </div>
-      </div>
-
-      <!-- Approver accuracy -->
-      <div class="mb-3" *ngIf="showApproverAccuracy" (click)="closeAll()">
-        <label class="form-label">Approver accuracy (%) by condition</label>
-        <div class="d-flex gap-2">
-          <select class="form-select w-100" formControlName="approverCondition">
-            <option [ngValue]="null">Select</option>
-            <option *ngFor="let c of conditionOptions" [ngValue]="c.value">
-              {{ c.label }}
-            </option>
-          </select>
-
-          <ng-container *ngIf="isBetween('approverCondition'); else singleApprover">
-            <input
-              type="number"
-              min="1"
-              max="100"
-              class="form-control"
-              formControlName="approverFrom"
-              placeholder="From" 
-              (input)="limitValue($event, 'approverFrom')"/>
-            <input
-              type="number"
-              min="1"
-              max="100"
-              class="form-control"
-              formControlName="approverTo"
-              placeholder="To" (input)="limitValue($event, 'approverTo')" />
-          </ng-container>
-          <ng-template #singleApprover>
-            <input
-              type="number"
-              min="1"
-              max="100"
-              class="form-control"
-              formControlName="approverFrom"
-              placeholder="1 to 100%" (input)="limitValue($event, 'approverFrom')" />
-          </ng-template>
-        </div>
-      </div>
-
-      <!-- Tango accuracy -->
-      <div class="mb-3" *ngIf="showTangoAccuracy" (click)="closeAll()">
-        <label class="form-label">Tango accuracy (%) by condition</label>
-        <div class="d-flex gap-2">
-          <select class="form-select w-100" formControlName="tangoCondition">
-            <option [ngValue]="null">Select</option>
-            <option *ngFor="let c of conditionOptions" [ngValue]="c.value">
-              {{ c.label }}
-            </option>
-          </select>
-
-          <ng-container *ngIf="isBetween('tangoCondition'); else singleTango">
-            <input
-              type="number"
-              min="1"
-              max="100"
-              class="form-control"
-              formControlName="tangoFrom"
-              placeholder="From" (input)="limitValue($event, 'tangoFrom')" />
-            <input
-              type="number"
-              min="1"
-              max="100"
-              class="form-control"
-              formControlName="tangoTo"
-              placeholder="To" (input)="limitValue($event, 'tangoTo')" />
-          </ng-container>
-          <ng-template #singleTango>
-            <input
-              type="number"
-              min="1"
-              max="100"
-              class="form-control"
-              formControlName="tangoFrom"
-              placeholder="1 to 100%" (input)="limitValue($event, 'tangoFrom')" />
-          </ng-template>
-        </div>
-      </div>
-<div
-  class="mb-3 position-relative"
-  *ngIf="showReviewedBy"
-  (click)="$event.stopPropagation()"
->
-  <label class="form-label">Reviewed by</label>
-
-  <!-- Trigger / display -->
-  <div
-    class="border rounded px-3 py-2 d-flex justify-content-between align-items-center"
-    (click)="toggleDropdown('reviewer', $event)"
-  >
-    <!-- 0 selected -->
-    <span *ngIf="!selectedReviewedBy.length">
-      Select
-    </span>
-
-    <!-- 1 selected -->
-    <span *ngIf="selectedReviewedBy.length === 1">
-      {{ selectedReviewedBy[0] }}
-    </span>
-
-    <!-- >1 selected -->
-    <span
-      *ngIf="selectedReviewedBy.length > 1"
-      class="d-flex align-items-center"
-    >
-      <span>{{ selectedReviewedBy[0] }}</span>
-      <span class="badge ms-2">
-        +{{ selectedReviewedBy.length - 1 }}
-      </span>
-    </span>
-  </div>
-
-<div
-  *ngIf="isDropdownOpen('reviewer')"
-  class="position-absolute w-100 border rounded bg-white p-1 mt-1"
-  style="z-index: 1000; max-height: 220px; overflow-y: auto;"
-  (click)="$event.stopPropagation()"
->
-
-  <!-- 🔍 Search box -->
-  <!-- <div class="mb-2 px-0">
-    <input
-      type="text"
-      class="form-control form-control-sm"
-      placeholder="Search by email"
-      [(ngModel)]="reviewerSearchTerm"
-      (click)="$event.stopPropagation()"
-    />
-  </div> -->
-
-  <!-- Select All -->
-  <div class="form-check px-0 mb-2 d-flex align-items-center">
-    <input
-      type="checkbox"
-      class="form-check-input"
-      id="reviewer-all"
-      [checked]="areAllReviewersSelected()"
-      (change)="onReviewerSelectAll($event)"
-    />
-    <label for="reviewer-all" class="form-check-label text-dark ms-2">
-      Select All
-    </label>
-  </div>
-
-  <!-- Options – now use getter filteredReviewerList -->
-  <div
-    class="form-check mb-1 px-0 d-flex align-items-center"
-    *ngFor="let u of filteredReviewerList"
-  >
-    <input
-      class="form-check-input"
-      type="checkbox"
-      [id]="'rev-' + u.email"
-      [checked]="isReviewerSelected(u.email)"
-      (change)="onReviewerChange($event, u.email)"
-    />
-    <label class="form-check-label text-dark ms-2" [for]="'rev-' + u.email">
-      {{ u.email }}
-    </label>
-  </div>
-</div>
-
-
-</div>
-
-
-      <!-- Approved By -->
-<div
-  class="mb-3 position-relative"
-  *ngIf="showApprovedBy"
-  (click)="$event.stopPropagation()"
->
-  <label class="form-label">Approved by</label>
-
-  <!-- Trigger / display -->
-  <div
-    class="border rounded px-3 py-2 d-flex justify-content-between align-items-center"
-    (click)="toggleDropdown('approver', $event)"
-  >
-    <!-- 0 selected -->
-    <span *ngIf="!selectedApprovedBy.length">
-      Select
-    </span>
-
-    <!-- 1 selected -->
-    <span *ngIf="selectedApprovedBy.length === 1">
-      {{ selectedApprovedBy[0] }}
-    </span>
-
-    <!-- >1 selected -->
-    <span
-      *ngIf="selectedApprovedBy.length > 1"
-      class="d-flex align-items-center"
-    >
-      <span>{{ selectedApprovedBy[0] }}</span>
-      <span class="badge ms-2">
-        +{{ selectedApprovedBy.length - 1 }}
-      </span>
-    </span>
-
-  </div>
-<!-- Dropdown panel -->
-<div
- *ngIf="isDropdownOpen('approver')"
-  class="position-absolute w-100 border rounded bg-white p-1 mt-1"
-  style="z-index: 1000; max-height: 220px; overflow-y: auto;"
-  (click)="$event.stopPropagation()"
->
-
-  <!-- 🔍 Search box -->
-  <!-- <div class="mb-2 px-0">
-    <input
-      type="text"
-      class="form-control form-control-sm"
-      placeholder="Search by email"
-      [ngModel]="approverSearchTerm"
-      (ngModelChange)="onReviewerSearch($event)"
-      (click)="$event.stopPropagation()"
-    />
-  </div> -->
-
-  <!-- Select All -->
-  <div class="form-check px-0 mb-2 d-flex align-items-center">
-    <input
-      type="checkbox"
-      class="form-check-input"
-      id="reviewer-all"
-      [checked]="areAllReviewersSelected()"
-      (change)="onReviewerSelectAll($event)"
-    />
-    <label for="reviewer-all" class="form-check-label text-dark ms-2">
-      Select All
-    </label>
-  </div>
-
-  <!-- Options (use filteredReviewerList instead of userList) -->
-  <div
-    class="form-check mb-1 px-0 d-flex align-items-center"
-    *ngFor="let u of filteredApproverList"
-  >
-    <input
-      class="form-check-input"
-      type="checkbox"
-      [id]="'rev-' + u.email"
-      [checked]="isReviewerSelected(u.email)"
-      (change)="onReviewerChange($event, u.email)"
-    />
-    <label class="form-check-label text-dark ms-2" [for]="'rev-' + u.email">
-      {{ u.email }}
-    </label>
-  </div>
-</div>
-
-  <!-- Dropdown panel -->
-
-</div>
-
-
-      <!-- Footer buttons -->
-      <div class="d-flex justify-content-between w-100 mt-4">
-        <button type="button" class="btn btn-outline w-50 me-1" (click)="onReset()">
-          Reset
-        </button>
-        <button type="button" class="btn btn-primary w-50 ms-1" (click)="onApply()">
-          Apply
-        </button>
-      </div>
-    </form>
-  </div>
-</div>

package/src/lib/components/ticket-filter-panel/ticket-filter-panel.component.scss

@@ -1,87 +0,0 @@
-/* ticket-filter-panel.component.scss */
-.filter-wrapper {
-  position: absolute; // or fixed if you want full overlay
-  top: 0;
-  right: 0;
-  padding: 16px;
-  z-index: 1050;
-}
-
-.filter-card {
-  width: 350px;
-  background: #ffffff;
-  border-radius: 12px;
-  padding: 16px 18px;
-  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
-  font-size: 13px;
-}
-
-.filter-header .title {
-  font-weight: 600;
-  font-size: 14px;
-}
-
-.btn-close {
-  border: none;
-  background: transparent;
-  font-size: 16px;
-  cursor: pointer;
-}
-
-.form-label {
-  font-size: 12px;
-  margin-bottom: 4px;
-}
-
-.form-select,
-.form-control {
-  font-size: 13px;
-}
-
-.gap-2 {
-  gap: 4px;
-}
-.badge {
-  padding: 0 6px;
-  border-radius: 999px;
-  font-size: 11px;
-  background: #e5f3ff;
-  color: #007bff;
-}
-
-input[type='checkbox'] {
-    width: 16px !important;
-    height: 16px !important;
-    margin: -2px 5px -2px;
-    border-radius: 4px !important;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    -o-appearance: none;
-    appearance: none;
-    outline: 1px solid var(--gray-600, #D0D5DD) !important;
-    box-shadow: none;
-    font-size: 0.5em;
-    text-align: center;
-    line-height: 1em;
-    background: white;
-}
-
-input[type='checkbox'] {
-    outline: 1px solid var(--primary-600, #00A3FF) !important;
-    background-color: var(--primary-50, #EAF8FF);
-}
-
-input[type='checkbox']:checked:after {
-    content: '';
-    transform: rotate(45deg);
-    border-bottom: 2px solid #00A3FF;
-    border-right: 2px solid #00A3FF;
-    display: inline-block;
-    width: 0.5em;
-    padding-left: 3px;
-    padding-top: 10px;
-    padding-right: 0px;
-}
-.text-dark{
-  color:#344054 !important;
-}