@obaidazoqili/skysoftware-styles 1.0.0

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,2752 @@
1
+ /* You can add global styles to this file, and also import other style files */
2
+ * {
3
+ margin: 0;
4
+ padding: 0;
5
+ box-sizing: border-box;
6
+ }
7
+
8
+ /* CSS */
9
+ :root {
10
+ font-family: Inter, sans-serif, Arial !important;
11
+ font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
12
+ }
13
+
14
+ @supports (font-variation-settings: normal) {
15
+ :root {
16
+ font-family: InterVariable, sans-serif;
17
+ }
18
+ }
19
+
20
+ html, body {
21
+ min-height: 100%;
22
+ min-height: 100%;
23
+ height: 100%;
24
+ overflow: auto;
25
+ overflow-x: hidden;
26
+ }
27
+
28
+ :root {
29
+ --accent-color: #00796B;
30
+ --dark-accent-color: #00796B;
31
+ --body-color: #fff;
32
+ --sidebar-color: #FFF;
33
+ --primary-color: #e67e0f;
34
+ --light-info-color: #9D9C9C;
35
+ --primary-color-light: #ce710d1a;
36
+ --toggle-color: #DDD;
37
+ --text-color: rgb(107, 114, 128, 1);
38
+ --tran-02: all 0.2s ease;
39
+ --tran-03: all 0.3s ease;
40
+ --tran-04: all 0.4s ease;
41
+ --tran-05: all 0.5s ease;
42
+ --bs-primary: #e67e0f;
43
+ --bs-primary-rgb: 230, 126, 15;
44
+ --bs-white: #fff;
45
+ --bs-gray: #ECECEC;
46
+ --bs-gray-dark: #9A9A9A;
47
+ --bs-info-color-light: #5bc0de1a; /* Light info (blue) */
48
+ --bs-success-color-light: #5cb85c1a; /* Light success (green) */
49
+ --bs-danger-color-light: #d9534f1a; /* Light danger (red) */
50
+ --bs-primary-color-light: #f88e1d1a; /* Light primary (orange) */
51
+ --bs-default-color-light: #aaaaaa1a; /* Light default (gray) */
52
+ /*--bs-secondary: rgba(107, 114, 128,1);*/
53
+ --bs-purple: #A058A2;
54
+ --bs-success: #198750;
55
+ --bs-light-orange: #FFDCC4;
56
+ --bs-light-green: #C4DECA;
57
+ --bs-info: #41ABFE;
58
+ --bs-danger: #cf223b;
59
+ --bs-light: #a0a0a0;
60
+ --bs-bg-disabled: #f8f7f7;
61
+ --bs-dark: #333333;
62
+ --bs-warning: #ffc10740;
63
+ --bs-warning-rgb: 255, 193, 7;
64
+ --bs-success-rgb: 25, 135, 80;
65
+ --bs-info-rgb: 65, 171, 254;
66
+ --bs-danger-rgb: 207, 34, 59;
67
+ --bs-light-rgb: 160, 160, 160;
68
+ --bs-dark-rgb: 0, 0, 0;
69
+ --bs-link-color: #e67e0f;
70
+ --bs-link-color-rgb: 230, 126, 15;
71
+ --bs-link-decoration: underline;
72
+ --bs-link-hover-color: #bb660c;
73
+ --bs-link-hover-color-rgb: 187, 102, 12;
74
+ --bs-primary-text-emphasis: #e67e0f;
75
+ --bs-light-text-emphasis: #f8f9fa;
76
+ --bs-dark-text-emphasis: #000;
77
+ --bs-form-valid-color: #34d399;
78
+ --bs-form-valid-border-color: #34d399;
79
+ --bs-form-invalid-color: #cf223b;
80
+ --bs-form-invalid-border-color: #a81c30;
81
+ --bs-border-radius: 0.2rem;
82
+ --bs-primary-bg-subtle: #e67e0f;
83
+ --bs-primary-border-subtle: #e67e0f;
84
+ --bs-dark-bg-subtle: #000;
85
+ --bs-dark-border-subtle: #000;
86
+ --bs-xs-shadow-box: 0 1px 3px hsla(0,0%,0%,.2);
87
+ --bs-sm-shadow-box: 0 4px 6px hsla(0,0%,0%,.2);
88
+ --bs-md-shadow-box: 0 5px 15px hsla(0,0%,0%,.2);
89
+ --bs-l-shadow-box: 0 10px 24px hsla(0,0%,0%,.2);
90
+ --bs-xl-shadow-box: 0 15px 35px hsla(0,0%,0%,.2);
91
+ --bs-overly-background-color: hsla(0,0%,0%,.55);
92
+ --bs-text-box-shadow: 0 0 50px hsla(0,0%,0%, .4);
93
+ --tooltip-color: var(--bs-white);
94
+ --tooltip-bg: var(--bs-dark);
95
+ --bs-light-primary: #f782041a;
96
+ --bs-light-primary-bg: #F4EDE3;
97
+ --bs-light-primary-bg-subtle: #f782041a;
98
+ --bs-light-primary-border-subtle: #f782041a;
99
+ --mdc-filled-text-field-caret-color: #e67e0f;
100
+ --mdc-filled-text-field-focus-active-indicator-color: #e67e0f;
101
+ --mdc-filled-text-field-focus-label-text-color: rgba(230, 126, 15, 0.87);
102
+ --mdc-outlined-text-field-caret-color: #e67e0f;
103
+ --mdc-outlined-text-field-focus-outline-color: #e67e0f;
104
+ --mdc-outlined-text-field-focus-label-text-color: rgba(230, 126, 15, 0.87);
105
+ --mat-form-field-focus-select-arrow-color: rgba(230, 126, 15, 0.87);
106
+ --mat-option-selected-state-label-text-color: #e67e0f;
107
+ --mat-stepper-header-selected-state-icon-background-color: #e67e0f;
108
+ --mat-stepper-header-done-state-icon-background-color: #e67e0f;
109
+ --mat-stepper-header-edit-state-icon-background-color: #e67e0f;
110
+ --mat-datepicker-calendar-date-selected-state-background-color: #e67e0f;
111
+ --mat-datepicker-toggle-active-state-icon-color: #e67e0f;
112
+ --mat-badge-background-color: #e67e0f;
113
+ --mdc-circular-progress-active-indicator-color: #e67e0f;
114
+ --mdc-slider-handle-color: #e67e0f;
115
+ --mdc-slider-focus-handle-color: #e67e0f;
116
+ --mdc-slider-hover-handle-color: #e67e0f;
117
+ --mdc-slider-active-track-color: #e67e0f;
118
+ --mdc-slider-inactive-track-color: #e67e0f;
119
+ --mdc-slider-with-tick-marks-inactive-container-color: #e67e0f;
120
+ --mat-slider-ripple-color: #e67e0f;
121
+ --mdc-switch-selected-focus-state-layer-color: #bb660c;
122
+ --mdc-switch-selected-handle-color: #bb660c;
123
+ --mdc-switch-selected-hover-state-layer-color: #bb660c;
124
+ --mdc-switch-selected-pressed-state-layer-color: #3949ab;
125
+ --mdc-switch-selected-focus-handle-color: #bb660c;
126
+ --mdc-switch-selected-hover-handle-color: #bb660c;
127
+ --mdc-switch-selected-pressed-handle-color: #bb660c;
128
+ --mdc-switch-selected-focus-track-color: #bb660c;
129
+ --mdc-switch-selected-hover-track-color: #bb660c;
130
+ --mdc-switch-selected-pressed-track-color: #bb660c;
131
+ --mdc-switch-selected-track-color: #bb660c;
132
+ --mat-select-focused-arrow-color: rgba(230, 126, 15, 0.87);
133
+ --mat-paginator-container-text-color: #6c757d;
134
+ --bs-dark-warning: #FFC107;
135
+ --mat-paginator-container-text-font: "Inter", sans-serif, Arial !important;
136
+ --bs-light-primary-hover: #ce710d4d;
137
+ --mdc-chip-label-text-color: rgba(75, 85, 99,1);
138
+ --bs-box-shadow-xs: 0 3.2px 7.2px 0 rgba(0, 0, 0, .132), 0 .6px 1.8px 0 rgba(0, 0, 0, .108);
139
+ --bs-bg-dark-gray: #333;
140
+ --bs-light-gray: #FAFAFA;
141
+ --bg-light-gray: #d9d9d9;
142
+ --dark-text-color: #333333;
143
+ --sidebar-color: #eaeaea;
144
+ --dark-yellow-color: #FCCF5A;
145
+ --light-blue: #249EA0;
146
+ /** font size variables **/
147
+ --font-size-8: 0.5rem;
148
+ --font-size-10: 0.625rem;
149
+ --font-size-11: 0.688rem;
150
+ --font-size-12: 0.75rem;
151
+ --font-size-13: 0.813rem;
152
+ --font-size-14: 0.875rem;
153
+ --font-size-15: 0.938rem;
154
+ --font-size-16: 1rem;
155
+ --font-size-18: 1.125rem;
156
+ --font-size-20: 1.25rem;
157
+ --font-size-24: 1.5rem;
158
+ --font-size-25: 1.563rem;
159
+ --font-size-28: 1.75rem;
160
+ --font-size-32: 2rem;
161
+ --font-size-36: 2.25rem;
162
+ --font-size-40: 2.5rem;
163
+ --font-size-44: 2.75rem;
164
+ --font-size-48: 3rem;
165
+ --font-size-50: 3.125rem;
166
+ --font-size-56: 3.5rem;
167
+ --font-size-64: 4rem;
168
+ --font-size-72: 4.5rem;
169
+ --font-size-75: 4.688rem;
170
+ --font-size-80: 5rem;
171
+ --font-size-90: 5.625rem;
172
+ --font-size-100: 6.25rem;
173
+ --gray-border-color: #9D9C9C;
174
+ }
175
+
176
+ body {
177
+ height: 100vh;
178
+ background: var(--body-color);
179
+ overflow-x: hidden;
180
+ }
181
+
182
+ .layout-header {
183
+ z-index: 1501;
184
+ }
185
+
186
+ .sidebar-menu {
187
+ background: var(--sidebar-color) !important;
188
+ white-space: nowrap;
189
+ transition: all 0.5s ease;
190
+ }
191
+
192
+ .badge-outline-warning {
193
+ --bs-bg-opacity: 0.25;
194
+ background-color: var(--bs-warning) !important;
195
+ border: 1px solid var(--bs-dark-warning);
196
+ color: var(--dark-text-color);
197
+ }
198
+
199
+ .bg-progress {
200
+ --bs-bg-opacity: 1;
201
+ background-color: #f3bc50 !important;
202
+ color: var(--bs-white);
203
+ }
204
+
205
+ .text-dark-gray {
206
+ color: var(--bs-bg-dark-gray) !important;
207
+ }
208
+
209
+ .sidebar-menu-container {
210
+ min-height: 100%;
211
+ display: flex;
212
+ flex: 1;
213
+ }
214
+
215
+ header .topbar-header {
216
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
217
+ }
218
+
219
+ .rounded-image-container {
220
+ overflow: hidden;
221
+ border-radius: 50%;
222
+ height: 30px;
223
+ width: 30px;
224
+ margin: 0 4px;
225
+ border: 1px solid rgba(0, 0, 0, 0.1);
226
+ box-shadow: 0 1px 3px rgba(0,0,0,0.15);
227
+ }
228
+
229
+ .cursor-pointer, .active-link {
230
+ cursor: pointer;
231
+ text-decoration: none;
232
+ }
233
+
234
+ a.cursor-pointer:hover {
235
+ color: var(--bs-link-hover-color);
236
+ }
237
+
238
+ a.active-link:hover {
239
+ background: rgba(0, 0, 0, .04);
240
+ }
241
+
242
+ .text-ellipsis-three-line {
243
+ display: -webkit-box;
244
+ -webkit-box-orient: vertical;
245
+ -webkit-line-clamp: 3;
246
+ line-clamp: 2;
247
+ overflow: hidden;
248
+ text-overflow: ellipsis;
249
+ }
250
+
251
+ .text-ellipsis-two-line {
252
+ display: -webkit-box;
253
+ -webkit-box-orient: vertical;
254
+ -webkit-line-clamp: 2;
255
+ line-clamp: 2;
256
+ overflow: hidden;
257
+ text-overflow: ellipsis;
258
+ min-height: 31px !important
259
+ }
260
+
261
+ .text-ellipsis-one-line {
262
+ display: -webkit-box;
263
+ -webkit-box-orient: vertical;
264
+ -webkit-line-clamp: 1;
265
+ line-clamp: 2;
266
+
267
+ overflow: hidden;
268
+ text-overflow: ellipsis;
269
+ min-height: 16px !important
270
+ }
271
+
272
+ blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {
273
+ margin: 0 !important;
274
+ }
275
+
276
+ .card-min-height {
277
+ height: 180px;
278
+ }
279
+
280
+ .xsmall {
281
+ font-size: .77em;
282
+ }
283
+
284
+ .card-height {
285
+ max-height: 400px;
286
+ overflow-y: auto;
287
+ overflow-x: hidden;
288
+ }
289
+
290
+ .sidebar-sub-text {
291
+ font-size: 1em;
292
+ }
293
+
294
+ .sidebar-sub-text:hover {
295
+ border-left: 2px solid var(--bs-primary);
296
+ }
297
+
298
+ .row div.card:hover {
299
+ box-shadow: 0 .125rem .25rem rgba(0,0,0, .075);
300
+ }
301
+
302
+ .toolbar-title {
303
+ font-size: var(--font-size-24);
304
+ font-weight: 700;
305
+ color: var(--dark-text-color) !important;
306
+ }
307
+
308
+ .main-toolbar {
309
+ position: sticky;
310
+ top: 101px;
311
+ background-color: white;
312
+ padding-top: 1rem;
313
+ padding-bottom: 1.4rem;
314
+ padding-left: 1.5rem;
315
+ padding-right: 1.5rem;
316
+ }
317
+
318
+ .main-toolbar-z-index {
319
+ z-index: 1000;
320
+ }
321
+
322
+ .input-group-text {
323
+ border: 1px solid #6d5555e8;
324
+ border-right: none;
325
+ }
326
+
327
+ .topbar-header input {
328
+ width: 20rem !important;
329
+ outline: none;
330
+ border: 1px solid #6d5555e8;
331
+ border-left: none;
332
+ padding: 5px 5px;
333
+ font-size: 14px;
334
+ background: #6d5555e8 !important;
335
+ color: white !important;
336
+ border-radius: 5px;
337
+ }
338
+
339
+
340
+ /* Old Styles */
341
+ .dropdown-menu {
342
+ --bs-dropdown-link-active-color: #4b5563;
343
+ --bs-dropdown-link-active-bg: rgba(0, 0, 0, .07);
344
+ --bs-dropdown-link-hover-color: #4b5563;
345
+ --bs-dropdown-link-hover-bg: rgba(0, 0, 0, .07);
346
+ }
347
+
348
+ .dropdown-item:focus, .dropdown-item:hover {
349
+ color: #4b5563 !important;
350
+ }
351
+
352
+ .progress, .progress-stacked {
353
+ --bs-progress-bar-bg: var(--bs-primary);
354
+ }
355
+
356
+ .btn-primary {
357
+ color: var(--bs-white) !important;
358
+ --bs-btn-bg: var(--bs-primary);
359
+ --bs-btn-border-color: var(--bs-primary);
360
+ --bs-btn-hover-color: #fff;
361
+ --bs-btn-hover-bg: #bb660c;
362
+ --bs-btn-hover-border-color: #bb660c;
363
+ --bs-btn-focus-shadow-rgb: 49, 132, 253;
364
+ --bs-btn-active-color: #fff;
365
+ --bs-btn-active-bg: #bb660c;
366
+ --bs-btn-active-border-color: #bb660c;
367
+ --bs-btn-disabled-color: #fff;
368
+ --bs-btn-disabled-bg: var(--bs-primary);
369
+ --bs-btn-disabled-border-color: var(--bs-primary);
370
+ }
371
+
372
+ .btn-light-primary {
373
+ color: var(--primary-color);
374
+ --bs-btn-bg: var(--primary-color-light);
375
+ --bs-btn-border-color: var(--primary-color-light);
376
+ --bs-btn-hover-color: #fff !important; /* ad5f0b var(--primary-color-light)*/
377
+ --bs-btn-hover-bg: var(--bs-primary); /* #bb660cde */
378
+ --bs-btn-hover-border-color: var(--bs-primary);
379
+ --bs-btn-focus-shadow-rgb: rgb(194, 103, 6);
380
+ --bs-btn-active-color: #fff;
381
+ --bs-btn-active-bg: var(--bs-primary) !important;
382
+ --bs-btn-active-border-color: var(--bs-primary);
383
+ --bs-btn-disabled-color: #fff;
384
+ --bs-btn-disabled-bg: var(--bs-light-primary-hover);
385
+ --bs-btn-disabled-border-color: var(--bs-light-primary-hover);
386
+ }
387
+
388
+ a {
389
+ color: var(--bs-primary) !important;
390
+ }
391
+
392
+ a:hover {
393
+ color: var(--bs-link-hover-color) !important;
394
+ }
395
+
396
+ .text-decoration-underline {
397
+ text-underline-offset: 3px;
398
+ }
399
+
400
+ .btn-outline-light-primary {
401
+ --bs-btn-color: var(--bs-primary) !important;
402
+ --bs-btn-border-color: var(--bs-primary);
403
+ --bs-btn-hover-bg: var(--bs-light-primary);
404
+ --bs-btn-hover-border-color: var(--bs-light-primary);
405
+ --bs-btn-focus-shadow-rgb: 13, 110, 253;
406
+ --bs-btn-active-bg: var(--bs-light-primary);
407
+ --bs-btn-active-border-color: var(--bs-light-primary);
408
+ --bs-btn-disabled-color: var(--bs-light-primary);
409
+ --bs-btn-disabled-border-color: var(--bs-light-primary);
410
+ --bs-btn-hover-color: var(--bs-primary);
411
+ }
412
+
413
+ .btn-light {
414
+ --bs-btn-bg: #f9fafb;
415
+ --bs-btn-border-color: #dcdcdc;
416
+ --bs-btn-hover-color: #000;
417
+ --bs-btn-hover-bg: #e6e7e7;
418
+ --bs-btn-hover-border-color: #dcdcdc;
419
+ --bs-btn-focus-shadow-rgb: 130, 138, 145;
420
+ --bs-btn-active-color: #000;
421
+ --bs-btn-active-bg: #e6e7e7;
422
+ --bs-btn-active-border-color: #dcdcdc;
423
+ --bs-btn-disabled-color: #fff;
424
+ --bs-btn-disabled-bg: #e6e7e7;
425
+ --bs-btn-disabled-border-color: #dcdcdc;
426
+ }
427
+
428
+ .btn-outline-primary {
429
+ --bs-btn-bg: #FFF;
430
+ --bs-btn-color: var(--bs-primary);
431
+ --bs-btn-border-color: var(--bs-primary);
432
+ --bs-btn-hover-bg: var(--bs-primary);
433
+ --bs-btn-hover-border-color: var(--bs-primary);
434
+ --bs-btn-focus-shadow-rgb: 13, 110, 253;
435
+ --bs-btn-active-bg: var(--bs-link-hover-color);
436
+ --bs-btn-active-border-color: var(--bs-link-hover-color);
437
+ --bs-btn-disabled-color: var(--bs-primary);
438
+ --bs-btn-disabled-border-color: var(--bs-primary);
439
+ --bs-btn-hover-color: var(--bs-white) !important;
440
+ }
441
+
442
+ .btn-outline-light {
443
+ --bs-btn-color: #000;
444
+ --bs-btn-border-color: #dcdcdc;
445
+ --bs-btn-hover-color: #000;
446
+ --bs-btn-hover-bg: #e6e7e7;
447
+ --bs-btn-hover-border-color: #dcdcdc;
448
+ --bs-btn-focus-shadow-rgb: 248, 249, 250;
449
+ --bs-btn-active-color: #000;
450
+ --bs-btn-active-bg: #e6e7e7;
451
+ --bs-btn-active-border-color: #dcdcdc;
452
+ --bs-btn-disabled-color: #e6e7e7;
453
+ --bs-btn-disabled-border-color: #dcdcdc;
454
+ }
455
+
456
+ .alert {
457
+ --bs-alert-padding-x: 0.75rem;
458
+ --bs-alert-padding-y: 0.75rem;
459
+ --bs-alert-margin-bottom: 0.75rem;
460
+ }
461
+
462
+ .alert-primary, .alert-dark {
463
+ --bs-alert-color: var(--bs-white);
464
+ --bs-alert-link-color: var(--bs-white);
465
+ }
466
+
467
+ .alert-light, .alert-secondary {
468
+ --bs-alert-color: var(--bs-dark);
469
+ --bs-alert-link-color: var(--bs-dark);
470
+ }
471
+
472
+ .alert-light-primary {
473
+ --bs-alert-color: var(--accent-color);
474
+ --bs-alert-bg: #249ea01a;
475
+ --bs-alert-border-color: var(--accent-color);
476
+ --bs-alert-link-color: var(--accent-color);
477
+ }
478
+
479
+ .alert-dismissible .btn-close {
480
+ font-size: smaller;
481
+ }
482
+
483
+ a.alert-link {
484
+ color: inherit;
485
+ }
486
+
487
+ .nav-pills {
488
+ --bs-nav-pills-link-active-bg: var(--bs-primary);
489
+ }
490
+
491
+ .menu-large {
492
+ position: static !important;
493
+ }
494
+
495
+ .overly-menu {
496
+ padding: 10px 5px;
497
+ width: 94%;
498
+ margin-top: 10px;
499
+ height: 90vh;
500
+ left: 0;
501
+ border: 1px solid var(--bs-primary);
502
+ animation: growDown 1000ms ease-in-out forwards;
503
+ transform-origin: top center
504
+ }
505
+
506
+ @keyframes growDown {
507
+ 0% {
508
+ transform: scaleY(0)
509
+ }
510
+
511
+ 80% {
512
+ transform: scaleY(1.1)
513
+ }
514
+
515
+ 100% {
516
+ transform: scaleY(1)
517
+ }
518
+ }
519
+
520
+ .text-box-shadow {
521
+ text-shadow: var(--bs-text-box-shadow);
522
+ }
523
+
524
+ @media (max-width: 768px) {
525
+ .overly-menu {
526
+ margin-left: 0;
527
+ margin-right: 0;
528
+ }
529
+
530
+ .overly-menu > li {
531
+ margin-bottom: 30px;
532
+ }
533
+
534
+ .overly-menu > li:last-child {
535
+ margin-bottom: 0;
536
+ }
537
+
538
+ .overly-menu.dropdown-header {
539
+ padding: 3px 15px !important;
540
+ }
541
+
542
+ .navbar-nav .open .dropdown-menu .dropdown-header {
543
+ color: var(--white-color);
544
+ }
545
+ }
546
+
547
+ div.scrollable:hover {
548
+ overflow-y: auto !important;
549
+ }
550
+
551
+ .shadow-lg {
552
+ box-shadow: var(--bs-l-shadow-box) !important;
553
+ }
554
+
555
+ a.menu-link:hover {
556
+ color: var(--bs-primary) !important;
557
+ }
558
+
559
+ a.nav-link {
560
+ cursor: pointer;
561
+ }
562
+
563
+ mat-divider.mat-divider.mat-divider-vertical {
564
+ border-width: 2px !important;
565
+ }
566
+
567
+ .dropdown-menu.user-menu {
568
+ top: 106%;
569
+ left: -15px;
570
+ border-radius: var(--bs-border-radius);
571
+ }
572
+
573
+ .form-control:focus {
574
+ border-color: var(--bs-primary);
575
+ outline: 0;
576
+ box-shadow: none;
577
+ }
578
+
579
+ .bs-highlight {
580
+ border-left-width: .35rem;
581
+ border-radius: .25rem;
582
+ }
583
+
584
+ .be-highlight {
585
+ border-right-width: .35rem;
586
+ border-radius: .25rem;
587
+ }
588
+
589
+ .bt-highlight {
590
+ border-top-width: .35rem;
591
+ border-radius: .25rem;
592
+ }
593
+
594
+ .bb-highlight {
595
+ border: 1px solid #e9ecef;
596
+ border-bottom-width: .35rem;
597
+ border-radius: .25rem;
598
+ }
599
+
600
+ .bs-accent {
601
+ border-left-color: var(--accent-color);
602
+ }
603
+
604
+ .bs-primary {
605
+ border-left-color: var(--bs-primary);
606
+ }
607
+
608
+ .bs-success {
609
+ border-left-color: var(--bs-success);
610
+ }
611
+
612
+ .bs-info {
613
+ border-left-color: var(--bs-info);
614
+ }
615
+
616
+ .bs-warning {
617
+ border-left-color: var(--bs-warning);
618
+ }
619
+
620
+ .bs-dark {
621
+ border-left-color: var(--bs-dark);
622
+ }
623
+
624
+ .bs-danger {
625
+ border-left-color: var(--bs-danger);
626
+ }
627
+
628
+ .be-accent {
629
+ border-right-color: var(--accent-color);
630
+ }
631
+
632
+ .be-primary {
633
+ border-right-color: var(--bs-primary);
634
+ }
635
+
636
+ .be-success {
637
+ border-right-color: var(--bs-success);
638
+ }
639
+
640
+ .be-info {
641
+ border-right-color: var(--bs-info);
642
+ }
643
+
644
+ .be-warning {
645
+ border-right-color: var(--bs-warning);
646
+ }
647
+
648
+ .be-dark {
649
+ border-right-color: var(--bs-dark);
650
+ }
651
+
652
+ .be-danger {
653
+ border-right-color: var(--bs-danger);
654
+ }
655
+
656
+ .bt-accent {
657
+ border-top-color: var(--accent-color);
658
+ }
659
+
660
+ .bt-primary {
661
+ border-top-color: var(--bs-primary);
662
+ }
663
+
664
+ .bt-success {
665
+ border-top-color: var(--bs-success);
666
+ }
667
+
668
+ .bt-info {
669
+ border-top-color: var(--bs-info);
670
+ }
671
+
672
+ .bt-warning {
673
+ border-top-color: var(--bs-warning);
674
+ }
675
+
676
+ .bt-dark {
677
+ border-top-color: var(--bs-dark);
678
+ }
679
+
680
+ .bt-danger {
681
+ border-top-color: var(--bs-danger);
682
+ }
683
+
684
+ .bb-accent {
685
+ border-top-color: var(--accent-color);
686
+ }
687
+
688
+ .bb-primary {
689
+ border-bottom-color: var(--bs-primary);
690
+ }
691
+
692
+ .bb-success {
693
+ border-bottom-color: var(--bs-success);
694
+ }
695
+
696
+ .bb-info {
697
+ border-bottom-color: var(--bs-info);
698
+ }
699
+
700
+ .bb-warning {
701
+ border-bottom-color: var(--bs-warning);
702
+ }
703
+
704
+ .bb-dark {
705
+ border-bottom-color: var(--bs-dark);
706
+ }
707
+
708
+ .bb-danger {
709
+ border-bottom-color: var(--bs-danger);
710
+ }
711
+
712
+ .form-label, .col-form-label {
713
+ margin-bottom: .5rem;
714
+ font-weight: 600;
715
+ font-size: .9rem;
716
+ }
717
+
718
+ .form-select:focus {
719
+ border-color: var(--bs-primary);
720
+ outline: 0;
721
+ box-shadow: none;
722
+ }
723
+
724
+ select option {
725
+ padding: 5px;
726
+ }
727
+
728
+ select option:hover, select option:active, select option:visited,
729
+ select option:focus, section option:checked {
730
+ background-color: rgba(0, 0, 0, .1);
731
+ }
732
+
733
+ input:invalid, textarea:invalid select:invalid,
734
+ select:required, input:required, textarea:required {
735
+ border-color: var(--bs-danger);
736
+ }
737
+
738
+ .card-max-width {
739
+ max-width: 18rem;
740
+ }
741
+
742
+ .small, small {
743
+ font-weight: 400 !important;
744
+ font-size: .875em !important;
745
+ }
746
+
747
+ .form-switch .form-check-input {
748
+ width: 2.4em !important;
749
+ height: 1.2em !important;
750
+ }
751
+
752
+ .form-check-input:focus {
753
+ border-color: var(--accent-color);
754
+ outline: 0;
755
+ box-shadow: 0 0 0 0.25rem rgba(1, 153, 146, .25);
756
+ }
757
+
758
+ .form-check-input:checked {
759
+ background-color: var(--accent-color);
760
+ border-color: var(--accent-color);
761
+ }
762
+
763
+ a:hover {
764
+ color: var(--bs-link-hover-color);
765
+ cursor: pointer;
766
+ }
767
+
768
+
769
+ a.btn-outline-primary:hover {
770
+ color: var(--bs-white) !important;
771
+ }
772
+
773
+ a.btn-outline-light-primary:hover {
774
+ color: var(--bs-secondary) !important;
775
+ }
776
+
777
+ .sidebar {
778
+ height: 100%;
779
+ width: 260px;
780
+ position: fixed;
781
+ overflow-x: hidden;
782
+ overflow-y: auto;
783
+ width: 260px;
784
+ z-index: 1500;
785
+ transition: all 0.5s ease;
786
+ background-color: var(--sidebar-color) !important;
787
+ }
788
+
789
+ .sidebar.close {
790
+ width: 60px;
791
+ }
792
+
793
+ .sidebar .nav-links {
794
+ /*height: 100%;*/
795
+ padding-top: 30px 0 150px 0;
796
+ padding-left: 0;
797
+ }
798
+
799
+ .sidebar.close .nav-links {
800
+ overflow: visible;
801
+ }
802
+
803
+ .sidebar .nav-links::-webkit-scrollbar {
804
+ display: none;
805
+ }
806
+
807
+ .sidebar .nav-links li {
808
+ position: relative;
809
+ list-style: none;
810
+ transition: all 0.4s ease;
811
+ }
812
+
813
+ .sidebar .nav-links li .icon-link {
814
+ display: block;
815
+ }
816
+
817
+ .sidebar.close .nav-links li .icon-link {
818
+ display: flex;
819
+ align-items: center;
820
+ justify-content: space-between;
821
+ }
822
+
823
+ .sidebar .nav-links li fa-icon.ng-fa-icon {
824
+ height: 45px;
825
+ min-width: 60px;
826
+ padding-left: 18px;
827
+ line-height: 50px;
828
+ color: var(--primary-color);
829
+ font-size: 18px;
830
+ cursor: pointer;
831
+ }
832
+
833
+ .sidebar .nav-links li fa-icon.ng-fa-icon.arrow {
834
+ font-size: 14px;
835
+ }
836
+
837
+ .sidebar .nav-links li a {
838
+ text-decoration: none;
839
+ display: flex;
840
+ align-items: center;
841
+ }
842
+
843
+ .sidebar .nav-links li a .link-name {
844
+ font-size: 13px;
845
+ font-weight: 500;
846
+ color: var(--dark-text-color) !important;
847
+ min-width: 150px;
848
+ }
849
+
850
+ .sidebar.close .nav-links li a .link-name {
851
+ opacity: 0;
852
+ pointer-events: none;
853
+ }
854
+
855
+ .sidebar .nav-links li .sub-menu {
856
+ padding: 6px 6px 6px 6px;
857
+ margin-top: -10px;
858
+ color: var(--dark-text-color);
859
+ /*background: rgba(234, 234, 234, 0.6) !important;*/
860
+ display: none;
861
+ padding-left: 1.6rem;
862
+ }
863
+
864
+ .sidebar.close .nav-links li .sub-menu {
865
+ margin-left: 0;
866
+ }
867
+
868
+ .sidebar .nav-links li.show-nav .sub-menu {
869
+ display: block;
870
+ }
871
+
872
+ .sidebar.close .nav-links li fa-icon.ng-fa-icon.logo-icon.arrow {
873
+ display: none;
874
+ }
875
+
876
+ .sidebar .nav-links li .sub-menu a {
877
+ color: var(--dark-text-color) !important;
878
+ font-size: 13px;
879
+ padding: 5px 0;
880
+ white-space: nowrap;
881
+ opacity: 0.8;
882
+ transition: all 0.3s ease;
883
+ font-weight: 400;
884
+ }
885
+
886
+ .sidebar .nav-links li .sub-menu a:hover,
887
+ .sidebar .nav-links li .sub-menu a:active,
888
+ li.sub-menu:hover,
889
+ li.sub-menu:active {
890
+ opacity: 1;
891
+ color: rgba(var(--bs-primary-rgb), 1) !important;
892
+ }
893
+
894
+ .sidebar.close .nav-links li .sub-menu {
895
+ position: absolute;
896
+ left: 20%;
897
+ top: -10px;
898
+ margin-top: 0;
899
+ padding: 10px 20px;
900
+ border-radius: 0 6px 6px 0;
901
+ transition: all 0.4s ease;
902
+ opacity: 0;
903
+ display: block;
904
+ pointer-events: none;
905
+ width: 100%;
906
+ overflow-y: auto;
907
+ }
908
+
909
+ .sidebar .nav-links li .sub-menu li {
910
+ padding-left: 2.1rem;
911
+ border: none;
912
+ border-left: 2px solid rgba(221, 221, 221, 0.5);
913
+ }
914
+
915
+ li.sub-menu {
916
+ padding-left: .8rem;
917
+ border: none;
918
+ border-left: 2px solid rgba(221, 221, 221, 0.5);
919
+ }
920
+
921
+ .sidebar.close .nav-links li .sub-menu li {
922
+ padding-left: 0.2rem;
923
+ border: none;
924
+ }
925
+
926
+ .sidebar .nav-links li .sub-menu li a:hover, li.sub-menu:hover {
927
+ color: var(--primary-color) !important;
928
+ font-weight: 500;
929
+ }
930
+
931
+ .sidebar .nav-links li .sub-menu li:hover, li.sub-menu:hover, li.sub-menu:active {
932
+ border-left: 2px solid rgba(var(--bs-primary-rgb), 1) !important;
933
+ }
934
+
935
+ .sidebar.close .nav-links li .sub-menu li:hover {
936
+ border-left: none;
937
+ }
938
+
939
+ .sidebar.close .nav-links li:hover .sub-menu {
940
+ top: 0;
941
+ opacity: 1;
942
+ pointer-events: auto;
943
+ transition: all 0.4s ease;
944
+ }
945
+
946
+ .sidebar .nav-links li .sub-menu .link-name {
947
+ display: none;
948
+ }
949
+
950
+ .sidebar.close .nav-links li .sub-menu .link-name {
951
+ font-size: 14px;
952
+ font-weight: 500;
953
+ opacity: 1;
954
+ display: block;
955
+ }
956
+
957
+ .sidebar .nav-links li .sub-menu .blank {
958
+ opacity: 1;
959
+ pointer-events: auto;
960
+ padding: 3px 20px 6px 16px;
961
+ opacity: 0;
962
+ pointer-events: none;
963
+ transition: 0s;
964
+ }
965
+
966
+ .sidebar .nav-links li:hover .sub-menu .blank {
967
+ top: 50%;
968
+ transform: translate(-50%);
969
+ }
970
+
971
+ .sidebar li .profile-details fa-icon.ng-fa-icon.collapse-icon:hover {
972
+ color: var(--primary-color) !important;
973
+ }
974
+
975
+ .sidebar li .profile-details fa-icon.ng-fa-icon.collapse-icon {
976
+ font-size: 18px;
977
+ color: rgba(157, 156, 156, 0.7);
978
+ height: 20px;
979
+ min-width: 60px;
980
+ padding-left: 20px;
981
+ line-height: 50px;
982
+ }
983
+
984
+ .main-container {
985
+ position: relative;
986
+ left: 260px;
987
+ top: 60px;
988
+ width: calc(100% - 260px);
989
+ transition: all 0.5s ease;
990
+ padding-left: 0;
991
+ padding-right: 0;
992
+ margin-left: 0;
993
+ margin-right: 0;
994
+ }
995
+
996
+ .sidebar.close ~ .main-container {
997
+ left: 60px;
998
+ width: calc(100% - 60px);
999
+ }
1000
+
1001
+ .h-83 {
1002
+ height: 83%;
1003
+ }
1004
+
1005
+ .h-50 {
1006
+ height: 50%;
1007
+ }
1008
+
1009
+ .breadcrumb {
1010
+ background: none;
1011
+ font-size: .93em;
1012
+ margin: 0;
1013
+ font-weight: 600;
1014
+ padding-right: 1rem;
1015
+ padding-left: 1rem;
1016
+ position: sticky;
1017
+ top: 0;
1018
+ }
1019
+
1020
+ .breadcrumb a, .breadcrumb span {
1021
+ color: var(--text-color);
1022
+ font-weight: 300;
1023
+ text-decoration: none;
1024
+ }
1025
+
1026
+ .breadcrumb a:hover, .breadcrumb span:hover {
1027
+ color: var(--primary-color);
1028
+ }
1029
+
1030
+ .breadcrumb-container {
1031
+ position: sticky;
1032
+ top: 56px;
1033
+ z-index: 1001;
1034
+ background-color: var(--sidebar-color);
1035
+ height: 100%;
1036
+ flex-direction: column;
1037
+ display: flex;
1038
+ }
1039
+
1040
+ #form .dx-overlay .dx-invalid-message-content {
1041
+ display: none;
1042
+ }
1043
+
1044
+ .btn-width {
1045
+ min-width: 80px;
1046
+ }
1047
+
1048
+ .vh-50 {
1049
+ height: 50vh;
1050
+ }
1051
+
1052
+ .badge-pink {
1053
+ background-color: var(--accent-color);
1054
+ color: white;
1055
+ border-radius: 5px;
1056
+ padding-inline-start: 0.3rem;
1057
+ padding-inline-end: 0.3rem;
1058
+ }
1059
+
1060
+
1061
+ .toggle-description {
1062
+ position: relative;
1063
+ top: 2.7rem;
1064
+ left: 1.5rem;
1065
+ z-index: 1;
1066
+ cursor: pointer;
1067
+ pointer-events: none;
1068
+ }
1069
+
1070
+ .toggle-switch {
1071
+ position: relative;
1072
+ top: 2.7rem;
1073
+ left: 1.5rem;
1074
+ z-index: 1;
1075
+ }
1076
+
1077
+ .bg-opacity-07 {
1078
+ --bs-bg-opacity: 0.07;
1079
+ }
1080
+
1081
+ .drag-drop-placeholder {
1082
+ background: var(--bs-light-text-emphasis);
1083
+ border: none;
1084
+ min-height: 122px;
1085
+ transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
1086
+ }
1087
+
1088
+ .quick-action-element {
1089
+ visibility: hidden;
1090
+ }
1091
+
1092
+ a.quick-action:hover > .quick-action-element {
1093
+ visibility: visible;
1094
+ border-color: var(--accent-color) !important;
1095
+ }
1096
+
1097
+ a.quick-action:hover > hr.quick-action-element {
1098
+ border-width: 6px;
1099
+ }
1100
+
1101
+ .smaller {
1102
+ font-weight: 400 !important;
1103
+ font-size: .75em !important;
1104
+ }
1105
+
1106
+ .menu-outline-primary a.dropdown-item {
1107
+ color: black;
1108
+ }
1109
+
1110
+ .sticky-container {
1111
+ background-color: white;
1112
+ position: sticky;
1113
+ top: 105px;
1114
+ z-index: 996;
1115
+ padding-bottom: 15px;
1116
+ }
1117
+
1118
+ /*::-webkit-scrollbar {
1119
+ width: 10px;
1120
+ background: var(--sidebar-color);
1121
+ }
1122
+
1123
+ ::-webkit-scrollbar-thumb {
1124
+ background: lightgray;
1125
+ }*/
1126
+
1127
+ .bg-light-primary {
1128
+ background: var(--bs-light-primary-bg);
1129
+ }
1130
+
1131
+ .bg-light-gray {
1132
+ background: #F8F7F7 !important;
1133
+ }
1134
+
1135
+ .bg-dark-gray {
1136
+ background: var(--bs-bg-dark-gray) !important;
1137
+ }
1138
+
1139
+ .bg-light-green {
1140
+ background: var(--bs-light-green) !important;
1141
+ }
1142
+
1143
+ .bg-light-orange {
1144
+ background: var(--bs-light-orange) !important;
1145
+ }
1146
+
1147
+ .left-orange-border {
1148
+ border-left: 5px solid var(--primary-color)
1149
+ }
1150
+
1151
+ .label-info {
1152
+ background-color: var(--bs-info-color-light);
1153
+ }
1154
+ .label-purple{
1155
+ background-color: var(--bs-purple);
1156
+ }
1157
+ .label-success {
1158
+ background-color: var(--bs-success-color-light);
1159
+ }
1160
+
1161
+ .label-danger {
1162
+ background-color: var( --bs-danger);
1163
+ }
1164
+
1165
+ .label-primary {
1166
+ background-color: var(--bs-primary-color-light);
1167
+ }
1168
+
1169
+ .label-default {
1170
+ background-color: var(--bs-default-color-light);
1171
+ }
1172
+ .mat-primary {
1173
+ --mat-minimal-pseudo-checkbox-selected-checkmark-color: #019992 !important;
1174
+ --mat-full-pseudo-checkbox-selected-icon-color: #019992 !important;
1175
+ }
1176
+
1177
+ .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
1178
+ .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
1179
+ --mdc-chip-elevated-container-color: var(--bs-bg-dark-gray) !important;
1180
+ --mdc-chip-elevated-selected-container-color: #e0e0e0 !important;
1181
+ --mdc-chip-elevated-disabled-container-color: var(--bs-bg-dark-gray) !important;
1182
+ --mdc-chip-flat-disabled-selected-container-color: var(--bs-bg-dark-gray) !important;
1183
+ }
1184
+
1185
+ .status-badge {
1186
+ margin-right: -5px;
1187
+ border-top-right-radius: 0.2rem;
1188
+ border-bottom-right-radius: 0.2rem;
1189
+ box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.075);
1190
+ width: 120px;
1191
+ height: 25px;
1192
+ }
1193
+ .status-request-badge {
1194
+ margin-right: -5px;
1195
+
1196
+ border-top-left-radius: 0.2rem;
1197
+ border-bottom-left-radius: 0.2rem;
1198
+ border-bottom-right-radius:0.1rem;
1199
+ box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.075);
1200
+ height: 19px;
1201
+ }
1202
+
1203
+ .status-badge-triangle {
1204
+ margin-top: 27px;
1205
+ width: 12px;
1206
+ height: 16px;
1207
+ transform: rotate(0deg);
1208
+ }
1209
+ .status-request-badge-triangle {
1210
+ margin-top: 4px;
1211
+ width: 29px;
1212
+ height: 32px;
1213
+ }
1214
+
1215
+ .badge-outline-danger {
1216
+ background: #F3516033;
1217
+ color: #F35160;
1218
+ font-weight: bold;
1219
+ font-size: 10px;
1220
+ }
1221
+
1222
+ .badge-outline-success {
1223
+ background: #1C95191A;
1224
+ color: #198754;
1225
+ font-weight: bold;
1226
+ font-size: 10px;
1227
+ }
1228
+
1229
+ .h-10 {
1230
+ height: 10%;
1231
+ }
1232
+
1233
+ .h-15 {
1234
+ height: 15%;
1235
+ }
1236
+
1237
+ .h-20 {
1238
+ height: 20%;
1239
+ }
1240
+
1241
+ .h-30 {
1242
+ height: 30%;
1243
+ }
1244
+
1245
+ .h-35 {
1246
+ height: 35%;
1247
+ }
1248
+
1249
+ .h-40 {
1250
+ height: 40%;
1251
+ }
1252
+
1253
+ .h-45 {
1254
+ height: 45%;
1255
+ }
1256
+
1257
+ .h-55 {
1258
+ height: 55%;
1259
+ }
1260
+
1261
+ .h-60 {
1262
+ height: 60%;
1263
+ }
1264
+
1265
+ .link-dark-gray {
1266
+ color: #333 !important;
1267
+ }
1268
+
1269
+ .h-65 {
1270
+ height: 65%;
1271
+ }
1272
+
1273
+ .h-70 {
1274
+ height: 70%;
1275
+ }
1276
+
1277
+ .h-80 {
1278
+ height: 80%;
1279
+ }
1280
+
1281
+ .h-85 {
1282
+ height: 85%;
1283
+ }
1284
+
1285
+ .h-90 {
1286
+ height: 90%;
1287
+ }
1288
+
1289
+ .h-95 {
1290
+ height: 95%;
1291
+ }
1292
+
1293
+ .w-5 {
1294
+ width: 5%;
1295
+ }
1296
+
1297
+ .w-10 {
1298
+ width: 10%;
1299
+ }
1300
+
1301
+ .w-15 {
1302
+ width: 15%;
1303
+ }
1304
+
1305
+ .w-20 {
1306
+ width: 20%;
1307
+ }
1308
+
1309
+ .w-30 {
1310
+ width: 30%;
1311
+ }
1312
+
1313
+ .w-35 {
1314
+ width: 35%;
1315
+ }
1316
+
1317
+ .w-40 {
1318
+ width: 40%;
1319
+ }
1320
+
1321
+ .w-45 {
1322
+ width: 45%;
1323
+ }
1324
+
1325
+ .w-55 {
1326
+ width: 55%;
1327
+ }
1328
+
1329
+ .w-60 {
1330
+ width: 60%;
1331
+ }
1332
+
1333
+ .w-65 {
1334
+ width: 65%;
1335
+ }
1336
+
1337
+ .w-70 {
1338
+ width: 70%;
1339
+ }
1340
+
1341
+ .w-80 {
1342
+ width: 80%;
1343
+ }
1344
+
1345
+ .w-85 {
1346
+ width: 85%;
1347
+ }
1348
+
1349
+ .w-90 {
1350
+ width: 90%;
1351
+ }
1352
+
1353
+ .w-95 {
1354
+ width: 90%;
1355
+ }
1356
+
1357
+ .mw-10 {
1358
+ min-width: 10%;
1359
+ }
1360
+
1361
+ .mw-15 {
1362
+ min-width: 15%;
1363
+ }
1364
+
1365
+ .mw-20 {
1366
+ min-width: 20%;
1367
+ }
1368
+
1369
+ .mw-30 {
1370
+ min-width: 30%;
1371
+ }
1372
+
1373
+ .mw-35 {
1374
+ min-width: 35%;
1375
+ }
1376
+
1377
+ .mw-40 {
1378
+ min-width: 40%;
1379
+ }
1380
+
1381
+ .mw-45 {
1382
+ min-width: 45%;
1383
+ }
1384
+
1385
+ .mw-55 {
1386
+ min-width: 55%;
1387
+ }
1388
+
1389
+ .mw-60 {
1390
+ min-width: 60%;
1391
+ }
1392
+
1393
+ .mw-65 {
1394
+ min-width: 65%;
1395
+ }
1396
+
1397
+ .mw-70 {
1398
+ min-width: 70%;
1399
+ }
1400
+
1401
+ .mw-80 {
1402
+ min-width: 80%;
1403
+ }
1404
+
1405
+ .mw-85 {
1406
+ min-width: 85%;
1407
+ }
1408
+
1409
+ .mw-90 {
1410
+ min-width: 90%;
1411
+ }
1412
+
1413
+ .mw-95 {
1414
+ min-width: 90%;
1415
+ }
1416
+
1417
+ .highlight {
1418
+ background-color: #ffff00;
1419
+ color: var(--bs-secondary);
1420
+ }
1421
+
1422
+ .medium {
1423
+ font-weight: 400 !important;
1424
+ font-size: .9em !important;
1425
+ }
1426
+
1427
+ .xmedium {
1428
+ font-size: .85em !important;
1429
+ }
1430
+
1431
+ .large {
1432
+ font-size: .9em !important;
1433
+ }
1434
+
1435
+ .h-83 {
1436
+ height: 83%;
1437
+ }
1438
+
1439
+ .h-40 {
1440
+ height: 40%;
1441
+ }
1442
+
1443
+ .vh-25 {
1444
+ height: 25vh;
1445
+ }
1446
+
1447
+ .vh-40 {
1448
+ height: 40vh;
1449
+ }
1450
+
1451
+ .vh-30 {
1452
+ height: 30vh;
1453
+ }
1454
+
1455
+ .vw-80 {
1456
+ width: 80vw;
1457
+ }
1458
+
1459
+ .vw-100 {
1460
+ width: 100vw;
1461
+ }
1462
+
1463
+ .cursor-disabled {
1464
+ cursor: no-drop;
1465
+ }
1466
+
1467
+ .vh-65 {
1468
+ height: 65vh;
1469
+ }
1470
+
1471
+ .min-vh-40 {
1472
+ min-height: 40vh;
1473
+ }
1474
+
1475
+ .pt-01 {
1476
+ padding-top: .1rem;
1477
+ }
1478
+
1479
+ /* triangle tab wizerd */
1480
+ .nav-pills.nav-wizard {
1481
+ display: flex;
1482
+ flex-grow: 1;
1483
+ }
1484
+
1485
+ .nav-pills.nav-wizard li {
1486
+ position: relative;
1487
+ overflow: visible;
1488
+ border-right: 15px solid #fff;
1489
+ border-left: 15px solid #fff;
1490
+ width: 49%;
1491
+ display: flex;
1492
+ }
1493
+
1494
+ .nav-pills.nav-wizard li:first-child {
1495
+ border-left-width: 0;
1496
+ }
1497
+
1498
+ .nav-pills.nav-wizard li:last-child {
1499
+ border-right: 0;
1500
+ }
1501
+
1502
+ .nav-pills.nav-wizard li a {
1503
+ border-radius: 0;
1504
+ background-color: #A4A2A2;
1505
+ width: 100%;
1506
+ height: 33px;
1507
+ align-content: center;
1508
+ font-weight: bold;
1509
+ color: white !important;
1510
+ text-decoration: none;
1511
+ }
1512
+
1513
+ .nav-pills.nav-wizard li .nav-arrow {
1514
+ position: absolute;
1515
+ top: 0px;
1516
+ right: -20px;
1517
+ width: 0px;
1518
+ height: 0px;
1519
+ border-style: solid;
1520
+ border-width: 17px 0 16px 20px;
1521
+ border-color: transparent transparent transparent #A4A2A2;
1522
+ z-index: 150;
1523
+ }
1524
+
1525
+ .nav-pills.nav-wizard li .nav-widge {
1526
+ position: absolute;
1527
+ top: 0px;
1528
+ left: -20px;
1529
+ width: 0px;
1530
+ height: 0px;
1531
+ border-style: solid;
1532
+ border-width: 17px 0 16px 20px;
1533
+ border-color: #A4A2A2 #A4A2A2 #A4A2A2 transparent;
1534
+ z-index: 150;
1535
+ }
1536
+
1537
+ .nav-pills.nav-wizard li.active .nav-arrow {
1538
+ border-color: transparent transparent transparent var(--primary-color);
1539
+ }
1540
+
1541
+ .nav-pills.nav-wizard li.active .nav-widge {
1542
+ border-color: var(--primary-color) var(--primary-color) var(--primary-color) transparent;
1543
+ }
1544
+
1545
+ .nav-pills.nav-wizard li.active a {
1546
+ background-color: var(--primary-color);
1547
+ }
1548
+
1549
+ .nav-pills.nav-wizard li:hover a {
1550
+ background-color: #A4A2A2;
1551
+ color: #fff;
1552
+ }
1553
+
1554
+ .nav-pills.nav-wizard li.active:hover a {
1555
+ background-color: var(--primary-color);
1556
+ color: #fff;
1557
+ }
1558
+
1559
+ .nav-pills.nav-wizard li.light-wizard a {
1560
+ background-color: #ce710d1a;
1561
+ color: var(--primary-color) !important;
1562
+ }
1563
+
1564
+ .nav-pills.nav-wizard li.light-wizard .nav-arrow {
1565
+ border-color: transparent transparent transparent #ce710d1a;
1566
+ }
1567
+ /* end of triangle tab wizerd */
1568
+
1569
+ .bg-dark-warning {
1570
+ background: var(--bs-dark-warning);
1571
+ }
1572
+
1573
+ .left-0 {
1574
+ left: 0;
1575
+ }
1576
+
1577
+ .right-0 {
1578
+ right: 0;
1579
+ }
1580
+
1581
+ .top-n-10 {
1582
+ top: -10px !important;
1583
+ }
1584
+
1585
+ .min-vh-60 {
1586
+ min-height: 60.5vh !important;
1587
+ }
1588
+ .min-vh-70 {
1589
+ min-height: 70vh !important;
1590
+ }
1591
+
1592
+ .min-vh-83 {
1593
+ min-height: 83vh !important;
1594
+ }
1595
+
1596
+ .text-2xl {
1597
+ font-size: 2rem;
1598
+ }
1599
+
1600
+ .text-xl {
1601
+ font-size: 1.5rem;
1602
+ }
1603
+
1604
+ .text-lg {
1605
+ font-size: 1.25rem;
1606
+ }
1607
+
1608
+ .text-md {
1609
+ font-size: 1.125rem;
1610
+ }
1611
+
1612
+ .text-base {
1613
+ font-size: 1rem;
1614
+ }
1615
+
1616
+ .text-sm {
1617
+ font-size: .875rem;
1618
+ line-height: 1.5rem;
1619
+ }
1620
+
1621
+ .text-xs {
1622
+ font-size: 0.75rem;
1623
+ }
1624
+
1625
+ .text-2xs {
1626
+ font-size: 0.65rem;
1627
+ }
1628
+
1629
+ .text-3xs {
1630
+ font-size: 0.5rem;
1631
+ }
1632
+
1633
+ .text-4xs {
1634
+ font-size: 0.55rem;
1635
+ }
1636
+
1637
+ .text-5xs {
1638
+ font-size: 0.45rem;
1639
+ }
1640
+
1641
+ .mat-mdc-standard-chip {
1642
+ --mdc-chip-label-text-font: "Inter", sans-serif, Arial !important;
1643
+ --mdc-chip-label-text-size: 13px;
1644
+ --mdc-chip-label-text-weight: 400;
1645
+ }
1646
+
1647
+ .text-secondary {
1648
+ --bs-text-opacity: 1;
1649
+ color: var(--bs-secondary) !important;
1650
+ }
1651
+
1652
+ .text-black {
1653
+ --bs-text-opacity: .9;
1654
+ color: rgba(var(--bs-black-rgb), var(--bs-text-opacity)) !important;
1655
+ }
1656
+
1657
+ .text-light-gray {
1658
+ color: var(--text-color);
1659
+ font-size: .8rem;
1660
+ font-weight: 500;
1661
+ }
1662
+
1663
+ h5 {
1664
+ font-size: 15px !important;
1665
+ }
1666
+
1667
+ .state-card {
1668
+ color: var(--bs-white);
1669
+ background-color: var(--bs-bg-dark-gray);
1670
+ height: 100%;
1671
+ display: flex;
1672
+ flex-direction: column;
1673
+ text-align: center;
1674
+ align-content: space-between;
1675
+ box-shadow: var(--bs-box-shadow-sm);
1676
+ border-radius: var(--bs-border-radius);
1677
+ padding: 1rem !important;
1678
+ }
1679
+
1680
+ .shadow-xs {
1681
+ box-shadow: var(--bs-box-shadow-xs);
1682
+ }
1683
+
1684
+ .light-gray-card, .light-gray-container {
1685
+ border: none;
1686
+ background: var(--bs-light-gray);
1687
+ box-shadow: var(--bs-box-shadow-xs);
1688
+ }
1689
+
1690
+ .card-text-2-lg {
1691
+ font-size: 14px !important;
1692
+ }
1693
+
1694
+ .card-text-3-lg {
1695
+ font-size: 15px !important;
1696
+ }
1697
+
1698
+ .card-text-lg {
1699
+ font-size: 13px !important;
1700
+ }
1701
+
1702
+ .card-text-2md {
1703
+ font-size: 11px !important;
1704
+ }
1705
+
1706
+ .card-text-md {
1707
+ font-size: 1.1em !important;
1708
+ }
1709
+
1710
+ .card-text-sm {
1711
+ font-size: 1em !important;
1712
+ }
1713
+
1714
+ .employee-rounded-badge {
1715
+ display: flex;
1716
+ align-items: center;
1717
+ justify-content: center;
1718
+ border: none;
1719
+ border-radius: 50% !important;
1720
+ box-shadow: var(--bs-box-shadow-sm) !important;
1721
+ background-color: darkgray;
1722
+ width: 60px;
1723
+ height: 60px;
1724
+ }
1725
+
1726
+ .pt-2px {
1727
+ padding-top: 2px !important;
1728
+ }
1729
+
1730
+ button {
1731
+ border-radius: var(--bs-border-radius) !important;
1732
+ }
1733
+
1734
+ .text-divider-bold {
1735
+ color: var(--dark-text-color);
1736
+ font-weight: 600 !important;
1737
+ }
1738
+
1739
+ .text-divider-semibold {
1740
+ color: var(--dark-text-color);
1741
+ font-weight: 500 !important;
1742
+ }
1743
+
1744
+ .border-15 {
1745
+ border-width: 25px !important;
1746
+ border-color: var(--bs-dark-warning) !important
1747
+ }
1748
+
1749
+ .light-border-1 {
1750
+ border-radius: var(--bs-border-radius) !important;
1751
+ border: 1px solid var(--bs-border-color);
1752
+ border-width: 1px !important;
1753
+ box-shadow: var(--bs-box-shadow-sm) !important;
1754
+ }
1755
+
1756
+ .bg-light-success {
1757
+ background: #5cb85c;
1758
+ }
1759
+
1760
+ .border-shine-primary {
1761
+ border-color: #F88E1D !important;
1762
+ }
1763
+
1764
+ .popup-header-warning {
1765
+ width: 70px;
1766
+ height: 70px;
1767
+ top: -15%;
1768
+ left: 43%;
1769
+ border: 5px solid var(--bs-dark-warning);
1770
+ box-sizing: border-box;
1771
+ }
1772
+
1773
+ .popup-header-primary {
1774
+ width: 70px;
1775
+ height: 70px;
1776
+ top: -15%;
1777
+ left: 43%;
1778
+ border: 5px solid #F88E1D;
1779
+ box-sizing: border-box;
1780
+ }
1781
+
1782
+ .popup-header-success {
1783
+ width: 70px;
1784
+ height: 70px;
1785
+ top: -15%;
1786
+ left: 43%;
1787
+ border: 5px solid var(--bs-success);
1788
+ box-sizing: border-box;
1789
+ }
1790
+
1791
+ .popup-header-danger {
1792
+ width: 70px;
1793
+ height: 70px;
1794
+ top: -15%;
1795
+ left: 43%;
1796
+ border: 5px solid var(--bs-danger);
1797
+ box-sizing: border-box;
1798
+ }
1799
+
1800
+ .dxpopup-header-warning {
1801
+ width: 45px;
1802
+ height: 45px;
1803
+ border: 5px solid var(--bs-dark-warning);
1804
+ box-sizing: border-box;
1805
+ }
1806
+
1807
+ .dxpopup-header-primary {
1808
+ width: 45px;
1809
+ height: 45px;
1810
+ border: 4px solid var(--primary-color);
1811
+ box-sizing: border-box;
1812
+ }
1813
+
1814
+ .dxpopup-header-success {
1815
+ width: 45px;
1816
+ height: 45px;
1817
+ border: 4px solid var(--bs-success);
1818
+ box-sizing: border-box;
1819
+ }
1820
+
1821
+ .dxpopup-header-danger {
1822
+ width: 45px;
1823
+ height: 45px;
1824
+ border: 4px solid var(--bs-danger);
1825
+ box-sizing: border-box;
1826
+ }
1827
+
1828
+ .gauge {
1829
+ width: 120px;
1830
+ max-width: 250px;
1831
+ font-size: 32px;
1832
+ }
1833
+
1834
+ .gauge__body {
1835
+ width: 100%;
1836
+ height: 0;
1837
+ padding-bottom: 50%;
1838
+ background: #D9D9D9;
1839
+ position: relative;
1840
+ border-top-left-radius: 100% 200%;
1841
+ border-top-right-radius: 100% 200%;
1842
+ overflow: hidden;
1843
+ }
1844
+
1845
+ .gauge__fill {
1846
+ position: absolute;
1847
+ top: 100%;
1848
+ left: 0;
1849
+ width: inherit;
1850
+ height: 100%;
1851
+ transform-origin: center top;
1852
+ transform: rotate(0.25turn);
1853
+ transition: transform 0.2s ease-out;
1854
+ }
1855
+
1856
+ .gauge__cover {
1857
+ width: 75%;
1858
+ height: 150%;
1859
+ background: #ffffff;
1860
+ border-radius: 50%;
1861
+ position: absolute;
1862
+ top: 30%;
1863
+ left: 50%;
1864
+ transform: translateX(-50%);
1865
+ display: flex;
1866
+ align-items: center;
1867
+ justify-content: center;
1868
+ padding-bottom: 25%;
1869
+ box-sizing: border-box;
1870
+ --bs-text-opacity: 1;
1871
+ color: rgba(0, 0, 0, .5) !important;
1872
+ }
1873
+
1874
+ .gauge__label {
1875
+ text-align: center;
1876
+ font-size: 13px;
1877
+ color: #6B6A6A;
1878
+ }
1879
+
1880
+ .employee-rounded-badge-2xl-contaner {
1881
+ width: 60px !important;
1882
+ height: 60px !important;
1883
+ }
1884
+
1885
+ .employee-rounded-badge-2xl {
1886
+ display: flex;
1887
+ align-items: center;
1888
+ justify-content: center;
1889
+ border: none;
1890
+ border-radius: 50% !important;
1891
+ box-shadow: var(--bs-box-shadow-sm) !important;
1892
+ background-color: #D9D9D9 !important;
1893
+ color: var(--dark-text-color);
1894
+ width: 60px !important;
1895
+ height: 60px !important;
1896
+ }
1897
+
1898
+ .employee-rounded-badge-xl-contaner {
1899
+ width: 50px !important;
1900
+ height: 50px !important;
1901
+ }
1902
+
1903
+ .employee-rounded-badge-xl {
1904
+ display: flex;
1905
+ align-items: center;
1906
+ justify-content: center;
1907
+ border: none;
1908
+ border-radius: 50% !important;
1909
+ box-shadow: var(--bs-box-shadow-sm) !important;
1910
+ background-color: #D9D9D9 !important;
1911
+ color: var(--dark-text-color);
1912
+ width: 50px;
1913
+ height: 50px;
1914
+ }
1915
+
1916
+ .employee-rounded-badge-lg-contaner {
1917
+ width: 40px !important;
1918
+ height: 40px !important;
1919
+ }
1920
+
1921
+ .employee-rounded-badge-lg {
1922
+ display: flex;
1923
+ align-items: center;
1924
+ justify-content: center;
1925
+ border: none;
1926
+ border-radius: 50% !important;
1927
+ box-shadow: var(--bs-box-shadow-sm) !important;
1928
+ background-color: #D9D9D9 !important;
1929
+ color: var(--dark-text-color);
1930
+ width: 40px;
1931
+ height: 40px;
1932
+ }
1933
+
1934
+ .employee-rounded-badge-md-contaner {
1935
+ width: 35px !important;
1936
+ height: 35px !important;
1937
+ }
1938
+
1939
+ .employee-rounded-badge-md {
1940
+ display: flex;
1941
+ align-items: center;
1942
+ justify-content: center;
1943
+ border: none;
1944
+ border-radius: 50% !important;
1945
+ box-shadow: var(--bs-box-shadow-sm) !important;
1946
+ background-color: #D9D9D9 !important;
1947
+ color: var(--dark-text-color);
1948
+ width: 35px;
1949
+ height: 35px;
1950
+ }
1951
+
1952
+ .employee-rounded-badge-sm-contaner {
1953
+ width: 25px !important;
1954
+ height: 25px !important;
1955
+ }
1956
+
1957
+ .employee-rounded-badge-sm {
1958
+ display: flex;
1959
+ align-items: center;
1960
+ justify-content: center;
1961
+ border: none;
1962
+ border-radius: 50% !important;
1963
+ box-shadow: var(--bs-box-shadow-sm) !important;
1964
+ background-color: #D9D9D9 !important;
1965
+ color: var(--dark-text-color);
1966
+ width: 25px;
1967
+ height: 25px;
1968
+ }
1969
+
1970
+ .employee-rounded-badge {
1971
+ display: flex;
1972
+ align-items: center;
1973
+ justify-content: center;
1974
+ border: none;
1975
+ border-radius: 50% !important;
1976
+ box-shadow: var(--bs-box-shadow-sm) !important;
1977
+ background-color: #D9D9D9 !important;
1978
+ color: var(--dark-text-color);
1979
+ }
1980
+
1981
+ #customPopupContainer .dx-overlay-content {
1982
+ border-top: 5px solid var(--bs-dark-warning) !important;
1983
+ border-radius: 8px !important;
1984
+ box-shadow: 0px 3px 6px #0000005D !important;
1985
+ }
1986
+
1987
+ .fw-semibold {
1988
+ font-weight: 500 !important;
1989
+ }
1990
+
1991
+ .link-primary:focus, .link-primary:hover {
1992
+ color: RGBA(var(--bs-primary-rgb), var(--bs-link-opacity, 1)) !important;
1993
+ text-decoration-color: RGBA(var(--bs-primary-rgb), var(--bs-link-underline-opacity, 1)) !important;
1994
+ }
1995
+
1996
+ .bg-accent {
1997
+ background-color: var(--accent-color) !important;
1998
+ }
1999
+
2000
+ .text-accent {
2001
+ color: var(--accent-color) !important;
2002
+ }
2003
+
2004
+ .border-accent {
2005
+ border-color: var(--accent-color) !important;
2006
+ }
2007
+
2008
+ .badge-outline-accent {
2009
+ --bs-bg-opacity: 0.25;
2010
+ background-color: #249ea01a !important;
2011
+ border: 1px solid #249ea01a;
2012
+ color: var(--accent-color);
2013
+ }
2014
+
2015
+ .badge-outline-secondary {
2016
+ background-color: var(--bs-light-gray) !important;
2017
+ border: 1px solid var(--bs-secondary);
2018
+ color: var(--bs-secondary);
2019
+ }
2020
+
2021
+ .bg-corn-flower {
2022
+ background-color: #52688f !important;
2023
+ }
2024
+
2025
+ .bg-mauve {
2026
+ background-color: #b7a1a6 !important;
2027
+ }
2028
+
2029
+ .bg-kelly-green {
2030
+ background-color: #18a558 !important;
2031
+ }
2032
+
2033
+ .bg-main-content {
2034
+ background-color: #F8F7F7 !important;
2035
+ }
2036
+
2037
+ h6 {
2038
+ font-weight: 600 !important;
2039
+ }
2040
+
2041
+ .triangle-down-white {
2042
+ width: 0;
2043
+ height: 0;
2044
+ border-left: 20px solid transparent;
2045
+ border-right: 20px solid transparent;
2046
+ border-top: 20px solid #FFF; /* Adjust color as needed */
2047
+ color: transparent;
2048
+ }
2049
+
2050
+ .triangle-down-secandary {
2051
+ width: 0;
2052
+ height: 0;
2053
+ border-left: 20px solid transparent;
2054
+ border-right: 20px solid transparent;
2055
+ border-top: 20px solid rgb(108, 117, 125); /* Adjust color as needed */
2056
+ }
2057
+
2058
+ .triangle-down-light {
2059
+ width: 0;
2060
+ height: 0;
2061
+ border-left: 20px solid transparent;
2062
+ border-right: 20px solid transparent;
2063
+ border-top: 20px solid rgba(var(--bs-light-rgb), 1); /* Adjust color as needed */
2064
+ }
2065
+
2066
+ .triangle-down-success {
2067
+ width: 0;
2068
+ height: 0;
2069
+ border-left: 20px solid transparent;
2070
+ border-right: 20px solid transparent;
2071
+ border-top: 20px solid var(--bs-success);
2072
+ }
2073
+
2074
+ .selecte-card-List:hover {
2075
+ border-color: var(--bs-primary) !important;
2076
+ background-color: #F4EDE3 !important;
2077
+ }
2078
+
2079
+ .selected-card, .selected-anchor-card {
2080
+ background-color: #F4EDE3 !important;
2081
+ border-color: var(--bs-primary) !important;
2082
+ border-width: 2px !important
2083
+ }
2084
+ .not-selected-event-option {
2085
+ background-color: #F4EDE3 !important;
2086
+ }
2087
+ .selected-event-option {
2088
+ background-color: var(--bs-primary);
2089
+ }
2090
+
2091
+ .selected-anchor-card::after {
2092
+ content: "";
2093
+ position: absolute;
2094
+ bottom: -1rem;
2095
+ left: 50%;
2096
+ transform: translateX(-50%);
2097
+ width: 0;
2098
+ height: 0;
2099
+ border-left: 1rem solid transparent;
2100
+ border-right: 1rem solid transparent;
2101
+ border-top: 1rem solid var(--bs-primary);
2102
+ }
2103
+
2104
+ .border-dashed-secondary {
2105
+ border-style: dashed !important;
2106
+ border-width: 1px !important;
2107
+ border-color: var(--bs-secondary) !important;
2108
+ }
2109
+
2110
+ .custom-dashed-border {
2111
+ position: relative;
2112
+ padding: 20px;
2113
+ background: white; /* or whatever your background is */
2114
+ }
2115
+
2116
+ .custom-dashed-border::before {
2117
+ content: "";
2118
+ position: absolute;
2119
+ top: 0;
2120
+ left: 0;
2121
+ right: 0;
2122
+ bottom: 0;
2123
+ border-radius: 0.5rem;
2124
+ pointer-events: none;
2125
+ z-index: 1;
2126
+ background: repeating-linear-gradient(to right, #9D9C9C 0 20px, transparent 20px 30px) top, repeating-linear-gradient(to right, #9D9C9C 0 20px, transparent 20px 30px) bottom, repeating-linear-gradient(to bottom, #9D9C9C 0 20px, transparent 20px 30px) left, repeating-linear-gradient(to bottom, #9D9C9C 0 20px, transparent 20px 30px) right;
2127
+ background-repeat: no-repeat;
2128
+ background-size: 100% 1px, 100% 1px, 1px 100%, 1px 100%;
2129
+ background-position: top left, bottom left, top left, top right;
2130
+ }
2131
+
2132
+
2133
+ .rounded-circle-40 {
2134
+ width: 40px;
2135
+ height: 40px;
2136
+ border-radius: 50%;
2137
+ color: var(--bs-white);
2138
+ }
2139
+
2140
+ .rounded-circle-45 {
2141
+ width: 45px;
2142
+ height: 45px;
2143
+ border-radius: 50%;
2144
+ color: var(--bs-white);
2145
+ }
2146
+
2147
+ .document-card-lg {
2148
+ margin-right: 1rem;
2149
+ margin-left: 0rem;
2150
+ margin-top: .5rem;
2151
+ position: relative;
2152
+ width: 230px;
2153
+ height: 171px;
2154
+ }
2155
+
2156
+ .document-card-md {
2157
+ margin-right: 1rem;
2158
+ margin-left: 0rem;
2159
+ margin-top: .5rem;
2160
+ position: relative;
2161
+ width: 200px;
2162
+ height: 160px;
2163
+ }
2164
+
2165
+ .vacation-color-container-sm {
2166
+ width: 11px !important;
2167
+ height: 11px !important;
2168
+ }
2169
+
2170
+ /** New Font Size **/
2171
+ .fs-8 {
2172
+ font-size: var(--font-size-8) !important;
2173
+ }
2174
+ .fs-10 {
2175
+ font-size: var(--font-size-10) !important;
2176
+ }
2177
+
2178
+ .fs-11 {
2179
+ font-size: var(--font-size-11) !important;
2180
+ }
2181
+
2182
+ .fs-12 {
2183
+ font-size: var(--font-size-12) !important;
2184
+ }
2185
+
2186
+ .fs-14, .fs-15 {
2187
+ font-size: var(--font-size-15) !important;
2188
+ }
2189
+
2190
+ .fs-16 {
2191
+ font-size: var(--font-size-16) !important;
2192
+ }
2193
+
2194
+ .fs-18 {
2195
+ font-size: var(--font-size-18) !important;
2196
+ }
2197
+
2198
+ .fs-20 {
2199
+ font-size: var(--font-size-20) !important;
2200
+ }
2201
+
2202
+ .fs-24 {
2203
+ font-size: var(--font-size-24) !important;
2204
+ }
2205
+
2206
+ .fs-25 {
2207
+ font-size: var(--font-size-25) !important;
2208
+ }
2209
+
2210
+ .fs-28 {
2211
+ font-size: var(--font-size-28) !important;
2212
+ }
2213
+
2214
+ .fs-32, .fs-36 {
2215
+ font-size: var(--font-size-32) !important;
2216
+ }
2217
+
2218
+ .fs-40, .fs-44, .fs-48, .fs-50 {
2219
+ font-size: var(--font-size-40) !important;
2220
+ }
2221
+
2222
+ .fs-56, .fs-64 {
2223
+ font-size: var(--font-size-56) !important;
2224
+ }
2225
+
2226
+ .fs-72, .fs-75, .fs-80 {
2227
+ font-size: var(--font-size-72) !important;
2228
+ }
2229
+
2230
+ .fs-90, .fs-100 {
2231
+ font-size: var(--font-size-90) !important;
2232
+ }
2233
+
2234
+ .fw-light-bold {
2235
+ font-weight: 600 !important;
2236
+ }
2237
+
2238
+ .text-yellow {
2239
+ color: var(--dark-yellow-color);
2240
+ }
2241
+
2242
+ .bg-yellow {
2243
+ background: var(--dark-yellow-color);
2244
+ }
2245
+
2246
+ .circle-sm {
2247
+ border-radius: 50%;
2248
+ width: 0.75rem;
2249
+ height: 0.75rem;
2250
+ }
2251
+
2252
+ .text-dark-accent {
2253
+ color: var(--dark-accent-color);
2254
+ }
2255
+
2256
+ .bg-dark-accent {
2257
+ background-color: var(--dark-accent-color);
2258
+ }
2259
+
2260
+ .start-min-10 {
2261
+ left: -10px;
2262
+ right: auto;
2263
+ }
2264
+
2265
+ .wp-60 {
2266
+ width: 60px;
2267
+ }
2268
+
2269
+ .bg-gray {
2270
+ background: var(--bs-gray) !important;
2271
+ }
2272
+
2273
+ .border-gray {
2274
+ border-color: var(--gray-border-color) !important;
2275
+ }
2276
+
2277
+
2278
+
2279
+ /** New Font Size **/
2280
+ .fs-10 {
2281
+ font-size: var(--font-size-10) !important;
2282
+ }
2283
+
2284
+ .fs-11 {
2285
+ font-size: var(--font-size-11) !important;
2286
+ }
2287
+
2288
+ .fs-12 {
2289
+ font-size: var(--font-size-12) !important;
2290
+ }
2291
+
2292
+ .fs-13 {
2293
+ font-size: var(--font-size-13) !important;
2294
+ }
2295
+
2296
+ .fs-14 {
2297
+ font-size: var(--font-size-14) !important;
2298
+ }
2299
+
2300
+ .fs-15 {
2301
+ font-size: var(--font-size-15) !important;
2302
+ }
2303
+
2304
+ .fs-16 {
2305
+ font-size: var(--font-size-16) !important;
2306
+ }
2307
+
2308
+ .fs-18 {
2309
+ font-size: var(--font-size-18) !important;
2310
+ }
2311
+
2312
+ .fs-20 {
2313
+ font-size: var(--font-size-20) !important;
2314
+ }
2315
+
2316
+ .fs-24 {
2317
+ font-size: var(--font-size-24) !important;
2318
+ }
2319
+
2320
+ .fs-25 {
2321
+ font-size: var(--font-size-25) !important;
2322
+ }
2323
+
2324
+ .fs-28 {
2325
+ font-size: var(--font-size-28) !important;
2326
+ }
2327
+
2328
+ .fs-32 {
2329
+ font-size: var(--font-size-32) !important;
2330
+ }
2331
+
2332
+ .fs-36 {
2333
+ font-size: var(--font-size-36) !important;
2334
+ }
2335
+
2336
+ .fs-40 {
2337
+ font-size: var(--font-size-40) !important;
2338
+ }
2339
+
2340
+ .fs-44 {
2341
+ font-size: var(--font-size-44) !important;
2342
+ }
2343
+
2344
+ .fs-48 {
2345
+ font-size: var(--font-size-48) !important;
2346
+ }
2347
+
2348
+ .fs-50 {
2349
+ font-size: var(--font-size-50) !important;
2350
+ }
2351
+
2352
+ .fs-56 {
2353
+ font-size: var(--font-size-56) !important;
2354
+ }
2355
+
2356
+ .fs-64 {
2357
+ font-size: var(--font-size-64) !important;
2358
+ }
2359
+
2360
+ .fs-72 {
2361
+ font-size: var(--font-size-72) !important;
2362
+ }
2363
+
2364
+ .fs-75 {
2365
+ font-size: var(--font-size-75) !important;
2366
+ }
2367
+
2368
+ .fs-80 {
2369
+ font-size: var(--font-size-80) !important;
2370
+ }
2371
+
2372
+ .fs-90 {
2373
+ font-size: var(--font-size-90) !important;
2374
+ }
2375
+
2376
+ .fs-100 {
2377
+ font-size: var(--font-size-100) !important;
2378
+ }
2379
+
2380
+ .fw-extra-light {
2381
+ font-weight: 200 !important;
2382
+ }
2383
+
2384
+ .fw-extra-light-italic {
2385
+ font-style: italic;
2386
+ font-weight: 200 !important;
2387
+ }
2388
+
2389
+ .fw-light-italic {
2390
+ font-style: italic;
2391
+ font-weight: 300 !important;
2392
+ }
2393
+
2394
+ .fw-400 {
2395
+ font-weight: 400 !important;
2396
+ }
2397
+ .fw-300 {
2398
+ font-weight: 300 !important;
2399
+ }
2400
+ .fw-800 {
2401
+ font-weight: 800 !important;
2402
+ }
2403
+ .fw-meduim {
2404
+ font-weight: 500 !important;
2405
+ }
2406
+
2407
+ .fw-meduim-italic {
2408
+ font-style: italic;
2409
+ font-weight: 500 !important;
2410
+ }
2411
+
2412
+
2413
+ .fw-semibold {
2414
+ font-weight: 600 !important;
2415
+ }
2416
+
2417
+ .fw-semibold-italic {
2418
+ font-style: italic;
2419
+ font-weight: 600 !important;
2420
+ }
2421
+
2422
+ .fw-extra-bold {
2423
+ font-weight: 800 !important;
2424
+ }
2425
+
2426
+ .fw-extra-bold-italic {
2427
+ font-style: italic;
2428
+ font-weight: 800 !important;
2429
+ }
2430
+
2431
+ .lh-header {
2432
+ line-height: 1.2;
2433
+ }
2434
+
2435
+ .hover-primary:hover {
2436
+ color: var(--bs-primary) !important;
2437
+ text-decoration-color: var(--bs-primary) !important;
2438
+ }
2439
+
2440
+ .btn-outline-primary:hover fa-icon.ng-fa-icon {
2441
+ color: white !important;
2442
+ }
2443
+
2444
+ .btn-h-sm {
2445
+ height: 1.875rem;
2446
+ display:flex;
2447
+ justify-content:center;
2448
+ align-items:center;
2449
+ }
2450
+
2451
+ .property-badge {
2452
+ background-color: #F0E4D5 !important;
2453
+ font-size: var(--font-size-10) !important;
2454
+ font-weight:600 !important;
2455
+ color:black;
2456
+ padding:5px;
2457
+ border-radius:0.25rem;
2458
+ line-height: 100%;
2459
+ }
2460
+
2461
+ .transform-neg-20 {
2462
+ transform: rotate(-20deg) scaleX(1) !important;
2463
+ }
2464
+
2465
+ .transform-pos-45 {
2466
+ transform: rotate(45deg) scaleX(1) !important;
2467
+ }
2468
+
2469
+ .transform-neg-180 {
2470
+ transform: scaleX(1) !important;
2471
+ }
2472
+
2473
+ .p-16 {
2474
+ padding: 1rem !important;
2475
+ }
2476
+
2477
+ .card-shadow {
2478
+ box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) !important;
2479
+ }
2480
+
2481
+ .card-radius {
2482
+ border-radius: 0.5rem !important;
2483
+ }
2484
+
2485
+ .bg-disabled {
2486
+ background-color: var(--bs-bg-disabled) !important;
2487
+ }
2488
+
2489
+ .border-start-10 {
2490
+ border-left-width: 10px !important;
2491
+ }
2492
+
2493
+ .border-start-primary {
2494
+ border-left-color: var(--bs-primary) !important;
2495
+ }
2496
+
2497
+ .navbar-brand {
2498
+ float: left;
2499
+ height: 50px;
2500
+ padding: 8px 10px;
2501
+ font-size: 18px;
2502
+ line-height: 21px;
2503
+ padding-bottom: 12px;
2504
+ padding-top: 0px;
2505
+ }
2506
+
2507
+ .employee-initial-circle {
2508
+ display: flex;
2509
+ justify-content: center;
2510
+ align-items: center;
2511
+ font-size: 0.75rem;
2512
+ font-weight: 700;
2513
+ border-radius: 50%;
2514
+ border: 3px solid #fff;
2515
+ width: 32px;
2516
+ height: 32px;
2517
+ color: #2E1500;
2518
+ background-color: #ffdec2;
2519
+ margin-left: -10px !important;
2520
+ }
2521
+
2522
+ .top-100-px {
2523
+ top: 101px !important;
2524
+ }
2525
+
2526
+ .request-tab-shadow {
2527
+ border-radius: 0.5rem !important;
2528
+ background: #FFF;
2529
+ box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
2530
+ }
2531
+
2532
+ start-90 {
2533
+ left: 90% !important;
2534
+ }
2535
+
2536
+ .vertical-text-rotated {
2537
+ writing-mode: vertical-rl;
2538
+ text-orientation: mixed;
2539
+ transform: rotate(180deg);
2540
+ }
2541
+
2542
+ .stick-position {
2543
+ position: sticky;
2544
+ background-color: white;
2545
+ z-index: 1;
2546
+ }
2547
+
2548
+ .container-screen {
2549
+ display: flex;
2550
+ flex-direction: column;
2551
+ width: 100%;
2552
+ height: 100%;
2553
+ padding-left: 1.5rem;
2554
+ padding-right: 1.5rem;
2555
+ box-sizing: border-box;
2556
+ }
2557
+
2558
+ .btn-white:hover {
2559
+ background-color: var(--bg-light-gray) !important;
2560
+ }
2561
+
2562
+ .btn-white {
2563
+ background-color: #ffffff !important;
2564
+ }
2565
+
2566
+ .vh-40 {
2567
+ height: 40vh;
2568
+ }
2569
+
2570
+ .filter-collapsed {
2571
+ height: 0;
2572
+ overflow: hidden;
2573
+ transition: height 0.3s ease-in-out;
2574
+ }
2575
+
2576
+ .filter-expanded {
2577
+ height: auto;
2578
+ transition: height 0.3s ease-in-out;
2579
+ }
2580
+
2581
+ .page-item.arrow .page-link {
2582
+ border-radius: 50%;
2583
+ box-shadow: 0 5px 6px rgba(0, 0.15, 0, 0.18);
2584
+ border: none;
2585
+ }
2586
+
2587
+ .page-item.page-number .page-link {
2588
+ border: none;
2589
+ background-color: transparent;
2590
+ color: black !important;
2591
+ }
2592
+
2593
+ .page-item.active > .page-link {
2594
+ background-color: transparent;
2595
+ color: var(--primary-color) !important;
2596
+ border-color: none;
2597
+ }
2598
+ .page-item:first-child .page-link {
2599
+ border-radius: 50%;
2600
+ }
2601
+ .page-item:last-child .page-link {
2602
+ border-radius: 50%;
2603
+ }
2604
+
2605
+ .disabled > .page-link, .page-link.disabled {
2606
+ pointer-events: none;
2607
+ background-color: #ECECEC !important;
2608
+ border-color: #c9c7c7 !important;
2609
+ }
2610
+ .page-item.active .page-link {
2611
+ border: none !important;
2612
+ box-shadow: none !important;
2613
+ }
2614
+ .active > .page-link, .page-link.active {
2615
+ border: none !important;
2616
+ }
2617
+ .page-item .page-link:focus,
2618
+ .page-item .page-link:active,
2619
+ .page-item.active .page-link:focus,
2620
+ .page-item.active .page-link:active {
2621
+ outline: none !important;
2622
+ box-shadow: none !important;
2623
+ border: none !important;
2624
+ }
2625
+ .warning-description-truncate {
2626
+ display: -webkit-box;
2627
+ -webkit-line-clamp: 3;
2628
+ line-clamp: 3;
2629
+ -webkit-box-orient: vertical;
2630
+ overflow: hidden;
2631
+ }
2632
+ .text-justify {
2633
+ text-align: justify !important;
2634
+ }
2635
+ .light-info{
2636
+ color: var(--light-info-color) !important
2637
+ }
2638
+
2639
+ .min-h-800{
2640
+ min-height: 800px !important;
2641
+ }
2642
+ .bg-light-info {
2643
+ background-color: var(--light-info-color) !important
2644
+ }
2645
+ .text-light-dark {
2646
+ color: var(--dark-text-color);
2647
+ }
2648
+ .bg-light-secondary {
2649
+ background-color: var(--sidebar-color) !important;
2650
+ }
2651
+ @media only screen and (min-width: 1024px) and (max-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) {
2652
+ .w-lg-80 {
2653
+ width: 80% !important;
2654
+ }
2655
+ }
2656
+ .line-clamp-two {
2657
+ display: -webkit-box;
2658
+ -webkit-line-clamp: 2;
2659
+ line-clamp: 2;
2660
+ -webkit-box-orient: vertical;
2661
+ overflow: hidden;
2662
+ text-overflow: ellipsis;
2663
+ word-break: break-word;
2664
+ }
2665
+
2666
+ .bg-light-green{
2667
+ background-color:var(--light-blue);
2668
+ }
2669
+ .mh-150{
2670
+ min-height:150px
2671
+ }
2672
+ .disabled-date {
2673
+ opacity: 0.4 !important;
2674
+ color: #ccc !important;
2675
+ background-color: #f5f5f5 !important;
2676
+ }
2677
+
2678
+ .state-badge {
2679
+ font-size: 12px;
2680
+ font-weight: normal;
2681
+ border-radius: .25rem !important;
2682
+ display: flex;
2683
+ justify-content: center;
2684
+ }
2685
+
2686
+ .mr-3{
2687
+ margin-right:1rem;
2688
+ }
2689
+ .text-danger {
2690
+ color: #B71C1C;
2691
+ }
2692
+ .cell-disabled {
2693
+ border-radius: 2px;
2694
+ border: 1px solid #DCDCDC;
2695
+ background: var(--bs-bg-disabled) !important;
2696
+ }
2697
+ .cell-vacation {
2698
+ border-radius: 2px;
2699
+ border: 2px solid #FDE7AC;
2700
+ background: rgba(242, 208, 117, 0.50);
2701
+ }
2702
+ .cell-offday {
2703
+ border-radius: 2px;
2704
+ border: 2px solid #FDE7AC;
2705
+ background: rgba(242, 208, 117, 0.50) !important;
2706
+ }
2707
+ .bg-offday {
2708
+ background: rgba(242, 208, 117, 0.50) !important;
2709
+ }
2710
+ .min-h-100{
2711
+ min-height:100px
2712
+ }
2713
+
2714
+ #overtimeDataGrid .dx-editor-cell .dx-texteditor, .dx-editor-cell .dx-texteditor .dx-texteditor-input {
2715
+ background: transparent !important;
2716
+ }
2717
+ #overtimeDataGrid .dx-datagrid-headers .dx-texteditor-input, .dx-datagrid-rowsview .dx-texteditor-input {
2718
+ padding: 5px 0px;
2719
+ min-height:unset;
2720
+ }
2721
+ .composite-icon-container {
2722
+ position: relative;
2723
+ display: inline-flex;
2724
+ align-items: center;
2725
+ justify-content: center;
2726
+ width: 24px;
2727
+ height: 24px;
2728
+ }
2729
+
2730
+ .composite-icon-container .main-icon {
2731
+ font-size: 22px;
2732
+ position: relative;
2733
+ z-index: 1;
2734
+ }
2735
+
2736
+ .composite-icon-container .badge-icon {
2737
+ position: absolute;
2738
+ bottom: -2px;
2739
+ right: -3px;
2740
+ font-size: 10px;
2741
+ background: white;
2742
+ border-radius: 50%;
2743
+ border: 2px solid currentColor;
2744
+ padding: 2px;
2745
+ width: 16px;
2746
+ height: 16px;
2747
+ display: flex;
2748
+ align-items: center;
2749
+ justify-content: center;
2750
+ z-index: 2;
2751
+ }
2752
+