@pmidc/upyog-css 1.2.36-UAT.24 → 1.2.36-UAT.26

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.
@@ -0,0 +1,2358 @@
1
+ /*
2
+ * mSeva / UPYOG — GIGW 3.0 + WCAG 2.1 AA UI baseline
3
+ * Applied as the final theme/accessibility layer.
4
+ * CSS cannot by itself certify GIGW conformance; semantic markup,
5
+ * ARIA, content, keyboard and assistive-technology testing remain required.
6
+ */
7
+
8
+ :root {
9
+ --mseva-blue-900: #074b98;
10
+ --mseva-blue-800: #0755a8;
11
+ --mseva-blue-700: #0b63be;
12
+ --mseva-blue-600: #1675d1;
13
+ --mseva-blue-100: #e9f2fc;
14
+
15
+ --mseva-green-800: #216f17;
16
+ --mseva-green-700: #287f1d;
17
+ --mseva-green-600: #42a928;
18
+ --mseva-green-100: #eef8eb;
19
+
20
+ --mseva-purple-700: #6530b8;
21
+ --mseva-purple-100: #f2eaff;
22
+ --mseva-orange-800: #8a4b00;
23
+ --mseva-orange-100: #fff2e3;
24
+ --mseva-pink-800: #a62d69;
25
+ --mseva-pink-100: #fceaf4;
26
+
27
+ --mseva-text: #074b98;
28
+ --mseva-text-secondary: #245f9c;
29
+ --mseva-text-muted: #3d709f;
30
+ --mseva-border: #cbd5e1;
31
+ --mseva-border-strong: #94a3b8;
32
+ --mseva-surface: #ffffff;
33
+ --mseva-surface-subtle: #f7f9fc;
34
+ --mseva-focus: #0b63be;
35
+ --mseva-error: #b42318;
36
+ --mseva-success: #176b1d;
37
+ --mseva-warning: #8a4b00;
38
+
39
+ --mseva-radius-sm: 6px;
40
+ --mseva-radius-md: 10px;
41
+ --mseva-radius-lg: 16px;
42
+ --mseva-control-min: 44px;
43
+ }
44
+
45
+ /* Base readability */
46
+ html {
47
+ font-size: 100%;
48
+ -webkit-text-size-adjust: 100%;
49
+ text-size-adjust: 100%;
50
+ }
51
+
52
+ body {
53
+ color: var(--mseva-text);
54
+ background: var(--mseva-surface-subtle);
55
+ line-height: 1.5;
56
+ text-rendering: optimizeLegibility;
57
+ }
58
+
59
+ /* mSeva brand mark is visually cropped from the supplied source image. */
60
+ .navbar .mseva-brand-mark {
61
+ width: 180px;
62
+ height: 72px;
63
+ flex: 0 0 180px;
64
+ overflow: hidden;
65
+ }
66
+
67
+ .navbar .mseva-brand-mark img {
68
+ display: block;
69
+ width: 238px;
70
+ max-width: none;
71
+ height: auto;
72
+ transform: translate(-31px, -42px);
73
+ }
74
+
75
+ h1,
76
+ h2,
77
+ h3,
78
+ h4,
79
+ h5,
80
+ h6 {
81
+ color: var(--mseva-text);
82
+ line-height: 1.25;
83
+ }
84
+
85
+ /* Keep default content and form text consistent across every module. */
86
+ p,
87
+ li,
88
+ dt,
89
+ dd,
90
+ td,
91
+ th,
92
+ label,
93
+ legend,
94
+ input,
95
+ select,
96
+ textarea {
97
+ color: var(--mseva-text);
98
+ }
99
+
100
+ /* Skip navigation */
101
+ .mseva-skip-link {
102
+ position: fixed;
103
+ inset: 0 auto auto 0;
104
+ z-index: 100000;
105
+ transform: translateY(-120%);
106
+ padding: 10px 16px;
107
+ background: #fff;
108
+ color: var(--mseva-blue-900);
109
+ border: 2px solid var(--mseva-blue-900);
110
+ border-radius: 0 0 var(--mseva-radius-md) 0;
111
+ font-weight: 700;
112
+ }
113
+ .mseva-skip-link:focus {
114
+ transform: translateY(0);
115
+ }
116
+
117
+ /* Interactive controls */
118
+ button,
119
+ input,
120
+ select,
121
+ textarea,
122
+ .mseva-button,
123
+ [role="button"] {
124
+ font: inherit;
125
+ }
126
+
127
+ button,
128
+ .mseva-button,
129
+ [role="button"] {
130
+ min-height: var(--mseva-control-min);
131
+ }
132
+
133
+ input,
134
+ select,
135
+ textarea {
136
+ min-height: var(--mseva-control-min);
137
+ color: var(--mseva-text);
138
+ background: #fff;
139
+ border: 1px solid var(--mseva-border-strong);
140
+ border-radius: var(--mseva-radius-md);
141
+ }
142
+
143
+ input::placeholder,
144
+ textarea::placeholder {
145
+ color: #667085;
146
+ opacity: 1;
147
+ }
148
+
149
+ /* Replace browser outlines with a consistent, accessible focus treatment. */
150
+ button:focus,
151
+ input:focus,
152
+ select:focus,
153
+ textarea:focus,
154
+ [role="button"]:focus,
155
+ [tabindex]:focus {
156
+ outline: 0;
157
+ }
158
+
159
+ button:focus-visible,
160
+ [role="button"]:focus-visible,
161
+ [tabindex]:focus-visible {
162
+ box-shadow: 0 0 0 3px rgba(11, 99, 206, 0.24);
163
+ }
164
+
165
+ a {
166
+ color: var(--mseva-blue-900);
167
+ text-decoration: underline;
168
+ text-underline-offset: 0.15em;
169
+ }
170
+
171
+ /* Service cards */
172
+ .mseva-service-card {
173
+ min-height: var(--mseva-control-min);
174
+ color: var(--mseva-text);
175
+ background: #fff;
176
+ border: 1px solid var(--mseva-border);
177
+ border-radius: var(--mseva-radius-lg);
178
+ }
179
+
180
+ .mseva-service-card:hover,
181
+ .mseva-service-card:focus-within {
182
+ border-color: var(--mseva-blue-600);
183
+ box-shadow: 0 0 0 3px rgba(11, 99, 206, 0.12);
184
+ }
185
+
186
+ .mseva-service-card__title {
187
+ color: var(--mseva-text);
188
+ font-weight: 700;
189
+ }
190
+
191
+ .mseva-service-card__meta {
192
+ color: var(--mseva-text-secondary);
193
+ }
194
+
195
+ /* Status must not rely on colour alone */
196
+ .mseva-status {
197
+ display: inline-flex;
198
+ align-items: center;
199
+ gap: 6px;
200
+ min-height: 28px;
201
+ padding: 4px 9px;
202
+ border: 1px solid currentColor;
203
+ border-radius: 999px;
204
+ font-size: 0.8125rem;
205
+ font-weight: 700;
206
+ }
207
+ .mseva-status--success {
208
+ color: var(--mseva-success);
209
+ background: var(--mseva-green-100);
210
+ }
211
+ .mseva-status--warning {
212
+ color: var(--mseva-warning);
213
+ background: var(--mseva-orange-100);
214
+ }
215
+ .mseva-status--error {
216
+ color: var(--mseva-error);
217
+ background: #fef3f2;
218
+ }
219
+ .mseva-status--info {
220
+ color: var(--mseva-blue-900);
221
+ background: var(--mseva-blue-100);
222
+ }
223
+
224
+ /* Forms and errors */
225
+ label {
226
+ color: var(--mseva-text);
227
+ font-weight: 600;
228
+ }
229
+ .mseva-required::after {
230
+ content: " *";
231
+ color: var(--mseva-error);
232
+ }
233
+ .mseva-field-error {
234
+ border-color: var(--mseva-error) !important;
235
+ }
236
+ .mseva-error-message {
237
+ display: block;
238
+ margin-top: 4px;
239
+ color: var(--mseva-error);
240
+ font-size: 0.875rem;
241
+ font-weight: 600;
242
+ }
243
+
244
+ /* Reusable form labels and section headings across citizen and employee modules. */
245
+ .card-header,
246
+ .card-sub-header,
247
+ .employee-card-sub-header,
248
+ .card-section-header,
249
+ .section-header,
250
+ .headerStyle,
251
+ .card-label,
252
+ .card-label span,
253
+ .card-label-smaller,
254
+ .card-label-desc,
255
+ .label-field-pair,
256
+ .label-field-pair label,
257
+ .form-field,
258
+ .form-field label,
259
+ .form-field .label,
260
+ .form-field .text-input,
261
+ .field,
262
+ .field label {
263
+ color: var(--mseva-text) !important;
264
+ }
265
+
266
+ .card-label-error,
267
+ .card-label-error *,
268
+ .mseva-error-message,
269
+ .mseva-error-message * {
270
+ color: var(--mseva-error) !important;
271
+ }
272
+
273
+ /* Shared page surfaces: small visual refinements inherited by all modules. */
274
+ .navbar {
275
+ color: var(--mseva-text);
276
+ border-bottom: 1px solid #d8e5f2;
277
+ box-shadow: 0 3px 12px rgba(7, 75, 152, 0.08);
278
+ }
279
+
280
+ .bread-crumb,
281
+ .bread-crumb--item,
282
+ .bread-crumb--item .last,
283
+ .back-btn2 {
284
+ color: var(--mseva-text);
285
+ }
286
+
287
+ .app-container {
288
+ margin-top: 96px !important;
289
+ padding: 20px 40px 48px !important;
290
+ }
291
+
292
+ .app-container > .citizen-breadcrumb-wrapper,
293
+ .app-container > [class*="breadcrumb"],
294
+ .app-container > [class*="breadcrumbs"] {
295
+ margin-top: 0 !important;
296
+ margin-left: 0 !important;
297
+ }
298
+
299
+ .bread-crumb {
300
+ display: flex;
301
+ align-items: center;
302
+ gap: 6px;
303
+ margin: 0 0 22px;
304
+ padding: 0;
305
+ color: var(--mseva-text);
306
+ font-size: 0.9375rem;
307
+ font-weight: 600;
308
+ list-style: none;
309
+ }
310
+
311
+ .bread-crumb--item {
312
+ margin-left: 0;
313
+ }
314
+
315
+ .bread-crumb--item:not(:last-child)::after {
316
+ margin-left: 6px;
317
+ color: #7890a9;
318
+ }
319
+
320
+ .bread-crumb--item a,
321
+ .bread-crumb--item span {
322
+ color: var(--mseva-text);
323
+ text-decoration: none;
324
+ }
325
+
326
+ .bread-crumb--item a:hover {
327
+ color: var(--mseva-green-800);
328
+ text-decoration: underline;
329
+ }
330
+
331
+ .app-container > header {
332
+ margin: 0 0 22px;
333
+ color: var(--mseva-blue-900) !important;
334
+ font-weight: 800;
335
+ letter-spacing: -0.02em;
336
+ }
337
+
338
+ .applications-list-container {
339
+ width: 100%;
340
+ max-width: 1120px;
341
+ margin: 0 auto;
342
+ }
343
+
344
+ .applications-list-container > header {
345
+ margin-bottom: 20px;
346
+ }
347
+
348
+ .applications-list-container > .card {
349
+ margin: 0;
350
+ padding: 28px;
351
+ border: 1px dashed #b8cce2;
352
+ border-radius: 16px;
353
+ background: #fff;
354
+ color: #52708f;
355
+ text-align: center;
356
+ }
357
+
358
+ .applications-list-container .card {
359
+ border-color: #d8e5f4;
360
+ }
361
+
362
+ .applications-list-container .submit-bar,
363
+ .action-button-myapplication .submit-bar {
364
+ min-width: 160px;
365
+ margin: 0;
366
+ border-radius: 8px;
367
+ }
368
+
369
+ .action-button-myapplication {
370
+ gap: 12px;
371
+ margin-top: 22px;
372
+ }
373
+
374
+ .ptr-pagination-controls,
375
+ .ads-pagination-controls {
376
+ gap: 12px;
377
+ margin: 24px 0 0;
378
+ }
379
+
380
+ .ptr-pagination-button,
381
+ .ads-pagination-btn {
382
+ display: inline-flex;
383
+ align-items: center;
384
+ justify-content: center;
385
+ width: 40px;
386
+ height: 40px;
387
+ padding: 0;
388
+ border-radius: 50%;
389
+ background: var(--mseva-blue-700);
390
+ }
391
+
392
+ .ptr-pagination-button:hover:not(:disabled),
393
+ .ads-pagination-btn:hover:not(:disabled) {
394
+ background: var(--mseva-green-700);
395
+ }
396
+
397
+ .ptr-pagination-info,
398
+ .ads-pagination-info {
399
+ color: var(--mseva-text);
400
+ font-weight: 700;
401
+ }
402
+
403
+ .citizen-my-applications,
404
+ .ads-my-bookings {
405
+ box-sizing: border-box;
406
+ width: 100%;
407
+ max-width: none;
408
+ /* margin: 0 auto !important; */
409
+ padding: 0 0 48px;
410
+ }
411
+
412
+ .citizen-my-applications header {
413
+ margin: 0 0 22px;
414
+ color: var(--mseva-blue-900) !important;
415
+ font-weight: 800;
416
+ letter-spacing: -0.02em;
417
+ }
418
+
419
+ .citizen-my-applications > .card,
420
+ .citizen-my-applications > div .card {
421
+ max-width: none;
422
+ margin: 0 0 16px;
423
+ padding: 24px;
424
+ border: 1px solid #d8e5f4;
425
+ border-radius: 16px;
426
+ background: #fff;
427
+ box-shadow: 0 7px 18px rgba(7, 75, 152, 0.08);
428
+ }
429
+
430
+ .citizen-my-applications--ptr .card,
431
+ .citizen-my-applications--pt .card,
432
+ .citizen-my-applications--tl .card,
433
+ .citizen-my-applications--ndc .card,
434
+ .citizen-my-applications--chb .card,
435
+ .citizen-my-applications--rent-and-lease .card,
436
+ .citizen-my-applications--garbage-collection .card {
437
+ display: grid;
438
+ grid-template-columns: repeat(2, minmax(0, 1fr));
439
+ gap: 16px 28px;
440
+ align-items: start;
441
+ }
442
+
443
+ .citizen-my-applications .card > .key-note-pair {
444
+ width: auto;
445
+ margin: 0;
446
+ padding: 0 0 12px;
447
+ border-bottom: 1px solid #e5edf6;
448
+ }
449
+
450
+ .citizen-my-applications .card > .key-note-pair h3 {
451
+ margin-bottom: 4px;
452
+ color: #52708f;
453
+ font-size: 0.8125rem;
454
+ font-weight: 700;
455
+ letter-spacing: 0.02em;
456
+ }
457
+
458
+ .citizen-my-applications .card > .key-note-pair p {
459
+ color: var(--mseva-text);
460
+ font-size: 1rem;
461
+ font-weight: 700;
462
+ }
463
+
464
+ .citizen-my-applications .action-button-myapplication,
465
+ .citizen-my-applications .ral-my-properties-actions,
466
+ .citizen-my-applications .gc-style-0b9a47eb61,
467
+ .citizen-my-applications .firenoc-my-applications__actions {
468
+ display: flex;
469
+ flex-wrap: wrap;
470
+ gap: 12px;
471
+ width: 100%;
472
+ margin-top: 8px;
473
+ }
474
+
475
+ .citizen-my-applications--ptr .action-button-myapplication,
476
+ .citizen-my-applications--pt .card > a,
477
+ .citizen-my-applications--tl .action-button-myapplication,
478
+ .citizen-my-applications--ndc .action-button-myapplication,
479
+ .citizen-my-applications--chb .action-button-myapplication,
480
+ .citizen-my-applications--rent-and-lease .ral-my-properties-actions,
481
+ .citizen-my-applications--garbage-collection .gc-style-0b9a47eb61,
482
+ .citizen-my-applications--firenoc .firenoc-my-applications__actions {
483
+ grid-column: 1 / -1;
484
+ }
485
+
486
+ .citizen-my-applications .action-button-myapplication .submit-bar,
487
+ .citizen-my-applications .ral-my-properties-actions .submit-bar,
488
+ .citizen-my-applications .gc-style-0b9a47eb61 .submit-bar {
489
+ min-width: 160px;
490
+ margin: 0;
491
+ border-radius: 8px;
492
+ }
493
+
494
+ .citizen-my-applications .ndc-application-list,
495
+ .citizen-my-applications .ral-my-properties-no-result,
496
+ .citizen-my-applications .gc-style-eda36bf913,
497
+ .citizen-my-applications > div > p {
498
+ margin: 20px 0;
499
+ padding: 18px 20px;
500
+ border: 1px dashed #b8cce2;
501
+ border-radius: 14px;
502
+ background: #fff;
503
+ color: #52708f;
504
+ }
505
+
506
+ .citizen-my-applications .ndc-application-overview-custom {
507
+ display: flex;
508
+ align-items: center;
509
+ justify-content: center;
510
+ gap: 12px;
511
+ margin-top: 24px;
512
+ color: var(--mseva-text);
513
+ font-weight: 700;
514
+ }
515
+
516
+ .citizen-my-applications .ndc-pagination__button {
517
+ min-width: 96px;
518
+ border-radius: 8px;
519
+ background: var(--mseva-blue-700);
520
+ }
521
+
522
+ .citizen-my-applications .ndc-pagination__button:hover:not(:disabled) {
523
+ background: var(--mseva-green-700);
524
+ }
525
+
526
+ .citizen-my-applications--firenoc .card {
527
+ display: grid;
528
+ grid-template-columns: minmax(150px, 0.7fr) minmax(0, 1.3fr);
529
+ gap: 10px 28px;
530
+ }
531
+
532
+ .citizen-my-applications--firenoc .card > div:not(.firenoc-my-applications__actions) {
533
+ margin: 0 !important;
534
+ align-self: center;
535
+ }
536
+
537
+ .citizen-my-applications--firenoc .card > div:nth-child(odd):not(.firenoc-my-applications__actions) {
538
+ color: #52708f;
539
+ font-size: 0.8125rem !important;
540
+ font-weight: 700 !important;
541
+ }
542
+
543
+ .citizen-my-applications--firenoc .card > div:nth-child(even):not(.firenoc-my-applications__actions) {
544
+ color: var(--mseva-text);
545
+ font-size: 1rem !important;
546
+ font-weight: 700 !important;
547
+ }
548
+
549
+ .drawer-list .sidebar-list.active,
550
+ .drawer-desktop .sidebar-list.active {
551
+ border-left-color: var(--mseva-green-600);
552
+ }
553
+
554
+ .drawer-list .sidebar-list.active .menu-label,
555
+ .drawer-list .sidebar-list.active .icon,
556
+ .drawer-desktop .sidebar-list.active .menu-label,
557
+ .drawer-desktop .sidebar-list.active .icon {
558
+ color: var(--mseva-green-800);
559
+ fill: var(--mseva-green-800);
560
+ }
561
+
562
+ .card,
563
+ .employeeCard,
564
+ .card-emp,
565
+ .popup-module .card {
566
+ border: 1px solid #d9e6f2;
567
+ background: linear-gradient(145deg, #ffffff 0%, #f8fbff 100%);
568
+ box-shadow: 0 7px 20px rgba(7, 75, 152, 0.07);
569
+ }
570
+
571
+ .card:hover,
572
+ .employeeCard:hover,
573
+ .card-emp:hover {
574
+ box-shadow: 0 10px 24px rgba(7, 75, 152, 0.11);
575
+ }
576
+
577
+ .submit-bar,
578
+ .selector-button-primary,
579
+ .selector-button-border,
580
+ .primary-label-btn .submit-bar {
581
+ background-color: var(--mseva-blue-900) !important;
582
+ border-color: var(--mseva-blue-900) !important;
583
+ }
584
+
585
+ .submit-bar:hover,
586
+ .selector-button-primary:hover,
587
+ .selector-button-border:hover {
588
+ background-color: var(--mseva-green-800) !important;
589
+ border-color: var(--mseva-green-800) !important;
590
+ }
591
+
592
+ .selector-button-secondary {
593
+ color: var(--mseva-blue-900) !important;
594
+ border: 1px solid var(--mseva-blue-900) !important;
595
+ }
596
+
597
+ .selector-button-secondary h2 {
598
+ color: var(--mseva-blue-900) !important;
599
+ }
600
+
601
+ .table,
602
+ .employee-data-table,
603
+ .data-table,
604
+ .ndc-new-table,
605
+ .ndc-new-table-card {
606
+ border-color: #d9e6f2;
607
+ box-shadow: 0 5px 16px rgba(7, 75, 152, 0.06);
608
+ }
609
+
610
+ .table thead,
611
+ .employee-data-table .header,
612
+ .data-table .header,
613
+ .ndc-new-table thead {
614
+ background: #edf5fc;
615
+ border-bottom-color: #d4e3f1;
616
+ }
617
+
618
+ .table thead th,
619
+ .employee-data-table .header .row,
620
+ .data-table .header .row,
621
+ .ndc-new-table thead th,
622
+ .ndc-new-table-header {
623
+ color: var(--mseva-blue-900);
624
+ border-bottom-color: #d4e3f1;
625
+ }
626
+
627
+ .table tbody tr:hover,
628
+ .employee-data-table .row:hover,
629
+ .data-table .row:hover,
630
+ .ndc-new-table tbody tr:hover {
631
+ background: #f1f8f2;
632
+ }
633
+
634
+ .table tbody td,
635
+ .employee-data-table .row .value,
636
+ .data-table .row .value,
637
+ .ndc-new-table tbody td {
638
+ color: var(--mseva-text);
639
+ }
640
+
641
+ /* Responsive service grid */
642
+ .mseva-responsive-grid {
643
+ display: grid;
644
+ grid-template-columns: repeat(4, minmax(0, 1fr));
645
+ gap: 16px;
646
+ }
647
+ @media (max-width: 1024px) {
648
+ .mseva-responsive-grid {
649
+ grid-template-columns: repeat(3, minmax(0, 1fr));
650
+ }
651
+ }
652
+ @media (max-width: 768px) {
653
+ .mseva-responsive-grid {
654
+ grid-template-columns: repeat(2, minmax(0, 1fr));
655
+ }
656
+ }
657
+ @media (max-width: 480px) {
658
+ .mseva-responsive-grid {
659
+ grid-template-columns: 1fr;
660
+ }
661
+ }
662
+ @media (max-width: 320px) {
663
+ .mseva-responsive-grid {
664
+ grid-template-columns: 1fr;
665
+ }
666
+ }
667
+
668
+ /* Images and media */
669
+ img,
670
+ svg,
671
+ video,
672
+ canvas {
673
+ max-width: 100%;
674
+ height: auto;
675
+ }
676
+
677
+ /* Reduced motion */
678
+ @media (prefers-reduced-motion: reduce) {
679
+ html {
680
+ scroll-behavior: auto;
681
+ }
682
+ *,
683
+ *::before,
684
+ *::after {
685
+ animation-duration: 0.01ms !important;
686
+ animation-iteration-count: 1 !important;
687
+ transition-duration: 0.01ms !important;
688
+ scroll-behavior: auto !important;
689
+ }
690
+ }
691
+
692
+ /* Forced-colour mode */
693
+ @media (forced-colors: active) {
694
+ *,
695
+ *::before,
696
+ *::after {
697
+ box-shadow: none !important;
698
+ }
699
+ }
700
+
701
+ /* Print */
702
+ @media print {
703
+ body {
704
+ background: #fff !important;
705
+ color: #000 !important;
706
+ }
707
+ .mseva-no-print,
708
+ nav,
709
+ button {
710
+ display: none !important;
711
+ }
712
+ a {
713
+ color: #000 !important;
714
+ text-decoration: underline !important;
715
+ }
716
+ }
717
+
718
+ /* Citizen dashboard: scoped so the public landing page can evolve independently. */
719
+ .mseva-citizen-dashboard {
720
+ width: 100%;
721
+ margin: 24px 0 0;
722
+ padding: 32px 24px 56px;
723
+ background: #f6f8fb;
724
+ }
725
+
726
+ .mseva-citizen-dashboard .HomePageWrapper {
727
+ width: 100%;
728
+ max-width: 1440px;
729
+ margin: 0 auto;
730
+ }
731
+
732
+ .mseva-citizen-dashboard .hero-banner-styles {
733
+ position: relative;
734
+ min-height: 278px;
735
+ display: flex;
736
+ align-items: center;
737
+ margin: 0;
738
+ padding: 38px 48px;
739
+ overflow: hidden;
740
+ isolation: isolate;
741
+ text-align: left;
742
+ color: var(--mseva-text);
743
+ border: 1px solid #d7e3f5;
744
+ border-radius: var(--mseva-radius-lg);
745
+ background: linear-gradient(
746
+ 90deg,
747
+ rgba(255, 255, 255, 0.98) 0%,
748
+ rgba(255, 255, 255, 0.91) 42%,
749
+ rgba(230, 240, 255, 0.42) 62%,
750
+ rgba(212, 231, 255, 0.3) 100%
751
+ ),
752
+ linear-gradient(135deg, #eaf5ff 0%, #fff6eb 55%, #d9ebff 100%);
753
+ box-shadow: 0 12px 30px rgba(20, 50, 95, 0.08);
754
+ }
755
+
756
+ .mseva-citizen-dashboard .hero-banner-styles::after {
757
+ position: absolute;
758
+ z-index: -1;
759
+ right: -72px;
760
+ bottom: -96px;
761
+ width: 58%;
762
+ height: 146%;
763
+ content: "";
764
+ opacity: 0.7;
765
+ background: radial-gradient(ellipse at 48% 39%, #dda033 0 7%, transparent 7.4%), radial-gradient(ellipse at 68% 38%, #d6952d 0 6%, transparent 6.4%),
766
+ linear-gradient(140deg, transparent 0 34%, rgba(190, 123, 32, 0.42) 34.3% 36%, transparent 36.3% 100%),
767
+ repeating-linear-gradient(90deg, rgba(170, 107, 35, 0.25) 0 12px, transparent 12px 32px);
768
+ clip-path: polygon(0 42%, 19% 19%, 39% 43%, 57% 10%, 76% 39%, 100% 21%, 100% 100%, 0 100%);
769
+ }
770
+
771
+ .mseva-dashboard__hero-content {
772
+ width: min(100%, 620px);
773
+ }
774
+
775
+ .mseva-dashboard__eyebrow {
776
+ margin: 0 0 6px;
777
+ color: var(--mseva-blue-900);
778
+ font-size: 0.875rem;
779
+ font-weight: 700;
780
+ letter-spacing: 0.04em;
781
+ text-transform: uppercase;
782
+ }
783
+
784
+ .mseva-citizen-dashboard .hero-title-styles {
785
+ margin: 0;
786
+ color: var(--mseva-blue-900);
787
+ font-size: clamp(1.75rem, 3vw, 2.5rem);
788
+ font-weight: 700;
789
+ letter-spacing: -0.02em;
790
+ }
791
+
792
+ .mseva-citizen-dashboard .hero-title-styles span {
793
+ color: var(--mseva-green-700);
794
+ }
795
+
796
+ .mseva-citizen-dashboard .heroSubtitleStyles {
797
+ max-width: 430px;
798
+ margin: 10px 0 22px;
799
+ color: var(--mseva-text-secondary);
800
+ font-size: 1rem;
801
+ opacity: 1;
802
+ }
803
+
804
+ .mseva-dashboard__search-label {
805
+ position: absolute;
806
+ width: 1px;
807
+ height: 1px;
808
+ margin: -1px;
809
+ overflow: hidden;
810
+ clip: rect(0, 0, 0, 0);
811
+ white-space: nowrap;
812
+ }
813
+
814
+ .mseva-citizen-dashboard .searchBarStyles {
815
+ width: min(100%, 540px);
816
+ min-height: 52px;
817
+ margin: 0;
818
+ padding: 3px 14px;
819
+ gap: 10px;
820
+ border: 1px solid var(--mseva-border-strong);
821
+ border-radius: var(--mseva-radius-md);
822
+ box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
823
+ }
824
+
825
+ .mseva-citizen-dashboard .searchBarStyles:focus-within {
826
+ border-color: var(--mseva-focus);
827
+ box-shadow: 0 0 0 3px rgba(11, 99, 206, 0.18);
828
+ }
829
+
830
+ .mseva-citizen-dashboard .searchIconStyles {
831
+ display: flex;
832
+ flex: 0 0 auto;
833
+ color: var(--mseva-blue-900);
834
+ }
835
+
836
+ .mseva-citizen-dashboard .searchInputStyles {
837
+ min-height: 44px;
838
+ margin: 0;
839
+ padding: 8px 0;
840
+ border: 0;
841
+ border-radius: 0;
842
+ box-shadow: none;
843
+ }
844
+
845
+ .mseva-citizen-dashboard .searchInputStyles:focus-visible {
846
+ outline: 0;
847
+ }
848
+
849
+ .mseva-dashboard__search-results,
850
+ .mseva-dashboard__empty-search {
851
+ position: absolute;
852
+ z-index: 2;
853
+ top: calc(100% - 18px);
854
+ left: 48px;
855
+ width: min(620px, calc(100% - 96px));
856
+ max-height: 460px;
857
+ padding: 18px;
858
+ overflow: auto;
859
+ color: var(--mseva-text);
860
+ background: var(--mseva-surface);
861
+ border: 1px solid var(--mseva-border);
862
+ border-radius: var(--mseva-radius-md);
863
+ box-shadow: 0 18px 36px rgba(15, 23, 42, 0.18);
864
+ }
865
+
866
+ .mseva-dashboard__search-results h2 {
867
+ margin: 0 0 12px;
868
+ font-size: 1rem;
869
+ }
870
+
871
+ .mseva-dashboard__empty-search {
872
+ padding: 14px 18px;
873
+ }
874
+
875
+ .mseva-dashboard__empty-search p {
876
+ margin: 0;
877
+ color: var(--mseva-text-secondary);
878
+ }
879
+
880
+ .mseva-dashboard__quick-actions,
881
+ .mseva-dashboard__services {
882
+ margin-top: 28px;
883
+ }
884
+
885
+ .mseva-dashboard__section-heading {
886
+ display: flex;
887
+ align-items: center;
888
+ justify-content: space-between;
889
+ margin-bottom: 12px;
890
+ }
891
+
892
+ .mseva-dashboard__section-heading h2,
893
+ .mseva-citizen-dashboard .new-card-header-title {
894
+ margin: 0;
895
+ color: var(--mseva-blue-900);
896
+ font-size: clamp(1.125rem, 2vw, 1.375rem);
897
+ font-weight: 700;
898
+ }
899
+
900
+ .mseva-citizen-dashboard .ServicesSection {
901
+ display: block;
902
+ padding: 0;
903
+ }
904
+
905
+ .mseva-citizen-dashboard .new-card-header-section {
906
+ display: flex;
907
+ margin-bottom: 16px;
908
+ padding: 0;
909
+ border: 0;
910
+ }
911
+
912
+ .mseva-citizen-dashboard .new-card-cards-grid {
913
+ display: grid;
914
+ width: 100%;
915
+ margin: 0;
916
+ gap: 14px;
917
+ }
918
+
919
+ .mseva-citizen-dashboard .new-card-root--quick-actions .new-card-cards-grid {
920
+ grid-template-columns: repeat(4, minmax(0, 1fr));
921
+ }
922
+
923
+ .mseva-citizen-dashboard .new-card-root--services .new-card-cards-grid {
924
+ grid-template-columns: repeat(auto-fit, minmax(156px, 1fr));
925
+ }
926
+
927
+ .mseva-citizen-dashboard .new-card-root--services {
928
+ padding: 0;
929
+ background: transparent;
930
+ box-shadow: none;
931
+ }
932
+
933
+ .mseva-citizen-dashboard .new-card-root--search-results .new-card-cards-grid {
934
+ grid-template-columns: repeat(2, minmax(0, 1fr));
935
+ }
936
+
937
+ .mseva-citizen-dashboard .new-card-option {
938
+ display: flex;
939
+ width: 100%;
940
+ min-width: 0;
941
+ min-height: 136px;
942
+ margin: 0;
943
+ padding: 18px 14px;
944
+ align-items: center;
945
+ justify-content: flex-start;
946
+ gap: 10px;
947
+ color: var(--mseva-text);
948
+ text-align: center;
949
+ cursor: pointer;
950
+ flex: none;
951
+ flex-direction: column;
952
+ border: 1px solid #dfe6ef;
953
+ border-radius: var(--mseva-radius-md);
954
+ background: var(--mseva-surface);
955
+ box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05);
956
+ transform: none;
957
+ }
958
+
959
+ .mseva-citizen-dashboard .new-card-option:hover {
960
+ border-color: var(--mseva-blue-600);
961
+ background: #f8fbff;
962
+ box-shadow: 0 8px 20px rgba(15, 55, 110, 0.12);
963
+ transform: translateY(-2px);
964
+ }
965
+
966
+ .mseva-citizen-dashboard .new-card-root--services .new-card-option {
967
+ width: 100% !important;
968
+ max-width: none !important;
969
+ min-width: 0 !important;
970
+ min-height: 150px;
971
+ align-self: stretch;
972
+ justify-content: center;
973
+ overflow: hidden;
974
+ border-color: #cfe2d5;
975
+ background: linear-gradient(145deg, #f1f8ff 0%, #edf8ef 100%);
976
+ box-shadow: 0 5px 14px rgba(7, 75, 152, 0.08);
977
+ }
978
+
979
+ .mseva-citizen-dashboard .new-card-root--services .new-card-option:nth-child(even) {
980
+ border-color: #d6e2f0;
981
+ background: linear-gradient(145deg, #f3f8ff 0%, #eaf4ff 100%);
982
+ }
983
+
984
+ .mseva-citizen-dashboard .new-card-root--services .new-card-option:hover {
985
+ border-color: var(--mseva-green-700);
986
+ background: linear-gradient(145deg, #e5f3ff 0%, #e3f5df 100%);
987
+ box-shadow: 0 10px 22px rgba(7, 75, 152, 0.14);
988
+ }
989
+
990
+ .mseva-citizen-dashboard .new-card-root--services .new-card-icon {
991
+ flex: 0 0 48px;
992
+ width: 48px !important;
993
+ height: 48px !important;
994
+ min-height: 48px !important;
995
+ }
996
+
997
+ .mseva-citizen-dashboard .new-card-root--services .new-card-icon svg {
998
+ width: 26px !important;
999
+ height: 26px !important;
1000
+ }
1001
+
1002
+ .mseva-citizen-dashboard .mseva-icon {
1003
+ --mseva-size: 52px;
1004
+ }
1005
+
1006
+ .mseva-citizen-dashboard .new-card-icon {
1007
+ display: inline-flex;
1008
+ width: 48px;
1009
+ height: 48px;
1010
+ min-height: 48px;
1011
+ margin: 0;
1012
+ align-items: center;
1013
+ justify-content: center;
1014
+ border-radius: 50%;
1015
+ }
1016
+
1017
+ .mseva-citizen-dashboard .new-card-icon svg {
1018
+ width: 26px;
1019
+ height: 26px;
1020
+ fill: #fff;
1021
+ }
1022
+
1023
+ .mseva-citizen-dashboard .new-card-icon--0 {
1024
+ background: #1464d2;
1025
+ }
1026
+ .mseva-citizen-dashboard .new-card-icon--1 {
1027
+ background: #18864c;
1028
+ }
1029
+ .mseva-citizen-dashboard .new-card-icon--2 {
1030
+ background: #7e3bb5;
1031
+ }
1032
+ .mseva-citizen-dashboard .new-card-icon--3 {
1033
+ background: #1477be;
1034
+ }
1035
+ .mseva-citizen-dashboard .new-card-icon--4 {
1036
+ background: #b13c72;
1037
+ }
1038
+ .mseva-citizen-dashboard .new-card-icon--5 {
1039
+ background: #0d7a67;
1040
+ }
1041
+ .mseva-citizen-dashboard .new-card-icon--6 {
1042
+ background: #a85a00;
1043
+ }
1044
+ .mseva-citizen-dashboard .new-card-icon--7 {
1045
+ background: #126aa7;
1046
+ }
1047
+ .mseva-citizen-dashboard .new-card-icon--8 {
1048
+ background: #7339b7;
1049
+ }
1050
+ .mseva-citizen-dashboard .new-card-icon--9 {
1051
+ background: #bc3b36;
1052
+ }
1053
+ .mseva-citizen-dashboard .new-card-icon--10 {
1054
+ background: #b85a13;
1055
+ }
1056
+ .mseva-citizen-dashboard .new-card-icon--11 {
1057
+ background: #8a6500;
1058
+ }
1059
+ .mseva-citizen-dashboard .new-card-icon--12 {
1060
+ background: #247a35;
1061
+ }
1062
+ .mseva-citizen-dashboard .new-card-icon--13 {
1063
+ background: #1c58bf;
1064
+ }
1065
+ .mseva-citizen-dashboard .new-card-icon--14 {
1066
+ background: #8242aa;
1067
+ }
1068
+
1069
+ .mseva-citizen-dashboard .new-card-service-name {
1070
+ display: block;
1071
+ margin: 0;
1072
+ color: var(--mseva-text);
1073
+ font-size: 0.9375rem;
1074
+ font-weight: 700;
1075
+ line-height: 1.3;
1076
+ }
1077
+
1078
+ .mseva-citizen-dashboard .new-card-access {
1079
+ display: none;
1080
+ }
1081
+
1082
+ .mseva-citizen-dashboard .new-card-root--quick-actions .new-card-option {
1083
+ min-height: 126px;
1084
+ flex-direction: row;
1085
+ padding: 16px;
1086
+ text-align: left;
1087
+ }
1088
+
1089
+ .mseva-citizen-dashboard .new-card-root--quick-actions .new-card-service-name {
1090
+ font-size: 0.875rem;
1091
+ }
1092
+
1093
+ .mseva-dashboard__show-more {
1094
+ display: flex;
1095
+ justify-content: center;
1096
+ margin-top: 22px;
1097
+ }
1098
+
1099
+ .mseva-dashboard__show-more-button {
1100
+ min-width: 164px;
1101
+ padding: 10px 22px;
1102
+ color: #fff;
1103
+ font-weight: 700;
1104
+ cursor: pointer;
1105
+ border: 1px solid var(--mseva-green-700);
1106
+ border-radius: var(--mseva-radius-md);
1107
+ background: var(--mseva-green-700);
1108
+ box-shadow: 0 4px 10px rgba(23, 107, 29, 0.18);
1109
+ }
1110
+
1111
+ .mseva-dashboard__show-more-button:hover {
1112
+ background: var(--mseva-green-800);
1113
+ }
1114
+
1115
+ @media (max-width: 900px) {
1116
+ .mseva-citizen-dashboard .new-card-root--quick-actions .new-card-cards-grid {
1117
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1118
+ }
1119
+ }
1120
+
1121
+ @media (max-width: 640px) {
1122
+ .navbar .mseva-brand-mark {
1123
+ width: 114px;
1124
+ height: 46px;
1125
+ flex-basis: 114px;
1126
+ }
1127
+
1128
+ .navbar .mseva-brand-mark img {
1129
+ width: 151px;
1130
+ transform: translate(-20px, -25px);
1131
+ }
1132
+
1133
+ .mseva-citizen-dashboard {
1134
+ margin-top: 12px;
1135
+ padding: 18px 14px 92px;
1136
+ }
1137
+
1138
+ .mseva-citizen-dashboard .hero-banner-styles {
1139
+ min-height: 246px;
1140
+ padding: 26px 20px;
1141
+ align-items: flex-start;
1142
+ background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.82) 48%, rgba(255, 255, 255, 0.28) 100%),
1143
+ linear-gradient(135deg, #dceeff 0%, #ffe8c7 100%);
1144
+ }
1145
+
1146
+ .mseva-citizen-dashboard .hero-banner-styles::after {
1147
+ right: -44px;
1148
+ bottom: -140px;
1149
+ width: 112%;
1150
+ height: 100%;
1151
+ opacity: 0.52;
1152
+ }
1153
+
1154
+ .mseva-citizen-dashboard .heroSubtitleStyles {
1155
+ max-width: 260px;
1156
+ font-size: 0.9375rem;
1157
+ }
1158
+
1159
+ .mseva-dashboard__search-results,
1160
+ .mseva-dashboard__empty-search {
1161
+ top: calc(100% - 8px);
1162
+ left: 14px;
1163
+ width: calc(100% - 28px);
1164
+ }
1165
+
1166
+ .mseva-dashboard__quick-actions,
1167
+ .mseva-dashboard__services {
1168
+ margin-top: 22px;
1169
+ }
1170
+
1171
+ .mseva-citizen-dashboard .new-card-root--quick-actions .new-card-cards-grid,
1172
+ .mseva-citizen-dashboard .new-card-root--search-results .new-card-cards-grid {
1173
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1174
+ }
1175
+
1176
+ .mseva-citizen-dashboard .new-card-root--services .new-card-cards-grid {
1177
+ grid-template-columns: repeat(4, minmax(0, 1fr));
1178
+ gap: 8px;
1179
+ }
1180
+
1181
+ .mseva-citizen-dashboard .new-card-option {
1182
+ min-height: 116px;
1183
+ padding: 12px 8px;
1184
+ }
1185
+
1186
+ .mseva-citizen-dashboard .new-card-root--services .new-card-option {
1187
+ min-height: 128px;
1188
+ padding: 12px 6px;
1189
+ }
1190
+
1191
+ .mseva-citizen-dashboard .new-card-root--services .new-card-icon {
1192
+ flex-basis: 42px;
1193
+ width: 42px !important;
1194
+ height: 42px !important;
1195
+ min-height: 42px !important;
1196
+ }
1197
+
1198
+ .mseva-citizen-dashboard .mseva-icon {
1199
+ --mseva-size: 44px;
1200
+ }
1201
+
1202
+ .mseva-citizen-dashboard .new-card-root--quick-actions .new-card-option {
1203
+ min-height: 118px;
1204
+ padding: 12px;
1205
+ flex-direction: column;
1206
+ text-align: center;
1207
+ }
1208
+
1209
+ .mseva-citizen-dashboard .new-card-icon {
1210
+ width: 42px;
1211
+ height: 42px;
1212
+ min-height: 42px;
1213
+ }
1214
+
1215
+ .mseva-citizen-dashboard .new-card-icon svg {
1216
+ width: 22px;
1217
+ height: 22px;
1218
+ }
1219
+
1220
+ .mseva-citizen-dashboard .new-card-service-name,
1221
+ .mseva-citizen-dashboard .new-card-root--quick-actions .new-card-service-name {
1222
+ overflow-wrap: anywhere;
1223
+ font-size: 0.75rem;
1224
+ line-height: 1.25;
1225
+ }
1226
+ }
1227
+
1228
+ @media (max-width: 360px) {
1229
+ .mseva-citizen-dashboard .new-card-root--services .new-card-cards-grid {
1230
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1231
+ }
1232
+ }
1233
+
1234
+ .moduleLinkHomePage {
1235
+ min-height: auto !important;
1236
+ margin-top: 96px !important;
1237
+ padding-bottom: 56px !important;
1238
+ background: #f5f9ff !important;
1239
+ }
1240
+
1241
+ .moduleLinkHomePage .moduleLinkHomePageContent {
1242
+ max-width: 1200px;
1243
+ }
1244
+
1245
+ .moduleLinkHomePage .moduleLinkHomePageBreadcrumb {
1246
+ margin: 0 0 14px !important;
1247
+ color: var(--mseva-blue-900) !important;
1248
+ font-weight: 600 !important;
1249
+ }
1250
+
1251
+ .moduleLinkHomePage .moduleLinkHomePageBanner {
1252
+ position: relative;
1253
+ overflow: hidden;
1254
+ padding: 42px 44px !important;
1255
+ border: 1px solid rgba(255, 255, 255, 0.25);
1256
+ border-radius: 20px !important;
1257
+ background: linear-gradient(118deg, #063f84 0%, #0b63ce 62%, #248c45 100%) !important;
1258
+ box-shadow: 0 16px 34px rgba(7, 75, 152, 0.18);
1259
+ text-align: left !important;
1260
+ }
1261
+
1262
+ .moduleLinkHomePage .moduleLinkHomePageBanner::after {
1263
+ position: absolute;
1264
+ right: -60px;
1265
+ bottom: -105px;
1266
+ width: 290px;
1267
+ height: 290px;
1268
+ content: "";
1269
+ border: 34px solid rgba(255, 255, 255, 0.12);
1270
+ border-radius: 50%;
1271
+ }
1272
+
1273
+ .moduleLinkHomePage .moduleLinkHomePageTitle {
1274
+ position: relative;
1275
+ z-index: 1;
1276
+ padding-left: 0 !important;
1277
+ margin: 0 !important;
1278
+ color: #fff !important;
1279
+ font-size: clamp(2rem, 3vw, 2.75rem) !important;
1280
+ letter-spacing: -0.02em;
1281
+ text-align: left !important;
1282
+ }
1283
+
1284
+ .moduleLinkHomePage .moduleLinkHomePageServicesTitle {
1285
+ margin: 30px 0 16px !important;
1286
+ color: var(--mseva-blue-900) !important;
1287
+ font-size: 1.25rem !important;
1288
+ font-weight: 800 !important;
1289
+ }
1290
+
1291
+ .module-home-cards .chc-card-container,
1292
+ .module-home-cards .chcwe-card-container {
1293
+ grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
1294
+ gap: 18px !important;
1295
+ margin: 0 !important;
1296
+ }
1297
+
1298
+ .module-home-cards .chc-card,
1299
+ .module-home-cards .chcwe-card {
1300
+ min-height: 128px;
1301
+ padding: 24px !important;
1302
+ border: 1px solid #d8e5f4 !important;
1303
+ border-radius: 16px !important;
1304
+ background: #fff !important;
1305
+ background-image: none !important;
1306
+ box-shadow: 0 6px 18px rgba(7, 75, 152, 0.08) !important;
1307
+ transform: translateY(0) scale(1) !important;
1308
+ }
1309
+
1310
+ .module-home-cards .chc-card:hover,
1311
+ .module-home-cards .chc-card:focus,
1312
+ .module-home-cards .chcwe-card:hover,
1313
+ .module-home-cards .chcwe-card:focus {
1314
+ border-color: #73b485 !important;
1315
+ background: linear-gradient(135deg, #fff 0%, #f0f9f1 100%) !important;
1316
+ box-shadow: 0 12px 24px rgba(7, 75, 152, 0.14) !important;
1317
+ transform: translateY(-3px) scale(1) !important;
1318
+ }
1319
+
1320
+ .module-home-cards .chc-card > div:first-child,
1321
+ .module-home-cards .chcwe-icon {
1322
+ width: 56px !important;
1323
+ height: 56px !important;
1324
+ border-radius: 14px !important;
1325
+ background: #e9f3ff !important;
1326
+ color: var(--mseva-blue-700) !important;
1327
+ box-shadow: none !important;
1328
+ }
1329
+
1330
+ .module-home-cards .chc-card--1 > div:first-child,
1331
+ .module-home-cards .chcwe-card:nth-child(even) .chcwe-icon {
1332
+ background: #eaf7ed !important;
1333
+ color: var(--mseva-green-700) !important;
1334
+ }
1335
+
1336
+ .module-home-cards .chc-card > div:nth-child(2) > div:first-child,
1337
+ .module-home-cards .chcwe-title {
1338
+ color: var(--mseva-text) !important;
1339
+ font-size: 1rem !important;
1340
+ font-weight: 800 !important;
1341
+ }
1342
+
1343
+ .module-home-cards .chc-card > div:last-child,
1344
+ .module-home-cards .chcwe-arrow-container {
1345
+ width: 34px !important;
1346
+ height: 34px !important;
1347
+ border: 1px solid #d8e5f4;
1348
+ border-radius: 50% !important;
1349
+ background: #fff !important;
1350
+ }
1351
+
1352
+ .pet-citizen .app-container {
1353
+ margin-top: 96px !important;
1354
+ padding: 20px 40px 48px !important;
1355
+ }
1356
+
1357
+ /* English citizen entry page: keep the login flow intact, with the mSeva Punjab visual language. */
1358
+ .login-page-cover--select-language {
1359
+ min-height: calc(100vh - 96px);
1360
+ margin-top: 96px;
1361
+ padding: 24px 28px 36px;
1362
+ background: radial-gradient(circle at 8% 8%, rgba(22, 128, 58, 0.16), transparent 30%), linear-gradient(135deg, #eef5fc 0%, #f7fbf8 100%);
1363
+ }
1364
+
1365
+ .login-page-cover--select-language .login-container {
1366
+ width: min(100%, 1260px);
1367
+ min-height: min(680px, calc(100vh - 156px));
1368
+ border: 1px solid #d8e5f2;
1369
+ border-radius: 18px;
1370
+ background: #ffffff;
1371
+ box-shadow: 0 20px 48px rgba(7, 75, 152, 0.14);
1372
+ }
1373
+
1374
+ .login-page-cover--select-language .login-hero-panel {
1375
+ position: relative;
1376
+ overflow: hidden;
1377
+ background: radial-gradient(circle at 10% 12%, rgba(67, 184, 81, 0.38), transparent 28%),
1378
+ linear-gradient(140deg, #063b74 0%, #0755a8 58%, #16803a 138%);
1379
+ }
1380
+
1381
+ .login-page-cover--select-language .login-hero-panel::after {
1382
+ position: absolute;
1383
+ right: -110px;
1384
+ bottom: -120px;
1385
+ width: 330px;
1386
+ height: 330px;
1387
+ border: 1px solid rgba(255, 255, 255, 0.25);
1388
+ border-radius: 50%;
1389
+ content: "";
1390
+ }
1391
+
1392
+ .login-page-cover--select-language .hero-content {
1393
+ position: relative;
1394
+ z-index: 1;
1395
+ }
1396
+
1397
+ .login-page-cover--select-language .hero-title,
1398
+ .login-page-cover--select-language .hero-description,
1399
+ .login-page-cover--select-language .feature-text {
1400
+ color: #ffffff !important;
1401
+ }
1402
+
1403
+ .login-page-cover--select-language .hero-icon-circle,
1404
+ .login-page-cover--select-language .feature-icon {
1405
+ border-color: rgba(255, 255, 255, 0.34);
1406
+ background: rgba(255, 255, 255, 0.14);
1407
+ }
1408
+
1409
+ .login-page-cover--select-language .login-form-panel {
1410
+ background: linear-gradient(180deg, #fbfdff 0%, #f4f9fd 100%);
1411
+ }
1412
+
1413
+ .login-page-cover--select-language .login-wrapper {
1414
+ max-width: 470px;
1415
+ padding: 36px;
1416
+ border: 1px solid #dbe7f4;
1417
+ border-radius: 16px;
1418
+ box-shadow: 0 12px 28px rgba(7, 75, 152, 0.1);
1419
+ }
1420
+
1421
+ .login-page-cover--select-language .login-title {
1422
+ color: #074b98;
1423
+ }
1424
+
1425
+ .login-page-cover--select-language .login-subtitle,
1426
+ .login-page-cover--select-language .label,
1427
+ .login-page-cover--select-language .account-link {
1428
+ color: #315a83;
1429
+ }
1430
+
1431
+ .login-page-cover--select-language .link,
1432
+ .login-page-cover--select-language .resend,
1433
+ .login-page-cover--select-language .resendIn span {
1434
+ color: #16803a;
1435
+ }
1436
+
1437
+ .login-page-cover--select-language .submit-bar {
1438
+ border-radius: 9px;
1439
+ background: linear-gradient(135deg, #087339 0%, #169a48 100%);
1440
+ box-shadow: 0 8px 18px rgba(16, 128, 57, 0.22);
1441
+ }
1442
+
1443
+ @media (max-width: 640px) {
1444
+ .app-container {
1445
+ margin-top: 76px !important;
1446
+ padding: 16px 14px 32px !important;
1447
+ }
1448
+
1449
+ .bread-crumb {
1450
+ margin-bottom: 16px;
1451
+ font-size: 0.8125rem;
1452
+ }
1453
+
1454
+ .app-container > header {
1455
+ margin-bottom: 16px;
1456
+ font-size: 1.65rem !important;
1457
+ }
1458
+
1459
+ .applications-list-container > .card {
1460
+ padding: 22px 16px;
1461
+ }
1462
+
1463
+ .applications-list-container .submit-bar,
1464
+ .action-button-myapplication .submit-bar {
1465
+ width: 100%;
1466
+ }
1467
+
1468
+ .action-button-myapplication {
1469
+ display: grid;
1470
+ grid-template-columns: 1fr;
1471
+ }
1472
+
1473
+ .citizen-my-applications,
1474
+ .ads-my-bookings {
1475
+ padding: 0 0 32px;
1476
+ }
1477
+
1478
+ .citizen-my-applications header {
1479
+ margin-bottom: 16px;
1480
+ font-size: 1.65rem !important;
1481
+ }
1482
+
1483
+ .citizen-my-applications > .card,
1484
+ .citizen-my-applications > div .card {
1485
+ padding: 18px;
1486
+ }
1487
+
1488
+ .citizen-my-applications--ptr .card,
1489
+ .citizen-my-applications--pt .card,
1490
+ .citizen-my-applications--tl .card,
1491
+ .citizen-my-applications--ndc .card,
1492
+ .citizen-my-applications--chb .card,
1493
+ .citizen-my-applications--rent-and-lease .card,
1494
+ .citizen-my-applications--garbage-collection .card,
1495
+ .citizen-my-applications--firenoc .card {
1496
+ grid-template-columns: 1fr;
1497
+ gap: 12px;
1498
+ }
1499
+
1500
+ .citizen-my-applications .card > .key-note-pair {
1501
+ width: auto;
1502
+ }
1503
+
1504
+ .citizen-my-applications .action-button-myapplication,
1505
+ .citizen-my-applications .ral-my-properties-actions,
1506
+ .citizen-my-applications .gc-style-0b9a47eb61,
1507
+ .citizen-my-applications .firenoc-my-applications__actions {
1508
+ display: grid;
1509
+ grid-template-columns: 1fr;
1510
+ }
1511
+
1512
+ .citizen-my-applications .action-button-myapplication .submit-bar,
1513
+ .citizen-my-applications .ral-my-properties-actions .submit-bar,
1514
+ .citizen-my-applications .gc-style-0b9a47eb61 .submit-bar {
1515
+ width: 100%;
1516
+ }
1517
+
1518
+ .citizen-my-applications .ndc-application-overview-custom {
1519
+ align-items: stretch;
1520
+ flex-direction: column;
1521
+ text-align: center;
1522
+ }
1523
+
1524
+ .moduleLinkHomePage {
1525
+ margin-top: 76px !important;
1526
+ padding-bottom: 34px !important;
1527
+ }
1528
+
1529
+ .moduleLinkHomePage .moduleLinkHomePageContent {
1530
+ padding: 0 16px !important;
1531
+ }
1532
+
1533
+ .moduleLinkHomePage .moduleLinkHomePageBanner {
1534
+ padding: 30px 24px !important;
1535
+ border-radius: 16px !important;
1536
+ }
1537
+
1538
+ .moduleLinkHomePage .moduleLinkHomePageTitle {
1539
+ font-size: 2rem !important;
1540
+ }
1541
+
1542
+ .module-home-cards .chc-card-container,
1543
+ .module-home-cards .chcwe-card-container {
1544
+ grid-template-columns: 1fr !important;
1545
+ gap: 12px !important;
1546
+ }
1547
+
1548
+ .module-home-cards .chc-card,
1549
+ .module-home-cards .chcwe-card {
1550
+ min-height: 112px;
1551
+ padding: 18px !important;
1552
+ }
1553
+
1554
+ .pet-citizen .app-container {
1555
+ margin-top: 76px !important;
1556
+ padding: 16px 14px 32px !important;
1557
+ }
1558
+
1559
+ .login-page-cover--select-language {
1560
+ min-height: calc(100vh - 76px);
1561
+ margin-top: 76px;
1562
+ padding: 16px 14px 28px;
1563
+ }
1564
+
1565
+ .login-page-cover--select-language .login-container {
1566
+ min-height: calc(100vh - 120px);
1567
+ border-radius: 16px;
1568
+ }
1569
+
1570
+ .login-page-cover--select-language .login-wrapper {
1571
+ padding: 28px 22px;
1572
+ }
1573
+ }
1574
+
1575
+ /* Employee portal: use the same mSeva visual language without affecting inbox flows. */
1576
+ .employee .loginContainer {
1577
+ background:
1578
+ radial-gradient(circle at 10% 15%, rgba(66, 169, 40, 0.14), transparent 29rem),
1579
+ linear-gradient(145deg, #f7fbff 0%, #eef7f0 100%);
1580
+ }
1581
+
1582
+ .employee .employee-login-page {
1583
+ min-height: calc(100vh - 88px);
1584
+ padding: 48px 20px;
1585
+ background: transparent;
1586
+ }
1587
+
1588
+ .employee .employee-login-container {
1589
+ min-height: auto;
1590
+ max-width: 520px;
1591
+ padding: 24px 0;
1592
+ }
1593
+
1594
+ .employee .employee-login-icon-circle {
1595
+ width: 76px;
1596
+ height: 76px;
1597
+ margin-bottom: 18px;
1598
+ background: linear-gradient(135deg, var(--mseva-blue-800) 0%, var(--mseva-green-700) 100%);
1599
+ box-shadow: 0 10px 24px rgba(7, 75, 152, 0.22);
1600
+ }
1601
+
1602
+ .employee .employee-login-branding {
1603
+ margin-bottom: 24px;
1604
+ }
1605
+
1606
+ .employee .employee-upyog-title {
1607
+ color: var(--mseva-blue-900);
1608
+ letter-spacing: 0.02em;
1609
+ }
1610
+
1611
+ .employee .employee-upyog-subtitle,
1612
+ .employee .employee-login-footer,
1613
+ .employee .employee-login-footer span {
1614
+ color: var(--mseva-text-secondary);
1615
+ }
1616
+
1617
+ .employee .employee-login-card {
1618
+ max-width: 520px;
1619
+ padding: 32px;
1620
+ border: 1px solid #d9e6f2;
1621
+ border-radius: var(--mseva-radius-lg);
1622
+ background: rgba(255, 255, 255, 0.96);
1623
+ box-shadow: 0 18px 38px rgba(7, 75, 152, 0.12);
1624
+ }
1625
+
1626
+ .employee .employee-login-form .card-header {
1627
+ border-bottom: 1px solid #e4edf6;
1628
+ margin-bottom: 20px;
1629
+ }
1630
+
1631
+ .employee .employee-login-form .card-header h2,
1632
+ .employee .employee-login-form .card-label {
1633
+ color: var(--mseva-blue-900) !important;
1634
+ }
1635
+
1636
+ .employee .employee-login-form input,
1637
+ .employee .employee-login-form select,
1638
+ .employee .employee-login-form .employee-city-dropdown {
1639
+ min-height: var(--mseva-control-min);
1640
+ border: 1px solid var(--mseva-border) !important;
1641
+ border-radius: var(--mseva-radius-sm) !important;
1642
+ box-shadow: none !important;
1643
+ }
1644
+
1645
+ .employee .employee-login-form input:focus,
1646
+ .employee .employee-login-form select:focus,
1647
+ .employee .employee-login-form .employee-city-dropdown:focus {
1648
+ border-color: var(--mseva-green-700) !important;
1649
+ box-shadow: 0 0 0 3px rgba(40, 127, 29, 0.15) !important;
1650
+ }
1651
+
1652
+ .employee .employee-login-form .submit-bar,
1653
+ .employee .employee-login-form button[type="submit"] {
1654
+ width: 100%;
1655
+ min-height: 46px;
1656
+ margin-top: 22px !important;
1657
+ border: 0 !important;
1658
+ border-radius: var(--mseva-radius-sm) !important;
1659
+ background: linear-gradient(135deg, var(--mseva-green-800) 0%, var(--mseva-green-600) 100%) !important;
1660
+ box-shadow: 0 8px 18px rgba(33, 111, 23, 0.22) !important;
1661
+ }
1662
+
1663
+ .employee .employee-login-form .submit-bar:hover,
1664
+ .employee .employee-login-form button[type="submit"]:hover {
1665
+ background: linear-gradient(135deg, var(--mseva-green-800) 0%, var(--mseva-green-700) 100%) !important;
1666
+ box-shadow: 0 11px 22px rgba(33, 111, 23, 0.28) !important;
1667
+ }
1668
+
1669
+ .employee .employee-login-form .secondary-label,
1670
+ .employee .employee-login-footer a {
1671
+ color: var(--mseva-green-800) !important;
1672
+ }
1673
+
1674
+ /* Keep the employee header layout unchanged while using the mSeva brand mark. */
1675
+ .employee .topbar .employee-mseva-brand-mark {
1676
+ width: 151px;
1677
+ height: 46px;
1678
+ flex: 0 0 151px;
1679
+ margin-right: 12px;
1680
+ overflow: hidden;
1681
+ }
1682
+
1683
+ .employee .topbar .employee-mseva-brand-mark img {
1684
+ display: block;
1685
+ width: 151px;
1686
+ max-width: none;
1687
+ height: auto;
1688
+ transform: translate(-20px, -25px);
1689
+ }
1690
+
1691
+ /* Employee navigation rail and mobile drawer. */
1692
+ .employee .sidebar {
1693
+ top: 76px;
1694
+ height: calc(100vh - 76px);
1695
+ margin-top: 0 !important;
1696
+ padding: 12px 0 20px;
1697
+ background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%) !important;
1698
+ border-right: 1px solid #d8e5f2 !important;
1699
+ border-radius: 0;
1700
+ box-shadow: 4px 0 16px rgba(7, 75, 152, 0.08);
1701
+ }
1702
+
1703
+ .employee .sidebar .submenu-container,
1704
+ .employee .employee-mobile-sidebar .submenu-container {
1705
+ margin: 0 !important;
1706
+ padding: 0 !important;
1707
+ }
1708
+
1709
+ .employee .sidebar .sidebar-link,
1710
+ .employee .employee-mobile-sidebar .sidebar-link {
1711
+ display: flex !important;
1712
+ min-height: 48px;
1713
+ align-items: center !important;
1714
+ justify-content: space-between !important;
1715
+ margin: 3px 8px;
1716
+ padding: 10px 12px !important;
1717
+ border: 1px solid transparent;
1718
+ border-radius: 8px;
1719
+ background: transparent !important;
1720
+ cursor: pointer !important;
1721
+ transition: background-color 0.2s ease, border-color 0.2s ease;
1722
+ }
1723
+
1724
+ .employee .sidebar .sidebar-link:hover,
1725
+ .employee .employee-mobile-sidebar .sidebar-link:hover {
1726
+ border-color: #d7e8dc;
1727
+ background: var(--mseva-green-100) !important;
1728
+ }
1729
+
1730
+ .employee .sidebar .sidebar-link.active,
1731
+ .employee .employee-mobile-sidebar .sidebar-link.active {
1732
+ border-color: #b9dbb4;
1733
+ background: var(--mseva-green-100) !important;
1734
+ }
1735
+
1736
+ .employee .sidebar .actions,
1737
+ .employee .employee-mobile-sidebar .actions {
1738
+ display: flex !important;
1739
+ min-width: 0;
1740
+ flex: 1;
1741
+ align-items: center !important;
1742
+ gap: 12px !important;
1743
+ padding: 0 !important;
1744
+ }
1745
+
1746
+ .employee .sidebar .actions svg,
1747
+ .employee .employee-mobile-sidebar .actions svg {
1748
+ width: 20px !important;
1749
+ height: 20px !important;
1750
+ flex-shrink: 0;
1751
+ margin: 0 !important;
1752
+ color: var(--mseva-blue-700) !important;
1753
+ fill: var(--mseva-blue-700) !important;
1754
+ }
1755
+
1756
+ .employee .sidebar .sidebar-link:hover .actions svg,
1757
+ .employee .sidebar .sidebar-link.active .actions svg,
1758
+ .employee .employee-mobile-sidebar .sidebar-link:hover .actions svg,
1759
+ .employee .employee-mobile-sidebar .sidebar-link.active .actions svg {
1760
+ color: var(--mseva-green-800) !important;
1761
+ fill: var(--mseva-green-800) !important;
1762
+ }
1763
+
1764
+ .employee .sidebar .actions span,
1765
+ .employee .sidebar .actions a,
1766
+ .employee .sidebar .custom-link,
1767
+ .employee .employee-mobile-sidebar .actions span,
1768
+ .employee .employee-mobile-sidebar .actions a,
1769
+ .employee .employee-mobile-sidebar .custom-link {
1770
+ overflow: hidden;
1771
+ color: var(--mseva-text) !important;
1772
+ font-size: 0.875rem !important;
1773
+ font-weight: 600 !important;
1774
+ text-decoration: none !important;
1775
+ text-overflow: ellipsis;
1776
+ white-space: nowrap;
1777
+ }
1778
+
1779
+ .employee .sidebar .dropdown-link,
1780
+ .employee .employee-mobile-sidebar .dropdown-link {
1781
+ display: flex !important;
1782
+ min-height: 40px;
1783
+ align-items: center;
1784
+ margin: 2px 8px 2px 30px;
1785
+ padding: 8px 12px !important;
1786
+ border-radius: 6px;
1787
+ color: var(--mseva-text-secondary) !important;
1788
+ font-size: 0.8125rem !important;
1789
+ text-decoration: none !important;
1790
+ }
1791
+
1792
+ .employee .sidebar .dropdown-link:hover,
1793
+ .employee .sidebar .dropdown-link.active,
1794
+ .employee .employee-mobile-sidebar .dropdown-link:hover,
1795
+ .employee .employee-mobile-sidebar .dropdown-link.active {
1796
+ background: var(--mseva-blue-100) !important;
1797
+ color: var(--mseva-blue-900) !important;
1798
+ }
1799
+
1800
+ .employee .sidebar .search-icon-wrapper,
1801
+ .employee .employee-mobile-sidebar .search-icon-wrapper {
1802
+ display: flex !important;
1803
+ align-items: center !important;
1804
+ gap: 8px !important;
1805
+ margin: 0 8px 12px !important;
1806
+ padding: 9px 10px !important;
1807
+ border: 1px solid #cbd5e1;
1808
+ border-radius: 8px;
1809
+ background: #ffffff !important;
1810
+ }
1811
+
1812
+ .employee .sidebar .search-icon-wrapper svg,
1813
+ .employee .employee-mobile-sidebar .search-icon-wrapper svg {
1814
+ width: 18px !important;
1815
+ height: 18px !important;
1816
+ margin: 0 !important;
1817
+ color: var(--mseva-text-muted) !important;
1818
+ fill: var(--mseva-text-muted) !important;
1819
+ }
1820
+
1821
+ .employee .sidebar .employee-search-input,
1822
+ .employee .employee-mobile-sidebar .employee-search-input {
1823
+ width: 100% !important;
1824
+ min-width: 0;
1825
+ border: 0 !important;
1826
+ outline: 0 !important;
1827
+ background: transparent !important;
1828
+ box-shadow: none !important;
1829
+ color: var(--mseva-text) !important;
1830
+ font-size: 0.8125rem !important;
1831
+ }
1832
+
1833
+ .employee .sidebar .employee-search-input::placeholder,
1834
+ .employee .employee-mobile-sidebar .employee-search-input::placeholder {
1835
+ color: var(--mseva-text-muted) !important;
1836
+ }
1837
+
1838
+ .employee .sidebar.sidebar--collapsed {
1839
+ width: 64px !important;
1840
+ }
1841
+
1842
+ .employee .sidebar.sidebar--collapsed .sidebar-link {
1843
+ justify-content: center !important;
1844
+ margin: 5px 7px;
1845
+ padding: 11px !important;
1846
+ }
1847
+
1848
+ .employee .sidebar.sidebar--collapsed .sidebar-link > div:last-child:not(:only-child) {
1849
+ display: none !important;
1850
+ }
1851
+
1852
+ .employee .sidebar.sidebar--collapsed .actions {
1853
+ flex: 0 0 100%;
1854
+ justify-content: center;
1855
+ }
1856
+
1857
+ .employee .sidebar.sidebar--collapsed .actions span,
1858
+ .employee .sidebar.sidebar--collapsed .actions .custom-link,
1859
+ .employee .sidebar.sidebar--collapsed .employee-search-input {
1860
+ display: none !important;
1861
+ }
1862
+
1863
+ .employee .sidebar.sidebar--collapsed .search-icon-wrapper {
1864
+ justify-content: center;
1865
+ margin: 0 7px 12px !important;
1866
+ padding: 11px !important;
1867
+ border-color: transparent;
1868
+ background: transparent !important;
1869
+ }
1870
+
1871
+ .employee .employee-mobile-sidebar {
1872
+ background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%) !important;
1873
+ box-shadow: 8px 0 24px rgba(7, 75, 152, 0.18) !important;
1874
+ }
1875
+
1876
+ .employee .employee-mobile-sidebar > div:first-child {
1877
+ border-bottom-color: #d8e5f2 !important;
1878
+ background: #ffffff;
1879
+ }
1880
+
1881
+ /* Shared employee inbox surfaces, filters, and result tables. */
1882
+ .employee .InboxComposerWrapper,
1883
+ .employee .new-inbox-wrapper {
1884
+ color: var(--mseva-text);
1885
+ }
1886
+
1887
+ .employee .InboxComposerWrapper .complaint-links-container,
1888
+ .employee .InboxComposerWrapper .filter-card,
1889
+ .employee .InboxComposerWrapper .search-complaint-container,
1890
+ .employee .InboxComposerWrapper .search-container,
1891
+ .employee .new-inbox-top-filters,
1892
+ .employee .new-inbox-topbar,
1893
+ .employee .new-inbox-table-card {
1894
+ border: 1px solid #d8e5f2;
1895
+ border-radius: var(--mseva-radius-md);
1896
+ background: #ffffff;
1897
+ box-shadow: 0 7px 18px rgba(7, 75, 152, 0.07);
1898
+ }
1899
+
1900
+ .employee .InboxComposerWrapper .complaint-links-container {
1901
+ overflow: hidden;
1902
+ }
1903
+
1904
+ .employee .InboxComposerWrapper > .inboxLinks {
1905
+ align-self: flex-start;
1906
+ min-height: 0;
1907
+ }
1908
+
1909
+ .employee .InboxComposerWrapper > .inboxLinks .complaint-links-container .body:empty {
1910
+ display: none;
1911
+ }
1912
+
1913
+ .employee .InboxComposerWrapper .complaint-links-container .header,
1914
+ .employee .InboxComposerWrapper .filter-card .heading {
1915
+ border-bottom-color: #e1ebf5;
1916
+ }
1917
+
1918
+ .employee .InboxComposerWrapper .complaint-links-container .header .logo {
1919
+ border-radius: 10px;
1920
+ background: var(--mseva-blue-100);
1921
+ }
1922
+
1923
+ .employee .InboxComposerWrapper .complaint-links-container .header .logo svg,
1924
+ .employee .InboxComposerWrapper .complaint-links-container .header .logo svg path {
1925
+ fill: var(--mseva-blue-700);
1926
+ }
1927
+
1928
+ .employee .InboxComposerWrapper .complaint-links-container .header .text,
1929
+ .employee .InboxComposerWrapper .filter-card .filter-label,
1930
+ .employee .InboxComposerWrapper .filter-card .filter-label svg {
1931
+ color: var(--mseva-blue-900) !important;
1932
+ fill: var(--mseva-blue-900) !important;
1933
+ }
1934
+
1935
+ .employee .InboxComposerWrapper .complaint-links-container .body .link,
1936
+ .employee .InboxComposerWrapper .clear-search,
1937
+ .employee .InboxComposerWrapper .clear-search .link-label {
1938
+ color: var(--mseva-green-800) !important;
1939
+ }
1940
+
1941
+ .employee .InboxComposerWrapper .complaint-links-container .body .inbox-total,
1942
+ .employee .inbox-count {
1943
+ background: var(--mseva-blue-900) !important;
1944
+ }
1945
+
1946
+ .employee .InboxComposerWrapper .filter-card {
1947
+ padding: 18px !important;
1948
+ }
1949
+
1950
+ .employee .InboxComposerWrapper .filter-card .sub-filter-label,
1951
+ .employee .InboxComposerWrapper .filter-form-field p {
1952
+ color: var(--mseva-text-secondary) !important;
1953
+ }
1954
+
1955
+ .employee .InboxComposerWrapper .search-complaint-container,
1956
+ .employee .InboxComposerWrapper .search-container {
1957
+ padding: 18px !important;
1958
+ }
1959
+
1960
+ .employee .InboxComposerWrapper .search-complaint-container input,
1961
+ .employee .InboxComposerWrapper .search-container input {
1962
+ border-color: var(--mseva-border) !important;
1963
+ box-shadow: none !important;
1964
+ }
1965
+
1966
+ .employee .InboxComposerWrapper .search-complaint-container input:focus,
1967
+ .employee .InboxComposerWrapper .search-container input:focus {
1968
+ border-color: var(--mseva-green-700) !important;
1969
+ box-shadow: 0 0 0 3px rgba(40, 127, 29, 0.14) !important;
1970
+ }
1971
+
1972
+ @media (min-width: 780px) {
1973
+ .employee .InboxComposerWrapper .search-container {
1974
+ width: auto !important;
1975
+ margin-left: 0 !important;
1976
+ align-self: flex-start;
1977
+ }
1978
+
1979
+ .employee .InboxComposerWrapper .search-container .search-complaint-container {
1980
+ margin: 0;
1981
+ }
1982
+
1983
+ .employee .InboxComposerWrapper .search-container .complaint-input-container {
1984
+ display: grid !important;
1985
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(148px, 0.72fr) !important;
1986
+ gap: 16px;
1987
+ align-items: end;
1988
+ }
1989
+
1990
+ .employee .InboxComposerWrapper .search-container .complaint-input-container > .form-field {
1991
+ width: auto !important;
1992
+ margin: 0 !important;
1993
+ padding-right: 0 !important;
1994
+ }
1995
+
1996
+ .employee .InboxComposerWrapper .search-container .search-action-wrapper {
1997
+ display: flex !important;
1998
+ width: auto !important;
1999
+ max-width: none !important;
2000
+ min-height: var(--mseva-control-min);
2001
+ margin: 0 !important;
2002
+ align-items: center;
2003
+ justify-content: flex-start;
2004
+ text-align: left;
2005
+ }
2006
+
2007
+ .employee .InboxComposerWrapper .search-container .search-action-wrapper > div {
2008
+ display: flex;
2009
+ width: 100%;
2010
+ align-items: center;
2011
+ gap: 12px;
2012
+ }
2013
+
2014
+ .employee .InboxComposerWrapper .search-container .search-action-wrapper .submit-bar {
2015
+ width: 100%;
2016
+ min-width: 132px;
2017
+ margin: 0;
2018
+ }
2019
+
2020
+ .employee .InboxComposerWrapper .search-container .search-action-wrapper .clear-search {
2021
+ padding-top: 0 !important;
2022
+ white-space: nowrap;
2023
+ }
2024
+ }
2025
+
2026
+ .employee .InboxComposerWrapper .result .card,
2027
+ .employee .InboxComposerWrapper .table,
2028
+ .employee .InboxComposerWrapper .employee-data-table {
2029
+ border: 1px solid #d8e5f2;
2030
+ border-radius: var(--mseva-radius-md);
2031
+ box-shadow: 0 7px 18px rgba(7, 75, 152, 0.07);
2032
+ }
2033
+
2034
+ .employee .new-inbox-wrapper {
2035
+ margin-top: 24px;
2036
+ padding: 24px;
2037
+ border-radius: var(--mseva-radius-lg);
2038
+ background: linear-gradient(145deg, #f8fbff 0%, #f3faf3 100%);
2039
+ }
2040
+
2041
+ .employee .new-inbox-header {
2042
+ color: var(--mseva-blue-900);
2043
+ font-size: clamp(1.55rem, 2vw, 2rem);
2044
+ }
2045
+
2046
+ .employee .new-inbox-count-pill {
2047
+ min-width: 32px;
2048
+ height: 32px;
2049
+ background: var(--mseva-blue-900);
2050
+ box-shadow: 0 4px 10px rgba(7, 75, 152, 0.18);
2051
+ }
2052
+
2053
+ .employee .new-inbox-top-filters {
2054
+ padding: 18px;
2055
+ }
2056
+
2057
+ .employee .new-inbox-topbar {
2058
+ border-color: #d8e5f2;
2059
+ box-shadow: 0 7px 18px rgba(7, 75, 152, 0.07);
2060
+ }
2061
+
2062
+ .employee .new-inbox-tab {
2063
+ border-color: #cbdbe9;
2064
+ background: #f7fbff;
2065
+ color: var(--mseva-blue-900);
2066
+ }
2067
+
2068
+ .employee .new-inbox-tab:hover {
2069
+ border-color: #a9d0ad;
2070
+ background: var(--mseva-green-100);
2071
+ }
2072
+
2073
+ .employee .new-inbox-tab-active {
2074
+ border-color: var(--mseva-green-800);
2075
+ background: var(--mseva-green-800);
2076
+ box-shadow: 0 5px 12px rgba(33, 111, 23, 0.2);
2077
+ }
2078
+
2079
+ .employee .new-inbox-tab-count {
2080
+ background: #e2edf8;
2081
+ color: var(--mseva-blue-900);
2082
+ }
2083
+
2084
+ .employee .new-inbox-tab-count-active {
2085
+ background: rgba(255, 255, 255, 0.22);
2086
+ color: #ffffff;
2087
+ }
2088
+
2089
+ .employee .new-inbox-search {
2090
+ border-color: #cbdbe9;
2091
+ background: #f8fbff;
2092
+ }
2093
+
2094
+ .employee .new-inbox-search:focus-within {
2095
+ border-color: var(--mseva-green-700);
2096
+ box-shadow: 0 0 0 3px rgba(40, 127, 29, 0.14);
2097
+ }
2098
+
2099
+ .employee .new-inbox-search-input {
2100
+ color: var(--mseva-text);
2101
+ }
2102
+
2103
+ .employee .new-inbox-search-icon svg circle,
2104
+ .employee .new-inbox-search-icon svg line {
2105
+ stroke: var(--mseva-text-muted);
2106
+ }
2107
+
2108
+ .employee .new-inbox-table-header {
2109
+ border-bottom-color: #d8e5f2;
2110
+ background: #edf5fc;
2111
+ color: var(--mseva-blue-900);
2112
+ }
2113
+
2114
+ .employee .new-inbox-pagination {
2115
+ border-top-color: #d8e5f2;
2116
+ color: var(--mseva-text-secondary);
2117
+ }
2118
+
2119
+ .employee .new-inbox-pagination-button,
2120
+ .employee .new-inbox-pagination-select {
2121
+ border-color: #cbdbe9;
2122
+ color: var(--mseva-blue-900);
2123
+ }
2124
+
2125
+ .employee .new-inbox-pagination-button:not(.new-inbox-pagination-button-disabled):hover {
2126
+ border-color: var(--mseva-green-700);
2127
+ background: var(--mseva-green-100);
2128
+ }
2129
+
2130
+ .employee .ndc-new-filter-option-card,
2131
+ .employee .ndc-new-filter-status-card {
2132
+ border-color: #cbdbe9;
2133
+ box-shadow: 0 3px 10px rgba(7, 75, 152, 0.05);
2134
+ }
2135
+
2136
+ .employee .ndc-new-filter-option-card:not(.primary):not(.success):not(.warning):not(.danger):not(.info):not(.indigo):not(.teal):not(.pink):not(.amber):not(.slate),
2137
+ .employee .ndc-new-filter-status-card:not(.primary):not(.success):not(.warning):not(.danger):not(.info):not(.indigo):not(.teal):not(.pink):not(.amber):not(.slate) {
2138
+ background: #ffffff;
2139
+ }
2140
+
2141
+ .employee .ndc-new-filter-option-card:not(.primary):not(.success):not(.warning):not(.danger):not(.info):not(.indigo):not(.teal):not(.pink):not(.amber):not(.slate) .ndc-new-filter-option-title,
2142
+ .employee .ndc-new-filter-status-card:not(.primary):not(.success):not(.warning):not(.danger):not(.info):not(.indigo):not(.teal):not(.pink):not(.amber):not(.slate) .ndc-new-filter-status-title {
2143
+ color: var(--mseva-blue-900);
2144
+ }
2145
+
2146
+ .employee .ndc-new-filter-option-card.active:not(.primary):not(.success):not(.warning):not(.danger):not(.info):not(.indigo):not(.teal):not(.pink):not(.amber):not(.slate),
2147
+ .employee .ndc-new-filter-status-card.active:not(.primary):not(.success):not(.warning):not(.danger):not(.info):not(.indigo):not(.teal):not(.pink):not(.amber):not(.slate) {
2148
+ border-color: var(--mseva-green-700);
2149
+ background: var(--mseva-green-100);
2150
+ box-shadow: 0 5px 14px rgba(33, 111, 23, 0.16);
2151
+ }
2152
+
2153
+ .employee .ndc-new-filter-card-check {
2154
+ background: var(--mseva-green-800);
2155
+ }
2156
+
2157
+ .employee .ndc-new-filter-show-more {
2158
+ color: var(--mseva-green-800);
2159
+ }
2160
+
2161
+ @media (max-width: 640px) {
2162
+ .employee .InboxComposerWrapper {
2163
+ gap: 16px;
2164
+ }
2165
+
2166
+ .employee .InboxComposerWrapper .filter-card,
2167
+ .employee .InboxComposerWrapper .search-complaint-container,
2168
+ .employee .InboxComposerWrapper .search-container,
2169
+ .employee .new-inbox-wrapper,
2170
+ .employee .new-inbox-top-filters {
2171
+ padding: 14px !important;
2172
+ }
2173
+
2174
+ .employee .new-inbox-wrapper {
2175
+ margin-top: 16px;
2176
+ border-radius: 12px;
2177
+ }
2178
+
2179
+ .employee .new-inbox-tabs {
2180
+ flex-wrap: nowrap;
2181
+ padding-bottom: 6px;
2182
+ }
2183
+
2184
+ .employee .new-inbox-tab {
2185
+ min-height: 36px;
2186
+ }
2187
+ }
2188
+
2189
+ .employee .employee-dashboard-container {
2190
+ width: min(calc(100% - 48px), 1440px);
2191
+ margin: 72px auto 48px;
2192
+ gap: 28px;
2193
+ }
2194
+
2195
+ .employee .employee-dashboard-container > div:first-child {
2196
+ margin: 0 !important;
2197
+ padding: 42px 48px !important;
2198
+ border: 1px solid rgba(7, 75, 152, 0.2);
2199
+ border-radius: var(--mseva-radius-lg) !important;
2200
+ text-align: left !important;
2201
+ background:
2202
+ radial-gradient(circle at 88% 20%, rgba(255, 255, 255, 0.24), transparent 22rem),
2203
+ linear-gradient(115deg, var(--mseva-blue-900) 0%, var(--mseva-blue-700) 53%, var(--mseva-green-700) 100%) !important;
2204
+ box-shadow: 0 14px 28px rgba(7, 75, 152, 0.18) !important;
2205
+ }
2206
+
2207
+ .employee .employee-dashboard-container > div:first-child h1,
2208
+ .employee .employee-dashboard-container > div:first-child p {
2209
+ text-align: left !important;
2210
+ color: #ffffff !important;
2211
+ }
2212
+
2213
+ .employee .employee-dashboard-container > div:first-child h1 {
2214
+ font-size: clamp(1.8rem, 3vw, 2.5rem) !important;
2215
+ }
2216
+
2217
+ .employee .employee-dashboard-quick-services-header {
2218
+ align-items: center;
2219
+ gap: 16px;
2220
+ padding: 0 4px;
2221
+ }
2222
+
2223
+ .employee .employee-dashboard-quick-services-title {
2224
+ padding: 0 !important;
2225
+ color: var(--mseva-blue-900) !important;
2226
+ font-size: 1.4rem !important;
2227
+ }
2228
+
2229
+ .employee .employee-dashboard-quick-services-header .submit-bar {
2230
+ width: auto;
2231
+ min-width: 132px;
2232
+ background: var(--mseva-blue-900) !important;
2233
+ box-shadow: none;
2234
+ }
2235
+
2236
+ .employee .employee-dashboard-module-card-wrapper {
2237
+ display: grid !important;
2238
+ grid-template-columns: repeat(3, minmax(0, 1fr));
2239
+ gap: 18px !important;
2240
+ }
2241
+
2242
+ .employee .employee-quick-service-link {
2243
+ min-width: 0;
2244
+ }
2245
+
2246
+ .employee .employee-quick-service-card {
2247
+ width: 100%;
2248
+ height: auto;
2249
+ min-height: 132px;
2250
+ max-height: none;
2251
+ border: 1px solid #d9e6f2;
2252
+ border-radius: 14px;
2253
+ box-shadow: 0 7px 18px rgba(7, 75, 152, 0.08);
2254
+ }
2255
+
2256
+ .employee .employee-quick-service-card.hovered {
2257
+ border-color: rgba(40, 127, 29, 0.5);
2258
+ box-shadow: 0 12px 26px rgba(7, 75, 152, 0.15);
2259
+ }
2260
+
2261
+ .employee .employee-quick-service-card .card-icon-container {
2262
+ width: 86px;
2263
+ min-width: 86px;
2264
+ padding: 18px;
2265
+ background: var(--mseva-blue-100) !important;
2266
+ }
2267
+
2268
+ .employee .employee-dashboard-module-card-wrapper > .employee-quick-service-link:nth-child(3n + 2) .card-icon-container {
2269
+ background: var(--mseva-green-100) !important;
2270
+ }
2271
+
2272
+ .employee .employee-dashboard-module-card-wrapper > .employee-quick-service-link:nth-child(3n) .card-icon-container {
2273
+ background: var(--mseva-purple-100) !important;
2274
+ }
2275
+
2276
+ .employee .employee-quick-service-card .card-background-circle {
2277
+ background: rgba(7, 75, 152, 0.08);
2278
+ }
2279
+
2280
+ .employee .employee-quick-service-card .card-icon-wrapper {
2281
+ filter: none;
2282
+ }
2283
+
2284
+ .employee .employee-quick-service-card .card-icon-wrapper svg,
2285
+ .employee .employee-quick-service-card .card-icon-wrapper svg path {
2286
+ fill: var(--mseva-blue-700);
2287
+ }
2288
+
2289
+ .employee .employee-dashboard-module-card-wrapper > .employee-quick-service-link:nth-child(3n + 2) .card-icon-wrapper svg,
2290
+ .employee .employee-dashboard-module-card-wrapper > .employee-quick-service-link:nth-child(3n + 2) .card-icon-wrapper svg path {
2291
+ fill: var(--mseva-green-700);
2292
+ }
2293
+
2294
+ .employee .employee-dashboard-module-card-wrapper > .employee-quick-service-link:nth-child(3n) .card-icon-wrapper svg,
2295
+ .employee .employee-dashboard-module-card-wrapper > .employee-quick-service-link:nth-child(3n) .card-icon-wrapper svg path {
2296
+ fill: var(--mseva-purple-700);
2297
+ }
2298
+
2299
+ .employee .employee-quick-service-card .card-content-container {
2300
+ padding: 20px 22px;
2301
+ }
2302
+
2303
+ .employee .employee-quick-service-card .card-module-title {
2304
+ color: var(--mseva-blue-900);
2305
+ font-size: 1.05rem;
2306
+ }
2307
+
2308
+ .employee .employee-quick-service-card .card-module-description {
2309
+ color: var(--mseva-text-muted);
2310
+ }
2311
+
2312
+ .employee .employee-quick-service-card .card-arrow-container svg path {
2313
+ stroke: var(--mseva-green-700);
2314
+ }
2315
+
2316
+ @media (max-width: 900px) {
2317
+ .employee .employee-dashboard-container {
2318
+ width: min(calc(100% - 32px), 900px);
2319
+ }
2320
+
2321
+ .employee .employee-dashboard-module-card-wrapper {
2322
+ grid-template-columns: repeat(2, minmax(0, 1fr));
2323
+ }
2324
+ }
2325
+
2326
+ @media (max-width: 640px) {
2327
+ .employee .employee-login-page {
2328
+ min-height: calc(100vh - 76px);
2329
+ padding: 28px 14px;
2330
+ }
2331
+
2332
+ .employee .employee-login-card {
2333
+ padding: 24px 18px;
2334
+ }
2335
+
2336
+ .employee .employee-dashboard-container {
2337
+ width: calc(100% - 28px);
2338
+ margin: 76px auto 32px;
2339
+ gap: 20px;
2340
+ }
2341
+
2342
+ .employee .employee-dashboard-container > div:first-child {
2343
+ padding: 30px 24px !important;
2344
+ }
2345
+
2346
+ .employee .employee-dashboard-quick-services-header {
2347
+ align-items: flex-start;
2348
+ flex-direction: column;
2349
+ }
2350
+
2351
+ .employee .employee-dashboard-module-card-wrapper {
2352
+ grid-template-columns: 1fr;
2353
+ }
2354
+
2355
+ .employee .employee-quick-service-card {
2356
+ min-width: 0;
2357
+ }
2358
+ }