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

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.
@@ -1,2358 +0,0 @@
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
- }